/* load the default Redmine stylesheet */
@import url(../../../stylesheets/application.css);
@import url(hide.css);

:root {
	--black: 				#404040;
	--white: 				#fff;
	--yellow:				#fc0;
	--yellow-darken:		#e5b700;
	--blue: 				#507AAA;
	--blue-border: 			#2c839d;
	--link-color:   		#006e90;
	--petrol:				#006779;
	--petrol-darken:		#005766;
	--gray-dark: 			#405459;
	--gray-dark-darken: 	#36474b;
	--gray-light:			#8b9aa7;
	--gray-light-darken:	#708393;
	--gray-dark-accent: 	#979797;
	--krems-bg-color: 		139, 154, 167;
	--krems-bg-alpha:  		0.07;
	
	--header-height: 140px;
	--header-padding: 10px;
	--nav-space-to-title: 20px;
	--logo-width: 115px;
	--logo-height: 100px;
	--logo-distance-to-text: 30px;
	
	--content-space-to-header: 15px;
	--content-space-before-history: 75px;
	
	--tab-bg-color-active:			var(--yellow);
	--tab-bg-color-active-hover: 	var(--yellow-darken);
	--tab-color-active:				var(--black);
	--tab-bg-color:					var(--gray-light);
	--tab-bg-color-hover: 			var(--gray-light-darken);
	--tab-color:					var(--white);
	--tab-font-weight:				normal;
	
	--btn-padding-x:				7px;
	--btn-padding-y:				7px;
	--btn-primary-bg:				var(--petrol);
	--btn-primary-bg-hover:			var(--petrol-darken);
	--btn-primary-color:			var(--white);
	
	--transition-default: 			0.3s ease;
	--transition-bg-color:			background-color var(--transition-default);
}



/* regular */
@font-face {
	font-family: "Noah";
	src: 	url('../fonts/webfonts/3AA1A0_5_0.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

/* medium */
@font-face {
	font-family: "Noah";
	src: 	url('../fonts/webfonts/3AA1A0_6_0.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
}

/* bold */
@font-face {
	font-family: "Noah";
	src: 	url('../fonts/webfonts/3AA1A0_3_0.ttf') format('truetype');
	font-weight: 600;
	font-style: normal;
}

/* bolder */
@font-face {
	font-family: "Noah";
	src: 	url('../fonts/webfonts/3AA1A0_2_0.ttf') format('truetype');
	font-weight: 900;
	font-style: normal;
}

body {
	font-family: "Noah", "Trebuchet MS", Verdana, sans-serif;
	font-size: 14px;
}
body, 
#content {
	background-color: rgba( var(--krems-bg-color), var(--krems-bg-alpha) );
}

a, a:link, a:visited {
	color: var(--link-color);
}

*,
input, 
select, 
textarea, 
button,
#quick-search #q,
.box,
div.issue,
table.list, 
.table-list,
.drdn-content,
#project-jump .drdn-trigger,
.contextual .drdn-items>a:hover,
.pagination ul.pages li:last-child,
.pagination ul.pages li:first-child {
	border-radius: 0px;
}

input,
textarea {
	font-family: system-ui;
}


/*
 * HEADER
 */
 
/* HEADER - Logo */
#header {
    background: var(--white);
	background-size: var(--logo-width) auto;
	background-repeat: no-repeat;
	background-image: url("../images/logo.png");
	background-position-y: var(--header-padding);
	background-position-x: var(--header-padding);
}

/* HEADER - General */
#header {
	box-shadow: 0 4px 10px -10px grey;
	padding: var(--header-padding);
	padding-bottom: 0px;
}
#header,
#header a {
	color: var(--black);
}
#header > h1 {
	width: auto;
    
	margin-bottom: 0px;
    margin-top: 11px;
	
	display: flex;
    flex-direction: row;
    align-items: baseline;
    
    padding: 0px;
    margin-left: calc( var(--logo-distance-to-text) + var(--logo-width));
}

/* HEADER - Breadcrumbs & Title */
#header .current-project,
#header .breadcrumbs a {
	color: var(--black);
}
#header h1 .breadcrumbs {
	display: flex;
    flex-direction: row;
    align-items: center;
}
#header h1 .breadcrumbs .separator {
	margin-left: 5px;
	margin-right: 5px;
}
#header .current-project {
	font-size: 20px;
}

/* 
 * HEADER - Top Menu 
 */
#top-menu {
	font-size: 0.9em;
	background-color: var(--gray-dark);
	color: var(--white);
}

/* 
 * HEADER - Main Menu 
 */

/* HEADER - Main Menu - Align Right */
#main-menu {
	position: relative;
    left: calc( var(--logo-distance-to-text) + var(--logo-width));
    bottom: 0;
    
    margin-top: var(--nav-space-to-title);
    margin-right: 0;
    
 
    /*
    margin-right: 0px;
    width: auto;
    */
}

/* HEADER - Main Menu - Looks */
#main-menu li a {
	padding: 10px 15px;
	border-radius: 0px;
	color: var(--gray-dark);
}
/* remove left padding of first object if menu option '+' (#new-object) is missing */
#main-menu > ul > li:first-child > a:not(#new-object) {
	padding-left: 0px;
}
#main-menu li a:hover {
	background: none;
	color: var(--gray-dark);
}

