html,
body {
	margin: 0px;
	font-family: Arial;
	margin-top: 35px;
	margin-bottom: 60px;
}

/* ############################ */
/* ########## HEADER ########## */
/* ############################ */

.header {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	background: #FFF;
	display: grid;
	grid-template-columns: 1fr 1fr;
	padding: 10px;
	margin-bottom: 10px;
	border-bottom: 2px solid #24F;
	box-shadow:0 .25rem .75rem rgba(0, 0, 0, .1);
	z-index: 10;
}

.header-link {
	display: flex;
	align-items: center;
	font-size: 16px;
	font-weight: bold;
	text-decoration: none;
	color: #777;
}

.header-link-img {
	width: 45px;
	height: 30px;
	margin-right: 10px;
}


/* ############################ */
/* ########## NAVBAR ########## */
/* ############################ */

.navbar-side {
	position: fixed;
	top:0px;
	left: 0px;
	height: 100%;
	min-width: 200px;
	background: #FFF;
	border-right: 2px solid #24F;
	box-shadow:0 .25rem .75rem rgba(0, 0, 0, .1);
	z-index: 5;
	padding-top:60px;
	padding-bottom:40px;
	display: none;
}

.navbar-header-directory {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: right;
}

.navbar-header-directory-item {
	width: 80%;
	margin: 5px;
	padding: 10px;
	background: #FFF;
	border-radius: 10px;
}

.navbar-header-directory-item:hover {
	background: #CCC;
}

.navbar-header-directory-item-link {
	text-decoration: none;
	font-weight: bold;
	color: #777;
}

.navbar-profile-img {
	width: 30px;
	height: 30px;
	border-radius: 15px;
}

.navbar-profile-dropdown {
	margin-top: 25px;
	width: 80%;
}

.navbar-profile-dropdown-toggle {
	display: flex;
	align-items: center;
	width: 100%;
	background: #EEE;
	color: #24F;
	border: 2px solid #24F;
	border-radius: 10px;
	box-shadow:0 .25rem .75rem rgba(0, 0, 0, .1);
}

.navbar-profile-dropdown-toggle:hover {
	background: #FFF;
	border: 2px solid #24F;
	color: #24F;
}

.navbar-profile-dropdown-toggle p {
	font-size: 14px;
	font-weight: bold;
	margin-left: 10px;
	margin-right: 10px;
}

.navbar-profile-dropdown-menu {
	display: none;
	background: #FFF;
	border: 2px solid #24F;
	border-radius: 15px;
	flex-direction: column;
	padding: 5px;
}

.navbar-profile-dropdown-menu-item {
	margin: 5px;
	font-size: 16px;
	text-decoration: none;
	color: #000;
}


/* ########################### */
/* ########## LOGIN ########## */
/* ########################### */

.login-container {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: auto;
	width: 500px;
}

.login-container-form {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.login-header-img {
	width: 180px;
	height: 130px;
}

.login-status-success {
	font-size: 16px;
	color: #00FF00;
	font-weight: bold;
}

.login-status-error {
	font-size: 16px;
	color: #FF0000;
	font-weight: bold;
}

.login-form-group {
	margin: 5px;
	display: flex;
	flex-direction: column;
}

.login-form-label {
	font-size: 12px;
	color: #555;
	font-style: italic;
}

.login-form-textbox {
	box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .1);
	background: #CCC;
}

.login-form-textbox:hover {
	border: 2px solid #24F;
	background: #CCC;
}

.login-form-textbox:focus {
	border: 2px solid #24F;
	background: #FFF;
}

.login-form-button {
	background: #FFF;
	color: #24F;
	border: 2px solid #24F;
	font-size: 14px;
	font-weight: bold;
	border-radius: 10px;
	padding: 5px;
	width: 100%;
}

.login-form-button:hover {
	background: #24F;
	color: #FF0;
	border: 2px solid #24F;
}

.login-form-button:active {
	background: #24F;
	color: #FFF;
	border: 2px solid #24F;
}

