@font-face {
   font-family: "IRANSansFaNum";
   src: url("../fonts/IRANSansFaNum.eot");
   src: url("../fonts/IRANSansFaNum.eot?#iefix") format("embedded-opentype"), url("../fonts/IRANSansFaNum.otf") format("opentype"), url("../fonts/IRANSansFaNum.svg") format("svg"), url("../fonts/IRANSansFaNum.ttf") format("truetype"), url("../fonts/IRANSansFaNum.woff") format("woff"), url("../fonts/IRANSansFaNum.woff2") format("woff2");
   font-weight: normal;
   font-style: normal;
}

@font-face {
   font-family: "IRANSansFaNum-Bold";
   src: url("../fonts/IRANSansFaNumBold.eot"); /* IE9 Compat Modes */
   src: url("../fonts/IRANSansFaNumBold.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
   url("../fonts/IRANSansFaNumBold.otf") format("opentype"), /* Open Type Font */
   url("../fonts/IRANSansFaNumBold.svg") format("svg"), /* Legacy iOS */
   url("../fonts/IRANSansFaNumBold.ttf") format("truetype"), /* Safari, Android, iOS */
   url("../fonts/IRANSansFaNumBold.woff") format("woff"), /* Modern Browsers */
   url("../fonts/IRANSansFaNumBold.woff2") format("woff2"); /* Modern Browsers */
   font-weight: normal;
   font-style: normal;
}

dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
   margin: 0;
   padding: 0;
   border: 0;
   vertical-align: middle;
   outline: none;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
   display: block;
}

a, a:hover, a:focus {
   text-decoration: none;
   outline: none;
}

button:focus {
   outline: none;
}

* {
   direction: rtl;
}
.carousel-indicators {
   right: 0;
   left: 0;
   margin-right: 0;
   margin-left: 0;
   padding-left: 0;
}
.ui-widget button, .ui-widget input, .ui-widget select, .ui-widget textarea {
   font-family: 'IRANSansFaNum', Tahoma;
}

body {
   direction: rtl;
   font-family: 'IRANSansFaNum', Tahoma;
   font-size: 13px;
   -webkit-font-smoothing: antialiased;
   overflow-x: hidden;
   text-align: right;
   color: rgba(0,0,0,.87);
}

:root {
   --blue-color: #00a8bd;
}

.ui-widget {
   font-family: 'IRANSansFaNum', Tahoma !important;
}

.font14 {
   font-size: 14px;
}

main {
   min-height: 350px;
}

.mt10 {
   margin-top: 10px;
}

.ml5 {
   margin-left: 5px;
}

.ml10 {
   margin-left: 10px;
}

h1, h2, h3, h4, h5 {
   font-family: "IRANSansFaNum-Bold",Tahoma;
   user-select: none;
   -webkit-user-select: none;
}

.alert-dismissible {
   padding-right: 1.25rem;
   padding-left: 4rem;
}

   .alert-dismissible .close {
      left: 0;
      right: auto;
   }

.breadcrumb-item + .breadcrumb-item {
   padding-left: 0;
   padding-right: 0.5rem;
}

   .breadcrumb-item + .breadcrumb-item::before {
      padding-left: 0.5rem;
      padding-right: 0;
   }

.navbar-brand {
   margin-right: 0;
   margin-left: 10px;
   margin-top: 8px;
}

.rtl .ml-1, [dir="rtl"] .ml-1 {
   margin-right: 0 !important;
   margin-left: 0.25rem !important;
}

.rtl .ml-2, [dir="rtl"] .ml-2 {
   margin-right: 0 !important;
   margin-left: 0.5rem !important;
}

[dir="rtl"] .dropdown-toggle::after {
   display: none;
}

.number-stage {
   width: 30px;
   height: 30px;
   background-color: var(--blue-color);
   color: #fff;
   border-radius: 100%;
   text-align: center;
   display: inline-block;
   margin-left: 5px;
   line-height: 30px;
}
.form-check-input{
   margin-top:3px;
}
.logo {
   display: inline-flex;
   align-items: center;
   margin: 1.2rem 0;
   position: absolute;
   left: 30px;
   top: 0;
}

   .logo img {
      width:100%;
   }

   .logo span {
      color: var(--blue-color);
      font-size: 18px;
      margin-left: 5px;
   }

