.font-sm {
    font-size: calc(var(--ratio) * 0.8vw);
}

.font-22{
    font-size: calc(var(--ratio) * 0.95vw);
}

.font-normal {
    font-size: calc(var(--ratio) * 0.9vw);
}
.font-medium {
    font-size: calc(var(--ratio) * 1vw);
}

.font-big{
    font-size: calc(var(--ratio) * 1.2vw);
}
.font-bigger {
    font-size: calc(var(--ratio) * 1.3vw);
}

.font-medium-bigger{
    font-size: calc(var(--ratio) * 1.35vw);
}

.font-ext-bigger {
    font-size: calc(var(--ratio) * 2vw);
}

.pad-20{
    padding: calc((20px * var(--page-wide)))
}

.w-11{
    width: calc((11px * var(--page-wide)));
}
.w-14{
    width: calc((14px * var(--page-wide)));
}
.w-18{
    width: calc((18px * var(--page-wide)));
}
.w-20{
    width: calc((21px * var(--page-wide)));
}
.w-22{
    width: calc((22px * var(--page-wide)));
}
.w-27{
    width: calc((27px * var(--page-wide)));
}
.w-30{
    width: calc((30px * var(--page-wide)));
}
.w-40{
    width: calc((40px * var(--page-wide)));
}
.w-45{
    width: calc((45px * var(--page-wide)));
}
.w-55{
    width: calc((55px * var(--page-wide)));
}
.w-70{
    width: calc((70px * var(--page-wide)));
}
.w-90{
    width: calc((90px * var(--page-wide)));
}
.w-94{
    width: calc((94px * var(--page-wide)));
}
.w-124{
    width: calc((124px * var(--page-wide)));
}
.min-w-133{
    min-width: calc((133px * var(--page-wide)));
}
.min-w-145{
    min-width: calc((150px * var(--page-wide)));
}
.w-153{
    width: calc((153px * var(--page-wide)));
}
.w-286{
    width: calc((286px * var(--page-wide)));
}
.w-365{
    width: calc((365px * var(--page-wide)));
}

.min-w-164{
    width: calc((164px * var(--page-wide)));
}

.h-11{
    height: calc((11px * var(--page-wide)));
}
.h-14{
    height: calc((14px * var(--page-wide)));
}
.h-18{
    height: calc((18px * var(--page-wide)));
}
.h-23{
    height: calc((23px * var(--page-wide)));
}
.h-27{
    height: calc((27px * var(--page-wide)));
}
.h-30{
    height: calc((30px * var(--page-wide)));
}
.h-40{
    width: calc((40px * var(--page-wide)));
}
.h-55{
    height: calc((55px * var(--page-wide)));
}
.h-56{
    height: calc((56px * var(--page-wide)));
}
.h-70{
    height: calc((70px * var(--page-wide)));
}
.h-78{
    height: calc((78px * var(--page-wide)));
}
.h-100{
    height: calc((100px * var(--page-wide)));
}
.h-193{
    height: calc((193px * var(--page-wide)));
}
.table-row-height{
    height: calc((56.875px * var(--page-wide)));
}

.table-header-height{
    height: calc((67px * var(--page-wide)));
}
.h-90{
    height: calc((90px * var(--page-wide)));
}
.h-120{
    height: calc((120px * var(--page-wide)));
}
.h-135{
    height: calc((135px * var(--page-wide)));
}
.h-158{
    height: calc((158px * var(--page-wide)));
}
.h-170{
    height: calc((170px * var(--page-wide)));
}
.h-213{
    height: calc((213px * var(--page-wide)));
}
.h-420{
    height: calc((420px * var(--page-wide)));
}

