/* ---------------------------------------------------
    以 Material v4.0.0 為基礎，變更或新增 style
    http://daemonite.github.io/material/
----------------------------------------------------- */

html, body {
	height: 100%;
	font-size: 1rem;
}

:focus-visible {
	outline: none;
}

a {
	color: #5d707e;
}

a:hover {
	color: #7e94a4;
}

.btn-link:hover {
	background: rgba(0,0,0,.12);
	text-decoration: none;
}

.navbar-brand {
	font-weight: normal;
}

.breadcrumb-item.active {
	font-weight: 600;
}

h5, .h5 {
	font-weight: 500;
}

.row {
	margin-left: 0;
	margin-right: 0;
}

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col, .col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm, .col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md, .col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg, .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl, .col-xl-auto {
	padding-right: 4px;
	padding-left: 4px;
}

@media screen and (max-width: 720px) {
	.btn {
		white-space: normal;
	}
}


/* ---------------------------------------------------
    自訂廣泛使用 Class Style
----------------------------------------------------- */

.shadow {
	-webkit-box-shadow: 0 1px 20px 0 rgba(0,0,0,.16);
    box-shadow: 0 1px 20px 0 rgba(0,0,0,.16);
}

/* Content Basic Settings */
.cbs {
	padding-top: 16px;
	height: 100%;
}

.user-name {
	font-size: 1.15rem;
}

.point {
	cursor: pointer;
}

.text-gray {
	color: rgba(0, 0, 0, 0.54) !important;
}

.text-brown {
  color: #5B483A !important;
}

a.text-brown:active,a.text-brown:focus, a.text-brown:hover {
  color: #4D3D31 !important;
}

.card.border-brown {
	box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.14), 0 3px 4px 0 rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2), inset 0 0 0 1px #5B483A;
}

.border-brown {
    border-color: #5B483A !important;
}

.text-green {
  color: #869923 !important;
}

a.text-green:active,a.text-green:focus, a.text-green:hover {
  color: #73831F !important;
}

.card.border-green {
	box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.14), 0 3px 4px 0 rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2), inset 0 0 0 1px #869923;
}

.border-green {
    border-color: #869923 !important;
}

.list-group-item-pink {
	background-color: #FFCDD3;
    color: rgba(0, 0, 0, 0.87);
}

.bt-auto {
	min-width: auto;
}

/* ---------------------------------------------------
    自訂 Class Style
----------------------------------------------------- */

.ad-status {
	border: 1px solid rgba(0,0,0,.12);
	text-align: center;
	padding: 0.5rem;
	color: rgba(0,0,0,.12);
	margin-bottom: 0.5rem;
}

.late {
	color: #ff9800;
}

.ad-status.late {
	background: #ff9800;
	color: #fff;
}

.sick {
	color: #f44336;
}

.ad-status.sick {
	background: #f44336;
	color: #fff;
}

/* ---------------------------------------------------
    水平垂直置中
    Bootstrap v4.0.0 四個 class 組成
    d-flex flex-column justify-content-center align-items-center
----------------------------------------------------- */

.flex-justify-align-center {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: column !important;
	flex-direction: column !important;
	-ms-flex-pack: center !important;
	justify-content: center !important;
	-ms-flex-align: center !important;
	align-items: center !important;
}

.container-fluid {
	padding-left: 16px;
	padding-right: 16px;
}

.table-auto th, .table-auto td {
	padding: 12px 8px;
}

.min-w-650 {
	min-width: auto;
}

@media(min-width: 1024px){
	.table-auto th, .table-auto td {
		padding: 12px 32px;
	}
	.min-w-650 {
		min-width: 650px;
	}	
}

.btn-second {
	background: #1891ce !important;
	font-size: 18px;
	font-weight: 600;
}

.list-group-item {
	padding: 16px 8px;
}

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

.st-list .card {
	cursor: pointer;
	height: 100%;
}

.st-list .card:hover {
	/* background: #f5f5f5; */
}

