.panel {
    box-shadow: 0 1px 1px #ccc;

}

[v-cloak] {
    display: none;
}


.mandatory {
    color: red;
}

.mb-0 { margin-bottom: 0; }
.mt-0 { margin-top: 0; }
.ml-0 { margin-left: 0; }
.mr-0 { margin-right: 0; }

.p15 { padding: 15px; }

.pl-5 { padding-left: 5px; }

.pt-5 { padding-top: 5px; }
.pt-15 { padding-top: 15px; }

.pb-15 { padding-bottom: 15px; }
.pb-30 { padding-bottom: 30px; }

.pointer {
    cursor: pointer;
}


input[type="radio"] {
    width: 18px;
    height: 18px;
}

#ui-datepicker-div {
    z-index: 1060 !important;
}





@media only screen and (max-width: 768px) {

	.panelbg {
	}

	.panel-title {
		font-weight: bold;
	}

	/*body {
		background-color: #f5f5f5;
	}*/

	.navbar-inverse {
		min-height: 50px;
	}

	.navbar-inverse .btn-link {
		color: white;
		margin-top: 8px;
	}


	.mobtext {
		color: white;
	}
}

.navbar-inverse {
    border-radius: 0 !important;
}

.ajax_ready a {
    color: inherit;
}

/*Form Error Check*/
span[id$=_Err] {
    color: orangered;
    padding-left: 5px;
    font-weight: bold;
    display: none;
}

.has-err, .has-error span[id$=_Err] {
	display: inline !important;
}

.serviceSpinner {
    margin: 3px;
}


.btnview-r a, .btnview-r button {
    margin-left: 10px;
}

.btnview-l a, .btnview-l button {
    margin-right: 10px;
}

.gray {
    color: gray;
}


[v-cloak] {
    display: none;
}

.modal-footer {
    padding-top: 15px !important;
}


.label-new {
    background-color: inherit;
    color: #4CAF50;
    margin-left: 2px;
}


/*margin & padding*/
.m-0 { margin: 0; }
.m-5 { margin: 5px; }
.m-10 { margin: 10px; }
.m-15 { margin: 15px; }

.mt-0 { margin-top: 0; }
.mt-5 { margin-top: 5px; }
.mt-10 { margin-top: 10px; }
.mt-15 { margin-top: 15px; }
.mt-20 { margin-top: 20px; }
.mt-30 { margin-top: 30px; }
.mt-40 { margin-top: 40px; }

.mb-0 { margin-bottom: 0; }
.mb-5 { margin-bottom: 5px; }
.mb-10 { margin-bottom: 10px; }
.mb-15 { margin-bottom: 15px; }

.ml-0 { margin-left: 0; }
.ml-2 { margin-left: 2px; }
.ml-3 { margin-left: 3px; }
.ml-5 { margin-left: 5px; }
.ml-10 { margin-left: 10px; }
.ml-15 { margin-left: 15px; }
.ml-20 { margin-left: 20px; }
.ml-30 { margin-left: 30px; }
.ml-40 { margin-left: 40px; }
.ml-50 { margin-left: 50px; }

.mr-0 { margin-right: 0; }
.mr-2 { margin-right: 2px; }
.mr-3 { margin-right: 3px; }
.mr-5 { margin-right: 5px; }
.mr-10 { margin-right: 10px; }
.mr-15 { margin-right: 15px; }

.mx-0 { margin-left: 0; margin-right: 0; }
.mx-5 { margin-left: 5px; margin-right: 5px; }
.mx-10 { margin-left: 10px; margin-right: 10px; }
.mx-15 { margin-left: 15px; margin-right: 15px; }

.my-0 { margin-top: 0; margin-bottom: 0; }
.my-5 { margin-top: 5px; margin-bottom: 5px; }
.my-10 { margin-top: 10px; margin-bottom: 10px; }
.my-15 { margin-top: 15px; margin-bottom: 15px; }




.p-0 { padding: 0; }
.p-5 { padding: 5px; }
.p-10 { padding: 10px; }
.p-15 { padding: 15px; }

.pt-0 { padding-top: 0; }
.pt-5 { padding-top: 5px; }
.pt-10 { padding-top: 10px; }
.pt-15 { padding-top: 15px; }

.pb-0 { padding-bottom: 0; }
.pb-5 { padding-bottom: 5px; }
.pb-10 { padding-bottom: 10px; }
.pb-15 { padding-bottom: 15px; }

.pl-0 { padding-left: 0; }
.pl-5 { padding-left: 5px; }
.pl-10 { padding-left: 10px; }
.pl-15 { padding-left: 15px; }