/* HEADER - Main Menu - Border Animation */
#main-menu li a:after {
	content: '';
	display: block;
	
	border-style: solid;
	border-width: 0px 0px 3px 0px;
	border-color: var(--yellow);
	
	width: 0;
	
	position: static;
	left: 0;
	bottom: 0;
	-webkit-transition: 0.3s ease;
	transition: 0.3s ease;
}
#main-menu li a:hover:after {
	width: 100%;
}
#main-menu li a.new-object:hover:after {
	width: 0;
}
#main-menu .menu-children a:after {
	content: none;
}

/* HEADER - Main Menu - Active */
#main-menu li a.selected:after {
	content: '';
	display: block;
	
	border-style: solid;
	border-width: 0px 0px 3px 0px;
	border-color: var(--yellow);
	
	width: 100%;
	
	position: static;
	left: 0;
	bottom: 0;
}

/* HEADER - Main Menu '+' */
#main-menu li a.new-object {
	background-color: var(--gray-dark);
	color: var(--white);
}
#main-menu li a.new-object:hover,
#main-menu li a.new-object:active {
	background-color: var(--gray-dark-darken);
	transition: background-color 0.3s ease;
}
#main-menu .menu-children {
	border: none;
	background-color: var(--gray-dark);
	padding: 20px;
	margin-top: 1px;
}
#main-menu .menu-children li:not(:last-child) {
	margin-bottom: 5px;
}
#main-menu .menu-children li a {
	background-color: inherit;
	color: var(--white);
}
#main-menu .menu-children li a:hover {
	background-color: inherit;
	border: 1px solid var(--white);
	transition: all 0.4s ease;
}
#main-menu .menu-children li a {
	border: 1px solid var(--gray-dark-accent);
}


/*
 * CONTENT
 */
 
#content {
	padding-top: var(--content-space-to-header);	 
}
#sidebar h3 {
	margin-top: calc( var(--content-space-to-header) + 3px);
} 

/* CONTENT - Tabs  */
#content .tabs ul {
	border-color: var(--petrol);
	padding-left: 0px;
}
#content .tabs ul li {
	padding-bottom: 1px;
}
#content .tabs ul li a {
	border:none;
	border-bottom: 1px solid var(--white);
	border-radius: 0px;
	background-color: var(--tab-bg-color);
	color: var(--tab-color);
	font-weight: var(--tab-font-weight);
	
	padding: 10px;
}
#content .tabs ul li a:hover {
	background-color: var(--tab-bg-color-hover);
	color: var(--tab-color);
	transition: var(--transition-bg-color);
}
#content .tabs ul li a.selected {
	border: none;
	border-bottom: 1px solid var(--tab-bg-color-active);
	background-color: var(--tab-bg-color-active);
	color: var(--tab-color-active);
}
#content .tabs ul li a.selected:hover {
	background-color: var(--tab-bg-color-active-hover);
	color: var(--tab-color-active);
	transition: var(--transition-bg-color);
}

/*
 * CONTENT - Buttons
 */
/* Button - General */
#content input[type="submit"] {
	border: none;
	height: auto;
	
	background-color: var(--btn-primary-bg);
	color: var(--btn-primary-color);
	
	padding-top: var(--btn-padding-y);
	padding-bottom: var(--btn-padding-y);
	padding-left: var(--btn-padding-x);
	padding-right: var(--btn-padding-x);
}
#content input[type="submit"]:hover {
	transition: var(--transition-bg-color);
}
/* Button - Primary */
#content input[type="submit"] {
	background-color: var(--btn-primary-bg);
	color: var(--btn-primary-color);
}
#content input[type="submit"]:hover {
	background-color: var(--btn-primary-bg-hover);
}

/*
 * CONTENT - List (ul, li)
 */
#projects-index li.root ul.projects {
	border-left: none;
	padding-inline-start: calc(2em - 2px);
}
#projects-index li.root ul.projects li {
	list-style-type: disc;
}

/*
 * CONTENT - Ticket / History
 */
#update:not([style="display:none;"]) + #history {
	margin-top: var(--content-space-before-history);
}


/*
 * Login
 */
#login-form {
	border: none;
	border-top: 2px solid var(--blue-border);
	border-radius: 0;
	
	background-color: var(--white);
	padding: 30px;
}
#login-form input {
	height: auto;
	padding: 15px 10px;
}
#login-form input[type=submit] {
	border: none;
	background-color: var(--petrol);
	color: var(--white);
	margin-top: 40px;
	
}
#login-form input[type=submit]:hover {
	background-color: var(--petrol-darken);
	transition: var(--transition-bg-color);
}

/*
 * FOOTER
 */
#footer {
	border: none;
	padding-top: 15px;
	padding-bottom: 15px;
}


/*
 * MOBILE - Header
 */
@media screen and (max-width: 899px) {
	#header,
	.flyout-menu {
		background-color: var(--white) !important;
	}
	#header a.mobile-toggle-button,
	.flyout-menu a {
		color: var(--gray-dark) !important;
	}
	.flyout-menu h3 {
		background-color: var(--gray-dark) !important;
		border-color: var(--gray-dark) !important;
	}
	#project-jump {
		display: none !important;
	}
}