body{
margin:0;
font-family:"Segoe UI",Arial,sans-serif;
background:#1f6e9d;
}

/* TOP HEADER */

.topbar{
background:white;
height:70px;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 40px;
border-bottom:1px solid #ddd;
}

.logo{
font-size:22px;
font-weight:600;
letter-spacing:1px;
}

.portal{
color:#666;
font-size:18px;
}

/* COLOR STRIPE */

.stripe{
height:6px;
background:linear-gradient(
90deg,
#e20015,
#f15a24,
#f4b400,
#2ea44f,
#0066b3,
#7f3fbf
);
}

/* MAIN AREA */

.main{
height:calc(100vh - 120px);
background:linear-gradient(
135deg,
#1c6a97,
#3d8fba
);
display:flex;
align-items:center;
justify-content:center;
}

.panel{
width:1000px;
display:flex;
color:white;
}

/* LOGIN */

.login{
flex:1;
padding:60px;
}

.title{
font-size:28px;
margin-bottom:20px;
}

.subtitle{
font-size:14px;
opacity:0.8;
margin-bottom:40px;
}

input{
width:100%;
background:transparent;
border:none;
border-bottom:1px solid rgba(255,255,255,0.5);
padding:10px 0;
margin-bottom:30px;
color:white;
font-size:14px;
}

input::placeholder{
color:rgba(255,255,255,0.7);
}

button{
background:transparent;
border:1px solid white;
padding:10px 25px;
color:white;
cursor:pointer;
}

button:hover{
background:white;
color:#1c6a97;
}

.error{
background:#e20015;
padding:10px;
margin-bottom:20px;
font-size:13px;
}

/* DIVIDER */

.divider{
width:1px;
background:rgba(255,255,255,0.4);
margin:0 40px;
}

/* INFO */

.info{
flex:1;
padding:40px;
}

.info-card{
background:white;
color:#333;
padding:20px;
margin-bottom:30px;
text-align:center;
}

.info-title{
font-weight:600;
margin-bottom:10px;
}

.benefits{
font-size:14px;
line-height:1.8;
}

.benefits li{
list-style:square;
margin-left:18px;
}

/* FOOTER */

.footer{
height:50px;
background:white;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 30px;
font-size:12px;
color:#666;
}