@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Noto+Sans:400,400i,700,700i");

a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    font-size: 100%;
    vertical-align: baseline
}

html {
    line-height: 1
}

ul {
    list-style: none
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

caption,
td,
th {
    text-align: left;
    font-weight: 400;
    vertical-align: middle
}

blockquote,
q {
    quotes: none
}

blockquote:after,
blockquote:before,
q:after,
q:before {
    content: "";
    content: none
}

a img {
    border: none
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
    display: block
}

*,
:after,
:before {
    box-sizing: border-box
}

@font-face {
    font-family: STIX2;
    src: url(../fonts/STIX2Text-Regular.woff) format("woff")
}

@font-face {
    font-family: STIX2;
    src: url(../fonts/STIX2Text-Bold.woff) format("woff");
    font-weight: 700
}

@font-face {
    font-family: STIX2;
    src: url(../fonts/STIX2Text-Italic.woff) format("woff");
    font-style: italic
}

@font-face {
    font-family: STIX2;
    src: url(../fonts/STIX2Text-BoldItalic.woff) format("woff");
    font-weight: 700;
    font-style: italic
}

@font-face {
    font-family: DroidArabicNaskh;
    src: url(../fonts/DroidNaskh-Regular.woff2) format("woff2");
    font-weight: 400;
    font-display: block
}

@font-face {
    font-family: DroidArabicNaskh;
    src: url(../fonts/DroidNaskh-Bold.woff2) format("woff2");
    font-weight: 700;
    font-display: block
}

@font-face {
    font-family: timesExtraBold;
    src: url(../fonts/times-extrabold.woff2) format("woff2"), url(../fonts/times-extrabold.woff) format("woff");
    font-weight: 700
}

@font-face {
    font-family: Material-Design-Iconic-Font;
    src: url(../fonts/Material-Design-Iconic-Font.woff2?v=2.2.0) format("woff2"), url(../fonts/Material-Design-Iconic-Font.woff?v=2.2.0) format("woff"), url(../fonts/Material-Design-Iconic-Font.ttf?v=2.2.0) format("truetype");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: Font-Awesome;
    font-style: normal;
    font-weight: 900;
    font-display: block;
    src: url(../fonts/fa-solid-900.woff2) format("woff2")
}

@font-face {
    font-family: Font-Awesome;
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url(../fonts/fa-regular-400.woff2) format("woff2")
}

@font-face {
    font-family: Font-Awesome;
    font-style: normal;
    font-weight: 300;
    font-display: block;
    src: url(../fonts/fa-light-300.woff2) format("woff2")
}

@font-face {
    font-family: Font-Awesome-brands;
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url(../fonts/fa-brands-400.woff2) format("woff2")
}

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

@font-face {
    font-family: Noto;
    src: url(../fonts/Noto-Regular.woff) format("woff");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: Noto;
    src: url(../fonts/Noto-Bold.woff) format("woff");
    font-weight: 700;
    font-style: normal
}

@font-face {
    font-family: NagwaMath;
    src: url(../fonts/NagwaMath.woff) format("woff")
}

@font-face {
    font-family: NagwaArabicMath;
    src: url(../fonts/NagwaArabicMath.woff) format("woff")
}

.shaker {
    font-family: Noto;
    font-family: NagwaMath;
    font-family: NagwaArabicMath
}

div.globalWrapper {
    float: left;
    width: 100%
}

.container,
.container-full {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    width: 100%
}

.container-full:after,
.container:after {
    content: " ";
    display: block;
    clear: both
}

.container-full .col-1,
.container .col-1 {
    width: 5.83333%;
    float: left;
    margin-left: 1.25%;
    margin-right: 1.25%
}

.container-full .col-2,
.container .col-2 {
    width: 14.16667%;
    float: left;
    margin-left: 1.25%;
    margin-right: 1.25%
}

.container-full .col-3,
.container .col-3 {
    width: 22.5%;
    float: left;
    margin-left: 1.25%;
    margin-right: 1.25%
}

.container-full .col-4,
.container .col-4 {
    width: 30.83333%;
    float: left;
    margin-left: 1.25%;
    margin-right: 1.25%
}

.container-full .col-5,
.container .col-5 {
    width: 39.16667%;
    float: left;
    margin-left: 1.25%;
    margin-right: 1.25%
}

.container-full .col-6,
.container .col-6 {
    width: 47.5%;
    float: left;
    margin-left: 1.25%;
    margin-right: 1.25%
}

.container-full .col-7,
.container .col-7 {
    width: 55.83333%;
    float: left;
    margin-left: 1.25%;
    margin-right: 1.25%
}

.container-full .col-8,
.container .col-8 {
    width: 64.16667%;
    float: left;
    margin-left: 1.25%;
    margin-right: 1.25%
}

.container-full .col-9,
.container .col-9 {
    width: 72.5%;
    float: left;
    margin-left: 1.25%;
    margin-right: 1.25%
}

.container-full .col-10,
.container .col-10 {
    width: 80.83333%;
    float: left;
    margin-left: 1.25%;
    margin-right: 1.25%
}

.container-full .col-11,
.container .col-11 {
    width: 89.16667%;
    float: left;
    margin-left: 1.25%;
    margin-right: 1.25%
}

.container-full .col-12,
.container .col-12 {
    width: 97.5%;
    float: left;
    margin-left: 1.25%;
    margin-right: 1.25%
}

.row {
    width: 100%;
    float: left
}

.col-1 {
    width: 5.83333%
}

.col-1,
.col-2 {
    float: left;
    margin-left: 1.25%;
    margin-right: 1.25%
}

.col-2 {
    width: 14.16667%
}

.col-3 {
    width: 22.5%
}

.col-3,
.col-4 {
    float: left;
    margin-left: 1.25%;
    margin-right: 1.25%
}

.col-4 {
    width: 30.83333%
}

.col-5 {
    width: 39.16667%
}

.col-5,
.col-6 {
    float: left;
    margin-left: 1.25%;
    margin-right: 1.25%
}

.col-6 {
    width: 47.5%
}

.col-7 {
    width: 55.83333%
}

.col-7,
.col-8 {
    float: left;
    margin-left: 1.25%;
    margin-right: 1.25%
}

.col-8 {
    width: 64.16667%
}

.col-9 {
    width: 72.5%
}

.col-9,
.col-10 {
    float: left;
    margin-left: 1.25%;
    margin-right: 1.25%
}

.col-10 {
    width: 80.83333%
}

.col-11 {
    width: 89.16667%
}

.col-11,
.col-12 {
    float: left;
    margin-left: 1.25%;
    margin-right: 1.25%
}

.col-12 {
    width: 97.5%
}

.RTL .col-1 {
    width: 5.83333%
}

.RTL .col-1,
.RTL .col-2 {
    float: right;
    margin-right: 1.25%;
    margin-left: 1.25%
}

.RTL .col-2 {
    width: 14.16667%
}

.RTL .col-3 {
    width: 22.5%
}

.RTL .col-3,
.RTL .col-4 {
    float: right;
    margin-right: 1.25%;
    margin-left: 1.25%
}

.RTL .col-4 {
    width: 30.83333%
}

.RTL .col-5 {
    width: 39.16667%
}

.RTL .col-5,
.RTL .col-6 {
    float: right;
    margin-right: 1.25%;
    margin-left: 1.25%
}

.RTL .col-6 {
    width: 47.5%
}

.RTL .col-7 {
    width: 55.83333%
}

.RTL .col-7,
.RTL .col-8 {
    float: right;
    margin-right: 1.25%;
    margin-left: 1.25%
}

.RTL .col-8 {
    width: 64.16667%
}

.RTL .col-9 {
    width: 72.5%
}

.RTL .col-9,
.RTL .col-10 {
    float: right;
    margin-right: 1.25%;
    margin-left: 1.25%
}

.RTL .col-10 {
    width: 80.83333%
}

.RTL .col-11 {
    width: 89.16667%
}

.RTL .col-11,
.RTL .col-12 {
    float: right;
    margin-right: 1.25%;
    margin-left: 1.25%
}

.RTL .col-12 {
    width: 97.5%
}

.message {
    width: 100%;
    float: left
}

.grid-gallery>li {
    width: 23.07692%;
    float: left
}

.grid-gallery>li:nth-child(4n+1) {
    margin-right: -100%;
    clear: both;
    margin-left: 0
}

.grid-gallery>li:nth-child(4n+2) {
    margin-left: 25.64103%;
    margin-right: -100%;
    clear: none
}

.grid-gallery>li:nth-child(4n+3) {
    margin-left: 51.28205%;
    margin-right: -100%;
    clear: none
}

.grid-gallery>li:nth-child(4n+4) {
    margin-left: 76.92308%;
    margin-right: -100%;
    clear: none
}

html {
    overflow-y: scroll;
    font-size: 10px
}

body,
html {
    height: 100%
}

body {
    font-family: Noto Sans, sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: #333;
    background: #fff
}

body:after,
body:before {
    content: " ";
    display: table
}

body:after {
    clear: both
}

body.modal-open {
    overflow: hidden
}

div.globalWrapper {
    direction: ltr;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-height: 100%;
    line-height: 1.3
}

main {
    margin-bottom: 60px
}

::-moz-placeholder {
    color: #ccc;
    font-size: 16px
}

::-webkit-input-placeholder {
    color: #ccc;
    font-size: 16px
}

:-ms-input-placeholder,
::-ms-input-placeholder {
    color: #ccc;
    font-size: 16px
}

::placeholder {
    color: #ccc;
    font-size: 16px
}

.mIcon {
    font-family: Material-Design-Iconic-Font;
    font-feature-settings: "liga"
}

.fa,
.mIcon {
    font-weight: 400 !important;
    font-style: normal !important;
    font-size: 19px;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale
}

.fa {
    font-family: Font-Awesome;
    font-feature-settings: "liga"
}

a,
article,
button,
div,
input,
main,
nav,
section,
textarea {
    text-decoration: none;
    transition: all .2s
}

.not-active {
    pointer-events: none
}

a {
    color: #f5aa00
}

a:hover {
    text-decoration: underline
}

p,
textarea {
    line-height: 1.7
}

b,
strong {
    font-weight: 700
}

em {
    font-style: italic
}

sup {
    top: -5px;
    left: 0
}

sub,
sup {
    position: relative;
    font-size: 14px
}

sub {
    bottom: -5px
}

i {
    font-style: italic
}

pre {
    white-space: pre-line
}

del,
ins {
    text-decoration: none;
    margin-right: 3px;
    padding: 2px 5px;
    border: 1px solid #ddd
}

input:focus,
select:focus,
textarea:focus {
    outline: none
}

button,
input,
textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0
}

a.backToTop {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    line-height: 50px;
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 99;
    background-color: #f5aa00;
    border: 1px solid #f5aa00;
    text-decoration: none;
    color: #fff;
    font-size: 19px;
    font-weight: 400;
    opacity: 0;
    visibility: hidden;
    transform: scale(0);
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center
}

a.backToTop:hover {
    background-color: #fff;
    color: #f5aa00
}

a.backToTop.show {
    opacity: 1;
    visibility: visible;
    transform: scale(1)
}

@media print {

    .noPrint,
    .noPrint * {
        display: none !important
    }
}

img {
    font-size: 0;
    color: #fff;
    max-width: 100%;
    height: auto;
    display: inline-block;
    vertical-align: middle
}

img.small {
    width: 100px
}

::selection {
    background: #000;
    color: #fff
}

::-moz-selection {
    background: #000;
    color: #fff
}

.embed-responsive {
    position: relative;
    display: block;
    height: 0;
    padding: 0;
    overflow: hidden
}

.embed-responsive .embed-responsive-item,
.embed-responsive embed,
.embed-responsive iframe,
.embed-responsive object,
.embed-responsive video {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    border: 0
}

.embed-responsive-16by9 {
    padding-bottom: 56.25%
}

.embed-responsive-4by3 {
    padding-bottom: 75%
}

div.videoWrapper {
    position: relative;
    padding-bottom: 56.25%;
    margin: 10px 0
}

div.videoWrapper iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border: 0
}

.full-width-switch {
    position: fixed;
    top: 0;
    right: 0;
    padding: 10px;
    background-color: hsla(0, 0%, 100%, .5)
}

.hide-input-search {
    display: none !important
}

@media (min-width:576px) {
    .modal-dialog {
        max-width: 800px !important
    }
}

.addimage[_ngcontent-c1] {
    height: auto !important;
    width: auto !important
}

.white_space {
    white-space: nowrap
}

.align-center {
    -ms-flex-item-align: center;
    align-self: center
}

.video-player {
    width: 100%;
    position: relative;
    overflow: hidden;
    border: 1px solid #ddd;
    margin: initial
}

.video-player:before {
    content: "";
    display: table;
    padding-top: 56.25%
}

.video-player iframe {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    border: 0
}

.video-player .ellapsed-time {
    background: #ddd;
    position: absolute;
    right: 0;
    bottom: 0;
    color: #333;
    padding: .4rem 1rem .3rem;
    font-size: 12px;
    line-height: 1;
    z-index: 6
}

.text-center {
    text-align: center
}

.text-right {
    text-align: right
}

.hidden {
    display: none
}

#collapsedContent {
    display: none;
    transition: none
}

.select-query {
    min-width: 20rem !important
}

.select2 {
    width: 100% !important
}

.input-group-with-clear-btn {
    position: relative
}

.input-group-with-clear-btn label * {
    pointer-events: none;
    cursor: pointer !important
}

.input-group-with-clear-btn .clear {
    position: absolute;
    left: 10px;
    top: 56%;
    margin-left: 0;
    font-size: 21px;
    z-index: 1;
    cursor: pointer;
    pointer-events: auto !important
}

.form-inline-reprocessing {
    display: -ms-flexbox;
    display: flex
}

.form-inline-reprocessing .input-text-flx {
    -ms-flex: unset !important;
    flex: unset !important;
    width: 30%
}

.form-inline-reprocessing button:last-child {
    display: -ms-flexbox;
    display: flex;
    margin-top: 28.9px
}

.green {
    color: #78b517
}

.red {
    color: #f04124
}

.blue {
    color: #026bb0
}

.no-max-width {
    max-width: none !important
}

.comment-text {
    position: relative
}

.comment-text i {
    position: absolute;
    top: 3px;
    left: -10px
}

.swal-modal .swal-button--danger {
    background-color: #f04124;
    border: 1px solid #f04124 !important
}

.swal-modal .swal-button--danger:hover {
    opacity: 1 !important;
    background-color: #fff;
    color: #f04124;
    text-decoration: none
}

.swal-modal .swal-button--success {
    background-color: #78b517;
    border: 1px solid #78b517 !important
}

.swal-modal .swal-button--success:hover {
    opacity: 1 !important;
    background-color: #fff;
    color: #78b517;
    text-decoration: none
}

.swal-modal .swal-button--cancel {
    background-color: #fff;
    color: #333;
    border-color: #333;
    border: 1px solid #333 !important
}

.swal-modal .swal-button--cancel:hover {
    color: #fff;
    background-color: #333;
    opacity: 1 !important
}

.swal-modal .swal-button--confirm {
    background-color: #f5aa00;
    border: 1px solid #f5aa00 !important
}

.swal-modal .swal-button--confirm:hover {
    opacity: 1 !important;
    background-color: #fff;
    color: #f5aa00;
    border: 1px solid #f5aa00
}

.swal-modal .swal-icon--warning {
    border-color: #f5aa00
}

.swal-modal .swal-icon--success__line {
    background-color: #78b517
}

.swal-modal .swal-icon--success__ring {
    border-color: rgba(120, 181, 23, .2)
}

.bg-white {
    background: #fff
}

.no-width {
    width: unset !important
}

.w-150 {
    width: 150px
}

.align-items-center {
    -ms-flex-align: center;
    align-items: center
}

.pull-right {
    margin-left: auto
}

.pull-left {
    margin-right: auto
}

.seperator {
    border-top: 3px solid #ddd
}

.medium {
    width: 250px
}

.large {
    width: 350px
}

.table-fixed {
    overflow-y: scroll !important;
    clear: both;
    margin: 2rem 0
}

.table-fixed table thead tr>th {
    position: relative;
    border: 1px solid #ddd;
    border-top-width: 0;
    border-bottom: none !important;
    box-shadow: inset 0 1px 0 #ddd, inset 0 -1px 0 #ddd;
    z-index: 999
}

.table-fixed table tbody:first-child,
.table-fixed table tbody tr:first-child td {
    border-top: none !important
}

.table-fixed.thead-boder thead {
    border: 1px solid #ddd;
    border-bottom: 0;
    border-top: 0 !important
}

.table-fixed.thead-boder thead th {
    position: relative
}

.table-fixed.thead-boder thead th:after {
    content: "";
    position: absolute;
    right: -1px;
    top: 0;
    bottom: 0;
    border-right: 1px solid #ddd
}

.table-fixed.thead-boder thead th:last-child:after {
    display: none
}

.table-fixed .fixed-cell {
    position: relative;
    background: #f7f7f7
}

.border-box {
    border: 1px solid #ddd;
    padding: 15px
}

.border-box.border-orange {
    border-color: #f5aa00
}

.border-box.border-green {
    border-color: #78b517
}

.inline-displayed {
    display: inline
}

.list-block .has-children span {
    margin-left: 5px
}

.list-block .has-children span:after {
    content: "|";
    color: #ddd;
    margin-left: 5px
}

.list-block .has-children span:last-child:after {
    content: normal
}

.fixed-pof {
    min-width: 848px;
    max-width: 848px
}

@media (min-width:1280) {
    .fixed-pof-side {
        display: block;
        min-width: 350px;
        max-width: 350px
    }
}

.title-pof {
    min-width: 848px;
    max-width: 848px;
    margin-left: 1.25%;
    margin-right: 1.25%
}

.toggle-password {
    position: relative
}

.toggle-password a i {
    position: absolute;
    right: 0;
    bottom: 0;
    transform: translate(-50%, -50%);
    color: #ddd
}

.toggle-password a.active i {
    color: #f5aa00
}

.input-date-year-container {
    width: 16rem !important
}

.input-date-year-container .ui-datepicker-title select {
    width: 40% !important
}

.input-date-year-container .ui-datepicker-title select:first-child {
    margin-right: 5px !important
}

.input-date-year-container .ui-datepicker-title select:last-child {
    margin-left: 5px !important
}

.radio-button-group {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%
}

.radio-button-group>label {
    margin-bottom: 10px
}

.radio-button-group .inputs {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row
}

.key {
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    margin-bottom: 25px
}

.key,
.key .row {
    display: -ms-flexbox;
    display: flex
}

.key .row {
    margin-bottom: 10px
}

.key .row>button {
    background: none;
    border: 1px solid #ddd;
    min-width: 40px;
    margin-right: 1rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: 0;
    font-size: 12px
}

.key .row:last-child {
    margin-bottom: 0
}

.key .row:last-child .input-group label:first-child {
    padding-left: 40px
}

.mingles-questions .instance .answers li {
    overflow: hidden;
    display: -ms-flexbox;
    display: flex
}

.mingles-questions .instance .answers li>button {
    background: none;
    border: 1px solid #ddd;
    min-width: 40px;
    margin-right: 1rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: 0;
    font-size: 12px
}

form.two-inputs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 20px
}

form.two-inputs>.cta {
    grid-column: span 2
}

.rtl-dir {
    direction: rtl
}

.with-cta {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: start;
    align-items: flex-start
}

.with-cta .cta {
    margin-left: auto
}

.with-list {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: start;
    align-items: flex-start;
    -ms-flex-direction: column;
    flex-direction: column
}

.with-list ul {
    margin-top: 10px
}

.breadcrumb {
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    margin-top: -35px;
    margin-bottom: 15px
}

.breadcrumb ul {
    width: 100%
}

.breadcrumb li,
.breadcrumb ul {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center
}

.breadcrumb li {
    -ms-flex-pack: center;
    justify-content: center
}

.breadcrumb li:last-child:after {
    content: normal;
    margin: 0
}

.breadcrumb li:after {
    content: "\f2fb";
    font-family: Material-Design-Iconic-Font;
    margin: 0 5px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center
}

.small-col {
    width: 200px
}

.allow-sharing {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content
}

.allow-sharing label {
    margin-right: 1rem;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    margin-bottom: 0
}

.allow-sharing label:last-child {
    margin-right: 0
}

.allow-sharing i {
    white-space: nowrap
}

.sort-answers-h {
    margin-bottom: 1rem
}

.response-message {
    text-align: center
}

.response-message figure {
    margin-bottom: 3rem
}

.response-message figure img {
    height: 20rem
}

.response-message p {
    margin-bottom: 2rem
}

.hide-scrollbar::-webkit-scrollbar,
.hide-scrollbar::-webkit-scrollbar-button {
    display: none
}

.instance,
.instance-width {
    max-width: 848px
}

.instance-width.main,
.instance.main {
    max-width: 100%
}

.chart-box {
    border: 1px solid #ddd;
    padding: 1.5rem
}

.chart-box h3 {
    text-align: center
}

.input-text .input-with-icon {
    position: relative
}

.input-text .input-with-icon span {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #f7f7f7;
    height: 40px;
    width: 3rem;
    border: 1px solid #ddd;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 18px
}

.input-text .input-with-icon input[type=text] {
    width: 100%;
    padding-left: 55px
}

.input-text .input-with-icon input[type=text]:focus~span {
    border-color: #f5aa00;
    border-right-color: #ddd
}

.input-text .input-with-icon span.error {
    position: static;
    background: none;
    border: 0;
    font-size: 12px
}

.form-popup {
    position: relative
}

.form-popup .text p {
    font-size: 16px
}

.form-popup.arabic {
    text-align: right
}

.deactivate-btn {
    color: #f04124
}

.activate-btn {
    color: #78b517
}

.two-inputs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    grid-column-gap: 20px;
    margin-right: 0 !important
}

.two-inputs label {
    width: 100%
}

.login-with-google-btn {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMTcuNiA5LjJsLS4xLTEuOEg5djMuNGg0LjhDMTMuNiAxMiAxMyAxMyAxMiAxMy42djIuMmgzYTguOCA4LjggMCAwIDAgMi42LTYuNnoiIGZpbGw9IiM0Mjg1RjQiIGZpbGwtcnVsZT0ibm9uemVybyIvPjxwYXRoIGQ9Ik05IDE4YzIuNCAwIDQuNS0uOCA2LTIuMmwtMy0yLjJhNS40IDUuNCAwIDAgMS04LTIuOUgxVjEzYTkgOSAwIDAgMCA4IDV6IiBmaWxsPSIjMzRBODUzIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNNCAxMC43YTUuNCA1LjQgMCAwIDEgMC0zLjRWNUgxYTkgOSAwIDAgMCAwIDhsMy0yLjN6IiBmaWxsPSIjRkJCQzA1IiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNOSAzLjZjMS4zIDAgMi41LjQgMy40IDEuM0wxNSAyLjNBOSA5IDAgMCAwIDEgNWwzIDIuNGE1LjQgNS40IDAgMCAxIDUtMy43eiIgZmlsbD0iI0VBNDMzNSIgZmlsbC1ydWxlPSJub256ZXJvIi8+PHBhdGggZD0iTTAgMGgxOHYxOEgweiIvPjwvZz48L3N2Zz4=);
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: 115px 10px;
    padding-left: 40px !important;
    width: 100%
}

.sign-up-cta {
    -ms-flex-align: center;
    align-items: center
}

.sign-up-cta span {
    margin: auto 1rem
}

.list-blocks {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    grid-gap: 30px;
    text-align: center
}

.list-blocks a {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: center;
    align-items: center
}

.list-blocks a:hover {
    text-decoration: none
}

.list-blocks a:hover .icon {
    border-color: #f5aa00
}

.list-blocks a:hover .icon i:nth-child(2) {
    background-color: #f5aa00;
    border-color: #f5aa00;
    color: #fff;
    transform: scaleX(-1)
}

.list-blocks a:hover h4 {
    color: #f5aa00
}

.list-blocks .icon {
    width: 90px;
    height: 90px;
    text-align: center;
    margin-bottom: 10px;
    font-size: 30px;
    position: relative
}

.list-blocks .icon,
.list-blocks .icon i:nth-child(2) {
    border: 1px solid #ddd;
    border-radius: 50%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    transition: all .3s
}

.list-blocks .icon i:nth-child(2) {
    font-size: 12px;
    margin-left: 5px;
    background-color: #fff;
    width: 25px;
    height: 25px;
    position: absolute;
    bottom: 0;
    right: 0;
    color: #888;
    transform: translate(-50% -50%)
}

.list-blocks h4 {
    font-size: 16px;
    color: #333;
    transition: all .3s;
    font-weight: 400
}

.list-block .inline-list {
    display: -ms-inline-flexbox;
    display: inline-flex
}

.list-block .inline-list li {
    position: relative;
    margin: 0;
    margin-right: 5px
}

.list-block .inline-list li:before {
    content: normal
}

.list-block .inline-list li:after {
    content: "•";
    margin: 0 3px
}

.list-block .inline-list li:last-child {
    margin-right: 0
}

.list-block .inline-list li:last-child:after {
    content: normal
}

.inline-list {
    display: -ms-inline-flexbox;
    display: inline-flex
}

.inline-list li {
    position: relative
}

.inline-list li:before {
    content: normal
}

.inline-list li:after {
    content: "•";
    margin: 0;
    padding-left: 5px;
    padding-right: 5px
}

.inline-list li:last-child {
    margin-right: 0
}

.inline-list li:last-child:after {
    content: normal
}

.or-seperator {
    -ms-flex-align: center;
    align-items: center;
    margin: 10px 0
}

.or-seperator,
.or-seperator span {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%
}

.or-seperator span {
    position: relative;
    color: gray;
    padding: 0 10px
}

.or-seperator span:after {
    right: 0
}

.or-seperator span:after,
.or-seperator span:before {
    content: "";
    height: 1px;
    width: 45%;
    background-color: #ddd;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto
}

.or-seperator span:before {
    left: 0
}

.generated-rows,
.generated-rows-edit {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: end;
    align-items: flex-end;
    width: 100%;
    margin: 0;
    -ms-flex-direction: column;
    flex-direction: column
}

.generated-rows-edit.two-inputs .cta,
.generated-rows.two-inputs .cta {
    -ms-flex-align: end;
    align-items: flex-end;
    margin-left: 0
}

.generated-rows-edit.two-inputs .single-row,
.generated-rows.two-inputs .single-row {
    margin-bottom: 15px
}

.generated-rows-edit.two-inputs .single-row:last-child,
.generated-rows-edit.two-inputs .single-row:only-child,
.generated-rows.two-inputs .single-row:last-child,
.generated-rows.two-inputs .single-row:only-child {
    margin-bottom: 0
}

.generated-rows-edit .single-row,
.generated-rows .single-row {
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -ms-flex-align: end;
    align-items: flex-end
}

.generated-rows-edit .fields,
.generated-rows .fields {
    display: -ms-flexbox;
    display: flex;
    width: 100%
}

.generated-rows-edit .fields .input-group,
.generated-rows .fields .input-group {
    width: 50%;
    margin-right: 20px
}

.generated-rows-edit .fields .input-group:last-child,
.generated-rows .fields .input-group:last-child {
    margin-right: 0
}

.generated-rows-edit .cta,
.generated-rows .cta {
    margin-left: 20px;
    display: -ms-flexbox;
    display: flex
}

.generated-rows-edit .cta .btn,
.generated-rows .cta .btn {
    margin-right: 10px
}

.generated-rows-edit .cta .btn:last-child,
.generated-rows .cta .btn:last-child {
    margin-right: 0
}

.generated-rows-edit .cta .btn.hidden-cta,
.generated-rows .cta .btn.hidden-cta {
    visibility: hidden
}

.orange {
    color: #f5aa00 !important
}

.clearfix {
    clear: both
}

.table-filter-content {
    margin-bottom: 15px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    width: 100%;
    grid-column-gap: 15px
}

.no-content-message {
    text-align: center;
    color: #cdcdcd;
    border-radius: 4px;
    padding: 30px;
    -ms-flex-direction: column;
    flex-direction: column
}

.no-content-message,
.no-content-message .icon {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center
}

.no-content-message .icon {
    font-size: 60px;
    line-height: 0;
    color: #e6e6e6;
    margin: 0 auto 10px;
    border-radius: 50%
}

.no-content-message .message {
    text-align: center;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0;
    margin: 0
}

.no-content-message p {
    color: #e6e6e6;
    text-align: center;
    font-family: STIX2;
    font-size: 18px
}

.no-content-message i {
    line-height: 0
}

.read-only-input {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background: #fff;
    background-color: #fff
}

.read-only-input textarea[readonly],
.read-only-input textarea[readOnly] {
    background-color: #fff !important;
    cursor: default !important
}

.btn-icon-center {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    line-height: normal
}

.disabled {
    pointer-events: none;
    opacity: .5
}

.grey {
    color: #999
}

#activate-portal-popup .align-content-right,
#deactivate-portal-popup .align-content-right {
    -ms-flex-pack: center !important;
    justify-content: center !important
}

.grey-note {
    font-size: 15px;
    font-family: Noto Sans, sans-serif;
    color: gray;
    margin: 5px 0
}

.from-actions {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    width: 100%;
    position: relative
}

.from-actions .actions {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-right: 15px;
    position: absolute;
    left: -20px;
    top: 29px;
    bottom: 0;
    z-index: 10000
}

.from-actions .actions .btn {
    margin-bottom: 5px;
    width: 20px;
    height: 20px
}

.from-actions .actions .btn:last-child {
    margin-bottom: 0
}

.from-actions .actions .btn i {
    font-size: 14px
}

.from-actions .action-row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: start;
    justify-content: flex-start
}

.from-actions .action-row span {
    margin-right: 10px
}

.from-actions .action-row .btn {
    margin-right: 5px;
    width: auto;
    padding: 0 10px;
    height: 20px;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 400
}

.from-actions .action-row .btn:last-child {
    margin-right: 0
}

.from-actions .action-row .btn i {
    font-size: 14px;
    font-family: Material-Design-Iconic-Font;
    margin-right: 10px
}

.audio-wrapper {
    display: block;
    top: 0;
    background-color: #fff
}

.audio-wrapper .plyr {
    position: static;
    padding: 10px;
    border-radius: 4px;
    background-color: #f7f7f7;
    height: auto
}

.audio-wrapper .plyr .plyr__controls {
    padding: 0;
    background: none
}

.audio-wrapper .plyr .plyr__controls .plyr__control:hover {
    background: #f5aa00
}

.audio-wrapper .plyr input[type=range] {
    color: #f5aa00
}

.audio-wrapper .plyr .plyr__menu {
    display: none
}

.audio-wrapper .plyr__control.plyr__tab-focus {
    box-shadow: none
}

.pagination-arrows {
    margin-top: 2rem
}

.pagination-arrows:after,
.pagination-arrows:before {
    content: " ";
    display: table
}

.pagination-arrows:after {
    clear: both
}

.pagination-arrows a {
    color: #f5aa00;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    font-size: 1.6rem
}

.pagination-arrows a.next {
    float: right
}

.pagination-arrows a.next i {
    margin-left: 5px;
    margin-right: 0;
    transform: scale(1)
}

.pagination-arrows a.prev {
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
    float: left
}

.pagination-arrows a.prev i {
    margin-right: 5px;
    transform: scaleX(-1);
    margin-left: 0
}

.pagination-arrows a:hover {
    text-decoration: underline
}

.badge {
    display: -ms-inline-flexbox;
    display: inline-flex;
    padding: 0 .6rem;
    -ms-flex-align: center;
    align-items: center;
    height: 2rem;
    font-family: Noto Sans, sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
    border-radius: .25rem;
    color: #fff;
    margin-left: auto;
    margin-right: 0
}

.badge.badge-black {
    background-color: gray;
    color: #fff
}

.badge.outlined {
    background-color: transparent;
    border: 1px solid #888;
    color: #888
}

.badge.has-icon {
    padding: 5px 10px;
    height: auto
}

.badge.has-icon i {
    margin-right: .5rem
}

.badge.regular {
    text-transform: inherit
}

.vertical-border-separator {
    height: 20px;
    width: 1px;
    background-color: #ddd;
    -ms-flex: inherit !important;
    flex: inherit !important
}

[data-full-screen-container] [data-full-screen-trigger] {
    position: absolute;
    z-index: 3;
    top: 1rem;
    right: 1rem;
    transition: .3s;
    opacity: 0;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background-color: #f7f7f7;
    color: #f5aa00;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center
}

[data-full-screen-container] [data-full-screen-trigger]:hover {
    background-color: #f5aa00;
    color: #fff
}

[data-full-screen-container]:hover [data-full-screen-trigger] {
    opacity: 1
}

[data-type=expandable] {
    position: relative
}

[data-type=expandable][data-outline-wrap=true] {
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 4px;
    transition: border-color .3s
}

[data-type=expandable][data-expand-type=content] [data-expand-action] {
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 7;
    transform: none;
    transition: .3s;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    padding: 0
}

[data-type=expandable][data-expand-type=content] [data-expand-action]:hover {
    background: #eee
}

.instance [data-type=expandable][data-expand-type=content] [data-expand-action] {
    top: 0;
    right: 0;
    left: inherit
}

[data-type=expandable][data-expand-type=content].expanded {
    position: relative
}

[data-type=expandable][data-expand-type=content].expanded .chevron-down-icon {
    transform: rotate(180deg)
}

[data-type=expandable] [data-expand-area] {
    overflow: hidden
}

[data-type=expandable] [data-expand-area].expanded {
    position: relative
}

[data-type=expandable] [data-expand-area].expanded .chevron-down-icon {
    transform: rotate(180deg)
}

[data-type=expandable][data-expand-type=all]:not(.default-open) [data-expand-area] {
    display: none
}

[data-type=expandable] [data-expand-action] {
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 1rem 1.5rem;
    margin-bottom: 1.5rem
}

[data-type=expandable] [data-expand-action] label {
    cursor: pointer
}

[data-type=expandable] [data-expand-action]:hover .chevron-down-icon {
    color: #f5aa00
}

[data-type=expandable] .chevron-down-icon {
    cursor: pointer;
    transform: none;
    transition: .3s;
    display: grid;
    place-items: center;
    z-index: 4
}

[data-type=expandable][data-overlay=true]:before {
    content: "";
    position: absolute;
    left: 1px;
    right: 1px;
    height: 100%;
    bottom: 0;
    opacity: 1;
    transition: .3s;
    background: linear-gradient(180deg, hsla(0, 0%, 100%, 0), #fff 85%);
    visibility: visible;
    z-index: 6
}

[data-type=expandable].expanded:before {
    opacity: 0;
    visibility: hidden
}

[data-type=expandable].expanded i {
    transform: rotate(180deg)
}

[data-type=expandable]+[data-type=expandable] {
    margin-top: 1.5rem
}

.comprension-paragraph[data-type=expandable] h3 {
    padding-right: 4rem;
    padding-left: 0
}

.comprension-paragraph p+p {
    margin-top: 1rem
}

.repeat-section__element[data-type=expandable][data-expand-type=content] [data-expand-action] {
    position: relative;
    top: unset;
    right: unset;
    padding: 0;
    height: auto;
    border: 0;
    width: 100%;
    border-radius: 0;
    margin-top: -px
}

.repeat-section__element[data-type=expandable][data-expand-type=content] [data-expand-action]:hover {
    background: #fff
}

.instance .repeat-section__element[data-type=expandable][data-expand-type=content] [data-expand-action] {
    top: 0;
    right: 0;
    left: inherit
}

.poemContainer {
    margin: 1em auto;
    overflow: auto;
    width: 100%;
    display: block !important;
    text-rendering: optimizespeed !important;
    line-height: 1.8em
}

.poemContainer .linesGroup {
    text-align: left
}

.poemContainer>div {
    margin-bottom: 0
}

.poemContainer>h4.title {
    text-align: center
}

.poemContainer>h4.title.linesGroupSeparator {
    font-size: 18px
}

.poemContainer .linesGroupSeparator {
    text-align: left
}

.poemContainer.twoSlots .linesGroupSeparator {
    text-align: center
}

.poemContainer.twoSlots .linesGroup>div {
    clear: both;
    overflow: visible;
    text-align: center
}

@media (max-width:766px) {
    .poemContainer.twoSlots .linesGroup>div {
        margin-bottom: 20px
    }

    .poemContainer.twoSlots .linesGroup>div:last-child {
        margin-bottom: 0
    }
}

.poemContainer.twoSlots .linesGroup>div.center {
    width: 100%
}

@media (max-width:766px) {
    .poemContainer.twoSlots .linesGroup>div.center {
        margin-bottom: 0
    }
}

.poemContainer.twoSlots .linesGroup>div.center>div:only-child {
    text-align: center;
    padding: 0
}

.poemContainer.twoSlots .linesGroup>div>div {
    min-width: 45%;
    text-align: right;
    line-height: 2em;
    display: inline-block;
    padding: 0 10px
}

@media (max-width:766px) {
    .poemContainer.twoSlots .linesGroup>div>div {
        width: 100%;
        text-align: center
    }
}

.poemContainer.twoSlots .linesGroup>div>div:first-child {
    float: none;
    text-align: left
}

@media (max-width:766px) {
    .poemContainer.twoSlots .linesGroup>div>div:first-child {
        text-align: center
    }
}

.poemContainer.twoSlots .linesGroup>div>div:last-child {
    float: none;
    text-align: right
}

@media (max-width:766px) {
    .poemContainer.twoSlots .linesGroup>div>div:last-child {
        text-align: center
    }
}

.poemContainer.twoSlots .linesGroup>div>div>bdo {
    width: auto;
    float: none
}

span.underline {
    text-decoration: underline
}

.repeat-section .repeat-section__element {
    position: relative
}

.repeat-section .repeat-section__element.bordered {
    border: 1px solid #ddd;
    padding: 1.5rem
}

.repeat-section .repeat-section__element.bordered .repeat-section__delete {
    position: absolute;
    right: 1.5rem;
    top: 1rem
}

.repeat-section .repeat-section__title {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 0 1rem
}

.repeat-section .repeat-section__add {
    border: 2px dashed #ddd;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 2rem;
    min-height: 40rem
}

.repeat-section .repeat-section__add i {
    font-size: 2.5rem;
    margin-right: 1rem
}

.repeat-section .repeat-section__add:hover {
    color: #78b517;
    border-color: #78b517;
    opacity: 1
}

.repeat-section.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-gap: 30px
}

.arabic {
    direction: rtl
}

.arabic .m-l-10 {
    margin-left: 0 !important;
    margin-right: 10px !important
}

.arabic .m-r-10 {
    margin-right: 0 !important;
    margin-left: 10px !important
}

.arabic .m-r-auto {
    margin-right: 0 !important;
    margin-left: auto !important
}

.arabic .mfp-close {
    left: 0;
    right: inherit
}

.page-preview {
    font-family: STIX2, Times New Roman, serif;
    font-size: 1.8rem
}

.page-preview main {
    padding: 0 30px
}

.page-preview main h3 {
    font-weight: 700;
    font-size: 2.1rem
}

.page-preview .container {
    width: 848px;
    margin: 0
}

.page-preview .page-title {
    margin-bottom: 20px;
    text-align: left
}

.page-preview .page-title h1 {
    font-family: timesExtraBold;
    font-weight: 700;
    font-size: 30px;
    line-height: 1.2
}

.swal-footer {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center
}

.job-details h3 {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    margin-top: 4rem
}

.job-details ul {
    position: relative;
    margin-bottom: 4rem
}

.job-details ul li {
    position: relative;
    display: -ms-flexbox;
    display: flex
}

.job-details ul li+li {
    margin-top: 1rem
}

.job-details ul li:before {
    content: "";
    min-width: 1.1rem;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    background-color: #fff4dc;
    border: 1px solid #f5aa00;
    margin-top: .6rem;
    margin-right: 1rem
}

.job-details ul li:last-child:before {
    position: relative;
    z-index: 1
}

.job-details ul li:last-child:after {
    background-color: #fff
}

.job-details ul:before,
.job-details ul li:last-child:after {
    content: "";
    position: absolute;
    width: 1px;
    left: 5px;
    top: 6px;
    bottom: 0
}

.job-details ul:before {
    background-color: #f5aa00
}

.dialogue {
    margin-bottom: 3rem
}

.stem .retryBtn {
    margin: auto;
    display: block;
    line-height: 40px
}

.stem .retryBtn i.mIcon {
    font-size: 18px;
    margin: 9px 6px 0 0;
    float: left
}

/*!
 * animate.css -http://daneden.me/animate
 * Version - 3.6.0
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2018 Daniel Eden
 */
.animated {
    animation-duration: 1s;
    animation-fill-mode: both
}

.animated.infinite {
    animation-iteration-count: infinite
}

@keyframes bounce {

    0%,
    20%,
    53%,
    80%,
    to {
        animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        transform: translateZ(0)
    }

    40%,
    43% {
        animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        transform: translate3d(0, -30px, 0)
    }

    70% {
        animation-timing-function: cubic-bezier(.755, .05, .855, .06);
        transform: translate3d(0, -15px, 0)
    }

    90% {
        transform: translate3d(0, -4px, 0)
    }
}

.bounce {
    animation-name: bounce;
    transform-origin: center bottom
}

.flash {
    animation-name: flash
}

@keyframes pulse {
    0% {
        transform: scaleX(1)
    }

    50% {
        transform: scale3d(1.05, 1.05, 1.05)
    }

    to {
        transform: scaleX(1)
    }
}

.pulse {
    animation-name: pulse
}

@keyframes rubberBand {
    0% {
        transform: scaleX(1)
    }

    30% {
        transform: scale3d(1.25, .75, 1)
    }

    40% {
        transform: scale3d(.75, 1.25, 1)
    }

    50% {
        transform: scale3d(1.15, .85, 1)
    }

    65% {
        transform: scale3d(.95, 1.05, 1)
    }

    75% {
        transform: scale3d(1.05, .95, 1)
    }

    to {
        transform: scaleX(1)
    }
}

.rubberBand {
    animation-name: rubberBand
}

@keyframes shake {

    0%,
    to {
        transform: translateZ(0)
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translate3d(-10px, 0, 0)
    }

    20%,
    40%,
    60%,
    80% {
        transform: translate3d(10px, 0, 0)
    }
}

.shake {
    animation-name: shake
}

@keyframes headShake {
    0% {
        transform: translateX(0)
    }

    6.5% {
        transform: translateX(-6px) rotateY(-9deg)
    }

    18.5% {
        transform: translateX(5px) rotateY(7deg)
    }

    31.5% {
        transform: translateX(-3px) rotateY(-5deg)
    }

    43.5% {
        transform: translateX(2px) rotateY(3deg)
    }

    50% {
        transform: translateX(0)
    }
}

.headShake {
    animation-timing-function: ease-in-out;
    animation-name: headShake
}

@keyframes swing {
    20% {
        transform: rotate(15deg)
    }

    40% {
        transform: rotate(-10deg)
    }

    60% {
        transform: rotate(5deg)
    }

    80% {
        transform: rotate(-5deg)
    }

    to {
        transform: rotate(0deg)
    }
}

.swing {
    transform-origin: top center;
    animation-name: swing
}

@keyframes tada {
    0% {
        transform: scaleX(1)
    }

    10%,
    20% {
        transform: scale3d(.9, .9, .9) rotate(-3deg)
    }

    30%,
    50%,
    70%,
    90% {
        transform: scale3d(1.1, 1.1, 1.1) rotate(3deg)
    }

    40%,
    60%,
    80% {
        transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg)
    }

    to {
        transform: scaleX(1)
    }
}

.tada {
    animation-name: tada
}

@keyframes wobble {
    0% {
        transform: translateZ(0)
    }

    15% {
        transform: translate3d(-25%, 0, 0) rotate(-5deg)
    }

    30% {
        transform: translate3d(20%, 0, 0) rotate(3deg)
    }

    45% {
        transform: translate3d(-15%, 0, 0) rotate(-3deg)
    }

    60% {
        transform: translate3d(10%, 0, 0) rotate(2deg)
    }

    75% {
        transform: translate3d(-5%, 0, 0) rotate(-1deg)
    }

    to {
        transform: translateZ(0)
    }
}

.wobble {
    animation-name: wobble
}

@keyframes jello {

    0%,
    11.1%,
    to {
        transform: translateZ(0)
    }

    22.2% {
        transform: skewX(-12.5deg) skewY(-12.5deg)
    }

    33.3% {
        transform: skewX(6.25deg) skewY(6.25deg)
    }

    44.4% {
        transform: skewX(-3.125deg) skewY(-3.125deg)
    }

    55.5% {
        transform: skewX(1.5625deg) skewY(1.5625deg)
    }

    66.6% {
        transform: skewX(-.78125deg) skewY(-.78125deg)
    }

    77.7% {
        transform: skewX(.39062deg) skewY(.39062deg)
    }

    88.8% {
        transform: skewX(-.19531deg) skewY(-.19531deg)
    }
}

.jello {
    animation-name: jello;
    transform-origin: center
}

@keyframes bounceIn {

    0%,
    20%,
    40%,
    60%,
    80%,
    to {
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    0% {
        opacity: 0;
        transform: scale3d(.3, .3, .3)
    }

    20% {
        transform: scale3d(1.1, 1.1, 1.1)
    }

    40% {
        transform: scale3d(.9, .9, .9)
    }

    60% {
        opacity: 1;
        transform: scale3d(1.03, 1.03, 1.03)
    }

    80% {
        transform: scale3d(.97, .97, .97)
    }

    to {
        opacity: 1;
        transform: scaleX(1)
    }
}

.bounceIn {
    animation-duration: .75s;
    animation-name: bounceIn
}

@keyframes bounceInDown {

    0%,
    60%,
    75%,
    90%,
    to {
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    0% {
        opacity: 0;
        transform: translate3d(0, -3000px, 0)
    }

    60% {
        opacity: 1;
        transform: translate3d(0, 25px, 0)
    }

    75% {
        transform: translate3d(0, -10px, 0)
    }

    90% {
        transform: translate3d(0, 5px, 0)
    }

    to {
        transform: translateZ(0)
    }
}

.bounceInDown {
    animation-name: bounceInDown
}

@keyframes bounceInLeft {

    0%,
    60%,
    75%,
    90%,
    to {
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    0% {
        opacity: 0;
        transform: translate3d(-3000px, 0, 0)
    }

    60% {
        opacity: 1;
        transform: translate3d(25px, 0, 0)
    }

    75% {
        transform: translate3d(-10px, 0, 0)
    }

    90% {
        transform: translate3d(5px, 0, 0)
    }

    to {
        transform: translateZ(0)
    }
}

.bounceInLeft {
    animation-name: bounceInLeft
}

@keyframes bounceInRight {

    0%,
    60%,
    75%,
    90%,
    to {
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    0% {
        opacity: 0;
        transform: translate3d(3000px, 0, 0)
    }

    60% {
        opacity: 1;
        transform: translate3d(-25px, 0, 0)
    }

    75% {
        transform: translate3d(10px, 0, 0)
    }

    90% {
        transform: translate3d(-5px, 0, 0)
    }

    to {
        transform: translateZ(0)
    }
}

.bounceInRight {
    animation-name: bounceInRight
}

@keyframes bounceInUp {

    0%,
    60%,
    75%,
    90%,
    to {
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }

    0% {
        opacity: 0;
        transform: translate3d(0, 3000px, 0)
    }

    60% {
        opacity: 1;
        transform: translate3d(0, -20px, 0)
    }

    75% {
        transform: translate3d(0, 10px, 0)
    }

    90% {
        transform: translate3d(0, -5px, 0)
    }

    to {
        transform: translateZ(0)
    }
}

.bounceInUp {
    animation-name: bounceInUp
}

@keyframes bounceOut {
    20% {
        transform: scale3d(.9, .9, .9)
    }

    50%,
    55% {
        opacity: 1;
        transform: scale3d(1.1, 1.1, 1.1)
    }

    to {
        opacity: 0;
        transform: scale3d(.3, .3, .3)
    }
}

.bounceOut {
    animation-duration: .75s;
    animation-name: bounceOut
}

@keyframes bounceOutDown {
    20% {
        transform: translate3d(0, 10px, 0)
    }

    40%,
    45% {
        opacity: 1;
        transform: translate3d(0, -20px, 0)
    }

    to {
        opacity: 0;
        transform: translate3d(0, 2000px, 0)
    }
}

.bounceOutDown {
    animation-name: bounceOutDown
}

@keyframes bounceOutLeft {
    20% {
        opacity: 1;
        transform: translate3d(20px, 0, 0)
    }

    to {
        opacity: 0;
        transform: translate3d(-2000px, 0, 0)
    }
}

.bounceOutLeft {
    animation-name: bounceOutLeft
}

@keyframes bounceOutRight {
    20% {
        opacity: 1;
        transform: translate3d(-20px, 0, 0)
    }

    to {
        opacity: 0;
        transform: translate3d(2000px, 0, 0)
    }
}

.bounceOutRight {
    animation-name: bounceOutRight
}

@keyframes bounceOutUp {
    20% {
        transform: translate3d(0, -10px, 0)
    }

    40%,
    45% {
        opacity: 1;
        transform: translate3d(0, 20px, 0)
    }

    to {
        opacity: 0;
        transform: translate3d(0, -2000px, 0)
    }
}

.bounceOutUp {
    animation-name: bounceOutUp
}

.fadeIn {
    animation-name: plyr-fade-in
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translate3d(0, -100%, 0)
    }

    to {
        opacity: 1;
        transform: translateZ(0)
    }
}

.fadeInDown {
    animation-name: fadeInDown
}

@keyframes fadeInDownBig {
    0% {
        opacity: 0;
        transform: translate3d(0, -2000px, 0)
    }

    to {
        opacity: 1;
        transform: translateZ(0)
    }
}

.fadeInDownBig {
    animation-name: fadeInDownBig
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translate3d(-100%, 0, 0)
    }

    to {
        opacity: 1;
        transform: translateZ(0)
    }
}

.fadeInLeft {
    animation-name: fadeInLeft
}

@keyframes fadeInLeftBig {
    0% {
        opacity: 0;
        transform: translate3d(-2000px, 0, 0)
    }

    to {
        opacity: 1;
        transform: translateZ(0)
    }
}

.fadeInLeftBig {
    animation-name: fadeInLeftBig
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translate3d(100%, 0, 0)
    }

    to {
        opacity: 1;
        transform: translateZ(0)
    }
}

.fadeInRight {
    animation-name: fadeInRight
}

@keyframes fadeInRightBig {
    0% {
        opacity: 0;
        transform: translate3d(2000px, 0, 0)
    }

    to {
        opacity: 1;
        transform: translateZ(0)
    }
}

.fadeInRightBig {
    animation-name: fadeInRightBig
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translate3d(0, 100%, 0)
    }

    to {
        opacity: 1;
        transform: translateZ(0)
    }
}

.fadeInUp {
    animation-name: fadeInUp
}

@keyframes fadeInUpBig {
    0% {
        opacity: 0;
        transform: translate3d(0, 2000px, 0)
    }

    to {
        opacity: 1;
        transform: translateZ(0)
    }
}

.fadeInUpBig {
    animation-name: fadeInUpBig
}

@keyframes fadeOut {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

.fadeOut {
    animation-name: fadeOut
}

@keyframes fadeOutDown {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(0, 100%, 0)
    }
}

.fadeOutDown {
    animation-name: fadeOutDown
}

@keyframes fadeOutDownBig {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(0, 2000px, 0)
    }
}

.fadeOutDownBig {
    animation-name: fadeOutDownBig
}

@keyframes fadeOutLeft {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(-100%, 0, 0)
    }
}

.fadeOutLeft {
    animation-name: fadeOutLeft
}

@keyframes fadeOutLeftBig {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(-2000px, 0, 0)
    }
}

.fadeOutLeftBig {
    animation-name: fadeOutLeftBig
}

@keyframes fadeOutRight {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(100%, 0, 0)
    }
}

.fadeOutRight {
    animation-name: fadeOutRight
}

@keyframes fadeOutRightBig {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(2000px, 0, 0)
    }
}

.fadeOutRightBig {
    animation-name: fadeOutRightBig
}

@keyframes fadeOutUp {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(0, -100%, 0)
    }
}

.fadeOutUp {
    animation-name: fadeOutUp
}

@keyframes fadeOutUpBig {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(0, -2000px, 0)
    }
}

.fadeOutUpBig {
    animation-name: fadeOutUpBig
}

@keyframes flip {
    0% {
        transform: perspective(400px) rotateY(-1turn);
        animation-timing-function: ease-out
    }

    40% {
        transform: perspective(400px) translateZ(150px) rotateY(-190deg);
        animation-timing-function: ease-out
    }

    50% {
        transform: perspective(400px) translateZ(150px) rotateY(-170deg);
        animation-timing-function: ease-in
    }

    80% {
        transform: perspective(400px) scale3d(.95, .95, .95);
        animation-timing-function: ease-in
    }

    to {
        transform: perspective(400px);
        animation-timing-function: ease-in
    }
}

.animated.flip {
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
    animation-name: flip
}

@keyframes flipInX {
    0% {
        transform: perspective(400px) rotateX(90deg);
        animation-timing-function: ease-in;
        opacity: 0
    }

    40% {
        transform: perspective(400px) rotateX(-20deg);
        animation-timing-function: ease-in
    }

    60% {
        transform: perspective(400px) rotateX(10deg);
        opacity: 1
    }

    80% {
        transform: perspective(400px) rotateX(-5deg)
    }

    to {
        transform: perspective(400px)
    }
}

.flipInX {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    animation-name: flipInX
}

@keyframes flipInY {
    0% {
        transform: perspective(400px) rotateY(90deg);
        animation-timing-function: ease-in;
        opacity: 0
    }

    40% {
        transform: perspective(400px) rotateY(-20deg);
        animation-timing-function: ease-in
    }

    60% {
        transform: perspective(400px) rotateY(10deg);
        opacity: 1
    }

    80% {
        transform: perspective(400px) rotateY(-5deg)
    }

    to {
        transform: perspective(400px)
    }
}

.flipInY {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    animation-name: flipInY
}

@keyframes flipOutX {
    0% {
        transform: perspective(400px)
    }

    30% {
        transform: perspective(400px) rotateX(-20deg);
        opacity: 1
    }

    to {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0
    }
}

.flipOutX {
    animation-duration: .75s;
    animation-name: flipOutX;
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important
}

@keyframes flipOutY {
    0% {
        transform: perspective(400px)
    }

    30% {
        transform: perspective(400px) rotateY(-15deg);
        opacity: 1
    }

    to {
        transform: perspective(400px) rotateY(90deg);
        opacity: 0
    }
}

.flipOutY {
    animation-duration: .75s;
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    animation-name: flipOutY
}

@keyframes lightSpeedIn {
    0% {
        transform: translate3d(100%, 0, 0) skewX(-30deg);
        opacity: 0
    }

    60% {
        transform: skewX(20deg);
        opacity: 1
    }

    80% {
        transform: skewX(-5deg);
        opacity: 1
    }

    to {
        transform: translateZ(0);
        opacity: 1
    }
}

.lightSpeedIn {
    animation-name: lightSpeedIn;
    animation-timing-function: ease-out
}

@keyframes lightSpeedOut {
    0% {
        opacity: 1
    }

    to {
        transform: translate3d(100%, 0, 0) skewX(30deg);
        opacity: 0
    }
}

.lightSpeedOut {
    animation-name: lightSpeedOut;
    animation-timing-function: ease-in
}

@keyframes rotateIn {
    0% {
        transform-origin: center;
        transform: rotate(-200deg);
        opacity: 0
    }

    to {
        transform-origin: center;
        transform: translateZ(0);
        opacity: 1
    }
}

.rotateIn {
    animation-name: rotateIn
}

@keyframes rotateInDownLeft {
    0% {
        transform-origin: left bottom;
        transform: rotate(-45deg);
        opacity: 0
    }

    to {
        transform-origin: left bottom;
        transform: translateZ(0);
        opacity: 1
    }
}

.rotateInDownLeft {
    animation-name: rotateInDownLeft
}

@keyframes rotateInDownRight {
    0% {
        transform-origin: right bottom;
        transform: rotate(45deg);
        opacity: 0
    }

    to {
        transform-origin: right bottom;
        transform: translateZ(0);
        opacity: 1
    }
}

.rotateInDownRight {
    animation-name: rotateInDownRight
}

@keyframes rotateInUpLeft {
    0% {
        transform-origin: left bottom;
        transform: rotate(45deg);
        opacity: 0
    }

    to {
        transform-origin: left bottom;
        transform: translateZ(0);
        opacity: 1
    }
}

.rotateInUpLeft {
    animation-name: rotateInUpLeft
}

@keyframes rotateInUpRight {
    0% {
        transform-origin: right bottom;
        transform: rotate(-90deg);
        opacity: 0
    }

    to {
        transform-origin: right bottom;
        transform: translateZ(0);
        opacity: 1
    }
}

.rotateInUpRight {
    animation-name: rotateInUpRight
}

@keyframes rotateOut {
    0% {
        transform-origin: center;
        opacity: 1
    }

    to {
        transform-origin: center;
        transform: rotate(200deg);
        opacity: 0
    }
}

.rotateOut {
    animation-name: rotateOut
}

@keyframes rotateOutDownLeft {
    0% {
        transform-origin: left bottom;
        opacity: 1
    }

    to {
        transform-origin: left bottom;
        transform: rotate(45deg);
        opacity: 0
    }
}

.rotateOutDownLeft {
    animation-name: rotateOutDownLeft
}

@keyframes rotateOutDownRight {
    0% {
        transform-origin: right bottom;
        opacity: 1
    }

    to {
        transform-origin: right bottom;
        transform: rotate(-45deg);
        opacity: 0
    }
}

.rotateOutDownRight {
    animation-name: rotateOutDownRight
}

@keyframes rotateOutUpLeft {
    0% {
        transform-origin: left bottom;
        opacity: 1
    }

    to {
        transform-origin: left bottom;
        transform: rotate(-45deg);
        opacity: 0
    }
}

.rotateOutUpLeft {
    animation-name: rotateOutUpLeft
}

@keyframes rotateOutUpRight {
    0% {
        transform-origin: right bottom;
        opacity: 1
    }

    to {
        transform-origin: right bottom;
        transform: rotate(90deg);
        opacity: 0
    }
}

.rotateOutUpRight {
    animation-name: rotateOutUpRight
}

.hinge {
    animation-duration: 2s
}

@keyframes jackInTheBox {
    0% {
        opacity: 0;
        transform: scale(.1) rotate(30deg);
        transform-origin: center bottom
    }

    50% {
        transform: rotate(-10deg)
    }

    70% {
        transform: rotate(3deg)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

.jackInTheBox {
    animation-name: jackInTheBox
}

@keyframes rollIn {
    0% {
        opacity: 0;
        transform: translate3d(-100%, 0, 0) rotate(-120deg)
    }

    to {
        opacity: 1;
        transform: translateZ(0)
    }
}

.rollIn {
    animation-name: rollIn
}

@keyframes rollOut {
    0% {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translate3d(100%, 0, 0) rotate(120deg)
    }
}

.rollOut {
    animation-name: rollOut
}

@keyframes zoomIn {
    0% {
        opacity: 0;
        transform: scale3d(.3, .3, .3)
    }

    50% {
        opacity: 1
    }
}

.zoomIn {
    animation-name: zoomIn
}

@keyframes zoomInDown {
    0% {
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19)
    }

    60% {
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1)
    }
}

.zoomInDown {
    animation-name: zoomInDown
}

@keyframes zoomInLeft {
    0% {
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19)
    }

    60% {
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1)
    }
}

.zoomInLeft {
    animation-name: zoomInLeft
}

@keyframes zoomInRight {
    0% {
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19)
    }

    60% {
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1)
    }
}

.zoomInRight {
    animation-name: zoomInRight
}

@keyframes zoomInUp {
    0% {
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19)
    }

    60% {
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        animation-timing-function: cubic-bezier(.175, .885, .32, 1)
    }
}

.zoomInUp {
    animation-name: zoomInUp
}

@keyframes zoomOut {
    0% {
        opacity: 1
    }

    50% {
        opacity: 0;
        transform: scale3d(.3, .3, .3)
    }

    to {
        opacity: 0
    }
}

.zoomOut {
    animation-name: zoomOut
}

@keyframes zoomOutDown {
    40% {
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19)
    }

    to {
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
        transform-origin: center bottom;
        animation-timing-function: cubic-bezier(.175, .885, .32, 1)
    }
}

.zoomOutDown {
    animation-name: zoomOutDown
}

@keyframes zoomOutLeft {
    40% {
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0)
    }

    to {
        opacity: 0;
        transform: scale(.1) translate3d(-2000px, 0, 0);
        transform-origin: left center
    }
}

.zoomOutLeft {
    animation-name: zoomOutLeft
}

@keyframes zoomOutRight {
    40% {
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0)
    }

    to {
        opacity: 0;
        transform: scale(.1) translate3d(2000px, 0, 0);
        transform-origin: right center
    }
}

.zoomOutRight {
    animation-name: zoomOutRight
}

@keyframes zoomOutUp {
    40% {
        opacity: 1;
        transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19)
    }

    to {
        opacity: 0;
        transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
        transform-origin: center bottom;
        animation-timing-function: cubic-bezier(.175, .885, .32, 1)
    }
}

.zoomOutUp {
    animation-name: zoomOutUp
}

@keyframes slideInDown {
    0% {
        transform: translate3d(0, -100%, 0);
        visibility: visible
    }

    to {
        transform: translateZ(0)
    }
}

.slideInDown {
    animation-name: slideInDown
}

@keyframes slideInLeft {
    0% {
        transform: translate3d(-100%, 0, 0);
        visibility: visible
    }

    to {
        transform: translateZ(0)
    }
}

.slideInLeft {
    animation-name: slideInLeft
}

@keyframes slideInRight {
    0% {
        transform: translate3d(100%, 0, 0);
        visibility: visible
    }

    to {
        transform: translateZ(0)
    }
}

.slideInRight {
    animation-name: slideInRight
}

@keyframes slideInUp {
    0% {
        transform: translate3d(0, 100%, 0);
        visibility: visible
    }

    to {
        transform: translateZ(0)
    }
}

.slideInUp {
    animation-name: slideInUp
}

@keyframes slideOutDown {
    0% {
        transform: translateZ(0)
    }

    to {
        visibility: hidden;
        transform: translate3d(0, 100%, 0)
    }
}

.slideOutDown {
    animation-name: slideOutDown
}

@keyframes slideOutLeft {
    0% {
        transform: translateZ(0)
    }

    to {
        visibility: hidden;
        transform: translate3d(-100%, 0, 0)
    }
}

.slideOutLeft {
    animation-name: slideOutLeft
}

@keyframes slideOutRight {
    0% {
        transform: translateZ(0)
    }

    to {
        visibility: hidden;
        transform: translate3d(100%, 0, 0)
    }
}

.slideOutRight {
    animation-name: slideOutRight
}

@keyframes slideOutUp {
    0% {
        transform: translateZ(0)
    }

    to {
        visibility: hidden;
        transform: translate3d(0, -100%, 0)
    }
}

.slideOutUp {
    animation-name: slideOutUp
}

/*! jQuery UI - v1.12.1 - 2017-10-08
* http://jqueryui.com
* Includes: draggable.css, core.css, resizable.css, selectable.css, sortable.css, accordion.css, autocomplete.css, menu.css, button.css, controlgroup.css, checkboxradio.css, datepicker.css, dialog.css, progressbar.css, selectmenu.css, slider.css, spinner.css, tabs.css, tooltip.css, theme.css
* To view and modify this theme, visit http://jqueryui.com/themeroller/?scope=&folderName=base&cornerRadiusShadow=8px&offsetLeftShadow=0px&offsetTopShadow=0px&thicknessShadow=5px&opacityShadow=30&bgImgOpacityShadow=0&bgTextureShadow=flat&bgColorShadow=666666&opacityOverlay=30&bgImgOpacityOverlay=0&bgTextureOverlay=flat&bgColorOverlay=aaaaaa&iconColorError=cc0000&fcError=5f3f3f&borderColorError=f1a899&bgTextureError=flat&bgColorError=fddfdf&iconColorHighlight=777620&fcHighlight=777620&borderColorHighlight=dad55e&bgTextureHighlight=flat&bgColorHighlight=fffa90&iconColorActive=ffffff&fcActive=ffffff&borderColorActive=003eff&bgTextureActive=flat&bgColorActive=007fff&iconColorHover=555555&fcHover=2b2b2b&borderColorHover=cccccc&bgTextureHover=flat&bgColorHover=ededed&iconColorDefault=777777&fcDefault=454545&borderColorDefault=c5c5c5&bgTextureDefault=flat&bgColorDefault=f6f6f6&iconColorContent=444444&fcContent=333333&borderColorContent=dddddd&bgTextureContent=flat&bgColorContent=ffffff&iconColorHeader=444444&fcHeader=333333&borderColorHeader=dddddd&bgTextureHeader=flat&bgColorHeader=e9e9e9&cornerRadius=3px&fwDefault=normal&fsDefault=1em&ffDefault=Arial%2CHelvetica%2Csans-serif
* Copyright jQuery Foundation and other contributors; Licensed MIT */
.ui-draggable-handle {
    -ms-touch-action: none;
    touch-action: none
}

.ui-helper-hidden {
    display: none
}

.ui-helper-hidden-accessible {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px
}

.ui-helper-reset {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    line-height: 1.3;
    text-decoration: none;
    font-size: 100%;
    list-style: none
}

.ui-helper-clearfix:after,
.ui-helper-clearfix:before {
    content: "";
    display: table;
    border-collapse: collapse
}

.ui-helper-clearfix:after {
    clear: both
}

.ui-helper-zfix {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    opacity: 0;
    filter: Alpha(Opacity=0)
}

.ui-front {
    z-index: 100
}

.ui-state-disabled {
    cursor: default !important;
    pointer-events: none
}

.ui-icon {
    display: inline-block;
    vertical-align: middle;
    margin-top: -.25em;
    position: relative;
    text-indent: -99999px;
    overflow: hidden;
    background-repeat: no-repeat
}

.ui-widget-icon-block {
    left: 50%;
    margin-left: -8px;
    display: block
}

.ui-widget-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.ui-resizable {
    position: relative
}

.ui-resizable-handle {
    position: absolute;
    font-size: .1px;
    display: block;
    -ms-touch-action: none;
    touch-action: none
}

.ui-resizable-autohide .ui-resizable-handle,
.ui-resizable-disabled .ui-resizable-handle {
    display: none
}

.ui-resizable-n {
    cursor: n-resize;
    height: 7px;
    width: 100%;
    top: -5px;
    left: 0
}

.ui-resizable-s {
    cursor: s-resize;
    height: 7px;
    width: 100%;
    bottom: -5px;
    left: 0
}

.ui-resizable-e {
    cursor: e-resize;
    width: 7px;
    right: -5px;
    top: 0;
    height: 100%
}

.ui-resizable-w {
    cursor: w-resize;
    width: 7px;
    left: -5px;
    top: 0;
    height: 100%
}

.ui-resizable-se {
    cursor: se-resize;
    width: 12px;
    height: 12px;
    right: 1px;
    bottom: 1px
}

.ui-resizable-sw {
    cursor: sw-resize;
    width: 9px;
    height: 9px;
    left: -5px;
    bottom: -5px
}

.ui-resizable-nw {
    cursor: nw-resize;
    width: 9px;
    height: 9px;
    left: -5px;
    top: -5px
}

.ui-resizable-ne {
    cursor: ne-resize;
    width: 9px;
    height: 9px;
    right: -5px;
    top: -5px
}

.ui-selectable {
    -ms-touch-action: none;
    touch-action: none
}

.ui-selectable-helper {
    position: absolute;
    z-index: 100;
    border: 1px dotted #000
}

.ui-sortable-handle {
    -ms-touch-action: none;
    touch-action: none
}

.ui-accordion .ui-accordion-header {
    display: block;
    cursor: pointer;
    position: relative;
    margin: 2px 0 0;
    padding: .5em .5em .5em .7em;
    font-size: 100%
}

.ui-accordion .ui-accordion-content {
    padding: 1em 2.2em;
    border-top: 0;
    overflow: auto
}

.ui-autocomplete {
    position: absolute;
    top: 0;
    left: 0;
    cursor: default
}

.ui-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: block;
    outline: 0
}

.ui-menu .ui-menu {
    position: absolute
}

.ui-menu .ui-menu-item {
    margin: 0;
    cursor: pointer;
    list-style-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7")
}

.ui-menu .ui-menu-item-wrapper {
    position: relative;
    padding: 3px 1em 3px .4em
}

.ui-menu .ui-menu-divider {
    margin: 5px 0;
    height: 0;
    font-size: 0;
    line-height: 0;
    border-width: 1px 0 0
}

.ui-menu .ui-state-active,
.ui-menu .ui-state-focus {
    margin: -1px
}

.ui-menu-icons {
    position: relative
}

.ui-menu-icons .ui-menu-item-wrapper {
    padding-left: 2em
}

.ui-menu .ui-icon {
    position: absolute;
    top: 0;
    bottom: 0;
    left: .2em;
    margin: auto 0
}

.ui-menu .ui-menu-icon {
    left: auto;
    right: 0
}

.ui-button {
    padding: .4em 1em;
    display: inline-block;
    position: relative;
    line-height: normal;
    margin-right: .1em;
    cursor: pointer;
    vertical-align: middle;
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    overflow: visible
}

.ui-button,
.ui-button:active,
.ui-button:hover,
.ui-button:link,
.ui-button:visited {
    text-decoration: none
}

.ui-button-icon-only {
    width: 2em;
    box-sizing: border-box;
    text-indent: -9999px;
    white-space: nowrap
}

input.ui-button.ui-button-icon-only {
    text-indent: 0
}

.ui-button-icon-only .ui-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -8px;
    margin-left: -8px
}

.ui-button.ui-icon-notext .ui-icon {
    padding: 0;
    width: 2.1em;
    height: 2.1em;
    text-indent: -9999px;
    white-space: nowrap
}

input.ui-button.ui-icon-notext .ui-icon {
    width: auto;
    height: auto;
    text-indent: 0;
    white-space: normal;
    padding: .4em 1em
}

button.ui-button::-moz-focus-inner,
input.ui-button::-moz-focus-inner {
    border: 0;
    padding: 0
}

.ui-controlgroup {
    vertical-align: middle;
    display: inline-block
}

.ui-controlgroup>.ui-controlgroup-item {
    float: left;
    margin-left: 0;
    margin-right: 0
}

.ui-controlgroup>.ui-controlgroup-item.ui-visual-focus,
.ui-controlgroup>.ui-controlgroup-item:focus {
    z-index: 9999
}

.ui-controlgroup-vertical>.ui-controlgroup-item {
    display: block;
    float: none;
    width: 100%;
    margin-top: 0;
    margin-bottom: 0;
    text-align: left
}

.ui-controlgroup-vertical .ui-controlgroup-item {
    box-sizing: border-box
}

.ui-controlgroup .ui-controlgroup-label {
    padding: .4em 1em
}

.ui-controlgroup .ui-controlgroup-label span {
    font-size: 80%
}

.ui-controlgroup-horizontal .ui-controlgroup-label+.ui-controlgroup-item {
    border-left: none
}

.ui-controlgroup-vertical .ui-controlgroup-label+.ui-controlgroup-item {
    border-top: none
}

.ui-controlgroup-horizontal .ui-controlgroup-label.ui-widget-content {
    border-right: none
}

.ui-controlgroup-vertical .ui-controlgroup-label.ui-widget-content {
    border-bottom: none
}

.ui-controlgroup-vertical .ui-spinner-input {
    width: 75%;
    width: calc(100% - 2.4em)
}

.ui-controlgroup-vertical .ui-spinner .ui-spinner-up {
    border-top-style: solid
}

.ui-checkboxradio-label .ui-icon-background {
    box-shadow: inset 1px 1px 1px #ccc;
    border-radius: .12em;
    border: none
}

.ui-checkboxradio-radio-label .ui-icon-background {
    width: 16px;
    height: 16px;
    border-radius: 1em;
    overflow: visible;
    border: none
}

.ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon,
.ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon {
    background-image: none;
    width: 8px;
    height: 8px;
    border-width: 4px;
    border-style: solid
}

.ui-checkboxradio-disabled {
    pointer-events: none
}

.ui-datepicker {
    width: 17em;
    padding: .2em .2em 0;
    display: none
}

.ui-datepicker .ui-datepicker-header {
    position: relative;
    padding: .2em 0
}

.ui-datepicker .ui-datepicker-next,
.ui-datepicker .ui-datepicker-prev {
    position: absolute;
    top: 2px;
    width: 1.8em;
    height: 1.8em
}

.ui-datepicker .ui-datepicker-next-hover,
.ui-datepicker .ui-datepicker-prev-hover {
    top: 1px
}

.ui-datepicker .ui-datepicker-prev {
    left: 2px
}

.ui-datepicker .ui-datepicker-next {
    right: 2px
}

.ui-datepicker .ui-datepicker-prev-hover {
    left: 1px
}

.ui-datepicker .ui-datepicker-next-hover {
    right: 1px
}

.ui-datepicker .ui-datepicker-next span,
.ui-datepicker .ui-datepicker-prev span {
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -8px;
    top: 50%;
    margin-top: -8px
}

.ui-datepicker .ui-datepicker-title {
    margin: 0 2.3em;
    line-height: 1.8em;
    text-align: center
}

.ui-datepicker .ui-datepicker-title select {
    font-size: 1em;
    margin: 1px 0
}

.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
    width: 45%
}

.ui-datepicker table {
    width: 100%;
    font-size: .9em;
    border-collapse: collapse;
    margin: 0 0 .4em
}

.ui-datepicker th {
    padding: .7em .3em;
    text-align: center;
    font-weight: 700;
    border: 0
}

.ui-datepicker td {
    border: 0;
    padding: 1px
}

.ui-datepicker td a,
.ui-datepicker td span {
    display: block;
    padding: .2em;
    text-align: right;
    text-decoration: none
}

.ui-datepicker .ui-datepicker-buttonpane {
    background-image: none;
    margin: .7em 0 0;
    padding: 0 .2em;
    border-left: 0;
    border-right: 0;
    border-bottom: 0
}

.ui-datepicker .ui-datepicker-buttonpane button {
    float: right;
    margin: .5em .2em .4em;
    cursor: pointer;
    padding: .2em .6em .3em;
    width: auto;
    overflow: visible
}

.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
    float: left
}

.ui-datepicker.ui-datepicker-multi {
    width: auto
}

.ui-datepicker-multi .ui-datepicker-group {
    float: left
}

.ui-datepicker-multi .ui-datepicker-group table {
    width: 95%;
    margin: 0 auto .4em
}

.ui-datepicker-multi-2 .ui-datepicker-group {
    width: 50%
}

.ui-datepicker-multi-3 .ui-datepicker-group {
    width: 33.3%
}

.ui-datepicker-multi-4 .ui-datepicker-group {
    width: 25%
}

.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
    border-left-width: 0
}

.ui-datepicker-multi .ui-datepicker-buttonpane {
    clear: left
}

.ui-datepicker-row-break {
    clear: both;
    width: 100%;
    font-size: 0
}

.ui-datepicker-rtl {
    direction: rtl
}

.ui-datepicker-rtl .ui-datepicker-prev {
    right: 2px;
    left: auto
}

.ui-datepicker-rtl .ui-datepicker-next {
    left: 2px;
    right: auto
}

.ui-datepicker-rtl .ui-datepicker-prev:hover {
    right: 1px;
    left: auto
}

.ui-datepicker-rtl .ui-datepicker-next:hover {
    left: 1px;
    right: auto
}

.ui-datepicker-rtl .ui-datepicker-buttonpane {
    clear: right
}

.ui-datepicker-rtl .ui-datepicker-buttonpane button {
    float: left
}

.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current,
.ui-datepicker-rtl .ui-datepicker-group {
    float: right
}

.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
    border-right-width: 0;
    border-left-width: 1px
}

.ui-datepicker .ui-icon {
    display: block;
    text-indent: -99999px;
    overflow: hidden;
    background-repeat: no-repeat;
    left: .5em;
    top: .3em
}

.ui-dialog {
    position: absolute;
    top: 0;
    left: 0;
    padding: .2em;
    outline: 0
}

.ui-dialog .ui-dialog-titlebar {
    padding: .4em 1em;
    position: relative
}

.ui-dialog .ui-dialog-title {
    float: left;
    margin: .1em 0;
    white-space: nowrap;
    width: 90%;
    overflow: hidden;
    text-overflow: ellipsis
}

.ui-dialog .ui-dialog-titlebar-close {
    position: absolute;
    right: .3em;
    top: 50%;
    width: 20px;
    margin: -10px 0 0;
    padding: 1px;
    height: 20px
}

.ui-dialog .ui-dialog-content {
    position: relative;
    border: 0;
    padding: .5em 1em;
    background: none;
    overflow: auto
}

.ui-dialog .ui-dialog-buttonpane {
    text-align: left;
    border-width: 1px 0 0;
    background-image: none;
    margin-top: .5em;
    padding: .3em 1em .5em .4em
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
    float: right
}

.ui-dialog .ui-dialog-buttonpane button {
    margin: .5em .4em .5em 0;
    cursor: pointer
}

.ui-dialog .ui-resizable-n {
    height: 2px;
    top: 0
}

.ui-dialog .ui-resizable-e {
    width: 2px;
    right: 0
}

.ui-dialog .ui-resizable-s {
    height: 2px;
    bottom: 0
}

.ui-dialog .ui-resizable-w {
    width: 2px;
    left: 0
}

.ui-dialog .ui-resizable-ne,
.ui-dialog .ui-resizable-nw,
.ui-dialog .ui-resizable-se,
.ui-dialog .ui-resizable-sw {
    width: 7px;
    height: 7px
}

.ui-dialog .ui-resizable-se {
    right: 0;
    bottom: 0
}

.ui-dialog .ui-resizable-sw {
    left: 0;
    bottom: 0
}

.ui-dialog .ui-resizable-ne {
    right: 0;
    top: 0
}

.ui-dialog .ui-resizable-nw {
    left: 0;
    top: 0
}

.ui-draggable .ui-dialog-titlebar {
    cursor: move
}

.ui-progressbar {
    height: 2em;
    text-align: left;
    overflow: hidden
}

.ui-progressbar .ui-progressbar-value {
    margin: -1px;
    height: 100%
}

.ui-progressbar .ui-progressbar-overlay {
    background: url("data:image/gif;base64,R0lGODlhKAAoAIABAAAAAP///yH/C05FVFNDQVBFMi4wAwEAAAAh+QQJAQABACwAAAAAKAAoAAACkYwNqXrdC52DS06a7MFZI+4FHBCKoDeWKXqymPqGqxvJrXZbMx7Ttc+w9XgU2FB3lOyQRWET2IFGiU9m1frDVpxZZc6bfHwv4c1YXP6k1Vdy292Fb6UkuvFtXpvWSzA+HycXJHUXiGYIiMg2R6W459gnWGfHNdjIqDWVqemH2ekpObkpOlppWUqZiqr6edqqWQAAIfkECQEAAQAsAAAAACgAKAAAApSMgZnGfaqcg1E2uuzDmmHUBR8Qil95hiPKqWn3aqtLsS18y7G1SzNeowWBENtQd+T1JktP05nzPTdJZlR6vUxNWWjV+vUWhWNkWFwxl9VpZRedYcflIOLafaa28XdsH/ynlcc1uPVDZxQIR0K25+cICCmoqCe5mGhZOfeYSUh5yJcJyrkZWWpaR8doJ2o4NYq62lAAACH5BAkBAAEALAAAAAAoACgAAAKVDI4Yy22ZnINRNqosw0Bv7i1gyHUkFj7oSaWlu3ovC8GxNso5fluz3qLVhBVeT/Lz7ZTHyxL5dDalQWPVOsQWtRnuwXaFTj9jVVh8pma9JjZ4zYSj5ZOyma7uuolffh+IR5aW97cHuBUXKGKXlKjn+DiHWMcYJah4N0lYCMlJOXipGRr5qdgoSTrqWSq6WFl2ypoaUAAAIfkECQEAAQAsAAAAACgAKAAAApaEb6HLgd/iO7FNWtcFWe+ufODGjRfoiJ2akShbueb0wtI50zm02pbvwfWEMWBQ1zKGlLIhskiEPm9R6vRXxV4ZzWT2yHOGpWMyorblKlNp8HmHEb/lCXjcW7bmtXP8Xt229OVWR1fod2eWqNfHuMjXCPkIGNileOiImVmCOEmoSfn3yXlJWmoHGhqp6ilYuWYpmTqKUgAAIfkECQEAAQAsAAAAACgAKAAAApiEH6kb58biQ3FNWtMFWW3eNVcojuFGfqnZqSebuS06w5V80/X02pKe8zFwP6EFWOT1lDFk8rGERh1TTNOocQ61Hm4Xm2VexUHpzjymViHrFbiELsefVrn6XKfnt2Q9G/+Xdie499XHd2g4h7ioOGhXGJboGAnXSBnoBwKYyfioubZJ2Hn0RuRZaflZOil56Zp6iioKSXpUAAAh+QQJAQABACwAAAAAKAAoAAACkoQRqRvnxuI7kU1a1UU5bd5tnSeOZXhmn5lWK3qNTWvRdQxP8qvaC+/yaYQzXO7BMvaUEmJRd3TsiMAgswmNYrSgZdYrTX6tSHGZO73ezuAw2uxuQ+BbeZfMxsexY35+/Qe4J1inV0g4x3WHuMhIl2jXOKT2Q+VU5fgoSUI52VfZyfkJGkha6jmY+aaYdirq+lQAACH5BAkBAAEALAAAAAAoACgAAAKWBIKpYe0L3YNKToqswUlvznigd4wiR4KhZrKt9Upqip61i9E3vMvxRdHlbEFiEXfk9YARYxOZZD6VQ2pUunBmtRXo1Lf8hMVVcNl8JafV38aM2/Fu5V16Bn63r6xt97j09+MXSFi4BniGFae3hzbH9+hYBzkpuUh5aZmHuanZOZgIuvbGiNeomCnaxxap2upaCZsq+1kAACH5BAkBAAEALAAAAAAoACgAAAKXjI8By5zf4kOxTVrXNVlv1X0d8IGZGKLnNpYtm8Lr9cqVeuOSvfOW79D9aDHizNhDJidFZhNydEahOaDH6nomtJjp1tutKoNWkvA6JqfRVLHU/QUfau9l2x7G54d1fl995xcIGAdXqMfBNadoYrhH+Mg2KBlpVpbluCiXmMnZ2Sh4GBqJ+ckIOqqJ6LmKSllZmsoq6wpQAAAh+QQJAQABACwAAAAAKAAoAAAClYx/oLvoxuJDkU1a1YUZbJ59nSd2ZXhWqbRa2/gF8Gu2DY3iqs7yrq+xBYEkYvFSM8aSSObE+ZgRl1BHFZNr7pRCavZ5BW2142hY3AN/zWtsmf12p9XxxFl2lpLn1rseztfXZjdIWIf2s5dItwjYKBgo9yg5pHgzJXTEeGlZuenpyPmpGQoKOWkYmSpaSnqKileI2FAAACH5BAkBAAEALAAAAAAoACgAAAKVjB+gu+jG4kORTVrVhRlsnn2dJ3ZleFaptFrb+CXmO9OozeL5VfP99HvAWhpiUdcwkpBH3825AwYdU8xTqlLGhtCosArKMpvfa1mMRae9VvWZfeB2XfPkeLmm18lUcBj+p5dnN8jXZ3YIGEhYuOUn45aoCDkp16hl5IjYJvjWKcnoGQpqyPlpOhr3aElaqrq56Bq7VAAAOw==");
    height: 100%;
    filter: alpha(opacity=25);
    opacity: .25
}

.ui-progressbar-indeterminate .ui-progressbar-value {
    background-image: none
}

.ui-selectmenu-menu {
    padding: 0;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    display: none
}

.ui-selectmenu-menu .ui-menu {
    overflow: auto;
    overflow-x: hidden;
    padding-bottom: 1px
}

.ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup {
    font-size: 1em;
    font-weight: 700;
    line-height: 1.5;
    padding: 2px .4em;
    margin: .5em 0 0;
    height: auto;
    border: 0
}

.ui-selectmenu-open {
    display: block
}

.ui-selectmenu-text {
    display: block;
    margin-right: 20px;
    overflow: hidden;
    text-overflow: ellipsis
}

.ui-selectmenu-button.ui-button {
    text-align: left;
    white-space: nowrap;
    width: 14em
}

.ui-selectmenu-icon.ui-icon {
    float: right;
    margin-top: 0
}

.ui-slider {
    position: relative;
    text-align: left
}

.ui-slider .ui-slider-handle {
    position: absolute;
    z-index: 2;
    width: 1.2em;
    height: 1.2em;
    cursor: default;
    -ms-touch-action: none;
    touch-action: none
}

.ui-slider .ui-slider-range {
    position: absolute;
    z-index: 1;
    font-size: .7em;
    display: block;
    border: 0;
    background-position: 0 0
}

.ui-slider.ui-state-disabled .ui-slider-handle,
.ui-slider.ui-state-disabled .ui-slider-range {
    filter: inherit
}

.ui-slider-horizontal {
    height: .8em
}

.ui-slider-horizontal .ui-slider-handle {
    top: -.3em;
    margin-left: -.6em
}

.ui-slider-horizontal .ui-slider-range {
    top: 0;
    height: 100%
}

.ui-slider-horizontal .ui-slider-range-min {
    left: 0
}

.ui-slider-horizontal .ui-slider-range-max {
    right: 0
}

.ui-slider-vertical {
    width: .8em;
    height: 100px
}

.ui-slider-vertical .ui-slider-handle {
    left: -.3em;
    margin-left: 0;
    margin-bottom: -.6em
}

.ui-slider-vertical .ui-slider-range {
    left: 0;
    width: 100%
}

.ui-slider-vertical .ui-slider-range-min {
    bottom: 0
}

.ui-slider-vertical .ui-slider-range-max {
    top: 0
}

.ui-spinner {
    position: relative;
    display: inline-block;
    overflow: hidden;
    padding: 0;
    vertical-align: middle
}

.ui-spinner-input {
    border: none;
    background: none;
    color: inherit;
    padding: .222em 0;
    margin: .2em 0;
    vertical-align: middle;
    margin-left: .4em;
    margin-right: 2em
}

.ui-spinner-button {
    width: 1.6em;
    height: 50%;
    font-size: .5em;
    padding: 0;
    margin: 0;
    text-align: center;
    position: absolute;
    cursor: default;
    display: block;
    overflow: hidden;
    right: 0
}

.ui-spinner a.ui-spinner-button {
    border-top-style: none;
    border-bottom-style: none;
    border-right-style: none
}

.ui-spinner-up {
    top: 0
}

.ui-spinner-down {
    bottom: 0
}

.ui-tooltip {
    padding: 8px;
    position: absolute;
    z-index: 9999;
    max-width: 300px
}

body .ui-tooltip {
    border-width: 2px
}

/*!
 * jQuery UI CSS Framework 1.12.1
 * http://jqueryui.com
 *
 * Copyright jQuery Foundation and other contributors
 * Released under the MIT license.
 * http://jquery.org/license
 *
 * http://api.jqueryui.com/category/theming/
 *
 * To view and modify this theme, visit http://jqueryui.com/themeroller/?scope=&folderName=base&cornerRadiusShadow=8px&offsetLeftShadow=0px&offsetTopShadow=0px&thicknessShadow=5px&opacityShadow=30&bgImgOpacityShadow=0&bgTextureShadow=flat&bgColorShadow=666666&opacityOverlay=30&bgImgOpacityOverlay=0&bgTextureOverlay=flat&bgColorOverlay=aaaaaa&iconColorError=cc0000&fcError=5f3f3f&borderColorError=f1a899&bgTextureError=flat&bgColorError=fddfdf&iconColorHighlight=777620&fcHighlight=777620&borderColorHighlight=dad55e&bgTextureHighlight=flat&bgColorHighlight=fffa90&iconColorActive=ffffff&fcActive=ffffff&borderColorActive=003eff&bgTextureActive=flat&bgColorActive=007fff&iconColorHover=555555&fcHover=2b2b2b&borderColorHover=cccccc&bgTextureHover=flat&bgColorHover=ededed&iconColorDefault=777777&fcDefault=454545&borderColorDefault=c5c5c5&bgTextureDefault=flat&bgColorDefault=f6f6f6&iconColorContent=444444&fcContent=333333&borderColorContent=dddddd&bgTextureContent=flat&bgColorContent=ffffff&iconColorHeader=444444&fcHeader=333333&borderColorHeader=dddddd&bgTextureHeader=flat&bgColorHeader=e9e9e9&cornerRadius=3px&fwDefault=normal&fsDefault=1em&ffDefault=Arial%2CHelvetica%2Csans-serif
 */
.ui-widget {
    font-family: Arial, Helvetica, sans-serif
}

.ui-widget,
.ui-widget .ui-widget {
    font-size: 1em
}

.ui-widget button,
.ui-widget input,
.ui-widget select,
.ui-widget textarea {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em
}

.ui-widget.ui-widget-content {
    border: 1px solid #c5c5c5
}

.ui-widget-content {
    border: 1px solid #ddd;
    background: #fff;
    color: #333
}

.ui-widget-header {
    border: 1px solid #ddd;
    background: #e9e9e9;
    color: #333;
    font-weight: 700
}

.ui-widget-header a {
    color: #333
}

.ui-button,
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
html .ui-button.ui-state-disabled:active,
html .ui-button.ui-state-disabled:hover {
    border: 1px solid #c5c5c5;
    background: #f6f6f6;
    font-weight: 400;
    color: #454545
}

.ui-button,
.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited,
a.ui-button,
a:link.ui-button,
a:visited.ui-button {
    color: #454545;
    text-decoration: none
}

.ui-button:focus,
.ui-button:hover,
.ui-state-focus,
.ui-state-hover,
.ui-widget-content .ui-state-focus,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-focus,
.ui-widget-header .ui-state-hover {
    border: 1px solid #ccc;
    background: #ededed;
    font-weight: 400;
    color: #2b2b2b
}

.ui-state-focus a,
.ui-state-focus a:hover,
.ui-state-focus a:link,
.ui-state-focus a:visited,
.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited,
a.ui-button:focus,
a.ui-button:hover {
    color: #2b2b2b;
    text-decoration: none
}

.ui-visual-focus {
    box-shadow: 0 0 3px 1px #5e9ed6
}

.ui-button.ui-state-active:hover,
.ui-button:active,
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active {
    border: 1px solid #003eff;
    background: #007fff;
    font-weight: 400;
    color: #fff
}

.ui-icon-background,
.ui-state-active .ui-icon-background {
    border: #003eff;
    background-color: #fff
}

.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
    color: #fff;
    text-decoration: none
}

.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
    border: 1px solid #dad55e;
    background: #fffa90;
    color: #777620
}

.ui-state-checked {
    border: 1px solid #dad55e;
    background: #fffa90
}

.ui-state-highlight a,
.ui-widget-content .ui-state-highlight a,
.ui-widget-header .ui-state-highlight a {
    color: #777620
}

.ui-state-error,
.ui-widget-content .ui-state-error,
.ui-widget-header .ui-state-error {
    border: 1px solid #f1a899;
    background: #fddfdf;
    color: #5f3f3f
}

.ui-state-error-text,
.ui-state-error a,
.ui-widget-content .ui-state-error-text,
.ui-widget-content .ui-state-error a,
.ui-widget-header .ui-state-error-text,
.ui-widget-header .ui-state-error a {
    color: #5f3f3f
}

.ui-priority-primary,
.ui-widget-content .ui-priority-primary,
.ui-widget-header .ui-priority-primary {
    font-weight: 700
}

.ui-priority-secondary,
.ui-widget-content .ui-priority-secondary,
.ui-widget-header .ui-priority-secondary {
    opacity: .7;
    filter: Alpha(Opacity=70);
    font-weight: 400
}

.ui-state-disabled,
.ui-widget-content .ui-state-disabled,
.ui-widget-header .ui-state-disabled {
    opacity: .35;
    filter: Alpha(Opacity=35);
    background-image: none
}

.ui-state-disabled .ui-icon {
    filter: Alpha(Opacity=35)
}

.ui-icon {
    width: 16px;
    height: 16px
}

.ui-icon-blank {
    background-position: 16px 16px
}

.ui-icon-caret-1-n {
    background-position: 0 0
}

.ui-icon-caret-1-ne {
    background-position: -16px 0
}

.ui-icon-caret-1-e {
    background-position: -32px 0
}

.ui-icon-caret-1-se {
    background-position: -48px 0
}

.ui-icon-caret-1-s {
    background-position: -65px 0
}

.ui-icon-caret-1-sw {
    background-position: -80px 0
}

.ui-icon-caret-1-w {
    background-position: -96px 0
}

.ui-icon-caret-1-nw {
    background-position: -112px 0
}

.ui-icon-caret-2-n-s {
    background-position: -128px 0
}

.ui-icon-caret-2-e-w {
    background-position: -144px 0
}

.ui-icon-triangle-1-n {
    background-position: 0 -16px
}

.ui-icon-triangle-1-ne {
    background-position: -16px -16px
}

.ui-icon-triangle-1-e {
    background-position: -32px -16px
}

.ui-icon-triangle-1-se {
    background-position: -48px -16px
}

.ui-icon-triangle-1-s {
    background-position: -65px -16px
}

.ui-icon-triangle-1-sw {
    background-position: -80px -16px
}

.ui-icon-triangle-1-w {
    background-position: -96px -16px
}

.ui-icon-triangle-1-nw {
    background-position: -112px -16px
}

.ui-icon-triangle-2-n-s {
    background-position: -128px -16px
}

.ui-icon-triangle-2-e-w {
    background-position: -144px -16px
}

.ui-icon-arrow-1-n {
    background-position: 0 -32px
}

.ui-icon-arrow-1-ne {
    background-position: -16px -32px
}

.ui-icon-arrow-1-e {
    background-position: -32px -32px
}

.ui-icon-arrow-1-se {
    background-position: -48px -32px
}

.ui-icon-arrow-1-s {
    background-position: -65px -32px
}

.ui-icon-arrow-1-sw {
    background-position: -80px -32px
}

.ui-icon-arrow-1-w {
    background-position: -96px -32px
}

.ui-icon-arrow-1-nw {
    background-position: -112px -32px
}

.ui-icon-arrow-2-n-s {
    background-position: -128px -32px
}

.ui-icon-arrow-2-ne-sw {
    background-position: -144px -32px
}

.ui-icon-arrow-2-e-w {
    background-position: -160px -32px
}

.ui-icon-arrow-2-se-nw {
    background-position: -176px -32px
}

.ui-icon-arrowstop-1-n {
    background-position: -192px -32px
}

.ui-icon-arrowstop-1-e {
    background-position: -208px -32px
}

.ui-icon-arrowstop-1-s {
    background-position: -224px -32px
}

.ui-icon-arrowstop-1-w {
    background-position: -240px -32px
}

.ui-icon-arrowthick-1-n {
    background-position: 1px -48px
}

.ui-icon-arrowthick-1-ne {
    background-position: -16px -48px
}

.ui-icon-arrowthick-1-e {
    background-position: -32px -48px
}

.ui-icon-arrowthick-1-se {
    background-position: -48px -48px
}

.ui-icon-arrowthick-1-s {
    background-position: -64px -48px
}

.ui-icon-arrowthick-1-sw {
    background-position: -80px -48px
}

.ui-icon-arrowthick-1-w {
    background-position: -96px -48px
}

.ui-icon-arrowthick-1-nw {
    background-position: -112px -48px
}

.ui-icon-arrowthick-2-n-s {
    background-position: -128px -48px
}

.ui-icon-arrowthick-2-ne-sw {
    background-position: -144px -48px
}

.ui-icon-arrowthick-2-e-w {
    background-position: -160px -48px
}

.ui-icon-arrowthick-2-se-nw {
    background-position: -176px -48px
}

.ui-icon-arrowthickstop-1-n {
    background-position: -192px -48px
}

.ui-icon-arrowthickstop-1-e {
    background-position: -208px -48px
}

.ui-icon-arrowthickstop-1-s {
    background-position: -224px -48px
}

.ui-icon-arrowthickstop-1-w {
    background-position: -240px -48px
}

.ui-icon-arrowreturnthick-1-w {
    background-position: 0 -64px
}

.ui-icon-arrowreturnthick-1-n {
    background-position: -16px -64px
}

.ui-icon-arrowreturnthick-1-e {
    background-position: -32px -64px
}

.ui-icon-arrowreturnthick-1-s {
    background-position: -48px -64px
}

.ui-icon-arrowreturn-1-w {
    background-position: -64px -64px
}

.ui-icon-arrowreturn-1-n {
    background-position: -80px -64px
}

.ui-icon-arrowreturn-1-e {
    background-position: -96px -64px
}

.ui-icon-arrowreturn-1-s {
    background-position: -112px -64px
}

.ui-icon-arrowrefresh-1-w {
    background-position: -128px -64px
}

.ui-icon-arrowrefresh-1-n {
    background-position: -144px -64px
}

.ui-icon-arrowrefresh-1-e {
    background-position: -160px -64px
}

.ui-icon-arrowrefresh-1-s {
    background-position: -176px -64px
}

.ui-icon-arrow-4 {
    background-position: 0 -80px
}

.ui-icon-arrow-4-diag {
    background-position: -16px -80px
}

.ui-icon-extlink {
    background-position: -32px -80px
}

.ui-icon-newwin {
    background-position: -48px -80px
}

.ui-icon-refresh {
    background-position: -64px -80px
}

.ui-icon-shuffle {
    background-position: -80px -80px
}

.ui-icon-transfer-e-w {
    background-position: -96px -80px
}

.ui-icon-transferthick-e-w {
    background-position: -112px -80px
}

.ui-icon-folder-collapsed {
    background-position: 0 -96px
}

.ui-icon-folder-open {
    background-position: -16px -96px
}

.ui-icon-document {
    background-position: -32px -96px
}

.ui-icon-document-b {
    background-position: -48px -96px
}

.ui-icon-note {
    background-position: -64px -96px
}

.ui-icon-mail-closed {
    background-position: -80px -96px
}

.ui-icon-mail-open {
    background-position: -96px -96px
}

.ui-icon-suitcase {
    background-position: -112px -96px
}

.ui-icon-comment {
    background-position: -128px -96px
}

.ui-icon-person {
    background-position: -144px -96px
}

.ui-icon-print {
    background-position: -160px -96px
}

.ui-icon-trash {
    background-position: -176px -96px
}

.ui-icon-locked {
    background-position: -192px -96px
}

.ui-icon-unlocked {
    background-position: -208px -96px
}

.ui-icon-bookmark {
    background-position: -224px -96px
}

.ui-icon-tag {
    background-position: -240px -96px
}

.ui-icon-home {
    background-position: 0 -112px
}

.ui-icon-flag {
    background-position: -16px -112px
}

.ui-icon-calendar {
    background-position: -32px -112px
}

.ui-icon-cart {
    background-position: -48px -112px
}

.ui-icon-pencil {
    background-position: -64px -112px
}

.ui-icon-clock {
    background-position: -80px -112px
}

.ui-icon-disk {
    background-position: -96px -112px
}

.ui-icon-calculator {
    background-position: -112px -112px
}

.ui-icon-zoomin {
    background-position: -128px -112px
}

.ui-icon-zoomout {
    background-position: -144px -112px
}

.ui-icon-search {
    background-position: -160px -112px
}

.ui-icon-wrench {
    background-position: -176px -112px
}

.ui-icon-gear {
    background-position: -192px -112px
}

.ui-icon-heart {
    background-position: -208px -112px
}

.ui-icon-star {
    background-position: -224px -112px
}

.ui-icon-link {
    background-position: -240px -112px
}

.ui-icon-cancel {
    background-position: 0 -128px
}

.ui-icon-plus {
    background-position: -16px -128px
}

.ui-icon-plusthick {
    background-position: -32px -128px
}

.ui-icon-minus {
    background-position: -48px -128px
}

.ui-icon-minusthick {
    background-position: -64px -128px
}

.ui-icon-close {
    background-position: -80px -128px
}

.ui-icon-closethick {
    background-position: -96px -128px
}

.ui-icon-key {
    background-position: -112px -128px
}

.ui-icon-lightbulb {
    background-position: -128px -128px
}

.ui-icon-scissors {
    background-position: -144px -128px
}

.ui-icon-clipboard {
    background-position: -160px -128px
}

.ui-icon-copy {
    background-position: -176px -128px
}

.ui-icon-contact {
    background-position: -192px -128px
}

.ui-icon-image {
    background-position: -208px -128px
}

.ui-icon-video {
    background-position: -224px -128px
}

.ui-icon-script {
    background-position: -240px -128px
}

.ui-icon-alert {
    background-position: 0 -144px
}

.ui-icon-info {
    background-position: -16px -144px
}

.ui-icon-notice {
    background-position: -32px -144px
}

.ui-icon-help {
    background-position: -48px -144px
}

.ui-icon-check {
    background-position: -64px -144px
}

.ui-icon-bullet {
    background-position: -80px -144px
}

.ui-icon-radio-on {
    background-position: -96px -144px
}

.ui-icon-radio-off {
    background-position: -112px -144px
}

.ui-icon-pin-w {
    background-position: -128px -144px
}

.ui-icon-pin-s {
    background-position: -144px -144px
}

.ui-icon-play {
    background-position: 0 -160px
}

.ui-icon-pause {
    background-position: -16px -160px
}

.ui-icon-seek-next {
    background-position: -32px -160px
}

.ui-icon-seek-prev {
    background-position: -48px -160px
}

.ui-icon-seek-end {
    background-position: -64px -160px
}

.ui-icon-seek-first,
.ui-icon-seek-start {
    background-position: -80px -160px
}

.ui-icon-stop {
    background-position: -96px -160px
}

.ui-icon-eject {
    background-position: -112px -160px
}

.ui-icon-volume-off {
    background-position: -128px -160px
}

.ui-icon-volume-on {
    background-position: -144px -160px
}

.ui-icon-power {
    background-position: 0 -176px
}

.ui-icon-signal-diag {
    background-position: -16px -176px
}

.ui-icon-signal {
    background-position: -32px -176px
}

.ui-icon-battery-0 {
    background-position: -48px -176px
}

.ui-icon-battery-1 {
    background-position: -64px -176px
}

.ui-icon-battery-2 {
    background-position: -80px -176px
}

.ui-icon-battery-3 {
    background-position: -96px -176px
}

.ui-icon-circle-plus {
    background-position: 0 -192px
}

.ui-icon-circle-minus {
    background-position: -16px -192px
}

.ui-icon-circle-close {
    background-position: -32px -192px
}

.ui-icon-circle-triangle-e {
    background-position: -48px -192px
}

.ui-icon-circle-triangle-s {
    background-position: -64px -192px
}

.ui-icon-circle-triangle-w {
    background-position: -80px -192px
}

.ui-icon-circle-triangle-n {
    background-position: -96px -192px
}

.ui-icon-circle-arrow-e {
    background-position: -112px -192px
}

.ui-icon-circle-arrow-s {
    background-position: -128px -192px
}

.ui-icon-circle-arrow-w {
    background-position: -144px -192px
}

.ui-icon-circle-arrow-n {
    background-position: -160px -192px
}

.ui-icon-circle-zoomin {
    background-position: -176px -192px
}

.ui-icon-circle-zoomout {
    background-position: -192px -192px
}

.ui-icon-circle-check {
    background-position: -208px -192px
}

.ui-icon-circlesmall-plus {
    background-position: 0 -208px
}

.ui-icon-circlesmall-minus {
    background-position: -16px -208px
}

.ui-icon-circlesmall-close {
    background-position: -32px -208px
}

.ui-icon-squaresmall-plus {
    background-position: -48px -208px
}

.ui-icon-squaresmall-minus {
    background-position: -64px -208px
}

.ui-icon-squaresmall-close {
    background-position: -80px -208px
}

.ui-icon-grip-dotted-vertical {
    background-position: 0 -224px
}

.ui-icon-grip-dotted-horizontal {
    background-position: -16px -224px
}

.ui-icon-grip-solid-vertical {
    background-position: -32px -224px
}

.ui-icon-grip-solid-horizontal {
    background-position: -48px -224px
}

.ui-icon-gripsmall-diagonal-se {
    background-position: -64px -224px
}

.ui-icon-grip-diagonal-se {
    background-position: -80px -224px
}

.ui-corner-all,
.ui-corner-left,
.ui-corner-tl,
.ui-corner-top {
    border-top-left-radius: 3px
}

.ui-corner-all,
.ui-corner-right,
.ui-corner-top,
.ui-corner-tr {
    border-top-right-radius: 3px
}

.ui-corner-all,
.ui-corner-bl,
.ui-corner-bottom,
.ui-corner-left {
    border-bottom-left-radius: 3px
}

.ui-corner-all,
.ui-corner-bottom,
.ui-corner-br,
.ui-corner-right {
    border-bottom-right-radius: 3px
}

.ui-widget-overlay {
    background: #aaa;
    opacity: .3;
    filter: Alpha(Opacity=30)
}

.ui-widget-shadow {
    box-shadow: 0 0 5px #666
}

.mfp-bg {
    z-index: 1042;
    overflow: hidden;
    background: #0b0b0b;
    opacity: .8;
    filter: alpha(opacity=80)
}

.mfp-bg,
.mfp-wrap {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: fixed
}

.mfp-wrap {
    z-index: 1043;
    outline: none !important;
    -webkit-backface-visibility: hidden
}

.mfp-container {
    text-align: center;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    padding: 0 8px;
    box-sizing: border-box
}

.mfp-container:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle
}

.mfp-align-top .mfp-container:before {
    display: none
}

.mfp-content {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin: 0 auto;
    text-align: left;
    z-index: 1045
}

.mfp-ajax-holder .mfp-content,
.mfp-inline-holder .mfp-content {
    width: 100%;
    cursor: auto
}

.mfp-ajax-cur {
    cursor: progress
}

.mfp-zoom-out-cur,
.mfp-zoom-out-cur .mfp-image-holder .mfp-close {
    cursor: zoom-out
}

.mfp-zoom {
    cursor: pointer;
    cursor: zoom-in
}

.mfp-auto-cursor .mfp-content {
    cursor: auto
}

.mfp-arrow,
.mfp-close,
.mfp-counter,
.mfp-preloader {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.mfp-loading.mfp-figure {
    display: none
}

.mfp-hide {
    display: none !important
}

.mfp-preloader {
    color: #ccc;
    position: absolute;
    top: 50%;
    width: auto;
    text-align: center;
    margin-top: -.8em;
    left: 8px;
    right: 8px;
    z-index: 1044
}

.mfp-preloader a {
    color: #ccc
}

.mfp-preloader a:hover {
    color: #fff
}

.mfp-s-error .mfp-content,
.mfp-s-ready .mfp-preloader {
    display: none
}

button.mfp-arrow,
button.mfp-close {
    overflow: visible;
    cursor: pointer;
    background: transparent;
    border: 0;
    -webkit-appearance: none;
    display: block;
    outline: none;
    padding: 0;
    z-index: 1046;
    box-shadow: none
}

button::-moz-focus-inner {
    padding: 0;
    border: 0
}

.mfp-close {
    width: 44px;
    height: 44px;
    line-height: 44px;
    position: absolute;
    right: 0;
    top: 0;
    text-decoration: none;
    text-align: center;
    opacity: .65;
    filter: alpha(opacity=65);
    padding: 0 0 18px 10px;
    color: #fff;
    font-style: normal;
    font-size: 28px;
    font-family: Arial, Baskerville, monospace
}

.mfp-close:focus,
.mfp-close:hover {
    opacity: 1;
    filter: alpha(opacity=100)
}

.mfp-close:active {
    top: 1px
}

.mfp-close-btn-in .mfp-close {
    color: #333
}

.mfp-iframe-holder .mfp-close,
.mfp-image-holder .mfp-close {
    color: #fff;
    right: -6px;
    text-align: right;
    padding-right: 6px;
    width: 100%
}

.mfp-counter {
    position: absolute;
    top: 0;
    right: 0;
    color: #ccc;
    font-size: 12px;
    line-height: 18px;
    white-space: nowrap
}

.mfp-arrow {
    position: absolute;
    opacity: .65;
    filter: alpha(opacity=65);
    margin: 0;
    top: 50%;
    margin-top: -55px;
    padding: 0;
    width: 90px;
    height: 110px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.mfp-arrow:active {
    margin-top: -54px
}

.mfp-arrow:focus,
.mfp-arrow:hover {
    opacity: 1;
    filter: alpha(opacity=100)
}

.mfp-arrow .mfp-a,
.mfp-arrow .mfp-b,
.mfp-arrow:after,
.mfp-arrow:before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    left: 0;
    top: 0;
    margin-top: 35px;
    margin-left: 35px;
    border: medium inset transparent
}

.mfp-arrow .mfp-a,
.mfp-arrow:after {
    border-top-width: 13px;
    border-bottom-width: 13px;
    top: 8px
}

.mfp-arrow .mfp-b,
.mfp-arrow:before {
    border-top-width: 21px;
    border-bottom-width: 21px;
    opacity: .7
}

.mfp-arrow-left {
    left: 0
}

.mfp-arrow-left .mfp-a,
.mfp-arrow-left:after {
    border-right: 17px solid #fff;
    margin-left: 31px
}

.mfp-arrow-left .mfp-b,
.mfp-arrow-left:before {
    margin-left: 25px;
    border-right: 27px solid #3f3f3f
}

.mfp-arrow-right {
    right: 0
}

.mfp-arrow-right .mfp-a,
.mfp-arrow-right:after {
    border-left: 17px solid #fff;
    margin-left: 39px
}

.mfp-arrow-right .mfp-b,
.mfp-arrow-right:before {
    border-left: 27px solid #3f3f3f
}

.mfp-iframe-holder {
    padding-top: 40px;
    padding-bottom: 40px
}

.mfp-iframe-holder .mfp-content {
    line-height: 0;
    width: 100%;
    max-width: 900px
}

.mfp-iframe-holder .mfp-close {
    top: -40px
}

.mfp-iframe-scaler {
    width: 100%;
    height: 0;
    overflow: hidden;
    padding-top: 56.25%
}

.mfp-iframe-scaler iframe {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 8px rgba(0, 0, 0, .6);
    background: #000
}

img.mfp-img {
    width: auto;
    max-width: 100%;
    height: auto;
    display: block;
    box-sizing: border-box;
    padding: 40px 0;
    margin: 0 auto
}

.mfp-figure,
img.mfp-img {
    line-height: 0
}

.mfp-figure:after {
    content: "";
    position: absolute;
    left: 0;
    top: 40px;
    bottom: 40px;
    display: block;
    right: 0;
    width: auto;
    height: auto;
    z-index: -1;
    box-shadow: 0 0 8px rgba(0, 0, 0, .6);
    background: #444
}

.mfp-figure small {
    color: #bdbdbd;
    display: block;
    font-size: 12px;
    line-height: 14px
}

.mfp-figure figure {
    margin: 0
}

.mfp-bottom-bar {
    margin-top: -36px;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    cursor: auto
}

.mfp-title {
    text-align: left;
    line-height: 18px;
    color: #f3f3f3;
    word-wrap: break-word;
    padding-right: 36px
}

.mfp-image-holder .mfp-content {
    max-width: 100%
}

.mfp-gallery .mfp-image-holder .mfp-figure {
    cursor: pointer
}

@media screen and (max-height:300px),
screen and (max-width:800px) and (orientation:landscape) {
    .mfp-img-mobile .mfp-image-holder {
        padding-left: 0;
        padding-right: 0
    }

    .mfp-img-mobile img.mfp-img {
        padding: 0
    }

    .mfp-img-mobile .mfp-figure:after {
        top: 0;
        bottom: 0
    }

    .mfp-img-mobile .mfp-figure small {
        display: inline;
        margin-left: 5px
    }

    .mfp-img-mobile .mfp-bottom-bar {
        background: rgba(0, 0, 0, .6);
        bottom: 0;
        margin: 0;
        top: auto;
        padding: 3px 5px;
        position: fixed;
        box-sizing: border-box
    }

    .mfp-img-mobile .mfp-bottom-bar:empty {
        padding: 0
    }

    .mfp-img-mobile .mfp-counter {
        right: 5px;
        top: 3px
    }

    .mfp-img-mobile .mfp-close {
        top: 0;
        right: 0;
        width: 35px;
        height: 35px;
        line-height: 35px;
        background: rgba(0, 0, 0, .6);
        position: fixed;
        text-align: center;
        padding: 0
    }
}

@media (max-width:900px) {
    .mfp-arrow {
        transform: scale(.75)
    }

    .mfp-arrow-left {
        transform-origin: 0
    }

    .mfp-arrow-right {
        transform-origin: 100%
    }

    .mfp-container {
        padding-left: 6px;
        padding-right: 6px
    }
}

.mfp-ie7 .mfp-img {
    padding: 0
}

.mfp-ie7 .mfp-bottom-bar {
    width: 600px;
    left: 50%;
    margin-left: -300px;
    margin-top: 5px;
    padding-bottom: 5px
}

.mfp-ie7 .mfp-container {
    padding: 0
}

.mfp-ie7 .mfp-content {
    padding-top: 44px
}

.mfp-ie7 .mfp-close {
    top: 0;
    right: 0;
    padding-top: 0
}

@keyframes hinge {
    0% {
        transform: rotate(0);
        transform-origin: top left;
        animation-timing-function: ease-in-out
    }

    20%,
    60% {
        transform: rotate(80deg);
        transform-origin: top left;
        animation-timing-function: ease-in-out
    }

    40% {
        transform: rotate(60deg);
        transform-origin: top left;
        animation-timing-function: ease-in-out
    }

    80% {
        transform: rotate(60deg) translateY(0);
        opacity: 1;
        transform-origin: top left;
        animation-timing-function: ease-in-out
    }

    to {
        transform: translateY(700px);
        opacity: 0
    }
}

.hinge {
    animation-duration: 1s;
    animation-name: hinge
}

.mfp-with-fade.mfp-bg,
.mfp-with-fade .mfp-content {
    opacity: 0;
    transition: opacity .5s ease-out
}

.mfp-with-fade.mfp-ready .mfp-content {
    opacity: 1
}

.mfp-with-fade.mfp-ready.mfp-bg {
    opacity: .8
}

.mfp-with-fade.mfp-removing.mfp-bg {
    opacity: 0
}

.mfp-zoom-in .mfp-with-anim {
    opacity: 0;
    transition: all .2s ease-in-out;
    transform: scale(.8)
}

.mfp-zoom-in.mfp-bg {
    opacity: 0;
    transition: all .3s ease-out
}

.mfp-zoom-in.mfp-ready .mfp-with-anim {
    opacity: 1;
    transform: scale(1)
}

.mfp-zoom-in.mfp-ready.mfp-bg {
    opacity: .8
}

.mfp-zoom-in.mfp-removing .mfp-with-anim {
    transform: scale(.8);
    opacity: 0
}

.mfp-zoom-in.mfp-removing.mfp-bg {
    opacity: 0
}

.mfp-with-zoom.mfp-bg,
.mfp-with-zoom .mfp-container {
    opacity: 0;
    -webkit-backface-visibility: hidden;
    transition: all .3s ease-out
}

.mfp-with-zoom.mfp-ready .mfp-container {
    opacity: 1
}

.mfp-with-zoom.mfp-ready.mfp-bg {
    opacity: .8
}

.mfp-with-zoom.mfp-removing.mfp-bg,
.mfp-with-zoom.mfp-removing .mfp-container {
    opacity: 0
}

.mfp-3d-unfold .mfp-content {
    perspective: 2000px
}

.mfp-3d-unfold .mfp-with-anim {
    opacity: 0;
    transition: all .3s ease-in-out;
    transform-style: preserve-3d;
    transform: rotateY(-60deg)
}

.mfp-3d-unfold.mfp-bg {
    opacity: 0;
    transition: all .5s
}

.mfp-3d-unfold.mfp-ready .mfp-with-anim {
    opacity: 1;
    transform: rotateY(0deg)
}

.mfp-3d-unfold.mfp-ready.mfp-bg {
    opacity: .8
}

.mfp-3d-unfold.mfp-removing .mfp-with-anim {
    transform: rotateY(60deg);
    opacity: 0
}

.mfp-3d-unfold.mfp-removing.mfp-bg {
    opacity: 0
}

table.dataTable {
    width: 100%;
    margin: 0 auto;
    clear: both;
    border-collapse: separate;
    border-spacing: 0
}

table.dataTable tfoot th,
table.dataTable thead th {
    font-weight: 700
}

table.dataTable thead td,
table.dataTable thead th {
    padding: 10px 18px;
    border-bottom: 1px solid #111
}

table.dataTable thead td:active,
table.dataTable thead th:active {
    outline: none
}

table.dataTable tfoot td,
table.dataTable tfoot th {
    padding: 10px 18px 6px;
    border-top: 1px solid #111
}

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_desc_disabled {
    cursor: pointer;
    *cursor: hand;
    background-repeat: no-repeat;
    background-position: 100%
}

table.dataTable thead .sorting {
    background-image: url(../images/sort_both.png)
}

table.dataTable thead .sorting_asc {
    background-image: url(../images/sort_asc.png)
}

table.dataTable thead .sorting_desc {
    background-image: url(../images/sort_desc.png)
}

table.dataTable thead .sorting_asc_disabled {
    background-image: url(../images/sort_asc_disabled.png)
}

table.dataTable thead .sorting_desc_disabled {
    background-image: url(../images/sort_desc_disabled.png)
}

table.dataTable tbody tr {
    background-color: #fff
}

table.dataTable tbody tr.selected {
    background-color: #b0bed9
}

table.dataTable tbody td,
table.dataTable tbody th {
    padding: 8px 10px
}

table.dataTable.display tbody td,
table.dataTable.display tbody th,
table.dataTable.row-border tbody td,
table.dataTable.row-border tbody th {
    border-top: 1px solid #ddd
}

table.dataTable.display tbody tr:first-child td,
table.dataTable.display tbody tr:first-child th,
table.dataTable.row-border tbody tr:first-child td,
table.dataTable.row-border tbody tr:first-child th {
    border-top: none
}

table.dataTable.cell-border tbody td,
table.dataTable.cell-border tbody th {
    border-top: 1px solid #ddd;
    border-right: 1px solid #ddd
}

table.dataTable.cell-border tbody tr td:first-child,
table.dataTable.cell-border tbody tr th:first-child {
    border-left: 1px solid #ddd
}

table.dataTable.cell-border tbody tr:first-child td,
table.dataTable.cell-border tbody tr:first-child th {
    border-top: none
}

table.dataTable.display tbody tr.odd,
table.dataTable.stripe tbody tr.odd {
    background-color: #f9f9f9
}

table.dataTable.display tbody tr.odd.selected,
table.dataTable.stripe tbody tr.odd.selected {
    background-color: #acbad4
}

table.dataTable.display tbody tr:hover,
table.dataTable.hover tbody tr:hover {
    background-color: #f6f6f6
}

table.dataTable.display tbody tr:hover.selected,
table.dataTable.hover tbody tr:hover.selected {
    background-color: #aab7d1
}

table.dataTable.display tbody tr>.sorting_1,
table.dataTable.display tbody tr>.sorting_2,
table.dataTable.display tbody tr>.sorting_3,
table.dataTable.order-column tbody tr>.sorting_1,
table.dataTable.order-column tbody tr>.sorting_2,
table.dataTable.order-column tbody tr>.sorting_3 {
    background-color: #fafafa
}

table.dataTable.display tbody tr.selected>.sorting_1,
table.dataTable.display tbody tr.selected>.sorting_2,
table.dataTable.display tbody tr.selected>.sorting_3,
table.dataTable.order-column tbody tr.selected>.sorting_1,
table.dataTable.order-column tbody tr.selected>.sorting_2,
table.dataTable.order-column tbody tr.selected>.sorting_3 {
    background-color: #acbad5
}

table.dataTable.display tbody tr.odd>.sorting_1,
table.dataTable.order-column.stripe tbody tr.odd>.sorting_1 {
    background-color: #f1f1f1
}

table.dataTable.display tbody tr.odd>.sorting_2,
table.dataTable.order-column.stripe tbody tr.odd>.sorting_2 {
    background-color: #f3f3f3
}

table.dataTable.display tbody tr.odd>.sorting_3,
table.dataTable.order-column.stripe tbody tr.odd>.sorting_3 {
    background-color: #f5f5f5
}

table.dataTable.display tbody tr.odd.selected>.sorting_1,
table.dataTable.order-column.stripe tbody tr.odd.selected>.sorting_1 {
    background-color: #a6b4cd
}

table.dataTable.display tbody tr.odd.selected>.sorting_2,
table.dataTable.order-column.stripe tbody tr.odd.selected>.sorting_2 {
    background-color: #a8b5cf
}

table.dataTable.display tbody tr.odd.selected>.sorting_3,
table.dataTable.order-column.stripe tbody tr.odd.selected>.sorting_3 {
    background-color: #a9b7d1
}

table.dataTable.display tbody tr.even>.sorting_1,
table.dataTable.order-column.stripe tbody tr.even>.sorting_1 {
    background-color: #fafafa
}

table.dataTable.display tbody tr.even>.sorting_2,
table.dataTable.order-column.stripe tbody tr.even>.sorting_2 {
    background-color: #fcfcfc
}

table.dataTable.display tbody tr.even>.sorting_3,
table.dataTable.order-column.stripe tbody tr.even>.sorting_3 {
    background-color: #fefefe
}

table.dataTable.display tbody tr.even.selected>.sorting_1,
table.dataTable.order-column.stripe tbody tr.even.selected>.sorting_1 {
    background-color: #acbad5
}

table.dataTable.display tbody tr.even.selected>.sorting_2,
table.dataTable.order-column.stripe tbody tr.even.selected>.sorting_2 {
    background-color: #aebcd6
}

table.dataTable.display tbody tr.even.selected>.sorting_3,
table.dataTable.order-column.stripe tbody tr.even.selected>.sorting_3 {
    background-color: #afbdd8
}

table.dataTable.display tbody tr:hover>.sorting_1,
table.dataTable.order-column.hover tbody tr:hover>.sorting_1 {
    background-color: #eaeaea
}

table.dataTable.display tbody tr:hover>.sorting_2,
table.dataTable.order-column.hover tbody tr:hover>.sorting_2 {
    background-color: #ececec
}

table.dataTable.display tbody tr:hover>.sorting_3,
table.dataTable.order-column.hover tbody tr:hover>.sorting_3 {
    background-color: #efefef
}

table.dataTable.display tbody tr:hover.selected>.sorting_1,
table.dataTable.order-column.hover tbody tr:hover.selected>.sorting_1 {
    background-color: #a2aec7
}

table.dataTable.display tbody tr:hover.selected>.sorting_2,
table.dataTable.order-column.hover tbody tr:hover.selected>.sorting_2 {
    background-color: #a3b0c9
}

table.dataTable.display tbody tr:hover.selected>.sorting_3,
table.dataTable.order-column.hover tbody tr:hover.selected>.sorting_3 {
    background-color: #a5b2cb
}

table.dataTable.no-footer {
    border-bottom: 1px solid #111
}

table.dataTable.nowrap td,
table.dataTable.nowrap th {
    white-space: nowrap
}

table.dataTable.compact thead td,
table.dataTable.compact thead th {
    padding: 4px 17px 4px 4px
}

table.dataTable.compact tbody td,
table.dataTable.compact tbody th,
table.dataTable.compact tfoot td,
table.dataTable.compact tfoot th {
    padding: 4px
}

table.dataTable td.dt-left,
table.dataTable th.dt-left {
    text-align: left
}

table.dataTable td.dataTables_empty,
table.dataTable td.dt-center,
table.dataTable th.dt-center {
    text-align: center
}

table.dataTable td.dt-right,
table.dataTable th.dt-right {
    text-align: right
}

table.dataTable td.dt-justify,
table.dataTable th.dt-justify {
    text-align: justify
}

table.dataTable td.dt-nowrap,
table.dataTable th.dt-nowrap {
    white-space: nowrap
}

table.dataTable tfoot td.dt-head-left,
table.dataTable tfoot th.dt-head-left,
table.dataTable thead td.dt-head-left,
table.dataTable thead th.dt-head-left {
    text-align: left
}

table.dataTable tfoot td.dt-head-center,
table.dataTable tfoot th.dt-head-center,
table.dataTable thead td.dt-head-center,
table.dataTable thead th.dt-head-center {
    text-align: center
}

table.dataTable tfoot td.dt-head-right,
table.dataTable tfoot th.dt-head-right,
table.dataTable thead td.dt-head-right,
table.dataTable thead th.dt-head-right {
    text-align: right
}

table.dataTable tfoot td.dt-head-justify,
table.dataTable tfoot th.dt-head-justify,
table.dataTable thead td.dt-head-justify,
table.dataTable thead th.dt-head-justify {
    text-align: justify
}

table.dataTable tfoot td.dt-head-nowrap,
table.dataTable tfoot th.dt-head-nowrap,
table.dataTable thead td.dt-head-nowrap,
table.dataTable thead th.dt-head-nowrap {
    white-space: nowrap
}

table.dataTable tbody td.dt-body-left,
table.dataTable tbody th.dt-body-left {
    text-align: left
}

table.dataTable tbody td.dt-body-center,
table.dataTable tbody th.dt-body-center {
    text-align: center
}

table.dataTable tbody td.dt-body-right,
table.dataTable tbody th.dt-body-right {
    text-align: right
}

table.dataTable tbody td.dt-body-justify,
table.dataTable tbody th.dt-body-justify {
    text-align: justify
}

table.dataTable tbody td.dt-body-nowrap,
table.dataTable tbody th.dt-body-nowrap {
    white-space: nowrap
}

table.dataTable,
table.dataTable td,
table.dataTable th {
    box-sizing: content-box
}

.dataTables_wrapper {
    position: relative;
    clear: both;
    *zoom: 1;
    zoom: 1
}

.dataTables_wrapper .dataTables_length {
    float: left
}

.dataTables_wrapper .dataTables_filter {
    float: right;
    text-align: right
}

.dataTables_wrapper .dataTables_filter input {
    margin-left: .5em
}

.dataTables_wrapper .dataTables_info {
    clear: both;
    float: left;
    padding-top: .755em
}

.dataTables_wrapper .dataTables_paginate {
    float: right;
    text-align: right;
    padding-top: .25em
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    box-sizing: border-box;
    display: inline-block;
    min-width: 1.5em;
    padding: .5em 1em;
    margin-left: 2px;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    *cursor: hand;
    color: #333 !important;
    border: 1px solid transparent;
    border-radius: 2px
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color: #333 !important;
    border: 1px solid #979797;
    background-color: #fff;
    background: linear-gradient(180deg, #fff 0, #dcdcdc)
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    cursor: default;
    color: #666 !important;
    border: 1px solid transparent;
    background: transparent;
    box-shadow: none
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    color: #fff !important;
    border: 1px solid #111;
    background-color: #585858;
    background: linear-gradient(180deg, #585858 0, #111)
}

.dataTables_wrapper .dataTables_paginate .paginate_button:active {
    outline: none;
    background-color: #2b2b2b;
    background: linear-gradient(180deg, #2b2b2b 0, #0c0c0c);
    box-shadow: inset 0 0 3px #111
}

.dataTables_wrapper .dataTables_paginate .ellipsis {
    padding: 0 1em
}

.dataTables_wrapper .dataTables_processing {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 40px;
    margin-left: -50%;
    margin-top: -25px;
    padding-top: 20px;
    text-align: center;
    font-size: 1.2em;
    background-color: #fff;
    background: linear-gradient(90deg, hsla(0, 0%, 100%, 0) 0, hsla(0, 0%, 100%, .9) 25%, hsla(0, 0%, 100%, .9) 75%, hsla(0, 0%, 100%, 0))
}

.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_paginate,
.dataTables_wrapper .dataTables_processing {
    color: #333
}

.dataTables_wrapper .dataTables_scroll {
    clear: both
}

.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody {
    *margin-top: -1px;
    -webkit-overflow-scrolling: touch
}

.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody>table>tbody>tr>td,
.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody>table>tbody>tr>th,
.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody>table>thead>tr>td,
.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody>table>thead>tr>th {
    vertical-align: middle
}

.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody>table>tbody>tr>td>div.dataTables_sizing,
.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody>table>tbody>tr>th>div.dataTables_sizing,
.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody>table>thead>tr>td>div.dataTables_sizing,
.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody>table>thead>tr>th>div.dataTables_sizing {
    height: 0;
    overflow: hidden;
    margin: 0 !important;
    padding: 0 !important
}

.dataTables_wrapper.no-footer .dataTables_scrollBody {
    border-bottom: 1px solid #111
}

.dataTables_wrapper.no-footer div.dataTables_scrollBody>table,
.dataTables_wrapper.no-footer div.dataTables_scrollHead table.dataTable {
    border-bottom: none
}

.dataTables_wrapper:after {
    visibility: hidden;
    display: block;
    content: "";
    clear: both;
    height: 0
}

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

    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        float: none;
        text-align: center
    }

    .dataTables_wrapper .dataTables_paginate {
        margin-top: .5em
    }
}

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

    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_length {
        float: none;
        text-align: center
    }

    .dataTables_wrapper .dataTables_filter {
        margin-top: .5em
    }
}

table.fixedHeader-floating {
    position: fixed !important;
    background-color: #fff
}

table.fixedHeader-floating.no-footer {
    border-bottom-width: 0
}

table.fixedHeader-locked {
    position: absolute !important;
    background-color: #fff
}

@media print {
    table.fixedHeader-floating {
        display: none
    }
}

.video-js .vjs-big-play-button .vjs-icon-placeholder:before,
.video-js .vjs-modal-dialog,
.vjs-button>.vjs-icon-placeholder:before,
.vjs-modal-dialog .vjs-modal-dialog-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.video-js .vjs-big-play-button .vjs-icon-placeholder:before,
.vjs-button>.vjs-icon-placeholder:before {
    text-align: center
}

@font-face {
    font-family: VideoJS;
    src: url(../fonts/VideoJS.eot) format("eot"), url(../fonts/VideoJS.woff) format("woff"), url(../fonts/VideoJS.ttf) format("truetype"), url(../fonts/VideoJS.svg) format("svg");
    font-weight: 400;
    font-style: normal
}

.video-js .vjs-big-play-button .vjs-icon-placeholder:before,
.video-js .vjs-play-control .vjs-icon-placeholder,
.vjs-icon-play {
    font-family: VideoJS;
    font-weight: 400;
    font-style: normal
}

.video-js .vjs-big-play-button .vjs-icon-placeholder:before,
.video-js .vjs-play-control .vjs-icon-placeholder:before,
.vjs-icon-play:before {
    content: "\f101"
}

.vjs-icon-play-circle {
    font-family: VideoJS;
    font-weight: 400;
    font-style: normal
}

.vjs-icon-play-circle:before {
    content: "\f102"
}

.video-js .vjs-play-control.vjs-playing .vjs-icon-placeholder,
.vjs-icon-pause {
    font-family: VideoJS;
    font-weight: 400;
    font-style: normal
}

.video-js .vjs-play-control.vjs-playing .vjs-icon-placeholder:before,
.vjs-icon-pause:before {
    content: "\f103"
}

.video-js .vjs-mute-control.vjs-vol-0 .vjs-icon-placeholder,
.vjs-icon-volume-mute {
    font-family: VideoJS;
    font-weight: 400;
    font-style: normal
}

.video-js .vjs-mute-control.vjs-vol-0 .vjs-icon-placeholder:before,
.vjs-icon-volume-mute:before {
    content: "\f104"
}

.video-js .vjs-mute-control.vjs-vol-1 .vjs-icon-placeholder,
.vjs-icon-volume-low {
    font-family: VideoJS;
    font-weight: 400;
    font-style: normal
}

.video-js .vjs-mute-control.vjs-vol-1 .vjs-icon-placeholder:before,
.vjs-icon-volume-low:before {
    content: "\f105"
}

.video-js .vjs-mute-control.vjs-vol-2 .vjs-icon-placeholder,
.vjs-icon-volume-mid {
    font-family: VideoJS;
    font-weight: 400;
    font-style: normal
}

.video-js .vjs-mute-control.vjs-vol-2 .vjs-icon-placeholder:before,
.vjs-icon-volume-mid:before {
    content: "\f106"
}

.video-js .vjs-mute-control .vjs-icon-placeholder,
.vjs-icon-volume-high {
    font-family: VideoJS;
    font-weight: 400;
    font-style: normal
}

.video-js .vjs-mute-control .vjs-icon-placeholder:before,
.vjs-icon-volume-high:before {
    content: "\f107"
}

.video-js .vjs-fullscreen-control .vjs-icon-placeholder,
.vjs-icon-fullscreen-enter {
    font-family: VideoJS;
    font-weight: 400;
    font-style: normal
}

.video-js .vjs-fullscreen-control .vjs-icon-placeholder:before,
.vjs-icon-fullscreen-enter:before {
    content: "\f108"
}

.video-js.vjs-fullscreen .vjs-fullscreen-control .vjs-icon-placeholder,
.vjs-icon-fullscreen-exit {
    font-family: VideoJS;
    font-weight: 400;
    font-style: normal
}

.video-js.vjs-fullscreen .vjs-fullscreen-control .vjs-icon-placeholder:before,
.vjs-icon-fullscreen-exit:before {
    content: "\f109"
}

.vjs-icon-square {
    font-family: VideoJS;
    font-weight: 400;
    font-style: normal
}

.vjs-icon-square:before {
    content: "\f10a"
}

.vjs-icon-spinner {
    font-family: VideoJS;
    font-weight: 400;
    font-style: normal
}

.vjs-icon-spinner:before {
    content: "\f10b"
}

.video-js.video-js:lang(en-AU) .vjs-subs-caps-button .vjs-icon-placeholder,
.video-js.video-js:lang(en-GB) .vjs-subs-caps-button .vjs-icon-placeholder,
.video-js.video-js:lang(en-IE) .vjs-subs-caps-button .vjs-icon-placeholder,
.video-js.video-js:lang(en-NZ) .vjs-subs-caps-button .vjs-icon-placeholder,
.video-js .vjs-subs-caps-button .vjs-icon-placeholder,
.video-js .vjs-subtitles-button .vjs-icon-placeholder,
.vjs-icon-subtitles {
    font-family: VideoJS;
    font-weight: 400;
    font-style: normal
}

.video-js.video-js:lang(en-AU) .vjs-subs-caps-button .vjs-icon-placeholder:before,
.video-js.video-js:lang(en-GB) .vjs-subs-caps-button .vjs-icon-placeholder:before,
.video-js.video-js:lang(en-IE) .vjs-subs-caps-button .vjs-icon-placeholder:before,
.video-js.video-js:lang(en-NZ) .vjs-subs-caps-button .vjs-icon-placeholder:before,
.video-js .vjs-subs-caps-button .vjs-icon-placeholder:before,
.video-js .vjs-subtitles-button .vjs-icon-placeholder:before,
.vjs-icon-subtitles:before {
    content: "\f10c"
}

.video-js .vjs-captions-button .vjs-icon-placeholder,
.video-js:lang(en) .vjs-subs-caps-button .vjs-icon-placeholder,
.video-js:lang(fr-CA) .vjs-subs-caps-button .vjs-icon-placeholder,
.vjs-icon-captions {
    font-family: VideoJS;
    font-weight: 400;
    font-style: normal
}

.video-js .vjs-captions-button .vjs-icon-placeholder:before,
.video-js:lang(en) .vjs-subs-caps-button .vjs-icon-placeholder:before,
.video-js:lang(fr-CA) .vjs-subs-caps-button .vjs-icon-placeholder:before,
.vjs-icon-captions:before {
    content: "\f10d"
}

.video-js .vjs-chapters-button .vjs-icon-placeholder,
.vjs-icon-chapters {
    font-family: VideoJS;
    font-weight: 400;
    font-style: normal
}

.video-js .vjs-chapters-button .vjs-icon-placeholder:before,
.vjs-icon-chapters:before {
    content: "\f10e"
}

.vjs-icon-share {
    font-family: VideoJS;
    font-weight: 400;
    font-style: normal
}

.vjs-icon-share:before {
    content: "\f10f"
}

.vjs-icon-cog {
    font-family: VideoJS;
    font-weight: 400;
    font-style: normal
}

.vjs-icon-cog:before {
    content: "\f110"
}

.video-js .vjs-play-progress,
.video-js .vjs-volume-level,
.vjs-icon-circle {
    font-family: VideoJS;
    font-weight: 400;
    font-style: normal
}

.video-js .vjs-play-progress:before,
.video-js .vjs-volume-level:before,
.vjs-icon-circle:before {
    content: "\f111"
}

.vjs-icon-circle-outline {
    font-family: VideoJS;
    font-weight: 400;
    font-style: normal
}

.vjs-icon-circle-outline:before {
    content: "\f112"
}

.vjs-icon-circle-inner-circle {
    font-family: VideoJS;
    font-weight: 400;
    font-style: normal
}

.vjs-icon-circle-inner-circle:before {
    content: "\f113"
}

.vjs-icon-hd {
    font-family: VideoJS;
    font-weight: 400;
    font-style: normal
}

.vjs-icon-hd:before {
    content: "\f114"
}

.video-js .vjs-control.vjs-close-button .vjs-icon-placeholder,
.vjs-icon-cancel {
    font-family: VideoJS;
    font-weight: 400;
    font-style: normal
}

.video-js .vjs-control.vjs-close-button .vjs-icon-placeholder:before,
.vjs-icon-cancel:before {
    content: "\f115"
}

.video-js .vjs-play-control.vjs-ended .vjs-icon-placeholder,
.vjs-icon-replay {
    font-family: VideoJS;
    font-weight: 400;
    font-style: normal
}

.video-js .vjs-play-control.vjs-ended .vjs-icon-placeholder:before,
.vjs-icon-replay:before {
    content: "\f116"
}

.vjs-icon-facebook {
    font-family: VideoJS;
    font-weight: 400;
    font-style: normal
}

.vjs-icon-facebook:before {
    content: "\f117"
}

.vjs-icon-gplus {
    font-family: VideoJS;
    font-weight: 400;
    font-style: normal
}

.vjs-icon-gplus:before {
    content: "\f118"
}

.vjs-icon-linkedin {
    font-family: VideoJS;
    font-weight: 400;
    font-style: normal
}

.vjs-icon-linkedin:before {
    content: "\f119"
}

.vjs-icon-twitter {
    font-family: VideoJS;
    font-weight: 400;
    font-style: normal
}

.vjs-icon-twitter:before {
    content: "\f11a"
}

.vjs-icon-tumblr {
    font-family: VideoJS;
    font-weight: 400;
    font-style: normal
}

.vjs-icon-tumblr:before {
    content: "\f11b"
}

.vjs-icon-pinterest {
    font-family: VideoJS;
    font-weight: 400;
    font-style: normal
}

.vjs-icon-pinterest:before {
    content: "\f11c"
}

.video-js .vjs-descriptions-button .vjs-icon-placeholder,
.vjs-icon-audio-description {
    font-family: VideoJS;
    font-weight: 400;
    font-style: normal
}

.video-js .vjs-descriptions-button .vjs-icon-placeholder:before,
.vjs-icon-audio-description:before {
    content: "\f11d"
}

.video-js .vjs-audio-button .vjs-icon-placeholder,
.vjs-icon-audio {
    font-family: VideoJS;
    font-weight: 400;
    font-style: normal
}

.video-js .vjs-audio-button .vjs-icon-placeholder:before,
.vjs-icon-audio:before {
    content: "\f11e"
}

.video-js {
    display: block;
    vertical-align: top;
    box-sizing: border-box;
    color: #fff;
    background-color: #000;
    position: relative;
    padding: 0;
    font-size: 10px;
    line-height: 1;
    font-weight: 400;
    font-style: normal;
    font-family: Arial, Helvetica, sans-serif
}

.video-js:-moz-full-screen {
    position: absolute
}

.video-js:-webkit-full-screen {
    width: 100% !important;
    height: 100% !important
}

.video-js[tabindex="-1"] {
    outline: none
}

.video-js *,
.video-js :after,
.video-js :before {
    box-sizing: inherit
}

.video-js ul {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    list-style-position: outside;
    margin: 0
}

.video-js.vjs-4-3,
.video-js.vjs-16-9,
.video-js.vjs-fluid {
    width: 100%;
    max-width: 100%;
    height: 0
}

.video-js.vjs-16-9 {
    padding-top: 56.25%
}

.video-js.vjs-4-3 {
    padding-top: 75%
}

.video-js.vjs-fill,
.video-js .vjs-tech {
    width: 100%;
    height: 100%
}

.video-js .vjs-tech {
    position: absolute;
    top: 0;
    left: 0
}

body.vjs-full-window {
    padding: 0;
    margin: 0;
    height: 100%;
    overflow-y: auto
}

.vjs-full-window .video-js.vjs-fullscreen {
    position: fixed;
    overflow: hidden;
    z-index: 1000;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0
}

.video-js.vjs-fullscreen {
    width: 100% !important;
    height: 100% !important;
    padding-top: 0 !important
}

.video-js.vjs-fullscreen.vjs-user-inactive {
    cursor: none
}

.vjs-hidden {
    display: none !important
}

.vjs-disabled {
    opacity: .5;
    cursor: default
}

.video-js .vjs-offscreen {
    height: 1px;
    left: -9999px;
    position: absolute;
    top: 0;
    width: 1px
}

.vjs-lock-showing {
    display: block !important;
    opacity: 1;
    visibility: visible
}

.vjs-no-js {
    padding: 20px;
    color: #fff;
    background-color: #000;
    font-size: 18px;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    width: 300px;
    height: 150px;
    margin: 0 auto
}

.vjs-no-js a,
.vjs-no-js a:visited {
    color: #66a8cc
}

.video-js .vjs-big-play-button {
    font-size: 3em;
    line-height: 1.5em;
    height: 1.5em;
    width: 3em;
    display: block;
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 0;
    cursor: pointer;
    opacity: 1;
    border: .06666em solid #fff;
    background-color: #2b333f;
    background-color: rgba(43, 51, 63, .7);
    border-radius: .3em;
    transition: all .4s
}

.vjs-big-play-centered .vjs-big-play-button {
    top: 50%;
    left: 50%;
    margin-top: -.75em;
    margin-left: -1.5em
}

.video-js .vjs-big-play-button:focus,
.video-js:hover .vjs-big-play-button {
    border-color: #fff;
    background-color: #73859f;
    background-color: rgba(115, 133, 159, .5);
    transition: all 0s
}

.vjs-controls-disabled .vjs-big-play-button,
.vjs-error .vjs-big-play-button,
.vjs-has-started .vjs-big-play-button,
.vjs-using-native-controls .vjs-big-play-button {
    display: none
}

.vjs-has-started.vjs-paused.vjs-show-big-play-button-on-pause .vjs-big-play-button {
    display: block
}

.video-js button {
    background: none;
    border: none;
    color: inherit;
    display: inline-block;
    overflow: visible;
    font-size: inherit;
    line-height: inherit;
    text-transform: none;
    text-decoration: none;
    transition: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.vjs-control .vjs-button {
    width: 100%;
    height: 100%
}

.video-js .vjs-control.vjs-close-button {
    cursor: pointer;
    height: 3em;
    position: absolute;
    right: 0;
    top: .5em;
    z-index: 2
}

.video-js .vjs-modal-dialog {
    background: rgba(0, 0, 0, .8);
    background: linear-gradient(180deg, rgba(0, 0, 0, .8), hsla(0, 0%, 100%, 0));
    overflow: auto;
    box-sizing: content-box
}

.video-js .vjs-modal-dialog>* {
    box-sizing: border-box
}

.vjs-modal-dialog .vjs-modal-dialog-content {
    font-size: 1.2em;
    line-height: 1.5;
    padding: 20px 24px;
    z-index: 1
}

.vjs-menu-button {
    cursor: pointer
}

.vjs-menu-button.vjs-disabled {
    cursor: default
}

.vjs-workinghover .vjs-menu-button.vjs-disabled:hover .vjs-menu {
    display: none
}

.vjs-menu .vjs-menu-content {
    display: block;
    padding: 0;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    overflow: auto;
    box-sizing: content-box
}

.vjs-menu .vjs-menu-content>* {
    box-sizing: border-box
}

.vjs-scrubbing .vjs-menu-button:hover .vjs-menu {
    display: none
}

.vjs-menu li {
    list-style: none;
    margin: 0;
    padding: .2em 0;
    line-height: 1.4em;
    font-size: 1.2em;
    text-align: center;
    text-transform: lowercase
}

.vjs-menu li.vjs-menu-item:focus,
.vjs-menu li.vjs-menu-item:hover {
    background-color: #73859f;
    background-color: rgba(115, 133, 159, .5)
}

.vjs-menu li.vjs-selected,
.vjs-menu li.vjs-selected:focus,
.vjs-menu li.vjs-selected:hover {
    background-color: #fff;
    color: #2b333f
}

.vjs-menu li.vjs-menu-title {
    text-align: center;
    text-transform: uppercase;
    font-size: 1em;
    line-height: 2em;
    padding: 0;
    margin: 0 0 .3em;
    font-weight: 700;
    cursor: default
}

.vjs-menu-button-popup .vjs-menu {
    display: none;
    position: absolute;
    bottom: 0;
    width: 10em;
    left: -3em;
    height: 0;
    margin-bottom: 1.5em;
    border-top-color: rgba(43, 51, 63, .7)
}

.vjs-menu-button-popup .vjs-menu .vjs-menu-content {
    background-color: #2b333f;
    background-color: rgba(43, 51, 63, .7);
    position: absolute;
    width: 100%;
    bottom: 1.5em;
    max-height: 15em
}

.vjs-menu-button-popup .vjs-menu.vjs-lock-showing,
.vjs-workinghover .vjs-menu-button-popup:hover .vjs-menu {
    display: block
}

.video-js .vjs-menu-button-inline {
    transition: all .4s;
    overflow: hidden
}

.video-js .vjs-menu-button-inline:before {
    width: 2.222222222em
}

.video-js .vjs-menu-button-inline.vjs-slider-active,
.video-js .vjs-menu-button-inline:focus,
.video-js .vjs-menu-button-inline:hover,
.video-js.vjs-no-flex .vjs-menu-button-inline {
    width: 12em
}

.vjs-menu-button-inline .vjs-menu {
    opacity: 0;
    height: 100%;
    width: auto;
    position: absolute;
    left: 4em;
    top: 0;
    padding: 0;
    margin: 0;
    transition: all .4s
}

.vjs-menu-button-inline.vjs-slider-active .vjs-menu,
.vjs-menu-button-inline:focus .vjs-menu,
.vjs-menu-button-inline:hover .vjs-menu {
    display: block;
    opacity: 1
}

.vjs-no-flex .vjs-menu-button-inline .vjs-menu {
    display: block;
    opacity: 1;
    position: relative;
    width: auto
}

.vjs-no-flex .vjs-menu-button-inline.vjs-slider-active .vjs-menu,
.vjs-no-flex .vjs-menu-button-inline:focus .vjs-menu,
.vjs-no-flex .vjs-menu-button-inline:hover .vjs-menu {
    width: auto
}

.vjs-menu-button-inline .vjs-menu-content {
    width: auto;
    height: 100%;
    margin: 0;
    overflow: hidden
}

.video-js .vjs-control-bar {
    display: none;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3em;
    background-color: #2b333f;
    background-color: rgba(43, 51, 63, .7)
}

.vjs-has-started .vjs-control-bar {
    display: -ms-flexbox;
    display: flex;
    visibility: visible;
    opacity: 1;
    transition: visibility .1s, opacity .1s
}

.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
    visibility: visible;
    opacity: 0;
    transition: visibility 1s, opacity 1s
}

.vjs-controls-disabled .vjs-control-bar,
.vjs-error .vjs-control-bar,
.vjs-using-native-controls .vjs-control-bar {
    display: none !important
}

.vjs-audio.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
    opacity: 1;
    visibility: visible
}

.vjs-has-started.vjs-no-flex .vjs-control-bar {
    display: table
}

.video-js .vjs-control {
    position: relative;
    text-align: center;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 4em;
    -ms-flex: none;
    flex: none
}

.vjs-button>.vjs-icon-placeholder:before {
    font-size: 1.8em;
    line-height: 1.67
}

.video-js .vjs-control:focus,
.video-js .vjs-control:focus:before,
.video-js .vjs-control:hover:before {
    text-shadow: 0 0 1em #fff
}

.video-js .vjs-control-text {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px
}

.vjs-no-flex .vjs-control {
    display: table-cell;
    vertical-align: middle
}

.video-js .vjs-custom-control-spacer {
    display: none
}

.video-js .vjs-progress-control {
    cursor: pointer;
    -ms-flex: auto;
    flex: auto;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    min-width: 4em
}

.vjs-live .vjs-progress-control {
    display: none
}

.vjs-no-flex .vjs-progress-control {
    width: auto
}

.video-js .vjs-progress-holder {
    -ms-flex: auto;
    flex: auto;
    transition: all .2s;
    height: .3em
}

.video-js .vjs-progress-control .vjs-progress-holder {
    margin: 0 10px
}

.video-js .vjs-progress-control:hover .vjs-progress-holder {
    font-size: 1.6666666666666667em
}

.video-js .vjs-progress-holder .vjs-load-progress,
.video-js .vjs-progress-holder .vjs-load-progress div,
.video-js .vjs-progress-holder .vjs-play-progress {
    position: absolute;
    display: block;
    height: 100%;
    margin: 0;
    padding: 0;
    width: 0;
    left: 0;
    top: 0
}

.video-js .vjs-play-progress {
    background-color: #fff
}

.video-js .vjs-play-progress:before {
    font-size: .9em;
    position: absolute;
    right: -.5em;
    top: -.333333333333333em;
    z-index: 1
}

.video-js .vjs-load-progress {
    background: #bfc7d3;
    background: rgba(115, 133, 159, .5)
}

.video-js .vjs-load-progress div {
    background: #fff;
    background: rgba(115, 133, 159, .75)
}

.video-js .vjs-time-tooltip {
    background-color: #fff;
    background-color: hsla(0, 0%, 100%, .8);
    border-radius: .3em;
    color: #000;
    float: right;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    padding: 6px 8px 8px;
    pointer-events: none;
    position: relative;
    top: -3.4em;
    visibility: hidden;
    z-index: 1
}

.video-js .vjs-progress-holder:focus .vjs-time-tooltip {
    display: none
}

.video-js .vjs-progress-control:hover .vjs-progress-holder:focus .vjs-time-tooltip,
.video-js .vjs-progress-control:hover .vjs-time-tooltip {
    display: block;
    font-size: .6em;
    visibility: visible
}

.video-js .vjs-progress-control .vjs-mouse-display {
    display: none;
    position: absolute;
    width: 1px;
    height: 100%;
    background-color: #000;
    z-index: 1
}

.vjs-no-flex .vjs-progress-control .vjs-mouse-display {
    z-index: 0
}

.video-js .vjs-progress-control:hover .vjs-mouse-display {
    display: block
}

.video-js.vjs-user-inactive .vjs-progress-control .vjs-mouse-display {
    visibility: hidden;
    opacity: 0;
    transition: visibility 1s, opacity 1s
}

.video-js.vjs-user-inactive.vjs-no-flex .vjs-progress-control .vjs-mouse-display {
    display: none
}

.vjs-mouse-display .vjs-time-tooltip {
    color: #fff;
    background-color: #000;
    background-color: rgba(0, 0, 0, .8)
}

.video-js .vjs-slider {
    position: relative;
    cursor: pointer;
    padding: 0;
    margin: 0 .45em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: #73859f;
    background-color: rgba(115, 133, 159, .5)
}

.video-js .vjs-slider:focus {
    text-shadow: 0 0 1em #fff;
    box-shadow: 0 0 1em #fff
}

.video-js .vjs-mute-control {
    cursor: pointer;
    -ms-flex: none;
    flex: none;
    padding-left: 2em;
    padding-right: 2em;
    padding-bottom: 3em
}

.video-js .vjs-volume-control {
    cursor: pointer;
    margin-right: 1em;
    display: -ms-flexbox;
    display: flex
}

.video-js .vjs-volume-control.vjs-volume-horizontal {
    width: 5em
}

.video-js .vjs-volume-panel .vjs-volume-control {
    visibility: visible;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin-left: -1px
}

.vjs-no-flex .vjs-volume-panel .vjs-volume-control.vjs-volume-vertical,
.vjs-no-flex .vjs-volume-panel .vjs-volume-control.vjs-volume-vertical .vjs-volume-bar,
.vjs-no-flex .vjs-volume-panel .vjs-volume-control.vjs-volume-vertical .vjs-volume-level {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"
}

.video-js .vjs-volume-panel {
    transition: width 1s
}

.video-js .vjs-volume-panel .vjs-mute-control:active~.vjs-volume-control,
.video-js .vjs-volume-panel .vjs-mute-control:focus~.vjs-volume-control,
.video-js .vjs-volume-panel .vjs-mute-control:hover~.vjs-volume-control,
.video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active,
.video-js .vjs-volume-panel .vjs-volume-control:active,
.video-js .vjs-volume-panel .vjs-volume-control:focus,
.video-js .vjs-volume-panel .vjs-volume-control:hover,
.video-js .vjs-volume-panel:active .vjs-volume-control,
.video-js .vjs-volume-panel:focus .vjs-volume-control,
.video-js .vjs-volume-panel:hover .vjs-volume-control {
    visibility: visible;
    opacity: 1;
    position: relative;
    transition: visibility .1s, opacity .1s, height .1s, width .1s, left 0s, top 0s
}

.video-js .vjs-volume-panel .vjs-mute-control:active~.vjs-volume-control.vjs-volume-horizontal,
.video-js .vjs-volume-panel .vjs-mute-control:focus~.vjs-volume-control.vjs-volume-horizontal,
.video-js .vjs-volume-panel .vjs-mute-control:hover~.vjs-volume-control.vjs-volume-horizontal,
.video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-horizontal,
.video-js .vjs-volume-panel .vjs-volume-control:active.vjs-volume-horizontal,
.video-js .vjs-volume-panel .vjs-volume-control:focus.vjs-volume-horizontal,
.video-js .vjs-volume-panel .vjs-volume-control:hover.vjs-volume-horizontal,
.video-js .vjs-volume-panel:active .vjs-volume-control.vjs-volume-horizontal,
.video-js .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-horizontal,
.video-js .vjs-volume-panel:hover .vjs-volume-control.vjs-volume-horizontal {
    width: 5em;
    height: 3em
}

.video-js .vjs-volume-panel .vjs-mute-control:active~.vjs-volume-control.vjs-volume-vertical,
.video-js .vjs-volume-panel .vjs-mute-control:active~.vjs-volume-control.vjs-volume-vertical .vjs-volume-bar,
.video-js .vjs-volume-panel .vjs-mute-control:active~.vjs-volume-control.vjs-volume-vertical .vjs-volume-level,
.video-js .vjs-volume-panel .vjs-mute-control:focus~.vjs-volume-control.vjs-volume-vertical,
.video-js .vjs-volume-panel .vjs-mute-control:focus~.vjs-volume-control.vjs-volume-vertical .vjs-volume-bar,
.video-js .vjs-volume-panel .vjs-mute-control:focus~.vjs-volume-control.vjs-volume-vertical .vjs-volume-level,
.video-js .vjs-volume-panel .vjs-mute-control:hover~.vjs-volume-control.vjs-volume-vertical,
.video-js .vjs-volume-panel .vjs-mute-control:hover~.vjs-volume-control.vjs-volume-vertical .vjs-volume-bar,
.video-js .vjs-volume-panel .vjs-mute-control:hover~.vjs-volume-control.vjs-volume-vertical .vjs-volume-level,
.video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-vertical,
.video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-vertical .vjs-volume-bar,
.video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-vertical .vjs-volume-level,
.video-js .vjs-volume-panel .vjs-volume-control:active.vjs-volume-vertical,
.video-js .vjs-volume-panel .vjs-volume-control:active.vjs-volume-vertical .vjs-volume-bar,
.video-js .vjs-volume-panel .vjs-volume-control:active.vjs-volume-vertical .vjs-volume-level,
.video-js .vjs-volume-panel .vjs-volume-control:focus.vjs-volume-vertical,
.video-js .vjs-volume-panel .vjs-volume-control:focus.vjs-volume-vertical .vjs-volume-bar,
.video-js .vjs-volume-panel .vjs-volume-control:focus.vjs-volume-vertical .vjs-volume-level,
.video-js .vjs-volume-panel .vjs-volume-control:hover.vjs-volume-vertical,
.video-js .vjs-volume-panel .vjs-volume-control:hover.vjs-volume-vertical .vjs-volume-bar,
.video-js .vjs-volume-panel .vjs-volume-control:hover.vjs-volume-vertical .vjs-volume-level,
.video-js .vjs-volume-panel:active .vjs-volume-control.vjs-volume-vertical,
.video-js .vjs-volume-panel:active .vjs-volume-control.vjs-volume-vertical .vjs-volume-bar,
.video-js .vjs-volume-panel:active .vjs-volume-control.vjs-volume-vertical .vjs-volume-level,
.video-js .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-vertical,
.video-js .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-vertical .vjs-volume-bar,
.video-js .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-vertical .vjs-volume-level,
.video-js .vjs-volume-panel:hover .vjs-volume-control.vjs-volume-vertical,
.video-js .vjs-volume-panel:hover .vjs-volume-control.vjs-volume-vertical .vjs-volume-bar,
.video-js .vjs-volume-panel:hover .vjs-volume-control.vjs-volume-vertical .vjs-volume-level {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"
}

.video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active,
.video-js .vjs-volume-panel.vjs-volume-panel-horizontal:active,
.video-js .vjs-volume-panel.vjs-volume-panel-horizontal:focus,
.video-js .vjs-volume-panel.vjs-volume-panel-horizontal:hover {
    width: 9em;
    transition: width .1s
}

.video-js .vjs-volume-panel .vjs-volume-control.vjs-volume-vertical {
    height: 8em;
    width: 3em;
    left: -3.5em;
    transition: visibility 1s, opacity 1s, height 1s 1s, width 1s 1s, left 1s 1s, top 1s 1s
}

.video-js.vjs-no-flex .vjs-volume-control.vjs-volume-vertical,
.video-js.vjs-no-flex .vjs-volume-panel .vjs-volume-control.vjs-volume-vertical {
    position: absolute;
    bottom: 3em;
    left: .5em
}

.video-js .vjs-volume-panel {
    display: -ms-flexbox;
    display: flex
}

.video-js .vjs-volume-bar {
    margin: 1.35em .45em
}

.vjs-volume-bar.vjs-slider-horizontal {
    width: 5em;
    height: .3em
}

.vjs-volume-bar.vjs-slider-vertical {
    width: .3em;
    height: 5em;
    margin: 1.35em auto
}

.video-js .vjs-volume-level {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: #fff
}

.video-js .vjs-volume-level:before {
    position: absolute;
    font-size: .9em
}

.vjs-slider-vertical .vjs-volume-level {
    width: .3em
}

.vjs-slider-vertical .vjs-volume-level:before {
    top: -.5em;
    left: -.3em
}

.vjs-slider-horizontal .vjs-volume-level {
    height: .3em
}

.vjs-slider-horizontal .vjs-volume-level:before {
    top: -.3em;
    right: -.5em
}

.video-js .vjs-volume-panel.vjs-volume-panel-vertical {
    width: 4em
}

.vjs-volume-bar.vjs-slider-vertical .vjs-volume-level {
    height: 100%
}

.vjs-volume-bar.vjs-slider-horizontal .vjs-volume-level {
    width: 100%
}

.video-js .vjs-volume-vertical {
    width: 3em;
    height: 8em;
    bottom: 8em;
    background-color: #2b333f;
    background-color: rgba(43, 51, 63, .7)
}

.video-js .vjs-volume-horizontal .vjs-menu {
    left: -2em
}

.vjs-poster {
    display: inline-block;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: contain;
    background-color: #000;
    cursor: pointer;
    margin: 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%
}

.vjs-poster,
.vjs-poster img {
    vertical-align: middle;
    padding: 0
}

.vjs-poster img {
    display: block;
    margin: 0 auto;
    max-height: 100%;
    width: 100%
}

.vjs-has-started .vjs-poster {
    display: none
}

.vjs-audio.vjs-has-started .vjs-poster {
    display: block
}

.vjs-using-native-controls .vjs-poster {
    display: none
}

.video-js .vjs-live-control {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: flex-start;
    align-items: flex-start;
    -ms-flex: auto;
    flex: auto;
    font-size: 1em;
    line-height: 3em
}

.vjs-no-flex .vjs-live-control {
    display: table-cell;
    width: auto;
    text-align: left
}

.video-js .vjs-time-control {
    -ms-flex: none;
    flex: none;
    font-size: 1em;
    line-height: 3em;
    min-width: 2em;
    width: auto;
    padding-left: 1em;
    padding-right: 1em
}

.video-js .vjs-current-time,
.vjs-live .vjs-time-control,
.vjs-no-flex .vjs-current-time {
    display: none
}

.vjs-no-flex .vjs-remaining-time.vjs-time-control.vjs-control {
    width: 0 !important;
    white-space: nowrap
}

.video-js .vjs-duration,
.vjs-no-flex .vjs-duration {
    display: none
}

.vjs-time-divider {
    display: none;
    line-height: 3em
}

.vjs-live .vjs-time-divider {
    display: none
}

.video-js .vjs-play-control .vjs-icon-placeholder {
    cursor: pointer;
    -ms-flex: none;
    flex: none
}

.vjs-text-track-display {
    position: absolute;
    bottom: 3em;
    left: 0;
    right: 0;
    top: 0;
    pointer-events: none
}

.video-js.vjs-user-inactive.vjs-playing .vjs-text-track-display {
    bottom: 1em
}

.video-js .vjs-text-track {
    font-size: 1.4em;
    text-align: center;
    margin-bottom: .1em;
    background-color: #000;
    background-color: rgba(0, 0, 0, .5)
}

.vjs-subtitles {
    color: #fff
}

.vjs-captions {
    color: #fc6
}

.vjs-tt-cue {
    display: block
}

video::-webkit-media-text-track-display {
    transform: translateY(-3em)
}

.video-js.vjs-user-inactive.vjs-playing video::-webkit-media-text-track-display {
    transform: translateY(-1.5em)
}

.video-js .vjs-fullscreen-control {
    cursor: pointer;
    -ms-flex: none;
    flex: none
}

.vjs-playback-rate .vjs-playback-rate-value,
.vjs-playback-rate>.vjs-menu-button {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.vjs-playback-rate .vjs-playback-rate-value {
    pointer-events: none;
    font-size: 1.5em;
    line-height: 2;
    text-align: center
}

.vjs-playback-rate .vjs-menu {
    width: 4em;
    left: 0
}

.vjs-error .vjs-error-display .vjs-modal-dialog-content {
    font-size: 1.4em;
    text-align: center
}

.vjs-error .vjs-error-display:before {
    color: #fff;
    content: "X";
    font-family: Arial, Helvetica, sans-serif;
    font-size: 4em;
    left: 0;
    line-height: 1;
    margin-top: -.5em;
    position: absolute;
    text-shadow: .05em .05em .1em #000;
    text-align: center;
    top: 50%;
    vertical-align: middle;
    width: 100%
}

.vjs-loading-spinner {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -25px 0 0 -25px;
    opacity: .85;
    text-align: left;
    border: 6px solid rgba(43, 51, 63, .7);
    box-sizing: border-box;
    background-clip: padding-box;
    width: 50px;
    height: 50px;
    border-radius: 25px
}

.vjs-seeking .vjs-loading-spinner,
.vjs-waiting .vjs-loading-spinner {
    display: block
}

.vjs-loading-spinner:after,
.vjs-loading-spinner:before {
    content: "";
    position: absolute;
    margin: -6px;
    box-sizing: inherit;
    width: inherit;
    height: inherit;
    border-radius: inherit;
    opacity: 1;
    border: inherit;
    border-color: transparent;
    border-top-color: #fff
}

.vjs-seeking .vjs-loading-spinner:after,
.vjs-seeking .vjs-loading-spinner:before,
.vjs-waiting .vjs-loading-spinner:after,
.vjs-waiting .vjs-loading-spinner:before {
    animation: vjs-spinner-spin 1.1s cubic-bezier(.6, .2, 0, .8) infinite, vjs-spinner-fade 1.1s linear infinite
}

.vjs-seeking .vjs-loading-spinner:before,
.vjs-waiting .vjs-loading-spinner:before {
    border-top-color: #fff
}

.vjs-seeking .vjs-loading-spinner:after,
.vjs-waiting .vjs-loading-spinner:after {
    border-top-color: #fff;
    animation-delay: .44s
}

@keyframes vjs-spinner-spin {
    to {
        transform: rotate(1turn)
    }
}

@keyframes vjs-spinner-fade {
    0% {
        border-top-color: #73859f
    }

    20% {
        border-top-color: #73859f
    }

    35% {
        border-top-color: #fff
    }

    60% {
        border-top-color: #73859f
    }

    to {
        border-top-color: #73859f
    }
}

.vjs-chapters-button .vjs-menu ul {
    width: 24em
}

.video-js .vjs-subs-caps-button+.vjs-menu .vjs-captions-menu-item .vjs-menu-item-text .vjs-icon-placeholder {
    position: absolute
}

.video-js .vjs-subs-caps-button+.vjs-menu .vjs-captions-menu-item .vjs-menu-item-text .vjs-icon-placeholder:before {
    font-family: VideoJS;
    content: "\f10d";
    font-size: 1.5em;
    line-height: inherit
}

.video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-custom-control-spacer {
    -ms-flex: auto;
    flex: auto
}

.video-js.vjs-layout-tiny:not(.vjs-fullscreen).vjs-no-flex .vjs-custom-control-spacer {
    width: auto
}

.video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-captions-button,
.video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-chapters-button,
.video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-current-time,
.video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-descriptions-button,
.video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-duration,
.video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-mute-control,
.video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-playback-rate,
.video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-remaining-time,
.video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-subtitles-button .vjs-audio-button,
.video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-time-divider,
.video-js.vjs-layout-small:not(.vjs-fullscreen) .vjs-volume-control,
.video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-audio-button,
.video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-captions-button,
.video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-chapters-button,
.video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-current-time,
.video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-descriptions-button,
.video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-duration,
.video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-mute-control,
.video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-playback-rate,
.video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-progress-control,
.video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-remaining-time,
.video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-subtitles-button,
.video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-time-divider,
.video-js.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-volume-control,
.video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-audio-button,
.video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-captions-button,
.video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-chapters-button,
.video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-current-time,
.video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-descriptions-button,
.video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-duration,
.video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-mute-control,
.video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-playback-rate,
.video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-remaining-time,
.video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-subtitles-button,
.video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-time-divider,
.video-js.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-volume-control {
    display: none
}

.vjs-modal-dialog.vjs-text-track-settings {
    background-color: #2b333f;
    background-color: rgba(43, 51, 63, .75);
    color: #fff;
    height: 70%
}

.vjs-text-track-settings .vjs-modal-dialog-content {
    display: table
}

.vjs-text-track-settings .vjs-track-settings-colors,
.vjs-text-track-settings .vjs-track-settings-controls,
.vjs-text-track-settings .vjs-track-settings-font {
    display: table-cell
}

.vjs-text-track-settings .vjs-track-settings-controls {
    text-align: right;
    vertical-align: bottom
}

.vjs-text-track-settings fieldset {
    margin: 5px;
    padding: 3px;
    border: none
}

.vjs-text-track-settings fieldset span {
    display: inline-block;
    margin-left: 5px
}

.vjs-text-track-settings legend {
    color: #fff;
    margin: 0 0 5px
}

.vjs-text-track-settings .vjs-label {
    position: absolute;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px, 1px, 1px, 1px);
    display: block;
    margin: 0 0 5px;
    padding: 0;
    border: 0;
    height: 1px;
    width: 1px;
    overflow: hidden
}

.vjs-track-settings-controls button:active,
.vjs-track-settings-controls button:focus {
    outline-style: solid;
    outline-width: medium;
    background-image: linear-gradient(0deg, #fff 88%, #73859f)
}

.vjs-track-settings-controls button:hover {
    color: rgba(43, 51, 63, .75)
}

.vjs-track-settings-controls button {
    background-color: #fff;
    background-image: linear-gradient(-180deg, #fff 88%, #73859f);
    color: #2b333f;
    cursor: pointer;
    border-radius: 2px
}

.vjs-track-settings-controls .vjs-default-button {
    margin-right: 1em
}

@media print {
    .video-js>:not(.vjs-tech):not(.vjs-poster) {
        visibility: hidden
    }
}

@media \0screen {
    .vjs-user-inactive.vjs-playing .vjs-control-bar :before {
        content: ""
    }
}

@media \0screen {
    .vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
        visibility: hidden
    }
}

.select2-container {
    box-sizing: border-box;
    display: inline-block;
    margin: 0;
    position: relative;
    vertical-align: middle
}

.select2-container .select2-selection--single {
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    height: 28px;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-select: none
}

.select2-container .select2-selection--single .select2-selection__rendered {
    display: block;
    padding-left: 8px;
    padding-right: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.select2-container .select2-selection--single .select2-selection__clear {
    position: relative
}

.select2-container[dir=rtl] .select2-selection--single .select2-selection__rendered {
    padding-right: 8px;
    padding-left: 20px
}

.select2-container .select2-selection--multiple {
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    min-height: 32px;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-select: none
}

.select2-container .select2-selection--multiple .select2-selection__rendered {
    display: inline-block;
    overflow: hidden;
    padding-left: 8px;
    text-overflow: ellipsis;
    white-space: nowrap
}

.select2-container .select2-search--inline {
    float: left
}

.select2-container .select2-search--inline .select2-search__field {
    box-sizing: border-box;
    border: none;
    font-size: 100%;
    margin-top: 5px;
    padding: 0
}

.select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button {
    -webkit-appearance: none
}

.select2-dropdown {
    background-color: #fff;
    border: 1px solid #aaa;
    border-radius: 4px;
    box-sizing: border-box;
    display: block;
    position: absolute;
    left: -100000px;
    width: 100%;
    z-index: 1051
}

.select2-results {
    display: block
}

.select2-results__options {
    list-style: none;
    margin: 0;
    padding: 0
}

.select2-results__option {
    padding: 6px;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-select: none
}

.select2-results__option[aria-selected] {
    cursor: pointer
}

.select2-container--open .select2-dropdown {
    left: 0
}

.select2-container--open .select2-dropdown--above {
    border-bottom: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0
}

.select2-container--open .select2-dropdown--below {
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0
}

.select2-search--dropdown {
    display: block;
    padding: 4px
}

.select2-search--dropdown .select2-search__field {
    padding: 4px;
    width: 100%;
    box-sizing: border-box
}

.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button {
    -webkit-appearance: none
}

.select2-search--dropdown.select2-search--hide {
    display: none
}

.select2-close-mask {
    border: 0;
    margin: 0;
    padding: 0;
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    min-height: 100%;
    min-width: 100%;
    height: auto;
    width: auto;
    opacity: 0;
    z-index: 99;
    background-color: #fff;
    filter: alpha(opacity=0)
}

.select2-hidden-accessible {
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important
}

.select2-container--default .select2-selection--single {
    background-color: #fff;
    border: 1px solid #aaa;
    border-radius: 4px
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #444;
    line-height: 28px
}

.select2-container--default .select2-selection--single .select2-selection__clear {
    cursor: pointer;
    float: right;
    font-weight: 700
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #999
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 26px;
    position: absolute;
    top: 1px;
    right: 1px;
    width: 20px
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #888 transparent transparent;
    border-style: solid;
    border-width: 5px 4px 0;
    height: 0;
    left: 50%;
    margin-left: -4px;
    margin-top: -2px;
    position: absolute;
    top: 50%;
    width: 0
}

.select2-container--default[dir=rtl] .select2-selection--single .select2-selection__clear {
    float: left
}

.select2-container--default[dir=rtl] .select2-selection--single .select2-selection__arrow {
    left: 1px;
    right: auto
}

.select2-container--default.select2-container--disabled .select2-selection--single {
    background-color: #eee;
    cursor: default
}

.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear {
    display: none
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent #888;
    border-width: 0 4px 5px
}

.select2-container--default .select2-selection--multiple {
    background-color: #fff;
    border: 1px solid #aaa;
    border-radius: 4px;
    cursor: text
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    box-sizing: border-box;
    list-style: none;
    margin: 0;
    padding: 0 5px;
    width: 100%
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered li {
    list-style: none
}

.select2-container--default .select2-selection--multiple .select2-selection__placeholder {
    color: #999;
    margin-top: 5px;
    float: left
}

.select2-container--default .select2-selection--multiple .select2-selection__clear {
    cursor: pointer;
    float: right;
    font-weight: 700;
    margin-top: 5px;
    margin-right: 10px
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #e4e4e4;
    border: 1px solid #aaa;
    border-radius: 4px;
    cursor: default;
    float: left;
    margin-right: 5px;
    margin-top: 5px;
    padding: 0 5px
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #999;
    cursor: pointer;
    display: inline-block;
    font-weight: 700;
    margin-right: 2px
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #333
}

.select2-container--default[dir=rtl] .select2-selection--multiple .select2-search--inline,
.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice,
.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__placeholder {
    float: right
}

.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice {
    margin-left: 5px;
    margin-right: auto
}

.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice__remove {
    margin-left: 2px;
    margin-right: auto
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
    border: 1px solid #000;
    outline: 0
}

.select2-container--default.select2-container--disabled .select2-selection--multiple {
    background-color: #eee;
    cursor: default
}

.select2-container--default.select2-container--disabled .select2-selection__choice__remove {
    display: none
}

.select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple,
.select2-container--default.select2-container--open.select2-container--above .select2-selection--single {
    border-top-left-radius: 0;
    border-top-right-radius: 0
}

.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple,
.select2-container--default.select2-container--open.select2-container--below .select2-selection--single {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid #aaa
}

.select2-container--default .select2-search--inline .select2-search__field {
    background: transparent;
    border: none;
    outline: 0;
    box-shadow: none;
    -webkit-appearance: textfield
}

.select2-container--default .select2-results>.select2-results__options {
    max-height: 200px;
    overflow-y: auto
}

.select2-container--default .select2-results__option[role=group] {
    padding: 0
}

.select2-container--default .select2-results__option[aria-disabled=true] {
    color: #999
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #ddd
}

.select2-container--default .select2-results__option .select2-results__option {
    padding-left: 1em
}

.select2-container--default .select2-results__option .select2-results__option .select2-results__group {
    padding-left: 0
}

.select2-container--default .select2-results__option .select2-results__option .select2-results__option {
    margin-left: -1em;
    padding-left: 2em
}

.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
    margin-left: -2em;
    padding-left: 3em
}

.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
    margin-left: -3em;
    padding-left: 4em
}

.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
    margin-left: -4em;
    padding-left: 5em
}

.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
    margin-left: -5em;
    padding-left: 6em
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #5897fb;
    color: #fff
}

.select2-container--default .select2-results__group {
    cursor: default;
    display: block;
    padding: 6px
}

.select2-container--classic .select2-selection--single {
    background-color: #f7f7f7;
    border: 1px solid #aaa;
    border-radius: 4px;
    outline: 0;
    background-image: linear-gradient(180deg, #fff 50%, #eee);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FFFFFFFF", endColorstr="#FFEEEEEE", GradientType=0)
}

.select2-container--classic .select2-selection--single:focus {
    border: 1px solid #5897fb
}

.select2-container--classic .select2-selection--single .select2-selection__rendered {
    color: #444;
    line-height: 28px
}

.select2-container--classic .select2-selection--single .select2-selection__clear {
    cursor: pointer;
    float: right;
    font-weight: 700;
    margin-right: 10px
}

.select2-container--classic .select2-selection--single .select2-selection__placeholder {
    color: #999
}

.select2-container--classic .select2-selection--single .select2-selection__arrow {
    background-color: #ddd;
    border: none;
    border-left: 1px solid #aaa;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    height: 26px;
    position: absolute;
    top: 1px;
    right: 1px;
    width: 20px;
    background-image: linear-gradient(180deg, #eee 50%, #ccc);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FFEEEEEE", endColorstr="#FFCCCCCC", GradientType=0)
}

.select2-container--classic .select2-selection--single .select2-selection__arrow b {
    border-color: #888 transparent transparent;
    border-style: solid;
    border-width: 5px 4px 0;
    height: 0;
    left: 50%;
    margin-left: -4px;
    margin-top: -2px;
    position: absolute;
    top: 50%;
    width: 0
}

.select2-container--classic[dir=rtl] .select2-selection--single .select2-selection__clear {
    float: left
}

.select2-container--classic[dir=rtl] .select2-selection--single .select2-selection__arrow {
    border: none;
    border-right: 1px solid #aaa;
    border-radius: 0;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    left: 1px;
    right: auto
}

.select2-container--classic.select2-container--open .select2-selection--single {
    border: 1px solid #5897fb
}

.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow {
    background: transparent;
    border: none
}

.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent #888;
    border-width: 0 4px 5px
}

.select2-container--classic.select2-container--open.select2-container--above .select2-selection--single {
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    background-image: linear-gradient(180deg, #fff 0, #eee 50%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FFFFFFFF", endColorstr="#FFEEEEEE", GradientType=0)
}

.select2-container--classic.select2-container--open.select2-container--below .select2-selection--single {
    border-bottom: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    background-image: linear-gradient(180deg, #eee 50%, #fff);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FFEEEEEE", endColorstr="#FFFFFFFF", GradientType=0)
}

.select2-container--classic .select2-selection--multiple {
    background-color: #fff;
    border: 1px solid #aaa;
    border-radius: 4px;
    cursor: text;
    outline: 0
}

.select2-container--classic .select2-selection--multiple:focus {
    border: 1px solid #5897fb
}

.select2-container--classic .select2-selection--multiple .select2-selection__rendered {
    list-style: none;
    margin: 0;
    padding: 0 5px
}

.select2-container--classic .select2-selection--multiple .select2-selection__clear {
    display: none
}

.select2-container--classic .select2-selection--multiple .select2-selection__choice {
    background-color: #e4e4e4;
    border: 1px solid #aaa;
    border-radius: 4px;
    cursor: default;
    float: left;
    margin-right: 5px;
    margin-top: 5px;
    padding: 0 5px
}

.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove {
    color: #888;
    cursor: pointer;
    display: inline-block;
    font-weight: 700;
    margin-right: 2px
}

.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #555
}

.select2-container--classic[dir=rtl] .select2-selection--multiple .select2-selection__choice {
    float: right;
    margin-left: 5px;
    margin-right: auto
}

.select2-container--classic[dir=rtl] .select2-selection--multiple .select2-selection__choice__remove {
    margin-left: 2px;
    margin-right: auto
}

.select2-container--classic.select2-container--open .select2-selection--multiple {
    border: 1px solid #5897fb
}

.select2-container--classic.select2-container--open.select2-container--above .select2-selection--multiple {
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0
}

.select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple {
    border-bottom: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0
}

.select2-container--classic .select2-search--dropdown .select2-search__field {
    border: 1px solid #aaa;
    outline: 0
}

.select2-container--classic .select2-search--inline .select2-search__field {
    outline: 0;
    box-shadow: none
}

.select2-container--classic .select2-dropdown {
    background-color: #fff;
    border: 1px solid transparent
}

.select2-container--classic .select2-dropdown--above {
    border-bottom: none
}

.select2-container--classic .select2-dropdown--below {
    border-top: none
}

.select2-container--classic .select2-results>.select2-results__options {
    max-height: 200px;
    overflow-y: auto
}

.select2-container--classic .select2-results__option[role=group] {
    padding: 0
}

.select2-container--classic .select2-results__option[aria-disabled=true] {
    color: grey
}

.select2-container--classic .select2-results__option--highlighted[aria-selected] {
    background-color: #3875d7;
    color: #fff
}

.select2-container--classic .select2-results__group {
    cursor: default;
    display: block;
    padding: 6px
}

.select2-container--classic.select2-container--open .select2-dropdown {
    border-color: #5897fb
}

.xdsoft_datetimepicker {
    box-shadow: 0 5px 15px -5px rgba(0, 0, 0, .506);
    background: #fff;
    border-bottom: 1px solid #bbb;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-top: 1px solid #ccc;
    color: #333;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    padding: 8px;
    padding-left: 0;
    padding-top: 2px;
    position: absolute;
    z-index: 9999;
    box-sizing: border-box;
    display: none
}

.xdsoft_datetimepicker.xdsoft_rtl {
    padding: 8px 0 8px 8px
}

.xdsoft_datetimepicker iframe {
    position: absolute;
    left: 0;
    top: 0;
    width: 75px;
    height: 210px;
    background: transparent;
    border: none
}

.xdsoft_datetimepicker button {
    border: none !important
}

.xdsoft_noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none
}

.xdsoft_noselect::selection {
    background: transparent
}

.xdsoft_noselect::-moz-selection {
    background: transparent
}

.xdsoft_datetimepicker.xdsoft_inline {
    display: inline-block;
    position: static;
    box-shadow: none
}

.xdsoft_datetimepicker * {
    box-sizing: border-box;
    padding: 0;
    margin: 0
}

.xdsoft_datetimepicker .xdsoft_datepicker,
.xdsoft_datetimepicker .xdsoft_timepicker {
    display: none
}

.xdsoft_datetimepicker .xdsoft_datepicker.active,
.xdsoft_datetimepicker .xdsoft_timepicker.active {
    display: block
}

.xdsoft_datetimepicker .xdsoft_datepicker {
    width: 224px;
    float: left;
    margin-left: 8px
}

.xdsoft_datetimepicker.xdsoft_rtl .xdsoft_datepicker {
    float: right;
    margin-right: 8px;
    margin-left: 0
}

.xdsoft_datetimepicker.xdsoft_showweeks .xdsoft_datepicker {
    width: 256px
}

.xdsoft_datetimepicker .xdsoft_timepicker {
    width: 58px;
    float: left;
    text-align: center;
    margin-left: 8px;
    margin-top: 0
}

.xdsoft_datetimepicker.xdsoft_rtl .xdsoft_timepicker {
    float: right;
    margin-right: 8px;
    margin-left: 0
}

.xdsoft_datetimepicker .xdsoft_datepicker.active+.xdsoft_timepicker {
    margin-top: 8px;
    margin-bottom: 3px
}

.xdsoft_datetimepicker .xdsoft_mounthpicker {
    position: relative;
    text-align: center
}

.xdsoft_datetimepicker .xdsoft_label i,
.xdsoft_datetimepicker .xdsoft_next,
.xdsoft_datetimepicker .xdsoft_prev,
.xdsoft_datetimepicker .xdsoft_today_button {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAeCAYAAADaW7vzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6Q0NBRjI1NjM0M0UwMTFFNDk4NkFGMzJFQkQzQjEwRUIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6Q0NBRjI1NjQ0M0UwMTFFNDk4NkFGMzJFQkQzQjEwRUIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDQ0FGMjU2MTQzRTAxMUU0OTg2QUYzMkVCRDNCMTBFQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDQ0FGMjU2MjQzRTAxMUU0OTg2QUYzMkVCRDNCMTBFQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PoNEP54AAAIOSURBVHja7Jq9TsMwEMcxrZD4WpBYeKUCe+kTMCACHZh4BFfHO/AAIHZGFhYkBBsSEqxsLCAgXKhbXYOTxh9pfJVP+qutnZ5s/5Lz2Y5I03QhWji2GIcgAokWgfCxNvcOCCGKqiSqhUp0laHOne05vdEyGMfkdxJDVjgwDlEQgYQBgx+ULJaWSXXS6r/ER5FBVR8VfGftTKcITNs+a1XpcFoExREIDF14AVIFxgQUS+h520cdud6wNkC0UBw6BCO/HoCYwBhD8QCkQ/x1mwDyD4plh4D6DDV0TAGyo4HcawLIBBSLDkHeH0Mg2yVP3l4TQMZQDDsEOl/MgHQqhMNuE0D+oBh0CIr8MAKyazBH9WyBuKxDWgbXfjNf32TZ1KWm/Ap1oSk/R53UtQ5xTh3LUlMmT8gt6g51Q9p+SobxgJQ/qmsfZhWywGFSl0yBjCLJCMgXail3b7+rumdVJ2YRss4cN+r6qAHDkPWjPjdJCF4n9RmAD/V9A/Wp4NQassDjwlB6XBiCxcJQWmZZb8THFilfy/lfrTvLghq2TqTHrRMTKNJ0sIhdo15RT+RpyWwFdY96UZ/LdQKBGjcXpcc1AlSFEfLmouD+1knuxBDUVrvOBmoOC/rEcN7OQxKVeJTCiAdUzUJhA2Oez9QTkp72OTVcxDcXY8iKNkxGAJXmJCOQwOa6dhyXsOa6XwEGAKdeb5ET3rQdAAAAAElFTkSuQmCC)
}

.xdsoft_datetimepicker .xdsoft_label i {
    opacity: .5;
    background-position: -92px -19px;
    display: inline-block;
    width: 9px;
    height: 20px;
    vertical-align: middle
}

.xdsoft_datetimepicker .xdsoft_prev {
    float: left;
    background-position: -20px 0
}

.xdsoft_datetimepicker .xdsoft_today_button {
    float: left;
    background-position: -70px 0;
    margin-left: 5px
}

.xdsoft_datetimepicker .xdsoft_next {
    float: right;
    background-position: 0 0
}

.xdsoft_datetimepicker .xdsoft_next,
.xdsoft_datetimepicker .xdsoft_prev,
.xdsoft_datetimepicker .xdsoft_today_button {
    background-color: transparent;
    background-repeat: no-repeat;
    border: 0 none;
    cursor: pointer;
    display: block;
    height: 30px;
    opacity: .5;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    outline: medium none;
    overflow: hidden;
    padding: 0;
    position: relative;
    text-indent: 100%;
    white-space: nowrap;
    width: 20px;
    min-width: 0
}

.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_next,
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_prev {
    float: none;
    background-position: -40px -15px;
    height: 15px;
    width: 30px;
    display: block;
    margin-left: 14px;
    margin-top: 7px
}

.xdsoft_datetimepicker.xdsoft_rtl .xdsoft_timepicker .xdsoft_next,
.xdsoft_datetimepicker.xdsoft_rtl .xdsoft_timepicker .xdsoft_prev {
    float: none;
    margin-left: 0;
    margin-right: 14px
}

.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_prev {
    background-position: -40px 0;
    margin-bottom: 7px;
    margin-top: 0
}

.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box {
    height: 151px;
    overflow: hidden;
    border-bottom: 1px solid #ddd
}

.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div {
    background: #f5f5f5;
    border-top: 1px solid #ddd;
    color: #666;
    font-size: 12px;
    text-align: center;
    border-collapse: collapse;
    cursor: pointer;
    border-bottom-width: 0;
    height: 25px;
    line-height: 25px
}

.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div:first-child {
    border-top-width: 0
}

.xdsoft_datetimepicker .xdsoft_next:hover,
.xdsoft_datetimepicker .xdsoft_prev:hover,
.xdsoft_datetimepicker .xdsoft_today_button:hover {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"
}

.xdsoft_datetimepicker .xdsoft_label {
    display: inline;
    position: relative;
    z-index: 9999;
    margin: 0;
    padding: 5px 3px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    background-color: #fff;
    float: left;
    width: 182px;
    text-align: center;
    cursor: pointer
}

.xdsoft_datetimepicker .xdsoft_label:hover>span {
    text-decoration: underline
}

.xdsoft_datetimepicker .xdsoft_label:hover i {
    opacity: 1
}

.xdsoft_datetimepicker .xdsoft_label>.xdsoft_select {
    border: 1px solid #ccc;
    position: absolute;
    right: 0;
    top: 30px;
    z-index: 101;
    display: none;
    background: #fff;
    max-height: 160px;
    overflow-y: hidden
}

.xdsoft_datetimepicker .xdsoft_label>.xdsoft_select.xdsoft_monthselect {
    right: -7px
}

.xdsoft_datetimepicker .xdsoft_label>.xdsoft_select.xdsoft_yearselect {
    right: 2px
}

.xdsoft_datetimepicker .xdsoft_label>.xdsoft_select>div>.xdsoft_option:hover {
    color: #fff;
    background: #ff8000
}

.xdsoft_datetimepicker .xdsoft_label>.xdsoft_select>div>.xdsoft_option {
    padding: 2px 10px 2px 5px;
    text-decoration: none !important
}

.xdsoft_datetimepicker .xdsoft_label>.xdsoft_select>div>.xdsoft_option.xdsoft_current {
    background: #3af;
    box-shadow: inset 0 1px 3px 0 #178fe5;
    color: #fff;
    font-weight: 700
}

.xdsoft_datetimepicker .xdsoft_month {
    width: 100px;
    text-align: right
}

.xdsoft_datetimepicker .xdsoft_calendar {
    clear: both
}

.xdsoft_datetimepicker .xdsoft_year {
    width: 48px;
    margin-left: 5px
}

.xdsoft_datetimepicker .xdsoft_calendar table {
    border-collapse: collapse;
    width: 100%
}

.xdsoft_datetimepicker .xdsoft_calendar td>div {
    padding-right: 5px
}

.xdsoft_datetimepicker .xdsoft_calendar th {
    height: 25px
}

.xdsoft_datetimepicker .xdsoft_calendar td,
.xdsoft_datetimepicker .xdsoft_calendar th {
    width: 14.2857142%;
    background: #f5f5f5;
    border: 1px solid #ddd;
    color: #666;
    font-size: 12px;
    text-align: right;
    vertical-align: middle;
    padding: 0;
    border-collapse: collapse;
    cursor: pointer;
    height: 25px
}

.xdsoft_datetimepicker.xdsoft_showweeks .xdsoft_calendar td,
.xdsoft_datetimepicker.xdsoft_showweeks .xdsoft_calendar th {
    width: 12.5%
}

.xdsoft_datetimepicker .xdsoft_calendar th {
    background: #f1f1f1
}

.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_today {
    color: #3af
}

.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_highlighted_default {
    background: #ffe9d2;
    box-shadow: inset 0 1px 4px 0 #ffb871;
    color: #000
}

.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_highlighted_mint {
    background: #c1ffc9;
    box-shadow: inset 0 1px 4px 0 #00dd1c;
    color: #000
}

.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current,
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_default,
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div.xdsoft_current {
    background: #3af;
    box-shadow: inset 0 1px 3px 0 #178fe5;
    color: #fff;
    font-weight: 700
}

.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_disabled,
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_other_month,
.xdsoft_datetimepicker .xdsoft_time_box>div>div.xdsoft_disabled {
    opacity: .5;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    cursor: default
}

.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_other_month.xdsoft_disabled {
    opacity: .2;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"
}

.xdsoft_datetimepicker .xdsoft_calendar td:hover,
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div:hover {
    color: #fff !important;
    background: #ff8000 !important;
    box-shadow: none !important
}

.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current.xdsoft_disabled:hover,
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div.xdsoft_current.xdsoft_disabled:hover {
    background: #3af !important;
    box-shadow: inset 0 1px 3px 0 #178fe5 !important;
    color: #fff !important
}

.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_disabled:hover,
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div.xdsoft_disabled:hover {
    color: inherit !important;
    background: inherit !important;
    box-shadow: inherit !important
}

.xdsoft_datetimepicker .xdsoft_calendar th {
    font-weight: 700;
    text-align: center;
    color: #999;
    cursor: default
}

.xdsoft_datetimepicker .xdsoft_copyright {
    color: #ccc !important;
    font-size: 10px;
    clear: both;
    float: none;
    margin-left: 8px
}

.xdsoft_datetimepicker .xdsoft_copyright a {
    color: #eee !important
}

.xdsoft_datetimepicker .xdsoft_copyright a:hover {
    color: #aaa !important
}

.xdsoft_time_box {
    position: relative;
    border: 1px solid #ccc
}

.xdsoft_scrollbar>.xdsoft_scroller {
    background: #ccc !important;
    height: 20px;
    border-radius: 3px
}

.xdsoft_scrollbar {
    position: absolute;
    width: 7px;
    right: 0;
    top: 0;
    bottom: 0;
    cursor: pointer
}

.xdsoft_scroller_box {
    position: relative
}

.xdsoft_datetimepicker.xdsoft_dark {
    box-shadow: 0 5px 15px -5px hsla(0, 0%, 100%, .506);
    background: #000;
    border-bottom: 1px solid #444;
    border-left: 1px solid #333;
    border-right: 1px solid #333;
    border-top: 1px solid #333;
    color: #ccc
}

.xdsoft_datetimepicker.xdsoft_dark .xdsoft_timepicker .xdsoft_time_box {
    border-bottom: 1px solid #222
}

.xdsoft_datetimepicker.xdsoft_dark .xdsoft_timepicker .xdsoft_time_box>div>div {
    background: #0a0a0a;
    border-top: 1px solid #222;
    color: #999
}

.xdsoft_datetimepicker.xdsoft_dark .xdsoft_label {
    background-color: #000
}

.xdsoft_datetimepicker.xdsoft_dark .xdsoft_label>.xdsoft_select {
    border: 1px solid #333;
    background: #000
}

.xdsoft_datetimepicker.xdsoft_dark .xdsoft_label>.xdsoft_select>div>.xdsoft_option:hover {
    color: #000;
    background: #007fff
}

.xdsoft_datetimepicker.xdsoft_dark .xdsoft_label>.xdsoft_select>div>.xdsoft_option.xdsoft_current {
    background: #c50;
    box-shadow: inset 0 1px 3px 0 #b03e00;
    color: #000
}

.xdsoft_datetimepicker.xdsoft_dark .xdsoft_label i,
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_next,
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_prev,
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_today_button {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAeCAYAAADaW7vzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QUExQUUzOTA0M0UyMTFFNDlBM0FFQTJENTExRDVBODYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QUExQUUzOTE0M0UyMTFFNDlBM0FFQTJENTExRDVBODYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpBQTFBRTM4RTQzRTIxMUU0OUEzQUVBMkQ1MTFENUE4NiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpBQTFBRTM4RjQzRTIxMUU0OUEzQUVBMkQ1MTFENUE4NiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pp0VxGEAAAIASURBVHja7JrNSgMxEMebtgh+3MSLr1T1Xn2CHoSKB08+QmR8Bx9A8e7RixdB9CKCoNdexIugxFlJa7rNZneTbLIpM/CnNLsdMvNjM8l0mRCiQ9Ye61IKCAgZAUnH+mU3MMZaHYChBnJUDzWOFZdVfc5+ZFLbrWDeXPwbxIqrLLfaeS0hEBVGIRQCEiZoHQwtlGSByCCdYBl8g8egTTAWoKQMRBRBcZxYlhzhKegqMOageErsCHVkk3hXIFooDgHB1KkHIHVgzKB4ADJQ/A1jAFmAYhkQqA5TOBtocrKrgXwQA8gcFIuAIO8sQSA7hidvPwaQGZSaAYHOUWJABhWWw2EMIH9QagQERU4SArJXo0ZZL18uvaxejXt/Em8xjVBXmvFr1KVm/AJ10tRe2XnraNqaJvKE3KHuUbfK1E+VHB0q40/y3sdQSxY4FHWeKJCunP8UyDdqJZenT3ntVV5jIYCAh20vT7ioP8tpf6E2lfEMwERe+whV1MHjwZB7PBiCxcGQWwKZKD62lfGNnP/1poFAA60T7rF1UgcKd2id3KDeUS+oLWV8DfWAepOfq00CgQabi9zjcgJVYVD7PVzQUAUGAQkbNJTBICDhgwYTjDYD6XeW08ZKh+A4pYkzenOxXUbvZcWz7E8ykRMnIHGX1XPl+1m2vPYpL+2qdb8CDAARlKFEz/ZVkAAAAABJRU5ErkJggg==)
}

.xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td,
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar th {
    background: #0a0a0a;
    border: 1px solid #222;
    color: #999
}

.xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar th {
    background: #0e0e0e
}

.xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td.xdsoft_today {
    color: #c50
}

.xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td.xdsoft_highlighted_default {
    background: #ffe9d2;
    box-shadow: inset 0 1px 4px 0 #ffb871;
    color: #000
}

.xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td.xdsoft_highlighted_mint {
    background: #c1ffc9;
    box-shadow: inset 0 1px 4px 0 #00dd1c;
    color: #000
}

.xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td.xdsoft_current,
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td.xdsoft_default,
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_timepicker .xdsoft_time_box>div>div.xdsoft_current {
    background: #c50;
    box-shadow: inset 0 1px 3px 0 #b03e00;
    color: #000
}

.xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td:hover,
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_timepicker .xdsoft_time_box>div>div:hover {
    color: #000 !important;
    background: #007fff !important
}

.xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar th {
    color: #666
}

.xdsoft_datetimepicker.xdsoft_dark .xdsoft_copyright {
    color: #333 !important
}

.xdsoft_datetimepicker.xdsoft_dark .xdsoft_copyright a {
    color: #111 !important
}

.xdsoft_datetimepicker.xdsoft_dark .xdsoft_copyright a:hover {
    color: #555 !important
}

.xdsoft_dark .xdsoft_time_box {
    border: 1px solid #333
}

.xdsoft_dark .xdsoft_scrollbar>.xdsoft_scroller {
    background: #333 !important
}

.xdsoft_datetimepicker .xdsoft_save_selected {
    display: block;
    border: 1px solid #ddd !important;
    margin-top: 5px;
    width: 100%;
    color: #454551;
    font-size: 13px
}

.xdsoft_datetimepicker .blue-gradient-button {
    font-family: museo-sans, Book Antiqua, sans-serif;
    font-size: 12px;
    font-weight: 300;
    color: #82878c;
    height: 28px;
    position: relative;
    padding: 4px 17px 4px 33px;
    border: 1px solid #d7d8da;
    background: linear-gradient(180deg, #fff 0, #f4f8fa 73%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fff", endColorstr="#f4f8fa", GradientType=0)
}

.xdsoft_datetimepicker .blue-gradient-button:focus,
.xdsoft_datetimepicker .blue-gradient-button:focus span,
.xdsoft_datetimepicker .blue-gradient-button:hover,
.xdsoft_datetimepicker .blue-gradient-button:hover span {
    color: #454551;
    background: linear-gradient(180deg, #f4f8fa 0, #fff 73%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f4f8fa", endColorstr="#FFF", GradientType=0)
}

.slick-slider {
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent
}

.slick-list,
.slick-slider {
    position: relative;
    display: block
}

.slick-list {
    overflow: hidden;
    margin: 0;
    padding: 0
}

.slick-list:focus {
    outline: none
}

.slick-list.dragging {
    cursor: pointer;
    cursor: hand
}

.slick-slider .slick-list,
.slick-slider .slick-track {
    transform: translateZ(0)
}

.slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: block;
    margin-left: auto;
    margin-right: auto
}

.slick-track:after,
.slick-track:before {
    display: table;
    content: ""
}

.slick-track:after {
    clear: both
}

.slick-loading .slick-track {
    visibility: hidden
}

.slick-slide {
    display: none;
    float: left;
    height: 100%;
    min-height: 1px
}

[dir=rtl] .slick-slide {
    float: right
}

.slick-slide img {
    display: block
}

.slick-slide.slick-loading img {
    display: none
}

.slick-slide.dragging img {
    pointer-events: none
}

.slick-initialized .slick-slide {
    display: block
}

.slick-loading .slick-slide {
    visibility: hidden
}

.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent
}

.slick-arrow.slick-hidden {
    display: none
}

.clearfix:after,
.clearfix:before {
    content: " ";
    display: table
}

.clearfix:after {
    clear: both
}

.hide {
    display: none !important
}

.rtl {
    direction: rtl
}

.ltr {
    direction: ltr
}

.normal {
    font-weight: 400 !important
}

.nowrap {
    white-space: nowrap
}

.pull-right {
    float: right
}

.pull-left {
    float: left
}

.m-0 {
    margin: 0 !important
}

.m-10 {
    margin: 10px !important
}

.m-15 {
    margin: 15px !important
}

.m-20 {
    margin: 20px !important
}

.m-25 {
    margin: 25px !important
}

.m-30 {
    margin: 30px !important
}

.m-35 {
    margin: 35px !important
}

.m-40 {
    margin: 40px !important
}

.m-45 {
    margin: 45px !important
}

.m-50 {
    margin: 50px !important
}

.m-55 {
    margin: 55px !important
}

.m-60 {
    margin: 60px !important
}

.m-t-auto {
    margin-top: auto !important
}

.m-t-0 {
    margin-top: 0 !important
}

.m-t-10 {
    margin-top: 10px !important
}

.m-t-15 {
    margin-top: 15px !important
}

.m-t-20 {
    margin-top: 20px !important
}

.m-t-25 {
    margin-top: 25px !important
}

.m-t-30 {
    margin-top: 30px !important
}

.m-t-35 {
    margin-top: 35px !important
}

.m-t-40 {
    margin-top: 40px !important
}

.m-t-45 {
    margin-top: 45px !important
}

.m-t-50 {
    margin-top: 50px !important
}

.m-t-55 {
    margin-top: 55px !important
}

.m-t-60 {
    margin-top: 60px !important
}

.m-b-0 {
    margin-bottom: 0 !important
}

.m-b-5 {
    margin-bottom: 5px
}

.m-b-10 {
    margin-bottom: 10px !important
}

.m-b-15 {
    margin-bottom: 15px !important
}

.m-b-20 {
    margin-bottom: 20px !important
}

.m-b-25 {
    margin-bottom: 25px !important
}

.m-b-30 {
    margin-bottom: 30px !important
}

.m-b-35 {
    margin-bottom: 35px !important
}

.m-b-40 {
    margin-bottom: 40px !important
}

.m-b-45 {
    margin-bottom: 45px !important
}

.m-b-50 {
    margin-bottom: 50px !important
}

.m-b-55 {
    margin-bottom: 55px !important
}

.m-b-60 {
    margin-bottom: 60px !important
}

.m-l-auto {
    margin-left: auto !important
}

.m-l-0 {
    margin-left: 0 !important
}

.m-l-10 {
    margin-left: 10px !important
}

.m-l-15 {
    margin-left: 15px !important
}

.m-l-20 {
    margin-left: 20px !important
}

.m-l-25 {
    margin-left: 25px !important
}

.m-l-30 {
    margin-left: 30px !important
}

.m-l-35 {
    margin-left: 35px !important
}

.m-l-40 {
    margin-left: 40px !important
}

.m-l-45 {
    margin-left: 45px !important
}

.m-l-50 {
    margin-left: 50px !important
}

.m-l-55 {
    margin-left: 55px !important
}

.m-l-60 {
    margin-left: 60px !important
}

.m-l-auto {
    margin-left: auto
}

.m-r-auto {
    margin-right: auto !important
}

.m-r-0 {
    margin-right: 0 !important
}

.m-r-3 {
    margin-right: 3px !important
}

.m-r-5 {
    margin-right: 5px !important
}

.m-r-10 {
    margin-right: 10px !important
}

.m-r-15 {
    margin-right: 15px !important
}

.m-r-20 {
    margin-right: 20px !important
}

.m-r-25 {
    margin-right: 25px !important
}

.m-r-30 {
    margin-right: 30px !important
}

.m-r-35 {
    margin-right: 35px !important
}

.m-r-40 {
    margin-right: 40px !important
}

.m-r-45 {
    margin-right: 45px !important
}

.m-r-50 {
    margin-right: 50px !important
}

.m-r-55 {
    margin-right: 55px !important
}

.m-r-60 {
    margin-right: 60px !important
}

.m-r-auto {
    margin-right: auto
}

.p-0 {
    padding: 0 !important
}

.p-10 {
    padding: 10px !important
}

.p-15 {
    padding: 15px !important
}

.p-20 {
    padding: 20px !important
}

.p-25 {
    padding: 25px !important
}

.p-30 {
    padding: 30px !important
}

.p-35 {
    padding: 35px !important
}

.p-40 {
    padding: 40px !important
}

.p-45 {
    padding: 45px !important
}

.p-50 {
    padding: 50px !important
}

.p-55 {
    padding: 55px !important
}

.p-60 {
    padding: 60px !important
}

.p-t-0 {
    padding-top: 0 !important
}

.p-t-10 {
    padding-top: 10px !important
}

.p-t-15 {
    padding-top: 15px !important
}

.p-t-20 {
    padding-top: 20px !important
}

.p-t-25 {
    padding-top: 25px !important
}

.p-t-30 {
    padding-top: 30px !important
}

.p-t-35 {
    padding-top: 35px !important
}

.p-t-40 {
    padding-top: 40px !important
}

.p-t-45 {
    padding-top: 45px !important
}

.p-t-50 {
    padding-top: 50px !important
}

.p-t-55 {
    padding-top: 55px !important
}

.p-t-60 {
    padding-top: 60px !important
}

.p-b-0 {
    padding-bottom: 0 !important
}

.p-b-10 {
    padding-bottom: 10px !important
}

.p-b-15 {
    padding-bottom: 15px !important
}

.p-b-20 {
    padding-bottom: 20px !important
}

.p-b-25 {
    padding-bottom: 25px !important
}

.p-b-30 {
    padding-bottom: 30px !important
}

.p-b-35 {
    padding-bottom: 35px !important
}

.p-b-40 {
    padding-bottom: 40px !important
}

.p-b-45 {
    padding-bottom: 45px !important
}

.p-b-50 {
    padding-bottom: 50px !important
}

.p-b-55 {
    padding-bottom: 55px !important
}

.p-b-60 {
    padding-bottom: 60px !important
}

.p-l-0 {
    padding-left: 0 !important
}

.p-l-10 {
    padding-left: 10px !important
}

.p-l-15 {
    padding-left: 15px !important
}

.p-l-20 {
    padding-left: 20px !important
}

.p-l-25 {
    padding-left: 25px !important
}

.p-l-30 {
    padding-left: 30px !important
}

.p-l-35 {
    padding-left: 35px !important
}

.p-l-40 {
    padding-left: 40px !important
}

.p-l-45 {
    padding-left: 45px !important
}

.p-l-50 {
    padding-left: 50px !important
}

.p-l-55 {
    padding-left: 55px !important
}

.p-l-60 {
    padding-left: 60px !important
}

.p-r-0 {
    padding-right: 0 !important
}

.p-r-10 {
    padding-right: 10px !important
}

.p-r-15 {
    padding-right: 15px !important
}

.p-r-20 {
    padding-right: 20px !important
}

.p-r-25 {
    padding-right: 25px !important
}

.p-r-30 {
    padding-right: 30px !important
}

.p-r-35 {
    padding-right: 35px !important
}

.p-r-40 {
    padding-right: 40px !important
}

.p-r-45 {
    padding-right: 45px !important
}

.p-r-50 {
    padding-right: 50px !important
}

.p-r-55 {
    padding-right: 55px !important
}

.p-r-60 {
    padding-right: 60px !important
}

.grid-layout-small {
    width: 100%;
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(345px, 1fr))
}

.grid-layout-small .checkbox-check {
    margin-bottom: 0
}

.grid-layout-half {
    width: 100%;
    display: grid;
    grid-gap: 30px;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr))
}

.grid-layout-half .checkbox-check {
    margin-bottom: 0
}

.bg-gray {
    background-color: #f7f7f7;
    padding: 20px
}

.page-title {
    margin-bottom: 30px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: start;
    align-items: flex-start
}

.page-title .title {
    -ms-flex: 1;
    flex: 1
}

.page-title h2,
.page-title h3,
.page-title h4,
.page-title h5,
.page-title h6 {
    margin-top: 15px;
    color: gray;
    font-weight: 400
}

.section-title {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 10px
}

.section-title h2,
.section-title h3,
.section-title h4,
.section-title h5,
.section-title h6 {
    -ms-flex: 1;
    flex: 1;
    font-weight: 400
}

.align-content-right {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: end;
    justify-content: flex-end
}

.align-content-left {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: start;
    justify-content: flex-start
}

.align-content-center {
    -ms-flex-pack: center;
    justify-content: center
}

.align-content-center,
.flex {
    display: -ms-flexbox;
    display: flex
}

.flex-vertical-center {
    -ms-flex-align: center !important;
    align-items: center !important
}

.flex-horizontal-center {
    -ms-flex-pack: center;
    justify-content: center
}

.flex-wrap {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.flex-vertical {
    -ms-flex-direction: column;
    flex-direction: column
}

.flex-1 {
    -ms-flex: 1;
    flex: 1
}

.flex-2 {
    -ms-flex: 2;
    flex: 2
}

.flex-3 {
    -ms-flex: 3;
    flex: 3
}

.flex-4 {
    -ms-flex: 4;
    flex: 4
}

.flex-5 {
    -ms-flex: 5;
    flex: 5
}

.grid {
    display: grid
}

.grid-two-equal {
    grid-template-columns: 1fr 1fr
}

.line {
    background: none;
    border: none;
    width: 100%;
    clear: both;
    display: block;
    margin: 0;
    padding: 0;
    height: 1px;
    background-color: #ddd
}

section {
    overflow-x: auto !important;
    overflow-y: hidden;
    max-width: 100%
}

@keyframes spin {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(359deg)
    }
}

@keyframes spin-with-translate {
    0% {
        transform: translate(-50%, -50%) rotate(0deg)
    }

    to {
        transform: translate(-50%, -50%) rotate(-359deg)
    }
}

.spin {
    animation: spin .7s infinite linear
}

.loading {
    position: relative;
    min-height: 100px
}

.loading:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: hsla(0, 0%, 100%, .9);
    z-index: 4
}

.loading:after {
    content: "\f1e1";
    font-family: Material-Design-Iconic-Font;
    font-size: 24px;
    animation: spin-with-translate .7s infinite linear;
    color: #026bb0;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 5
}

.joined-div {
    display: -ms-flexbox;
    display: flex;
    border: 1px solid #ddd;
    overflow: hidden !important
}

.joined-div>div {
    -ms-flex: 1;
    flex: 1;
    border-right: 1px solid #ddd;
    padding: 20px
}

.joined-div>div:last-child {
    border: none
}

.keywords-list {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.search-tag {
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 10px;
    height: 40px;
    border: 1px solid #ddd;
    margin-top: 5px;
    margin-right: 5px
}

.search-tag.include {
    border-color: #78b517
}

.search-tag.exclude {
    border-color: #f04124
}

.search-tag button {
    width: 25px;
    height: 25px;
    background-color: #fff;
    font: 0/0 a;
    border: 1px solid #ddd;
    border-radius: 50%;
    margin-left: 10px;
    cursor: pointer;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 0;
    outline: none
}

.search-tag button:before {
    font-family: Material-Design-Iconic-Font;
    font-size: 17px
}

.search-tag button.remove {
    border-color: #666;
    color: #666
}

.search-tag button.remove:before {
    content: "\f136"
}

.search-tag button.remove:hover {
    background-color: #666;
    color: #fff
}

.search-tag button.include {
    border-color: #78b517;
    color: #78b517
}

.search-tag button.include:before {
    content: "\f278"
}

.search-tag button.include:hover {
    background-color: #78b517;
    color: #fff
}

.search-tag button.exclude {
    border-color: #f04124;
    color: #f04124
}

.search-tag button.exclude:before {
    content: "\f273"
}

.search-tag button.exclude:hover {
    background-color: #f04124;
    color: #fff
}

.compare-wrapper {
    display: -ms-flexbox;
    display: flex;
    overflow-x: auto
}

.compare-new,
.compare-old {
    padding: 20px;
    min-width: 970px
}

.compare-old {
    background-color: #f7f7f7
}

.MathJax_Display,
.MJXc-display {
    text-align: left !important
}

.merge {
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
    cursor: auto;
    height: auto;
    width: auto;
    text-align: initial;
    text-transform: none;
    white-space: nowrap;
    font-family: inherit;
    font-size: inherit;
    vertical-align: baseline;
    opacity: 1;
    margin-right: 3px
}

.arabic .merge,
.rtl .merge {
    margin-right: 0;
    margin-left: 3px
}

.ltr .merge {
    margin-left: 0;
    margin-right: 3px
}

.merge_unit {
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
    cursor: auto;
    height: auto;
    width: auto;
    text-align: initial;
    text-transform: none;
    white-space: nowrap;
    font-family: inherit;
    font-size: inherit;
    vertical-align: baseline;
    opacity: 1
}

.no_margin {
    margin: 0 !important
}

.no-border {
    border: 0 !important
}

.content-scroll-vertical {
    max-height: 600px;
    overflow-y: auto
}

.book-cover {
    width: 200px
}

.book-cover figure {
    position: relative;
    z-index: -1;
    box-shadow: inset 2px 0 5px rgba(0, 0, 0, .1), 2px 2px 15px rgba(0, 0, 0, .2);
    border-radius: 0 3px 3px 0;
    line-height: 0;
    overflow: hidden
}

.book-cover figure:after {
    content: "";
    position: absolute;
    top: 0;
    left: 10px;
    bottom: 0;
    width: 3px;
    background: rgba(0, 0, 0, .06);
    box-shadow: 1px 0 3px hsla(0, 0%, 100%, .2)
}

.times {
    font-family: timesExtraBold
}

.font-big {
    font-size: 30px
}

.border {
    border: 1px solid #ddd
}

.border-top {
    border-top: 1px solid #ddd
}

.border-bottom {
    border-bottom: 1px solid #ddd
}

.border-right {
    border-right: 1px solid #ddd
}

.border-left {
    border-left: 1px solid #ddd
}

.full-width {
    width: 100%
}

.ar {
    font-size: 1.6rem
}

.ar,
.ar * {
    font-family: STIX2, DroidArabicNaskh, serif !important
}

.en {
    font-size: 1.8rem
}

.en,
.en * {
    font-family: STIX2, Times New Roman, serif !important
}

.sticky-top {
    position: -webkit-sticky;
    position: sticky;
    z-index: 5
}

.activity-practice__answer-message__title h4,
.activity-practice__answer-message__title h4 a,
.activity-practice__progress__info h5,
.activity-practice__progress__info h5 a,
.activity-practice__progress__info span,
.activity-practice__progress__info span a,
.noto,
.noto a {
    font-family: Noto Sans, sans-serif;
    font-size: 1.6rem
}

.f-icon {
    position: relative
}

.f-icon,
.f-icon:before {
    display: inline-block;
    line-height: 1
}

.f-icon:before {
    content: "";
    font-family: Font-Awesome;
    font-weight: 900 !important;
    font-style: normal !important;
    font-size: inherit;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "liga"
}

.f-icon.brand:before {
    font-family: Font-Awesome-Brands;
    font-weight: 300 !important
}

.check-icon:before {
    content: "\f00c"
}

.chevron-right-icon:before {
    content: "\f054"
}

.exchange-icon:before {
    content: "\f0ec"
}

.chevron-left-icon:before {
    content: "\f053"
}

.arrow-right-icon:before {
    content: "\f061"
}

.arrow-left-icon:before {
    content: "\f060"
}

.clock-icon:before {
    content: "\f017"
}

.branch-icon:before {
    content: "\f0e8"
}

.graduation-cap-icon:before {
    content: "\f19d"
}

.question-icon:before {
    content: "\f128"
}

.close-icon:before,
.incorrect-icon:before {
    content: "\f00d"
}

.lock-icon:before {
    content: "\f023"
}

.user-icon:before {
    content: "\f007"
}

.dashboard-icon:before {
    content: "\f0e4"
}

.hat-icon:before {
    content: "\f19d"
}

.search-icon:before {
    content: "\f002"
}

.arrow-head-down-icon:before {
    content: "\f107"
}

.piechart-icon:before {
    content: "\f200"
}

.question-mark-icon:before {
    content: "\f059"
}

.user-group-icon:before {
    content: "\f500"
}

.child-icon:before {
    content: "\f1ae"
}

.arrow-top-icon:before {
    content: "\f062"
}

.plus-icon:before {
    content: "\f067"
}

.plus-circle-icon:before {
    content: "\f055"
}

.play-circle-icon:before {
    content: "\f144"
}

.angle-double-arrow-icon:before {
    content: "\f101"
}

.video-icon:before {
    content: "\f03d"
}

.info-circle-icon:before {
    content: "\f05a"
}

.map-marker-alt-icon:before {
    content: "\f3c5"
}

.phone-icon:before {
    content: "\f879"
}

.envelope-icon:before {
    content: "\f0e0"
}

.globe-icon:before {
    content: "\f57d"
}

.arrow-alt-circle-right-icon:before {
    content: "\f0a9"
}

.credit-card-icon:before {
    content: "\f09d"
}

.paypal-icon:before {
    content: "\f1ed"
}

.file-text-icon:before {
    content: "\f15c"
}

.card-icon:before {
    content: "\f2bb"
}

.spinner-icon:before {
    content: "\f110"
}

.skipped-icon:before {
    content: "\f050"
}

.levels-icon:before {
    content: "\f201"
}

.home-icon:before {
    content: "\f015"
}

.eye-icon:before {
    content: "\f06e"
}

.pencil-icon:before {
    content: "\f040"
}

.trash-icon:before {
    content: "\f1f8"
}

.long-arrow-down-icon:before {
    content: "\f175"
}

.long-arrow-up-icon:before {
    content: "\f176"
}

.arrow-angle-right-icon:before {
    content: "\f105"
}

.arrow-angle-left-icon:before {
    content: "\f104"
}

.arrows-icon:before {
    content: "\f047"
}

.folders-icon:before {
    content: "\f660"
}

.folders-tree-icon:before {
    content: "\f802"
}

.books-icon:before {
    content: "\f5db"
}

.book-icon:before {
    content: "\f02d"
}

.ban-icon:before {
    content: "\f05e"
}

.file-edit-icon:before {
    content: "\f31c"
}

.file-contract-icon:before {
    content: "\f56c"
}

.file-certificate-icon:before {
    content: "\f5f3"
}

.file-chart-pie-icon:before {
    content: "\f65a"
}

.calendar-day-icon:before {
    content: "\f783"
}

.file-csv:before {
    content: "\f6dd"
}

.file-archive:before {
    content: "\f1c6"
}

.user-cog:before {
    content: "\f4fe"
}

.sync-icon:before {
    content: "\f021"
}

.chevron-double-right-icon:before {
    content: "\f324"
}

.circle-icon:before {
    content: "\f111"
}

.presentation-icon:before {
    content: "\f685"
}

.clone-icon:before {
    content: "\f24d"
}

.scroll-icon:before {
    content: "\f70e"
}

.grades-icon:before {
    content: "\f00b"
}

.layers-icon:before {
    content: "\f5fd"
}

.rectangle-portrait:before {
    content: "\f2fb"
}

.rectangle-landscape:before {
    content: "\f2fa"
}

.chart-scatter-icon:before {
    content: "\f7ee"
}

.expand-icon:before {
    content: "\f065"
}

.arrow-to-bottom-icon:before {
    content: "\f33d"
}

.chevron-down-icon:before {
    content: "\f078"
}

.coins-icon:before {
    content: "\f51e"
}

.hand-holding-usd-icon:before {
    content: "\f4c0"
}

.btn {
    font-family: Noto Sans, sans-serif;
    height: 40px;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 0 20px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    outline: none
}

.btn.loader {
    font-size: 0
}

.btn.loader:before {
    content: "\f3ec";
    font-family: Material-Design-Iconic-Font;
    font-size: 24px;
    animation: spinner .8s infinite steps(8)
}

.btn i {
    margin-right: 10px
}

.btn.icon {
    padding: 0;
    width: 40px
}

.btn.icon i {
    margin-right: 0
}

.btn:disabled {
    opacity: .5;
    cursor: not-allowed
}

.btn.big {
    height: 50px;
    padding: 0 60px;
    font-size: 14px
}

.btn.extra-big {
    height: 80px;
    padding: 0 80px;
    font-size: 18px
}

.btn-default {
    background-color: #f5aa00;
    border: 1px solid #f5aa00;
    color: #fff
}

.btn-default:hover {
    background-color: #fff;
    color: #f5aa00;
    text-decoration: none
}

.btn-blue {
    background-color: #026bb0;
    border: 1px solid #026bb0;
    color: #fff
}

.btn-blue:hover {
    background-color: #fff;
    color: #026bb0;
    text-decoration: none
}

.btn-green {
    background-color: #78b517;
    border: 1px solid #78b517;
    color: #fff
}

.btn-green:hover {
    background-color: #fff;
    color: #78b517;
    text-decoration: none
}

.btn-red {
    background-color: #f04124;
    border: 1px solid #f04124;
    color: #fff
}

.btn-red:hover {
    background-color: #fff;
    color: #f04124;
    text-decoration: none
}

.btn-black {
    background-color: #333;
    border: 1px solid #333;
    color: #fff
}

.btn-black:hover {
    background-color: #fff;
    color: #333;
    text-decoration: none
}

.btn-white {
    background-color: #fff;
    border: 1px solid #ddd;
    color: #f5aa00
}

.btn-white:hover {
    background-color: #fff;
    color: #333;
    border-color: #333;
    text-decoration: none
}

.button-group {
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-align: center;
    align-items: center;
    border: 1px solid #ddd
}

.button-group .btn {
    border: none;
    border-right: 1px solid #ddd
}

.button-group .btn:last-child {
    border-right: none
}

.btn-outline {
    font-family: Noto Sans, sans-serif;
    height: 40px;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 0 20px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    outline: none
}

.btn-outline i {
    margin-right: 10px
}

.btn-outline.icon {
    padding: 0;
    width: 40px
}

.btn-outline.icon i {
    margin-right: 0
}

.btn-outline:disabled {
    opacity: .5;
    cursor: not-allowed
}

.btn-outline.big {
    height: 50px;
    padding: 0 60px;
    font-size: 14px
}

.btn-outline-default {
    background-color: #fff;
    border: 1px solid #f5aa00;
    color: #f5aa00
}

.btn-outline-default:hover {
    background-color: #f5aa00;
    color: #fff;
    text-decoration: none
}

.btn-outline-blue {
    background-color: #fff;
    border: 1px solid #026bb0;
    color: #026bb0
}

.btn-outline-blue:hover {
    background-color: #026bb0;
    color: #fff;
    text-decoration: none
}

.btn-outline-green {
    background-color: #fff;
    border: 1px solid #78b517;
    color: #78b517
}

.btn-outline-green:hover {
    background-color: #78b517;
    color: #fff;
    text-decoration: none
}

.btn-outline-red {
    background-color: #fff;
    border: 1px solid #f04124;
    color: #f04124
}

.btn-outline-red:hover {
    background-color: #f04124;
    color: #fff;
    text-decoration: none
}

.btn-outline-black {
    background-color: #fff;
    border: 1px solid #333;
    color: #333
}

.btn-outline-black:hover {
    background-color: #333;
    color: #fff;
    text-decoration: none
}

.button-outline-group {
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-align: center;
    align-items: center;
    border: 1px solid #ddd
}

.button-outline-group .btn {
    border: none;
    border-right: 1px solid #ddd
}

.button-outline-group .btn:last-child {
    border-right: none
}

.btn-link {
    font-family: Noto Sans, sans-serif;
    -ms-flex-align: center;
    align-items: center;
    display: -ms-inline-flexbox;
    display: inline-flex;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0 5px;
    background: none;
    border: none;
    cursor: pointer;
    outline: none
}

.btn-link:hover {
    opacity: .6;
    text-decoration: none
}

.btn-link.btn-green-outline {
    border: 1px solid;
    width: 40px;
    min-width: 40px;
    height: 40px;
    border-radius: 0;
    font-size: 24px;
    text-align: center;
    line-height: 40px;
    position: relative;
    padding: 0;
    top: -1px;
    margin-left: 10px;
    color: #78b517
}

.btn-link.btn-green-outline i {
    margin: auto
}

.btn-link.icon {
    padding: 0;
    width: 40px
}

.btn-link.icon i {
    margin-right: 0
}

.btn-link i {
    margin-right: 5px
}

.btn-link.btn-icon-center {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    line-height: normal
}

.btn-link-default {
    color: #f5aa00
}

.btn-link-blue {
    color: #026bb0
}

.btn-link-green {
    color: #78b517
}

.btn-link-red {
    color: #f04124
}

.btn-link-black {
    color: #333
}

a.disabled,
a[disabled=disabled] {
    pointer-events: none;
    cursor: not-allowed;
    opacity: .5
}

.pagniation:after,
.pagniation:before {
    content: " ";
    display: table
}

.pagniation:after {
    clear: both
}

.pagniation ul {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center
}

.pagniation li {
    margin: 0 5px
}

.pagniation li:first-child {
    margin-left: 0
}

.pagniation li:last-child {
    margin-right: 0
}

.pagniation li.active a,
.pagniation li.active button {
    cursor: default;
    background-color: #f5aa00;
    color: #fff;
    -ms-touch-action: none;
    touch-action: none;
    pointer-events: none
}

.pagniation a,
.pagniation button {
    height: 40px;
    width: 40px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    border: 1px solid #f5aa00;
    background-color: #fff;
    color: #f5aa00;
    cursor: pointer;
    font-family: Noto Sans, sans-serif;
    font-size: 15px
}

.pagniation a:hover,
.pagniation button:hover {
    text-decoration: none;
    background-color: #f5aa00;
    color: #fff
}

@keyframes spinner {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(1turn)
    }
}

h1 {
    font-size: 26px
}

h1 small {
    font-size: 65%;
    display: block;
    margin-top: .5rem;
    color: #999
}

h1 small span {
    color: #333;
    font-weight: 700;
    transform: translateY(2px);
    display: inline-block;
    margin: 0 4px
}

h2 {
    font-size: 20px
}

h3 {
    font-size: 18px
}

h4 {
    font-size: 16px;
    font-weight: 700;
    color: gray
}

.form-inline h2 {
    text-align: center
}

.form-inline .input-group,
.form-inline .input-group-vertical {
    display: -ms-flexbox;
    display: flex;
    margin-top: 30px;
    -ms-flex-align: end;
    align-items: flex-end;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.form-inline .input-group-vertical:first-child,
.form-inline .input-group:first-child {
    margin-top: 0
}

.form-inline .input-group-vertical {
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: start;
    align-items: flex-start
}

.form-inline .checkbox-check,
.form-inline .checkbox-switch,
.form-inline .input-date,
.form-inline .input-datetime,
.form-inline .input-select,
.form-inline .input-text,
.form-inline .input-textarea,
.form-inline .input-time,
.form-inline .radio-check,
.form-inline>div {
    -ms-flex: 1;
    flex: 1;
    margin-right: 30px
}

@media (max-width:650px) {

    .form-inline .checkbox-check,
    .form-inline .checkbox-switch,
    .form-inline .input-date,
    .form-inline .input-datetime,
    .form-inline .input-select,
    .form-inline .input-text,
    .form-inline .input-textarea,
    .form-inline .input-time,
    .form-inline .radio-check,
    .form-inline>div {
        margin: 0;
        margin-bottom: 30px;
        width: 100%
    }
}

.form-inline>div .checkbox-check {
    display: -ms-inline-flexbox;
    display: inline-flex
}

.input-group-vertical {
    display: -ms-flexbox;
    display: flex;
    margin-top: 30px;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: start;
    align-items: flex-start
}

.input-group-vertical:first-child {
    margin-top: 0
}

.input-group-horizontal {
    display: -ms-inline-flexbox;
    display: inline-flex
}

.input-group-horizontal .checkbox-check:last-child {
    margin-bottom: auto
}

.input-group {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: end;
    align-items: flex-end
}

@media (max-width:650px) {
    .input-group {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }
}

.input-group .checkbox-check,
.input-group .checkbox-switch,
.input-group .input-date,
.input-group .input-datetime,
.input-group .input-select,
.input-group .input-text,
.input-group .input-textarea,
.input-group .input-time,
.input-group .radio-check,
.input-group>div {
    -ms-flex: 1;
    flex: 1;
    margin-right: 15px
}

.input-group .checkbox-check:last-child,
.input-group .checkbox-switch:last-child,
.input-group .input-date:last-child,
.input-group .input-datetime:last-child,
.input-group .input-select:last-child,
.input-group .input-text:last-child,
.input-group .input-textarea:last-child,
.input-group .input-time:last-child,
.input-group .radio-check:last-child,
.input-group>div:last-child {
    margin: 0
}

@media (max-width:650px) {

    .input-group .checkbox-check,
    .input-group .checkbox-switch,
    .input-group .input-date,
    .input-group .input-datetime,
    .input-group .input-select,
    .input-group .input-text,
    .input-group .input-textarea,
    .input-group .input-time,
    .input-group .radio-check,
    .input-group>div {
        margin: 0;
        margin-bottom: 30px;
        width: 100%;
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%
    }
}

.input-group>div .checkbox-check {
    display: -ms-inline-flexbox;
    display: inline-flex
}

.input-group .radio-button {
    margin-left: -1px
}

.inline-input-group>span.label {
    margin-bottom: 20px;
    display: block;
    width: 100%
}

.inline-input-group>div {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 10px
}

.inline-input-group>div:last-child {
    margin-bottom: 0
}

.inline-input-group>div .radio-check {
    margin: 0 10px 0 0
}

.inline-input-group>div .input-date,
.inline-input-group>div .input-datetime,
.inline-input-group>div .input-select,
.inline-input-group>div .input-text,
.inline-input-group>div .input-time {
    -ms-flex: 1;
    flex: 1;
    margin: 0 10px 0 0
}

.inline-input-group>div .checkbox-check {
    display: -ms-inline-flexbox;
    display: inline-flex
}

.flex-input-group {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    z-index: 2
}

.flex-input-group span.label {
    margin-bottom: 0
}

span.label {
    margin-bottom: 10px
}

.group-title {
    margin-bottom: 15px
}

.input-text {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    position: relative
}

.input-text input[type=number],
.input-text input[type=password],
.input-text input[type=text],
.input-text input[type=time] {
    height: 40px;
    min-width: 100px;
    border: 1px solid #ddd;
    padding: 5px 15px;
    font-family: Noto Sans, sans-serif;
    font-size: 15px;
    line-height: 40px;
    color: #333
}

.input-text input[type=number]:focus,
.input-text input[type=password]:focus,
.input-text input[type=text]:focus,
.input-text input[type=time]:focus {
    border-color: #f5aa00
}

.input-text input[type=number].input-validation-error,
.input-text input[type=password].input-validation-error,
.input-text input[type=text].input-validation-error,
.input-text input[type=time].input-validation-error {
    border-color: #f04124
}

.input-text input[type=number].small,
.input-text input[type=password].small,
.input-text input[type=text].small,
.input-text input[type=time].small {
    width: 100px
}

.input-text input[type=number] {
    width: 100%
}

.input-text input[disabled],
.input-text input[readonly] {
    cursor: not-allowed;
    background-color: #f7f7f7;
    color: gray
}

.input-text span.error,
.input-text span.error-file-upload {
    color: #f04124;
    display: none
}

.input-text.input-search input[type=text] {
    border: 0;
    border-bottom: 1px solid #ddd;
    padding: 0 15px 0 0;
    height: 3rem;
    line-height: 1
}

.input-text.input-search input[type=text]:focus {
    border-color: #f5aa00
}

.input-text.input-search--no-border input[type=text] {
    border: 0
}

.div-input-text {
    min-height: 40px;
    min-width: 100px;
    border: 1px solid #ddd;
    padding: 5px 15px;
    font-family: Noto Sans, sans-serif;
    font-size: 15px;
    line-height: 40px
}

.div-input-text:focus {
    border-color: #f5aa00
}

.radio-button {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer;
    margin-right: 0
}

.radio-button:last-child span.label {
    border-left: none
}

.radio-button input[type=radio] {
    display: none
}

.radio-button input[type=radio]:checked+span.label {
    background-color: #026bb0;
    color: #fff;
    border-color: #026bb0
}

.radio-button input[type=radio][disabled]~.check-mark {
    background-color: #f7f7f7
}

.radio-button input[type=radio][disabled]~i {
    color: #ccc
}

.radio-button span.label {
    min-width: 150px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 0 20px;
    border: 1px solid #ddd;
    background-color: #fff;
    color: #026bb0;
    text-align: center;
    height: 40px
}

.radio-button i {
    margin-left: 5px
}

.input-select {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    position: relative
}

.input-select select {
    height: 40px;
    min-width: 100px;
    border: 1px solid #ddd;
    padding: 5px 15px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: relative;
    background-image: url(../images/select-arrow.svg);
    background-repeat: no-repeat;
    background-size: 11px 6px;
    background-position: right 10px center;
    border-radius: 0;
    background-color: #fff;
    font-size: 15px;
    font-family: Noto Sans, sans-serif
}

.input-select select::-ms-expand {
    display: none
}

.input-select select:active,
.input-select select:focus,
.input-select select:visited {
    border-color: #f5aa00
}

.input-select select .select2-selection__arrow {
    display: none
}

.input-select select[disabled],
.input-select select[readonly] {
    cursor: not-allowed;
    background-color: #f7f7f7;
    color: gray;
    opacity: 1
}

.input-select span.error {
    position: absolute;
    bottom: -22px;
    color: #f04124;
    display: none
}

.input-date,
.input-datetime,
.input-time {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column
}

.input-date input[type=text],
.input-datetime input[type=text],
.input-time input[type=text] {
    height: 40px;
    min-width: 100px;
    border: 1px solid #ddd;
    padding: 5px 15px;
    font-family: Noto Sans, sans-serif;
    font-size: 15px;
    line-height: 40px;
    color: #333
}

.input-date input[type=text]:focus,
.input-datetime input[type=text]:focus,
.input-time input[type=text]:focus {
    border-color: #f5aa00
}

.input-date input[type=text][disabled],
.input-datetime input[type=text][disabled],
.input-time input[type=text][disabled] {
    color: gray;
    background-color: #f7f7f7
}

.input-upload input {
    display: none
}

.input-upload input:focus+span {
    background-color: #fff;
    color: #f5aa00;
    text-decoration: none
}

.input-upload span:nth-child(2) {
    font-family: Noto Sans, sans-serif;
    height: 40px;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 0 15px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    outline: none;
    background-color: #f5aa00;
    border: 1px solid #f5aa00;
    color: #fff;
    white-space: nowrap
}

.input-upload span:nth-child(2) * {
    pointer-events: none
}

.input-upload span:nth-child(2) i {
    margin-right: 10px
}

.input-upload span:nth-child(2):hover {
    background-color: #fff;
    color: #f5aa00;
    text-decoration: none
}

.input-upload.gray {
    -ms-flex: 1;
    flex: 1
}

.input-upload.gray span:nth-child(2) {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: gray;
    background-color: #fff;
    border: 1px dashed #ccc;
    transition: all .3s
}

.input-upload.gray span:nth-child(2):hover {
    border-color: #333;
    color: #333
}

.upload-with-sumbit {
    display: -ms-flexbox;
    display: flex
}

.upload-with-sumbit .input-upload {
    margin-right: 10px
}

.input-textarea {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    position: relative;
    width: 100%;
    overflow-x: auto
}

.input-textarea textarea {
    min-width: 250px;
    min-height: 120px;
    border: 1px solid #ddd;
    padding: 10px 15px;
    resize: vertical;
    font-family: Noto Sans, sans-serif;
    font-size: 15px
}

.input-textarea textarea:focus {
    border-color: #f5aa00
}

.input-textarea.tall textarea {
    min-height: 300px
}

.input-textarea.very-tall textarea {
    min-height: 950px
}

.input-textarea textarea[disabled],
.input-textarea textarea[readonly] {
    cursor: not-allowed;
    color: gray;
    background-color: #f7f7f7
}

.input-textarea .no-resize {
    resize: none !important
}

.div-textarea {
    min-width: 250px;
    min-height: 120px;
    border: 1px solid #ddd;
    padding: 10px 15px;
    resize: vertical;
    font-family: Noto Sans, sans-serif;
    font-size: 15px;
    overflow-x: auto
}

.div-textarea:focus {
    border-color: #f5aa00
}

.checkbox-switch {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer;
    margin-bottom: 10px
}

.checkbox-switch:last-child {
    margin-bottom: 0
}

.checkbox-switch span.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
    margin: 0
}

.checkbox-switch span.switch input[type=checkbox] {
    display: none
}

.checkbox-switch span.switch input[type=checkbox]:checked+.slider,
.checkbox-switch span.switch input[type=checkbox]:checked+input[type=hidden]+.slider {
    background-color: #78b517
}

.checkbox-switch span.switch input[type=checkbox]:focus+.slider,
.checkbox-switch span.switch input[type=checkbox]:focus+input[type=hidden]+.slider {
    box-shadow: 0 0 1px #78b517
}

.checkbox-switch span.switch input[type=checkbox]:checked+.slider:before,
.checkbox-switch span.switch input[type=checkbox]:checked+input[type=hidden]+.slider:before {
    transform: translateX(22px)
}

.checkbox-switch span.switch input[type=checkbox]:checked[disabled]+.slider,
.checkbox-switch span.switch input[type=checkbox]:checked[disabled]+input[type=hidden]+.slider {
    background-color: #78b517;
    opacity: .5;
    cursor: not-allowed
}

.checkbox-switch span.switch input[type=checkbox][disabled]+.slider {
    background-color: #ccc;
    cursor: not-allowed
}

.checkbox-switch span.switch input[type=checkbox][disabled]+.slider:before {
    background-color: #f7f7f7
}

.checkbox-switch span.switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid #ddd;
    transition: .2s;
    border-radius: 20px
}

.checkbox-switch span.switch .slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    top: -1px;
    left: -1px;
    bottom: 0;
    background-color: #fff;
    transition: .2s;
    border-radius: 50%;
    border: 1px solid #ddd
}

.checkbox-switch i {
    margin-left: 5px
}

.checkbox-check {
    position: relative;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer;
    margin-bottom: 10px
}

.checkbox-check:last-child {
    margin-bottom: 0
}

.checkbox-check input[type=checkbox],
.checkbox-check input[type=checkbox][disabled] {
    display: none
}

.checkbox-check input[type=checkbox]:checked+.check-mark:before,
.checkbox-check input[type=checkbox]:checked+input[type=hidden]+.check-mark:before,
.checkbox-check input[type=checkbox][disabled]:checked+.check-mark:before,
.checkbox-check input[type=checkbox][disabled]:checked+input[type=hidden]+.check-mark:before {
    transform: scale(1)
}

.checkbox-check input[type=checkbox][disabled]~.check-mark {
    background-color: #ccc;
    cursor: not-allowed
}

.checkbox-check input[type=checkbox][disabled]~i {
    color: #ccc;
    cursor: not-allowed
}

.checkbox-check .check-mark {
    width: 20px;
    height: 20px;
    border: 1px solid #ccc;
    position: relative;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center
}

.checkbox-check .check-mark:before {
    content: "\f26b";
    font-family: Material-Design-Iconic-Font;
    font-size: 19px;
    font-weight: 700;
    color: #78b517;
    transform: scale(0);
    transform-origin: center center;
    transition: all .2s
}

.checkbox-check i {
    margin-left: 5px;
    font-style: normal
}

.radio-check {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer;
    margin-bottom: 10px
}

.radio-check:last-child {
    margin-bottom: 0
}

.radio-check input[type=radio] {
    display: none
}

.radio-check input[type=radio]:checked+.check-mark:before {
    transform: scale(1)
}

.radio-check input[type=radio][disabled]~.check-mark {
    background-color: #f7f7f7
}

.radio-check input[type=radio][disabled]~i {
    color: #ccc
}

.radio-check .check-mark {
    width: 20px;
    height: 20px;
    border: 1px solid #ccc;
    border-radius: 50%;
    position: relative;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center
}

.radio-check .check-mark:before {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #78b517;
    transform: scale(0);
    transform-origin: center center;
    transition: all .2s
}

.radio-check i {
    margin-left: 5px;
    font-style: normal
}

.radio-group ul {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center
}

.radio-group ul li {
    -ms-flex: 1;
    flex: 1;
    position: relative;
    margin-right: 10px
}

.radio-group ul li:last-child {
    margin-right: 0
}

.radio-group ul input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    opacity: 0;
    display: block;
    visibility: hidden;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    width: 100%;
    margin: 0
}

.radio-group ul input:checked+label {
    background: #666;
    color: #fff;
    font-weight: 700
}

.radio-group ul label {
    display: block;
    height: 50px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    background-color: #fff;
    color: #333;
    border: 1px solid #ddd
}

.tags-input {
    border-radius: 0 !important;
    min-height: 40px !important;
    border: 1px solid #ddd !important;
    padding: 0 !important
}

.tags-input ul {
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.tags-input li,
.tags-input ul {
    -ms-flex-align: center;
    align-items: center
}

.tags-input li {
    background-color: #f7f7f7 !important;
    padding: 5px !important;
    border: 1px solid #ddd !important;
    border-radius: 0 !important;
    margin: 5px 5px 5px 0 !important;
    height: 30px !important;
    display: -ms-inline-flexbox !important;
    display: inline-flex !important
}

.tags-input li:last-child {
    background: none !important;
    border: none !important;
    padding: 0 !important
}

.tags-input li:last-child input {
    font-family: Noto Sans, sans-serif !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-align: center;
    align-items: center;
    margin: 0 !important;
    height: 100%
}

.tags-input li span {
    margin-right: 5px !important
}

.tags-input-has-width .select2-container,
.tags-input-has-width .select2-selection {
    max-width: 250px !important;
    max-height: 120px;
    overflow: auto
}

.ui-datepicker.ui-widget.ui-widget-content {
    background-color: #fff;
    border: 1px solid #ddd;
    transition: none;
    border-radius: 0
}

.ui-datepicker.ui-widget.ui-widget-content * {
    transition: none
}

.ui-datepicker.ui-widget.ui-widget-content .ui-datepicker-header {
    border-radius: 0;
    background-color: #026bb0;
    color: #fff
}

.ui-datepicker.ui-widget.ui-widget-content .ui-datepicker-next,
.ui-datepicker.ui-widget.ui-widget-content .ui-datepicker-prev {
    border: 1px solid #026bb0;
    top: 3px;
    cursor: pointer
}

.ui-datepicker.ui-widget.ui-widget-content .ui-datepicker-next:hover,
.ui-datepicker.ui-widget.ui-widget-content .ui-datepicker-prev:hover {
    text-decoration: none;
    border-color: #026bb0
}

.ui-datepicker.ui-widget.ui-widget-content .ui-datepicker-next:hover:before,
.ui-datepicker.ui-widget.ui-widget-content .ui-datepicker-prev:hover:before {
    color: #f5aa00
}

.ui-datepicker.ui-widget.ui-widget-content .ui-datepicker-next span,
.ui-datepicker.ui-widget.ui-widget-content .ui-datepicker-prev span {
    display: none
}

.ui-datepicker.ui-widget.ui-widget-content .ui-datepicker-prev {
    left: 2px
}

.ui-datepicker.ui-widget.ui-widget-content .ui-datepicker-prev:before {
    content: "\f2ea";
    font-family: Material-Design-Iconic-Font;
    color: #333
}

.ui-datepicker.ui-widget.ui-widget-content .ui-datepicker-next {
    right: 2px
}

.ui-datepicker.ui-widget.ui-widget-content .ui-datepicker-next:before {
    content: "\f2ee";
    font-family: Material-Design-Iconic-Font;
    color: #333
}

.ui-datepicker.ui-widget.ui-widget-content th {
    color: #026bb0
}

.ui-datepicker.ui-widget.ui-widget-content tbody,
.ui-datepicker.ui-widget.ui-widget-content td,
.ui-datepicker.ui-widget.ui-widget-content thead,
.ui-datepicker.ui-widget.ui-widget-content tr {
    background-color: #fff
}

.ui-datepicker.ui-widget.ui-widget-content a {
    background-color: #fff;
    border-color: #ddd;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: gray
}

.ui-datepicker.ui-widget.ui-widget-content a.ui-state-hover {
    border-color: #666;
    color: #000
}

.ui-datepicker.ui-widget.ui-widget-content a.ui-state-highlight {
    border-color: #f5aa00;
    color: #000
}

.ui-datepicker.ui-widget.ui-widget-content a.ui-state-active {
    background-color: #f5aa00;
    border-color: #f5aa00;
    color: #fff
}

.select2-container .select2-selection:not(.tags-input) {
    height: 40px;
    min-width: 100px;
    border: 1px solid #ddd;
    padding: 5px 15px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: relative;
    background-image: url(../images/select-arrow.svg);
    background-repeat: no-repeat;
    background-size: 11px 6px;
    background-position: right 10px center;
    border-radius: 0;
    background-color: #fff;
    font-size: 15px;
    outline: none
}

.select2-container .select2-selection:not(.tags-input)::-ms-expand {
    display: none
}

.select2-container .select2-selection:not(.tags-input):active,
.select2-container .select2-selection:not(.tags-input):focus,
.select2-container .select2-selection:not(.tags-input):visited {
    border-color: #f5aa00
}

.select2-container .select2-selection:not(.tags-input) .select2-selection__arrow {
    display: none
}

.select2-container .select2-selection:not(.tags-input) .select2-selection__rendered {
    padding-left: 0
}

.select2-dropdown {
    border: 1px solid #ddd
}

.select2-dropdown .select2-search__field {
    border: 1px solid #ddd !important;
    height: 35px;
    padding: 0 15px
}

.select2-search--dropdown {
    padding: 10px
}

.field-validation-error {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: #f04124
}

.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div {
    background-color: #fff;
    border-color: #ddd
}

.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div.xdsoft_current {
    background: #026bb0
}

.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div:hover {
    background-color: #f5aa00 !important
}

.xdsoft_datetimepicker .xdsoft_calendar tbody,
.xdsoft_datetimepicker .xdsoft_calendar td,
.xdsoft_datetimepicker .xdsoft_calendar th,
.xdsoft_datetimepicker .xdsoft_calendar thead {
    background-color: #fff;
    border-color: #ddd
}

.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current {
    background: #026bb0
}

.xdsoft_datetimepicker .xdsoft_calendar td:hover {
    background-color: #f5aa00 !important
}

.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_today {
    color: #026bb0;
    font-weight: 700
}

.search form {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    height: 35px;
    border-radius: 20px;
    position: relative;
    width: 3.5rem;
    overflow: hidden;
    transition: all .3s
}

.search form label {
    -ms-flex: 1;
    flex: 1;
    height: 100%
}

.search form input[type=text] {
    line-height: 38px
}

.search form input {
    height: 100%;
    border-radius: 20px;
    border: 1px solid #f5aa00;
    width: 100%;
    padding: 0 4rem 0 1.5rem
}

.search form button {
    position: absolute;
    right: 0;
    border: none;
    background-color: transparent
}

.search form button:hover {
    background-color: transparent;
    color: #f5aa00
}

.package-content .select2-selection--multiple {
    background-image: url(../images/select-arrow.svg);
    background-repeat: no-repeat;
    background-size: 11px 6px;
    background-position: right 10px center
}

.package-content .checkbox-check:hover,
.package-content .radio-check:hover {
    color: #f5aa00
}

.package-content .checkbox-check:hover .check-mark,
.package-content .radio-check:hover .check-mark {
    border-color: #f5aa00
}

.table-basic {
    width: 100%;
    border: 1px solid #ddd;
    border-collapse: collapse
}

.table-basic,
.table-wrapper {
    max-width: 100%;
    overflow-x: auto
}

.no-strips tr:nth-child(2n) {
    background-color: #fff
}

.no-strips tr:nth-child(2n):hover {
    background-color: #f8f8f8
}

thead {
    background-color: #f7f7f7
}

thead tr.guide,
tr.guide {
    background-color: #fff
}

tr.guide span {
    width: 15px;
    height: 15px;
    display: inline-block;
    border-radius: 50%;
    margin-right: 5px
}

tr.guide span.green {
    background: #78b517
}

tr.guide span.yellow {
    background: #cabc00
}

tr.guide span.orange {
    background: #f5aa00
}

tr.guide span.red {
    background: #f04124
}

tr {
    transition: .3s
}

tr:hover,
tr:hover .tableComment .seeMore,
tr:nth-child(2n),
tr:nth-child(2n) .tableComment .seeMore {
    background-color: #f8f8f8
}

tr.rejected {
    background-color: #ffe6e6 !important
}

tr.expand.collapse {
    cursor: pointer;
    font: 0/0 a;
    position: relative;
    height: 10px;
    background-color: #f7f7f7;
    background-image: url(../images/expand-bg.png);
    background-repeat: no-repeat;
    background-position: 0 0
}

tr.expand.collapse th {
    padding: 0
}

tr.expand {
    cursor: pointer;
    font: 0/0 a;
    position: relative;
    height: 10px;
    background-color: #f7f7f7;
    background-image: url(../images/collapse-bg.png);
    background-repeat: no-repeat;
    background-position: 0 3px
}

tr.expand th {
    padding: 0;
    border: none
}

tr.end {
    height: 5px;
    background-color: #d0d0d0;
    position: relative
}

tr.end td {
    padding: 0;
    border: none
}

th {
    padding: 15px 10px;
    border: 1px solid #ddd;
    font-weight: 700;
    color: #666;
    vertical-align: middle
}

th.big {
    width: 50%
}

th .status {
    margin-top: 10px;
    padding-top: 5px;
    border-top: 1px solid #ddd
}

td.rtl,
th.rtl {
    direction: rtl;
    text-align: right;
    font-family: NotoNaskhArabic;
    font-size: 17px
}

td.center,
th.center {
    text-align: center
}

td.orange,
th.orange {
    color: #f5aa00
}

td.yellow,
th.yellow {
    color: #cabc00
}

td.red,
th.red {
    color: #f04124
}

td.green,
th.green {
    color: #78b517
}

td.blue,
th.blue {
    color: #026bb0
}

td.orange-solid,
th.orange-solid {
    color: #fff;
    background-color: #f5aa00;
    font-weight: 700
}

td.blue-solid,
th.blue-solid {
    color: #fff;
    background-color: #026bb0;
    font-weight: 700
}

td.green-solid,
th.green-solid {
    color: #fff;
    background-color: #78b517;
    font-weight: 700
}

td.red-solid,
th.red-solid {
    color: #fff;
    background-color: #e51d74;
    font-weight: 700
}

td.orange-solid-overlay,
th.orange-solid-overlay {
    color: #fff;
    background-color: #fbeed0;
    font-weight: 700
}

td.blue-solid-overlay,
th.blue-solid-overlay {
    color: #026bb0;
    background-color: #d0e0ed;
    font-weight: 700
}

td.green-solid-overlay,
th.green-solid-overlay {
    color: #78b517;
    background-color: #e6efd4;
    font-weight: 700
}

td.red-solid-overlay,
th.red-solid-overlay {
    color: #e51d74;
    background-color: #f4d4e2;
    font-weight: 700
}

td .rotate,
th .rotate {
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    white-space: nowrap;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    transform: scaleY(-1) scaleX(-1)
}

@-moz-document url-prefix() {

    td .rotate,
    th .rotate {
        display: inline-block;
        text-align: center;
        width: 100%;
        vertical-align: middle
    }
}

@supports (-ms-ime-align:auto) {

    td .rotate,
    th .rotate {
        display: inline-block;
        text-align: center;
        width: 100%;
        vertical-align: middle
    }
}

td .rotate-organic,
th .rotate-organic {
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    white-space: nowrap;
    transform: scaleY(-1) scaleX(-1)
}

@-moz-document url-prefix() {

    td .rotate-organic,
    th .rotate-organic {
        display: inline-block;
        text-align: center;
        width: 100%;
        vertical-align: middle
    }
}

@supports (-ms-ime-align:auto) {

    td .rotate-organic,
    th .rotate-organic {
        display: inline-block;
        text-align: center;
        width: 100%;
        vertical-align: middle
    }
}

td .status,
th .status {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center
}

td .status i,
th .status i {
    margin-right: 5px;
    width: 15px;
    text-align: center
}

td .status div,
th .status div {
    -ms-flex: 1;
    flex: 1;
    text-align: center;
    position: relative;
    padding: 3px 5px
}

td .status div:after,
th .status div:after {
    content: "";
    width: 1px;
    height: 15px;
    background-color: #ddd;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%)
}

td .status div:last-child:after,
th .status div:last-child:after {
    display: none
}

td .status .right,
th .status .right {
    color: #78b517
}

td .status .wrong,
th .status .wrong {
    color: #f04124
}

td .status .edit,
th .status .edit {
    color: #f5aa00
}

td .status .queue,
td .status .requested,
th .status .queue,
th .status .requested {
    color: #026bb0
}

td {
    padding: 10px;
    border: 1px solid #ddd;
    line-height: 1.7
}

td.small {
    width: 250px
}

td ul:not(.list) {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center
}

td ul:not(.list).icons li {
    margin-right: 10px
}

td ul:not(.list).icons li:after {
    display: none
}

td ul:not(.list).icons li:last-child {
    margin: 0
}

td ul:not(.list) li {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    padding-right: 10px
}

td ul:not(.list) li:last-child {
    padding-right: 0
}

td ul:not(.list) li a {
    white-space: nowrap
}

td img {
    max-height: 150px;
    width: auto
}

td.fit-content {
    position: relative
}

td.fit-content .input-textarea {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    padding: 15px
}

td.fit-content .input-textarea textarea {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden
}

td.align-top {
    vertical-align: top
}

td .keyword {
    background-color: #f7f7f7;
    padding: 5px;
    border: 1px solid #ddd;
    margin-left: 5px
}

span.level {
    height: 30px;
    display: -ms-inline-flexbox;
    display: inline-flex;
    vertical-align: middle;
    width: 10px;
    background-color: #ddd;
    margin-right: 10px;
    position: relative
}

span.level i {
    width: 100%;
    position: absolute;
    bottom: 0;
    z-index: 2;
    height: 20%
}

span.level i.red {
    background-color: #f04124
}

span.level i.yellow {
    background-color: #f5aa00
}

span.level i.green {
    background-color: #78b517
}

tfoot,
tfoot tr:hover {
    background-color: #fff9eb
}

tfoot td {
    font-weight: 700
}

@-moz-document url-prefix() {

    table.dataTable,
    table.sortable-static {
        display: -moz-deck
    }
}

table.dataTable.no-footer,
table.sortable-static.no-footer {
    border-collapse: collapse;
    border: none
}

table.dataTable thead th,
table.sortable-static thead th {
    border-bottom: none;
    padding: 15px 10px;
    font-weight: 700
}

table.dataTable thead td,
table.sortable-static thead td {
    border-bottom: none;
    padding: 15px 10px;
    font-weight: 400
}

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_desc_disabled,
table.sortable-static thead .sorting,
table.sortable-static thead .sorting_asc,
table.sortable-static thead .sorting_asc_disabled,
table.sortable-static thead .sorting_desc,
table.sortable-static thead .sorting_desc_disabled {
    background-size: 11px;
    background-position: center right 5px;
    background-repeat: no-repeat;
    padding-right: 20px;
    cursor: pointer
}

table.dataTable thead .sorting,
table.sortable-static thead .sorting {
    background-image: url(../images/dataTable/sort_both.svg)
}

table.dataTable thead .sorting_asc,
table.sortable-static thead .sorting_asc {
    background-image: url(../images/dataTable/sort_asc.svg)
}

table.dataTable thead .sorting_desc,
table.sortable-static thead .sorting_desc {
    background-image: url(../images/dataTable/sort_desc.svg)
}

table.dataTable thead .sorting_desc_disabled,
table.sortable-static thead .sorting_desc_disabled {
    background-image: url(../images/dataTable/sort_desc_disabled.svg)
}

table.dataTable thead .sorting_asc_disabled,
table.sortable-static thead .sorting_asc_disabled {
    background-image: url(../images/dataTable/sort_asc_disabled.svg)
}

table.dataTable tbody tr:hover,
table.dataTable tbody tr:nth-child(2n),
table.sortable-static tbody tr:hover,
table.sortable-static tbody tr:nth-child(2n) {
    background-color: #f8f8f8
}

.dataTables_wrapper .dataTables_filter {
    float: none;
    margin-bottom: 10px
}

.dataTables_wrapper .dataTables_filter label {
    display: block
}

.dataTables_wrapper .dataTables_filter input {
    height: 40px;
    padding: 0 5px;
    min-width: 300px;
    border: 1px solid #ddd;
    margin-left: 10px;
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
    font-size: 16px
}

.fixed-three-columns thead tr th:first-child,
.fixed-three-columns thead tr th:last-child,
.fixed-two-columns thead tr th:first-child,
.fixed-two-columns thead tr th:last-child {
    width: 10%
}

.fixed-three-columns thead tr th:nth-child(2):not(:nth-child(3)) {
    width: 30%
}

table.block-links tbody tr,
table.block-links tbody tr:hover {
    background-color: #fff
}

table.block-links td a {
    display: block;
    text-decoration: none
}

table.block-links td.red a {
    color: #f04124
}

table.block-links td.green a {
    color: #78b517
}

table.block-links td.yellow a {
    color: #cabc00
}

table.block-links td.blue a {
    color: #026bb0
}

.table-caption {
    text-align: center;
    margin-bottom: -1rem
}

.table-caption p {
    text-align: justify;
    display: inline-block;
    color: gray;
    font-size: 1.8rem
}

.table-caption.contained p {
    max-width: 60%;
    margin: 0 auto
}

@media (max-width:736px) {
    .table-caption.contained {
        max-width: 100%
    }
}

.breif-table {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content
}

.breif-table tr {
    background-color: transparent
}

.table-th {
    font-weight: 700;
    color: #666
}

.message {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    margin-top: 10px;
    margin-bottom: 20px;
    padding: 7px 7px 7px 15px;
    color: #fff;
    position: relative
}

.message.floating {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    max-width: 50%;
    margin: 0 auto;
    transform-origin: center top;
    transform: translateY(-100px);
    transition: all 1s ease-in-out
}

.message.floating.visible {
    display: -ms-flexbox;
    display: flex;
    transform: translateY(0)
}

.message.has-items {
    -ms-flex-flow: column;
    flex-flow: column;
    -ms-flex-align: start;
    align-items: flex-start
}

.message.has-items ul {
    margin-top: .5rem;
    margin-bottom: .5rem
}

.message.error {
    background-color: #f04124
}

.message.info {
    background-color: #026bb0
}

.message.success {
    background-color: #78b517
}

.message.warning {
    background-color: #f5aa00
}

.message .close {
    margin-left: auto;
    padding-left: 20px
}

.message .close button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: #fff;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    text-align: center;
    border: 1px solid transparent;
    background-color: transparent;
    cursor: pointer;
    padding: 0;
    margin: 0;
    outline: none
}

.message .close button i {
    line-height: 0
}

.message .close button:hover {
    border-color: hsla(0, 0%, 100%, .4)
}

.message .close button:focus {
    outline: none
}

.message.gray {
    background-color: #f7f7f7;
    color: #333;
    padding-left: 50px
}

.message.gray:before {
    content: "\f1f8";
    font-family: Material-Design-Iconic-Font;
    font-size: 24px;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background-color: #f5aa00;
    color: #fff;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 0 10px
}

.message.access-denied {
    -ms-flex-pack: center;
    justify-content: center;
    color: #333
}

.message.access-denied h1 {
    margin-top: 20px
}

.list,
.list-block,
.list-block-2 {
    list-style: disc;
    list-style-image: url(../images/list-arrow.svg) !important;
    padding-left: 3.5rem
}

.list-block-2 li,
.list-block li,
.list li {
    margin-top: 10px;
    padding-left: 0 !important;
    color: #333
}

.list-block-2 li:first-child,
.list-block li:first-child,
.list li:first-child {
    margin-top: 0
}

.list-block-2 li a,
.list-block li a,
.list li a {
    padding: 0
}

.list-block-2 li a:first-child:not(.btn-link),
.list-block li a:first-child:not(.btn-link),
.list li a:first-child:not(.btn-link) {
    color: #333
}

.list-block-2 li a:not(:first-child):before,
.list-block li a:not(:first-child):before,
.list li a:not(:first-child):before {
    content: "•";
    color: #333;
    margin-right: 5px;
    margin-left: 5px
}

.list-block-2 li a span,
.list-block li a span,
.list li a span {
    color: #026bb0
}

.list-block-2 li a span:before,
.list-block li a span:before,
.list li a span:before {
    content: "•";
    color: #333;
    margin-right: 5px;
    margin-left: 5px
}

.list-block-2 .sep,
.list-block .sep,
.list .sep {
    color: #026bb0;
    margin: 0 10px;
    font-weight: 700
}

.arabic .list,
.arabic .list-block,
.arabic .list-block-2 {
    list-style-image: url(../images/list-arrow-rtl.svg) !important;
    padding-left: 0;
    padding-right: 3.5rem;
    font-family: DroidArabicNaskh, STIX2, sans-serif;
    font-size: 16px
}

.list-block-2 li a:first-child {
    color: #f5aa00
}

.list-block-2 li>span:before {
    content: "•";
    color: #333;
    margin-right: 5px;
    margin-left: 5px
}

.list-nested li {
    margin-top: 10px;
    position: relative;
    color: #000;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.list-nested li:before {
    content: "\f2f6";
    font-family: Material-Design-Iconic-Font;
    font-size: 24px;
    color: #f5aa00;
    margin-right: 10px;
    line-height: 0
}

.list-nested li.not-list-item:before {
    content: normal
}

.list-nested li:first-child {
    margin-top: 0
}

.list-nested li ul {
    margin-left: 30px;
    margin-top: 10px;
    width: 100%
}

.list-nested.list-tree>li,
.list-nested li ul ul {
    margin-bottom: 10px
}

.list-nested.list-tree>li:last-child {
    margin-bottom: 0
}

.list-nested.list-tree>li h4 {
    display: -ms-flexbox;
    display: flex;
    margin-top: 10px;
    width: 100%;
    padding-left: 30px;
    font-weight: 400
}

.list-nested.list-tree ul {
    margin-bottom: 10px
}

.list-nested.list-tree ul:last-child {
    margin-bottom: 0
}

.list-nested .input-select {
    height: 30px;
    margin-left: 10px
}

.list-nested .input-select select {
    padding: 0 30px 0 15px
}

.list-block-extended {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column
}

.list-block-extended li {
    margin-top: 15px;
    position: relative;
    color: gray;
    padding-left: 15px
}

.list-block-extended li:before {
    content: "\f2f6";
    font-family: Material-Design-Iconic-Font;
    font-size: 24px;
    color: #f5aa00;
    margin-right: 10px;
    line-height: 0;
    position: absolute;
    top: 9px;
    left: 0
}

.list-block-extended li:first-child {
    margin-top: 0
}

.list-block-extended h3 {
    font-weight: 700;
    color: #333
}

ol,
ol.list-block {
    list-style-position: inside
}

ol.list-block li,
ol li {
    display: list-item;
    color: #000;
    margin-top: 10px
}

ol.list-block li:before,
ol li:before {
    display: none
}

ol.list-block li:first-child,
ol li:first-child {
    margin-top: 0
}

ol.list-block li a,
ol li a {
    padding: 0;
    color: #000
}

ol.list-block li a:first-child,
ol li a:first-child {
    margin-right: 5px
}

ol.list-block li a:last-child:not(:first-child):before,
ol li a:last-child:not(:first-child):before {
    content: "•";
    color: #333;
    margin-right: 5px
}

ol.list-block li a span,
ol li a span {
    color: #026bb0
}

ol.list-block li a span:before,
ol li a span:before {
    content: "•";
    color: #333;
    margin-right: 5px
}

ol.list-block .sep,
ol .sep {
    color: #026bb0;
    margin: 0 10px;
    font-weight: 700
}

.dropdown-checkboxes {
    min-width: 200px;
    position: relative
}

.dropdown-checkboxes span.filter {
    display: block;
    padding: 0 10px;
    height: 40px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    border: 1px solid #ddd;
    cursor: pointer;
    position: relative
}

.dropdown-checkboxes span.filter:hover {
    background-color: #f7f7f7
}

.dropdown-checkboxes span.filter:after {
    content: "\f2f2";
    font-family: Material-Design-Iconic-Font;
    font-size: 24px;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%)
}

.dropdown-checkboxes span.filter.opened:after {
    content: "\f2f8"
}

.dropdown-checkboxes span.filter i {
    color: #026bb0;
    margin-right: 10px
}

.dropdown-checkboxes ul {
    background-color: #fff;
    border: 1px solid #ddd;
    display: none;
    position: absolute;
    top: 50px;
    left: 0;
    width: 100%;
    z-index: 9999
}

.dropdown-checkboxes ul li {
    padding: 10px
}

.dropdown-checkboxes ul li:hover {
    background-color: #f7f7f7
}

.dropdown-checkboxes ul li:last-child {
    margin-bottom: 0
}

.list-with-actions li {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 15px
}

.list-with-actions li a {
    height: 30px;
    width: 30px;
    padding: 0;
    margin-right: 10px
}

.image-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 30px 30px
}

.image-gallery a,
.image-gallery li {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center
}

.image-gallery a {
    height: 100%;
    border: 1px solid #ddd;
    outline: none
}

.list-block-grid {
    column-count: 3;
    column-gap: 5rem;
    padding-left: 1.5rem
}

.list-block-grid li a:not(:first-child):before {
    content: none
}

.instance {
    border-top: 1px solid #ddd;
    padding-top: 30px;
    font-family: STIX2, Times New Roman, serif;
    font-size: 18px
}

.instance:first-child {
    border: none;
    padding-top: 0
}

.instance h4 {
    margin-bottom: 15px
}

.instance h4 span {
    color: #026bb0;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-align: center;
    align-items: center
}

.instance h4 span i {
    margin-right: 5px
}

.instance h4 .approved {
    color: #78b517
}

.instance h4 .rejected {
    color: #f04124
}

.instance h4 .in-progress {
    color: #000
}

.instance .statement {
    margin-bottom: 15px
}

.instance .question-type {
    display: inline-block;
    background-color: #333;
    color: #fff;
    padding: 4px 20px;
    vertical-align: middle;
    border-radius: 5px;
    letter-spacing: 1px
}

.instance .align-content-right .label {
    margin-right: auto;
    margin-bottom: 0;
    -ms-flex-item-align: center;
    align-self: center
}

.instance .add-question-actions a {
    margin-right: 10px
}

.instance .add-question-actions a:last-child {
    margin-right: 0
}

.instance .stem {
    margin-bottom: 15px
}

.instance .stem p {
    margin-left: 5px;
    margin-bottom: 10px;
    font-size: 18px
}

.instance .stem p.stem {
    margin-left: 0
}

.instance .stem>ul:not(.list) {
    padding: 0 0 0 30px;
    margin: 10px 0
}

.instance .stem>ul:not(.list) li {
    margin: 5px 0;
    position: relative
}

.instance .stem>ul:not(.list) li:before {
    content: "\f2f6";
    font-family: Material-Design-Iconic-Font;
    font-size: 24px;
    color: #f5aa00;
    margin-right: 10px;
    line-height: 0;
    vertical-align: sub
}

.instance .stem>ol {
    list-style-position: inside;
    padding: 0 0 0 30px;
    margin: 10px 0
}

.instance .stem>ol li {
    margin: 5px 0;
    position: relative
}

.instance .stem>ol.arabic-letters {
    list-style: none
}

.instance .stem>ol.arabic-letters.nested {
    list-style: none;
    margin-top: 1rem;
    padding-left: 1.5rem
}

.instance .stem>ol.arabic-letters>li:before {
    display: inline-block;
    width: 1em;
    margin-right: 0;
    margin-left: 5px;
    text-align: left;
    direction: ltr
}

.instance .stem>ol.arabic-letters>li:first-child:before {
    content: "أ."
}

.instance .stem>ol.arabic-letters>li:nth-child(2):before {
    content: "ب."
}

.instance .stem>ol.arabic-letters>li:nth-child(3):before {
    content: "ج."
}

.instance .stem>ol.arabic-letters>li:nth-child(4):before {
    content: "د."
}

.instance .stem>ol.arabic-letters>li:nth-child(5):before {
    content: "ﻫ."
}

.instance .stem>ol.arabic-letters>li:nth-child(6):before {
    content: "و."
}

.instance .stem>ol.arabic-letters>li:nth-child(7):before {
    content: "ز."
}

.instance .stem>ol.arabic-letters>li:nth-child(8):before {
    content: "ح."
}

.instance .stem>ol.arabic-letters>li:nth-child(9):before {
    content: "ط."
}

.instance .stem>ol.arabic-letters>li:nth-child(10):before {
    content: "ي."
}

.instance .stem>ol.arabic-letters>li:nth-child(11):before {
    content: "ك."
}

.instance .stem>ol.arabic-letters>li:nth-child(12):before {
    content: "ل."
}

.instance .stem>ol.arabic-letters>li:nth-child(13):before {
    content: "م."
}

.instance .stem>ol.arabic-letters>li:nth-child(14):before {
    content: "ن."
}

.instance .stem>ol.arabic-letters>li:nth-child(15):before {
    content: "س."
}

.instance .stem>ol.arabic-letters>li:nth-child(16):before {
    content: "ع."
}

.instance .stem>ol.arabic-letters>li:nth-child(17):before {
    content: "ف."
}

.instance .stem>ol.arabic-letters>li:nth-child(18):before {
    content: "ص."
}

.instance .stem>ol.arabic-letters>li:nth-child(19):before {
    content: "ق."
}

.instance .stem>ol.arabic-letters>li:nth-child(20):before {
    content: "ر."
}

.instance .stem>ol.arabic-letters>li:nth-child(21):before {
    content: "ش."
}

.instance .stem>ol.arabic-letters>li:nth-child(22):before {
    content: "ت."
}

.instance .stem>ol.arabic-letters>li:nth-child(23):before {
    content: "ث."
}

.instance .stem>ol.arabic-letters>li:nth-child(24):before {
    content: "خ."
}

.instance .stem>ol.arabic-letters>li:nth-child(25):before {
    content: "ذ."
}

.instance .stem>ol.arabic-letters>li:nth-child(26):before {
    content: "ض."
}

.instance .stem>ol.arabic-letters>li:nth-child(27):before {
    content: "ظ."
}

.instance .stem>ol.arabic-letters>li:nth-child(28):before {
    content: "غ."
}

.instance .stem>ol.arabic-numbers {
    list-style: arabic-indic;
    list-style-position: inside
}

.instance .stem table {
    border: 1px solid #f9d7a2;
    width: 100%;
    margin: 20px 0
}

.instance .stem table:last-child {
    margin: 0
}

.instance .stem table th {
    background: none;
    border-width: 1px;
    text-align: center;
    vertical-align: middle;
    font-weight: 400;
    padding: 8px;
    color: #d08c22;
    background-color: #fefaf4;
    border: 1px solid #f9d7a2
}

.instance .stem table th svg {
    fill: #d08c22
}

.instance .stem table th svg path {
    fill: #d08c22 !important
}

.instance .stem table td {
    text-align: center;
    vertical-align: middle;
    font-weight: 400;
    padding: 8px;
    border: 1px solid #f9d7a2;
    background: #fff
}

.instance .displayed-text-svg,
.instance .displayed_equation {
    text-align: center;
    margin: 24px auto;
    display: block
}

.instance label,
.instance label i {
    font-family: Noto Sans, sans-serif;
    font-size: 15px
}

.instance .answers li {
    margin-top: 10px;
    max-width: 100%;
    overflow-x: auto
}

.instance .answers li:first-child {
    margin-top: 0
}

.instance .answers>button {
    border: 1px solid #ddd;
    background: none;
    color: gray;
    padding: 0;
    height: 30px;
    width: 30px;
    min-width: 30px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-right: 10px;
    outline: none;
    font-size: 15px
}

.instance .answers .image.circle img {
    border-radius: 50%;
    overflow: hidden
}

.instance .answers .image img {
    max-height: 160px
}

.instance .question-single-answer {
    padding: 20px;
    border: 1px dashed #78b517;
    background-color: #f9f9f9
}

.instance .add-answer {
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 1;
    flex: 1
}

.instance .add-answer label {
    -ms-flex: 1;
    flex: 1
}

.instance .add-answer label.distractor input {
    border-width: 1px
}

.instance .add-option {
    margin-left: 10px
}

.instance .input-group .checkbox-check {
    margin: 0
}

.instance .question-preview .edit-question,
.instance .question-preview .preview-question,
.instance .question .edit-question,
.instance .question .preview-question {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    height: 30px;
    padding: 0 15px
}

.instance .sub-question {
    padding: 20px;
    border: 2px dashed #ddd;
    position: relative;
    margin-bottom: 15px
}

.instance .sub-question:last-child {
    margin-bottom: 0
}

.instance .sub-question .sub-question-actions {
    position: absolute;
    top: -2px;
    right: -2px;
    z-index: 2
}

.instance .sub-question .sub-question-actions a {
    height: 30px
}

.instance .sub-question-actions-bottom {
    margin-top: -17px;
    margin-bottom: 20px;
    position: relative
}

.instance .sub-question-actions-bottom a {
    height: 30px
}

.instance.rtl h4 {
    direction: ltr
}

.instance.rtl .answers button {
    margin-right: 0;
    margin-left: 10px
}

.instance.rtl .stem>ul:not(.list) {
    padding: 0 30px 0 0;
    margin: 10px 0
}

.instance.rtl .stem>ul:not(.list) li:before {
    content: "\f2f4";
    margin-right: 0;
    margin-left: 10px
}

.instance>ul {
    padding: 0 15px;
    margin: 10px 0
}

.instance>ul li {
    margin: 5px 0;
    position: relative
}

.instance>ul li:before {
    content: "\f2f6";
    font-family: Material-Design-Iconic-Font;
    font-size: 24px;
    color: #f5aa00;
    margin-right: 10px;
    line-height: 0;
    vertical-align: sub
}

.instance .ArabicOrderedList dt {
    float: right;
    clear: right
}

.instance .ArabicOrderedList dt:after {
    content: "-";
    margin: 0 5px
}

.instance .displayed-figure {
    margin: auto;
    text-align: center
}

.instance .displayed-figure.circle img {
    border-radius: 50%
}

.instance .displayed-figure img {
    max-width: 640px;
    max-height: 320px
}

.instances {
    font-family: STIX2, Times New Roman, serif
}

.instances,
.instances h4 {
    font-size: 18px
}

.instances.rtl h4 {
    direction: ltr
}

.instances.rtl .answers button {
    margin-right: 0;
    margin-left: 10px
}

.instances.rtl .instance .stem>ul:not(.list) {
    padding: 0 30px 0 0;
    margin: 10px 0
}

.instances.rtl .instance .stem>ul:not(.list) li:before {
    content: "\f2f4";
    margin-right: 0;
    margin-left: 10px
}

.question-note .hide-note,
.question-note .note {
    display: none
}

.question-flag {
    border: none;
    position: absolute;
    right: 20px;
    top: 20px
}

.question-flag+.instance {
    border: none;
    padding-top: 0;
    padding-right: 100px
}

.question-flag i {
    margin-right: 10px;
    color: #026bb0;
    font-size: 24px
}

.instance-status {
    position: relative;
    padding: 20px;
    border: 1px solid #ddd;
    background-color: #fff
}

.instance-status.approved {
    border-color: #78b517
}

.instance-status.rejected {
    border-color: #f04124
}

.instance-status.in-progress {
    border: 2px dashed #000
}

.instance-status .instance {
    margin: 0
}

.multi-part-question>ol {
    list-style-position: inside;
    padding: 0 0 0 30px;
    margin: 10px 0
}

.multi-part-question>ol li {
    margin: 5px 0;
    position: relative
}

.multi-part-question>ol.arabic-letters {
    list-style: none;
    padding: 0 3rem 0 0
}

.multi-part-question>ol.arabic-letters.nested {
    list-style: none;
    margin-top: 1rem;
    padding-left: 1.5rem
}

.multi-part-question>ol.arabic-letters>li:before {
    display: inline-block;
    width: 1em;
    margin-right: 0;
    margin-left: 5px;
    text-align: left;
    direction: rtl
}

.multi-part-question>ol.arabic-letters>li:first-child:before {
    content: "أ."
}

.multi-part-question>ol.arabic-letters>li:nth-child(2):before {
    content: "ب."
}

.multi-part-question>ol.arabic-letters>li:nth-child(3):before {
    content: "ج."
}

.multi-part-question>ol.arabic-letters>li:nth-child(4):before {
    content: "د."
}

.multi-part-question>ol.arabic-letters>li:nth-child(5):before {
    content: "ﻫ."
}

.multi-part-question>ol.arabic-letters>li:nth-child(6):before {
    content: "و."
}

.multi-part-question>ol.arabic-letters>li:nth-child(7):before {
    content: "ز."
}

.multi-part-question>ol.arabic-letters>li:nth-child(8):before {
    content: "ح."
}

.multi-part-question>ol.arabic-letters>li:nth-child(9):before {
    content: "ط."
}

.multi-part-question>ol.arabic-letters>li:nth-child(10):before {
    content: "ي."
}

.multi-part-question>ol.arabic-letters>li:nth-child(11):before {
    content: "ك."
}

.multi-part-question>ol.arabic-letters>li:nth-child(12):before {
    content: "ل."
}

.multi-part-question>ol.arabic-letters>li:nth-child(13):before {
    content: "م."
}

.multi-part-question>ol.arabic-letters>li:nth-child(14):before {
    content: "ن."
}

.multi-part-question>ol.arabic-letters>li:nth-child(15):before {
    content: "س."
}

.multi-part-question>ol.arabic-letters>li:nth-child(16):before {
    content: "ع."
}

.multi-part-question>ol.arabic-letters>li:nth-child(17):before {
    content: "ف."
}

.multi-part-question>ol.arabic-letters>li:nth-child(18):before {
    content: "ص."
}

.multi-part-question>ol.arabic-letters>li:nth-child(19):before {
    content: "ق."
}

.multi-part-question>ol.arabic-letters>li:nth-child(20):before {
    content: "ر."
}

.multi-part-question>ol.arabic-letters>li:nth-child(21):before {
    content: "ش."
}

.multi-part-question>ol.arabic-letters>li:nth-child(22):before {
    content: "ت."
}

.multi-part-question>ol.arabic-letters>li:nth-child(23):before {
    content: "ث."
}

.multi-part-question>ol.arabic-letters>li:nth-child(24):before {
    content: "خ."
}

.multi-part-question>ol.arabic-letters>li:nth-child(25):before {
    content: "ذ."
}

.multi-part-question>ol.arabic-letters>li:nth-child(26):before {
    content: "ض."
}

.multi-part-question>ol.arabic-letters>li:nth-child(27):before {
    content: "ظ."
}

.multi-part-question>ol.arabic-letters>li:nth-child(28):before {
    content: "غ."
}

.multi-part-question>ol.arabic-numbers {
    list-style: arabic-indic;
    list-style-position: inside;
    padding: 0 3rem 0 0
}

.instances {
    color: #000
}

.instances .inline-displayed .stem,
.instances .inline-displayed .stem>p:first-child,
.instances .multi-part-question .inline-displayed+p {
    display: inline
}

.instances .displayed-figure,
.instances .displayed-image,
.instances .displayed-text-svg,
.instances .displayed_equation {
    text-align: center;
    margin: 24px auto;
    display: block
}

.instances .displayed-figure img {
    max-width: 640px;
    max-height: 320px
}

@media (max-width:870px) {
    .instances .displayed-figure img {
        max-width: 100%
    }
}

.instances .displayed-figure.circle img {
    border-radius: 50%
}

.instances .displayed-figure-group {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 14px auto
}

.instances .displayed-figure-group .displayed-figure {
    margin: 10px
}

.instances .displayed-figure-group .displayed-figure figure img {
    max-width: 240px;
    max-height: 120px;
    margin: 0
}

.instances .question {
    color: #000
}

.instances .question img:not(.displayed-image) {
    max-width: 640px;
    max-height: 320px;
    display: block;
    margin: 24px auto
}

@media (max-width:870px) {
    .instances .question img:not(.displayed-image) {
        max-width: 100%
    }
}

.instances .question.circle img {
    border-radius: 50%
}

.instances .question p {
    margin-bottom: 10px;
    margin-top: 10px
}

.instances .question table {
    border: 1px solid #f5aa00;
    width: 100%
}

.instances .question table tr:first-child {
    margin-right: -1px
}

.instances .question table td {
    margin-top: -1px
}

.instances .question table td,
.instances .question table th {
    text-align: center;
    vertical-align: middle;
    font-weight: 400;
    padding: 8px;
    border: 1px solid #f9d7a2;
    background: #fff
}

.instances .question table th {
    background: #fefaf4;
    color: #d08c22;
    vertical-align: middle
}

.instances .question table th.empty {
    background-color: #fff;
    border-top-color: #fff;
    border-left: none;
    border-right: none;
    border-bottom: none
}

.instances .question table th.empty:first-child {
    border-left: 1px solid #fff
}

.instances .question table th svg text {
    fill: #d08c22 !important
}

@media (max-width:700px) {
    .instances .question table.two-column {
        border: 0
    }

    .instances .question table.two-column tbody,
    .instances .question table.two-column td {
        display: -ms-flexbox;
        display: flex
    }

    .instances .question table.two-column td {
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-pack: center;
        justify-content: center;
        -ms-flex: 1;
        flex: 1
    }

    .instances .question table.two-column tr {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        width: 50%
    }

    .instances .question table.two-column th {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-pack: center;
        justify-content: center
    }
}

.instances .question .answers {
    margin-top: 10px
}

.instances .question .answers .mcq_choices {
    padding: 0
}

.instances .question .answers .mcq_choices li:last-child {
    padding-bottom: 0
}

.instances .question .answers .mcq_choices li:before {
    display: none
}

.instances .question .answers .mcq_choices li.center-content {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center
}

.instances .question .answers .mcq_choices li .displayed-figure,
.instances .question .answers .mcq_choices li .displayed-image,
.instances .question .answers .mcq_choices li .displayed_equation {
    margin: 0
}

.instances .question .answers .mcq_choices li .displayed-figure img,
.instances .question .answers .mcq_choices li .displayed-image img,
.instances .question .answers .mcq_choices li .displayed_equation img {
    margin-left: 25px
}

.instances .question .answers .mcq_choices li img {
    max-width: 320px;
    max-height: 160px;
    margin: 0;
    display: inline-block
}

@media (max-width:460px) {
    .instances .question .answers .mcq_choices li img {
        max-width: 100%;
        display: block
    }
}

.instances .question .answers .mcq_choices li .displayed-figure img {
    max-width: 320px;
    max-height: 160px
}

@media (max-width:460px) {
    .instances .question .answers .mcq_choices li .displayed-figure img {
        max-width: 100%;
        display: block
    }
}

.instances .question .answers .mcq_choices li .displayed-figure.circle img {
    border-radius: 50%
}

.instances .question .answers .mcq_choices li .h-scroll {
    margin-top: 0
}

.instances .question .answers .mcq_choices li>span:first-child:not(.merge):not(.margin) {
    border: 1px solid #888;
    border-radius: 4px;
    margin-right: 10px;
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    text-transform: uppercase;
    padding-top: 5px;
    margin-left: -40px;
    font-size: 16px;
    -ms-flex-negative: 0;
    flex-shrink: 0
}

.instances .question .answers .mcq_choices li>span:first-child:not(.merge):not(.margin).answered {
    background: #ddd
}

.instances .question .answers .mcq_choices li>span:first-child:not(.merge):not(.margin).answered.incorrect {
    color: #fff;
    background: #f04124;
    border-color: #f04124
}

.instances .question .answers .mcq_choices li>span:first-child:not(.merge):not(.margin).answered.correct {
    color: #fff;
    background: #78b517;
    border-color: #78b517
}

.instances .question .answers .mcq_choices li>span:first-child:not(.merge):not(.margin).correction,
.instances .question .answers .mcq_choices li>span:first-child:not(.merge):not(.margin).skipped {
    border-color: #78b517;
    background-color: #fff;
    background-color: #ebf4dc
}

.instances .question .answers li {
    padding: 5px 0 5px 40px;
    overflow-x: initial;
    margin-top: 0
}

.instances .question .answers li:last-child {
    padding-bottom: 0
}

.instances .question .answers li.center-content {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center
}

.instances .question .answers li .displayed-figure,
.instances .question .answers li .displayed-image,
.instances .question .answers li .displayed_equation {
    margin: 0
}

.instances .question .answers li .displayed-figure img {
    max-width: 320px;
    max-height: 160px
}

.instances .question .answers li .displayed-figure.circle img {
    border-radius: 50%
}

.instances .question .answers li .h-scroll {
    margin-top: 0
}

.instances .question .answers li>span:first-child:not(.merge):not(.margin) {
    border: 1px solid #888;
    border-radius: 4px;
    margin-right: 10px;
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    text-transform: uppercase;
    padding-top: 5px;
    margin-left: -40px;
    font-size: 16px
}

.instances .question .answers li>span:first-child:not(.merge):not(.margin).answered {
    background: #ddd
}

.instances .question .answers li>span:first-child:not(.merge):not(.margin).answered.incorrect {
    color: #fff;
    background: #f04124;
    border-color: #f04124
}

.instances .question .answers li>span:first-child:not(.merge):not(.margin).answered.correct {
    color: #fff;
    background: #78b517;
    border-color: #78b517
}

.instances .question .answers li>span:first-child:not(.merge):not(.margin).correction,
.instances .question .answers li>span:first-child:not(.merge):not(.margin).skipped {
    border-color: #78b517;
    background-color: #fff;
    background-color: #ebf4dc
}

.instances .question .answers .frq {
    border-radius: 4px;
    padding: 15px
}

.instances .question .answers .frq p {
    margin-bottom: 0
}

.instances .question .answers .frq.pending {
    border: 1px solid #ddd;
    background-color: #f7f7f7
}

.instances .question .answers .frq.pending .cta {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    margin-top: 10px
}

.instances .question .answers .frq.pending .cta .pending-marking {
    color: #333;
    margin-left: 0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    font-family: Noto Sans, sans-serif;
    font-size: 16px
}

.instances .question .answers .frq.pending .cta .pending-marking i {
    color: #026bb0
}

.instances .question .answers .frq.pending .cta .btn {
    margin-left: auto
}

.instances .question .answers .frq.correct {
    border: 1px solid #78b517;
    background-color: #ebf4dc
}

.instances .question .answers .frq.incorrect {
    border: 1px solid #f04124;
    background-color: #fbe4e2
}

.instances .question .answers .frq.no-answer-message {
    text-align: center;
    color: gray
}

.instances .question .answers .frq.no-answer-message .icon {
    font-size: 40px;
    color: #ddd
}

.instances .question .answers .possible-answer {
    margin-top: 20px
}

.instances .question .answers .possible-answer p {
    margin-bottom: 0
}

.instances .question .answers .error-note {
    color: #fff;
    z-index: 10;
    position: relative;
    margin-top: 10px;
    color: #333;
    display: none;
    font-family: Noto Sans, sans-serif;
    font-size: 14px
}

.instances .question .answers .error-note span {
    border-radius: 4px;
    padding: 10px 15px;
    background-color: #e5f5ff;
    display: -ms-inline-flexbox;
    display: inline-flex;
    max-width: 75%
}

.instances .question .answers .error-note:after {
    position: absolute;
    color: #e5f5ff;
    line-height: 0;
    content: "";
    font-family: Font-Awesome;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "liga";
    font-weight: 900;
    font-size: 24px;
    left: 40px;
    top: -3px
}

.instances .question .free-form {
    position: relative;
    display: inline-block
}

@media (max-width:426px) {
    .instances .question .free-form {
        display: block
    }
}

.instances .question .free-form .type-answer,
.instances .question .free-form .type_answer {
    height: 39px;
    max-width: 250px;
    font-family: STIX2;
    font-size: 18px
}

.instances .question .free-form .wrong {
    border-color: #f04124;
    background-color: #fbe4e2
}

.instances .question .free-form .correct {
    border-color: #78b517;
    background-color: #ebf4dc
}

.instances .question .free-form .answer-unit {
    position: absolute;
    right: 10px;
    top: 6px;
    border-left: 1px solid #ddd;
    padding-left: 9px;
    z-index: 5
}

.instances .question .free-form .answer-unit~.type-answer {
    padding-right: 60px
}

.instances .question .free-form .error {
    display: none;
    white-space: nowrap;
    bottom: 5px;
    left: calc(100% + 5px);
    margin-left: 6px;
    color: #fff;
    background-color: #f04124;
    padding: 3px 10px;
    border-radius: 4px;
    position: absolute;
    z-index: 10
}

@media (max-width:736px) {
    .instances .question .free-form .error {
        left: 0;
        top: calc(100% + 5px);
        bottom: auto;
        margin-left: 0;
        white-space: normal
    }
}

.instances .question .free-form .error:after {
    position: absolute;
    color: #f04124;
    line-height: 0;
    content: "";
    font-family: Font-Awesome;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "liga";
    font-weight: 900;
    top: 50%;
    left: -5px
}

@media (max-width:736px) {
    .instances .question .free-form .error:after {
        content: "";
        font-family: Font-Awesome;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        -moz-osx-font-smoothing: grayscale;
        font-feature-settings: "liga";
        font-weight: 900;
        left: 5px;
        top: -3px
    }
}

.instances .question .free-form .shake {
    animation-duration: .6s;
    z-index: 10
}

.instances .question .frq-form .type-answer,
.instances .question .frq-form .type_answer {
    resize: vertical
}

.instances .question .frq-form {
    position: relative;
    display: inline-block;
    width: 100%
}

@media (max-width:426px) {
    .instances .question .frq-form {
        display: block
    }
}

.instances .question .frq-form .type-answer,
.instances .question .frq-form .type_answer {
    height: 150px;
    width: 100%;
    font-family: STIX2;
    font-size: 18px;
    overflow: auto
}

.instances .question .frq-form .wrong {
    border-color: #f04124;
    background-color: #fbe4e2
}

.instances .question .frq-form .correct {
    border-color: #78b517;
    background-color: #ebf4dc
}

.instances .question .frq-form .model-answer {
    min-height: 150px;
    width: 100%;
    font-family: STIX2;
    font-size: 18px;
    overflow: auto;
    border-color: #78b517;
    background-color: #ebf4dc;
    padding: 12px;
    border: 1px solid #78b517;
    border-radius: 4px
}

.instances .question .frq-form .model-answer p:first-child {
    margin-top: 0
}

.instances .question .input-with-unit {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: all .2s
}

@media (max-width:426px) {
    .instances .question .input-with-unit {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }
}

.instances .question .input-with-unit:focus-within {
    border-color: #026bb0
}

.instances .question .input-with-unit.wrong {
    background-color: #fbe4e2
}

.instances .question .input-with-unit.wrong:focus-within {
    border-color: #f04124
}

.instances .question .input-with-unit.wrong input[type=email],
.instances .question .input-with-unit.wrong input[type=password],
.instances .question .input-with-unit.wrong input[type=text] {
    background-color: #fbe4e2
}

.instances .question .input-with-unit.correct {
    background-color: #ebf4dc
}

.instances .question .input-with-unit.correct:focus-within {
    border-color: #78b517
}

.instances .question .input-with-unit.correct input[type=email],
.instances .question .input-with-unit.correct input[type=password],
.instances .question .input-with-unit.correct input[type=text] {
    background-color: #ebf4dc
}

.instances .question .input-with-unit.skipped {
    background-color: #eee
}

.instances .question .input-with-unit.skipped:focus-within {
    border-color: #eee
}

.instances .question .input-with-unit.skipped input[type=email],
.instances .question .input-with-unit.skipped input[type=password],
.instances .question .input-with-unit.skipped input[type=text] {
    background-color: #eee
}

.instances .question .input-with-unit input[type=email],
.instances .question .input-with-unit input[type=password],
.instances .question .input-with-unit input[type=text] {
    border: none
}

@media (max-width:426px) {

    .instances .question .input-with-unit input[type=email],
    .instances .question .input-with-unit input[type=password],
    .instances .question .input-with-unit input[type=text] {
        width: 100%;
        max-width: none
    }
}

.instances .question .input-with-unit .answer-unit {
    position: static;
    right: auto;
    top: auto;
    border-left: 1px solid #ddd;
    padding-left: 10px;
    padding-right: 10px;
    white-space: nowrap
}

@media (max-width:426px) {
    .instances .question .input-with-unit .answer-unit {
        border-left: none;
        border-top: 1px solid #ddd;
        width: 100%;
        text-align: center;
        height: 39px;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-pack: center;
        justify-content: center;
        line-height: 1
    }
}

.instances .question .wrong-answer {
    color: #f04124;
    display: inline-block;
    margin-left: 10px
}

.instances .question .correct-answer {
    color: #78b517;
    display: inline-block;
    margin-left: 10px
}

@media (max-width:426px) {
    .instances .question .correct-answer {
        margin-left: 0;
        display: block;
        margin-top: 10px
    }
}

.instances .question .correct-answer svg {
    fill: #78b517
}

.instances .question.sorting .sort-answers-h {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.instances .question.sorting .sort-answers-h li {
    padding: 0;
    padding: 5px 10px;
    border: 1px solid #f7f7f7;
    background-color: #f7f7f7;
    border-radius: 4px;
    margin-right: 10px;
    margin-top: 0;
    white-space: nowrap;
    cursor: grab
}

.instances .question.sorting .sort-answers-h li:hover {
    background-color: #f7f7f7
}

.instances .question.sorting .sort-answers-h li:last-child {
    margin-right: 0
}

.instances .question.sorting .sort-answers-h li.placeholder {
    border: 1px dashed #ddd;
    background-color: #fff;
    min-height: 30px;
    padding-left: 0;
    padding-right: 0
}

.instances .question.sorting .sort-answers-h li.ui-sortable-helper {
    border-color: #e5f0f7;
    background-color: #e5f0f7;
    margin-right: 5px
}

.instances .question.sorting .sort-answers-v {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: start;
    align-items: flex-start;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-direction: column;
    flex-direction: column
}

.instances .question.sorting .sort-answers-v li {
    padding: 0;
    padding: 5px 10px;
    border: 1px solid #f7f7f7;
    background-color: #f7f7f7;
    border-radius: 4px;
    margin-bottom: 10px;
    cursor: grab;
    margin-top: 0
}

.instances .question.sorting .sort-answers-v li:hover {
    background-color: #f7f7f7
}

.instances .question.sorting .sort-answers-v li.placeholder {
    border: 1px dashed #ddd;
    background-color: #fff;
    min-height: 30px;
    padding-left: 0;
    padding-right: 0
}

.instances .question.sorting .sort-answers-v li.ui-sortable-helper {
    border-color: #e5f0f7;
    background-color: #e5f0f7
}

.instances .question.matching .drop-area {
    display: inline-block;
    width: 80px;
    height: 1px;
    padding-top: 20px;
    border-bottom: 1px dashed #ddd;
    position: relative
}

.instances .question.matching .match-answers {
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    min-height: 39px
}

.instances .question.matching .match-answers:after,
.instances .question.matching .match-answers:before {
    content: " ";
    display: table
}

.instances .question.matching .match-answers:after {
    clear: both
}

.instances .question.matching .match-answers li {
    padding: 5px 10px;
    background-color: #f7f7f7;
    border-radius: 4px;
    margin-right: 10px;
    margin-top: 0;
    cursor: grab
}

.instances .question.matching .match-answers li span.merge,
.instances .question.matching .match-answers li svg {
    cursor: grab
}

.instances .question.matching .match-answers li:hover {
    background-color: #f7f7f7
}

.instances .question.matching .match-answers li.placeholder {
    min-height: 39px;
    padding-left: 0;
    padding-right: 0
}

.instances .question.matching .match-answers li.dropped {
    border-color: transparent;
    background-color: transparent !important;
    color: #026bb0
}

.instances .question.matching .match-answers li.moved {
    border-color: transparent;
    background-color: hsla(0, 0%, 97%, .5);
    padding-top: 0;
    padding-bottom: 0;
    margin-top: -10px;
    line-height: 1;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    color: #026bb0
}

.instances .multi-part-question .part {
    margin-bottom: 3rem
}

.instances .multi-part-question .part:last-child {
    margin-bottom: 0
}

.instances .multi-part-question .inline-displayed~.question:first-of-type {
    margin-top: 10px
}

.instances .multi-part-question p {
    margin-bottom: 10px
}

.instances .multi-part-question table {
    border: 1px solid #f5aa00;
    width: 100%
}

.instances .multi-part-question table tr:first-child {
    margin-right: -1px
}

.instances .multi-part-question table td {
    margin-top: -1px
}

.instances .multi-part-question table td,
.instances .multi-part-question table th {
    text-align: center;
    vertical-align: middle;
    font-weight: 400;
    padding: 8px;
    border: 1px solid #f9d7a2;
    background: #fff
}

.instances .multi-part-question table th {
    background: #fefaf4;
    color: #d08c22
}

.instances .multi-part-question table th svg text {
    fill: #d08c22 !important
}

@media (max-width:700px) {
    .instances .multi-part-question table.two-column {
        border: 0
    }

    .instances .multi-part-question table.two-column tbody,
    .instances .multi-part-question table.two-column td {
        display: -ms-flexbox;
        display: flex
    }

    .instances .multi-part-question table.two-column td {
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-pack: center;
        justify-content: center;
        -ms-flex: 1;
        flex: 1
    }

    .instances .multi-part-question table.two-column tr {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        width: 50%
    }

    .instances .multi-part-question table.two-column th {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-pack: center;
        justify-content: center
    }
}

.instances .multi-part-question .part {
    padding-left: 15px;
    position: relative
}

.instances .h-scroll,
.instances .table-wrapper {
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    clear: both;
    margin: 20px 0
}

.instances .h-scroll:last-child,
.instances .table-wrapper:last-child {
    margin-bottom: 0
}

.instances .h-scroll+.answers,
.instances .table-wrapper+.answers {
    margin-top: 0
}

.instances .question-number {
    background: #f7f7f7;
    border-bottom: 1px solid #ededed;
    padding: 7.5px 15px;
    width: calc(100% + 30px);
    margin-left: -15px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom: 1px solid #ddd;
    margin-bottom: 15px;
    margin-top: -15px
}

.instances .question-number p {
    margin-bottom: 0;
    font-weight: 700
}

.instances .instance {
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    padding: 15px;
    margin-bottom: 15px;
    font-family: STIX2, Times New Roman, serif;
    font-size: 18px
}

.instances .instance.has-status .question-status {
    padding-top: 10px;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -ms-flex-align: center;
    align-items: center
}

.instances .instance.has-status .question-status .status {
    font-size: 12px;
    font-family: Noto Sans, sans-serif
}

.instances .instance.has-status .question-status .status i {
    font-size: 12px;
    margin-right: 2px
}

.instances .instance.has-status .question-status .status.succeeded,
.instances .instance.has-status .question-status .status.succeeded i {
    color: #78b517
}

.instances .instance.has-status .question-status .status.in-processing,
.instances .instance.has-status .question-status .status.in-processing i {
    color: #026bb0
}

.instances .instance.has-status .question-status .status.failed,
.instances .instance.has-status .question-status .status.failed i {
    color: #f04124
}

.instances .instance .has-sorting {
    position: static
}

.instances .instance:last-child {
    margin-bottom: 0
}

.instances .instance>div {
    position: relative
}

.instances .instance .stem {
    margin-bottom: 0
}

.instances .instance p {
    margin-left: 0
}

.instances .instance dl {
    margin-top: 20px;
    margin-bottom: 20px
}

.instances .instance dl:after,
.instances .instance dl:before {
    display: table;
    content: " "
}

.instances .instance dl:after {
    clear: both
}

.instances .instance dl dd,
.instances .instance dl dt {
    float: left;
    margin-bottom: 10px
}

.instances .instance dl dt {
    width: 210px;
    clear: both;
    font-weight: 700
}

.instances .instance dl.bordered {
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 4px
}

.instances .instance dl.bordered dd,
.instances .instance dl.bordered dt {
    border-bottom: 1px solid #ddd;
    padding-bottom: 15px;
    margin-bottom: 15px
}

.instances .instance dl.bordered dd:last-of-type,
.instances .instance dl.bordered dt:last-of-type {
    padding: 0;
    border: 0;
    margin: 0
}

@media (max-width:736px) {
    .instances .instance dl.bordered dt {
        width: 100%;
        margin: 0;
        border: 0;
        padding: 0
    }
}

.instances .instance dl.bordered dd {
    width: calc(100% - 210px)
}

@media (max-width:736px) {
    .instances .instance dl.bordered dd {
        width: 100%
    }
}

.instances .instance .ArabicOrderedList {
    padding-left: 40px
}

.instances .instance .ArabicOrderedList dt {
    float: left;
    clear: left;
    min-width: 10px;
    text-align: right;
    margin-right: 5px;
    width: auto;
    font-weight: 400
}

.instances .instance .ArabicOrderedList dt:after {
    content: "\003A";
    margin: 0
}

.instances .instance .ArabicOrderedList dd {
    width: auto;
    font-weight: 400;
    float: none;
    line-height: 1.5
}

.instances .instance .instance-info {
    position: absolute;
    bottom: -8px;
    right: -8px;
    z-index: 9;
    display: -ms-flexbox;
    display: flex
}

.instances .instance .instance-info a {
    color: #999;
    width: 30px;
    height: 30px;
    border: 1px solid #999;
    text-align: center;
    border-radius: 50%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center
}

.instances .instance .instance-info a i {
    font-size: 15px
}

.instances .instance .instance-info a+a {
    margin-left: 5px
}

.instances .instance .instance-info a:hover {
    background: #999;
    color: #fff;
    border-color: transparent
}

.instances .instance .instance-info a.has-video {
    border-color: #f5aa00;
    color: #f5aa00
}

.instances .instance .instance-info a.has-video:hover {
    background: #f5aa00;
    color: #fff
}

.instances .instance .instance-info a.has-video.same-instance {
    border-color: #78b517;
    color: #78b517
}

.instances .instance .instance-info a.has-video.same-instance:hover {
    background: #78b517;
    color: #fff
}

.instances .instance.has-info>div {
    padding-bottom: 30px
}

.instances .instance.arabic .answers .mcq_choices li {
    font-family: DroidArabicNaskh, STIX2, sans-serif;
    font-size: 16px;
    padding: 5px 40px 5px 0
}

.instances .instance.arabic .answers .mcq_choices li>span:first-child:not(.merge):not(.margin) {
    -ms-flex-negative: 0;
    flex-shrink: 0
}

.instances .instance.arabic .answers li {
    padding: 5px 0
}

.instances .instance.arabic .answers li>span:first-child:not(.merge):not(.margin) {
    border: 1px solid #888;
    border-radius: 4px;
    margin-left: 10px;
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    text-transform: uppercase;
    padding-top: 5px;
    margin-right: -40px;
    font-size: 16px
}

.instances .instance.arabic .question.sorting .sort-answers-h li {
    margin-right: 0;
    margin-left: 10px
}

.instances .instance.arabic .question.sorting .question-number {
    background: #f7f7f7;
    border-bottom: 1px solid #ededed;
    padding: 7.5px 15px;
    width: calc(100% + 30px);
    margin-right: -15px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom: 1px solid #ddd;
    margin-bottom: 15px;
    margin-top: -15px
}

.instances .instance.arabic .question.sorting .question-number p {
    margin-bottom: 0;
    font-weight: 700
}

.instances .instance.arabic .question.sorting .question-number .badge {
    margin-left: 0;
    margin-right: auto
}

.instances .instance .multi-part-question .part {
    padding-left: 1.5rem;
    position: relative
}

.instances .instance .multi-part-question .part>.stem {
    display: list-item;
    list-style: disc;
    list-style-image: url(../images/list-arrow.svg)
}

.instances .instance.arabic,
.instances .instance.arabic p {
    font-family: DroidArabicNaskh, STIX2, sans-serif;
    font-size: 16px
}

.instances .instance.arabic p {
    direction: rtl
}

.instances .instance.arabic table {
    font-family: DroidArabicNaskh, STIX2, sans-serif;
    font-size: 16px
}

.instances .instance.arabic .multi-part-question,
.instances .instance.arabic .one-part-question {
    text-align: right;
    direction: rtl
}

.instances .instance.arabic .multi-part-question .part {
    padding-left: 0;
    padding-right: 1.5rem
}

.instances .instance.arabic .multi-part-question .part>.stem {
    list-style-image: url(../images/list-arrow-rtl.svg)
}

.instances .instance.arabic .answers {
    direction: rtl
}

.instances .instance.arabic .answers .mcq_choices li>span:first-child:not(.merge):not(.margin) {
    border: 1px solid #888;
    border-radius: 4px;
    margin-left: 10px;
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    text-transform: uppercase;
    padding-top: 5px;
    margin-right: -40px;
    font-size: 16px
}

.instances .instance.arabic .question-number {
    background: #f7f7f7;
    border-bottom: 1px solid #ededed;
    padding: 7.5px 15px;
    width: calc(100% + 30px);
    margin-right: -15px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom: 1px solid #ddd;
    margin-bottom: 15px;
    margin-top: -15px
}

.instances .instance.arabic .question-number p {
    margin-bottom: 0;
    font-weight: 700
}

.instances .instance.arabic .question-number .badge {
    margin-left: 0;
    margin-right: auto
}

.video-player {
    max-width: 700px
}

.video-player video {
    width: 100%;
    height: auto;
    padding: 0
}

.video-player .video-js .vjs-big-play-button {
    display: none
}

.audio-player {
    max-width: 600px;
    margin: auto
}

.audio-player audio {
    width: 100%;
    height: auto;
    padding: 0
}

.audio-player .mfp-close {
    color: #ccc;
    top: -40px
}

.audio-player .video-js .vjs-big-play-button,
.audio-player .video-js .vjs-fullscreen-control {
    display: none
}

.form-popup {
    margin: auto;
    float: none;
    background-color: #fff;
    padding: 60px 40px 40px
}

@media (max-width:1850px) {
    .form-popup.col-4 {
        width: 50%
    }
}

@media (max-width:1200px) {
    .form-popup.col-4 {
        width: 90%;
        padding: 60px 20px 20px
    }
}

@media (max-width:610px) {
    .form-popup.col-4 {
        width: 98%
    }
}

.form-popup .input-group {
    margin-right: 0;
    width: 100%
}

.form-popup .text {
    margin-top: 30px;
    text-align: center
}

.form-popup .form-inline .align-content-right {
    margin-top: 30px
}

.form-popup .form-inline .align-content-right.submit-btn {
    margin-right: 0
}

.form-popup .form-inline .align-content-right.submit-btn .btn-outline[disabled]:hover {
    background-color: #fff;
    border: 1px solid #f5aa00;
    color: #f5aa00
}

.remove-subject-popup {
    margin: auto;
    float: none;
    background-color: #fff;
    padding: 60px 40px 40px
}

@media (max-width:1850px) {
    .remove-subject-popup.col-4 {
        width: 50%
    }
}

@media (max-width:1200px) {
    .remove-subject-popup.col-4 {
        width: 90%;
        padding: 60px 20px 20px
    }
}

@media (max-width:610px) {
    .remove-subject-popup.col-4 {
        width: 98%
    }
}

.remove-subject-popup .wrapper {
    text-align: center
}

.search-by-email {
    margin: auto;
    float: none;
    background-color: #fff;
    padding: 3rem;
    width: 800px
}

.search-by-email ul {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center
}

.search-by-email ul>li {
    margin-right: 1.5rem;
    min-width: 41.5%
}

.search-by-email ul>li:nth-child(2) {
    min-width: 10%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: center;
    align-items: center
}

.search-by-email ul>li:nth-child(2) a {
    font-size: 1rem;
    margin: .2rem
}

.search-by-email ul>li:nth-child(2) a.btn>i {
    margin-right: 0
}

.search-by-email ul>li:nth-child(2) a .right-chevron:before {
    content: "\f2fb";
    font-family: Material-Design-Iconic-Font;
    text-align: center
}

.search-by-email ul>li:nth-child(2) a .left-chevron:before {
    content: "\f2fa";
    font-family: Material-Design-Iconic-Font;
    text-align: center
}

.search-by-email ul>li:nth-child(2) a:first-child {
    margin-top: 0
}

.search-by-email ul>li:nth-child(2) a:nth-child(2)>i,
.search-by-email ul>li:nth-child(2) a:nth-child(3)>i {
    padding-right: .2rem;
    padding-left: .2rem
}

.search-by-email ul>li:last-child {
    min-width: 41.8%
}

.search-by-email ul label {
    width: 100%;
    margin-right: 1rem
}

.search-by-email ul select {
    height: auto;
    min-width: auto;
    background: none;
    overflow: auto
}

.manage-popup {
    margin: auto;
    float: none;
    background-color: #fff;
    padding: 3rem
}

.manage-popup .table-wrapper {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.manage-popup .table-wrapper .pin-icon {
    background-image: url(../images/push-pin.svg);
    background-repeat: no-repeat;
    background-size: 19px 14px;
    width: 19px;
    height: 14px
}

.manage-popup .input-group,
.manage-popup .message {
    width: 100%
}

.show-latest-popup {
    margin: auto;
    float: none;
    background-color: #fff;
    padding: 3rem
}

.popup-title {
    margin-bottom: 30px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-direction: column;
    flex-direction: column
}

.popup-title h2,
.popup-title h3,
.popup-title h4,
.popup-title h5 {
    font-size: 30px
}

.popup-title p {
    margin-top: 1rem;
    color: #999
}

.error-popup {
    margin: auto;
    float: none
}

.error-popup .mfp-close {
    top: -44px;
    color: #ddd
}

.inline-video-player {
    position: relative;
    border: 1px solid #ddd
}

.inline-video-player:hover .vjs-poster:before {
    opacity: 1
}

.inline-video-player .vjs-poster:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: hsla(0, 0%, 100%, .8);
    transition: all .3s;
    opacity: 0
}

.inline-video-player .video-js {
    padding-top: 56.25%;
    height: 0;
    width: 100%
}

.inline-video-player .video-js .vjs-big-play-button {
    width: 50px;
    height: 50px;
    background-color: #f5aa00;
    color: #fff;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.inline-video-player .ellapsed-time {
    background: #ddd;
    position: absolute;
    right: 0;
    bottom: 0;
    color: #333;
    padding: 8px 20px 5px;
    font-size: 15px;
    font-family: STIX2, Times New Roman, serif;
    line-height: 1;
    z-index: 6
}

.inline-video-player .vjs-has-started+.ellapsed-time {
    display: none
}

.video-thumb {
    position: relative;
    padding-top: 56.25%;
    width: 100%;
    height: 0;
    border: 1px solid #ddd;
    overflow: hidden
}

.video-thumb img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%
}

.swal-modal {
    width: auto;
    min-width: 600px;
    border-radius: 0
}

.swal-modal .swal-button {
    border-radius: 0;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 40px;
    padding: 0 20px;
    border: 0
}

.swal-modal .swal-button:focus {
    box-shadow: none
}

.swal-modal .swal-button:hover {
    background-color: #0284d8;
    color: #fff
}

.success-portal-alert .swal-button:hover {
    opacity: 1
}

.success-portal-alert .btn-default {
    background-color: #f5aa00;
    border: 1px solid #f5aa00;
    color: #fff
}

.success-portal-alert .btn-default:hover {
    background-color: #fff;
    color: #f5aa00;
    text-decoration: none
}

.success-portal-alert .btn-blue {
    background-color: #026bb0;
    border: 1px solid #026bb0;
    color: #fff
}

.success-portal-alert .btn-blue:hover {
    background-color: #fff;
    color: #026bb0;
    text-decoration: none
}

.comments-log {
    position: fixed;
    bottom: 0;
    right: 150px;
    border: 1px solid #ddd;
    width: 400px;
    z-index: 999999;
    background-color: #fff;
    display: none
}

.comments-log .log-header {
    background-color: #f7f7f7;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    padding: 10px 20px;
    border-bottom: 1px solid #ddd
}

.comments-log .log-header h4 {
    -ms-flex: 1;
    flex: 1;
    font-size: 14px;
    font-family: Noto Sans, sans-serif;
    margin-bottom: 0
}

.comments-log .log-header h4 span {
    color: #666
}

.comments-log .log-body {
    height: 400px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 15px
}

.comments-log .log-footer {
    padding: 15px;
    background-color: #f7f7f7;
    border-top: 1px solid #ddd
}

.comments-log .log-footer .add-comment {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center
}

.comments-log .log-footer .input-textarea {
    -ms-flex: 1;
    flex: 1;
    margin-right: 10px;
    background-color: #fff
}

.comments-log .log-footer textarea {
    min-height: 190px;
    resize: none
}

.comments-log .log-footer input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #fff;
    background-color: #f5aa00;
    border: 1px solid #f5aa00;
    cursor: pointer;
    padding-left: 10px
}

.comments-log .log-footer input:hover {
    background-color: #fff;
    color: #f5aa00
}

.textarea-with-symbols-popup {
    position: relative
}

.textarea-with-symbols-popup textarea {
    padding-right: 50px
}

.textarea-with-symbols-popup .trigger-symbols-popup {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background-color: #f5aa00;
    border: 1px solid #f5aa00;
    color: #fff;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-decoration: none
}

.textarea-with-symbols-popup .trigger-symbols-popup.close {
    background-color: #f04124;
    border-color: #f04124
}

.textarea-with-symbols-popup .trigger-symbols-popup:hover {
    background-color: #fff;
    color: #f5aa00
}

.textarea-with-symbols-popup .symbold-popup {
    background-color: #f7f7f7;
    border: 1px solid #ddd;
    padding: 10px;
    width: 100%;
    display: none
}

.textarea-with-symbols-popup .symbold-popup ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
    grid-gap: 10px
}

.textarea-with-symbols-popup .symbold-popup ul a {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 30px;
    background-color: #333;
    border: 1px solid #333;
    color: #fff;
    font-size: 18px;
    text-decoration: none
}

.textarea-with-symbols-popup .symbold-popup ul a:hover {
    background-color: #fff;
    color: #333
}

.audio-player {
    max-width: 100%
}

.audio-player:before {
    padding-top: 0
}

.audio-player .video-js {
    background-color: #fff;
    height: 40px;
    width: 100%
}

.audio-player .video-js .vjs-control-bar {
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    opacity: 1;
    visibility: visible;
    background-color: #000;
    height: 40px
}

.audio-player .video-js .vjs-paused,
.audio-player .video-js .vjs-playing {
    color: #fff;
    height: 40px;
    line-height: 40px;
    display: -ms-flexbox;
    display: flex
}

.audio-player .video-js .vjs-big-play-button .vjs-icon-placeholder:before,
.audio-player .video-js .vjs-button>.vjs-icon-placeholder:before,
.audio-player .video-js .vjs-modal-dialog,
.audio-player .video-js .vjs-modal-dialog .vjs-modal-dialog-content {
    position: absolute;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 20px
}

.audio-player .video-js .vjs-time-tooltip {
    visibility: hidden
}

.audio-player .video-js .vjs-progress-control {
    position: relative
}

.audio-player .video-js .vjs-progress-control:hover .vjs-mouse-display {
    display: none
}

.audio-player .video-js .vjs-play-progress {
    display: -ms-flexbox;
    display: flex
}

.audio-player .video-js .vjs-play-progress:before {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%)
}

.audio-player .video-js .vjs-control:focus {
    outline: none;
    text-shadow: none
}

.audio-player .video-js .vjs-volume-panel:hover .vjs-volume-control.vjs-volume-horizontal {
    height: 40px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center
}

.audio-player .video-js .vjs-slider-horizontal .vjs-volume-level:before {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    top: 50%;
    transform: translate(-50%, -50%)
}

.audio-player .video-js .vjs-volume-panel .vjs-volume-control {
    width: 100%;
    height: 40px
}

.audio-player .video-js .vjs-play-progress {
    background-color: #e74c3c
}

.audio-player .video-js .vjs-slider {
    background: rgba(51, 51, 51, .9)
}

.audio-player .video-js .vjs-load-progress>div {
    background: #333
}

.audio-player .video-js .vjs-time-control {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    min-width: unset;
    font-size: 12px
}

.audio-player .video-js .vjs-time-control:nth-child(4) {
    padding: 0
}

.audio-player .video-js .vjs-time-control:nth-child(4) span {
    display: none
}

.audio-player .video-js .vjs-time-control:nth-child(4):before {
    content: "\2013"
}

.audio-player .video-js .vjs-time-control:nth-child(8) {
    display: none
}

.audio-player .video-js .vjs-time-control .vjs-time-divider {
    padding: 0
}

.audio-player .video-js .vjs-time-control .vjs-time-divider div span {
    display: none
}

.audio-player .video-js .vjs-time-divider {
    padding: 0
}

.audio-player .video-js .vjs-progress-control:hover .vjs-progress-holder:focus .vjs-time-tooltip,
.audio-player .video-js .vjs-progress-control:hover .vjs-time-tooltip,
.audio-player .video-js .vjs-time-divider div span {
    display: none
}

.audio-player .video-js .vjs-volume-bar {
    margin: 18.5px 0
}

.sortable-list>li {
    margin-bottom: 15px
}

.sortable-list .li-head {
    position: relative;
    padding: 10px 20px;
    border: 1px solid #ddd;
    background-color: #fff;
    height: 50px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 15px
}

.sortable-list .li-head:hover {
    cursor: grab
}

.sortable-list .li-head.error {
    border-color: #f04124
}

.sortable-list .li-head:before {
    content: "\f323";
    font-family: Material-Design-Iconic-Font;
    font-size: 19px;
    color: #ddd;
    margin-right: 20px
}

.sortable-list .li-head h4 {
    margin: 0;
    -ms-flex: 1;
    flex: 1
}

.sortable-list .li-head>a {
    margin-left: 10px
}

.sortable-list .empty-space {
    height: 50px;
    background-color: #f7f7f7;
    border: 1px dashed #ddd;
    margin-bottom: 15px
}

.sortable-list .li-content {
    display: none;
    padding: 20px;
    border: 1px dashed #ddd
}

.sortable-list .expand {
    position: relative;
    text-decoration: none;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center
}

.sortable-list .expand:hover {
    opacity: .5
}

.sortable-list .expand:before {
    content: "Expand";
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700
}

.sortable-list .expand:after {
    content: "\f2f2";
    font-family: Material-Design-Iconic-Font;
    font-size: 24px;
    margin-left: 5px
}

.sortable-list .expand.collapse:before {
    content: "Collapse";
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700
}

.sortable-list .expand.collapse:after {
    content: "\f2f8";
    font-family: Material-Design-Iconic-Font;
    font-size: 24px;
    margin-left: 5px
}

.login {
    height: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 1;
    flex: 1;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0;
    padding: 50px 0
}

.login>div {
    width: 450px
}

.login>div>div:not(.logo) {
    padding: 20px
}

.login .logo {
    width: 100px;
    height: 86px;
    margin: auto
}

.error-page {
    height: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 1;
    flex: 1;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0;
    text-align: center;
    background: radial-gradient(ellipse at center, #fff 0, #e6e7e8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#e6e7e8", GradientType=1)
}

.error-page h1 {
    margin: 20px 0 10px
}

.error-page p {
    margin-bottom: 20px
}

.error-page .icon {
    width: 450px;
    margin: auto
}

.expanding-list>li {
    margin-bottom: 15px
}

.expanding-list .li-header {
    position: relative;
    padding: 10px 20px;
    border: 1px solid #ddd;
    background-color: #fff;
    height: 50px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 15px
}

.expanding-list .li-header h3 {
    margin: 0;
    -ms-flex: 1;
    flex: 1
}

.expanding-list .li-header>a {
    margin-left: 10px
}

.expanding-list .empty-space {
    height: 50px;
    background-color: #f7f7f7;
    border: 1px dashed #ddd;
    margin-bottom: 15px
}

.expanding-list .li-content {
    display: none
}

.expanding-list .expand {
    position: relative;
    text-decoration: none;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center
}

.expanding-list .expand:hover {
    opacity: .5
}

.expanding-list .expand:before {
    content: "Expand";
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700
}

.expanding-list .expand:after {
    content: "\f2f2";
    font-family: Material-Design-Iconic-Font;
    font-size: 24px;
    margin-left: 5px
}

.expanding-list .expand.collapse:before {
    content: "Collapse";
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700
}

.expanding-list .expand.collapse:after {
    content: "\f2f8";
    font-family: Material-Design-Iconic-Font;
    font-size: 24px;
    margin-left: 5px
}

.collapsible-content .head {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    padding: 10px;
    border: 1px solid #ddd
}

.collapsible-content .head h3 {
    -ms-flex: 1;
    flex: 1
}

.collapsible-content .head .controls {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center
}

.collapsible-content .head .controls .collapse {
    display: none
}

.collapsible-content .content {
    padding: 15px;
    border: 1px solid #ddd;
    border-top: none;
    display: none
}

.grid-gallery>li {
    border: 1px solid #ddd;
    padding: 10px;
    position: relative;
    overflow: hidden;
    margin-bottom: 30px;
    height: 350px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center
}

.grid-gallery>li img {
    max-width: 100%;
    max-height: 100%;
    height: 100%
}

.grid-gallery>li:hover .overlay {
    opacity: 1;
    visibility: visible
}

.grid-gallery .overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    transition: all .3s;
    background-color: hsla(0, 0%, 100%, .95);
    opacity: 0;
    visibility: hidden
}

.grid-gallery .overlay a {
    margin: 0 5px
}

.grid-images {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 30px
}

.grid-images .list-center {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%
}

.grid-images .list-center a {
    -ms-flex-direction: row !important;
    flex-direction: row !important
}

.grid-images>li {
    border: 1px solid #ddd;
    text-align: center;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column
}

.grid-images>li a {
    -ms-flex-pack: center;
    -ms-flex: 1;
    flex: 1;
    -ms-flex-align: center;
    align-items: center;
    justify-content: center;
    flex-direction: column
}

.grid-images>li a,
.grid-images>li figure {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column
}

.grid-images>li figure {
    padding: 30px;
    flex-direction: column;
    height: 100%;
    width: 100%
}

.grid-images>li figure figcaption {
    margin: auto -30px -30px;
    padding: 10px
}

.grid-images>li img {
    max-height: 200px;
    margin-bottom: 30px;
    display: block;
    -ms-flex: 1;
    flex: 1
}

.grid-images .alt-text {
    padding: 10px;
    border-top: 1px dashed #ddd;
    margin-top: auto;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center
}

.grid-images .alt-text p {
    -ms-flex: 1;
    flex: 1
}

.grid-images .alt-text a {
    margin-left: 10px;
    -ms-flex: initial;
    flex: initial
}

.featured-image {
    text-align: center
}

.featured-image img {
    max-height: 400px;
    border: 1px solid #ddd;
    margin-bottom: 30px
}

#upload-failed-message .message,
#upload-success-message .message {
    color: #000;
    margin: 0;
    float: none;
    display: block;
    text-align: center;
    font-size: 24px
}

#upload-failed-message .message span,
#upload-success-message .message span {
    font-size: 16px;
    color: #78b517
}

#upload-failed-message .icon,
#upload-success-message .icon {
    text-align: center;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: 20px
}

#upload-failed-message .icon i,
#upload-success-message .icon i {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 1px solid #78b517;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 60px;
    color: #78b517
}

#upload-failed-message .icon i {
    border-color: #f04124;
    color: #f04124
}

.grid-svg-gallery .mfp-figure {
    padding: 20px;
    background-color: #fff
}

.grid-svg-gallery figure img {
    height: 500px
}

.grid-svg-gallery .mfp-image-holder .mfp-close {
    right: 0;
    top: -40px;
    width: auto;
    width: 40px;
    height: 40px;
    line-height: 40px;
    padding: 0;
    text-align: center
}

.grid-svg-gallery .mfp-counter {
    right: 15px
}

.log-header .close-log {
    width: unset
}

.comment {
    margin-bottom: 20px
}

.comment:last-child {
    margin-bottom: 0
}

.comment .comment-header,
.comment .comment-header.has-status .status {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center
}

.comment .comment-header.has-status .status {
    margin-left: 15px;
    font-weight: 700;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 12px;
    padding: 5px 10px
}

.comment .comment-header.has-status .status.status-red {
    border: 1px solid #f04124;
    color: #f04124
}

.comment .comment-header.has-status .status.status-green {
    border: 1px solid #78b517;
    color: #78b517
}

.comment .comment-header.has-status .status.status-blue {
    border: 1px solid #026bb0;
    color: #026bb0
}

.comment .comment-header.has-status .status.status-orange {
    border: 1px solid #f5aa00;
    color: #f5aa00
}

.comment .comment-header h4 {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    font-family: Noto Sans, sans-serif;
    font-size: 16px;
    margin-bottom: 0
}

.comment .comment-header h4 i {
    margin-right: 10px;
    color: #026bb0
}

.comment .comment-header h3 {
    font-family: Noto Sans, sans-serif;
    font-size: 14px;
    margin-left: 10px;
    color: #026bb0
}

.comment pre {
    font-size: 15px
}

.comment p,
.comment pre {
    font-family: Noto Sans, sans-serif
}

.comment p {
    margin-bottom: 15px
}

.comment p:last-child {
    margin-bottom: 0
}

.comment .comment-content {
    padding: 15px;
    border: 1px solid #ddd;
    margin-top: 15px;
    position: relative;
    overflow-x: auto
}

.comment .comment-content:before {
    content: "";
    display: block;
    position: absolute;
    top: -6px;
    left: 25px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid gray
}

.comment .time-stamp {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: end;
    justify-content: flex-end;
    margin-top: 5px;
    font-size: 12px;
    color: gray
}

.progress-bar {
    width: 100%;
    height: 10px;
    background-color: #ddd;
    position: relative
}

.progress-bar .bar {
    position: relative;
    width: 0;
    height: 10px;
    background-color: #333;
    text-align: center;
    line-height: 30px;
    color: #fff;
    margin: 0;
    transition: all .3s
}

.progress-bar span {
    width: 30px;
    height: 30px;
    background-color: #333;
    color: #fff;
    font-size: 10px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: absolute;
    top: -35px;
    right: 0
}

.progress-bar span:after {
    content: "";
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #333;
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%)
}

.user-steps {
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 60px;
    position: relative;
    overflow: hidden
}

.user-steps:before {
    content: "";
    height: 3px;
    background: #ddd;
    width: 100%;
    position: absolute;
    top: 25px;
    left: 0;
    z-index: -10
}

.user-steps>div {
    -ms-flex: 1;
    flex: 1;
    text-align: center;
    position: relative
}

.user-steps>div span {
    width: 50px;
    height: 50px;
    border: 3px solid #ddd;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    border-radius: 50%;
    margin: 0 auto 10px;
    background: #fff;
    color: gray
}

.user-steps>div:before {
    content: "";
    height: 3px;
    background: #78b517;
    width: 100%;
    position: absolute;
    top: 25px;
    left: 0;
    z-index: -1;
    transform: translateX(-50%);
    display: none
}

.user-steps>div h4 {
    margin: 0;
    color: gray;
    font-weight: 400;
    font-size: 16px
}

.user-steps>div.active h4 {
    color: #333
}

.user-steps>div.active:before {
    display: block
}

.user-steps>div.active span {
    border-color: #78b517;
    color: #78b517
}

.user-steps>div.done:before {
    display: block
}

.user-steps>div.done span {
    border-color: #78b517;
    background-color: #78b517;
    color: #fff
}

.user-steps>div.not-done:before {
    display: block;
    background-color: #f04124
}

.user-steps>div.not-done span {
    border-color: #f04124;
    background-color: #f04124;
    color: #fff
}

.user-steps>div:first-child:before {
    background: #fff
}

.user-steps>div:last-child:after {
    background: #fff;
    transform: translateX(50%);
    content: "";
    height: 3px;
    width: 100%;
    position: absolute;
    top: 25px;
    left: 0;
    z-index: -1
}

.book-details {
    display: -ms-flexbox;
    display: flex
}

.book-details figure {
    width: 200px;
    height: auto;
    border: 1px solid #ddd;
    margin-right: 20px
}

.book-details .meta h2 {
    font-family: STIX2;
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 5px;
    line-height: 1.5
}

.book-details .meta .size {
    color: gray;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 30px
}

.book-details .meta .size span {
    font-size: 24px;
    color: #026bb0;
    margin-right: 5px
}

.search-book {
    padding-top: 60px;
    border-top: 1px solid #ddd
}

.search-results .title {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center
}

.search-results .title h2 {
    -ms-flex: 1;
    flex: 1
}

.books-list,
.books-list>li {
    width: 100%;
    float: left
}

.books-list>li {
    margin-bottom: 30px;
    display: -ms-flexbox;
    display: flex
}

.books-list>li figure {
    width: 200px;
    -ms-flex-preferred-size: 200px;
    flex-basis: 200px;
    height: auto;
    border: 1px solid #ddd;
    margin-right: 20px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center
}

.books-list>li .meta h3 {
    font-family: STIX2;
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 5px;
    line-height: 1.5
}

.books-list>li .meta p {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center
}

.books-list>li .meta p:before {
    content: "\f2f6";
    font-family: Material-Design-Iconic-Font;
    font-size: 24px;
    color: gray;
    margin-right: 10px;
    line-height: 0
}

.books-list>li .meta a {
    margin-top: 20px
}

.pagniation {
    width: 100%;
    float: left
}

.question-voice-over .record-controls {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: end;
    justify-content: flex-end
}

.question-voice-over .record-controls .recording-timer {
    height: 40px;
    border: 1px solid #ddd;
    padding: 0 30px;
    margin-right: 10px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center
}

.question-voice-over .record-controls .recording-timer span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #f04124;
    display: inline-block;
    margin-right: 5px;
    animation: flash linear 1s infinite
}

@keyframes flash {
    0% {
        opacity: 1
    }

    50% {
        opacity: .1
    }

    to {
        opacity: 1
    }
}

.question-voice-over .instance .stem {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center
}

.question-voice-over .instance .stem p {
    -ms-flex: 1;
    flex: 1
}

.question-voice-over .instance .answers .record-controls {
    margin-left: auto
}

.attribution-source-preview .wrapper {
    width: 1024px;
    padding: 30px;
    margin-left: 30px;
    border: 1px solid #ddd;
    font-family: STIX2
}

.attribution-source-preview .wrapper:after,
.attribution-source-preview .wrapper:before {
    content: " ";
    display: table
}

.attribution-source-preview .wrapper:after {
    clear: both
}

.attribution-source-preview h1 {
    font-family: timesExtraBold;
    font-size: 30px;
    margin-bottom: 20px;
    line-height: 1.2
}

.attribution-source-preview p {
    font-size: 18px;
    line-height: 1.5;
    margin-bottom: 10px
}

.attribution-source-preview .article h3 {
    font-size: 21px;
    font-weight: 700;
    line-height: 1.5
}

.attribution-source-preview .list {
    margin-bottom: 10px;
    padding-left: 40px
}

.attribution-source-preview .list li {
    font-size: 18px;
    line-height: 1.5;
    position: relative;
    padding-left: 15px
}

.attribution-source-preview .list li:before {
    content: "\f2f6";
    font-family: Material-Design-Iconic-Font;
    font-size: 24px;
    position: absolute;
    line-height: 1;
    left: 0;
    top: 0;
    color: #f5aa00
}

.rejection-comment {
    margin-bottom: 30px;
    border: 1px solid #f04124;
    padding: 20px
}

.rejection-comment h3 {
    color: #f04124;
    margin-bottom: 15px
}

.rejection-comment h3 span {
    margin-right: 10px
}

.approval-comment {
    margin-bottom: 30px;
    border: 1px solid #78b517;
    padding: 20px
}

.approval-comment h3 {
    color: #78b517;
    margin-bottom: 15px
}

.approval-comment h3 span {
    margin-right: 10px
}

.row .basic-tabs {
    border: none;
    border-radius: 0
}

.row .basic-tabs>ul {
    border: none;
    margin-bottom: 30px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    background-color: #fff
}

.row .basic-tabs>ul li {
    background-color: #f7f7f7;
    color: #333;
    border: none;
    -ms-flex: 1;
    flex: 1;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 0;
    border-right: none;
    outline: none
}

.row .basic-tabs>ul li:last-child {
    border-right: 1px solid #ddd
}

.row .basic-tabs>ul li.ui-tabs-active {
    border-bottom-color: transparent;
    background-color: #fff
}

.row .basic-tabs>ul li.ui-tabs-active a {
    font-weight: 600
}

.row .basic-tabs>ul li a {
    color: #333;
    padding: 15px;
    display: block;
    outline: none
}

.row .basic-tabs>ul li a .content {
    margin-top: 1rem;
    font-size: 1.4rem
}

.row .basic-tabs>ul li a .content p {
    font-weight: 400
}

.row .basic-tabs .ui-tabs-panel {
    border: none;
    border-radius: 0
}

.row .basic-tabs button {
    font-family: Noto Sans, sans-serif;
    font-size: 12px
}

.chart-wrapper {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.accordion-panel-list>li {
    margin-bottom: 15px
}

.accordion-panel-list .li-head {
    position: relative;
    padding: 10px 20px;
    border: 1px solid #ddd;
    background-color: #fff;
    height: 50px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 15px
}

.accordion-panel-list .li-head:before {
    content: "\f323";
    font-family: Material-Design-Iconic-Font;
    font-size: 19px;
    color: #ddd;
    margin-right: 20px
}

.accordion-panel-list .li-head h4 {
    margin: 0;
    -ms-flex: 1;
    flex: 1
}

.accordion-panel-list .li-head>a {
    margin-left: 10px
}

.accordion-panel-list .li-content {
    display: none;
    padding: 20px;
    border: 1px dashed #ddd
}

.accordion-panel-list .expand {
    position: relative;
    text-decoration: none;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center
}

.accordion-panel-list .expand:hover {
    opacity: .5
}

.accordion-panel-list .expand:before {
    content: "Expand";
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700
}

.accordion-panel-list .expand:after {
    content: "\f2f2";
    font-family: Material-Design-Iconic-Font;
    font-size: 24px;
    margin-left: 5px
}

.accordion-panel-list .expand.collapse:before {
    content: "Collapse";
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700
}

.accordion-panel-list .expand.collapse:after {
    content: "\f2f8";
    font-family: Material-Design-Iconic-Font;
    font-size: 24px;
    margin-left: 5px
}

.accordion-panel-list.not-sortable {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column
}

.accordion-panel-list.not-sortable .expand:after,
.accordion-panel-list.not-sortable .expand:before {
    display: none
}

.accordion-panel-list.not-sortable .expand:hover {
    opacity: 1
}

.accordion-panel-list.not-sortable .li-head {
    width: 100%
}

.accordion-panel-list.not-sortable .li-head:before {
    display: none
}

.accordion-panel-list.not-sortable .li-head:hover {
    border-color: #f5aa00
}

.accordion-panel-list.not-sortable .li-head p {
    color: #333;
    margin-right: 2rem
}

.accordion-panel-list.not-sortable .li-head:after {
    content: "\f2f2";
    font-family: Material-Design-Iconic-Font;
    font-size: 24px;
    margin-left: 5px
}

.accordion-panel-list.not-sortable .li-content {
    padding: 0;
    border: 0
}

.filter-panel-list>li {
    margin-bottom: 15px
}

.filter-panel-list .li-head {
    position: relative;
    background-color: #fff;
    height: 50px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 0
}

.filter-panel-list .li-head:before {
    content: none
}

.filter-panel-list .li-head>a {
    margin: 0;
    -ms-flex: 1;
    flex: 1;
    position: relative;
    text-decoration: none;
    cursor: pointer;
    color: gray;
    font-size: 16px;
    font-weight: 700
}

.filter-panel-list .li-content-video-filter {
    padding: 0;
    border: none
}

.filter-panel-list .li-content-video-filter .table-filter-2 {
    border-top: none
}

.filter-panel-list .no-border-bottom {
    border-bottom-color: transparent
}

.filter-panel-list .expand {
    position: relative;
    text-decoration: none;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center
}

.filter-panel-list .expand:hover {
    opacity: .5
}

.filter-panel-list .expand:before {
    content: "Expand";
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700;
    position: absolute;
    right: 15px;
    color: #f5aa00
}

.filter-panel-list .expand:after {
    content: "\f2f2";
    font-family: Material-Design-Iconic-Font;
    font-size: 24px;
    margin-left: 5px;
    position: absolute;
    right: 0;
    color: #f5aa00
}

.filter-panel-list .expand.collapse:before {
    content: "Collapse";
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700;
    position: absolute;
    right: 15px;
    color: #f5aa00
}

.filter-panel-list .expand.collapse:after {
    content: "\f2f8";
    font-family: Material-Design-Iconic-Font;
    font-size: 24px;
    position: absolute;
    right: 0;
    color: #f5aa00
}

.alignment-details {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.alignment-details .book-cover {
    margin-right: 20px
}

.alignment-details .details p {
    font-size: 18px
}

.alignment-details .details span {
    font-weight: 700
}

.alignment-details .disclaimer {
    width: 100%;
    margin-top: 15px
}

.alignment-details .disclaimer p {
    padding: 15px;
    width: 50%;
    border: 1px solid #ddd
}

.preview-video-page main {
    padding: 0 30px
}

.preview-video-page main .container {
    width: 848px;
    margin: 0
}

.preview-video-page main .container .page-title h1 {
    font-family: timesExtraBold;
    font-weight: 700;
    font-size: 30px
}

.preview-video-page main .container .page-description {
    margin-bottom: 20px;
    font-size: 18px;
    font-family: STIX2
}

.preview-video-page main .container .video-player {
    max-width: 100%
}

.preview-video-page main .container .overview {
    margin-top: 20px
}

.preview-video-page main .container .overview>h3 {
    margin-bottom: 10px
}

.preview-video-page main .container .overview p {
    text-align: justify;
    margin-bottom: 10px
}

.preview-video-page main .container .overview ul {
    margin-bottom: 10px
}

.preview-video-page main .container .overview .table {
    margin: 20px auto
}

.preview-video-page main .container .overview .table td,
.preview-video-page main .container .overview .table th {
    border-color: #f9d7a2
}

.preview-video-page main .container .overview .table th {
    background: #fefaf4;
    color: #d08c22
}

.preview-video-page main .container .overview .table-bordered {
    border: 1px solid #f9d7a2;
    width: 100%
}

.preview-video-page main .container .overview .table-bordered th {
    background: none;
    border-width: 1px;
    text-align: center;
    vertical-align: middle;
    font-weight: 400;
    padding: 8px;
    color: #d08c22;
    background-color: #fefaf4;
    border: 1px solid #f9d7a2
}

.preview-video-page main .container .overview .table-bordered td {
    text-align: center;
    vertical-align: middle;
    font-weight: 400;
    padding: 8px;
    border: 1px solid #f9d7a2;
    background: #fff
}

.preview-video-page main .container .overview .displayed-image,
.preview-video-page main .container .overview .displayed_equation {
    max-width: 100%
}

.preview-video-page main .container .overview .raster-image {
    margin: 20px auto;
    text-align: center
}

.preview-video-page main .container .overview .raster-image img {
    max-width: 640px;
    max-height: 320px
}

@media (max-width:870px) {
    .preview-video-page main .container .overview .raster-image img {
        max-width: 100%
    }
}

.preview-video-page main .container .overview .raster-image.circle img {
    border-radius: 50%
}

.preview-video-page main .container .overview ul:not(.endnotes) {
    margin-bottom: 10px;
    list-style: none;
    padding-left: 40px
}

@media (max-width:736px) {
    .preview-video-page main .container .overview ul:not(.endnotes) {
        padding-left: 0
    }
}

.preview-video-page main .container .overview ul:not(.endnotes) ol {
    list-style-position: outside;
    padding-left: inherit
}

.preview-video-page main .container .overview ul:not(.endnotes) ol li {
    display: list-item;
    padding-left: 0
}

.preview-video-page main .container .overview ul:not(.endnotes) ol li:before {
    display: none
}

.preview-video-page main .container .overview ul:not(.endnotes) li {
    display: block;
    padding-left: 15px
}

.preview-video-page main .container .overview ul:not(.endnotes) li>p {
    margin: 0;
    display: inline
}

.preview-video-page main .container .overview ul:not(.endnotes) li:before {
    content: "";
    font-family: Font-Awesome;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "liga";
    color: #f5aa00;
    font-size: 20px;
    font-weight: 900;
    margin-left: -15px;
    position: static;
    margin-right: 10px
}

.preview-video-page main .container .overview ul:not(.endnotes) li a {
    color: #f5aa00
}

.preview-video-page main .container .overview ul:not(.endnotes) li a:hover {
    text-decoration: underline
}

.preview-video-page main .container .overview ul:not(.endnotes) li .inline-displayed {
    margin-left: 5px
}

.preview-video-page main .container .overview ul:not(.endnotes) li>.list {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%
}

.preview-video-page main .container .overview h4 {
    margin-top: 30px;
    margin-bottom: 10px
}

.preview-video-page main .container .overview h4:first-child {
    margin-top: 0
}

.preview-video-page main .container .overview h4:last-child {
    margin-bottom: 0
}

.preview-video-page main .container .transcript {
    text-align: justify;
    margin-top: 20px;
    position: relative
}

.preview-video-page main .container .transcript h3 {
    font-family: STIX2;
    font-weight: 700;
    font-size: 21px;
    margin-bottom: 10px
}

.preview-video-page main .container .transcript p {
    margin-bottom: 10px;
    font-size: 18px;
    font-family: STIX2
}

.preview-video-page main .container .transcript:after,
.preview-video-page main .container .transcript:before {
    position: absolute;
    font-size: 100px;
    color: rgba(247, 166, 0, .2);
    z-index: -1
}

.preview-video-page main .container .transcript:before {
    content: "";
    left: 0;
    top: 0
}

.preview-video-page main .container .transcript:after,
.preview-video-page main .container .transcript:before {
    font-family: Font-Awesome;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "liga";
    font-weight: 900
}

.preview-video-page main .container .transcript:after {
    content: "";
    right: 0;
    bottom: -25px;
    line-height: 1
}

.question-preview-page main {
    padding: 0 30px
}

.question-preview-page .container {
    width: 848px;
    margin: 0
}

.question-preview-page-1 .question-number.flex.flex-vertical-center {
    -ms-flex-pack: justify;
    justify-content: space-between
}

.question-preview-page-1 .list-block {
    padding-left: 1.5rem
}

.question-preview-page-1 .status-badge {
    padding: 10px 15px;
    color: #fff;
    height: 2.5rem
}

.question-preview-page-1 .badge-orange {
    background-color: #f5aa00
}

.question-preview-page-1 .badge-green {
    background-color: #78b517
}

.question-preview-page-1 .badge-blue {
    background-color: transparent;
    color: #026bb0;
    outline: 1px solid #026bb0
}

.question-preview-page-1 .badge-black {
    position: relative;
    background-color: transparent;
    color: gray;
    outline: 1px solid gray
}

.question-preview-page-1 .badge-red {
    position: relative;
    background-color: transparent;
    color: red;
    outline: 1px solid red
}

.question-preview-page-1 .inflow-bg {
    width: 100%;
    height: 40px;
    min-height: 40px;
    display: block !important;
    margin-top: 15px;
    text-align: center;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    color: #333;
    font-size: 2rem;
    transition: all .2s linear;
    -ms-flex-flow: column;
    flex-flow: column;
    text-decoration: none;
    line-height: 30px
}

.explainer-body .sortable-list-2.disable-drag .handler,
.question-body .sortable-list-2.disable-drag .handler {
    cursor: auto
}

.explainer-body .sortable-list-2>li,
.question-body .sortable-list-2>li,
.question-body .statement {
    border: 1px dashed #ddd;
    margin-bottom: 30px
}

.explainer-body .sortable-list-2>li .handler,
.question-body .sortable-list-2>li .handler,
.question-body .statement .handler {
    background-color: #f7f7f7;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: start;
    justify-content: flex-start;
    padding: 10px 15px;
    color: gray;
    cursor: grab
}

.explainer-body .sortable-list-2>li .handler .delete-section,
.question-body .sortable-list-2>li .handler .delete-section,
.question-body .statement .handler .delete-section {
    margin-left: auto
}

.explainer-body .sortable-list-2>li .content,
.explainer-body .sortable-list-2>li .li-content,
.question-body .sortable-list-2>li .content,
.question-body .sortable-list-2>li .li-content,
.question-body .statement .content,
.question-body .statement .li-content {
    padding: 20px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: stretch;
    align-items: stretch
}

.explainer-body .sortable-list-2>li .content .main,
.explainer-body .sortable-list-2>li .li-content .main,
.question-body .sortable-list-2>li .content .main,
.question-body .sortable-list-2>li .li-content .main,
.question-body .statement .content .main,
.question-body .statement .li-content .main {
    -ms-flex: 1;
    flex: 1
}

.explainer-body .sortable-list-2>li .content .comment,
.explainer-body .sortable-list-2>li .li-content .comment,
.question-body .sortable-list-2>li .content .comment,
.question-body .sortable-list-2>li .li-content .comment,
.question-body .statement .content .comment,
.question-body .statement .li-content .comment {
    padding-left: 15px;
    margin-left: 15px;
    border-left: 1px solid #ddd;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center
}

.explainer-body .sortable-list-2>li .question-type,
.question-body .sortable-list-2>li .question-type,
.question-body .statement .question-type {
    display: inline-block;
    background-color: #333;
    color: #fff;
    padding: 4px 20px;
    vertical-align: middle;
    border-radius: 5px;
    letter-spacing: 1px;
    margin-bottom: 15px
}

.explainer-body .sortable-list-2 .user-comment,
.question-body .sortable-list-2 .user-comment {
    max-width: 300px;
    padding: 10px;
    border: 1px solid #ddd
}

.explainer-body .sortable-list-2 .user-comment h3,
.question-body .sortable-list-2 .user-comment h3 {
    margin-bottom: 5px
}

.explainer-body .sortable-list-2 .user-comment h5,
.question-body .sortable-list-2 .user-comment h5 {
    color: gray;
    font-size: 12px
}

.explainer-body .sortable-list-2 .user-comment p,
.question-body .sortable-list-2 .user-comment p {
    margin-top: 10px
}

.explainer-body .sortable-list-2 .bottom,
.explainer-body .sortable-list-2 .middle,
.question-body .sortable-list-2 .bottom,
.question-body .sortable-list-2 .middle {
    border: 1px solid #ddd;
    padding: 15px
}

.explainer-body .sortable-list-2 .block,
.question-body .sortable-list-2 .block {
    position: relative
}

.explainer-body .sortable-list-2 .remove-block,
.question-body .sortable-list-2 .remove-block {
    position: absolute;
    bottom: 0;
    right: 0
}

.explainer-body span.error,
.question-body span.error {
    color: #f04124;
    font-size: 12px;
    margin-top: 5px;
    display: block !important
}

.explainer-body input.error,
.explainer-body select.error,
.explainer-body textarea.error,
.question-body input.error,
.question-body select.error,
.question-body textarea.error {
    border-color: #f04124
}

span.error {
    color: #f04124;
    margin-top: 5px;
    font-size: 12px;
    display: block;
    width: 100%
}

.table-filter {
    border: 1px solid #ddd;
    padding: 20px
}

.table-filter .filter-content {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.table-filter .filter-content>div {
    margin-right: 100px;
    margin-bottom: 30px;
    white-space: nowrap
}

.table-filter .filter-content>div:last-child {
    min-width: 350px;
    max-width: 500px
}

.table-filter .filter-content .dropdown-checkboxes ul {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 200px;
    max-width: 350px;
    padding: 15px
}

.table-filter .group {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column
}

.table-filter .package-content {
    -ms-flex-wrap: unset;
    flex-wrap: unset
}

.table-filter .package-content>div {
    margin-right: 7rem
}

.table-filter .package-content>div:last-child {
    min-width: auto;
    max-width: unset
}

.table-filter .package-content .category-group .group {
    display: grid;
    grid-template-rows: repeat(5, 1fr);
    grid-auto-flow: column;
    grid-column-gap: 3rem
}

.select-questions .instance-status {
    cursor: pointer
}

.select-questions .instance-status.selected {
    border-color: #78b517;
    border-width: 2px;
    background-color: #fdfefa
}

@keyframes plyr-progress {
    to {
        background-position: 25px 0
    }
}

@keyframes plyr-popup {
    0% {
        opacity: .5;
        transform: translateY(10px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes plyr-fade-in {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.plyr {
    -moz-osx-font-smoothing: auto;
    -webkit-font-smoothing: subpixel-antialiased;
    direction: ltr;
    font-family: Avenir, Avenir Next, Helvetica Neue, Segoe UI, Helvetica, Arial, sans-serif;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    line-height: 1.7;
    max-width: 100%;
    min-width: 200px;
    position: relative;
    text-shadow: none;
    transition: box-shadow .3s ease
}

.plyr audio,
.plyr video {
    border-radius: inherit;
    height: auto;
    vertical-align: middle;
    width: 100%
}

.plyr button {
    font: inherit;
    line-height: inherit;
    width: auto
}

.plyr:focus {
    outline: 0
}

.plyr--full-ui {
    box-sizing: border-box
}

.plyr--full-ui *,
.plyr--full-ui :after,
.plyr--full-ui :before {
    box-sizing: inherit
}

.plyr--full-ui a,
.plyr--full-ui button,
.plyr--full-ui input,
.plyr--full-ui label {
    -ms-touch-action: manipulation;
    touch-action: manipulation
}

.plyr__badge {
    background: #4a5764;
    border-radius: 2px;
    color: #fff;
    font-size: 9px;
    line-height: 1;
    padding: 3px 4px
}

.plyr--full-ui ::-webkit-media-text-track-container {
    display: none
}

.plyr__captions {
    animation: plyr-fade-in .3s ease;
    bottom: 0;
    color: #fff;
    display: none;
    font-size: 14px;
    left: 0;
    padding: 10px;
    position: absolute;
    text-align: center;
    transition: transform .4s ease-in-out;
    width: 100%
}

.plyr__captions .plyr__caption {
    background: rgba(0, 0, 0, .8);
    border-radius: 2px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    line-height: 185%;
    padding: .2em .5em;
    white-space: pre-wrap
}

.plyr__captions .plyr__caption div {
    display: inline
}

.plyr__captions span:empty {
    display: none
}

@media (min-width:480px) {
    .plyr__captions {
        font-size: 16px;
        padding: 20px
    }
}

@media (min-width:768px) {
    .plyr__captions {
        font-size: 18px
    }
}

.plyr--captions-active .plyr__captions {
    display: block
}

.plyr:not(.plyr--hide-controls) .plyr__controls:not(:empty)~.plyr__captions {
    transform: translateY(-40px)
}

.plyr__control {
    background: 0 0;
    border: 0;
    border-radius: 3px;
    color: inherit;
    cursor: pointer;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    overflow: visible;
    padding: 7px;
    position: relative;
    transition: all .3s ease
}

.plyr__control svg {
    display: block;
    fill: currentColor;
    height: 18px;
    pointer-events: none;
    width: 18px
}

.plyr__control:focus {
    outline: 0
}

.plyr__control.plyr__tab-focus {
    box-shadow: 0 0 0 5px rgba(0, 179, 255, .5);
    outline: 0
}

a.plyr__control {
    text-decoration: none
}

.plyr__control.plyr__control--pressed .icon--not-pressed,
.plyr__control.plyr__control--pressed .label--not-pressed,
.plyr__control:not(.plyr__control--pressed) .icon--pressed,
.plyr__control:not(.plyr__control--pressed) .label--pressed,
a.plyr__control:after,
a.plyr__control:before {
    display: none
}

.plyr--audio .plyr__control.plyr__tab-focus,
.plyr--audio .plyr__control:hover,
.plyr--audio .plyr__control[aria-expanded=true],
.plyr--video .plyr__control.plyr__tab-focus,
.plyr--video .plyr__control:hover,
.plyr--video .plyr__control[aria-expanded=true] {
    background: #00b3ff;
    color: #fff
}

.plyr__control--overlaid {
    background: rgba(0, 179, 255, .8);
    border: 0;
    border-radius: 100%;
    color: #fff;
    display: none;
    left: 50%;
    padding: 15px;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2
}

.plyr__control--overlaid svg {
    left: 2px;
    position: relative
}

.plyr__control--overlaid:focus,
.plyr__control--overlaid:hover {
    background: #00b3ff
}

.plyr--playing .plyr__control--overlaid {
    opacity: 0;
    visibility: hidden
}

.plyr--full-ui.plyr--video .plyr__control--overlaid {
    display: block
}

.plyr--full-ui ::-webkit-media-controls {
    display: none
}

.plyr__controls {
    -ms-flex-align: center;
    align-items: center;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: end;
    justify-content: flex-end;
    text-align: center
}

.plyr__controls .plyr__progress__container {
    -ms-flex: 1;
    flex: 1;
    min-width: 0
}

.plyr__controls .plyr__controls__item {
    margin-left: 2.5px
}

.plyr__controls .plyr__controls__item:first-child {
    margin-left: 0;
    margin-right: auto
}

.plyr__controls .plyr__controls__item.plyr__progress__container {
    padding-left: 2.5px
}

.plyr__controls .plyr__controls__item.plyr__time {
    padding: 0 5px
}

.plyr__controls .plyr__controls__item.plyr__progress__container:first-child,
.plyr__controls .plyr__controls__item.plyr__time+.plyr__time,
.plyr__controls .plyr__controls__item.plyr__time:first-child {
    padding-left: 0
}

.plyr__controls .plyr__controls__item.plyr__volume {
    padding-right: 5px
}

.plyr__controls .plyr__controls__item.plyr__volume:first-child {
    padding-right: 0
}

.plyr__controls:empty {
    display: none
}

.plyr--audio .plyr__controls {
    background: #fff;
    border-radius: inherit;
    color: #4a5764;
    padding: 10px
}

.plyr--video .plyr__controls {
    background: linear-gradient(transparent, rgba(0, 0, 0, .7));
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
    bottom: 0;
    color: #fff;
    left: 0;
    padding: 20px 5px 5px;
    position: absolute;
    right: 0;
    transition: opacity .4s ease-in-out, transform .4s ease-in-out;
    z-index: 3
}

@media (min-width:480px) {
    .plyr--video .plyr__controls {
        padding: 35px 10px 10px
    }
}

.plyr--video.plyr--hide-controls .plyr__controls {
    opacity: 0;
    pointer-events: none;
    transform: translateY(100%)
}

.plyr [data-plyr=airplay],
.plyr [data-plyr=captions],
.plyr [data-plyr=fullscreen],
.plyr [data-plyr=pip] {
    display: none
}

.plyr--airplay-supported [data-plyr=airplay],
.plyr--captions-enabled [data-plyr=captions],
.plyr--fullscreen-enabled [data-plyr=fullscreen],
.plyr--pip-supported [data-plyr=pip] {
    display: inline-block
}

.plyr__menu {
    display: -ms-flexbox;
    display: flex;
    position: relative
}

.plyr__menu .plyr__control svg {
    transition: transform .3s ease
}

.plyr__menu .plyr__control[aria-expanded=true] svg {
    transform: rotate(90deg)
}

.plyr__menu .plyr__control[aria-expanded=true] .plyr__tooltip {
    display: none
}

.plyr__menu__container {
    animation: plyr-popup .2s ease;
    background: hsla(0, 0%, 100%, .9);
    border-radius: 4px;
    bottom: 100%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
    color: #4a5764;
    font-size: 16px;
    margin-bottom: 10px;
    position: absolute;
    right: -3px;
    text-align: left;
    white-space: nowrap;
    z-index: 3
}

.plyr__menu__container>div {
    overflow: hidden;
    transition: height .35s cubic-bezier(.4, 0, .2, 1), width .35s cubic-bezier(.4, 0, .2, 1)
}

.plyr__menu__container:after {
    border: 4px solid transparent;
    border-top-color: hsla(0, 0%, 100%, .9);
    content: "";
    height: 0;
    position: absolute;
    right: 15px;
    top: 100%;
    width: 0
}

.plyr__menu__container [role=menu] {
    padding: 7px
}

.plyr__menu__container [role=menuitem],
.plyr__menu__container [role=menuitemradio] {
    margin-top: 2px
}

.plyr__menu__container [role=menuitem]:first-child,
.plyr__menu__container [role=menuitemradio]:first-child {
    margin-top: 0
}

.plyr__menu__container .plyr__control {
    -ms-flex-align: center;
    align-items: center;
    color: #4a5764;
    display: -ms-flexbox;
    display: flex;
    font-size: 14px;
    padding: 4px 11px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 100%
}

.plyr__menu__container .plyr__control>span {
    -ms-flex-align: inherit;
    align-items: inherit;
    display: -ms-flexbox;
    display: flex;
    width: 100%
}

.plyr__menu__container .plyr__control:after {
    border: 4px solid transparent;
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
}

.plyr__menu__container .plyr__control--forward {
    padding-right: 28px
}

.plyr__menu__container .plyr__control--forward:after {
    border-left-color: rgba(74, 87, 100, .8);
    right: 5px
}

.plyr__menu__container .plyr__control--forward.plyr__tab-focus:after,
.plyr__menu__container .plyr__control--forward:hover:after {
    border-left-color: currentColor
}

.plyr__menu__container .plyr__control--back {
    font-weight: 500;
    margin: 7px;
    margin-bottom: 3px;
    padding-left: 28px;
    position: relative;
    width: calc(100% - 14px)
}

.plyr__menu__container .plyr__control--back:after {
    border-right-color: rgba(74, 87, 100, .8);
    left: 7px
}

.plyr__menu__container .plyr__control--back:before {
    background: #c1c9d1;
    box-shadow: 0 1px 0 #fff;
    content: "";
    height: 1px;
    left: 0;
    margin-top: 4px;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 100%
}

.plyr__menu__container .plyr__control--back.plyr__tab-focus:after,
.plyr__menu__container .plyr__control--back:hover:after {
    border-right-color: currentColor
}

.plyr__menu__container .plyr__control[role=menuitemradio] {
    padding-left: 7px
}

.plyr__menu__container .plyr__control[role=menuitemradio]:after,
.plyr__menu__container .plyr__control[role=menuitemradio]:before {
    border-radius: 100%
}

.plyr__menu__container .plyr__control[role=menuitemradio]:before {
    background: rgba(0, 0, 0, .1);
    content: "";
    display: block;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    height: 16px;
    margin-right: 10px;
    transition: all .3s ease;
    width: 16px
}

.plyr__menu__container .plyr__control[role=menuitemradio]:after {
    background: #fff;
    border: 0;
    height: 6px;
    left: 12px;
    opacity: 0;
    top: 50%;
    transform: translateY(-50%) scale(0);
    transition: transform .3s ease, opacity .3s ease;
    width: 6px
}

.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]:before {
    background: #00b3ff
}

.plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]:after {
    opacity: 1;
    transform: translateY(-50%) scale(1)
}

.plyr__menu__container .plyr__control[role=menuitemradio].plyr__tab-focus:before,
.plyr__menu__container .plyr__control[role=menuitemradio]:hover:before {
    background: rgba(0, 0, 0, .1)
}

.plyr__menu__container .plyr__menu__value {
    -ms-flex-align: center;
    align-items: center;
    display: -ms-flexbox;
    display: flex;
    margin-left: auto;
    margin-right: -5px;
    overflow: hidden;
    padding-left: 25px;
    pointer-events: none
}

.plyr--full-ui input[type=range] {
    -webkit-appearance: none;
    background: 0 0;
    border: 0;
    border-radius: 26px;
    color: #00b3ff;
    display: block;
    height: 19px;
    margin: 0;
    padding: 0;
    transition: box-shadow .3s ease;
    width: 100%
}

.plyr--full-ui input[type=range]::-webkit-slider-runnable-track {
    background: 0 0;
    border: 0;
    border-radius: 2.5px;
    height: 5px;
    transition: box-shadow .3s ease;
    -webkit-user-select: none;
    user-select: none;
    background-image: linear-gradient(90deg, currentColor var(--value, 0), transparent var(--value, 0))
}

.plyr--full-ui input[type=range]::-webkit-slider-thumb {
    background: #fff;
    border: 0;
    border-radius: 100%;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .15), 0 0 0 1px rgba(35, 41, 47, .2);
    height: 13px;
    position: relative;
    transition: all .2s ease;
    width: 13px;
    -webkit-appearance: none;
    margin-top: -4px
}

.plyr--full-ui input[type=range]::-moz-range-track {
    background: 0 0;
    border: 0;
    border-radius: 2.5px;
    height: 5px;
    transition: box-shadow .3s ease;
    -moz-user-select: none;
    user-select: none
}

.plyr--full-ui input[type=range]::-moz-range-thumb {
    background: #fff;
    border: 0;
    border-radius: 100%;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .15), 0 0 0 1px rgba(35, 41, 47, .2);
    height: 13px;
    position: relative;
    transition: all .2s ease;
    width: 13px
}

.plyr--full-ui input[type=range]::-moz-range-progress {
    background: currentColor;
    border-radius: 2.5px;
    height: 5px
}

.plyr--full-ui input[type=range]::-ms-track {
    color: transparent
}

.plyr--full-ui input[type=range]::-ms-fill-upper,
.plyr--full-ui input[type=range]::-ms-track {
    background: 0 0;
    border: 0;
    border-radius: 2.5px;
    height: 5px;
    transition: box-shadow .3s ease;
    -ms-user-select: none;
    user-select: none
}

.plyr--full-ui input[type=range]::-ms-fill-lower {
    background: 0 0;
    border: 0;
    border-radius: 2.5px;
    height: 5px;
    transition: box-shadow .3s ease;
    -ms-user-select: none;
    user-select: none;
    background: currentColor
}

.plyr--full-ui input[type=range]::-ms-thumb {
    background: #fff;
    border: 0;
    border-radius: 100%;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .15), 0 0 0 1px rgba(35, 41, 47, .2);
    height: 13px;
    position: relative;
    transition: all .2s ease;
    width: 13px;
    margin-top: 0
}

.plyr--full-ui input[type=range]::-ms-tooltip {
    display: none
}

.plyr--full-ui input[type=range]:focus {
    outline: 0
}

.plyr--full-ui input[type=range]::-moz-focus-outer {
    border: 0
}

.plyr--full-ui input[type=range].plyr__tab-focus::-webkit-slider-runnable-track {
    box-shadow: 0 0 0 5px rgba(0, 179, 255, .5);
    outline: 0
}

.plyr--full-ui input[type=range].plyr__tab-focus::-moz-range-track {
    box-shadow: 0 0 0 5px rgba(0, 179, 255, .5);
    outline: 0
}

.plyr--full-ui input[type=range].plyr__tab-focus::-ms-track {
    box-shadow: 0 0 0 5px rgba(0, 179, 255, .5);
    outline: 0
}

.plyr--full-ui.plyr--video input[type=range]::-webkit-slider-runnable-track {
    background-color: hsla(0, 0%, 100%, .25)
}

.plyr--full-ui.plyr--video input[type=range]::-moz-range-track {
    background-color: hsla(0, 0%, 100%, .25)
}

.plyr--full-ui.plyr--video input[type=range]::-ms-track {
    background-color: hsla(0, 0%, 100%, .25)
}

.plyr--full-ui.plyr--video input[type=range]:active::-webkit-slider-thumb {
    box-shadow: 0 1px 1px rgba(0, 0, 0, .15), 0 0 0 1px rgba(35, 41, 47, .2), 0 0 0 3px hsla(0, 0%, 100%, .5)
}

.plyr--full-ui.plyr--video input[type=range]:active::-moz-range-thumb {
    box-shadow: 0 1px 1px rgba(0, 0, 0, .15), 0 0 0 1px rgba(35, 41, 47, .2), 0 0 0 3px hsla(0, 0%, 100%, .5)
}

.plyr--full-ui.plyr--video input[type=range]:active::-ms-thumb {
    box-shadow: 0 1px 1px rgba(0, 0, 0, .15), 0 0 0 1px rgba(35, 41, 47, .2), 0 0 0 3px hsla(0, 0%, 100%, .5)
}

.plyr--full-ui.plyr--audio input[type=range]::-webkit-slider-runnable-track {
    background-color: rgba(193, 201, 209, .66)
}

.plyr--full-ui.plyr--audio input[type=range]::-moz-range-track {
    background-color: rgba(193, 201, 209, .66)
}

.plyr--full-ui.plyr--audio input[type=range]::-ms-track {
    background-color: rgba(193, 201, 209, .66)
}

.plyr--full-ui.plyr--audio input[type=range]:active::-webkit-slider-thumb {
    box-shadow: 0 1px 1px rgba(0, 0, 0, .15), 0 0 0 1px rgba(35, 41, 47, .2), 0 0 0 3px rgba(0, 0, 0, .1)
}

.plyr--full-ui.plyr--audio input[type=range]:active::-moz-range-thumb {
    box-shadow: 0 1px 1px rgba(0, 0, 0, .15), 0 0 0 1px rgba(35, 41, 47, .2), 0 0 0 3px rgba(0, 0, 0, .1)
}

.plyr--full-ui.plyr--audio input[type=range]:active::-ms-thumb {
    box-shadow: 0 1px 1px rgba(0, 0, 0, .15), 0 0 0 1px rgba(35, 41, 47, .2), 0 0 0 3px rgba(0, 0, 0, .1)
}

.plyr__poster {
    background-color: #fff;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: contain;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: opacity .2s ease;
    width: 100%;
    z-index: 1
}

.plyr--stopped.plyr__poster-enabled .plyr__poster {
    opacity: 1
}

.plyr__time {
    font-size: 14px
}

.plyr__time+.plyr__time:before {
    content: "\2044";
    margin-right: 10px
}

@media (max-width:767px) {
    .plyr__time+.plyr__time {
        display: none
    }
}

.plyr--video .plyr__time {
    text-shadow: 0 1px 1px rgba(0, 0, 0, .15)
}

.plyr__tooltip {
    background: hsla(0, 0%, 100%, .9);
    border-radius: 3px;
    bottom: 100%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
    color: #4a5764;
    font-size: 14px;
    font-weight: 500;
    left: 50%;
    line-height: 1.3;
    margin-bottom: 10px;
    opacity: 0;
    padding: 5px 7.5px;
    pointer-events: none;
    position: absolute;
    transform: translate(-50%, 10px) scale(.8);
    transform-origin: 50% 100%;
    transition: transform .2s ease .1s, opacity .2s ease .1s;
    white-space: nowrap;
    z-index: 2
}

.plyr__tooltip:before {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid hsla(0, 0%, 100%, .9);
    bottom: -4px;
    content: "";
    height: 0;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    width: 0;
    z-index: 2
}

.plyr .plyr__control.plyr__tab-focus .plyr__tooltip,
.plyr .plyr__control:hover .plyr__tooltip,
.plyr__tooltip--visible {
    opacity: 1;
    transform: translate(-50%) scale(1)
}

.plyr .plyr__control:hover .plyr__tooltip {
    z-index: 3
}

.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip,
.plyr__controls>.plyr__control:first-child .plyr__tooltip {
    left: 0;
    transform: translateY(10px) scale(.8);
    transform-origin: 0 100%
}

.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip:before,
.plyr__controls>.plyr__control:first-child .plyr__tooltip:before {
    left: 16px
}

.plyr__controls>.plyr__control:last-child .plyr__tooltip {
    left: auto;
    right: 0;
    transform: translateY(10px) scale(.8);
    transform-origin: 100% 100%
}

.plyr__controls>.plyr__control:last-child .plyr__tooltip:before {
    left: auto;
    right: 16px;
    transform: translateX(50%)
}

.plyr__controls>.plyr__control:first-child+.plyr__control.plyr__tab-focus .plyr__tooltip,
.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip--visible,
.plyr__controls>.plyr__control:first-child+.plyr__control:hover .plyr__tooltip,
.plyr__controls>.plyr__control:first-child.plyr__tab-focus .plyr__tooltip,
.plyr__controls>.plyr__control:first-child .plyr__tooltip--visible,
.plyr__controls>.plyr__control:first-child:hover .plyr__tooltip,
.plyr__controls>.plyr__control:last-child.plyr__tab-focus .plyr__tooltip,
.plyr__controls>.plyr__control:last-child .plyr__tooltip--visible,
.plyr__controls>.plyr__control:last-child:hover .plyr__tooltip {
    transform: translate(0) scale(1)
}

.plyr--video {
    background: #000;
    overflow: hidden
}

.plyr--video.plyr--menu-open {
    overflow: visible
}

.plyr__video-wrapper {
    background: #000;
    border-radius: inherit;
    overflow: hidden;
    position: relative;
    z-index: 0
}

.plyr__video-embed,
.plyr__video-wrapper--fixed-ratio {
    height: 0;
    padding-bottom: 56.25%
}

.plyr__video-embed iframe,
.plyr__video-wrapper--fixed-ratio video {
    border: 0;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 100%
}

.plyr--full-ui .plyr__video-embed>.plyr__video-embed__container {
    padding-bottom: 240%;
    position: relative;
    transform: translateY(-38.28125%)
}

.plyr__progress {
    left: 6.5px;
    margin-right: 13px;
    position: relative
}

.plyr__progress__buffer,
.plyr__progress input[type=range] {
    margin-left: -6.5px;
    margin-right: -6.5px;
    width: calc(100% + 13px)
}

.plyr__progress input[type=range] {
    position: relative;
    z-index: 2
}

.plyr__progress .plyr__tooltip {
    font-size: 14px;
    left: 0
}

.plyr__progress__buffer {
    -webkit-appearance: none;
    background: 0 0;
    border: 0;
    border-radius: 100px;
    height: 5px;
    left: 0;
    margin-top: -2.5px;
    padding: 0;
    position: absolute;
    top: 50%
}

.plyr__progress__buffer::-webkit-progress-bar {
    background: 0 0
}

.plyr__progress__buffer::-webkit-progress-value {
    background: currentColor;
    border-radius: 100px;
    min-width: 5px;
    transition: width .2s ease
}

.plyr__progress__buffer::-moz-progress-bar {
    background: currentColor;
    border-radius: 100px;
    min-width: 5px;
    transition: width .2s ease
}

.plyr__progress__buffer::-ms-fill {
    border-radius: 100px;
    transition: width .2s ease
}

.plyr--video .plyr__progress__buffer {
    box-shadow: 0 1px 1px rgba(0, 0, 0, .15);
    color: hsla(0, 0%, 100%, .25)
}

.plyr--audio .plyr__progress__buffer {
    color: rgba(193, 201, 209, .66)
}

.plyr--loading .plyr__progress__buffer {
    animation: plyr-progress 1s linear infinite;
    background-image: linear-gradient(-45deg, rgba(35, 41, 47, .6) 25%, transparent 0, transparent 50%, rgba(35, 41, 47, .6) 0, rgba(35, 41, 47, .6) 75%, transparent 0, transparent);
    background-repeat: repeat-x;
    background-size: 25px 25px;
    color: transparent
}

.plyr--video.plyr--loading .plyr__progress__buffer {
    background-color: hsla(0, 0%, 100%, .25)
}

.plyr--audio.plyr--loading .plyr__progress__buffer {
    background-color: rgba(193, 201, 209, .66)
}

.plyr__volume {
    -ms-flex-align: center;
    align-items: center;
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 1;
    flex: 1;
    position: relative
}

.plyr__volume input[type=range] {
    margin-left: 5px;
    position: relative;
    z-index: 2
}

@media (min-width:480px) {
    .plyr__volume {
        max-width: 90px
    }
}

@media (min-width:768px) {
    .plyr__volume {
        max-width: 110px
    }
}

.plyr--is-ios.plyr--vimeo [data-plyr=mute],
.plyr--is-ios .plyr__volume {
    display: none !important
}

.plyr:fullscreen {
    background: #000;
    border-radius: 0 !important;
    height: 100%;
    margin: 0;
    width: 100%
}

.plyr:fullscreen video {
    height: 100%
}

.plyr:fullscreen .plyr__video-wrapper {
    height: 100%;
    position: static
}

.plyr:fullscreen.plyr--vimeo .plyr__video-wrapper {
    height: 0;
    position: relative;
    top: 50%;
    transform: translateY(-50%)
}

.plyr:fullscreen .plyr__control .icon--exit-fullscreen {
    display: block
}

.plyr:fullscreen .plyr__control .icon--exit-fullscreen+svg {
    display: none
}

.plyr:fullscreen.plyr--hide-controls {
    cursor: none
}

@media (min-width:1024px) {
    .plyr:-webkit-full-screen .plyr__captions {
        font-size: 21px
    }

    .plyr:-ms-fullscreen .plyr__captions {
        font-size: 21px
    }

    .plyr:-moz-full-screen .plyr__captions {
        font-size: 21px
    }

    .plyr:fullscreen .plyr__captions {
        font-size: 21px
    }
}

.plyr:-webkit-full-screen {
    background: #000;
    border-radius: 0 !important;
    height: 100%;
    margin: 0;
    width: 100%
}

.plyr:-webkit-full-screen video {
    height: 100%
}

.plyr:-webkit-full-screen .plyr__video-wrapper {
    height: 100%;
    position: static
}

.plyr:-webkit-full-screen.plyr--vimeo .plyr__video-wrapper {
    height: 0;
    position: relative;
    top: 50%;
    transform: translateY(-50%)
}

.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen {
    display: block
}

.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen+svg {
    display: none
}

.plyr:-webkit-full-screen.plyr--hide-controls {
    cursor: none
}

@media (min-width:1024px) {
    .plyr:-webkit-full-screen .plyr__captions {
        font-size: 21px
    }
}

.plyr:-moz-full-screen {
    background: #000;
    border-radius: 0 !important;
    height: 100%;
    margin: 0;
    width: 100%
}

.plyr:-moz-full-screen video {
    height: 100%
}

.plyr:-moz-full-screen .plyr__video-wrapper {
    height: 100%;
    position: static
}

.plyr:-moz-full-screen.plyr--vimeo .plyr__video-wrapper {
    height: 0;
    position: relative;
    top: 50%;
    transform: translateY(-50%)
}

.plyr:-moz-full-screen .plyr__control .icon--exit-fullscreen {
    display: block
}

.plyr:-moz-full-screen .plyr__control .icon--exit-fullscreen+svg {
    display: none
}

.plyr:-moz-full-screen.plyr--hide-controls {
    cursor: none
}

@media (min-width:1024px) {
    .plyr:-moz-full-screen .plyr__captions {
        font-size: 21px
    }
}

.plyr:-ms-fullscreen {
    background: #000;
    border-radius: 0 !important;
    height: 100%;
    margin: 0;
    width: 100%
}

.plyr:-ms-fullscreen video {
    height: 100%
}

.plyr:-ms-fullscreen .plyr__video-wrapper {
    height: 100%;
    position: static
}

.plyr:-ms-fullscreen.plyr--vimeo .plyr__video-wrapper {
    height: 0;
    position: relative;
    top: 50%;
    transform: translateY(-50%)
}

.plyr:-ms-fullscreen .plyr__control .icon--exit-fullscreen {
    display: block
}

.plyr:-ms-fullscreen .plyr__control .icon--exit-fullscreen+svg {
    display: none
}

.plyr:-ms-fullscreen.plyr--hide-controls {
    cursor: none
}

@media (min-width:1024px) {
    .plyr:-ms-fullscreen .plyr__captions {
        font-size: 21px
    }
}

.plyr--fullscreen-fallback {
    background: #000;
    border-radius: 0 !important;
    height: 100%;
    margin: 0;
    width: 100%;
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 10000000
}

.plyr--fullscreen-fallback video {
    height: 100%
}

.plyr--fullscreen-fallback .plyr__video-wrapper {
    height: 100%;
    position: static
}

.plyr--fullscreen-fallback.plyr--vimeo .plyr__video-wrapper {
    height: 0;
    position: relative;
    top: 50%;
    transform: translateY(-50%)
}

.plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen {
    display: block
}

.plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen+svg {
    display: none
}

.plyr--fullscreen-fallback.plyr--hide-controls {
    cursor: none
}

@media (min-width:1024px) {
    .plyr--fullscreen-fallback .plyr__captions {
        font-size: 21px
    }
}

.plyr__ads {
    border-radius: inherit;
    bottom: 0;
    cursor: pointer;
    left: 0;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1
}

.plyr__ads>div,
.plyr__ads>div iframe {
    height: 100%;
    position: absolute;
    width: 100%
}

.plyr__ads:after {
    background: rgba(35, 41, 47, .8);
    border-radius: 2px;
    bottom: 10px;
    color: #fff;
    content: attr(data-badge-text);
    font-size: 11px;
    padding: 2px 6px;
    pointer-events: none;
    position: absolute;
    right: 10px;
    z-index: 3
}

.plyr__ads:after:empty {
    display: none
}

.plyr__cues {
    background: currentColor;
    display: block;
    height: 5px;
    left: 0;
    margin: -2.5px 0 0;
    opacity: .8;
    position: absolute;
    top: 50%;
    width: 3px;
    z-index: 3
}

.plyr__preview-thumb {
    background-color: hsla(0, 0%, 100%, .9);
    border-radius: 3px;
    bottom: 100%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
    margin-bottom: 10px;
    opacity: 0;
    padding: 3px;
    pointer-events: none;
    position: absolute;
    transform: translateY(10px) scale(.8);
    transform-origin: 50% 100%;
    transition: transform .2s ease .1s, opacity .2s ease .1s;
    z-index: 2
}

.plyr__preview-thumb--is-shown {
    opacity: 1;
    transform: translate(0) scale(1)
}

.plyr__preview-thumb:before {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid hsla(0, 0%, 100%, .9);
    bottom: -4px;
    content: "";
    height: 0;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    width: 0;
    z-index: 2
}

.plyr__preview-thumb__image-container {
    background: #c1c9d1;
    border-radius: 2px;
    overflow: hidden;
    position: relative;
    z-index: 0
}

.plyr__preview-thumb__image-container img {
    height: 100%;
    left: 0;
    max-height: none;
    max-width: none;
    position: absolute;
    top: 0;
    width: 100%
}

.plyr__preview-thumb__time-container {
    bottom: 6px;
    left: 0;
    position: absolute;
    right: 0;
    white-space: nowrap;
    z-index: 3
}

.plyr__preview-thumb__time-container span {
    background-color: rgba(0, 0, 0, .55);
    border-radius: 2px;
    color: #fff;
    font-size: 14px;
    padding: 3px 6px
}

.plyr__preview-scrubbing {
    bottom: 0;
    filter: blur(1px);
    height: 100%;
    left: 0;
    margin: auto;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 0;
    transition: opacity .3s ease;
    width: 100%;
    z-index: 1
}

.plyr__preview-scrubbing--is-shown {
    opacity: 1
}

.plyr__preview-scrubbing img {
    height: 100%;
    left: 0;
    max-height: none;
    max-width: none;
    object-fit: contain;
    position: absolute;
    top: 0;
    width: 100%
}

.plyr--no-transition {
    transition: none !important
}

.plyr__sr-only {
    clip: rect(1px, 1px, 1px, 1px);
    overflow: hidden;
    border: 0 !important;
    height: 1px !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important
}

.plyr [hidden] {
    display: none !important
}

.player-agent,
.session-agent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    border: 0
}

.session-player.remove-ratio:before,
.video-player.remove-ratio:before {
    display: none
}

.session-player.remove-ratio .plyr,
.video-player.remove-ratio .plyr {
    position: relative
}

.plyr {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    border: 0
}

.plyr--full-ui.plyr--video .plyr__poster,
.plyr--full-ui.plyr--video .plyr__video-wrapper {
    background-color: #fff
}

.plyr--full-ui.plyr--video~.ellapsed-time {
    display: none
}

.plyr--full-ui.plyr--video input[type=range].plyr__tab-focus::-webkit-slider-runnable-track {
    box-shadow: none
}

.plyr--full-ui.plyr--video input[type=range].plyr__tab-focus::-moz-range-track {
    box-shadow: none
}

.plyr--full-ui.plyr--video input[type=range].plyr__tab-focus::-ms-track {
    box-shadow: none
}

.plyr--full-ui.plyr--video .plyr__control.plyr__tab-focus {
    box-shadow: none
}

.plyr--full-ui.plyr--video.plyr--stopped {
    cursor: pointer
}

.plyr--full-ui.plyr--video.plyr--stopped:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: hsla(0, 0%, 100%, .4);
    z-index: 1;
    opacity: 0;
    transition: opacity .3s
}

.plyr--full-ui.plyr--video.plyr--stopped:hover:before {
    opacity: 1
}

.plyr--full-ui.plyr--video.plyr--stopped~.ellapsed-time {
    display: block
}

.plyr--full-ui.plyr--video.plyr--stopped .plyr__controls {
    display: none
}

.plyr--full-ui.plyr--video.plyr--stopped .plyr__control--overlaid {
    display: block
}

.plyr--full-ui.plyr--video .plyr__control--overlaid {
    display: none;
    background-color: #f5aa00
}

.plyr--full-ui.plyr--video .plyr__control--overlaid:hover {
    background-color: #f5aa00
}

.plyr--full-ui.plyr--video .plyr__control--overlaid.plyr__tab-focus {
    background-color: #f5aa00;
    box-shadow: none
}

.plyr--full-ui.plyr--video .plyr__controls {
    background: none;
    background-color: #000;
    padding: 0 1rem;
    height: 4rem
}

.plyr--full-ui.plyr--video .plyr__controls .plyr__progress__container {
    position: absolute;
    top: -12px;
    left: 0;
    width: 100%;
    margin: 0;
    padding: 0
}

.plyr--full-ui.plyr--video .plyr__controls .plyr__progress__container .plyr__progress {
    margin: 0;
    left: 0
}

.plyr--full-ui.plyr--video .plyr__controls .plyr__progress__container .plyr__progress__buffer,
.plyr--full-ui.plyr--video .plyr__controls .plyr__progress__container input[type=range] {
    width: 100%;
    margin-right: 0;
    margin-left: 0
}

.plyr--full-ui.plyr--video .plyr__controls .plyr__progress__container input[type=range] {
    border-radius: 0;
    color: #f5aa00
}

.plyr--full-ui.plyr--video .plyr__controls .plyr__progress__container .plyr__progress__buffer {
    border-radius: 0;
    background-color: rgba(0, 0, 0, .3);
    color: rgba(245, 170, 0, .6)
}

.plyr--full-ui.plyr--video .plyr__controls .plyr__progress__container .plyr__tooltip {
    background-color: #f5aa00;
    color: #fff;
    box-shadow: none
}

.plyr--full-ui.plyr--video .plyr__controls .plyr__progress__container .plyr__tooltip:before {
    border-top-color: #f5aa00
}

.plyr--full-ui.plyr--video .plyr__controls .plyr__controls__item:first-child {
    margin-right: 0
}

.plyr--full-ui.plyr--video .plyr__controls .plyr__controls__item.plyr__time--duration {
    margin-right: auto
}

.plyr--full-ui.plyr--video .plyr__controls .plyr__controls__item.plyr__volume {
    max-width: 90px
}

@media (max-width:426px) {
    .plyr--full-ui.plyr--video .plyr__controls .plyr__controls__item.plyr__volume {
        display: none
    }
}

.plyr--full-ui.plyr--video .plyr__controls .plyr__time+.plyr__time {
    display: block
}

.plyr--full-ui.plyr--video .plyr__controls .plyr__time+.plyr__time:before {
    content: "\2013"
}

.plyr--full-ui.plyr--video .plyr__controls .plyr__control.plyr__tab-focus,
.plyr--full-ui.plyr--video .plyr__controls .plyr__control:hover {
    background-color: #f5aa00
}

.plyr--full-ui.plyr--video input[type=range] {
    color: #fff
}

.plyr__caption,
.plyr__captions {
    font-family: Noto Sans, sans-serif
}

@-moz-document url-prefix() {
    .plyr__caption {
        display: inline-flex
    }
}

.plyr--full-ui input[type=range] {
    min-width: 0
}

.plyr--full-ui input[type=range]::-webkit-slider-thumb {
    box-shadow: none !important;
    background: #f5aa00
}

.plyr--full-ui input[type=range]::-moz-range-thumb {
    box-shadow: none !important;
    background: #f5aa00
}

.plyr--full-ui input[type=range]::-ms-thumb {
    box-shadow: none !important;
    background: #f5aa00
}

.plyr--full-ui input[type=range].plyr__tab-focus::-webkit-slider-runnable-track {
    box-shadow: none !important
}

.plyr--full-ui input[type=range].plyr__tab-focus::-moz-range-track {
    box-shadow: none !important
}

.plyr--full-ui input[type=range].plyr__tab-focus::-ms-track {
    box-shadow: none !important
}

.plyr--full-ui input[type=range]:active::-webkit-slider-thumb {
    box-shadow: none !important
}

.plyr--full-ui input[type=range]:active::-moz-range-thumb {
    box-shadow: none !important
}

.plyr--full-ui input[type=range]:active::-ms-thumb {
    box-shadow: none !important
}

.explainer-preview {
    font-family: STIX2, Times New Roman, serif;
    font-size: 1.8rem
}

.explainer-preview main {
    padding: 0 30px
}

.explainer-preview .container {
    width: 848px;
    margin: 0
}

.explainer-preview .page-title {
    margin-bottom: 20px;
    text-align: left
}

.explainer-preview .page-title h1 {
    font-family: timesExtraBold;
    font-weight: 700;
    font-size: 30px;
    line-height: 1.2
}

.explainer-preview article {
    color: #000
}

.explainer-preview article p {
    text-align: justify
}

.explainer-preview article>div:not(.no_box):not(.displayed-image):not(.table-wrapper) {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 1.5rem;
    margin: 3rem 0;
    position: relative;
    border: 5px solid #f5aa00
}

.explainer-preview article>div:not(.no_box):not(.displayed-image):not(.table-wrapper)>div {
    width: 100%
}

.explainer-preview article>div:not(.no_box):not(.displayed-image):not(.table-wrapper)>div>* {
    position: relative;
    z-index: 2
}

.explainer-preview article>div:not(.no_box):not(.displayed-image):not(.table-wrapper)>div h3 {
    font-family: STIX2, Times New Roman, serif;
    font-weight: 700;
    margin-bottom: 1rem
}

.explainer-preview article>div:not(.no_box):not(.displayed-image):not(.table-wrapper)>div p {
    text-align: justify;
    margin: 0 0 1rem
}

.explainer-preview article>div:not(.no_box):not(.displayed-image):not(.table-wrapper)>div .h-scroll {
    margin-top: 0
}

.explainer-preview article>div:not(.no_box):not(.displayed-image):not(.table-wrapper)>div:before {
    content: "";
    position: absolute;
    border-top: 1px solid #f5aa00;
    border-bottom: 1px solid #f5aa00;
    top: -.3rem;
    bottom: -.3rem;
    right: 3rem;
    left: 3rem
}

.explainer-preview article>div:not(.no_box):not(.displayed-image):not(.table-wrapper)>div:after {
    content: "";
    position: absolute;
    border-right: 1px solid #f5aa00;
    border-left: 1px solid #f5aa00;
    top: 3rem;
    bottom: 3rem;
    right: -.3rem;
    left: -.3rem;
    z-index: 1
}

.explainer-preview article>div:not(.no_box):not(.displayed-image):not(.table-wrapper):after,
.explainer-preview article>div:not(.no_box):not(.displayed-image):not(.table-wrapper):before {
    content: "";
    position: absolute;
    background-color: #fff
}

.explainer-preview article>div:not(.no_box):not(.displayed-image):not(.table-wrapper):before {
    left: 3rem;
    right: 3rem;
    top: -.5rem;
    bottom: -.5rem
}

.explainer-preview article>div:not(.no_box):not(.displayed-image):not(.table-wrapper):after {
    left: -.5rem;
    right: -.5rem;
    top: 3rem;
    bottom: 3rem
}

.explainer-preview article>div h3:not(:first-of-type) {
    margin-top: 3rem
}

.explainer-preview article div.theorem,
.explainer-preview article div.theorem>div:after,
.explainer-preview article div.theorem>div:before {
    border-color: #78b517 !important
}

.explainer-preview article div.how_to,
.explainer-preview article div.how_to>div:after,
.explainer-preview article div.how_to>div:before {
    border-color: #e51d74 !important
}

.explainer-preview article ul:not(.endnotes) {
    margin-bottom: 1rem;
    list-style: disc;
    list-style-image: url(../images/list-arrow.svg);
    padding-left: 4.5rem;
    text-align: left
}

@media (max-width:736px) {
    .explainer-preview article ul:not(.endnotes) {
        padding-left: 1.5rem
    }
}

.explainer-preview article ul:not(.endnotes) ol {
    list-style: decimal;
    padding-left: 4.5rem
}

.explainer-preview article ul:not(.endnotes) ol.arabic-numbers {
    padding-left: 2.9rem;
    list-style: arabic-indic;
    list-style-position: inside
}

@media (max-width:736px) {
    .explainer-preview article ul:not(.endnotes) ol {
        padding-left: 1.5rem
    }
}

.explainer-preview article ul:not(.endnotes) ol li {
    display: list-item;
    padding-left: 0;
    margin-top: .5rem
}

.explainer-preview article ul:not(.endnotes) ol li:first-child {
    margin-top: 0
}

.explainer-preview article ul:not(.endnotes) li>p {
    margin: 0;
    display: inline
}

.explainer-preview article ul:not(.endnotes) li a {
    color: #f5aa00
}

.explainer-preview article ul:not(.endnotes) li a:hover {
    text-decoration: underline
}

.explainer-preview article ul:not(.endnotes) li .inline-displayed {
    margin-left: .5rem
}

.explainer-preview article ul:not(.endnotes) li>.list {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%
}

.explainer-preview article .table {
    margin: 2rem auto
}

.explainer-preview article .table td,
.explainer-preview article .table th {
    border-color: #f9d7a2
}

.explainer-preview article .table th {
    background: #fefaf4;
    color: #d08c22
}

.explainer-preview article table:not(.table) tr:hover {
    background-color: #fff
}

.explainer-preview article table:not(.table) td {
    padding: 0;
    border: 0
}

.explainer-preview article .table-bordered {
    border: 1px solid #f9d7a2;
    width: 100%
}

.explainer-preview article .table-bordered th {
    background: none;
    border-width: 1px;
    color: #d08c22;
    background-color: #fefaf4
}

.explainer-preview article .table-bordered td,
.explainer-preview article .table-bordered th {
    text-align: center;
    vertical-align: middle;
    font-weight: 400;
    padding: 8px;
    border: 1px solid #f9d7a2
}

.explainer-preview article .table-bordered td {
    background: #fff
}

.explainer-preview article .displayed-image,
.explainer-preview article .displayed_equation {
    max-width: 100%
}

.explainer-preview article figure .displayed-image,
.explainer-preview article figure .displayed_equation {
    margin: 2.4rem auto 1.2rem
}

.explainer-preview article figure {
    text-align: center
}

.explainer-preview article figure figcaption {
    text-align: justify;
    display: inline-block;
    color: gray;
    margin: 1rem auto 2rem;
    max-width: 60%;
    font-size: 1.8rem
}

@media (max-width:736px) {
    .explainer-preview article figure figcaption {
        max-width: 100%
    }
}

.explainer-preview article figure .h-scroll~figcaption {
    margin-top: -3.2rem
}

.explainer-preview article figure .displayed_equation+figcaption {
    margin-top: -1.2rem
}

.explainer-preview article .displayed-image img {
    max-width: 640px;
    max-height: 320px
}

@media (max-width:870px) {
    .explainer-preview article .displayed-image img {
        max-width: 100%
    }
}

.explainer-preview article .displayed-image.circle img {
    border-radius: 50%
}

.explainer-preview .displayed-figure,
.explainer-preview .displayed-image,
.explainer-preview .displayed-text-svg,
.explainer-preview .displayed_equation {
    text-align: center;
    margin: 24px auto;
    display: block
}

.explainer-preview .displayed-figure figure,
.explainer-preview .displayed-image figure,
.explainer-preview .displayed-text-svg figure,
.explainer-preview .displayed_equation figure {
    z-index: 1
}

.explainer-preview.arabic {
    font-family: STIX2, DroidArabicNaskh, serif;
    direction: rtl;
    font-size: 1.6rem
}

.explainer-preview.arabic .table-wrapper {
    padding-right: 1px
}

.explainer-preview.arabic>div:not(.no_box):not(.displayed-image):not(.table-wrapper) h3 {
    font-family: STIX2, DroidArabicNaskh, serif
}

.explainer-preview.arabic .container {
    margin-right: auto
}

.explainer-preview.arabic .page-title h1 {
    font-family: STIX2, DroidArabicNaskh, serif
}

.explainer-preview.arabic ul:not(.endnotes) {
    list-style-image: url(../images/list-arrow-rtl.svg) !important;
    padding-right: 4.5rem;
    padding-left: 0
}

.lesson-plan {
    line-height: 1.5
}

.lesson-plan main {
    padding: 0 30px
}

.lesson-plan .container {
    width: 848px;
    margin: 0
}

.lesson-plan .page-title {
    margin-bottom: 20px
}

.lesson-plan .page-title h1 {
    font-family: timesExtraBold;
    font-weight: 700;
    font-size: 30px;
    line-height: 1.2
}

.lesson-plan .page-title small {
    font-family: STIX2;
    font-size: 65%;
    font-weight: 400;
    display: block;
    margin-top: 5px;
    color: #999
}

.lesson-plan .page-description {
    margin-bottom: 20px
}

.lesson-plan .page-description,
.lesson-plan h4 {
    font-family: STIX2;
    font-size: 18px;
    line-height: 1.5
}

.lesson-plan h4 {
    font-weight: 700;
    color: #333
}

.lesson-plan p {
    line-height: 1.5;
    font-family: STIX2;
    font-size: 18px;
    color: #333
}

.lesson-plan .list {
    list-style: disc;
    list-style-image: url(../images/list-arrow.svg);
    padding-left: 4.5rem
}

.lesson-plan .list li {
    position: relative;
    color: #333;
    font-family: STIX2;
    font-size: 18px
}

.lesson-plan .list li a {
    padding: 0
}

.lesson-plan .list li a:first-child:not(.btn-link) {
    color: #000
}

.lesson-plan .list li a:not(:first-child):before {
    content: "•";
    color: #333;
    margin-right: 5px;
    margin-left: 5px
}

.lesson-plan .list li a span {
    color: #026bb0
}

.lesson-plan .list li a span:before {
    content: "•";
    color: #333;
    margin-right: 5px;
    margin-left: 5px
}

.lesson-plan .list li+li {
    margin-top: .5rem
}

.lesson-plan h2 {
    margin-bottom: 10px;
    line-height: 1.3
}

.lesson-plan h2 span,
.lesson-plan h2 span a {
    color: #f7f7f7;
    font-weight: 400
}

.lesson-plan h2 span a:hover {
    color: #f5aa00;
    text-decoration: underline
}

.lesson-plan .exclusions,
.lesson-plan .objectives,
.lesson-plan .prerequisites {
    margin-bottom: 30px
}

.lesson-plan.arabic {
    direction: rtl
}

.lesson-plan.arabic .container {
    margin-right: auto
}

.lesson-plan.arabic .page-title h1,
.lesson-plan.arabic .page-title small {
    font-family: STIX2, DroidArabicNaskh, serif
}

.lesson-plan.arabic .page-description,
.lesson-plan.arabic h4,
.lesson-plan.arabic p {
    font-family: STIX2, DroidArabicNaskh, serif;
    font-size: 1.6rem
}

.lesson-plan.arabic .list {
    list-style-image: url(../images/list-arrow-rtl.svg);
    padding-left: 0;
    padding-right: 4.5rem
}

.lesson-plan.arabic .list li {
    font-family: STIX2, DroidArabicNaskh, serif;
    font-size: 1.6rem
}

.presentation main {
    padding: 0 30px
}

.presentation .container {
    width: 848px;
    margin: 0
}

.presentation .page-title {
    margin-bottom: 20px;
    text-align: left
}

.presentation .page-title h1 {
    font-family: timesExtraBold;
    font-weight: 700;
    font-size: 30px;
    line-height: 1.2
}

.presentation .page-title small {
    font-family: STIX2;
    font-size: 65%;
    font-weight: 400;
    display: block;
    margin-top: 5px;
    color: #999
}

.presentation .page-description {
    margin-bottom: 20px;
    font-family: STIX2;
    font-size: 18px;
    line-height: 1.5
}

.presentation h4 {
    font-weight: 700
}

.presentation h4,
.presentation p {
    font-family: STIX2;
    font-size: 18px;
    color: #333;
    line-height: 1.5
}

.presentation .presentation-slider .slick-list {
    margin: 0 -10px
}

.presentation .presentation-slider .slick-slide {
    border: 1px solid #ddd;
    margin: 0 10px
}

.presentation .presentation-slider .slick-dots {
    display: none !important
}

.presentation .slider-nav {
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-align: center;
    align-items: center;
    height: 40px;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    margin-top: 10px
}

.presentation .slider-nav button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin: 0;
    width: 40px;
    height: 40px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 20px;
    color: #333;
    outline: none
}

.presentation .slider-nav button:hover {
    color: #f5aa00;
    background-color: #ededed
}

.presentation .slider-nav .count {
    font-family: Noto Sans, sans-serif;
    font-size: 16px;
    padding: 0 10px;
    border-right: 1px solid #ddd;
    border-left: 1px solid #ddd;
    height: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center
}

.presentation.arabic {
    direction: rtl
}

.presentation.arabic .container {
    margin-right: auto
}

.presentation.arabic .page-title h1,
.presentation.arabic .page-title small {
    font-family: STIX2, DroidArabicNaskh, serif
}

.presentation.arabic .page-title .cta {
    margin-left: 0;
    margin-right: auto
}

.presentation.arabic .presentation-slider {
    direction: ltr
}

.presentation.arabic .slider-nav {
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse
}

.btn {
    transition: .3s !important
}

.flash-cards-container {
    position: relative;
    border: 1px solid #ddd;
    border-radius: 16px
}

.flash-cards-container .btn {
    transition: .3s !important
}

.flash-cards-container [data-full-screen-trigger] {
    color: #333;
    width: 3rem;
    height: 3rem;
    border-radius: 4px
}

.flash-cards-container [data-full-screen-trigger]:hover {
    color: #026bb0;
    background: #f7f7f7
}

.flash-cards-container:hover .layout-switcher {
    opacity: 1
}

.flash-cards-container.fullscreen {
    padding: 0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: #fff;
    border: 0;
    border-radius: 0
}

.flash-cards-container.fullscreen .answers-score {
    display: none
}

.flash-cards-container.fullscreen .flash-cards {
    max-width: 46vh;
    min-width: 46vh;
    margin-top: 0;
    perspective: 100vh
}

.flash-cards-container.fullscreen .flash-cards .flash-cards__card__back,
.flash-cards-container.fullscreen .flash-cards .flash-cards__card__front {
    padding: 3vh
}

.flash-cards-container.fullscreen .flash-cards .flash-cards__card p {
    font-size: 2.2vh
}

.flash-cards-container.fullscreen .flash-cards .flash-cards__card.loading:after {
    font-size: 3rem
}

.flash-cards-container.fullscreen .flash-cards .flash-cards__card__front p {
    font-size: 2.2vh;
    margin-bottom: 3.2vh
}

.flash-cards-container.fullscreen .flash-cards .answers-score {
    margin-top: auto;
    padding-top: 0;
    padding-bottom: 3.2vh
}

.flash-cards-container.fullscreen .flash-cards .answers-score p {
    font-size: 1.6vh
}

.flash-cards-container.fullscreen .flash-cards .answers-score h3 {
    font-size: 2.7vh
}

.flash-cards-container.fullscreen .flash-cards .answers-score .btn {
    font-size: 1.5vh;
    height: 4.2vh;
    padding: 0 2.2vh;
    border-radius: .4vh
}

.flash-cards-container.fullscreen .flash-cards .flash-cards__card__back .actions h5 {
    font-size: 1.6vh
}

.flash-cards-container.fullscreen .flash-cards .flash-cards__card__back .actions .btn {
    font-size: 2vh;
    width: 5.6vh;
    height: 5.6vh;
    margin-top: 1vh
}

@media (max-width:736px) {
    .flash-cards-container.fullscreen .flash-cards {
        max-width: 70%;
        min-width: 70%
    }
}

.flash-cards-container.fullscreen.landscape .flash-cards {
    min-width: 70vw;
    max-width: 70vw;
    transition: min-width .3s
}

.flash-cards-container.fullscreen.landscape .flash-cards .flash-cards__card__front p {
    -webkit-margin-start: 3.2vh;
    margin-inline-start: 3.2vh;
    margin-bottom: 0
}

.flash-cards-container.fullscreen.landscape .flash-cards .flash-cards__card__back img,
.flash-cards-container.fullscreen.landscape .flash-cards .flash-cards__card__front img {
    max-height: 50%;
    min-height: 50%
}

.flash-cards-container.stacked {
    padding: 8rem 0 0;
    background-color: #b6d2e8;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    border: 0
}

.flash-cards-container.stacked [data-full-screen-trigger]:hover {
    color: #026bb0;
    background-color: #fff
}

.flash-cards-container.stacked .layout-switcher .btn,
.flash-cards-container.stacked .layout-switcher .btn:hover {
    background: #fff
}

.flash-cards-container.stacked .flash-cards {
    margin-top: 0
}

.flash-cards-container.stacked .flash-cards .flash-cards__card {
    opacity: 1;
    visibility: visible;
    display: none;
    pointer-events: none;
    transition: none !important
}

.flash-cards-container.stacked .flash-cards .flash-cards__card.loaded {
    transition: left 1s, transform 1s !important
}

.flash-cards-container.stacked .flash-cards .flash-cards__card:first-child {
    transform: none !important;
    pointer-events: inherit
}

@media not all and (min-resolution:0.001dpcm) {
    @supports (-webkit-appearance:none) {
        .flash-cards-container.stacked .flash-cards .flash-cards__card:first-child {
            transform: translateZ(100px) scale(.9) !important
        }
    }
}

.flash-cards-container.stacked .flash-cards .flash-cards__card:first-child .flash-cards__card__front>* {
    opacity: 1;
    visibility: visible
}

.flash-cards-container.stacked .flash-cards .flash-cards__card.slide-right {
    animation: stackedSlideRight 1s ease forwards
}

.flash-cards-container.stacked .flash-cards .flash-cards__card.slide-left {
    animation: stackedSlideLeft 1s ease forwards
}

.flashcards-landing .flash-cards-container.stacked .flash-cards .flash-cards__card,
.lesson-landing-page .flash-cards-container.stacked .flash-cards .flash-cards__card {
    pointer-events: inherit
}

.flash-cards-container.stacked .flash-cards .flash-cards__card__front>* {
    opacity: 0;
    visibility: hidden
}

.flash-cards-container.stacked.fullscreen {
    border-radius: 0
}

.flash-cards {
    max-width: 300px;
    margin: 4rem auto 0;
    perspective: 1000px;
    transition: max-width .6s, min-width .6s
}

.landscape .flash-cards {
    max-width: 500px
}

@media (max-width:736px) {
    .landscape .flash-cards {
        max-width: 80%
    }
}

.flash-cards:before {
    content: "";
    display: table;
    padding-top: 177.7%;
    width: 100%;
    transition: padding-top .6s
}

.landscape .flash-cards:before {
    padding-top: 56.25%
}

.flashcards-landing .flash-cards:before,
.lesson-landing-page .flash-cards:before {
    display: none
}

.flash-cards .flash-cards__card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: left .6s ease, transform .6s ease;
    transform-style: preserve-3d;
    cursor: pointer
}

.flash-cards .flash-cards__card p {
    font-size: 1.8rem;
    text-align: center
}

.flashcards-landing .flash-cards .flash-cards__card p,
.lesson-landing-page .flash-cards .flash-cards__card p {
    font-size: 1.4rem
}

@media (max-width:426px) {
    .flash-cards .flash-cards__card p {
        font-size: 1.6rem
    }
}

@media (max-width:374px) {
    .flash-cards .flash-cards__card p {
        font-size: 1.4rem
    }
}

.flash-cards .flash-cards__card:first-child {
    opacity: 1;
    visibility: visible
}

.flash-cards .flash-cards__card:hover .flash-cards__card__front {
    transform: rotateY(5deg);
    box-shadow: -2px 4px 12px rgba(0, 0, 0, .16)
}

.flashcards-landing .flash-cards .flash-cards__card:hover .flash-cards__card__front,
.lesson-landing-page .flash-cards .flash-cards__card:hover .flash-cards__card__front {
    transform: none;
    box-shadow: none
}

.flash-cards .flash-cards__card.loading:before {
    border-radius: 8px
}

.flash-cards .flash-cards__card.loading .flash-cards__card__back *,
.flash-cards .flash-cards__card.loading .flash-cards__card__front * {
    transition: none !important;
    opacity: 0 !important
}

.flash-cards .flash-cards__card.flipped .flash-cards__card__front {
    transform: rotateY(180deg)
}

.flash-cards .flash-cards__card.flipped .flash-cards__card__back {
    transform: rotateY(0deg)
}

.flashcards-landing .flash-cards .flash-cards__card,
.lesson-landing-page .flash-cards .flash-cards__card {
    position: static;
    opacity: 1;
    visibility: visible;
    cursor: default
}

.lesson-landing-page .flash-cards .flash-cards__card {
    cursor: pointer
}

.flash-cards .flash-cards__card__back,
.flash-cards .flash-cards__card__front {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    background-color: #fff;
    box-shadow: 2px 4px 12px rgba(0, 0, 0, .16);
    border-radius: 8px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    padding: 1.5rem;
    transition: transform .6s ease, box-shadow .6s ease
}

.flash-cards .flash-cards__card__back *,
.flash-cards .flash-cards__card__front * {
    transition: opacity .3s
}

.flash-cards .flash-cards__card__back p~.audio-wrapper,
.flash-cards .flash-cards__card__front p~.audio-wrapper {
    margin: 0 !important
}

.flash-cards .flash-cards__card__back img,
.flash-cards .flash-cards__card__front img {
    width: 60%;
    height: 40%;
    object-fit: contain
}

.flash-cards .flash-cards__card__back img.displayed-img,
.flash-cards .flash-cards__card__front img.displayed-img {
    width: auto;
    height: auto
}

.landscape .flash-cards .flash-cards__card__back img.displayed-img,
.landscape .flash-cards .flash-cards__card__front img.displayed-img {
    height: auto;
    width: 50%
}

.landscape .flash-cards .flash-cards__card__back img,
.landscape .flash-cards .flash-cards__card__front img {
    height: 60%;
    width: 30%
}

.flashcards-landing .flash-cards .flash-cards__card__back img,
.flashcards-landing .flash-cards .flash-cards__card__front img,
.lesson-landing-page .flash-cards .flash-cards__card__back img,
.lesson-landing-page .flash-cards .flash-cards__card__front img {
    width: 100%
}

.flash-cards .flash-cards__card__back .audio-wrapper,
.flash-cards .flash-cards__card__front .audio-wrapper {
    margin-top: 3rem
}

.landscape .flash-cards .flash-cards__card__back .audio-wrapper,
.landscape .flash-cards .flash-cards__card__front .audio-wrapper {
    margin-top: 0;
    margin-left: 3rem
}

.flash-cards .flash-cards__card__back .audio-wrapper .plyr__volume,
.flash-cards .flash-cards__card__back .audio-wrapper [data-plyr=airplay],
.flash-cards .flash-cards__card__front .audio-wrapper .plyr__volume,
.flash-cards .flash-cards__card__front .audio-wrapper [data-plyr=airplay] {
    display: none !important
}

.flash-cards .flash-cards__card__back .audio-wrapper .plyr,
.flash-cards .flash-cards__card__front .audio-wrapper .plyr {
    min-width: inherit
}

.flash-cards .flash-cards__card__back .audio-wrapper:only-child,
.flash-cards .flash-cards__card__front .audio-wrapper:only-child {
    margin: 0
}

.flash-cards .flash-cards__card__back .video-player .plyr__captions,
.flash-cards .flash-cards__card__back .video-player .plyr__menu,
.flash-cards .flash-cards__card__back .video-player .plyr__volume,
.flash-cards .flash-cards__card__back .video-player [data-plyr=captions],
.flash-cards .flash-cards__card__back .video-player [data-plyr=fullscreen],
.flash-cards .flash-cards__card__front .video-player .plyr__captions,
.flash-cards .flash-cards__card__front .video-player .plyr__menu,
.flash-cards .flash-cards__card__front .video-player .plyr__volume,
.flash-cards .flash-cards__card__front .video-player [data-plyr=captions],
.flash-cards .flash-cards__card__front .video-player [data-plyr=fullscreen] {
    display: none !important
}

.flashcards-landing .flash-cards .flash-cards__card__back .video-player [data-plyr=play],
.flashcards-landing .flash-cards .flash-cards__card__front .video-player [data-plyr=play],
.lesson-landing-page .flash-cards .flash-cards__card__back .video-player [data-plyr=play],
.lesson-landing-page .flash-cards .flash-cards__card__front .video-player [data-plyr=play] {
    display: none
}

.flash-cards .flash-cards__card__back .actions,
.flash-cards .flash-cards__card__front .actions {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 28%;
    padding: 1.5rem
}

.flash-cards .flash-cards__card__back .actions>div,
.flash-cards .flash-cards__card__front .actions>div {
    text-align: center
}

.flash-cards .flash-cards__card__back .actions>div h5,
.flash-cards .flash-cards__card__front .actions>div h5 {
    font-family: Noto Sans, sans-serif;
    font-size: 1.4rem
}

@media (max-width:426px) {

    .flash-cards .flash-cards__card__back .actions>div h5,
    .flash-cards .flash-cards__card__front .actions>div h5 {
        font-size: 1.2rem
    }
}

.flash-cards .flash-cards__card__back .actions .btn,
.flash-cards .flash-cards__card__front .actions .btn {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    font-size: 1.8rem;
    margin-top: 1rem
}

.flash-cards .flash-cards__card__back .content .audio-wrapper,
.flash-cards .flash-cards__card__front .content .audio-wrapper {
    margin-top: 15px
}

.flash-cards .flash-cards__card__back .content img,
.flash-cards .flash-cards__card__front .content img {
    width: 100% !important
}

.landscape .flash-cards .flash-cards__card__back .content,
.landscape .flash-cards .flash-cards__card__front .content {
    width: 50%
}

.landscape .flash-cards .flash-cards__card__back .content .audio-wrapper,
.landscape .flash-cards .flash-cards__card__front .content .audio-wrapper {
    margin-left: 0
}

.flashcards-landing .flash-cards .flash-cards__card__back,
.flashcards-landing .flash-cards .flash-cards__card__front,
.lesson-landing-page .flash-cards .flash-cards__card__back,
.lesson-landing-page .flash-cards .flash-cards__card__front {
    position: relative;
    padding: 0;
    pointer-events: none;
    box-shadow: none;
    border: 1px solid #ddd;
    transition: .3s
}

.flashcards-landing .flash-cards .flash-cards__card__back:before,
.flashcards-landing .flash-cards .flash-cards__card__front:before,
.lesson-landing-page .flash-cards .flash-cards__card__back:before,
.lesson-landing-page .flash-cards .flash-cards__card__front:before {
    content: "";
    display: table;
    padding-top: 177.7%;
    width: 100%
}

.flashcards-landing .flash-cards .flash-cards__card__back .flash-cards__content,
.flashcards-landing .flash-cards .flash-cards__card__front .flash-cards__content,
.lesson-landing-page .flash-cards .flash-cards__card__back .flash-cards__content,
.lesson-landing-page .flash-cards .flash-cards__card__front .flash-cards__content {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 1.5rem;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center
}

.lesson-landing-page .flash-cards .flash-cards__card__back,
.lesson-landing-page .flash-cards .flash-cards__card__front {
    border: 0
}

.flash-cards .flash-cards__card__front {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center
}

.flash-cards .flash-cards__card__front p {
    font-size: 1.8rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 3rem
}

.flash-cards .flash-cards__card__front p:only-child {
    margin-bottom: 0 !important
}

.landscape .flash-cards .flash-cards__card__front p {
    margin-bottom: 0;
    -webkit-margin-end: 3rem;
    margin-inline-end: 3rem
}

.flashcards-landing .flash-cards .flash-cards__card__front p,
.lesson-landing-page .flash-cards .flash-cards__card__front p {
    font-size: 1.4rem
}

@media (max-width:426px) {
    .flash-cards .flash-cards__card__front p {
        font-size: 1.6rem
    }
}

@media (max-width:374px) {
    .flash-cards .flash-cards__card__front p {
        font-size: 1.4rem
    }
}

.landscape .flash-cards .flash-cards__card__front {
    -ms-flex-align: center;
    align-items: center;
    padding: 3rem;
    -ms-flex-direction: row;
    flex-direction: row
}

.flash-cards .flash-cards__card__back {
    box-shadow: -2px 4px 12px rgba(0, 0, 0, .16);
    transform: rotateY(-180deg);
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column
}

.flash-cards .flash-cards__card__back p {
    -ms-flex: 1;
    flex: 1;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    font-weight: 700
}

.flash-cards .flash-cards__card__back .actions {
    position: static;
    padding: 0
}

.flashcards-landing .flash-cards .flash-cards__card__back,
.lesson-landing-page .flash-cards .flash-cards__card__back {
    transform: none;
    position: relative
}

@media (max-width:736px) {
    .flash-cards {
        max-width: 60%
    }
}

.flashcards-landing .flash-cards,
.lesson-landing-page .flash-cards {
    max-width: 100%;
    display: grid;
    grid-gap: 30px;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))
}

@media (max-width:736px) {

    .flashcards-landing .flash-cards,
    .lesson-landing-page .flash-cards {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))
    }
}

.lesson-landing-page .flash-cards {
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    grid-gap: 1.5rem;
    margin: 0
}

@keyframes stackedSlideLeft {
    0% {
        transform: translateX(0) rotate(0deg)
    }

    to {
        transform: translateX(-100vw) rotate(-45deg)
    }
}

@keyframes stackedSlideRight {
    0% {
        transform: translateX(0)
    }

    to {
        transform: translateX(100vw) rotate(45deg)
    }
}

.stacked {
    padding: 8rem 0 0;
    background: #b6d2e8 !important;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    border: 0
}

.stacked [data-full-screen-trigger]:hover {
    color: #026bb0;
    background: #fff
}

.stacked .layout-switcher .btn,
.stacked .layout-switcher .btn:hover {
    background: #fff
}

.stacked .flash-cards {
    margin-top: 0
}

.stacked .flash-cards .flash-cards__card {
    opacity: 1;
    visibility: visible;
    display: none;
    pointer-events: none;
    transition: none !important
}

.stacked .flash-cards .flash-cards__card.loaded {
    transition: left 1s, transform 1s !important
}

.stacked .flash-cards .flash-cards__card:first-child {
    transform: none !important;
    pointer-events: inherit
}

@media not all and (min-resolution:0.001dpcm) {
    @supports (-webkit-appearance:none) {
        .stacked .flash-cards .flash-cards__card:first-child {
            transform: translateZ(100px) scale(.9) !important
        }

        .flashcards-landing .stacked .flash-cards .flash-cards__card:first-child,
        .lesson-landing-page .stacked .flash-cards .flash-cards__card:first-child {
            transform: none !important
        }
    }
}

.stacked .flash-cards .flash-cards__card:first-child .flash-cards__card__front>* {
    opacity: 1;
    visibility: visible
}

.stacked .flash-cards .flash-cards__card.slide-right {
    animation: stackedSlideRight 1s ease forwards
}

.stacked .flash-cards .flash-cards__card.slide-left {
    animation: stackedSlideLeft 1s ease forwards
}

.flashcards-landing .stacked .flash-cards .flash-cards__card,
.lesson-landing-page .stacked .flash-cards .flash-cards__card {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 15px
}

@media (max-width:736px) {

    .flashcards-landing .stacked .flash-cards .flash-cards__card,
    .lesson-landing-page .stacked .flash-cards .flash-cards__card {
        grid-template-columns: repeat(1, 1fr)
    }
}

.stacked .flash-cards .flash-cards__card__front>* {
    opacity: 0;
    visibility: hidden
}

.flashcards-landing .stacked .flash-cards .flash-cards__card__front>*,
.lesson-landing-page .stacked .flash-cards .flash-cards__card__front>* {
    opacity: 1;
    visibility: visible
}

.stacked.fullscreen {
    border-radius: 0
}

.flashcards-landing .stacked,
.lesson-landing-page .stacked {
    padding: 0;
    background-color: transparent !important;
    overflow: visible
}

.answers-score {
    margin: 3rem auto 0;
    padding-bottom: 3rem;
    max-width: 330px;
    font-family: Noto Sans, sans-serif;
    text-align: center;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: center;
    align-items: center
}

.answers-score p {
    font-size: 1.4rem;
    font-weight: 700
}

.answers-score h3 {
    margin: .5rem 0 1.5rem;
    font-size: 2.4rem
}

.answers-score a {
    color: #333;
    font-size: 1.4rem;
    margin-top: 2rem
}

.answers-score a i {
    margin-right: 5px
}

.stacked .answers-score {
    margin-top: 0;
    padding-top: 6rem;
    max-width: 100%
}

.stacked .answers-score .btn {
    background: #fff;
    color: #333;
    border-color: transparent
}

.stacked .answers-score .btn:hover {
    color: #333;
    background: #f2f2f2
}

.word-meaning-activity .answers-score {
    padding-bottom: 0
}

.layout-switcher {
    position: absolute;
    left: 15px;
    top: 15px;
    display: -ms-flexbox;
    display: flex;
    opacity: 0;
    transition: opacity .3s
}

.layout-switcher .btn {
    width: 3rem;
    height: 3rem;
    background: #f7f7f7;
    border: 0;
    border-radius: 4px;
    color: #333
}

.layout-switcher .btn:hover {
    background: #f7f7f7
}

.layout-switcher .btn:hover i {
    color: #026bb0
}

.layout-switcher .btn i {
    transition: .6s;
    transform-origin: center
}

.layout-switcher .btn.active i {
    transform: rotate(90deg)
}

@media (max-width:736px) {
    .layout-switcher {
        display: none
    }
}

.no-more-cards {
    position: absolute;
    left: 50%;
    right: inherit;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    visibility: hidden;
    transition: .3s
}

.no-more-cards p {
    color: #333;
    font-family: Noto Sans, sans-serif;
    font-weight: 700;
    text-align: center;
    max-width: 500px;
    font-size: 21px
}

.no-more-cards.active {
    opacity: 1;
    visibility: visible
}

.btn.select-all-cards.active {
    background-color: #026bb0;
    color: #fff
}

.flash-cards__card__type {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 1.5rem;
    border-radius: 4px;
    font-size: 12px;
    font-family: Noto Sans, sans-serif;
    border: 1px solid #888;
    color: #888;
    background-color: transparent;
    padding: .3rem .6rem;
    font-weight: 700
}

.flash-cards__card__select {
    position: absolute;
    left: 0;
    top: 0;
    background: none;
    z-index: 9;
    color: #333;
    padding: 1.5rem;
    height: auto;
    width: auto;
    font-size: 1.8rem;
    opacity: .3
}

.flash-cards__card__select i {
    margin: 0
}

.selected .flash-cards__card__select {
    opacity: 1;
    color: #026bb0
}

.flash-cards-preview {
    font-family: STIX2, Times New Roman, serif
}

.flash-cards-preview h2,
.flash-cards-preview h3,
.flash-cards-preview h4,
.flash-cards-preview h5,
.flash-cards-preview h6 {
    font-weight: 700
}

.flash-cards-preview main {
    padding: 0 30px
}

.flash-cards-preview .container {
    width: 848px;
    margin: 0
}

.flash-cards-preview .page-title {
    margin-bottom: 20px;
    text-align: left
}

.flash-cards-preview .page-title h1 {
    font-family: timesExtraBold;
    font-weight: 700;
    font-size: 30px;
    line-height: 1.2
}

.flash-cards-preview .page-title small {
    font-family: STIX2;
    font-size: 65%;
    font-weight: 400;
    display: block;
    margin-top: 5px;
    color: #999
}

.flash-cards-preview .stacked {
    padding: 8rem 0
}

.wall-posts-preview main {
    padding: 0 30px
}

.wall-posts-preview .container {
    width: 848px;
    margin: 0
}

.posts {
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: start;
    justify-content: flex-start
}

.posts,
.posts.active-tab,
.posts .post-card {
    display: -ms-flexbox;
    display: flex
}

.posts .post-card {
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 1.5rem;
    padding: 1.5rem;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    position: relative
}

.posts .post-card:last-child {
    margin-bottom: 0
}

.posts .post-card .badge {
    position: absolute;
    right: 1.5rem;
    top: 1.5rem
}

.posts .post-card .post-header {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 1.5rem
}

.posts .post-card .post-header .user-avatar {
    -ms-flex-preferred-size: 4.5rem;
    flex-basis: 4.5rem
}

.posts .post-card .post-header .user-avatar span {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    height: 4.5rem;
    width: 4.5rem;
    border-radius: 50%;
    text-align: center;
    font-size: 1.4rem;
    font-family: Noto Sans, sans-serif;
    margin-right: 1rem;
    text-transform: uppercase
}

.posts .post-card .post-header .user-avatar span.avatar-789134714053 {
    background: rgba(2, 107, 176, .1);
    color: #026bb0
}

.posts .post-card .post-header .user-avatar span.avatar-602192491092 {
    background: rgba(229, 29, 116, .1);
    color: #e51d74
}

.posts .post-card .post-header .user-avatar span.avatar-269104095634 {
    background: rgba(245, 170, 0, .1);
    color: #f5aa00
}

.posts .post-card .post-header .user-avatar span.avatar-367186135126 {
    background: rgba(120, 181, 23, .1);
    color: #78b517
}

.posts .post-card .post-header .user-avatar span.avatar-976148260463 {
    background: rgba(114, 66, 154, .1);
    color: #72429a
}

.posts .post-card .post-header .user-avatar span.avatar-black {
    background: hsla(0, 0%, 50%, .1);
    color: gray
}

.posts .post-card .post-header .post-details {
    -ms-flex: 10;
    flex: 10
}

.posts .post-card .post-header .post-details h5 {
    font-family: Noto Sans, sans-serif;
    font-size: 1.6rem;
    margin-bottom: 0
}

.posts .post-card .post-header .post-details p {
    font-family: Noto Sans, sans-serif;
    font-size: 1.4rem;
    color: #999
}

.posts .post-card .post-header .post-actions {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 1;
    flex: 1;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
    -ms-flex-item-align: baseline;
    align-self: baseline
}

.posts .post-card .post-header .post-actions .post-actions-btn i {
    color: #999;
    font-size: 1.4rem;
    padding: 0 1rem;
    margin-right: -1rem
}

.posts .post-card .post-header .post-actions .dropdown {
    position: absolute;
    top: 3rem;
    right: 0;
    z-index: 100;
    display: none
}

.posts .post-card .post-header .post-actions .dropdown.opened {
    display: -ms-flexbox;
    display: flex
}

.posts .post-card .post-header .post-actions .dropdown ul {
    background: #fff;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 14rem;
    border-radius: 4px;
    box-shadow: 0 2px 4px 0 #93939380;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content
}

.posts .post-card .post-header .post-actions .dropdown ul li {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-align: center;
    align-items: center;
    list-style: none;
    width: 100%;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content
}

.posts .post-card .post-header .post-actions .dropdown ul li:first-child {
    margin-top: 1rem
}

.posts .post-card .post-header .post-actions .dropdown ul li:last-child {
    margin-bottom: 1rem
}

.posts .post-card .post-header .post-actions .dropdown ul li:hover {
    background-color: #f7f7f7
}

.posts .post-card .post-header .post-actions .dropdown ul li a {
    font-size: 1.4rem;
    color: #333;
    padding: 1rem 1.5rem;
    width: 100%
}

.posts .post-card .post-header .post-actions .dropdown ul li a i {
    margin-right: 1.5rem;
    color: #999;
    font-size: 1.4rem;
    width: 1.4rem
}

.posts .post-card .post-header .post-actions .dropdown ul li a:hover {
    text-decoration: none
}

.posts .post-card .post-header .post-actions .dropdown ul li:after {
    content: normal
}

.posts .post-card .post-body {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    width: 100%
}

.posts .post-card .post-body .post-content p {
    word-break: break-word;
    font-family: Noto Sans, sans-serif;
    font-size: 1.6rem
}

.posts .post-card .post-body .post-content p:only-child {
    margin-bottom: 0
}

.posts .post-card .post-body .video-player {
    margin-top: 1.5rem
}

.posts .post-card .post-body .edit {
    display: none
}

.posts .post-card .post-body .edit .edit-post-wrapper {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    width: 100%;
    padding-bottom: 2rem
}

.posts .post-card .post-body .edit .edit-post-wrapper textarea {
    -ms-flex: 10;
    flex: 10
}

.posts .post-card .post-body .edit textarea {
    color: #333;
    text-decoration: none;
    font-size: 1.6rem;
    background: transparent;
    border: initial;
    border-radius: initial;
    resize: none;
    padding: 0;
    line-height: 2.4rem
}

.posts .post-card .post-body .edit .post-actions {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -ms-flex: 1;
    flex: 1;
    margin-left: auto
}

.posts .post-card .post-body .edit .post-actions ul {
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-item-align: baseline;
    align-self: baseline
}

.posts .post-card .post-body .edit .post-actions ul li {
    margin-right: 1rem
}

.posts .post-card .post-body .edit .post-actions ul li i {
    transition: all .1s ease-in-out
}

.posts .post-card .post-body .edit .post-actions ul li:hover i {
    color: #333;
    transition: all .1s ease-in-out
}

.posts .post-card .post-body .edit .post-actions ul li a {
    font-size: 1.6rem;
    color: #999;
    cursor: pointer
}

.posts .post-card .post-body .edit .post-actions ul li:last-child {
    margin-right: 0
}

.posts .post-card .post-body .file {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-align: center;
    align-items: center
}

.posts .post-card .post-body .file:only-child .file-wrapper,
.posts .post-card .post-body .file:only-child a:not(.remove) {
    margin-top: 1rem
}

.posts .post-card .post-body .file:last-child a:not(.remove) {
    margin-top: 1rem;
    margin-bottom: 0
}

.posts .post-card .post-body .file a:not(.remove) {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    margin-top: 1rem;
    padding: 1rem;
    background: #f7f7f7;
    border-radius: 4px;
    border: 1px solid #ddd;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-align: center;
    align-items: center;
    max-width: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap
}

.posts .post-card .post-body .file a:not(.remove):hover {
    border-color: #026bb0;
    text-decoration: none
}

.posts .post-card .post-body .file a:not(.remove):hover i {
    color: #026bb0
}

.posts .post-card .post-body .file a:not(.remove):hover span {
    color: #026bb0;
    text-decoration: underline
}

.posts .post-card .post-body .file a:not(.remove):last-child {
    margin-top: 1rem;
    margin-bottom: 0
}

.posts .post-card .post-body .file a:not(.remove) .file-type {
    margin-right: 1.5rem;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-preferred-size: 3rem;
    flex-basis: 3rem;
    width: 3rem;
    -ms-flex-negative: 0;
    flex-shrink: 0
}

.posts .post-card .post-body .file a:not(.remove) .file-type img {
    width: 3rem;
    height: 3rem;
    border-radius: 4px
}

.posts .post-card .post-body .file a:not(.remove) .file-info {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    width: calc(100% - 4.5rem)
}

.posts .post-card .post-body .file a:not(.remove) .file-info .info {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-align: center;
    align-items: center;
    font-size: 1.4rem;
    font-family: Noto Sans, sans-serif;
    color: #333;
    width: 100%
}

.posts .post-card .post-body .file a:not(.remove) .file-info .info p {
    font-size: 1.4rem;
    font-family: Noto Sans, sans-serif;
    margin-bottom: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.posts .post-card .post-body .file a:not(.remove) .file-info .info .download {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    margin-left: auto;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center
}

@media (max-width:736px) {
    .posts .post-card .post-body .file a:not(.remove) .file-info .info .download span {
        display: none
    }
}

.posts .post-card .post-body .file a:not(.remove) .file-info .info .download i {
    margin-left: auto;
    color: #333;
    font-size: 1rem;
    transition: all .3s ease-in-out;
    font-size: 1.4rem;
    margin-right: .5rem;
    padding-left: 1rem
}

.posts .post-card .post-body .file a:not(.remove) .file-info .info .download .f-icon:before {
    font-weight: 300 !important
}

@media (max-width:426px) {
    .posts .post-card .post-body .file a:not(.remove) .file-info .info {
        white-space: nowrap
    }
}

.posts .post-card .post-body .file .info i {
    margin-left: auto;
    color: #333;
    font-size: 1rem;
    transition: all .3s ease-in-out;
    font-size: 1.4rem;
    margin-right: .5rem;
    padding-left: 1rem
}

.posts .post-card .post-body .file .info .f-icon:before {
    font-weight: 300 !important
}

@media (max-width:736px) {
    .posts .post-card .post-body .file .info span {
        display: none
    }
}

.posts .post-card .post-body .file.deleted {
    margin-top: 2rem;
    margin-bottom: 0;
    padding: 1rem;
    background: #f7f7f7;
    border-radius: 4px;
    border: 1px solid #ddd;
    -ms-flex-pack: start;
    justify-content: flex-start;
    min-height: 5.2rem
}

.posts .post-card .post-body .file.deleted,
.posts .post-card .post-body .file.deleted .content {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-align: center;
    align-items: center;
    width: 100%
}

.posts .post-card .post-body .file.deleted .content {
    font-size: 1.4rem;
    font-family: Noto Sans, sans-serif;
    color: #333
}

.posts .post-card .post-body .file.deleted .content p {
    font-size: 1.4rem;
    font-family: Noto Sans, sans-serif;
    margin-bottom: 0
}

.posts .post-card .post-body .file.deleted .content i {
    margin-right: .5rem
}

.posts .post-card .post-body .file.file-edit.deleted .remove {
    border: initial;
    margin-left: auto;
    margin-top: 0;
    padding: .5rem 0;
    -ms-flex-pack: end;
    justify-content: flex-end
}

.posts .post-card .post-body .file.file-edit a:not(.remove) {
    border-right: 0;
    border-radius: 4px 0 0 4px;
    pointer-events: none;
    max-width: calc(100% - 4rem)
}

.posts .post-card .post-body .file.file-edit a:not(.remove):hover {
    border-color: #ddd
}

.posts .post-card .post-body .file.file-edit a:not(.remove) .file-info {
    max-width: calc(100% - 4rem)
}

.posts .post-card .post-body .file.file-edit a:not(.remove) .file-info .info .download {
    display: none
}

.posts .post-card .post-body .file.file-edit a {
    pointer-events: all
}

.posts .post-card .post-body .file.file-edit a.remove {
    display: none;
    -ms-flex-direction: row;
    flex-direction: row;
    margin-top: 1rem;
    padding: 1.5rem 1rem;
    background: #f7f7f7;
    border-radius: 0 4px 4px 0;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    border-top: 1px solid #ddd;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-align: center;
    align-items: center;
    height: 100%;
    width: 4rem
}

.posts .post-card .post-body .file.file-edit a.remove.show {
    display: -ms-flexbox;
    display: flex
}

.posts .post-card .post-body .file.file-edit a.remove:hover {
    text-decoration: none
}

.posts .post-card .post-body .file.file-edit a.remove:hover i.close-icon {
    color: #f04124;
    background: rgba(240, 65, 36, .1);
    transition: all .3s ease-in-out
}

.posts .post-card .post-body .file.file-edit a.remove i.close-icon {
    color: #333;
    font-size: 1rem;
    font-weight: 300;
    background-color: #ddd;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    transition: all .3s ease-in-out;
    margin-right: 0;
    padding-left: 0
}

.posts .post-card .post-body .file.file-edit a.remove i.close-icon:before {
    font-weight: 900 !important
}

.posts .post-card .post-body .file .remove {
    display: none
}

.posts .post-card .post-body .video-file {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-align: center;
    align-items: center;
    max-width: 100%;
    margin-top: 1rem
}

.posts .post-card .post-body .video-file+.file {
    margin-top: 1.5rem
}

.posts .post-card .post-body .video-file.file-edit .file-info .download {
    display: none
}

.posts .post-card .post-body .video-file.file-edit .file-info .remove {
    margin-left: auto
}

.posts .post-card .post-body .video-file .file-info {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-align: center;
    align-items: center;
    width: 100%
}

.posts .post-card .post-body .video-file .file-info .remove {
    display: none
}

.posts .post-card .post-body .video-file .file-info .remove.show {
    display: -ms-flexbox;
    display: flex
}

.posts .post-card .post-body .video-file .file-info .remove:hover {
    text-decoration: none
}

.posts .post-card .post-body .video-file .file-info .remove i.close-icon {
    color: #333;
    font-size: 1rem;
    font-weight: 300;
    background-color: #ddd;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    transition: all .3s ease-in-out;
    margin-right: 0;
    padding-left: 0
}

.posts .post-card .post-body .video-file .file-info .remove i.close-icon:before {
    font-weight: 900 !important
}

.posts .post-card .post-body .video-file .file-info .remove i.close-icon:hover {
    color: #f04124;
    background: rgba(240, 65, 36, .1);
    transition: all .3s ease-in-out;
    text-decoration: none
}

.posts .post-card .post-body .video-file .file-info .remove i.close-icon:hover:before {
    color: #f04124
}

.posts .post-card .post-body .video-file .file-info p {
    font-size: 1.4rem;
    font-family: Noto Sans, sans-serif;
    margin-bottom: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.posts .post-card .post-body .video-file .file-info a {
    margin-left: auto;
    font-family: Noto Sans, sans-serif;
    color: #333;
    font-size: 1.4rem;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -ms-flex-align: center;
    align-items: center
}

.posts .post-card .post-body .video-file .file-info a:hover span {
    text-decoration: underline;
    color: #026bb0
}

.posts .post-card .post-body .video-file .file-info a:hover i:before {
    color: #026bb0
}

@media (max-width:736px) {
    .posts .post-card .post-body .video-file .file-info a span {
        display: none
    }
}

.posts .post-card .post-body .video-file .file-info a i {
    margin-left: auto;
    color: #333;
    font-size: 1rem;
    transition: all .3s ease-in-out;
    font-size: 1.4rem;
    margin-right: .5rem;
    padding-left: 1rem
}

.posts .post-card .post-body .video-file .file-info a .f-icon:before {
    font-weight: 300 !important
}

@media (max-width:426px) {
    .posts .post-card .post-body .video-file .file-info a {
        white-space: nowrap
    }
}

.posts .post-card.placeholder .skeleton-box {
    display: -ms-inline-flexbox;
    display: inline-flex;
    height: 1rem;
    position: relative;
    overflow: hidden;
    background-color: #ddd
}

.posts .post-card.placeholder .skeleton-box:after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    background-image: linear-gradient(90deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, .3) 50%, hsla(0, 0%, 100%, 0));
    animation: shimmer 1s infinite;
    content: ""
}

@keyframes shimmer {
    to {
        transform: translateX(100%)
    }
}

.posts .post-card.placeholder .placeholder-header {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%
}

.posts .post-card.placeholder .placeholder-header .header-avatar {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-preferred-size: 4.5rem;
    flex-basis: 4.5rem;
    width: 4.5rem;
    margin-right: 1rem
}

.posts .post-card.placeholder .placeholder-header .header-avatar .user-avatar {
    height: 4.5rem;
    width: 4.5rem;
    border-radius: 50%
}

.posts .post-card.placeholder .placeholder-header .header-user-details {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex: 1;
    flex: 1
}

.posts .post-card.placeholder .placeholder-header .header-user-details span {
    margin-bottom: 1rem
}

.posts .post-card.placeholder .placeholder-header .header-user-details span:first-child {
    width: 15%
}

.posts .post-card.placeholder .placeholder-header .header-user-details span:last-child {
    width: 35%;
    margin-bottom: 0
}

.posts .post-card.placeholder .placeholder-body {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-top: 1.5rem
}

.posts .post-card.placeholder .placeholder-body span {
    margin-bottom: 1rem
}

.posts .post-card.placeholder .placeholder-body span:first-child,
.posts .post-card.placeholder .placeholder-body span:nth-child(2) {
    width: 100%
}

.posts .post-card.placeholder .placeholder-body span:last-child {
    width: 60%;
    margin-bottom: 0
}

.comments {
    margin-top: 3rem
}

.comments .title {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: 1.5rem
}

.comments .title:before {
    content: "";
    width: 100%;
    height: 1px;
    background-color: #ddd;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0
}

.comments .title>h3 {
    background-color: #fff;
    font-size: 1.6rem;
    font-family: Noto Sans, sans-serif;
    position: relative;
    color: gray;
    z-index: 1;
    font-weight: 700;
    padding: 0 1rem
}

.comments .dropdown-actions {
    position: absolute;
    right: 15px;
    top: 5px
}

.comments .comments__list__comment {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: start;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    position: relative
}

.comments .comments__add-new__user-avatar,
.comments .comments__list__comment__user-avatar {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    height: 4rem;
    width: 4rem;
    min-width: 4rem;
    border-radius: 50%;
    text-align: center;
    font-size: 1.4rem;
    font-family: Noto Sans, sans-serif;
    margin-right: 1rem;
    text-transform: uppercase;
    background: rgba(2, 107, 176, .1);
    color: #026bb0
}

.comments .comments__list__comment__details {
    -ms-flex: 1;
    flex: 1;
    background-color: #f7f7f7;
    padding: 1rem;
    border-radius: .4rem;
    font-family: Noto Sans, sans-serif
}

.comments .comments__list__comment__details.edit__mode {
    background-color: transparent;
    padding: 0
}

.comments .comments__list__comment__details h5,
.comments .comments__list__comment__details p {
    font-size: 1.4rem;
    overflow-wrap: anywhere
}

.comments .comments__list__comment__details time {
    font-weight: 400;
    color: #999;
    display: block;
    margin-bottom: .5rem;
    font-size: 1.2rem
}

.comments .comments__pagination {
    display: -ms-flexbox;
    display: flex;
    font-family: Noto Sans, sans-serif;
    font-size: 14px;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 1.5rem
}

.comments .comments__pagination a {
    color: #333;
    font-family: Noto Sans, sans-serif;
    font-weight: 700
}

.comments .comments__pagination>span {
    margin-left: auto
}

.arabic-text-questions h3 {
    font-weight: 700
}

.arabic-text-questions main {
    padding: 0 30px;
    width: 100%
}

.arabic-text-questions .container {
    width: 848px;
    margin: 0
}

@media (max-width:768px) {
    .arabic-text-questions .page-title {
        -ms-flex-direction: column;
        flex-direction: column
    }
}

@media (max-width:768px) {
    .arabic-text-questions .page-title .info {
        margin-left: 0;
        padding-left: 0;
        margin-top: 1rem
    }
}

.arabic-text-questions .page-title .info p {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    font-size: 1.6rem;
    height: 3.8rem;
    background-color: #f7f7f7;
    border-radius: 1.9rem;
    padding: 0 2rem;
    white-space: nowrap
}

.arabic-text-questions .page-title .info i {
    color: #026bb0;
    margin-right: 1rem
}

@media (max-width:375px) {
    .arabic-text-questions .page-title .info i {
        display: none
    }
}

.arabic-text-questions .poem {
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 1.5rem;
    position: relative
}

.arabic-text-questions .poem h3 {
    text-align: center
}

.arabic-text-questions .poem .audio-wrapper.at-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: inherit
}

.arabic-text-questions .comprension-paragraph {
    padding: 3rem 1.5rem 1.5rem
}

.arabic-text-questions .author {
    text-align: center
}

.arabic-text-questions .instances>.cta {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: end;
    justify-content: flex-end
}

.arabic-text-questions .instances>.cta p {
    color: gray;
    margin-right: 1rem
}

.arabic-text-questions .instance.answecrimson {
    position: relative
}

.arabic-text-questions .instance.answecrimson:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ddd;
    display: block;
    z-index: 2;
    opacity: .3
}

.arabic-text-questions .instance.answecrimson .cta {
    position: relative;
    z-index: 3
}

.arabic-text-questions .instance .cta {
    margin-top: 1rem
}

.arabic-text-questions .instance .frq-marking-info {
    margin-right: auto;
    text-align: left;
    margin-left: 0
}

.arabic-text-questions .instance .frq-marking-info p {
    font-family: Noto Sans, sans-serif;
    font-size: 1.5rem;
    padding-right: 1.5rem;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: baseline;
    align-items: baseline
}

.arabic-text-questions .instance .frq-marking-info p i {
    margin-right: .5rem;
    color: #026bb0
}

.arabic-text-questions .progress-bar {
    height: 6px;
    background-color: #c8c8c8;
    margin-bottom: 1rem;
    border-radius: 3px;
    overflow: hidden;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center
}

.arabic-text-questions .progress-bar span {
    display: -ms-inline-flexbox;
    display: inline-flex;
    height: 100%
}

.arabic-text-questions .progress-bar span.correct {
    background-color: #78b517
}

.arabic-text-questions .progress-bar span.incorrect {
    background-color: #f04124
}

.arabic-text-questions .question-actions {
    -ms-flex-align: center;
    align-items: center;
    margin-top: 3rem
}

.arabic-text-questions .question-actions,
.arabic-text-questions .question-actions .buttons {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

@media (max-width:830px) {
    .arabic-text-questions .question-actions .buttons {
        margin-left: 0;
        width: 100%;
        -ms-flex-order: 2;
        order: 2
    }
}

@media (max-width:830px) {
    .arabic-text-questions .question-actions .buttons>.btn {
        margin-top: 1rem
    }
}

.arabic-text-questions .question-actions .buttons .btn+.btn {
    margin-left: .5rem;
    margin-right: 0
}

.arabic-text-questions .question-actions .submit_answer {
    margin-left: auto;
    margin-right: 0
}

@media (max-width:830px) {
    .arabic-text-questions .question-actions .submit_answer {
        -ms-flex-order: 1;
        order: 1;
        margin-bottom: 1rem
    }
}

.arabic-text-questions .visible {
    margin-top: 1.5rem
}

.arabic-text-questions .submitted-message {
    margin-top: 3rem;
    margin-bottom: -1.5rem;
    text-align: center;
    padding: 0 .5rem
}

.arabic-text-questions .submitted-message.not-completed {
    margin-top: 6rem;
    margin-bottom: 6rem
}

.arabic-text-questions .submitted-message figure {
    height: 15rem;
    margin: 0 auto 2rem
}

.arabic-text-questions .submitted-message figure img {
    height: 100%;
    width: auto
}

.arabic-text-questions .submitted-message h2 {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 2.8rem
}

.arabic-text-questions .submitted-message .lessons-list {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0 -1rem;
    margin-top: 3rem
}

@media (max-width:426px) {
    .arabic-text-questions .submitted-message .lessons-list {
        margin: 3rem 0 0
    }
}

.arabic-text-questions .submitted-message .lessons-list li {
    -ms-flex-preferred-size: calc(33.33333% - 2rem);
    flex-basis: calc(33.33333% - 2rem);
    margin: 0 1rem 2rem
}

@media (max-width:736px) {
    .arabic-text-questions .submitted-message .lessons-list li {
        -ms-flex-preferred-size: calc(50% - 2rem);
        flex-basis: calc(50% - 2rem)
    }
}

@media (max-width:426px) {
    .arabic-text-questions .submitted-message .lessons-list li {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
        margin: 0 0 2rem
    }
}

.arabic-text-questions .submitted-message .lessons-list a {
    text-align: center;
    border: 1px solid #ddd;
    padding: 1rem;
    border-radius: 4px;
    color: #333;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%;
    width: 100%;
    font-size: 1.6rem;
    min-height: 8rem
}

.arabic-text-questions .submitted-message .lessons-list a:hover {
    color: #f5aa00;
    border-color: #f5aa00;
    text-decoration: none
}

.arabic-text-questions .submitted-message .cta {
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 0 2rem
}

.arabic-text-questions .submitted-message .cta a {
    margin: .5rem
}

.arabic-text-questions .submitted-message .cta a:last-child {
    margin-right: 0
}

@media (max-width:736px) {
    .arabic-text-questions .submitted-message .cta {
        -ms-flex-direction: column;
        flex-direction: column
    }

    .arabic-text-questions .submitted-message .cta a {
        margin: 0 0 1rem
    }

    .arabic-text-questions .submitted-message .cta a:last-child {
        margin-bottom: 0
    }
}

.arabic-text-questions aside .cta {
    padding-top: 3rem
}

.arabic-text-questions aside .cta .btn {
    width: 100%
}

.arabic-text-questions aside .note {
    margin-top: 1rem;
    font-size: 1.4rem;
    color: gray;
    text-align: center
}

@media (max-width:426px) {
    .arabic-text-questions aside .note {
        padding: 0 3rem
    }
}

.arabic-text-questions aside ul.questions-nums {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
    gap: 1rem
}

.arabic-text-questions aside ul.questions-nums li.active a {
    background-color: #026bb0;
    color: #fff;
    border-color: #026bb0
}

.arabic-text-questions aside ul.questions-nums li:only-child {
    width: 5rem
}

.arabic-text-questions aside ul.questions-nums li.answecrimson a {
    background-color: #e5f0f7;
    border-color: #e5f0f7
}

.arabic-text-questions aside ul.questions-nums li.answecrimson a:hover {
    border-color: #026bb0
}

.arabic-text-questions aside ul.questions-nums li.answecrimson.correct a {
    background-color: #78b517;
    color: #fff;
    border-color: #78b517
}

.arabic-text-questions aside ul.questions-nums li.answecrimson.incorrect a {
    background-color: #f04124;
    color: #fff;
    border-color: #f04124
}

.arabic-text-questions aside ul.questions-nums a {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 5rem;
    width: 100%;
    background-color: #f7f7f7;
    border-radius: 4px;
    color: #333;
    border: 1px solid #f7f7f7;
    padding: 1rem;
    text-align: center
}

.arabic-text-questions aside ul.questions-nums a:hover {
    border-color: #026bb0;
    text-decoration: none
}

.arabic-text-questions.arabic {
    direction: rtl;
    font-family: STIX2, DroidArabicNaskh, serif
}

.arabic-text-questions.arabic .container {
    margin-right: auto
}

.plan-list__row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.plan-list__row .input-text {
    -ms-flex: 1;
    flex: 1
}

.plan-list__row .input-text .error {
    border-color: #f04124 !important
}

.plan-list__row>.actions .add-row {
    visibility: hidden;
    opacity: 0
}

.plan-list__row:last-of-type .add-row {
    visibility: visible;
    opacity: 1
}

.plan-list__row:not(.sub-row):only-child>.actions .delete-row,
.plan-list__row:not(.sub-row):only-child>.actions .order-down,
.plan-list__row:not(.sub-row):only-child>.actions .order-up {
    opacity: .5;
    pointer-events: none
}

.plan-list__row .create-sub {
    transform: scaleX(-1)
}

.plan-list__row .plan-list {
    padding-left: 3rem;
    width: 100%
}

.plan-list__row .plan-list .sub-row {
    -ms-flex: 1;
    flex: 1;
    margin-top: 2rem
}

.plan-list__row .plan-list .sub-row>.actions .add-row {
    visibility: hidden
}

.plan-list__row .plan-list .sub-row:last-child .add-row {
    visibility: visible
}

.plan-list__row .plan-list .sub-row:only-child>.actions .order-down,
.plan-list__row .plan-list .sub-row:only-child>.actions .order-up {
    opacity: .5;
    pointer-events: none
}

.plan-list__row .plan-list .sub-row .create-sub {
    display: none
}

.arabic .plan-list__row .plan-list {
    padding-left: 0;
    padding-right: 3rem
}

.plan-list__row.has-sub-row .actions .create-sub {
    visibility: hidden;
    opacity: 0
}

.lesson-plan-landing-page h2 {
    margin-bottom: 1rem;
    line-height: 1.3
}

.lesson-plan-landing-page h2 span,
.lesson-plan-landing-page h2 span a {
    color: #999;
    font-weight: 400
}

.lesson-plan-landing-page h2 span a:hover {
    color: #f5aa00;
    text-decoration: underline
}

#plan-preview {
    font-family: STIX2, Times New Roman, serif;
    font-size: 1.8rem;
    color: #333;
    line-height: 1.5;
    width: 100%;
    max-width: 928px
}

#plan-preview .page-title h1 {
    line-height: 1.2;
    font-size: 3rem;
    font-weight: 700;
    font-family: timesExtraBold
}

#plan-preview .page-title h1 small.page-info {
    font-size: 65%;
    display: block;
    margin-top: .5rem;
    font-family: STIX2, Times New Roman, serif;
    color: #999;
    font-weight: 400
}

#plan-preview .page-description {
    margin-bottom: 2rem
}

#plan-preview h4 {
    font-size: 1.8rem;
    font-weight: 700;
    color: #333
}

#plan-preview .exclusions,
#plan-preview .objectives,
#plan-preview .prerequisites {
    margin-bottom: 3rem
}

#plan-preview ul {
    padding-left: 4.5rem;
    list-style: disc;
    list-style-image: url(../images/list-arrow.svg)
}

#plan-preview.arabic ul {
    list-style-image: url(../images/list-arrow-rtl.svg);
    padding-right: 4.5rem;
    padding-left: 0
}

.plan-lists span.error {
    font-size: 13px
}

.visualizer {
    position: relative;
    background-color: #fff
}

.visualizer .custom-dropdown {
    position: absolute;
    left: 1rem;
    top: 1rem;
    z-index: 2;
    opacity: 0;
    visibility: hidden;
    transition: .3s
}

.visualizer .custom-dropdown.open {
    opacity: 1;
    visibility: visible
}

.visualizer .custom-dropdown.open .dropdown-toggle {
    background-color: #f5aa00;
    color: #fff
}

.visualizer .custom-dropdown .dropdown-toggle {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background-color: #f7f7f7;
    color: #f5aa00;
    display: grid;
    place-content: center
}

.visualizer .custom-dropdown .dropdown-toggle:hover {
    background-color: #f5aa00;
    color: #fff
}

.visualizer .custom-dropdown .dropdown-menu {
    top: 5rem
}

.visualizer canvas {
    border: 1px solid #ddd
}

.visualizer:before {
    content: "";
    display: block;
    padding-top: 56.25%
}

@media (max-width:991px) {
    .visualizer:before {
        display: none
    }
}

.visualizer .visualizer-content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column
}

@media (max-width:991px) {
    .visualizer .visualizer-content {
        position: static
    }
}

.visualizer.fullscreen {
    width: 100%;
    height: 100%
}

.visualizer.fullscreen.has-border {
    padding: 0;
    border: 0
}

.visualizer.fullscreen.has-border:before {
    margin: 0
}

.visualizer.fullscreen.has-border .go-fullscreen {
    right: 1rem;
    top: 1rem
}

.visualizer.fullscreen.has-border .visualizer-content {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0
}

.visualizer.fullscreen .visualizer-actions.has-border {
    border: 0
}

.visualizer .go-fullscreen {
    position: absolute;
    z-index: 3;
    top: 1rem;
    right: 1rem;
    transition: .3s;
    opacity: 0;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background-color: #f7f7f7;
    color: #f5aa00;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center
}

.visualizer .go-fullscreen:hover {
    background-color: #f5aa00;
    color: #fff
}

.visualizer:hover .custom-dropdown {
    opacity: 1;
    visibility: visible
}

.visualizer:hover .go-fullscreen {
    opacity: 1
}

.visualizer-actions {
    display: -ms-flexbox;
    display: flex;
    padding-top: 15px;
    min-height: 138px;
    border: 1px solid #ddd;
    border-radius: 0 0 4px 4px;
    padding: 1.5rem;
    border-top: 0
}

@media (max-width:991px) {
    .collisions .visualizer-actions .sliders:last-of-type {
        margin-left: auto
    }
}

@media (max-width:736px) {
    .visualizer-actions .sliders {
        margin: 0 auto 30px
    }
}

.visualizer-actions .sliders.flex .slider {
    margin: 0 10px
}

.visualizer-actions .slider {
    max-width: 200px;
    text-align: center
}

.visualizer-actions .slider>span {
    width: 20px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center
}

.visualizer-actions .slider input {
    -ms-flex: 1;
    flex: 1;
    margin: 0 1rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.visualizer-actions .slider input:focus {
    outline: none
}

.visualizer-actions .slider input::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 13px;
    width: 13px;
    border-radius: 3px;
    background: #e51d74;
    border-radius: 50%;
    margin-top: -5px;
    cursor: pointer
}

.visualizer-actions .slider input::-moz-range-thumb {
    height: 13px;
    width: 13px;
    border-radius: 3px;
    background: #e51d74;
    border-radius: 50%;
    margin-top: -5px;
    cursor: pointer
}

.visualizer-actions .slider input::-ms-thumb {
    height: 13px;
    width: 13px;
    border-radius: 3px;
    background: #e51d74;
    border-radius: 50%;
    margin-top: -5px;
    cursor: pointer
}

.visualizer-actions .slider input::-webkit-slider-runnable-track {
    width: 100%;
    height: 3px;
    cursor: pointer;
    background-color: rgba(193, 201, 209, .66);
    border-radius: 1.3px
}

.visualizer-actions .slider input::-moz-range-track {
    width: 100%;
    height: 3px;
    cursor: pointer;
    background-color: rgba(193, 201, 209, .66);
    border-radius: 1.3px
}

.visualizer-actions .slider input::-ms-track {
    width: 100%;
    height: 3px;
    cursor: pointer;
    background: transparent;
    border-color: transparent;
    background-color: rgba(193, 201, 209, .66);
    border-width: 16px 0;
    color: transparent
}

.visualizer-actions .slider input::-ms-fill-lower,
.visualizer-actions .slider input::-ms-fill-upper {
    background-color: rgba(193, 201, 209, .66);
    border-radius: 2.6px
}

.visualizer-actions .slider p {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    color: #999;
    text-align: center;
    font-size: 1.6rem
}

.visualizer-actions .slider p[dir=rtl] {
    font-family: STIX2, DroidArabicNaskh, sans-serif;
    font-size: 1.4rem
}

.visualizer-actions .slider+.slider {
    margin-top: 10px
}

.visualizer-actions .slider.blue input::-webkit-slider-thumb {
    background: #026bb0
}

.visualizer-actions .slider.blue input::-moz-range-thumb {
    background: #026bb0
}

.visualizer-actions .slider.blue input::-ms-thumb {
    background: #026bb0
}

.visualizer-actions:only-child {
    margin-left: auto;
    margin-right: auto
}

@media (max-width:991px) {
    .visualizer-actions:only-child {
        margin: 0 auto !important
    }
}

@media (max-width:736px) {
    .visualizer-actions {
        margin: 0 auto 30px
    }
}

.visualizer-actions .buttons {
    margin: auto;
    display: -ms-flexbox;
    display: flex
}

.visualizer-actions .buttons .btn+.btn {
    margin-left: 1rem
}

.visualizer-actions .buttons.go-right {
    margin-right: 0
}

@media (max-width:991px) {
    .visualizer-actions .buttons.go-right {
        width: auto;
        margin-top: 0
    }
}

@media (max-width:736px) {
    .visualizer-actions .buttons.go-right {
        margin-right: auto
    }
}

@media (max-width:991px) {
    .visualizer-actions .buttons {
        width: 100%;
        -ms-flex-order: 3;
        order: 3;
        -ms-flex-pack: center;
        justify-content: center;
        margin-top: 3rem
    }
}

@media (max-width:736px) {
    .visualizer-actions .buttons {
        margin-top: 0
    }
}

.visualizer-actions .buttons.buttons--group .btn {
    margin: 0 !important;
    border-radius: 0;
    background-color: #eee;
    color: #333;
    border-right: 1px solid #ddd
}

.visualizer-actions .buttons.buttons--group .btn:hover {
    background-color: #ddd
}

.visualizer-actions .buttons.buttons--group .btn:first-child {
    border-radius: 4px 0 0 4px
}

.visualizer-actions .buttons.buttons--group .btn:last-child {
    border-radius: 0 4px 4px 0;
    border: 0
}

.visualizer-actions .buttons.buttons--group .btn.active {
    background-color: #026bb0;
    color: #fff
}

.fullscreen .visualizer-actions {
    padding: 1.5rem 1.5rem 0
}

.visualizer-actions [dir=rtl] {
    font-family: STIX2, DroidArabicNaskh, sans-serif
}

@media (max-width:991px) {
    .visualizer-actions {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }
}

@media (max-width:736px) {
    .visualizer-actions {
        -ms-flex-direction: column;
        flex-direction: column;
        width: 100%
    }
}

.activity-practice {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 5rem;
    border-radius: 1.6rem;
    background-color: transparent;
    border: 1px solid #ddd;
    position: relative;
    overflow: hidden;
    min-height: 41rem;
    outline: 0 !important
}

@media (max-width:736px) {
    .activity-practice {
        padding: 4rem 2rem
    }
}

.activity-practice.activity-practice--spelling {
    min-height: 30rem
}

.activity-practice .input-group {
    width: 100%;
    max-width: 45rem
}

.activity-practice .input-group input {
    border-right: 0;
    border-left: 1px solid #ddd
}

.activity-practice .input-group input:focus {
    border-color: #026bb0
}

.activity-practice .input-group .field {
    -ms-flex: 1;
    flex: 1
}

.activity-practice .input-group .btn {
    margin-left: 0
}

.activity-practice__word h3 {
    font-size: 2.4rem;
    color: #026bb0
}

.activity-practice__word h3.correct {
    color: #78b517
}

.activity-practice__word h3.incorrect {
    color: #f04124
}

.activity-practice__word h3>img {
    width: 100%;
    width: 20rem;
    height: 20rem;
    object-fit: contain
}

.activity-practice__choices {
    margin-top: 5rem;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
    grid-gap: 1.5rem;
    margin-bottom: 3rem
}

.activity-practice__choices .btn {
    width: 100%;
    color: #333;
    padding: 1.5rem;
    height: 100%;
    font-size: 1.6rem;
    background-color: #fff;
    border: 1px solid #ddd;
    white-space: normal;
    line-height: 1.5
}

.activity-practice__choices .btn:hover {
    color: #026bb0;
    background-color: rgba(2, 107, 176, .1)
}

@media (hover:none) and (pointer:coarse) and (max-width:768px) {
    .activity-practice__choices .btn:hover {
        color: #333;
        background-color: #fff
    }
}

.activity-practice__choices .btn.correct {
    color: #fff;
    background-color: #78b517;
    border-color: #78b517;
    pointer-events: none
}

.activity-practice__choices .btn.incorrect {
    color: #fff;
    background-color: #f04124;
    border-color: #f04124;
    pointer-events: none
}

.activity-practice__choices .btn.disabled {
    pointer-events: none !important;
    opacity: 1 !important
}

.activity-practice__choices .btn.empty {
    pointer-events: none;
    background-color: #eee;
    border-color: #eee
}

.activity-practice__choices .btn.activity-practice__choices__choice--img,
.activity-practice__choices .btn.has-vector {
    position: relative;
    padding: 0
}

.activity-practice__choices .btn.activity-practice__choices__choice--img:before,
.activity-practice__choices .btn.has-vector:before {
    content: "";
    display: table;
    width: 100%;
    padding-top: 100%
}

.activity-practice__choices .btn.activity-practice__choices__choice--img img,
.activity-practice__choices .btn.has-vector img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 70%;
    width: 70%;
    object-fit: contain
}

.activity-practice__choices .btn.activity-practice__choices__choice--img img {
    width: 100%;
    height: 100%;
    transform: none;
    left: 0;
    top: 0;
    object-fit: cover;
    border-radius: .4rem
}

.activity-practice__choices.option-2 {
    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr))
}

.activity-practice__choices.option-2 .btn,
.activity-practice__choices.option-3 .btn {
    height: 8rem
}

.activity-practice__progress {
    position: relative;
    width: 100%;
    margin-top: auto
}

.activity-practice__progress:after {
    content: "";
    background-color: #ddd;
    height: 5px;
    width: 100%;
    border-radius: 2rem;
    display: block
}

.form-identification .activity-practice__progress {
    margin-top: 3rem
}

.activity-practice__progress__info {
    display: -ms-flexbox;
    display: flex;
    margin-bottom: .5rem
}

.activity-practice__progress__info h5,
.activity-practice__progress__info span {
    font-size: 1.4rem;
    font-weight: 400
}

.activity-practice__progress__info span {
    margin-left: auto;
    margin-right: 0
}

.activity-practice__progress__current {
    position: absolute;
    bottom: 0;
    left: 0;
    right: inherit;
    background-color: #026bb0;
    border-radius: 2rem;
    height: 5px;
    transition: .3s
}

.activity-practice__start-activity {
    bottom: 0
}

.activity-practice__finish-message,
.activity-practice__start-activity {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    background-color: #fff;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-direction: column;
    flex-direction: column;
    border-radius: 2rem;
    z-index: 3
}

.activity-practice__finish-message {
    bottom: 8rem
}

.activity-practice__finish-message h3 {
    font-size: 2.4rem
}

.activity-practice__finish-message .btn {
    margin-top: 3rem
}

.activity-practice__play-audio {
    position: relative;
    color: #fff
}

.activity-practice__play-audio:hover .play-audio-icon {
    background-color: #ffb610
}

.activity-practice__play-audio .custom-tooltip__inner {
    bottom: 5.5rem;
    opacity: 1;
    visibility: visible
}

.activity-practice__play-audio .play-audio-icon {
    width: 5rem;
    height: 5rem;
    padding: 0;
    font-size: 1.8rem;
    border-radius: 50%;
    background-color: #f5aa00;
    color: #fff;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: .3s
}

.activity-practice__play-audio .play-audio-icon.custom-tooltip__trigger:before {
    content: "";
    font-family: Font-Awesome;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "liga";
    font-weight: 900
}

.activity-practice__play-audio .play-audio-icon.play-audio-icon--start-spelling-activity {
    padding: 0 2rem;
    border-radius: 2.5rem;
    width: auto;
    font-size: 1.4rem;
    text-transform: uppercase;
    font-weight: 700
}

.activity-practice__play-audio .play-audio-icon.play-audio-icon--start-spelling-activity i {
    display: none;
    font-size: 1.8rem
}

.activity-practice__play-audio .play-audio-icon.play-audio-icon--start-spelling-activity.active {
    width: 5rem;
    border-radius: 50%;
    font-size: 0
}

.activity-practice__play-audio .play-audio-icon.play-audio-icon--start-spelling-activity.active i {
    display: block
}

.activity-practice__play-audio .activity-practice__start-spelling-activity {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.activity-practice__play-audio.unmuted .play-audio-icon.custom-tooltip__trigger:before {
    content: "";
    font-family: Font-Awesome;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "liga";
    font-weight: 900
}

.activity-practice__type-answer.answered-correct {
    background-color: rgba(120, 181, 23, .1);
    border-color: #78b517;
    color: #78b517
}

.activity-practice__type-answer.answered-incorrect {
    background-color: rgba(240, 65, 36, .1);
    border-color: #f04124;
    color: #f04124
}

.activity-practice.activity-practice--spelling .input-group input.answered-correct {
    background-color: rgba(120, 181, 23, .1);
    border-color: #78b517;
    color: #78b517
}

.activity-practice.activity-practice--spelling .input-group input.answered-correct:hover {
    cursor: not-allowed
}

.activity-practice.activity-practice--spelling .input-group input.answered-incorrect {
    background-color: rgba(240, 65, 36, .1);
    border-color: #f04124;
    color: #f04124
}

.activity-practice.activity-practice--spelling .input-group input.answered-incorrect:hover {
    cursor: not-allowed
}

.activity-practice__answer-message {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    background-color: #eee;
    padding: 1.5rem 3rem;
    min-height: 12rem;
    z-index: 2;
    transform: translateY(100%);
    transition: .3s;
    pointer-events: none;
    visibility: hidden
}

@media (max-width:736px) {
    .activity-practice__answer-message {
        padding: 1.5rem 2rem
    }
}

.activity-practice__answer-message.show {
    transform: none;
    pointer-events: inherit;
    visibility: visible
}

.activity-practice__answer-message .btn {
    margin-left: auto;
    margin-right: 0
}

.activity-practice__answer-message.activity-practice__answer-message--correct {
    color: #78b517;
    background-color: #e7fbd2
}

.activity-practice__answer-message.activity-practice__answer-message--incorrect {
    color: #f04124;
    background-color: #ffebe9
}

.activity-practice__answer-message__title h4 {
    font-size: 2.1rem
}

.activity-practice__answer-message__title p {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center
}

.activity-practice__answer-message__title p i {
    margin-right: 1rem;
    margin-left: 0
}

.listening-activity .question-actions,
.reading-activity .question-actions {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    margin-top: 3rem;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.listening-activity .question-actions .buttons,
.reading-activity .question-actions .buttons {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

@media (max-width:830px) {

    .listening-activity .question-actions .buttons,
    .reading-activity .question-actions .buttons {
        margin-left: 0;
        width: 100%;
        -ms-flex-order: 2;
        order: 2
    }
}

@media (max-width:830px) {

    .listening-activity .question-actions .buttons>.btn,
    .reading-activity .question-actions .buttons>.btn {
        margin-top: 1rem
    }
}

.listening-activity .question-actions .buttons .btn+.btn,
.reading-activity .question-actions .buttons .btn+.btn {
    margin-left: .5rem;
    margin-right: 0
}

.listening-activity .question-actions .submit_answer,
.reading-activity .question-actions .submit_answer {
    margin-left: auto;
    margin-right: 0
}

@media (max-width:830px) {

    .listening-activity .question-actions .submit_answer,
    .reading-activity .question-actions .submit_answer {
        -ms-flex-order: 1;
        order: 1;
        margin-bottom: 1rem
    }
}

.listening-activity .has-questions-nums,
.reading-activity .has-questions-nums {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.listening-activity .has-questions-nums .chevron-down-icon,
.reading-activity .has-questions-nums .chevron-down-icon {
    position: absolute;
    right: 1.5rem;
    left: inherit;
    top: 2rem
}

.listening-activity .has-questions-nums h3,
.reading-activity .has-questions-nums h3 {
    padding-right: 4rem;
    padding-left: 0
}

.listening-activity .has-questions-nums .questions-nums,
.reading-activity .has-questions-nums .questions-nums {
    display: -ms-flexbox;
    display: flex;
    gap: 0;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: -.5rem;
    width: 100%;
    margin-top: .5rem;
    margin-right: 0 !important;
    margin-left: 0 !important
}

.listening-activity .has-questions-nums .questions-nums li:only-child,
.reading-activity .has-questions-nums .questions-nums li:only-child {
    width: auto
}

.listening-activity .has-questions-nums .questions-nums a,
.listening-activity .has-questions-nums .questions-nums span,
.reading-activity .has-questions-nums .questions-nums a,
.reading-activity .has-questions-nums .questions-nums span {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.1rem;
    font-weight: 700;
    background-color: #999;
    color: #fff;
    border: 0;
    margin-right: .5rem;
    margin-left: 0;
    margin-bottom: .5rem;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-radius: 4px;
    font-family: Noto Sans, sans-serif
}

.listening-activity .has-questions-nums .questions-nums a.correct,
.listening-activity .has-questions-nums .questions-nums span.correct,
.reading-activity .has-questions-nums .questions-nums a.correct,
.reading-activity .has-questions-nums .questions-nums span.correct {
    background-color: #78b517
}

.listening-activity .has-questions-nums .questions-nums a.incorrect,
.listening-activity .has-questions-nums .questions-nums span.incorrect,
.reading-activity .has-questions-nums .questions-nums a.incorrect,
.reading-activity .has-questions-nums .questions-nums span.incorrect {
    background-color: #f04124
}

.listening-activity .has-questions-nums .questions-nums a.skipped,
.listening-activity .has-questions-nums .questions-nums span.skipped,
.reading-activity .has-questions-nums .questions-nums a.skipped,
.reading-activity .has-questions-nums .questions-nums span.skipped {
    background-color: #ddd
}

.form-identification {
    -ms-flex-align: start;
    align-items: flex-start;
    min-height: inherit;
    overflow: visible
}

.form-identification .submit_answer {
    margin-top: 3rem;
    -ms-flex-item-align: end;
    align-self: flex-end
}

.activity-practice__select-words {
    margin-top: 1.5rem
}

.activity-practice__select-words span {
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border-radius: 2px;
    display: inline-block;
    transition: .2s
}

.activity-practice__select-words span:hover {
    background-color: rgba(245, 170, 0, .2)
}

.activity-practice__select-words span.selected {
    background-color: rgba(245, 170, 0, .8)
}

.activity-practice__select-words span.selected:hover {
    background-color: #f5aa00
}

.activity-practice__select-words span.solved-correct {
    background-color: #78b517;
    color: #fff
}

.activity-practice__select-words span.solved-incorrect {
    background-color: #f04124;
    color: #fff
}

.activity-practice__select-words span.correct-answer {
    border: 1px solid #78b517;
    background-color: #ebf4dc;
    margin: 0;
    color: inherit
}

.activity-practice__select-words.solved {
    pointer-events: none
}

.activity-practice__stem {
    list-style: disc;
    list-style-image: url(../images/list-arrow.svg);
    display: list-item;
    list-style-position: inside
}

.tarsia-shape {
    width: 30rem;
    height: 30rem;
    position: relative
}

.tarsia-shape__el {
    -webkit-clip-path: polygon(50% 0, 0 100%, 100% 100%);
    clip-path: polygon(50% 0, 0 100%, 100% 100%);
    width: 13.5rem;
    height: 11.7rem;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: #fff url(../images/activities/full-triangle-bg.svg) no-repeat top;
    background-size: contain;
    transition: .3s
}

.tarsia-shape__el .btn {
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    margin-top: -1rem;
    margin-left: -2rem;
    opacity: 0;
    visibility: hidden;
    z-index: 2
}

.tarsia-shape__el:hover .btn {
    opacity: 1;
    visibility: visible
}

.tarsia-shape__el:not(.filled) .btn {
    display: none
}

.tarsia-shape__el:not(:first-child) {
    margin-top: -2px
}

.tarsia-shape__el:nth-child(2) {
    transform: translate(-50%, 100%) rotate(180deg);
    z-index: 2
}

.tarsia-shape__el:nth-child(2) .btn {
    transform: rotate(-180deg)
}

.tarsia-shape__el:nth-child(3) {
    transform: translateY(100%);
    background: #fff url(../images/activities/right-side-triangle-bg.svg) no-repeat bottom;
    background-size: contain;
    margin-left: -1px
}

.tarsia-shape__el:nth-child(4) {
    transform: translate(-100%, 100%);
    background: #fff url(../images/activities/left-side-triangle-bg.svg) no-repeat bottom;
    background-size: contain;
    margin-left: 1px
}

.tarsia-shape__el.hovering:not(.filled) {
    background-color: red
}

.tarsia-shape__el.filled {
    transition: none;
    background: none;
    -webkit-clip-path: none;
    clip-path: none
}

.tarsia-choices {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    margin-bottom: 3rem
}

.tarsia-choices__choice {
    margin: 0 1rem
}

.activity-practice--tarsia-activity [draggable=true] {
    cursor: move
}

.activity-practice--tarsia-activity img {
    width: 100%;
    transform-origin: 50% 66.6%;
    transform: rotate(0deg);
    transition: .3s;
    max-width: 135px
}

.datasets-landing .list-block {
    padding-left: 0
}

.datasets-landing a h3 {
    color: #333
}

.datasets-landing .filter-content .group {
    margin-right: 20px
}

.content {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: column;
    flex-flow: column
}

.datasets-translations .comprension-paragraph .expand-charts {
    height: 40px;
    right: unset;
    left: -21px;
    top: -61px;
    width: unset;
    border-radius: 10px 10px 0 0;
    border: none;
    padding: 0 15px;
    display: -ms-flexbox;
    display: flex;
    background-color: #ddd
}

.datasets-translations .comprension-paragraph .expand-charts i {
    margin-right: 10px
}

.datasets-translations .chart-wrapper ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-gap: 25px;
    width: 100%
}

.datasets-translations .chart-wrapper ul li {
    border-right: 1px solid #ddd;
    padding-right: 10px;
    margin-bottom: 20px
}

.datasets-translations .chart-wrapper ul li:last-child {
    border-right: none
}

.datasets-translations .chart-wrapper .chartjsLegend ul {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: center;
    justify-content: center;
    grid-gap: 0
}

.datasets-translations .chart-wrapper .chartjsLegend ul li {
    border: 0
}

.datasets-translations .chart-wrapper .chartjsLegend ul li span {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 5px;
    border-radius: 25px
}

.datasets-translations .page-title h4 {
    font-size: 20px
}

.datasets-downloads table i {
    float: left;
    margin-top: 5px;
    margin-right: 5px
}

.filters {
    padding: 7.5px;
    margin-bottom: 0;
    padding-bottom: 10px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))
}

.filters>div {
    padding: 0 15px 30px;
    min-width: 20%
}

.actions {
    display: -ms-flexbox;
    display: flex;
    padding-bottom: 20px;
    -ms-flex-pack: right;
    justify-content: right
}

.checkbox-check label {
    font-size: 14px;
    margin-left: 10px
}

.datasetsInfo {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.tableComment {
    height: 70px;
    overflow: hidden;
    white-space: break-spaces !important;
    display: block;
    position: relative;
    min-width: 250px
}

.tableComment .seeMore {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: #fff;
    border: none;
    height: 30px;
    width: 100%;
    color: #f5aa00;
    cursor: pointer;
    text-align: left;
    padding-left: 10px;
    font-weight: 700
}

.tableCommentPopup {
    width: 70%;
    line-height: 30px;
    font-family: Noto Sans, sans-serif
}

.tableCommentPopup .swal-content {
    text-align: left
}

.error-portal-alert .swal-content .scrollable {
    overflow: auto;
    max-height: 800px;
    margin-bottom: 10px
}

.error-portal-alert .swal-content .item {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: start;
    align-items: flex-start;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    border-bottom: 1px solid #ddd;
    padding: 10px 0;
    margin-bottom: 10px
}

.error-portal-alert .swal-content .item:last-child {
    border: 0
}

.error-portal-alert .swal-content .item h2 {
    font-size: 20px;
    color: #333;
    font-weight: 700;
    margin-bottom: 10px
}

.error-portal-alert .swal-content li {
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 10px
}

#myProgress {
    width: 100%;
    background-color: #ddd
}

#myBar {
    width: 1%;
    height: 15px;
    background-color: #f5aa00
}

.shakkala-form .buttons {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: end;
    justify-content: flex-end;
    margin: 0;
    margin-top: 15px
}

.shakkala-form .two-fields {
    display: -ms-flexbox;
    display: flex;
    margin: 0
}

.shakkala-form .two-fields .buttons .btn-default {
    margin-left: 15px;
    font-size: 18px
}

.shakkala-form .two-fields .buttons .btn-spinner {
    width: 35px;
    height: 30px
}

.shakkala-form .two-fields .buttons .btn-spinner i {
    margin: 0;
    padding: 0
}

.shakkala-form .btn-default {
    margin-left: 15px
}

.shakkala-form .btn-spinner {
    width: 125px
}

.shakkala-form .btn-spinner i {
    margin: 0;
    padding: 0
}

.shakkala-form .input-group {
    display: block;
    margin: 0;
    position: relative;
    width: 100%;
    -ms-flex: 1;
    flex: 1
}

.shakkala-form .input-group .input-textarea textarea {
    direction: rtl;
    padding-left: 70px
}

.shakkala-form .input-group>div:last-child {
    margin-top: 15px
}

.shakkala-form .input-group .btn-copy {
    position: absolute;
    top: 29.5px;
    left: 0
}

.btn-copy i {
    margin: 0
}

.btn-spinner {
    transition-duration: 4s;
    transition-delay: 2s
}

.btn-spinner i {
    padding: 0
}

.btn-spinner.input-upload {
    width: 100%
}

.btn-spinner.input-upload.loading-btn {
    pointer-events: none
}

.btn-spinner.input-upload.loading-btn span {
    font-size: 0
}

.btn-spinner.input-upload.loading-btn i {
    position: none;
    margin: 0;
    pointer-events: none
}

.btn-spinner.input-upload.loading-btn i.spin {
    font-size: 25px;
    display: block;
    pointer-events: none
}

.btn-spinner .spin {
    margin: 0;
    display: none;
    -ms-flex-align: center;
    align-items: center;
    text-align: center
}

.btn-spinner.loading-btn,
.btn-spinner .spin {
    pointer-events: none
}

.btn-spinner.loading-btn span {
    display: none
}

.btn-spinner.loading-btn i {
    display: none;
    margin: 0;
    pointer-events: none
}

.btn-spinner.loading-btn i.spin {
    font-size: 25px;
    pointer-events: none;
    display: block
}

.popup-loader {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center
}

.popup-loader i {
    font-size: 35px;
    color: #026bb0
}

.check {
    width: 40px
}

.seperator {
    border-top-width: 1px
}

.manage-user-edit .repeat-section__element.bordered {
    margin-top: 50px
}

.manage-user-edit .repeat-section__element.bordered .repeat-section__duplicate {
    right: 135px
}

.manage-user-edit .btn-link i {
    margin-top: -3px
}

.manage-user-edit .input-group {
    position: relative
}

.manage-user-edit .input-group .actions-holder {
    -ms-flex-positive: unset;
    flex-grow: unset;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
    width: 150px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: right;
    justify-content: right
}

.manage-user-edit .input-group a.btn-link.repeat-section__delete {
    border: 1px solid;
    width: 40px;
    min-width: 40px;
    height: 40px;
    border-radius: 0;
    font-size: 24px;
    text-align: center;
    line-height: 40px;
    position: relative;
    padding: 0;
    top: -1px;
    margin-left: 10px
}

.manage-user-edit .input-group a.btn-link.repeat-section__delete i {
    margin: auto
}

.manage-user-edit button.btn-link.repeat-section__add {
    width: 100%;
    height: 50px;
    min-height: 50px;
    margin-top: 30px
}

.manage-user-edit .qualifications-btn {
    text-align: center;
    margin: 36px 0 15px
}

header.main-header {
    margin-bottom: 60px
}

header.main-header div.top-header {
    padding: 30px 0;
    border-bottom: 1px solid #ddd
}

header.main-header div.top-header>div.container {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center
}

header.main-header div.logo {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: baseline;
    align-items: baseline
}

header.main-header div.logo a {
    display: inline-block
}

header.main-header div.logo img {
    height: 60px
}

header.main-header div.logo h2 {
    margin-left: 1rem;
    color: #c7c8c9;
    font-family: Noto Sans, sans-serif;
    font-size: 2.4rem;
    font-weight: 700;
    max-width: 85rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

header.main-header .search {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    position: relative
}

header.main-header .search.active>button {
    display: none
}

header.main-header .search.active form {
    width: 25rem
}

header.main-header .search button {
    width: 3.5rem;
    height: 3.5rem;
    padding: 0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    background-color: #fff;
    color: #f5aa00;
    border: 1px solid #f5aa00;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    position: absolute;
    right: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

header.main-header .search button i {
    margin-right: 0
}

header.main-header .search button:hover {
    background-color: #f5aa00;
    color: #fff
}

header.main-header div.user-box {
    -ms-flex-pack: end;
    justify-content: flex-end;
    -ms-flex-align: center;
    align-items: center
}

header.main-header div.user-box,
header.main-header div.user-box ul {
    display: -ms-flexbox;
    display: flex
}

header.main-header div.user-box ul li {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center
}

header.main-header div.user-box ul li:before {
    content: "";
    width: 1px;
    height: 15px;
    display: -ms-inline-flexbox;
    display: inline-flex;
    background-color: #ddd;
    margin: 0 15px
}

header.main-header div.user-box ul li:first-child:before {
    display: none
}

header.main-header div.bottom-header {
    border-bottom: 1px solid #ddd
}

header.main-header div.bottom-header.flex {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center
}

header.main-header div.bottom-header .vertical-border-separator {
    height: 5rem
}

header.main-header nav.main-nav ul {
    /* edite by mostafa js team */
    /* height: 50px; */
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
    row-gap: 25px;
    /* column-gap: 25px; */
    padding: 20px;

}

header.main-header nav.main-nav ul.right-menu {
    -ms-flex-pack: end;
    justify-content: flex-end
}

header.main-header nav.main-nav ul.right-menu li {
    padding-left: 30px;
    padding-right: 0
}

header.main-header nav.main-nav ul.right-menu:only-child {
    padding: 0
}

header.main-header nav.main-nav li {
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 15px
}

header.main-header nav.main-nav li:first-child {
    padding-left: 0
}

header.main-header nav.main-nav li.active a {
    color: #026bb0
}

header.main-header nav.main-nav li.active a:after {
    background-color: #026bb0;
    margin-bottom: -5px;
}

header.main-header nav.main-nav a {
    display: block;
    color: #333;
    height: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    position: relative
}

header.main-header nav.main-nav a i {
    margin-right: 1rem
}

header.main-header nav.main-nav a:hover {
    /* edited by mostafa js team */
    color: #026bb0;
    text-decoration: none
}

header.main-header nav.main-nav a:hover:after {
    /* edited by mostafa js team */
    background-color: #026bb0;
    margin-bottom: -5px;
}

header.main-header nav.main-nav a:after {
    content: "";
    height: 4px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    background-color: transparent;
    transition: .3s
}

header.main-header nav.main-nav .dropdown {
    position: relative
}

header.main-header nav.main-nav .dropdown.open:before {
    display: block
}

header.main-header nav.main-nav .dropdown.open>a {
    color: #026bb0;
    text-decoration: none
}

header.main-header nav.main-nav .dropdown.open .dropdown-menu {
    display: -ms-flexbox;
    display: flex
}

header.main-header nav.main-nav .dropdown:before {
    content: "";
    font-family: Font-Awesome;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "liga";
    bottom: 6px;
    right: 5px;
    position: absolute;
    color: #fff;
    text-shadow: rgba(0, 0, 0, .08) 0 -8px 14px;
    font-size: 30px;
    line-height: .5;
    font-weight: 900;
    z-index: 11;
    display: none
}

header.main-header nav.main-nav .dropdown i.arrow-head-down-icon {
    margin-left: 5px;
    margin-right: 0
}

header.main-header nav.main-nav .dropdown-menu {
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    min-width: 160px;
    box-shadow: 0 0 14px rgba(0, 0, 0, .08);
    -ms-flex-direction: column;
    flex-direction: column;
    height: auto;
    -ms-flex-align: start;
    align-items: flex-start;
    background-color: #fff;
    padding: 10px 0;
    z-index: 10;
    display: none
}

header.main-header nav.main-nav .dropdown-menu li {
    width: 100%;
    display: block;
    border-right: none;
    margin: 0;
    padding: 0
}

header.main-header nav.main-nav .dropdown-menu li:first-child {
    padding: 0;
    margin: 0
}

header.main-header nav.main-nav .dropdown-menu a {
    padding: 10px 15px;
    display: block;
    color: gray;
    width: 100%
}

header.main-header nav.main-nav .dropdown-menu a:after {
    content: normal
}

header.main-header nav.main-nav .dropdown-menu a:hover {
    text-decoration: none;
    color: #333;
    background-color: #ededed
}

footer.main-footer {
    text-align: center;
    min-height: 50px;
    padding: 15px 0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 14px;
    color: #555;
    background-color: #f7f7f7;
    margin-top: auto
}

div.globalWrapper {
    width: 100%;
    float: left;
    direction: ltr;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-height: 100%;
    transition: all .4s
}

.input-group input {
    border-radius: .4rem 0 0 .4rem
}

body a,
body button,
body input {
    text-decoration: none;
    transition: all .3s;
    outline: 0
}

.exam-questions.quiz {
    padding-top: 0
}

.page {
    padding: 30px 0 60px
}

.container {
    /* edited by mostafa js team */
    /* max-width: 1200px; */
    margin-left: auto;
    margin-right: auto;
    -ms-flex-preferred-size: 1200px;
    flex-basis: 1200px;
    padding: 0 3rem
}

.exam-questions.quiz aside,
.exam-questions.quiz main {
    padding-top: 3rem
}

.has-aside main {
    width: 75%;
    float: left;
    padding-right: .7rem;
    padding-left: 0
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
    display: block
}

.page-title {
    margin-bottom: 2rem;
    text-align: left
}

.page-title.with-info {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: start;
    align-items: flex-start
}

h1 {
    font-size: 3rem;
    font-weight: 700;
    font-family: timesExtraBold
}

.page-title h1 {
    line-height: 1.2
}

.page-title.with-info .info {
    margin-right: auto;
    padding-right: 1rem;
    margin-left: 0;
    padding-left: 0
}

.exam-questions .page-title .info p {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    font-size: 1.6rem;
    height: 3.8rem;
    background-color: #f7f7f7;
    border-radius: 1.9rem;
    padding: 0 2rem;
    white-space: nowrap
}

.exam-questions .page-title .info i {
    color: #026bb0;
    margin-right: 1rem
}

.exam-questions .progress-bar {
    height: 6px;
    background-color: #e5f0f7;
    margin-bottom: 1rem;
    border-radius: 3px;
    overflow: hidden
}

.exam-questions .progress-bar span {
    display: block;
    background-color: #026bb0;
    height: 100%
}

.question p:first-child {
    display: inline;
    margin-top: 0
}

.question .answers .mcq_choices li {
    padding: .5rem 0 .5rem 4rem;
    display: table;
    width: 100%
}

aside {
    font-family: Noto Sans, sans-serif;
    font-size: 1.6rem
}

.has-aside aside {
    width: 25%;
    float: left;
    padding-left: 0;
    padding-right: 2.3rem
}

.exam-questions.quiz aside,
.exam-questions.quiz main {
    padding-top: 3rem
}

ul.questions-nums {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
    gap: 1rem;
    list-style: none
}

ul.questions-nums a {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 5rem;
    width: 100%;
    background-color: #f7f7f7;
    border-radius: 4px;
    color: #333;
    border: 1px solid #f7f7f7;
    font-size: 1.6rem
}

ul.questions-nums li.active a {
    background-color: #026bb0;
    color: #fff;
    border-color: #026bb0
}

.question .answers .mcq_choices li {
    padding: .5rem 4rem .5rem 0;
    display: table;
    width: 100%;
}

.question .answers .mcq_choices li>span:first-child:not(.merge):not(.margin) {
    border: 1px solid #888;
    border-radius: 4px;
    margin-left: 1rem;
    cursor: pointer;
    width: 30px;
    height: 30px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    text-transform: uppercase;
    padding-top: 3px;
    margin-right: -4rem;
    font-size: 1.6rem;
}

.answers ul li span.merge,
span.merge {
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
    cursor: auto;
    height: auto;
    width: auto;
    text-align: initial;
    text-transform: none;
    font-family: inherit;
    font-size: inherit;
    vertical-align: baseline;
    opacity: 1;
    white-space: nowrap;
    display: inline-block;
    margin-left: 3px;
}

ul#questionsNavigatorList {
    direction: rtl;
}

#examTitle {
    font-size: 3rem;
    font-weight: 700;
    font-family: timesExtraBold;
}

.unitIcon {
    width: 50px;
}

header.main-header nav.main-nav li {
    padding: 0 10px;
}

nav li a {
    white-space: nowrap;
}

.alignInCenter {
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    align-items: center;
}

td img {
    display: block;
    margin-left: auto;
    margin-right: auto;

}

td,
th {
    text-align: center;
}

iframe {
    box-sizing: content-box;
}

.multiple-upload-section {
    border: solid #ccc 3px;
    padding: 10px;
    overflow: auto;

}

b.inline-info {
    margin-left: 0.75ch;
}

/* edited by mostafa magdy */

/* .controllers-search-container{
    display: flex;
    flex-direction: column;
    gap: 10px;
    } */
    #search-users{
        height: 40px;
        min-width: 100px;
        border: 1px solid #ddd;
        padding: 5px 15px;
        font-family: Noto Sans, sans-serif;
        font-size: 15px;
        line-height: 40px;
        color: #333;
        width: 100%;
        padding-left:30px;
}
    
/* 
    .controllers-container{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        flex-direction: row;
        align-items: center;
    }
     */


     #search-icon{
        transform: translateY(50%);
        position: absolute;
        top: 50%;
        margin-left: 10px;
    color:#ddd;
     }
     #search-users::placeholder{
        padding-left: 5px;
        color: #ddd;     }
      

        input#search-users:focus::placeholder {
            color: transparent;
        }
        
        .cards
        {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            gap: 20px;
        }

        .card{
            height: 250px;
            width: 400px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            border-radius: 20px;
            overflow: hidden;
             box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
            cursor: pointer;
            color: #333;
            
            
        }
        .card-image{
            
            height: 200px;
            /* background-color: brown; */
            background-image: url('https://media.audleytravel.com/-/media/images/home/north-africa-and-the-middle-east/egypt/country-guides/what-to-see-in-egypt/istock_45122734_giza_pyramids.jpg?q=79&w=1920&h=640');
        background-size: cover;
        }
        .card-info{
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .card-data{
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            text-align: center;
        }
        .card-info>.title{
            text-align: center;
            padding: 30px;
            letter-spacing: 2px;
           font-weight: bold;
            margin:10px;
        }
        .card-data .info{
            padding: 10px;
            font-size: 1.2em;
            /* background-color: beige; */
            width: 100%;
        }
        .card-data .info{
            border-left: 1px solid #eee;
        }
        .card-data .info:first-child{
            border:none
        }
    
        .card-wrapper{
            text-decoration: none;
        }
        .card h2{
          margin-bottom: 10px;
        }
        .card-wrapper{
            text-decoration: none !important;
        }
        
        /* body {
        
            height: 100vh;
        } */