/* desktop size */
nav {
	z-index : 10;
	height : 5em;
}
nav .dropdown-menu > li > a { /* for language switching and state switching */
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
}
nav .dropdown-menu a:hover { /* for language switching and state switching */
  background-color: #d0d0d0;
  text-decoration: none;
  color: #fff;
}
nav .header_logo img {
	height : 50px;
}
nav .navbar-title {
	font-size: 18pt;
	line-height: 1.1;
}
nav .header_site_menu {
	width  : 4em;
	/*text-align: center;*/
	cursor : pointer;
}
nav .header_site_menu img {
	object-fit: contain;
	height: 40px;
	min-width : 40px;
}
nav .header_system_name_long,
nav .header_system_name_short {
	font-size : 18pt;
	font-weight: bold;
}
nav .header_system_module_name{
	font-size : 16pt;
}


footer {
	min-height: 150px;
    width: 100%;
	font-size : 7pt;
}
footer .footer_top_panel {
	padding-top: 20px;
	padding-bottom: 20px;
}
footer .qr_content{
	font-size : 8pt;
}
footer .qr_content img{
	padding : 1px;
}
footer .sponcer_content{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
footer .sponcer_content img{
	height: 50px;
	margin-left : 10px;
}


.login_content {
	background-size: cover;
	background-position: 50% 50%, 50% 50% !important;
    background-attachment: scroll, scroll !important;
    background-repeat: no-repeat, no-repeat !important;
	
	height: calc(100% - 200px);
	min-height: 650px;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-top : -10px;
	margin-bottom : -10px;
	align-items: center;
}
.login_content .container{
	max-width: 960px;
}
.login_content .login_top_bg {
	z-index : -1;
	background-size: 100% 100%;
    background-position-x: center;
	
	width : 100%;
	height : 80px;
	position: absolute;
}
.login_content .login_bottom_bg {
	z-index : -1;
	background-color: #ffffff80;
	width : 100%;
	top : 80px;
	height : 500px;
	position: absolute;
	border-bottom-left-radius : 10px;
	border-bottom-right-radius : 10px;
}
.login_content .card-title img{
	height : 40px;
}
.login_content .card_center_icon img {
	height : 50px;
	margin-top: -10px;
	margin-left: 6px;
}
.login_content .main_login_body {
	z-index: 20;
	
	position: absolute;
	top: calc(50% - 22em);
    width: 110%;
	min-height : 40em;
    margin-left: auto;
	margin-right: auto;
	left: -5%;
	border: none;
}
.login_content .main_login_body .card-body {
	padding: 3em 3em 3em 3em;
}
.login_content .card_center_system_name,
.login_content .main_login_body select, 
.login_content .main_login_body input, 
.login_content .main_login_body button {
	font-size : 16pt;
	text-align: center;
	text-align-last: center;
	
}
.login_content .card_center_system_name {
	margin-top : 30px;
	padding-top : 20px;
	padding-bottom : 20px;
	font-weight : bold;
}
.login_content .sub_login_left {
	right: 0;
	border-top-left-radius : 10px;
	border-bottom-left-radius : 10px;
}
.login_content .sub_login_right {
	left: 0;
	border-top-right-radius : 10px;
	border-bottom-right-radius : 10px;
	margin-bottom: 15px;
}
.login_content .sub_login_body{
	min-height : 400px;
}
.login_content .sub_login_body .card_title h5 {
	color: #fff;
}
.login_content .sub_login_body .card_title {
	height: 50px;
}
.login_content .sub_login_body .card_content {
	height : 250px;
    display: flex;
	align-items: top;
}
.login_content .sub_login_body .card_content p{
	clear: both;
} 


.menu_bar {
	min-height: 3em;
    padding: 1em 2em .5em 2em;
}
.menu_bar .menu_bar_left {
	display: inline-block;
	padding-left: 1em;
}
.menu_bar .menu_bar_right {
	float: right;
	display: flex;
	align-items: center;
}
.menu_bar .menu_bar_title {
	font-size : 21pt;
}
.menu_bar .menu_bar_right a {
	/*font-size : 14pt;*/ /*remarked by lai after uppercase all the label*/
	padding : 0 10px;
}
.menu_bar .menu_bar_right img {
	padding : 0 10px;
}
.menu_bar .menu_author {
	font-size: 21px;
	line-height: 2;
	display : inline;
}
.menu_bar #hide_menu_btn, .unauthorized_user_icon_div {
	display: none;
}
.menu_bar .dropdown_menu {
	width: max-content;
	min-width: 160px;
}
.menu_bar .dropdown_menu .dropdown_item {
	padding-bottom: 5px;
}
.menu_bar .dropdown_menu .dropdown_item {
	width: 230px;
}
.menu_bar .dropdown_menu .dropdown_item i {
	width: 50px;
}
.menu_bar .dropdown_menu #logout_link {
	background-color: #cecece;
}
.menu_bar .dropdown_menu .theme_setting_split {
	border-left: 1px solid #cecece;
}


