/* ============================================================
   AGENDAMENTO DE CONTÊINER - PADRÃO TMDL VERDE
   Aplicar no final do Content/Site.css
   ============================================================ */

:root {
    --tmdl-green: #213323;
    --tmdl-green-dark: #18271a;
    --tmdl-green-medium: #314d34;
    --tmdl-green-light: #e8eee9;
    --tmdl-green-soft: #f4f7f4;
    --tmdl-gold: #c5a253;
    --tmdl-border: #cbd3cc;
    --tmdl-border-dark: #aeb9af;
    --tmdl-text: #333333;
    --tmdl-muted: #667067;
    --tmdl-white: #ffffff;
}


/* ============================================================
   PÁGINA
   ============================================================ */

.tmdl-page {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    padding: 10px 12px 18px 12px;
    color: var(--tmdl-text);
}


    /* ============================================================
   CABEÇALHO SUPERIOR
   ============================================================ */

    .tmdl-page .tmdl-page-header {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        box-sizing: border-box;
        margin-bottom: 10px;
        padding: 10px 14px;
        background: var(--tmdl-white);
        border: 1px solid var(--tmdl-border);
        border-left: 5px solid var(--tmdl-gold);
        border-radius: 5px;
    }

    .tmdl-page .tmdl-page-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 58px;
        height: 38px;
        padding: 0 8px;
        border-radius: 4px;
        background: var(--tmdl-green);
        color: #ffffff;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .4px;
    }

    .tmdl-page .tmdl-page-title {
        min-width: 0;
    }

        .tmdl-page .tmdl-page-title h1 {
            margin: 0;
            padding: 0;
            color: var(--tmdl-green) !important;
            font-size: 19px !important;
            font-weight: 700 !important;
            line-height: 1.15 !important;
        }

        .tmdl-page .tmdl-page-title p {
            margin: 3px 0 0 0;
            padding: 0;
            color: var(--tmdl-muted);
            font-size: 12px;
        }


    /* ============================================================
   CARD DA CONSULTA
   ============================================================ */

    .tmdl-page .tmdl-search-card {
        width: 100%;
        box-sizing: border-box;
        margin-bottom: 10px;
        background: var(--tmdl-white);
        border: 1px solid var(--tmdl-border);
        border-radius: 5px;
        overflow: hidden;
    }

    .tmdl-page .tmdl-card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: 42px;
        padding: 7px 12px;
        background: var(--tmdl-green);
        border-left: 5px solid var(--tmdl-gold);
        color: #ffffff;
    }

    .tmdl-page .tmdl-card-title {
        color: #ffffff;
        font-size: 14px;
        font-weight: 700;
    }

    .tmdl-page .tmdl-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 6px;
    }

    .tmdl-page .tmdl-search-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(220px, 1fr));
        gap: 10px;
        padding: 11px 12px;
    }


    /* ============================================================
   BOTÕES
   ============================================================ */

    .tmdl-page .Botao,
    .tmdl-page input[type="submit"].Botao,
    .tmdl-page input[type="button"].Botao {
        min-height: 31px;
        box-sizing: border-box;
        padding: 5px 14px !important;
        border: 1px solid var(--tmdl-green-dark) !important;
        border-radius: 4px !important;
        background: var(--tmdl-green) !important;
        color: #ffffff !important;
        font-family: inherit;
        font-size: 12px !important;
        font-weight: 600 !important;
        cursor: pointer;
    }

        .tmdl-page .Botao:hover,
        .tmdl-page input[type="submit"].Botao:hover,
        .tmdl-page input[type="button"].Botao:hover {
            background: var(--tmdl-green-medium) !important;
        }

        .tmdl-page .Botao:disabled,
        .tmdl-page input[type="submit"].Botao:disabled,
        .tmdl-page input[type="button"].Botao:disabled {
            background: #e5e8e5 !important;
            border-color: #c7cdc8 !important;
            color: #8a928b !important;
            cursor: default;
        }


    /* ============================================================
   ACCORDION PRINCIPAL
   ============================================================ */

    .tmdl-page .tmdl-accordion {
        width: 100%;
        box-sizing: border-box;
    }

        .tmdl-page .tmdl-accordion > .tmdl-section-title,
        .tmdl-page .tmdl-accordion > h3.ui-accordion-header {
            display: flex !important;
            align-items: center !important;
            gap: 7px !important;
            min-height: 42px !important;
            box-sizing: border-box !important;
            margin: 0 0 6px 0 !important;
            padding: 9px 14px !important;
            background: var(--tmdl-green) !important;
            background-image: none !important;
            border: 1px solid var(--tmdl-green-dark) !important;
            border-left: 5px solid var(--tmdl-gold) !important;
            border-radius: 4px !important;
            color: #ffffff !important;
            font-family: inherit !important;
            font-size: 15px !important;
            font-weight: 600 !important;
            line-height: 1.2 !important;
            cursor: pointer !important;
        }

        .tmdl-page .tmdl-accordion > h3.ui-state-active {
            background: var(--tmdl-green-dark) !important;
        }

    .tmdl-page .tmdl-section-number {
        color: #e5ca80 !important;
        font-weight: 700 !important;
    }

    .tmdl-page .tmdl-accordion > .ui-accordion-content,
    .tmdl-page .tmdl-step-body {
        box-sizing: border-box !important;
        width: 100% !important;
        margin: -2px 0 8px 0 !important;
        padding: 12px !important;
        border: 1px solid var(--tmdl-border) !important;
        border-top: 0 !important;
        border-radius: 0 0 5px 5px !important;
        background: #ffffff !important;
        overflow: visible !important;
    }


    /* ============================================================
   GRUPOS INTERNOS
   ============================================================ */

    .tmdl-page .tmdl-form-group {
        width: 100%;
        box-sizing: border-box;
        margin-bottom: 11px;
        border: 1px solid var(--tmdl-border);
        border-radius: 5px;
        background: #ffffff;
        overflow: hidden;
    }

        .tmdl-page .tmdl-form-group:last-child {
            margin-bottom: 0;
        }

    .tmdl-page .tmdl-form-group-inner {
        margin-bottom: 9px;
    }

    .tmdl-page .tmdl-group-title {
        box-sizing: border-box;
        width: 100%;
        padding: 7px 10px;
        background: var(--tmdl-green-soft);
        border-left: 4px solid var(--tmdl-gold);
        border-bottom: 1px solid #dde4de;
        color: var(--tmdl-green);
        font-size: 12px;
        font-weight: 700;
    }


    /* ============================================================
   CAMPOS - TÍTULO EM CIMA / CAMPO EMBAIXO
   ============================================================ */

    .tmdl-page .tmdl-field {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .tmdl-page .tmdl-label,
    .tmdl-page .tmdl-search-label,
    .tmdl-page .tmdl-cntr-label {
        display: block;
        margin-bottom: 4px;
        color: #354037;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.2;
    }


    /* ============================================================
   INPUTS / COMBOS
   ============================================================ */

    .tmdl-page .tmdl-field input[type="text"],
    .tmdl-page .tmdl-field input[type="file"],
    .tmdl-page .tmdl-field select,
    .tmdl-page .tmdl-search-grid input[type="text"],
    .tmdl-page .tmdl-search-grid select {
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        height: 32px;
        padding: 5px 8px;
        border: 1px solid var(--tmdl-border-dark) !important;
        border-radius: 4px !important;
        background: #ffffff;
        color: var(--tmdl-text);
        font-family: inherit;
        font-size: 13px;
        outline: none;
    }

        .tmdl-page .tmdl-field input[type="text"]:focus,
        .tmdl-page .tmdl-field input[type="file"]:focus,
        .tmdl-page .tmdl-field select:focus,
        .tmdl-page .tmdl-search-grid input[type="text"]:focus,
        .tmdl-page .tmdl-search-grid select:focus {
            border-color: var(--tmdl-green) !important;
            box-shadow: 0 0 0 2px rgba(33, 51, 35, .10);
        }


        /* CAMPOS DESABILITADOS */

        .tmdl-page .tmdl-field input[disabled],
        .tmdl-page .tmdl-field select[disabled] {
            background: #f2f4f2 !important;
            border-color: #b9c1ba !important;
            color: #444444 !important;
            opacity: 1 !important;
            -webkit-text-fill-color: #444444 !important;
        }


    /* ============================================================
   CAMPOS DE SOMENTE LEITURA / LABELS
   ============================================================ */

    .tmdl-page .tmdl-static-value {
        display: flex;
        align-items: center;
        width: 100%;
        min-height: 32px;
        box-sizing: border-box;
        padding: 5px 8px;
        border: 1px solid var(--tmdl-border-dark);
        border-radius: 4px;
        background: #f7f9f7;
        color: #333333;
        font-size: 13px;
        line-height: 20px;
        overflow-wrap: anywhere;
    }


    /* ============================================================
   INFORMAÇÕES DA RESERVA
   ============================================================ */

    .tmdl-page .tmdl-info-grid {
        display: grid;
        gap: 10px;
        box-sizing: border-box;
        width: 100%;
        padding: 10px;
    }

    .tmdl-page .tmdl-info-grid-reserva {
        grid-template-columns: minmax(220px, 1.6fr) minmax(130px, .8fr) minmax(220px, 1.6fr) minmax(150px, .9fr);
    }

    .tmdl-page .tmdl-info-grid-carga {
        grid-template-columns: repeat(4, minmax(140px, 1fr));
    }


    /* ============================================================
   MOTORISTA / VEÍCULO
   ============================================================ */

    .tmdl-page .tmdl-driver-grid {
        display: grid;
        grid-template-columns: minmax(300px, 2fr) minmax(140px, .8fr) minmax(260px, 1.5fr) minmax(140px, .8fr);
        gap: 10px;
        box-sizing: border-box;
        width: 100%;
        padding: 10px;
    }


    /* ============================================================
   CONTÊINER
   ============================================================ */

    .tmdl-page .tmdl-cntr-secoes {
        width: 100%;
    }

    .tmdl-page .tmdl-subaccordion {
        width: 100%;
        box-sizing: border-box;
        margin-bottom: 8px;
        border: 1px solid var(--tmdl-border);
        border-radius: 5px;
        background: #ffffff;
        overflow: hidden;
    }

        .tmdl-page .tmdl-subaccordion:last-child {
            margin-bottom: 0;
        }

        .tmdl-page .tmdl-subaccordion > summary {
            position: relative;
            display: flex;
            align-items: center;
            min-height: 38px;
            box-sizing: border-box;
            padding: 8px 36px 8px 12px;
            background: var(--tmdl-green-soft);
            border-left: 4px solid var(--tmdl-gold);
            color: var(--tmdl-green);
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
            list-style: none;
            outline: none;
        }

            .tmdl-page .tmdl-subaccordion > summary::-webkit-details-marker {
                display: none;
            }

            .tmdl-page .tmdl-subaccordion > summary::after {
                content: "+";
                position: absolute;
                right: 13px;
                top: 50%;
                transform: translateY(-50%);
                color: var(--tmdl-green);
                font-size: 20px;
                font-weight: 600;
            }

        .tmdl-page .tmdl-subaccordion[open] > summary::after {
            content: "−";
        }

        .tmdl-page .tmdl-subaccordion[open] > summary {
            background: var(--tmdl-green-light);
        }

    .tmdl-page .tmdl-subaccordion-body {
        box-sizing: border-box;
        width: 100%;
        padding: 10px;
    }

    .tmdl-page .tmdl-cntr-grid {
        display: grid;
        grid-template-columns: minmax(180px, 1.4fr) minmax(90px, .65fr) minmax(90px, .65fr) minmax(120px, .8fr) minmax(100px, .7fr) minmax(125px, .85fr);
        gap: 10px;
        width: 100%;
        align-items: end;
    }

    .tmdl-page .tmdl-cntr-grid-small {
        display: grid;
        grid-template-columns: repeat(4, minmax(100px, 1fr));
        gap: 10px;
        box-sizing: border-box;
        width: 100%;
        padding: 10px;
    }

    .tmdl-page .tmdl-lacres-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(125px, 1fr));
        gap: 10px;
        width: 100%;
    }


    /* ============================================================
   NOTAS FISCAIS
   ============================================================ */

    .tmdl-page .tmdl-message-area {
        display: flex;
        flex-direction: column;
        gap: 5px;
        box-sizing: border-box;
        width: 100%;
        margin-bottom: 10px;
        padding: 8px 10px;
        background: #f8faf8;
        border: 1px solid var(--tmdl-border);
        border-left: 4px solid var(--tmdl-gold);
        border-radius: 4px;
        font-size: 12px;
    }

    .tmdl-page .tmdl-nf-upload-row {
        box-sizing: border-box;
        width: 100%;
        padding: 10px 10px 0 10px;
    }

    .tmdl-page .tmdl-upload-line {
        display: flex;
        align-items: center;
        gap: 7px;
        width: 100%;
    }

        .tmdl-page .tmdl-upload-line input[type="file"] {
            flex: 1 1 auto;
            width: auto;
        }

    .tmdl-page .tmdl-nf-grid {
        display: grid;
        grid-template-columns: minmax(140px, 1fr) minmax(90px, .55fr) minmax(220px, 1.5fr) minmax(130px, .8fr);
        gap: 10px;
        box-sizing: border-box;
        width: 100%;
        padding: 10px;
    }

    .tmdl-page .tmdl-nf-danfe {
        grid-column: 1 / -1;
    }

    .tmdl-page .tmdl-nf-emissor {
        grid-column: span 2;
    }

    .tmdl-page .tmdl-nf-actions {
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 6px;
        grid-column: 1 / -1;
        padding-top: 2px;
    }


    /* ============================================================
   GRIDS
   ============================================================ */

    .tmdl-page .tmdl-grid-wrapper {
        width: 100%;
        box-sizing: border-box;
        padding: 0 10px 10px 10px;
        overflow-x: auto;
    }

    .tmdl-page .tmdl-grid {
        width: 100% !important;
        border-collapse: collapse !important;
        border: 1px solid var(--tmdl-border) !important;
        background: #ffffff;
    }

        .tmdl-page .tmdl-grid th {
            padding: 7px 6px !important;
            background: var(--tmdl-green) !important;
            border: 1px solid #405543 !important;
            color: #ffffff !important;
            font-size: 11px !important;
            font-weight: 700 !important;
            white-space: nowrap;
        }

        .tmdl-page .tmdl-grid td {
            padding: 6px !important;
            border: 1px solid #dce2dd !important;
            color: #333333 !important;
            font-size: 11px !important;
        }

        .tmdl-page .tmdl-grid tr:nth-child(even) td {
            background: #fafcfa !important;
        }


    /* ============================================================
   ALERTA
   ============================================================ */

    .tmdl-page #pnlAlertaCTE {
        box-sizing: border-box;
        width: 100%;
        margin-top: 10px;
        padding: 10px 12px;
        border: 1px solid #d9c681;
        border-left: 5px solid var(--tmdl-gold);
        border-radius: 4px;
        background: #fffbea;
        color: #5f5127;
    }

        .tmdl-page #pnlAlertaCTE p {
            margin: 0;
        }


