@import "teacher-v2.css";

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

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

.modal-content div#keyboard {
    position: relative;
    display: inline-block;
    margin: 0 !important;
    width: 100%;
}

.modal-v2-retype.in div#retype_exercise h1, .modal-v2-retype.in div#retype_exercise p {
    display: none;
}

.modal-v2-retype div#retype_exercise {
    max-width: 500px;
    margin: 0 auto;
    text-align: center;
}

.mv-5 {
    margin-top: 35px;
    margin-bottom: 45px;
}

.modal-v2-retype .modal-content {
    padding: 10px 2% !important;
}

.overview-img{
    width: 20px;
    margin: 2px;
}

.leaderboard-img{
    width: 20px;
    margin-left: 4px;
}

.panel-user-header{
    width: 200px;
}

.modal-v2-retype #keyboard a.btn {
    margin: 2px;
    font-size: 15px;
    width: 33px;
}

.modal-v2-retype .modal-header {
    margin-bottom: 10px !important;
}

.modal-v2-retype h4 {
    margin-bottom: 20px;
}

.modal-v2-retype .modal-footer .btn {
    width: auto !important;
    padding: 0 80px;
    background-color: #518ef7;
    border-color: #518ef7;
    color: #fff !important;
    font-weight: 600;
}

.modal-v2-retype div#retype_exercise .col-sm-12 > .row + .row {
    margin-top: 10px;
}

.modal-v2-retype .form-control {
    border-color: #9ba5b9;
    border-radius: 3px;
}

/*================================== Scroller ===============================*/

/* width */
#sidebar_left::-webkit-scrollbar {
    width: 3px;
}

/* Track */
#sidebar_left::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
#sidebar_left::-webkit-scrollbar-thumb {
    background: #9f82fe;
}

/* Handle on hover */
#sidebar_left::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/*================================== Common ===============================*/
body {
    font-family: 'Lato-Regular';
    color: #354052;
    counter-reset: counter;
}

a {
    color: #354052;
}

a.dropdown-toggle {
    text-decoration: none !important;
}

h1, h2, h3, h4 {
    font-family: 'Lato-Regular';
    font-weight: normal !important;
}

body.body-v2 {
    background-image: url('images/dashboard-top-effect.png'), url('images/dashboard-middle-effect.png'), url('images/dashboard-bottom-effect.png');
    background-repeat: no-repeat;
    background-size: auto;
    background-position: top center, center left, bottom right;
    margin-bottom: 0;
}

img {
    max-width: 100%;
}

.bg-purple {
    background-color: #9f83fe !important;
}

.btn-fullwidth {
    width: 100%;
}

.btn-secondary {
    background-color: #9ca6b7;
    border-color: #9ca6b7;
    height: 40px;
    line-height: 40px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    color: #fff !important;
    font-size: 16px !important;
}

.btn-blue {
    background: #518ef7;
    padding-left: 100px;
    padding-right: 100px;
}

.btn.btn-blue {
    color: #fff !important;
}

.modal-v2-wrap .modal-footer .btn + .btn {
    margin-top: 5px;
}

.btn-small {
    padding-left: 10px;
    padding-right: 10px;
}

.m-0 {
    margin: 0 !important;
}

.p-0 {
    padding: 0 !important;
}

.p-2 {
    padding: 10px;
}

.p-3 {
    padding: 15px;
}

.p-4 {
    padding: 20px;
}

.mb-5 {
    margin-bottom: 25px;
}

.mb-3 {
    margin-bottom: 15px !important;
}

.heading-table {
    background-color: #fafafa;
    padding: 20px;
    font-size: 16px;
    border-top: 4px solid #dddddd;
}

.ml-auto {
    margin-left: auto;
}

.user-info .dropdown-toggle img {
    height: 35px;
    width: auto;
    margin: 0px 5px 0 0;
}

.align-items-center {
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
}

.align-items-end {
    align-items: flex-end;
    -webkit-align-items: flex-end;
    display: flex;
    display: -webkit-flex;
}

.mt-2 {
    margin-top: 10px;
}

.font-lato-bold {
    font-family: 'Lato-Bold';
}

.border-bottom-light {
    border-bottom: 2px solid #fcf3d3;
    padding-bottom: 10px;
    margin-bottom: 10px;
    font-family: 'Lato-Bold';
}

.table-v2-wrap td {
    border: none !important;
    padding: 20px 10px !important;
    text-align: center;
}

.table-v2-wrap {
    font-size: 16px;
    table-layout: fixed;
    width: 100%;
}
.table-responsive table {
    table-layout: auto;
}
.sidebar-menu li + li {
    margin-top: 10px;
}

.table-v2-wrap thead td, .table-v2-wrap thead th {
    background: transparent;
    font-family: 'Lato-Bold' !important;
    font-size: 16px;
    border-bottom: 2px solid #fcf3d3 !important;
    vertical-align: top !important;
    text-align: center;
    padding-bottom: 20px !important;
    padding-top: 10px;
}

.table-v2-wrap a {
    color: #518ef7;
}

table.table-tr-bordered tr + tr {
    border-top: 1px solid #eee;
}

table.table-tr-bordered table tr + tr {
    border-top: none;
}

table.table-v2-wrap tr table td {
    padding: 5px 0 !important;
    font-family: 'Lato-Regular';
    font-weight: 300 !important;
}

.table-align-left,
.table-align-left td,
.table-align-left thead th {
    text-align: left !important;
}

table.table-row-bordered tr + tr {
    border-top: 1px solid #ddd;
}

table.table-row-bordered tr td, table.table-row-bordered tr th {
    text-align: left;
}

.tablesorter .tablesorter-headerDesc {
    background-color: transparent;
}

table th.text-center {
    text-align: center !important;
}

td.td-question, td.td-answer {
    padding-top: 50px !important;
}

.sidebar-menu-icon {
    display: inline-block;
    width: 100% !important;
    text-align: center;
    margin: 0 0 10px;
}
ul#sideAdmin span.label-warning {
    background: #a6acff !important;
}
select {
    border: 2px solid #9ca6b7 !important;
    background: transparent !important;
    font-size: 16px !important;
    padding: 0 3px !important;
    height: 35px !important;
    color: #9ca6b7 !important;
    border-radius: 4px !important;
    font-family: 'Lato-Bold';
}

form[name="pupil_test"] select {
    height: 45px !important;
}

form[name="pupil_test"] button.btn {
    height: 45px;
}

.btn-border {
    border: 2px solid #424242;
    color: #333;
    min-width: 200px;
    text-transform: capitalize;
    background: transparent;
}

.btn-border-blue {
    border-color: #518ef7;
    color: #518ef7;
    font-weight: 700;
    opacity: 1;
}

.btn-border:hover,
.btn-border:focus,
.btn-border:active {
    color: #222;
    opacity: 0.7;
}

.btn.btn-grey {
    background: #9ca6b7;
    padding: 10px 100px;
    font-family: 'Lato-Bold';
}

.row-flex {
    display: flex;
    display: -webkit-flex;
}

.sidebar-menu > ul > li > a > .sidebar-title-tray .label {
    padding: 5px;
}

.tablesorter .tablesorter-headerAsc {
    background-color: transparent !important;
}

/*Vertical Progress*/
.vertical-progress-wrap {
    position: absolute;
    right: 0;
    background: #dde3eb;
    width: 40px;
    height: 100%;
}

.vertical-progress-item {
    position: absolute;
    top: 0;
    width: 100%;
    padding: 10px 2px;
    text-align: center;
    color: #354052;
    font-size: 14px;
    font-family: 'Lato-Bold';
    transition: 0.2s;
    -moz-transition: 0.2s;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
}

.vertical-progress-top {
    background: #9f82fe;
    color: #ffffff;
    font-weight: 700;
}

.vertical-progress-item::before {
    content: "";
    position: absolute;
    left: -16px;
    border-style: solid;
    border-width: 8px;
    border-color: transparent #9f81fe transparent transparent;
}

.vertical-progress-bottom {
    top: auto;
    bottom: 0;
    background: #22e471;
}

.vertical-progress-bottom::before {
    border-color: transparent #22e471 transparent transparent;
}

.vertical-progress-middle {
    height: 40px;
    top: 0;
    bottom: 0;
    margin: auto;
    background: #f9ce3c;
}

.vertical-progress-middle::before {
    border-color: transparent #f9ce3c transparent transparent;
}

/*================================Account Pages===========================*/
/*.account-page-wrap {*/
/*    min-height: 100vh;*/
/*    background-image: url('images/register-bottom-effect.png');*/
/*    background-position: bottom left;*/
/*    background-size: 50%;*/
/*    display: flex;*/
/*    display: -webkit-flex;*/
/*    align-items: center;*/
/*    -webkit-align-items: center;*/
/*    padding: 2%;*/
/*    background-repeat: no-repeat;*/
/*}*/

