:root {
    --coef: 1;
    --unit-width: 94px;
    --unit-margin: 24px;
    --green: #05a90a;
    --light-grey: #ccc;
    --grey: #e0e0e0;
    --dark-grey: #757575;
    --border-grey: #BDBDBD;
    --violet: #E8EAF6;
    --red: #D50000;
    --light-blue: #3d5afe;
    --dark-blue: #0015E9;
    --white-blue: #E0F7FA;
    --azure: #4dd0e1;
    --blue-green: #00838F;
    --purple: #8e24aa;
    --light-green: #00a99d;
    --white: #ffffff;
    --cyan: #00a6eb;
    --pink: #ee9999;
    --bit-grey: #f5f5f5;
    --heart-blue: #307177;
    --inactive-blue: #8791f5;

    --grammar-color: #ec407a;
    --vocabulary-color: #00b686;
    --exams-color: #311b92;

    --pager-dark-arrow: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAALCAYAAABcUvyWAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAG1JREFUeNpiDotMKtDWNfxx9cr5FwxIgAmIBYB4P1CBAbrEB2ySjCACKDAfSCVAFTmuWj7vAiNMBbokE0wCqCoRSG2AGcuEpANkvgOU+4AJSXA/VPUFkFGM2ASBxn4A6QhAF4T5gwFdEAQAAgwAwjUsWVgRFokAAAAASUVORK5CYII=');
    --pager-light-arrow: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAALCAYAAABcUvyWAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAD9JREFUeNpi+P///3kgFmBAB/8hAFMSKPAeqySQY0AdSSYk6wyAGKZyIkx1wn8ESMAtiOQPVEEkiQR0jwMEGAAgE4QSB5t45wAAAABJRU5ErkJggg==');
    --tick:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAOCAYAAAAmL5yKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAI9JREFUeNpiYCAD/P//X4CBEgA0YD4Ig9gsZGjuB1IJUPZDUjUn/EcF70nRHPAfExjAJBXwBQxIIcg2NM0J8BAF4vMgjCvEsWhuQFZwHkliPhbN59E0z0e34Twu04Hs9Why53E58T66/6BxjaIZZzjhCCSU6IKHOJ6QdsBjgAG5CQURXaQkVSTNBYTUAwQYABv+XIkcICbiAAAAAElFTkSuQmCC');
}

body { background: #f5f5f5; }
button:focus { outline: 0; }

#popupMessage { padding: 0; display: table; width: 100% !important; }
.ui-dialog.ui-widget-content { border-radius: 20px; }
.ui-dialog .ui-dialog-content { padding: 0; }
.popup-content { display: table-cell; vertical-align: middle; text-align: center; font-size: 20px; }

.roleSwitcherPopup #popupMessage { padding-top: 25px; }

.common-button { text-align: center; border-radius: 3px; box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.1); /*text-transform: uppercase;*/
    border: none; cursor: pointer; }
