/******************
    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
*/

body {
    font-family: 'Roboto',"Helvetica Neue",Helvetica,Arial,sans-serif;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
font-family: 'Roboto',"Helvetica Neue",Helvetica,Arial,sans-serif;
}

a {
    color: #8dd0de;
    text-decoration: none;
    box-shadow: 5px 5px 15px #D9D6D4;
}

a:hover {
    color: #8dd0de;
}


.question-container {
margin-bottom: 2em;
background:white;
color: #444;   /*Text Color*/
border-bottom: 1px solid #f2f2f2; /*Border bottom of question block*/
}

.question-container-printanswers {
margin-top: 2em ;
margin-bottom: 2em ;
padding-bottom: 2em ;
border-bottom: 1px solid f2f2f2;
}

.horizontal-divider.top{
border-top: 3px solid #f2f2f2;
}

.answer-container, .question-help-container {
    border-color: #f2f2f2; /*Border left/ right of question block*/
}

.limit-text-window {
    max-height: 40rem;
    max-height: 33vh;
    padding: 15px 5px;
    overflow: auto;
    border-top: 1px solid #c62887;
    border-bottom: 1px solid #c62887;
    border-left: none;
    border-right: none;
    outline: none;
}

/* Define the color for Awesome Bootsrap Checkboxes ; based on bg-primary background-color*/

.flatly label::after{background-color:#c62887;}

.form-control, input {
    border-width: 2px;
    box-shadow: 3px 3px 10px #f2f2f2 inset;
}

.form-control:active, input:active {
    border-width: 2px;
    box-shadow: none;
    border-color: #04abe9;
}


#progress-wrapper .ui-widget-header {
background-color: #c62887;
}

.bg-primary {
    
    /*background-color: #8dd0de;
    background-color: #dbdbd7;
    background-color: #D9D6D4; */
    background-color: #f2f2f2;
    color:black;
}

.btn {
    border-width: 0px;
    text-transform: uppercase;
    border-radius: 0;

}

.btn-primary {
    
    background-color: #04abe9;
    border-width: 0px;
    box-shadow: 5px 5px 15px #D9D6D4;
}

.btn-primary:hover{
    background-color:#018ddd;
    border-width: 0px;
    box-shadow: none;
}

.btn-primary:active, .btn-primary.active, .open>.dropdown-toggle.btn-primary {
    /*color: #ffffff;*/
    background-color: #018ddd;
    border-color: #018ddd;
    outline:none;
    box-shadow: 2px 2px 10px #444 inset;
}

.btn-primary:active:hover, .btn-primary.active:hover, .open>.dropdown-toggle.btn-primary:hover, .btn-primary:active:focus, .btn-primary.active:focus, .open>.dropdown-toggle.btn-primary:focus, .btn-primary:active.focus, .btn-primary.active.focus, .open>.dropdown-toggle.btn-primary.focus {
    color: #ffffff;
    background-color: #018ddd;
    border-color: #018ddd;
    border-width: 0px;
    outline:none;
    box-shadow: 2px 2px 10px #444 inset;
}

.btn-default {
    background-color: white;
    color: #444;
    box-shadow: 5px 5px 15px #D9D6D4;
    text-transform: uppercase;
}

.btn-default:hover {
    background-color: #c62887;
    color: white;
    box-shadow: none;
}

.btn-info {
    background-color: #04abe9;
    border-color: #04abe9;
}

.btn-info:hover, .btn-info:focus {
    color: #ffffff;
    background-color: #018ddd;
    border-color: #018ddd;
    outline:none;
}

.text-info, .text-info:hover {
    color: #04abe9;
}

.alert-warning {
    background-color: #c62887;
    /*border-color: #f39c12;*/
    border-color: #c62887;
    color: #fff;
}

.navbar-default {
    /*background-color: #2c3e50;*/
    background-color: white;
    border-color: transparent;
}

.navbar-default .navbar-nav>li>a {
    color: #04abe9;
}

.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus {
    color: #04abe9;
    background-color: transparent;
}

.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus {
    background-color: #018ddd;
    color: #ffffff;
}

.progress-bar {
    background-color: #c62887;
}

.question-title-container {
    background-color: #f2f2f2;
}

.logo-container>img {
    max-height: 120px;
    height: 100%;
    padding: 0;
    margin: 15px;
    width: auto;
}

.img-responsive, .thumbnail>img, .thumbnail a>img, .carousel-inner>.item>img, .carousel-inner>.item>a>img {
    padding: 50px;
    height: 20px;
}

@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px){
    .table.ls-answers tr th {
        color: #444;
    }
}

@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {
    .ls-answers tbody td {
        text-align: center;
    }
}