/*.account-page-wrap::before {*/
/*    content: "";*/
/*    position: absolute;*/
/*    left: 0;*/
/*    top: 0;*/
/*    height: 300px;*/
/*    width: 300px;*/
/*    background-image: url('images/register-top-left-effect.png');*/
/*    background-repeat: no-repeat;*/
/*    background-size: contain;*/
/*}*/

/*.account-page-wrap::after {*/
/*    content: "";*/
/*    position: absolute;*/
/*    left: auto;*/
/*    right: 0;*/
/*    top: 0;*/
/*    height: 300px;*/
/*    width: 300px;*/
/*    background-image: url('images/register-top-right-effect.png');*/
/*    background-repeat: no-repeat;*/
/*    background-size: contain;*/
/*}*/

.account-page-block-wrap {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    background-color: transparent;
}

.account-page-block-wrap-inner > .row {
    width: 100%;
    margin: 0 !important;
}

.block-account-page-right {
    background-size: cover;
    background-repeat: no-repeat;
}

.block-account-page-left {
    padding: 10% 15%;
    box-sizing: border-box;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    align-items: center;
    -webkit-align-items: center;
    justify-content: left;
}

select.extend-deadline,select.retake-action {
    width: 170px;
}

[class*='pupil-cell-'] {
   width: 225px;
}

.heading-block {
    color: #9f83fe;
    font-size: 48px;
    font-family: 'Lato-Bold';
    margin: 0 0 50px;
    width: 100%;
    line-height: normal;
}


.form-v2-wrap button {
    margin-top: 15px;
    height: 40px;
    border-radius: 4px;
}

form.form-v2-wrap label,
.form-v2-wrap label {
    color: #354052;
    font-size: 16px;
    letter-spacing: 0.25px;
    font-weight: normal;
}

form.form-v2-wrap input[type="text"],
form.form-v2-wrap input[type="email"],
form.form-v2-wrap input[type="password"],
.form-v2-wrap input[type="text"],
.form-v2-wrap input[type="email"],
.form-v2-wrap input[type="password"] {
    height: 40px;
    border: 1px solid #9ca6b7;
    border-radius: 4px;
    font-size: 17px;
}

.account-page-block-wrap-inner input[type="text"],
.account-page-block-wrap-inner input[type="email"],
.account-page-block-wrap-inner input[type="password"] {
    width: 100%;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #a4bdd7 !important;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
    color: #a4bdd7 !important;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color: #a4bdd7 !important;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
    color: #a4bdd7 !important;
}

form.form-v2-wrap .form-group,
.form-v2-wrap .form-group {
    margin-bottom: 25px;
}

.horizontal-border-text {
    width: 100%;
    display: inline-block;
    text-align: center;
    margin: 30px 0;
    position: relative;
}

.horizontal-border-text::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 1px;
    background: rgba(0, 36, 100, 0.21);
}

.horizontal-border-text span {
    display: inline-block;
    background-color: #fff;
    position: relative;
    padding: 0 20px;
}

.block-account-page-left-inner {
    width: 100%;
}

form.form-v2-wrap a, .form-v2-wrap a {
    font-family: 'Lato-Bold';
    color: #518ef7;
    font-size: 12px;
    letter-spacing: -0.24px;
}

.panel {
    border-color: transparent;
    box-shadow: none;
    background-color: transparent;
}

.panel-title {
    font-size: 32px;
    padding-left: 15px;
    color: #354052;
    font-weight: normal;
    font-family: 'Lato-Bold';
}

.panel-heading {
    border-bottom: none;
    background: transparent;
}

.block-title {
    font-size: 32px;
    line-height: 42px;
    color: #354052;
    font-weight: normal;
    margin-bottom: 40px;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
}

.block-steps .block-steps-inner {
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    margin: 60px 0 0;
    position: relative;
}

.block-steps-inner .alert {
    padding: 5px 20px !important;
    height: auto;
}

.block-steps .alert {
    display: none;
}

.block-steps-inner::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    height: 3px;
    background: #f6ce3d;
    top: -30px;
    width: 80%;
}

.block-steps-inner .btn-block + .btn-block {
    margin-top: 0;
}

.block-steps h3 {
    color: #354052;
    font-family: 'Lato-Bold';
}

/*=========================Account Modal========================*/

.modal-account .modal-dialog {
    max-width: 100%;
    padding: 0;
    margin: 0;
    min-height: 100vh;
}

.modal-account .modal-body, .modal-account.modal {
    padding: 0 !important;
}

.modal-account {
    background-color: #101010;
}

/*=============================Account page=========================*/

body.sidebar-in-left {
    padding-left: 110px;
    background-color: #f3f7fd;
    transition: 0.2s;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -o-transition: 0.2s;
}

body.sidebar-in-left.sidebar-hidden {
    padding-left: 60px;
}

#sidebar_left {
    position: fixed;
    width: 110px;
    height: 100%;
    background: #fcfcfc;
    border-right: none;
    left: 0;
    top: 0;
    overflow: hidden;
    overflow-y: auto;
    padding: 10px;
    box-sizing: border-box;
    text-align: center;
    transition: 0.2s;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -o-transition: 0.2s;
}

.sidebar-menu > ul > li > a > span:nth-child(2) {
    float: none;
    padding-left: 0;
}

.sidebar-menu-icon img {
    width: 28px;
    filter: gray;
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
}

.sidebar-menu-icon {
    padding: 0 !important;
    float: none !important;
}

.sidebar-menu > ul li {
    width: 100%;
    padding: 10px 0;
}

.sidebar-title {
    line-height: 1 !important;
    width: 100% !important;
    float: none !important;
    padding-left: 0 !important;
}

body.sidebar-in-left.sidebar-hidden .sidebar-menu .sidebar-menu-icon + .sidebar-title {
    display: none;
}

.sidebar-top {
    margin-bottom: 40px;
}

.sidebar-menu > ul > li > a {
    padding: 0;
    line-height: initial;
    height: auto;
}

.sidebar-menu > ul > li > a:focus,
.sidebar-menu > ul > li > a:active {
    background: transparent;
}

#sidebar_left .nav > li.active > a {
    background-color: transparent;
    color: #5d99f8;
}

#sidebar_left .nav > li.active img {
    -webkit-filter: grayscale(0);
    filter: none;
}

.sidebar-menu > ul > li > a:hover {
    color: #5d99f8;
}

.sidebar-menu > ul > li > a:hover img {
    -webkit-filter: grayscale(0);
    filter: none;
}

.sidebar-hidden #sidebar_left {
    left: 0;
    width: 60px;
}

#main {
    background: transparent;
}

.navbar {
    background-color: transparent;
    border-bottom: none;
    box-shadow: 5px 0px 10px 0px rgba(0, 0, 0, 0.1);
    background-image: none;
    background-image: none;
    filter: none;
    filter: none;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    padding: 0 30px;
}

#content_wrapper {
    margin-left: 0;
    padding: 25px 40px 40px;
}

.sidebar-ltr #content_wrapper {
    margin-left: 0;
}

.page-title {
    font-size: 48px;
    color: #9f83fe;
    line-height: 57px;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    width: 100%;
    margin-bottom: 0;
    font-family: 'Lato-Bold';
}

.page-sub-title strong {
    font-family: 'Lato-Bold';
}

.page-sub-title {
    margin-bottom: 40px;
}

.page-header {
    text-shadow: none;
    border-bottom: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    margin: 0px 0 30px;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
}

.navbar-right {
    margin-right: 0;
    margin-left: auto;
}

#toggle_sidemenu_l {
    margin-left: 0;
}

.user-info {
    padding: 0;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
}

.block-white-wrap {
    background-color: #fff;
    box-shadow: 0 8px 30px 0 rgba(0, 5, 58, 0.05);
    margin-bottom: 60px;
    padding: 20px;
    display: inline-block;
    width: 100%;
    vertical-align: top;
}

.vocab-list-blockitem {
    margin-bottom: 0 !important;
}

.block-steps {
    background-color: #fff;
    padding: 25px;
    border-radius: 100px;
    box-shadow: 6px 6px 10px 0px rgba(195, 211, 230, 0.53);
    text-align: center;
    width: 400px;
    float: right;
}

.step-item::before {
    counter-increment: counter;
    content: counter(counter);
    position: absolute;
    left: 0;
    right: 0;
    top: -50px;
    width: 40px;
    margin: auto;
    font-size: 32px;
    color: #f3f7fd;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 50%;
    background-color: #9f82fe;
}

.step-item {
    position: relative;
    font-size: 12px;
    padding: 0 15px;
    line-height: 1.4;
    width: 25%;
}

.block-info-grid-content-top {
    background: #9f83fe;
    padding: 20px;
    text-align: center;
    color: #fff;
    box-shadow: 0px 4px 10px 0 rgba(0, 0, 0, 0.2);
}

