@font-face {
	font-family: 'digital';
	src: url("/datas/fonts/digital-7/digital-7.ttf") format("truetype");
}


:root {
	--gap: 15px;
	--duration: 25s;
	--scroll-start: 0;
	--scroll-end: calc(-100% - var(--gap));
}

body {
	font-family: "Maven Pro", 微軟正黑體, sans-serif;
	background: #f1f1f1;
	overflow: scroll;
	scrollbar-width: 0px;
}

body::-webkit-scrollbar {
	display: none;
}

:root {
	--mdc-theme-primary: #4169e1;
	--mdc-theme-secondary: #FDBA38;
}

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td {
	margin: 0;
	padding: 0;
}

ol,
ul {
	list-style: none;
}

a {
	color: #32b3bf;
	text-decoration: none;
}



.clipped__video {
	position: relative;
	line-height: 0;
}

.clipped__video svg {
	width: 0;
	height: 0;
}

.clipped__mask {
	clip-path: url("#clipveidowframe");
	width: 100%;
}


.marquee-wrapper {
	position: relative;
	overflow-x: hidden;
	display: flex;
}

.marquee {
	flex-shrink: 0;
	display: flex;
	justify-content: start;
	align-items: center;
	white-space: nowrap;
	will-change: transform;
	animation: marquee 60s linear infinite;
}



.marquee-wrapper:hover .marquee {
	animation-play-state: paused !important;
}


@keyframes marquee {
	from {
		transform: translateX(var(--scroll-start));
	}

	to {
		transform: translateX(var(--scroll-end));
	}
}




#media-logo {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: center;
}


#media-logo img {
	height: auto;
	width: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}



.clipped__asset {
	clip-path: url(#clipveidowframe);
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
}

.icon-atmosphere {
	height: 20px;
}



.digit-font {
	color: #fff;
	font-family: "digital";
	font-weight: bold;
	letter-spacing: 2px;
}

.gradient-text {
	background: linear-gradient(45deg, #49BCBB, #1189AF);
	-webkit-background-clip: text;
	color: transparent;
	font-weight: bold;
}



#media-center {
	background: rgb(20, 41, 78);
	background: radial-gradient(circle, rgba(20, 41, 78, 1) 0%, rgba(7, 20, 36, 1) 100%);
	min-height: 100vh;
	min-width: 100vw;
	overflow: hidden;
	color: #fff;
}

#media-header h1 {
	color: #fff;
	letter-spacing: 20px;
}

#header-title {
	width: 75%;
}



.liveview-clip-header {
	min-width: 95px;
	max-width: 100%;
	height: 40px;
	background: linear-gradient(45deg, #00FFF0, #1189AF);
	clip-path: polygon(0% 0%, 0% 25%, 20% 80%, 20% 80%, 100% 80%, 100% 0%);
	color: #06253F;
	top: -15px;
	right: 0;
	font-weight: bold;
	font-size: 18px;
	position: absolute;
}

#icon-news {
	width: 100px;
	height: min-content;
}

.bottom-line {
	position: relative;
}

.bottom-line:after {
	content: " ";
	background: #1C80F4;
	clip-path: polygon(35% 4%, 40% 100%, 100% 100%, 100% 85%, 41% 85%, 36% 0%);
	display: block;
	position: absolute;
	width: 150%;
	height: 10px;
	bottom: 5px;
	right: -20px;
}

#media-news {
	background: #1C80F4;
	color: #fff;
	font-weight: bolder;
	font-size: 22px;
	width: 100%;
}

.clip-header {
	min-width: 40%;
	max-width: 100%;
	height: 35px;
	background: linear-gradient(45deg, #00FFF0, #1189AF);
	clip-path: polygon(0% 0, 7% 80%, 20% 80%, 100% 80%, 100% 0%);
	color: #06253F;
	top: 0;
	right: 0;
	width: 63%;
	font-weight: bold;
	font-size: 18px;
}


.clip-frame {
	position: relative;
}

.clip-frame:before {
	content: " ";
	background: #60C2CD;
	/*clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 25%, 99.5% 25%, 99.5% 99.5%, 0.5% 99.5%, 0.5% 0.5%, 35% 0.5%, 40% 26%, 100% 26%, 100% 25%, 40.5% 25%, 35.5% 0%);*/
	clip-path: polygon(0% 0%, 0% 100%, 0.5% 100%, 0.5% 2%, 35% 2%, 40% 100%, 100% 100%, 100% 97%, 40.5% 97%, 35.5% 0%);
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
}

.clip-frame-content {
	border-left: #60C2CD 2px solid;
	border-right: #60C2CD 2px solid;
	border-bottom: #60C2CD 2px solid;
}

.vertical-line {
	width: 3px;
	height: 50px;
	background-color: #266AB4;
	margin: 0 5px;
}

.horizontal-line {
	width: 95%;
	height: 3px;
	background-color: #266AB4;
	margin: 8px 0;
}

.text-ellipsis {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.media-frame {
	color: #60C2CD;
	border: 2px solid;
}

.mdc-data-table__cell {
	font-size: 1.1rem;
}

.showontheway {
	cursor: pointer;
}

.showontheway:hover {
	background: #000;
}

#environmentcard {
	overflow: hidden;
}

#environmentcard th,
#environmentcard td {
	white-space: nowrap;
}

