:root{
	--roman-login-default-color : silver;
	--roman-login-back-background:#0A5894;
	--roman-login-icon-color:#0A5894;
	--re-login-inactive-color:silver;
	--roman-login-input-color:#0A5894;
	--re-login-button-background:#285F87;
	--roman-login-fieldset-background-color:silver;
	--roman-login-message-color:#0A5894;
	
	--re-login-active-color:silver;
	--roman-login-loading-color : #CC3300;
	--primus-login-primary-background-color:white;
	
	
	--wave-height:200px;
	
	--wave-height:calc((100% - 480px) / 2);
}

body{
	--primus-login-background-color: rgba(255,255,255, .7);
	--primus-form-filter-background-color: rgba(0,0,0,0.5);
	--primus-login-input-background-color:rgba(255, 255, 255, .2);
	--primus-form-input-icon-color:#CC3300;
	--primus-login-input-color:#333;
	--primus-form-red-color:#CC3300;
}
@media (prefers-color-scheme: dark) {
    body:not([theme]) {
		--primus-login-background-color: rgba(0,0,0, .7);
		--primus-login-input-color:white;
		--primus-login-input-background-color:rgba(255, 255, 255, .2);
		
		--primus-login-primary-background-color:black;
		--primus-login-primary-font-color:#E0E0E0;
		--primus-login-secondary-font-color:#B0B0B0;
		--primus-login-primary-font-color:#E0E0E0;
    }
}
@media (prefers-color-scheme: light) {
    body:not([theme]) {
		--primus-login-background-color: rgba(255,255,255, .7);
		--primus-form-filter-background-color: rgba(0,0,0,0.5);
		--primus-login-input-background-color:rgba(255, 255, 255, .2);
		--primus-form-input-icon-color:#CC3300;
		--primus-login-input-color:#333;
		--primus-form-red-color:#CC3300;
    }
}
body[theme="dark"]{
	--primus-login-background-color: rgba(0,0,0, .7);
	--primus-login-input-color:white;
	--primus-login-input-background-color:rgba(255, 255, 255, .2);
	
	--primus-login-primary-background-color:black;
	--primus-login-primary-font-color:#E0E0E0;
	--primus-login-secondary-font-color:#B0B0B0;
	--primus-login-primary-font-color:#E0E0E0;
}

#local .triangle-clip {
	  width: 100%;
	  display:none;
	  height: var(--wave-height);position:relative;
	  background: var(--primus-login-background-color);
	opacity:0;
	  clip-path: polygon(0% 0%, 0% 100%, 100% 100%);
}
#local .triangle-clip .logo{
	width:50%;
	background-size:contain;background-position: bottom;
	left:20px;
	bottom:20px;
    max-height: 70px;
	height:100%;
	position:absolute;
	background-image:url("/img/primus_logo_large_no_text.svg");
	background-repeat:no-repeat;
}
#local .triangle-clip.reverse {
    margin-top: auto;
	  background: var(--primus-login-background-color);
	  clip-path:polygon(100% 0%, 100% 100%, 0% 0%);
}

@font-face {
    font-family: re;
    font-weight: normal;
	 font-style: normal;
	src:  url('./BrNStdRg.ttf'); 
}
@font-face {
    font-family: re-hl;
    font-weight: 900;
	font-style: normal;
	src:  url('./BrNStdBl.ttf'); 
}
@font-face {
    font-family: re-bold;
    font-weight: bold;
	 font-style: normal;
	src:  url('./BrNStdBd.ttf'); 
}
* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
    -webkit-tap-highlight-color:  transparent;
	touch-action: none;
}
* {
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0) !important; 
    -webkit-focus-ring-color: rgba(255, 255, 255, 0) !important; 
    outline: none !important;
} 
body,html{
	width:100%;
	height:100%;
	margin:0;
	padding:0;background-color:var(--primus-login-primary-background-color) !important;
	overflow:hidden;
}
body { 
	font-family: re  !important;
	position:relative;
    height:100vh !important;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-size: 14px;

}
button{
	font-family: re  !important;
}
#local{
	background-size:cover;
	background-position:center center;
	background-image:url("./../img/background-menu.webp");
	position:absolute;width:100%;height:100%;
	box-shadow:0 12px 15px 0 rgba(0,0,0,.24),0 17px 50px 0 rgba(0,0,0,.19);
	background-repeat:no-repeat;
}
#local button{
	background-color:var(--primus-form-red-color);
	color:white;
	padding:15px;
	border-radius:5px;
	width:100%;
	border:none;
	outline:none;
	position:relative;
	margin-top:20px;
}
#statusbar{
    position:absolute;top:0;left:0;right:0;
}
#wrapper{
	position:absolute;top:0;left:0;bottom:0;right:0;z-index:1;
}
#local .login-seperator{
	display:flex;
	align-items:center;
	margin-bottom:10px;
}
#local .wave{
	height:var(--wave-height);
	width: 100%;
	display:none;
    min-width: 1000px;
}
#local .wave path{
	fill:var(--primus-login-background-color);

}

