@charset "utf-8";
html, body {
    background-color: #f8f8f8;
    color: #5d5d5d;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	direction: rtl;
    margin: 0;
    padding: 0 0 50px 0;
	font-size: 16px;
	min-width: 330px;
}
*, *:before, *:after {
  box-sizing: border-box;
}
input:focus,_act
select:focus,
textarea:focus,
button:focus {
outline: 0;
outline: none;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
/* Change the white to any color ;) */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
-webkit-box-shadow: 0 0 0 35px white inset !important;
}
input, textarea, select{
	outline: none;
	color: #000;	
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 16px;
}
a{
	text-decoration: none;
	border: none;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition:    all .2s ease-in-out;
    -o-transition:      all .2s ease-in-out;
    -ms-transition:     all .2s ease-in-out;
    transition:         all .2s ease-in-out;
}
a:hover{
	text-decoration: none;
	border: none;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition:    all .2s ease-in-out;
    -o-transition:      all .2s ease-in-out;
    -ms-transition:     all .2s ease-in-out;
    transition:         all .2s ease-in-out;
}
.container {
    width: 100%;
    margin: 0 auto;
	padding: 0 10px;
}

.box {
  text-align: center;
  position: relative;
  background: #fff;
  height: 5px;
  width: 100%;
  margin: 0 0 100px 0;
}

