@import url(base.css);

/*
    YouTube:
        Red: #FF0000
        White: #FFFFFF
        Almost Black: #282828
    Twitch:
        Purple: #6441A4
*/

body{
    font-size: 16px;
    /* Pattern by Gre3g @ Subtlepatterns.com */
    background: #333 url(../img/px_by_Gre3g_@2X.png) repeat fixed center;
    /*transition: all 1s;*/
}
a,
a:hover{
    text-decoration: none !important;
}
h1{
    font-family: 'Play', sans-serif;
    color: #fff;
}
h2,
.group-text,
.widget-url,
.account-statuses{
    font-family: 'Play', sans-serif;
}
h3, h4, h5, h6, p, li, input, button, .btn, label{
    font-family: 'Lato', sans-serif;
    /*font-weight: 800 !important;*/
}
.blurred-text {
  filter: blur(2.5px);
}
.table>tbody>tr>td, 
.table>tbody>tr>th, 
.table>tfoot>tr>td, 
.table>tfoot>tr>th, 
.table>thead>tr>td, 
.table>thead>tr>th{
    vertical-align: middle;
}
.barker-border{
    border-top: 3px solid #999;
    border-left: 3px solid #eee;
    border-bottom: 3px solid #222;
    border-right: 3px solid #222;
}
.nav li{
    margin-left: 0;
}
.icon-cell{
    text-align: center;
}
.panel{
    border-radius: 0;
}
label{
    font-weight: 400;
}
.ff-play{
    font-family: Play;
}
.affiliate-header{
    color: #046E00;
    font-weight: 600;
    font-size: 22px;
}
.welcome-content{
    padding: 10px 50px 30px 50px;
    text-align: center;
    display: inline-block;
    margin-top: 50px;
    position: absolute;
    border-bottom: 5px solid rgba(227, 37, 36, 1);
    background: #222;
    left: 50%;
    z-index: 1000;
    transform: translateX(-50%);
}
.brand-beta{
    font-style: italic;
    font-size: 18px;
    text-align: center;
    color: #d9534f;
    margin: 0;
    padding: 0;
    margin-top: -20px;
    margin-bottom: 30px;
}
.btn,
.btn:hover{
    border-radius: 0;
    /*background-color: #3E5D8C;*/
    /*border-color: #3E5D8C;*/
    transition: .15s all linear;
}
.btn:hover{
    background-color: #547FBF;
    border-color: #547FBF;
}
.btn:active, .btn:focus{
    outline: none;
}
.btn, 
.well{
    border-radius: 0;
}

.btn-bb{
    padding: .5em 1em;
}
.btn-oauth{
    display: inline-block;
    color: #FFFFFF;
    font-family: 'Play', sans-serif;
    margin: .5em;
    transition: .15s all linear;
}
.btn-oauth:after {
    content: "";
    display: table;
    clear: both;
}
.btn-oauth:hover{
    
}
.btn-oauth .fa-youtube {
    padding-right: 1em;
    color: #FF0000;
}
.btn-oauth span.service-name{
    font-weight: bold;
}
.btn-youtube{
    border-bottom: .1em solid #FF0000;
}
.btn-youtube:hover,
.btn-twitch:hover{
    color: #282828;
    /* border-color: #FFF; */
    -webkit-box-shadow: inset 0px -36px 0px 0px rgba(255, 255, 255, 1);
    -moz-box-shadow: inset 0px -36px 0px 0px rgba(255, 255, 255, 1);
    box-shadow: inset 0px -36px 0px 0px rgba(255, 255, 255, 1);
}
.btn-youtube:hover span.service-name{
    color: #FF0000;
}
.btn-twitch:hover span.service-name{
    color: #6441A4;
}
.btn-oauth .fa-twitch {
    padding-right: 1em;
    color: #6441A4;
}
.btn-twitch{
    border-bottom: .1em solid #6441A4;
}
.canvas{
    height: 100%; width: 100%;
    overflow: hidden;
    position: absolute;
    top: 0; left: 0;
}
.fractal{
    float: left;
    opacity: 0;
    height: 0; width: 0;
    background-color: rgba(227, 37, 36, 1);
}
#canvas-content{
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 100;
}
.shadow{
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
}
.rad{
    border-radius: 1px;
}
.table{
    display: table;
}
.cell{
    display: table-cell;
    vertical-align: middle;
}
/* #detector{
    border: 1px solid #000;
    position: absolute;
} */
#app-container{
    margin: auto;
    width: 1280px;
    max-width: 1280px;
}
.content-offset{
    padding-top: 50px;
}
.primary-nav{
    /*background-color: #333;*/
    width: 100%;
    z-index: 1000;
}
.secondary-nav{
    background-color:  #222;
}
.secondary-nav .btn{
    padding: 0;
    color:  #fff;
    border: none;
}
.secondary-nav a:first-of-type{
    padding-right:  25px;
}
.secondary-nav a:last-of-type .btn{
    color:  #d9534f;
}
.secondary-nav .btn:hover{
    background: transparent;
    border: none;
}
.primary-nav .padding{
    height: 56px;
    padding-left: 0px;
    padding-right: 0px;
}
.padding{
    padding: 10px 16px;
}
.power{
    float: right;
    padding: 5px 0;
}
.fa-power-off::before{
    font-weight: 100;
    font-size: 2em;
    color: #ddd;
    /*text-shadow: 1px 1px 0px rgba(150, 150, 150, 1);*/
    cursor: pointer;
}
.power-off .fa-power-off::before{
    color: rgba(227, 37, 36, 1);
}
.account-statuses{
    /* display: inline-block; */
    color: #fff;
}
.account-statuses a,
.account-statuses a:link,
.account-statuses a:visited,
.account-statuses a:hover,
.account-statuses a:active{ 
    color: #fff;
}
.account-statuses > div{
    display: inline-block;
    margin-right: 15px;
}
.light-status{
    height: 12px; width: 12px;
    display: inline-block;
}
#barker-tracker .light-status {
    margin-right: 8px;
}
.light-status .inner{
    background: rgba(255,255,255, .65);
    height: 5px; width: 5px;
    border-radius: 1px;
}
.offline,
.youtube-light{
    background: #ff0000;
    border: 1px solid #A60000;
    -webkit-box-shadow: 0px 0px 15px 1px rgba(166,0,0,0.5);
    -moz-box-shadow: 0px 0px 15px 1px rgba(166,0,0,0.5);
    box-shadow: 0px 0px 15px 1px rgba(166,0,0,0.5);
}
.online,
.affiliate-light{
    background: #00ff00;
    border: 1px solid #06A600;
    -webkit-box-shadow: 0px 0px 15px 1px rgba(6,166,0,1);
    -moz-box-shadow: 0px 0px 15px 1px rgba(6,166,0,1);
    box-shadow: 0px 0px 15px 1px rgba(6,166,0,1);
}