.login-reset-pw-link {
	font-size: 12px;
	color: #555;
	font-style: italic;
	margin: 10px;
}

.login-reset-pw-link:hover {
	color: #24F;
	text-decoration: underline;
}








/* ############################### */
/* ########## DASHBOARD ########## */
/* ############################### */

.table-header {
	font-size: 16px;
	font-weight: bold;
}




















/* ############################### */
/* ########## CX LOOKUP ########## */
/* ############################### */

.cx-form-container {
	width: max-content;
	margin: auto;
}

.cx-form-label {
	font-size: 12px;
	color: #555;
	font-style: italic;
}

.cx-form-textbox {
	box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .1);
	background: #CCC;
}

.cx-form-textbox:hover {
	border: 2px solid #24F;
	background: #CCC;
}

.cx-form-textbox:focus {
	border: 2px solid #24F;
	background: #FFF;
}

.cx-form-button {
	background: #FFF;
	color: #24F;
	border: 2px solid #24F;
	font-size: 14px;
	font-weight: bold;
	border-radius: 10px;
	padding: 5px;
	width: 100%;
}

.cx-form-button:hover {
	background: #24F;
	color: #FF0;
	border: 2px solid #24F;
}

.cx-form-button:active {
	background: #24F;
	color: #FFF;
	border: 2px solid #24F;
}

.cx-form-lookup-results {
	background: #CCC;
	display: flex;
	flex-direction: column;
}

.cx-form-lookup-results-single {
	background: #EEE;
	display: flex;
	flex-direction: column;
	padding: 10px;
	margin:10px;
	box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .1);
}

.cx-form-lookup-results-single:hover {
	background: #FFF;
	box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .2);
}

.cx-form-lookup-results-single-link {
	text-decoration: none;
}

.cx-form-lookup-results-single-name {
	font-size: 16px;
	font-weight: bold;
	color: #000;
}

.cx-form-lookup-results-single-name-id {
	text-decoration: underline;
	font-weight: bold;
	font-size: 16px;
	color: #48C;
}

.cx-form-lookup-results-single-address {
	font-size: 12px;
	color: #555;
}

.cx-form-lookup-results-single-phone {
	font-size: 12px;
	color: #555;
}

.cx-form-lookup-results-single-email {
	font-size: 12px;
	color: #555
}



/* ################################### */
/* ########## CUSTOMER VIEW ########## */
/* ################################### */

.cx-view-container {
	width: max-content;
	margin: auto;
}

.cx-view-group-row {
	display: flex;
	flex-direction: row;
}

.cx-view-group-col {
	display: flex;
	flex-direction: column;
}

.cx-view-group-col-left {
	display: flex;
	flex-direction: column;
	margin-right: 10px;
}

.cx-view-group-col-right {
	display: flex;
	flex-direction: column;
	margin-left: 10px;
}

.cx-view-group-col-centered {
	display: flex;
	flex-direction: column;
	margin-left: 10px;
	text-align: center;
	justify-content: center;
	align-items: center;
}

.cx-view-group-block {
	margin: 5px;
	padding: 10px;
	background: #EEE;
}

.cx-view-group-block-name {
	color: #000;
	font-weight: bold;
	font-size: 16px;
}

.cx-view-group-block-email {
	color: #555;
	font-style: italic;
	text-decoration: underline;
	font-size: 12px;
}

.cx-view-group-block-descriptor {
	color: #555;
	font-weight: bold;
	font-size: 12px;
}

.cx-view-group-create {
	color: #000;
	font-weight: bold;
	font-size: 16px;
	text-align: right;
}

.cx-view-group-update {
	color: #555;
	font-style: italic;
	font-size: 12px;
	text-align: right;
}

.cx-view-group-row-tickets {
	display: flex;
	flex-direction: row;
	width: max-content;
	margin: auto;
}


/* ####################################### */
/* ########## CX TICKET DISPLAY ########## */
/* ####################################### */

