/* Add customer's preferred theme color here. */
.border {
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.border-light {
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.border-dark {
  border: 1px solid rgba(0, 0, 0, 0.5);
}

.margin-left-15px {
  margin-left: 15px;
}

.margin-top {
  margin-top: 30px;
}

.margin-top-small {
  margin-top: 5px;
}

.margin-bottom {
  margin-bottom: 30px;
}

.no-margin-bottom {
  margin-bottom: 0;
}

.form-horizontal .form-group .row {
  margin-left: 0px;
  margin-right: 0px;
}

.form-check {
  margin-bottom: 10px;
}

/* spinning "please wait" animation */
@-webkit-keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.spinning-wheel, .availability-calendar-container.calendar-loading:after, .dialog-loading:after {
  content: "";
  width: 80px;
  height: 80px;
  margin-left: -40px;
  margin-top: -40px;
  border: 10px solid;
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border-top-color: rgba(0, 0, 0, 0.1);
  border-right-color: rgba(0, 0, 0, 0.2);
  border-bottom-color: rgba(0, 0, 0, 0.3);
  border-left-color: rgba(0, 0, 0, 0.4);
  -webkit-animation: spin 0.7s linear infinite;
  animation: spin 0.7s linear infinite;
}

.dialog-loading {
  opacity: 0.2;
}
/* used in family & friend table */
.grid-view .button-column {
  text-align: right !important; /* overrides center text align set by bootstrap-yii.css */
  width: 165px !important; /* overrides 65px width set by bootstrap-yii.css */
}
@media only screen and (min-width: 768px) {
  .grid-view .button-column {
    width: 300px !important; /* overrides 65px width set by bootstrap-yii.css */
  }
}
.grid-view .button-column .btn {
  margin: 5px 0 5px 10px;
}

.mfp-content {
  background-color: #fff;
  max-width: 1000px;
  padding: 20px;
}

.panel.collapsible .panel-heading {
  padding: 0;
}
.panel.collapsible .panel-heading a {
  display: block;
  padding: 10px 15px;
}
.panel.collapsible .panel-heading a:hover, .panel.collapsible .panel-heading a:focus {
  text-decoration: none;
}
.panel.collapsible .panel-heading h4.not-collapsible {
  padding: 10px 15px;
}

.pagination-count {
  margin-top: 15px;
  margin-bottom: 15px;
}

.custom-message {
  margin-top: 20px;
  margin-bottom: 20px;
}

/* Message addendum styles */
div.message-addendum-dialog,
div.message-addendum-inline,
a.message-addendum-inline-hide {
  display: none;
}

.glyphicon-gray {
  color: rgba(0, 0, 0, 0.5);
}

/* reducing the padding of tab navigation in mobile view so it can fit more items in one line. */
/* default padding by bootstrap is 10px 15px */
.reservation-tabs .nav-tabs > li > a {
  padding: 5px 10px;
}
@media only screen and (min-width: 768px) {
  .reservation-tabs .nav-tabs > li > a {
    padding: 10px 15px;
  }
}

.multi-step-form-header {
  background-color: rgba(0, 0, 0, 0.025);
  padding: 5px;
  text-align: center;
  list-style: decimal;
  counter-reset: step-counter;
}
.multi-step-form-header li {
  display: inline-block;
  list-style: decimal;
  counter-increment: step-counter;
}
.multi-step-form-header li.last a:before {
  display: none !important;
}
.multi-step-form-header li.active a {
  color: #337ab7;
}
.multi-step-form-header li.active a:after {
  background-color: #337ab7;
  border: 1px solid #337ab7;
  color: #fff !important;
}
.multi-step-form-header li a {
  position: relative;
  padding: 30px 5px 10px 5px;
  display: block;
  min-width: 40px;
  font-size: 10px;
}
@media only screen and (min-width: 768px) {
  .multi-step-form-header li a {
    min-width: 100px;
    padding-top: 50px;
    font-size: 14px;
  }
}
.multi-step-form-header li a.disabled {
  color: #ccc;
  cursor: default;
}
.multi-step-form-header li a.disabled:hover {
  text-decoration: none;
}
.multi-step-form-header li a.disabled:after {
  background-color: #ccc;
  border: 1px solid #ccc;
  color: #fff;
}
.multi-step-form-header li a:before {
  content: "";
  width: 60px;
  display: block;
  border-top: 1px solid #ccc;
  position: absolute;
  top: 15px;
  left: 50%;
}
@media only screen and (min-width: 768px) {
  .multi-step-form-header li a:before {
    width: 100px;
    top: 25px;
  }
}
.multi-step-form-header li a:after {
  background-color: #fff;
  border: 1px solid #337ab7;
  color: #337ab7;
  position: absolute;
  top: 5px;
  left: 50%;
  margin-left: -10px;
  font-size: 10px;
  content: counter(step-counter);
  min-width: 20px;
  border-radius: 20px;
  padding: 3px;
}
@media only screen and (min-width: 768px) {
  .multi-step-form-header li a:after {
    margin-left: -20px;
    font-size: 20px;
    min-width: 40px;
    border-radius: 20px;
    padding: 5px;
  }
}

@media only screen and (min-width: 768px) {
  .btn-group-prev-next .btn {
    min-width: 45%;
  }
}

img {
  max-width: 100%;
  height: auto;
}

.service-image-edit {
  max-width: 100px;
}

.label-heading {
  font-weight: 600;
  margin-bottom: 0;
  margin-top: 0;
}

.label-inverse {
  background-color: #333333;
}

span.label.label-larger {
  font-size: 90%;
}

tr.top-thick-border th, tr.top-thick-border td {
  border-top: 3px solid #ddd !important;
}

.table-responsive > table {
  min-width: 200% !important;
  width: auto !important;
  max-width: 300% !important;
}
.table-responsive > table td, .table-responsive > table th {
  white-space: normal !important;
}
@media only screen and (min-width: 768px) {
  .table-responsive > table {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }
}

/* .grid-view-loading styles copied from yiistrap.css */
.grid-view-loading {
  background: url(../images/loading.gif) no-repeat 100% 10px;
}
.grid-view-loading table {
  opacity: 0.5;
}
.grid-view-loading table th > .sort-link .caret {
  display: none;
}

.break-before:before {
  content: "\a";
  white-space: pre;
}

.list-group-item.disabled, .list-group-item.disabled:hover, .list-group-item.disabled:focus {
  background-color: #eee;
  color: #777;
  cursor: not-allowed;
}

/* definition lists */
dl.left-right-margin {
  margin-left: 10px;
  margin-right: 10px;
}

dt.striped, dd.striped {
  background-color: #f9f9f9;
  text-align: left;
  padding-left: 4px;
}
dt.striped span.label, dd.striped span.label {
  font-size: 100%;
}

dt.striped:nth-child(4n+1), dt.striped:nth-child(4n+1) + dd.striped {
  background-color: #ffffff;
}

dt.striped {
  padding-top: 0.25em;
}
@media only screen and (min-width: 768px) {
  dt.striped {
    width: 200px;
    line-height: 4em;
    padding-top: 0;
  }
}

dd.striped {
  padding-bottom: 0.5em;
}
@media only screen and (min-width: 768px) {
  dd.striped {
    margin-left: 200px;
    line-height: 4em;
    padding-bottom: 0;
  }
}

.dashboard-ready, .panel-dashboard-ready > .panel-heading {
  background-color: #2e7d32;
  color: #ffffff;
}

.panel-dashboard-ready {
  border-color: #2e7d32;
}

.dashboard-info, .panel-dashboard-info > .panel-heading {
  background-color: #007bff;
  color: #ffffff;
}

.panel-dashboard-info {
  border-color: #007bff;
}

.dashboard-not-ready, .panel-dashboard-not-ready > .panel-heading {
  background-color: #ffc107;
  color: #000000;
}

.panel-dashboard-not-ready {
  border-color: #ffc107;
}

#toggle-password {
  float: right;
  background: none;
  border: none;
  cursor: pointer;
}

.text-medium {
  font-size: 16px;
}

.preserve-whitespace {
  white-space: pre-wrap;
}

.font-16px {
  font-size: 16px;
}
.font-16px .btn {
  font-size: 16px;
}

.detail-view-wide-th th {
  text-align: left;
  width: 70%;
}

#main {
  max-width: 1200px;
}

