:root {
    --gray: gray;
    --gray-2: #808080;
    --dark-gray: #4B4B4B;
    --dark-gray-2: #3F3F3F;
    --dark-gray-3: #505050;
    --dark-gray-4: #383838;
    --dark-gray-5: #2D2D2D;
    --dark-gray-6: #272727;
    --red: #E42256;
    --orange: #FF834D;
    --yellow: #FEC84D;
    --purple: #8C59D8;
    --white: #FFFFFF;
    --cyan: #00B19C;
    --black: black;
    --black-2: #1f1f1f;
    --black-3: #141414;
    --body-background: #141414;
    --card-background: #2D2D2D;
    --primary-hover: #008B7A;
    --standard-space: 1rem;
    --card-padding: calc(var(--standard-space) * 1.25);
    --hover-background: #4B4B4B;
    --button-transparent: #4D4D4D;
    --radio-background: #2D2D2D;
    --field-background: #212121;
    --placeholder: #848484;
    --pill: #5E5E5E;
    --bg-topbar: #363636;
    --height-topbar: 76px;
    --text-default: #FFFFFF;
    --text-secondary-light: #A6A6A6;
    --text-secondary: #848484;
    --accent-gray: #707070;
    --accent-primary: var(--cyan);
    --bg-card-light: #363636;

    --tumbler-bg-color: #848484;
    --tumbler-checked-bg-color: #FFFFFF;
    --tumbler-knob-color: #404040;
    --tumbler-checked-knob-color: #848484;


    --padding-comfortable: 16px;
    --padding-semi-spacious: 24px;
    --padding-spacious: 32px;
    --padding-primary: 8px;

    --radius-primary: 8px;

    --gap-tight: 4px;
    --gap-tight-plus: 6px;
    --gap-primary: 8px;
    --gap-primary-plus: 10px;
    --gap-comfortable: 16px;
    --gap-spacious: 32px;

    --gradient-gray-start: #808080;
    --gradient-gray-end: #6b6b6b;
}

/* Browsers fixes */

input[type="number"] {
    -moz-appearance: textfield;
}

/* Navbar */

.left-side-menu {
    z-index: 1020 !important;
}

.modal, .modal-dialog {
    z-index: 1050 !important;
}

.navbar-custom {
    display: flex;
    height: var(--height-topbar);
    padding: var(--padding-comfortable, 16px);
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    flex: 1 0 0;
    left: 230px;
}

@media (max-width: 575px) {
    .navbar-custom {
        left: 0;
    }
}

.metismenu {
    margin-bottom: 0;
}

.side-nav-item {
    color: var(--gray) !important;
    text-shadow: #191919 1px 1px 3px;
}

.side-nav-item .active {
    color: var(--white) !important;
}

.side-nav-link {
    font-size: 16px !important;
}

.logo-sm {
    padding-top: 0px !important;
}

.s2-image {
    border-radius: 50%;
    width: 32px !important;
    margin-right: 10px;
}

/* COLORS */

.red {
    color: var(--red);
}

.orange {
    color: var(--orange);
}

.yellow {
    color: var(--yellow);
}

.cyan {
    color: var(--cyan);
}

.purple {
    color: var(--purple);
}

.gray {
    color: var(--gray);
}

.white {
    color: var(--white);
}

.bg-dark-gray {
    background: var(--dark-gray);
}

.bg-dark-gray:focus {
    background: var(--dark-gray-2);
}

.mini-card {
    background: var(--dark-gray-2);
    border-radius: .2rem;
    border-width: 0px;
    border-style: solid;
    padding: .5rem;
    margin-bottom: 10px;
}

.filter {
    background: var(--cyan);
    border-radius: .3rem;
    border-width: 0px;
    border-style: solid;
    padding: .5rem;
    margin-bottom: 10px;
}

/* Icons */

.size-lg {
    font-size: 24px !important;
}

.size-lg-safe {
    position: relative;
    top: 2.5px;
    transform: scale(1.5)!important;
    display: inline-block;
}


