.onoffswitch {
    position: relative; width: 90px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
    display: none;
}
.onoffswitch-label {
    display: block; overflow: hidden; cursor: pointer;
    border: 2px solid #999999; border-radius: 20px;
}

.eye{
	overflow:hidden;
}
.hat{
	overflow:hidden;
	position:absolute;
	left:100px;
	top:0px;
}
.onoffswitch-inner {
    display: block; width: 200%; margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
    display: block; float: left; width: 50%; height: 22px; padding: 0; line-height: 22px;
    font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
    box-sizing: border-box;
}
.onoffswitch-inner:before {
    content: "ON";
    padding-left: 10px;
    background-color: #4F5D75; color: #FFFFFF;
}
.onoffswitch-inner:after {
    content: "OFF";
    padding-right: 10px;
    background-color: #EEEEEE; color: #999999;
    text-align: right;
}
.onoffswitch-switch {
    display: block; width: 18px; margin: 4px;
    background: #FFFFFF;
    position: absolute; top: 0; bottom: 0;
    right: 60px;
    border: 2px solid #999999; border-radius: 20px;
    transition: all 0.3s ease-in 0s; 
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    right: 0px; 
}



body{
    font-family: sans-serif, arial;
}




.clearfix {
  overflow: auto;
  zoom: 1;
}







#menu-options button{
    
}

.switch-bundle{
    margin-top:6px;
}
.dark{
    background:gray;
	color:cyan;
	border:none
}
.switch-bundle select{
    float:left;
    height:22px;
    width:100px;
}
.onoffswitch-holder{
    float:left;
    width:60%
}

.switch-bundle .label{
    float:left;
    width:40%;
    font-size:14px;
    line-height:2;
    font-weight: bold;
}

.switch-bundle .label.s{
    font-size:12px;
    line-height:1.3;
}

.setting-label{
    float:left;
    width:90px;
    font-size:14px;
    line-height:2;
    font-weight: bold;
}
.setting-holder{
    width:100%;
    position:relative;
    overflow:visible;
    clear:both;
}
.setting-input{
    width:110px;
    height:18px;
    text-indent:5px;
}
.meter-bundle{
    margin-top:10px;
}

.meter-bundle .label{
    float:left;
    width:40%;
    font-size:14px;
    font-weight: bold;
}

.meter-holder{
    float:left;
    width:60%;
}

.meter { 
    height: 10px;  /* Can be anything */
    position: relative;
    background: #555;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    padding: 3px;
    box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
}



.meter > span {
  display: block;
  height: 100%;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  background-color: rgb(43,194,83);
  background-image: linear-gradient(
    center bottom,
    rgb(43,194,83) 37%,
    rgb(84,240,84) 69%
  );
  box-shadow: 
    inset 0 2px 9px  rgba(255,255,255,0.3),
    inset 0 -2px 6px rgba(0,0,0,0.4);
  position: relative;
  overflow: hidden;
}

.orange > span {
  background-color: #EF8354;
  background-image: linear-gradient(to bottom, #f1a165, #EF8354);
}

.red > span {
  background-color: #f0a3a3;
  background-image: linear-gradient(to bottom, #f0a3a3, #f42323);
}


#switches-holder{
    width:50%;
    float:left;
}
#status-holder{
    width:50%;
    float:left;
}





#logo{
    margin-bottom:10px;
}

#logo img {
    width: 160px;position:fixed;left:10px
}
.pointer{
    cursor:pointer;
}

#hidden-desc {
    display:none;
    margin-top:5px;
    text-align:center;
    font-size:14px;
    background: #EF8354;
    color:#fff;
    padding:3px;
}

#notif-section{
    width:100%;
    clear:both;
    border-top:1px solid #ccc;
    margin-top:10px;
}
.contacts-text img{
    vertical-align:middle;
}
.contacts-text{
    line-height:1.3;
    font-size:16px;
    color:#46494C;
    padding: 7px 0 7px 0;
    text-align:left;
}


.btn-style-1{
    text-align:center;
    cursor:pointer;
    font-weight:bold;color:#bf1f1f;
    font-size: 12px;
    padding:6px;
    border-radius: 5px;
    border: 1px solid #bf1f1f;
    background:#ffe3c5;
}
.btn-style-1:hover{
    background: #fff;
}

#enter-playground {
    margin-top:10px;
    font-size:16px;
    padding-top:8px;
}

#tabs { list-style: none; clear:both; padding:0; margin:0;}
#tabs:before,#tabs:after { content: "";display: table;}
#tabs:after {clear: both;}
#tabs li {background: #EF8354;margin-right:1px;display:block; float:left; padding:7px; margin-bottom:-1px;}
#tabs li.active {border-bottom:1px solid #fff}
#tabs li:last-of-type { border-right:1px solid black; }
#tabs li a { text-decoration:none; color:#fff }
#tabs li:hover { background: #ccc; }
#tabs li.active a{color:#000;}
#tabs li.active{background: #FFF;}

