/* Vertical Space */
.v-space.xxsm { height: 2px; min-height: 2px; }
.v-space.xsm { height: 4px; min-height: 4px; }
.v-space.sm { height: 8px; min-height: 8px; }
.v-space { height: 16px; min-height: 16px; }
.v-space.lg { height: 32px; min-height: 32px; }
.v-space.xlg { height: 48px; min-height: 48px; }
.v-space.xxlg { height: 64px; min-height: 64px; }
.v-space.xxxlg { height: 100px; min-height: 100px; }

@media (max-width: 576px) {
    .v-space.lg { height: 16px; min-height: 16px;  }
    .v-space.xxlg { height: 38px; }
    .v-space.xxxlg { height: 64px; }
}

/* Visibility */
@media(max-width: 992px) { .homt {display: none !important;} } /* Hide on mobile and tablet  */
@media(min-width: 992px) { .hod {display: none !important;} } /* Hide on desktop  */
@media(max-width: 576px) { .hmob {display: none !important;} } /* Hide Mobile only  */
@media(max-width: 768px) { .hotab {display: none !important;} } /* Hide Mobile only  */
@media(min-width: 768px) { .hofmid {display: none !important;} } /* Hide From mid Tablet  */
@media(min-width: 577px) { .htab {display: none !important;} } /* Hide From Tablet  */

/* Small large screens */
@media(min-width: 1551px) { .hols {display: none !important;} } /* Hide on large screen  */
@media(max-width: 1551px) { .hoss {display: none !important;} } /* Hide on small screen  */

/* Old classes mobile */
@media(max-width: 992px) { .desktop {display: none !important;} } /* 1025 Mobile update  */
@media(min-width: 992px) { .mobile {display: none !important;} } /* 1025 Mobile update  */
@media(min-width: 1200px) { .ho1200 {display: none !important;} }

.hide { display: none !important; }

.ghost {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    overflow: hidden;
}

.no-transition {
    transition: 0s !important;
}

.p-relative {
    position: relative;
}

/* Background color*/
.bg-primary { background-color: var(--primary) !important;}
.bg-primary-dark { background-color: var(--primary-dark) !important;}
.bg-primary-light { background-color: var(--primary-light) !important;}

.bg-secondary { background-color: var(--secondary) !important;}
.bg-secondary-dark { background-color: var(--secondary-dark) !important;}
.bg-secondary-light { background-color: var(--secondary-light) !important;}

.bg-tertiary { background-color: var(--tertiary) !important;}
.bg-tertiary-dark { background-color: var(--tertiary-dark) !important;}
.bg-tertiary-transparent { background-color: var(--tertiary-transparent) !important;}

.bg-grey-01 { background-color: var(--grey-01) !important;}
.bg-grey-02 { background-color: var(--grey-02) !important;}
.bg-blue-01 { background-color: var(--blue-01) !important;}
.bg-blue-04 { background-color: var(--blue-04) !important;}

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

.bg-light-purple { background-color: var(--light-purple) !important;}
.bg-light-yellow { background-color: var(--light-yellow) !important;}
.bg-info:not(.badge ), .bg-light-blue { background-color: var(--light-blue) !important;}

.bg-dark { background-color: var(--grey-04) !important;}
.bg-light, .bg-white { background-color: var(--white-01) !important;}

.bg-success { background-color: var(--success) !important;}
.bg-danger { background-color: var(--danger) !important;}
.bg-warning { background-color: var(--warning) !important;}

/* Margin */
.ml-auto { margin-left: auto !important; }

.mr-auto { margin-right: auto !important; }

.mbn-2 {
    margin-bottom: -8px !important;
}

/* Width */
.mmw-220 {
    min-width: 220px !important;
    max-width: 220px !important;
}

.mw-100 { max-width: 100px !important; }

.mw-200 { max-width: 200px !important; }

.mw-220 { max-width: 220px !important; }

.mw-300 { max-width: 300px !important; }

@media(max-width: 992px) { .mw-300 { max-width: 100% !important; } }

.w20 {width: 20px !important;}

.w40 { width: 40px !important; }

.w48 { width: 48px !important; }

.w80 { width: 80px !important; }

.w90 { width: 90px !important; }

.w100 { width: 100px !important; }

.w120 { width: 120px !important; }

.w130 { width: 130px !important; }

.w140 { width: 140px !important; }

.w150 { width: 150px !important; }

