/* ratchet overrides */
p {font-size:12px;}
body {font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;}
input,
textarea,
button,
select {
  /*font-family: "Helvetica Neue", Helvetica, sans-serif;*/
  font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 16px;
}

select, textarea, input[type="text"], input[type="search"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="tel"], input[type="color"] {
  border: 1px solid #A30822;
}

.create-report-detail input {
  width:95%;
}
.requiredfield {border:1px solid red !important;}

.sectionWrapper hr {border-top:none !important;}

input[type="text"], textarea, select, input[type="password"] {
    padding:0 0 0 5px !important;
}

progress {width:80%;}

.gallery-image img {max-width:100%;}

#block-management-report textarea,#legionella-report textarea {height:100px}

 .table-view-divider {color:#000}
 .table-view-cell { padding-right:15px !important; background-color:#fff;border-bottom: 1px solid # #A30822;}

a.btn {z-index:100 !important;}
.bar {border-bottom:none !important; }

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

.btn .badge-negative {background-color:#d9534f; display:none;
color:white;}

.content > * { -webkit-transform: translate3d(0,0,0); }

/* end ratchet overrides */

body {-webkit-touch-callout: none;}

#carbon-monoxide-power-notes,#heat-detector-power-notes {margin:5px 0; border-bottom: 1px solid #A30822;}

.camera-background { background: url('../photos-2x.png');
background-repeat:no-repeat;
background-size:30px;
background-color:#fff;
background-position-x:15px;
background-position-y: 8px; }

.backgroundon {
background-color:#fff;

}


/*.questionwindow {
  overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}*/

#loginpage #password {
  background-image: url(../password_lock.png);
  background-repeat: no-repeat;
  background-position: right;
  background-size: 30px;
  border: 1px solid #A30822;
}
#loginpage #username,#loginpage #email {
  background-image: url(../login_user.png);
  background-repeat: no-repeat;
  background-position: right;
  background-size: 30px;
  border: 1px solid #A30822;
}
#loginpage #companyname {
  background-image: url(../company_ref.png);
  background-repeat: no-repeat;
  background-position: right;
  background-size: 30px;
  border: 1px solid #A30822;
}

.popover .table-view {max-height: 500px;}

#appversion {color:#A30822; }

#checklist-report .section_photo {display:none;}
.room-name {display:none; }
#tenants-sig {display:none; height:500px; }

