@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap");

html, body {
    /* 'pan-y' restricts touch movements to the vertical axis only (up/down scrolling). */
    /* This completely disables iOS native horizontal edge-swipe guestures (swipe right to go back), */
    /* preventing accidental data loss when dentists operate on the touchscreen. */
    touch-action: pan-y;
}

body {
    font-family: "Lato", "Noto Sans SC", "Microsoft JhengHei", 微軟正黑體, 微軟雅黑體, 細明體_HKSCS, Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0.05rem;
    --color-grey: #555555;
    --color-green: #066f6a;
    --color-lightgreen: #72a324;
    --color-cyan: #1da29b;
    --color-orange: #f86612;
    --color-red: #c7215e;
    --color-blue: #094984;
    --color-pink: #ff5784;
    --color-purple: #ac3ea7;
    --color-tiffany: #cbeae7;
    --color-footer: #e4f1fa;
    min-width:300px;
    background-color: #e4f1fa;
}
html[lang=en] body {
    letter-spacing: 0;
}
img {
    max-width: 100%;
    
}
a {
    color: black;
    text-decoration: underline;
}
a:hover {
    color: #555555;
    text-decoration: underline;
}

a:focus {
	outline: 2px solid #000;
}

a:focus-visible {
	outline: 2px solid #000;
}



a.btn {
    min-width: 120px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5;
    color: white !important;
    letter-spacing: 0.05rem;
    text-decoration: none !important;
    background: #066f6a;
    border: 2px solid #066f6a;
    box-sizing: border-box;
    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2), inset 0px 4px 0px rgba(253, 253, 251, 0.3);
    border-radius: 8px;
    transition: 0.3s ease all;
}
a.btn:focus,
a.btn:hover {
	color: white !important; 
    background: #055a56 !important; 
    box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.35), inset 0px 3px 0px rgba(0, 0, 0, 0.2);
}

a.btn:focus-visible {
  outline: 2px dashed black;
  outline-offset: 9px;
}



a.btn.small {
    min-width: 100px;
}
a.btn.large {
    line-height: 2;
    min-width: 120px;
}
a.btn.grey {
    background: #555555;
    border-color: #555555;
}
a.btn.blue {
    background: #094984;
    border-color: #094984;
}


input[type="button"].btn, button[type="submit"].btn, button[type="button"].btn {
    min-width: 120px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5;
    color: white !important;
    letter-spacing: 0.05rem;
    text-decoration: none !important;
    background: #066f6a;
    border: 2px solid #066f6a;
    box-sizing: border-box;
    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2), inset 0px 4px 0px rgba(253, 253, 251, 0.3);
    border-radius: 8px;
    transition: 0.3s ease all;
}

/* input[type="button"].btn:hover,
button[type="submit"].btn:hover,
button[type="button"].btn:hover
{
    box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.35), inset 0px 3px 0px rgba(0, 0, 0, 0.2);
}
*/

/*input[type="button"].btn:focus,
button[type="submit"].btn:focus,
button[type="button"].btn:focus
{
    box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.35), inset 0px 3px 0px rgba(0, 0, 0, 0.2);
    outline: 2px dashed black;
  	outline-offset: 9px;
}
*/

input[type="button"].btn.small , button[type="submit"].btn.small, button[type="button"].btn.small  {
    min-width: 100px;
}
input[type="button"].btn.large , button[type="submit"].btn.large, button[type="button"].btn.large {
    line-height: 2;
    min-width: 120px;
}
input[type="button"].btn.grey , button[type="submit"].btn.grey, button[type="button"].btn.grey {
    background: #555555;
    border-color: #555555;
}
input[type="button"].btn.blue , button[type="submit"].btn.blue, button[type="button"].btn.blue {
    background: #094984;
    border-color: #094984;
}


button:focus-visible, button:focus {
  outline: 2px dashed black;
  outline-offset: 9px;
}


.skip-to-content a {
    color: black;
}
a[href="#h1_maincontent"].sr-only-focusable:active, 
a[href="#h1_maincontent"].sr-only-focusable:focus {
    position: absolute;
    z-index: 99999;
    background: white;
    padding: 10px 15px;
    margin: 15px;
    border: 2px solid #066f6a;
    box-sizing: border-box;
}
h2 {

    line-height: 1.5;
    font-weight: 700;
    letter-spacing: 0.1rem;
}
h3 {
    font-size: 1.4375rem;
    line-height: 1.5;
    font-weight: 700;
    letter-spacing: 0.05rem;
}
h4 {
    font-size: 1.25rem;
    line-height: 1.5;
    font-weight: 700;
    letter-spacing: 0.05rem;
}
p, div, table {
    font-weight: 400;
}
span {
    font-size: inherit;
}
small {
    font-size: 0.875rem;
}
.nowrap {
    white-space: nowrap;
}
/***** Common main style *****/
.color-red {
    color: #FF0202;
    margin-bottom: 1.5rem;
}
.color-grey {
    color: #555555;
}
.color-brown {
    color: #A9640A;
}
.color-green {
    color: #4B842A;
}
.color-blue {
    color: #007AB8;
}
.bg-grey {
    background-color: #555555;
}
.bg-brown {
    background-color: #A9640A;
}
.bg-green {
    background-color: #4B842A;
}
.bg-blue {
    background-color: #007AB8;
}

.bg-red {
    background-color: #e61e43;
}

