/*html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small, strike,strong, sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}*/
#PreviewWrapper ol,ul{list-style:none} blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}ins{text-decoration:none} del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}

body{background: var(--black-color) !important}
body#preview{overflow: hidden;}


#PreviewWrapper {  
background: var(--deep-navy); -moz-linear-gradient(top, rgb(161,211,250) 0%, rgb(107,173,223) 100%);
 -webkit-gradient(left top, left bottom, color-stop(0%, rgb(161,211,250)), color-stop(100%, rgb(107,173,223)));
-webkit-linear-gradient(top, rgb(161,211,250) 0%, rgb(107,173,223) 100%);
-o-linear-gradient(top, rgb(161,211,250) 0%, rgb(107,173,223) 100%);
-ms-linear-gradient(top, rgb(161,211,250) 0%, rgb(107,173,223) 100%);
 linear-gradient(to bottom, rgb(161,211,250) 0%, rgb(107,173,223) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a1d3fa', endColorstr='#6baddf', GradientType=0 );
}
#PreviewWrapper::before {content: '';background-image: url(/~/media/Images/L/Logicor/Universal/logo/Logo-white.svg);width: 150px;height: 40px;position: absolute;top: 35px;left: 0;right: 0;margin: 0 auto;background-size: contain;background-position: center center;background-repeat: no-repeat;}

#PreviewWrapper {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%);   -webkit-transform: translate(-50%, -50%);padding:20px 20px 30px; display:block; -webkit-box-shadow:0px 5px 5px 0px rgb(60, 60, 60); -moz-box-shadow:0px 5px 5px 0px rgb(60, 60, 60); box-shadow:0px 5px 5px 0px rgb(60, 60, 60); border-radius:0; max-width:500px;min-height: 300px;}
.logContainer { margin-bottom: 10px;}
#LoginContainer { float: left; width: 100%;padding-top: 55px; }
#LoginHeaderContainer { color: #000; padding: 0 0 5px;font-family: var(--font-roman);font-size: 2.4rem;line-height: 2.8rem;text-align: center;margin-bottom: 20px;display: none}
#LoginErrMessageContainer{color: #ff0000; font-style: italic; padding: 0 0 5px; text-align: left;}
#LoginPanel, #LoginUserNameContainer, #LoginPasswordContainer, #LoginLoginButtonContainer, #LoginlblUserName, #LoginlblPassword{float: left; width:100%;}
#LogintxtUserNameContainer, #LoginReqValUserName, #LogintxtPasswordContainer, #LoginReqValPassword{float: left; width:100%;}
#LoginLoginButtonContainer{text-align: center}
#LogintxtUserNameContainer input, #LogintxtPasswordContainer input{border:1px solid var(--crisp-white);width: 100%;border-radius: 8px;padding: 16px;min-width: auto;min-height: 55px;color: var(--white-2);font-size: 1.6rem;line-height: 2.8rem;background: var(--white-color);}
#LoginLoginButtonContainer input{border-radius:16px;font-weight: 500;cursor: pointer;font-size: 1.6rem;line-height: 2.4rem;display: inline-flex;align-items: center;background-color: var(--earth-green) !important;color: var(--deep-navy) !important;padding: 12px 16px; min-width: 205px;text-decoration: none;justify-content: space-between;transition: all 0.3s ease-in-out;border: 0}
#LoginLoginButtonContainer input:focus{background-color: var(--blue-sky)!important}
#LoginlblUserName, #LoginlblPassword{margin:0 0 8px;color: var(--crisp-white);font-size: 1.6rem;line-height: 2.8rem;}

@media screen and (max-width: 640px) {
#LogintxtUserNameContainer, #LoginReqValUserName, #LogintxtPasswordContainer, #LoginReqValPassword{float: left; width:100%;}
#PreviewWrapper{max-width:300px;}
}