@import "custom.less";

#navbar_container {
	background: @color-beige-01;
}

.navbar {
	font-size: 1.6rem;
	font-style: normal;
	font-weight: 600;
	line-height: 2.4rem;

	a {
		color: @color-gray-12;
	}

	.active {
		background: none;
	}

	.active a {
		color: @color-green-06;
	}

	.navbar-brand {
		/*
		margin-top: -40px;
		*/
  		padding: 15px 0;
	}

	.navbar-brand img {
		max-width: 10rem;
	}

	.nav-link {
		font-size: 1.6rem;
		display: flex;
	}

	.dropdown-toggle::after {
        border: none !important;
		background-image: url(../im/icon-chevron-down.svg);
		width: 20px;
		height: 20px;
		display: flex;
		background-size: 20px 20px;
		content: '';
		background-position: bottom right;
		background-repeat: no-repeat;
	}

	.show::after {
		transform: rotate(180deg); 
	}
	
	.dropdown-toggle:after { 
		transition: 0.3s; 
	}

	.megamenu { 
		padding: 2.5rem;
		font-size: 1.4rem;
		font-weight: 400;
		line-height: 2rem;
		color: @color-gray-11;
	}

	.megamenu img {
		max-width: 2.4rem;
	}

	.megamenu p.header {
		color: @color-gray-19;
		font-size: 1.6rem;
		/*
		padding-bottom: 0.5rem;
		*/
		padding-bottom: 1.5rem;
		margin: 0;
	}

	.megamenu .descr {
		padding-bottom: 1.5rem;
		font-size: 1.6rem;
		font-style: normal;
		font-weight: 600;
		line-height: 2.4rem; 	
		display: none;
	}
}

.top {
    display: flex;
    justify-content: end;

    .top-buttons {
        display: flex;
        justify-content: flex-end;
        align-items: flex-start;
        border-radius: 0px 0px 8px 8px;
        /* Shadow/md */
        box-shadow: 0px 2px 4px -2px rgba(16, 24, 40, 0.06), 0px 4px 8px -2px rgba(16, 24, 40, 0.10);
        overflow: hidden;
		display: none;

        button {
            background: none;
            outline: none;
            border: none;

            display: flex;
            padding: 10px 16px;
            justify-content: center;
            align-items: center;
            gap: 8px;

            border-right: 1px solid var(--yellow-gray-50, #FAF8F6);
            background: var(--White, #FFF);

            p {
                color: @color-gray-11;
                font-family: Gill Sans;
                font-size: 1.2rem;
                font-weight: 600;
                line-height: 1.8rem;
            }

            &:active {
                background-color: #F2F4F7;
            }
        }

        img {
            width: 1.5rem;
            height: 1.5rem;
        }

        .hide-sm {
            display: none;

            @media (min-width: @md) {
                display: inherit;
            }
        }

        .error-500 {
            background: @color-red-02;
            border-right: none;

            p {
                color: @color-white;
            }

            &:active {
                background-color: @color-red-03;
            }
        }
    }
}

/* ============ desktop view ============ */
@media all and (min-width: 992px) {
	#navbar_container {
		height: 140px;

		.container {
			width: 80%;
			left: 10%;
			position: absolute;
			z-index: 10000;
		}
	}

	.navbar {
		.navbar-brand img {
			max-width: 14rem;
		}
		
		li:first-child.nav-item {
			padding: 0 1.4rem 0 0;
		}

		li:last-child.nav-item {
			padding: 0 0 0 1.4rem;
		}

		li.nav-item {
			padding: 0 1.4rem;
		}

		.has-megamenu {
			position: static!important;
		}
		
		.megamenu {
			left: 0; 
			right: 0; 
			width: 100%; 
			margin-top: 0; 
			padding: 3.2rem;
		}

		.megamenu img {
			max-width: 100%;
		}

		.megamenu a {
			color: @color-gray-19;
			padding-bottom: 0;
			margin: 0;
			text-decoration: none;
		}

		.megamenu a.active {
			color: @color-green-06;
		}

		.megamenu .descr {
			padding-bottom: 1.5rem;
			font-size: 1.6rem;
			font-style: normal;
			font-weight: 600;
			line-height: 2.4rem; 	
			display: none;
		}
		
		.nav-item .dropdown-menu { 
			display: none; 
		}
		
		.nav-item:hover .dropdown-menu{ 
			display: block; 
		}
		
		.nav-item .dropdown-menu { 
			margin-top: 0;
		}
		
		.dropdown>.dropdown-toggle:active {
			pointer-events: none;
		}
	}
}	
/* ============ desktop view .end// ============ */

/* ============ mobile view ============ */
@media(max-width: 991px){
  .navbar {
		.fixed-top .navbar-collapse, 
		.sticky-top .navbar-collapse {
 		overflow-y: auto;
      	max-height: 90vh;
      	margin-top: 10px;
	}
  }
}
/* ============ mobile view .end// ============ */