#tabs-content{background: #FFF;}

.content-block {
    padding:10px 15px 5px 15px;    
    background:#fffffb;
    display:none;
}

.content-block.active{
    display:block;
}

.guide-box{
    margin-top:10px;
    font-size:14px;
}

.guide-box b{
    display:block;
}

.content-block{
    height:300px;
    overflow:auto;
}

.tabbed-area{
    margin:8px;
}

body{
    width:500px;
    margin:0px;
    background: #2D3142;
}


#logo{
    background: #4F5D75;
}

hr {
    border:0;
    margin-top:15px;
    border-bottom:1px solid #ccc
}


#box-settings{
    padding:0;
    height:300px;

}
#box-settings #switches-holder{
    box-sizing:border-box;
    padding:5px 10px 10px 10px;
    background: #fdf0e9;
    height:155px;
}

#box-settings .top-settings{
    border-bottom: 1px solid #ccc;
}

#box-settings #status-holder {
    box-sizing:border-box;
    padding:5px 10px 10px 10px;
    background: #fff8f4;
    height:118px;
}

#enter-pg-holder {
    width:195px;
    float:right;
}

#enter-pg-holder a{
    margin:10px 10px 0 0;
    font-size:16px;
    text-decoration:none;
    padding:10px 7px;
    display:block;
}

#box-settings .bottom{
    border-bottom: 1px solid #ccc;
}

#box-settings .extra-settings {
    float:left;
    width:270px;
    padding:10px 10px;
    box-sizing:border-box;
}

#box-suggestions{
    height:320px;
}
#box-suggestions form{
    margin-top:10px;
}

#send-suggestion{
    width: 100px;
}

#box-suggestions textarea{
    width:400px;
    height:90px;
    margin-top:10px;
}

#thank-you{
    padding-top:50px;
    text-align:center;
    font-size:26px;
}

.exp-txt{
    padding:10px 20px 10px 20px;
    margin-left:-15px;
    margin-right:-15px;
    font-size:16px;
    font-weight:bold;
    text-align:center;
    background: #ffdbb4;
}









.help-tip{
    position: absolute;
    text-align: center;
    background-color: #4f5d74;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 12px;
    line-height: 20px;
    cursor: default;
}

.help-tip:before{
    content:'?';
    font-weight: bold;
    color:#fff;
}


/* CSS animation */

@-webkit-keyframes fadeIn {
    0% { 
        opacity:0; 
        transform: scale(0.6);
    }

    100% {
        opacity:100%;
        transform: scale(1);
    }
}

@keyframes fadeIn {
    0% { opacity:0; }
    100% { opacity:100%; }
}








/***************** REMINDERS ***************/ 
#box-reminders{
    height:420px;
}

#box-reminders .item{
    margin-bottom:5px;
    padding-bottom:5px;
    
}
#box-reminders .item:not(:last-child){
    border-bottom:1px solid #eee;
}

#box-reminders .item .input-holder{
    width:65%;
    float:left;
}
#box-reminders .item .input-holder input[type="text"]{
    color:#636363;
    text-indent:3px;
    width:100%;
    height:30px;
}

#box-reminders .item .duration-holder{
    width:35%;
    float:left;
}

#box-reminders .item .duration-holder .duration-item{
    width:70px;
    float:right;
}

#box-reminders .item .remove{
    text-decoration:none;
    color:black;
}

 #box-reminders .item .duration-holder .duration-item button{
    width:70px;
    height:15px;
    line-height:10px;
    cursor:pointer
}

#box-reminders .item .duration-holder .duration-item .duration-input{
    width:32px;height:27px;
    border:0;
    float:left;
    border-left:1px solid #ccc;
    text-align:center;
}

#box-reminders .item .duration-holder .duration-item .duration-text{
    float:left;
    user-select: none;
    background:#eee;
    height:29px;
    line-height:30px;
    width:37px;
    text-align:center;
    font-weight:bold;
    color:#aaa
}

#box-reminders .item  .buttons-holder{
    margin-bottom:3px;
}

.preview-holder{
    text-align:center;
    padding-top:5px;
}
.skin-display-holder{
    float:left;
    margin-left:7px;
}
.skin-display-holder img{
    height: 58px;
}


.merch-items .merch-item{
    float:left;
    margin-left:5px;
}

.merch-items .merch-item img{
    width:82px;
}

.font-sb{
    font-size:12px;
    font-weight:bold;
    text-decoration:none;
}