/* BEGIN: Phoenix Tweaks */


/* END: Phoenix Tweaks */

hr {
  background: #d5d9de !important;
}

.content {
  margin-left: 220px;
  padding: 20px 40px 20px 30px;
}


.flex-center {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin-left: 9px;
  margin-right: 9px;
}

.theme-panel {
  position: fixed;
  right: -175px;
  top: 150px;
  z-index: 1020;
  background: #fff;
  padding: 8px;
  width: 175px;
  transition: right .2s linear;
  color: black !important;
  font-family: sans-serif !important;
  font-size: 13px !important;
  /*border-radius: 4px 0 0 4px;*/
}

  .theme-panel.theme-panel-lg {
    width: 20%; /* need 300, expanded view */
    right: -20%; /* collapsed view */
  }

.theme-panel-lg {
  border: 2px solid transparent !important; /*   border: 2px solid #a8acb1 !important; */
}

.theme-panel .theme-collapse-btn {
  height: 36px !important;
  border-radius: 3px !important;
}

.theme-panel.theme-panel-lg .theme-collapse-btn {
  top: 8%;
  border-top: 2px solid transparent !important;
  border-left: 2px solid transparent !important;
  border-bottom: 2px solid transparent !important;
}

.theme-panel .theme-collapse-btn {
  position: absolute;
  left: -30px;
  top: 10%;
  margin-top: -15px;
  width: 30px;
  height: 24px;
  line-height: 32px;
  font-size: 20px;
  color: #888;
  background: #fff;
  border-radius: 4px 0 0 4px;
  text-align: center;
  box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.15);
}


.theme-panel .theme-panel-item-list.separator-bar {
  border-top: 1px solid #bcbcbc;
  margin-top: 10px !important;
  padding-top: 10px !important;
}

.theme-panel .theme-panel-item-list {
  list-style: none;
  width: 42px !important;
}

.theme-panel .theme-panel-item-list-item {
  width: 36px !important;
  margin: 2px;
  padding: 2px 6px;
  border: 1px solid #cdcdcd;
  background: #dfdfdf !important;
  color: black !important;
  text-decoration: none;
  text-align: center;
  border-radius: 3px !important;
}

.theme-panel-item-list-item > a {
  color: black !important;
}

  .theme-panel .theme-panel-item-list-item:hover, .theme-panel-item-list-item > a:hover {
    background: #aaa !important;
    color: white !important;
    cursor: pointer;
  }

.hidden-item {
  display: none;
}






.widget-stats .stats-info h4 {
  font-size: 14px;
}

.widget-stats .stats-info p {
  font-size: 12px;
  font-weight: 300;
}

  .widget-stats .stats-info p strong {
    font-size: 12px;
    font-weight: 600;
  }



.nav-tabs {
  border: 1px solid transparent;
  background: #172A4D;
  color: #fff;
}

.nav > li > a {
  color: #fff;
}


.table.table-bordered.dataTable {
  color: #000 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  padding: 0% 0% !important;
}

  .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    border: none !important;
    background: none !important;
  }

  .dataTables_wrapper .dataTables_paginate .paginate_button:active {
    box-shadow: none !important;
  }

div.dataTables_info {
  color: #000;
}

/*
  REMOVING FOR PHOENIX
  .sidebar .nav li > a:hover {
  background: #bbb !important;
}*/

.content {
  margin-left: 220px;
  padding: 20px 40px 20px 30px;
}

.flex-center {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin-left: 9px;
  margin-right: 9px;
}

.theme-panel {
  position: fixed;
  right: -175px;
  top: 150px;
  z-index: 1020;
  background: #fff;
  padding: 8px;
  width: 175px;
  transition: right .2s linear;
  color: black !important;
  font-family: sans-serif !important;
  font-size: 13px !important;
}


.theme-panel-lg {
  border: 2px solid transparent !important; /*   border: 2px solid #a8acb1 !important; */
}

.theme-panel .theme-collapse-btn {
  height: 36px !important;
  border-radius: 3px !important;
}

.theme-panel.theme-panel-lg .theme-collapse-btn {
  top: 8%;
  border-top: 2px solid transparent !important;
  border-left: 2px solid transparent !important;
  border-bottom: 2px solid transparent !important;
}

.theme-panel .theme-collapse-btn {
  position: absolute;
  left: -30px;
  top: 10%;
  margin-top: -15px;
  width: 30px;
  height: 24px;
  line-height: 32px;
  font-size: 20px;
  color: #888;
  background: #fff;
  border-radius: 4px 0 0 4px;
  text-align: center;
  box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.15);
}


.theme-panel .theme-panel-item-list.separator-bar {
  border-top: 1px solid #bcbcbc;
  margin-top: 10px !important;
  padding-top: 10px !important;
}

.theme-panel .theme-panel-item-list {
  list-style: none;
  width: 42px !important;
}

.theme-panel .theme-panel-item-list-item {
  width: 36px !important;
  margin: 2px;
  padding: 2px 6px;
  border: 1px solid #cdcdcd;
  background: #dfdfdf !important;
  color: black !important;
  text-decoration: none;
  text-align: center;
  border-radius: 3px !important;
}

.theme-panel-item-list-item > a {
  color: black !important;
}

  .theme-panel .theme-panel-item-list-item:hover, .theme-panel-item-list-item > a:hover {
    background: #aaa !important;
    color: white !important;
    cursor: pointer;
  }

.hidden-item {
  display: none;
}


/*@media (max-width: 767px) {
  .header .navbar-brand {
    width: unset !important;
  }
}*/