.pr-0 { padding-right: 0; }
.pr-5 { padding-right: 5px; }
.pr-10 { padding-right: 10px; }
.pr-15 { padding-right: 15px; }

.px-0 { padding-left: 0; padding-right: 0; }
.px-5 { padding-left: 5px; padding-right: 5px; }
.px-10 { padding-left: 10px; padding-right: 10px; }
.px-15 { padding-left: 15px; padding-right: 15px; }

.py-0 { padding-top: 0; padding-bottom: 0; }
.py-5 { padding-top: 5px; padding-bottom: 5px; }
.py-10 { padding-top: 10px; padding-bottom: 10px; }
.py-15 { padding-top: 15px; padding-bottom: 15px; }


.w100 { width: 100%; }
.h100 { width: 100% }


.p15 { padding: 15px; }

.pb-30 { padding-bottom: 30px; }

/*margin & padding*/

.ib { display: inline-block; }




.bt-0 { border-top: 0; }
.bb-0 { border-bottom: 0; }
.bl-0 { border-left: 0; }
.br-0 { border-right: 0; }









@media screen and (max-width: 400px) {
    .navbar-brand {
        font-size: 14px;
    }
}

.btn:hover:not(.btn-link), .btn:focus:not(.btn-link) {
    box-shadow: inset 0 0 0 99999px rgba(55, 55, 55, 0.3);
}



.focus.checker span {
    color: #455A64;
    border: 2px solid #66afe9;
    text-align: center;
    border-radius: 2px;
}

.focus.choice span {
    border: 2px solid #66afe9;
}

.pointer {
    cursor: pointer;
}

/* sort button */
.sortbtn {
    cursor: pointer;
    position: relative;
    padding-right: 35px !important;
}

.sortbtn:before, .sortbtn:after {
    position: absolute;
    right: 2rem;
    font-family: icomoon;
    opacity: .5;
    display: inline-block;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.sortbtn:before {
    content: "";
    bottom: 0.3rem;
}

.sortbtn:after {
    content: "";
    bottom: 1.3rem;
}

.sortbtn.asc:after, .sortbtn.desc:before {
    opacity: 0.1;
}

.sortbtn.asc:before, .sortbtn.desc:after {
    opacity: 1;
    transition: opacity ease 0.2s;
}
/* sort button */

@keyframes highlight2 {
    0% {
        background: #ffff99;
    }

    100% {
        background: none;
    }
}

.highlight2 {
    animation: highlight2 2s;
}

@keyframes highlight3 {
    0% {
        opacity: 0.1;
    }

    100% {
        opacity: 1;
    }
}

.highlight3 {
    animation: highlight3 2s;
}

.blink-me {
    animation: blinker 1s linear infinite;
}

.flex-box {
    display: flex;
    align-items: center;
}

.flex-box .flex-right {
    margin-left: auto;
}
.flex-base {
    display: flex;
    align-items: baseline;
}

.flex-end{
    display:flex;
    align-items:center;
    justify-content:flex-end;
}

.filter-group .form-group.divider {
    width: 1px;
    height: 50px;
    background-color: #bbb;
    margin-bottom: 5px;
}
@keyframes blinker {
    50% {
        opacity: 0;
    }
}

.filter-group .form-group {
    margin-right: 15px;
}

/*to make alert modal can display above normal modal*/
#alert_modal {
    z-index: 1051;
}

.modal-header .close {
     margin-top: -9.75px; 
}

.tooltip-white +.tooltip > .tooltip-inner,
.tooltip-white > .tooltip-inner{
    background-color: white;
    color:black;
    border: black 1px solid;
}


.contact-list .contact-row-icon {
    font-size: 28px;
    color: #BBBBBB;
    margin-top: 5px;
    margin-right: 5px;
}

    .contact-list .contact-row-icon.icon-user-check {
        color: #5AB85F;
    }

.contact-list .contact-row-title {
    float: left;
}
.contact-list .contact-row-sub-title {
    color: gray;
}

:focus-visible {
    box-shadow: inset 0 0 0 2px #90c4f9;
}

/* Keyboard focus ring (WCAG 2.4.7, 1.4.11). #1565c0 is 5.7:1 on white and 5.3:1 on the #f5f5f5
   panel grey, and the offset makes it a change of shape, not only of colour. It is !important
   because core.css and components.css zero the outline on :focus with heavier selectors
   (.form-control:focus, .btn:focus, .has-error .form-control:focus, the vendor widgets).
   :focus-visible is keyboard only, except on text fields, which match it on a mouse click too.
   Those get the ring only while html.a11y-kbd is set (wcag.js: Tab sets it, a mouse or touch
   press clears it), so a mouse user sees nothing new. Plain CSS3 selectors on purpose: the
   bundle's minifier predates :is(). */
