/* 
    ALL STYLES ABOUT SIZING LAYOUT
*/

/* DISPLAY */
.display-none,
.d-none,
.web-hide {
    display: none !important;
}
.mobile-show {
    display: none !important;
}
.mobile-flex {
    display: none !important;
}
/* END DISPLAY */

/* FLOAT */
.right {
    float: right !important;
}
.left {
    float: left !important;
}
/* END FLOAT */

/* CONTAINER */
.custom-container {
    width: 90%;
    max-width: 1282px;
    height: fit-content;
    margin: 0 auto;
    z-index: 99;
    position: relative;
}

.no-container {
    width: 100%;
    margin: 0;
    float: left;
    z-index: 99;
    position: relative;
}

.half-container {
    width: 50%;
    margin: 0 25%;
    float: left;
}
/* END CONTAINER */

/* WIDTH */
.row-5,
.row-10,
.row-15,
.row-20,
.row-25,
.row-30,
.row-35,
.row-40,
.row-45,
.row-50,
.row-55,
.row-60,
.row-65,
.row-70,
.row-75,
.row-80,
.row-85,
.row-90,
.row-95,
.row-100 {
    float: left;
}

/* WIDTH PERCENT */
.row-1 {
    width: 1px;
}
.row-2 {
    width: 2%;
}
.row-3 {
    width: 3%;
}
.row-5 {
    width: 5%;
}
.row-10 {
    width: 10%;
}
.row-12 {
    width: 12%;
}
.row-13 {
    width: 13%;
}
.row-15,
.w-15 {
    width: 15%;
}
.row-20 {
    width: 20% !important;
}
.row-24 {
    width: 24%;
}
.row-25 {
    width: 25%;
}
.row-30 {
    width: 30%;
}
.row-33 {
    width: 33%;
}
.row-33-3 {
    width: 33.3%;
}
.row-35 {
    width: 35%;
}
.row-37 {
    width: 37%;
}
.row-40 {
    width: 40%;
}
.row-42 {
    width: 42%;
}
.row-43 {
    width: 43%;
}
.row-45 {
    width: 45%;
}
.row-48 {
    width: 48%;
}
.row-49 {
    width: 49%;
}
.row-50 {
    width: 50%;
}
.row-53 {
    width: 53%;
}
.row-55 {
    width: 55%;
}
.row-60 {
    width: 60%;
}
.row-61 {
    width: 61%;
}
.row-65 {
    width: 65%;
}
.row-66 {
    width: 66%;
}
.row-70 {
    width: 70%;
}
.row-75 {
    width: 75%;
}
.row-77 {
    width: 77%;
}
.row-80,
.w-80 {
    width: 80%;
}
.row-82 {
    width: 82%;
}
.row-85 {
    width: 85%;
}
.row-90 {
    width: 90%;
}
.row-95 {
    width: 95%;
}
.row-97 {
    width: 97%;
}
.row-100 {
    width: 100%;
}

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

/* WIDTH PIXEL */
.w-1 {
    width: 1px !important;
}
.w-8 {
    width: 8px !important;
}
.w-24 {
    width: 24px !important;
}
.w-40 {
    width: 40px !important;
}
.w-100 {
    width: 100px !important;
}
.w-150 {
    width: 150px !important;
}

/* END WIDTH */

/* HEIGHT */
.height-5 {
    height: 5px !important;
}
.height-20 {
    height: 20px !important;
}
.height-32,
.h-32 {
    height: 32px;
}
.height-39 {
    height: 39px !important;
}
.height-40 {
    height: 40px !important;
}
.height-42,
.h-42 {
    height: 42px !important;
}
.height-43 {
    height: 43px !important;
}
.height-45 {
    height: 45px !important;
}
.height-48,
.h-48 {
    height: 48px;
}
.height-50 {
    height: 50px !important;
}
.height-60 {
    height: 60px !important;
}
.height-70 {
    height: 70px !important;
}
.height-90 {
    height: 90px !important;
}
.h-90-vw {
    height: 90vw !important;
}
.h-100-vh {
    height: 100vh !important;
}
.h-100-vw {
    height: 100vw !important;
}
.height-500,
.h-500 {
    height: 500px;
}
.height-550 {
    height: 550px;
}
.height-full,
.h-full {
    height: 100% !important;
}
.height-max {
    height: max-content !important;
}

.h-50 {
    height: 50%;
}
.h-80 {
    height: 80%;
}
/* END HEIGHT */

/* FLEX */

/* FLEX GRID */
.flex-grid-thirds,
.flex-grid-four {
    display: flex;
}

.flex-grid-thirds .flex-grid-col {
    width: 32.5%;
}
.flex-grid-four .flex-grid-col {
    width: 24%;
}

.grid-1 {
    display: grid;
    grid-template-columns: 100%;
    /* justify-items: start; */
}

.grid-2 {
    display: grid;
    grid-template-columns: 49.5% 49.5%;
    /* justify-items: start; */
}

.grid-3 {
    display: grid;
    grid-template-columns: 32.5% 32.5% 32.5%;
    /* justify-items: start; */
}

.grid-4 {
    display: grid;
    grid-template-columns: 24.5% 24.5% 24.5% 24.5%;
    /* justify-items: start; */
}

.grid-5 {
    display: grid;
    grid-template-columns: 19.5% 19.5% 19.5% 19.5% 19.5%;
    /* justify-items: start; */
}

.grid-col-2 {
    grid-column: 1 / 3;
}
.grid-col-3 {
    grid-column: 1 / 4;
}
.grid-col-4 {
    grid-column: 1 / 5;
}
.grid-col-5 {
    grid-column: 1 / 6;
}

/* FLEX DIRECTION */
.flex-row {
    display: flex;
    flex-direction: row;
}
.flex-column {
    display: flex;
    flex-direction: column;
}

