:root{
    --colorTextos : #49454567;
    --colorFondo : #150d91;
}

td{
    vertical-align: middle;
}

*,
::before,
::after{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#registro body{   

    font-family: 'Montserrat', sans-serif !important;

    height: 650px !important;
    display: flex;
    text-align: center !important;
    align-items: center !important;
}

#registro h1{
    font-family: 'Montserrat', sans-serif !important;
    background-color: rgba(108,129,208,255);
    border-radius: 10px;
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.8);
    padding: 10px;
    color: #fff;
    text-align: center;
    font-weight: 100;
    font-size: 25px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

#registro form{
    margin-top: 2%;
    margin-bottom: 2%;
    background: #fff;
    width: 50%;
    padding: 40px 0;
    box-shadow: 0 0 6px 0 rgba(0,0,0, 0.8);
    border-radius: 10px;
    margin-left: auto;
    margin-right: auto;
}


#registro .form{
    width: 100% !important;
    margin: auto;
}

#registro form .grupo{
    position: relative;
    margin: 45px;
}

#registro input{
    background: none;
    color: #000;
    font-size: 18px;
    padding: 10px 10px 10px 5px;
    display: block;
    width:100%;
    border:none;
    border-bottom: 1px solid var(--colorTextos);
}

#registro input:focus{
    outline: none;
    color:rgb(94,91,93);
}

#registro label{
    font-size: 16px;
    position: absolute;
    left: 5px;
    top: 10px;
    transition: 0.5s ease-in-out all;
    pointer-events: none;
}

#registro input:focus~label,
#registro input:valid~label{
    top: -14px;
    font-size: 12px;
    color: var(--colorFondo);
}

#registro .barra{
    position: relative;
    display: block;
    width: 100%;
}

#registro .barra::before{
    content: "";
    height: 2px;
    width: 0%;
    bottom: 0;
    position: absolute;
    background: linear-gradient(to right, white, #150d91);
    transition: 0.3s ease width;
}

#registro input:focus~.barra::before{
     width: 100%;
}

#registro button{
    background: rgba(108,129,208,255);
    border-bottom-color: rgb(53, 126, 189);
    border-radius: 10px;
    display: block;
    width: 30%;
    margin: 10px auto;
    color: white;
    height: 40px;
    font-size: 16px;
    cursor: pointer;
}

#registro p{
    font-family: 'Montserrat', sans-serif !important;
    color: black;
    font-size: medium;
    text-align: justify;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
}

#registro a{
    color : var(--colorFondo);
    text-decoration: none;
}

#registro input [type="checkbox"]{
    text-align: justify;
}

#qrs body{   

    font-family: 'Montserrat', sans-serif !important;

    height: 650px !important;
    display: flex;
    text-align: center !important;
    align-items: center !important;
}

#qrs h1{
    font-family: 'Montserrat', sans-serif !important;
    background-color: rgba(108,129,208,255);
    border-radius: 10px;
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.8);
    padding: 10px;
    color: #fff;
    text-align: center;
    font-weight: 100;
    font-size: 25px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

#qrs form{
    margin-top: 2%;
    margin-bottom: 2%;
    background: #fff;
    width: 50%;
    padding: 40px 0;
    box-shadow: 0 0 6px 0 rgba(0,0,0, 0.8);
    border-radius: 10px;
    margin-left: auto;
    margin-right: auto;
}


#qrs .form{
    width: 100% !important;
    margin: auto;
}

#qrs form .grupo{
    position: relative;
    margin: 45px;
}

#qrs input{
    background: none;
    color: #000;
    font-size: 18px;
    padding: 10px 10px 10px 5px;
    display: block;
    width:100%;
    border:none;
    border-bottom: 1px solid var(--colorTextos);
}

#qrs input:focus{
    outline: none;
    color:rgb(94,91,93);
}

#qrs label{
    font-size: 16px;
    position: absolute;
    left: 5px;
    top: 10px;
    transition: 0.5s ease-in-out all;
    pointer-events: none;
}