.size-md {
    font-size: 1.125rem !important;
}

.size-sm-icon {
    font-size: 0.9rem !important;
}

.size-xl-disc {
    font-size: 24px !important;
    margin-left: 3px !important;
    margin-right: 9px !important;
    height: 46px;
}

.size-xl {
    font-size: 30px !important;
}

.bg-none {
    background: none !important;
}

.icon-link {
    color: var(--white);
    cursor: pointer;
    vertical-align: middle;
}

.icon-link:hover {
    color: var(--cyan);
}

.icon-link-light:hover {
    color: var(--dark-gray-5);
}

.btn-icon {
    padding-bottom: 2px !important;
    padding-left: 7px !important;
    padding-right: 7px !important;
    color: var(--white) !important;
}

.btn-icon2 {
    padding: 6px 8px 1px 7px !important;
    color: var(--white) !important;
}


.btn-icon i, .btn-icon2 i {
    font-size: 24px !important;
}

.custom-btn {
    height: 36px !important;
    width: 24px !important;
    background: none;
    border: none;
}

.card .custom-control-label::before {
    background-color: var(--dark-gray-3);
}

.modal .custom-control-label::before {
    background-color: var(--dark-gray-3);
}

/* Links */

.disabled {
    color: var(--gray);
    pointer-events: none;
    text-decoration: none;
}

.disabled-option {
    background: var(--gray) !important;
    cursor: not-allowed !important;
}

.input-disabled {
    cursor: not-allowed;
    background: var(--gray-2) !important;
    color: var(--white) !important;
    border-color: var(--gray-2) !important;
}

a.active strong.white {
    color: var(--black) !important;
    background-color: var(--white) !important;
}

a.active strong.orange {
    color: var(--black) !important;
    background-color: var(--orange) !important;
}

.card-label span {
    background-color: var(--cyan);
}

.small-avatar {
    border-radius: 50%;
    width: 50px;
    aspect-ratio: 1 / 1;

}

.medium-avatar {
    border-radius: 50%;
    width: 128px;
    aspect-ratio: 1 / 1;
}

.avatar {
    border-radius: 50%;
    height: 100%;
    width: auto;
    aspect-ratio: 1 / 1;
}

/* Other */

.flex-parent {
    display: flex;
    align-items: center;
}

.long-and-truncated {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
}

.custom-rounded {
    display: inline-block !important;
    border-radius: 6px;
    border-width: 1px;
    border-style: solid;
    white-space: nowrap !important;
    margin-right: 3.5px;
    margin-bottom: 3px;
}

.button {
    text-weight: 600 !important;
}

.btn-purple {
    background: var(--purple);
    border-color: var(--purple);
}

.btn-dark {
    background-color: var(--dark-gray-4);
    border-color: var(--dark-gray-4);
    color: var(--white);
}

.btn-dark:hover, .btn-dark:active, .btn-dark:focus, .btn-dark:disabled, .btn-dark.active {
    background: var(--dark-gray-3) !important;
    border-color: var(--dark-gray-3) !important;
    color: var(--white) !important;
}

.btn-dark:focus {
    box-shadow: 0 0 0 3px rgba(50, 50, 50, 0.5) !important;
}

.btn-purple:hover, .btn-purple:active, .btn-purple:focus, .btn-purple:disabled {
    background: #7047a6 !important;
    border-color: #7047a6 !important;
    color: unset !important;
}

.btn-purple:focus {
    box-shadow: 0 0 0 3px rgba(112, 71, 166, 0.5) !important;
}

.btn-gray {
    background: #808080;
    transition: none!important;
}

.btn-gray:hover, .btn-gray:active, .btn-gray:focus, .gray-purple:disabled {
    background: linear-gradient(180deg, var(--gradient-gray-start) 0%, var(--gradient-gray-end) 100%);
    transition: none!important;
}

.button-gray {
    background: #808080;
    transition: none!important;
}

