/* ------------------- */
/* OVERRIDE YII GRIDS  */
/* ------------------- */

@media (min-width:1300px){
    .container{width:1260px}
}

.table > tbody > tr > td {
    padding:4px 7px;
}

td.indicator-badge {
    position: relative;
}

td.indicator-badge .indicator {
    position: absolute;
    top: 0;
    right: 0;
}

td.indicator-badge .indicator::before {
    content: '';
    display: block;
    position: relative;
    width: 0;
    height: 0;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left: 12px solid #ef8a88;
    transform: rotate(-45deg);
    top: -8px;
    right: -1.5px;
}

td.indicator-badge .indicator:hover::before {
    border-left-color: #c9302c;
}

/*td.kv-align-right.indicator-badge .indicator {*/
/*    right: auto;*/
/*    left: 0;*/
/*}*/

/* ------------------- */
/* Paneled Views CSS   */
/* ------------------- */

/* apply bold to panel heading text */
.panel-heading {
    font-weight: bold;
}

/* Edit button for special access fields */
/* 2015-Feb not sure why there is no space between the tags */
.serve-btn-circle.btn-xs {
    border-radius: 16px;
    padding-left: 6px;
    padding-right: 6px;
    width: 28px;
}


/* ------------------- */
/* OVERRIDE SideNav    */
/* ------------------- */
.nav > li > a {
    padding:4px 12px;
}


/* ------------------- */
/* Modal Forms CSS     */
/* ------------------- */

