@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
:root {
  --primary-color:#ea9d3e;
  --secondary-color: #312f17;
  --primary-light:#eec33d;
  --blue:#e5bd3f;
  --blue1:#eec33d;
  --blue2:#312f17;
  --blue3:#100a42;
  --yellow:#242311;
  --black:#000;
  --white:#fff;
  /* --secondary-color: #6c757d; */
  --text-color: #343a40;
  --text-color2:#475569;
  --link:#292B2C;
  --border:#e8e8e8;
  --chalk:#f5f5f5;
  --nav-text:#232d3b;
  --border:#e8e8e8;
}

html,body{font-family: 'Roboto', sans-serif;height:100%;}
.login-wrap {
    width: 100%;
}

.wrap {
    width: 100%;
    overflow: hidden;
    background: #fff;
    border-radius: 5px;
    -webkit-box-shadow: 0 10px 34px -15px rgb(0 0 0 / 24%);
    -moz-box-shadow: 0 10px 34px -15px rgba(0,0,0,.24);
    box-shadow: 0 10px 34px -15px rgb(0 0 0 / 24%);
}


.xycentercontent {
    position: absolute;
    top: 50%;
    padding:20px;
    width:100%;
    transform: translateY(-50%);
}
.mobile{display:none;}
@media only screen and (min-width: 280px) and (max-width: 580px) {
.xycentercontentm{padding:10px;text-align:center;position: relative;display:inline-block:width:100%;}
.desktop{display:none;}
.mobile{display:block;}
.login .bgleft .p-5{padding-bottom:0 !important;}
.register{height:auto !important;max-height:600px;}
.register .bgleft{height:auto !important;max-height:600px;}
.register .bgleft .logo{text-align:center !important;}
.register .bgleft .mobile{text-align:center !important;padding-bottom:70px;}
#wizard{width:100% !important;}
.custom-checkbox2>div{width:50% !important;}
}

/* font size */
.fs12{font-size:12px;}
.fs13{font-size:13px;}
.fs14{font-size:14px;}
.fs15{font-size:15px;}
.fs19{font-size: 19px;}


