@charset "utf-8";
/* CSS Document */
body {
  color:rgba(128,153,166,1);
  font-family: 'Raleway', cursive;
}
.logo {
  min-width: 180px;
  width: 17%;
  position: absolute;
  bottom: 1rem;
  left: 1rem;
}
.logo img {
  height: auto;
  width:100%;
}
/* https://codepen.io/Kseso/pen/fxrsL */
.p-list {
  position: relative;
  width:100%;
  max-width: 600px;
  margin: 0 auto;
  color:rgb(82,90,87);

}
.p-list p {
  width:100%;
  min-width: 250px;
  margin: 0 auto;
  font-size: 1.8rem;
  line-height: 2rem;
  margin-top: .4rem;
}
.p-list p:before {
  content: '';
  position: absolute;
  bottom: .2rem;
  width: 100%;
  height: 0;  /* BOK */
  line-height: 0;
  border-bottom: 2px dotted rgb(130,140,137);
}
.p-list .desc {
  background: inherit;
  display: inline;
  z-index: 1;
  padding-right: .2rem;
}
.p-list .dims {
  font-family: 'Pompiere', cursive;
  background: inherit;
  position: absolute;
  min-width: 5rem;
  bottom: 0;
  right: 0;
  padding-left: .2rem;
  text-align: right;
  z-index: 2;
}
.p-list .dims:after {
  content: '';
}

.hf-field {
	border: solid 2px rgba(82,90,87, 0.6);
	transition: all 0.65s ease;
	color:#888;
  background-color: transparent;
  font-family: 'Pompiere', cursive;
	font-size:1.6em;
  font-weight: 500;
}

.f-list {
  height: 35px;
  cursor: default;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 25px;
}
.f-list .half {position: relative;}
.f-list p, .f-list input {
  line-height: 1.5em;
  vertical-align: middle;
}
.f-list input[type="text"] {
  width: 100px;
	display: block;
	border: solid 2px rgba(82,90,87, 0.6);
	transition: all 0.65s ease;
	color:#888;
  background-color: transparent;
  font-family: 'Pompiere', cursive;
	font-size:1.4em;
  font-weight: 500;
}

.f-list input[type="text"]:focus {
	outline: none;
	border: solid 2px rgba(82,90,87,1);
}

.f-list p {
  font-size: 25px;
  text-align: right;
  margin-right: 11px;
  margin-top: 20px;
}

label{
  font-size: 1.4rem;
}

.title_bar {
  margin:0;
  padding: 1rem;
  border-radius: 8px;
  height: 4rem;
  background-color: rgba(128,153,166,1);
  position: relative;
  color:rgba(185,188,187,1);
  border-radius: 8px;
}
.title_bar h1 {
  font-size: 3.8rem;
  line-height: 4rem;
  text-align: center;
  font-weight: 500;
}

.close_x {
  position: absolute;
  top:-12px;
  right:8px;
  color:rgba(185,188,187,.8);
  cursor: pointer;
  font-weight: 100;
  font-size: 2.7rem;
}
.close_x:hover, .pos-tr .button:hover {
  border: none;
  box-shadow: none;
}

.content_panel{
  background-color:rgba(185,188,187,1.95);
  margin:0;
  padding: 1rem;
  border-radius: 8px;

}

.tutorial {position: absolute; top:8px; right: 8px; font-size: 16px; cursor: pointer; z-index: 5;}
.edit { font-size:20px; margin-left:10px; font-family: 'Pompiere', cursive; }
form input { font-family: 'Pompiere', cursive; }
.form input[type="submit"], .form input[type="reset"] {
  font-size:24px;
  font-weight: 500;
  padding: 9px 18px;
}

/* COLORS ----------------- */
.white {color: rgba(220,220,220,1);}
a { color: rgba(128,153,166,.85); text-decoration:none; }
a:hover {	filter: brightness(115%) saturate(2) hue-rotate(2deg); }
.edit a { color: rgba(220,220,220,.85); text-decoration:none; }
.edit a:hover { color: rgba(220,220,220, 1); }

.color_1, a.color_1 { color:rgb(135,130,140); }
.color_1_bg { background-color:rgb(135,130,140); }

.color_2, a.color_2 { color:rgb(199,163,156); }
.color_2_bg { background-color:rgb(199,163,156); }

.color_3, a.color_3 { color:rgb(185,188,187); }
.color_3_bg { background-color:rgb(185,188,187); }

.color_4, a.color_4 { color:rgb(82,90,87); }
.color_4_bg { background-color:rgb(82,90,87); }

.color_5, a.color_5 { color:rgb(130,140,137); }
.color_5_bg { background-color:rgb(130,140,137); }

.color_6, a.color_6 { color:rgb(128,153,166); }
.color_6_bg { background-color:rgb(128,153,166); }

.color_7, a.color_7 { color:rgb(156,142,133); }
.color_7_bg { background-color:rgb(156,142,133); }


.error {	background-color:rgb(199,163,156); }
.success { 	background-color:rgb(130,140,137); }
.info {		background-color:rgb(128,153,166); }
.warning { 	background-color:rgb(156,142,133); }
.error-text {	color:rgb(199,163,156); }
.success-text { color:rgb(130,140,137); }
.info-text {	color:rgb(128,153,166); }
.warning-text { color:rgb(156,142,133); }

.see-thru-dark { background-color: rgba(0,0,0, 0.55); color:#FFF; }
.see-thru-lite { background-color: rgba(250,250,250, 0.9); }