/* Button */
.btn.btn-dl {
    background-color: #9C3;
    font-family: "Roboto", sans-serif;
    color: #fff;
    font-size: 500;
    font-weight: 500;
    border-radius: 0.2rem;
    border: solid 0.15rem #9C3;
}

.btn.btn-dl:hover {
    background-color: #70a431;
    border: solid 0.15rem #70a431;
}

.btn.btn-dk {
    background-color: #fc0;
    font-family: "Roboto", sans-serif;
    color: #2b2b2b;
    font-size: 500;
    font-weight: 500;
    border-radius: 0.2rem;
    border: solid 0.15rem #fc0;
}

.btn.btn-dk:hover {
    color: white;
    background-color: #2DB295;
    border: solid 0.15rem #2DB295;
}

.btn.btn-outline-dl {
    background-color: white;
    color: #8ac642;
    font-weight: bolder;
    border: solid 0.15rem #8ac642;
}

.btn.btn-outline-dl:hover {
    border: solid 0.15rem #8ac642;
    background-color: #8ac642;
    color: #fff;
}

.btn.btn-sdl {
    background-color: #ffcc00;
    font-family: "Roboto", sans-serif;
    color: #202020;
    font-size: 500;
    font-weight: 500;
    border-radius: 0.2rem;
    border: solid 0.15rem #ffcc00;
}

.btn.btn-sdl:hover {
    background-color: #cca300;
    border: solid 0.15rem #cca300;
}

.btn.btn-outline-sdl {
    background-color: white;
    color: #ffcc00;
    font-weight: bolder;
    border: solid 0.15rem #ffcc00;
}

.btn.btn-outline-sdl:hover {
    border: solid 0.15rem #ffcc00;
    background-color: #ffcc00;
    color: #fff;
}

.btn.btn-secondary {
    background-color: #727272;
    font-family: "Roboto", sans-serif;
    color: #fff;
    font-size: 500;
    font-weight: 500;
    border-radius: 0.2rem;
    border: solid 0.15rem #727272;
}

.btn.btn-secondary:hover {
    background-color: #595959;
    border: solid 0.15rem #595959;
}

.btn.btn-outline-secondary {
    background-color: white;
    color: #727272;
    font-weight: bolder;
    border: solid 0.15rem #727272;
}

.btn.btn-outline-secondary:hover {
    border: solid 0.15rem #727272;
    background-color: #727272;
    color: #fff;
}

.btn.btn-dl-dark {
    background-color: #202020;
    font-family: "Roboto", sans-serif;
    color: #fff;
    font-size: 500;
    font-weight: 500;
    border-radius: 0.2rem;
    border: solid 0.15rem #202020;
}

.btn.btn-dl-dark:hover {
    background-color: #070707;
    border: solid 0.15rem #070707;
}

.btn.btn-outline-dl-dark {
    background-color: white;
    color: #727272;
    font-weight: bolder;
    border: solid 0.15rem #727272;
}

.btn.btn-outline-dl-dark:hover {
    border: solid 0.15rem #727272;
    background-color: #727272;
    color: #fff;
}

.btn-group .btn.active {
    background-color: #8ac642;
    font-family: "Roboto", sans-serif;
    color: #fff;
    font-size: 500;
    font-weight: 500;
    border-radius: 0.2rem;
    border: solid 0.15rem #8ac642;
}

.btn-group .btn.active:hover {
    background-color: #70a431;
    border: solid 0.15rem #70a431;
}

.btn-group .btn.disabled:hover {
    cursor: not-allowed;
}


/* Dropdown */
.dropdown-menu .dropdown-item {
    transition: all 0.3s ease;
    font-family: "Roboto", sans-serif;
    color: #727272;
    font-size: 1rem;
    font-weight: 500;
}

.dropdown-menu .dropdown-item:hover {
    background-color: #ffcc00;
    border-radius: 0.2rem;
    font-family: "Roboto", sans-serif;
    color: #202020;
    font-size: 1rem;
    font-weight: 500;
}


/* Form */
.form-control,
.form-select {
    width: 100%;
    /* border: solid 0.15rem #aaa; */
    background-color: #fafafa;
    border: none;
    padding: 1.2rem 1rem;
    font-family: "Roboto", sans-serif;
    color: #727272;
    font-size: 1rem;
    font-weight: 500;
}

.form-control::placeholder,
.form-select::placeholder {
    color: #ccc;
}

