// out: ./dist/index.css

@import (reference) "color.less";
@import (reference) "font.less";
@import (reference) "variables.less";


.border(@x) {
    border: 1px solid @x;
}

.borderRadius(@x) {
    border-radius: @x;
}

// general
* {
    margin: 0;
    padding: 0;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body {
    background-color: var(--color-white);
    .fontRegular();
    font-size: 14px;
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
    background-size: cover !important;
    color: var(--color-text);
}

p {
    line-height: 1.5em;
}

ul,
li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.flex {
    display: flex;
    gap: var(--gap-space);
}

a {
    cursor: pointer !important;
}


button {
    border: 0;
    cursor: pointer;
    background-color: transparent;
    .fontRegular();
}

input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: var(--checkbox-size, 18px);
    height: var(--checkbox-size, 18px);
    border-radius: var(--checkbox-border-radius, 7px);
    border: var(--checkbox-border-width, 1px) solid var(--color-checkbox-border, rgba(145, 158, 171, 0.6));
    background-color: var(--color-checkbox-bg, var(--color-white));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    cursor: pointer;
    position: relative;

    &::after {
        content: "";
        width: calc(var(--checkbox-size, 18px) - 8px);
        height: calc(var(--checkbox-size, 18px) - 8px);
        -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="white" d="M7.629 14.712a1 1 0 0 1-1.414 0l-3.929-3.93a1 1 0 0 1 1.414-1.414l3.222 3.222 8.372-8.373a1 1 0 0 1 1.414 1.415l-9.079 9.08z"/></svg>') center/contain no-repeat;
        mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="white" d="M7.629 14.712a1 1 0 0 1-1.414 0l-3.929-3.93a1 1 0 0 1 1.414-1.414l3.222 3.222 8.372-8.373a1 1 0 0 1 1.414 1.415l-9.079 9.08z"/></svg>') center/contain no-repeat;
        background: transparent;
        transition: transform 0.2s ease, background-color 0.2s ease;
        transform: scale(0);
    }

    &:hover {
        border-color: var(--color-checkbox-border-hover, rgba(120, 134, 157, 0.9));
        background-color: var(--color-checkbox-bg-hover, rgba(247, 249, 252, 1));
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
    }

    &:focus-visible {
        outline: 2px solid rgba(70, 116, 222, 0.35);
        outline-offset: 2px;
    }

    &:checked {
        background-color: var(--color-checkbox-bg-checked, var(--color-primary));
        border-color: var(--color-checkbox-border-checked, var(--color-primary));

        &::after {
            background: var(--color-checkbox-check, var(--color-white));
            -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="white" d="M7.629 14.712a1 1 0 0 1-1.414 0l-3.929-3.93a1 1 0 0 1 1.414-1.414l3.222 3.222 8.372-8.373a1 1 0 0 1 1.414 1.415l-9.079 9.08z"/></svg>') center/contain no-repeat;
            mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="white" d="M7.629 14.712a1 1 0 0 1-1.414 0l-3.929-3.93a1 1 0 0 1 1.414-1.414l3.222 3.222 8.372-8.373a1 1 0 0 1 1.414 1.415l-9.079 9.08z"/></svg>') center/contain no-repeat;
            transform: scale(1);
        }
    }

    &:disabled {
        cursor: not-allowed;
        background-color: var(--color-checkbox-bg-disabled, rgba(148, 158, 183, 0.15));
        border-color: var(--color-checkbox-border-disabled, rgba(148, 158, 183, 0.4));
        box-shadow: none;

        &::after {
            background: var(--color-checkbox-check-disabled, rgba(148, 158, 183, 0.4));
        }

        &:checked {
            background-color: var(--color-checkbox-bg-disabled-checked, rgba(148, 158, 183, 0.25));
            border-color: var(--color-checkbox-border-disabled-checked, rgba(148, 158, 183, 0.5));
        }
    }
}

.containerFluid {
    width: 100%;
    .widthAvailable() !important;
}