.service-order-type {
  width: 41px !important;
  height: 26px !important;
  margin: 2px !important;
  margin-right: 30px !important;
  padding: 2px !important;
  text-align: center;
}

.widget-stats .stats-info h4 {
  font-size: 14px;
}

.widget-stats .stats-info p {
  font-size: 12px;
  font-weight: 300;
}

  .widget-stats .stats-info p strong {
    font-size: 12px;
    font-weight: 600;
  }


.table.table-bordered.dataTable {
  color: #000 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  padding: 0% 0% !important;
}

  .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    border: none !important;
    background: none !important;
  }

  .dataTables_wrapper .dataTables_paginate .paginate_button:active {
    background: none !important;
    box-shadow: none !important;
  }

table.dataTable tr:hover {
  background-color: #FCF8E3 !important;
}

.table-striped > tbody > tr:nth-child(odd):hover > td,
.table-striped > tbody > tr:nth-child(odd):hover > th {
  background: #FCF8E3 !important;
}

td.highlight {
  background: #FCF8E3 !important;
}


.widget-row > .widget-row-container {
  display: flex !important;
}

  .widget-row > .widget-row-container > .widget-stats-link-bottom {
    width: 100% !important;
    position: relative !important;
  }

.widget-stats-link-bottom {
  padding-bottom: 11% !important;
}

  .widget-stats-link-bottom > .stats-link {
    width: 100% !important;
    position: absolute !important;
    bottom: 0 !important;
  }

    .widget-stats-link-bottom > .stats-link > a {
      width: 100% !important;
      margin-top: -31px !important;
    }

.fa-question-circle, .fa-info-circle {
  cursor: pointer;
}

.reset-page-structure-btn-div {
  width: 73%;
  bottom: 10px;
  position: absolute;
}

.theme-panel.theme-panel-lg .theme-collapse-btn {
  top: 10%;
}

#location-notes, #customer-notes {
  color: #000 !important;
}

#notes {
  clear: left !important;
}

div[data-page] {
  min-height: 325px;
  display: flex;
  flex-direction: row;
}

#MiddleHolder-section div[data-field] {
  display: flex;
  margin: 10px 10px;
}

div[data-field] {
  flex-grow: 0;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  margin: 10px 0px;
  text-align: center;
}

#GeneralInformation-section {
  color: black !important;
}

/*#MiddleHolder-section {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  flex-grow: 0 !important;
  background-color: transparent !important;
  word-break: break-word;
}*/

#AccountSummary-section {
  flex-grow: 0 !important;
  /*background-color: transparent !important;*/
  color: black !important;
}

/*#MiddleHolder-section div[data-section] {
  display: flex;
  flex-direction: column;
}

#MiddleHolder-section div[data-block] {
  display: flex;
  flex-direction: row;
  height: 50% !important;
  margin: auto auto;
}*/


.electric-cs-icon {
  background-color: #c32b0e;
  color: #ffdda8;
}

.water-cs-icon {
  background-color: #24658f;
  color: #9df9ff;
}

.sewer-cs-icon {
  background-color: #5c9528;
  color: #b9d967;
}

.outdoorlight-cs-icon {
  background-color: #ffcc0f;
  color: #5f5b2f;
}

.sanitation-cs-icon {
  background-color: #d58e1f;
  color: #fae6c5;
}

.gas-cs-icon {
  background-color: #AB8F00;
  color: #FCFF97;
  /*fa-fire*/
}

.propane-cs-icon {
  background-color: #674ea7;
  color: #FFFF00;
  /*fa-fire-flame-simple*/
}

.internet-cs-icon {
  background-color: #00B9FF;
  color: #FFFFFF;
  /*fa-share-alt*/
}

.phone-cs-icon {
  background-color: #0043E1;
  color: #FFFFFF;
  /*fa-phone*/
}

.fiber-cs-icon {
  background-color: #007850;
  color: #CFFFE2;
  /*fa-exchange*/
}

.fire-protection-cs-icon {
  background-color: #D9D9D9;
  color: #D10000;
  /*fa-fire-extingusher*/
}

.service-icons {
  font-size: 1.1em;
  font-weight: 500;
  padding: .115em;
  line-height: 1.45em;
  text-align: center;
  border-radius: 50%;
  height: 1.5em;
  width: 1.5em;
}

.custsum-search-row, .custsum-search-row-header {
  text-align: center;
  /*text-align: left;*/
}

.fa-lightbulb-o:before {
  content: "\f0eb";
}

.fa, .fas {
  font-weight: 900 !important;
}

.inactive-customer-icon {
  color: #c32b0e;
}

.active-customer-icon {
  color: #5c9528;
}

.blink {
  animation: blink-animation 1s steps(5, start) infinite;
  -webkit-animation: blink-animation 1s steps(5, start) infinite;
}

@keyframes blink-animation {
  to {
    background: red;
  }
}

@-webkit-keyframes blink-animation {
  to {
    background: red;
  }
}

#graph-container {
  height: 100%;
}

#graph-types {
  text-align: center;
  width: 100%;
}

  #graph-types span {
    margin: 1% 1%;
  }

div[panel-name="IVRCallsSummary"] {
  opacity: 0.7;
}

.customer-notes-no-data {
  color: #777777;
  font-size: 15px;
}

.location-notes-no-data {
  font-size: 15px;
  float: left;
  color: #777777;
}

.customer-notes-data {
  display: inline;
  float: left;
  text-align: left;
}

