@import url('/stylesheets/fonts/inter-ui.css');

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

body { 
  font-weight: normal; 
  font-size: 12px;
  font-family: -apple-system, BlinkMacSystemFont, "Inter UI", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 
  color:#303030;
  margin: 0px;
  /* Dark Mode :)
    background-color: black;
    filter: hue-rotate(180deg) invert(90%);
  */
}


div.options { font-family: verdana; }
div.options div.title { font-weight: bold; font-size: 13px; margin-bottom: 5px; letter-spacing: -1px; }
div.options div.elabo { margin-top: 3px; margin-bottom: 10px; margin-left:24px; font-family:verdana; font-size:11px; }

/* wizard navigation buttons */
div.navbar  { font-family:verdana; font-size:10px; border-top: 0px solid #a0a0a0; border-bottom: 0px solid #a0a0a0; width:100%; padding-top:3px; padding-bottom:3px; margin:5px 0px 15px 0px;}
div.navbar .button {
  padding: 5px 10px;
}

.hidden { visibility:hidden; display:none;}
.visible { visibility:visible; display:block;}

table { color: #33334e }
form { padding: 0px; margin: 0px; }
input { font-size: 12px; font-family: verdana; }
input.bold { font-weight: bold; font-size: 11px; font-family: verdana; letter-spacing:-1px; }
select { font-size: 12px; font-family: verdana; }
textarea { font-size: 11px; font-family: verdana; }
input[type=text]:disabled { border-radius: 3px; border: 1px solid #D0D0D0; height:22px}
select:disabled { 
  border-radius: 3px; 
  border: 1px solid #D0D0D0; 
  background: #EBEBE4;
  -webkit-appearance: menulist;
  -moz-appearance: menulist;
  appearance: menulist;
  opacity: 1;
  padding: 4px 4px 4px 2px;
}

/* Lists */
ul.blue  	    { list-style-image:url(/images/blu_sqr_otl.png); margin:6px 0 6px 0px; padding:0px; }
ul.blue li		{ color:#303030; margin:0px 0 3px 25px;}
ul.notop      { margin-top:0 !important; }

/* Form Layout */
fieldset { position: relative; border:1px solid #D0D0D0; border-radius:5px; margin:15px 0 15px 0; padding:10px;  color:black; font-size:12px; }
fieldset:not(:first-of-type) { margin-top:30px;}
fieldset fieldset { width: 95%; }
fieldset legend { position:absolute; background:white; padding:0 10px; font:bold 15px "ms sans serif"; top:-10px; color: black;}
fieldset .intro { font:normal 11px verdana; margin:5px 0px 10px 5px; line-height:15px; }
fieldset .subheader { float:left; clear:both; margin: 18px 0 4px 0; font-weight: bold; font-size: 11px; font-family: verdana; letter-spacing: -1px; text-decoration: underline }
fieldset .subheader:first-child {margin:5px 0 4px 0; }
fieldset p {float:left; clear:both; font-size:11px;}
fieldset .first { margin-top: 0px }
fieldset label { height:100%; width:180px; display:inline; font-weight:normal; font-size:12px; float:left; vertical-align:top; line-height: 1.7; font-family: verdana; letter-spacing: -1px; padding-bottom:2px; }
fieldset label.wide, fieldset.wide label { height:auto; width: 100%; }
fieldset label.short, fieldset label.narrow  { height:auto; width: 15%; }
fieldset .options { font-size:12px; letter-spacing:-1px; }
/* Radio/checkbox choices sit in div.options. A <label> wrapper makes the text
   clickable and names the control, but would otherwise inherit the 180px
   floated field-label column above and push the choices apart. */
fieldset .options label { height:auto; width:auto; float:none; display:inline; }
fieldset span.field_readonly { display: inline; font-weight: normal; font-size: 12px; float: left; vertical-align: top; line-height: 1.8; font-family: verdana; letter-spacing: -1px }
fieldset sup { vertical-align: middle; color: red; font: bold 12px verdana; }
fieldset .field-cell, fieldset .cell { width:440px; line-height:1.8; display:block; float:left; padding:0px 0px 0px 0px !important; font-size:12px; }
fieldset .cell { width:440px; line-height:1.8; display:block; float:left; padding:3px 0px 0px 2px; font-size:12px; }
fieldset .cell.wide { width:520px; }
fieldset .comment { padding-right:2px 5px 0 0; font:normal 9px tahoma; color:black; letter-spacing:0px }
fieldset label .comment { float:none; }
fieldset div.fcomment { overflow:auto; padding:5px 0px 10px 2px; font: normal 11px tahoma; float:left; color:black; }
fieldset span.field_readonly { font-weight: bold; font-size: 12px; line-height:25px; }
fieldset span.field_readonly_highlight { font-weight: bold; font-size: 12px; background-color: #ffff7f; line-height:25px; }
fieldset ol { padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; padding-top: 0px }
fieldset div.form-element, fieldset div.field { overflow:auto; padding: 5px 5px 5px 15px; line-height:1.8; 15px; margin: 1px 0 0 0; width: 100%; padding-top: 5px; list-style-type: none; font-size:12px; clear: left; }
fieldset.readonly { background: #F9F9F9;}
fieldset.readonly legend {
  background: linear-gradient(to bottom, #FFFFFF 0%, #FFFFFF 50%, #F9F9F9 100%);
}

.highlight {
	background-color:#FFFF7F ;
	font-weight:900 ;
}

/**********************/
/* Validation
/**********************/

/* Divs (such as /invite_acceptances */
div.form-element.field_with_errors, fieldset div.field.field_with_errors {background:#F0F0F0; border:1px solid #BF3024; border-radius:5px;}

/* Tables (such as /register */
table .field_with_errors { background:#BF3024;}
table .field_with_errors td {background:#F0F0F0; border:1px solid #BF3024;}
table .field_with_errors td:first-of-type { background:#BF3024; color:white; font-weight:bold }

.form-field-error { color:black; background-color:#FFD2D3; font-family:verdana; font-size:9px; border:1px solid #E49697; padding:5px; }
.form-field-error h1 { color:#8F2222; font-size:11px; font-weight:bold; margin-bottom:3px }
.form-field-warning { color:#5a5000; background-color:#FFF9DB; font-family:verdana; font-size:11px; line-height:1.5; border:1px solid #E5DB55; border-left:4px solid #D4A800; border-radius:4px; padding:8px 15px; margin:8px 0 10px 0; }
.form-field-warning h1 { margin:0 0 8px 0; color:#CC6600; font-size:14px; font-weight:bold; text-transform:uppercase; letter-spacing:0.5px; }

#error_explanation { border: 2px solid #BF3024; margin:0 10px 10px 0; font: normal 12px arial; background:#F0F0F0;}
#error_explanation h2 { background:#BF3024; margin: 0px; padding:4px; font: bold 14px arial; color:white;}
#error_explanation p { font: bold 12px arial; } 
#error_explanation ul {list-style-type: square;}
#error_explanation ul li { font: bold 12px arial; color:black; margin-bottom:3px;}

.server-response-negative, .feedback-error { border-radius:5px; font:12px arial; border: #ad0000 1px solid; color: #290909; background: #ffefef url(/images/exclamation-24x24.png) no-repeat 8px; padding: 10px 10px 10px 40px; margin-bottom:10px; }
.server-response-positive, .feedback-success { border-radius:5px; font:12px arial; border: #197939 1px solid; color: #092909; background: #effbe7 url(/images/checkmark-24x24.png) no-repeat 8px; padding: 10px 10px 10px 40px; margin-bottom:10px; }
.server-response-question, .feedback-caution { border-radius:5px; font:12px arial; border: #ff8e00 1px solid; color: #74400; background: #fffcc1 url(/images/caution-24x24.png) no-repeat 8px; padding: 10px 10px 10px 40px; margin-bottom:10px; }
.feedback-info { border-radius:5px; font:12px arial; border: #41809F 1px solid; color: #21607F; background: #e3f2f9 url(/images/info-256x256.png) no-repeat 8px; background-size: 24px 24px; padding: 10px 10px 10px 40px; margin-bottom:10px; }

.header-error   { font:12px arial; border: #ad0000 1px solid; color: #290909; background: #ffefef url(/images/exclamation-24x24.png) no-repeat 8px; padding: 10px 10px 10px 40px; margin-bottom:0px; text-align: center;}
.header-success { font:12px arial; border: #197939 1px solid; color: #092909; background: #effbe7 url(/images/checkmark-24x24.png) no-repeat 8px; padding: 10px 10px 10px 40px; margin-bottom:0px; text-align: center;}
.header-caution, .header-notice { font:12px arial; border: #ff8e00 1px solid; color: #744000; background: #fffcc1 url(/images/caution-24x24.png) no-repeat 8px; padding: 10px 10px 10px 40px; margin-bottom:0px; text-align: center;}
.header-info, .header-alert    { font:12px arial; border: #41809F 1px solid; color: #21607F; background: #e3f2f9 url(/images/info-256x256.png) no-repeat 8px; background-size: 24px 24px; padding: 10px 10px 10px 40px; margin-bottom:0px; text-align: center;}

/**********************/
/* Tabs
/**********************/

.tabs {
  border: 1px solid #DEDEDE;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

.tabs ul {
  overflow: hidden;
  background: #e1e1e1;
  /*background: linear-gradient(180deg, #f2f2f2, #e1e1e1);*/
  /*background: linear-gradient(180deg, #e5e5e5, #d0d0d0);*/
  background: linear-gradient(180deg, #f2f2f2, #e1e1e1);
  /*background: linear-gradient(180deg, #e5e5e5, #d0d0d0);*/
  border-radius: 4px 4px 0 0;
  box-shadow: 0 1px 0 #FFF inset;
  margin:0px;
  padding:0px;
}

.tabs ul li {
  display: block; 
  float: left; 
  font: 15px/35px Trebuchet MS, Helvetica, Sans-serif;
  padding: 0 20px 0 20px; 
  color: #999; 
  text-shadow: 0 1px 0 #FFF;
  border-right: solid 1px rgba(0,0,0,0.05);
  border-left: solid 1px rgba(255,255,255,0.7);
  position: relative;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 1px 0 #FFF inset;
  cursor: pointer;
  background: linear-gradient(180deg, #f2f2f2, #e1e1e1);
}

/*		.tabs ul li:first-child {
border-left-width: 0;
}
 */
.tabs ul li:last-child {
  border-right: solid 1px rgba(0,0,0,0.1);
}

.tabs ul li img {
  width: 22px; 
  height: 22px;
  padding: 3px 3px 3px 3px;
  vertical-align: middle;
  margin: 0 10px 3px -2px;
  border-radius: 20px;
  background: #bdbdbd;
  background: linear-gradient(180deg, #d4d4d4, #bdbdbd); 
  box-shadow: 0 1px 0 0 rgba(255,255,255,0.15), 0 1px 3px 0 rgba(0,0,0,0.20) inset; 
  filter: drop-shadow(12px 12px 25px rgba(0,0,0,0.5));
  
/*filter: drop-shadow(16px 16px 10px black);*/
  position: relative;
  line-height: 21px;
  text-align: center;
}

.tabs ul li:hover{
  color:#505050;
}

.tabs ul li:hover img {
  background: linear-gradient(180deg, #c4c4c4, #adadad);
  /*background: linear-gradient(180deg, #5de3fc, #038bd5);*/
}

.tabs ul li.current {
  border-left-color: #CCC;
/*  background: linear-gradient(180deg, #e5e5e5, #d0d0d0);*/
  background: linear-gradient(180deg, #f2f2f2, #ffffff);
  color:#505050;
  border-right: solid 1px rgba(0,0,0,0.15);
  border-left: solid 1px rgba(255,255,255,0.7);
}

.tabs ul li.current img {
  background: #038bd5;
  background: linear-gradient(180deg, #5de3fc, #038bd5);
  filter: none;
}

.tabs ul li.current {
  display: block;
}

.tab-content{
  display: none;
  background: none;
  padding: 15px;
}

.tab-content.current{
  display: inherit;
}


/**********************/
/* Buttons
/**********************/

.button {
	/*font: bold 12px arial;*/
	font-weight: bold;
  font-size: 1rem;
  font-family: -apple-system, BlinkMacSystemFont, "Inter UI", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 
	text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.9);
  padding: 0.4em 0.7em;
  //margin: 0px auto;
	background: #eaeff3;
	background: -moz-linear-gradient(top,  #eaeff3 0%, #d0dae4 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eaeff3), color-stop(100%,#d0dae4));
	background: -webkit-linear-gradient(top,  #eaeff3 0%,#d0dae4 100%); 
	background: -ms-linear-gradient(top,  #eaeff3 0%,#d0dae4 100%);
	background: linear-gradient(to bottom,  #eaeff3 0%,#d0dae4 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eaeff3', endColorstr='#d0dae4',GradientType=0 );
	color: #383939;
  display: inline-block;
  text-decoration: none;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 4px;
  text-align:center;
  box-shadow: inset 1px 1px 0 0 white;
	border: 1px solid #A5AEB5;
  border-bottom: 1px solid #858E94;
}

.button:hover,
.button:focus {
  box-shadow: 0 0 3px rgba(81, 203, 238, 1);
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.9), -1px -1px rgba(121, 243, 255, 0.5);
  outline:none; 
}

.button:active {
	background: #d0dae4;
	background: -moz-linear-gradient(top,  #d0dae4 0%, #eaeff3 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d0dae4), color-stop(100%,#eaeff3));
	background: -webkit-linear-gradient(top, #d0dae4 0%, #eaeff3 100%); 
	background: -ms-linear-gradient(top, #d0dae4 0%, #eaeff3 100%);
	background: linear-gradient(to bottom, #d0dae4 0%, #eaeff3 80%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0dae4', endColorstr='#eaeff3',GradientType=0 );
  outline:none; 
}

.button.medium {
  padding: 0.35em 0.7em;
	font: bold 12px arial;
}

.button.small {
  padding: 0.35em 0.7em;
	font: normal 11px arial;
}

.button.mini {
  padding: 0.3em 0.4em;
	font: normal 10px arial;
}

.button.wide {
  padding-left:15px !important;
  padding-right:15px !important;
}

.button.mini.wide {
  padding-left:10px !important;
  padding-right:10px !important;
}

.button:disabled:hover,
.button:disabled:focus,
.button:disabled:active,
.button:disabled {
  color:#A0A0A0;
  outline:none;
  box-shadow: none;
}

/*---------------------------*/
/* Installation Instructions */
/*---------------------------*/

/* Setup Detectors */
.setup_detectors { width:100%; float:left; margin:20px auto; padding-left:150px; text-align:center; /* for centering subdivs */ }
.setup_detectors .detector { width:160px; height:170px; border:1px solid #CCCCCC; margin-right:30px; padding:0 0 10px 0; text-align:center; border-radius:3px; float:left; }
.setup_detectors .detector h1 { color: white; width:100%; font:bold 13px arial; border 1px solid #F2DEDE; margin:0; padding:8px 0; text-align:center; background: linear-gradient(to top, #3A5B95,#597FBF); /* W3C */ border-radius:3px; }
.setup_detectors .detector h1.disabled { background: linear-gradient(to top, #9D9D9D,#CDCDCD); /* W3C */ }
.setup_detectors .detector a.button { width:120px; margin: 0px}
.setup_detectors .detector .indicator { width:100px; height:70px; margin: 20px auto 10px auto; }
.setup_detectors .detector .indicator_installed { background: url(/images/checkmark-42x42.png) no-repeat center 1px; padding-top:48px; }
.setup_detectors .detector .indicator_not_installed { background: url(/images/exclamation-100x100.png) no-repeat center 1px; background-size:37px; vertical-align:text-bottom; padding-top:43px; }
.setup_detectors .detector .indicator_unknown { background: url(/images/question-gray-150x150.png) no-repeat center top; background-size:40px; vertical-align:text-bottom; padding-top:43px; }

.setup_detectors a.disabled {
  border: 1px solid #ACAEB6;
  box-shadow: inset 0px 0px 1px 1px white;
  text-shadow: none;
  color: #ACAEB6;
	background: #EEEEEE;
  pointer-events:none;
}

/*---------------------------*/
/* Login Authentication      */
/*---------------------------*/

#login-form {padding:0; margin:10px 0 0 0; width:380px; } 
#login-form p { font-size:22px; }
#login-form table { font-size:13px; color:rgb(38,56,73); font-family:sans-serif; margin:15px 0px 0px 0px;}
#login-form table tr {height:70px;}
#login-form table tr td { vertical-align:top; }
#login-form table div { border:1px solid #DDD; border-radius:4px;  padding:0px; margin:0px; }
#login-form table div img { float:left; padding:0px; margin:0px; height:38px;}
#login-form table input { color:black; font:500 15px arial; box-shadow:inset 0px 2px 2px #F0F0F0 ; vertical-align:top; height:38px; padding:0 0 0 5px; margin:0px; border:0px; letter-spacing:0px; width:330px; }
#login-form table input:-ms-input-placeholder { color: #999; }
#login-form table input::-webkit-input-placeholder { color: #999; }
#login-form table a {float:right; padding:3px 5px 0 0; margin:0; font-size:13px;}
#login-form input[type=submit] {width:70px; height:25px; font:bold 12px arial; margin-top:15px; display:block; font-size:14px; width:98%; height:35px; margin:0; padding:7px;}
#otp_attempt { letter-spacing: 0.5em !important; font-weight: bold; }