@import "ubuntu.css";
@import "menu.css";

@media screen and (orientation: landscape) {
	:root { 
		--font-size-largest: 22pt;	
		--font-size-large2: 18pt;
		--font-size-large: 16pt;
		--font-size-normal: 10pt;
		--font-size-small: 9pt;
		
		--page-narrow-width: 350px;
		--page-wide-width: 100%;
		
		--small-popup-max-width: 350px;
		--large-popup-max-width: 800px;
	}
}
@media screen and (orientation: portrait) {
	:root { 	
		--font-size-largest: 24pt;
		--font-size-large2: 20pt;
		--font-size-large: 18pt;
		--font-size-normal: 16pt;
		--font-size-small: 14pt;
		
		--page-narrow-width: 75vw;
		--page-wide-width: 100%;
		
		--small-popup-max-width: 75vw;
		--large-popup-max-width: 90vw;
	}
	
	div.tickets input[type=text].search {
		max-width: 30% !important;
	}
	
	.landscapeOnly {
		display: none;
	}
}

@media print { 
	.onlyprint { display: block !important;	}
	.noprint { display: none !important ;}
}

/*@media screen and (max-width: 1000px)*/

:root {
	--font-color-light: #888;
	--font-color: #666;
	--font-color-dark: #555;
	
	--highlight-light-color: #f2f2ff; 	/*#27AAE1; cdms light blue */
	--highlight-color: #27AAE1; 		/* cdms light blue */
	--highlight-dark-color: #204096; 	/* cdms dark blue */
	
	--color1: rgb(76, 132, 188);	/* steel blue */
	--color2: rgb(196, 212, 236); 	/* spindle */
	--color3: rgb(100, 187, 204);	/* downy */
	--color4: rgb(28, 115, 187);	/* denim */
	--color5: rgb(36, 68, 149);		/* st tropaz */
	--color6: rgb(38, 172, 227);	/* curious blue */
	
	--color7: rgb(30,115,190);		/* mariner */
	--color8: rgb( 5, 179, 179);	/* pacific blue */	
	--color9: rgb(29, 103, 103);	/* elm */	
	--color10: rgb(113, 82, 123);	/* salt box */
	--color11: rgb(71, 84, 118);	/* fiord */
	
	--color12: rgb(111,178,201);	/* glacier */
	--color13: rgb(200,197,204);	/* gray suit */
	--color14: rgb(243, 246, 246);	/* porcelain */
		
	--transition-speed: .2s ease all;
}


* {
	font-family: 'Ubuntu', 'Trebuchet MS', Verdana, sans-serif;
	font-size: var(--font-size-normal);
	transition: var(--transition-speed);
}

body { 
	padding: 0px; /*5px;*/
	margin:0;
}

div.narrow { 
	max-width: var(--page-narrow-width);
	margin: auto;
	padding: 10px;
}

div.narrow > div { 
	width: 100%;
	margin: auto;
	padding-top: 25px;
	padding-bottom: 25px;
	color: var(--font-color);
}

div.wide { 
	max-width: var(--page-wide-width);
	margin: auto;
	padding: 10px;
	
}

div.flexcenter  {
	display: flex;
	align-items: center;
	justify-content: center;	
}

div.cdmslogo img {
	margin: auto;
	display: block;
	width: 200px;
}


a {
	text-decoration: none;
}

input[type=button], button { 
	border: 0px;	
}

input[type=button]:hover, button:hover {
	/*opacity: 0.8;*/
	filter: saturate(2) !important;	
	cursor: pointer;
}

input[type=checkbox], label {
	cursor: pointer;
}

input[type=text], input[type=password], textarea, select {
	background-color: var(--highlight-light-color); /*#eeeeff;*/
	border-radius: 5px;
	border: 1px solid #dddddd;
	/*outline: none;*/
	padding: 5px;
	color: var(--font-color);
}

input[type=file] {
	opacity: 0;
	width: 0px;
}

::placeholder {
	color: var(--font-color-light);	
	font-size: var(--font-size-small);
	font-style: italic;
}