/* FLEX GROW */
.flex-grow0 {
    flex-grow: 0;
}
.flex-grow1 {
    flex-grow: 1;
    flex-basis: 0;
}
.flex-grow2 {
    flex-grow: 2;
}
.flex-basis {
    flex-basis: inherit !important;
}

/* FLEX GAP */
.flex-gapauto {
    justify-content: space-between;
}

.flex-gap2 {
    gap: 2px;
}
.flex-gap4 {
    gap: 4px;
}
.flex-gap5 {
    gap: 5px;
}
.flex-gap7 {
    gap: 7px;
}
.flex-gap8 {
    gap: 8px;
}
.flex-gap10 {
    gap: 10px;
}
.flex-gap12 {
    gap: 12px;
}
.flex-gap15 {
    gap: 15px;
}
.flex-gap16 {
    gap: 16px;
}
.flex-gap18 {
    gap: 18px;
}
.flex-gap20 {
    gap: 20px;
}
.flex-gap24 {
    gap: 24px;
}
.flex-gap25 {
    gap: 25px;
}
.flex-gap30 {
    gap: 30px;
}
.flex-gap32 {
    gap: 32px;
}
.flex-gap35 {
    gap: 35px;
}
.flex-gap40 {
    gap: 40px;
}
.flex-gap50 {
    gap: 50px;
}
.flex-gap80 {
    gap: 80px;
}
.flex-gap100 {
    gap: 100px;
}
.flex-gap140 {
    gap: 140px;
}

.flex-gap10-20 {
    gap: 10px 20px;
}

.flex-gaprow-8 {
    row-gap: 8px;
}

.flex-gaprow-10 {
    row-gap: 10px;
}
.flex-gaprow-15 {
    row-gap: 15px;
}
.flex-gaprow-20 {
    row-gap: 20px;
}

/* FLEX SHRINK */
.flex-no-shrink,
.flex-fit-width {
    flex-shrink: 0;
}

/* FLEX ALIGN */
.flex-align-center {
    align-items: center;
}
.flex-align-right,
.flex-align-end {
    align-items: end;
}
.flex-align-self {
    align-self: baseline;
}

/* FLEX CONTENT */
.flex-content-center {
    justify-content: center;
}
.flex-content-arround {
    justify-content: space-around;
}
.flex-content-right,
.flex-content-end {
    justify-content: end;
}

/* FLEX WRAP */
.flex-wrap {
    display: flex;
    flex-wrap: wrap;
}
.flex-wrap-48 {
    flex: 0 0 48%;
}

/* FLEX SIZE */
.flex-1 {
    display: flex;
    flex: 1;
}
.flex-2 {
    display: flex;
    flex: 2;
}
.flex-50 {
    flex: 50% !important;
}
/* END FLEX */

/* MARGIN */

/* SPACE MARGIN */
.space-1,
.space2,
.space-3,
.space-4,
.space-5,
.space-6,
.space-7,
.space-8,
.space8,
.space16,
.space24,
.clear2,
.clear4,
.clear5,
.clear7,
.clear8,
.clear10,
.clear12,
.clear13,
.clear14,
.clear15,
.clear16,
.clear17,
.clear20,
.clear22,
.clear24,
.clear25,
.clear30,
.clear32,
.clear35,
.clear40,
.clear45,
.clear50,
.clear56,
.clear60,
.clear65,
.clear70,
.clear75,
.clear80,
.clear85,
.clear90,
.clear95,
.clear100,
.clear105,
.clear120,
.clear125,
.clear130,
.clear140,
.clear145,
.clear150,
.clear155,
.clear159,
.clear160,
.clear165,
.clear175,
.clear200,
.clear235,
.clear240,
.clear340 {
    width: 100%;
    height: 8px;
    float: left;
}

.space-2,
.clear16,
.space16 {
    height: 16px;
}
.space-3,
.clear24,
.space24 {
    height: 24px;
}
.space-4,
.clear32 {
    height: 32px;
}
.space-5,
.clear40 {
    height: 40px;
}
.space-6,
.clear80 {
    height: 80px;
}
.space-7,
.clear120 {
    height: 120px;
}
.space-8,
.clear160 {
    height: 160px;
}

.clear2 {
    height: 2px;
}
.clear4 {
    height: 4px;
}
.clear5 {
    height: 5px;
}
.clear7 {
    height: 7px;
}
.clear10 {
    height: 10px;
}
.clear12 {
    height: 12px;
}
.clear13 {
    height: 13px;
}
.clear14 {
    height: 14px;
}
.clear15 {
    height: 15px;
}
.clear17 {
    height: 17px;
}
.clear20 {
    height: 20px;
}
.clear22 {
    height: 22px;
}
.clear25 {
    height: 25px;
}
.clear30 {
    height: 30px;
}
.clear35 {
    height: 35px;
}
.clear45 {
    height: 45px;
}
.clear50 {
    height: 50px;
}
.clear56 {
    height: 56px;
}
.clear60 {
    height: 60px;
}
.clear64 {
    height: 64px;
}
.clear65 {
    height: 65px;
}
.clear70 {
    height: 70px;
}
.clear75 {
    height: 75px;
}
.clear85 {
    height: 85px;
}
.clear90 {
    height: 90px;
}
.clear95 {
    height: 95px;
}
.clear100 {
    height: 100px;
}
.clear105 {
    height: 105px;
}
.clear125 {
    height: 125px;
}
.clear130 {
    height: 130px;
}
.clear140 {
    height: 140px;
}
.clear145 {
    height: 145px;
}
.clear150 {
    height: 150px;
}
.clear155 {
    height: 155px;
}
.clear159 {
    height: 159px;
}
.clear165 {
    height: 165px;
}
.clear175 {
    height: 175px;
}
.clear200 {
    height: 200px;
}
.clear235 {
    height: 235px;
}
.clear240 {
    height: 240px;
}
.clear340 {
    height: 340px;
}
/* END SPACE MARGIN */