.cx-view-ticket-display {
	background: #CCC;
	display: flex;
	flex-direction: column;
	margin-top: 20px;
	width: 100%;
}

.cx-view-ticket-display-single {
	background: #EEE;
	display: flex;
	flex-direction: column;
	padding: 10px;
	margin:10px;
	box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .1);
	position: relative;
}

.cx-view-ticket-display-single > a {
	text-decoration: none;
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
}

.cx-view-ticket-display-single:hover {
	background: #FFF;
	box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .2);
}

.cx-view-ticket-display-single-inner {
	position: relative;
	pointer-events: none;
	z-index: 1;
}

.cx-view-ticket-display-single-title {
	font-size: 16px;
	font-weight: bold;
	color: #000;
}

.cx-view-ticket-display-single-descr {
	font-size: 12px;
	font-style: italic;
	color: #555;
}

.cx-view-ticket-display-single-descr a {
	text-decoration: none;
	pointer-events: all;
	color: #48C;
}



/* ################################# */
/* ########## TICKET VIEW ########## */
/* ################################# */
.tx-view-group-row {
	display: flex;
	flex-direction: row;
	margin-top: 20px;
}

.tx-view-group-col {
	display: flex;
	flex-direction: column;
}

.tx-view-group-body {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 450px;
	background: #F5F5F5;
}

.tx-view-textblock-wide {
	background: #CCC;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 450px;
	margin: 5px;
}

.tx-view-image {
	max-width: 450px;
	max-height: 500px;
}

.tx-view-group-block-descriptor {
	color: #000;
	font-weight: bold;
	font-size: 16px;
	padding: 10px;
	border: 1px solid #000;
	background: #BDF;
}











/* ############################################ */
/* ########## TICKET PROGRESS WIDGET ########## */
/* ############################################ */
.progress-widget {
	width: 100%
	display: flex;
	flex-direction: column;
}
.progress-widget-node {
	display: flex;
	flex-direction: row;
}
.progress-widget-node-blip {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-color: #999;
	margin-bottom: 5px;
}
.progress-widget-node-blip-completed {
	background-color: #492;
}
.progress-widget-node-text {
	color: #999;
	margin-left: 10px;
	font-size: 14px;
	font-style: italic;
}
.progress-widget-node-text-completed {
	color: #492;
}




/* ########################################## */
/* ########## TICKET TIME TRACKING ########## */
/* ########################################## */
.tx-timetracking-container {
	
}

.tx-timetracking-sub-controls {
	display: flex;
	align-items: center;
	justify-content: center;
}

.tx-timetracking-sub-controls-button {
	border: 3px solid #69C;
	color: #69C;
	background: #FFF;
	padding: 5px;
	width: 100px;
	font-weight: bold;
	border-radius: 15px;
}

.tx-timetracking-sub-controls-warning {
	font-weight: bold;
	font-size: 14px;
	color: #D22;
}

.tx-timetracking-sub-controls-success {
	font-weight: bold;
	font-size: 14px;
	color: #2D2;
}

.tx-timetracking-sub-listheader {
	background-color: #CCC;
	display: flex;
	flex-direction: row;
	padding: 10px;
}

.tx-timetracking-sub-listheader-item {
	color: #000;
	font-weight: bold;
	margin: auto;
	padding: 0px;
}

.tx-timetracking-sub-list {
	background: #CCC;
	display: flex;
	flex-direction: column;
	border: 1px solid #000;
}

.tx-timetracking-sub-list-item {
	background-color: #DFDFDF;
	display: flex;
	flex-direction: row;
	padding: 10px;
}
.tx-timetracking-sub-list-item:nth-child(odd) {
	background-color: #F3F3F3;
}

.tx-timetracking-sub-list-item-user {
	color: #269;
	text-decoration: none;
	font-weight: bold;
	margin: auto;
	padding: 0px;
}

.tx-timetracking-sub-list-item-clockin {
	color: #555;
	font-style: italic;
	font-size: 12px;
	margin: auto;
	padding: 0px;
}