form { 
	display: inline;
}

.fl { 
	float: left;
}
.fr {
	float: right;
}

.hidden {
	display: none !important;
}

/* simulate <nobr> */
button {
	white-space: nowrap;
}

button.blue {
	background-color: var(--highlight-dark-color);
	color: white;
}

button.red {	
	background-color: #ff5e5a;
	color: white;
}

button.green {
	background-color: #005839;
	color: white;
}

button.orange {
	background-color: #da664b;
	color:white;
}

button.yellow {
	background-color: #ffdb58;
	color: white;
}

button.fontblack {
	color: black !important;
}

button.fat { 
	padding: 15px 30px 15px 30px;
	border-radius: 15px;
	font-weight: 700;	
}

button.slim {
	padding: 7px;
	border-radius: 5px;
}

button.superslim {	
	border-radius: 5px;	
}

button.superfat{
	padding: 15px 30px 15px 30px;
	border-radius: 15px;
	font-weight: 700;
	height: 75px;
	min-width: 175px;
	font-size: var( --font-size-large );
}

button.main {
	background-image: url('/img/baseline_menu_black_24dp.png');
	background-position: 7px; 
	background-repeat: no-repeat;
	padding-left: 35px;
}

button.print {
	background-image: url('/img/baseline_print_black_24dp.png');
	background-position: 7px; 
	background-repeat: no-repeat;
	padding-left: 35px;
}

button.logout {
	background-image: url('/img/baseline_logout_black_24dp.png');
	background-position: 7px; 
	background-repeat: no-repeat;
	padding-left: 35px;
}

button.logoutslim {
	padding-left: 25px;
	background-size: 15px;
}


button.newticket {
	background-image: url('/img/baseline_add_black_24dp.png');
	background-position: 7px; 
	background-repeat: no-repeat;
	padding-left: 35px;
}

button.reports {
	background-image: url('/img/baseline_bar_chart_black_24dp.png');
	background-position: 7px; 
	background-repeat: no-repeat;
	padding-left: 35px;
}

button.tickets {
	background-image: url('/img/baseline_list_black_24dp.png');
	background-position: 7px; 
	background-repeat: no-repeat;
	padding-left: 35px;
}

button.close {
	background-image: url('/img/baseline_close_black_24dp.png');
	background-position: 7px; 
	background-repeat: no-repeat;
	padding-left: 35px;
}

button.save {
	background-image: url('/img/baseline_save_black_24dp.png');
	background-position: 7px; 
	background-repeat: no-repeat;
	padding-left: 35px;
}

button.prev {
	background-image: url('/img/baseline_arrow_left_black_24dp.png');
	background-position: 7px; 
	background-repeat: no-repeat;
	padding-left: 35px;
}

button.next {
	background-image: url('/img/baseline_arrow_right_black_24dp.png');
	background-position: 7px; 
	background-repeat: no-repeat;
	padding-left: 35px;
}

.color1 {
	color: white;
	background-color: var( --color1 );
}
.color2 {
	color: white;
	background-color: var( --color2 );
}
.color3 {
	color: white;
	background-color: var( --color3 );
}
.color4 {
	color: white;
	background-color: var( --color4 );
}
.color5 {
	color: white;
	background-color: var( --color5 );
}
.color6 {
	color: white;
	background-color: var( --color6 );
}

/* hide disabled <select> options */
/*
select option[disabled] {
    display: none;
}
*/

/*button.disabled {*/
select.disabled, button.disabled, input[type=text].disabled {	
	background-color: #aaaaaa !important;
	pointer-events: none !important;
	opacity: 75%;
	cursor: not-allowed;
}

img.disabled { 
	pointer-events: none !important;
	opacity: 75%;
	cursor: not-allowed;
}

a.disabled {
	pointer-events: none !important;
	filter: grayscale(100%);
	cursor: not-allowed !important;
}

button.autoblock {
	margin: auto;
	display: block;
}

.hover:hover {
	cursor: pointer;
}