.br-btn-login {
  background-color: #172A4D !important;
  color: #ffffff;
}

  .br-btn-login:hover {
    background: #172A4D !important;
    color: #ffffff;
    opacity: 0.5 !important;
  }

.login-container {
  background-color: rgba(128, 128, 128, 0.3) !important;
  border-radius: 2% !important;
  padding-top: 1% !important;
  padding-bottom: 1% !important
}

/*div[data-page="main"] > div:nth-child(2) {
  border-right: 1px gray solid;
  border-left: 1px gray solid;
}*/

#notes > .row > div:first-child {
  border-right: 1px gray solid;
}

#notes > div:last-child {
  padding-left: 2%
}

#notes > div.row {
  height: 100% !important;
}

.no-graph {
  text-align: center;
  vertical-align: middle;
  line-height: 300px;
}

.no-active-services {
  font-size: 20px;
  text-align: center;
  width: 100%;
  color: #777777;
}

.panel-with-tabs .panel-body {
  /*padding: 0 0 !important;*/
}

@media only screen and (max-width: 900px) {
  #MiddleHolder-section div[data-block] {
    display: block !important;
  }

  .panel-heading h4 {
    display: block !important;
  }
}

@media only screen and (max-width: 600px) {
  /*div[data-page="main"] > div:nth-child(2), div[data-page="main"] > div:first-child {
    border-right: 0px gray solid;
    border-left: 0px gray solid;
    border-bottom: 1px gray solid;
    margin-bottom: 15px;
  }*/

  .height-sm {
    min-height: 300px !important;
    height: auto !important;
  }

  #graph-container {
    height: 300px !important;
  }

  #location-notes {
    border-bottom: 1px solid #ccc;
    margin-bottom: 2%;
  }

  #notes > .row > div:first-child {
    border-right: none !important;
  }

  .hidden-xs {
    display: inherit !important;
    font-size: 10px !important;
  }

  .nav-link {
    padding: 0.5em 0.5em !important;
  }
}



.radio.radio-css label:before {
  background: #fff;
}

input[type="text"] {
  font-weight: 700;
  font-size: 12px;
  color: rgb(23, 42, 77);
}

  input[type="text"]::placeholder { /* Firefox, Chrome, Opera */
    font-weight: normal;
    font-size: 12px;
    opacity: .8;
  }

  input[type="text"]:-ms-input-placeholder { /* Internet Explorer 10-11 */
    font-weight: normal;
    font-size: 12px;
    opacity: .8;
  }

  input[type="text"]::-ms-input-placeholder { /* Microsoft Edge */
    font-weight: normal;
    font-size: 12px;
    opacity: .8;
  }

.nav-tabs > li > a {
  margin-right: 0 !important;
}



.tab-content {
  /*padding-bottom: 2% !important;*/
}

div.panel-heading.ui-sortable-handle > div.panel-heading-btn > .btn.btn-inverse {
  background-color: white;
  color: #64676B;
}

  div.panel-heading.ui-sortable-handle > div.panel-heading-btn > .btn.btn-inverse:hover {
    background: #d8dbe0;
    border-color: #d8dbe0;
  }




/*  BEGIN- Customer Summary form */

#special-handling-messages.height-sm, #services.height-sm, #service-orders.height-sm, #billing-history.height-sm {
  height: auto !important;
}

.custsum-form {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  width: 100%;
  justify-content: center;
  padding-left: 10px;
  padding-right: 10px;
}

  .custsum-form label {
    margin: 0 10px 5px 0;
  }

  .custsum-form select {
    vertical-align: middle;
    margin: 0 10px 5px 0;
    background-color: #fff;
    border: 1px solid #ddd;
  }

  .custsum-form input {
    vertical-align: middle;
    margin: 0 10px 5px 0;
    padding: 10px;
    background-color: #fff;
    border: 1px solid #ddd;
    width: 30% !important;
  }

  .custsum-form div button {
    text-transform: uppercase;
    letter-spacing: .09em;
    border-radius: 4px;
    color: #fff;
    background: rgb(23, 42, 77);
    text-align: center;
    transition: all 0.1s;
    cursor: pointer;
    font-size: 12px;
  }

    .custsum-form div button:hover {
      font-size: 12px;
      font-weight: 600;
      background: #fff;
    }

#custsum-submit-btn-div {
  padding-left: 1%;
  margin-bottom: 5px;
}



/*#custsum-submit-btn span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.1s;
}

  #custsum-submit-btn span:after {
    content: '\00bb';
    position: absolute;
    opacity: 0;
    top: 0;
    right: -20px;
    transition: 0.1s;
  }

#custsum-submit-btn:hover span {
  padding-right: 10px;
}

  #custsum-submit-btn:hover span:after {
    opacity: 1;
    right: 0;
  }*/



@media (max-width: 800px) {

  .custsum-form label {
    margin: 10px 10px 0 0;
    justify-content: left !important;
  }

  .custsum-form input {
    margin: 5px 0;
    width: 100% !important;
    padding-left: 15px;
  }

  .custsum-form select {
    margin: 5px 0;
  }

  .custsum-form {
    flex-direction: column;
    align-items: stretch;
  }


  #custsum-submit-btn-div {
    padding-top: 10px;
    text-align: center;
  }

  #custsum-submit-btn {
    padding-left: 40px;
    padding-right: 40px;
  }
}

/*  END - Customer Summary form */


tfoot, tfoot tr, tfoot tr th {
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important;
}

.currency {
  text-align: right !important;
}