.con {
  /* container-type: inline-size; */
  /* container: con / inline-size; */
}

  .imgst {
		height: 220px;
  }


/* @container con (max-width: 1024px) {
  .imgst {
    height: 130cqw;
  }
} */

.col-stu {
	width: 46% !important;
	margin-right: 0 !important;
}

@media(min-width: 576px) {
	.col-stu {
		width: 30% !important;
	}
	.flex-rc {
		flex-direction: row;
	}
	.list-group-item {
		padding: 16px;
	}
	
}

@media(min-width: 768px) {
	.col-stu {
		width: 22% !important;
	}
}

@media(min-width: 1024px) {
	.col-stu {
		width: 18% !important;
	}
}

.cdk-global-overlay-wrapper .cdk-overlay-pane {
  max-width: 700px !important;
	margin: auto 16px;
  /* position: relative !important;
  top: 148px !important;
	left:12px !important; */
}

/* @media(min-width: 686px) {
	.cdk-overlay-pane {
		top: 48px !important;
		left:0px !important;
	}	
}	 */

.assistant {
	color: #5eaafb; 
	background: #d8ebff; 
	border-radius: 4px; 
	padding: 4px 8px; 
	font-size: 12px; 
	font-weight: 600;
}

ul li:nth-child(odd), tbody tr:nth-child(odd) {
	background: #f6f6f6;
}

.list-group-item {
	border: none !important;
}

.col-span-5 {
	grid-column: span 5 / span 5;
}

.col-span-4 {
	grid-column: span 4 / span 4;
}

.titl {
	background: #65b2ef;
	border-radius: 25px;
	padding: 4px 7px;
	color: #fff;
	width: 32px;
	height: 32px;
	/* line-height: 32px; */
	font-weight: 600;
}

.list-group-item.main-bg-color, .second-page-header {
	border-radius: 8px 8px 0 0;
}

.custom-checkbox {
	display: none;
}

/* 自訂checkbox外觀 */
.custom-checkbox + .form-check-label {
	position: relative;
	padding-left: 30px; /* 留白讓我們放置自訂勾選框 */
	cursor: pointer;
}

/* 自訂勾選框 */
.custom-checkbox + .form-check-label::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 20px;
	height: 20px;
	border: 2px solid #65b2ef;
	border-radius: 4px; /* 使其邊角圓滑 */
	background-color: #fff;
}

/* 當checkbox被勾選時改變樣式 */
.custom-checkbox:checked + .form-check-label::before {
	background-color: #65b2ef; /* 勾選後變綠色 */
	border-color: #65b2ef;
}

/* 當checkbox被勾選時變換標誌 */
.custom-checkbox:checked + .form-check-label::after {
	content: '';
	position: absolute;
	left: 2px;
	top: 2px;
	width: 16px;
  height: 16px;
	background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 width=%2224%22 height=%2224%22%3E%3Cpath fill=%22%23fff%22 d=%22M9 19l-7-7 1.41-1.41L9 16.17l11.59-11.59L22 6l-13 13z%22/%3E%3C/svg%3E');
  background-size: contain;
}

.card-body .card-stu-name {
	border-bottom-color: #65b2ef !important;
}

.breadcrumb {
	background-color: #d6edff;
	border-radius: 8px 8px 0 0;
	margin-bottom: 24px;
}

button.mat-raised-button {
	border: 2px solid #65b2ef !important;
}

.btn-group, .btn-group-vertical {
	border-radius: 6px;
}

.list-group-item.active {
	background-color: #f6f6f6;
}

.mat-raised-button[disabled][disabled] {
	border: 2px solid #c6c6c6 !important;
}

.w-b1, .w-b2 {
	width: 100%;
}

@media(min-width: 420px) {
	.w-b1 {
		width: 122px;
	}
	.w-b2 {
		width: auto;
	}
}

.imgst .pic {
	background-repeat: no-repeat;
}