﻿body {
	padding-bottom: 44px;
}

#GetHelpLink {
	position: absolute;
	right: 60px;
	top: 15px;
	color: white;
	text-decoration: underline;
}

.btnCSU {
	width: 30px;
}

#CPrefHeader {
	position: relative;
	top: -35px;
}

/********* Font-Sizes and Color ************/
th > .fa-filter {
	font-size: 15px;
}

.btn-default.btn-default.btnEdit {
	background-color: #2dbdbf;
	color: #fff;
	width: 75px;
}

.btn-default.btn-default.btnEdit:hover {
	background-color: #016e8b;
}

.btn-default.btn-default.btnDiary {
	background-color: #fff;
	color: #4A5477;
	width: 75px;
}

/********* Custom Div Heights ******************/
.custom-div-height-auto {
	height: auto;
}

.custom-div-height-1 {
	height: 175px;
}


/********* Custom Div Widths ******************/
.five-column-form .col-md-2 {
	width: 20%;
}

.custom-div-width-auto {
	width: auto;
}

.col-md-25 {
	float: left;
	width: 21%;
}

.col-width {
	width: 48%;
	float: left;
	border: solid;
	padding: 25px 25px;
	margin-right: 10px;
}

.width-sm {
	width: 25%;
}

td img {
	width: 65px;
	height: 45px;
}

td img:hover {
	cursor: pointer;
}

/********* Custom Div Spacing ******************/
.spacing {
	margin-right: 50%;
}

.spacing-right-5 {
	margin-right: 5%;
}

.spacing-left-5 {
	margin-left: 5%;
}

.spacing-bottom-5 {
	margin-bottom: 5%;
}

.spacing-left-8 {
	margin-left: 8%;
}

.spacing-left-10 {
	margin-left: 10%;
}

.spacing-right-10 {
	margin-right: 10%;
}

.spacing-left-10 {
	margin-left: 10%;
}

.spacing-bottom-10 {
	margin-bottom: 10%;
}

.spacing-bottom-25 {
	margin-bottom: 25%;
}

.col-md-offset-9-5 {
	margin-left: 86%;
}

fleft80 {
	margin-left: 80%;
}

/****************** Date Picker ************************/
.input-datepicker-close {
	color: #808080;
	min-width: 75px;
}

/********** Forms and Controls ************************/
.form-disabled {
	background-color: #bdb8b8;
}

.table thead > tr > th {
	padding-top: 0px;
	padding-bottom: 0px;
}

/*********************** Icons ************************/
.large-gray-icons {
	font-size: 56px;
	float: right;
	margin: 2px 0 0 10px;
	color: #eaedf1;
	margin: 0 0 0 10px;
	line-height: 64px;
}

/*********************** Misc ************************/
.logo {
	width: 29%;
}

.fright {
	float: right;
}

.fleft {
	float: left;
}

.HomeUl {
	margin: auto;
	display: inline-block;
	list-style: none;
	padding-left: 0px;
}

.HomeImage {
	width: 70%;
}


#menu {
	clear: both;
	color: #ffffff;
	font: 16px/42px 'TitilliumMedium', Arial, Helvetica, sans-serif;
	height: 42px;
}

#menu a {
	color: #ffffff;
	text-decoration: none;
	display: block;
	line-height: 50px;
	padding: 0px 20px;
}

#menu a:hover, #menu li.active a {
	color: #2a452c;
	background: #fff;
}

#menu ul {
	position: absolute;
	top: 42px;
	left: 0px;
	background-color: #394263;
	height: auto;
	width: 175px;
	visibility: hidden;
	z-index: 1000;
	padding: 0;
	list-style: none;
	margin-top: 5px;
}

#menu ul li a, #menu li.active ul li a {
	line-height: 23px;
	background: none;
	color: #ffffff;
}

#menu ul li a:hover, #menu li.active ul li a:hover {
	color: #394263;
	background: #fff;
}

	#menu > li > a {
		background-color: rgb(var(--color-primary));
	}

#menu li:hover ul {
	visibility: visible;
}


