﻿.gsc-control-cse {
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 20px 0;
    width: 100%;
    max-width: 500px;
    font-size: 0.875rem !important;

    .gsc-control-wrapper-cse {


        /* INPUT */
        form.gsc-search-box {

            table.gsc-search-box {

                .gsc-input {
                    color: #0B1215 !important;
                    font-size: 1rem !important;
                    padding-right: 12px;

                    .gsc-input-box {
                        border-radius: 6px;
                        border: 1px solid var(--sws-border-grey) !important;
                        background: transparent !important;
                        padding: 0 !important;
                            
                        td.gsib_a {
                            padding: 8px 12px 8px 12px !important;
                        }

                        td.gsib_b {

                            .gsst_b {

                                a.gsst_a {
                                    padding: 0 8px 0 4px;

                                    span.gscb_a {
                                        color: var(--sws-font-color);
                                    }
                                }
                            }
                        }

                        input.gsc-input {
                            background: transparent;
                            color: var(--sws-font-color) !important;
                            padding: 0 !important;
                            margin: 0 !important;
                        }

                    }
                }

                .gsc-search-button {

                    button.gsc-search-button {
                        height: 42px;
                        border-radius: 6px;

                        border: 0 !important;
                        background-color: var(--sws-primary-red) !important;

                        transition: background-color 0.15s ease-in-out;

                        svg {
                            height: 18px;
                            width: auto;
                        }
                    }
                    button.gsc-search-button:hover {
                        background-color: var(--sws-secondary-red) !important;
                    }
                }
            }
        }

        /* SEARCH RESULT OVERLAY */
        .gsc-results-wrapper-overlay {
            /* background: var(--sws-dropdown-modal-bg-color) !important; */
            background: transparent !important;
            border: 0 !important;
            border-radius: 0;

            height: 100% !important;
            width: 100% !important;
            top: 0 !important;
            left: 0 !important;
            padding: 5.5rem 2rem 2rem 2rem !important; 

            display: flex;

            .gsc-results-close-btn, .gsc-results-close-btn-visible {
                top: 2rem !important;
                right: 2rem !important;
                background-image: none !important;
                background-color: var(--sws-font-color);

                /* Clip-Pfad mit der Path-Daten des SVGs */
                clip-path: path('M24.3,4.3c1-1,1-2.6,0-3.5s-2.6-1-3.5,0l-8.2,8.2L4.3.7C3.3-.2,1.7-.2.7.7S-.2,3.3.7,4.3l8.2,8.2L.7,20.7c-1,1-1,2.6,0,3.5s2.6,1,3.5,0l8.2-8.2,8.2,8.2c1,1,2.6,1,3.5,0s1-2.6,0-3.5l-8.2-8.2,8.2-8.2Z');

                height: 25px !important;
                width: 25px !important;
                background-position: 0 !important;

                transition: all 0.15s ease-in-out;
            }
            .gsc-results-close-btn:hover, .gsc-results-close-btn-visible:hover {
                opacity: 0.8;
            }

            .gsc-above-wrapper-area {
                display: none !important;
            }

            .gsc-wrapper {
                max-width: 800px;
                margin: 0 auto;
                width: 100%;

                .gsc-resultsbox-visible {

                    .gsc-resultsRoot {

                        .gsc-results {
                            width: 100%;

                            /* TITEL MIT SUCHANFRAGE */
                            .gsc-webResult.gsc-result {
                                margin: 0 0 1rem 0 !important;
                                background-color: var(--sws-font-color) !important;
                                color: var(--sws-bg-color) !important;
                                padding: 0.5rem 1rem 1rem 1rem !important;
                                border-radius: 0.5rem !important;
                                overflow: hidden !important;

                                .gs-result {
   
                                    .gs-spelling {}
                                    .gs-spelling-original {}
                                }
                            }

                            .gsc-expansionArea {

                                /* SINGLE SEARCH ELEMENT */
                                .gsc-webResult, .gsc-result {
                                    background-color: var(--sws-bg-color) !important;
                                    border-radius: 0.5rem !important;
                                    margin-bottom: 1rem !important;
                                    border: 1px solid var(--sws-border-grey);
                                    padding: 0.5rem 1rem 1rem 1rem !important;

                                    /* NO RESULTS */
                                    .gs-no-results-result {
                                        
                                        .gs-snippet {
                                            background-color: transparent !important;
                                            border: 0 !important;
                                            display: inline-block;
                                            margin: 5px;
                                            padding: 5px;      
                                            color: var(--sws-font-color) !important;
                                        }
                                    }

                                    /* TITLE */ 
                                    .gsc-thumbnail-inside {
                                        padding: 0 !important;

                                        a.gs-title, a.gs-title b {
                                            color: var(--sws-primary-red) !important;
                                        }
                                    }

                                        /* BREADCRUMB URL */
                                        .gsc-url-top {
                                            padding: 0 !important;
                                        }
                                        .gsc-url-top * {
                                            color: var(--sws-font-hover-color-gray) !important;
                                        }

                                        /* THUMBNAIL AND DESCRIPTION */
                                        .gsc-table-result > .gsc-table-cell-thumbnail, .gsc-table-result > .gsc-thumbnail {
                                            display: none;
                                        }
                                        .gsc-table-result {
                                            display: flex;
                                            margin-top: 0.5rem;
                                            padding: 0 !important;
                                            font-size: 1rem !important;                                   

                                            /* THUMBNAIL */
                                            .gsc-table-cell-thumbnail, .gsc-thumbnail {
                                                background-color: #fff;
                                                border-radius: 0.25rem;

                                                .gs-image-box, .gs-web-image-box, .gs-web-image-box-landscape {
                                                    width: 150px !important;
                                                    height: 100% !important;
                                                    padding: 0.5rem !important;

                                                    a.gs-image {
                                                        border: 0 !important;
                                                        max-width: 100%;
                                                        max-height: 100%;
                                                        height: 100%;
                                                        width: 100%;
                                                        display: flex;
                                                        
                                                        /* THUMBNAIL */
                                                        img.gs-image {
                                                            width: 100%;
                                                            height: auto;
                                                            max-width: 100%;
                                                            max-height: 100%;
                                                            border: 0 !important;
                                                            margin: auto;
                                                        }
                                                    }
                                                }
                                            }
                                            
                                            /* DESCRIPTION */
                                            .gsc-table-cell-snippet-close {
                                                padding: 0 !important;
                                            }
                                            .gsc-table-cell-snippet-close * {
                                                color: var(--sws-font-color) !important;
                                            }

                                        }
                                    }
                                }

                                /* PAGINATION */
                                .gsc-cursor-box {
                                    margin: 2.5rem 0 5rem 0 !important;

                                    .gsc-cursor {

                                        .gsc-cursor-page {
                                            border: 1px solid var(--sws-border-grey) !important;
                                            padding: 0.25rem 0.35rem;
                                            border-radius: 0.25rem;
                                            background-color: transparent !important;
                                            color: var(--sws-font-color) !important;
                                        }
                                        .gsc-cursor-page.gsc-cursor-current-page {
                                            background-color: var(--sws-border-grey) !important;
                                            color: #0B1215 !important;
                                        }
                                        .gsc-cursor-page.gsc-cursor-current-page:hover {
                                            text-decoration: none;
                                        }
                                    }
                                }

                                /* AUF GOOGLE SUCHEN */
                                .gcsc-more-maybe-branding-root {
                                    display: none !important;
                                }

                            }
                        }
                    }
                }
            }
        

        /* SEARCH RESULT BACKGROUND */
        .gsc-modal-background-image {
            background-color: var(--sws-bg-color) !important;
            opacity: 1 !important;
        }

    }

}


