:root{
    --maincolor: #29b6f6;
    --background: #fbfeff;
    --foreground:#03a9f4;
    --bluebtn: #29b6f6;
    --bluebtnhover: #42c4ff;
    --responsive-width:767px;
    }
    

    
    @font-face {
        font-family: "VazirFD";
        src: url('/assets/fonts/vazir/webfonts/Vazirmatn-FD.woff2?v=2.0') format('woff2 supports variations'), url('/assets/fonts/vazir/webfonts/Vazirmatn-FD.woff2?v=2.0') format('woff2-variations'),url('/assets/fonts/vazir/ttf/Vazirmatn-FD.ttf?v=2.0') format('truetype');
        font-weight: 100 900;
        font-style: normal;
        font-display: swap;
    }
    
    
    span.wpmlabel {
        position: absolute;
        font-size: .5em;
        width: 90px;
        top: 35px;
        left: -15px;
    }
    
    h4#wpm {
        position: relative;
        width: 50px;
        left: 10px;
        top: -5px;
    }
    
    .smallnumber {
        font-size: 18px;
        margin: 10px 5px 0px 8px;
        width: 50px;
    }
    .smalltitle {
        margin-top: 10px;
        /* margin-left: 5px; */
        font-family: VazirFD,tahoma;
        font-size: 1.3em;
        font-weight: normal;
        display: inline-block;
        width: 70px;
    }
    
    .row.errorsrow {
        position: absolute;
        /* top: 30px; */
        /* right: 80px; */
        margin-top: 40px;
        margin-right: 95px;
    }
    
    .row.errorsrow {
        font-size: 10px;
    }
    
    span#errnum {
        font-size: 12px;
    }
    
    .menu {
        position: absolute;
        /* border: 1px solid red; */
        width: 400px;
        height: 40px;
        z-index: 1;
        left: 50%;
        display: inline-block;
        margin-top: 10px;
    }
    
    .menu a {
        font-size: 14px;
        color: white;
        text-decoration: none;
        padding: 10px;
    }
    
    .dropdown-menu>li>a:focus, .dropdown-menu>li>a:not(.active):hover {
        color: #51bfef;
        text-decoration: none;
        background-color: #f5fbff;
        /* color: #ffffff; */
    }
    
    .dropdown-menu>li>a.active,li>a.active{
        color: var(--foreground) !important;
        text-decoration: none;
        background-color: #e1f5fe;
        /* color: #ffffff; */
    }
    
    .dropdown-menu>li>a {
        display: block;
        padding: 8px 20px;
        line-height: 1.42857143;
        /* font-size: .9em; */
        font-family: 'Vazir';
        color: #5a5a5a;
        white-space: nowrap;
        text-align: right;
    }
    
    .btn .caret {
        margin: 5px;
    }
    
    .menu a:hover {
        text-decoration: overline;
    }
    
    .dropdown.open {
        /* position: absolute; */
    }
    
    .language {
        position: absolute;
        /* border: 1px solid red; */
        width: 160px;
        height: 40px;
        z-index: 1;
    }
    
    .flag {
        width: 19px;
        height: 13px;
        background-size: cover;
        float: left;
        margin: 4px;
    }
    
    .ir {
        background-image: url("ir.svg");
    }
    
    .ps {
        background-image: url("ps.svg");
    }
    
    .eng {
        background-image: url("eng.svg");
    }
    
    .color1 {
        background-color: #2e2f31;
    }
    
    .color2 {
        background-color: #403f3d;
        background-image: url(pattern-final.png);
    }
    
    .flag:hover {
        opacity: 0.4;
    }
    
    #examfrm {
        height: auto;
        width: 100%;
        text-align: center;
    }
    
    #reg {
        height: 190px;
        position: relative;
        /* top: 90px; */
        background-color: #da5547;
        border-radius: 20px;
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        color: white;
        border-bottom: 5px solid #90332a;
        background-image: url("gift-icon.png");
        background-size: contain;
        background-repeat: no-repeat;
        /* display: none; */
    }
    
    .errmsg {
        clear: both;
        position: relative;
        top: -20px;
        text-align: center;
        background-color: #d64841;
        display: none;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
    }
    
    .texts {
        font-weight: normal;
        height: 35px;
        border-radius: 6px;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border: none;
        float: right;
        margin: 4px;
        text-align: center;
        font-size: 14px;
        font-family: tahoma,;
    }
    
    body {background: url(/assets/img/clouds.svg) repeat-x fixed -121px 95px, linear-gradient(#38c1ff, #d5f2ff) no-repeat fixed 0 0;font-family: VazirFD,tahoma;font-weight: normal;/* line-height: 2.3em; */margin: 0px;}
    
    .title {
        text-align: right;
        direction: rtl;
        margin: 10px;
        font-size: 45px;
        font-family: 'kalamehblack',tahoma;
        clear: both;
        margin-top: 30px;
        text-align: center;
    }
    
    .wrapper {
        border-top-right-radius: 30px;
        border-top-left-radius: 35px;
        width: 95%;
        height: auto;
        margin: auto;
        margin-top: 100px;
        text-align: center;
    }
    
    #header {
        /* border-top-left-radius: 30px; */
        /* border-top-right-radius: 30px; */
        background: -webkit-gradient(linear, left top, right top, from(white), color-stop(#7dc5fb), to(#b134b3));
        background: -webkit-linear-gradient(left, white, #7dc5fb, #b134b3);
        background: -o-linear-gradient(left, white, #7dc5fb, #b134b3);
        background: linear-gradient(to right, white, #7dc5fb, #b134b3);
        width: 100%;
        padding: 1%;
        margin: 5px;
        color: white;
        text-align: center;
        font-size: 40px;
        font-family: VazirFD, tahoma, verdana, arial, sans-serif;
        letter-spacing: -4px;
        margin: 14px 0px;
    }
    
    .nav-tabs>li>a {
        margin-right: 2px;
        line-height: 1.42857143;
        border-radius: 10px;
        transition: all .6s ease;
    }
    
    .modal-body .nav-tabs>li {
        float: right;
    }
    
    .modal-body .des {
        font-size: 1.1em;
    }
    
    .modal-dialog ul {
        direction: rtl;
        text-align: justify;
    }
    
    .modal-dialog li {
        margin-top: 5px;
    }
    
    .modal-body p {
        text-align: center;
        font-size: 1.2em;
        line-height: 1.9em;
        padding: 5px;
    }
    
    button.close {
        margin-left: 20px;
        text-shadow: unset;
    }
    
    img.inst-image-md {
        width: 40%;
    }
    
    p.nojs {
        margin: auto;
        width: 40%;
        font-size: 1em;
        color: white;
        margin-top: 40px;
        display: none;
    }
    
    #lesson-description {
        /* white-space: pre-wrap; */
    }
    
    #lesson-description img {
        width: 100px !important;
        margin: auto;
        /* display: block; */
    }
    
    .des blockquote::before {
        display: inline-block;
        font: normal normal normal 20px/1 FontAwesome;
        font-family: 'Font Awesome 6 Free';
        -webkit-font-smoothing: antialiased;
        content: "\f059";
        color: #1a86b8;
        margin: 10px 8px
    
    }
    
    .des blockquote {
        background-color: var(--background);
        color: #1a86b8;
        border: none;
        text-align: center;
        margin-top: 10px;
    }
    
    .des blockquote a{
        background-color: white;
        padding: 5px;
        border-radius: 5px;
    }
    
    .des {
        /* text-align: justify; */
        direction: rtl;
        font-size: 1.4em;
        font-family: VazirFD,tahoma;
        line-height: 220%;
        max-height: 440px;
        overflow: auto;
        overflow-x: hidden;
        width: auto;
        margin: auto;
        max-width: 1500px;
        margin-bottom: 10px;
        white-space: pre-wrap;
        text-align: right;
        padding: 10px;
        padding-top: 20px;
    }
    
    .copyright {
        text-align: center;
        direction: LTR;
        font-size: .84em;
        margin-top: 10px;
        line-height: 5%;
        /* overflow: auto; */
        color: #b3b3b3;
        font-family: vazir;
        padding-top: 13px;
    }
    
    div#text_holder {
        background-color: #fbfbfb;
        border-radius: 12px;
        color: #464646;
        /* border: 1px solid #f3f3f3; */
        /* letter-spacing: 5px; */
        white-space: pre-line;
        word-break: break-word;
    }
    
    div#text_holder.code {
        word-break: break-all;
    }
    
    div#text_holder.voice {
        color: #00000000;
        font-size:1.8em
    }
    
    #text_holder, #pb_text_holder {
        height: auto;
        min-width: 50%;
        margin: auto;
        font-size: 2.5em;
        font-family: VazirFD,tahoma, sans-serif;
        direction: rtl;
        padding-right: 20px;
        max-width: 90%;
        text-align: right;
        line-height: 220%;
        margin-bottom: 40px;
        padding: 15px;
        cursor: pointer;
        overflow-x: hidden;
        white-space: pre-line;
        word-break: break-word;
        /* text-align: justify; */
    }
    
    .nav2 {
        height: 60px;
        width: 100%;
        margin-right: 50px;
        margin-left: 45px;
        margin-top: 20px;
    }
    
    #mytext {
        width: 90%;
        height: 150px;
        font-size: 30px;
        color: #3b5998;
        display: inline-block;
        font-family: VazirFD,tahoma, verdana, arial, sans-serif;
        border: none;
    }
    
    .main {
        margin-top: 40px;
        padding-top: 10px;
        height: 120px;
        width: 500;
        border-color: #DFDFDF;
    }
    
    #stat {
        border-top-right-radius: 60px;
        border-bottom-right-radius: 60px;
        background: -webkit-radial-gradient(#82dffb, #77b6e2, #edbaf3);
        background: -o-radial-gradient(#82dffb, #77b6e2, #edbaf3);
        background: radial-gradient(#82dffb, #77b6e2, #edbaf3);
        height: 185px;
        width: 400px;
        margin: 45px 45px;
        display: inline-block;
        float: left;
        font-size: 25px;
        font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
        color: #fff9d7;
    }
    
    #report {
        height: 40px;
        width: 85%;
        margin-right: 60px;
        margin-left: 60px;
        margin-top: 20px;
        font-size: 30px;
        font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
        text-align: right;
    }
    
    #report #incorrect {
        color: #e64242;
        font-weight: bold;
    }
    
    #report #correct {
        color: #1c9ec7;
    }
    
    #button {
        height: 140px;
    }
    
    div#keyboard_settings.disable {
        background: #bbbbbb;
    }
    
    div#keyboard_settings {
        position: absolute;
        left: 700px;
        top: 20px;
        width: 50px;
        height: 50px;
        font-size: 20;
        margin: 0 2px;
        padding-top: 20px !important;
        background: #41b4e8;
    }
    
    .tooltip-inner {
        /* background-color: #fff6ab; */
        /* color: #404040; */
        /* padding: 4px 8px; */
    }
    
    .tooltip.top .tooltip-arrow {
        /* border-top-color: #f7f0b2; */
    }
    
    span.fa.fa-globe {
        margin-top: -5;
    }
    
    .myButton {
        border-radius: 5px;
        cursor: pointer;
        /*Pointer for button*/
        color: #ffffff;
        font-family: VazirFD,tahoma;
        width: 150px;
        text-align: center;
        padding: 10px 10px;
        font-size: 20px;
        */ float: right;
        /* float: right; */
        direction: rtl;
        /* margin-top: 40px; */
        border: none;
    }
    
    .myButton:hover {
        opacity: 0.6;
    }
    
    #footer {
        clear: right;
        clear: left;
        background-color: #3b5998;
        border-bottom-left-radius: 30px;
        border-bottom-right-radius: 30px;
        font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
        color: #fff9d7;
        height: 50px;
        width: 968px;
        margin: 20px 0px;
        font-size: 30px;
        padding: auto;
        text-align: center;
    }
    
    .time {
        width: 40px;
        height: 40px;
        background-image: url("/assets/img/time.svg");
        background-size: cover;
        /* margin: 0 20px 10px; */
    }
    
    .speed {
        width: 40px;
        height: 40px;
        background-image: url("/assets/img/speed.svg");
        background-size: cover;
        margin: 0 15px 10px;
    }
    
    p#discount {
        font-size: 20px;
    }
    
    .small-des {
        font-size: 85%;
    }
    
    #upgare_it_now .modal-body hr {
        border-top: 3px dashed #e7e7e7;
    }
    
    .eye {
        width: 50px;
        height: 50px;
        background-image: url("/assets/img/acc.svg");
        background-size: cover;
        /* margin: 0 20px 10px; */
    }
    
    .error {
        width: 40px;
        height: 40px;
        background-image: url("/assets/img/error.svg");
        background-size: cover;
        /* margin: 0 20px 10px; */
    }
    
    .startpage, .startlesson, .white_div,#typist {
        width: auto;
        min-height: 350px;
        height: auto;
        background-color: white;
        padding: 20px;
        border-radius: 20px;
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        max-width: 92%;
        margin: auto;
    }
    
    .t_l {
        margin-top: 30px;
    }
    
    #end {
        /* background: white; */
        /* height: 110px; */
        width: 50%;
        margin: auto;
        font-size: 18px;
        font-family: VazirFD, tahoma, verdana, arial, sans-serif;
        text-align: center;
        color: #7d7d7d;
        font-weight: normal;
        margin-top: 60px;
        margin-bottom: 40px;
        line-height: 25px;
        direction: rtl;
    }
    
    /* night -------------------*/
    .night .startpage, .night .startlesson, .night #typist {
        background: #222222;
        color: white;
    }
    
    .night .small-star {
        display: none
    }
    
    .night .lesson_needs_upgrade {
        display: inline-block;
        margin: 5px;
        cursor: pointer;
        position: relative;
        width: 160px;
        height: 160px;
        padding: 10px;
        background: rgba(39, 37, 37, 0.7);
        -webkit-transition: -webkit-box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
        transition: -webkit-box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
        -o-transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
        transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
        transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
        border-radius: 3px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        color: #868686;
    }
    
    .night .loader-place {
        background: #404040;
    }
    
    .night .modal-content {
        background: #404040;
    }
    
    .night .close {
        color: #ffffff;
        text-shadow: none;
        opacity: .6;
    }
    
    .night .close:hover {
        opacity: 1;
    }
    
    .night {
        color: white;
    }
    
    .black-background {
        background: rgb(33, 33, 33) !important;
    }
    
    .white-background {
        background: rgb(255, 255, 255) !important;
    }
    
    .night .btn-info {
        color: white
    }
    
    .night-background {
        background: url(/assets/img/clouds.svg) repeat-x fixed 0 -1px, -webkit-gradient(linear, left top, left bottom, from(#003b73), to(#0b1723)) no-repeat fixed 0 0;
        background: url(/assets/img/clouds.svg) repeat-x fixed 0 -1px, -webkit-linear-gradient(#003b73, #0b1723) no-repeat fixed 0 0;
        background: url(/assets/img/clouds.svg) repeat-x fixed 0 -1px, -o-linear-gradient(#003b73, #0b1723) no-repeat fixed 0 0;
        background: url(/assets/img/clouds.svg) repeat-x fixed 0 -1px, linear-gradient(#003b73, #0b1723) no-repeat fixed 0 0;
    }
    
    .container-fluid {
        font-size: 1.2em;
    }
    
    .rc-anchor-normal .rc-anchor-checkbox-label {
        width: 152px;
    }
    
    .rc-anchor-normal .rc-anchor-checkbox-label {
        width: 152px;
    }
    
    .day-background {
        background: url(/assets/img/clouds.svg) repeat-x fixed -210px -60px, -webkit-gradient(linear, left top, left bottom, from(#03A9F4), to(#ffffff)) no-repeat fixed 0 0;
        background: url(/assets/img/clouds.svg) repeat-x fixed -210px -60px, -webkit-linear-gradient(#03A9F4, #ffffff) no-repeat fixed 0 0;
        background: url(/assets/img/clouds.svg) repeat-x fixed -210px -60px, -o-linear-gradient(#03A9F4, #ffffff) no-repeat fixed 0 0;
        background: url(/assets/img/clouds.svg) repeat-x fixed -210px -60px, linear-gradient(#03A9F4, #ffffff) no-repeat fixed 0 0;
        /* background-position: 20 10; */
    }
    
    .night .userprogress, .night #typists_holder {
        background-color: #222222;
        background-color: #333333;
        color: white;
    }
    
    .night .table-hover>tbody>tr:hover {
        background-color: #1f1e1e;
    }
    
    .night .lsn-number {
        color: rgb(119, 119, 119);
        text-shadow: 0 0 0 #0a0a0a;
    }
    
    .night .nav>li>a:focus, .night .nav>li>a:hover {
        background-color: #434344;
    }
    
    .night span.smalltext {
        color: #a2a2a2
    }
    
    .night .lesson {
        display: inline-block;
        margin: 5px;
        cursor: pointer;
        position: relative;
        width: 160px;
        height: 160px;
        padding: 10px;
        background: rgba(62, 62, 62, 0.7);
        -webkit-box-shadow: 0 2px 1px 0 rgba(93, 93, 93, 0.8);
        box-shadow: 0 2px 1px 0 rgba(93, 93, 93, 0.8);
        -webkit-transition: -webkit-box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
        transition: -webkit-box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
        -o-transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
        transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
        transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
        border-radius: 3px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        color: #fbf2a1;
    }
    
    .night .lesson:hover {
        -webkit-box-shadow: 0 0px 0px 0 rgba(0,0,0,0.2), 0 0px 0px 0 rgba(0,0,0,0.3);
        box-shadow: 0 0px 0px 0 rgba(0,0,0,0.2), 0 0px 0px 0 rgba(0,0,0,0.3);
    }
    
    .night #usertext {
        border: 2px solid #a9a9a9;
        background-color: #383838
    }
    
    .alert a {
        cursor: pointer;
    }
    
    .night a {
        color: #82caea
    }
    
    .small-alert {
        width: 90%;
        margin: auto;
        direction:rtl;
    }
    
    a {
        /* cursor: pointer; */
        /* color: #03a9f4; */
    }
    
    a:focus, a:hover{
         color: #039be5;
         text-decoration: unset;
    }
    
    .g-recaptcha {
        margin-right: 12%;
        margin-bottom: 5%;
    }
    
    .night hr {
        margin-top: 20px;
        margin-bottom: 20px;
        border: 0;
        border-top: 1px solid #333;
    }
    
    hr {
        margin-top: 5px;
        margin-bottom: 5px;
    }
    
    .night th {
        color: #ffffff;
        font-size: 1.2em;
        font-weight: normal;
    }
    
    .night .alert-info {
        color: #ffffff;
        background-color: #060606;
        border-color: #ababab;
    }
    
    .night #starttheexam,.blue-btn, .btn-primary {
        /* background: #1c427d; */
        border-bottom: 3px solid #07101f;
    }
    
    .night p#start-btn,.night #end {
        color: #fff6a5;
    }
    
    /*------------------------- */
    .star {
        background-image: url("/assets/img/star.png?v=2");
        height: 70px;
        background-size: contain;
        width: 300px;
        margin: auto;
        background-position: 200px;
        background-repeat: no-repeat;
        margin-top: 40px;
        margin-bottom: 30px;
    }
    
    .body-footer {
        background-color: #2cafb5;
        color: #7c9192;
        /* position: relative; */
        /* z-index: 2; */
        /* text-align: center; */
        height: 100px;
        /* clear: both; */
        top: 200px;
    }
    
    .header {
        background-color: #ffffff;
        height: 80px;
    }
    
    /*  SECTIONS  */
    .section {
        clear: both;
        padding: 0px;
        margin: 0px;
        direction: rtl;
    }

    .startpage .section {
        height: 59px;
    }
    
    /*  COLUMN SETUP  */
    .col {
        display: inline-block;
        /* float:left; */
        margin: 1% 1% 1% 0;
    }
    
    .col:first-child {
        margin-left: 0px;
    }
    
    /*  GROUPING  */
    .group:before, .group:after {
        content: "";
        display: table;
    }
    
    .group:after {
        clear: both;
    }
    
    .group {
        zoom:1; /* For IE 6/7 */
    }
    
    /*  GRID OF THREE  */
    .span_3_of_3 {
        width: 100%;
    }
    
    .span_2_of_3 {
        width: 66.13%;
    }
    
    .span_1_of_3 {
        width: 48.26%;
        text-align: center;
        color: white;
        background-color: #078a70;
        border-radius: 10px;
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
    }
    
    /*  GO FULL WIDTH BELOW 480 PIXELS */
    @media only screen and (max-width: 480px) {
    
            .iframe-container {
    
      padding-top: 200% !important;
    
    }
        .col {
            margin: 1% 0 1% 0%;
        }
    
        .span_3_of_3, .span_2_of_3, .span_1_of_3 {
            width: 100%;
        }
    }
    
    .full2 {
        background-color: #2d2d2d;
        color: #30a9af;
        height: auto;
    }
    
    #keyboard text.active {
        fill: #FFFFFF !important;
        font-weight: 900;
    }
    
    .col a {
        text-decoration: none;
        color: white;
        /* background-color: #20c2e6; */
        padding: 5px;
        font-size: 20px;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        display: block;
        margin: 5px;
        direction: rtl;
        border-bottom: 2px solid #078a70;
    }
    
    .col a:hover {
        background-color: #1abc9c;
        border-bottom: 2px solid white;
    }
    
    p {
        /* font-size: 20px; */
        text-align: justify;
        direction: rtl;
        /* padding: 10px; */
    }
    
    .big_title {
        padding: 50px;
        /* background: #53B9E6 url(bg_blue.png) no-repeat center center; */
        background-size: cover;
        background-attachment: fixed;
        /* font-size: 40px; */
        text-align: center;
        color: white;
        height: auto;
    }
    
    #english {
        background: #ec6049;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        /* border-radius: 10px; */
        /* border: 4px solid #ffffff; */
        cursor: pointer;
        color: #ffffff;
        font-family: VazirFD,tahoma;
        /* width: 320px; */
        text-align: center;
        padding: 10px 10px;
        display: inline-block;
        font-size: 20px;
        float: right;
    }
    
    #usertext {
        width: 99%;
        height: 65px;
        /* text-align: right; */
        font-size: 14px;
        font-family: VazirFD,tahoma;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border: 2px solid #55bbe8;
        padding: 15px;
        display: block;
        /* direction: rtl; */
        margin: auto;
        margin-top: 5px;
        margin-bottom: 5px;
    }
    
    #make {
        background: #1c748e;
        border-radius: 10px;
        border: 4px solid #ffffff;
        cursor: pointer;
        color: #ffffff;
        font-family: VazirFD,tahoma;
        text-align: center;
        padding: 10px 10px;
        font-size: 20px;
        position: relative;
        top: -135px;
        left: 840px;
    }
    
    #regbtn {
        background: #4199a7;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        cursor: pointer;
        color: #ffffff;
        font-family: VazirFD,tahoma;
        padding: 10px;
        display: inline-block;
        font-size: 16px;
        float: right;
        /* margin-bottom: 20px !important; */
        top: -14px;
        position: relative;
        font-weight: normal;
    }
    
    .blue-btn:hover, .btn-primary:hover, .blue-btn.focus, .blue-btn:focus {
        background: #4ec8ff !important;
        border-bottom: 1px solid #3a6071;
        color: white;
    }
    
    .btn-primary:active:focus,.btn-primary:active,.btn-primary:focus{
    
        background-color:#29B6F6 !important;
    }
    
    #regbtn:hover {
        background: #dc543f;
    }
    
    .tool {
        /* width: 100%; */
        /* height: 60px; */
        /* margin-top: 15px; */
        margin-bottom: 16px;
        text-align: center;
        /* margin: auto; */
        /* float: right; */
        /* top: 60px; */
        /* position: relative; */
        direction: rtl;
        /* display: none; */
        /* zoom: 0.8; */
    }
    
    #lesson-btn, #start-lesson, .blue-btn, .btn-primary {
        background: #42c4ff;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        cursor: pointer;
        color: #ffffff;
        font-family: 'kalamehblack';
        text-align: center;
        padding: 10px 10px;
        font-size: 20px;
        margin-left: 8px;
        border-bottom: 3px solid #397e9c;
        margin-bottom: 10px;
    }
    
    .st9 {
        fill: #777777 ;
    }
    
    .ltr {
        direction: ltr !important;
        text-align: left !important;
    }
    
    .numpad_ltr {
        letter-spacing: 10px;
        direction: ltr !important;
    }
    
    .code {
        white-space: pre-wrap;
        font-size: 1.8em !important;
        border: 1px dotted;
        letter-spacing: 1px !important;
        line-height: 45px !important;
    }
    
    div#text_holder.numpad_ltr {
        text-align: left;
        direction: ltr;
    }
    
    div#numpad_place {
        margin-top: -100px;
        margin-left: -150px;
    }
    
    #numpad_place g#hand {
        /* opacity: .8; */
    }
    
    .num_pad_btn {
        margin: 23px !important;
        padding: 24px;
    }
    
    .scale_numpad{
    
    
        -webkit-transform: translateX(70px) scale(.86) !important;
        -ms-transform: translateX(70px) scale(.86) !important;
        transform: translateX(70px) scale(.86) !important;
        
    }
    
    #english:hover {
        /* background: #e02929; */
    }
    
    .correct {
        color: #1ec0e7;
        background-color: white;
    }
    
    .selected_char {
        color: #2ebeff;
        border-bottom: 4px solid #03a9f4;
        background-color: #e8f8ff;
        @keyframes typeit {
    0% {
        opacity: 1}

    50% {
        opacity: 0.6;
    }

     60% {
        opacity: 0.4;
    }

    100% {
        opacity: 1}
};
        animation: typeit 0.7s linear;
    }
    
    
    .incorrect {
        color: #e11b2c;
        background-color: #fff6f6;
    }
    
    .blink {
        -webkit-animation: blink 0.7s linear infinite;
        animation: blink 0.7s linear infinite;
    }
    
    .showerr {
        width: 30px;
        position: absolute;
        font-size: .5em;
        padding: 5px;
        /* top: 32px; */
        background: #ff463eb5;
        /* -webkit-border-radius: 10%; */
        color: white;
        text-align: center;
        line-height: 20px;
        /* opacity: .8; */
        opacity:0;
        animation: showerr 0.8s ease-in-out;
    }
    
    
    @-webkit-keyframes showerr {
        0% {
            opacity:0;
        }
    
        50% {
           opacity:1;
        }
    
        60% {
           opacity:1;
        }
    
        100% {
           opacity:0;
        }
    }
    
    @keyframes showerr {
        0% {
            opacity:0;
        }
    
        50% {
           opacity:1;
        }
    
        60% {
           opacity:1;
        }
        
        100% {
           opacity:0;
        }
    }
    
    .clouds {
        background: url(/assets/img/clouds.svg) repeat-x fixed 0 -5px;
        width: 100%;
        height: 100%;
        margin-top: 50px;
        position: absolute;
        z-index: -1;
        -webkit-animation: clouds 140s linear .1s infinite;
        animation: clouds 140s linear .1s infinite;
    }
    
    @-webkit-keyframes clouds {
        0% {
            background-position-x: 0px;
        }
    
        100% {
            background-position-x: 2000px;
        }
    }
    
    @keyframes clouds {
        0% {
            background-position-x: 0px;
        }
    
        100% {
            background-position-x: 2000px;
        }
    }
    
    @-webkit-keyframes my_star {
        0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
            opacity: 0.6;
        }
    
        50% {
            opacity: 1;
        }
    
        100% {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
            opacity: 0.6;
        }
    }
    
    @keyframes my_star {
        0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
            opacity: 0.6;
        }
    
        50% {
            opacity: 1;
        }
    
        100% {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
            opacity: 0.6;
        }
    }
    
    .star_holder:nth-child(2) {
        margin-right: 5px !important;
    }
    
    .moving_star:hover {
        /* animation-play-state: paused; */
        width: 32px;
        height: 32px;
    }
    
    .moving_star {
        width: 30px;
        height: 30px;
        background: url(/assets/img/moving_star.svg);
        -webkit-animation: my_star 3s linear .5s infinite;
        animation: my_star 3s linear .5s infinite;
        cursor: pointer;
        display: inline-block;
        position: relative;
        margin-top: -15px;
        margin-left: -30px;
        -webkit-animation-play-state: running;
        animation-play-state: running;
    }
    
    .star_holder {
        display: inline;
        margin-right: 5px;
        /* margin-bottom: -5px; */
    }
    
    .medal {
        width: 30px;
        height: 30px;
        cursor: pointer;
        display: inline-block;
        position: relative;
        background-repeat: no-repeat;
        margin: auto;
        background-size: contain !important;
        background-repeat: no-repeat !important;
    }
    
    .medal-1 {
        background: url(/assets/img/medal/1.svg);
        background-repeat: no-repeat;
    }
    
    .medal-2 {
        background: url(/assets/img/medal/2.svg);
        background-repeat: no-repeat;
    }
    
    .medal-3 {
        background: url(/assets/img/medal/3.svg);
        background-repeat: no-repeat;
    }
    
    .medal-4 {
        background: url(/assets/img/medal/4.svg);
        background-repeat: no-repeat;
    }
    
    .medal-5 {
        background: url(/assets/img/medal/5.svg);
        background-repeat: no-repeat;
    }
    .errplace {
        position: relative;
        /* margin-top: -5px; */
        /* border: 1px solid red; */
        /* height: 10px !important; */
        /* line-height: 1px !important; */
        display: inline-block;
    }
    
    
    
    label {
        /* text-align: right; */
        /* margin-top: 10px; */
        /* margin-right: 20px; */
        /* direction: rtl; */
    }
    
    tbody {
        overflow: scroll;
        height: 100px;
        direction: rtl;
    }
    
    .make-exam-box> .alert {
        width: 90%;
        margin: auto;
        margin-bottom: 25px;
    }
    
    .circle_btn.help_btn {
        left: 20px;
        top: 120px;
        padding-top: 20px !important;
        position: absolute;
        font-weight: normal;
        background-color: #f9c231;
    }
    
    .add_exam {
        padding-top: 20px !important;
        position: absolute;
        left: -15px;
        top: -115px;
        float: left;
        box-shadow: unset !important;
    }
    
    .section {
        display: inline-block;
        /* border: 1px solid black; */
        width: 100%;
        height: 28px;
        position: relative;
    }
    
    
    .select_another_lesson .dropdown-toggle {
        background-color: #eaf8ff;
        color: #42c4ff !important;
        padding: 8px;
        /* box-shadow: 0 3px 6px rgba(0,0,0,.18); */
        cursor: pointer;
        -webkit-transition: all .15s ease-in-out;
        -o-transition: all .15s ease-in-out;
        border-radius: 5px;
        transition: all .15s ease-in-out;
        font-size: 16px;
    }
    
    .select_another_lesson .dropdown-toggle:hover, .dropdown.open .dropdown-toggle {background-color: #f7fdff;}
    
    .aboveLessons {
        min-width: 216px;
        /* position: absolute; */
        right: 20px;
        height: 20px;
        direction: rtl;
        display: flex;
        /* top: -29px; */
        justify-content: flex-start;
        /* zoom: .9; */
        white-space: nowrap;
    }
    
    .select_another_lesson li {
        list-style: none;
        font-size: 13px;
    }
    
    
    
    .select_another_lesson .dropdown-menu>li>a:focus, .select_another_lesson .dropdown-menu>li>a:not(.active):hover {
        color: #51bff0;
        text-decoration: none;
        background-color: #f5fbff;
    }
    
    .select_another_lesson a {
        color: white;
    }
    
    .select_another_lesson .dropdown-menu, .select_another_lesson .dropdown-menu a {
        background-color: white;
        color: black;
        font-size: 14px;
    }
    
    
    
    .select_another_lesson ul.dropdown-menu {
        border: 4px solid #ffffffbd;
        border-radius: 5px;
        /* margin-top: 14px; */
        /* margin-left: -20px; */
    }
    
    .add_text{
        padding-top: 17px !important;
        position: relative;
        left: 100px;
        top: -90px;
        float: left;
        /* transform: scale(.85) translatey(5px); */
    }
    
    .add_text p {
        color: #53b1dc;
        font-size: .4em;
        width: 80px;
        /* line-height: 2px; */
        background-color: #e5f7ff;
        border-radius: 10px;
        margin-top: 10px;
        letter-spacing: 1px;
        margin-left: -5px;
        padding: 5px;
        text-align: center;
    }
    
    .circle_btn {
        border-radius: 100px;
        font-size: 25px;
        background: #29b6f6;
        color: #fff;
        text-align: center;
        display: inline-block;
        height: 65px;
        width: 65px;
        vertical-align: top;
        box-shadow: -1px 3px 0px rgb(71 169 212);
        margin: 2px 5px;
        cursor: pointer;
        -webkit-transition: all .15s ease-in-out;
        -o-transition: all .15s ease-in-out;
        transition: all .15s ease-in-out;
    }
    
    .circle_btn:hover {
        background: #42c4ff;
    }
    
    .small_alert {
        /* width: 300px; */
        margin: auto;
        height: 30px;
        direction: rtl;
    }
    
    span.alert_message {
        margin: 5px;
    }
    
    #change_keyboard_btn:hover {
    opacity: .8;
    }
    
    #change_keyboard_btn,#change_keyboard_color {
        font-size: 1.6em;
        width: 40px;
        float: right;
        right: -100px;
        top: 30px;
        margin-right: 50px !important;
        position: absolute;
        padding: 5px;
        padding-right: 6px;
        color: #000000;
        z-index: 100;
    }
    
    #not_supported_btn{
        font-size: 1.6em;
        width: 40px;
        float: right;
        right: -85px;
        top: 90px;
        margin-right: 50px !important;
        position: absolute;
        padding: 5px;
        background-color: #f43103;
        z-index: 10;
    }
    
    #not_supported .fa {
        color: red;
        margin: 5px;
    }
    
    div#not_supported {
        margin-top: 30px;
    }
    
    .whitebtn {
        padding: 10px;
        border: 1px solid;
        color: white;
        /* width: 150px; */
        border-radius: 30px;
        -webkit-border-radius: 30px;
        -moz-border-radius: 30px;
        font-size: 25px;
        font-weight: normal;
    }
    
    .whitebtn:hover {
        background-color: #ffffff;
        padding: 10px;
        border: 1px solid;
        color: #5ac0ed;
        cursor: pointer;
    }
    
    .hands_holder {
        position: relative;
        width: 1040px;
        /* height: 220%; */
        overflow: hidden;
        left: -132px;
        top: -106px;
        /* overscroll-behavior: none; */
        z-index: 99;
    }
    
    div#hands {
        display: block;
        opacity: 1;
        width: 685px;
        position: relative;
        margin-left: -342.5px;
        top: 15px;
        left: -20px;
    }
    
    #examfrm >.alert.alert-info {
        width: 80%;
        margin: auto;
    }
    
    .animation {
        transition: all 0.2s ease;
        -moz-transition: all 0.2s ease;
        -o-transition: all 0.2s ease;
        -ms-transition: all 0.2s ease;
        -khtml-transition: all 0.2s ease;
        -webkit-transition: all 0.2s ease;
    }
    
    
    
    .line {
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        width: 1100px;
        border: 1px solid black;
        clear: both;
        height: 170px;
        display: inline-flex;
        direction: rtl;
    }
    
    .nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
        color: #fff;
        background-color: #42c4ff !important;
    }
    
    .rec {
        width: 240px;
        height: 100%;
        text-align: center;
        background-color: #37a18e;
        color: white;
        font-size: 20px;
        /* border-radius: 130px; */
        cursor: pointer;
        border-top: 3px solid #0c161b;
        /* border-left: 1px solid #00adff; */
    }
    
    .rec:hover {
        background-color: #1a1a1b;
        /* font-size: 21px; */
    }
    
    .lessondes {
        width: 690px;
        /* border: 1px solid; */
        top: 10px;
        position: relative;
        left: 40px;
        /* background-color: #2a5b7d; */
        color: #949494;
        padding: 10px;
        height: 150px;
        border-radius: 20px;
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
    }
    
    h3.title {
        font-size: 30px;
    }
    
   
    
    .rectitle {
        font-size: 19;
        text-align: center;
        width: 100%;
        /* border: 1px solid red; */
        background-color: #37a18e;
        padding: 10px 0 10px 0;
        border-bottom: 1px solid #0a5210;
    }
    
    .return {
        position: absolute;
        width: 90px;
        left: 400px;
        background-image: url("back.svg");
        height: 90px;
        background-size: contain;
        top: -10px;
    }
    
    .return:hover {
        -webkit-animation: spin 4s linear infinite;
        animation: spin 4s linear infinite;
    }
    
    @-webkit-keyframes spin {
        100% {
            -webkit-transform: rotate(360deg);
        }
    }
    
    @keyframes spin {
        100% {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }
    
    @-webkit-keyframes blink {
        0% {
            opacity: 1;
        }
    
        50% {
            opacity: 0;
        }
    
        100% {
            opacity: 1;
        }
    }
    
    @keyframes blink {
        0% {
            opacity: 1
        }
    
        50% {
            opacity: 0
        }
    
        100% {
            opacity: 1
        }
    }
    
    @-webkit-keyframes waiting {
        0% {
            opacity: 1;
        }
    
        50% {
            opacity: .6;
        }
    
        100% {
            opacity: 1;
        }
    }
    
    @keyframes waiting {
        0% {
            opacity: 1
        }
    
        50% {
            opacity: .6
        }
    
        100% {
            opacity: 1
        }
    }
    
    /*
    @keyframes shake {
      0% { transform: translate(1px, 1px) rotate(0deg); color:black !important;}
      10% { transform: translate(-1px, -2px) rotate(-1deg); }
      20% { transform: translate(-3px, 0px) rotate(1deg); }
      30% { transform: translate(3px, 2px) rotate(0deg); }
      40% { transform: translate(1px, -1px) rotate(1deg); color:#6cc1f3  !important;}
      50% { transform: translate(-1px, 2px) rotate(-1deg); }
      60% { transform: translate(-3px, 1px) rotate(0deg); }
      70% { transform: translate(3px, 1px) rotate(-1deg); }
      80% { transform: translate(-1px, -1px) rotate(1deg); }
      90% { transform: translate(1px, 2px) rotate(0deg); }
      100% { transform: translate(1px, -2px) rotate(-1deg); color:black  !important;}
    }
    */
    
    .smallbtn, .largbtn {
        .whitebtn: hover {
            background-color: #ffffff;
            padding: 10px;
            border: 1px solid;
            color: #5ac0ed;
            cursor: pointer;
        }
    
        .whitebtn: hover {
            background-color: #ffffff;
            padding: 10px;
            border: 1px solid;
            color: #5ac0ed;
            cursor: pointer;
        }
    
        .whitebtn: hover {
            background-color: #ffffff;
            padding: 10px;
            border: 1px solid;
            color: #5ac0ed;
            cursor: pointer;
        }
    
        adding: 10px;
        border: 2px solid white;
        color: #ffffff;
        width: 150px;
        border-radius: 30px;
        -webkit-border-radius: 30px;
        -moz-border-radius: 30px;
        font-size: 14px;
        font-weight: normal;
        margin: 0px 3px 90px 0;
        text-decoration: none;
        padding: 5px;
        position: relative;
        top: 5px;
        cursor: pointer;
    }
    
    #instructions a.blue-button {
        font-size: 2em;
    }
    
    #instructions a.blue-button:hover {
        color: white
    }
    
    .help-btn {
        font-size: 18px !important;
        color: var(--maincolor);
        cursor: pointer;
    }
    
    .blue-button {
        background: #42c4ff;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        cursor: pointer;
        color: #ffffff;
        font-family: VazirFD,tahoma;
        text-align: center;
        font-size: 1.2em;
        height: 36px;
        margin: 5px;
        margin-left: 10px;
        padding: 10px;
        width: auto;
        -webkit-box-shadow: 0px 3px 0px 0px #4aa7d0;
        box-shadow: 0px 3px 0px 0px #4aa7d0;
        -webkit-transition: all 0.2s;
        -o-transition: all 0.2s;
        transition: all 0.2s;
    }
    
    .in-line .blue-button {
        display: inline-block;
    }
    
    .in-line {
        display: inline-block;
        width: auto;
    }
    
    .blue-button:hover, .blue-button:focus,.blue-button:active {
        box-shadow: 0px 1px 0px 0px #4ca7cf;
        background: #29b6f6;
        outline: unset;
        color: white !important;
    }
    
    .blue-button.selected {
        box-shadow: 0px 1px 0px 0px #4ca7cf;
        background: #0299dc;
    }
    
    .tab-content .row {
        margin-top: 10px;
        direction: rtl;
    }
    
    .nav-tabs span.fa {
        margin: 5px;
    }
    
    .switch {
        color: #2f2e2f !important
    }
    
    /* The switch - the box around the slider */
    .switch {
        position: relative;
        display: inline-block;
        width: 60px;
        height: 34px;
        top: -5px;
        right: 4px;
    }
    
    /* Hide default HTML checkbox */
    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }
    
    /* The slider */
    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        -webkit-transition: .4s;
        transition: .4s;
    }
    
    .slider:before {
        position: absolute;
        content: "";
        height: 26px;
        width: 26px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }
    
    input:checked + .slider {
        background-color: var(--maincolor);
    }
    
    input:focus + .slider {
    }
    
    input:checked + .slider:before {
        -webkit-transform: translateX(26px);
        -ms-transform: translateX(26px);
        transform: translateX(26px);
    }
    
    /* Rounded sliders */
    .slider.round {
        border-radius: 34px;
    }
    
    .slider.round:before {
        border-radius: 50%;
    }
    
    .smallbtn:hover, .largbtn:hover {
        color: #000000;
        background-color: white;
    }
    
    .form-control:focus{
        -webkit-box-shadow: unset !important;
        box-shadow: unset !important;
    }
    .loginform {
        border: 2px solid white;
        position: absolute;
        right: 210px;
        top: 85px;
        width: 250px;
        height: 200px;
        border-top-right-radius: 20px;
        /* background-color: white; */
        /* opacity: 0.5; */
        /* border-bottom-left-radius: 20px; */
        /* border-radius: 10px; */
    }
    
    label {
        text-align: center;
        color: #ffffff;
        direction: rtl;
    }
    
    .theme {
        width: 90%;
        height: auto;
        /* border: 1px solid; */
        margin: auto;
        /* text-align: left; */
    }
    
    select#sel1 {
        height: 44px;
        width: 60%;
        margin: auto;
    }
    
    .theme img {
        box-sizing: border-box;
        display: inline-block;
        margin: 6px;
        width: 64px;
        height: 64px;
        border-radius: 100%;
    }
    
    .theme-img:hover {
        opacity: .8;
        transition: all .5s ease;
    }
    
    .theme img:hover {
        /* filter: brightness(90%); */
        transform: scale(1.1);
        -webkit-transform: scale(1);
        -ms-transform:scale(1);
        /* border: solid 2px #20ccff; */
    }
    
    .theme img {
        cursor: pointer;
        /* border: solid 2px #d4d4d4; */
        transition: .2s ease-in-out transform;
    }
    
    .box {
        margin: 10px 25px 5px 12%;
        border: none;
        /* border-radius: 10px; */
        height: 30px;
        font-size: 20px;
        color: #909596;
        padding: 5px;
        width: 190px;
        text-align: center;
        /* font-weight: bold; */
    }
    
    input[type="submit"] {
    }
    
    .loginform .btn {
        position: relative;
        width: 250px;
        background-color: #51b7e4;
        color: #ffffff;
        border: none;
        height: 38px;
        margin-bottom: 30px;
        /* left: 0px; */
        border: none;
        top: -20px;
        font-size: 18px;
    }
    
    .profilebox {
        position: absolute;
        right: 10px;
        width: 220px;
        margin-top: 30px;
        border: 2px solid white;
        height: 90px;
        border-radius: 30px;
        -webkit-border-radius: 30px;
        -moz-border-radius: 30px;
        text-align: right;
    }
    
    .msgbox {
        width: 100%;
        height: 60px;
        position: fixed;
        /* border: 1px solid white; */
        background-color: rgba(0, 0, 0, 0.61);
        z-index: 9999;
        color: #ffffff;
        text-align: center;
        padding-top: 20px;
        font-size: 21px;
        font-weight: normal;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        direction: rtl;
    }
    
    .msgbox a {
        color: white;
    }
    
    .ubtn {
        margin: 0px 10px 1px 10px;
        background-color: #58beeb;
        padding: 4px 10px 0px 10px;
        border-bottom: 6px solid #19637d;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        height: 44px;
    }
    
    .ubtn:hover {
        background-color: #56b3dc;
        padding: 6px 10px 2px 10px;
        border-bottom: 2px solid #1a4656;
    }
    
    .msgboxc {
        color: white;
        margin-right: 70px;
    }
    
    .profile {
        width: 300px;
        /* border: 1px solid white; */
        text-align: right;
        top: 10px;
    }
    
    .topmenu {
        float: left;
        position: absolute;
        left: 30px;
        top: 12px;
        font-size: 20px !important;
    }
    
    .username {
        color: #127aab;
        /* width: 150px; */
        font-size: 10px;
        font-weight: normal;
        text-decoration: none;
        padding: 5px;
        /* position: relative; */
        /* top: 5px; */
    }
    
    .blur{
    
        -moz-filter: blur(3px);
        -o-filter: blur(3px);
        -ms-filter: blur(3px);
        -webkit-filter: blur(3px);
        filter: blur(3px);
        
    }
    
    .lessonname {
        padding: 5px;
        min-width: 100px;
        width: auto;
        color: #6d6d6d;
        font-size: 14px;
        margin-bottom: 10px;
        right: 10px;
        text-align: center;
        direction: rtl;
        font-family: 'kalamehblack';
        font-size: 26px;
    }
    
    .lesson.here .lsn-num::before {
        content: ".";
        color: #ff9800;
        /* font-size: 80px; */
        /* text-shadow: unset !important; */
        /* box-shadow: unset !important; */
        /* -webkit-box-shadow: unset !important; */
        animation: here .1s;
        height: 10px;
        width: 10px;
        right: 15px;
        top: 15px;
        position: absolute;
        line-height: 10px;
        animation-duration: 1s;
        /* animation-delay: 1s; */
        animation-name: here;
        animation-iteration-count: infinite;
        animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
        border-radius: 50%;
        /* -webkit-border-radius: 50%; */
        -moz-border-radius: 50%;
        background-color: #ff9800;
    }
    
    .heart-beat{
    
    
    }
    
    
    
    .lesson {
        display: inline-block;
        margin: 5px;
        cursor: pointer;
        position: relative;
        width: 160px;
        height: 160px;
        padding: 10px;
        background: white;
        /* border-top: 1px solid #eeeeee; */
        /* box-shadow: 0px -1px 0px 1px rgb(0 0 0 / 6%), 0 4px 0px 0 rgb(0 0 0 / 9%); */
        -o-transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
        transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        border-radius: 3px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        transition: transform .25s cubic-bezier(.42,0,.61,1.86);
        border-radius: 10px;
    }
    
    .lesson_needs_upgrade {
        display: inline-block;
        margin: 5px;
        cursor: pointer;
        position: relative;
        width: 160px;
        height: 160px;
        padding: 10px;
        background: rgba(247, 247, 247, 1);
        /* box-shadow: 0 1px 4px 0 rgba(0,0,0,0.37); */
        /* transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1); */
        border-radius: 3px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        opacity: .5;
    }
    
    .edsvg-ln-default {
        background-position: 66.66666666666667% 62.5%;
        width: 100px;
        height: 100px;
    }
    
    student.min.css?v4:9 .edsvg {
        background: url(../img/edsvg.svg) no-repeat;
    }
    
    .small-star {
        background-size: 143px 330px;
        background-image: url(/assets/img/stars.png);
        height: 55px;
        position: relative;
        z-index: 200;
        top: 30px;
    }
    
    .stars-5 {
        background-position: 0px 110px;
    }
    
    .stars-4 {
        background-position: 0px 165px;
    }
    
    .stars-3 {
        background-position: 0px 220px;
    }
    
    .stars-2 {
        background-position: 0px 275px;
    }
    
    .stars-1 {
        background-position: 0px 330px;
    }
    
    .stars-0 {
        background-position: 0px 390px;
    }
    
    .lsn-des {
        font-size: 14px;
        text-align: center;
        margin: 10px 0px 10px 0px;
    }
    
    .eng_font_ {
        font-family: vazir !important;
    }
    
    #text_holder.eng_font_ {
        
        font-family: vazir !important;
        letter-spacing:4px;
    }
    
    .lesson-box {
        direction: rtl;
        text-align: center;
        height: auto;
        min-height: 300px;
        max-height: 450px;
        overflow: scroll;
        overflow-x: visible;
        /* margin-bottom: 30px; */
    }
    
    .startlesson {
        /* display: none; */
    }
    
    span.press-key {
        background-color: #42c4ff;
        color: white;
        padding: 5px 25px 5px 25px;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        margin: 10px 10px 10px 10px;
    }
    
    .lesson-btn {
        font-size: 20px;
    }
    
    h3#starttheexam {
        background: #42c4ff;
        border-radius: 10px;
        cursor: pointer;
        color: #ffffff;
        font-family: Vazir,tahoma;
        text-align: center;
        font-size: 20px;
        height: 56px;
        margin: auto;
        /* letter-spacing: 1px; */
        margin-top: 20px;
        max-width: 100%;
    }
    
    #lesson-btn, #start-lesson, .start_competition, #starttheexam, #sent-text-to-server,#load_more,.bigbluebtn {
        cursor: pointer;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        margin-top: 20px;
        max-width: 30%;
        margin: 20px auto 5px auto;
        color: white;
        height: 80px;
        background: #42c4ff;
        top: 100px;
        padding: 20px;
        font-size: 2em;
        border: none;
        box-shadow: 0px 8px 0px 0px #41baf1;
        -webkit-transition: all 0.2s;
        -o-transition: all 0.2s;
        transition: all 0.2s;
        color: white;
    }
    
    #lesson-btn:hover, #start-lesson:hover, .start_competition:hover,#starttheexam:hover,#sent-text-to-server:hover,.bigbluebtn:hover {
        top: 108px;
        box-shadow: 0px 3px 0px 0px #42c4ff;
        background: #5ecdff;
        border: unset;
    }
    
    #send_this_text {
        width: 100%;
        min-height: 200px;
        margin: 0px 5px 10px 5px;
        resize: none;
        /* border-radius: 10px; */
        padding: 10px;
        border: 1px solid #8ccfe8;
    }
    
    
    make-exam-box .alert.alert-info {
        font-size: .5em;
    }
    
    .send_text_modal .alert.alert-info {
        font-size: .9em;
    }
    
    p#count-chars {
        position: absolute;
        font-size: .9em;
        bottom: -20px;
        background-color: #ffffff;
        color: #55bbe8;
        /* font-weight: 900; */
        border-radius: 5px;
    }
    
    
    .send-text-div {
        position: relative;
        border-radius: 5px;
    }
    
    #sent-text-to-server {
        max-width: 100% !important;
        height: 50px;
        line-height: 9px;
        letter-spacing: 1px;
        margin-top: -5px;
    }
    
    
    
    .user_speed>span.number, .user_acc>.number {
        width: 200px;
        color: #768caf;
        width: 30px !important;
        text-align: center;
        display: inline-block;
    }
    
    .lsn-speed,.lsn-needs {
        position: absolute;
        /* zoom: .9; */
        /* width: 90%; */
        direction: rtl;
        top: 63px;
        color: #bfbfbf;
        left: 25px;
    }
    
    span.needed_speed {
        background-color: #ff6464;
        color: white;
        padding: 2px 6px 0px 6px;
        font-size: 12px;
        /* border: 1px solid white; */
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        /* margin: 5px; */
        /* -webkit-box-shadow: -1px 1px 4px 0px #d86149; */
        /* box-shadow: -1px 1px 4px 0px #d86149; */
        cursor: pointer;
        width: 10px !important;
    }
    
    #show-msg {
        */ height: 40px;
        text-align: center;
        background: #4db7d6;
        color: #ffffff;
        padding: 10px;
        border-bottom: 4px solid #2995b5;
        margin-bottom: 30px;
        cursor: pointer;
    }
    
    textarea#usertext {
        outline: unset;
        outline: #32c0ff;
        resize: vertical;
    }
    
    audio#lsound {
        outline: none;
        display: none;
    }
    
    #audio_holder img.emoji {
        width: 1.2em;
        height: 1.2em;
    }
    
    #audio_holder .alert {
        color: #a7a7a7;
        font-size: 16px;
        margin-top: 50px;
    }
    
    div#unsupportedk {
        position: absolute;
        right: -24px;
        color: #ffb613;
        font-size: 20px;
        top: 90px;
    }
    
    textarea#usertext:focus {
        outline: unset;
        outline: #32c0ff;
        border-color:#15aafb;
    }
    
    .green-btn {
        background: #45cc5c;
    }
    
    .blue-btn {
    }
    
    
    
    g#keys {
    }
    
    div#vkeyboardhand {
        background-color: #f7f7f7;
        border-radius: 20px;
    }
    
    #keyboard text {
        font-family: 'Vazir';
    }
    
    #keyboard_place:not(.color) path.active {
        fill: rgb(121, 187, 255);
    }
    
    
        .hands_holder .st0{display:none;}
        .hands_holder .st1{display:inline;/* opacity: 0.23; */fill: transparent !important;}
        .hands_holder .st2{display:inline;fill: transparent;stroke-width: 1;stroke-miterlimit:10;}
        .hands_holder .st3{display:inline;opacity: 0;}
        .hands_holder .st4{fill:#AEB0B2;}
        #keyboard_place:not(.color) .hands_holder .st5{display:inline;stroke-width: 2;stroke: #29b6f6;stroke-linecap:round;stroke-miterlimit:10;}
        #keyboard_place.color .hands_holder .st5{display:inline;fill:none;stroke: #000000;stroke-width: 2;stroke-linecap:round;stroke-miterlimit:10;}
    .num_pad_btn path:nth-child(3) {
        /* fill: #ececec; */
    }
    
    
    #numbers text {
        /* font-size: 1.3em; */
        font-family: vazir;
        font-weight: bolder;
        fill: #949494;
    }
    
    .num_pad_btn path:nth-child(1) {
        fill: none;
        stroke: #cccccc;
    }
    
    .num_pad_btn path:nth-child(2) {
        fill: #ffffff;
    }
    
    .num_pad_btn path:nth-child(3) {
        fill: #ffffff;
    }
    
    .num_pad_btn.active path:nth-child(1) {
        fill: #50c7ff;
    }
    
    .num_pad_btn.active path:nth-child(2) {
        fill: #50c7ff;
    }
    
    .num_pad_btn.active path:nth-child(3) {
        fill: #03A9F4;
    }
    
    .num_pad_btn.incorrect path:nth-child(1) {
        fill: #ff6c6f;
    }
    
    
    .num_pad_btn.incorrect path:nth-child(2) {
        fill: #ff6c6f;
    }
    
    .num_pad_btn.incorrect path:nth-child(3) {
        fill: #ff4044;
    }
    
    
    .path.correct {
        stroke: #C2EA9A;
        stroke-width: 4;
    }
    
    #keyboard_place:not(.color) path.active {
        stroke: #03A9F4;
        stroke-width: 2px;
        fill: #42c4ff !important;
    }
    
    text.incorrect {
        fill: white !important;
    }
    
    #keyboard .st0 {
        fill: #ffffff !important;
        stroke: transparent;
        /* stroke-width: 2 !important; */
        stroke-miterlimit: 10;
        font-family: 'Vazir' !important;
        font-weight: 900;
    }
    
    .theme-codder #keyboard .st0 {
        fill: #0000009c !important;
        stroke: transparent;
        /* stroke-width: 2 !important; */
        stroke-miterlimit: 10;
    }
    
    .theme-codder div#vkeyboardhand {
        background-color: #434343;
        border-radius: 20px;
    }
    
    .theme-dark-rocket #keyboard .st0 {
        fill: #0000009c !important;
        stroke: transparent;
        /* stroke-width: 2 !important; */
        stroke-miterlimit: 10;
    }
    
    .theme-dark-rocket div#vkeyboardhand {
        background-color: #434343;
        border-radius: 20px;
    }
    
    
    .hands_holder .st0 {
        stroke: #828282 !important;
        fill: none !important;
    }
    
    #account-dialog.active {
        display: block;
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.8);
        z-index: 9999;
        overflow: auto;
        padding-bottom: 10px;
    }
    
    #account-dialog>section .btn-primary {
        margin: 9px auto 0 auto;
    }
    
    #account-dialog>section {
        display: none;
        margin-top: 80px;
        width: 420px;
        margin-left: auto;
        margin-right: auto;
    }
    
    div#hands {
        opacity: 0.5;
    }
    
    .please_login_msg p {
        text-align: center;
        margin: 10px;
    }
    
    .please_login_msg {
        width: 52%;
        margin: 1% auto;
        padding: 2px;
        text-align: center;
        padding: 5px !important;
    }
    
    .text_settings {
        position: relative;
    }
    
    p#extand_text {
        position: absolute;
        top: -35px;
        left: 95px;
    }
    
    .support {
        background-image: url(/assets/img/happyface.svg);
    }
    
    .smartphone {
        background-image: url(/assets/img/otg.svg);
        width: 260px;
        height: 120px;
        margin: 5px auto;
        background-repeat: no-repeat;
        background-size: contain;
    }
    
    .image-icon {
        width: 90px;
        height: 90px;
        margin: 5px auto;
        background-repeat: no-repeat;
    }
    
    img.top-icon {
        width: 150px;
        margin-bottom: -20px;
        margin-top: -30px;
    }
    section#support-dialog, section#smartphone-dialog {
        display: none;
        margin-top: 50px;
        width: 60%;
        height: 85%;
        margin-left: auto;
        margin-right: auto;
        overflow: auto;
    }
    
    #account-dialog>section p a {
        margin: 0 11px;
        color: white;
    }
    
    #account-dialog>section p a:hover {
        margin: 0 11px;
        color: #d1d1d1;
    }
    
    section#support-dialog p, section#smartphone-dialog p {
        color: #d8d8d8;
        font-size: 1.1em;
    }
    
    a#show_support {
        background-color: #61cfff;
    }
    
    #support-dialog .alert {
        padding: 6px;
        width: 80%;
        margin: auto;
    }
    
    a#show_support:hover {
    }
    
    
    #line,#rline {
       
        position: relative;
        display: inline;
    }
    
    #line span, #rline span {
        position: absolute;
        font-size: inherit;
        animation: fadein 1s infinite;
        -moz-animation: fadein 1s infinite;
        -webkit-animation: fadein 1s infinite;
        -o-animation: fadein 1s infinite;
    }
    
     #line span,  #rline span {/* margin-right:-2px; */border: 1px solid;height: 80%;background-color: black;margin-top: 10px;}
    
    
    
    span {}
    .theme-codder #line span,.theme-codder #rline span{
    
         background-color: #ffffff;
         color:white;
    }
    
    #pb_text_holder #line{}
    
    div#text_holder span.incorrect:nth-last-child(1) {
     background-color: #fff6f6 !important;
     border-bottom:4px solid;
     color: #e7246b;
     animation: typeit 0.7s linear;
    }
    
    .theme-codder #text_holder span.incorrect:nth-last-child(1) {
     background-color: #a00c0c !important;
     border-bottom:4px solid;
     color: #ff8686;
    }
    
    #pb_text_holder #line {margin-top: 13px;font-size: 21px;text-align: center;animation: fadein 1s infinite;-moz-animation: fadein 1s infinite;-webkit-animation: fadein 1s infinite;-o-animation: fadein 1s infinite;/* display: inline-block; */height: 20px;vertical-align: top;position: absolute;display: none;}
    
    @keyframes fadein {
        0% {
            
            opacity: 1;
        }
       70% {
            
            opacity: 1;
        }
        80% {
            opacity: 0;
           
        }
    
        100% {
            opacity: 0;
           
        }
    }
    
    @-webkit-keyframes fadein {
     
        0% {
            
            opacity: 1;
        }
       70% {
            
            opacity: 1;
        }
        80% {
            opacity: 0;
           
        }
    
        100% {
            opacity: 0;
           
        }
    }
    
    .wpmanimation {
        -webkit-animation-name: wpm;
        /* Safari 4.0 - 8.0 */
        -webkit-animation-duration: 4s;
        /* Safari 4.0 - 8.0 */
        -webkit-animation-iteration-count: infinite;
        /* Safari 4.0 - 8.0 */
        animation-name: wpm;
        animation-duration: 4s;
        animation-iteration-count: infinite;
    }
    
    /* Safari 4.0 - 8.0 */
    @-webkit-keyframes wpm {
        0% {
            font-size: 18px;
        }
    
        100% {
            font-size: 25px;
        }
    }
    
    /* Standard syntax */
    @keyframes wpm {
        0% {
            font-size: 18px;
          
        }
    
        50% {
            font-size: 22px;
            
        }
    
        100% {
            font-size: 18px;
        }
    }
    
    div#test {
        /* background-color: white; */
        /* padding: 30px; */
        /* border-radius: 30px; */
        height: auto;
    }
    
    /* Add a black background color to the top navigation */
    .topnav {
        background-color: #41b4e8;
        overflow: hidden;
        direction: rtl;
    }
    
    /* Style the links inside the navigation bar */
    .topnav a {
        float: right;
        display: block;
        text-align: center;
        padding: 14px 16px;
        /* text-decoration: none; */
        font-size: 110%;
        color: white;
        cursor: pointer;
    }
    
    /* Change the color of links on hover */
    .topnav a:hover {
        background-color: #3ca7d8;
        color: white;
    }
    
    /* Hide the link that should open and close the topnav on small screens */
    .topnav .icon {
        display: none;
    }
    
    /* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
    @media screen and (max-width: 1080px) {
    
            .iframe-container {
    
      padding-top: 150% !important;
    
    }
    
        .topnav a:not(:first-child) {
            display: none;
        }
    
        .topnav a.icon {
            float: right;
            display: block;
        }
    
        ._m {
            display: block;
        }
    }
    
    
    
    a.topnavreg {
        background-color: #ffffff !important;
        color: #000000 !important;
    }
    
    #register, #loginbtn {
        cursor: pointer;
    }
    
    .brand {
        /* position: absolute; */
        /* right: 70px; */
        /* top: 4px; */
        /* color: white; */
        /* font-size: .9em; */
        /* display: none; */
    }
    
    .brand span:not(.brandd) {
        font-family: 'kalamehblack';
        font-size: 2.1em;
    }
    
    popup_button btn{
        font-family:vazir !important;
    }
    
    a.typeoName {
        font-size: 2.1em !important;
        font-family: 'kalamehblack';
    }
    
    a#register {
        color: #ffffff;
        background-color: #fd5a4e;
        transition: background-color .5s;
    }
    
    #menu3 .row {
        border-bottom: 1px solid #eeeeee;
    }
    
    #menu3 div {
        font-size: 13px;
        line-height: 24px;
    }
    
    .nocolor.selected_char {color: unset !important;background-color: transparent !important;}
    
    a#register:hover {
        /* color: #F44336; */
        background-color: #ff9800;
    }
    
    li .fa {
        margin-left: 5px;
    }
    
    .special:hover {
        background-color: #41b4e8 !important;
        color: white !important;
    }
    
    .select_lesson_btn {
        width: 200px;
        position: absolute;
        margin-left: -30px;
        margin-top: 60px;
        -webkit-box-shadow: 0 8px 30px rgba(60,72,91,.24);
        box-shadow: 0 8px 30px rgba(60,72,91,.24);
        border-radius: 3px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        display: inline-block;
        padding: 8px 5px;
        background-color: #fff;
        display: block;
        z-index: 9;
        list-style: none;
    }
    
    ._m {
        width: 190px;
        height: 5px;
        float: right;
        /* display: none; */
        text-align: center;
        font-size: 110%;
        color: white;
        cursor: pointer;
        /* margin-top: 0px; */
    }
    
    .btn.dropdown-toggle {
        background-color: #41b3e7;
        color: #ffffff;
        font-size: 110%;
    }
    
    .dropdown-menu>li>a {
        width: 100%;
        font-size: 1.2em;
        transition: all .15s ease-in-out;
    }
    
    .nav ul.dropdown-menu {
        /* box-shadow: 0px 2px 2px rgb(0 0 0 / 9%); */
        border: 4px solid #ffffffab;
        border-bottom-color: #dedede38;
        border-radius: 4px;
        border-bottom-right-radius: 13px;
        border-bottom-left-radius: 13px;
        -webkit-transition: all .15s ease-in-out;
        -o-transition: all .15s ease-in-out;
        transition: all .15s ease-in-out;
    }
    
    .select_lesson_btn a {
        width: 100%;
        height: auto;
        margin: 0;
        position: relative;
        color: #41b4e8;
    }
    
    .buttons {
        text-align: center;
        margin-bottom: 40px;
        display: none;
    }
    
    .largbtn {
        font-size: 120%;
    }
    
    p#start-btn {
        text-align: center;
        color: #095373;
        line-height: 220%;
    }
    
    #account-dialog {
        display: none;
    }
    
    div#pb_button.IE {
        background-color: black;
        opacity: .8;
    }
    
    a.reg-help {
        font-size: 3em;
        color: white;
        position: absolute;
        right: -60px;
        /* display: none; */
    }
    
    .abs {
        position: relative;
    }
    
    #account-dialog>section .form-control {
        font-size: 16px;
        height: auto;
        padding: 10px 14px;
        margin-bottom: 10px;
        font-weight: 400;
        border: solid 1px #D1D1D1;
    }
    
    .form-control {
        display: block;
        width: 100%;
        height: 36px;
        padding: 6px 32px;
        font-size: 16px;
        line-height: 1.42857143;
        color: #555;
        background-color: #fff;
        background-image: none;
        border: 2px solid #e6e9ed;
        border-radius: 2px;
        direction: rtl;
    }
    
    button, input, optgroup, select, textarea {
        color: inherit;
        font: inherit;
        margin: 0;
    }
    
    #account-dialog>section h2 {
        font-size: 2.3em;
        font-weight: 100;
        text-align: center;
        margin-bottom: 22px;
        color: #fff;
    }
    
    .h1, .h2, .h3, h1, h2, h3 {
        margin-top: 22px;
        margin-bottom: 11px;
    }
    
    .get_in_touch {
        width: 220px;
        margin: auto;
        height: 50px;
        text-align: center;
    }
    
    .get_in_touch img {
        width: 45px;
        margin: 0px 10px;
    }
    
    .google-login, .google-login:focus {background-color: #F44336 !important;}
    .google-login:hover {background-color: #f9574b !important;}
    
    span.fa.fa-google {
        padding: 0 10px 0px 10px;
    }
    
    div#saving {
        position: absolute;
        direction: rtl;
        color: inherit;
        padding: 5px;
        border-radius: 8px;
        left: 50%;
        /* bottom: 160px; */
        margin-top: -5px;
    }
    
    #saving .fa-refresh {
        -webkit-animation: my_star 3s linear .5s infinite;
        animation: my_star 3s linear .5s infinite;
            -webkit-animation-play-state: running;
        animation-play-state: running;
    }
    
    #saving .fa {
        font-size: inherit;
        padding: 5px;
    }
    
    .col-md-6.form-btn {
        margin-top: 5px;
    }
    
    #account-dialog>section .btn-primary {
        margin: 0 auto 0 auto;
        font-size: 19px;
        /* font-weight: 600; */
        padding: 10px 0;
        display: block;
        width: 200px;
        border: none;
    }
    
    #account-dialog>section p {
        text-align: center;
        color: white;
        font-size: 1.2em;
        margin: 5px 0 0;
        direction: rtl;
        line-height: 2.3em;
    }
    
    #account-dialog .close-btn {
        position: fixed;
        top: 32px;
        right: 32px;
        font-size: 32px;
        font-weight: 700;
        line-height: 1;
        font-weight: 100;
        color: #fff;
        text-decoration: none;
        cursor: pointer;
    }
    
    .end_msg_ {
        cursor: pointer;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        margin-top: 20px;
        max-width: 31%;
        margin: 43px auto 5px auto;
        height: 60px;
        top: 100px;
        padding: 15px;
        font-size: 1.5em;
        font-family: 'Vazir';
        font-weight: 900;
        letter-spacing: -1px;
        border: none;
        -webkit-transition: all 0.2s;
        -o-transition: all 0.2s;
        transition: all 0.2s;
        color: white;
        direction: rtl;
        /* zoom:  .8; */
        text-shadow: -2px 3px #00000038;
    }
    
    ._green_msg {
      background: #5cc160;
      box-shadow: 0px 5px 0px 0px #57b25c;
    }
    
    ._green_msg:hover {
        background: #62ce67;
        box-shadow: 0px 2px 0px 0px #5dbc62;
    }
    
    ._red_msg {
        background: #e86e65;
        -webkit-box-shadow: 0px 8px 0px 0px #c3554d;
        box-shadow: 0px 8px 0px 0px #c3554d;
    }
    
    ._red_msg:hover {
        background: #de6c64;
        -webkit-box-shadow: 0px 2px 0px 0px #c3554d;
        box-shadow: 0px 2px 0px 0px #c3554d;
    }
    
    .infobox {
        display: inline-flex;
        width: 200px;
    }
    
    div#info {
        direction: rtl;
        /* border: 1px solid red; */
        /* width: 100%; */
        margin: auto;
        padding: 5px;
        display: inline-flex;
        /* color: white; */
        text-align: center;
    }
    
    .smallbox {
        width: 380px;
        right: 1%;
        top: 170px;
        text-align: center;
        margin: auto;
        /* zoom: 0.8; */
        margin-bottom: 30px;
        color: #5f5f5f;
    }
    
    #again {
        /* background-image: url(/assets/img/menu/refresh.svg); */
    }
    
    #setting {
        background-image: url(settings.svg);
    }
    
    #again, #setting, #select-lesson, #sound, #show-keyboard, #startstop,#settings-btn {
        width: 50px;
        height: 50px;
        background-size: contain;
        cursor: pointer;
        margin: 5px;
        display: inline-block;
        /* opacity: 0.3; */
    }
    
    #again:active, #select-lesson:active {
        opacity: 0.2;
    }
    
    /* theme ******************************* */
    /* ************************************* */
    .theme-codder {
        background: #0d1110 url(/assets/img/codder.png);
        background-position: right bottom;
        background-size: 100% auto;
        background-repeat: no-repeat;
    }
    
    
    
    .theme-codder div#info{
        color:white !important;
    }    
    
    .theme-codder .alert-warning {
        color: #d2d2d2 !important;
        background-color: #353535 !important;
        border-color: #383838 !important;
    }
    
    .theme-codder .correct {
        color: #28b987;
        background-color: #152d1e;
    }
    
    .theme-codder .incorrect {
        color: #f25656;
        background-color: #a82b2b;
    }
    
    
    .theme-codder .selected_char {
        color: #58fdd6;
        border-bottom: 4px solid #28b987;
        background-color: #0d445e;
    }
    
    .theme-codder .white{
        color: white !important;
    }
    
    .theme-codder div#test .alert-warning {
        color: #ffffff !important;
        background-color: #3e867f !important;
        border-color: #095a53 !important;
    }
    
    .theme-codder .alert a {
        color: #1ac5b7;
    }
    
    
    p.use-chrome {
        /* position: absolute; */
        margin: 0px 0px -15px 0px !important;
        padding: 0px;
        text-align: center;
    }
    
    .use-chrome img {
        width: 15px;
        margin: 5px;
        animation: shake 1s cubic-bezier(.36,.07,.19,.97) 1s both 6;
    }
    
    .theme-codder .smallbox div .fa {
        color: #ffffff;
    }
    
    .theme-codder .smallbox .disabled .fa {
        color: #565656;
    }
    
    .theme-codder .disabled {
        color: #3e3e3e;
    }
    
    .theme-codder .token_unit {
        background-color: #191919;
        color: #fff;
        /* border: 1px solid #fff; */
        border-color: #232323;
    }
    
    .theme-codder .token_unit.select {
        color: #ffffff;
        background-color: #084319;
        /* border: 1px solid #38af91; */
        border-bottom: 9px solid #409655;
    }
    
    .theme-codder {
        background: #000000 url(/assets/img/codder.png);
        background-position: right bottom;
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-position-y: -90px;
    }
    
    .theme-codder .smalltitle, .theme-codder .show_pb span ,.small_alert {
        color: white
    }
    
    .theme-codder #text_holder {
        color: white;
        background-color: #000000b3;
    }
    
    /* End of the theme ******************************* */
    /* ************** *********************************** */
    
    /* theme blue codder ******************************* */
    /* ************************************* */
    .theme-blue-codder {
        background: #000000 url(/assets/img/blue-codder.png);
        background-position: right bottom;
        background-size: 100% auto;
        background-repeat: no-repeat;
    }
    
    
    
    .theme-blue-codder div#info{
        color:white !important;
    }    
    
    .theme-blue-codder .alert-warning {
        color: #d2d2d2 !important;
        background-color: #353535 !important;
        border-color: #383838 !important;
    }
    
    .theme-blue-codder .correct {
        color: #1249a5;
        background-color: #000b33;
    }
    
    .theme-blue-codder .incorrect {
        color: #9f0d42;
        background-color: #45011c;
    }
    
    
    .theme-blue-codder .selected_char {
        color: #29b6f6;
        border-bottom: 4px solid #1249a5;
        background-color: #1565c040;
        animation: none;
    }
    
    .theme-blue-codder div#text_holder span.incorrect:nth-last-child(1) {
     background-color: #820436 !important;
     border-bottom:4px solid;
     color: #e7246b;
    }
    
    .theme-blue-codder .white{
        color: white !important;
    }
    
    .theme-blue-codder div#test .alert-warning {
        color: #ffffff !important;
        background-color: #3e867f !important;
        border-color: #095a53 !important;
    }
    
    .theme-blue-codder .alert a {
        color: #3c3c3c;
    }
    
    .theme-blue-codder #keyboard .st0 {
        fill: #ffffff00 !important;
        stroke: transparent;
        /* stroke-width: 2 !important; */
        stroke-miterlimit: 10;
    }
    
    .theme-blue-codder div#vkeyboardhand {
        background-color: #434343;
        border-radius: 20px;
    }
    
    .theme-blue-codder #keyboard .st0 {
        fill: #0000009c !important;
        stroke: transparent;
        /* stroke-width: 2 !important; */
        stroke-miterlimit: 10;
    }
    
    p.use-chrome {
        /* position: absolute; */
        margin: 0px 0px -15px 0px !important;
        padding: 5px;
        text-align: center;
        font-size: 1.2em;
        width: auto;
        display: inline-block;
        background-color: #fbfbfb;
        border-radius: 10px;
    }
    
    .use-chrome img {
        width: 23px;
        height: 23px;
        margin: 5px;
        animation: shake 1s cubic-bezier(.36,.07,.19,.97) 1s both 6;
    }
    
    .theme-blue-codder .smallbox div .fa {
        color: #ffffff;
    }
    
    .theme-blue-codder .smallbox .disabled .fa {
        color: #565656;
    }
    
    .theme-blue-codder .disabled {
        color: #3e3e3e;
    }
    
    .theme-blue-codder .token_unit {
        background-color: #191919;
        color: #fff;
        border-color: #333333;
        /* border: 1px solid #fff; */
    }
    
    .theme-blue-codder .token_unit.select {
        color: #ffffff;
        background-color: #0a0531;
        /* border: 1px solid #103888; */
        border-bottom: 9px solid #103888;
    }
    
    
    .theme-blue-codder .smalltitle, .theme-blue-codder .show_pb span ,.small_alert {
        color: white
    }
    
    .theme-blue-codder #text_holder {
        color: white;
        background-color: #000000b3;
    }
    
    /* End of the blue codder theme ******************************* */
    /* ************** *********************************** */
    
    /* theme kids ******************************* */
    /* ************************************* */
    .theme-kids div#test .alert-warning {
        /* color: #ff7800; */
        /* background-color: #fdcd7d; */
        /* border-color: #ffc628; */
    }
    
    .theme-kids .alert a {
        /* color: #b1b1b1; */
    }
    
    .theme-kids .smallbox div .fa {
        color: #1897d6;
    }
    
    .theme-kids .smallbox .disabled .fa {
        color: #01346b;
    }
    
    .theme-kids .disabled {
        color: #3e3e3e;
    }
    
    .theme-kids .token_unit {
        background-color: #ffc96e;
        color: #fff;
        border: 2px solid #ffb840;
    }
    
    .theme-kids .token_unit.select {
        color: #ffffff;
        background-color: #209af1;
        border: 2px solid #156db9;
        border-bottom: 9px solid #0b5d96;
    }
    
    .theme-kids {
        background: #ffffff url(/assets/img/kid-background.svg);
        background-position: right bottom;
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-position-y: -90px;
    }
    
    .theme-kids .smalltitle {
        color: #0a0a0a;
    }
    
    .theme-kids #text_holder {
        color: #0c0c0c;
        background-color: #ffffffd4;
        border-radius: 20px;
    }
    
    /* End of the theme kids ******************************* */
    /* ************** *********************************** */
    /* theme ******************************* */
    /* ************************************* */
    .theme-dark-rocket {
        background: #0d1110 url(/assets/img/codder.png);
        background-position: right bottom;
        background-size: 100% auto;
        background-repeat: no-repeat;
    }
    
    .theme-dark-rocket div#info{
        color:white !important;
    } 
    
    .theme-dark-rocket div#test .alert-warning {
        color: #ffffff;
        background-color: #5a5a5a;
        border-color: #797979;
    }
    
    .theme-dark-rocket .white {
        color: white !important;
    }
    
    
    .theme-dark-rocket .alert a {
        color: #0c0c0c;
    }
    
    .theme-dark-rocket #end,.theme-codder #end {
        color: #ffffff;
    }
    
    
    .theme-dark-rocket #line,.theme-dark-rocket #rline {
        border: 1px solid #ffffff;
        background-color: white;
        }
    
    .theme-dark-rocket .correct {
        color: #c55adc;
        background-color: #290d2f;
    }
    
    
    
    
    .theme-dark-rocket .selected_char{
        color: #c557d6;
        background-color: transparent;
    }
    
    .theme-dark-rocket .incorrect {
        color: #f1274a;
        background-color: #90172c;
    }
    
    .theme-dark-rocket .smallbox div .fa {
        color: #ffffff;
    }
    
    .theme-dark-rocket .smallbox .disabled .fa {
        color: #565656;
    }
    
    .theme-dark-rocket .disabled {
        color: #3e3e3e;
    }
    
    .theme-dark-rocket .token_unit {
        background-color: #191919;
        color: #fff;
        border: 1px solid #fff;
    }
    
    .theme-dark-rocket .token_unit.select {
        color: #ffffff;
        background-color: #8b52b1;
        border: 1px solid #c979ff;
        border-bottom: 9px solid #c979ff;
    }
    
    .theme-dark-rocket {
        /* background: #0d1110 url(/assets/img/rocket-background.svg); */
        background: url(/assets/img/rocket-background.svg) repeat-x fixed 0 -1px, -webkit-linear-gradient(#4d1958, #000000) no-repeat fixed 0 0;
        background-position: right bottom;
        background-size: 100% auto;
        background-repeat: no-repeat;
        /* background-position-y: -90px; */
    }
    
    .theme-dark-rocket .smalltitle, .theme-dark-rocket .show_pb span,.small_alert {
        color: white
    }
    
    .theme-dark-rocket #text_holder {
        color: white;
        background-color: #000000b3;
        border-radius: 20px;
    }
    
    .theme-dark-rocket .st0 {
        stroke: #b700ff;
        stroke-width: 0.5;
        stroke-miterlimit: 10;
    }
    
    .theme-dark-rocket .st9,.theme-dark-rocket .st1 {
    }
    
    /* End of the theme ******************************* */
    /* ************** *********************************** */
    /* theme girl ******************************* */
    /* ************************************* */
    /* ************************************* */
    /* ************************************* */
    .theme-girl {
        background: #ddf3ff url(/assets/img/girl-background.svg);
        background-position: right bottom;
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-position-y: -90px;
    }
    
    .theme-girl div#test .alert-warning {
        /* color: #ff7800; */
        /* background-color: #fdcd7d; */
        /* border-color: #ffc628; */
    }
    
    .theme-girl .alert a {
        /* color: #b1b1b1; */
    }
    
    .theme-girl .smallbox div .fa {
        color: #1897d6;
    }
    
    .theme-girl .smallbox .disabled .fa {
        color: #01346b;
    }
    
    .theme-girl .disabled {
        color: #3e3e3e;
    }
    
    .theme-girl .token_unit {
        background-color: #e0edf3;
        color: #79929c;
        border: 2px solid #aac1ca;
    }
    
    .theme-girl .token_unit.select {
        color: #ffffff;
        background-color: #60cfff;
        border: 2px solid #61c3ec;
        border-bottom: 9px solid #54b7e0;
    }
    
    .theme-girl .smalltitle {
        color: #0a0a0a;
    }
    
    .theme-girl #text_holder {
        color: #0c0c0c;
        background-color: #ffffffd4;
        border-radius: 20px;
    }
    
    /* End of the theme girl ******************************* */
    /* ************** *********************************** 
    /* ************** *********************************** */
    /* ************** *********************************** */
    /* ************** *********************************** */
    /* ************** *********************************** */
    /* theme school ******************************* */
    /* ************************************* */
    /* ************** *********************************** */
    /* ************** *********************************** */
    .theme-school div#test .alert-warning {
        /* color: #ff7800; */
        /* background-color: #fdcd7d; */
        /* border-color: #ffc628; */
    }
    
    .theme-school .alert a {
        /* color: #b1b1b1; */
    }
    
    .theme-school .smallbox div .fa {
        color: #484848;
    }
    
    .theme-school .smallbox .disabled .fa {
        color: #bbbbbb;
    }
    
    .theme-school .disabled {
        color: #3e3e3e;
    }
    
    .theme-school .token_unit {
        background-color: #fffcf2;
        color: #9bc2d0;
        border: 2px solid #99b6c1;
    }
    
    .theme-school .token_unit.select {
        color: #ffffff;
        background-color: #44a4c6;
        border: 2px solid #327b94;
        border-bottom: 9px solid #398aa8;
    }
    
    .theme-school {
        background: #f1f1f1 url(/assets/img/school-background.svg);
        background-position: right bottom;
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-position-y: 30px;
    }
    
    .theme-school .smalltitle {
        color: #0a0a0a;
    }
    
    
    .theme-school #text_holder {
        color: #0c0c0c;
        background-color: #ffffffd4;
        border-radius: 20px;
    }
    
    /* End of the theme school ******************************* */
    /* ************** *********************************** */
    /* ************** *********************************** */
    /* ************** *********************************** */
    
    /* fire */
    
    
    .fire.more {
        height: 3vw;
        width: 3vw;
    }
    
     body .fire {
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -115%);
         height: 2vw;
         width: 2vw;
         z-index: -1;
    }
     body .fire .flames {
         position: absolute;
         bottom: 40%;
         left: 50%;
         width: 60%;
         height: 60%;
         transform: translateX(-50%) rotate(45deg);
    }
     body .fire .flames .flame {
         position: absolute;
         right: 0%;
         bottom: 0%;
         width: 0%;
         height: 0%;
         background-color: #ffdc01;
         border-radius: 1vw;
    }
     body .fire .flames .flame:nth-child(2n + 1) {
         animation: flameodd 1.5s ease-in infinite;
    }
     body .fire .flames .flame:nth-child(2n) {
         animation: flameeven 1.5s ease-in infinite;
    }
     body .fire .flames .flame:nth-child(1) {
         animation-delay: 0s;
    }
     body .fire .flames .flame:nth-child(2) {
         animation-delay: 0.375s;
    }
     body .fire .flames .flame:nth-child(3) {
         animation-delay: 0.75s;
    }
     body .fire .flames .flame:nth-child(4) {
         animation-delay: 1.125s;
    }
     body .fire .logs {
         position: absolute;
         bottom: 25%;
         left: 50%;
         transform: translateX(-50%);
         width: 100%;
         height: 15%;
    }
     body .fire .logs:before, body .fire .logs:after {
         position: absolute;
         content: '';
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%) rotate(20deg);
         height: 100%;
         width: 100%;
         border-radius: 1vw;
         background-color: #70392f;
    }
     body .fire .logs:before {
         transform: translate(-50%, -50%) rotate(-20deg);
         background-color: #612e25;
    }
     @keyframes flameodd {
         0%, 100% {
             width: 0%;
             height: 0%;
        }
         25% {
             width: 100%;
             height: 100%;
        }
         0% {
             background-color: #ffdc01;
             z-index: 1000000;
        }
         40% {
             background-color: #fdac01;
             z-index: 1000000;
        }
         100% {
             background-color: #f73b01;
             z-index: -10;
        }
         0% {
             right: 0%;
             bottom: 0%;
        }
         25% {
             right: 1%;
             bottom: 2%;
        }
         100% {
             right: 150%;
             bottom: 170%;
        }
    }
     @keyframes flameeven {
         0%, 100% {
             width: 0%;
             height: 0%;
        }
         25% {
             width: 100%;
             height: 100%;
        }
         0% {
             background-color: #ffdc01;
             z-index: 1000000;
        }
         40% {
             background-color: #fdac01;
             z-index: 1000000;
        }
         100% {
             background-color: #f73b01;
             z-index: -10;
        }
         0% {
             right: 0%;
             bottom: 0%;
        }
         25% {
             right: 2%;
             bottom: 1%;
        }
         100% {
             right: 170%;
             bottom: 150%;
        }
    }
     
    
    
    
    /* end fire */
    /* theme walking ******************************* */
    /* ************************************* */
    /* ************************************* */
    /* ************************************* */
    .theme-walking {
        background: #ffffff url(/assets/img/walking-background.svg);
        background-position: right bottom;
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-position-y: -130px;
    }
    
    .theme-walking div#test .alert-warning {
        color: #006e73;
        background-color: #cff1ff;
        border-color: #0e7792;
    }
    
    .theme-walking .alert a {
        /* color: #b1b1b1; */
    }
    
    .theme-walking .smallbox div .fa {
        color: #404040;
    }
    
    .theme-walking .smallbox .disabled .fa {
        color: #15969c;
    }
    
    .theme-walking .disabled {
        color: #3e3e3e;
    }
    
    .theme-walking .token_unit {
        background-color: #c8dfe8;
        color: #79929c;
        border: 2px solid #aac1ca;
    }
    
    .theme-walking .token_unit.select {
        color: #ffffff;
        background-color: #07a6ad;
        border: 2px solid #4dbabf;
        border-bottom: 9px solid #4dbabf;
    }
    
    .theme-walking .smalltitle {
        color: #0a0a0a;
    }
    
    .theme-walking #text_holder {
        color: #0c0c0c;
        background-color: #ffffffd4;
        border-radius: 20px;
    }
    
    /* End of the theme walking ******************************* */
    /* ************** *********************************** 
    /* ************** *********************************** */
    /* ************** *********************************** */
    /* ************** *********************************** */
    /* ************** *********************************** */
    /* theme kitty ******************************* */
    /* ************************************* */
    /* ************** *********************************** */
    /* ************** *********************************** */
    .theme-kitty div#test .alert-warning {
        /* color: #ff7800; */
        /* background-color: #fdcd7d; */
        /* border-color: #ffc628; */
    }
    
    .theme-kitty .alert a {
        /* color: #b1b1b1; */
    }
    
    .theme-kitty .smallbox div .fa {
        color: #cc627b;
    }
    
    .theme-kitty .smallbox .disabled .fa {
        color: #bbbbbb;
    }
    
    .theme-kitty .disabled {
        color: #3e3e3e;
    }
    
    .theme-kitty .token_unit {
        background-color: #ffe0e8;
        color: #ff7c9c;
        border: 2px solid #fda5ba;
    }
    
    .theme-kitty .token_unit.select {
        color: #ffffff;
        background-color: #ff7c9c;
        border: 2px solid #e45476;
        border-bottom: 9px solid #da5070;
    }
    
    .theme-kitty {
        background: #fff0f3 url(/assets/img/kitty-background.svg);
        background-position: right bottom;
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-position-y: 20px;
    }
    
    .theme-kitty .smalltitle {
        color: #0a0a0a;
    }
    
    .theme-kitty #text_holder {
        color: #0c0c0c;
        background-color: #ffffffd4;
        border-radius: 20px;
    }
    
    
    /* End of the theme kitty ******************************* */
    /* ************** *********************************** */
    /* ************** *********************************** */
    /* ************** *********************************** */
    /* theme persian ******************************* */
    /* ************************************* */
    /* ************************************* */
    /* ************************************* */
    /* ************************************* */
    .theme-persian div#test .alert-warning {
        /* color: #ff7800; */
        /* background-color: #fdcd7d; */
        /* border-color: #ffc628; */
    }
    
    .theme-persian .alert a {
        /* color: #b1b1b1; */
    }
    
    .theme-persian .smallbox div .fa {
        color: #484848;
    }
    
    .theme-persian .smallbox .disabled .fa {
        color: #bbbbbb;
    }
    
    .theme-persian .disabled {
        color: #3e3e3e;
    }
    
    .theme-persian .token_unit {
        background-color: #ffffff;
        color: #ca684a;
        border: 2px solid #ca684a;
    }
    
    .theme-persian .correct {
        color: #72b13a;
    }
    
    .theme-persian .selected_char{border-bottom: 4px solid #72a73a;background-color: transparent;color: #72a73a;}
    
    
    
    .theme-persian #svgObject .st5 {
        display: inline;
        fill: none;
        stroke: #82b057;
        stroke-width: 3;
        stroke-linecap: round;
        stroke-miterlimit: 10;
    }
    
    .theme-persian path.active {
        /* stroke: #a3d667; */
        /* stroke-width: 2px; */
        /* fill: rgb(152, 188, 110) !important; */
    }
    
    .theme-persian .token_unit.select {
        color: #ffffff;
        background-color: #945c4a;
        border: 2px solid #c36a4e;
        border-bottom: 9px solid #c36a4e;
    }
    
    .theme-persian {
        background: #eef1cb url(/assets/img/persain-background.svg);
        background-position: right bottom;
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-position-y: -90px;
    }
    
    .theme-persian .smalltitle {
        color: #0a0a0a;
    }
    
    .theme-persian #text_holder {
        color: #0c0c0c;
        background-color: #ffffffd4;
        border-radius: 20px;
    }
    
    /* End of the theme persian ******************************* */
    /* ************** *********************************** */
    
    
    /* theme kids ******************************* */
    /* ************************************* */
    .theme-white_rocket div#test .alert-warning {
        /* color: #ff7800; */
        /* background-color: #fdcd7d; */
        /* border-color: #ffc628; */
    }
    
    .theme-white_rocket .alert a {
        /* color: #b1b1b1; */
    }
    
    .theme-white_rocket .selected_char {
        /* color: #5c36b5; */
        border-bottom: 4px solid;
        /* background-color: #efefef; */
    }
    .theme-white_rocket .smallbox div .fa {
        color: #a28dd2;
    }
    
    .theme-white_rocket .smallbox .disabled .fa {
        color: #d4d4d4;
    }
    
    .theme-white_rocket .disabled {
        color: #3e3e3e;
    }
    
    .theme-white_rocket .token_unit {
        background-color: #696671;
        color: #fff;
        border: 2px solid #8981a0;
    }
    
    .theme-white_rocket .token_unit.select {
        color: #ffffff;
        background-color: #a28dd2;
        border: 2px solid #4a2e8c;
        border-bottom: 9px solid #4a2e8c;
    }
    
    .theme-white_rocket  .correct {
        color: #745cad;
        /* background-color: #7a6e96; */
    }
    
    .theme-white_rocket .incorrect {
        color: #ab232f;
        background-color: #ff6465;
    }
    
    
    .theme-white_rocket {
        background: #ffffff url(/assets/img/rocket-background.svg);
        background-position: right bottom;
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-position-y: -90px;
    }
    
    .theme-white_rocket .smalltitle {
        color: #0a0a0a;
    }
    
    .theme-white_rocket #text_holder {
        color: #0c0c0c;
        background-color: #ffffffd4;
        border-radius: 20px;
    }
    
    /* End of the theme white_rocket ******************************* */
    /* ************** *********************************** */
    
    /* theme sports ******************************* */
    /* ************************************* */
    .theme-sports div#test .alert-warning {
        /* color: #ff7800; */
        /* background-color: #fdcd7d; */
        /* border-color: #ffc628; */
    }
    
    .theme-sports .alert a {
        /* color: #b1b1b1; */
    }
    
    .theme-sports .smallbox div .fa {
        color: #00BCD4;
    }
    
    .theme-sports .smallbox .disabled .fa {
        color: #d2d2d2;
    }
    
    .theme-sports .disabled {
        color: #3e3e3e;
    }
    
    .theme-sports .token_unit {
        background-color: #4c5256;
        color: #fff;
        border: 2px solid #2e4354;
    }
    
    .theme-sports .token_unit.select {
        color: #ffffff;
        background-color: #00b3e3;
        border: 2px solid #6cdefd;
        border-bottom: 9px solid #3bd0f9;
    }
    
    .theme-sports {
        background: #ffffff url(/assets/img/sports-background.svg);
        background-position: right bottom;
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-position-y: -90px;
    }
    
    .theme-sports .smalltitle {
        color: #0a0a0a;
    }
    
    .theme-sports #text_holder {
        color: #0c0c0c;
        background-color: #ffffffd4;
        border-radius: 20px;
    }
    
    /* End of the theme sportss ******************************* */
    /* ************** *********************************** */
    
    
    /* theme trees ******************************* */
    /* ************************************* */
    /* ************************************* */
    /* ************************************* */
    /* ************************************* */
    .theme-trees div#test .alert-warning {
        /* color: #ff7800; */
        /* background-color: #fdcd7d; */
        /* border-color: #ffc628; */
    }
    
    .theme-trees .alert a {
        /* color: #b1b1b1; */
    }
    
    .theme-trees .smallbox div .fa {
        color: #484848;
    }
    
    .theme-trees .smallbox .disabled .fa {
        color: #bbbbbb;
    }
    
    .theme-trees .disabled {
        color: #3e3e3e;
    }
    
    .theme-trees .token_unit {
        background-color: #acc3b4;
        color: #69776e;
        border: 2px solid #acc3b4;
    }
    
    .theme-trees .correct {
        color: #008c3a;
        background-color: #e8ffd8;
    }
    
    
    .theme-trees .selected_char {
        color: #55b72c;
        border-bottom: 4px solid;
        background-color: #ffffff;
    }
    
    .theme-trees #svgObject .st5 {
        display: inline;
        fill: none;
        stroke: #82b057;
        stroke-width: 3;
        stroke-linecap: round;
        stroke-miterlimit: 10;
    }
    
    .theme-trees path.active {
        /* stroke: #a3d667; */
        /* stroke-width: 2px; */
        /* fill: rgb(152, 188, 110) !important; */
    }
    
    .theme-trees .token_unit.select {
        color: #ffffff;
        background-color: #91c363;
        border: 2px solid #91c363;
        border-bottom: 9px solid #7ead53;
    }
    
    .theme-trees {
        background: url(/assets/img/trees-background.svg);
        background-position: right bottom;
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-position-y: -90px;
    }
    
    .theme-trees .smalltitle {
        color: #0a0a0a;
    }
    
    .theme-trees #text_holder {
        color: #0c0c0c;
        background-color: #ffffffd4;
        border-radius: 20px;
    }
    
    /* End of the theme persian******************************* */
    /* ************** *********************************** */
    
    
    .wasbad {
        background-color: #e8595a;
        color: white;
        padding: 10px;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-bottom: 3px solid #b34636;
        font-size: 15px;
        display: table;
        margin: auto;
        margin-top: 15px;
        margin-bottom: 60px;
    }
    
    .wasgood {
        background-color: #41b4e8;
        color: white;
        padding: 10px;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-bottom: 3px solid #3994bd;
        font-size: 15px;
        display: table;
        margin: auto;
        margin-top: 10px;
        margin-bottom: 60px;
    }
    
    .redspan {
        background-color: #ff6465;
        color: white;
        padding: 5px;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        /* border-bottom: 2px solid #bd4040; */
        font-size: 18px;
    }
    
    .yellowspan {
        background-color: #e8da4a;
        color: white;
        padding: 5px;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-bottom: 2px solid #c7bb38;
        font-size: 18px;
    }
    
    .greenspan {
        background-color: #83ce48;
        color: white;
        padding: 5px;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-bottom: 2px solid #6cab3a;
        font-size: 18px;
    }
    
    .deepgreenspan {
        background-color: #1db968;
        color: white;
        padding: 5px;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-bottom: 2px solid #18864d;
        font-size: 18px;
    }
    
    .lesson-icon {
        width: 50px;
        height: 50px;
        /* border: 1px solid; */
        position: relative;
        margin: auto;
    }
    
    .lsn {
        background: url(/assets/img/lesson/open-book.svg);
    }
    
    .lsn-icon.voice {
        background: url(/assets/img/lesson/voice.svg);
        width: 50px !important;
        height: 50px !important;
        background-size: cover;
    }
    
    .help-icon {
        background: url(/assets/img/lesson/idea.svg);
    }
    
    .random-sentence {
        background: url(/assets/img/lesson/paper.svg);
    }
    
    .zoom-icon {
        background: url(/assets/img/lesson/zoom.svg);
    }
    
    .timer-icon {
        background: url(/assets/img/lesson/timer.svg);
    }
    
    .practice-icon {
        background: url(/assets/img/lesson/pencil.svg);
        width: 46px !important;
        height: 46px !important;
    }
    
    .p-icon {
        background: url(/assets/img/puzzle.svg);
    
    }
    
    .programming-icon {
        background: url(/assets/img/lesson/programming.svg);
    }
    
    .HTML-icon {
        background: url(/assets/img/lesson/html.svg);
    }
    
    .CSS-icon {
        background: url(/assets/img/lesson/css.svg);
    }
    
    .js-icon {
        background: url(/assets/img/lesson/javascript.svg);
    }
    
    .python-icon {
        background: url(/assets/img/lesson/python.svg);
        height:54px !important;
    }
    
    .c-sharp-icon {
        background: url(/assets/img/lesson/c-sharp.svg);
        height:54px !important;
    }
    
    .java-icon {
        background: url(/assets/img/lesson/java.svg);
        height:54px !important;
    }
    
    .c-plus-icon {
        background: url(/assets/img/lesson/c-plus.svg);
        height:54px !important;
    }
    
    .family-icon {
        background: url(/assets/img/lesson/family.svg);
    }
    
    .brain-icon {
        background: url(/assets/img/lesson/brain.svg);
    }
    
    .seat-icon {
        background: url(/assets/img/lesson/seat.svg);
    }
    
    .home-icon {
        background: url(/assets/img/lesson/home.svg);
    }
    
    .eye-icon {
        background: url(/assets/img/lesson/eye.svg);
    }
    
    .random-icon {
        background: url(/assets/img/lesson/random.svg);
    }
    
    .jump-icon {
        background: url(/assets/img/lesson/jump.svg);
    }
    
    .kindness {
        background: url(/assets/img/heart.svg);
    }
    
    .animal-icon {
        background: url(/assets/img/lesson/animal.svg);
    }
    
    .video {
        background-image: url(/assets/img/lesson/video.svg);
        background-size: 45px;
    }
    
    .game2 {
        background-image: url(/assets/img/lesson/game2.svg?ver=1);
        background-size: 50px !important;
        height: 58px !important;
        width: 52px !important;
    }
    
    .game {
        background-image: url(/assets/img/lesson/monster-game.svg);
        background-size: 55px !important;
        height: 63px !important;
        width: 52px !important;
    }
    
    .training {
        background-image: url(https://image.flaticon.com/icons/svg/432/432294.svg);
    }
    
    .run {
        background-image: url(/assets/img/lesson/speed.svg);
    }
    
    .desk {
        background-image: url(https://image.flaticon.com/icons/svg/345/345744.svg);
    }
    
    .start {
        background-image: url(https://image.flaticon.com/icons/svg/363/363374.svg);
    }
    
    .tree-icon {
        background: url(/assets/img/lesson/tree.svg);
    }
    
    #lessons {
        background-image: url(open-book.svg);
    }
    
    .numpad {
        background: url(/assets/img/lesson/numpad.svg);
    }
    
    .errors {
        background: url(/assets/img/lesson/eraser.png);
    }
    
    
    
    #sound {
        /* background-image: url(/assets/img/menu/sound.svg); */
    }
    
    #select-lesson {
        /* background-image: url(/assets/img/menu/book.svg); */
    }
    
    #show-keyboard {
        /* background-image: url(/assets/img/menu/keyboard.svg); */
    }
    
    .disabled {
        color: #eaeaea;
    }
    
    .smallbox .fa {
        font-size: 2.5em;
    }
    
    .starticon {
        /* background-image: url(/assets/img/menu/stop.svg); */
    }
    
    .stopicon {
        /* background-image: url(/assets/img/menu/play.svg); */
    }
    
    #text-shift-right, #text-backspace, #text-enter, #text-tab, #caps-lock, #text-shift-left,#text-option-right,#text-option-left {
        fill: #777777;
    }
    
    .theme-img {
        display: inline-block;
        transition: all .5s ease;
    }
    
    .lock {
        position: absolute;
        direction: rtl;
        padding: 5px;
        background-color: #ffffff;
        color: #1b1b1b;
        /* border: 2px solid #656565; */
        /* border-radius: 10px; */
        font-size: .9em;
        cursor: pointer;
        z-index: 10;
        width: 70px;
    }
    
    .lock span.fa.fa-star {
        padding: 0 5px;
        color: #FFC107;
        animation: my_star 3s linear .5s infinite;
    }
    
    div#keyboard {
        /* margin-left: 510px; */
        position: absolute;
        top: -1px;
        /* display: block; */
        /* -webkit-animation: keyboard 0.3s cubic-bezier(0.1, 0, 0.2, 1); */
        /* animation: keyboard 0.3s cubic-bezier(0.1, 0, 0.2, 1); */
        opacity: 1;
        width: 654px;
        /* overflow: scroll; */
        left: 10px;
    }
    
    .hide-elm {
        -webkit-animation: hide-elm 0.3s cubic-bezier(0.1, 0, 0.2, 1);
        animation: hide-elm 0.3s cubic-bezier(0.1, 0, 0.2, 1);
    }
    
    span.step-counter {
        display: none;
    }
    
    .hands_fire {
        transform: translateX(70px) scale(1.66) !important;
        top: -64px !important;
    }
    
    object#svgObject {
        width: 650px;
        position: absolute;
        pointer-events: none;
        height: 363px;
        opacity: 0.8;
        -webkit-transform: translateX(70px) scale(1.66);
        -ms-transform: translateX(70px) scale(1.66);
        z-index: 9;
        left: 5px;
        transform: translateX(70px) scale(1.66) !important;
        top: -2px !important;
    }
    
    .show_ {
        display: block;
    }
    
    @-webkit-keyframes keyboard {
        0% {
            top: 0px;
        }
    
        50% {
            top: -67px;
        }
    
        100% {
            top: -60px;
        }
    }
    
    @keyframes keyboard {
        0% {
            top: 0px;
        }
    
        50% {
            top: -67px;
        }
    
        100% {
            top: -60px;
        }
    }
    
    @-webkit-keyframes hide-elm {
        0% {
            top: -60px;
            opacity: 0.5;
        }
    
        50% {
            top: -25px;
        }
    
        100% {
            top: 0px;
            opacity: 0.1;
            display: none;
        }
    }
    
    @keyframes hide-elm {
        0% {
            top: -60px;
            opacity: 0.5;
        }
    
        50% {
            top: -25px;
        }
    
        100% {
            top: 0px;
            opacity: 0.1;
            display: none;
        }
    }
    
    .rc-anchor-checkbox-label {
        font-family: vazir !important;
    }
    
    .lesson:not(.blur):not(.lesson_needs_upgrade):hover {
        /* -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.2), 0 6px 10px 0 rgba(0,0,0,0.3); */
        /* box-shadow: 0px -1px 0px 0px rgb(0 0 0 / 6%), 0 2px 0px 0 rgb(0 0 0 / 12%); */
        /* background-color: #fbfbfb; */
        transform: scale(1.1);
    }
    
    div#lesson-250 {}
    
    .ubox {
        width: 160px;
        display: inline-block;
        margin: 0px 4px;
        background-color: white;
        padding: 5px;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        height: 80px;
    }
    
    .userprogress {
        width: auto;
        /* max-width: 99%; */
        height: auto;
        margin: auto;
        margin-bottom: 20px;
        direction: rtl;
        display: flex;
        /* zoom: 0.8; */
        padding: 11px 2px;
        background-color: #f9f9f9;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
    }
    
    .topnav span.fa {
        margin: 0px 8px;
        font-size: 22px;
    }
    
    .modal-body {
        text-align: center;
    }
    
    .progressbox {
        /* width: 120px; */
        /* border: 1px solid red; */
        /* height: 20px; */
    }
    
    h4.small-lable {
        font-size: 1em;
        /* direction: rtl; */
        /* margin: 8px 20px; */
        /* position: relative; */
        /* top: -5px; */
        /* border-right: 1px solid #e4e4e4; */
        /* padding-right: 8px; */
        /* cursor: pointer; */
        /* line-height: 25px; */
        margin-top: 1px;
        margin-bottom: 1px;
        cursor: pointer;
        padding: 10px 0px;
    }
    
    .lsn-icon {
        width: 45px;
        height: 45px;
        margin: 0 auto;
        position: absolute;
        right: 34%;
        z-index: 100;
        bottom: 39px;
        background-size: cover;
        background-repeat: no-repeat;
    }
    
    .wpm {
        color: #aba8a8;
        font-size: .5em;
        margin: 5px;
        cursor: pointer;
    }
    
    h4.small-lable.number {
        font-size: 19px;
        /* margin: 8px 1px; */
        left: 15px;
        /* top: -8px; */
        border: none;
        margin-top: -8px;
    }
    
    
    
    .star_num {
        background-color: #fbeb58;
        color: #212120;
        padding: 2px 6px 0px 6px;
        font-size: 14px;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        margin: 5px;
        -webkit-box-shadow: 0px 3px 0px 0px #dccd42;
        box-shadow: 0px 3px 0px 0px #dccd42;
        cursor: pointer;
    }
    
    .star_num:hover {
        -webkit-box-shadow: 0px 1px 0px 0px #e4c744;
        box-shadow: 0px 1px 0px 0px #e4c744;
        background-color: #f3e354;
    }
    
    .lsn-number {
        position: absolute;
        font-weight: 800;
        font-size: 1.2em;
        line-height: 18px;
        margin-top: 2px;
        letter-spacing: 1px;
        left: 10px;
        top: 8px;
        color: #5d5d5d;
        /* text-shadow: 2px 3px 6px #fff, 0 0 0 #000, 2px 3px 6px #fff; */
    }
    
    .statistics {
        margin-bottom: 80px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        text-align: center;
    }
    
    .statistics > div {
        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        width: 200px;
        margin-left: 35px;
        background: #fff;
        padding: 10px 20px;
    }
    
    .statistics > div:last-child {
    }
    
    .statistics > div strong {
        font-size: 40px;
        width: 100%;
        padding-top: 10px;
        margin-bottom: 15px;
        border-bottom: 1px solid #eee;
    }
    
    .statistics > div h4 {
        color: #828282;
        font-size: 16px;
    }
    
    .statistics > div {
        -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.1);
        box-shadow: 0 1px 2px rgba(0,0,0,0.1);
        text-align: center;
    }
    
    .animated-icon {
        -webkit-animation-duration: 2s;
        animation-duration: 2s;
        -webkit-animation-delay: 1s;
        animation-delay: 1s;
        -webkit-animation-name: animated-icon;
        animation-name: animated-icon;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        -webkit-animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
        animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
        border-radius: 50%;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
    }
    
    @-webkit-keyframes animated-icon {
        0% {
            opacity: 1;
            -webkit-box-shadow: 0 0 0 0 rgb(66, 173, 212);
            box-shadow: 0 0 0 0 rgb(66, 173, 212);
            color:#7f7f7f;
        }
    
        30% {
            -webkit-box-shadow: 0 0 0 10px rgba(204,169,44,0);
            box-shadow: 0 0 0 10px rgba(204,169,44,0)
        }
    
        100% {
            -webkit-box-shadow: 0 0 0 0 rgba(204,169,44,0);
            box-shadow: 0 0 0 0 rgba(204,169,44,0);
            color:#07d9f3;
        }
    }
    
    @keyframes animated-icon {
        0% {
            opacity: 1;
            -webkit-box-shadow: 0 0 0 0 rgb(13 226 253);
            box-shadow: 0 0 0 0 rgb(13 226 253);
           
        }
    
        30% {
            -webkit-box-shadow: 0 0 0 8px rgba(204,169,44,0);
            box-shadow: 0 0 0 8px rgba(204,169,44,0)
            
        }
    
        100% {
            -webkit-box-shadow: 0 0 0 0 rgba(204,169,44,0);
            box-shadow: 0 0 0 0 rgba(204,169,44,0);
            
        }
    }
    
    @keyframes here {
        0% {
            opacity: 1;
            -webkit-box-shadow: 0 0 0 0 #FFC107;
            box-shadow: 0 0 0 0 #FFC107;
            width:11px;
            height:11px;
           
        }
    
        30% {
            -webkit-box-shadow: 0 0 0 5px rgba(204,169,44,0);
            box-shadow: 0 0 0 5px rgba(204,169,44,0)
            width:10px;
            height:10px;
            
        }
    
        100% {
            -webkit-box-shadow: 0 0 0 0 rgba(204,169,44,0);
            box-shadow: 0 0 0 0 rgba(204,169,44,0);
            
        }
    }
    
    
    h2.top_icon.animated-icon {
    }
    
    h2.top_icon {
        margin: auto;
        font-size: 49px;
        width: 49px;
        padding-top: 5px;
    }
    
    #tokens {
        width: 100%;
        height: 260px;
        display: block;
        margin: auto;
        font-family: 'Vazir';
        font-weight: 400;
    }
    
    .part {
        /* border: 1px solid #b9b6b6; */
        /* width: 60%; */
        height: 180px;
        display: inline-block;
    }
    
    .hidden {
        display: none;
    }
    
    .token_unit {
        text-align: center;
        border: none;
        margin: 10px 10px;
        border-radius: 4px;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-bottom: 9px solid #e2e2e2;
        color: #b4b4b4;
        background-color: #f9f9f9;
        width: 16%;
        min-width: 130px;
        max-width: 150px;
        height: 100%;
        font-size: 6em;
        display: inline-block;
        line-height: 1.3em;
        font-weight: 900;
        }
    
    .token_unit.active {
        border: none;
        background-color: #F1F8E9;
        color: #8BC34A;
    }
    .wrong_key {
        width: 100%;
        display: block;
        margin-top: 15px;
        font-size: 4em;
        color: #ff7058;
    }
    
    .token_unit.wrong {
        background-color: #fff6f6;
        color: #ff8181 !important;
        border: none;
    }
    
    .token_unit.select {
        color: #46c6ff;
        -webkit-transition: all 0.4s ease;
        -o-transition: all 0.4s ease;
        transition: all 0.4s ease;
        background-color: #d7f5ff;
        border: none;
        border-bottom: 9px solid #3ec3ff;
    }
    
    div#show_typed_tokens {
        width: 60%;
        height: 200px;
        display: inline-block;
        overflow-x: scroll;
        overflow: auto;
        margin-top: 20px;
    }
    
    div#show_typed_tokens .token_unit {
        text-align: center;
        margin: 10px 10px;
        width: 60px;
        min-width: 10px !important;
        height: 60px;
        font-size: 30px;
    }
    
    .token_unit.select.wrong {
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        background-color: #fff6f6;
        border: none;
        border-bottom: 9px solid #ff8181;
    }
    
    div#keyboard_place {
        position: relative;
        height: 369px;
        top: -35px;
        margin: auto;
        overflow: hidden;
        overflow-y: hidden;
        width: auto;
        max-width: 730px;
        /* border: 1px solid; */
    }
    
    .loader-place {
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        color: #444;
        z-index: 99999;
        line-height: 50px;
        font-family: VazirFD,tahoma;
        font-weight: 100;
        background-color: #ffffff;
        padding: 20%;
        /* opacity: .9; */
    }
    
    .white_loader{
    
    opacity: 1; /* we use it for login and reg loading */
    
    }
    
    .loader {
        border: 16px solid transparent;
        border-radius: 50%;
        margin-left: auto;
        margin-right: auto;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-top: 16px solid var(--maincolor);
        width: 120px;
        height: 120px;
        -webkit-animation: spin 2s linear infinite;
        animation: spin 2s linear infinite;
        
    }
    
    /* Game /////////////////full screen /////////////////////////// */
    /* Game //////////////////////////////////////////// */
    div#game-holder {
        width: 100%;
        height: 100%;
        background-color: white;
        position: absolute;
        z-index: 900;
        margin-top: -30px;
        /* border: 1px solid red; */
        /* min-height: 100%; */
        /* margin-top: 1px; */
    }
    
    div#game {
        width: 100%;
        height: 100%;
        margin: auto;
        /* margin-top: 9px; */
        /* padding-left: 9%; */
        /* border: 1px solid #32b723; */
    }
    
    iframe:not('#goftino_w') {
        width: 100%;
        /* height: fit-content; */
        border: none;
        margin: auto;
        min-height: 100%;
        overflow: hidden;
    }
    
    #goftino_w{
    
        min-height: auto !important; 
    }
    #game-holder iframe{
        width: 100%;
        height: 100%;
        position: absolute;
        display: block;
        border: unset !important;
        top: 0;
        left: 0;
    }
    
    /* full screen game */
    
    .full_screen div#game-holder {
        width: 100%;
        height: 100%;
        background-color: white;
        position: absolute;
        z-index: 900;
        margin-top: -30px;
        border: 1px solid red;
        /* min-height: 100%; */
    }
    
    .full_screen div#game {
        width: 100%;
        height: 100%;
        margin: auto;
        /* margin-top: 20px; */
        /* padding-left: 9%; */
        border: 1px solid #32b723;
    }
    
    .full_screen iframe {
        width: 100%;
        height: 100%;
        border: none;
        margin: auto;
        min-height: 100%;
        overflow: hidden;
    }
    
    
    
    /* */
    
    div#game-msg {
        width: 100%;
        height: 100%;
        min-height: 580px;
        background-color: black;
        position: absolute;
        opacity: .7;
    }
    
    /* Game //////////////////////////////////////////// */
    /* Game //////////////////////////////////////////// */
    /* show help/////////////////////////////////
    /////////////////////////////////////////////// */
    span.fa.fa-arrow-up {
        font-size: 50px;
        color: white;
        margin-top: 25px;
    }
    
    span.fa.fa-arrow-up:active {
        font-size: 50px;
        color: white;
        margin-top: 10px;
    }
    
    span.fa.fa-arrow-down {
        font-size: 50px;
        color: white;
        margin-top: 25px;
    }
    
    span.fa.fa-arrow-down:active {
        font-size: 50px;
        color: white;
        margin-top: 40px;
    }
    
    #instruction #night {
        display: none;
        position: fixed;
        left: 0px;
        right: 0px;
        bottom: 0px;
        top: 0px;
        background: white;
        z-index: 1031;
    }
    
    #instruction * {
        letter-spacing: normal;
        line-height: normal;
        -webkit-font-smoothing: auto;
        -moz-osx-font-smoothing: auto;
        -webkit-box-sizing: initial;
        box-sizing: initial;
    }
    
    #instruction .arrow-up.inactive, #instruction .arrow-down.inactive, #instruction .arrow-ok.inactive {
        opacity: .15 !important;
        cursor: default;
    }
    
    #instruction .arrow-up {
        top: 75px;
    }
    
    .inst-nav-lnk.arrow-down,.inst-nav-lnk.arrow-up {
        z-index: 100;
    }
    
    #instruction .arrow-up, #instruction .arrow-down, #instruction .arrow-ok {
        width: 100px;
        height: 100px;
        background-repeat: no-repeat;
        position: fixed;
        right: 50px;
        opacity: .94;
        background-color: #333333;
        -webkit-transition: .14s ease-in all;
        -o-transition: .14s ease-in all;
        transition: .14s ease-in all;
        cursor: pointer;
        background-position: 10px 10px;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
    }
    
    #instruction #instructions {
        position: fixed;
        top: 15%;
        left: 20%;
        width: 60%;
        color: #444;
        z-index: 1040;
        line-height: 50px;
        font-family: VazirFD,tahoma;
        font-weight: 100;
        min-width: 900px;
        margin: auto;
    }
    
    #instruction .arrow-down {
        bottom: 50px;
    }
    
    img.inst-image {
        /* width: 50%; */
    }
    
    #instruction .step {
        -webkit-transition: .6s ease-out margin;
        -o-transition: .6s ease-out margin;
        transition: .6s ease-out margin;
        position: absolute;
        margin-top: 2000px;
        direction: rtl;
        width: 80%;
        margin-left: auto;
        z-index: 1;
        margin-right: auto;
        height: 350px
    }
    
    #instruction .step.active {
        margin-top: -10%;
    }
    
    #instruction .step.active {
        display: block;
        opacity: 1;
        -webkit-transform: scale(1);
        -ms-transform:scale(1);
         transform:scale(1);
    }
    
    #instruction .intro-head {
        font-size: 20px;
        margin: 0 0 10px 0px;
    }
    
    #instruction .step-elm {
        -webkit-transition: .7s ease-in margin;
        -o-transition: .7s ease-in margin;
        transition: .7s ease-in margin;
        font-size: 20px;
    }
    
    #instruction .intro-text {
        font-size: 1.4em;
        margin-bottom: 20px;
        line-height: 1.4em;
    }
    
    #instruction .step.done {
        margin-top: -2000px;
    }
    
    .keybtn {
        font-size: 1em;
        color: #444;
        font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
        font-weight: 400;
        font-style: normal;
        text-align: center;
        line-height: 1em;
        text-shadow: 0 1px 0 #fff;
        display: inline;
        padding: .2em .45em;
        display: inline-block;
        height: 1em;
        border-radius: 6px;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        background-clip: padding-box;
        border: 1px solid #bbb;
        background-color: #f7f7f7;
        background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.1)), to(transparent));
        background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.1), transparent);
        background-image: -o-linear-gradient(top, rgba(0,0,0,0.1), transparent);
        background-image: linear-gradient(to bottom, rgba(0,0,0,0.1), transparent);
        background-repeat: repeat-x;
        -webkit-box-shadow: 0 2px 0 #bbb, 0 3px 1px #999, 0 3px 0 #bbb, inset 0 1px 1px #fff, inset 0 -1px 3px #ccc;
        box-shadow: 0 2px 0 #bbb, 0 3px 1px #999, 0 3px 0 #bbb, inset 0 1px 1px #fff, inset 0 -1px 3px #ccc;
        cursor: default;
    }
    
    /* show help */
    ///////////////////////////////// /////////////////////////////////////////////// */ /* Users **************************    
    *********************************** */
    .rAva {
        display: inline-block;
    }
    
    
    
    .typist th {
        color: #a0a0a0;
        font-weight: normal;
        font-size: 1.2em;
    }
    
    div#typists_holder {
        width: 92%;
        margin: auto;
        padding: 10px;
        background-color: #ffffff;
        border-radius: 20px;
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        direction: rtl;
        min-height: 322px;
        height: auto;
        margin-top: 20px;
    }
    
    span.empty_alert {
        padding-top: 10px;
        margin-top: 20px;
        line-height: 40px;
        display: block;
    }
    
    span.date {
        position: relative;
        top: -10px;
        display: inline-block;
        font-size: 12px;
        right: 125px;
        color: #a0a0a0;
        text-align: center;
    }
    
    #test> .alert-info {
        width: 50%;
        margin: auto;
        margin-bottom: 20px;
    }
    
    a.name {
        white-space: nowrap;
        max-width: 16em;
        overflow: hidden;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        font-size: 16px;
    }
    
    .shadow{box-shadow: 0 1px 2px 0px rgb(0 0 0 / 18%);-webkit-transition: all .15s ease-in-out;-o-transition: all .15s ease-in-out;transition: all .15s ease-in-out;}
    
    .shadow:hover{box-shadow: 0 1px 2px 0px rgba(0,0,0,.18);-webkit-transition: all .15s ease-in-out;-o-transition: all .15s ease-in-out;transition: all .15s ease-in-out;background-color: #f7f7f7;}
    
    
    .rtl {
        direction: rtl;
    }
    
    .float-right {
        float: right;
    }
    
    
    div#load_more {
        width: 100%;
        max-width: 100%;
        margin: -5px;
        font-family: 'kalamehblack';
        font-size: 30px;
    }
    
    .table-hover>tbody>tr:not(.myrank):hover {
        background-color: #f5f5f5;
        -webkit-transition: all .2s ease-in-out;
        -o-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
    }
    
    tr {
        background: #ffffff !important;
        /* -webkit-box-shadow: 0 2px 2px rgba(0,0,0,.1); */
        /* box-shadow: 0 2px 2px rgba(0,0,0,.1); */
        margin: 5px 10px !important;
        padding: 10px 5px;
        padding: 10px 10px 5px;
        margin-bottom: 16px;
        border-radius: 9px;
        -webkit-border-radius: 20px;
        -moz-border-radius: 9px;
        -webkit-transition: all .2s ease-in-out;
        -o-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
        border-radius: 15px !important;
        /* display: flex; */
    }
    
    .table>thead>tr>th {
        vertical-align: bottom;
        border-bottom: none !important;
        border-top: unset !important;
    }
    
    tr.myrank {
        background-color: #e4f4ff !important;
        /* border-right: 5px solid #76d4ff !important; */
    }
    
    tr.myrank:hover {
        /* background-color: #f3faff !important; */
        /* border-right: 5px solid #e1f5fe !important; */
    }
    
    .user_speed, user_acc {
        margin-bottom: 10px;
        font-size: 1.1em;
    }
    
    a.checkit {
    
        margin: 5px;
        background-color: #ff6b60 !important;
        border-radius: 7px;
        color: white;
        display: inline-block;
        text-decoration: none;
        animation: shake 2s cubic-bezier(.36,.07,.19,.97) 1s both infinite;
    }
    
    th {
        color: #6b6b6b;
        font-size: 1.2em;
        font-weight: normal;
    }
    
    .s_holder {
        display: inline-block;
        color: #FFC107;
    }
    
    video {
        width: auto;
        max-width: 70%;
    }
    
    
    
    span.user_number, span.pb_user, span.opponent {
        border-radius: 100px;
        -webkit-border-radius: 100px;
        -moz-border-radius: 100px;
        padding-top: 8px;
        font-size: 1em;
        font-weight: bold;
        background: #38a7d8;
        color: #fff;
        text-align: center;
        height: 35px;
        width: 35px;
        vertical-align: top;
        /* -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.18); */
        /* box-shadow: 0 3px 6px rgba(0,0,0,.18); */
        margin: 39px -25px;
        cursor: pointer;
        -webkit-transition: all .15s ease-in-out;
        -o-transition: all .15s ease-in-out;
        transition: all .15s ease-in-out;
        position: absolute;
    }
    
    span.pb_user:hover {
        -webkit-box-shadow: 0 0px 2px rgba(0,0,0,.18);
        box-shadow: 0 0px 2px rgba(0,0,0,.18);
        opacity: .8;
    }
    
    span.fa.fa-calendar {
        margin: 6px;
    }
    
    span.smalltext {
        font-size: 12px;
        margin-right: 5px;
        color: #484848;
    }
    
    span.opponent {
        margin-right: -59px;
        margin-top: 55px;
        width: 32px;
        height: 32px;
        font-size: .7em;
        background-color: #FF9800;
    }
    
    .country {
        width: 20px;
        height: 20px;
        display: inline-block;
        position: relative;
        top: 6px;
        left: -10px;
    }
    
    .text-center {
        text-align: center;
    }
    
    .iran-icon {
        background-image: url(/assets/img/iran.svg);
    }
    
    .english-icon {
        background-image: url(/assets/img/usa.svg);
        background-size: 30px 30px;
        background-position: -5px -5px;
    }
    
    .user_holder {
        width: 260px;
        height: 80px;
    }
    
    
    .p_holder,.pb_picture { 
        width: 70px;
        height: 70px;
        border-radius: 50%;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        margin: auto;
        background-size: cover !important;
        float: right;
        clear: both;
        /* background-position: -30px 0px !important; */
    }
    
    .user_holder.competitor {
        width: 80px;
        display: inline-block;
    }
    
    .user_holder.opponent {
        width: 80px;
        display: inline-block;
    }
    
    
    span.online {
        width: 20px;
        height: 20px;
        background-color: green;
        border-radius: 50%;
    }
    
    .status {
        width: 10px;
        height: 10px;
        border: 2px solid white;
        border-radius: 50%;
        position: absolute;
        margin-right: -15px;
    }
    
    .offline {
    
        background-color: #cccccc;
    
    }
    
    .online {background-color: #5cff26;}
    
    #show_them_here td.competitors {
        text-align: right;
    }
    
    .winner .p_holder {
        /* border: 2px solid #ffffffd1; */
        width: 80px;
        height: 80px;
    }
    
    .user_holder.winner {
        margin-right: -10px !important;
        z-index: 999;
    }
    
    .competitor span.pb_user,.opponent span.pb_user  {
        margin-right: -9px;
    }
    
    .opponent span.opponent,.competitor span.opponent {
        margin-right: 20px;
    }
    
    .user_holder.winner span.opponent  {
    
         margin-top: 60px;
          margin-right: 25px;
    }
    
    .competitors .d_holder {
        display: inline-block;
        width: 140px;
    }
    
    
    .competitors .user_holder .fullname {
        position: absolute;
        color: #444444;
        border-radius: 10px;
        padding: 5px;
        background-color: white;
        margin-right: 8px;
        font-size: 10px;
        /* border: 2px solid #e0e0e0; */
        max-width: 70px;
        overflow: hidden;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    .user_speed span.score_for {
        width: 40px !important;
        font-size: 12px;
        padding: 5px;
        background-color: white !important;
        border-radius: 10px;
        display: inline-block;
    }
    
    p#change_pb {
        color: white;
       
        font-size: 12px;
        position: absolute;
        right: 10px;
        top: 20px;
    }
    
    
    #change_pb .btn {
        margin: 2px;
        background-color: #6f6f6f;
        color: #040404;
        font-size: 12px;
    }
    
    div#change_pb {
        color: white;
    }
    
    .btn.selected {
        background-color: #ffffff !important;
        color: #000000 !important;
        font-size:14px !important;
    }
    
    .pb_button {
        width: 220px;
        background-color: #ffffff;
        padding: 8px;
        cursor: pointer;
        border-radius: 100px;
        -webkit-border-radius: 100px;
        -moz-border-radius: 100px;
        text-align: center;
    }
    
    .pb_button .fa {
        margin: 5px;
    }
    
    .o_pb_button {
        width: 160px;
        background-color: #fff0c4;
        padding: 8px;
        cursor: pointer;
        border-radius: 100px;
        -webkit-border-radius: 100px;
        -moz-border-radius: 100px;
        text-align: center;
        margin-top: 8px;
        font-size: 14px;
        color: #ffb100;
    }
    
    span.user_number {
        box-shadow: unset;
        background-color: #32b9f5;
        font-size: 16px;
        border: 2px solid white;
        line-height: 20px;
    }
    
    
    span.pb_user {
        margin-right: -89px;
        width: 25px;
        height: 25px;
        font-size: .7em;
        background-color: #ff5f5f;
    }
    
    .n_holder {
        display: inline-block;
        margin-bottom: 8px;
        width: 170px;
        text-align: right;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        margin-right: 10px;
    }
    
    .d_holder {
        font-size: 12px;
        color: #a7a7a7;
        /* float: left; */
    }
    
    .bottom_buttons .tooltip {
        font-size: 1.1em;
        padding: 4px 0;
        /* margin-top: -14px; */
    }
    
    /*
    .bottom_buttons .tooltip-inner  {
    
        background-color: #3fa5d4;
    
    }
    
    .bottom_buttons .tooltip.top .tooltip-arrow {
        bottom: 0;
        left: 50%;
        margin-left: -5px;
        border-width: 5px 5px 0;
        border-top-color: #3fa5d4;
    } */
    .bottom_buttons .circle_btn {
        padding-top: 20px;
        margin: 0 5px;
        /* position: relative; */
        top: 0px;
    }
    
    .bottom_buttons .circle_btn:hover {
        top: -8px;
    }
    
    .circle {border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;color: #fff;text-align: center;vertical-align: top;box-shadow: unset;cursor: pointer;-webkit-transition: all .15s ease-in-out;-o-transition: all .15s ease-in-out;transition: all .15s ease-in-out;}
    
    .circle:hover{}
    .bottom_buttons {
        margin: auto;
        margin-bottom: 40px;
        text-align: center;
        width: 350px;
        /* background-color: #ffffff1a; */
        padding: 5px;
        border-radius: 15px;
    }
    
    /* Users **************************    
    *********************************** */
    /* chart **************************    
    *********************************** */
    a.canvasjs-chart-credit {
        display: none;
    }
    
    div#chart-form {
        margin: 15px auto;
        width: 60%;
        -webkit-animation: show_box .6s linear;
        animation: show_box .6s linear;
    }
    
    @-webkit-keyframes show_box {
        0% {
            opacity: 0;
            margin-top: 50px;
        }
    
        100% {
            opacity: 1;
            margin-top: 5px;
        }
    }
    
    @keyframes show_box {
        0% {
            opacity: 0;
            margin-top: 50px;
        }
    
        100% {
            opacity: 1;
            margin-top: 5px;
        }
    }
    
    @-webkit-keyframes toast_message {
        0% {
            opacity: .8;
        }
    
        50% {
            opacity: 1;
        }
    
        100% {
            opacity: .8;
        }
    }
    
    @keyframes toast_message {
        0% {
            opacity: .8;
        }
    
        50% {
            opacity: 1;
        }
    
        100% {
            opacity: .8;
        }
    }
    
    /* 
    @-webkit-keyframes show_box {
      0% { opacity:0; margin-bottom:10px; }
      100% { opacity:1; margin-bottom:20px; }
    }
    
    
    /* chart **************************    
    *********************************** */
    /* gift gift gift */
    .gift-box {
        width: 40%;
        height: 400px;
        margin: auto;
        direction: rtl;
    }
    
    .gift-pic {
        width: 40%;
        height: 150px;
        margin: auto;
        background: url(/assets/img/gift.svg);
        background-size: cover;
    }
    
    h2+p {
        font-size: 13px;
    }
    
    /**/
    /* navigation */
    a#username {
        white-space: nowrap;
        max-width: 140px;
        overflow: hidden;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        direction: ltr;
    }
    
    .navbar a#username .name {
        white-space: nowrap;
        /* max-width: 16em; */
        /* display: inline-block; */
        height: 15px;
        width: 90px;
        overflow: hidden;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        font-size: 16px;
        /* line-height: 25px; */
    }
    
    .navbar-inverse {
        background-color: #42c4ff;
        /* background-color: #42c4ffe8; */
        border-radius: 0px;
        border: none;
        margin-bottom: 30px;
    }
    
    .navbar-inverse .navbar-nav>li>a {
        color: #ffffff;
        transition: background-color .5s ease;
        font-size: 1.1em;
    }
    
    .dropdown-menu .divider {
        background-color: #eaeaea;
    }
    
    .navbar-inverse .navbar-nav>li>a:focus, .navbar-inverse .navbar-nav>li>a:hover {
        color: #fff;
        background-color: #4dc9ff;
        transition: all .5s ease;
    }
    
    .navbar-collapse {
        /* position: unset; */
        /* background-color: #42c4ff; */
        /* z-index: 1000; */
        /* width: 100%; */
        /* padding: 0px 20px; */
    }
    
    .navbar-collapse.collapse.in li a {
        border-radius: 10px;
    }
    
    .navbar-inverse .navbar-toggle {
        border-color: #51bfef;
    }
    
    .navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover {
        /* background-color: #ffffff; */
    }
    
    .navbar-inverse .navbar-toggle .icon-bar {
        /* background-color: #ffffff; */
    }
    
    .navbar-inverse .navbar-toggle:hover .icon-bar {
        /* background-color: #55bbe8; */
    }
    
    .navbar-inverse .navbar-toggle {
        background-color: #7ed8ff;
        border: none;
    }
    
    .navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
        border-color: #ffffff;
        border: none !important;
    }
    
    .navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:focus, .navbar-inverse .navbar-nav>.open>a:hover {
        color: #fff;
        background-color: #56c8fb;
        border-radius: 10px;
    }
    
    .navbar-nav {
        /* margin: 1.5px -13px; */
    }
    
    @media (max-width: 910px) {
        .navbar-nav {
            /* margin:2.5px 10px; */
            /* margin-left: 50px; */
        }
    
    
    
        .navbar-inverse .navbar-nav .open .dropdown-menu>li>a:hover {
            /* color: #fff; */
            /* background-color: #56c8fb */
        }
    }
    
    
    
    @media (max-width: 420px) {
        #typist {
            max-width: 99%;
        }
    
        object#svgObject {
            -webkit-transform: translateX(-102px) scale(1.01)!important;
            -ms-transform: translateX(-102px) scale(1.01) !important;
            z-index: 9;
            left: 5px;
            transform: translateX(-102px) scale(1.01) !important;
            top: -20px !important;
        }
    
        #vkeyboardhand svg {
            /* -webkit-transform: translateX(-150px) scale(0.6)!important; */
            -ms-transform: translateX(-150px) scale(0.6)!important;
            /* z-index: 9; */
            /* left: 5px; */
            /* transform: translateX(-150px) scale(0.6) !important; */
        }
    
        .showerr {
            display: none
        }
    
        div#typists_holder {
            width: 101%;
            background-color: transparent;
            /* transform: scale(0.99) !important; */
            transform-origin: center;
            /* overflow: scroll; */
        }
    
        div#load_more {
            margin: 0px !important;
        }
    
        .user_speed, .user_acc {
            transform: scale(0.79) !important;
           -webkit-transform: scale(0.79)!important;
           -ms-transform:scale(0.79)!important;
    
            width: 140px;
        }
    
        #lesson-btn, #start-lesson, .start_competition , #starttheexam {
            max-width: 100% !important;
        }
    
        #instruction .step {
            transform: scale(0.59) !important;
            
            transform-origin: -5% 90%;
            -webkit-transform-origin: -5% 90%;
           -ms-transform-origin: -5% 90%;
          
            -webkit-transform: scale(0.59)!important;
           -ms-transform:scale(0.59)!important;
         
            width: 70%;
        }
    
    
    
        .please_login_msg {
            display: none;
        }
    
        section#support-dialog,#smartphone-dialog {
            width: 80%
        }
    
        #account-dialog>section {
            width: 90%
        }
    
        .g-recaptcha {
            margin: auto
        }
    }
    
    
    /* ipad pro */
    @media screen and (max-width: 1024px) {
    
        .select_another_lesson {
        /* right: 100px !important; */
        /* top: 280px !important; */
    }
    
    div#keyboard_place {
        /* position: relative; */
        /* height: 530px; */
        /* top: -35px; */
        /* margin: auto; */
        /* overflow: hidden; */
        /* width: 70%; */
        /* left: 1%; */
    }
    
        #instruction .step.active {
            margin-top: 30%;
        }
    
    
    
    
    
    }
    
    /* ipad */
    @media screen and (max-width: 768px) {
    
    div#chart-form {
        width: 90%;
    }
        
    
    
    
    .select_another_lesson {
        /* right: 40px !important; */
        /* top: 250px !important; */
    }
    
    .navbar-nav{/* margin: 2.5px 10px; *//* margin-left: 10px; */padding-right: 0px;}
    
    
    .startpage, .startlesson, #typist {
    
        max-width:99%;
    
    }
    
    .startpage{
    position: fixed;
    }
        
    .container-fluid {
        /* font-size: 1.1em; */
    }
    
        max-width: 92%;
    .navbar-nav>li {
        float: right !important;
    }
        .circle_btn{/* top:290px; */left: -25px;}
    
        #instruction .step.active {
            margin-top: 20%;
            width: 66%;
        }
    
        .token_unit {
            font-size: 6em
        }
    
        .part {
            width: 90%;
            height: 150px;
        }
    
            .tool {
         transform: scale(.7) !important;
         -webkit-transform: scale(0.7);
         -ms-transform:scale(0.7);
         width: 110%;
        }
    
            div#end_msg {
            max-width: 45%;
        }
    
         div#show_typed_tokens {
            width: 65%;
            height: 180px;
            display: inline-block;
            overflow-x: scroll;
            overflow: auto;
        }
    
        div#show_typed_tokens .token_unit {
            text-align: center;
            margin: 10px 10px;
            width: 9%;
            height: 40px;
            font-size: 1.5em
        }
    
        .please_login_msg {
        width: 80%;
        margin: 1% auto;
        padding: 2px;
        text-align: center;
    }   
        
    }
    
    /* iphone X
    @media screen and (max-width: 375px) {
        #instruction .step.active {
            margin-top: -2%;
            width: 69%;
            -webkit-transform: scale(0.46);
            -ms-transform: scale(0.46);
            transform: scale(0.46) !important;
           
        }
    
        .inst-nav-lnk {
    
            -webkit-transform: scale(0.46);
            -ms-transform: scale(0.46);
            transform: scale(0.46) !important;
        }
    
        .token_unit {
            font-size: 6em
        }
    
        .part {
            width: 90%;
            height: 150px;
        }
    
    
    }
    
     iphone X 
    @media screen and (max-width: 320px) {
    
    
    
    
    
    }*/
    
    @media only screen and (min-width: 960px) {
        /* styles for browsers larger than 960px; */ #instruction .step.active {
            margin-top: 3%;
            width: 75%;
            left: 1%;
        }
    
        .inst-nav-lnk {
        }
    }
    
    
     @media only screen and (min-device-width: 521px) and (max-device-width: 1024px) and (orientation: landscape) {
    
          /* For landscape layouts only */
    
      span.new-label {
            display:none;
        }
          .token_unit {
            font-size: 3em;
            min-width: 40px !important;
            width: 90px;
        }
    
    #tokens {
        width: 100%;
        height: 180px;
    
    }
    div#keyboard_place {/* width: 722px; *//* left: 0px; *//* transform: scale(.7) translateX(-20px); *//* top: -100px; */}
    
        .select_another_lesson{/* display:none; */top: -25px;}
    
    
    
            .abs {
            display:none;
        }
    
        .part {
            width: 100%;
            height: 113px;
        }
    
        #instruction .step.active {
            margin-top: 2%;
            width: 100%;
            -webkit-transform: scale(0.46)!important;
            -ms-transform: scale(0.46)!important;
            transform: scale(0.46) !important;
            /* left: -150px; */
        }
    
        video {
        width: auto;
        max-width: 100%;
    }
    
        #instruction #instructions {
        position: fixed;
        top: -10%;
        left: -30%;
        width: 90%;
    }
    
        .inst-nav-lnk {
            -webkit-transform: scale(0.46);
            -ms-transform: scale(0.46);
            transform: scale(0.46) !important;
        }
    
        .tool {
         transform: scale(0.5) !important;
        -webkit-transform: scale(0.5);
        -ms-transform:scale(0.5);
        }
    
            div#end_msg {
            max-width: 95%;
        }
    
        .smallbox {
            position: static!important;
            transform: scale(0.9) !important;
                 -webkit-transform: scale(0.9) !important;
        -ms-transform:scale(0.9) !important;
        }
    
        div#info {
            display: none;
        }
    
    
    
        .bottom_buttons {
            width: 100%;
        }
    
        h3#end {
            width: 90%;
        }
    
        div#show_typed_tokens {
            width: 100%;
            height: 180px;
            display: inline-block;
            overflow-x: scroll;
            overflow: auto;
        }
    
        div#show_typed_tokens .token_unit {
            text-align: center;
            margin: 10px 10px;
            width: 9%;
            height: 40px;
            font-size: 1.5em
        }
    
        div#chart-form {
            width: 99%;
        }
    
        .lesson-box {
            height: 500px;
            width: 140%;
            left: -1px;
            margin-top:-50px;
            /* position: absolute; */
            transform: scale(.72) translatey(-68px);
            transform-origin: left;
        }
    
        .wrapper {
        border-top-right-radius: 1px !important;
        border-top-left-radius: 1px;
        width: 100%;
        /* margin-top: -9px !important; */
        text-align: center;
        max-height: 600px;
    }
    
    .add_exam {
        padding-top: 20px !important;
        position: absolute;
        left: -15px;
        top: -145px;
        float: left;
        transform: scale(.85) translatey(5px);
    }
    
    
    
    #instruction .arrow-up, #instruction .arrow-down, #instruction .arrow-ok {
    
        right:5px;
       
    }
    
    .userprogress{
        transform:
        scale(.8) translatey(-30px);
        width: 100%;
    }
    
    .des {
        font-size: 1.1em;
        width: 90%;
    }
    
    
    
    
    
    
    .please_login_msg{
        display:none;
    }
    
    .title {
        text-align: right;
        direction: rtl;
        margin: 10px;
        font-size: 1.5em;
        margin-top: 10px;
        text-align:center
    }
    
    #lesson-btn, #start-lesson, .start_competition, #starttheexam{
        max-width: 100%;
    }
    
    
    
        .copyright{/* position: absolute; *//* bottom: 265px; */display: none !important;}
    
    
    
        .startpage, .startlesson, #typist {
            max-width: 100%;
        }
    
    
        #text_holder {
            max-height: 400px;
            font-size: 2em;
        }
    
         #line span,  #rline span{
    
             margin-top:12px !important;
    
        }
    
    
    }
    
    @media only screen and (device-width:1024px) and (orientation:landscape){
    
    div#keyboard_place {
     width: 100%;
     left: 120px !important;
     height: 460px;
     transform-origin:center;
     }
    
          .token_unit {
            font-size: 3em;
            width: 10% !important;
        }
        
    
        #instruction .step.active {
            margin-top: 25% !important;
            width: 90%;
            -webkit-transform: scale(1)!important;
            -ms-transform: scale(1)!important;
            transform: scale(1) !important;
            left: 390px;
        }
    
    
    
    }
    
    @media only screen and (max-device-width: 480px) {
    
        .iframe-container {padding-top: 280% !important;}
     
    
        span.new-label {
            display:none;
        }
        /* styles for mobile browsers smaller than 480px; (iPhone) */ .token_unit {
            font-size: 3em;
            width: 15%;
        }
    
        .oName {
        padding-bottom: 15px;
        text-decoration: underline;
        text-underline-offset: 8px;
        text-align: center !important;
        margin-bottom: -30px;
    }
    
    .small-alert {
        width: 100%;
        margin: auto;
        direction:rtl;
    }
    
    div#keyboard_place {
     /* zoom:2; */
     /* transform:
     scale(.9) translatey(-10px); */
     /* width: 110%; */
     /* left: 6px; */
     /* transform-origin:
     left; */
     /* height: 300px; */
     }
    
    .hands_holder{/* width:620px; *//* position: relative; *//* left: -85px; *//* top: -5px; */}
        
    .aboveLessons{
    
    zoom: .9;
    }
    
    .navbar-nav>li {
        /* float: left !important; */
    }
    
            .abs {
            display:none;
        }
    
        .part {
            width: 100%;
            height: 90px;
        }
    
        #instruction .step.active {
            margin-top: -5%;
            width: 70%;
            -webkit-transform: scale(0.46)!important;
            -ms-transform: scale(0.46)!important;
            transform: scale(0.46) !important;
        }
    
        .inst-nav-lnk {
            -webkit-transform: scale(0.46);
            -ms-transform: scale(0.46);
            transform: scale(0.46) !important;
        }
    
        .tool {
         transform: scale(0.5) !important;
        -webkit-transform: scale(0.5);
        -ms-transform:scale(0.5);
        }
    
            div#end_msg {
            max-width: 95%;
        }
    
        .smallbox {
            position: static!important;
            transform: scale(0.9) !important;
                 -webkit-transform: scale(0.9) !important;
        -ms-transform:scale(0.9) !important;
        }
    
        div#info {
            display: none;
        }
    
    
    
        .bottom_buttons {
            width: 100%;
        }
    
        h3#end {
            width: 90%;
        }
    
        div#show_typed_tokens {
            width: 100%;
            height: 180px;
            display: inline-block;
            overflow-x: scroll;
            overflow: auto;
        }
    
        div#show_typed_tokens .token_unit {
            text-align: center;
            margin: 10px 10px;
            width: 9%;
            height: 40px;
            font-size: 1.5em
        }
    
        div#chart-form {
            width: 99%;
        }
    
        .lesson-box {
            height: 500px;
            width: 110%;
            margin-left: -10px;
            /* position: absolute; */
        }
    
    
    
        #change_keyboard_btn{
            display:none;
        }
    
        .wrapper {
        border-top-right-radius: 1px !important;
        border-top-left-radius: 1px;
        width: 100%;
        margin-top: 50px !important;
        text-align: center;
    }
    
    
    
        .copyright{position: absolute;bottom:-2px;display: none;}
    
        .circle_btn.add_exam {
            display: none
        }
    
        .startpage, .startlesson, #typist {
            max-width: 100%;
        }
    
        #text_holder {
            max-height: 400px;
            font-size: 1.7em;
        }
    }
    
    
    
    
    #login-dp {
        min-width: 250px;
        padding: 14px 14px 0;
        overflow: hidden;
        background-color: rgba(255,255,255,.8);
    }
    
    #login-dp .help-block {
        font-size: 12px
    }
    
    #login-dp .bottom {
        background-color: rgba(255,255,255,.8);
        border-top: 1px solid #ddd;
        clear: both;
        padding: 14px;
    }
    
    #login-dp .social-buttons {
        margin: 12px 0
    }
    
    #login-dp .social-buttons a {
        width: 49%;
    }
    
    #login-dp .form-group {
        margin-bottom: 10px;
    }
    
    .btn-fb {
        color: #fff;
        background-color: #3b5998;
    }
    
    .btn-fb:hover {
        color: #fff;
        background-color: #496ebc
    }
    
    .btn-tw {
        color: #fff;
        background-color: #55acee;
    }
    
    .btn-tw:hover {
        color: #fff;
        background-color: #59b5fa;
    }
    
    @media(max-width: 910px) {
        #login-dp {
            background-color: inherit;
            color: #fff;
        }
    
        #login-dp .bottom {
            background-color: inherit;
            border-top: 0px none;
        }
    }
    
    .navbar {
        /* direction: rtl; */
    }
    
    span.caret {
        margin-right: 5px;
        margin-left: 5px;
    }
    
    @media (min-width: 910px) {
        .navbar-nav>li {
            /* float: right; */
        }
    }
    
    @media (min-width: 768px){
        
    .navbar-nav>li {
        /* float: right !important; */
    }
        
    }
    
    @media (max-width: 900px) {
        .navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
            text-align: right;
            font-size: 1em;
        }
    
            .navbar-inverse .navbar-nav .open .dropdown-menu>li>a.active {
            text-align: right;
            font-size: 1em;
            background-color: #68d1ff;
            color: white !important;
            border-radius: 10px;
        }
    
        #account-dialog .close-btn {
            position: fixed;
            top: 32px;
            right: 32px;
            font-size: 32px;
            font-weight: 700;
            line-height: 1;
            font-weight: 100;
            color: #fff;
            text-decoration: none;
            cursor: pointer;
        }
    }
    
    
    
    
    
    
    /*                Playback!                    */
    
    #pb_text_holder {
        font-size: 1.8em;
        /* max-height: 250px; */
        margin-top: 35px;
        max-width: 100%;
        padding: 0px;
        height: 200px;
        margin-top: 10px;
    }
    
    .navbar-toggle{
        display:none;
    }
    
    
    @media (min-width: 768px){
    
    
        
    .pb_modal_dialog {width: 600px;margin: 30px auto;}
    
    }
    
    /* responsive *//* responsive *//* responsive */
    /* responsive *//* responsive *//* responsive */
    
    
    @media (max-width: 767px) {
    
    .darkmodebtn{display:none;}
    .navbar-toggle{
        display:block !important;
    }
    
    .navbar-collapse {
        position: fixed;  
    }
    .brand {
        display:block;
    }
    
    .typeoName {
        display:none !important;
    }    
    .navbar-nav>li {
        float: none;
    }    
    
    .navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
            color: #fff;
    }
    
        .top-icon{
    display:block !important;
    }    
    
    .navbar-inverse .navbar-nav .open .dropdown-menu .divider {/* background-color: unset; */}
    
        .token_unit{
    
            font-size:3.1em;
            min-width:70px !important;
            height:90px
    
        }
        
     
        
    }
    
    
    
    /* responsive *//* responsive *//* responsive */
    /* responsive *//* responsive *//* responsive */
    
    
    /* so small */
    /* Phone */
    @media (max-width: 455px) {
    
        .brand .brandd{
          
            font-size: 10px;
            padding:5px;
        }
    
        .top-icon{
        /* margin-left: -50px; */
    }
    
    
       
        
    }
    
    /* end so small */
    
    @media (max-width: 730px) {
    div#keyboard_place{
        width: 100%;
        display: block;
        transform-origin: center;
        /* border: 1px solid red; */
        overflow-x: scroll;
        /* zoom: .5; */
        max-width: none;
        margin-top: -01px;
        /* right: 10%; */
    }
    
          
        
    }
    /* top-
    icon */ 
    /* top-icon */  
    /* top-icon */  
    
    
    @media (max-width: 1300px) {
        
        .top-icon{
    /* display:none; */
    }
    }
    
    
    /* top-icon */  
    /* top-icon */  
    /* top-icon */  
    /* top-icon */  
    
    
    /* userprogress */
    
    @media (max-width: 600px) {
        
        .userprogress {
            /* display: none; */
            overflow: auto;
            width: 637px;
            overflow-x: scroll;
            overflow-y: hidden;
            white-space: nowrap;
            flex: 1;
            overflow: auto;
        }
    }
    
    
    
    @media (min-width: 768px){
    .navbar-nav>li {
        /* float: right; */
    }
    
    }
    
    
    .pb_modal_dialog label {
        color: black;
    }
    
    sup {left: 20px;top: 4px;}
    
    #pb_button.paused {
        width: 100%;
        background-color: #0000008a;
        height: 250px;
        position: absolute;
        cursor: pointer;
    }
    
    #pb_button.play {
        width: 100%;
        background-color: #ffffff3b;
        height: 250px;
        position: absolute;
        cursor: pointer;
    }
    
    #pb_button span.fa {
        font-size: 4em;
        margin: 12px;
        margin-top: 13%;
        color: white;
        cursor: pointer;
    }
    
    .play span.fa.fa-play{
        display:none;
    }
    
    div#pb_button {
        background-color: black;
        opacity: .8;
        /* background-color: #000000d1; */
        height: 100%;
        position: absolute;
        width: 100%;
        left: 0px;
        z-index: 10;
    }
    
    .pb_profile {
        /* border: 1px solid red; */
        width: 190px;
        height: 100px;
        position: absolute;
        z-index: 99;
        top: -25px;
    }
    
    .pb_picture {
        width: 80px;
        /* border: 1px solid red; */
        height: 80px;
        /* left: 30px; */
        /* margin-left: 40px; */
        margin-right: -42px;
        margin-top: -10px;
    }
    
    .pb_name {
        /* border: 1px solid red; */
        color: black;
        font-size: 14px;
        height: 50px;
    }
    
    .pb_stars {
        /* border: 2px solid green; */
        height: 50px;
        /* top: -10px; */
        margin-top: -25px;
    }
    
    span#pb_wpm {
        position: absolute;
        margin: 0 9px;
    }
    
    #pb_modal hr {
        border-top: 1px solid #d6d6d6;
        margin: 1px;
    }
    
    #pb_modal .details span.fa {
        margin: 0px 6px;
    }
    
    .lesson_pb {
        font-size: 1.3em;
        margin: -10px 60px 10px;
        text-align: right;
        /* width: 80%; */
        color: #424242;
        direction: rtl;
    }
    
    .show_pb span {
        margin: 0 5px;
    }
    
    .spin {
        -webkit-animation: spin 2s linear infinite;
        animation: spin 2s linear infinite;
    }
    
    .pb_alert {
        width: 100%;
        float: right;
        font-size: 1em;
        text-align: right;
        padding-right: 60px;
    }
    
    
    /*         End playback.                    */
    
    
    .navbar-header div#show_notification,.navbar-header .top-icon {
        cursor: pointer;
        position: absolute;
        left: 60px;
        top: 15px;
        z-index: 100;
    }
    
    .top-icon.prize {
        left: 110px;
    }
    
    
    .top-icon span.fa{
        font-size: 1.3em;
        color: white;
        margin: auto;
    }
    
    .top-icon span.fa{
        font-size: 1.3em;
        color: white;
        margin: auto;
    }
    
    .top-icon span.fa.fa-gift {
        font-size: 1.4em;
    }
    
    span.reddot {
        color: #ffffff;
        font-size: 2.2em;
        position: absolute;
        margin-top: -20px;
        margin-right: -15px;
        /* animation: shake 1s cubic-bezier(.36,.07,.19,.97) 1s both 15; */
        animation: blink 0.9s linear infinite;
    }
    
    .circle_btn.gift-btn {
        position: fixed;
        bottom: 80px;
        width: 40px;
        height: 40px;
        left: 8px;
        font-size: 25px;
        line-height: 44px;
        z-index: 1000000000000000000000;
        background-color: #ff5549;
        animation: blink 0.9s linear 5;
    }
    
    a.gift-btn:hover,a.gift-btn:focus {
        color: #ffffff;
        background-color: #ef5449;
        transition: all .15s ease-in-out;
    }
    
    #show_notification .number,.top-icon .number{
        padding-left: 1px;
        background-color: #ff6a6a;
        border-radius: 100px;
        -webkit-border-radius: 100px;
        -moz-border-radius: 100px;
        line-height: 26px;
        width: 25px;
        height: 25px;
        color: white;
        font-size: 1em;
        position: absolute;
        margin-top: 5px;
        margin-left: -20px;
        text-align: center;
        animation: shake 1s  cubic-bezier(.36,.07,.19,.97) 1s both 15;
        /* border: 2px solid; */
    }
    
    @keyframes shake {
      10%, 90% {
        transform: translate3d(-1px, 0, 0);
      }
      
      20%, 80% {
        transform: translate3d(1px, 0, 0);
      }
    
      30%, 50%, 70% {
        transform: translate3d(-1px, 0, 0);
      }
    
      40%, 60% {
        transform: translate3d(4px, 0, 0);
      }
    }
    
    
    .notification_list li {
        list-style: none;
        /* cursor: pointer; */
        /* border-radius: 10px; */
        /* background-color: #fff1cb; */
        padding: 10px;
        margin: -1px 5px;
        color: #333333;
        text-align: right;
        line-height: 1.9em;
        font-size: .95em;
    }
    
    ul.notification_list {
        padding-right: 0px;
        margin-top: 10px;
        min-height: 200px;
        max-height: 400px;
        overflow: auto;
        overflow-x: hidden;
        overflow-y: auto;
    }
    
    
    li.unseen {
         background-color: #ffffff;
         /* border-bottom: 1px solid #e8e8e8; */
         /* border-top: 1px solid #e8e8e8; */
         cursor: pointer;
         letter-spacing: -0.02em;
         border-right: 2px solid #8ccfe8;
    }
    
    .unseen a {
        color: #1ba8dc;
    }
    
    .notification_list p {
        font-size: .95em;
    }
    
    .invite .btn.username {
        color: #135a90;
        max-width: 100px;
        width: auto;
        overflow: hidden;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        /* padding: 2px 5px; */
        /* background-color: #e3fbff; */
        font-size: 14px;
        /* border-bottom: 2px solid #3198e8; */
        border-radius: 0;
        /* margin-top: -6px; */
    }
    
    p.invite {
        text-align: right;
        /* border-bottom: 1px solid #eaeaea; */
        margin-bottom: none;
    }
    
    .invite .btn.accept {
         background-color: #e0f5ff;
         color: #1590bf;
    }
    
    .invite .btn.view {
         background-color: #d2c3ec;
         color: #665e73;
    }
    
    .invite span.lost {
         background-color: #ffcfcf;
         color: #bd1818;
    }
    
    .invite span.win,#end .win {
         background-color: #b3fdaa;
         color: #3e9434;
    }
    
    .invite span.noone {
         background-color: #e7f5ff;
         color: #3c83ef;
    }
    
    .invite .lost,.invite .win,.invite .noone,#end .win,#end .lost,#end .noone   {
    
    border-radius: 10px;
        margin: 5px;
        padding: 4px;
    
    }
    .invite .btn{border-radius: 10px;margin: 0px 5px;padding: 4px;cursor: pointer;font-size: 11px;}
    
    .invite a {
        /* border-bottom: 2px solid #baf6ff; */
        /* background-color: #e8fcff; */
        padding: 5px;
    }
    
    #end span.u_wpm,#end span.o_wpm {
        background-color: #bfddff;
        padding: 1px 5px;
        color: #4787d0;
        border-radius: 5px;
        margin: 2px;
    }
    
    #end span.u_acc,#end span.o_acc {
        background-color: #ffb9b9;
        padding: 1px 5px;
        color: #d46767;
        border-radius: 5px;
        margin: 2px;
    }
    
    #competition_msg span,#tips span {
        background-color: #ffffff;
        text-align: center;
        padding: 5px;
        border-radius: 10px;
        /* border-bottom: 1px solid #ececec; */
    }
    
    div#competition_msg,#tips {
        direction: rtl;
        height: 40px;
    }
    
    #tips span.fa {
        padding: 5px 9px 5px 9px;
        background-color: #ffffff;
        color: #000000;
        font-size: 18px;
        margin-left: 5px;
    }
    
    .shake {
        animation: shake 1s;
        animation-iteration-count: 3;
    }
    
    a.opponent_name {background-color: #edf7ff !important;color: #10bad0;text-align: center;padding: 5px;border-radius: 10px;margin: 0px 5px;}
    
    
    
    li.seen {background-color: #fafafa;border-bottom: 1px solid #f1f1f1 !important;margin-bottom: 1px;color: grey;}
    
    /*                      */
    
    .speed-icon {
        width: 35px;
        height: 35px;
        background-image: url(/assets/img/speed.svg);
        background-size: cover;
        /* margin: 0 20px 10px; */
        position: absolute;
        left: -15px;
        top: 7px;
    }
    
    .acc-icon {
        width: 40px;
        height: 40px;
        background-image: url(/assets/img/acc.svg);
        background-size: cover;
        /* margin: 0 20px 10px; */
        position: absolute;
        left: 1px;
    }
    
    .row.nacc {
        position: absolute;
        left: 100px;
        top: -2px;
    }
    
    .row.nspeed {
        /* margin-left: -5px; */
        position: absolute;
        left: 20px;
        top: 2px;
        /* margin-top: 20px; */
    }
    
    .lesson span.needed_speed {
        position: relative;
        /* top: 25px; */
    }
    
    /* **********************************  nok toast_message */
    #nok {
        position: fixed;
        margin-top: 60px;
        z-index: 999;
        top: 10px;
        right: 0;
    }
    
    #nok .nok {
        display: block;
        position: relative;
        overflow: hidden;
        margin-top: 10px;
        margin-right: -4px;
        padding: 18px;
        width: 280px;
        /* border-radius: 10px; */
        color: #ff6c6c;
        right: -300px;
        direction: rtl;
        font-size: 1.2em;
        cursor: pointer;
        line-height: 22px;
    }
    
    #nok .nok_info {
        background: #f59d24;
    }
    
    #nok .nok_success {
        background: #68C300
    }
    
    #nok .nok_error {
        /* background: #000000ad; */
        /* border-radius: 8px; */
        /* border-bottom: 2px solid #ff6c6c; */
    }
    
    /* ********************************** */
    
    /*  d_box */
    
    .d_box {
        text-align: center !important;
        margin: 5px;
        float: none;
        display: inline-block;
        background: #ffffff;
        border-radius: 6px;
        border-bottom: 2px solid #e3e3e3;
    }
    
    
    
    
    
    .row.t_r {
        background-color: #f5f5f5;
        /* border-radius: 10px; */
        padding: 8px 0px;
    }
    
    
    
    .d_box p {
        text-align: center;
    }
    
    .waiting .d_box {animation: waiting 1s linear infinite;}
    
    .d_box .number {
        font-size: 1.8em;
        z-index: 4;
        display: block;
    }
    
    .d_box .label,.d_box .label2 {
        color: black;
        position: absolute;
        margin-top: -50px;
        margin-left: -75px;
        font-weight: normal;
    }
    
    .d_box .label2 {
        margin-left: -75px;
        font-size: 9px;
        margin-top: -30px;
    }
    
    
    .d_box .progress {}
    
    .d_box .p {
        font-size: 18px;
        position: absolute;
        /* padding-left: 30px; */
        /* padding-bottom: 10px; */
        z-index: 2;
        background-color: white;
        border-radius: 10px;
        top: 20px;
        padding: 2px;
    }
    
    .d_box img {
        position: absolute;
        width: 100px;
        top: 1px;
        z-index: 1;
        right: 10px;
        opacity:.3
    }
    
    p.r_des {
        text-align: center;
        line-height: 35px;
    }
    
    span#r_fa, span#r_en, .type-faster a {
        background-color: #f5f5f5;
        padding: 5px;
        margin: 4px;
        color: #1075a2;
        font-size: 12px;
        border-radius: 5px;
        cursor: pointer;
    }
    
    span#r_fa.selected,span#r_en.selected {
        background-color: #3ab5ef;
        color: #ffffff;
    }
    
    .text-highlight {
      font-style: normal;
      border-radius: 1em 0 1em 0;
      /* text-shadow: 1px 1px 1px #fff; */
      background-image: 
        linear-gradient(-100deg, 
          rgba(255,250,150,0.15),
          rgba(255,250,150,0.8) 100%, 
          rgba(255,250,150,0.25)
        );
    }
    
    .d_b_h {
        background-color: #f1f1f1;
    }
    
    
    
    .d_box .p.up {
        color: #16c316;
    }
    
    .d_box .p.down {
        color: #FF5722;
    }
    
    
    .type-faster {color: #e9554a;background-color: #ffecec;/* border-bottom: 2px solid #ff6b60 !important; */padding: 10px;}
    
    
    
    .type-faster a {
        color: white;
        background-color: #ff7c72;
        z-index:1;
        font-size: 18px;
    }
    
    .type-faster a:hover {
        color: white;
        background-color: #f1675c;
        z-index:1;
    }
    
    .type-faster img,.creategroup img {
        width: 86px;
        z-index:2;
        position: absolute;
    }
    
    .type-faster .fire {
        position: absolute;
        top: unset;
        left: unset;
        z-index: 1;
        display: inline-block;
        margin-top: 30px;
        margin-left: 20px;
    }
    
    .n_icon {
        padding: 0px 5px;
        color: #dcdcdc;
        position: absolute;
        font-size: 50px !important;
        bottom: 10px;
        right: 10px;
        z-index: 1;
        opacity: 0.6;
    }
    
    /*  d_box end */
    
    /* alert */
    
        img.emoji {
       height: 1em;
       width: 1em;
       margin: 0 .05em 0 .1em;
       vertical-align: -0.1em;
    }
    
    .alert.alert-warning {
        border-bottom: 2px solid #e7dead;
    }
    
    .alert-warning {
        color: #ed9600 !important;
        background-color: #fffcee !important;
        border-color: #fffcee !important;
    }
    
    .alert {
        border-radius: 5px;
        padding: 15px 30px;
        margin-bottom: 5px;
        border:none;
    }
    
    .alert.alert-info {
        border-bottom: none;
        background-color: #f4fcff;
        color: #03a9f4;
    }
    
    
    /* avatars */
    
    .avatar--01.v1{
            background-image: url(/assets/img/avatars/avatar-01_v1.webp);
    
    }
    
    .avatar--02.v1{
            background-image: url(/assets/img/avatars/avatar-02_v1.webp);
    
    }
    
    
    .avatar--03.v1{
            background-image: url(/assets/img/avatars/avatar-03_v1.webp);
    
    }
    
    .avatar--04.v1{
            background-image: url(/assets/img/avatars/avatar-04_v1.webp);
    
    }
    
    .avatar--05.v1{
            background-image: url(/assets/img/avatars/avatar-05_v1.webp);
    
    }
    
    .avatar--01.v2{
            background-image: url(/assets/img/avatars/avatar-01_v2.webp);
    
    }
    
    .avatar--02.v2{
            background-image: url(/assets/img/avatars/avatar-02_v2.webp);
    
    }
    
    
    .avatar--03.v2{
            background-image: url(/assets/img/avatars/avatar-03_v2.webp);
    
    }
    
    .avatar--04.v2{
            background-image: url(/assets/img/avatars/avatar-04_v2.webp);
    
    }
    
    .avatar--05.v2{
            background-image: url(/assets/img/avatars/avatar-05_v2.webp);
    
    }
    
    .avatar--01.v3{
            background-image: url(/assets/img/avatars/avatar-01_v3.webp);
    
    }
    
    .avatar--02.v3{
            background-image: url(/assets/img/avatars/avatar-02_v3.webp);
    
    }
    
    
    .avatar--03.v3{
            background-image: url(/assets/img/avatars/avatar-03_v3.webp);
    
    }
    
    .avatar--04.v3{
            background-image: url(/assets/img/avatars/avatar-04_v3.webp);
    
    }
    
    .avatar--05.v3{
            background-image: url(/assets/img/avatars/avatar-05_v3.webp);
    
    }
    
        .popout {
            animation: popout 1s ease;
            -webkit-animation: popout 1s cubic-bezier(.42,0,.61,1.86);
        }
        @keyframes popout {
            from{transform:scale(.5)}
            80%{transform:scale(1.001)}
            to{transform:scale(1)}
        }
        /*
        @-webkit-keyframes popout {
            from{-webkit-transform:scale(.5)}
            80%{-webkit-transform:scale(1.1)}
            to{-webkit-transform:scale(.5)}
        }*/
    
    
    
    
    span.new-label {
        position: absolute;
        font-size: 10px;
        background-color: #ff6a6a;
        padding: 0px 2px;
        border-radius: 5px;
        /* left: -5px; */
        /* top: 5px; */
        z-index: 99;
        margin-top: -10px;
    }
    
    .avatar {
        background-size: 100%;
        content: "";
        right: 10px;
        /* position: relative; */
        top: 100px;
        width: 90px;
        height: 90px;
        background-repeat: no-repeat;
        background-position: center center;
        transition: transform .25s cubic-bezier(.42,0,.61,1.86);
        cursor: pointer;
        /* display: none; */
        margin-top: -10px;
    }
    
    .avatar:hover {
        transform: scale(1.1);
    }
    
    .ubox.avatarbox {
        width: 90px;
    }
    
    .progress-bar {
        float: right !important;
    }
    
    /* end avatars */
    
    /* end alert */
    
    .iframe-container {
      overflow: hidden;
      padding-top: 65.25%;
      position: relative;
      margin-top: -30px;
    }
     
    .iframe-container iframe {
       border: 0;
       height: 100%;
       left: 0;
       position: absolute;
       top: 0;
       width: 100%;
    }
    
    #raychatFrame {
        min-height: unset !important;
    }
    
    @-webkit-keyframes tada {
      0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
      }
    
      10%, 20% {
        -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
      }
    
      30%, 50%, 70%, 90% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
      }
    
      40%, 60%, 80% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
      }
    
      100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
      }
    }
    
    @keyframes tada {
      0% {
        -webkit-transform: scale3d(1, 1, 1);
        -ms-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
      }
    
      10%, 20% {
        -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
        -ms-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
      }
    
      30%, 50%, 70%, 90% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
        -ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
      }
    
      40%, 60%, 80% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
        -ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
      }
    
      100% {
        -webkit-transform: scale3d(1, 1, 1);
        -ms-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
      }
    }
    
    .tada {
      animation-name: tada;
      -webkit-animation-duration: 1.5s;
      animation-duration: 1.5s;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
    }
    /* between */
    
    
    
    
    notification_title {
        font-family: 'Vazir' !important;
        direction: rtl !important;
        line-height: 20px !important;
        font-size: 14px !important;
    }
    
    notification_time {
        display: none !important;
    }
    
    popup_notification {
        box-shadow: unset !important;
    }
    
    popup_notification.webpushr-notification {}
    
    btn#webpushrUnknownBtn {
        font-family: 'Vazir' !important;
    }
    
    promptnotificationicon {
        font-family: 'VazirFD' !important;
        background: #ff4c4c !important;
        font-size: 18px !important;
        width: 30px !important;
        height: 30px !important;
        right: -15px !important;
    }
    
    notification_title {
        color: #3b3b3b !important;
        font-size: 12px !important;
    }
    
    .oName {
        padding-bottom: 15px;
        text-decoration: underline;
        text-underline-offset: 8px;
        text-align: right;
    }
    
    .oName img {
        width: 100px;
        -webkit-user-drag: none;
    }
    
    
    span.showpass {
        color: #7f7f7f;
        position: absolute;
        left: 5px;
        top: 5px;
        font-size: 14px;
        padding: 10px;
        cursor: pointer;
    }
    
    span.showpass:hover {
        color: #6b6b6b;
    }
    
    
    .passwordinput {position: relative;}
    
    div#login_recaptcha, #reg_recaptcha,#password_recaptcha {
        display: flex;
        justify-content: space-around;
        margin: 10px;
    }
    
    .modal-content {box-shadow: unset;border-radius: 10px;}
    
    .btn-default {
        color: #333;
        background-color: #fff;
        /* border-color: #ccc; */
    }
    
    .btn-default:hover {
        color: #333;
        background-color: #f7f7f7;
        /* border-color: #ccc; */
    }
    
    
    .tooltip-inner {
        max-width: 200px;
        padding: 6px 8px;
        color: #282828;
        text-align: center;
        background-color: white;
        border-radius: 4px;
    }
    
    .tooltip.top .tooltip-arrow {
        bottom: 0;
        left: 50%;
        margin-left: -5px;
        border-width: 5px 5px 0;
        border-top-color: #656565;
        display: none;
    }
    
    .nav-tabs>li>a:hover {
        border-color: white;
    }
    
    .nav>li>a:focus, .nav>li>a:hover {
        text-decoration: none;
        background-color: #e1f5fe;
        color: #03a9f4;
        transition: all .4s ease;
    }
    
    .nav-tabs {
        border-bottom: 1px solid #fff;
    }
    
    .nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
        color: #03a9f4;
        cursor: default;
        background-color: #e1f5fe;
        border: unset;
        border-bottom-color: transparent;
        border-radius: 10px;
        transition: all .4s ease;
    }
    
    .st1 {
        fill: #777777;
    }
    
    #today_practice {background-color: #42c4ff;}
    
    .btn-info {
        color:white;
        background-color: var(--bluebtn);
        /* border-color: #46b8da; */
    }
    
    .btn-info:hover {
        color:white;
        background-color: var(--bluebtnhover);
        /* border-color: #46b8da; */
    }
    
    .btn-success:hover {
        color: #fff;
        background-color: #5dd15d !important;
        border-color: #5dd15d !important;
    }
    
    .btn,.btn:focus{outline:unset !important;}
    
    .btn-info {
        color: white !important;
        background-color: var(--bluebtn);
        /* border-color: #46b8da; */
    }
    
    .btn-info:hover {
        color: white !important;
        background-color: var(--bluebtnhover);
        border-color: var(--bluebtnhover) !important;
    }
    
    .btn-success:hover {
        color: #fff;
        background-color: #63e363 !important;
        border-color: #5dd15d !important;
    }
    
    .btn,.btn:focus{outline:unset !important;}
    
        
    .darktheme #keyboard_place.color #keys .st0 {
        /* stroke: unset !important; */
        opacity: .5;
    }

