#app .app-layout{background: #000 url(/userportal/assets/desktop_background_sgs.png) top right / contain no-repeat !important}
#app a,
#app .link{color: #F36B21}
#app a:hover,
#app .link:hover{color: #E44E12}
#app .login-form{background-color: rgba(0,0,0,.75);border-radius: 10px;backdrop-filter: none;margin-bottom:200px}
#app .login-form h1{color: #FFF;text-align: center;font-size: 0;position: relative;padding-top: 6px}
#app .login-form h1::before {display: block;content: "WELCOME";font-size: 50px;font-weight: 800;background: -webkit-linear-gradient(right, #FFCC2F, #ED761A);background: linear-gradient(270deg, #FFCC2F, #ED761A);background-clip: border-box;-webkit-background-clip: text;-webkit-text-fill-color: transparent;height: 40px;line-height: 39px}
#app .login-form h1::after {content: "Please sign in";font-size: 20px;display: block;position: absolute;left: 50%;top: 46px; transform: translateX(-50%)}
#app .taskbar{background-color: rgba(255,255,255,.75)}
#app .box-container a{color: #F36B21}
#app .box-container a:hover{color: #F5894D}
#app .breadcrumbs .path .item:not(:last-child){color: rgb(243,107,33)}
#app .launcher-tabs .tab:not(.current){color: rgb(243,107,33)}
#app .launcher-tabs .tab:not(.current):hover{color: rgb(244,122,55)}
#app .launcher-container.active .launcher.opened .launcher{background-color: rgba(255,255,255,.95)}
#app .header .header-menu .download a{color: #F36B21 !important}
#app .header .header-menu .download a:hover{color: #F5894D !important}
#app .footer .copyright{color: #FFF !important}
#app .download .content{background-color: rgba(255,255,255,.9);border-radius: .25rem;min-height: auto;padding: 2rem 0;max-width: 1400px;margin: 0 auto}
#app .profile-menu .profile.opened .options > div,
#app .profile-menu .profile.opened .options > a{-webkit-transition: all .2s ease;transition: all .2s ease}
#app .profile-menu .profile.opened .options > div:hover,
#app .profile-menu .profile.opened .options > a:hover{background-color: rgba(243,107,33,.75); color:#FFF}

#modal-container a{color: #F36B21}
#modal-container a:hover{color: #F5894D}

#app .p-button{border-color: transparent}
#app .p-button:hover{background: #E44E12;border-color: transparent}

prls-header img{padding-top: 4px;margin-right:8px}
prls-card.desktop-view a{color: #F36B21}
prls-card.desktop-view a:hover{color: #F5894D}
prls-button{
	--accent-fill-rest: #F36B21;
	--accent-fill-hover: #F5894D;
	--accent-foreground-rest: #F36B21;
	--accent-foreground-hover: #F5894D;
	--accent-stroke-rest: #F36B21;
	--accent-stroke-hover: #F5894D;
}
prls-tree-view-item{
	--accent-foreground-rest:#F36B21;
}
#app .login-form form{display: flex;flex-direction: column;gap: 1rem}
#app .login-form .input .eye{top: 20px}
#app .login-form .p-inputtext{background-color: rgba(45,52,54,1);color: #FFF; border-color: transparent}
#app .login-form .username,
#app .login-form .password,
#app .login-form .username .input,
#app .login-form .password .input,
#app .login-form .prls-form-field-hint,
#app .login-form prls-text-field{margin-bottom: 0}
#app .login-form .prls-form-field-hint:empty{display: none}
#app .login-form prls-text-field::part(root){height: 40px;border-radius:20px}
#app .login-form prls-text-field::part(control){height: 100%;border-radius: 20px;padding:0 30px 0 20px}
#app .login-form prls-text-field::part(field){padding-left: 20px}
#app .login-form prls-text-field::part(field)::placeholder{color:#AAA}
#app .login-form .buttons button{width: 100%; margin-left: 0; border-color: transparent}
#app .login-form .buttons button:hover{background-color: #E44E12}

#sgs-advert{position: absolute;top: calc(50% + 10rem);left: 50%;z-index: 200;transform: translateX(-50%)}
.desktop{display:none}
@media only screen and (min-width: 768px) {
	.desktop{display:inline-block; height: 12.5rem}
	.mobile{display:none}
}

/* Remove advert on non-login pages */
:has(.install-overlay) #sgs-advert,
:has(.detect-overlay) #sgs-advert,
:has(.desktop-view) #sgs-advert{display: none}