.step-wrap {

	padding: 1rem;
	position: relative;
	width: 100%;
	overflow: overlay;
}

.mapaction {
	display: flex;
	justify-content: space-between;
	margin-left: 10px;
}

.device-td {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding: 0;
}

.device-icon {
	margin-right: 3px;
}

.icon-info span {
	cursor: pointer;
	white-space: nowrap;
}

.customicon {
	width: 32px;
	height: 32px;
	display: inline-flex;
	vertical-align: sub;

}

.icon-camera {
	background: url("/datas/images/video-camera.png");
}

.icon-recyclecar {
	background: url("/datas/images/recyclecar.png");
}

.icon-patrol {
	background: url("/datas/images/scooter.png");
}

.icon-ambulance {
	background: url("/datas/images/ambulance.png");
}

.icon-water {
	background: url("/datas/images/water1.png");
}

.icon-hospital {
	background: url("/datas/images/hospital2.png");
}

.icon-sensor {
	background: url("/datas/images/middle_marker.png");
}

.icon-startfinish {
	background: url("/datas/images/end_marker.png");
}

.icon-leadingbike {
	background: url("/datas/images/leadingbike.png");
}

.icon-leadingcar {
	background: url("/datas/images/leadingcar.png");
}


img {
	transition: all 0.2s ease;
}

input,
select,
button,
textarea {
	font-family: "Maven Pro", 微軟正黑體, sans-serif;
	color: #6CA0EA;
	font-weight: bold;
}

.callsensor {
	cursor: pointer;
	display: flex;
	padding: 10px;
}

.item-name {
	font-size: 16px;
	color: #4169e1;
	font-weight: bold;
}

.log {
	width: calc(50% - 20px);
	margin: 10px;
	overflow-y: scroll;
	overflow-x: hidden;
	max-height: 120px;
}

input::placeholder {
	color: #B8B7B8;
	font-weight: 500;
	letter-spacing: .08929em;
}

.mdc-dialog__surface {
	border-radius: 15px;
}

.mdc-data-table {
	overflow: overlay;
}



.medic-detail-tb-wrapper {
	margin: 0 !important;
	width: 100%;
	white-space: pre-wrap !important;
}

.medic-detail-tb-wrapper .mdc-data-table__table {
	white-space: pre-wrap !important;
}

.mdc-text-field--upgraded:not(.mdc-text-field--fullwidth):not(.mdc-text-field--box) {
	margin-top: 0px;
}


.form-list .mdc-text-field--upgraded:not(.mdc-text-field--fullwidth):not(.mdc-text-field--box),
.form-list .mdc-select--outlined {
	margin-top: 5px;
	margin-bottom: 2px;
}

.mdc-card__actions {
	justify-content: flex-end;
	padding-right: 12px;
}

#activitylistblock {
	background: #6CA0EA;
	padding-top: 5px;
}

.list-menu-block {
	background: #6CA0EA;
	color: #fff;
	padding: 10px;
	justify-content: center;
}

.list-menu li a {
	color: #fff;
	line-height: 45px;
}

.list-menu li .list-menu-item i {
	vertical-align: sub;
	margin-right: 5px;
}

.list-menu li {
	display: inline;
	margin: 10px;
}

.list-menu li:hover i {
	color: #fff;
}

mark {
	background-color: transparent;
}

mark:before {
	content: "";
	display: inline-block;
	width: 12px;
	height: 12px;
	margin-right: 8px;
	background: #FDBA38;
}

.activity-content {
	margin: 8px;
}

.desc {
	margin-top: 5px;
	margin-bottom: 5px;
	font-size: 10px;
	border-left: 5px solid #FDBA38;
	padding-left: 8px;
	color: #666;
}

.device-info .showiframe {
	line-height: 1.5;
	padding-left: .75em;
	padding-right: .75em;
	font-size: 1.2em;

}

.device-list {
	flex-basis: 20%;
	display: flex;
	flex-flow: row wrap;
	width: 100%;
}

.device-list .mdc-data-table {
	margin: 5px;
}

.device-list i {
	font-size: 20px;
	vertical-align: sub;
	margin-left: 5px;
	cursor: pointer;
}