/*--------------------------------
required styles for responsive menu design
---------------------------------*/

body {
	-webkit-animation: bugfix infinite 1s;
}

@-webkit-keyframes bugfix {
	from {
		padding: 0;
	}

	to {
		padding: 0;
	}
}

.header1 {
	position: relative;
}

#toggle, .toggle {
	display: none;
}

#menu > li {
	list-style: none;
	float: left;
}

.clearfix1:before, .clearfix:after {
	display: table;
	content: "";
}

.clearfix1:after {
	clear: both;
}

@media only screen and (max-width: 768px) {
	#menu {
		display: none;
		opacity: 0;
		width: 100%;
		position: absolute;
		right: 0;
	}

	#menu > li {
		display: block;
		width: 100%;
		margin: 0;
	}

	#menu > li > a {
		display: block;
		width: 100%;
		text-decoration: none;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	.toggle {
		display: block;
		position: relative;
		cursor: pointer;
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		user-select: none;
	}

	#toggle:checked ~ #menu {
		display: block;
		opacity: 1;
	}
}


/*--------------------------------
styles for responsive menu design
---------------------------------*/
.nav1 {
	display: block;
	float: none;
}

.nav1, #menu, #menu > li, #menu > li > a {
	height: 100%;
}

#menu {
	z-index: 1001;
}

#menu > li > a {
	display: block;
	padding: 16px 20px;
	text-decoration: none;
	font-weight: normal;
	font-size: 16px;
	line-height: 1;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all 0.25s linear;
	-moz-transition: all 0.25s linear;
	-o-transition: all 0.25s linear;
	transition: all 0.25s linear;
}

#menu > li > a:hover, #menu > li > a:focus {
	background: #F2F2F2;
	color: #51C1F1;
}

.toggle {
	z-index: 2;
}

@media only screen and (max-width: 300px) {
	#HeaderTitle h1 {
		font-size: 15px;
	}

	.row {
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: vertical;
		-moz-box-orient: vertical;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		/* optional */
		-webkit-box-align: start;
		-moz-box-align: start;
		-ms-flex-align: start;
		-webkit-align-items: flex-start;
		align-items: flex;
	}

	.row .col1 {
		-webkit-box-ordinal-group: 2;
		-moz-box-ordinal-group: 2;
		-ms-flex-order: 2;
		-webkit-order: 2;
		order: 2;
	}

	.row .col2 {
		-webkit-box-ordinal-group: 1;
		-moz-box-ordinal-group: 1;
		-ms-flex-order: 1;
		-webkit-order: 1;
		order: 1;
	}

	#menu {
		background: #FFFFFF;
		border-top: 1px solid #51C1F1;
	}

	#menu, #menu > li, #menu > li > a {
		height: auto;
	}

	#menu > li > a {
		padding: 15px 15px;
	}

	#menu > li > ul > li > a {
		background: #F2F2F2;
		width: 1000px;
		color: #000000;
		box-shadow: inset 0px 1px #51C1F1;
		padding: 15px 15px 15px 25px;
	}

	#menu > li > a:hover, #menu > li > a:focus {
		background: #F2F2F2;
		box-shadow: inset 5px 0px #51C1F1;
		padding: 15px 15px 15px 25px;
	}

	#menu > li > ul > li > a:hover {
		background: #F2F2F2;
		box-shadow: inset 5px 1px #51C1F1;
	}

	.toggle:after {
		content: 'Main Menu';
		display: block;
		width: 200px;
		margin: 10px 0;
		padding: 10px 50px;
		background: #51C1F1;
		-webkit-border-radius: 2px;
		border-radius: 2px;
		text-align: center;
		font-size: 12px;
		color: #FFFFFF;
		-webkit-transition: all 0.5s linear;
		-moz-transition: all 0.5s linear;
		-o-transition: all 0.5s linear;
		transition: all 0.5s linear;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	.toggle:hover:after {
		background: #45ABD6;
	}

	#toggle:checked + .toggle:after {
		content: 'Close Menu';
	}
}