#report-outage {
  font-size: 1.25em !important;
  text-transform: uppercase !important;
}

#report-outage {
  font-size: 1.25em !important;
  text-transform: uppercase !important;
}
/*#report-outage {
  text-align: center;
  margin-bottom: 15px;
  font-size: 1.15em;
}

  #report-outage a {
    color: #007aff;
  }

  #report-outage > a > span > i {
    font-weight: 600 !important;
  }*/


.disable-outage-report {
  color: gray !important;
}

  .disable-outage-report a {
    color: inherit !important;
  }


.badge {
  background: #f4c842;
  vertical-align: top;
  border-radius: 50%;
  line-height: 12px;
  /*line-height: 12px;*/
  margin-left: 3%;
  color: #000 !important;
}

.hide-badge {
  display: none !important;
}


@media (min-width:601px) and (max-width: 767px) {
  .nav-item .hidden-xs {
    display: inherit !important;
  }
}


g[aria-labelledby$="-title"] {
  display: none !important;
}

.validation-summary-errors {
  padding-bottom: 20px;
}

  .validation-summary-errors > ul > li {
    color: #ff1b30;
    font-size: 18px;
    font-weight: 500;
  }

.custsum-info-note {
  border: 0;
  background-color: #172a4d !important;
  padding: 10px 10px 5px 10px !important;
  margin-bottom: 3px !important;
}

  .custsum-info-note div:nth-child(1) {
    text-align: left !important;
    padding-right: 0 !important;
  }

  .custsum-info-note div:nth-child(2) {
    text-align: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .custsum-info-note div:nth-child(3) {
    text-align: right !important;
    padding-left: 0 !important;
  }

  .custsum-info-note h4 {
    color: #fff;
  }

.cs-tabbed-panel .panel-heading {
  border: none !important;
}

@media (min-width: 768px) and (max-width: 1000px) {
  #summary .col-md-5, #summary .col-md-2 {
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  /*div[data-page="main"] > div:nth-child(2) {
    border-right: 0px gray solid;
    border-left: 0px gray solid;
    border-top: 1px gray solid;
    border-bottom: 1px gray solid;
  }*/

  #report-outage {
    margin: 0 0 !important;
    padding: 0% 0% 5% 0% !important;
  }
}

#search-results-panel td, #search-results-panel th {
  text-align: center !important;
}

  #search-results-panel td ul li span {
    display: table-cell;
    text-align: left !important;
  }

#summary-tabs {
  border-top-left-radius: 6px !important;
  border-top-right-radius: 6px !important;
}

  #summary-tabs > ul > li > a {
    border-radius: 0 !important;
  }


.bs-tabs .nav-link {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}


.account-sum-panel-expand-btn {
  margin: 6px 10px 0 6px !important;
}


.ul-tabs-panel-heading h4 {
  padding: 10px 10px 5px 20px;
  color: #fff;
}


div[panel-name="ConsumptionGraph"] > .panel-heading {
  /*padding: 10px 15px 0 15px;*/
}

  div[panel-name="ConsumptionGraph"] > .panel-heading > ul {
    margin-top: -30px !important;
  }


.custsum-info-note > div > div {
  flex-wrap: nowrap !important;
}



@media (min-width:426px) and (max-width: 812px) {
  .custsum-info-note > div > div h4 {
    font-size: 1.15em !important;
  }
}


@media only screen and (max-width: 426px) {
  .custsum-info-note > div > div h4 {
    font-size: .9em !important;
  }
}

@media only screen and (max-width: 769px) {
  input[type="text"]::placeholder { /* Firefox, Chrome, Opera */
    font-size: .75em !important;
  }

  input[type="text"]:-ms-input-placeholder { /* Internet Explorer 10-11 */
    font-size: .75em !important;
  }

  input[type="text"]::-ms-input-placeholder { /* Microsoft Edge */
    font-size: .75em !important;
  }

  .widget-row-container {
    min-height: 180px !important
  }
}

@media (min-width:768px) and (max-width: 1024px) {
  .widget-row-container {
    min-width: 100% !important;
    min-height: 180px !important
  }
}

@media (min-width:769px) and (max-width: 1024px) {
  .widget-row-container > .widget-stats .stats-info p {
    font-size: 1.15em !important;
  }

    .widget-row-container > .widget-stats .stats-info p strong {
      font-size: 1.15em !important;
    }
}

.panel-expand #graphs, .panel-expand #notes, .panel-expand #summary, .panel-expand #services, .panel-expand #special-handling-messages, .panel-expand #service-orders {
  margin-top: 2%;
}


  .panel-expand #graphs #graph-container, .panel-expand #consumtion-graph-div, .panel-expand #SCADA24hr, .panel-expand #SCADA4hr {
    min-height: 300px;
    width: 100% !important;
  }



/**Joel Menu Changes*/
.fa-menu-icon {
  font-size: 2em !important;
}

a.app-menu-item {
  text-decoration: none;
  color: #172A4D !important;
}

.app-menu-icon {
  padding: 5px 4px 2px 2px !important;
}

.app-menu-label {
  padding-top: 1px !important;
  padding-bottom: 1px !important;
}

.app-menu-label-header {
  font-size: 16px !important;
  font-weight: bolder !important;
  line-height: .5em !important;
  margin: 0 !important;
  padding: 0 !important;
}

.app-menu-label-text {
  line-height: .5em !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: .9em !important;
}

