/* ANIMATION */

.pulse-opacity {
    /* animation: pulse-opacity 2s cubic-bezier(0.5, 0.27, 0.32, 0.64) both infinite; */
    animation: pulse-opacity 2s cubic-bezier(0.4, 0, 1, 1) both infinite;
    transition: opacity;
}

.pulse-opacity.fast-pulse {
    animation-duration: 1s;
}

/* pulse the opacity */
@keyframes pulse-opacity {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* CUSTOM SCROLLBARS 
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.custom-scrollbar::-webkit-scrollbar,
.custom-scrollbar::-webkit-scrollbar-button,
.custom-scrollbar::-webkit-scrollbar-thumb {
    width: 7px;
    height: 7px;
}
.thin-scrollbar::-webkit-scrollbar,
.thin-scrollbar::-webkit-scrollbar-button,
.thin-scrollbar::-webkit-scrollbar-thumb {
    width: 3px;
    height: 3px;
}
.no-scrollbar::-webkit-scrollbar,
.no-scrollbar::-webkit-scrollbar-button,
.no-scrollbar::-webkit-scrollbar-thumb {
    height: 0px;
    width: 0px;
}

.custom-scrollbar,
.thin-scrollbar,
.no-scrollbar {
    overflow: auto;
}

.custom-scrollbar::-webkit-scrollbar,
.thin-scrollbar::-webkit-scrollbar,
.no-scrollbar::-webkit-scrollbar {
    background-color: #F3F4F6;
}
.custom-scrollbar::-webkit-scrollbar-button,
.thin-scrollbar::-webkit-scrollbar-button,
.no-scrollbar::-webkit-scrollbar-button {
    background-color: #831843;
}
.custom-scrollbar::-webkit-scrollbar-thumb,
.thin-scrollbar::-webkit-scrollbar-thumb,
.no-scrollbar::-webkit-scrollbar-thumb {
    background-color: #BE185D;
}


.custom-scrollbar.black-scrollbar::-webkit-scrollbar,
.thin-scrollbar.black-scrollbar::-webkit-scrollbar,
.no-scrollbar.black-scrollbar::-webkit-scrollbar {
    background-color: #F3F4F6;
}
.custom-scrollbar.black-scrollbar::-webkit-scrollbar-button,
.thin-scrollbar.black-scrollbar::-webkit-scrollbar-button,
.no-scrollbar.black-scrollbar::-webkit-scrollbar-button {
    background-color: #000;
}
.custom-scrollbar.black-scrollbar::-webkit-scrollbar-thumb,
.thin-scrollbar.back-scrollbar::-webkit-scrollbar-thumb,
.no-scrollbar.back-scrollbar::-webkit-scrollbar-thumb {
    background-color: #111;
}

/* MINI MENU TOGGLE 
–––––––––––––––––––––––––––––––––––––––––––––––––– */

menu {
    height: 100%;
    transition-property: right;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

menu.opened {
    right: 0;
}

menu li.current-view,
menu li.current-view:hover {
    background-color: black;
    color: white;
}

#menu-toggle div.cross-part {
    width: 24px;
    height: 2px;
    background-color: #7f7f7f;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
}

#menu-toggle div.cross-part:nth-child(1),
#menu-toggle div.cross-part:nth-child(3) {
    transform: rotate(0deg);
    transform-origin: right;
}

#menu-toggle div.cross-part:nth-child(1),
#menu-toggle div.cross-part:nth-child(3),
#menu-toggle[open] div.cross-part:nth-child(1),
#menu-toggle[open] div.cross-part:nth-child(3) {
    transition: transform 0.3s ease-in-out;
}

#menu-toggle div.cross-part:nth-child(2),
#menu-toggle[open] div.cross-part:nth-child(2) {
    transition: width 0.3s ease-in-out;
}

#menu-toggle div.cross-part:nth-child(1) {
    top: 0;
}

#menu-toggle div.cross-part:nth-child(2) {
    top: 8px;
}

#menu-toggle div.cross-part:nth-child(3) {
    bottom: 0;
}

#menu-toggle[open] div.cross-part:nth-child(1) {
    transform: rotate(-45deg);
    transform-origin: right;
    top: -1px;
}

#menu-toggle[open] div.cross-part:nth-child(2) {
    width: 0;
}

