@import "./variables.css";

#last-session #liveiframediv .liveiframelabel{padding-bottom: 5px;font-size: 22px;font-weight: bold;}
#last-session #liveiframediv .liveiframelabel .label{background-color:#A20000;font-size: .7em;padding: 3px 15px;font-weight: normal;}
#last-session #liveiframediv iframe{ max-width: 100%;max-height: auto;}

#session-detail #liveiframediv .liveiframelabel{padding-bottom: 5px;font-size: 22px;}
#session-detail #liveiframediv .liveiframelabel .label{background-color:#b60505;font-size: .7em;padding: 2px 12px;}
#session-detail #liveiframediv iframe{ max-width: 100%;max-height: auto;}

/* CAP */
#grailsLogo{padding-left: 0px;padding-right: 0px;}
#grailsLogo .img-responsive{height: 75px !important  ;width: auto;}
#header{padding-top:5px;padding-bottom:5px;}
#header img {min-height: 30px;}

.btn-detail{color:var(--btn-color); border-color: var(--btn-border-color);background-color: var(--btn-background-color); border-width: 2px; border-radius: 3px; font-weight: 600;}
.btn-detail:HOVER{background-color:var(--btn-background-color-hover); border-color: var(--btn-border-color-hover); color:var(--btn-color-hover);}


/****************************/
/*			Header			*/
/****************************/
/* SEARCH BAR */

#search{background-color: var(--main-color);}
#search button{background-color: var(--search-btn-background-color); color:var(--search-btn-color); border-color:var(--search-btn-border-color); border-width: 2px; border-radius: 3px}
#search button:hover{background-color: var(--search-btn-background-color-hover); color: var(--search-btn-color-hover);border-color: var(--search-btn-border-color-hover);}

#search a.btnHelp{background-color: var(--search-btn-help-background-color); color:var(--search-btn-help-color); border-color:var(--search-btn-help-border-color); border-width: 2px;}
#search a.btnHelp:hover{background-color: var(--search-btn-help-background-color-hover); color: var(--search-btn-help-color-hover);border-color: var(--search-btn-help-border-color-hover);}

#search label.top-text {color: var(--search-label-text);}

/*CURRENT DAY*/
.datepicker td.active, .datepicker td.active:hover { background-image: none !important; background-color: var(--calender-current-date-color) !important;}

/*CURRENT MONTH OR YEAR */
.datepicker td span.active { background-image: none ; background-color: var(--calender-current-date-color) !important;}

/*HOVER DAY */
.datepicker td.day:hover { background: var(--calendar-backround-hover) !important; color: var(--calendar-hover-text-color) !important;}

/* Hover MONTH */
.datepicker td span:hover { background: var(--calendar-backround-hover) !important; color: var(--calendar-hover-text-color) !important;}


