/* ===== СТОРІНКА ВХОДУ (logkey) ===== */
/* Дизайн: білий фон, форма по центру, navbar зверху */

body {
    padding-top: 0;
}

#custom-bootstrap-menu,
#submenu {
    display: none;
}

/* ===== КОНТЕНТ ФОРМИ ===== */
#content-container {
    max-width: 940px;
    margin: 0 auto;
    padding: 20px 20px 20px;
}

/* ===== ЗАГОЛОВКИ ФОРМИ ===== */
/* !important потрібен щоб перебити custom.css color: #22457B та text-shadow */
.text-dssu {
    font-family: 'e-Ukraine', sans-serif !important;
    font-size: 20px !important;
    font-weight: 500 !important;
    color: #000 !important;
    text-align: center !important;
    text-shadow: none !important;
    margin-top:16px;
    margin-bottom: 10px;
}

/* Скидання card-ефекту content-container на сторінці логіна */
#content-container.container,
.content-container {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    border-radius: 0 !important;
    background-color: #fff !important;
    background: #fff !important;
    padding-top: 0 !important;
}

/* ===== SELECT ЦСК ===== */
/*#CAsZone .col-lg-8,*/
/*#CAsZone .col-12 {*/
/*    padding-top: 40px;*/
/*}*/

#CAsServersSelect.form-control {
    height: 44px;
    border-radius: 4px;
    border: 1px solid #ccc;
    font-family: 'e-Ukraine', sans-serif;
    font-size: 16px;
    color: #1d1d1b;
    padding: 0 12px;
    background: #fff;
    outline: none;
}

#CAsServersSelect.form-control:focus {
    border-color: #013755;
    box-shadow: 0 0 0 2px rgba(1, 55, 85, 0.15);
}

/* ===== ВКЛАДКИ (TABS) ===== */
#idTypesKeys.nav-tabs {
    border-bottom: 1px solid #ccc;
    margin-top: 16px;
    margin-bottom: 0;
}

#idTypesKeys .nav-link {
    font-family: 'e-Ukraine', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #666;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 10px 20px;
    border-radius: 0;
    background: none;
    transition: color 0.2s, border-color 0.2s;
}

#idTypesKeys .nav-link:hover {
    color: #000;
    border-bottom-color: #ccc;
}

#idTypesKeys .nav-link.active {
    color: #000;
    font-weight: 500;
    border-bottom: 2px solid #000;
    background: none;
}

/* ===== ПОЛЯ ВВОДУ ===== */
.form-control.tp-logkey,
.form-control.tp-logkey-validation,
.form-control.check-control,
.form-control.km-types,
.form-control.km-devices {
    height: 44px;
    border-radius: 4px;
    border: 1px solid #ccc;
    font-family: 'e-Ukraine', sans-serif;
    font-size: 16px;
    color: #1d1d1b;
    padding: 0 12px;
    background: #fff;
    outline: none;
    width: 100%;
}

.form-control.tp-logkey:focus,
.form-control.tp-logkey-validation:focus,
.form-control.check-control:focus {
    border-color: #013755;
    box-shadow: 0 0 0 2px rgba(1, 55, 85, 0.15);
}

/* ===== FILE INPUT ===== */
.image-preview {
    display: flex;
    align-items: center;
    gap: 0;
}

.image-preview-filename {
    flex: 1;
    border-radius: 4px 0 0 4px !important;
    background: #f5f5f5;
}

.image-preview-input {
    border-radius: 0 4px 4px 0;
    background: #e8e8e8;
    border: 1px solid #ccc;
    border-left: none;
    padding: 8px 16px;
    cursor: pointer;
    font-family: 'e-Ukraine', sans-serif;
    font-size: 14px;
    color: #666;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 44px;
    transition: background 0.2s;
}

.image-preview-input:hover {
    background: #d8d8d8;
}

