@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700&display=swap');

body#login * { box-sizing: border-box; }

body#login {
    height: 100vh;
    display: flex;
    color: #64748b;
}

body#login #loginError { color: #DC2626; margin-top: 30px; }
body#login #loginError a { color: #DC2626; }
body#login #loginError a:hover { color: #DC2626; text-decoration: underline; }

body#login .logo { margin-bottom: 80px }

body#login .login-panel {
    width: 450px;
    background: #fff;
    overflow: auto;
    filter: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15));
    padding: 80px 50px 20px;
    display: flex;
    flex-direction: column;
    z-index: 2;
}

body#login .title { font-family: 'Syne', sans-serif; font-size: 20px; margin: 0; color: #323552 }

body#login .login-form { flex-grow: 1; }
body#login .login-form form { margin-top: 30px; }

body#login .login-panel label { font-weight: bold; }
body#login .login-panel input { width: 100%; height: auto; padding: 10px; margin-bottom: 25px; display: block }
body#login .login-panel input[type="submit"] {
    background: #297CE0;
    color: #fff;
    text-shadow: none;
    border-radius: 5px;
    box-shadow: none;
    border: 0;
}
body#login .login-panel input[type="submit"]:hover { background: #1A61B6; }

body#login .login-footer { text-align: center; font-size: 11px; }

body#login a { font-weight: bold; color: #297CE0; }
body#login a:hover { color: #1A61B6; text-decoration: underline; }
body#login .login-footer a { font-weight: normal; }

body#login .login-bg {
    background: #1F2937 url('rock7/gc-splash.jpg') no-repeat center bottom / cover;
    flex-grow: 1;
}

#trustCheckbox {
    width: 20px;
    height: 20px;
    margin-right: 10px;
}

#checkboxContainer {
    display: inline-grid;
    grid-auto-flow: column;
    align-content: center;
}

.content-centred {
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: start;
    margin-left: 5px;
}

#left-column-top { height: 200px !important; }
#left-column-bottom { top: 200px; }

#logopanel {
    background: #FFF url(rock7/logo.png) no-repeat center center;
    background-color: #fff;
    height: 130px;
    background-size: contain;
    margin: 0 20px;
}

.alertrow { background: #f00; border-top: 1px solid #a00;}
.alertackrow { background: #f90; border-top: 1px solid #a00;}

.geofencerow { background: #c3c; border: border-top: 1px solid #b2b; }
.messagerow { background: #03f; border:  border-top: 1px solid #01d;}

/* Tree */

li.account { background-color: #1A61B6; list-style: none; color: #FFFFFF; }
li.account:hover { background-color: #134785;}
li.account a { color: #FFFFFF }

li.subaccount { background-color: #57BEF2; list-style: none; }
li.subaccount:hover { background-color: #57BEF2; }

li.group { background-color: #f1f5f9; list-style: none; }
li.group:hover { background-color: #f1f5f9!important; }

li.groupmember { background-color: #C2E24F; list-style: none; }
li.groupmember div .serial { color: #333; }

li.groupmember.inactive { background-color: #CEE872; list-style: none; color: #87A61B}
li.groupmember.inactive .serial { color: #87A61B}

li.groupmember.blocked { background-color: #F39F9C; list-style: none; color: #78110E; }
li.groupmember.blocked:hover { background-color: #EF7B78; list-style: none; color: #78110E; }
li.groupmember.blocked .serial { color: #78110E; }

li.groupmember:hover { background-color: #C2E24F; }