/* MARGIN ALL */
.m-0 {
    margin: 0px;
}
.m-8 {
    margin: 8px;
}
.m-10 {
    margin: 10px;
}
.m-12 {
    margin: 12px;
}
.m-16 {
    margin: 16px;
}
.m-24 {
    margin: 24px;
}
/* END MARGIN ALL */

/* MARGIN BOTTOM */
.mb-0 {
    margin-bottom: 0px !important;
}
.mb-4 {
    margin-bottom: 4px !important;
}
.mb-8 {
    margin-bottom: 8px !important;
}
.mb-10 {
    margin-bottom: 10px !important;
}
.mb-12 {
    margin-bottom: 12px !important;
}
.mb-15 {
    margin-bottom: 15px !important;
}
.mb-16 {
    margin-bottom: 16px !important;
}
.mb-20 {
    margin-bottom: 20px !important;
}
.mb-24 {
    margin-bottom: 24px !important;
}
.mb-32 {
    margin-bottom: 32px !important;
}
.mb-40 {
    margin-bottom: 40px !important;
}
.mb-48 {
    margin-bottom: 48px !important;
}
.mb-50 {
    margin-bottom: 50px !important;
}
/* END MARGIN BOTTOM */

/* MARGIN TOP */
.mt-0 {
    margin-top: 0px !important;
}
.mt-4 {
    margin-top: 4px !important;
}
.mt-5-percent {
    margin-top: 5% !important;
}
.mt-8 {
    margin-top: 8px !important;
}
.mt-10 {
    margin-top: 10px !important;
}
.mt-12 {
    margin-top: 12px !important;
}
.mt-15 {
    margin-top: 15px !important;
}
.mt-16 {
    margin-top: 16px !important;
}
.mt-24 {
    margin-top: 24px !important;
}
.mt-32 {
    margin-top: 32px !important;
}
.mt-40 {
    margin-top: 40px !important;
}
.mt-48 {
    margin-top: 48px !important;
}
.mt-50 {
    margin-top: 50px !important;
}

/* MINUS */
.mt-min-10 {
    margin-top: -10px;
}
.mt-min-30 {
    margin-top: -30px;
}
.mt-min-35 {
    margin-top: -35px;
}
.mt-min-45 {
    margin-top: -45px;
}
/* END MARGIN TOP */

/* MARGIN TOP & BOTTOM */
.my-1 {
    margin-top: 1px !important;
    margin-bottom: 1px !important;
}
.my-2 {
    margin-top: 2px !important;
    margin-bottom: 2px !important;
}
.my-4 {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
}
.my-8 {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
}
.my-10 {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}
.my-12 {
    margin-top: 12px !important;
    margin-bottom: 12px !important;
}
.my-15 {
    margin-top: 15px !important;
    margin-bottom: 15px !important;
}
.my-16 {
    margin-top: 16px !important;
    margin-bottom: 16px !important;
}
.my-24 {
    margin-top: 24px !important;
    margin-bottom: 24px !important;
}
.my-32 {
    margin-top: 32px !important;
    margin-bottom: 32px !important;
}
.my-40 {
    margin-top: 40px !important;
    margin-bottom: 40px !important;
}
.my-48 {
    margin-top: 48px !important;
    margin-bottom: 48px !important;
}
.my-50 {
    margin-top: 50px !important;
    margin-bottom: 50px !important;
}
/* END MARGIN TOP & BOTTOM */

/* MARGIN LEFT */
.ml-3 {
    margin-left: 3px;
}
.ml-4 {
    margin-left: 4px;
}
.ml-5 {
    margin-left: 5px;
}
.ml-7 {
    margin-left: 7px;
}
.ml-8 {
    margin-left: 8px;
}
.ml-10 {
    margin-left: 10px;
}
.ml-12 {
    margin-left: 12px;
}
.ml-15 {
    margin-left: 15px;
}
.ml-16 {
    margin-left: 16px;
}
.ml-24 {
    margin-left: 24px;
}
.ml-32 {
    margin-left: 32px;
}
.ml-45 {
    margin-left: 45px;
}
.ml-48 {
    margin-left: 48px;
}
.ml-50 {
    margin-left: 50px;
}

/* PERCENT */
.ml-3-percent {
    margin-left: 3% !important;
}

/* END MARGIN LEFT */

/* MARGIN RIGHT */
.mr-4 {
    margin-right: 4px;
}
.mr-5 {
    margin-right: 5px;
}
.mr-8 {
    margin-right: 8px;
}
.mr-10 {
    margin-right: 10px;
}
.mr-12 {
    margin-right: 12px;
}
.mr-14 {
    margin-right: 14px;
}
.mr-15 {
    margin-right: 15px;
}
.mr-16 {
    margin-right: 16px;
}
.mr-24 {
    margin-right: 24px;
}
.mr-32 {
    margin-right: 32px;
}
.mr-48 {
    margin-right: 48px;
}
.mr-50 {
    margin-right: 50px;
}
/* END MARGIN RIGHT */

/* MARGIN LEFT & RIGHT */
.mx-4 {
    margin-left: 4px !important;
    margin-right: 4px !important;
}
.mx-8 {
    margin-left: 8px !important;
    margin-right: 8px !important;
}
.mx-10,
.m-x-10 {
    margin-left: 10px !important;
    margin-right: 10px !important;
}
.mx-12 {
    margin-left: 12px !important;
    margin-right: 12px !important;
}
.mx-16 {
    margin-left: 16px !important;
    margin-right: 16px !important;
}
.mx-24 {
    margin-left: 24px !important;
    margin-right: 24px !important;
}
.mx-32 {
    margin-left: 32px !important;
    margin-right: 32px !important;
}
.mx-48 {
    margin-left: 48px !important;
    margin-right: 48px !important;
}
.mx-50 {
    margin-left: 50px !important;
    margin-right: 50px !important;
}
/* END MARGIN LEFT & RIGHT */

