/* 
    Created on : 08-may-2016, 10:47:10
    Author     : Jose B. Castillon Molina
*/

/** COMPONENTE DEL CALENDARIO */
.calendar{
    width: 88%;
    margin: 0 auto;
}


#micalendario .row:nth-child(2) {
    margin-top: 2em !important;
}


/**************************************************/
/**************************************************/
/*       CABECERA DEL CALENDARIO                  */
/**************************************************/
/**************************************************/


.header-calendar {
    text-align: center;
    background-color: #E52B38;
    /*padding-top: .5em;*/
    color: white;
    text-transform: uppercase;
    margin: 0 auto;
    width: 88%;
    height: 48px;
}

.header-calendar h2 {
    font-size: 36px;
    margin: 0;
}

.header-calendar button {
    background-color: transparent;
    border: 0;
}

.header-calendar button:first-child {
    margin-left: 60px;
}

.header-calendar button:last-child {
    margin-right: 60px;
}



.header-calendar .calendar-prev {
    background-color: transparent;
    border-color: transparent;
    text-shadow: none;
    box-shadow: none;   
    background-size: 30px 18px;
    background-repeat: no-repeat;
    width: 30px;
}

.header-calendar .calendar-next {
    background-color: transparent;
    border-color: transparent;
    text-shadow: none;
    box-shadow: none;   
    background-size: 30px 18px;
    background-repeat: no-repeat;
    width: 30px;
}


/* CABECERA DEL CALENDARIO */
.fc-toolbar {
    text-align: center;
    background-color: #E52B38;
    padding-top: .5em;
    color: white;
    text-transform: uppercase;
    margin-bottom: 0px;
    display: none;
}

/* AUMENTA TAMANO DEL TITULO (MES Y AGNO) DEL CALENDARIO */
.fc-center h2 {
    font-size: 36px;
}

/* PARA CAMBIAR EL ASPECTO DEL BOTON DE RETROCEDER DE MES */
.fc-prev-button {
    background-color: transparent !important;
    border-color: transparent;
    text-shadow: none;
    box-shadow: none;   
    background-image: url('images/double-arrow-left.png');
    background-size: 30px 18px;
    background-repeat: no-repeat;
    width: 30px;
}

/* PARA CAMBIAR EL ASPECTO DEL BOTON DE AVANZAR DE MES */
.fc-next-button {
    background-color: transparent !important;
    border-color: transparent;
    position: absolute;
    background-image: url('images/double-arrow-right.png');
    text-shadow: none;
    box-shadow: none; 
    background-size: 30px 18px;
    background-repeat: no-repeat;
    width: 30px;
}

/* PARA CENTRAR VERTICALMENTE LOS BOTONES PREV Y NEXT EN LA CABECERA */
.fc-left, .fc-right {
    padding-top: 6px;
}

/* PARA QUE NO SE MUESTREN LOS ICONOS ORIGINALES DE LOS BOTONES PREV Y NEXT */
.fc-prev-button span, .fc-next-button span {
    display: none;
}

/* PARA SEPARAR DEL MARGEN EL BOTON PREV */
.fc-left {
    margin-left: 60px;
}

/* PARA SEPARAR DEL MARGEN EL BOTON NEXT */
.fc-right {
    margin-right: 60px;
}


/**************************************************/
/**************************************************/
/*           LEYENDA DEL CALENDARIO               */
/**************************************************/
/**************************************************/


/* PARA OCULTAR LA CABECERA DE LAS COLUMNAS */
.fc-head {
    display: none;
}

#leyenda {
    margin-bottom: 1em;
}

/* PARA DAR ESPACIO ALREDEDOR A LA LEYENDA */
.legendDiv {
    margin: 0 20px 0 0;
}

/* SEPARACION ENTRE EL CUADRO Y EL TEXTO EN LA LEYENDA */
.legendDiv .legendImg {
    margin-right: .5em;
}

/* CUADRO DE LA LEYENDA */
.legendImg{
    margin-right: 1em;
    width: 30px;
    height: 20px;   
    float: left;
}

/* COLOR PARA DIAS FESTIVOS (NO INCLUYE FIN DE SEMANA) */
.legendFestivo {
    background-color: #B6B9BA;
}

/* COLOR PARA DIAS DE VACACIONES */
.legendVacas {
    background-color: rgba(0, 128, 0, 1);
}

/* COLOR PARA DIAS DE MEDIA JORNADA */
.legendMediaJorn {
    background-color: rgba(255, 255, 0, 1);
}


/**************************************************/
/**************************************************/
/*     TABLA CON LOS DIAS DEL CALENDARIO          */
/**************************************************/
/**************************************************/

div.fc-week {
    height: 100px !important;
}

/* QUITAR LINEAS SEPARADORAS ENTRE CELDAS DE DIAS Y EL BORDE ALREDEDOR DEL CALENDARIO*/
.fc-row td, .ui-widget-content {
    border: none !important;
    /*border-bottom: 0 !important;*/
}

/* QUITAR BORDES A LO LARGO DE LA SEMANA ENTRE EL DIA Y EL NOMBRE DEL DIA */
.calendar thead {
    border: 0 !important;
}

.fc-scroller {
    overflow:hidden !important;
}

/** NUMERO DEL DIA DE LA CELDA **/
.fc-day-number {
    font-size: 2.4em;
    padding: 13px 0 0 10px !important;
    text-align: left !important;
    color: #000 !important;
}

