/*body,html,div,blockquote,img,label,p,h1,h2,h3,h4,h5,h6,pre,ul,ol,li,dl,dt,dd,form,a,fieldset,input,th,td{border:0;outline:none;margin:0;padding:0;}*/

#main_div_l,#main_div,#nav{border:0;outline:0;margin:0;padding:0;}

/*------menu principal start---------*/
#main_div_l{ width:800px; margin-left: auto; margin-right: auto; text-align:center; font-size: 20px; /*font-weight: bold;*/}
#main_div{ width:320px; margin-left: auto; margin-right: auto; text-align:center;  font-size: 16px; font-weight: bold;}
#nav {float: none; width: 300px;  border-top: 0px solid #999; border-right: 0px solid #999; border-left: 0px solid #999; list-style:none; list-style-type:none; margin:0; font-size: 16px; font-weight: bold;}
#nav li a {display: block; padding: 10px 15px; background: #ccc; border-top: 1px solid #eee; border-bottom: 1px solid #999; text-decoration: none; color: #000; list-style:none; list-style-type:none; margin:0; font-size: 16px; font-weight: bold;}
#nav li a:hover, #nav li a.active {background: #999; color: #fff;list-style:none; list-style-type:none; margin:0; font-size: 16px; font-weight: bold;}
#nav li ul {display: none; width: 290px;  margin-left: auto; margin-right: auto;list-style:none; list-style-type:none;  font-size: 15px; font-weight: bold;}
#nav li ul li a {padding: 10px 25px; background: #ececec; border-bottom: 1px dotted #ccc;list-style:none; list-style-type:none; margin:0; font-size: 15px; font-weight: bold;}
/*------menu principal end---------*/

body
{
    /*font-family: Verdana;*/
    font-family: 'Muli';
    /*font-size: 14px;*/
    /*font-weight: bold;*/
    color: #000000;
    background-color: #2f3837;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

tdhead
{
	
	font-weight: bold;
    font-size: 12px;
    color: #ffffff;
}
tdsubhead
{
	
	font-weight: bold;
    font-size: 10px;
    color: #aaaaaa;
}

body,html,div,blockquote,img,label,p,h1,h2,h3,h4,h5,h6,pre,ul,ol,li,dl,dt,dd,form,a,fieldset,input,th,td,span,tr,table,tdhead,textarea,select {
        font-family: 'Muli';
}

.ui-widget {
	font-family: 'Muli';
}


/*.tablink {
  background-color: #555;
  color: white;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  font-size: 17px;
  width: 25%;
}

.tablink:hover {
  background-color: #777;
}*/


.btnclassname {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
	background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
	background-color:#ededed;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:2px solid #dcdcdc;
	display:inline-block;
	color:#333333;
	/*font-family:Arial;*/
	font-size:16px;
	font-weight:bold;
	padding:2px 31px;
	text-decoration:none;
	text-shadow:1px 2px 0px #ffffff;
	/*width: 200px;
	white-space:normal;*/
}.btnclassname:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
	background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
	background-color:#dfdfdf;
	cursor: pointer;
}.btnclassname:active {
	position:relative;
	top:1px;
}.btnclassname:disabled {
	position:relative;
	top:1px;
	color:#bbbbbb;
}

 input.textboxh
{
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 5px;
    padding: 4px 10px 4px 4px;
    color: Black;
    border: solid 1px #85b1de;
    text-align:center;
    background-color:none;
    /*width:500px;*/
}

 input.textboxh_edit
{

    font-size: 24px;
    font-weight: bold;
    margin-bottom: 5px;
    padding: 4px 10px 4px 4px;
    color: Black;
    border: solid 1px #85b1de;
    text-align:center;
    background-color:#f5e1a2;
    /*width:500px;*/

}

 input.textboxh1
{
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 5px;
    padding: 4px 10px 4px 4px;
    color: Black;
    border: solid 1px #85b1de;
    text-align:center;
    background-color:none;
    width:150px;
}

 img.imgcursor
 {
      cursor: pointer;
      width: 16px;
      vertical-align:middle;
      padding-left:5px;
 }

 img.imgcursor1
 {
      cursor: pointer;
      width: 16px;
 }

  img.imgcursor2
 {
      cursor: default;
      width: 16px;
      vertical-align:middle;
      padding-left:5px;
 }

img.imgSettings
 {
      cursor: pointer;
      width: 24px;
      padding: 0px 5px 5px 5px;
 }
 .td_label
 {
     font-size:12px;
     font-weight:bold;
     color: #808080;
     vertical-align:middle;
 }

  .tr_height
 {
     height:40px;
 }

 .inputFile{
	    border:#bbb solid 1px;
	    height:20px;
}