.liveview-list {
	display: flex;
	justify-content: flex-start;
	width: 100%;
	flex-basis: 80%;
	text-align: center;
	flex-wrap: wrap;
}

.iframefocus {
	background: #000 !important;
	color: #fff !important;
}

.liveview-list .liveviewitem {
	flex-basis: calc(50% - 6px);
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
}

.is-divider-content .tags {
	justify-content: center;
}

.tags:not(:last-child) {
	margin-bottom: 0;
}

.field.is-grouped.is-grouped-multiline:last-child {
	margin-bottom: 0;
}

.dataTable tr:nth-child(even) {
	background-color: #f2f2f2;
}

.dataTable thead tr {
	text-align: left;
}

.dataTable .material-icons {
	cursor: pointer;
}

.dataTables_wrapper .dataTables_paginate span {
	vertical-align: super;
}

.green {
	color: green;
}

.dataTables_wrapper input[type=text],
.dataTables_wrapper input[type=search],
.dataTables_wrapper select {
	background-color: transparent;
	border: none;
	border-bottom: 1px solid #9e9e9e;
	border-radius: 0;
	outline: none;
	font-size: 1rem;
	margin: 0 0 5px 0;
	padding: 0;
	box-shadow: none;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	transition: all .3s;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
	background: #FDBA38;
	border: none;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
	background: #4169e1;
	color: #fff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:active,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
	background: rgba(0, 0, 0, .38);
	border: none;
}


.dataTables_wrapper .dataTables_length {
	margin: 5px 0 0 5px;
}

.dataTables_wrapper .dataTables_filter {
	margin: 5px 5px 0 0;
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
	margin: 5px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
	padding: 0px;
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
	padding-top: 0px;
}


.infoblock {
	display: flex;
	display: -webkit-flex;
	-webkit-flex-direction: row;
	flex-direction: row;
	justify-content: center;
	align-content: stretch;
	-webkit-align-content: stretch;
	margin: 3px 10px 3px 10px;
}

.infoblock .breadcrumbs {
	flex: 1;
}

section {
	display: flex;
}

section select {
	margin: 2px;
}

.main-wrap {
	margin-top: 60px;
	padding-bottom: 60px;
}

.card-content .input-container {
	position: relative;
	margin: 20px 20px;
}

.container {
	position: relative;
	max-width: 460px;
	width: 90%;
	margin: 80px auto 100px;
}

.event-list {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	width: 100%;
	align-items: stretch;
}

.dialog-form {
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-flow: row wrap;
	flex-flow: row wrap;
}

.event-item {
	flex: 0 0 50%;
}

.event-item a {
	display: contents;
	text-decoration: none;
}

.event-item-img {
	margin: 0;
	padding: 0;
}

.event-item-img img {
	width: 100%;
	height: 37.5vw;
	position: relative;
	display: block;
}

.event-item-detail {
	background-color: #3E3A39;
	color: #fff;
	padding: 5px;
	margin: 0 auto;
	text-align: center;
	font-size: 10px;
}

.event-item-detail span {
	display: block;
	text-align: center;
	margin: 0 auto;
}

.event-item-detail .title {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 165px;
}

.today-event {
	order: -1;
	flex: 0 0 100%;
	display: flex;
}

.today-event .event-item-img {
	width: 50%;
}

.today-event .event-item-detail {
	width: 50%;
	vertical-align: middle;
	background: #FDBA38;
	color: #000;
	font-weight: bold;
}

.today-event .event-item-detail .date {
	background: #000;
	color: #fff;
	border-radius: 50px;
	display: inline-block;
	padding: 3px 20px 3px 20px;
	margin: 0 auto;
}

.today-event .event-item-detail .today {
	margin: 15px;
	font-size: 3em;
	font-weight: 900;
}

.today-event .event-item-img img {
	border-top: 5px;
	border-left: 5px;
	border-bottom: 5px;
	border-color: #FDBA38;
	border-style: solid;
}

.button-shaped {
	border-radius: 50px;
}

.bg1 {
	background-color: #6CA0EA !important;
}

.bg2 {
	background-color: rgba(255, 255, 255, 7) !important;
}

.color1 {
	color: #ffffff !important;
}

.color2 {
	color: #000 !important;
}

#loadmorewrap {
	display: block;
	width: 100%;
	margin: 20px auto;
	text-align: center;
}

.info {
	width: 100%;
	display: block;
	color: #9F9FA0;
	margin: 5px auto 0px auto;
	text-align: center;
	font-size: 12px;
	vertical-align: middle;
}

.info i {
	vertical-align: middle;
	top: -2px;
	position: relative;
	margin-right: 2px;
	font-size: 15px;
}



#loadingimg {
	display: block;
	width: 100%;
	text-align: center;
	margin-top: 10px;
}

