.login-view-container {
    min-width: 100%;
    min-height: 100%;
    display: grid;
    place-items: center;
}

.login-card {
    position: relative;
    display: grid;
    place-items: center;
    grid-template-rows: 15% 70% 15%;
    background-color: white;
    width: clamp(14rem, 45%, 700px);
    max-height: 1000px;
    padding: clamp(.5rem, 2dvw, 3rem);
    border-radius: var(--myradius);
    box-shadow: var(--myshadow);
}

.login-card-header-title {
    color: var(--myprimary_dark);
    text-align: center;
}
.login-card-header-caption{
    color: var(--mysecondary_light);
    font: var(--myfont-size-sm) / var(--myfont-line-height-sm)  var(--main-font);
    letter-spacing: var(--myfont-letter-spacing-sm);
}

.loginform {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
}

form label {
    display: block;
    align-self: self-start;
    color: var(--mysecondary_light);
    opacity: 0.8;
    font-size: 0.9rem;
    line-height: 1.2;
    letter-spacing: 0.0412rem;
    padding-top: 0;
    margin-bottom: 0.5rem;
    font-family: var(--main-font);
}
.form-group {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    padding: 2dvh;
    margin-block: 1dvw;
}
.form-control {
    border: 1px solid rgba(176, 175, 175, 0.56);
    letter-spacing: 1px;
    height: 2.8rem;
    background-color: rgba(255, 255, 255);
    min-width: 130px;
    width: 100%;
    margin-bottom: 2.5dvh;
    font-size: 0.9rem;
    padding: 0.625rem 2.9rem;
    box-shadow: var(--myshadow);
    transition: all 0.3s ease-in-out;
    border-radius: var(--myradius);
    color: var(--mysecondary_dark);
}
.form-control:not(.invalid):focus {
    box-shadow: 5px 6px 8px rgba(0, 0, 0, 0.24), 0 0 4px 3px rgba(116, 203, 25, 0.40);
    border: 1px solid rgba(148, 212, 23, 0.41);
    color: var(--mysecondary_dark);
    transform: scale(0.99);
    background-color: rgba(243, 243, 243, 0.5);
}

.form-control:not(.invalid):hover {
    box-shadow: 4px 8px 10px rgba(0, 0, 0, 0.2), 0 0 4px 3px rgba(116, 203, 25, 0.40);
    border: 1px solid rgba(133, 190, 26, 0.18);
}


.error-box {
    display: flex;
    text-align: center;
    position: relative;
    bottom: 2.5dvh;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 3rem;
    color: #c21212;
    opacity: 0; /* начальная прозрачность установлена в 0 */
    font-size: clamp(1rem, 1.1vw, 10rem);
    transition: opacity 0.3s ease-in-out;
    animation: fade-in .3s forwards, fade-out 2s 2s forwards; /* добавлен fade-in */
}

@keyframes fade-in {
  from {opacity: 0;}
  to {opacity: 0.7;}
}
@keyframes fade-out {
  from {opacity: 0.7;}
  to {opacity: 0;}
}

.card-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    margin-block: .9dvw;
}
.valid {
    border-color: #28a745;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

#id_username::placeholder, #id_password::placeholder{
    opacity: 0.4;
}
#myButton {
    min-height: clamp(2.6rem, 3vw, 3.5rem);
}

.svg--container {
    position: relative;
    width: 100%;
    height: 100%;
}
.svg--phone::before {
    content: "";
    display: block;
    background-image: url('/static/img/svg/form_svg/phone.svg');
    background-size: contain;
    width: 1.7rem;
    height: 1.7rem;
    position: absolute;
    z-index: 1;
    left: 0.7rem;
    top: 0.5rem;
    transition: transform 0.3s ease-in-out, left 0.3s ease-in-out;
}
#svg-phone:focus-within .svg--phone::before {
    left: 1.1rem;
    transform: scale(.95);
}
.svg--password::before {
    content: "";
    display: block;
    background-image: url('/static/img/svg/form_svg/password.svg');
    background-size: contain;
    width: 1.7rem;
    height: 1.7rem;
    position: absolute;
    z-index: 1;
    left: 0.7rem;
    top: 0.5rem;
    transition: transform 0.3s ease-in-out, left 0.3s ease-in-out;
}
#svg-password:focus-within .svg--password::before {
    left: 1.1rem;
    transform: scale(.95);
}


  /*------------- Media Queries -------------*/
@media (max-width: 1200px) {
    .login-card {
        gap: 2.5rem;
        width: min(70%, 900px);
        padding: 1.5rem;
        min-width: 500px;
    }
}
@media (max-width: 768px) {
    .login-card {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: clamp(.1rem,  .4dvw, 1rem);
    }
}
@media (max-width: 576px) {
    .field-container{
        width: 100%;
    }
    .login-card {
        gap: clamp(.1rem,  .4dvw, 1rem);
        width: min(95%, 900px);
        padding: 1rem;
        min-width: 15rem;
    }
    .login-card-header-title {
        font-size: 2rem;
        letter-spacing: 0.01rem;
    }
    .login-card-header-caption {
        display: none;
    }
    .text-mysecondary_light {
        text-align: center;
    }
    .header,
    .my_footer {
        height: 2rem;
    }
}

@media (max-width: 360px) {
    .login-view-container {
        min-width: 100%;
    }
    main {
        min-width: 90%;
    }

  }