/* Display
****************************************************************/
.hdn { display: none; }
.scrollable {
    overflow: auto;
    overscroll-behavior: contain;
}
.scrollable-none {
    overflow: hidden;
    overscroll-behavior: none;
}
.valign-top { vertical-align: top !important; }
.valign-middle { vertical-align: middle !important; }
.valign-bottom { vertical-align: bottom !important; }

/* Flex
****************************************************************/
.d-flex { display: flex; min-height: 0; }
.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }
.flex-fill { flex: 1 1 0; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.flex-grow { flex-grow: 1; }
.flex-equal > * {
    flex: 1;
    min-width: 0;
}
.justify-content-start { justify-content: start; }
.justify-content-center { justify-content: center; }
.justify-content-between { justify-content: space-between; }
.justify-content-end { justify-content: end; }
.align-items-start { align-items: start; }
.align-items-center { align-items: center; }
.align-items-end { align-items: end; }
.align-items-stretch { align-items: stretch; }
.gap-1 { gap: 1px; }
.gap-2 { gap: 2px; }
.gap-3 { gap: 3px; }
.gap-4 { gap: 4px; }
.gap-5 { gap: 5px; }
.gap-6 { gap: 6px; }
.gap-10 { gap: 10px; }
.gap-15 { gap: 15px; }
.gap-20 { gap: 20px; }
.gap-25 { gap: 25px; }
.gap-30 { gap: 30px; }


/* Fonts
****************************************************************/
.fs-80p { font-size: 80% !important; }
.fs-85p { font-size: 85% !important; }
.fs-90p { font-size: 90% !important; }
.fs-95p { font-size: 95% !important; }
.fs-105p { font-size: 105% !important; }
.fs-110p { font-size: 110% !important; }
.fs-115p { font-size: 115% !important; }
.fs-120p { font-size: 120% !important; }
.fs-125p { font-size: 125% !important; }
.fs-130p { font-size: 130% !important; }
.fs-135p { font-size: 135% !important; }
.fs-140p { font-size: 140% !important; }
.fs-145p { font-size: 145% !important; }
.fs-150p { font-size: 150% !important; }

/* Text Styles
****************************************************************/
.text-bold { font-weight: var(--font-bold) !important; }
.text-normal { font-weight: var(--font-normal) !important; }
.text-italic { font-style: italic; }
.text-upper { text-transform: uppercase; }
.text-center { text-align: center !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: normal;
}

/* Borders
****************************************************************/
.b-0 { border: none; }
.bt-0 { border-top: none; }
.br-0 { border-right: none; }
.bb-0 { border-bottom: none; }
.bl-0 { border-left: none; }

/* Borders
****************************************************************/
.rd-0 { border-radius: 0; }
.rd-t-0 { border-top-left-radius: 0; border-top-right-radius: 0; }
.rd-r-0 { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.rd-b-0 { border-bottom-right-radius: 0; border-bottom-left-radius: 0; }
.rd-l-0 { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.rd-tl-0 { border-top-left-radius: 0; }
.rd-tr-0 { border-top-right-radius: 0; }
.rd-br-0 { border-bottom-right-radius: 0; }
.rd-bl-0 { border-bottom-left-radius: 0; }

/* Margin
****************************************************************/
.m-0 { margin: 0px; }
.mt-0 { margin-top: 0; }
.mr-0 { margin-right: 0; }
.mb-0 { margin-bottom: 0; }
.ml-0 { margin-left: 0; }

.mx-0 { 
    margin-left: 0; 
    margin-right: 0; 
}

.my-0 { 
    margin-top: 0; 
    margin-bottom: 0; 
}

.m-5 { margin: 5px; }
.mt-5 { margin-top: 5px; }
.mr-5 { margin-right: 5px; }
.mb-5 { margin-bottom: 5px; }
.ml-5 { margin-left: 5px; }

.mx-5 { 
    margin-left: 5px; 
    margin-right: 5px; 
}

.my-5 { 
    margin-top: 5px; 
    margin-bottom: 5px; 
}

.m-10 { margin: 10px; }
.mt-10 { margin-top: 10px; }
.mr-10 { margin-right: 10px; }
.mb-10 { margin-bottom: 10px; }
.ml-10 { margin-left: 10px; }

.mx-10 { 
    margin-left: 10px; 
    margin-right: 10px; 
}

.my-10 { 
    margin-top: 10px; 
    margin-bottom: 10px; 
}

.m-15 { margin: 15px; }
.mt-15 { margin-top: 15px; }
.mr-15 { margin-right: 15px; }
.mb-15 { margin-bottom: 15px; }
.ml-15 { margin-left: 15px; }

.mx-15 { 
    margin-left: 15px; 
    margin-right: 15px; 
}

.my-15 { 
    margin-top: 15px; 
    margin-bottom: 15px; 
}

.m-20 { margin: 20px; }
.mt-20 { margin-top: 20px; }
.mr-20 { margin-right: 20px; }
.mb-20 { margin-bottom: 20px; }
.ml-20 { margin-left: 20px; }

.m-30 { margin: 30px; }
.mt-30 { margin-top: 30px; }
.mr-30 { margin-right: 30px; }
.mb-30 { margin-bottom: 30px; }
.ml-30 { margin-left: 30px; }

/* Padding
****************************************************************/
.p-0 { padding: 0px; }
.pt-0 { padding-top: 0; }
.pr-0 { padding-right: 0; }
.pb-0 { padding-bottom: 0; }
.pl-0 { padding-left: 0; }

.px-0 { 
    padding-left: 0; 
    padding-right: 0; 
}

.py-0 { 
    padding-top: 0; 
    padding-bottom: 0; 
}

.p-5 { padding: 5px; }
.pt-5 { padding-top: 5px; }
.pr-5 { padding-right: 5px; }
.pb-5 { padding-bottom: 5px; }
.pl-5 { padding-left: 5px; }

.px-5 { 
    padding-left: 5px; 
    padding-right: 5px; 
}

.py-2 { 
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

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

.p-10 { padding: 10px; }
.pt-10 { padding-top: 10px; }
.pr-10 { padding-right: 10px; }
.pb-10 { padding-bottom: 10px; }
.pl-10 { padding-left: 10px; }

.px-10 { 
    padding-left: 10px; 
    padding-right: 10px; 
}

.py-10 { 
    padding-top: 10px; 
    padding-bottom: 10px; 
}

.p-15 { padding: 15px; }
.pt-15 { padding-top: 15px; }
.pr-15 { padding-right: 15px; }
.pb-15 { padding-bottom: 15px; }
.pl-15 { padding-left: 15px; }

.px-15 { 
    padding-left: 15px; 
    padding-right: 15px; 
}

.py-15 { 
    padding-top: 15px; 
    padding-bottom: 15px; 
}

/* Width
****************************************************************/
.w-5 { width: 5px; }
.w-10 { width: 10px; }
.w-15 { width: 15px; }
.w-20 { width: 20px; }
.w-30 { width: 30px; }
.w-40 { width: 40px; }
.w-50 { width: 50px; }
.w-60 { width: 60px; }
.w-70 { width: 70px; }
.w-80 { width: 80px; }
.w-90 { width: 90px; }
.w-100 { width: 100px; }
.w-110 { width: 110px; }
.w-120 { width: 120px; }
.w-130 { width: 130px; }
.w-140 { width: 140px; }
.w-150 { width: 150px; }
.w-160 { width: 160px; }
.w-170 { width: 170px; }
.w-180 { width: 180px; }
.w-190 { width: 190px; }
.w-200 { width: 200px; }
.w-210 { width: 210px; }
.w-220 { width: 220px; }
.w-230 { width: 230px; }
.w-240 { width: 240px; }
.w-250 { width: 250px; }
.w-260 { width: 260px; }
.w-270 { width: 270px; }
.w-280 { width: 280px; }
.w-290 { width: 290px; }
.w-300 { width: 300px; }
.w-310 { width: 310px; }
.w-320 { width: 320px; }
.w-330 { width: 330px; }
.w-340 { width: 340px; }
.w-350 { width: 350px; }
.w-360 { width: 360px; }
.w-380 { width: 380px; }
.w-390 { width: 390px; }
.w-400 { width: 400px; }
.w-420 { width: 420px; }
.w-450 { width: 450px; }
.w-500 { width: 500px; }
.w-550 { width: 550px; }
.w-600 { width: 600px; }
.w-650 { width: 650px; }
.w-700 { width: 700px; }
.w-800 { width: 800px; }

.w-10p { width: 10%; }
.w-15p { width: 15%; }
.w-20p { width: 20%; }
.w-25p { width: 25%; }
.w-30p { width: 30%; }
.w-35p { width: 35%; }
.w-40p { width: 40%; }
.w-45p { width: 45%; }
.w-50p { width: 50%; }
.w-55p { width: 55%; }
.w-60p { width: 60%; }
.w-65p { width: 65%; }
.w-70p { width: 70%; }
.w-75p { width: 75%; }
.w-80p { width: 80%; }
.w-85p { width: 85%; }
.w-90p { width: 90%; }
.w-95p { width: 95%; }
.w-100p { width: 100%; }

/* Height
****************************************************************/
.h-5 { height: 5px; }
.h-10 { height: 10px; }
.h-15 { height: 15px; }
.h-20 { height: 20px; }
.h-25 { height: 25px; }
.h-30 { height: 30px; }
.h-35 { height: 35px; }
.h-40 { height: 40px; }
.h-45 { height: 45px; }
.h-50 { height: 50px; }
.h-60 { height: 60px; }
.h-65 { height: 65px; }
.h-70 { height: 70px; }
.h-80 { height: 80px; }
.h-100 { height: 100px; }
.h-125 { height: 125px; }
.h-150 { height: 150px; }
.h-200 { height: 200px; }
.h-250 { height: 250px; }
.h-300 { height: 300px; }
.h-350 { height: 350px; }
.h-400 { height: 400px; }
.h-450 { height: 450px; }
.h-100p { height: 100%; }