/* Import custom Open Sans font files */
@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
}

/* Apply new custom default font with fallback, button and textarea are special, they do not inherit the font from body */
body,
button,
input {
    font-family: 'Open Sans', sans-serif;
}

/* Main header used outside of the panels */
h1 {
    font-size: 34px;
    margin-top: 0px;
    margin-bottom: 20px;
}

/* Second level header used in the different panels at the top */
h2 {
    font-size: 30px;
    margin-top: 0px;
    margin-bottom: 10px;
    overflow-wrap: break-word;
    max-width: 100%;
}

/* Third level header used for progress status and results */
h3 {
    font-size: 20px;
    margin-top: 0px;
    margin-bottom: 10px;
}

/* Color for size text is a bit muted */
#size {
    color: #667799;
    cursor: help;
}

/* Row for file name header and expiration badge */
#name-expiration-row {
    display: flex;
    justify-content: space-between;
    flex-flow: row wrap;
    align-items: center;
}

/* Special badge styling for expiration duration */
#expiration {
    font-size: 12px;
    font-weight: bold;
    margin-left: auto;
    margin-bottom: 7px;
    white-space: nowrap;
    color: #1F65F0;
    background-color: #EFF4FE;
    border-radius: 20px;
    border: 1px solid #DEE8FD;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    cursor: help;
}

/* We use a different badge color for expired links */
#expiration.expired {
    color: #E50505;
    border-color: #FDB9B9;
    background-color: #FFEBEB;
}

/* Fixed Sphere XG logo in the top left corner */
#logo {
    position: fixed;
    top: 35px;
    left: 50px;
    width: 70px;
    height: 70px;

    background-image: url("images/logo.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top left;
}

/* Link back to the Sphere XG Dashboard */
#sphere-link {
    position: fixed;
    top: 45px;
    right: 80px;

    background-color: white;
    color: #1F65F0;
    border: none;
    border-radius: 4px;
    padding: 10px;
    padding-left: 15px;
    padding-right: 15px;
    text-decoration: none;
    margin-right: 20px;
}

/* Tiny hover effect for text color in the XG link */
#sphere-link:hover {
    color: rgb(14, 78, 204);
}

/* Help icon in the top right corner */
#help-link {
    position: fixed;
    top: 51px;
    right: 50px;
    width: 21px;
    height: 21px;
    border-radius: 15px;
    padding: 5px;
}

/* Small hover effect for the help icon */
#help-link:hover {
    background-color: rgba(236, 238, 242, 0.2);
}

/* Contains the main header and the panels */
#container {
    position: relative;
    margin-top: 120px;
    margin-left: 180px;
    color: white;
}

/* Contains the different white content panels of the app */
#panel {
    background-color: white;
    border-radius: 10px;
    color: #363C4D;
    padding: 20px;
    width: 400px;
}

/* Small version number in the bottom left corner */
#version {
    position: fixed;
    bottom: 5px;
    left: 5px;
    color: white;
    opacity: 0.5;
    font-size: 12px;
}

/* Optional hints at the bottom that are active during certain states of the download */
#keep-open-hint,
#close-hint {
    position: fixed;
    bottom: 0px;
    right: 0px;
    left: 0px;
    text-align: center;
    padding: 35px;
    color: white;
}

/* The keep open hint has a special color background */
#keep-open-hint {
    background: rgba(255, 203, 0, 0.3);
}

/* The close hint has a special color background */
#close-hint {
    background: rgba(0, 0, 0, 0.2);
}

/* The spinner and the images should use the same size and padding */
#progress,
#illustration {
    margin-top: 50px;
    margin-bottom: 50px;
    height: 200px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
}

/* Show download image for input and info panels */
#illustration.input,
#illustration.info {
    background-image: url("images/download.svg");
}

/* Image for completed download in the results panel */
#illustration.result {
    background-image: url("images/complete.svg");
}

/* Error image for failures in the error panel */
#illustration.error {
    background-image: url("images/error.svg");
}

/* Center all headers and messages in the different panels */
#state-header,
#state-message {
    text-align: center;
}

/* The messages in the different panels are a bit muted */
#state-message {
    color: #667799;
    margin-bottom: 20px;
}

/* Center link to contact support */
#support {
    text-align: center;
}

/* Colorize link to contact support */
#support a {
    color: #1F65F0;
    text-decoration: none;
    font-weight: bold;
}

/* Label above the URL input field */
label {
    font-weight: bold;
    font-size: 12px;
}