.box:after {
  background: linear-gradient(to right, #bcbcbc 20%,#ffcd02 20%, #ffcd02 50%, #DA1C5C 50%, #DA1C5C 75%, #65c1ac 75%);
  position: absolute;
  content: '';
  height: 4px;
  right: 0;
  left: 0;
  top: 0;
}
h1 {
	margin: 0 auto 60px auto;
	display: block;
	text-align: center;
}
h1 a {
    font-size: 40px;
    font-weight: 700;
    color: #666;
    letter-spacing: -0.02em;
    margin: 0 auto 150px auto;
}
h1 a:hover {
    font-size: 40px;
    font-weight: 700;
    color: #65c1ac;
    margin: 0 auto 150px auto;
}
.cbut {
    margin: 60px auto 0 auto;
	width: 120px;
	height: 40px;
	line-height: 40px;
    border-radius: 5px;
    color: #FFF;
    background: #65c1ac;
    text-align: center;
	display: block;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition:    all .2s ease-in-out;
    -o-transition:      all .2s ease-in-out;
    -ms-transition:     all .2s ease-in-out;
    transition:         all .2s ease-in-out;
}
.cbut:hover {
    margin: 60px auto 0 auto;
	width: 118px;
	height: 40px;
	line-height: 40px;
    border-radius: 8px;
    color: #FFF;
    background: #4e9e8b;
    text-align: center;
	display: block;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition:    all .2s ease-in-out;
    -o-transition:      all .2s ease-in-out;
    -ms-transition:     all .2s ease-in-out;
    transition:         all .2s ease-in-out;
}
.trf {
    margin: 60px 0 0 20px;
	width: 120px;
	height: 40px;
	line-height: 40px;
    border-radius: 5px;
    color: #FFF;
    background: #65c1ac;
    text-align: center;
	*display: inline;
	display: -moz-inline-stack;
    display: inline-block;
    zoom: 1;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition:    all .2s ease-in-out;
    -o-transition:      all .2s ease-in-out;
    -ms-transition:     all .2s ease-in-out;
    transition:         all .2s ease-in-out;
}
.trf:hover {
    margin: 60px 0 0 20px;
	width: 120px;
	height: 40px;
	line-height: 40px;
    border-radius: 8px;
    color: #FFF;
    background: #4e9e8b;
    text-align: center;
	*display: inline;
	display: -moz-inline-stack;
    display: inline-block;
    zoom: 1;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition:    all .2s ease-in-out;
    -o-transition:      all .2s ease-in-out;
    -ms-transition:     all .2s ease-in-out;
    transition:         all .2s ease-in-out;
}
.dlink {
    margin: 0;
    color: #65c1ac;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition:    all .2s ease-in-out;
    -o-transition:      all .2s ease-in-out;
    -ms-transition:     all .2s ease-in-out;
    transition:         all .2s ease-in-out;	
}
.dlink:hover {
    margin: 0;
    color: #4e9e8b;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition:    all .2s ease-in-out;
    -o-transition:      all .2s ease-in-out;
    -ms-transition:     all .2s ease-in-out;
    transition:         all .2s ease-in-out;	
}
.mrhl {
	font-size: 18px;
	font-weight: bold;
	margin: 0 0 20px 0;
	padding: 0;
	display: block;
}
.lst {
	border-right: 2px solid #65c1ac;
	margin: 15px 0;
	padding: 0 10px 0 0;
}
.cleaner{
	clear: both;
}
.content{
	width: 100%;
	max-width: 700px;
	margin: 40px auto;
	padding: 10px 20px;
	overflow: hidden;
    min-height: calc(85vh - 246px);	
	direction: rtl;
	text-align: right;
}
.lables{
	padding: 5px 0;
	margin: 10px 0 5px 0;
	font-weight: bold;
	display: block;
	text-align: right;
	direction: rtl;
}
.inp_nam{
	width: 300px;
	height: 40px;
	line-height: 40px;
	background: #FFF;
	border: 1px solid #CCC;
	border-radius: 5px;
	direction: rtl;
	text-align: right;
	padding: 0 5px;
}
.inp_nam_err{
	width: 300px;
	height: 40px;
	line-height: 40px;
	background: #FFF;
	border: 1px solid #DA1C5C;
	border-radius: 5px;
	direction: rtl;
	text-align: right;
	padding: 0 5px;
}
.inp_mob{
	width: 250px;
	height: 40px;
	line-height: 40px;
	background: #FFF;
	border: 1px solid #CCC;
	border-radius: 5px;
	direction: ltr;
	text-align: left;
	padding: 0 5px;
}
.inp_mob_err{
	width: 250px;
	height: 40px;
	line-height: 40px;
	background: #FFF;
	border: 1px solid #DA1C5C;
	border-radius: 5px;
	direction: ltr;
	text-align: left;
	padding: 0 5px;
}
.inp_pin {
	width: 100px;
	height: 40px;
	line-height: 40px;
	background: #FFF;
	border: 1px solid #CCC;	
    border-radius: 5px;
	direction: ltr;
	text-align: left;
	padding: 0 5px;	
}
.inp_pin_err {
	width: 100px;
	height: 40px;
	line-height: 40px;
	background: #FFF;
	border: 1px solid #DA1C5C;	
    border-radius: 5px;
	direction: ltr;
	text-align: left;
	padding: 0 5px;	
}
.inp_cap {
	width: 100px;
	height: 40px;
	line-height: 40px;
	background: #FFF;
	border-top: 1px solid #CCC;	
	border-left: 1px solid #CCC;
	border-bottom: 1px solid #CCC;
	border-right: none;
    border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	direction: ltr;
	text-align: left;
	padding: 0 5px;	
}
.inp_cap_err {
	width: 100px;
	height: 40px;
	line-height: 40px;
	background: #FFF;
	border-top: 1px solid #DA1C5C;	
	border-left: 1px solid #DA1C5C;
	border-bottom: 1px solid #DA1C5C;
	border-right: none;
    border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	direction: ltr;
	text-align: left;
	padding: 0 5px;	
}
.cap_img{
	float: right;
	vertical-align: middle;
	border-top: 1px solid #CCC;
	border-right: 1px solid #CCC;
	border-bottom: 1px solid #CCC;	
	border-left: 1px solid #CCC;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	width: 80px;
	height: 40px;	
	margin: 0;
}
.cap_img_err{
	float: right;
	vertical-align: middle;
	border-top: 1px solid #DA1C5C;
	border-right: 1px solid #DA1C5C;
	border-bottom: 1px solid #DA1C5C;	
	border-left: 1px solid #CCC;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	width: 80px;
	height: 40px;	
	margin: 0;	
}
.sub_btn {
    margin: 40px 0;
	width: 180px;
	height: 40px;
	line-height: 40px;
	border: none;
    border-radius: 5px;
    color: #FFF;
    background: #65c1ac;
    text-align: center;
	display: block;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition:    all .2s ease-in-out;
    -o-transition:      all .2s ease-in-out;
    -ms-transition:     all .2s ease-in-out;
    transition:         all .2s ease-in-out;	
	cursor: pointer;
}
.sub_btn:hover {
    margin: 40px 0;
	width: 180px;
	height: 40px;
	line-height: 40px;
	border: none;
    border-radius: 8px;
    color: #FFF;
    background: #4e9e8b;
    text-align: center;
	display: block;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition:    all .2s ease-in-out;
    -o-transition:      all .2s ease-in-out;
    -ms-transition:     all .2s ease-in-out;
    transition:         all .2s ease-in-out;
	cursor: pointer;	
}
.form_error{
	margin: 10px 0 0 0;
	color: #DA1C5C;
	direction: rtl;
	text-align: right;
}
#ccstl {
	width: 300px;
}
.suce{
	width: 100%;
	color: #65c1ac;
	height: 40px;
	line-height: 40px;
	font-weight: bold;
	text-align: center;
}
.suce{
	width: 100%;
	color: #65c1ac;
	height: 40px;
	line-height: 40px;
	font-weight: bold;
	text-align: center;
}
.fail {
	width: 100%;
	color: #DA1C5C;
	height: 40px;
	line-height: 40px;
	font-weight: bold;
	text-align: center;	
}
.waiting {
	width: 100%;
	height: 40px;
	line-height: 40px;
	color: #65c1ac;
	font-weight: bold;
	text-align: center;
}
.w_icon {
	margin: 50px auto 30px auto;
	display: block;
	width: 100px;
}
.centr {
	width: 100%;
	text-align: center;
}
#client_top {
	width: 100%;
	margin: 0 0 30px 0;
	font-weight: bold;	
}
#phone_icon{
	float: right;
	width: 100px;
}
#phone_img {
	width: 40px;
	height: 40px;
	vertical-align: middle;
}
#mail_icon{
	float: left;
	text-align: left;
	direction: ltr;
}
#mail_img {
	width: 53px;
	height: 40px;
	vertical-align: middle;
}
#icons_icon{
	float: left;
	text-align: left;
	direction: ltr;
}
#lock_img {
	width: 40px;
	height: 40px;
	vertical-align: middle;
}
#exit_img {
	width: 40px;
	height: 40px;
	vertical-align: middle;
}
#pop_num {
	border: 2px solid #f8f8f8; 
	background: #DA1C5C;
	color: #FFF;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	float: left;
	margin: 0 0 0 -20px;
}
.msg_box{
	width: 100%;
	min-width: 200px;
	max-width: 500px;
	height: 150px;
	max-height: 150px;
	min-height: 150px;
	border: 1px solid #CCC;
	border-radius:5px;  
	padding: 10px;
	resize: none;
	direction: rtl;
	text-align: right;
}
.msg_box_err{
	width: 100%;
	min-width: 200px;
	max-width: 500px;
	height: 150px;
	max-height: 150px;
	min-height: 150px;
	border: 1px solid #DA1C5C;
	border-radius:5px;  
	padding: 10px;
	resize: none;
	direction: rtl;
	text-align: right;
}
.msg_dsp_wrp_me{
	width: 100%;
	border: 1px solid #666;
	border-radius: 5px;
	margin: 0 0 30px 0;
	display: block;
	overflow: hidden;
	box-sizing: border-box;
}
.msg_head_me {
	width: 100%;
	height: 40px;
	line-height: 40px;
	background: #999;
	border-bottom: 1px solid #999;
	color: #FFF;
	margin: 0;
	padding: 0 10px;
}
.msg_dsp_wrp{
	width: 100%;
	border: 1px solid #65c1ac;
	border-radius: 5px;
	margin: 0 0 30px 0;
	display: block;
	overflow: hidden;
	box-sizing: border-box;
}
.msg_head {
	width: 100%;
	height: 40px;
	line-height: 40px;
	background: #65c1ac;
	border-bottom: 1px solid #65c1ac;
	color: #FFF;
	margin: 0;
	padding: 0 10px;
}
.msg_head_l, .msg_head_l_me {
	float: left;
	direction: ltr;
	text-align: left;
}
.msg_head_r, .msg_head_r {
	float: right;
	direction: rtl;
	text-align: right;
}
.msg_body, .msg_body_me {
	padding: 30px 10px;
}
.auc_wrp {
	width: 100%;
	padding: 20px;
	border: 1px solid #65c1ac;
	border-radius: 5px;
	margin: 20px 0;
	text-align: center;
}
.auc_pin {
	margin: 10px;
	padding: 10px;
	background: #FFF;
	font-weight: bold;
	text-align: center;
	width: 200px;
	*display: inline;
	display: -moz-inline-stack;
    display: inline-block;
    zoom: 1;
	border: 1px dotted #CCC;
}
.auc_pin_lab {
	margin: 10px;
	padding: 10px 30px 10px 10px;
	border-radius: 5px;
	background-image: url("/srcs/s5pin.png");
	background-color:  #65c1ac;
	background-position: top right;
	background-repeat: no-repeat;	
	color: #FFF;
	text-align: center;
	width: 200px;	
	*display: inline;
	display: -moz-inline-stack;
    display: inline-block;
    zoom: 1;
}
.auc_lock_lab {
	margin: 10px;
	padding: 10px 30px 10px 10px;
	border-radius: 5px;
	background-image: url("/srcs/s5lock.png");
	background-color:  #65c1ac;
	background-position: top right;
	background-repeat: no-repeat;	
	color: #FFF;
	text-align: center;
	width: 200px;	
	*display: inline;
	display: -moz-inline-stack;
    display: inline-block;
    zoom: 1;
}
.others_wrp {
	margin: 80px 0 20px 0;
}
.links_ar {
	*display: inline;
	display: -moz-inline-stack;
    display: inline-block;
    zoom: 1;
	font-size: 16px;
	font-weight: normal;
	padding: 0;
	margin: 0;
}
.links_arbo {
	*display: inline;
	display: -moz-inline-stack;
    display: inline-block;
    zoom: 1;
	font-size: 16px;
	font-weight: bold;
	padding: 0 0 0 20px;
	margin: 0;
}
.links_ar a {
	color: #666666;
	margin: 10px 0 10px 15px; 
}
.links_ar a:hover{
	color: #65c1ac;
	margin: 10px 0 10px 15px;
}