.container {
    width: 1100px;
    margin-right: auto;
    margin-left: auto;

    &.fluidLeft {
        margin-left: 0 !important;
    }
}

.pullRight {
    float: right;
}

.pullLeft {
    float: left;
}

.section {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    .left {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
    }

    .right {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
    }
}

a {
    transition: all ease 0.3s;

    &:hover {
        transition: all ease 0.3s;
    }
}

.btn {
    // background: var(--color-btn-default);
    color: var(--color-text);
    // border: 2px solid transparent;
    border: 1px solid rgba(0, 0, 0, 0);

    -webkit-border-radius: var(--border-radius-btn);
    border-radius: var(--border-radius-btn);
    text-decoration: none;
    padding: 7px 24px 7px 16px;
    display: flex;
    gap: 8px;
    font-size: 15px;
    align-items: center;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: all ease 0.3s;
    text-align: center;
    width: max-content;

    span {
        font-size: 0.85rem;
    }

    span,
    .icon,
    i {
        pointer-events: none;
    }

    &.spaceLeft {
        margin-left: 8px;
    }

    &.spaceRight {
        margin-right: 8px;
    }

    &:hover {
        transition: all ease 0.3s;
        background-color: var(--color-btn-default-hover); // opacity: 0.7;
    }

    &:focus {
        transition: all ease 0.3s;
        border: 1px solid rgba(37, 213, 163, 0.9) !important;
        outline: 1px solid rgba(37, 213, 163, 0.9) !important;
    }

    &.disabled {
        opacity: 0.7;
        pointer-events: none;
        user-select: none;

        border: 1px solid var(--color-alert-default) !important;
        background: var(--color-alert-default);
        color: var(--color-input-placeholder);
    }

    &.btnResponsive {
        .widthAvailable();
    }

    &.btnDefault {
        border: 1px solid var(--color-alert-default);
        background: var(--color-default);
        color: var(--color-text);

        &:hover {
            border-color: var(--color-line);
        }
    }

    &.btnSecondary {
        border: 1px solid var(--color-alert-default);
        background: var(--color-default);
        color: var(--color-text);

        &:hover {
            border-color: var(--color-line);
        }
    }

    &.btnPrimary {
        background-color: var(--color-btn-primary);
        color: var(--color-white);

        &:hover {
            color: var(--color-white);
            background-color: var(--color-btn-primary-hover);
        }

        &.disabled {
            border: 1px solid var(--color-btn-primary);
            background: var(--color-alert-default);
            color: var(--color-white);
            opacity: 0.8;
            pointer-events: none;
            user-select: none;

            &:focus {
                border: 1px solid var(--color-line) !important;
                outline: 1px solid var(--color-line) !important;
                color: var(--color-line) !important;
            }
        }
    }

    &.btnInfo {
        background-color: var(--color-btn-info);
        color: var(--color-white);

        &:hover {
            color: var(--color-white);
            background-color: var(--color-btn-info-hover);
        }
    }

    &.btnSuccess {
        background: var(--color-btn-success) !important;
        color: var(--color-white) !important;

        &:hover {
            background-color: var(--color-btn-success-hover) !important;
        }
    }

    &.btnWarning {
        background-color: var(--color-btn-warning);
        color: var(--color-white);

        &:hover {
            background-color: var(--color-btn-warning-hover);
        }
    }

    &.btnDelete {
        &:hover {
            color: var(--color-btn-danger);
        }
    }

    &.btnDanger {
        background-color: var(--color-btn-danger);
        color: var(--color-white);

        &:hover {
            background-color: var(--color-btn-danger-hover);
        }
    }

    &.btnFull {
        background: transparent !important;
        border: 1px solid var(--color-line) !important;

        &:hover {
            //border-color: var(--color-btn-full-hover)  !important;
            background-color: var(--color-btn-full-hover) !important;
            color: var(--color-text) !important;
            text-decoration: none !important;
        }

        &.disabled {
            background-color: var(--color-btn-disabled) !important;
            border-color: var(--color-btn-disabled);
            color: var(--color-text);
            cursor: not-allowed;
        }
    }

    &.btnLink {
        background: transparent;
        border-color: transparent;
        text-decoration: underline !important;

        &:hover {
            text-decoration: underline !important;
        }
    }

    &.btnBack {
        .icon {
            font-size: 16px;
        }

        span {
            font-size: 0.80em;
        }
    }

    &.btnBackPage {
        margin-top: 70px;
        display: inline-block;
        margin: 100px 16px 16px;

        .icon {
            border: 1.3pt solid #bfc7c6;
            color: #bfc7c6;
            background: var(--color-white);
            font-size: 16px;
            padding: 8px 8px 8px 8px;
            border-radius: 30px;
        }

        span {
            font-size: 0.85em;
        }
    }

    &.btnLg {
        font-size: 18px;
        padding: 8px 16px;
    }

    &.btnBig {
        font-size: 21px;
        padding: 8px 16px;
    }

    &.btnSmall {
        font-size: 14px !important;
        padding: 4px 8px !important;
    }

    &.btnMini {
        font-size: 13px !important;
        padding: 4px 8px !important;

        &.btnIcon {
            padding: 4px 4px !important;
            border: 1px solid #a5a6ad;

            .icon {
                margin-left: 0;
                margin-right: 0;
                font-size: 14px !important;
            }

            &:hover {
                color: var(--color-primary);
            }

            &:focus {
                border-color: transparent !important;
            }

        }
    }

    &.btnHiperMini {
        font-size: 12px !important;
        padding: 0 4px !important;
    }

    &.btnIconRight {
        padding-right: 30px !important;
        padding-left: 16px !important;
        text-align: left;
        text-decoration: none !important;

        .icon {
            position: absolute;
            right: 10px;
            // top: 10px;
            left: auto !important;
        }
    }

    &.btnIconLeft {
        padding-right: 16px !important;
        padding-left: 30px !important;
        text-align: right;
        text-decoration: none !important;

        .icon {
            position: absolute;
            left: 10px;
            right: auto !important;
            // top: 10px;
        }
    }

    &.btnIcon {
        background: transparent;
        font-size: 18px;
        padding: 4px;

        &.btnSmall {
            font-size: 14px !important;
            padding: 4px !important;
        }

        .icon {
            //opacity: 0.7;
            color: var(--color-close-modal);
        }

        &:hover {
            color: var(--color-black);

            .icon {
                color: var(--color-primary);
            }
        }

        &:focus {
            border-color: transparent !important;
            outline-color: transparent !important;
        }
    }

    .icon-loading {
        -webkit-animation: 2s rotate linear infinite;
        animation: 2s rotate linear infinite;
        -webkit-transform-origin: 15% 50%;
        transform-origin: 50% 50%;
        /* left                 : 5px !important; */
        /* width                : 20px; */
        /* height               : 20px; */
        display: flex;
        align-items: center;
        justify-content: center;

        &::before {
            margin-left: 0;
            margin-right: 0;
            margin-top: 0;
            margin-bottom: 0;
        }
    }

    &.btnBold {
        font-weight: 500;
    }


    &.btnCenter {
        justify-content: center;
    }

    &.btnSelection {
        .widthAvailable();
        padding-left: 8px;
        padding-top: 8px;
        padding-bottom: 8px;

        &:hover {
            background-color: var(--color-btn-hover) !important;
            color: var(--color-white) !important;
        }
    }

    &.btnSwitch {
        position: relative;
        padding-left: 4px;
        padding-right: 4px;
        background-color: transparent;
        .transition();

        &:hover {
            .transition();

            label {
                opacity: 1;
            }

            .switch {
                box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.15);
            }
        }

        &[value="1"] {
            .switch {
                background-color: var(--color-btn-hover-light);
                border: 1px solid #CADDF4;

                .icon {
                    color: var(--color-primary);
                    right: 1px;
                    left: auto;
                }
            }
        }

        label {
            opacity: .8;
        }

        .switch {
            position: relative;
            border: 1px solid var(--color-line);
            background-color: var(--color-white);
            height: 17px;
            width: 34px;
            border-radius: 20px;




            .icon {
                position: absolute;
                font-size: 15px;
                top: 1px;
                left: 1px;
                color: var(--color-text);
                opacity: .9;
            }
        }


    }

}

