.profileContainer { width: 1392px; }

.profile-menu-block { float: left; margin-right: var(--unit-margin); }
.profile-menu-block .types-list-block { display: block; }
.profile-menu-block .block-header { margin-bottom: 20px; }
.profile-menu-block .block-header-title { font-size: 20px; }

.profile-center-block { float: left; }

.profile-form-container .block-header { margin-bottom: 15px; }
.profile-form-container .block-header-title { font-size: 20px; }
.profile-form-container .block-header-link { display: table-cell; text-transform: uppercase; text-align: right; vertical-align: middle; }
.profile-form-container .block-header-link a { color: var(--dark-blue); }

.form-fields-container { padding: 30px; }
.field-container { margin-bottom: 20px; padding: 10px 0; border-bottom: 1px solid var(--border-grey); }
.field-container:first-child { padding-top: 0; }
.saved-values-container .field-container:first-child, .edited-values-container .field-container:first-child { padding-top: 10px; }
.saved-values-container .field-container:last-child { border-bottom: none; padding-bottom: 0; }

.field-label { float: left; color: var(--dark-grey); width: 200px; height: 100%; text-transform: lowercase; }
.field-value { float: left; }
.form-field { width: 426px; }
.form-field input { width: 100%; border-radius: 10px; box-sizing: border-box; padding: 5px; font-size: 16px; border: 1px solid var(--border-grey); }
.field-error input { border-color: var(--red); }
.form-field input:focus { border-color: var(--dark-blue); }
.form-error { display: none; color: var(--red); font-size: 12px; }

.dropdown-field { position: relative; }
.dropdown-field .dropdown-label { float: left; width: 100%; border-radius: 10px; box-sizing: border-box; padding: 5px;
    font-size: 16px; border: 1px solid var(--border-grey); text-transform: lowercase; color: var(--dark-grey); position: relative;
    cursor: pointer;
}
.dropdown-field .dropdown-label:after { content: ''; background: var(--pager-dark-arrow) center no-repeat;
    width: 25px; height: 20px; position: absolute; right: 0; transform: rotate(90deg);
}
.dropdown-field.opened .dropdown-label.opened:after { transform: rotate(-90deg); }

.dropdown-field .dropdown-values { display: none; position: absolute; border: 1px solid var(--grey); background: var(--white);
    padding: 10px; border-radius: 16px; top: 57px; box-sizing: border-box; }
.dropdown-field.opened .dropdown-values { display: block; }
.dropdown-field .dropdown-value { cursor: pointer; padding: 5px 10px; margin: 0 -10px; color: var(--dark-grey); }
.dropdown-field .dropdown-value:hover { background: var(--grey); }
.dropdown-field .default-value { text-transform: lowercase; }

.field-container.field-error .form-error { display: block; clear: left; margin-top: 2px; }

.checkbox-item { float: left; margin: 0 20px 20px 0; cursor: pointer; }
.checkbox-field { width: 24px; height: 24px; float: left; border: 1px solid var(--border-grey); border-radius: 3px; margin-right: 10px; }
.checkbox-label { float: left; line-height: 24px; }
.checkbox-item-checked .checkbox-field { background: var(--tick) center center no-repeat, var(--dark-blue); border-color: var(--dark-blue); }
.checkbox-item-checked .checkbox-label { color: var(--dark-blue); }

#profile-form .edited-values-container { display: none; }
.edited-values-container .field-container { border-bottom: none; display: table; }
.edited-values-container .field-label { line-height: 24px; float: none; height: 100%; display: table-cell; vertical-align: middle; }
.edited-values-container .multiline-field-container .field-label { vertical-align: top; }

.form-buttons { float: right; display: table; }
.form-buttons.invisible { display: none; }
.submit-button { padding: 5px 10px; font-size: 20px; text-transform: uppercase; display: table-cell; }
.cancel-button { padding: 5px 20px 5px 0; font-size: 20px; display: table-cell; }
.cancel-button a { color: var(--azure); }

