/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
/* %%               control mobile view               %% */
/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
div.filter_menu.container.mobile{
    display:none;
}

/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
/* %%              css for elements                   %% */
/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */

div.content{
    display:grid;
    grid-template-rows:100px auto;
}

div.content_panel{
    margin-top:20px;
 }

div.results_message_container.monster{
    display:none;
    grid-template-columns: 150px auto;
    text-align: center;
    gap:25px;
    border-radius: 15px;
    border: 2px solid #FC851D;
    background-color: #20292A;
    padding:10px;
    width:400px;
    margin:25%;
    margin-top:200px;
}

img.results_monster{
    width:150px;
}

h3.results_message{
    font-family: "Mouse Memoirs", sans-serif;
    color: #ffffff;
    font-size: 30px;
    font-weight: 400;
    letter-spacing: .01px;
    align-self:center;
}

div.search_panel{
    display:grid;
    align-items:center;
    justify-items:center;
    height:125px;
    background-color:#342c43
}

div.search_panel {
  position: sticky;
  top: 0; 
  z-index:5;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, .75);
}

div.search_results {
    margin-left:120px;
}

div.search_field_container.search_view {
    display:flex;
    padding:10px;
    background-color: #342c43;
    border: none;
    border-radius:25px;
    
}

input.field.search_bar{
    background-color: #FC851D;
    font-family: "Economica", sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: white;
    border-radius: 7px;
    border: none;
    margin-bottom:15px;
}

input.field.search_bar.search_view{
    background-color: #5c3a64;
    width:600px;
    height:35px;
    border:none;
    outline:none;
    margin:0px;
}

div.title_container.filter{
    display:flex;
  
    gap:5px;
    align-items: center;
    margin:5px;
}

div.title_container_search.expanded {
    grid-template-columns: 56px 1fr 30px; 
}

/* div.filter_panel {
    display:none;
    grid-template-columns: 1fr;
    justify-items: center;
    align-items: center;
    gap:1rem; 
    border-radius: 15px;
    padding-bottom:5px;
    transition: grid-template-columns 2.5s ease, gap 2.5s ease, row-gap 2.5s ease; 
} */

div.more_clip_art.container{
    display: flex;
    justify-content: center; /* horizontal centering */
    align-items: center;     /* vertical centering */
    height: 300px;    
}

div.more_clip_art.frame {
    padding: 10px;
    border-radius: 15px;
    background-color: #20292A;
    border: 2px solid #394547;
    margin-bottom: 0px;
    transition: border 0.01s ease

}

div.more_clip_art.frame:hover {
    border: 3px solid #FC851D;
}


img.load_more_button{
    width:275px;
}

div.button_container.search_view{
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: .5rem;
}

div.button.search_view{
    display:grid;
    align-items: center;
    justify-items: center;
    position:relative;
    border:2px solid #5e7478;
    border-radius:50px;
    padding:3px;
    height:25px;
    width:25px;
}

div.button_container.search_view .button{
    width: 40px;
    height: 40px;
}

img.search_icon.search_view{
    width:30px;
}

img.filter_icon{
    width:85%;

}

img.filter_icon.option{
    width:85%;
}

img.filter_icon.group{
    width:75%;
}

img.filter_icon.platform{
    width:100%;
}


h4.plain_text.search_view{
    font-family: "Economica", sans-serif;
    font-weight: 600;
    font-size: 18px;
    letter-spacing: .01rem;
    color: white;
    justify-self:center; 
    display:none;

}

.search_icon_button.search_view{
    height:37px;
    width:37px;
    border-radius:7px;
}

.search_icon.search_start{
    height:25px;
}


.tooltip {
    position: relative;
    display: flex;
    align-content: center;
    justify-content: center;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: max-content;
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 5px 8px;
    border-radius: 4px;
    position: absolute;
    z-index: 1;
    bottom: 125%; /* above icon */
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
    font-family: "Economica", sans-serif;
    font-size: 16px;
    white-space: nowrap;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}


/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
/* %%              clip_art_buttons                   %% */
/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */

div.clip_art_buttons.container{
    display:flex;
    gap:10px;
}

div.clip_art_type.button{
    flex: 0 0 auto;    
    display:flex;
    flex-direction: row;
    padding: 5px;
    background-color: #3d4f51;
    border: 2px solid #5e7478;
    border-radius: 10px;
    align-items: center;
    cursor:pointer;
}

div.clip_art_type.button:hover{
    border:2px solid #FC851D;

}

img.clip_art_type.button{
    width:35px;
    max-width: 100%;
    height:auto;
    margin-right:10px;

}

h2.feature_label.clip_art_button{
    font-size: 16px;
}

/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
/* %%               search results                    %% */
/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */

div.filter.data{
    display:none;
}

div.content_container.search_view{
    margin-left: 120px; 
}

div.container.search_view{
    display:flex;
    flex-direction: row;
    flex-wrap:wrap;
    gap:25px;
    justify-content:center;
    align-items:center;
    min-height:65vh;
}


div.card_container.search_view{
    flex:1 1 20%;
    align-items: center;
    justify-items: center;
    padding:10px;
    border-radius:15px;
    background-color:#20292A;
    border: 2px solid #FC851D;
    margin-bottom:0px;
    max-width:250px;
}

@keyframes fillSlide {
    0% {
        background-position: 100% 0;
    }
    50% {
        background-position: 0 0;
    }
    100% {
        background-position: 100% 0;
    }

}

div.card_container.search_view.empty {
    display:grid;
    border-radius: 15px;
    background-image: linear-gradient(to right, #20292a 0%, #4d595b 100%);
    background-size: 200% 100%;
    background-position: 100% 0;
    border: 2px solid #FC851D;
    margin-bottom: 0px;
    animation: fillSlide 2s linear infinite;
}


img.thumbnail.search_view{
    border-radius:10px;
    max-height:250px;
    max-width:250px;
}


div.card_footer.search_view{
    display:grid; 
    grid-template-rows: 75px 25px;
    grid-template-columns: 1fr;
    z-index:auto;
}

div.title_container.search_view{
    display:grid;
    gap:5px;
    grid-template-columns: 30px 175px;
    background-color: #394547;
    border-radius:7px;
    border:2px solid #415154;
    margin-bottom:0px;
}

img.platform_icon.search_view {
    width:90%;
    align-self:center;
    padding:3px;
}

div.title_panel.search_view{
    align-self: center;
}

h2.plain_text.platform.search_view{
    color:#bac9cb
}

div.interaction_panel.search_view{
    position:relative;
    top:-25px;
    margin: auto;
    display: grid;
    gap: 5px;
    width: auto;
    border-radius: 50px;
    border: 2px solid #415154;
    grid-template-columns: 1fr 1fr;
    background-color: #394547;

}

img.button.search_view{
    width:100%
}

.color_picker {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: #5e7478;
    border: none;
    padding: 0;
    margin: 0;
}
.color_picker::-webkit-color-swatch-wrapper {
	padding: 0;
}
.color_picker::-webkit-color-swatch {
    border-radius: 50%;
    border:2px solid #5e7478;
}

div.color_picker_panel{
    display:flex;
    gap:5px;
    border:2px solid #5e7478;
    border-radius: 11px;

}

div.option_menu.button{
    display:grid;
    align-items:center;
    justify-items:center;
    border:2px solid #5e7478;
    border-radius: 50%;
    width:40px;
    height:40px;
}

h3.plain_text.search_view{
    font-family: "Economica", sans-serif;
    color: white;
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 0px;
    margin: 0px;
    justify-self: center;

}


/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
/* %%               filter menu                   %% */
/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */


div.filter_menu.container{
    display:flex;
    flex-direction: column;
    gap:10px;
    padding:20px;
    background-color: #3d4f51;
    position: fixed;
    border-radius:7px;
    z-index:12;

    top:28vh;
    left:10px;

    box-shadow: 2px 2px 6px rgba(0, 0, 0, .75);
    border: 1px solid #5e7478;

}

div.filter_menu_container{
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;

}

div.filter_group.frame{
    width:45px;
    height:45px;
    border-radius: 100%;
    border:3px solid #5e7478;
    background-color: #3d4f51;

    display:grid;
    align-items: center;
    justify-items: center;

}

div.filter_group.control{
    background-color: #3d4f51;
    display:flex;
    flex-direction: row;
    align-items: center;
    justify-items: center;
    gap:3px;
    margin-bottom: 10px;
    border:2px solid #3d4f51;
    padding:7px;
    border-radius:15px;
}

div.filter_group.control:hover{
    border-color:#FC851D;
}

div.filter.panel{
    display:grid;
    grid-template-rows: 15px 85px;
    border:3px solid #5e7478;
    border-radius: 25px;
    padding:7px;
}



div.feature.container{
    background-color: #3d4f51;
    display:flex; 
    flex-direction:column; 
    gap:10px;
    padding:15px;
    border-radius: 10px;

    position: absolute;
    left:205px;
    z-index:30;
    top:0px;

    box-shadow: 2px 2px 6px rgba(0, 0, 0, .75);
    border: 1px solid #5e7478;

}



div.feature.container.closed{
    display:none; 
}

div.option.panel{
    display:flex;
    flex-direction: row;
    gap:20px;
    align-items:center;
}

div.filter.frame{
    display: flex;
    align-items: center; /* keeps the icon centered inside */
    justify-content: center;
    width:60px;
    height:60px;
}

div.filter.frame.option{
    border-radius: 10px;
    padding:5px;
}

div.filter.panel.separator{
    display:block;
    width:3px;
    height:40px;
    background-color:white;
    border-radius:5px;
    margin:0px;
    padding:0px;
    border:none;
}

h2.feature_label{
    font-family: "Economica", sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: white;
    margin: 0px;
    margin-top: 8px;
    margin-bottom: 8px;

}

h3.feature_label{
    font-family: "Economica", sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #9CACAF;
    margin: 0px;
    margin-top: 8px;
    margin-bottom: 8px;   
    line-height:0px; 
}

/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
/* %%               filter List Container                  %% */
/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */


div.filter_list.panel.container{
    display:flex;
    flex-direction: column;
    align-items: start;
    width:100%
}

div.filter_list.container.inner{
    display:flex;
    flex-direction: column;
    gap:5px;
    background-color: #20292A;
    padding:7px;
    border-radius: 10px;    
}

div.filter_list.panel{
    display:flex;
    flex-direction: row;
    gap:5px;
    align-items:center
}

div.filter_list.control{
    display:flex;
    align-items: center;
    gap:2px;

}

img.filter_list.control.icon {
    width:25px;
}

img.filter_list.control.remove_icon {
    width:17px;
    height:17px;
}

h4.filter_list.control.field{
    font-family: "Economica", sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: white;
    margin: 0px;
}

/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
/* %%       mobile filter menu container              %% */
/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */




div.filter_group.container.mobile{
    width:70px;
}

div.filter_group.frame.mobile{
    width:35px;
    height:35px;
    border-width:2px;
}

div.filter_menu.container.mobile{
    width:275px;
    flex-direction: row;
    position:fixed;
    bottom:10px;
    top:auto;
    left: 50%;
    transform: translateX(-50%);
    z-index:20;
    padding:7px;
}

div.filter_group.control.mobile{
    flex-direction: column;
    padding:0px;
    border:0px;
    margin:0px;
    gap:7px;
}

div.option.panel.mobile{
    width:300px;
    flex-direction: row;
    flex-wrap:wrap;
    gap:5px;
}

div.feature.container.mobile{
    position:fixed;
    top:-72vh;
    left: 50%;
    transform: translateX(-50%);
    padding:10px;
    gap:2px;

}

div.filter.panel.mobile{
    display:flex;
    flex-direction: column;
    margin:0px;
    border:0px;
    padding:0px;
}

div.filter.frame.option.mobile{
    display:grid;
    grid-template-rows: 35px 16px;
    justify-items:center;
    text-align: center;
    padding:5px;
    width:35px;
    height:auto;
}

img.filter_icon.selector.mobile{
    width:100%
}

div.filter.frame.mobile{
    width:35px;
    height:35px;
}

h3.feature_label.filter.mobile{
    font-size:8px;
    line-height:8px;
}

h3.feature_label.mobile{
    font-size:10px;
    line-height:0px;
    margin:0px;
}

input.color_picker.search_view.mobile{
    width: 35px;
    height:35px
}



@media only screen and (max-width: 600px) {
 
    div.content{
        grid-template-rows: 50px auto;
    }

    input.field.search_bar.search_view{
        width:50vw;
        height:25px;
    }

    img.thumbnail.search_view{
        max-width:125px;
    }

    div.card_container.search_view{
        max-width:125px;
    }

    div.title_container.search_view{
        grid-template-columns: 22px 103px;
    }

    div.filter_menu.container{
        display:none;
    }

    div.filter_menu.container.mobile{
        display:flex;
    }

    div.search_results{
        margin-left:0px;
    }

    div.content_container.search_view{
    margin-left: 0px; 
    }

    img.empty_card.mascot{
        width:125px
    }

    div.search_panel{
        height:125px;
    }

    h2.plain_text.search_view{
        font-size:10px
    }

    h2.plain_text.platform.search_view{
        font-size:14px;
    }

    img.search_icon.search_view{
        width:20px;
    }

    button.search_icon_button.search_view{
        height:25px;
        width:25px;
    }

    div.results_message_container.monster{
        grid-template-columns: 100px auto;
        width:250px;
        margin:auto;
        margin-top:0px;

    }

    h3.results_message.monster{
        font-size:16px;
    }

    h3.results_message{
        margin-left:10px;
        font-size:22px;
    }

    img.results_monster{
        width:100px;
    }

    img.clip_art_type.button{
        width:25px;   
        margin:0px; 
    }

    h2.feature_label.clip_art_button{
        font-size:10px;
    }

    div.clip_art_type.button{
        flex-direction: column;
        padding:5px;
    }



}