.form-control:focus,
.form-select:focus {
    background-color: #fafafa;
    font-family: "Roboto", sans-serif;
    box-shadow: none;
    border: none;
    color: #202020;
    font-size: 1rem;
    font-weight: 500;
}

.input-group {
    background-color: #fafafa;
    border: none;
    font-family: "Roboto", sans-serif;
    color: #727272;
    font-size: 1rem;
    font-weight: 500;
    overflow: hidden;
}

.input-group * {
    background-color: transparent;
}

.form-select {
    padding: 0.5rem 1rem;
    border-radius: 0.2rem;
    transition: all 0.2s ease;
}


/* Modal */
.modal .modal-content {
    border-radius: 0.6rem;
}

.modal .modal-title {
    font-family: "Roboto", sans-serif;
    color: #202020;
    font-size: 1.7rem;
    font-weight: 500;
}

.modal .modal-body {
    font-family: "Roboto", sans-serif;
    color: #727272;
    font-size: 0.9rem;
    font-weight: 500;
}


/* Typography/Text */
.text-dl {
    color: #9c3 !important;
}

.text-dl-secondary {
    color: #fc0 !important;
}

.text-dk {
    color: #2DB295 !important;
}

.text-primary {
    color: #656565 !important;
}

.text-secondary {
    color: #727272 !important;
}

.text-tertiary {
    color: #8f8f8f !important;
}

.fw-100 {
    font-weight: 100;
}

.fw-200 {
    font-weight: 200;
}

.fw-300 {
    font-weight: 300;
}

.fw-400 {
    font-weight: 400;
}

.fw-500 {
    font-weight: 500;
}

.fw-600 {
    font-weight: 600;
}

.fw-700 {
    font-weight: 700;
}

.fw-800 {
    font-weight: 800;
}

.fw-900 {
    font-weight: 900;
}

.fs-small {
    font-size: .8rem;
}

.fs-1 {
    font-size: 1rem !important;
}

.fs-1-2 {
     font-size: 1.2rem;
}

.fs-1-4 {
     font-size: 1.4rem;
}

.fs-1-half {
    font-size: 1.5rem !important;
}

.fs-2 {
    font-size: 2rem !important;
}

.fs-3 {
    font-size: 3rem !important;
}

/* Width */
.w-15 {
    width: 15%;
}

.w-20 {
    width: 20%;
}

.w-30 {
    width: 30%;
}

.w-35 {
    width: 35%;
}

.w-40 {
    width: 40%;
}

.w-45 {
    width: 45%;
}

.w-48 {
    width: 48%;
}

.w-53 {
    width: 53%;
}

.w-55 {
    width: 55%;
}

.w-60 {
    width: 60%;
}

.w-65 {
    width: 65%;
}

.w-70 {
    width: 70%;
}

.w-80 {
    width: 80%;
}

.w-85 {
    width: 85%;
}

.w-90 {
    width: 90%;
}

.w-95 {
    width: 95%;
}

/* Position */
.right-0 {
    right: 0 !important;
}

/* Margin & Padding */
.mt-super {
    margin-top: 4rem;
}

/* Gap */
.gap {
    gap: 2%;
}

/* Loader */
.loader::after {
    content: ' ';
    background-color: white;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 9;
}

.pointer {
    cursor: pointer;
}

/* SCROLLBAR */
/* width */
::-webkit-scrollbar {
    width: 1rem;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #353535;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #2e2e2e;
}

/* BACKGROUND */
.bg-dk {
    background-color: #2DB295;
}

/* ROUNDED */
.rounded-1 {
    border-radius: 1rem !important;
}

.rounded-1-2 {
    border-radius: 1.2rem !important;
}

.rounded-2 {
    border-radius: 2rem !important;
}

.radius {
    border-radius: .6rem !important;
}

.radius-1rem {
    border-radius: 2rem;
}

/* Z-INDEX */
.index-1 {
    z-index: 1;
}

.index-2 {
    z-index: 2;
}

.index-3 {
    z-index: 3;
    top: 0;
    right: 0pc;
}

.shadow-dl {
    box-shadow: #dbdbdbbc 0px 1px 2px 0px, #31313106 0px 1px 3px 1px, #31313110 0px -1px 3px inset, #31313110 -1px 0px 3px inset;
}

.line-height-0 {
     line-height: 0;
}