
body{
    background: rgb(248, 250, 252);
    display: flex;
    flex-direction: column;
}

.container{
    flex: 1 0 auto;
}

footer{
    flex-shrink: 0;
}
@media only screen and (min-width : 1200px) {

    .container { max-width: 1300px; }

}

/*  HEADER STYLES  */



.settings-card .nav-link{
    color: #aaa;
}
.settings-card .nav-link:hover{
    color: #444;
}

.settings-card .nav-link.active{
    color: #6A3ce9;
}

.report-nav{
    padding: 1.5rem 2rem;
    box-shadow: 0 1px 10px rgba(130,130,134,.3);
    margin-bottom: 2rem;
    background: rgb(248, 250, 252);
}

.logo-separator{
    margin-left:1rem;
    margin-right:1rem;
}

.settings-card{
    min-height: calc(100vh - 141px);
}

.invoice-table{
    font-size: 1.5rem;
}

.not-paid{
    background: #ff00002c;
}

.not-paid a{
    color: #333333;
}

.invoice-table thead th{
    font-weight: bold;
    font-size: 1.2rem;
}

.invoice-table tbody td{
    font-size: 1.1rem;
}
ul.card-list{
    /* display: flex; */
    margin: auto;
}

.card-list li{
    align-items: center;
    display: inline-flex;
    width: 100%;
    text-align: left;
    padding: 5px 0;
}

.card-list .more-button{
    padding: 0 10px;
}

.card-list i.brand{

    font-size: 2.5em;
    height:40px;
    margin: auto;
    display: inline-flex;
    align-items: center;
    opacity: .2;
}

.card-list span.card-info{
    font-size: 1.5em;
    height:40px;
}

.card-list span.flex-height{
    height: 32px;
}
.card-list span.flex-height span{
    padding: 3px 4px;
}

.card-list a.dropdown{
    font-size: 2.5em !important;
    height:40px;
}

#report-notes{
    max-height: 70vh;
}
#report-notes td,#report-notes th{

    padding:4px 8px;
}

#report-notes td .report-note-cell{
    min-height: 135px;
    display: flex;
    justify-content:center;
    align-content:center;
    flex-direction:column;
}

#report-notes td:first-child{
    background: #d9e1f1 !important;
    text-align: center;
    padding: 20px;
}
#report-notes tbody tr{
    border-bottom: 1px solid #ccc;
}

#report-notes tr:first-child td, .reports-list tr.report-0{
    background: rgba(255, 251, 210, 0.4);
}

.historical-row tr:first-child td{
    background: transparent !important;
}




.report-list{
    border-left: 1px solid #ccc;
}


.reports-list td, .reports-list th{

    padding:4 8px;
}

.reports-list, #report-notes{
}

.reports-list.historical td:first-child{
    background: #d9e1f1 !important;
}

.historical-row{
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #ccc;
}

.historical-row #report-notes tbody tr{
    border: none
}

.reports-list th, #report-notes th{
    position:sticky;
    top:0;
    padding: 4px 8px 6px 8px;
    background: #fff;
    background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 94%, rgba(0,0,0,1) 94.5%, rgba(0,0,0,1) 100%);
}

.reports-list th:after{
    height: 1px;
    content:"";
    background: #333;
    position: absolute;
    bottom:-2px;
}
.reports-list table{
    width: 100%;
}

.reports-list tbody tr.group td{
    border-top: 1px solid #dedede;
}


.reports-list tbody tr.head:not(:first-child){
    border-top: 1px solid #888;
}



.report-hero{
    padding: 3rem;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0px 4px 15px rgba(20,20,20,0.1);
    margin-bottom: 2rem;
}

.report-hero h5{
    text-transform: uppercase;
    color: #6a7a8a;
    font-size:.95em;
    margin-bottom:1rem;
}

.report-hero td{
    padding: 4px 0px;
}

/* Call Log Section */

.call_log_container{
    background: #fff;
    color: #1a2a3a;
    padding-top: 1rem;
    margin-top: 2rem;
    border-radius: 4px;
    max-width: 1950px;
    margin: 2rem auto;
    box-shadow: 0px 4px 15px rgba(20,20,20,0.1);
}

.new_call_log_container{
    background: #fff;
    color: #1a2a3a;
    padding-top: 1rem;
    height: 100%;
    border-radius: 4px;
    max-width: 1950px;
    margin: 0;
    border-left: 1px solid #efefef;
}


.new_call_log_container #call_log_wrapper{
    /* margin-right: -0.75rem; */
    /* margin-left: -0.75rem; */
    /* position: static; */
}

.new_call_log_container table.dataTable td, .new_call_log_container  table.dataTable th{
    background: #fff;
}

.new_call_log_container #call_log_wrapper th{
    font-size: 13px;
    font-weight: 500;
}
.new_call_log_container th.messaging-util{
    border:none;
}

.new_call_log_container #call_log{
    height: auto;
    flex-grow: 1;

    overflow: auto;

    /* for Firefox */
    min-height: 0;
}

