/* =============================================================================
        Css for BioRePeel clinic finder
   ========================================================================== */
  
  
  
    /* =============================================================================
            General
       ========================================================================== */
    * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    h1 {
        font-size: 1.7em;
        margin: 0;
        font-family: "Plus Jakarta Sans", Helvetica, Arial, sans-serif;
    }

    a {
        /*color:#404040;*/
        color: var(--bs-primary);
        text-decoration: none;
    }

    a:hover {
        color: #101010;
    }
    
    .fa {
        font-size: 1.1em;
        cursor: pointer;
    }

  
    /* =============================================================================
            Layout
       ========================================================================== */
    #app {
        display: flex;
        flex-direction: row;
        height: 100vh; 
    }
    
    @media (max-width: 767.98px) {
        #app {
            flex-direction: column;
        }
    }
    
        .sidebar, .map {
            flex-grow: 1;
        }
       
        .sidebar {
            max-width: 400px;
            min-width: 200px;
            height: 100%;
            overflow: hidden;
            border-right: 1px solid rgba(0, 0, 0, 0.25);
            display: flex;
            flex-direction: column;
        }

        .map {
            flex-grow: 2;
            height: 100%;
        }
    
        @media (max-width: 767.98px) {
            .sidebar {
                width: 100%; 
                max-height: 50vh;
                max-width: none; 
                min-width: 0;
            }
            
                .sidebar .heading {order: 1;}
                .sidebar #storeinfo {order: 3;}
                .sidebar #listingDiv {order: 2;}

            .map {
                width: 100%; 
                height: 100%;
            }
        }
  
            /* =============================================================================
                    Heading & Search
               ========================================================================== */
            .heading {
                background: #fff;
                border-bottom: 1px solid #eee;
                height: auto;
                /*      line-height:60px;*/
                padding: 10px;
            }

                #searchbox {
                    width: 100%;
                    height: 36px;
                }

                    #search-input {
                        width: 100%;
                    }

                #closeButton {
                    float: right;
                }

                    #closeButton:hover,
                    :focus {
                        color: var(--bs-primary);
                        cursor: pointer;
                        /*padding: 5px;*/
                    }

                    #searchIcon:hover,
                    :focus {
                        color: var(--bs-primary);
                        cursor: pointer;
                    }

                #infoClose {
                    float: right;
                }

                #searchIcon {
                    float: right;
                    font-size: 26px;
                    margin-top: 1px;
                }
        

  
            /* =============================================================================
                    Items
               ========================================================================== */
            #storeinfo {
                padding: 10px;
                display: none;
                background-color: var(--bs-primary);
                color: #fff;
            }
    
                #directions {
                    background-color: #fff;
                    padding: .5em 1em;
                    border-radius: 2em;
                    display: inline-block;
                    margin-top: 1em;
                }

            .listings {
                height: 100%;
                overflow: auto;
                padding-bottom: 60px;
                overflow: auto;
                float: left;
                width: 100%;
            }

                .listings .item {
                    display: block;
                    border-bottom: 1px solid #eee;
                    padding: 10px;
                    text-decoration: none;
                    position: relative;
                }
                
                .listings .item:last-child {
                    border-bottom: none;
                }

                .listings .item .title {
                    display: block;
                    /*      color:#00853e;*/
                    color: #000;
                    font-weight: 700;
                }

                    .listings .item .title::after {
                        position: absolute;
                        top: 0;
                        right: 0;
                        bottom: 0;
                        left: 0;
                        z-index: 1;
                        pointer-events: auto;
                        content: "";
                        background-color: rgba(0,0,0,0);
                    }

                    .listings .item .title small {
                        font-weight: 400;
                        display: none; /* Hide products */
                    }

                    .listings .item.active .title,
                    .listings .item .title:hover {
                        color: var(--bs-primary);
                    }

                    .listings .item.active {
                        background-color: #f8f8f8;
                    }
      
            /* =============================================================================
                    Map
               ========================================================================== */
            .leaflet-container .leaflet-marker-icon {
                cursor: pointer;
            }

  
    /* =============================================================================
            Scrollbars
       ========================================================================== */
    :root {
        scrollbar-color: var(--bs-brp-primary-dark) rgba(0, 0, 0, 0.1);
        scrollbar-width: thin;
    }
    
    ::-webkit-scrollbar {
        width: 5px;
        height: 3px;
        border-left: 0;
        background: rgba(0, 0, 0, 0.1);
    }

    ::-webkit-scrollbar-track {
        background: none;
    }

    ::-webkit-scrollbar-thumb {
        background: var(--bs-brp-primary-dark);
        border-radius: 0;
    }