/* ============================================================
   1366 x 768
   ============================================================ */

@media (max-width: 1366px) {

    .tmdl-page {
        padding: 8px 10px 14px 10px;
    }

        .tmdl-page .tmdl-page-header {
            padding: 8px 12px;
        }

        .tmdl-page .tmdl-info-grid-reserva {
            grid-template-columns: minmax(190px, 1.5fr) minmax(120px, .7fr) minmax(190px, 1.4fr) minmax(140px, .8fr);
        }

        .tmdl-page .tmdl-driver-grid {
            grid-template-columns: minmax(270px, 1.8fr) minmax(125px, .75fr) minmax(230px, 1.4fr) minmax(125px, .75fr);
        }

        .tmdl-page .tmdl-accordion > .tmdl-section-title,
        .tmdl-page .tmdl-accordion > h3.ui-accordion-header {
            min-height: 39px !important;
            padding: 8px 12px !important;
            font-size: 14px !important;
        }

        .tmdl-page .tmdl-accordion > .ui-accordion-content,
        .tmdl-page .tmdl-step-body {
            padding: 10px !important;
        }
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 1000px) {

    .tmdl-page .tmdl-info-grid-reserva,
    .tmdl-page .tmdl-info-grid-carga,
    .tmdl-page .tmdl-driver-grid,
    .tmdl-page .tmdl-cntr-grid,
    .tmdl-page .tmdl-cntr-grid-small,
    .tmdl-page .tmdl-lacres-grid,
    .tmdl-page .tmdl-nf-grid {
        grid-template-columns: repeat(2, minmax(150px, 1fr));
    }

    .tmdl-page .tmdl-nf-danfe,
    .tmdl-page .tmdl-nf-emissor {
        grid-column: 1 / -1;
    }

    .tmdl-page .tmdl-driver-name,
    .tmdl-page .tmdl-driver-company {
        grid-column: span 1;
    }
}


