/*@import url(https://fonts.googleapis.com/css?family=Quicksand:300,400);*/
/*@import url('https://use.fontawesome.com/releases/v5.6.1/css/all.css');*/
/* menu bar*/
.noscroll {
	overflow-y: auto;
}
nav {
	display: flex;
	align-items: flex-end;
	z-index: 6;
	background-color: #9fba8a;
	border-bottom: 3px solid #849e71;

	
	width: 100%;
	position: relative;
	height: 30px;
}
.notsticky{

 
}

.load_header{
    height: 100px;
    position: relative;
    overflow: hidden;
}
.menuwrap {
content-visibility: visible;
	display: none;
	position: absolute;

	top: 30px;
	font-family: 'Sawarabi Gothic', sans-serif;
	z-index: 99;
}
.searchwrap,.oitemshwrap,.viewwrap {

	display: none;
	position: absolute;
	/*font-size: 100%;*/
	top: 30px;
	font-family: 'Sawarabi Gothic', sans-serif;
	;
	z-index: 99;
}
.menuflex {
	display: flex;
	flex-wrap:wrap;
	width: 400px;
	padding: 3px;
	justify-content: space-around;
	background-color: #f6faff;
	border-radius: 0 0 3px 3px;
	border-top: 3px solid #9fba8a;
	border: 1px solid rgba(0, 28, 51, 0.356);
	box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}
.searchflex {
	display: flex;
	width: 250px;
	padding: 3px;
	flex-direction:column;
	justify-content: space-around;
	background-color: #f6faff;
	border-radius: 0 0 3px 3px;
	border-top: 3px solid #9fba8a;
	border: 1px solid rgba(0, 28, 51, 0.356);
	box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}
.otheriflex {
	display: flex;
	flex-wrap:wrap;
	width: 200px;
	padding: 3px;
	justify-content: space-around;
	background-color: #f6faff;
	border-radius: 0 0 3px 3px;
	border-top: 3px solid #9fba8a;
	border: 1px solid rgba(0, 28, 51, 0.356);
	box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}
.viewflex
 {
	display: flex;
	flex-wrap:wrap;
	width: 165px;
	padding: 3px;
	justify-content: space-around;
	background-color: #f6faff;
	border-radius: 0 0 3px 3px;
	border-top: 3px solid #9fba8a;
	border: 1px solid rgba(0, 28, 51, 0.356);
	box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}
.expl_wrap{
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	padding:2px;
	background-color: #f1f1f1;
	border: 1px solid rgba(73, 73, 73, 0.425);
	box-shadow: rgb(67 71 85 / 27%) 0px 0px 0.25em, rgb(90 125 188 / 5%) 0px 0.25em 1em;
	border-radius: 4px;
	margin: 5px 0 4px 0;
	cursor:default;
}
.error{
    padding:6px 8px;
	display:none;
	   justify-content:center;
    align-items:center;
	align-self:center;
	text-align:center;
    top: 40px;
    position: absolute;
    padding: 4px;
    background-color: #f1f1f1;
    color: #B22222;
    border: 1px solid rgba(73, 73, 73, 0.425);
    box-shadow: rgb(67 71 85 / 27%) 0px 0px 0.25em, rgb(90 125 188 / 5%) 0px 0.25em 1em;
    border-radius: 4px;
    margin: 5px auto 4px auto;
    width: 240px;
    min-height: 35px;
}

.showerror{
    display:flex!important;
    justify-content:center;
    align-items:center;
}
.shake {
  transform-origin: center center;
    animation: shake-base 200ms ease-in-out;
}


