@font-face {
	font-family: 'Sf ui display regular';
	src:
		url('https://daks2k3a4ib2z.cloudfront.net/5732a8d19e90455517707b39/5732a8d19e90455517707b52_SF-UI-Display-Regular.otf')
		format('opentype');
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: 'Sf ui display thin';
	src:
		url('https://daks2k3a4ib2z.cloudfront.net/5732a8d19e90455517707b39/5732a8d19e90455517707b53_SF-UI-Display-Thin.otf')
		format('opentype');
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: 'Sf ui display black';
	src:
		url('https://daks2k3a4ib2z.cloudfront.net/5732a8d19e90455517707b39/5732a8d19e90455517707b50_SF-UI-Display-Black.otf')
		format('opentype');
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: 'Sf ui display bold';
	src:
		url('https://daks2k3a4ib2z.cloudfront.net/5732a8d19e90455517707b39/5732a8d19e90455517707b51_SF-UI-Display-Bold.otf')
		format('opentype');
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: 'Sf ui display heavy';
	src:
		url('https://daks2k3a4ib2z.cloudfront.net/5732a8d19e90455517707b39/5732a8d19e90455517707b54_SF-UI-Display-Heavy.otf')
		format('opentype');
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: 'Sf ui display light';
	src:
		url('https://daks2k3a4ib2z.cloudfront.net/5732a8d19e90455517707b39/5732a8d19e90455517707b55_SF-UI-Display-Light.otf')
		format('opentype');
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: 'Sf ui display medium';
	src:
		url('https://daks2k3a4ib2z.cloudfront.net/5732a8d19e90455517707b39/5732a8d19e90455517707b56_SF-UI-Display-Medium.otf')
		format('opentype');
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: 'Sf ui display semibold';
	src:
		url('https://daks2k3a4ib2z.cloudfront.net/5732a8d19e90455517707b39/5732a8d19e90455517707b57_SF-UI-Display-Semibold.otf')
		format('opentype');
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: 'Sf ui display';
	src:
		url('https://daks2k3a4ib2z.cloudfront.net/5732a8d19e90455517707b39/5732a8d19e90455517707b58_SF-UI-Display-Ultralight.otf')
		format('opentype');
	font-weight: 400;
	font-style: normal;
}

header {
	background-color: #ffffff;
}

body {
	font-family: 'Sf ui display regular';
	padding-top: 184px;
	background-color: #F2F2F2;
}

h3 {
	font-family: 'Sf ui display medium';
	font-size: 46px;
	line-height: 56px;
	padding-top: 82px;
	padding-bottom: 32px;
	color: #000000;
}

h4 {
	font-size: 24px;
	letter-spacing: -0.4px;
	color: #8f8e94;
}

h5 {
	font-family: 'Sf ui display medium';
	font-size: 18px;
	letter-spacing: -0.3px;
	line-height: 24px;
	color: #8f8e94;
}

h6 {
	font-size: 14px;
	letter-spacing: -0.3px;
	line-height: 21px;
	color: #8f8e94;
}

.btn:focus {
	outline:0;
	!important;
}

.navbar-default {
	margin-bottom: 0;
	min-height: 44px;
	width: 100%;
	padding-left: 0px;
	padding-right: 0px;
	max-width: 1024px;
}

.navbar-inverse {
	position: fixed;
	z-index: 4;
	width: 100%;
	top: 90px;
	border: none;
	background: #0075be;
}

.navbar-collapse {
	width: 100%;
	max-width:1024px;
	margin: 0 auto;
	padding-left: 0px;
	padding-right: 0px;
}

@media ( max-width : 768px) {
	body {
		padding-top: 44px;
	}
	.navbar-brand {
		max-width: 86px;
		padding: 5px 0;
		height: 44px;
	}
	.navbar-default {
		border-bottom: 1px rgba(0, 0, 0, 0.15) solid;
		padding-left: 8px;
		padding-right: 8px;
	}
	.navbar-default .navbar-toggle {
		margin: 5px 20px 5px 0;
	}
	h3 {
		font-size: 32px;
		line-height: 38px;
		padding: 72px 24px 24px 24px;
		margin: 0;
	}
	h4 {
		font-size: 20px;
		padding: 0 24px;
		margin: 0;
	}
	h5 {
		line-height: 21px;
	}
}

@media ( min-width : 1024px) {
	div.hints {
		margin: 14px 16px;
	}
}

.navbar {
	margin-bottom: 0;
}

#graphs {
	background-color: #ffffff;
}