.twitch-light{
    background: #6441a4;
    border: 1px solid #462D73;
    -webkit-box-shadow: 0px 0px 15px 1px rgba(100,65,164,1);
    -moz-box-shadow: 0px 0px 15px 1px rgba(100,65,164,1);
    box-shadow: 0px 0px 15px 1px rgba(100,65,164,1);
}
#response-notifier {
    font-family: 'Play', sans-serif;
    position: fixed;
    padding: 25px;
    background-color: #333;
    right: 10px;
    bottom: -500px;
    opacity: 0;
}
#response-notifier.successful {
    border: 1px solid #046E00;
    border-bottom: 5px solid #046E00;
}
#response-notifier.failure {
    border: 5px solid rgba(227, 37, 36, 1);
}
#response-notifier.prepared {
    bottom: 10px;
    opacity: inherit;
}
#response-notifier .notification {
    color: #fff;
}
.barker-tab{
  padding: 10px 15px;
  margin: 2% 2% 0 2%;
  background: #888;
  display: inline-block;
  color: #BFBFBF;
  border-top: 3px solid #999;
  border-left: 3px solid #eee;
  border-bottom: 3px solid #222;
  border-right: 3px solid #222;
  display: inline-block;
  font-family: 'Play', sans-serif;
  cursor: pointer;
  min-width:  130px;
}
.barker-tab-label{
  display: inline-block;
  float: left;
}
.barker-tab-light{
  background-color: #555;
  height: 6px; width: 6px;
  margin: 4px;
  margin-left: 15px;
  padding: 2px;
  float: left;
  border: 2px solid #777;
}
.barker-tab-light-highlight{
  height: 3px; width: 3px; background-color: rgba(255, 255, 255, .4);
}
.barker-tab.barker-tab-active{
  background: #555;
  color: #ededed;
  text-shadow: 0px 0px 8px rgba(255, 255, 255, 0.8);
  border-bottom: 3px solid #999;
  border-right: 3px solid #eee;
  border-top: 3px solid #222;
  border-left: 3px solid #222;
}
/* li .barker-tab-light{
  background: #00ff00;
  border: 2px solid #06A600;
  -webkit-box-shadow: 0px 0px 25px 1px rgba(6,166,0,1);
  -moz-box-shadow: 0px 0px 25px 1px rgba(6,166,0,1);
  box-shadow: 0px 0px 25px 1px rgba(6,166,0,1);
} */
li.active .barker-tab-light.global-tab-light{
    background: #00C3FF;
    border: 2px solid #009CCC;
    -webkit-box-shadow: 0px 0px 15px 1px rgba(0,195,255,1);
    -moz-box-shadow: 0px 0px 15px 1px rgba(0,195,255,1);
    box-shadow: 0px 0px 15px 1px rgba(0,195,255,1);
}
li.active .barker-tab-light.affiliate-tab-light{
    background: #35FF02;
    border: 2px solid #06A600;
    -webkit-box-shadow: 0px 0px 15px 1px rgba(42,204,1,1);
    -moz-box-shadow: 0px 0px 15px 1px rgba(42,204,1,1);
    box-shadow: 0px 0px 15px 1px rgba(42,204,1,1);
}
li.active .barker-tab-light.twitch-tab-light{
    background: #9B65FF;
    border: 2px solid #6541A6;
    -webkit-box-shadow: 0px 0px 15px 1px rgba(155,101,255,1);
    -moz-box-shadow: 0px 0px 15px 1px rgba(155,101,255,1);
    box-shadow: 0px 0px 15px 1px rgba(155,101,255,1);
}
li.active .barker-tab-light.youtube-tab-light{
    background: #FF1E25;
    border: 2px solid #CC181E;
    -webkit-box-shadow: 0px 0px 15px 1px rgba(255,30,37,1);
    -moz-box-shadow: 0px 0px 15px 1px rgba(255,30,37,1);
    box-shadow: 0px 0px 15px 1px rgba(255,30,37,1);
}