.app-menu-item {
  display: flex;
  flex-direction: row !important;
  border: 1px solid #10284a !important; /*bbb*/
  padding-top: 4px !important;
  padding-left: 3px !important;
  border-radius: 5px !important;
  margin-bottom: 5px !important;
  vertical-align: middle !important;
}

  .app-menu-item.active {
    border: 1px solid #aaa !important;
    background-color: #172A4D !important;
    color: white !important;
  }

  .app-menu-item:hover {
    border: 1px solid #aaa !important;
    background-color: #172A4D !important;
    color: white !important;
    cursor: pointer !important;
  }

  .app-menu-item.active:hover {
    border: 1px solid #aaa !important;
    background-color: #172A4D !important;
    color: white !important;
    cursor: pointer !important;
  }


.application-nav-item-icon {
  padding-top: 1px !important;
  padding-bottom: 1px !important;
  color: #172A4D !important;
}

/*  .application-nav-item-icon.active {
    color: white !important;
    cursor: pointer;
  }

    .application-nav-item-icon.active:hover {
      color: white !important;
      cursor: pointer;
    }

  .application-nav-item-icon:hover {
    color: white !important;
    cursor: pointer;
  }
*/

.flex-column {
  display: flex;
  flex-direction: column;
  margin-left: 0px;
  margin-right: 0px;
}





/**distance between side bar applications and left navigation menu */
/*
  REMOVING FOR PHOENIX
  .sidebar .nav > li:nth-child(2) {
  margin-top: 5% !important;
}*/

.service-buttons-div {
  padding: 5px 0 5px 0;
  justify-content: center;
}

.salesGraph-buttons-div {
  padding: 20px 0 5px 0;
  justify-content: center;
}

.service-button {
  background: #0085CA !important;
  color: white !important;
  border: none !important;
}

  .service-button.active {
    background: #005C97 !important;
    color: white !important;
  }

  .service-button:hover {
    background: #005C97 !important;
    color: white !important;
  }

  .service-button.active:hover {
    background: #005C97 !important;
    color: white !important;
  }



.tabpanel-innerTabs-div {
  justify-content: center;
}

.tabpanel-innerTab {
  background: #0085CA !important;
  color: white !important;
  border: none !important;
  border-radius: 0;
}

  .tabpanel-innerTab.active {
    background: #005C97 !important;
    color: white !important;
  }

  .tabpanel-innerTab:hover {
    background: #005C97 !important;
    color: white !important;
  }

  .tabpanel-innerTab.active:hover {
    background: #005C97 !important;
    color: white !important;
  }

.tabpanel-innerTabs-div > div.nav {
  border-bottom-left-radius: 6px !important;
  border-bottom-right-radius: 6px !important;
}

#graphs {
  padding-bottom: 20px !important;
}





.sales-graph-service-buttons {
  display: flex !important;
  justify-content: center !important;
  margin-top: -30px !important;
}

.panel-body .panel-body {
  border: 1px solid #dedede;
  text-overflow: clip;
}




/*Start - Generic Meter Lookup*/
.col-form-label {
  text-align: right;
  text-overflow: ellipsis;
}

@media (max-width:768px) {
  .col-form-label {
    text-align: left;
  }
}

.checkbox.checkbox-css label:before {
  background: #fff;
}

.checkbox.checkbox-css input:checked + label:before {
  background: #348fe2;
  border-color: #348fe2;
}

.view-report {
  justify-content: center !important;
}
/*End - Generic Meter Lookup*/

/*Start - Service Orders Due Today on Dashboard*/
.service-orders-widget-list {
  min-height: 350px !important;
  max-height: 350px !important;
  overflow: auto;
}

.panel-expand > .panel-body > .service-orders-widget-list {
  max-height: 100% !important;
  overflow: auto;
}

/*End - Service Orders Due Today on Dashboard*/

.panel-expand-overrides-scrollbar {
  overflow-y: hidden !important;
}
/*  Begin - Dashboard Calendar  */

/*.bposDashCalendar div.panel-body {
    height: calc(100% - 20px) !important;
  }

#calendar {
  min-height: 634px !important;
  height: 100% !important;
}

  #calendar div.fc-view-container {
    height: calc(100% - 7%) !important;
  }

  #calendar,
  #calendar > div.fc-view-container > div,
  #calendar > div.fc-view-container > div > table,
  #calendar > div.fc-view-container > div > table tbody,
  #calendar > div.fc-view-container > div > table tbody tr,
  #calendar > div.fc-view-container > div > table tbody tr > .fc-widget-content,
  #calendar > div.fc-view-container > div > table tbody tr > .fc-widget-content > div,
  #calendar > div.fc-view-container > div > table tbody tr > .fc-widget-content > div > div {
    height: 100% !important;
  }

    #calendar > div.fc-view-container > div > table tbody tr > .fc-widget-content > div > div .fc-row {
      height: 16.66% !important;
    }



@media (min-width:768px) and (max-width: 1024px) {
  .calendar-row-container {
    min-width: 100% !important
  }

  .orders-due-today-row-container {
    min-width: 100% !important
  }
}

.bposDashCalendar {
  color: #1f2225;
}*/


@media (min-width:835px) and (max-width: 1420px) {

  .calendar-row-container {
    -ms-flex: unset;
    flex: unset;
    max-width: unset;
    width: 100%;
  }

  .orders-due-today-row-container {
    -ms-flex: unset;
    flex: unset;
    max-width: unset;
    width: 100%;
    display: flex;
  }

    .orders-due-today-row-container > div {
      position: relative;
      width: 50%;
    }

  .orders-due-today {
    margin-right: 30px;
  }

  .orders-due-today-row-container > div.panel-expand {
    width: 100%;
  }
}

