/* ScrollBar styles */
/* width */
::-webkit-scrollbar {
  height: 10px;
}
/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgb(220, 220, 220); 
  border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: rgb(200, 200, 200); 
  border-radius: 10px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: rgb(170, 170, 170); 
}

.fc-dayGridMonth-view .course-selected.fc-daygrid-dot-event .html-event-title{
  border: 3px solid #00c9a785 !important;
  width: auto !important;
}
.fc-dayGridMonth-view .course-selected.fc-daygrid-block-event .html-event-title{
  border: 3px solid #00c9a785 !important;
}

.fc-listWeek-view .course-selected .html-event-title{
  border: 5px solid #00c9a785 !important;
}
.calendar-container {
  overflow-x: scroll;
}
/*
.calendar-container .table{
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}
*/

.calendar-escolaport-icon{
  width: 20px;
}
.container-calendarios-loader{
  position: fixed !important;
  width: 100% !important;
  height: 100%;
  top: 0;
  left: 0;
  background-color: white;
  z-index: 9999;
}
.calendarios-loader{
  position: relative;
  top: 43%;
  left: 46%;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

  /* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/*
MAIN MENU
*/
#menu-filters .button {
  text-decoration: none;
}
/*
END MAIN MENU
*/

/*
SIDEBAR FILTERS
*/
#sidebar-filters ul li{
  list-style-type: none;
}
#sidebar-filters ul li a{
  text-decoration: none;
}
#sidebar-filters ul li:not(.is-active) a.navbar-item:hover{
  background-color: #c7e0e4 !important;
  color: #101218 !important;
}
#sidebar-filters ul li.is-active a.navbar-item{
  background-color: #6a9bb0 !important;
  color: #ffffff !important;
  font-weight:700;
}
#sidebar-filters ul li:focus{
  background-color: #6a9bb0;
  color: #ffffff
}
/*
END SIDEBAR FILTERS
*/

/*
TABLE COURSE FILTERS
*/
#submenu-filters .course a{
  padding: 0.2em 1em !important;
  text-decoration: none !important;
  font-weight:700;
}
/*
END TABLE COURSE FILTERS
*/

/*
TABLE LIST COURSES
*/
.calendar-courses .table th{
  text-transform: uppercase;
}
#menu-filters a.button{
  border-radius: 3px !important;
  text-transform: uppercase;
  font-weight: 700;
}
.tabs li.is-active a{
  border-bottom-width: 3px !important;
}
.calendar-courses .table {
  background-color: inherit !important;
}
#session-list.box{
  box-shadow: initial !important;
}
#session-list .box{
  max-width: 500px;
  margin: 0 auto 2em;
  box-shadow: initial !important;
}
#session-list p{
  margin-bottom: 1em;
}
#session-list .title-session{
  font-size: 20px;
  font-weight: bold;
  color: #1B1B1B;
}
button.show-calendar{
  background-color: #4e93a4;
  border-color: #4e93a4;
  color: #fff;
  transition: 300ms;
}
button.show-calendar:hover{
  background-color: #3a6380 !important;
  color: #f3f5f5 !important;
}
/*
END TABLE LIST COURSES
*/

/*
BOOKING RESUME
*/
.notification.is-success {
  background-color: #c7e0e4 !important;
  color: #101218 !important;
}
.button.book-action{
  background-color: #EC6A48 !important;
  color: white !important;
}

#resume-selection .notification.is-danger,
#modal-booking-action .notification.is-danger{
  background-color: #ec6a484d !important;
  color: #EC6A48 !important;
}
#modal-booking-action.modal{
  z-index: 999;
}
/*
END BOOKING RESUME
*/
.popper,
.tooltip {
  position: absolute;
  z-index: 9999;
  background: #499bb1;
  color: white;
  width: 150px;
  border-radius: 3px;
  box-shadow: 0 0 2px rgba(0,0,0,0.5);
  padding: 10px;
  text-align: center;
}
.style5 .tooltip {
  background: #1E252B;
  color: #FFFFFF;
  max-width: 200px;
  width: auto;
  font-size: .8rem;
  padding: .5em 1em;
}
.popper .popper__arrow,
.tooltip .tooltip-arrow {
  width: 0;
  height: 0;
  border-style: solid;
  position: absolute;
  margin: 5px;
}