.tab_container{
    width: 100%;
    height: 100%;
    overflow: auto;
    font-family: 'Muli';
}

.tab_panel{

    width: 94%;
    height: 90%;
    /*overflow: unset;*/
    overflow: auto;
    
}

.tab_header{
font-family: 'Muli';
}
.table_sensor{
    /*width: 50%;*/
    height: 100%;
    /*overflow: unset;*/
    overflow: auto;
    align-self:center;
    display:none;  
    /*display: inline-block;*/  
    float: left; 
}

.table_wh{
    /*width: 50%;*/
    width: 530px;
    height:100%;
    /*overflow: unset;*/
    overflow: hidden;
    align-self:center;
    display:none;
    vertical-align:top;
    text-align:center;
}

/*.big-big-container{
    width: 570px;
    height:570px;
    border:1px none gray;
    line-height: 330px;
    margin: 0 auto;
    position: relative;
}

.big-container{
    width: 570px;
    height:570px;
    border:1px none gray;
    line-height: 330px;
    margin: 0 auto;
    position: absolute;
    top: 0;
    left: 0;
}*/

.big-big-container{
    width: 490px;
    /*height:330px;*/
    border:1px none gray;
    height:100%;
    /*border:1px solid purple;*/
    line-height: 330px;
    margin: 0 auto;
    position: relative;
}

.big-container{
    width: 490px;
    /*height:330px;*/
    border:1px none gray;
    height:100%;
    /*border:1px solid blue;*/
    line-height: 330px;
    margin: 0 auto;
    position: absolute;
    top: 0;
    left: 0;
}

.sen_cell{
    width: 160px;
    height:160px;
}

.wh_cell{
    width: 200px;
    height:0px;
}

.wh_cell_updown{
    background-color: #dbdbdb;
    height:15px;
    text-align:center;
}

.td_cell{
    border:4px none #f9f9f9;
    vertical-align: middle;
    border-radius: 10px;
}

.td_cell_hide{
    border:4px none #dbdbdb;
    vertical-align: middle;
}

.table_sen_cell{
    width:160px;
    height:160px;
    text-align:center;
    font-size: 14px;
    font-weight: bold;
    color: #303030;
    /*background-color: #f7f7f7;*/
    background-color: #f5f5f5;
    visibility:hidden;
    font-family: 'Muli';
    border-radius: 5px;
}

/*.table_sen_cell_nr{
    width:160px;
    height:160px;
    text-align:center;
    font-size: 14px;
    font-weight: bold;
    color: #303030;
    background-color: #f7f7f7;
    visibility:hidden;
    font-family: 'Muli';
    border-radius: 5px;
}*/

.td_sen_cell_1{
    font-size: 14px;
    font-weight: bold;
    color: #303030;
    border-radius: 5px;
    background-color: #ededed;
}

.td_sen_cell_2{
    font-size: 14px;
    font-weight: bold;
    color: #303030;
    border-radius: 5px;
    background-color: #ffdbea;
}

.td_sen_cell_3{
    font-size: 14px;
    font-weight: bold;
    color: #303030;
    border-radius: 5px;
    background-color: #cb67f0;
}

.td_sen_cell_21{
    width:25%;
    font-size: 18px;
    font-weight: bold;
    /*color: #000000;
    background-color: #85ff66;*/
    color: #0c9913;
    border-radius: 5px;
}

.td_sen_cell_21_{
    width:25%;
    font-size: 18px;
    font-weight: bold;
    /*color: #000000;
    background-color: #f24835;*/
    color: #b51b47;
    border-radius: 5px;
}

.td_sen_cell_22{
    width:25%;
    font-size: 14px;
    font-weight: bold;
    color: #606060;
    text-align:left;
    border-radius: 5px;
}

.td_sen_cell_23 {
    width: 25%;
    font-size: 12px;
    font-weight: bold;
    color: #000000;
    text-align: center;
    border-radius: 5px;
}

.td_sen_cell_white{
    width:25%;
    font-size: 14px;
    font-weight: bold;
    /*background-color: #ffffff;*/
    color: #000000;
}

.td_sen_cell_time_1{
    font-size: 10px;
    font-weight: bold;
    color: #606060;
    height:5%;
}

.table_wh_cell{
     width:490px;
     /*height:330px;*/
     height:100%;
     text-align:center;
     /*background-color: #f7f7f7;*/
     border-radius: 5px;
}

.label2{
    color: #ffffff;
}