/*********************
* Navigation
*********************/
/**** mobile ****/
header > nav.mobile {
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    background: white;
    padding: 10px 20px; 
}
header > nav.mobile .site-logo {
    width: auto;
}
header > nav.mobile .site-logo img {
    width: auto;
    height: 38px;
}
header > nav.mobile .topbar {
    position: relative;
    display: flex;              
    justify-content: space-between; 
    align-items: center;  
}
header > nav.mobile .nav-menu {
    position: absolute;
	top: 0;
	right: 0;
    padding: 17px;
	background-image: url(../images/icon-nav-menu.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
    border: none;
    background-color: transparent;
    outline-offset: 6px;
}
header > .mobile-slide-menu .nav-close {
    position: absolute;
	top: 15px;
    right: 22px;
    padding: 14px;
	background-image: url(../images/icon-nav-close.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
    border: none;
    background-color: transparent;
    outline-offset: 6px;
}
header > .mobile-slide-menu .modal-header {
	padding: 14px;
    height: auto !important;
    padding-left: 25px;
	border-bottom: 3px solid #066F6A;
}
header > .mobile-slide-menu .modal-header div {
	font-size: 1.25rem;
}
header > .mobile-slide-menu .modal-body {
	display: flex;
    flex-direction: column;
	padding: 0;
}
header > .mobile-slide-menu .modal-body .mobile-menu {
	font-size: 1.25rem;
	padding: 0 25px;
}
header > .mobile-slide-menu .modal-body .mobile-menu.show {
    background: #E4F1FA;
}
header > .mobile-slide-menu .modal-body .mobile-menu .dropdown-toggle {
    color: #066F6A !important;
	border-bottom: 1px solid #CCCCCC;
	display: block;
	padding: 12px 0;
    text-decoration: none;
    white-space: break-spaces;
}
header > .mobile-slide-menu .modal-body .mobile-menu .dropdown-toggle::after {
    content: "";
	position: absolute;
    right: 30px;
    top: 17px;
    display: inline-block;
    padding: 6px;
    margin-left: 5px;
    /*background-image: url(../images/icon-nav-arrow.svg);*/
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    border: none;
    transform: translateY(4px);
}
header > .mobile-slide-menu .modal-body .mobile-menu.show .dropdown-toggle::after {
    transform: translateY(4px) scaleY(-1);
}
header > .mobile-slide-menu .modal-body .mobile-menu .dropdown-menu {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    padding: 10px 0;
    width: 100%;
    min-width: auto;
    list-style: none;
    background: transparent;
	transform: none !important;
    border: 0;
}
header > .mobile-slide-menu .modal-body .mobile-menu.show .dropdown-menu {
    animation: fadeInLeft 0.5s both;
}
header > .mobile-slide-menu .modal-body .mobile-menu .dropdown-menu .dropdown-item {
    word-break: keep-all;
    color: #555555;
    text-decoration: none;
    background: transparent;
    padding: 10px 0;
    margin: 0;
}

header > .mobile-slide-menu .footer {
  display: inline-flex;
    flex-direction: column;
    align-items: flex-end; 
    justify-content: flex-end;     
    width: 100%;               
    padding: 20px 20px 10px;    
}

header > .mobile-slide-menu .footer .copyright-item {
    color: #066F6A ;           
    font-weight: bold;        
    font-size: 14;           
    line-height: 1.5;          
    text-align: right;        
}

header > nav.mobile .topbar-menu {
	display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    margin: 5px 20px;
    padding-top: 20px;
    border: 0;
    background-color: transparent;
    outline: none; 
    font-size: 1.2rem;
}

header > .mobile-slide-menu .toolbar {
	display: inline-flex;
    flex-wrap: wrap;
	padding: 20px 5px 10px;
}
header > .mobile-slide-menu .toolbar > div {
	padding: 0 20px;
    border-right: 1px solid #066F6A;
}
header > .mobile-slide-menu .toolbar > div > a {
	font-size: 1.25rem;
    display: flex;
    align-content: center;
    align-items: center;
	height: 18px;
    color: #066F6A;
    text-decoration: none;
}
header > .mobile-slide-menu .toolbar .lang-switcher {
    color: #066F6A;
    position: relative;
    margin-right: 15px;
    cursor: pointer;
}
header > .mobile-slide-menu .toolbar .lang-switcher .dropdown-toggle {
    text-decoration: none;
}
header > .mobile-slide-menu .toolbar .lang-switcher .dropdown-toggle::after {
    content: "";
    display: inline-block;
    padding: 6px;
    margin-left: 8px;
    background-image: url(../images/icon-nav-arrow.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    border: none;
}
header > .mobile-slide-menu .toolbar .lang-switcher.show .dropdown-toggle::after {
    transform: scaleY(-1);
}
header > .mobile-slide-menu .toolbar .lang-switcher .dropdown-menu {
    position: absolute;
    left: -11px !important;
	top: 5px !important;
    font-size: 1.25rem;
    padding: 5px 10px 5px 18px;
    width: 100%;
    min-width: auto;
    list-style: none;
    background: white;
    border: 1px solid #066F6A;
}
header > .mobile-slide-menu .toolbar .lang-switcher.show .dropdown-menu {
    animation: fadeInUp 0.5s both;
}
header > .mobile-slide-menu .toolbar .lang-switcher .dropdown-menu .dropdown-item {
    word-break: keep-all;
    color: #066F6A;
    text-decoration: none;
    background: transparent;
    padding: 0;
    margin: 6px 0;
}
header > .mobile-slide-menu .toolbar .btn.logout {
    margin-left: 10px;
}
header > .mobile-slide-menu .toolbar .btn.logout:before {
    content: "";
    padding: 7px;
    margin-right: 4px;
    background-image: url(../images/icon-logout.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}
/** slide animation **/
header > .mobile-slide-menu .modal-dialog {
    max-width: 90%;
	max-width: calc(250px + 30%);
}
header > .mobile-slide-menu .modal-dialog-slideout {
    min-height: 100%;
    margin: 0 0 0 auto;
    background: #fff;
}
header > .mobile-slide-menu .modal.fade .modal-dialog.modal-dialog-slideout {
    -webkit-transform: translate(100%, 0) scale(1);
    transform: translate(100%, 0) scale(1);
}
header > .mobile-slide-menu .modal.fade.show .modal-dialog.modal-dialog-slideout {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    display: flex;
    align-items: stretch;
    -webkit-box-align: stretch;
    height: 100%;
}
header > .mobile-slide-menu .modal.fade.show .modal-dialog.modal-dialog-slideout .modal-body {
    overflow-y: auto;
    overflow-x: hidden;
}
header > .mobile-slide-menu .modal-dialog-slideout .modal-content {
    border: 0;
}
header > .mobile-slide-menu .modal-dialog-slideout .modal-header,
header > .mobile-slide-menu .modal-dialog-slideout .modal-footer {
    height: 4rem;
    display: block;
}

/*********************
* Footer
*********************/
footer {
    width: 100%;
    background: #e4f1fa;
    padding: 25px 0;
    position: relative;
    border-top: none; 
}

.footer-content {
    display: flex;
    flex-direction: column; 
    align-items: center;    
    justify-content: center;
    text-align: center;
    border-top: 1px solid; 
    margin: 0 auto;
    width: 100%; 
    max-width: 1100px; 
    padding-top: 20px; 
}

.copyright-item {
	color: #066F6A ;           
	font-weight: bold; 
    font-size: 0.85rem;  
    line-height: 1.8;
}

footer .back-to-top {
    position: fixed;
    right: 0;
    bottom: 10.5%;
    width: 40px;
    height: 40px;
    z-index: 1;
    animation: fadeOut 0s linear both;
}

/*********************
* Main content
*********************/
/* main.content { */
/*     margin-bottom: 50px; */
/*     min-height: 80.75vh; */
/*     padding-top: 166px; */
/* } */
main.content h2 { 
    font-weight: bold;
    text-align: center;
    margin-top: 40px;
    margin-bottom: 20px;
    line-height: 1.3;
    letter-spacing: 0.05rem;
    
}

main.content a {
    color: #006DEB;
    text-decoration: underline;
    font-weight: bold;
}
main.content a:hover {
    color: #050FFF;
}

main.content ul, 
main.content ol {
    padding-left: 25px;
    line-height: 1.75;
}
main.content ol > li { margin-bottom: 15px; }

main.content .hero-title-mobile p {
    text-align: center;
    margin-bottom: 20px;
    color: #555555;
}

body main.content h3 { margin-bottom: 25px; }
body main.content h4 { margin: 15px 0; }

/***** Landing page search *****/
main.content .search-flter-section {
    display: flex;
    align-items: center;
    flex-wrap: wrap; 
    justify-content: space-between; 
    margin-bottom: 20px;
}
    
main.content .search-flter-section label {
    font-size: 18px;
    font-weight: bold;
    width: 120px;      
    flex-shrink: 0;    
    text-align: left; 
}

main.content .search-flter-section input {
    width: 230px;
    height: 48px;
    padding: 0 10px;
    border-radius: 6px;
    border: 1px solid #ccc;
}

main.content .form-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 5px 20px;
      margin-top: 20px;
      background-color: #A0C8F0;
      color: black;
    }

main.content .form-header .form-title {
      font-size: 18px;
      font-weight: bold;
      padding-left: 15px;
    }
    
main.content .form-header .version {
      font-size: 18px;
      font-weight: bold;
    }
    

.table-container {
      width: 100%;
      margin: 20px 5px;
    }

    .special-grid {
      width: 100%;
      border-collapse: collapse;
    }

    .special-grid thead tr {
      background-color: #B3B3B3;
      color: #333;
    }

    .special-grid tbody tr:nth-child(even) {
      background-color: #CDEB8B;
    }

    .special-grid tbody tr:nth-child(odd) {
      background-color: #ffffff;
    }

.special-grid th {
	border: 1px solid #000000;
	padding: 10px;
	font-size: 18px;
	font-weight: bold; 
}

.special-grid td {
      border: 1px solid #000000;
      padding: 5px 1px;
      font-size: 16px;
    }

    .special-grid th:first-child,
    .special-grid td:first-child,
    .special-grid th:last-child,
    .special-grid td:last-child {
      width: 8%;
    }

    .special-grid th:nth-child(n+2):nth-child(-n+6) {
      width: 16%;
    }

    .cell-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      box-sizing: border-box;
    }

    .cell-content button {
      background: none;
      border: none;
      cursor: pointer;
    }

    .edit-link {
      text-decoration: none;
      color: #000000;
      display: flex;
      align-items: center;
    }
    
    
    .qty-minimal {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
    text-align: center; 
}

.qty-minimal:hover, .qty-minimal:focus {
    border-radius: 6px !important;
    border: 1px solid #ccc !important;
}


.special-grid td {
    vertical-align: middle;
}

.is-disabled, 
    .form-control:disabled,
    select:disabled {
        background-color: #eeeeee !important; 
        color: #555555 !important; 
        cursor: not-allowed !important;
    }

	input[type="date"].form-control:disabled,
	input[type="date"].form-control.is-disabled {
	    background-color: #eeeeee !important;
	    background-image: none !important; 
	    cursor: not-allowed !important;
	}

	select.form-control:disabled,
	select.form-control.is-disabled {
	    background-color: #eeeeee !important;
	    color: #555555 !important;
	}

    input[type="radio"]:disabled {
        filter: grayscale(100%);
        outline: none;
    }
	
	
	.custom-width-modal {
	        max-width: 90% !important;
	        width: 90%;
	    }

	    .custom-bg-color {
	        background-color: #E6F1F2 !important;
	    }

	    .custom-bg-color .list-group-item {
	        background-color: transparent !important;
	    }
		
		
/***** charting tooth table *****/		
.grid-table {
    width: 100% !important;
    max-width: 800px;
    margin: 0 auto;
    border-collapse: collapse;
    table-layout: fixed;
}

.grid-table th,
.grid-table td {
    padding: 8px 4px;
    text-align: center;
    vertical-align: middle;
    box-sizing: border-box;
}

.label-row-upper td,
.label-row-lower td {
    background-color: #B3B3B3;
    color: #000000 !important;
    font-weight: bold !important;
    font-size: 16px;
    border: 1px solid #A0A0A0;
}

.image-row-upper td,
.image-row-lower td {
    background-color: #ffffff;
    border: 1px solid #E0E0E0;
}


.image-row-upper td {
    border-bottom: 2px solid #0E0E0E !important;
}

.grid-table tr td:nth-child(5) {
    border-right: 2px solid #0E0E0E !important;
}

.grid-table tr td:nth-child(6) {
    border-left: 2px solid #0E0E0E !important;
}

.image-row-upper td img,
.image-row-lower td img {
    width: 100%;
    max-width: 45px; 
    height: auto;
    display: block;
    margin: 0 auto;
    pointer-events: none;
}


.button-group {
  display: flex;
  margin-top: 30px;
  width: 100%;
  align-items: end;
}

.square-btn {
  width: 18%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  border: 1px solid #040404;
  border-bottom: none;
  cursor: pointer;
}

.square-btn span {
  font-size: 18px;
  font-weight: bold;
  color: #000000;
}

.square-btn.active {
  background-color: #AFE7F8;
  height: 55px;
}

.square-btn.square-btn--alert {
  background-color: red;
  border-color: #040404;
}
.square-btn.square-btn--alert span {
  color: white;
  font-weight: bold;
}

.square-btn.square-btn--alert.active {
  background-color: red;
  height: 55px;
}
.square-btn.square-btn--alert.active span {
  color: white;
}

.square-btn.active span {
  color: #181FA3;
}

.content-area {
  background-color: #ffffff;
  max-width: 800px;
  min-height: 25vh;
  padding: 8px; 
  height: auto; 
  border: 1px solid #040404;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
}

.content-item-btn {
  box-sizing: border-box;
  width: 23%;
  height: 45px;
  border: 1.5px solid #000000;
  background: #eae8e8;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  margin-top: 15px;
}

.flex-container {
    display: flex;
    width: 100%;
    align-items: flex-start;
}


#dynamic-content {
    flex: 0 0 70%;
    width: 70%;
}


.tooth-status {
    flex: 0 0 35%; 
    width: 35%;
    background-color: #ffffff;
    margin-left: 10px;
    border: 1px solid #040404;
    box-sizing: border-box;
}

.tooth-status-btn-str {
    width: 22%; 
    height: 55px; 
    background-color: #AFAAAA; 
    border: 1px solid #040404;
    border-radius: 4px;
    font-weight: bold;
    font-size: 18px; 
    color: #000;
    cursor: pointer;
    box-sizing: border-box;
}

.tooth-status-btn-hor {
    flex: 1; 
    height: 40px; 
    background-color: #AFAAAA; 
    border: 1px solid #040404;
    border-radius: 4px;
    font-weight: bold;
    font-size: 18px;
    color: #000;
    cursor: pointer;
    box-sizing: border-box;
}


.tooth-status-btn-str:active, .tooth-status-btn-hor:active {
    background-color: #7D7878 !important;
    color: #ffffff !important;
}

/***** charting tooth table *****/				
		

/***** Form Group *****/
main.content .section-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 2px solid transparent;  /*edit on theme.css*/
    background: linear-gradient(180deg, #EF30541f 0%, rgba(255, 255, 255, 0) 45%);   /*edit on theme.css*/
    box-sizing: border-box;
    box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    text-decoration: none !important;
    outline: none;
    margin-bottom: 30px;
    transition: all 0.2s ease-out;
}
main.content .section-icon:focus,
main.content .section-icon:hover {
    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.5);
}
main.content .section-icon .img-holder {
    width: 100%;
    height: 180px;
    background-size: 88% auto;
    background-position: bottom center;
    background-repeat: no-repeat;
    transition: all 0.2s ease-in-out;
}
main.content .section-icon:focus .img-holder,
main.content .section-icon:hover .img-holder {
    background-size: 104% auto;
}
main.content .section-icon .title-holder {
    color: white;
    background-color: transparent;  /*edit on theme.css*/
    width: 100%;
    text-align: center;
    padding: 5px;
    font-weight: 600;
}


