/* --------------------------------------------------------------------
    
LIGHT THEME

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


/* --------------------------------------------------------------------
    
HATCH BRAND, LIGHT

- GLOBAL THEME COLOR: #48a6dc
- HEADER COLOR: #48a6dc
- BUTTON COLOR: #48a6dc TO #2589c2
-------------------------------------------------------------------- */      
a,
.admin_nav_container a:hover:not(.active),
.admin_nav_container a.active,
.select_image + label,
#add_channel_modal .select_image + label {
    color:  #48a6dc;
    }   
button[type='submit'],
.admin_settings .mc_inside .select_image + label {
    background: #48a6dc;
    background: -moz-linear-gradient(top,  #48a6dc 0%, #2589c2 100%);
    background: -webkit-linear-gradient(top,  #48a6dc 0%,#2589c2 100%);
    background: linear-gradient(to bottom,  #48a6dc 0%,#2589c2 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#48a6dc', endColorstr='#2589c2',GradientType=0 );
    color: #fff;
    }
button[type='submit']:hover,
.admin_settings .mc_inside .select_image + label:hover {
    background: #48a6dc;
    }        
/* 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: #00a2ff;
    -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: #00a2ff;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 50%;
    width: 20px;
    height: 20px;
    }  
*/  
.add_button { 
    background: #48a6dc;        
    }
header {
    background-image: none;
    background-color: #48a6dc;
    }     
.admin_settings .mc_inside .select_image_wrapper .current_image {
    background-image: none;    
    background-color: #48a6dc;
    color: #fff;
    }   
.admin_settings .mc_inside .select_image_wrapper_bg .current_image {
    background-color: rgba(0,0,0,.05);
    background-image: url(../images/image_icon_dddddd.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 #48a6dc;
    }         
.admin_nav_container a.active {
    border-right: 5px solid #48a6dc;
    }      
.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-color: #48a6dc;
    }   
.module_container .heading {
    background: rgba(69,69,69, .2);
    }      
        
/* LOGO */

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

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

-------------------------------------------------------------------- */   
   
* {  
    font-weight: 400;    
    }  
html, body {
    background: #f0f0f0;
    color: #111;    
    }
.line {
    border-bottom: 1px solid rgba(0,0,0,.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);
    color: #fff;
    } 
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 {
    color: #fff;
    }
header input[type='text']::-moz-placeholder { 
    color: #fff;    
    }
header input[type='text']:-ms-input-placeholder { 
    color: #fff;
    }
header input[type='text']:-moz-placeholder { 
    color: #fff;
    }        
header input[type='submit'] {
    background: rgba(255,255,255,.2);
    color: #fff;
    }  
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 #fff;
    }        
.account .toggle .onclick-menu-content {
    background-color: #fff;
    }    
header .account .toggle .theme_switch strong {
    color: #111;
    }               
             
     
/* --------------------------------------------------------------------
    
ADMIN NAV BAR

-------------------------------------------------------------------- */   
        
    
.admin_leftside {
    background: #fff;
    -webkit-box-shadow: 0px 20px 28px 4px rgba(0,0,0,0.05);
    -moz-box-shadow: 0px 20px 28px 4px rgba(0,0,0,0.05);
    box-shadow: 0px 20px 28px 4px rgba(0,0,0,0.05);
    } 

li.users_overview .users_icon,
li.messages_sent_overview .messages_sent_icon,
li.views_overview .views_icon {
    background: #777;
    	}     
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(0,0,0,.1);
    }           
.admin_nav_container a.active {
    background: rgba(0,0,0,.1);
    }    	
  
    
    
/* --------------------------------------------------------------------
    
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: #000;
    }
.admin_main h1 {
    color: #000;
    font-weight: 200;
    }    
    
/* --------------------------------------------------------------------
    
CHART MODULE CONTAINERS

-------------------------------------------------------------------- */          	
    	
.module_container {
    background: #fff;
    /*
    -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: 300;    
    }       
.module_container .heading .refresh_button {
    background: #aaa;
    }        
.module_container .heading .refresh_button:hover {
    background: #777;
    }        
.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: #111;
    }
.module_container.joined_left {
    border-left: 1px solid #ddd;
    /*
    -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);        
    */
    }       


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

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


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

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

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


.select select {
	background: #fff;
    -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: #fff;
    }
.select_arrow {
    background: #aaa;
    }

    


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

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

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

-------------------------------------------------------------------- */      
    	
    	
/* Zebra striping */
.users_table_container tbody tr:nth-of-type(odd) { 
  background: rgba(255,255,255,.65); 
    }       
.users_table_container td {
    border-top: 1px solid #aaa;       
    border-right: 1px solid #aaa;       
    border-bottom: 1px solid #aaa;      
    }          
.users_table_container th {
    color: #999;
    border-right: 1px solid #aaa;
    font-wdith: 300;
    }    
.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: #aaa;
    }      
