/* SIZING LAYOUT */
.row-5, .row-10, .row-15, .row-20, .row-25, .row-30, .row-33, .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;
}

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


/* FLEX */
.flex1{display: flex; flex: 1;}
.flex2{display: flex; flex : 2}
.flex3{display: flex; flex : 3}

.display-hide{display: none !important;}

.flex-row {display: flex; flex-direction : row}
.flex-column {display: flex; flex-direction : column}

.flex-grow {flex-grow : 1}
.flex-same-width {flex-grow :1; flex-basis : 0}

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

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

.flex-content-center{ align-content: center;}

.flex-wrap {flex-wrap: wrap;}
.flex-wrap-reverse {flex-wrap: wrap-reverse;}
.flex-width-align {align-self : flex-start}

/* OVERFLOW */

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

/* Hide scrollbar for Chrome, Safari and Opera */
.box-overflow::-webkit-scrollbar {
  display: none;
}

.box-overflow .box-container{
  width : 2000px;
}

.space24 {width: 24px;height: 100%;}

.box-overflow .space16 {width: 16px; height: 100%;}
.box-overflow .space24 {width: 24px; height: 100%;}



/* GRID */
.grid-container {display: grid;}
.grid-column2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-column3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* MARGIN */
.no-margin {margin : 0px !important;}

.mt-0 {margin-top: 4px !important;}
.mt-1 {margin-top: 8px !important;}
.mt-2 {margin-top: 16px !important;}
.mt-3 {margin-top: 24px !important;}
.mt-4 {margin-top: 32px !important;}

.mb-0 {margin-bottom: 4px !important;}
.mb-1 {margin-bottom: 8px !important;}
.mb-2 {margin-bottom: 16px !important;}
.mb-3 {margin-bottom: 24px !important;}
.mb-4 {margin-bottom: 32px !important;}

.mr-0 {margin-right: 4px !important;}
.mr-1 {margin-right: 8px !important;}
.mr-2 {margin-right: 16px !important;}
.mr-3 {margin-right: 24px !important;}
.mr-4 {margin-right: 32px !important;}

.ml-0 {margin-left: 4px !important;}
.ml-1 {margin-left: 8px !important;}
.ml-2 {margin-left: 16px !important;}
.ml-3 {margin-left: 24px !important;}
.ml-4 {margin-left: 32px !important;}

.gap-0 {gap: 4px;}
.gap-1 {gap: 8px;}
.gap-2 {gap: 16px;}
.gap-3 {gap: 24px;}
.gap-4 {gap: 32px;}

/* CLEAR */
.clear-0{width: 100%; height: 4px;float:left}
.clear-1{width: 100%; height: 8px;float:left}
.clear-2{width: 100%; height: 16px;float:left}
.clear-3{width: 100%; height: 24px;float:left}
.clear-4{width: 100%; height: 32px;float:left}
.clear-menu{width: 100%; height: 70px;float:left}

/* PADDING */
.pd-8 {padding-left : 8px !important; padding-right: 8px !important;}
.pd-all-8 {padding : 8px;}
.pd-16 {padding-left : 16px !important; padding-right: 16px !important;}
.pd-all-16 {padding : 16px;}
.pd-24 {padding-left : 24px !important; padding-right: 24px !important;}
.pd-l-24 {padding-left : 24px !important;}
.pd-r-24 {padding-right : 24px !important;}
.pd-all-24 {padding : 24px;}
.pd-32 {padding-left : 32px !important; padding-right: 32px !important;}
.pd-l-32 {padding-left : 32px !important;}
.pd-r-32 {padding-right : 32px !important;}
.pd-all-32 {padding : 32px;}
.pd-64 {padding-left : 64px !important; padding-right: 64px !important;}

/* BORDER */
.border-1{width : 100%; height: 1px; float : left;}

/* BOX BORDER */
.border-box1{border: 1px solid;}

/* BOX RADIUS */
.box-rd-0{border-radius: 4px;}
.box-rd-1{border-radius: 8px;}
.box-rd-2{border-radius: 16px;}
.box-rd-3{border-radius: 24px;}