.menu_collapse {
	display: none;
	position: absolute;
	z-index: 1010;
	width: 100%
}
.menu_collapse span{
	color: white;
}
.menu_collapse img{
	background-color: white;
}
.menu_collapse .menu_item, .menu_item a{
	color: white;
	max-width: 300px;
}
.menu_collapse .header_menu_row1 {
	padding: 2em 4em;
	background-color: #221E4B;
}
.menu_collapse .header_menu_row1 .menu_item{
	padding: 8px;
	padding-right: 0;
	margin-right: -3em;
	font-size: 13pt;
}
.menu_collapse .header_menu_row2 {
	padding: 2em 4em;
}
.menu_collapse .header_menu_row2 .menu_item{
	padding: 10px;
	padding-right: 0;
	margin-right: -3em;
	font-size: 12pt;
}
.menu_collapse .header_menu_row3 {
	padding: 2em 4em;
}
.menu_collapse .header_menu_row3 .menu_item{
	padding: 10px;
	padding-left: 0;
	font-size: 12pt;
}
.menu_collapse .header_menu_row1 .menu_item:hover, 
.menu_collapse .header_menu_row2 .menu_item:hover, 
.menu_collapse .header_menu_row3 .menu_item:hover, 
.menu_collapse .menu_item:hover a, 
.menu_collapse .menu_item_active, 
.menu_collapse .menu_item_active a{
	background-color: white;
	color: black;
}


/* Sub Menu */
.page_sub_menu {
	background-color: #3e444f;
	float: left;
	height: 100%;
	border: 1px solid;
 	border-radius: 1em;
}
.page_sub_menu .sub_menu_hide_show {
	height: 100%;
	background-color: #3e444f;
	border-left: 1px solid;
	border-right: 1px solid;
}
.page_sub_menu .sub_menu_content {
	display: flex;
	border-top: 1px solid #30363f;
	border-left: 1px solid #30363f;
}
.page_sub_menu #sub_menu_show, .page_sub_menu #sub_menu_hide {
	height: 5em;
	background-color: #6b727f;
	border-top-left-radius: 1em;
	border-top-right-radius: 1em;
}
.page_sub_menu .sub_menu_hide_show  a {
	display: flex;
	height: 50px;
	color: #dfe4ef !important;
	text-decoration: none;
}
.page_sub_menu .sub_menu_focus {
	background-color: #4f565f;
	border-left: 3px solid #29c6d6 !important;
	border-right: 1px solid;
}
.page_sub_menu .sub_menu_focus .sub_menu_icon_frame {
	width: 4.37em;
}
.page_sub_menu .sub_menu_hide_show .sub_menu_header {
	margin: auto;
	color: #adafb2 !important;
}
.page_sub_menu .sub_menu_hide_show .sub_menu_header_icon {
	height: 2em;
	width: 2em;
	margin: 0.5em auto;
}
.page_sub_menu .sub_menu_hide_show .sub_menu_header_text {
	margin-bottom: 0.5em;
	text-align: center;
	font-weight: 500;
	font-size: 12px;
}
.page_sub_menu .sub_menu_hide_show .sub_menu_icon_frame {
	display: flex;
	width: 4.5em;
}
.page_sub_menu .sub_menu_hide_show .sub_menu_icon {
	height: 2em;
	width: 2em;
	margin: auto;
	text-align: center;
}
.page_sub_menu .sub_menu_hide_show .sub_menu_text_frame {
	display: flex;
	width: 12em;
	border-left: 1px solid #30363f;
}
.page_sub_menu .sub_menu_hide_show .sub_menu_text {
	margin: auto 3%;
}
.page_sub_menu #sub_menu_show_footer, .page_sub_menu #sub_menu_hide_footer {
	height: 1.5em;
	background-color: #6b727f;
	border-top: 1px solid #30363f;
	border-bottom-left-radius: 1em;
	border-bottom-right-radius: 1em;
}
.page_sub_menu .sub_menu_hide_show .sub_menu_comp_add {
	float: right;
	margin: auto;
	padding: 0 0 0 0.5em;
	color: #29c6d6;
}
.page_sub_menu .sub_menu_hide_show .sub_menu_comp_add_frame {
	display: flex;
	margin: 0 0.5em;
}