.col5w {
    width: 4% !important;
}

.col10w {
    width: 10% !important;
}

.col15w {
    width: 15% !important;
}

.col20w {
    width: 20% !important;
}

.col25w {
    width: 25% !important;
}

.col30w {
    width: 35% !important;
}

.col35w {
    width: 30% !important;
}

.col33w {
    width: 33% !important;
}

.col40w {
    width: 40% !important;
}

.col45w {
    width: 45% !important;
}

.col50w {
    width: 49.5% !important;
}

.col55w {
    width: 45% !important;
}

.col60w {
    width: 60% !important;
}

.col65w {
    width: 65% !important;
}

.col70w {
    width: 70% !important;
}

.col75w {
    width: 75% !important;
}

.col80w {
    width: 80% !important;
}

.col85w {
    width: 85% !important;
}

.col90w {
    width: 90% !important;
}

.col95w {
    width: 95% !important;
}

.col100w {
    width: 100% !important;
}

.badge {
    padding: 4px 8px;
    font-size: 12px;
    line-height: 1;
    color: var(--color-white);

    border-radius: 20px;

    &.badgePill {
        border-radius: 20px;
    }

    &.badgeDefault,
    &.badge-default {
        background-color: var(--color-default-soft);
        color: var(--color-text);
    }

    &.badgePrimary,
    &.badge-primary {
        background-color: var(--color-primary-soft);
    }

    &.badgeSuccess,
    &.badge-success {
        background-color: var(--color-success-soft);
        color: var(--color-green-dark);
    }

    &.badgeInfo,
    &.badge-info {
        background-color: var(--color-info-soft);
        color: var(--color-blue-dark);
    }

    &.badgeWarning,
    &.badge-warning {
        background-color: var(--color-warning-soft);
        color: var(--color-orange-dark);
    }

    &.badgeDanger,
    &.badge-danger {
        background-color: var(--color-danger-soft);
        color: var(--color-danger);
    }

    &.badgeOther,
    &.badge-other {
        background-color: var(--color-gray-soft);
        color: var(--color-text);
    }

    &.badgeDarkBlue,
    &.badge-dark-blue {
        background-color: var(--color-dark-blue-soft);
        color: var(--color-dark-blue);
    }

    &.badgeLightBlue,
    &.badge-light-blue {
        background-color: var(--color-light-blue);
        color: var(--color-blue);
    }

    &.badgeBlack,
    &.badge-black {
        background-color: var(--color-black-soft);
        color: var(--color-black);
    }

    &.badgePurple,
    &.badge-purple {
        background-color: var(--color-purple-soft);
        color: var(--color-purple);
    }

}