@media ( min-width : 768px) {
	body {
		padding-top: 154px;
	}
	.navbar-inverse .navbar-nav>li>a {
		font-size: 17px;
	}
	.navbar-nav>li>a {
		padding-top: 22px;
		padding-bottom: 22px;
	}
	.home {
		padding-top: 12px !important;
		padding-bottom: 12px !important;
	}
}

@media ( min-width : 768px) {
	.navbar-inverse .navbar-nav>li>a {
		font-size: 16px;
		white-space: pre-line;
		color: rgb(255, 255, 255);
	}
	.navbar-brand {
		height: 88px;
		max-width: 408px;
		padding: 27px 32px;
	}
}

#main-menu {
	margin: 0px 8px;
	padding: 0px;
}

.home img {
	padding: 12px 0 11px 0px;
}

div.hints {
	margin: 48px 16px;
}

div.hints p {
	font-size: 16px;
	color: rgb(143, 142, 148);
}

#main-menu #menu-download {
	cursor: pointer;
}

p.hints {
	font-size: 16px;
	color: rgb(143, 142, 148);
	margin: 32px 18px;
}

.section-head {
	position: relative;
	top: -82px;
	width: 100%;
	height: 1;
	background-color: #00ffffff;
}

hr {
	max-width: 1024px;
	margin: 0;
}
@media ( min-width : 1024px) {
	hr {
		margin: 0 auto;
	}
}

#footer_id {
	width: 100%;
	padding: 0;
	max-width: 1024px;
}

footer {
	color: #acb3bc;
	font-size: 12px;
	padding: 18px 0px 48px 0px;
	margin: auto 0;
}

footer .footer-links {
	display: inline-block;
	padding: 0;
	list-style: none;
	margin: 0 8px;
}

footer .footer-links>li {
	display: inline-block;
}

footer .footer-links>li:not(:first-child):before {
	content: "・";
	font-size: 12px;
	padding-left: 1px;
	padding-right: 4px;
	vertical-align: baseline;
	color: #acb3bc;
	font-weight: normal;
}

footer a {
	color: rgb(121, 121, 121);
}

@media ( max-width : 767px) {
	footer {
		padding: 0px 0px;
	}
	#footer_id {
		width: 100%;
		padding: 20px 0px;
	}
}

.main-content {
	padding: 15px;
	background-color: #ffffff;
}

.main-content:after {
	content: '';
	clear: both;
	display: block;
}

@media ( max-width : 768px) {
	.main-content {
		padding-left: 0;
		padding-right: 0;
	}
}

div .vertical-line {
	width: 1px;
	background-color: #c8c7cc;
	height: 100%;
	margin: 0px auto;
}

dt {
	font-size: 14px;
	color: #737373;
}

dd {
	font-size: 14px;
	color: #404040;
}

@media ( max-width : 768px) {
	dl {
		background-color: white;
	}
	.main-content {
		margin: 0 -15px;
	}
}

/***** Img Hover Link *****/
a.hoverImgLink {
	
}

a.hoverImgLink img {
	display: none;
}

a.hoverImgLink img:first-child {
	display: inline-block;
}

a.hoverImgLink:hover img {
	display: inline-block;
}

a.hoverImgLink:hover img:first-child {
	display: none;
}

.form-buttons {
	padding:0px 25px;
	margin-top:48px;
	margin-bottom:0;
}

.form-buttons .btn {
	font-size:18px;
	border-radius: 4px;
	padding: 18px;
}

@media (max-width: 768px) {
	.form-buttons .btn {
		padding: 10px;
	}
}
	
/* top bar language selector */
.language-selector {
	color: #797979;
	font-size: 14px;
	padding: 16px 0px 16px 16px;;
}

.language-selector h5 {
	margin: 4px 0 6px 0;
	color: #797979;
}

.language-selector ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.language-selector ul>li>a {
	color: #404040;
	font-family: 'Sf ui display medium';
}

.language-selector ul>li.active>a {
	color: #797979;
	font-family: 'Sf ui display regular';
}

.language-selector ul>li {
	display: inline-block;
	line-height: 20px;
}

.language-selector ul>li:not(:first-child):before {
	content: "|";
	font-size: 12px;
	padding-left: 6px;
	padding-right: 9px;
	vertical-align: baseline;
	color: #797979;
	font-weight: normal;
}

#footer_lang {
	-webkit-appearance: menulist-button;
	padding: 5px;
	border: none;
	font-size: 12px;
	background: transparent;
	color: rgb(121, 121, 121);
	border-radius: 0;
}

.nav-tabs {
	margin-bottom: 24px;
	overflow-x: auto;
	overflow-y: hidden;
	display: -webkit-box;
	display: -moz-box;
}