.page_custom_sub_menu {
	float: left;
	position: relative;
	margin-right: 1.5rem;
	z-index: 1;
}

.page_custom_sub_menu .custom-submenu-container {
	width: 4rem;
	min-width: 4rem;
}

.page_custom_sub_menu .custom-submenu-section-container {
	position: fixed;
	display: flex;
}

.page_custom_sub_menu .custom-submenu-section-fab {
	margin-right: 1rem;
}

.page_custom_sub_menu .custom-submenu-fab {
	background-color: #3e444f;
	width: 4rem;
	min-width: 4rem;
	height: 4rem;
	border-radius: 50%;
	box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
}

.page_custom_sub_menu .custom-submenu-fab:hover {
	background-color: #4f555f;
}

.page_custom_sub_menu .custom-submenu-list-container {
	display: none;
	/* height: calc(100vh - 350px); */
	max-height: calc(100vh - 350px);
	min-height: 250px;
	height: 100%;
	width: 80vw;
	overflow-x: hidden;
	overflow-y: auto;
}

.page_custom_sub_menu .custom-submenu-list-container.custom-submenu-list-container-open {
	display: block;
}

.page_custom_sub_menu .custom-submenu-list {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	height: 100%;
	width: 100%;
	background-color: #3e444f;
	color: #dfe3ee;
	overflow-x: hidden;
	overflow-y: auto;
	box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
}

.page_custom_sub_menu .custom-submenu-item {
	display: flex;
	align-items: center;
	max-height: 61px;
	min-height: 55px;
	background-color: #3e444f;
	color: #dfe3ee;
	border-top: 1px solid #dfe3ee;
    border-right: 1px solid #dfe3ee;
	height: 61px;
}

.page_custom_sub_menu .custom-submenu-item:hover {
	background-color: #4f555f;
}

.page_custom_sub_menu .custom-submenu-item.custom-submenu-item-focus {
	background-color: #a79241;
}

.page_custom_sub_menu .custom-submenu-item:last-child {
	border-bottom: 1px solid #dfe3ee;
}

.page_custom_sub_menu .custom-submenu-item .custom-sub-menu-item-left {
	flex: 1;
	display: flex;
	align-items: center;
	height: 100%;
	color: #dfe3ee;
	padding: 1rem;
	padding-right: 0.5rem;
}

.page_custom_sub_menu .custom-submenu-item .custom-sub-menu-item-right {
	display: flex;
	align-items: center;
	height: 100%;
	padding: 1rem;
	padding-left: 0.5rem;
}

.page_custom_sub_menu .custom-submenu-item .custom-submenu-item-icon {
	margin-right: 1rem;
	width: 35px;
	text-align: center;
}


.content_wrapper {
	min-height: calc(100vh - 370px);
	overflow: hidden;
}
.content_wrapper .body_container {
	padding-left : 0em;
	padding-right : 0em;
}

@media only screen and (max-width: 767px) {
	.page_custom_sub_menu {
		margin-right: 1rem;
	}

	.page_custom_sub_menu .custom-submenu-fab {
		width: 3.5rem;
		min-width: 3.5rem;
		height: 3.5rem;
	}

	.page_custom_sub_menu .custom-submenu-fab .custom-submenu-fab-icon {
		width: 1.6rem;
		height: 1.6rem;
	}

	.page_custom_sub_menu .custom-submenu-list {
		height: unset;
	}

	.page_custom_sub_menu .custom-submenu-item {
		height: 55px;
	}

	.page_custom_sub_menu .custom-submenu-item .custom-sub-menu-item-left {
		padding: 0.5rem;
	}

	.page_custom_sub_menu .custom-submenu-item .custom-sub-menu-item-right {
		padding: 0.5rem;
	}
}

