@media (max-width: 768px) {
    body {
        height: 100dvh;
    }

    @media (max-width: 768px) {
        .main-container {
            gap: 20px !important;
        }

        .form-section {
            display: flex;
            gap: 15px
        }

        .login-box {
            height: 100%;
            max-width: 100%;
        }
    }
    @media (min-width: 1100px) {
        .login-box {

            max-width: 100%;
        }
    }
}

.input-with-icon {
    position: relative;
}

.input-icon-left {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    font-size: 1.2rem;
    color: #6c757d;
}

.input-with-icon input {
    padding-left: calc(58px + 7px) !important;
}

.form-floating > label {
    padding-left: calc(58px + 7px) !important;
/
}


.btn-linking i,
.btn-linking img {
    font-size: 1.3rem;
    height: 1.3rem;
    width: 1.3rem;
}


.btn-linking .me-2 {
    margin-right: 0.75rem !important;
}


.btn-linking img {
    object-fit: contain;
    margin-right: 0.75rem;
}

.form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label, .form-floating > .form-control-plaintext ~ label, .form-floating > .form-select ~ label {
    opacity: 0.65;
    transform: scale(0.85) translateY(-0.5rem) translateX(0.75rem) !important;
}

.divider-right {
    position: absolute;
    top: 25%;
    right: 3rem; /* před eye buttonem */
    width: 1px;
    height: 50%;
    background-color: #dee2e6;
}

.link-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    transition: background 0.2s;
}

.link-row:hover {
    background-color: #f8f9fa;
}

.link-icon-left {
    margin-right: 0.75rem;
    font-size: 1.2rem;
    color: #0d6efd;
}

.link-icon-right {
    margin-left: auto;
    font-size: 1.3rem;
    color: #0d6efd;
}

.input-with-icon .icon-box {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 58px; /* šířka boxu */
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #dee2e6; /* jen pravý border */
    background: #f8f9fa; /* světle šedé pozadí pro efekt */
    border-radius: .375rem 0 0 .375rem; /* zaoblení vlevo, aby ladilo s inputem */
    z-index: 5;
}

.input-with-icon .icon-box i {
    font-size: 1.3rem; /* větší ikona */
    color: #495057;
}

.btn-linking {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: 1rem 20px;
}

.btn-linking span {
    display: flex;
    align-items: center;
    gap: .5rem;
    line-height: 1; /* aby text nelítal výš než ikony */
}

.btn-linking i,
.btn-linking img {
    font-size: 1.3rem;
    height: 1.3rem;
    width: 1.3rem;
    object-fit: contain;
}
.btn-linking i {
    display: flex;           /* ikona se chová jako flex box */
    align-items: center;     /* vertikální zarovnání */
    justify-content: center; /* horizontálně vycentrovaná */
    font-size: 1.4rem;       /* můžeš si doladit velikost */
    line-height: 1;          /* odstraní baseline odsazení */
}