@media only screen and (max-width: 479px) {
	.toggle:after {
		text-align: center;
		width: 100%;
	}
}

#chart-bars1 .flot-x-axis .tickLabel {
	/* webkit browsers */
	-webkit-transform: rotate(270deg);
	-webkit-transform-origin-x: 25px;
	-webkit-transform-origin-y: 0px;
	/* firefox */
	-moz-transform: rotate(270deg);
	-moz-transform-origin: 25px 0;
	/* internet explorer */
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

.flot-x-axis .flot-tick-label.tickLabel {
	top: 350px !important;
	text-align: right !important;
	max-width: 50px !important;
}

.VerticalAlign {
	vertical-align: middle;
}

/*Assignments Styles*/
.buttonRow {
	float: right;
	padding-bottom: 10px;
	position: relative;
	left: 5px;
}

.padding-left {
	padding-left: 12px;
}

.divider {
	width: 10px;
	height: auto;
	display: inline-block;
}

.btn150 {
	width: 150px;
	margin-right: 4px;
}

.MoveUp {
	position: relative;
	bottom: 43px;
}

#NotesHeight {
	height: 240px;
}

#1000height {
	height: 1000px;
}

/**label-margin-top is for top labels, label-margin-middle is for middle AND bottom labels**/
.label-margin-middle {
	margin: 0px 5px 5px;
}

.label-margin-top {
	margin: 5px;
}

.radioButtonListCSU labelCSU {
	display: inline;
	width: 800px;
}

/**Login Styles**/
.spacing-top {
	margin-top: 20px;
}

.spacing-left-4 {
	margin-left: 15px;
}

#LoginWindow {
	max-width: 800px;
	max-height: 292px;
	position: relative;
	bottom: 200px;
	left: 1000px;
}

.MaxHeightTitle {
	max-height: 42px;
}

.Width50 {
	width: 50%;
}

.RightFloat {
	float: right;
}

#IssuesDdl {
	position: relative;
	bottom: 10px;
	right: 3px;
}

.Margin_Center {
	margin-left: auto;
	margin-right: auto;
}

a:hover {
	text-decoration: none;
}

.whiteText {
	color: white;
}

/*FAQs Styles*/
.subQuestion {
	font-weight: bold;
}

table.radbtnlst input[type=radio] + label,
span.radbtn > input[type=radio] + label,
input[type=checkbox] + label,
table.radbtnlst input[type=radio][disabled=disabled] + label,
span.radbtn > input[type=radio][disabled=disabled] + label,
input[type=checkbox][disabled=disabled] + label {
	margin-left: 5px;
}

table.radbtnlst input[type=radio][disabled=disabled] + label,
span.radbtn > input[type=radio][disabled=disabled] + label,
input[type=checkbox][disabled=disabled] + label,
.aspNetDisabled label,
.aspNetDisabled span {
	color: #7f7f7f;
}

table.radbtnlst-horizontal > tbody > tr > td {
	padding: 0px 8px;
}

table.radbtnlst-horizontal > tbody > tr > td:first-child {
	padding-left: 0px;
}

table.radbtnlst-horizontal > tbody > tr > td:last-child {
	padding-right: 0px;
}

padding-none {
	padding: 0px;
}

.privateRow > .block {
	margin-bottom: 15px;
	position: relative;
	right: 20px;
}

.privateRow > .block .col-md-5 {
	padding: 0px;
}

.privateContainer {
	border-radius: 4px;
	border: 1px solid black;
	display: inline-block;
}

.privateText {
	font-weight: bold;
	font-size: 14px;
	padding: 0px 3px;
}

.boldRow {
	font-weight: bold;
}

.sub-subHeader {
	font-size: 16px;
}

.sub-subHeader > div {
	padding: 10px;
}

.subTitle {
	font-weight: bold;
	padding: 10px 40px;
}

.background-white p {
	text-indent: 40px;
}

.background-white {
	background-color: #fff;
}

.margin-bottom {
	margin-bottom: 15px;
}