/***** Main Form Row  *****/
/*
main.content .form-row-inline {
    display: flex;
    align-items: center;
    margin: 10px 30px;
}


main.content .form-row-inline label {
    width: 130px;          
    margin-right: 20px;    
    white-space: nowrap;   
    font-weight: bold;
	font-size: 18px;
}


main.content .form-row-inline .form-control {
    flex: 1;               
    max-width: 350px;      
    height: 38px;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

main.content .form-row-inline .form-text-input {
    flex: 1;               
    max-width: 90%;      
    min-height: 80px;
    padding: 5px 10px;
    border: 1px solid;
    border-radius: 4px;
    vertical-align: top;   
    resize: vertical
}

main.content .form-row-inline .form-text-input::placeholder {
    color: #cccccc;
}

main.content .form-row-inline .form-group > select {
    -moz-appearance: none;
    -webkit-appearance: none;
    width: 350px; 
    height: 38px !important;
    padding: 0 10px;
    border-radius: 4px;
    border: 1px solid #ccc;
    background-image: url(../images/icon-select-dropdown.svg);
    background-size: 12px auto;
    background-position: center right 15px;
    background-repeat: no-repeat;
}


main.content .form-row-inline .form-group > select:focus {
    border-color: #066F6A;
    box-shadow: none;
}


main.content .form-row-inline input[readonly] {
    background-color: #e9ecef;
    color: #495057;           
    cursor: not-allowed;       
    border-color: #ced4da;

}
*/