*:focus-visible:not(input):not(textarea):not(select),
input[type=checkbox]:focus-visible,
input[type=radio]:focus-visible,
input[type=button]:focus-visible,
input[type=submit]:focus-visible,
input[type=reset]:focus-visible,
input[type=image]:focus-visible,
input[type=file]:focus-visible,
input[type=range]:focus-visible,
html.a11y-kbd *:focus-visible {
    outline: 2px solid #1565c0 !important;
    outline-offset: 2px;
}

/* Full-width links sit flush against containers that clip, so their ring is drawn inside. */
html .navbar *:focus-visible,
html .sidebar *:focus-visible,
html .dropdown-menu *:focus-visible {
    outline-offset: -2px;
}

/* On the dark chrome the ring is white, like the text it sits beside. */
html .navbar-inverse *:focus-visible,
html .sidebar:not(.sidebar-default) *:focus-visible {
    outline-color: #fff !important;
}

html .navbar-inverse .dropdown-menu *:focus-visible {
    outline-color: #1565c0 !important;
}

/* A dialog takes focus when it opens; it is a container, not a control. The main region takes
   focus from the skip link (wcag.js); it is a container too. */
html .modal:focus-visible,
html #main:focus-visible {
    outline: 0 !important;
}

/* Skip link (WCAG 2.4.1): the first thing Tab reaches on every page. Out of the flow and off
   screen until it has focus, then shown over the masthead, so nothing on the page moves. */