span.block-info-grid-dark {
    background-color: #9f82fe;
    width: 100%;
    display: inline-block;
    padding: 25px 12px 20px;
    text-align: center;
    color: #fff;
    font-size: 24px;
    border-radius: 4px;
    box-shadow: 0px 4px 10px 0 rgba(0, 0, 0, 0.2);
    font-family: 'Lato-Bold';
    text-transform: uppercase;
    line-height: 1.4;
    position: relative;
}

.block-info-grid-dark-wrap .block-info-grid-dark::before {
    content: "";
    background-image: url(../../img/v2/icon-badge-yellow.png);
    position: absolute;
    right: -20px;
    top: -20px;
    height: 40px;
    width: 40px;
    background-size: contain;
    background-repeat: no-repeat;
}

.block-info-grid-Next .block-info-grid-content {
    border-color: #c3d3e6;
}

.block-info-grid-Next .block-info-grid-content-top * {
    color: #34495e;
}

.block-info-grid-light span.block-info-grid-dark,
.block-info-grid-light .block-info-grid-content-top {
    background: #c3d3e6;
    color: #34495e;
}

.block-info-grid-light .block-info-grid-content {
    border-color: #c3d3e6;
}

.block-info-grid-top {
    margin-bottom: 10px;
    width: 100%;
    min-height: 80px;
    display: flex;
    display: -webkit-flex;
    align-items: flex-end;
    -webkit-align-items: flex-end;
}

.block-info-grid-bottom {
    box-shadow: 0px 0px 10px -3px rgba(0, 0, 0, 0.2);
}

.block-info-grid p {
    font-weight: 600;
}

.block-info-grid {
    display: inline-block;
    width: 100%;
    margin-bottom: 60px;
}

.block-info-grid .label {
    color: #354052;
    font-size: 16px;
    text-align: right;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    border-radius: 0;
    font-family: 'Lato-Bold';
}

.block-info-grid-content-top span.label {
    text-align: center;
    color: #ccc;
}

.block-info-grid-content {
    border-radius: 4px;
    overflow: hidden;
    border: 2px solid #9f82fe;
}

.block-info-grid-bottom-left {
    padding-top: 20px;
}

.block-info-grid-bottom-left .label {
    margin-bottom: 10px;
    line-height: 23px;
}

.block-info-grid-content-bottom {
    padding: 20px;
}

.block-info-grid-content-top * {
    color: #fff;
    font-size: 16px;
}

.block-info-grid-light * {
    color: #34495e;
}

.block-info-grid-top-left {
    min-height: 80px;
    display: flex;
    display: -webkit-flex;
    align-items: flex-end;
    -webkit-align-items: flex-end;
    margin-bottom: 10px;
    border-bottom: 2px solid #f9ce3c;
    padding-bottom: 15px;
}

/*Steps Vertical*/
.block-steps-vertical .block-steps-inner::before {
    content: none !important;
}

.block-steps-vertical .step-item::before {
    content: none !important;
}

.block-info-grid-content-bottom a br {
    display: none;
}

.block-steps-vertical a {
    border: 2px solid #518ef7;
    width: 75%;
    display: inline-block;
    color: #518ef7;
    padding: 10px;
    font-size: 16px;
    font-family: 'Lato-Bold';
    text-align: center;
    margin-bottom: 20px;
    text-decoration: none;
}

.block-steps-inner {
    text-align: center;
}

/*Block Col*/
.block-col-wrap {
    border: 1px solid #d7d7d7;
    border-top: transparent;
    background-color: #ffffff;
}

.block-col-wrap .panel-heading {
    background: #fafafa;
    border-bottom: 1px solid #e8e8e8;
}

.block-col-wrap .panel-heading .panel-title {
    font-size: 18px;
}

/*====================Modal===========*/
.modal-v2-wrap.modal-small-wrap .modal-dialog {
    width: 300px;
    text-align: center;
}

.modal-v2-wrap .close {
    position: absolute;
    right: 5px;
    width: 25px;
    opacity: 1;
    top: 0px;
    cursor: pointer;
    z-index: 99;
    outline: none;
}

.modal-v2-wrap.modal-small-wrap .modal-dialog .modal-content {
    padding: 40px 0;
    box-shadow: none;
    border: none;
}

.modal-v2-wrap .modal-header {
    display: inline-block;
    background: transparent;
    border: none;
    width: 100%;
    vertical-align: top;
    height: auto;
    margin-bottom: 20px;
    padding-top: 0px;
}

.modal-v2-wrap .modal-content h3 {
    font-family: 'Lato-Regular';
    font-size: 16px;
}

.modal-v2-wrap .modal-footer {
    text-align: center;
    background: transparent;
    border: none;
    padding: 0 15px;
}

.modal-v2-wrap .modal-footer .btn {
    width: 100%;
    margin: 0;
    padding-top: 12px;
    padding-bottom: 8px;
    border-radius: 4px;
    font-size: 14px !important;
}

.modal.modal-v2-wrap {
    padding: 0 !important;
}

.mt-4 {
    margin-top: 20px;
}

.bottom-right-link a {
    color: #518ef7;
    font-size: 12px;
    font-family: 'Lato-Bold';
    position: absolute;
    right: 40px;
    bottom: 30px;
    text-decoration: underline;
}

.bottom-right-link
span.bottom-right-circle-number {
    height: 40px;
    width: 40px;
    display: inline-block;
    vertical-align: middle;
    background: #9f83fe;
    border-radius: 50%;
    line-height: 40px;
    text-align: center;
    font-size: 32px;
    color: #fff;
    margin: 0 0 0 10px;
}

.table.table-v2-wrap label.form-check-label {
    font-family: 'Lato-Regular';
    font-weight: 400;
    font-size: 16px;
}

.block-result-head {
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    width: 100%;
    padding: 10px 8%;
    font-size: 27px;
}

.block-result-head img {
    width: 70px;
}

table tr td.pt-12 {
    padding-top: 60px !important;
}

tr.result-bottom-strip {
    background: #f3f7fd;
}

tr.result-bottom-strip td {
    padding: 5px !important;
    vertical-align: middle !important;
}

.theme-checkbox-wrap input {
    visibility: hidden;
    opacity: 0;
    position: absolute;
}

.theme-checkbox-wrap input + label {
    position: relative;
    display: inline-block;
    width: 15px;
    height: 15px;
    border: 1px solid #adb6c3;
    border-radius: 50%;
    background: #f3f7fd;
    margin: 0;
}

.theme-checkbox-wrap input:checked + label::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height: 15px;
    width: 15px;
    border-radius: 90px;
    background: transparent;
    margin: auto;
    border-style: solid;
    border-width: 5px;
    border-color: #518ef7;
}

tr.tr-border {
    border-bottom: 2px solid #a9c1d9;
}

tr.tr-border:nth-child(even) {
    border-color: #d1deeb;
}

tr.tr-border td {
    padding: 10px !important;
}

.on-hover-info {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    cursor: pointer;
}

.on-hover-info-content {
    background: #354052;
    padding: 20px 30px;
    color: #fff;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 120px;
    min-width: 280px;
    border-radius: 10px;
    box-shadow: 10px 10px 10px -3px rgba(53, 64, 82, 0.41);
    left: 10px;
    opacity: 0;
    visibility: hidden;
    transition: 0.2s;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    flex-direction: column;
    justify-content: center;
}

.on-hover-info:hover .on-hover-info-content {
    opacity: 1;
    visibility: visible;
    left: 20px;
}

.on-hover-info-content p {
    margin: 0;
}

.on-hover-info-content h3 {
    font-family: 'Lato-Bold';
    font-size: 20px;
}

.on-hover-info-content::before {
    content: "";
    position: absolute;
    left: -20px;
    top: 0;
    bottom: 0;
    border-style: solid;
    border-width: 10px;
    background: transparent;
    border-color: transparent #354052 transparent transparent;
    height: 10px;
    margin: auto;
    right: auto;
}

div#keyboard {
    background: #a4bdd7;
    padding: 30px 10px;
    height: auto !important;
    color: #fff;
    border: none;
    border-radius: 6px;
    z-index: 9999;
}

#keyboard h5 {
    font-size: 16px;
    margin-bottom: 20px;
}

.table-element-center th, .table-element-center td {
    text-align: center;
}

.table-element-left table td, .table-element-left table th {
    text-align: left !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/*======================Footer===============*/
.footer-wrap {
    background-color: #354052;
    text-align: center;
    color: #fff;
    padding: 15px 0;
}

.footer-wrap p, .footer-wrap h4 {
    margin: 0;
    line-height: 1.2;
}

/*=======================Responsive====================*/
@media (min-width: 992px) {
    .reinforce-modal {
        width: 800px !important;
    }
    .destination_class_code_row {
        margin-bottom: -51px;
    }
}

@media screen and (max-width: 1100px) {
    .sidebar-ltr #content_wrapper {
        left: 0;
    }
}