/* ============================================================
   CELULAR
   ============================================================ */

@media (max-width: 600px) {

    .tmdl-page {
        padding: 6px;
    }

        .tmdl-page .tmdl-page-header {
            align-items: flex-start;
        }

        .tmdl-page .tmdl-page-icon {
            min-width: 46px;
            height: 34px;
        }

        .tmdl-page .tmdl-page-title h1 {
            font-size: 16px !important;
        }

        .tmdl-page .tmdl-page-title p {
            font-size: 11px;
        }

        .tmdl-page .tmdl-card-header {
            align-items: flex-start;
            flex-direction: column;
        }

        .tmdl-page .tmdl-search-grid,
        .tmdl-page .tmdl-info-grid-reserva,
        .tmdl-page .tmdl-info-grid-carga,
        .tmdl-page .tmdl-driver-grid,
        .tmdl-page .tmdl-cntr-grid,
        .tmdl-page .tmdl-cntr-grid-small,
        .tmdl-page .tmdl-lacres-grid,
        .tmdl-page .tmdl-nf-grid {
            grid-template-columns: 1fr;
        }

        .tmdl-page .tmdl-nf-danfe,
        .tmdl-page .tmdl-nf-emissor,
        .tmdl-page .tmdl-nf-actions {
            grid-column: 1;
        }

        .tmdl-page .tmdl-upload-line {
            align-items: stretch;
            flex-direction: column;
        }

            .tmdl-page .tmdl-upload-line input[type="file"] {
                width: 100%;
            }
}

/* ============================================================
   AGENDARCS - COMPLEMENTO DO PADRÃO VERDE
   Adicionar ao final do Content/Site.css
   Reutiliza o CSS principal já usado em AgendarCNTR.
   ============================================================ */


/* ============================================================
   MENSAGEM DA CONSULTA
   ============================================================ */

.tmdl-page .tmdl-search-message {
    grid-column: 1 / -1;
}

.tmdl-page .tmdl-warning {
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #e6c8c8;
    border-left: 4px solid #c94a4a;
    border-radius: 4px;
    background: #fff4f4;
    color: #a33434 !important;
    font-size: 12px !important;
    font-weight: 600;
}


/* ============================================================
   MOTORISTA / VEÍCULO / CHASSI
   ============================================================ */