.tx-timetracking-sub-list-item-clockout {
	color: #555;
	font-style: italic;
	font-size: 12px;
	margin: auto;
	padding: 0px;
}

.tx-timetracking-sub-list-item-clockout {
	color: #555;
	font-style: italic;
	margin: auto;
	padding: 0px;
}



/* ######################################### */
/* ########## MEDIA UPLOAD WIDGET ########## */
/* ######################################### */
.img-upload-drop-file-zone {
	background-color: #DEF;
	border: #68C 5px dashed;
	height: auto;
	padding: 8px;
	font-size: 18px;
}
.img-upload-drag-upload-file {
	width:75%;
	margin:0 auto;
}
.img-upload-drag-upload-file p {
	text-align: center;
	margin:0px;
	padding:0px;
}
.img-upload-drag-upload-file .img-upload-select-file {
	display: none;
}
.img-upload-content {
	display: flex;
	flex-direction: column;
	height:auto;
	max-height: 500px;
	overflow-x: hidden;
	overflow-y: scroll;
	border: 1px solid #000;	
	background: #CCC;	
}
.img-upload-item {
	display: flex;
	flex-direction: row;
	justify-content: left;
	align-items: center;
	background: rgba(255,255,255,0.5);
	border-radius: 25px;
	padding: 10px;
	margin: 10px;
	box-shadow: 0px 0px 20px #000;
}
.img-upload-item:hover {
	box-shadow: 0px 0px 20px #246;
}
.img-upload-item-thumbnail {
	width: 80px;
	height: 80px;
}
.img-upload-item a {
	color: #26C;
	text-decoration: none;
	margin-left: 25px;
}













/* ################################### */
/* ########## CALENDAR VIEW ########## */
/* ################################### */
.calendar {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 1px;
	border: 1px solid #ccc;
	min-width: 750px;
	overflow-x: scroll;
}
.calendar-day {
	display: flex;
	flex-direction: column;
}
.calendar-day-current {
	display: flex;
	flex-direction: column;
	background: #F5F5FF;
}
.calendar-day-previous {
	display: flex;
	flex-direction: column;
	background: #F5F5F5;
}
.calendar-cell {
	border: 1px solid #ddd;
	padding: 5px;
	text-align: center;
}
.calendar-cell-elapsed {
	border: 1px solid #ddd;
	padding: 5px;
	text-align: center;
	background: rgba(0,0,0,0.05);
}
.calendar-cell-event-t1 {
	border: 3px solid #22F;
	background: #FFF;
	color: #26F;
	padding: 3px;
	text-align: center;
}
.calendar-cell-event-t2 {
	border: 3px solid #2C8;
	background: #FFF;
	color: #26F;
	padding: 3px;
	text-align: center;
}
.calendar-cell-event-t3 {
	border: 3px solid #C82;
	background: #FFF;
	color: #26F;
	padding: 3px;
	text-align: center;
}
.calendar-cell-event-t4 {
	border: 3px solid #F22;
	background: #FFF;
	color: #26F;
	padding: 3px;
	text-align: center;
}















/* ###################################### */
/* ########## WAIVER FORM VIEW ########## */
/* ###################################### */

.waiver-container {
	max-width: 750px;
	margin: auto;
	margin-bottom: 50px;
}

.waiver-container-form {
	display: flex;
	flex-direction: column;
	margin: 5px;
}

.waiver-form-header-img {
	width: 250px;
	height: 200px;
	margin: auto;
	margin-bottom: 50px;
}

.waiver-form-group-row {
	display: flex;
	flex-direction: row;
}

.waiver-form-group-col {
	display: flex;
	flex-direction: column;
	width: calc(100% - 20px);
	margin: 10px;
}

.waiver-form-legal-text {
	font-size: 16px;
	color: #000;
}

.waiver-form-gentext {
	font-weight: bold;
	font-size: 16px;
	color: #000;
}

.waiver-form-label {
	font-size: 14px;
	font-style: italic;
	color: #555;
	padding: 10px;
	border-top: 2px solid #000;
}

