/*
Connection Card Base PROFILE Styles 
New v1.0.6
Contains all base styles to be used in profile only
*/


/*************************************
/****    LEFT SIDE NAVIGATION ********
/************************************/

/* The side navigation menu */
.sidenav {
	min-height: 100vh;
    height:100vh; 
    width: 250px; 
    position: absolute; 
    z-index: 1;
    top: 0; 
    left: 0;
    background-color: #343a40!important;
    overflow-x: visible;
    transition: 0.5s; 	
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 14px;
    color: white;
    display: block;
    transition: 0.3s;
}

.sidenav a:hover {
    color: #C7C7C7;
}
	
.sidenav-header {
	text-align: center;
}

.sidenav-header p {
	color: white;	
	font-size: 12px;
	padding-top: 5%
}

.sidenav-header a{
	font-size:12px;
	display:inline;
	padding:0;
}

.sidenav-open {
	font-size: 40px;
	width: 80px;
}	

/* Dropdown menu and elements included */
.card-header{
	border: none;
	border-bottom: 1px solid #E6E6E6;
}

.card {
	border-radius: 0px;
	background-color: white;
	text-decoration: none;
	border: none;
}
.card-header:hover {
	background-color: #EDEDED;
}

.cc-nav-btn{
	color: #404040;
}
.cc-nav-btn:hover {
	color: #404040;
	text-decoration: none;
}

.card-body a {
	padding: 2px;
	color:#000000;
}
	
/**********************************
/******     PAGE MAIN CONTENT *****
/********************************/

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
    transition: margin-left .5s;
	margin-left:100px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
}

/************************************
/*******    PAGE / VIEW    *********
/********************************* */

/* Page / View Specific - Across the board  */

.cc-page-wrap {
	max-width: 150vh;
	margin-left:180px;
}

.cc-page-header {
	border-bottom: 1px solid #CECECE;
	margin-bottom: 15px;
	padding: 20px;
	padding-right: 0px;
	font-family: Verdana, Arial, Helvetica, sans-serif; 
}

.cc-page-header h1{
	font-size: 30px;
}

.cc-page-header p{
	font-size: 12px;
}

/* INPUT AND SELECT BOX ADJUSTMENTS FOR MODALS */
.modal input, .modal select, .modal textarea{
	padding: 10px;
	margin: 5px;
	margin-left: 10px;
	margin-right: 10px;
	width: 95%;
}

/* SELECT BOX FIX FOR MAC CHROME */
.modal select{
    -webkit-appearance: none;
}

/* Green Add New Button */
.cc-new-btn {
	font-family: "Helvetica";
	font-size: 14px;
	background-color: #3BBC31;
	padding: 9px;
	color: #F4F4F4;
	border: 1px solid #2AB740;
	border-radius: 4px;
	float:right;
}

/**********************************
/*****      FOOTER      ***********
/********************************/	

#main {
	min-height: 90vh;
	padding-bottom: 100px;
	position: relative;
}

.footer {
	bottom: 0;
	font-size: 11px;
	height: 150px;
	color: #848484;
	border-top: 1px solid #D3D3D3;
	text-align: center;
	margin-left: 250px;
	
}
.footer-btns a {
	color: black;
	font-size: 13px;
	text-decoration: none;
}

/*******************************
/*****  VIEW _ HOME MENU  *****
/*****************************/

.sectionheader {
	
	font-size: 24px;
	font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
	padding: 8px;
	font-weight: 500;
	color: #353535;
}

.sectioncontent {
	color: #353535;
	text-align: center;
	padding: 10px;
	padding-top: 20px;
	background-color: #F5F5F5;
	min-height: 140px;
	max-height: 140px;
	width: 200px;
	float: left;
    display: inline;
    margin-left: 10px;
    margin-right: 10px;
	font-size: 20px;
	font-weight: 500;
	font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
}

.sectioncontent a{
	color:#000000;
	text-decoration:none;
}

.sectioncontent:hover {
	background-color: #1060DC;
	-webkit-transition: background .2s;
	color: white;
}

.sectioncontentright {
	font-size: 18px;
	font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
}

.line {
	border: solid #F5F5F5 1px;
	marign: 0;
}

	
/**********************************
/*****    LOADING SPINNER  *******
/********************************/	