footer {
  margin-top: 100px;
}

#log-in, #forgot-password {
  padding-top: 30px;
  padding-bottom: 30px;
}
#log-in h1, #forgot-password h1 {
  margin-top: 0;
}

.services-add-activity {
  background-color: red;
}
.services-add-activity .service-activity-create {
  width: 100%;
  max-width: 200px;
}

.service-item {
  border: 1px solid #ccc;
  margin: 15px 0;
}
.service-item .service-header {
  padding: 10px 15px;
  margin: 0 0 0 0;
  border-top: 6px solid #ccc;
  font-weight: 600;
  font-size: 18px;
}
.service-item .service-header.service-status-res, .service-item .service-header.service-status-ckn, .service-item .service-header.service-status-set {
  border-top: 6px solid #3c763d;
  background-color: #dff0d8;
}
.service-item .service-header.service-status-inq {
  border-top: 6px solid #337ab7;
  background-color: #d9edf7;
}
.service-item .service-header.service-status-cxl, .service-item .service-header.service-status-nos {
  border-top: 6px solid #a94442;
  background-color: #ddd;
}
.service-item .service-header .service-member {
  font-weight: normal;
}
.service-item .service-header .label {
  margin-left: 15px;
}
.service-item .service-body {
  padding: 10px 15px 15px 15px;
}
.service-item .service-type {
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 20px;
}
.service-item .service-member {
  margin-left: 1.5em;
}
.service-item .service-actions {
  display: block;
  margin: 15px 0;
  font-weight: normal;
}
@media only screen and (min-width: 768px) {
  .service-item .service-actions {
    display: inline;
    margin: 0 1.5em;
  }
}
.service-item .reservation-edit {
  margin-right: 1.5em;
}
.service-item .service-charges .service-total {
  background-color: #efefef;
  padding: 30px;
  text-align: center;
  font-size: 21px;
}