#loadingimg img {
	width: 50px;
}

.searchbar {
	display: flex;
	padding: 15px;
	background: #f1f1f1;
}

.mdc-dialog__body .giveup-edit-wrapper {
	width: 100%;
	display: flex;
	flex-flow: row wrap;
	height: max-content;
}

.mdc-dialog--open .mdc-dialog__surface {
	max-height: calc(100% - 50px);
}

.mdc-dialog__body {
	max-height: 50% !important;
	overflow-y: scroll;
	overflow-x: auto;
	margin-top: 5px;
	padding: 0 8px 8px;
	height: max-content;
}


#medic-detail-table i {
	cursor: pointer;
	vertical-align: middle;
}


input.custom,
select.custom,
textarea.custom {
	-moz-appearance: none;
	-webkit-appearance: none;
	width: 100%;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	outline: none;
	border: 1px solid;
	background-color: #fff;
	line-height: 1.4;
	padding: 8px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 50px;
	font-size: 16px;
	color: #000;
}

.searchbar .search-wrap {
	margin-left: 10px;
	position: relative;
	width: calc(100% - 83px);
}

.search-wrap .search-btn {
	position: absolute;
	top: 0;
	right: 0;
	background-color: transparent;
	border: 0;
	color: #6CA0EA;
	cursor: pointer;
	display: inline-block;
	text-align: center;
	width: 35px;
	height: 35px;
	font-size: 15px;
}

.search-wrap .search-btn .material-icons {
	line-height: 38px;
}


.msg {
	width: 100%;
	padding: 20px;
	margin: 0 auto;
	text-align: center;
	color: #6CA0EA;
	font-weight: bold;
}

.event-block {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	padding-bottom: 60px;
	width: 100%;
}

.event-header {
	margin-bottom: 5px;
	box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
}

.event-header .event-header-title {
	flex-basis: 100%;
	font-weight: bold;
	padding: 5px;
	background: #3E3A39;
	color: #FDBA38;
}

.event-header,
.event-content,
.act-content {
	flex-basis: 100%;
}

.event-header img {
	width: 100%;
	position: relative;
	display: block;
}

.event-content .mdc-card {
	margin: 5px;
	flex-basis: 100%;
	height: fit-content;
	flex-grow: 1;
	border-radius: 10px;
	padding: 10px;
	transition: all 0.5s ease-out;
}

.reward-title {
	transition: all 0.5s ease-out;
}

.act-content .mdc-card {
	flex-basis: 100%;
	flex-grow: 1;
	margin: 3px;
	border-radius: 5px;
	letter-spacing: .05em;
	height: fit-content;
}

.act-content .record-data {
	height: auto;
}

.act-content .mdc-card .card-content {
	flex-flow: row wrap;
	display: flex;
	margin: 0 auto;
	text-align: center;
	padding-bottom: 20px;
}


.act-content .mdc-card .act-header {
	flex-flow: row wrap;
	display: flex;
	height: inherit;
}

.act-content .mdc-card .sub-header {
	flex-flow: column wrap;
	display: flex;
	height: inherit;
}

.mdc-card .card-title {
	margin: 0px 0px 5px 5px;
}

.mdc-card .big-title {
	font-size: 30px;
	text-align: center;
	margin-top: 20px;
}

.reward-title {
	font-weight: bold;
	border-radius: 50px;
	background: #f1f1f1;
	color: #6CA0EA;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	padding: 10px;
	margin-top: 5px;
}

.event-content .search-wrap {
	position: relative;
}

#logininfo {
	justify-content: flex-end;
	margin: 3px 10px 3px 10px;
}

#logininfo span {
	border-left: 1px solid #fff;
	width: 1px;
	height: 12px;
	color: #fff;
	display: inline-block;
	position: relative;
	font-size: 0.0625rem;
	top: 5px;
	margin: 0px 10px 0px 10px;
}

#logininfo i {
	vertical-align: top;
}


.cg {
	color: #32b3bf;
}

.act-title {
	flex: 100%;
	color: #fff;
	background: #6CA0EA;
	font-size: 20px;
	font-weight: bolder;
	letter-spacing: 1px;
	padding: 5px 10px 5px 10px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}

.sub-title {
	flex: 50%;
	color: #000;
	background: #FDBA38;
	font-size: 16px;
	font-weight: bolder;
	letter-spacing: 1px;
	padding: 5px 10px 5px 10px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}

.sub-title i {
	font-size: 18px;
	vertical-align: text-top;
	margin-right: 5px;
}

.sub-title a i {
	font-size: 22px;
	color: #000;
	margin-left: 5px;
}

.iframefocus a i {
	color: #fff;
}

#Wx img {
	width: 35px;
	vertical-align: bottom;
}