.darktheme #change_keyboard_btn{
    color:white;
}
    
    #keyboard_place.color text{
    
           fill: #ffffff !important;
           
    }
    
    #keyboard_place.color .col1 {
       fill: #42c4ff !important;
    }
    #keyboard_place.color .col2 {
            fill: #9ccc65 !important;
    }
    #keyboard_place.color .col3 {
           fill: #ffd54f !important;
    }
    #keyboard_place.color .col4 {
           fill: #ff8a65 !important;
    }
    #keyboard_place.color .col5 {
            fill: #ff6865 !important;
    }
    #keyboard_place.color .col6 {
     fill: #ffd54f !important;
    }
    #keyboard_place.color .col7 {
     fill: #9ccc65 !important;
    }
    #keyboard_place.color .col8 {
             fill: #42c4ff !important;
    }
    
    path.incorrect, #keyboard .st0.incorrect {
        stroke: #ff8c8c !important;
        stroke-width: 2px;
        fill: #ff7676 !important;
    }
    
    .darktheme path.incorrect, .darktheme #keyboard .st0.incorrect {
        stroke: #820436 !important;
        stroke-width: 2px;
        fill: #e7246b !important;
    }
    .color path.incorrect {
        stroke-width: 2px !important;
        fill: #ff4848 !important;
        stroke: #ff2a2a !important;
        animation: shake 1s cubic-bezier(.36,.07,.19,.97) 1s both 2;
    }
    
    #keyboard_place.color path.active {
        stroke: #080808 !important;
        stroke-width: 2;
        fill: #131313 !important;
    }
    
    .canvasjs-chart-tooltip {
        box-shadow: unset !important;
    }
    
    .canvasjs-chart-tooltip div{
      
      text-shadow: unset !important;
    }
    
    .scrollbox {
       flex: 1;
       overflow-x: auto;
       overflow-y: hidden !important;
       padding-top: 10px;
       height: 130px;
    }
    
    
    .lesson-box-holder {
        padding: 10px 5px;
        background-color: #fbfbfb;
        border-radius: 10px;
        margin-top: -8px;
    }
    
    .keyboard-assist-modal .sample-layout.with-keys .path-enter {
        fill: #fff;
    }
    
    .keyboard-assist-modal .sample-layout.with-keys path {
        fill: #f4f4f4;
    }
    
    .keyboard-assist-modal .sample-layout path {
        fill: #fff;
        stroke: #c1c1c1;
        stroke-width: 0.5;
        stroke-miterlimit: 10;
    }
    
    .keyboard-assist-modal .sample-layout text {
        opacity: 0;
        font-size: 15px;
        user-select: none;
        fill: #333 !important;
    }
    
    .keyboard-assist-modal .sample-layout.with-keys text {
        opacity: 1;
    }
    
    .keyboard-assist-modal .sample-layout.with-keys {
        /* height: 105px; */
    }
    
    
    div .keyboard-assist-model {
        float: right;
    }
    
    span.keyboardLayout{
        cursor: pointer;
        border-radius: 10px;
        margin: 5px;
        float: right;
        width: 130px !important;
        transition: all .5s ease;
        border: 1px solid white;
    }
    
    span.keyboardLayout:hover {
        background-color: #fbfbfb;
        cursor: pointer;
        border-radius: 10px;
    }
    
    span.keyboardLayout.selected {border: 1px solid var(--maincolor);background-color: white;transition: all .5s ease;}
    
    .tip {
        padding: 5px 20px;
        text-align:
        right;
    }
    
    .tip ul {
        padding-right: 10px;
    }
    
    .darktheme .token_unit.active {
        border: unset;
        background-color: #1d3707;
        color: #6ea140;
    }
    
    .darktheme .token_unit.select.wrong {
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        background-color: #470d0d;
        border: unset;
        border-bottom: 9px solid #ba3838;
    }
    
    .darktheme .token_unit.wrong {
        background-color: #390a0a;
        color: #ba3838 !important;
        border: unset;
    }
    
    .darktheme .star, .darktheme .end_msg_, .darktheme #typing_page .circle_btn{
    
        opacity:.6 !important;
        
        }
    
    .darktheme .lessonname{
    
        color:white;
    }
    
    .darktheme #text_holder{
    
        color:#cccccc;
    }
    
    .darktheme .darkmodebtn {
    
    
        background-color: #222222;
        color: #f3f3f3;
    
    }
    
    .darktheme .text-highlight {
      color: white;
      background-image: linear-gradient(-100deg, 
          rgba(255,250,150,0.15),
          rgb(32 32 32) 100%, 
          rgb(223 213 24 / 25%)
        );
    }
    
    .darktheme .darkmodebtn span {
        background-color: #484848;
        color: #ffffff;
    }
    
    
    span.wKey {
        padding: 5px;
        margin: 2px;
        background-color: #d2d2d2;
        border-radius: 10px;
        color: #adadad;
        width: 35px;
        display: inline-block;
        cursor: pointer;
        font-family: 'Vazir';
        font-weight: 300;
        font-size: 18px;
    }
    
    .row.weakKeys {
        margin: 5px 0px;
        background-color: #f5f5f5;
        border-radius: 6px;
        padding: 5px;
    }
    
    span.wKey.active {
        background-color: #ffffff;
        color: #0d0d0d;
    }
    
    .bubble {
      position: absolute;
      font-family: 'Vazir';
      font-size: 14px;
      font-weight: 400;
      line-height: 24px;
      min-width: 190px;
      max-width: 251px;
      width: auto;
      background: #f2f2f2;
      border-radius: 40px;
      padding: 7px 10px;
      text-align: center;
      color: #5b5b5b;
      margin-right: -320px;
      margin-top: -16px;
    }
    
    .bubble-bottom-left:before {
      content: "";
      width: 0px;
      height: 0px;
      position: absolute;
      /* border-left: 24px solid #f2f2f2; */
      /* border-right: 12px solid transparent; */
      /* border-top: 12px solid #f2f2f2; */
      /* border-bottom: 20px solid transparent; */
      left: 32px;
      bottom: -24px;
    }
    
    
    
    .advice {
        /* display: flex; */
        position: relative;
        text-align: left;
        margin: auto;
        width: 100px !important;
        margin-top: -54px;
        float: left;
        z-index: 1;
    }
    
    
    p.adviceText {
        font-size: 18px;
        background-color: var(--gray);
        border-radius: 10px;
        /* padding-left: 117px; */
        padding: 20px;
    }
    
    p.adviceText::after {position: absolute;
        font-family:arial;color: #d1d1d1;font-size: 9rem;width: 4rem;height: 9rem;
        margin-right:100px;
      margin-top:-50px;}
    
    span.coachname {
        font-size: 12px;
        font-style: italic;
        text-align: center;
        display: block;
        margin-top: -10px;
    }
    
    span.coachname::before {
        font-size: 20px;
    }
    
    .darktheme #pb_modal .modal-content {
        background-color: #323232;
        border: unset;
    }
    
    .darktheme #pb_modal .modal-content hr {
    
        border-top: 1px solid #555555 !important;
    }
    
    .darktheme #pb_modal{
    
        color:#c5c5c5;
    }
    
    .darktheme #pb_modal button.close{
    
         color:#c5c5c5;
        
    }
    
    #pb_modal .details {
        margin: 5px 0px;
    }
    
    .darktheme .pb_button{
        opacity:.8
    }
    
    .darkmodebtn {
        position: absolute;
        /* top: 20%; */
        margin-left: 387px;
        background-color: #f9f9f9;
        padding: 5px;
        border-radius: 5px;
        color: #bebdbd;
        cursor: pointer;
        width: 120px;
    }
    
    
    .darkmodebtn span {
        font-size: 19px !important;
        padding: 5px 7px;
        background-color: #ededed;
        border-radius: 50%;
        color: #cfcfcf !important;
    }
    
    span.discount-code {
        font-family: vazir;
        padding: 5px;
        background-color: #f3fbff;
        color: #29b6f6;
        border-radius: 5px;
        font-weight: 900;
    }
    
    
    
    .aboveLessons>div{float: right;}
    
    .aboveLessons .btn {
        padding: 5px;
    }
    
    .showUpgrade.lbtn:hover {
        background-color: #f9fff9;
    }
    
    .showUpgrade:hover span.remainDays {
    }
    
    .showUpgrade.lbtn {
        padding: 8px;
        background-color: #f2fff2;
        border-radius: 4px;
        color: #5dc462;
        margin: -8px 5px;
        transition: all 1s ease;
        cursor: pointer;
        animation-duration: .7s;
        animation-iteration-count: 2;
        animation-timing-function: ease-out;
    }
    
    .shine:before {
    content: '';
    overflow: hidden;
    position: absolute;
    top: -94px;
    margin-top: -10px;left: -100px;
    width: 70px;
    height: 150%;
    background: rgba(255,255,255, 0.3);
    transform: skewX(322deg);
    animation-name: slide;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-delay: .3s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    background: linear-gradient(
        to right, 
        rgba(255, 255, 255, 0.13) 0%,
        rgba(255, 255, 255, 0.13) 77%,
        rgba(255, 255, 255, 0.5) 92%,
        rgba(255, 255, 255, 0.0) 100%
      );
    }
    
    @keyframes slide {
      0% {
        left: -100;
        top: 0;
      }
      50% {
        left: 50px;
        top: 0px;
      }
      100% {
        left: -100px;
        top: 0;
      }
    }
    
    span.remainDays {
        background-color: #ddf5ff;
        color: #26b3ee;
        padding: 1px 5px;
        border-radius: 5px;
        font-family: 'VazirFD';
        transition: all 1s ease;
    }
    
    .certification.lbtn {
        padding: 8px;
        background-color: #f2f8ff;
        border-radius: 4px;
        margin: -8px 5px;
        transition: all .5s ease;
        height: 40px;
        cursor: pointer;
        /* border: 1px solid; */
    }
    
    .certification.lbtn:hover{
        background-color: #f7fbff;
        transition: all .5s ease;
    }
    
    .alert.creategroup {
        background-color: #f1fbff;
        color: #03A9F4;
        height: 70px;
    }
    
    .creategroup a {
        background-color: #4ccfff;
        padding: 10px;
        border-radius: 10px;
        color: white;
        margin: 10px;
        line-height: 35px;
    }