@media (max-width: 500px) {

  .fc-toolbar {
    display: block;
    text-align: center;
    padding: 5px;
  }
}


.div-no-service-orders > p {
  justify-content: center;
  text-align: center;
  color: gray;
  font-size: large;
  margin-top: 1rem;
}


.ddSettings {
  padding: 0 !important;
}

.bpos-top-navbar {
  width: 100% !important;
}

.bposOrbitLogo {
  float: left !important;
}


@media (max-width: 550px) {
  .ddSettings {
    float: left !important;
  }

  .bposOrbitLogo {
    float: right !important;
  }
}

input[type=checkbox], input[type=radio] {
  vertical-align: middle;
}

#statements {
  padding: 30px 0 30px 0 !important;
}

.statementsContent {
  font-size: 1.25em;
  width: 81.875%;
  margin: 0px auto;
}

.statementsColumns {
  text-align: center;
  -moz-column-width: 11.5em;
  /* Firefox */
  -webkit-column-width: 11.5em;
  /* webkit, Safari, Chrome */
  column-width: 14.5em;
}
  /*remove standard list and bullet formatting from ul*/
  .statementsColumns ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
  }
    /*correct webkit/chrome uneven margin on the first column*/
    .statementsColumns ul li:first-child {
      margin-top: 0px;
    }





.dataTables_processing {
  background: gray !important;
  color: white !important;
  z-index: 1000;
}

.dataTables_info-div {
  display: flex;
  justify-content: center;
}

.dataTables_info {
  margin-top: 
    0px !important;
}



/*  iPad size  */
@media screen and (max-width: 769px) {
  .dataTables_filter-div {
    padding-bottom: 15px;
    display: flex;
    justify-content: center;
  }

  .dataTables_info {
    margin-top: 20px !important;
  }

  .dt-buttons {
    display: flex;
    justify-content: center;
  }
}




/*  iPhone size  */
@media screen and (max-width: 380px) {
  .dataTables_filter-div {
    padding-bottom: 15px;
    float: none !important;
  }

  .dataTables_info {
    margin-top: 20px !important;
  }
}


/*Calendar New Event*/
#calendar-new-event textarea {
  resize: none;
}

input.days-input {
  width: 45px !important;
}

input.months-input {
  width: 45px !important;
}

input.date-input {
  width: 175px !important;
}

.form-control-2 {
  display: inline !important;
  height: calc(1.5em + .75rem + 2px);
  padding: .375rem .75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: .25rem;
}

.inline {
  display: inline !important;
}

select {
  height: calc(1.5em + .75rem + 2px) !important;
  padding: .375rem .75rem !important;
  font-size: 12px !important; /* fix jdb 9/17/19 */
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: #495057 !important;
  background-color: #fff !important;
  background-clip: padding-box !important;
  border: 1px solid #ced4da !important;
  border-radius: .25rem !important;
}

.full-screen {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  top: 0 !important;
  left: 0 !important;
}







@media (min-width: 580px) {
  #calendar-add-event-dialog .modal-dialog {
    max-width: 800px !important;
  }
}





#calendar-event-delete-confirm .modal-body p {
  color: #000000 !important;
}

input.days-input {
  width: 45px !important;
}

#calendar-new-event select {
  font-size: 12px !important;
}


#recurring-pattern-fieldset, #recurring-range-fieldset {
  margin-left: 1px !important;
}


#recurring-pattern-fieldset, #recurring-range-fieldset {
  /*border: solid 1px gray;*/
}

  #recurring-pattern-fieldset legend, #recurring-range-fieldset legend {
    width: auto;
    padding: 1%;
    font-size: 12px;
    border: none;
    color: black;
  }

#calendar-filter {
  margin-bottom: 1%;
}

.fc {
  color: #000 !important;
}

.fc-icon-chevron-left:before, .glyphicon.glyphicon-arrow-left:before {
  content: "\f053";
}

.fc-icon-chevron-right:before, .glyphicon.glyphicon-arrow-right:before {
  content: "\f054";
}

.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: Font Awesome\ 5 Free, Font Awesome\ 5 Pro, FontAwesome !important;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/*Calendar New Event*/

.dark-hr {
  background: #A6A9AD;
}



/* DEBUG CSS FOR... UHM... DEBUGGING */
.debug-bg {
  background-color: yellow !important;
  color: black !important;
}

.modal-content {
  /* overzealous !important fix */
  padding-left: 10px; /*!important;*/
  padding-right: 10px; /*!important;*/
}



.parsley-error {
  background: none !important;
}

.parsley-success {
  background: none !important;
  border-color: inherit !important;
}

.custom-button-size {
  width: 78px !important;
}

.inline-form-control {
  display: inline !important;
}


.center-block {
  display: block;
  margin-right: auto;
  margin-left: auto;
  white-space: nowrap;
}




.modal-content-text {
  padding-top: calc(.375rem + 1px) !important;
  padding-bottom: calc(.375rem + 1px) !important;
  font-weight: normal !important;
}



.form-control {
  font-weight: normal !important;
}

  .form-control[readonly] {
    border: 1px solid #bec6ce !important;
    background: inherit !important;
    opacity: inherit !important;
  }


.sidebar .slimScrollBar {
  cursor: n-resize !important;
  background: #777 !important;
}


.login-select {
  background: rgba(0,0,0,0.5) !important;
  border: 1px solid transparent !important;
  color: #fff !important;
  height: 48px !important;
  font-size: 14px !important;
}