.act-content {
	color: #717071;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0 auto;
	max-width: 1200px;
	padding: 0 10px;
}

.act-content-wrapper {
	padding: 0 !important;
}

.dataTable .mdc-icon-button {
	width: 40px;
	height: 40px;
	padding: 5px;
}

.act-detail {
	margin: 5px 10px 5px 10px;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	flex-flow: column nowrap;
}

.act-detail-row {
	margin: 10px;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	flex-flow: row wrap;
}

.flex-nowrap {
	flex-wrap: nowrap;
}

.box-detail {
	margin: 5px 10px 5px 10px;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	flex-flow: row nowrap;
}

.sub-detail {
	display: flex;
	display: -webkit-flex;
	-webkit-flex-direction: column;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	-webkit-align-content: stretch;
	align-content: stretch;
}

.sub-detail .sd-item {
	flex: 1;
	-webkit-flex: 1;
	align-self: stretch;
	display: flex;
	align-items: flex-start;
	-webkit-flex-direction: row;
	flex-direction: row;
	flex-wrap: wrap;
}

.sub-detail .sd-item .sd-item-p {
	flex: 1;
	-webkit-flex: 1;
	align-self: stretch;
	display: flex;
	align-items: flex-start;
	-webkit-flex-direction: column;
	flex-direction: column;
}

.weather-tb th {
	position: relative;
}

.weather-tb tbody th .sd-item-title {
	color: #B8B7B8;
	font-weight: 500;
	font-size: 10px;
	letter-spacing: .05em;
	position: absolute;
	display: block;
	bottom: 1;
}

.weather-tb thead th .sd-item-title {
	color: #B8B7B8;
	font-weight: 500;
	font-size: 10px;
	letter-spacing: .05em;
	position: absolute;
	display: block;
	top: 2;
	left: 5;
}

.activity-tb ul li.mdc-list-item {
	height: 34px;
}

.activity-tb ul.mdc-list {
	margin-left: -18px;
}

.sub-detail .sd-item .sd-item-p .sd-item-content {
	margin: 10px auto;
	vertical-align: middle;
	text-align: center;
}

.activity-tb i {
	vertical-align: sub;
	margin-right: 5px;
}

.player-title .player-team {
	color: #6CA0EA;
	font-size: 12px;
	font-weight: 600;
}

.player-title .player-name {
	font-weight: bold;
	font-size: 20px;
}

.player-data .card-title {
	color: #B8B7B8;
	font-weight: 500;
	font-size: 10px;
	letter-spacing: .05em;
	padding: 10px 0px 0px 10px;
}

.act-content .col2 {
	flex-basis: calc(50% - 6px);
}

.colinput {
	flex: 0 0 49%;
	margin: 5px;
}

.act-content .col3 {
	flex-basis: calc(33% - 6px);
}

.act-content .col4 {
	flex-basis: calc(25% - 6px);
}

.record-title,
.record-list {
	flex-basis: 100%;
}

.card-content .data-value {
	font-weight: bold;
	font-size: 16px;
}

.card-content .data-time {
	font-weight: bolder;
	font-size: 22px;
	color: #000;
}

.record-title {
	border-radius: 50px;
	background: #6CA0EA;
	color: #fff;
	font-weight: 500;
	font-size: 10px;
	margin: 15px 10px 10px 10px;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-flow: row nowrap;
	flex-flow: row nowrap;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	padding: 10px;
	border-bottom: 1px solid #eee;
}

.record-list .record-row:last-child {
	border-bottom: none;
}

.record-list .record-row2:last-child {
	border-bottom: none;
}

.record-list .record-row {
	font-weight: bold;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-flow: row nowrap;
	flex-flow: row nowrap;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	padding: 10px;
	border-bottom: 1px solid #B8B7B8;
	font-size: 13px;
	color: #717071;
}

.track-list .track-row a {
	font-weight: bold;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-flow: row nowrap;
	flex-flow: row nowrap;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	padding: 10px;
	border-bottom: 1px solid #B8B7B8;
	font-size: 13px;
	color: #717071;
}

.track-list .track-row:last-child a {
	border: none;
}

.track-list .track-row {
	position: relative;
}

.track-list .track-row i {
	position: absolute;
	top: 6px;
	right: 0;
}

.record-list .record-row2 {
	font-weight: bold;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-flow: column nowrap;
	flex-flow: column nowrap;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	padding: 10px;
	border-bottom: 1px solid #B8B7B8;
	font-size: 13px;
	color: #717071;
}

.record-title span,
.record-row span,
.record-row2 div span,
.track-row a span {
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
}


.record-row2 div {
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-flow: row nowrap;
	flex-flow: row nowrap;
}

.track-list .track-row a span:nth-child(2) {
	flex-basis: 60%;
}