.button-gray:hover, .button-gray:active, .button-gray:focus {
    background: linear-gradient(180deg, var(--gradient-gray-start) 0%, var(--gradient-gray-end) 100%);
    transition: none!important;
}

.input-group {
    border: 1px solid var(--dark-gray-5);
    border-radius: 0.5rem;
    margin-bottom: 1rem;
}

.btn-gray-outline {
    background-color: var(--gray);
    border-color: var(--dark-gray-5);
}

.btn-gray-outline:hover, .btn-gray-outline:active, .btn-gray-outline:focus {
    background: #6b6b6b;
    border-color: var(--dark-gray-5);
}

.btn-gray-outline:focus {
    box-shadow: 0 0 0 3px rgba(107, 107, 107, 0.5) !important;
}

.date-input-group {
    margin-bottom: 1rem;
    border: 0px solid var(--dark-gray-5);
    border-radius: 0.5rem;
}

.date-input-group > .form-group {
    flex: 1;
    margin: 0;
}

.apply-to-all {
    flex: 2;
}

.apply-to-all > div > button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
    border: 1px solid var(--dark-gray-5);
}

.date-input-group > .form-group:first-child > div > input {
    border-top-left-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
}

.date-input-group > .form-group:last-child > div > input {
    border-top-right-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}

.date-input-group > .form-group > div > input {
    border-radius: 0;
}

.btn-white-gray {
    background-color: var(--gray-2);
    border-color: var(--gray-2);
    color: var(--black-2) !important;
}

.btn-white-gray:active, .btn-white-gray.active {
    background-color: var(--white);
    border-color: var(--white);
}

.progress {
    min-height: 12px;
    background: grey;
    border-radius: 6px;
}

.progress-bar {
    background: var(--yellow);
}

.progress-sm {
    min-height: 0px !important;
    height: 4px !important;
}

.album-card {
    border-radius: .5rem !important;
}

.album-card > .card-footer {
    border-radius: .5rem !important;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
    @media not all and (min-resolution: .001dpcm) {
        @supports (-webkit-appearance:none) and (stroke-color:transparent) {
            .album-card .card-body {
            }

            .text-muted-left {
            }
        }
    }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .release-texts p {
        margin-bottom: 0 !important;
        margin-top: 0 !important;
        padding-bottom: 0 !important;
        padding-top: 0 !important;
    }

    .release-texts h4 {
        margin-bottom: 0.25rem;
    }
}

h4 {
    font-size: 1.2rem !important;
}

.card {
    margin-bottom: 0px;
}

.dashboard-card {
    height: 250px !important;
    overflow: auto;
}

.random-block {
    height: 250px;
}


@media (max-width: 991px) {
    .random-block {
        height: 100%;
    }

    .dashboard-card {
        min-height: 100% !important;
    }

    body {
        padding-bottom: 30px;
    }

    .modal-footer {
        padding-bottom: 80px;
    }


}

.text-custom-right {
    text-align: right !important;
}


.navbar-separator {
    border: solid 0.5px #707070
}

.side-nav-link[aria-expanded=true] .navbar-flippable-icon {
    transform-origin: center center;
    transform: rotate(180deg);
}

.content-page {
    margin-left: 230px;
}

@media (min-width: 767.98px) and (max-width: 1028px) {
    .content-page {
        margin-left: 30px;
    }
    .left-side-menu {
        padding: var(--padding-comfortable, 16px) !important;
    }
    body[data-leftbar-compact-mode=condensed] .side-nav .side-nav-item .side-nav-link {
        min-height: 0;
    }
}

@media (max-width: 575px) {
    .content-page {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0!important;
    }

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

    .nav-tabs.nav-bordered {
        border-bottom: none !important;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        border-bottom: 2px solid rgba(255, 255, 255, .2) !important;
    }

    .nav-tabs.nav-bordered li {
        text-align: center;
    }

    .nav-tabs.nav-bordered li a {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .side-nav-link {
        padding-left: 10px !important;
    }

    .side-nav-second-level a {
        padding-left: 50px !important;
    }

    .button-menu-mobile {
        margin-left: -5px;
    }
}

@media (max-width: 378px) {
    .mt-sm {
        margin-top: 6px;
    }

}

.custom-file-label::after {
    background-color: var(--gray);
    border-radius: .5rem;
}

#div_id_territory {
    margin-bottom: 0 !important;
}

