:root {
    --color-green-excellent: #63c903;
    --color-green-ok: #b6e61f;
    --color-yellow-weak: #fcea05;
    --color-orange-poor: #f07406;
    --color-red-bad: #fa1e0c;
    
}

.container, .row, .span12, .row-fluid {
    width: 100%;
}
.span6 {
    width: 75%
}

div.password {
    width: 250px;
    height: 250px;
    overflow: hidden;
    float: left;
    padding: 5px;
}

div.pwd-stuff {
    width: 50%;
    padding: 5px;
    display: block;
}

div.pwd-status {
    padding: 10px 5px 5px 5px;
    font-size: smaller;
    line-height: var(--line-height-small);
    display: block;
}

div.pwd-req {
    width: 100%;
    padding: 15px;
    background-color: var(--color-cwru-blue);
    border-radius: 10px;
    color:white;
    font-size: 1.0em;
    line-height: var(--line-height-small);
    display:none;
}

div.pwd-hist {
    width: 100%;
    padding: 5px;
    margin-top: 10px;
    text-align: center;
    background-color: var(--color-drk-blue);
    border-radius: 3px;
    color:white;
    font-size: smaller;
    line-height: var(--line-height-small);
}

a.pwd-hist, a.pwd-req {
    font-size: 1.0em;
}

div.pwd-examp {
    width: 95%;
    padding: 5px;
    margin-top: 5px;
    text-align: center;
    background-color: var(--color-drk-blue);
    font-size: 1.3em;
    color: white;
}

div.error {
    border-radius:10px;
}

label.pwd {
    display: inline-block;
    width:100px;
    padding: 5px;
}

span.pwd {
    font-weight: bold;
    display: block; 
    float: left; 
    clear: left; 
    width: 75px;
}

span.help {
    cursor: help;
}

li.pwd {
    list-style-type: none;
}

ul.pwd-req {
    margin:0;
    line-height: .7em;
}

li.pwd-req {
    list-style-type: disc;
}

hr.pwd2 { 
    height: 6px; 
    border: 0; 
    box-shadow: inset 0 6px 6px -6px rgba(0,0,0,0.5); 
}

form {
	padding-top: 0;
	width: 80%;
	margin: 0 auto 0 auto;8
}

form label, form p, form p input { display: block; }

form p a { display: none; }

form p:first-child {
	padding: 0;
}

form p {
	padding: 2em 0 0 0;
}

form ul {
	margin: 3% 5% 0 5%;
}

form ul li {
	list-style-type: disc;
}

form label {
	padding-bottom: 0.5em;
}

form input[type="text"], form input[type="password"], form input[type="date"] {
	font-size: 1.0em;
	margin: 0;
	padding: 0;
}

form input[type="text"][disabled], form input[type="password"][disabled], form input[type="submit"][disabled] {
    background-color: #888;
}

form input[type="text"], form input[type="password"], form input[type="date"] {
	width: 90%;
	border: none;
	border-radius: 3px;
}
/*
** Reduce the size of the placeholder text so it is not so obnoxious
*/
::-webkit-input-placeholder {
  font-size: 13px;
  color: #555;
}
::-moz-placeholder {
  font-size: 13px;
  color: #555;
}
:-ms-input-placeholder {
  font-size: 13px;
  color: #555;
}
::placeholder {
  font-size: 13px;
  color: #555;
}
form ol li {
	display: inline;
	margin: 0 0.5em 0 0;
}

form ol li:last-child {
	margin: 0;
}

#month {
	display: inline;
	width: 3em;
}

#day {
	display: inline;
	text-align: center;
	width: 2em;
}

#year {
	display: inline;
	text-align: center;
	width: calc(100% - 6.0378em); /* that number was empirically measured in a browser */
}

.progressstatus { 
  width: 90%; 
  background-color: #ccc; 
  border: 2px;
  box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
  border-radius: 5px;
  height:25px;
} 
  
.myprogressbar { 
  width: 0%; 
  height: 100%; 
  box-shadow: 0px 1px 3px 1px #999 inset, 0px 4px 5px 1px #fff inset;
  background-color: #fa1e0c; 
  text-align: center; 
  font-weight: bold;
  border-radius: 5px;
  line-height: 180%; 
  color: black; 
} 

img.eyeball {
    max-width: 18px;
    width: auto;
}

@media only screen and (min-width: 641px) {
	form {
		/* push the content of the form into the center
		and fix the width to suspend the contents in 
		that position. size and margins will adjust based
		on the max-width size of the parent container elements
		*/
		display: inline-block;
		margin-left: 15%;
	}

	form input[type="text"], form input[type="password"], form input[type="date"] {
		width: 78%;
		padding: 2px 5px 2px 5px;
	}
	
	#month {
		width: 4em;
	}
	
	#year {
		width: calc(100% - 11.5em); /* that number was empirically measured in a browser */
	}
	
	form button[type="submit"] {
		width: 60%;
		overflow: visible;
		margin: 1em 0 0 10%;
	}
	
    optgroup, form select, form input[type="text"], form input[type="password"] {
		font-size: 1.0em;
    }
    
    div.pwd-req { display: block; }
    
    .progressstatus { 
      width: 78%; 
      background-color: #ccc; 
      border: 2px;
      box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
      border-radius: 5px;
      height:25px;
    } 

    .myprogressbar { 
      width: 0%; 
      height: 100%; 
      box-shadow: 0px 1px 3px 1px #999 inset, 0px 4px 5px 1px #fff inset;
      background-color: #fa1e0c; 
      text-align: center; 
      font-weight: bold;
      font-size: smaller;
      border-radius: 5px;
      line-height: 180%; 
      color: black; 
    } 

}

@media only screen and (max-width: 320px) {
    optgroup,  form select {
        font-size:14pt;
    }
    div.graybox {
        width:100%;
    }

    .progressstatus { 
      width: 100%; 
      background-color: #ccc; 
      border: 2px;
      box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
      border-radius: 5px;
      height:25px;
    } 
    
}

.graybox {
  background: #E1E3E6;
  border-radius: 10px;
  width: 75%;
  padding: 10px;
}

.btn {
  background: #bbb;
  font-size:8pt;
  padding:5px 5px 3px 3px;
  border-radius:5px;
  height: 90%;
}

.btn-box {
  padding: 30px;
}

.vis-box {
  padding: 3px;
}