.after
{
    width: 100vw;
    
    height: 100vh;
    
    background-color: white;
    
    display: flex;
    
    flex-direction: row;
    
    flex-wrap: wrap;
    
    justify-content: center;
    
    align-items: center;
}

.after .centred
{
}

.reservationForm
{
    /*width: 326px;*/

    width: 650px;

    text-align: center;
}

@media screen and (max-width: 649px) 
{
    .reservationForm
    {
        width: 326px;
    }
}

.reservationForm .part
{
    /*width: 320px;*/

    width: 640px;

    height: 400px;

    display: inline-block;

    /*border: 1px solid #000000;*/

    /*overflow-y: scroll;*/

    text-align: left;

    background-color: #ffffff;

    border: 3px solid #000000;
}

@media screen and (max-width: 649px) 
{
    .reservationForm .part
    {
        width: 320px;
    }
}

.reservationForm .part .label
{
    width: 100%;

    font-weight: bold;
}

.reservationForm .part1 .services_section
{
    width: 280px;

    float: left;
}

@media screen and (max-width: 649px) 
{
    .reservationForm .part1 .services_section
    {
        width: 100%;

        float: none;
    }
}

.reservationForm  .part1 .branch_section
{
    width: 280px;

    float: right;
}

@media screen and (max-width: 649px) 
{
    .reservationForm  .part1 .branch_section
    {
        width: 100%;

        float: none;
    }
}

.reservationForm .part2 .top_info_section
{
    width: 600px;
}

@media screen and (max-width: 649px) 
{
    .reservationForm .part2 .top_info_section
    {
        width: 100%;
    }
}

.reservationForm .part2 .employee_section
{
    width: 600px;
}

@media screen and (max-width: 649px) 
{
    .reservationForm .part2 .employee_section
    {
        width: 100%;
    }
}

.reservationForm .part2 .day_section
{
    width: 280px;

    float: left;
}

@media screen and (max-width: 649px) 
{
    .reservationForm .part2 .day_section
    {
        width: 100%;

        float: none;
    }
}

.reservationForm .part2 .time_section
{
    width: 280px;

    float: right;
}

@media screen and (max-width: 649px) 
{
    .reservationForm .part2 .time_section
    {
        width: 100%;

        float: none;
    }
}

.reservationForm .part3 .top_info_section
{
    width: 280px;

    float: left;
}

@media screen and (max-width: 649px) 
{
    .reservationForm .part3 .top_info_section
    {
        width: 100%;

        float: none;
    }
}

.reservationForm .part3 .info_section
{
    width: 280px;

    float: right;
}

@media screen and (max-width: 649px) 
{
    
    .reservationForm .part3 .info_section
    {
        width: 100%;

        float: none;
    }
}


/*------------------------------------*/



.reservationForm .part1 .radio_toolbar input[type="radio"]
{
    display: none;

    float: left;
}

.reservationForm .part1 .radio_toolbar label
{
    display: inline-block;

    padding: 10px;

    width: 100%;
}

.reservationForm .part1 .radio_toolbar label:hover
{
    cursor: pointer;
}

.radio_toolbar input[type="radio"]
{
    display: none;
}

.radio_toolbar label
{
    display: inline-block;

    padding: 10px;
}

.radio_toolbar input[type="radio"]:checked + label
{
    color: #1E90FF;
}

.radio_toolbar label:hover
{
    cursor: pointer;
}

.day-active {
    color: #006AEB;
}

.calendar input[type="radio"]:checked + label
{
    color: #E47B2E;
}

.calendar td {
    padding-top: 5px;
    padding-left: 20px;
}

.day-active input, .current_day input {
    display: none;
}

.day-active label{
    cursor: pointer;
    font-weight: bold;
}

.day-disabled {
    color: #ACACAC
}

.current_day {
    color: #868686;
    font-weight: bold;
}

table {
    margin-top: 0px !important;
}

.selectedDay {
    color: #C00 !important;
}

.pull-right {
    float: right;
}

table.calendar td{
    text-align: center;
}

table.reservation_time td {
    text-align: center;
    padding: 0;
    border: none;
}

table.reservation_time tr:nth-of-type(2n+1) {
    background: white;
}

