/*------
Translate
------*/
.translate {
   display: flex;
}
.trans-bl {
    height: auto;
    margin-left: 0;
	margin-right: 28px;
}
.trans-wh {
    justify-content: flex-end;
}
.translate .uk-subnav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
	.translate .uk-subnav > * {
		position: relative;
		padding-left: 0;
	}
		.translate .uk-subnav > * > :first-child {
			display: flex!important;
			align-items: center;
			font-size: 14px;
			transition: .6s ease-in-out;
			transition-property: color, background-color;
			padding: 0.5em 25px 0.5em 0;
		}
.translate .uk-drop-parent-icon {
    position: relative;
    transition: transform .6s ease-out;
}
    .translate .uk-drop-parent-icon::after {
		content: "";
		position: absolute;
		width: 0.9em;
		height: 0.5em;
		top: 50%;
		right: -25px;
		transform: translate(0, -50%);
		background-repeat: no-repeat;
		background-size: 1em;
		background-position: center;
		background-image: url(/share/im-hanano/ui/nr-translate-bl.svg);
	}
	.pOthers[data-hmenucolor="dark"] .translate .uk-drop-parent-icon::after {
		background-image: url(/share/im-hanano/ui/nr-translate-bl.svg);
	}
	.trans-wh .uk-drop-parent-icon::after,
	[data-hmenucolor="dark"] .translate .uk-drop-parent-icon::after {
        background-image: url(/share/im-hanano/ui/nr-translate-wh.svg);
    }
	.translate .uk-drop-parent-icon svg {
		display: none;
	}
.translate [aria-expanded=true] > .uk-drop-parent-icon {
    transform:rotateX(180deg);
}
.translate .uk-drop {
    position: absolute;
    z-index: 1020;
	display: none;
    --uk-position-offset: 20px;
    --uk-position-viewport-offset: 15px;
    box-sizing: border-box;
    width: 300px;
}
.translate .uk-dropdown {
    --uk-position-offset: 10px;
    --uk-position-viewport-offset: 15px;
    --uk-inverse: dark;
    width: auto;
    min-width: 200px;
    padding: 25px;
    background: #fff;
}
.translate .uk-dropdown.uk-drop.uk-open {
    display: block;
    left: 50%!important;
    padding: 20px;
}
/*.translate .uk-dropdown :focus-visible {
    outline-color:#333 !important;
}*/
.translate .uk-dropdown-nav {
    font-size:.875rem;
}
	.translate .uk-dropdown-nav li {
		margin: 0;
	}
		#sitehead .translate .uk-nav>li>a {
			display: block;
			text-align: center;
			padding: 0.95em 0;
			justify-content: center;
			color: var(--cl-pageink);
		}
.translate .uk-active a {
	background-color: var(--cl-border);    
}
[class * =uk-animation-] {
    animation:.5s ease-out both;
}
.translate .uk-animation-fade {
    animation-name: uk-fade;
    animation-duration: 2s;
    animation-timing-function:linear;
}
@keyframes uk-fade {
    0% {
        opacity:0;
    }

    100% {
        opacity:1;
    }
}
@media only screen and (min-width:641px) {
	#sitefoot .translate {
		display: none;
	}
	#sitehead .translate .uk-dropdown-nav a:hover,
	#sitemenu .menus .trans-wh .uk-nav>li>a:hover,
	#sitefoot .menus .trans-wh .uk-nav>li>a:hover{
		color: #666666;
	}
}
@media only screen and (max-width:640px) {
	.translate .uk-dropdown.uk-drop.uk-open {
		padding: 19px;
	}
	#sitehead .translate {
		display: none;
	}
}

/*Sitehead*/
#sitehead .translate .uk-dropdown.uk-drop.uk-open {
    top: 44px!important;
	transform: translate(-50%, 0);
}

/*Sitemenu + Sitefoot*/
#sitemenu .translate {
    margin-top: 60px;
}
#sitefoot .translate .uk-drop-parent-icon::after {
	right: 0;
}
#sitemenu .translate .uk-dropdown.uk-drop.uk-open,
#sitefoot .translate .uk-dropdown.uk-drop.uk-open {
    top: 0!important;
    transform: translate(-50%, -100%);
}
#sitemenu .menus .trans-wh .uk-nav>li>a,
#sitefoot .menus .trans-wh .uk-nav>li>a {
	color: var(--cl-pageink);
}
#sitefoot .translate .uk-subnav > * > :first-child {
    border-bottom: solid #fff 1px;
}
@media only screen and (max-width:640px) {
	.translate.trans-wh.uk-dropnav,
	.trans-wh .uk-subnav,
	.trans-wh .uk-subnav > *,
	.trans-wh .m-sub.flexbox a,
	.translate.trans-wh .uk-drop-parent-icon {
		width: 100%;
	}
	#sitemenu .translate {
		padding: 0 var(--share-smp-padding);    
	}
	#sitefoot .translate {
		margin-top: 54px;
	}
	#sitefoot .translate .uk-dropdown.uk-drop.uk-open {
		max-width: 100%!important;
		width: 100%;
	}
}
@media only screen and (min-width: 1000px){
	#sitemenu .translate .uk-dropdown.uk-drop.uk-open {
		top: -1em!important;
	}
}
@media only screen and (max-width: 999px){
    #sitemenu .menus-wrap {
		position: relative;		
    }
    #sitemenu .translate {
        position: fixed;
        bottom: 0;
        left: 0;
        padding: 0 135px;
        width: 100%;
        background-color: var(--cl-add-bg);
        margin-top: 0;    
    }
		#sitemenu .translate::after {
			position: absolute;
			content: "";
			display: inline-block;
			width: 100%;
			height: 50px;
			top: 0;
			left: 0;
			transform: translate(0,-100%);
			background: linear-gradient(0deg, var(--cl-add-bg) 0%, rgba(35, 45, 37, 0) 100%);    
		}
    #sitemenu .translate .uk-subnav {
        position: relative;
        width: 100%;    
    }    
		#sitemenu .translate .uk-subnav > * > :first-child {
			padding: 2em 0;
			width: 100%;
		}
		#sitemenu .translate .uk-subnav > * {
			width: 100%;
		}
    #sitemenu .translate .uk-drop-parent-icon {
        width: 100%;
    }
		#sitemenu .translate .uk-icon.uk-drop-parent-icon::after {
			right: 0;
		}
    #sitemenu .translate .uk-dropdown.uk-drop.uk-open {
        max-width: 100%!important;
        width: 100%;
        top: 0!important;
    }
}
@media only screen and (max-width: 640px){
    #sitemenu .translate {
        padding: 0 var(--share-smp-padding);   
    }
}