#call_log_wrapper{
    padding-top: 0rem;

}


#call_log_wrapper mark{
    background:rgba(246,225,121,0.25);
    color: inherit;
    border-radius: 2px;
    padding: .1em .3em;
}

#call_log_wrapper .page-link{
    padding: .25rem .5rem;
    font-size: .875rem;
    line-height: 1.5;
}

#call_log_wrapper .dataTables_scrollHead table{
    font-size: 11px;
    letter-spacing: -0.6px;
    margin-top: 1rem;
    background: #f0f0f0;
    border-bottom: 1px solid #7a8a9a;
}

#call_log_wrapper div.dataTables_paginate ul.pagination{
    justify-content: flex-start;
    margin: 0;
    padding-left: 1rem;
}

#call_log_wrapper .dataTables_scroll{
    border: 0px;
}

#call_log_wrapper div.dataTables_paginate{
    background: #fff;
    padding:1rem 0;
}

#call_log_wrapper div.dataTables_info{
    padding-left: 0rem;
    padding-bottom: 1rem;
}

.dataTables_scrollBody{
    position: relative;
    /* overflow: hidden !important; */
}



.call_log_container .search-header {

    padding-left:2rem;
}

#call_log_wrapper div.dataTables_filter{
    margin:0 0 0 1rem;
}
#call_log_wrapper div.dataTables_filter input, #call_log_wrapper div.dataTables_filter label{
    margin:0;
    width: 100%;
}

#call_log_wrapper div.dataTables_filter .btn{
    margin-top:5px;
    width: 49%;
}

#call_log_wrapper div.dataTables_filter .btn.search{
    margin-right:2%;
}

.spinner {
    position: absolute;
    left: 50%;
    top: 240px;
    height:60px;
    width:60px;
    margin:0px auto;
    margin-left: -30px;
    -webkit-animation: rotation 1.5s infinite linear;
    -moz-animation: rotation 1.5s infinite linear;
    -o-animation: rotation 1.5s infinite linear;
    animation: rotation 1.5s infinite linear;
    border-left:6px solid rgba(106,60,233,.15);
    border-right:6px solid rgba(106,60,233,.15);
    border-bottom:6px solid rgba(106,60,233,.15);
    border-top:6px solid rgba(106,60,233,1);
    border-radius:100%;
 }

 @-webkit-keyframes rotation {
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(359deg);}
 }
 @-moz-keyframes rotation {
    from {-moz-transform: rotate(0deg);}
    to {-moz-transform: rotate(359deg);}
 }
 @-o-keyframes rotation {
    from {-o-transform: rotate(0deg);}
    to {-o-transform: rotate(359deg);}
 }
 @keyframes rotation {
    from {transform: rotate(0deg);}
    to {transform: rotate(359deg);}
 }

#call_log{
    font-size: 11px;
    letter-spacing: -.5px;
    table-layout: fixed;
    height: 70vh;
    width:100% !important;
    opacity: 0;
    pointer-events: none;
}

.new_call_log_container #call_log{
    letter-spacing: 0;
    font-size: 12px;
}
#call_log.show{
    opacity: 1;
    pointer-events: auto;
}

#call_log .fa-check,  #call_log .fa-times{
    font-size: 2em;
}

#call_log .mdi-checkbox-blank-circle-outline{
    color: #999;
}

#call_log .mdi-check-circle, #call_log .mdi-checkbox-blank-circle-outline{
    font-size: 22px;
}

#call_log .fa-check, #call_log .mdi-check-circle{
    color: green;
}
#call_log .fa-times, #call_log .mdi-close{
    color: red;
}
#call_log th{
    text-align: center;
    vertical-align: bottom;
}
#call_log td{
    padding: 4px 8px;
    vertical-align: middle;
    text-align: center;
    border-bottom: 1px solid #ddd;
}


#call_log td.appt-None a, #call_log td.appt-True a, #call_log td.appt-False a{
    font-weight:bold;
    color: #aaa;
}

#call_log td.booked a{
    font-weight: bold;
    color: #aaa;
}


#call_log td.booked-True a,#call_log td.appt-True a{
    color: green;
}

#call_log td.booked-False a,#call_log td.appt-False a{
    color: red;
}

#call_log td.call-type{
    text-transform: capitalize;
}

#call_log tbody tr{
    height: 105px;
    background: #fff;
}

#call_log tbody td.notes{
    text-align: left;
    letter-spacing: -0.6px;
    padding-right:15px;
}

#call_log .current_week{
    background: rgb(253, 253, 235);
}

/* Override the right hand padding in the header  */
#call_log thead tr:last-child > th{
    padding: 4px 0;
    border-bottom: 2px solid #ccc;
    border-right: none;
}

td.decision_initial_response_skill_one, td.decision_buying_atmosphere_skill_one, td.decision_closing_skill_one, td.messaging-util, th.decision_initial_response_skill_one, th.decision_buying_atmosphere_skill_one, th.decision_closing_skill_one, th.messaging-util{
    border-left: 1px solid #ccc;
}

