/* BASE */
:root {
    --primary-color: #623ceb;
}

html {
    font-size: 0.85rem;
}

@media (min-width: 992px) {
    html {
        font-size: 1rem;
    }
}

body {
    background-color: #f3f2f7;
    font-family: "Open Sans", sans-serif;
    color: #18324b;
}

@media (min-width: 992px) {
    body {
        font-family: "lato", sans-serif;
    }
}

h1,
h2,
h3,
h4,
h5,
h6, th {
    font-family: "Open Sans", sans-serif;
    font-weight: medium;
}

th {
    font-weight: 600;
}

a {
    color: #623ceb;
}

a:hover{
    color: #5a37d9;
}

a:hover {
    text-decoration: none;
}

small, .small {
    font-size: 85%;
}

.scrollbar::-webkit-scrollbar-thumb {
    width: 10px;
    border-radius: 5rem;
    background-color: rgba(98, 60, 235, 0.538);
}

.scrollbar::-webkit-scrollbar {
    width: 5px;
    border-radius: 5rem;
}

.scrollbar::-webkit-scrollbar-track {
    background-color: #fff;
}

/* BUTTON */
.btn-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
}

.btn {
    font-size: 80%;
    padding: 0.75rem 1.75rem;
    text-transform: uppercase;
    font-size: 12px !important;
}

.btn-rounded {
    border-radius: 2rem;
}

.btn-light {
    background-color: #fff;
    border-color: #dedce9;
}

.btn-light:hover {
    background-color: #f3f2f7;
    border-color: #dedce9;
}

.btn-primary {
    background: #623ceb;
    border-color: #623ceb;
}

*:not(:focus-within) .el-button--primary,
.el-button--primary {
    background: #623ceb !important;
    border-color: #623ceb !important;
}

.btn-primary.focus,
.btn-primary:focus,
.btn-primary:hover,
.btn-primary:not(:disabled):not(.disabled):active {
    background: #5d35ec;
    border-color: #623ceb;
}

.btn-primary.disabled, .btn-primary:disabled {
    color: #fff;
    background-color: #623deb;
    border-color: #623deb;
}

.btn-primary.focus,
.btn-primary:focus {
    background: #5d35ec;
    border-color: #623ceb;
}

.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgb(98, 61, 235, 0.28);
}

.btn-primary:not(:disabled):not(.disabled).active:focus,
.btn-primary:not(:disabled):not(.disabled):active:focus,
.show > .btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgb(92 53 236 / 45%);
}

/* TABLE */
.table th,
.table td {
    padding: 1.25rem 0.75rem;
}

.table th:first-of-type,
.table tr td:first-of-type {
    padding-left: 2rem;
    /* padding-right: 1.5rem; */
}

.table th.abc:first-child,
.table td.abc:first-child {
    position: sticky; 
    top: 0; 
    left: 0; 
    background: white;
}
.table tr:hover td.abc:first-child,
.table tr:hover td {
    /* background-color: rgba(244, 243, 249, 0.4); */
    background-color: #fbfbfb;
}

.table td {
    border-top: 1px solid #f5f5f5;
    font-size: 90%;
}

/* DROPDOWN */
.dropdown-menu {
    border: 0;
    border-radius: 0.75rem;
    box-shadow: 0 0 10px rgba(183, 181, 192, 0.18);
    box-shadow: 0 20px 100px -30px rgba(95, 101, 173, 0.55);
}

.dropdown-item {
    padding: 0.75rem 1.5rem;
}

.dropdown-item:hover {
    background: rgba(243, 242, 247, 0.392);
}

.dropdown-icon {
    position: absolute;
    top: 50%;
    right: 0.75rem;
    transform: translate(0, -50%);
}

.show .dropdown-icon {
    transform: translate(0, -50%) rotate(180deg);
}

/* FORM */
.form-control {
    border-color: #dedce9;
    border-width: 1px;
    height: 50px;
}

.form-control:focus {
    box-shadow: none;
    border: 1px solid #623ceb;
}

.form-control:disabled, .form-control[readonly] {
    background-color: rgb(222, 220, 233, 0.18);
    opacity: 1;
}
/* MODAL */
@media (max-width: 575.98px) {
    .modal-fullscreen {
        padding: 0 !important;
    }
    .modal-fullscreen .modal-dialog {
        width: 100%;
        max-width: none;
        height: 100%;
        margin: 0;
    }
    .modal-fullscreen .modal-content {
        height: 100%;
        border: 0;
        border-radius: 0;
    }
    .modal-fullscreen .modal-body {
        overflow-y: auto;
    }
}
@media (max-width: 767.98px) {
    .modal-fullscreen-sm {
        padding: 0 !important;
    }
    .modal-fullscreen-sm .modal-dialog {
        width: 100%;
        max-width: none;
        height: 100%;
        margin: 0;
    }
    .modal-fullscreen-sm .modal-content {
        height: 100%;
        border: 0;
        border-radius: 0;
    }
    .modal-fullscreen-sm .modal-body {
        overflow-y: auto;
    }
}
@media (max-width: 991.98px) {
    .modal-fullscreen-md {
        padding: 0 !important;
    }
    .modal-fullscreen-md .modal-dialog {
        width: 100%;
        max-width: none;
        height: 100%;
        margin: 0;
    }
    .modal-fullscreen-md .modal-content {
        height: 100%;
        border: 0;
        border-radius: 0;
    }
    .modal-fullscreen-md .modal-body {
        overflow-y: auto;
    }
}
@media (max-width: 1199.98px) {
    .modal-fullscreen-lg {
        padding: 0 !important;
    }

    .modal-fullscreen-lg .modal-dialog {
        width: 100%;
        max-width: none;
        height: 100%;
        margin: 0;
    }

    .modal-fullscreen-lg .modal-content {
        height: 100%;
        border: 0;
        border-radius: 0;
    }

    .modal-fullscreen-lg .modal-body {
        overflow-y: auto;
    }
}
.modal-fullscreen-xl {
    padding: 0 !important;
}

.modal-fullscreen-xl .modal-dialog {
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
}

.modal-fullscreen-xl .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
}

.modal-fullscreen-xl .modal-body {
    overflow-y: auto;
}

/* utilities */
.cursor-pointer {
    cursor: pointer;
}

.pointer-none {
    pointer-events: none;
}

.border {
    border-color: rgba(0, 0, 0, 0.407);
}

.lead {
    font-weight: normal;
}

.border {
    border-color: #dedce9;
}