/**

    File made for add special styling on application
    No totally compatible with bootstrap

    Note: all class in this file will start with "custom" signature

    ONLY USE THIS FILE TO MAKE GLOBAL STYLING CLASSES

 */

.custom-flex {display: flex;}
.custom-flex-wrap {flex-wrap: wrap;}
.custom-flex-no-wrap {flex-wrap: nowrap;}
.custom-align-center {align-items: center;}
.custom-align-start {align-items: start;}
.custom-align-end {align-items: end;}
.custom-align-center {align-items: center;}
.custom-align-space-between{align-content: space-between;}
.custom-justify-center {justify-content: center;}
.custom-justify-start {justify-content: start;}
.custom-justify-end {justify-content: end;}
.custom-justify-between {justify-content: space-between;}
.custom-justify-around {justify-content: space-around;}
.custom-justify-evenly {justify-content: space-evenly;}
.custom-justify-flex-end {justify-content: flex-end;}
.custom-justify-flex-start {justify-content: flex-start;}
.custom-self-start { align-self: flex-start; }
.custom-self-center { align-self: center; }
.custom-self-end { align-self: flex-end; }
.custom-flex-1 { flex: 1 1 0; }
.custom-flex-auto { flex: 1 1 auto; }
.custom-flex-none { flex: 0 0 auto; }

.custom-m0 { margin: 0 !important; }
.custom-m1 { margin: 4px; }
.custom-m2 { margin: 8px; }
.custom-m3 { margin: 16px; }
.custom-m4 { margin: 24px; }
.custom-m5 { margin: 48px; }
.custom-p0 { padding: 0 !important; }
.custom-p1 { padding: 4px; }
.custom-p2 { padding: 8px; }
.custom-p3 { padding: 16px; }
.custom-p4 { padding: 24px; }
.custom-p5 { padding: 48px; }

.custom-w-full { width: 100%; }

.custom-h-full { height: 100%; }

.custom-border-solid { border: solid; }
.custom-border-1 { border-width: 1px; }
.custom-border-2 { border-width: 2px; }
.custom-border-3 { border-width: 3px; }
.custom-border-4 { border-width: 4px; }
.custom-border-5 { border-width: 5px; }
.custom-border-6 { border-width: 6px; }

/* === SOLO TOP === */
.custom-mt0 { margin-top: 0 !important; }
.custom-mt1 { margin-top: 4px; }
.custom-mt2 { margin-top: 8px; }
.custom-mt3 { margin-top: 16px; }
.custom-mt4 { margin-top: 24px; }
.custom-mt5 { margin-top: 48px; }
.custom-pt0 { padding-top: 0 !important; }
.custom-pt1 { padding-top: 4px; }
.custom-pt2 { padding-top: 8px; }
.custom-pt3 { padding-top: 16px; }
.custom-pt4 { padding-top: 24px; }
.custom-pt5 { padding-top: 48px; }
/* === SOLO RIGHT === */
.custom-mr0 { margin-right: 0 !important; }
.custom-mr1 { margin-right: 4px; }
.custom-mr2 { margin-right: 8px; }
.custom-mr3 { margin-right: 16px; }
.custom-mr4 { margin-right: 24px; }
.custom-mr5 { margin-right: 48px; }
.custom-pr0 { padding-right: 0 !important; }
.custom-pr1 { padding-right: 4px; }
.custom-pr2 { padding-right: 8px; }
.custom-pr3 { padding-right: 16px; }
.custom-pr4 { padding-right: 24px; }
.custom-pr5 { padding-right: 48px; }
/* === SOLO BOTTOM === */
.custom-mb0 { margin-bottom: 0 !important; }
.custom-mb1 { margin-bottom: 4px; }
.custom-mb2 { margin-bottom: 8px; }
.custom-mb3 { margin-bottom: 16px; }
.custom-mb4 { margin-bottom: 24px; }
.custom-mb5 { margin-bottom: 48px; }
.custom-pb0 { padding-bottom: 0 !important; }
.custom-pb1 { padding-bottom: 4px; }
.custom-pb2 { padding-bottom: 8px; }
.custom-pb3 { padding-bottom: 16px; }
.custom-pb4 { padding-bottom: 24px; }
.custom-pb5 { padding-bottom: 48px; }
/* === SOLO LEFT === */
.custom-ml0 { margin-left: 0 !important; }
.custom-ml1 { margin-left: 4px; }
.custom-ml2 { margin-left: 8px; }
.custom-ml3 { margin-left: 16px; }
.custom-ml4 { margin-left: 24px; }
.custom-ml5 { margin-left: 48px; }
.custom-pl0 { padding-left: 0 !important; }
.custom-pl1 { padding-left: 4px; }
.custom-pl2 { padding-left: 8px; }
.custom-pl3 { padding-left: 16px; }
.custom-pl4 { padding-left: 24px; }
.custom-pl5 { padding-left: 48px; }
.custom-p6 { padding: 64px }
.custom-navbar {
    padding: 0;
    display: flex;
    align-items: center;
    gap: 5px;
}
.custom-gap0 { gap : 0 !important; }
.custom-gap1 { gap : 4px }
.custom-gap2 { gap : 8px }
.custom-gap3 { gap : 16px }
.custom-gap4 { gap : 24px }
.custom-gap5 { gap : 48px }
/* === TOP === */