/* date select */

input[type="date"].form-control {
    position: relative;         
    background-color: #ffffff !important;
    background-image: url('../images/icon-calendar.svg') !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important; 
    background-size: 20px 20px !important;            
    padding-right: 40px !important;            
    
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    
    /*min-height: 38px; */
    cursor: pointer;
}

input[type="date"].form-control::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;                  
    height: 100%;                 
    margin: 0;
    padding: 0;
    cursor: pointer;

    opacity: 0;                   
    z-index: 1;
}


main.content .form-row-inline {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 10px 30px;
  width: 90%;
  box-sizing: border-box;
}

main.content .form-row-inline label {
  flex: 0 0 36%;
  max-width: 36%;
  font-size: 18px;
  color: #333;
  white-space: normal;
  word-break: break-word;
}


.force-ddmmyyyy {
    position: relative;
}

.force-ddmmyyyy::before {
    position: absolute;
    top: 5px;
    left: 10px;
    content: attr(data-date);
    display: inline-block;
    color: #333333;
  /*  background: white; */
    width: calc(100% - 40px); 
    pointer-events: none;     
}

.force-ddmmyyyy::-webkit-datetime-edit { 
    color: transparent !important; 
}

/* main.content .form-row-inline .form-control,
main.content .form-row-inline .form-dropBox > select {
  width: 100%;
  max-width: 100%;
}
*/


