*,*::before,*::after{box-sizing:border-box}ul[class],ol[class]{padding:0}body,h1,h2,h3,h4,p,ul[class],ol[class],li,figure,figcaption,blockquote,dl,dd{margin:0}body{/*min-height:100vh;*/scroll-behavior:smooth;text-rendering:optimizeSpeed;line-height:1.5}ul[class],ol[class]{list-style:none}a:not([class]){text-decoration-skip-ink:auto}img{max-width:100%;display:block}article>* + *{margin-top:1em}input,button,textarea,select{font:inherit}@media (prefers-reduced-motion:reduce){*{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;scroll-behavior:auto!important}}



* {
/*  font-family: Arial, Helvetica, sans-serif;*/
}


html, body {
    height: 100%;
}

body {

    /* min-height: 100%; */
/*    height:auto !important; */
    /* height: 100%; */

    font-family: 'Open Sans', sans-serif;
    font-weight: 400;

    
    background-color:#FFF;

    /* background-color:#F4F4F4;  */
    
    /* color:#0f0; */

    
}



 
H1, H2, H3, H4, H5, H6{

    /* font-family: 'Montserrat', sans-serif; */
    font-family: 'Open Sans', sans-serif;
    /* color:#0079c0;*/
    font-weight: 400;
    
}



 
label{


    /* font-family: 'Montserrat', sans-serif; */
    font-family: 'Open Sans', sans-serif;
    
/*    color:#0079c0;*/
    font-weight: 500;
}



.btn-outline-primary, .btn-link{
/*    color:#0079c0;*/
    
}



.btn-outline-primary a:hover, .btn-link a:hover{
    background-color:#0079c0;
    
}




 
.table, .form-select, .form-control{
    
/*    color:#6E757D;*/
/*    color:#666666;*/
    
}






.corpo .row {
    
    /* margin:0px;*/
    background-color:#f00;

}



pre {

    font-size: 12px;
    padding: 10px; 
    margin-bottom:20px;

    color:#666;
    
    outline: 1px solid #bbb; 
    background-color:#f9f9f9;

    /* quebra forçada de linha */
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    /* word-wrap: break-word;*/

    word-break: break-all;
    overflow-wrap: break-word;
    word-wrap: break-word;

}


.head pre {

    background-color:#d1d1d1;
    outline: 5px solid #888; /* 1px 888 */
    
}



 
.sem_margem {
    padding-left: 0rem;
    padding-right: 0rem;
    overflow: hidden;
    overflow-y: visible;
    min-height: 100%;
    height: 100%; 
    /* background-color:#0f0;*/
 
}


.page_content  {
    
    /* background-color:#f00;*/
    padding-top:16px;
    padding-bottom:32px;
    padding-left:16px;
    padding-right:16px;
 
}



.page_content .row {
    
    /* background-color:#0f0;*/
    padding-bottom:30px;
 
}



/* ########## DROPDOWN ########## */


    



.dropdown_botao {
    
/*    background:green;*/
    width: 50px;
    height: 50px;
    cursor: pointer;

}


.dropdown_container {

    position:absolute;
/*    background-color:chartreuse;*/
    margin-left:-154px;
        padding-top:3px;
}


.dropdown_menu {
    /*display:grid;*/
    /*width:200px;*/
    /*background-color:#fff;*/
    /*box-shadow: 0 10px 14px 0 rgba(90, 116, 148, 0.4);*/

    list-style-type: none;
    
    /*margin: -20px;*/


    /*margin: 0;*/
    /*padding: 0;*/

    /*position:absolute;*/

    /*border-radius: .25rem;*/
    /*border: 1px solid #ced4da;*/

    /*z-index: 99999;  encavala nos cards main.php */

}

 
 
.dropdown_menu li a {
    
    padding:10px;
    display:block;
    text-decoration: none;
    color: #666;
    
}


.dropdown_menu li a:hover {

    text-decoration: underline;

}


.dropdown_closed {
    
    display:none;
    
}    
    
 
  

/* MENU LATERAL */




.menu_lateral {

    background-color:#E3E7EB; 

}

#menu_relatorio_titulo {

    font-size: 18px;

    color:#717579;
    font-weight: 800;

}

.accordion-button , .accordion-button:not(.collapsed) {

    background-color:#E3E7EB; 

    color: #717579;     
    line-height: 26px;

}

.accordion-body, .accordion-body a  {

    background-color:#fff; 

    color: #717579; 

}

