/* --------------------------------------------------------------------
    
DARK THEME

-------------------------------------------------------------------- */      


/* --------------------------------------------------------------------
    
HATCH BRAND, DARK

- GLOBAL THEME COLOR: #00a2ff
- HEADER COLOR: #00497b
- BUTTON COLOR: #005996 TO #00497B
-------------------------------------------------------------------- */      
a,
.admin_nav_container a:hover:not(.active),
.admin_nav_container a.active,
.select_image + label,
#add_channel_modal .select_image + label {
    color:  #00a2ff;
    }  
button[type='submit'],
.admin_settings .mc_inside .select_image + label {
    background: #005996;
    background: -moz-linear-gradient(top,  #005996 0%, #00497b 100%);
    background: -webkit-linear-gradient(top,  #005996 0%,#00497b 100%);
    background: linear-gradient(to bottom,  #005996 0%,#00497b 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#005996', endColorstr='#00497b',GradientType=0 );
    color: #fff;
    }
button[type='submit']:hover,
.admin_settings .mc_inside .select_image + label:hover {
    background: #005996;
    }   
/* ADD BUTTON WITH WHITE CENTER       
.add_button {
    position: relative;
    display: block;
    cursor: pointer;
    width: 12px;
    height: 12px;
    background: #fff;
    margin: 0 0 0 5px;
    } 
.add_button:before {
    content: '█ █ █ █';
    line-height: 10%;
    font-size: 5rem;
    color: #c12177;
    -webkit-mask: url('../images/add_icon.svg') no-repeat;
    mask: url('../images/add_icon.svg') no-repeat;    
    -webkit-mask-position: center center;
    mask-position: center center;
    -webkit-mask-size: 20px 20px;
    mask-size: 20px 20px;    
    display: block;
    background: #c12177;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 50%;
    width: 20px;
    height: 20px;
    }  
*/
.add_button { 
    background: #00a2ff;        
    }
header {
    background-image: none;
    background-color: #00497b;
    }   
.admin_settings .mc_inside .select_image_wrapper .current_image {
    background-image: none;        
    background-color: #00497b;
    color: #fff;
    }   
.admin_settings .mc_inside .select_image_wrapper_bg .current_image {
    background-color: rgba(0,0,0,.15);
    background-image: url(../images/image_icon_404040.svg);    
    }    
.admin_leftside .avatar_container,
.most_active_list li .avatar_container,
.users_table_container tr .avatar_container,
.groups_table_container tr .avatar_container,
.channels_table_container .avatar_container {
    border: 1px solid #00a2ff;
    }        
.admin_nav_container a.active {
    border-right: 5px solid #00a2ff;
    }             
.admin_nav_container :not(.active) .icon {
    background: #737373;
    }                            
.members label,    
.admin_nav_container .active .icon,
.admin_nav_container :not(.active) :hover .icon,
table .toggle:hover:before {
    background: #00a2ff;
    }   
.module_container .heading {
    background: #252525;
    }  
    
/* LOGO */

header .logo {
    background-image: url(../images/hatch/hatch_logo-white.png);
    }      

/* MANAGE CONTENT */

.manage_content .add_bar_group .feed_icon {
    background: #00a2ff;
    }        
    
    
    
    
/* --------------------------------------------------------------------
    
RESETS & DEFAULTS

-------------------------------------------------------------------- */      

* {  
    color: #fff;
    font-weight: 300;    
    }  
html, body {
    background: #404040;
    color: #fff;    
    }
.line {
    border-bottom: 1px solid rgba(255,255,255,.15);
    }       
           
     
     
/* --------------------------------------------------------------------
    
HEADER

-------------------------------------------------------------------- */         
    
        

header .settings {
    background: #fff;   
    }        
header input[type='text'] {
    background-color: rgba(255,255,255,0);
    border-left: 1px solid rgba(255,255,255,.3);
    } 
header input[type='text']:focus {
    background-color: rgba(255,255,255,.1);
    border-left: 1px solid rgba(255,255,255,0);    
    }   
header input[type='text']::-webkit-input-placeholder {
    }
header input[type='text']::-moz-placeholder { 
    }
header input[type='text']:-ms-input-placeholder { 
    }
header input[type='text']:-moz-placeholder { 
    }                
header input[type='submit'] {
    background: rgba(255,255,255,.2);
    }  
header input[type='submit']:hover {
    background: rgba(255,255,255,.25);
    }     
header .account .admin_name {
    color: #fff;
    }
    
/* -------MENU FOR HEADER-------- */   
    
.account .toggle:before {
    background: #fff;      
    }     	 
.account .toggle:hover:before {
    background: #fff;              	 
    }    
.account .toggle .onclick-menu-content:before {
    border-bottom: 10px solid #2a2a2a;
    }        
.account .toggle .onclick-menu-content {
    background-color: #2a2a2a;
    }         
header .account .toggle .theme_switch strong {
    color: #fff;
    }  
             
/* --------------------------------------------------------------------
    
ADMIN NAV BAR

-------------------------------------------------------------------- */   
        
    
.admin_leftside {
    background: #252625;
    background: -moz-linear-gradient(left,  #252625 0%, #313130 100%);
    background: -webkit-linear-gradient(left,  #252625 0%,#313130 100%);
    background: linear-gradient(to right,  #252625 0%,#313130 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#252625', endColorstr='#313130',GradientType=1 );
    -webkit-box-shadow: inset -16px 0px 42px -16px rgba(0,0,0,0.1);
    -moz-box-shadow: inset -16px 0px 42px -16px rgba(0,0,0,0.1);
    box-shadow: inset -16px 0px 42px -16px rgba(0,0,0,0.1);      
    }  
li.users_overview .users_icon,
li.messages_sent_overview .messages_sent_icon,
li.views_overview .views_icon {
    background: #fff;
    	}     
li.users_overview .users_change, li.messages_sent_overview .messages_sent_change, li.views_overview .views_change {
    color: #64e800;
    }        		
.admin_nav_container a {
    color: #939393;
    }      	
.admin_nav_container a:hover:not(.active) {
    background: rgba(69,69,69,.3);
    }           
.admin_nav_container a.active {
    background: rgba(69,69,69,.4);
    }    	
  

    
/* --------------------------------------------------------------------
    
ADMIN MAIN

-------------------------------------------------------------------- */     

.admin_main .dashboard_icon,
.admin_main .users_and_groups_icon,
.admin_main .channels_icon,
.admin_main .reports_icon,   	   
.admin_main .app_settings_icon,
.admin_main .manage_content_icon {
    background: #fff;
    }
.admin_main h1 {
    color: #fff;
    font-weight: 100;    
    } 
    
/* --------------------------------------------------------------------
    
CHART MODULE CONTAINERS

-------------------------------------------------------------------- */          	
    	
.module_container {
    background: #2d2d2d;
    /* shadow optional
    -webkit-box-shadow: 0px 0px 28px 4px rgba(0,0,0,0.05);
    -moz-box-shadow: 0px 0px 28px 4px rgba(0,0,0,0.05);
    box-shadow: 0px 0px 28px 4px rgba(0,0,0,0.05);    
    */
    }    	
.module_container .heading {
    font-weight: 200;    
    }       
.module_container .heading .refresh_button {
    background: #7c7c7c;
    }        
.module_container .heading .refresh_button:hover {
    background: #fff;
    }        
.module_container .heading .heading_icon.overall,
.module_container .heading .heading_icon.branding,
.module_container .heading .heading_icon.color_scheme,
.module_container .heading .heading_icon.layout {
    background: #fff;
    }
.module_container.joined_left {
    border-left: 1px solid #4c4c4c;
    }       


/* --------------------------------------------------------------------
    
GLOBAL CHART STYLES

-------------------------------------------------------------------- */           
        	
        	
.ct-label {
    fill: rgba(255,255,255,.4);
    color: rgba(255,255,255,.5);
    }    	
.ct-grid {
    stroke: rgba(255,255,255,.2);
    }    	 		
.chart .change {
    color: #ababab;
    }            


/* --------------------------------------------------------------------
    
MOST ACTIVE BOXES + LISTS

-------------------------------------------------------------------- */          	
       	
       	   	
.most_active_list li {
    border-bottom: 1px solid #4c4c4c;
    }    	
.most_active_list .perc_change .arrow {
    background: #fff;
    }  
    
    
/* --------------------------------------------------------------------
    
USERS & GROUPS PAGE

-------------------------------------------------------------------- */     


.select select {
	background: #5c5c5c;
	/* shadow optional
    -webkit-box-shadow: 0px 0px 28px 4px rgba(0,0,0,0.05);
    -moz-box-shadow: 0px 0px 28px 4px rgba(0,0,0,0.05);
    box-shadow: 0px 0px 28px 4px rgba(0,0,0,0.05);   
    */    	
    }
.select select:hover,
.select select:focus {
	background: #5c5c5c;
    }
.select_arrow {
    background: #fff;
    }

    


/* --------------------------------------------------------------------
    
MENUS FOR TABLES

-------------------------------------------------------------------- */   
    
    
table .toggle:before {
    background: #fff;      
    }     	 
table .toggle .onclick-menu-content:before {
    border-bottom: 10px solid #2a2a2a;
    }        
table .toggle .onclick-menu-content {
    background-color: #2a2a2a;
    }       
    
    
/* --------------------------------------------------------------------
    
USERS TABLE

-------------------------------------------------------------------- */      
    	
    	
/* Zebra striping */
.users_table_container tbody tr:nth-of-type(odd) { 
  background: rgba(255,255,255,.05); 
    }       
.users_table_container td {
    border-top: 1px solid #5c5c5c;       
    border-right: 1px solid #5c5c5c;       
    border-bottom: 1px solid #5c5c5c;      
    }          
.users_table_container th {
    color: #b3b3b3;
    border-right: 1px solid #5c5c5c;
    font-weight: 200;
    }    
.users_table_container th:hover {
    background: rgba(255,255,255,.15);
    }    
.users_table_container tbody tr:hover {
    background: rgba(255,255,255,.15);
    }        
.users_table_container .edit {
    background: #fff;
    }      
.users_table_container .reorder {
    background: #757575;
    }    
.users_table_container .arrow {
    background: #fff;
    }    

    
    
/* --------------------------------------------------------------------
    
GROUPS TABLE

-------------------------------------------------------------------- */      
    	

.groups_table_container h2 a.delete_group {
    color: red;
    }  
.groups_table_container h3 {
    font-weight: 100;
    }    
/* Zebra striping */
.groups_table_container tbody tr:nth-of-type(odd) { 
  background: rgba(255,255,255,.05); 
    }          	
.groups_table_container tbody {
    border-top: 1px solid #b3b3b3;       
    border-bottom: 1px solid #b3b3b3;           
    }    
.groups_table_container tbody tr {
    border-bottom: 1px solid #5c5c5c;
    }   
.groups_table_container tbody tr td[rowspan] {
    border-bottom: 1px solid #b3b3b3;
    }           
.groups_table_container tbody td {
    border-right: 1px solid #5c5c5c;       
    }          
.groups_table_container .desc {
    color: #eee;
    }          
.groups_table_container th {
    color: #b3b3b3;
    border-right: 1px solid #5c5c5c;
    font-weight: 200;     
    }    
.groups_table_container th:hover {
    background: rgba(255,255,255,.15);
    }    
.groups_table_container tbody tr:hover {
    background: rgba(255,255,255,.15);
    }        
.groups_table_container tbody tr:hover td[rowspan] {
    background: #404040;
    }          
.groups_table_container .edit {
    background: #fff;
    }              
.groups_table_container .reorder {
    background: #757575;
    }    
 
    
    
/* --------------------------------------------------------------------
    
ADD GROUP MODAL

-------------------------------------------------------------------- */    
  

#add_group_modal h1 {
    font-weight: 100;
    }   
#add_group_modal .top_wrapper input[type='text'] {
    background: #404040;
    }  
#add_group_modal .top_wrapper input[type='text']::-webkit-input-placeholder, #add_group_modal .top_wrapper input[type='text']:-ms-input-placeholder, #add_group_modal .top_wrapper input[type='text']:-moz-placeholder {
  color: #d7d7d7;
    }    
.members th { 
    background: #fff; 
    color: #000; 
    }
.members td { 
    border-right: 1px solid #5c5c5c;    
    }      
.members td {
    border-top: 1px solid #5c5c5c;    
    }
.members .members_added_container tr:nth-child(1) {
    border-left: 1px solid #5c5c5c;
    }
.members .users_container input[type='text'] {
    background: #404040;
    }      
.members tr .avatar_container {
    border: 1px solid #ddd;
    }
/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {
.members tr { border: 1px solid #ccc; }
.members td { 
		/* Behave  like a "row" */
		border-bottom: 1px solid #eee; 
	}
}  
    

/* --------------------------------------------------------------------
    
ADD USER MODAL

-------------------------------------------------------------------- */    
  

#add_user_modal h1 {
    font-weight: 100;
    } 
.select_image + label {
    background-image: url('../images/user_icon_404040.svg');    
    }  
#add_user_modal .top_wrapper input[type='text'] {
    background: #404040;
    }   
#add_user_modal .top_wrapper input[type='text']::-webkit-input-placeholder, #add_user_modal .top_wrapper input[type='text']:-ms-input-placeholder, #add_user_modal .top_wrapper input[type='text']:-moz-placeholder {
  color: #d7d7d7;
    }    

    
/* --------------------------------------------------------------------
    
MODALS, GLOBAL STYLES

-------------------------------------------------------------------- */   


.modalDialog {
	background: rgba(70,70,70,.8);
    }
.modalDialog > div {
	background: #2a2a2a;
    }
.close {
	color: #aaa;
    }
    
    
    
/* --------------------------------------------------------------------
    
ADMIN SETTINGS

-------------------------------------------------------------------- */           
    

.admin_settings .mc_inside {
    font-weight: 200;
    }    
.admin_settings .mc_inside .layout_blocks .layout_block_top {
    background: #383838;
    }
.admin_settings .layout_blocks .block_1 {
    background: #383838;
    }    
.admin_settings .layout_blocks .block_2 {
    background: #424242;
    }    
.admin_settings .layout_blocks .block_3, .admin_settings .layout_blocks .block_4 {
    background: #424242;
    }         
.admin_settings .layout_blocks .block_5 {
    background: #383838;
    }           
.admin_settings .layout_block .reorder {
    background: #fff;
    }
.admin_settings .color_block_container .color_block[style='background: #2d2d2d'],
.admin_settings .color_block_container .color_block[style='background: #2D2D2D'] {        
    border: 1px solid #ccc;
    }      
.admin_settings .color_block_container input.color_value {
    background: #424242;
    font-weight: 100;    
    }    

    
 /* --------------------------------------------------------------------
    
ADD CHANNEL MODAL

-------------------------------------------------------------------- */    
  

#add_channel_modal h1 {
    font-weight: 100;
    }      