.barker-tab-active .barker-tab-light .barker-tab-light-highlight{
    background-color: rgba(255, 255, 255, .8);
 }

.barker-tab-light{
  background-color: #444;
  /* height: 6px; width: 6px; */
  height: 14px; width: 14px;
  margin: 4px;
  margin-left: 15px;
  padding: 2px;
  float: left;
  border: 2px solid #777;
}
.btn-alertmaker,
.btn-launch,
.btn-big{
  border-top: 3px solid #999;
  border-left: 3px solid #eee;
  border-bottom: 3px solid #222;
  border-right: 3px solid #222;
}
.barker-tab-active{
  background: #444;
  color: #ededed;
  text-shadow: 0px 0px 8px rgba(255, 255, 255, 0.8);
  border-bottom: 3px solid #999;
  border-right: 3px solid #eee;
  border-top: 3px solid #222;
  border-left: 3px solid #222;
}
.barker-tab-active .barker-tab-light{
  background: #00ff00;
  /*border:  1px solid rgba(6,166,0, .5); */
  -webkit-box-shadow: 0px 0px 15px 1px rgba(6,166,0,1);
  -moz-box-shadow: 0px 0px 15px 1px rgba(6,166,0,1);
  box-shadow: 0px 0px 15px 1px rgba(6,166,0,1);
}

#popout-alert-barker{
    cursor: pointer;
    margin-left: 0;
}

/* THEME */
#updating-your-theme{
   width: 400px;
   position: fixed;
   bottom: 15px; right: 15px;
   overflow: hidden;
   display: none;
}
#updating-your-theme h4{
  color: #fff;
  text-shadow: 1px 1px #000;
}
@-webkit-keyframes  grow {
  from {
    width: 0%
  }
  50% {
    width: 50%
  }
  to {
    width: 100%
  }
}
#load-container{
  width: 100%;
  background-color: #333;
  border: 1px solid #fff;
}
#load-box.animating{
  height: 25px; width: 0;
  background-color: #00ff00;
  -webkit-animation-duration: 3s;
  -webkit-animation-name: grow;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
}
/*     */

