footer  {background:#333; text-align:center; margin:20px 0;padding:20px 0;color:#fff;}

legend {text-align:center; }
.grid-view .summary {text-align:right;}

.grid-view-loading {
    background-position-x: 10px;
    background-position-y: 50px;
}

/***
 for bootstrap
***/
.table input {width:90%;}
.table input[type=checkbox] {width:auto;}
.btn {margin: 3px 3px 0 0;}
div.controls textarea  {width:100%; min-height:100px;}
div.controls input.long50, div.controls span.long50, div.controls select.long50  {width:50%;}
div.controls input.long75, div.controls span.long75, div.controls select.long75  {width:75%;}
div.controls input.long100, div.controls span.long100, div.controls select.long100  {width:100%;}

div.controls input[type=text], div.controls input[type=password] {float:left;height:25px}
div.controls select {float:left;}
div.controls span.uneditable-input {float:left; box-sizing: content-box; height:17px;}
div.controls p.help-block {float:left; margin: 5px 0 5px 10px; color:#ee5f5b;}
div.controls .checkbox p.help-block {display:inline; float:none; margin: 5px 0 0 10px; color:#ee5f5b;}
div.controls ul.help-block {float:left; color:#ee5f5b;}

/**
override bootstrap.min.css
**/
input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly] {background-color:#f5f5f5}

.radio, .checkbox {float:left; padding-top: 5px; margin-right:20px;}
.checkboxList input {float:left; margin-top:8px;}
.checkboxList label {float:left; margin-top:5px; padding-left:8px; margin-right:20px;}

.form-horizontal .control-group {
    margin-bottom: 5px;
}

.icon_server {
    width: 20px;
    height: 20px;
    display: inline-block;
    background-image: url(../images/server.png);
    background-repeat: no-repeat;
}

td.greenColumn a{
    text-decoration: underline;
    color: green;

}

td.redColumn a{
    text-decoration: underline;
    color: red;
}

td.boldIt{
    font-weight: bold;
}

.celeb-color{color: #B89849;}

#server { color:red; font-weight: 14px; }

.uneditable-form .control-group {margin-bottom: 2px;}
.uneditable-input {background-color:#f5f5f5}

.horizontal-list {margin:0;}
.horizontal-list li {float:left; margin-right:10px; list-style-type:none;}
.horizontal-list button {margin-top:0;}

.close_btn { width:20px; height:20px; cursor:pointer; position:absolute; right:15px; top:15px;}

.form-actions.buckets .btn{width: 45px; font-size: 12px;}

.uneditable-textarea{height: 200px; min-width: 936px; resize: none;}
.uneditable-textarea-con{display: flex; margin: 10px 0px;}
.textarea-label{width: 180px;}
.bigger-width {width: 1500px;} /*for category list*/
.frame-list-width {width: 1350px;}

/*
=========================================================
   scheduling dialog
*/

.cal-wrapper {float:left; width: 100%; background: #fff; color:#333; position: relative; width: 287px; margin: 0 auto;}
.cal-header {float:left; margin:10px 0px; margin-bottom: 0px; border: 1px solid #e1e1e1; border-bottom: none;
    width: calc(100% - 2px);
}

.cal-footer {float:left; margin:20px 0 20px 30px; position: absolute; bottom: 0;}
.cal-footer > span {float: left; line-height: 20px; font-size: 15px;}
.cal-footer .legend {width: 10px; height:10px; margin-top:5px; background: #f1f1f1; border: 1px solid #ccc;}
.cal-footer .legend.no {background: #989898}
.cal-footer .label {font-family: georgia, serif; font-style: italic; margin: 0 15px 0 10px;color: #888;font-size: 14px;}

.cal-nav {float:left; width: 100%; margin: 15px 0; }
.cal-nav > div {font-family: "source-sans-pro-n4",sans-serif;font-style: normal;font-weight: 400; font-size:16px;}
.cal-nav .left {float:left; width: 30px; cursor: pointer;}
.cal-nav .title {
    float:left; min-width: 222px;
    width: calc(100% - 62px);
    text-align: center;}
.cal-nav .right {float:right; width: 30px; cursor: pointer;}

.cal-year-nav {float:right; width: 101px;}
.cal-year-nav > div {font-family: "source-sans-pro-n4",sans-serif;font-style: normal;font-weight: 400; font-size:16px;}
.cal-year-nav .left, #cal-year-nav .right {float:left; width: 15px; cursor: pointer;}
.cal-year-nav .title {float:left; width: 70px; font-size:15px;}

.cal-week {float:left; width: 100%; }
.week{
    width: calc(100% / 7);
    text-align: center;
    float: left;
}
.cal-body {float:left; width: 100%; }
.cal-body {float:left; width: 100%; }
.cal-body table{
    border-collapse: collapse;
}
.cal-body table, .cal-body td, .cal-body th {
    border: 1px solid #e1e1e1;
}
.cal-day-box {
    height: 40px;  cursor: pointer; font-size:16px;
     line-height:40px; text-align: center;}
.cal-day-box.day { color: #000;}
.cal-day-box.day.active:hover {background:#00a94f; color:#fff;}
.cal-day-box.day.available {background: #fff; color: #000;}
.cal-day-box.day.available:hover {background:#00a94f; color:#fff;}
.cal-day-box.day.inactive {background: #fff; color: #ccc; cursor:default;}
.cal-day-box.day.black {background: #252525; color: #8d8c8c;}
.cal-day-box.day.selected {color:#fff; background:#00a94f; background-size:30px 30px;}

.cal-time {float:left; background: #f5f5f5; color:#333; position: relative; border-left: 1px solid #e1e1e1; border-right: 1px solid #e1e1e1;
    width: calc(100% - 2px);
}
.cal-time .time{margin-top: 7px; min-height: 47px;}
.date input.calender-field {margin-top:7px;}
.cal-time select{width: 90%;}
.cal-time-box {float:left; margin-right:10px;}
.cal-time-box .cal-time-text {  display: inline-block;margin-top: 15px;font-size: 15px;font-family: "source-sans-pro-n3";}
.cal-time-box .cal-time-dropdown {width:76px;}
.scheduling-form-submit {float:left;margin: 5px 0 15px 0;}

.schedule-wrapper {float:left; color:#fff; position: relative; background-color: #f5f5f5;
                  border-left: 1px solid #e1e1e1; border-right: 1px solid #e1e1e1;
                  border-bottom: 1px solid #e1e1e1; padding-bottom: 7px;}
.schedule-title {margin-top:10px; width:240px; border-bottom:1px solid #fff;font-family: georgia, serif; font-size: 15px; font-style: italic; line-height: 36px; text-align: left;}
.schedule-box {float: left;position: relative; width: 100%; margin: 7px 0px;}
.schedule-box.schedule-box-0 {z-index:0;border:1px solid #e1e1e1}
.schedule-box.schedule-box-1 {z-index:1;border:1px solid #e1e1e1}
.schedule-box .number {height: 33px; width: 33px; line-height: 33px;
        position: absolute; text-align: center; color: #ffffff; font-size: 16px;
        background: url('/images/io/green_circle.png'); font-style: normal;font-weight: 600;}
.scheduling-form .schedule-box .date input[type="text"] {width:125px; font-size: 15px; height: 19px; padding:5px; text-align:center;
        box-shadow: none;
}

.scheduling-form .schedule-box .label {font-size: 16px; top: 8px; position: absolute; float:left; font-family: "source-sans-pro-n4",sans-serif; text-align:center; width:137px;}
.scheduling-form .infobox_reset_booking_container .checkBox-block::after {height: 5px !important;}
.addlInfoForms .schedule-box .label {color:#ccc;}
#account-content .schedule-box {margin-top:5px;}

.schedule-wrapper .current-arrow {width: 20px; height: 40px; position: absolute; top: 70px; right: -30px; background:url('/images/io/arrow_prev_white_border.png') no-repeat; }

.schedule-footer {float:left; margin: 5px 0 15px 0; width:100%;}
#product-scheduling-dialog .scheduling-form {width:287px;margin: 0 auto;}
#scheduling-dialog .dialog_header, #product-scheduling-dialog .dialog_header {margin-top:30px;background: none;}
#scheduling-dialog .explanation, #product-scheduling-dialog .explanation   {margin:0 0 10px 0px; line-height: 22px; font-size:15px; font-family:source-sans-pro-n4;}

/* Custom Weekly Calendor CSS */
.calendar-header{font-family: montserrat;
                font-size: 14px;
                display: block;
                letter-spacing: 0.14em;
                margin-top: 20px;}
.calendar hr.fc-divider{ padding: 0px; border-width: 1px; border-color: #999;}
.calendar .fc-bg .fc-axis{vertical-align: top;}
.calendar .fc-bg .fc-axis span{ margin-top: 5px; display: block; text-transform: capitalize;}
.calendar .fc-event{background-color: #fff; border-color: #e2e2e2;}
.calendar .fc-event .fc-bg{background: #fff;}
.calendar .fc-event, .calendar .fc-event:hover, .calendar .ui-widget .fc-event{color: #000;}
.calendar .fc-time-grid-event .fc-time{font-size: 16px; display: none;}
.calendar .fc-time-grid-event .fc-time span{display: none;}
.calendar .fc-view-container thead.fc-head .fc-widget-header{
    font-family: montserrat;
    font-size: 11px;
    letter-spacing: 0.02em;
    color: #777;
    margin-bottom: 4px;
}
.calendar.fc-ltr .fc-axis{
    text-align: left;
}
.calendar .fc-axis span{
    font-family: montserrat;
    font-size: 11px;
    letter-spacing: 0.02em;
    color: #777;

}
.calendar .fc-title{font-family: montserrat;
    font-size: 11px;
    letter-spacing: 0.02em;
    word-wrap: break-word;
    color: #000;
    margin: 4px 0 0 4px;}
.calendar td.fc-day.fc-widget-content.vacation{background-image: url("/images/tile_vacbg.png"); background-color: #e5e5e5; opacity: 0.1;}
.calendar .fc-bgevent{background: none;}
.calendar .fc-bgevent.booked{background: #e1e1e1; opacity: 1;}
.calendar .fc-bgevent.calendar-buffer{background: #e5e5e5 !important; opacity: 1;}

.calendar .fc-view-container thead.fc-head .fc-widget-header{border-top: none;}
.calendar .fc-view-container thead.fc-head .fc-widget-header{border-left: none; border-right: none;}
.calendar .fc-view-container .fc-agenda-view .fc-head > tr > td{border-left: 1px solid #e1e1e1; border-right: 1px solid #e1e1e1;}
.calendar .fc-toolbar .fc-left button{
    background: url("/images/arrow_left_999.png") no-repeat;
    background-size: 20px;
    background-position: left 0;
    border: none;
    margin: 15px 0 0 5px;
    outline: none;
    border-color: #fff;
    box-shadow: none;
    padding:0;
    width: 20px;
}
.calendar .fc-toolbar .fc-right button{
    background: url("/images/arrow_right_999.png") no-repeat;
    background-size: 20px;
    background-position: right 0;
    border: none;
    margin: 15px 5px 0 0;
    outline: none;
    border-color: #fff;
    box-shadow: none;
    padding:0;
    width: 20px;
}
.calendar .fc-toolbar .fc-left button.fc-state-down, .calendar .fc-toolbar .fc-right button.fc-state-down{
    border:none;
    border-radius: 0px;
}

.weekCalendar .fc-time-grid-event.fc-short .fc-time, .fc-time-grid-event.fc-short .fc-title{display: none;}
.weekCalendar.fc-unthemed .fc-today, .weekCalendar.fc-unthemed .fc-future, .weekCalendar.fc-unthemed .fc-past{background: #e5e5e5;}
.weekCalendar.fc-ltr .fc-time-grid .fc-event-container{margin: 0px;}
.weekly-calendar .fc-agenda-view .fc-day-grid .fc-row .fc-content-skeleton{padding-bottom: 0px;}

.weekly-calendar .fc-toolbar{height: 0px; margin: 0px;}
.weekly-calendar .fc-day-grid-event .fc-content{height: 39px;}
.weekly-calendar .fc-toolbar{
    margin-bottom: 0px;
    border-left: 1px solid #e1e1e1;
    border-top: 1px solid #e1e1e1;
    border-right: 1px solid #e1e1e1;
    height: 60px;
}

#product-scheduling-dialog {width:420px;}
.scheduling-form .schedule-box .date {
    float: left;
    width: 50%;
    border-right: 1px solid #e1e1e1;
}
.cal-time {
    float: left;
    background: #fff;
    color: #333;
    position: relative;
    width: calc(50% - 4px);
    border:none;
}

#product-scheduling-dialog .dialog_header {height:auto;}

.hidden {display:none; visibility:visible;}    /*  for bug  VP-8043 */

.field_description {clear:both; margin:5px 0px 10px 180px;}

/** streamView table is generated in StreamDataToClient::streamView() **/
table.streamView { border-collapse: collapse; margin-bottom: 50px; clear: both;}
table.streamView td { padding: 10px; border: 1px solid #222;}