.boxBnts {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.flexLineEnd {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.searchBox {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    .innerSearch {
        border: 1px solid var(--color-line);
        border-radius: var(--border-radius);
    }

    .icon {
        position: absolute;
        left: 7px;
        top: 7px;
    }

    input {
        border: 0;
        border-radius: var(--border-radius);
        padding: 4px 16px 4px 30px;
    }
}

.boxBtnSlit {
    display: flex;
    position: relative;
    align-items: center;

    .btn {
        &:nth-child(1) {
            border-right: 0;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }

        &:nth-child(2) {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
            padding: 8px 8px 8px 8px !important;
        }
    }

    &.btnSlit {
        &.on {
            background-color: var(--color-btn-primary) !important;
            color: var(--color-primary);
            //color: #fff;
            border-bottom-right-radius: 0px;
            border-color: var(--color-btn-primary);
        }
    }

    .slitMenu {
        min-width: 120px;
        position: fixed;
        display: flex;
        background: var(--color-white);
        border-radius: 5px;
        .widthAvailable();
        z-index: 1000;
        overflow: hidden;
        height: 0;
        opacity: 0;
        // transition: all ease 0.3s;
        top: 0;
        left: 0;
        flex-direction: column;

        &:nth-child(1) {
            border-right: 0;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }

        ul {
            .widthAvailable();
            margin: 0;

            li {
                .widthAvailable();
                margin: 0;
            }
        }

        a {
            font-size: 15px !important;
            text-align: left;
            min-height: 19px;
            .widthAvailable();
        }

        &.slitMenuDown {
            top: 30px;
            right: 0px;
            border-top-right-radius: 0px;
        }

        &.on {
            opacity: 1;
            // transition: all ease 0.3s;
            height: auto;
            padding: 0;
            background-color: white;
            //border: 1px solid @colorLine;


            &.slitMenuDown {
                box-shadow: 0px 4px 7px rgba(0, 0, 0, 30%);
            }
        }
    }
}

.boxAccions {
    display: flex;
    gap: 8px;
}

.animated.fast {
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
}

.animated.enlarge {
    -webkit-animation: 2s enlarge linear;
    animation: 2s enlarge linear;
}

.disabled {
    opacity: 0.7;
    pointer-events: none;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes enlarge {
    from {
        height: 1px !important;
        max-height: 1px !important;
        min-height: 1px !important;
    }

    to {
        height: auto;
        max-height: auto;
        min-height: auto;
    }
}

@-webkit-keyframes rotate {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
    }
}

input[type="text"],
input[type="password"] {
    /* Remove First */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

:-moz-placeholder {
    color: var(--color-input-placeholder);
    .fontRegular();
}

::-webkit-input-placeholder {
    color: var(--color-input-placeholder);
    .fontRegular();
}

::-moz-placeholder {
    color: var(--color-input-placeholder);
    .fontRegular();
}

:-ms-input-placeholder {
    color: var(--color-input-placeholder);
    .fontRegular();
}

::-webkit-scrollbar {
    //display: none;
    width: 0px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

.scrollBar::-webkit-scrollbar-track {
    width: 5px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.15);
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

/* Handle */
.scrollBar::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: #dadbe5;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.15);
}

.scrollBar::-webkit-scrollbar-thumb:window-inactive {
    background: #dadbe5;
}

a,
button {
    .icon {
        pointer-events: none;
    }
}

textarea:focus,
input:focus,
*:focus {
    outline: none !important;
    outline-width: 0 !important;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}

input:-internal-autofill-selected {
    -webkit-appearance: menulist-button;
    background-color: yellow !important;
}

input:-webkit-autofill {
    -webkit-appearance: menulist-button;
    background-color: yellow !important;
}

a,
input,
button {
    text-decoration: none !important;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
    box-shadow: 0 0 0 1000px #fff inset;
    transition: all 5000s ease-in-out 0s;
}

.boxShadow() {
    // box-shadow: 0 1px 4px 0 rgba(167, 167, 177, 0.86);
    // box-shadow: 0 1px 4px 0 rgba(208, 208, 208, 0.86);

    background: #ffffff;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3);
    border-radius: 6px;
}

.boxShadowDark() {
    box-shadow: 0 1px 11px 0 rgba(131, 131, 140, 0.86);
}

.boxShadowWindow () {
    background: var(--color-white);
    -webkit-box-shadow: 0px 3px 16px 0px rgba(0, 0, 0, 0.26);
    -moz-box-shadow: 0px 3px 16px 0px rgba(0, 0, 0, 0.26);
    box-shadow: 0px 3px 16px 0px rgba(0, 0, 0, 0.26);
    -webkit-border-radius: 8px;
    border-radius: 8px;
}

.boxShadowList () {
    max-height: 200px;
    overflow-y: scroll;
    background: var(--color-white);
    -webkit-box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 14%),
        0px 1px 10px 0px rgba(0, 0, 0, 12%),
        0px 2px 4px -1px rgba(0, 0, 0, 20%);
    box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 14%),
        0px 1px 10px 0px rgba(0, 0, 0, 12%),
        0px 2px 4px -1px rgba(0, 0, 0, 20%);
    -webkit-border-radius: 2px;
    border-radius: 2px;
}

.transition(@x :.3s) {
    transition: all ease @x;
}

.widthAvailable() {
    width: -webkit-fill-available;
    width: -moz-available;
    width: fill-available;
}

.heightAvailable() {
    height: -webkit-fill-available;
    height: -moz-available;
    height: fill-available;
}

.divisor {
    width: 100%;
    display: flex;

    .linea {
        width: 45%;
        border-top: 1px solid #e6e1e1;
        margin-top: 8px;
    }

    .centro {
        text-align: center;
        color: #ccc;
        width: 10%;
    }
}

.loading {
    width: 36px;
    height: 36px;
    left: 50%;
    top: 20px;
    margin-left: -16px;
    opacity: 1;
    position: relative;
    background: url(../../img/loading.svg) no-repeat center center;
    background-size: contain;
    z-index: 100;
    transition: all ease 0.2s;

    &.off {
        .transition(0.2s);
        opacity: 0;
        top: -2260px;
        position: absolute;
    }

    &.txt {
        span {
            color: var(--color-white);
            position: absolute;
            top: 40px;
            left: -8px;
            color: var(--color-text);
        }
    }

    &.loading-fluid {
        width: 100%;
        position: absolute;
        height: 100%;
        background-color: rgba(21, 21, 21, 0.65);
        left: 0;
        top: 0;
        background-size: 50px;
        margin-left: 0;
    }

    &.loadingFluid {
        width: 100%;
        position: absolute;
        height: 100%;
        // background-color: rgba(21, 21, 21, 0.65);
        left: 0;
        top: 0;
        background-size: 50px;
        margin-left: 0;
    }

    &.loadingFluidTop {
        width: 100%;
        position: relative;
        height: -webkit-fill-available;
        height: -moz-available;
        height: fill-available;
        min-height: 145px;
        left: 0;
        top: 0;
        background-size: 40px;
        background-position-y: 0px;
        margin-left: 0;
    }

}

/* Alert */

.alert {
    border: none;
    padding: 16px 16px;
    color: var(--color-white);
    font-size: 110%;
    line-height: 145%;
    display: flex;

    >a {
        color: var(--color-white);
    }
}

.iconDanger {
    color: var(--alert-danger);
}

.iconSuccess {
    color: var(--alert-success);
}

.iconWarning {
    color: var(--alert-warning);
}

.iconPrimary {
    color: var(--alert-primary);
}

.iconInfo {
    color: var(--alert-info);
}

.bgDanger {
    background-color: var(--alert-danger);
}

.bgSuccess {
    background-color: var(--alert-success);
}

.bgInfo {
    background-color: var(--alert-info);
}

.bgWarning {
    background-color: var(--alert-warning);
}

.bgPrimary {
    background-color: var(--alert-primary);
}

.alertDanger {
    background-color: var(--color-alert-danger);
    border-radius: var(--border-radius-form);
    color: var(--color-white);
    box-shadow: var(--shadow-alert) rgba(151, 102, 38, 0.25);
}

.alertSuccess {
    background-color: var(--color-success);
    border-radius: var(--color-success);
    color: var(--color-white);
    box-shadow: var(--shadow-alert) rgba(151, 102, 38, 0.25);
}

.alertWarning {
    background: var(--color-alert-warning);
    color: var(--color-white);
    box-shadow: var(--shadow-alert) rgba(151, 102, 38, 0.25);
}

.alertInfo {
    background: var(--color-alert-info);
    color: var(--color-white);
    box-shadow: var(--shadow-alert) rgba(55, 132, 152, 0.25);
}

.space1w {
    width: 4% !important;
}

.space2w {
    width: 14% !important;
}

.space3w {
    width: 23% !important;
}

.space4w {
    width: 33% !important;
}

.space5w {
    width: 43% !important;
}

.space6w {
    width: 47.5% !important;
}

.space7w {
    width: 53% !important;
}

.space8w {
    width: 63% !important;
}

.space9w {
    width: 73% !important;
}

.space10w {
    width: 83% !important;
}

.space11w {
    width: 93% !important;
}

.space12w {
    width: 98% !important;
}

.boxAlert {
    position: fixed;
    margin: 0;
    z-index: 1300;
    max-width: 340px;
    height: auto;
    display: flex;
    flex-direction: column;

    &.bottom-left {
        bottom: 20px;
        right: 20px;
    }

    &.top-left {
        top: 50px;
        right: 20px;
    }

    &.top-right {
        top: 50px;
        right: 20px;
    }

    &.bottom-right {
        bottom: 20px;
        right: 20px;
    }

    .alert {
        .widthAvailable();
        position: relative;
        margin: 0 0 4px 0;
        z-index: 200;
        height: auto;
        min-height: 28px;
        display: block;
        border-radius: 5px;
        padding: 8px 16px;
        box-shadow: var(--shadow-alert) rgba(86, 118, 154, 0.25);
        display: flex;
        align-items: flex-start;
        margin-left: 16px;

        &.bottom-left {
            bottom: 20px;
            right: 20px;
        }

        &.top-left {
            top: 70px;
            right: 20px;
        }


        &.success {
            background: var(--alert-success);
            color: var(--color-white);
            box-shadow: var(--shadow-alert-card) rgba(86, 118, 154, 0.25);
        }

        &.warning {
            background: var(--alert-warning);
            color: var(--color-white);
            box-shadow: var(--shadow-alert-card) rgba(151, 102, 38, 0.25);
        }

        &.danger {
            background: var(--alert-danger);
            color: var(--color-white);
            box-shadow: var(--shadow-alert-card) rgba(150, 27, 27, 0.25);
        }

        &.info {
            background: var(--alert-info);
            color: var(--color-white);
            box-shadow: var(--shadow-alert-card) rgba(55, 132, 152, 0.25);
        }



        .icon {
            font-size: 24px;
            display: inline-block;
            margin-right: 8px;
        }

        .text {}
    }
}

.rotation() {
    animation: rotation 3s infinite alternate;
}

.loadingPageModule {
    position: absolute;
    top: 0;
    left: 0;
    height: 5px;
    width: 100%;
    background-color: var(--color-white);

    .loadingBar {
        width: 0;
        height: 5px;
        background-color: var(--color-loading-bar);
    }
}

.groupTabs {
    .widthAvailable();
}

.tabs {
    display: flex;
    border-bottom: 1px solid var(--color-line);
    .widthAvailable();

    .tab {
        padding: 8px 16px;
        font-size: 15px;
        background: transparent;
        border: 0;
        border-bottom: 2px solid transparent;
        font-weight: normal;
        color: var(--color-tab-inactive);
        gap: 8px;
        display: flex;
        align-items: center;

        &.active {
            color: var(--color-tab-active);
            font-weight: bold;
            border-bottom-color: var(--color-tab-active);
        }
    }
}

.tabsContents {
    .widthAvailable();
    display: inline-grid;
    min-height: 95%;

    .header {
        padding-top: 8px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .tabContent {
        .widthAvailable();
        display: none;
        overflow-y: auto;

        >.head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 16px;
            padding-left: 4px;
            padding-right: 4px;

            .title {
                font-size: 1em;
                font-weight: 700;
            }
        }

        >.tbody {
            padding: 0;
            margin-top: 16px;
        }

        &.active {
            display: inline-block;
        }
    }
}

.groupTabs {
    &.groupTabsSegmentedControl {
        gap: var(--gap-space);
        display: flex;
        flex-direction: column;

        .tabs {
            border: 1px solid var(--color-line);
            background: var(--color-white);
            border-radius: var(--border-radius-table);
            padding: var(--table-padding-laterals);

            .tab {
                padding: 4px 16px;
                border-radius: var(--border-radius-btn);

                &.active {
                    background-color: var(--color-white);
                    border: 1px solid var(--color-line);
                }
            }

            .left {
                background: var(--color-bg-gray);
                padding: 4px;
                border-radius: var(--border-radius-btn);
            }

            .right {
                display: flex;
                align-items: center;
                gap: var(--gap-space);
            }
        }
    }
}


.message {
    .widthAvailable();

    .messageAction() {
        padding: 4px 8px;
        border-radius: 6px;
        margin-top: 4px;
    }

    &.messageSuccess,
    .messageSuccess {
        .messageAction();
        background-color: var(--color-message-success);
    }

    &.messageCenter,
    .messageCenter {
        .messageAction();
        text-align: center;
    }

    &.messageWarning,
    .messageWarning {
        .messageAction();
        background-color: var(--color-message-warning);
    }

    &.messageDanger,
    .messageDanger {
        .messageAction();
        background-color: var(--color-message-danger);
    }

    &.messageInfo,
    .messageInfo {
        .messageAction();
        background-color: var(--color-message-info);
    }

    &.messagePrimary,
    .messagePrimary {
        .messageAction();
        background-color: var(--color-message-primary);
    }

    &.messageAlert,
    .messageAlert {
        .messageAction();
        background-color: var(--color-message-alert);
    }
}

@keyframes rotation {
    from {
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -moz-transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
    }
}

.boxCountries {
    min-width: 300px;
    max-height: 200px;
    overflow: auto;
    position: absolute !important;
    background: white;
    border: 1px solid var(--color-line);
    border-radius: 5px;
    box-shadow: 1px 1px 4px #bfc3c5;
    padding-top: 45px;
    padding-bottom: 4px;
    display: none;
    z-index: 10;

    &.on {
        display: inline-block;
    }

    .inputSearchCountry {
        position: absolute;
        top: 7px;
        left: 7px;
        padding: 8px 8px;
        width: 88%;
        border: 1px solid var(--color-line);
        border-radius: 4px;
        font-size: 15px;
    }

    .listCountries {
        display: flex;
        flex-direction: column;
        max-height: 290px;
        overflow-y: auto;

        &.on {
            .dialCode {
                display: inline-block !important;
            }
        }

        .btnCodeCountry {
            display: flex;
            align-items: center;
            margin-top: 4px;
            margin-bottom: 4px;
            padding-left: 8px;
            padding-right: 8px;

            &.active {
                opacity: 0.5;
                pointer-events: none;
            }

            .dialCode {
                display: none;
            }

            .name {
                margin-left: 4px;
                font-size: 15px;
                height: 16px;
                overflow: hidden;
            }
        }
    }
}

.hide {
    display: none !important;
}



//calendar

.fc-state-default {
    background-image: none !important;
    border-color: #e6e6e6 !important;
}

.fc-state-active {
    box-shadow: none !important;
    text-shadow: none !important;
    background-color: #e4e7f3;
    border-color: #e4e7f3;
}


//boxColumn
.boxColumn {
    .widthAvailable();
    height: 100vh;
    height: 100dvh;
    overflow-y: hidden;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--color-line-soft);


    &.boxColumn200w {
        width: 200px;
    }

    &.boxColumn300w {
        width: 300px;
    }

    &.boxColumn400w {
        width: 400px;
    }

    &.boxColumnWhite {
        background-color: var(--color-white);
    }

    .head {
        display: flex;
        padding: 8px 8px 4px 8px;
        background: var(--color-sidebar);
        border-bottom: 1px solid var(--color-line-soft);
        justify-content: space-between;
        align-items: center;

        label {
            font-size: 15px;
        }
    }

}

@media (max-width: 470px) {
    .badge {
        font-size: 10px !important;
    }
}