html, body {
  font-size: 15px;
}
  .not-active {
    pointer-events: none;
    cursor: default;
    opacity: 0.6;
    text-decoration: line-through;
  }
  .number {
    text-align: right;
  }

  .mytext {
    width: 50px;
    text-align: right;
    margin-bottom: 3px;
    font-weight: normal;
  }

  .mytext[readonly] {
      background-color: lavender;
      /*height: 34px;
      border: 1px solid lightgray;
      border-radius: 3px;*/
  }

  .progressmodal {
    display:    none;
    position:   fixed;
    /*position:   absolute;*/
    z-index:    1500;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 )
                url("/images/74H8.gif")
                50% 50%
                no-repeat;
                background-size: 50px;
  }

  .progressmodal2 {
    display:    none;
    position:   fixed;
    /*position:   absolute;*/
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 )
                url("/img/ajax4.gif")
                50% 50%
                no-repeat;
  }

  /* When the body has the loading class, we turn
     the scrollbar off with overflow:hidden */
  body.loading {
      overflow: hidden;
  }

  /* Anytime the body has the loading class, our
     modal element will be visible */
  body.loading .progressmodal {
      display: block;
  }

  body.loading .progressmodal2 {
      display: block;
  }

  .numberCircle {
    margin-bottom: 10px;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    padding: 8px;
    background: white;
    border: 2px solid gray;
    color: gray;
    text-align: center;
    font: 16px Arial, sans-serif;
    font-weight: bold;
  }

  div[data-room-available^="-"] {
    border: 2px solid red;
    color: red;
  }


  .fa.form-control-feedback {
      line-height: 34px; /* @input-height-base; */
  }
  .input-sm ~ .fa.form-control-feedback {
      line-height: 30px; /* @input-height-base; */
  }
  .input-lg ~ .fa.form-control-feedback {
      line-height: 46px; /* @input-height-base; */
  }

  .has-feedback-left input.form-control {
      padding-left: 34px; /* @input-height-base; */
      padding-right: 12px; /* @padding-base-horizontal */
  }

  .has-feedback-left .form-control-feedback {
      left: 0;
  }
  .form-horizontal .has-feedback-left .form-control-feedback {
      left: 12px; /* @grid-gutter-width / 2 */
  }

  .has-feedback-left input.input-sm {
    padding-left: 30px;
    @input-height-small;
  }
  .has-feedback-left input.input-lg {
    padding-left: 46px;
    @input-height-large;
  }

  /* autocomplete */
  .ui-front {
    z-index: 2000 !important;
  }

  ul.ui-autocomplete {
    z-index: 1200;
  }

  ul.ui-autocomplete.ui-menu {
    z-index: 1000;
  }

  /* datetime picker */
  div.ui-datepicker {
    z-index: 1200 !important;
  }

  .weekend {
      /*background-color: pink;
      font-weight: bold;
      */
      color: #fc7b47;
      font-weight: 700;
  }

  /* CSS used here will be applied after bootstrap.css */
  .modal-header-success {
      color: #fc7b47;
      padding:9px 15px;
      border-bottom:1px solid #eee;
      background-color: #fff;
      -webkit-border-top-left-radius: 5px;
      -webkit-border-top-right-radius: 5px;
       border-top-left-radius: 5px;
       border-top-right-radius: 5px;
  }
  .modal-header-warning {
  	color:#fff;
      padding:9px 15px;
      border-bottom:1px solid #eee;
      background-color: #f0ad4e;
      -webkit-border-top-left-radius: 5px;
      -webkit-border-top-right-radius: 5px;
       border-top-left-radius: 5px;
       border-top-right-radius: 5px;
  }
  .modal-header-danger {
  	color:#fff;
      padding:9px 15px;
      border-bottom:1px solid #eee;
      background-color: #d9534f;
      -webkit-border-top-left-radius: 5px;
      -webkit-border-top-right-radius: 5px;
       border-top-left-radius: 5px;
       border-top-right-radius: 5px;
  }
  .modal-header-info {
      color:#fff;
      padding:9px 15px;
      border-bottom:1px solid #eee;
      background-color: #5bc0de;
      -webkit-border-top-left-radius: 5px;
      -webkit-border-top-right-radius: 5px;
       border-top-left-radius: 5px;
       border-top-right-radius: 5px;
  }
  .modal-header-primary {
  	color:#fff;
      padding:9px 15px;
      border-bottom:1px solid #eee;
      background-color: #428bca;
      -webkit-border-top-left-radius: 5px;
      -webkit-border-top-right-radius: 5px;
       border-top-left-radius: 5px;
       border-top-right-radius: 5px;
  }

  p.ctad {
    margin-bottom: 2px;
    border-radius: 50%;
    width: 25px;
    height:25px;
    padding-top: 7px;
    background-color: lavender;
    border: 1px solid gray;
    color: red;
    text-align: center;
    font: 10px Arial, sans-serif;
    font-weight: bold;
  }

  /* make the cells output the value of their data-value attribute */
  td:after {
    content: attr(data-negative);
  }

  /* hide the output if the data-value is equal to "$0" */
  td[data-negative^="-"]:after {
    color: "red";
  }

  /* jquery UI month drop down */
  .ui-datepicker-month {
    background-color: red;
  }


  .modal-body {
      max-height: calc(100vh - 150px);
      overflow-y: auto;
  }

  .left-me {
    text-align: left !important;
  }

  .right-me {
    text-align: right;
  }

  .center-me {
    text-align: center;
  }

  .bold-me {
    font-weight: bold;
  }

  .thead-dark > tr > th {
    text-align: center;

  }

  .intl-tel-input {
    width: 100%;

  }

  input[type='tel'] {
    padding-left: 67px !important;
  }

  /*.iti-arrow{
    margin-left: 100px;
    background-color: red;
  }*/

  .brand-heading {
    /* font-size: 43px; */
    /*color: #fc7b47;*/
    color: #002b4f;
    font-size: 35px;
    font-weight: 800;
    text-decoration: none;
    margin: 0px;
    padding: 0px;
    /* border: 2px dashed tomato; */
    padding: 0 7px 0 7px;
  }
  #login-page a.btn.btn-link {
    width: 100%;
    color: #002b4f;
}
  .brand-heading:hover {
    color: #002b4f;
    text-decoration: none;
  }

  .login-btn {
    text-decoration: none;
    padding: 10px 30px;
    border: 1px solid;
    border-radius: 4px;
    color: #fc7b47;
    transition: 0.3s;
    margin: 5px;
  }

  .login-btn:hover {
    color: #4A4A4A;
  }
  
  .ap-plan::before {
    content: "AP Plan" !important;
    color: brown;
    width: 100%;
    height: 15px;
    top: 100px;
  }
  .map-plan::before {
    content: "MAP Plan" !important;
    color: brown;
    width: 100%;
    height: 15px;
  }
  .cp-plan::before {
    content: 'CP Plan' !important;
    color: brown;
    width: 100%;
    height: 15px;
  }
  .ep-plan::before {
    content: 'EP Plan' !important;
    color: brown;
    width: 100%;
    height: 15px;
  }

  .hide {
    display: none;
  }

  @media print {
    body {
      font-size: 12px;
    }
    .thead-dark > tr > th {
      background-color: lightgray;
      text-align: center;
      vertical-align: middle;
    }
    a[href]:after {
      content: none !important;
    }
    .no-print, .no-print * {
            display: none !important;
    }
  }   /* end of media print */

  .numberCircle {
    margin-bottom: 10px;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    padding: 8px;
    background: white;
    border: 2px solid gray;
    color: gray;
    text-align: center;
    font: 16px Arial, sans-serif;
    font-weight: bold;
    margin-top: 57px !important;
  }