.btn-back {
   color: #212121;
   font-size: 14px;
   display: inline-block;
}

   .btn-back:hover {
      color: var(--blue-color);
   }

   .btn-back i {
      vertical-align: middle;
      margin-left: 5px;
   }

   .btn-back:hover i, .btn-back:focus i {
      -ms-animation: shake 1s ease-in-out;
      -webkit-animation: shake 1s ease-in-out;
      -moz-animation: shake 1s ease-in-out;
      -o-animation: shake 1s ease-in-out;
      -webkit-animation-iteration-count: infinite;
      animation-iteration-count: infinite;
      -moz-animation-iteration-count: infinite;
      -o-animation-iteration-count: infinite;
   }

@keyframes shake {
   0%, 100% {
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      transform: translateX(0);
   }

   30%, 70% {
      -webkit-transform: translateX(7px);
      -ms-transform: translateX(7px);
      transform: translateX(7px);
   }

   40%,60% {
      -webkit-transform: translateX(-5px);
      -ms-transform: translateX(-5px);
      transform: translateX(-5px);
   }
}

@-moz-keyframes shake {
   0%, 100% {
      -moz-transform: translateX(0);
      transform: translateX(0);
   }

   30%, 70% {
      -moz-transform: translateX(7px);
      transform: translateX(7px);
   }

   40%,60% {
      -moz-transform: translateX(-5px);
      transform: translateX(-5px);
   }
}

@-ms-keyframes shake {
   0%, 100% {
      -ms-transform: translateX(0);
      transform: translateX(0);
   }

   30%, 70% {
      -ms-transform: translateX(7px);
      transform: translateX(7px);
   }

   40%,60% {
      -ms-transform: translateX(-5px);
      transform: translateX(-5px);
   }
}

@-webkit-keyframes shake {
   0%, 100% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
   }

   30%, 70% {
      -webkit-transform: translateX(7px);
      transform: translateX(7px);
   }

   40%,60% {
      -webkit-transform: translateX(-5px);
      transform: translateX(-5px);
   }
}



.wrapper-login {
   position: relative;
   width: 100%;
   height: 100%;
}
    @media (max-width:400px){
        .wrapper-login header .container-fluid, col-7, .wrapper-login header col-sm-9, .wrapper-login header col-5, .wrapper-login header col-sm-3 {
            padding: 0;
        }
    }


.col-left {
   position: fixed;
   top: 0;
   left: 0;
   bottom: 0;
   overflow: auto;
   width: 40vw;
   /*box-shadow: 0 1px 1px rgba(0,0,0,.24),0 4px 4px rgba(0,0,0,.12);*/
   z-index: 1;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0 30px 40px;
   text-align: center;
   background-color: #F6F7F9;
}

.col-right {
   margin-left: 40vw;
   min-height: 100%;
   position: relative;
}

.colorGray {
   color: #777;
}

#carouselSlide {
   position: relative;
}

.carousel-caption {
   color: #212121;
   position: relative;
   right: 0;
   left: 0;
}

   .carousel-caption h5 {
      margin-top: 15px;
      font-size: 23px;
   }

   .carousel-caption p {
      font-size: 14px;
      color: #777;
      line-height: 25px;
      min-height: 75px;
   }

.carousel-indicators li {
   background-color: var(--blue-color);
}

.title-page {
   margin-top: 20px;
   margin-bottom: 37px;
   font-size: 26px;
}

.signup-form {
   padding: 1.8rem 4rem;
   height: 100%;
}

.login-form, .signup-message {
   width: 342px;
   max-width: 100%;
   margin: 50px auto 20px;
}

.signup-message {
   width: 380px;
   max-width: 100%;
}

   .signup-message .title-page {
      margin-top: 125px;
   }

.message-signup {
   color: #3F4254;
   font-size: 17px;
   line-height: 32px;
}

.seepanel {
   margin-right: 10px;
   border: 1px solid var(--blue-color);
   color: var(--blue-color);
   font-size: 15px;
   padding: 7px 25px;
   transition: 0.5s;
   height: 40px;
}

.passToggle, .passToggle2 {
   position: absolute;
   left: 24px;
   top: 10px;
   font-size: 17px;
   cursor: pointer;
}