.nav-tabs .nav-link.active {
    background-color: transparent;
}

.nav-tabs .nav-link-custom.active {
    background-color: var(--dark-gray-5) !important;
}

.nav-tabs.nav-bordered li a.active {
    border-bottom: 2px solid var(--cyan) !important;
}

.nav-tabs.nav-bordered li a {
    border-bottom: none;
}

.nav-tabs.nav-bordered {
    border-bottom: 2px solid rgba(255, 255, 255, .2);
}

.hide-btn {
    color: var(--gray-2) !important;
    cursor: pointer;
}

select {
    border-radius: .5rem !important;
}

.custom-spinner {
    margin-bottom: 3px !important;
}

.custom-select:disabled {
    background: var(--dark-gray-5);
}

/* Tables */

th {
    font-weight: 600;
    white-space: nowrap !important;
}

td {
    border: none !important;
    vertical-align: middle !important;
}

tr {
    border: none !important;
}

table {
    border-bottom: 1px solid !important;
    border-color: var(--dark-gray-5) !important;
    margin-bottom: 20px !important;
    margin-top: 10px !important;
}

tbody {
    border: 0 !important;
}

.min-width-50 {
    min-width: 50px !important;
}

.min-width-100 {
    min-width: 100px !important;
}

.min-width-120 {
    min-width: 120px !important;
}

.empty-table {
    width: 100%;
    font-style: italic;
    border-bottom: 1px solid !important;
    border-color: var(--dark-gray-5) !important;
    padding-bottom: 20px !important;
}

.nowrap {
    white-space: nowrap !important;
}

input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.close-modal {
    position: absolute;
    right: 10px;
    top: 10px;
}

.custom-file-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#activity-table {
    border-collapse: separate;
    border-spacing: 0 10px;
}

/* Dropdown */

@media (min-width: 601px) {
    .dropdown-menu-custom {
        width: 500px;
    }
}

.dropdown-menu a:hover {
    background: var(--cyan);
}

.dropdown-menu a:active {
    background: var(--cyan);
}

.dropdown-menu a:focus {
    background: var(--cyan);
}

.dropdown-menu {
    border: solid 1px rgba(255, 255, 255, 0.2);
}

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
}

.dropdown-submenu > a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #ccc;
    margin-top: 7px;
    margin-right: -10px;
}

.bootstrap-select > .dropdown-toggle:after {
    border-style: none !important;
    border-radius: .5rem !important;
    height: 24px !important;
    width: 24px !important;
    right: 0px !important;
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23FFFFFF' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.9rem center/8px 10px, no-repeat center right 1.75rem/calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) !important;

}

.bootstrap-select > .btn-light {
    background-color: var(--dark-gray-5) !important;
    height: 41px;
    border-style: none !important;
    padding-right: 0px;
    border-radius: .5rem !important;
}

/* Customize the select2 box*/

.dan-s2-border {
    position: relative;
    padding-left: 16px;
    white-space: nowrap;
}

.dan-s2-border-vertical {
    position: absolute;
    height: 36px;
    border-left: 1px solid grey;
    top: -26px;
    left: 0;
    z-index: 0 !important;
}

.dan-s2-border-vertical-mini {
    position: absolute;
    height: 26px;
    border-left: 1px solid grey;
    top: -16px;
    left: 0;
    z-index: 0 !important;
}


.dan-s2-border-horizontal {
    position: absolute;
    width: 12px;
    border-bottom: 1px solid grey;
    left: 0;
    top: 10px;
    z-index: 0 !important;
}

@media (min-width: 1367px) and (max-width: 1488px) {
    .dan-request-label {
        font-size: 13.6px !important;
    }
}