#menu-toggle[open] div.cross-part:nth-child(3) {
    transform: rotate(45deg);
    transform-origin: right;
}

/* TABLES 
–––––––––––––––––––––––––––––––––––––––––––––––––– */

table:not(.calendar-type) {
    border-collapse: collapse;
    margin: 8px 12px;
}

table.jaj-type {
    margin: 0 0;
}

table:not(.calendar-type) tr td,
table:not(.calendar-type) tr th {
    border-width: 1px;
    border-style: solid;
    border-right: none;
    border-left: none;
}

table:not(.calendar-type) tr:not(.blinker) td,
table:not(.calendar-type) tr:not(.blinker) th {
    border-color:#e7e7e7;
}

table:not(.calendar-type) tr.blinker td,
table:not(.calendar-type) tr.blinker th {
    border-color: transparent;
}

table:not(.blinker):not(.calendar-type) thead:not(.blinker) tr:not(.blinker) th:nth-child(odd):not([class*="bg-"]),
table:not(.blinker):not(.calendar-type) tbody:not(.blinker) tr:not(.blinker) td:nth-child(odd):not([data-action="cancel-radio-choice"], [class*="bg-"]) {
    background-color: var(--twc-gray-50);
}

table:not(.blinker):not(.calendar-type) thead:not(.blinker) tr:not(.blinker) th:nth-child(even):not([class*="bg-"]),
table:not(.blinker):not(.calendar-type) tbody:not(.blinker) tr:not(.blinker) td:nth-child(even):not([data-action="cancel-radio-choice"], [class*="bg-"]) {
    background-color: var(--twc-gray-100);
}

table:not(.calendar-type) tr:first-child th {
    border-top: 0;
}

table:not(.calendar-type) tr:last-child td {
    border-bottom: 0;
}

table:not(.calendar-type) tr td:first-child,
table:not(.calendar-type) tr th:first-child {
    border-left: 0;
}

table:not(.calendar-type) tr td:last-child,
table:not(.calendar-type) tr th:last-child {
    border-right: 0;
}

/* #CALENDAR-TYPE
  –––––––––––––––––––––––––––––––––––––––––––––––––– */

table.calendar-type {
    padding: 0;
    margin: 0;
}

table.calendar-type tr:not(.blinker) td,
table.calendar-type tr:not(.blinker) th {
    /* border-color: transparent; */
}

table.calendar-type tr.blinker td,
table.calendar-type tr.blinker th {
    /* border-color: transparent; */
}

/* #ABSOLUTE-LINK
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
  a.absolute-link {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

/* #ELLISPSIS
  –––––––––––––––––––––––––––––––––––––––––––––––––– */

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

/* LOADING GIF 
  –––––––––––––––––––––––––––––––––––––––––––––––––– */

.loading-gif {
    position: relative;
}

.loading-gif {
    margin: 0 auto;
}

.loading-gif .loader-circle,
.loading-gif .loader-bar {
    position: absolute;
    border-radius: 50%;
    top: 0;
    left: 0;
}

.loading-gif:not(.custom).extra-small,
.loading-gif:not(.custom).extra-small .loader-circle,
.loading-gif:not(.custom).extra-small .loader-bar {
    width: 10px;
    height: 10px;
}

.loading-gif:not(.custom).mini,
.loading-gif:not(.custom).mini .loader-circle,
.loading-gif:not(.custom).mini .loader-bar {
    width: 20px;
    height: 20px;
}

