.radio-group,
.checkbox-group {
    display: flex;
    flex-direction: column;
    /* Egymás alá helyezi az elemeket */
}

.radio-item,
.checkbox-item {
    display: flex;
    align-items: center;
    /* Igazítja az inputot és a címkét egy sorba */

    margin-bottom: 1.1rem;
    /* Távolság a csoportok között */

}

input[type="radio"],
input[type="checkbox"] {
    margin: 0;
    /* Eltávolítja az alapértelmezett margót */
}

label {
    font-size: 16px;
    /* Alapértelmezett betűméret */
    color: #333;
    /* Sötétszürke szöveg */
    cursor: pointer;
    /* Mutatja, hogy kattintható */
}

.radio-group,
.checkbox-group {
    margin-bottom: 0;
    /* No extra spacing for the last element */
    margin-top: 0;
    /* Csökkenti a távolságot */
    padding: 0;

}


.radio-group label,
.checkbox-group label {
    font-size: 18px;
    /* Larger text size */
    color: #ffffff;
    /* White text */
    cursor: pointer;
    position: relative;
    padding-left: 40px;
    /* Space for custom icon */

    margin-bottom: 0;
    /* No extra spacing for the last element */
    margin-top: 0;
    /* Csökkenti a távolságot */

}

.radio-group input[type="radio"],
.checkbox-group input[type="checkbox"] {
    display: none;
    /* Hide default inputs */

}

.radio-group input[type="radio"],
.checkbox-group input[type="checkbox"] {
    display: none;
    /* Hide default inputs */
    margin: 0;
    /* Remove default margins */

    padding: 0.2rem;
    /* Optional: Add padding for better alignment */
}


.radio-group label::before,
.checkbox-group label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border: 2px solid #007bff;
    background-color: #ffffff;
    transition: background-color 0.3s, box-shadow 0.3s;
}

.radio-group label::before {
    border-radius: 50%;
    /* Circular shape for radio buttons */
}

.radio-group input[type="radio"]:checked+label,
.checkbox-group input[type="checkbox"]:checked+label {
    color: #007bff;
    /* Blue text when selected */
}

.radio-group input[type="radio"]:checked+label::before,
.checkbox-group input[type="checkbox"]:checked+label::before {
    background-color: #007bff;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.6);
}

/* Általános stílus a select elemekhez */
select {
    width: 100%;
    max-width: 400px;
    padding: 8px;
    /* Csökkentett belső margó */
    font-size: 14px;
    /* Kisebb betűméret */
    border: 2px solid #007bff;
    border-radius: 5px;
    background-color: #f9f9f9;
    color: #333;
    appearance: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-sizing: border-box;
    margin-top: 5px;;
    margin-bottom: 5px;
}


/* Hover állapot */
select:hover {
    border-color: #0056b3;
    background-color: #e6f0ff;
}

/* Disabled select stílus */
select:disabled {
    background-color: #e9ecef;
    color: #6c757d;
    border-color: #ced4da;
    cursor: not-allowed;
    margin-top: 5px;;
    margin-bottom: 5px;
}

/* Nyíl hozzáadása a select elemhez */
select::after {
    content: '▼';
    position: absolute;
    right: 10px;
    pointer-events: none;
}

/* Specifikus stílus a selectDisabled osztályhoz */
.selectDisabled {
    opacity: 0.7;
}

/* Specifikus stílus a select osztályhoz */
.select {
    font-weight: bold;
}

/* Távolság a két select között */
div {
    margin-bottom: 0;
    /* Kisebb távolság a select elemek között */
}


#html5div {
    margin-top: -5px; /* Nincs margin-top, ha h2 van felette */
}


input[type="button"],
#home {
    width: 100%;
    display: inline-block;
    font-size: 24px;
    font-weight: bold;
    color: #ffffff;
    background-color: #007bff;
    border: none;
    border-radius: 5px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    min-width: 200px;
    max-width: 400px;
    max-height: px;
    box-sizing: border-box;
    /* Padding figyelembevétele a szélességnél */
    margin-top: 5px;
    margin-bottom: 5px;
}

