body {
    font-family: 'Prompt', sans-serif;
	margin: 0px;
}

td, th {
    white-space: nowrap;
    padding: 4px 15px 4px 15px !important;
    max-width: 150px !important;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

input[type=dates] {
    min-width: 180px;
}

h2,
div,
li,
label span,
nav > a > div > div > span {
    font-family: 'Prompt', sans-serif !important;
}

input {
    font-family: 'Prompt', sans-serif, FontAwesome !important;
}

.auto-complete-field.disable-true > div > div::before {
    border-bottom: 1px dotted rgba(0, 0, 0, 0.42);
}

.appbar button:focus {
    outline: none !important;
    border: none !important;
}

input,
.select-field div,
.auto-complete-field > div > div > div > div > div:first-child {
    color: #656768 !important;
}

span, 
aside {
    font-family: 'Prompt', sans-serif;
}

.auto-complete-text-field > div:before,
.form-field > div > div > div:before {
    border-bottom-color: #327DC0 !important;
}

.item-list h4 {
    color: #fff;
}

.unset-overflow {    
    overflow: unset !important;
}

h4,
circle,
.item-list div,
.item-list span {
    color: #327DC0;
}

label,
td,
.case-state-status svg,
span.MuiIconButton-label-45,
span.MuiTypography-body1-99,
.form-field .label > span {
    color: #327DC0 !important;
}

button {
    width: 130px;
}

button.background-blue {
    background-color: #327DC0;
}

button.background-blue:hover {
    background-color: #21659e;
}

button.background-red {
    background-color: #ED5D68;
}

button.background-red:hover {
    background-color: rgb(231, 58, 72);
}

table thead {
    background: #327DC0 !important;
}

table thead th span {
    color: #ffffff !important;
}

.main-container {
    background: rgb(237, 241, 242);
}

.main-content {
    height: 100%;
    overflow-y: auto;
    padding: 15px;
}

.hidden {
    display: none !important;
}

.case-form-header {
    border-bottom: 2px solid #21659e;
}

.case-form-header h4 {
    width: 200px;
    margin: 0;
    padding: 2px 5px;
    font-size: 1rem;
    font-weight: 400;
    color: #fff;
    display: inline-block;
    background: #21659e;
}

.case-state-status div div div span {
    margin-left: -12px;
    width: calc(100% + 30px);
}

.case-state-status div div:nth-child(2) div span {
    margin-left: -8px;
    width: calc(100% + 20px);
}

div.css-1rtrksz {
    padding: 0;
}

.linear-table-loader {
    position: absolute;
    width: calc(100% - 30px);
}

button span {
    text-transform: none;
}

.align-item-center {
    display: -webkit-flex; /* Safari */
    -webkit-align-items: center; /* Safari 7.0+ */
    display: flex;
    align-items: center;
}

table tbody tr:hover {
    background: rgba(224, 224, 224, 1);
    cursor: pointer;
}

/* width */
::-webkit-scrollbar {
	width: 5px;
	height: 5px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555; 
}

.footer {	
	text-align: center;
    padding: 20px;
    background: #114E7C;
    color: #fff;
}

.sidebar {
    height: 100%;
    padding: 0 !important;
    background: #327dc0;
    overflow: hidden;
}

.sidebar nav {
	padding-top: 0;
}

.menubar {
    width: 230px;
}

.menubar span,
.sidebar-menu span,
.sidebar nav span {
    color: #fff;
}

.menubar .active,
.sidebar-menu .active,
.sidebar .active {
    background: #21659e;
}

.menubar,
.sidebar-menu {
    height: 100%;
    background: #327DC0;
}

.sidebar-menu {
    width: 230px;
}

.menubar a,
.sidebar-menu a {
    display: block;
}

.menubar a:hover,
.sidebar nav a:hover,
.sidebar-menu a:hover {
    text-decoration: none !important;
}

.appbar .user {
	color: #21659e;
}

.appbar .logo {
	width: 130px;
}

.appbar .nav {
	padding-bottom: 5px;
}

.appbar .nav span {
    font-size: 13px;
}

.appbar .nav .nav-item {
	border-right: 1px solid #868585;
}

.appbar .nav .nav-item a {
	color: #929292;
}

.appbar .nav .nav-item a:hover {
	color: #4a4a4a;
}
.appbar .nav .nav-item a.active {
	color: #21659e;
    text-decoration: none;
}

.appbar .nav .nav-item:last-child {
	border-right: none;
}

.container-login {
    height: calc(100vh - 64px);
}

.background-login {
	z-index: -1;
    position: fixed;
    top: 0;
    left: 0;
    width: 30%;
    height: 100%;
    background-color: #7ECEFD; 
}

.login-block > div > .row > div {
    margin-bottom: 20px;
}

.login-form-title {
    font-family: 'Glegoo', serif !important;
	color: #21659e !important;
    float: left;
    padding-top: 20px;
}

.item-list > li {
    margin-bottom: 10px;
}

.item-list > li:hover {
    margin-bottom: 10px;
    cursor: pointer;
}

.logo-hover:hover {
    cursor: pointer;
}

.export-button {
    width: 160px;
}

.seach-button {
    margin-left: 10px !important;
}

.export-form-footer, .form-footer {
    text-align: right;
    border-top: 1px solid rgba(0, 0, 0, 0.14);
    padding-top: 10px;
}

.form-checkbox-field label:first-child {
    float: right;
}

.form-checkbox-field svg {
    color: #327DC0;
}

.form-file-field input[type=file] {
    font-size: 20px;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    cursor: pointer;
}

.case-dialog > div:nth-child(2) {
    padding: 0 15px 15px 15px;
}

/*********  Redio Button  ************/
.form-redio-button-field > fieldset {
    padding: 0 15px;
    display: block;
}

.form-redio-button-field > fieldset > div {
    display: inline-block;
}

.form-redio-button-field > fieldset > p {
    margin: 0;
    margin-bottom: 15px;
}

.form-redio-button-field > fieldset > div > label {
    display: inline-block;
    margin: 0;
    margin-right: 10px;
}

.form-redio-button-field > fieldset > div > label svg {
    margin-top: 5px;
    color: #327DC0;
}

.form-redio-button-field > fieldset > div > label > span {
    display: inline-block;
    color: #327DC0;
}

.form-redio-button-field > fieldset > div > label > span:nth-child(1) {
    height: 35px;
}

.form-redio-button-field > fieldset > div > label > span:nth-child(2) {
    font-size: 1rem;
}

@media (max-width: 351px) {
    .status-color-details-mobile span,
    .status-color-details-mobile span label {
        font-size: 11px;
    }
}

@media (min-width: 352px) and (max-width: 397px) {
    .status-color-details-mobile span,
    .status-color-details-mobile span label {
        font-size: 12px;
    }
}

@media (max-width: 447px) {
    .form-redio-button-field > fieldset > label,
    .form-redio-button-field > fieldset > div > label {
        display: block;
    }

    .background-login {
        background: url("/assets/img/mom-desktop.jpg");
        background-size: auto 100%;
        width: 100%;
    }
}

@media (max-width: 497px) {
    .main-container {
        min-height: calc(100vh - 55px - 53px - 15px);
    }
}

@media (max-width: 575px) {
    button {
        width: 100%;
    }

    .form-field {
        margin-bottom: 15px;
    }

    .seach-button {
        margin-left: 0 !important;
    }

    .export-button {
        width: 100%;
    }

    .export-form-footer {
        border-top: 0;
        padding-top: 0;
    }

    .case-dialog > div:nth-child(2) > div {
        width: 100%;
    }
    
    .case-dialog > div:nth-child(2) > div > button:nth-child(2) {
        margin-top: 5px !important;
    }
}

/******** Handle field width ********/
@media (min-width: 576px) {
    .form-field .CN.label,
    .form-field .HN.label,
    .form-field .To.label {
        min-width: 45px;
        max-width: 45px;
        width: 45px;
    }

    .form-field .CN.input,
    .form-field .HN.input,
    .form-field .To.input {
        min-width: calc(100% - 45px);
        max-width: calc(100% - 45px);
        width: calc(100% - 45px);
    }

    .form-field .Hospital.label,
    .form-field .Sent-By.label,
    .form-field .Toritory.label,
    .form-field .Keywords.label,
    .form-field .Username.label,
    .form-field .Password.label {
        min-width: 105px;
        max-width: 105px;
        width: 105px;
    }

    .form-field .Hospital.input,
    .form-field .Sent-By.input,
    .form-field .Toritory.input,
    .form-field .Keywords.input,
    .form-field .Username.input,
    .form-field .Password.input {
        min-width: calc(100% - 105px);
        max-width: calc(100% - 105px);
        width: calc(100% - 105px);
    }

    .form-field .Temp-Strip.label {
        min-width: 115px;
        max-width: 115px;
        width: 115px;
    }

    .form-field .Temp-Strip.input {
        min-width: calc(100% - 115px);
        max-width: calc(100% - 115px);
        width: calc(100% - 115px);
    }

    .form-field .Role.label,
    .form-field .Result.label,
    .form-field .Type.label,
    .form-field .Phone.label,
    .form-field .Status.label,
    .form-field .Doctor.label,
    .form-field .Test.label {
        min-width: 80px;
        max-width: 80px;
        width: 80px;
    }

    .form-field .Role.input,
    .form-field .Result.input,
    .form-field .Type.input,
    .form-field .Phone.input,
    .form-field .Status.input,
    .form-field .Doctor.input,
    .form-field .Test.input {
        min-width: calc(100% - 80px);
        max-width: calc(100% - 80px);
        width: calc(100% - 80px);
    }

    .form-field .Reference.label,
    .form-field .Received-By.label,
    .form-field .Invoice-No.label,
    .form-field .Analysis-1.label,
    .form-field .Analysis-2.label,
    .form-field .Approved-By.label,
    .form-field .Upload-File.label,
    .form-field .Collect-Date.label,
    .form-field .Submitted-By.label {
        min-width: 135px;
        max-width: 135px;
        width: 135px;
    }

    .form-field .Reference.input,
    .form-field .Received-By.input,
    .form-field .Analysis-1.input,
    .form-field .Analysis-2.input,
    .form-field .Invoice-No.input,
    .form-field .Approved-By.input,
    .form-field .Upload-File.input,
    .form-field .Submitted-By.input,
    .form-field .Collect-Date.input {
        min-width: calc(100% - 135px);
        max-width: calc(100% - 135px);
        width: calc(100% - 135px);
    }

    .form-field .Billing-Remark.label,
    .form-field .Collection-Date.label,
    .form-field .Receiving-Date.label,
    .form-field .Reporting-Date.label {
        min-width: 155px;
        max-width: 155px;
        width: 155px;
    }

    .form-field .Billing-Remark.input,
    .form-field .Collection-Date.input,
    .form-field .Receiving-Date.input,
    .form-field .Reporting-Date.input {
        min-width: calc(100% - 155px);
        max-width: calc(100% - 155px);
        width: calc(100% - 155px);
    }

    .form-field .Full-Name.label {
        min-width: 115px;
        max-width: 115px;
        width: 115px;
    }

    .form-field .Full-Name.input {
        min-width: calc(100% - 115px);
        max-width: calc(100% - 115px);
        width: calc(100% - 115px);
    }

    .form-field .Analysis-Remark.label,
    .form-field .Report-Due-Date.label,
    .form-field .Final-Checked-By.label,
    .form-field .Report-Sent-Date.label,
    .form-field .Confirm-Password.label {
        min-width: 180px;
        max-width: 180px;
        width: 180px;
    }

    .form-field .Analysis-Remark.input,
    .form-field .Report-Due-Date.input,
    .form-field .Final-Checked-By.input,
    .form-field .Report-Sent-Date.input,
    .form-field .Confirm-Password.input {
        min-width: calc(100% - 180px);
        max-width: calc(100% - 180px);
        width: calc(100% - 180px);
    }

    .form-field .Report-Uploaded-By.label {
        min-width: 190px;
        max-width: 190px;
        width: 190px;
    }

    .form-field .Report-Uploaded-By.input  {
        min-width: calc(100% - 190px);
        max-width: calc(100% - 190px);
        width: calc(100% - 190px);
    }

    .form-field .Estimated-Reporting-Date.label,
    .form-field .Report-Sending-Method.label {
        min-width: 230px;
        max-width: 230px;
        width: 230px;
    }

    .form-field .Estimated-Reporting-Date.input,
    .form-field .Report-Sending-Method.input {
        min-width: calc(100% - 230px);
        max-width: calc(100% - 230px);
        width: calc(100% - 230px);
    }

    .search-form .form-search-field-group {
        min-width: calc(100% - 300px);
        max-width: calc(100% - 300px);
        width: calc(100% - 300px);

    }

    .search-form .form-button-group {
        min-width: 300px;
        max-width: 300px;
        width: 300px;
    }

    .search-form button {
        margin-top: 0 !important;
    }

    .simple-search-form .form-search-field-group {
        min-width: calc(100% - 160px);
        max-width: calc(100% - 160px);
        width: calc(100% - 160px);

    }

    .simple-search-form .form-button-group {
        min-width: 160px;
        max-width: 160px;
        width: 160px;
    }

    .simple-search-form button {
        margin-top: 0 !important;
    }

    .case-dialog > div:nth-child(2) > div {
        margin: auto;
    }
    
    .case-dialog > div:nth-child(2) > div > button:nth-child(2) {
        margin-left: 5px;
    }
}

@media (min-width: 448px) and (max-width: 769px) {
    .background-login {
        background: url("/assets/img/mom-desktop.jpg");
        background-size: 100% auto;
        width: 100%;
    }
}

@media (min-width: 498px) and (max-width: 769px) {
    .main-container {
        min-height: calc(100vh - 55px - 53px - 15px);
    }
}

@media (max-width: 767px) {    
    .container-login {
        height: 100vh;
    }

    .login-form-title {
        float: none;
        margin-bottom: 20px !important;
        padding-top: 0;
    }

    .login-paper {
        width: 100%;
    }

    .login-block > div {
        padding: 15px 30px !important;
    }   

    .login-block {
        height: max-content;
    }  

    .main-container {
        height: max-content;
    }

    .main-container .main-content {
        overflow: unset;
    }

    button {
        margin-top: 10px !important; 
    }
}

@media (min-width: 768px) {
    .login-paper {
        width: 720px;
    }

    .login-paper > div > .row {
        padding: 0px 15px;
    }

    .login-block {
        height: 420px;
    }

    .form-date-section .row > div {
        min-width: 50%;
        max-width: 50%;
        width: 50%;
    }
    
    .form-date-section .row > div.end_receiving_date,
    .form-date-section .row > div.end_report_date {
        text-align: center;
    }

    body div.sidebar {
        min-width: 230px;
        max-width: 230px;
    }

    body div.main-content {
        min-width: calc(100% - 230px);
        max-width: calc(100% - 230px);
    }

    .main-container {
        height: calc(100vh - 64px - 69px - 15px);
    }

    .main-container > .row {
        height: 100%;
    }
}

@media (max-width: 785px) {
    .appbar .nav span {
        font-size: 10px;
    }

    .footer span {
        font-size: 9px;
    }
}

@media (min-width: 786px) and (max-width: 900px) {
    .appbar .nav span {
        font-size: 11px;
    }
}

@media (max-width: 900px) {
    .appbar .logo {
        width: 100px;
    }
}

@media (max-width: 900px) {
    .form-date-section > .field-date .label,
    .form-date-section > .field-date .input {
        width: 100%;
        min-width: 100%;
        max-width: 100%;
    } 
}

@media (max-width: 1000px) {
    .case-form-info-content > .col-md-4,
    .case-form-report-content > .col-md-4 {
        width: 100%;
        min-width: 100%;
        max-width: 100%;
    }
}

@media (min-width: 1001px) and (max-width: 1300px) {
    .form-date-section > .field-date {
        width: 100%;
        min-width: 100%;
        max-width: 100%;
    } 

    .case-form-info-content > .col-md-4,
    .case-form-report-content > .col-md-4 {
        width: 50%;
        min-width: 50%;
        max-width: 50%;
    }
}

@media (max-width: 1300px) {
    .form-date-section > .field-date {
        width: 100%;
        min-width: 100%;
        max-width: 100%;
    }
}