body{margin:0;}

:root {
    --proxima: 'Proxima Nova', Arial, Helvetica, sans-serif;
    --roboto: "Roboto", sans-serif, 'Noto Color Emoji';
    --monospace: 'IBM Plex Mono', monospace;
}

#link-page {
    --page_background: #1d1f21;
    --text_color: #777777;
    --link_color: #f5a664;
    --request_button_background_colour: #ffffff;
    --request_button_border_colour: #8eaadb;
    --request_button_text_colour: #7089c5;
    --request_button_background_colour_hover: #8eaadb;
    --request_button_text_colour_hover: #ffffff;
    --continue_button_background_colour: #ffffff;
    --continue_button_border_colour: #8eaadb;
    --continue_button_text_colour: #7089c5;
    --continue_button_background_colour_hover: #8eaadb;
    --continue_button_text_colour_hover: #ffffff;
    --cancel_button_background_colour: #ffffff;
    --cancel_button_border_colour: #8eaadb;
    --cancel_button_text_colour: #7089c5;
    --cancel_button_background_colour_hover: #8eaadb;
    --cancel_button_text_colour_hover: #ffffff;
    --satgoto_button_background_colour: #6b5be2;
    --satgoto_button_background_hover_colour: #FFF;
    --satgoto_button_text_colour: #FFF;
    --satgoto_button_text_hover_colour: #6b5be2;
    --satgoto_button_border_colour: #6b5be2;
    --satskip_button_background_colour: #6b5be2;
    --satskip_button_background_hover_colour: #FFF;
    --satskip_button_text_colour: #FFF;
    --satskip_button_text_hover_colour: #6b5be2;
    --satskip_button_border_colour: #6b5be2;

    --card_background: #F4F4F4;
    --card_header_background: #F0F0F0;
    --card_header_border: #D9D9D9;
    --card_header_text_color: #4C4C4C;
    --text_tile_background: #F0F0F0;
    --text_tile_border: #D9D9D9;
    --text_tile_text_color: #4C4C4C;

    --logo-max-width: auto;
    --loading_bar_background: #7796cf;

    background-color: var(--page_background);color:var(--text_color);width:100vw;height:100vh;background-size: cover;background-position: center bottom;background-repeat: no-repeat;
    position:relative;overflow: hidden;
}

#link-page.stretch_fit{
    background-position:top left;
    background-attachment: fixed;
    background-size: 100% 100%;
}

#link-page.center_align{
    background-position:center;
    background-size: contain;
}

#link-page .custom-page-el{
    width:100vw;height:100vh;overflow: hidden;;position: relative;
}

#link-page .error-message{
    font-size: 26px;text-align: center;position: relative;top:50%;transform: translateY(-50%);
}

#link-page .dt-ui-anim-page-loading{
    background:transparent;
}

#link-page .dt-ui-anim-page-loading .logo{
    max-height:15vh;width: var(--logo-max-width);max-width: calc(100vw - 30px);
}

#link-page .dt-ui-anim-page-loading .dt-ui-anim-page-loading__loading-bar::after{
    background-color:var(--loading_bar_background);
}

#link-page .dt-ui-anim-page-loading .dt-ui-anim-page-loading__text{
    color: var(--text_color);
}

#link-unlock{
    font-family: var(--roboto);
}

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

#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;
    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;
    cursor: pointer;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
}

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

#link-unlock .page-loading-wrapper{
    height:fit-content;margin:8px auto;max-width:66%;
}

#link-unlock .page-loading-wrapper:empty{
    margin:0;
}

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

#link-unlock .link-display{color:var(--link_color); 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}

#request{
    background-color: var(--request_button_background_colour);
    border-bottom:solid 3px var(--request_button_border_colour);
    color: var(--request_button_text_colour);
}
#request:hover{
    background-color: var(--request_button_background_colour_hover);
    border-color: var(--request_button_background_colour_hover);
    color: var(--request_button_text_colour_hover);
}

#continue{
    background-color: var(--continue_button_background_colour);
    border-bottom:solid 3px var(--continue_button_border_colour);
    color: var(--continue_button_text_colour);}

#continue:hover{
    background-color: var(--continue_button_background_colour_hover);
    border-color: var(--continue_button_background_colour_hover);
    color: var(--continue_button_text_colour_hover);
}

#cancel{
    background-color: var(--cancel_button_background_colour);
    border-bottom:solid 3px var(--cancel_button_border_colour);
    color: var(--cancel_button_text_colour);
}

#cancel:hover{
    background-color: var(--cancel_button_background_colour_hover);
    border-color: var(--cancel_button_background_colour_hover);
    color: var(--cancel_button_text_colour_hover);
}

#satgoto {
    background-color: var(--satgoto_button_background_colour);
    border-bottom: 3px solid var(--satgoto_button_border_colour);
    color: var(--satgoto_button_text_colour);
}

#satgoto:hover {
    background-color: var(--satgoto_button_background_hover_colour);
    border-color: var(--satgoto_button_background_hover_colour);
    color: var(--satgoto_button_text_hover_colour);
}