@media only screen and (max-width: 575px) {
	.page_custom_sub_menu .custom-submenu-list-container {
		width: 65vw;
	}
}


/* mobile size */
@media only screen and (max-width: 767px) {
	.login_content {
		padding-top: 15px;
		border-radius : 0;
		display:block;
		height: max-content;
	}
	.login_content .main_login_body {
		background-image : none !important;
		position: inherit; 
		top: 5px; 
		width: 100%;
		left: 0%;
		margin-right: 0;
		margin-left:  0;	
	}
	.login_content .main_login_body, 
	.login_content .sub_login_left, 
	.login_content .sub_login_right {
		margin-top: 15px; 
		position: inherit;
		left : 0;
		right : 0;
		border-radius : 10px;
	}
	
	
	.menu_bar {
		min-height: 4em;
		padding: 1em 0 .5em 0;
	}
	.menu_bar .menu_bar_title{
		font-size: 11pt;
	}
	.menu_bar .menu_bar_left {
		width: 200px;
	}
	.menu_bar .menu_author {
		display : none;
	}
}



/* ------------------ specify module only ------------------ */
/* Dashboard Only */
.dashboard_content {
	margin-right: 1.5em;
	margin-left: 1.5em;
	padding-left : 0em;
	padding-right : 0em;
}
.dashboard_content .dashboard_sort {
	font-size: 12pt;
	margin-top : -15px;
}
.dashboard_content .dashboard_body {
	margin-top: 20px;
	width: 100%;
}
.dashboard_content .dashboard_menu_item {
	position: relative;
	padding: 3px;
	height : 62px;
	border-bottom: 1px solid #c1c1c1;
}
.dashboard_content .dashboard_menu_item img{
	position: absolute;
	top: 10px;
}
.dashboard_content .dashboard_menu_item span{
	position: absolute;
	top: 5px;
	left: 50px;
	font-size: 11pt;
	color: #555555;
    display: flex;
    align-items: center;
    height: 44px;
}
.dashboard_content .dashboard_menu_item_icon {
	position: relative;
	width: 35px;
}
.dashboard_content .dashboard_menu_item_icon img{
	position: absolute;
	top: 5px;
	right: 0px;
}


.case_searchbar_container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.case_searchbar_search_container {
	display: flex;
}

.case_searchbar_field_container {
	flex: 1;
}

.case_searchbar_btn_container .btn {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-left: 0.5rem;
	height: 100%;
}

.case_searchbar_left_container {
	flex-basis: 25%;
	justify-content: flex-start;
}

.case_searchbar_center_container {
	flex-basis: 50%;
	margin-left: 1rem;
	margin-right: 1rem;
}

.case_searchbar_right_container {
	flex-basis: 25%;
	justify-content: flex-end;
}

@media only screen and (max-width: 767px) {
	.case_searchbar_container {
		margin-bottom: 0.75rem;
	}

	.case_searchbar_left_container {
		flex-basis: 100%;
		justify-content: flex-start;
	}

	.case_searchbar_center_container {
		flex-basis: 100%;
		margin-left: 0;
		margin-right: 0;
	}

	.case_searchbar_right_container {
		flex-basis: 100%;
		justify-content: flex-end;
	}

	.case_searchbar_search_container {
		flex-wrap: wrap;
	}

	.case_searchbar_field_container {
		flex-basis: 100%;
	}

	.case_searchbar_btn_container {
		flex-basis: 100%;
	}

	.case_searchbar_btn_container .btn {
		margin-top: 0.5rem;
		margin-left: 0;
	}
}

.custom_subheader_label {
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
}

.schedule-item-container {
	display: flex;
	flex-wrap: wrap;
	border: 1px solid rgba(193, 193, 193, 0.5);
    border-radius: 0.25em;
    background-color: #fff;
    border-collapse: collapse;
    overflow: hidden;
    font-weight: 400;
	border-bottom: 4px solid #f7bf4f;
	overflow: auto;
}

.schedule-item-container .schedule-item-left-content {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 160px;
	padding: 0.75rem;
}

.schedule-item-container .schedule-item-right-content {
	display: flex;
	flex: 1;
	flex-direction: column;
}

