.punchin-main_wrapper {
	height: 100vh;
}

.punchin-main_container {
	height: 100%;
	position: relative;
}

.google_map-box,
#GoogleMap {
	height: 100%;
}
#GoogleMap * {
	border:none !important;
}

#floating-panel {
	position: absolute;
	top: 65px;
	left: 10px;
	padding: 5px 10px;
	border: 1px solid #999;
	background-color: #fff;
	z-index: 5;
	grid-gap: 5px;
}

#floating-panel>b {
	padding: 0 8px;
}

/* Footer */
.punchin-footer_wrapper {
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 5;
	background-color: rgb(255 252 248 / 80%);
	width: 100%;
}
.punchin-footer_container {
	height: 160px;
	box-shadow: 0 0 10px 10px rgb(139 139 139 / 50%);
	transition: all .3s;
	padding-bottom: 7px;
}
.punchin-footer_header-container {
	padding: 10px 20px;
}

.punchin-menu_wrapper{
	height:calc(100% - 48px);
	grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr 1fr;
	padding: 0 7px;
	overflow: hidden;
}
.pi_btn {
	transition: all .3s;
	cursor: pointer;
}
.pi_btn:active{
	box-shadow: 0 0 2px 3px rgba(0,0,0, .6) inset;
	transform: scale(.98) translate(-1px, -2px);
}
.PunchIn_Btn{
	width:60px;
	height:60px;
	background-image: url(/images/5321873.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 60px;
}
.work-PunchIn>.PunchIn_Btn{
	background-image: url(/images/svg/icons8-time-card.svg);
}
.storeVisit-PunchIn>.PunchIn_Btn{
	background-image: url(/images/svg/icons8-visit.svg);
}
.DispatchWorkers-Executor>.PunchIn_Btn{
	background-image: url(/images/svg/icons8-workers.svg);
}
.lunch-break>.PunchIn_Btn{
	background-image: url(/images/svg/icons8-escape.svg);
}
.planning-navigation>.PunchIn_Btn{
	background-image: url(/images/svg/icons8-navigation.svg);
}
.log-PunchIn>.PunchIn_Btn{
	background-image: url(/images/svg/icons8-logbook.svg);
}
.admin-PunchIn>.PunchIn_Btn{
	background-image: url(/images/svg/icons8-admin.svg);
}
.member-Manager>.PunchIn_Btn{
	background-image: url(/images/svg/icons8-conference.svg);
}
.admin-Manager>.PunchIn_Btn{
	background-image: url(/images/svg/icons8-caretaker.svg);
}
.punchin-menu_content{
	border:1px solid #ccc;
	height: 102px;
	padding:10px;
	cursor: pointer;
	background-color: #fffcf5;
	align-content: flex-start;
}
.punchin-menu_p{
	font-size: .9em;
	font-weight: bold;
    color: #352e2e;
}

.punchin-login-wrapper{
	width:100%;
	height:100%;
}
.punchin-login_content{
	padding: 20px;
    margin-top: 30px;
    border-radius: 100%;
    width: 119px;
	background-color: rgb(255 252 248 / 50%);
    box-shadow: 5px 5px 15px 2px #bdbdbd;
	transition: all .3s;
	cursor: pointer;
}
.punchin-login_content:active{
	transform: translate(2px, 2px);
	box-shadow: 1px 1px 5px 2px #bdbdbd;
}
.punchin-login_content>.PunchIn_Btn{
	background-image: url(/images/svg/icons8-login.svg);
}
.double-up-bottom, .double-down-bottom{
	position: absolute;
    top: -40px;
    cursor: pointer;
	transition: all .3s;
}
.double-up-bottom-img{
	width: 60px;
    height: 60px;
	transition: all .3s;
}
.double-up-bottom:hover {
	top:-50px;
}
.double-up-bottom:hover .double-up-bottom-img{
	transform: scale(1.1);
}
.double-up-bottom:active {
	top:-55px;
}
.double-up-bottom:active .double-up-bottom-img{
	transform: scale(1.15);
}
.double-down-bottom .double-up-bottom-img{
	transform: rotate(180deg);
}
.double-down-bottom:hover {
	top:-35px;
}
.double-down-bottom:hover .double-up-bottom-img{
	transform: scale(1.1) rotate(180deg);
}
.double-down-bottom:active {
	top:-30px;
}
.double-down-bottom:active .double-up-bottom-img{
	transform: scale(1.15) rotate(180deg);
}
/* Footer */

.EditorPanel-wrapper, .EditorChildPanel-wrapper{
	width:100%;
	max-width: 640px;
	height: 100%;
	position: fixed;
	top: 0;
	right: -100%;
	z-index: 99999;
	background-color: var(--primary-background);
	transition: all .3s;
	display: grid;
    grid-template-rows: calc(100% - 100px) 100px;
}
.EditorPanel-wrapper.show-panel, .EditorChildPanel-wrapper.show-panel{
	right: 0;
}
.EditorChildPanel-wrapper{
	z-index: 999999;
}
.EditorPanel-Container{
	grid-template-rows: 40% calc(100% - 40%);
}
.EditorPanel-Container.log{
	grid-template-rows: 1fr;
}
.EditorPanel-btn{
	width:66px;
	height:66px;
	padding:0;
}

#Im_image{
	width: 100%;
	height:100%;
	object-fit: cover;
}