@keyframes typeit {
    0% {
        opacity: 1
    }

    50% {
        opacity: 0.6;
    }

     60% {
        opacity: 0.4;
    }

    100% {
        opacity: 1
    }
}

body:has(.no-scroll) {
    overflow: hidden;
  }

.nav>li>a {
    position: relative;
    display: block;
    padding: 10px 15px;
}

h1.step-elm {
    font-family: 'kalamehblack';
    font-size: 40px !important;
    margin-bottom: 30px;
    color: #3c3c3c;
}

div#change_keyboard_color {
    top: 60px;
}


div#typing_page {
    margin-top: 70px;
}

.certification.lbtn a,.certification.lbtn a:hover {
    color: #5ba3ea;
    font-size: 16px;
}

#typists_holder .nav li a {font-size: 16px;border-radius: 10px;margin: 5px;background-color: #eaf8ff;transition: all .6s;}

.typist_table {
    background-color: #f9f9f9;
    overflow: scroll;
}

.login-btn-css,.reg-btn-css {
    background-color: white;
    padding: 5px;
    border-radius: 10px;
    font-family: 'Vazir';
    font-weight: 900;
}

div#all_practice {
    background-color: #a0e94b;
}

#typing_page .progressbox {
    width: 250px;
    margin: auto;
}