@media screen and (max-width: 1000px) {
    .hidden-sm {
        display: none;
    }

    .page-title {
        font-size: 30px;
        line-height: 40px;
    }

    .block-account-page-left {
        padding: 15% 5%;
    }

    .account-page-wrap::after,
    .account-page-wrap::before {
        content: none;
    }

    .block-col-wrap .panel-body {
        text-align: center;
    }

    .block-col-wrap .panel-title {
        text-align: center;
    }

    .block-title .btn {
        margin-top: 20px;
    }

    .block-result-head {
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }

    .block-result-head img {
        margin: 0;
    }
    .destination_class_code_row button {
        width: 100%;
        margin-top: 5px;
    }
}

@media screen and (max-width: 767px) {
    .btn-blue {
        padding-left: 30px;
        padding-right: 30px;
        max-width: 100%;
        text-align: center;
    }

    .btn.btn-grey {
        padding: 10px 60px;
        width: 100%;
    }

    body.body-v2 {
        margin-bottom: 0;
    }

    .panel-title {
        font-size: 22px;
    }

    select {
        max-width: 100%;
    }

    /*
    =====================Menu=======================
     */
    body.sidebar-in-left.sidebar-hidden {
        padding-left: 0;
    }

    .sidebar-hidden #sidebar_left {
        left: -60px;
        width: 60px;
    }

    #sidebar_left {
        width: 70px;
    }

    body.sidebar-in-left {
        padding-left: 70px;
    }

    .page-header {
        display: block;
        text-align: center;
    }

    /*================Responsive Table================*/
    #content_wrapper {
        padding: 50px 20px 40px;
    }

    table.table-v2-wrap td[data-th] {
        display: inline-block !important;
        width: 100%;
        padding-left: 50% !important;
        position: relative;
        text-align: left;
    }

    .table-v2-wrap {
        display: block;
    }

    table.table-v2-wrap {
        display: block !important;
        table-layout: unset !important;
        margin: -21px;
        width: auto;
        margin-bottom: 0 !important;
    }

    table.table-v2-wrap tr {
        display: inline-block;
        width: 100%;
    }

    table.table-v2-wrap thead {
        display: none;
    }

    table.table-v2-wrap td[data-th]::before {
        content: attr(data-th);
        position: absolute;
        left: 0;
        width: 45%;
        text-align: left;
        font-weight: 600;
        padding: 15px;
        top: 0;
    }

    table.table-v2-wrap tr:nth-child(even) {
        background: #f5f5f5;
    }

    .table-xs-disable-th tr:nth-child(even) {
        background: inherit !important;
    }

    .modal-v2-wrap.modal-small-wrap .modal-dialog {
        width: 80%;
        display: block;
        margin: 100px auto;
    }

    table.table-xs-disable-th td {
        padding-left: 15px !important;
        padding-right: 15px !important;
        text-align: center;
    }

    table.table.table-v2-wrap .label {
        white-space: normal;
    }

    tr.tr-border td {
        display: none !important;
    }

    /*
    =====================Dashboard===================
    */
    .block-title {
        font-size: 23px;
        line-height: 34px;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        display: block;
    }

    /*
    ======================Internal Pages====================
     */
    .block-white-wrap .panel {
        margin-bottom: 0;
    }

    .block-white-wrap {
        padding: 20px;
        margin-bottom: 40px;
    }

    .align-items-center {
        display: block;
    }

    .page-title {
        font-size: 38px;
        line-height: 47px;
        display: block;
        margin-bottom: 20px;
        text-align: center;
    }

    .block-steps {
        padding: 15px;
        border-radius: 0;
        text-align: center;
        width: 100%;
        float: right;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .block-steps .block-steps-inner {
        display: block;
        position: relative;
    }

    .step-item {
        width: 45%;
        display: inline-block;
        padding-top: 50px;
    }

    .step-item::before {
        top: 0;
    }

    .vertical-progress-wrap {
        width: 100%;
    }

    .bottom-right-link {
        text-align: right;
        margin: 20px 0 0;
    }

    .bottom-right-link a {
        position: relative;
        right: 0;
        bottom: 0;
        width: 100%;
    }

    .block-fields-bottom-content {
        padding-left: 0;
    }

    .block-white-wrap legend {
        padding: 0 0px 10px !important;
    }

    /* Modified Organization Move Pupils */
    .avail-chosen-pupil-section #filter {
        margin-top: 20px;
        flex-wrap: wrap;
        text-align: left;
    }
    .avail-chosen-pupil-section #filter label {
        width: 100% !important;
    }
    
    .avail-chosen-pupil-section select#classCodeFilter {
        width: 100%;
        margin: 0 0 20px 0;
    }
    
    .avail-chosen-pupil-section #loadClassCode {
        width: 100%;
    }
    .destination_class_code_row .col-md-6 {
        padding: 0;
    }
    .destination_class_code_row button{
        margin-top: 0;
    }
}

@media screen and (max-width: 568px) {
    .page-title {
        font-size: 26px;
        line-height: 31px;
    }
}
#starter-activity-guide .modal-title {
    padding-top: 35px;
}
#starter-activity-guide .modal-content {
    padding: 0;
}
#starter-activity-guide .modal-content .modal-body {
    padding-bottom: 40px;
}
#starter-activity-guide .success-title {
    font-style: italic;
    margin-bottom: 31px;
    margin-top: 21px;
    font-size: 20px;
}
#starter-activity-guide ul {
    list-style: decimal;
}
#starter-activity-guide ul li {
    font-size: 13px;
    margin-bottom: 15px;
    text-align: left;
}
.modal-v2-wrap.modal-small-wrap .modal-dialog {
    width: 400px!important;
}
.watch-video-btn{
    margin-top:20px;

}
.popup-btn{
    margin-top: 15px;
}

/* Change Organization move Pupils */
.avail-chosen-pupil-section #filter {
    display: flex;
    align-items: center;
    justify-content: end;
}
.destination_class_code_row button {
    margin-top: 9px;
}
.destination_class_code_row .col-md-6 {
    z-index: 1;
}
/* Starter Activity Classroom Page */
/* Language Specific Departments */
.department-inner {
    margin-bottom: 25px;
}
.department-list-button ul {
    list-style: none;
    padding: 0;
}
.department-list-button button {
    border-color: #9b8afa !important;
    height: auto !important;
    padding: 6px;
    white-space: inherit;
}
.test-setup-specific-departments-col .department-list-button ul li:hover {
    background-color: transparent;
}
.department-image img {
    width: 100px;
    height: 65px;
}
.custom-departments img {
    object-fit: contain;
}
.department-inner {
    margin-bottom: 25px;
}

/*Home Learning page */
/* Create vocab new task page css */
.select-classcode {
    text-decoration: none !important;
}
.class-code-name {
    border: 2px solid #9ca6b7;
    color: #9ca6b7;
    padding: 6px 12px;
    text-align: center;
    margin-bottom: 25px;
    font-size: 16px;
}
.select-classcode .selected-classcode .class-code-name {
    background: #5efb6e;
    color: #4a4a4a;
}
.teacher-quick-select-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

#s2id_teacher_select_option .select2-choices, #s2id_teacher_year_groups_option .select2-choices {
    position: relative;
    border: 2px solid #9ca6b7 !important;
    border-radius: 4px;
    padding: 2px 2px;
    min-width: 200px;
}

#s2id_teacher_select_option .select2-search-choice,#s2id_teacher_year_groups_option .select2-search-choice {
    border-radius: 0 !important;
    padding: 5px 10px 5px 18px !important;
    background-image: inherit !important;
    background: #f0f0f0 !important;
}

#s2id_teacher_select_option .select2-search-choice > div,#s2id_teacher_year_groups_option .select2-search-choice > div {
    color: #1e1e1e !important;
}
#s2id_teacher_select_option  #s2id_autogen1,#s2id_teacher_year_groups_option  #s2id_autogen2 {
    color: #a3afbd !important;
    font-size: 14px;
    height: auto !important;
}