.profile-image, #profile_image {
    width: 128px;
}

#profile_image_small {
    width: 65px;
}

@media (max-width: 420px) {
    .profile-image, #profile_image {
        width: 64px;
    }

}

.select2-container--default .select2-results > .select2-results__options {
    max-height: 220px!important;
}

.select2-selection--multiple:before {
    content: "";
    position: absolute;
    right: 12px;
    top: 48%;
    border-top: 5px solid #FFF;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
}

.card .select2-container.select2-container--disabled .select2-selection {
    background-color: var(--bg-card) !important;
    border-color: var(--input-border-disabled);
}

.card input.form-control:disabled, .card select:disabled {
    background-color: var(--bg-card) !important;
    border-color: var(--input-border-disabled);
}

.modal input.form-control:disabled, .modal select:disabled, .modal textarea.form-control:disabled {
    background-color: var(--bg-card) !important;
    border-color: var(--input-border-disabled);
}

.modal .select2-container.select2-container--disabled .select2-selection {
    background-color: var(--bg-card) !important;
    border-color: var(--input-border-disabled);
}

.select2-container--disabled .select2-selection {
    background-color: var(--bg-card);
    border-color: var(--input-border-disabled);
}

.card div.custom-checkbox label::before, .card .select2-container .select2-selection {
    background-color: var(--dark-gray) !important;
}

.card input.form-control, .card select {
    background-color: var(--dark-gray);
}

.card div.custom-checkbox .custom-control-input:checked ~ label::before {
    background-color: var(--primary) !important;
}

.modal div.custom-checkbox label::before, .modal .select2-container .select2-selection {
    background-color: var(--dark-gray-2) !important;
}

.modal input.form-control, .modal select, .modal textarea.form-control {
    background-color: var(--dark-gray-2) !important;
}

.modal div.custom-checkbox .custom-control-input:checked ~ label::before {
    background-color: var(--primary) !important;
}

.s2-image-block {
    position: relative;
    z-index: 1 !important;
}

.select2-container--disabled .select2-selection__clear {
    display: none !important;
}

.select2-container--disabled .select2-selection__choice {
    background: var(--gray) !important;
    cursor: not-allowed !important;
}

.select2-selection__choice {
    max-width: 90% !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.select2-container .select2-selection--multiple, .select2-container .select2-selection--single {
    background-color: var(--field-background) !important;
    border: none !important;
}

.select2-container .select2-selection--single {
    height: calc(1.5em + .75rem + 2px);
    border-radius: .5rem !important;
}

.select2-selection {
    border-radius: .5rem;
    background: var(--dark-gray-5);
}


.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: calc(1.5em + .75rem);
}

/*.select2-selection__arrow {*/
/*  border-radius: .5rem !important;*/
/*  height: 35px !important;*/
/*  width: 35px !important;*/
/*  right: 0px !important;*/
/*  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23FFFFFF' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.9rem center/8px 10px, var(--dark-gray-5) no-repeat center right 1.75rem/calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) !important;*/
/*}*/

/*.select2-selection__arrow b {*/
/*  border-style: none !important;*/
/*}*/

span.select2-selection {
    background: black;
    border-radius: .5rem !important;
    min-height: 41px;
}

.select2-selection__placeholder {
    color: var(--gray-2) !important;
}

input::placeholder {
    color: var(--gray-2) !important;
}

.select2-selection--single {
    padding-top: 2px;
}

 /*set modal outside background color */

.modal {
    background: none;
}

.modal-backdrop {
    background: var(--black) !important;
}

.modal-header {
    border-bottom-color: var(--black-2) !important;
    background-color: var(--black-2) !important;
}

.modal-footer {
    border-top: 0;
    padding: 1rem;
}

/* timeline */
.timeline-item-info {
    margin-left: 0 !important;
}


/*.timeline-alt .timeline-item:before {*/
/*    background-color: transparent!important;*/
/*    top: 24px;*/
/*    bottom: -10px;*/
/*    width: 1px;*/
/*}*/