#checklist-report .addMaintenanceNote {display:none;}
#quickNav .badge {padding:1px 3px !important; display:none;margin-left:3px;}
#ensuiteQuickNav, #ensuiteHeader {display:none;}
#externalQuickNav, #externalHeader, .internalHeader, .kitchenHeader, .bathroomHeader, .bedroomHeader,#healthandsafetyHeader, #generalHeader, #conclusionHeader,
#externalCondition, #internalCondition, #kitchenCondition,#bathroomCondition, #bedroomCondition, #healthandsafety-anchor, #generalobservations, #concluson-anchor,
#external-condition, #internal-condition,#kitchen-condition, #bathroom-condition, #bedroom-condition, #health-and-safety, #general-observations,#conclusion {display:none;}
.gb {display:none;}
#my-menu {display:none;}
.room-name {display:none; }
.room-name input[type="text"] {background-color:#f99;}

.btn-midterm {
  color: #fff !important;
  background-color: #9C754F;
  border: 1px solid #9C754F;
}
.btn-outlined.btn-midterm {
  background-color: #fff;
  border: 1px solid #A30822;
  border-radius: 3px;
  color:black !important;
}
.btn-checkin {
  color: #fff;
  background-color: #F0AA49;
  border: 1px solid #F0AA49;
}
.btn-checkout {
  color: #fff;
  background-color: #BAAE93;
  border: 1px solid #BAAE93;
}
.btn-inventory {
  color: #fff;
  background-color: #DF4F54;
  border: 1px solid #DF4F54;
}
.btn-inventoryandcheckin {
  color: #fff;
  background-color: #9C5F99;
  border: 1px solid #9C5F99;
}

.btn-blockmanagement {
  color:#fff;
  background-color:navy;
  border:1px solid navy;
}

.btn-outlined.btn-blockmanagement {
  background-color: #fff;
  border: 1px solid #A30822;
  border-radius: 3px;
  color:black;
}

.btn-checklist {
  color:#fff !important;
  background-color:#800080;
  border:1px solid #800080;
}

.btn-outlined.btn-checklist {
  background-color: #fff;
  border: 1px solid #A30822;
  border-radius: 3px;
  color:black !important;
}

.btn-risk-assessment, .btn-riskassessment {
  color:#fff;
  background-color:#004225;
  border:1px solid #004225;
}

.btn-outlined.btn-risk-assessment {
  background-color: #fff;
  border: 1px solid #A30822;
  border-radius: 3px;
  color:black;
}

.btn-outlined.btn-legionella-assessment {
  background-color: #fff;
  border: 1px solid #A30822;
  border-radius: 3px;
  color:black !important;
}

.btn-legionella-assessment, .btn-legionella_assessment {
  color:#fff !important;
  background-color:#FF5733;
  border:1px solid #FF5733;
}


.btn-photo-only, .btn-photo_only {
  color:#fff !important;
  background-color:#008000;
  border:1px solid #008000;
}

.btn-outlined.btn-photo-only {
  background-color: #fff;
  border: 1px solid #A30822;
  border-radius: 3px;
  color:black !important;
}


.btn-grey {
    color:#fff;
    background-color:#aaa;
  border: 1px solid #aaa;
  }
.btn-black {
    color:#fff;
    background-color:#000;
  border: 1px solid #000;
  }

  .btn-yellow {
  color:#000;
  background-color:#ffe155 !important;
font-weight:500;
  }

.label {text-align: center; font-size: 16px !important;}

.midterm { color: #000;}
.checkin { color: #000;}
.checkout { color: #000;}
.inventory { color: #000;}
.inventoryandcheckin { color: #000;}
.welcome {background-color: #A30822;
text-align: center;
color: black;
font-weight: bold;
padding:0;
margin:0;}


.playground-subquestion, .coldwater-subquestion, .hotwater-subquestion, .shower-subquestion,
.littleused-subquestion, .deadlegs-subquestion, .unoccupied-subquestion,
.hot_tub-subquestion, .whirlpool-subquestion, .spa_bath-subquestion {display:none;}
.create-report-detail {display:none;}


.trade, .room-item, .block-item {
display:inline-block;float:left;
height:35px;
    text-align:center;
     padding:5px;
     border:1px solid #aaa;
     cursor:pointer;
    z-index:90;
    font-size:12px;
    margin:2px;
    overflow-x:display;}

.room-item {margin:5px !important;}

.block-item {
  width: 175px;
}

.selectedTrade { background:#A30822;
    color:#fff;}

.selectedRoom, .selectedBlock { background:#A30822;
    color:#fff;}


#photos {padding-top:90px;}
.gallery-image {float:left; border:10px solid #aaa;
position: relative;
display: inline-block; margin:5px;top:-44px;}
.gallery-image img {max-width:100%; height:auto;}

.gallery-image .date-time {position:absolute;
top:2px;
right:30px;
color:white;
padding-top:2px; font-size:12px;}


/* this class is set to .photo-identifierY if its a maintenance photo.
basically the template just appends the maintenace indicator to the class name.
jquery is used when page loads to insert maintenance icon */
.gallery-image .photo-identifier,.gallery-image .photo-identifierY {position: absolute;
top: 0;
left: 0;
color:white;
background-color:rgba(0,0,0,0.7);
width:100%;
height:30px;
padding-left:5px;
padding-top:3px;
font-size:12px;}

.gallery-image .delete-image {position:absolute;top:0; right:0; }

.photoid {margin-bottom:0px !important; font-size:14px;}


.maintenance-indicator {width:20px; height:20px; vertical-align:middle; padding-right:2px; }



  /* STYLES GO HERE */

  .content { margin-top:0 !important; color:#000;
overflow-x: hidden;
}
  header {height: auto !important;}

  hr {border-top: 1px solid #A30822;}

  #additionalPhotosCount, #frontOfPropertyCount { top:18px;}

  #topsection {padding-top:30px;}
  #midtermreport #topsection, #checklist-report #topsection {padding: 50px 5px 0 5px;}
  #legionella-report #topsection {padding: 120px 5px 0 5px;}
  #legionella-report.outletspage #topsection {padding: 185px 5px 0 5px;}

  .table-view {margin-bottom: 55px;}

  #btnLookupProperty {float:right !important;}

  .ipad {display:none;}

  .sections .media:first-child {margin-top:15px;}

  .image-wrapper .badge {
    bottom:0px;
    right:0px;
  }
  .table-view-cell.table-view-divider .image-wrapper .badge { right:20px !important; }

  .red input[type="radio"]:checked + label {
      background-color:red !important;
  }
  .amber input[type="radio"]:checked + label {
      background-color:#e18728 !important;
  }
  .green input[type="radio"]:checked + label {
      background-color:green !important;
  }

  .table-view-divider .image-wrapper {float:right !important;}
  #modal-signature-window {
   position:fixed;
   top:0;
   left:0;
   width:100%;
   height:100%;
   background-color:rgba(0,0,0,0.8);
   z-index:10009;
   visibility:hidden;
   overflow-y: scroll;
  }
  #modal-signature-window > div {
    min-height: 400px;
    width: 340px;
    margin: 20px auto;
    background-color: #fff;
    padding:10px;
    position:fixed;
    left:5%;}

  #modal-signature-window > div {
    min-height:600px !important;
  }

    #modal-window, #modal-download-window, #modal-sync-window, #modal-createreport-window {
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background-color:rgba(0,0,0,0.8);
        z-index:1000;
        visibility:hidden;
        overflow-y: scroll;
    }

    #modal-download-window > div, #modal-sync-window > div, #modal-createreport-window > div {
    color:white;
    font-size:36px;
    width:80%;
    height:200px;
    margin: 40% auto;
    text-align:center;
    line-height: 4rem;
    }

    #modal-window > div {
      min-height: 400px;
      width:90%;
      margin: 100px auto;
      background-color: #fff;
      padding:10px;
      position:relative;
    }

    #modal-window.photo_only > div {
      /* before photo only */
    /*min-height: 400px;
    width:90%;
    margin: 100px auto;
    background-color: #fff;
    padding:10px;
    position:relative; */
    /* end before photo only */
    min-height: 400px;
    width: 86%;
    margin: 20px auto;
    background-color: #fff;
    padding: 10px;
    position: relative;
    }

    #close-wrapper { position:absolute; top:-25px; right:-25px; }

    .maintenance-dialog {
    position:relative;
    height:500px;
    overflow:auto;
    -webkit-overflow-scrolling: touch;
    }




    .notes-dialog.photo_only {
      position:relative;
      /* before photo only */
      /* height:350px; */

      /* end before photo only */
      height: 100%;
    }
    .notes-dialog {
      position:relative;
      height:350px;
    }


    .notes-dialog > div{
    overflow:auto;
    -webkit-overflow-scrolling: touch;
    min-height:350px;
    }

    #addroomdialog .segmented-control {font-size:16px; }
    #addroomdialog .segmented-control .active {font-weight:500; }



    #modal-content .table-view-divider { background-color:#ccc;}

    .note {height:100px !important; margin-top:10px;}

    #notes-photos {clear:both; margin:0 auto; width:580px; margin:0 auto;}
    #notes-photos img {float:left; max-height:100px; padding:2px; margin: 3px;}
    #notes-photos img.selected {border:5px solid #428bca }
  #modal-sync-window, #modal-download-window, #modal-createreport-window, #modal-window {visibility: hidden;}

  
  .image-wrapper {cursor:pointer;}
  textarea {height:200px;}
  /*#btnDoneAndClose{width:97%;}*/
  .spinner {
     position: absolute;
     left: 50%;
     top: 50%;
     height:60px;
     width:60px;
     margin:0px auto;
     -webkit-animation: rotation .6s infinite linear;
     -moz-animation: rotation .6s infinite linear;
     -o-animation: rotation .6s infinite linear;
     animation: rotation .6s infinite linear;
     border-left:6px solid rgba(0,174,239,.15);
     border-right:6px solid rgba(0,174,239,.15);
     border-bottom:6px solid rgba(0,174,239,.15);
     border-top:6px solid rgba(0,174,239,.8);
     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);}
  }
  .image-wrapper img {max-width:30px;}
  .image-wrapper {position: relative; display: inline-block; }
  .image-wrapper .badge {position:absolute; display:none;/* padding:1px 3px !important;*/ padding: 3px 10px !important;}
  .table-view-cell {padding:11px 15px;}

  .radio-group-option {
      float:left;

      height:55px;
      position:relative;}

  .radio-group-option-big {
      float:left;

      height:55px;
      position:relative;}

  .radio-group-option label, .radio-group-option input, .radio-group-option-big label, .radio-group-option input {
      display:block;
      position:absolute;
      top:0;
      left:0;
      right:0;
      bottom:0;
  }

  .radio-group-option input[type="radio"], .radio-group-option-big input[type="radio"] {
      opacity:0.01;
      z-index:100;
  }

  .radio-group-option input[type="radio"]:checked + label, .radio-group-option-big input[type="radio"]:checked + label, .radio-group-option input[type="checkbox"]:checked + label {
      background:#A30822 !important;
      color:#fff;
  }

  .radio-group-option label, .radio-group-option-big label {
    text-align: center;
    padding-top: 15px;
    border: 1px solid #A30822;
    cursor: pointer;
    z-index: 90;
    font-size: 12px;
    background-color: #fff;
    overflow-x: visible;
    margin: 1px;
    font-weight: 500;
  }

  .red input[type="radio"]:checked + label {
      background-color:red !important;
  }
  .amber input[type="radio"]:checked + label {
      background-color:#e18728 !important;
  }
  .green input[type="radio"]:checked + label {
      background-color:green !important;
  }


  #midtermreport .table-view-cell, #checklist-report .table-view-cell, #legionella-report .table-view-cell {background-color:#fff;}
  #midtermreport .table-view-divider,
  #checklist-report .table-view-divider,
  #legionella-report .table-view-divider
  {background-color:#A30822;}
  #myPopover .table-view-cell {background-color:#fff !important; }
  #btnHelp {height:31px;}
  #reports {
    background: url(../kpr-logo-globe.png) 50% 75% no-repeat;
  }



