/* --------- DOWNLOAD SETTINGS VIEW --------- */

.downloadPopup {
    display: none;
    background-color: rgb(28, 63, 73);
    color: white;
    margin: 0 1em 1em 1em;
    padding: 1em 0em 0 0em;
    font-size: 0.5em;
    margin-left: max(env(safe-area-inset-left), 1em);
    margin-right: max(env(safe-area-inset-right), 1em);

    /* move feedback button behind settings element */
    position: relative;
    z-index: 10;
    margin-bottom: 0;
    padding-bottom: 0.5em;
}

/* --------- LANGUAGE SELECT BAR --------- */

#selectDownloadLanguages {
    font: inherit;
    vertical-align: middle;
    padding-left: 0.5em;
    padding-right: 1.5em;
    padding-bottom: 2px;
    /*width: 100%;*/
    /*max-width: 30em;*/

    /* align with download button */
    flex:1;
    width:auto;
    max-width:none;
    padding: 0 1.5em 0 0.5em;
    cursor: pointer;
}

/* --------- PROGRESS BAR --------- */

#downloadProgress {
    margin: 1em 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 0.5em;
    /*height:20px;*/
}

.downloadProgressLang {
    align-self: center;
}

.progressWrapper {
    align-self: center;
    /*    height: 2em;*/
}

progress {
    border-radius: 5px;
    height: 2em;
    width: 100%;
    height: 19px;
}

/* empty part of progress bar */
progress::-webkit-progress-bar {        /* Chrome, Safari, Edge */
    background-color: rgb(215,233,236);
    border-radius: 5px;
}

/* filled part of progress bar */
progress::-webkit-progress-value {      /* Chrome, Safari, Edge */
    /*background-color: rgb(28, 63, 73);*/
    background-color: #3FD695;
    border-radius: 5px;
    border: 2px rgb(215,233,236) solid;
}
progress::-moz-progress-bar {           /* Firefox */
    background-color: #3FD695;
    border-radius: 5px;
    border: 2px rgb(215,233,236) solid;
}

/* --------- DOWNLOAD BUTTON --------- */

.downloadStartButton {
    background-color: #D7E9EC;
    color: black;
    font: inherit;
    padding: 0.1em .5em 0.2em 0.5em;
    border: none;
    border-radius: 0.3em;
    /*margin: 1em 0 2em auto;*/
    margin: 0;
    display: block;
    cursor: pointer;
}

/* --------- REMOVE BUTTON --------- */

/*.removeDownloadButton {
    background-color: rgba(0,0,0,0);
    color: black;
    font: inherit;
    padding: 0.1em .5em 0.2em 1em;
    margin-left: 0.5em;
    border: none;
    border-radius: 0.3em;

    height: 1.3em;
    width: 1.3em;
    
    vertical-align: middle;
    background-image: url(/svg/remove.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    cursor: pointer;
}*/

.removeDownloadButton {
    all: unset;
    border: 1px solid;
    cursor: pointer;
    display: inline-block;
    margin-left: .5em;
    padding-left: .4em;
    padding-right: .4em;
    text-align: center;
    border-radius: 0.3em;

    border-color: transparent;
    background-color: #D7E9EC;
    color: black;
}

/* accessibility */
.removeDownloadButton:focus-visible {
    outline: auto;
    outline-offset: 3px;
}

/* --------- FAILED BUTTON --------- */

.downloadFailedButton {
    background-color: #D7E9EC;
    color: black;
    font: inherit;
    padding: 0.1em .5em 0.2em 0.5em;
    border: none;
    border-radius: 0.3em;
    /*margin: 1em 0 2em auto;*/
    margin: 0;
    display: block;
    cursor: pointer;
}

/* --------- PAGE COMPONENTS --------- */

/* handle elements next to each other */
.downloadControls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.download-controls select,
.download-controls .downloadStartButton{
  font: inherit;
  height: 2.25rem;
  box-sizing: border-box;
}

/* --------- NO HOVER BUTTON COLOR ON PHONE (ELSE BUGGY) --------- */

@media (hover: hover) and (pointer: fine) {
    .downloadStartButton:hover {
        background-color: #3FD695;
    }

    .downloadFailedButton:hover {
        background-color: #3FD695;
    }

    .removeDownloadButton:hover {
        background-color: #3FD695;
        color: #1C3F49;
        border-color: #3FD695;
    }
}