.divide{background: var(--primary-color);
    background-image: linear-gradient(to right,var(--blue),#312f17,#eec33d);    
    width: 100px;
    height: 2px;
    display: inline-block;
    margin:15px 0 10px;}

    .divide1{background: var(--primary-color);
        /* background-image: linear-gradient(to right,#ffffff,#021a3d,#ffffff); */
        background-image: linear-gradient(to right,#ffffff,#302f2f,#ffffff);
        
        width: 100px;
        height: 2px;
        display: inline-block;
        margin:15px 0 10px;}    

    .login-wrap .title {
        font-size: 22px;
        font-weight: 500;
        line-height: 16px;
        
        color: var(--primary-color);
        margin: 0;
    }


    .input1 {
        border: none;
        border-bottom: 1px solid #ddd;
        background: #fff;
        border-radius: 2px;
        padding: 12px 30px 12px 5px;
        width: 100%;
        font-size: 14px;
        min-height: 44px;
    }
    .input1i {
      border: none !important;
      border-bottom: 1px solid #ddd !important;
      background: #fff !important;
      border-radius: 2px !important;
      padding: 12px 30px 12px 5px !important;
      width: 100% !important;
      font-size: 14px !important;
      min-height: 44px !important;
      box-shadow: none !important;
      /* max-height: 46px !important; */
  }
    .btn1{border: 2px solid var(--primary-color);
        background: #fff;
        color: var(--primary-color);
        border-radius: 5px;
        display: inline-block;
        font-size: 15px;
        font-weight: 600;
        text-transform: uppercase;
        cursor: pointer;
        padding: 8px;
        width: 100%;
        /* max-width: 220px; */
        position: relative;
    }

    .or {
        color: #686868;
        text-transform: uppercase;
        font-size: 13px;
        text-align: center;
        border-top: 1px solid #ccc;
        margin-top: 40px;
        position: relative;
    }
    .or p {
        background: #fff;
        display: inline-block;
        width: 155px;
        position: absolute;
        left: 50%;
        bottom: -25px;
        transform: translateX(-50%);
    }

    .bgleft{background: var(--blue) url('../../public/assets/images/register-img.png');background-size: contain;background-position: center;position: relative;}
    .bgleft::before{background: var(--primary-color);position: absolute;width: 100%;height:100%;top:0;left:0;content: '';opacity: 0.6;}

    .hide-password,.chide-password {
      display: none
    }
    .show-password,.hide-password{color:var(--primary-color);outline: none;background: transparent;border:none;border-bottom:1px solid #ddd;}
    .show-password:hover,.hide-password:hover{color:var(--primary-color);background: transparent;}
    
    
    .cshow-password,.chide-password{color:var(--primary-color);outline: none;background: transparent;border:none;border-bottom:1px solid #ddd;}
    .cshow-password:hover,.chide-password:hover{color:var(--primary-color);background: transparent;}
    input:-internal-autofill-selected {
        appearance: menulist-button;
        background-image: none !important;
        background-color: -internal-light-dark(rgb(252, 22, 22), rgba(126, 92, 70, 0.4)) !important;
        color: fieldtext !important;
    }

    input:-webkit-autofill {
        background-color: Red !important;
      }
      input:autofill {
        background-color: -internal-light-dark(rgb(252, 22, 22), rgba(126, 92, 70, 0.4)) !important;
      }


      /* .link1{} */
      .link1{color:var(--primary-color);text-decoration: none;}
      #loginusingpassword{display: none;}



      /* signup form */
      .body1 {
        background: url("../images/form-wizard-bg.jpg");
        background-size: cover; }
      
      .wrapper {
        /* max-width: 1400px; */
        /* height: 100vh; */
        margin: auto;
        display: flex;
        align-items: center; }
        .wrapper .image-holder {
          width: 30%; }
          .wrapper .image-holder img{
            width: 100%; }
        .wrapper form {
          width: 70%; }
      
      .wizard > .steps .current-info, .wizard > .steps .number {
        display: none; }
      
      #wizard {
        min-height: 401px;
        background: #fff;
        margin-right: 60px;
        padding: 107px 75px 65px; }
      
      .steps {
        margin-bottom: 30px; }
        .steps ul {
          display: flex;
          position: relative;list-style: none;padding:0; }
          .steps ul li {
            width: 20.16%;
            margin-right: 10px; }
            .steps ul li a {
              display: inline-block;
              width: 100%;
              height: 7px;
              background: #e6e6e6;
              border-radius: 3.5px; }
            .steps ul li.first a, .steps ul li.checked a {
              background: var(--primary-color);
              transition: all 0.5s ease; }
              .wizard > .steps .done a, .wizard > .steps .done a:hover, .wizard > .steps .done a:active {background: var(--primary-color);transition: all 0.5s ease;}
          .steps ul:before {
            content: "Sign Up on Worldbusinesscentral";
            font-size: 22px;
            font-family: "Roboto";
            color: var(--primary-color);
            font-weight: 500;
            top: -60px;
            position: absolute; }
          .steps ul.step-2:before {
            content: "Business Details"; }
          .steps ul.step-3:before {
            content: "Contact Details"; }
          .steps ul.step-4:before {
            content: "Billing Method"; }
      .current.error{margin:6px 10px 6px 0;}
      .current.error a{background: rgb(231, 5, 5) !important;}
      h3 {
        font-family: "Roboto"; }
      
      .form-row {
        margin-bottom: 24px; }
        .form-row label {
          margin-bottom: 8px;
          display: block; }
        .form-row.form-group {
          display: flex; }
          .form-row.form-group .form-holder {
            width: 50%;
            margin-right: 21px; }
            .form-row.form-group .form-holder:last-child {
              margin-right: 0; }
      
      .form-holder {
        position: relative; }
        .form-holder i {
          position: absolute;
          top: 11px;
          right: 19px;
          font-size: 17px;
          color: #999; }
      

        .form-control:focus {
          border-color: var(--primary-color); }
        .form-control::-webkit-input-placeholder {
          color: #999;
          font-size: 13px; }
        .form-control::-moz-placeholder {
          color: #999;
          font-size: 13px; }
        .form-control:-ms-input-placeholder {
          color: #999;
          font-size: 13px; }
        .form-control:-moz-placeholder {
          color: #999;
          font-size: 13px; }
      
      textarea.form-control {
        padding-top: 11px;
        padding-bottom: 11px; }
      
      .option {
        color: #999; }
      
      .actions ul {
        display: flex;
        margin-top: 30px;
        justify-content: space-between;list-style: none; }
        .actions ul.step-last {
          justify-content: flex-end; }
          .actions ul.step-last li:first-child {
            display: none; }
      .actions li a {
        padding: 0;

        text-decoration: none;
        border: none;
        display: inline-flex;
        height: 51px;
        width: 135px;
        align-items: center;
        background: var(--primary-color);
        cursor: pointer;
        position: relative;
        padding-left: 41px;
        color: #fff;
        -webkit-transform: perspective(1px) translateZ(0);
        transform: perspective(1px) translateZ(0);
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;
        font-weight: 400; }
        .actions li a:before {
          content: '\f105';
          position: absolute;
          top: 14px;
          right: 41px;
          font-family: FontAwesome;
          -webkit-transform: translateZ(0);
          transform: translateZ(0); }
        .actions li a:hover {
          background: #008ed6; }
          .actions li a:hover:before {
            -webkit-animation-name: hvr-icon-wobble-horizontal;
            animation-name: hvr-icon-wobble-horizontal;
            -webkit-animation-duration: 1s;
            animation-duration: 1s;
            -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
            -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1; }
      .actions li[aria-disabled="true"] a {
        display: none; }
      .actions li:first-child a {
        background: #e6e6e6;
        color:var(--primary-color);
        
        padding-left: 48px; }
        .actions li:first-child a:before {
          content: '\f104';
          left: 26px; }
        .actions li:first-child a:hover {
          background: #ccc; }
      .actions li:last-child a {
        padding-left: 29px;
        line-height: 50px;
        display: inline-block !important;
        min-width: 300px;
        font-weight: 400; }
        .actions li:last-child a:before {
            top:1px;
          right: 30px; }
      
      .checkbox {
        position: relative; }
        .checkbox label {
          padding-left: 21px;
          cursor: pointer;
          color: #999; }
        .checkbox input {
          position: absolute;
          opacity: 0;
          cursor: pointer; }
        .checkbox input:checked ~ .checkmark:after {
          display: block; }
      
      .checkmark {
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        height: 12px;
        width: 13px;
        border-radius: 2px;
        background-color: #ebebeb;
        border: 1px solid #ccc;
        font-family: FontAwesome;
        color: #000;
        font-size: 10px;
        font-weight: bolder; }
        .checkmark:after {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          display: none;
          content: '\f26b'; }
      
      .checkbox-circle {
        margin-top: 41px;
        margin-bottom: 46px; }
        .checkbox-circle label {
          cursor: pointer;
          padding-left: 26px;
          color: #999;
          display: block;
          margin-bottom: 15px;
          position: relative; }
          .checkbox-circle label.active .tooltip {
            display: block; }
        .checkbox-circle input {
          position: absolute;
          opacity: 0;
          cursor: pointer; }
        .checkbox-circle input:checked ~ .checkmark:after {
          display: block; }
        .checkbox-circle .checkmark {
          position: absolute;
          top: 11px;
          left: 0;
          height: 14px;
          width: 14px;
          border-radius: 50%;
          background: #ebebeb;
          border: 1px solid #cdcdcd; }
          .checkbox-circle .checkmark:after {
            content: "";
            top: 6px;
            left: 6px;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #666666;
            position: absolute;
            display: none; }
        .checkbox-circle .tooltip {
          padding: 9px 22px;
          background: #f2f2f2;
          line-height: 1.8;
          position: relative;
          margin-top: 16px;
          margin-bottom: 28px;
          display: none; }
          .checkbox-circle .tooltip:before {
            content: "";
            border-bottom: 10px solid #f2f2f2;
            border-right: 9px solid transparent;
            border-left: 9px solid transparent;
            position: absolute;
            bottom: 100%; }
      
      .product {
        margin-bottom: 33px; }
      
      .item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 30px;
        border-bottom: 1px solid #e6e6e6;
        margin-bottom: 30px; }
        .item:last-child {
          margin-bottom: 0;
          padding-bottom: 0;
          border: none; }
        .item .left {
          display: flex;
          align-items: center; }
        .item .thumb {
          display: inline-flex;
          width: 100px;
          height: 90px;
          justify-content: center;
          align-items: center;
          border: 1px solid #f2f2f2; }
        .item .purchase {
          display: inline-block;
          margin-left: 21px; }
          .item .purchase h6 {
            font-family: "Roboto";
            font-size: 16px;
            margin-bottom: 4px;
            font-weight: 500; }
            .item .purchase h6 a {
              color: #333; }
        .item .price {
          font-size: 16px; }
      
      .checkout {
        margin-bottom: 44px; }
        .checkout span.heading {
          font-family: "Roboto";
          font-weight: 500;
          margin-right: 5px; }
        .checkout .subtotal {
          margin-bottom: 18px; }
        .checkout .shipping {
          margin-bottom: 19px; }
          .checkout .shipping span.heading {
            margin-right: 4px; }
        .checkout .total-price {
          font-family: "Muli-Bold";
          color: #333;
          font-weight: 700; }
      
      @-webkit-keyframes hvr-icon-wobble-horizontal {
        16.65% {
          -webkit-transform: translateX(6px);
          transform: translateX(6px); }
        33.3% {
          -webkit-transform: translateX(-5px);
          transform: translateX(-5px); }
        49.95% {
          -webkit-transform: translateX(4px);
          transform: translateX(4px); }
        66.6% {
          -webkit-transform: translateX(-2px);
          transform: translateX(-2px); }
        83.25% {
          -webkit-transform: translateX(1px);
          transform: translateX(1px); }
        100% {
          -webkit-transform: translateX(0);
          transform: translateX(0); } }
      @keyframes hvr-icon-wobble-horizontal {
        16.65% {
          -webkit-transform: translateX(6px);
          transform: translateX(6px); }
        33.3% {
          -webkit-transform: translateX(-5px);
          transform: translateX(-5px); }
        49.95% {
          -webkit-transform: translateX(4px);
          transform: translateX(4px); }
        66.6% {
          -webkit-transform: translateX(-2px);
          transform: translateX(-2px); }
        83.25% {
          -webkit-transform: translateX(1px);
          transform: translateX(1px); }
        100% {
          -webkit-transform: translateX(0);
          transform: translateX(0); } }
      @media (max-width: 1500px) {
        .wrapper {
          height: auto; } }
      @media (max-width: 1199px) {
        .wrapper {
          height: 100vh; }
      
        #wizard {
          margin-right: 40px;
          min-height: 829px;
          padding-left: 60px;
          padding-right: 60px; } }
      @media (max-width: 991px) {
        .wrapper {
          justify-content: center; }
          .wrapper .image-holder {
            display: none; }
          .wrapper form {
            width: 60%; }
      
        #wizard {
          margin-right: 0;
          padding-left: 40px;
          padding-right: 40px; } }
      @media (max-width: 767px) {
        .wrapper {
          height: auto;
          display: block; }
          .wrapper .image-holder {
            width: 100%;
            display: block; }
          .wrapper form {
            width: 100%; }
      
        #wizard {
          min-height: unset;
          padding: 70px 20px 40px; }
      
        .form-row.form-group {
          display: block; }
          .form-row.form-group .form-holder {
            width: 100%;
            margin-right: 0;
            margin-bottom: 24px; }
      
        .item .purchase {
          margin-left: 11px; } }
      
      /*# sourceMappingURL=style.css.map */
      
      

.custom-checkbox2 {
    margin-top: 10px;
    overflow: hidden;
}
      .custom-checkbox2>div {
        display: block;
        width: 33.33%;
        float: left;
        margin-bottom: 15px;
    }
    .custom-checkbox2>div label{display: inline-block;font-size: 14px;}
      /* signup form */

      .bootstrap-tagsinput{
        width: 100%;
      }
      .label-info{
        background-color: #17a2b8;
      }
      .bootstrap-tagsinput .label {
        display: inline-block;
        padding:5px 10px;
        font-size: 100%;
        font-weight: 700;
        line-height: 1.5;
        text-align: center;
        white-space: nowrap;
        vertical-align: baseline;
        border-radius: .15rem;
        transition: color .15s ease-in-out,background-color .15s ease-in-out;
        border-color: .15s ease-in-out,box-shadow .15s ease-in-out;
        background: #00306d url('../../public/assets/images/register-img.png');
          background-size: cover;
          background-position: center;
          position: relative;
      }

      .error{font-size: 11px;color: rgb(231, 5, 5);margin-bottom: 0px;    margin-top: 0px;    font-weight: normal;}        
        .errors ul,.errors ul li{font-size: 12px;color: rgb(231, 5, 5);padding:0;}
        .spinner{display:none;}