/* ESTILO Y POSICION DEL NOMBRE DEL DIA DE LA SEMANA EN UNA CELDA (EXCEPTO FIN DE SEMANA) */
.nameDay {
    position: relative;
    height: 62%;
    width: 60%;
    padding-left: 10px;
    color: #000;
    background-color: transparent;
    z-index: 100;
}

.noPdte {
    position: absolute;
    top: 0;
    bottom: 38px;
    width: 80px;
    overflow: hidden;
}

.pdte {
    position: absolute;
    top: 0;
    bottom: 38px;
    width: 80px;
    animation: 
        nudge 2s ease infinite alternate 
}

.legendPend {
    background-color: black;
    animation: 
        nudge 2s ease infinite alternate;
}

.nameDay div {
    position: absolute;
    bottom: 0;
    font-size: 1.5em;
    padding: 0;
    display: inline-block;
}

/* ESTILO Y POSICION DE LA HORA DE TRABAJO EN UNA CELDA */
.horaDay {
    position: relative;
    height: 38%;
    padding-left: 10px;
    padding-top: 1px;
    font-size: 1.1em;
    color: #000;
    margin-right: 40px;
    bottom: 0;
    line-height: 100%;
}

/* ESTILO Y POSICION DEL NOMBRE DEL DIA DE LA SEMANA EN UNA CELDA (PARA FIN DE SEMANA) */
.nameDayWeekend {
    position: relative;
    height: 62%;
    width: 60%;
    padding-left: 10px;
    color: red;
    background-color: transparent;
    z-index: 100;
}

.nameDayWeekend div {
    position: absolute;
    bottom: 0;
    font-size: 1.5em;
    padding: 0;
    display: inline-block;
}



/* DIVISORIA DE LAS SEMANAS*/
.fc-week {
    border-top: 1px #000 solid !important;
}

/* COLOR ROJO PARA EL TEXTO DE LOS FINES DE SEMANA */
.fc-sat, .fc-sun {
    color: red !important;
}

/* OPACIDAD PARA EL NUMERO DE LOS DIAS QUE SON DEL MES ANTERIOR Y DEL MES SIGUIENTE */
.fc-other-month .fc-day-number, .fc-other-month {
    opacity: 1 !important;
    /*cursor: default !important;*/
}

.fc-day-number {
    opacity: 1;
}

/** ALINEACION VERTICAL DENTRO DE LAS CELDAS DE DIAS */
.fc-day {
    vertical-align: top;
    height: 100%;
}

/** PUNTERO AL PASAR POR ENCIMA DEL CALENDARIO */
.fc-day-grid {
    cursor: pointer !important;
}


/** POSICION DE CELDAS A PINTAR */
.cellVacas, .cellVacasPend, .cellFlotante, .cellFlotantePend  {
    padding-right: 40px;
    margin-right: 0px;
}

/** COLORES PARA CELDAS DE VACACIONES */
.cellVacas, .cellVacasLast {
    /*background-color: rgba(0, 128, 0, 1) !important;*/
}

/** COLORES PARA CELDAS DE VACACIONES PENDIENTES */
.cellVacasPend, .cellVacasPendLast {
    /*background-color: rgba(0, 128, 0, 0.4) !important;*/
}

/** COLORES PARA CELDAS DE MEDIA JORNADA */
.cellFlotante, .cellFlotanteLast {
    /*background-color: rgba(255, 255, 0, 1) !important;*/
}

/** COLORES PARA CELDAS DE MEDIA JORNADA PENDIENTE */
.cellFlotantePend, .cellFlotantePendLast {
    /*background-color: rgba(255, 255, 0, 0.4) !important;*/
}


/** COLOR PARA LA SELECCION DE DIAS **/
.fc-highlight-skeleton .fc-highlight {
    background-color: #E52B38;
}

/**************************************************/
/**************************************************/
/*                  ANIMACIONES                   */
/**************************************************/
/**************************************************/

/** ANIMACION PARA CUBRIR EL CALENDARIO MIENTRAS SE CARGAN LOS DATOS **/
.cortina.ng-hide {
    animation: 0.5s toDown;
}

.cortina:not(.ng-hide) {
    animation: 0.5s toTop;
}

@keyframes toDown {
    from {
        bottom: 0%;
    } to {
        bottom: 100%;
    }
}

@keyframes toTop {
    from {
        bottom: 100%;
    } to {
        bottom: 0%;
    }
}

/** ANIMACION PARA EL COLOR DE LOS DIAS PENDIENTES **/


@keyframes nudge {
    0% {
        opacity: 1;
    }

    50% {
        opacity: .2;
    }

    100% {
        opacity: 1;
    }
}



.noPdte:before, .noPdte:after {
    display: block;
    position: absolute;
    width: 18px;
    height: 18px;
    top: 0;
    right: 0;
    content: "";
}
.noPdte:before {
    width: 0px;
    height: 0px;
    border-top: solid 9px whitesmoke;
    border-right: solid 9px whitesmoke;
    border-left: solid 9px whitesmoke;
    border-bottom: solid 9px whitesmoke;
}
.noPdte:after {
    width: 0px;
    height: 0px;
    border-bottom: solid 9px #001a00;
    border-left: solid 9px #001a00;
    border-right: solid 9px whitesmoke;
    border-top: solid 9px whitesmoke;
    box-shadow: -1px 1px 5px #212835;
}