:root{
    --bg-blue: #F0F9FD;
}
.typograph-size-14{
    font-size: 14px !important;
}
.typograph-size-15{
    font-size: 15px !important;
}
.typograph-size-16{
    font-size: 16px !important;
}
.typograph-size-17{
    font-size: 17px !important;
}
.typograph-size-18{
    font-size: 18px !important;
}
.typograph-size-19{
    font-size: 19px !important;
}
.typograph-size-20{
    font-size: 20px !important;
}
.typograph-size-21{
    font-size: 21px !important;
}
.typograph-size-22{
    font-size: 22px !important;
}
.typograph-size-23{
    font-size: 23px !important;
}
.typograph-size-24{
    font-size: 24px !important;
}

h1 {
    color: #21B9CA;
    font-family: 'vistaSansAltBlackIta' !important;
}

h2 {
    color: #21B9CA;
    font-size: 39px !important;
    font-family: 'vistaSansAltBlackIta' !important;
}
h3 {
    color: #21B9CA;
    font-size: 28px !important;    
    font-family: 'vistaSansAltBlack' !important;
}


.mt-2{
    margin-top: 40px !important;
}
.mb-2{
    margin-bottom: 40px !important;
}
.p-2{
    padding: 20px;
}
.pl-2{
    padding-left: 20px;
}
.p-container-schedules{
    padding: 20px 125px 20px 20px;
}
.visible{
    visibility: hidden !important;
}
.d-none{
    display: none !important;
}
.d-flex{
    display: flex;
}
.dinamic-element-html{
    display: flex;
    flex-direction: column;
    height: 100%;
}
.dinamic-element-html ul {
    padding: initial !important;
    padding-left: 20px !important;
    font-weight: normal !important;
}
.container-calendar-body{
    display: flex;
    flex-direction: column;
    max-width: 500px;
    margin: 0 auto;
}
.card{
    background: var(--bg-blue);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px; 
}
.card--column {
    flex-direction: column;
}
.card-theme-schedule {
    color: #6B6B6B !important;
    font-size: 20px;
    font-weight: bold;
}
.card-radius{
    border-radius: 10px;
}
.card-title{
    color: #6B6B6B !important; 
    font-size: 20px;
    text-align: start;
    font-weight: bold;
    display: block;
    width: 100%;
}
.card-list{
    padding: initial;
    padding-left: 20px;
    width: 100%;
    color: #6B6B6B;
    font-size: 18px;
}
.card-list li {
    margin-bottom: 15px;
}
.card-list--lazy{
    font-weight:lighter !important;
    font-size: 14px !important;
}
.card-point{
    width: 20px;
    height: 20px;
    border-radius: 100%;
    display: inline-block;
    margin-right: 10px;
}
.card-point + span {
    font-weight: bold;
    color: #6B6B6B;
}
.card-point--green{
    background: #60CB83;
}

.card-point--pink{
    background: rgba(255, 87, 87, 0.25);    
}
.card--edit{
    max-width: 500px;
    max-height: 454px;
    overflow-y: auto;
}
.card--edit::-webkit-scrollbar{
    width: 1px;
}
.card--edit::-webkit-scrollbar-thumb{
    border-radius: 15px;
    background: #21B9CA;
}
.card--edit::-webkit-scrollbar-button{
    border-radius: 15px;
}
.schedules-container {
    padding: 20px;
    background: rgba(255, 255, 255, 0.5) !important;
}
.container-calendar{
    background: #23bacb21;
    padding: 20px 20px 100px !important;
    width: 100%;
}

.accordion {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    flex-grow: 1;
    font-size: 15px !important;
}

.accordion__summary,.accordion--info{
    user-select: none;
    background: white;
    padding: 15px;
    margin-bottom: 10px;
    cursor: pointer;
    position: relative;
    font-family: "vistaSansAltBlack";
    color: #21B9CA;
    border-radius: 5px;
    width: 100%;
    box-shadow: 1px 1px 6px rgba(238, 235, 235, 0.2);
}
.accordion--info{
    background: none !important;
}
.accordion-body{
    display: grid;
    position: relative;
    grid-template-columns: repeat(7,minmax(30px,1fr));
    grid-gap: 10px;
}

.accordion-hour{
    padding: 14px 1%;
    display: inline-block;
    text-align: center;
}
.accordion-hour-container{
    display: none;
}
.accordion-hour--white{
    background: rgba(255, 255, 255, 0.5);
    border-radius: 5px;
    z-index: 1;
    color: #21B9CA;
}
.container-calendar > h1 {
    text-align: center;
}
.allow-error{
    border: 1px solid red;
}
@media only screen and (max-width: 750px){
    .accordion-hide + div {
        display: none !important;
    }
    .accordion__summary::after{
        content: "";
        height: 14px;
        width: 22px;
        right: 19px;
        top: 50%;
        transform: translate(0, -50%);
        position: absolute;
        z-index: 1;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        display: block;    
    }
    .accordion__summary + div {
        margin-top: 10px;
        padding: 15px;
        font-family: "vistaSansAltBlack";
        color: #21B9CA;
        display: grid;
        grid-gap: 15px;
        grid-template-columns: repeat(3,1fr);
        width: 100%;
    }
    
    .accordion__summary::after{
        background-image: url(/img/icon/arrrow-up.svg);    
    }
    
    .accordion-hide::after{
        background-image: url(/img/icon/arrow.svg) !important;
    }
    
}


@media (min-width: 750px){
    .calendar{
        min-width: 343px;
    }
    .container-calendar > h1 {
        text-align: initial;
    }
    .container-calendar-body{
        flex-direction: row;
        max-width: initial;
    }
    .container-calendar-body > div {
        margin-right: 40px;
    }
    .schedules-container{
        padding: 20px 125px 20px 20px;
    }
    .d-none{
        display: flex !important;
    }
    .accordion{
        flex-direction: row;
        align-items: baseline;
    }
    .accordion-body{
        width: 70%;
    }
    .accordion__summary{
        margin-right: 20px;
        min-width: 30%;
        width: initial;
    }
    .accordion__summary{
        cursor:auto;
    }
    .accordion-hour-container{
        display: grid;
        position: relative;
        grid-template-columns: repeat(7,minmax(30px,1fr));
        grid-gap: 10px;
        flex-grow: 1;
    }
    
    .accordion-hour--blue{
        background: #21B9CA;
        color: white;
        border-radius: 5px;
    }
    .accordion-hour--white{
        background: white;
        border-radius: 5px;
        z-index: 1;
        color: #21B9CA;
        font-weight: bold;
    }
    .accordion-body::after{
        content: "";    
        width: 100%;
        height: 50px;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translate(0,-50%);
        background: url(../img/separador-horarios.png) center repeat-x;
        padding: 0!important;
    }
    .grid-column-10 {
        grid-template-columns: repeat(10,minmax(30px,1fr)) !important;
    }
    .order-1{
        grid-column: 1;
    }
    .order-2{
        grid-column: 2;
    }
    .order-3{
        grid-column: 3;
    }
    .order-4{
        grid-column: 4;
    }
    .order-5{
        grid-column: 5;
    }
    .order-6{
        grid-column: 6;
    }
    .order-7{
        grid-column: 7;
    }
     .order-8{
        grid-column: 8;
    }
    .order-9{
        grid-column: 9;
    }
    .order-10{
        grid-column: 10;
    }
}