.reward-list .record-row span:nth-child(3) {
	flex-basis: 30%;
}

.record-row2 div span:nth-child(3) {
	flex-basis: 30%;
}

.data-point {
	color: #6CA0EA;
}

.event-header .event-header-img {
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: 70%;
}

.event-header .event-header-func {
	display: flex;
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: auto;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: flex-start;
}

.tags {
	flex-wrap: nowrap;

}

.mytag {
	align-items: flex-start;
	flex-flow: column nowrap;

}

.mytag>.tag {
	display: flex;
	height: 1.7em;
	width: 100%;
	text-align: left;
	justify-content: flex-start;
}

.mytag .has-addons {
	width: 100%;
}

.tags .tag {
	margin-bottom: 0.1rem;
}

.event-header-func>.func {
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: auto;
	text-align: center;
	width: 100%;
	font-size: 10px;
	background: #fff;
	color: #717071;
	box-sizing: border-box;
	border-bottom: 1px solid #eee;
	-webkit-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
	justify-content: center;
	align-items: center;
	display: flex;
}


.icons {
	background-image: url(/datas/images/icons.png);
	width: 35px;
	height: 35px;
	background-size: 35px auto;
	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

.func .icons {
	display: block;
	margin: 0 auto;
}

.icons-video {
	background-position: 0 -70;
}

.icons-cer {
	background-position: 0 0;
}

.icons-map {
	background-position: 0 -35;
}

.icons-rank {
	background-position: 0 -103;
}

.icons-reward {
	background-position: 0 -138;
}

.icons-score {
	background-position: 0 -172;
}

.icons-find {
	background-position: 0 -206;
}

.s-icons {
	display: block;
	margin: 0 auto;
	background-image: url(/datas/images/small-icons.png);
	width: 24px;
	height: 24px;
	background-size: 24px auto;
	-webkit-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

.mdc-card__action-icons .s-icons {
	margin: 12px;
}

.s-icons-fb {
	background-position: 0 0;
}

.s-icons-line {
	background-position: 0 -24;
}

.s-icons-back {
	background-position: 0 -72;
}

.s-icons-track {
	background-position: 0 -94;
}

.s-icons-tracking {
	background-position: 0 -118;
}

.s-icons-share {
	background-position: 0 -140;
}

.event-header-img {
	position: relative;
}

.event-header-img .event-btn-back {
	position: absolute;
	z-index: 99;
	background: #fff;
	border-radius: 5px;
	margin: 10px;
	border: #6CA0EA 2px solid;
	box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
}

.func a {
	color: #717071;
	display: block;
	flex: 1;
}

.func:hover {
	background: #eee;
}

.func:hover .icons {
	transform: scale(1.1);
}

.mdc-card .func-title {
	background: rgba(255, 255, 255, .9);
	padding: 8px;
	margin: 0 0 10px 0;
	border-radius: 5px;
}

.circle {
	border-radius: 50px;
}



.line-it-button {
	padding: 12px;
}

.mdc-card__action-icons button {
	margin-left: 8px;
}

.group-title .material-icons,
.reward-title .material-icons {
	vertical-align: bottom;
	float: right;
	margin-right: 0px;
}

.group-title,
.reward-title {
	cursor: pointer;
}

.labels {
	color: transparent;
	font-weight: bold;
	font-size: 16px;
	font-family: "Maven Pro", 微軟正黑體, sans-serif;

}

.showlabels {
	color: #fff;
	font-weight: bold;
	font-size: 14px;
	font-family: "Maven Pro", 微軟正黑體, sans-serif;

}

.showRlabels {
	color: #fff;
	font-weight: bold;
	font-size: 10px;
	font-family: "Maven Pro", 微軟正黑體, sans-serif;
	animation: pulse;
	animation-duration: 1s;
	animation-timing-function: ease-in-and-out;
	animation-delay: 0;
	animation-iteration-count: infinite;
	animation-direction: alternate;

}


@keyframes pulse {
	0% {
		font-size: 10px;
	}

	100% {
		font-size: 16px;
	}
}

.markercontent {
	font-family: "Maven Pro", 微軟正黑體, sans-serif;
}

.record-subtitle {
	background: #f1f1f1;

}

.record-subtitle span:nth-child(2) {
	flex-basis: 60%;

}

.mdc-drawer--temporary .mdc-drawer__header:before {
	display: block;
	padding-top: 20%;
	content: "";
}

.mdc-drawer--temporary .mdc-drawer__footer:before {
	display: none;
}

.menu .mdc-list-item {
	font-size: 16px;
	background: #FDBA38;
}

.menu .menu-event,
.menu .menu-player {
	background: #4169e1;
	color: #fff;
}

.menu .menu-event-item {
	background: #6CA0EA;
	color: #fff;
}

.menu .menu-separator {
	background: #000;
	color: #fff;
}

.mem-func {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	margin: 5px;
}

.menu .menu-track-title {
	background: #666;
	color: #fff;
}

.menu .menu-track {
	background: #fff;
}

.footer-wrap {
	height: 40px;
	text-align: center;
}

.footer-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 45px;
	background-color: rgba(255, 255, 255, 1);
	border-top: 1px solid #eee;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	text-align: center;
	font-size: 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	transition: transform .3s, -webkit-transform .3s;
}

.footer-bar .footer-func-item {
	width: 100%;
	height: 100%;
	color: #fff;
	background: #6CA0EA;
	cursor: pointer;
	font-size: 18px;
	font-size: 1.125rem;
	border-right: #eee 0.5px solid;
	line-height: 40px;
}

.footer-bar .footer-func-item:last-child {
	border-right: none;
}

.footer-bar .footer-func-item i {
	display: inline-block;
	margin-right: 3px;
	vertical-align: text-top;
	color: #fff;
}

.expanding-share-box {
	position: fixed;
	bottom: 50px;
	right: 15px;
	display: none;
}

.expanding-share-box .expanding-share-button-list {
	list-style: none;
	margin: 0 5px;
	overflow: visible;
	padding: 0;
	box-sizing: border-box;
	position: relative;
	display: block;
}

.expanding-share-button-list>li {
	display: block;
	height: 45px;
	position: relative;
	overflow: visible;
}

.expanding-share-button *,
.expanding-share-button :after,
.expanding-share-button :before {
	box-sizing: border-box;
}

.expanding-share-button .share-btn {
	display: block;
	height: 40px;
	padding: 0 3px 0 0;
}

.share-btn .at-icon-wrapper {
	margin-right: -3px;
	float: right;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .3);
	border-radius: 50%;
	display: inline-block;
	height: 40px;
	line-height: 40px;
	text-align: center;
	width: 40px;
	cursor: pointer;
}

