﻿/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/*.card-compra-atividade {
    z-index:99 !important;
}
*/
/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

.btn-success {
    width: 100% !important;
    border-radius: 0px !important
}

.row {
    margin-left: 0px !important
}

#div-compra {
    padding: 40px;
    padding-bottom: 50px;
}

/*.card {
    margin-top: 20px;
    border-radius: 0px
}
*/
.tg {
    border-collapse: collapse;
    border-spacing: 0;
}

    .tg td {
        border-color: black;
        border-style: solid;
        border-width: 1px;
        font-family: Arial, sans-serif;
        font-size: 14px;
        overflow: hidden;
        padding: 10px 5px;
        word-break: normal;
    }

    .tg th {
        border-color: black;
        border-style: solid;
        border-width: 1px;
        font-family: Arial, sans-serif;
        font-size: 14px;
        font-weight: normal;
        overflow: hidden;
        padding: 10px 5px;
        word-break: normal;
    }

    .tg .tg-c3ow {
        border-color: inherit;
        text-align: center;
        vertical-align: top
    }


/*    -----------------------------------------*/


.modal-content {
    opacity: 1;
}

#nav-menu-principal {
    z-index: 10;
}

#mascara-banner {
    background: linear-gradient(to bottom,rgba(0,0,0,.7),rgba(0,0,0,.4));
}

#area-img-banner {
    background-size: cover;
    background-position: center;
}

.header-area-coordenacao {
    height: 400px;
}



#div-text-banner {
    z-index: 5;
    top: 60%;
}


.MsoNormal > * {
    font-family: Roboto, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
    font-size: 18px !important;
    line-height: 32px !important
}

input[type="radio"] {
    visibility: hidden;
}

    .radio-custom:checked + label {
        border: 4px dashed dodgerblue !important;
        border-radius: 0px !important
    }



@media(max-width: 922px) {
    .card-img-overlay {
        background: linear-gradient(to bottom,rgba(0,0,0,.7),rgba(0,0,0,.4));
    }


    #div-compra {
        border-left: none;
        border-top: 1px solid rgba(23, 18, 18, .2);
    }

    /*    #div-text-banner {
        top: 50%;
    }*/

    .header-area-coordenacao {
        height: 100%;
    }

    #area-img-banner {
        height: 100%;
    }
}



.cliente-select {
    margin-top: .5rem;
}

.cliente-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
    padding: .5rem .35rem;
    border-radius: 14px;
    border: 2px solid transparent;
    transition: all .2s ease;
    min-height: 122px;
    position: relative;
}

    .cliente-card:hover {
        background: #fff8e8;
    }

    .cliente-card input[type="radio"] {
        display: none;
    }

.cliente-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    padding: 3px;
    border: 3px solid #f4b400;
    transition: all .2s ease;
    background: #fff;
}

    .cliente-avatar img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
        display: block;
    }

.cliente-nome {
    margin-top: .45rem;
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.1;
    color: #1f2937;
}

.cliente-selecionado {
    margin-top: .2rem;
    font-size: .72rem;
    font-weight: 700;
    color: #198754;
    opacity: 0;
    transform: translateY(-4px);
    transition: all .2s ease;
}

.cliente-card input[type="radio"]:checked + .cliente-avatar {
    border-color: #198754;
    box-shadow: 0 0 0 4px rgba(25, 135, 84, 0.12);
}

.cliente-card input[type="radio"]:checked ~ .cliente-nome {
    color: #198754;
}

.cliente-card input[type="radio"]:checked ~ .cliente-selecionado {
    opacity: 1;
    transform: translateY(0);
}