/* OVERRIDING BS */
.nav-tabs>li, .nav-pills>li{
    width: 20%;
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover,
.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover{
    background: #555;
    color: #ededed;
    text-shadow: 0px 0px 8px rgba(255, 255, 255, 0.8);
    border-bottom: 3px solid #999;
    border-right: 3px solid #eee;
    border-top: 3px solid #222;
    border-left: 3px solid #222;
}
.nav-tabs>li>a, .nav-pills>li>a{
    cursor: default;
    border: 1px solid #ddd;
    /* border-bottom-color: transparent; */
    /* padding: 10px 15px; */
    /* margin: 2% 2% 0 2%; */
    background: #888;
    display: inline-block;
    color: #eee;
    border-top: 3px solid #999;
    border-left: 3px solid #eee;
    border-bottom: 3px solid #222;
    border-right: 3px solid #222;
    display: inline-block;
    font-family: 'Play', sans-serif;
    width: 100%;
    text-align: center;
}
.nav-tabs>li>a:hover,
.nav-pills>li>a:hover,
.nav-tabs>li>a:focus,
.nav-pills>li>a:focus{
    background: #888;
    cursor: pointer;
    border-top: 3px solid #999;
    border-left: 3px solid #eee;
    border-bottom: 3px solid #222;
    border-right: 3px solid #222;
    color: #ededed;
    text-shadow: 0px 0px 8px rgba(255, 255, 255, 0.8);
}
.nav>li>a,
.nav-pills>li>a{
    padding: 0;
    margin-bottom: 1px;
    border-radius: 0px;
}
.main-nav-tabs>li>a{
    padding: 8px 0;
}

/* DASHBOARD */
.active-theme-text{
    color:  #00ff00;
}
.theme-item{
    background: #fff;
}
.dashboard-content{
    /*margin-top: 50px;*/
    width: 100%;
}
.bot-overview{
    width: 100%; height: 150px;
    background-color: #808080;
    padding: 15px;
}
/*.bot-image{
    display: inline-block;
    padding-right: 20px;
    border-right: 1px solid #333;
    width: 80%; margin-left: 10%;
    border-radius: 50%;
    background-image: url(../img/barker.jpg);
}
.bot-image img{
    height: 100%;
}*/
#nav-header{
    width: 100%;
    height: 150px;
    border-bottom: 5px solid rgba(227, 37, 36, 1);
    text-align: center;
}
.barker-title{
    float: left;
    font-size: 30px;
    color: #eee;
    font-family: 'Play', sans-serif;
}
.barker-title a{
    color: inherit;
}
.barker-title a:link{
    text-decoration: none;
}
.command-center{
    min-height: 250px;
    /*margin-top: 25px;*/
    /*background: #eee;*/
    width: 100%;
    position: relative;
}
#command-nav{
/*    height: 100%;*/
    width: 10%;
    background-color: #222;
    float: left;
}
#command-nav ul,
#command-nav li{
    width: 100%;
    text-align: center;
    font-size: 12px;
}
#command-nav li{
    color: #ededed;
    padding: 25px 15px;
    cursor: pointer;
    transition: .15s all;
}
#command-nav li i{
    font-size: 40px;
    display: block;
}
#command-nav li:hover{
    background-color: #ededed;
    color: #333;
}
#command-nav h1{
    font-size: 24px;
    border-bottom: 1px solid #eee;
}
#command-content{
    width: 90%;
    /* overflow-y: auto; */
    float:left;
}
.command-section{
    min-height: 750px;
    background-color: #ccc;
    position: relative;
/*    display: none;
    opacity: 0;*/
}
.active{
    display: block;
    opacity: 1;
}
#command-nav .active{
    background: #fff;
    color: #333;
}

#create-theme-wrapper{
    display:  none;
    margin-bottom:  15px;
    height:  85px;
}
#create-theme-btn{
    margin-bottom:  15px;
}
#edit-theme-form{
    position: fixed;
    z-index: 999;
    background-color: #ccc;
    padding: 10px;
    width: 50%;
    left: 25%;
    min-height:  180px;
    display:  none;
}
#theme-splash{
    position:  fixed;
    left: 0; top: 0;
    height:  100%; width:  100%;
    background: rgba(0,0,0,.7);
    z-index: 950;
    display:  none;
}
#delete-theme{
    margin-top:  15px;
}
.affiliate-transactions-table{
    width: 100%;
    table-layout: auto;
}
.affiliate-transactions-table th,
.affiliate-transactions-table td{
    /*padding: 10px;*/
}
table.affiliate-transactions-table>tbody>tr>td{
    font-size: 14px;
    border-top: none;
}
.affiliate-transactions-table tbody:nth-child(odd){
    background-color: rgba(0,0,0,.07);
}
.affiliate-transactions-table tbody:hover{
    background-color: #f5f5f5;
}
.affiliate-transactions-table thead{
    background: #222;
    color: #ededed;
}
.message-column{
    width: 70%;
}
.btn-bark{
    width: 100px !important;
    /*color: #00A846 !important;*/
    background: none !important;
    border: none;
/*-webkit-box-shadow: 2px 2px 0px 0px rgba(0,0,0,0.25);
-moz-box-shadow: 2px 2px 0px 0px rgba(0,0,0,0.25);
box-shadow: 2px 2px 0px 0px rgba(0,0,0,0.25);*/
}
.notified{
    border-bottom: 2px solid #00A846;
    color: #00A846;
}
.not-notified{
    border-bottom: 2px solid rgba(227, 37, 36, 1);
    color: rgba(227, 37, 36, 1);
}
.btn-bark:hover{
    color: #3E5D8C;
}
.btn-launch,
.btn-test,
.btn-prefab,
.btn-alertmaker{
    float: left;
    font-size: 18px;
}
.btn-alertmaker{
    margin: 0 10px;
}
.btn-test{
    margin-bottom: 15px;
}
.btn-active{
    background-color: #3E5D8C;
    color: #fff;
}
.description{
    font-size: 12px;
    color: #888;
    font-style: italic;
}
.tag-list{
    position: absolute;
    right: 5px;
    bottom: 0px;
    width: 180px;
    text-align: right;
}
.half{
    width: 50%;
    display: inline-block;
}
.full{
    width: 100%;
    display: inline-block;
}
.panel-default>.panel-heading {
    color: #f5f5f5;
    background-color: #333;
    border-color: #ddd;
}
.settings-title{
    display:inline-block;
    margin: 0;
    line-height: 53px;
}
.settings-type-title{
    padding: 0;
    border-bottom: 2px solid #ccc;
    margin-bottom: 15px;
}
.settings-table{
    margin-top: 50px;
}
.settings-table-row{
    margin: 15px 0;
}
.settings-table-left,
.settings-table-left-50{
    float: left;
    line-height: 40px;
    width: 21.568%;
}
.settings-table-right,
.settings-table-right-50{
    float: left;
    width: 78.432%;
}
.settings-table-right,
.settings-table-left{
    padding: 15px;
}
.ticker-row .settings-table-right,
.ticker-row .settings-table-left{
    padding: 0px;
}
.settings-table-left-50,
.settings-table-right-50{
    width: 49%;
}
.settings-table-left-50 label,
.settings-table-right-50 label{
    width: 90%;
    margin-left: 5%;
    border-bottom: 1px solid #333;
    height: 50px; line-height: 50px;
}
#font-stage{
    width: 100%;
    height: 200px;
    background: #fff;
    border: 1px solid #333;
    display: table;
    overflow: hidden;
}
#font-stage-text{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    /*-webkit-text-stroke: 1px black;*/
    text-shadow: 0px 0px 1px #000, 0px 0px 0px #000, 0px 0px 1px #000, 0px 0px 1px #000, 0px 0px 2px #000;