.tmdl-page .tmdl-cs-driver-grid {
    display: grid;
    grid-template-columns: minmax(290px, 1.8fr) minmax(140px, .8fr) minmax(250px, 1.5fr) minmax(140px, .8fr);
    gap: 10px;
    box-sizing: border-box;
    width: 100%;
    padding: 10px;
}

.tmdl-page .tmdl-cs-chassi {
    grid-column: 1 / 2;
}


/* ============================================================
   MENSAGENS DA NOTA FISCAL
   ============================================================ */

.tmdl-page .tmdl-nf-messages {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    margin-bottom: 10px;
}

.tmdl-page .MsgSalvar,
.tmdl-page span[id$="lblMsgSalvar"] {
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #d9c681;
    border-left: 4px solid #c5a253;
    border-radius: 4px;
    background: #fffbea !important;
    color: #5f5127 !important;
    font-size: 12px !important;
    font-weight: 600;
}

.tmdl-page span[id$="msgErroNF"] {
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #e6c8c8;
    border-left: 4px solid #c94a4a;
    border-radius: 4px;
    background: #fff4f4;
    color: #a33434 !important;
    font-size: 12px !important;
    font-weight: 600;
}

.tmdl-page span[id$="msgSucessoDanfe"] {
    display: block;
    box-sizing: border-box;
    margin-top: 6px;
    padding: 7px 9px;
    border: 1px solid #bdd8c2;
    border-left: 4px solid #4e8b58;
    border-radius: 4px;
    background: #f1f8f2;
    color: #356d3e !important;
    font-size: 12px !important;
    font-weight: 600;
}


/* ============================================================
   NOTA FISCAL - GRID DE CAMPOS
   ============================================================ */

.tmdl-page .tmdl-cs-nf-grid {
    display: grid;
    grid-template-columns: minmax(115px, .7fr) minmax(90px, .55fr) minmax(220px, 1.4fr) minmax(120px, .75fr) minmax(115px, .7fr);
    gap: 10px;
    box-sizing: border-box;
    width: 100%;
    padding: 10px;
}

.tmdl-page .tmdl-cs-nf-danfe {
    grid-column: 1 / -1;
}

.tmdl-page .tmdl-cs-nf-emissor {
    grid-column: span 3;
}

.tmdl-page .tmdl-cs-nf-actions {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
    grid-column: 1 / -1;
    padding-top: 2px;
}

.tmdl-page .tmdl-grid-wrapper-nf {
    padding-top: 2px;
}


/* ============================================================
   RESPONSÁVEL PELO PAGAMENTO
   ============================================================ */

.tmdl-page .tmdl-payment-grid {
    display: grid;
    grid-template-columns: minmax(300px, 1.35fr) minmax(280px, 1fr);
    gap: 10px;
    box-sizing: border-box;
    width: 100%;
    padding: 10px;
}

.tmdl-page .tmdl-payment-notice {
    box-sizing: border-box;
    width: calc(100% - 20px);
    margin: 0 10px 10px 10px;
    padding: 8px 10px;
    border: 1px solid #d9c681;
    border-left: 4px solid #c5a253;
    border-radius: 4px;
    background: #fffbea;
    color: #5f5127;
    font-size: 12px;
    font-weight: 600;
}


/* ============================================================
   RESULTADO DA PESQUISA DE CNPJ
   O JavaScript original continua preenchendo o Label TextBox1.
   ============================================================ */

.tmdl-page .tmdl-cnpj-results,
.tmdl-page span[id$="TextBox1"] {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-height: 170px;
    margin-top: 5px;
    padding: 5px;
    overflow-y: auto;
    border: 1px solid #cbd3cc;
    border-radius: 4px;
    background: #ffffff;
}

    .tmdl-page span[id$="TextBox1"] a {
        display: block;
        padding: 7px 8px;
        border-bottom: 1px solid #e5e9e5;
        color: #213323;
        font-size: 12px;
        font-weight: 600;
        text-decoration: none;
    }

        .tmdl-page span[id$="TextBox1"] a:last-child {
            border-bottom: 0;
        }

        .tmdl-page span[id$="TextBox1"] a:hover {
            background: #f1f5f1;
        }


/* ============================================================
   BOTÕES ESPECÍFICOS DA NF
   ============================================================ */

.tmdl-page input[id$="btnUploadNota"],
.tmdl-page input[id$="btnSalvarNF"],
.tmdl-page input[id$="btnConcluirNF"] {
    background: #213323 !important;
    border-color: #18271a !important;
    color: #ffffff !important;
}

    .tmdl-page input[id$="btnUploadNota"]:hover,
    .tmdl-page input[id$="btnSalvarNF"]:hover,
    .tmdl-page input[id$="btnConcluirNF"]:hover {
        background: #314d34 !important;
        color: #ffffff !important;
    }

.tmdl-page input[id$="btnCancelarNF"] {
    background: #ffffff !important;
    border: 1px solid #aeb9af !important;
    color: #213323 !important;
}

    .tmdl-page input[id$="btnCancelarNF"]:hover {
        background: #f2f5f2 !important;
    }


/* ============================================================
   ALERTA DO GATE
   ============================================================ */

.tmdl-page .tmdl-gate-alert {
    box-sizing: border-box;
    width: 100%;
    margin-top: 10px;
    padding: 9px 12px;
    border: 1px solid #d9c681;
    border-left: 5px solid #c5a253;
    border-radius: 4px;
    background: #fffbea;
    color: #5f5127;
    font-size: 12px;
    font-weight: 600;
}

    .tmdl-page .tmdl-gate-alert p {
        margin: 0;
    }


/* ============================================================
   MODAL ALTERAÇÃO DE PLACA / MOTORISTA
   ============================================================ */

.tmdl-modal-panel {
    display: none;
    width: 94%;
    max-width: 650px;
    box-sizing: border-box;
    border: 1px solid #b8c1b9;
    border-radius: 6px;
    background: #ffffff;
    box-shadow: 0 12px 35px rgba(0, 0, 0, .22);
    overflow: hidden;
}

.tmdl-modal-header {
    padding: 10px 14px;
    background: #213323;
    border-left: 5px solid #c5a253;
    color: #ffffff;
}

    .tmdl-modal-header h5 {
        margin: 0;
        color: #ffffff;
        font-size: 14px;
        font-weight: 700;
    }