/* END MARGIN */

/* PADDING */

/* PADDING ALL */
.p-2 {
    padding: 2px !important;
}
.p-4 {
    padding: 4px !important;
}
.p-5 {
    padding: 5px !important;
}
.p-6 {
    padding: 6px !important;
}
.p-7 {
    padding: 7px !important;
}
.p-8 {
    padding: 8px !important;
}
.p-10 {
    padding: 10px !important;
}
.p-12 {
    padding: 12px !important;
}
.p-14 {
    padding: 14px !important;
}
.p-16 {
    padding: 16px !important;
}
.p-20 {
    padding: 20px;
}
.p-22 {
    padding: 22px;
}
.p-24 {
    padding: 24px;
}
.p-30 {
    padding: 30px;
}
.p-32 {
    padding: 32px;
}
.p-35 {
    padding: 35px;
}
.p-40 {
    padding: 40px;
}
.p-48 {
    padding: 48px;
}
.p-50 {
    padding: 50px;
}
/* END PADDING ALL */

/* PADDING BOTTOM */
.pb-0 {
    padding-bottom: 0px !important;
}
.pb-2 {
    padding-bottom: 2px !important;
}
.pb-4 {
    padding-bottom: 4px !important;
}
.pb-8 {
    padding-bottom: 8px !important;
}
.pb-10 {
    padding-bottom: 10px !important;
}
.pb-12 {
    padding-bottom: 12px !important;
}
.pb-16 {
    padding-bottom: 16px !important;
}
.pb-24 {
    padding-bottom: 24px !important;
}
.pb-32 {
    padding-bottom: 32px !important;
}
.pb-48 {
    padding-bottom: 48px !important;
}
.pb-50 {
    padding-bottom: 50px !important;
}
/* END PADDING BOTTOM */

/* PADDING TOP */
.pt-1 {
    padding-top: 1px !important;
}
.pt-4 {
    padding-top: 4px !important;
}
.pt-5 {
    padding-top: 5px !important;
}
.pt-8 {
    padding-top: 8px;
}
.pt-10 {
    padding-top: 10px;
}
.pt-12 {
    padding-top: 12px;
}
.pt-16 {
    padding-top: 16px;
}
.pt-24 {
    padding-top: 24px;
}
.pt-30 {
    padding-top: 30px;
}
.pt-32 {
    padding-top: 32px;
}
.pt-48 {
    padding-top: 48px;
}
.pt-50 {
    padding-top: 50px;
}
.pt-100 {
    padding-top: 100px;
}
/* END PADDING TOP */

/* PADDING TOP & BOTTOM */
.py-4 {
    padding-top: 4px !important;
    padding-bottom: 4px;
}
.py-8 {
    padding-top: 8px;
    padding-bottom: 8px;
}
.py-10 {
    padding-top: 10px;
    padding-bottom: 10px;
}
.py-12 {
    padding-top: 12px;
    padding-bottom: 12px;
}
.py-15 {
    padding-top: 15px;
    padding-bottom: 15px;
}
.py-16 {
    padding-top: 16px;
    padding-bottom: 16px;
}
.py-18 {
    padding-top: 18px;
    padding-bottom: 18px;
}
.py-20 {
    padding-top: 20px;
    padding-bottom: 20px;
}
.py-24 {
    padding-top: 24px;
    padding-bottom: 24px;
}
.py-30 {
    padding-top: 30px;
    padding-bottom: 30px;
}
.py-32 {
    padding-top: 32px;
    padding-bottom: 32px;
}
.py-48 {
    padding-top: 48px;
    padding-bottom: 48px;
}
.py-50 {
    padding-top: 50px;
    padding-bottom: 50px;
}
/* END PADDING TOP & BOTTOM */

/* PADDING RIGHT */
.pr-4 {
    padding-right: 4px !important;
}
.pr-7 {
    padding-right: 7px !important;
}
.pr-8 {
    padding-right: 8px !important;
}
.pr-10 {
    padding-right: 10px !important;
}
.pr-12 {
    padding-right: 12px !important;
}
.pr-16 {
    padding-right: 16px !important;
}
.pr-24 {
    padding-right: 24px !important;
}
.pr-25 {
    padding-right: 25px;
}
.pr-28 {
    padding-right: 28px;
}
.pr-30 {
    padding-right: 30px !important;
}
.pr-32 {
    padding-right: 32px !important;
}
.pr-40 {
    padding-right: 40px;
}
.pr-48 {
    padding-right: 48px !important;
}
.pr-50 {
    padding-right: 50px !important;
}
.pr-60 {
    padding-right: 60px;
}
.pr-80 {
    padding-right: 80px;
}
.pr-260 {
    padding-right: 30%;
}
/* END PADDING RIGHT */

/* PADDING LEFT */
.pl-0 {
    padding-left: 0px !important;
}
.pl-4 {
    padding-left: 4px !important;
}
.pl-7 {
    padding-left: 7px !important;
}
.pl-8 {
    padding-left: 8px !important;
}
.pl-10 {
    padding-left: 10px !important;
}
.pl-12 {
    padding-left: 12px !important;
}
.pl-16 {
    padding-left: 16px !important;
}
.pl-20 {
    padding-left: 20px !important;
}
.pl-23 {
    padding-left: 23px;
}
.pl-24 {
    padding-left: 24px !important;
}
.pl-25 {
    padding-left: 25px;
}
.pl-30 {
    padding-left: 30px !important;
}
.pl-32 {
    padding-left: 32px !important;
}
.pl-48 {
    padding-left: 48px !important;
}
.pl-50 {
    padding-left: 50px !important;
}
/* END PADDING LEFT */