.div_cccs_th_ {
    /*ícono con información lateral*/
    /*background-image: url("../imgs/icon_th.png");
        color: #000000;
        border:1px none #85ff66;
        position:absolute;
        width:22px;
        height:22px;
        z-index:30;
        vertical-align:text-top;
        line-height: 40px;
        font-size:11px;
        font-family: 'Muli';*/
    /*nuevo ícono*/
    /*background-image: url("../imgs/sen_xy_22.png");*/
    /*background-image: url("../imgs/icon_th_22.png");*/
    background-image: url("../imgs/sen_22.png");
    color: #000000;
    border: 1px none #85ff66;
    position: absolute;
    width: 22px;
    height: 22px;
    z-index: 30;
    vertical-align: text-top;
    line-height: 40px;
    font-size: 11px;
    /*font-family: 'Oxygen Mono';*/
    font-family: 'Muli';
}

.div_cccs_th{
        /*ícono con información lateral*/
        /*background-image: url("../imgs/icon_th.png");
        color: #000000;
        border:1px none #85ff66;
        position:absolute;
        width:22px;
        height:22px;
        z-index:30;
        vertical-align:text-top;
        line-height: 40px;
        font-size:11px;
        font-family: 'Muli';*/
        /*nuevo ícono*/
        /*background-image: url("../imgs/sen_xy_22.png");*/
        /*background-image: url("../imgs/icon_th_22.png");*/
        background-image: url("../imgs/sen_22.png");
        color: #000000;
        border:1px none #85ff66;
        position:absolute;
        width:22px;
        height:22px;
        z-index:30;
        vertical-align:text-top;
        line-height: 40px;
        font-size:11px;
        /*font-family: 'Oxygen Mono';*/
        font-family: 'Muli';
}

.div_cccs_h{
        /*background-image: url("../imgs/icon_th_h.png");
        color: #000000;
        border:1px none #f24835;
        position:absolute;
        width:5px;
        height:5px;
        z-index:30;
        vertical-align:text-top;
        line-height: 40px;
        font-size:11px;
        font-family: 'Oxygen Mono';*/
        background-image: url("../imgs/sen_22a.png");
        color: #000000;
        border:1px none #85ff66;
        position:absolute;
        width:22px;
        height:22px;
        z-index:30;
        vertical-align:text-top;
        line-height: 40px;
        font-size:11px;
        /*font-family: 'Oxygen Mono';*/
        font-family: 'Muli';
}

.div_cccs_t{
        /*background-image: url("../imgs/icon_th_t.png");
        color: #000000;
        border:1px none #f24835;
        position:absolute;
        width:22px;
        height:22px;
        z-index:30;
        vertical-align:text-top;
        line-height: 40px;
        font-size:11px;
        font-family: 'Oxygen Mono';*/
        background-image: url("../imgs/sen_22a.png");
        color: #000000;
        border:1px none #85ff66;
        position:absolute;
        width:22px;
        height:22px;
        z-index:30;
        vertical-align:text-top;
        line-height: 40px;
        font-size:11px;
        /*font-family: 'Oxygen Mono';*/
        font-family: 'Muli';
}

.div_cccs_th_th{
        /*background-image: url("../imgs/icon_th_th.png");
        color: #000000;
        border:1px none #85ff66;
        position:absolute;
        width:22px;
        height:22px;
        z-index:30;
        vertical-align:text-top;
        line-height: 40px;
        font-size:11px;
        font-family: 'Oxygen Mono';*/
        background-image: url("../imgs/sen_22a.png");
        color: #000000;
        border:1px none #85ff66;
        position:absolute;
        width:22px;
        height:22px;
        z-index:30;
        vertical-align:text-top;
        line-height: 40px;
        /*font-family: 'Oxygen Mono';*/
        font-family: 'Muli';
}

.div_cccs_d{
        /*background-image: url("../imgs/icon_d.png");
        color: #000000;
        border:1px none #f24835;
        position:absolute;
        width:22px;
        height:22px;
        z-index:30;
        vertical-align:text-top;
        line-height: 40px;
        font-size:11px;
        font-family: 'Oxygen Mono';*/
        background-image: url("../imgs/sen_22.png");
        color: #000000;
        border:1px none #85ff66;
        position:absolute;
        width:22px;
        height:22px;
        z-index:30;
        vertical-align:text-top;
        line-height: 40px;
        font-size:11px;
        /*font-family: 'Oxygen Mono';*/
        font-family: 'Muli';
}