.EditorPanel-Container-Content{
	padding:10px;
	display: grid;
	grid-gap: 10px;
	align-content: flex-start;
}
.EditorPanel-Container-Content.log-auto{
	grid-template-rows: 60px 1fr;
}
.EditorPanel-Container-Content label{
	font-size: .93em;
    margin-bottom: 5px;
    color: var(--secondary-color);
}
.EditorPanel-Container-Content textarea{
	width:97%;
	padding:8px;
	font-size: 1.15em;
}

.MarkInvalidText_Content{
	color:red;
	line-height: 1.6em;
}

.EditorPanel-wrapper .PunchIn-RecentStore-img{
	width:30px;
	height:30px;
	background-image: url(/images/svg/icons8-local.svg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding: 0;
}

.enabled_switch_btnbox {
	width: 40px;
	height: 20px;
	background-color: #c3c3c3;
	border-radius: 30px;
	padding: 3px;
	position: relative;
	transition: all .3s;
	cursor: pointer;
}
.enabled_switch_btnbox::after {
	display: block;
	content: "關閉";
	position: absolute;
	width: 80px;
	top: 0;
	right: -85px;
}
.enabled_switch_btnbox.active {
	background-color: #ffb74d;
}
.enabled_switch_btnbox.active::after {
	content: "啟動";
}
.enabled_switch_icon {
	border-radius: 50%;
	background-color: #d4d4d4;
	width: 20px;
	height: 20px;
	box-shadow: 0 1px 3px rgb(0 0 0 / 30%);
	position: absolute;
	top: 0;
	left: 0;
	transition: all .5s;
}
.enabled_switch_btnbox.active>.enabled_switch_icon {
	left: 20px;
}

.EditorPanel-log-Container{
	height: calc(100vh - 56px - 100px - 20px);
	align-content: flex-start;
    padding: 0 0 10px 10px;
	margin-right: -10px;
}
.view-PunchIn-map-pinpoint{
	width:35px;
	height:35px;
	background-image: url(/images/svg/icons8-map-pinpoint.svg);
	background-size: cover;
	background-position: center;
	padding: 0;
}
.view-PunchIn-local{
	width:35px;
	height:35px;
	background-image: url(/images/svg/icons8-local.svg);
	background-size: cover;
	background-position: center;
	padding: 0;
}
.view-PunchIn-localname{
	font-size: 1.1em;
    color: var(--secondary-color);
}
.log-wrapper{
	grid-template-columns: 100px 1fr;
}
.log-container{
	list-style: none;
	padding: 0;
	margin: 0;
	align-content: flex-start;
}
.log-container .green{
	color:#259125;
	font-weight: bold;
}
.log-container .red{
	color:#bf0d0d;
	font-weight: bold;
}
.view_img{
	border: 5px solid #fff;
	border-radius: 5px;
	width: 100px;
	height: 100px;
	object-fit: cover;
	box-shadow: 0 0 10px 1px #777;
}
.view_img.btn{
	padding: 0;
}
.view_img.btn:hover{
	box-shadow: 0 0 12px 1px #777;
}
.view_img.btn:active{
	box-shadow: 0 0 4px 1px #777;
}
.log-admin-btn, .log-user-btn{
	width:45px;
	height:45px;
	padding:0;
}

.Evaluate-Star, .Evaluate--Star{
	width:40px;
	height:40px;
	opacity: .3;
	transition: all .3s;
}
.shining-star{
	opacity: 1;
}
.is-shining{
	opacity: .6;
	transform: scale(1.2);
}

.ManagerAdmin-Item{
    width: 95%;
    padding: 10px 5px;
    box-shadow: 4px 4px 10px rgb(181 181 181 / 60%);
}
.ManagerAdmin-Item:first-child{
	margin-top: 10px;
}