@keyframes shake-base {
  0% {
    transform: translate(0px, 0px) rotate(0deg);
  }
  2% {
    transform: translate(-2.5px, -2.5px) rotate(-1.5deg);
  }
  4% {
    transform: translate(1.5px, 0.5px) rotate(0.5deg);
  }
  6% {
    transform: translate(1.5px, -0.5px) rotate(0.5deg);
  }
  8% {
    transform: translate(-0.5px, 1.5px) rotate(-1.5deg);
  }
  10% {
    transform: translate(0.5px, 0.5px) rotate(0.5deg);
  }
  12% {
    transform: translate(1.5px, -2.5px) rotate(-0.5deg);
  }
  14% {
    transform: translate(1.5px, -0.5px) rotate(0.5deg);
  }
  16% {
    transform: translate(-1.5px, -2.5px) rotate(0.5deg);
  }
  18% {
    transform: translate(0.5px, -2.5px) rotate(-0.5deg);
  }
  20% {
    transform: translate(-2.5px, -2.5px) rotate(0.5deg);
  }
  22% {
    transform: translate(-0.5px, -1.5px) rotate(0.5deg);
  }
  24% {
    transform: translate(-1.5px, -2.5px) rotate(-1.5deg);
  }
  26% {
    transform: translate(-1.5px, 1.5px) rotate(-0.5deg);
  }
  28% {
    transform: translate(0.5px, 1.5px) rotate(-1.5deg);
  }
  30% {
    transform: translate(-0.5px, 1.5px) rotate(0.5deg);
  }
  32% {
    transform: translate(-1.5px, 0.5px) rotate(0.5deg);
  }
  34% {
    transform: translate(-2.5px, 1.5px) rotate(0.5deg);
  }
  36% {
    transform: translate(-0.5px, -2.5px) rotate(-0.5deg);
  }
  38% {
    transform: translate(0.5px, 1.5px) rotate(-0.5deg);
  }
  40% {
    transform: translate(1.5px, -1.5px) rotate(-0.5deg);
  }
  42% {
    transform: translate(-0.5px, 0.5px) rotate(-0.5deg);
  }
  44% {
    transform: translate(1.5px, 1.5px) rotate(0.5deg);
  }
  46% {
    transform: translate(0.5px, -1.5px) rotate(0.5deg);
  }
  48% {
    transform: translate(-1.5px, 0.5px) rotate(-1.5deg);
  }
  50% {
    transform: translate(-0.5px, -1.5px) rotate(-0.5deg);
  }
  52% {
    transform: translate(-0.5px, 1.5px) rotate(-0.5deg);
  }
  54% {
    transform: translate(-1.5px, 1.5px) rotate(0.5deg);
  }
  56% {
    transform: translate(-1.5px, -0.5px) rotate(-0.5deg);
  }
  58% {
    transform: translate(1.5px, 0.5px) rotate(-0.5deg);
  }
  60% {
    transform: translate(1.5px, 0.5px) rotate(-0.5deg);
  }
  62% {
    transform: translate(-1.5px, -1.5px) rotate(0.5deg);
  }
  64% {
    transform: translate(1.5px, 0.5px) rotate(-1.5deg);
  }
  66% {
    transform: translate(1.5px, -0.5px) rotate(0.5deg);
  }
  68% {
    transform: translate(0.5px, -2.5px) rotate(-1.5deg);
  }
  70% {
    transform: translate(0.5px, -2.5px) rotate(-1.5deg);
  }
  72% {
    transform: translate(1.5px, -1.5px) rotate(0.5deg);
  }
  74% {
    transform: translate(1.5px, -0.5px) rotate(0.5deg);
  }
  76% {
    transform: translate(1.5px, -1.5px) rotate(-0.5deg);
  }
  78% {
    transform: translate(1.5px, -1.5px) rotate(-1.5deg);
  }
  80% {
    transform: translate(-2.5px, -1.5px) rotate(-1.5deg);
  }
  82% {
    transform: translate(1.5px, -2.5px) rotate(-0.5deg);
  }
  84% {
    transform: translate(1.5px, -2.5px) rotate(-0.5deg);
  }
  86% {
    transform: translate(1.5px, 0.5px) rotate(0.5deg);
  }
  88% {
    transform: translate(-2.5px, 0.5px) rotate(-1.5deg);
  }
  90% {
    transform: translate(0.5px, 1.5px) rotate(0.5deg);
  }
  92% {
    transform: translate(-1.5px, 1.5px) rotate(0.5deg);
  }
  94% {
    transform: translate(-0.5px, 0.5px) rotate(-1.5deg);
  }
  96% {
    transform: translate(1.5px, -2.5px) rotate(0.5deg);
  }
  98% {
    transform: translate(-2.5px, -0.5px) rotate(-1.5deg);
  }
}


