@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@300;400;500&;600family=Poppins:wght@300;400;500&display=swap');

h1, h2, h3, h4, h5, h6 { font-family: 'Prompt', sans-serif; }
body { font-family: 'Prompt', sans-serif; }
p { font-weight: 300; }
hr { border: 1px solid #ccc; }
hr.dashed { border: 1px dashed #fefefe; }
a {
	text-decoration: none;
}


.form-control,
.form-select {
	border-radius: 2rem;
	background-color: #fff;
	padding: 0.6rem 1rem;
}
.form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
	color: #ccc;
	opacity: 1; /* Firefox */
}
.form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
	color: #ccc;
}
.form-control::-ms-input-placeholder { /* Microsoft Edge */
	color: #ccc;
 }
 .form-group label {
 	color: #2C9958;
 	padding-bottom: 0.5rem;
 }
 .select2-container--default .select2-selection--single {
 	border-radius: 2rem;
 	height: 3rem;
 	border: 1px solid #ced4da;
 }
 .select2-container--default .select2-selection--single .select2-selection__rendered {
 	height: 3rem;
 	padding: 0.6rem 1rem;
 }
.choose-position .select2-container {
  width: 100% !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-color: transparent;
  background-size: contain;
  border: none !important;
  height: 0.8rem !important;
  width: 0.8rem !important;
  margin: auto !important;
  top: 60% !important;
  left: -0.5rem !important;
}

.form-control.error,
input.error,
select.error,
.select2.error .select2-selection--single,
textarea.error {
	border: 1px solid red !important;
}

.form-check-input:disabled,
.form-check-input:disabled~.form-check-label, .form-check-input[disabled]~.form-check-label {
	opacity: 1;
}



.font-pri-th { font-family: 'Prompt', sans-serif; }
.font-pri-en { font-family: 'Prompt', sans-serif; }
.font-sec-th { font-family: 'Prompt', sans-serif; }
.font-sec-en { font-family: 'Prompt', sans-serif; }
.cursor-pointer { cursor: pointer; }

