/* here you can put your own css to customize and override the theme */

/* メダル */

.medal p {
	position: absolute;
	font-size: 16px !important;
	font-weight: bold;
	z-index: 700;
	width: 52px;
	height: 52px;
	top: 15px;
}

.medal.gold p {
	color: #7C6D07;
}

.medal.silver p {
	color: #7A7A7A;
}

.medal.bronze p {
	color: #A47622;
}

.medal.perticipation p {
	color: #426DC4;
}

.medal-caption {
	position: absolute;
	font-size: 16px !important;
	font-weight: bold;
	z-index: 700;
	width: 72px;
	top: 60px !important;
}

.medal {
	text-align: center;
	content: "";
	width: 52px;
	height: 52px;
	margin-bottom: 50px;
	display: inline-block;
	position: relative;
	margin-top: 10px;
	margin-left: 5px;
	border-radius: 50px;
	z-index: 500;
	box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, .1);
}

.medal:after {
	content: "";
	width: 42px;
	height: 42px;
	display: block;
	top: 4px;
	left: 4px;
	position: absolute;
	border-radius: 50px;
	z-index: 600;
}

.medal:before {
	content: "";
	width: 50px;
	height: 50px;
	display: block;
	position: absolute;
	border-radius: 50px;
	z-index: 500;
}

.gold {
	background: linear-gradient(45deg, rgba(242, 215, 12, 1) 0%, rgba(255, 255, 255, 1) 56%, rgba(252, 235, 0, 1) 96%);
}

.gold:before {
	background: linear-gradient(45deg, rgba(242, 215, 12, 1) 0%, rgba(255, 255, 255, 1) 56%, rgba(252, 235, 0, 1) 96%);
	border: 1px solid rgba(242, 215, 12, 1);
}

.gold:after {
	background: linear-gradient(45deg, rgba(242, 215, 12, 1) 0%, rgba(255, 255, 255, 1) 56%, rgba(252, 235, 0, 1) 96%);
	border-top: 1px solid rgba(255, 255, 255, 0.3);
	border-left: 1px solid rgba(255, 255, 255, 0.3);
	border-bottom: 1px solid rgba(242, 215, 12, 0.3);
	border-right: 1px solid rgba(242, 215, 12, 0.3);
	box-shadow: inset 0px 0px 2px 2px rgba(150, 150, 150, .05);
}
.silver {
	background: linear-gradient(45deg, rgba(160, 160, 160, 1) 0%, rgba(232, 232, 232, 1) 56%);
}

.silver:before {
	background: linear-gradient(45deg, rgba(181, 181, 181, 1) 0%, rgba(252, 252, 252, 1) 56%, rgba(232, 232, 232, 1) 96%);
	border: 1px solid rgba(181, 181, 181, 1);
}

.silver:after {
	background: linear-gradient(45deg, rgba(181, 181, 181, 1) 0%, rgba(252, 252, 252, 1) 56%, rgba(232, 232, 232, 1) 96%);
	border-top: 1px solid rgba(255, 255, 255, 0.3);
	border-left: 1px solid rgba(255, 255, 255, 0.3);
	border-bottom: 1px solid rgba(160, 160, 160, 0.3);
	border-right: 1px solid rgba(160, 160, 160, 0.5);
	box-shadow: inset 0px 0px 2px 2px rgba(150, 150, 150, .05);
}
.bronze {
	background: linear-gradient(45deg, rgba(223, 182, 103, 1) 0%, rgba(249, 243, 232, 1) 56%, rgba(231, 192, 116, 1) 96%);
}