.schedule-item-container .schedule-item-bottom-content {
	display: flex;
	width: 100%;
	flex-direction: column;
}

.schedule-item-container .schedule-datetime-info-container .schedule-datetime-date-container {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 0.25rem;
	color: #2a64b7;
}

.schedule-item-container .schedule-datetime-info-container .schedule-datetime-time-container {
	display: flex;
	justify-content: center;
}

.schedule-item-container .schedule-datetime-info-container .schedule-datetime-day-container {
	font-size: 2.5rem;
	margin-right: 0.5rem;
}

.schedule-item-container .schedule-datetime-info-container .schedue-datetime-text-container {
	font-size: 0.875rem;
}

.schedule-item-container .schedule-datetime-info-container .schedule-datetime-time-container .schedule-datetime-time-content {
	color: #fff;
    font-size: 0.813rem;
    font-style: italic;
    background-color: #2a64b7;
    border-radius: 0.25rem;
    padding: 2px 10px;
}

.schedule-item-container .schedule-item-right-content .schedule-info-row {
	display: flex;
	padding: 0.25rem;
}

.schedule-item-container .schedule-item-right-content .schedule-info-row .schedule-info-label, 
.schedule-item-container .schedule-item-right-content .schedule-info-row .schedule-info-value, 
.schedule-item-container .schedule-item-right-content .schedule-info-row .schedule-info-message {
	padding: 0px 6px;
}

.schedule-item-container .schedule-item-right-content .schedule-info-row .schedule-info-label {
    font-weight: 700;
    flex-basis: 30%;
    max-width: 150px;
    min-width: 120px;
}

.schedule-item-container .schedule-item-right-content .schedule-info-row:not(:first-child), .case-schedule-virtual-mention-container {
    border-top: 1px solid rgba(193, 193, 193, 0.5);
}

.schedule-item-container .schedule-item-right-content .schedule-info-row .schedule-btn-list-container {
	display: flex;
	width: 100%;
	padding-left: 0;
}

.schedule-item-container .schedule-btn-list-container .schedule-btn-container:not(:first-child) {
	margin-left: 0.3rem;
}

@media only screen and (max-width: 991px) {
	.schedule-item-container .schedule-item-left-content {
		width: 100%;
		border-bottom: 1px solid rgba(193, 193, 193, 0.5);
	}

	.schedule-item-container .schedule-item-right-content .schedule-info-row {
		flex-wrap: wrap;
	}

	.schedule-item-container .schedule-item-right-content .schedule-info-row .schedule-info-label {
		flex-basis: 100%;
		max-width: unset;
	}

	.schedule-item-container .schedule-item-right-content .schedule-info-row .schedule-info-label-separator {
		display: none;
	}

	.schedule-item-container .schedule-item-right-content .schedule-info-row .schedule-btn-list-container {
		flex-wrap: wrap;
	}

	.schedule-item-container .schedule-item-right-content .schedule-info-row .schedule-btn-container,
	.schedule-item-container .schedule-item-right-content .schedule-info-row .schedule-btn-container .btn {
		width: 100%;
	}

	.schedule-item-container .schedule-item-right-content .schedule-info-row .schedule-btn-container:not(:first-child) {
		margin-top: 0.25rem;
	}

}

.spacer {
    flex-grow: 1;
}

.no-record-container {
    background-color: #efefef;
    padding: 0.75rem;
    border-radius: 0.25rem;
}

.custom-control-label::before {
    position: absolute;
    top: 3px;
    left: -21px;
    display: block;
    width: 1rem;
    height: 1rem;
    pointer-events: none;
    content: "";
    background-color: #fff;
    border: #adb5bd solid 1px;
}

.custom-control-label::after {
    position: absolute;
    top: 2px;
    left: -22px;
    display: block;
    width: 16px;
    height: 16px;
    content: "";
    background: no-repeat 50%/50% 50%;
}

.green-text {
    color: #008000;
}

.text-underline {
	text-decoration: underline;
}

.text-bold {
	font-weight: bold;;
}

.chart-container {
	overflow: auto;
}

