/*
 * Z-indices:
 * 100 menu
 * 200 dropdown menu
 * 300 modal
 */

/* ┌─────────────────╮
 * |Global           |
 * └─────────────────╯*/
@font-face { font-family: 'Manrope'; font-weight: 300; src: url('/common/fonts/manrope-v4-latin-300.woff2') }
@font-face { font-family: 'Manrope'; font-weight: 500; src: url('/common/fonts/manrope-v4-latin-500.woff2') }
@font-face { font-family: 'Manrope'; font-weight: 800; src: url('/common/fonts/manrope-v4-latin-800.woff2') }
@font-face { font-family: 'Inter'; src: url('/common/fonts/inter.woff2') format('woff2-variations'); font-weight: 1 999; font-stretch: 75% 125%; font-style: oblique 0deg 20deg }

/* without overflow-x: hidden, the position: fixed of the menu can break on narrow mobile pages. */
html { scrollbar-gutter: stable }
html, body { min-height: 100vh/*; overflow-x: hidden*/ }
body { color: #444; font: 14px Inter; background: white;

	/* From the style guide from Relay */
	--packchainOrange: #ff5100;
	--mediumGray: #8d8c8c;
	--lightGray: #d8dada;
}
table { border-collapse: collapse }
th { text-align: left }
th, td { vertical-align: top }
label { user-select: none }
code { color: #789 }


/* ┌─────────────────╮
 * |Custom Elements  |
 * └─────────────────╯*/
.small { line-height: 115%; font-size: 85% !important }
.time { opacity: .5; white-space: nowrap }

/* Alerts */
div.success, div.error { padding: .2em 1em; display: table; min-width: 10em; cursor: pointer; margin-bottom: .5em }
div.success { background-color: #bfb; border-top: 2px solid #0a0; border-bottom: 2px solid #0a0;  color: #040 }
div.error { background-color: #fff6bf; border-top: 2px solid #eb2; border-bottom: 2px solid #eb2; color: #550 }

/* Dates */
.localDate { line-height: 1.2 }
.localDate span { white-space: nowrap }
.localDate .time { opacity: .6 }

/* Important heading */
.important { color: black !important; text-decoration: none; font-weight: 900; line-height: 1.1 }
a.important:after { content: '›'; display: inline; font-size: 150%;
	position: relative; top: 2px; left: 3px; color: var(--packchainOrange) }
.indent { padding-left: 1.5em; }

/* Print Styles */
.print { display: none }
@media print {
	.noPrint { display: none !important }
	.print { display: inherit }
}


/* ┌─────────────────╮
 * |Layout           |
 * └─────────────────╯*/
#content { position: relative; box-sizing: border-box; max-width: 1450px; min-height: 100vh; padding: 0 55px 30px 55px; line-height: 1.6 }

#content .info { display: flex; position: absolute; top: 5px; right: 55px; font-size: 16px; font-weight: bold }
#content .info .companyName { text-transform: capitalize; opacity: .5; margin-right: 20px }
#siteList { position: absolute; top: 100%; background: white; border: 1px solid #ccc; border-radius: 5px; z-index: 200;
	padding: 5px 10px; box-shadow: 0 0 5px #0004; font-size: 80%; max-height: calc(100vh - 80px); overflow-y: auto }
#siteList a { display: block }


@media (max-width: 1024px) {
	#content { padding: 0 15px 50px 15px }
}


/* ┌─────────────────╮
 * |Menu             |
 * └─────────────────╯*/
slide-menu > .menu { height: 100vh; background: #333 }

#menuScroll { overflow-y: auto; overflow-x: hidden; height: 100% }


#btnMenu { display: none; position: absolute; left: 100%; z-index: 1000;
	color: white; text-decoration: none; background: rgba(0,0,0,0.7); font-size: 30px; font-weight: bold; /* change this value to increase/decrease button size */
	padding: 0 8px 1px 8px; border-bottom-right-radius: 10px }



#menuScroll .logo { display: flex; align-items: center; justify-content: center;
	box-sizing: border-box; min-height: 100px; font-size: 110%;
	color: white; background: #231f20; border-bottom: 1px solid #333 }
/*#menuScroll .logo img { width: 90px }*/

#menuScroll ul a { display: block; position: relative; color: white; text-decoration: none; padding: 7px 10px; font-size: 14px }
#menuScroll ul { margin: 0; padding: 0; list-style-type: none }
#menuScroll > ul { padding-left: 23px;  }
#menuScroll ul li.subMenu > a { text-transform: uppercase; color: #fff8; font-size: 11px; }
#menuScroll ul li.subMenu > a:after { content: '▶'; position: absolute; top: 11px; right: 10px; font-size: 70%; opacity: .5; transform: rotate(90deg) }



#menuScroll > ul > li { padding-bottom: 23px }
#menuScroll li a:hover { background: #404041 }
#menuScroll hr { height: 1px; background-color: #333;	border: none }

/* Selected menu items .*/
#menuScroll .selected a { color: var(--packchainOrange) }



/* ┌─────────────────╮
 * |Header           |
 * └─────────────────╯*/
.header { box-sizing: border-box; min-height: 100px; margin: 0 -30px 20px -30px; padding: 8px 10px;
	color: #333; text-align: center; border-bottom: 1px solid #eee; line-height: 1;
}

@media (max-width: 1024px) {
	.header { margin: 0 -15px 20px -15px !important }
}

.header h1 { margin: 10px 0; font-size: 300%; font-weight: 300 }
.header h2 { font-weight: 300; color: #666; padding: 0; margin-top: 0 }

/* Main header at top of page */
.header3 { display: flex; width: 100%; padding: 50px 0 20px 0; justify-content: space-between; flex-wrap: wrap }
.header3 h1 { flex: 1 }



/* ┌─────────────────╮
 * |Content          |
 * └─────────────────╯*/

/* Text styles */
h1 { margin: 0 }
h2, h3, h4, h5, h6 { margin-bottom: .1em; color: #444 }
h1+p, h2+p, h3+p, h4+p, h5+p, h6+p { margin-top: .1em }

section { border: 1px solid #002d73; width: 100%; border-radius: 10px }
section header { background-color: #002d73; color: white; font-weight: bold; padding: 3px 10px; border-top-left-radius: 8px; border-top-right-radius: 8px }

a,
a:visited { color: #2196F3; text-decoration: none }
a:active,
a:hover { color: var(--packchainOrange) }



/* ┌─────────────────╮
 * |Project Review   |
 * └─────────────────╯*/
.projectReview { display: flex; flex-wrap: wrap }
.projectReview .col1 { flex: 1; margin-right: 40px }
.projectReview .col2 { width: 250px; max-width: 40% }

.box { margin-bottom: 20px }
.box .title { display: flex; justify-content: space-between; align-items: center; padding: 2px 15px; background: var(--lightGray);
	border-radius: 6px 6px 0 0; border: 1px solid var(--lightGray) }
.box .content { background: white; border-radius: 0 0 6px 6px; border-left: 1px solid var(--lightGray);
	border-right: 1px solid var(--lightGray); border-bottom: 1px solid var(--lightGray); padding: 20px  15px}

@media (max-width: 1024px) {
	.projectReview .col1 { flex: 1; margin-right: 20px }
}
@media (max-width: 512px) {
	.projectReview { flex-wrap: wrap }
	.projectReview .col1 { width: 100%; max-width: 100%; order: 1; margin-right: 0 }
	.projectReview .col2 { width: 100%; max-width: 100%; order: 0; flex-basis: auto }
}



/* ┌─────────────────╮
 * |CK Editor        |
 * └─────────────────╯*/
.ck-editor__editable_inline { min-height: 85px }
@media print {
	.ck-editor__editable_inline { min-height: 100px }
}

figure { margin: 0; clear: both }
figure.image_resized img { width: 100% }
.image-left { float: left; clear: both; margin: 0 20px 20px 0 }
.image-right { float: right; clear: both; margin: 0 0 20px 20px }
figure.image-center { margin: 0 auto }


/* Undo ck-editor style that makes block image centered. */
/*.ck-content .image img { margin-left: 0 !important; margin-right: 0 !important }*/
.ck-content .image:not(.image-center) { text-align: inherit; margin-left: 0 !important; margin-right: 0 !important }
.ck-content .image img { min-width: initial !important }

.ck.ck-editor__editable:not(.ck-editor__nested-editable).ck-focused { box-shadow: none !important }

/* Reduce width of heading selector */
.ck.ck-dropdown.ck-heading-dropdown .ck-dropdown__button .ck-button__label { width: 5em !important }



/* ┌─────────────────╮
 * |Mobile           |
 * └─────────────────╯*/
@media (max-width: 768px) {

	.hide-lt-sm { display: none }

	/*#menu { position: fixed; margin-left: -225px }*/

	/* Reduced left and right padding */
	div.header { margin: 0 -10px 0 -10px }

	/*#slideContainer { overflow-x: hidden }  So we can drag the slider w/o a horizontal scrollbar messing it up. */
	#content { padding: 5px 5px 30px 5px; width: 100% }

	/* Move the range templates to the bottom of the date picker, adjust border radii. */
	.litepicker .container__main { flex-direction: column-reverse }
	.litepicker .container__months { border-top-left-radius: 3px; border-bottom-right-radius: 0 }
	.litepicker[data-plugins*="ranges"] > .container__main > .container__predefined-ranges {
		display: grid; grid-template-columns: repeat(3, 2fr); border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-right-radius: 3px }
	.litepicker[data-plugins*="ranges"] > .container__main > .container__predefined-ranges button { font-weight: bold; text-align: center !important; padding: 12px 5px !important }
}
@media (max-width: 480px) {
	body { font-size: 16px }
}