.md-accordion {
    width:100%;
    height:100%;
    overflow:hidden;
  }

  #warning-message { display: none; }
    @media only screen and (orientation:portrait){
        #wrapper { display:none; }
        #warning-message { display:block; }
    }
    @media only screen and (orientation:landscape){
        #warning-message { display:none; }
    }


    .size-normal { font-size: 14px; }
    .size-large { font-size: 16px; }
    .size-small { font-size: 12px; }
    .size-slarge { font-size: 18px; }
    .size-ssmall { font-size: 10px; }

  .head-assess{
    top: 0;
    left: 0;
    position: fixed;
    width: 100%;
    z-index: 99999;
  }

  .ha-button{
    cursor: pointer;
    min-width: 20px;
    line-height: 20px;
    font-family: Arial, Helvetica, sans-serif;
  }

  .ha-button:hover{
    line-height: 18px;
  }

  .ha-flag{
    height: 15px;
    width: 20px;
  }

  .ha-flag:hover{
    height: 14px;
    width: 18px;
  }

  .h-25{
    min-height: 25px !important;
    height: 25px !important;
  }

  .h-45{
    min-height: 67px !important;
    height: 67px !important;
  }

  .h-max{
    height: 100% !important;
    overflow-y: hidden;
  }

  .max-30{
    margin-top: 1vh;
    height: 34vh;
    max-height: 34vh;
    overflow-y: auto;
  }

  .mapa-size{
    width: 100%;
    height: calc(80vh - 50px);
  }

  .dados-dg{
    margin-bottom: 0.5px;
    cursor:pointer;
  }

  .dados-dg:hover{
    color: orangered;
  }

  .mapa2-size{
    width: 100%;
    height: calc(82vh - 100px);
  }

  .card-box{
    min-height: 300px;
    min-width: 300px;;
  }
  
  .md-accordion ul {
    list-style-type:none;
    padding: 0;
    margin: 0;
    width:100%;
    height: 100%;
  }
  
  .md-accordion ul li {
    position:relative;
    display:block;
    float:left;
    width:5%;
    height: 100%;
    -webkit-transition:all 0.5s ease;
    -moz-transition:all 0.5s ease;
    transition:all 0.5s ease;
  }

  .card-text{
    font-size: 78pt;
    font-family: anson-regular-webfont;
  }

  .dcyan{
    background-color: #8d358a !important;
    color: white !important;
  }

  .orangered{
    background-color: #ec6a15 !important;
    color: white !important;
  }

  .dgreen{
    background-color: #049899 !important;
    color: white !important;
  }

  .dred{
    background-color: #CD1417 !important;
    color: white !important;
  }

  .dwhite{
    background-color: white;
    color: black;
  }

  .dblue{
    background-color: #ff9933 !important;
    color: white !important;
  }

  .space{
    padding-top: 10px;
  }

  .dmagenta{
    background-color: #1F9156 !important;
    color: white !important;
  }

  .dred-sel{
    background: linear-gradient(to right, #CD1417, rgba(205, 20, 23, 0.8)), url('img/mapa.png');
    background-repeat: no-repeat;
    background-size: cover;
  }

  .dgreen-sel{
    background: linear-gradient(to right, #049899, rgba(4, 152, 153, 0.8)), url('img/socio.png');
    background-repeat: no-repeat;
    background-size: cover;
  }

  .dwhite-sel{
    background: linear-gradient(to right, white, rgba(220, 220, 220, 0.8)), url('img/serdh.png');
    background-repeat: no-repeat;
    background-size: contain;
  }
  
  .orangered-sel{
    background: linear-gradient(to right, #ec6a15, rgba(236, 106, 21, 0.8)), url('img/grafico.png');
    background-repeat: no-repeat;
    background-size: cover;
  }
  
  .dcyan-sel{
    background: linear-gradient(to right, #8d358a, rgba(141, 53, 138, 0.8)), url('img/serdh.png');
    background-repeat: no-repeat;
    background-size: contain;
  }
  
  .vbar{
    height: 100%;
  }
  
  .size-accordion {
    width:5% !important;
    height: 100% !important;
  }
  
  .full-size-accordion {
    width:80% !important;
    height: 100% !important;
  }

  .md-accordion li .vbar {
    display:block;
  }
  
  .title {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height: 100%;
    writing-mode: vertical-lr;
  }
  
  .title a {
    display:block;
    color:white;
    padding-top: 2%;
    padding-left: 2.5%;
    font-size: 100%;
    width: 5%;
    text-decoration:none;  
  }

  .text-presentation-accordion{
    color: white !important;
    padding:2%;
    text-align: justify;
  }

  .title-blk {
    position:absolute;
    color:black !important;
    left:0;
    top:0;
    width:100%;
    height: 100%;
    writing-mode: vertical-lr;
  }
  
  .title-blk a {
    display:block;
    color:black !important;
    padding-top: 2%;
    padding-left: 2.5%;
    font-size: 100%;
    width: 5%;
    text-decoration:none;  
  }

  .text-presentation-accordion-blk{
    color: black !important;
    padding:2%;
    text-align: justify;
  }

  .informer{
    position: relative;
  }
  
  .tooltip-wrapper {
    height: 24px;
    padding-top: 20px;
    max-height: 24px;
    cursor: pointer;
  }
  
  .tooltip-wrapper .tooltip {
    display: none;
    position: absolute;
    z-index: 9999;
    top: calc(0.5em - 50px);
    width: 300px;
    min-height: 100px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
  }

  .tooltip-wrapper.tooltip-right .tooltip {
    left: 2.5em;
    margin-left: 1.0em;
  }
  .tooltip-wrapper.tooltip-left .tooltip {
    top: 2.5em;
    margin-top: 1.0em;
    text-align: justify;
  }
  
  .tooltip-wrapper.hover .tooltip,
  .tooltip-wrapper:hover .tooltip {
    display: block;
  }
  
  .tooltip-wrapper .tooltip:before {
    content:"";
    width: 0;
    height: 0;
    position: absolute;
  }
  .tooltip-wrapper.tooltip-right .tooltip:before {
    left: -1.0em;
    top: 50px;
    border-top: 0.5em solid transparent;
    border-bottom: 0.5em solid transparent;
    border-right: 1.0em solid rgba(0, 0, 0, 0.8);
  }
  .tooltip-wrapper.tooltip-left .tooltip:before {
    top: -1.0em;
    border-left: 0.5em solid transparent;
    border-top: 0.5em solid transparent;
    border-bottom: 0.5em solid rgba(0, 0, 0, 0.8);
  }
  
  .tooltip-wrapper .tooltip .tooltip-title {
    font-weight: bold;
    text-transform: uppercase;
  }
  .tooltip-wrapper .tooltip .tooltip-title, 
  .tooltip-wrapper .tooltip .tooltip-body {
    padding: 0.6em 1.0em;
  }

  .expander{
    height: 100px;
    min-height: 100px;
    max-height: 100px;
  }

  .expander-dg{
    height: 50px;
    min-height: 50px;
    max-height: 50px;
  }

  .expandable {
    margin: 0 !important;
    height: 100px ;
    -webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 1s; /* Firefox < 16 */
        -ms-animation: fadein 1s; /* Internet Explorer */
         -o-animation: fadein 1s; /* Opera < 12.1 */
            animation: fadein 1s;
  }

  .nexpandable {
    margin: 0 !important;
    -webkit-animation: fadeout 0.5s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadeout 0.5s; /* Firefox < 16 */
        -ms-animation: fadeout 0.5s; /* Internet Explorer */
         -o-animation: fadeout 0.5s; /* Opera < 12.1 */
            animation: fadeout 0.5s;
  }

  .expandable-dg {
    margin: 0 !important;
    height: 50px ;
    -webkit-animation: fadein-dg 1s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein-dg 1s; /* Firefox < 16 */
        -ms-animation: fadein-dg 1s; /* Internet Explorer */
         -o-animation: fadein-dg 1s; /* Opera < 12.1 */
            animation: fadein-dg 1s;
  }

  .nexpandable-dg {
    margin: 0 !important;
    -webkit-animation: fadeout-dg 0.5s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadeout-dg 0.5s; /* Firefox < 16 */
        -ms-animation: fadeout-dg 0.5s; /* Internet Explorer */
         -o-animation: fadeout-dg 0.5s; /* Opera < 12.1 */
            animation: fadeout-dg 0.5s;
  }

  .expandable .expander{
    animation: zin 1.2s;
  }

  .nexpandable .expander{
    animation: zout 0.5s;
  }


@keyframes zin {
  0%   {opacity: 0;}
  25%  {opacity: 0;}
  50%  {opacity: 0.5;}
  100% {opacity: 1;}
}

/* Firefox < 16 */
@-moz-keyframes zin {
  0%   {opacity: 0;}
  25%  {opacity: 0;}
  50%  {opacity: 0.5;}
  100% {opacity: 1;}
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes  zin {
  0%   {opacity: 0;}
  25%  {opacity: 0;}
  50%  {opacity: 0.5;}
  100% {opacity: 1;}
}

/* Internet Explorer */
@-ms-keyframes  zin {
  0%   {opacity: 0;}
  25%  {opacity: 0;}
  50%  {opacity: 0.5;}
  100% {opacity: 1;}
}

/* Opera < 12.1 */
@-o-keyframes  zin {
  0%   {opacity: 0;}
  25%  {opacity: 0;}
  50%  {opacity: 0.5;}
  100% {opacity: 1;}
}

@keyframes zout {
  0%   {opacity: 1;}
  25%  {opacity: 0.5;}
  50%  {opacity: 0;}
  100% {opacity: 0;}
}

/* Firefox < 16 */
@-moz-keyframes zout {
  0%   {opacity: 1;}
  25%  {opacity: 0.5;}
  50%  {opacity: 0;}
  100% {opacity: 0;}
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes  zout {
  0%   {opacity: 1;}
  25%  {opacity: 0.5;}
  50%  {opacity: 0;}
  100% {opacity: 0;}
}

/* Internet Explorer */
@-ms-keyframes zout {
  0%   {opacity: 1;}
  25%  {opacity: 0.5;}
  50%  {opacity: 0;}
  100% {opacity: 0;}
}

/* Opera < 12.1 */
@-o-keyframes  zout {
  0%   {opacity: 1;}
  25%  {opacity: 0.5;}
  50%  {opacity: 0;}
  100% {opacity: 0;}
}

@keyframes fadein {
    from { height: 0;}
    to   { height: 99px;}
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { height: 0; }
    to   { height: 99px; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { height: 0; }
    to   { height: 99px; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { height: 0; }
    to   { height: 99px;}
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { height: 0; }
    to   { height: 99px; }
}

@keyframes fadeout {
  to { height: 0; }
  from  { height: 100px; }
}

/* Firefox < 16 */
@-moz-keyframes fadeout {
  to { height: 0; }
  from  { height: 100px; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadeout {
  to { height: 0; }
  from  { height: 100px; }
}

/* Internet Explorer */
@-ms-keyframes fadeout {
  to { height: 0; }
  from  { height: 100px;}
}

/* Opera < 12.1 */
@-o-keyframes fadeout {
  to { height: 0; }
  from  { height: 100px;}
}

@keyframes fadein-dg {
  from { height: 0;}
  to   { height: 49px;}
}

/* Firefox < 16 */
@-moz-keyframes fadein-dg {
  from { height: 0; }
  to   { height: 49px; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein-dg {
  from { height: 0; }
  to   { height: 49px; }
}

/* Internet Explorer */
@-ms-keyframes fadein-dg {
  from { height: 0; }
  to   { height: 49px;}
}

/* Opera < 12.1 */
@-o-keyframes fadein-dg {
  from { height: 0; }
  to   { height: 49px; }
}

@keyframes fadeout-dg {
to { height: 0; }
from  { height: 50px; }
}

/* Firefox < 16 */
@-moz-keyframes fadeout-dg {
to { height: 0; }
from  { height: 50px; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadeout-dg {
to { height: 0; }
from  { height: 50px; }
}

/* Internet Explorer */
@-ms-keyframes fadeout-dg {
to { height: 0; }
from  { height: 50px;}
}

/* Opera < 12.1 */
@-o-keyframes fadeout-dg {
to { height: 0; }
from  { height: 50px;}
}