.tmdl-modal-body {
    padding: 18px 16px;
    background: #ffffff;
    color: #333333;
}

    .tmdl-modal-body h1 {
        margin: 0;
        color: #213323;
        font-size: 16px;
        font-weight: 600;
        line-height: 1.4;
    }

.tmdl-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 7px;
    padding: 10px 14px;
    border-top: 1px solid #dce2dd;
    background: #f6f8f6;
}

    .tmdl-modal-footer input[id$="btnSim"] {
        background: #213323 !important;
        color: #ffffff !important;
    }

    .tmdl-modal-footer input[id$="btnNao"] {
        background: #ffffff !important;
        border: 1px solid #aeb9af !important;
        color: #213323 !important;
    }


/* ============================================================
   UPPERCASE
   ============================================================ */

.uppercase {
    text-transform: uppercase;
}


/* ============================================================
   1366 x 768
   ============================================================ */

@media (max-width: 1366px) {

    .tmdl-page .tmdl-cs-driver-grid {
        grid-template-columns: minmax(260px, 1.7fr) minmax(125px, .75fr) minmax(220px, 1.35fr) minmax(125px, .75fr);
    }

    .tmdl-page .tmdl-cs-nf-grid {
        grid-template-columns: minmax(105px, .65fr) minmax(85px, .5fr) minmax(190px, 1.25fr) minmax(110px, .7fr) minmax(105px, .65fr);
    }
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 1000px) {

    .tmdl-page .tmdl-cs-driver-grid,
    .tmdl-page .tmdl-cs-nf-grid,
    .tmdl-page .tmdl-payment-grid {
        grid-template-columns: repeat(2, minmax(150px, 1fr));
    }

    .tmdl-page .tmdl-cs-driver-name,
    .tmdl-page .tmdl-cs-driver-company,
    .tmdl-page .tmdl-cs-chassi {
        grid-column: span 1;
    }

    .tmdl-page .tmdl-cs-nf-danfe,
    .tmdl-page .tmdl-cs-nf-emissor,
    .tmdl-page .tmdl-cs-nf-actions {
        grid-column: 1 / -1;
    }
}


/* ============================================================
   CELULAR
   ============================================================ */

@media (max-width: 600px) {

    .tmdl-page .tmdl-cs-driver-grid,
    .tmdl-page .tmdl-cs-nf-grid,
    .tmdl-page .tmdl-payment-grid {
        grid-template-columns: 1fr;
    }

    .tmdl-page .tmdl-cs-driver-name,
    .tmdl-page .tmdl-cs-driver-company,
    .tmdl-page .tmdl-cs-chassi,
    .tmdl-page .tmdl-cs-nf-danfe,
    .tmdl-page .tmdl-cs-nf-emissor,
    .tmdl-page .tmdl-cs-nf-actions {
        grid-column: 1;
    }

    .tmdl-modal-footer {
        flex-direction: column;
    }

        .tmdl-modal-footer .Botao {
            width: 100% !important;
        }
}
/* ============================================================
   AGENDAR CSCARREGAMENTO - COMPLEMENTO DO PADRÃO VERDE
   Adicionar ao final do Content/Site.css
   Reutiliza o CSS principal já usado nas telas anteriores.
   ============================================================ */


/* ============================================================
   MOTORISTA / VEÍCULO / CHASSI
   ============================================================ */

.tmdl-page .tmdl-csc-driver-grid {
    display: grid;
    grid-template-columns: minmax(290px, 1.8fr) minmax(140px, .8fr) minmax(250px, 1.5fr) minmax(140px, .8fr);
    gap: 10px;
    box-sizing: border-box;
    width: 100%;
    padding: 10px;
}

.tmdl-page .tmdl-csc-chassi {
    grid-column: 1 / 2;
}


/* ============================================================
   MENSAGEM ANTES DO CADASTRO DE MERCADORIAS
   ============================================================ */

.tmdl-page .tmdl-csc-message {
    width: 100%;
    margin-bottom: 10px;
}

    .tmdl-page .tmdl-csc-message .MsgSalvar,
    .tmdl-page .tmdl-csc-message span[id$="lblMsgSalvar"] {
        display: block;
        box-sizing: border-box;
        width: 100%;
        padding: 8px 10px;
        border: 1px solid #d9c681;
        border-left: 4px solid #c5a253;
        border-radius: 4px;
        background: #fffbea !important;
        color: #5f5127 !important;
        font-size: 12px !important;
        font-weight: 600;
    }


/* ============================================================
   CADASTRO DE MERCADORIA
   ============================================================ */

.tmdl-page .tmdl-mercadoria-grid {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) minmax(110px, 150px) auto;
    gap: 10px;
    align-items: end;
    box-sizing: border-box;
    width: 100%;
    padding: 10px;
}

.tmdl-page .tmdl-mercadoria-action {
    display: flex;
    align-items: flex-end;
}

    .tmdl-page .tmdl-mercadoria-action .Botao {
        min-width: 90px;
    }


/* ============================================================
   BOTÃO SALVAR MERCADORIA
   ============================================================ */

.tmdl-page input[id$="btnSalvarMercadoria"] {
    background: #213323 !important;
    border-color: #18271a !important;
    color: #ffffff !important;
}

    .tmdl-page input[id$="btnSalvarMercadoria"]:hover {
        background: #314d34 !important;
        color: #ffffff !important;
    }


/* ============================================================
   GRID DE MERCADORIAS
   ============================================================ */

.tmdl-page table[id$="dgConsultaMercadoria"] {
    width: 100% !important;
    border-collapse: collapse !important;
    border: 1px solid #cbd3cc !important;
    background: #ffffff;
}

    .tmdl-page table[id$="dgConsultaMercadoria"] th {
        padding: 7px 6px !important;
        background: #213323 !important;
        border: 1px solid #405543 !important;
        color: #ffffff !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        white-space: nowrap;
    }

    .tmdl-page table[id$="dgConsultaMercadoria"] td {
        padding: 6px !important;
        border: 1px solid #dce2dd !important;
        color: #333333 !important;
        font-size: 11px !important;
    }

    .tmdl-page table[id$="dgConsultaMercadoria"] tr:nth-child(even) td {
        background: #fafcfa !important;
    }


/* ============================================================
   ALERTA DO GATE
   ============================================================ */

.tmdl-page .tmdl-gate-alert {
    box-sizing: border-box;
    width: 100%;
    margin-top: 10px;
    padding: 9px 12px;
    border: 1px solid #d9c681;
    border-left: 5px solid #c5a253;
    border-radius: 4px;
    background: #fffbea;
    color: #5f5127;
    font-size: 12px;
    font-weight: 600;
}

    .tmdl-page .tmdl-gate-alert p {
        margin: 0;
    }