#local .login-seperator span:first-child,
#local .login-seperator span:last-child{
	flex:1;
	margin:-1px 5px;
	border-bottom:1px solid silver;
}

#local button > i{
	position:absolute;
	left:20px;
	top:50%;
	font-size:16px;
}
#local button > i.fa-spinner{
	animation: login_spinner 2s linear infinite;
}
@keyframes login_spinner{
	  from {
			transform: translate(-50%,-50%) rotate(0deg);
	  }
	  to {
			transform: translate(-50%,-50%) rotate(360deg);
	  }
}
#local #login-locales{
	padding:10px;
	display:flex;
	justify-content:center;
	align-items:center;
}
#local .login-locale{
	display:block;
	padding:5px;
	color:var(--primus-login-secondary-font-color);
}
#local .login-locale.active{
	color:var(--primus-login-primary-font-color);
}
* {
 box-sizing:border-box; 
}


#app{
	opacity:1;
	pointer-events:auto;
	transition:opacity 0.4s ease-in-out;
}
#app.hidden{
	opacity:0;
	pointer-events:none;
}
#login-logo{
	position:absolute;left:50%;
	transform:translateX(-50%);	
	background-image:url("./../img/primus_logo.svg");
	background-repeat:no-repeat;
	background-position:center center;
	background-size:contain;
	top:20px;
	height:200px;width:100%;
	max-width:300px;
    max-height: 20%;
}
.app-profile-background-image{
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMzcyIiBoZWlnaHQ9IjIwOCIgdmlld0JveD0iMCAwIDM3MiAyMDgiPgogIDxkZWZzPgogICAgPGxpbmVhckdyYWRpZW50IGlkPSJsaW5lYXItZ3JhZGllbnQiIHgxPSIwLjUiIHgyPSIwLjUiIHkyPSIxIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCI+CiAgICAgIDxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iI2ZmZiIgc3RvcC1vcGFjaXR5PSIwLjQiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjNTc5OWFmIiBzdG9wLW9wYWNpdHk9IjAuMzAyIi8+CiAgICA8L2xpbmVhckdyYWRpZW50PgogICAgPGxpbmVhckdyYWRpZW50IGlkPSJsaW5lYXItZ3JhZGllbnQtMiIgeDE9IjAuNSIgeTE9IjAuMDAxIiB4Mj0iMC41IiB5Mj0iMS4wMDMiIHhsaW5rOmhyZWY9IiNsaW5lYXItZ3JhZGllbnQiLz4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0ibGluZWFyLWdyYWRpZW50LTMiIHgxPSIwLjU1OCIgeTE9IjAuMDAzIiB4Mj0iMC41NTgiIHkyPSIxLjAwNyIgeGxpbms6aHJlZj0iI2xpbmVhci1ncmFkaWVudCIvPgogICAgPGxpbmVhckdyYWRpZW50IGlkPSJsaW5lYXItZ3JhZGllbnQtNCIgeDE9IjAuNTQ3IiB5MT0iMC4wMDEiIHgyPSIwLjU0NyIgeTI9IjAuNjYzIiB4bGluazpocmVmPSIjbGluZWFyLWdyYWRpZW50Ii8+CiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImxpbmVhci1ncmFkaWVudC01IiB4MT0iMC41NzUiIHkxPSItMC4wNjYiIHgyPSIwLjU3NSIgeTI9IjAuNTk1IiB4bGluazpocmVmPSIjbGluZWFyLWdyYWRpZW50Ii8+CiAgICA8Y2xpcFBhdGggaWQ9ImNsaXAtQXJ0Ym9hcmRfNSI+CiAgICAgIDxyZWN0IHdpZHRoPSIzNzIiIGhlaWdodD0iMjA4Ii8+CiAgICA8L2NsaXBQYXRoPgogIDwvZGVmcz4KICA8ZyBpZD0iQXJ0Ym9hcmRfNSIgZGF0YS1uYW1lPSJBcnRib2FyZCDigJMgNSIgY2xpcC1wYXRoPSJ1cmwoI2NsaXAtQXJ0Ym9hcmRfNSkiPgogICAgPHJlY3Qgd2lkdGg9IjM3MiIgaGVpZ2h0PSIyMDgiIGZpbGw9IiNmZmYiLz4KICAgIDxyZWN0IGlkPSJSZWN0YW5nbGVfNzI5IiBkYXRhLW5hbWU9IlJlY3RhbmdsZSA3MjkiIHdpZHRoPSIzOTEiIGhlaWdodD0iMjA4IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtOSkiIGZpbGw9IiMxMDM5NTgiLz4KICAgIDxnIGlkPSJHcm91cF83OTcyIiBkYXRhLW5hbWU9Ikdyb3VwIDc5NzIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC05OTguODE3IDMuMzM5KSIgb3BhY2l0eT0iMC40MDIiPgogICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlXzY5NCIgZGF0YS1uYW1lPSJSZWN0YW5nbGUgNjk0IiB3aWR0aD0iMzcyLjMzNSIgaGVpZ2h0PSI1ODIuNjgiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDk5OC43NDggLTIwNi4xNDMpIiBmaWxsPSIjMjc1ZTg3Ii8+CiAgICAgIDxwYXRoIGlkPSJQYXRoXzEwMDU3IiBkYXRhLW5hbWU9IlBhdGggMTAwNTciIGQ9Ik0xMTA2Ljc1MS0xMTUuMTQ0cS4wMTgsMjQuOTYzLjAzNSw0OS45MjcuMDA4LDY4LjI3Ni4wMDYsMTM2LjU1MmMwLDEuMDguMDUxLDIuMTYuMDc5LDMuMjRxLTEuNTgxLDIuNDItMy4xNjEsMGMuMDI3LTEuMDguMDc5LTIuMTYuMDc5LTMuMjRxLjAwNi05MS42MTguMDA1LTE4My4yMzVjMC0xLjA4MS4wMjQtMi4xNjMuMDM2LTMuMjQ0WiIgZmlsbD0iIzNlM2MzNiIvPgogICAgICA8cGF0aCBpZD0iUGF0aF8xMDA1OCIgZGF0YS1uYW1lPSJQYXRoIDEwMDU4IiBkPSJNMTExMC4yNzksODEuNTQ5YTEyLjI4MywxMi4yODMsMCwwLDEsNS40NjcsOC41MjRjLS4yODksMy4yMTkuNDU1LDYuNC4yNjMsOS42MzFhMTAuNjUxLDEwLjY1MSwwLDAsMS04LjksOS45MDhjLTQuNzY1Ljc2Mi0xMC4xMzctMi4yMi0xMS41MjgtNi43NDEtMS4wMzYtMy4zNy0uNDgtNi45MTItLjM0My0xMC4zODguMDMyLS44MDUuNTYyLTEuNi4wODctMi40MTYuNjM4LTMuNjA1LDIuMDg1LTYuNjg4LDUuNDgxLTguNTE1QTEyLjY3MSwxMi42NzEsMCwwLDEsMTExMC4yNzksODEuNTQ5WiIgZmlsbD0iI2Y0ZjdmYSIvPgogICAgICA8cGF0aCBpZD0iUGF0aF8xMDA1OSIgZGF0YS1uYW1lPSJQYXRoIDEwMDU5IiBkPSJNMTExMC4yNzksODEuNTQ5bC05LjQ3MiwwYTMxLjM0OSwzMS4zNDksMCwwLDAtLjA0NC00LjIxNmMtLjMzOS0yLjQ0OC44LTMuMDg4LDIuOTQ3LTIuNzYxYTIuNDcxLDIuNDcxLDAsMCwwLDMuMTYxLDBjMy44NDcuMDE3LDMuMzc4LS4zMzcsMy40MSwzLjVDMTExMC4yOTEsNzkuMjMyLDExMTAuMjgsODAuMzkxLDExMTAuMjc5LDgxLjU0OVoiIGZpbGw9IiNjYWJlYjYiLz4KICAgICAgPHBhdGggaWQ9IlBhdGhfMTAwNjAiIGRhdGEtbmFtZT0iUGF0aCAxMDA2MCIgZD0iTTExMzkuNjU0LTE4Ny43MTdxLjAxOCwyNC45NjMuMDM1LDQ5LjkyNi4wMDgsNjguMjc3LjAwNSwxMzYuNTUyYzAsMS4wODEuMDUyLDIuMTYxLjA4LDMuMjQxcS0xLjU4MSwyLjQxOS0zLjE2MSwwYy4wMjctMS4wOC4wNzktMi4xNi4wNzktMy4yNDFxLjAwNi05MS42MTcuMDA1LTE4My4yMzRjMC0xLjA4Mi4wMjQtMi4xNjMuMDM2LTMuMjQ0WiIgZmlsbD0iIzNlM2MzNiIvPgogICAgICA8cGF0aCBpZD0iUGF0aF8xMDA2MSIgZGF0YS1uYW1lPSJQYXRoIDEwMDYxIiBkPSJNMTE0My4xODIsOC45NzZhMTIuMjg0LDEyLjI4NCwwLDAsMSw1LjQ2Nyw4LjUyNGMtLjI4OSwzLjIxOS40NTQsNi40LjI2Myw5LjYzMWExMC42NTEsMTAuNjUxLDAsMCwxLTguOSw5LjkwOGMtNC43NjYuNzYyLTEwLjEzNy0yLjIyLTExLjUyOC02Ljc0MS0xLjAzNi0zLjM3LS40OC02LjkxMi0uMzQzLTEwLjM4OS4wMzItLjguNTYyLTEuNi4wODctMi40MTUuNjM3LTMuNiwyLjA4NS02LjY4OCw1LjQ4MS04LjUxNUExMi42NzEsMTIuNjcxLDAsMCwxLDExNDMuMTgyLDguOTc2WiIgZmlsbD0iI2Y0ZjdmYSIvPgogICAgICA8cGF0aCBpZD0iUGF0aF8xMDA2MiIgZGF0YS1uYW1lPSJQYXRoIDEwMDYyIiBkPSJNMTE0My4xODIsOC45NzZsLTkuNDcyLDBhMzEuNDkxLDMxLjQ5MSwwLDAsMC0uMDQ0LTQuMjE2Yy0uMzM5LTIuNDQ4LjgtMy4wODgsMi45NDctMi43NjFhMi40NzIsMi40NzIsMCwwLDAsMy4xNjEsMGMzLjg0Ny4wMTcsMy4zNzgtLjMzNywzLjQxLDMuNUMxMTQzLjE5Myw2LjY1OSwxMTQzLjE4Myw3LjgxNywxMTQzLjE4Miw4Ljk3NloiIGZpbGw9IiNjYWJlYjYiLz4KICAgICAgPHBhdGggaWQ9IlBhdGhfMTAwNjMiIGRhdGEtbmFtZT0iUGF0aCAxMDA2MyIgZD0iTTExNzguMjk0LTgxLjMyN3EuMDE4LDI0Ljk2My4wMzUsNDkuOTI2LjAwOCw2OC4yNzcuMDA2LDEzNi41NTJjMCwxLjA4MS4wNTEsMi4xNjEuMDc5LDMuMjQxcS0xLjU4MSwyLjQxOS0zLjE2MSwwYy4wMjctMS4wOC4wNzktMi4xNi4wNzktMy4yNDFxLjAwNi05MS42MTcuMDA1LTE4My4yMzRjMC0xLjA4Mi4wMjQtMi4xNjMuMDM2LTMuMjQ0WiIgZmlsbD0iIzNlM2MzNiIvPgogICAgICA8cGF0aCBpZD0iUGF0aF8xMDA2NCIgZGF0YS1uYW1lPSJQYXRoIDEwMDY0IiBkPSJNMTE4MS44MjIsMTE1LjM2NmExMi4yODEsMTIuMjgxLDAsMCwxLDUuNDY3LDguNTI0Yy0uMjg5LDMuMjE5LjQ1NSw2LjQuMjYzLDkuNjMxYTEwLjY1MSwxMC42NTEsMCwwLDEtOC45LDkuOTA4Yy00Ljc2NS43NjItMTAuMTM3LTIuMjItMTEuNTI4LTYuNzQxLTEuMDM2LTMuMzctLjQ4LTYuOTEyLS4zNDMtMTAuMzg5LjAzMi0uOC41NjItMS42LjA4OC0yLjQxNS42MzctMy42MDUsMi4wODQtNi42ODgsNS40OC04LjUxNUExMi42NzEsMTIuNjcxLDAsMCwxLDExODEuODIyLDExNS4zNjZaIiBmaWxsPSIjZjRmN2ZhIi8+CiAgICAgIDxwYXRoIGlkPSJQYXRoXzEwMDY1IiBkYXRhLW5hbWU9IlBhdGggMTAwNjUiIGQ9Ik0xMTgxLjgyMiwxMTUuMzY2bC05LjQ3MiwwYTMxLjMyOSwzMS4zMjksMCwwLDAtLjA0NC00LjIxNmMtLjMzOC0yLjQ0OC44LTMuMDg4LDIuOTQ3LTIuNzYxYTIuNDc0LDIuNDc0LDAsMCwwLDMuMTYxLDBjMy44NDcuMDE3LDMuMzc4LS4zMzcsMy40MSwzLjVDMTE4MS44MzQsMTEzLjA0OSwxMTgxLjgyMywxMTQuMjA3LDExODEuODIyLDExNS4zNjZaIiBmaWxsPSIjY2FiZWI2Ii8+CiAgICAgIDxwYXRoIGlkPSJQYXRoXzEwMDY2IiBkYXRhLW5hbWU9IlBhdGggMTAwNjYiIGQ9Ik0xMjEyLjE0Mi0yMjguODExcS4wMiwyNC45NjUuMDM2LDQ5LjkyNy4wMDgsNjguMjc1LjAwNSwxMzYuNTUyYzAsMS4wOC4wNTIsMi4xNi4wOCwzLjI0cS0xLjU4MSwyLjQyMS0zLjE2MiwwYy4wMjgtMS4wOC4wOC0yLjE2LjA4LTMuMjRxLjAwNi05MS42MTcuMDA1LTE4My4yMzVjMC0xLjA4MS4wMjQtMi4xNjIuMDM2LTMuMjQ0WiIgZmlsbD0iIzNlM2MzNiIvPgogICAgICA8cGF0aCBpZD0iUGF0aF8xMDA2NyIgZGF0YS1uYW1lPSJQYXRoIDEwMDY3IiBkPSJNMTIxNS42Ny0zMi4xMThhMTIuMjg2LDEyLjI4NiwwLDAsMSw1LjQ2OCw4LjUyNWMtLjI4OSwzLjIxOC40NTQsNi40LjI2Myw5LjYzYTEwLjY1MywxMC42NTMsMCwwLDEtOC45LDkuOTA5Yy00Ljc2NS43NjItMTAuMTM2LTIuMjItMTEuNTI3LTYuNzQyLTEuMDM2LTMuMzY5LS40ODEtNi45MTItLjM0My0xMC4zODguMDMxLS44LjU2Mi0xLjU5NS4wODctMi40MTYuNjM3LTMuNiwyLjA4NS02LjY4Nyw1LjQ4MS04LjUxNUExMi42NzgsMTIuNjc4LDAsMCwxLDEyMTUuNjctMzIuMTE4WiIgZmlsbD0iI2Y0ZjdmYSIvPgogICAgICA8cGF0aCBpZD0iUGF0aF8xMDA2OCIgZGF0YS1uYW1lPSJQYXRoIDEwMDY4IiBkPSJNMTIxNS42Ny0zMi4xMThsLTkuNDcxLDBhMzEuNTEyLDMxLjUxMiwwLDAsMC0uMDQ0LTQuMjE2Yy0uMzM5LTIuNDQ4LjgtMy4wODcsMi45NDYtMi43NjFhMi40NzMsMi40NzMsMCwwLDAsMy4xNjIsMGMzLjg0Ny4wMTgsMy4zNzgtLjMzNiwzLjQxLDMuNUMxMjE1LjY4Mi0zNC40MzQsMTIxNS42NzItMzMuMjc2LDEyMTUuNjctMzIuMTE4WiIgZmlsbD0iI2NhYmViNiIvPgogICAgICA8cGF0aCBpZD0iUGF0aF8xMDA2OSIgZGF0YS1uYW1lPSJQYXRoIDEwMDY5IiBkPSJNMTI0Ny4yLTE0MS43NzFxLjAxOCwyNC45NjMuMDM2LDQ5LjkyNi4wMDgsNjguMjc3LjAwNSwxMzYuNTUyYzAsMS4wOC4wNTIsMi4xNjEuMDc5LDMuMjQxcS0xLjU3OSwyLjQxOS0zLjE2MSwwYy4wMjgtMS4wOC4wOC0yLjE2MS4wOC0zLjI0MXEuMDA2LTkxLjYxNy4wMDUtMTgzLjIzNGMwLTEuMDgyLjAyMy0yLjE2My4wMzYtMy4yNDRaIiBmaWxsPSIjM2UzYzM2Ii8+CiAgICAgIDxwYXRoIGlkPSJQYXRoXzEwMDcwIiBkYXRhLW5hbWU9IlBhdGggMTAwNzAiIGQ9Ik0xMjUwLjcyOCw1NC45MjJhMTIuMjc4LDEyLjI3OCwwLDAsMSw1LjQ2Nyw4LjUyNGMtLjI4OSwzLjIxOS40NTUsNi40LjI2Myw5LjYzMWExMC42NSwxMC42NSwwLDAsMS04LjksOS45MDhjLTQuNzY1Ljc2Mi0xMC4xMzYtMi4yMi0xMS41MjctNi43NDEtMS4wMzctMy4zNy0uNDgxLTYuOTEyLS4zNDQtMTAuMzg5LjAzMi0uOC41NjItMS42LjA4OC0yLjQxNi42MzctMy42LDIuMDg0LTYuNjg3LDUuNDgxLTguNTE0QTEyLjY2OCwxMi42NjgsMCwwLDEsMTI1MC43MjgsNTQuOTIyWiIgZmlsbD0iI2Y0ZjdmYSIvPgogICAgICA8cGF0aCBpZD0iUGF0aF8xMDA3MSIgZGF0YS1uYW1lPSJQYXRoIDEwMDcxIiBkPSJNMTI1MC43MjgsNTQuOTIybC05LjQ3MSwwYTMxLjY1NSwzMS42NTUsMCwwLDAtLjA0NC00LjIxNmMtLjMzOS0yLjQ0OC44LTMuMDg4LDIuOTQ2LTIuNzYxYTIuNDc0LDIuNDc0LDAsMCwwLDMuMTYxLDBjMy44NDcuMDE3LDMuMzc4LS4zMzcsMy40MSwzLjVDMTI1MC43NCw1Mi42LDEyNTAuNzI5LDUzLjc2MywxMjUwLjcyOCw1NC45MjJaIiBmaWxsPSIjY2FiZWI2Ii8+CiAgICAgIDxwYXRoIGlkPSJQYXRoXzEwMDcyIiBkYXRhLW5hbWU9IlBhdGggMTAwNzIiIGQ9Ik05OTguNTUzLDM3OS4xOWw5Ni41MTQtMjc5LjA2NiwyMC45NDItLjQyLDczLjQxNywyODQuODQyWiIgZmlsbD0idXJsKCNsaW5lYXItZ3JhZGllbnQpIi8+CiAgICAgIDxwYXRoIGlkPSJQYXRoXzEwMDczIiBkYXRhLW5hbWU9IlBhdGggMTAwNzMiIGQ9Ik0xMDY0LjY4OCwzMDguNzQ4bDYzLjQ1MS0yODAuMjY1LDIwLjUtLjM3Nyw1Mi43NzYsMjg0LjM0N1oiIGZpbGw9InVybCgjbGluZWFyLWdyYWRpZW50LTIpIi8+CiAgICAgIDxwYXRoIGlkPSJQYXRoXzEwMDc0IiBkYXRhLW5hbWU9IlBhdGggMTAwNzQiIGQ9Ik0xMDM2LjM2Myw0MTUuNzQ2LDExNjYuODY5LDEzNS4xMmwyMC42MjMtLjc2M0wxMjk1LjMsNDE3Ljk3NloiIGZpbGw9InVybCgjbGluZWFyLWdyYWRpZW50LTMpIi8+CiAgICAgIDxwYXRoIGlkPSJQYXRoXzEwMDc1IiBkYXRhLW5hbWU9IlBhdGggMTAwNzUiIGQ9Ik0xMTMyLjAyNSw0MDguMzY3bDY4LjQxOS00MjIuMzg2LDIwLjk1Ny4wNTcsNTguNjEsNDI4LjY1MloiIGZpbGw9InVybCgjbGluZWFyLWdyYWRpZW50LTQpIi8+CiAgICAgIDxwYXRoIGlkPSJQYXRoXzEwMDc2IiBkYXRhLW5hbWU9IlBhdGggMTAwNzYiIGQ9Ik0xMTA3LjIzNyw0OTUuMDM2LDEyMzUuNTI3LDcyLjAzbDIwLjg3NC0uNzQ3LDEwMy43NjMsNDMwLjg1MVoiIGZpbGw9InVybCgjbGluZWFyLWdyYWRpZW50LTUpIi8+CiAgICA8L2c+CiAgPC9nPgo8L3N2Zz4K);
    background-size: cover;
    background-position: center center;
}
.app-home-background-image{
    background-image: url("../img/home.png");
	background-size: contain;
	background-repeat:no-repeat;
    background-position: bottom;
}
.app-sun-background-image{
    background-image: url("../img/home.png");
	background-size: contain;
    background-position: center center;
}
.app-re-background-image.white{
	color:white;
}
.app-logo-image{
	background-image:url("../img/re.png");
	background-repeat:no-repeat;
}
.main-app-background-image{
	background-image:url("../img/ROMAN_logo.png");
}
#login-forms{
	background-color:var(--primus-form-filter-background-color);
	position:absolute;height:100%;width:100%;top:0;left:0;
	transition:transform 0.4s ease-in-out;    display: flex;
    flex-direction: column;
    align-items: center;
}
#login-wrapper{
	background-image:url("./../img/primus_logo_large_no_text.svg");
	background-repeat:no-repeat;
	background-position:center center;
	
    top: 50%;
    transform: translateY(-50%);
	flex:1;    color: var(--primus-login-primary-font-color);
	border-radius:5px;
    position:absolute;
    background-size: 70%;
    overflow: hidden;
    width: 100%;
	padding-bottom:50px;
	max-width: 500px;
	padding-top:100px;
    background-position: center 40px;
	background-color:var(--primus-login-background-color);
}
#login-wrapper.hidden form{
	opacity:0;
	pointer-events:none;
}
#login-forms  form{
	transition:opacity 0.2s;
	opacity:1;
    padding: 50px 10px;
	position:relative;width:100%;
	
}