.statistics-chart-container {
	min-width: 350px;
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

.custom-legend-container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.custom-chart-legend-item {
	display: flex;
	margin-bottom: 0.5rem;
	flex-basis: 33%;
}

.custom-chart-legend-item:not(:last-child) {
	padding-right: 1rem;
}

.custom-chart-legend-item .custom-chart-legend-color-container {
	width: 20px;
	height: 20px;
	min-width: 20px;
	min-height: 20px;
}

.custom-chart-legend-item .custom-chart-legend-color-wrapper {
	padding-right: 0.3rem;
}

.chart-container {
	page-break-inside: avoid;
}

@media only screen and (max-width: 991px) {
	.custom-chart-legend-item {
		flex-basis: 49.5%;
	}
}

@media only screen and (max-width: 767px) {
	.custom-chart-legend-item {
		flex-basis: 99%;
	}

	.custom-chart-legend-item:not(:last-child) {
		padding-right: 0rem;
	}
}

/* Printing PDF css */
.print-body {
    background-color: #fff;
    color: #000;
    font-family: Arial, sans-serif !important;
    /* padding:2%; */
}

.print-table {
	width: 100%;
}

.print-table table,
.print-table thead th,
.print-table tbody td {
	border: 1px solid black !important;
}

.print-table td, 
.print-table th {
	padding: 0.5rem;
}

.print-table .print-table-title-text {
    font-size: 1.8rem;
    font-weight: bold;
}

.print-table .print-table-section {
    /* width: 100%; */
}

.print-table .print-table-section .print-table-sub-title {
    font-weight: bold;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    padding: 10px 0 10px 0%;
    margin-top: 1%;
    font-size: 1.2rem;
}

.print-table .print-table-label {
    width: 30%;
    text-align: right;
    padding-right: 1% !important;
    font-weight: bold;
    vertical-align: top;
}

.print-table-sub-body .print-sub-table td {
    padding: 3px;
}

.print-table-sub-body .print-table-table-list {
    border-collapse: collapse;
    margin-top: 1rem;
}

.print-table-sub-body .print-table-table-list th {
    background-color: grey;
    color: white;
    padding: 4px;
}

.print-table-sub-body .print-table-table-list td {
    border: 1px solid grey;
    padding: 4px;
    vertical-align: top;
}

.print-table-chart-container {
    margin-top: 1.5rem;
}

.print-table-chart-container .chart-img-container {
    text-align: center;
}

.print-table-chart-container img {
    width: 100%;
}

.print-pdf-header {
    /* font-weight: bold; */
    font-family: 'Times New Roman', Times, serif;
    /*font-size: 20px;*/
    font-size: 130%;
    margin-bottom: 5px;
    text-align: right;
}

.custom-flex-section-container {
	display: flex;
	margin-bottom: 1rem;
}

.custom-flex-section-container-reverse {
	display: flex;
	flex-flow: row-reverse;
	margin-bottom: 1rem;
}

.custom-flex-section-container .custom-flex-section:not(:last-child) {
	margin-right: 0.5rem;
}

.custom-flex-section-container-reverse .custom-flex-section:not(:first-child) {
	margin-right: 0.5rem;
}

.no-border {
	border: none;
}

@media only screen and (max-width: 767px) { 
	.custom-flex-section-container,
	.custom-flex-section-container-reverse {
		flex-wrap: wrap;
	}

	.custom-flex-section-container .custom-flex-section:not(:last-child) {
		margin-right: 0rem;
		margin-bottom: 0.5rem;
	}
	
	.custom-flex-section-container-reverse .custom-flex-section:not(:first-child) {
		margin-right: 0rem;
		margin-top: 0.5rem;
	}

	.custom-flex-section-container .custom-flex-section,
	.custom-flex-section-container-reverse .custom-flex-section {
		width: 100%;
	}

	.custom-flex-section-container .btn,
	.custom-flex-section-container-reverse .btn {
		width: 100%;
	}
}

.custom-listing-legend-header {
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
	margin-left: 1rem;
	margin-right: 1rem;
}

.custom-listing-legend-container {
	border-top: 1px solid rgba(0,0,0,.125);
	padding: 1rem;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

.custom-listing-legend-container-orange {
	border-top: 1px solid #f78552;
}

.custom-listing-legend-container-less-padding-bottom {
	padding-bottom: 0.5rem;
}

.custom-legend-item {
	display: flex;
	align-items: center;
	flex: 1;
}

.custom-legend-item:not(:last-child) .custom-legend-text {
	padding-right: 0.5rem;
}

.custom-legend-item .custom-legend-icon {
	margin-right: 1rem;
}

@media only screen and (max-width: 767px) {
	.custom-legend-item {
		flex-basis: 100%;
	}
}

.listing-legend-item {
	display: flex;
	align-items: center;
	flex-basis: 25%;
	padding-right: 1rem;
	margin-bottom: 0.5rem;
}

.listing-legend-item-icon {
	width: 50px;
	margin-right: 0.5rem;
	border: 1px solid rgba(0,0,0,.125);
	padding: 3px;
	display: flex;
	justify-content: center;
}

.listing-legend-item-icon img {
	max-width: 21px;
}

@media only screen and (max-width: 1199px) {
	.listing-legend-item {
		flex-basis: 33.33%;
	}
}

@media only screen and (max-width: 767px) {
	.listing-legend-item {
		flex-basis: 50%;
	}
}

@media only screen and (max-width: 575px) {
	.listing-legend-item {
		flex-basis: 100%;
	}
}

.custom-listing-icon-container img {
	max-width: 21px;
}

.no-bottom-border-radius {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.no-top-border-radius {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

.no-margin {
	margin: 0;
}

.custom-table-icon-action-container {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}

.custom-table-icon-action-container .custom-table-icon-container {
	margin-bottom: 0.5rem;
}

.custom-table-icon-action-container .custom-table-action-container {
	flex-grow: 1;
}

@media only screen and (max-width: 767px) {
	.custom-table-icon-action-container .custom-table-icon-container,
	.custom-table-icon-action-container .custom-table-action-container {
		width: 100%;
	}
}

.custom-comment-container {
	max-height: 400px;
	overflow-y: auto;
}

.custom-comment-item {
	display: flex;
	justify-content: left;
}

.custom-comment-item:not(:first-child) {
	margin-top: 0.5rem;
}

.custom-comment-item .custom-comment-body {
	padding: 0.5rem;
	background-color:#eef4f9;
	border-radius: 0.5rem;
	width: 80%;
	border: 1px solid #c5d9e8;
}

.custom-comment-item.custom-comment-owner {
	justify-content: flex-end;
}

.custom-comment-item.custom-comment-owner .custom-comment-body {
	background-color:#C2FCDC;
}

.custom-comment-item .custom-comment-top {
	display: flex;
	margin-bottom: 0.5rem;
	font-style: italic;
	color: #747476;
}

.custom-comment-item .custom-comment-top .custom-comment-top-left {
	flex-grow: 1;
	padding-right: 0.5rem;
	font-weight: bold;
}

@media only screen and (max-width: 767px) {
	.custom-comment-item .custom-comment-body {
		width: 90%;
	}
}

.note-msg {
	font-style: italic;
}

.custom-note-msg-list {
	padding-left: 15px;
}

/* Edit PDF */
.custom-edit-pdf-container {
	display: flex;
	min-height: 100vh;
	max-height: 100vh;
	overflow-x: auto;
}

.custom-edit-pdf-container .custom-edit-pdf-container-left {
	height: 100vh;
	border-radius: 0;
	min-width: 250px;
	max-width: 250px;
}

.custom-edit-pdf-container .custom-edit-pdf-container-right {
	height: 100vh;
	width: 100%;
	overflow: auto;
	padding-top: 1rem;
	padding-bottom: 1rem;
}

.custom-edit-pdf-container .pdf-page-container {
	margin-left: auto;
	margin-right: auto;
}

.edit-pdf-add-btn-container {
	margin-top: 1rem;
}

.custom-timesheet-listing-title-container {
	text-align: center;
	font-weight: bold;
	margin-bottom: 1rem;
}

.custom-timesheet-table-date-container {
	font-weight: bold;
	margin-bottom: 0.5rem;
}

.custom-timesheet-no-information-td {
	background-color: #f7f7f7;
}

/* Custom listing calendar */
.custom-listing-calendar-container {
	display: flex;
	flex-wrap: wrap;
}

.custom-listing-calendar-month-current {
	background-color: #fff3cd;
}

.custom-listing-calendar-month-container {
	width: 25%;
}

.custom-listing-calendar-month-inner-container {
	margin: 1rem;
}

.custom-listing-calendar-month-title {
	text-align: center;
	font-weight: bold;
}

.custom-listing-calendar-table {
	width: 100%;
}

.custom-listing-calendar-day {
	background-color: #FFFFFF;
	text-align: center;
	border: 1px solid black;
}

.custom-listing-calendar-day-holiday {
	background-color: #FFDDDD;
}

.custom-listing-calendar-day-case {
	background-color: #99DBE9;
}

.custom-listing-calendar-day-hover:hover {
	cursor: pointer;
	background-color: #ff8000;
}

.custom-listing-calendar-day-current {
	background-color: #FCCF1F;
}

.custom-listing-calendar-day-title {
	background-color: #2290ff;
	color: #FFFFFF;
}

.custom-listing-calendar-day-none {
	border: none;
	background: transparent;
}

@media only screen and (max-width: 1199px) {
	.custom-listing-calendar-month-container {
		width: 33.33%;
	}
}

@media only screen and (max-width: 767px) {
	.custom-listing-calendar-month-container {
		width: 50%;
	}
}

@media only screen and (max-width: 575px) {
	.custom-listing-calendar-month-container {
		width: 100%;
	}
}

.custom-inline-btn {
	margin-left: 1rem;
}

.custom-inline-select-container {
	padding-left: 1rem;
	padding-right: 0rem;
}

@media only screen and (max-width: 767px) {
	.custom-inline-btn {
		margin-left: 0rem;
		margin-top: 0.5rem;
	}

	.custom-inline-select-container {
		padding-left: 0;
	}
}

.listing-sub-text {
	font-style: italic;
	color: #808080;
}

.causebook-pdf-table td {
	padding: 0.5rem;
	background-color: grey;
}

.causebook-pdf-table td.pdf-td-active {
	background-color: unset;
	cursor: pointer;
}

.causebook-pdf-table td.pdf-td-active:hover {
	background-color: #d3d3d3;
}

/* Animation */
.transition-background-ease-in-out {
	-webkit-transition: background-color 0.15s ease-in-out;
    -moz-transition: background-color 0.15s ease-in-out;
    -ms-transition: background-color 0.15s ease-in-out;
    -o-transition: background-color 0.15s ease-in-out;
    transition: background-color 0.15s ease-in-out;
}

.transition-ease-in {
	-webkit-transition: opacity 0.15s ease-in;
    -moz-transition: opacity 0.15s ease-in;
    -ms-transition: opacity 0.15s ease-in;
    -o-transition: opacity 0.15s ease-in;
    transition: opacity 0.15s ease-in;
}

.transition-all-ease-in {
	-webkit-transition: all 0.15s ease-in;
    -moz-transition: all 0.15s ease-in;
    -ms-transition: all 0.15s ease-in;
    -o-transition: all 0.15s ease-in;
    transition: all 0.15s ease-in;
}

.submenu-animation-fade-in {
	animation: fadeIn 0.15s ease-in-out;
}

.submenu-animation-fade-out {
	animation: fadeOut 0.15s ease-in-out;
}

.border-right-5{
	border-right-width: 5px !important;
}

.border-left-5{
	border-left-width: 5px !important;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes fadeOut {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

tbody > tr.highlight {
  background-color: rgba(0, 0, 0, 0.15);
}

.pdf-selectable tr {
	cursor: pointer;
}

.custom_card_efile_search {
	position: absolute;
	top: 50%;
	left: 28.5%;
	right: 23.5%;
	margin: -50px 0 0 -50px;
	color: black;
	font-size: 18pt;
	padding: 1.5em;
	border-radius: .25rem;
	border: 1px solid rgba(0, 0, 0, 0.125);
}

* {
	scrollbar-width: thin;
}
::-webkit-scrollbar {
  width: 9px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background-color: rgba(155, 155, 155, 0.5);
  border-radius: 20px;
  border: transparent;
}

.efile-search-ul {
	padding-left: 0px;
}

.att-name-item, .selected-pages-items, .att-pages-prices {
	display: block;
}

@media only screen and (max-width: 767px) {
	.att-name-item, .selected-pages-items, .att-pages-prices {
		display: list-item;
    	list-style-type: none; 
	}

	.icon-att-header, .icon-att-view {
		display: none !important;
	}
}

@media only screen and (max-width: 800px) {
	.efile-search-timer {
		display: flex;
		flex-flow: wrap;
		width: 100%;
		margin-bottom: 1.25rem;
	}
}		