.users_table_container .reorder {
    background: #aaa;
    }    
.users_table_container .arrow {
    background: #aaa;
    }    

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

-------------------------------------------------------------------- */      
    	
  
.groups_table_container h2 a.delete_group {
    color: red;
    }    	
.groups_table_container h3 {
    font-weight: 300;
    }       	
.groups_table_container tbody tr:nth-of-type(even) { 
  background: rgba(255,255,255,.65); 
    }          	
.groups_table_container tbody {
    border-top: 1px solid #aaa;       
    border-bottom: 1px solid #aaa;           
    }    
.groups_table_container tbody tr {
    border-bottom: 1px solid #aaa;
    }   
.groups_table_container tbody tr td[rowspan] {
    border-bottom: 1px solid #aaa;
    }           
.groups_table_container tbody td {
    border-right: 1px solid #aaa;       
    }          
.groups_table_container .desc {
    color: #111;
    }          
.groups_table_container th {
    color: #999;
    border-right: 1px solid #aaa;
    font-weight: 300;     
    }    
.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] {

    }        
.groups_table_container .edit {
    background: #aaa;
    }              
.groups_table_container .reorder {
    background: #aaa;
    }    

    
    
/* --------------------------------------------------------------------
    
ADD GROUP MODAL

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

#add_group_modal h1 {
    font-weight: 300;
    }     
#add_group_modal .top_wrapper input[type='text'] {
    background: #eee;
    }  
#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: #777;
    }    
.members th { 
    background: #fff; 
    color: #000; 
    }
.members td { 
    border-right: 1px solid #ccc;    
    }      
.members td {
    border-top: 1px solid #ccc;    
    }
.members .members_added_container tr:nth-child(1) {
    border-left: 1px solid #ccc;
    }
.members .users_container input[type='text'] {
    background: #eee;
    }      
.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 #ccc; 
	}
}  
    

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

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

#add_user_modal h1 {
    font-weight: 300;
    } 
.select_image + label {
    background-image: url('../images/user_icon_dddddd.svg');    
    }  
#add_user_modal .top_wrapper input[type='text'] {
    background: #eee;
    }   
#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: #777;
    }    

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

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


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

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

.admin_settings .mc_inside {
    font-weight: 300;
    }        
.admin_settings .mc_inside .layout_blocks .layout_block_top {
    background: #eee;
    }
.admin_settings .layout_blocks .block_1 {
    background: #eee;
    }    
.admin_settings .layout_blocks .block_2 {
    background: #ccc;
    }    
.admin_settings .layout_blocks .block_3, .admin_settings .layout_blocks .block_4 {
    background: #ccc;
    }         
.admin_settings .layout_blocks .block_5 {
    background: #eee;
    }           
.admin_settings .layout_block .reorder {
    background: #fff;
    }
.admin_settings .color_block_container .color_block[style='background: #ffffff'],
.admin_settings .color_block_container .color_block[style='background: #fff'], 
.admin_settings .color_block_container .color_block[style='background: #FFFFFF'],
.admin_settings .color_block_container .color_block[style='background: #FFF'] {        
    border: 1px solid #ccc;
    }    
.admin_settings .color_block_container input.color_value {
    background: #eee;
    font-weight: 300;    
    }    
    
    
    
 /* --------------------------------------------------------------------
    
ADD CHANNEL MODAL

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

#add_channel_modal h1 {
    font-weight: 300;
    }     
#add_channel_modal .select_image + label {
    background-image: url('../images/image_icon_dddddd.svg');    
    }   
#add_channel_modal .top_wrapper input[type='text'] {
    background: #eee;
    }   
#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: #777;
    }     
        
   
  /* --------------------------------------------------------------------
    
CHANNELS TABLE

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

.channels_table_container h2 a.delete_group {
    color: red;
    }  
.table_header_container {
    background: #e6e6e6;
    } 
.table_header_container .totals {
    background: #ccc;
    }    
.table_header_container .add_bar {
    background: #ccc;
    }
.table_header_container .refresh_button {
    background: #888;
    }  
.table_header_container .refresh_button:hover {
    background: #555;
    } 
.channels_table_container h2 a.delete_group {
    color: red;
    }    	
.channels_table_container h3 {
    font-weight: 300;
    }       
.channels_table_container tbody tr:nth-of-type(even) { 
  background: rgba(255,255,255,.65); 
    }         	     
.channels_table_container tbody {
    border-top: 1px solid #aaa;       
    border-bottom: 1px solid #aaa;           
    }    
.channels_table_container tbody tr {
    border-bottom: 1px solid #aaa;
    }   
.channels_table_container tbody tr td[rowspan] {
    border-bottom: 1px solid #aaa;
    }        
.channels_table_container tbody td {
    border-right: 1px solid #aaa;       
    }           
.channels_table_container .desc {
    color: #111;
    }    
.channels_table_container th {
    color: #999;
    border-right: 1px solid #aaa;
    font-weight: 300;        
    }    
.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] {

    }           
.channels_table_container td .avatar_container_channel {
    border: 1px solid #aaa;
    }               
.channels_table_container .reorder {
    background: #aaa;
    }          
.channels_table_container .edit {
    background: #aaa;
    }       

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

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


.reports_chart_container .report .ct-grid {
    stroke: rgba(0,0,0,.2);
    }
.reports_chart_container .report .ct-label {
    fill: rgba(255,255,255,.4);
    color: #000;
    }
.reports_chart_container .heading .heading_icon.overall {
    background: #000; 
    }       
.reports_chart_container .heading .refresh_button {
    background: #aaa;
    } 
.reports_chart_container .heading .refresh_button:hover {
    background: #777;
    }     
.reports ul.overall_stats li {
    font-weight: 300;
    }    
.reports ul.overall_stats li a {
    color: #111;
    font-weight: 300;    
    background: rgba(0,0,0,.05);    
    }    
.reports ul.overall_stats li a:hover {
    background: rgba(0,0,0,.1);
    } 



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

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

    
.manage_content .table_header_container .totals {
    border-right: 1px solid #aaa;
    } 
.manage_content .add_bar_group input[type='text'] {
    background: #eee;
    }  
.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: #777;
    }          
.manage_content .add_bar_group .select_image + label {
    background-image: url('../images/image_icon_dddddd.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_777777.svg') no-repeat;    
    }      
.manage_content .table_header_container .add_bar .feeds_list input[type=checkbox] + label:before {
    color: #222;
    } 
        
 
   /* --------------------------------------------------------------------
    
MANAGE CONTENT TABLE

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

.content_table_container h2 a.delete_group {
    color: red;
    }  
.content_table_container h2 a.delete_group {
    color: red;
    }    	
.content_table_container h3 {
    font-weight: 300;
    }       
.content_table_container tbody tr:nth-of-type(even) { 
  background: rgba(255,255,255,.65); 
    }         	     
.content_table_container tbody {
    border-top: 1px solid #aaa;       
    border-bottom: 1px solid #aaa;           
    }    
.content_table_container tbody tr {
    border-bottom: 1px solid #aaa;
    }        
.content_table_container tbody td {
    border-right: 1px solid #aaa;       
    }           
.content_table_container .desc {
    color: #111;
    }    
.content_table_container th {
    color: #999;
    border-right: 1px solid #aaa;
    font-weight: 300;        
    }    
.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 #aaa;
    }               
.content_table_container .reorder {
    background: #aaa;
    }          
.content_table_container .edit {
    background: #aaa;
    }          
    
    
    
.content_table_container .yes {    
    	background-color: #7fdd24;    
    }