.custom-radius-0 { border-radius: 0 !important;}
.custom-radius-1 { border-radius: 4px !important;  }
.custom-radius-2 { border-radius: 8px !important;  }
.custom-radius-3 { border-radius: 16px !important;  }
.custom-radius-4 { border-radius: 24px !important;  }
.custom-radius-5 { border-radius: 48px !important;  }

.custom-radius-t0 { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; }
.custom-radius-t1 { border-top-left-radius: 4px; border-top-right-radius: 4px; }
.custom-radius-t2 { border-top-left-radius: 8px; border-top-right-radius: 8px; }
.custom-radius-t3 { border-top-left-radius: 16px; border-top-right-radius: 16px; }
.custom-radius-t4 { border-top-left-radius: 24px; border-top-right-radius: 24px; }
.custom-radius-t5 { border-top-left-radius: 48px; border-top-right-radius: 48px; }
/* === BOTTOM === */
.custom-radius-b0 { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.custom-radius-b1 { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; }
.custom-radius-b2 { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }
.custom-radius-b3 { border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; }
.custom-radius-b4 { border-bottom-left-radius: 24px; border-bottom-right-radius: 24px; }
.custom-radius-b5 { border-bottom-left-radius: 48px; border-bottom-right-radius: 48px; }
/* === LEFT === */
.custom-radius-l0 { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
.custom-radius-l1 { border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
.custom-radius-l2 { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.custom-radius-l3 { border-top-left-radius: 16px; border-bottom-left-radius: 16px; }
.custom-radius-l4 { border-top-left-radius: 24px; border-bottom-left-radius: 24px; }
.custom-radius-l5 { border-top-left-radius: 48px; border-bottom-left-radius: 48px; }
/* === RIGHT === */
.custom-radius-r0 { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.custom-radius-r1 { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
.custom-radius-r2 { border-top-right-radius: 8px; border-bottom-right-radius: 8px; }
.custom-radius-r3 { border-top-right-radius: 16px; border-bottom-right-radius: 16px; }
.custom-radius-r4 { border-top-right-radius: 24px; border-bottom-right-radius: 24px; }
.custom-radius-r5 { border-top-right-radius: 48px; border-bottom-right-radius: 48px; }

/* === CORNERS (Individual) === */
.custom-radius-tl0 { border-top-left-radius: 0 !important; }
.custom-radius-tl1 { border-top-left-radius: 4px; }
.custom-radius-tl2 { border-top-left-radius: 8px; }
.custom-radius-tl3 { border-top-left-radius: 16px; }
.custom-radius-tl4 { border-top-left-radius: 24px; }
.custom-radius-tl5 { border-top-left-radius: 48px; }

.custom-radius-tr0 { border-top-right-radius: 0 !important; }
.custom-radius-tr1 { border-top-right-radius: 4px; }
.custom-radius-tr2 { border-top-right-radius: 8px; }
.custom-radius-tr3 { border-top-right-radius: 16px; }
.custom-radius-tr4 { border-top-right-radius: 24px; }
.custom-radius-tr5 { border-top-right-radius: 48px; }

.custom-radius-bl0 { border-bottom-left-radius: 0 !important; }
.custom-radius-bl1 { border-bottom-left-radius: 4px; }
.custom-radius-bl2 { border-bottom-left-radius: 8px; }
.custom-radius-bl3 { border-bottom-left-radius: 16px; }
.custom-radius-bl4 { border-bottom-left-radius: 24px; }
.custom-radius-bl5 { border-bottom-left-radius: 48px; }

.custom-radius-br0 { border-bottom-right-radius: 0 !important; }
.custom-radius-br1 { border-bottom-right-radius: 4px; }
.custom-radius-br2 { border-bottom-right-radius: 8px; }
.custom-radius-br3 { border-bottom-right-radius: 16px; }
.custom-radius-br4 { border-bottom-right-radius: 24px; }
.custom-radius-br5 { border-bottom-right-radius: 48px; }


.custom-bg-white    { background-color: #FFFFFF; }  .custom-bg-light    { background-color: #F8F9FA; }  .custom-bg-gray     { background-color: #E0E0E0; }  .custom-bg-darkgray { background-color: #B0B0B0; } .custom-bg-dark-ultra-gray { background-color: #454545; } .custom-bg-dark-ultra-gray:hover { background-color: #454545; color: #D1D1D1 !important; }  .custom-bg-silver   { background-color: #CFCFCF; }  .custom-bg-charcoal { background-color: #333333; }  .custom-bg-black    { background-color: #000000; }
.custom-bg-navy   { background-color: #1A2B4C; }  .custom-bg-steel  { background-color: #3A506B; }  .custom-bg-slate  { background-color: #5C6B73; }  .custom-bg-cool   { background-color: #7B8794; }
.custom-text-white    { color: #FFFFFF; } .custom-text-white:hover { color: #D1D1D1 !important; } .custom-text-light    { color: #F8F9FA; }  .custom-text-gray     { color: #6C757D; }  .custom-text-dark     { color: #343A40; }  .custom-text-charcoal { color: #212529; }  .custom-text-navy     { color: #1A2B4C; }  .custom-text-steel    { color: #3A506B; }  .custom-text-slate    { color: #5C6B73; }

/* To make a implementation of more colors use: https://tailwindcss.com/docs/colors  */

/* BORDER COLORS */

.custom-border-color-gray-400 { border-color :  oklch(0.707 0.022 261.325); }
.custom-border-black { border-color : #000; }
.custom-border-white { border-color : #fff; }


/* ===== Utilities - modern - ===== */
.custom-rounded    { border-radius: 8px; }
.custom-rounded-xl { border-radius: 16px; }
.custom-shadow-sm  { box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.custom-shadow-md  { box-shadow: 0 4px 8px rgba(0,0,0,0.15); }
.custom-shadow-lg  { box-shadow: 0 6px 12px rgba(0,0,0,0.2); }
.custom-border     { border: 1px solid #DEE2E6; }
.custom-border-dark{ border: 1px solid #ADB5BD; }
.custom-bold       { font-weight: 600; }
.custom-light      { font-weight: 300; }
.custom-uppercase  { text-transform: uppercase; }
.custom-muted      { color: #6C757D; }

.custom-text-nowrap { text-wrap: nowrap; text-wrap-mode: nowrap }

.custom-v-gray-bar {
    background-color: #e1e1e1;
    width: 1px;
}

/* == LOADERS ==  */
.custom-loader-points {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: block;
    margin:15px auto;
    position: relative;
    color: #FFF;
    left: -100px;
    box-sizing: border-box;
    animation: shadowRolling 2s linear infinite;
}
@keyframes shadowRolling {
    0% {
        box-shadow: 0 0 rgba(255, 255, 255, 0), 0 0 rgba(255, 255, 255, 0), 0 0 rgba(255, 255, 255, 0), 0 0 rgba(255, 255, 255, 0);
    }
    12% {
        box-shadow: 100px 0 #1f8ac4, 0 0 rgba(255, 255, 255, 0), 0 0 rgba(255, 255, 255, 0), 0 0 rgba(255, 255, 255, 0);
    }
    25% {
        box-shadow: 110px 0 #1f8ac4, 100px 0 #1f8ac4, 0 0 rgba(255, 255, 255, 0), 0 0 rgba(255, 255, 255, 0);
    }
    36% {
        box-shadow: 120px 0 #1f8ac4, 110px 0 #1f8ac4, 100px 0 #1f8ac4, 0 0 rgba(255, 255, 255, 0);
    }
    50% {
        box-shadow: 130px 0 #1f8ac4, 120px 0 #1f8ac4, 110px 0 #1f8ac4, 100px 0 #1f8ac4;
    }
    62% {
        box-shadow: 200px 0 rgba(255, 255, 255, 0), 130px 0 #1f8ac4, 120px 0 #1f8ac4, 110px 0 #1f8ac4;
    }
    75% {
        box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 130px 0 #1f8ac4, 120px 0 #1f8ac4;
    }
    87% {
        box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 130px 0 #1f8ac4;
    }
    100% {
        box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0);
    }
}
.custom-box-loader {
    width: 48px;
    height: 48px;
    display: inline-block;
    position: relative;
}
.custom-box-loader::after,
.custom-box-loader::before {
    content: '';
    box-sizing: border-box;
    width: 48px;
    height: 48px;
    border: 4px solid #FFF;
    position: absolute;
    left: 0;
    top: 0;
    animation: customboxloader 2s ease-in-out infinite;
}
.custom-box-loader::after {
    border-color: #1f8ac4;
    animation-delay: 1s;
}
@keyframes customboxloaderanimloader {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 0;
    }
}
.custom-bg-line-loader {
    width: 100%;
    height: 4.8px;
    display: inline-block;
    position: relative;
    background: rgba(255, 255, 255, 0.15);
    overflow: hidden;
}
.custom-bg-line-loader::after {
    content: '';
    width: 96px;
    height: 4.8px;
    background: #1f8ac4;
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    animation: hitZak 1s linear infinite alternate;
}
@keyframes hitZak {
    0% {
        left: 0;
        transform: translateX(-1%);
    }
    100% {
        left: 100%;
        transform: translateX(-99%);
    }
}
.custom-bg-normal-loader {
    width: 100%;
    height: 5px;
    display: inline-block;
    position: relative;
    background: rgba(255, 255, 255, 0.15);
    overflow: hidden;
}

.custom-round-loader_blue {
    width: 20px;
    height: 20px;
    border: 3px solid #1f8ac4;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: round-rotation 1s linear infinite;
}

.custom-round-loader_blue_small {
    min-width: 15px;
    min-height: 15px;
    max-width: 15px;
    max-height: 15px;
    border: 2px solid #1f8ac4;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: round-rotation 1s linear infinite;
}


.custom-round-loader {
    width: 48px;
    height: 48px;
    border: 5px solid #FFF;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: round-rotation 1s linear infinite;
}

@keyframes round-rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.custom-bg-normal-loader::after {
    content: '';
    width: 192px;
    height: 5px;
    background: #1f8ac4;
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    animation: custombgnormalanimloader 2s linear infinite;
}
@keyframes custombgnormalanimloader {
    0% {
        left: 0;
        transform: translateX(-100%);
    }
    100% {
        left: 100%;
        transform: translateX(0%);
    }
}
.custom-line-bouncy-loader {
    width: 100%;
    height: 5px;
    display: inline-block;
    position: relative;
    overflow: hidden;
}
.custom-line-bouncy-loader::after {
    content: '';
    width: 96px;
    height: 5px;
    background: #1f8ac4;
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    animation: hitZakBouncyLoader 0.6s ease-in-out infinite alternate;
}
@keyframes hitZakBouncyLoader {
    0% {
        left: 0;
        transform: translateX(-1%);
    }
    100% {
        left: 100%;
        transform: translateX(-99%);
    }
}

.custom_loader_content_grade {
    width: 120px;
    height: 20px;
    background:
            linear-gradient(90deg,#0001 33%,#0005 50%,#0001 66%)
            #f2f2f2;
    background-size:300% 100%;
    animation: l1_content_grade 1s infinite linear;
}
@keyframes l1_content_grade {
    0% {background-position: right}
}


.custom-skeleton-loader {
    position: relative;
    height: 320px;
    border-radius: 10px;
}
.custom-skeleton-loader:after {
    border-radius: 10px;
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-repeat: no-repeat;
    background-image: linear-gradient( 90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100% ),
    linear-gradient(#e8e8e8 100%, transparent 0),
    linear-gradient(#ffffff 100%, transparent 0);
    background-size: 100px 100%, 100% 100%, 100% 100%;
    background-position: 0 0 , 0 0, 0 0;
    animation: skeleton-animation 4000ms infinite;
}

@keyframes skeleton-animation {
    to {
        background-position: 100% 0, 0 0, 0 0;
    }
}

@keyframes custom-rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.custom-rotating-anim {
    animation: custom-rotation 0.6s linear infinite alternate;
}



/*
    vue 2 <transition name="animation">
*/

/* <transition name="custom-fade"> */
.custom-fade-enter-active {transition: opacity 0.5s;}
.custom-fade-enter {opacity: 0;}
.custom-fade-leave-active {transition: opacity 0.5s;}
.custom-fade-leave-to {opacity: 0;}

/* <transition name="custom-zoom"> */
.custom-zoom-enter-active, .custom-zoom-leave-active {transition: all 0.4s ease;}
.custom-zoom-enter {opacity: 0;transform: scale(0.8);}
.custom-zoom-leave-to {opacity: 0;transform: scale(0.8);}

/* <transition name="custom-slide"> */
.custom-slide-left-enter-active, .custom-slide-left-leave-active {transition: all 0.4s ease;}
.custom-slide-left-enter {opacity: 0;transform: translateX(-50px);}
.custom-slide-left-leave-to {opacity: 0;transform: translateX(-50px);}

/* <transition name="custom-slide"> */
.custom-slide-up-enter-active, .custom-slide-up-leave-active {transition: all 0.4s ease;}
.custom-slide-up-enter {opacity: 0;transform: translateY(50px);}
.custom-slide-up-leave-to {opacity: 0;transform: translateY(50px);}

/* <transition name="custom-flip"> */
.custom-flip-enter-active, .custom-flip-leave-active {transition: transform 0.6s ease, opacity 0.4s ease;transform-style: preserve-3d;}
.custom-flip-enter {opacity: 0;transform: rotateY(90deg);}
.custom-flip-leave-to {opacity: 0; transform: rotateY(90deg);}

/* <transition name="custom-bounce"> */
.custom-bounce-enter-active {animation: custom-bounce-in 0.6s;}
.custom-bounce-leave-active {animation: custom-bounce-out 0.6s;}
@keyframes custom-bounce-in { 0% { transform: scale(0.8); opacity: 0; } 60% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1); } }
@keyframes custom-bounce-out { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.8); opacity: 0; } }

/* <transition name="custom-slide"> */
.custom-slide-down-enter-active, .custom-slide-down-leave-active {transition: all 0.4s ease;}
.custom-slide-down-enter {opacity: 0;transform: translateY(-50px);}
.custom-slide-down-leave-to {opacity: 0;transform: translateY(-50px);}

/* <transition name="custom-collapse"> */
.custom-collapse-fade-enter-active,
.custom-collapse-fade-leave-active {
    transition: opacity 0.25s ease, max-height 0.25s ease, margin 0.25s ease, padding 0.25s ease;
    overflow: hidden;
}

/* <transition name="custom-collapse"> */
.custom-collapse-fade-enter,
.custom-collapse-fade-leave-to {
    opacity: 0;
    max-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
}

/* <transition name="custom-collapse"> */
.custom-collapse-fade-enter-to,
.custom-collapse-fade-leave {
    opacity: 1;
    max-height: 200px;
}