.a11y-skip {
    position: absolute;
    top: 0;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.a11y-skip:focus {
    left: 8px;
    top: 8px;
    width: auto;
    height: auto;
    z-index: 2000;
    padding: 8px 12px;
    background: #fff;
    color: #1565c0;
    border: 1px solid #1565c0;
    border-radius: 3px;
    font-weight: 600;
}

/* Styled checkboxes, radios, file inputs and switches keep the real input transparent or off
   screen, so the ring goes on the visible part. wcag.js puts a11y-focus on the wrapper while its
   input has keyboard focus; :has() would do it in CSS, but the bundle's minifier rejects it. */
.checker.a11y-focus span,
.choice.a11y-focus span,
.uploader.a11y-focus,
html .bootstrap-switch.a11y-focus {
    outline: 2px solid #1565c0;
    outline-offset: 2px;
}

.sidebar .text-grey-contrast {
    color: #9c9c9c;
    font-size: 0.85rem;
}

.login-container .page-container .login-form {
    width: 325px !important;
}

/* WCAG 1.4.3: theme colours that fail 4.5:1, moved to the theme's own darker shade (Limitless
   palette or Bootstrap's own state colour) or, where none passes, the nearest shade of the same hue.
   Amber and orange fills keep their colour and take dark text. */
.bg-primary,
a.bg-primary:hover,
a.bg-primary:focus {
    background-color: #1976D2;
    border-color: #1976D2;
}

.bg-blue {
    background-color: #0277BD;
    border-color: #0277BD;
}

.bg-success {
    background-color: #2E7D32;
    border-color: #2E7D32;
}

.bg-danger {
    background-color: #D32F2F;
    border-color: #D32F2F;
}

.bg-warning {
    background-color: #BF360C;
    border-color: #BF360C;
}

.btn-success,
.label-success {
    background-color: #398439;
    border-color: #2d672d;
}

.btn-success:hover,
.btn-success:focus,
.btn-success.focus,
.btn-success:active,
.btn-success.active,
.btn-success:active:hover,
.btn-success:active:focus,
.open > .dropdown-toggle.btn-success,
a.label-success:hover,
a.label-success:focus {
    background-color: #2d672d;
    border-color: #255625;
}

.btn-danger,
.label-danger {
    background-color: #d43f3a;
}

.btn-primary:focus,
.btn-primary.focus,
.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary,
.btn-primary:active:hover,
.btn-primary.active:hover,
.open > .dropdown-toggle.btn-primary:hover,
.btn-primary:active:focus,
.btn-primary.active:focus,
.open > .dropdown-toggle.btn-primary:focus,
.btn-primary:active.focus,
.btn-primary.active.focus,
.open > .dropdown-toggle.btn-primary.focus {
    background-color: #1976D2;
    border-color: #1976D2;
}

.btn-danger:focus,
.btn-danger.focus,
.btn-danger:hover,
.btn-danger:active,
.btn-danger.active,
.open > .dropdown-toggle.btn-danger,
.btn-danger:active:hover,
.btn-danger.active:hover,
.open > .dropdown-toggle.btn-danger:hover,
.btn-danger:active:focus,
.btn-danger.active:focus,
.open > .dropdown-toggle.btn-danger:focus,
.btn-danger:active.focus,
.btn-danger.active.focus,
.open > .dropdown-toggle.btn-danger.focus {
    background-color: #D32F2F;
    border-color: #D32F2F;
}

.btn-warning:focus,
.btn-warning.focus,
.btn-warning:hover,
.btn-warning:active,
.btn-warning.active,
.open > .dropdown-toggle.btn-warning,
.btn-warning:active:hover,
.btn-warning.active:hover,
.open > .dropdown-toggle.btn-warning:hover,
.btn-warning:active:focus,
.btn-warning.active:focus,
.open > .dropdown-toggle.btn-warning:focus,
.btn-warning:active.focus,
.btn-warning.active.focus,
.open > .dropdown-toggle.btn-warning.focus {
    background-color: #ec971f;
    border-color: #d58512;
}

.label-info {
    background-color: #20809d;
}

.label-default {
    background-color: #707070;
}

.btn-warning,
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.label-warning,
.bg-orange {
    color: #333;
}

a {
    color: #2e6da4;
}

.text-primary,
.text-primary:hover,
.text-primary:focus {
    color: #1565C0 !important;
}

.text-success,
.text-success:hover,
.text-success:focus,
.label-new {
    color: #2E7D32 !important;
}

.text-danger,
.text-danger:hover,
.text-danger:focus,
.mandatory {
    color: #D32F2F !important;
}

.text-warning,
.text-warning:hover,
.text-warning:focus {
    color: #BF360C !important;
}

.text-info,
.text-info:hover,
.text-info:focus {
    color: #007e8e !important;
}

.text-grey,
.text-grey:hover,
.text-grey:focus {
    color: #707070 !important;
}

.text-muted,
.help-block,
.help-inline,
.help-inline:not(.label),
.gray,
.contact-list .contact-row-sub-title,
.uploader .filename,
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small,
.h1 small, .h2 small, .h3 small, .h4 small, .h5 small, .h6 small {
    color: #707070;
}

span[id$=_Err] {
    color: #d43900;
}

.modal-header[class*=bg-] .close {
    opacity: 1;
}

/* WCAG 1.4.3: the Day 14 colours components used to set inline, shared. !important keeps the
   inline style's precedence. Same block in the back office site.css. */
.a11y-text-danger {
    color: #D32F2F !important;
}

.a11y-text-muted {
    color: #707070 !important;
}

.a11y-text-warning {
    color: #D43900 !important;
}

.a11y-text-caution {
    color: #9E6700 !important;
}

.a11y-icon-warning {
    color: #C78100 !important;
}

.a11y-row-danger {
    color: #FFFFFF !important;
    background-color: #D32F2F !important;
}

/* WCAG 3.3.2: the login fields' visible labels (Day 14) sit inside the form group, so the icon
   moves down by the label's height (20px line + 7px margin) to stay inside the field. */
.has-feedback > .a11y-field-label ~ .form-control-feedback,
.has-feedback-left > .a11y-field-label ~ .form-control-feedback {
    top: 27px;
}

/* WCAG 1.4.1 (GLB-09): a field in error also shows a warning sign inside its right edge, so the error
   is not told by colour alone. It is the control's own background, so nothing is added or moved; both
   error helpers (ajax-helper.js, error-helper.js) mark the errored control with data-a11y-describes. */
.form-control[data-a11y-describes],
.vmultiselect > button.dropdown-toggle[data-a11y-describes] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='none' stroke='%23D32F2F' stroke-width='1.5'/%3E%3Crect x='7.25' y='3.5' width='1.5' height='5.5' fill='%23D32F2F'/%3E%3Ccircle cx='8' cy='11.5' r='1' fill='%23D32F2F'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 16px 16px;
    padding-right: 30px;
}

textarea.form-control[data-a11y-describes] {
    background-position: right 8px top 8px;
}

select.form-control[data-a11y-describes],
.vmultiselect > button.dropdown-toggle[data-a11y-describes] {
    background-position: right 26px center;
    padding-right: 48px;
}

/* WCAG 1.4.1: a link inside a sentence is underlined; wcag.js marks it. */
a.a11y-text-link {
    text-decoration: underline;
}