:root {
    --me-bg: 'white';
    --me-main: 'black';
    --me-button: 'black';
    --me-button-text: 'white';
    --me-hover: 'gray';
    --me-hover-text: 'black';
    --me-text: 'black';
    --me-border: #6ae3fe;
}
@font-face{
    font-family:Karla-Bold;
    src:url(Karla-Bold.woff2);
    font-display:swap
}
@font-face{
    font-family:Karla;
    src:url(Karla-Regular.woff2);
    font-display:swap
}
body{
    flex-direction:column
}
:root{
    touch-action:pan-x pan-y;
    height:100%;
}
body{
    isolation:isolate;
    height:100%;
    justify-content:space-between
}
body{
    display:flex;
    align-items:center
}
*{
    -webkit-font-smoothing:antialiased;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    font-family:"Karla", sans-serif
}
input{
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    border:1px solid #0b2089;
    padding:.3125em;
    margin:4px 0 6px;
    color:#000;
    width:100%;
    height:auto;
    border-radius:5px
}
:focus{
    outline:0
}
body{
    margin:0
}
#login_form{
    z-index:500
}
#login_form input{
    border-radius:5px;
    padding:.5em
}
.loginPageTop{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:10px 0
}
.loginPageTop img{
    width:70%;
    max-width:550px
}
.inputLogin, .loginPageTop{
    position:relative;
    margin:15px 30px
}
.all-content{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center
}
.all-content{
    justify-content:center;
    margin-bottom:10px
}
.contentArea{
    background-color:#fff;
    position:relative;
    border-radius:10px;
    box-shadow:0 0 10px 0 #333;
    padding:10px 5px
}
.loginInputSection{
    width:100%;
    color:#000
}
form input{
    font-size:18px
}
@media screen and (max-width:600px){
    .loginPageTop img{
        width:90%
    }
}
/* ---------------- Google OAuth Button ---------------- */
.google-btn {
    background: #fff;
    color: #333;
    border: 1px solid #dadce0;
    border-radius: 4px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
    width: 100%;
    margin-bottom: 16px;
}

.google-btn:hover {
    background: #f8f9fa;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    text-decoration: none;
    color: #333;
}

.google-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.google-btn-text {
    font-family: "Karla", sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: #333;
}

/* ---------------- dynamic overrides ---------------- */
body {
    background-color: var(--me-bg);
}