.w200 { width: 200px !important; }

.w220 { width: 220px !important; }

.w300 { width: 300px !important; }

.mxw100 { max-width: 100px; }

.mw150 { min-width: 150px; }

.mw-240 { min-width: 240px; }

.mw-400 { min-width: 400px; }

.mnw100 { min-width: 100px; }

.mnw120 { min-width: 120px; }

.mnw140 { min-width: 140px; }

.mnw180 { min-width: 180px; }

.mnw200 { min-width: 200px; }

.mnw280 { min-width: 280px; }

.mnw320 { min-width: 320px; }

.maxw180 { max-width: 180px; }

.w-fill { width: -webkit-fill-available !important;}

.w-fit { width: fit-content;}

@media (max-width: 576px) {
    .maxw180 {
        max-width: 100%;
        height: auto; /* fix image TrainingAssoc/_Exec*/
    }
}

.maxw350 { max-width: 350px; }

.maxw250 { max-width: 250px; }

.maxw800 { max-width: 800px; }

.cw130 {
    width: 130px;
    min-width: 130px;
    max-width: 130px;
}

.max-w-260px {
    max-width: 260px;
    margin-left: auto;
}
@media (max-width: 576px) {
    .w-hscreem {
        width: 42%;
    }
}

@media (max-width: 992px) {
    .wdk-group > .wdk-group.w-100-tab,
    .w-100-tab {
        width: 100% !important;
    }
}
@media (max-width: 576px) {
    .wdk-group > .wdk-group.w-100-mob,
    .w-100-mob {
        width: 100% !important;
    }
}
@media (max-width: 520px) {
    .wdk-group > .wdk-group.w-100-mob-520,
    .w-100-mob-520 {
        width: 100% !important;
    }
}

/* New Standard - Apply clean up all on above */
.min-w-110 {
    min-width: 110px;
}

.min-w-130 {
    min-width: 130px;
}

.min-w-180 {
    min-width: 180px;
}

.max-w-180 {
    max-width: 180px;
}

.max-w-260 {
    max-width: 260px;
}

.max-w-300 {
    max-width: 300px;
}

.max-w-320 {
    max-width: 320px;
}

.max-w-400 {
    max-width: 400px;
}

.max-w-full {
    max-width: 100% !important;
}

/* END - Width */

/* Height */
.max-h-116 {
    max-height: 116px;
}

.max-h-400 {
    max-height: 400px;
}

.mnh300 { min-height: 300px; }

.h-28 { height: 28px; }

.h-44 { height: 44px; }

.h-48 { height: 48px; }

.h-50 { height: 50px !important; max-height: 50px !important; }

.h-80 { height: 80px !important; max-height: 80px !important; }

.h-85 { height: 85px !important; max-height: 85px !important; }

.h-90 { height: 90px !important; max-height: 90px !important; }

/* .h-100 { height: 100px !important; } */
.h100 { height: 100px !important; }

.h-120 { height: 120px !important; max-height: 120px !important; }

.h120 { height: 120px !important; }

.h-130 { height: 130px !important; max-height: 130px !important; }

.h-150 { height: 150px !important; }

.h-160 { height: 160px !important; max-height: 160px !important; }

.h-326 { height: 326px !important; }

.h-350 { height: 350px !important; }

.vh-100 { height: 100vh; }

.vh-less-300 { height: calc(100vh - 300px) }

.h-180-offset { height: calc(100vh - 180px); }

.h-488-offset { height: calc(100vh - 488px) !important; }

@media(min-width: 991px) {
    .h-100-desk {
        height: 100%;
    }
}

/* Wraps */
.wrap { white-space: pre-wrap !important; }

.f-wrap { flex-wrap: wrap !important; }

.f-nowrap { flex-wrap: nowrap !important; }

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

.nowrap-nomob {
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
}

@media(max-width: 992px) {
    .nowrap-nomob {
        white-space: initial !important;
        flex-wrap: wrap !important;
    }
    .nowrap-mob {
        white-space: nowrap !important;
        flex-wrap: nowrap !important;
    }
    .nowrap-mob-flex {
        flex-wrap: nowrap !important;
    }
}

@media(max-width: 576px) {
    .wrap-mob { white-space: pre-wrap !important; }
}

/* Others */

/* To fix float overflow height problem add this class on parent */
.clearfix:after {
    clear: both;
    content: "";
    display: table;
}

