#archive_info {
    margin       : 0.2em 0.2em 0.5em 0.2em;
    padding      : 0.5em;
}

#archive_info.mobile {
    margin-bottom : 1em;
}

#archive_info > #info {
    display  : inline-block;
    width    : 90%;
}

#archive_info > #info > span {
    font-weight : 700;
}

#archive_info > #arrow {
    position     : absolute;
    right        : 0.5em;
}

#archive_box {
    height: 10em;
    position: absolute;
    box-shadow: 4px 4px 4px lightgray;
    background-color: white;
    padding: 1em;
    box-sizing: border-box;
}

#archive_box.desktop {
    padding: 2em;
}

#archive_box.mobile {
    height: 14em;
}

#archive_box.desktop > .selector_wrapper {
    display: inline-block;
    width : 33%;
}

#archive_box.desktop > .selector_wrapper:nth-child(1) {
    text-align: left;
}

#archive_box.desktop > .selector_wrapper:nth-child(2) {
    text-align: center;
}

#archive_box.desktop > .selector_wrapper:nth-child(3) {
    text-align: right;
}

#archive_box.mobile > .selector_wrapper {
    display: block;
}

#archive_box select {
    margin-bottom: 1em;
    padding : 0.4em;
    font-weight : 700;
    font-size : 0.9em;
}

#archive_box.desktop select {
    width : 90%;
}

#archive_box.mobile select {
    width : 17em;
}

#archive_box > .buttons {
    margin-top: 1em;
    text-align: center;
}

#archive_box > .buttons > :first-child {
    margin-right: 4em;
}

@media (max-width:640px) {
    #archive_box.mobile {
        height : 14em;
    }
    #archive_box.mobile > .selector_wrapper {
        display : block;
    }
    #archive_box.mobile select {
        width : 60%;
        min-width : 18em;
    }
}

@media (min-width:641px) and (max-width:990px) {
    #archive_box.mobile {
        height : 10em;
    }
    #archive_box.mobile > .selector_wrapper {
        display : inline-block;
        width: 33%;
    }
    #archive_box.mobile > .selector_wrapper:nth-child(1) {
        text-align: left;
    }
    #archive_box.mobile > .selector_wrapper:nth-child(2) {
        text-align: center;
    }
    #archive_box.mobile > .selector_wrapper:nth-child(3) {
        text-align: right;
    }
    #archive_box.mobile select {
        width : 90%;
    }
}