/* Modal pozadie */
        .modal {
            display: none;
            /* Skryté štandardne */
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0);
            /* Začneme s priehľadným pozadím */
            justify-content: center;
            align-items: center;
            opacity: 0;
            /* Nastavíme počiatočnú priehľadnosť na 0 */
            transition: opacity 0.5s ease;
            /* Prechod pre opacity */
        }

        /* Keď je modal viditeľný (pridáme triedu 'show') */
        .modal.show {
            display: flex;
            background-color: rgba(0, 0, 0, 0.5);
            /* Polopriesvitné pozadie */
            opacity: 1;
            /* Konečná hodnota opacity */
        }

        /* Obsah modálneho okna */
        .modal-content {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            width: 90%;
            /* Prispôsobenie pre mobilné zariadenia */
            max-width: 400px;
            /* Maximálna šírka pre väčšie obrazovky */
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            position: relative;
            text-align: center;
            transform: scale(0.8);
            /* Začneme s mierne zmenšeným obsahom */
            transition: transform 0.5s ease;
            /* Prechod pre transformáciu */
        }

        /* Keď je modal viditeľný */
        .modal.show .modal-content {
            transform: scale(1);
            /* Konečná veľkosť obsahu */
        }

        /* Zavrieť tlačidlo */
        .close-btn {
            position: absolute;
            top: 10px;
            right: 15px;
            font-size: 30px;
            font-weight: bold;
            cursor: pointer;
        }

        /* Formulár */
        #login-form {
            display: flex;
            flex-direction: column;
            align-items: stretch;
        }

        #login-form label {
            margin-top: 10px;
            text-align: left;
        }

        #login-form input,
        #login-form textarea {
            width: 100%;
            padding: 10px;
            margin-top: 5px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        #login-form textarea {
            resize: vertical;
        }

        #login-form .button-login {
            /* background-color: #264653; */
            color: white;
            padding: 10px;
            margin-top: 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            background-color: #1b5891;
        }

        #login-form .button-login:hover {
            background-color: #f5f5f5;
            color: #1b5891;
            /* font-weight: bold; */
            /* border: 1px #1b5891 solid; */
        }

        .button-social {
            /* background-color: #264653; */
            color: #1b5891;
            padding: 10px;
            margin-top: 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            border: 1px #1b5891 solid;
            
            background-color: #f5f5f5;
            width: 100%;
        }

        .button-social:hover {
            background-color: #f5f5f5;
            color: #1b5891;
            background-color: #f0f8ff;
            /* font-weight: bold; */
            /* border: 1px #1b5891 solid; */
        }

        .button-social img{
            /* background-color: #264653; */
            position: relative;
            left: -15px;
            width: 30px;
        }



        #login-email {
            position: relative;
            cursor: pointer;
        }

        .sending-text {
            display: inline-block;
            margin-left: 10px;
        }

        .sending-text span {
            display: inline-block;
            animation: bounce 0.6s infinite;
        }

        .sending-text span:nth-child(2) {
            animation-delay: 0.2s;
        }

        .sending-text span:nth-child(3) {
            animation-delay: 0.4s;
        }

        @keyframes bounce {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-5px);
            }
        }



        /* Blaznivy gradient */
        /* background: linear-gradient(90deg,  --- je otoceny vertikalne
             #dd101000 20%, - prvych 20% je hovno (ta farba je prisvitna) 
             #8d65c5 50%,  - od 20% po 50% je gradient s touto farbou
             #c71b1b00 50%) - od 50% je gradient ,, cize ostra hrana 
             right/400% 100%; -- efenkt animacie do prava .. cele to ma 400% a vyska je 100%*/ 
        .sending_email_text {
            /* width: fit-content; */
            font-weight: bold;
            /* font-family: monospace; */
            /* font-size: 30px; */
            background: linear-gradient(90deg, #dd101000 20%, #8d65c5 50%, #c71b1b00 50%) right/400% 100%;
            animation: sending_email_animation 7s infinite ease-out;
        }

        .sending_email_text::before {
            content: "Sending email ...";
            font-weight: bold;
            color: #0000;
            padding: 0 5px;
            background: inherit;
            background-image: linear-gradient(90deg, #fff 100%, #260ac2 0);
            -webkit-background-clip: text;
            background-clip: text;
        }

        @keyframes sending_email_animation {
            100% {
                background-position: left
            }
        }