.nav-tabs>li {
	margin-bottom: 0px;
	float: none;
}

.nav-tabs>li>a {
	font-size: 18px;
	color: rgba(0, 0, 0, 0.54);
	padding: 27px;
}

.nav-tabs>li.active>a {
	color: rgb(64, 64, 64);
}

@media ( max-width : 767px) {
	.nav-tabs {
		background-color: white;
	}
	.nav-tabs>li>a {
		font-size: 15px;
		padding: 17px;
	}
}

button.accordion {
	background-color: white;
	cursor: pointer;
	padding: 40px 32px;
	width: 100%;
	border: none;
	outline: none;
	text-align: left;
	font-size: 32px;
	color: black;
	line-height: 30px;
	vertical-align: middle;
}

button.accordion:before {
	content: url(/img/default_btn_collapse_active.png);
	float: right;
	margin-left: 24px;
	-webkit-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out;
}

button.accordion.active:before {
	-webkit-transform: rotate(-180deg) translate(0px, 4px);
	transform: rotate(-180deg) translate(0px, 4px);
	-webkit-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) , only screen and (
		min--moz-device-pixel-ratio: 2) , only screen and (
		-o-min-device-pixel-ratio: 2/1) , only screen and (
		min-device-pixel-ratio: 2) , only screen and ( min-resolution: 192dpi)
		, only screen and ( min-resolution: 2dppx) {
	button.accordion:before {
		content: url(/img/default_btn_collapse_active_2x.png);
		-ms-transform: scale(0.5, 0.5) translate(0, -50%); /* IE 9 */
    	-webkit-transform: scale(0.5, 0.5) translate(0, -50%); /* Safari */
    	transform: scale(0.5, 0.5) translate(0, -50%);
	}
}

@media ( max-width : 768px) {
	button.accordion {
		font-size: 20px;
		padding: 24px 0px;
		line-height: 24px;
	}
	button.accordion:before {
		height:24px;
	}
	button.accordion.active:before {
		-webkit-transform:rotate(-180deg) translate(0px, -4px);
		transform: rotate(-180deg) translate(0px, -4px);
	}
	
	@media only screen and (-webkit-min-device-pixel-ratio: 2) , only screen and (
		min--moz-device-pixel-ratio: 2) , only screen and (
		-o-min-device-pixel-ratio: 2/1) , only screen and (
		min-device-pixel-ratio: 2) , only screen and ( min-resolution: 192dpi)
		, only screen and ( min-resolution: 2dppx) {
		
		button.accordion.active:before {
			-webkit-transform: scale(0.5, 0.5) rotate(-180deg) translate(0px, -50%);
			transform: scale(0.5, 0.5) rotate(-180deg) translate(0px, -50%);
		}
	}
}

/* Modal */
.modal-dialog {
	width:700px;
}

.modal-header {
	background-color:#f5f5f5;
	padding:0;
	border-bottom:none;
}
.modal-title {
	font-family: 'Sf ui display medium';
	font-size: 20px;
	line-height: 70px;
	padding: 0 26px;
	color:black;
}

.modal-body {
	padding: 0;
}

.modal-footer {
	padding: 28px 28px 44px 28px;
	border-top: rgba(0, 0, 0, 0.2) 1px solid;
}

.modal-footer >.row>img{
	width:100px;
	height:100px;
}

@media ( max-width : 768px) {
	.modal-dialog {
		width:auto;
		margin: 30px;
	}
}

.filter-form .form-control {
	margin-left: 10px;
	margin-right: 10px;
}

.qrcode-modal .modal-dialog {
	width:400px;
	height:576px;
	margin-top:88px;
}

.qrcode-modal .modal-header {
	background-color:#ffffff;
	padding:29px 29px 24px 29px;
	border-bottom:none;
}

.qrcode-modal #close-download-modal, #close-reg-modal {
	width:14px;
	height:14px;
	float:right;
	padding:0;
	border:none;
	background-color:transparent;
}

.qrcode-modal #close-download-modal>img, #close-reg-modal>img {
	vertical-align:top;
	width:14px;
	height:14px;
}

.qrcode-modal .modal-header>h4 {
	margin-top:24px;
	margin-bottom:0;
	text-align:center;
	color:#000000;
}

#qr-code-download {
	width:240px;
	height:240px;
	margin:0 auto;
	display: block;
}

#qr-code-reg {
	width:300px;
	height:300px;
	margin:0 auto;
	display: block;
}

.qrcode-modal .modal-footer {
	margin-top:24px;
	background-color:#fafafa;
	padding:36px 28px;
	border-top:none;
}

.qrcode-modal .modal-footer>div>img{
	width:50px;
	height:50px;
	float:left;
}

