/* Quickcharge CSS File


Notes: 	- The CSS Rules in this file should only be rules that apply to the Quickcharge Project
*/  

/* QC - Login Page */ 
	html.loginHTML {
		height: 100%;
		text-align: center;	
	}
	
	body.loginBackground {
		height: 100%;
		text-align: center;	
		background: #204a9d;
		background-image: radial-gradient(center center, circle cover, #0f76b1, #204a9d);
		background-image: -o-radial-gradient(center center, circle cover, #0f76b1, #204a9d);
		background-image: -ms-radial-gradient(center center, circle cover, #0f76b1, #204a9d);
		background-image: -moz-radial-gradient(center center, circle cover, #0f76b1, #204a9d);
		background-image: -webkit-radial-gradient(center center, circle cover, #0f76b1, #204a9d);
	}	
	
	span.loginSpanBuffer {
		height: 80%;
		vertical-align: middle;
		display: inline-block;	
		text-align: left;
	}
	
	span.errorSpan {
		text-align: center;
		display: block;
		color: red;
	}

    span.verifySpan {
        text-align: center;
        display: block;
        color: black;
    }
	
	div.loginPanel {
		background: #f5f5f5;
		text-align: left;
		vertical-align: middle;
		display: inline-block;	
		padding: 45px 55px 60px 55px;
	}

    p.logoutMsg {
        font-weight: bolder;
        text-align: center;
        font-family: 'DroidSans-webfont', Fallback, sans-serif !important;
        font-size: 1em;
    }

    p.loginAgain {
        text-align: center;
        font-family: 'DroidSans-webfont', Fallback, sans-serif !important;
        font-size: 1em;
    }

    #loginLogo {
		padding: 10px 5px 13px;
		margin: 0px 0px 0px 85px;
	}
	
	#sodexo_qc_logo {
		padding: 10px 5px 13px 5px;
	}	
	
	#mmhayes_sodexo_logo {
		float: left;
		padding: 5px;	
		margin: 10px 0px 0px 12px;
	}

	.loginInput{
		display: block;
		padding: 8px 5px;
		margin: 15px 0px 5px 15px;
		width: 345px;
		border-radius: 3px;
		border: #CCC 1px ridge;
        font-family: 'DroidSans-webfont', Fallback, sans-serif !important;
        font-size: 14px;
	}
	
	.ie9_loginInput{
		display: block;
		padding: 8px 5px;
		margin: 15px 0px 5px 15px;
		width: 345px;
		border-radius: 3px;
		border: #CCC 1px ridge;
        font-size: 14px;
	}

	.loginBtn
	{
		float: left;
		clear: both;
		padding: 2px;
		color: #FFF !important;
		font-weight: bold !important;
		border-radius: 5px !important;
		font-family: 'DroidSans-webfont', Fallback, sans-serif !important;
		background: #273896 !important;
		background-image: linear-gradient(top, #3a68de, #273896) !important;
		background-image: -o-linear-gradient(top, #3a68de, #273896) !important;
		background-image: -ms-linear-gradient(top, #3a68de, #273896) !important;
		background-image: -moz-linear-gradient(top, #3a68de, #273896) !important;
		background-image: -webkit-linear-gradient(top, #3a68de, #273896) !important;
	}

	#loginBtn
	{
		margin: 15px 0 0 155px;
		padding: .55em 1.15em;
	}

	#forgotPasswordBtn
	{
		margin: 15px 0 0 120px;
		padding: .55em 1.15em;
	}

	#verifyBtn
	{
		margin: 15px 0 0 155px;
	}

	#createBtn
	{
		margin: 15px 0 0 125px;
	}

/* QC - Applets */
	#iframeContainer
	{
		overflow: auto;
	}

/* QC - Page - Dashboard */   
	#dashBoardContainer 
	{
		border: 2px solid #CCC;
		height: 100%;
		padding: 10px;
		overflow: hidden;
	}
	
	#lineGraphHeader
	{
		padding: 5px 10px 20px 10px;  
	}	

	#buttonsDiv
	{
		float:left;
	}
	
	#loadingDiv
	{
		float: left;
		overflow: hidden;
		margin: 100px;  
	}
	
	#datePickerDiv
	{
		padding:5px;
		float:right; 
		background: #f7f7f7; /* Old browsers */    
		background: -ms-linear-gradient(top, #f7f7f7 0%,#e4e4e4  100%); /* IE10+ */  
		background: -moz-linear-gradient(top, #f7f7f7 0%, #e4e4e4  100%); /* FF3.6+ */  
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f7f7f7), color-stop(100%, #e4e4e4 )); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top, #f7f7f7 0%, #e4e4e4  100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top, #f7f7f7 0%,#e4e4e4  100%); /* Opera 11.10+ */ 
		/* background: linear-gradient(to bottom, #f7f7f7   0%,#e4e4e4  100%) ;  W3C */ 
		/* filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f7f7', endColorstr='#e4e4e4 ', GradientType=0);  IE6-9 */
		font-size: .8em; 
	}		
	
	#lineGraph
	{
		margin:25px;  
		padding:5px;     
	}	
	
	.jqplot-highlighter-tooltip, .jqplot-canvasOverlay-tooltip  
	{
		font-size: 0.75em;  
		white-space: nowrap; 
		background-color: #006699;        
		color: #FFF; 
		padding: 5px 10px;  
		border-radius: 10px; 
	}
	
	.jqplot-donut-series 
	{
		color: #3a3a3a;      
	}
	
	.jqplot-highlighter-tooltip table th, .jqplot-canvasOverlay-tooltip table th
	{
		font-size: 1em;   
	} 

	.jqplot-cursor-tooltip 
	{
		font-size: 0.75em;  
		white-space: nowrap; 
		background-color: #006699;          
		color: #FFF;  
		padding: 5px;  
		border-radius: 10px; 
	}	
	
	#totals_RowDisplay 
	{
		font-size:20px;
		font-weight:bold; 
		background: #EEE;  
		padding: 5px;
		margin: 5px;
	}
	
	#totalsContainer 
	{
		height: 100%;
		overflow:auto; 
	}
	
	#dashBoardTotalsDisplay 
	{
		float: left;
		padding-right:40px; 	
	}
	
	#revCenterTotals > tbody > tr > td 
	{
		padding: 5px 10px; 
	}
	 
	.dashBoardTotalsNested 
	{ 
		padding:5px; 
		border-radius: 10px;  
	}
	
	.dashBoardDisplay_name  
	{
		margin:0px; 
		cursor: pointer;
	}
	
	.dashboardSwoosh
	{
		cursor: pointer; 
	}

	.dashBoardDisplay_totals
	{
		font-size:15px; 
	}
	
	.dashBoardDisplay_details
	{
		font-size:12px; 
		/*
		padding-top:10px; (added inline due to all browsers not having CSS specs to do it here..
		*/
	}	

	.dashboardSwoosh 
	{
		border-radius: 10px;
		border-style: inset; 
		border-style:solid;
		border-width: 2px;
		margin: 0px;
		display: block;
	}

	.dashBoardDisplay_imgTD 
	{
		padding:5px;
		vertical-align:top; 
		/*border-right: 1px solid #CCC; */  
	}
	
	#donutGraph 
	{
		float: left;    
	}

    .colorSelectOption{
        width:5px;
        height:5px;
        padding-right:5%;
        margin-left:2%;
    }

    #transactionCreditMessage{
        margin-top: 1em;
        padding:1em;
        border-radius: 5px;
        border:2px solid #fcefa1;
        background-color: #fef6bf;
    }

    #transactionCreditMessage a:link{color: #187ebe;}
    #transactionCreditMessage a:visited{color: #187ebe;}
    #transactionCreditMessage a:hover{color: #187ebe;}
    #transactionCreditMessage a:focus{color: #187ebe;}

    /*needed specific css for upload file button in Product Editor*/
    .buttonContainer {
        position: relative;
        display: inline-block;
    }

    button.fileUploadButton {
        margin: 0px 30%;
        border: 1px solid #d3d3d3;
        font-weight: normal;
        color: #555555;
        padding: 8px;
        margin-right: .1em;
        vertical-align: middle;
        text-align: center;
        overflow: visible;
        border-radius: 3px 3px 3px 3px !important;
        background: -webkit-linear-gradient(top, #f7f7f7 0%, #e4e4e4 100%) !important;
        font-size: .8em !important;
    }
    div.buttonContainer .fileUploadInput:hover + button.fileUploadButton{
         border: 1px solid #999999;
         color: #212121;
    }

    .buttonContainer .fileUploadInput {
        margin: 0px 30%;
        height: 28px;
        vertical-align: middle;
        margin-right: .1em;
        position: absolute;
        left: 0;
        top: 12px;
        opacity: 0;
    }

    .uploadedTextButton {
        display:inline-block;
    }

    /*Branding App Preview Modal Styles*/

    .myQCAppPreview, .myQCAppPreview-nav, .myQCAppPreview-order, .myQCAppPreview-purchase, .myQCAppPreview-cart {
        text-align: center;
        margin: 0 auto;
        width:350px;
    }

    .previewHeader, #previewHeaderSubtext, .previewHeader-nav {
        position: absolute;
        width:350px;
        height: 8.5%;
        font-size: 24px;
        text-shadow: none;
        line-height: 65px;
    }

    .previewHeader {
        top:78px;
    }

    #previewHeaderSubtext {
        top:205px;
        font-size:19px;
        color:#f9f9f9;
    }

    .previewHeader-nav {
        top:180px;
        height:11% !important;
        line-height: 60px !important;
    }

    .logoPreviewImage {
        width:auto;
        max-width: 260px;
        height:auto;
        margin:auto;
        display:block;
        max-height: 120px;
    }

    .imagePreviewContainer {
		display: block;
    }

	#loginFormContainer{
		text-align: center;
		position: relative;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	.login-button-separator {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.button-border-radius {
		 border-radius: 100px !important;
	 }

	.login-separator-left, .login-separator-right {
		flex: 5;
		height: 1px;
		background: #dcdcdc;
	}

	.login-separator-or {
		flex: 2;
		text-align: center;
		color: #a2a2a2;
	}

	.MyQC-button {
		opacity: 0.95;
		width: 100%;
		font-weight: normal;
		padding: 12px 0;
		border-radius: 4px;
		font-size: 16px;
		clear: both;
		text-transform: none;
		background-image: none;
		cursor: pointer;
		border: none;
		margin: 3% auto;
		height: 3%;
	}

	.store-grid-container{
		display: grid;
		grid-template-columns: auto auto;
	}

	.store-grid-item {
		aspect-ratio:1 / 1;
		border: 1px solid #919191;
		width: 10.8rem;
		background-position: center;
		background-size: cover;
	}

	.store-row-item {
		aspect-ratio:1 / 1;
		width: 98%;
		height: 22%;
		margin: 1%;
		background-position: center;
		background-size: cover;
	}

	.categoryFilter {
		border: 1px solid #cccccc;
		border-radius: 100px;
		text-align: center;
		padding: 5px 20px;
	}

	#loginName, #loginPassword {
		background: #fdfdfd;
		margin-bottom: 15px;
		height: 20px;
		display: block;
		border: 1px solid black;
		border-radius: 100px;
		padding-left: 10px;
	}


	.page{
		width: inherit;
		height: inherit;
		display: flex;
		flex-direction:column;
		border: black 1px solid;
		position: relative;
	}

	.express-reorder-area{
		height: 18%;
		position: absolute;
		top: 80%;
		display: flex;
		justify-content: space-evenly;
		width: 100%;
		align-items: center;
	}

	.express-reorder{
		display: flex;
		flex-direction: column;
		width: 80%;
		border: 3px solid;
	}

	.express-reorder-button{
		width: 100%;
		padding: 5px 0px;
		flex-grow:1;
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		justify-content: center;
	}

	.express-reorder-info{
		flex-grow:2;
		display: flex;
		padding: 5px;
		padding-top: 0px;
		background-color: white;
	}

    #loginHeader {
        position:absolute;
        top:440px;
        left:330px;
        width:auto;
        font-size: 20px;
        font-weight: normal;
        letter-spacing: 0.01em;
        line-height: 1em;
    }

    #orderTypePreview {
        position:absolute;
        top:212px;
        left:195px;
        width:104px;
        height:41px;
        font-size:14px;
        font-weight: 600;
        font-family: 'Roboto', sans-serif;
        line-height: 40px;
    }

    .pricePreview {
        position:absolute;
        font-size: 22px;
        font-weight: bold;
        text-align: right;
        width:25%;
        left:320px;
    }

    #priceOne {
       top:165px
    }

    #priceTwo {
        top:230px;
    }

    #endListPreview {
        position:absolute;
        font-style: italic;
        font-size: 16px;
        top:280px;
        left:180px;
    }

    #templatePreviewContainer {
        width:95%;
        margin: 0 auto;
    }

    #templateContainer {
        overflow: hidden;
        zoom:0.5;
        min-height:1000px;
        max-height:1200px;
        border: 2px solid #ddd;
    }

    #templateInfo {
        display:flex;
        padding: 15px 0 15px 0;
        width: fit-content;
        margin: 0 auto;
    }

    .sign-arrows {
        font-size: 38px;
        margin-top: 3px;
        width: 0;
        height: 0;
    }

    .sign-arrows:hover {
        cursor: pointer;
    }

        #arrow-left {
            left:0;
            border-right: 28px solid #187ebe;
            border-top: 15px solid transparent;
            border-bottom: 15px solid transparent;
        }

        #arrow-right {
            right:0;
            border-left: 28px solid #187ebe;
            border-top: 15px solid transparent;
            border-bottom: 15px solid transparent;
        }

    #signTemplateName {
        font-size: 23px;
        text-align: center;
        padding: 10px 50px 0 50px;
    }

    #keypadButton {
        background: -webkit-linear-gradient(top, #f7f7f7 0%, #e4e4e4  100%) !important;
        width: 30px;
        height: 25px;
        border: 1px solid #aaaaaa;
        border-radius: 4px;
    }

    .elementContainer{
        border: 1px solid #ddd;
        padding: 6px;
        display: inline-block;
        color: #1d1d1d;
        font-size: 2.1em;
        margin: 2px;
    }

    #productModal_revCenterInfoContainer, #productModal_vendorGridContainer {
        display: flex;
    }

    #productModal_revCenter_cost:disabled {
        background: #efefef;
    }

    #ViewAllTags:hover {
        cursor:pointer;
    }

