/* <style> */

body {
    font-family: "Open Sans", sans-serif;
    font-size: 12px;
}

.a{
    color: yellow !important;
}


.disabled {
    pointer-events: none;
    opacity: 0.5;
}
.hidden {
    display: none;
}
#feedback{
    margin-top: 1.5em;
    width: 100%;
    height: 10em;
    color: var(--success);
}

.hi{
    color: var(--bs-danger) !important;
    font-weight: 900; 
}
#table-meeting {
    border-collapse: collapse;
    margin: 0;
    padding: 0;
    width: 100%;
    table-layout: fixed;
}

#table-meeting caption {
    font-size: 1.5em;
    margin: .5em 0 .75em;
}

#table-meeting tr {
    padding: .35em;
    margin: .35em;
}

#table-meeting th,
#table-meeting td {
    padding: 0.2em !important;
    /* font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif */
}


#table-meeting th {
    font-size: 1.5em;
    letter-spacing: .07em;
    text-transform: uppercase;
}
td, th {
    max-width: 30px !important;
    text-align: center;
}

.th_name{
    background-color: var(--bs-gray-900);
}

.th_val{
    background-color: var(--bs-gray-900);
    margin:0;
    padding:0;
}

.td_name, .td_email{
    background-color: var(--bs-gray-900);
    text-align: left;
    word-wrap: break-word;
    min-width: 10em;
    max-width: 10em;
}
.td_val{
    background-color: var(--bs-gray-900);
    color:var(--bs-gray-100);
}

.td_val::before{
    background-color: var(--bs-gray-900); /* Handy */
}

@media only screen and (max-width:700px){
    body{
        font-size:2em;
    }
    .th_name{
        background-color: var(--bs-gray-900);
    }

    .th_val{
        background-color: yellow;
    }
    .td_name, .td_email{
        background-color: var(--bs-gray-900); /* Handy */
    }

    .td_val{
        background-color: var(--bs-gray-900); /* Handy */
    }

    #table-meeting input{
        margin: 0 .8em 0 .8em; 
    }

    #table-meeting {
        border: var(--bs-gray-dark) solid 1px;
    }

    #table-meeting caption {
        font-size: 1.3em;
    }

    #table-meeting thead {
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }

    #table-meeting tr {
        display: block;
        margin-bottom: .2em;
    }

    #table-meeting td {
        display: block;
        font-size: .5em;
        text-align: right;
    }

    #table-meeting td::before {
        /*
            *aria-label has no advantage, it won't be read inside a table
            content: attr(aria-label);
        */
        content: attr(data-label);
        float: left;
        font-weight: bold;
        text-transform: uppercase;
        /* background-color: blue; */
        display: block;
        width: 7em;
        text-align: left;
        margin: 0 2em 0 0;
    }

    #table-meeting td:last-child {
        border-bottom: 0;
    }

    /* .button-label {
        padding: 0 1em 3px;
        margin: 0.1em;
    } */
}

/* .button-label {
    padding: 0 1em 3px;
    margin: 0.1em;
}

.button-label:hover{
    background: var(--bs-info);
    color: var(--bs-gray-100);
    box-shadow: 0 3px 10px  rgba(231, 231, 231, 0.2), 0 -2px 0 rgba(255, 255, 255, 0.22) inset;
} */

.radio-button label {
    display: inline-block;
    cursor: pointer;
    width: 1.5em;
    /* height: 2.5em; */
    text-align: center;
    margin: 0.2em 0.2em;
    font-size: 1.9em;
    border-radius: 5px;
}

.radio-button label:hover{
    background: var(--bs-info);
    color: var(--bs-gray-100);
    box-shadow: 0 3px 10px  rgba(231, 231, 231, 0.2), 0 -2px 0 rgba(255, 255, 255, 0.22) inset;
} */     
.span-btn{
    /* color:var(--bs-gray-300); */
    color: blue;
    font-size: 3em !important;
    margin:0 .1em 1em 0;
}

.radio-button input[type="radio"].no-button:checked+label {
    background-color:red;
}
.radio-button input[type="radio"].maybe-button:checked+label {
    background-color:yellow;
}
.radio-button input[type="radio"].yes-button:checked+label {
    background-color:green;
}



/* </style> */