/******************
    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
*/
.mddl ul {display: none;}
.bootstrap-select .dropdown-menu{z-index:2001;}

.logo-container>img {max-height: 84px;}
.question-title-container{padding-bottom:0;}

.asterisk{
    margin-right: 10px;
}

.question-container{
    margin-bottom: 1em;
}

.space-col{
    margin-top: .5em;
    margin-bottom: .5em;
}

.yesno-button li{
    background-color: white;
    color: #444;
    box-shadow: none;
    border: 1px solid #ccc;
}

.yesno-button li:first-child{
    border-right: 0;
}

.yesno-button li:hover{
    background-color: #444;
    color: #efefef;
    box-shadow: 1px 1px 5px rgba(0,0,0,.3);
    border-color: #ccc;
}

.yesno-button li[id$="Y"]:hover,
.yesno-button li[id$="Y"].active{
    background-color: Green;
    color: white;
}

.yesno-button li[id$="N"]:hover,
.yesno-button li[id$="N"].active{
    background-color: DarkRed;
    wolor: white;
}

body .top-container{
    margin-top:40px;
}

.progress{
    border-radius: 2px;
    box-shadow: 0 0 0 transparent;
    background-color: #c8c8c8;
}

.progress-bar{
    background-color: #042B56;
}

.survey-name{
    margin: 30px 0 10px 0;
}

.survey-description{
    margin-bottom: 30px;
}

.survey-welcome{
    margin: 40px 0;
}

.form-control{
    border-radius: 2px;
}

.popover{z-index: 3000;}

.btn{
    border-radius: 2px;
    position: relative;
    margin-bottom: .3125rem;
    font-size: .88em;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0;
    cursor: pointer;
    border: 0;
    outline: 0;
    line-height: 1.5;
    z-index: 1;
    box-shadow: 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12), 0 2px 4px -1px rgba(0,0,0,.2);
    transition: box-shadow .2s cubic-bezier(.4,0,1,1),background-color .2s cubic-bezier(.4,0,.2,1),color .2s cubic-bezier(.4,0,.2,1);
}

.btn-lg{
    border-radius: 4px;
}

#mkcl{
    z-index: 10000;
    position:fixed;
    bottom:20px;
    left:20px;
    right:20px;
    padding:10px;
    background: white;
    background:rgba(255,255,255,.7);
    border:1px dashed #efefef;
    margin:10px;
    overflow: hidden;
    min-height: 200px;
    max-height: 600px;
}

    #mkcl .content{
        overflow: scroll;
        height: 150px;
    }

    #mkcl h4{
        border-bottom:1px solid #444;
    }

/*SERENITY LOADING CLASSES - FINSOFT*/
.overlay{
    		position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 12000;
			background-color: black;
			background-color: rgba(0,0,0,.6);
			/* works for IE 5+. */
			filter:alpha(opacity=60);
			/* works for IE 8. */
			-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
		}
.spinner {
  margin: 250px auto;
  width: 50px;
  height: 40px;
  text-align: center;
  font-size: 10px;
}

.numeric-item input[data-number='1'] {
    text-align: left;
}

.spinner > div {
  background-color: #FFF;
  height: 100%;
  width: 6px;
  display: inline-block;
  
  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
  animation: sk-stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

@-webkit-keyframes sk-stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
  20% { -webkit-transform: scaleY(1.0) }
}

@keyframes sk-stretchdelay {
  0%, 40%, 100% { 
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% { 
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}