div.popupwarning {
	/*margin-bottom: 25px;	*/
}


div.popupticket {	
	width: var(--large-popup-max-width);
	max-height: 85vh;
	/*overflow-y: auto;*/
	top: 3%;
	left: calc(50% - ( var(--large-popup-max-width) / 2) );
	padding: 15px;	
}

div.popupticket div.header, div.popupticket div.header  { 
	/*height: 50px;*/
	background-color: var(--color11);
	color: white;
	padding: 15px 0px 15px 15px;
	margin-bottom: 15px;
}
div.popupticket div.header, div.popupticket div.header * {	
	font-size: var(--font-size-large2);	
}

div.popupticket div.footer {
/*div.popup div.footer {*/
	height: 50px;
	margin-top: 10px;
}

div.popupticket div.content {	
	max-height: calc( 75vh - 200px );
	overflow-y: auto;
}

/*
div.popupticketupdate {
	border: 2px solid black !important;
	resize: both !important
	overflow: both !important;
}
*/

div.popupticketupdate p {
	display: block;	
}

div.popupticketupdate p:after {
	content: "";
	display: table;
	clear: both;
}

div.popupticketupdate p > span:first-child {
	float: left;
	width: 33%;
	font-weight: bold;
	padding: 5px;
}

div.popupticketupdate p > span:nth-child(2) {
	float:left;
	width: 60%;
	background-color: #f6f6f6;
	border-radius: 5px;	
	padding: 5px;
}

div.popupticketupdate textarea {
	width: 100%;
}



div.tickethistorycontainer {
	max-height: 300px;
	overflow-y: auto;
}

div.tickethistorycontainer span.tickethistoryheader {
	display: block;
	color: var(--highlight-dark-color);
	font-size: var(--font-size-small);
}
div.tickethistorycontainer span.tickethistorydetails {
	display: block;
	
	padding-bottom: 5px;
	padding-top: 5px;
}

div.tickethistorycontainer hr {
	margin-top: 15px;
	margin-bottom: 15px;
	margin-left: auto;
	margin-right: auto;
	border-style: inset;
	border-width: 1px;
	color: grey;
	width:95%;
}




div.popupuser {	
	width: var(--large-popup-max-width);
	max-height: 75vh;
	/*overflow-y: auto;*/
	top: 3%;
	left: calc(50% - ( var(--large-popup-max-width) / 2) );
	padding: 15px;
	
}

div.popupuser div.header, div.popupuser div.header * {
	height: 50px;
	font-size: var(--font-size-large);
}

div.popupuser div.footer {
	height: 50px;
	margin-top: 10px;
}

div.popupuser div.content {	
	max-height: calc( 75vh - 200px );
	overflow-y: auto;
}

div.popupuser p {
	display: block;	
}

div.popupuser p:after {
	content: "";
	display: table;
	clear: both;
}

div.popupuser p > span:first-child {
	float: left;
	width: 33%;
	font-weight: bold;
	padding: 5px;
}

div.popupuser p > span:nth-child(2) {
	float:left;
	width: 60%;
	background-color: #f6f6f6;
	border-radius: 5px;	
	padding: 5px;
}

div.popupuser textarea {	
	height: 75px;
	width: 50%;
}

div.footer p.notes {
	font-style: italic;
}


div.buttonsblock > button:not(:first-child) {
	margin-left: 10px;
}

div.popup { 
	position: absolute;
	z-index: 999;
	border: 2px solid #dddddd;
	background-color: white;
	
	border-radius: 5px;		
	box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
	
	/*
	border: 2px solid black ;
	resize: both ;
	overflow: both;	
	*/
}

div.smallpopup { 
	width: var(--small-popup-max-width);
	top: 25%;
	left: calc(50% - ( var(--small-popup-max-width) / 2) );
	padding: 15px;	
}

div.smallpopup p {
	display: block;
	padding-bottom: 25px;
}
div.smallpopup p.message img {
	float: left;
	width: 35px;
	margin-right: 15px;	
	margin-bottom: 15px;
}