#add_channel_modal .select_image + label {
    background-image: url('../images/image_icon_404040.svg');    
    }   
#add_channel_modal .top_wrapper input[type='text'] {
    background: #404040;
    }     
#add_channel_modal .top_wrapper input[type='text']::-webkit-input-placeholder, #add_channel_modal .top_wrapper input[type='text']:-ms-input-placeholder, #add_channel_modal .top_wrapper input[type='text']:-moz-placeholder {
  color: #d7d7d7;
    }    
   
        
   
  /* --------------------------------------------------------------------
    
CHANNELS TABLE

-------------------------------------------------------------------- */      
    	

.channels_table_container h2 a.delete_group {
    color: red;
    }  
.table_header_container {
    background: #343434;
    } 
.table_header_container .totals {
    background: #282828;
    }    
.table_header_container .add_bar {
    background: #282828;
    }
.table_header_container .refresh_button {
    background: #7c7c7c;
    }  
.table_header_container .refresh_button:hover {
    background: #fff;
    }    	     
.channels_table_container tbody {
    border-top: 1px solid #b3b3b3;       
    border-bottom: 1px solid #b3b3b3;           
    }    
.channels_table_container tbody tr {
    border-bottom: 1px solid #5c5c5c;
    }   
.channels_table_container tbody tr td[rowspan] {
    border-bottom: 1px solid #b3b3b3;
    }        