#login-forms  form > content { 

    display: block;
    max-width: 300px;
    width: 100%;
    margin: auto;
    position: relative;

}

#login-forms-translate{
	transition:transform 0.2s;
    position: relative;
    display: flex;
    width: 200%;
  
}
#login-forms h1 { 
	color : var(--roman-login-default-color);
	text-shadow: 0 0 10px rgba(0,0,0,0.3); letter-spacing:1px; text-align:center;
}
#login-forms > form.active{
	display:block;
}
#local .message{
	padding: 30px 0 30px 0;text-align:center;
}
#local .message:empty{
	padding: 0;
}
#local .message.error{
	color:var(--primus-form-red-color);
}
#local fieldset { 
	width: 100%; 
	margin-bottom: 10px; 
	background: rgba(0,0,0,0.1);
	border: none;
	outline: none;
	padding: 0;
	font-size: 13px;
	color: var(--roman-login-default-color);
	text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
	border: 1px solid rgba(0,0,0,0.3);
	border-radius: 4px;
	display:fleX;
	align-items:center;
}
body.theme-blue #local fieldset {
	  background: rgba(0,0,0,0.3);
	  box-shadow: inset 0 -5px 45px rgba(100,100,100,0.2), 0 1px 1px rgba(255,255,255,0.2);
  -webkit-transition: box-shadow .5s ease;
  -moz-transition: box-shadow .5s ease;
  -o-transition: box-shadow .5s ease;
  -ms-transition: box-shadow .5s ease;
  transition: box-shadow .5s ease;
}
#local .links{
	padding:20px 0;
	color:white;
	text-align:center;
}
#login-phone-auth{
	text-decoration:underline;
}
#app-loading{
	display: inline-block;
	position: fixed;
	top:50%;
	left:50%;transform:translate(-50%,-50%);
	width: 150px;
	height: 150px;display:none;
}
#app-loading.visible{
	display:block;
}
/*
#app-loading .rotate div {
	  box-sizing: border-box;
	  display: block;
	  position: absolute;
	  width: 120px;
	  top:50%;left:50%;
	  height: 120px;
	  margin: 4px;
	  border: 4px solid var(--roman-login-loading-color);
	  border-radius: 50%;
	  animation: app-loading-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
	  border-color: var(--roman-login-loading-color) transparent transparent transparent;
}
*/
#app-loading .loading-percent{
	position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
	margin-top:5px;
	font-size:30px !important;
	color:var(--roman-login-loading-color);
}
#app-loading .loading-percent sup{
	font-size:12px !important;
    margin-left: 2px;
}
#app-loading .loading-message{
	position:absolute;top:100%;left:50%;transform:translateX(-50%);
	color:var(--roman-login-loading-color);white-space:nowrap;
	font-size:14px 30px !important;
}
#app-loading .loading-progress > circle{
	stroke-width:5px;
	stroke:red;
	fill:none;
}
#app-loading .rotate{
	position:absolute;border-radius:50%;
	inset:0px;
}

