@import url(https://fonts.googleapis.com/css?family=Roboto);

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
}

#output {
  padding: 20px;
  text-align: center;
}

.check {
  background-image: url(images/check.png);
  background-position: center;
  background-repeat: no-repeat;
  width: 16px;
  height: 16px;
}

.check_on {
  background-image: url(images/check_on.png);
  background-position: center;
  background-repeat: no-repeat;
  width: 20px;
  height: 20px;
}

.check_off {
  background-image: url(images/check_off.png);
  background-position: center;
  background-repeat: no-repeat;
  width: 20px;
  height: 20px;
}

.check_custom {
  background-image: url(images/check_custom.png);
  background-position: center;
  background-repeat: no-repeat;
  width: 20px;
  height: 20px;
}
/*
.form-startup
{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: auto;
  background: #F0F0F0;
}

.form-startup .block {
}

.form-startup .block-login {
  width: 500px;
  margin: auto;
  padding: 30px;
}

.form-startup input[type=text], input[type=password] {
  width: 100%;
  padding: 10px;
  margin: 5px 0 22px 0;
  display: inline-block;
  border: 1px solid #A0A0A0;
  box-sizing: border-box
}

.form-startup input[type=text]:focus, input[type=password]:focus {
  outline: #4D90FE solid 1px;
  outline-offset: 0;
}

.form-startup button {
  width: 120px;
  padding: 5px;
}

.form-startup hr {
  margin: 25px 0px 25px 0px;
}

.form-startup #footer {
  position: absolute;
  width: 100%;
  bottom: 0;
  font-size: 10pt;
  text-align: center;
  color: #606060;
  background: rgba(255,255,255,.50);
}

#footer li {
  display: inline-block;
  padding: 0 10pt;
}

#outer_container{margin:30px auto; width:95%; padding:0 10px;}
#thumbScroller{position:relative; margin:auto;}
#thumbScroller{width:100%;}
#thumbScroller, #thumbScroller .container, #thumbScroller .content{height:270px;}
#thumbScroller{overflow:hidden;}
#thumbScroller .container{position:relative; left:0; }
#thumbScroller .content{padding: 10px 15px; width:400px; float:left; opacity: 50%; -webkit-transition: 500ms }
#thumbScroller .content:hover{ opacity: 100%;  animation-name: content-hover; }

@keyframes content-hover {
  from {
    opacity: 0.5;
  }

  to {
    opacity: 1.0;
  }
}

.HCARD {
  border: 1px solid grey;
  box-shadow: 0px 0px 10px rgba(0,0,0,.50);
  box-sizing: border-box;
  background: linear-gradient(30deg, #a0a0ff, #6060ff 30%, #a0a0ff);
  display: flex;
  flex-direction: column;
}

.HCARD .title {
  font-weight: bolder;
  padding: 3px;
  background: rgba(255,255,255,.50);
  line-height: 1;
  user-select: none;
  white-space: nowrap;
}

.HCARD .client {
  text-indent: 20px;
  padding: 3px;
  flex-grow: 2;
  user-select: none;
  overflow: auto;
  text-align: justify;
}

.HCARD p {
  margin: 0;
}
*/

/*

.example-1 .form-group{padding:1em;margin:1em}
.example-1 input[type=file]{outline:0;opacity:0;pointer-events:none;user-select:none}
.example-1 .label{width:120px;border:2px dashed grey;border-radius:5px;display:block;padding:1.2em;transition:border 300ms ease;cursor:pointer;text-align:center}
.example-1 .label i{display:block;font-size:42px;padding-bottom:16px}
.example-1 .label i,.example-1 .label .title{color:grey;transition:200ms color}
.example-1 .label:hover{border:2px solid #000}
.example-1 .label:hover i,.example-1 .label:hover .title{color:#000}
*/