/* Make the modal header appear like an info panel header */
.serve-modal {
    /* http://stackoverflow.com/questions/19262113/change-header-background-color-of-modal-of-twitter-bootstrap */
    padding:9px 15px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.serve-modal.modal-primary {
    background-color: #337ab7;
    border-color: #2e6da4;
    font-weight: bold;
    color: #ffffff;
}
.serve-modal.modal-info {
    background-color: #5bc0de;
    border-color: #46b8da;
    font-weight: bold;
    color: #ffffff;
}
.serve-modal.modal-success {
    background-color: #5cb85c;
    border-color: #4cae4c;
    font-weight: bold;
    color: #ffffff;
}
.serve-modal.modal-warning {
    background-color: #f0ad4e;
    border-color: #eea236;
    font-weight: bold;
    color: #ffffff;
}
.serve-modal.modal-danger {
    background-color: #d9534f;
    border-color: #d43f3a;
    font-weight: bold;
    color: #ffffff;
}
.serve-modal.modal-header {
    cursor:move;
}


/* ------------------- */
/* Row Spacing CSS     */
/* ------------------- */
.top-space-sm {padding-top: 10px;}
.top-space-md {padding-top: 20px;}
.top-space-lg {padding-top: 30px;}
.grid-multiline-sm {
    padding: 4px 8px 0px !important;
    font-size: 83%;
}
.grid-multiline-md {
    padding: 6px 4px 0px !important;
    font-size: 87%;
}


/* ------------------- */
/* Input Widths CSS    */
/* ------------------- */
.width-1em {width: 1em;}
.width-2em {width: 2em;}
.width-3em {width: 3em;}
.width-4em {width: 4em;}
.width-5em {width: 5em;}
.width-6em {width: 6em;}
.width-7em {width: 7em;}
.width-8em {width: 8em;}
.width-9em {width: 9em;}
.width-10em {width: 10em;}
.width-11em {width: 11em;}
.width-12em {width: 12em;}



/* ------------------- */
/* Text Format CSS     */
/* ------------------- */
.text-strikethrough {text-decoration: line-through;}
.text-active {color: #333;}
.text-dark {color: #000;}
.text-strong {font-weight: bold;}
.text-huge {font-size: 285%;}
.text-large {font-size: 170%;}
.text-small {font-size: 85%;}
.text-tiny {font-size: 70%;}
.text-vertical {    /* works terrible with row span cells */
    /* http://stackoverflow.com/questions/15806925
     * http://stackoverflow.com/questions/6184589
     */
    /* Standard */
    transform: rotate(-90.0deg);
    /* FF3.5+ */
    -moz-transform: rotate(-90.0deg);
    /* Opera 10.5 */
    -o-transform: rotate(-90.0deg);
    /* Saf3.1+, Chrome */
    -webkit-transform: rotate(-90.0deg);
    /* IE6,IE7 */
    /*noinspection CssInvalidPropertyValue*/
    filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=0.083);
    /* IE8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)";
    /* Other Browser */
    -khtml-transform: rotate(-90.0deg);
}
.text-hint {
    font-size: 80%;
    color: #777777;
    text-align:right;
    margin-right: 4px;
}


/* ------------------- */
/* Alternating Rows CSS*/
/* ------------------- */
.serve-group-odd { background-color: #f2faff; }
.serve-group-even { background-color: #fcfcfc; }
.serve-group-01 {  background-color: #fdfdfd; }
.serve-group-02 {  background-color: #fbfbfb; }
.serve-group-03 {  background-color: #f9f9f9; }
.serve-group-04 {  background-color: #f7f7f7; }
.serve-group-05 {  background-color: #f5f5f5; }
.serve-group-06 {  background-color: #f3f3f3; }
.serve-group-07 {  background-color: #f1f1f1; }
.serve-group-08 {  background-color: #efefef; }


/* ------------------- */
/*     Popover CSS     */
/* ------------------- */
.bg-highlight {
    background: #eee !important;    /* same as disabled form field background color */
}


/* ------------------- */
/*     ToolTip CSS     */
/* ------------------- */
.ui-tooltip {
    /*padding: 2px 8px !important;*/
    padding: 4px 7px !important;
    -webkit-box-shadow: 0 0 5px #2e6da4 !important;
    box-shadow: 0 0 5px #2e6da4 !important;
}
.ui-tooltip-content {
    font-family:inherit !important;
    /*font-size: 0.85em; !important;*/
    font-size: 12px !important;
    font-weight: bold;
}
.ui-widget-content {
    /*border:1px solid #2a6496 !important;*/
    border:1px solid #337ab7 !important;
    /*border:1px solid #ebebeb !important;*/
    /*background: #555 !important;*/
    background: #f7f7f7 !important;
    /*color: white !important; !* text color *!*/
    color: #333 !important; /* text color */
    border-radius: 5px!important;
}

/* ------------------- */
/*     Tabs CSS     */
/* ------------------- */
.nav-tabs > li > a {
    background-color: #d9edf7 !important;
}
.nav-tabs > li > a:hover,
    .nav-tabs > li > a:focus {
    color: #333 !important; /* text color */
}
.nav-tabs > li.active > a,
    .nav-tabs > li.active > a:hover,
    .nav-tabs > li.active > a:focus {
    background-color: #f5f5f5 !important;
}


/* ------------------- */
/* ADDITIONAL SITE CSS */
/* ------------------- */

/*
 * @version 3.0.0 - moved styling to here
 */
[data-toggle="popover"] {
    border-bottom: 1px dashed #204d74;
    cursor:help;
    text-decoration: none;
}
.fc [data-toggle="popover"] {
    border-bottom-style: solid;
}
.popover .popover-content td {
    padding-left: 4px;
    padding-right: 4px;
}
.cursor-grab {
    cursor: grab;
    /*noinspection CssInvalidPropertyValue*/
    cursor: -webkit-grab;
    /*noinspection CssInvalidPropertyValue*/
    cursor: -moz-grab;
}
.loading-backdrop {
    position: absolute;
    background-color: #777;
    opacity: 0.2;
    z-index: +10;
}
.loading-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 200%;
    min-height: 64px;
    z-index: +20;
}

/*
 * reference:
 * http://stackoverflow.com/a/20548578
 * http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
 * https://codepen.io/foxza/pen/dPKWXr
 * @since 3.0.0
 */
.col-align-top {
    float: none;
    display: inline-block;
    vertical-align: top;
}
.col-align-middle {
    float: none;
    display: inline-block;
    vertical-align: middle;
}
.col-align-bottom {
    float: none;
    display: inline-block;
    vertical-align: bottom;
}
.vertical-center {
    position: relative;
    top: 50%;
    -webkit-transform: rotate(-90.0deg);
    -ms-transform: rotate(-90.0deg);
    transform: rotate(-90.0deg);
}
/* https://stackoverflow.com/a/47245068 */
.vertical-top {
    vertical-align: bottom;
    text-align: center;
}
.vertical-top span {
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
}


/* ----------------- */
/* MODIFIED SITE CSS */
/* ----------------- */

/* Move the body of the page up because navbar is shorter */
/* @version 3.2.0 - changed the margin from -40 to -10 to hide the footer until scolling */
.wrap {
    min-height: 80vh;
    height: auto;
    margin: 0 auto -10px;
    padding: 0 0 60px;
}

/* Adjust for reduced size of navbar */
.wrap > .container {
    padding: 50px 15px 20px;
}

html {
    background-color: #f5f5f5;
}

/* Adjust to make a smaller footer */
/* @version 3.2.0 - changed the height and padding to hide the footer until scrolling */
.footer {
    background-color: #f5f5f5;
    border-top: 1px solid #5bc0de;
}
.datepicker {
    /* show the date picker above modal popups */
    z-index: 1055 !important;
}


/* ----------------- */
/* ORIGINAL SITE CSS */
/* ----------------- */
html {
    height: 100%;
}

.jumbotron {
    text-align: center;
    background-color: transparent;
}

.jumbotron .btn {
    font-size: 21px;
    padding: 14px 24px;
}

.not-set {
    color: #c55;
    font-style: italic;
}

/* add sorting icons to gridview sort links */
a.asc:after, a.desc:after {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    padding-left: 5px;
}

a.asc:after {
    content: /*"\e113"*/ "\e151";
}

a.desc:after {
    content: /*"\e114"*/ "\e152";
}

.sort-numerical a.asc:after {
    content: "\e153";
}

.sort-numerical a.desc:after {
    content: "\e154";
}

.sort-ordinal a.asc:after {
    content: "\e155";
}

.sort-ordinal a.desc:after {
    content: "\e156";
}

.grid-view th {
    white-space: nowrap;
}

.hint-block {
    display: block;
    margin-top: 5px;
    color: #999;
}

.error-summary {
    color: #a94442;
    background: #fdf7f7;
    border-left: 3px solid #eed3d7;
    padding: 10px 20px;
    margin: 0 0 15px 0;
}
/* ----------------------- */
/* Navbar Dropdown Styles  */
/* ----------------------- */
.serve-navbar .dropdown-menu {
    max-height: 92vh;
    overflow-y: auto;
}
/* The following 2 styles prevent issues when location name is too long */
.location-dropdown-menu li {
    white-space: nowrap;
}
.location-dropdown-menu li:after {
    content: "";
    padding-left: 20px; /* Add spacing for offset hour */
}

/* ----------------------- */
/* Monthly Calendar Styles */
/* ----------------------- */

.fc .fc-button .fc-icon.fc-icon-custom {
    font-family: 'Font Awesome 6 Free' !important;
    font-size: inherit;
}

/* ----------------- */
/* Icon Badge Styles */
/* ----------------- */

.badge-icon {
    display: inline-block;
    /*height: 1em;*/
    position: relative;
    text-align: center;
    /*vertical-align: -0.125em;*/
    /*width: 1em;*/
}

.badge-icon .badge-text {
    display: inline-block;
    position: absolute;
    text-align: center;
    background-color: #337ab7;
    border-radius: 1em;
    box-sizing: border-box;
    color: #fff;
    line-height: 1;
    max-width: 5em;
    min-width: 1.5em;
    overflow: hidden;
    padding: .25em .5em;
    left: .75em;
    text-overflow: ellipsis;
    top: -.5em;
    transform: scale(.66);
    transform-origin: top right;
}

dl.dl-nested {
    margin-left: 20px;
    display: grid;
    grid-template-columns: 100px auto;
    grid-gap: 0 10px;
}

.dl-nested dt {
    grid-column: 1;
    font-weight: bold;
    text-align: right;
}

.dl-nested dd {
    grid-column: 2;
    margin-left: 0;
}

dd.dl-nested {
    grid-column: 1 / span 2;
}

dl.dl-nested dl.dl-nested {
    margin-left: 3rem;
    font-size: 0.85em;
}

.comment {
    white-space: break-spaces;
}

.alert-default {
    background-color: #f0f0f0;
    border-color: #dddddd;
    color: #333;
}

/* ------------------- */
/* Color Swatch Styles */
/* ------------------- */

.color-swatch {
    position: relative;
    z-index: 1;
    display: inline-block;
    height: 1em;
    width: 1em;
    background: transparent;
    border: 1px solid #c3c3c3;
}

.color-swatch::before {
    position: absolute;
    top: -1px;
    left: -1px;
    z-index: -1;
    content: '';
    display: block;
    height: 1em;
    width: 1em;
    background-image: linear-gradient(45deg, #c3c3c3 25%, transparent 25%), linear-gradient(-45deg, #c3c3c3 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #c3c3c3 75%), linear-gradient(-45deg, transparent 75%, #c3c3c3 75%);
    background-size: 1em 1em;
    background-position: 0 0, 0 0.5em, 0.5em -0.5em, -0.5em 0px;
}

.color-swatch:after {
    position: absolute;
    top: -1px;
    left: -1px;
    z-index: 2;
    content: '';
    display: block;
    height: 1em;
    width: 1em;
    background: inherit;
}

/* -------------------------- */
/* Horizontal Rule with Label */
/* -------------------------- */

.hr-label {
    display: flex;
    color: #777777;
    font-size: 0.8em;
    font-weight: bold;
    text-transform: uppercase;
    padding: 1rem 0 2rem 0;
    letter-spacing: 1px;
    white-space: nowrap;
}

.hr-label::after {
    content: '';
    display: block;
    margin-top: .55em;
    width: 100%;
    margin-left: 1rem;
    border: 0;
    border-top: 2px solid #dedede;
}

/* ----------------- */
/* Select2 Overrides */
/* ----------------- */

ul:not(.select2-results__options--nested).select2-results__options > li.select2-results__option {
    position: relative;
}

strong.select2-results__group {
    top: 0;
    position: sticky;
}