menu.css

@import 'root.css';

ul.main-menu
{
    list-style-type: none;
    margin: 0px 0px 10px 0px;
    padding: 0px;
}
ul.main-menu > li
{
    margin: 0;
    display: inline;
    list-style-type: none;
    padding: 6px 4px 6px 6px;
    line-height: 28px;
    vertical-align: middle;
    cursor: default;
    outline: none;

}
ul.main-menu > li.active-menu
{
    background-color: #121213;

}
ul.main-menu ul li a
{
    color: #fff;
    text-decoration: none;
    display: block;
    white-space: nowrap;
}
ul.main-menu li ul li a span
{
    font-size: 11px;
    color: #999;
    float:right;
    right: 10px;
    left: auto;
    position: absolute;
}
/* SUBMENU */
ul.main-menu > li  ul
{
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: none;
    border-width:1px;
    border-style: solid;
    border-color: #59606b;
    background-color: #121213;
    -webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}
ul.main-menu li ul li
{
    display:list-item;
    margin: 0;
    line-height: 26px;
    padding-right: 40px;
    min-width: 100px;
    cursor: pointer;
    text-indent: 30px;
    white-space:nowrap;
}
ul.main-menu li:hover
{
    background-color: #2d3239; /*#fef7cb;*/
}
ul.main-menu li.active-menu:hover
{
    background-color: #121213;
}
ul.main-menu li ul li.disabled, ul.main-menu li ul li.disabled:hover, ul.main-menu li ul li.disabled a
{
    color: #ddd;
    cursor:default;
    background-color: #080809;
}
ul.main-menu li.separator
{
    border-top: 1px solid #2d3239;
    margin-top: 5px;
    margin-bottom: 5px;
}
.submenu
{
    /*background-image: url(../img/menu-right-arrow.png);*/
    background-repeat: no-repeat;
    background-position: right center;
}
#menu-bar{
    position: relative;
    top: -34px;
    left: 30px;
    z-index: 988;
    width: 300px;
    color: var(--titlecolor);
    margin-left: 17px;
}
/*
for settings part

*/
#settings{display: none;width: 500px;height: 400px; background: linear-gradient(57deg,#b8b8b8,#fafafa);position: fixed;
  top: 10%;left: 50%;transform: translateX(-50%);
  z-index: 1000;box-shadow: 0 1px 6px 0 rgba(32,33,36,0.68);
  border-radius: 5px;overflow: hidden;
}
#settings .closesetting{
  position: absolute;
  top: 5px;
  right: 5px;
  padding: 2px;
  padding-left: 2px;
  padding-right: 3px;
  border: 1px solid #dfe1e5;
  border-radius: 3px;
  cursor: pointer;
  transition: 0.2s ease;
  z-index: 1001;
}
#settings .closesetting:hover{background: #d12626;color: white;}
.gridsetcont {
  display: grid;
  grid-template-columns: auto 1fr;
  height: 100%;
  font-family: 'consola';
}
.gridsetitem {

  font-size: 25px;
  text-align: center;
}
.gridsetitem:nth-child(1){
  border-right: 1px solid #a6a6a6;
  width: 150px;
  height: 100%;
}