/* FLOAT */
.f-left {float : left}
.f-right {float : right}


/* TEXT CONTENT */
.text-content ul, .text-content ol{padding-left : 16px;}
.text-content ul li, .text-content ol li{margin-bottom: 8px;}


/* POPUP */
.popup-bg, .popup-bg-loading{
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.2);
  z-index: 1;
}

.popup-full{
  display: flex;
  position: fixed;
  z-index: 2;
  height: 90%;
  bottom: -100%;
  transition: all ease-in-out 0.3s;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
}

.popup-regular{
  display: flex;
  position: fixed;
  z-index: 2;
  max-height: 90%;
  bottom: -100%;
  transition: all ease-in-out 0.3s;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
}

.popup-login, .popup-loading{
  display: none;
  position: fixed;
  z-index: 2;
  top : 25%;
  transition: all ease-in-out 0.3s;
  overflow: hidden;
  height: fit-content;
}

.popup-login-box, .popup-loading-box{
  width: 250px;
  border-radius: 8px;
}


.popup-error{
  display: none;
  position: fixed;
  z-index: 2;
  top : 25%;
  transition: all ease-in-out 0.3s;
  overflow: hidden;
  height: fit-content;
}

.popup-error-box{
  width: 250px;
  border-radius: 8px;
}


.popup-indicator{
  padding: 8px 0;
  overflow: hidden;
}

.popup-close-indicator{
  width: 64px;
  height: 4px;
  border-radius: 8px;
  cursor: pointer;
}

.popup-body{
  overflow-y: auto;
  overflow-x: hidden;
}

/* TOOLTIP */
.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 140px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -75px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

@media (min-width: 1281px) {

}

/*
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/

@media (min-width: 1026px) and (max-width: 1280px) {

}

/*
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 850px) and (max-width: 1025px) {
   
}

/*
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 481px) and (max-width: 849px){
    .row-tablet-5 {width: 5%;}
    .row-tablet-10 {width: 10%;}
    .row-tablet-15 {width: 15%;}
    .row-tablet-20 {width: 20%;}
    .row-tablet-25 {width: 25%;}
    .row-tablet-30 {width: 30%;}
    .row-tablet-33 {width: 33%;}
    .row-tablet-35 {width: 35%;}
    .row-tablet-40 {width: 40%;}
    .row-tablet-45 {width: 45%;}
    .row-tablet-50 {width: 50%;}
    .row-tablet-55 {width: 55%;}
    .row-tablet-60 {width: 60%;}
    .row-tablet-65 {width: 65%;}
    .row-tablet-70 {width: 70%;}
    .row-tablet-75 {width: 75%;}
    .row-tablet-80 {width: 80%;}
    .row-tablet-85 {width: 85%;}
    .row-tablet-90 {width: 90%;}
    .row-tablet-95 {width: 95%;}
    .row-tablet-100 {width: 100%;}
}

/*
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/

@media (min-width: 0px) and (max-width: 480px) {
    .row-mobile-5 {width: 5%;}
    .row-mobile-10 {width: 10%;}
    .row-mobile-15 {width: 15%;}
    .row-mobile-20 {width: 20%;}
    .row-mobile-25 {width: 25%;}
    .row-mobile-30 {width: 30%;}
    .row-mobile-33 {width: 33%;}
    .row-mobile-35 {width: 35%;}
    .row-mobile-40 {width: 40%;}
    .row-mobile-45 {width: 45%;}
    .row-mobile-50 {width: 50%;}
    .row-mobile-55 {width: 55%;}
    .row-mobile-60 {width: 60%;}
    .row-mobile-65 {width: 65%;}
    .row-mobile-70 {width: 70%;}
    .row-mobile-75 {width: 75%;}
    .row-mobile-80 {width: 80%;}
    .row-mobile-85 {width: 85%;}
    .row-mobile-90 {width: 90%;}
    .row-mobile-95 {width: 95%;}
    .row-mobile-100 {width: 100%;}
}