.bronze:before {
	background: linear-gradient(135deg, #d19c35 0%, #f7e6c5 50%, #e8b558 100%);
	border: 1px solid #e6b86a;
}

.bronze:after {
	background: linear-gradient(45deg, rgba(223, 182, 103, 1) 0%, rgba(249, 243, 232, 1) 56%, rgba(231, 192, 116, 1) 96%);
	border-top: 1px solid rgba(255, 255, 255, 0.3);
	border-left: 1px solid rgba(255, 255, 255, 0.3);
	border-bottom: 1px solid rgba(209, 156, 53, 0.3);
	border-right: 1px solid rgba(209, 156, 53, 0.5);
	box-shadow: inset 0px 0px 2px 2px rgba(153, 106, 26, .05);
}

.perticipation {
	/*background: linear-gradient(45deg, #E0EBF9 0%, rgba(249, 243, 232, 1) 56%, #E0EBF9 96%);*/
	background: #E0EBF9;
}

.perticipation:before {
	/*background: linear-gradient(135deg, #B6CFF1 0%, #f7e6c5 50%, #B6CFF1 100%);*/
	background: #E0EBF9;
	border: 1px solid #A0C1ED;
}

.perticipation:after {
	/*background: linear-gradient(45deg, #A0C1ED 0%, rgba(249, 243, 232, 1) 56%, #A0C1ED 96%);*/
	background: #E0EBF9;
	border-top: 1px solid rgba(255, 255, 255, 0.3);
	border-left: 1px solid rgba(255, 255, 255, 0.3);
	border-bottom: 1px solid rgba(117, 166, 228, 0.3);
	border-right: 1px solid rgba(160, 193, 237, 0.5);
	box-shadow: inset 0px 0px 2px 2px rgba(153, 106, 26, .05);
}

.page-header.navbar .page-logo .logo-default {
	margin: 12px 0 0 !important;
}

/* quick fix for the first review */

/*.page-header.navbar {
	height: 60px;
	min-height: 60px;
}*/

.disabled-menu {
	border: 0px solid transparent !important;
	color: #ccc !important;
	background-color: transparent !important;
	cursor: default !important;
}

.page-header.navbar .top-menu .navbar-nav>li.dropdown-extended .dropdown-menu {
    max-width: 400px;
    width: 400px;
}

.page-sidebar .page-sidebar-menu>li.active.open>a, .page-sidebar .page-sidebar-menu>li.active>a, .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu>li.active.open>a, .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu>li.active>a {
    background: #5C9BD1;
    border-top-color: transparent;
    color: #fff;
}
.page-sidebar .page-sidebar-menu>li.active.open>a:hover, .page-sidebar .page-sidebar-menu>li.active>a:hover, .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu>li.active.open>a:hover, .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu>li.active>a:hover {
    background: #5C9BD1;
}

/*td a {
    padding-left: 0 !important;
    padding-right: 0 !important;
}*/

.text-info {
	color: #3598dc !important;
}
.text-success {
	color: #1ba39c !important;
}
.text-warning {
	color: #f3c200 !important;
}
.text-danger {
	color: #f2784b !important;
}

.jstree-default .jstree-clicked {
  border: 0;
  background-color: #AFE0ED;
  box-shadow: none; 
  }

.alert-success {
	color: #3c763d;
	background-color: #DFF0D8;
}
.alert-info {
	color: #31708f;
	background-color: #D9EDF7;
}
.alert-warning {
	color: #8a6d3b;
	background-color: #FCF8E3;
}
.alert-danger {
	color: #a94442;
	background-color: #F2DEDE;
}



button {
	font-weight: normal !important;
	font-size: normal !important;
}

a {
	font-weight: normal !important;
}

td button {
	padding-left: 10px !important;
	padding-right: 10px !important;
}

/* td a {
	padding-left: 10px !important;
	padding-right: 10px !important;
} */

.bg-color-yellow-sticker{
	background-color: #FCF8E3;
}

.label-ja {
	font-size: 12px !important;
	font-weight: normal !important;
}


/* md label */
.form-group.form-md-line-input.form-md-floating-label .form-control~label {
	font-size: 14px;
}

/* step */
.mt-step-title {
    font-size: 16px !important;
}

/* chart */
.chart-wrapper {
	/*width: 100%;
	height: 100%;*/
	padding-top: 20px;
	padding-bottom: 20px;
}

/* userbox dropdown */

.page-header.navbar .top-menu .navbar-nav>li.dropdown-user>.dropdown-menu {
	width: auto;
	padding: 5px;
}


/* record */

.star {
	font-size: 18pt;
	color: #E87E04;
}


/*.color-box {
	display: inline-block;
	border: 1px solid #eee;
	width: 60px;
    height: 100px;
	margin: 0 0 20px 0;
}

.color-box .color-view {
	padding: 10px 10px;
	text-align: center;
	font-size: 24px;
}

.color-box .color-info {
	border-top: 1px solid #eee;
	padding: 10px 10px;
	text-align: center;
}*/

.color-box {
	display: inline-block;
	margin: 0 0 20px 0;
}

.color-box .color-view {
	width: 50px;
	height: 50px;
	padding: 10px 10px;
	padding-top: 12px;
	text-align: center;
	vertical-align: middle;
	font-size: 18px;
	border-radius: 50%;
	border-style: none;
	position: relative;
}

.color-box .color-info {
	width: 50px;
	height: 25px;
	padding: 10px 10px;
	text-align: center;
	background-color: transparent !important;
}

.timeline-view {
	width: 80px;
	height: 80px;
	text-align: center;
	vertical-align: middle !important;
	font-size: 24px;
	-webkit-border-radius: 50% !important;
	-moz-border-radius: 50% !important;
	border-radius: 50%;
	border-style: none;
	position: absolute;
	padding-top: 22px;
}


/*.timeline .timeline-body {
	background-color: #E9EDEF;
}

.timeline .timeline-body-arrow {
	border-color: transparent #E9EDEF transparent transparent;
}*/


/*.timeline .timeline-badge-version {
    width: 80px;
    border: 4px #f5f6fa solid;
    -webkit-border-radius: 50% !important;
    -moz-border-radius: 50% !important;
    border-radius: 50% !important; }
  .timeline .timeline-badge-version div {
    -webkit-border-radius: 50% !important;
    -moz-border-radius: 50% !important;
    border-radius: 50% !important;
    vertical-align: middle !important; 
}*/

.btn-toggle {
	width: 80px;
	font-weight: normal !important;
}


/* portlet */

.portlet.light>.portlet-title>.caption>.caption-subject {
	font-size: 20px;
	font-weight: normal;
}

.profile-userpic img {
	float: none;
	margin: 0 auto;
	width: 50%;
	height: 50%;
	-webkit-border-radius: 50% !important;
	-moz-border-radius: 50% !important;
	border-radius: 50% !important;
}

span.text-supplement {
	font-size: 9pt !important;
	color: #95a5a6;
}

.page-subtitle {
	font-size: 10pt !important;
	margin-left: 10px !important;
}

.referral-code {
	font-family: 'Cousine', monospace;
	font-weight: 700;
}
.common-code {
	font-family: 'Cousine', monospace;
	font-size: 1.6rem;
}


/* modal */

.modal-block {
	background: transparent;
	padding: 0;
	text-align: left;
	max-width: 600px;
	margin: 40px auto;
	position: relative;
}

.modal-block.modal-block-xs {
	max-width: 200px;
}

.modal-block.modal-block-sm {
	max-width: 400px;
}

.modal-block.modal-block-md {
	max-width: 600px;
}

.modal-block.modal-block-lg {
	max-width: 900px;
}

.modal-block.modal-block-full {
	max-width: 98%;
}

.modal-block.modal-header-color .panel-heading h2 {
	color: #FFF;
}

.modal-block.modal-full-color {
	color: #FFF;
}

.modal-block.modal-full-color .panel-heading {
	border: 0;
}

.modal-block.modal-full-color .panel-heading h2 {
	color: #FFF;
}

.modal-block.modal-full-color .panel-footer {
	border: 0;
}

.modal-block.modal-full-color .panel-body {
	background-color: transparent;
}

.modal-block.modal-full-color .fa {
	color: #FFF !important;
}


/* Modal Wrapper */

.modal-wrapper {
	position: relative;
	padding: 25px 0;
}


/* Modal Icon */

.modal-icon {
	float: left;
	width: 20%;
	text-align: center;
}

.modal-icon .fa {
	font-size: 52px;
	position: relative;
	top: -10px;
	color: #CCC;
}

.modal-icon.center {
	float: none;
	width: auto;
	padding-top: 20px;
}

.modal-icon.center+ .modal-text {
	float: none;
	width: auto;
}

.modal-icon+ .modal-text {
	float: left;
	width: 80%;
}


/* Modal Text */

.modal-text {
	padding: 0 5px;
}

.modal-text h1,
.modal-text h2,
.modal-text h3,
.modal-text h4,
.modal-text h5,
.modal-text h6 {
	padding: 0;
	margin: -7px 0 4px 0;
}

.modal-block-primary .fa {
	color: #CCC;
}

.modal-block-primary.modal-header-color .panel-heading {
	background-color: #CCC;
}

.modal-block-primary.modal-full-color .panel {
	background-color: #e0e0e0;
}

.modal-block-primary.modal-full-color .panel-heading {
	background-color: #CCC;
}

.modal-block-primary.modal-full-color .panel-footer {
	background-color: #e0e0e0;
}

.modal-block-success .fa {
	color: #47a447;
}

.modal-block-success.modal-header-color .panel-heading {
	background-color: #47a447;
}

.modal-block-success.modal-full-color .panel {
	background-color: #5cb85c;
}

.modal-block-success.modal-full-color .panel-heading {
	background-color: #47a447;
}

.modal-block-success.modal-full-color .panel-footer {
	background-color: #5cb85c;
}

.modal-block-warning .fa {
	color: #ed9c28;
}

.modal-block-warning.modal-header-color .panel-heading {
	background-color: #ed9c28;
}

.modal-block-warning.modal-full-color .panel {
	background-color: #f0ad4e;
}

.modal-block-warning.modal-full-color .panel-heading {
	background-color: #ed9c28;
}

.modal-block-warning.modal-full-color .panel-footer {
	background-color: #f0ad4e;
}

.modal-block-danger .fa {
	color: #d2322d;
}

.modal-block-danger.modal-header-color .panel-heading {
	background-color: #d2322d;
}

.modal-block-danger.modal-full-color .panel {
	background-color: #d9534f;
}

.modal-block-danger.modal-full-color .panel-heading {
	background-color: #d2322d;
}

.modal-block-danger.modal-full-color .panel-footer {
	background-color: #d9534f;
}

.modal-block-info .fa {
	color: #5bc0de;
}

.modal-block-info.modal-header-color .panel-heading {
	background-color: #5bc0de;
}

.modal-block-info.modal-full-color .panel {
	background-color: #7dcde5;
}

.modal-block-info.modal-full-color .panel-heading {
	background-color: #5bc0de;
}

.modal-block-info.modal-full-color .panel-footer {
	background-color: #7dcde5;
}

.modal-block-dark .fa {
	color: #171717;
}

.modal-block-dark.modal-header-color .panel-heading {
	background-color: #171717;
}

.modal-block-dark.modal-full-color .panel {
	background-color: #2b2b2b;
}

.modal-block-dark.modal-full-color .panel-heading {
	background-color: #171717;
}

.modal-block-dark.modal-full-color .panel-footer {
	background-color: #2b2b2b;
}

html.dark .modal-content {
	background-color: #1d2127;
}

html.dark .modal-header,
html.dark .modal-footer {
	border-color: #282d36;
}

.mfp-bg {
	z-index: 9996;
}

.mfp-wrap {
	z-index: 9997;
}


/* Close */

.mfp-close,
.mfp-close-btn-in .mfp-close {
	font-family: "Open Sans", Arial, sans-serif;
	font-weight: 600;
	font-size: 22px;
	color: #838383;
}


/* No Margins */

.mfp-no-margins img.mfp-img {
	padding: 0;
}

.mfp-no-margins .mfp-figure:after {
	top: 0;
	bottom: 0;
}

.mfp-no-margins .mfp-container {
	padding: 0;
}


/* Zoom */

.mfp-with-zoom .mfp-container,
.mfp-with-zoom.mfp-bg {
	opacity: 0.001;
	-webkit-backface-visibility: hidden;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}

.mfp-with-zoom.mfp-ready .mfp-container {
	opacity: 1;
}

.mfp-with-zoom.mfp-ready.mfp-bg {
	opacity: 0.8;
}

.mfp-with-zoom.mfp-removing .mfp-container,
.mfp-with-zoom.mfp-removing.mfp-bg {
	opacity: 0;
}


/* Animnate */

.my-mfp-zoom-in .zoom-anim-dialog {
	opacity: 0;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	-ms-transform: scale(0.8);
	-o-transform: scale(0.8);
	transform: scale(0.8);
}

.my-mfp-zoom-in.mfp-ready .zoom-anim-dialog {
	opacity: 1;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
}

.my-mfp-zoom-in.mfp-removing .zoom-anim-dialog {
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	-ms-transform: scale(0.8);
	-o-transform: scale(0.8);
	transform: scale(0.8);
	opacity: 0;
}

.my-mfp-zoom-in.mfp-bg {
	opacity: 0.001;
	/* Chrome opacity transition bug */
	-webkit-transition: opacity 0.3s ease-out;
	-moz-transition: opacity 0.3s ease-out;
	-o-transition: opacity 0.3s ease-out;
	transition: opacity 0.3s ease-out;
}

.my-mfp-zoom-in.mfp-ready.mfp-bg {
	opacity: 0.8;
}

.my-mfp-zoom-in.mfp-removing.mfp-bg {
	opacity: 0;
}

.my-mfp-slide-bottom .zoom-anim-dialog {
	opacity: 0;
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
	-webkit-transform: translateY(-20px) perspective(600px) rotateX(10deg);
	-moz-transform: translateY(-20px) perspective(600px) rotateX(10deg);
	-ms-transform: translateY(-20px) perspective(600px) rotateX(10deg);
	-o-transform: translateY(-20px) perspective(600px) rotateX(10deg);
	transform: translateY(-20px) perspective(600px) rotateX(10deg);
}

.my-mfp-slide-bottom.mfp-ready .zoom-anim-dialog {
	opacity: 1;
	-webkit-transform: translateY(0) perspective(600px) rotateX(0);
	-moz-transform: translateY(0) perspective(600px) rotateX(0);
	-ms-transform: translateY(0) perspective(600px) rotateX(0);
	-o-transform: translateY(0) perspective(600px) rotateX(0);
	transform: translateY(0) perspective(600px) rotateX(0);
}

.my-mfp-slide-bottom.mfp-removing .zoom-anim-dialog {
	opacity: 0;
	-webkit-transform: translateY(-10px) perspective(600px) rotateX(10deg);
	-moz-transform: translateY(-10px) perspective(600px) rotateX(10deg);
	-ms-transform: translateY(-10px) perspective(600px) rotateX(10deg);
	-o-transform: translateY(-10px) perspective(600px) rotateX(10deg);
	transform: translateY(-10px) perspective(600px) rotateX(10deg);
}

.my-mfp-slide-bottom.mfp-bg {
	opacity: 0.01;
	-webkit-transition: opacity 0.3s ease-out;
	-moz-transition: opacity 0.3s ease-out;
	-o-transition: opacity 0.3s ease-out;
	transition: opacity 0.3s ease-out;
}

.my-mfp-slide-bottom.mfp-ready.mfp-bg {
	opacity: 0.8;
}

.my-mfp-slide-bottom.mfp-removing.mfp-bg {
	opacity: 0;
}
.btn.disabled,
.btn[disabled] {
	opacity: .30 !important;
}

/* .alert-dev {
	color: #525e64;
	background-color: #fafafa;
}

.label-dev {
	font-size: 11px !important;
	color: #fff;
	background-color: #EF4836;
}
 */

.alert.alert-noborder {
	background-color: transparent !important;
	border-color: transparent !important;
	box-shadow: 0 0 !important;
	padding: 0 !important;
}

.alert .icon {
	margin-right: 10px;
	font-size: 14px;
	float: left;
}

.alert .text {
	font-size: 12px !important;
	margin-right: 15px;
	overflow: hidden;
}
.alert.alert-noborder .text {
	margin-right: 0;
}

.alert .dev-label {
	font-size: 11px !important;
	font-weight: normal !important;
	margin-right: 5px;
	float: left;
}

.alert .dev-text {
	font-size: 12px !important;
	overflow: hidden;
}

.alert-dev {
	color: #525e64;
	background-color: #fafafa;
}

.label-dev {
	color: #fff;
	background-color: #EF4836;
}

/* Icon with Text  */
.cell-img {
	width: 22px; 
	border-radius: 50%; 
	float: left;
}
.cell-web-icon {
	font-size: 22px;
	float: left; 
}
.cell-text {
	padding-left: 3px;
	overflow: hidden;
}

.link > a{
	margin-right: 10px;
}

/* フッター */

.page-footer {
    padding: 12px 25px !important;
    text-align: left;
    height: auto;
    vertical-align: middle;
    background-color: rgba(45, 95, 139, 0.85) !important;
}

.page-footer .page-footer-inner {
    float: none;
    display: inline-block;
}

.page-footer-link {
    float: right;
}

.page-footer a {
    color: #fafafa;
    margin-right: 15px;
}

.page-footer a:last-child {
    margin-right: 0px;
}

@media screen and (min-width: 320px) and (max-width: 1200px) {
    .page-footer {
        text-align: center;
    }
    .page-footer-link {
        float: none;
    }
}