.rad-20{
    border-radius : calc((20px * var(--page-wide)))
}
.rad-15{
    border-radius : calc((15px * var(--page-wide)))
}
.rad-6{
    border-radius : calc((6px * var(--page-wide)))
}
.pad-y-12{
  padding-top: calc((12px * var(--page-wide)));
  padding-bottom: calc((12px * var(--page-wide)));
}
.pad-y-8{
  padding-top: calc((8px * var(--page-wide)));
  padding-bottom: calc((8px * var(--page-wide)));
}
.pad-y-6{
  padding-top: calc((6px * var(--page-wide)));
  padding-bottom: calc((6px * var(--page-wide)));
}
.pad-y-4{
  padding-top: calc((4px * var(--page-wide)));
  padding-bottom: calc((4px * var(--page-wide)));
}
.pad-y-2{
  padding-top: calc((2px * var(--page-wide)));
  padding-bottom: calc((2px * var(--page-wide)));
}
.pad-x-24{
  padding-left: calc((24px * var(--page-wide)));
  padding-right: calc((24px * var(--page-wide)));
}
.pad-b-12{
  padding-bottom: calc((12px * var(--page-wide)));
}
.pad-b-8{
  padding-bottom: calc((8px * var(--page-wide)));
}
.pad-b-18{
  padding-bottom: calc((18px * var(--page-wide)));
}
.pad-r-18{
  padding-right: calc((18px * var(--page-wide)));
}
.mar-r-18{
  margin-right: calc((18px * var(--page-wide)));
}
.mar-r-12{
  margin-right: calc((12px * var(--page-wide)));
}
.mar-t-18{
  margin-top: calc((18px * var(--page-wide)));
}
.pad-r-14{
  padding-right: calc((14px * var(--page-wide)));
}
.pad-r-10{
  padding-right: calc((10px * var(--page-wide)));
}
.pad-l-40{
  padding-left: calc((40px * var(--page-wide)));
}

.pad-r-5{
  padding-right: calc((5px * var(--page-wide)));
}
.pad-l-5{
  padding-left: calc((5px * var(--page-wide)));
}

.pad-r-22{
  padding-right: calc((22px * var(--page-wide)));
}
.pad-l-12{
  padding-left: calc((12px * var(--page-wide)));
}
.mar-t-8{
    margin-top: calc((8px * var(--page-wide)))
}
.pad-x-40{
    padding-left: calc((40px * var(--page-wide)));
    padding-right: calc((40px * var(--page-wide)));
}
.pad-x-12{
    padding-left: calc((12px * var(--page-wide)));
    padding-right: calc((12px * var(--page-wide)));
}
.pad-x-6{
    padding-left: calc((6px * var(--page-wide)));
    padding-right: calc((6px * var(--page-wide)));
}
.pad-x-20{
    padding-left: calc((20px * var(--page-wide)));
    padding-right: calc((20px * var(--page-wide)));
}
.mar-t-30{
    margin-top: calc((30px * var(--page-wide)))
}

.pad-t-16{
    padding-top: calc((16px * var(--page-wide)))
}

.cus-border-3{
    border: calc((3px * var(--page-wide))) solid var(--cus-gray-100);
}
.cus-border-1{
    border: calc((1.5px * var(--page-wide))) solid var(--cus-gray-100);
}

.gap-24{
    gap: calc((24px * var(--page-wide))) !important;
}
.cus-border{
    border: calc((1px * var(--page-wide))) solid var(--cus-gray-100);
}

  .border-cus-green{
    border: calc((1px * var(--page-wide))) solid var(--cus-green)
  }

.border-b-gray{
  border-bottom: calc((1px * var(--page-wide))) solid var(--cus-gray-30)
}
.border-t-gray{
  border-top: calc((1px * var(--page-wide))) solid var(--cus-gray-30)
}

.border-r-gray{
  border-right: calc((1px * var(--page-wide))) solid var(--cus-gray-30)
}
.border-l-gray{
  border-left: calc((1px * var(--page-wide))) solid var(--cus-gray-30)
}

.border-r-black{
  border-right: calc((1px * var(--page-wide))) solid var(--cus-black-100)
}
.border-black{
    border: calc((1px * var(--page-wide))) solid black;
}