/*     text-shadow:
        0px 0px 1px #000, 
        0px 0px 2px #000, 
        0px 0px 3px #000, 
        0px 0px 4px #000, 
        0px 0px 5px #000; */
    font-size: 16px;
}
#customize-animation{
    position: relative;
}
#animate-demo-canvas{
/*     position: absolute;
    top: 15px;
    left: 250px; */
    display:  inline-block;
    background-color: #fff;
    border: 1px solid #333;
    padding: 0 25px;
}
.alert-action{
    background-color: #444;
}
.account-statuses{
    float:  left;
    /* background-color: #444; */
/*     border-top: 3px solid #999;
    border-left: 3px solid #eee;
    border-bottom: 3px solid #222;
    border-right: 3px solid #222; */
}
.nav-group-right{
    float:  right;
}
.alert-action .btn-launch,
.btn-big{
    padding: 12px 0;
}
.widget-url,
.widget-launch,
.input-big{
    padding: 15px;
}
.widget-url:hover > .blurred-text{
  filter: blur(0px);
}
.widget-launch{
    background-color: #1F9501;
    color: #fff;
    text-align: center;
    cursor: pointer;
}
.input-100{
    width: 100%;
    display: inline-block;
}
.input-90{
    width: 90%;
    float: left;
}
.input-10{
    width: 10%;
    float: left;
}
.text-edit{
    width: 100%;
    padding: 15px;
}
.save-settings{
    text-align: right;
    margin-top: 15px;
}
.expandable{
    padding:  10px 0;
    height: 61px;
    overflow: hidden;
}
.expandable h3 {
    cursor:  pointer;
}
h3.barker-border{
    margin:  0;
    padding:  10px;
    background-color:  #444;
    color: #00ff00;
    border-bottom: 2px solid #444;
}
.expandable h3 span{
    margin-left:  15px;
}
.expand-all{
    text-align: right;
    color: #3E5D8C;
    cursor: pointer;
}
.loading,
.loading-prefab{
    border: none;
}
.save-successful,
.save-error{
    font-size: 16px;
    color: #5cb85c;
    border: none;
    background: transparent;
    text-decoration: none;
    font-style: italic;
    font-weight: bold;
}
.save-error{
    color:  #FF1414;
}
.loading:hover,
.loading-prefab:hover,
.prefab-save-successful:hover{
    background-color: transparent;
    border: none;
    text-decoration: none;
    cursor: default;
}
.account-type{
    margin-top:  0;
    font-size:  16px;
    font-family: 'Play', sans-serif;
}
.account-type .description {
    display:  inline-block;
}
#user-store-key,
.account-type{
    width: 80%;
    display: inline-block;
    float: left;
}
#generate-key,
.connect-account{
    padding: 19px;
    margin: 0;
    width: 20%;
    font-size: 16px;
    float: left;
}
.account-online{
    background-color:  green;
}
.account-offline{
    background-color:  #A60000;
    border-color: #A60000;
}

