.align-right {
    text-align: right !important;
    float: right !important;
}
.align-center {
    text-align: center !important;
    float: center !important;
}
.bg-comb {
    background: image(../assets/svg/components/wave-pattern.svg);
}
.width4rem {
    width: 4rem;
}
.width15rem {
    width: 15rem;
}
.navbar-brand-logo {
    margin: 0 20px;
}
a.idioma  {
    background: #00cbc1;
    color: #FFF;
    font-weight: bolder;
    padding: 10px;
}
.underline {
    text-decoration: underline !important;
    cursor: pointer;
}
.rdtPicker {
    display: none;
    position: absolute;
    min-width: 150px;
    padding: 4px;
    margin-top: 1px;
    z-index: 99999 !important;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
    border: 1px solid #f9f9f9;
    font-size: 11px;
  }
  .card table > :not(caption) > * > * {
    padding-right: 0.75rem;
    padding-left: 0.75rem;
  }
  .card table > tbody > tr:first-child > td {
    padding-top: 0.75rem;
  }
  .card table > tbody > tr:last-child > td {
    padding-bottom: 0.75rem;
  }
  .rbc-ellipsis, .rbc-show-more, .rbc-row-segment .rbc-event-content, .rbc-event-label {
    white-space: normal !important;
    font-size: 12px;
  }

  .Incidencia
  {
    background: #e44554;
    color:white;

  }
  .Incidencia a
  {
    color:white;
  }

  .Vacances
  {
    background: #deb307;
    color:black;

  }
  .Vacances a
  {
    color: #FFF;
  }

  .CapSetmana
  {
    background: #EFEFEF;

  }

  .CapSetmana a
  {
    color:#00cbc1;

  }
  .DiaAvui
  {
    background: #00cbc1;
    color:white;

  }
  .DiaAvui a
  {
 
    color:white;
    font-weight: bold;

  }


  .DiaFestiu
  {
    background: #CCC;
    color:black;

  }
  .DiaFestiu a
  {
    color: #FFF;
  }


  /*PART MODALS*/


  
  .loader-screen {
    display: flex;

    justify-content: center; 
    align-items: center; /* Centrar verticalment */
  }
.calendar-screen{
  display: flex;
  flex-flow: column;
  height: 100vh;
}

.rbc-calendar {
  height: 100%;
}

/* Modal */
.ReactModalPortal > div{
  opacity: 0;
}

.ReactModalPortal .ReactModal__Overlay {
  align-items: center;
  display: flex;
  justify-content: center;
  transition: opacity .2s ease-in-out;
  z-index: 999;
}

.modal-fondo {
  background-color: rgba(0, 0, 0, 0.3);
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  position: fixed;
}

.ReactModalPortal .ReactModal__Overlay--after-open {
  opacity: 1;
}

.ReactModalPortal .ReactModal__Overlay--before-close {
  opacity: 0;
}

/* aixo es per que nomes afecti al model del calendari */
.modal#modalCalendar {
  background: white;
  border-radius: 5px;
  color: rgb(51, 51, 51);
  display: inline;
  max-height: 620px;
  max-width: 500px;
  outline: none;
  padding: 10px;
}


.modal#modalDiaAnterior {
  background: white;
  border-radius: 5px;
  color: rgb(51, 51, 51);
  display: inline;
  max-height: 620px;
  max-width: 500px;
  outline: none;
  padding: 10px;
}

/* Datepicker */
.react-datetime-picker input:focus {
  outline: none;
}

.react-datetime-picker__wrapper {
  border: 0px solid gray !important;
}

/* FABS */
.fab {
  border-radius: 100%;
  bottom: 25px;
  font-size: 30px;
  padding: 25px;
  position: fixed;
  right: 25px;
}

.fab-danger {
  bottom: 25px;
  padding: 10px;
  position: fixed;
  left: 25px;
}
.text-aqua {
  color:#00cbc1;
}
.visible-xs {
  display: none!important;
}
@media (max-width:767px){
	.hidden-xs{
		display: none !important;
			}
  .visible-xs{
    display: block !important;
       }