.tooltip .tooltip-arrow,
.popper .popper__arrow {
  border-color: #499bb1;
}
.style5 .tooltip .tooltip-arrow {
  border-color: #1E252B;
}
.popper[x-placement^="top"],
.tooltip[x-placement^="top"] {
  margin-bottom: 5px;
}
.popper[x-placement^="top"] .popper__arrow,
.tooltip[x-placement^="top"] .tooltip-arrow {
  border-width: 5px 5px 0 5px;
  border-left-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  bottom: -5px;
  left: calc(50% - 5px);
  margin-top: 0;
  margin-bottom: 0;
}
.popper[x-placement^="bottom"],
.tooltip[x-placement^="bottom"] {
  margin-top: 5px;
}
.tooltip[x-placement^="bottom"] .tooltip-arrow,
.popper[x-placement^="bottom"] .popper__arrow {
  border-width: 0 5px 5px 5px;
  border-left-color: transparent;
  border-right-color: transparent;
  border-top-color: transparent;
  top: -5px;
  left: calc(50% - 5px);
  margin-top: 0;
  margin-bottom: 0;
}
.tooltip[x-placement^="right"],
.popper[x-placement^="right"] {
  margin-left: 5px;
}
.popper[x-placement^="right"] .popper__arrow,
.tooltip[x-placement^="right"] .tooltip-arrow {
  border-width: 5px 5px 5px 0;
  border-left-color: transparent;
  border-top-color: transparent;
  border-bottom-color: transparent;
  left: -5px;
  top: calc(50% - 5px);
  margin-left: 0;
  margin-right: 0;
}
.popper[x-placement^="left"],
.tooltip[x-placement^="left"] {
  margin-right: 5px;
}
.popper[x-placement^="left"] .popper__arrow,
.tooltip[x-placement^="left"] .tooltip-arrow {
  border-width: 5px 0 5px 5px;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  right: -5px;
  top: calc(50% - 5px);
  margin-left: 0;
  margin-right: 0;
}

/*
Spinner
*/
.loader-reservas {
  position: absolute;
  top: 43%;
  left: 43%;
  z-index: 1;

  width: 48px;
  height: 48px;
  border: 5px solid #000;
  border-bottom-color: transparent;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}

@keyframes rotation {
  0% {
      transform: rotate(0deg);
  }
  100% {
      transform: rotate(360deg);
  }
}

.disabled{
  pointer-events: none;
  opacity: 0.5;
}

/*
FULL CALENDAR custom styles
*/
.fc-col-header {
  margin-bottom: 0 !important;
}
.fc-event{
  cursor: pointer;
}
.fc-dayGridMonth-view .fc-event .fc-event-time,
.fc-listWeek-view .fc-event .fc-list-event-time,
.fc-listWeek-view .fc-list-event-graphic{
  display: none;
}
.fc-event .html-event-title{
  width: 100%;
}
.fc-event .html-event-title p{
  margin: 0 !important;
}
.fc-event .html-event-title,
.fc-event .html-event-title p span{
  font-size: 12px !important;
  white-space: normal !important;
  overflow: visible !important;
  height: auto !important;
  padding: 5px;
  display: inline-block;
}
.fc-event.disable-course-selection-places,
.fc-event.disable-course-selection,
.fc-event.roca-1-selected,
.fc-event.roca-2-selected,
.fc-event.roca-3-selected{
  pointer-events: none;
  opacity: 0.5;
}
.fc-day-disabled .fc-daygrid-day-top,
.fc-day-disabled .fc-daygrid-day-events,
.fc-day-disabled .fc-daygrid-day-bg{
    display: none;
}
button.fc-today-button[disabled]{
  display: none;
}
.fc-event .event-public-name{
  font-weight: bold;
}
.fc-event .event-availability{
  background-color: #fffffff0;
  display: inline-block;
  padding: 0 0.3em;
  font-weight: bold;
}
.fc-event .event-availability-available{
  color: green;
}
.fc-event .event-availability-last,
.fc-event .event-availability-full{
  color: red;
}
/*
END FULL CALENDAR custom styles
*/

/*
 MODAL CALENDAR
*/
#calendar .fc-day a{
  text-decoration: none;
}
.modal-calendar-sessions-action{
  z-index: 9999;
}

@media screen and (min-width: 1281px) {
  .modal-calendar-sessions-action .modal-content{
    width: 70%;
  }
}

@media screen and (max-width: 1280px) {
  .modal-calendar-sessions-action .modal-content{
    width: 100%;
  }
}