div.rendering { display: block; position: relative; top: 0; left: 0; width: 100%; height: 100%; background: url() var(--col-main) no-repeat center center; background-size: cover;}
#wrp-login {background: #fff;}
#wrp-login > div:first-child {padding: 0px; background: #fff !important;}
#wrp-login div.logo2 { width: 100%; max-width: 100%; margin: 0 auto; padding: 50px; position: absolute; top: auto; transform: none; bottom: 0; left: 0; height: 450px; max-height: 50%}
#wrp-login div.logo3  { display: block; position: absolute; top: 50%; left: 0px; width: 100%; max-width: 100%; transform: translateY(-50%);}
#wrp-login div.logo3  img { max-width: 80%; display: block; margin: 0 auto;}
#wrp-login div.logo2 img { width: 100%; height: 100%; object-fit: contain; object-position: left bottom; max-width: 100%; }
#wrp-login > div:first-child div.logo-builders { display: flex; position: absolute; top: 40px; left: 50%; transform: translateX(-50%); width: 100%; gap: 40px; justify-content: center; align-items: center; max-width: calc(100% - 80px)}
#wrp-login div.logo-builders img { height: 50px; display: block;}

div.award { position: absolute; top: 50%; left: 50%; transform: translate3D(-50%, -50%, 0); display: flex; flex-direction: column; gap: 70px; justify-content: center; align-items: center; padding: 50px 20px; max-height: 100vh}
img.trophy { max-width: 110px}

footer div.disclaimer { max-width: 100%; display: flex; justify-content: space-between; gap: 50px; padding: 20px 0}
div.login-copyright { max-width: 100%; display: flex; justify-content: center; gap: 50px; padding: 20px 0}
div.login-copyright p { max-width: 100%; text-align: left !important;}
div.login-copyright img { height: 20px}

