body {
    background: #fafafa;
    color: #333333;
    margin-top: 5rem;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  a:hover {
    text-decoration: none;
  }

  h1, h2, h3, h4, h5, h6 {
    color: #444444;
  }

  pre {
    white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
  }

  .bg-steel {
    background-color: #5f788a;
  }

  .bg-staging {
    background-color: #d24b11;
  }

  .lease-card .modal-content .btn-important {
    background-color: #f2a98e !important;
  }

  .site-header .navbar-nav .nav-link {
    color: #cbd5db;
  }

  .site-header .navbar-nav .nav-link:hover {
    color: #ffffff;
  }

  .site-header .navbar-nav .nav-link.active {
    font-weight: 500;
  }

  .content-section {
    background: #ffffff;
    padding: 10px 20px;
    border: 1px solid #dddddd;
    border-radius: 3px;
    margin-bottom: 20px;
  }

  .article-title {
    color: #444444;
  }

  a.article-title:hover {
    color: #428bca;
    text-decoration: none;
  }

  .article-content {
    white-space: pre-line;
  }

  .article-img {
    height: 65px;
    width: 65px;
    margin-right: 16px;
  }

  .article-metadata {
    padding-bottom: 1px;
    margin-bottom: 4px;
    border-bottom: 1px solid #e3e3e3
  }

  .article-metadata a:hover {
    color: #333;
    text-decoration: none;
  }

  .article-svg {
    width: 25px;
    height: 25px;
    vertical-align: middle;
  }

  .account-img {
    height: 125px;
    width: 125px;
    margin-right: 20px;
    margin-bottom: 16px;
  }

  .account-heading {
    font-size: 2.5rem;
  }

  .flash {
    background-color:powderblue;
    padding: 2px 10px 2px 10px;
  }

  .payment-card {
    margin-bottom: 5rem;
  }

  .cellheader {
    border-bottom: 1px solid #818182;
  }

  .cell100 {
    width: 100%;
    padding: 0 0 0 10px;
  }

  .cell50, .cell50left, .cell50right {
    width: 50%;
    padding: 0 0 0 10px;
  }

  .cell50left {
    display: inline;
  }

  .cell50right {
    display: inline;
  }

  .cell50right input {
    width: 100%;
  }

  button {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
      -khtml-user-select: none; /* Konqueror HTML */
        -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; 

  }

  .button-disabled-True {
    pointer-events: none !important;
    background-color: #CCC !important;
    color: #818182 !important;
    border-radius: .3em;
    border-color: #818182 !important;
  }

  .button-disabled-False, .button-disabled-None {
    background-color: #30d730 !important;
    border-radius: .3em !important;
    padding: .1em .3em !important;
    cursor: pointer;
    border: 1px solid #9f9f9f;
  }

  .payment-card>:not(caption)>*>* {
    padding: .1em;
  }
  .payment-card>:not(:last-child)>:last-child>* {
    border-bottom-color: #101010;
  }
  .is-striped { background-color: rgba(233,200,147,0.2) }


  /* Table column sizing
  ================================== */
  .cell-100  { width: 100%; max-width: 1320px;}
  .cell-80  { width: 80%; max-width: 1056px;}
  .cell-70  { width: 70%; max-width: 924px;}
  .cell-60  { width: 60%; max-width: 792px;}
  .cell-50  { width: 50%; max-width: 660px;}
  .cell-45  { width: 45%; max-width: 594px;}
  .cell-40  { width: 40%; max-width: 528px;}
  .cell-35  { width: 35%; max-width: 462px;}
  .cell-30  { width: 30%; max-width: 396px;}
  .cell-25  { width: 25%; max-width: 330px;}
  .cell-24  { width: 24%; max-width: 316px;}
  .cell-22  { width: 22%; max-width: 290px;}
  .cell-20  { width: 20%; max-width: 264px;}
  .cell-18  { width: 18%; max-width: 237px;}
  .cell-16  { width: 16%; max-width: 211px;}
  .cell-15  { width: 15%; max-width: 198px;}
  .cell-12  { width: 12%; max-width: 158px;}
  .cell-10  { width: 10%; max-width: 132px;}
  .cell-8   { width: 8%; max-width: 105px;}
  .cell-6   { width: 6%; max-width: 79px;}
  .cell-5   { width: 5%; max-width: 66px;}
  .cell-4   { width: 4%; max-width: 52px;}

  /* Apply styles
  ================================== */
  .Rtable {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 3em 0;
    padding: 0;
    box-shadow: 0 0 40px rgba(0,0,0,0.2);
  }
  .Rtable-row {
    width: 100%;
    display: flex;
  }
  .Rtable-cell {
    box-sizing: border-box;
    flex-grow: 1;
    padding: 0.8em 1em;
    overflow: hidden; 
    list-style: none;
  }
  .column-heading {
    background-color: #428bca;
    color: white;
    padding: 1em;
  }

  .Rtable-cell--heading {
    display: none;
  }

  .cell-actions {
    font-size: large;
  }

  .cell-actions i {
    padding: 5px;
    color: #88be6a;
  }

  .numberCircle {
      border-radius: 50%;
      width: 16px;
      height: 16px;
      padding: .5em !important;
      background: #CCC;
      border: 2px solid #666;
      color: #666;
      text-align: center;
      font: 16px Arial, sans-serif;
  }

  .claude-room-number {
    color: #fff;
    text-shadow: #000;
    text-shadow: 1px 1px 0 #000
  }

  .claude-room-number a {
    text-decoration: none;
  }

  .page-header {
    height: 4rem;
    padding: 0 0 1rem 0;
    position:relative;
  }

  .bottom-right {
    position:absolute;
    bottom:10px;
    right:0;
    text-align: right;
  }

  #createLeaseModal .modal-content{
    width: 600px !important;
  }
  
  .modal-xsm {
    float: left;
    max-width: 250px;
    margin-left: 10px;
  }
  
  .modal-xlg {
    max-width: 100%;
    margin: 1.75rem 0;
  }

  .max450 {
    max-width: 450px;
  }

  .max450 .col input, .max450 .col select {
    width: 100px;
    max-width: 150px;
  }

  .max250 {
    max-width: 250px;
  }

  .guest-name-box {
    background-color: #b5cbdb;
    border: 1px solid #7094ad;
    padding: 5px;
  }

  .room-name-box {
    background-color: #f7dfcb;
    border: 1px solid #c7842d;
    padding: 5px;
  }

  .payment-history-list, .note-list, .lease-history-list, .email-list-section {
    border: 1px solid #ccc;
  }

  .payment-history-list  .scroller, .note-list, .lease-history-list, .email-list-section {
    height: 6rem;
    overflow-y: scroll;
    scrollbar-width: thin;
  }

  .payment-history-list ul, .lease-note-list ul, .lease-history-list ul {
    padding-left: 0;
  }

  .payment-history-list div div, .note-list div div, .lease-history-list div div {
    text-decoration: none;
    border-bottom: 1px solid #ccc;
    padding: 2px 8px;
    list-style: none;
  }

  .payment-history-list div span, .note-list div span, .lease-history-list div span {
    display: inline-block;
  }

  .de-emphasize {
    background-color: #ebebeb;
    color: #aaa;
  }

  .highlight {
    background-color: #ffcf99;
  }

  .del-x, .del-x span, .add-note-btn {
    text-align: center;
    color: #5f788a;
    cursor: pointer;
  }

  .note-list, .lease-history-list, .email-list-section {
    font-size: small;
  }

  .email-list-section {
    min-height: 480px;
    max-height: 480px;
    font-size: smaller;
    border: none;
  }

  #addNoteModal textarea {
    resize: none;
    width: 300px;
    height: 100px;
  
  }

  .container-equadistant {
    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
  }
  
  .inline-box {
    min-width: 150px;
    vertical-align: top;
    display: inline-block;
    *display: inline;
    zoom: 1;
    line-height: 1.2rem;
    vertical-align: middle;
  }
  
  .stretch {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0
  }

  .modal-body #submit {
    margin: 2rem 0 2rem .5em;
  }

  .tab-active-True {
    border-color: #777;
    font-weight: bold;
    color:#000;
    background-image: linear-gradient(rgba(240,240,240,1), rgba(255,255,255,0));
    border-bottom: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  .tab-active-False {
    border-color: #999;
    font-weight: bold;
    color:#000;
    background-color: #ddd;
    background-image: linear-gradient(#ddd, #aaa);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  .center {
    margin: auto;
    text-align: center;
  }

  .update-form .form-group {
    width: 40%;
    display: inline-block;
  }

  .update-form #submit {
    display: block;
    width: 100%;
  }

  .note-footer {
    font-size: .8rem;
  }

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

  #notification-area .flash {
    margin: 1rem;
  }

  .response-notice {
    padding: 1rem;
    color: #d24b11;
  }

  .guest-form {
    width: 49%;
    max-width: 49%;
  }

  .guest-form .form-group {
    width: 49%;
    display: inline-block;
    padding: 1em;
  }

  .guest-form .btn {
    width: 45%;
    display: inline-block;
  }

  #room_number {
    width: 100px;
  }

  #lease-email-preview iframe {
    min-width: 100%;
    min-height: 200px;
  }

  #lease-pdf-preview iframe, .lease-email-preview iframe {
    min-width: 100%;
    min-height: 600px;
    max-height: 100%;
  }

  .highlight-True {
    font-weight: bold;
    color: #FFF !important;
  }

  .lease-action-buttons {
    padding: 0px 10px 0 0;
  }

  .lease-action-completed {
    border: 1px solid #666;
    border-radius: 10px;
    border-collapse: inherit;
  }

  .lease-action-completed th {
    padding: 5px 10px 0px 10px;
    text-align: center;
  }

  .lease-action-completed td {
    padding: 0px 10px 5px 10px;
    text-align: center;
  }

  .apartment-room-info {
    width: 100%
  }

  .apartment-room-info td {
    padding-right: 8px;
  }

  .next-rent {
    text-align: right;
    color: #999;
  }
  
  .tab-pane {
    background-color: #CCC;
  }

  #leaseAndGuidesModal .modal-content {
    min-height: 800px;
  }

  #leaseAndGuidesModal .modal-body {
    background-color: #CACACA;
  }

  #lease-email-editor_ifr, #lease-email-editor {
    min-height: 700px !important;
  }

  .tox-tinymce {
    min-height: 550px !important;
  }

  .tox-editor-header {
    display: none;
  }

  .pointer {
    cursor: pointer;
  }

  .form-group {
    padding: .5em;
  }

  #createLeaseModal .form-group {
    width: 45%;
    display: inline-block;
  }

  #createLeaseModal .form-group h6 {
    padding-top: .65rem;
  }

  #createLeaseModal .form-check {
    padding-left: 2em;
    padding-top: .5em;
  }

  .datepicker-days table .disabled-date.day {
    background-color: #e5e2e9;
    color: #aca9a9;

  }
  
  .datepicker table tr td.disabled, 
  .datepicker table tr td.disabled:hover {
    background-color: #e5e2e9;
    color: #aca9a9;
    text-decoration: line-through;
  }

  .bold {
    font-weight: bold;
  }

  .hidden {
    display: none;
  }

  .payment-history-title {
    cursor: pointer;
  }

  .btn > input[type="radio"] {
    display: none;
  }

  .lease-confirm {
    padding: 5rem;
  }

  .next-lease-btn {
    font-size: small;
  }

  #confirmModal h6 {
    margin-bottom: 2rem;
  }

  #emailModal {
    max-height: calc(100vh - 25px);
  }

  #emailModal .modal-body .email-body {
    max-height: calc(100vh - 300px);
    overflow-y: scroll;
  }

  .lease-action-completed {
    cursor: pointer;
  }

  

  .days-left-60 {
    box-shadow: 3px 8px 8px rgb(255, 246, 163);
  }

  .days-left-45 {
    box-shadow: 5px 10px 12px rgb(255, 217, 102);
  }

  .days-left-30 {
    box-shadow: 5px 10px 18px rgb(255, 191, 0);
  }

  .days-left-15 {
    box-shadow: 5px 10px 18px rgb(251, 154, 57);
  }

  .days-left-empty {
    box-shadow: 1px 1px 24px rgb(224, 0, 0);
    padding: 10px;
    border: 3px solid;
    margin-top: -1rem;
  }

  .apartment .room {
    padding-right: 10px;
  }

  .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: #fff;
    background-color: #428bca;
    border-color: #dee2e6 #dee2e6 #428bca;
    font-weight: bold;
  }

  .tab-pane .Rtable {
    background-color: #fff;
  }

  .tab-pane .Rtable .Rtable-row {
    border-bottom: 1px solid #dadada;
  }

 
  .smaller {
    font-size: 0.75em;
  }