.griditemrow{
  width: 100%
  text-align: center;
  border-bottom: 1px solid #a6a6a6;
  height: 35px;
  cursor: pointer;
}
.fontsize{
  width: 100%;
  height: 100%;
  font-size: 25px;
}
.theme{
  display: none;
  width: 100%;
  height: 100%;
}
.shortcut{
  display: none;
  width: 100%;
  height: 100%;
}
.update{
  display: none;
  width: 100%;
  height: 100%;
}
.group 			  {
  position:relative;
  margin-bottom:45px;
  top: 30px;
  left: 10px;

}
.input 				{
  font-size:18px;
  padding:10px 10px 10px 5px;
  display:block;
  width:300px;
  border:none;
  border-bottom:1px solid #757575;
  border-top-right-radius:3px;
  border-top-left-radius: 3px;
  overflow: hidden;
  color: #6e6e6e;
}
.input:focus 		{ outline:none; color: #000;}

/* LABEL ======================================= */
.label 				 {
  color:#999;
  font-size:18px;
  font-weight:normal;
  position:absolute;
  pointer-events:none;
  left:5px;
  top:10px;
  transition:0.2s ease all;
  -moz-transition:0.2s ease all;
  -webkit-transition:0.2s ease all;
}

/* active state */
.input:focus ~ .label, .input:valid ~ .label 		{
  top:-20px;
  font-size:14px;
  color:#5264AE;
}

/* BOTTOM BARS ================================= */
.bar 	{ position:relative; display:block; width:300px; }
.bar:before, .bar:after 	{
  content:'';
  height:2px;
  width:0;
  bottom:1px;
  position:absolute;
  background:#5264AE;
  transition:0.2s ease all;
  -moz-transition:0.2s ease all;
  -webkit-transition:0.2s ease all;
}
.bar:before {
  left:50%;
}
.bar:after {
  right:50%;
}

/* active state */
.input:focus ~ .bar:before, .input:focus ~ .bar:after {
  width:50%;
}

/* HIGHLIGHTER ================================== */
.highlight {
  position:absolute;
  height:60%;
  width:100px;
  top:25%;
  left:0;
  pointer-events:none;
  opacity:0.5;
}

/* active state */
.input:focus ~ .highlight {
  -webkit-animation:inputHighlighter 0.3s ease;
  -moz-animation:inputHighlighter 0.3s ease;
  animation:inputHighlighter 0.3s ease;
}

/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
	from { background:#5264AE; }
  to 	{ width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
	from { background:#5264AE; }
  to 	{ width:0; background:transparent; }
}
@keyframes inputHighlighter {
	from { background:#5264AE; }
  to 	{ width:0; background:transparent; }
}
.plus{
  position: relative;
  top: 20px;
  left: 58%;
  transform: translateX(-50%);
  padding: 5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 6px 0 rgba(32,33,36,0.28);
  width: 35px;
  cursor: pointer;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.minus{
  position: relative;
  top: -19px;
  left: 45%;
  transform: translateX(-50%);
  padding: 5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 6px 0 rgba(32,33,36,0.28);
  width: 35px;
  cursor: pointer;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.setbtn{color: #5264AE;width: 70px;background: #fff;box-shadow: 0 1px 6px 0 rgba(32,33,36,0.28);
padding-bottom: 2px;border-radius: 5px;transition: 0.3s ease;position: relative;left: 50%;transform: translateX(-50%);}
.setbtn:hover{background: #5264AE;color: #fff;cursor: pointer;}
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
  outline: 0;
  box-shadow: none;
  border: 0 !important;
  background: #2c3e50;
  background-image: none;
}
/* Remove IE arrow */
select::-ms-expand {
  display: none;
}
/* Custom Select */
.select {
  position: relative;
  display: flex;
  width: 70%;
  height: 40px;
  line-height: 3;
  background: #2c3e50;
  overflow: hidden;
  border-radius: .25em;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
}
select {
  flex: 1;
  padding: 0 .5em;
  color: #fff;
  cursor: pointer;
}
/* Arrow */
.select::after {
  content: '\25BC';
  position: absolute;
  top: -15px;
  right: 0;
  padding: 0 1em;
  background: #34495e;
  cursor: pointer;
  pointer-events: none;
  -webkit-transition: .25s all ease;
  -o-transition: .25s all ease;
  transition: .25s all ease;
}
/* Transition */
.select:hover::after {
  color: #f39c12;
}
select option{padding-left: 20px;}
.cet{top: 100px;}
.stcut{overflow: scroll;font-size: 25px;height: 400px;}
#update1 .imgabt{position: relative;left: 48%;transform: translateX(-50%);box-shadow: 0 1px 6px 0 rgba(32,33,36,0.28);width: 125px;height: 125px;border-radius: 50%;margin-top: 10px;background: white;}
#update1 .imgabt img{width: 120px;height: 120px;border-radius: 50%;position: relative;top: 50%;left: 48%;transform: translate(-50%,-50%);}
#quarkabt{
  display: flex;
  position: relative;
  top:10px;
  left:76%;
  transform: translateX(-50%);
  margin-bottom: 10px;
}
#quarkabt div{position: relative;top: 10px;font-size: 30px;}