#satskip {
    background-color: var(--satskip_button_background_colour);
    border-bottom: 3px solid var(--satskip_button_border_colour);
    color: var(--satskip_button_text_colour);
}

#satskip:hover {
    background-color: var(--satskip_button_background_hover_colour);
    border-color: var(--satskip_button_background_hover_colour);
    color: var(--satskip_button_text_hover_colour);
}

.custom-page{
    width:100vw;height:100vh;position: relative;font-family: var(--proxima);
}

.custom-page .dt-ui-card{
    width:528px;height:570px;margin:0 auto;position: relative;top:50%;transform: translateY(-50%);background:var(--card_background);overflow:hidden;
    display: grid;grid-template-rows: auto 1fr auto;
}

.custom-page .dt-ui-card.blur{
    backdrop-filter: blur(2px);
}

.custom-page .dt-ui-card .dt-ui-card__contents-wrapper,
.custom-page .dt-ui-card .dt-ui-card__contents-wrapper > div{height:100%;overflow:hidden;}

.custom-page .dt-ui-card .dt-ui-card__contents{height:calc(100% - 3.2rem);display: flex;gap:16px;flex-direction: column;color:var(--text_color);}

.custom-page .dt-ui-card .dt-ui-card__title{
    color: var(--card_header_text_color);
    background-color: var(--card_header_background);
}

.custom-page .dt-ui-card .dt-ui-card__title .dt-ui-card__title-left{margin:0 auto;}

.custom-page .dt-ui-card .dt-ui-card__title:after{
    background: var(--card_header_border);
}

.custom-page .logo-wrapper{
    margin:0 auto;width: fit-content;
}

.custom-page .dt-ui-card .logo{
    width:var(--logo-max-width);max-width: 100%;
}

.custom-page .dt-ui-card .page-loading-wrapper:empty{
    margin:0;display: none;
}

.custom-page .dt-ui-card .buttons{
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: center;
    margin:16px 0 0 0;
}

.custom-page .dt-ui-card .buttons:empty{
    margin:0;display: none;
}

.custom-page .dt-ui-card #request{
    border:solid 1px var(--request_button_border_colour);
}

.custom-page .dt-ui-card #continue {
    border: solid 1px var(--continue_button_border_colour);
}

.custom-page .dt-ui-card #cancel{
    border:solid 1px var(--cancel_button_border_colour);
}

.custom-page .dt-ui-card #satgoto {
    border: 1px solid var(--satgoto_button_border_colour);
}

.custom-page .dt-ui-card #satskip {
    border: 1px solid var(--satskip_button_border_colour);
}

.custom-page .dt-ui-card .primary-text{
    font-size: 14px;font-style: normal;font-weight: 500;line-height: 20px;text-align: center;
}

.custom-page .dt-ui-card .text-block .primary-text{
    font-size: 12px;
}

.custom-page .dt-ui-card .link-display{
    color:var(--link_color); text-align: center;font-size: 18px;font-style: italic;font-weight: 400;line-height: 18px;
}

.custom-page .dt-ui-card .text-block-wrapper{
    margin:8px;
}

.custom-page .dt-ui-card .text-block-wrapper.text-block{
    border-radius: 4px;padding:16px;margin:0 16px;
    border: 1px solid var(--text_tile_border);
    background: var(--text_tile_background);
    color:var(--text_tile_text_color);
}

.custom-page .dt-ui-card .text-block-wrapper .text-block-title{
    font-size: 14px;
    font-weight: 600;
    line-height: 16px;
}

.custom-page .dt-ui-card .text-block-wrapper .text{
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
}

.custom-page .dt-ui-card .card-footer{
    color: var(--card_header_text_color);
    background-color: var(--card_header_background);
    border-top:solid 1px var(--card_header_border);
    padding: 14px 16px;
}

.custom-page .dt-ui-card .card-footer .card-footer__contents{
    text-align: center;font-size: 12px;font-weight: 400;line-height: 16px;
}

#link-page .loading-wrapper{
    height:86px;width:408px;margin:16px auto;position: relative
}

#link-page .loading-wrapper .loading-wrapper__content{
    height: fit-content;position: relative;top:50%;transform: translateY(-50%);
}

#link-page .loading-wrapper .analysing-text{
    font-size: 12px;font-weight: 400;line-height: 16px;text-align: center;
}

#link-page .loading-wrapper .analysing-text .analysing-percent{
    margin-left:8px;font-weight: 500;color:var(--link_color);
}

#link-page .loading-wrapper .loading-bar-wrapper{
    width:360px;margin:12px auto 0 auto;position: relative;
}

#link-page .loading-wrapper .loading-bar-wrapper .loading-bar-outer{
    height:14px;border-radius: 8px;box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.06);background:var(--card_background)
}

#link-page .loading-wrapper .loading-bar-wrapper .loading-bar-inner{
    height:10px;border-radius: 8px;background:var(--loading_bar_background);position: absolute;left:2px;top:2px;bottom:2px;width:0;
}