#s2id_teacher_select_option:before, #s2id_teacher_year_groups_option:before {
    position: absolute;
    top: calc(46% - 10px);
    width: 12px;
    height: 18px;
    color: #9aa7b6;
    right: 5px;
    border-radius: 20px;
    line-height: 22px;
    font-size: 22px;
    padding: 0px 0px 0 0px;
    z-index: 1;
    content: "";
    background: url(https://cdnjs.cloudflare.com/ajax/libs/aui/7.6.0/aui/css/select2.png) 0 1px no-repeat; 
} 
.select2-search-choice-close {
    background: url(https://cdnjs.cloudflare.com/ajax/libs/aui/7.6.0/aui/css/select2.png) right top no-repeat !important;
}
.clear-filters-inner a:before {
    position: absolute;
    top: -1px;
    width: 16px;
    height: 16px;
    color: #000000;
    content: 'x';
    background: #ddd;
    left: 0;
    border-radius: 20px;
    line-height: 10px;
    font-size: 14px;
    padding: 2px 4px 0 1px;
}

.clear-filters-inner a {
    position: relative;
    color: #101010 !important;
    text-decoration: none !important;
    padding-left: 20px;
}
.clear-filter-btn {
    opacity: 0.6;
}
.clear-filter-btn:hover {
  opacity: 1;
}
.default-multi-testtype-wrapper .radio label {
    position: relative !important;
}
.default-multi-testtype-wrapper .radio label[data-tooltip]:hover::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #475361;
    color: #fff;
    border-radius: 4px;
    white-space: nowrap;
    max-width: 450px !important;
    padding: 30px !important;
    font-size: 15px !important;
    z-index: 9999;
}
.default-multi-testtype-wrapper .radio label[data-tooltip]:hover::after {
    content: "";
    position: absolute;
    bottom: 8px;
    left: 40%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: #475361;
}

@media screen and (max-width: 767px) and (min-width: 601px)  { 
    .default-multi-testtype-wrapper .radio label[data-tooltip]:hover::before {
        padding-left: 10px !important;
        padding-right: 10px !important;
        left: 73%;
    }    
}
@media screen and (max-width: 991px) {    
    .teacher-quick-select-filters .col-md-5 {
        margin-bottom: 10px;
    }
}
/* Test Multiple select  */
.test-type-col input[id^='teacher_test_defaultTestType'] {
    font-weight: bold !important;
    color: #555 !important;
}

.test-type-col .radio label {
    position: relative !important;
    padding-left: 0 !important;
}
.test-type-col .form-group .radio {
    display: inline-block;
    vertical-align: top;
}
.test-type-col .form-group .required {
    width: 100%;
    margin-bottom: 5px;
}
.test-type-col .form-group .radio {
    margin: 0 !important;
}
.test-type-col .form-group .radio input[id^='teacher_test_defaultTestType'] {
    position: absolute !important;
    top: 25px !important;
    margin-left: 0 !important;
}
.test-type-col input[type='radio'] {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    outline: auto;
    border: 5px solid #30518f;
}
.test-type-col input[type='radio']:before {
    content: '';
    display: block;
}
.test-type-col input[type="radio"]:checked:focus {
    outline: auto;
    outline-offset: 0px;
}
.test-type-col input[type="radio"]:checked:before {
    background: #ffffff;
    -webkit-appearance: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    outline: none;
    border: 2px solid #30518f;
}
.test-type-col input[type="radio"]:checked {
    border-color: #73fb79;
}
.classcodes-div .test-type-col .form-group .radio #teacher_test_defaultTestType_0 {
    left: 25px !important;
}
.classcodes-div .btn-save-wrapper button,.curriculum-div .btn-save-wrapper button,.test-details-div .btn-save-wrapper button {
    white-space: inherit !important;
    height: auto !important;
    margin-top: 0;
    width: 92% !important;
}
.test-details-div .custom-date-btn {
    padding: 2px 16px;
    font-size: 14px;
}
.test-details-div .ui-timepicker-select {
    padding: 0 13px !important;
}
.test-task-name {
    width: 300px;
}
.test-type-col .form-group label.required {
    display: none;
}
.labels label:first-child {
    margin-left: 25px;
}
.default-type-options .required ,.multi-choice-options .required  {
    display: block !important;
}
.select-test-type-heading {
    width: 100%;
    margin-left: 25px;
}
.classcodes-div .test-type-col .form-group .radio {
    margin-bottom: 5px !important;
}
.default-multi-testtype-wrapper {
    display: flex;
    flex-wrap: wrap;
}
.select-test-type-heading {
    color: #354052;
    font-size: 16px;
    letter-spacing: 0.25px;
    font-weight: normal;
    font-family: 'Lato-Regular';
}
.default-multi-testtype-wrapper .form-group .radio input[id^='teacher_test_defaultTestType'] {
    left: 23px;
}
.default-type-options .radio:first-child label {
    margin-right: 0 !important;
}
.test-type-col .radio:nth-child(2) label, .test-type-col .radio:nth-child(3) label {
    margin-right: 0 !important;
}
.test-type-col .radio:nth-child(3) label {
    margin-left: 20px !important;
}
.test-type-col .radio:nth-child(4) label {
    margin-left: 20px !important;
}

/* Select-Deselect vocab Level buttons */
.vocab-popup-title .vocab-title {
    margin-bottom: 0;
}
.select-deselect-checkboxs li:hover {
    background: white;
}
.btn-level-select {
    display: flex;
    justify-content: space-around;
}

.select-deselect-checkboxs .select-level-title {
    width: 100%;
}
.select-deselect-checkboxs label {
    padding-left: 5px;
    margin: 0 !important;
    font-size: 15px;
}
/* Pupils manage class page */
.tablesorter thead tr th:nth-child(4) .tablesorter-header-inner,.tablesorter thead tr th:nth-child(11) .tablesorter-header-inner,.tablesorter thead tr th:nth-child(13) .tablesorter-header-inner{
    width: 200px;
}
.default-test-type-row .radio label {
    position: relative;
}
.default-test-type-row .radio label[data-tooltip]:hover::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #475361;
    color: #fff;
    border-radius: 4px;
    font-size: 14px;
    white-space: nowrap;
    max-width: 350px !important;
    padding: 30px !important;
    font-size: 15px !important;
}
.default-test-type-row .radio label[data-tooltip]:hover::after {
    content: "";
    position: absolute;
    bottom: 8px;
    left: 65%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: #475361;
}

@media screen and (max-width: 600px) {
    .test-type-col .form-group .radio {
        display: block;
    }
    .test-type-col .radio label {
        padding-left: 25px !important;
        margin-bottom: 16px;
        margin-left: 0 !important;
    }
    .test-type-col .form-group .radio input[id^='teacher_test_defaultTestType'],.classcodes-div .test-type-col .form-group .radio #teacher_test_defaultTestType_0 {
        left: 0 !important;
        top: -3px !important;
    }
    .classcodes-div .btn-save-wrapper button,.curriculum-div .btn-save-wrapper button,.test-details-div .btn-save-wrapper button {
        white-space: inherit !important;
        height: auto !important;
        margin-top: 0;
        width: 92% !important;
    } 
    .test-type-col .radio:nth-child(3) label {
        margin-left: 0 !important;
    }
    
    .test-type-col .radio:nth-child(4) label {
        margin-left: 0 !important;
    }
    .typing-type-options-col,.multi-choice-options-col {
        width: 100%;
    }
    .select-test-type-heading {
        margin-left: 0 !important;
        margin-bottom: 15px;
    }
    .default-multi-testtype-wrapper .radio label[data-tooltip]:hover::before {
        padding-left: 10px !important;
        padding-right: 10px !important;
        left: 43%;
    }
}
#test-vowels .missing-vowels-input,#test-consonants .missing-consonant-input {
    height: auto;
    min-height: 34px;
}

@media only screen and (min-width: 768px) and (max-width: 991px){
    .avail-chosen-pupil-section #filter {
        padding-left: 20px;
        justify-content: start;
    }
}

input.radio-checkbox {
    margin-left: 22px !important;
}

.default-test-type-row {
    display: flex;
    align-items: flex-end;
}

.select-btn-level {
    padding: 4px !important;
    height: 30px !important;
}

.modal-show-activity-title {
    text-align: center;
}
.page-sub-title {
    width: 100%;
    text-align: center;
}