.image-preview-input input[type="file"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* ===== ПАРОЛЬ ===== */
.input-group {
    position: relative;
}

.password-eye,
.password-eye-verify,
.password-eye-verify-lite {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #999;
    font-size: 16px;
    z-index: 5;
    transition: color 0.2s;
}

.password-eye:hover,
.password-eye-verify:hover {
    color: #333;
}

/* ===== КНОПКИ-ПЕРЕМИКАЧІ (Реєстрація / Забули Пароль?) ===== */
#vertbtn {
    /*margin-top: 8px;*/
    border: 1px solid #ccc;
    border-radius: 4px;
    overflow: hidden;
}

#vertbtn .btn {
    flex: 1;
    font-family: 'e-Ukraine', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #1d1d1b;
    background: #fff;
    border: none;
    border-radius: 0;
    padding: 10px 8px;
    transition: background 0.2s, color 0.2s;
}

#vertbtn .btn:not(:last-child) {
    border-right: 1px solid #ccc;
    margin-right: 1px;
}

#vertbtn .btn:hover {
    background: #f5f5f5;
}

.text-dssu-clear {
    font-family: 'e-Ukraine', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #1d1d1b;
}

/* ===== КНОПКА ВІДКРИТИ (file input) та ПОКАЗ ПАРОЛЯ ===== */
button.btn-outline-secondary.tp-logkey,
button.btn-outline-secondary.tp-input-password {
    height: 44px;
    border: 1px solid #ccc;
    border-left: none;
    border-radius: 0 4px 4px 0;
    background: #e8e8e8;
    color: #666;
    font-family: 'e-Ukraine', sans-serif;
    font-size: 14px;
    padding: 0 16px;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

button.btn-outline-secondary.tp-logkey:hover,
button.btn-outline-secondary.tp-input-password:hover {
    background: #d8d8d8;
    color: #333;
    border-color: #ccc;
}

button.btn-outline-secondary.tp-logkey:focus,
button.btn-outline-secondary.tp-input-password:focus {
    box-shadow: none;
    outline: none;
}

/* ===== КНОПКА ВХОДУ ===== */
#logbtndiv {
    padding-top: 8px;
}

#logbtn {
    width: 100%;
    height: 44px;
    background: #DDEEFE !important;
    border: none !important;
    border-radius: 4px;
    font-family: 'e-Ukraine', sans-serif;
    font-size: 20px;
    font-weight: 500;
    color: #000 !important;
    cursor: pointer;
    transition: background 0.2s;
}

#logbtn:hover {
    background:#88A2BA !important; /
}

#logbtn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ===== ТЕЛЕФОН ===== */
#content-container h5 {
    font-family: 'e-Ukraine', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #1d1d1b;
    text-align: center;
}


/* ===== FOOTER ===== */
.footer {
    text-align: center;
    padding: 16px;
    font-family: 'e-Ukraine', sans-serif;
    font-size: 15px;
    color: #000;
}

.form-wrapper-phone {
    margin-top:10px;
}

.footer a {
    color: #000;
    text-decoration: none;
}

.footer a:hover {
    text-decoration: underline;
}

/* ===== STATUS / PROGRESS ===== */
#status {
    font-family: 'e-Ukraine', sans-serif;
    font-size: 14px;
    color: #666;
    min-height: 20px;
    display: block;
    text-align: center;
    margin-bottom: 8px;
}

#progress {
    width: 100%;
    margin-bottom: 8px;
}

/* ===== QR CODE BLOCK ===== */
#dimmerViewBlock {
    text-align: center;
    padding: 16px 0;
}

#dimmerViewMessageLabel,
#dimmerViewTimerLabel {
    font-family: 'e-Ukraine', sans-serif;
    font-size: 15px;
    color: #333;
}

/* ===== АДАПТИВНІСТЬ ===== */
@media (max-width: 768px) {
    #content-container {
        padding: 24px 16px 40px;
    }

    .text-dssu {
        font-size: 18px;
    }

    #logbtn {
        font-size: 18px;
    }

    #idTypesKeys .nav-link {
        font-size: 14px;
        padding: 8px 12px;
    }
}

@media (max-width: 375px) {
    .text-dssu {
        font-size: 16px;
    }

    #logbtn {
        font-size: 16px;
    }
}