html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.form-label {
    font-weight: bold;
}

.oculto {
    display: none;
}

html {
  position: relative;
  min-height: 100%;
}

body {
    margin-bottom: 60px;
    background-color: #F5F5F5;
}

.div-login-titulo-principal-sec {
    color: white;
}

.input-cadastro-telefone {
    width: 200px;
}

.btn-agendamento {
    margin-top: 10px;
    width: 200px;
    height: 45px;
    font-size: 18px;
    text-align: center;
    align-self: auto;
}

.pagina-login {
    margin-top: 75px;
    background-color: lightblue;
    min-height: 70vh;
    padding: 5px;
    border-radius: 12px;
}

.div-login-form {
    background: white;
    border-radius: 18px;
    box-shadow: 0 20px 45px rgba(0,0,0,.12);
    padding: 45px;
    width: 420px;
}

.login-label {
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: bold;
    color: black;
}

.img-servico {
    margin-top: 25px;
    height: 80px;
    object-fit: cover;
    width: 80px;
    border-radius: 12px;
    cursor: pointer;
}

.img-servico-click {
    border: 3px solid #d4af37;
    border-radius: 10px;
}

.a-index-titulo-principal {
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
}

.a-login-esqueci-senha {
    font-weight: bold;
    font-size: 15px;
    color: steelblue;
    cursor: pointer;
}

.btn-login {
    background: #0B1F5B;
    color: white;
    border-radius: 8px;
    height: 50px;
    font-weight: 600;
    transition: .3s;
}

.h1-login-titulo-principal {
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    font-size: 35px;
    text-align: center;
    color: black;
}

.span-texto-destaque {
    color: #87CEEB;
    font-size: 60px;
}

.pagina-div-boas-vindas {
    background-color: #053c66;
    padding: 5px;
    border-radius: 3px;
}

.p-ver-senha {
    font-weight: bold;
    font-size: 15px;
    font-family: 'Roboto', sans-serif;
    color: steelblue;
}

.pagina-index {
    margin-top: 5px;
    background-color: #F2F2F2;
    min-height: 70vh;
    padding: 5px;
    border-radius: 3px;
}

```css
.resumo-agendamentos {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.resumo-titulo {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

    .resumo-titulo h3 {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 600;
    }

.badge-total {
    background-color: #e9ecef;
    color: #343a40;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 0.85rem;
    white-space: nowrap;
}

.resumo-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 6px;
    font-size: 0.9rem;
    white-space: nowrap;
}

    .status strong {
        font-weight: 700;
    }

.status-pendente {
    color: #555;
    background-color: #eeeeee;
}

.status-confirmado {
    color: #0f5132;
    background-color: #d1e7dd;
}

.status-concluido {
    color: #084298;
    background-color: #cfe2ff;
}

.status-cancelado {
    color: #842029;
    background-color: #f8d7da;
}

@media (max-width: 576px) {
    .resumo-titulo h3 {
        font-size: 1.1rem;
    }

    .status {
        padding: 6px 9px;
        font-size: 0.8rem;
    }
}

```

.a-menu {
    background-color: white !important;
    border-radius: 15px !important;
    text-decoration: none !important;
}

.pagina-menu {
    background-color: white !important;
    border-radius: 15px !important;
}

.h1-index-titulo-principal {
    font-family: 'Roboto', sans-serif;
    text-align: center;
    color: white;
    font-size: 50px;
}

.h3-index-titulo-principal {
    font-family: 'Roboto', sans-serif;
    text-align: center;
    color: white;
}

.p-status-agendamento-codigo {
    font-family: 'Roboto', sans-serif;
    color: gray;
    font-size: 15px;
    font-weight: bold;
    word-wrap: break-word;
    text-align: right;
    padding-right: 10px;
    margin-top: -35px;
}

.img-centro {
    text-align: right !important;
}

.img-menu-index {
    font-family: 'Roboto', sans-serif;
    color: black;
    font-size: 20px;
    font-weight: bold;
    word-wrap: break-word;
    margin: 0;
    cursor: pointer;
    text-align: center;
    text-decoration: none !important;
    border: 1px solid darkgray;
    border-radius: 25px;
    background-color: white;
    padding: 35px;
}

.legenda-menu-index {
    font-family: 'Roboto', sans-serif;
    color: black;
    font-size: 20px;
    font-weight: bold;
    word-wrap: break-word;
    margin: 0;
    cursor: pointer;
    text-align: center;
}

.fc-col-header-cell {
    background-color: #F5F5F5;
    color: #fff;
}

.fc-col-header-cell-cushion {
    color: black;
    text-decoration: none !important;
}