.value-display{
    font-size: 18px;
    padding: 5px 0;
    margin: 5px 0;
    color: #337ab7;
    font-weight: bold;
    display: inline-block;
    margin-left: 15px;
    font-family: 'Play', sans-serif;
}
.nav-group{
    text-align: right;
    float: right;
}
.slider-group{

}
.account-name{
    display: inline-block;
    margin: 0;
}
.nav-group .btn-settings{
    color: #5bc0de;
}
.nav-group .btn-logout{
    color: #d9534f;
}
.show-alerts-options{
    width: 100%;
}
.show-alerts-options{
    color: #fff;
    font-family: 'Lato', sans-serif;
    float: left;
}
.show-alerts-options span{
    margin-right: 15px;
}
/* FILE MANAGER */
#splash{
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    height: 100%; width: 100%;
    background-color: rgba(0,0,0,.5);
    z-index: 5;
}
#file-upload{
    float: right;
    border-radius: 0;
    width: 200px;
}
.file-section .file{
    width: 175px;
}
.file{
    /*width: 175px;*/
    width: 100%;
    cursor: pointer;
}
.file img{
    /*width: 100%;*/
}
#file-manager{
    position: relative;
    margin: auto;
    min-height: 500px;
    background-color: #ffffff;
    border-radius: 3px;
    z-index: 100;
}
.fm-nav,
#storage-info{
    display: inline-block;
    margin: 10px;
    padding: 10px 20px 0px 20px;
    margin-bottom: 0;
    background: #fff;
    border-bottom: 5px solid #fff;
    cursor: pointer;
}
#storage-info.fm-nav{
    cursor: default;

}
#storage-info.fm-nav:hover{
    border-bottom: 5px solid #fff;
}
.fm-nav-active{
    border-bottom: 5px solid #d9534f;
}
.fm-nav:hover{
    border-bottom-color: #337ab7;
}
.fm-nav i{
    font-size: 32px;
}
.fm-header{
    position: relative;
    padding: 10px 10px 0px 20px;
    /* image courtesy of Carlos Aguilar @ subtlepatterns.com */
    background: #333 url(../img/footer_lodyas.png) repeat center center;
}
.fm-title{
    color: #fff;
    font-family: 'Play', sans-serif;
}
#upload-form{
    position: absolute;
    right: 15px;
    bottom: 40px;
}
#upload-form .success-text{
    height: 34px;
    padding: 10px;
}
.btn-upload{
    background-color: #4cae4c;
    color: #fff;
    float: right;
}
.success-text{
    /*background-color: #3E5D8C;*/
    /*background-color: #3E5D8C;*/
    color: #3E5D8C;
    font-style: italic;
    font-size: 14px;
    opacity: 0;
    display: inline-block;
}
.file-wrapper{
    height: 150px;
    width: 150px;
/*    max-height: 150px;
    max-width: 146px;*/
    overflow: hidden;
    margin-bottom: 15px;
    /*border: 1px solid #555;*/
    display: table;
    position: relative;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}