/* Basic Styles */
.fancy-button {
    position: relative;
    width: 100%;
    color: #fff;
    border: 1px solid;
    font-size: 10px;
    margin: 5px;
    padding: 5px 10px;
    text-decoration: none;
    display: block;
    outline: none;
    line-height: 100%;
    overflow: hidden;
    height: 40px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

@media screen and (min-width:767px) and (max-width:998px) {
    .fancy-button {
        font-size: 10px;
    }
}
@media screen and (min-width:998px) {
    .fancy-button {
        font-size: 14px;
    }
}
@media screen and (max-width:767px) {
    .fancy-button {
        margin: 2px;
        font-size: 9px;
        padding: 0px;
        
    }
}

.fancy-button:hover {
    text-decoration: none;
}

.fancy-button .icon {
    float: right;
}

.fancy-button.icon {
    display: inline-block;
}

.fancy-button:active .icon,
.fancy-button:focus .icon {
    -webkit-transform: scale(0.75);
    -moz-transform: scale(0.75);
    -o-transform: scale(0.75);
    transform: scale(0.75);
}

.half-right-rounded {
    border-radius: 5px;
}

/* Colors */
.esmerald {
    background-color: #9f82fe;
}

.esmerald:hover {
    color: #9f82fe;
    background-color: #fff;
}

/* Effects */
.basic {
    -webkit-transition: all 0.35s ease;
    -moz-transition: all 0.35s ease;
    -o-transition: all 0.35s ease;
    transition: all 0.35s ease;
}

.basic:hover {
    border: 1px solid;
}

.card {
    height: 400px;
    width: 60%;
}

@media screen and (min-width:767px) and (max-width:998px) {
    .card {
        height: 400px;
        width: 90%;
    }
}

.content {
    width: 100%;
    height: 100%;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 1s;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}

.front,
.back {
    position: absolute;
    height: 100%;
    width: 100%;
    background: white;
    color: #03446A;
    text-align: center;
    border-radius: 5px;
    backface-visibility: hidden;
}
.flashcard-txt {
    padding: 15% 0;
}

@media screen and (max-width:768px) {
    .front,
    .back {
        font-size: 20px;

    }
    .vertical-progress-wrap {
        display: none;
    }
}
@media screen and (min-width:767px) and (max-width:998px) {

    .front,
    .back {
        font-size: 20px;

    }
}

@media screen and (min-width:998px) and (max-width:1200px) {

    .front,
    .back {
        font-size: 30px;

    }
}

@media screen and (min-width:1200px) {
    .front,
    .back {
        font-size: 40px;
    }
    .default-multi-testtype-wrapper .typing-choice-label{
        text-align: center;
    }
}

.back {
    background: #03446A;
    color: white;
    transform: rotateX(180deg);
}

.flash-cards-game {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.prview,
.next {
    border: 0.2rem solid #646f90;
    text-align: center;
    margin-top: 50px;
    border-radius: 0.5rem;
    padding: 1rem;
    font-weight: 600;
}

.prview:hover {
    border-color: #9f82fe;
    outline: none;
}

.next:hover {
    border-color: #9f82fe;
    outline: none;
}

@media screen and (max-width:768px) {
    .row-flex {
        display: block;
    }

    .card {
        height: 300px;
        width: 100%;
    }
}

.question-count {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    font-weight: 600;
}

.flashcards-card {
    width: 400px;
    display: flex;
    height: 60px;
    margin-bottom: 20px;
    justify-content: center;
    align-items: center;
}

.flashcards-grid-card {
    width: 90%;
    display: flex;
    height: 80%;
    margin-bottom: 20px;
    justify-content: center;
    align-items: center;
}

.flashcards-forever-card {
    width: 90%;
    display: flex;
    height: 80%;
    margin-bottom: 20px;
    justify-content: center;
    align-items: center;
}

@media screen and (max-width:767px) {
    .flashcards-card {
        width: 300px;
    }
    #test-listening .listening-audio td:first-child::before {
        content: '' !important;
        padding: 0;
        width: auto !important;
    }
    #test-listening .listening-audio td:first-child {
        padding-left: 15px !important;
    }
}

.flashcards-list,
.flashcards-audio {
    display: grid;
    justify-content: center;
}

.flashcards-content {
    width: 100%;
    height: 100%;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 1s;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    margin: 20px 0px;
}

.active .flashcards-content {
    transform: rotateY(180deg);
    transition: transform 0.5s;
}

.flashcards-front,
.flashcards-back {
    position: absolute;
        padding: 5px;
    height: 100%;
    width: 100%;
    display: flex;
    background: white;
    color: #03446A;
    text-align: center;
    font-size: 18px;
    border-radius: 5px;
    backface-visibility: hidden;
    align-items: center;
    justify-content: center;
        
}

.flashcards-grid-front,
.flashcards-grid-back {
    position: absolute;
    padding: 5px;
    /* height: 100%; */
    width: 100%;
    display: flex;
    /* background: white; */
    color: #03446A;
    text-align: center;
    font-size: 18px;
    border-radius: 5px;
    backface-visibility: hidden;
    align-items: center;
    justify-content: center;

}

.flashcards-grid-back {
    background: #03446A;
    color: white;
    transform: rotateY(180deg);
}
.flashcards-grid .flashcards-grid-content,.flashcards-forever .flashcards-grid-content {
    background: #fff;
    border-radius: 5px;
    align-items: center;
    display: flex;
}
.flashcards-grid .active .flashcards-grid-content,.flashcards-forever .active .flashcards-grid-content {
    background: #03446a;
}
.flashcards-grid .flashcards-grid-front, .flashcards-grid .flashcards-grid-back {
    background:transparent;
}
.flashcards-forever .flashcards-grid-front, .flashcards-forever .flashcards-grid-back {
    background:transparent;
}

@media screen and (max-width:768px) {
   /* .flashcards-grid-front,
   .flashcards-grid-back {
    font-size: 50%;
   } */
}

.flashcards-back {
    background: #03446A;
    color: white;
    transform: rotateY(180deg);
}
td.target-language-val {
    position: relative;
}

.textLine {
    position: absolute !important;
}

.reveal-list-show {
    display: flex;
    justify-content: center;
}


@media screen and (max-width:768px) {
    .block-steps-flash {
        width: 100% !important;
        display: flex;
        margin-bottom: 25px;
    }
    #bottomTranslationBox {
        width: 100%;
    }
    .reveal-list-show{
        width: 100%;
    }
}
@media screen and (min-width:768px) {
    .block-steps-flash {
        width: 92%;
        padding: 0 10%;
        display: flex;
        margin-bottom: 25px;
        margin-left: 0px;
    }
}

.flashcard-button-active {
    border: 1px solid !important;
    color: #9f82fe !important;
    background-color: #fff !important;
}

@media screen and (max-width:767px) {
    .change-flashcard-btn {
        display: flex;
        justify-content: space-around;
    }
    .next-prev-btn{
        width: 40%;
    }
}
@media screen and (max-width:998px) {
    .change-flashcard-btn {
        display: flex;
        justify-content: space-around;
    }

    .next-prev-btn {
        width: 40%;
    }
}

.button-active {
    border: 1px solid !important;
    color: #9f82fe !important;
    background-color: #fff !important;
}

.flashcards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
      justify-items: center;
}

.flashcards-forever {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-items: center;
}

.flashcards-grid-content {
    width: 100%;
    height: 100%;
    box-shadow: 0 0 15px rgb(0 0 0 / 10%);
    cursor: pointer;
    transition: transform 1s;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    margin: 20px 0px;
}

.active .flashcards-grid-content {
    transform: rotateY(180deg);
    transition: transform 0.5s;
}

.flashcards-as-audio .toggle,
.flashcards-as-audio .mute {
    appearance: none;
    background-color: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    display: inline-block;
    padding: 0;
    user-select: none;
    text-decoration: none;
}

.flashcards-as-audio .toggle:focus,
.flashcards-as-audio .mute:focus,
.flashcards-as-audio .toggle:hover,
.flashcards-as-audio .mute:hover {
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.flashcards-as-audio {
    align-items: center;
    display: flex;
    background: transparent;
    width: 30px;
    margin-bottom: 20px;
    margin-right: 30px;
}

.flashcards-as-audio.active {
    width: 265px;
}

.flashcards-as-audio audio {
    background-color: transparent;
}

.flashcards-as-audio audio::-webkit-media-controls-panel {
    background-color: transparent;
}

.flashcards-as-audio audio.inactive {
    opacity: 0;
    position: absolute;
    z-index: -1;
    width: 30px;
    height: 30px;
}

.flashcards-as-audio .toggle {
    background-image: url("data:image/png;base64,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");

    background-size: 30px;
    background-repeat: no-repeat;
    background-position: center;
    height: 30px;
    width: 30px;
}

.flashcards-as-audio .toggle.playing {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22357%22%20height%3D%22357%22%20viewBox%3D%220%200%20357%20357%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M25.5%20357h102V0h-102v357zm204-357v357h102V0h-102z%22%2F%3E%3C%2Fsvg%3E");
}

.flashcards-as-audio .time {
    color: #fff;
    font: 100 0.8rem/1 sans-serif;
    margin: 0 10px;
}

.flashcards-as-audio .mute {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22459%22%20height%3D%22459%22%20viewBox%3D%220%200%20459%20459%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M0%20153v153h102l127.5%20127.5v-408L102%20153H0zm344.25%2076.5c0-45.9-25.5-84.15-63.75-102v204c38.25-17.85%2063.75-56.1%2063.75-102zM280.5%205.1v53.55C354.45%2081.6%20408%20147.9%20408%20229.5s-53.55%20147.9-127.5%20170.85v53.55C382.5%20430.95%20459%20339.15%20459%20229.5S382.5%2028.05%20280.5%205.1z%22%2F%3E%3C%2Fsvg%3E%0A");
    background-size: 14px;
    background-repeat: no-repeat;
    background-position: center;
    height: 30px;
    margin: 0 10px;
    transition: all 0.3s ease-in;
    width: 30px;
}

.flashcards-as-audio .mute.muted {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22461.55%22%20height%3D%22461.55%22%20viewBox%3D%220%200%20461.55%20461.55%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M345.525%20229.5c0-45.9-25.5-84.15-63.75-102v56.1l63.75%2063.75V229.5zm63.75%200c0%2022.95-5.1%2045.9-12.75%2066.3l38.25%2038.25c17.85-30.6%2025.5-68.85%2025.5-107.1%200-109.65-76.5-201.45-178.5-224.4V56.1c73.95%2025.5%20127.5%2091.8%20127.5%20173.4zM34.425%200L1.275%2033.15%20121.125%20153H1.275v153h102l127.5%20127.5V262.65l109.65%20109.65c-17.85%2012.75-35.7%2022.95-58.65%2030.6v53.55c35.7-7.65%2066.3-22.95%2094.35-45.9l51%2051%2033.15-33.148-229.5-229.5L34.425%200zm196.35%2025.5l-53.55%2053.55%2053.55%2053.55V25.5z%22%2F%3E%3C%2Fsvg%3E%0A");
}

.flashcards-as-audio .mute.hidden {
    opacity: 0;
    visibility: hidden;
}

.flashcards-as-audio input[type="range"] {
    appearance: none;
    height: 14px;
    margin: 0;
    width: 100px;
    background: transparent;
    transition: all 0.3s ease-in;
}

.flashcards-as-audio input[type="range"][disabled] {
    cursor: default;
}

.flashcards-as-audio input[type="range"].hidden {
    opacity: 0;
    visibility: hidden;
}

.flashcards-as-audio input[type="range"].volume {
    width: 60px;
}

.flashcards-as-audio input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
}