.previousanswer {
  background-color:#995fc6 !important;
}
 p {color:black;}

 #hot-water-test-results-table {background-color:rgb(255, 100, 100); margin:20px 0;}
 #hot-water-test-results-table tr.header-rwo {
 border: 1px solid rgb(255, 100, 100);;
 font-weight: bold;
 color: rgb(255, 100, 100);
 background-color: #ddd;
 }

 #cold-water-test-results-table {background-color:rgb(0, 150, 255); margin:20px 0;}
 #cold-water-test-results-table tr.header-rwo {
 border: 1px solid rgb(0, 150, 255);;
 font-weight: bold;
 color: rgb(0, 150, 255);
 background-color: #ddd;
 }

 .highrisk, .lowrisk {display:none;}

 hr.hide-hr {visibility: hidden;}
 #legionella-report .table-view-divider {
 margin-bottom: 10px !important;
 margin-top: -11px !important;
 }

  .btn-orange {
  color:#000;
  background-color:orange !important;
font-weight:500;
  }

header .table-view-cell {clear:both;}


.android {padding-bottom:300px;}

#myPopover {
  padding-top: 20px;
  z-index: 0;
}
.risk-help-wrapper {font-size:12px !important;}

.toggle:before {
    content: "No" !important;
}
.toggle.active:before {
    content: "Yes" !important;
}
.mi {
  width: 46%;
float: left;
margin: 0 2%;
background-color: #A30822;
color: white;
height: 140px;
border-radius: 10px;
vertical-align: middle;
font-size: 20px;
text-align: center;
padding-top: 30px;
line-height: 2.5rem;
}

#photo-only-view .notes-dialog > div { height:550px;}