@HeaderColor: #4d4d4d;
@IconColor: white;
@BackgroundColor: @HeaderColor;

html, body {
    overflow-x: hidden;
    height: 100%;
}

.k-grid-header th.k-header > .k-link {
    padding: .4em .6em !important;
}

div#container-fluid {
    height: calc(100% - 110px);
}

div#bodyContainer {
    height: 100%
}

div#bodyContent {
    height: inherit;
}

div#meetingAppointmentsRootContainer {
    height: inherit;
}

div#meetingAppointmentsLeftPane {
    height: inherit;
}

div#meetingAppointmentsRightPane {
    height: inherit;
}

div#datagrid {
    height: inherit;
}

div#meetingAppointments_grid {
    height: inherit;
    border: 0px;
}

.k-grid-content {
    height: calc(100% - 47px);
}

.noBorder {
    border: 0px;
}

div#colorLegend {
    position: absolute;
    bottom: 0;
    padding: 0 0.625em;
}

/* 
 * Begin: BikTable.css allow header to be allign left and right 
 */
.k-grid-header th.k-header, .k-filter-row th {

    padding-left: 0px !important; 
    padding-right: 0px !important; 
}

th.k-header.k-text-left {
    text-align: left !important;
}

th.k-header.k-text-right {
    text-align: right !important;
}

.k-grid-header .k-link{
     text-align: revert  !important;
}

/* 
 * End: BikTable.css allow header to be allign left and right 
 */



/* basic positioning */
.colorLegend { 
    list-style: none; 
    padding: unset;
    li { float: left; margin-right: 10px; }
    span { border: 1px solid #ccc; float: left; width: 12px; height: 12px; margin: 2px; }
}

/* your colors */
.bookedForMeeting { background-color: #008000; }
.waitlisted { background-color: #FFA500; }

// .iconContainer {
//     width: 100%;
//     /*border-top-right-radius:25px;
//      border-top-left-radius:25px;*/
//     text-align: left;
//     background-color: @BackgroundColor;
//     border-style: solid;
//     border-color: @HeaderColor;
//     border-width: 1px;
//     border-radius: 5px;
//     -webkit-box-shadow: 0px 8px 38px -14px rgba(0,0,0,0.75);
//     -moz-box-shadow: 0px 0px 38px -14px rgba(0,0,0,0.75);
//     box-shadow: 0px 1px 35px -14px rgba(0,0,0,0.75);
// }


fieldset {
    // background-color: #f1f1f1;
    border: none;
    border-radius: 2px;
    margin-bottom: 12px;
    overflow: hidden;
    padding: 0 .625em;
}
//
//    .k-grid,
//    .k-grid .k-auto-scrollable {
//        height: auto !important;
//        overflow-y: visible !important;
//    }

.k-text-left {
    text-align: left !important;
    justify-content: flex-start !important;
}

.k-text-right {
    text-align: right !important;
    justify-content: flex-end !important;
}

.k-autocomplete, .k-combobox, .k-datepicker, .k-timepicker, .k-datetimepicker, .k-colorpicker, .k-numerictextbox, .k-dropdown, .k-selectbox, .k-textbox, .k-toolbar .k-split-button {
    //width: auto;
}

div#meetingAppointmentsLeftPane {
    float: left;
}

/*.meetingAppointmentsDatePickerFilter {
    width: auto;
}*/

.form-group {
    display: flex;
    flex-flow: row wrap;
    //margin: 0 -1rem 1rem -1rem;
    align-items: center;
}

[class*="form-col"] {
    flex: 0 1 100%;
    padding: 0 1rem 0 0;
}

@media (min-width: 576px) {
    .form-col-4 {
        flex: 0 0 25%;
        max-width: 25%;
        text-align: end;
    }
    
    .form-col-8 {
        flex: 0 0 75%;
        max-width: 75%;
    }
    
    .offset-form-col-4 {
        margin-left: 25%;
    }
  
}

input {
    display: block;
    width: 100%;
}

label, select {
    display: block;
    width: 100%;
    max-width: 100%;
}