.shadow-button { background: #fff; box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.2); }
.common-button:hover { box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.3); }
.common-button:active { box-shadow: none; }
.common-button-blue, .ui-widget-content .common-button-blue { background: var(--dark-blue); color: #fff; }
.common-button-blue-inactive { background: var(--inactive-blue); box-shadow: none; cursor: default; }
.common-button-blue-inactive:hover { box-shadow: none; }
.link-button { text-decoration: underline; color: #000; font-size: 18px; }
.form-button { font-size: 100%; padding: 5px 20px; }
.popup-button { font-size: 110%; padding: 7px 20px; }
.anti-action-link { color: var(--red); }

.flat-button { text-align: center; border-radius: 3px; text-transform: uppercase; }
.flat-button-container { text-align: center; }
.flat-button-blue { padding: 3px 5px; display: inline-block; margin: 0 auto; border: 1px solid var(--light-grey);
    border-radius: 3px; color: var(--dark-blue); }
.flat-button-blue:hover { background: var(--violet); }
.flat-button-blue:active { background: var(--light-blue); color: #fff; }

.link-blue { color: var(--dark-blue); }
.underline { text-decoration: underline; }

.add-new-link { text-decoration: underline; color: var(--dark-blue); }
.add-new-link:before { content: "+ "; }

.notice-text { color: var(--dark-grey); font-size: 80%; }

.radius-block { border-radius: 12px; margin-bottom: var(--unit-margin); }
.shadow-block { background: #fff; box-shadow: 0 1px 20px 0 rgba(0, 0, 0, 0.1); }
.clickable-block:hover { box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.3); }
.full-shadow-block { background: #fff; box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2); }
.forwardable-block { cursor: pointer; }
.addable-block { cursor: url("../images/svg/plus_add.svg") 2 2, pointer; }

.col10-block { width: calc(var(--unit-width) * 10 + var(--unit-margin) * 9); }
.col7-block { width: calc(var(--unit-width) * 7 + var(--unit-margin) * 6); }
.col6-block { width: calc(var(--unit-width) * 6 + var(--unit-margin) * 5); }
.col5-block { width: calc(var(--unit-width) * 5 + var(--unit-margin) * 4); }
.col4-block { width: calc(var(--unit-width) * 4 + var(--unit-margin) * 3); }
.col3-block { width: calc(var(--unit-width) * 3 + var(--unit-margin) * 2); }
.col2-block { width: calc(var(--unit-width) * 2 + var(--unit-margin)); }
.col1-block { width: var(--unit-width); }
.block-header { display: table; width: 100%; }
.block-header-title { display: table-cell; vertical-align: middle; font-size: 24px; }
.block-header-icon { display: table-cell; vertical-align: middle; background-repeat: no-repeat; }
.block-content { margin-top: 25px; }
.block-content .link a { color: var(--dark-blue); text-decoration: underline; }
.block-content .light-text { color: var(--dark-grey); }
.block-footer { margin-top: 25px; }
.content-container { padding: var(--unit-margin); }


.paginator-container { float: right; display: table; height: 100%; }
.paginator-container .paginator { display: table-cell; vertical-align: middle; }
.paginator { color: var(--dark-grey); font-size: 14px; height: 36px; }
.paginator .pages { float: left; display: table-cell; vertical-align: middle; line-height: 36px; }
.paginator .link { float: left; width: 34px; height: 34px; margin-left: 5px; }
.paginator .link:hover { border-radius: 17px; }
.paginator .prevPagerLink { background: var(--pager-dark-arrow) center center no-repeat; transform: scale(-1,1);
    -webkit-filter: blur(0px); -ms-filter: blur(0px); filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0'); }
.paginator .prevPagerLink:hover { background: var(--pager-dark-arrow) center center no-repeat, var(--violet); }
.paginator .prevPagerLink:active { background: var(--pager-light-arrow) center center no-repeat, var(--dark-blue); }
.paginator .nextPagerLink { background: var(--pager-dark-arrow) center center no-repeat; }
.paginator .nextPagerLink:hover { background: var(--pager-dark-arrow) center center no-repeat, var(--violet); }
.paginator .nextPagerLink:active { background: var(--pager-light-arrow) center center no-repeat, var(--dark-blue); }
.paginator .link.inactive { opacity: 30%; }
.paginator .link.inactive:hover, .paginator .link.inactive:active { background: var(--pager-dark-arrow) center center no-repeat; }

.pager-block { height: 36px; display: table; width: 100%; margin-bottom: var(--unit-margin); }
.pager-block-left { width: 20%; display: table-cell; vertical-align: middle; }
.pager-block-right { width: 20%; display: table-cell; vertical-align: middle; text-align: right; }
.pager-block-links { width: 60%; float: none; display: table-cell; vertical-align: middle; text-align: center; }
.pager-block .page-text { color: var(--dark-grey); padding: 3px; }
.pager-block .page-link { color: var(--dark-blue); padding: 3px; }
.pager-block .page-link:hover { color: var(--white); text-decoration: none; background: var(--dark-blue); border-radius: 5px; }

.common-popup { padding: 50px 75px; font-family: Ubuntu, sans-serif; box-sizing: border-box; }
.common-popup .popup-image { width: 120px; height: 120px; margin: 0 auto 50px; }
.common-popup .popup-text { font-size: 110%; text-align: center; color: var(--dark-grey); }
.common-popup .popup-text p { margin-bottom: 20px; }
.common-popup .popup-button-container { display: table; margin: 50px auto 5px; }
.common-popup .popup-confirm-button { display: table-cell; border-spacing: 10px; width: 114px; height: 36px; font-size: 110%; line-height: 36px; color: #fff !important; }
.common-popup .popup-cancel-button { display: table-cell; padding-left: var(--unit-margin); }
.common-popup .popup-stretch-block { display: table-cell; width: var(--unit-margin); }
.common-popup .form-container { margin-top: 30px; }
.common-popup .form-field-container label { color: var(--dark-grey); float: left; margin-bottom: 10px; }
.common-popup .form-field-container textarea { width: 100%; box-sizing: border-box; height: 150px; resize: none; padding: 10px;
    border-radius: 5px; box-shadow: none; outline: none; border: 1px solid var(--border-grey);
}

.popup-done, .popup-error, .popup-modal { padding: 20px; font-family: Ubuntu, sans-serif; }
.popup-done .title, .popup-error .title, .popup-modal .title { margin-bottom: 20px; color: var(--dark-grey); text-align: center;
    line-height: 25px; display: inline-block; font-weight: bold;
}
.popup-done .title { padding-left: 30px; background: url("../images/icons/correct.png") no-repeat; background-size: 25px 25px; }
.popup-error .title { padding-left: 30px; background: url("../images/icons/wrong.png") no-repeat; background-size: 25px 25px; }
.popup-modal .title { font-size: 110%; }
.popup-done .content, .popup-error .content, .popup-modal .content { color: var(--dark-grey); text-align: center; }
.popup-done .attention-text, .popup-error .attention-text { color: #000; font-weight: bold; margin-top: 30px; margin-bottom: 30px; }
.popup-error .content a { text-decoration: underline; color: var(--dark-blue); }

.group-header { margin-bottom: 20px; font-size: 20px; font-weight: bold; line-height: 34px; }
.group-header:first-child { margin-top: 0; }
.group-header-label { float: left; }

.above-block .group-header { float: left; }
.group-link { float: right; line-height: 34px; }
.group-link a { color: var(--dark-blue); text-decoration: underline; font-size: 15px; }

.old-browser-popup { width: 800px; margin: 0 auto; }
.old-browser-popup .popup-image { background: url(../images/1q2jo61fb81ap.png) 0 0 no-repeat; width: 160px; height: 160px; }
.old-browser-popup .popup-text-color { color: #0015E9; }

.correct { color: var(--green) !important; }
.incorrect { color: var(--red) !important; }

.daterangepicker { font-family: 'Ubuntu', sans-serif; }

.filter-block { margin-bottom: var(--unit-margin); position: relative; }
.filter-block-field { padding: 9px 100px 9px 37px; font-size: 18px; width: 100%; border: 1px solid var(--light-grey); border-radius: 5px;
    background: url(../images/svg/filter.svg) #fff no-repeat 7px center; color: var(--dark-grey); background-size: auto 70%;
    box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
}
.filter-block-field:focus { color: #000; border-color: var(--dark-blue); }
.filter-clear-block { position: absolute; right: 5px; top: 10px; }
.filter-clear-button { text-decoration: underline; color: var(--light-grey); }
.filter-clear-button.state-active { color: var(--dark-blue); }

.no-items-block { padding: 58px 100px; color: var(--dark-grey); font-style: italic; font-size: 18px; text-align: center; }
.no-items-block .image { padding: 30px 0; }
.no-items-block svg { height: 70px; }
.no-items-block p { margin-bottom: 15px; }
.no-items-block p.image { margin-bottom: 0; }

.close-button { display: block; float: right; cursor: pointer; }
.close-button svg { width: 38px; height: 38px; }
.close-button svg circle { fill: none; stroke: var(--grey); }
.close-button svg line { fill: none; stroke: var(--dark-blue); }
.close-button:hover svg circle { fill: var(--violet); }
.close-button:active svg circle { fill: var(--dark-blue); stroke: var(--dark-blue); }
.close-button:active svg line { stroke: var(--white); }

.go-back-link { color: var(--dark-blue); text-decoration: underline; }
.go-back-link:before { content: '← '; }

.left-menu-block .menu-item-block { padding-left: 15px; margin-bottom: 20px; border-left: 2px solid transparent; }
.left-menu-block .menu-item { color: var(--dark-grey); }
.left-menu-block .menu-item-block.menu-active { border-color: var(--dark-blue); }
.left-menu-block .menu-item-block.menu-active .menu-item { color: var(--dark-blue); }
.left-menu-block .menu-item-block:hover .menu-item { color: var(--dark-blue); }

.sound-icon { display: inline-block; width: 30px; height: 30px; cursor: pointer; vertical-align: middle; }
.sound-icon .st0 { fill: var(--dark-grey); }
.sound-icon .st1 { fill: none; stroke: var(--dark-grey); stroke-miterlimit: 10; }
.sound-icon:hover .st0, .sound-icon-active .st0 { fill: var(--cyan); }
.sound-icon:hover .st1, .sound-icon-active .st1 { stroke: var(--cyan); }

.block-actions-container { position: absolute; right: 10px; top: 10px; }
.block-actions-wrapper { position: relative; }
.block-actions-toggle { position: absolute; right: 0; top: 0; padding: 2px 4px; display: table; border: 1px solid transparent; border-radius: 8px; }
.block-actions-toggle svg { display: table-cell; vertical-align: middle; }
.block-actions-toggle:hover { border-color: var(--dark-grey); box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.1); }
.block-actions-toggle:active { box-shadow: none; }
.block-actions { position: absolute; top: 30px; right: 0; width: 200px; border: 1px solid var(--grey); border-radius: 8px;
    box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.1); background: var(--white); z-index: 1; }
.block-actions.hidden { display: none; }
.block-action { float: left; clear: left; width: 100%; box-sizing: border-box; font-size: 90%;
    border-bottom: 1px solid var(--grey); padding: 4px; text-align: center; }
.block-action:hover { color: var(--dark-blue); }
.block-actions .block-action:last-child { border-bottom: none; }

    /** loader **/
.lds-dual-ring { display: inline-block; width: 24px; height: 24px; }
.lds-dual-ring:after { content: " "; display: block; width: 18px; height: 18px; margin: 2px; border-radius: 50%;
    border-width: 2px; border-style: solid; border-color: var(--dark-grey) transparent var(--dark-grey) transparent;
    animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }}