/*
	CSS personalizado para FORM RESERVA SEDES
*/

/**************************************** GAMA DE COLORES ****************************************/

/*    Azul Oscuro: 005376 rgb(  0, 83,118) */
/*           Gris: 999999 rgb(153,153,153) */
/*     Azul Medio: 8CA8C2 rgb(140,168,194) */
/*     Azul Claro: C8D8E8 rgb(200,216,232) */
/* Azul Muy Claro: E0F3FC rgb(224,243,252) */

/*        Verde 1: 90C254 rgb(144,194, 84) */
/*        Verde 2: C8DDAB rgb(200,221,171) */
/*        Verde 3: E6F0D7 rgb(230,240,215) */

/*      Naranja 1: FF7711 rgb(255,119, 17) */
/*      Naranja 2: FFEEDD rgb(255,238,221) */

/************************************* #rowFormReservaSedes ************************************/

:root {
	--sede-width: calc(100% - (var(--fecha-hora-width) * 2) - var(--submit-width) - 60px);
	--foto-width: 70px;

	 --fecha-hora-width: 275px;
		    --fecha-width: 160px;
	--margin-fecha-hora:   5px;

	--submit-width: 120px;

	--element-height: 60px;
}

#rowFormReservaSedes                      { margin: auto; padding: 0px !important; max-width: 1080px; }
#rowFormReservaSedes .divFormReservaSedes { margin: 40px 0px; }
#rowFormReservaSedes .divTitulo           { margin-bottom: 10px; font-family: var(--font-family-narrow); font-size: 32px; font-weight: 600; line-height: 120%; }
#rowFormReservaSedes .divForm             { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; }
#rowFormReservaSedes .divForm *           { font-family: var(--font-family-narrow); }
#rowFormReservaSedes .divForm i           { font-family: "FontAwesome"; }
#rowFormReservaSedes .divForm label       { width: 100%; font-size: 24px; font-weight: 400; }

#rowFormReservaSedes .divSedes      { position: relative; width: var(--sede-width); }
#rowFormReservaSedes .divRecogida   { position: relative; width: var(--fecha-hora-width); display: flex; flex-wrap: wrap; justify-content: space-between; }
#rowFormReservaSedes .divDevolucion { position: relative; width: var(--fecha-hora-width); display: flex; flex-wrap: wrap; justify-content: space-between; }
#rowFormReservaSedes .divSubmit     { position: relative; width: var(--submit-width); align-self: flex-end; }
#rowFormReservaSedes .divNotas      { width: 100%; }

