/******************
    User custom CSS
    ---------------

    In this file you can add your own custom CSS
    It will be loaded last, so you can override any other property.
    Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/


@font-face {
    font-family: 'emojione';
    src: url('../files/emojione-svg.woff2') 
    format('woff2');
  }
  
  @font-face {
    font-family: 'color-emojione';
    src: url('../files/emojione-android.ttf') 
    format('truetype')
  }
  
  .emoji {
      font-family: emojione;
  }
  
  .emoji.emoji-color {
      font-family: color-emojione;
  }
  
  
  .star-rating{
      font-size: 48px;
      line-height:72px;
      cursor: pointer;
      display: block;
      float: left;
      height: 72px;
      overflow: hidden;
      width: 72px;
  }
  .star-cancel{color: #727272;}
  .star-cancel.star-drained{color: #932424}
  .star-cancel.star-hover{color: #a12424; text-shadow: 1px 0 #a12424;}
  .star-1{color: #727272}
  .star-1.star-rated-on:not(.star-stub){color: #f0f312}
  .star-1.star-drained{color: #f0f312}
  .star-1.star-drained.star-hover{text-shadow: 1px 2px #f0f312;}
  .star-2{color: #727272}
  .star-2.star-rated-on:not(.star-stub){color: #f3ec12}
  .star-2.star-drained{color: #f3ec12}
  .star-2.star-drained.star-hover{text-shadow: 1px 2px #f3ec12;}
  .star-3{color: #727272}
  .star-3.star-rated-on:not(.star-stub){color: #f3d712}
  .star-3.star-drained{color: #f3d712}
  .star-3.star-drained.star-hover{text-shadow: 1px 2px #f3d712;}
  .star-4{color: #727272}
  .star-4.star-rated-on:not(.star-stub){color: #f3c312}
  .star-4.star-drained{color: #f3c312}
  .star-4.star-drained.star-hover{text-shadow: 1px 2px #f3c312;}
  .star-5{color: #727272}
  .star-5.star-rated-on:not(.star-stub){color: #f39c12}
  .star-5.star-drained{color: #f39c12}
  .star-5.star-drained.star-hover{text-shadow: 1px 2px #f39c12;}
  
  .fa-star:before {
      content: "\f006";
  }
  
  .fa-ban {
  font-size: 44px !important;
  padding-top: 7px;
  }
  
  
  .btn-group-justified {
      border-spacing: 10px;
  }
  
  div.yes-no .btn-primary {
      border-radius: 4px !important;
  }
  
  div.yes-no .btn-primary {
      background-color: #FFF;
      color: #FFFFFF;
      line-height: 10px;
      border-width: 1px;
  }
   
  div.yes-no .btn-primary:hover {
      background-color: #F0F0F0;
      color: #FFFFFF;
  }
  
  div.yes-no .btn-primary:active,
  div.yes-no .btn-primary.active {
      background-color: #00573b;
      color: #FFFFFF;
      box-shadow: none;
  }
  
  
  body {
      
  /*
      background-image: url('../files/Fondo Travel azul claro mocrom .jpg');
      background-repeat:no-repeat;
      background-position:center;
      background-size: cover;
      font-size: 17px; */
      
  
      background-color: #e6fff7;
  }
  
  
  .alert-warning {
      background-color: #00573b;
      border-color: #00573b;
      color: #FFFFFF;
  }
  
  .navbar-default {
      /* background-color: #ffee0c; */
      background-color: transparent;
      border-color: transparent;
  }
  .navbar {
      height: 30px;
      min-height: 30px;
      margin-bottom: 0px;
  }
  
  
  .logo-container>img {
      max-height: 30px;
      /*height: 100%; */
       padding: 0px; 
      width: auto;
  }
  .navbar-brand {
      float: left;
       padding: 0px 0px; 
      font-size: 18px;
      line-height: 20px;
      height: 30px;
  }
  
  .progress-bar {
      float: left;
      width: 0%;
      height: 100%;
      font-size: 14px !important;
      line-height: 20px !important;
      color: #FFFFFF;
      text-align: center;
      background-color: #008057;
  
  }
  
  .bg-primary {
      color: #000;
      background-color: #f5f5f5;
  }
  
  .btn-primary {
      color: #FFFFFF;
      background-color: #008057;
      border-color: #008057;
  }
  
  .btn-primary:hover{
      color:#FFFFFF;
      background-color:#006b49;
      border-color:#006b49;
  }
  
  .btn-default {
      color: #FFFFFF;
      background-color: #008057;
      border-color: #008057;
  }
  
  .btn-default:hover{
      color:#FFFFFF;
      background-color:#006b49;
      border-color: #006b49;
  }
  
  .btn-primary:active:focus{
      color:#FFFFFF;
      background-color:#999;
      border-color:#999;
  }
  
  .btn-default:active:focus{
      color:#FFFFFF;
      background-color:#999;
      border-color:#999;
  }
  
  body .top-container {
      margin-top: 0px !important;
  }
  
  .ls-answers {
      padding-top: 15px;
      padding-bottom: 0px;
      margin-bottom: 0;
  }
  
  .space-col {
      margin-top: 0em;
      margin-bottom: 0em;
  }
  
  .btn-info {
      color: #FFFFFF;
      background-color: #008057;
      border-color: #008057;
  }
  
  .btn-info:hover{
      color:#FFFFFF;
      background-color:#006b49;
      border-color:#006b49;
  }
  
  
  
  .radio-item input[type='radio'] {
    display: none;
  }
  
  .radio-item label {
    color: #000;
    font-weight: normal;
    padding-left: 0px;
  }
  
  
  
  .radio-item label:before {
      content: " ";
      display: inline-block;
      border-radius: 11px;
      border: 2px solid #008057;
      background-color: transparent;
  }
  
  .radio-item label:after {
      content: " ";
      border-radius: 11px;
      display: inline-block;
      /* width: 12px; */
      /* height: 12px; */
      position: absolute;
      /* top: 9px; */
      /* left: 24px; */
      /* display: block; */
      background: #008057;
  }
  
  .checkbox-item label:before {
      content: " ";
      display: inline-block;
      border: 2px solid #008057;
      background-color: transparent;
  }
  
  
  .checkbox-item input[type="checkbox"]:checked + label::after, .checkbox-item input[type="radio"]:checked + label::after {
      content: "✔";
      /* background: #008057; */
      background-color: #008057;
      color: black;
      text-align: center;
  }
  
  .form-control {
      border: 1px solid #008057;
  }
  
  .text-info {
      color: #008057;
  }

  .text-primary {
    color: #008057;
}

a {
    color: #f3c242;
    text-decoration: none;
}

.text-danger {
    color: #f3c242;
}

.text-info:hover {
    color: #f3c242;
}

.text-primary:hover {
    color: #f3c242;
}

.responsive {
  width: 100%;
  height: auto;
}