/* ============================================================
   MODAL / IFRAME
   ============================================================ */

.tmdl-csc-modal-panel {
    box-sizing: border-box !important;
    max-width: 800px !important;
    width: 94% !important;
    height: auto !important;
    border: 1px solid #b8c1b9 !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, .22) !important;
    overflow: hidden !important;
}

.tmdl-csc-frame-wrapper {
    width: 100%;
    box-sizing: border-box;
}

    .tmdl-csc-frame-wrapper iframe {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        border: 0;
    }


/* ============================================================
   1366 x 768
   ============================================================ */

@media (max-width: 1366px) {

    .tmdl-page .tmdl-csc-driver-grid {
        grid-template-columns: minmax(260px, 1.7fr) minmax(125px, .75fr) minmax(220px, 1.35fr) minmax(125px, .75fr);
    }

    .tmdl-page .tmdl-mercadoria-grid {
        grid-template-columns: minmax(280px, 1fr) minmax(100px, 135px) auto;
    }
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 1000px) {

    .tmdl-page .tmdl-csc-driver-grid {
        grid-template-columns: repeat(2, minmax(150px, 1fr));
    }

    .tmdl-page .tmdl-csc-driver-name,
    .tmdl-page .tmdl-csc-driver-company,
    .tmdl-page .tmdl-csc-chassi {
        grid-column: span 1;
    }

    .tmdl-page .tmdl-mercadoria-grid {
        grid-template-columns: minmax(220px, 1fr) minmax(100px, 140px) auto;
    }
}


/* ============================================================
   CELULAR
   ============================================================ */

@media (max-width: 600px) {

    .tmdl-page .tmdl-csc-driver-grid,
    .tmdl-page .tmdl-mercadoria-grid {
        grid-template-columns: 1fr;
    }

    .tmdl-page .tmdl-csc-driver-name,
    .tmdl-page .tmdl-csc-driver-company,
    .tmdl-page .tmdl-csc-chassi {
        grid-column: 1;
    }

    .tmdl-page .tmdl-mercadoria-action {
        width: 100%;
    }

        .tmdl-page .tmdl-mercadoria-action .Botao {
            width: 100% !important;
        }
}
/* ============================================================
   CONSULTAR VEÍCULOS - COMPLEMENTO DO PADRÃO VERDE
   Adicionar ao final do Content/Site.css
   ============================================================ */


/* ============================================================
   PAINEL DE PESQUISA
   ============================================================ */

.tmdl-page .tmdl-vehicle-search-panel {
    width: 100%;
    box-sizing: border-box;
    border-top: 1px solid #dce2dd;
    background: #ffffff;
}

.tmdl-page .tmdl-vehicle-filter-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    gap: 10px;
    box-sizing: border-box;
    width: 100%;
    padding: 10px;
}

.tmdl-page .tmdl-vehicle-type-field {
    grid-column: 1 / -1;
}


/* ============================================================
   OPERADOR + CAMPO
   ============================================================ */

.tmdl-page .tmdl-filter-control {
    display: grid;
    grid-template-columns: minmax(125px, 155px) minmax(0, 1fr);
    gap: 7px;
    width: 100%;
    align-items: center;
}

    .tmdl-page .tmdl-filter-control .tmdl-filter-operator {
        width: 100% !important;
    }


/* ============================================================
   AÇÕES DA PESQUISA
   ============================================================ */

.tmdl-page .tmdl-vehicle-search-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    box-sizing: border-box;
    width: 100%;
    padding: 0 10px 10px 10px;
}


/* Voltar e Limpar com fundo claro */

.tmdl-page input[id$="btVoltar"],
.tmdl-page input[id$="btLimpar"] {
    background: #ffffff !important;
    border: 1px solid #aeb9af !important;
    color: #213323 !important;
}

    .tmdl-page input[id$="btVoltar"]:hover,
    .tmdl-page input[id$="btLimpar"]:hover {
        background: #f1f5f1 !important;
    }


/* Pesquisar principal */

.tmdl-page input[id$="btFiltrar"] {
    background: #213323 !important;
    border-color: #18271a !important;
    color: #ffffff !important;
}


/* ============================================================
   GRID
   ============================================================ */

.tmdl-page .tmdl-vehicle-grid-card {
    margin-top: 10px;
}

.tmdl-page .tmdl-vehicle-grid-wrapper {
    box-sizing: border-box;
    width: 100%;
    max-height: 500px;
    padding: 10px;
    overflow: auto;
}

.tmdl-page .tmdl-hidden-legacy-panel {
    display: none;
}

.tmdl-page .tmdl-vehicle-grid {
    min-width: 940px;
}

    .tmdl-page .tmdl-vehicle-grid th {
        position: sticky;
        top: 0;
        z-index: 2;
        background: #213323 !important;
        color: #ffffff !important;
    }

    .tmdl-page .tmdl-vehicle-grid td {
        vertical-align: middle !important;
    }


    /* ============================================================
   PAGINAÇÃO
   ============================================================ */

    .tmdl-page .tmdl-vehicle-grid .tmdl-pager,
    .tmdl-page .tmdl-vehicle-grid tr:last-child table {
        margin: 0 auto;
    }

        .tmdl-page .tmdl-vehicle-grid tr:last-child table td {
            border: 0 !important;
            padding: 3px !important;
            background: transparent !important;
        }

        .tmdl-page .tmdl-vehicle-grid tr:last-child table a,
        .tmdl-page .tmdl-vehicle-grid tr:last-child table span {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 28px;
            height: 28px;
            padding: 0 7px;
            border: 1px solid rgba(255, 255, 255, .35);
            border-radius: 4px;
            color: #ffffff !important;
            text-decoration: none;
        }


/* ============================================================
   1366 x 768
   ============================================================ */

@media (max-width: 1366px) {

    .tmdl-page .tmdl-vehicle-filter-grid {
        grid-template-columns: repeat(2, minmax(240px, 1fr));
    }

    .tmdl-page .tmdl-vehicle-grid-wrapper {
        max-height: 430px;
    }
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 850px) {

    .tmdl-page .tmdl-vehicle-filter-grid {
        grid-template-columns: 1fr;
    }

    .tmdl-page .tmdl-vehicle-type-field {
        grid-column: 1;
    }
}


/* ============================================================
   CELULAR
   ============================================================ */