.waiver-form-canvas {
	width: 100%;
}

.waiver-form-canvas-element {
	width: 100%;
	height: 150px;
}

.waiver-form-button {
	background: #FFF;
	color: #24F;
	border: 2px solid #24F;
	font-size: 14px;
	font-weight: bold;
	border-radius: 10px;
	padding: 5px;
	width: 100%;
}

.waiver-form-button:hover {
	background: #24F;
	color: #FF0;
	border: 2px solid #24F;
}

.waiver-form-button:active {
	background: #24F;
	color: #FFF;
	border: 2px solid #24F;
}









/* ############################# */
/* ########## PROFILE ########## */
/* ############################# */

.rep-profile-container {
	width: max-content;
	margin: auto;
}

.rep-profile-img {
	display: flex;
	align-items: center;
	justify-content: center;
}

.rep-profile-img-img {
	width: 100px;
	height: 100px;
	border-radius: 50px;
}

.rep-profile-name {
	display: flex;
}

.rep-profile-name-id {
	color: #48C;
	text-decoration: underline;
	font-weight: bold;
	font-size: 16px;
	margin: 10px;
}

.rep-profile-name-full {
	color: #000;
	font-weight: bold;
	font-size: 16px;
	margin: 10px;
}

.rep-profile-name-user {
	color: #555;
	font-style: italic;
	font-size: 12px;
	margin: 10px;
}

.rep-profile-created {
	color: #555;
	font-style: italic;
	font-size: 12px;
	margin: 10px;
}

.rep-profile-tier {
	color: #000;
	font-weight: bold;
	font-size: 16px;
}

.rep-profile-email {
	color: #555;
	font-style: italic;
	font-size: 16px;
}

.rep-profile-headline {
	color: #000;
	font-size: 16px;
	margin-bottom: 10px;
}

.rep-profile-bio {
	color: #000;
	font-size: 16px;
	max-width: 225px;
}

.rep-profile-edit {
	margin: 10px;
}

.rep-profile-edit-link {
	color: #48C;
	text-decoration: underline;
	font-weight: bold;
	font-size: 12px;
}



/* ################################## */
/* ########## PROFILE EDIT ########## */
/* ################################## */

.profile-avatar-group {
	margin: 5px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

.profile-avatar-group-subgroup {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.profile-avatar-img-preview {
	height: 100px;
	width: 100px;
	border-radius: 50px;
}

.profile-avatar-img-label {
	
}

.profile-radio-group {
	
}

.profile-radio-label {
	
}

.profile-radio-options {
	
}

.profile-radio-options-single {
	
}

.profile-hr {
	width: 100%;
	color: #48F;
}





















































/* ############################ */
/* ########## FOOTER ########## */
/* ############################ */

.footer-expandable {
	position: fixed;
	bottom: 0px;
	left: 0px;
	height: 30px;
	width:100%;
	background: #FFF;
	border-top: 2px solid #24F;
	box-shadow: 0 .25rem .75rem rgba(0, 0, 0, 0.25);
	display: grid;
	grid-template-columns: 1fr 1fr;
	z-index: 10;
}

.footer-status {
	display: flex;
	align-items: center;
	margin-left: 10px;
}

.footer-status-indicator-ok {
	width: 20px;
	height: 20px;
	background: #00FF00;
	border-radius: 10px;
}

.footer-status-indicator-warn {
	width: 20px;
	height: 20px;
	background: #FFFF00;
	border-radius: 10px;
}

.footer-status-indicator-fail {
	width: 20px;
	height: 20px;
	background: #FF0000;
	border-radius: 10px;
}

.footer-status-text {
	color: #555;
	font-size: 12px;
	margin-left: 10px;
}

.footer-copyright {
	
}

.footer-copyright p {
	font-size: 12px;
	color: #555;
	text-align: right;
	margin: 0px;
}

.footer-copyright p a {
	color: #48C;
	text-decoration: none;
}