/*Globlal Properties*/
/* Color pallete https://www.color-hex.com/color-palette/7735 */
/*Tags*/
body {
background-color: #000000;
color:#ffffff;
margin: 0px;
padding: 0px;
}
*{
font-size:17px;
font-family: 'Montserrat', sans-serif;
}
h1{
font-size:22px;
}
a{
font-size: 22px;
}
input[type="checkbox"]{
width:20px;
height:20px;
background:white;
border-radius:5px;
border:2px solid #555;
vertical-align: middle;
}
.Select-value-label {
color:white !important;
}
.Select div {
box-sizing:content-box !important;
/*padding-right:7px;*/
}
.Select-control {
background-color:#000000;
vertical-align:middle;
border-radius:0px;
border:1px solid;
border-color: #bdc3c7;
color:white !important;
height:33px;
}
.Select-value {
/*background-color: rgb(255, 102, 0);*/
background-color: black; /*antiquewhite;*/
color: white; /*black;*/
/*color:#000000;*/
}
.Select-menu-outer {
background-color: rgb(0, 0, 0);
}
input, select{
width: 100%;
}
iframe{
background-color: transparent;
border: 0px none transparent;
padding: 0px;
overflow: hidden;
}
/*Classes*/
.header{
background-color: #000000;
width: 100%;
text-align: center;
padding: 10px;
}
.header a{
color: white;
text-transform: uppercase;
text-decoration: none;
padding: 5px;
line-height: 40px;
border: 0.1em solid #ffffff;
border-radius:0.05em;
margin: 5px;
}
.header_active, .header a:hover{
background-color: #f39c12; /*#ff6600c0;*/
}
.ctr_toolbar{
background-color: #000000;
height: 50px;
width: 100%;
text-align: center;
}
.ctr_toolbar_item {
text-align: center;
display : inline-block;
position : relative;
margin : 0 auto;
padding : 0px;
float : center;
}
.doa_check{
text-align: left;
}
.btn{
height: 40px;
cursor: pointer;
background-color: #7ccc63; /*green;*/
border: 0.1em solid #000000;
border-radius:0.12em;
color: black;
font-size:20px;
text-decoration: none;
text-align: center;
width: 100%;
transition: all 0.2s;
}
.btn:hover{
color: rgb(0, 0, 0);
background-color: #f39c12; /*#ff6600;*/
}
.btn a{
color: white;
text-decoration: none;
position: relative;
top: 15%;
}
.btn_start{
height: 40px;
cursor: pointer;
background-color: #7ccc63; /*#02c93d;*/
border: 0.1em solid #000000;
border-radius:0.12em;
color: rgb(0, 0, 0);
font-size:20px;
text-decoration: none;
text-align: center;
width: 100%;
transition: all 0.2s;
}
.btn_start:hover{
color: rgb(0, 0, 0);
background-color: #f39c12; /*#ff6600;*/
}
.btn_stop{
height: 40px;
cursor: pointer;
background-color: #e74c3c; /*#c40404;*/
border: 0.1em solid #000000;
border-radius:0.12em;
color: rgb(0, 0, 0);
font-size:20px;
text-decoration: none;
text-align: center;
width: 100%;
}
.btn_stop:hover{
color: rgb(0, 0, 0);
background-color: #f39c12; /*#ff6600;*/
}
.btn_save_cfg{
height: 40px;
cursor: pointer;
background-color: #bdc3c7; /*#b5aef5;*/
border: 0.1em solid #000000;
border-radius:0.12em;
color: rgb(0, 0, 0);
font-size:20px;
text-decoration: none;
text-align: center;
width: 100%;
}
.btn_save_cfg:hover{
color: rgb(154, 233, 102);
background-color: #f39c12; /*#ff6600;*/
}
.tooltip{
color: rgb(0, 0, 0);
background-color: #ffffff;
opacity: 0.95;
border-radius:0.2em;
width: 300px;
}
.card{
background-color: #000000;
border: 0.1em solid #ffffff;
border-radius:0.2em;
width: 400px;
max-width: 500px;
padding: 20px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.46);
margin: 10px;
float: left;
}
.monitor_card{
background-color: #000000;
border: 0.1em solid #ffffff;
border-radius:0.2em;
width: 95%;
height: 800px;
overflow:scroll;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.46);
margin: auto;
}
.field{
width: 400px;
display: block;
margin: 10px auto;
padding: 0px;
}
.field-label{
width: 225px;
display: inline-block;
vertical-align: middle;
}
.field-body{
width: 165px;
display: inline-block;
}
.field-body-textbox{
width: 153px;
display: inline-block;
background-color: black;
border: 1px solid;
border-color: #bdc3c7;
color: white;
padding-left: 10px;
height: 33px;
}
.field-body-wide{
width: 400px;
display: inline-block;
}
/*Mobile Properties*/
@media screen and (max-width: 1072px) {
.card{
width: calc( 100% - 30px );
padding: 5px;
margin: 20px auto;
float: none;
}
}
@media screen and (max-width: 500px) {
.field, .field-label, .field-body, input{
width: calc( 100% - 15px );
}
}