.mdm-stats-link {
  margin-bottom: 20px !important;
}

.mdm-btn-group {
  margin-bottom: 15px !important;
}

.mdm-btn {
  margin-right: 1px !important;
}


a.btn.mdm-btn.active {
  background: rgba(0,0,0,0.6);
}

.widget-stats .stats-info h6 {
  font-size: 11px !important;
  color: #fff !important;
  font-weight: normal !important;
}

.service-stats-row {
  max-height: 47px;
  overflow: auto;
}

.stats-info .service-stats-row p {
  font-size: 11px !important;
  font-weight: bold !important;
}

.widget-stats .servicesum-stats-link a:hover, .widget-stats .servicesum-stats-link a:focus {
  background: rgba(0,0,0,0.4);
}

.theme-servicesum-stats {
  background-color: #F2871D !important;
}

.theme-countduetoday-stats {
  background-color: #0B90A1 !important;
}

.theme-countoutstanding-stats {
  background-color: #F85A3F !important;
}


.widget-stats .countduetoday-stats-info h6 {
  font-size: 11px !important;
  color: #fff !important;
  font-weight: normal !important;
}

.widget-stats-error {
  word-wrap: break-word;
  max-height: 100px !important;
  color: red;
}

.widget-row-container {
  max-height: 175px !important;
}

.countduetoday-widget-row > div > p {
  font-size: 11px !important;
  font-weight: bold !important;
}

.countoutstanding-widget-row > div > p {
  font-size: 11px !important;
  font-weight: bold !important;
}

.widget-btn-txt {
  font-size: 11px !important;
  text-transform: capitalize !important;
}

  .widget-btn-txt p {
    padding: 0 !important;
    margin-bottom: 4px !important;
  }

.mdm-btn-group a {
  line-height: 16px !important;
}

.mdm-totals-btn-group a {
  padding-top: 8px !important;
  padding-bottom: 10px !important;
}


.bootstrap-datetimepicker-widget.dropdown-menu {
  z-index: 9999 !important;
}




/* jdb 2022-06-24 */
/* sidebar menu collapse */
.mini-sidebar-collapse-btn {
  background-color: #c8cbcf !important;
  color: gray !important;
  /*border: 1px solid #000;*/
  margin-left: 5px;
  border-radius: 4px !important;
}

.sidebar-submenu-off {
  display: none !important;
}

.sidebar-submenu-on {
  display: block !important;
}


/* jdb menu/display bugs for mobile and phone sizes */

@media (max-width: 550px) {
  .header .navbar-brand {
    width: 0px !important;
    margin-right: 0px;
    padding: 10px 16px;
  }

  #mini-collapse-button {
    display: none;
  }
}



/* used to manage menu options: three states - full, mini and gone */
.ct-full {
  margin-left: 226px !important; /* 230 */
}

.ct-mini {
  margin-left: 60px !important;
  border: none !important;
}

.ct-gone {
  margin-left: 16px !important; /* 20 */
  border: none !important;
}




.sb-full {
  width: 226px !important; /* 230 */
}

.sb-mini {
  width: 70px !important;
  border: none !important;
}

.sb-gone {
  width: 36px !important; /* 40 */
  border: none !important;
}




.hidden-menu-item {
  display: none !important;
}




.border-bottom {
  border-bottom: 1px solid #bcc2c7 !important;
}

.border-none {
  border: none !important;
}



@media (max-width: 767px) {
  .header .navbar-toggle, .header .navbar-toggle.pull-left {
    margin-right: 0px;
  }

  #mini-collapse-button {
    display: none;
  }

  .header .navbar-brand {
    width: 245px !important;
  }

  .page-header-fixed {
    padding-top: 62px;
  }

  #min-collapse-button {
    display: none;
  }


  .ct-full {
    margin-left: 5px !important; /* 230 */
  }

  .ct-mini {
    margin-left: 5px !important;
    border: none !important;
  }

  .ct-gone {
    margin-left: 5px !important; /* 20 */
    border: none !important;
  }

  .sidebar-bg {
    width: 0px; /* 130px */
  }
}




/* jdb 8/3/2022 */
.mdm-integration-dialog {
  width: 550px !important;
  max-width: 550px !important;
  max-height: 500px !important;
}

.meter {
  border: 1px solid #dedede !important;
  background-color: #efefef !important;
  border-radius: 3px !important;
  padding: 3px !important;
  margin-right: 5px !important;
  margin-bottom: 7px !important;
  min-width: 30% !important;
  font-size: 1em !important;
}

.scrollermania {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-content: flex-start !important;
  height: 175px !important;
  display: flex !important;
  overflow: auto !important;
}

.red {
  /*border: 1px solid orange;*/
}

.blue {
  /*border: 2px solid blue;*/
}

.purple {
  /*border: 2px solid blue;*/
}

/* this is to prevent the datatable td's that have inline buttons from wrapping around causing crowding */
td:has(a.btn) {
  white-space: nowrap;
}

.msoCalCard {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  pointer-events: auto;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: .3rem;
  outline: 0;
  padding: 20px;
  border: none;
  box-shadow: 0 5px 15px rgba(0, 0, 0, .3);
  border-radius: 3px;
  max-width: 800px;
}

  .msoCalCard::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: #005c97;
  }

.msoCalHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 18px;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #f0f0f0;
}

.msoCalHyperLink {
  font-weight: 700;
  color: #005c97;
  letter-spacing: 1px;
  text-decoration: none;
  transition: all 0.3s ease;
}

  .msoCalHyperLink:hover {
    color: #007bb8;
    text-decoration: underline;
    transform: translateY(-1px);
  }