.indexContainer { width: 65%; margin-top: 0; display: table; height: 100%; }
.index-block-container { display: table-cell; vertical-align: middle; }

.index-block { height: 610px; }
.index-left-container { width: 50%; height: 100%; float: left; background: var(--cyan); -moz-border-radius: 12px 0 0 12px;
    -webkit-border-radius: 12px 0 0 12px; position: relative; }
.index-right-container { width: 50%; height: 100%; float: left; display: table; }
.index-left-block { padding: 50px 20px; }
.index-left-block .header-sub-text { width: 100%; text-align: center; color: var(--white); font-size: 18px; margin-bottom: 10px; }
.index-left-block .header-text { width: 100%; text-align: center; color: var(--white); font-size: 24px; margin-bottom: 120px; }
.index-left-container .footer-text { width: 100%; position: absolute; text-align: center; color: var(--white);
    font-size: 20px; bottom: 40px; left: 0; }
.index-left-container .footer-text-container { padding: 0 20px; }
.index-left-container .footer-text a { text-decoration: underline; }
.index-left-block .image { width: 100%; text-align: center; }
.index-right-block { padding: 30px 100px; position: relative; display: table-cell; vertical-align: middle; }
.index-right-block .close-button { position: absolute; top: 10px; right: 10px; }
.index-right-block .logo-container { width: 100%; text-align: center; margin-bottom: 50px; }
.index-right-block .logo-container img { max-width: 90%; max-height: 120px; }
.index-right-block .logo-container svg { max-height: 130px; max-width: 200px; }
.index-right-block .form-instruction { color: var(--dark-grey); text-align: center; margin-bottom: 30px; font-size: 18px; }
.index-right-block .goto { display: block; color: var(--dark-blue); text-align: center; text-decoration: underline; }
.index-right-block .field-container { border-bottom: none; }
.index-right-block .form-field { width: 100%; }
.index-right-block .field-label{ width: 100%; margin-bottom: 3px; }
.index-right-block .submit-button { font-size: 18px; text-transform: none; margin: 30px auto 0; display: block; }
.index-right-block .info-text { margin-bottom: 20px; }

.index-container { position: relative; padding: 30px 100px;  }
.index-container .close-button { position: absolute; top: 10px; right: 10px; }
.index-center-block { width: 100%; position: relative; }
.index-center-block .form-userdata-container { width: 50%; margin: 0 auto; }
.index-center-block .logo-container { width: 100%; text-align: center; }
.index-center-block .form-instruction { color: var(--dark-grey); text-align: center; margin-bottom: 30px; font-size: 18px; }
.index-center-block .field-container { border-bottom: none; margin-bottom: 10px; }
.index-center-block .form-field { float: none; display: table-cell; vertical-align: middle; }
.index-center-block .field-label { width: 40%; float: none; display: table-cell; vertical-align: middle; }
.index-center-block .form-error { padding-left: 40%; }
.index-center-block .submit-button { font-size: 18px; text-transform: none; margin: 30px auto 0; display: block; }
.index-center-block .form-header { margin: 40px 0; text-align: center; font-size: 20px; font-weight: bold; }
.index-center-block .language-levels-container { text-align: center; }
.index-center-block .language-level-button { text-transform: none; border-radius: 10px; margin: 0 20px 10px 0;
    color: var(--dark-grey); padding: 5px; cursor: pointer; display: inline-block; }
.index-center-block .language-level-button:hover { cursor: pointer; background: none; border-color: var(--light-blue); color: var(--light-blue); }
.index-center-block .language-level-button:active { border-color: var(--light-blue); color: var(--light-blue); background: none; }
.index-center-block .language-level-button.selected { border-color: var(--light-blue); color: var(--light-blue); }

.registration-container .index-left-container { display: none; }

.coursebooks-list-container { text-align: center; }
.coursebook-container { width: 160px; height: 210px; padding: 10px 10px 20px; border: 1px solid var(--white);
    box-sizing: border-box; overflow: hidden; margin: 10px 20px 10px 0; border-radius: 10px; display: inline-block; }