#app-loading .rotate .inside,
#app-loading .rotate .outside{
	transform:translate(-50%,-50%);
	position:absolute;top:50%;left:50%;
	width:calc(100% - 20px);
	height:calc(100% - 20px);
	border:2px solid var(--primus-form-red-color);
	border-radius:50%;
}
#app-loading .rotate .outside{
	width:calc(100% - 12px);
	height:calc(100% - 12px);
}

/*
#app-loading .rotate div:nth-child(1) {
	animation-delay: -0.45s;
}
#app-loading .rotate  div:nth-child(2) {
	animation-delay: -0.3s;
}
#app-loading .rotate div:nth-child(3) {
	animation-delay: -0.15s;
}
@keyframes app-loading-ring {
	  0% {
		transform: translate(-50%,-50%)  rotate(0deg);
	  }
	  100% {
		transform:  translate(-50%,-50%) rotate(360deg);
	  }
}

*/
#local fieldset{
	overflow:hidden;
	border:1px solid transparent;
	/*
	background-color:var(--roman-login-fieldset-background-color);
	*/
}

#local fieldset.error{
	/*box-shadow: inset 0 -5px 45px rgb(100 100 100 / 20%), 0 1px 1px red;*/
	border:1px solid var(--primus-form-red-color);
	animation: login_fieldset_shake 0.4s linear;
}
@keyframes login_fieldset_shake {
	0% { transform: translate(30px); }
	20% { transform: translate(-30px); }
	40% { transform: translate(15px); }
	60% { transform: translate(-15px); }
	80% { transform: translate(8px); }
	100% { transform: translate(0px); }
}
#login-back{
    position: absolute;
    width: 60px;
    height: 60px;
    background-color: var(--primus-form-red-color);
    border-radius: 50%;line-height:40px;text-align:center;
    bottom: 10px;font-size:20px;color:white;
    left: 10px;
	padding:10px;
	padding-right:15px;
	opacity:0;
	z-index:1;
	transition:opacity 0.3s ease-in-out;
	pointer-events:none;
}
#login-back.visible{
	pointer-events:auto;
	opacity:1;
}
#login-back > i{
	position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
	color:var(--roman-login-icon-color);
}
#local fieldset{
	display:flex;
	background-color:var(--primus-login-input-background-color);
}
#local fieldset i{
	width:45px;
	height:45px;
	background-color:var(--primus-form-input-icon-color);
	line-height:45px;color:white;
	text-align:center;
	margin-right:10px;
}
#local fieldset input{
	flex:1;
	border:none;
	background-color:transparent;
	padding:10px;
	color:var(--primus-login-input-color);
	height:100%;
    border: none;
    padding: 15px 20px;
}
#local input:focus { 
	box-shadow: inset 0 -5px 45px rgba(100,100,100,0.4), 0 1px 1px rgba(255,255,255,0.2); 
}
#local #login-theme-switcher{
	position:absolute;right:10px;
	bottom:10px; 
}
.has-press-effect{
	overflow:hidden;
}
.login-press-effect{
  width: 1px;
  height: 1px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transform:  translate(-50%,-50%) scale(0);
  position: absolute;
  pointer-events:none;
  will-change:transform;
  opacity: 1;
}
.login-press-effect.fired{
	 animation: login_press_effect .6s linear;
}
@keyframes login_press_effect {
	  100% {
			transform: translate(-50%,-50%) scale(2);
			opacity: 0;
	  }
}



