body {
    overflow-x: hidden;
}

.nav {}

.nav ul {
    list-style: none;
    padding   : 16px;
    margin    : 0;
}

.nav ul li,
.nav ul li a {
    color          : #fff;
    cursor         : pointer;
    transition     : 200ms;
    text-decoration: none;
    white-space    : nowrap;
    font-weight    : 700;
    /* text-transform : capitalize; */
    /* uppercase; */
}

.nav ul li:hover,
.nav ul li a:hover {
    opacity: 1;
}

.nav ul li a,
.nav ul li a a {
    display    : flex;
    align-items: center;
    height     : 100%;
    width      : 100%;
}

.nav ul li::before {
    content  : '';
    width    : 0;
    height   : 0;
    position : absolute;
    right    : 8px;
    top      : 50%;
    transform: translateY(-50%);
}

.nav ul .link::before {
    padding-right: 0;
    display      : none;
}

.nav>ul {
    padding        : 0;
    display        : flex;
    height         : 50px;
    align-items    : center;
    justify-content: space-between;
}

.nav>ul li {
    position: relative;
}

.main-nav-list>li:first-child {
    margin      : 0px;
    padding-left: 0px;
}

.main-nav-list>li:last-child {
    margin       : 0px;
    padding-right: 0px;
}

.nav>ul li ul {
    visibility         : hidden;
    opacity            : 0;
    padding            : 0;
    min-width          : 200px;
    background-color   : rgba(8, 7, 7, 0.8);
    position           : absolute;
    top                : 55px;
    left               : -20px;
    /* transform       : translateX(-50%); */
    transition         : 200ms;
    transition-delay   : 200ms;
}

.nav>ul li ul li {
    margin         : 0;
    padding        : 8px 16px;
    display        : flex;
    align-items    : center;
    justify-content: flex-start;
    height         : auto;
    padding-right  : 40px;
    margin-top:1%;
}

.nav>ul li ul li::before {
    width : 0;
    height: 0;
}

.nav>ul li ul li ul {
    top      : -2%;
    left     : 100%;
    transform: translate(0);
}

 ul.left {
    top      : -2% !important;
    right     : 100% !important;
    left       : auto !important;
    transform: translate(0);
}

.nav>ul li ul li:hover {
    background-color: #333;
}

.nav>ul li:hover>ul {
    opacity         : 1;
    visibility      : visible;
    transition-delay: 0ms;
}


/* sub menu color */
.nav li a:first-child:nth-last-child(2):before {
    content : "";
    position: absolute;
    height  : 0;
    width   : 0;
    border  : 5px solid transparent;
    right   : 10px;
}

/* submenu positioning*/
.nav ul {
    white-space: nowrap;
    z-index    : 1;
}

.nav>li:hover>ul {
    left      : auto;
    margin-top: 5px;
    min-width : 100%;
}

.nav>li li:hover>ul {
    left       : 100%;
    margin-left: 1px;
    top        : -1px;
}

/* arrow hover styling */
.nav>li>a:first-child:nth-last-child(2):before {
    border          : 5px solid blue;
    border-top-color: white;
    top             : 22.5px;
    right           : 10px;
}

.nav>li:hover>a:first-child:nth-last-child(2):before {
    border             : 5px solid transparent;
    border-bottom-color: white;
    margin-top         : -5px
}

.nav li li>a:first-child:nth-last-child(2):before {
    border-left-color: #fff;
    top              : 22.5px;
    margin-top       : -5px
}

.nav li li:hover>a:first-child:nth-last-child(2):before {
    border            : 5px solid transparent;
    border-right-color: white;
    right             : 10px;
    top               : 22.5px;
}

.makeStyles-searchbar-50{
    min-height: 20px !important;
    margin-left: 50px !important;
}

.makeStyles-searchbar-50 .MuiIconButton-root{
    padding: 7px !important;
}


.MuiToolbar-regular{
    min-height: 40px !important
}

.searchbar {
    background: '#fff' !important;
}

.searchbar .MuiIconButton-root{
    padding: 2px !important;
    background: '#fff' !important;
}