@media only screen and (min-width: 1460px) {

    .error-border {
        outline: 2px solid red;
        outline-color: red;
        /*animation: blink-outline 1s infinite;*/
    }

    /*@keyframes blink-outline {
        0%, 100% { outline-color: red; }
        50% { outline-color: transparent; }
    }*/

    body {
        background-color: #17212b;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100vw;
        height: 100vh;
        position: relative;
        overflow: hidden;
    }

    #successBlock {
        position: absolute;
        z-index: 999999999;
        width: 0;
        height: 100%;
        background-color: #17212b;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden; 
        animation: expandWidth 0.5s forwards;
        transition: .2s ease-in-out;
    }

    @keyframes expandWidth {
        from { width: 0; }
        to { width: 100%; }
    }

    .block-select {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 600px;
        height: auto;
        background-color: #242f3d;
        flex-direction: column;
        border-radius: 10px;
        position: relative;
        padding: 80px 15px;
        gap: 15px;
    }

    .block-select h2 {
        position: absolute;
        top: 34px;
        right: 25px;
        font-family: "EM-Stem Regular", arial, sans-serif;
        color: #7177f8;
        font-size: 13.5px;
    }

    .logo-sel {
        position: static !important;
        width: auto !important;
        height: auto !important;
    }

    #successBlock button {
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        padding: 30px;
        gap: 15px;
        background-color: #17212b;
        border-radius: 8px;
        border: none;
        outline: none;
    }

    #successBlock button:hover {
        outline: 2px solid #7177f8;
        background-color: #17212b7e;
    }

    .bbtn {
        font-size: 24px;
        font-family: "EM-Stem Reguar", arial, sans-serif;
        color: #acacac;
    }

    .bbt {
        font-size: 13.5px;
        font-family: "EM-Stem Reguar", arial, sans-serif;
        color: #cacaca;
        line-height: 130%;
    }

    .modal-content {
        width: 375px;
        height: auto;
    }

    form {
        display: flex;
        flex-direction: column;
    }

    .modal-content h2 {
        font-family: "EM-Stem Bold", arial, sans-serif;
        color: white;
        margin-bottom: 24px;
    }

    label {
        color: #7f91a4;
        font-family: "EM-Stem Regular", arial, sans-serif;
        font-size: 13px;
        margin-bottom: 8px;
    }

    input {
        padding: 13px 16px;
        font-family: "EM-Stem Regular", arial, sans-serif;
        color: white;
        font-size: 13px;
        background-color: #17212b00;
        box-shadow: none;
        border: none;
        outline: 1px solid #2c3743;
        box-sizing: border-box;
        border-radius: 8px;
        width: 100%;
        transition: .2s ease-in-out;
    }

    svg {
        display: flex;
        align-items: center;
    }

    input:focus {
        outline: 2px solid #7177f8 !important;
        transition: .2s ease-in-out;
    }

    input:hover {
        outline: 1px solid #7177f8;
        transition: .2s ease-in-out;
    }

    .pass {
        margin-top: 24px;
        display: flex;
        position: relative;
    }

    .pass a {
        text-decoration: none;
        color: #7177f8;
        transition: .2s ease-in-out;
        position: absolute;
        right: 0;
        font-family: "EM-Stem Regular", arial, sans-serif;
        font-size: 13px;
    }

    .pass a:hover {
        color: #575ff5;
        transition: .2s ease-in-out;
    }

    .logain {
        margin-top: 24px;
        padding: 10px 20px;
        background-color: #7177f8;
        font-size: 13.5px;
        line-height: 150%;
        color: white;
        border-radius: 10px;
        border: none;
        font-family: "EM-Stem Regular", arial, sans-serif;
        transition: .2s ease-in-out;
        cursor: pointer;
    }

    .logain:hover {
        background-color: #454cee;
        transition: .2s ease-in-out
    }

    .and {
        display: inline-block;
        position: relative;
        padding: 0 8px;
        background: #17212b;
        z-index: 5;
        text-align: center;
        color: white;
        font-family: "EM-Stem Regular", arial, sans-serif;
        font-size: 13px;
    }

    .pijon::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        height: 1px;
        background: #2c3743;
        transform: translateY(-50%);
    }

    .pijon {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 24px 0;
    }

    .password-container {
        position: relative;
        display: inline-block;
    }
    
    .toggle-visibility {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        font-size: 20px;
        color: #7f91a4;
        transition: color 0.3s;
    }

    .toggle-visibility svg {
        color: #7f91a4;
    }

    .toggle-visibility svg:hover {
        color: white;
    }

    input[type="password"] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

    .noakk {
        font-family: "EM-Stem Regular", arial, sans-serif;
        font-size: 13px;
        color: #7f91a4;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 5px;
    }

    .noakk a {
        text-decoration: none;
        color: #7177f8;
        transition: .2s ease-in-out;
    }

    .noakk a:hover {
        color: #575ff5;
        transition: .2s ease-in-out;
    }

    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus {
        box-shadow: 0 0 0px 1000px #17212b inset !important;
        -webkit-text-fill-color: white !important;
        font-family: "EM-Stem Regular", arial, sans-serif;
    }

    .login-key {
        margin-bottom: 24px;
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }

    .happyand {
        padding: 10px 20px;
        background-color: #242f3d;
        font-size: 13.3px;
        line-height: 150%;
        color: white;
        border-radius: 10px;
        border: none;
        font-family: "EM-Stem Regular", arial, sans-serif;
        position: relative;
        cursor: pointer;
        overflow: hidden;
        display: flex;
        gap: 8px;
        align-items: center;
        width: calc(25% - 20px);
        justify-content: center;
    }

    .happyand:hover::after {
        content: "";
        width: 100vw;
        height: 100vh;
        background-color: rgba(255, 255, 255, 0.226);
        position: absolute;
        top: 0;
        left: 0;
    }

    .happyand-min {
        min-width: 120px !important;
    }

    .happyand-minmax {
        width: 100% !important;
    }

    .logo {
        position: absolute;
        left: 50px;
        top: 50px;
        font-size: 25px;
        font-family: "EM-Stem Regular", arial, sans-serif;
    }

    .logo-select {
        position: absolute !important;
        top: 25px !important;
        left: 25px !important;
    }

    .logo a {
        text-decoration: none;
        color: white;
        display: flex;
        align-items: center;
    }

    .logo span {
        margin-right: -3px;
    }

    .stepand {
        display: flex;
        width: 100%;
        height: auto;
        gap: 2px;
        padding: 2px;
        background-color: #242f3d;
        border-radius: 6px;
    }

    .st {
        width: 100%;
        height: 30px;
        padding: 4px;
        display: flex;
        align-items: center;
        text-align: center;
        justify-content: center;
        font-family: "EM-Stem Regular", arial, sans-serif;
        border-radius: 6px;
        color: #7f91a4;
        font-size: 13.5px;
        transition: .2s ease-in-out;
        background-color: rgba(255, 255, 255, 0.171);
        cursor: pointer;
        box-shadow: none;
        background: none;
        border: none;
    }

    .disable-nav {
        width: 100%;
    }

    .st:hover {
        color: white;
        transition: .2s ease-in-out;
        background-color: rgba(255, 255, 255, 0.082);
    }

    .st span {
        margin-top: -4px;
    }

    .act {
        background-color: #17212b;
        color: white;
    }

    .form {
        margin-top: 24px;
        position: relative;
    }

    .vspass {
        display: flex;
        flex-direction: column;
        position: absolute;
        left: 500px;
        top: 130px;
        height: 204px !important;
        width: 100%;
        align-items: center;
    }

    #visualizationSection {
        display: flex;
        flex-direction: column;
        position: fixed;
        align-items: center;
    }

    #visualizationSquares svg{
        margin-top: -25px;
        margin-left: auto;
        margin-right: auto;
    }

    #visualizationMessage {
        font-family: "EM-Stem Bold", arial, sans-serif;
    }

    #visualizationMessageON {
        font-family: "EM-Stem Bold", arial, sans-serif;
    }

    #visualizationMessageNAME {
        font-family: "EM-Stem Bold", arial, sans-serif;
        width: 400px;
        height: auto;
        color: #FF9800;
        background-color: #ffffff0d;
        padding: 15px;
        border-radius: 10px;
    }

    #visualizationMessageFAMILY {
        font-family: "EM-Stem Bold", arial, sans-serif;
        width: 400px;
        height: auto;
        color: #FF9800;
        background-color: #ffffff0d;
        padding: 15px;
        border-radius: 10px;
    }

    #visualizationMessagePAT {
        font-family: "EM-Stem Bold", arial, sans-serif;
        width: 400px;
        height: auto;
        color: #FF9800;
        background-color: #ffffff0d;
        padding: 15px;
        border-radius: 10px;
    }

    #email-error {
        font-family: "EM-Stem Bold", arial, sans-serif;
        width: 400px;
        height: auto;
        color: #FF9800;
        background-color: #ffffff0d;
        padding: 15px;
        border-radius: 10px;
    }

    .st:disabled {
        opacity: .6;
    }
    .logain:disabled {
        opacity: .8;
    }

    .disabled {
        width: 100%;
        height: auto;
    }

    .disabled button {
        width: 100%;
    }

    #disabled {
        pointer-events: none; 
        opacity: 0.5;
        cursor: not-allowed;
    }

    #disable-nav {
        pointer-events: none; 
        opacity: 0.5;
        cursor: not-allowed;
    }

    #disable-nav1 {
        pointer-events: none; 
        opacity: 0.5;
        cursor: not-allowed;
    }

    #inn-error {
        font-family: "EM-Stem Bold", arial, sans-serif;
        width: 400px;
        height: auto;
        color: #FF9800;
        background-color: #ffffff0d;
        padding: 15px;
        border-radius: 10px;
    }

    #tel-error {
        font-family: "EM-Stem Bold", arial, sans-serif;
        width: 400px;
        height: auto;
        color: #FF9800;
        background-color: #ffffff0d;
        padding: 15px;
        border-radius: 10px;
    }

    #login-err {
        font-family: "EM-Stem Bold", arial, sans-serif;
        width: 400px;
        height: auto;
        color: #FF9800;
        background-color: #ffffff0d;
        padding: 15px;
        border-radius: 10px;
    }

    .visu {
        display: flex;
        flex-direction: column;
        gap: 15px;
        margin-top: 15px;
    }

    .step1, .step2, .step3 {
        width: auto;
        height: auto;
        display: flex;
        flex-direction: column;
    }

    .enqluados::placeholder {
        font-family: "EM-Stem Reguar", arial, sans-serif;
        color: rgba(255, 255, 255, 0.219);
        font-size: 13px;
    }

    #message {
        position: absolute;
        right: 50px;
        bottom: 50px;
        background-color: #242f3d;
        padding: 30px;
        width: 0;
        display: flex;
        align-items: center;
        justify-self: center;
        text-align: center;
        font-family: "EM-Stem Reguar", arial, sans-serif;
        animation: expandWidths 0.5s forwards;
        display:none;
        max-height: 100px
    }

    @keyframes expandWidths {
        from { width: 0; }
        to { width: 450px; }
    }

    }

    .error {
        position: absolute;
        right: 50px;
        bottom: 50px;
        background-color: #242f3d;
        padding: 30px;
        width: 0;
        display: flex;
        align-items: center;
        justify-self: center;
        text-align: center;
        font-family: "EM-Stem Reguar", arial, sans-serif;
        animation: expandWidths 0.5s forwards;
        max-height: 100px;
        color: red;
    }

   .progress-bar {
        position: absolute;
    }