main.content .form-row-inline .form-dropBox > select,
main.content .form-row-inline .form-text-input {
    height: 38px;
    padding: 6px 12px;
    border: 1px solid #6C7575;
    border-radius: 8px;
    box-sizing: border-box;
    font-size: 1rem;
}


main.content .form-row-inline .form-text-input {
    min-height: 100px;      
    height: auto !important;
    resize: vertical;
    width: 100%;
}
    
main.content .form-row-inline .form-dropBox > select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url(../images/icon-select-dropdown.svg);
    background-size: 12px auto;
    background-position: center right 15px;
    background-repeat: no-repeat;
    background-color: #fff;
    cursor: pointer;
    width: 90%;
}

main.content .form-row-inline .form-dropBox > select:focus {
    border-color: #066F6A;
    outline: none;
    box-shadow: 0 0 5px rgba(6, 111, 106, 0.3);
}


main.content .form-row-inline .form-dropBox > select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url(../images/icon-select-dropdown.svg);
    background-size: 12px auto;
    background-position: center right 15px;
    background-repeat: no-repeat;
    background-color: #fff;
    cursor: pointer;
}

main.content .form-row-inline .form-select > select:focus {
    border-color: #066F6A;
    outline: none;
    box-shadow: 0 0 5px rgba(6, 111, 106, 0.3);
}


main.content .form-row-inline input[readonly] {
    background-color: #f4f4f4;
    color: #666;           
    cursor: not-allowed;       
    border-color: #eee;
}

/***** public Form ******/
.public-form-row-inline {
    width: 100%;
    padding: 5px 30px; 
    box-sizing: border-box; 
}

.public-form-row-inline label{
 display: block; 
 margin-bottom: 5px;
}


.public-form-row-inline .form-dropBox > select,
.public-form-row-inline .form-text-input {
	height: 30px;
	padding: 0 12px;
	/* border: 1px solid #ccc; */
	/* border-radius: 4px; */
	box-sizing: border-box;
	/* font-size: 1rem; */
	width: 100% !important;
}


.public-form-row-inline .form-text-input {
    min-height: 100px;      
    height: auto !important;
    resize: vertical;
    width: 100%;
}
    
.public-form-row-inline .form-dropBox > select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url(../images/icon-select-dropdown.svg);
    background-size: 12px auto;
    background-position: center right 15px;
    background-repeat: no-repeat;
    background-color: #fff;
    cursor: pointer;
    width: 77%;
}

.public-form-row-inline .form-dropBox > select:focus {
    border-color: #066F6A;
    outline: none;
    box-shadow: 0 0 5px rgba(6, 111, 106, 0.3);
}


.public-form-row-inline .form-dropBox > select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url(../images/icon-select-dropdown.svg);
    background-size: 12px auto;
    background-position: center right 15px;
    background-repeat: no-repeat;
    background-color: #fff;
    cursor: pointer;
}

.public-form-row-inline .form-select > select:focus {
    border-color: #066F6A;
    outline: none;
    box-shadow: 0 0 5px rgba(6, 111, 106, 0.3);
}


.public-form-row-inline input[readonly] {
    background-color: #f4f4f4;
    color: #666;           
    cursor: not-allowed;       
    border-color: #eee;
}


/***** Form Sub Title *****/
.form-sub-title {
	font-size: 18px;
	font-weight: bold;
	margin-top: 30px;
	background-color: #BAC8D3;
	padding: 3px 30px;
	border: 1px solid #23445D;
	box-sizing: border-box; 
	width: 100%;
}


.alert-advisedMsg {
    color: #FF0000;
    font-size: 16px;
	font-style: italic;
	display: block;
}


/***** Form Group *****/
main.content .form-group {
    position: relative;
    margin: 12px 0 12px;
}
main.content .form-group > label {
    top: 50%;
    transform: translateY(-50%);
    left: 10px;
    position: absolute;
    background-color: white;
    padding: 0 5px;
    font-size: 1rem;
    transition: 0.2s ease all;
    pointer-events: none;
    color: #555555;
}
main.content .form-group.label-animate > label {
    top: 0;
    font-size: 0.875rem;
    color: #066F6A;
}
main.content .form-group > input {
    -webkit-appearance: none;
    -moz-appearance: none;
    color: black;
    padding: 0 15px;
    height: 48px;
    line-height: 58px;
    border-radius: 6px;
}
main.content .form-group > input:focus {
    border-color: #066F6A;
   /* box-shadow: none; 
   use bootstrap box-shadow
   */
}
main.content .form-group > input[readonly] {
    
    /* update by ohiicommon.css
    background: white;
    */
    BACKGROUND-COLOR: #CCCCCC;
}
main.content .form-group.date-pick:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    padding: 15px;
    background-image: url(../images/icon-calendar.svg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    pointer-events: none;
}

main.content .form-group > select {
    -moz-appearance: none;
    -webkit-appearance: none;
    width:230px;
    height: 48px !important;
    padding: 0 10px;
    border-radius: 6px;
    border: 1px solid #ccc;
    background-image: url(../images/icon-select-dropdown.svg);
    background-size: 12px auto;
    background-position: center right 15px;
    background-repeat: no-repeat;
}


main.content .form-group > select:focus {
    border-color: #066F6A;
    box-shadow: none;
}
main.content .form-group > textarea {
    border: 1px solid #ced4da;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    outline: none;
    border-radius: 6px;
    width: 100%;
    padding: 15px;
}
main.content .form-group > textarea:focus {
    border-color: #066f6a;
   /* box-shadow: none;
   use bootstrap shadow
   */
}

/* date-pick style */


/* update for calendar year start */