.reservation_time input[type="radio"]:checked + label
{
    background: #EEE;
}

.reservation-warning {
    color: red !important;
}

.reservation-warning div {
    color: red !important;
}


.calendarControls {
    text-align: center;
}

.top_info {
    color: #7B7B7B;
}

.info_heading {
    font-weight: bold;
}

table.top_info td {
    padding: 0;
    border: none;
}

table.top_info tr:nth-of-type(2n+1) {
    background: white;
}

.radio_button input[type="radio"] {
    display:none;
}

.radio_button input[type="radio"] + label {
}

.radio_button input[type="radio"] + label:hover {
    color: #E47B2E;
}

.radio_button input[type="radio"] + label:before {
    content: "";
    background-color: #474747;
    display:inline-block;
    width:19px;
    height:19px;
    margin:-4px 15px 0 0;
    vertical-align:middle;
    cursor:pointer;
    -moz-border-radius:  50%;
    border-radius:  50%;
}

.radio_button input[type="radio"]:checked + label:before{
    background-color: #E47B2E;
}

input[type="radio"] + label {
    -webkit-transition:color 0.4s linear;
    -o-transition:color 0.4s linear;
    -moz-transition:color 0.4s linear;
    transition:color 0.4s linear;
}

input[type="radio"] + label
input[type="radio"] + label:before,
input[type="radio"]:checked + label,
input[type="radio"]:checked + label:before {
    -webkit-transition:background-color 0.4s linear;
    -o-transition:background-color 0.4s linear;
    -moz-transition:background-color 0.4s linear;
    transition:background-color 0.4s linear;
}

i {
    display: inline-block;
    font-style: normal;
    position: relative;
}

i.arrow, i.arrowLeft {
    width: 0.4em;
    height: 0.4em;
    border-right: 0.2em solid black;
    border-top: 0.2em solid black;
}

i.arrow {
    transform: rotate(45deg);
}

i.arrowLeft {
    transform: rotate(225deg);
}

.bottomNav {
    text-decoration: none;
    -webkit-transition:color 0.4s linear;
    -o-transition:color 0.4s linear;
    -moz-transition:color 0.4s linear;
    transition:color 0.4s linear;
}

.bottomNav:hover {
    color: #1E90FF !important;
    -webkit-transition:color 0.4s linear;
    -o-transition:color 0.4s linear;
    -moz-transition:color 0.4s linear;
    transition:color 0.4s linear;
}
.classyButton {
    -webkit-box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
    -moz-box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
    box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
    background-color:#E47B2E;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border:none;
    font-weight: bold;
    padding:4px 16px;
    margin-top: -5px;
    -webkit-transition:background-color 0.4s linear;
    -o-transition:background-color 0.4s linear;
    -moz-transition:background-color 0.4s linear;
    transition:background-color 0.4s linear;
}

.classyButton:hover {
    background-color: #F5C230;
    cursor: pointer;
    -webkit-transition:background-color 0.4s linear;
    -o-transition:background-color 0.4s linear;
    -moz-transition:background-color 0.4s linear;
    transition:background-color 0.4s linear;
}

.textInputGroup {
    margin: 10px 0 10px;
}

.textInputGroup input {
    width: 200px;
/*    border: 1px solid #B0B0B0;
    border-radius: 2px;
    background-color: #FFF;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15) inset;*/
    color: #474747;
    /*padding: 7px 7px 6px;*/
    /*outline: 0px none;*/
    margin: 5px 0px 0px;
}

.reservationForm .ui-widget-header {
    background: #E47B2E;
}

.reservationForm .ui-tabs-nav li {
    background: #F5D879;
}

.reservationForm .ui-state-default {
    -webkit-transition:background-color 0.4s linear;
    -o-transition:background-color 0.4s linear;
    -moz-transition:background-color 0.4s linear;
    transition:background-color 0.4s linear;
}

.reservationForm .ui-tabs-active {
    background: white !important;
}

.reservationSummary {
    width: 320px;
    height: 400px;
    display: inline-block;
    overflow-y: scroll;
    text-align: left;
    border-width: 0px;
    padding: 0 1.4em;
}

#frm-reservationForm {
    margin-bottom: 0px;
}

.employeeHeader {
    display: inline-block;
}