#qrs input:focus~label,
#qrs input:valid~label{
    top: -14px;
    font-size: 12px;
    color: var(--colorFondo);
}

#qrs .barra{
    position: relative;
    display: block;
    width: 100%;
}

#qrs .barra::before{
    content: "";
    height: 2px;
    width: 0%;
    bottom: 0;
    position: absolute;
    background: linear-gradient(to right, white, #150d91);
    transition: 0.3s ease width;
}

#qrs input:focus~.barra::before{
     width: 100%;
}

#qrs button{
    background: rgba(108,129,208,255);
    border-bottom-color: rgb(53, 126, 189);
    border-radius: 10px;
    display: block;
    width: 30%;
    margin: 10px auto;
    color: white;
    height: 40px;
    font-size: 16px;
    cursor: pointer;
}

#qrs p{
    font-family: 'Montserrat', sans-serif !important;
    color: black;
    font-size: medium;
    text-align: justify;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
}

#qrs textarea{
    font-family: 'Montserrat', sans-serif !important;
    color: black;
    font-size: medium;
    text-align: justify;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
}

#qrs a{
    color : var(--colorFondo);
    text-decoration: none;
}

#qrs input [type="checkbox"]{
    text-align: justify;
}

#qrs .select-css {
    margin-left: auto !important;
    margin-right: auto !important;
    font-family: 'Montserrat', sans-serif !important;
	display: block;
	font-size: 16px;
	font-family: sans-serif;
	font-weight: 700;
	color: #000;
	line-height: 1.3;
	padding: .6em 1.4em .5em .8em;
	width: 40%;
	max-width: 100%;
	box-sizing: border-box;
	margin: 0;
	border: 1px solid #aaa;
	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
	border-radius: .5em;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
	background-repeat: no-repeat, repeat;
	background-position: right .7em top 50%, 0 0;
	background-size: .65em auto, 100%;
}
#qrs .select-css::-ms-expand {
	display: none;
}
#qrs .select-css:hover {
	border-color: #888;
}
#qrs .select-css:focus {
	border-color: #aaa;
	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
	box-shadow: 0 0 0 3px -moz-mac-focusring;
	color: #222;
	outline: none;
}

#qrs .select-css option {
	font-weight:normal;
}

#qrs h2{
        font-family: 'Montserrat', sans-serif !important;
        color: #000;
        text-align: justify;
        font-weight: 80;
        font-size: 18px;
        width: 90%;
        margin-left: auto;
        margin-right: auto;
}

#seleccion{
    margin-left: auto !important;
    margin-right: auto !important;
}

#llamado body{   

    font-family: 'Montserrat', sans-serif !important;

    height: 650px !important;
    display: flex;
    text-align: center !important;
    align-items: center !important;
}

#llamado h1{
    font-family: 'Montserrat', sans-serif !important;
    background-color: rgba(67, 141, 14, 0.8);
    border-radius: 10px;
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.8);
    padding: 10px;
    color: #fff;
    text-align: center;
    font-weight: 100;
    font-size: 25px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

#llamado form{
    margin-top: 2%;
    margin-bottom: 2%;
    background: rgba(91, 168, 231, 0.493);
    width: 25%;
    padding: 40px 0;
    box-shadow: 0 0 6px 0 rgba(0,0,0, 0.8);
    border-radius: 10px;
    margin-left: auto;
    margin-right: auto;
}


#llamado .form{
    width: 100% !important;
    margin: auto;
}

#llamado form .grupo{
    position: relative;
    margin: 45px;
}

#llamado input{
    background: none;
    color: #000;
    font-size: 18px;
    padding: 10px 10px 10px 5px;
    display: block;
    width:100%;
    border:none;
    border-bottom: 1px solid var(--colorTextos);
}

#llamado input:focus{
    outline: none;
    color:rgb(94,91,93);
}

#llamado label{
    font-size: 16px;
    position: absolute;
    left: 5px;
    top: 10px;
    transition: 0.5s ease-in-out all;
    pointer-events: none;
}

#llamado input:focus~label,
#llamado input:valid~label{
    top: -14px;
    font-size: 12px;
    color: var(--colorFondo);
}

#llamado .barra{
    position: relative;
    display: block;
    width: 100%;
}

#llamado .barra::before{
    content: "";
    height: 2px;
    width: 0%;
    bottom: 0;
    position: absolute;
    background: linear-gradient(to right, white, #150d91);
    transition: 0.3s ease width;
}

#llamado input:focus~.barra::before{
     width: 100%;
}

#llamado button{
    background: rgb(2, 76, 141);
    border-bottom-color: rgb(53, 126, 189);
    border-radius: 10px;
    display: block;
    width: 30%;
    margin: 10px auto;
    color: white;
    height: 40px;
    font-size: 16px;
    cursor: pointer;
}

#llamado h2{
    font-family: 'Montserrat', sans-serif !important;
    color: #000;
    text-align: center;
    font-weight: 80;
    font-size: 30px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5%;
}

.warnings{
    width: 200px;
    text-align: center;
    margin: auto;
    color: red;
    padding-top: 20px;
}

#solicitud-citas body{   

    font-family: 'Montserrat', sans-serif !important;

    height: 650px !important;
    display: flex;
    text-align: center !important;
    align-items: center !important;
}

#solicitud-citas h1{
    font-family: 'Montserrat', sans-serif !important;
    background-color: rgba(67, 141, 14, 0.8);
    border-radius: 10px;
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.8);
    padding: 10px;
    color: #fff;
    text-align: center;
    font-weight: 100;
    font-size: 25px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

#solicitud-citas form{
    margin-top: 2%;
    margin-bottom: 2%;
    background: #fff;
    width: 70%;
    padding: 40px 0;
    box-shadow: 0 0 6px 0 rgba(0,0,0, 0.8);
    border-radius: 10px;
    margin-left: auto;
    margin-right: auto;
}

#solicitud-citas .table{
    width: 80%;
    padding: 40px 0;
    margin-left: auto;
    margin-right: auto;
    border: 5px solid;  
    border-color: #8b8c89;
    text-align: center;
    margin-top: 2% 
}

#solicitud-citas h3{
    font-family: 'Montserrat', sans-serif !important;
    background-color: #3a87ad;;
    border-radius: 10px;
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.8);
    padding: 10px;
    color: #fff;
    text-align: center;
    font-weight: 100;
    font-size: 25px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

#solicitud-citas h4{
    font-family: 'Montserrat', sans-serif !important;
    background-color: #fcf8e3;;
    border-radius: 10px;
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.8);
    padding: 10px;
    color: red;
    text-align: center;
    font-weight: 100;
    font-size: 15px;
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2%;
    margin-bottom: 2%;
}



#solicitud-citas .form{
    width: 100% !important;
    margin: auto;
}

#solicitud-citas form .grupo{
    position: relative;
    margin: 45px;
}

#solicitud-citas input{
    background: none;
    color: #000;
    font-size: 18px;
    padding: 10px 10px 10px 5px;
    display: block;
    width:100%;
    border:none;
    border-bottom: 1px solid var(--colorTextos);
}

#solicitud-citas input:focus{
    outline: none;
    color:rgb(94,91,93);
}

#solicitud-citas label{
    font-size: 16px;
    position: absolute;
    left: 5px;
    top: 10px;
    transition: 0.5s ease-in-out all;
    pointer-events: none;
}

#solicitud-citas input:focus~label,
#solicitud-citas input:valid~label{
    top: -14px;
    font-size: 12px;
    color: var(--colorFondo);
}

#solicitud-citas .barra{
    position: relative;
    display: block;
    width: 100%;
}

#solicitud-citas .barra::before{
    content: "";
    height: 2px;
    width: 0%;
    bottom: 0;
    position: absolute;
    background: linear-gradient(to right, white, #150d91);
    transition: 0.3s ease width;
}

#solicitud-citas input:focus~.barra::before{
     width: 100%;
}

