/******************
    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: #000000;
	line-height: 10px;
	border-width: 1px;
}
 
div.yes-no .btn-primary:hover {
	background-color: #F0F0F0;
	color: #000000;
}

div.yes-no .btn-primary:active,
div.yes-no .btn-primary.active {
	background-color: #2C3E50;
	color: #FFFFFF;
	box-shadow: none;
}


body {
    
/*
    background-image: url('../files/white-texture.jpg');
    background-repeat:no-repeat;
    background-position:center;
    background-size: cover;
    font-size: 17px;
    
*/
    background-color: #F7F7F7;
}


.alert-warning {
    background-color: #fff00c;
    border-color: #fff00c;
    color: #000000;
}

.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: #000000;
    text-align: center;
    background-color: #fff00c;

}

.bg-primary {
    color: #000;
    background-color: #fff00c;
}

.btn-primary {
    color: #000000;
    background-color: #fff00c;
    border-color: #fff00c;
}

.btn-primary:hover{
    color:#000000;
    background-color:#eddb0c;
    border-color:#eddb0c;
}

.btn-default {
    color: #000000;
    background-color: #fff00c;
    border-color: #fff00c;
}

.btn-default:hover{
    color:#000000;
    background-color:#eddb0c;
    border-color:#eddb0c;
}

.btn-primary:active:focus{
    color:#000000;
    background-color:#eddb0c;
    border-color:#eddb0c;
}

.btn-default:active:focus{
    color:#000000;
    background-color:#eddb0c;
    border-color:#eddb0c;
}

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: #000000;
    background-color: #fff00c;
    border-color: #fff00c;
}

.btn-info:hover{
    color:#000000;
    background-color:#eddb0c;
    border-color:#eddb0c;
}



.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 #000000;
    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: #fff00c;
}

.checkbox-item label:before {
    content: " ";
    display: inline-block;
    border: 2px solid #000000;
    background-color: transparent;
}


.checkbox-item input[type="checkbox"]:checked + label::after, .checkbox-item input[type="radio"]:checked + label::after {
    content: "✔";
    /* background: #fff00c; */
    background-color: #fff00c;
    color: black;
    text-align: center;
}