/* The input field for manual entering of URLs */
#input {
    width: 360px;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.87);
    padding: 8px;
    padding-right: 30px;
    margin-bottom: 20px;
    border: 1px solid #8592AD;
    border-radius: 4px;
    margin-top: 3px;
}

/* URL validation check symbol on the right */
#input.validated {
    background-image: url("images/success.svg");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

/* Start & Stop buttons */
button {
    color: white;
    border: none;
    border-radius: 4px;
    width: 100%;
    font-size: 20px;
    padding: 10px;
    font-size: 16px;
    cursor: pointer;
}

/* Disabled state for buttons */
button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* The start download button colors */
#start {
    background-color: #1F65F0;
}
#start:hover:not(:disabled) {
    background-color: rgb(14, 78, 204);
}
#start:hover:active:not(:disabled) {
    background-color: rgb(11, 60, 157);
}

/* The stop download button colors */
#stop {
    color: rgb(31, 101, 240);
    border: 1px solid rgb(31, 101, 240);
    background-color: rgb(255, 255, 255);
}
#stop:hover:not(:disabled) {
    background-color: rgb(237, 239, 243);
}
#stop:hover:active:not(:disabled) {
    background-color: rgb(224, 228, 234);
}

/* Container for size and download link */
#size-link-row {
    display: flex;
    justify-content: space-between;
}

/* Original direct download link */
#link {
    font-size: 16px;
    text-decoration: none;
    color: #667799;
}

/* Darker text color for original link on hover */
#link:hover {
    color: #57647f;
}

/* Copy to clipboard button after download link */
#copy {
    display: inline-block;
    width: 16px;
    height: 16px;
    cursor: pointer;
    background-image: url("images/link.svg");
    background-size: 16px 16px;
}

/* Class to add brief animation to copy button */
.copy-animation {
    animation: clipboardAnimation 2s;
}

/* Animation that temporarily replaces the copy icon with a success icon */
@keyframes clipboardAnimation {
    0% {
        opacity: 1;
        background-image: url("images/link.svg");
    }
    3% {
        opacity: 0.0;
        background-image: url("images/link.svg");
    }
    4% {
        opacity: 0.0;
        background-image: url("images/success.svg");
    }
    8% {
        opacity: 1.0;
        background-image: url("images/success.svg");
    }
    90% {
        opacity: 1.0;
        background-image: url("images/success.svg");
    }
    95% {
        opacity: 0.0;
        background-image: url("images/success.svg");
    }
    96% {
        opacity: 0.0;
        background-image: url("images/link.svg");
    }
    100% {
        opacity: 1.0;
        background-image: url("images/link.svg");
    }
}

/* Hide dynamic panels until JS code decides to show them */
#container,
#keep-open-hint,
#close-hint {
    display: none;
}

/* Background with blueish gradient */
#gradient {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
}

/* Transparent large Sphere XG logo in the background on the right */
#sphere {
    position: fixed;
    top: -15vh;
    right: 0px;
    height: 130vh;
}

/* For small screen widths we need to adjust some things to use less space */
@media (max-width: 700px) {
    /* Adjust positions and margins of logo, XG link, help icon and main container */
    #logo {
        top: 10px;
        left: 10px;
    }
    #help-link {
        top: 25px;
        right: 10px;
    }
    #sphere-link {
        top: 20px;
        right: 30px;
    }
    #container {
        margin-top: 90px;
        margin-left: 10px;
        margin-right: 10px;
    }

    /* For small screens the panel is dynamically sized and centered */
    #panel {
        margin-left: auto;
        margin-right: auto;
        max-width: 80%;
    }

    /* Adjust progress size for smaller screens by fitting to available width */
    #progress {
        height: auto;
        width: 100%;
    }

    /* Use smaller headings for smaller screens */
    h1 {
        font-size: 28px;
    }
    h2 {
        font-size: 24px;
    }
    h3 {
        font-size: 20px;
    }
}

/* While we have enough vertical space, the main header should go over two lines and use a big font as specified in the UI design.
   But when vertical space becomes sparse (under 900x height), the font falls back to the default size for font and width and uses only a single line. */
@media (min-height: 1000px) {
    #header {
        width: 475px;
        font-size: 44px;
    }
}

/* Hints at the bottom are not visible for small screen heights.
   The override is needed since display is set by the JS code on the element directly. */
@media (max-height: 850px) {
    #keep-open-hint,
    #close-hint {
        display: none !important;
    }
}

/* Reduce vertical margins on illustrations for smaller screen heights */
@media (max-height: 850px) {
    #illustration {
        margin-top: 20px;
        margin-bottom: 20px;
    }
}