.timeline-item.time-item-v.recent-activity:before {
    background-color: var(--white) !important;
    top: 24px;
    bottom: -10px;
    width: 1px;
}

/*.timeline-item.time-item-v.recent-activity:before::last-child {*/
/*    background-color: transparent!important;*/
/*    top: 24px;*/
/*    bottom: -10px;*/
/*    width: 1px;*/
/*}*/
.timeline-item.time-item-v.recent-activity:last-child::before {
    background-color: transparent !important;
    top: 24px;
    bottom: -10px;
    width: 1px;
}

.timeline-alt {
    padding: 0.375rem;
}

.timeline-alt-h, .timeline-item.timeline-item-v {
    padding-left: 15px;
}

.timeline-alt.timeline-alt-h {
    border-left: solid 1px white;
    margin-left: 11px;
}

.timeline-item.timeline-item-last {
    position: absolute;
    content: " ";
    height: calc(100% - 13px);
    margin-top: 11px;
    margin-left: -17px;
    /*border-left: solid 3px red;*/
    border-left: solid 3px var(--dark-gray-5);
}

.timeline-item.timeline-item-h:before {
    top: 10px !important;
    left: -16px !important;
    width: 17px;
    height: 1px;
    background-color: white;
}

.timeline-alt-h .timeline-item-h:before {
    top: 10px !important;
    left: -16px !important;
    width: 17px;
    height: 1px;
    background-color: white;
}

.timeline-alt-v .timeline-item-v:before {
    top: 26px;
    bottom: -18px;
    left: 13px;
}

/*.timeline-item.timeline-item-v:last-child::before {*/
/*    height: calc(100% - 39px);*/
/*}*/

.timeline-alt-v .timeline-item-v-2:before {
    top: 26px;
    height: 22px;
    left: 13px;
}

.timeline-alt-v .timeline-item-v-2-0:before {
    top: 26px;
    height: 0;
    left: 13px;
}

.timeline-alt-v .timeline-item-v-3:before {
    width: 0;
    border: none !important;
}

.border-h {
    position: absolute;
    width: 10px;
    border-bottom: 1px solid grey;
    left: -13px;
    top: 50%;
}

.border-v {
    position: absolute;
    height: calc(100% - 7px);
    top: -4px;
    left: 10px;
    border-left: 1px solid grey;
}

.border-v-short {
    height: calc(100% - 31px) !important;
}

.card-border-first {
    top: -20%;
    left: 30px;
    height: 70%;
    width: 42px;
    position: absolute;
    border-left: 1px solid grey;
    border-bottom: 1px solid grey;

    z-index: 0 !important;
}

.card-border {
    top: -75%;
    left: 30px;
    height: 125%;
    width: 42px;
    position: absolute;
    border-left: 1px solid grey;
    border-bottom: 1px solid grey;

    z-index: 0 !important;
}

.activity-icon {
    color: var(--white) !important;
    margin-top: 4px;
}

.progress-icon {
    color: var(--white) !important;
    margin-top: 4px;
    font-size: 1rem;
}

.bg-white {
    background: var(--cyan) !important;
}

.bg-orange {
    background: var(--orange) !important;
}

.bg-yellow {
    background: var(--yellow) !important;
}

.bg-purple {
    background: var(--purple) !important;
}

.bg-red {
    background: var(--red) !important;
}

.bg-gray {
    background-color: var(--gray) !important;
}

/* drag and dop */
.handle {
    display: inline-block;
    width: 30px;
    padding-top: 5px;
    cursor: grab !important;
}

.handle2 {
    display: inline-block;
    width: 30px;
    cursor: grab !important;
}

.handle:after, .handle:before {
    display: block;
    content: "";
    padding-top: 5px;
}

.handle:active, .handle:active:before, .handle:active:after {
    cursor: grabbing;
}

/*.progress-timeline {*/
/*    padding-top: 3px;*/
/*}*/

.recording {
    margin-top: 10px;
    border-radius: 0px !important;
}