#menu_relatorio_close {

    /* background-color:grey; */

}  

.accordion {

    /* background-color:#ddd; */

    /* padding-bottom:40px;*/

    padding-top:10px;
    padding-bottom:10px;

}

.accordion-item {

    /* background-color: #0f0; */
    border: 0px ; 
    margin-left 0px !important;
    border-radius: 0px !important;

}

.accordion-title {

    padding: 0.8rem   ; 

}

/* accordion fechado */
.accordion-button  {

    font-size: 18px;
    padding: 0.8rem; 
    border-radius: 0px !important;
    /* line-height: 26px;*/

}

/* accordion aberto */
.accordion-button:not(.collapsed) {

    box-shadow: inset 0 -1px 0 rgba(0,0,0,.125);
    box-shadow: none ; 

}

h5{

    font-weight: 200;
    font-size: 16px;
    padding: 10px 5px;

}

h5 a {

    height:40px;
    text-decoration: none;
    line-height: normal;

}

h5 a:hover {

    text-decoration:underline;

}

.accordion-body {
    padding: 1rem 0rem 1rem 1rem; 
    padding-bottom:20px;
}

.accordion-header{

    /* padding-left:20px;*/


}





/* ########## DROPDOWN ########## */





/* layout flexbox */

.container-flexbox {
    
    height: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
	
}




.box {

    /* padding: 20px; */

    display: flex;
    flex-direction: column;
    /* justify-content: center;*/
    
}



.box-menu {
/*    background-color: green;*/
    height: 58px;
}

.box-conteudo {
/*    background-color: blue;*/
    flex: 1;
    padding:20px;
}


 






.navbar>.container-fluid {
/*    display:flex;*/
/*
    flex-wrap: inherit;
    align-items: center;
    justify-content: space-between;
*/
}


.nav_topo{
    width:100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between ;
    flex-wrap:  wrap ;
    align-items: center;
    /* height:50px;*/
    padding:10px;
    padding-left:16px;
    padding-right:4px;

    margin-bottom:10px;
 
    box-shadow:  0 0 12px rgba(0, 0, 0, 0.6);
    
}








.nav_logo_old { 
 
    width:180px;
    height:40px;
    /* margin-left:10px;*/
    /* background-color:#f00;*/
    padding-left:0px;
    
}




.nav_logo { 
 
    height: 100%;
    padding-left:0px;
    
    
    /* width:180px;*/
    /* height:40px;*/
    /* margin-left:10px;*/
    /* background-color:#f00;*/


}


.nav_logo img { 
    
    height:40px;
    width:auto !important;

    z-index:1;

    /* background-color:#ff0;*/

   
}





.svg_logo {
    
    fill: #fff;
    animation: fog 10s infinite normal;
    margin-top:0px;
    /*    width:100%;*/
    
} 


 svg { 

    fill: red;

    fill: #fff;
    animation: fog 15s infinite normal;
    margin-top:0px;
    /*    width:100%;*/

}

 
 