p.progressInfo {
    text-align: center;
    margin-bottom: 2px;
    font-weight: 700;
    font-family: 'Vazir';
    /* background-color: #f0ffec; */
    color: #919191;
}

.progress-bar,.progress {
    /* height: 25px; */
}

#typing_page .progress {
    background-color: #e9e9e991;
    /* border: 2px solid #42c4ff; */
    animation: blink .5s ease-in-out both 2;
    border-radius: 15px;
}

#typing_page .progress,#typing_page .progress-bar {

    height: 25px;
}



.today_practice.progress-bar {
    background-color: #1fb9ff;
}


.darktheme #typing_page .progressbox {
    opacity: .6;
}

/* */

#typing_page #show_them_here {
    display: flex;
    height: 120px;
    overflow: auto;
    overflow-y: hidden;
    flex-shrink: 0;
    position: relative;
    justify-content: flex-start;
}

.table td, .table th {
    border-top: unset;
}

.user_holder .s_holder {
    font-size: 12px;
    margin-right: -20px;
    margin-top: -20px;
    display: block;
}

#typing_page td {
    padding-top: 1px;
    width: 220px;
    display: block;
}

#typing_page tr {
    width: 230px;
    background-color: #ffffff !important;
}

#typing_page .d_holder {
    display: block;
    width: 100px;
    margin-right: 120px;
    margin-top: 1px;
}