@media (max-width: 550px) {

    .tmdl-page .tmdl-filter-control {
        grid-template-columns: 1fr;
    }

    .tmdl-page .tmdl-vehicle-search-actions {
        flex-direction: column;
    }

        .tmdl-page .tmdl-vehicle-search-actions .Botao {
            width: 100% !important;
        }
}

/* ============================================================
   CADASTRAR VEÍCULOS - COMPLEMENTO DO PADRÃO VERDE
   Adicionar ao final do Content/Site.css
   ============================================================ */


/* ============================================================
   CARD DO FORMULÁRIO
   ============================================================ */

.tmdl-page .tmdl-vehicle-form-card {
    width: 100%;
    max-width: none;
    margin: 0;
}


/* ============================================================
   GRID DOS CAMPOS
   ============================================================ */

.tmdl-page .tmdl-vehicle-form-grid {
    display: grid;
    grid-template-columns: minmax(220px, 1.4fr) minmax(150px, .8fr) minmax(150px, .8fr) minmax(140px, .75fr);
    gap: 10px;
    box-sizing: border-box;
    width: 100%;
    padding: 10px;
}

.tmdl-page .tmdl-vehicle-transportadora {
    grid-column: span 2;
}

.tmdl-page .tmdl-vehicle-chassi {
    grid-column: span 2;
}


/* ============================================================
   VALIDAÇÕES
   ============================================================ */

.tmdl-page .tmdl-field-validation {
    display: block;
    margin-top: 4px;
    color: #b13a3a !important;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
}


/* ============================================================
   MENSAGENS
   ============================================================ */

.tmdl-page .tmdl-vehicle-message-panel {
    box-sizing: border-box;
    width: calc(100% - 20px);
    margin: 0 10px 10px 10px;
}

.tmdl-page .tmdl-message-success {
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin-bottom: 5px;
    padding: 8px 10px;
    border: 1px solid #bdd8c2;
    border-left: 4px solid #4e8b58;
    border-radius: 4px;
    background: #f1f8f2;
    color: #356d3e !important;
    font-size: 12px;
    font-weight: 600;
}

.tmdl-page .tmdl-message-error {
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #e6c8c8;
    border-left: 4px solid #c94a4a;
    border-radius: 4px;
    background: #fff4f4;
    color: #a33434 !important;
    font-size: 12px;
    font-weight: 600;
}


/* ============================================================
   AÇÕES
   ============================================================ */

.tmdl-page .tmdl-vehicle-form-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    box-sizing: border-box;
    width: 100%;
    padding: 0 10px 10px 10px;
}


/* RETORNAR */

.tmdl-page input[id$="btRetornar"] {
    background: #ffffff !important;
    border: 1px solid #aeb9af !important;
    color: #213323 !important;
}

    .tmdl-page input[id$="btRetornar"]:hover {
        background: #f1f5f1 !important;
    }


/* SALVAR */

.tmdl-page input[id$="btSalvar"] {
    background: #213323 !important;
    border-color: #18271a !important;
    color: #ffffff !important;
}

    .tmdl-page input[id$="btSalvar"]:hover {
        background: #314d34 !important;
    }


/* ============================================================
   1366 x 768
   ============================================================ */

@media (max-width: 1366px) {

    .tmdl-page .tmdl-vehicle-form-grid {
        grid-template-columns: minmax(210px, 1.35fr) minmax(140px, .8fr) minmax(140px, .8fr) minmax(130px, .7fr);
    }
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 900px) {

    .tmdl-page .tmdl-vehicle-form-grid {
        grid-template-columns: repeat(2, minmax(150px, 1fr));
    }

    .tmdl-page .tmdl-vehicle-transportadora,
    .tmdl-page .tmdl-vehicle-chassi {
        grid-column: span 2;
    }
}


/* ============================================================
   CELULAR
   ============================================================ */

@media (max-width: 560px) {

    .tmdl-page .tmdl-vehicle-form-grid {
        grid-template-columns: 1fr;
    }

    .tmdl-page .tmdl-vehicle-transportadora,
    .tmdl-page .tmdl-vehicle-chassi {
        grid-column: 1;
    }

    .tmdl-page .tmdl-vehicle-form-actions {
        flex-direction: column;
    }

        .tmdl-page .tmdl-vehicle-form-actions .Botao {
            width: 100% !important;
        }
}
/* ============================================================
   CONSULTAR MOTORISTAS - COMPLEMENTO DO PADRÃO VERDE
   Adicionar ao final do Content/Site.css
   ============================================================ */


/* ============================================================
   PAINEL DE PESQUISA
   ============================================================ */

.tmdl-page .tmdl-driver-search-panel {
    width: 100%;
    box-sizing: border-box;
    border-top: 1px solid #dce2dd;
    background: #ffffff;
}

.tmdl-page .tmdl-driver-filter-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    gap: 10px;
    box-sizing: border-box;
    width: 100%;
    padding: 10px;
}


/* ============================================================
   OPERADOR + CAMPO
   ============================================================ */

.tmdl-page .tmdl-filter-control {
    display: grid;
    grid-template-columns: minmax(125px, 155px) minmax(0, 1fr);
    gap: 7px;
    width: 100%;
    align-items: center;
}

    .tmdl-page .tmdl-filter-control .tmdl-filter-operator {
        width: 100% !important;
    }


/* ============================================================
   AÇÕES DA PESQUISA
   ============================================================ */

.tmdl-page .tmdl-driver-search-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    box-sizing: border-box;
    width: 100%;
    padding: 0 10px 10px 10px;
}


/* Voltar / Limpar */

.tmdl-page input[id$="btVoltar"],
.tmdl-page input[id$="btLimpar"] {
    background: #ffffff !important;
    border: 1px solid #aeb9af !important;
    color: #213323 !important;
}

    .tmdl-page input[id$="btVoltar"]:hover,
    .tmdl-page input[id$="btLimpar"]:hover {
        background: #f1f5f1 !important;
    }


/* Pesquisar */

.tmdl-page input[id$="btFiltrar"] {
    background: #213323 !important;
    border-color: #18271a !important;
    color: #ffffff !important;
}


/* ============================================================
   GRID
   ============================================================ */

.tmdl-page .tmdl-driver-grid-card {
    margin-top: 10px;
}

.tmdl-page .tmdl-driver-grid-wrapper {
    box-sizing: border-box;
    width: 100%;
    max-height: 500px;
    padding: 10px;
    overflow: auto;
}

.tmdl-page .tmdl-hidden-legacy-panel {
    display: none;
}

