*{
	box-sizing: border-box;
	font-family: 'Segoe UI', 'Open Sans', 'Meiryo',	'微軟正黑體','MS UI Gothic','MS PGothic',Arial,Helvetica, sans-serif;
}

html, body {
	width: 100%;
	height: 100%;
	min-height: 100%;
	color: #444;
	font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
	margin: 0px;
  	padding: 0px;
	background-color: #eaf1ff;
}

/* custom scrollbar */
::-webkit-scrollbar {
	width: 20px;
}
  
::-webkit-scrollbar-track {
	background-color: transparent;
}
  
::-webkit-scrollbar-thumb {
	background-color: #d6dee1;
	border-radius: 20px;
	border: 6px solid transparent;
	background-clip: content-box;
}
  
::-webkit-scrollbar-thumb:hover {
	background-color: #a8bbbf;
}

pager {
	position: relative;
	width:100%;
	height:100%;
	display: grid;
	grid-template-rows: auto 1fr auto;
	grid-template-columns: 100%;
}

subpager {
	position: absolute;
	width:100%;
	height:100%;
	display: grid;
	grid-template-rows: auto 1fr auto;
	grid-template-columns: 100%;
}

.row{
	display: flex; 
	flex-direction: row; 
}

.column{
	display: flex; 
	flex-direction: column; 
}

.aligncenter {
	align-items: center; 
	justify-content: center;
}

.fullpanel {
	width:100%; 
	height:100%;
}

header {
	width: auto;
}

main {
	width: auto;
}

footer {
	padding: 1rem 1rem 0.2rem;;
}

.footer_container{
	display:flex;
	flex-direction: column-reverse;
}

.title {
	margin-bottom: 0px;
	font-size: 20px; 
	font-weight: bold; 
	line-height: 24px;
	letter-spacing: -0.4px; 
	flex-grow: 0;
	text-shadow: 1px 1px 1px #EEE;
}

.subtitle {
	margin-bottom: 0px;
	font-size: 16px; 
	line-height: 20px;
	letter-spacing: -0.32px; 
	flex-grow: 0;
	align-self: stretch; 
	text-shadow: 1px 0px 1px #EEE;
}


.container {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow: unset;
	background-color: white;
	border: 4px solid transparent;
	border-radius: 15px 15px 0 0 ;
}

.container .btn{
	max-width: 180px;
	margin-top: 10px;
}

.subpage_container{
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	line-height: 14px;
	background-color: white;
	border-radius: 15px 15px 0 0 ;
	overflow: hidden;
}

.backbutton {
	width: 32px;
	height: 32px;
	cursor: pointer;
	transition: transform 0.3s;
}
.backbutton:hover {
	transform: translateX(-3px);
}


.input_div {
	display: flex;
	align-items: center; 
	width:100%; 
	padding: 14px 14px 0 14px; 
}

input{
	background: #FFFFFF;
	padding:0 10px;
	gap: 8px;
	border-radius: 8px;
	border: solid 2px #dadada;
	outline: none;
}

input:focus{
	border: 1px solid #22A2FF;
	height: 24px;
	line-height: 22px;
	caret-color:#22A2FF;
}
input:hover{
	border: 1px solid #22A2FF;
}	

.input_default_desc{
	font-size:14px;
	font-weight:600;
	color:#333333;
	line-height: 16px;
	text-align: center;
}

.wrapper {
	text-align: left;
}
table{
	margin: auto;
	border-collapse: separate;
	border-spacing: 0;
}
tr{
	border-top: 2px solid #d8d8d8;
}
td{
	border-top: 2px solid #d8d8d8;
	border-left:  2px solid #d8d8d8;
	padding: 0 2px 0 10px;
}

tr:first-child td:first-child{
	border-top-left-radius: 10px;
}
tr:last-child td:first-child{
	border-bottom-left-radius: 10px;
	border-bottom: 2px solid #d8d8d8;
}
tr:first-child td:last-child{
	border-top-right-radius: 10px;
	border-right:  2px solid #d8d8d8;
}
tr:last-child td:last-child{
	border-bottom-right-radius: 10px;
	border-bottom: 2px solid #d8d8d8;
}
td:last-child{
	border-right:  2px solid #d8d8d8;
}
/*
tr:nth-child(even) {
	background-color: #dddddd;
}
*/
.table_title{
	font-size:18px;
	font-weight: 600; 
	line-height: normal;		
	letter-spacing: -0.36px;
}

.table_subtitle{
	margin-top: 2px;
	font-size:14px;
	font-weight: normal; 
	letter-spacing: -0.28px;
}


.table_icon{
	min-width:66px;
	height:66px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding:8px;
	margin:0;
}


.head_size
{
	width:260px; 
	height:260px;
}

.head_size_qt
{
	width:170px; 
	height:170px;
}    

.target {
	display: block;
	position:absolute;
	margin: 4px 0 0 0;
}

.alpha-target {
	mask-image: "./assets/images/avatar_ok_mask.png";
	mask-size: 100%, 100%;
	mask-repeat: no-repeat;
	mask-position: center;
	mask-composite: intersect; 
	-webkit-mask-image: "./assets/images/avatar_ok_mask.png";
	-webkit-mask-size: 100%, 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-composite: intersect;                        
}

.floatingcard {
    overflow: hidden;
    background: #f5f5f5;
    box-shadow: 0 5px 20px rgba(0,0,0,.3);
    border-radius: 5px;
    padding: 25px;
    z-index: 2;
}

@media only screen and (max-height: 600px) and (orientation:landscape) {
    .overlay {
        z-index: 99;
        display: flex;
        justify-content: center;
        text-align: center;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.75);
        justify-content: center;
        align-items: center;
        padding: 40px;
    }

    .overlay-content {
        color: white;
        font-size: 3.1em;
    }

    .overlay-content-en {
        font-size: 2.1em;
    }
}

@media only screen and (min-height: 601px) and (orientation:landscape) {
    .overlay {
        display: none;
    }
}

@media only screen and (orientation:portrait) {
    .overlay {
        display: none;
    }
}