#rowFormReservaSedes .divSedes select                    { width: 10px; height: 10px; visibility: hidden; }
#rowFormReservaSedes .divSedes .s-hidden                 { visibility: hidden; }
#rowFormReservaSedes .divSedes .divSelect                { position: relative;  width: 100%; height: var(--element-height); font-weight: 400; }
#rowFormReservaSedes .divSedes .divSelect                { border: none; display: block; cursor: pointer; }
#rowFormReservaSedes .divSedes .divSelection             { position: absolute; top: 0px; left: 0px; padding: 5px 40px 5px 10px; width: 100%; height: 100%; white-space: nowrap; }
#rowFormReservaSedes .divSedes .divSelection             { color: #FFFFFF; background: var(--color-ver2-hex); display: flex; align-items: center; }
#rowFormReservaSedes .divSedes .divSelection i           { margin-right: 10px; padding-bottom: 3px; font-family: "FontAwesome"; }
#rowFormReservaSedes .divSedes .divSelection .spanModelo { font-size: 18px; font-style: italic; }
#rowFormReservaSedes .divSedes .divSelection .divFoto    { margin-right: 10px; width: var(--foto-width); height: 100%; }
#rowFormReservaSedes .divSedes .divSelection .divFoto    { background-repeat: no-repeat; background-position: center center; background-size: cover; }
#rowFormReservaSedes .divSedes .divSelection .divDatos   { line-height: 100%; width: calc(100% - var(--foto-width) - 10px); }
#rowFormReservaSedes .divSedes .divSelection .divDatos * { line-height: 100%; }
#rowFormReservaSedes .divSedes .divSelection .spanName   { font-size: 20px; font-weight: 600; display: block; }
#rowFormReservaSedes .divSedes .divSelection .spanAdress { font-size: 14px; font-weight: 300; display: block; }
#rowFormReservaSedes .divSedes .divSelection:after       { position: absolute; top: 50%; right: 15px; transform: translateY(-50%); }
#rowFormReservaSedes .divSedes .divSelection:after       { content: "\f107"; font-family: FontAwesome; font-size: 32px; }
#rowFormReservaSedes .divSedes .ulOptions                { position: absolute; top: 100%; left: 0; margin: 0px; padding: 0px; width: 100%; list-style: none; }
#rowFormReservaSedes .divSedes .ulOptions                { border: 1px solid var(--color-ver1-hex); z-index: 999; display: none; }
#rowFormReservaSedes .divSedes .ulOptions li             { margin: 0px; padding: 5px 10px; width: 100%; height: var(--element-height); color: var(--color-nar1-hex); }
#rowFormReservaSedes .divSedes .ulOptions li             { white-space: nowrap; background: #FFFFFF; display: flex; align-items: center; }
#rowFormReservaSedes .divSedes .ulOptions li .divFoto    { margin-right: 10px; width: var(--foto-width); height: 100%; }
#rowFormReservaSedes .divSedes .ulOptions li .divFoto    { background-repeat: no-repeat; background-position: center center; background-size: cover; }
#rowFormReservaSedes .divSedes .ulOptions li .divDatos   { line-height: 100%; width: calc(100% - var(--foto-width) - 10px); }
#rowFormReservaSedes .divSedes .ulOptions li .divDatos * { line-height: 100%; }
#rowFormReservaSedes .divSedes .ulOptions li .spanName   { font-size: 16px; font-weight: 600; display: block; }
#rowFormReservaSedes .divSedes .ulOptions li .spanAdress { font-size: 13px; font-weight: 300; display: block; }
#rowFormReservaSedes .divSedes .ulOptions li:hover       { background: var(--color-nar1-hex); color: #FFFFFF; }

#rowFormReservaSedes .divFecha                              { padding: 0px 10px; width: var(--fecha-width); height: var(--element-height); }
#rowFormReservaSedes .divFecha                              { background: var(--color-ver2-hex); display: flex; align-items: center; }
#rowFormReservaSedes .fa-calendar                           { font-family: "FontAwesome"; font-size: 20px; color: #FFFFFF; }
#rowFormReservaSedes .inputFecha                            { padding: 5px; width: calc(100% - 20px); font-size: 20px; font-weight: 400; color: #FFFFFF; background: none; border: none; }
#rowFormReservaSedes .inputFecha::placeholder               { color: #FFFFFF; }
#rowFormReservaSedes .divFecha.disabled                     { opacity: 0.7; cursor: not-allowed; }
#rowFormReservaSedes .divFecha.disabled .fa-calendar        { opacity: 0.7; cursor: not-allowed; }
#rowFormReservaSedes .inputFecha:disabled                   { opacity: 0.7; cursor: not-allowed; }

#rowFormReservaSedes .divHora                               { padding: 0px 10px; width: calc(100% - var(--fecha-width) - var(--margin-fecha-hora)); height: var(--element-height); }
#rowFormReservaSedes .divHora                               { background: var(--color-ver2-hex); display: flex; align-items: center; }
#rowFormReservaSedes .fa-clock-o                            { font-family: "FontAwesome"; font-size: 20px; color: #FFFFFF; }
#rowFormReservaSedes .selectHora                            { padding: 5px 0px 5px 2px; width: calc(100% - 20px); font-size: 20px; font-weight: 400; }
#rowFormReservaSedes .selectHora                            { color: #FFFFFF; background: none; border: none; }
#rowFormReservaSedes .divHora.disabled                      { opacity: 0.7; cursor: not-allowed; }
#rowFormReservaSedes .divHora.disabled .fa-clock-o          { opacity: 0.7; cursor: not-allowed; }
#rowFormReservaSedes .divHora.disabled .selectHora:disabled { opacity: 0.7; cursor: not-allowed; }