.col-left h1 {
   font-size: 1.66rem;
}

   .col-left h1 span {
      color: #ffd500;
      font-size: 43px;
      position: relative;
      top: 8px;
   }

.btn-default {
   color: #333;
   background-color: #fff;
   border-color: #ccc;
   cursor: pointer;
}

.hide {
   display: none !important;
}

.form-control {
   font-size: 14px;
}

.desc-forgot {
   margin-bottom: 2rem;
   line-height: 25px;
}

.sendCode {
   background: none;
   color: #007bff;
   border: none;
   padding: 0;
}

.phonContainer {
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-size: 14px;
}

   .phonContainer .phone {
      font-size: 16px;
   }

#otp {
   direction: ltr;
}

.form-control {
   -webkit-transition: none;
   transition: none;
   width: 37px;
   height: 37px;
   padding: 0;
   font-size: 18px;
}

   .form-control:focus {
      color: #3F4254;
      background-color: #ffffff;
      border-color: #884377;
      outline: 0;
   }

   .form-control.form-control-solid {
      background-color: #f1f1f1;
      border-color: #F3F6F9;
      color: #3F4254;
      transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
   }

      .form-control.form-control-solid:active,
      .form-control.form-control-solid.active,
      .form-control.form-control-solid:focus,
      .form-control.form-control-solid.focus {
         background-color: #EBEDF3;
         border-color: #EBEDF3;
         color: #3F4254;
         transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
      }

.formContainer .input-container, .formContainer .form-group {
   position: relative;
}

.select2-container--default .select2-selection--single {
   border-radius: 3px;
}

.select2-container .select2-selection--single {
   height: 38px;
}

.formContainer .input, .input {
   border: 1px solid #ccc;
   outline: none;
   transition: .2s ease-in-out;
   box-sizing: border-box;
   padding: 0 15px;
   border-radius: 3px;
   width: 100%;
   height: 38px;
}

.formContainer label, .input-container label {
   top: 7px;
   right: 25px;
   color: #616161;
   display: flex;
   align-items: center;
   position: absolute;
   font-size: 1rem;
   cursor: text;
   transition: .2s ease-in-out;
   box-sizing: border-box;
   padding: 0 3px;
}

.formContainer .input, .input,
.formContainer label, .input-container label {
   font-size: 14px;
   background-color: #fff;
}


   .formContainer .input:focus, .input:focus {
      border: 1px solid var(--blue-color);
   }

   .formContainer .input:disabled {
      cursor: not-allowed;
   }

      .formContainer .input:focus + label, .formContainer .input:disabled + label,
      .formContainer label.lableFocus, .input-container label.lableFocus, .input:focus + label {
         color: var(--blue-color);
         font-size: .8rem;
         top: -11px;
         pointer-events: none;
      }

.passToggle, .passToggle2 {
   position: absolute;
   left: 24px;
   top: 10px;
   font-size: 17px;
   cursor: pointer;
}

.btnSignupCustomer, .btnSignupSupplier, .btn-login {
    background-color: var(--blue-color);
    color: #fff;
    font-size: 15px;
    padding: 7px 45px;
    transition: 0.5s;
    height: 40px;
}

    .btnSignupCustomer:hover, .btnSignupCustomer:focus,
    .btnSignupSupplier:hover, .btnSignupSupplier:focus,
    .btn-login:hover, .btn-login:focus,
    .seepanel:hover, .seepanel:focus {
        color: #fff;
        background-color: #0297aa;
        transform: translateY(3px);
    }

.border-top-gray {
   border-top: 1px solid #eee;
   padding-top: 10px;
}

.loginContainer {
   width: 340px;
   margin: 100px auto;
   max-width: 100%;
}

.mr5 {
   margin-right: 5px;
}

.footer {
   border-top: 1px solid #ddd;
   padding: 1.2rem 4rem;
}

.ul_footer li {
   margin-bottom: 10px;
}

   .ul_footer li a {
      color: #242424;
      font-size: 14px;
      display: inline-block;
      padding: 0 10px;
      transition: 0.5s;
      padding-right: 0;
   }

      .ul_footer li a:hover, .ul_footer li a:focus {
         color: var(--blue-color);
      }