.pignose-calendar-wrapper {
    overflow: visible;
    box-shadow: none;
    width: 90%;
    max-width: 420px;
    top: 20%;
    left: 50%;
    transform: translate(-50%, 0) !important;
    margin: 0 !important;
}
.pignose-calendar {
    max-width: 420px;
    box-shadow: none;
}
.pignose-calendar .pignose-calendar-body {
    padding: 0.5em 1.2em 2em;
}
.pignose-calendar .pignose-calendar-top {
    box-shadow: none;
    border: 0;
    background: transparent;
    padding: 30px 0;
    margin-bottom: -30px;
}
.pignose-calendar .pignose-calendar-top .pignose-calendar-top-nav {
    width: auto;
}
.pignose-calendar .pignose-calendar-top-prev .icon-arrow-left:before {
    content: "";
    display: block;
    width: 30px;
    height: 30px;
    background-image: url(../images/icon-calendar-arrow.svg);
    background-size: 40% auto;
    background-position: center center;
    background-repeat: no-repeat;
    transform: scaleX(-1);
}
.pignose-calendar .pignose-calendar-top-next .icon-arrow-right:before {
    content: "";
    display: block;
    width: 30px;
    height: 30px;
    background-image: url(../images/icon-calendar-arrow.svg);
    background-size: 40% auto;
    background-position: center center;
    background-repeat: no-repeat;
}
.pignose-calendar .pignose-calendar-top-prevYear .icon-arrow-left:before {
    content: "";
    display: block;
    width: 43px;
    height: 30px;
    background-image: url(../images/icon-calendar-arrow-double.svg);
    background-size: 40% auto;
    background-position: center center;
    background-repeat: no-repeat;
    transform: scaleX(-1);
}
.pignose-calendar .pignose-calendar-top-nextYear .icon-arrow-right:before {
    content: "";
    display: block;
    width: 43px;
    height: 30px;
    background-image: url(../images/icon-calendar-arrow-double.svg);
    background-size: 40% auto;
    background-position: center center;
    background-repeat: no-repeat;
}
.pignose-calendar .pignose-calendar-top .pignose-calendar-top-prev {
    float: left;
    margin-left: 0 !important;
}
.pignose-calendar .pignose-calendar-top .pignose-calendar-top-prevYear {
    float: left;
    margin-left: 1.6em;
}
.pignose-calendar .pignose-calendar-top .pignose-calendar-top-next {
    float: right;
    margin-right: 0 !important;
}
.pignose-calendar .pignose-calendar-top .pignose-calendar-top-nextYear {
    float: right;
    margin-right: 1.6em;
}

/* update for calendar year end */


.pignose-calendar .pignose-calendar-top .pignose-calendar-top-date {
    display: inline-flex;
    align-content: center;
    align-items: center;
    justify-content: center;
}
.pignose-calendar .pignose-calendar-top .pignose-calendar-top-month {
    margin-bottom: 0;
    margin-right: 7px;
}
.pignose-calendar .pignose-calendar-top .pignose-calendar-top-year {
    color: black;
    font-size: 130%;
    font-weight: 600;
}
.pignose-calendar .pignose-calendar-header .pignose-calendar-week {
    font-weight: 600;
}
.pignose-calendar .pignose-calendar-header .pignose-calendar-week.pignose-calendar-week-sat, .pignose-calendar .pignose-calendar-header .pignose-calendar-week.pignose-calendar-week-sun {
    color: black;
}
.pignose-calendar .pignose-calendar-unit a,
.pignose-calendar .pignose-calendar-unit.pignose-calendar-unit-sat a {
    color: black;
}
.pignose-calendar .pignose-calendar-unit:not(.pignose-calendar-unit-disabled) a:hover {
    color: white;
    background: #066F6A;
}

.pignose-calendar .pignose-calendar-unit.pignose-calendar-unit-disabled a {
    cursor: default;
}

.pignose-calendar .pignose-calendar-unit {
    height: 3.4em;
}

.pignose-calendar div.pignose-calendar-unit-date {
    padding-top: 3px;
}



.pignose-calendar .pignose-calendar-unit a {
    width: 86%;
    /* update by daniel for large font */
    height: 1.9em;
    line-height: 1.9em;
    font-size: 1.5em;    
    font-weight: normal;
    border-radius: 0;
    border: 1px solid #cacaca;
    /* update by daniel */
    /* background: transparent; */
    background: #cefec5;
}
.pignose-calendar .pignose-calendar-unit.pignose-calendar-unit-active a {
    box-shadow: none;
    background: #066F6A;
}
.pignose-calendar .pignose-calendar-unit.pignose-calendar-unit-disabled a {
    font-weight: normal;
   /* opacity: 1; */
    background-color: #efefef;
    border-color: #efefef;
    /* text-decoration: line-through; */
}

.pignose-calendar .pignose-calendar-unit.pignose-ohii-calendar-today a {
    border-color: #400040;
}


.pignose-calendar-ohii-image-icon {

	position: absolute; 
	 
	top: 50%; 
	right: 0; 
	cursor: pointer;

	transform: translate(-25%,-50%);
	width: 42px; 
	height:42px;
	padding: 5px;
	 
	 
}

.pignose-calendar .pignose-calendar-btn-close {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 2.8125rem;
    text-decoration: none;
    color: white;
    transform: translateY(-100%);
}

/* calander style by daniel 
.pignose-calendar .pignose-date-num {
	
	position: relative;
    top: -2px;
    font-size: 24px;

}
*/
/* update by daniel for public holiday color */
.pignose-calendar .pignose-calendar-unit.disable-by-user-input-calendar a {
	
}

.pignose-calendar .pignose-calendar-unit.holiday-by-user-input-calendar a {
	color: #B82E19;
}


.date-select-calendar .pignose-calendar {
    width: 100%;
}
/* Hide the browser's default checkbox */
main.content .tickchecker {
	position: relative;
	cursor: pointer;
	user-select: none;
    margin: 5px 15px 5px 0;
    touch-action: manipulation;
}
main.content .tickchecker input[type="radio"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}


main.content .tickchecker input[type="text"] {
    position: relative !important;
    opacity: 1 !important;
    height: 32px !important;
    width: 160px !important;
    display: inline-block !important;
    visibility: visible !important;
}


main.content .tickchecker .checkmark {
	position: absolute;
	top: 0px;
	left: 0.1rem;
	height: 23px;
	width: 23px;
    border: 1px solid black;
    border-radius: 3px;
}
main.content .tickchecker input:focus ~ label .checkmark {
    box-shadow: 0 0 7px rgba(6, 111, 106, 1);
}

main.content .tickchecker input:focus-visible ~ label:first-of-type {
    outline-color: black;
    outline-style: auto;
    outline-width: medium;
    outline-offset: 5px;
}


