body {
    display:flex;
    /*padding-top: 50px;*/
    /*padding-bottom: 20px;*/
}

/* Set padding to keep content from hitting the edges */
.body-content {
    /*padding-left: 15px;
    padding-right: 15px;*/
}

/*Layout top red menu*/
.navbar {
    background-color:#ffffff;
    border-color:#ffffff;
}

.Image_Center {
    display: block;
    margin-left: auto;
    margin-right: auto;    
}

.navbar-brand {
    color:#ffffff;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

/* styles for validation helpers */
.field-validation-error {
    color: #b94a48;
}

.field-validation-valid {
    display: none;
}

input.input-validation-error {
    border: 1px solid #b94a48;
}

input[type="checkbox"].input-validation-error {
    border: 0 none;
}

.validation-summary-errors {
    color: #b94a48;
}

.validation-summary-valid {
    display: none;
}

.LabelTiny {
    font-size:14px;
    text-align: left;
}

.toggle-btn-grp { 
    margin:3px 0; 
}
.toggle-btn {
    text-align: center;
    /*margin:5px 2px;*/
    /*padding:0.4em 3em;*/
    color: #000;
    background-color: #FFF;
    border-radius: 10px;
    display: inline-block;
    /*border:solid 1px #CCC;*/
    cursor: pointer;
}

.toggle-btn-grp.joint-toggle .toggle-btn {
    /*margin:5px 0;
    padding:0.4em 2em;*/
    border-radius:0;
    border-right-color:white;
    /*margin-top: 77px;*/
    z-index: 100;
}
.toggle-btn-grp.joint-toggle .toggle-btn:first-child { 
    margin-left:2px; 
    border-radius: 10px 0px 0px 10px; 
    margin-top:75%;
}
.toggle-btn-grp.joint-toggle .toggle-btn:last-child {
    margin-right:2px;
    /* border-radius: 0px 10px 10px 0px; */
    border-right:solid 1px #CCC;
}


.toggle-btn:hover {
    border: solid 2px #3fa7d6 !important;
    background: #f1fdfe;
}


.toggle-btn.success {
    /*background: lightgreen;*/
    border: solid 2px #3fa7d6 !important;
}

.visuallyhidden { 
    border: 0; 
    clip: rect(0 0 0 0); 
    height: 1px; 
    margin: -1px; 
    overflow: hidden; 
    padding: 0; 
    position: absolute; 
    width: 1px; 
}
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { 
    clip: auto; 
    height: auto; 
    margin: 0; 
    overflow: visible; 
    position: static; 
    width: auto; 
}


/* CSS only version */
.toggle-btn-grp.cssonly * {
    width:140px;
    height:30px;
    line-height:30px;
}
.toggle-btn-grp.cssonly div {
    display:inline-block;
    position:relative;
    margin:5px 2px;
}

.toggle-btn-grp.cssonly div label {
    position:absolute;
    z-index:0;
    padding:0;
    text-align:center;
}

.toggle-btn-grp.cssonly div input {
    position:absolute;
    z-index:1;
    cursor:pointer;
    opacity:0;
}

.toggle-btn-grp.cssonly div:hover label {
    border:solid 1px #a0d5dc !important; 
    background:#f1fdfe;
}

.toggle-btn-grp.cssonly div input:checked + label {
    background:lightgreen;
    border:solid 1px green !important; 
}

.labelQuestion {
    font-weight: bold; 
    font-size: 16px; 
    margin: 30px 0 5px 0;
    padding: 0;
    line-height: 1em;
}

.label-custom {
    display: block;
    padding: .2em .6em .3em;
    font-size: 90%;
    font-weight: bold;
    line-height: 1;
    color: #ffffff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
}

.label-danger-custom {
    background-color:#bb2f2a;
}

.label-success-custom {
  background-color: #5cb85c;
}

.carousel {
    width:100%;
}

/* Makes images fully responsive */
.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  display: block;
  width: 20%;
  height: auto;
  border-radius: 10px;
}

/* ------------------- Carousel Styling ------------------- */
.carousel-inner {
  border-radius: 15px;
}

.carousel-caption {
  background-color: rgba(0,0,0,.5);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  padding: 0 0 10px 25px;
  color: #fff;
  text-align: left;
}

.carousel-indicators {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  z-index: 15;
  margin: 0;
  padding: 0 25px 25px 0;
  text-align: right;
}

.carousel-control.left,
.carousel-control.right {
  background-image: none;
}

/* ------------------- Section Styling - Not needed for carousel styling ------------------- */

.section-white {
   padding: 10px 0;
}

.section-white {
  background-color: #fff;
  color: #555;
}

@media screen and (min-width: 768px) {
  .section-white {
     padding: 1.5em 0;
  }
}

@media screen and (min-width: 992px) {
  .container {
    max-width: 930px;
  }
}

.SlA-icon {
    background: url(Img/Little/SLAs.jpg) no-repeat top left;
    display: block;
    width: 28px;
    height: 28px;
    text-indent: -9999px;
}

.center {
    margin: auto;
    width: 100%;    
    padding: 10px;
}

@media screen and (min-width: 768px) {
    #quiz_container .items-list {
        /*width: 60%;*/
        display: inline-block;
    }
}

#ExplicacionImagen {
    width: 100rem;
    height: 25rem;
}

#NextQuestion {
    position: absolute;
    background-color: transparent;
    opacity: 0.9;
    left: 23%;
    width: 3%;
    top: 5%;
    height: 90%;
    background-image: none;
    visibility: hidden;
}

#PreviousQuestion {
    position: absolute;
    background-color: transparent;
    opacity: 0.9;
    left: 2%;
    width: 3%;
    top: 5%;
    height: 90%;
    background-image: none;
    visibility: hidden;
}

#carousel-example-generic {
}

.carousel-inner {
    background-color: transparent;
}

#SiguienteNodoBtn {
    margin-top: 20px;
    font-size: 1.1rem;
    color: white;
    background-color: #492e7f;
    border-radius: 10px;
    align-items: center;
    padding: 10px;
    font-family: "Myriad Pro", sans-serif;
    border: none;
    cursor: pointer;
}

label {
    margin-bottom: 0px;
}

.toggle-btn:hover {
    background: aquamarine;
}

.close {
    opacity: .7;
    color: #fff;
    cursor: pointer;
}

.quiz-content-inner {
    height:100%;
}

.quiz-content-inner h2, .quiz-content-inner h3 {
    font-size: 1.1rem;
}

.quiz-content-inner p {
    font-size: 0.9rem;
}

#quiz_container .qlink-actions .action.qlink-mito:hover, #quiz_container .qlink-actions .action.qlink-mito:focus, #quiz_container .qlink-actions .action.qlink-verdad:hover, #quiz_container .qlink-actions .action.qlink-verdad:focus {
    background: linear-gradient(to bottom, #202020 0%, #492e7f 100%);
}