.btn-main { 
  color: #00FF00; 
  background-color: #000000; 
  border-color: #73BA73; 
} 
 
.btn-main:hover, 
.btn-main:focus, 
.btn-main:active, 
.btn-main.active, 
.open .dropdown-toggle.btn-main { 
  color: #00FF00; 
  background-color: #444444; 
  border-color: #73BA73; 
} 
 
.btn-main:active, 
.btn-main.active, 
.open .dropdown-toggle.btn-main { 
  background-image: none; 
} 
 
.btn-main.disabled, 
.btn-main[disabled], 
fieldset[disabled] .btn-main, 
.btn-main.disabled:hover, 
.btn-main[disabled]:hover, 
fieldset[disabled] .btn-main:hover, 
.btn-main.disabled:focus, 
.btn-main[disabled]:focus, 
fieldset[disabled] .btn-main:focus, 
.btn-main.disabled:active, 
.btn-main[disabled]:active, 
fieldset[disabled] .btn-main:active, 
.btn-main.disabled.active, 
.btn-main[disabled].active, 
fieldset[disabled] .btn-main.active { 
  background-color: #000000; 
  border-color: #73BA73; 
} 
 
.btn-main .badge { 
  color: #000000; 
  background-color: #00FF00; 
}

/*html,
body {
  margin: 0;
  padding: 0;
  max-height: 100%;
  font-family: "San Francisco";
}

@font-face {
  font-family: "San Francisco";
  font-weight: 400;
  src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff");
}

@font-face {
  font-family: "San Francisco";
  font-weight: 800;
  src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-bold-webfont.woff");
}

body {
}

.menu-bar {
  width: 100%;
  height: 30px;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(83, 83, 83, 0.4);
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px);

  .left {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: auto;
    margin-left: 20px;

    .apfel-logo {
      transform: scale(.6);
    }
    .menus {
      height: 100%;
      display: flex;
      align-items: center;
      margin-left: 20px;
      color: rgba(255, 255, 255, 0.95);
      font-size: 14px;
    }
    .active {
      font-weight: bold;
      color: #fff !important;
    }
  }
  .right {
    display: flex;
    align-items: center;
    justify-content: end;
    width: 380px;
    margin-right: 20px;
    .vol {
      transform: scale(0.6);
      margin-right: -10px;
    }
    .menu-time {
      height: 100%;
      width: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
    }
    .menu-ico {
      height: 100%;
      width: 10px;
      display: flex;
      align-items: center;
      justify-content: center;

      .control-center {
        -webkit-filter: invert(100%);
        filter: invert(100%);
        transform: scale(0.5);
      }
      .siri {
        transform: scale(0.7);
        object-fit: fill;
      }

      i {
        display: contents;
        font-size: 16px;
        color: #fff;
      }
    }
  }
}

.dock {
  width: auto;
  height: 60px;
  border-radius: 16px;
  display: flex;
  justify-content: center;
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);

  .dock-container {
    padding: 3px;
    width: auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: rgba(83, 83, 83, 0.25);
    backdrop-filter: blur(13px);
    -webkit-backdrop-filter: blur(13px);
    border: 1px solid rgba(255, 255, 255, 0.18);

    .li-bin {
      margin-left: 20px;
      border-left: 1.5px solid rgba(255, 255, 255, 0.4);
      padding: 0px 10px;
    }
    .li-open {
      &::after {
        position: absolute;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.5);
        content: "";
        bottom: 2px;
      }
    }

    li {
      list-style: none;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 50px;
      height: 50px;
      vertical-align: bottom;
      transition: 0.2s;
      transform-origin: 50% 100%;
      &:hover {
        margin: 0px 13px 0px 13px;
      }

      .name {
        position: absolute;
        top: -70px;
        background: rgba(0, 0, 0, 0.5);
        color: rgba(255, 255, 255, 0.9);
        height: 10px;
        padding: 10px 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 5px;
        visibility: hidden;
        &::after {
          content: "";
          position: absolute;
          bottom: -10px;
          width: 0;
          height: 0;
          backdrop-filter: blur(13px);
          -webkit-backdrop-filter: blur(13px);
          border-left: 10px solid transparent;
          border-right: 10px solid transparent;
          border-top: 10px solid rgba(0, 0, 0, 0.5);
        }
      }

      .ico {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: 0.2s;
      }
      .ico-bin {
        width: 94% !important;
        height: 94% !important;
        object-fit: cover;
        transition: 0.2s;

        &:hover {
          margin-left: 10px;
        }
      }
    }
  }
}

.li-1:hover, .li-2:hover, .li-3:hover, .li-4:hover, .li-5:hover, .li-6:hover, .li-7:hover {
  .name {
    visibility: visible !important;
  }
}

@for $i from 1 through 20 {
  .li-#{$i}:hover {
    .name {
      visibility: visible !important;
    }
  }
}

.ico:hover {
  cursor: pointer;
}

.middle {
  text-align: right;
}

#mainContent {
  width: 100%;
  min-height: 50%;
  margin-top: 60px;
}

.serverEntry {
  width: 100%;
  height: 70px;
  border-radius: 7px;
  border: 1px solid;
}

.serverEntry:hover {
  cursor: pointer;
  background: #999;
}

.onlineGreen {
  box-shadow: inset 0 0 10px #0F0;
}

.offlineRed {
  box-shadow: inset 0 0 10px #F00;
}

.startingBlue {
  box-shadow: inset 0 0 10px #4287F5;
  animation: pulse 3s infinite;
}

.prevent-select {
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

@keyframes pulse {
  0%, 100% {
    color: #6698E8;
  }
  50% {
    color: #206DE8;
  }
}*/