#rowFormReservaSedes .divSubmit .buttonSubmit          { padding: 0px; width: 100%; height: var(--element-height); font-size: 30px; font-weight: 600; color: #FFFFFF; }
#rowFormReservaSedes .divSubmit .buttonSubmit          { background: var(--color-ver1-hex); border: none; border-radius: 0px; display: flex; align-items: center; justify-content: center; }
#rowFormReservaSedes .divSubmit .buttonSubmit i        { font-family: "FontAwesome"; font-size: 40px; }
#rowFormReservaSedes .divSubmit .buttonSubmit:disabled { opacity: 0.2; cursor: not-allowed; }

#rowFormReservaSedes .divNotas  ul               { margin: 10px 0px 0px 0px; list-style-type: none; }
#rowFormReservaSedes .divNotas  li               { margin-bottom: 5px; line-height: 100%; }
#rowFormReservaSedes .divNotas  span             { font-weight: 400; font-style: italic; color: var(--color1-hex); }
#rowFormReservaSedes .divNotas  a                { color: var(--color1-hex); }
#rowFormReservaSedes .divNotas  i.fa-info-circle { margin-left: 5px; width: 36px; font-size: 18px; color: #FF0000; }

/* JQUERY UI DATEPICKER */

.ui-datepicker                                  { border: 1px solid var(--color-nar1-hex) !important; border-radius: 0px; }
.ui-datepicker *                                { box-sizing: border-box; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; }
.ui-datepicker .ui-datepicker-header            { background: none; border: none; }
.ui-datepicker .ui-datepicker-title             { color: var(--color-nar1-hex); }
.ui-datepicker .ui-datepicker-prev span         { display: none; }
.ui-datepicker .ui-datepicker-prev              { display: flex; align-items: center; justify-content: center; }
.ui-datepicker .ui-datepicker-prev:before       { content: "\f0d9"; font-family: "FontAwesome"; font-size: 24px; color: var(--color-nar1-hex); }
.ui-datepicker .ui-datepicker-prev:hover        { background: var(--color-nar1-hex); color: #FFFFFF; border: none; }
.ui-datepicker .ui-datepicker-prev:hover:before { color: #FFFFFF; }
.ui-datepicker .ui-datepicker-next span         { display: none; }
.ui-datepicker .ui-datepicker-next              { display: flex; align-items: center; justify-content: center; }
.ui-datepicker .ui-datepicker-next:before       { content: "\f0da"; font-family: "FontAwesome"; font-size: 24px; color: var(--color-nar1-hex); }
.ui-datepicker .ui-datepicker-next:hover        { background: var(--color-nar1-hex); color: #FFFFFF; border: none; }
.ui-datepicker .ui-datepicker-next:hover:before { color: #FFFFFF; }

.ui-datepicker table th                                             { padding: 2px 5px; color: #FFFFFF; background: var(--color-nar1-hex); }
.ui-datepicker table td .ui-state-default                           { border: solid 2px var(--color-nar2-hex); background: var(--color-nar2-hex); }
.ui-datepicker table td a:hover                                     { border: solid 2px var(--color-nar1-hex); }
.ui-datepicker table td.ui-datepicker-today .ui-state-default       { font-weight: 600; color: var(--color-nar1-hex); }
.ui-datepicker table td.ui-datepicker-current-day .ui-state-default { font-weight: 600; color: #FFFFFF; background: var(--color-nar1-hex); border: solid 2px var(--color-nar1-hex); }

/* JQUERY UI SELECTMENU */

.ui-selectmenu-button                     { margin: 0px; padding: 5px 0px 5px 6px; width: calc(100% - 20px); font-size: 20px; font-weight: 400; }
.ui-selectmenu-button                     { color: #FFFFFF; background: none; border: none; display: flex; align-items: center; }
.ui-selectmenu-button .ui-icon            { display: none; }
.ui-selectmenu-button:after               { content: "\f107"; font-family: "FontAwesome"; font-size: 18px; color: #FFFFFF; }
.ui-selectmenu-button .ui-selectmenu-text { margin-right: 12px; }
.ui-selectmenu-button:hover               { color: #FFFFFF; background: none; border: none; }
.ui-selectmenu-button:focus               { color: #FFFFFF; background: none; border: none; }

.ui-selectmenu-menu *                   { box-sizing: border-box; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; }
.ui-selectmenu-menu ul                  { padding: 2px; width: 251px; height: auto; border: 1px solid var(--color-nar1-hex) !important; border-radius: 0px; display: flex; flex-wrap: wrap; }
.ui-selectmenu-menu li                  { margin: 1px !important; width: calc(20% - 2px); font-size: 13px; background: var(--color-nar2-hex); border: solid 2px var(--color-nar2-hex); }
.ui-selectmenu-menu li                  { display: flex; align-items: center; justify-content: center; list-style-image: none !important;	}
.ui-selectmenu-menu li div              { margin: 0px !important; padding: 2px !important; }
.ui-selectmenu-menu li .ui-state-active { font-weight: inherit; color: inherit; border: none; background: none; }
.ui-selectmenu-menu li:hover            { background: var(--color-nar1-hex); border: solid 2px var(--color-nar1-hex); }
.ui-selectmenu-menu li:hover div        { font-weight: 600; color: #FFFFFF; }
.ui-selectmenu-menu li:first-of-type    { width: 100%; font-size: 14px; font-weight: 600; color: #FFFFFF !important; }
.ui-selectmenu-menu li:first-of-type    { background: var(--color-nar1-hex); border: solid 2px var(--color-nar1-hex); text-align: center; }

@media (max-width: 1180px) {
	:root {
					--sede-width: calc(100% - (var(--fecha-hora-width) * 2) - var(--submit-width) - 40px);
		--fecha-hora-width: 265px;
	       --fecha-width: 150px;
				--submit-width: 110px;
	}
	#rowFormReservaSedes .divFormReservaSedes     { padding: 0px 20px; }
	#rowFormReservaSedes .divTitulo               { font-size: 24px; }
	#rowFormReservaSedes .divForm label           { font-size: 20px; }
	#rowFormReservaSedes .divSubmit .buttonSubmit { font-size: 24px; }
	.ui-selectmenu-button .ui-selectmenu-text     { margin-right: 5px; }
}

@media (max-width: 1080px) {
	:root {
			 	  --sede-width: calc(100% - (var(--fecha-hora-width) * 2) - var(--submit-width) - 40px);
			 	  --foto-width:  50px;
		--fecha-hora-width: 245px;
				 --fecha-width: 130px;
				--submit-width: 100px;
		  --element-height:  55px;
	}
	#rowFormReservaSedes .divSedes .divSelection             { padding: 5px 30px 5px 10px; }
	#rowFormReservaSedes .divSedes .divSelection .spanName   { font-size: 18px; }
	#rowFormReservaSedes .divSedes .divSelection .spanAdress { font-size: 13px; }
	#rowFormReservaSedes .divSedes .divSelection:after       { right: 8px; font-size: 28px; }
	#rowFormReservaSedes .fa-calendar                        { font-size: 18px; }
	#rowFormReservaSedes .inputFecha                         { padding-right: 0px; font-size: 18px; }
	#rowFormReservaSedes .fa-clock-o                         { font-size: 18px; }
	#rowFormReservaSedes .selectHora                         { padding: 5px 0px; font-size: 18px; }
	#rowFormReservaSedes .divSubmit .buttonSubmit            { font-size: 22px; }
	.ui-selectmenu-button                                    { padding: 5px 0px 5px 6px; font-size: 18px; }
	.ui-selectmenu-menu ul                                   { width: 200px; }
	.ui-selectmenu-menu li                                   { width: calc(25% - 2px); }
}

@media (max-width: 980px) {
	:root {
				  --sede-width: calc(100% - (var(--fecha-hora-width) * 2) - var(--submit-width) - 30px);
				  --foto-width:  40px;
		--fecha-hora-width: 210px;
				 --fecha-width: 120px;
	--margin-fecha-hora:    2px;
				--submit-width:  90px;
			--element-height:  50px;
	}
	#rowFormReservaSedes .divFormReservaSedes                { margin: 30px 0px; }
	#rowFormReservaSedes .divForm label                      { font-size: 18px; }
	#rowFormReservaSedes .divSedes .divSelection             { padding: 5px 25px 5px 10px; }
	#rowFormReservaSedes .divSedes .divSelection .spanName   { font-size: 16px; }
	#rowFormReservaSedes .divSedes .divSelection .spanAdress { font-size: 12px; }
	#rowFormReservaSedes .divSedes .divSelection:after       { right: 6px; font-size: 24px; }
	#rowFormReservaSedes .fa-calendar                        { font-size: 16px; }
	#rowFormReservaSedes .inputFecha                         { padding-right: 0px; font-size: 16px; }
	#rowFormReservaSedes .divHora                            { padding: 0px 5px 0px 10px; }
	#rowFormReservaSedes .fa-clock-o                         { font-size: 16px; }
	#rowFormReservaSedes .selectHora                         { font-size: 16px; }
	#rowFormReservaSedes .divSubmit .buttonSubmit            { font-size: 20px; }
	.ui-selectmenu-button                                    { font-size: 16px; }
	.ui-selectmenu-menu ul                                   { width: 150px; }
	.ui-selectmenu-menu li                                   { width: calc(33.33% - 2px); }
}

@media (max-width: 880px) {
	:root {
				  --sede-width: calc(100% - (var(--fecha-hora-width) * 2) - var(--submit-width) - 20px);
		--fecha-hora-width: 175px;
				 --fecha-width: 100px;
				--submit-width:  70px;
	}
	#rowFormReservaSedes .divSedes .divSelection .spanName   { font-size: 14px; }
	#rowFormReservaSedes .divSedes .divSelection:after       { right: 6px; font-size: 20px; }
	#rowFormReservaSedes .divSedes .ulOptions li .spanName   { font-size: 14px; }
	#rowFormReservaSedes .divSedes .ulOptions li .spanAdress { font-size: 12px; }
	#rowFormReservaSedes .fa-calendar                        { display: none; }
	#rowFormReservaSedes .inputFecha                         { padding-right: 0px; width: 100%; }
	#rowFormReservaSedes .divHora                            { padding: 0px 5px 0px 10px; }
	#rowFormReservaSedes .fa-clock-o                         { display: none; }
	#rowFormReservaSedes .selectHora                         { width: 100%; }
	#rowFormReservaSedes .divSubmit .buttonSubmit            { font-size: 18px; }
}

@media (max-width: 780px) {
	:root {
				  --sede-width:  100%;
				  --foto-width:  70px;
		--fecha-hora-width: 225px;
				 --fecha-width: 120px;
	 --margin-fecha-hora:   5px;
				--submit-width: calc(100% - (var(--fecha-hora-width) * 2) - 30px);
	}
	#rowFormReservaSedes .divForm                             { flex-wrap: wrap; }
	#rowFormReservaSedes .divRecogida                         { margin-top: 10px; }
	#rowFormReservaSedes .divDevolucion                       { margin-top: 10px; }
	#rowFormReservaSedes .divSedes .divSelection .divDatos    { display: flex; flex-wrap: wrap; }
	#rowFormReservaSedes .divSedes .divSelection .spanName    { width: 100%; font-size: 18px; }
	#rowFormReservaSedes .divSedes .divSelection .spanAdress  { padding-right: 10px; font-size: 14px; }
	#rowFormReservaSedes .divSedes .divSelection:after        { right: 8px; font-size: 24px; }
	#rowFormReservaSedes .divSedes .ulOptions li .divDatos    { display: flex; flex-wrap: wrap; }
	#rowFormReservaSedes .divSedes .ulOptions li .spanName    { width: 100%; font-size: 16px; }
	#rowFormReservaSedes .divSedes .ulOptions li .spanAdress  { padding-right: 10px; font-size: 13px; }
	#rowFormReservaSedes .fa-calendar                         { display: block; }
	#rowFormReservaSedes .fa-clock-o                          { display: block; }
	.ui-selectmenu-menu ul                                    { width: 200px; }
	.ui-selectmenu-menu li                                    { width: calc(25% - 2px); }
	#rowFormReservaSedes .divSubmit .buttonSubmit             { font-size: 24px; }
	#rowFormReservaSedes .divNotas  span                      { font-size: 14px; }
	#rowFormReservaSedes .divNotas  i.fa-info-circle          { margin-left: 0px; width: 34px; font-size: initial; }
}

@media (max-width: 680px) {
	:root {
		--fecha-hora-width: 200px;
				 --fecha-width: 115px;
	 --margin-fecha-hora:   2px;
				--submit-width: calc(100% - (var(--fecha-hora-width) * 2) - 10px);
	}
	.ui-selectmenu-menu ul                                   { width: 150px; }
	.ui-selectmenu-menu li                                   { width: calc(33.33% - 2px); }
	#rowFormReservaSedes .divSubmit .buttonSubmit            { font-size: 16px; }
}

@media (max-width: 580px) {
	:root {
		--fecha-hora-width: calc((100% - 20px) / 2);
				 --fecha-width: 120px;
	 --margin-fecha-hora:   2px;
				--submit-width: 100%;
	}
	#rowFormReservaSedes .divFormReservaSedes     { margin: 20px 0px 40px 0px; padding: 0px 10px; }
	#rowFormReservaSedes .divTitulo               { font-size: 20px; text-align: center; }
	#rowFormReservaSedes .divSedes .divSelect     { height: 60px; }
	#rowFormReservaSedes .divSedes .ulOptions li  { height: 60px; }
	#rowFormReservaSedes .divFecha                { padding: 0px 5px 0px 10px; }
	#rowFormReservaSedes .fa-calendar             { font-size: 13px; }
	#rowFormReservaSedes .inputFecha              { font-size: 15px; }
	#rowFormReservaSedes .divHora                 { padding: 0px 5px 0px 5px; }
	#rowFormReservaSedes .fa-clock-o              { display: none; }
	#rowFormReservaSedes .selectHora              { font-size: 15px; }
	#rowFormReservaSedes .divSubmit               { margin-top: 20px; }
	#rowFormReservaSedes .divSubmit .buttonSubmit { font-size: 24px; }
	.ui-selectmenu-button                         { font-size: 15px; }
	#rowFormReservaSedes .divNotas  span          { display: block; }
	#rowFormReservaSedes .divNotas  br            { display: none; }
}

@media (max-width: 480px) {
	#rowFormReservaSedes .divFormReservaSedes                { padding: 0px; }
	#rowFormReservaSedes .divSedes .divSelection .spanAdress { padding-right: 0px; width: 100%; }
	#rowFormReservaSedes .divSedes .ulOptions li .spanAdress { padding-right: 0px; width: 100%; }
	#rowFormReservaSedes .divRecogida                        { width: 100%; }
	#rowFormReservaSedes .divDevolucion                      { width: 100%; }
	#rowFormReservaSedes .divFecha                           { padding: 0px 10px; width: calc(60% - 5px); }
	#rowFormReservaSedes .fa-calendar                        { font-size: 16px; }
	#rowFormReservaSedes .inputFecha                         { font-size: 16px; }
	#rowFormReservaSedes .divHora                            { padding: 0px 10px; width: calc(40% - 5px); }
	#rowFormReservaSedes .fa-clock-o                         { display: block; font-size: 16px; }
	#rowFormReservaSedes .selectHora                         { font-size: 16px; }
	.ui-selectmenu-button                                    { font-size: 16px; }
	.ui-selectmenu-menu                                      { left: auto !important; right: 15px; }
	.ui-selectmenu-menu ul                                   { width: 200px; }
	.ui-selectmenu-menu li                                   { width: calc(25% - 2px); }
	#rowFormReservaSedes .divSubmit                          { margin-top: 20px; width: 100%; }
	#rowFormReservaSedes .divNotas  i.fa-asterisk            { font-size: 13px; }
}

@media (max-width: 380px) {
	.ui-datepicker                       { transform: scale(0.8) translate(-30px,-30px); }
	.ui-selectmenu-menu                  { transform: scale(0.8) translate(20px,-30px); }
	#rowFormReservaSedes .divNotas  span { font-size: 13px; }
}