:root{
    --MainTextColor: white;
    /* --MainTextColor: yellowgreen; default*/
}

.BtnDefaultEffect{
    scale: 1;
    /* background-color: white !important; */
    transition-duration: 5s;
}
.activeBtnEvffect{
    scale: 1;
    background-color: brown !important;
    /* opacity: 0; */
    transition-duration: 5s;
    animation-name: AnimateScaleOfButton;
    animation-duration: 1s; 
    /* timing-function delay iteration-count direction fill-mode; */
}
@keyframes AnimateScaleOfButton {
    0%{scale: 1; opacity:1;}
    /* 50%{;} */
    100%{scale: 50; opacity: 0;}
}


.DefaultBtnStyle{
    /* color: yellowgreen !important; */
    color: var(--MainTextColor) !important;
    background-color: black;
    border: 1px solid (var(--MainTextColor));
}
.ActiveBtnStyle{
    color: black !important;
    background-color: var(--MainTextColor) !important;
    /* background-color: yellowgreen !important; */
}
.SmBtn{
    transform: scale(0.5) !important;
}
.MenuDefStyle{
    color: var(--MainTextColor);/*default color: yellowgreen; */
    background-color: black;
    
}
.MenuDefStyle li :hover{
    color: #000000 !important;
    background-color: var(--MainTextColor) !important;
    /* background-color: yellowgreen !important; */

}
#TimemeterPanel{
    bottom: 55px;
    left: 5%;
    display: flex;
    flex-direction: column;
    z-index: 777705555551 !important;
}


#AppClocksLabel, #AppTimemeterLabel{
    animation-name: CycleColor;
    animation-duration: 60s;
    animation-iteration-count: infinite;
}

@keyframes CycleColor {
    0%{color: rgb(35, 35, 35); }
    20%{color: rgb(255, 255, 255); }
    35%{color: rgb(35, 35, 35); }
    50%{color: rgb(28, 0, 128); }
    75%{color: rgb(35, 35, 35); }
    80%{color: rgb(128, 0, 0); }
    100%{color: rgb(35, 35, 35); }
  }
/* @keyframes CycleColor {
    0%{color: white;}
    12.5%{color: indigo;}
    25%{color: blue;}
    37.5%{color: cyan;}
    50%{color: green;}
    62.5%{color: yellow;}
    75%{color: orange;}
    87.5%{color: red;}
    100%{color: white;}
  } */

/* @keyframes ChangeBorderColors {
    0%{border-color: white;}
    12.5%{border-color: indigo;}
    25%{border-color: blue;}
    37.5%{border-color: cyan;}
    50%{border-color: green;}
    62.5%{border-color: yellow;}
    75%{border-color: orange;}
    87.5%{border-color: red;}
    100%{border-color: white;}
  } */