body{font-family: 'Noto Sans', sans-serif; font-size: 14px; background-color:rgba(255,255,255,1); font-weight: 500}
input[type="text"], input[type="password"], input[type="date"]
{
    font-size:18px;
}
.centerimg{margin-left:auto; margin-right:auto; margin-bottom:20px; max-width:30%;}
.input-icon .form-control{padding-left:50px; margin-bottom:25px;}
.alignright{text-align:right;}
.outerpad{padding:20px;}
.clientinfo p{font-size:20px; font-weight:500;}
.clientinfo h3{font-size:50px;}
.clientinfo h4{font-size:24px;}
.reporttitle{background-color: #3A5193; color:#fff; border-radius: 25px; padding: 100px; margin-top: 50px; margin-bottom: 50px; text-align:center;}
.reporttitle h3{font-size: 30px; line-height: 65px;}
.footerbold{font-weight:600;}
.sectionheader{background-color: #3A5193; padding: 15px; color: #fff;}
.sectionheaderalt{background-color: #D11F29; padding: 15px; color: #fff;}
.sectionheader h3{font-weight:600;}
.main{font-size:120%;}
::placeholder, ::-ms-input-placeholder{color:#000; opacity: 0.8;}
.capitalise{text-transform:capitalize;}
.bigdiv{background-color: #fafafa; font-size: 22px; padding-top:65px; height:280px; border: 1px solid #ccc; text-align: center;}
.bigdiv:hover { cursor: pointer;}
.bigdiv a:hover { text-decoration: none;}
.notewidth{width:100%!important; transition: width 0.2s ease-out 0.2s;}
.cameracolour{background-color: #5cb85c!important; right:120px!important; max-height:36px; width: 150px!important;}
.search-bar input {
  background-color: #821A31;
  color: #ffff;
  font-size: 35px;
  border: 0;
  margin: 0;
  height: 76px;
  width: 100%;
  padding: 0 80px;
  font-weight: 200;
  display: none;
}

.search-bar input:focus,
.search-bar input:focus {
  outline: none;
}

.search-bar input::placeholder {
  color: white;
}
.redrisksheet { border: 1px solid #333; width: 49%; padding: 10px; float: left; margin:5px; min-height: 1122px  }

.sigtable { margin-top: 14px !important; height: 20px;  }
.sigtable td { padding: 10px; width: 50% }
.sigtable p { margin:0 }

.hover-bar {
  background: #821A31;
}
.top-nav-right {
  list-style-type: none;
}
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0, 0, 0, 0.5); /* Black w/ opacity */
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.5s forwards; /* Fade in effect */
}

.modal.fade-out {
    animation: fadeOut 0.5s forwards; /* Fade out effect */
}
    
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}    

.modal-content {
    background-color: #fff;
   /* margin: 15% auto; /* 15% from the top and centered */
    margin-top: 35px;
    width: 80%;
    max-width: 500px;
    /*min-width: 500px; */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* Add some shadow */
    overflow: hidden; /* Ensure the header's background color covers the corners */
}

.modal-header {
    background-color: #FFF;
    color: #666;
    padding: 5px;
    text-align: center;
    position: relative;
    border-bottom: 0px;
}

.modal-body {
    padding: 5px 20px 5px 20px;
    text-align: center;
}
hr{margin-top:10px; margin-bottom:10px}
.close-button {
    color: #444;
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close-button:hover,
.close-button:focus {
    color: #777;
}
    
.modal h2 {
    margin-top: 8px;
    color: #333;
    font-weight: bold;
}
#reveal-button {
    width: 206px;
}
#reveal-button {
    width: 206px;
} 
#reveal-button, #email, #phone {
    width: 100%;
} 

.hugeicon{font-size:50px; margin-bottom:30px;}
.logoutpos{float:right;}
.rackspec{border: 1px solid #3A5193; margin-top:35px; clear:both;}
.rackspec p{font-weight:600; font-size: 22px;}
.headerimg{float:right; max-height: 60px; background-color: #fff; border-radius: 10px; padding:3px 5px 2px 5px;}
.rowstyle input{min-height: 50px; border-radius: 20px;}
.nopad{padding:0px;}
.loginform-bg{background-color:#3A5193; color:#555;}
.btn-login{background-color:#5cb85c; color:#fff; padding:12px 28px; font-size: 24px; width:100%;}
.btn-login:hover{background-color:#fff; color:#5cb85c; border: 1px solid #5cb85c; padding:12px 28px; font-size: 24px; width:100%;}
.blacktext{color:#000;}
.btn-logout{background-color:#fff; color:#3A5193; padding:6px 20px; font-size: 24px; width:50%; float:right;}
.btn-logout:hover{background-color:#3A5193; color:#fff; border: 1px solid #fff; padding:12px 28px; font-size: 24px;} 
.btn-reset{background-color:#5cb85c; color:#fff; padding:12px 20px; font-size: 18px;}
.btn-back{background-color:#3A5193; color:#fff; padding:12px 20px; font-size: 18px;}
.whitebg{background-color:#fff; color: #3A5193;}
.login-label{font-size:26px;}
.top-strip{background-color:#3A5193; padding:20px; border-bottom: 1px solid #FFF;}
.top-strip-white{background-color:#fff; padding:20px;}
.top-strip-red{background-color:#D11F29; padding:5px; color:#fff;font-size: 14px; }
.top-strip-red h4 { margin: 0;font-size: inherit; line-height: 20px; }
.formshadow{-moz-box-shadow: 0 0 7px #555; -webkit-box-shadow: 0 0 7px #555; box-shadow: 0 0 7px #555;}
.display-hide{display:none;}
.spacer10 {height:10px}
.spacer20 {height:20px}
.spacer30 {height:30px}
.spacer40 {height:40px}
.spacer50 {height:50px}
.greybox { background-color: #F1F1F1; padding: 25px; border: 1px solid #ccc; border-radius: 20px }
.greybox h2 { margin-top: 0px; margin-bottom: 26px; border-bottom: 1px solid #3A5193; padding-bottom: 15px }
.sameheight{min-height:65px;}
.buttonstyle{border-radius:5px; min-height:60px;}
.rackgap{margin-bottom:25px;}
.rackspace{clear:both; min-height:3px; background-color:#3A5193;}
.nomargin{margin:0px!important;}
.form-title{text-align:center; margin-bottom:15px;}
.loginform{background-color:#E6E6E6; margin-top:100px; padding:20px; border-radius:20px; width:80%; color:#555; -moz-box-shadow: 0 0 15px #000; -webkit-box-shadow: 0 0 15px #000; box-shadow: 0 0 15px #000;}
.input-icon{position:relative;}
.icon-pos{position:absolute; font-size:18px; top:24px; left:20px; color:#555;}
.toggle-password{position:absolute; font-size:18px; top:18px; right:20px; color:#555;}
.bigcheck{width:30px; height:60px;}
.novertpad{padding-top:0px; padding-bottom:0px;}
.rowstyle{padding:10px; font-size:18px; min-height: 60px;}
.rowtitle{font-size: 22px; font-weight:600;}
.checkboxposition{font-size: 24px; position: absolute; top: 20%; left: 20%;}
.summarytitle{padding:10px; font-size: 20px; font-weight:600; min-height: 90px;}
.btn-rack{background-color: #3A5193; font-size: 24px; margin-top:15px; padding:12px 28px; color:#fff;}
.btn-prev{background-color: #3A5193; font-size: 24px; margin-top:15px; color:#fff; font-weight:600; padding:12px 28px;}
.btn-next{float:right; background-color: #5cb85c; font-size: 24px; margin-top:15px; color:#fff; font-weight:600; padding:12px 28px;}
.btn-rack:hover{background-color: #fff; border: 1px solid #3A5193; color: #3A5193;}
.btn-prev:hover{background-color: #fff; border: 1px solid #3A5193; color: #3A5193;}
.btn-next:hover{background-color: #fff; border: 1px solid #5cb85c; color: #5cb85c;}
.btn-home{background-color: #3A5193; font-size: 24px; margin: 15px 0px; padding:12px 28px; color:#fff; width:100%;}
.btn-home:hover{background-color: #fff; border: 1px solid #3A5193; color: #3A5193;}
.btn-home2{background-color: #fff; border: 1px solid #3A5193; color: #3A5193; font-size: 24px; margin: 15px 0px; padding:12px 28px; width:100%;}
.btn-home2:hover{background-color: #3A5193; border: 1px solid #fff; color: #fff;}
.fullwidth{width:100%}
.contactinfo{font-size:18px;}
.forget-password{text-align:center; font-size:24px;}
.contactinfo a{color:#000;}
.margin0{margin:0px;}
.marbot10{margin-bottom:10px;}
.marbot15{margin-bottom:15px;}
.marbot20{margin-bottom:20px;}
.martop15{margin-top:15px;}
.martop20{margin-top:20px;}
.martop25{margin-top:25px;}
.martop30{margin-top:30px;}
.martop35{margin-top:35px;}
.marginpos{margin-top:0px!important; margin-left:100px!important;}
.tallinput{min-height: 50px; border-radius:0px; font-size:18px;}
.arrowsize{font-size:20px;}
.linebreak{background-color:#000; padding-bottom:1px; padding-top:1px; margin:30px 0px;}
.riskinput{color:#000; padding:20px; font-size:20px;}
.bigmessage{font-size:24px;}
.redbg{background-color: #E70127;}
.amberbg{background-color: #FFBF00;}
.greenbg{background-color: #32CD32;}
.whitetext{color:#fff;}
.bigtext h4{font-size: 30px; font-weight:600;}
.bigtext p{font-size:24px; font-weight:500;}
.acknowledgements{border: 1px solid #000;}
.removemargin{ margin:0px;}
.form-control{border: 1px solid #ccc;}
.footer{background-color:#333; color: #fff; min-height:100px; text-align:center; font-size:16px; padding-top:40px; position: fixed; bottom:0; width: 100%;}
.sidemar20{margin: 0px 20px;}
.pad0{padding:0px;}
.pad5{padding:5px!important;}
.pad10{padding:10px;}
.pad20{padding:20px;}
.padright5{padding-right:5px;}
.padright10{padding-right:10px;}
.padleft10{padding-left:10px;}
.spliter{border-right:1px solid #000;}
.datebox{border: 1px solid #000; padding:15px; border-radius:5px; margin-top:30px;}
.datebox input{border-radius:5px;}
.background-signature{background-color: #D11F29; padding:20px;}
.sigminheight{min-height:320px;}
.relative{position: relative;}
.absolute{position: absolute; top:15px; right:15px;}
.forget-form{display:none;}
select {
  -webkit-appearance: none;  /* for webkit (safari, chrome) compatibility */
  -moz-appearance: none; /* for firefox compatibility */
  appearance: none;
}
div.fixed {
	position: -webkit-fixed; /* Safari */
	position: fixed;
	bottom:0px;
 	font-size: 17px;
	right:0px;
	border: 1px solid #fff;
	z-index:100;
	padding:5px;
	margin:0px;
	background-color: #3A5193;
	border-radius: 10px 10px 0px 0px;
	width:120px;
	text-align:center;
	transition: width 0.2s ease-in 0.2s;
}
.notetitle{font-size:25px; padding:10px 0px;}
.iconpos{position: absolute; color:#fff; left:9px; top:9px;}
#responsive-canvas {
  width: 100%;
}
#responsive-canvas2{
	width: 100%;
}
.predsearchholder {
	position:absolute;
	/*top:79px; */
	left: 3%;
	width: 94%;
	z-index:99;
}
.suggestionsBox{
	position:relative;
	left:0;
	top:0px;
	margin:0;
	width:100%;
	padding:0;
	background-color:#FFF;
	box-shadow:1px 1px 5px #888;
	color:#fff;
	z-index:20;
	border-bottom-right-radius:5px !important;
	border-bottom-left-radius:5px !important
}
.suggestionList{margin:0;padding:0;}
.suggestionList ul{padding:6px;margin:0;}
.suggestionList ul li{
	list-style:none;
	margin:0;
	padding:6px 10px;
	cursor:pointer;
	color:#111;
	font-size:15px;
    font-weight: 600;
}
.suggestionList ul li:hover{background-color:#3A5193;color:#FFF;}
.load{background-image:url(../autosuggest/loader.gif);background-position:right;background-repeat:no-repeat;}
#suggest{position:relative;}
.suggestionList ul li img{max-width:60px !important;max-height:60px !important;margin:auto;}
.loginbtnpos{margin-top:0px;}
.refnum{margin: 20px 0px; font-size:20px;}

#video {
  border: 1px solid black;
  box-shadow: 2px 2px 3px black;
  width: 320px;
  height: 240px;
}

#photo {
  border: 1px solid black;
  box-shadow: 2px 2px 3px black;
  width: 320px;
  height: 240px;
}

#canvas {
  display: none;
}

.camera {
  width: 340px;
  display: inline-block;
}

.output {
  width: 340px;
  display: inline-block;
  vertical-align: top;
}


.contentarea {
  font-size: 16px;
  font-family: "Lucida Grande", "Arial", sans-serif;
  width: 760px;
}

 h1.whitetext { font-size: 22px; text-align: right;}

@media(max-width:768px) {
	.rowstyle{min-height:30px; padding:0px;} 
	.mobmargin{margin-top:10px; margin-bottom:20px;}
	/*.sigminheight{min-height:200px;}*/
	.mobtitlemargin{margin:15px 0px; font-size:22px; text-align:center;}
	.summarytitle{font-size:18px; min-height:0px; text-align: center;}
	.marginpos{margin-left:0px!important;}
	.redrisksheet { width: 100%; float: none; }
	.icon-pos{position:absolute; font-size:18px; top:14px; left:20px; color:#555;}
} 
@media(max-width:767px) {
	.loginbtnpos{margin-top:20px;}
	.btn-rack{margin-top:25px!important; margin-bottom: 25px!important; width:100%;}
}

@media(max-width:480px) {
	.rowstyle{font-size:25px!important; min-height:0px; padding:0px;} 
	.summarytitle{font-size:11px;}
	.datebox{position:static; margin-top:30px;}
	.mobmargin{margin-top:30px; margin-bottom:10px;}
	.sigminheight{min-height:0px;}
	.checkboxposition{font-size:21px; left: 30%;}
	
	.centerimg{max-width:60%;}
}