.service-edit-buttons > button.btn {
  margin-top: 6px;
}

.service-payment-status {
  font-size: large;
  font-style: italic;
  padding-top: 10px;
  text-align: center;
}

#header {
  background-color: #337ab7;
  margin-bottom: 15px;
}
@media only screen and (min-width: 768px) {
  #header {
    padding-top: 15px;
    padding-bottom: 15px;
  }
}
#header .header-logo {
  max-width: 255px;
  max-height: 50px;
}
@media only screen and (min-width: 992px) {
  #header .header-logo {
    max-width: 300px;
  }
}
#header .navbar {
  margin-bottom: 0;
}
@media only screen and (min-width: 768px) {
  #header .navbar {
    background-color: transparent;
    border: 0;
  }
}
#header .navbar .navbar-header {
  background-color: #337ab7;
  padding: 5px;
}
#header .navbar .navbar-toggle {
  border: 0;
  margin-right: 0;
}
#header .navbar .navbar-toggle:focus, #header .navbar .navbar-toggle:hover {
  border: 0;
  background-color: rgba(0, 0, 0, 0.1);
}
#header .navbar .navbar-toggle .icon-bar {
  background-color: #fff;
}
@media only screen and (min-width: 768px) {
  #header .navbar .navbar-nav > li > a {
    color: #fff;
  }
  #header .navbar .dropdown.open > a {
    background-color: rgba(0, 0, 0, 0.1);
  }
  #header .navbar .dropdown.open > a:hover {
    background-color: rgba(0, 0, 0, 0.1);
  }
  #header .navbar .login,
