/* Defaults */
body{
    background-color: #1b2029;
}
h1{
    font-family: sans-serif;
    font-weight: bold;
    color:#ffffff;
    text-align: center;
    text-decoration:underline;
    text-decoration-color: #383f4d;
    text-underline-offset: 7px;
    
    font-size:60px;
    margin: 20px;
}
.basic{
    font-family: sans-serif;
    font-weight: bold;
    color:#bbbbbb;
    text-align: center;
    line-height: 1.6;
    font-size:23px;
    
    margin: 15px;
}
.basic-small{
    font-family: sans-serif;
    font-weight: bold;
    color:#bbbbbb;
    text-align: center;
    line-height: 1.6;
    font-size:15px;
    
    margin: -5px;
}
a{
    color: #6eafff;
}
a:visited{
    color: #8051d6;
}
input[type="text"]{
    

    font-family: sans-serif;
    font-weight: bold;
    font-size:25px;
    color:#444444;

    display: block;
    margin: 20px auto 0;

    border: 1px solid white;
    border-radius: 7px;
}
input[type="text"]::placeholder{
    font-family: sans-serif;
    font-weight: bold;
    font-size:25px;
    color:#bbbbbb;
}


/* Main Container */
.list_container{
    display: flex;
    justify-content: space-between;
    width: 75%;
    padding:20px;

    margin: -15px auto 0
}
.box{
    background-color: #2d3440;

    border: 2px solid #11151c;
    border-radius: 10px;

    width: 49.5%;
    height: 600px;
}

/* Search Card */
#card_search_results{
    margin: 10px 0px 0px 0px;
    padding: 20px 10px;
    display:flex;
    flex-wrap:wrap;

    max-height: 485px;
    overflow-y: auto;
}
.search_card_icon{
    width: 95px;
    height: auto;
    margin: 5px
}


/* Selected Display */  
#selected_container{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* keep items packed left-to-right */
    align-content: flex-start;   /* keep rows packed toward the top */
    gap: 4px;                    /* small uniform spacing between cards */
    border-radius: 9px;

    max-height: 600px;
    overflow-y: auto;
}
.lb_selector{
    width: 95px;
}
.selected_card{
    width: 100px;
    height: 150px;

    background-color: #383f4d;

    border-radius: 9px;

    position: relative;

    padding: 10px;
    margin: 5px;
}
.card_rating{
    font-family: sans-serif;
    font-weight: bold;
    color:#bbbbbb;
    text-align: center;

    font-size:20px;
    
    margin: 10px;
}
.remove_selected_card{
    position: absolute;
    top: 2px;
    left: 4px;

    width:15px;
    height:15px;

    font-family: sans-serif;
    font-weight: bolder;
    color: #bbbbbb;
}

/* Card Display */
.card_container{
    width:83px;
    height:auto;

    position:relative;

    margin:5px;
}
.card_img{
    width: 100%;
    height: 100%;
}
.card_type{
    position: absolute;

    width:40%;

    top: -7px;
    right: -7px;
}