.at-icon-wrapper img,
.at-icon-wrapper svg {
	display: inline-block;
	fill: #fff;
	height: 100%;
	width: 100%;
}

.expanding-share-button .at-icon {
	display: inline-block;
	height: 34px;
	margin: 3px 0;
	vertical-align: top;
	width: 34px;
}

.expanding-share-box ul.expanding-share-button-list.open .social-item-4,
.expanding-share-box ul.expanding-share-button-list.open .social-item-4 .btn-share-text {
	transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.4s;
}

.expanding-share-box ul.expanding-share-button-list.hidden .social-item-4,
.expanding-share-box ul.expanding-share-button-list.hidden .social-item-4 .btn-share-text {
	transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.1s;
}

.expanding-share-box ul.expanding-share-button-list.open .social-item-3,
.expanding-share-box ul.expanding-share-button-list.open .social-item-3 .btn-share-text {
	transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.3s;
}

.expanding-share-box ul.expanding-share-button-list.hidden .social-item-3,
.expanding-share-box ul.expanding-share-button-list.hidden .social-item-3 .btn-share-text {
	transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.2s;
}

.expanding-share-box ul.expanding-share-button-list.open .social-item-2,
.expanding-share-box ul.expanding-share-button-list.open .social-item-2 .btn-share-text {
	transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.2s;
}

.expanding-share-box ul.expanding-share-button-list.hidden .social-item-2,
.expanding-share-box ul.expanding-share-button-list.hidden .social-item-2 .btn-share-text {
	transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.3s;
}

.expanding-share-box ul.expanding-share-button-list.open .social-item-1,
.expanding-share-box ul.expanding-share-button-list.open .social-item-1 .btn-share-text {
	transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.1s;
}

.expanding-share-box ul.expanding-share-button-list.hidden .social-item-1,
.expanding-share-box ul.expanding-share-button-list.hidden .social-item-1 .btn-share-text {
	transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.4s;
}

.expanding-share-box ul.expanding-share-button-list .share-btn .at-icon-wrapper {
	transform: scale(0);
	opacity: 0;
}

.expanding-share-box ul.expanding-share-button-list.open .share-btn .at-icon-wrapper {
	transform: scale(1);
	opacity: 1;
}

.expanding-share-box li [data-name]:after {
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .3);
	transform: translate(0, -50%);
	transition: .4s;
	background-color: #fff;
	border-radius: 15px;
	color: #666;
	content: attr(data-name);
	font-size: 9pt;
	line-height: 9pt;
	font-weight: 500;
	opacity: 0;
	padding: 3px 5px;
	position: relative;
	top: 15px;
	white-space: nowrap;
}

.expanding-share-box li:hover [data-name]:after {
	opacity: 1;
}