/***Pop Up Styles***/
#overlay {
	/* set it to fill the whil screen */
	width: 100%;
	height: 100%;
	/* transparency for different browsers */
	filter: alpha(opacity=50);
	-moz-opacity: 0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
	background: #000;
	/* make sure it appear behind the dialog box but above everything else */
	position: fixed;
	top: 0;
	left: 0;
	z-index: 3000;
	/* hide it by default */
	/*display:none;*/
}

#dialog-box-wrapper > .col-md-9 {
	padding: 0px;
}


#dialog-box {
	/* css3 drop shadow */
	-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
	/* css3 border radius */
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	background: #f2ecdb;
	/* styling of the dialog box, i have a fixed dimension for this demo */
	/*width:450px;*/
	/* make sure it has the highest z-index */
	position: fixed;
	left: 0;
	right: 0;
	z-index: 5000;
	width: 80%;
	margin: 0px auto;
	/* hide it by default */
	/*display:none;*/
}

.width70 {
}


#dialog-box .dialog-header {
	background-color: rgb(var(--color-primary));
	text-align: center;
	padding: 5px;
	font-size: 16px;
	color: white;
	font-weight: bold;
	width: 100%;
	margin-bottom: 10px;
}

#dialog-box .dialog-content {
	/* style the content */
	text-align: center;
	padding: 10px;
	margin: 13px;
	color: #141414;
	font-family: arial;
	font-size: 15px;
}

a.button {
	/* styles for button */
	margin: 10px auto 0 auto;
	text-align: center;
	display: inline-block;
	width: auto;
	padding: 5px 10px 6px;
	color: #fff;
	text-decoration: none;
	font-weight: bold;
	line-height: 1;
	/* button color */
	background-color: #e33100;
	/* css3 implementation :) */
	/* rounded corner */
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	/* drop shadow */
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	/* text shaow */
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
	border-bottom: 1px solid rgba(0,0,0,0.25);
	position: relative;
	cursor: pointer;
}

.dialog-content > a.dialog-link {
	float: right;
}

a.button:hover {
	background-color: #c33100;
}

/* extra styling */
#dialog-box .dialog-content p {
	text-align: left;
}

#dialog-box .dialog-content ul {
	margin: 10px 0 10px 20px;
	padding: 0;
	height: 50px;
}

#divEnhancementText > .subTitle {
	text-align: left;
	padding: 10px;
}

.supportMenuItem {
	text-decoration: underline;
}

.supportMenuItem:hover {
	text-decoration: none;
}

/***ViewEnhancement Styles***/
.col-auto {
	display: inline-block;
	padding: 0px 15px;
	vertical-align: top;
}

.updatePanel {
	border-left: 1px groove #1f1f1f;
}

p.MsoNormal, p.MsoListParagraph {
	margin-bottom: 0px;
}

.helpDiv {
	width: 50%;
	margin: 30px auto;
	overflow: hidden;
}

/* jQuery UI Dialog Overrides */
.ui-dialog {
	background: none;
	background-color: #f2ecdb;
	border: 1px solid #999999;
	border-radius: 0px;
	padding: 10px;
}

.ui-dialog p {
	margin-bottom: 10px;
}

.ui-dialog .ui-dialog-titlebar {
	margin: -10px;
	margin-bottom: 10px;
}

.ui-dialog.dlg-no-close .ui-dialog-titlebar-close {
	display: none;
}

.ui-dialog .ui-dialog-content,
.ui-dialog .ui-dialog-buttonpane {
	background: none;
	margin: 0px;
	padding: 0px;
}

.ui-dialog .ui-dialog-buttonpane {
	border: none;
	border-top: 1px solid #999999;
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
	float: none;
	margin-top: 10px;
	text-align: center;
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button {
	margin: 0px 10px;
	padding: 6px 12px;
	text-align: center;
	width: 80px
}

.ui-dialog .ui-dialog-titlebar,
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button {
	background: none;
	/*background-color: #006837;*/
	background-color: #2dbdbf;
	border: none;
	border-radius: 0px;
	color: #ffffff;
}