.flashcards-as-audio input[type="range"]:focus {
    border: none;
    box-shadow: none;
    outline: 0;
}

.flashcards-as-audio input[type="range"]::-webkit-slider-thumb {
    -webkit-tap-highlight-color: transparent;
    appearance: none;
    background-color: #fff;
    border-radius: 100%;
    cursor: pointer;
    display: block;
    height: 14px;
    -webkit-transform: translateY(-7px);
    -moz-transform: translateY(0);
    width: 14px;
}

.flashcards-as-audio input[type="range"]::-moz-range-thumb {
    -webkit-tap-highlight-color: transparent;
    appearance: none;
    background-color: #fff;
    border-radius: 100%;
    cursor: pointer;
    display: block;
    height: 14px;
    -webkit-transform: translateY(-7px);
    -moz-transform: translateY(0);
    width: 14px;
}

.flashcards-as-audio input[type="range"]::-ms-thumb {
    -webkit-tap-highlight-color: transparent;
    appearance: none;
    background-color: #fff;
    border-radius: 100%;
    cursor: pointer;
    display: block;
    height: 14px;
    -webkit-transform: translateY(-7px);
    -moz-transform: translateY(0);
    width: 14px;
}

.flashcards-as-audio input[type="range"]::-webkit-slider-runnable-track {
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    background: rgba(255, 255, 255, 0.3);
    box-shadow: none;
    height: 1px;
    border: none;
    box-shadow: none;
    outline: 0;
}

.flashcards-as-audio input[type="range"]:focus::-webkit-slider-runnable-track {
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    background: rgba(255, 255, 255, 0.3);
    box-shadow: none;
    height: 1px;
    border: none;
    box-shadow: none;
    outline: 0;
}

.flashcards-as-audio input[type="range"]::-moz-range-track {
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    background: rgba(255, 255, 255, 0.3);
    box-shadow: none;
    height: 1px;
    border: none;
    box-shadow: none;
    outline: 0;
}

.flashcards-as-audio input[type="range"]::-ms-track {
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    background: rgba(255, 255, 255, 0.3);
    box-shadow: none;
    height: 1px;
    border: none;
    box-shadow: none;
    outline: 0;
}

.flashcards-as-audio input[type="range"]::-ms-fill-lower {
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    background: rgba(255, 255, 255, 1);
    box-shadow: none;
    height: 1px;
    border: none;
    box-shadow: none;
    outline: 0;
}

.flashcards-as-audio input[type="range"]:focus::-ms-fill-lower {
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    background: rgba(255, 255, 255, 1);
    box-shadow: none;
    height: 1px;
    border: none;
    box-shadow: none;
    outline: 0;
}

.flashcards-as-audio input[type="range"]::-ms-fill-upper {
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    background: rgba(255, 255, 255, 1);
    box-shadow: none;
    height: 1px;
    border: none;
    box-shadow: none;
    outline: 0;
}

.flashcards-as-audio input[type="range"]:focus::-ms-fill-upper {
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    background: rgba(255, 255, 255, 1);
    box-shadow: none;
    height: 1px;
    border: none;
    box-shadow: none;
    outline: 0;
}

.flash-audio {
    display: flex;
    align-items: center;
}

.listening-as-audio .toggle,
.listening-as-audio .mute {
    appearance: none;
    background-color: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    display: inline-block;
    padding: 0;
    user-select: none;
    text-decoration: none;
}

.listening-as-audio .toggle:focus,
.listening-as-audio .mute:focus,
.listening-as-audio .toggle:hover,
.listening-as-audio .mute:hover {
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.listening-as-audio {
    align-items: center;
    display: flex;
    background: transparent;
    width: 30px;
    margin-bottom: 20px;
    margin-right: 30px;
}

.listening-as-audio.active {
    width: 265px;
}

.listening-as-audio audio {
    background-color: transparent;
}

.listening-as-audio audio::-webkit-media-controls-panel {
    background-color: transparent;
}

.listening-as-audio audio.inactive {
    opacity: 0;
    position: absolute;
    z-index: -1;
    width: 30px;
    height: 30px;
}

.listening-as-audio .toggle {
    background-image: url("data:image/png;base64,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");

    background-size: 30px;
    background-repeat: no-repeat;
    background-position: center;
    height: 30px;
    width: 30px;
}

.listening-as-audio .toggle.playing {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22357%22%20height%3D%22357%22%20viewBox%3D%220%200%20357%20357%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M25.5%20357h102V0h-102v357zm204-357v357h102V0h-102z%22%2F%3E%3C%2Fsvg%3E");
}

.listening-as-audio .time {
    color: #fff;
    font: 100 0.8rem/1 sans-serif;
    margin: 0 10px;
}

.listening-as-audio .mute {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22459%22%20height%3D%22459%22%20viewBox%3D%220%200%20459%20459%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M0%20153v153h102l127.5%20127.5v-408L102%20153H0zm344.25%2076.5c0-45.9-25.5-84.15-63.75-102v204c38.25-17.85%2063.75-56.1%2063.75-102zM280.5%205.1v53.55C354.45%2081.6%20408%20147.9%20408%20229.5s-53.55%20147.9-127.5%20170.85v53.55C382.5%20430.95%20459%20339.15%20459%20229.5S382.5%2028.05%20280.5%205.1z%22%2F%3E%3C%2Fsvg%3E%0A");
    background-size: 14px;
    background-repeat: no-repeat;
    background-position: center;
    height: 30px;
    margin: 0 10px;
    transition: all 0.3s ease-in;
    width: 30px;
}

.listening-as-audio .mute.muted {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22461.55%22%20height%3D%22461.55%22%20viewBox%3D%220%200%20461.55%20461.55%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M345.525%20229.5c0-45.9-25.5-84.15-63.75-102v56.1l63.75%2063.75V229.5zm63.75%200c0%2022.95-5.1%2045.9-12.75%2066.3l38.25%2038.25c17.85-30.6%2025.5-68.85%2025.5-107.1%200-109.65-76.5-201.45-178.5-224.4V56.1c73.95%2025.5%20127.5%2091.8%20127.5%20173.4zM34.425%200L1.275%2033.15%20121.125%20153H1.275v153h102l127.5%20127.5V262.65l109.65%20109.65c-17.85%2012.75-35.7%2022.95-58.65%2030.6v53.55c35.7-7.65%2066.3-22.95%2094.35-45.9l51%2051%2033.15-33.148-229.5-229.5L34.425%200zm196.35%2025.5l-53.55%2053.55%2053.55%2053.55V25.5z%22%2F%3E%3C%2Fsvg%3E%0A");
}

.listening-as-audio .mute.hidden {
    opacity: 0;
    visibility: hidden;
}

.listening-as-audio input[type="range"] {
    appearance: none;
    height: 14px;
    margin: 0;
    width: 100px;
    background: transparent;
    transition: all 0.3s ease-in;
}

.listening-as-audio input[type="range"][disabled] {
    cursor: default;
}

.listening-as-audio input[type="range"].hidden {
    opacity: 0;
    visibility: hidden;
}

.listening-as-audio input[type="range"].volume {
    width: 60px;
}

.listening-as-audio input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
}