.footer-func-item:hover .mdc-list-item__graphic,
.footer-func-item:hover span {
	color: #000;
}

.card-title .trackinfo {
	float: right;
	color: #999;
}

.card-title .trackinfo i {
	display: inline-block;
	vertical-align: top;
}

.menu-social {
	display: flex;
	display: -webkit-flex;
	-webkit-flex-direction: row;
	-webkit-align-content: stretch;
	align-content: stretch;
	justify-content: center;
	align-items: center;
}

.menu-social .menu-social-item {
	flex: 1;
	-webkit-flex: 1;
	text-align: center;
	align-self: stretch;
	display: flex;
	align-items: center;
}


.menu-social .menu-social-item img {
	margin: 20px auto;
	width: 100px;
	vertical-align: middle;
}

.func,
.showmsg {
	cursor: pointer;
}

.errormsg {
	color: red;
	background: #fff;
}

.act-detail-row .mdc-data-table {
	width: 100%;
}

.obvious {
	color: #bc5683;
	font-size: 26px;
}

.cyan {
	color: #04bfbf;
}

.mdc-data-table__header-row {
	background: aliceblue;
}

.mdc-text-field--with-trailing-icon .mdc-text-field__input {
	padding-right: 0px;
	margin-right: 48px;
}

.showiframe,
.setcenter,
.mdc-text-field--with-trailing-icon .material-icons {
	cursor: pointer;
}

table.dataTable tbody td.hover {
	background-color: #FDBA38 !important;
}

.mdc-text-field__icon:not([tabindex]),
.mdc-text-field__icon[tabindex="-1"] {
	pointer-events: auto;
}


td .editrow {
	width: 90%;
	display: flex;
	margin: 5 auto;
}

td .editrowaction {
	width: 90%;
	display: flex;
	margin: 5 auto;
	justify-content: space-between;
}

td .editrowaction i {
	margin-left: 5px;
}

.dsnone {
	display: none;
}

/*
* FixedColumns styles
*/

div.DTFC_RightHeadWrapper table,
div.DTFC_LeftHeadWrapper table {
	margin-bottom: 0 !important;
	border-top-right-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

div.DTFC_RightHeadWrapper table thead tr:last-child th:first-child,
div.DTFC_RightHeadWrapper table thead tr:last-child td:first-child,
div.DTFC_LeftHeadWrapper table thead tr:last-child th:first-child,
div.DTFC_LeftHeadWrapper table thead tr:last-child td:first-child {
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

div.DTFC_RightBodyWrapper table,
div.DTFC_LeftBodyWrapper table {
	border-top: none;
	margin-bottom: 0 !important;
}

div.DTFC_RightBodyWrapper tbody tr:first-child th,
div.DTFC_RightBodyWrapper tbody tr:first-child td,
div.DTFC_LeftBodyWrapper tbody tr:first-child th,
div.DTFC_LeftBodyWrapper tbody tr:first-child td {
	border-top: none;
}

div.DTFC_RightFootWrapper table,
div.DTFC_LeftFootWrapper table {
	border-top: none;
}

.steps:not(.is-vertical) .steps-content.is-divider-content {

	top: -30;
	position: relative;
	z-index: 2;
}

.sensor-data {
	top: -20;
	position: relative;

}


.steps .steps-marker {
	z-index: 2;
}

.steps:not(.is-vertical) .steps-content {
	margin-left: 0.5rem;
	margin-right: 1rem;
}

.steps-segment:after {
	background-color: #000;
}

.steps:not(.is-hollow) .steps-marker:not(.is-hollow) {
	background-color: #000;
	color: #fff;
}

.step-container .step-wrap:nth-child(even) {
	background: aliceblue;
}

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

	.steps.is-horizontal {
		width: max-content;
	}


	.col2,
	.act-content .col2,
	.liveview-list .liveviewitem,
	.liveview-list,
	.device-list,
	.act-content .col4 {
		flex-basis: 100%;
	}


	.list-menu-block {
		display: none;
	}

	#activitylistblock {
		background: transparent;
	}

	.mdc-card {
		flex-basis: 100%;
		overflow: overlay;
	}

	.m_w_100 {
		width: 100% !important;
	}


	th,
	td {
		white-space: nowrap;
	}

	.dataTables_wrapper {
		width: 100%;
		margin: 0 auto;
	}

	#medic-detail-table tr td {
		white-space: pre-wrap;
	}

	#medic-detail-table tr.editrow td {
		white-space: nowrap;
	}

	#conditionplace {
		width: 50% !important;
	}

	#conditionplacek {
		width: 50% !important;
	}

	#playerno,
	#findplayer {
		width: 100% !important;
	}

	.mapaction {
		justify-content: flex-start;
	}
}