@CHARSET "UTF-8";

/***************************
************Admin***********
****************************/

.adress_id_input {
    width:max-content;
}

div.list-slot-manager > h2 {
    max-width:80vw;
}

.slot-manager-days {
    display:flex;
    flex-wrap:wrap;
    max-width:80vw;
}

.slot-manager-days > div {
    width:100%;
    height:max-content;
    display:flex;
}

.slot-manager-days > div.other-date {
    position:relative;
    right:17px;
}

.slot-manager-days > div > div {
    width:max-content;
    margin-left:auto;
    margin-right:auto;
    display:flex;
}

.slot-manager-days > div > div > a.link-slot-manager {
    display:block;
    width:300px;
    text-align:center;
    padding:10px;
    margin:10px;
    text-decoration:none;
    color:black;
    background:white;
    border: 1px solid #dc5e00;
    margin-top:20px;
    max-width:60vw;
}

.slot-manager-days > div > div > a {
    color:#084ba0;
}

.slot-manager-days > div > div > a > i {
    line-height: 45px;
    font-size: 1.8rem;
    margin-top: 20px;
    margin-bottom: 10px;
}

@media all and (max-width:600px) {
    .slot-manager-days > a {
        width:calc(50% - 42px);
    }
}

.horaires-list {
    display:flex;
    flex-wrap:wrap;
    width:60%;
    min-width:300px;
    margin-left:auto;
    margin-right:auto;
    margin-top:20px;
}

.horaires-list .horaire-button {
    width:calc(25% - 50px);
    margin:25px;
    font-size:1.3rem;
}

@media all and (max-width:1280px) {
    .horaires-list .horaire-button {
        width:calc(33% - 50px);
    }
}

@media all and (max-width:720px) {
    .horaires-list .horaire-button {
        width:calc(50% - 50px);
    }
}

/***************************
************Front***********
****************************/

.rdv-h1 {
    display:block;
    width:max-content;
    margin-left:auto;
    margin-right:auto;
    font-size:2rem;
    color: #084ba0;
    padding:0;
    padding-top:30px;
}

form.rdv {
    margin-top:40px;
    margin-bottom:40px;
    width:80%;
    max-width:800px;
    margin-left:auto;
    margin-right:auto;
}

form.rdv button, form.rdv input[type="text"], form.rdv input[type="password"], form.rdv select, form.rdv textarea {
    transition: 250ms linear background, 250ms linear color, 250ms linear border;
    border-radius: 2px;
    border: 1px solid #AAAAAA;
    margin: 0;
    padding: 0 5px;
    height: 26px;
    background: #FFFFFF;
    width: 280px;
    font-size:0.9rem;
}

form.rdv textarea {
    padding:10px;
}

.coordonnees-booking-option {
    display:flex;
    flex-wrap:wrap;
}

.coordonnees-booking-option > div {
    width:calc(50% - 20px);
    margin-left:10px;
    margin-right:10px;
}

@media all and (max-width:992px) {
    .coordonnees-booking-option > div {
        width:100%;
        margin-left:0;
        margin-right:0;
    }
}

form.rdv .coordonnees-title {
    font-size: 1.5rem;
    font-weight: 800;
    margin-top:20px;
    margin-bottom:20px;
    padding:0;
}

form.rdv .name label, form.rdv .firstname label, form.rdv .phone label, form.rdv .mail label, form.rdv .comment label {
    display:block;
    margin-bottom:10px;
    font-size:1rem;
}

form.rdv .firstname label, form.rdv .phone label, form.rdv .mail label, form.rdv .comment label {
    margin-top:10px;
}

form.rdv .booking_option label, form .address label {
    width:100%;
    margin-top:20px;
    display:inline-block;
    line-height: 1.7rem;
}

form.rdv .booking_option label:first-child, form .address label:first-child {
    margin-top:0;
    font-size: 1.5rem;
    font-weight: 800;
}