body[theme="dark"] {
  --bg-color: #292639;
  --text-color: #ebeaf7;
  --switch-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.5) inset;
}



.theme-switch {
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  --bg-color: #fff;
	  --text-color: #303030;
	  --switch-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.1) inset;
	  --transition: all 0.3s cubic-bezier(0.76, 0, 0.24, 1);
}

.theme-switch .label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  border-radius: 50px;
  position: relative;
  height: 40px;
  width: 80px;
  cursor: pointer;
  box-shadow: var(--switch-shadow);
  transition: var(--transition);
}

.theme-switch .label:hover .moon,
.theme-switch .label:hover .sun {
  transform: rotate(360deg);
}

.theme-switch .ball {
  transition: var(--transition);
  background-color: var(--text-color);
  position: absolute;
  border-radius: 50%;
  top: 5px;
  left: 5px;
  height: 30px;
  width: 30px;
 }

.theme-switch .moon {
  color: #f1c40f;
  transform-origin: center center;
  transition: all 0.5s cubic-bezier(0.76, 0, 0.24, 1);
  transform: rotate(0);
}

.theme-switch .sun {
  color: #ff6b00;
  transform-origin: center center;
  transition: all 0.5s cubic-bezier(0.76, 0, 0.24, 1);
  transform: rotate(0);
}

.theme-switch .ball {
  transform: translatex(0);
}
body[theme="dark"] .theme-switch .ball {
  transform: translatex(40px);
}

@media (prefers-color-scheme: dark) {
  .theme-switch .ball {
    transform: translatex(40px);
  }

  body[theme="light"] .theme-switch .ball {
    transform: translatex(0);
  }
}