/* Barra de canvi de mes datepicker */
.datepicker.dropdown-menu{padding: 0px; margin: 0px;}
.datepicker .datepicker-days table thead tr:FIRST-CHILD{background-color: var(--calender-panel-btn-color);}
.datepicker .datepicker-days table thead tr:FIRST-CHILD th{color: var(--calender-panel-text-color);-webkit-border-radius: 0px;-moz-border-radius: 0px;border-radius: 0px;}
.datepicker .datepicker-days table thead tr:FIRST-CHILD th:HOVER{background-color: var(--calender-panel-btn-color-hover); color:var(--calender-panel-text-color-hover);transition: 0.1s;}
.datepicker .datepicker-days table thead tr th.dow{background-color: #333; color: #fff;-webkit-border-radius: 0px;-moz-border-radius: 0px;border-radius: 0px;}

.datepicker .datepicker-months table thead tr:FIRST-CHILD{background-color: var(--calender-panel-btn-color);}
.datepicker .datepicker-months table thead tr:FIRST-CHILD th{color:var(--calender-panel-text-color);-webkit-border-radius: 0px;-moz-border-radius: 0px;border-radius: 0px;}
.datepicker .datepicker-months table thead tr:FIRST-CHILD th:HOVER{background-color: var(--calender-panel-btn-color-hover); color:var(--calender-panel-text-color-hover);transition: 0.1s;}

.datepicker .datepicker-years table thead tr:FIRST-CHILD{background-color: var(--calender-panel-btn-color);}
.datepicker .datepicker-years table thead tr:FIRST-CHILD th{color: var(--calender-panel-text-color);-webkit-border-radius: 0px;-moz-border-radius: 0px;border-radius: 0px;}
.datepicker .datepicker-years table thead tr:FIRST-CHILD th:HOVER{background-color: var(--calender-panel-btn-color-hover); color:var(--calender-panel-text-color-hover);transition: 0.1s;}



/* LISTA SESIONES */
/*  Sessio principal de la pagina */
#last-session #session-info #last-session-label .label {background-color: var(--last-session-label); color: var(--last-session-label-color);}
#last-session #session-info #last-session-title {padding: 10px; border-left: var(--last-session-border-left) solid 6px; border-bottom: 1px solid #999;}
#last-session #session-info .btn-detail{color: var(--last-session-btn-color); border-color: var(--last-session-btn-border-color);background-color:var(--last-session-btn-background-color); border-width: 2px; border-radius: 3px; font-weight: 500;}
#last-session #session-info .btn-detail:HOVER{background-color: var(--last-session-btn-background-color-hover); border-color:var(--last-session-btn-border-color-hover); color:var(--last-session-btn-color-hover);}

/* Resta de sessions */
#sessionsList .session-box {border-left: var(--session-box-border-left) solid 6px; border-radius: 3px;}
#sessionsList .session-box .btn-detail{color: var(--session-box-btn-color); border-color: var(--session-box-btn-border-color);background-color: var(--session-box-btn-background-color); border-width: 2px; border-radius: 3px; font-weight: 500;}
#sessionsList .session-box .btn-detail:HOVER{background-color: var(--session-box-btn-background-color-hover); border-color: var(--session-box-btn-border-color-hover); color:var(--session-box-btn-color-hover);}
#sessionsList .session-box span:before{font-weight: bold; font-size: 1.2em}

/* Boton veure més sessions */
#show-more-session #showMoreButton {color: var(--btn-show-more-color); border-color: var(--btn-show-more-border-color) ;background-color: var(--btn-show-more-background-color); border-width: 2px; border-radius: 3px; font-weight: 500;}
#show-more-session #showMoreButton:HOVER{background-color: var(--btn-show-more-background-color-hover); color:var(--btn-show-more-color-hover);border: 2px solid var(--btn-show-more-border-color-hover);}

/* SEARCH RESULT PAGE */
/* Boto tornar portada */
#breadcrumbs ol.breadcrumb a{color: var(--breadcrump-color);}
#breadcrumbs ol.breadcrumb a:HOVER{text-decoration: underline;}
/* Botons sessions cercades */
#session-searchresult .session-box .btn-detail{color:var(--session-box-btn-color); border-color: var(--session-box-btn-border-color);background-color: var(--session-box-btn-background-color); border-width: 2px; border-radius: 3px; font-weight: 600;}
#session-searchresult .session-box .btn-detail:HOVER{background-color:var(--session-box-btn-background-color-hover); border-color: var(--session-box-btn-border-color-hover); color:var(--session-box-btn-color-hover);}
#session-searchresult .session-box span:before{font-weight: bold; font-size: 1.2em}
/* Nombre de resultats */
#session-searchresult .badge{background-color: var(--main-color);}
/* Fons 'info de la recerca' i estil */ 
#session-searchresult .searchInfo{border-bottom:1px solid #D0D0D0;padding-bottom: 5px;}
#session-searchresult .searchInfo a{line-height: 1em; font-size: 0.90em;color: var(--main-color);cursor: pointer;font-weight: 200;}
#session-searchresult .searchInfo a:HOVER{color: #000;text-decoration: underline;}


/* DETALLES DE SESION */
/* Barra documents */
#session-detail #sesion-document-list #docs-title {background-color: var(--docs-title-backround-color);}
/* Boto Index del video o Intervencions, actiu */
#video-index #video-index-controls .btn.active {background-color:var(--btn-background-color);}
#video-index #video-index-controls .btn:focus {outline: none}

/* Signatura video estil */
#session-detail #videoSignatureBtn{margin: 0.8em 0em;}
#session-detail #videoSignatureBtn button.btn-link{color: var(--sign-link);padding: 4px 6px;}

/* Botons dins de la signatura del video */
.modalSignatures .modal-body .tabFirmas ul li.active a.tabFirmaBtn {background-color: var(--sign-label); color: var(--sign-btn-color);}
.modalSignatures .modal-footer .btn-signature{border-color: var(--sign-btn-border-color); background-color: var(--sign-btn-background-color); color: var(--sign-btn-color);}
.modalSignatures .modal-footer .btn-signature:HOVER{background-color:var(--sign-btn-background-color-hover); color: var(--sign-btn-color-hover); border-color: var(--sign-btn-border-color-hover);}
/* Boto validesa signatura */
.modalSignatures .modal-body a.btn{border-color: var(--sign-btn-border-color); background-color:var(--sign-btn-background-color); color: var(--sign-btn-color)}
.modalSignatures .modal-body a.btn:HOVER{background-color: var(--sign-btn-background-color-hover); color: var(--sign-btn-color-hover); border-color: var(--sign-btn-border-color-hover);}

/* Veure signatura documents */
#session-detail #sesion-document-list .doc-div button{font-size: 0.75em;padding: 3px 5px;color:var(--sign-link);margin-top: 5px;}



/* botones play desde css si se quiere poner botones          */
/* personalizados desde imagenes comenta las siete lineas    */
/* de abajo y descomenta los estilos que tienen la imagen play */ 

#video-index #indiceVideo .topic-interventions .play-intervention, #video-index #indiceVideo .topic-row .play-link{width: 40px; height: 40px;}
#video-index #indiceVideo .topic-interventions .play-intervention, #video-index #indiceVideo .topic-row .play-link,#intervenciones .play-intervetion{display: inline-block; position: relative;  border-radius: 20px; border: 4px solid var(--play-border-color); background: transparent; }
#video-index #indiceVideo .topic-interventions .play-intervention::before, #video-index #indiceVideo .topic-row .play-link::before,#intervenciones .play-intervetion::before { content: ""; display: inline-block; position: absolute; width: 0; height: 0; border-bottom: 10px solid transparent; border-top: 10px solid transparent; border-left: 16px solid var(--play-triangle-color); top: 20%; left: 32%;}
#video-index #indiceVideo .topic-interventions .play-intervention:hover, #video-index #indiceVideo .topic-row .play-link:hover, #intervenciones .play-intervetion:hover { border-color: var(--play-border-color-hover); background: transparent; width: 40px; height: 40px;}
#video-index #indiceVideo .topic-interventions .play-intervention:hover::before, #video-index #indiceVideo .topic-row .play-link:hover::before,#intervenciones .play-intervetion:hover::before{ border-left-color:var(--play-triangle-color-hover) ;}
#intervenciones .play-intervetion,#intervenciones .play-intervetion:hover {width: 30px; height: 30px;}
#intervenciones .play-intervetion::before{border-bottom-width: 8px; border-top-width: 8px ; border-left-width: 12px;top: 16%; left: 30%;}



/* Badge i temps index del video */

#video-index #indiceVideo .topic-row:HOVER .topic-title-row .badge{background-color: var(--topic-background-hover);}
#video-index #indiceVideo .topic-row:HOVER .topic-detaills .timeSpan-box{border: 1px solid var(--topic-border-hover); color: var(--topic-color-hover);background-color: var(--topic-background-hover);}

/* Badge i temps intervencions del index del video */
#video-index #indiceVideo .topic-interventions .topic-intervention-row:HOVER .badge{background-color: var(--intervencion-background-hover);}
#video-index #indiceVideo .topic-interventions .topic-intervention-row:HOVER span.intervention-block{color: var(--intervencion-background-hover);}
#video-index #indiceVideo .topic-interventions .topic-intervention-row:HOVER .timeSpan-box{border: 1px solid var(--intervencion-border-hover); color: var(--intervencion-color-hover);background-color: var(--intervencion-background-hover);}

/* Apartats intervencions */
#intervenciones .indexTema:HOVER .timeSpan{border: 1px solid var(--intervencion-border-hover); color: var(--intervencion-color-hover);background-color: var(--intervencion-background-hover);}
#intervenciones .timeIntervention:HOVER .timeSpan{border: 1px solid var(--intervencion-border-hover); color: var(--intervencion-color-hover);background-color: var(--intervencion-background-hover)}
#intervenciones .timeIntervention:HOVER .glyphicon-user{color: var(--icon-user-color-hover);}
#intervenciones .timeIntervention:HOVER .glyphicon-comment{color: var(--icon-user-color-hover);}


/*FIcha de miembros */
#councilorTab-detail .councilor-sesions .btn-detail{color: var(--session-box-btn-color); border-color: var(--session-box-btn-border-color);background-color: var(--session-box-btn-background-color); border-width: 2px; border-radius: 3px; font-weight: 500;}
#councilorTab-detail .councilor-sesions .btn-detail:hover{background-color: var(--session-box-btn-background-color-hover); border-color: var(--session-box-btn-border-color-hover); color:var(--session-box-btn-color-hover);}
#councilorTab-detail .session-box span:before{font-weight: bold; font-size: 1.2em}

/* LOGIN */
/* Barra superior */
#layout_login #grey-nav{background-color:var(--main-color);}
/* Boto login */
#layout_login #login .btn{color: var(--btn-color);background-color: var(--btn-background-color); border: 2px var(--btn-border-color) solid; border-radius: 3px; font-weight: 500;}
#layout_login #login .btn:hover{background-color: var(--btn-background-color-hover); color:var(--btn-color-hover);border-color: var(--btn-border-color-hover);}
#layout_login #login .forgotPassword a{color:var(--a-recover-password);}

#layout_login .nav ul li{list-style: none;}
#layout_login .nav ul li a{color: #fff;}
#layout_login .nav ul li a:HOVER{color: #FFF;text-decoration: underline;}
#layout_login #footer #w3c-logos{display: none;}



/* FOOTER */
#footer{padding: 1em 1em 1em 1em;background-color: #333333;}
#footer #ayun-contact a{color: #fff;}
#footer #ayun-info p{color: #fff;}

#footer #ayun-contact a{font-weight:bold;margin-bottom: 5px;text-align: center;}
#footer #ayun-contact p{margin-bottom: 0px;font-size: 1em; text-align: center;}
#footer #ayun-contact a:HOVER{text-decoration: underline;}
#footer #ayun-contact a.aj-link{color: #adadad; font-weight:300; font-size: 1.2em;}

#footer #ava-info #ava-brand .white-bull{font-size: 40px;line-height: 10px;vertical-align: sub;padding-right: 2px;}
#footer #ava-info #ava-brand .audio{color: #8c8c8c;font-weight: normal;font-size: 1em;}
#footer #ava-info #ava-brand .video{color: #adadad;font-weight: normal;font-size: 1em;}
#footer #ava-info #ava-brand .actas{color: #f2f2f2;font-weight: normal;font-size: 1em;}

#footer #ava-info span.desenvolupatby{font-size: 0.9em;color: #adadad;}
#footer #ava-info a.semiclink{font-size: 1em;}
#footer #ava-info a.semiclink:HOVER{text-decoration: underline;}
#footer #ayun-logo img{padding-top: 10px;padding-bottom: 10px;max-height: 140px; width: 60%; }