@media only screen and (min-width: 992px) {
    #tl_search_wrapper {
        display: block;
        box-sizing: border-box;
        background-color: inherit;
        width: 100%;
        height: 50px;
        margin-top: 10px;
        margin-bottom: 10px;
        text-align: left;
    }
    
    #tl_search {
        display: block;
        box-sizing: border-box;
        height: 100%;
        margin: 10px;
        width: calc(100% - 20px);
        padding: 10px;
        text-align: left;
        outline: none;
        border: 1px solid var(--outline-color);
        border-radius: 5px;
        font-size: var(--paragraph_font_size);
        background-color: var(--secondary-color);
        color: var(--font-color);
        transition-duration: 300ms;
    }
    #tl_search:focus {
        border: 1px solid var(--button-color);
        scale: 1.001;
        background-color: var(--tertiary-color);
    }
    #tl_search:focus::placeholder {
        transition-duration: 200ms;
        color: transparent;
    }

    #tl_app_icon {
        display: none;
        display: inline-block;
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        height: 65%;
        aspect-ratio: 1/1;
        object-fit: contain;
        user-select: none;
        cursor: pointer;
        vertical-align: middle;
    }
    #tl_app_icon:hover {
        filter: invert(80%);
        transition: 300ms;
    }

    #tool_list {
        margin: 10px;
    }

    .app_btn {
        box-sizing: border-box;
        background-image: none;
        background-color: inherit;
        cursor: pointer;
        width: 100%;
        margin-top: 5px;
        padding: 10px;
        text-align: left;
        transition-duration: 150ms;
        border-radius: 3px;
        font-size: var(--paragraph_font_size);
    }
    .app_btn:hover {
        transition-duration: 300ms;
        background-color: var(--tertiary-color);
        padding-left: 20px;
        scale: 1.01;
    }
    .app_btn:focus {
        background-color: var(--button-color);
    }

    .app_btn_text {
        display: inline-block;
        font-family: var(--std_font);
        font-size: var(--paragraph_font_size);
        user-select: none;
        vertical-align: middle;
        font-weight: var(--content_1_font_weight);
        letter-spacing: var(--content_1_letter_spacing);
        color: var(--font-color);
    }
    
    .app_btn_icon_wrapper {
        display: none;
        text-align: left;
        vertical-align: middle;
        height: clamp(10px, calc(1*(.25vh + 1.75vw)), 30px);
        user-select: none;
        overflow: hidden;
    }
    
    .app_btn_icon {
        display: none;
        object-fit: contain;
        height: 100%;
        aspect-ratio: 1/1;
        transition: .2s;
        user-select: none;
    }
    
    .hidden {
        visibility: hidden;
        height: 0;
        padding: 0;
    }
}

@media only screen and (max-width: 991px) {
    #tl_search_wrapper {
        display: block;
        box-sizing: border-box;
        background-color: inherit;
        margin-top: 20px;
        margin-bottom: 5px;
        text-align: left;
    }
    
    #tl_search {
        display: block;
        box-sizing: border-box;
        margin: 0 auto;
        width: 90%;
        height: 50px;
        margin-bottom: 10px;
        text-align: center;
        outline: none;  
        border: 1px solid var(--tertiary-color);
        border-radius: 5px;
        font-size: var(--paragraph_font_size);
        transition-duration: 300ms;
        box-shadow: 2px 2px 10px var(--outline-color);
        background-color: var(--primary-color);
        color: var(--font-color);
        letter-spacing: var(--content_1_letter_spacing);
        font-weight: bold;
    }
    #tl_search:focus::placeholder {
        font-size: clamp(13px, calc(.4*(1.75vw + .5vh)), 15px);
    }
    #tl_search:focus {
        border: 1px solid var(--button-color);
    }
    #tl_search:focus::placeholder {
        transition-duration: 200ms;
        color: transparent;
    }

    #tl_app_icon {
        display: block;
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        background-size: 25px;
        margin: 0 auto;
        width: 90%;
        height: 25px;
        padding-top: 10px;
        padding-bottom: 10px;
        border-radius: 5px;
        background-color: var(--button-color);
    }
    #tl_app_icon:hover {
        filter: invert(80%);
        transition: 300ms;
    }

    .app_btn {
        box-sizing: border-box;
        margin: 0 auto;
        display: block;
        background-color: var(--secondary-color);
        color: var(--font-color);
        font-size: var(--paragraph_font_size);
        padding: 10px;
        margin: 10px;
        border-radius: 8px;
        box-shadow: 2px 2px 4px var(--outline-color);
        letter-spacing: var(--content_1_letter_spacing);
        font-weight: bold;
        text-align: center;
        text-decoration: none;
    }
    .app_btn:hover {
        background-color: var(--button-color);
    }
    .app_btn:focus {
        background-color: var(--button-color);
        color: white;
    }
    
    .app_btn_text {
        display: inline-block;
        font-weight: bold;
        font-size: 18px;
        transition: .2s;
        user-select: none;
        text-align: center;
        vertical-align: middle;
        font-family: Arial;
    }
    
    .app_btn_icon_wrapper {
        display: inline-block;
        text-align: left;
        vertical-align: middle;
        padding: 2.5px;
        height: 30px;
        user-select: none;
        overflow: hidden;
    }
    
    .app_btn_icon {
        display: none;
        object-fit: contain;
        height: 100%;
        aspect-ratio: 1/1;
        transition: .2s;
        user-select: none;
    }
    
    .hidden {
        visibility: hidden;
        height: 0;
        padding: 0;
    }

    #tool_list {
        margin: 0 auto;
        overflow-y: scroll;
        scrollbar-width: thin;
        height: calc(100% - 100px);
        background-color: var(--primary-color);
        width: 90%;
        border-radius: 5px;
        box-shadow: 2px 2px 10px var(--outline-color);
    }

}