.expl_header{
	color: #007799;
	font-size:18px;
	font-weight:bold;
	font-family: 'Sawarabi Gothic', sans-serif;
	padding:6px;
	cursor:pointer;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.expl_header:hover{color:#D97441;}

.headerline{
	display:none;
}
.howtosearch,.showhowto{
	display:none;
	flex-direction:column;
	justify-content:center;
	align-items:center;
}

.expl,.searchdetails{
	font-family: 'Sawarabi Gothic', sans-serif;
	color: #007799;
	font-weight:bold;
	padding:6px 0 3px;
}
.extrainfo{
    display:flex;
    text-align:center;
	font-family: 'Sawarabi Gothic', sans-serif;
	color: #555;
	font-size:9px;
	font-weight:normal;
	font-style:italic;
padding:0 14px;
}
.expl2{
        justify-content: center;
    flex-direction: column;
    display: flex;
    align-items: center;
	font-family: 'Sawarabi Gothic', sans-serif;
	color:#555;
	padding:3px 0;
}
.explg{
	font-family: arial,helvetica,sans serif;
	color:#555;
	padding:3px 0;
	font-family: arial,helvetica,sans serif;
}
.line{
	display:block;
	width:180px;
	border-top:dotted 1px #555;
}
.example,.aboutsearch{
	justify-content:center;
	align-items:center;
	display:flex;
	flex-direction:column;
}
.aboutsearch{
    margin:6px;
    background-color: #f1f1f1;
	
	border: 1px solid rgba(73, 73, 73, 0.425);
	box-shadow: rgb(67 71 85 / 27%) 0px 0px 0.25em, rgb(90 125 188 / 5%) 0px 0.25em 1em;
	border-radius: 4px;
    padding:4px;
}
.searchdetails{
    display:flex;
    justify-content:center;
    align-items:center;
    width:200px;
    margin:6px;
    background-color: #f1f1f1;
		color: #007799;
	border: 1px solid rgba(73, 73, 73, 0.425);
	box-shadow: rgb(67 71 85 / 27%) 0px 0px 0.25em, rgb(90 125 188 / 5%) 0px 0.25em 1em;
	border-radius: 4px;
    padding:6px;
}
.searchdetails:hover{
    color:#D97441;
}
.navwrapper {
    justify-content: space-between;
    display: flex;
    margin: auto;
    padding: 0 !important;
    height: 30px !important;
    width: 100% !important;
  
}
.dropdownbox,.viewbox {
	width: 126px;
	display:flex;
	margin-left: 4%;
	height: 30px;
	cursor: pointer;
	background-color: #9fba8a;
	border-bottom: 3px solid #849e71;
}
.searchbox,.othersbox {
	margin-top: 0;
	display:flex;
	justify-content: flex-end;
	width: 120px;
	margin-right: 4%;
	height: 30px;
	text-align: end;
	cursor: pointer;
	background-color: #9fba8a;
	border-bottom: 3px solid #849e71;
}
.othersbox{
    width: 100px;
}
.viewbox{
    width: 120px; 
    margin-left:0;
}
.display{
display: flex;
flex-direction:column;
    justify-content: flex-start;
    width: 100%;
   box-shadow: rgb(60 64 67 / 30%) 0px 1px 2px 0px, rgb(60 64 67 / 15%) 0px 1px 3px 1px;
    border: 1px solid rgba(0, 28, 51, 0.356);
    background: #e6f1e0;
    padding: 8px;
    margin: 4px;
    color:black;
}
.distext {
      margin: 4px;
	display:flex;
	flex-direction:row;
	justify-content:center;
}
.disbox{
      margin: 4px;
display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    font-size: 14px;
}
.scoot{
    pointer-events:none!important;
    position: relative;
    right: -54px;
    opacity:0;
     width:0!important;
    font-size:0!important;
}
.searchbox:hover,.othersbox:hover,.dropdownbox:hover,.viewbox:hover {
	border-bottom: 3px solid #9fba8a;
	background-color: #849e71;
}
.dropdownbox.activenav {
	width: 408px;
	background-color: #849e71;
	color: #fff;
}
	.viewbox.activenav {
		min-width: 173px;
			background-color: #849e71;
	color: #fff;
	}
.searchbox.activenav{
	min-width: 259px;
	background-color: #849e71;
	color: #fff;
}
.othersbox.activenav {
	min-width: 209px;
	background-color: #849e71;
	color: #fff;
}
.dropdownbox span,.navtext2,.navtext3,.navtext4 {
	color: #f6faff;
	padding: 0px 4px 1px 4px;
	font-size: 1.4em;
	line-height: 1.4em;
	user-select: none;
	font-family: 'Sawarabi Gothic', sans-serif;
	font-weight: bold;
	-moz-user-select: none;
	/* Safari */
	-khtml-user-select: none;
}
.fas.fa-book,.fas.fa-search,.fas.fa-ellipsis-v,.fas.fa-list-ul,.fas.fa-times,.fas.fa-toggle-on,.fas.fa-toggle-off {
	color: #f6faff;
	padding: 5px 10px;
	font-size: 1.2em;
	line-height: 1.2em;
	user-select: none;
	-moz-user-select: none;
	/* Safari */
	-khtml-user-select: none;
}

.fa-list-ul {
	font-size: 1.5em!important;
	line-height: .9em!important;
}
.dropdownbox:hover .fas.fa-book,.dropdownbox:hover .fas.fa-book-open,.viewbox:hover .fas.fa-toggle-off,.viewbox:hover .fas.fa-toggle-on {
	color: #fff;
	margin-left: 10px;
}
.searchbox:hover .fas.fa-search,.othersbox:hover .fas.fa-ellipsis-v,.fas.fa-list-ul {
	color: #fff;
	margin-right: 10px;
}
.dropdownbox:hover span,.navtext2:hover,.dropdownbox span.open,.navtext2.open,.navtext3.open,.fas.fa-search.open {
	color: #fff;
}

.fas.fa-book-open {
	color: #fff;
	margin-left: 3px;
}
ul.menu,.ugmenu,ul.smenu,.omenu {
	list-style-type: none;
	margin: 3px auto;
	width: 100%;
	padding: 0;
	cursor: pointer;
	user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
}
.ugmenu{
    margin: 6px 4px;
}
.omenu {
    margin: 0 4px;
}
.ugmenu li,.smenu li{
    justify-content:center;
}

.userguideb a{
    margin:auto;
}
.leftmenu,.rightmenu {
	display: flex;
	flex-direction: column;
	width: 48%;
}
ul.menu li,.ugmenu li,.smenu li,.omenu li {
	display: flex;
	align-items: center;
	list-style-type: none;
	padding: 2px 8px;
	font-size: 15px;
	line-height: 1.4em;
	height: 30px;
	border-radius: 3px;
	color: #000;
	box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
	border: 1px solid rgba(0, 28, 51, 0.356);
	background: #e6f1e0;
}
.omenu li{
    margin:4px auto;
    justify-content:center;
}
ul.menu li a,.ugmenu li a,.sgmenu li a {
	color: #000;
}
ul.menu li:hover,.ugmenu li:hover,.sgmenu li:hover,.omenu li:hover {
	color: white;
	background-color: #849e71;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 2px;
}
ul.menu li:hover a,.ugmenu li:hover a,.sgmenu li:hover a,.omenu li:hover a {
	color: white;
}
.menu2 {
	padding: 5px;
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	min-width: 132px;
	max-width: 220px;
	height: auto;
	background-color: #f6faff;
	border: 1px solid rgba(0, 28, 51, 0.589);
	box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
	border-radius: 4px;
	display: none;
	z-index: 2;
}
ul.menu2 li {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	list-style-type: none;
	padding: 3px 3px;
	margin: 4px 3px;
	font-size: 1.25em;
	line-height: 1.4em;
	box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}
.numberspacer {
	display: flex;
	flex-wrap: wrap;
	width: 220px;
}
.numberspacer2 {
	display: flex;
	flex-wrap: wrap;
	width: 176px;
}
ul.menu2 li a {
	color: #000;
}
ul.menu2 li:hover {
	background-color: #849e71;
	box-shadow: rgba(60, 64, 67, 0.3) 0px .5px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 2px 1px;
}
ul.menu2 li:hover a {
	color: white;
}
.search {
	display: flex;
	justify-self: flex-end;
	height: 20px;
	width: 100%;
	position: relative;
	display: flex;
	margin: 3px 0 5px 0;
	border-radius: 4px;
	height: 20px;
	height: 30px;
	box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.438) 0px 1px 3px 1px;
}
.searchTerm {
	width: 100%;
	border: 2px solid #849e71;
	border-right: none;
	padding: 5px;
	height: 17px;
	border-radius: 4px 0 0 4px;
	outline: none;
	font-size: 12px;
	color: #839b90;
	text-align: left; 
	font-family: 'Noto Serif', serif;
	font-weight:bold;
}
input {
	font-size: 12px;
}
input,input::-webkit-input-placeholder {
	font-size: 10px;
}
input:focus::placeholder {
	color: transparent;
	text-align: left; 
}
.searchTerm:focus {
	color: #000000;
	text-align: left; 
}
.searchButton {
	width: 40px;
	height: 30px;
	border: 2px solid #849e71;
	background: #849e71;
	text-align: center;
	color: #f6faff;
	border-radius: 0 4px 4px 0;
	cursor: pointer;
	font-size: 20px;
}
.searchButton:hover {
	background: #b6cca6;
	color: #fff;
}
.closemenu {
	display: none;
}
.closemenufull,.closeview{
    display:none;
margin-left:auto;
}
.closesearch,.closeother{
    display:none;
margin-right:auto;
}
.set{
    display:flex;
    cursor:pointer;
}
@media only screen and (max-width: 767px) {
.load_header,.sidebar{
    height: 75px;
}
.topwrap{
    height:110px;
}
.viewflex {
    display: flex;
    flex-wrap: wrap;
    width: 180px;
    padding: 6px;
   
}
.scootmob{
    pointer-events:none!important;
    width:0!important;
    font-size:0!important;
    position: relative;
    right: -54px;
    opacity:0;
}
.viewbox.activenav {
    width: 195px;
}
		.disbox{
		display:flex;
		justify-content:flex-start;
		width:100%;
		text-align:left;
	
		margin:6px 0;
		font-size:14px;
		font-weight:bold;
	}
		.dropdownbox {
	    display:flex;
	    align-items:center;
		width: 60px;
		margin-left: 4%;
		color: rgb(32, 32, 31);
		cursor: pointer;
		border-radius: 4px 4px 0 0;
	}
	.searchbox,.othersbox,.viewbox {
		display: flex;
		justify-self: flex-end;
			   
	    align-items:center;
		width: 60px;
		margin-right: 4%;
		text-align: end;
		color: rgb(32, 32, 31);
		cursor: pointer;
		border-radius: 4px 4px 0 0;
	}
	.dropdownbox span,.navtext2,.navtext3,.navtext4 {
		padding: 0px 4px 0px 4px;
		font-size: 0em;
		line-height: 1.5em;
		user-select: none;
		font-weight: bold;
		-moz-user-select: none;
		/* Safari */
		-khtml-user-select: none;
	}

	.navtext2.on,.navtext.on,.navtext3.on,.navtext4.on {
		opacity: 1;
		font-size: 1.3em;
	}

	.searchbox.activenav {
		width: 258px;
	}

	.dropdownbox.activenav span {
		opacity: 1;
		font-size: 1.3em;
	}
	.fa-list-ul {
    font-size: 1.5em!important;
     line-height: 1em!important; 
}
	.searchbox.activenav span,.othersbox.activenav span {
		opacity: 1;
		font-size: 1.3em;
	}
		.expl,.expl2,.explg,.searchdetails{
		font-size: 1em!important;
	}
}

@media only screen and (max-width: 540px) {

	.noscroll {
		overflow-y: hidden;
	}
	.closemenufull{
	    display:none!important;
	}
	.closemenu {
		display: block;
		width: 100%;
		text-align: right;
		padding: 10px 30px;
	}
	.fas.fa-times {
		font-size: 2em;
		color: #5C6E58;
	}
	.fas.fa-times:hover {
		cursor: pointer;
		color: #D97441;
	}
	ul.menu li,ul.menu2 li {
		font-size: 1em;
		line-height: 1.8em;
		justify-content:center;
	}
	.menuwrap {
		left: 0;
		display: none;
		position: absolute;
		font-size: 100%;
		top: 30px;
		font-family: 'Quicksand', sans-serif;
		z-index: 99;
		width: 100%;
		height: 88vh;
		background-color: #f6faff;
	}
	.menuflex {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		width: 100%;
		padding: 0px;
		max-height: calc(100% - 133px);
		overflow-y: auto;
		background-color: #f6faff;
		border-radius: 0 0 3px 3px;
		border-top: 3px solid #9fba8a;
		border: 1px solid rgba(0, 28, 51, 0.356);
		box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
		/*FireFox*/
		scrollbar-width: none;
		/*IE10+*/
		-ms-overflow-style: -ms-autohiding-scrollbar;
	}
	.menuflex::-webkit-scrollbar {
		/*Chrome, Safari, Edge*/
		display: none;
	}
	.leftmenu,.rightmenu {
		display: flex;
		flex-direction: column;
		width: 98%;
	}
	.dropdownbox span,.searchbox span {
		font-size: 0;
	}

}