html,body{
    direction:rtl;
    margin:0;
    font-family:FontFace1,tahoma;
	font-size:14px;
}
body {
	background: url('../../images/bg-login.jpg') no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size:  100% 100%;
}
.btn-lg, .btn-group-lg > .btn {
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33;
  border-radius: 6px;
}
.btn {
  display: inline-block;
  margin-bottom: 0;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  white-space: nowrap;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  border-radius: 4px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.btn-success {
  background-color: #06d79c;
  border-color: #06d79c;
  color: #fff;
  
}
.btn-group-lg > .btn, .btn-lg {
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.3333333;
  border-radius: 6px;
}
 @font-face {
     font-family: "FontFace1";
     src: url("../fonts/partosys.eot");
     src: url("../fonts/partosys.woff") format("woff"), url("../fonts/partosys.ttf") format("truetype");
     font-weight: normal;
     font-style: normal;
}

 @font-face {
     font-family: "partosys";
     src: url("../fonts/partosys.eot");
     src: url("../fonts/partosys.woff") format("woff"), url("../fonts/partosys.ttf") format("truetype");
     font-weight: normal;
     font-style: normal;
}
.sweet-alert h2 {
	font-family: "partosys";
}
input,a,button,select,label,option{
    font-family:FontFace1,sans-serif
}
a{
    text-decoration:none
}
a:hover{
    text-decoration:none;
    border-bottom:solid 0px #2a208d
}

.login-button:hover{
    background-color:#5d53f7
}
.otp-button:hover{
    background-color:#5d53f7
}
.start-timer-button:hover{
    background-color:#ff1623
}
input:focus,select:focus,button:focus,a:focus{
    outline:0px solid #2a208d
}
.container{
    width:100%;
    height:100%;
    display:flex;
}
.logo{
    position:absolute;
    right:28px;
    top:28px;
	width: 400px;
}
.left-panel{
    width:50vw;
    height:100vh;
    background-image:url("images/building-web-lower.jpg");
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center center
	
}
.right-panel{
    width:50vw;
    height:100vh;
    background-color:white;
    position:relative;
	opacity: 0.8;
}
.partially-span{
    font-weight:bold
}
.center-panel{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:321px;
    height:auto;
    margin:0 21px 17px 0;
    padding:36px 32px 20px 31px;
    border-radius:4px;
    -webkit-backdrop-filter:blur(17px);
    backdrop-filter:blur(17px);
    box-shadow:0 35px 50px 0 rgba(0,0,0,0.16);
    background-color:#fff
}
.center-panel>.title{
    font-family:FontFace1,sans-serif;
    text-align:center;
    color:#2a208d
}
.center-panel>form>.login-method{
    width:100%;
    color:#8d8d8d;
    padding:13px 16px 13px 72px;
    border-radius:3px;
    border:solid 1px rgba(0,0,0,0.16);
    background-color:#fff;
    margin-bottom:20px;
    background:url("data:image/svg+xml,<svgheight='10px'width='10px'viewBox='001616'fill='%23000000'xmlns='http://www.w3.org/2000/svg'><pathd='M7.24711.142.4515.658C1.8855.0132.34543.2044h9.592a11001.7531.659l-4.7965.48a11001-1.5060z'/></svg>") no-repeat;
    background-position:.75rem center !important;
    -moz-appearance:none !important;
    -webkit-appearance:none !important;
    appearance:none !important
}
option{
    font-size:16px;
    color:#8d8d8d
}
.center-panel>form>.username{
    box-sizing:border-box;
    width:100%;
    padding: 9px 16px 10px 10px;
    border-radius:3px;
    border:solid 1px rgba(0,0,0,0.16);
    background-color:#fff;
    margin-bottom:20px
}
.center-panel>form>.password{
    box-sizing:border-box;
    width:100%;
    padding:9px 16px 10px 72px;
    border-radius:3px;
    border:solid 1px rgba(0,0,0,0.16);
    background-color:#fff;
    margin-bottom:20px
}
.digit-group{
    direction:ltr;
    text-align:center
}
.digit-group>input{
    width:37px;
    height:50px;
    background-color:rgba(255,255,255,0);
    border:0;
    border-bottom:solid 1px #ccc;
    line-height:50px;
    text-align:center;
    font-size:24px;
    font-weight:200;
    margin:0 4px
}
.digit-group>input:focus{
    outline:0;
    border-color:#6c63ff
}
.digit-group>.splitter{
    padding:0 5px;
    color:white;
    font-size:24px
}
::-ms-reveal{
    display:none
}
.captchaImageContainer{
    float:right;
    margin-right:5px
}
.captchaValueContainer{
    float:right;
    width:160px
}
.captchaValue{
    box-sizing:border-box;
    width:100%;
    padding:9px 16px 10px 16px;
    border-radius:3px;
    border:solid 1px rgba(0,0,0,0.16);
    background-color:#fff;
    margin-bottom:20px
}
.g-recaptcha{
    margin-bottom:20px
}
.clear{
    clear:both
}
.forgotten-password{
    font-size:smaller;
    font-weight:normal;
    font-stretch:normal;
    font-style:normal;
    line-height:1.71;
    letter-spacing:normal;
    text-align:right;
    color:#8d8d8d !important;
    border-radius:4px;
    padding:5px
}
.my-iran-url{
    font-size:smaller;
    font-weight:normal;
    font-stretch:normal;
    font-style:normal;
    line-height:1.71;
    letter-spacing:normal;
    text-align:right;
    color:green !important;
    border-radius:4px;
    padding:5px
}
.login-button{
    margin: 20px 2px 20px 1px;
    padding:6px 39.8px 9px 35.2px;
    border-radius:4px;
    border:0;
    background: rgba(20,147,212,.8);
    color:white;
    font-size:medium;
	width: 100%;
}
.login-button:hover{
    margin: 20px 2px 20px 1px;
    padding:6px 39.8px 9px 35.2px;
    border-radius:4px;
    border:0;
    background: rgba(81, 169, 215, 0.8);
    color:white;
    font-size:medium;
	width: 100%;
}


.login-button-back{
    margin: 20px 2px 20px 1px;
    padding:6px 39.8px 9px 35.2px;
    border-radius:4px;
    border:0;
    background: rgba(212, 128, 20, .8);
    color:white;
    font-size:medium;
	width: 50%;
}

.otp-button{
    margin:40px 0 30px 0;
    padding:6px 39.8px 9px 35.2px;
    border-radius:4px;
    border:0;
    background-color:#6c63ff;
    color:white;
    font-size:medium;
    width:100%
}
.otp-time-div{
    font-size:13px;
    font-weight:bold
}
.otp-remained-text-div{
    width:50%;
    float:right
}
.otp-remained-time-div{
    width:50%;
    float:left;
    direction:ltr;
    color:#3acc6c
}
.panel-header{
    position:absolute;
    right:0;
    top:0
}
.right-panel-content{
    width:100%;
    margin:0;
    position:absolute;
    top:50%;
    transform:translateY(-50%)
}
.right-panel-footer{
    position:absolute;
    right:0;
    bottom:0;
    color:#8d8d8d;
    width:100%
}
.media{
    width:210px;
    height:65px;
    right:0;
    display:flex;
    border-top-left-radius:45px;
    border-bottom-left-radius:45px;
    background-color:#0101cd;
    margin-bottom:50px
}
.media>a{
    align-self:center;
    margin-right:30px
}
.suggestion{
    margin-bottom:50px;
    padding-right:20px;
    font-size:13px;
    text-wrap:normal
}
.copyright-text{
    text-align:left;
    padding-left:30px;
    font-size:small
}
div.list{
    counter-reset:list-number
}
div.list div{
    max-width:calc(100% - 210px) !important;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis
}
div.list div:before{
    counter-increment:list-number;
    content:counter(list-number);
    margin-right:8px;
    margin-left:8px;
    margin-bottom:8px;
    width:33px;
    height:33px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:16px;
    background-color:#47c7ca;
    border-radius:50%;
    color:#fff
}
.login-line{
    border-top:1px solid #cacaca;
    margin-left:-23px;
    margin-right:-24px
}
.registration-text{
    color:#8d8d8d !important;
    font-size:smaller
}
@media only screen and (max-width:768px){
    .right-panel{
        width:100%;
        background-color:#eee
    }
    .panel-header{
        width:100%
    }
    .logo{
        text-align:center;
        right:0;
        width:100%
    }
    .logo-src{
        content:url("./images/logo-mobile-tablet.png")
    }
    .left-panel{
        display:none
    }
    .right-panel-content{
        display:none
    }
    .media{
        width:100%;
        border-top-left-radius:0;
        border-bottom-left-radius:0;
        background-color:#0101cd;
        justify-content:space-evenly
    }
    .center-panel{
        top:130px;
        transform:translate(-50%)
    }
    .copyright-text{
        text-align:center;
        padding-left:0
    }
    .media>a{
        margin-right:0
    }
}
.warningMessages{
    font-size:small
}
.errorMessages{
    font-size:small
}
.my-notify-warning,.my-notify-error{
    padding:10px;
    margin:10px 0
}
.my-notify-warning:before,.my-notify-error:before{
    font-style:normal;
    font-weight:400;
    speak:none;
    display:inline-block;
    text-decoration:inherit;
    width:1em;
    margin-right:.2em;
    text-align:center;
    font-variant:normal;
    text-transform:none;
    line-height:1em;
    margin-left:.2em;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale
}
.my-notify-warning:before{
    content:'\26A0'
}
.my-notify-error:before{
    content:'\2716'
}
.my-notify-warning{
    color:#9f6000;
    background-color:#feefb3
}
.my-notify-error{
    color:#d8000c;
    background-color:#ffd2d2
}
.radio-container{
    display:inline;
    position:relative;
    padding-right:30px;
    padding-left:25px;
    margin-bottom:12px;
    cursor:pointer;
    font-size:smaller;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none
}
.radio-container input{
    position:absolute;
    opacity:0;
    cursor:pointer;
    height:0;
    width:0
}
.checkmark{
    position:absolute;
    top:0;
    right:0;
    height:20px;
    width:20px;
    background-color:#eee;
    border-radius:50%
}
.radio-container:hover input ~ .checkmark{
    background-color:#ccc
}
.radio-container input:checked ~ .checkmark{
    background-color:#6c63ff
}
.checkmark:after{
    content:"";
    position:absolute;
    display:none
}
.radio-container input:checked ~ .checkmark:after{
    display:block
}
.radio-container .checkmark:after{
    top:7px;
    left:7px;
    width:6px;
    height:6px;
    border-radius:50%;
    background:white
}

 .stl0 {
     border: 1px solid #000;
}
 .st1 {
     text-align: right;
     direction: rtl;
     color:#000;
     border: 0px solid #ccc;
     padding:8px;
    font-family: FontFace1;
     font-size:16px;
}
 .stl2 th{
     border: 1px solid #ccc;
    color:#000;
     background: #f8f8f8;
    padding:5px;
    font-family: FontFace1;
     font-size:15px;
}
 .stl2 td{
     border: 1px solid #ccc;
     background: #f8f8f8;
    padding:8px;
     text-align: right;
     direction: rtl;
    color:#000;
}
 #catids{
     background:#000 !important;
}
 #overlay {
     position: fixed;
     height: auto;
     width: 100%;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     background: rgba(0,0,0,0.8);
     display: none;
     overflow: auto;
}
 #popup {
     max-width: 600px;
     width: 80%;
     max-height: auto;
     height: auto;
     padding: 20px;
     position: relative;
     background: #fff;
     margin: 20px auto;
}
 #close {
     position: absolute;
     top: 10px;
     right: 10px;
     cursor: pointer;
     color: #000;
}
.centerlogo {
margin: 0 auto;
width: 100%;
text-align: center;	
}




.login-button {
  position: relative;
  border: none;
  outline: none;
  cursor: pointer;
}

.login-button:active {
  background: #007a63;
}

.button__text {
  color: #ffffff;
  transition: all 0.2s;
}

.button--loading .button__text {
  visibility: hidden;
  opacity: 0;
}

.button--loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  border: 4px solid transparent;
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: button-loading-spinner 1s ease infinite;
}
@keyframes button-loading-spinner {
  from {
    transform: rotate(0turn);
  }
  to {
    transform: rotate(1turn);
  }
}

.form-control-feedback {
  top: 22px;
  color: #999;
}
.form-control-feedback {
position: relative;
top: 0;
right: 0;
width: 41px;
text-align: center;
margin-top: -50px;
float: left;
}