/**

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

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

 */

.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-space-between{align-content: space-between; !important;}
.custom-justify-center {justify-content: center; !important;}
.custom-justify-end {justify-content: end; !important;}
.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-1-4 { width: 25%; }
.custom-w-1-3 { width: 33.3333%; }
.custom-w-1-2 { width: 50%; }
.custom-w-2-3 { width: 66.6667%; }
.custom-w-3-4 { width: 75%; }
.custom-w-full { width: 100%; }

.custom-w-100 { width: 100px; }
.custom-w-200 { width: 200px; }
.custom-w-300 { width: 300px; }
.custom-w-400 { width: 400px; }
.custom-w-500 { width: 500px; }

.custom-w-4rem { width: 4rem; }
.custom-w-8rem { width: 8rem; }
.custom-w-12rem { width: 12rem; }
.custom-w-16rem { width: 16rem; }

.custom-h-1-4 { height: 25%; }
.custom-h-1-3 { height: 33.3333%; }
.custom-h-1-2 { height: 50%; }
.custom-h-2-3 { height: 66.6667%; }
.custom-h-3-4 { height: 75%; }
.custom-h-full { height: 100%; }

.custom-h-100 { height: 100px; }
.custom-h-200 { height: 200px; }
.custom-h-300 { height: 300px; }
.custom-h-400 { height: 400px; }
.custom-h-500 { height: 500px; }

.custom-h-4rem { height: 4rem; }
.custom-h-8rem { height: 8rem; }
.custom-h-12rem { height: 12rem; }
.custom-h-16rem { height: 16rem; }

.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-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-pink     { background-color: #FADADD; }  .custom-bg-peach    { background-color: #FFDAB9; }  .custom-bg-mint     { background-color: #AAF0D1; }  .custom-bg-lavender { background-color: #E6E6FA; }  .custom-bg-sky      { background-color: #B3E5FC; }  .custom-bg-lemon    { background-color: #FFFACD; }
.custom-text-pink     { color: #F06292; }  .custom-text-peach    { color: #FFB07C; }  .custom-text-mint     { color: #20C997; }  .custom-text-lavender { color: #9370DB; }  .custom-text-sky      { color: #0288D1; }  .custom-text-lemon    { color: #FDD835; }
.custom-bg-red     { background-color: #FF5252; }  .custom-bg-orange  { background-color: #FF9800; }  .custom-bg-yellow  { background-color: #FFEB3B; }  .custom-bg-green   { background-color: #4CAF50; }  .custom-bg-teal    { background-color: #009688; }  .custom-bg-blue    { background-color: #2196F3; }  .custom-bg-purple  { background-color: #9C27B0; }
.custom-text-red     { color: #E53935; }  .custom-text-orange  { color: #FB8C00; }  .custom-text-yellow  { color: #FBC02D; }  .custom-text-green   { color: #388E3C; }  .custom-text-teal    { color: #00796B; }  .custom-text-blue    { color: #1976D2; }  .custom-text-purple  { color: #7B1FA2; }
.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; }
/* ===== 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; }
/* == 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 {
    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%);
    }
}

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

.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;}

.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);}

.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);}

.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);}

.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);}

.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; } }

.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);}