.img-volta{
        width: 15px !important;
    }
    .img-down{
        width: 15px;
    }
    .img-fechar{
        width: 15px !important;
    }
    .img-troca{
width: 15px;
    }
    .wrapper {
    
    color: #555;
    cursor: help;
    align: center;
    z-index:10 !important;
    -webkit-transform: translateZ(0); /* webkit flicker fix */
    -webkit-font-smoothing: antialiased; /* webkit text rendering fix */
}

.link{
  color: #0c2c68 !important;
}
.link:hover{
  color: #049ef7 !important;
}
.wrapper .tooltip {
  background: #1D3564;
  border-radius: 5px;
  z-index:99 !important;
  bottom: 100%;
  color: #fff;
  display: block;
  left: -50%;
  margin-bottom: 15px;
  opacity: 0;
  padding: 10px;
  pointer-events: none;
  position: absolute;
  width: 200px;
  -webkit-transform: translateY(10px);
     -moz-transform: translateY(10px);
      -ms-transform: translateY(10px);
       -o-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: all .25s ease-out;
     -moz-transition: all .25s ease-out;
      -ms-transition: all .25s ease-out;
       -o-transition: all .25s ease-out;
          transition: all .25s ease-out;
  -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
     -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
      -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
       -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
          box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}

/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.wrapper .tooltip:before {
  bottom: -10px;
  content: " ";
  z-index:10 !important;
  display: block;
  height: 20px;
  left: 0;
  position: absolute;
  width: 100%;
}  

/* CSS Triangles - see Trevor's post */
.wrapper .tooltip:after {
  border-left: solid transparent 10px;
  border-right: solid transparent 10px;
  border-top: solid #1D3564 15px;
  bottom: -10px;
  z-index:10 !important;
  content: " ";
  height: 0;
  left: 37%;
  margin-left: -13px;
  position: absolute;
  width: 0;
}
  
.wrapper:hover .tooltip {
  opacity: 1;
  pointer-events: auto;
  z-index:10 !important;
  -webkit-transform: translateY(0px);
     -moz-transform: translateY(0px);
      -ms-transform: translateY(0px);
       -o-transform: translateY(0px);
          transform: translateY(0px);
}

/* IE can just show/hide with no transition */
.lte8 .wrapper .tooltip {
  display: none;
  z-index:10 !important;
}

.lte8 .wrapper:hover .tooltip {
  display: block;
  z-index:10 !important;
}
  


.wrapper .toolx {
  background: #1D3564;
  border-radius: 5px;
  z-index:99 !important;
  font-size: 10px;
  bottom: 100%;
  color: #fff;
  display: block;
  left: -10%;
  margin-bottom: 15px;
  opacity: 0;
  padding: 10px;
  pointer-events: none;
  position: absolute;
  width: 100px;
  -webkit-transform: translateY(10px);
     -moz-transform: translateY(10px);
      -ms-transform: translateY(10px);
       -o-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: all .25s ease-out;
     -moz-transition: all .25s ease-out;
      -ms-transition: all .25s ease-out;
       -o-transition: all .25s ease-out;
          transition: all .25s ease-out;
  -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
     -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
      -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
       -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
          box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}

/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.wrapper .toolx:before {
  bottom: -10px;
  content: " ";
  z-index:10 !important;
  display: block;
  height: 20px;
  left: 0;
  position: absolute;
  width: 100%;
}  

/* CSS Triangles - see Trevor's post */
.wrapper .toolx:after {
  border-left: solid transparent 10px;
  border-right: solid transparent 10px;
  border-top: solid #1D3564 15px;
  bottom: -10px;
  z-index:10 !important;
  content: " ";
  height: 0;
  left: 37%;
  margin-left: -13px;
  position: absolute;
  width: 0;
}
  
.wrapper:hover .toolx {
  opacity: 1;
  pointer-events: auto;
  z-index:10 !important;
  -webkit-transform: translateY(0px);
     -moz-transform: translateY(0px);
      -ms-transform: translateY(0px);
       -o-transform: translateY(0px);
          transform: translateY(0px);
}

/* IE can just show/hide with no transition */
.lte8 .wrapper .toolx {
  display: none;
  z-index:10 !important;
}

.lte8 .wrapper:hover .toolx {
  display: block;
  z-index:10 !important;
}








.wrapper .toolsitu {
  background: #1D3564;
  border-radius: 5px;
  z-index:99 !important;
  bottom: 100%;
  color: #fff;
  display: block;
  left: -50%;
  margin-bottom: 15px;
  opacity: 0;
  padding: 10px;
  pointer-events: none;
  position: absolute;
  width: 200px;
  -webkit-transform: translateY(10px);
     -moz-transform: translateY(10px);
      -ms-transform: translateY(10px);
       -o-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: all .25s ease-out;
     -moz-transition: all .25s ease-out;
      -ms-transition: all .25s ease-out;
       -o-transition: all .25s ease-out;
          transition: all .25s ease-out;
  -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
     -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
      -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
       -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
          box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}

/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.wrapper .toolsitu:before {
  bottom: -10px;
  content: " ";
  z-index:10 !important;
  display: block;
  height: 20px;
  left: 0;
  position: absolute;
  width: 100%;
}  

/* CSS Triangles - see Trevor's post */
.wrapper .toolsitu:after {
  border-left: solid transparent 10px;
  border-right: solid transparent 10px;
  border-top: solid #1D3564 15px;
  bottom: -10px;
  z-index:10 !important;
  content: " ";
  height: 0;
  left: 67%;
  margin-left: -13px;
  position: absolute;
  width: 0;
}
  
.wrapper:hover .toolsitu {
  opacity: 1;
  pointer-events: auto;
  z-index:10 !important;
  -webkit-transform: translateY(0px);
     -moz-transform: translateY(0px);
      -ms-transform: translateY(0px);
       -o-transform: translateY(0px);
          transform: translateY(0px);
}

/* IE can just show/hide with no transition */
.lte8 .wrapper .toolsitu {
  display: none;
  z-index:10 !important;
}

.lte8 .wrapper:hover .toolsitu {
  display: block;
  z-index:10 !important;
}










.modal_msgm{
    color: white;
    position: absolute;
    top: 30%;
    left: 50%;
    font-size: 13px;
    letter-spacing:1px;
    margin-top: -75px; /* Metade da altura */
    margin-left: -125px; /* Metade da largura */
    z-index:10 !important;
    background-color: rgb(29, 53, 100);
    width: 300px;
    height: 100px;
    display: block !important;
    border-radius: 3px;
}
.incorreto{
    color: white;
    position: absolute;
    z-index:2;
    top: 20px;
    left: 6%;
}
.ok{
    position: absolute;
    top: 57%;
    left: 37%;
    margin-right: -50%;
    background-color: rgba(102, 145, 236, 0.9);
    width: 80px;
    border: none;
    padding: 5px;
    color: white;
    font-size: 14px;
    cursor: pointer;
    border-radius: 3px;
}
.ok:hover{
   background-color: rgba(37, 94, 217);
}