body.blur *:not(.popup *) {  
  filter: blur(1px);
  pointer-events:none;    
}

.popup, .popup * { 
	filter: blur(0px) !important;
	pointer-events: auto !important;
}


body.waiting, body.waiting * {
    cursor: wait;	
}

div.tickets input[type=text].search {
	background-image: url('/img/search.png');
	background-position: 7px 2px; 
	background-repeat: no-repeat;
	padding: 5px 5px 5px 35px;
	margin-left: 25px;
	width: 150px;
	background-color: white;
}

div.tickets input[type=radio].tix_status {
	margin-left: 15px;
}


div.tickets div.listing {
	margin-top: 25px;
	height: 500px;
	overflow-y: auto;			
}

div.tickets table {
	table-layout:fixed;	
	width: 100%;
	/*height: 50vh;*/
}
div.tickets	div.listing td {
	overflow: hidden;
	height: 1vh;
}
div.tickets div.listing th[data-sort="title"] {
	width:25%;
}

div.tickets	div.listing tr.statusnew td {
	color: var( --color4 );
	font-weight: bold;
}

div.pagination { 
	padding-top: 25px;
	/*
	position: fixed;
	bottom: 10px;
	right: 10px;
	*/
	
}
/*div.pagination > button {*/
div.pagination > * {
	margin-left: 10px;
}
div.pagination > span {
	display: inline-block;
	margin-left: 10px;
	margin-top: 5px;
}


div.greeting {
	text-align: center;
	font-size: var(--font-size-largest);
}

	
div.inputfields input, div.inputfields select, div.inputfields textarea {
	margin-top: 5px;
	margin-bottom: 10px;
	width: 95%;	
}

div.inputfields p.notice {
	font-style: italic;
	color: var( --color1 );	
}

div.login div.options {
	padding-bottom: 50px;
	padding-top: 30px;
}

div.login div.options * { 
	font-size: var(--font-size-small);	
}


span.filelistcontainer {	
	display:block;
	
	background-color: #f6f6f6;
	color: var(--font-color-light);	
	font-size: var(--font-size-small);
	font-style: italic;

	min-height: 25px;
	width: 100%;
}

span.filelistcontainer img {
	vertical-align:middle;
}

span.filelistheader {
	display:block;
	font-weight: bold;
	padding-bottom: 15px;
	cursor: pointer;
}

span.filelistfiles span {
	cursor: pointer;
}

span.required {
	color: red;
}


table.clean {
	border-collapse: collapse;
	width: 100%;
	text-align: left;
}

table.clean thead tr {
	border-bottom: 1px solid #aaaaaa;
	background-color: var( --color3 );
}

table.clean thead th {
	/*color: var(--font-color-dark);*/
	color: white;
	/*font-variant: small-caps;*/
}

table.clean tbody td {
	color: var(--font-color);
}

table.clean th,
table.clean td {
	padding: 10px 12px;
}

table.clean th[data-sort]:hover {
	cursor: pointer;
}

table.clean th.sort-up {
	background-image: url('/img/baseline_arrow_upward_black_24dp.png');
	background-position: right;
	background-repeat: no-repeat;
	/*transition: 0s;*/
}
table.clean th.sort-down {
	background-image: url('/img/baseline_arrow_downward_black_24dp.png');
	background-position: right;
	background-repeat: no-repeat;
	/*transition: 0s;*/
}


table.clean tbody tr {
	border-top: 1px solid #dddddd;
}

table.clean tbody tr:nth-of-type(even) {
	background-color: #f3f3f3;
}

table.clean tbody tr:last-of-type {
	/*border-bottom: 2px solid #004080; */
}

table.clean tbody tr.hover:hover td,
table.withhover tbody tr:hover td {	
	background-color: var(--highlight-light-color); /*#d9cba6; 	*/
	
	cursor: pointer;	
}

div.progressbar { 
	background-color: var( --color4 );
	border-radius: 5px;
	color: white;
	font-size: var( --font-size-small );
	text-align: center;
	width: 0px;	
	margin: 15px;
}