.darkCard {
    background: #000000 !important;
    border-radius: 0.5rem !important;
    padding-top: 30px;
    padding-bottom: 20px;

}


/* DROPZONE */
.dropzone, .dropzone * {
    box-sizing: border-box;
}

.custom-dz-message {
    padding-top: 30px;
    padding-bottom: 20px;
}

.dropzone {
    position: relative;
    background: var(--dark-gray-5) !important;

}

.dz-details {
    color: var(--white) !important;
}

.dropzone .dz-preview .dz-details .dz-filename span, .dropzone .dz-preview .dz-details .dz-size span {
    background-color: transparent;
}

.dropzone .dz-preview .dz-details .dz-filename:hover span {
    background-color: var(--dark-gray-5);
}

.dz-image {
    background: var(--dark-gray-2) !important;
}

.dropzone .dz-preview {
    position: relative;
    display: inline-block;
    width: 120px;
    margin: 0.5em;
}

.dropzone .dz-preview .dz-progress {
    display: block;
    height: 15px;
    border: 1px solid #aaa;
}

.dropzone .dz-preview .dz-progress .dz-upload {
    display: block;
    height: 100%;
    width: 0;
    background: green;
}

.dropzone .dz-preview .dz-error-message {
    color: red;
    display: none;
}

.dropzone .dz-preview.dz-error .dz-error-message, .dropzone .dz-preview.dz-error .dz-error-mark {
    display: block;
}

.dropzone .dz-preview.dz-success .dz-success-mark {
    display: block;
}

.dropzone .dz-preview .dz-error-mark, .dropzone .dz-preview .dz-success-mark {
    position: absolute;
    display: none;
    left: 30px;
    top: 30px;
    width: 54px;
    height: 58px;
    left: 50%;
    margin-left: -27px;
}

.dynamic-form {

}

.close {
    color: var(--white);
}

.close:hover {
    color: grey;
}

/*input[type="radio"]:checked:before {*/
/*    content: "";*/
/*    display: block;*/
/*    position: relative;*/
/*    top: 3px;*/
/*    left: 3px;*/
/*    width: 6px;*/
/*    height: 6px;*/
/*    border-radius: 50%;*/
/*    background: #363636;*/
/*}*/

.custom-modal-body {
    max-height: calc(100vh - 200px) !important;
    min-height: calc(100vh - 200px) !important;
    overflow-y: auto !important;
    background: var(--black-2) !important;
}

.modal-content {
    background: var(--black-2) !important;
}

input:disabled {
    color: var(--gray-2);
    -webkit-text-fill-color: var(--gray-2);
}

.no-transition {
    transition: none !important;
}

.progress-bar-small {
    height: 18px !important;
    margin-bottom: .25rem !important;
}

.not-allowed {
    color: grey !important;
    cursor: not-allowed !important;
}

.text-overflow {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.template-form {
    display: none;
}


@media (max-width: 575px) {
    body {
        font-size: 14px;
    }
}

.border-lightgrey {
    border-color: #969696 !important;
}

.btn-filter {
    color: var(--white);
    background-color: var(--gray-2) !important;
    border-color: grey;
    border-radius: 0.3rem;
}

.btn-filter:hover {
    background-color: var(--dark-gray-2) !important;
    border-color: var(--dark-gray-2) !important;
}

.btn-filter-active {
    background-color: var(--cyan) !important;
    border-color: var(--cyan);
}

.btn-filter-active:hover {
    background-color: #008B7A !important;
    border-color: #008B7A !important;
}

.btn-sort {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-bottom: 0.2rem;
}

.badge-grey {
    color: #fff;
    background-color: rgb(132, 132, 132)
}

.coming-soon {
    display: inline-block;
    color: #fff;
    background-color: rgb(132, 132, 132);
    padding: .375em .75em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    border-radius: .75rem;
}

.text-small {
    font-size: 0.75rem;
}

#timeBlock {
    position: absolute;
    right: -60px;
    width: 60px;
    bottom: -5px;
    font-size: 0.8rem;
    padding: 3px;
    background-color: var(--primary);
    font-weight: 700;
    overflow: hidden;
}