/* Hover állapot */
input[type="button"]:hover,
#home:hover {
    background-color: #0056b3;
    transform: scale(1.05);
}

/* Aktív állapot */
input[type="button"]:active,
#home:active {
    background-color: #003f7f;
    transform: scale(0.95);
}

/* Disabled állapot */
input[type="button"]:disabled,
#home:disabled {
    background-color: #cccccc;
    color: #666666;
    cursor: not-allowed;
    /* Alapértelmezett tiltott kurzor */
    transform: none;
    margin-top: 5px;;
    margin-bottom: 5px;

}

/* Disabled hover állapot */
input[type="button"]:disabled+hover,
#home:disabled+hover {
    background-color: #cccccc;
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24" fill="none" stroke="red" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="8" y1="8" x2="16" y2="16"/></svg>'), not-allowed;
    /* Piros áthúzott karika */
}

#divontheleft,
#popuptext {
    font-size: 20px;
    /* Nagyobb betűméret */
    color: #ff6666;
    /* Halvány piros szövegszín */
}

#multiplewindow,
#loadajax {
    font-size: 20px;
    /* Még nagyobb betűméret */
    font-weight: 600;
    /* Félkövér, de nem túl vastag */
    color: #007bff;
    /* Kék szín */
    text-decoration: none;
    /* Aláhúzás eltávolítása */
    transition: all 0.3s ease;
    /* Simább animáció */
}

#multiplewindow:hover,
#loadajax:hover {
    color: #e3dbd6;
    /* Narancssárga szín hover állapotban */
    text-shadow: 0 0 8px #ff6600;
    /* Fénylő effekt */
    transform: scale(1.1);
    /* Kicsit nagyobb méret hover állapotban */
}

#ajaxdiv {
    background-color: #6d5353;
    /* Fehér háttér */
    border: 1px solid #b19696;
    /* Szürke keret */
    border-radius: 8px;
    /* Lekerekített sarkok */
    padding: 16px;
    /* Belső margó */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* Finom árnyék */
    max-width: 400px;
    /* Középre igazítás */
    min-height: 200px;
    /* Minimális magasság */
    margin: 0 auto;
    /* Középre igazítás vízszintesen */
    width: 100%;
    margin-bottom: 15px;
}

#ajaxdiv p {
    font-size: 20px;
    */
}
#storeinput2,
#storeinput3 {
    margin-bottom: -6px;
    margin-top: -11px;
}
#ajax_button,
#ajaxbutton{
    margin-bottom: 0px;
    margin-top: 0px;
}

#second_ajax_button {
    margin-top: 0px;
    
}




