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

.uploadedfiles{margin: 8px 0;}
.uploadedfiles th, td{ border-bottom: 1px solid #efefef;padding: 4px;}
table.uploadedfiles th:last-child,
table.uploadedfiles td:last-child,
table.uploadedfiles th:nth-last-child(1),
table.uploadedfiles td:nth-last-child(1) {
    width:1%;
    padding: 0 8px;
}

table.uploadedfiles th:first-child,
table.uploadedfiles td:first-child{
    width: 1%;
}


.mddl ul {display: none;}
.bootstrap-select .dropdown-menu{z-index:2001;}
.bs-searchbox .form-control{
    padding: 0 3px;
    margin: 3px 10px;
    width: 92% !important
}

.btn-info, .btn-info:active, .btn-info:focus, .btn-info:hover{
    background-color: #21a1d9;
}

li.radio-item, li.checkbox-item, li.radio-text-item, li.checkbox-text-item{
    margin-bottom:0;
}

.popover{z-index: 2001;}

.logo-container>img {max-height: 150px !important; padding: 8px;}

.btn-primary, .btn-success, .btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active, .btn-primary:active, .open>.dropdown-toggle.btn-primary, .bootstrap-datetimepicker-widget table td.active, .bootstrap-datetimepicker-widget table td.active:hover{ background-color: #21a1d9; color: #333;}
.btn-primary:hover, .btn-primary.active:hover, .btn-success:hover{ background-color: #5bc0de; color: #333;}

.asterisk{
    margin-right: 10px;
}

.navbar-default{
    border-color: black;
    background-color: white;
}

h1.survey-name, .text-info, .alert-info{ color: #21a1d9;}
.alert-info{ background-color: #e7d9ff; border-color: #21a1d9;}
.navbar-fixed-top {
    border-bottom: 4px solid #21a1d9;
}

.button-item .ls-icon{ display: inline-block; margin-right: 6px;}
.button-item label {margin-bottom: 0;}

.navbar-brand h5{margin: 10px 10px; font-size: 1.1em;}

.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;
}

.logo-container>img {
    max-height: 80px;
}

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

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

.progress-bar{
    background-color: #f8b815;
    color: #333;
}

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

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

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

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

.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;
    }

.upload-div {
    margin-bottom: 10px;
}
    
.uploadedfiles thead td,
.uploadedfiles thead th{
    font-weight: bold;
}
    
.uploadedfiles .upload.title,
.uploadedfiles .upload.comment,
.uploadedfiles .upload.edit{
    text-align: left;
}

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

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

.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);
  }
}