.loading-gif:not(.custom),
.loading-gif:not(.custom) .loader-circle,
.loading-gif:not(.custom) .loader-bar {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.loading-gif:not(.custom).large,
.loading-gif:not(.custom).large .loader-circle,
.loading-gif:not(.custom).large .loader-bar {
    width: 40px;
    height: 40px;
}

.loading-gif:not(.custom).extra-large,
.loading-gif:not(.custom).extra-large .loader-circle,
.loading-gif:not(.custom).extra-large .loader-bar {
    width: 60px;
    height: 60px;
}

.loading-gif.custom .loader-circle,
.loading-gif.custom .loader-bar {
    width: 100%;
    height: 100%;
}

.loading-gif .loader-circle {
    border: 5px solid #f3f3f3;
}

.loading-gif .loader-bar {
    border: 5px solid transparent;
    border-top: 5px solid #831843;
    -webkit-animation: spin 1.5s cubic-bezier(0, 0.07, 0.8, 0.88) infinite; /* Safari */
    animation: spin 1.5s cubic-bezier(0, 0.07, 0.8, 0.88) infinite;
}

/* Safari */
@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* LOADING BORDER 
  –––––––––––––––––––––––––––––––––––––––––––––––––– */

.border-loading {
    opacity: 0.7;
    animation: border-loading 1s ease-in-out infinite;
    border: 2px solid var(--twc-gray-400);
    box-sizing: border-box;
}

@keyframes border-loading {
    0% {
        border-color: var(--twc-gray-200);
    }
    50% {
        border-color: var(--twc-gray-300);
    }
    100% {
        border-color: var(--twc-gray-200);
    }
}

/* LOADING BG 
  –––––––––––––––––––––––––––––––––––––––––––––––––– */

.bg-loading {
    opacity: 0.7;
    animation: bg-loading 1s ease-in-out infinite;
    background-color: var(--twc-gray-400);
}

@keyframes bg-loading {
    0% {
        background-color: var(--twc-gray-200);
    }
    50% {
        background-color: var(--twc-gray-300);
    }
    100% {
        background-color: var(--twc-gray-200);
    }
}

/* ANIMATIONS 
  –––––––––––––––––––––––––––––––––––––––––––––––––– */

/* H-WHEEZE */

.h-wheeze {
    animation: h-wheeze 0.82s cubic-bezier(.36,.07,.19,.97) both;
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    perspective: 1000px;
}

@keyframes h-wheeze {
    10%, 90% {
        transform: translate3d(-0.5px, 0, 0);
    }

    20%, 80% {
        transform: translate3d(1px, 0, 0);
    }

    30%, 50%, 70% {
        transform: translate3d(-2px, 0, 0);
    }

    40%, 60% {
        transform: translate3d(2px, 0, 0);
    }
}

/* V-WHEEZE */

.v-wheeze {
    animation: v-wheeze 0.82s cubic-bezier(.36,.07,.19,.97) both;
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    perspective: 1000px;
}

@keyframes v-wheeze {
    10%, 90% {
        transform: translate3d(0, -0.5px, 0);
    }

    20%, 80% {
        transform: translate3d(0, 1px, 0);
    }

    30%, 50%, 70% {
        transform: translate3d(0, -2px, 0);
    }

    40%, 60% {
        transform: translate3d(0, 2px, 0);
    }
}

/* PULSE WHEEZE */

.pulse-wheeze {
    animation: pulse-wheeze 0.82s cubic-bezier(.36,.07,.19,.97) both;
    transform: scale(1);
}

@keyframes pulse-wheeze {
    10%, 90% {
        transform: scale(0.90);
    }

    20%, 80% {
        transform: scale(1.05);
    }

    30%, 50%, 70% {
        transform: scale(0.96);
    }

    40%, 60% {
        transform: scale(1.10);
    }
}

/* LOADERS */

.animate-spin {
    animation: spin 1s linear infinite;
}

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

.animate-ping {
    animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes ping {
    75%, 100% {
        transform: scale(2);
        opacity: 0;
    }
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: .5;
    }
}

.animate-bounce {
    animation: bounce 1s infinite;
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}

/* CHECKBOX */

input[type="checkbox"]:not(.custom-checkbox) {
    width: 16px;
    height: 16px;
    padding: 0;
    margin: 0;
    border: none;
    position: relative;
    z-index: 0;
}

input[type="checkbox"]::before:not(.custom-checkbox) {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 2px;
    border-width: 1px;
    border-color: black;
    background-color: white;
    cursor: pointer;
    z-index: 1;
}

input[type="checkbox"]:hover:not(:checked)::before {
    background-color: var(--twc-pink-200);
}

input[type="checkbox"]:checked::before {
    background-color: var(--twc-pink-600);
}

input[type="checkbox"]::after {
    content: " ";
    display: none;
    width: 10px;
    height: 6px;
    rotate: -50deg;
    position: absolute;
    top: 4px;
    left: 3px;
    z-index: 2;
    border-color: white;
    border-style: solid;
    border-radius: 2px;
    border-top: none;
    border-right: none;
    border-bottom-width: 2px;
    border-left-width: 2px;
}

input[type="checkbox"]:checked::after {
    display: block;
}