@font-face {
    font-family: 'asap-regular';
    src: url('fonts/Asap/Asap-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'asap-bold';
    src: url('fonts/Asap/Asap-Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'dosis-regular';
    src: url('fonts/Dosis/Dosis-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'dosis-medium';
    src: url('fonts/Dosis/Dosis-Medium.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'dosis-bold';
    src: url('fonts/Dosis/Dosis-Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'dosis-semibold';
    src: url('fonts/Dosis/Dosis-SemiBold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'os-regular';
    src: url('fonts/Open_Sans/OpenSans-Regular.ttf') format('truetype'), url('fonts/Open_Sans/OpenSans-Regular.eot?#iefix') format('embedded-opentype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'os-light';
    src: url('fonts/Open_Sans/OpenSans-Light.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'os-semibold';
    src: url('fonts/Open_Sans/OpenSans-Semibold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'os-bold';
    src: url('fonts/Open_Sans/OpenSans-Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

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

/*** Generic ***/

html, body {
    margin: 0;
    padding:0;
}

body {

    zoom: 1;
}

html {
    position: fixed;
    height: 100%;
    width:100%;
    overflow: hidden;
}

body {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    -webkit-text-size-adjust: none;
}


* {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

input {
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

body {
    font-family: sans-serif;
    /* background-color: #333333; */
}

.clear {
    clear:both;
}

button, input[type="button"] {
    -webkit-appearance:none;
}

.bodyLoading, .bodyLoadingBg {
    display: none;
}

body.loading .bodyLoading {
    position: absolute;
    display: block;
    left: 50%;
    top: 50%;
    margin-left: -40px;
    margin-top: -40px;
    width: 80px;
    height: 80px;
}

body.loading .bodyLoadingBg {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: url("images/bg/login.jpg") no-repeat 50% 50% / cover;
}


body.loading.standalone .bodyLoadingBg {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: url("images/bg/login-standalone.jpg") no-repeat 50% 50% / cover;
}

body.loading.standalone.standalone_free .bodyLoadingBg {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: url("images/bg/login-standalone-free.jpg") no-repeat 50% 50% / cover;
}

body.loading .dttMenuBar,
body.loading .mainContent,
body.loading .smOverlay,
body.loading .topGradient,
body.loading .sideMenu,
body.loading .burgerMenuButton,
body.loading .ModalContainer
{
    display: none;
}

/*** TouchButton ***/
.TouchButton {
    min-height: 16px;
    min-width: 96px;
    padding: 8px;
    border-radius: 8px;
    background-color: rgba(255,255,255,0.8);
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 50px;
}

.TouchButton.touched {

    background-color: rgba(255,255,255,1);
}

button:focus, input:focus {
    outline: none !important;
}

/*** ScrollContainer ***/

.ScrollContainer {
    position: absolute;
    overflow: hidden;
}

.ScrollContainer .inner {
    position: absolute;
    top: 16px;
    left: 0;
    right:0;
    /*width: auto;*/
}

.ScrollContainer .yScrollBar {
    position: absolute;
    width: 4px;
    min-height: 10px;
    background-color: grey;
    border-radius: 4px;
    right: 2px;
    top: 4px;
    opacity: 0;
    transition: opacity 0.2s linear;
}

.ScrollContainer .yScrollBar.showing {

    opacity: 1;

}

/*** ModalContainer, ModalAlertDialog ***/

.ModalContainer {

    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: all 0.3s;

    pointer-events: none;

    z-index: 30000;
    /*  z-index: 50; */
}

.ModalContainer.noTransition {
    transition: initial;
}

.ModalContainer.hasModals {

    background-color: rgba(255,255,255,0.9);
    pointer-events: auto;
}

.ModalDialog .ScrollContainer {
    top:50px;
    bottom:60px;
    background:none;
    left:20px;
    right:20px;
}

.Main.mobile .ModalDialog .ScrollContainer {
    left:8px;
    right:8px;
}

.Main.full .ModalDialog .ScrollContainer {
    top: 80px;
    bottom: 80px;
    left: 30px;
    right: 30px;
}

.ModalDialog.noHeadline .ScrollContainer {
    top:30px;
}

.Main .ModalDialog.mNumPad .ScrollContainer {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #e2e2e2;
}

/*
.ModalAlertDialog {
    background-color: rgba(255,255,255,0.9);
    border-radius: 8px;
    position: fixed;
    width: 300px;
    height: 200px;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -150px;
    transition: all 0.3s;
    opacity: 0;
    transform: scale3d(2,2,1);
    -webkit-transform: scale3d(1.2,1.2,1);
}*/

.ModalAlertDialog .dismissButton {

    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 48px;
    text-align: center;
    line-height: 48px;

    border-top-style: solid;
    border-top-width: 1px;

    font-weight: bold;
    cursor: pointer;

}

.ModalAlertDialog.appear {
    opacity: 1;
    transform: scale3d(1,1,1);
    -webkit-transform: scale3d(1,1,1);
}

.ModalAlertDialog.disappear {
    opacity: 0;
    transform: scale3d(0.8,0.8,1);
    -webkit-transform: scale3d(0.8,0.8,1);
}

/*** ModalOptionDialog/ModalSelectDialog ***/

.ModalContainer .ModalOptionDialog, .ModalContainer .ModalSelectDialog, .ModalContainer .ModalAlertDialog {
    min-width: 100px;
    min-height: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0;
    background: #fff;
    border: 2px solid #46a0b2;
    border-radius: 5px;
    display: block;
    -webkit-box-shadow: 2px 2px 10px 1px rgba(0,0,0,0.75);
    -moz-box-shadow: 2px 2px 10px 1px rgba(0,0,0,0.75);
    box-shadow: 2px 2px 10px 1px rgba(0,0,0,0.75);
}

.Main.mobile .ModalContainer .ModalOptionDialog, .Main.mobile .ModalContainer .ModalSelectDialog:not(.mNumPad), .Main.mobile .ModalContainer .ModalAlertDialog {
    left:0;
    right:0;
    bottom:0;
    margin-left:0 !important;
    width:auto !important;
    height:auto !important;
    border-left:none;
    border-right:none;
    border-bottom:none;
    border-radius:0;
}

.ModalContainer .ModalSelectDialog.mNumPad {
    min-width:1px;
    /*min-height:380px;*/
    max-height:400px;
}

@media screen and (max-height: 400px) {
    .ModalContainer .ModalSelectDialog.mNumPad {
        min-height: 310px;
        max-height: 310px;
    }
}

.ModalOptionDialog .headline, .ModalSelectDialog .headline, .ModalAlertDialog .headline {
    text-transform: uppercase;
    font-family: "dosis-regular";
    font-size: 20px;
    color: #505050;
    position: absolute;
    left: 20px;
    top: 20px;
    right: 80px;
}

.Main.mobile .ModalOptionDialog .headline, .Main.mobile .ModalSelectDialog .headline, .Main.mobile .ModalAlertDialog .headline {
    left:8px;
    top:8px;
}

.Main.full .ModalOptionDialog .headline, .Main.full .ModalSelectDialog .headline, .Main.full .ModalAlertDialog .headline {
    font-size: 30px;
    left: 30px;
    top: 15px;
}

.ModalOptionDialog .headline.empty, .ModalSelectDialog .headline.empty, .ModalAlertDialog .headline.empty {
    display:none;
}

.ModalOptionDialog.videoModal .headline, .ModalOptionDialog.finishTestModal .headline, .ModalAlertDialog.demoHint .headline {
    text-transform: none;
    font-family: asap-regular;
    font-size: 16px;
}

.Main.full .ModalOptionDialog.videoModal .headline, .Main.full .ModalOptionDialog.finishTestModal .headline, .Main.full .ModalAlertDialog.demoHint .headline {
    font-size: 25px;
}

.ModalSelectDialog .content {
    top:70px;
    bottom:70px;
    background:none;
}

.ModalOptionDialog .contentText, .ModalAlertDialog .contentText {
    color: #505050;
    font-size: 15px;
    font-family: "asap-regular";
    margin-top: 10px;
}

.Main.full .ModalOptionDialog .contentText, .Main.full .ModalAlertDialog .contentText {
    font-size: 22px;
}

.ModalOptionDialog.finishTestModal .contentText, .ModalAlertDialog.demoHint .contentText, .ModalOptionDialog.finishedTestModal .headline {
    font-size: 16px;
    font-family: asap-bold;
}

.Main.full .ModalOptionDialog.videoModal .contentText, .Main.full .ModalOptionDialog.finishTestModal .contentText, .Main.full .ModalAlertDialog.demoHint .contentText, .Main.full .ModalOptionDialog.finishedTestModal .headline {
    font-size:25px;
}

.ModalOptionDialog.videoModal .contentText {
    font-family:asap-regular;
}

.ModalOptionDialog.videoModal .contentText b {
    font-weight:normal;
    font-family:asap-bold;
    display:block;
    margin-top:30px;
}

.ModalOptionDialog.finishedTestModal .contentText {
    display:none;
}

.ModalContainer .ModalOptionDialog .modalBtns, .ModalContainer .ModalSelectDialog .modalBtns, .ModalContainer .ModalAlertDialog .modalBtns {
    position: absolute;
    bottom: 20px;
    right: 20px;
    left:16px;
    color: #fff;
}

.ModalContainer .ModalOptionDialog .modalBtns {
    left: auto;
}

.Main.full .ModalContainer .ModalOptionDialog .modalBtns, .Main.full  .ModalContainer .ModalSelectDialog .modalBtns, .Main.full  .ModalContainer .ModalAlertDialog .modalBtns {
    right:32px;
}

.ModalContainer .ModalSelectDialog.mNumPad .modalBtns {
    width:150px;
    left:50%;
    margin-left:-75px;
    right:auto;
}

.ModalAlertDialog.demoHint .modalContent {
    top:80px;
}

.Main.full .ModalAlertDialog.demoHint .modalContent {
    top:100px;
}

.Main.full .ModalAlertDialog.demoHint .headline, .Main.mobile .ModalAlertDialog.demoHint .headline {
    right: 80px;
}

.ModalAlertDialog.demoHint .contentText ul {
    margin:0;
    padding:0;
    list-style-type:none;
}

.ModalContainer .modalBtns .DttButton {
    min-width:150px;
    float:right;
}

.Main.mobile .ModalContainer .ModalOptionDialog .modalBtns .DttButton {
    min-width:130px;
    margin-left: 8px;
}

.ModalContainer .ModalOptionDialog .modalBtns .DttButton {
    float:left;
    margin-right:10px;
    margin-bottom:10px;
}

.ModalContainer .ModalOptionDialog .modalBtns .DttButton:last-child {
    margin-right:0;
}

.AssetsLoadingDialog .progressBar {
    background: #fff;
    border-radius: 4px;
    position: absolute;
    left: 20px;
    right: 20px;
    height: 37px;
    top: 70px;
    transition: all 0.6s;
    -webkit-transition: all 0.6s;
    -webkit-box-shadow: 0 1px 15px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 0 1px 15px 0px rgba(0,0,0,0.3);
    box-shadow: 0 1px 15px 0px rgba(0,0,0,0.3);
}

.AssetsLoadingDialog .progressBar .progress {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: #d66159;
    border-radius: 4px;
    background: -moz-linear-gradient(0deg, rgba(214,97,89,1) 0%, rgba(233,126,75,1) 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(214,97,89,1)), color-stop(100%, rgba(233,126,75,1)));
    background: -webkit-linear-gradient(0deg, rgba(214,97,89,1) 0%, rgba(233,126,75,1) 100%);
    background: -o-linear-gradient(0deg, rgba(214,97,89,1) 0%, rgba(233,126,75,1) 100%);
    background: -ms-linear-gradient(0deg, rgba(214,97,89,1) 0%, rgba(233,126,75,1) 100%);
    background: linear-gradient(90deg, rgba(214,97,89,1) 0%, rgba(233,126,75,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d66159', endColorstr='#e97e4b',GradientType=1 );
}

.AssetsLoadingDialog .assetsPercentage {
    height: 37px;
    text-align: center;
    color: #eeeeee;
    position: relative;
    font-family: asap-bold;
    font-size: 20px;
    padding-top: 6px;
}

.AssetsLoadingDialog .legend {
    color: #000;
    position: absolute;
    bottom: auto;
    top:160px;
    font-family:asap-bold;
    font-size:20px;
    left: 0;
    right: 0;
    text-align: center;
}

.AssetsLoadingDialog .legend2 {
    color: #000;
    position: absolute;
    bottom: auto;
    top: 220px;
    font-family: asap-bold;
    font-size: 20px;
    left: 0;
    right: 0;
    text-align: center;
}

.AssetsLoadingDialog .info {
    top:50px;
    color:#000;
    font-family:asap-regular;
    font-size:16px;
    text-align:center;
    position:absolute;
    left:0;
    right:0;
}


/*** Modal Dialogs appearing & disappearing ***/
.ModalContainer > * {
    transform: scale(1);
    opacity: 1;
    transition: transform 0.5s,opacity 0.5s;
}

.ModalContainer > *.fromBig {
    transform: scale(1.3);
    opacity: 0;
}

.ModalContainer > *.toSmall {
    transform: scale(0.7);
    opacity: 0;
}


/*** Main burgerMenuButton ***/

.Main .burgerMenuButton {
    position: fixed;
    right: 1px;
    top: 1px;
    width: 38px;
    height: 38px;
    z-index: 190;
    transition: all 0.5s;
}

.Main.full .burgerMenuButton {
    width: 55px;
    height: 55px;
    right: 32px;
    top:0;
}

.Main.nommButton .burgerMenuButton {
    display: none;
}

.Main.sideMenuEnabled .burgerMenuButton {
    right:27px;
}

.Main.full.sideMenuEnabled .burgerMenuButton {
    right: 6px;
}

.sideMenu.noSeps .smSep {

    display: none;
}

.Main .burgerMenuButton.hidden {
    display:none;
}

.Main .burgerMenuButton * {
    position: absolute;
    width: 20px;
    height: 20px;
    transition: all 0.5s;
    cursor: pointer;
    font-size: 38px;
    line-height: 24px;
    color: #fff;
}

.Main.full .burgerMenuButton * {
    font-size:55px;
}

.Main .burgerMenuButton.hoverClass .open {
    background: rgba(0,0,0,0.1);
}

.Main .burgerMenuButton .open {
    padding: 7px 0 0 12px;
    width: 26px;
    height: 34px;
}

.Main.full .burgerMenuButton .open {
    padding: 15px 0 0 12px;
    width:43px;
    height:40px;
}

.Main.sideMenuEnabled .burgerMenuButton .open {
    margin-left: -30px;
}

.Main .burgerMenuButton .open:before {
    margin-left:-10px;
}

.Main .burgerMenuButton .close {
    /*background: url('images/closeburgermenu.svg');*/
    opacity: 0;
    line-height:55px;
}

.Main .burgerMenuButton.hoverClass .close {
    color: #f36c49;
}

/*** Main sideMenu ***/

.Main .sideMenu {
    position: fixed;
    top: 0;
    left: 100%;
    bottom: -20px;
    width: 250px;
    z-index: 90;
    background-color: #555;
    transition: all 0.5s;
    /*
    border-top-left-radius: 4px;
    -webkit-box-shadow: inset 0px 0px 23px -1px rgba(0,0,0,0.75);
    -moz-box-shadow: inset 0px 0px 23px -1px rgba(0,0,0,0.75);
    box-shadow: inset 0px 0px 23px -1px rgba(0,0,0,0.75);*/
}

.Main.full .sideMenu {
    width:495px;
}

.Main.sideMenuEnabled .sideMenu {
    transform: translate3d(-250px,0,0);
    -webkit-transform: translate3d(-250px,0,0);
}

.Main.full.sideMenuEnabled .sideMenu {
    transform: translate3d(-495px,0,0);
    -webkit-transform: translate3d(-495px,0,0);
}

.Main.sideMenuEnabled .sideMenu .DttButton:last-child {
    margin-bottom:20px;
}

.smOverlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255,255,255,0.8);
    opacity: 0;
    z-index: 50;
    -webkit-transition: opacity 0.5s; /* Safari */
    transition: opacity 0.5s;
    pointer-events: none;
}

.Main.sideMenuEnabled .smOverlay {
    pointer-events: auto;
    opacity: 1;
}

.Main .mainContent {
    transition: all 0.5s;
}

.inset .mainContent {
    margin-top: 32px;
}

.insetHalf .mainContent {

    margin-top: 12px;
}

.insetPre11 .mainContent {

    margin-top: 44px;
}

.Main.sideMenuEnabled .mainContent {
    transform: translate3d(-125px,0,0) scale3d(1,1,0.7);
    -webkit-transform: translate3d(-125px,0,0) scale3d(1,1,0.7);
}

.Main.sideMenuEnabled .burgerMenuButton {
    transform: translate3d(-180px,0,0) rotate3d(0,0,1,-45deg);
    -webkit-transform: translate3d(-180px,0,0) rotate3d(0,0,1,-45deg);
}

.Main.full.sideMenuEnabled .burgerMenuButton {
    transform: translate3d(-425px,0,0) rotate3d(0,0,1,-45deg);
    -webkit-transform: translate3d(-425px,0,0) rotate3d(0,0,1,-45deg);
}

.Main.sideMenuEnabled .burgerMenuButton .open {
    opacity: 0;
}

.Main.sideMenuEnabled .burgerMenuButton .close {
    opacity: 1;
}

.Main .topGradient {
    opacity: 0;
    width:1px;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}

.Main.sideMenuEnabled .topGradient {
    position: fixed;
    display:block;
    right: 0;
    top: 0;
    margin-right:0;
    width: 240px;
    background:#555;
    height: 40px;
    z-index: 100;
    opacity: 1;
    -webkit-box-shadow: 0px 20px 20px 0px rgba(85,85,85,0.8);
    -moz-box-shadow: 0px 20px 20px 0px rgba(85,85,85,0.8);
    box-shadow: 0px 20px 20px 0px rgba(85,85,85,0.8);
}

.Main.full.sideMenuEnabled .topGradient {
    width: 485px;
    height: 45px;
}

/*** Main mainContent ***/
.Main .mainContent {
    position: fixed;
    top: 42px;
    left: 0;
    right: 0;
    bottom: 0;
    /* transition: all 0.5s;*/
    /* -webkit-transition: all 0.1s; */
    color: white;
    background:#fff;
}

.Main.full .mainContent {
    top:55px;
}

.Main .mainContent > * {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: #fff;
}

/*
.insetHalf .Main .mainContent > * {
    top: -20;
}
*/


.Box {
    display: inline-block;
    width: 200px;
    height: 200px;
    background-color: pink;

    margin-right: 20px;
}

.Box:last-of-type {
    margin-right: 0;
}

.cursorPointer {
    cursor: pointer;
    cursor: -webkit-pointer;
}

/*** SideMenuItem ***/

.SideMenuItem {

    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 12px;

    margin-bottom: 8px;
    margin-left: 6px;
    margin-right:26px;

    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: white;

    cursor: pointer;
}

.SideMenuItem:first-of-type {

    margin-top: 68px;

    border-top-style: solid;
    border-top-width: 1px;
    border-top-color: white;
}

/*** sideMenu DttButton ***/

.sideMenu .smSep {
    height:3px;
    width:90%;
    margin:16px auto 5px;
    background:#fff;
    pointer-events: none;
}

.Main.full .sideMenu .smSep {
    margin: 32px auto 21px;
}

.Main .sideMenu .inner {
    padding-top: 54px;
}

.Main.full .sideMenu .inner {
    padding-top: 77px;
}

.sideMenu .DttButton {
    background:none;
    color:#fff;
    text-align:left;
    text-transform:none;
    font-size:18px;
    height:30px;
    font-family:"asap-regular";
    margin-bottom:3px;
}

.Main.full .sideMenu .DttButton {
    font-size: 28px;
    height:40px;
    margin-bottom:8px;
}

.Main .sideMenu .DttButton.nonButton.withIcon .icon {
    right:auto;
    left:25px;
    top:8px;
    width:25px;
    height:25px;
    font-size:24px;
    line-height:14px;
}

.Main.full .sideMenu .DttButton.nonButton.withIcon .icon {
    font-size: 38px;
    line-height: 24px;
    top: 8px;
    right: auto;
}

.sideMenu .DttButton.withIcon .icon:before {
    margin-left:-7px;
}

.sideMenu .DttButton.withIcon .caption {
    left:50px;
    white-space:nowrap;
    font-family:asap-regular;
}

.Main.full .sideMenu .DttButton.withIcon .caption {
    left: 73px;
}

.sideMenu .DttButton.hoverClass .caption, .sideMenu .DttButton.activeClass .caption {
    color: #d07751;
}

.sideMenu .DttButton.hoverClass .icon, .sideMenu .DttButton.activeClass .icon {
    color: #d07751;
}

.sideMenu .DttButton.hidden {
    display:none;
}

/*** Main animation effects ***/

.Main .mainContent > * {
    background-color: #fff;
    /*transition: all 0.2s;*/
    transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
    opacity: 1;
}

.Main .mainContent > *.appearFromRight {
    transform: translate3d(100vw,0,0);
    -webkit-transform: translate3d(100vw,0,0);
    opacity: 0.8;
}

.Main .mainContent > *.appearAsFirst {
    transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
    opacity: 0;
}

.Main .mainContent > *.disappearToLeft {
    transform: translate3d(-20vw,0,0);
    -webkit-transform: translate3d(-20vw,0,0);
    opacity: 0;
}

.Main .mainContent > *.disappearToRight {
    transform: translate3d(20vw,0,0);
    -webkit-transform: translate3d(20vw,0,0);
    opacity: 0;
}

/*** LoginScreen ***/

.LoginScreen {
    background:url("images/bg/login.jpg") no-repeat 50% 50% / cover;
}

.standalone .LoginScreen {
    background:url("images/bg/login-standalone.jpg") no-repeat 50% 50% / cover;

}

.standalone.standalone_free .LoginScreen {
    background:url("images/bg/login-standalone-free.jpg") no-repeat 50% 50% / cover;
}

.inset .LoginScreen {

    margin-top: -32px;
}

.insetHalf .LoginScreen {

    margin-top: -32px;
}

.LoginScreen .logo {
    width:480px;
    margin:46px auto 0;
    font-size:56px;
    height:56px;
    background:url("images/icons/logo.svg") no-repeat 0 0 / 100% 100%;
}

.Main.standalone .LoginScreen .logo {
   display: none;
}

.Main.full .LoginScreen .logo {
    width: 720px;
    margin: 30px auto 0;
    font-size: 85px;
    height:85px;
}

.Main.mobile .LoginScreen .logo {
    font-size:32px;
    width:274px;
    height:32px;
}

/*
.LoginScreen .logo .path2 {
    margin-top:-56px;
}

.Main.full .LoginScreen .logo .path2 {
    margin-top:-85px;
}

.Main.mobile .LoginScreen .logo .path2 {
    margin-top: -32px;
}*/

.LoginScreen .headline {
    text-align: center;
    font-size: 30px;
    font-family: "dosis-semibold";
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.7);
    margin-top:17px;
}

.Main.standalone .LoginScreen .headline {
    display:none;
}

.Main.full .LoginScreen .headline {
    font-size: 44.5px;
    margin-top: 27px;
}

.Main.mobile .LoginScreen .headline {
    display:none;
}

.LoginScreen .loginWrap {
    width: 290px;
    position: relative;
    margin: 24px auto 0;
    background: rgba(225,225,225,0.9);
    border-radius: 7px;
    -webkit-box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.3);
    box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.3);
    padding: 25px 25px 39px 25px;
    opacity: 1;
    transition: opacity,margin 0.6s;
    -webkit-transition: opacity,margin 0.6s;
}

.Main.full .LoginScreen .loginWrap {
    margin-top:40px;
}

.Main.mobile .LoginScreen .loginWrap {
    width:auto;
    margin:24px 20px 0;
}

.LoginScreen .loginWrap .bLogin {
    font-family:"dosis-semibold";
    font-size:16px;
    padding:7px 0;
    margin:9px 0 17px 0;
}

.LoginScreen .loginWrap .bDemoIos {
    font-family: "dosis-semibold";
    font-size: 16px;
    padding: 7px 0;
    margin: 9px 0 17px 0;

    display: none;
}

.Main.full .LoginScreen .loginWrap .bLogin {
    margin-top:15px;
    margin-bottom:25px;
}

.Main.full .LoginScreen .loginWrap .bDemoIos {
    margin-top: 15px;
    margin-bottom: 25px;
}

.LoginScreen .loginWrap .bLogin .caption {
    margin-right:0;
    right:0;
    left:0;
}

.LoginScreen .loginWrap .bDemoIos .caption {
    margin-right: 0;
    right: 0;
    left: 0;
}

.LoginScreen .loginWrap .bLogin .icon {
    font-size: 42px;
    margin-top: -2px;
}

.LoginScreen .loginWrap .bDemoIos .icon {
    font-size: 42px;
    margin-top: -2px;
}

.LoginScreen .hintWrap.hidden {
    display: block;
    pointer-events: none;
}

.LoginScreen .hintWrap.hidden .SimpleDiv {
    display:none;
}

.LoginScreen .hintWrap.hidden .SimpleDiv.hIcon {
    display:block;
}

.LoginScreen .additionalButtons .DttButton {
    background: none;
    color: #555;
    font-family: "asap-regular";
    text-transform: none;
}

.LoginScreen .forgetSavedPasswordButton {
    background: none;
    color: #555;
    font-family: "asap-regular";
    text-transform: none;
    margin-top: -14px;
    display: none;
}

.LoginScreen .additionalButtons .DttButton .caption, .LoginScreen .forgetSavedPasswordButton .caption {
    margin-right:0;
    display:inline-block;
    position:relative;
    left:0;
    font-family:asap-regular;
    vertical-align:top;
    font-size:12px;
}

.Main.full .LoginScreen .additionalButtons .DttButton .caption {
    font-size:18px;
}

.LoginScreen .additionalButtons .DttButton .icon {
    margin-right:0 !important;
    display:inline-block !important;
    position:relative !important;
    font-size:16px !important;
    margin-left:-13px !important;
    line-height:22px !important;
    width:auto !important;
}

.LoginScreen .forgetSavedPasswordButton .icon {
    margin-right:0 !important;
    display:inline-block !important;
    position:relative !important;
    font-size:16px !important;
    margin-left:-13px !important;
    line-height:22px !important;
    width:auto !important;
}

.Main.full .LoginScreen .additionalButtons .DttButton .icon {
    font-size: 25px;
    line-height:27px;
}

.LoginScreen .additionalButtons .DttButton.hoverClass .caption, .LoginScreen .bottomMenu .DttButton.hoverClass .caption {
    color: #d07751;
    text-decoration: underline;
}

.LoginScreen .additionalButtons .DttButton.hoverClass .icon, .LoginScreen .bottomMenu .DttButton.hoverClass .icon {
    color: #d07751;
}

/*
.Main .LoginScreen .additionalButtons .DttButton.withIcon .icon {
    top:0;
    line-height:0;
    margin-top:19px;
}

.Main.full .LoginScreen .additionalButtons .DttButton.withIcon .icon {
    margin-top:19px;
}*/

.LoginScreen .bottomMenu {
    position:absolute;
    bottom:0;
    left:50px;
    right:50px;
    text-align:center;
    white-space:nowrap;
}

.LoginScreen .bottomMenu .DttButton {
    background: none;
    color: #555;
    font-size: 9px;
    font-family: "asap-regular";
    text-transform: none;
    min-width:1px;
    width:auto;
    display:inline-block;
    margin-right:20px;
}

.Main.full .LoginScreen .bottomMenu .DttButton {
    font-size:15px;
}

.LoginScreen .bottomMenu .DttButton:last-child {
    margin-right:0;
}

.LoginScreen .bottomMenu .DttButton .caption {
    position:relative;
    left:0;
    margin-right:0;
    font-family:asap-regular;
}

.LoginScreen .bottomMenu .DttButton .icon {display:none;}

.LoginScreen .progressBar {
    width:480px;
    left:50%;
    margin-left:-240px;
    height:37px;
    background:#fff;
    border-radius:4px;
    position:absolute;
    top:-50px;
    opacity: 0;
    transition: all 0.6s;
    -webkit-transition: all 0.6s;
}

.Main.full .LoginScreen .progressBar {
    width: 710px;
    margin-left: -350px;
}

.Main.mobile .LoginScreen .progressBar {
    width: 274px;
    margin-left: -137px;
}

.LoginScreen .progressBar .progress {
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    background:#d66159;
    border-radius:4px;
    background: -moz-linear-gradient(0deg, rgba(214,97,89,1) 0%, rgba(233,126,75,1) 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(214,97,89,1)), color-stop(100%, rgba(233,126,75,1)));
    background: -webkit-linear-gradient(0deg, rgba(214,97,89,1) 0%, rgba(233,126,75,1) 100%);
    background: -o-linear-gradient(0deg, rgba(214,97,89,1) 0%, rgba(233,126,75,1) 100%);
    background: -ms-linear-gradient(0deg, rgba(214,97,89,1) 0%, rgba(233,126,75,1) 100%);
    background: linear-gradient(90deg, rgba(214,97,89,1) 0%, rgba(233,126,75,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d66159', endColorstr='#e97e4b',GradientType=1 );
}

.LoginScreen .progressCaption {
    font-family:asap-bold;
    color:#fff;
    text-align:center;
    position:relative;
    font-size:18.5px;
    z-index:50;
    padding-top:7px;
}

.LoginScreen.loadingState .inner {
    bottom:0;
}

.LoginScreen.loadingState .loginWrap {
    opacity: 0;
    margin-top: -400px;
}

.LoginScreen.loadingState .progressBar {
    display: block;
    /*bottom: 235px;*/
    opacity: 1;
    top:300px;
}

.LoginScreen.autoLogin .headline, .LoginScreen.autoLogin .loginWrap {
    display: none;
}

.LoginScreen .imageLoadingWrap.loginLoading {
    display:none;
}

.LoginScreen.autoLogin .imageLoadingWrap.loginLoading {
    display: block;
    margin-top:280px;
}

/*** DttMainSelectionScreen ***/
.Main .mainContent > .DttMainSelectionScreen {
    background: #fff;
}

.DttMainSelectionScreen .wrapLeft {
    position: absolute;
    width: 312px;
    height: 625px;
    left: 10px;
    top: 45px;
    height: 600px;
    border: 2px solid #46a0b2;
    font-family: asap-bold;
    font-size: 16px;
    color: #0c889c;
    border-radius:7px;
    min-height:460px;
}

.Main.full .DttMainSelectionScreen .wrapLeft {
    font-size: 24px;
    width:470px;
    left:45px;
    top:45px;
}

.DttMainSelectionScreen.msMobile .wrapLeft {
    right:8px;
    left:8px;
    width:auto;
    min-height:1px;
}

.DttMainSelectionScreen .wrapTop {
    position:absolute;
    top:10px;
    left:336px;
    right:10px;
    background: #e0e0e0; /* grey bg color from eaeaeb */
    border-radius: 10px;
    height:280px;
    padding-top:10px;
}

.Main.full .DttMainSelectionScreen .wrapTop {
    top:45px;
}

.DttMainSelectionScreen .wrapBottom {
    position: absolute;
    left: 336px;
    right:10px;
    background: #e0e0e0; /* grey bg color from eaeaeb */
    border-radius: 10px;
    height:280px;
    padding-top:10px;
}

.Main.full .DttMainSelectionScreen .wrapTop, .Main.full .DttMainSelectionScreen .wrapBottom {
   left:535px;
   right:30px;
}

.Main .DttMainSelectionScreen.msMobile .wrapTop, .Main .DttMainSelectionScreen.msMobile .wrapBottom {
    left: 0;
    right: 0;
    top: 0;
    border-radius: 0;
}

.DttMainSelectionScreen .wrapTop .aBtn, .DttMainSelectionScreen .qwBtn {
    position: absolute;
    right: 20px;
    bottom: 20px;
    font-family: dosis-semibold;
    min-width:150px;
    transition: none;
}

.DttMainSelectionScreen .lcHeadline {
    margin-left: 20px;
    margin-top: 15px;
    margin-right: 10px;

    text-transform: uppercase;
    text-overflow: ellipsis;
    height: 28px;
    white-space: nowrap;
    overflow: hidden;
}

.Main.full .DttMainSelectionScreen .lcHeadline {

    top: 145px;
}

.DttMainSelectionScreen.msMobile .lcHeadline {
    top: 100px;

}

.DttMainSelectionScreen .classesWrap {

    margin-left: 20px;
    margin-right: 10px;
    margin-top: 4px;
    text-align: left;
}

.Main.full .DttMainSelectionScreen .classesWrap {

    top: 180px;
}

.DttMainSelectionScreen.msMobile .classesWrap {

    top: 120px;
}


.DttMainSelectionScreen .classesItem {
    display: inline-block;
    clear: none;
    margin-right: 4px;
    background-color: #93c9d3;
    color: white;
    padding-left: 6px;
    padding-right: 6px;
    border-radius: 4px;
    min-height:26px;
    min-width: 22px;
    padding-top: 6px;
    padding-bottom: 0px;
    text-align: center;
}

.Main.full .DttMainSelectionScreen .classesItem {

    padding-top: 7px;
    padding-bottom: 3px;
}

.Main.mobile .DttMainSelectionScreen .wrapTop .aBtn {

    right: 8px;
    bottom: 8px;
}

.Main.mobile .DttMainSelectionScreen .qwBtn {

    right: 8px;
    bottom: 8px;
}

.DttMainSelectionScreen.msMobile .wrapTop .aBtn, .DttMainSelectionScreen.msMobile .qwBtn {
    left:8px;
}

.Main.full .DttMainSelectionScreen .wrapTop .aBtn, .Main.full .DttMainSelectionScreen .qwBtn {
    width: 150px;
    right: 20px;
    bottom:20px;
}

.DttMainSelectionScreen .DttLearningProgress {
    margin-right: 20px;
}

.DttMainSelectionScreen.msMobile .DttLearningProgress {
    margin-right:8px;
}

.DttMainSelectionScreen .cwuBarWrap {
    margin: 0 20px 0 20px;
    height: 120px;
}

.Main.mobile .DttMainSelectionScreen .cwuBarWrap {
    margin: 0 8px 0 8px;
}

.DttMainSelectionScreen .wrapLeft .headline {

    font-family: "dosis-regular";
    font-size: 31px;
    text-transform: uppercase;
    color: #545454;

    margin-left:20px;
    margin-top:7px;
    margin-right:10px;
}

.Main.full .DttMainSelectionScreen .wrapLeft .headline {
    font-size: 47.5px;
}

.DttMainSelectionScreen .wrapLeft .headline .TranslatableText {
    display: inline;
}

.DttMainSelectionScreen .wrapLeft .headline .name {
    display:inline;
    margin-left:15px;
}

.DttMainSelectionScreen .wrapLeft .FormTextOutput {
    color: #545454;
    float: left;
    margin-left: 9px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.DttMainSelectionScreen .wrapLeft .message {

    position:static;
    margin-left:20px;
    margin-right:10px;
}

.Main.full .DttMainSelectionScreen .wrapLeft .message {

    left: 20px;
    right: 20px;
    top: 80px;
}

.DttMainSelectionScreen.msMobile .wrapLeft .message {
    top:55px;
}

.DttMainSelectionScreen .wrapLeft .ltHeadline {

    text-transform:uppercase;
    margin-left:20px;
    margin-right:10px;
    margin-top:20px;

    text-overflow: ellipsis;
    height: 20px;
}

.DttMainSelectionScreen.msMobile .wrapLeft .ltHeadline {
    top:165px;
}

.DttMainSelectionScreen .wrapLeft .timeWrap {

    margin-top: 4px;
    margin-left: 20px;
    margin-right: 10px;
    color: #545454;
}

.DttMainSelectionScreen.msMobile .wrapLeft .timeWrap {
    top:180px;
}

.Main.full .DttMainSelectionScreen .wrapLeft .ltHeadline {
    top: 240px;
}

.Main.full .DttMainSelectionScreen .wrapLeft .timeWrap {
    top: 275px;
}

.timeWrap .lineWrap {
    width:100%;
    height:36px;
    margin-bottom:10px;
}

.timeWrap .lineWrap:last-child {
    margin-bottom:0;
}

.timeWrap .lineWrap .TranslatableText {
    float:left;
    font-family:asap-regular;
    color:#1e1e1e;
    padding-top:6px;
    min-width:100px;
}

.timeWrap .lineWrap .SimpleDiv {
    float: right;
    border-radius: 3px;
    text-align: center;
    color: #fff;
    background: #93c9d3;
    border: 1px solid #93c9d3;
    border-radius:3px;
    font-family:dosis-semibold;
    font-size:12.5px;
    width:141px;
    padding:6px 0 7px;
}

.Main.full .timeWrap .lineWrap .SimpleDiv {
    font-size: 19px;
    width:210px;
}

.Main.mobile .timeWrap .lineWrap .SimpleDiv {
    width:100%;
    margin-top:4px;
}

.wrapLeft .lsHeadline {

    margin-top: 15px;
    margin-left: 20px;
    margin-right: 10px;
    text-transform: uppercase;
}

.wrapLeft .lastSyncWrap {
    margin-top: 4px;
    margin-bottom: 15px;
    margin-left: 20px;
    margin-right: 10px;
    text-align: left;
    color: black;
    font-family: asap-regular;
}

.teacherInfo {

    margin-top: 15px;
    margin-left:20px;
    margin-right:10px;
}

.DttMainSelectionScreen.msMobile .teacherInfo {

    top: 380px;
}

.Main.full .teacherInfo {
    top:435px;
}

.teacherInfo .tiBlock {
    margin-bottom:20px;
    clear:both;
    color:#1e1e1e;
    font-family:asap-regular;
    position: absolute;
    width: 100%;
    overflow: hidden;
}

.teacherInfo .tiBlockLeft {

    position: absolute;
    width: 38%;
    right: 10px;
    min-height: 200px;
    margin-top: -20px;
}

.teacherInfo .tiBlockLeft img {
    
    position: absolute;
    width: 100%;
    height: 100%;
    max-height: 140px;
    object-fit: contain;
    object-position: top;
}

.teacherInfo .tiBlock .lineWrap {
    clear:both;
    overflow:hidden;
}

.teacherInfo .tiBlock .lineWrap.short {
    width:50%;
}

.teacherInfo .tiBlock .lineWrap.short .SimpleDiv {
    word-break: break-all;
}

.teacherInfo .teacherZip {

    display: none;
}

.teacherInfo .tiBlock:last-child {
    margin-bottom:0;
}

.teacherInfo .subHeadline {
    text-transform:uppercase;
    margin-bottom:4px;
}

.teacherInfo .lineWrap .TranslatableText {
    float:left;
}

.inlineBlock {
    display:inline-block;
}

.lineWrap .inlineBlock + .inlineBlock {
    /* margin-left:4px; */
}

/*** DttExerciseBlockAnalysisScreen ***/
.Main .mainContent > .DttExerciseBlockAnalysisScreen {
    background: #fff;
}

.DttExerciseBlockAnalysisScreen .wrapTop {
    position: relative;
    background: #e0e0e0; /* grey bg color from eaeaeb */
    margin:10px 10px 10px;
    border-radius:10px;
}

.Main.full .DttExerciseBlockAnalysisScreen .wrapTop {
    margin: 45px 45px 30px;
}

.Main.mobile .DttExerciseBlockAnalysisScreen .wrapTop {
    margin:0;
    border-radius:0;
}

.DttExerciseBlockAnalysisScreen .wrapBottom {
    position: relative;
    background: #e0e0e0; /* grey bg color from eaeaeb */
    margin:0 10px 0;
    border-radius:10px;
    padding:10px 0;
}

.Main.full .DttExerciseBlockAnalysisScreen .wrapBottom {
    margin: 0 45px 0;
}

.Main.mobile .DttExerciseBlockAnalysisScreen .wrapBottom {
    margin: 0;
    border-radius: 0;
}

.DttExerciseBlockAnalysisScreen .wrapBottom .DttHeadlineSublineBlock {
    position:absolute;
    left:100px;
}

.DttExerciseBlockAnalysisScreen .cwuBarWrap {
    margin:0 20px 0 20px;
    height:105px;
}

.Main.full .DttExerciseBlockAnalysisScreen .cwuBarWrap {
    height:135px;
}

.Main.mobile .DttExerciseBlockAnalysisScreen .cwuBarWrap {
    margin: 0 10px;
}

.DttExerciseBlockAnalysisScreen .cwuBarWrap.hidden, .DttExerciseBlockAnalysisScreen .emhBlocks.hidden  {
    display:none;
}

.DttExerciseBlockAnalysisScreen .wrapTop .DttHeadlineSublineBlock {
    padding-top:10px;
}

.Main .DttExerciseBlockAnalysisScreen .wrapTop .DttHeadlineSublineBlock > .icon {
    border-radius: 100px;
    color: #f1f1f1;
    text-align: center;
    font-size: 36px;
    width: 43px;
    height: 43px;
    line-height: 43px;
    margin-top: 10px;
}

.Main.full .DttExerciseBlockAnalysisScreen .wrapTop .DttHeadlineSublineBlock > .icon {
    font-size: 54px;
    width: 64px;
    height: 64px;
    line-height: 65px;
    margin-top: 13px;
}

.Main .DttExerciseBlockAnalysisScreen .wrapTop .DttHeadlineSublineBlock > .icon:before {
    margin-left:0;
}

.DttExerciseBlockAnalysisScreen .wrapTop .DttHeadlineSublineBlock.grey > .icon {
    background: #979797;
}

.DttExerciseBlockAnalysisScreen .wrapTop .DttHeadlineSublineBlock.green > .icon {
    background: #89c8a7;
}

.DttExerciseBlockAnalysisScreen .wrapTop .DttHeadlineSublineBlock.gold > .icon {
    background: #ffd700;
}

.DttExerciseBlockAnalysisScreen .qwBtn, .DttExerciseBlockAnalysisScreen .statsBtn {
    position: absolute;
    font-family: dosis-semibold;
    width: 250px;
    -webkit-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.3);
    box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.3);
    bottom: 20px;
    right: 20px;
}

.Main.mobile .DttExerciseBlockAnalysisScreen .qwBtn, .Main.mobile .DttExerciseBlockAnalysisScreen .statsBtn {
    left: 10px;
    right: 10px;
    bottom: 10px;
    width: auto;
}

.DttExerciseBlockAnalysisScreen .wrapBottom .DttLearningProgress {
    margin-right: 20px;
}

/*** DttTestBlockAnalysisScreen ***/

.Main .mainContent > .DttTestBlockAnalysisScreen {
    background: #fff;
}

.DttTestBlockAnalysisScreen .wrapTop {
    position: relative;
    background: #e0e0e0; /* grey bg color from eaeaeb */
    margin: 10px 10px 10px;
    border-radius: 10px;
}

.Main.full .DttTestBlockAnalysisScreen .wrapTop {
    margin: 45px 45px 30px;
}

.Main.mobile .DttTestBlockAnalysisScreen .wrapTop {
    margin:0 0 10px;
    border-radius:0;
}

.DttTestBlockAnalysisScreen .wrapTop .DttHeadlineSublineBlock {
    padding-top:10px;
}

.Main .DttTestBlockAnalysisScreen .wrapTop .DttHeadlineSublineBlock > .icon {
    background: #979797;
    border-radius: 100px;
    color: #f1f1f1;
    text-align: center;
    font-size: 36px;
    width: 43px;
    height: 43px;
    line-height: 43px;
    margin-top: 13px;
}

.Main.full .DttTestBlockAnalysisScreen .wrapTop .DttHeadlineSublineBlock > .icon {
    font-size: 54px;
    width: 64px;
    height: 64px;
    line-height: 65px;
    margin-top: 13px;
}

.Main .DttTestBlockAnalysisScreen .wrapTop .DttHeadlineSublineBlock > .icon:before {
    margin-left:0;
}

.DttStatisticsScreen .DttHeadlineSublineBlock > .icon:before {
    margin-left: 0;
}

.DttTestBlockAnalysisScreen .wrapBottom {
    position: relative;
    background: #e0e0e0; /* grey bg color from eaeaeb */
    margin: 0 10px 0;
    border-radius: 10px;
    padding: 10px 0;
}

.Main.full .DttTestBlockAnalysisScreen .wrapBottom {
    margin: 0 45px 0;
}

.Main.mobile .DttTestBlockAnalysisScreen .wrapBottom {
    margin:0;
    border-radius:0;
}

.DttTestBlockAnalysisScreen .analysisContent {
    position:relative;
    margin:0 8px;
}

.Main.full .DttTestBlockAnalysisScreen .analysisContent {
    margin:0 20px;
}

.Main.mobile .DttTestBlockAnalysisScreen .analysisContent {
    margin:0 8px;
}

.DttTestBlockAnalysisScreen .btnsWrap {
    float:right;
    margin-right:8px;
}

.Main.full .DttTestBlockAnalysisScreen .btnsWrap {
    margin-right: 20px;
}

.Main.mobile .DttTestBlockAnalysisScreen .btnsWrap {
    margin:0;
    width:100%;
}

.DttTestBlockAnalysisScreen .btnsWrap .DttButton {
    float:left;
    width:260px;
    margin:0 15px 24px 0;
}

.DttTestBlockAnalysisScreen .btnsWrap .DttButton:nth-child(2) {
    margin-right:0;
}

.Main.mobile .DttTestBlockAnalysisScreen .btnsWrap .DttButton {
    float:none;
    margin:0 8px 10px;
    width:auto;
}

/*
.DttTestBlockAnalysisScreen .btnsWrap .DttButton .caption {
    font-family: dosis-semibold;
    font-size: 11px;
}

.Main.full .DttTestBlockAnalysisScreen .btnsWrap .DttButton .caption {
    font-family: dosis-semibold;
    font-size: 16px;
}*/

.DttTestBlockAnalysisScreen .btnsWrap .DttButton:last-child {
    margin-right:0;
}

.DttTestBlockAnalysisScreen .wrapTop .aBtn {
    position: absolute;
    right: 30px;
    bottom: 10px;
    font-family: dosis-semibold;
    width: 250px;
    -webkit-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.3);
    box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.3);
}

.DttTestBlockAnalysisScreen .wrapBottom .DttHeadlineSublineBlock {
    position: absolute;
    left: 100px;
}

.DttTestBlockAnalysisScreen .DttLearningProgress {
    margin-right: 8px;
}

.Main.full .DttTestBlockAnalysisScreen .DttLearningProgress {
    margin-right: 20px;
}

.DttTestBlockAnalysisScreen .statsBtn {
    position: absolute;
    font-family: dosis-semibold;
    width: 250px;
    -webkit-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.3);
    box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.3);
    bottom: 20px;
    right: 20px;
}

.Main.mobile .DttTestBlockAnalysisScreen .statsBtn {
    left: 10px;
    right: 10px;
    bottom: 10px;
    width: auto;
}

/*
.DttTestBlockAnalysisScreen .cwuBarWrap {
    margin: 0 30px 0 20px;
}*/

/*** DttAllExerciseBlocksCompletedScreen ***/

.Main .mainContent > .DttAllExerciseBlocksCompletedScreen {
    background: #fff;
}

.DttAllExerciseBlocksCompletedScreen .wrapTop {
    position: relative;
    background: #e0e0e0; /* grey bg color from eaeaeb */
    margin: 45px 45px 30px;
    border-radius: 10px;
    padding: 15px 0 15px 0;
}

.DttAllExerciseBlocksCompletedScreen .wrapBottom {
    position: relative;
    background: #e0e0e0; /* grey bg color from eaeaeb */
    margin: 0 45px 0;
    border-radius: 10px;
    height: 200px;
    padding: 10px 0;
}

.DttAllExerciseBlocksCompletedScreen .wrapBottom .DttHeadlineSublineBlock {
    position: absolute;
    left: 100px;
}

.DttAllExerciseBlocksCompletedScreen .qwBtn {
    position:absolute;
    right:26px;
    bottom:22px;
    font-family: dosis-semibold;
    width: 250px;
    -webkit-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.3);
    box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.3);
}

.DttAllExerciseBlocksCompletedScreen .wrapTop .DttHeadlineSublineBlock > .icon {
    background: #ffd700;
    border-radius:100px;
    color:#fff;
    text-align:center;
    line-height:70px;
}

/*** DttAdditionalSelectionScreen ***/

.Main .mainContent > .DttAdditionalSelectionScreen {
    background: #fff;
}

.Main .mainContent > .DttAdditionalSelectionScreen .inner {
    top:10px;
    left:20px;
}

.Main.full .mainContent > .DttAdditionalSelectionScreen .inner {
    top: 45px;
    left: 46px;
}

.Main .DttAdditionalSelectionScreen .DttButton {
    width: 185px;
    height: 190px;
    background: #d6ebee;
    color: #318fa2;
    float: left;
    margin: 0 25px 30px 0;
    -webkit-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.3);
    box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.3);
}

.Main.full .DttAdditionalSelectionScreen .DttButton {
    width: 250px;
    height: 255px;
}

.Main.mobile .DttAdditionalSelectionScreen .DttButton:nth-child(2n) {
    /* margin-right:0; */
}

.Main .DttAdditionalSelectionScreen .DttButton.hl {
    color: #fff;
    background: #3290a3;
    background: -moz-linear-gradient(left, #3290a3 0%, #3290a3 50%, #3290a3 51%, #4dafbc 100%);
    background: -webkit-linear-gradient(left, #3290a3 0%,#3290a3 50%,#3290a3 51%,#4dafbc 100%);
    background: linear-gradient(to right, #3290a3 0%,#3290a3 50%,#3290a3 51%,#4dafbc 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3290a3', endColorstr='#4dafbc',GradientType=1 );
}

.DttAdditionalSelectionScreen .DttButton.hoverClass:not(.disabled) {
    opacity:0.9;
}

.DttAdditionalSelectionScreen .DttButton .caption {

    top: 34px !important;
}
/*
.DttAdditionalSelectionScreen .DttButton.activeClass {
    -webkit-box-shadow: inset 2px 2px 2px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: inset 2px 2px 2px 0px rgba(0,0,0,0.3);
    box-shadow: inset 2px 2px 2px 0px rgba(0,0,0,0.3);
}

.Main .DttAdditionalSelectionScreen .DttButton.hoverClass .innerBtn {
    opacity: 0;
}*/
.DttAdditionalSelectionScreen .DttButton.withIcon .caption {
    font-size: 23px;
    font-family: dosis-regular;
    position: absolute;
    white-space: normal;
    bottom: 0;
    left: 40px;
    right: 40px;
    margin-top: 40px;
}

.Main.full .DttAdditionalSelectionScreen .DttButton.withIcon .caption {
    font-size: 34px;
    margin-top: 60px;
    left:50px;
    right:50px;
}

.Main .DttAdditionalSelectionScreen .DttButton.withIcon .icon {
    font-size: 66px;
    position: absolute;
    left:50%;
    margin-left:-33px;
}

.Main.full .DttAdditionalSelectionScreen .DttButton.withIcon .icon {
    font-size: 99px;
    margin-left:-50px;
}

/*** BlockScreen ***/

.BlockScreen {
    background-color: green;
}

.BlockScreen.testMode {
    background-color:#d3f6da;
}

.BlockScreen.exerciseMode {
    background-color:#fff;
}

.BlockScreen .questionTitle {
    font-family:Arial;
    font-size:16px;
    color:#0b333c;
    position:absolute;
    top:0;
    left:7px;
    font-weight:bold;
}

/* 12px */

.Main.full .BlockScreen .questionTitle {
    font-size: 24px;
}

/* 18px */

.Main .BlockScreen.testMode .content.bsSmall .questionTitle {
    font-size:13px;
}

.Main .BlockScreen.testMode .content.bsVerySmall .questionTitle {
    font-size:11px;
}

.Main.mobile .BlockScreen.testMode .questionTitle {
    margin-top:0;
    right:8px;
}

.BlockScreen.exerciseMode .questionTitle {
    font-family: asap-bold;
    font-weight: normal;
    font-size: 16px;
    color: #323232;
    position: absolute;
    top: 25px;
    left: 45px;
    right: 10px;
}

.Main.full .BlockScreen.exerciseMode .questionTitle {
    font-size:24px;
}

.Main .BlockScreen.exerciseMode .content.bsSmall .questionTitle {
    font-size:13px;
}

.Main .BlockScreen.exerciseMode .content.bsVerySmall .questionTitle {
    font-size: 11px;
}

.BlockScreen .questionTitle table {
    width:100%;
    table-layout:fixed;
    margin-top:10px;
}

.BlockScreen .questionTitle table tr td {
    word-wrap: break-word;
    vertical-align:top;
}

.BlockScreen .questionTitle table tr:nth-child(1) td {
    text-align:center;
}

.BlockScreen .testMenuBar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 38px;
    z-index: 49;
    background: #379149;
    color: #fff;
    font-family:Arial;
    font-weight:bold;
    font-size:12px;
    text-align:center;
}

.inset .BlockScreen .testMenuBar {
    position: absolute;
    top: -38px;
    height: 76px;
}

.insetHalf .BlockScreen .testMenuBar {
    position: absolute;
    top: -32px;
    height: 76px;
}

.Main.full .BlockScreen .testMenuBar {
    font-size: 18px;
    height: 52px;
}

.BlockScreen .testMenuBar .testMenuTabTitle {
    position:absolute;
    left:8px;
    top:12px;
}

.inset .BlockScreen .testMenuBar .testMenuTabTitle {
    top:50px;
}

.insetHalf .BlockScreen .testMenuBar .testMenuTabTitle {
    top:50px;
}

.Main.full .BlockScreen .testMenuBar .testMenuTabTitle {
    left:13px;
    top: 18px;
}

.BlockScreen .testMenuBar .testMenuName {
    display:inline-block;
    padding-top:6px;
}

.inset .BlockScreen .testMenuBar .testMenuName {
    padding-top:44px;
}

.insetHalf .BlockScreen .testMenuBar .testMenuName {
    padding-top:44px;
}

.BlockScreen .testMenuBar .testMenuPoints {
    position:absolute;
    right:65px; /*54*/
    top:12px;
}

.inset .BlockScreen .testMenuBar .testMenuPoints {
    top:50px;
}

.insetHalf .BlockScreen .testMenuBar .testMenuPoints {
    top:50px;
}

.Main.full .BlockScreen .testMenuBar .testMenuPoints {
    right: 130px;
    top: 18px;
}

.BlockScreen .testMenuBar .testMenuPointsWrap {
    position:absolute;
    right: 48px; /*32*/
    top: 12px;
}

.inset .BlockScreen .testMenuBar .testMenuPointsWrap {
    top: 50px;
}

.insetHalf .BlockScreen .testMenuBar .testMenuPointsWrap {
    top: 50px;
}

.Main.full .BlockScreen .testMenuBar .testMenuPointsWrap {
    right:102px;
    top: 18px;
}

.BlockScreen.testMode .testMenuBar .testMenuQUID, .BlockScreen.testMode .testMenuBar .testTime {
    display: none;
    position: absolute;
    right: 120px;
    top: 12px;
}

.Main.full .BlockScreen.testMode .testMenuBar .testMenuQUID, .Main.full .BlockScreen.testMode .testMenuBar .testTime {
    right: 220px;
    top: 18px;
}

.inset .BlockScreen.testMode .testMenuBar .testMenuQUID, .inset .BlockScreen.testMode .testMenuBar .testTime {
    top: 50px;
}

.insetHalf .BlockScreen.testMode .testMenuBar .testMenuQUID, .insetHalf .BlockScreen.testMode .testMenuBar .testTime {
    top: 50px;
}

.BlockScreen.testMode .testMenuBar .testTime {display: block;}

.BlockScreen.testMode.reviewMode .testMenuBar .testMenuQUID {display:block;}
.BlockScreen.testMode.reviewMode .testMenuBar .testTime {display:none;}

.BlockScreen.exerciseMode .testMenuBar {
    display:none;
}

.BlockScreen.exerciseMode .content {
    background:#ededed;
    border-radius:5px;
    left:10px;
    right:10px;
    bottom:41px;
}

.Main.full .BlockScreen.exerciseMode .content {
    bottom: 90px;
    left: 43px;
    right: 43px;
    top:50px;
}

.Main.mobile .BlockScreen.exerciseMode .content {
    left:0;
    right:0;
    top:0;
}

.BlockScreen.rebuilding .content .inner {
    visibility: hidden;
}

.BlockScreen.rebuilding .eAddBtns {
    visibility: hidden;
    display: none;
}

.BlockScreen .content .imageWrap {
    position: absolute;
    top: 65px;
    left: 25px;
    width: 460px;
    height: 345px;
    z-index: 50;
}



.BlockScreen .content .imageWrap img {
    width:100%;
    height:auto;
    cursor: pointer;
    object-fit: contain;

    cursor: -webkit-pointer;
}

.BlockScreen.testMode .content .imageWrap img.noimage {
    visibility:hidden;
}

.BlockScreen.exerciseMode .content .imageWrap {
    top: 145px;
    left: 45px;
    width: 590px;
    height: 365px;
    height: auto;
    z-index: 45;
    overflow: hidden;
}

.BlockScreen.exerciseMode .content .imageWrap img {
    border-radius: 4px;
}

.BlockScreen.exerciseMode .reviewed .imageWrap img {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}


.Main.mobile .BlockScreen.exerciseMode .reviewed .imageWrap img {
    border-radius: 4px;
}

.BlockScreen .subSegmentContainer {

    width: 101%;
}

.imageLoadingWrap {
    position: absolute;
    left: 50%;
    top: 50%;
    /* margin-top: -40px;
    margin-left: -40px; */
    z-index:10;
}

.ModalContainer .imageLoadingWrap {
    z-index:20;
}

.Main.mainWrap .imageLoadingWrap img {
    width:80px;
    height:80px;
    position:absolute;
    top:50%;
    left:50%;
    margin:-40px 0 0 -40px;
}

.imageLoadingWrap:not(.hidden) img {
    animation-name: rotate;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -webkit-animation-name: rotate;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;

    will-change: transform, -webkit-transform;
}

@keyframes rotate {
    from {transform: rotate(360deg);}
    to {transform: rotate(0deg);}
}

@-webkit-keyframes rotate {
    from { -webkit-transform: rotate(360deg); }
    to { -webkit-transform: rotate(0deg); }
}

.imageLoadingWrap.hidden {
    display:none;
}

.BlockScreen .imageSubline {
    color:#323232;
    font-family:asap-regular;
    font-size:12.5px;
    position:absolute;
    left:45px;
    top:509px;
}

.BlockScreen.testMode .imageLoadingWrap {
    background: #d3f6da;
}

.BlockScreen.exerciseMode .imageLoadingWrap {
    background: #ededed;
}

.BlockScreen.exerciseMode.biggerNav .content {

    bottom: 63px;

}

.bottomInset .BlockScreen.exerciseMode.biggerNav .content {

    bottom: 80px;

}

.BlockScreen.exerciseMode.biggerNav .navBtns {

    bottom: 75px;
}

.bottomInset .BlockScreen.exerciseMode.biggerNav .navBtns {

    bottom: 92px;
}

.BlockScreen.exerciseMode.biggerNav .navWrap {
    bottom: 0px;
}

.BlockScreen.exerciseMode.biggerNav .blockUiNav {
    height: 40px;
    left: 73px !important;
    right: 75px !important;
}

.BlockScreen.exerciseMode.biggerNav .TestNavigationButton input {
    width: 40px;
    height: 40px;
}

.BlockScreen.exerciseMode.biggerNav .DttButton.scrollNav {
    width: 40px;
    height: 40px;
}

.BlockScreen.exerciseMode.biggerNav .DttButton.scrollNav .icon {
    font-size: 42px;
}

.ofHidden {
    overflow-x:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.Main.full .BlockScreen .imageSubline {
    font-size:18.5px;
}

.BlockScreen.testMode .imageSubline {
    font-family:Arial;
    top:351px;
    left:25px;
    color:#0b333c;
}

.BlockScreen .imageSubline.empty {
    display:none;
}

.BlockScreen .eAddBtns {
    position:absolute;
    top:509px;
    left:544px;
    z-index:100;
}

.BlockScreen .eAddBtns .DttButton.withIcon {
    background:none;
    width:30px;
    float:left;
    margin-right:0;
}

.Main.full .BlockScreen .eAddBtns .DttButton.withIcon {
    width: 40px;
    margin-right: 8px;
}

.BlockScreen .eAddBtns .DttButton.withIcon:last-child {
    margin-right:0;
}

.BlockScreen .eAddBtns .DttButton.withIcon .icon {
    font-size:27px;
    color:#2493a6;
    line-height:30px;
    position:relative;
    top:auto;
    left:auto;
    right:auto;
    bottom:auto;
}

.Main.full .BlockScreen .eAddBtns .DttButton.withIcon .icon {
    font-size: 40px;
    color: #2493a6;
    line-height: 30px;
}

.BlockScreen.testMode .eAddBtns {
    display:none;
}

.BlockScreen .eAddBtns.eAddBg {
    background: #ededed;
}

.BlockScreen .eAddBtns.eAddBg .DttButton.withIcon {
    height:25px;
}

.BlockScreen .eAddBtns.eAddBg .DttButton.withIcon .icon {
    line-height:21px;
}

.BlockScreen .DttNumPad {
    position:absolute;
    bottom:90px;
    right:35px;
    display:none;
    z-index:60;
    white-space: nowrap;
}

.BlockScreen .DttNumPad.shown {
    display:block;
}

.Main.mobile .BlockScreen .DttNumPad, .BlockScreen .DttNumPad.npShown {
    display:none;
}

.BlockScreen.testMode .DttNumPad {
    right:85px;
    bottom:auto;
    top:170px;

}

.Main.full .BlockScreen.testMode .DttNumPad {
    right:50%;
    top:50%;
    margin-top:-120px;
    margin-bottom:0;
    bottom: auto;
}

.BlockScreen .textInput, .BlockScreen .reviewText {
    background:#fff;
    border:3px solid #797979;
    border-radius:5px;
    min-width:55px;
    float:left;
    height:30px;
    padding:7px 7px 0 7px;
    color:#797979;
    font-family: "asap-bold";
    font-size: 12px;
}

.BlockScreen.exerciseMode .textInput, .BlockScreen.exerciseMode .reviewText {
    font-family: asap-regular;
    color: #323232;
    font-size: 16px;
    padding: 2px 0 1px 6px;
    min-width: 40px;
    height: 20px;
}

.Main.full .BlockScreen.exerciseMode .textInput, .Main.full .BlockScreen.exerciseMode .reviewText {
    font-size:24px;
    min-width:80px;
    height:30px;
}

.BlockScreen.testMode .textInput {
    font-family:Arial;
    font-weight:bold;
    color:#0b333c;
    float:right;
    clear:both;
    margin:-18px 75px 0 0;
    height:14px;
    border-radius:0;
    border:1px solid #c9cbcc;
    line-height:7px;
}

.Main.mobile .BlockScreen.testMode .textInput {
    margin-right:50px;
}

.Main.full .BlockScreen.testMode .textInput {
    font-size: 18.5px;
    height: 14px;
    padding: 10px 10px 0 10px;
    min-width: 80px;
}

.Main.full .BlockScreen.testMode .reviewed .textInput {
    margin-top:5px;
    padding-top:8px;
    height:13px;
}

.BlockScreen .textInput {
    clear:left;
    margin: 0 0 16px;
}

.BlockScreen .textInput.focused {
    border-color:#d6655d;
}

.BlockScreen .textInput.focused:after {
    content: "|";
    color: #323232;
    animation: 1s blink step-end infinite;
    -webkit-animation: 1s blink step-end infinite;
}

@keyframes blink {
    from, to {color: transparent;}
    50% {color: #000;}
}

@-webkit-keyframes blink {
    from, to {color: transparent;}
    50% {color: #000;}
}

.BlockScreen.testMode .textInput.focused {
    border-color:#379149;
}

.BlockScreen .qSubline {
    font-family:asap-regular;
    font-size:24.5px;
    color:#323232;
    width:100%;
    /*height:50px;*/
}

.BlockScreen.testMode .qSubline {
    font-family: Arial;
    color: #0b333c;
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 20px;
    min-height: 19px;
}

.BlockScreen.testMode .content.bsSmall .qSubline {
    font-size: 13px;
}

.BlockScreen.testMode .content.bsVerySmall .qSubline {
    font-size: 11px;
}

/* 12px

    min-height - 13px
*/

.Main.full .BlockScreen.testMode .qSubline {
    font-size: 18.4px;
    margin-bottom: 20px;
    min-height: 19px;
}

.Main .BlockScreen .qSubline.smallMargin {
    margin-bottom:3px;
}

.BlockScreen.testMode .reviewed:not(.mco) .qSubline {
    margin-bottom:17px;
}

.BlockScreen.exerciseMode .qSubline {
    font-size:15px;
    margin-bottom:20px;
    min-height:19px;
}

.BlockScreen.exerciseMode .content.bsSmall .qSubline {
    font-size:13px;
}

.BlockScreen.exerciseMode .content.bsVerySmall .qSubline {
    font-size: 11px;
}

.Main.full .BlockScreen.exerciseMode .qSubline {
    font-size: 22.5px;
}

.Main .BlockScreen.exerciseMode .qSubline.empty, .Main .BlockScreen.testMode .qSubline.empty {
    min-height: 5px;
    margin-bottom: 5px;
}

.Main .BlockScreen.exerciseMode .qSubline.smallMargin.empty, .Main .BlockScreen.testMode .qSubline.smallMargin.empty {
    margin-bottom: 3px;
}

.Main.full .BlockScreen.testMode .mco.reviewed .qSubline.empty {
    min-height: 5px;
    margin-bottom: 5px;
}

.Main.mobile .BlockScreen .content.bsMin .qSubline, .Main.mobile .BlockScreen .content.bsSmall .qSubline, .Main.mobile .BlockScreen .content.bsVerySmall .qSubline {
    min-height: 5px;
    margin-bottom: 3px;
}

.BlockScreen.testMode .qText1, .BlockScreen.testMode .qText2, .BlockScreen.testMode .qText3 {
    font-family:Arial;
    font-size:12.1px;
    color:#0b333c;
    position:absolute;
    text-align:left;
}

.Main.full .BlockScreen.testMode .qText1, .Main.full .BlockScreen.testMode .qText2, .Main.full .BlockScreen.testMode .qText3 {
    font-size: 18.4px;
}

.BlockScreen.testMode .qText1 {
    margin-top: -11px;
}

.Main.full .BlockScreen.testMode .qText1 {
    margin-top: -21px;
}

/*
.Main.mobile .BlockScreen.testMode .qText1 {
    right:130px;
}



.Main .BlockScreen.testMode .reviewed .qText1 {
    top:21px;
}*/

.BlockScreen.testMode .qText2 {
    clear: both;
    margin: -25px 0 0 0;
    left:84px;
    white-space:nowrap;
}


.Main.full .BlockScreen.testMode .qText2 {
    left: 115px;
}

.BlockScreen.testMode .qText3 {
    margin-top:10px;
    left:84px;
    white-space:nowrap;
}


.Main.full .BlockScreen.testMode .qText3 {
    left: 115px;
}

.BlockScreen.exerciseMode .qText1, .BlockScreen.exerciseMode .qText2, .BlockScreen.exerciseMode .qText3 {
    font-size:16px;
    color:#323232;
    font-family:asap-regular;
    float:left;
    margin:4px 0 0 4px;
}

.BlockScreen.exerciseMode .content.bsSmall .qText1, .BlockScreen.exerciseMode .content.bsSmall .qText2, .BlockScreen.exerciseMode .content.bsSmall .qText3 {
    font-size:10px;
}

.BlockScreen.exerciseMode .content.bsVerySmall .qText1, .BlockScreen.exerciseMode .content.bsVerySmall .qText2, .BlockScreen.exerciseMode .content.bsVerySmall .qText3 {
    font-size:10px;
}

.Main.full .BlockScreen.exerciseMode .qText1, .Main.full .BlockScreen.exerciseMode .qText2, .Main.full .BlockScreen.exerciseMode .qText3 {
    font-size: 22.5px;
}

.BlockScreen.exerciseMode .qText1 {
    position:absolute;
    margin-top:-40px;
}

.BlockScreen.exerciseMode .bsMin .qText1, .BlockScreen.exerciseMode .bsSmall .qText1, .BlockScreen.exerciseMode .bsVerySmall .qText1 {
    margin-top: -35px;
}

.BlockScreen.exerciseMode .qText2 {
    clear:both;
    margin:-10px 0 10px;
}

.BlockScreen.testMode .tiWrap {
    position:relative;
    float:left;
    clear:both;
    margin-bottom:6px;
}

.BlockScreen.testMode .reviewed .tiWrap {
    float:left;
}

.BlockScreen.reviewMode .questionsRemaining {
    display:none;
}

/*** TestCreationTestScreen ***/

.TestCreationTestScreen {
    padding: 0;
    margin: 0;

    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.TestCreationTestScreen .header {

    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 170px;

    background-color: dimgray;
    padding: 12px;
}

.TestCreationTestScreen .content {
    position: absolute;
    top: 190px;
    left: 0;
    right: 0;
    bottom: 0px;
    background-color: white;
    padding: 12px;

    color: black;

    overflow-y: scroll;
}

.TestCreationTestScreen .buttons {

    margin-top: 12px;
}

/*** DttStatisticsScreen ***/

.Main .mainContent > .DttStatisticsScreen {
    background: #fff;
}

.DttStatisticsScreen .DttHeadlineSublineBlock {
    width: 100%;
    background: #e0e0e0; /* grey bg color */
    margin-bottom:0;
    padding: 23px 0 32px 0;
}

.Main.full .DttStatisticsScreen .DttHeadlineSublineBlock {
    margin-bottom:0;
}

.DttStatisticsScreen .TabView {
    position:absolute;
    top:47px;
    left:10px;
    right:10px;
}

.Main.full .DttStatisticsScreen .TabView {
    left: 45px;
    right: 45px;
    top: 103px;
}

.DttStatisticsScreen.mobile .TabView {
    left:0;
    right:0;
}

.Main.mobile .DttStatisticsScreen .TabView {
    top:78px;
}

.DttStatisticsScreen .classesWrap {
    position:absolute;
    right:10px;
    top:19px;
}

.Main.full .DttStatisticsScreen .classesWrap {
    right: 45px;
    top: 57px;
}

.DttStatisticsScreen.mobile .classesWrap {
    right:auto;
    left:10px;
    top:10px;
}

.DttStatisticsScreen .classesWrap .classesItem {
    color:#fff;
    font-family:asap-bold;
    background:#2795a7;
    border-radius:5px;
    width:20px;
    height:20px;
    float:left;
    margin:0 8px 0 0;
    text-transform:uppercase;
    font-size:9px;
    line-height:18px;
    text-align:center;
}

.DttStatisticsScreen .classesWrap .classesItem.mofa {
    width:30px;
}

.Main.full .DttStatisticsScreen .classesWrap .classesItem {
    width: 30px;
    height: 30px;
    font-size: 12px;
    line-height: 28px;
}

.Main.full .DttStatisticsScreen .classesWrap .classesItem.mofa {
    width:40px;
}

.DttStatisticsScreen .classesWrap .classesItem:last-child {
    margin-right:0;
}

.DttStatisticsScreen .tabBar {
    position:absolute;
    left:10px;
    top:9px;
}

.Main.full .DttStatisticsScreen .tabBar {
    left: 45px;
    top: 43px;
}

.DttStatisticsScreen.mobile .tabBar {
    left:0;
    right:0;
    top:40px;
}

.DttStatisticsScreen .tabBar .DttButton {
    margin-right:4px;
    width:137px;
    height:38px;
    min-width:1px;
}

.DttStatisticsScreen .tabBar .DttButton:last-child {
    margin-right:0;
}

.Main.full .DttStatisticsScreen .tabBar .DttButton {
    height:60px;
    width:205px;
}

.DttStatisticsScreen .DttTabBar .DttButton .caption {
    text-align:left;
    padding-left:13px;
    font-size:10.7px;
}

.DttStatisticsScreen.mobile .DttTabBar .DttButton:nth-child(1) {
    border-top-left-radius: 0;
}

.DttStatisticsScreen.mobile .DttTabBar .DttButton:nth-child(3) {
    border-top-right-radius: 0;
}

.DttStatisticsScreen.mobile .DttTabBar .DttButton:nth-child(1) .caption {
    text-align:right;
}

.DttStatisticsScreen.mobile .DttTabBar .DttButton:nth-child(3) .caption {
    text-align: left;
}

.Main.full .DttStatisticsScreen .DttTabBar .DttButton .caption {
    text-align: left;
    padding-left: 20px;
    font-size: 15.8px;
}

.DttStatisticsScreen .lpBarWrap {
    background: #e0e0e0; /* grey bg color */
    border-radius:4px;
    padding-top:23px;
}

.DttStatisticsScreen .lpBarWrap .DttLearningProgress {
    margin-right:20px;
}

.Main.mobile .DttStatisticsScreen .lpBarWrap .DttLearningProgress {
    margin-right:8px;
}

.DttStatisticsScreen .lpBarWrap .DttHeadlineSublineBlock {
    padding:0;
}

.Main .DttStatisticsScreen .DttHeadlineSublineBlock > .icon {
    background: #979797;
    border-radius: 100px;
    color: #f1f1f1;
    text-align: center;
    font-size: 42px;
    width: 48px;
    height: 48px;
    line-height: 48px;
    margin-top: 13px;
}

.Main.full .DttStatisticsScreen .DttHeadlineSublineBlock > .icon {
    font-size: 54px;
    width: 64px;
    height: 64px;
    line-height: 65px;
    margin-top: 13px;
}

.Main .DttStatisticsScreen .DttHeadlineSublineBlock > .icon:before {
    margin-left: 4px;
}

.Main.full .DttStatisticsScreen .DttHeadlineSublineBlock > .icon:before {
    margin-left: 0;
}

.DttStatisticsScreen .timeWrap {
    position: absolute;
    left: 0;
    right: 0;
    border: 2px solid #46a0b2;
    border-radius: 5px;
    padding:22px 0 0 23px;
}

.DttStatisticsScreen.mobile .timeWrap {
    padding:10px;
    left:8px;
    right:8px;
}

.DttStatisticsScreen .timeWrap .timeHeader {
    font-family:asap-bold;
    color:#545454;
    font-size:16.5px;
    text-transform:uppercase;
    margin-bottom:70px;
}

.DttStatisticsScreen.mobile .timeWrap .timeHeader {
    display:none;
}

.DttStatisticsScreen .timeWrap .blockWrap .TranslatableText {
    font-family: asap-regular;
    float:left;
    color:#545454;
    font-size:16px;
    margin-top:2px;
}

.Main.full .DttStatisticsScreen .timeWrap .blockWrap .TranslatableText {
    font-size:22px;
}

.DttStatisticsScreen .timeWrap .blockWrap .SimpleDiv {
    float:left;
    background:#93c9d3;
    border-radius:5px;
    font-family: dosis-semibold;
    font-size:16px;
    width:115px;
    color:#fff;
    text-align:center;
    margin:0 0 0 13px;
}

.DttStatisticsScreen.mobile .timeWrap .blockWrap .SimpleDiv {
    float:right;
}

.Main.full .DttStatisticsScreen .timeWrap .blockWrap .SimpleDiv {
    font-size:23.5px;
    width:170px;
}

.DttStatisticsScreen .timeWrap .blockWrap {
    position:absolute;
    top:60px;
}

.DttStatisticsScreen .timeWrap .blockWrap:nth-child(1) {
    left:23px;
}

.DttStatisticsScreen .timeWrap .blockWrap:nth-child(2) {
    left:50%;
    margin-left:-82px;
}

.Main.full .DttStatisticsScreen .timeWrap .blockWrap:nth-child(2) {
    margin-left:-155px;
}

.DttStatisticsScreen .timeWrap .blockWrap:nth-child(3) {
    right:20px;
}

.DttStatisticsScreen.mobile .timeWrap .blockWrap {
    position:relative;
    top:auto;
    left:auto;
    height:23px;
    right:auto;
    margin:0 0 8px;
}

.DttStatisticsScreen .bottomWrap {
    position: absolute;
    top: 455px;
    left: 0;
    right: 0;
    color: #545454;
    text-transform:uppercase;
    font-size:18px;
}

.DttStatisticsScreen .snWrap {
    float:left;
    border: 2px solid #46a0b2;
    border-radius:5px;
    padding:10px 0;
    font-size:12.5px;
    min-height:16px;
}

.Main.full .DttStatisticsScreen .snWrap {
    font-size: 18.5px;
    min-height: 22px;
}

.DttStatisticsScreen.mobile .snWrap {
    float:none;
    margin-bottom:10px;
    margin-left:8px;
    margin-right:8px;
}

.DttStatisticsScreen .snWrap .schoolName {
    font-family:asap-bold;
    text-align:center;
}

.DttStatisticsScreen .ltWrap {
    float: right;
    border: 2px solid #46a0b2;
    border-radius: 5px;
    text-align: center;
    padding: 10px 0;
    min-height: 16px;
    font-size: 12.5px;
    font-family:asap-bold;
}

.Main.full .DttStatisticsScreen .ltWrap {
    font-size: 18.5px;
    min-height: 22px;
}

.DttStatisticsScreen.mobile .ltWrap {
    float: none;
    margin-left: 8px;
    margin-right: 8px;
}

.DttStatisticsScreen .ltWrap .TranslatableText {
    margin-right:5px;
}

.DttStatisticsScreen .ltWrap .TranslatableText, .DttStatisticsScreen .ltWrap .startTime {
    display:inline-block;
}

.DttStatisticsScreen .testsWrap .testWrap {
    background: #e0e0e0; /* grey bg color */
    margin: 0 0 5px;
    color: #545454;
    padding: 20px;
    padding-bottom: 32px;
    position:relative;
}

.Main.mobile .DttStatisticsScreen .testsWrap .testWrap {
    padding-left:8px;
    padding-right:8px;
}

.testWrap .segmentDate {
    font-weight: bold;
    font-size: 18px !important;
    margin-bottom: 22px;
    margin-top: 30px;
    padding-top: 25px;
    border-top-color: white;
    border-top-width: 4px;
    border-top-style: solid;
    color: #333333;
    margin-left: -8px;
    margin-right: -8px;
    padding-left: 8px;
    padding-right: 8px;
}



.cwuTests {
    border-top-color: black;
    border-top-style: none;
    border-top-width: 1px;
}

.DttStatisticsScreen .testWrap .segmentDate {
    border-top-style: none;
    margin-top: 0px;
    padding-top: 20px;
}

.Main.full .testWrap .segmentDate {
    font-size: 18px !important;
    margin-bottom: 30px;
    margin-top: 0px;
    padding-top: 25px;
    border-top-color: white;
    border-top-width: 6px;
    border-top-style: solid;
}

.Main.full .DttStatisticsScreen .testWrap .segmentDate {

    border-top-style: none;
}

.DttStatisticsScreen .byCategoryWrap .lineWrap {
    background: #e0e0e0; /* grey bg color */
    margin-bottom: 5px;
    position:relative;
}

.DttStatisticsScreen .byCategoryWrap .idWrap {
    color: #545454;
    font-family:asap-regular;
    font-size:16px;
    display:block;
    float:left;
    margin:39px 5px 39px 25px;
    overflow:hidden;
}

.Main.full .DttStatisticsScreen .byCategoryWrap .idWrap {
    font-size:24px;
}

.Main .DttStatisticsScreen .byCategoryWrap .idWrap.empty {
    margin-bottom:0;
}

.DttStatisticsScreen .byCategoryWrap .nameWrap {
    color: #545454;
    font-family: asap-regular;
    font-size: 16px;
    display: inline-block;
    text-transform: uppercase;
    margin: 39px 0;
    width:230px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.DttStatisticsScreen .byCategoryWrap .nameWrap.mofaName {
    width:190px;
}

.Main.full .DttStatisticsScreen .byCategoryWrap .nameWrap {
    font-size:24px;
    width:430px;
}

.Main.full .DttStatisticsScreen .byCategoryWrap .nameWrap.mofaName {
    width:350px;
}

.DttStatisticsScreen.mobile .byCategoryWrap .idWrap {
    margin:30px 5px 105px 8px;
}

.DttStatisticsScreen.mobile .byCategoryWrap .nameWrap {
    margin:30px 0 105px;
}

.DttStatisticsScreen .byCategoryWrap .DttCorrectWrongUnansweredBar {
    position:absolute;
    right:68px;
    left:285px;
    top:22px;
    bottom:22px;
}

.DttStatisticsScreen.mobile .byCategoryWrap .DttCorrectWrongUnansweredBar {
    left:8px;
    right:8px;
    top:70px;
}

.Main.full .DttStatisticsScreen .byCategoryWrap .DttCorrectWrongUnansweredBar {
    left:485px;
}

.Main .DttStatisticsScreen .byCategoryWrap .DttCorrectWrongUnansweredBar .cwuWrap {
    height:35px;
}

.Main .DttStatisticsScreen .mgButton.DttButton {
    width: 35px;
    height: 35px;
    position: absolute;
    right: 25px;
    top: 22px;
}

.Main.mobile .DttStatisticsScreen .mgButton.DttButton {
    right:8px;
}

.Main .DttStatisticsScreen .DttButton.withIcon.mgButton .icon {
    color:#545454;
    font-size:27px;
    top:4px;
    right:5px;
}

/*** QuestionStatusSelectScreen ***/

.Main .mainContent > .QuestionStatusSelectScreen {
    background: #fff;
}

.QuestionStatusSelectScreen > .inner {
    height:840px;
}

.QuestionStatusSelectScreen .wrongWrap, .QuestionStatusSelectScreen .correctWrap, .QuestionStatusSelectScreen .allWrap {
    background:#e0e0e0; /* grey bg color */
    position:absolute;
    left:10px;
    right:10px;
    top:40px;
    height:255px;
    padding:10px 0 0px 3px;
    border-radius:5px;
}

.Main.full .QuestionStatusSelectScreen .wrongWrap, .Main.full .QuestionStatusSelectScreen .correctWrap, .Main.full .QuestionStatusSelectScreen .allWrap {
    left: 45px;
    right: 45px;
}

.Main.mobile .QuestionStatusSelectScreen .wrongWrap, .Main.mobile .QuestionStatusSelectScreen .correctWrap, .Main.mobile .QuestionStatusSelectScreen .allWrap {
    left: 0;
    right: 0;
    border-radius: 0;
    padding: 10px 0 20px 3px;
    height: auto;
    position: static;
    margin-bottom: 10px;
}

.Main.mobile .QuestionStatusSelectScreen > .inner {
    height: auto;
}

.QuestionStatusSelectScreen .correctWrap {
    top:315px;
}

.QuestionStatusSelectScreen .allWrap {
    top:590px;
}

.QuestionStatusSelectScreen .wrongWrap .bgC {

    background-color: grey;
}

.QuestionStatusSelectScreen .correctWrap {

}

.QuestionStatusSelectScreen .allWrap {

}

.Main.mobile .QuestionStatusSelectScreen .wrongWrap {
    top:0;
}

.Main.mobile .QuestionStatusSelectScreen .correctWrap {
    top: 275px;
}

.Main.mobile .QuestionStatusSelectScreen .allWrap {
    top: 550px;
}

.Main .QuestionStatusSelectScreen.ScrollContainer .DttHeadlineSublineBlock > .icon {
    background: #979797;
    border-radius: 100px;
    color: #e0e0e0; /* grey bg color */
    text-align: center;
    font-size: 36px;
    width: 43px;
    height: 43px;
    line-height: 43px;
    margin-top: 13px;
}

.Main .QuestionStatusSelectScreen.ScrollContainer .DttHeadlineSublineBlock .helpBtn {

    transform: translate(0px,-8px);
}

.Main.full .QuestionStatusSelectScreen.ScrollContainer .DttHeadlineSublineBlock > .icon {
    font-size: 54px;
    width: 64px;
    height: 64px;
    line-height: 65px;
}

.Main.full .QuestionStatusSelectScreen.ScrollContainer .DttHeadlineSublineBlock > .icon {
    font-size: 54px;
    width: 64px;
    height: 64px;
    line-height: 65px;
}

.Main .QuestionStatusSelectScreen.ScrollContainer .DttHeadlineSublineBlock > .icon:before {
    margin-left: 0;
}

.Main .QuestionStatusSelectScreen.textBelowIcon .DttHeadlineSublineBlock > .icon {
    float: none;
}

.Main .QuestionStatusSelectScreen.ScrollContainer .DttHeadlineSublineBlock .headline {

    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    transform: translateY(-2px);
}

.QuestionStatusSelectScreen .DttCorrectWrongUnansweredBar {
    /* position: absolute; */
    /* left: 20px; */
    /* right: 20px; */
    margin-left: 20px;
    margin-right: 20px;
    transform: translate(0px,-15px);
}

.QuestionStatusSelectScreen .DttCorrectWrongUnansweredBar.hidden {
    display:none;
}

.QuestionStatusSelectScreen .DttCorrectWrongUnansweredBar .cwuWrap {
    height:35px;
}

.QuestionStatusSelectScreen .qSelectBtn {
    position: absolute;
    right: 20px;
    bottom: 17px;
    width:200px;
    -webkit-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.3);
    box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.3);
}

.QuestionStatusSelectScreen .qSelectBtn.withIcon .caption {
    font-family: dosis-semibold;
    font-size: 16px;
}

.Main.mobile .QuestionStatusSelectScreen .qSelectBtn {

    left: 0px;
    top: -6px;
    width: auto;
    position: relative;
    margin-left: 20px;
    margin-right: 20px;
}

.Main.mobile .QuestionStatusSelectScreen .DttHeadlineSublineBlock {
    margin-left:5px;
}

    .Main.mobile .QuestionStatusSelectScreen .DttHeadlineSublineBlock .subline {
        display: block;
        transform: translate(0px,-5px);
    }

/*** CategoryReviewSelectScreen ***/

.Main .mainContent > .CategoryReviewSelectScreen {
    background: #fff;
}

.CategoryReviewSelectScreen .inner {
    position:absolute;
    left:10px;
    right:10px;
    top:10px;
}

.Main.full .CategoryReviewSelectScreen .inner {
    left: 20px;
    right: 20px;
    top: 50px;
}

.Main.mobile .CategoryReviewSelectScreen .inner {
    left:0;
    right:0;
    top:0;
}

.CategoryReviewSelectScreen .lineWrap {
    background: #e0e0e0; /* grey bg color */
    margin-bottom: 5px;
    position: relative;
    border-radius:5px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.Main.mobile .CategoryReviewSelectScreen .lineWrap {
    border-radius:0;
}

.CategoryReviewSelectScreen .CollapseExpandButton {
    background: none;
    width: 36px;
    height: 36px;
    font-size: 37px;
    color: #545454;
    line-height: 24px;
    position: absolute;
    right: 14px;
    margin-top: -48px;
    transition: all 0.6s;
    -webkit-transition: all 0.6s;
}

.CategoryReviewSelectScreen .CollapseExpandButton:hover {
    color:#f36c49;
}

.CategoryReviewSelectScreen .CollapseExpandButton.expanded {
    margin-top:-54px;
    right:18px;
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
}

.Main.full .CategoryReviewSelectScreen .CollapseExpandButton {
    width: 36px;
    height: 36px;
    font-size: 56px;
    line-height: 24px;
    right: 24px;
    margin-top: -91px;
    line-height:inherit;
}

.Main.full .CategoryReviewSelectScreen .CollapseExpandButton.expanded {
    margin-top:-92px;
    right:2px;
}

.Main.mobile .CategoryReviewSelectScreen .CollapseExpandButton, .Main.mobile .CategoryReviewSelectScreen .CollapseExpandButton.expanded {
    margin-top:-160px;
}

.CategoryReviewSelectScreen .idWrap {
    color: #545454;
    font-family: asap-regular;
    font-size: 16px;
    display: block;
    float: left;
    margin: 12px 8px 4px 10px;
    overflow: hidden;
    white-space: nowrap;
}

.CategoryReviewSelectScreen .idWrap.empty {
    display:none;
}

.Main.full .CategoryReviewSelectScreen .idWrap {
    font-size: 24px;
    margin: 31px 5px 34px 17px;
}

.CategoryReviewSelectScreen .nameWrapWrap {
    position: relative;
    width: 280px;
}

.Main.mobile .CategoryReviewSelectScreen .nameWrapWrap {
    position: relative;
    width: auto;
}



.Main.full .CategoryReviewSelectScreen .nameWrapWrap {
    position: relative;
    width: 380px;
    white-space: nowrap;
}

.CategoryReviewSelectScreen .DttHelpButton {
    position: relative;
    vertical-align: text-top;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-top: 22px;
    top: 0px;
}

.CategoryReviewSelectScreen .nameWrap {
    color: #545454;
    font-family: asap-regular;
    font-size: 16px;
    display: inline-block;
    text-transform: uppercase;
    margin: 12px 0px 18px 0;
    /* width: 220px; */
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
    vertical-align: text-top;
}

.CategoryReviewSelectScreen .nameWrap.mofaName {
    width:170px;
}

.Main.full .CategoryReviewSelectScreen .nameWrap {

    max-width: 320px;
    font-size: 24px;
    margin: 31px 5px 34px 0;
}

.Main.full .CategoryReviewSelectScreen .nameWrap.mofaName {
    width:270px;
}

.Main.mobile .CategoryReviewSelectScreen .idWrap, .Main.mobile .CategoryReviewSelectScreen .nameWrap {
    margin-bottom:120px;
}

.Main.mobile .CategoryReviewSelectScreen .nameWrap {
    white-space:nowrap;
    max-width: 57vw;
}

.CategoryReviewSelectScreen .headline .idWrap, .CategoryReviewSelectScreen .headline .nameWrap {
    font-family: "dosis-regular";
    font-size: 31px;
    font-weight: bold;
    /* margin: 9px 10px 8px 17px; */
}

.Main.full .CategoryReviewSelectScreen .headline .idWrap, .Main.full .CategoryReviewSelectScreen .headline .nameWrap {
    font-size: 47.5px;
    margin: 18px 10px 16px 17px;
}

.Main.mobile .CategoryReviewSelectScreen .headline .idWrap, .Main.mobile .CategoryReviewSelectScreen .headline .nameWrap {
    margin-bottom:120px;
}

.Main.mobile .CategoryReviewSelectScreen .headline .idWrap {
    margin-right: 16px;
}

.CategoryReviewSelectScreen .headline .nameWrap {
    margin-left:0;
}

.CategoryReviewSelectScreen .idWrap.empty + .nameWrap {
    margin-left:17px;
}

.CategoryReviewSelectScreen .lineWrap .DttButton.withIcon {
    position: absolute;
    right: 64px;
    top:11px;
    width: 153px;
}

.CategoryReviewSelectScreen .lineWrap .DttButton.helpBtn {
    left: 0;
    top: 0;
    margin-top: -24px;
    margin-left: -4px;
    font-size:36px !important;
}

.Main.full .CategoryReviewSelectScreen .lineWrap .DttButton.helpBtn {

    margin-top: -28px;
}

.Main.full .CategoryReviewSelectScreen .lineWrap .DttButton.helpBtn .icon {

    font-size: 36px !important;
}

.Main.full .CategoryReviewSelectScreen .lineWrap .DttButton.withIcon {
    top:22px;
}

.Main.mobile .CategoryReviewSelectScreen .lineWrap .DttButton.withIcon {
    left:8px;
    right:8px;
    bottom:8px;
    top:auto;
    width:auto;
    max-width:none;
}

.CategoryReviewSelectScreen .lineWrap .DttButton.withIcon .caption {
    font-family:dosis-semibold;
    font-size:16px;
}

.CategoryReviewSelectScreen .lineWrap.headline .DttButton.withIcon {
    bottom:13px;
}

.Main.full .CategoryReviewSelectScreen .lineWrap.headline .DttButton.withIcon {
    bottom: 39px;
}

.CategoryReviewSelectScreen .DttCorrectWrongUnansweredBar {
    position: absolute;
    right: 230px;
    left: 283px;
    top: 11px;
    bottom: 11px;
}

.Main.mobile .CategoryReviewSelectScreen .DttCorrectWrongUnansweredBar {
    left:10px;
    right:10px;
    top:60px;
}

.CategoryReviewSelectScreen .DttCorrectWrongUnansweredBar .cwuLegend {
    margin-top:7px;
}

.Main.full .CategoryReviewSelectScreen .DttCorrectWrongUnansweredBar {
    right: 230px;
    left: 433px;
    top: 22px;
    bottom: 22px;
}

.Main .CategoryReviewSelectScreen.ScrollContainer .DttCorrectWrongUnansweredBar .cwuWrap {
    height: 23px;
}

.Main.full .CategoryReviewSelectScreen.ScrollContainer .DttCorrectWrongUnansweredBar .cwuWrap {
    height:38px;
}

.CategoryReviewSelectScreen .CollapsibleContainer.expanded {
    margin-bottom:13px;
}

.CollapsibleContainer {
    overflow: hidden;
    height: 0;
}

.CollapsibleContainer.expanded {
    height: auto;
}

@media screen and (max-width: 880px) and (min-width: 700px) {
    .CategoryReviewSelectScreen .DttCorrectWrongUnansweredBar .cwuLegend .TranslatableText {
        display: none;
    }

    .CategoryReviewSelectScreen .DttCorrectWrongUnansweredBar .cwuLegend .legendPercentage {
        margin-left:0;
    }
}

/*** DttTOS ***/

.DttTOS {
    color: #545454;
}

.DttTOS .tosTopWrap {
    position: relative;
    margin: 53px 8px 20px;
    border: 2px solid #46a0b2;
    border-radius: 7px;
}

.Main.full .DttTOS .tosTopWrap {
    margin: 23px 20px 20px
}

.DttTOS .tosMiddleWrap, .DttTOS .tosBottomWrap {
    position: relative;
    margin: 0 8px 0;
    background:#e0e0e0; /* grey bg color from eaeaeb */
    border-radius: 7px;
}

.Main.full .DttTOS .tosMiddleWrap, .Main.full .DttTOS .tosBottomWrap {
    margin:0 20px 20px;
}

.DttTOS .tosMiddleWrap {
    margin-bottom:18px;
    padding-bottom: 1px;
}

.DttTOS .tosBottomWrap {
    text-align:center;
    padding:22px 0;
}

.DttTOS .tosBottomWrap .bwBlock:nth-child(1) {
    float:left;
    margin-left:25px;
}

.DttTOS .tosBottomWrap .bwBlock:nth-child(2) {
    float:none;
    display:inline-block;
}

.DttTOS .tosBottomWrap .bwBlock:nth-child(3) {
    float:right;
    margin-right:95px;
}

.DttTOS .DttHeadlineSublineBlock {
    margin:12px 0 0 13px;
    height:74px;
}

.DttTOS .agbText, .DttTOS .impressumText {
    margin:0 14px 26px 18px;
}

/*** DttPrivacy ***/

.DttPrivacy .privacyWrap {
    position: relative;
    margin: 53px 8px 0;
    border: 2px solid #46a0b2;
    border-radius: 7px;
}

.Main.full .DttPrivacy .privacyWrap {
    margin: 53px 20px 0;
}

.DttPrivacy .DttHeadlineSublineBlock {
    margin: 12px 0 0 13px;
    height: 74px;
}

.DttPrivacy .privacyText {

    color: black;
    padding-left: 14px;
    padding-right: 14px;
    padding-bottom: 14px;
}

/*** DttAdminDetails ***/

.DttAdminDetails > .inner {
    right: 0;
    top:10px;
}

.Main.full .DttAdminDetails > .inner {
    right: 40px;
    top:45px;
}

.Main.mobile .DttAdminDetails > .inner {
    top:0;
}

.DttAdminDetails .tabView, .DttAdminDetails .lkContent {
    background: #e2e2e2; /* grey bg color */
    clear: both;
    padding-bottom: 60px;
}

.Main .DttAdminDetails .tabBar {
    height: 38px;
    overflow: hidden;
    background: #fafafa;
}

.Main.full .DttAdminDetails .tabBar {
    height: 45px;
}

.classesWrap .classItem {
    color:#fff;
    font-family:asap-bold;
    background:#2795a7;
    border-radius:5px;
    width:20px;
    height:20px;
    float:left;
    margin:0 8px 0 0;
    text-transform:uppercase;
    line-height:18px;
    text-align:center;
}

.Main .classesWrap .classItem {
    font-size: 9px;
}

.classesWrap .classItem.mofa {
    width:30px;
}

.Main.full .classesWrap .classItem {
    width: 30px;
    height: 30px;
    font-size: 12px;
    line-height: 28px;
}

.Main.full .classesWrap .classItem.mofa {
    width:40px;
}

.adminTimeWrap {
    border: 2px solid #46a0b2;
    border-radius:5px;
    background:#fff;
    padding:22px 15px;
    position:relative;
    z-index:10;
}

.adminTimeWrap .blockWrap {
    float:left;
}

.adminTimeWrap .blockWrap .TranslatableText {
    font-family: asap-regular;
    float: left;
    color: #545454;
    font-size: 16px;
    margin-top: 2px;
}

.Main.full .adminTimeWrap .blockWrap .TranslatableText {
    font-size: 22px;
}

.Main .adminTimeWrap .blockWrap .SimpleDiv {
    float: left;
    background: #93c9d3;
    border-radius: 5px;
    font-family: dosis-semibold;
    font-size: 16px;
    width: 115px;
    color: #fff;
    text-align: center;
    margin: 0 0 0 13px;
}

.Main.full .adminTimeWrap .blockWrap .SimpleDiv {
    font-size: 23.5px;
    width: 170px;
}

.adminTimeWrap .timeHeader {
    font-family: asap-bold;
    color: #545454;
    font-size: 16.5px;
    text-transform: uppercase;
}

.DttAdminList .addStudentBtn {
    margin-bottom: 12px;
    max-width: none;
}

/*** DttAdminTeacherDetails ***/
.Main .DttAdminDetails.DttDetailsView .FormEditSaveButton {
    position: relative;
    margin-top: 4px;
    margin-bottom: -53px;
    float: right;
    right:20px;
}

.Main .DttAdminDetails.DttDetailsView .FormEditSaveButton.hidden {
    display:none;
}

.Main .DttAdminDetails.DttDetailsView.mobile .FormEditSaveButton {
    top:0;
    left:auto;
    right:8px;
    min-width:170px;
}

.Main .DttAdminTeacherDetails.DttDetailsView .FormTextArea {
    margin: 0 20px 0 18px;
}

.Main .DttAdminTeacherDetails.DttDetailsView.mobile .FormTextArea {
    margin: 0 8px 0;
}

.DttAdminTeacherDetails .DttExportBlock {
    margin-bottom:8px;
}

.DttAdminTeacherDetails .DttExportBlock .wrap .DttButton {
    margin-right:8px;
}

.Main.full .DttAdminTeacherDetails .DttExportBlock .wrap .DttButton {
    margin-right:0;
}

.DttAdminTeacherDetails .formLine .DttButton {
    color:#fff;
}

.DttAdminTeacherDetails .formLine .NumericStepperInput {
    margin-right: 9px;
    display:inline-block;
    float:left;
}

.Main.full .DttAdminTeacherDetails .formLine .NumericStepperInput {
    margin-right:9px;
}

.DttAdminTeacherDetails .aFuncTopBtns {
    margin-left:8px;
}

.DttAdminTeacherDetails.mobile .aFuncTopBtns {
    margin-left: 8px;
    margin-right: 8px;
}

.DttAdminTeacherDetails .aFuncTopBtns .subWrap {
    float:left;
    width:155px;
    margin-right:27px;
    margin-bottom:20px;
}

.DttAdminTeacherDetails.mobile .aFuncTopBtns .subWrap {
    width:100%;
    margin-right:0;
    margin-bottom:8px;
}

.DttAdminTeacherDetails .aFuncTopBtns .subWrap .FormBooleanInput {
    margin:11px 0 0 0;
}

.Main.full .DttAdminTeacherDetails .aFuncTopBtns .subWrap {
    width: 235px;
    margin-right: 27px;
}

.DttAdminTeacherDetails .aFuncTopBtns:nth-child(3) .subWrap {
    margin-right:0;
}

.Main .DttAdminTeacherDetails .aFuncMiddle .DttButton {
    width: 155px;
    margin: 0 27px 8px 8px;
    float: left;
}

.Main.full .DttAdminTeacherDetails .aFuncMiddle .DttButton:nth-child(3), .Main .DttAdminTeacherDetails .aFuncMiddle .DttButton:nth-child(3) {
    margin-right:0;
    margin-left:0;
}

.Main.full .DttAdminTeacherDetails .aFuncMiddle .DttButton {
    width:235px;
    margin:0 27px 8px 18px;
    float:left;
}

.Main .DttAdminTeacherDetails.mobile .aFuncMiddle .DttButton {
    max-width:none;
    margin:0 8px 8px;
    float:none;
    width:auto;
}

.DttAdminTeacherDetails .aFuncMiddle {
    margin: 20px auto 40px;
}

.DttAdminTeacherDetails .cpBtn {

    color: white;
}

.Main .DttAdminTeacherDetails .TabView .aFuncMiddle .formSubHeaderWrap, .Main .DttAdminTeacherDetails .TabView .aFuncBottom .formSubHeaderWrap  {
    padding-top: 0;
}

.Main.mobile .DttAdminStudentDetails .assignCodeWrap .formSubHeaderWrap {
    margin-left:0;
}

/*** DttAdminList ***/
.DttAdminList > .inner {
    left: 10px;
    right: 10px;
    top: 10px;
}

.Main.full .DttAdminList > .inner {
    left:45px;
    right:13px;
    top:45px;
}

.DttAdminList .classesWrap {
    float: left;
}

.DttAdminList .listWrap {
    margin-bottom:60px;
}

/*** DttAccountPwd  ***/

.DttAccountPwd .cpBtn {
    color: #fff;
    float: left;
    margin: 10px 22px 0 0;
}

.Main.full .DttAccountPwd .cpBtn {
    margin: 10px 60px 0 0;
}

/*** DttAdminAccountPwd ***/

.DttAdminAccountPwd .cpBtn {
    color: #fff;
    float: left;
    margin: 10px 0 0 0;
}

.Main.full .DttAdminAccountPwd .cpBtn {
    margin: 10px 60px 0 0;
}
/*** DttAdminAccountLicenses ***/
.DttAdminAccountLicenses .licenseWrap {
    margin: 0 0 0 8px;
}

.DttAdminAccountLicenses .licenseWrap .NumericStepperInput {
    margin: 0 10px 10px 0;
    float:left;
}

.Main.full .DttAdminAccountLicenses .licenseWrap .NumericStepperInput {
    margin: 0 15px 15px 0;
}

.DttAdminAccountLicenses .licenseWrap .DttButton, .DttAdminAccountLicenses .keysStuff .btnTriggerKO {
    width: 200px;
    color: #fff;
    float: left;
}

.Main.full .DttAdminAccountLicenses .licenseWrap .DttButton, .Main.full .DttAdminAccountLicenses .keysStuff .DttButton {
    width: 295px;
}

/*** DttAdminAccountMyData ***/

.DttAdminAccountMyData .loBtn {
    color:#fff;
    margin-left:18px;
    margin-top:30px;
    width:200px;
}

.Main.full .DttAdminAccountMyData .loBtn {
    width:295px;
}

/*** DttAdminStudentDetails ***/

.DttAdminStudentDetails .tabBar.exclude .DttButton:nth-child(5) {
    border-top-right-radius: 0;
    margin-right: 0;
}

.Main .DttAdminStudentDetails .FormQuestionSetsSelect .lineWrap,
.Main .DttAdminStudentDetails .FormRadioButtonSelect .lineWrap {
    float: left;
    clear: none;
}

.Main .DttAdminStudentDetails .DttCheckBoxGroup .lineWrap .TranslatableText, .Main .DttAdminStudentDetails .DttCheckBoxGroup .lineWrap .literalCaption {
    margin-left: 18px;
    margin-right: 20px;
}

.Main.full .DttAdminStudentDetails .DttCheckBoxGroup .lineWrap .TranslatableText, .Main.full .DttAdminStudentDetails .DttCheckBoxGroup .lineWrap .literalCaption {
    margin-left: 27px;
    margin-right: 30px;
}

.DttAdminStudentDetails .cpBtn {
    color: white;
}

/*** DttTestChoiceScreen ***/

.DttTestChoiceScreen .wrapTop {
    position: relative;
    background: #e0e0e0; /* grey bg color from eaeaeb */
    margin: 10px 10px 10px;
    border-radius: 10px;
}

.Main.full .DttTestChoiceScreen .wrapTop {
    margin: 45px 45px 30px;
    padding-top:10px;
}

.Main.mobile .DttTestChoiceScreen .wrapTop {
    margin: 0;
    border-radius: 0;
}

.DttTestChoiceScreen .wrapTop .DttLearningProgress {
    margin-right:20px;
}



.Main.android .DttTestChoiceScreen .wrapTop .DttLearningProgress  .testProgress .captionWrap,
.Main.ios .DttTestChoiceScreen .wrapTop .DttLearningProgress  .testProgress .captionWrap {
    padding-top: 5px;
}

.Main.mobile .DttTestChoiceScreen .wrapTop .DttLearningProgress {
    margin-right:10px;
    margin-left:0;
}

.DttTestChoiceScreen .wrapBottom {
    position: relative;
    background: #e0e0e0; /* grey bg color from eaeaeb */
    margin: 0 10px 0;
    border-radius: 10px;
    padding: 10px 0;
}

.Main.full .DttTestChoiceScreen .wrapBottom {
    margin: 0 45px 0;
}

.Main.mobile .DttTestChoiceScreen .wrapBottom {
    margin: 0;
    border-radius: 0;
}

.DttTestChoiceScreen .qwBtn, .DttTestChoiceScreen .aBtn {
    position: absolute;
    font-family: dosis-semibold;
    width: 260px;
    -webkit-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.3);
    box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.3);
    bottom: 20px;
    right: 20px;
}

.Main.mobile .DttTestChoiceScreen .qwBtn, .Main.mobile .DttTestChoiceScreen .aBtn {
    left: 10px;
    right: 10px;
    bottom: 10px;
    width: auto;
}

.DttTestChoiceScreen .cwuBarWrap {
    margin: 0 20px 0 20px;
    height: 120px;
}

.Main.mobile .DttTestChoiceScreen .cwuBarWrap {
    margin: 0 8px 0 8px;
}

.Main.full .DttTestChoiceScreen .cwuBarWrap .cwuWrap, .Main .DttTestChoiceScreen .cwuBarWrap .cwuWrap {
    height: 38px;
}

/*** end of screens ***/
.Question.Video {
    color: red;
}

.Block {
    margin-bottom: 36px;
}

.BlockSegment {
    margin-bottom: 24px;
}

.BlockSegmentTitle {
    font-weight: bold;
}

.BlockSubSegment {
    margin-bottom: 16px;
}

.IterationTitle {
    margin-bottom: 12px;
    color: grey;
}

.Menu {
    margin-bottom: 36px;
}

.BlockSubSegmentQuestionStatsQuestionsLeft {
    font-size: 0.5em;
}

/*** TestNavigationButton ***/

.TestNavigationButton {
    float:left;
    position:relative;
}

.testMode .subSegmentContainer.invisible {
   display:none;
}

.exerciseMode .subSegmentContainer {
    display:inline;
}

.BlockScreen .content {
    position:absolute;
    top:10px;
    left:0;
    right:0;
    bottom:60px;
}

.BlockScreen.testMode .content {
    top:35px;
}

.BlockScreen.testMode .content.bsSmall > .inner, .BlockScreen.testMode .content.bsVerySmall > .inner {
    top:0;
}

/*** Test top navigation topNav ***/

.testMode .topNav {
    background: #008000;
}

.exerciseMode .topNav {
    background: #d86b61;
}

.topNav .tnLevel {
    position: absolute;
    top: 15px;
    left: 10px;
}

.topNav .tnPointsWrap {
    position:absolute;
    top:15px;
    right:50px;
}

.topNav .tnName {
    position:absolute;
    top:15px;
    left:50%;
    margin-left:-50px;
}

.questionsRemaining {
    position: absolute;
    left: 358px;
    bottom: 65px;
    display: none;
    color: #0b333c;
    background: url("images/icons/warning.png") no-repeat 0 50%;
    padding: 0 0 0 28px;
    font-family: Arial;
    font-weight: bold;
    font-size: 11px;

}

.Main.full .questionsRemaining {
    display: block;
    font-size: 16.2px;
}

.questionsRemaining.hidden {
    display:none;
}

.BlockScreen.exerciseMode .questionsRemaining {
    display:none;
}

.navWrap {
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    z-index: 101;
}

/*** DttButton ***/

.DttButton {
    min-width: 90px;
    text-align: center;
    cursor: pointer;
    cursor: -webkit-pointer;
    text-transform: uppercase;
    padding: 10px;
    border-radius: 4px;
    background: #d6655d;
    background-image: -ms-linear-gradient(left, #D56059 0%, #E77E52 100%);
    background-image: -moz-linear-gradient(left, #D56059 0%, #E77E52 100%);
    background-image: -o-linear-gradient(left, #D56059 0%, #E77E52 100%);
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #D56059), color-stop(100, #E77E52));
    background-image: -webkit-linear-gradient(left, #D56059 0%, #E77E52 100%);
    background-image: linear-gradient(to right, #D56059 0%, #E77E52 100%);
    position: relative;
    height: 38px;
    font-size: 18px;
    max-width: 800px;
    padding: 0;
    overflow: hidden;
    -webkit-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.3);
    box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.3);
    transition: all 0.2s;
    -webkit-transition: all 0.2s;
}

.DttButton .sensitive {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.Main.full .DttButton {
    height:38px;
    font-size: 18px;
}

.DttButton.disabled {
    cursor: default;
    opacity: 0.5;
}

/*
.DttButton.disabled.hoverClass {
    opacity:0.5
}

.DttButton.disabled.activeClass {
    -webkit-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.3);
    box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.3);
}
 */

.DttButton.blueBg {
    background: #2493a6;
    background-image: -ms-linear-gradient(left, #2493a6 0%, #2795a7 100%);
    background-image: -moz-linear-gradient(left, #2493a6 0%, #2795a7 100%);
    background-image: -o-linear-gradient(left, #2493a6 0%, #2795a7 100%);
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #2493a6), color-stop(100, #2795a7));
    background-image: -webkit-linear-gradient(left, #2493a6 0%, #2795a7 100%);
    background-image: linear-gradient(to right, #2493a6 0%, #2795a7 100%);
}

.DttButton.whiteBg {
    background: #fff;
    color: #545454;
}

.DttButton.blueBg .caption {
    color:#fff;
}

.DttButton.whiteBg .caption {
    color: #545454;
}

.DttButton.noCaption {
    min-width:20px;
    max-width:none;
}

.DttButton .caption {
    display: block;
    position: absolute;
    top: 0;
    left: 10px;
    right: 10px;
    margin-right:10px;
    font-family:dosis-semibold;
}

.DttButton.hideCaption .caption  {
    visibility:hidden;
}

.DttButton .icon {
    background:no-repeat 0 0 / 100% auto;
    display:inline-block;
    width:13px;
    height:13px;
    margin-right:-10px;
}

.DttButton.withIcon .caption {
    right: 40px;
}

.DttButton.withIcon .icon {
    position: absolute;
    display: block;
    top: 0;
    right: 18px;
    bottom: 6px;
    width: 26px;
    height: auto;
    margin-right: auto;
    font-size: 38px;
    background-color: transparent;
}

.DttButton.withIcon .icon.smallsize {
    position: absolute;
    display: block;
    top: 8px;
    right: 4px;
    bottom: 6px;
    width: 26px;
    height: auto;
    margin-right: auto;
    font-size: 26px;
    background-color: transparent;
}

.Main .DttButton.nonButton.withIcon .icon {
    top: 2px;
}

.Main .LoginScreen .DttButton.withIcon .icon {
    top:8px;
}

.DttButton .caption.smallsize {
    font-size: 9px;
    max-height: 36px;
}

.Main.full .DttButton .caption.smallsize {
    font-size: 12px;
}

.DttButton.hidden {
    display:none;
}

.DttButton {
    -webkit-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.3);
    box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.3);
}

.DttButton .innerBtn {
    opacity:0;
    pointer-events:none;
    transition: all 0.2s;
    -webkit-transition: all 0.2s;
}

.DttButton.hoverClass:not(.disabled), .ccHoverClass {
    webkit-box-shadow: 2px 2px 6px 1px rgba(0,0,0,0.3);
    -moz-box-shadow: 2px 2px 6px 1px rgba(0,0,0,0.3);
    box-shadow:2px 2px 6px 1px rgba(0,0,0,0.3);
}

.DttStudentTestBlockRenderer .ccHoverClass {
    webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.ccHoverClass {
    transition: all 0.2s;
    -webkit-transition: all 0.2s;
}

.DttButton.hoverClass:not(.disabled) .innerBtn {
    opacity:1;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    border:3px solid #bc473f;
}

.DttAdditionalSelectionScreen .DttButton.hoverClass:not(.disabled) .innerBtn {

    border: 3px solid #bc473f;
}

.DttButton.blueBg.hoverClass:not(.disabled) .innerBtn {
    border-color:#177483;
}

.DttButton.whiteBg.hoverClass:not(.disabled) .innerBtn {
    border-color:#cecece;
}

.DttButton.activeClass:not(.disabled) {
    -webkit-box-shadow: inset 2px 2px 2px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: inset 2px 2px 2px 0px rgba(0,0,0,0.3);
    box-shadow: inset 2px 2px 2px 0px rgba(0,0,0,0.3);
}

.DttButton.activeClass .innerBtn {
    opacity:0;
}

.DttButton.blueBg.activeClass:not(.disabled), .DttButton.whiteBg.activeClass:not(.disabled) {
    -webkit-box-shadow: inset 2px 2px 2px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: inset 2px 2px 2px 0px rgba(0,0,0,0.3);
    box-shadow: inset 2px 2px 2px 0px rgba(0,0,0,0.3);
}

.Main .DttButton.nonButton, .Main .BlockScreen.testMode .DttButton {
    box-shadow:none;
}

.DttButton.nonButton.hoverClass, .BlockScreen.testMode .DttButton.hoverClass {
    opacity:1;
}

.DttButton.nonButton.activeClass, .BlockScreen.testMode .DttButton.activeClass {
    box-shadow:none;
}

.DttButton.nonButton.hoverClass .innerBtn {
    opacity:0;
}

/*** DttRadioButton ***/

.DttRadioButton {
    cursor: pointer;
    cursor: -webkit-pointer;
}

.DttRadioButton .radioBtn {
    border: 3px solid #f2b1a1;
    width: 6px;
    height: 6px;
    background: #f2b1a1;
    border-radius: 20px;
    float: left;
    margin-top: 3px;
}

.Main.full .DttRadioButton .radioBtn {
    border: 5px solid #f2b1a1;
    width: 10px;
    height: 10px;
    margin-top:4px;
}

.Main .DttRadioButton.active .radioBtn {
    background: #555555;
    border-color: #d7665c;
}

.DttRadioButton .TranslatableText {
    float: left;
    margin-left: 8px;
}

.Main.full .DttRadioButton .TranslatableText {
    margin-left:10px;
}

/*** DttLeftMenu, DttLeftMenuButton ***/

.mainContent .DttAccountMenu, .mainContent .DttAdminAccountMenu {
    margin-top: 10px;
}

.Main.full .mainContent .DttAccountMenu, .Main.full .mainContent .DttAdminAccountMenu {
    margin-top: 36px;
}

.mainContent .DttLeftMenu {
    background:#fff;
    padding-top:36px;
}

.DttLeftMenuButton {
    background: #fafafa;
    text-align: left;
    margin: 0 10px 4px 8px;
    height: 41px;
    max-width: none;
    font-size: 23px;
    text-align: right;
    color: #7d7d7d;
}

.Main.full .DttLeftMenuButton {
    height: 63px;
    font-size: 36px;
    margin-left:20px;
}

.DttAccountMenu .DttLeftMenuButton, .DttAdminAccountMenu .DttLeftMenuButton {
    line-height: 26px;
}

.DttLeftMenuButton.hoverClass, .DttLeftMenuButton.active {
    background: #e0e0e0; /* grey bg color */
}

.DttLeftMenuButton:before {
    line-height:40px;
}

.Main.full .DttLeftMenuButton:before {
    line-height: 62px;
}

.DttLeftMenuButton .caption {
    color: #555;
    text-align:left;
    text-transform:uppercase;
    font-family:"asap-bold";
    font-size:15px;
    left:40px;
}

.Main.full .DttLeftMenuButton .caption {
    font-size: 22px;
    left: 62px;
}

.Main .DttLeftMenuButton.withIcon .icon {
    left: 0;
    margin: 8px 30px 0 2px;
    color: #555;
    font-size: 22px;
}

.Main.full .DttLeftMenuButton.withIcon .icon {
    font-size: 35px;
    margin: 14px 0 0 10px;
}

/*** DttDetailsView ***/

.Main .DttDetailsView {
    background: #fff;
}

.DttDetailsView .wrapper {
    background: #e0e0e0; /* grey bg color from f0f0f0*/
    border-radius: 4px;
    margin: 10px 10px 0 5px;
    color: #555;
    padding-bottom: 33px;
    /* position:absolute; */
    width: 100%;
}

.Main.full .DttDetailsView .wrapper {
    margin: 36px 30px 0 5px;
}

.DttDetailsView.mobile .wrapper {
    margin:0;
}

.DttDetailsView .FormHeader {
    background: #f8f8f8;
    text-transform: uppercase;
    font-family: "dosis-medium";
    font-size: 18px;
    padding: 13px 0 0 11px;
    margin-bottom: 20px;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
}

.Main.full .DttDetailsView .FormHeader {
    font-size: 27px;
    padding: 14px 0 14px 18px;
}

.DttAccountMyData.DttDetailsView.mobile .FormHeader {
    padding-bottom: 50px;
}

.DttAccountMyData .syncButton {

    margin-left: 16px;
    margin-right: 16px;

    max-width: 300px;
    color: white;
}

.DttAccountMyData.mobile .syncButton {
    margin-left: 8px;
    margin-right: 8px;
    max-width: 20000px;
}

.FormHeader .caption {
    float:left;
}

.FormHeader .helpButton {
    float:left;
    margin-left:8px;
}

.Main.full .FormHeader .helpButton {
    margin-left:15px;
}

.FormHeader .helpButton.withIcon {
    background:none;
    color:#84bdc7;
}

.FormHeader .helpButton.hoverClass.withIcon {
    color: #f36c49;
}

.Main .FormHeader .helpButton.withIcon .icon {
    font-size: 33px;
    width: 32px;
    height: 32px;
    position: relative;
    line-height: 17px;
    top:4px;
    right:6px;
}

.Main.full .FormHeader .helpButton.withIcon .icon {
    font-size: 48px;
    line-height: 24px;
    top:6px;
}

.Main.full .FormHeader .helpButton.withIcon .icon:before {
    margin-left:-2px;
}

.formSubHeaderWrap {
    padding-top: 0px;
    margin: 0 0 20px 8px;
}

.DttDetailsView .wrapper > .formSubHeaderWrap {

    padding-top: 33px;
}

.formSubHeader {
    text-transform: uppercase;
    font-size: 16px;
    font-family: asap-bold;
    color: #646464;
    display:inline;
}

.mobile .formSubHeaderWrap {
    margin-left:8px;
}

.schoolSectionEntry {
    margin: 0 8px;
    font-size: 22px;
    color: #646464;
    font-family: asap-regular;
}

.DttAdminDetails.mobile .schoolSectionEntry {
    margin-left:8px;
    margin-right:8px;
}

.Main.mobile .schoolSectionEntry {
    margin: 0;
    font-size: 13px;
}

.TabView .Container > .formSubHeaderWrap:first-child {
    padding-top:44px;
}

.DttDetailsView .staticOutput {
    margin: 0 0 22px 18px;
}

.DttDetailsView.mobile .staticOutput {
    margin-left:8px;
}

.FormHeader .helpButton.hidden {
    display:none;
}

.dvHeader {
    color: #646464;
    background: #fafafa;
    margin: 0;
    padding:14px 0 17px 18px;
}

.Main.mobile .dvHeader {
    padding-left:8px;
}

.dvHeader .SimpleDiv {
    float:left;
    font-size:14px;
}

.dvHeader .name {
    clear:both;
    text-transform:uppercase;
    font-size:18px;
}

.Main.full .dvHeader .name {
    font-size: 27px;
}

.DttAdminLicenseKeyDetails .dvHeader .name {
    text-transform:none;
    user-select: all;
    -webkit-user-select: all;
}

.dvHeader .pIndex {
    clear:left;
}

.dvHeader .classesWrap {
    float:right;
    margin-top:3px;
}

.dvHeader .statusIcon {
    float:right;
    margin:4px 8px 0 0;
}

.Main.full .dvHeader .statusIcon {
    margin:4px 12px 0 0;
}

.dvHeader .statusIcon .entryIcon {
    color:#fff;
    width: 20px;
    height: 20px;
    font-size:20px;
    border-radius:3px;
}

.Main.full .dvHeader .statusIcon .entryIcon {
    width: 30px;
    height: 30px;
    font-size:30px;
}

/*** lkContent ***/

.lkContent .DttButton {
    max-width:295px;
    margin-left:18px;
}

.Main.mobile .lkContent .DttButton {
    margin:0 8px;
    max-width:none;
}

/*** Form Elements ***/

.FormElement {
    color: #2c2c2c;
}

.Main .FormEMailInput .DttButton {
    width: 33px;
    height: 33px;
    background: #e2e2e2;
    position:absolute;
    right:0;
}

.Main.mainWrap .DttDetailsView .FormElement.FormEMailInput, .Main.mainWrap .DttDetailsView .FormElement.FormLanguageSelect {
    height: auto;
}

.FormElement.FormEMailInput {

    height: auto !important;
}

.DttDetailsView .FormElement.FormEMailInput .lineWrap {
    position: relative;
    height: 33px;
    margin-bottom: 7px;
}

.Main.full .DttDetailsView .FormElement.FormEMailInput .lineWrap {
    height: 38px;
    margin-bottom: 14px;
}

.FormEMailInput .DttButton.withIcon .icon {
    right:3px;
}

.FormEMailInput .DttButton.addBtn {
    left:140px;
}

.Main.full .FormEMailInput .DttButton.addBtn {
    left:300px;
}

.DttDetailsView.mobile .FormElement.FormEMailInput .contentWrap {
    padding-top:28px;
}

.DttDetailsView.mobile .FormEMailInput .DttButton.addBtn {
    left:0;
}

.FormEMailInput .DttButton.rmBtn {
    right:9px;
}

.Main.full .FormEMailInput .DttButton.rmBtn {
    right:20px;
}

.Main .DttDetailsView .FormEMailInput.editing .lineWrap .inputWrap {
    right: 49px;
}

.Main.full .DttDetailsView .FormEMailInput .lineWrap .inputWrap {
    right: 61px;
}

.DttDetailsView.mobile .FormEMailInput .DttButton.rmBtn {
    right: 8px;
    margin-top:-4px;
}

.FormEMailInput .DttButton.addBtn, .FormEMailInput .DttButton.rmBtn {
    display:none;
}

.FormEMailInput.editing .DttButton.addBtn, .FormEMailInput.editing .DttButton.rmBtn {
    display: block;
}

.Main .FormEMailInput.editing .DttButton.addBtn .icon, .Main .FormEMailInput.editing .DttButton.rmBtn .icon {
    font-size:26px;
    line-height:32px;
    left:auto;
}

.NumericStepperInput .stepperField {
    float: left;
    border: none;
    background: #e2e2e2;
    color: #525252;
    font-family: asap-bold;
    /*padding: 3px 20px 2px 3px;
    font-size: 13px;*/
    font-size: 22px;
    padding: 3px 0px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    margin-right: 4px;
}

/*
.Main.full .NumericStepperInput .stepperField {
    font-size: 22px;
    padding: 5px 30px 5px 5px;
}*/

.FormNumericStepperInput .NumericStepperInput .Button, .NumericStepperInput .Button {
    float: left;
    border: none;
    font-size: 26px;
    font-family: os-regular;
    color: #525252;
    padding:3px 0px;
    /*
      font-size: 14.5px;
    */
    margin-left: -4px;
}

/*
.Main.full .FormNumericStepperInput .NumericStepperInput .Button, .Main.full .NumericStepperInput .Button {
    padding:5px;
}*/

.NumericStepperInput .niSubtractBtn {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

/*
.Main.full .NumericStepperInput .Button {
    font-size: 26px;
}*/

.FormDateSelect .DttButton.noCaption {
    width: 24px;
    position: absolute;
    height: 24px;
    right: 10px;
    top: 5px;
    z-index: 30;
}

.Main.full .FormDateSelect .DttButton.noCaption {
    width: 40px;
    height: 42px;
    right:22px;
}

.Main .DttDetailsView.mobile .FormDateSelect .DttButton.noCaption {
    top: 29px;
}

.FormDateSelect .DttButton.noCaption.dpBtn {
    background: #e2e2e2;
    height: 18px;
    margin-top: 2px;
    transition: none;
    -webkit-transition: none;
}

.Main.full .FormDateSelect .DttButton.noCaption.dpBtn {
    height: 30px;
    top:0;
    margin-top:2px;
}

.Main .FormDateSelect.editing .DttButton.noCaption.dpBtn {
    background: #fff;
}

.FormDateSelect .DttButton.noCaption.dpBtn .icon {
    font-size: 18px;
    line-height: 18px;
    left: 0;
}

.Main.full .FormDateSelect .DttButton.noCaption.dpBtn .icon {
    font-size:29px;
    line-height:32px;
}

.DttDetailsView.mobile .FormDateSelect .DttButton.noCaption.dpBtn .icon {
    line-height:10px;
}

.FormDateSelect .inputWrap {
    right: auto;
    z-index: 20;
}

.FormDateSelect .inputWrap .textInput {
    line-height:22px;
}

.Main.full .FormDateSelect .inputWrap .textInput {
    line-height:33px;
}

/*** Form elements in Details View ***/
.DttDetailsView .FormEditSaveButton {
    position: absolute;
    top: 16px;
    right: 8px;
    width: 180px;
}

.Main .DttDetailsView .FormEditSaveButton.withIcon .icon {
    color:#fff;
}

.DttDetailsView.mobile .FormEditSaveButton {
    top:58px;
    width:auto;
    left:8px;
    right:8px;
}

.DttDetailsView .FormEditSaveButton.withIcon .icon:before {
    margin-left:-8px;
}

.Main.full .DttDetailsView .FormEditSaveButton {
    /* top: 48px; */
    right: 20px;
    width: 180px;
    height: 43px;
}

.DttDetailsView .FormElement {
    margin:0 0 14px 8px;
    height:33px;
    position:relative;
}

.DttDetailsView.mobile .FormElement {
    margin: 8px 0 14px 8px;
    min-height:61px;
}

/*added for license key*/

.DttDetailsView.mobile .addLicenseKeyWrap .FormElement {
    min-height:0;
}

.Main.full .DttDetailsView .FormElement {
    height:38px;
}

.DttDetailsView .FormElement .textInput {
    background: #eeeeee;
    border: 1px solid #e2e2e2;
    border-radius: 4px;
    color: #525252;
    font-family: "asap-bold";
    font-size: 13px;
    padding: 0 0 1px 8px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

}

.DttDetailsView .FormElement.FormDateSelect .textInput {
    padding-top:7px;
}

.DttDetailsView .FormElement .textInput[disabled] {
    -webkit-text-fill-color: #525252;
    opacity:1;
}

.Main.full .DttDetailsView .FormElement .textInput {
    font-size: 22px;
    padding: 1px 0 1px 20px;
}

.DttDetailsView .FormElement.editing .textInput {
    background:#fff;
}

.DttDetailsView .FormElement .lineWrap {
    position:absolute;
    left:0;
    right:27px;
    top:0;
    bottom:0;
}

.DttAccountQuestionsDataBase.DttDetailsView .FormElement .lineWrap {
    left:8px;
}

.DttDetailsView .FormElement .inputWrap, .DttDetailsView .FormTextOutput .outputField {
    position: absolute;
    right: 8px;
    left: 185px;
    top: 0;
    bottom: 0;
    height: 38px;
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
}

.DttDetailsView .FormElement.widerLeftColumn .inputWrap, .DttDetailsView .FormElement.widerLeftColumn .outputField {
    left: 285px;
}

.DttDetailsView.mobile .FormElement .inputWrap, .DttDetailsView.mobile .FormTextOutput .outputField {
    top:auto;
    right:8px;
    left:0;
    bottom:4px;
}

.Main.full .DttDetailsView .FormElement .inputWrap, .Main.full .DttDetailsView .FormTextOutput .outputField {
    right: 20px;
    left: 300px;
}

.DttDetailsView .outputField {
    font-family: "asap-bold";
    font-size: 13px;
    padding-top:11px;
}

.DttDetailsView .outputField .outputValue {
    display: inline-block;

    user-select: all;
    -webkit-user-select: all;
    -moz-user-select: all;
}

.DttDetailsView .outputField .suffixText {
    display:inline-block;
    margin-left:8px;
}

.Main.full .DttDetailsView .outputField {
    font-size: 22px;
    padding-top: 7px;
}

.DttDetailsView .staticOutput {
    font-family: "asap-bold";
    font-size: 13px;
    color: #2c2c2c;
}

.DttDetailsView .FormElement.spaceAbove {
    margin-top:30px;
}

.Main.full .DttDetailsView .staticOutput {
    font-size: 22px;
}

.DttDetailsView .FormElement .inputWrap .textInput {
    width: 100%;
    height: 100%;
    -moz-user-select: text;
}

.DttDetailsView .FormElement .label {
    font-size:15px;
    font-family:"asap-regular";
    position:absolute;
    left:0;
    top:9px;
    color:#2c2c2c;
    /* max-width: 180px; */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.DttDetailsView .FormElement.widerLeftColumn .label {

    max-width: 280px;
}

.Main.full .DttDetailsView .FormElement .label {
    font-size: 24px;
    top: 5px;
    max-width: 280px;
}

.DttDetailsView.mobile .FormElement .label {
    top:0;
}

.DttDetailsView .aFuncBottom .FormElement .label {
    width: 180px;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
}

.DttDetailsView.mobile .aFuncBottom .FormElement .label {
    width: auto;
}

.Main.full .DttDetailsView .aFuncBottom .FormElement .label {
    width:290px;
}

.Main .DttDetailsView .FormElement.DttLicenseClassSelector {
    height: auto;
}

.DttDetailsView.mobile .FormLanguageSelect {
    width:207px;
    margin:0 auto;
}

.Main .DttDetailsView.mobile .DttLanguageSelect .DttButton:nth-child(2n) {
    margin-right:0;
}

/*** FormSelect ***/
.FormElement.FormSelect {
    height: 33px;
}

/*
.DttDetailsView.mobile .FormElement.FormSelect {
    height:61px;
}*/

.FormSelect .selectContent {
    position: absolute;
    z-index: 20;
    right: 8px;
    left: 185px;
    background: #e2e2e2;
    border: 1px solid #e2e2e2;
    border-radius: 4px;
    color: #525252;
    font-family: "asap-bold";
    font-size: 13px;
    padding: 7px 0 1px 8px;
    top: 0;
    bottom: 0;
    line-height: 22px;
    height:38px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.Main.full .FormSelect .selectContent {
    right: 20px;
    left: 300px;
    font-size: 22px;
    padding: 0 0 1px 20px;
    line-height: 38px;
}

.DttDetailsView.mobile .FormSelect .selectContent {
    left:0;
    right:8px;
    top:auto;
    bottom:0;
}

.FormSelect.editing .selectContent {
    background:#fff;
}

.FormSelect .DttButton.triggerButton {
    background:none;
    position:absolute;
    z-index:30;
    right:8px;
    left:140px;
    box-shadow:none;
}

.FormSelect .DttButton.triggerButton.disabled .icon {
    display:none;
}

.Main.full .FormSelect .DttButton.triggerButton {
    right: 20px;
    left: 300px;
}

.DttDetailsView.mobile .FormSelect .DttButton.triggerButton {
    left:0;
    right:0;
    bottom:3px;
}

.FormSelect .DttButton.triggerButton .icon {
    right:8px;
}

.DttDetailsView.mobile .FormSelect .DttButton.triggerButton .icon {
    top:10px !important;
    right:12px !important;
}

.Main .FormSelect .DttButton.triggerButton .icon {
    font-size:22px;
    color:#000;
    line-height:22px;
    top:7px;
}

.Main.full .FormSelect .DttButton.triggerButton .icon {
    font-size: 32px;
    line-height: 27px;
    top:6px;
}

.DttDetailsView .logContent .itemWrap:first-child {
    border:none;
}

.DttDetailsView .logContent .itemWrap {
   border-top:4px solid #fff;
   margin-bottom:20px;
   min-height: 100px;
}

.DttDetailsView .logContent .lbNoentires, .DttDetailsView .logContentKO .lbNoentires {
    margin: 0 24px 19px 18px;
}

.Main.mobile .DttDetailsView .logContent .lbNoentires, .DttDetailsView.mobile .logContent .lbNoentires {
    margin-left: 8px;
}

.DttDetailsView .statisticContent {
    margin:0;
    padding-top:12px;
}

.DttDetailsView .statisticContent .adminTimeWrap {
    margin:0 8px 20px;
}

.Main.full .DttDetailsView .statisticContent .adminTimeWrap {
    margin:0 20px 30px;
}

.DttDetailsView .statisticContent .adminTimeWrap .timeHeader {
    margin-bottom:20px;
}

.Main .DttDetailsView .statisticContent .adminTimeWrap .blockWrap {
    float:none;
    clear:both;
    margin-bottom:10px;
}

.Main.full .DttDetailsView .statisticContent .adminTimeWrap .blockWrap {
    float:left;
    clear:none;
    margin-bottom:10px;
    margin-right:20px;
}

.Main .DttDetailsView .statisticContent .adminTimeWrap .blockWrap .TranslatableText {
    float:none;
    display:inline-block;
}

.Main.full .DttDetailsView .statisticContent .adminTimeWrap .blockWrap .TranslatableText {
    float: left;
}

.Main .DttDetailsView .statisticContent .adminTimeWrap .blockWrap .SimpleDiv {
    float:right;
}

.Main.full .DttDetailsView .statisticContent .adminTimeWrap .blockWrap .SimpleDiv {
    float:left;
}

.Main.full .DttDetailsView .statisticContent .adminTimeWrap .blockWrap:nth-child(4) {
    margin-right:0;
}

.Main .DttDetailsView .statisticContent .adminTimeWrap .blockWrap:nth-child(4) {
    margin-left: 0;
}

.DttDetailsView .statisticContent .adminTimeWrap .blockWrap .SimpleDiv {
    width:110px;
}

.DttDetailsView .statisticContent .lpWrap {
    margin-bottom:-10px;
    margin-right:8px;
    height: 110px;
}

.Main.full .DttDetailsView .statisticContent .lpWrap {
    margin-right:20px;
    margin-left:12px;
}

.DttDetailsView .statisticContent .funcInnerWrap, .DttDetailsView .statisticContent .tbWrap, .DttDetailsView .statisticContent .tbScheduledWrap {
    clear: both;
    position: relative;
    padding: 0 8px 0;
}

.DttDetailsView .statisticContent .DttTestBlockRenderer, .DttDetailsView .statisticContent .DttStudentTestBlockRenderer, .DttDetailsView .statisticContent .tbScheduledWrap, .DttDetailsView .statisticContent .funcInnerWrap {
    /* border-top: 4px solid #fff; */
    /* padding-top: 30px; */
    position: relative;
    /* padding: 0 8px 0; */
}

.Main.full .DttDetailsView .statisticContent .DttTestBlockRenderer, .Main.full  .DttDetailsView .statisticContent .DttStudentTestBlockRenderer, .Main.full  .DttDetailsView .statisticContent .tbScheduledWrap, .Main.full  .DttDetailsView .statisticContent .funcInnerWrap {
    /* padding-left:20px; */
    /* padding-right:20px; */
}

.DttDetailsView .statisticContent .cwuAll, .DttDetailsView .statisticContent .cwuTests, .DttDetailsView .statisticContent .cwuScheduledTests {
    padding:0 8px;
}

.Main.full .DttDetailsView .statisticContent .cwuAll, .Main.full .DttDetailsView .statisticContent .cwuTests, .Main.full .DttDetailsView .statisticContent .cwuScheduledTests {
    padding: 0 8px;
}

.DttDetailsView .statisticContent .DttTestBlockRenderer .testWrap, .DttDetailsView .statisticContent .DttStudentTestBlockRenderer .testWrap {
    position: relative;
}

.Main .DttDetailsView .statisticContent .DttCorrectWrongUnansweredBar .cwuWrap {
    height:34px;
}

.Main .DttDetailsView .statisticContent .segmentDate {
    color:#797979;
    font-size:15px;
}

.DttDetailsView .statisticContent .mgButton.DttButton {
    width: 35px;
    height: 35px;
    position: absolute;
    right:0;
    top: 32px;
}

.DttDetailsView .statisticContent .mgButton.DttButton .icon {
    color: #545454;
    font-size: 27px;
    top: 4px;
    right: 5px;
}

.DttDetailsView .statisticContent .funcInnerWrap .formSubHeaderWrap {
    margin:0 0 10px;
    padding-top: 0;
}

.DttDetailsView .statisticContent .funcInnerWrap .DttCorrectWrongUnansweredBar  {
    height:70px;
    margin-bottom:20px;
}

.DttDetailsView .statisticContent .funcInnerWrap.hidden, .DttDetailsView .statisticContent .tbScheduledWrap.hidden, .DttDetailsView .statisticContent .tbWrap.hidden, .DttDetailsView .statisticContent .tbScheduledWrap.hidden {
    display: none;
}

.Main .DttDetailsView .statisticContent .DttTestBlockRenderer .DttSubSegmentAnalysisBar, .Main .DttDetailsView .statisticContent .DttStudentTestBlockRenderer .DttSubSegmentAnalysisBar {
    height: 100px;
}

.Main .DttDetailsView.mobile .statisticContent .DttTestBlockRenderer .DttSubSegmentAnalysisBar, .Main .DttDetailsView.mobile .statisticContent .DttStudentTestBlockRenderer .DttSubSegmentAnalysisBar {
    height: 140px;
}

.Main .DttDetailsView .statisticContent .DttTestBlockRenderer .DttSubSegmentAnalysisBar .result, .Main .DttDetailsView .statisticContent .DttStudentTestBlockRenderer .DttSubSegmentAnalysisBar .result {
    right: 0;
    top: 0;
    left: auto;
    margin-top: -13px;
}

.Main.full .DttDetailsView .statisticContent .DttTestBlockRenderer .DttSubSegmentAnalysisBar .result, .Main.full .DttDetailsView .statisticContent .DttStudentTestBlockRenderer .DttSubSegmentAnalysisBar .result {
    margin-top: -3px;
}

.Main .DttDetailsView.mobile .statisticContent .DttTestBlockRenderer .DttSubSegmentAnalysisBar .result, .Main .DttDetailsView.mobile .statisticContent .DttStudentTestBlockRenderer .DttSubSegmentAnalysisBar .result {
    right: 0;
    left: auto;
    top: 43px;
}

.Main .DttDetailsView .statisticContent .DttTestBlockRenderer .DttSubSegmentAnalysisBar .errorPointsWrap, .Main .DttDetailsView .statisticContent .DttStudentTestBlockRenderer .DttSubSegmentAnalysisBar .errorPointsWrap {
    left: 170px;
}

.Main.full .DttDetailsView .statisticContent .DttTestBlockRenderer .DttSubSegmentAnalysisBar .errorPointsWrap, .Main.full .DttDetailsView .statisticContent .DttStudentTestBlockRenderer .DttSubSegmentAnalysisBar .errorPointsWrap {
    left: 255px;
}

.Main .DttDetailsView.mobile .statisticContent .DttTestBlockRenderer .DttSubSegmentAnalysisBar .errorPointsWrap, .Main .DttDetailsView.mobile .statisticContent .DttStudentTestBlockRenderer .DttSubSegmentAnalysisBar .errorPointsWrap {
    left: 0;
    top: 30px;
    margin-top: 0;
}

.mobile .DttDetailsView .statisticContent .DttSubSegmentAnalysisBar .errorPointsWrap {
    top:0;
    margin-top:-3px;
}

.Main .DttDetailsView .statisticContent .DttTestBlockRenderer .DttSubSegmentAnalysisBar .DttCorrectWrongUnansweredBar, .Main .DttDetailsView .statisticContent .DttStudentTestBlockRenderer .DttSubSegmentAnalysisBar .DttCorrectWrongUnansweredBar {
    top: 30px;
    left: 0;
    right: 0;
}

.Main.full .DttDetailsView .statisticContent .DttTestBlockRenderer .DttSubSegmentAnalysisBar .DttCorrectWrongUnansweredBar, .Main.full .DttDetailsView .statisticContent .DttStudentTestBlockRenderer .DttSubSegmentAnalysisBar .DttCorrectWrongUnansweredBar {
    top: 40px;
}

.Main .DttDetailsView.mobile .statisticContent .DttTestBlockRenderer .DttSubSegmentAnalysisBar .DttCorrectWrongUnansweredBar, .Main .DttDetailsView.mobile .statisticContent .DttStudentTestBlockRenderer .DttSubSegmentAnalysisBar .DttCorrectWrongUnansweredBar {
    top: 70px;
}

.DttTestBlockRenderer {
    margin-top: 16px;
}

/*** TitleSelector ***/
.TitleSelector .DttRadioButton {
    clear: both;
    height: 30px;
    margin-bottom: 20px;
}

.TitleSelector .DttRadioButton.rbWrap3 {
    margin-bottom:0;
}

.TitleSelector .DttRadioButton .radioBtn {
    margin-top:3px;
}

.TitleSelector .DttRadioButton .caption {
    font-family:asap-bold;
    color:#505050;
    font-size:15px;
    margin-left:10px;
}

.Main.full .TitleSelector .DttRadioButton .caption {
    font-size: 22px;
    margin-left: 15px;
}

.TitleSelector .customInput {
    position: relative;
    margin-bottom: 10px;
    margin-left: 20px;
    width: 165px;
    height: 25px;
    background: #e2e2e2;
    border: 1px solid #e2e2e2;
    border-radius: 4px;
    color: #525252;
    font-family: "asap-bold";
    font-size: 15px;
    padding: 1px 0 1px 20px;
}

.Main.full .TitleSelector .customInput {
    font-size: 22px;
    width: 250px;
    height: 38px;
    margin-left: 25px;
}

.TitleSelector .customInput label {
    display:none;
}


.TitleSelector .customInput.editing {
    background: #fff;
}

/*** FormTextArea ***/

.FormTextArea {
    background: #e2e2e2;
    color: #646464;
    border-radius:4px;
}

.Main .DttDetailsView .FormElement.FormTextArea {
    height:150px;
}

.Main.full .DttDetailsView .FormElement.FormTextArea {
    height: 500px;
}

.FormTextArea .hint {
    color:#979797;
    position:absolute;
    margin:12px 0 0 10px;
    z-index:50;
}

.FormTextArea .hint.hidden {
    display:none;
}

.FormTextArea .textArea {
    border: none;
    width: 100%;
    height: 100%;
    color: #525252;
    font-family: asap-bold;
    font-size: 13px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding:12px 10px;
    -webkit-user-select:text;
}

.Main.full .FormTextArea .textArea {
    font-size:22px;
}

/*** categoryContent ***/

.categoryContent {
    margin:0 8px;
}

.Main.full .categoryContent {
    margin:0 17px 0 18px;
}

.categoryContent .byCategoryContent .DttCategoryRenderer, .categoryContent .byCategoryContent .DttStudentCategoryRenderer {
    padding-bottom:45px;
}

.categoryContent .byCategoryContent .DttCategoryRenderer.hidden, .categoryContent .byCategoryContent .DttStudentCategoryRenderer.hidden {
    display:none;
}

.categoryContent .byCategoryContent .lineWrap {
    background: #e0e0e0; /* grey bg color */
    margin-bottom: 5px;
    position: relative;
}

.categoryContent .byCategoryContent .lineWrap.ccHoverClass {
    box-shadow:none;
}

.categoryContent .byCategoryContent .idWrap {
    color: #545454;
    font-family: asap-regular;
    font-size: 16px;
    display: inline-block;
    margin: 19px 5px 19px 0;
    overflow: hidden;
}

.categoryContent .byCategoryContent .idWrap.empty {
    display:none;
}

.Main.full .categoryContent .byCategoryContent .idWrap {
    font-size: 24px;
}

.categoryContent .byCategoryContent .nameWrap {
    color: #545454;
    font-family: asap-regular;
    font-size: 16px;
    display: inline-block;
    text-transform: uppercase;
    margin: 19px 0;
    width: 230px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.Main.full .categoryContent .byCategoryContent .nameWrap {
    font-size: 24px;
    width: 430px;
}

.categoryContent.mobile .byCategoryContent .idWrap {
    margin: 30px 5px 95px 20px;
}

.categoryContent.mobile .byCategoryContent .nameWrap {
    margin: 30px 0 95px;
}

.categoryContent .byCategoryContent .DttCorrectWrongUnansweredBar {
    position: absolute;
    right: 68px;
    left: 285px;
    top: 22px;
    bottom: 22px;
}

.categoryContent .byCategoryContent .DttCorrectWrongUnansweredBar {
    left: 0;
    right: 0;
    top: 50px;
}

.Main .categoryContent .byCategoryContent .DttCorrectWrongUnansweredBar .cwuWrap {
    height: 35px;
}

.categoryContent .byCategoryContent .mgButton.DttButton {
    width: 35px;
    height: 35px;
    position: absolute;
    right: 25px;
    top: 8px;
}


.categoryContent .byCategoryContent .mgButton.DttButton {
    right: 0;
}

.categoryContent .byCategoryContent .DttButton.mgButton .icon {
    color: #545454;
    font-size: 27px;
    top: 4px;
    right: 5px;
}

/*** FormQuestionSetsSelect ***/

.Main .FormQuestionSetsSelect .lineWrap,
.Main .FormRadioButtonSelect .lineWrap {

    position: relative;
}

.Main .DttDetailsView .FormQuestionSetsSelect.FormElement,
.Main .DttDetailsView .FormRadioButtonSelect.FormElement {

    height: auto;
    min-height: 0;
}

.Main.mobile .DttDetailsView .FormQuestionSetsSelect.FormElement,
.Main.mobile .DttDetailsView .FormRadioButtonSelect.FormElement {
    margin-left: 0;
}

.FormQuestionSetsSelect .lineWrap .DttCheckBox,
.FormRadioButtonSelect .lineWrap .DttCheckBox {
    border: 3px solid #f2b1a1;
    width: 6px;
    height: 6px;
    background: #f2b1a1;
    border-radius: 20px;
    float: left;
    margin-top: 4px;
    cursor: pointer;
    cursor: -webkit-pointer;
}

    .FormQuestionSetsSelect .lineWrap .DttCheckBox.disabled,
    .FormRadioButtonSelect .lineWrap .DttCheckBox.disabled {
        border: 3px solid #999999;
        background: #999999;
        cursor: auto;
    }

.Main.full .FormQuestionSetsSelect .lineWrap .DttCheckBox,
.Main.full .FormRadioButtonSelect .lineWrap .DttCheckBox {
    border: 5px solid #f2b1a1;
    width: 10px;
    height: 10px;
}

.Main.full .FormQuestionSetsSelect .lineWrap .DttCheckBox.disabled,
.Main.full .FormRadioButtonSelect .lineWrap .DttCheckBox.disabled {
    border: 5px solid #999999;
    width: 10px;
    height: 10px;
}

.Main .FormQuestionSetsSelect .lineWrap .DttCheckBox.check,
.Main .FormRadioButtonSelect .lineWrap .DttCheckBox.check {
    background: #555555;
    border-color: #d7665c;
}

.Main .FormQuestionSetsSelect .lineWrap .DttCheckBox.check.disabled,
.Main .FormRadioButtonSelect .lineWrap .DttCheckBox.check.disabled {
    background: #555555;
    border-color: #999999;
}

    .Main .FormQuestionSetsSelect .lineWrap .DttCheckBox.check:before,
    .Main .FormRadioButtonSelect .lineWrap .DttCheckBox.check:before {
        display: none;
    }

/*** FormLicenseModelSelect  ***/

.Main .FormLicenseModelSelect .lineWrap {
    position: relative;
    clear:none;
    display:inline-block;
    margin-right:30px;
}

.Main .DttDetailsView .FormLicenseModelSelect.FormElement {
    height: auto;
}

.FormLicenseModelSelect .lineWrap .DttCheckBox {
    border: 3px solid #f2b1a1;
    width: 6px;
    height: 6px;
    background: #f2b1a1;
    border-radius: 20px;
    float: left;
    margin-top: 3px;
    cursor: pointer;
    cursor: -webkit-pointer;
}

.Main.full .FormLicenseModelSelect .lineWrap .DttCheckBox {
    border: 5px solid #f2b1a1;
    width: 10px;
    height: 10px;
    margin-top: 4px;
}

.Main .FormLicenseModelSelect .lineWrap .DttCheckBox.check {
    background: #555555;
    border-color: #d7665c;
}

.Main .FormLicenseModelSelect .lineWrap .DttCheckBox.check:before {
    display:none;
}

.Main .FormLicenseModelSelect .DttCheckBoxGroup .lineWrap .TranslatableText {
    margin-left: 17px;
}

.Main.full .FormLicenseModelSelect .DttCheckBoxGroup .lineWrap .TranslatableText {
    margin-left:27px;
}

/*** navBtns, DttButton elements on test/exercise screen  ***/
.navBtns {
    position: absolute;
    right: 10px;
    bottom: 51px;
    z-index: 100;
    padding: 10px 10px 0px 10px;
}

.Main.mobile .BlockScreen.exerciseMode .navBtns {
    right:8px;
    padding:0 0 0px 0;
}

.Main.full .BlockScreen .navBtns {
    right: 43px;
    bottom: 109px;
    padding: 10px 33px 30px 10px;
}

/*
.Main .BlockScreen.exerciseMode .navBtns {
    background: #ededed;
}*/

.navBtns .DttButton {
    float:left;
}

.Main .BlockScreen.testMode .navBtns {
    right:0;
    bottom:50px;
}

.Main .BlockScreen .DttNumPad {
    bottom: 50%;
    right: 50%;
    margin-right: -330px;
    margin-bottom: -90px;
    white-space: nowrap;
}

.Main.full .BlockScreen .DttNumPad {
    margin-right: -400px;
    margin-bottom: -90px;
}

.Main.mobile .BlockScreen.testMode .navBtns {
    bottom:56px;
    right:8px;
    padding-right:0;
}

.Main.mobile.bottomInset .BlockScreen.testMode .navBtns {
    bottom:73px;
    right:8px;
    padding-right:0;
}

.Main .BlockScreen.testMode .navBtns.mBtns {
    padding: 0 8px 0 0;
    bottom: 45px;
}

.testMode .navBtns .DttButton {
    margin-right:8px;
    border-radius:0;
    border:1px solid #6f7173;
    height:31px;
    min-width:0;
    padding:0 13px;
}


.testMode .navBtns.small .DttButton, .Main .testMode .navBtns.mBtns .DttButton {
    padding: 0;
    /*height: 38px;*/
}

.testMode .navBtns .DttButton .caption {
    position:relative;
    margin:0;
    left:auto;
    right:auto;
    text-transform:none;
    font-family:Arial;
    font-size:20px;
    top:2px !important;
}

.testMode .navBtns .DttButton.hoverClass .innerBtn {
    opacity: 0;
}

.testMode .navBtns .DttButton.withIcon .icon {
    display:none;
}


.testMode .navBtns.small .DttButton.withIcon .icon, .Main .testMode .navBtns.mBtns .DttButton.withIcon .icon {
    display: block;
    right: auto;
}

.testMode .navBtns.small .DttButton .caption, .Main .testMode .navBtns.mBtns .DttButton .caption {
    display: none;
}


.exerciseMode .navBtns .DttButton {
    margin-right: 20px;
    width:155px;
}

.exerciseMode .navBtns .DttButton.Mark {
    width:180px;
}

.exerciseMode .navBtns.small .DttButton.Mark {
    width: 29px;
}



.navBtns.small .DttButton, .Main .navBtns.mBtns .DttButton {
    min-width: 1px;
    width: 29px !important;
    height:29px;
    margin-right: 8px;
}

.biggerNav .navBtns.small .DttButton, .Main .biggerNav .navBtns.mBtns .DttButton {
    width: 40px !important;
    height: 40px;
}

    .biggerNav .navBtns.small .DttButton.Mark {
        width: 40px;
    }

.navBtns.small .DttButton .icon, .Main .navBtns.mBtns .DttButton .icon {
    font-size:29px;
}

.biggerNav .navBtns.small .DttButton .icon, .Main .biggerNav .navBtns.mBtns .DttButton .icon {
    font-size: 38px;
}


.exerciseMode .small .DttButton.withIcon .icon, .Main .exerciseMode .navBtns.mBtns .DttButton.withIcon .icon {
    right: auto;
}

.exerciseMode .navBtns.small .DttButton .caption, .Main .exerciseMode .navBtns.mBtns .DttButton .caption {
    display: none;
}


.exerciseMode .navBtns .DttButton.Submit {
    display:none;
}

.navBtns .DttButton.CheatButton, .navBtns .DttButton.Cheat2Button {
    display: none;
}

.Main.full .navBtns .DttButton.CheatButton, .Main.full .navBtns .DttButton.Cheat2Button {
    display: none;
}

.exerciseMode.reviewMode .navBtns .DttButton.Submit {
    display:block;
}

.testMode .navBtns .DttButton:last-child, .exerciseMode .navBtns .DttButton:last-child {
    margin-right:0;
    width: 144px;
}

.exerciseMode .navBtns .Mark.blueBg.marked {
    background: #fff;
    color: #323232;
}

.exerciseMode .navBtns .RefVehicle {
    color: #fff;
    background: #888888;
    width: 196px;
 }

.exerciseMode .navBtns .Mark.blueBg.marked .caption {
    color: #323232;
}

.testMode .navBtns .RefVehicle {
    color: #fff;
    background: #888888;
 }

.testMode .navBtns .Submit {
    color: #fff;
    background: #e0010c;
    background: -moz-linear-gradient(90deg, rgba(224,1,12,1) 0%, rgba(232,71,79,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(232,71,79,1)), color-stop(100%, rgba(224,1,12,1)));
    background: -webkit-linear-gradient(90deg, rgba(224,1,12,1) 0%, rgba(232,71,79,1) 100%);
    background: -o-linear-gradient(90deg, rgba(224,1,12,1) 0%, rgba(232,71,79,1) 100%);
    background: -ms-linear-gradient(90deg, rgba(224,1,12,1) 0%, rgba(232,71,79,1) 100%);
    background: linear-gradient(0deg, rgba(224,1,12,1) 0%, rgba(232,71,79,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8474f', endColorstr='#e0010c',GradientType=0 );
}

.testMode .navBtns .Mark {
    color: #000;
    background: white;
    background: -moz-linear-gradient(90deg, rgba(234,174,1,1) 0%, rgba(240,196,71,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(240,196,71,1)), color-stop(100%, rgba(234,174,1,1)));
    background: -webkit-linear-gradient(90deg, rgba(234,174,1,1) 0%, rgba(240,196,71,1) 100%);
    background: -o-linear-gradient(90deg, rgba(234,174,1,1) 0%, rgba(240,196,71,1) 100%);
    background: -ms-linear-gradient(90deg, rgba(234,174,1,1) 0%, rgba(240,196,71,1) 100%);
    background: linear-gradient(0deg, rgba(234,174,1,1) 0%, rgba(240,196,71,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0c447', endColorstr='#eaae01',GradientType=0 );
}

.testMode .navBtns .Mark.whiteBg {

    background: #eaae01 !important;
}

.testMode .navBtns .Next {
    color: #fff;
    background: #379149;
    background: -moz-linear-gradient(90deg, rgba(55,145,73,1) 0%, rgba(110,175,123,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(110,175,123,1)), color-stop(100%, rgba(55,145,73,1)));
    background: -webkit-linear-gradient(90deg, rgba(55,145,73,1) 0%, rgba(110,175,123,1) 100%);
    background: -o-linear-gradient(90deg, rgba(55,145,73,1) 0%, rgba(110,175,123,1) 100%);
    background: -ms-linear-gradient(90deg, rgba(55,145,73,1) 0%, rgba(110,175,123,1) 100%);
    background: linear-gradient(0deg, rgba(55,145,73,1) 0%, rgba(110,175,123,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6eaf7b', endColorstr='#379149',GradientType=0 );
}

/*** DttTabBar, tab elemenets on test/exercise screen ***/

.BlockScreen .DttTabBar {
    position: absolute;
    bottom: 41px;
    z-index: 80;
}

.bottomInset .BlockScreen .DttTabBar {
    bottom: 58px;
}

.Main.full .BlockScreen .DttTabBar {
    bottom: 57px;
}

.Main .BlockScreen .DttTabBar .DttButton.nonButton {
    background:#f5f5f5;
    color:#000;
    border:1px solid #bec0c2;
    border-radius: 4px;
    height:auto;
    padding:0 13px 10px 13px;
    margin:0;
    min-width:1px;
}

.Main .BlockScreen .DttTabBar .DttButton.nonButton .caption {
    font-family:Arial;
    font-size:13px;
    margin:0;
    font-weight:bold;
    text-transform:none;
    top:3px !important;
}

.Main.full .BlockScreen .DttTabBar .DttButton.nonButton .caption {
    font-size:20px;
}

.Main .BlockScreen .DttTabBar .DttButton.nonButton.selected {
    background:#379149;
}

.BlockScreen .DttTabBar .DttButton.selected .caption {
    color:#fff;
}

.Main .BlockScreen .DttTabBar .DttButton.nonButton.marked {
    padding-left:25px;
}

.Main .BlockScreen .DttTabBar .DttButton.nonButton.marked .icon {
    display:block;
    width: 10px;
    height: 10px;
    left: 10px;
    top: 8px;
    position:absolute;
    background:url("images/icons/mark.png") no-repeat 0 0;
}

.Main.full .BlockScreen .DttTabBar .DttButton.nonButton.marked .icon {
    top: 12px;
}

.BlockScreen.exerciseMode .DttTabBar {
    display: none;
}

/*** blockUiNav/TestNavigationButton, question number elemetns on exercise/test screen ***/

.scrollWrapOuter .blockUiNav {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top:auto;
    overflow: hidden;
    height: 33px;
    z-index: 90;
    padding-top: 10px;
    padding-left: 10px;
}

.bottomInset .scrollWrapOuter .blockUiNav {
    height: 50px;
}

.Main.full .scrollWrapOuter .blockUiNav {
    height:50px;
}

.scrollWrapOuter .blockUiNav .inner {
    top:11px;
    left:8px;
    position:absolute;
    right:auto;
}

.biggerNav .scrollWrapOuter .blockUiNav .inner {
    top: 4px;
}

.Main.full .scrollWrapOuter .blockUiNav .inner {
    top:10px;
    left:10px;
}

.testMode .blockUiNav {
    background: #379149;
}

.exerciseMode .blockUiNav {
    left:68px;
    right:75px;
    bottom:10px;
    height:35px;
}

.bottomInset .exerciseMode .scrollWrapOuter > * {
    bottom:27px !important;
}

.Main.full .exerciseMode .blockUiNav {
    left: 132px;
    right: 168px;
    bottom: 31px;
    height: 51px;
}

.Main.mobile .exerciseMode .blockUiNav {
    left:68px;
    right:65px;
}

.Main .DttButton.scrollNav {
    position:absolute;
    width:31px;
    height:35px;
    background:none;
}

.Main.full .DttButton.scrollNav.withIcon .icon {
    top:7px;
    right:6px;
}

.testMode .DttButton.scrollNav {
    display:none;
}

.Main .DttButton.scrollNav.withIcon .icon {
    font-size: 36px;
    color: #2493a6;
    position: relative;
    margin:-4px 0 0 0;
    right:auto;
}

.Main .DttButton.hoverClass.scrollNav.withIcon .icon {
    color: #f36c49;
}

.Main.full .DttButton.scrollNav.withIcon .icon {
    font-size: 56px;
    margin: -18px 0 0 -7px;
}

.DttButton.scrollNav.back-full {
    left:10px;
    bottom:10px;
}

.Main.full .DttButton.scrollNav.back-full {
    left: 36px;
    bottom: 37px;
}

.DttButton.scrollNav.back {
    left: 41px;
    bottom: 10px;
}

.Main.full .DttButton.scrollNav.back {
    left: 85px;
    bottom: 37px;
}

.DttButton.scrollNav.forward {
    right:41px;
    bottom: 10px;
}

.Main.full .DttButton.scrollNav.forward {
    right: 98px;
    bottom: 37px;
}

.DttButton.scrollNav.forward-full {
    right: 10px;
    bottom: 10px;
}

.Main.full .DttButton.scrollNav.forward-full {
    right: 50px;
    bottom: 37px;
}

.TestNavigationButton input {
    border: 1px solid #000;
    margin: 0 4px 0 0;
    padding: 4px 0 4px;
    font-family: Arial;
    font-weight: bold;
    width: 37px;
    font-size: 13.25px;
    background: #fff;
    color: #2d2d2d;
}

.Main.full .TestNavigationButton input {
    width: 55px;
    margin: 0 8px 0 0;
    font-size: 19.85px;
    padding: 6px 0 8px;
}

.TestNavigationButton input::-moz-focus-inner {
    border: 0;
}

.TestNavigationButton.touched input {
    background: #379149;
    color:#fff;
}

.BlockScreen.exerciseMode .TestNavigationButton {
    border-radius: 5px;
    border: 2px solid #fff;
    padding:1px;
    position:relative;
}

.Main.full .BlockScreen.exerciseMode .TestNavigationButton {
    padding: 2px;
    margin-right: 1px;
}

.BlockScreen.exerciseMode .TestNavigationButton.correct input {
    background:#88c8a7;
}

.BlockScreen.exerciseMode .TestNavigationButton.wrong input {
    background: #d20329;
}

.BlockScreen.exerciseMode .TestNavigationButton.active {
    border-color: #747474;
}

.BlockScreen.exerciseMode .TestNavigationButton input {
    font-family: asap-bold;
    font-weight: normal;
    color: #fff;
    background: #e2e2e2;
    font-size: 12px;
    padding: 7px 0 5px;
    width:29px;
    border:1px solid #fff;
    border-radius:5px;
    margin-right:0;
}

.Main.full .BlockScreen.exerciseMode .TestNavigationButton input {
    font-size: 18px;
    width: 44px;
    padding: 11px 0 9px;
}

.TestNavigationButton .video {
    display: none;
    position: absolute;
}

.TestNavigationButton .mark {
    display: none;
    position: absolute;
}

.BlockScreen.testMode .TestNavigationButton .markWrap {
    overflow: hidden;
    position: absolute;
    width: 16px;
    height: 16px;
    right: 5px;
    top: 1px;
    pointer-events: none;
}

.Main.full .BlockScreen.testMode .TestNavigationButton .markWrap {
    width: 24px;
    height: 24px;
    right: 9px;
    top: 1px;
}

.BlockScreen.testMode .TestNavigationButton.active .markWrap {
    right:7px;
}

.BlockScreen.testMode .TestNavigationButton .mark {
    background: #eaae01;
    width: 35px;
    height: 35px;
    border: 1px solid #000;
    margin:-18px 0 0 8px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
}

.BlockScreen.exerciseMode .TestNavigationButton .mark {
    left:2px;
    right:2px;
    bottom:2px;
    height:2px;
    border:1px solid #2493a6;
    background:#2493a6;
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px;
}

.Main.full .BlockScreen.exerciseMode .TestNavigationButton .mark {
    height: 4px;
    left: 3px;
    right: 3px;
    bottom: 3px;
}

.BlockScreen.exerciseMode .TestNavigationButton .video {
    top: 0;
    left: 0;
    font-size: 18px;
    color: #555;
    pointer-events: none;
}

.Main.full .BlockScreen.exerciseMode .TestNavigationButton .video {
    font-size:28px;
}

.BlockScreen.testMode .TestNavigationButton.active input {
    border:3px solid #000;
    margin-top:-2px;
    margin-left:0;
    margin-right:4px;
    width:37px;
}

.Main.full .BlockScreen.testMode .TestNavigationButton.active input {
    margin-left:-2px;
}

.Main.full .BlockScreen.testMode .TestNavigationButton.active input {
    margin-right: 6px;
    width: 59px;
}

.TestNavigationButton.submitted input {
    background: green;
}

.TestNavigationButton.submitted input, .reviewMode .TestNavigationButton.wrong input, .reviewMode .TestNavigationButton.correct input {
    color: #fff;
}

.BlockScreen.testMode.reviewMode .TestNavigationButton input {
    background: #e0e0e0; /* grey bg color from f0f0f0*/
}

.BlockScreen.testMode.reviewMode .TestNavigationButton.correct input {
    background: #379149;
}

.BlockScreen.testMode.reviewMode .TestNavigationButton.wrong input {
    background: #d1002d;
}

.BlockScreen.testMode .TestNavigationButton .video {
    top: 14px;
    left: 27px;
    width: 9px;
    height: 11px;
    text-align: center;
    color: #fff;
    background: #333;
    font-size: 13px;
    line-height: 12px;
    pointer-events: none;
}

.Main.full .BlockScreen.testMode .TestNavigationButton .video {
    top: 25px;
    left: 36px;
    width: 16px;
    height: 12px;
    font-size: 20px;
}

.BlockScreen .TestNavigationButton.hasVideo .video {
    display: block;
}

.BlockScreen .TestNavigationButton.marked .mark {
    display: block;
}

.BlockScreen .TestNavigationButton.markedTeacher .mark {
    display: block;
    background: #dc6c56;
    border-color: #dc6c56;
}

/*** answersWrap, questions remaining container on test screen  ***/

.BlockScreen .answersContent.notResized {
    visibility:hidden;
}

.reviewWrap {
    position:absolute;
    top:105px;
    left:500px;
    z-index:40;
    display:none;
}

.testMode .reviewWrap {
    position: absolute;
    top: 95px;
    left: 575px;
    z-index: 40;
    display: none;
}

/*
.reviewWrap.shown {
    display:block;
}*/

.reviewWrap.shown.resized {
    display:block;
}

.answersWrap {
    background: #d3f6da;
    position: absolute;
    height: auto;
    z-index: 50;
}

.Main .testMode .answersWrap {
    right: 10px;
}

.Main.mobile .testMode .answersWrap {
    right:8px;
}

.Main.mobile .testMode .answersWrap, .Main .testMode .mco .answersWrap {
    height: auto;
}

.Main.full .testMode .answersWrap {
    right:75px;
}

.answersWrap .entryLine {
    clear:both;
    font-family:Arial;
    font-weight:bold;
    font-size:15px;
    color:#0b333c;
}

/* 11px */

.testMode .answersWrap .entryLine {
    min-height:50px;
}

.Main .BlockScreen.testMode .content.bsSmall .answersWrap .entryLine {
    font-size:13px;
}

.Main .BlockScreen.testMode .content.bsVerySmall .answersWrap .entryLine {
    font-size: 11px;
}

.Main:not(.mobile) .testMode .bsMin .answersWrap .entryLine, .Main .testMode .bsSmall .answersWrap .entryLine, .Main .testMode .bsVerySmall .answersWrap .entryLine {
    min-height:30px;
}

/*
    8px

    6px
*/

.Main.full .answersWrap .entryLine {
    font-size: 22.5px;
}

/* 15.85*/

.answersWrap .entryLine .TranslatableText {
    padding-top:5px;
    overflow:hidden;
    padding-bottom:9px;
}

.Main.full .answersWrap .entryLine .TranslatableText {
    padding-top:1px;
}

.answersWrap .entryLine.disabled {
    display:none;
    pointer-events:none;
}

.exerciseMode .answersWrap .entryLine {
    font-family: asap-regular;
    font-size: 15px;
    font-weight:normal;
    color: #323232;
    /*height:59px;*/
}

.Main.full .exerciseMode .answersWrap .entryLine {
    font-size:22.5px;
}

.Main .exerciseMode .content.bsSmall .answersWrap .entryLine {
    font-size: 13px;
}

.Main .exerciseMode .content.bsVerySmall .answersWrap .entryLine {
    font-size: 11px;
}

.exerciseMode .answersWrap .entryLine .TranslatableText {
    padding-bottom:9px;
    padding-top:2px;
}

.BlockScreen.testMode .reviewWrap {
    background: #d1002d;
}

.BlockScreen.testMode .reviewWrap.allCorrect {
    background: #379149;
}

.BlockScreen.exerciseMode .reviewWrap {
    left: 630px;
    top: 236px;
    padding: 0;
    background: #d1002d;
}

.BlockScreen.exerciseMode .reviewWrap.allCorrect {
    background:#88c8a7;
}

.BlockScreen.exerciseMode .answersWrap {
    left: 737px;
    top: 145px;
    right:0;
    height: auto;
    background: #ededed;
    padding:0 10px 0 5px;
}

/*
.BlockScreen.exerciseMode .answersWrap.limitRight {
    padding-right:125px;
}*/

.answersWrap.hidden {

    visibility: hidden;
}

.BlockScreen.exerciseMode .answersWrap.limitRight .answersContent .entryLine:last-child {
    padding-right:99px;
}

.BlockScreen.testMode .answersWrap.limitRight .answersContent .entryLine:last-child {
    padding-right:109px;
}

.Main.full .BlockScreen.exerciseMode .answersWrap {
    right:75px;
}

.BlockScreen.testMode .videoWrap {
    right: 8px;
    top: 9px;
    background: #d3f6da;
    position: absolute;
    z-index: 99;
}

.Main.full .BlockScreen.testMode .videoWrap {
    right: 75px;
}

.Main.mobile .BlockScreen.testMode .videoWrap {
    left:8px;
}

.BlockScreen.exerciseMode .videoWrap {
    left: 635px;
    right:0;
    top: 112px;
    height: 382px;
    background: #ededed;
    padding: 7px 10px 0 5px;
    position:absolute;
    z-index:99;
}

.BlockScreen.testMode .videoWrap .TestVideo {
    margin-top: 60px;
    width:402px;
    margin-left:0;
    position:relative;
}

.Main.full .BlockScreen.testMode .videoWrap .TestVideo {
    margin-left: 68px;
}

.Main.mobile .BlockScreen.testMode .videoWrap .TestVideo {
    margin-top:0;
    width:auto;
}

.BlockScreen.exerciseMode .videoWrap .TestVideo {
    margin-top:30px;
}

.BlockScreen .videoWrap.fresh .TestVideo {
    visibility:hidden;
}

.BlockScreen.exerciseMode .videoWrap.minimal .TestVideo {
    margin-top:0;
}

.Main.mobile .BlockScreen.exerciseMode .videoWrap .TestVideo {
    margin-top:0;
}

.BlockScreen.testMode .videoWrap .videoHeadline {
    font-family: Arial;
    font-size: 13px;
    font-weight: normal;
    color: #0b333c;
    text-align:center;
    position:absolute;
    top:120px;
    left:0;
    right:0;
}

.Main.full .BlockScreen.testMode .videoWrap .videoHeadline {
    font-size: 19.5px;
    top:150px;
}

.Main.mobile .BlockScreen.testMode .videoWrap .videoHeadline {
    top:110px;
}

.BlockScreen.exerciseMode .videoWrap .videoHeadline {
    font-family: asap-regular;
    font-size: 16px;
    font-weight: normal;
    color: #323232;
    margin-left:10px;
}

.Main.full .BlockScreen.exerciseMode .videoWrap .videoHeadline {
    font-size: 22.5px;
    margin-left: 60px;
}

.BlockScreen.testMode .videoWrap .videoHeadline b {
    color:#ff0000;
}

.BlockScreen.exerciseMode .videoWrap .videoHeadline b {
    color:#54cea9;
}

.BlockScreen.exerciseMode .videoWrap .videoBtns {
    width: 185px;
    margin: 10px 0 0 10px;
}

.BlockScreen.exerciseMode .videoWrap.minimal .videoBtns {
    margin-top:10px;
}

.Main.full .BlockScreen.exerciseMode .videoWrap .videoBtns {
    width: 215px;
    margin: 70px 0 0 60px;
}

.Main.mobile .BlockScreen.exerciseMode .videoWrap .videoBtns {
    margin-top:10px;
    width:135px;
}

.BlockScreen.testMode .videoWrap .videoBtns .DttButton {
    margin:0 34px 8px;
    border-radius:0;
    border: 1px solid #5d5f60;
    background: rgba(107,107,181,1);
    background: -moz-linear-gradient(top, rgba(107,107,181,1) 0%, rgba(69,69,162,1) 50%, rgba(69,69,162,1) 51%, rgba(51,51,153,1) 71%, rgba(51,51,153,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(107,107,181,1)), color-stop(50%, rgba(69,69,162,1)), color-stop(51%, rgba(69,69,162,1)), color-stop(71%, rgba(51,51,153,1)), color-stop(100%, rgba(51,51,153,1)));
    background: -webkit-linear-gradient(top, rgba(107,107,181,1) 0%, rgba(69,69,162,1) 50%, rgba(69,69,162,1) 51%, rgba(51,51,153,1) 71%, rgba(51,51,153,1) 100%);
    background: -o-linear-gradient(top, rgba(107,107,181,1) 0%, rgba(69,69,162,1) 50%, rgba(69,69,162,1) 51%, rgba(51,51,153,1) 71%, rgba(51,51,153,1) 100%);
    background: -ms-linear-gradient(top, rgba(107,107,181,1) 0%, rgba(69,69,162,1) 50%, rgba(69,69,162,1) 51%, rgba(51,51,153,1) 71%, rgba(51,51,153,1) 100%);
    background: linear-gradient(to bottom, rgba(107,107,181,1) 0%, rgba(69,69,162,1) 50%, rgba(69,69,162,1) 51%, rgba(51,51,153,1) 71%, rgba(51,51,153,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6b6bb5', endColorstr='#333399', GradientType=0 );
}

.BlockScreen.exerciseMode .videoWrap .videoBtns .DttButton {
    min-width:180px !important;
}

.BlockScreen.exerciseMode .videoWrap .videoBtns .DttButton .caption {
    font-size:9px !important;
    top: 13.5px !important;
}

.BlockScreen.testMode .videoWrap .videoBtns .DttButton .caption {
    text-transform:none;
    font-size:13px;
    font-weight:bold;
    font-family:Arial;
    right:0;
    top: 12.5px !important;
}


.Main.mobile .BlockScreen.testMode .videoWrap .videoBtns .DttButton {
    margin-left:auto;
    margin-right:auto;
}

.BlockScreen.testMode .videoWrap .videoBtns .DttButton.withIcon .icon {
    display:none;
}

.BlockScreen.exerciseMode .videoWrap .videoBtns .DttButton.withIcon .icon {
    top:0;
    right:18px;
}


.BlockScreen.exerciseMode .videoWrap .videoBtns .DttButton.withIcon .icon.smallsize {
    top:7px;
    right:14px;
}

.BlockScreen.exerciseMode .videoWrap .videoBtns .DttButton {
    margin-bottom:10px;
}

.BlockScreen.exerciseMode .videoWrap.minimal .videoBtns .DttButton {
    margin-bottom:10px;
}

.BlockScreen.exerciseMode .videoWrap.hidden, .BlockScreen.testMode .videoWrap.hidden {
    display:none;
}

.BlockScreen.exerciseMode .answersWrap .entryLine {
    margin-bottom:0;
    min-height:26px;
}

.Main.mobile .exerciseMode .answersWrap .entryLine {
    min-height:39px;
}

.BlockScreen.exerciseMode .bsMin .answersWrap .entryLine:nth-of-type(1),
.BlockScreen.exerciseMode .bsSmall .answersWrap .entryLine:nth-of-type(1),
.BlockScreen.exerciseMode .bsVerySmall .answersWrap .entryLine:nth-of-type(1) {
    padding-top: 2px;
}

.BlockScreen.exerciseMode .bsMin .answersWrap .entryLine:nth-of-type(2),
.BlockScreen.exerciseMode .bsSmall .answersWrap .entryLine:nth-of-type(2),
.BlockScreen.exerciseMode .bsVerySmall .answersWrap .entryLine:nth-of-type(2) {
    padding-top: 2px;
}

.BlockScreen.exerciseMode .bsMin .answersWrap .entryLine:nth-of-type(3),
.BlockScreen.exerciseMode .bsSmall .answersWrap .entryLine:nth-of-type(3),
.BlockScreen.exerciseMode .bsVerySmall .answersWrap .entryLine:nth-of-type(3) {
    padding-top: 2px;
}

/*
.Main.full .BlockScreen.exerciseMode .answersWrap .entryLine {
    margin-bottom:35px;
}*/

.BlockScreen.exerciseMode .mco .answersWrap {
    left:693px;
    top:131px;
    /*height:382px;*/
    transform: translateX(1px);
}

.reviewWrap .lineWrap {
    position:relative;
    width:100%;
    height:55px;
    margin:0;
}

.BlockScreen.testMode .reviewWrap .lineWrap {
    height:auto;
}

.reviewWrap .lineWrap .reviewText {
    margin:7px 0 0 10px;
}

.bsMin .reviewWrap .lineWrap .reviewText {
    margin-top:6px;
}

.bsSmall .reviewWrap .lineWrap .reviewText, .bsVerySmall .reviewWrap .lineWrap .reviewText {
    margin-top:5px;
}

.BlockScreen.testMode.reviewMode .reviewWrap .lineWrap .reviewText {
    margin:12px 0 0 0;
    border: 1px solid #c9cbcc;
    font-family: Arial;
    font-weight: bold;
    font-size: 12px;
    color: #0b333c;
    height:14px;
    line-height:7px;
    border-radius:0;
}

.Main.full .BlockScreen.testMode.reviewMode .reviewWrap .lineWrap .reviewText {
    font-size: 18.5px;
}

.BlockScreen.testMode .tiWrap .textInput {
    float:left;
    margin-top:5px;
}

.BlockScreen.testMode.reviewMode .tiWrap:nth-child(3) .textInput {
    margin-top:6px;
}

.BlockScreen.testMode.reviewMode .qText1 {
    left:8px;
}

.BlockScreen.testMode.reviewMode .qText3 {
    margin-top:10px;
}

.exerciseMode .reviewWrap .lineWrap:nth-child(2) .reviewText {
    margin-top:35px;
}

.Main.full .exerciseMode .reviewWrap .lineWrap:nth-child(2) .reviewText {
    margin-top: 43px;
}

.Main.mobile .exerciseMode .bsSmall .reviewWrap .lineWrap:nth-child(2) .reviewText {
    margin-top: 30px;
}

.Main.mobile .exerciseMode .bsVerySmall .reviewWrap .lineWrap:nth-child(2) .reviewText {
    margin-top: 27px;
}

.exerciseMode .bsVerySmall .reviewWrap .lineWrap:nth-child(2) .reviewText {
    margin-top: 25px;
}

/*
.reviewWrap .lineWrap.wrong {
    background: #d20329;
}

.reviewWrap .lineWrap.correct {
    background: #88c8a7;
}*/

.BlockScreen.testMode.reviewMode .reviewWrap .lineWrap.correct {
    background: #379149;
}

.reviewWrap .reviewCB.disabled {
    display:none;
    pointer-events:none;
}

.reviewWrap .reviewCB.disabled .QuestionCheckBox {
    visibility:hidden;
    pointer-events:none;
}

/*** testCheckBox/reviewCB ***/

.testCheckBox {
    width: 24px;
    height: 24px;
    float: left;
    background: #fff;
    border:3px solid #000;
    margin: 0 12px 0 0;
    font-size:42px;
}

.Main.full .testCheckBox {
    width: 36px;
    height: 36px;
    font-size: 64px;
    margin: 0 18px 0 0;
}

.testCheckBox:before {
    margin-left:-9px;
}

.Main.full .testCheckBox:before {
    margin-left:-13px;
}

.reviewCB {
    margin:0;
    height: 111px;
    width: 42px;
    background: #AAAAAA;
    position: relative;
    padding: 7px 0 0 0;
    border-right-color: #666666;
    border-right-width: 1px;
    border-right-style: solid;
}

.Main.full .reviewCB {
    width: 52px;
    border-right-color: #666666;
    border-right-width: 1px;
    border-right-style: solid;
}

.reviewCB.reviewCorrect {
    background: #AAAAAA;
}

.reviewCB.reviewWrong {
    background: #AAAAAA;
}

.exerciseMode .reviewCB.reviewCorrect {
    background: #AAAAAA;
}

.exerciseMode .reviewCB.reviewWrong {
    background: #AAAAAA;
}

.testMode .reviewWrap .reviewCB:last-child {
    height:63px;
}

.testMode .reviewed .answersWrap {
    left:535px;
    padding-left:5px;
}

.Main .reviewCB .testCheckBox {
    margin-left:5px;
    margin-right:0;
}

.exerciseMode .reviewCB .testCheckBox {
    margin-left:5px;
}

.Main.full .exerciseMode .reviewCB .testCheckBox {
    margin-left: 14px;
}

.testCheckBox.check {
    background: #000;
    line-height: 20px;
    color:#fff;
}

.Main.full .testCheckBox.check {
    line-height: 30px;
}

.exerciseMode .testCheckBox {
    width: 22px;
    height: 22px;
    border: 2px solid #909090;
    border-radius: 6px;
    font-size:28px;
}

.Main.full .exerciseMode .testCheckBox {
    width: 35px;
    height: 35px;
    border: 2px solid #909090;
    border-radius: 6px;
    font-size: 42px;
}

.Main .exerciseMode .testCheckBox:before {
    margin-left: -3px;
}

.exerciseMode .testCheckBox.check {
    background: #fff;
    line-height: 22px;
    color: #000;
}

.Main.full .exerciseMode .testCheckBox.check {
    line-height: 36px;
}

.exerciseMode .reviewCB {
    position: relative;
    width: 36px;
    margin: 0;
    padding-top: 7px;
    border-right-color: #666666;
    border-right-width: 1px;
    border-right-style: solid;
}

.Main.full .exerciseMode .reviewCB {
    width: 67px;
}

.exerciseMode .reviewCB.noPadding, .testMode .reviewCB.noPadding {
    padding-top: 1px;
}

.answerResultContainer {
    font-family:asap-bold;
    font-size:12.5px;
    display:none;
    position:absolute;
    border-top:9px solid transparent;
    padding:0px 0 0 0px;
    z-index:50;
}

.Main.full .answerResultContainer {
    font-size: 18.75px;
}

.Main .BlockScreen .bsSmall .answerResultContainer {
    font-size: 10px;
}

.Main .BlockScreen .bsVerySmall .answerResultContainer {
    font-size: 10px;
}

.testMode .answerResultContainer {
    top: 415px;
    left: 485px;
}

.testMode .answerResultContainer.correct {
    color: #379149;
    border-color: #379149;
}

.answerResultContainer.correct {
    color: #88c8a7;
    border-color: #88c8a7;
}

.answerResultContainer.wrong {
    color: #d1002d;
    border-color: #d1002d;
}

.answerResultContainer.shown.resized {
    display: block;
}

.answerResultContainer .answerResult {
    display: inline-block;
    transform: translate(0px, -6px);
}

.answerResultContainer .info {
    display: inline-block;
    width: 50px;
    background: none;
    height: 28px;
}

.Main.full .answerResultContainer .answerResult {
    display: inline-block;
    transform: translate(0px, -10px);
}

.answerResultContainer .info .icon {
    font-size: 28px;

}

.Main.full .answerResultContainer .info .icon {
    font-size: 36px;
}

/*** DttLanguageSelect ***/

.Main .DttLanguageSelect .DttButton {
    width: 96px;
    height: 105px;
    float: left;
    margin: 0 4px 0x 15px;
    background: none;
    position: relative;
    min-width:1px;
}

.Main.full .DttLanguageSelect .DttButton {
    width: 155px;
    height: 150px;
    margin: 10px 20px 30px 15px;
}

.DttLanguageSelect .SimpleDiv.caption {
    width: 100%;
    overflow-x: hidden;
    text-overflow: ellipsis;
    font-family: "os-regular";
    font-size: 15px;
    color: #2c2c2c;
}

.Main.full .DttLanguageSelect .SimpleDiv.caption {
    font-size: 21px;
}

.DttLanguageSelect .DttButton.withIcon .caption {
    right:auto;
    top:75px !important;
    left:0;
    text-transform:none;
}

.Main.full .DttLanguageSelect .DttButton.withIcon .caption {
    top: 123px !important;
}

.DttLanguageSelect .DttButton.withIcon .icon {
    float: left;
    clear: both;
    background: no-repeat center center;
    width: 92px;
    height: 72px;
    position: relative;
    left: 0;
    top: 0;
    background-size: 82px 62px;
    border: 1px solid transparent;
    border-radius:4px;
}

.Main.full .DttLanguageSelect .DttButton.withIcon .icon {
    width: 145px;
    height: 115px;
    background-size: 125px 95px;
}

.DttLanguageSelect .DttButton.active .SimpleDiv.icon {
    border: 1px solid #868686;
}

.Main.mobile .ModalSelectDialog .DttLanguageSelect  {
    margin:0 auto;
    /* width:207px; */
}

.Main.mobile .ModalSelectDialog .DttLanguageSelect .DttButton:nth-child(2n) {
    margin-right:0;
}

/*** DttMenuBar ***/
.DttMenuBar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 42px;
    z-index: 49;
    background: #d6655d;
    background-image: -ms-linear-gradient(left, #D56059 0%, #E77E52 100%);
    background-image: -moz-linear-gradient(left, #D56059 0%, #E77E52 100%);
    background-image: -o-linear-gradient(left, #D56059 0%, #E77E52 100%);
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #D56059), color-stop(100, #E77E52));
    background-image: -webkit-linear-gradient(left, #D56059 0%, #E77E52 100%);
    background-image: linear-gradient(to right, #D56059 0%, #E77E52 100%);
    color: #fff;
    /* transition: all 0.1s; */
    /* -webkit-transition: all 0.1s; */
}

.DttMenuBar .DttButton {
    position:absolute;
}

    .DttMenuBar .headerContainer {
        position: absolute;
        left: 34px;
        right: 152px;
        top: 0;
        height: 40px;
        /* transition: all 0.5s; */
        /* -webkit-transition: all 0.5s; */
    }

.DttMenuBar.noBbtn .headerContainer {
    left:10px;
}

.Main.full .DttMenuBar .headerContainer {
    right:240px;
    left:60px;
}

.Main.full .DttMenuBar.noBbtn .headerContainer {
    left: 40px;
}

.Main.mobile .DttMenuBar .headerContainer {
    right:100px;
}

.Main.mobile .DttMenuBar .headerContainer.bigger {
    right:50px;
}

.Main.full .DttMenuBar {
    height:55px;
}

.DttMenuBar .headerContainer .DttMenuBarTitleHeader, .DttMenuBar .headerContainer .screenMenuHeader {
    text-transform: uppercase;
    font-family: "dosis-regular";
    font-size: 16.8px;
    color: #fff;
    margin: 10px 0 0 28px;
    /* transition: all 0.5s; */
    /* -webkit-transition: all 0.5s; */
    opacity: 0;
    white-space: nowrap;
}

.insetHalf .DttMenuBar .headerContainer .DttMenuBarTitleHeader, .insetHalf .DttMenuBar .headerContainer .screenMenuHeader {
    text-transform: uppercase;
    font-family: "dosis-regular";
    font-size: 16.8px;
    color: #fff;
    margin: 10px 0 0 28px;
    /* transition: all 0.5s; */
    /* -webkit-transition: all 0.5s; */
    opacity: 0;
    white-space: nowrap;
}

.Main.full .DttMenuBar .headerContainer .DttMenuBarTitleHeader, .Main.full .DttMenuBar .headerContainer .screenMenuHeader {
    font-size: 25px;
    margin: 12px 0 0 28px;
}

.Main .DttMenuBar.noBbtn .headerContainer .DttMenuBarTitleHeader, .Main .DttMenuBar.noBbtn .headerContainer .screenMenuHeader {
    margin-left:0;
}

.Main.mobile .DttMenuBar .headerContainer .DttMenuBarTitleHeader, .Main.mobile .DttMenuBar .headerContainer .screenMenuHeader {
    margin-left: 0;
}

.DttMenuBar .headerContainer .DttMenuBarTitleHeader.appearing, .DttMenuBar .headerContainer .screenMenuHeader.appearing {
    opacity: 1;
}

.DttMenuBar .headerContainer .DttMenuBarTitleHeader.disappearing, .DttMenuBar .headerContainer .screenMenuHeader.disappearing {
    opacity:0;
    position:absolute;
}

.Main .DttMenuBar .DttButton {
    background:none;
    height:100%;
    border-radius:0;
    top:0;
}

.DttMenuBar .DttButton .icon, .DttMenuBar .DttButton.nonButton.withIcon .icon {
    font-size: 36px;
    width: 40px;
    height: 40px;
    line-height: 30px;
    top: 0;
    left: 2px;
    margin-left: -3px;
    margin-top: 5px;
}

.Main.full .DttMenuBar .DttButton.nonButton.withIcon .icon {
    font-size: 54px;
    line-height:45px;
    left:4px;
}

.DttMenuBar .DttButton.backBtn.nonButton.withIcon .icon {
    /* left: -4px; */
    top: 3px;
}

.Main.full .DttMenuBar .DttButton.backBtn.nonButton.withIcon .icon {
    left:-2px;
}

.DttMenuBar .backBtn {
    left:0px;
    top:3px;
    width:120px;
    height:40px !important;
    overflow:hidden;
    display:none;
    z-index:10;
}

.DttMenuBar .backBtn .icon {
    margin-left: 5px;
}

.Main.full .DttMenuBar .backBtn {
    width:200px;
    left:20px;
    top:0;
    height: 54px !important;
}

.Main.full .DttMenuBar .backBtn .icon {
    margin-left: 5px;
}

.DttMenuBar .backBtn.available {
    display:block;
}

.DttMenuBar .backBtn .icon:before {
    margin-left:-2px;
}

.DttMenuBar .backBtn .icon {
    margin-left:-5px;
    margin-top:-2px;
}

.DttMenuBar .statsBtn  {
    right:112px;
    top:0;
    width:38px;
    overflow:hidden;
}

.Main .DttMenuBar .statsBtn.aPos {
    right:76px;
}

.DttMenuBar .statsBtn.notShown {
    display:none;
}

.DttMenuBar .fullscreenBtn.notShown {
    display:none;
}

.Main.full .DttMenuBar .statsBtn {
    width:55px;
    right:187px;
    top:0;
}

.Main.full .DttMenuBar .statsBtn.aPos {
    right:132px;
}

.DttMenuBar .fullscreenBtn {
    right: 76px;
    top: 0;
    width:38px;
    overflow:hidden;
}

.Main.full .DttMenuBar .fullscreenBtn {
    width:55px;
    right:132px;
    top:0;
}

/*
.DttMenuBar .statsBtn .icon:before {
    margin-left:-11px;
}

.DttMenuBar .fullscreenBtn .icon {
    line-height:28px;
}

.DttMenuBar .fullscreenBtn .icon:before {
    margin-left:7px;
} */

.DttMenuBar .helpBtn {
    right: 39px;
    top: 0;
    width:38px;
    overflow:hidden;
}

.Main.full .DttMenuBar .helpBtn {
    width: 45px;
    right: 87px;
    top:0;
}

.Main.full .DttMenuBar .helpBtn.nonButton.withIcon .icon {
    left:-2px;
}

.DttMenuBar .statsBtn.hoverClass,
.DttMenuBar .fullscreenBtn.hoverClass,
.DttMenuBar .helpBtn.hoverClass {
    background:rgba(0,0,0,0.1);
}
/*


.DttMenuBar .helpBtn .icon:before {
    margin-left:0;
}

.DttMenuBar .lastBtn {
   display:none;
}


.Main.full .DttMenuBar .DttButton .icon {line-height:60px;}
.Main.full .DttMenuBar .statsBtn .icon {line-height:23px; margin-left:13px;}
.Main.full .DttMenuBar .helpBtn .icon {line-height: 48px;}
.Main.full .DttMenuBar .fullscreenBtn .icon {line-height: 48px;}*/

.DttMenuBar .backBtn.hoverClass .innerBtn,
.DttMenuBar .backBtn.activeClass .innerBtn {
    opacity: 1;
    background: rgba(0,0,0,0.1);
    border: none;
    height: 40px;
    max-width: 34px;
}

.Main.full .DttMenuBar .backBtn.hoverClass .innerBtn {
    max-width:56px;
    height: 57px;
}

.Main.mbHidden .DttMenuBar {
    margin-top:-84px;
}

.Main.mbHidden .mainContent {
    top:0;
}

.DttMenuBar .logoContainer {
    background: url("images/icons/logo.png") no-repeat 0 0 / 100% 100%;
    position:absolute;
    left:50%;
    margin-top:10px;
    margin-left:-50px;
    width:100px;
    height:22px;
}

.Main.full .DttMenuBar .logoContainer {
    width:150px;
    height:32px;
    margin-top:12px;
    margin-left:-75px;
}

.Main.full .DttMenuBar.exerciseHeader .logoContainer {
    margin-left: -150px;
}

@media screen and (max-width: 400px) {
    .Main .DttMenuBar .logoContainer {
        display:none;
    }
}

@media screen and (max-width: 700px) {
    .Main .DttMenuBar .logoContainer {
        left:auto;
        right:40px;
    }
}

@media screen and (max-width: 1020px) {
    .Main .DttMenuBar.exerciseHeader .logoContainer {
        display: none;
    }
}

.inset .DttMenuBar {

    padding-top: 32px;
}

.insetHalf .DttMenuBar {

    padding-top: 12px;
}

.inset .DttMenuBar .backBtn {

    margin-top: 32px;
}

.insetHalf .DttMenuBar .backBtn {

    margin-top: 12px;
}

.inset .DttMenuBar .headerContainer {

    margin-top: 34px;
}

.insetHalf .DttMenuBar .headerContainer {

    margin-top: 14px;
}

.inset .DttMenuBar .logoContainer {

    /* margin-top: 34px; */
}

.insetHalf .DttMenuBar .logoContainer {

    margin-top: 13px;
}

.inset .DttMenuBar .statsBtn {

    margin-top: 32px;
}

.insetHalf .DttMenuBar .statsBtn {

    margin-top: 17px;
}

.inset .DttMenuBar .fullscreenBtn {

    margin-top: 35px;
}

.insetHalf .DttMenuBar .fullscreenBtn {

    margin-top: 17px;
}

.inset .DttMenuBar .helpBtn {

    margin-top: 32px;
}

.insetHalf .DttMenuBar .helpBtn {

    margin-top: 17px;
}

.inset .BurgerMenuButton {

    margin-top: 32px;
}

.insetHalf .BurgerMenuButton {

    margin-top: 13px;
}

.inset .BurgerMenuButton .open, .inset .BurgerMenuButton .close {

    top: 3px;
}

.insetHalf .BurgerMenuButton .open, .inset .BurgerMenuButton .close {

    top: 3px;
}

.inset .sideMenu .inner {

    padding-top: 80px;
}

.insetHalf .sideMenu .inner {

    padding-top: 80px;
}



.insetPre11 .DttMenuBar {

    padding-top: 44px;
}

.insetPre11 .DttMenuBar .backBtn {

    margin-top: 44px;
}

.insetPre11 .DttMenuBar .headerContainer {

    margin-top: 44px;
}

.insetPre11 .DttMenuBar .logoContainer {

    /* margin-top: 34px; */
}

.insetPre11 .DttMenuBar .statsBtn {

    margin-top: 44px;
}

.insetPre11 .DttMenuBar .fullscreenBtn {

    margin-top: 47px;
}

.insetPre11 .DttMenuBar .helpBtn {

    margin-top: 44px;
}

.insetPre11 .BurgerMenuButton {

    margin-top: 40px;
}

.insetPre11 .BurgerMenuButton .open, .inset .BurgerMenuButton .close {

    top: 3px;
}

.insetPre11 .sideMenu .inner {

    padding-top: 92px;
}




.DttMenuBar .DttButton .icon {

    top: 5px;
}

.BurgerMenuButton .open, .BurgerMenuButton .close {

    top: 1px;
}

/*** DttCorrectWrongUnansweredBar ***/

.DttCorrectWrongUnansweredBar .cwuWrap {
    width: 100%;
    clear: both;
    height: 28px;
}



.Main.full .DttCorrectWrongUnansweredBar .cwuWrap {
    height:50px;
}

.DttCorrectWrongUnansweredBar .flexWrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.DttCorrectWrongUnansweredBar .cwuWrap .SimpleDiv {
    height:100%;
    float:left;
}

.DttCorrectWrongUnansweredBar .cBar, .DttCorrectWrongUnansweredBar .bgC {
    background: #89c8a7;
}

.DttCorrectWrongUnansweredBar .wBar, .DttCorrectWrongUnansweredBar .bgW {
    background: #d20329;
}

.DttCorrectWrongUnansweredBar .uBar, .DttCorrectWrongUnansweredBar .bgU {
    background: #b5b5b5;
}

.DttCorrectWrongUnansweredBar .cwuWrap .cwuBar.disabled {
    background:#b2b2b2;
}

.DttCorrectWrongUnansweredBar .cwuWrap .cwuBar.firstChild {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.DttCorrectWrongUnansweredBar .cwuWrap .cwuBar.lastChild {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.DttCorrectWrongUnansweredBar .cwuLegend {
    margin: 15px 10px 0 0;
    font-family: "asap-bold";
    font-size: 9px;
    color: #525252;
    text-transform:uppercase;
    position:relative;
    float:left;
    line-height:10px;
}

.Main.full .DttCorrectWrongUnansweredBar .cwuLegend {
    font-size: 12px;
    line-height:15px;
}

.Main.mobile .DttCorrectWrongUnansweredBar .cwuLegend {
    margin-right:8px;
    font-size:8px;
    margin-top:4px;
}

.Main.mobile .DttCorrectWrongUnansweredBar.hasCOrWButton .cwuLegend {

    /* width: 110px; */
    height: 40px;
}


.DttCorrectWrongUnansweredBar .cwuLegend:last-child {
    margin-right:0;
}

/*
.DttCorrectWrongUnansweredBar .cwuLegend.hidden, .DttCorrectWrongUnansweredBar .cwuLegend.disabled {
    display:none;
}*/

.DttCorrectWrongUnansweredBar .cwuLegend .legendBg {
    float: left;
    width: 9px;
    height: 9px;
    margin: 0 4px 0 0;
}

.Main.full .DttCorrectWrongUnansweredBar .cwuLegend .legendBg {
    width: 19px;
    height: 19px;
    margin: -2px 10px 0 0;
}

.Main.mobile .DttCorrectWrongUnansweredBar .cwuLegend .legendBg {
    margin-right:2px;
}

.DttCorrectWrongUnansweredBar .cwuLegend .TranslatableText {
    float:left;
}

.DttCorrectWrongUnansweredBar .cwuLegend .legendPercentage {
    float:left;
    margin-left:8px;
}

.DttCorrectWrongUnansweredBar .cwuLegend.disabled {
    display: none;
}

.mobile .DttCorrectWrongUnansweredBar .cwuLegend .legendPercentage {
    margin-left:2px;
}



/*** hintInput ***/

.HintTextInput  {
    position:relative;
}

.HintTextInput .TextInput {
    width:100%;
    background:#fff;
    border:1px solid #dcd7ce;
    border-radius:5px;
    padding:10px;
    font-family:"asap-bold";
    font-size:16px;
    color:#525252;
    margin-bottom:14px;
    margin-top:0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.Main.full .HintTextInput .TextInput {
    font-size:22px;
    margin-bottom:20px;
}

.LoginScreen .loginWrap .HintTextInput .TextInput {
    padding:8px 10px 12px 37px;
}

.hintWrap {
    position: absolute;
    z-index: 20;
    font-size: 11px;
    font-family: "asap-regular";
    color: #9c9c9c;
    top: 0;
    padding-top: 10px;
    pointer-events: none;
    line-height:15px;
}

.Main.full .hintWrap {
    font-size:17px;
    line-height:inherit;
}

.LoginScreen .hintWrap {
    padding-top: 11px;
}

.Main.full .LoginScreen .hintWrap {
    padding-top:12px;
}

.hintWrap.hidden {
    display: none;
}

.hintWrap .SimpleDiv {
    float:left;
    margin-top:2px;
}

.hintWrap .SimpleDiv.hIcon {
    font-size:18px;
    margin-right:4px;
    margin-left:10px;
    margin-top:0;
}

.Main.full .hintWrap .SimpleDiv.hIcon {
    font-size:24px;
}

.LoginScreen .appStoreButton {
    position: relative;
    float: left;
    width: 120px;
    top: 55px;
    left: 50%;
    margin-left: -130px;
    margin-right: 20px;
    cursor: pointer;
    display: none;
}

.LoginScreen .playStoreButton {
    position: relative;
    float: left;
    width: 120px;
    top: 55px;
    left: 50%;
    cursor: pointer;
    display: none;
}

.ios .LoginScreen .helpButton {

    display: none;
}

.ios .LoginScreen .registerButton {

    display: none;
}

.ios .LoginScreen .forgotPasswordButton {

    display: none;
}

.ios .LoginScreen .demoButton {

    display: none;
}

.ios .LoginScreen .bDemoIos {
    display: block;
}

/*** DateSelect ***/
.DateSelect {
    width: 235px;
    margin-left: auto;
    margin-right: auto;
}

.Main.full .DateSelect {
    width: 460px;
}

.DateSelect .dateNav {
    width:240px;
    margin:0 auto;
    height:30px;
    position:relative;
}

.DateSelect .dateNav .navBtn , .DateSelect .dateNav .captionDiv {
    float:left;
    color:#555555;
}

.DateSelect .dateNav .captionDiv {
    font-family:asap-bold;
    width:120px;
    margin-top:7px;
    text-align:center;
}

.DateSelect .dateNav .navBtn {
    font-size:29px;
    cursor: pointer;
    cursor: -webkit-pointer;
}

.DateSelect .wdWrap {
    clear:both;
    height:20px;
    margin:10px 0 0 0;
}

.Main.full .DateSelect .wdWrap {
    height: 30px;
    margin: 20px 0 0 0;
}

.DateSelect .wdWrap .wdItem {
    float:left;
    color:#b1b1b1;
    font-size:15px;
    font-family:"asap-bold";
    margin-right:10px;
    width:25px;
    text-align:center;
}

.Main.full .DateSelect .wdWrap .wdItem {
    font-size: 23px;
    width: 40px;
    margin-right:30px;
}

.Main .DateSelect .wdWrap .wdItem:last-child {
    margin-right:0;
}

.DateSelect .dateItemsWrap {
    margin:5px 0 0 0;
}

.DateSelect .dateItemsWrap .dateItem {
    background:none;
    border:1px solid #fff;
    font-size:14px;
    color:#272727;
    font-family:"asap-regular";
    margin-right:10px;
    margin-bottom:5px;
    padding:0;
    width:25px;
    float:left;
    text-align:center;
    line-height:13px;
    padding:6px 0 4px;
}

.Main.full .DateSelect .dateItemsWrap .dateItem {
    font-size: 21px;
    width: 40px;
    margin-right: 30px;
    padding: 14px 0 11px;
}

.Main .DateSelect .dateItemsWrap .dateItem:nth-child(7n) {
    margin-right:0;
}

.Main .DateSelect .dateItemsWrap .dateItem:nth-child(7n+1) {
    clear:left;
}

.Main .DateSelect .dateItemsWrap .dateItem.nonCurrent {
    color: #b1b1b1;
}

.Main .DateSelect .dateItemsWrap .dateItem.active {
    background:#ec6c3c;
    border-radius:100px;
    color:#fff;
    border-color:#ea5b26;
}

/*** DttBar ***/

.DttBar {
    clear: both;
    position: relative;
    padding: 6px 0;
    background: #fff;
    border-radius: 4px;
    margin: 0 10px 0 6px;
}

.Main.full .DttBar {
    padding: 10px 0;
}

.DttBar .captionWrap {
    text-align:center;
    position:relative;
    z-index:30;
    color:#2f2e2d;
    text-transform:uppercase;
    text-shadow: 0px 0px 2px #fff,0px 0px 2px #fff,0px 0px 2px #fff,0px 0px 2px #fff;
    font-family:"asap-bold";
    font-size:9px;
}

.Main.full .DttBar .captionWrap {
    font-size:13.3px;
}

.DttBar .captionWrap .caption, .DttBar .captionWrap .percentageWrapper {
    display:inline-block;
}

.DttBar .captionWrap .percentageWrapper {
    margin-left:5px;
}

.DttBar .background {
    position:absolute;
    z-index:20;
    top:0;
    bottom:0;
    border-radius:4px;
}

.DttBar.blue .background {
    background-image: -ms-linear-gradient(left, #318fa2 0%, #4eafbd 100%);
    background-image: -moz-linear-gradient(left, #318fa2 0%, #4eafbd 100%);
    background-image: -o-linear-gradient(left, #318fa2 0%, #4eafbd 100%);
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #318fa2), color-stop(100, #4eafbd));
    background-image: -webkit-linear-gradient(left, #318fa2 0%, #4eafbd 100%);
    background-image: linear-gradient(to right, #318fa2 0%, #4eafbd 100%);
}

.DttBar.green .background {
    background:#89c8a7;
    /*
    background-image: -ms-linear-gradient(left, #89c8a7 0%, #4eafbd 100%);
    background-image: -moz-linear-gradient(left, #89c8a7 0%, #4eafbd 100%);
    background-image: -o-linear-gradient(left, #89c8a7 0%, #4eafbd 100%);
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #89c8a7), color-stop(100, #4eafbd));
    background-image: -webkit-linear-gradient(left, #89c8a7 0%, #4eafbd 100%);
    background-image: linear-gradient(to right, #89c8a7 0%, #4eafbd 100%);*/
}

/*** DttLearningProgress ***/

.DttLearningProgress {
    position:relative;
}

.DttLearningProgress .light {
    position:absolute;
}

.DttLearningProgress .light .traffic_light {
    width:42px;
    height:42px;
    border-radius:35px;
    margin:10px 12px;
    border-style: none;
    border-width: 4px;
    border-color: white;
}

.Main.full .DttLearningProgress .light .traffic_light {
    width:70px;
    height:70px;
}

.DttLearningProgress .light .traffic_light {
    width:46px;
    height:46px;
    margin:7px 11px 0 16px;
}

.Main.full .DttLearningProgress .light .traffic_light {
    width: 70px;
    height: 70px;
    margin: 10px 8px 0 19px;
}

.Main .DttLearningProgress.mobile .light .traffic_light {
    width: 21px;
    height: 21px;
    margin: 10px 8px 0 8px;
    /* margin: 10px 24px 0 8px; */
}

.Main .DttLearningProgress.lpSmall .light .traffic_light {
    width: 18px;
    height: 18px;
    margin: 4px 8px 0 8px;
}

.Main .DttLearningProgress.mobile.lpSmall .light .traffic_light:first-child {
    margin-top:10px;
}

.DttLearningProgress .light .light_red {background:#979797; opacity:1; border-color:white;}
.DttLearningProgress .light .light_yellow {background:#979797; opacity:1; border-color:white;}
.DttLearningProgress .light .light_green {background:#979797; opacity:1; border-color:white;}

.DttLearningProgress .light .light_red.active {background:#ff0000; opacity:1; border-color:white;}
.DttLearningProgress .light .light_yellow.active {background:#ffff00; opacity:1; border-color:white;}
.DttLearningProgress .light .light_green.active {background:#00ff00; opacity:1; border-color:white;}

.DttLearningProgress .rightWrap {
    position:absolute;
    right:0;
}

.DttLearningProgress .totalProgress {
    margin:0 0 4px 0;
}

.DttLearningProgress .tpIcon {
    position:absolute;
    top:0;
    right:0;
    color:#333333;
    font-size:23px;
    z-index:40;
    border-left:1px solid #404040;
    width:5%;
    text-align:center;
}

.DttLearningProgress.noKeysIcon .tpIcon {
    font-size:inherit;
}

.DttLearningProgress .tpIcon:before {
    margin-left:-3px;
}

.DttLearningProgress.noKeysIcon .tpIcon:before {
    font-size:16px;
    line-height:22px;
    margin-left:-2px;
}

.Main.full .DttLearningProgress .tpIcon {
    font-size: 36px;
}

.DttLearningProgress .cwuItemsWrap {
    position:relative;
}

.DttLearningProgress .cwuItemsWrap .cwuItemWrap {
    border-radius:5px;
    float:left;
    border:2px solid transparent;
    padding:2px;
    margin-left:-3px;
}

.DttLearningProgress .cwuItemsWrap .cwuItemWrap.current {
    border-color:#8c8c8c;
}

.DttLearningProgress .cwuItemsWrap .cwuItem {
    font-family:"asap-bold";
    font-size:17px;
    color:#84abbd;
    background:#fff;
    padding:4px 4px 1px;
    border-radius:2px;
}

.DttLearningProgress .cwuItemsWrap .cwuItem.green {
    background:#89c8a7;
    color:#fff;
}

.DttLearningProgress .cwuItemsWrap .cwuItemWrap:nth-child(5n) {
    margin-right:4px;
}

.DttLearningProgress.mobile .cwuItemsWrap .cwuItemWrap:nth-child(5n) {
    margin-right:11px;
}

.DttLearningProgress .cwuItemsWrap .cwuItemWrap:last-child {
    margin-right:0;
}

.DttLearningProgress.mobile .cwuItemsWrap .cwuItemWrap:last-child {
    margin-right:0;
}

.DttLearningProgress .secWrap {
    position:relative;
    float:right;
    margin-top:5px;
}

.DttLearningProgress .secWrap .DttBar {
    padding-top:2px;
    padding-bottom:1px;
    margin:0 0 2px;
    float:left;
    clear:none;
}

.DttLearningProgress .secWrap .DttBar:nth-child(2) {
    float:right;
}

.DttLearningProgress.mobile .secWrap {
    order: +1;
}

.DttLearningProgress.mobile .secWrap .DttBar {
    margin-bottom: 7px;
}

.DttLearningProgress .exerciseQuestion {
    position:relative;
    float:left;
    margin: 4px 0 6px 11px;
}

.DttLearningProgress.mobile .exerciseQuestion {
    position:absolute;
    margin-top:4px;
}

.DttLearningProgress .testProgress  {
    position:relative;
    float:right;
    clear:none;
    margin:4px 0 0;
    overflow-x:hidden;
    white-space:nowrap;
}

.DttLearningProgress.mobile .testProgress {
    margin-top:5px;
}

.DttLearningProgress .cwuItemsWrap {
    font-size:16.5px;
    float:left;
    margin-left:0;
}

.DttLearningProgress.mobile .cwuItemsWrap {
    margin-left:0;
}

.DttLearningProgress.minimal .secWrap, .DttLearningProgress.minimal .exerciseQuestion {
    display:none;
}

.DttLearningProgress.minimal .testProgress {
    min-width:100px;
    padding:2px 0;
    margin-bottom:30px;
}

.DttLearningProgress .cwuItemsWrap .cwuItemWrap {
    padding:1px;
}

.Main.full .DttLearningProgress .cwuItemsWrap .cwuItem {
    font-size:13px;
    padding:1px 3px 3px 4px;
}

.DttLearningProgress.mobile .cwuItemsWrap .cwuItem {
    padding:0;
}

.DttLearningProgress .cwuItemsWrap .cwuItem {
    font-size: 9px;
    padding: 1px 2px 3px 3px;
    text-align:center;
    line-height:inherit;
}

.DttLearningProgress .DttHeadlineSublineBlock {
    position:absolute;
}

/*** DttHeadlineSublineBlock ***/
.DttHeadlineSublineBlock {
    color: #545454;
    margin-bottom: 18px;
    display: inline-block;
}

.Main.full .DttHeadlineSublineBlock {
    margin-bottom:30px;
}


.DttHeadlineSublineBlock .innerWrap {
    margin-top: 0px;
    float: left;
    margin-left: 15px;
}

.DttMainSelectionScreen .DttHeadlineSublineBlock .innerWrap {
    margin-top: 0px;
}

main.full .DttMainSelectionScreen .DttHeadlineSublineBlock .innerWrap {
    margin-top: 8px;
}


.Main.mobile .DttHeadlineSublineBlock .innerWrap {
    margin-top: 0px;
    /* margin-left:8px; */
}

.Main.mobile .DttLearningProgress  .DttHeadlineSublineBlock .innerWrap {
    margin-left:0;
}

.DttHeadlineSublineBlock.noIcon .innerWrap {
    margin-left:0;
}

.DttHeadlineSublineBlock .icon {
    font-size:53px;
    float:left;
    width:38px;
    height:50px;
    margin-left: -4px;
    margin-right: 20px;
    margin-top: -10px;
}

.DttHeadlineSublineBlock > .icon {
    margin-top: -10px;
    line-height:80px;
    color:#979797;
}

.DttHeadlineSublineBlock.iconAfter .icon {

    font-size: 22px;
    margin-left: 12px;
    margin-top: -20px;
}

.DttHeadlineSublineBlock.iconAfter .innerWrap {
    margin-left: 8px;
}

.hlslFreeLearning.iconAfter > .icon {
    display:none;
}

.DttMainSelectionScreen .DttHeadlineSublineBlock .icon {
    font-size: 58px;
    width: 42px;
    height: 50px;
    margin: -4px 0px 0 14px;
}

.Main.full .DttHeadlineSublineBlock .icon {
    font-size: 82px;
    width: 65px;
    height: 70px;
}

.Main.full .DttMainSelectionScreen .DttHeadlineSublineBlock .icon {
    font-size: 82px;
    width: 65px;
    height: 70px;
    margin: 9px 0 0 19px;
}

.DttHeadlineSublineBlock > .icon:before {
    margin-left:-4px;
}

.Main.full .DttHeadlineSublineBlock > .icon:before {
    margin-left: -6px;
}

.DttHeadlineSublineBlock .icon.hidden {
    display:none;
}

.DttHeadlineSublineBlock .headline {
    font-family: "dosis-regular";
    font-size: 31px;
    display:inline;
    text-transform: uppercase;
}

.Main.full .DttHeadlineSublineBlock .headline {
    font-size: 47.5px;
}

.DttHeadlineSublineBlock .subline {
    font-family: "asap-regular";
    font-size: 16px;
    clear: both;
    margin-left:1px;
}

.mobile .DttHeadlineSublineBlock .subline {
    display:none;
}

.Main.full .DttHeadlineSublineBlock .subline {
    font-size: 24px;
}

.DttHeadlineSublineBlock .subline.empty {
    display:none;
}

.DttHeadlineSublineBlock .textAdd {
    float:left;
}

.DttHeadlineSublineBlock .textAdd.hidden {
    display:none;
}

.DttHeadlineSublineBlock .helpBtn, .DttHelpButton .helpBtn {
    display: inline-block;
    font-size: 32px;
    color: #84bdc7;
    background: none;
    overflow: visible;
    margin: 0;
    height: 40px;
}


.DttHeadlineSublineBlock .helpBtn.hidden, .DttHelpButton .helpBtn.hidden {
    display:none;
}

.DttHeadlineSublineBlock .helpBtn.hoverClass, .DttHelpButton .helpBtn.hoverClass {
    color:#f36c49;
}

.DttHeadlineSublineBlock .helpBtn .caption, .DttHelpButton .helpBtn .caption {
    display:none;
}

.Main.full .DttHeadlineSublineBlock .helpBtn .icon {
    font-size: 48px;
    width: 35px;
    height:35px;
    line-height:22px;
    top:0;
    margin-top:12px;
    margin-left:0;
}

.DttHeadlineSublineBlock .helpBtn .icon {
    font-size: 34px;
    top: 0;
    left: 0;
    margin-top: 10px;
    margin-left: 0;
}

.Main .lpSmall .DttHeadlineSublineBlock .helpBtn {
    height:auto;
}

.Main .lpSmall .DttHeadlineSublineBlock .helpBtn .icon {
    margin-top: -22px;
    font-size: 26px;
}

.Main.full .lpSmall .DttHeadlineSublineBlock .helpBtn .icon {
    margin-top:-18px;
}

.DttHelpButton {
    display:inline-block
}

.DttHelpButton .helpBtn .icon {
    right: auto;
    margin-top: 19px;
    font-size: 26px;
}

.Main.full .DttHelpButton .helpBtn .icon {
    margin-top:16px;
}

.Main .DttLearningProgress.lpSmall .DttHeadlineSublineBlock .headline {
    font-size: 16px;
    font-family: asap-bold;
}

/*** DttEasyMediumHardBlocks ***/

.DttEasyMediumHardBlocks .cwuItemsWrap {
    width: 140px;
    margin-left:20px;
    height:95px;
    float:left;
}

.Main.full .DttEasyMediumHardBlocks .cwuItemsWrap {
    width:215px;
    height:135px;
}

.Main.mobile .DttEasyMediumHardBlocks .cwuItemsWrap {
    margin-bottom:50px;
}

.DttEasyMediumHardBlocks .cwuItemWrap {
    border: 2px solid transparent;
    border-radius: 7px;
    float: left;
    margin-left:-2px;
}

.DttEasyMediumHardBlocks .cwuItemWrap.current {
    border-color:#8c8c8c;
}

.DttEasyMediumHardBlocks .cwuItemsWrap .cwuItem {
    font-family: "asap-bold";
    font-size: 9px;
    color: #84abbd;
    background: #fff;
    padding: 6px;
    border-radius: 5px;
    margin:2px;
}

.Main.full .DttEasyMediumHardBlocks .cwuItemsWrap .cwuItem {
    font-size: 14px;
    padding: 9px 10px;
}

.DttEasyMediumHardBlocks .cwuItemsWrap .cwuItem.green {
    background: #89c8a7;
    color: #fff;
}

.DttEasyMediumHardBlocks .captions {
    text-transform: uppercase;
    font-family: asap-bold;
    color: #545454;
    font-size: 16px;
    margin-left: 6px;
    float: left;
}

.DttEasyMediumHardBlocks .captions .TranslatableText {
    margin-bottom:12px;
    margin-top:7px;
}

.Main.full .DttEasyMediumHardBlocks .captions {
    font-size: 24px;
    margin-left: 6px;
}

.Main.full .DttEasyMediumHardBlocks .captions .TranslatableText {
    margin-bottom:17px;
    margin-top:2px;
}

/*** DttBooleanRadioButtons ***/

.DttBooleanRadioButtons .rbWrap, .DttBooleanRadioButtons .rbWrap2 {
    float: left;
    font-family: asap-regular;
    font-size: 13px;
    color: #2c2c2c;
}

.DttBooleanRadioButtons.disabled {

    opacity: 0.5;
}

.Main.full .DttBooleanRadioButtons .rbWrap, .Main.full .DttBooleanRadioButtons .rbWrap2 {
    font-size:22.5px;
}

.DttBooleanRadioButtons .rbWrap {
    margin: 0 30px 0 0;
}

.Main.full .DttBooleanRadioButtons .rbWrap {
    margin: 0 45px 0 0;
}

.Main.mobile .DttBooleanRadioButtons .rbWrap {
    margin:0 0 20px 0;
}

.Main.mobile .DttBooleanRadioButtons .rbWrap2 {
    clear:left;
    margin-bottom:20px;
}

/*** DttLicenseClassSelector ***/

.DttLicenseClassSelector {
    clear:both;
}

.DttLicenseClassSelector .btnsWrap {
    padding:0 0 0 30px;
    clear:both;
}

.Main .DttLicenseClassSelector .DttButton {
    width:57px;
    height:55px;
    background:#fff;
    color:#3c3c3c;
    border-radius:5px;
    margin:0 7px 7px 0;
    float:left;
    min-width:1px;
    box-shadow:none;
    border:2px solid #fff;
}

.Main.full .DttLicenseClassSelector .DttButton {
    width: 81px;
    height: 76px;
    margin: 0 7px 7px 0;
}

.DttLicenseClassSelector .DttButton.hoverClass .innerBtn {
    opacity: 0;
}

.DttLicenseClassSelector .DttButton.activeClass {
    box-shadow: none;
}

.DttLicenseClassSelector .DttButton .caption {
    font-family:dosis-bold;
    font-size:13px;
    position:relative;
    left:0;
    margin:-8px auto 0;
}

.Main .DttLicenseClassSelector .DttButton.withIcon .icon {
    font-size:52px;
    position:relative;
    width:100%;
    right:0;
    left:0;
    top:6px;
}

.Main.full .DttLicenseClassSelector .DttButton .caption {
    font-size: 20px;
    margin: -14px auto 0;
}

.Main.full .DttLicenseClassSelector .DttButton.withIcon .icon {
    font-size: 72px;
    position: relative;
}

.DttLicenseClassSelector .DttButton.locked {
    color:#fff;
    background:#cbcbcb;
    border-color:#cbcbcb;
    cursor:default;
}

.DttLicenseClassSelector .DttButton.active {

    color:#fff;
    background:#f36c49;
    border-color:#000;
}

.DttLicenseClassSelector.disabled .DttButton.active {

    opacity: 0.5;
}

.DttLicenseClassSelector.disabled .controlBlocker {

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.DttLicenseClassSelector .selectB {
    margin-bottom:15px;
}

.DttLicenseClassSelector .selectA {
    clear:left;
}

.DttLicenseClassSelector .selectC {
    clear: left;
}

.DttLicenseClassSelector .selectD {
    clear: left;
}

.DttLicenseClassSelector .selectL {
    clear: left;
}

.DttLicenseClassSelector .selectMOFA {
    clear: left;
}

/*** TabView ***/
.TabView .invisible {
    display:none;
}

/*** DttTabBar ***/

.DttTabBar .DttButton {
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    background: #b0b0b0;
    float: left;
    box-shadow: none;
    height: 38px;
    margin: 0 2px 0 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    max-width:none;
    min-width:20px;
}

.DttTabBar .DttButton.selected {
    background:#e0e0e0; /* grey bg color */
}

.DttTabBar .DttButton.hoverClass {
    background:#e0e0e0; /* grey bg color */
}

.DttTabBar .DttButton .caption {
    font-family:asap-bold;
    text-transform:uppercase;
    color:#2d2d2d;
    font-size:10px;
    position:relative;
    text-align:center;
    left:0;
    margin-top:0;
}

.Main.full .DttTabBar .DttButton {
    height:45px;
}

.Main.full .DttTabBar .DttButton .caption {
    font-size:15px;
}

.DttTabBar.fullSize .DttButton:first-child {
    border-top-left-radius: 0;
}

.DttTabBar.fullSize .DttButton:last-child {
    border-top-right-radius: 0;
    margin-right:0;
}

.DttTabBar.exclude.fullSize .DttButton:last-child {
    display:none;
}

.DttTabBar .DttButton .icon {
    display:none;
}

.Main .DttTabBar.iconBtn {
    height:45px;
}

.Main .DttTabBar.iconBtn .DttButton {
    height:45px;
}

.DttTabBar.iconBtn .DttButton .caption {
    display:none;
}

.DttTabBar.iconBtn .DttButton .icon {
    display: block;
    color: #2d2d2d;
    right:auto;
    left:50%;
    font-size:38px;
    margin-left:-19px;
}

/*** DttNumPad ***/

.DttNumPad {
    width: 164px;
    height: 228px;
    white-space: nowrap;
}

.DttMobileNumPad {
    background: #e2e2e2;
    padding: 25px 8px;
    width: 134px;
    height: 295px;
    margin: 0 auto 30px;
    white-space: nowrap;
}

.DttNumPad .numItem, .DttMobileNumPad .numItem {
    font-family: "asap-bold";
    font-size: 18.5px;
    color: #84abbd;
    background: #fff;
    padding: 12px 0;
    width:50px;
    text-align:center;
    border-radius: 5px;
    display: inline-block;
    margin:0 7px 7px 0;
    cursor: pointer;
    cursor: -webkit-pointer;
}

/* .Main.full .DttNumPad .numItem, */

.DttMobileNumPad .numItem {
    padding: 9px 0;
    width: 38px;
    margin: 0 10px 10px 0;
    font-size: 18.5px;
}


.Main .ModalDialog.mNumPad.bmtrue .ScrollContainer, .bmtrue .DttMobileNumPad {
    background: #d3f6da;
}

.bmtrue .DttMobileNumPad .numItem {
    font-family: Arial;
    font-size: 18.5px;
    color: #0b333c;
    background: #fff;
    width: 36px;
    border: 1px solid #6f7173;
    border-radius: 0;
    margin-bottom:5px;
}

.bmtrue .DttMobileNumPad .textInput {
    border-radius:0;
}

.mNumPad.bmtrue .modalBtns .DttButton {
    border-radius:0;
}

.DttMobileNumPad.minimized  {
    width: 90px;
    height: 220px;
}

.DttMobileNumPad.minimized .numItem {
    font-size: 13px;
    padding: 6px 0;
    width: 25px;
    margin: 0 7px 7px 0;
}


.bmtrue .DttMobileNumPad.minimized .numItem {
    width:23px;
    margin-bottom:5px;
}

/*

.DttMobileNumPad {
    background: #e2e2e2;
    padding:25px 8px;
    width:134px;
    height:295px;
    margin:0 auto 30px;
}

.Main.full .DttNumPad {
    width: 134px;
    height: 245px;
}

.DttNumPad .numItem, .DttMobileNumPad .numItem {
    font-family: "asap-bold";
    font-size: 13px;
    color: #84abbd;
    background: #fff;
    padding: 6px 0;
    width:25px;
    text-align:center;
    border-radius: 5px;
    float:left;
    margin:0 7px 7px 0;
    cursor: pointer;
    cursor: -webkit-pointer;
}

.Main.full .DttNumPad .numItem, .DttMobileNumPad .numItem {
    padding: 9px 0;
    width: 38px;
    margin: 0 10px 10px 0;
    font-size: 18.5px;
}

*/

.ModalContainer .mNumPad .modalBtns .DttButton {
    min-width:134px;
    float:none;
    margin:0 auto;
}

.ModalContainer .mNumPad .modalBtns.minimized .DttButton {
    width:90px;
    min-width:90px;
}

.ModalContainer .mNumPad .modalBtns.minimized .DttButton.withIcon .caption {
    font-size:11px;
}

.ModalContainer .mNumPad .modalBtns.minimized .DttButton.withIcon .icon {
    right:5px;
}

.BlockScreen.testMode .DttNumPad {
    margin-bottom: 0;
    margin-top: -120px;
    top:50%;
    bottom:auto;
    /*margin-bottom:0;
    margin-top:60px;*/
}

/*
.Main.full .BlockScreen.testMode .DttNumPad {
    width: 175px;
    height: 235px;
}*/

.BlockScreen.testMode .reviewed .DttNumPad {
    display:none;
}

.BlockScreen.testMode .DttNumPad .numItem {
    font-family:Arial;
    border-radius:0;
    border:1px solid #6f7173;
    color: #0b333c;
    width:48px;
    /*width:35px;
    padding:5px 0;
    margin:0 3px 3px 0;*/
}

/*
.Main.full .BlockScreen.testMode .DttNumPad .numItem {
    width: 53px;
    padding: 7px 0;
    margin: 0 5px 10px 0;
} */

.Main .BlockScreen .DttNumPad .numItem.num_clear, .Main .DttMobileNumPad .numItem.num_clear {
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.Main.full .BlockScreen .DttNumPad .numItem.num_clear, .Main .DttMobileNumPad .numItem.num_clear {
    width:100%;
}

.Main.mainWrap .BlockScreen .DttNumPad .numItem:nth-child(3n), .Main.mainWrap .DttMobileNumPad .numItem:nth-child(3n+1) {
    /* margin-right: 0; */
}

.BlockScreen .DttNumPad .numItem:nth-child(3n+1), .DttMobileNumPad .numItem:nth-child(3n+2) {
    clear: left;
}

.CollapseExpandButton {
    cursor: pointer;
    cursor: -webkit-pointer;
}

.DttMobileNumPad .textInput {
    background: #fff;
    border-radius: 4px;
    padding:9px 5px;
    margin: 0 0 10px;
    color: #84abbd;
    font-size:18.5px;
    min-height:22px;
    font-family:asap-bold;
}

/*** DttSubSegmentAnalysisBar ***/

.DttSubSegmentAnalysisBar {
    position: relative;
    font-size: 16px;
    font-family: asap-regular;
    color: #545454;
    height:60px;
    margin-bottom:24px;
    clear:both;
}

.Main.full .DttSubSegmentAnalysisBar {
    font-size: 24px;
    margin-bottom: 30px;
}

.mobile .DttSubSegmentAnalysisBar {
    height:180px;
}

.mobile .DttStatisticsScreen .DttSubSegmentAnalysisBar {
    height: 120px;
    margin-top: 4px;
}

.DttSubSegmentAnalysisBar .idWrap {
    float:left;
    width:15px;
}

.Main.full .DttSubSegmentAnalysisBar .idWrap {
    width:30px;
}

.DttSubSegmentAnalysisBar .nameWrap {
    float:left;
    overflow: hidden;
    text-overflow: ellipsis;
    /* white-space: nowrap; */
    margin-right:8px;
    text-transform:uppercase;
    width: 105px;
}

.mobile .DttSubSegmentAnalysisBar .nameWrap {

    text-overflow: ellipsis;
    white-space: nowrap;
    width: auto;
    max-width: 190px;
}

.Main.full .DttSubSegmentAnalysisBar .nameWrap {

    width: 160px;
}

.DttSubSegmentAnalysisBar .nameCourse {
    float:left;
    width:15px;
    margin-right:17px;
}

.DttSubSegmentAnalysisBar .errorPointsWrap {
    position:absolute;
    top:0;
    left:174px;
    margin-top:-3px;
    font-family:asap-bold;
}

.Main.full .DttSubSegmentAnalysisBar .errorPointsWrap {
    left:234px;
}

.mobile .DttSubSegmentAnalysisBar .errorPointsWrap {
    top:98px;
    left:0;
    margin-top:0;
}

.DttSubSegmentAnalysisBar .errorPointsWrap .epOutput {
    background:#fff;
    font-family:dosis-regular;
    color:#84bdc7;
    float:left;
    border-radius:7px;
    padding:0 5px 0 7px;
    font-size:16px;
    line-height:28px;
    margin-right:5px;
}

.Main.full .DttSubSegmentAnalysisBar .errorPointsWrap .epOutput {
    font-size: 22px;
    line-height: 34px;
}

.DttSubSegmentAnalysisBar .errorPointsWrap .epCaption {
    float:left;
    text-transform:uppercase;
    font-size:12px;
    margin-right:6px;
    margin-top:6px;
}

.Main.full .DttSubSegmentAnalysisBar .errorPointsWrap .epCaption {
    font-size:18px;
}

.DttSubSegmentAnalysisBar .DttCorrectWrongUnansweredBar {
    position:absolute;
    left:268px;
    top:0;
    bottom:0;
    right:144px;
}

.Main.full .DttSubSegmentAnalysisBar .DttCorrectWrongUnansweredBar {
    left: 408px;
    right: 235px;
}

.mobile .DttSubSegmentAnalysisBar .DttCorrectWrongUnansweredBar {
    top:30px;
    left:0;
    right:0;
}

.Main .DttSubSegmentAnalysisBar .DttCorrectWrongUnansweredBar .cwuWrap {
    height:34px;
}

.DttSubSegmentAnalysisBar .DttCorrectWrongUnansweredBar .cwuLegend {
    margin-top:10px;
}

.DttSubSegmentAnalysisBar .warning {
    color: #d20329;
    text-transform:uppercase;
    display:none;
    position:absolute;
    font-size:12px;
    font-family:asap-bold;
    left:154px;
    width:auto;
}

.Main.full .DttSubSegmentAnalysisBar .warning {
    font-size: 18.7px;
    left: 234px;
    width: 1020px;
}

.DttSubSegmentAnalysisBar.displayWarning .warning {
    display:block;
}

.DttSubSegmentAnalysisBar.displayWarning .errorPointsWrap, .DttSubSegmentAnalysisBar.displayWarning .DttCorrectWrongUnansweredBar, .DttSubSegmentAnalysisBar.displayWarning .result  {
    display:none;
}

.DttSubSegmentAnalysisBar .result {
    border-radius:5px;
    border:2px solid #fff;
    position:absolute;
    right:0;
    width:130px;
    max-height:30px;
    overflow-y:hidden;
}

.Main.mobile .DttSubSegmentAnalysisBar .result {
    max-height:24px;
}

.Main.full .DttSubSegmentAnalysisBar .result {
    right:0;
    width:223px;
}

.DttSubSegmentAnalysisBar .result.hidden {
    display:none;
}

.DttSubSegmentAnalysisBar .result.undefined {
    display:none;
}

.DttSubSegmentAnalysisBar .result.wrong {
    border-color:#d20329;
    color:#d20329;
}

.DttSubSegmentAnalysisBar .result.correct {
    border-color:#89c8a7;
    color:#89c8a7;
}

.mobile .DttSubSegmentAnalysisBar .result {
    right:0;
    top:97px;
}

.DttSubSegmentAnalysisBar .resIcon {
    width:34px;
    height:30px;
    color:#fff;
    font-size:34px;
    float:left;
    line-height:30px;
}

.DttSubSegmentAnalysisBar .result .resCaption {
    font-size:10.52px;
    font-family:asap-bold;
    text-transform:uppercase;
    text-align:center;
    position:absolute;
    right:0;
    top:50%;
    left:34px;
}

.DttSubSegmentAnalysisBar .result .resCaption.fs3 {
    font-size:10px;
}

.DttSubSegmentAnalysisBar .result .resCaption.fs2 {
    font-size: 8px;
}

.DttSubSegmentAnalysisBar .result .resCaption.fs1 {
    font-size: 5px;
    margin-top:10px;
}


.Main.mobile .DttSubSegmentAnalysisBar .resIcon {
    line-height:20px;
    width:26px;
}

.Main.mobile .DttSubSegmentAnalysisBar .result .resCaption {
    left:26px;
}

.Main.mobile .DttSubSegmentAnalysisBar .resIcon:before {
    font-size:26px;
}

.DttSubSegmentAnalysisBar .result.wrong .resIcon {
    background:#d20329;
}

.DttSubSegmentAnalysisBar .result.correct .resIcon {
    background:#89c8a7;
}

/*** DttExerciseBlockScreenHeader  ***/

.DttExerciseBlockScreenHeader  {
    font-family:dosis-regular;
    color:#fff;
    font-size:16px;
    position: absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
}

.Main.full .DttExerciseBlockScreenHeader {
    font-size:24px;
}

.DttExerciseBlockScreenHeader .classWrap, .DttExerciseBlockScreenHeader .numbersWrap, .DttExerciseBlockScreenHeader .blockCounterWrap, .DttExerciseBlockScreenHeader .typeIconWrap {
    float:left;
}

.DttExerciseBlockScreenHeader .classWrap {
    margin-right:15px;
    margin-top:6px;
}

.Main.full .DttExerciseBlockScreenHeader .classWrap {
    margin-right: 15px;
    margin-top: 8px;
}

.DttExerciseBlockScreenHeader .classWrap .itemWrap {
    float:left;
    color:#d6655d;
    background:#fff;
    border-radius:6px;
    font-family:dosis-semibold;
    margin:0 15px 0 0;
    padding:3px 1px 5px;
    min-width:27px;
    text-align:center;
}

.Main.full .DttExerciseBlockScreenHeader .classWrap .itemWrap {
    padding: 3px 6px 5px;
}

.DttExerciseBlockScreenHeader .classWrap .itemWrap:last-child {
    margin-right:0;
}

.DttExerciseBlockScreenHeader .numbersWrap{
    margin-left:0;
    margin-top:9px;
}

.Main.full .DttExerciseBlockScreenHeader .numbersWrap {
    margin-top: 12px;
}

.DttExerciseBlockScreenHeader .numbersWrap div, .DttExerciseBlockScreenHeader .blockCounterWrap div, .DttExerciseBlockScreenHeader .rightSide div {
    float:left;
}

.DttExerciseBlockScreenHeader .numbersWrap .sep, .DttExerciseBlockScreenHeader .blockCounterWrap .sep{
    margin: 0 5px 0 4px;
}

.DttExerciseBlockScreenHeader .blockCounterWrap {
    margin-top:9px;
    float:left;
    margin-left:5px;
}

.Main.full .DttExerciseBlockScreenHeader .blockCounterWrap {
    margin-top:12px;
    float:left;
    margin-left:20px;
}

.DttExerciseBlockScreenHeader .blockCounterWrap.hidden, .DttExerciseBlockScreenHeader .blockCounterWrap.disabled {
    display: none !important;
}

.DttExerciseBlockScreenHeader .blockCounterWrap .icon {
    font-size:33px;
    line-height:22px;
}

.Main.full .DttExerciseBlockScreenHeader .blockCounterWrap .icon {
    font-size:48px;
    line-height:29px;
}

.DttExerciseBlockScreenHeader .blockCounterWrap .captionBlock {
    margin-right:4px;
}

.DttExerciseBlockScreenHeader .typeIconWrap {
    font-size: 32px;
    margin-top: 3px;
    margin-left: 10px;
}

.Main .DttExerciseBlockScreenHeader .typeIconWrap {
    display:none;
}

.Main.full .DttExerciseBlockScreenHeader .typeIconWrap {
    font-size:32px;
    margin-top:12px;
    margin-left:15px;
}

.DttExerciseBlockScreenHeader .rightSide {
    float:right;
    margin-right:10px;
}

.Main.full .DttExerciseBlockScreenHeader .rightSide {
    margin-right:10px;
}

.DttExerciseBlockScreenHeader .rightSide .questionIdWrap {
    margin-top:9px;
}

.Main.full .DttExerciseBlockScreenHeader .rightSide .questionIdWrap {
    margin-top:12px;
}

.DttExerciseBlockScreenHeader .rightSide .errorPointsWrap {
    color: #d6655d;
    background: #fff;
    border-radius: 6px;
    font-family: dosis-semibold;
    margin: 6px 15px 0 10px;
    padding: 3px 6px 5px;
    width: 16px;
    text-align: center;
}

.Main.full .DttExerciseBlockScreenHeader .rightSide .errorPointsWrap {
    margin: 8px 15px 0 10px;
}

.DttExerciseBlockScreenHeader .rightSide .captionBlock {
    text-transform:uppercase;
    margin-top:9px;
    margin-left:30px;
}

.Main.full .DttExerciseBlockScreenHeader .rightSide .captionBlock {
    margin-top:12px;
}

.DttExerciseBlockScreenHeader .hidden {
    display:none;
}

/*** modalVideo, modalImage ***/

.ModalVideoDialog, .ModalImageDialog {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

.ModalVideoDialog .videoWrapper, .ModalImageDialog .imageWrapper {
    width: 100%;
    height: 100%;
}

.ModalVideoDialog video, .ModalImageDialog img {
    width: 100%;
    height: 100%;
    position:relative;
    z-index:10;
    pointer-events: none;
    object-fit: contain;
}

.ModalVideoDialog .modalContent, .ModalImageDialog .modalContent {
    position:absolute;
    left:50%;
    top:50%;
}

.ModalVideoDialog .vOverlay {
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    z-index:20;
    pointer-events: auto;
}

.ModalImageDialog {
    cursor: pointer;
    cursor: -webkit-pointer;
}

.ModalDialog .closeBtn {
    position: absolute;
    top: 3px;
    right: 6px;
    z-index: 30;
    left: auto;
    font-size: 48px;
    width: 48px;
    color:#545454;
    cursor: pointer;
    cursor: -webkit-pointer;
}

.inset .ModalImageDialog .closeBtn, .inset .ModalVideoDialog .closeBtn {
    top: 35px;
}

.insetHalf .ModalImageDialog .closeBtn, .insetHalf .ModalVideoDialog .closeBtn {
    top: 35px;
}


.Main.full .ModalDialog .closeBtn {
    right:18px;
}

.ModalDialog .closeBtn:hover {
    color:#f36c49;
}

.ModalDialog .closeBtn.hidden, .ModalDialog.assetsQualityMD .closeBtn {
    display: none;
}

.mbHidden .ModalDialog.ModalVideoDialog .closeBtn, .ModalDialog.ootModal .closeBtn {
    display: none;
}

.ModalDialog.ModalVideoDialog, .ModalDialog.ModalImageDialog {
    cursor: pointer;
    cursor: -webkit-pointer;
    transition:initial;
}

.mbHidden .ModalDialog.ModalVideoDialog {
    cursor: default;
}

/*** videoPlayBtn ***/
.BlockScreen .videoPlayBtn {
    width: 60px;
    height: 60px;
    font-size: 140px;
    color: #fff;
    line-height: 60px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-55%, -55%);
    pointer-events: none;
}

.BlockScreen .bsMin .videoPlayBtn {

    transform: translate(-55%, -75%) scale(0.7);
}

.Main.full .BlockScreen .videoPlayBtn {
    font-size: 210px;
    line-height: 90px;
    width: 80px;
    height: 90px;
    margin: -50px 0 0 -45px;
}

.BlockScreen .videoPlayBtn:before {
    margin-left:-33px
}

.Main.full .BlockScreen .videoPlayBtn:before {
    margin-left: -50px
}

.BlockScreen .videoPlayBtn.hidden {
    display:none;
}

/*** modalDatePicker ***/

.modalDatePicker {
    width:275px !important;
    margin-left:-137px !important;
}

.Main.full .modalDatePicker {
    width: 520px !important;
    margin-left: -278px !important;
}

/*** listMBtn ***/
.listMBtn {
    width: 70px;
    height: 25px;
    border-radius: 20px;
    margin: 13px 0 60px 8px;
    text-transform: none;
    color: #2c2c2c;
    min-width: 0;
    border: 1px solid #adadad;
}

.Main.full .listMBtn {
    margin: 20px 0 80px 8px;
    width:100px;
    height:38px;
}

.Main .listMBtn .caption {
    font-size:12px;
    margin-right:0;
}

.Main.full .listMBtn .caption {
    font-size:18px;
}

.listMBtn.DttButton.withIcon .icon {
    display:none;
}

.listMBtn.DttButton.withIcon .caption {
    position:relative;
    left:auto;
    right:auto;
    top:auto;
}

.listMBtn.hoverClass .innerBtn {
    display:none;
}

/*** DttExportBlock ***/

.DttExportBlock {
    color: #2c2c2c;
    font-family:dosis-regular;
}

.DttExportBlock .entriesNumber {
    float:left;
    margin-left:2px;
    margin-top:12px;
    font-family:asap-regular;
    font-size:11px;
}

.Main.full .DttExportBlock .entriesNumber {
    font-size:16px;
    margin-top:15px;
}

.DttExportBlock .entriesNumber b {
    font-family:asap-bold;
    font-weight:normal;
}

.DttExportBlock .wrap {
    float:right;
}

.DttExportBlock.halfWidth .wrap {
    float:left;
    width:100%;
}

.DttExportBlock .ebCalIcon {
    float:left;
    font-size:19px;
    margin:9px 0 0 -31px;
}

.DttExportBlock.noFloat .ebCalIcon {
    margin-top:19px;
}

.Main.full .DttExportBlock .ebCalIcon {
    font-size: 28px;
    margin: 7px 0 0 -47px;
}

.Main.full .DttExportBlock.noFloat .ebCalIcon {
    margin: 17px 0 0 -47px;
}

.DttExportBlock .wrap .labelFrom, .DttExportBlock .wrap .dateFrom, .DttExportBlock .wrap .labelTo, .DttExportBlock .wrap .dateTo {
    float:left;
}

.DttExportBlock .wrap .labelFrom, .DttExportBlock .wrap .labelTo {
    font-family:dosis-semibold;
    font-size:11px;
    margin-top:11px;
}

.DttExportBlock.halfWidth .wrap .labelFrom, .DttExportBlock.halfWidth .wrap .labelTo {
    margin-top:11px;
}

.Main.full .DttExportBlock .wrap .labelFrom, .Main.full .DttExportBlock .wrap .labelTo {
    font-size: 16px;
    margin-top: 13px;
}

.chooseExtensionTime {

    display: block;
    position: relative;
    margin-top: 60px;
    margin-left: 6px;
}

.chooseExtensionTime .ebCalIcon {

    position: absolute;
    top: 10px;
    left: 120px;
}

.DttExportBlock .wrap .dateFrom, .DttExportBlock .wrap .dateTo, .extensionDate {
    width: 124px;
    height: 13px;
    border: 1px solid #3e96a8;
    padding: 12px 5px 11px;
    margin: 0 4px;
    font-size: 11px;
    font-family: asap-bold;
    border-radius: 4px;
    line-height: 12px;
}

.Main.full .DttExportBlock .wrap .dateFrom, .Main.full .DttExportBlock .wrap .dateTo {
    padding: 15px 8px;
    margin: 0 8px;
    font-size: 16px;
    margin: 0 8px;
}

.DttAdminTeachersList .DttExportBlock.noFloat .wrap .dateFrom, .DttAdminTeachersList .DttExportBlock.noFloat .wrap .dateTo, .DttAdminTeachersList .DttExportBlock.noFloat .wrap .DttButton {
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.Main.full .DttAdminTeachersList .DttExportBlock.noFloat .wrap .dateFrom, .Main.full .DttAdminTeachersList .DttExportBlock.noFloat .wrap .dateTo {
    height:45px;
}

.Main.mobile .DttAdminTeachersList .DttExportBlock.noFloat .wrap .dateFrom, .Main.mobile .DttAdminTeachersList .DttExportBlock.noFloat .wrap .dateTo {
    height: 38px;
}

.DttAdminTeachersList .DttExportBlock.noFloat {
    margin-bottom:10px;
}

.DttAdminTeachersList .logoInput {

    min-height: 200px;
}

.DttExportBlock .wrap .DttButton {
    float:left;
    color:#fff;
}

.DttExportBlock.halfWidth .wrap .DttButton {
    float:right;
}

.Main.full .DttExportBlock .wrap .DttButton {
    height:45px;
}

.DttExportBlock .wrap .DttButton .caption:not(.smallsize) {
    font-size: 13.5px;
}

.Main.full .DttExportBlock .wrap .DttButton .caption:not(.smallsize) {
    font-size: 18px;
}

.DttExportBlock.hidden {
    display:none;
}

.DttExportBlock.noFloat .entriesNumber, .DttExportBlock.noFloat .wrap, .DttExportBlock.noFloat .wrap .labelFrom, .DttExportBlock.noFloat .wrap .labelTo {
    float: none;
}

.DttExportBlock.noFloat .wrap .DttButton, .DttExportBlock.noFloat .labelTo {
    clear:left;
}

.Main .DttExportBlock.noFloat .wrap .dateFrom, .Main .DttExportBlock.noFloat .wrap .dateTo {
    margin:10px 0;
}

.DttAdminTeachersList .DttExportBlock {
    margin-bottom:10px;
}

.DttAdminTeachersList .DttExportBlock .entriesNumber {
    margin-top: 3px;
    margin-bottom: 12px;
}

.Main.full .DttAdminTeachersList .DttExportBlock .entriesNumber {
    margin-top: 15px;
    margin-bottom:0;
}

/*** DttLKCBlock ***/

.DttLKCBlock.hidden {
    display:none;
}

.DttAdminLicenseKeysList .DttLKCBlock .lkcNumericStepper, .DttAdminLicenseKeysList .DttLKCBlock .lkcNumericStepperKO {
    float: left;
    width: 100%;
    height: 48px;
}

.DttAdminLicenseKeysList .DttLKCBlock .lkcNumericStepper .stepperField, .DttAdminLicenseKeysList .DttLKCBlock .lkcNumericStepperKO .stepperField {
    position: absolute;
    left: 0;
    right: 76px;
}

.DttAdminLicenseKeysList .DttLKCBlock .lkcNumericStepper .Button {
    position:absolute;
    right:0;
}

.DttAdminLicenseKeysList .DttLKCBlock .lkcNumericStepper .Button.niAddBtn {
    right:38px;
}

.DttAdminLicenseKeysList .DttLKCBlock .DttButton {
    width:100%;
    max-width:none;
    margin:0 0 20px;
}

.DttAdminLicenseKeyDetails .DttLKCBlock .lkcNumericStepper {
    float:left;
}

.DttAdminLicenseKeyDetails .DttLKCBlock .DttButton {
    width:200px;
    margin:0 0 10px 10px;
    float:left;
}

.Main.full .DttAdminLicenseKeyDetails .DttLKCBlock .DttButton {
    width:250px;
    margin:0 0 15px 15px;
}

/*** DttAdminTeacherFilter ***/

.adminPopUp .column1 {
    float: left;
}

.adminPopUp .column2 {
    float: right;
}

.Main.mobile .adminPopUp .column1, .Main.mobile .adminPopUp .column2 {
    float: none;
    clear: both;
    margin: 0 auto;
    width:auto !important;
}

/*** DttAdminTeacherFilter ***/

.DttAdminTeacherSorting .column1 {
    float: left;
}

.DttAdminTeacherSorting .column2 {
    float: right;
}

.Main.full .DttAdminTeacherSorting .column2 {
    float: left;
}

.Main.mobile .DttAdminTeacherSorting .column1, .Main.mobile .DttAdminTeacherSorting .column2 {
    clear: both;
    float: none;
    width: auto !important;
    margin: 0 auto;
}

/*** DttCheckBox  ***/
.DttCheckBox {
    width: 17px;
    height: 17px;
    border: 2px solid #909090;
    border-radius: 4px;
    font-size: 22px;
}

.DttCheckBox:before {
    margin-left:-3px;
}

.Main.full .DttCheckBox {
    width: 26px;
    height: 26px;
    font-size:32px;
}

.Main .DttCheckBox.check {
    line-height: 16px;
}

.Main.full .DttCheckBox.check {
    line-height: 26px;
}

/*** DttCheckBoxGroup  ***/

.DttCheckBoxGroup {
    margin-bottom:33px;
}

.Main.full .DttCheckBoxGroup {
    margin-bottom:44px;
}

.DttCheckBoxGroup .cgHeadline {
    text-transform: uppercase;
    font-size: 11px;
    font-family: asap-bold;
    color: #646464;
    margin: 0 0 30px 0;
}

.Main.full .DttCheckBoxGroup .cgHeadline {
    font-size:16px;
}

.DttCheckBoxGroup .lineWrap {
    clear:both;
    position:relative;
    min-height:21px;
    margin-bottom:16px;
}

.Main.full .DttCheckBoxGroup .lineWrap {
    min-height:30px;
    margin-bottom:23px;
}

.DttCheckBoxGroup .lineWrap .checkBox {
    position:absolute;
}

.DttCheckBoxGroup .lineWrap .TranslatableText, .DttCheckBoxGroup .lineWrap .literalCaption {
    font-family: asap-regular;
    font-size: 15px;
    margin-left: 38px;
}

.Main.full .DttCheckBoxGroup .lineWrap .TranslatableText, .Main.full .DttCheckBoxGroup .lineWrap .literalCaption {
    font-size: 23px;
    margin-left: 57px;
}

.DttCheckBoxGroup .lineWrap.noDeselect .checkBox.check {
    cursor:default;
}

/*** filtersWrap ***/

.filtersWrap .DttPopupSelect {
    width: 100px;
    height: 13px;
    padding: 15px 8px;
    margin: 0 8px;
    border: 1px solid #3e96a8;
}

.filtersWrap .valueInput {
    width: auto;
    position: relative;
    margin: 0 0 7px;
}

.filtersWrap .valueInput .input, .filtersWrap .valueInput .TextInput {
    width: 100%;
    height: 38px;
    border: 1px solid #3e96a8;
    padding: 12px 20px 7px 4px;
    margin: 0;
    font-size: 11px;
    font-family: asap-bold;
    border-radius: 4px;
    line-height: 12px;
    color: #2c2c2c;
    text-transform: uppercase;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    white-space: nowrap;
}

.filtersWrap .valueInput .hintWrap {
    color: #2c2c2c;
    text-transform: uppercase;
    font-size: 11px;
    font-family: asap-bold;
    left: 5px;
    padding-top: 9px;
}

.Main.full .filtersWrap .valueInput .hintWrap {
    font-size: 16px;
    left: 8px;
    padding-top: 11px;
}

.Main.full .filtersWrap .valueInput {
    margin-bottom: 12px;
}

.Main.full .filtersWrap .valueInput .input, .Main.full .filtersWrap .valueInput .TextInput {
    font-size: 16px;
    height: 45px;
    padding: 15px 30px 15px 8px;
    margin: 0;
}

.filtersWrap .inputIcon {
    font-size: 21px;
    line-height:37px;
    float: left;
    right: 7px;
    top: 0;
    bottom: 0;
    position: absolute;
    color: #2c2c2c;
}

.Main.full .filtersWrap .inputIcon {
    font-size: 31px;
    line-height:44px;
}

.filtersWrap .valueInput .TranslatableText, .filtersWrap .valueInput .HintTextInput .TextInput, .filtersWrap .valueInput .valueWrap {
    overflow-x: hidden;
    text-overflow: ellipsis;
    overflow-y:hidden;
    padding-top: 2px;
}

/*** adminRenderer ***/

.adminRenderer {
    position:relative;
}

.adminRenderer .lineWrap {
    background: #fafafa;
    color: #2c2c2c;
    border-radius: 4px;
    margin-bottom: 2px;
    position: relative;
    padding: 14px 0 4px 6px;
    cursor: pointer;
    cursor: -webkit-pointer;
    min-height:22px;
}

.adminRenderer:hover .lineWrap, .adminRenderer.active .lineWrap {
    background: #e0e0e0; /* grey bg color */
}

.adminRenderer.active:before {
    content: "\e904";
    position: absolute;
    right: 0;
    top: 6px;
    color: #000;
    font-size: 26px;
    z-index: 1;
    width:23px;
}

.Main.full .adminRenderer.active:before {
    right: 0;
    top: 10px;
    font-size: 38px;
    width: 34px;
}

.Main.full .adminRenderer .lineWrap {
    margin-bottom: 3px;
    padding: 14px 0 8px 8px;
    min-height:38px;
}

.adminRenderer .lineWrap .entryHeadline {
    font-family: asap-bold;
    font-size: 15px;
    max-width: calc(100% - 140px);
    white-space: nowrap;
    overflow-x: hidden;
    overflow-y: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}

.Main.full .adminRenderer .lineWrap .entryHeadline {
    font-size:22px;
    /* line-height:17px; */
    max-width: calc(100% - 200px);
}

.DttAdminLicenseKeyListRenderer.adminRenderer .lineWrap .entryHeadline {
    padding-top: 4px;
}

.Main.full .DttAdminLicenseKeyListRenderer.adminRenderer .lineWrap .entryHeadline {
    padding-top:8px;
}

.adminRenderer .lineWrap .entryInfo {
    font-family:asap-regular;
    font-size:8px;
    display:inline;
}

.Main.full .adminRenderer .lineWrap .entryInfo {
    font-size:12px;
}

.adminRenderer .lineWrap .iconsWrap {
    position:absolute;
    right:19px;
    top:10px;
}

.Main.full .adminRenderer .lineWrap .iconsWrap {
    right:28px;
    top:15px;
}

.adminRenderer .lineWrap .iconsWrap .entryIcon {
    width:20px;
    height:20px;
    border-radius:3px;
    margin:0 2px 0 0;
    float:left;
}

.Main.full .adminRenderer .lineWrap .iconsWrap .entryIcon {
    width:30px;
    height:30px;
    margin-right:4px;
}


.Main .adminRenderer .lineWrap .iconsWrap .entryIcon:last-child {
    margin-right: 0;
}

.Main .DttAdminStudentsListRenderer.adminRenderer .lineWrap .entryHeadline {
    float:left;
    margin-top: 1px;
    max-width: calc(100% - 140px);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow-x: hidden;
    overflow-y: hidden;
}

.Main.full .DttAdminStudentsListRenderer.adminRenderer .lineWrap .entryHeadline {

    max-width: calc(100% - 220px);
}

.Main .DttAdminStudentsListRenderer.adminRenderer .classesWrap {
    margin-left:8px;
}

.Main.full .DttAdminStudentsListRenderer.adminRenderer .classesWrap {
    margin-left: 12px;
}

.DttAdminStudentsList .formSubHeaderListTitleWrap {

    margin-left: 6px;
    margin-top: -10px;
    padding-top: 0px;
}

/*** logRenderer ***/
.logRenderer {
    clear: both;
    margin: 0 24px 19px 18px;
    height: 19px;
}

.Main.full .logRenderer {
    height:29px;
    margin-right:58px;
}

.Main.mobile .logRenderer {
    margin-left:8px;
}

.logRenderer .TranslatableText, .logRenderer .caption, .lbNoentires {
    font-family: "asap-regular";
    color: #2c2c2c;
    font-size: 15px;
    margin-bottom: 16px;
}

.Main.full .logRenderer .TranslatableText, .Main.full .logRenderer .caption, .Main.full .lbNoentires {
    font-size: 22px;
    padding-left: 18px;
}

.logRenderer .boldCaption {
    font-family: "asap-bold";
    color: #2c2c2c;
    font-size: 13px;
}

.Main.full .logRenderer .boldCaption {
    font-family: "asap-bold";
    font-size: 22px;
}

.eLogWrap .logRenderer.boldCaption{
    font-family: "asap-regular";
    color: #2c2c2c;
    font-size: 15px;
    margin-bottom: 16px;
}

/*** lastQuestionOnDayRenderer ***/

.lastQuestionOnDayRenderer {
    clear: both;
    margin: 0 24px 19px 8px;
    height: 10px;
}

.Main.full .lastQuestionOnDayRenderer {
    height: 19px;
    margin-right: 58px;
}

.Main.mobile .lastQuestionOnDayRenderer {
    margin-left: 8px;
}

.lastQuestionOnDayRenderer .TranslatableText, .lastQuestionOnDayRenderer .caption, .lbNoentires {
    font-family: "asap-regular";
    color: #2c2c2c;
    font-size: 15px;
    float: left;
    margin-right:16px;
    min-width: 76px;
}

.Main.full .lastQuestionOnDayRenderer .TranslatableText, .Main.full .lastQuestionOnDayRenderer .caption, .Main.full .lbNoentires {
    font-size: 22px;
    padding-left: 8px;
    padding-bottom: 64px;

    min-width: 130px;
}

.lastQuestionOnDayRenderer .boldCaption {
    font-family: "asap-bold";
    color: #2c2c2c;
    font-size: 15px;
    float: left;
    min-width: 80px;
}

.Main.full .lastQuestionOnDayRenderer .boldCaption {
    font-family: "asap-bold";
    font-size: 22px;
    min-width: 130px;
}

.lastQuestionOnDayFormSubHeaderWrap {
    padding-top: 0px;
    padding-left: 0;
    margin-left: 8px;
}

.Main.full .lastQuestionOnDayFormSubHeaderWrap {

    margin-left: 18px;
}

/*** DttCaptionDateTimeRenderer ***/
.DttCaptionDateTimeRenderer .TranslatableText {
    float: left;
}

.DttCaptionDateTimeRenderer .SimpleDiv {
    float: right;
}

/*** DttKeyValueRenderer ***/

.DttKeyValueRenderer .caption {
    float: left;
}

.DttKeyValueRenderer .boldCaption {
    float: right;
}

/*** DttLicenseKeyDateTimeRenderer ***/

.DttLicenseKeyDateTimeRenderer .caption {
    float: left;
    width: 100px;
    text-overflow: ellipsis;
}

.DttLicenseKeyDateTimeRenderer .name {
    float: left;
    text-overflow: ellipsis;
    color: #444444;

}

.DttLicenseKeyDateTimeRenderer .boldCaption {
    float: right;
}

/*** .DttLicenseClassesDateTimeRenderer ***/

.DttLicenseClassesDateTimeRenderer .caption {
    float:left;
}

.DttLicenseClassesDateTimeRenderer .timeWrap {
    float: right;
}

/*** DttBooleanSwitch ***/
.DttBooleanSwitch {
    border: 1px solid #f2967f;
    text-transform: uppercase;
    color: #2c2c2c;
    font-family: asap-bold;
    font-size: 11px;
    padding: 12px 0 10px 0;
    border-radius: 4px;
    cursor: pointer;
    cursor: -webkit-pointer;
    position: relative;
}

.Main.full .DttBooleanSwitch {
    font-size: 16px;
    padding: 10px 0 7px 0;
}

.DttBooleanSwitch .caption {
    margin-left:6px;
    margin-right: 32px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.Main.full .DttBooleanSwitch .caption {
    margin-left:10px;
}

.DttBooleanSwitch .switch {
    width: 30px;
    height: 15px;
    position:absolute;
    top:50%;
    right:4px;
    margin-top:-7.5px;
}

.Main.full .DttBooleanSwitch .switch {
    width: 45px;
    height: 25px;
    top: 50%;
    right: 8px;
    margin-top: -12.5px;
}

.DttBooleanSwitch .switch .offBg, .DttBooleanSwitch .switch .onBg {
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
     -webkit-transition: all 0.5s;
    transition: all 0.5s;
    border-radius:30px;
}

.DttBooleanSwitch .switch .offBg {
    background:#9e9e9e;
    z-index:10;
}

.DttBooleanSwitch .switch .onBg {
    background: #f36c49;
    z-index:10;
}

.DttBooleanSwitch .switch .knob {
    width:15px;
    height:15px;
    position:absolute;
    top:0;
    background:#e2e2e2;
    border-radius:30px;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    z-index:20;
}

.Main.full .DttBooleanSwitch .switch .knob {
    width: 25px;
    height: 25px;
}

.DttBooleanSwitch .switch.on .onBg {
   opacity:1;
}

.DttBooleanSwitch .switch.on .offBg {
   opacity:0;
}

.DttBooleanSwitch .switch.off .onBg {
   opacity:0;
}

.DttBooleanSwitch .switch.off .offBg {
   opacity:1;
}

.DttBooleanSwitch .switch.off .knob {
    left:0;
}

.DttBooleanSwitch .switch.on .knob {
    left: 15px;
}

.Main.full .DttBooleanSwitch .switch.on .knob {
    left:20px;
}

.FormBooleanInput .DttBooleanSwitch {
    border-color: #9e9e9e;
    color: #9e9e9e;
    cursor: default;
}

.FormBooleanInput.editing .DttBooleanSwitch {
    border-color: #f2967f;
    color: #2c2c2c;
    cursor: pointer;
}

.Main .functionsContent .funcElement {
    float:left;
    width:155px;
    margin:0 10px 15px;
    height:38px;
}

.Main.full .functionsContent .funcElement {
    width: 230px;
    margin:0 13px 25px 18px;
}

.Main.mobile .functionsContent .funcElement {
    margin-left:0;
    margin-right:0;
    width:100%;
}

.functionsContent .funcWrap, .DttDetailsView .marginWrap {
    clear: both;
}

.Main.mobile .functionsContent .funcWrap, .Main.mobile .DttDetailsView .marginWrap {
    margin: 0 8px 15px;
}

.Main.mobile .functionsContent .funcWrap .formSubHeaderWrap, .Main.mobile .DttDetailsView .marginWrap .formSubHeaderWrap {
    margin-left:0;
}

.functionsContent .assignCodeWrap .staticOutput {
    float:left;
    margin-top:10px;
}

.Main.mobile .functionsContent .assignCodeWrap .staticOutput {
    margin-left:0;
}

.Main.full .functionsContent .assignCodeWrap .staticOutput {
    margin-top: 4px;
}

.functionsContent .assignCodeWrap .assignInput {
    float: left;
    background: #fff;
    border: 1px solid #e2e2e2;
    border-radius: 4px;
    color: #525252;
    font-family: "asap-bold";
    font-size: 13px;
    padding: 1px 0 1px 14px;
    margin: 0 0 12px 12px;
    height: 38px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.Main.full .functionsContent .assignCodeWrap .assignInput {
    font-size: 22px;
    padding: 1px 0 1px 20px;
    margin-left:17px;
    height:38px;
}

.Main.mobile .functionsContent .assignCodeWrap {
    margin:0 8px;
}

.Main.mobile .functionsContent .assignCodeWrap .assignInput {
    clear:both;
    width:100%;
    margin-left:0;
}

.Main .functionsContent .assignCodeWrap .funcElement {
    width:141px;
    margin-left:12px;
}

.Main.full .functionsContent .assignCodeWrap .funcElement {
    margin-left:17px;
}

.Main.mobile .functionsContent .assignCodeWrap .funcElement {
    clear:both;
    width:100%;
    margin-left:0;
}

.functionsContent .assignCodeWrap.hidden {
    display:none;
}

/*** DttListPlaceholder ***/

.Main .DttListPlaceholder {
    position: absolute;
    right: 8px;
    background: #e0e0e0; /* grey bg color */
    border-radius:5px;
    top:30px;
    bottom:0;
    left:auto;
    border-bottom-left-radius:0;
    border-bottom-left-radius:0;
}

.Main .DttListPlaceholder .TranslatableText {
    position:absolute;
    left:0;
    right:0;
    top:50%;
    margin-top:-14.5px;
    text-align:center;
    vertical-align:middle;
    color:#2c2c2c;
    font-size:24px;
    font-family:asap-bold;
}

.Main.full .DttListPlaceholder {
    top:60px;
}

.Main .DttAdminAccountMenu + .DttListPlaceholder, .Main .DttAccountMenu + .DttListPlaceholder {
    top: 10px;
}

.Main.full .DttAdminAccountMenu + .DttListPlaceholder, .Main.full .DttAccountMenu + .DttListPlaceholder {
    top: 36px;
}

.tvMinHeight {
    min-height:900px;
}

.iconsWrap .Container.entryIcon {
    position:relative;
}

.iconsWrap .studentProgress {
    font-family: dosis-bold;
    position: absolute;
    color: #000; /*** #fff ***/
    font-size: 12px;
    left: 0;
    right: 0;
    text-align: center;
    top: 50%;
    margin-top: -6px;
    /*** text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.8); ***/
    text-shadow: 0px 0px 2px #fff,0px 0px 2px #fff,0px 0px 2px #fff,0px 0px 2px #fff;
}

/*** rendererIcons ***/
.iconsWrap .entryIcon {
    font-size: 20px;
    color: #fff;
}

.Main.full .iconsWrap .entryIcon {
    font-size:30px;
}

.icon-registered {background: #f9a881;}
.icon-registered:before {content: "\e97b";}

.icon-confirmed {background: #fec87a;}
.icon-confirmed:before {content: "\e97c";}

.icon-approved {background: #abd3b1;}
.icon-approved:before {content: "\e97d";}

.icon-licensesSent {background: #7bc9a8;}
.icon-licensesSent:before {content: "\e97e";}

.icon-blocked {background: #df5e70;}
.icon-blocked:before {content: "\e97f";}

.icon-licensesOK {background: #7ccaa9;}
.icon-licensesOK:before {content: "\e96c";}

.icon-licensesRequired {background: #fec87a;}
.icon-licensesRequired:before {content: "\e96d";}

.icon-licensesOrdered {background: #e16370;}
.icon-licensesOrdered:before {content: "\e96e";}


.icon-evaluationRunning {background: #d65f6d;}
.icon-evaluationRunning:before {content: "\e976";}

.icon-evaluationEnded {background: #7ccaa9;}
.icon-evaluationEnded:before {content: "\e974";}


.icon-activityHigh {background: #7ccaa9;}
.icon-activityHigh:before {content: "\e962";}

.icon-activityMedium {background: #abd3b1;}
.icon-activityMedium:before {content: "\e963";}

.icon-activityLow {background: #fec87a;}
.icon-activityLow:before {content: "\e964";}

.icon-activityInactive {background: #f9a881;}
.icon-activityInactive:before {content: "\e965";}

.icon-activityInactiveTwoYears {background: #df5e70;}
.icon-activityInactiveTwoYears:before {content: "\e967";}

/*
.icon-activityBlocked {background: #df5e70;}
.icon-activityBlocked:before {content: "\e902";}
*/

/* This is currently incorrect */

.icon-small {background: #92c8d1;}
.icon-small:before {content: "\e96f";}

.icon-medium {background: #92c8d1;}
.icon-medium:before {content: "\e970";}

.icon-flat {background: #92c8d1;}
.icon-flat:before {content: "\e971";}

.icon-byPiece {background: #92c8d1;}
.icon-byPiece:before {content: "\e972";}


.icon-noProblems {background: #7bc9a8;}
.icon-noProblems:before {content: "\e977";}

.icon-problems {background: #df5e70;}
.icon-problems:before {content: "\e978";}

.icon-ers-excellent {background: #7bc9a8;}
.icon-ers-excellent:before {content: "\e979";}

.icon-ers-high {background: #7bc9a8;}
.icon-ers-high:before {content: "\e979";}

.icon-ers-highmedium {background: #abd3b1;}
.icon-ers-highmedium:before {content: "\e979";}

.icon-ers-medium {background: #fec87a;}
.icon-ers-medium:before {content: "\e979";}

.icon-ers-lowmedium {background: #f9a881;}
.icon-ers-lowmedium:before {content: "\e979";}

.icon-ers-low {background: #df5e70;}
.icon-ers-low:before {content: "\e979";}

.icon-ds-high {background: #7bc9a8;}
.icon-ds-high:before {content: "\e96b";}

.icon-ds-medium {background: #fec87a;}
.icon-ds-medium:before {content: "\e96b";}

.icon-ds-low {background: #df5e70;}
.icon-ds-low:before {content: "\e96b";}

.icon-as-high {background: #7bc9a8;}
.icon-as-high:before {content: "\e968";}

.icon-as-medium {background: #fec87a;}
.icon-as-medium:before {content: "\e969";}

.icon-as-low {background: #f9a881;}
.icon-as-low:before {content: "\e96a";}

.icon-as-blocked {background: #df5e70;}
.icon-as-blocked:before {content: "\e97f";}

.icon-us-free {background: #7bc9a8;}
.icon-us-free:before {content: "\e977";}

.icon-us-used {background: #fec87a;}
.icon-us-used:before {content: "\e973";}

.icon-us-blocked {background: #df5e70;}
.icon-us-blocked:before {content: "\e97f";}

.NumericStepperInput .icon-niAdd:before {content: "\e901";}
.NumericStepperInput .icon-niSubtract:before {content: "\e95d";}

.exerciseMode .navBtns .DttButton.Submit .icon.icon-ic_submitBtn:before, .testMode.reviewMode .navBtns .DttButton.Submit .icon.icon-ic_submitBtn:before {
    content: "\e907";
}

.testMode .navBtns .DttButton.Submit .icon.icon-ic_submitBtn:before {
    content: "\e921";
}

.loadBlocker {

    z-index: 20000;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;

    background-color: rgba(255,255,255,0.9);

    display: none;
}

.loadBlocker.visible {

    display: block;
}

.StudentRegistrationRenderer, .StudentRegistrationListSectionRenderer {

    font-size: 15px;
    color: black;
}

.StudentRegistrationListSectionRenderer {

    margin-top: 20px;
}

.StudentRegistrationListSectionRenderer .month{
    font-weight: bold;
}

.StudentRegistrationRenderer .lineWrap, .StudentRegistrationListSectionRenderer .lineWrap {
    display: block;
    margin-right: 8px;
    margin-left: 8px;
    margin-bottom: 10px;
}

.mobile .StudentRegistrationRenderer .lineWrap, .mobile .StudentRegistrationListSectionRenderer .lineWrap {

    margin-left: 8px;
}

.StudentRegistrationRenderer .date {
    display: inline-block;
    width: 140px;
}

.StudentRegistrationRenderer .key {
    display: inline-block;
    width: 180px;
}

.StudentRegistrationRenderer .name {
    /* display: inline-block; */
    font-weight: normal;
}

.mobile .StudentRegistrationRenderer .name {
    display: inline-block;
    float: none;
}

.HintLayer {
    display: none;
    position: fixed;
    min-height: 20px;
    min-width: 20px;
    background-color: white;
    pointer-events: none;
    padding: 6px;
    border-radius: 4px;

    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
}

.labelStudentsCount {

    color: black;
    font-size: 11px;
    margin-bottom: 12px;
}

.Main.full .labelStudentsCount {

    font-size: 15px;
}

.mgAllButton {
    top: 18px !important;
    right: 9px !important;
    height: 28px !important;
    width: 28px !important;
}

.mgAllButton .icon {
    top: 1px !important;
    left: 1px !important;
}

.mgMarkedButton {
    top: 18px !important;
    right: 9px !important;
    height: 28px !important;
    width: 28px !important;
}

.mgMarkedButton .icon {
    top: 1px !important;
    left: 1px !important;
}

.DttCorrectWrongUnansweredBar .DttButton {

    display: none;
    /* position: relative !important; */
    top: 13px !important;
    left: 0px !important;
    width: 20px !important;
    height: 20px !important;
    overflow: visible;
}

.DttCorrectWrongUnansweredBar .DttButton .sensitive {

    left: -10px;
    top: -10px;
    right: -10px;
    bottom: -10px;
}

.Main.full .DttCorrectWrongUnansweredBar .DttButton {

    display: none;
    /* position: relative !important; */
    top: 20px !important;
    left: 0px !important;
    width: 20px !important;
    height: 20px !important;
}

.DttCorrectWrongUnansweredBar .DttButton .icon {
    top: 0px !important;
    left: -3px !important;
    font-size: 20px !important;
}

.TranslatableText img {
    pointer-events: none;
    padding-top: 16px;
    padding-bottom: 16px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 500px;
}

.aFuncBottom.premium, .aFuncBottom.keys {

    display: block;
    position: relative;
    margin-top: 60px;
}

.aFuncBottom.premium .label, .aFuncBottom.keys .label {
    white-space: normal !important;
    text-overflow: initial !important;
}

.DttDetailsView.mobile .aFuncBottom.premium .label, .DttDetailsView.mobile .aFuncBottom.keys .label {
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}

    .aFuncBottom.premium .noAutomaticSending, .aFuncBottom.keys .useKO {
        display: block;
        position: absolute;
        right: 8px;
        top: 15px;
        min-width: 300px;
        min-width: 100px;
        left: 160px;
    }

/*
.mobile .FormElement .label {

    width: unset !important;
    max-width: none;
}
*/

.DttAdminLicenseKeyDetails .stepperField {

    min-width: 40px;
    text-align: center;
}

.CBlock {
    margin-right: 30px;
    margin-bottom: 20px;
    display: block;
    float: left;
    white-space: nowrap;
    min-width: 350px;
}

.CBlock.second .DttButton {

    width: 200px !important;
}

.packageSizeSelect {

    margin-top: 20px;
}

.scheduledExamInfoText, .timeExtensionIsAdminManaged, .numScheduledTests {

    position: static;
    color: black;
    margin-left: 8px;
}

.Main.mobile .scheduledExamInfoText {

    position: static;
    color: black;
    margin-left: 0px;
}

.automaticSendingStatus {
    font-size: 15px;
}

.automaticSendingInfo {

    font-size: 15px;
    padding-right: 12px;
    margin-top: 32px;
}

.FormElement.noHeight {

    height: auto;
}

.Main.full .FormElement.noHeight {

    height: auto;
}

.overlappingStatusBar .DttMenuBar {

    height: 70px;
}

.overlappingStatusBar .BurgerMenuButton {

    top: 28px;
}

.overlappingStatusBar .backBtn, .overlappingStatusBar .headerContainer, .overlappingStatusBar .statsBtn, .overlappingStatusBar .logoContainer  {

    top: 28px;
}

.overlappingStatusBar .mainContent {

    top: 68px;
}

.SimulateTestScreen, .TestSimulationScreen2 {

    color: black;
}

.ModalDialog.testScheduled .closeBtn {

    display: none;
}

.ImageInputWithDisplay {

    position: relative;
    width: 100px;
    height: 100px;
    background-color: black;
    border-radius: 3px;
}

.ImageInputWithDisplay .MainImage {

    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ImageInputWithDisplay .DeleteImage {

    top: 0;
    left: 0;
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: #d6655d;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJFYmVuZV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgODAwIDgwMCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgODAwIDgwMDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8cGF0aCBkPSJNMzUwLDEwMGMtMTMuMSwwLTI2LjUsNC42LTM1LjksMTQuMVMzMDAsMTM2LjksMzAwLDE1MHYyNUgxMjV2NTBoMjcuM0wyMDAsNjc3LjNsMi4zLDIyLjdoMzk1LjNsMi4zLTIyLjdMNjQ3LjcsMjI1SDY3NQoJdi01MEg1MDB2LTI1YzAtMTMuMS00LjYtMjYuNS0xNC4xLTM1LjlTNDYzLjEsMTAwLDQ1MCwxMDBIMzUweiBNMzUwLDE1MGgxMDB2MjVIMzUwVjE1MHogTTIwMy4xLDIyNWgzOTMuOGwtNDQuNSw0MjVIMjQ3LjcKCUwyMDMuMSwyMjV6Ii8+Cjwvc3ZnPgo=");
}

.ImageInputWithDisplay .UploadImage {

    position: absolute;
    left: 50%;
    top: 50%;
    width: 40px;
    height: 40px;
    margin-left: -20px;
    margin-top: -20px;
    pointer-events: none;;

    background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiCgkgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIKCSBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNCAyNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiNGRkZGRkY7fQo8L3N0eWxlPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMTEuMiwxNVY4LjFsLTMsM0w3LjIsMTBMMTIsNS4ybDQuOCw0LjhsLTEuMSwxLjFsLTMtM1YxNUMxMi44LDE1LDExLjMsMTUsMTEuMiwxNXogTTUuNSwxOC44CgljLTAuNCwwLTAuOC0wLjEtMS4xLTAuNWMtMC4zLTAuMy0wLjUtMC42LTAuNS0xVjE1aDEuNXYyLjNoMTNWMTVIMjB2Mi4zYzAsMC40LTAuMSwwLjgtMC41LDFjLTAuMywwLjMtMC42LDAuNS0xLDAuNUg1LjV6Ii8+Cjwvc3ZnPgo=");
}

.FormImageInputWithDisplay {

    min-height: 100px;
}

.newSeparator {

    display: block;
    width: 100%;
    height: 16px;
    background-color: white;
}