@keyframes blink {
 
	0%    { opacity: 1;  }
/*
	3%    { opacity: 0.6; }
	6%    { opacity: 1; }
*/
	7%    { opacity: 0.6; filter: drop-shadow(0px 0px 2px #fff);}
	8%    { opacity: 1; }
	9%    { opacity: 0.6; filter: drop-shadow(0px 0px 2px #fff);}
	10%   { opacity: 1; }
	89%   { opacity: 1; }
/*
	95%   { opacity: 0.6; filter: drop-shadow(0px 0px 2px #fff);}
	99%  { opacity: 0.9; filter: drop-shadow(0px 0px 2px #fff);}
    
*/
    
}

@keyframes fog {
	10% { filter: drop-shadow(0px 0px 0px #fff);}
	11% { filter: drop-shadow(0px 0px 3px #fff);}
	12% { filter: drop-shadow(0px 0px 0px #fff);}
}
 




.dropping-texts {
  display: inline-block;
  width: 100%;
  text-align: right;
  height: 36px;
  vertical-align: -2px;
      font-size:30px;
    
      display: flex;
  justify-content: center;
  align-items: center;

}

.dropping-texts > div {
  font-size:0px; 
  opacity:0;
  margin-left:30px; 
  position:absolute;
  font-weight:800;   
  color:#FFF; 
/*padding-bottom:10px;*/

    
  
}

.dropping-texts > div:nth-child(1) {
  animation: roll 14s linear infinite 0s;
}
.dropping-texts > div:nth-child(2) {
  animation: roll 14s linear infinite 2s;
}
.dropping-texts > div:nth-child(3) {
  animation: roll 14s linear infinite 4s;
}
.dropping-texts > div:nth-child(4) {
  animation: roll 14s linear infinite 6s;
}
.dropping-texts > div:nth-child(5) {
  animation: roll 14s linear infinite 8s;
}
.dropping-texts > div:nth-child(6) {
  animation: roll 14s linear infinite 10s;
}
.dropping-texts > div:nth-child(7) {
  animation: roll 14s linear infinite 12s;
}





@keyframes roll {
  0% {
    font-size:0px;
    opacity:0;
    margin-left:-10px;
    margin-top:0px;
    transform: rotate(-25deg);
  }
  2% {
    opacity:1;
    transform: rotate(0deg);
  }
  4% {
    font-size:inherit;
    opacity:1;
    margin-left:0px;
    margin-top:0px;
  }
  16% {
    font-size:inherit;
    opacity:1;
    margin-left:0px;
    margin-top:0px;
    transform: rotate(0deg);
  }
  18% {
    font-size:0px;
    opacity:0.5;
    margin-left:20px;
    margin-top:100px;
  }

   20% {
    font-size:0px;
    opacity:0;
    margin-left:-10px;
    margin-top:0px;
    transform: rotate(+25deg);
  }
   
   
}

 



 
 
.nav_relatorio  { 

    width:140px; 
    height:40px;
    padding-top:2px;
    

    
}
 
/*
.nav_relatorio select  { 

    width:100%; 
    height:32px;

    
}

*/



.nav_button { 

    /* width:264px; */
    height:40px;
    
}




 









.bg {
  animation:slide 3s ease-in-out infinite alternate;
  background-image: linear-gradient(-60deg, #eee 50%, #ddd 50%);
  bottom:0;
  left:-50%;
  opacity:.5;
  position:fixed;
  right:-50%;
  top:0;
  z-index:-1;
}

.bg2 {
  animation-direction:alternate-reverse;
  animation-duration:4s;
}

.bg3 {
  animation-duration:5s;
}

.content {
  background-color:rgba(255,255,255,.2);
  border-radius:1em;
  box-shadow:0 0 1em rgba(0,0,0,.25);
  box-sizing:border-box;
  left:50%;
/*   padding:30vmin; */
  width:80%;
  height: 80%;
  position:fixed;
  text-align:center;
  top:50%;
  transform:translate(-50%, -50%);
}

h1 {
  font-family:monospace;
}

@keyframes slide {
  0% {
    transform:translateX(-25%);
  }
  100% {
    transform:translateX(25%);
  }
}









/* .nav_logo , .nav_button, .nav_relatorio {  background: grey;  }     #tela{ color:#0f0; }*/





/* debug */
/*


.nav_logo { background-color:aqua; } .nav_relatorio { background-color: orange; } .nav_fullscreen { background-color:blueviolet ; } .nav_button { background-color: green; }
*/


/* ### 1 */
@media screen and (max-width: 730px) {
 
    #legenda {
        display:none;
    }
    
    
        .nav_relatorio  { 

        width:50px; 
        height:40px;
        padding-top:2px;



    }
    
    #relatorio_label_texto {
        
        display:none;
        
    }

      /*
    .nav_logo , .nav_button, .nav_relatorio {  background: green;  }     #tela{ color:#0f0; }
   
    */
    
}



/* ### 2 */
@media screen and (max-width: 630px) {
 
    
    .nav_topo{

        padding-right:8px;

    }
    
   .nav_logo { 

/*        width:100px;*/
    
    }
    


/*
    #logout_label   {
        
        display:none;
        
    }    
*/
    


    .nav_button_btn {
 
        padding-top:8px; 
        padding-left:10px;
        padding-right:10px;
        /* debug */
        /* text-decoration: line-through;*/
    } 

    
   
    /* debug */
    
    /*
     .nav_logo , .nav_button, .nav_relatorio {  background: red;  }     #tela{ color:#0f0; }
    
    */

}














@media screen and (max-width: 520px) {
    

    
        
   .nav_logo { 

/*        width:90px;*/
    
    }
    
    
    

       .nav_button_btn {
 
        padding-top:8px; 
        padding-left:8px;
        padding-right:8px;
        /* debug */
        /* text-decoration: line-through;*/
    } 

     
   

    
    /* hide */
    #btn_full_screen {
        
        /* display:none;*/
        
    }    

    /*
     .nav_logo , .nav_button, .nav_relatorio {  background: orange;  }     #tela{ color:#0f0; }
    
    */
    
}



@media screen and (max-width: 480px) {

    
    .box-menu {
        height: 106px;
    }
    
    
/*
    .nav_logo       { order: 1;   }
    .nav_button     { order: 2;   }
    .nav_relatorio  { order: 3;   }
*/

     .nav_relatorio, .nav_relatorio select  { 

/*
        width:100%; 
        padding-right:13px;
        margin-top:4px;
*/
            
    }
    
    
    
       .nav_button_btn {
 
        padding-top:8px; 
/*
        padding-left:8px;
        padding-right:8px;
*/
        /* debug */
        /* text-decoration: line-through;*/
    } 

    
   .nav_logo { 

/*        width:140px;*/
/*       background-color:darkslateblue;*/

    }
    
    .nav_relatorio select { 
    
/*        width: 100%;*/

    }

    
    .nav_button_btn {
/*        padding: .25rem .5rem; */
/*        font-size: .875rem; */
/*        border-radius: .2rem; */
/*        padding-top:8px; */
        /* debug */
        /* text-decoration: line-through;*/
    } 
    
    /* .nav_button { text-align: left; }*/
    
    /* 
    .nav_logo , .nav_button, .nav_relatorio {  background: grey;  }     #tela{ color:#0f0; }
    
    */
    
}




/* MENU com 3 linhas */
@media screen and (max-width: 340px) {
    
    .box-menu {
        height: 148px;
    }
    
   .nav_button_btn {
 
        padding-top:8px; 
 
        padding-left:5px;
        padding-right:5px;
 
    } 

    /*
     .nav_logo , .nav_button, .nav_relatorio {  background: brown;  }     #tela{ color:#f00; }
    
    */
    
}














#particles-js {
  position: absolute;
  width: 100%;
  height: 90%;
 
  background-image: url("");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}






.flex-gap {

    display: inline-flex;
    flex-wrap: wrap;
    justify-content:center;
    
}

.flex-gap > div {
    
    margin: 6px;
    
}

.fi {
    
    height:40px !important;
    
}


.bandeira_min {
    
    font-size: 30px;
    line-height: 1em;
    width:63px;
    height:50px;
    /* margin-bottom:0px;*/
    /* background-color:#f00;*/
    
}


.bandeira {
    
    font-size: 24px;
    line-height: 1em;
    width:50px;
    
}

.branco{
    
    filter: grayscale(100%);
    
}

.branco:hover{
    
    filter: grayscale(50%);
    
}








/* mensagem do sistema */
.msg {

    display: inline-block; 
    width: 100%;
    margin-top: 4px;
    margin-bottom: 4px;
    
}



.html_code {

    padding: 10px;
    margin-bottom: 20px;
    max-width: 100%;

    font-size: .9rem;
    /* letter-spacing: 1px; */
    /* line-height: 1.5; */   

    border-radius: 5px;
    border: 1px solid #ccc;

    overflow: hidden;

    /* word-wrap: break-word;*/

}



.textarea_auto_height {
    
    border-top-color: transparent;
    border: 1px solid transparent;
    border-left-color: #d3d3d3;
    border-bottom-color: #d3d3d3;
    border-right-color: #d3d3d3;
    border-radius: 0px;
    
}


.form-check-input:checked {
    background-color: #3C8649;
    border-color: #3C8649;
}


.form-select-esp {
    
    font-size: 1.0rem;
    
    line-height: 1.5;
    color: #FFFFFF;
    /* background-color: transparent;*/

    border: none;
    border-radius: 0px;
    border-bottom: 2px solid #ccc;

    background: url("../img/down.svg") no-repeat right ; /* quebra html2canvas */
    -webkit-appearance: none;
    padding-left:0px;
    
/*     background-color:#666;*/
/*    padding-right:30px;*/
    
/*    width: 5.5em;*/
         
}







.form-select-esp:hover, .btn-menu:hover {
    
/*    background-color:#005083;*/
/*    color:#fff;*/
    
}

 input, select, textarea{
    color: #666;
}

textarea:focus, input:focus {
    color: #666;
}









.dataTable-wrapper.no-footer .dataTable-container {
    border-bottom: 0px solid #f00;
}




.dataTable-search {
    width:300px;
}
 
.dataTable-bottom, .dataTable-top {
    
    padding: 10px 0px 20px 0px; 
 
}



.dataTable-dropdown label, .dataTable-dropdown a {
    color:#666;
}




.dataTable-info{
    padding-top:5px;
}

.dataTable-dropdown{
    padding-top:5px;
}


.dataTable-input {
    margin: 4px;
    display: block;
    width: 100%;
    padding: .375rem .75rem; 
    color: #666;
    background-color: #fff;

    border: 1px solid #ced4da;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

/* hover nao esta funcionando */


.dataTable-input:focus {
    color: #212529;
    background-color: #fff;
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);

}

.dataTable-pagination-list {
	margin: 10px;
	padding-left: 0;
}
 


.pager  a {
/*   color:#f00;*/
/*    font-size: 26px;*/

    
}



.dataTable-sorter::after, .dataTable-sorter::before {
    content: "";


    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    opacity: .1;
    right: -6px;
   
}


.dataTable-sorter::before {
    border-top: 6px solid #000;
    bottom: 0;
}

.dataTable-sorter::after {
    border-bottom: 6px solid #000;
    border-top: 1px solid transparent;
    top: 0;
}



/*
.pager:first-of-type a {
    text-indent: -9999px;
    line-height: 0; 
}

.pager:first-of-type a:after {
    
    color:#f0f;
    content: '>';
    
    content: ' ';
    background-image: url('../img/plus.svg');
    background-size: 28px 28px;
    height: 28px;
    width: 28px;

    
    text-indent: 0;
    display: block;
    line-height: initial; 
    
}

*/


 





.dataTable-pagination a     {

    border-radius: 15% !important;
    margin: 0 4px;
    padding: 2px 10px;
}

.dataTable-pagination   .active a{

    background-color:#d9d9d9;

}
.dataTable-pagination   .active a:hover{

    background-color:#999;

}






.btn_ativado {
    margin-left:5px; 
    color:#666; 
    pointer-events: none; 
    text-decoration: none;
}



 

#resetar {

    margin-top: -2px;
    
}


.titulo {

    
    /* font-family: 'Montserrat', sans-serif; */
    font-family: 'Open Sans', sans-serif;
    
    
    /*
    font-size: 4.4em;
    font-weight: 800;
    */
    text-transform: uppercase;
    /* line-height: 1em;*/
    
}
    
    
   
    
.titulo2 {
    font-family: 'Bentham', serif;
    font-size: 1.3em;
    font-weight: 600;
    font-style: italic;
    line-height: 1.1em;
}
    
 

.fundo {
    background-color: #f00;
    background-position: bottom right;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 1;
    transition: background 0.3s,border-radius 0.3s,opacity 0.3s;
}
    
    

#conteudo{
    width:100%; 

    min-height: 200px; 
    margin-top: 30px; 
    margin-bottom:20px;
    
}

#resposta {

    width:100px;
    height:140px;
 
    padding:10px; 
    margin-bottom:20px;
    
    margin-top:90px; 
    
}

#alerta {
 
    font-size:14px; 
    padding:11px; 
    margin-left:0px; 
    
}



.update_js, .delete_js, .upload_js, .upload_delete2_js {
   border-style: none;
    margin:4px 2px;
}



/* DEBUG */

#conteudo, #resposta {
    
    /* background-color:darkgray; */
    
}




.lista_crud {
    
    width:100%; 
    min-height: 200px; 
    border-color:#eee; 
    padding:10px; 
    margin-bottom:20px;
    
}




.svg_branco {
  fill: #FFFFFF;
}

.svg_azul_escuro {
  fill: #0A2E59;
}

.svg_azul_claro {
  fill: #49C6F4;
}

.svg_verde {
  fill: #3DB494;
}




.color_branco {
  color: #FFFFFF;
}

.color_azul_escuro {
  color: #0A2E59;
}

.color_azul_claro {
  color: #49C6F4;
}

.color_verde {
  color: #3DB494;
}



.bgcolor_branco {
  background-color: #FFFFFF;
}

.bgcolor_azul_escuro {
  background-color: #0A2E59;
}

.bgcolor_azul_claro {
  background-color: #49C6F4;
}

.bgcolor_verde {
  background-color: #3DB494;
}






.borda_janela {
    background-color: #FFFFFF;
    margin: 0px;
    padding: 3px;
    padding-top:5px;
    border-radius: .25rem;
    border: 1px solid #ced4da;
}









/* lista  */
.lista_retorno {

    padding: 5px; margin-left:6px;

}

.lista_retorno:hover {

    background-color: #efefef;

}






/* ******************************************** */

 
 









/* https://www.designcise.com/web/tutorial/how-to-fix-issues-with-css-position-sticky-not-working */
.div_fixa {
    background-color: #fff;
    border-bottom:2px solid #eee;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}




@media only screen and (max-width: 600px) {
    .div_fixa {
        background-color: #0f0;

        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 100%;
        background: lime; 

        padding:20px;
        z-index: 10;

        box-sizing: border-box;
        height:100vh;
        object-fit: contain;

        z-index: 1000;
        overflow: hidden;
        pointer-events: all;
        
    }

}







/* semaforo */ 

.svg-green {
    
    animation: svg-green 5.5s   infinite ;
    
    fill:#1FDE11;    
    color:#1FDE11;
    
}

@keyframes svg-green {
    
    0% {
        filter: drop-shadow( 0 0 0px #1FDE11);
    }

    10% {
        filter: drop-shadow( 0 0 3px #1FDE11);
    }

    20% {
        filter: drop-shadow( 0 0 0px #1FDE11);
    }

}

     
.svg-red {
    
  animation: svg-red 5.5s   infinite ;
    
    fill:#ED0E0E;
}

     
 @keyframes svg-red {
    
    0% {
        filter: drop-shadow( 0 0 0px #ED0E0E);
    }

    10% {
        filter: drop-shadow( 0 0 3px #ED0E0E);
    }

    20% {
        filter: drop-shadow( 0 0 0px #ED0E0E);
    }

}

     
    
    
     
.svg-grey {
    
    animation: svg-grey 5.5s   infinite ;

    fill:#DDDDDD;
    color:#DDDDDD;
    
}

     
 @keyframes svg-grey {
    
    0% {
        filter: drop-shadow( 0 0 0px #DDDDDD);
    }

    10% {
        filter: drop-shadow( 0 0 3px #DDDDDD);
    }

    20% {
        filter: drop-shadow( 0 0 0px #DDDDDD);
    }

}

     
    
     
 









/* gradiente itrade */
.gradient {
    height: 10px;
    background: linear-gradient(to right, #00bef2 0%,#57b87f 65%);
}

.cf:before, .cf:after {
    content: "";
    display: block;
}
.cf:after {
    clear: both;
}
.cf:before, .cf:after {
    content: "";
    display: block;
}






.loading {
    display: block;
    text-indent: -9999px;
    width: 38px;
    height: 38px;
    background-size: 48px 48px;
    /* svg   width='48px' height='48px' */
    
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 100 100' enable-background='new 0 0 100 100' xml:space='preserve'><path fill='#e74c3c' d='M31.6,3.5C5.9,13.6-6.6,42.7,3.5,68.4c10.1,25.7,39.2,38.3,64.9,28.1l-3.1-7.9c-21.3,8.4-45.4-2-53.8-23.3 c-8.4-21.3,2-45.4,23.3-53.8L31.6,3.5z'><animateTransform attributeName='transform' attributeType='XML' type='rotate' dur='1.1s' from='0 50 50' to='360 50 50' repeatCount='indefinite' /></path><path fill='#e74c3c' d='M42.3,39.6c5.7-4.3,13.9-3.1,18.1,2.7c4.3,5.7,3.1,13.9-2.7,18.1l4.1,5.5c8.8-6.5,10.6-19,4.1-27.7 c-6.5-8.8-19-10.6-27.7-4.1L42.3,39.6z'><animateTransform attributeName='transform' attributeType='XML' type='rotate' dur='0.7s' from='0 50 50' to='-360 50 50' repeatCount='indefinite' /></path><path fill='#e74c3c' d='M82,35.7C74.1,18,53.4,10.1,35.7,18S10.1,46.6,18,64.3l7.6-3.4c-6-13.5,0-29.3,13.5-35.3s29.3,0,35.3,13.5 L82,35.7z'><animateTransform attributeName='transform' attributeType='XML' type='rotate' dur='0.7s' from='0 50 50' to='360 50 50' repeatCount='indefinite' /></path></svg>");
}