/*==========================================================
    Emirates Online Visa
    Utilities CSS
    Version : 1.0.0
==========================================================*/


/*==========================================================
    Display
==========================================================*/

.d-none{display:none!important;}
.d-block{display:block!important;}
.d-inline{display:inline!important;}
.d-inline-block{display:inline-block!important;}
.d-flex{display:flex!important;}
.d-grid{display:grid!important;}


/*==========================================================
    Flex Direction
==========================================================*/

.flex-row{flex-direction:row;}
.flex-column{flex-direction:column;}
.flex-wrap{flex-wrap:wrap;}
.flex-nowrap{flex-wrap:nowrap;}


/*==========================================================
    Alignment
==========================================================*/

.items-start{align-items:flex-start;}
.items-center{align-items:center;}
.items-end{align-items:flex-end;}

.justify-start{justify-content:flex-start;}
.justify-center{justify-content:center;}
.justify-end{justify-content:flex-end;}
.justify-between{justify-content:space-between;}
.justify-around{justify-content:space-around;}
.justify-evenly{justify-content:space-evenly;}


/*==========================================================
    Gap
==========================================================*/

.gap-8{gap:8px;}
.gap-12{gap:12px;}
.gap-16{gap:16px;}
.gap-20{gap:20px;}
.gap-24{gap:24px;}
.gap-32{gap:32px;}
.gap-40{gap:40px;}
.gap-48{gap:48px;}


/*==========================================================
    Width
==========================================================*/

.w-auto{width:auto;}
.w-25{width:25%;}
.w-50{width:50%;}
.w-75{width:75%;}
.w-100{width:100%;}

.h-auto{height:auto;}
.h-100{height:100%;}


/*==========================================================
    Margin Bottom
==========================================================*/

.mb-0{margin-bottom:0!important;}
.mb-8{margin-bottom:8px;}
.mb-12{margin-bottom:12px;}
.mb-16{margin-bottom:16px;}
.mb-20{margin-bottom:20px;}
.mb-24{margin-bottom:24px;}
.mb-32{margin-bottom:32px;}
.mb-40{margin-bottom:40px;}
.mb-48{margin-bottom:48px;}
.mb-64{margin-bottom:64px;}


/*==========================================================
    Margin Top
==========================================================*/

.mt-0{margin-top:0!important;}
.mt-8{margin-top:8px;}
.mt-12{margin-top:12px;}
.mt-16{margin-top:16px;}
.mt-20{margin-top:20px;}
.mt-24{margin-top:24px;}
.mt-32{margin-top:32px;}
.mt-40{margin-top:40px;}
.mt-48{margin-top:48px;}
.mt-64{margin-top:64px;}


/*==========================================================
    Padding
==========================================================*/

.p-0{padding:0!important;}
.p-8{padding:8px;}
.p-12{padding:12px;}
.p-16{padding:16px;}
.p-20{padding:20px;}
.p-24{padding:24px;}
.p-32{padding:32px;}
.p-40{padding:40px;}

.pt-80{padding-top:80px;}
.pb-80{padding-bottom:80px;}

.pt-section{
    padding-top:var(--eov-section-lg);
}

.pb-section{
    padding-bottom:var(--eov-section-lg);
}


/*==========================================================
    Text Alignment
==========================================================*/

.text-left{text-align:left;}
.text-center{text-align:center;}
.text-right{text-align:right;}


/*==========================================================
    Font Weight
==========================================================*/

.fw-300{font-weight:300;}
.fw-400{font-weight:400;}
.fw-500{font-weight:500;}
.fw-600{font-weight:600;}
.fw-700{font-weight:700;}
.fw-800{font-weight:800;}


/*==========================================================
    Border Radius
==========================================================*/

.radius-0{border-radius:0;}
.radius-sm{border-radius:var(--eov-radius-sm);}
.radius-md{border-radius:var(--eov-radius-md);}
.radius-lg{border-radius:var(--eov-radius-lg);}
.radius-xl{border-radius:var(--eov-radius-xl);}
.radius-pill{border-radius:999px;}


/*==========================================================
    Shadow
==========================================================*/

.shadow-none{box-shadow:none!important;}
.shadow-sm{box-shadow:var(--eov-shadow-sm);}
.shadow-md{box-shadow:var(--eov-shadow-md);}
.shadow-lg{box-shadow:var(--eov-shadow-lg);}


/*==========================================================
    Border
==========================================================*/

.border{
    border:1px solid var(--eov-border);
}

.border-top{
    border-top:1px solid var(--eov-border);
}

.border-bottom{
    border-bottom:1px solid var(--eov-border);
}

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


/*==========================================================
    Background
==========================================================*/

.bg-primary{
    background:var(--eov-primary);
    color:#fff;
}

.bg-dark{
    background:var(--eov-secondary);
    color:#fff;
}

.bg-light{
    background:var(--eov-background);
}

.bg-white{
    background:#fff;
}


/*==========================================================
    Position
==========================================================*/

.relative{position:relative;}
.absolute{position:absolute;}
.fixed{position:fixed;}

.overflow-hidden{
    overflow:hidden;
}


/*==========================================================
    Visibility
==========================================================*/

.visible{visibility:visible;}
.invisible{visibility:hidden;}


/*==========================================================
    Cursor
==========================================================*/

.cursor-pointer{
    cursor:pointer;
}


/*==========================================================
    Transition
==========================================================*/

.transition{
    transition:var(--eov-transition);
}


/*==========================================================
    Responsive
==========================================================*/

@media(max-width:1024px){

.tablet-hidden{
    display:none!important;
}

}

@media(max-width:767px){

.mobile-hidden{
    display:none!important;
}

.mobile-center{
    text-align:center!important;
}

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

.mobile-flex-column{
    flex-direction:column!important;
}

}