.mt-neg-2 {
    margin-top: -0.75rem;
}

.pl-6 {
    padding-left: 5.2rem;
}

@media (max-width: 1367px) {
    .pl-xl-6 {
        padding-left: 5.2rem;
    }
}

.invalid-feedback {
    margin-bottom: 0.375rem;
}

.dropdown-menu .custom-control-label::before {
    background: var(--gray);
}

.stack-top {
    /* adjust the below to control the shape */
    --d: 0px;
    --g: 25px;
    --c: darkgrey;
    /**/

    position: absolute;
    top: -12px;
    right: -12px;
    font-size: 0.8rem;
    transform: translate(29.29%, -100%) rotate(45deg); /* 29.29% = 100%*(1 - cos(45deg)) */
    color: #fff;
    text-align: center;
    width: 150px;
    transform-origin: bottom left;
    padding: 0 0 calc(var(--d) + 0px);
    background: linear-gradient(135deg, transparent var(--g), var(--c) calc(var(--g) - 0.3px)) left,
    linear-gradient(-135deg, transparent var(--g), var(--c) calc(var(--g) - 0.3px)) right;
    background-size: 51% 100%;
    background-repeat: no-repeat;
    clip-path: polygon(0 0, 100% 0, 100% 100%, calc(100% - var(--d)) calc(100% - var(--d)), var(--d) calc(100% - var(--d)), 0 100%)
}

#paypal-button {
    min-width: 13rem;
}

.btn-paypal-back {
    max-height: 2.2rem !important;
    padding: 0.3rem 0.9rem !important;
    border: none;
}

.dropdown.card-widgets {
    position: absolute !important;
    right: 0 !important;
    margin-right: 0.75rem !important;
}

.icon-white::before {
    color: white !important;
}

.side-nav-second-level li a {
    font-size: 16px !important;
}

#rm-eligibility-modal-content.both {
    width: calc(min(90vw, 800px));
    max-width: calc(min(90vw, 800px));
}

#rm-eligibility-modal-content {
    width: calc(min(60vw, 600px));
    max-width: calc(min(60vw, 600px));
}

.modal .rm-modal-content {
    padding: var(--padding-spacious);
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-comfortable);
}

.rm-modal-form-container {
    display: flex;
    align-items: flex-start;
    gap: var(--gap-spacious);
}

.rm-modal-form {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: var(--gap-spacious);
    width: 100%;
}

@media (max-width: 800px) {
    .rm-modal-form-container {
        flex-direction: column;
    }

    .rm-modal-form {
        width: 100%;
    }
}

.text-default {
    color: var(--text-default) !important;
}

.text-secondary {
    color: var(--text-secondary) !important;
}

.encircled {
    width: 22px;
    height: 22px;
    line-height: 22px;
    border-radius: 50%;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-default);
    text-align: center;
    border-width: 1px;
    border-style: solid;
    border-color: var(--text-default);
}


.background-link {
    display: inline-block; /* Ensures the background image and padding apply correctly */
    background-size: cover; /* Makes sure the image covers the entire link area */
    background-position: center; /* Centers the image within the link */
    color: white; /* Text color */
    padding: 10px 20px; /* Adjust padding as needed */
    text-decoration: none; /* Removes underline from the link */
    width: 128px;
    height: 128px;
}

.gap-1 {
    gap: var(--gap-comfortable);
}

.gap-2 {
    gap: calc(var(--standard-space) * 2);
}

.gap-tight {
    gap: var(--gap-tight);
}


.gap-comfortable {
    gap: var(--gap-comfortable) !important;
}

.gap-semi-spacious {
    gap: calc(var(--gap-comfortable) * 1.5);
}

.gap-spacious {
    gap: var(--gap-spacious) !important;
}

.gap-primary {
    gap: var(--gap-primary)!important;
}

.gap-none {
    gap: 0!important;
}