.faq-category {
   font-size: 20px;
   margin: 10px auto;
   color: #242424;
}

.acc-trigger {
   margin-bottom: 10px;
   border-bottom: 1px solid #eee;
}

.acc-title {
   padding: 10px;
   cursor: pointer;
   font-size: 15px;
   font-weight: bold;
   color: #515151
}

   .acc-title i {
      color: var(--blue-color);
      font-size: 20px !important;
      vertical-align: middle;
      margin-left: 5px;
   }

.acc-container {
   padding: 5px 15px;
   color: #6a6a6a;
   display: none;
}

   .acc-container p {
      margin-bottom: 10px;
      font-size: 14px;
      line-height: 26px;
   }

.txtarea {
   height: 100px !important;
   resize: none;
}

.ul-contact li {
   margin-bottom: 20px;
   font-size: 15px;
}

   .ul-contact li i {
      color: var(--blue-color);
      font-size: 21px;
      margin-left: 10px;
      vertical-align: middle;
   }

.col-leftContact {
   align-items: inherit;
   padding-top: 103px;
   display:flex;
   flex-direction:column;
} 
.socialNetworksFooter .social-network {
   font-size: 22px;
   padding: 0 7px;
   color: #242424;
}

   .socialNetworksFooter .social-network:hover, .socialNetworksFooter .social-network:focus {
      color: var(--blue-color);
   }

.social-network i {
   transition: 0.5s;
   -webkit-transition: 0.5s;
   -moz-transition: 0.5s;
   -ms-transition: 0.5s;
   -o-transition: 0.5s;
}

.social-network:hover i, .social-network:focus i {
   transform: rotateY(180deg);
}

.halfcircle {
   position: absolute;
   width: 200px;
   background-color: #00a8bd2b;
   height: 200px;
   left: 0;
   bottom: 0;
   border-radius: 0 100% 0 0;
}

   .halfcircle .circle {
      position: absolute;
      width: 100px;
      background-color: rgba(255,242,224,0.8);
      height: 100px;
      left: 74px;
      bottom: 85px;
      border-radius: 100%;
   }

.border-bottom-gray {
   border-bottom: 1px solid #ddd;
   padding-bottom: 10px;
}
.dnt_Captcha {
    text-align: right;
}
.dnt_Captcha #dntCaptchaImg {
}
    .dnt_Captcha #DNTCaptchaInputText {
        width: 100%;
        height: 41px;
        padding: .375rem .75rem;
        font-size: 13px;
    }
@media screen and (min-width: 100px) and (max-width:991.98px) {
    .col-right {
      margin-left: 0;
   }

   .btn-back {
      margin-top: 10px;
   }

   .col-left, .circle, .halfcircle {
      display: none !important;
   }

   .logo {
      position: relative;
      left: initial;
      margin: 10px 0;
   }

   .title-page {
      font-size: 25px;
      margin-top: 15px;
   }

   .signup-form {
      padding: 1.2rem 4rem;
      height: auto;
   }

   .loginContainer {
      margin: 10px auto;
   }

   .login-form {
      margin: 0 auto;
   }

   .title-contact {
      font-size: 25px;
   }
}

@media screen and (min-width: 100px) and (max-width:767.98px) {

   .title-page {
      font-size: 22px;
      margin-top: 18px;
   }

   .signup-message .title-page {
      margin-top: 18px;
   }
}

@media screen and (min-width: 100px) and (max-width:576.98px) {
   .title-page, .title-contact {
      font-size: 18px;
      margin-top: 0;
   }

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

   .signup-form, .footer {
      padding: 1.2rem 2rem;
      height: auto;
   }

   .message-signup {
      font-size: 16px;
   }

   .acc-title {
      font-size: 14px;
   }

   .faq-category {
      font-size: 18px;
   }
}

@media screen and (min-width: 100px) and (max-width:450.98px) {
   .title-page {
      font-size: 20px;
      margin-top: 10px;
   }

   .signup-form, .footer {
      padding: 1.2rem 1.2rem;
   }
}

@media screen and (min-width: 100px) and (max-width:380.98px) {
   .btnSignupSupplier {
      padding: 7px 30px;
   }

   .seepanel {
      padding: 7px 15px;
   }
}