.channels_table_container tbody td {
    border-right: 1px solid #5c5c5c;       
    }           
.channels_table_container .desc {
    color: #eee;
    }    
.channels_table_container th {
    color: #b3b3b3;
    border-right: 1px solid #5c5c5c;
    }    
.channels_table_container th:hover {
    background: rgba(255,255,255,.15);
    }    
.channels_table_container tbody tr:hover {
    background: rgba(255,255,255,.15);
    }        
.channels_table_container tbody tr:hover td[rowspan] {
    background: #404040;
    }          
.channels_table_container td .avatar_container_channel {
    border: 1px solid #5c5c5c;
    }               
.channels_table_container .reorder {
    background: #757575;
    }          
.channels_table_container .edit {
    background: #fff;
    }       

    
       
   /* --------------------------------------------------------------------
    
REPORTS

-------------------------------------------------------------------- */        


.reports_chart_container .report .ct-grid {
    stroke: rgba(255,255,255,.5);
    }
.reports_chart_container .report .ct-label {
    fill: rgba(255,255,255,1.0);
    color: rgba(255,255,255,1.0);
    }
.reports_chart_container .heading .heading_icon.overall {
    background: #fff; 
    }       
.reports_chart_container .heading .refresh_button {
    background: #7c7c7c;
    } 
