.dx-popup-wrapper > .dx-overlay-content {
    border-radius: 10px;
}

/* Окно логина */
#login-popup .dx-popup-wrapper.dx-overlay-modal > .dx-overlay-content,
.ksa-popup .dx-popup-wrapper.dx-overlay-modal > .dx-overlay-content {
    padding-left: 28px;
    padding-right: 28px;
    padding-bottom: 21px;
}
    .dx-layout-manager .dx-field-item.dx-first-row {
        padding-top: 4px;
    }
    .dx-layout-manager .dx-field-item:not(.dx-first-row) {
        padding-top: 16px;
    }

.ksa-popup .dx-popup-wrapper.dx-overlay-modal > .dx-overlay-content {
    padding-top: 21px;
}

.dx-device-phone #login-popup .dx-popup-wrapper.dx-overlay-modal > .dx-overlay-content {
    padding-left: 8px;
    padding-right: 8px;
}

/* Контейнер лого */
#login-popup .ksa-login-logo-container {
    margin-top: 40px;
    margin-bottom: 48px;
}
.dx-device-phone #login-popup .ksa-login-logo-container {
    margin-top: 0;
    margin-bottom: 8px;
}

/* Лого */
.ksa-login-logo-container .ksa-login-logo {
    margin: auto;
}
.ksa-login-logo-container .ksa-login-logo img {
    display: block;
    margin: auto;
    height: auto;
    width: auto;
    max-height: 70px;
}