.div_cccs_d_d{
        /*background-image: url("../imgs/icon_d_d.png");
        color: #000000;
        border:1px none #f24835;
        position:absolute;
        width:22px;
        height:22px;
        z-index:30;
        vertical-align:text-top;
        line-height: 40px;
        font-size:11px;
        font-family: 'Oxygen Mono';*/
        background-image: url("../imgs/sen_22.png");
        color: #000000;
        border:1px none #85ff66;
        position:absolute;
        width:22px;
        height:22px;
        z-index:30;
        vertical-align:text-top;
        line-height: 40px;
        font-size:11px;
        /*font-family: 'Oxygen Mono';*/
        font-family: 'Muli';
}

.span_cccs{
    /*ícono con información lateral*/
    /*position: absolute;
    left: 50%;
    transform: translateX(-125%);
    text-align: center;
    vertical-align:middle;
    top:-2px;
    width:45px;
    height:23px;
    line-height: 1em;
    border:1px solid #4287f5;
    background-color: #ffffff;
    border-radius: 5px;
    pointer-events: none;
    font-size:10px;
    font-family: 'Oxygen Mono';
    font-weight:bold;*/
    /*nuevo ícono*/
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    vertical-align:middle;
    top:-28px;
    width:75px;
    height:30px;
    line-height: 1em;
    border:1px solid #4287f5;
    background-color: rgba(255, 255, 255, 0.75);
    border-radius: 5px;
    pointer-events: none;
    font-size:10px;
     /*font-family: 'Oxygen Mono';*/
    font-family: 'Roboto Condensed';
    font-weight:bold;
}

.span_cccs_d{
    /*position: absolute;
    left: 50%;
    transform: translateX(-118%);
    text-align: center;
    vertical-align:middle;
    top:4px;
    width:55px;
    height:13px;
    line-height: 1em;
    border:1px solid #4287f5;
    background-color: #ffffff;
    border-radius: 5px;
    pointer-events: none;
    font-size:10px;
    font-family: 'Open Sans Condensed';
    font-weight:bold;*/
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    vertical-align:middle;
    top:-28px;
    width:75px;
    height:30px;
    line-height: 1em;
    border:1px solid #4287f5;
    background-color: rgba(255, 255, 255, 0.75);
    border-radius: 5px;
    pointer-events: none;
    font-size:10px;
     /*font-family: 'Oxygen Mono';*/
    font-family: 'Roboto Condensed';
    font-weight:bold;
}

.img_wh_class{
    vertical-align: middle;
    width: 480px;
    position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /*border:1px solid gray;*/
}

.IndicadorTiempo{
    font-size:10px;
    /*font-weight:bold;*/
    color: #FFFFFF;
}

.div_wh{
    /*border:1px solid #4287f5;*/
    overflow: auto;
    height:515px;
}

.panelAlerts {
    font-family: 'Muli';
    border-top: 1px solid #999999;
    position:fixed;
    /*width: 1200px;*/
    width: 98%;
    z-index: 10000;
    text-align:center;
    height: 210px;
    font-size:18px;
    color: #000;
    background: #FFF;
    display: flex;
    justify-content: center; /* align horizontal */
    border-top-left-radius:25px;
    border-top-right-radius:25px;
    right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
    bottom: -175px;
    cursor: pointer;
}

.slide-up
{
    bottom: 0px !important;
}

.slide-down
{
    bottom: -175px !important;
}

.gotAlerts1{
    /*background: #fff;*/
}

.gotAlerts2{
    color: #fff;
    background: #f24835;
    border-top-left-radius:25px;
    border-top-right-radius:25px;
}

.alertsHeaderSpan1{
    color: #f24835;
    font-size:14px;
    font-weight:bold;
}

.alertsHeaderSpan2{
    color: #fff;
    font-size:14px;
    font-weight:bold;
}

.containerSenAlert {
  position: relative;
  text-align: center;
}
.centeredSenAlert {
  position: absolute;
  top: -1px;
  right: 7px;

  color: #fff;
  font-size:8px;
  /*font-weight:bold;*/

border-radius: 50%;
width: 11px;
height: 11px;

background: #f24835;
border: 2px none #666;
text-align: center;
    visibility:hidden;
}

.txtcode{
    visibility:hidden;
    width:0px;
    height:0px;
}

.chartIdleC{
    background: #f5f5f5;
    padding: 0;
    margin: 0;
    width:5px;
    height:5px;
}

.chartInC{
    background: #0c9913;
    padding: 0;
    margin: 0;
    width:5px;
    height:5px;
}

.chartOutC{
    background: #f24835;
    padding: 0;
    margin: 0;
    width:5px;
    height:5px;
}

.chartIdle{
    background: #f5f5f5;
    padding: 0;
    margin: 0;
    width:5px;
    height:5px;
}

