@tailwind base;
@tailwind components;
@tailwind utilities;


/* megerbran width measurement  */
@font-face {
    font-family: "Work Sans";
    src: ('fonts/WorkSans-Thin.ttf');
    font-style: inherit;
    font-weight: 100;
}
  
@font-face {
    font-family: "Work Sans";
    src: ('fonts/WorkSans-ExtraLight.ttf');
    font-style: normal;
    font-weight: 200;
}

@font-face {
    font-family: "Work Sans";
    src: ('fonts/WorkSans-Light.ttf');
    font-style: normal;
    font-weight: 300;
}

@font-face {
    font-family: "Work Sans";
    src: ('fonts/WorkSans-Regular.ttf');
    font-style: normal;
    font-weight: 400;
}

@font-face {
    font-family: "Work Sans";
    src: ('fonts/WorkSans-Medium.ttf');
    font-style: normal;
    font-weight: 500;
}

@font-face {
    font-family: "Work Sans";
    src: ('fonts/WorkSans-SemiBold.ttf');
    font-style: inherit;
    font-weight: 600;
}

@font-face {
    font-family: "Work Sans";
    src: ('fonts/WorkSans-Bold.ttf');
    font-style: normal;
    font-weight: 700;
}

html,
body{
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  margin: 0;
  width: 100%;
  background-color: #F9FAFF;
}

/* div, p {
    font-family: Work Sans;
} */

.mbw-gp3 {
  gap: 3%;
}

.mbw-gp5 {
  gap: 5%;
}

.mbw-gp10 {
  gap: 10%;
}

.mbw-gp15 {
  gap: 15%;
}

.mbw-mbtm3 {
  margin-bottom: 3%;
}

.mbw-mbtm4 {
  margin-bottom: 4%;
}

.mbw-mbtm5 {
  margin-bottom: 5%;
}

.mbw05 {
    width: 5%;
  }

.mbw08 {
    width: 8%;
  }

.mbw1 {
  width: 10%;
}

.mbw15 {
    width: 15%;
  }

.mbw2 {
  width: 20%;
}

.mbw25 {
    width: 25%;
}

.mbw27 {
    width: 27%;
}

.mbw3 {
  width: 30%;
}

.mbw33 {
  width: 33%;
}

.mbw35 {
    width: 35%;
  }

.mbw4 {
  width: 40%;
}

.mbw45 {
  width: 45%;
}

.mbw5 {
  width: 50%;
}

.mbw55 {
  width: 55%;
}

.mbw6 {
  width: 60%;
}

.mbw7 {
  width: 70%;
}

.mbw8 {
  width: 80%;
}

.mbw9 {
  width: 90%;
}

.mbw10 {
  width: 100%;
}

.mbh10 {
    height: 100vh;
}

/* megerbran flex */

.mbw-fi-e {
  align-items: flex-end !important;
}

.mbw-fi-s {
  align-items: flex-start !important;
}

.mbw-fi-c {
  align-items: center !important;
}

.mbw-fc-e {
  align-content: flex-end !important;
}

.mbw-fc-s {
  align-content: flex-start !important;
}

.mbw-jsty-ctr {
  justify-content: center !important;
}

.mbw-jsty-btw {
  justify-content: space-between !important;
}

.flex_row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  box-sizing: border-box;
}

.flex_column {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  flex-direction: column;
  box-sizing: border-box;
}

.loading-circle {
    border-radius: 50%;
    width: 18px;
    height: 18px;
    border: .25rem solid #e0e0e0f2;
    border-top-color: rgb(255,255,255);
    animation: spin 1s 750ms infinite linear;
}

.outer-scroll {
    max-width: 100%;
    overflow-x: scroll;
}

.outer-scroll::-webkit-scrollbar {
    display: none;
  }

.inner-scroll {
 min-width: 800px;
 overflow-x: scroll;
}

.inner-scroll::-webkit-scrollbar {
    display: none;
}

@media (max-width: 1320px) and (min-width: 60px) {
    .xl-scroll-max {
        max-width: 90vw;
        overflow-x: scroll;
      }

      .xl-scroll-max::-webkit-scrollbar {
        display: none;
      }
    
      .xl-scroll {
        min-width: 1300px;
        overflow-x: scroll;
      }

      .xl-scroll::-webkit-scrollbar { 
       display: none;
     }
}

/* Mobile-Layout */
@media (max-width: 1280px) and (min-width: 60px) {
  .xl-off {
      display: none !important;
  }

  .xl-position-off {
      position: unset !important;
  }

  .xl-on {
      display: flex !important;
  }

  .xl-b-off {
      border: 0 !important;
  }

  .xl-mg-bt10 {
      margin-bottom: 10% !important;
  }

  .xl-mg-tp5 {
      margin-top: 5% !important;
  }

  .xl-abs {
      position: absolute;
  }

  .xl-flex {
      display: flex !important;
  }

  .xl-pad5 {
      padding: 0 5% !important;
  }

  .xl-pad10 {
      padding: 0 10% !important;
  }

  .xl-jsty {
      justify-content: center;
  }

  .shipper_settings_row {
      width: 100%;
  }

  .xlgp5 {
      gap: 5% !important;
  }

  .xlgp8 {
      gap: 8% !important;
  }

  .xlgp10 {
      gap: 10% !important;
  }

  .xlgp15 {
      gap: 15% !important;
  }

  .xlgp20 {
      gap: 20% !important;
  }

  .xl-mg-bt5 {
      margin-bottom: 5% !important;
  }

  .xl-mg-bt10 {
      margin-bottom: 10% !important;
  }

  .xl-mg-tp5 {
      margin-top: 5% !important;
  }

  .xl-mg-tp10 {
      margin-top: 10% !important;
  }

  .xl-h3 {
      height: 30% !important;
  }

  .xl-h8 {
      height: 80% !important;
  }

  .xl-h9 {
      height: 90% !important;
  }

  .xl-h10 {
      height: 100% !important;
  }

  .xl1 {
      width: 10% !important;
  }

  .xl11 {
    width: 11% !important;
    }

  .xl12 {
    width: 12% !important;
    }

  .xl2 {
      width: 20% !important;
  }

  .xl3 {
      width: 30% !important;
  }

  .xl4 {
      width: 40% !important;
  }

  .xl5 {
      width: 50% !important;
  }

  .xl6 {
      width: 60% !important;
  }

  .xl7 {
      width: 70% !important;
  }

  .xl8 {
      width: 80% !important;
  }

  .xl9 {
      width: 90% !important;
  }

  .xl10 {
      width: 100% !important;
  }
}