.btn { border-radius: 2rem; }
.btn-primary {
	background-color: #2C9958 !important;
	border: 1px solid #2C9958 !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
	background-color: #2C9958 !important;
	border: 1px solid #2C9958 !important;
	color: #fff;
}
.btn-outline-primary {
	background-color: #fff !important;
	border: 1px solid #2C9958 !important;
	color: #2C9958;
}
.btn-secondary {
	background-color: #DDE1E6;
	border: 1px solid #DDE1E6 !important;
	color: #2C9958;
}
.btn-outline-secondary {
	background-color: #fff !important;
	border: 1px solid #ccc !important;
	color: #666;
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active {
	background-color: #fff !important;
	border: 1px solid #2C9958;
	color: #2C9958;
}
.btn-tertiary {
	background-color: #CAEDD4;
	border: 1px solid #2C9958 !important;
	color: #2C9958;
}
.btn-link {
	color: #2C9958 !important;
	text-decoration: none;
}

.btn-sm-block {
	width: 100%;
}
.btn.disabled {
	background-color: #C1C7CD !important;
	border: 1px solid #C1C7CD !important;
}


.text-primary { color: #278845 !important; }
.text-secondary { color: #D19800 !important; }
.text-light { color: #ccc !important; }
.hover-primary:hover,
.hover-primary:focus,
.hover-primary:active {
	color: #278845 !important;
}

.bg-primary { background-color: #005f3f !important; }

.badge {
	border-radius: 1rem;
	padding: 0.5rem 0.7rem;
}

.input-group .btn {
	z-index: 3;
}


.w-5 { width: 5% !important; }
.w-10 { width: 10% !important; }
.w-15 { width: 15% !important; }
.w-20 { width: 20% !important; }

.px-6 { padding-left: 6rem; padding-right: 6rem; }
.px-7 { padding-left: 7rem; padding-right: 7rem; }

.fw-500 { font-weight: 500; }
.fw-700 { font-weight: 700; }

.font-size-bigger {
	font-size: 1.2rem;
}


/*
 * ---------------------------------------/
 * Core
 * ---------------------------------------/
 */
body {
	background-image: url('../images/bg/bg.png');
	background-repeat: no-repeat;
  	background-size: cover;
  	background-position: top right;
}
.front main {
	padding: 1rem;
}
.modal-content {
	border-radius: 1rem;
}


/*
 * ---------------------------------------/
 * Navbar
 * ---------------------------------------/
 */
.navbar {
   border-bottom: 1px solid #ddd;
    z-index: 1;
}
.nav-item .nav-link {
	color: #666;
	font-weight: 500;
}
.nav-item.active .nav-link {
	color: #2C9958;
}
.nav-mobile {
	position: fixed;
	bottom: 0;
	width: 100%;
	z-index: 999;
	border-top: 1px solid #dedede;
}
.nav-mobile .col {
	padding: 0.5rem;
	text-align: center;
}
.nav-mobile a {
	color: #666;
}
.nav-mobile .col small {
	font-size: 0.75rem;
}


/*
 * ---------------------------------------/
 * Homepage
 * ---------------------------------------/
 */
tspan{ font-family: 'Prompt', sans-serif !important; }
/*g text tspan {
	font-size: 1rem !important;
}*/
.dxc-hole-template svg circle {
	fill: rgba(255,255,255);
}

.box-card {
	border: 1px solid #ddd;
	border-radius: 1rem;
	background-color: #fff;
	padding: 1rem;
	-webkit-box-shadow: 0px 0px 5px 0px rgba(204,204,204,0.5);
	-moz-box-shadow: 0px 0px 5px 0px rgba(204,204,204,0.5);
	box-shadow: 0px 0px 5px 0px rgba(204,204,204,0.5);
}
.score small {
	font-size: 0.7rem !important;
}
.score .credit {
	font-size: 1.8rem;
	padding: 0;
	margin: 0;
}
#chart_info .score .credit {
	font-size: 2rem;
	padding: 0;
	margin: 0;
}
.score .unit {
	font-size: 0.8rem;
	padding-bottom: 0.5rem;
	color: #666;
	padding-left:  0.5rem;
}
.event-card {
	border: 1px solid #ddd;
	border-radius: 1rem;
	background-color: #fff;
	-webkit-box-shadow: 0px 0px 5px 0px rgba(204,204,204,0.5);
	-moz-box-shadow: 0px 0px 5px 0px rgba(204,204,204,0.5);
	box-shadow: 0px 0px 5px 0px rgba(204,204,204,0.5);
	height: auto;
	margin-bottom: 1.5rem;
}
.event-card .header,
.event-detail .header {
 	padding: 0;
 	position: relative;
}
.event-card .header img {
	border-radius: 1rem 1rem 0 0;
	z-index: 0;
}
.event-card .header iframe {
	border-radius: 1rem 1rem 0 0;
	z-index: 0;
}
.event-card .body {
	padding: 1rem;
	color: #666;
}
.event-card .body a {
	color: #333 !important;
}
.event-card .body div {
	word-break: break-all;
}
.event-card .fav {
	position: absolute;
	right: 1rem;
	top:  1rem;
	z-index: 1;
}
.event-card i.fav-star {
  border-radius: 60px;
  box-shadow: 0px 0px 2px #888;
  padding: 0.35em 0.35em;
  font-size: 1.2rem;
  background-color: #fff;
}
.event-card .desc {
	position: absolute;
	left: 1.5rem;
	bottom:  1rem;
	z-index: 1;
}
.event-detail .fav,
.event-detail .edit {
	position: absolute;
	right: 1rem;
	top:  1rem;
	z-index: 1;
}
.event-detail i.fav-star,
.event-detail i.fa-pen {
  border-radius: 60px;
  box-shadow: 0px 0px 2px #888;
  padding: 0.35em 0.35em;
  font-size: 1.2rem;
  background-color: #fff;
}
.event-detail i.fa-pen {
	color: #333;
}
.event-detail .current-status {
	position: absolute;
	right: 0;
	bottom:  1rem;
	z-index: 1;
}
.event-detail .desc {
	position: absolute;
	left: 1.5rem;
	bottom:  1rem;
	z-index: 1;
}

.event-card .status {
	position: absolute;
	right: 0;
	top:  1rem;
	z-index: 1;
}
.text{
	font-size: 0.75rem;
	display:inline-block;
	padding:0.5em 1em;
	min-width:auto;
	line-height:1.2em;
	position:relative;
	color: #fff;
	font-weight: 700;
}
.ribbon {
	margin-bottom: 0;
}
.ribbon:before{
	content:'';
	position:absolute;
	border-style:solid;
}
.ribbon:before {
	left: -1.3rem;
	top: 0rem;
  	border-width: 0.9rem 0.7rem 0.7rem 0.7rem;
}
.box-cert .ribbon:before {
	left: -1.3rem;
	top: 0.05rem;
  	border-width: 0.9rem 0.7rem 0.7rem 0.7rem;
}
.event-detail .ribbon:before {
	left: -1.3rem;
	top: 0.05rem;
  	border-width: 0.8rem 0.7rem 0.8rem 0.7rem;
}
/*.status-wca .text {
	background: #4D5358;
}
.status-wca .ribbon:before {
	border-color: #4D5358 #4D5358 #4D5358 transparent;
}*/
.status-0 .text,
.status-slwa .text {
	background: #4D5358;
}
.status-0 .ribbon:before,
.status-slwa .ribbon:before {
	border-color: #4D5358 #4D5358 #4D5358 transparent;
}
.status-2 .text,
.status-slwr .text {
	background: #D49900;
}
.status-2 .ribbon:before,
.status-slwr .ribbon:before {
	border-color: #D49900 #D49900 #D49900 transparent;
}
.status-1 .text,
.status-sla .text {
	background: #198038;
}
.status-1 .ribbon:before,
.status-sla .ribbon:before {
	border-color: #198038 #198038 #198038 transparent;
}
.status-3 .text,
.status-slr .text {
	background: #DA1E28;
}
.status-3 .ribbon:before,
.status-slr .ribbon:before {
	border-color: #DA1E28 #DA1E28 #DA1E28 transparent;
}


.pagination {
	justify-content: center;
}
.pagination .page-item .page-link {
	border-radius: 2rem !important;
	margin: 0 0.3rem;
	height: 2rem;
	font-size: 0.8rem;
	color: #999;
	display: flex;
	align-items: center;
}
.pagination .page-item.active .page-link {
	background-color: #2C9958;
	border: 1px solid #2C9958;
	color: #fff;
}
.page-md .pagination .page-item .page-link[rel=prev]::before {
	content: '< Previous';
	color: #999;
}
.page-md .pagination .page-item .page-link[rel=prev] {
	color: #fff;
}
.page-md .pagination .page-item .page-link[rel=next]::before {
	content: 'Next >';
	color: #999;
}
.page-md .pagination .page-item .page-link[rel=next] {
	color: #fff;
}
.pagination .page-item .page-link[rel=prev]:hover,
.pagination .page-item .page-link[rel=next]:hover,
.pagination .page-item .page-link[rel=prev]:focus,
.pagination .page-item .page-link[rel=next]:focus,
.pagination .page-item .page-link[rel=prev]:active,
.pagination .page-item .page-link[rel=next]:active {
	color: #E9ECEF;
}

.badge-credit {
	border: 1px solid #ccc;
	color: #666;
	background-color: #fff;
	padding: 0 0.5rem;
}
.badge-activity {
	border: 1px solid #ccc;
	color: #666;
	height: 2rem;
}
.badge-activity-g1 {
	background-color: #6127B6;
	color: #fff;
	border-radius: 0.4rem;
}
.badge-activity-g2 {
	background-color: #695200;
	color: #fff;
	border-radius: 0.4rem;
}
.badge-activity-g3 {
	background-color: #07A49A;
	color: #fff;
	border-radius: 0.4rem;
}
.badge-activity-g4 {
	background-color: #670302;
	color: #fff;
	border-radius: 0.4rem;
}




/*
 * ---------------------------------------/
 * Event List
 * ---------------------------------------/
 */
.input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3), .input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu) {
	border-top-right-radius:  2rem;
	border-bottom-right-radius:  2rem;
}
.border-0 { border: 0 !important; }



/*
 * ---------------------------------------/
 * Event detail
 * ---------------------------------------/
 */
.detail {
	background-color: #fff;
	background-image: none;
}
.detail .box-wrapper {
	padding: 0;
	margin: 0;
	padding-bottom: 5rem;
}
.badge-tag {
	background-color: #CAEDD4; /*#EAF2ED;*/
	color: #278845;
	border-radius: 0.4rem;
	padding: 0.5rem 1rem;
	border-radius: 2rem;
	font-size: 0.9rem;
	margin: 0 0.6rem 0.6rem 0;
}
.sub-activity {
		background-color: #ffffff;
		box-shadow: 0px 0px 5px 0px rgb(204 204 204 / 50%);
		border: 1px solid #ddd;
		border-radius: 1rem;
}