div.portal-header { padding-top: 100px;  }
div.portal-header div.title { font-size: 60px; height: 114px; padding-top: 30px; font-weight: 200; display: block; width: 100%; position:relative; margin-bottom: 20px; text-align: right; line-height: 1; color: #000}
div.portal-header div.title div { position:absolute; left:0; bottom: 10px; height: 100%; width: 720px; background:url() no-repeat left bottom; background-size: contain; }
img.login-logo { display: block; width: 60%; max-width: 190px; margin: 0 auto 70px;}

/*div.files-nav { display: none;}*/

div.files-nav { padding: 30px 0 30px; }
div.files-nav div.option-block label { font-size: 12px; }
div.files-nav div.option-block a { color: #000; opacity: .4}
div.files-nav div.option-block a.active { color: var(--col-main); opacity: 1;}

div.files-nav a[data-mode="tree"] { display: none !important;}

div.selector {border: 1px solid var(--col-main);}
div.selector.selected {     background-image: url(/lib/img/white/checkmark.svg); background-color: var(--col-main);}

header, header nav, header.active div.logo, div.quick-menu p { background-color: var(--col-main);}
header nav ul > li:hover { background-color: #fff;}
header nav > ul > li > a:hover { background-color: #fff; border-bottom: 0}
header nav ul > li:hover a { color: var(--col-main) !important}

div.login h1 { text-align: center;}
#wrp-login p{ text-align: center;}
#wrp-login div.login { width: 100%; padding-bottom: 50px}
#wrp-login div.registration { max-width: 600px; margin: 0 auto}
div.login-copyright { padding-left: 20px; padding-right: 20px}

/*header div.logo img { filter: invert(1);}*/

a { color: var(--col-main)}

/*div.filename a.preview { color: #444; }*/

div.files-nav a.worksheet { display: inline-block; width: 216px; vertical-align: middle; text-align: center; padding: 0;     line-height: 36px;    border: 2px solid #9e9489;    padding: 0 20px;    font-size: 14px;    font-weight: 700;    text-transform: uppercase;    letter-spacing: 1px; color: #fff; background: #9e9489}


header div.logo { padding: 10px 0}
header div.logo img { height: 40px;}
@media only screen and (max-width: 1440px) {
#wrp-login > div:first-child div.logo-builders img { height: 30px;}
}
@media only screen and (max-width: 880px) {
	#wrp-login > div { display: block; width: 100% !important; text-align: left; }
	#wrp-login > div:first-child { height: 640px;}
	#wrp-login > div:last-child { min-height: 0; height: auto;}
	#wrp-login div.login { top: 0; transform: none; padding-top: 50px;}
	img.login-logo { margin: 0 auto 50px;}
	img.mazzone { margin: 70px auto 50px;}
	#wrp-login, article#login { min-height: 100vh; height: auto; position: relative;}
	article#login { padding: 0}
#wrp-login > div:first-child {padding: 0px; }
div.login-copyright { position: relative; padding-bottom: 20px}
div.login-copyright img { height: 12px}

	div.portal-header { padding-top: 40px;}
	div.emblem-title { display: block; text-align: left; font-size: 32px;}
	div.files-nav { padding-top: 20px; padding-bottom: 10px;}
	div.file { font-size: 16px;}

	div.portal-header div.title div { max-width: 50%}
	div.portal-header div.title { font-size: 48px;}

#wrp-login div.logo2 { padding: 20px; max-height: 50%}
#wrp-login div.logo2 img { }
#wrp-login > div:first-child div.logo-builders { top: 20px; right: 20px; }
#wrp-login div.logo-builders img { width: 140px; max-width: 80%; }

#wrp-login p { font-size: 14px}

div.award { gap: 30px; }
img.trophy { max-width: 40px}

footer div.disclaimer { justify-content: center;  align-items: center; gap: 30px; flex-direction: column-reverse;}
footer div.disclaimer p { text-align: center;  }

}

@media only screen and (max-width: 600px) {
img.login-logo { max-width: 120px}
div.portal-header div.title div { width: 120px}
div.portal-header { padding-top: 10px}
div.portal-header div.title { padding-top: 50px}
/*	#wrp-login > div:first-child { height: 400px;}*/
/*	#wrp-login > div:last-child { min-height: calc(100vh - 400px); height: auto;}*/
/*	div.emblem-rendering { height: 360px; margin-top: 40px;}*/
/**/
/*	#wrp-login div.login { padding-top: 50px;}*/
	#wrp-login { margin-top: 0}
	div.portal-header div.title { font-size: 24px}
	div.portal-header div.title div { bottom: 5px}
	header div.logo { padding: 22px 0 0}
	header div.logo img { height: 20px}

		#wrp-login > div:first-child { height: 400px;}
		#wrp-login div.login { padding-top: 20px}
 
 div.folder-info div.filename {font-size: 18px; line-height: 36px;}
 #fileholder.list div.file div.filename { font-size: 16px}
 #fileholder.list div.folder-info { padding-left: 50px; background-position: 25px center; background-size: 20px 15px;}
 div.folder-files { padding-left: 20px}
 div.selector { width: 16px; height: 16px; margin-top: -8px}

 #wrp-login div.login { padding-bottom: 40px}
 #wrp-login > div:first-child div.logo-builders { gap: 0px;}
 #wrp-login > div:first-child div.logo-builders img { height: 20px;}
 
}



@media only screen and (max-width: 1280px) {
div.grid-main > div:first-child { width: 30%;}
div.grid-main > div:last-child { width: 70%;}
div.grid-main div.logo { max-width: 50%; }

.grid-worksheet div.title { margin-bottom: 50px}

}
@media only screen and (max-width: 1080px) {
div.grid-worksheet > div:first-child { display: none}
div.grid-worksheet > div:last-child { width: 100%; padding: 40px 20px; margin-left: 0px;}



	.grid-worksheet div.custom-1 > div:first-child { width: 100%; display: block;     text-align: left;    margin-bottom: 6px;}
	.grid-worksheet div.custom-1 > div:last-child { width: 100%; display: block }

	div.grid-main > div:first-child { width: 100%; display: block; height: auto; min-height: 0}
	div.grid-main > div:last-child { width: 100%; display: block; padding: 0 20px;}
	div.grid-main div.logo { width: 200px; margin: 0 auto 0 0; position: relative; top: 0; transform: none; padding: 40px 20px 0px 20px}
	div.files-nav { padding-top: 50px;}

	.grid-worksheet div.splitter.split-3 > div { width: 100%!important; display: block!important}
	div.form-label:empty { display: none !important}
	div.files-nav a.worksheet { letter-spacing: 0; padding: 0 10px; text-align: center; width: 160px; font-size: 12px} 

	.grid-worksheet div.title { font-size: 22px}

#wrp-login > div:first-child div.logo-builders { gap: 0px; max-width: calc(100% - 40px)}
#wrp-login div.logo-builders img { height: 24px; display: block;}
/*#wrp-login div.logo3  { top: 70px; right: 20px; width: 400px}*/

}