main.content .tickchecker .checkmark:after {
	content: "";
	position: absolute;
	display: none;
}
main.content .tickchecker input:checked ~ label .checkmark:after {
	display: block;
}
main.content .ticklang {
    display: inline-flex;
    flex-wrap: wrap;
}
main.content .tickchecker .checkmark:after {
    left: 7px;
    top: 2px;
    width: 6px;
    height: 15px;
    border: solid #066f6a;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    animation: fadeIn 0.3s ease-out both;
}




/* add radio style */

main.content .tickchecker {
    display: inline-block !important; 
    width: 20% !important;                
    vertical-align: middle;
    position: relative;
    box-sizing: border-box;
}


main.content .tickchecker .radiomark {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);      
    left: 0;
    height: 16px !important;         
    width: 16px !important;           
    border: 1px solid black;
    border-radius: 16px !important;          
}

main.content .tickchecker .radiomark:after {
    content: "";              
    position: absolute;
    display: none;           
    width: 16px !important;           
    height: 16px !important;
    border-radius: 16px !important; 
    background-color: #000 !important; 
    border: none !important;          
    animation: fadeIn 0.2s ease-out both;
	left: -1px !important;    
	top: -1px !important;
}

main.content .item-list-table.timeslot tr .tickchecker {
    max-width: 50px;
    left: 50%;
    transform: translateX(-50%);
}

main.content .tickchecker input:checked ~ label .radiomark:after {
    display: block !important;
}

main.content #subSubmit {
	width: 100%;
	background-color: var(--color-gold);
	border: 0;
	border-radius: 0;
    color: #fff;
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.125rem;
    padding: 20px 30px;
    text-transform: uppercase;
    -webkit-transition: 0.5s ease;
    -o-transition: 0.5s ease;
    transition: 0.5s ease;
}

main.content .tickchecker label {
    display: inline-block !important;
    width: auto !important;         
    white-space: nowrap !important;   
    padding-left: 28px !important;    
    margin-right: 50px;              
    vertical-align: middle;
}


main.content .vertical-choice .tickchecker {
    display: block !important;    
    width: 100% !important;       
    clear: both;                 
}

main.content .horizontal-choice .tickchecker {
    display: inline-block !important; 
    margin-right: 20px !important;
    vertical-align: middle;
}

main.content .inline-group .tickchecker {
    display: inline-block !important;  
    width: auto !important;           
    clear: none;                      
}

main.content .sub-input-group {
	display: inline-flex !important;  
    align-items: center;
    margin-left: 10px !important;     
    vertical-align: middle;
}


main.content .sub-input-group input, 
main.content .sub-input-group textarea {
	width: 200px !important;          
	height: 30px;
	padding: 5px 10px;
	font-size: 0.85rem;
}

/* review charting textarea */
.grid-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 5px;
	margin-top: 10px;
}

.quad-box {
	border: 1px solid #666;
	background: #ccc;
	height: 60px;
	padding: 5px;
}

.others-box {
	grid-column: span 2;
	border: 1px solid #666;
	background: #ccc;
	min-height: 150px;
	padding: 10px;
}


/* Table Records */
main.content .table-record {
    margin-bottom: 40px;
}
main.content .table-record .row {
    margin: 0;
}
main.content .table-record .row .title {
    font-weight: 700;
    display: inline-flex;
    /*
    min-width: 80px;
    */
    padding-right: 15px;
    /*
    width: 150px;
    */
}
main.content .table-record .row .content {
    display: inline-flex;
    overflow-wrap: anywhere;
    /* comment by daniel
    width: calc( 100% - 100px );
    */
}
main.content .table-record .row > .table-cell {
    display: inline-flex;
    align-items: center;
    border: 1px solid #EFEFEF;
    padding: 12px 20px;
}
main.content .table-record .row:nth-child(odd) > .table-cell {
    background: #EFEFEF;
    border-right: 1px solid white;
    border-left: 1px solid white;
}
main.content .table-record .row:nth-child(odd) > .table-cell:first-child {
    border-left: 1px solid #EFEFEF;
}
main.content .table-record .row:nth-child(odd) > .table-cell:last-child {
    border-right: 1px solid #EFEFEF;
}
/* Item List Table */
main.content .item-list-table {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 40px;
}
main.content .item-list-table tr {
    border-bottom: 1px solid #CACACA;
}
main.content .item-list-table > thead > tr:first-child {
    border-bottom: 1px solid black;
}
main.content .item-list-table th {
    padding: 5px 8px 5px 0;
}
main.content .item-list-table td {
    padding: 15px 10px 15px 0;
}
main.content .item-list-table td {
    padding: 15px 10px 15px 0;
}
main.content .item-list-table input[type='number'] {
    height: 38px;
    line-height: 38px;
    max-width: 100px;
    border-radius: 6px;
}

main.content .container input[type='number'] {
    height: 38px;
    line-height: 38px;
    max-width: 100px;
    border-radius: 6px;
}


main.content .item-list-table  a {
    color: black;
    text-decoration: underline;
}
main.content .item-list-table a:hover {
    color: black;
}
main.content .item-list-table.mouse-active tbody tr:hover {
    background: #EFEFEF;
}
main.content .item-list-table.timeslot tr > :not(:first-child) {
    text-align: center;
}
main.content .added-items-list {
    padding: 0px 25px 15px 25px;
    margin-top: 15px;
    border: 2px solid #1DA29B;
    box-sizing: border-box;
    border-radius: 6px;
    
    max-height: calc(100vh - 300px);
    
    overflow: auto;
}
main.content .added-items-list h4 {
    margin-bottom: 0;
}
main.content .added-items-list .description {
	/*
    font-size: 0.875rem;
    */
    padding: 8px 0;
    border-bottom: 1px solid black;
}
main.content .added-items-list .no-items {
    display: none;
    padding: 12px 0;
    animation: fadeIn 0.5s ease-out both;
}
main.content .added-items-list .added-item {
    position: relative;
    padding: 12px 0;
    border-bottom: 1px solid #CACACA;
    transition: none;
    animation: fadeIn 0.5s ease-out both;
}
main.content .added-items-list .added-item:last-child {
    border-bottom: 0;
}
main.content .added-items-list .added-item .item-reserve-no {
    margin-bottom: 8px;
}
main.content .added-items-list .added-item .item-info {
    font-size: 0.875rem;
    padding: 0;
    list-style: none;
    margin: 8px 0 25px;
}
main.content .added-items-list .added-item .item-remover {
    position: absolute;
    right: 0;
    bottom: 15px;
    font-size: 0.875rem;
    text-decoration: none;
    color: inherit;
}
main.content .added-items-list .added-item .item-remover:before {
    content: '\00D7';
    font-size: 1.625rem;
    line-height: 0;
    display: inline-block;
    transition: 0.2s ease-out all;
    transform: translate(-2px, 4px);
}
main.content .added-items-list .added-item .item-remover:hover:before {
    transform: translate(-1px, 5px) rotate(90deg);
}