.fc-daygrid-day-number {
    color: #333 !important;
    font-weight: bold;
    text-decoration: none !important;

}

.fc-daygrid-day-number:hover {
    color: #333 !important;
}

.fc-daygrid-day-number:focus {
    outline: none !important;
}

.fc-scrollgrid td {
    border: 1px solid lightgray;
}

.fc-daygrid-day {
    background-color: #F5F5F5;
    position: relative;
}

.icone-agendamento {
    position: absolute;
    top: 25px;
    bottom: 2px;
    right: 2px;
    font-size: 30px;
    pointer-events: none;
    z-index: 5;
}

.caldendario-calendar {
    height: 500px;
    border-radius: 2px;
    padding: 2px;
    font-size: 12px;
    margin-top: 25px;
}

.dados-agendamento {
    background-color: white;
    font-family: 'Roboto', sans-serif;
    color: black;
    font-size: 25px;
    font-weight: bold;
    word-wrap: break-word;
    cursor: pointer;
    border: 1px solid lightgray;
    border-radius: 6px;
    padding-left: 20px;
}

.p-status-agendamento-pendente {
    margin-top: 15px;
    font-family: 'Roboto', sans-serif;
    color: white;
    width: 85px;
    font-size: 15px;
    font-weight: bold;
    word-wrap: break-word;
    border-radius: 25px;
    background-color: grey;
    padding-left: 10px;
}

.p-status-agendamento-confirmado {
    margin-top: 15px;
    font-family: 'Roboto', sans-serif;
    color: white;
    width: 100px;
    font-size: 15px;
    font-weight: bold;
    word-wrap: break-word;
    border-radius: 25px;
    background-color: green;
    padding-left: 10px;
}

.p-status-agendamento-concluido {
    margin-top: 15px;
    font-family: 'Roboto', sans-serif;
    color: white;
    width: 93px;
    font-size: 15px;
    font-weight: bold;
    word-wrap: break-word;
    border-radius: 25px;
    background-color: blue;
    padding-left: 10px;
}

.p-status-agendamento-cancelado {
    margin-top: 15px;
    font-family: 'Roboto', sans-serif;
    color: white;
    width: 95px;
    font-size: 15px;
    font-weight: bold;
    word-wrap: break-word;
    border-radius: 25px;
    background-color: red;
    padding-left: 10px;
}

.p-status-agendamento-legenda-servico {
    font-family: 'Roboto', sans-serif;
    color: black;
    font-size: -18px;
    font-weight: bold;
    word-wrap: break-word;
    margin-top: -15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 10px;
}

.span-status-agendamento-legenda-servico {
    font-family: 'Roboto', sans-serif;
    color: black;
    font-size: 20px;
    font-weight: bold;
    word-wrap: break-word;
    padding-right: 10px;
}

.p-status-agendamento-legenda {
    font-family: 'Roboto', sans-serif;
    color: gray;
    font-size: 20px;
    font-weight: bold;
    word-wrap: break-word;
    margin-top: -18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 10px;
}

.span-status-agendamento-legenda {
    font-family: 'Roboto', sans-serif;
    color: black;
    font-size: 20px;
    font-weight: bold;
    word-wrap: break-word;
    text-align: right;
    padding-right: 10px;
}

.p-agendamento-nao-encontrado {
    font-family: 'Roboto', sans-serif;
    color: black;
    font-size: 25px;
    font-weight: bold;
    text-align: center;
    margin-top: 15px;
}

.p-dados-nao-encontrado {
    font-family: 'Roboto', sans-serif;
    font-size: 25px;
}

.dados-tabela {
    font-family: 'Roboto', sans-serif;
    color: black;
    font-size: 12px;
    font-weight: bold;
    word-wrap: break-word;
    padding-top: 10px !important;
}

.dados-codigo {
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
}

.dados-tabela-coluna {
    white-space: nowrap;
    font-family: 'Roboto', sans-serif;
    color: black;
    font-size: 12px;
    word-wrap: break-word;
    text-align: center !important;
}

.span-asterisco-obrigatorio {
    color: red;
}

.input-upper {
    text-transform: uppercase;
    text-align: center;
}

.select-menor {
    width: 150px;
    display: block;
}

.input {
    text-align: center;
}

#ServicosSelecionados + .ts-wrapper:not(.has-items) .ts-control input {
    flex: 1 1 100%;
    width: 100%;
    text-align: center;
}

    #ServicosSelecionados + .ts-wrapper:not(.has-items) .ts-control input::placeholder {
        text-align: center;
    }

td, th {
    vertical-align: middle;
}

.close-alert {
    position: absolute;
    right: -10px;
    top: -15px;
    border-radius: 15px;
    width: 30px;
    height: 31px;
}