#typing_page .typist_table {
    display: block;
    width: 100%;
    max-width: 1200px;
    height: 130px;
    margin: auto;
    overflow: unset;
    background-color: unset;
    margin: 20px auto;
    zoom: .9;
    text-align: center;
}

#typing_page .s_holder span {
    margin: 1px;
}

#typing_page .s_holder {margin-left: 90px;margin-top: -15px;}

#typing_page .speed_holder {
    position: absolute;
    margin-right: 90px;
    padding: 1px 6px;
    background-color: #ecf9ff;
    color: #42c4ff;
    border-radius: 5px;
}

#typing_page .acc_holder {
    position: absolute;
    margin-right: 130px;
    padding: 2px 6px;
    background-color: #f5ffda;
    border-radius: 5px;
    color: #aedc39;
}

#typing_page span.user_number {
    height: 25px;
    width: 25px;
    font-size: 14px;
    line-height: 10px;
}

#typing_page .status {
    margin-right: -45px;
    margin-top: 64px;
    z-index: 101;
    top: unset;
    left: unset;
    border: unset;
}

.darktheme #typing_page tr {
    background-color: #ffffff26 !important;
}

.darktheme #typing_page .speed_holder {
    background-color: #002d42;
    color: #42c4ff;
}

.darktheme #typing_page .acc_holder {background-color: #344407;color: #aedc39;}