#header .navbar .logout,
#header .navbar .profile {
    border: 1px solid rgba(255, 255, 255, 0.5);
  }
}
#header .navbar .user-info {
  padding: 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  margin-bottom: 15px;
}
#header .navbar .user-info h4, #header .navbar .user-info p {
  margin: 0 0 0 0;
}

/* Shrink the items in the navbar below certain screen widths to prevent the navbar from going on two rows */
/* This is an alternative to adjusting the @grid-float-breakpoint variable and rebuilding bootstrap */
@media only screen and (max-width: 900px) {
  #header .navbar .navbar-nav > li > a {
    padding-left: 5px;
    padding-right: 10px;
  }
}
@media only screen and (min-width: 768px) {
  #availabilityAcmForm .search-btn {
    margin-top: 25px;
  }
}

div.loading {
  background-color: #eee !important;
  background-image: url("../images/loading.gif") !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  opacity: 1 !important;
}

div.loading * {
  opacity: 0.8 !important;
}

.availability-calendar-container {
  position: relative;
}
.availability-calendar-container.calendar-loading mwl-calendar > div {
  opacity: 0.2;
}
.calendar-month {
  width: auto;
  display: inline-block;
}

mwl-calendar .cal-slide-content {
  background-color: transparent;
  color: #333;
  box-shadow: none;
  -webkit-box-shadow: none;
  padding-top: 0;
}
mwl-calendar #cal-week-box {
  display: none;
}
mwl-calendar .cal-day-tick {
  bottom: -1px;
  border-radius: 0;
  background-color: transparent;
  padding: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 10px 12px 10px;
  margin-right: -10px;
  border-color: transparent transparent #ccc transparent;
}
mwl-calendar .cal-day-tick i {
  display: none;
}
mwl-calendar .cal-day-open {
  background-color: #d9edf7;
}
mwl-calendar .cal-slide-box {
  box-shadow: inset 0px 0px 0px 5px #ccc;
  -webkit-box-shadow: inset 0px 0px 0px 5px #ccc;
}
mwl-calendar .cal-slide-box h3 {
  margin-top: 0;
  padding: 15px 15px 0 15px;
}
mwl-calendar [class*=cal-cell]:hover {
  background-color: #d9edf7;
}
mwl-calendar .events-list {
  display: none;
}
mwl-calendar .cal-events-num {
  background-color: #5cb85c;
}
mwl-calendar .cal-no-events-badge {
  margin: 18px 0 0 10px;
}
mwl-calendar span[data-cal-date] {
  color: #333;
  opacity: 1;
}
mwl-calendar .cal-day-past,
mwl-calendar .cal-day-no-availability {
  background-color: #eee;
}
mwl-calendar .cal-day-past span[data-cal-date],
mwl-calendar .cal-day-no-availability span[data-cal-date] {
  opacity: 0.3;
}
mwl-calendar .cal-day-past .cal-events-num,
mwl-calendar .cal-day-no-availability .cal-events-num {
  display: none;
}

.video-responsive {
  overflow: hidden;
  padding-bottom: 56.25%;
  position: relative;
  height: 0;
}

.video-responsive iframe {
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  position: absolute;
}

.faqHeader {
  font-size: 22px;
  margin: 20px;
}

.panel-heading [data-toggle=collapse]:after {
  font-family: "Glyphicons Halflings";
  /* "play" icon */
  content: "\e072";
  float: right;
  color: #337ab7;
  font-size: 18px;
  line-height: 22px;
  /* rotate "play" icon from > (right arrow) to down arrow */
  transform: rotate(-90deg);
}

.panel-heading [data-toggle=collapse].collapsed:after {
  /* rotate "play" icon from > (right arrow) to ^ (up arrow) */
  transform: rotate(90deg);
  color: #454444;
}

.no-border {
  border: 0 !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}