$red: #eb5757;
    $red-hover: #fe130b;

    $orange: #ff8964;
    $orange-hover: #ff8964;
    $orange-disabled: rgba(255, 137, 100, 0.8);

    @font-face {
      font-family: 'DaysOneR'; 
      src: url(/css/fonts/daysone-regular.woff);
    }
    @font-face {
      font-family: 'DaysOneR'; 
      src: url(/css/fonts/daysone-regular.woff2);
    }
    .hFont {
      font-family: 'DaysOneR'; 
    }
    .nFont {
      font-family: 'DaysOneR'; 
      font-size: 36px !important;
      text-transform: none !important;
    }
    .wButton {
        font-size: 15px;
        text-decoration: none;
        outline: none;
        display: inline-block;
        color: #4d5ced;
        padding: 10px 20px;
        margin: 10px 5px;
        border-radius: 10px;
        /*text-transform: uppercase;*/
        /*letter-spacing: 2px;*/
        background-image: linear-gradient(to left, #FFF 0%, #fff 100%);
        background-size: 200% auto;
        box-shadow: 0 0 20px rgb(0 0 0 / 10%);
        transition: .5s;
        background-position: right center;
    }
    .gButton:hover {
        background-position: left center;
        color: #fff;
    }
    .gButton {
        font-size: 15px;
        text-decoration: none;
        outline: none;
        display: inline-block;
        color: white;
        padding: 8px 15px;
        /*margin: 10px 5px;*/
        border-radius: 4px;
        /*text-transform: uppercase;*/
        /*letter-spacing: 2px;*/
        background-image: linear-gradient(to left, #1ECFFB 0%, #4830F0 50%, #225FFB 100%);
        background-size: 200% auto;
        box-shadow: 0 0 20px rgb(0 0 0 / 10%);
        transition: .5s;
        background-position: right center;
        border: none;
    }
    .gButton:hover {
        background-position: left center;
        color: #fff;
    }

    .pagination{
      padding: 30px 0;
    }

    .pagination ul{
      margin: 0;
      padding: 0;
      list-style-type: none;
    }

    .pagination a{
      display: inline-block;
      padding: 10px 18px;
      color: #222;
    }
    .p1 a{
      width: 40px;
      height: 40px;
      line-height: 40px;
      padding: 0;
      text-align: center;
    }

    .p1 a.is-active{
      background-color: #3849eb;
      border-radius: 100%;
      color: #fff;
    }
    label {
      margin-bottom: 0rem;
    }
    .switch-field {
      display: flex;
      overflow: hidden;
      border-radius: 4%;
    }

    .switch-field div {
      text-align: center;
      padding: 5px 20px;
      border: 1px solid rgba(0, 0, 0, 0.2);
      box-shadow: inset 0 1px 3px rgb(0 0 0 / 30%), 0 1px rgb(255 255 255 / 10%);
      transition: all 0.1s ease-in-out;
    }

    .switch-field_checked {
      background-image: linear-gradient(to left, #1ECFFB 0%, #4830F0 50%, #225FFB 100%);
      background-size: 110% auto;
      color: #fff;
      box-shadow: none;
    }

    .head_profile {
      padding:10px 30px;
      font-size:18px;
      font-weight:400;
      border-bottom: 1px solid; 
      border-top: 1px solid; 
    }
    .categories_profile {
      padding: 10px 28px;
    }
    .left_profile {
      box-shadow: 0 0 20px rgb(0 0 0 / 10%);
    }
    .head_profile :after {
      background-size: 300px 300px;
      background-repeat: repeat-x;
      opacity: 0.4;
      background-image: url(/assets/images/pattern.jpg);
    }
    .card-product__img {
      position: relative !important;
      height: 250px !important;
      overflow: hidden !important;
    }
    .categories_profile_active {
      background-image: linear-gradient(to left, #1ECFFB 0%, #4830F0 50%, #225FFB 100%);
      background-size: 110% auto;
      color: #fff !important;
    }
    .createAccount_inner {
      position: relative;
      width: 100%;
    }
    .createAccount {
      position: relative;
      width: 100%;
      max-width: 500px;
      margin: 10px auto;
      padding: 30px 16px;
      display: flex;
      flex-direction: row;
      background: #fff;
      box-shadow: 0 8px 40px rgba(0, 0, 0, 0.1);
      border-radius: 20px;
      color: #001b38;
      box-sizing: border-box;

      ///overflow: hidden;

      z-index: 100;
    }
    .createAccount_title {
      margin: 20px 0;
      font-weight: bold;
      font-size: 24px;
      line-height: 36px;
      color: #001b38;
    }
    .createAccount_buttons {
      margin-top: 20px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
    .btn_createAccount,
    .btn_backStep1 {
      width: 180px;
    }
    .createAccount_wrapper > .container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
    }

    /////////////  ALL MAGIC HERE

    .form_label {
      position: relative;
      min-height: 88px;
    }
    .form_text {
      vertical-align: top;
      display: block;
      margin-bottom: 6px;
      font-weight: 500;
      font-size: 12px;
      line-height: 16px;
      letter-spacing: 0.04em;
      color: #686ea1;
    }
    .form_text:after {
      content: "*";
      position: relative;
      top: 0;
      font-size: 13px;
      color: #f00;
    }
    .form_label input,
    .field_multiselect {
      position: relative;
      width: 100%;
      display: block;
      min-height: 38px;
      border: 1px solid #1DC3F6;
      box-sizing: border-box;
      border-radius: 4px;
      padding-left: 10px;
      padding-top: 5px;
      font-size: 1rem;
      color: #a8acc9;
    }
    .field_multiselect_help {
      position: absolute;
      top: -25px;
      left: 0;
      opacity: 0;
    }
    .form_label input.error {
      border-color: $red;
    }
    .error_text {
      color: $red;
    }
    .field_multiselect {
      padding-right: 60px;
    }
    .multiselect_block {
      position: relative;
      width: 43vw;
    }
    .field_select {
      position: absolute;
      top: calc(100% - 2px);
      left: 0;
      width: 100%;

      border: 2px solid #cdd6f3;
      border-bottom-right-radius: 2px;
      border-bottom-left-radius: 2px;
      box-sizing: border-box;
      outline-color: #cdd6f3;
      z-index: 6;
    }
    .field_select[multiple] {
      overflow-y: auto;
    }
    .field_select option {
      display: block;
      padding: 8px 16px;
      cursor: pointer;
    }
    .field_multiselect button {
      position: relative;
      padding-right: 10px;
      background: #1DC3F6;
      border-radius: 4px;
      margin-right: 9px;
      margin-bottom: 7px;
      color: #fff;
      height: 30px;
      border: 0px;
      font-size: 14px;
    }
    .multiselect_label {
      position: absolute;
      top: 1px;
      left: 2px;
      width: 100%;
      height: 44px;
      cursor: pointer;
      z-index: 3;
    }
    .field_select {
      display: none; 
    }
    input.multiselect_checkbox {
      position: absolute;
      right: 0;
      top: 0;
      width: 40px;
      height: 40px;
      border: none;
      opacity: 0;
    }
    .multiselect_checkbox:checked ~ .field_select {
      display: block;
    }
    .multiselect_checkbox:checked ~ .multiselect_label {
      width: 40px;
      left: initial;
      right: 4px;
      background: #ffffff
        url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M19.4958 6.49499C19.7691 6.22162 19.7691 5.7784 19.4958 5.50504C19.2224 5.23167 18.7792 5.23167 18.5058 5.50504L12.5008 11.5101L6.49576 5.50504C6.22239 5.23167 5.77917 5.23167 5.50581 5.50504C5.23244 5.7784 5.23244 6.22162 5.50581 6.49499L11.5108 12.5L5.50581 18.505C5.23244 18.7784 5.23244 19.2216 5.50581 19.495C5.77917 19.7684 6.22239 19.7684 6.49576 19.495L12.5008 13.49L18.5058 19.495C18.7792 19.7684 19.2224 19.7684 19.4958 19.495C19.7691 19.2216 19.7691 18.7784 19.4958 18.505L13.4907 12.5L19.4958 6.49499Z' fill='%234F5588'/%3E%3C/svg%3E")
        50% 50% no-repeat;
    }
    .multiselect_checkbox:checked ~ .field_multiselect_help {
      opacity: 1;
    }
    .btn_p {
      color: #fff;
      background-color: #1DC3F6;
    }
    .btn_p:hover {
      color: white;
      border-color: #80bdff;
      outline: 0;
      box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25);
    }
    
    @media only screen and (max-width: 600px) {
      .pt-10vh {
        padding-top: 10vh !important;
      }
      .card-blog .card-body {
        padding: 15px 0px 15px 0px !important;
      }
      .pb-60px {
        padding-bottom: 20px !important;
      }
      .section-intro__style {
        display: inline-block !important;
        padding-bottom: 20px !important;
      }
      .owl-prev {
        display: none !important;
      }
      .owl-next {
        display: none !important;
      }
      .navbar-brand {
        padding-top:  0px !important;
        margin-right: 0px !important;
      }
      .mobile_logo {
        padding-left: 10px !important;
        padding-right: 10px !important;
      }
      .card-product__img {
        height: 100%;
      }
    }
    @media (max-width: 400px) {
      .field_multiselect_help {
        display: none; //// We don't need it on mobile
      }
    }