.qrcode-modal #download-group {
	margin-bottom:18px;
}

.qrcode-modal .donwload-detail {
	font-size:15px;
	text-align:left;
	margin-left:66px;
}

.qrcode-modal .setup-label {
	font-family: 'Sf ui display medium';
	color:#404040;
	margin:0;
}

.qrcode-modal .setup-detail-label {
	color:rgba(0, 0, 0, 0.54);
	margin:0;
}

/* Dropdown */
.top-menu {
	margin: 15px 0;
}

.top-menu>li>a {
	padding-top: 15px;
	padding-bottom: 15px;
	color: rgb(81, 81, 81);
	font-size: 16px;
}

.top-menu>li>a>img {
	padding-right: 8px;
}

.top-menu .dropdown-menu {
	padding: 0;
	min-width: 270px;
}

.top-menu .dropdown-menu>li>a {
	font-size: 16px;
	line-height: 58px;
	padding: 0 16px;
}

.top-menu .dropdown-menu>li>a>img {
	padding-right: 16px;
}

.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus {
	color:#797979;
}

#account-menu {
	font-family: 'Sf ui display medium';
	font-size: 18px;
	line-height: 18px;
	color: #515151;
}

/* jPanel navigation */
.jPMopened body { /*background-color:#000;*/
	
}

.jPanelMenu-panel {
	
}

.jPMopened .jPanelMenu-panel {
	opacity: 0.85;
}

#jPanelMenu-menu.navbar-nav {
	margin: 0;
}

#jPanelMenu-menu {
	background-color: #0075be;
}

#jPanelMenu-menu>li a {
	font-size: 16px;
	padding: 16px 24px;
	color: rgba(255, 255, 255, 0.85);
}

#jPanelMenu-menu>li a span.sub {
	color: rgba(255, 255, 255, 0.50);
	display: block;
	font-size: 14px;
}

#jPanelMenu-menu>.active>a {
	color: rgb(255, 255, 255);
}

#jPanelMenu-menu>.divider {
	border-bottom: rgba(234, 233, 233, 0.50) 1px solid;
}

#jPanelMenu-menu>li>ul.sub-menu {
	padding: 0 0 0 0;
	margin: 0;
	list-style: none;
	background-color: rgba(0, 0, 0, 0.15);
	opacity: 0;
	max-height: 0;
}

#jPanelMenu-menu>li>ul.sub-menu.active {
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	max-height: 100vh;
	opacity: 1;
}

#jPanelMenu-menu>li>ul.sub-menu>li>a {
	padding: 0;
	margin: 0;
	list-style: none;
	padding: 16px 16px 16px 36px;
	display: block;
}

#main-menu>li>ul.sub-menu {
	display: none;
}

.error {
	color:#FF0000;
	font-size:16px;
}

.fa-spin {
	margin-left: -12px;
    margin-right: 8px;
}

#account-menu >.fa-angle-down {
	margin-left:4px;
}

.disabled {
    pointer-events: none;
    opacity: 0.6;
}

.form-control:disabled {
    pointer-events: none;
    opacity: 0.6;
    background-color:#eeeeee;
}

.control-select:disabled {
    pointer-events: none;
    opacity: 0.6;
    background-color:#eeeeee;
}

.btn-action {
	font-family: 'Sf ui display medium';
	font-size: 16px;
	line-height: 42px;
	color: #ec1c24;
	padding:0;
	border:none;
	background-color:transparent;
}

.inputfile {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}

.inputfile + label {
    font-size: 15px;
	color:black;
    background-color: #dfdfdf;
    display: inline-block;
    border-radius:4px;
    padding:12px 30px;
    cursor: hand;
	cursor: pointer;
	margin:0;
}

.inputfile + label + span {
    font-size: 14px;
	color:#404040;
    display: inline-block;
    padding:12px 16px;
}

.inputfile + label:hover {
    background-color: #f5f5f5;
}

.file-name-container {
	display : none;
}

.file-name {
	font-size:16px;
	color:#1b95e0;
	margin-bottom:18px;
	display : none;
}

.file-reset {
	font-size:16px;
	color:#404040;
	cursor: hand;
	cursor: pointer;
	position:relative;
	left:8px;
	bottom:59px;
	display: inline-block;
}

.logo-preview {
	width:100px;
	height:100px;
	border:1px solid #cdced2;
	margin-bottom:16px;
	background-image:none;
	background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    display: inline-block;
}

.banner-preview {
	width:375px;
	height:106px;
	border:1px solid #cdced2;
	margin-bottom:16px;
	background-image:none;
	background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    display: inline-block;
}