@charset "utf-8";
/* CSS Document */
:root {
    --blue: #0077b6;
    --blue2: #00b4d8;
    --blue3: #03045e;

    --green: #2ecc71;
    --yellow: #f1c40f;
    --purple: #9b59b6;
    --red: #e74c3c;
    --orange: #ff8c42;
    --pink: #ff5da2;

    --bg: #eef3f8;
    --card-bg: #ffffff;
    --shadow: 0 4px 20px rgba(0,0,0,0.08);

    --rounded: 18px;
}

/* GLOBAL */
body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    font-family: "Segoe UI", sans-serif;
    color: #333;
}

/* ---------------- HEADER ---------------- */
/* ---------------- HEADER ---------------- */
.header {
    background: linear-gradient(90deg, var(--blue3), var(--blue));
    height: 70px;
    color: white;
    display: flex;
    align-items: center;
    padding: 0 25px;
    box-shadow: 0 3px 12px rgba(0,0,0,0.2);
    /* make header stay at top */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
}

.btn-back {
    color: white;
    padding: 8px 15px;
    background: rgba(255,255,255,0.25);
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    transition: 0.2s;
    z-index: 2; /* keep on top */
}
.btn-back:hover { background: rgba(255,255,255,0.45); }

.roleHeader {
    position: absolute;       /* center element absolute */
    left: 50%;                /* move center horizontally */
    transform: translateX(-50%); /* perfect center */
    text-align: center;
    width: max-content;
}

@media screen and (max-width: 800px) {
  .logo {
    justify-content: left;
    margin-left: 10px;
  }
  .roleHeader {
    display: none;
  } 
}

.container {
  display: flex;
  margin: auto;
  justify-content: center;
  align-items: center;
  height: 600px;
}

.form-box {   
	margin: auto;
    display: block;
    width: 450px;
    background:#fff; 
    padding: 20px; 
    background: transparent;
	border: 1px solid white;
    box-shadow:0 5px 15px rgba(0,0,0,0.1); 
}
.form-box h2 {
    text-align: center;
}
input, button { 
    width: 100%; 
    padding:15px; 
    margin-bottom: 20px;
    border:1px solid #ccc; 
}
button { 
    margin: auto;
    width:50%;
    display: block;
    background:#3498db; 
    border:none; 
    color:white; 
    font-weight:bold; 
    cursor:pointer; 
    transition: 0.3s;
}
button:hover { 
    background:#2980b9; 
}
@media screen and (max-width:800px) {
    .form-box {
        width: 90%;
    }
    
}