.scroll-left {
	    width: 22px;
	    position: absolute;
	    left: 0px;
	    top: 5px;
	    z-index: 1;
	}
	.scroll-right {
	    width: 22px;
	    position: absolute;
	    right: 0px;
	    top: 5px;
	    z-index: 1;
	}
	.scroll-left svg,
	.scroll-right svg {
	    width: 22px;
	    opacity: 0.6;
	    border-radius: 5px;
	}
	.scroll-left,
	.scroll-right {
	    background-color: #fff;
	    border-radius: 5px;
	    overflow: hidden;
	}
	.scroll-left:hover,
	.scroll-left:hover svg,
	.scroll-right:hover svg,
	.scroll-right:hover {
	    opacity: 1;
	}
	.scroll-left:hover svg path,
	.scroll-right:hover svg path {
	    fill: #016a1b;
	}
	@media screen and (max-width: 786px) {
	    .scroll-left,
	    .scroll-right {
	        display: none;
	    }
	    #cityButtonsContainer::after {
	        right: 0px !important;
	    }
	}

	#body-container {
        position: relative;
        margin-top: 110px;
    }
    @media (min-width: 992px) {
        #body-container {
            margin-top: 160px;
        }
    }
    @media (max-width: 991px) {
        .scroll header {
            top: -60px;
            box-shadow: 0PX 0PX 20PX rgba(0, 0, 0, 0.2);
        }
        .scrollup header {
            top: 0;
            box-shadow: 0PX 0PX 20PX rgba(0, 0, 0, 0.2);
        }
    }

    /* ========  Cities Button CSS  ========*/

    .cityButtonsSection{
        display: flex;
        align-items: center;
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        position: relative;
      	padding:0px 5px;
    }

    @media (min-width: 786px) {
    	.cityButtonsSection{
	        padding:0px 22px 0px 5px !important;
	    }	
    }

    .buttonsSection{
        display: flex;
        overflow-x: auto;
        flex-grow: 1;
        padding: 5px 10px 10px 10px;
        margin-left: 5px;
        background-color: none;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        font-family: Arial, sans-serif;
    }

    @media (max-width: 992px) {
    	body.scroll #cityButtonsContainer {
        	margin-top: 5px !important;
    	}	
    }

    .cityname-links{
        flex: 0 0 auto;
        padding: 8px 20px;
        margin-right: 5px;
        border: 1px solid #e5e5e5;
        background-color: #ffffff;
        border-radius: 50px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        white-space: nowrap;
        font-size: 13px;
        color: #222;
        transition: all 0.2s ease-in;
        cursor: pointer;
        background-color: #fff;
        text-decoration: none;
    }
    .cityname-links:hover, .cityname-links:active, .cityname-links:focus{
        background-color: #016A1B;
        color: white;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        border: 1px solid #016A1B;
    }
    #buttonContainer::-webkit-scrollbar {
        display: none;
    }
    #buttonContainer {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    #cityButtonsContainer {
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
    }
    #cityButtonsContainer::after {
        content: '';
        position: absolute;
        top: 0;
        right: 18px;
        height: 100%;
        width: 50px;
        background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1));
        pointer-events: none;
    }

    @media (min-width: 768px) {
        #cityButtonsContainer {
            max-width: 750px !important;
            width: 750px !important;
            margin: 0 auto;
        }
    @media (min-width: 1000px) {
        #cityButtonsContainer {
            max-width: 990px !important;
            width: 990px !important;
            margin: 0 auto;
        }
    }