:root {
    --text: #fff !important;
    --text-variant: #000 !important;
    --primary-lighter: #85a2af !important;
    --primary: #385e6f !important;
    --primary-darker: #00556d !important;
    --secondary-lighter: #F1F1E6 !important;
    --secondary: #FFC7A0 !important;
    --secondary-darker: #F6916C !important;

    --error-lighter: #ce392e !important;
    --error: #bd5d57 !important;
    --error-darker: #9a2a22 !important;
    --success-lighter: #3cb95c !important;
    --success: #62bd7a !important;
    --success-darker: #29803f !important;

    --background: white !important;
}

::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 10px;
}

::-webkit-scrollbar-track {
    background: #dedede;
}

.ckt-header-userinfo {
    display: flex;
    align-items: center;
    justify-content: center;
}

td > a {
    text-decoration: none;
    color: var(--error-lighter);
}

.row {
    display: flex;
    flex-direction: row;
}

.width-80 {
    width:80% !important;
}

.width-100 {
    width: 100% !important;
}

.width-10 {
    width: 10% !important;
}

.width-15 {
    width: 15% !important;
}

.width-20 {
    width: 20% !important;
}

.width-30 {
    width:30% !important;
}

.width-50 {
    width:50% !important;
}
.width-40 {
    width:40% !important;
}

.width-60 {
    width:60% !important;
}

.width-90 {
    width:90% !important;
}


.m-2 {
    margin: 2em !important;
}

.m-3 {
    margin: 3em !important;
}

.m-4 {
    margin: 4em !important;
}

.m-5 {
    margin: 5em !important;
}


.mt-2, .my-2 {
    margin-top: 2em !important;
}

.mt-3, .my-3 {
    margin-top: 3em !important;
}

.mt-4, .my-4 {
    margin-top: 4em !important;
}

.mt-5, .my-5 {
    margin-top: 5em !important;
}


.mb-2, .my-2 {
    margin-bottom: 2em !important;
}

.mb-3, .my-3 {
    margin-bottom: 3em !important;
}

.mb-4, .my-4 {
    margin: 4em !important;
}

.mb-5, .my-5 {
    margin-bottom: 5em !important;
}


.mr-2, .mx-2 {
    margin-right: 2em !important;
}

.mr-3, .mx-3 {
    margin-right: 3em !important;
}

.mr-4, .mx-4 {
    margin-right: 4em !important;
}

.mr-5, .mx-5 {
    margin-right: 5em !important;
}

.mr-auto {
    margin-right: auto !important;
}


.ml-2, .mx-2 {
    margin-left: 2em !important;
}

.ml-3, .mx-3 {
    margin-left: 3em !important;
}

.ml-4, .mx-4 {
    margin-left: 4em !important;
}

.ml-5, .mx-5 {
    margin-left: 5em !important;
}

.ml-auto {
    margin-left: auto !important;
}


.p-2 {
    padding: 2em !important;
}

.p-3 {
    padding: 3em !important;
}

.p-4 {
    padding: 4em !important;
}

.p-5 {
    padding: 5em !important;
}


.pt-2, .py-2 {
    padding-top: 2em !important;
}

.pt-3, .py-3 {
    padding-top: 3em !important;
}

.pt-4, .py-4 {
    padding-top: 4em !important;
}

.pt-5, .py-5 {
    padding-top: 5em !important;
}


.pb-2, .py-2 {
    padding-bottom: 2em !important;
}

.pb-3, .py-3 {
    padding-bottom: 3em !important;
}

.pb-4, .py-4 {
    padding: 4em !important;
}

.pb-5, .py-5 {
    padding-bottom: 5em !important;
}


.pr-2, .px-2 {
    padding-right: 2em !important;
}

.pr-3, .px-3 {
    padding-right: 3em !important;
}

.pr-4, .px-4 {
    padding-right: 4em !important;
}

.pr-5, .px-5 {
    padding-right: 5em !important;
}


.pl-2, .px-2 {
    padding-left: 2em !important;
}

.pl-3, .px-3 {
    padding-left: 3em !important;
}

.pl-4, .px-4 {
    padding-left: 4em !important;
}

.pl-5, .px-5 {
    padding-left: 5em !important;
}

.text-center {
    text-align: center !important;
}