/* PADDING LEFT & RIGHT */
.px-4 {
    padding-left: 4px !important;
    padding-right: 4px;
}
.px-6 {
    padding-left: 6px !important;
    padding-right: 6px;
}
.px-8 {
    padding-left: 8px;
    padding-right: 8px;
}
.px-10 {
    padding-left: 10px;
    padding-right: 10px;
}
.px-12 {
    padding-left: 12px;
    padding-right: 12px;
}
.px-15 {
    padding-left: 15px;
    padding-right: 15px;
}
.px-16 {
    padding-left: 16px;
    padding-right: 16px;
}
.px-20 {
    padding-left: 20px;
    padding-right: 20px;
}
.px-24 {
    padding-left: 24px;
    padding-right: 24px;
}
.px-30 {
    padding-left: 30px;
    padding-right: 30px;
}
.px-32 {
    padding-left: 32px;
    padding-right: 32px;
}
.px-48 {
    padding-left: 48px;
    padding-right: 48px;
}
.px-50 {
    padding-left: 50px;
    padding-right: 50px;
}
.px-55 {
    padding-left: 55px;
    padding-right: 55px;
}
.px-60 {
    padding-left: 60px;
    padding-right: 60px;
}
.px-80 {
    padding-left: 80px;
    padding-right: 80px;
}
/* END PADDING LEFT & RIGHT */

/* CUSTOM PADDING */
.py-2-px-4 {
    padding: 2px 4px !important;
}

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

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

.py-4-px-12 {
    padding: 4px 12px !important;
}
.py-4-px-16 {
    padding: 4px 16px !important;
}
.py-4-4-px-16 {
    padding: 4.4px 16px !important;
}

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

.py-6-px-16 {
    padding: 6px 16px !important;
}

.py-7-px-16 {
    padding: 7px 16px !important;
}

.py-8-px-16 {
    padding: 8px 16px !important;
}
.py-8-px-12 {
    padding: 8px 12px !important;
}
.py-8-px-24 {
    padding: 8px 24px;
}

.py-10-px-2 {
    padding: 10px 2px;
}
.py-10-px-16 {
    padding: 10px 16px;
}
.py-10-px-32 {
    padding: 10px 32px;
}

.py-12-px-8 {
    padding: 12px 8px;
}
.py-12-px-14 {
    padding: 12px 14px;
}
.py-12-px-16 {
    padding: 12px 16px;
}
.py-12-px-18 {
    padding: 12px 18px;
}
.py-12-px-24 {
    padding: 12px 24px !important;
}
.py-12-px-32 {
    padding: 12px 32px;
}
.py-12-px-46 {
    padding: 12px 46px;
}
.py-12-px-48 {
    padding: 12px 48px;
}

.py-14-px-12 {
    padding: 14px 12px;
}

.py-15-px-20 {
    padding: 15px 20px;
}

.py-16-px-8 {
    padding: 16px 8px;
}
.py-16-px-12 {
    padding: 16px 12px;
}
.py-16-px-24 {
    padding: 16px 24px;
}
.py-16-px-25 {
    padding: 16px 25px;
}
.py-16-px-32 {
    padding: 16px 32px;
}

.py-24-px-10 {
    padding: 24px 10px;
}
.py-24-px-12 {
    padding: 24px 12px;
}
.py-24-px-16 {
    padding: 24px 16px;
}
.py-24-px-32 {
    padding: 24px 32px;
}

.py-25-px-12 {
    padding: 25px 12px;
}

.py-30-px-20 {
    padding: 30px 20px;
}

.py-32-px-45 {
    padding: 32px 45px;
}

.py-40-px-20 {
    padding: 40px 20px;
}
.py-40-px-30 {
    padding: 40px 30px;
}

.py-80-px-230 {
    padding: 80px 230px;
}
/* END PADDING */