.file-wrapper i, .file-wrapper img{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    font-size: 42px;
}
.file-wrapper img{
    width: 120px;
    margin: auto;
}
.file-wrapper .toolbar{
    position: absolute;
    height: 20px; width: 100%;
    left: 0; bottom: 0;
    background: rgba(0,0,0,.5);
    color: #fff;
    cursor: pointer;
}
.file-wrapper .preview{
    float: right;
    font-family: 'Play', sans-serif;
    cursor: pointer;
    color: #fff;
    margin-right: 5px;
}
.filename {
    color: #555;
    font-style: italic;
    line-height: 40px;
    overflow: hidden;
}
td .ss-playlist{
    text-align: center;
    font-size: 22px;
}
#audio-files,
#image-files{
    display: none;
    opacity: 0;
    transition: 1s all;
    overflow: hidden;
    overflow-y: auto;
    height: 400px;
}
#image-files .filename,
#image-files .btn-delete{
    text-align: center;
    width: 100%;
}
#audio-files.active-content,
#image-files.active-content{
    display: block;
    opacity: 1;
}
#modal-splash{
    position: fixed;
    height: 100%;
    width: 100%;
    left: 0;
    background: rgba(0,0,0,.7);
    z-index: 100;
    top: 0;
    opacity: 0;
    display: none;
}
#fm-modal,
#mp-modal{
    width: 1100px;
    z-index: 100;
    margin: auto;
    /*margin-top: 100px;*/
    margin-top: -250px;
    max-height: 600px;
    display: none;
}
#mp-modal{
    max-height: 600px;
    height: 600px; 
    background: #fff;
}
#mp-modal .panel-body{
    max-height: 400px;
    overflow-y: scroll;
}
.general-options{
    border-bottom: 1px solid #dddddd;
}
.save-prefab{
    text-align: right;
    min-height: 46px;
}
.btn-create-prefab{
    padding: 6px 12px;
}
.btn-use{
    margin: 15px;
}
a .preview{
    color: #fff;
}
.btn-delete{
    color: rgba(227, 37, 36, 1);
    border: none;
    float: right;
    width: 127px;
}
.btn-delete:hover{
    background-color: inherit;
    text-decoration: none;
    border: none;
}
.alert-customize .form-group{
    float: left;
    margin-right: 35px;
}
.alert-customize label{
    display: block;
}
.prefab-file-select{
    max-width: 150px;
}
.prefab-update,
.prefab-delete{
    min-width: 75px;
}
.prefab-update,
#send-report-button{
    transition: .33s all;
}
.prefab-cell{
    width: 12%;
    display: inline-block;
}
.prefab-cell.prefab-message{
    width: 25%;
}
.prefab-cell, .prefab-cell.prefab-message{
    width: 100%;
}
.prefab-save-successful{
    background: none;
}
.prefab-cell.prefab-action{
    padding: 15px 0;
}
.prefab-cell label{
    width: 100%;
    margin-top: 5px;
}
.prefab-alert{
    width: 33.33333333%;;
    float: left;
    margin: 5px 0;
    padding: 5px;
    border-bottom: 1px solid #ddd;
    position: relative;
}
.prefab-alert:nth-child(odd){
    background-color: #dedede;
}
.prefab-alert:hover{
    background-color: #ededed;
}
.prefab-preview img{
    width: 60%;
    margin: 5% 20%;
}
.prefab-edit-container{
    height: 0;
    overflow: hidden;
}
.prefab-focus{
    position: absolute;
    z-index: 9999; 
    margin-left: 15%;
    width: 70%;
    top: 5%;
    /* transition: .5s all linear; */
    background: #eee;
    -webkit-box-shadow: 3px 3px 15px 5px rgba(0,0,0,0.4);
    -moz-box-shadow: 3px 3px 15px 5px rgba(0,0,0,0.4);
    box-shadow: 3px 3px 15px 5px rgba(0,0,0,0.4);
}
.prefab-text{
    text-align: center;
    font-size: 16px;
    color: #fff;
    text-shadow: 0px 0px 1px #000, 0px 0px 0px #000, 0px 0px 1px #000, 0px 0px 1px #000, 0px 0px 2px #000;
}
.filter-form{
    float: right;
    width: 100%;
}
.selected-tags{
    float: left;
}
.filter-preview{
    margin-top: 15px;
}
.filter-form input[name="filter_tags"],
.input90{
    width: 90%;
    float: left;
    border-radius: 0;
}
.filter-form .btn,
.btn10{
    width: 10%;
    float: left;
}
/* .nav-pills>li>a {
    border-radius: 0px;
    background: #fff;
} */
/* .nav-pills>li.active>a, 
.nav-pills>li.active>a:focus, 
.nav-pills>li.active>a:hover {
    background-color: #5bc0de;
} */

.group{
    height: 150px;
    display: table;
    position: relative;
    padding: 1%;
}
.group-text{
    height: 100%; width: 100%;
    display: table-cell;
    background: rgba(0,0,0,.3);
    vertical-align: middle;
    text-align: center;
    font-weight: 600;
    color: #fff;
    font-size: 18px;
    text-shadow: .5px .5px .5px #000000;
    cursor: pointer;
}
.group-text span{
    color: #4cae4c;
}
.prefab-table{
    height: 280px;
    margin-bottom: 10px;
    overflow-y: auto;
}
.prefab-table table{
    font-size: 12px;;
}
.prefab-table tr{
    cursor: pointer;
}
.prefab-list{
    position: absolute;
    height: 500px; width: 90%; 
    left: 5%; top: 0%;
    opacity: 0; display: none;
    background: #fff;
    z-index: 999;
}
.prefab-list .well{
    height: 100%;
}
.btn-add-prefabs{
    width: 150px;
}
.group-controls{
    opacity: 0;
    transition: .3s all;
    position: absolute;
    left: 15px;
    bottom: 15px;
}
.group:hover .group-controls{
    opacity: 1;
}
.active-group{
    position: absolute;
    left: 15%;
    width: 70%;
    z-index: 99;
    background-color: #fff;
}
.active-group .group-controls{
    opacity: 1;
}
.group-prefab-list{
    display: none;
}
.group-prefab-list table{
    margin-bottom: 35px;
    font-size: 12px;
}
.btn-remove-prefab{
    min-width: 110px;
}
.splash{
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 88;
    background: rgba(0,0,0, .5);
    opacity: 0; display: none;
}
#chat-log{
    height: 500px;
    max-height: 500px;
    overflow-y: auto;
    background: #fff;
    padding: 15px;
}
#chat-log p{
    margin-bottom: 15px;
}
.btn-clearchat{
    margin: 1em 0;
    color: #fff;
    background: #222;
}
#chat-barker h2{
    margin-top: 0;
    float: left;
}
.command-output{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 0px;
}

