/* Fonts */
@font-face { font-family: merriweather; src: url(../fonts/MerriweatherRegular.ttf); }
@font-face { font-family: opensans; src: url(../fonts/OpenSans.ttf); }

/* Elements */
*, *::before, *::after { box-sizing: border-box; }
:active,:focus,:hover { outline:0;outline-offset:0; }
a { color: #00afef; text-decoration: none; }
a:hover { color: #00afef; text-decoration: underline; }
body { display: flex; flex-direction: column; margin: 0 auto; min-height: 100vh; }
body, html { color: #474747; font-family: opensans,sans-serif;  margin: 0; padding: 0; }
button { padding: 13px 10px; border: none; border-radius: 5px; cursor: pointer; width: 100%; opacity: 0.9; font-size: 1em; }
button:disabled { background-color: lightgray; }
button:hover:not(:disabled) { opacity: 1; }
h1, h2, h3, h4, h5, h6 { font-family: merriweather,serif; font-weight: normal; text-align: center; }
hr { background-color: #00afef; border: 0; height: 1px; margin: 0; padding: 0; }
input, select, textarea { border: 1px solid #00afef; font: 1em opensans,sans-serif; width: 100%; padding: 10px; }
table { border-collapse: collapse; }
table thead td { background-color: #00afef; color: #fff; padding: 10px 15px; text-align: left}
table td { padding: 5px 15px; }
table tr { border-bottom: 1px solid #d8d8d8; }

/* Base attributes */
.absolute { position: absolute; }
.align-center-x { text-align: center; }
.align-left-x { text-align: left; }
.align-right-x { text-align: right; }
.align-bottom-y { vertical-align: bottom; }
.align-center-y { margin: auto 0; vertical-align: middle; }
.align-top-y { vertical-align: top; }
.background-black { background-color: #000; }
.background-dark { background-color: rgba(0,0,0,0.5); }
.background-light { background-color: rgba(255,255,255,0.7); }
.background-white { background-color: #fff; }
.block { display: block; }
.bottom { bottom: 0; }
.color-black { color: #000; }
.color-white { color: #fff; }
.fixed { position: fixed; }
.font-bold { font-weight: bold; }
.font-normal { font-weight: normal; }
.grid-2 { display: grid; grid-template-columns: auto auto; }
.grid-4 { display: grid; grid-template-columns: auto auto auto auto; }
.hidden { display: none; }
.inline { display: inline-block; }
.left { left: 0; }
.relative { position: relative; }
.right { right: 0; }
.row { flex-direction: row; }
.shadow-big { box-shadow: 0 0 10px rgba(0,0,0,0.5); }
.shadow-small { box-shadow: -2px 2px 2px rgba(0,0,0,0.1); }
.top { top: 0; }
.uppercase { text-transform: uppercase; }
.width-100 { width: 100%; }

/* Common style */
.btn { background-color: #00afef; color: #fff; }
.button-link { background-color: #fff; color: #00afef; width: auto; padding: 0; opacity: 1; }
.button-link:hover { text-decoration: underline; }
.error p { color: #ae2e2e; }
.field { margin-bottom: 1em; }
.hint-question { color: #00afef; cursor: pointer; }
.input-iconed { position: relative; display: flex; align-items: stretch; width: 100%; }
.input-iconed .icon { background-color: #dbe5f1; border: 1px solid #00afef; border-right: 0; width: 38px; padding: 10px; }
.link { cursor: pointer; }
.negative { color: #f00; }
.popup { position: absolute;  left:5%; right:5%; color:#474747; border: 1px solid #d8d8d8; background-color: #fff; padding: 1em; z-index: 1; }
.side-left { float:left; margin-left: 20px; }
.success p { color: green; }

/* MY STYLES */
.btn.btn-primary {
    --bs-btn-bg: #00afef;
    --bs-btn-border-color: #00afef;
}
.header {
    padding: 20px 0;
}

.logo img {
    width: 60px;
    height: auto;
    margin-right: 15px;
}

.table {
    width: calc(100% * 2 / 3);
    display: flex;
    justify-content: center;
    align-items: center;

   
}

.table td {
    padding: 15px 15px;
}


.table table {
    width: 100%;
}

.label {
    text-align: left;
}

.footer {
    margin-top: auto;
}

/* CONDITION */


/*
.form {
    display: flex;
    flex-direction: column;
    gap: 30px;
    
}*/

.input-wrapper + h5 {
    margin-top: 15px;
}

.form button[type=submit] {
    align-self: center;
    width: 200px;
}


/*.radio-input span {
    flex-basis: 80%
}*/
    /*.form * {
    width: calc(100% - 60px);
}

.form button[type=submit] {*/
    /*    align-self: center;*/
    /*width: 200px;
}

.radio-input {
    display: flex;
    align-items: center
}

.radio-input input {
    flex: 0 1 20%;
}*/
    @media (max-width: 767px) {
    .table {
        width: calc(100% - 20px);
    }
}

/* Switch */
input:checked + .slider { background-color: #73eb20; }
input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); }
input:focus + .slider { box-shadow: 0 0 1px #73eb20; }
.switch { position: relative; display: inline-block; width: 60px; height: 34px; }
.switch input { display: none; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .2s; transition: .2s; }
.slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .2s; transition: .2s; }
.slider.round { border-radius: 34px; }
.slider.round:before { border-radius: 50%; }

/* Signon */
.signon { border: 1px solid #00afef; border-radius: 5px; max-width: 450px; margin: auto; padding: 2em; }
.signon header .title { font: 2em merriweather,serif; }
.signon .login .hint .icon { color: #00afef; font-size: 2em; margin-right: 0.4em; }
.signon .login .hint .text { font-size: 0.8em; }
.signon .login #old { margin-top: 2em; font-size: 0.8em; }
.signon .phone .code { background-color: #fff; }
.signon .register .agreement input { width: auto; margin-right: 0.7rem; }
.signon .register .sms input { margin-right: 1em; width: calc(100% - 88px); }
.signon .register .sms button { width: 50px; }
.signon .recovery .sms input { margin-right: 1em; width: calc(100% - 88px); }
.signon .recovery .sms button { width: 50px; }

/* Text footer */
.text-footer { position: fixed; width: 90%; left: 5%; bottom: 0; padding: 10px; }

/* Application header - единый стиль для всех страниц заявок */
.application-header {
    background-color: #f8f9fa;
    border: 1px solid #d8d8d8;
    border-radius: 5px;
    padding: 20px;
    margin-bottom: 30px;
}

.application-header > div {
    margin-bottom: 10px;
}

.application-header > div:last-child {
    margin-bottom: 0;
}

.application-header label {
    display: block;
    margin: 0;
    font-size: 1em;
}

.application-header .font-bold label {
    font-weight: bold;
    color: #00afef;
    font-size: 1.1em;
}

/* Навигационные ссылки - единый стиль */
.nav-links {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #d8d8d8;
}

.nav-links a {
    display: inline-block;
    margin-right: 20px;
    margin-bottom: 10px;
    padding: 8px 15px;
    background-color: #fff;
    border: 1px solid #00afef;
    border-radius: 5px;
    color: #00afef;
    text-decoration: none;
    transition: all 0.3s ease;
}

.nav-links a:hover {
    background-color: #00afef;
    color: #fff;
    text-decoration: none;
}

.nav-links a i {
    margin-right: 5px;
}

/* Формы - единый стиль */
.form-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    border: 1px solid #d8d8d8;
    border-radius: 5px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group .label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #474747;
}

/* Кнопки - единый стиль */
.btn-primary {
    background-color: #00afef;
    color: #fff;
    border: none;
    padding: 12px 30px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    transition: all 0.3s ease;
}

.btn-primary:hover:not(:disabled) {
    background-color: #0099d6;
    opacity: 1;
}

.btn-primary:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

/* Таблицы - единый стиль */
.table-container {
    margin: 20px 0;
    overflow-x: auto;
}

.table-container table {
    width: 100%;
    border-collapse: collapse;
}

.table-container table thead th {
    background-color: #00afef;
    color: #fff;
    padding: 12px 15px;
    text-align: left;
    font-weight: 500;
}

.table-container table tbody td {
    padding: 10px 15px;
    border-bottom: 1px solid #d8d8d8;
}

.table-container table tbody tr:hover {
    background-color: #f8f9fa;
}

/* Сообщения - единый стиль */
.info-message {
    background-color: #e7f3ff;
    border-left: 4px solid #00afef;
    padding: 15px;
    margin: 20px 0;
    border-radius: 5px;
}

.success-message {
    background-color: #d4edda;
    border-left: 4px solid #28a745;
    padding: 15px;
    margin: 20px 0;
    border-radius: 5px;
    color: #155724;
}

/* Радио-кнопки и чекбоксы - единый стиль */
.form-check {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

.form-check input[type="radio"],
.form-check input[type="checkbox"] {
    width: auto;
    margin-right: 10px;
    cursor: pointer;
}

.form-check-label {
    cursor: pointer;
    user-select: none;
}

/* Поля ввода - единый стиль */
input[type="text"],
input[type="password"],
input[type="email"],
select,
textarea {
    border: 1px solid #00afef;
    border-radius: 5px;
    padding: 10px;
    font-size: 1em;
    transition: border-color 0.3s ease;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: #0099d6;
    box-shadow: 0 0 5px rgba(0, 175, 239, 0.3);
}

/* Контейнер для кнопок действий */
.action-buttons {
    margin-top: 30px;
    text-align: center;
}

.action-buttons button {
    margin: 0 10px;
}

/* Стили для страниц состояния */
.status-page {
    text-align: center;
    padding: 40px 20px;
}

.status-page label {
    font-size: 1.2em;
    color: #474747;
    display: block;
    margin-bottom: 20px;
}

/* Улучшенные стили для главной страницы */
.main h2 {
    margin-bottom: 30px;
    color: #00afef;
}

/* Стили для страницы добавления заявки */
.add-form {
    max-width: 600px;
    margin: 0 auto;
}

/* Стили для страницы списка заявок */
.applications-list {
    margin-top: 30px;
}

.applications-list .table {
    width: 100%;
    margin: 0 auto;
}

.applications-list .add-link {
    display: inline-block;
    margin-bottom: 20px;
    padding: 12px 25px;
    background-color: #00afef;
    color: #fff;
    border-radius: 5px;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 1em;
    border: none;
}

.applications-list .add-link:hover {
    background-color: #0099d6;
    text-decoration: none;
    color: #fff;
    box-shadow: 0 2px 5px rgba(0, 175, 239, 0.3);
}

.applications-list .add-link i {
    margin-right: 8px;
}

/* Улучшенные стили для ошибок */
.error {
    margin: 15px 0;
    padding: 15px;
    background-color: #f8d7da;
    border-left: 4px solid #dc3545;
    border-radius: 5px;
}

.error p {
    color: #721c24;
    margin: 0;
    font-size: 1em;
}

/* Улучшенные стили для ссылок в формах */
.signon .links a {
    color: #00afef;
    text-decoration: none;
    transition: color 0.3s ease;
}

.signon .links a:hover {
    color: #0099d6;
    text-decoration: underline;
}