/*login */
:root {
/* use --> var(--Name_color); */
/*public value */
--mask_audio :#343746; /*blue mask */
--mask_video :#eb9500; /*orange_mask */
/*header value*/
--theme_color_header :#10aab2;
--theme_color_nav_item :#ffec3c;
--theme_color_red :#e21e26;
/*content value */
--shadow_gray :#cccccc;/*audio & video */
--light_gray :#ececec;/*audio & video */
--dark_gray :#444444;/*audio & video */
--orange :#eb9500;/*audio & video & chat*/
--blue_roz_nevesht :#0c7a80;/* roznevesht */
--theme_yellow :#ffd81a;/* roznevesht */
/*footer vlaue*/
--footer_light_bg :#f4f4f4;
--footer_dark_bg :#005778;
/*widget vlaue*/
--float_button :#eb9500;
--float_button_hover :#f16100;
--float_button_hover :#eb9500;
--progress_page :#eb9500;
--yellow :#f9e14d; /*chat*/
--dark_khaki :#bdb76b;/*chat*/
--dark_cyan :#008b8b;/*chat*/
--blue :#7C93B2;/* chat & fehrest */
--dark_purple :#15162f;/* chat & fehrest */
/*responsive value */
--burger_color:#ffd81a;
--drawer_bg :#0c7a80;
--dark_white :#ebebeb;
--light_white :#ffffff;
--gray :#888888;
--black :#010101;
--toast :#99004d;
--tag_p :#222222;
--tag_h1 :#010101;
--tag_h2 :#000095;
--tag_h3 :#454EF6;
--tag_h4 :#5F1B9E;
--tag_h5 :#950000;
--tag_a :#4169e1;
}
/* this css for pre css or public tags css */
@font-face { font-family: b_yekan; src: url('http://khengoolestan.com/new/res/fonts/b_yekan.ttf'); }
*{
font-family:'b_yekan','B Yekan';font-weight:bold;
}
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, center,
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;
line-height: normal;
font-size: 14px;
font-family:'b_yekan','B Yekan';font-weight:bold;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
a {text-decoration: none;
outline:none;
font-size: 13px;
}
p{
color:var(--tag_p);
}
h1{
color:var(--tag_h1);
text-align:center;
}
h2{
color:var(--tag_h2);
text-align:center;
}
h3{
color:var(--tag_h3);
text-align:center;
}
h4{
color:var(--tag_h4);
text-align:center;
}
h5{
color:var(--tag_h5);
text-align:center;
}
::placeholder {
color: var(--gray);
opacity: 1; /* Firefox */
}
::-ms-input-placeholder { /* Edge 12-18 */
color: var(--gray);
}
input{
width:95%;
height:30px;
background-color: transparent;
color: var(--black);
outline: none;
font-size: 11px;
transition: .5s;
border: none;
vertical-align: middle;
line-height: 45px;
margin-top:7px;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
/*background-color:transparent;*/
border: none;
-webkit-background-clip: text;
}
body{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding-top: 20px;
background-color: var(--dark_white);
font-family: b_yekan;
font-size: 12px ;
color: var(--dark_white);
text-rendering: optimizelegibility;
-webkit-tap-highlight-color:rgba(0,0,0,0);
-webkit-text-size-adjust: none;
-webkit-font-smoothing: antialiased;
-moz-tap-highlight-color:rgba(0,0,0,0);
-moz-text-size-adjust: none;
-moz-font-smoothing: antialiased;
-ms-tap-highlight-color:rgba(0,0,0,0);
-ms-text-size-adjust: none;
-ms-font-smoothing: antialiased;
}
.panel{
width: 320px;
min-height:100px;
background-color: #d0e2e2;
border-radius: 5px;
box-shadow: 5px 5px 15px rgba(0,0,0,0.05);
padding:30px ;
}
.input_field_top{
width:95%;
height:55px;
padding-right:10px;
background-color: transparent;
color: var(--black);
outline: none;
font-size: 11px;
border: none;
vertical-align: middle;
line-height: 50px;
animation: fade 1s;
background-position: center center;
background-image: url('data:image/svg+xml,\
');
background-repeat: no-repeat;
}
.input_field_top_error{
width:95%;
height:55px;
padding-right:10px;
background-color: transparent;
color: var(--black);
outline: none;
font-size: 11px;
border: none;
vertical-align: middle;
line-height: 50px;
animation: fade 1s;
background-position: center center;
background-image: url('data:image/svg+xml,\
');
background-repeat: no-repeat;
}
.input_field_top:focus-within{
width:95%;
height:55px;
padding-right:10px;
background-color: transparent;
color: var(--black);
outline: none;
font-size: 11px;
border: none;
vertical-align: middle;
line-height: 50px;
animation: fade 1s;
background-position: center center;
background-image: url('data:image/svg+xml,\
');
background-repeat: no-repeat;
}
.input_field_top_error:focus-within{
width:95%;
height:55px;
padding-right:10px;
background-color: transparent;
color: var(--black);
outline: none;
font-size: 11px;
border: none;
vertical-align: middle;
line-height: 50px;
animation: fade 1s;
background-position: center center;
background-image: url('data:image/svg+xml,\
');
background-repeat: no-repeat;
}
.input_field:focus-within{
width:95%;
height:55px;
padding-right:10px;
background-color: transparent;
color: var(--black);
outline: none;
font-size: 11px;
animation: fade 1s;
border: none;
vertical-align: middle;
line-height: 50px;
background-position: center center;
background-image: url('data:image/svg+xml,\
');
background-repeat: no-repeat;
}
.input_field{
width:95%;
height:55px;
padding-right:10px;
background-color: transparent;
color: var(--black);
outline: none;
font-size: 11px;
animation: fade 1s;
border: none;
vertical-align: middle;
line-height: 50px;
background-position: center center;
background-image: url('data:image/svg+xml,\
');
background-repeat: no-repeat;
}
.pass_field_25{
width:95%;
height:55px;
padding-right:10px;
background-color: transparent;
color: var(--black);
outline: none;
font-size: 11px;
animation: fade 1s;
border: none;
vertical-align: middle;
line-height: 50px;
background-position: center center;
background-image: url('data:image/svg+xml,\
');
background-repeat: no-repeat;
}
.pass_field_75{
width:95%;
height:55px;
padding-right:10px;
background-color: transparent;
color: var(--black);
outline: none;
font-size: 11px;
animation: fade 1s;
border: none;
vertical-align: middle;
line-height: 50px;
background-position: center center;
background-image: url('data:image/svg+xml,\
');
background-repeat: no-repeat;
}
.pass_field_ok{
width:95%;
height:55px;
padding-right:10px;
background-color: transparent;
color: var(--black);
outline: none;
font-size: 11px;
animation: fade 1s;
border: none;
vertical-align: middle;
line-height: 50px;
background-position: center center;
background-image: url('data:image/svg+xml,\
');
background-repeat: no-repeat;
}
.pass_field_50{
width:95%;
height:55px;
padding-right:10px;
background-color: transparent;
color: var(--black);
outline: none;
font-size: 11px;
animation: fade 1s;
border: none;
vertical-align: middle;
line-height: 50px;
background-position: center center;
background-image: url('data:image/svg+xml,\
');
background-repeat: no-repeat;
}
.input_field_error{
width:95%;
height:55px;
padding-right:10px;
background-color: transparent;
color: red;
outline: none;
font-size: 11px;
animation: fade 1s;
border: none;
background-position: center center;
background-image: url('data:image/svg+xml,\
');
background-repeat: no-repeat;
}
.input_field_error:focus-within{
width:95%;
height:55px;
padding-right:10px;
background-color: transparent;
color: var(--black);
outline: none;
font-size: 11px;
animation: fade 1s;
border: none;
vertical-align: middle;
line-height: 50px;
background-position: center center;
background-image: url('data:image/svg+xml,\
');
background-repeat: no-repeat;
}
.btn_sign_up_disable{
width:97%;
height:60px;
padding-right:10px;
padding-left:10px;
background-color: transparent;
outline: none;
font-size: 12px;
text-align: center;
vertical-align: middle;
line-height: 60px;
cursor: pointer;
border: none;
animation: fade 1s;
background-position: center center;
margin-bottom:10px;
color: black;
background-image: url('data:image/svg+xml,\
');
background-repeat: no-repeat;
}
.btn_sign_up_active{
width:97%;
height:60px;
padding-right:10px;
padding-left:10px;
background-color: transparent;
outline: none;
font-size: 12px;
text-align: center;
vertical-align: middle;
line-height: 60px;
cursor: pointer;
border: none;
animation: fade 1s;
background-position: center center;
margin-bottom:10px;
color: black;
background-image: url('data:image/svg+xml,\
');
background-repeat: no-repeat;
}
.btn_login_disable{
width:92%;
height:60px;
padding-right:10px;
padding-left:10px;
background-color: transparent;
outline: none;
font-size: 12px;
animation: fade 1s;
text-align: center;
vertical-align: middle;
line-height: 60px;
border: none;
cursor: pointer;
background-position: center center;
color: black;
background-image: url('data:image/svg+xml,\
');
background-repeat: no-repeat;
}
.btn_login_active{
width:92%;
height:60px;
padding-right:10px;
padding-left:10px;
background-color: transparent;
outline: none;
font-size: 12px;
animation: fade 1s;
text-align: center;
vertical-align: middle;
line-height: 60px;
cursor: pointer;
border: none;
background-position: center center;
color: black;
background-image: url('data:image/svg+xml,\
');
background-repeat: no-repeat;
}
.title_txt{
margin-top:5px;
margin-right:10px;
color:black;
display: inline-block;
}
.desc_txt{
margin-right:10px;
color:black;
font-size: 12px;
display: inline-block;
}
.login_txt{
margin-right:10px;
color:black;
font-size: 13px;
display: inline-block;
}
.counter{
margin-right:160px;
color:black;
font-size: 11px;
display: inline-block;
}
.exit{
width:20px;
height:20px;
}
.logo{
width:200px;
height:auto;
margin:auto;
margin-bottom:17px;
}
.white_fill{
fill: #fff;
}
.yellow_fill{
fill: #ffec3c;
}
.red_fill {
fill: #e21e26;
}
.character_login{
position:relative;
bottom:-33px;
width:250px;
height:auto;
margin:auto;
}
.red_color{
display: inline-block;
color:red;
}
#just_sign_up {
display:none;
animation: fade 1s;
}
#just_login{
/*display:none;*/
animation: fade 1s;
}
#vrefy_row{
display:none;
}
canvas{
/*prevent interaction with the canvas*/
pointer-events:none;
}
#captcha_code{
position:relative;
top:10px;
right:20px;
width:40%;
height:50px;
display: inline-block;
margin-bottom:10px;
animation: fade 1s;
}
.link{
text-decoration: none;
outline:none;
font-size: 13px;
color:blue;
display: inline-block;
cursor: pointer;
}
.captcha{
text-align: center;
width:50%;
height:50px;
margin-right:8px;
padding: 12px 20px;
display: inline-block;
border: 1px solid #ccc;
border-radius: 15px;
box-sizing: border-box;
background-color:white;
margin-top:5px;
animation: fade 1s;
margin-bottom:10px;
}
.captcha_error:focus{
text-align: center;
width:50%;
height:50px;
margin-right:8px;
padding: 12px 20px;
display: inline-block;
border: 1px solid #ccc;
border-radius: 15px;
box-sizing: border-box;
background-color:white;
margin-top:5px;
animation: fade 1s;
margin-bottom:10px;
}
.captcha_error{
text-align: center;
width:50%;
height:50px;
margin-right:8px;
padding: 12px 20px;
display: inline-block;
border: 1px solid red;
border-radius: 15px;
box-sizing: border-box;
background-color:white;
margin-top:5px;
animation: fade 1s;
margin-bottom:10px;
}
/********* toast style start**********/
.notification {
color: var(--black);
line-height: 1.5;
margin-bottom: 5px;
padding: 15px;
transition: 0.15s ease-in-out;
width: 325px;
z-index:11;
}
#toast_msg{
color: var(--light_white);
text-align:center;
}
#close_toast {
cursor: pointer;
float: left;
color: var(--light_white);
font-size: 1.25rem;
line-height: 1;
margin-left: 1em;
opacity: .8;
}
.toast_on {
transform: translateX(-365px);
}
#toast {
background-color: var(--toast);
position: fixed;
right: -365px;
bottom: 50px;
}
/********* toast style end**********/
@keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}