/* POSITION */
.absolute-center {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.absolute-bottom {
    bottom: 0;
    top: 39%;
    left: 0;
    right: 0;
}

.top-0 {
    top: 0px;
}
.right-0 {
    right: 0px;
}
.bottom-0 {
    bottom: 0px;
}
.left-0 {
    left: 0px;
}

.bottom-4 {
    bottom: 4%;
}
.bottom-5 {
    bottom: 5%;
}
.bottom-6 {
    bottom: 6px;
}

.left-3 {
    left: 3%;
}
.left-10 {
    left: 10%;
}
.left-30 {
    left: 30% !important;
}
/* END POSITION */

/* BORDER RADIUS ROUNDED */
.radius-2 {
    border-radius: 2px !important;
}
.radius-3 {
    border-radius: 3px !important;
}
.radius-4 {
    border-radius: 4px !important;
}
.radius-6 {
    border-radius: 6px !important;
}
.radius-8 {
    border-radius: 8px;
}
.radius-10 {
    border-radius: 10px;
}
.radius-12 {
    border-radius: 12px;
}
.radius-15 {
    border-radius: 15px;
}
.radius-16 {
    border-radius: 16px;
}
.radius-20 {
    border-radius: 20px;
}
.radius-24 {
    border-radius: 24px;
}
.radius-32 {
    border-radius: 32px;
}
.radius-40 {
    border-radius: 40px;
}
.radius-50 {
    border-radius: 50px;
}

/* RADIUS PERCENT */
.radius-50-persen {
    border-radius: 50%;
}

/* BORDER RADIUS BOTTOM  */
.radius-bottom-8 {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

/* BORDER RADIUS TOP */
.radius-top-8 {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

/* BORDER RADIUS LEFT */
.radius-left-6 {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

.radius-left-8 {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

/* BORDER RADIUS RIGHT */
.radius-right-6 {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

.radius-right-8 {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}
/* END BORDER RADIUS ROUNDED */

/* BORDER */
.border-none {
    border: none !important;
}
.clearBorder {
    border-bottom-width: 1px;
    border-bottom-style: solid;
}

.border-1 {
    border: 1px solid;
}

.border-2 {
    border: 2px solid;
}

/* BORDER BOTTOM */

.borderbottom {
    border-bottom: 1.75px solid #546183 !important;
}
.border-bottom {
    border-bottom: 1px solid !important;
}

/* BORDER-RIGHT */
.border-right {
    border-right: 1px solid !important;
}
.border-right2 {
    border-right: 2px solid !important;
}

/* SEPARATOR */
.separator-vertical-1 {
    width: 1px;
    height: 100%;
    float: left;
}

/* CUSTOM SIZE */
.start-75 {
    left: 75% !important;
}
/* END CUSTOM SIZE */

/* POINTER */
.pointer {
    cursor: pointer;
}
.no-pointer {
    cursor: default !important;
}
.pointer-text {
    cursor: text !important;
}
.none-pointer {
    pointer-events: none !important;
}
/* END POINTER */

/* IMAGE */

/* OBJECT FIT */
.obj-cover {
    object-fit: cover;
}
.obj-contain {
    object-fit: contain;
}

/* WIDTH PERCENT */
.img-w-100 {
    width: 100%;
}
.img-w-95 {
    width: 95%;
}
.img-w-90 {
    width: 90%;
}
.img-w-85 {
    width: 85%;
}
.img-w-50 {
    width: 50%;
}
.img-w-35 {
    width: 35%;
}

/* HEIGHT */
.img-13-h {
    height: 13px;
}
.img-14-h {
    height: 14px;
}
.img-16-h {
    height: 16px;
}
.img-17-h {
    height: 17px !important;
}
.img-18-h {
    height: 18px !important;
}
.img-19-h {
    height: 19px;
}
.img-22-h {
    height: 22px !important;
}
.img-29-h {
    height: 29px;
}
.img-30-h {
    height: 30px;
}
.img-32-h {
    height: 32px;
}
.img-35-h {
    height: 35px;
}
.img-40-h {
    height: 40px;
    object-fit: cover;
}
.img-43-h {
    height: 43px !important;
    object-fit: cover;
}
.img-45-h {
    height: 45px;
    object-fit: cover;
}
.img-50-h {
    height: 50px !important;
}
.img-54-h {
    height: 54px !important;
}
.img-60-h {
    height: 60px;
}
.img-70-h {
    height: 70px;
}
.img-75-h {
    height: 75px;
}
.img-80-h {
    height: 80px;
}

.img-100-h {
    height: 100px;
}
.img-120-h {
    height: 120px !important;
    object-fit: cover;
}
.img-130-h {
    height: 130px !important;
    object-fit: cover;
}
.img-140-h {
    height: 140px !important;
    object-fit: cover;
}
.img-150-h {
    height: 150px !important;
    object-fit: cover;
}
.img-200-h {
    height: 200px !important;
    object-fit: cover;
}

/* WIDTH PIXEL */
.img-16 {
    width: 16px;
}
.img-18 {
    width: 18px;
}
.img-20 {
    width: 20px;
}
.img-21 {
    width: 21px;
}
.img-22 {
    width: 22px;
}
.img-24 {
    width: 24px;
}
.img-25 {
    width: 25px;
}
.img-27 {
    width: 27px;
}
.img-28 {
    width: 28px;
}
.img-30 {
    width: 30px;
}
.img-32 {
    width: 32px;
}
.img-77 {
    width: 77px;
}
.img-80 {
    width: 80px;
}
.img-90 {
    width: 90px;
}
.img-120 {
    width: 120px;
}
.img-150 {
    width: 150px;
}
.img-180 {
    width: 180px;
}
.img-200 {
    width: 200px;
}
.img-full {
    width: 100%;
}

/* SQUARE */
.img-square-32 {
    width: 32px;
    height: 32px;
}
.img-square-80 {
    width: 80px;
    height: 80px;
    object-fit: cover;
}

/* END IMAGE */

/* CIRCLE */
.circle {
    border-radius: 100%;
}
.circle-28 {
    width: 28px;
    height: 28px;
    border-radius: 28px;
}
.circle-32 {
    width: 32px;
    height: 32px;
    border-radius: 32px;
}
/* END CIRCLE */

/* Z-INDEX */
.z-auto {
    z-index: auto !important;
}
.z-9 {
    z-index: 9 !important;
}
.z-99 {
    z-index: 99 !important;
}
.z-999 {
    z-index: 999 !important;
}
.z-9999 {
    z-index: 9999 !important;
}
/* END Z-INDEX */

/* OVERFLOW */
.overflow-y-none {
    overflow-y: unset !important;
}
.overflow-y-hidden {
    overflow-y: hidden !important;
}
.overflow-y-scroll {
    overflow-y: scroll !important;
}
.overflow-x::-webkit-scrollbar {
    display: none;
}

.overflow-x {
    overflow-x: scroll;
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

.overflow-hidden {
    overflow: hidden;
}

/* END OVERFLOW */

/* BUTTON */
.btn {
    border-radius: 4px;
    border: none;
    cursor: pointer;
}

.btn-min-width {
    min-width: 150px;
}
.btn-square {
    border-radius: 8px;
    border: none;
    cursor: pointer;
}
.btn-outline {
    border: 1px solid;
}
.btn-extra-small {
    padding: 4px 12px;
}

.btn-small {
    padding: 8px 16px;
}
.btn-medium {
    padding: 12px 32px;
}
.btn-regular {
    padding: 16px 32px;
}
.btn-large {
    padding: 18px 32px;
}

.btn-rounded {
    border-radius: 32px;
}
.btn-square-small {
    padding: 8px;
}
/* END BUTTON */

/* MODAL */
.modal-bg {
    display: none;
    top: 0;
    left: 0;
    position: fixed;
    background: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    z-index: 999;
}

.modal-container {
    display: none;
    position: fixed;
    padding: 8px;
    /* top: 35%;
    left: 40%; */
    width: 400px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.25);
    z-index: 999;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.modal-container.medium {
    width: 500px;
}

.modal-container .modal-content {
    padding: 24px;
    border-radius: 8px;
}

.modal-container .btn-close-modal {
    position: absolute;
    top: 12px;
    right: 12px;
    cursor: pointer;
}

.modal-container .img-modal-success {
    height: 100px;
}

@media (min-width: 1700px) {
    .lg-clear20 {
        height: 20px;
        width: 100%;
    }
}

@media (min-width: 1600px) {
    .lg-flex-gap15 {
        gap: 15px;
    }
}

@media (min-width: 1445px) {
    .l-clear210 {
        width: 100%;
        height: 210px;
        float: left;
    }
}

/* SMARTPHONE */
@media (max-width: 576.5px) {
    /* DISPLAY */
    .m-d-none,
    .mobile-hide {
        display: none !important;
    }
    .m-d-flex,
    .mobile-flex {
        display: flex !important;
    }
    .mobile-show,
    .mobile-block {
        display: block !important;
    }
    /* END DISPLAY */

    /* COUSTOM CONTAINER */
    .custom-container,
    .half-container,
    .m-container {
        width: 90%;
        margin: 0 5%;
        float: left;
    }
    .no-container {
        width: 100%;
        margin: 0px;
    }
    /* END CUSTOM CONTAINER */

    /* WIDTH */
    .m-row-full {
        width: 110% !important;
        margin-left: -5%;
    }
    .m-row-105 {
        width: 105% !important;
    }
    .m-row-100 {
        width: 100% !important;
    }
    .m-row-90 {
        width: 90% !important;
    }
    .m-row-80 {
        width: 80% !important;
    }
    .m-row-70 {
        width: 70% !important;
    }
    .m-row-65 {
        width: 65% !important;
    }
    .m-row-55 {
        width: 55% !important;
    }
    .m-row-50 {
        width: 50% !important;
    }
    .m-row-40 {
        width: 40% !important;
    }
    .m-row-35 {
        width: 35% !important;
    }
    .m-row-30 {
        width: 30% !important;
    }
    .m-row-16 {
        width: 16% !important;
    }

    .m-fit-content {
        width: fit-content;
    }
    /* END WIDTH */

    /* HEIGHT */
    .m-height-25 {
        height: 25px !important;
    }
    .m-height-30 {
        height: 30px !important;
    }
    .m-height-100 {
        height: 100% !important;
    }
    /* END HEIGHT */

    /* MARGIN */

    /* MARGIN LEFT */
    .m-ml-0 {
        margin-left: 0px !important;
    }

    /* MARGIN TOP */
    .m-mt-20-percent {
        margin-top: 20% !important;
    }
    .m-mt-24 {
        margin-top: 24px !important;
    }

    /* MARGIN TOP MINUS */
    .m-mt-min-3 {
        margin-top: -3px !important;
    }
    .m-mt-min-5 {
        margin-top: -5px !important;
    }

    /* MARGIN BOTTOM */
    .m-mb-0 {
        margin-bottom: 0px !important;
    }
    .m-mb-24 {
        margin-bottom: 24px !important;
    }

    /* MARGIN TOP & BOTTOM */
    .m-my-15 {
        margin-top: 15px;
        margin-bottom: 15px;
    }
    .m-my-24 {
        margin-top: 24px !important;
        margin-bottom: 24px !important;
    }

    /* END MARGIN */

    /* PADDING */

    /* PADDING RIGHT */
    .m-pr-0 {
        padding-right: 0px !important;
    }
    .m-pr-20 {
        padding-right: 20px !important;
    }

    /* PADDING TOP */
    .m-pt-3 {
        padding-top: 3px;
    }
    .m-pt-5 {
        padding-top: 5px;
    }
    .m-pt-8 {
        padding-top: 8px;
    }
    .m-pt-10 {
        padding-top: 10px;
    }
    .m-pt-15 {
        padding-top: 15px;
    }
    .m-pt-20 {
        padding-top: 20px;
    }
    .m-pt-50 {
        padding-top: 50px;
    }

    /* PADDING BOTTOM */
    .m-pb-23 {
        padding-bottom: 23px;
    }

    /* PADDING TOP & BOTTOM */
    .m-py-10 {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    /* PADDING LEFT */
    .m-pl-0 {
        padding-left: 0px !important;
    }
    .m-pl-5 {
        padding-left: 5px !important;
    }
    .m-pl-10 {
        padding-left: 10px !important;
    }
    .m-pl-20 {
        padding-left: 20px !important;
    }

    /* PADDING LEFT & RIGHT */
    .m-px-0 {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
    .m-px-18,
    .m-pl-pr-18 {
        padding-left: 18px;
        padding-right: 18px;
    }
    .m-px-20 {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* PADDING ARROUND */
    .m-py-12-px-44 {
        padding: 12px 44px;
    }
    .m-py-12-px-16 {
        padding: 12px 16px;
    }
    .m-py-24-px-16 {
        padding: 24px 16px;
    }

    .m-p-0,
    .m-no-padding,
    .m-no-p {
        padding: 0px;
    }
    .m-p-8 {
        padding: 8px !important;
    }
    .m-p-10 {
        padding: 10px !important;
    }
    .m-p-16,
    .m-padding16 {
        padding: 16px;
    }
    .m-p-22 {
        padding: 22px;
    }
    .m-p-24 {
        padding: 24px;
    }

    /* END PADDING */

    /* IMAGE SIZE */
    .m-img-16 {
        width: 16px;
        height: 16px;
    }
    .m-img-80-h {
        height: 80px;
    }
    .m-img-110-h {
        height: 110px !important;
    }
    .m-img-112-h {
        height: 112px !important;
    }
    /* END IMAGE SIZE */

    /* POSITION */
    .m-top30 {
        top: 30% !important;
    }
    .m-top61 {
        top: 61% !important;
    }
    .m-top77 {
        top: 77% !important;
    }
    .m-top80 {
        top: 80% !important;
    }

    .m-position-fixed {
        position: fixed !important;
    }
    /* END POSITION */

    /* FLOAT */
    .m-float-left {
        float: left !important;
    }
    .m-float-right {
        float: right !important;
    }
    /* END FLOAT */

    /* OVERFLOW */
    .m-overflow-x {
        overflow-x: scroll;
        -ms-overflow-style: none;
        /* IE and Edge */
        scrollbar-width: none;
        /* Firefox */
    }

    .m-no-overflow {
        overflow: unset;
    }
    .m-overflow-x::-webkit-scrollbar {
        display: none;
    }
    /* END OVERFLOW */

    /* BORDER */
    .m-no-border {
        border: 0px;
    }
    /* END BORDER */

    /* FLEX */

    /* FLEX ALIGN */
    .m-no-justify {
        justify-content: normal !important;
    }
    .m-justify-content-start {
        justify-content: start !important;
    }
    .m-justify-content-center {
        justify-content: center !important;
    }
    .m-justify-content-between {
        justify-content: space-between !important;
    }

    /* FLEX SHRINK */
    .m-flex-no-shrink,
    .m-flex-fit-width {
        flex-shrink: 0;
    }

    /* FLEX DIRECTION */
    .m-flex-row {
        display: flex;
        flex-direction: row !important;
    }
    .m-flex-column-reverse {
        flex-direction: column-reverse !important;
    }
    .m-flex-column {
        flex-direction: column !important;
    }

    /* FLEX WRAP */
    .m-flex-wrap {
        flex-wrap: wrap !important;
    }

    /* FLEX ALIGN */
    .m-align-items-center {
        align-items: center !important;
    }
    .m-align-items-start {
        align-items: start !important;
    }
    .m-align-items-end {
        align-items: end !important;
    }

    /* FLEX GAP */
    .m-flex-gap0 {
        gap: 0px;
    }
    .m-flex-gap2 {
        gap: 2px;
    }
    .m-flex-gap4 {
        gap: 4px;
    }
    .m-flex-gap5 {
        gap: 5px;
    }
    .m-flex-gap8 {
        gap: 8px;
    }
    .m-flex-gap10 {
        gap: 10px;
    }
    .m-flex-gap12 {
        gap: 12px;
    }
    .m-flex-gap15 {
        gap: 15px;
    }
    .m-flex-gap16 {
        gap: 16px;
    }
    .m-flex-gap20 {
        gap: 20px;
    }
    .m-flex-gap24 {
        gap: 24px;
    }
    .m-flex-gap35 {
        gap: 35px;
    }
    .m-flex-gap40 {
        gap: 40px;
    }
    .m-flex-gap50 {
        gap: 50px;
    }
    .m-flex-gap55 {
        gap: 55px;
    }

    .m-flex-gapauto {
        justify-content: space-between;
    }

    /* FLEX GROW */
    .m-flex-grow0 {
        flex-grow: 0;
    }

    /* FLEX SIZE */
    .m-flex-1 {
        flex: 1;
    }

    /* END FLEX */

    /* SPACE MARGIN */
    .m-clearfix {
        height: 0px;
        width: 0px;
    }
    .m-clear4 {
        height: 4px !important;
    }
    .m-clear5 {
        height: 5px !important;
    }
    .m-clear8 {
        height: 8px !important;
    }
    .m-clear10 {
        height: 10px !important;
    }
    .m-clear12,
    .m-space12 {
        height: 12px !important;
    }
    .m-clear14 {
        height: 14px !important;
    }
    .m-clear15 {
        height: 15px !important;
    }
    .m-clear16 {
        height: 16px !important;
    }
    .m-clear17 {
        height: 17px !important;
    }
    .m-clear20 {
        height: 20px !important;
    }
    .m-clear24 {
        height: 24px !important;
    }
    .m-clear25 {
        height: 25px !important;
    }
    .m-clear30 {
        height: 30px !important;
    }
    .m-clear32 {
        height: 32px !important;
    }
    .m-clear35 {
        height: 35px !important;
    }
    .m-clear40 {
        height: 40px !important;
    }
    .m-clear45 {
        height: 45px !important;
    }
    .m-clear50 {
        height: 50px !important;
    }
    .m-clear60 {
        height: 60px !important;
    }
    .m-clear65 {
        height: 65px !important;
    }
    .m-clear70 {
        height: 70px !important;
    }
    .m-clear80 {
        height: 80px !important;
    }
    .m-clear85 {
        height: 85px !important;
    }
    .m-clear90 {
        height: 90px !important;
    }
    .m-clear100 {
        height: 100px !important;
    }
    .m-clear110 {
        height: 110px !important;
    }
    .m-clear160 {
        height: 160px !important;
    }
    .m-clear170 {
        height: 170px !important;
    }
    .m-clear250 {
        height: 250px !important;
    }

    /* END SPACE MARGIN */

    /* BUTTON */
    .btn-small {
        padding: 8px 12px;
    }

    /* MODAL */
    /* .modal-container.medium{
        width: 100%;
    } */

    .modal-container {
        max-height: 505px;
        overflow-y: scroll;
    }

    .modal-container .modal-content {
        padding: 16px;
    }
}