.cal-address-link {
    color: #005c97;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border-radius: 4px;
    transition: all 0.2s;
}

  .cal-address-link:hover {
    background: rgba(33, 150, 243, 0.1);
    text-decoration: underline;
  }

.cal-map-icon {
  font-size: 16px;
  opacity: 0.7;
}

.msoCalCloseBtn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #f0f0f0;
  border: none;
  color: #666;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

  .msoCalCloseBtn:hover {
    background: #e0e0e0;
  }

.msoCalCustomerSection {
  background: linear-gradient(135deg, #005c9720, #005c9730);
  padding: 20px;
  border-radius: 15px;
  /*margin-bottom: 10px;*/
}

.msoCalMapSection {
  width: 100%;
  margin: 10px 0;
  border-radius: 15px;
}

.msoCalMapContainer {
  height: 400px !important;
  width: 100% !important;
  display: block !important;
  position: relative;
  overflow: hidden;
  border-radius: 15px;
}

.msoCalSection {
  padding: 20px;
  border-radius: 15px;
  margin-bottom: 10px;
}

.msoCalSectionTitle {
  font-weight: 600;
  color: #005c97;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 15px;
  position: relative;
}

  .msoCalSectionTitle::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 30px;
    height: 2px;
    background: #005c97;
  }

.msoCalInfoGrid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.msoCalInfoItem {
  background: #f8f9ff;
  padding: 10px;
  border-radius: 12px;
  border-left: 4px solid #005c97;
  transition: transform 0.3s ease;
  flex: 1 1 auto;
  min-width: 200px;
}

  .msoCalInfoItem:hover {
    transform: translateY(-1px);
  }

.msoCalInfoLabel {
  font-weight: 600;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 5px;
}

.msoCalInfoValue {
  font-weight: 500;
  color: #333;
  line-height: 1.4;
}

.msoCalScheduleBadge {
  display: inline-flex;
  align-items: center;
  background: linear-gradient(135deg, #005c97, #007bb8);
  color: white;
  padding: 12px 20px;
  border-radius: 25px;
  font-weight: 600;
  box-shadow: 0 5px 15px rgba(0, 92, 151, 0.3);
}

  .msoCalScheduleBadge::before {
    content: '📅';
    margin-right: 8px;
  }

/* Start - MSO Calendar modal dialog styling */
.msoCalCard {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  pointer-events: auto;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: .3rem;
  outline: 0;
  padding: 20px;
  border: none;
  box-shadow: 0 5px 15px rgba(0, 0, 0, .3);
  border-radius: 3px;
}

.msoCalCard::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: #005c97;
}

.msoCalHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 18px;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #f0f0f0;
}

.msoCalHyperLink {
  font-weight: 700;
  color: #005c97;
  letter-spacing: 1px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.msoCalHyperLink:hover {
  color: #007bb8;
  text-decoration: underline;
  transform: translateY(-1px);
}


.cal-address-link {
  color: #005c97;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 4px;
  transition: all 0.2s;
}

.cal-address-link:hover {
  background: rgba(33, 150, 243, 0.1);
  text-decoration: underline;
}

.cal-map-icon {
  font-size: 16px;
  opacity: 0.7;
}

.msoCalCloseBtn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #f0f0f0;
  border: none;
  color: #666;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.msoCalCloseBtn:hover {
  background: #e0e0e0;
}

.msoCalCustomerSection {
  background: linear-gradient(135deg, #005c9720, #005c9730);
  padding: 20px;
  border-radius: 15px;
  /*margin-bottom: 10px;*/
}

.msoCalMapSection {
  width: 100%;
  margin: 10px 0;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, .3);
}

.msoCalMapContainer {
  height: 400px !important;
  width: 100% !important;
  display: block !important;
  position: relative;
  overflow: hidden;
  border-radius: 15px;
}

.msoCalSection {
  padding: 20px;
  border-radius: 15px;
  margin-bottom: 10px;
}

.msoCalSectionTitle {
  font-weight: 600;
  color: #005c97;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 15px;
  position: relative;
}

.msoCalSectionTitle::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 30px;
  height: 2px;
  background: #005c97;
}

.msoCalInfoGrid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.msoCalInfoItem {
  background: #f8f9ff;
  padding: 10px;
  border-radius: 12px;
  border-left: 4px solid #005c97;
  transition: transform 0.3s ease;
  flex: 1 1 auto;
  min-width: 150px;
}

.msoCalInfoItem:hover {
  transform: translateY(-1px);
}

.msoCalInfoLabel {
  font-weight: 600;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 5px;
}

.msoCalInfoValue {
  font-weight: 500;
  color: #333;
  line-height: 1.4;
}

.msoCalScheduleBadge {
  display: inline-flex;
  align-items: center;
  background: linear-gradient(135deg, #005c97, #007bb8);
  color: white;
  padding: 12px 20px;
  border-radius: 25px;
  font-weight: 600;
  box-shadow: 0 5px 15px rgba(0, 92, 151, 0.3);
}

.msoCalScheduleBadge::before {
  content: '📅';
  margin-right: 8px;
}

@media (max-width: 768px) {
  
}

@media (min-width: 580px) {

}
/* End - MSO Calendar modal dialog styling */


#context-menu {
  display: none;
  position: absolute;
  background: #fff;
  padding: 10px;
  border: 1px solid #ccc;
  z-index: 999;
}