.darktheme #typing_page span.user_number {background-color: #002d42;color: #42c4ff;border: unset;}

.des iframe {
    min-height: 120px;
}

a#upgrade_btn,.moreInfoUpgrade,.typeoBtn {
    font-family: 'kalamehblack';
    font-size: 25px;
    padding: 9px 15px;
    border-radius: 10px;
}

.discount-box {
    margin-top: 10px;
}

p.des.title {
    font-size: 20px;
    font-weight: 900;
    font-family: 'Vazir';
}

.discount-time h4 {font-size: 14px;margin-top: 2px;}

.buttonInsideBox {
    width: 140px;
    height: 30px;
    /* background-color: #f7fdff; */
    border-radius: 9px;
    color: #25b0ec;
    line-height: 30px;
    font-weight: 800;
    font-family: 'Vazir';
    margin: auto;
    cursor: pointer;
    animation-iteration-count: 3;
}

.buttonInsideBox img {
    width: 30px;
    display: inline;
}

.ubox img.bluestar {
    animation-iteration-count: infinite;
    animation-duration: 3s;
}

span.upgradeMore {
    font-size: 12px;
    padding: 2px 5px;
    background-color: #25b0ed;
    color: white;
    border-radius: 10px;
    position: relative;
    margin-right: 18px;
    right: 50px;
    top: -10px;
    cursor: pointer;
}

div#typists_holder .status {
    margin-right: -18px;
    margin-top: 2px;
    z-index: 101;
    top: unset;
    left: unset;
    border: unset;
}

span.lesonshortname {
    position: absolute;
    font-size: 12px;
    background-color: #03A9F4;
    color: #ffffff;
    padding: 2px 5px;
    line-height: 16px;
    border-radius: 5px;
    right: 20px;
    top: -18px;
}