#solicitud-citas button{
    background: #004383;;
    border-bottom-color: rgb(53, 126, 189);
    border-radius: 10px;
    display: block;
    width: 70%;
    margin: 10px auto;
    color: white;
    height: 40px;
    font-size: 16px;
    cursor: pointer;
}

#solicitud-citas p{
    font-family: 'Montserrat', sans-serif !important;
    color: black;
    font-size: medium;
    text-align: justify;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
}

#solicitud-citas textarea{
    font-family: 'Montserrat', sans-serif !important;
    color: black;
    font-size: medium;
    text-align: justify;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
}

#solicitud-citas a{
    color : var(--colorFondo);
    text-decoration: none;
}

#solicitud-citas input [type="checkbox"]{
    text-align: justify;
}

#solicitud-citas .select-css {
    margin-left: auto !important;
    margin-right: auto !important;
    font-family: 'Montserrat', sans-serif !important;
	display: block;
	font-size: 16px;
	font-family: sans-serif;
	font-weight: 700;
	color: #000;
	line-height: 1.3;
	padding: .6em 1.4em .5em .8em;
	width: 40%;
	max-width: 100%;
	box-sizing: border-box;
	margin: 0;
	border: 1px solid #aaa;
	box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
	border-radius: .5em;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
	  linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
	background-repeat: no-repeat, repeat;
	background-position: right .7em top 50%, 0 0;
	background-size: .65em auto, 100%;
}
#solicitud-citas .select-css::-ms-expand {
	display: none;
}
#solicitud-citas .select-css:hover {
	border-color: #888;
}
#solicitud-citas .select-css:focus {
	border-color: #aaa;
	box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
	box-shadow: 0 0 0 3px -moz-mac-focusring;
	color: #222;
	outline: none;
}

#solicitud-citas .select-css option {
	font-weight:normal;
}

#solicitud-citas h2{
        font-family: 'Montserrat', sans-serif !important;
        color: #1C75BC;
        text-align: center;
        font-weight: 80;
        font-size: 18px;
        width: 90%;
        margin-left: auto;
        margin-right: auto;
}

.checkbox p{
    font-family: 'Montserrat', sans-serif !important;
    color: black;
    font-size: 1px !important;
    text-align: justify;
    width: 10%;
}

input[type="radio"], input[type="checkbox"]{
    margin: 4px 0 0;
    line-height: normal ;
}


.disponible, .reservado, .seleccionado{
    border-radius: 3px;
    border: none;
    width: 10em !important;
    font-size: 14px !important;
    text-transform: uppercase;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    color: #000 !important;
}

.disponible{
    background: #86e76e !important;
}

.reservado{
    background: #dbd7d7 !important;
    pointer-events: none;
}

.seleccionado{
    background: #e76e7b !important;
}



@media screen and (max-width:500px) {
    #section .form{
        width:80%;
    }
    
    #registro button{
        width: 90%;
    }

    #registro form{
        margin-top: 5%;
        background: #fff;
        width: 100%;
        padding: 40px 0;
        box-shadow: 0 0 6px 0 rgba(0,0,0, 0.8);
        border-radius: 10px;
    }

    #select .form{
        width:80%;
    }
    
    #qrs button{
        width: 90%;
    }

    #qrs form{
        margin-top: 5%;
        background: #fff;
        width: 100%;
        padding: 40px 0;
        box-shadow: 0 0 6px 0 rgba(0,0,0, 0.8);
        border-radius: 10px;
    }
}

@media(max-width: 900px)
    {
        #section .form{
            width:80%;
        }
        
        #registro button{
            width: 90%;
        }
    
        #registro form{
            margin-top: 5%;
            background: #fff;
            width: 100%;
            padding: 40px 0;
            box-shadow: 0 0 6px 0 rgba(0,0,0, 0.8);
            border-radius: 10px;
        }

        #section .form{
            width:80%;
        }
        
        #qrs button{
            width: 90%;
        }
    
        #qrs form{
            margin-top: 5%;
            background: #fff;
            width: 100%;
            padding: 40px 0;
            box-shadow: 0 0 6px 0 rgba(0,0,0, 0.8);
            border-radius: 10px;
        }

        
    }