.chartIn{
    background: #0c9913;
    padding: 0;
    margin: 0;
    width:5px;
    height:5px;
}

.chartOut{
    background: #f24835;
    padding: 0;
    margin: 0;
    width:5px;
    height:5px;
}

.chartLabels1 {
    font-size: 8px;
    font-weight: normal;
    height: 5px;
    width: 10px;
}

.chartLabelsTbl {
    border-collapse: collapse;
    float: left;
    display: inline-block;
}

.chartDataTbl {
    border-collapse: collapse;
    float: right;
    transform: translate(5%, 25%);
    width: 100px;
}

.wrapperChart{
  display: table-cell;
  vertical-align: middle;
  /*height:20px;
  border: 2px solid #85b1de;*/
}

.remainChar{
    border: 1px none #ff0000;
    font-family: 'Muli';
    font-size:12px;
    font-weight: bold;
    text-align: right;
}

.alertCommentLbl{
    text-align: left;
    /*width: 50px;*/
    font-size:12px;
    font-weight: bold;
}

.alertCommentTxt{
    text-align: left;
    /*width: 30px;*/
    font-size:12px;
}

.alertConfigLbl{
    text-align: left;
    /*width: 50px;*/
    font-size:14px;
    font-weight: bold;
    height: 25px;
}

input.alertEmailTxtIdle{
    font-family: 'Muli';
    font-size:12px;
    font-style:italic;
    text-align: left;
    width: 370px;
    color: #777;
    cursor:text;
}

input.alertEmailTxt{
    font-family: 'Muli';
    font-size:12px;
    text-align: left;
    width: 370px;
    color: #000;
    cursor:text;
}

input.alertStatusTxt0{
    border: none;
    color: #00ab14;
    font-weight:bold;
    text-align:center;
}

input.alertStatusTxt1{
    border: none;
    color: #00ab14;
    font-weight:bold;
    background-color: #ededed;
    text-align:center;
}

input.alertStatusTxt2{
    border: none;
    color: #e80202;
    font-weight:bold;
    background-color: #ededed;
    text-align:center;
}

input.alertStatusTxt3 {
    border: 1px solid #808080;
    background-color: #ededed;
    font-family: 'Muli';
    font-size: 12px;
    text-align: left;
    width: 370px;
    color: #000;
    cursor: text;
}

.chartTitle{
    font-weight:bold;
    font-size:16px;
    background-color: #ededed;
}

.switch {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 17px;
}

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
     position: absolute;
     content: "";
     height: 13px;
     width: 13px;
     left: 2px;
     bottom: 2px;
     background-color: white;
     -webkit-transition: .4s;
     transition: .4s;
 } 

input:checked + .slider {
    background-color: #2196F3;
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
    -webkit-transform: translateX(13px);
    -ms-transform: translateX(13px);
    transform: translateX(13px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 17px;
}

.slider.round:before {
        border-radius: 50%;
}

.divPagination, #divRecInfo {
    text-align: center; /* Centra el contenido */
    margin-top: 20px; /* Espacio superior */
    /* Aquí puedes añadir más estilos según tus necesidades */
    /* Por ejemplo: */
    background-color: #f0f0f0; /* Color de fondo */
    padding: 10px; /* Espacio interno */
    border-radius: 5px; /* Bordes redondeados */
}

.divPaginationOther, #divRecInfoOther {
    text-align: center; /* Centra el contenido */
    margin-top: 20px; /* Espacio superior */
    /* Aquí puedes añadir más estilos según tus necesidades */
    /* Por ejemplo: */
    background-color: #f0f0f0; /* Color de fondo */
    padding: 10px; /* Espacio interno */
    border-radius: 5px; /* Bordes redondeados */
}


.loadingMessage {
    display: none; /* Oculto por defecto */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 20px;
    border-radius: 5px;
    z-index: 9999; /* Valor alto para asegurar que esté al frente */
}

.main_div_style {
    /* Copia aquí los mismos estilos que tiene el #main_div_l */
    /* Por ejemplo: */
    width: 600px;
    margin: 0 auto;
    text-align: center;
    /* ... otros estilos que tenga main_div_l */
}


.lblError {
    color: #f4b708;
    width: 291px;
}




.loading-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    text-align: center;
}

.loading-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 16px;
}

.spinner {
    border: 5px solid #f3f3f3;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 2s linear infinite;
    margin: 0 auto 15px auto;
}

.perm-item {
    display: flex;
    align-items: center;
    gap: 6px; /* espacio entre checkbox y label */
    margin: 4px 0;
}

.perm-item.indent {
    margin-left: 20px; /* << ajusta la sangría de los hijos */
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}