/*
 * Claudio Fernandez
 * Mintaka Web Services
 * claudio@mintakawebservices.com
 */

#step1 { margin-top:160px; }

.topBanner {   
    background-color: #f3f4f5;
    position: fixed;
    top: 58px;
    z-index: 20;
    box-shadow: 0 3px 3px #b7b7b7;
}

.appsplash {
    
    z-index: 1100 !important;
    position: absolute;
    background-color: #003d58;
    padding: 0;
    border: 1px solid;
    top: 0;
    height: 100%;
    display: none;
    
}

.appsplash h2, .appsplash p { color: #fff; }

.bg-mbsblue { background-color: #003d58; }

.badge-active { background-color: #6495ed; color: #fff;}

#flushtoRight { margin-left:auto; display:flex !important; }

#emailButton { display:none;  }
#emailButton.is-active { display:block; }

#startOver { margin-right:5px; }

.navlogo { height:30px;}

.grow { transition: all .2s ease-in-out; }
.grow:hover { transform: scale(1.02); }

.nomargin {margin:0 !important}
.nopadding {padding:0 !important}

.pad10 {padding:10px !important}
.margin10 {margin:10px !important}

.pad5 {padding:5px !important}
.margin5 {margin:5px !important}

.border {border:1px solid #ddd;}
.text-center { text-align:center; }
.text-right { text-align:right; }
.img-center { display:block; margin-left:auto; margin-right: auto; } 

.topmargin0 {margin-top:0px;}
.topmargin10 {margin-top:10px;}
.topmargin20 {margin-top:20px;}
.topmargin30 {margin-top:30px;}
.topmargin40 {margin-top:40px;}
.topmargin50 {margin-top:50px;}
.topmargin60 {margin-top:60px;}
.topmargin70 {margin-top:70px;}
.topmargin80 {margin-top:80px;}

.bottommargin0 { margin-bottom:0px; }
.bottommargin10 { margin-bottom:10px; }
.bottommargin20 { margin-bottom:20px; }
.bottommargin30 { margin-bottom:30px; }
.bottommargin40 { margin-bottom:40px; }
.bottommargin50 { margin-bottom:50px; }
.bottommargin60 { margin-bottom:60px; }
.bottommargin70 { margin-bottom:70px; }
.bottommargin80 { margin-bottom:80px; }

span.next { 

    font-size: 0.6em;
    color: #fff;
    background-color: #000;
    border-radius: 20px;
    display: inline-block;
    padding: 3px 6px;
    position: relative;
    top: -3px;
    margin: 0 5px;

}

span.next::before { content: ">"; }

#app-path { padding: 10px 0; }
#app-path h5 { margin:0; }


@media (min-width: 768px) and (max-width: 1024px){ #config-sticky {width:45%;} }

@media (min-width: 768px) { 
    
    #config-sticky { position: fixed; top: 180px; z-index: 1020; }
    #config-sticky #openconfig { display:none; }
    
}

.blocks h2 { margin-top:40px; }
.blocks > div:first-child >  h2{ margin-top:0 !important; }

.block {}

.block .element {
    
    border-radius: 6px;
    border: 2px solid #ccc;
    margin-bottom: 10px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    
}

.block .element.active { border: 2px solid #6495ed; }

.block .element .info {
    
    position: absolute;
    height: 100%;
    width: 30px;
    right: 0;
    background-color: #6495ed;    
    background-image:url('../img/info.svg');
    background-size:50%;
    background-position:center;
    background-repeat: no-repeat;
    border-left: 2px solid #ccc;
    cursor: pointer;
    transition: background-color 250ms linear;    
}

.block .element:hover { animation-name: animatebuttonhover; animation-duration: 0.25s; }

@keyframes animatebuttonhover {
  0%   {background-color: white;}
  50%  {background-color: #f3f4f5;}
  100% {background-color: white;}
}


.block .element:active { animation-name: animatebutton; animation-duration: 0.25s; }

@keyframes animatebutton {
  0%   {background-color: white;}
  50%  {background-color: #b9d2ff;}
  100% {background-color: white;}
}


.block .element .info:hover { background-color:#3e5f9a; }
.block .element .info .content { display:none; }


.block .element p {
    
    padding: 10px;
    display: block;
    float: left;
    width: 65%;
    font-weight: bold;
    color: #666;
    margin:0;
    
}

.block .element.disabled p { color: #999; }

.block .element span.value {
    
    position: absolute;
    top: 50%;
    transform: translate( 0, -50%);
    text-align: right;
    display: inline-block;
    float: right;
    width: 25%;    
    
}

.block .element.disabled span.value { color: #999; }


.clearfix::after, .element::after {
  content: "";
  clear: both;
  display: table;
}

#configlist { border: 1px solid #ccc; border-radius: 6px; padding: 0; background-color: #fff; }

#configlist li { list-style: none; margin: 0; padding: 5px 5px 0; border-bottom: 1px solid #ccc; text-align: center;  }

#configlist span { display: block; margin-bottom: 5px; font-size: 0.9rem; }




/* col-xs */
@media (max-width: 767px)  { 
    
    #app-path span { display:block; font-size:0.6em;}
    #app-path span:last-child {font-size:1em;}
    #app-path span.next { display:none;}
    
    .path-container { padding-left:0; padding-right:0; }
    
    #config-sticky {
        
    position: fixed;
    bottom: 0;
    background-color: #f3f4f5;
    width: 100%;
    margin: 0;
    left: 0px;
    padding: 15px;
    z-index: 1020;
    box-shadow: 0px -3px 10px #b1b0b0;
        
    }
    
    #config-sticky #thisconfig {
        
        overflow: hidden;
        height:0px;
        transition: all .5s ease-in-out;
        
    }
    
    #config-sticky #thisconfig.expanded { height:500px; overflow: scroll; }
    
    #config-sticky #openconfig { 
        display:block; 
        float: right;
        width:20px;
        height:20px;
        background-image: url(../img/up.svg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    
    #config-sticky #openconfig.closeit { background-image: url(../img/dn.svg); }
    
    #config-sticky h2 { font-size:1.4em; }

.fontsize1em-xs { font-size:1em; }
.fontsize2em-xs { font-size:2em; }
.fontsize3em-xs { font-size:3em; }
.fontsize4em-xs { font-size:4em; }
.fontsize5em-xs { font-size:5em; }
.fontsize6em-xs { font-size:6em; }
.fontsize7em-xs { font-size:7em; }
.fontsize8em-xs { font-size:8em; }
.fontsize9em-xs { font-size:9em; }

.sidepadding0-xs { padding-left:0; padding-right:0; } 
.sidepadding10-xs { padding-left:10px; padding-right:10px; } 
.sidepadding20-xs { padding-left:20px; padding-right:20px; } 
.sidepadding30-xs { padding-left:30px; padding-right:30px; } 
.sidepadding40-xs { padding-left:40px; padding-right:40px; } 
.sidepadding50-xs { padding-left:50px; padding-right:50px; } 
.sidepadding60-xs { padding-left:50px; padding-right:60px; }
    
.topmargin0-xs {margin-top:0px;}
.topmargin10-xs {margin-top:10px;}
.topmargin20-xs {margin-top:20px;}
.topmargin30-xs {margin-top:30px;}
.topmargin40-xs {margin-top:40px;}
.topmargin50-xs {margin-top:50px;}
.topmargin60-xs {margin-top:60px;}

.bottommargin0-xs {margin-bottom:0px;}
.bottommargin10-xs {margin-bottom:10px;}
.bottommargin20-xs {margin-bottom:20px;}
.bottommargin30-xs {margin-bottom:30px;}
.bottommargin40-xs {margin-bottom:40px;}
.bottommargin50-xs {margin-bottom:50px;}
.bottommargin60-xs {margin-bottom:60px;}

.text-xs-center { text-align:center; }
.text-xs-right { text-align:right; }


}

/* col-sm */
@media (min-width: 768px) and (max-width: 991px) { 

.sidepadding0-sm { padding-left:0; padding-right:0; } 
.sidepadding10-sm { padding-left:10px; padding-right:10px; } 
.sidepadding20-sm { padding-left:20px; padding-right:20px; } 
.sidepadding30-sm { padding-left:30px; padding-right:30px; } 
.sidepadding40-sm { padding-left:40px; padding-right:40px; } 
.sidepadding50-sm { padding-left:50px; padding-right:50px; } 
.sidepadding60-sm { padding-left:50px; padding-right:60px; }

.fontsize1em-sm { font-size:1em; }
.fontsize2em-sm { font-size:2em; }
.fontsize3em-sm { font-size:3em; }
.fontsize4em-sm { font-size:4em; }
.fontsize5em-sm { font-size:5em; }
.fontsize6em-sm { font-size:6em; }
.fontsize7em-sm { font-size:7em; }
.fontsize8em-sm { font-size:8em; }
.fontsize9em-sm { font-size:9em; }

.topmargin0-sm {margin-top:0px;}
.topmargin10-sm {margin-top:10px;}
.topmargin20-sm {margin-top:20px;}
.topmargin30-sm {margin-top:30px;}
.topmargin40-sm {margin-top:40px;}
.topmargin50-sm {margin-top:50px;}
.topmargin60-sm {margin-top:60px;}

.bottommargin0-sm {margin-bottom:0px;}
.bottommargin10-sm {margin-bottom:10px;}
.bottommargin20-sm {margin-bottom:20px;}
.bottommargin30-sm {margin-bottom:30px;}
.bottommargin40-sm {margin-bottom:40px;}
.bottommargin50-sm {margin-bottom:50px;}
.bottommargin60-sm {margin-bottom:60px;} 

.text-sm-center { text-align:center; }
.text-sm-right { text-align:right; }

}


/* col-md */
@media (min-width: 992px) and (max-width: 1199px) { 
    
.sidepadding0-md { padding-left:0; padding-right:0; } 
.sidepadding10-md { padding-left:10px; padding-right:10px; } 
.sidepadding20-md { padding-left:20px; padding-right:20px; } 
.sidepadding30-md { padding-left:30px; padding-right:30px; } 
.sidepadding40-md { padding-left:40px; padding-right:40px; } 
.sidepadding50-md { padding-left:50px; padding-right:50px; } 
.sidepadding60-md { padding-left:50px; padding-right:60px; }

.fontsize1em-md { font-size:1em; }
.fontsize2em-md { font-size:2em; }
.fontsize3em-md { font-size:3em; }
.fontsize4em-md { font-size:4em; }
.fontsize5em-md { font-size:5em; }
.fontsize6em-md { font-size:6em; }
.fontsize7em-md { font-size:7em; }
.fontsize8em-md { font-size:8em; }
.fontsize9em-md { font-size:9em; }
    
.topmargin0-md {margin-top:0px;}    
.topmargin10-md {margin-top:10px;}
.topmargin20-md {margin-top:20px;}
.topmargin30-md {margin-top:30px;}
.topmargin40-md {margin-top:40px;}
.topmargin50-md {margin-top:50px;}
.topmargin60-md {margin-top:60px;}

.bottommargin0-md {margin-bottom:0px;}
.bottommargin10-md {margin-bottom:10px;}
.bottommargin20-md {margin-bottom:20px;}
.bottommargin30-md {margin-bottom:30px;}
.bottommargin40-md {margin-bottom:40px;}
.bottommargin50-md {margin-bottom:50px;}
.bottommargin60-md {margin-bottom:60px;}  

.text-md-center { text-align:center; }
.text-md-right { text-align:right; }

}

/* col-lg */
@media (min-width: 1200px)  { 

.sidepadding0-lg { padding-left:0; padding-right:0; } 
.sidepadding10-lg { padding-left:10px; padding-right:10px; } 
.sidepadding20-lg { padding-left:20px; padding-right:20px; } 
.sidepadding30-lg { padding-left:30px; padding-right:30px; } 
.sidepadding40-lg { padding-left:40px; padding-right:40px; } 
.sidepadding50-lg { padding-left:50px; padding-right:50px; } 
.sidepadding60-lg { padding-left:50px; padding-right:60px; }

.fontsize1em-lg { font-size:1em; }
.fontsize2em-lg { font-size:2em; }
.fontsize3em-lg { font-size:3em; }
.fontsize4em-lg { font-size:4em; }
.fontsize5em-lg { font-size:5em; }
.fontsize6em-lg { font-size:6em; }
.fontsize7em-lg { font-size:7em; }
.fontsize8em-lg { font-size:8em; }
.fontsize9em-lg { font-size:9em; }
    
.topmargin0-lg {margin-top:0px;}    
.topmargin10-lg {margin-top:10px;}
.topmargin20-lg {margin-top:20px;}
.topmargin30-lg {margin-top:30px;}
.topmargin40-lg {margin-top:40px;}
.topmargin50-lg {margin-top:50px;}
.topmargin60-lg {margin-top:60px;}

.bottommargin0-lg {margin-bottom:0px;}
.bottommargin10-lg {margin-bottom:10px;}
.bottommargin20-lg {margin-bottom:20px;}
.bottommargin30-lg {margin-bottom:30px;}
.bottommargin40-lg {margin-bottom:40px;}
.bottommargin50-lg {margin-bottom:50px;}
.bottommargin60-lg {margin-bottom:60px;}  

.text-lg-center { text-align:center; }
.text-lg-right { text-align:right; }
    
}


/* Navigation Pages */

div.mbsoption {border: 2px solid #ccc; border-radius: 12px; padding: 10px; cursor: pointer; margin-bottom:30px; }

div.mbsoption:hover { border: 2px solid #6495ed; }

div.mbsoption img { width:100%; padding:10px;}

div.mbsoption h2 { margin-top:15px; }

@media (max-width: 576px)  { 
    
    div.mbsoption h2 { font-size: 1.8rem; margin:10px 0px 0px 0px; } 

.block .element p {  width: 60%; }

.block .element.disabled p { color: #999; }

.block .element span.value {
    
    position: absolute;
    top: 50%;
    transform: translate( 0, -50%);
    text-align: right;
    display: inline-block;
    float: right;
    width: 30%;    
    
}

#mode0, #mode1, #mode2 { position: relative; top: 110px; margin-bottom:110px; }
#modeTitle { display: none; }

}

@media (min-width: 577px) and (max-width: 767px)  { div.mbsoption h2 { margin:25px 0px 0px 0px; } }

/* CLOSE Navigation Pages */



@media print {
    
    .noprint {display:none !important;}
    .doprint {display:black !important;}
}

@media screen {
    
    .nodisplay {display:none !important;}
}