body {
    background-color: #fefefe;
}

h1 {
    margin-left : 15px;
    margin-right: 15px;
}

.label {
    font-weight: 300;
    transition : 0.2s;
}

.label:hover {
    font-weight: 600;
}

.bloco {
    margin          : 10px 0px;
    padding         : 15px;
    border-radius   : 10px;
    background-color: #fff;
    box-shadow      : 0px 0px 18px -6px #0003;
}

.blocoMapa {
    height          : 500px;
    border-radius   : 10px;
    background-color: #aaa;
}

.btnTrocar {
    box-shadow      : inset 0 0 0 black;
    border-radius   : 5px;
    background-color: #aaa3;
    transition      : 0.2s;
}

.btnTrocar:hover {
    box-shadow      : inset 0px 0px 0px black;
    background-color: #333756;
    color           : #fff;
}

.btnTrocar:active {
    box-shadow      : inset 0px 4px 2px black;
    background-color: #333756;
    color           : #fff;
}

.yt-1 {
    margin-top: 15px;
}

.end {
    display        : flex;
    justify-content: end;
}

.custom-control-inline {
    display     : -ms-inline-flexbox;
    display     : inline-flex;
    margin-right: 1rem;
}

.custom-control {
    position                  : relative;
    cursor                    : pointer;
    z-index                   : 1;
    display                   : block;
    min-height                : 18px;
    padding-left              : 18px;
    -webkit-print-color-adjust: exact;
    color-adjust              : exact;
    margin-bottom             : 10px;
}

.custom-control-input:checked~.custom-control-label::before {
    /* color           : #333756; */
    border-color    : #333756;
    background-color: #fff;
}

.custom-control-input:checked~.custom-control-label::after {
    /* color           : #333756; */
    border-color    : #333756;
    transform       : scale(1);
    transform-origin: center;
}


.custom-radio .custom-control-label::before {
    border-radius: 50%;
}

.custom-control-input {
    position: absolute;
    left    : 0;
    z-index : -1;
    width   : 1rem;
    height  : 1.25rem;
    opacity : 0;
}

.custom-control-label {
    position      : relative;
    cursor        : pointer;
    margin-bottom : 0;
    vertical-align: top;
    transition    : 0.2s;
}

.custom-control-label::before {
    position        : absolute;
    top             : 12.5px;
    left            : -18.5px;
    display         : block;
    width           : 16px;
    height          : 16px;
    pointer-events  : none;
    content         : "";
    background-color: #fff;
    border          : #333756 solid 2px;
    border-radius   : 50%;
}

.custom-control-label::after {
    position        : absolute;
    top             : 15px;
    left            : -15.5px;
    display         : block;
    width           : 10px;
    height          : 10px;
    content         : "";
    background      : 50%/50% 50% no-repeat;
    border-radius   : 50%;
    background-color: #333756;
    transform       : scale(0);
    transition      : transform .2s linear;
}

/* AGENDAMENTO */

.calendario {
    padding       : 20px;
    display       : flex;
    flex-direction: column;
}

.calendarioHeader {
    display        : flex;
    flex-direction : row;
    justify-content: space-between;
    align-items    : center;
    width          : 300px;
}

.calendarioLinha,
.horasLinha,
.minutosLinha {
    display        : flex;
    flex-direction : row;
    justify-content: space-between;
    align-items    : center;
    width          : 300px;
    font-weight    : 400;
}

.dia,
.hora,
.minuto {
    text-align   : center;
    width        : 35px;
    padding      : 10px 8px;
    border-radius: 5px;
    transition   : 0.2s;
}

.calendarioLinha .dia:hover,
.horasLinha .hora:hover,
.minutosLinha .minuto:hover {
    cursor          : pointer;
    background-color: #333756;
    color           : #fff;
}