@import "../fonts/osans/osans.css";

html, body, body * {
  font-family: 'OpenSansRegular';
  box-sizing: border-box;  
}

body {
  margin: 0px;
}

.wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #FFF;
}

.content {
  /*padding: 10px;*/
}

.hidden {
  display: none;
}

.header {
  padding: 8px;
  /*font-weight: bold;*/
  text-align: center;
  cursor: default;
  height: 40px;
  border-bottom: 1px solid #CCC;
}

.main-content {
  background-color: #fff;
}

.header.left {
  text-align: left;
}

.header.right {
  text-align: right;
}

input, select {
  margin-bottom: 5px;
  width: 100%;
  /*height: 44px;*/
  padding: 10px;
  font-size: 15px;
  border: 1px solid rgb(169, 169, 169);
}

input:focus, select:focus {
  outline: none;
}

.button.expand {
  width: 100%;
}

.button.danger:hover, button.danger:hover {
  background-color: #F44336;
}

.button.danger, button.danger {
  border: 2px solid #F44336;
  color: #F44336;
}

.button.info:hover, button.info:hover {
  background-color: #2196F3;
}

.button.info, button.info {
  border: 2px solid #2196F3;
  color: #2196F3;
}

.button.success:hover, button.success:hover {
  background-color: #4CAF50;
}

.button.success, button.success {
  border: 2px solid #4CAF50;
  color: #4CAF50;
}

.button:hover, button:hover {
  background-color: #9E9E9E;
  color: #fff;
}

.button:active, button:active {
  position: relative;
  top: 1px;
  left: -1px;
}

.button:focus, button:focus {
  box-shadow: none !important;
  outline: none !important;
}

.button.inline, button.inline{
	background-color: #9E9E9E;
	border-color: #9E9E9E;
	color: #FFF;
}

.button.inline:hover, button.inline:hover{
	background-color: #717171;
	border-color: #717171;
	color: #FFF;
}

.button.info.inline, button.info.inline{
	background-color: #2196F3;
	border-color: #2196F3;
	color: #FFF;
}

.button.info.inline:hover, button.info.inline:hover{
	background-color: #0367B4;
	border-color: #0367B4;
	color: #FFF;
}

.button.danger.inline, button.danger.inline{
	background-color: #F44336;
	border-color: #F44336;
	color: #FFF;
}

.button.danger.inline:hover, button.danger.inline:hover{
	background-color: #A90F03;
	border-color: #A90F03;
	color: #FFF;
}

.button.success.inline, button.success.inline{
	background-color: #4CAF50;
	border-color: #4CAF50;
	color: #FFF;
}

.button.success.inline:hover, button.success.inline:hover{
	background-color: #15781B;
	border-color: #15781B;
	color: #FFF;
}

.button, button {
  font-size: 15px;
  border: 2px solid #9E9E9E;
  padding: 10px;
  cursor: pointer;
  text-align: center;
  color: #9E9E9E;
  background-color: #fff;
  -webkit-transition: all 100ms ease-in-out;
  -moz-transition: all 100ms ease-in-out;
  -o-transition: all 100ms ease-in-out;
  transition: all 100ms ease-in-out;
}

.button.noborder{
  border: none;
}

.button.noborder.info:hover, button.noborder.info:hover {
  color: #2196F3;
  background-color: #fff;
}

.button.noborder.success:hover, button.noborder.success:hover {
  color: #4CAF50;
  background-color: #fff;
}

.button.noborder.danger:hover, button.noborder.danger:hover {
  color: #A90F03;
  background-color: #fff;
}

.button.noborder:hover, button.noborder:hover {
  background-color: #fff;
  color: #000;
}
 
.button.noborder.small, button.noborder.small {
  font-size: 12px;
  padding: 1px 5px;
  margin-left: 3px;
  border: none;
}

.section.head {
  border-bottom: 1px solid #333;
  height: 40px;
  padding-top: 10px;
  text-align: center;
}

.section.two-cols .left-col {  
  float: left;
  width: 20%;
}
.section.two-cols .right-col {
  float: left;
  width: 80%;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

table td {
  padding: 10px 0px 10px 10px;
}

table td.center, table th.center {
  text-align: center;
}

table td.right, table th.right {
  text-align: right;
}

table td.nowrap, table th.nowrap {  
  white-space: nowrap;
}

table tr:nth-child(2n+1) {
  background-color: #e5e5e5;
}

table tr td:last-child {
  padding-right: 10px;
}

table th {
  background-color: #fff;
  padding: 10px;
}
.rows{
  float: left;
  width: 100%;
}
.rows .cols {
  float: left;
  padding-right: 5px;
}
.rows .cols:last-child {
  padding-right: 0px;
}

.cols.columns-6 {
  width: 50%;
}

.cols.columns-1 {
  width: 8.333333%;
}

.cols.columns-2 {
  width: 16.666666%;
}

.cols.columns-3 {
  width: 25%;
}

.cols.columns-4 {
  width: 33.333333%;
}

.cols.columns-5 {
  width: 41.666666%;
}

.cols.columns-6 {
  width: 50%;
}

.cols.columns-7 {
  width: 58.333333%;
}

.cols.columns-8 {
  width: 66.666666%;
}

.cols.columns-9 {
  width: 75%;
}

.cols.columns-10 {
  width: 83.333333%;
}

.cols.columns-11 {
  width: 91.666666%;
}

.cols.columns-12 {
  width: 100%;
}

.flex-rows {
  padding: 0;
  margin: 0;
  list-style: none;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  justify-content: space-around;
}

.flex-cols {
  background: tomato;
  padding: 5px;
  width: 200px;
  height: 150px;
  margin-top: 10px;
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}