/*=========================================================
    HP-EXAM-PRO
    UTILITIES.CSS
    --------------------------------------------------------
    Reusable Utility Classes
==========================================================*/

/*=========================================
    DISPLAY
=========================================*/

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

/*=========================================
    FLEX
=========================================*/

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

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

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

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

.flex-fill{flex:1 1 auto!important;}
.flex-grow{flex-grow:1!important;}
.flex-shrink{flex-shrink:1!important;}

/*=========================================
    GRID
=========================================*/

.grid-2{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
}

.grid-3{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
}

.grid-4{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
}

/*=========================================
    WIDTH
=========================================*/

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

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

/*=========================================
    HEIGHT
=========================================*/

.h-25{height:25%!important;}
.h-50{height:50%!important;}
.h-75{height:75%!important;}
.h-100{height:100%!important;}

.vh-100{
    min-height:100vh;
}

/*=========================================
    MARGIN
=========================================*/

.m-0{margin:0!important;}
.m-1{margin:.25rem!important;}
.m-2{margin:.5rem!important;}
.m-3{margin:1rem!important;}
.m-4{margin:1.5rem!important;}
.m-5{margin:3rem!important;}

.mt-0{margin-top:0!important;}
.mt-1{margin-top:.25rem!important;}
.mt-2{margin-top:.5rem!important;}
.mt-3{margin-top:1rem!important;}
.mt-4{margin-top:1.5rem!important;}
.mt-5{margin-top:3rem!important;}

.mb-0{margin-bottom:0!important;}
.mb-1{margin-bottom:.25rem!important;}
.mb-2{margin-bottom:.5rem!important;}
.mb-3{margin-bottom:1rem!important;}
.mb-4{margin-bottom:1.5rem!important;}
.mb-5{margin-bottom:3rem!important;}

.ms-auto{
    margin-left:auto!important;
}

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

.mx-auto{
    margin-left:auto!important;
    margin-right:auto!important;
}

/*=========================================
    PADDING
=========================================*/

.p-0{padding:0!important;}
.p-1{padding:.25rem!important;}
.p-2{padding:.5rem!important;}
.p-3{padding:1rem!important;}
.p-4{padding:1.5rem!important;}
.p-5{padding:3rem!important;}

.pt-5{padding-top:3rem!important;}
.pb-5{padding-bottom:3rem!important;}

.py-5{
    padding-top:3rem!important;
    padding-bottom:3rem!important;
}

.px-5{
    padding-left:3rem!important;
    padding-right:3rem!important;
}

/*=========================================
    POSITION
=========================================*/

.position-relative{
    position:relative!important;
}

.position-absolute{
    position:absolute!important;
}

.position-fixed{
    position:fixed!important;
}

.position-sticky{
    position:sticky!important;
}

/*=========================================
    BORDER
=========================================*/

.border{
    border:1px solid var(--gray-300)!important;
}

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

.border-primary{
    border-color:var(--primary)!important;
}

.rounded{
    border-radius:var(--radius)!important;
}

.rounded-sm{
    border-radius:var(--radius-sm)!important;
}

.rounded-lg{
    border-radius:var(--radius-lg)!important;
}

.rounded-circle{
    border-radius:50%!important;
}

.rounded-pill{
    border-radius:999px!important;
}

/*=========================================
    SHADOW
=========================================*/

.shadow-sm{
    box-shadow:var(--shadow-sm)!important;
}

.shadow{
    box-shadow:var(--shadow)!important;
}

.shadow-lg{
    box-shadow:var(--shadow-lg)!important;
}

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

/*=========================================
    BACKGROUND
=========================================*/

.bg-primary{background:var(--primary)!important;}
.bg-secondary{background:var(--secondary)!important;}
.bg-success{background:var(--success)!important;}
.bg-danger{background:var(--danger)!important;}
.bg-warning{background:var(--warning)!important;}
.bg-info{background:var(--info)!important;}
.bg-light{background:var(--light)!important;}
.bg-white{background:var(--white)!important;}
.bg-dark{background:var(--gray-900)!important;}

/*=========================================
    OPACITY
=========================================*/

.opacity-0{opacity:0;}
.opacity-25{opacity:.25;}
.opacity-50{opacity:.5;}
.opacity-75{opacity:.75;}
.opacity-100{opacity:1;}

/*=========================================
    OVERFLOW
=========================================*/

.overflow-hidden{overflow:hidden;}
.overflow-auto{overflow:auto;}
.overflow-scroll{overflow:scroll;}

/*=========================================
    CURSOR
=========================================*/

.cursor-pointer{
    cursor:pointer;
}

.cursor-default{
    cursor:default;
}

/*=========================================
    Z-INDEX
=========================================*/

.z-1{z-index:1;}
.z-10{z-index:10;}
.z-100{z-index:100;}
.z-navbar{z-index:var(--z-navbar);}
.z-modal{z-index:var(--z-modal);}

/*=========================================
    TRANSITIONS
=========================================*/

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

/*=========================================
    HOVER EFFECTS
=========================================*/

.hover-shadow:hover{
    box-shadow:var(--shadow-lg);
}

.hover-lift:hover{
    transform:translateY(-6px);
}

.hover-scale:hover{
    transform:scale(1.03);
}

.hover-primary:hover{
    color:var(--primary)!important;
}

/*=========================================
    RESPONSIVE
=========================================*/

@media (max-width:992px){

    .grid-4{
        grid-template-columns:repeat(2,1fr);
    }

}

@media (max-width:768px){

    .grid-3,
    .grid-4,
    .grid-2{

        grid-template-columns:1fr;

    }

    .px-5{

        padding-left:1rem!important;

        padding-right:1rem!important;

    }

}