/* Service Panel */
ul#themelayout {
  display: block; }
  ul#themelayout li {
    display: inline-block; }
    ul#themelayout li:first-child {
      display: block; }
    ul#themelayout li a {
      width: 50px;
      height: 50px;
      display: inline-block;
      margin: 5px;
      color: transparent;
      position: relative; }
      ul#themelayout li a.working:before {
        content: "\f00c";
        font-family: "FontAwesome";
        font-size: 18px;
        line-height: 50px;
        width: 50px;
        height: 50px;
        position: absolute;
        top: 0;
        left: 0;
        color: #ffffff;
        text-align: center; }

ul#thememode {
  display: block; }
  ul#thememode li {
    display: inline-block; }
    ul#thememode li:first-child {
      display: block; }
    ul#thememode li a {
      width: 50px;
      height: 50px;
      display: inline-block;
      margin: 5px;
      color: transparent;
      position: relative; }
      ul#thememode li a.working:before {
        content: "\f00c";
        font-family: "FontAwesome";
        font-size: 18px;
        line-height: 50px;
        width: 50px;
        height: 50px;
        position: absolute;
        top: 0;
        left: 0;
        color: #ffffff;
        text-align: center; }

ul#themesidemode {
  display: block; }
  ul#themesidemode li {
    display: inline-block; }
    ul#themesidemode li:first-child {
      display: block; }
    ul#themesidemode li a {
      width: 50px;
      height: 50px;
      display: inline-block;
      margin: 5px;
      color: transparent;
      position: relative; }
      ul#themesidemode li a.working:before {
        content: "\f00c";
        font-family: "FontAwesome";
        font-size: 18px;
        line-height: 50px;
        width: 50px;
        height: 50px;
        position: absolute;
        top: 0;
        left: 0;
        color: #ffffff;
        text-align: center; }
        
.light-side{
  background: #fff;
  /* Old browsers */
  background: -moz-linear-gradient(left, #fff 0%, #fff 23%, #90a4ae 23%, #90a4ae 99%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(left, #fff 0%, #fff 23%, #90a4ae 23%, #90a4ae 99%);
  /* Chrome10-25,Safari5.1-6 */
  background: -webkit-gradient(linear, left top, right top, from(#fff), color-stop(23%, #fff), color-stop(23%, #90a4ae), color-stop(99%, #90a4ae));
  background: -o-linear-gradient(left, #fff 0%, #fff 23%, #90a4ae 23%, #90a4ae 99%);
  background: linear-gradient(to right, #fff 0%, #fff 23%, #90a4ae 23%, #90a4ae 99%);
  border: 1px solid #90a4ae;
}

.dark-side{
  background: #263238;
  /* Old browsers */
  background: -moz-linear-gradient(left, #263238 0%, #263238 23%, #90a4ae 23%, #90a4ae 99%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(left, #263238 0%, #263238 23%, #90a4ae 23%, #90a4ae 99%);
  /* Chrome10-25,Safari5.1-6 */
  background: -webkit-gradient(linear, left top, right top, from(#263238), color-stop(23%, #263238), color-stop(23%, #90a4ae), color-stop(99%, #90a4ae));
  background: -o-linear-gradient(left, #263238 0%, #263238 23%, #90a4ae 23%, #90a4ae 99%);
  background: linear-gradient(to right, #263238 0%, #263238 23%, #90a4ae 23%, #90a4ae 99%);
  border: 1px solid #90a4ae;
}        
        
.left-side{
  background: #263238;
  /* Old browsers */
  background: -moz-linear-gradient(left, #263238 0%, #263238 23%, #90a4ae 23%, #90a4ae 99%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(left, #263238 0%, #263238 23%, #90a4ae 23%, #90a4ae 99%);
  /* Chrome10-25,Safari5.1-6 */
  background: -webkit-gradient(linear, left top, right top, from(#263238), color-stop(23%, #263238), color-stop(23%, #90a4ae), color-stop(99%, #90a4ae));
  background: -o-linear-gradient(left, #263238 0%, #263238 23%, #90a4ae 23%, #90a4ae 99%);
  background: linear-gradient(to right, #263238 0%, #263238 23%, #90a4ae 23%, #90a4ae 99%);
  border: 1px solid #90a4ae;
}

.right-side{
  background: #263238;
  /* Old browsers */
  background: -moz-linear-gradient(right, #263238 0%, #263238 23%, #90a4ae 23%, #90a4ae 99%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(right, #263238 0%, #263238 23%, #90a4ae 23%, #90a4ae 99%);
  /* Chrome10-25,Safari5.1-6 */
  background: -webkit-gradient(linear, right top, left top, from(#263238), color-stop(23%, #263238), color-stop(23%, #90a4ae), color-stop(99%, #90a4ae));
  background: -o-linear-gradient(right, #263238 0%, #263238 23%, #90a4ae 23%, #90a4ae 99%);
  background: linear-gradient(to left, #263238 0%, #263238 23%, #90a4ae 23%, #90a4ae 99%);
  border: 1px solid #90a4ae;
}

.horizontal{
  background: #263238;
  /* Old browsers */
  background: -moz-linear-gradient(top, #263238 0%, #263238 23%, #90a4ae 23%, #90a4ae 99%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #263238 0%, #263238 23%, #90a4ae 23%, #90a4ae 99%);
  /* Chrome10-25,Safari5.1-6 */
  background: -webkit-gradient(linear, top, bottom, from(#263238), color-stop(23%, #263238), color-stop(23%, #90a4ae), color-stop(99%, #90a4ae));
  background: -o-linear-gradient(top, #263238 0%, #263238 23%, #90a4ae 23%, #90a4ae 99%);
  background: linear-gradient(to bottom, #263238 0%, #263238 23%, #90a4ae 23%, #90a4ae 99%);
  border: 1px solid #90a4ae;
}

.light-mode{
  background: #90a4ae;
}

.dark-mode{
  background: #323232;
}
.setting-icon {
  position: fixed !important;
  right: 20px;
  top: 15px;
  z-index: 99;
  outline: none !important;
}

#service_panel {
  position: fixed;
  top: 0;
  right: 0px;
  width: 250px;
  height: 100%;
  background: #fff;
  z-index: 99;
  -webkit-box-shadow: 5px 1px 40px rgba(0, 0, 0, 0.1);
  box-shadow: 5px 1px 40px rgba(0, 0, 0, 0.1);
    
}
#service_panel .r-panel-body {
   padding: 20px; 
}
#service_panel .r-panel-body ul {
  margin: 0px;
  padding: 0px; 
}
#service_panel .r-panel-body ul li {
  list-style: none;
  padding: 5px 0;
}
#service_panel .rpanel-title {
    display: block;
    padding: 24px 20px;
    color: #ffffff;
    text-transform: uppercase;
    font-size: 15px;
    background: #009efb;
}