.ksa-select-disabled {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Полосы прокрутки формы авторизации. */
.ksa-login-form .dx-scrollable-scrollbar {
    visibility: collapse;
}

/* Контейнер поля ввода */
.ksa-login-input .dx-texteditor-container,
.ksa-login-input .dx-texteditor,
.ksa-login-input .dx-texteditor input {
    border-radius: 10px;
}

/* Внешняя метка поля ввода. */
.ksa-login-input label.dx-field-item-label.dx-field-item-label-location-top {
    font-size: 13px;
}
.ksa-login-input label.dx-field-item-label .dx-field-item-label-text {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Метка внутри пустого поля ввода */
.ksa-login-input .dx-editor-outlined.dx-texteditor-with-floating-label.dx-texteditor-empty .dx-texteditor-label .dx-label span {
    display: inline-flex;
    align-items: center;
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
}

/* Метка, вписанная в границу поля ввода */
.ksa-login-input .dx-editor-outlined.dx-texteditor-with-floating-label .dx-texteditor-label .dx-label span,
.ksa-login-input .dx-editor-outlined.dx-texteditor-with-floating-label.dx-state-focused .dx-texteditor-label .dx-label span {
    display: block;
    font-family: "Open Sans", sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
}

/* Текст в поле ввода и выпадающем списке */
.ksa-login-input .dx-texteditor-input,
.dx-selectbox-popup-wrapper .dx-list-item-content {
    font-family: "Open Sans", sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
}

/* Границы поля ввода */
.ksa-login-input .dx-editor-outlined.dx-texteditor-with-floating-label.dx-state-hover              .dx-texteditor-label .dx-label-before,
.ksa-login-input .dx-editor-outlined.dx-texteditor-with-floating-label.dx-state-hover.dx-invalid   .dx-texteditor-label .dx-label-before,
.ksa-login-input .dx-editor-outlined.dx-texteditor-with-floating-label.dx-state-focused            .dx-texteditor-label .dx-label-before,
.ksa-login-input .dx-editor-outlined.dx-texteditor-with-floating-label.dx-state-focused.dx-invalid .dx-texteditor-label .dx-label-before {
    border-top-width: 2px;
    border-left-width: 2px;
    border-bottom-width: 2px;
}
.ksa-login-input .dx-editor-outlined.dx-texteditor-with-floating-label            .dx-texteditor-label .dx-label-before,
.ksa-login-input .dx-editor-outlined.dx-texteditor-with-floating-label.dx-invalid .dx-texteditor-label .dx-label-before {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}
.ksa-login-input .dx-editor-outlined.dx-texteditor-with-floating-label.dx-state-hover              .dx-texteditor-label .dx-label,
.ksa-login-input .dx-editor-outlined.dx-texteditor-with-floating-label.dx-state-hover.dx-invalid   .dx-texteditor-label .dx-label,
.ksa-login-input .dx-editor-outlined.dx-texteditor-with-floating-label.dx-state-focused            .dx-texteditor-label .dx-label,
.ksa-login-input .dx-editor-outlined.dx-texteditor-with-floating-label.dx-state-focused.dx-invalid .dx-texteditor-label .dx-label {
    border-top-width: 2px;
    border-bottom-width: 2px;
}
.ksa-login-input .dx-editor-outlined.dx-texteditor-with-floating-label.dx-state-hover              .dx-texteditor-label .dx-label-after,
.ksa-login-input .dx-editor-outlined.dx-texteditor-with-floating-label.dx-state-hover.dx-invalid   .dx-texteditor-label .dx-label-after,
.ksa-login-input .dx-editor-outlined.dx-texteditor-with-floating-label.dx-state-focused            .dx-texteditor-label .dx-label-after,
.ksa-login-input .dx-editor-outlined.dx-texteditor-with-floating-label.dx-state-focused.dx-invalid .dx-texteditor-label .dx-label-after{
    border-top-width: 2px;
    border-right-width: 2px;
    border-bottom-width: 2px;
}
.ksa-login-input .dx-editor-outlined.dx-texteditor-with-floating-label            .dx-texteditor-label .dx-label-after,
.ksa-login-input .dx-editor-outlined.dx-texteditor-with-floating-label.dx-invalid .dx-texteditor-label .dx-label-after {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

/* Границы поля ввода без фокуса при наведении курсора */
.ksa-login-input .dx-editor-outlined.dx-texteditor-with-floating-label.dx-state-hover .dx-texteditor-label .dx-label-before,
.ksa-login-input .dx-editor-outlined.dx-texteditor-with-floating-label.dx-state-hover .dx-texteditor-label .dx-label,
.ksa-login-input .dx-editor-outlined.dx-texteditor-with-floating-label.dx-state-hover .dx-texteditor-label .dx-label-after {
    border-color: rgba(93,129,252,.4);
}
.ksa-login-input .dx-editor-outlined.dx-texteditor-with-floating-label.dx-state-hover.dx-invalid .dx-texteditor-label .dx-label-before,
.ksa-login-input .dx-editor-outlined.dx-texteditor-with-floating-label.dx-state-hover.dx-invalid .dx-texteditor-label .dx-label,
.ksa-login-input .dx-editor-outlined.dx-texteditor-with-floating-label.dx-state-hover.dx-invalid .dx-texteditor-label .dx-label-after {
    border-color: rgba(217, 83, 79, .4);
}

/* Границы поля ввода в фокусе при наведении курсора */
.ksa-login-input .dx-editor-outlined.dx-texteditor-with-floating-label.dx-state-focused                .dx-label-before,
.ksa-login-input .dx-editor-outlined.dx-texteditor-with-floating-label.dx-state-focused                .dx-texteditor-label .dx-label,
.ksa-login-input .dx-editor-outlined.dx-texteditor-with-floating-label.dx-state-focused                .dx-label-after,
.ksa-login-input .dx-editor-outlined.dx-texteditor-with-floating-label.dx-state-focused.dx-state-hover .dx-label-before,
.ksa-login-input .dx-editor-outlined.dx-texteditor-with-floating-label.dx-state-focused.dx-state-hover .dx-texteditor-label .dx-label,
.ksa-login-input .dx-editor-outlined.dx-texteditor-with-floating-label.dx-state-focused.dx-state-hover .dx-label-after {
    border-color: #5d81fc;
}
.ksa-login-input .dx-editor-outlined.dx-texteditor-with-floating-label.dx-state-focused.dx-invalid                .dx-label-before,
.ksa-login-input .dx-editor-outlined.dx-texteditor-with-floating-label.dx-state-focused.dx-invalid                .dx-texteditor-label .dx-label,
.ksa-login-input .dx-editor-outlined.dx-texteditor-with-floating-label.dx-state-focused.dx-invalid                .dx-label-after,
.ksa-login-input .dx-editor-outlined.dx-texteditor-with-floating-label.dx-state-focused.dx-invalid.dx-state-hover .dx-label-before,
.ksa-login-input .dx-editor-outlined.dx-texteditor-with-floating-label.dx-state-focused.dx-invalid.dx-state-hover .dx-texteditor-label .dx-label,
.ksa-login-input .dx-editor-outlined.dx-texteditor-with-floating-label.dx-state-focused.dx-invalid.dx-state-hover .dx-label-after {
    border-color: #d9534f;
}

/* Метки поля ввода в фокусе при наведении курсора */
.ksa-login-input .dx-texteditor.dx-state-focused                .dx-texteditor-label,
.ksa-login-input .dx-texteditor.dx-state-focused.dx-state-hover .dx-texteditor-label {
    color: #5d81fc;
}
.ksa-login-input .dx-texteditor.dx-state-focused.dx-invalid                .dx-texteditor-label,
.ksa-login-input .dx-texteditor.dx-state-focused.dx-invalid.dx-state-hover .dx-texteditor-label {
    color: #d9534f;
}

/* Использование модифицированного шрифта для обеспечения одинакового отображения в разных браузерах. */
.ksa-login-input .dx-texteditor.ksa-password-editor input {
    font-family: "Open Sans Password", sans-serif;
}

/* Флажок */
.ksa-login-checkbox .dx-checkbox {
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 14px;
}
.ksa-login-checkbox .dx-checkbox .dx-checkbox-icon {
    border-width: 2px;
    color: #5d81fc;
    border-radius: 4px;
    height: 20px;
    width: 20px;
}
.ksa-login-checkbox .dx-checkbox.dx-state-hover .dx-checkbox-icon,
.ksa-login-checkbox .dx-checkbox.dx-state-focused .dx-checkbox-icon {
    border-color: #5d81fc;
}
.ksa-login-checkbox .dx-checkbox .dx-checkbox-text {
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #999999;
}

/* Группа настроек базы данных */
.ksa-login-dbms-group .dx-form-group-with-caption span.dx-form-group-caption {
    display: table;
    margin: 0 auto;
    padding: 10px 44px 0;
    border-top: 1px solid #ddd;
    cursor: pointer;
    font-family: "Open Sans", sans-serif;
    font-size: 13.4px;
    font-weight: 400;
    line-height: 20px;
    color: #999999;
    transition: color 0.4s;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.ksa-login-dbms-group.ksa-group-expanded .dx-form-group-with-caption span.dx-form-group-caption {
    color: #5d81fc;
}
.ksa-login-dbms-group .dx-form-group-with-caption span.dx-form-group-caption::after {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve"><polygon fill="%23999999" points="29,11 26,8 16,18 6,8 3,11 16,24"/></svg>');
    display: inline-block;
    margin-left: 8px;
    vertical-align: middle;
    width: 15px;
    height: 15px;
    transition: transform 0.8s linear,
                filter    0.4s step-end;
}
.ksa-login-dbms-group.ksa-group-expanded .dx-form-group-with-caption span.dx-form-group-caption::after {
    transform: rotate3d(1, 0, 0, 180deg);
    filter: brightness(0) saturate(100%) invert(45%) sepia(76%) saturate(1620%) hue-rotate(208deg) brightness(97%) contrast(104%); /* Цвет выделения: #5d81fc */
}
.ksa-login-dbms-group .dx-form-group-with-caption > .dx-form-group-content {
    border: none;
    padding: 0;
    overflow: hidden;
    transition: height 0.5s, opacity 0.3s;
    height: 0;
}
.ksa-login-dbms-group.ksa-group-collapsed .dx-form-group-with-caption > .dx-form-group-content {
    padding-top: 0;
    opacity: 0;
}

.ksa-login-button.ksa-login-button.ksa-login-button {
    padding-top: 23px;
}

.ksa-login-button.ksa-login-button.ksa-login-button.ksa-login-button-grey {
    padding-top: 16px;
    padding-bottom: 7px;
}

.ksa-login-button .dx-button-mode-contained {
    border-radius: 10px;
}

.ksa-login-button.ksa-login-button-grey .dx-button-mode-contained.dx-button-normal {
    border-color: #707070;
    color: #707070;
}

.ksa-login-button .dx-button-mode-contained.dx-button-normal {
    border-color: #5d81fc;
    color: #5d81fc;
}

.ksa-login-button .dx-button-mode-contained.dx-button-normal:hover {
    background-color: rgb(242, 245, 255);
}

.ksa-login-button.ksa-login-button-grey .dx-button-mode-contained.dx-button-default {
    background-color: #999999;
}

.ksa-login-button .dx-button-mode-contained.dx-button-normal.dx-state-focused {
    background-color: rgb(216, 225, 248);
}

.ksa-login-button .dx-button-mode-contained.dx-button-default {
    background-color: #5d81fc;
}

.ksa-login-button .dx-button-mode-contained.dx-button-default.dx-state-focused {
    color: rgb(242, 245, 255);
}

.ksa-login-button .dx-button-text {
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    font-weight: 600;
}

.dx-layout-manager .ksa-popup-button.dx-field-item:not(.dx-first-col) {
    padding-left: 5px;
}

.dx-layout-manager .ksa-popup-button.dx-field-item:not(.dx-last-col) {
    padding-right: 5px;
}

/* Панель ожидания */
.ksa-load-panel-container .dx-loadindicator {
    height: 125px;
    width: 125px;
}
.ksa-load-panel-container .dx-loadpanel-message {
    padding-top: 40px;
    font-family: "Open Sans", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 27px;
    color: rgba(19, 19, 19, 0.9);
}

/* Сообщение об ошибке */
.ksa-login-error-container {
    display: flex;
    flex-flow: column;
    padding: 28px;
    height: 100%;
    width: 100%;
}
.ksa-login-error-image-container {
    margin: 0 auto;
    height: 164px;
    width: 290px;
}
.ksa-login-error-container .ksa-login-error-image {
    display: block;
    margin: auto;
}
.ksa-login-error-container.ksa-login-error-auth    .ksa-login-error-image-connect,
.ksa-login-error-container.ksa-login-error-connect .ksa-login-error-image-auth {
    height: 0;
}
.ksa-login-error-container .ksa-login-error-image.ksa-login-error-image-auth .fill-base {
    fill: #131313;
}
.ksa-login-error-container .ksa-login-error-image.ksa-login-error-image-auth .fill-accent {
    fill: #5D81FC;
}
.ksa-login-error-container .ksa-login-error-image.ksa-login-error-image-auth .fill-accent-light {
    fill: #EEF2FF;
}
.ksa-login-error-container .ksa-login-error-image.ksa-login-error-image-connect .fill-base {
    fill: #263238;
}
.ksa-login-error-container .ksa-login-error-image.ksa-login-error-image-connect .fill-base-light {
    fill: #fafafa;
}
.ksa-login-error-container .ksa-login-error-image.ksa-login-error-image-connect .fill-accent {
    fill: #5D81FC;
}
.ksa-login-error-container .ksa-login-error-image.ksa-login-error-image-connect .fill-accent-light {
    fill: #EEF2FF;
}
.ksa-login-error-title {
    text-align: center;
    font-family: "Open Sans", sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 26px;
    line-height: 35px;
    color: rgba(19, 19, 19, 0.9);
}
.ksa-login-error-message,
.ksa-popup-text {
    text-align: center;
    font-family: "Open Sans", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 27px;
}

.ksa-popup-text {
    margin-bottom: 16px;
}

.ksa-login-error-button {
    align-self: flex-end;
    margin-top: auto;
    width: 100%;
}

.ksa-login-separator {
    display: flex;
    align-items: center;
    text-align: center;
    font-family: "Open Sans", sans-serif;
    color: #999999;
}
.ksa-login-separator::before,
.ksa-login-separator::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #ddd;
}
.ksa-login-separator:not(:empty)::before {
  margin-right: .25em;
}
.ksa-login-separator:not(:empty)::after {
  margin-left: .25em;
}

.dx-button-mode-text.ksa-password-view .dx-icon {
    background-size: 100% 100%;
    width: 26px;
    height: 26px;
}
.dx-button-mode-text.dx-state-active.ksa-password-view {
    background-color: transparent;
}