.listening-as-audio input[type="range"]:focus {
    border: none;
    box-shadow: none;
    outline: 0;
}

.listening-as-audio input[type="range"]::-webkit-slider-thumb {
    -webkit-tap-highlight-color: transparent;
    appearance: none;
    background-color: #fff;
    border-radius: 100%;
    cursor: pointer;
    display: block;
    height: 14px;
    -webkit-transform: translateY(-7px);
    -moz-transform: translateY(0);
    width: 14px;
}

.listening-as-audio input[type="range"]::-moz-range-thumb {
    -webkit-tap-highlight-color: transparent;
    appearance: none;
    background-color: #fff;
    border-radius: 100%;
    cursor: pointer;
    display: block;
    height: 14px;
    -webkit-transform: translateY(-7px);
    -moz-transform: translateY(0);
    width: 14px;
}

.listening-as-audio input[type="range"]::-ms-thumb {
    -webkit-tap-highlight-color: transparent;
    appearance: none;
    background-color: #fff;
    border-radius: 100%;
    cursor: pointer;
    display: block;
    height: 14px;
    -webkit-transform: translateY(-7px);
    -moz-transform: translateY(0);
    width: 14px;
}

.listening-as-audio input[type="range"]::-webkit-slider-runnable-track {
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    background: rgba(255, 255, 255, 0.3);
    box-shadow: none;
    height: 1px;
    border: none;
    box-shadow: none;
    outline: 0;
}

.listening-as-audio input[type="range"]:focus::-webkit-slider-runnable-track {
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    background: rgba(255, 255, 255, 0.3);
    box-shadow: none;
    height: 1px;
    border: none;
    box-shadow: none;
    outline: 0;
}

.listening-as-audio input[type="range"]::-moz-range-track {
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    background: rgba(255, 255, 255, 0.3);
    box-shadow: none;
    height: 1px;
    border: none;
    box-shadow: none;
    outline: 0;
}

.listening-as-audio input[type="range"]::-ms-track {
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    background: rgba(255, 255, 255, 0.3);
    box-shadow: none;
    height: 1px;
    border: none;
    box-shadow: none;
    outline: 0;
}

.listening-as-audio input[type="range"]::-ms-fill-lower {
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    background: rgba(255, 255, 255, 1);
    box-shadow: none;
    height: 1px;
    border: none;
    box-shadow: none;
    outline: 0;
}

.listening-as-audio input[type="range"]:focus::-ms-fill-lower {
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    background: rgba(255, 255, 255, 1);
    box-shadow: none;
    height: 1px;
    border: none;
    box-shadow: none;
    outline: 0;
}

.listening-as-audio input[type="range"]::-ms-fill-upper {
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    background: rgba(255, 255, 255, 1);
    box-shadow: none;
    height: 1px;
    border: none;
    box-shadow: none;
    outline: 0;
}

.listening-as-audio input[type="range"]:focus::-ms-fill-upper {
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    background: rgba(255, 255, 255, 1);
    box-shadow: none;
    height: 1px;
    border: none;
    box-shadow: none;
    outline: 0;
}
.block-info-now .test-name:hover {
    color: #000 !important;
}

@media screen and (max-width: 767px) {

    table.wrap-trans {
        display: grid !important;
    }

    .type-answer-div .block-white-wrap .table-v2-wrap td[data-th]::before,.type-missing-vowels-div .block-white-wrap .table-v2-wrap td[data-th]::before,.type-missing-consonants-div .block-white-wrap .table-v2-wrap td[data-th]::before {
        width: 100%;
        padding: 0 10px;
    }
    .type-answer-div .block-white-wrap .table-v2-wrap td[data-th],.type-missing-vowels-div .block-white-wrap .table-v2-wrap td[data-th],.type-missing-consonants-div .block-white-wrap .table-v2-wrap td[data-th] {
        padding: 0 10px 20px 10px !important;
    }
    .type-answer-div table.table-v2-wrap td[data-th]::before,.type-missing-vowels-div table.table-v2-wrap td[data-th]::before,.type-missing-consonants-div table.table-v2-wrap td[data-th]::before {
        content: "" !important;
    }
    .type-answer-div .block-white-wrap .table-v2-wrap td[data-th="#"]::before,.type-missing-vowels-div .block-white-wrap .table-v2-wrap td[data-th="#"]::before,.type-missing-consonants-div .block-white-wrap .table-v2-wrap td[data-th="#"]::before {
        content: attr(data-th) !important;
    }
    .type-answer-div form .block-white-wrap td[data-th="Gramm."],.type-missing-vowels-div form .block-white-wrap td[data-th="Gramm."],.type-missing-consonants-div form .block-white-wrap td[data-th="Gramm."] {
        display: none !important;
    }
    .type-answer-div .block-white-wrap .table-v2-wrap td[data-th="#"],.type-missing-vowels-div .block-white-wrap .table-v2-wrap td[data-th="#"],.type-missing-consonants-div .block-white-wrap .table-v2-wrap td[data-th="#"] {
        padding-top: 18px !important;
        padding-left: 20px !important;
    }
    .type-answer-div .block-white-wrap .table-v2-wrap td[data-th="#"]::before,.type-missing-vowels-div .block-white-wrap .table-v2-wrap td[data-th="#"]::before,.type-missing-consonants-div .block-white-wrap .table-v2-wrap td[data-th="#"]::before {
        padding-top: 18px !important;
    }
    #test-multi .table.table-v2-wrap td:nth-child(1):not(.td-question td,.td-answer td) {
        width:100%;
    }
    #test-multi .table.table-v2-wrap td:nth-child(2):not(.td-question td,.td-answer td) {
        display:none;
    }
    #test-multi .table.table-v2-wrap tr:not(.td-question tr,.td-answer tr) {
        display: flex !important;
        flex-wrap: wrap !important;
    }
    #test-multi .table.table-v2-wrap td.td-question {
        width: 88%;
    }
    #test-multi .table.table-v2-wrap td.td-answer {
        width: 10%;
        min-width: auto !important;
    }
    #test-multi .table.table-v2-wrap td.td-answer table {
        margin: 0;
        display: block;
    }
    #test-multi .table.table-v2-wrap td.font-lato-bold {
        width: 100%;
    }
    .type-answer-div table.table-v2-wrap tr:nth-child(even),.type-missing-vowels-div table.table-v2-wrap tr:nth-child(even),.type-missing-consonants-div table.table-v2-wrap tr:nth-child(even),.multi-choice-div table.table-v2-wrap tr:nth-child(even) {
        background: transparent;
    }
    #test-vowels span.span_target.removed-vowels-letter, #test-consonants span.span_target.removed-consonant-letter {
        white-space: nowrap;
        display: inline-flex;
    }
    #test-vowels span.missing-vowel-word,#test-consonants span.missing-consonant-word {
        margin-right: 0;
    }
    input.anwser-underscore, input.anwser-underscore-consonant {    
        height: 25px !important;
        padding: 0 !important;
        margin: 1px;
    }
    
    .pupil-test-result-wrap .wrong-answer-practice-btn-tr td:first-child {
        display: none;
    }
    .pupil-test-result-wrap .practice-btn-advice-text-tr td,.wrong-answer-practice-btn-tr td  {
        display: block;
    }
    .pupil-test-result-wrap .practice-btn-advice-text-tr ul,.practice-btn-advice-text-tr ul li{
        margin-bottom: 0;
    }
    .pupil-test-result-wrap .practice-btn-advice-text-tr ul li .takeMeToExercise  {
        margin: 0;
    }
    .pupil-test-result-wrap .practice-btn-advice-text-tr li {
        flex-wrap: wrap;
    }
    .pupil-test-result-wrap .test-type-practice {
        display: none;
    }
    .pupil-test-result-wrap .result-icons {
        display: block;
    }
    .pupil-test-result-wrap .test-type-test {
        display: block;
    }
    .pupil-test-result-wrap .test-type-test .challenge-button {
        width: auto !important;
    }
    .pupil-test-result-wrap table.table-v2-wrap td[data-th]::before {
        top: 5px;
    }
}

.effortpoint-Notifiaction {
    font-family: 'Lato-Bold' !important;
    font-size: 18px !important;
}

.notif-close {
    width: 20% !important;
}

.block-steps-vertical.text-button {
    text-align: center;
}
.extra-vocab-setup-rw .form-group > label[for="pupil_test_department"] {
    display: none;
}
.edit-vocab-input{
    min-width: 150px;
}
.manage-pupil-table>thead>tr>th {
    min-width: 110px;
}
.manage-pupil-table .sort-name, .sort-editname,.home-email  {
    min-width: 210px !important;
}
.manage-pupil-table .sort-name, .sort-editname {
    cursor:pointer;
}