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

  @font-face {
    font-family: Shabnam;
    src: url('../fonts/Shabnam-Bold.eot');
    src: url('../fonts/Shabnam-Bold.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Shabnam-Bold.woff2') format('woff2'),
         url('../fonts/Shabnam-Bold.woff') format('woff'),
         url('../fonts/Shabnam-Bold.ttf') format('truetype');
    font-weight: bold;
  }

  @font-face {
    font-family: Shabnam;
    src: url('../fonts/Shabnam-Thin.eot');
    src: url('../fonts/Shabnam-Thin.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Shabnam-Thin.woff2') format('woff2'),
         url('../fonts/Shabnam-Thin.woff') format('woff'),
         url('../fonts/Shabnam-Thin.ttf') format('truetype');
    font-weight: 100;
  }

  @font-face {
    font-family: Shabnam;
    src: url('../fonts/Shabnam-Light.eot');
    src: url('../fonts/Shabnam-Light.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Shabnam-Light.woff2') format('woff2'),
         url('../fonts/Shabnam-Light.woff') format('woff'),
         url('../fonts/Shabnam-Light.ttf') format('truetype');
    font-weight: 300;
  }

  @font-face {
    font-family: Shabnam;
    src: url('../fonts/Shabnam-Medium.eot');
    src: url('../fonts/Shabnam-Medium.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Shabnam-Medium.woff2') format('woff2'),
         url('../fonts/Shabnam-Medium.woff') format('woff'),
         url('../fonts/Shabnam-Medium.ttf') format('truetype');
    font-weight: 500;
  }
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,nav ul,nav 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;font-size:100%;font:inherit;vertical-align:baseline;}
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
ol,ul{list-style:none;margin:0;padding:0;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}
/* start editing from here */
a{text-decoration:none;}
.txt-rt{text-align:right;}/* text align right */
.txt-lt{text-align:left;}/* text align left */
.txt-center{text-align:center;}/* text align center */
.float-rt{float:right;}/* float right */
.float-lt{float:left;}/* float left */
.clear{clear:both;}/* clear float */
.pos-relative{position:relative;}/* Position Relative */
.pos-absolute{position:absolute;}/* Position Absolute */
.vertical-base{	vertical-align:baseline;}/* vertical align baseline */
.vertical-top{	vertical-align:top;}/* vertical align top */
.underline{	padding-bottom:5px;	border-bottom: 1px solid #eee; margin:0 0 20px 0;}/* Add 5px bottom padding and a underline */
nav.vertical ul li{	display:block;}/* vertical menu */
nav.horizontal ul li{	display: inline-block;}/* horizontal menu */
img{max-width:100%;}
/*end reset*/
body {
    font-family: Shabnam, sans-serif;
    display: flex;
    direction: rtl;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #ffffff;
    color: #333333;
}
.ltr{
    direction: ltr;
}
.main{

}
.container {
    background: #fdfdfd;
    padding: 20px;
    border-radius: 8px;
    border:  1px solid #dddddd;
    text-align: center;
}
.login-method{
    display: flex;
}
.login-method li{
    width: 50%;
    text-align: center;
}
.login-method li button{
    font-family: Shabnam, sans-serif;
    display: block;
    padding: 10px 10px;
    background-color: #ddd;
    border-radius: 5px 5px 5px 0;
    border: none;
    column-gap: 5;
    width: 100%;
    cursor: pointer;
}
.login-method li.active-btn button{
    background-color: #666;
    color: #fff;
}
h2 {
    margin-bottom: 10px;
}
.alert {
    border-radius: 5px;
    padding: 15px 8px;
    margin: 20px 0;
    position: relative;
    font-size: 13px ;
    padding-left: 8px;
}

.alert p {
    margin: 0;
    font-size: 13px ;
}

.alert::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
}

.alert.alert-warning {
    background-color: #ffdddd;
    border-left: 6px solid #f44336;
}

.alert.alert-warning::before {
    content: '';
    color: #f44336;
}

.alert.alert-success {
    background-color: #ddffdd;
    border-left: 6px solid #4CAF50;
}

.alert.alert-success::before {
    content: '';
    color: #4CAF50;
}

.alert.alert-info {
    background-color: #e7f3fe;
    border-left: 6px solid #2196F3;
}

.alert.alert-info::before {
    content: '';
    color: #2196F3;
}
.time-out{
  font-size: 13px;
}
.form-content{
    min-width: 300px;
    width: 320px;
    max-width: 90%;    
}
.text-center{
  text-align: center;
}
.input-container {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    gap: 1px;
    margin-bottom: 20px;
    direction: ltr;
    width: 100%;
}
.custom_logo{
  max-width: 100%;
  max-height: auto;
  margin: o auto;
}
.digit-input-container {
    display: flex;
    justify-content: center;
    gap: -2px;
    border-radius: 5px;
    padding-left: 5px;
    padding-right: 5px;
    min-width: 241px
}
.digit-input {
    width: 20px;
    height: 38px;
    line-height: 38px;
    text-align: left;
    font-size: 24px;
    font-weight: bold;
    border: 0px;
    margin: 0;
    padding-right: 0;
    padding-left: 0;
    letter-spacing: 5px;
    background-color: #f8f8f8;
    border: none;
    border-radius: 5px;
    color: #181818;
    font-family: Shabnam, sans-serif;
    outline: none;
    -webkit-appearance: none; /* حذف استایل پیش‌فرض در مرورگرهای Webkit */
    -moz-appearance: none;    /* حذف استایل پیش‌فرض در فایرفاکس */
    appearance: none;    
}
.big-digits{
    width: 210px !important;
}
.digit-input::placeholder{
    border: none;
}
.otp-input {
    width: 40px;
    font-family: Shabnam, sans-serif;
    height: 40px;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    margin: 0;
    background-color: #eeeeee;
    border: 1px solid #cccccc;
    border-radius: 4px;
    color: #555555;
}
.email-input{
    font-size: 18px;
    text-align: center;
}
.btn {
    padding: 5px 20px;
    line-height: 32px;
    border: none;
    border-radius: 4px;
    background-color: #007bff;
    color: white;
    font-size: 15px;
    cursor: pointer;
    max-width: 220px;
    margin: 0 auto;
    text-align: center;
    font-family: Shabnam, sans-serif;
}

.btn:hover {
    background-color: #0056b3;
}
#input-field-display {
    margin-top: 20px;
    font-size: 16px;
    margin-bottom: 15px;
}
.form-group{
    display: block;
    max-width: 100%;
    margin-bottom: 5px;
}
.signup-fields .form-group label {
  font-weight: 500;
  text-transform: capitalize;
  margin-bottom: 6px;
  color: #181818;
  display: block;
  text-align: right;
  font-size: 13px;
}
input.form-control {
  width: 98%;
  background-color: #ffffff;
  padding: 10px 1%;
  border: 1px solid #e5e5e5;
  margin-bottom: 2px;
  border-radius: 4px;
  font-family: Shabnam, sans-serif;
  color: #181818;
}
.signup-fields .form-group.invalid input{
    border: 1px solid #ff0000;
}
.signup-fields .error-message{
    font-size: 11px;
    padding: 0;
    margin: 0;
    text-align: right;
    color: #ff0000;
    display: block;
}
.error-message{
    color: #ff0000;
}
.warning-message{
    color: #e55a16;
}
.hidden {
    display: none;
}