.flyout-menu-open-trigger{
    width: 45px;
    height: 45px;
    position: fixed;
    top: 50%;
    left: 54px;
    transform: translate(0%, -50%);
    z-index: 600;
}
.flyout-menu-open-trigger.open {
    left: 188px;
}

flyout-menu{
  width: 55px;
overflow: visible;
    height: 50vh;
    position: fixed;
    top: 50%;
    left: 10px;
    transform: translate(0%, -50%);
    box-shadow: var(--theme-box-shadow-3d-harsh-max);
        transition: width .5s cubic-bezier(1, -0.44, 0, 1.46);
    border-radius: 8px;
    white-space: nowrap;
    z-index: 500;
    background: white;
}

flyout-menu.open {
  width: 200px;
}


flyout-menu .mobile-site-identity-container{
	display:none;
}

flyout-menu ul{
    padding: 10px;
    margin: 0px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

flyout-menu ul li{
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    column-gap: 10px;
    border-radius: 8px;
    height: 55px;
    box-shadow: var(--theme-box-shadow-3d-harsh-min);
    margin-bottom: 5px;
    padding-left: 3px;
}
flyout-menu:not(.open) ul li{
transition: width .15s;
    width: 100%;
    background: var(--theme-white);	
}

flyout-menu ul li:hover:not(.flyout-menu-search-trigger){
	background: var(--theme-green);
	color: var(--theme-white);
}
flyout-menu:not(.open) ul li:hover:not(.flyout-menu-search-trigger){
	background: var(--theme-white);
	color: var(--theme-darkblue-color);
	width: 80px;
}

flyout-menu ul li.flyout-menu-search-trigger:hover{
	background: var(--theme-blue);
	color: var(--theme-white);
}



flyout-menu ul li .title{
		opacity: 0;
	transition: opacity .9s cubic-bezier(0.79, 0.27, 0, 1.07);
    flex: 1;
    display: flex;
    position: relative;
    margin-right: 3px;
    overflow: auto;
    height: 100%;
    align-items: center;
    justify-content: flex-start;
}
flyout-menu.open ul li .title{
	opacity: 1;
}



flyout-menu.open ul profile-menu-container{
	display: flex;
	justify-content: space-around;
	align-items: center;
	column-gap: 3px;
}

flyout-menu.open ul profile_modal_opener_btn{
background: var(--theme-green);
    color: var(--theme-white);
    padding: 8px 5px;
    border-radius: 8px;
	width: 50%;
	z-index: 2;
	text-align: center;
}


flyout-menu ul li.flyout-menu-result-job-filter-open-close-trigger{
    background: var(--theme-white);
    border-radius: 8px;
    margin: auto 0px 0px;
    box-shadow: var(--theme-box-shadow-max);
    transition: margin .5s;
	    column-gap: 10px;
}
flyout-menu.open  ul li.flyout-menu-result-job-filter-open-close-trigger{
	margin: auto 8px 0px;
}

flyout-menu ul li.flyout-menu-search-trigger{
    background: var(--theme-white);
    border-radius: 8px;
    column-gap: 0px;
    margin: auto 0px 20px;
    box-shadow: var(--theme-box-shadow-max);
    transition: margin .5s;
}

flyout-menu.open  ul li.flyout-menu-search-trigger{
    margin: auto 8px 20px;
}

flyout-menu ul li.flyout-menu-result-job-filter-open-close-trigger .icon,
flyout-menu ul li.flyout-menu-search-trigger .icon{
    padding-left: 1px;
    padding-right: 1px;
    border-radius: 50px;
    border-radius: 5px;
    transition: .5s;
}

flyout-menu ul li.flyout-menu-search-trigger .title{
   justify-content: center;
	transition: letter-spacing .3s;
}
flyout-menu ul li.flyout-menu-result-job-filter-open-close-trigger .title {
    justify-content: center;
	    margin-left: -10px;
}


flyout-menu ul li.flyout-menu-search-trigger:hover .title{
letter-spacing: .2em;
}

.drawers-controls{
display: flex;
margin-bottom: 0.5em;
}

.flyout-menu-inner-close{
    margin-left: auto;
}


flyout-menu .status_changed_check{
    display: flex;
    position: absolute;
    right: 10px;
    transform: translate(8px, -70%);
    background: var(--theme-green);
    border-radius: 50px;
    height: 24px;
    width: 24px;
    font-size: 24px;
    justify-content: center;
    color: white;
    align-items: center;
    box-shadow: var(--theme-box-shadow-3d-smooth);
    font-weight: bold;
}



/* dynamic class on search button */
/*flyout-menu .search_trigger_ready_again{
    background: var(--theme-blue);
    
}
lyout-menu .search_trigger_ready_again *{
	color: var(--theme-white);	
}
*/


/* Apply the animation when the class is added */
flyout-menu .search_trigger_ready_again {
  animation: flicker 0.65s forwards;
  animation-delay: 0.8s;
}

@keyframes flicker {
	0% {
	    background: var(--theme-white);
	    color: var(--theme-blue);
	}
	5% {
	    background: var(--theme-blue);
	    color: var(--theme-white);
	}
	15%, 20%, 25% {
	    background: var(--theme-white);
	    color: var(--theme-blue);
	}
	35% {
	    background: var(--theme-blue);
	    color: var(--theme-white);
	}
	40%, 45%, 50%, 55% {
	    background: var(--theme-white);
	    color: var(--theme-blue);
	}
	60% {
	    background: var(--theme-blue);
	    color: var(--theme-white);
	}
	65% {
	    background: var(--theme-white);
	    color: var(--theme-blue);
	}
	70%, 75%, 80% {
	    background: var(--theme-blue);
	    color: var(--theme-white);
	}
	90% {
	    background: var(--theme-white);
	    color: var(--theme-blue);
	}
	100% {
	    background: var(--theme-blue);
	    color: var(--theme-white);
	}
}




	

flyout-menu .flyout-menu-selection .tooltiptext {
visibility: hidden;
    opacity: 0;
    min-width: 120px;
    background-color: var(--theme-green);
    color: var(--theme-white);
    text-align: center;
    border-radius: 8px;
    padding: 5px 0;
    position: absolute;
    z-index: 600;
    box-shadow: var(--theme-box-shadow-min);
    transform: translate(30px, 0px);
    transition: transform .5s cubic-bezier(0.35, 1.01, 0.6, 1.07);
}

flyout-menu:not(.open) .flyout-menu-selection:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
    transform: translate(36px, 0px);
}




/* --------- custom scroll bar for this element --------- */
flyout-menu *::-webkit-scrollbar{
	height: 8px;
}