.ui-timepicker-container {
    position: absolute;
    overflow: hidden;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

.ui-timepicker {
    -webkit-box-sizing: content-box;
            box-sizing: content-box;
    display: block;
    height: 205px;
    list-style: none outside none;
    margin: 0;
    padding: 0 1px;
    text-align: center;
}

.ui-timepicker-viewport {
    -webkit-box-sizing: content-box;
            box-sizing: content-box;
    display: block;
    height: 205px;
    margin: 0;
    padding: 0;
    overflow: auto;
    overflow-x: hidden; /* IE */
}

.ui-timepicker-standard {
    /* overwrites .ui-widget-content */
    background-color: #FFF;
    border: 1px solid #AAA;
    color: #222;
    /* overwrites .ui-menu */
    margin: 0;
    padding: 2px;
}

.ui-timepicker-standard a {
    border: 1px solid transparent;
    color: #222;
    display: block;
    padding: 0.2em 0.4em;
    text-decoration: none;
    font-size: 0.95em;
}

.ui-timepicker-standard .ui-state-hover {
    /* overwrites .ui-state-hover */
    background-color: #DADADA;
    border: 1px solid #999;
    font-weight: normal;
    color: #212121;
    background: #DADADA;
}

.ui-timepicker-standard .ui-menu-item {
    /* overwrites .ui-menu and .ui-menu-item */
    /*clear: left;
    float: left;*/
    margin: 0;
    padding: 0;
}

.ui-timepicker-corners,
.ui-timepicker-corners .ui-corner-all {
    border-radius: 1px;
}

.ui-timepicker-hidden {
    /* overwrites .ui-helper-hidden */
    display: none;
}

.ui-timepicker-no-scrollbar .ui-timepicker {
    border: none;
}

input#school_deal_arrivalTime, input#school_deal_departureTime {
    text-align: center;
}

.form-fail.message.message--error {

        border: 1px solid darkred;
        background-color: lightred;
        padding: 1em;
        border-radius: 5px;

    }

.form-success.message.message--okey {

        border: 1px solid darkgreen;
        background-color: lightgreen;
        padding: 1em;
        border-radius: 5px;

    }

.form-input-left {
        float: left;
        width: 60%;
    }

.form-input-right {
        float: left;
        width: 40%;
    }

.form-deal input {
        width: 100%;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
    }

.form-deal textarea {
        width: 100%;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
    }

.availability ul {
        list-style-type: none;
        padding: 0px;
        width: 308px;
    }

.availability ul li {
        background-color:#f7f7f7;
        border: 1px solid grey;
        border-left-width: 5px;
        border-left-color: orange;
        margin: 3px;
        padding: 2px 2px 2px 5px;
    }

.availability ul li.appointment {
        cursor: pointer;
        border-radius: 6px;
    }

.availability ul li.appointment.time_selected {
        background-color: #aaeeaa;
        border-color: #00cc00;
        color: darkgreen;
    }

#calendar-container {
        padding-left: 3em;
    }

#calendar-container.no-events {
        pointer-events: none;
        opacity: .2;
    }

#calendar-container .ui-datepicker-title {
        background: #fff;
    }

#calendar-container .ui-datepicker-header.ui-widget-header.ui-helper-clearfix.ui-corner-all {
        background: #fff;
        border: none;
    }

#calendar-container table.ui-datepicker-calendar {
        border: none;
    }

#calendar-container .ui-datepicker thead {
        line-height: 15px;
        font-weight: 400;
    }

#calendar-container .ui-datepicker th {
        font-weight: 400;
    }

#calendar-container td.ui-datepicker-week-col {
        text-align: center;
    }

div.form-deal button {
	    margin: .5em 0em 1em;
    }

button#school_deal_save {
        text-decoration: none;
    }

.form-deal form > div {
        margin-top: 1rem;
    }

/* Style the form - display items horizontally */

.form-input-left {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

/* Add some margins for each label */

.form-input-left tlabel {
  margin: 5px 10px 5px 0;
}

/* Style the input fields */

.form-input-left input {
  vertical-align: middle;
  margin: 5px 10px 5px 0;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ddd;
}

/* Add responsiveness - display the form controls vertically instead of horizontally on screens that are less than 800px wide */

@media (max-width: 800px) {
  .form-input-left input {
    margin: 10px 0;
  }

  .form-input-left{
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
  }
  .form-input-right {
    float: none;
    width: 100%;
}
  .form-input-left {
    float: none;
    width: 100%;
}
}

.loading {
    position: absolute;
    background: rgb(177, 199, 245, 0.9);
    z-index: 1000;
    width: 24%;
    height: 242px;
}

.loading p {
    opacity: 1;  
}

.loader,
.loader:after {
  border-radius: 50%;
  width: 10em;
  height: 10em;
  margin: 0 auto !important;
  z-index: 10002;
}

.loader {
  margin: 60px auto;
  font-size: 8px;
  position: relative;
  text-indent: -9999em;
  border-top: 1.1em solid rgb(36, 74, 154);
  border-right: 1.1em solid rgb(36, 74, 154);
  border-bottom: 1.1em solid rgb(36, 74, 154);
  border-left: 1.1em solid rgb(204, 204, 204);
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}

@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}