.cc-loading-spinner {
	display: none;
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    position: absolute;
	left: 50%;
  	top: 50%;
  	z-index: 1000;
  	width: 150px;
  	height: 150px;
  	margin: -75px 0 0 -75px;;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
	
.cc-loading-overlay {
    background: #e9e9e9;  
    display: none;       
    position: absolute;   
    top: 0;              
    right: 0;               
    bottom: 0;
    left: 0;
    opacity: 0.5;
	min-height: 100vh;
	min-width: 100vh;
	z-index:20000;
}

/* BEAN STATUS MESSAGE STYLES
Also duplicated in cc_kiosk_styles.css
Also duplicated in ccnew_base_styles.css
*/

.BeanStatusMessage{
	width:400px; 
	padding:10px;
	font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
}

.BeanStatusMessageTopAlert{
	width:100%; 
	margin:0;
	padding:10px;
	font-size:14px;
	text-align:center;
	font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
}

.BSM-Error{
	background:#ffcccc; 
	border:1px solid #cc0000;
}

.BSM-Success{
	background:#ccffcc; 
	border:1px solid #00cc00;
}

.BSM-Alert{
	background:#ffffcc; 
	border:1px solid #aaaa00;
}

.BSM-Message{
	background:#cccccc; 
	border:1px solid #333333;
}

.BSM-Warning{
	background:#ffddcc; 
	border:1px solid #cc0000;
}

/*************************************
/***    TABLE STYLES     *************
/********************************** */

/* Table Style 1 - table_list */

table.table_list{
	font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	padding:0px;
	font-size:1em;
	border-collapse:collapse;	
}

table.table_list tr{
	border-top:1px solid #eaeaea;
}

table.table_list tr:nth-child(even){
	background:#ffffff;
}

table.table_list tr:nth-child(odd){
	background:#fcfbf7;	
}

table.table_list tr:hover{
	background:#99c1dd;
}

table.table_list tr:first-child{
	border-top:0;	
}

table.table_list th{
	font-weight:bold;
	background-color:#F2EEDB;
	border-top:1px solid #000000;
	border-bottom:1px solid #000000;
	min-width:50px;
	text-align:left;
}

table.table_list td{
	padding:5px;
	height:40px;
}

.table_list_smaller{
	font-size:0.9em;
}

table.table_list{
	
}

table.table_list input[type="checkbox"]:before{
    position: relative;
    display: block;
    width: 20px;
    height: 20px;
    border: 1px solid #808080;
    content: "";
    background: #FFF;
}
table.table_list input[type="checkbox"]:after{
    position: relative;
    display: block;
    left: 2px;
    top: -20px;
    width: 16px;
    height: 16px;
    border-width: 1px;
    border-style: solid;
    border-color: #B3B3B3 #dcddde #dcddde #B3B3B3;
    content: "";
    background-image: linear-gradient(135deg, #B1B6BE 0%,#FFF 100%);
    background-repeat: no-repeat;
    background-position:center;
}
table.table_list input[type="checkbox"]:checked:after{
    background-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAQAAABuW59YAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAB2SURBVHjaAGkAlv8A3QDyAP0A/QD+Dam3W+kCAAD8APYAAgTVZaZCGwwA5wr0AvcA+Dh+7UX/x24AqK3Wg/8nt6w4/5q71wAAVP9g/7rTXf9n/+9N+AAAtpJa/zf/S//DhP8H/wAA4gzWj2P4lsf0JP0A/wADAHB0Ngka6UmKAAAAAElFTkSuQmCC'), linear-gradient(135deg, #B1B6BE 0%,#FFF 100%);
}
table.table_list input[type="checkbox"]:disabled:after{
    -webkit-filter: opacity(0.4);
}
table.table_list input[type="checkbox"]:not(:disabled):checked:hover:after{
    background-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAQAAABuW59YAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAB2SURBVHjaAGkAlv8A3QDyAP0A/QD+Dam3W+kCAAD8APYAAgTVZaZCGwwA5wr0AvcA+Dh+7UX/x24AqK3Wg/8nt6w4/5q71wAAVP9g/7rTXf9n/+9N+AAAtpJa/zf/S//DhP8H/wAA4gzWj2P4lsf0JP0A/wADAHB0Ngka6UmKAAAAAElFTkSuQmCC'), linear-gradient(135deg, #8BB0C2 0%,#FFF 100%);
}
table.table_list input[type="checkbox"]:not(:disabled):hover:after{
    background-image: linear-gradient(135deg, #8BB0C2 0%,#FFF 100%);  
    border-color: #85A9BB #92C2DA #92C2DA #85A9BB;  
}
table.table_list input[type="checkbox"]:not(:disabled):hover:before{
    border-color: #3D7591;
}

.check_col{
	width:40px;
}

table.table_list tr.table_list_selected td{
	border-top:1px solid #eaeaea;
	background:#ffeeaa;	!important
}	

.hidden{
	display:none;
}

/*<< end table style 1 */

/* Table Style 2 - simple-table */

.cc-simple-table {
	background-color: white;
	font-family: "Helvetica";
	color: #1F1F1F;
	min-width: 100%;
	max-width: 100%;
	border-spacing: 0;
}

.cc-simple-table-hidden{
	display:none;	
}

.cc-simple-table table, .cc-simple-table th, .cc-simple-table td {
	border: solid 1px #E5E5E5;
}

.cc-simple-table th {
	text-align: left;
	background-color: white;
	color: #1F1F1F;
	padding-left: 5px;
	padding: 10px;
}

.cc-simple-table tr:nth-of-type(even) {
	background-color: #F2F2F2;
}
.cc-simple-table tr:nth-of-type(odd) {
	background-color:#FCFCFC;
}

.cc-simple-table td {
	padding-left: 10px;
	height:30px;
} 

.first-col-right tr td:nth-child(1){
	text-align:right;	
}


/*<< end table style 2 */

/* HINT BOXES - Which apply to Table Classes */

.cc-hint-box{
	/*display:none;*/
	visibility:hidden;
}

.cc-simple-table tr div.cc-hint-box{
	background:rgba(33,33,33,0.7);
	border:1px solid #000000;
	display:inline;
	visibility:hidden;
	color:#ffffff;
	width:600px;
	padding:10px;
	margin-left:10px;
	/*position:relative;
	top:0px;
	left:-200px;*/
	position:absolute;
	opacity:0;
	-webkit-transition: opacity 0.5s; /* Safari */
	transition: opacity 0.5s;
}

.cc-simple-table tr:hover div.cc-hint-box{
	/*display:block;*/
	visibility:visible;
	opacity:100;
	-webkit-transition: opacity 0.5s; /* Safari */
	transition: opacity 0.5s;
}