form.rdv .booking_option {
    margin-top:40px;
}

@media all and (max-width:992px) {
    form.rdv .address {
        margin-top:40px;
    }
}

form.rdv .address_text, form.rdv .booking_option_text {
    margin-top:40px;
    margin-bottom:0;
    font-size:1rem;
    font-weight:500;
    color: #084ba0;
    padding:0;
}

form.rdv .address_text span, form.rdv .booking_option_text span{
    font-size:1.2rem;
    font-weight:800;
}

form.rdv h3 i {
    width:35px;
}

form.rdv .rdv-title {
    font-size: 1.5rem;
    font-weight: 800;
    margin-top: 40px;
    display:inline-block;
}

form .horaires {
    display:flex;
    border-radius:7px;
    margin-top:10px;
    flex-wrap:wrap;
    max-width:800px;
}

form .horaires .arrow-change-days {
    position: relative;
    top: 30px;
    font-size: 1.5rem;
    color:#084ba0;
    cursor:pointer;
    height:max-content;
}

form .horaires > div {
    width:calc(33% - 50px);
    padding:20px;
    margin-left: auto;
    margin-right: auto;
}

form .horaires > div > h4 {
    padding: 10px;
    padding-left:20px;
    margin: 0;
    margin-top: 20px;
    color: #084ba0;
    cursor: pointer;
    font-weight: 800;
    font-size: 0.9rem;
    width: max-content;
}

form .horaires > div .day{
    text-align:center;  
    border-bottom: 1px solid #ccc;
    padding-bottom: 20px;  
    font-weight:400;
}

form .horaires > div .day > span{
    font-weight:800;  
}

form .horaires > div .horaires-button{
    display:flex;
    flex-wrap:wrap;
}

form .horaires > div .horaire-button input{
    display:none;
}

form .horaires > div .horaire-button {
    width:calc(50% - 20px);
    padding:10px;
}

@media all and (max-width:1400px) {
    form .horaires > div .horaire-button {
        width:calc(100% - 20px);
    }
}

@media all and (max-width:992px) {
    form .horaires > div .horaire-button {
        width:calc(50% - 20px);
    }
}

@media all and (max-width:700px) {
    form .horaires > div .horaire-button {
        width:calc(100% - 10px);
        padding:5px;
    }
}

form .horaires > div .horaire-button label {
    text-align:center;
    display:block;
    width:calc(100% - 10px);
    padding:5px;
    background:#eeeeee;
    cursor:pointer;
    transition:0.5s;
    color:black;
}

form .horaires > div .horaire-button label:hover {
    font-weight: 800;
    background:#ccc;
    transition:1s;
}

form .horaires > div .horaire-button input:checked + label {
    font-weight: 800;
    background:#084ba0;
    color:white;
}

@media all and (max-width:600px) {
    form .horaires > div {
        width:calc(50% - 20px);
        padding:5px;
    }
    
    form .horaires .arrow-change-days {
        position: relative;
        top: 15px;
        font-size: 1.5rem;
    }
}

@media all and (max-width:400px) {
    form .horaires > div {
        width:calc(100% - 20px);
    }
}

form.rdv input#book {
    background:#084ba0;
    color:white;
    border:none;
    padding:10px 20px;
    margin-top:50px;
    cursor:pointer;
}

.link-slot-selector a {
    display:block;
    width:max-content;
}

.link-slot-selector li {
    background:white;
    border:1px solid black;
    padding:10px;
    list-style:none;
    width:max-content;
    margin-top:10px;
}

.calendar-events-table-admin table form select {
    width: auto;
}

.calendar-events-item {
    background:none !important;
    border:none !important;
    padding:0 !important;
    cursor:default;
}

.calendar-events-data::before {
    content:"";
    display:inline-block;
    width:8px;
    height:8px;
    border-radius:100%;
    background:#e56200;
}

.calendar-events-data span {
    font-weight:800;
}