main.content .added-items-list .added-item .item-remover:hover {
   	background-color: lightgray;
}


main.content .timeslot .index-list {
    padding: 15px 25px;
    margin-top: 15px;
    border: 2px solid #1DA29B;
    box-sizing: border-box;
    border-radius: 6px;
    max-height: calc(100vh - 400px);
    overflow: auto;
    letter-spacing: 0;
}
main.content .confirm-box .item-list-table {
    margin-bottom: 20px;
}
main.content .confirm-box .item-list-table tr:last-child {
    border-bottom: 0;
}
main.content .confirm-box .added-items-list {
    max-height: initial;
}
main.content .confirm-box .added-items-list .description {
    border-bottom: 0;
}
main.content .confirm-box .added-items-list .added-item .item-info {
    margin: 12px 0;
}
main.content .reservation-list {
    padding: 15px 25px;
    margin-top: 15px;
    border: 2px solid #1DA29B;
    box-sizing: border-box;
    border-radius: 6px;
    max-height: calc(100vh - 400px);
    overflow: auto;
}
main.content .reservation-list .reservation-table {
    width: 100%;
    position: relative;
    padding: 12px 0;
    border-top: 1px solid #CACACA;
    transition: none;
    animation: fadeIn 0.5s ease-out both;
}
main.content .reservation-list .reservation-table th, 
main.content .reservation-list .reservation-table td {
    padding: 10px 10px 10px 0;
}
main.content .reservation-list .reservation-table input {
    width: 100px;
    padding: 0 15px;
    border-radius: 6px;
}
main.content .print-notes {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: space-between; 
    align-items: center;
    width: 100%;
    min-height: 80px;
    border-top: 2px solid #555555;
    border-bottom: 2px solid #555555;
    margin-bottom: 30px;
}
/* main.content .print-notes .text {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
} */
main.content .cat-menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    /* background: #EF3054; */
    margin-bottom: 20px;
}
main.content .cat-menu .cat-item {
    color: white;
    text-decoration: none;
    min-width: 140px;
    padding: 5px 20px;
    margin: 10px 10px 0;
    border-radius: 7px 7px 0 0;
    font-size: 1.125rem;
    font-weight: bold;
}
main.content .cat-menu .cat-item:hover,
main.content .cat-menu .cat-item.active {
    background: white !important;
}


/*Small */


/* Mobile */
main.content .cat-menu-mobile {
    margin-bottom: 20px;
}
main.content .cat-menu-mobile .dropdown {
    width: 100%;
    font-size: 1.125rem;
    font-weight: bold;
}
main.content .cat-menu-mobile .dropdown a.dropdown-toggle {
    width: 100%;
    color: white;
    text-decoration: none;
    padding: 10px 20px;
    display: block;
}
main.content .cat-menu-mobile .dropdown a.dropdown-toggle:after {
    position: absolute;
    top: 19px;
    right: 16px;
}
main.content .cat-menu-mobile .dropdown.show a.dropdown-toggle:after {
    transform: scaleY(-100%);
}
main.content .cat-menu-mobile .dropdown.show .dropdown-menu {
    position: relative !important;
    width: 100%;
    border: 0;
    padding: 0;
    transform: none !important;
    animation: fadeIn 0.2s ease-out both;
    transform-origin: top;
    margin-top: 0;
    margin-bottom: 20px;
}
main.content .cat-menu-mobile .dropdown.show .dropdown-menu a.dropdown-item {
    width: 100%;
    color: white;
    text-decoration: none;
    padding: 10px 20px;
    font-size: 1.125rem;
    font-weight: bold;
}



/***** iPad mini & Mobile Unified Style *****/
@media only screen and (max-width: 1140px) {
    
	main.content .hero-title-mobile h2 {
	    text-align: center;
	    font-size: 1.8rem; 
	    -webkit-text-size-adjust: 100%;
	}

	body.index main.content .login-box {
	    border-radius: 10px;
	    margin: 20px auto;
	    max-width: 400px;
	    width: 90%;
	    box-sizing: border-box; 
	}

	main.content .hero-banner {
		height: 180px;
		background-position: center bottom;
		background-size: cover;
	}
	
	body.index main.content .mobile-graphic:after {
		display: block;
		height: 250px;
	}
	
	.d-none-tablet {
		display: none !important;
	}
	
	footer {
		padding: 20px 0;
	}
}


/******** Bootstrap ************/


.form-control:focus {
    color: #495057;
    background-color: #fff;
    border-color: #1F8BFF;
    outline: 1px solid rgba(32, 139, 255, 1) !important;
    box-shadow: 0 0 0.1rem 0.2rem rgba(31,139,255,1);
}


.pignose-calendar-ohii-image-icon:focus {
    color: #495057;
    background-color: #fff;
    border-color: #1F8BFF;
    outline: 1px solid rgba(31, 139, 255, 1);
    box-shadow: 0 0 0.1rem 0.2rem rgba(31,139,255,1);
}



.focus-big-offset:focus-visible {
    outline: -webkit-focus-ring-color auto 1px;
    outline-offset: 9px;
}

th.focus-big-offset a:focus-visible {
    outline: -webkit-focus-ring-color auto 1px;
    outline-offset: 9px;
}



main.content .section-icon:focus, main.content .section-icon:active {
    outline: -webkit-focus-ring-color auto 1px;
    outline-offset: 20px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0
}