@media (max-width: 768px) {

    .btn {
        font-size: 14px;
        /* Match font size */
        padding: 8px 16px;
        /* Match padding */
        background-color: #007bff;
        /* Match background color */
        color: #fff;
        /* Match text color */
        border: none;
        /* Match border style */
        border-radius: 4px;
        /* Match border radius */
        text-align: center;
        /* Center-align text */
        display: inline-block;
        /* Ensure button-like behavior */
        cursor: pointer;
        /* Match cursor style */
        transition: background-color 0.3s ease;
        /* Match hover effect */
    }

    .btn:hover {
        background-color: #0056b3;
        /* Match hover background color */
    }

    .radio-item label,
    .checkbox-item label {
        font-size: 12px;
        /* Smaller labels */
    }

    select,
    input[type="text"],
    input[type="number"] {
        font-size: 12px;
        min-width: 280px;
        /* Smaller input text */
        padding: 5px;
        /* Adjust input padding */
    }

    input[type="text"],
    input[type="number"] {
        margin-top: 5px;;
        margin-bottom: 5px;
    }

    .hero-title-about {
        font-size: 19px;
        /* Adjust hero section title */
    }

    .container-grid {
        grid-template-columns: 1fr;
        /* Single column layout */
    }

    .ajaxbuttonClass,
    .verifybutton {
        font-size: 12px;
        /* Smaller button text */
        padding: 6px;
        /* Adjust button padding */
    }

    .multiplewindow,
    .multiplewindow2 {
        font-size: 10px;
        /* Smaller popup link text */
    }

    .textboxes {
        margin: 5px 0;
        /* Adjust textbox spacing */
        min-width: 280px;;
    }

    .home-button {
        font-size: 14px;
        /* Csökkentett szövegméret */
        padding: 8px 16px;
        /* Csökkentett gomb padding */
    }

    .radio-item label,
    .checkbox-item label {
        font-size: 11px;
        /* Kisebb szövegméret a rádiógombok és jelölőnégyzetek szövegéhez */
        line-height: 1.4;
        /* Jobb szövegköz */
    }

    input[type="button"],
    #home {
        margin-bottom: 0px;
        /* Csökkentsd a gomb alatti margót */
        font-size: 12px !important;
        /* Force smaller font size */
        padding: 10px 10px !important;
        /* Force reduced padding */
        max-width: 150px !important;
        /* Force smaller maximum width */
        background-color: #007bff !important;
        /* Keep background color */
        color: #fff !important;
        /* Keep text color */
        border: none !important;
        /* Keep border style */
        border-radius: 4px !important;
        /* Keep border radius */
        text-align: center !important;
        /* Center-align text */
        display: inline-block !important;
        /* Ensure button-like behavior */
        cursor: pointer !important;
        /* Keep cursor style */
        transition: background-color 0.3s ease !important;
        /* Keep hover effect */

    }

    input[type="button"]:hover,
    #home {
        background-color: #0056b3 !important;
        /* Keep hover background color */
    }

    input[type="radio"] {
        transform: scale(0.8);
        /* Optional: Scale down the radio button itself */
    }


    .resources h2 {
        font-size: 16px;
    }

    .resources label,
    .resources input,
    .resources select,
    .resources div {
        font-size: 14px;
        /* Csökkentett méret az összes szöveghez és elemekhez */
    }

    .resources .card-content {
        display: flex;
        /* Flexbox használata */
        flex-direction: column;
        /* Elemek egymás alá rendezése */
        align-items: flex-start;
        /* Balra igazítás */
    }

    .resources .radio-item label,
    .resources .checkbox-item label {
        margin-bottom: 0;
        /* Kis távolság a címke és az input között */
        margin-left: 20px;
        /* Csökkentsd a címke bal oldali margóját */

        display: inline-block;
        /* Biztosítja, hogy a margó érvényesüljön */
        font-size: 16px;
    }

    .resources .textboxes input,
    .resources .textbox-area {
        font-size: 14px;
        /* Csökkentett méret a szövegmezőkhöz */
    }

    .resources .radio-group,
    .resources .checkbox-group {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 5px;
        width: 100%;
    }

    .radio-item,
    .checkbox-item {
        display: flex;
        /* Flexbox az elemekhez */
        align-items: center;
        /* Igazítás középre függőlegesen */
        gap: 2px;
        /* Csökkentsd a távolságot az input és a címke között */

    }

    .resources .card {
        margin-bottom: 0;
        margin-top: 10px;
        /* Távolítsd el az alsó margót */
        padding-top: 10px;
        /* Állítsd be az alsó paddingot a felsővel megegyezőre */
    }


    .centerdiv {
        margin-top: 10px;
        /* Ha szükséges, eltávolíthatod a felesleges margót */
    }


    #multiplewindow,
    #loadajax,
    #divontheleft,
    #popuptext {
        font-size: 14px;
        /* Még nagyobb betűméret */
        padding-bottom: 5px;
        /* Állítsd be az alsó paddingot a felsővel megegyezőre */
    }

    #ajaxdiv p {
        font-size: 14px;
        */
    }

    #ajaxdiv {
        margin-bottom: 12px;
    }
    #storeinput {
        margin-top: -5px;
        
    }
    #ajaxcontentID,
    #ajax_button {
        margin-top: 10px;
    }

    #selecttype
{
        margin-top: 0px;
    }

    #textbox {
        margin-top: -5px;
    }

    
}