.tmdl-page .tmdl-driver-grid {
    min-width: 820px;
}

    .tmdl-page .tmdl-driver-grid th {
        position: sticky;
        top: 0;
        z-index: 2;
        background: #213323 !important;
        color: #ffffff !important;
    }

    .tmdl-page .tmdl-driver-grid td {
        vertical-align: middle !important;
    }


        /* Nome e transportadora precisam aproveitar largura */

        .tmdl-page .tmdl-driver-grid td:nth-child(5),
        .tmdl-page .tmdl-driver-grid td:nth-child(9) {
            min-width: 220px;
        }


/* ============================================================
   1366 x 768
   ============================================================ */

@media (max-width: 1366px) {

    .tmdl-page .tmdl-driver-filter-grid {
        grid-template-columns: repeat(2, minmax(240px, 1fr));
    }

    .tmdl-page .tmdl-driver-grid-wrapper {
        max-height: 430px;
    }
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 850px) {

    .tmdl-page .tmdl-driver-filter-grid {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   CELULAR
   ============================================================ */

@media (max-width: 550px) {

    .tmdl-page .tmdl-filter-control {
        grid-template-columns: 1fr;
    }

    .tmdl-page .tmdl-driver-search-actions {
        flex-direction: column;
    }

        .tmdl-page .tmdl-driver-search-actions .Botao {
            width: 100% !important;
        }
}
/* ============================================================
   CADASTRAR MOTORISTAS - COMPLEMENTO DO PADRÃO VERDE
   Adicionar ao final do Content/Site.css
   ============================================================ */


/* ============================================================
   CARD DO FORMULÁRIO
   ============================================================ */

.tmdl-page .tmdl-driver-form-card {
    width: 100%;
    max-width: none;
    margin: 0;
}


/* ============================================================
   GRID DOS CAMPOS
   ============================================================ */

.tmdl-page .tmdl-driver-form-grid {
    display: grid;
    grid-template-columns: minmax(230px, 1.45fr) minmax(170px, .95fr) minmax(170px, .95fr) minmax(170px, .95fr);
    gap: 10px;
    box-sizing: border-box;
    width: 100%;
    padding: 10px;
}

.tmdl-page .tmdl-driver-transportadora {
    grid-column: span 2;
}

.tmdl-page .tmdl-driver-cnh {
    grid-column: span 1;
}

.tmdl-page .tmdl-driver-name {
    grid-column: span 2;
}


/* ============================================================
   CNH + CONSULTAR
   ============================================================ */

.tmdl-page .tmdl-driver-cnh-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    align-items: center;
    width: 100%;
}

    .tmdl-page .tmdl-driver-cnh-row .Botao {
        min-width: 92px;
    }


/* ============================================================
   VALIDAÇÕES
   ============================================================ */

.tmdl-page .tmdl-field-validation {
    display: block;
    margin-top: 4px;
    color: #b13a3a !important;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
}

.tmdl-page .tmdl-validation-stack {
    display: flex;
    flex-direction: column;
    gap: 2px;
}


/* ============================================================
   MENSAGENS
   ============================================================ */

.tmdl-page .tmdl-driver-message-panel {
    box-sizing: border-box;
    width: calc(100% - 20px);
    margin: 0 10px 10px 10px;
}

.tmdl-page .tmdl-message-success {
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin-bottom: 5px;
    padding: 8px 10px;
    border: 1px solid #bdd8c2;
    border-left: 4px solid #4e8b58;
    border-radius: 4px;
    background: #f1f8f2;
    color: #356d3e !important;
    font-size: 12px;
    font-weight: 600;
}

.tmdl-page .tmdl-message-error {
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #e6c8c8;
    border-left: 4px solid #c94a4a;
    border-radius: 4px;
    background: #fff4f4;
    color: #a33434 !important;
    font-size: 12px;
    font-weight: 600;
}


/* ============================================================
   AÇÕES
   ============================================================ */

.tmdl-page .tmdl-driver-form-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    box-sizing: border-box;
    width: 100%;
    padding: 0 10px 10px 10px;
}


/* Retornar / Limpar */

.tmdl-page input[id$="btRetornar"],
.tmdl-page input[id$="btLimpar"] {
    background: #ffffff !important;
    border: 1px solid #aeb9af !important;
    color: #213323 !important;
}

    .tmdl-page input[id$="btRetornar"]:hover,
    .tmdl-page input[id$="btLimpar"]:hover {
        background: #f1f5f1 !important;
    }


/* Salvar */

.tmdl-page input[id$="btSalvar"] {
    background: #213323 !important;
    border-color: #18271a !important;
    color: #ffffff !important;
}

    .tmdl-page input[id$="btSalvar"]:hover {
        background: #314d34 !important;
    }


/* Consultar CNH */

.tmdl-page input[id$="btConsultarCNH"] {
    background: #314d34 !important;
    border-color: #213323 !important;
    color: #ffffff !important;
}

    .tmdl-page input[id$="btConsultarCNH"]:hover {
        background: #213323 !important;
    }


/* ============================================================
   1366 x 768
   ============================================================ */

@media (max-width: 1366px) {

    .tmdl-page .tmdl-driver-form-grid {
        grid-template-columns: minmax(220px, 1.35fr) minmax(155px, .9fr) minmax(155px, .9fr) minmax(155px, .9fr);
    }
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 900px) {

    .tmdl-page .tmdl-driver-form-grid {
        grid-template-columns: repeat(2, minmax(150px, 1fr));
    }

    .tmdl-page .tmdl-driver-transportadora,
    .tmdl-page .tmdl-driver-name {
        grid-column: span 2;
    }

    .tmdl-page .tmdl-driver-cnh {
        grid-column: span 1;
    }
}


/* ============================================================
   CELULAR
   ============================================================ */

@media (max-width: 560px) {

    .tmdl-page .tmdl-driver-form-grid {
        grid-template-columns: 1fr;
    }

    .tmdl-page .tmdl-driver-transportadora,
    .tmdl-page .tmdl-driver-name,
    .tmdl-page .tmdl-driver-cnh {
        grid-column: 1;
    }

    .tmdl-page .tmdl-driver-cnh-row {
        grid-template-columns: 1fr;
    }

        .tmdl-page .tmdl-driver-cnh-row .Botao {
            width: 100% !important;
        }

    .tmdl-page .tmdl-driver-form-actions {
        flex-direction: column;
    }

        .tmdl-page .tmdl-driver-form-actions .Botao {
            width: 100% !important;
        }
}