.gstl_51, .gssb_c {
    border-radius: 0.5rem !important;
    overflow: hidden !important;
    border: 1px solid var(--sws-border-grey) !important;

    .gssb_e {
        
        table.gsc-completion-container {
            background: var(--sws-bg-color) !important;
            border: 0 !important;
            font-size: 1.25rem;
            
            tbody {
                
                tr {

                    td.gssb_a {

                        .gsq_a {
                            margin: 5px 0;
                        }
                    }
                }
                tr.gsc-completion-selected {
                    cursor: pointer;
                    background-color: ;
                }
                tr.gsc-completion-selected:hover {
                    color: #0B1215 !important;
                }
            }
        }
    }
}

/* SEARCH INPUT FILLED */

.gsc-control-cse-white-filled {

    .gsc-control-cse {
        .gsc-control-wrapper-cse {
            /* INPUT */
            form.gsc-search-box {
                table.gsc-search-box {
                    .gsc-input {
                        .gsc-input-box {
                            border: 0 !important;
                            background: #fff !important;

                            td.gsib_b {
                                .gsst_b {
                                    a.gsst_a {
                                        span.gscb_a {
                                            color: #0B1215;
                                        }
                                    }
                                }
                            }
                            input.gsc-input {
                                color: #0B1215 !important;
                            }
                        }
                    }
                }
            }
        }
    }

}


/* SEARCH INPUT FULL WIDTH */

.gsc-control-cse-full-width {

    .gsc-control-cse {
        max-width: 100%;
    }

}