hr { background-color: var(--divisor-base-color); }
hr.sm { margin: 0.25rem 0; }
hr.lg { margin: 1.5rem 0; }
hr.xlg { margin: 2rem 0; }
hr.xxlg { margin: 2.5rem 0; }
hr.light { background-color: var(--divisor-light-color); }

.vr {
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 100%;
    background: var(--divisor-base-color);
}

.vr.light {
    background: var(--divisor-light-color);
}

.wdk-line-inline {
    flex: 1;
    height: 1px;
    background-color: var(--grey-02);
}

.flat { box-shadow: none !important; }

.shadow { box-shadow: 0px 3px 6px rgba(0,0,0,.10) !important; }

.border { border: 1px solid #ced4da; }

.radius-base { border-radius: var(--radius-base); }

.radius-mini {border-radius: var(--radius-mini);}

.overflow-hidden { overflow: hidden; }
.overflow-visible { overflow: visible; }
.overflow-auto { overflow: auto; }
.overflow-x-hidden { overflow-x: hidden; }
.overflow-y-scroll { overflow-y: scroll; }

.text-center-web { text-align: -webkit-center; }

.center { text-align: center; }

.overlaid-top {
    top: 8px;
    position: absolute;
}

@media (max-width: 576px) {
    .dfcr-mob {
        flex-direction: column-reverse !important;
    }
}

/* Btn Icon Mobile */
@media (max-width: 576px) {
    .btn-icon-mob {
        height: 40px !important;
        width: 40px !important;
        padding: initial !important;
    }
    .btn-icon-mob i {
        font-size: 22px !important;
        margin: 0 !important;
    }
}

@media (max-width: 768px) {
    .btn-icon-hotab {
        height: 40px !important;
        width: 40px !important;
        padding: initial !important;
    }
    .btn-icon-hotab i {
        font-size: 22px !important;
        margin: 0 !important;
    }
}

@media (max-width: 992px) {
    .btn-icon-homt {
        height: 40px !important;
        width: 40px !important;
        padding: initial !important;
    }
    .btn-icon-homt i {
        font-size: 22px !important;
        margin: 0 !important;
    }
}

@media (max-width: 992px) {
    .wdk-group > .wdk-group.w-100-tab,
    .w-100-tab {
        width: 100% !important;
    }
}

@media (max-width: 576px) {
    .wdk-group > .wdk-group.w-100-mob,
    .w-100-mob {
        width: 100% !important;
    }
}

@media (max-width: 520px) {
    .wdk-group > .wdk-group.w-100-mob-520,
    .w-100-mob-520 {
        width: 100% !important;
    }
}

/* Makes form's height dinamic  */
.form-full-fixed ~ form {
    flex: 1;
}

.flex-0 {
    flex: 0 !important;
}

.flex-fill {
    flex: 1 !important;
}

.flex-grow {
    flex-grow: 1;
}

/* Makes form's height display block  */
.form-block ~ form {
    display: block !important;
}

/* Upload width helper. Replace for a mafier on class or a estructural prop */
.form-input-minwidth-100 {
	white-space: pre-wrap;
	width: -webkit-fill-available;
}

/* Positions */
.bottom-left {
    position: absolute;
    bottom: 0;
    left: 0;
}

.bottom-right {
    position: absolute;
    bottom: 0;
    right: 0;
}

.hover-delete:hover {
    color: var(--red-04);
}

.wdk-fade-out{animation:fade-out 0.3s ease-out both}
@keyframes fade-out{0%{opacity:1}100%{opacity:0}}

.wdk-fade-in{animation:fade-in 0.3s ease-out both}
@keyframes fade-in{0%{opacity:0}100%{opacity:1}}

/* Order */

@media (max-width: 992px) {
    .order-tab-01 {
        order: 1;
    }

    .order-tab-02 {
        order: 2;
    }
}

.p-12 {
    padding: 12px !important;
}

.pt-12 {
    padding-top: 12px !important;
}

.pb-12 {
    padding-bottom: 12px !important;
}

.zindex-1 {
    z-index: 1 !important;
}
/* Delay to click on link */
.delayed-link {
    pointer-events: none;
    cursor: default;
    animation: delayedFadeIn 1000ms forwards;
    animation-delay: 1000ms;
}

@keyframes delayedFadeIn {
     to {
         pointer-events: auto;
         cursor: pointer;
     }
 }