/* QC - Tabs
	
	#tabs .ui-tabs-nav li 
	{
		margin-top: 0.6em;
		font-size: 65%;
		margin-left: 3px;
		margin-right: 3px;
		border-radius:10px;
	}

	#tabs .ui-tabs-nav li.ui-tabs-selected, #tabs .ui-tabs-nav li.ui-state-active 
	{
		margin-bottom: 8px;
		font-size: 85%; 
	}

	#tabs ul 
	{
		width: 100%;
		height: 100%;
		margin: -5px;
	}

*/

/* jquery ui timepicker add-on css */	
.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt { float: left; clear:left; padding: 0 0 0 5px; }
.ui-timepicker-div dl dd { margin: 0 10px 10px 40%; }
.ui-timepicker-div td { font-size: 90%; }
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }
.ui-timepicker-div .ui_tpicker_unit_hide{ display: none; }
.ui-timepicker-div .ui_tpicker_time .ui_tpicker_time_input { background: none; color: inherit; border: none; outline: none; border-bottom: solid 1px #555; width: 95%; }
.ui-timepicker-div .ui_tpicker_time .ui_tpicker_time_input:focus { border-bottom-color: #aaa; }
.ui-timepicker-rtl{ direction: rtl; }
.ui-timepicker-rtl dl { text-align: right; padding: 0 5px 0 0; }
.ui-timepicker-rtl dl dt{ float: right; clear: right; }
.ui-timepicker-rtl dl dd { margin: 0 40% 10px 10px; }
.ui-timepicker-div.ui-timepicker-oneLine { padding-right: 2px; }
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time, 
.ui-timepicker-div.ui-timepicker-oneLine dt { display: none; }
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time_label { display: block; padding-top: 2px; }
.ui-timepicker-div.ui-timepicker-oneLine dl { text-align: right; }
.ui-timepicker-div.ui-timepicker-oneLine dl dd, 
.ui-timepicker-div.ui-timepicker-oneLine dl dd > div { display:inline-block; margin:0; }
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_minute:before,
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_second:before { content:':'; display:inline-block; }
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_millisec:before,
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_microsec:before { content:'.'; display:inline-block; }
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide,
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide:before{ display: none; }
	

.ui-icon-pencil, .ui-icon-trash, .ui-icon-print, .active-col  {
	cursor: pointer;
}

.inactive-alias {
	color: red;
}

.helperButton {
	float: left;
	width: 5%;
	border: 1px solid #aaa;
	font-size: 24px;
	font-weight: bold;
	color: #187ebe;
	text-align: center;
	margin-top: 8px;
	padding-top: 4px;
	border-radius: 10px;
	background: white;
	box-shadow: 1px 1px;
	max-width: 40px;
	cursor: pointer;
}

.server-close-button {
    position: relative;
    z-index: 1;
    float: right;
    top: 24px;
    right: 35px;
    color: #818181;
    cursor:pointer;
}

.server-close-button:hover {
    color: #000;
}

/* JQuery 3.6 upgrade fix for buttons */
button.ui-button {
	padding: .4em 1em;
}

.flex-grid {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
}


.flex-grid-col {
	padding: 1%;
	flex: 1;
	max-width: 32%;
}
.preview-store-unavailable-warning {
	font-size: 20px;
	font-weight: bold;
	color: red;
}
.preview-store-header {
	font-size: 18px;
}
.preview-orderStoreLine{
	border-radius: 5px;
	border: 1px solid rgba(142, 142, 142, 0.2);
	box-shadow: 1px 1px 4px rgb(142, 142,142 / 9%);
	position: relative;
	overflow: hidden;
	padding: 10px;
	background: #fff;
	display:flex;
	flex-direction: row-reverse;
	width:100%;
	background-image: none;
	margin:12px 14px 10px;
	padding:0;
	padding-left:5px;
	color: #000;
	align-items: flex-start;

}
.preview-store-info{
	width:75%;
	height:auto;
	margin-left: 2%;
}
.preview-store-info-top{
	width:95%;
	height:auto;
	margin-left: 2%;
}
.preview-icon{
	width:25%;
	height: 100%;
	flex-grow: 1;
	flex: 1;
	padding-top:1%;
}
.preview-image{
	width:100%;
	max-height: 100%;
}
.preview-wait-time{
	font-size:17px;
	font-style: italic;
}
.preview-hidden{
	display:none;
}
.preview-orderStoreLine-full{
	display:block;
	background-repeat:no-repeat;
	background-position:center;
	background-size: cover;
	margin:0;
	padding: 10px;
}
.preview-store-info-full{
	float: left;
	background: rgba(0, 0, 0, 0.37);
	width: auto;
	padding: 6px;
	display: block;
	color: #fff;
	margin-left: 0%;
}
.preview-icon-full{

	float: right;
	width: 100%;
	position: relative;
	text-align: center;
}
.preview-image-full{
	border: none;
}
.preview-orderStoreLine-top{
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	overflow: hidden;
	margin:0;
	padding: 0;
}
.preview-icon-top{
	max-height: 20vh;
	flex-grow: 1;
	width:100%;
	flex: 1;
	padding: 0;

}
.preview-image-top{
	max-height: 20vh;
}