.log-border-left{
    border-left: 1px solid #ccc;
}

td.messaging-util{
    border-left: 1px solid #ccc;
}
th.messaging-util{
    border: 2px solid #f0f0f0;
}

.dataTable th.heading.ir{
    background: #ADE6E5;
}

.dataTable th.heading.ttl{
    background: #F9D6DA;
}

.dataTable th.heading.cs{
    background: #BDD7EE;
}

th.ir, th.ttl, th.cs{
    font-weight: bold;
    padding: 3px 0 4px 0;
    /* border-top: 1px solid #ddd; */
}


footer{
    background: #1a2a3a;
    color: #eeeeee;
    padding: 3rem 0 4rem 0;
}

footer .foot{
    border-top: 1px solid #eee;
    padding-top: 2rem;
}

/*
 * Container style
 */
 .ps {
    /* overflow: hidden !important; */
    /* overflow-anchor: none; */
    -ms-overflow-style: none;
    /* touch-action: auto; */
    -ms-touch-action: auto;
  }

  /*
   * Scrollbar rail styles
   */
  .ps__rail-x {
    display: none;
    opacity: 0;
    transition: background-color .2s linear, opacity .2s linear;
    -webkit-transition: background-color .2s linear, opacity .2s linear;
    height: 15px;
    /* there must be 'bottom' or 'top' for ps__rail-x */
    bottom: 0px;
    /* please don't change 'position' */
    position: absolute;
  }

  .ps__rail-y {
      z-index: 3;
      display: block;
      opacity: 1;
      transition: background-color .2s linear, opacity .2s linear;
      -webkit-transition: background-color .2s linear, opacity .2s linear;
      width: 15px;
    /* there must be 'right' or 'left' for ps__rail-y */
      right: 0;
    /* please don't change 'position' */
      position: absolute;
  }

  .ps--active-x > .ps__rail-x,
  .ps--active-y > .ps__rail-y {
    display: block;
    background-color: transparent;
  }

  .ps:hover > .ps__rail-x,
  .ps:hover > .ps__rail-y,
  .ps--focus > .ps__rail-x,
  .ps--focus > .ps__rail-y,
  .ps--scrolling-x > .ps__rail-x,
  .ps--scrolling-y > .ps__rail-y {
    opacity: 0.6;
  }

  .ps .ps__rail-x:hover,
  .ps .ps__rail-y:hover,
  .ps .ps__rail-x:focus,
  .ps .ps__rail-y:focus,
  .ps .ps__rail-x.ps--clicking,
  .ps .ps__rail-y.ps--clicking {
    background-color: #eee;
    opacity: 0.9;
  }

  /*
   * Scrollbar thumb styles
   */
  .ps__thumb-x {
    background-color: #aaa;
    border-radius: 6px;
    transition: background-color .2s linear, height .2s ease-in-out;
    -webkit-transition: background-color .2s linear, height .2s ease-in-out;
    height: 6px;
    /* there must be 'bottom' for ps__thumb-x */
    bottom: 2px;
    /* please don't change 'position' */
    position: absolute;
  }

  .ps__thumb-y {
    background-color: #aaa;
    border-radius: 6px;
    transition: background-color .2s linear, width .2s ease-in-out;
    -webkit-transition: background-color .2s linear, width .2s ease-in-out;
    width: 10px;
    /* there must be 'right' for ps__thumb-y */
    right: 2px;
    /* please don't change 'position' */
    position: absolute;
    cursor: hand;
  }

  .ps__rail-x:hover > .ps__thumb-x,
  .ps__rail-x:focus > .ps__thumb-x,
  .ps__rail-x.ps--clicking .ps__thumb-x {
    background-color: #999;
    height: 11px;
  }

  .ps__rail-y:hover > .ps__thumb-y,
  .ps__rail-y:focus > .ps__thumb-y,
  .ps__rail-y.ps--clicking .ps__thumb-y {
    background-color: #999;
    width: 11px;
  }

  /* MS supports */
  @supports (-ms-overflow-style: none) {
    .ps {
      overflow: auto !important;
    }
  }

  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .ps {
      overflow: auto !important;
    }
  }

  .messages{
      padding: 0;
  }

  .container-card{
      background: #fff;
      border-radius: 4px;
      box-shadow: 0px 5px 30px rgba(0,0,0,0.05);
  }

  @media only screen and (max-width: 992px) {
    .report-list {
        border-left: none;

    }
  }

  .new_call_log_container #call_log tbody tr{
      height: 50px;
      /* padding: 0 1rem; */
  }

  .new_call_log_container #call_log .current_week{
      background: #fff;
  }

  .new_call_log_container #call_log td.messaging-util{
      border-left: none;
  }

  .new_call_log_container #call_log_wrapper .dataTables_scrollHead table{
      border-bottom: none;
  }

  .new_call_log_container .dataTables_scrollBody{
      /* padding: 0 1em; */
      min-height: 200px;
  }

  .new_call_log_container .dataTables_scrollHead{
      border-bottom: 1px solid #1a2a3a !important;
  }
