/* Space out content a bit */

body {
    /*padding-bottom: 20px;*/
}


/* Everything but the jumbotron gets side spacing for mobile first views */

.header,
.marketing,
.footer {
    padding-left: 15px;
    padding-right: 15px;
}


/* Custom page header */

.header {
    border-bottom: 1px solid #e5e5e5;
}


/* Make the masthead heading the same height as the navigation */

.header h3 {
    margin-top: 0;
    margin-bottom: 0;
    line-height: 40px;
    padding-bottom: 19px;
}


/* Custom page footer */

.footer {
    padding-top: 19px;
    color: #777;
    border-top: 1px solid #e5e5e5;
}


/* Customize container */

@media (min-width: 768px) {
    .container {
        /*max-width: 730px;*/
    }
}

.container-narrow>hr {
    margin: 30px 0;
}


/* Main marketing message and sign up button */

.jumbotron {
    text-align: center;
    border-bottom: 1px solid #e5e5e5;
}

.jumbotron .btn {
    font-size: 21px;
    padding: 14px 24px;
}


/* Supporting marketing content */

.marketing {
    margin: 40px 0;
}

.marketing p+h4 {
    margin-top: 28px;
}


/* Responsive: Portrait tablets and up */

@media screen and (min-width: 768px) {
    /* Remove the padding we set earlier */
    .header,
    .marketing,
    .footer {
        padding-left: 0;
        padding-right: 0;
    }
    /* Space out the masthead */
    .header {
        margin-bottom: 30px;
    }
    /* Remove the bottom border on the jumbotron for visual effect */
    .jumbotron {
        border-bottom: 0;
    }
}

.nav>li.active>a {
    text-decoration: none;
    background-color: #eee;
}

.thumb {
    width: 24px;
    height: 24px;
    float: none;
    position: relative;
    top: 7px;
}

form .progress {
    line-height: 15px;
}

.progress {
    display: inline-block;
    width: 100px;
    border: 3px groove #CCC;
}

.progress div {
    font-size: smaller;
    background: orange;
    width: 0;
}


#blockUiDiv {
    background-color: transparant;
    width:194px;
    height:194px;
    position:absolute;
    left:calc(50% - 97px);
    top:calc(50vh - 97px);
    display:none;
    z-index: 20001;
}

#blockUiDiv img {
    width:194px;
    height:194px;
}


#mydiv {  
    position: fixed;
    top:0;
    left:0;
    width:100%;
    height:200%;
    z-index:1000;
    background-color:grey;
    opacity: .8;
 }

.ajax-loader {
    position: fixed;
    left: 50%;
    top: 50%;
    margin-left: -32px; /* -1 * image width / 2 */
    margin-top: -32px;  /* -1 * image height / 2 */
    display: block;     
}

.active, .inactive {cursor:pointer;}
.active, .inactive {cursor:pointer;}
i.active { color: #3c763d;}
i.inactive {color: #d9534f;}

span.active {color: #3c763d;margin-left: 7%}
span.inactive {color: #d9534f;margin-left: 7%}