:root {
    --request-background-colour: #ffffff;
    --request-background-hover-colour: #7089c5;
    --request-text-hover-colour: #ffffff;
    --request-text-colour: #7089c5;
    --request-border-colour: #7089c5;
    --continue-background-colour: #ffffff;
    --continue-background-hover-colour: #7089c5;
    --continue-text-colour: #7089c5;
    --continue-text-hover-colour: #ffffff;
    --continue-border-colour: #7089c5;
    --cancel-background-colour: #ffffff;
    --cancel-background-hover-colour: #7089c5;
    --cancel-text-colour: #7089c5;
    --cancel-text-hover-colour: #ffffff;
    --cancel-border-colour: #7089c5;
    --satgoto-background-colour: #6b5be2;
    --satgoto-background-hover-colour: #FFF;
    --satgoto-text-colour: #FFF;
    --satgoto-text-hover-colour: #6b5be2;
    --satgoto-border-colour: #6b5be2;
    --satskip-background-colour: #6b5be2;
    --satskip-background-hover-colour: #FFF;
    --satskip-text-colour: #FFF;
    --satskip-text-hover-colour: #6b5be2;
    --satskip-border-colour: #6b5be2;
}

@font-face {
  font-family: 'Noto Color Emoji';
  src: url("/css/fonts/NotoColorEmoji.ttf");
}


body {
    margin:0; 
    font-family:"Roboto", sans-serif, 'Noto Color Emoji';
    font-size:14px;
}

body.colour_normal {
    background-color: #1d1f21
}

body.colour_warn {
    background-color: #f5a664
}

body.colour_crit {
    background-color: #ef504e
}

#link-unlock .title {
    font-weight:500; 
    font-size:2.8vh;
}

#link-unlock .title.colour_normal {
    color: #777
}

#link-unlock .title.colour_warn {
    color: #444
}

#link-unlock .title.colour_crit {
    color: #444
}

#link-unlock .generic-button {
    height: 50px; 
    border-radius: 10px; 
    padding:10px; 
    font-size:2.8vh; 
    font-weight:300; 
    line-height: 65px
}

#request:hover {
    background-color: #7089c5;
    background-color: var(--request-background-hover-colour); 
    border-color: #7089c5;
    border-color: var(--request-background-hover-colour); 
    color: #ffffff;
    color: var(--request-text-hover-colour);
    cursor: pointer; 
    -webkit-transition-duration: .3s; 
    transition-duration: .3s;
}

#continue:hover {
    background-color: #7089c5;
    background-color: var(--continue-background-hover-colour); 
    border-color: #7089c5;
    border-color: var(--continue-background-hover-colour); 
    color: #ffffff;
    color: var(--continue-text-hover-colour);
    cursor: pointer; 
    -webkit-transition-duration: .3s; 
    transition-duration: .3s;
}


#cancel:hover {
    background-color: #7089c5;
    background-color: var(--cancel-background-hover-colour); 
    border-color: #7089c5;
    border-color: var(--cancel-background-hover-colour); 
    color: #ffffff;
    color: var(--cancel-text-hover-colour);
    cursor: pointer; 
    -webkit-transition-duration: .3s; 
    transition-duration: .3s;
}

#satgoto:hover {
    background-color: #7089c5;
    background-color: var(--satgoto-background-hover-colour); 
    border-color: #7089c5;
    border-color: var(--satgoto-background-hover-colour); 
    color: #ffffff;
    color: var(--satgoto-text-hover-colour);
    cursor: pointer; 
    -webkit-transition-duration: .3s; 
    transition-duration: .3s;
}

#satskip:hover {
    background-color: #7089c5;
    background-color: var(--satskip-background-hover-colour); 
    border-color: #7089c5;
    border-color: var(--satskip-background-hover-colour); 
    color: #ffffff;
    color: var(--satskip-text-hover-colour);
    cursor: pointer; 
    -webkit-transition-duration: .3s; 
    transition-duration: .3s;
}

#link-unlock .link-button {
    display: inline-block; 
    margin-top:20px; 
    margin-right:40px; 
    margin-left:40px; 
    height: 30px; 
    border-radius: 10px; 
    font-weight:300; 
    line-height: 30px; 
    padding:10px; 
    font-size:2.8vh
}

#request {
    background-color: #ffffff;
    background-color: var(--request-background-colour);
    border-color: 3px solid #7089c5;
    border-bottom: 3px solid var(--request-border-colour); 
    color: #7089c5;
    color: var(--request-text-colour);
}

#cancel {
    background-color: #ffffff;
    background-color: var(--cancel-background-colour);
    border-color: 3px solid #7089c5;
    border-bottom: 3px solid var(--cancel-border-colour); 
    color: #7089c5;
    color: var(--cancel-text-colour);
}

#continue {
    background-color: #ffffff;
    background-color: var(--continue-background-colour);
    border-color: 3px solid #7089c5;
    border-bottom: 3px solid var(--continue-border-colour); 
    color: #7089c5;
    color: var(--continue-text-colour);
}

#satgoto {
    background-color: #ffffff;
    background-color: var(--satgoto-background-colour);
    border-color: 3px solid #7089c5;
    border-bottom: 3px solid var(--satgoto-border-colour); 
    color: #7089c5;
    color: var(--satgoto-text-colour);
}

#satskip {
    background-color: #ffffff;
    background-color: var(--satskip-background-colour);
    border-color: 3px solid #7089c5;
    border-bottom: 3px solid var(--satskip-border-colour); 
    color: #7089c5;
    color: var(--satskip-text-colour);
}

#link-unlock .logo {
    display:block; 
    margin:auto; 
    max-height:15vh; 
    max-width:calc(100vw - 30px)
}

#link-unlock .footer-text{margin-top:25px}

#link-unlock .link-display{color:#f5a664; font-weight:100; font-size:3vh; padding-bottom:25px}

#link-unlock .link{cursor:pointer}

#link-unlock{padding:10px; overflow-y:auto; max-width:1500px; height:calc(100vh - 200px); margin:auto; display:inline-block; position:fixed; top:0; bottom:0; left:0; right:0}

#link-unlock .loader{text-align: center; font-size:2vh; position: relative; top:20px}
#link-unlock .loader .fa{font-size:8vh; color:#babcba}