@charset "UTF-8";
/*body {font: 400 13.3333px Arial; padding-top: 40px; padding-left: 25%; padding-bottom: 25%;}*/

html {
    background-image: radial-gradient(
        ellipse at 0 0,
        #FFFFFF 0%,
        #820117 90%,
        #000000 100% );
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-clip: border-box;
}

body {font: 400 13.3333px Arial; padding-top: 40px;
    
}

.mobile-list, .targetPerson, .listTicker {
    overflow-y: scroll;
    border-style: solid;
    border-width: 1px;
    border-color: rgb(169, 169, 169);
    list-style-type: none;
    padding-left: 0;
    margin: 0 5px 0 0;
    font: 400 13.3333px Arial;
}

.inputPerson, .selectCountry, .selectCity {
    max-width: 30em;
    min-width: 20em;
}

/* mobileLists */
.targetPerson {
   /* min-width: 400px; */
    max-width: 30em;
    min-width: 20em;
    max-height: 70px;
}

.listTicker {
    max-width: 30em;
    min-width: 20em;
    max-height: 100px;
    margin-bottom: 1em;
/*    color: DarkOrange;*/
}

.mobile-listitem {
    cursor: default;
    overflow-x: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inactive { 
    max-height: 0; 
    overflow: hidden; 
    /* You should prefix the following: */
    transition: max-height 500ms;
}
.active {
    /* Depending on this value, your animatiom will seem faster or shorter */
    max-height: 200px;
    transition: max-height 500ms;
}