.reports_chart_container .heading .refresh_button:hover {
    background: #fff;
    }         
.reports ul.overall_stats li a {
    color: #fff;
    background: rgba(255,255,255,.05);
    }    
.reports ul.overall_stats li a:hover {
    background: rgba(255,255,255,.1);
    }     


    
   /* --------------------------------------------------------------------
    
MANAGE CONTENT

-------------------------------------------------------------------- */        

    
.manage_content .table_header_container .totals {
    border-right: 1px solid #5c5c5c;
    }    
.manage_content .add_bar_group input[type='text'] {
    background: #404040;
    }  
.manage_content .add_bar_group input[type='text']::-webkit-input-placeholder, .manage_content .add_bar_group input[type='text']:-ms-input-placeholder, .manage_content .add_bar_group input[type='text']:-moz-placeholder {
  color: #d7d7d7;
    }        
.manage_content .add_bar_group .select_image + label {
    background-image: url('../images/image_icon_404040.svg');    
    }       
.manage_content .table_header_container .add_bar .feeds_list ul.sub li:not(.lv2) label,
.manage_content .table_header_container .add_bar ul.add_content_group label:not([for=select_image]) {
    background: url('../images/checkbox_404040.svg') no-repeat;    
    }      
.manage_content .table_header_container .add_bar .feeds_list input[type=checkbox] + label:before {
    color: #aaa;
    }    
    
        
   /* --------------------------------------------------------------------
    
MANAGE CONTENT TABLE

-------------------------------------------------------------------- */      
    	

.content_table_container h2 a.delete_group {
    color: red;
    }  	     
.content_table_container tbody {
    border-top: 1px solid #b3b3b3;       
    border-bottom: 1px solid #b3b3b3;           
    }    
.content_table_container tbody tr {
    border-bottom: 1px solid #5c5c5c;
    }         
.content_table_container tbody td {
    border-right: 1px solid #5c5c5c;       
    }           
.content_table_container .desc {
    color: #eee;
    }    
.content_table_container th {
    color: #b3b3b3;
    border-right: 1px solid #5c5c5c;
    }    
.content_table_container th:hover {
    background: rgba(255,255,255,.15);
    }    
.content_table_container tbody tr:hover {
    background: rgba(255,255,255,.15);
    }                
.content_table_container td .avatar_container_channel {
    border: 1px solid #5c5c5c;
    }               
.content_table_container .reorder {
    background: #757575;
    }          
.content_table_container .edit {
    background: #fff;
    }     



.content_table_container .yes {    
    	background-color: #7fdd24;    
    }