.coursebook-container:hover { cursor: pointer; }
.coursebook-container.selected { border-color: var(--azure); }
.coursebook-image { float: left; width: 100%; height: 140px; background-size: contain; resize: both; display: table-cell; }
.coursebook-title { float: left; width: 100%; font-size: 16px; text-align: center; color: var(--dark-grey); padding-top: 10px;
    overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: pre-wrap; }
.coursebook-container.selected .coursebook-title { color: #000; }

.login-container .index-right-block { padding-left: 15%; padding-right: 15%; }
.forgot-password-link-container { float: right; }
.forgot-password-link { text-align: right; color: var(--dark-blue); text-decoration: underline; line-height: 24px; }
.remember-me-container .checkbox-label { color: var(--dark-grey); }
.login-container .submit-button { margin-bottom: 30px; padding-left: 20px; padding-right: 20px; }
.login-container .registration-instruction { color: #000; }
.registration-link { color: var(--dark-blue); text-decoration: underline; }
.login-container .index-left-container { background: var(--cyan) url(../images/index/person_default.png) center center;
    background-repeat: no-repeat; }

/*.scroll-pane { overflow: auto; width: 100%; }*/
/*.jspDrag { background: var(--dark-grey); cursor: pointer; width: 10px; left: 5px; border-radius: 5px; }*/
/*.jspTrack { background: none; }*/
/*.jspVerticalBar { background: none; right: 5px; }*/
/*.jspContainer { padding: 0 10px; box-sizing: border-box; }*/
/*.jspPane { padding: 0 10px !important; box-sizing: border-box; }*/

.companies-data-container { max-height: 200px; }
.companies-data-container .jspPane { padding: 0 10px !important; box-sizing: border-box; }
.companies-data-container .jspContainer { padding: 0 10px; box-sizing: border-box; }
.coursebooks-data-container { position: relative; max-height: 400px; width: 535px; }

.pageContainer { width: 1392px; }
.page-left-block { float: left; }
.page-left-block .go-back-block { margin-bottom: 20px; }
.page-center-block { float: left; }
.page-content-container { padding: 8%; }
.page-content-container p { margin-bottom: 20px; font-size: 18px; line-height: 24px; }
.page-content-container p a, .page-content-container li a { color: var(--dark-blue); text-decoration: underline; }
.page-content-container table { width: 95% !important; text-align: center; margin: 0 auto; table-layout: fixed; clear: both; border-spacing: 1px; }
.page-content-container td, .page-content-container th, .page-content-container table { border: 1px solid #fff; }
.page-content-container td, .page-content-container th { padding: 10px 5px; word-wrap: break-word; }
.page-content-container th { font-size: 20px; font-weight: bold; text-align: center; }
.page-content-container tr:nth-child(2n) { background: #d9f2f2; }
.page-content-container tr:nth-child(2n+1) { background: #ade6ff; }
.page-content-container td p { text-align: center; margin: 3px; }
.page-content-container ul { list-style: disc; margin-bottom: 5px; }
.page-content-container ol { list-style: decimal; margin-bottom: 5px; }
.page-content-container li { margin-left: 15px; font-size: 18px; line-height: 28px; }
.page-content-container img { max-width: 98%; height: auto; margin: 0 auto; display: block; }
.page-content-container iframe { width: 100%; height: 464px; }

.confirmationContainer { width: 1392px; }
.confirmation-container { padding: 25px; margin: 0 auto 30px; }
.confirm-button { padding: 5px 10px; font-size: 20px; text-transform: uppercase; display: block;}
.confirmation-block .header-text { font-size: 22px; color: var(--dark-blue); text-align: center; margin-bottom: 20px; }
.confirmation-block p { margin-bottom: 15px; font-size: 18px; line-height: 28px; }
.confirmation-block a { color: var(--dark-blue); }

@media screen and (min-device-width: 768px) and (max-device-width: 1392px) {
    .profileContainer, .confirmationContainer { width: 100%; }
    .confirmation-container { padding: 0; width: 95%; }
    .confirmation-block { padding: 20px; }

    .profile-menu-block { width: 100%; text-align: center; }
    .profile-menu-block .types-list-block { margin: 0 auto; display: table; }
    .profileContainer .types-list-block .type-item-block { float: left; border-left: none; }

    .profile-center-block { clear: left; width: 100%; margin-bottom: 20px; }
    .profile-form-container { margin: 0 auto; }

    .indexContainer { width: 95%; }
    .index-left-block { padding: 20px; }
    .index-center-block { padding: 20px; }

    .index-center-block .form-userdata-container { width: 70%; }
}

@media screen and (max-device-width: 767px) {
    .profileContainer, .confirmationContainer { width: 100%; margin-top: 10px; }
    .confirmation-container { padding: 0; width: 95%; }
    .confirmation-block { padding: 10px; }

    .profile-menu-block { width: 100%; text-align: center; }
    .profile-menu-block .types-list-block { margin: 0 auto; display: table; }
    .profileContainer .types-list-block .type-item-block { float: left; border-left: none; }

    .profile-center-block { clear: left; width: 100%; margin-bottom: 20px; }
    .profile-form-container { width: 100%; }
    .profile-form-container .block-header-title { padding-left: 10px; }
    .profile-form-container .block-header-link { padding-right: 10px; }
    .form-fields-container { border-radius: 0; padding: 10px; }
    .field-label { width: 100%; }
    .field-value { clear: left; margin-top: 10px; }
    .form-field { clear: left; margin-top: 10px; width: 95%; }
    .edited-values-container .field-container { display: block; }
    .form-buttons { padding-right: 10px; }
    .submit-button, .cancel-button { font-size: 18px; }

    .indexContainer { width: 100%; }
    .index-container { width: 100%; padding: 10px; margin-top: 70px; box-sizing: border-box; position: static;
        border-radius: 0; background: transparent; box-shadow: none; }
    .index-block { width: 100%; height: 90%; }
    .index-left-container { width: 100%; height: auto; }
    .index-right-container { width: 100%; height: auto; padding: 10px; box-sizing: border-box; }
    .index-left-block { padding: 20px 0; }
    .index-right-block { padding: 20px; }
    .index-left-block .image { display: none; }
    .index-left-block .header-text { margin-bottom: 0; }
    .index-block-container { vertical-align: top; }
    .index-left-container { -moz-border-radius: 0; -webkit-border-radius: 0; }

    .index-right-block { padding: 50px 0; border-radius: 12px; background: #fff; box-shadow: 0 1px 20px 0 rgba(0, 0, 0, 0.1); }
    .index-right-block .close-button { display: none; }
    .index-right-block .form-instruction { padding: 0 40px; }
    .index-right-block .field-container { padding: 0 20px; }

    .index-center-block { padding: 50px 0; position: static; border-radius: 12px; background: #fff; box-shadow: 0 1px 20px 0 rgba(0, 0, 0, 0.1); }
    .index-center-block .close-button, .index-container .close-button { display: none; }
    .index-center-block .form-instruction { padding: 0 40px; }
    .index-center-block .field-container { padding: 0 20px; }

    .index-center-block .form-userdata-container { width: 100%; }
    .index-center-block .form-field { width: 100%; float: left; display: block; }
    .index-center-block .field-label{ width: 100%; float: left; display: block; }
    .index-center-block .form-header { padding: 0 10px; }

    .registration-container .index-left-container { display: block; }

    .login-container .index-left-container { display: none; }
    .login-container .index-right-block { padding-left: 10px; padding-right: 10px; }

    .pageContainer { width: 100%; }
    .page-left-block { width: 100%; }
    .page-left-block .go-back-block { text-align: center; }
    .page-left-block .left-menu-block { margin: 0 auto; display: table; }
    .page-left-block .left-menu-block .menu-item-block { float: left; clear: left; }
    .page-center-block { width: 100%; }
    .page-content-container td, .page-content-container th, .page-content-container table col { width: auto !important; }
}