.command-output.view-full{
    white-space: unset;
}
.youtube-text{
    color: #FF0000;
    font-weight: bold;
    z-index: 1000;
}
.twitch-text{
    color: #6441a4;
    font-weight: bold;
    z-index: 1000;
}
.sub-icon{
    color: gold;
}
.mod-icon{
    color: #34B964;
}
.chat-icon{
    text-shadow: 0px 0px 1px #000, 0px 0px 0px #000, 0px 0px 1px #000, 0px 0px 1px #000, 0px 0px 2px #000;
}
.chat-icon-legend .chat-icon{
    margin-left: 20px;
}
.chat-icon:nth-child(1){
    margin-left: 0px;
}
/******************/

@keyframes pulse{ 
  50% { background-color: rgba(0,200,30, .3); };
}
@keyframes pulse-opacity{ 
  50% { opacity: .3; };
}

.file-pulse,
.selected-pulse{
  animation: pulse 1s ease-out infinite;
}
.file-selected,
.prefab-selected{
    background-color: rgba(0,200,30, .1) !important;
    /*transition: .5s all;*/
}
.icon-pulse{
    animation: pulse-opacity 1s ease-out infinite;
}
#tracker-wrapper,
#chat-wrapper{
    margin: 2% 0;
    padding: 2%;
    width: 92%;
    background-color: #444;
    position: relative;
}
#chat-wrapper {
    display: flex;
    flex-direction: column;
    margin: 0;
    width: 100%;
    height: 100%;
}
#chat-filter,
#chat,
#chat-message{
    flex: 1;
    margin: 0;
}
#chat {
    background-color: #fff;
    flex-grow: 1;
    overflow: auto;
    list-style: none;
}
#chat .chat-message {
    margin: .5em 0;
}
#tracker-content{
    /* display: table; */
    background-color: #fff;
    padding: 15px; margin: 5px;
    max-height: 500px; min-height: 500px; 
    width: 99%;
    font-size: 18px;
    border-bottom: 3px solid #999;
    border-right: 3px solid #eee;
    border-top: 3px solid #222;
    border-left: 3px solid #222;
    overflow-y: auto;
}
#tracker-name span.time-since{
    float: right;
    color: #888;
}
#tracker-type,
#tracker-action{
    width: 20%;
}
#tracker-name{
    width: 50%;
}
#tracker-action{
    text-align: right;
}
.tracker-pane{
    display: inline-block;
    font-family: 'Play', sans-serif;
    border-bottom: 1px solid #eee;
    display: table-cell;
}
.tracker-message{
    width: 100%;
    font-size: 22px;
    text-align: center;
    color: #B3B3B3;
    font-family: 'Play', sans-serif;
}
.sub-plan {
    display: block;
    font-size: 14px;
    font-weight: 600;
    padding-left: 20px;
}
.twitch-purple{
    color: #6441a4;
}
.markee-green{
    color: #1F9501;
}
.tracker-row,
.ticker-row{
    display: table;
    width: 100%;
}
.tracker-message.user-message{
    text-align: left;
    margin-bottom: 20px;
}
.well-dark{
    background-color: #e3e3e3;
}
#ticker-create-form{
    height: 0px;
    overflow: hidden;
    transition: .5s all linear;
}
#ticker-create-form.form-open{
    height: 650px;
}

.ticker-entry input[type="text"]{
/*     background: none;
    box-shadow: none;
    border: none; */
}
.ticker-entry input[type="text"]:focus{
    background: #fff;
}
.ticker-entry input[name="title"]{
    font-size: 26px;
}
.ticker-row-message{
    border: 1px solid #888;
    margin-bottom: 15px;
    margin-top: -8px;
}
.ticker-row-title > input{
    font-family: 'Play', 'Lato', sans-serif;
}
.ticker-collapse{
    height: 0;
    overflow: hidden;
}
.edit-ticker-form-open{
    height: 350px;
    transition: .5s all linear;
}
.preview-wrapper{
    width: 100%;
    margin-bottom: 15px;
}
.ticker-preview{
    padding: 10px 0;
}
.ticker-entry .loading{
    min-height: 34px;
}
.btn-ticker-detail,
.btn-ticker-delete{
    margin-right: 15px;
}
.about-tickers{
    margin-top:  15px;
    padding: 15px;
    border: 1px dashed black;
    background: #e3e3e3;
    display:  none;
}
.about-tickers h4{
    font-weight: bold;
}
.ticker-variables{
    padding: 15px;
}
.ticker-variables p{
    padding: 5px 0;
}
.ticker-variables p span,
.ticker-example span{
    padding: 5px;
    background-color: #fff;
    font-style: italic;
    font-weight: bold;
}
.ticker-example{
    font-weight: bold;
}