@media (max-width: 1000px) and (min-width: 60px) {
  .l-off {
      display: none !important;
  }

  .l-on {
      display: flex !important;
  }

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

  .l-flex {
      display: flex !important;
  }

  .l-jsty-btw {
      justify-content: space-between !important;
  }

  .p-center {
      text-align: center;
  }

  .lpad5 {
      padding: 0 5%;
  }

  .lgp5 {
      gap: 5% !important;
  }

  .l-mg-bt5 {
      margin-bottom: 5% !important;
  }

  .l-mg-bt10 {
      margin-bottom: 10% !important;
  }

  .l-mg-tp5 {
      margin-top: 5% !important;
  }

  .l-mg-tp10 {
      margin-top: 10% !important;
  }

  .lcol {
      display: flex;
      flex-direction: column !important;
  }

  .lrow {
      display: flex;
      flex-direction: row !important;
      justify-content: space-evenly;
  }

  .l-h8 {
      height: 80% !important;
  }

  .l-h9 {
      height: 90% !important;
  }

  .l-h10 {
      height: 100% !important;
  }

  .l1 {
      width: 10% !important;
  }

  .l2 {
      width: 20% !important;
  }

  .l3 {
      width: 30% !important;
  }

  .l4 {
      width: 40% !important;
  }

  .l45 {
      width: 45% !important;
  }

  .l5 {
      width: 50% !important;
  }

  .l6 {
      width: 60% !important;
  }

  .l7 {
      width: 70% !important;
  }

  .l8 {
      width: 80% !important;
  }

  .l9 {
      width: 90% !important;
  }

  .l10 {
      width: 100% !important;
  }
}

@media (max-width: 768px) and (min-width: 60px) {
  .m-off {
      display: none;
  }

  .m-h-fit {
      height: fit-content !important;
  }

  .m-on-blk {
      display: block;
  }

  .m-on-flex {
      display: flex;
  }

  .mpad5 {
      padding: 0 5% !important;
  }

  .mgp5 {
      gap: 5% !important;
  }

  .m-mg-tp5 {
      margin-top: 5% !important;
  }

  .m-mg-bm5 {
    margin-bottom: 5% !important;
}

  .m-mg-tp10 {
      margin-top: 10% !important;
  }

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

  .m1 {
      width: 10% !important;
  }

  .m18 {
    width: 18% !important;
}

  .m2 {
      width: 20% !important;
  }

  .m3 {
      width: 30% !important;
  }

  .m4 {
      width: 40% !important;
  }

  .m5 {
      width: 50% !important;
  }

  .m6 {
      width: 60% !important;
  }

  .m7 {
      width: 70% !important;
  }

  .m8 {
      width: 80% !important;
  }

  .m9 {
      width: 90% !important;
  }

  .m10 {
      width: 100% !important;
  }
}

@media (max-width: 450px) and (min-width: 60px) {
    /* SCROLL BEHAVIOUR */
    .sm-scroll-max {
        max-width: 90vw;
        overflow-x: scroll;
      }

      .sm-scroll-max::-webkit-scrollbar {
        display: none;
      }
    
      .sm-scroll {
        min-width: 700px;
        overflow-x: scroll;
      }

      .sm-scroll::-webkit-scrollbar { 
       display: none;
     }

    /* REGULAR STYLING */

  .sm-off {
      display: none;
  }

  .sm-on-blk {
      display: block;
  }

  .sm-jsty-left {
      justify-content: flex-start !important;
  }

  .sm-pad5 {
      padding: 0 5%;
  }

  .sm-on-flex {
      display: flex;
  }

  .smgp5 {
      gap: 5% !important;
  }

  .sm-mg-tp5 {
      margin-top: 5% !important; 
  }

  .sm-mg-tp10 {
      margin-top: 10% !important;
  }

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

  .sm-h6 {
      height: 60vh !important;
  }

  .sm-h8 {
      height: 80vh !important;
  }

  .sm-h10 {
      height: 100vh !important;
  }

  .sm1 {
      width: 10% !important;
  }

  .sm2 {
      width: 20% !important;
  }

  .sm3 {
      width: 30% !important;
  }

  .sm4 {
      width: 40% !important;
  }

  .sm5 {
      width: 50% !important;
  }

  .sm6 {
      width: 60% !important;
  }

  .sm7 {
      width: 70% !important;
  }

  .sm8 {
      width: 80% !important;
  }

  .sm9 {
      width: 90% !important;
  }

  .sm10 {
      width: 100% !important;
  }
}