.wrapper-container {
  box-sizing: content-box;
  margin-left: auto;
  margin-right: auto;
  max-width: 1550px;
  position: relative;
  width: 90%;
}

@media only screen and (max-width: 576px) {
  .wrapper-container {
    padding-left: 15px;
    padding-right: 15px;
    width: calc(100% - 30px);
  }
}
.row {
  display: flex;
  flex-direction: row;
}

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

.block {
  display: block;
}

/* background */
.bg-primary {
  background: var(--bg-primary);
}

.bg-primary-light {
  background: var(--light-primary);
  border-color: var(--light-primary);
}

.m-0 {
  margin:0px;
}

.mt-10 {
  margin-top: 10px;
}

.mt-15 {
  margin-top: 15px;
}

.mt-20 {
  margin-top: 20px;
}

.mt-30 {
  margin-top: 30px;
}

.mt-50 {
  margin-top: 50px;
}

.mb-5 {
  margin-bottom: 5px;
}

.mb-10 {
  margin-bottom:10px;
}

.mb-20 {
  margin-bottom: 20px;
}
.mb-24 {
  margin-bottom: 24px;
}

.mb-36 {
  margin-bottom: 36px;
}
.ml-10 {
  margin-left:10px;
}
.ml-20 {
  margin-left:20px;
}


.mr-10 {
  margin-right:10px;
}

.mr-20 {
  margin-right:20px;
}
.p-0 {
  padding: 0px;
}

.modal-p-0 .ant-modal-content{
  padding: 0px;
  background-color: transparent;
}

.modal-p-0 {
  padding: 0px;
}
.p-23 {
  padding:23px;
}
.px-23 {
  padding-left:23px;
  padding-right:23px;
} 
.py-23 {
  padding-top:23px;
  padding-bottom:23px;
} 
.pt-20 {
  padding-top:20px;
}
.flex-1 {
  flex: 1;
}
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.flex-start-between {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.flex-center-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex-center-end {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.flex-end {
  align-items:flex-end;
  justify-content:flex-end;
}

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

.flex-wrap {
  flex-wrap: wrap;
}
.d-desktop {
  display: block;
}

.d-flex {
  display:flex;
}

.d-mobile {
  display: none;
}


.d-block {
  display:block;
}

.d-none {
  display:none;
}

.space-between {
  justify-content:space-between;
}
/*----------------------flex-gap----------------------*/
.gap-10 {
  gap: 10px;
}

.gap-17 {
  gap: 17px;
}

.gap-20 {
  gap: 20px;
}


@media (max-width: 576px) {
  .d-mobile {
    display: block;
  }
  .d-mobile.d-flex {
    display:flex;
  }
  .d-desktop {
    display: none;
  }
}


.bg-primary {
  background-color:var(--bg-primary);
  color:white;
  border:none;
}
.bg-black {
  background-color: #000;
}
/*===========overwrite Antd==========*/


  .full-screen-dropdown-not-stick {
    max-width: calc(-1% + 100vw) !important;
  }

  .full-screen-dropdown {
    width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
  }

  .border-bottom-primary {
    position: relative;
  }
  
  .border-bottom-primary:after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--bg-primary);
  }

  .opacity-05 {
    opacity: 0.5;
  }

  .font-w600-s14-h20 {
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
  }

  .font-w700-s24-h35 {
    font-size: 24px;
    font-weight: 700;
    line-height: 35px;
  }

  a:hover {
    color: initial;
  }

  .w-50 {
    width: 50px;
  }
  .w-full {
    width:100%;
  }