/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
    Created on : Dec 2, 2015, 2:41:30 PM
    Author     : trieutran
*/

.selected {
    display: block;
    background-color: gray;
    }
.kc-choices {
  margin:0 0 10px 0;
  width:100%;
  cursor:pointer;
  float:left;
  }
.kc-choice-label {
  width: 45px;
      height: 45px;
      border-radius: 25px;
      float: left;
      display: block;
      text-align: center;
      margin: 0 auto;
      line-height: 45px;
      color: #fff;
      text-transform: uppercase;
      letter-spacing: .15em;
      text-decoration: none;
      padding-left: 2px;
      font-size: 1.2em;
      font-weight: 300;
      background: linear-gradient(90deg, #54a4da, #1e6ec7);
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10), 0 1px 2px rgba(0, 0, 0, 0.18);
      transition: 0.3s;
}
.kc-choice-label.kc-block:hover {
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.7);
    top: 2px;
    transform: scale(1.02);
    color: #dedede;
    background: #FFF;
    color: #54a4da;
}
.kc-choices:hover {
/*  transform: scale(1.05);
      color: #969696;
      margin-left: 23px;*/
}
.kc-choice-text {
  height: 45px;
  font-size: 20px;
  line-height: 30px;
  margin: 5px 0;
  float: left;
  font-weight: 300;
  padding-left: 20px;
}
.kc-choice-text.long {
    width:90%;
    line-height:23px;
    }
.kc-select {
  background: #282828;
  box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.9);
  color: #54a4da;
}
.kc-green {
  background: #54a4da;
  color: white;
}
.kc-red {background:#d9524f;}

label > input{ /* HIDE RADIO */
  display:none;
}

label > input + .checkbox-block{ /* IMAGE STYLES */
  cursor:pointer;
  border:2px solid transparent;
}

label > input:checked + .checkbox-block{ /* (CHECKED) IMAGE STYLES */
  background-color: #fc4349;
}
.myButton {
  background-color: #7d2124;
}

button.kc-quiz-button {
  display: block;
  width: 250px;
  background: #27ae60;
  text-align: center;
  margin: 30px auto;
  height: 50px;
  line-height: 50px;
  border-radius: 25px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .15em;
  text-decoration: none;
  font-size: .9em;
  font-weight: 300;
  background: linear-gradient(90deg, #54a4da, #1e6ec7);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10), 0 1px 2px rgba(0, 0, 0, 0.18);
  transition: 0.3s;
  &:hover {
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.10), 0 8px 8px rgba(0, 0, 0, 0.18);
  }
    }
    button.kc-quiz-button:hover {
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.7);
  top: 2px;
  transform: scale(1.02);
  color: #dedede;
  background: #FFF;
  color: #54a4da;
    }