/********************************************************/
/* CSS -webkit: For Safari rendering
/* CSS !important: Master rule, override all rules
/*
/* COLOR - #000000: Black
/* COLOR - #FFFFFF: White
/* COLOR - #FB3640: Red 
/* COLOR - #FF704D: Orange (Nav Hover)
/* COLOR - #FEF08A: Light Yellow
/* COLOR - #FFFF00: Yellow
/* COLOR - #FEBE48: Orange
/* COLOR - #F4D58D: Peach
/* COLOR - #EDFFC2: Green
/* COLOR - #C4CCD4: Gray
/* COLOR - #6C3DB8: Violet  
/* COLOR - #999999: Dark Gray 
/* COLOR - #E0E0E0: Light Gray 
/* COLOR - #E6E6E6: Super Light Gray 
/* COLOR - #FFFFEB: Ghost Gray 

/* COLOR - #12353A: Super Dark Pine Green Blue 
/* COLOR - #074F57: Dark Pine Green Blue 
/* COLOR - #009999: Medium Pine Green Blue 
/* COLOR - #00B3B3: Light Pine Green Blue 
/* COLOR - #64C8FF: Light Blue
/* COLOR - #77ABF8: Medium Blue (File Logo)
/* COLOR - #6495ED: Medium Gray Blue
/* COLOR - #3B82F6: Deep Medium Blue / Azure
/* COLOR - #0000FF: True Blue 
/* COLOR - #E0ECFA: Ghost Blue
/********************************************************/

/* ************************************************************************************************* */
/* **************************************** GENERAL ************************************************ */
/* ************************************************************************************************* */

*,
*::before,
*::after 
{
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

html 
{
	font-family: sans-serif;

	line-height: 1em;

	-webkit-text-size-adjust: 100%; /*To resize font when browser zoom*/
	-webkit-tap-highlight-color: #FFFFFF; /*Show color when finger tapped*/
}

article, aside, figcaption, figure, footer, header, hgroup, main, nav, section 
{
	display: block; /*Display in newline, takes full width*/
}

body 
{
	font-weight:700;
	font-size: 13px;
	font-family: sans-serif;
        letter-spacing: 0.8px;
        
	margin: 0;
	color: #2B2B2B;
        padding-top: 80px; /* match your navbar height */
}

[tabindex="-1"]:focus /*Non-focusable element*/
{
	outline: 0 !important;
}

hr 
{
	height: 1px;
	width: 100%;
	color: #999999;
	overflow: visible;
	box-sizing: content-box;
	-webkit-box-sizing: content-box;
}

hr:not([size]) 
{
	height: 1px;
}

h1
{
        letter-spacing: 1px;
}

h4
{
	margin:0;
	margin-bottom:4px;
        font-size: 0.95rem;
}

h5
{
	margin:0;
        font-size: 1rem;
	font-weight: bold;
}

h6
{
	margin:0;
	margin-bottom:4px;
        font-size: 0.8rem;
	font-weight: bold;
}

a
{
	outline : none;
	color:#2B2B2B;     
        font-weight: 700; 
}

p 
{
	margin: 0;
}

mark 
{
	background-color: #FFFF00!important;
}

input
{
	background-color: #E6E6E6;
}

#content-wrapper 
{
	width: 100%;
	overflow: hidden;
	background-color: transparent;
}

#content-wrapper #content 
{
	flex: 1 0 auto;
	-ms-flex: 1 0 auto;
	-webkit-box-flex: 1;
}

.container,
.container-fluid 
{
	width: 100%;
        padding-left: 1rem;
        padding-right: 1rem;
}

.orange
{
        font-weight:600;
	color:#2B2B2B;
	text-transform:underline;
}

.pink
{
        font-weight:600;
	color:#2B2B2B;
	text-transform:underline;
        margin: 10px 10px 10px 10px;
}

.text-uppercase
{
	--text-transform:uppercase; 
}

.space-between 
{
	display: flex;
	justify-content: space-between;
}

.align-center
{
	align-items: center;
}

.left
{
	text-align:left;
}

.center
{
	text-align:center;
}

.right
{
	text-align:right !important;
}

.bold
{
	font-weight: bold;
}

.normal
{
	font-weight: normal;
}

.border-dotted
{
    border-style: dotted !important;
}

.border-top-dotted
{
    border-top-style: dotted !important;
}

.border-left-dotted
{
    border-top-style: dotted !important;
}

.border-bottom-dotted
{
    border-top-style: dotted !important;
}

.border-right-dotted
{
    border-top-style: dotted !important;
}

.border-dashed
{
    border-style: dashed !important;
}
.border-top-dashed
{
    border-top-style: dashed !important;
}

.border-left-dashed
{
    border-top-style: dashed !important;
}

.border-bottom-dashed
{
    border-top-style: dashed !important;
}

.border-right-dashed
{
    border-top-style: dashed !important;
}

.description
{
    font-weight: 600;
    font-size:0.85rem;
    color:#2B2B2B;
}
.bottom-25 {
  bottom: 25% !important; /* moves it up 25% of viewport height */
}
.padding-top-0 {
  padding-top: 0 !important;
}
.height-500 {
  height: 500px !important;
}
/* ************************************************************************************************* */
/* ******************************************* LOGO ************************************************ */
/* ************************************************************************************************* */

.floating-logo-box
{
    width: 40px; 
    height: 40px;
}

.logo-box
{
    width: 36px; 
    height: 36px;
}

.salmon-logo
{
    color:#EF7272;
}

.orange-logo
{
    color:#FFD365;
}

.pink-logo
{
    color:#EF72D0;
}

.lavender-logo
{
    color:#727CF5;
}

.navy-logo
{
    color:#3A2AB1;
}

.darkgreen-logo
{
    color:#1C946C;
}

.lightblue-logo
{
    color:#72E2EF;
}

.lightgreen-logo
{
    color:#A2EF72;
}

.darkblue-logo
{
    color:#3867F4;
}

.plum-logo
{
    color:#7F42B1;
}

.yellow-logo
{
    color:#FEF08A;
}

.cloud-logo
{
    font-size:30px;
    color:#77ABF8;
    padding-right:10px;
}

.folder-logo
{
    font-size:22px;
    color:#FEF08A;
    padding-right:10px;
}

.breadcrumb-logo
{
    font-size:12px;
    color:#FEF08A;
    margin-right:10px;
}

.file-logo
{
    font-size:18px;
    color:#77ABF8;
    padding-right:10px;
}

.sitemap-logo
{
    font-size:26px;
    color:#77ABF8;
    padding-right:5px;
	padding-bottom:5px;
}

/* ************************************************************************************************* */
/* **************************************** NAVBAR ************************************************* */
/* ************************************************************************************************* */

.animated--grow-in
{
	-webkit-animation-name: growIn;
	animation-name: growIn;

	-webkit-animation-duration: 200ms;
	animation-duration: 200ms;

	-webkit-animation-timing-function: transform cubic-bezier(0.18, 1.25, 0.4, 1), opacity cubic-bezier(0, 1, 0.4, 1);
	animation-timing-function: transform cubic-bezier(0.18, 1.25, 0.4, 1), opacity cubic-bezier(0, 1, 0.4, 1);
}

@media screen and (max-width: 600px) {
	.sidebar-brand {
		visibility: hidden;
		display: none;
		clear: both;
		width: 0;
	}
         .navbar {
            position: absolute;
            top: 0; /* right below navbar */
            left: 0;
            width: 100%;
            background: #fff; /* match navbar background */
        }
        .navbar .navbar-collapse {
            position: fixed;
            top: 0;
            left: 0;
            height: 100vh;
            width: 100%;
            background: #fff;
            overflow-y: auto;
            padding: 1rem;
            display: flex;
            flex-direction: column;
            z-index: 30!important;

            /* Start hidden */
            transform: translateY(-100%);
            opacity: 0;
            transition: transform 0.4s ease, opacity 0.4s ease;
        }

        .navbar .navbar-collapse.show {
            transform: translateY(0);
            opacity: 1;
        }

        /* Hide close button by default */
        .navbar .btn-close {
            display: none;
        }

        /* Show close button only when navbar is open */
        .navbar .navbar-collapse.show .btn-close {
            display: block;
            position: absolute;   /* stay in the top-right corner */
            top: 1rem;
            right: 1rem;
            z-index: 105!important;  
        }
}

.navbar {
   z-index: 5;
}
.nav-logo
{
    width: 32px;
    height: 32px;
}

.navbar-nav 
{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	padding-left: 0;
	margin-bottom: 0;
	list-style: none;
}

.navbar-nav .nav-link 
{
	color: #2B2B2B!important;
	padding-right: 0;
	padding-left: 0;
	outline: none;
}

.nav-tabs .nav-item .nav-link.active {
	font-weight: 600;
	color: #3372BF;
	background-color: #E0ECFA;
}

.nav-item > a:hover {
	color: #3372BF;
	background-color: #E0ECFA;
	cursor: pointer;
	outline: none;
}

.dropdown-menu > a:hover {
	color: #3372BF;
	background-color: #E0ECFA;
	cursor: pointer;
	outline: none;
}
.dropdown-item {
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}


.dropdown.no-arrow .dropdown-toggle::after 
{
	display: none;
}


.gradient-tabs .nav-tabs {
    border: none;
    gap: 0.5rem;
}

.gradient-tabs .nav-link {
    border: none;
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    font-weight:600;
    color: #3372BF;
    transition: all 0.3s ease;
    background: linear-gradient(145deg, #FAFEFF, #FAFEFF);
}

.gradient-tabs .nav-link:hover {
    background: linear-gradient(145deg, #F5FDFF, #F5FDFF);
    color: #2B2B2B;
    font-weight:600;
}

.gradient-tabs .nav-link.active {
    background: white;
    color: #6366f1;
    font-weight:600;
}

.gradient-tabs .tab-content {
    background: white;
    padding: 1.5rem;
    border-radius: 0.5rem;
}

/* ************************************************************************************************* */
/* **************************************** SEARCH ************************************************* */
/* ************************************************************************************************* */
#search-dropdown {
	position: fixed; /* Sit on top of the page content */
	display: none; /* Hidden by default */
	width: 300px; /* Full width (cover the whole page) */
	height: 150px; /* Full height (cover the whole page) */
	top: 50%;
	left: 50%;
	background-color: #FFFFFF; /* Black background with opacity */
	box-shadow: 2px 2px 21px 1px rgba(0,0,0,0.3);
	z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
	cursor: pointer; /* Add a pointer on hover */
	overflow: scroll;
}

.search-header {
	color: #FB3640;
    font-size:14px;
	text-align: center;
	margin: 3px  auto ; 
}

.search-dd-item {
	display: block;
	width:100%;
	padding: 3px 3px 3px 6px; 
	margin-bottom: 3px;
	color: #12353A; 
	font-weight:700;
	font-size: 0.75rem;
	text-align:left;
	text-decoration: none;
	border: none;
	border-bottom: 1px solid #E0E0E0;
	background-color: #FFFFFF;
}

.search-dd-item:hover {
	display: block;
	width:100%;
	padding: 3px; 
	margin-bottom: 3px;
	color: #0000FF; 
	font-weight:700;
	font-size: 0.75rem;
	text-decoration: none;
	border: none;
	border-bottom: 1px solid #E0E0E0;
	background-color: #FFFFFF;
}


    .search-highlight { background: yellow; padding: 0 2px; border-radius: 2px; }
    .search-highlight.active { outline: 3px solid orange; background: #fffa8c; }
/* ************************************************************************************************* */
/* **************************************** BREADCRUMB ********************************************* */
/* ************************************************************************************************* */

.breadcrumb
{
	padding:10px 14px;
	color:#2B2B2B; 
	background: #E0ECFA; 
	border-radius:2px;
}

.breadcrumb_arrow
{
	color:#2B2B2B;
	padding: 0 0.1538rem 0 0.1538rem;
}

.breadcrumb >.active 
{
   color: #3372BF;
   text-decoration: none;
}

a.breadcrumb-item
{
   color: #2B2B2B;
   text-decoration: none;
}

/* ************************************************************************************************* */
/* **************************************** INPUT ************************************************** */
/* ************************************************************************************************* */

.form-control
{
	outline: none;
	font-size: 0.75rem;
	background-color: #FFFFFF;
}

.form-label-field
{
	width: 100%;
	outline: #E0E0E0 solid 1px;
	margin-bottom: 0.4rem;
        padding: 0.0rem 0.4rem;   
	
	text-align:left;
	font-weight:700;
	font-size: 0.75rem;
	
	color: #000000;
	background-color: #E0ECFA;
	
	border-radius: 2px;
}

.form-label-transparent
{
	width: 100%;
	height:auto;
	outline: none;
	margin-bottom: 0.4rem;
	padding: 0.0rem 0.2rem 0.0rem 0.2rem;
	
	text-align:left;
	font-weight:700;
	font-size: 0.75rem;
	font-style: italic;

	color: #12353A;
	background-color: none;
	
	border-width: 0;
}

input[type=checkbox][disabled] {
    border: 1.8px solid!important;
    border-radius: .25rem!important;
    border-color: #C4CCD4!important;
}

.form-checkbox-field
{
	width: 1.05rem;
	height: 1.2rem;
	outline: none;
	margin-top:0.1px;
        
	font-weight:700;
	font-size: 0.75rem;
	
	color: #0000FF;
	background-color: #FFFFFF;
}

.form-checkbox-field:hover
{
    cursor: pointer;   
}

.form-checkbox
{
	width: 30%;
}

.checkbox-row{
	display: inline-flex;
}

.checkbox-border
{
    border: 1.8px solid!important;
    border-radius: .25rem!important;
    border-color: #3B82F6!important;
}

input.detail-input-checkbox-field
{
    height: 1.05rem;
	width: 1.05rem;
    margin-top: .25em;
    vertical-align: top;
    background-color: #FFFFFF;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: 1px solid rgba(0,0,0,.25);
    border-radius: .25em;
}

.input-field
{
	width: 100%;
	outline: none;
	margin-bottom: 0.3rem;
	
	color:#12353A;
	background-color: #FFFFFF;
	font-weight:700;
	font-size: 0.9rem;
        letter-spacing: 1.2px;
	
	border-radius: 0px;
	border-color: #999999;
	border-width: 0 0 1px;
}

.form-input-field
{
	width: 100%;
	height:auto;
	outline: none;
	margin:0;
	margin-bottom: 0.4rem;
	padding: 0.0rem 0.2rem 0.0rem 0.2rem;
	
	float:left;
	display:inline-block;
	
	color:#12353A;
	font-weight:700;
	font-size: 0.75rem;
        letter-spacing: 1px;
	
	border-radius: 0px;
	border-color: #999999;
	border-width: 0 0 1px;
	background-color: #FFFFFF;
}

.form-input-field-full
{
	width: 94.3%;
	height:auto;
	outline: none;
	margin:0;
	margin-bottom: 0.4rem;
	padding: 0.0rem 0.2rem 0.0rem 0.2rem;
	
	float:left;
	display:inline-block;
	
	color:#12353A;
	font-weight:700;
	font-size: 0.75rem;
	
	border-radius: 0px;
	border-color: #999999;
	border-width: 0 0 1px;
	background: transparent; 
}

.form-input-field-finder
{
	width: 90%;
	height:auto;
	outline: none;
	margin:0;
	margin-bottom: 0.4rem;
	padding: 0.0rem 0.2rem 0.0rem 0.2rem;
	
	float:left;
	display:inline-block;
	
	color:#12353A;
	font-weight:700;
	font-size: 0.75rem;
	
	border-radius: 0px;
	border-color: #999999;
	border-width: 0 0 1px;
	background: transparent; 
}

.form-input-field-finder-dual
{
	width: 85%;
	height:auto;
	outline: none;
	margin:0;
	margin-bottom: 0.4rem;
	padding: 0.0rem 0.2rem 0.0rem 0.2rem;
	
	float:left;
	display:inline-block;
	
	color:#12353A;
	font-weight:700;
	font-size: 0.75rem;
	
	border-radius: 0px;
	border-color: #999999;
	border-width: 0 0 1px;
	background: transparent; 
}


.form-input-field-finder-xcheck
{
	width: 90%;
	height:auto;
	outline: none;
	margin:0;
	margin-bottom: 0.4rem;
	padding: 0.0rem 0.2rem 0.0rem 0.2rem;
	
	float:left;
	display:inline-block;
	
	color:#12353A;
	font-weight:700;
	font-size: 0.75rem;
	
	border-radius: 0px;
	border-color: #999999;
	border-width: 0 0 1px;
	background: transparent; 
}


.form-input-field-finder-dual-xcheck
{
	width: 85%;
	height:auto;
	outline: none;
	margin:0;
	margin-bottom: 0.4rem;
	padding: 0.0rem 0.2rem 0.0rem 0.2rem;
	
	float:left;
	display:inline-block;
	
	color:#12353A;
	font-weight:700;
	font-size: 0.75rem;
	
	border-radius: 0px;
	border-color: #999999;
	border-width: 0 0 1px;
	background: transparent; 
}

.input-field:focus ,
.form-input-field:focus,
.form-input-field-full:focus,
.form-input-field-finder:focus,
.form-input-field-finder-dual:focus,
.form-input-field-finder-xcheck:focus,
.form-input-field-finder-dual-xcheck:focus
{
	outline: none;
	
	background-color: #FFFFFF;
	border-radius: 0px;
	border-color: #074F57;
	border-width: 0 0 1px;
	
	-webkit-box-shadow: 0 6px 6px -6px #E0E0E0;
	-moz-box-shadow: 0 6px 6px -6px #E0E0E0;
	box-shadow: 0 6px 6px -6px #E0E0E0;
}

input.detail-input-field,
textarea.detail-input-field,
select.detail-input-field
{
	width: 100%;
	outline: none;
	margin:0.2rem 0 0.2rem 0;
	padding: 0.0rem 0.2rem 0.0rem 0.2rem;
	
	display:inline-block;
	
	color:#12353A;
	font-weight:700;
	font-size: 0.75rem;
	
	border-color: transparent;
	background-color: transparent;
}

.detail-input-find-field
{
	width: 75%; 
	height:1.3rem;
	outline: none;
	margin:0 1px 0 1px;
	padding: 0 3px 0 3px;
	
	display:inline-block;
	
	color:#12353A;
	font-weight:700;
	font-size: 0.75rem;
	
	border-color: transparent;
	background-color: transparent;
}

.detail-input-field:focus,
.detail-input-find-field:focus
{
	outline: none;
	
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	
	border-style: none;
	background-color: transparent;
}

input.input-field::-webkit-input-placeholder,
input.input-field:-ms-input-placeholder,
input.input-field:-moz-placeholder,
input.input-field::-moz-placeholder
{
    outline: none;
    color: #FFFFFF;
    background-color: #E0E0E0;
	
    font-weight:700;
}

.form-input-field::-webkit-input-placeholder,
.form-input-field:-ms-input-placeholder,
.form-input-field:-moz-placeholder,
.form-input-field::-moz-placeholder
{
    margin:0;
    padding:0;

    outline: none;
    color: #FFFFFF;
    background-color: #E0E0E0;
	
    font-weight:700;
}

::placeholder { /* Most modern browsers support this now. */
    color: #C4CCD4 !important;
}

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: #C4CCD4 !important;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #C4CCD4 !important;
    opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #C4CCD4 !important;
    opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #C4CCD4 !important;
}
::-ms-input-placeholder { /* Microsoft Edge */
    color: #C4CCD4 !important; 
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active 
{
    transition: 5000s ease-in-out 0s; /*Remove Autofill BG Color */
}

input[readonly].input-field,
input[readonly].form-input-field,
input[readonly].form-input-field-full,
input[readonly].form-input-field-finder,
input[readonly].form-input-field-finder-dual,
input[readonly].form-input-field-finder-xcheck,
input[readonly].form-input-field-finder-dual-xcheck,
input[readonly].detail-input-field,
input[readonly].detail-input-find-field,
textarea[readonly].input-field,
textarea[readonly].form-input-field,
textarea[readonly].form-input-field-full,
textarea[readonly].detail-input-field,
textarea[readonly].detail-input-find-field
{
    cursor: default;
	border: 0;
	border-radius: 2px;
	font-style: italic;
    background-color: #E6E6E6;
	font-size: 0.75rem;
}

.form-select-field
{
	width: 100%;
	height:auto;
	
	padding: 0.0rem 0.2rem 0.0rem 0.2rem;
	margin-bottom: 0.3rem;
	float:left;
	outline: none;
	-webkit-appearance: none;
	
	color:#12353A;
	font-weight:700;
	font-size: 0.75rem;
        letter-spacing: 0.8px;
	
	border-radius: 0px;
	border-color: #999999;
	border-width: 0 0 1px;

	background-color: #FFFFFF;
	background-repeat: no-repeat;
	background-image:
		linear-gradient(45deg, transparent 50%, gray 50%),
		linear-gradient(135deg, gray 50%, transparent 50%);
	background-position:
		calc(100% - 0.438rem) calc(0.5em),
		calc(100% - 0.125rem) calc(0.5em);
	background-size:
		5px 5px,
		5px 5px;
}
.form-select
{
    font-size: 0.80rem!important;
}

.detail-select-field
{
	width: 90%;
	height:1.3rem;
	
	margin:0;
	padding:0;
	outline: none;
	-webkit-appearance: none;
	margin-top:0.1rem;
	
	color:#12353A;
	font-weight:700;
	font-size: 0.75rem;
	
	border-color: transparent;
	border-width: 0 0 1px;
	
	background-color: transparent;
	background-repeat: no-repeat;
	background-image:
		linear-gradient(45deg, transparent 50%, gray 50%),
		linear-gradient(135deg, gray 50%, transparent 50%);
	background-position:
		calc(100% - 0.438rem) calc(0.5em),
		calc(100% - 0.125rem) calc(0.5em);
	background-size:
		5px 5px,
		5px 5px;
}
.custom-select {
  
    font-size: 0.85rem;
    color: #000000;
    background-color: #FFFFFF;
}
 
option
{
    font-weight:700;
    letter-spacing: 1px;
}

select:disabled 
{
    color: #00000;
    background-color: #E6E6E6;
    border:none;
}

select:hover,
select:focus
{
    outline:none;
}

.required
{
    border-color: #FB3640;
}

.required_field
{
    border-color: #FF0000;
}

.search-logo
{
    color: #3B82F6;
    font-size:10px;
}

.search-logo:hover,
.search-logo:focus
{
    color: #FB3640;
    cursor: pointer;
}

.search-border
{
    border: 1.8px solid!important;
    border-radius: .25rem!important;
    border-color: #3B82F6!important;
}

.search-dropdown
{
	z-index: 1;
	margin-top: -0.4rem;
	border-color: #999999;
	border-width: 0 1px 1px;
}

button:disabled i
{
    color: #C4CCD4;
}

button:disabled i:hover,i:focus
{
    color: #C4CCD4;
}

button:disabled
{
    border: 1.5px solid!important;
    border-radius: .25rem!important;
    border-color: #C4CCD4!important;
}

.attention-field
{
	color:#FB3640!important;
	border-color: #FB3640!important;
	border-width:1px;
}

.detail_50
{
	width: 200px;
}

.detail_100
{
	width: 400px;
}


/* ************************************************************************************************* */
/* ****************************************** FILE UPLOAD ****************************************** */
/* ************************************************************************************************* */

#import_data_table tbody{
	display: block;
	overflow-y:scroll;
}

#import_data_table td{
	width:200px;
}

#import_data_table tr:first-child { /* Import Header */
	color: #009999;
}

#import_file_upload {
    display: none;
}

.file-import {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
	font-weight:700;
	font-size: 0.75rem;
	background-color: #ffffff;
}

.file-caption-name {  
	font-weight: 500;
    font-size: 1rem;
	color: #999999;
	padding-left: 15px;
}

.file-caption-icon {  
	font-weight: 500;
    font-size: 1rem;
	color: #999999;
}


#photo_upload {
    opacity: 0;
}

#photo_upload_label {
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
}

.image-area {
    border: 2px dashed rgba(0,153,153, 0.7);
    padding: 1rem;
    position: relative;
}

.image-area::before {
    content: 'Uploaded image';
    color: rgba(0,153,153) ;
    font-weight: bold;
    text-transform: uppercase;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.75rem;
    z-index: 1;
}

.image-area img {
    z-index: 2;
    position: relative;
}


/* ************************************************************************************************* */
/* ****************************************** LABEL ************************************************ */
/* ************************************************************************************************* */

.function-title
{
    color: #828282;
    padding-bottom: 7px;
}


/* ************************************************************************************************* */
/* ************************************** ACCORDIAN ************************************************ */
/* ************************************************************************************************* */

.accordion-label-field
{
    color: #3B82F6;
    font-weight: 900;
    font-size: 0.75rem;
    letter-spacing: 1px;
}

.accordion-label-required-field
{
    color: #FB3640;
    font-weight: 900;
    font-size: 0.75rem;
}

.accordion-container {
    max-width: 800px;
    margin: 0 auto;
}

.accordion-item {
    border: none;
    margin-bottom: 15px;
    border-radius: 2px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .05);
    transition: all 0.3s ease;
}

.accordion-item:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, .1);
    transform: translateY(-2px);
}

.accordion-button {
    padding: 20px 25px;
    border-radius: 2px !important;
    font-weight: 600;
    color: #0d6efd;
    background: #f8f9fa;
}

/* Default Bootstrap arrow, just bigger & smooth */
.accordion-button::after {
    transform: rotate(-180deg); /* arrow up when collapsed */
    transition: transform 0.3s ease, color 0.3s ease;
    font-size: 1.25rem; /* make arrow larger */
}

.accordion-button:not(.collapsed) {
    color: #0d6efd;
    background: #f8f9fa;
    box-shadow: none;
}

/* Arrow down when open */
.accordion-button:not(.collapsed)::after {
    transform: rotate(0deg);
    color: #0d6efd;
}

.accordion-button:focus {
    box-shadow: none;
    border-color: rgba(13, 110, 253, 0.25);
}

.accordion-body {
    padding: 20px 25px;
    color: #495057;
    line-height: 1.6;
    background: white;
}



/* ************************************************************************************************* */
/* **************************************** CARD *************************************************** */
/* ************************************************************************************************* */
.card {
  background-color: #ffffff;   /* pure white for a clean look */
  border: 1px solid #dee2e6;   /* very light border */
  border-radius: 6px;          /* slightly softer corners */
  padding: 5px;               /* comfortable spacing */
}

.card-shadow
{
/*	box-shadow: -1px 0px 12px 8px rgba(205,237,255,0.4);
        -webkit-box-shadow: -1px 0px 12px 8px rgba(205,237,255,0.4);
        -moz-box-shadow: -1px 0px 12px 8px rgba(205,237,255,0.4);*/
}

.card-title
{
	display:flex;
	padding:10px 20px 10px 20px;
	font-size: 0.9rem;
	font-weight:700;
	color:#FFFFFF;
	 background: rgb(0,153,153);
	background: linear-gradient(50deg, rgba(0,153,153,1) 0%, rgba(0,204,204,1) 100%); 
	text-align:left;
	align-items:center;
}
.card-sub-title
{
	display:flex;
	padding:8px 20px 8px 20px;
	font-size: 0.75rem;
	font-weight:700;
	color:#FFFFFF;
	 background: rgb(252, 153, 23);
	background: linear-gradient(50deg, rgba(252, 153, 23,1) 0%, rgba(247, 208, 52,1) 100%); 
	text-align:left;
	align-items:center;
}

.card-text
{
	padding:0 0 0 0;
	width:100%;
	display:block;
	margin:0 0 0 0;
	font-weight:700;
	font-size: 0.9rem;
        letter-spacing: 0.9px;
	text-decoration:none;
	outline: none;
}

.card-detail
{
	padding:0 0 0 20px;
	width:100%;
	display:block;
	margin:0 0 0 0;
	font-weight:600;
	font-size: 0.75rem;
	text-decoration:none;
	outline: none;
	text-align: left;
}

a.card-link
{
	color:#074F57;
	padding:0 0 0 5px;
	display:inline-block;
	margin:0 0 10px 20px;
	font-weight:700;
	font-size: 0.75rem;
	text-decoration:none;
	outline: none;
	border-style:2px solid #E0ECFA;
	background-color:#E0ECFA;
        letter-spacing: 0.9px;
}

a.card-link:active,
a.card-link:hover,
a.card-link:focus
{
	color: #FF704D;
	text-decoration:none;
	font-style: italic;  
	font-weight: bolder;
	outline: none;
	text-decoration: underline;
	cursor: pointer;
}

.workflow_card 
{
	border: 1px solid #12353A;
	box-shadow: 3px 3px Silver;
}

.workflow_mh
{
        min-height: 110px;
}

a.workflow_link
{
	display:flex;
	align-items:center;
	color: #12353A;
	text-align:left;
	padding:0 0 0 10px;
	font-weight:700;
	font-size: 0.75rem;
	text-decoration:none;
	outline: none;
}

a.workflow_link:active,
a.workflow_link:hover,
a.workflow_link:focus
{
	color: #FF704D;
	text-decoration:none;
	font-style: italic;  
	font-weight: bolder;
	outline: none;
	text-decoration: underline;
}

.workflow-box{
    box-shadow: 3px 3px Silver;
}

.workflow-folder-logo{
	font-size:24px;
	color:#E6E6E6;
	padding-right:10px;
	color:#FFFFFF;
}

.dollar-logo{
    font-size:24px;
    color:#77ABF8;
    padding-right:10px;
}

/* ************************************************************************************************* */
/* **************************************** BUTTON ************************************************* */
/* ************************************************************************************************* */

	
.btn
{
    font-size: 0.85rem;
}

.btn,
.btn-light,
.btn-light:hover,
.btn.show,
.btn:focus,.btn:active:focus,.btn.active:focus,
.btn.focus,.btn:active.focus,.btn.active.focus {
    border-color: transparent !important; 
    outline: none !important; 
    box-shadow: none !important; 
}


.btn-main
{
    outline: none;
    border: 1px solid #6C3DB8;
    width: 30%;
    min-width: 100px;
    padding: 0.5rem 0 0.5rem 0;

    color:#FFFFFF;
    font-weight: 700;
    background-color: #6C3DB8;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 3px 3px Silver;
}

.btn-main:active,
.btn-main:hover,
.btn-main:focus
{
	outline: none;
	width: 30%;
	min-width: 100px;
	border: 1px solid #009999;
	
	color: #FFFFFF;
	background-color: #009999;
	text-decoration: none;
	box-shadow: 3px 3px #12353A;
}

.btn-submit
{
	outline: none;
	min-width: 100px;
	border: 2px solid #FFFFFF;
	padding: 0.6rem 1.5rem 0.6rem 1.5rem;
	
	color:#FFFFFF;
	font-weight: 700;
        letter-spacing: 1.4px;
	background: #6C3DB8;
	text-transform: uppercase;
	text-decoration: none;;
}

.btn-submit:active,
.btn-submit:hover,
.btn-submit:focus
{
	outline: none;
	min-width: 100px;
	border: 2px solid #FFFFFF;
	padding: 0.6rem 1.5rem 0.6rem 1.5rem;
	
	color: #FFFFFF;
	background: #009999;
	text-decoration: none;
}

.btn-submit-light
{
	outline: none;
	width: 30%;
	min-width: 100px;
	border: 2px solid #FFFFFF;
	padding: 0.5rem 0 0.5rem 0;
	
	color:#000000;
	font-weight: 700;
	background: #E6E6E6;
	text-transform: uppercase;
	text-decoration: none;;
}

.btn-submit-success
{
	outline: none;
	width: 30%;
	min-width: 100px;
	border: 2px solid #FFFFFF;
	padding: 0.5rem 0 0.5rem 0;
	
	color:#FFFFFF;
	font-weight: 700;
	background: #009999;
	text-transform: uppercase;
	text-decoration: none;;
}

.dt-button,
.btn-search
{
    border: 1px solid #999999;  
    border-collapse: collapse;
    padding: 0;
    margin: 0;
    margin-bottom:12px;

    color:#12353A;
    background-color: #FFFFFF;
    text-align:center;
    text-transform: capitalize;
    font-weight: bold;
    
    border-radius: 2px;
}


.btn-form-search
{
    border: 1px solid #999999;  
    border-collapse: collapse;
    padding: 0;
    margin: 0;
    margin-bottom:4px;

    color:#12353A;
    background-color: #FFFFFF;
    text-align:center;
    font-weight: bold;
    border-radius: 2px;
}

a.btn-search {
    display: inline-block; /* makes <a> behave like a button */
    text-decoration: none; /* remove underline */
    border: 1px solid #999999;
    border-collapse: collapse;
    padding: 0;
    margin: 0;
    margin-bottom: 12px;
    color: #12353A;
    background-color: #FFFFFF;
    text-align: center;
    text-transform: capitalize;
    font-weight: bold;
    border-radius: 2px;
    cursor: pointer; /* show pointer like a button */
    transition: background-color 0.2s ease, color 0.2s ease;
}

.dt-button
{
	padding: 0 2px 0 2px;
}
.btn-outline-info {
  color: #12353A!important;             /* Text color */
  border-color: #99ebfa!important;      /* Border color */
  background-color: transparent!important;
}

.btn-outline-info:hover {
  color: #12353A!important;                /* Text turns white */
  background-color: #99ebfa!important;  /* Background fills */
  border-color: #99ebfa!important;
}

.btn-outline-info:focus, 
.btn-outline-info:active {
  color: #12353A!important;
  background-color: #99ebfa!important;
  border-color: #99ebfa!important;
  box-shadow: 0 0 0 0.25rem rgba(13, 202, 240, .5)!important; /* Focus ring */
}

.btn-outline-secondary {
  color: #6c757d!important;             /* Text color (secondary) */
  border-color: #6c757d!important;      /* Border color */
  background-color: transparent!important;
}

.btn-outline-secondary:hover {
  color: #fff!important;                /* Text turns white */
  background-color: #6c757d!important;  /* Background fills with secondary */
  border-color: #6c757d!important;
}

.btn-outline-secondary:focus, 
.btn-outline-secondary:active {
  color: #fff!important;
  background-color: #6c757d!important;
  border-color: #6c757d!important;
  box-shadow: 0 0 0 0.25rem rgba(108, 117, 125, .5)!important; /* Focus ring */
}
.btn-plain
{
	outline: none;
    border: none;  
    color:#3B82F6;
	font-weight: bold;
    background-color: transparent;
	padding: 0 30px;
	
}

.btn-plain:active,
.btn-plain:hover,
.btn-plain:focus
{
	outline: none;
    border: none;  
    color:#FB3640;
	font-weight: bold;
    background-color: transparent;
	padding: 0 30px;
	
}


.btn-search:active,
.btn-search:hover,
.btn-search:focus,
.dt-button:active,
.dt-button:hover,
.dt-button:focus,
.btn-form-search:active,
.btn-form-search:hover,
.btn-form-search:focus
{
    border: 1px solid #FB3640;  
	color: #FB3640;
	background-color: #FFFFFF;
	text-decoration: underline;
	cursor: pointer;
        font-weight: bold;
}

.btn-form-search:disabled,
.btn-search:disabled
{
	background-color: #EFEFEF;
	color: black;
	border-color: #B6B6B6;
	text-decoration: none;
	cursor: default;
        font-weight: bold;
}

a.btn-form-delete
{
	width: auto;
	margin:0 0 0 0;
	padding:0;
	outline: none;
	border: none;
	
	font-size: 0.75rem;
	color:#12353A;
	background-color: transparent;
}

button.btn-form-search, a.btn-form-search
{
	width: auto;
	margin:0 0 0 0;
	padding:0 2px 0 2px;
	outline: none;
	border: none;
	float:right;
	
	font-size: 0.75rem;
	color:#12353A;
	background-color: transparent;
}


button.btn-form-insert
{
	margin:0 0 0 0;
	padding:0;
	outline: none;
	border: none;
	font-weight:700;
	font-size: 0.75rem;
	color:#000000;
	background-color: transparent;
}

button.btn-form-insert-multi-item
{
	margin:0 0 0 10px;
	padding:0;
	outline: none;
	border: none;
	font-weight:700;
	font-size: 0.75rem;
	color:#000000;
	background-color: transparent;
}

.btn-form-insert:active,
.btn-form-insert:hover,
.btn-form-insert:focus,
.btn-form-insert-multi-item:active,
.btn-form-insert-multi-item:hover,
.btn-form-insert-multi-item:focus
{
	color:#000000;
	cursor: pointer;
}

.action-bar-sticky 
{
    position: fixed;
    right: 35px;
    bottom: 0;
    z-index: 5;
    margin: 0 !important;
    background: #ffe69c;
    border: none;
    padding:0px;
}

a.operation-icon,
button.operation-icon
{
	display: flex;
	flex-direction: column;
	outline: none;
	border: none;
	text-align:left; 
	padding: 8px 0 5px 0;
	float:left;
	
        min-width: 45px;
        margin-right: 3px;
	font-size: 0.95rem;
	color:#12353A;
	background-color: transparent;
	justify-content: center;
	align-items: center;
	text-decoration: none;
}

p.operation-text
{
	padding-top:5px;
	font-weight:700;
	font-size: 0.6rem;
        text-align: center;
}

a.operation-icon:active,
a.operation-icon:hover,
a.operation-icon:focus,
a.main-operation-icon:active,
a.main-operation-icon:hover,
a.main-operation-icon:focus,
button.operation-icon:active,
button.operation-icon:hover,
button.operation-icon:focus
{
	outline: none;
	border: none;
	
	color: #FF704D;
	text-decoration: none;
	cursor: pointer;
}

button.operation-icon:disabled
{
	outline: none;
	border: none !important;
        min-width: 48px;
	text-align:left; 
	padding: 8px 0 5px 0;
	float:left;
	
	font-size: 0.95rem;
	color:#E0E0E0;
	background-color: transparent;
}

button.btn-form-search:disabled
{
	outline: none;
	border: none;
	color:#E0E0E0;
	background-color: transparent;
}

a.main-operation-icon
{
	outline: none;
	border: none;
	margin-right: 1.5rem;
	text-align:center ; 
	padding: 5px 0;
	text-decoration: none;
	
	font-size: 0.95rem;
	color:#12353A;
	background-color: transparent;
}


#btn-float-top 
{
	width: 35px;
	height: 36px;
	right: 2.5%;
	bottom: 3%;
	z-index: 99;
	padding: 0;
	font-size: 0.75rem;
	border-radius: 50%;
	
	outline: none;
	display: none;
	position: fixed;
	cursor: pointer;
	
	color: #12353A;
	border-color: #074F57;
	background-color: #FFFFFF;
}

#btn-float-top :hover 
{
	color:#009999;
	border-color: #009999;
}

/* ************************************************************************************************* */
/* **************************************** TABLE ************************************************** */
/* ************************************************************************************************* */
@media screen and (max-width: 600px) {
	.mobile_hidden_col 
	{
		visibility: hidden;
		display: none;
	}
}

table
{
	margin: 0;
	text-align:left;
	table-layout: fixed; 
	width: 100% !important;
	border-collapse: collapse;
}

.dataTables_scrollHeadInner /*Important to fix firefox header and columns misalignment*/
{
	width:100% !important;
	padding: 0 !important;
}

div.dts div.dataTables_scrollBody{
    background: none !important;
    padding-bottom:14px !important;
}

.dataTables_scrollBody table{
    padding-bottom: 10px;
}

.table_general>thead>tr>th,
.table_detail>thead>tr>th,
.table_print>thead>tr>th,
.table_general>tfoot>tr>td,
.table_detail>tfoot>tr>td,
.table_print>tfoot>tr>td,
.table_general>tbody>tr.tfoot>td
{  
	color: #000000;
	background-color: #E0ECFA;
	 
	text-align:left;   
	font-size: 0.75rem;
	vertical-align: top;
	
	padding: 0.2rem 0.5rem 0.3rem 0.5rem;
	border: 1px solid #E0E0E0;
}

.table_general>tbody>tr>td,
.table_detail>tbody>tr>td,
.table_print>tbody>tr>td
{
	white-space: normal;
	overflow: hidden;
	font-weight:700;
	font-size: 0.75rem;
	padding: 0.2rem 0.5rem 0.3rem 0.5rem;
}

.button_col
{  
	width:	20px !important;
}

.no_col
{  
	width:	40px !important;
}

.line_no_col
{  
	width:	40px !important;
}

.code_col 
{  
	width:	120px !important;
}
.small_col 
{  
	width:	50px !important;
}

.desc_col 
{  
	width:	220px !important;
}

.desc23_col 
{  
	width:	230px !important;
}

.desc50_col 
{  
	width:	500px !important;
}

.small_amount_col 
{  
	width:	80px !important;
}

.amount_col
{  
	width:	100px !important;
}

.checkbox_col
{  
	width:	100px !important;
}

.date_col
{  
	width:	120px !important;
}

.datetime_col
{  
	width:	180px !important;
}


@media screen and (max-width: 480px) {
	.dataTables_length,
	.dt-buttons
	{ 
		visibility: hidden;
		display: none;
	}
}

.dataTables_wrapper .top 
{
	display: flex;
	justify-content: space-between;
	padding-top:5px;
}

.dataTables_wrapper .dt-buttons > button
{
	padding: 3px 7px; 
	margin-top: 3px;
	margin-bottom: 3px;
	color: #12353A; 
	font-weight:700;
	font-size: 0.75rem;
	text-decoration: none;
	
	background-color: #FFFFFF;
	border: 1px solid #E0E0E0;  
	border-collapse: collapse;
}

.dataTables_wrapper .dataTables_filter input
{
	width: 200px;
	outline: none;
	margin-right: 10px;
	
	color: #074F57;
	border-radius: 0;
	border-color: #999999;
	border-width: 0 0 1px;
	background-color: #FFFFFF;
}

.dataTables_wrapper .dataTables_filter label
{
	margin-left: 10px;
	text-align:left;
	font-weight:700!important;
	font-size: 0.75rem;
	color: #000000;
}

div.dataTables_wrapper div.dataTables_paginate .pagination
{
	padding-right: 10px;
	padding-top: 1rem;
	padding-bottom: 1rem;
}

div.dataTables_wrapper div.dataTables_paginate .pagination>li>a
{
	padding: 3px 7px; 
	margin-top: 3px;
	margin-bottom: 3px;
	color: #12353A; 
	font-weight:700;
	font-size: 0.75rem;
	text-decoration: none;
	
	border: 1px solid #E0E0E0;  
	border-collapse: collapse;
}

.page-item.active .page-link 
{
	background-color: #E0E0E0;  
}

table.dataTable>thead .sorting:after, table.dataTable>thead .sorting_asc:after, table.dataTable>thead .sorting_desc:after, table.dataTable>thead .sorting_asc_disabled:after, table.dataTable>thead .sorting_desc_disabled:after
{
	content: url('/images/DataTable/sort_asc.png');
	right: 6px;
	top: 1px !important;
}

table.dataTable>thead .sorting:before, table.dataTable>thead .sorting_asc:before, table.dataTable>thead .sorting_desc:before, table.dataTable>thead .sorting_asc_disabled:before, table.dataTable>thead .sorting_desc_disabled:before
{
	content: url('/images/DataTable/sort_desc.png');
	right: 18px !important;
	top: 1px !important;
}

.table > :not(:last-child) > :last-child > *
{
	border-bottom-color: #E0E0E0;
}
.table_modern
{
        border-radius: 5px;
        border-collapse: collapse;
        
        overflow: hidden;
}

.table_modern > thead,
.table_modern > tfoot
{
        font-size: 14px;
        
        text-transform: uppercase;
    
        color: #000000;
        
        background: rgb(214,255,252);
        background: linear-gradient(90deg, rgba(214,255,252,1) 0%, rgba(182,250,252,1) 100%);
}

.table_modern > tbody > tr:nth-child(odd) > td
{
        background-color: rgba(220, 224, 229, 0.3);
}

.table_modern > tbody > tr:hover > td
{
        background-color: rgba(255, 255, 0, 0.2);
}

.table_modern > thead > tr > th,
.table_modern > tfoot > tr > th,
.table_modern > tbody > tr > td
{
        border: 1px solid #FFFFFF;
        padding: 10px 15px;
        font-weight: 700;
        letter-spacing: 1.3px;
        vertical-align: top;
}

.table-link
{
        text-decoration: none;
}
@media (max-width: 768px) {
  .table-responsive-card,
  .table-responsive-card thead,
  .table-responsive-card tbody,
  .table-responsive-card th,
  .table-responsive-card td,
  .table-responsive-card tr {
    display: block;
    width: 100%;
  }

  /* Hide headers */
  .table-responsive-card thead {
    display: none;
  }

  /* Row */
  .table-responsive-card tr {
    margin-bottom: 1rem;
    background: transparent;
    border: none;
    box-shadow: none;
  }

.table-responsive-card td {
  display: flex !important;
  align-items: flex-start !important;
  padding: 0.5rem !important;
  border: none !important;
  text-align: left !important;
  white-space: normal !important;
  flex-wrap: nowrap !important; /* keep label + value in one row */
}

/* Label */
.table-responsive-card td::before {
  content: attr(data-label);
  font-weight: 600;
  color: #495057;
  flex: 0 0 120px;          /* 👈 fixed width for label */
  margin-right: 0.5rem;
  white-space: normal;      /* allow wrapping if label text is too long */
  overflow-wrap: anywhere;  /* break long words/labels */
  word-break: break-word;   /* fallback */
}

/* Value */
.table-responsive-card td span {
  flex: 1 1 auto !important; /* 👈 takes the rest of the space */
  text-align: left !important;
  white-space: normal !important;     
  overflow-wrap: anywhere !important; 
  word-break: break-word !important;  
}
}

/* ************************************************************************************************* */
/* **************************************** SLIDER ************************************************* */
/* ************************************************************************************************* */

.switch 
{
	position: relative;
	display: inline-block;
	width: 30px;
	height: 17px;
}

.switch input 
{
	opacity: 0;
	width: 0;
	height: 0;
}

.slider 
{
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #E0E0E0;
	-webkit-transition: .4s;
	transition: .4s;
}

.slider:before 
{
	position: absolute;
	content: "";
	height: 13px;
	width: 13px;
	left: 2px;
	bottom: 2px;
	background-color: #FFFFFF;
	-webkit-transition: .4s;
	transition: .4s;
}

.slider.round 
{
	border-radius: 17px;
}

.slider.round:before 
{
	border-radius: 50%;
}

input:checked + .slider 
{
	background-color: #E0ECFA;
}

input:focus + .slider 
{
	box-shadow: 0 0 0.5px #E0ECFA;
}

input:checked + .slider:before 
{
	-webkit-transform: translateX(13px);
	-ms-transform: translateX(13px);
	transform: translateX(13px);
}

.form-slider {
	width: 90%;
	height:0.5rem;
	border-radius: 5px;  
	background: #E0E0E0;
	outline: none;
	-webkit-appearance: none;
	-webkit-transition: .2s;
	transition: opacity .2s;
}

.form-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 25px;
	height:1.5rem;
	border-radius: 50%; 
	background: #074F57;
	cursor: pointer;
}

.form-slider::-moz-range-thumb {
	width: 25px;
	height:1.5rem;
	border-radius: 50%;
	background: #074F57;
	cursor: pointer;
}

/* ************************************************************************************************* */
/* ************************************* CART (E-ORDERING) ***************************************** */
/* ************************************************************************************************* */

/* The side navigation menu */
.cart-nav 
{
	height: 100%; /* 100% Full-height */
	position: fixed; /* Stay in place */
	width: 0; /* Stay in place */
	z-index: 1; /* Stay on top */
	top: 0;
	left: 0;    
        background-color: #f8f9fa;
	background-clip: border-box;
	border: 1px solid rgba(0,0,0,.125);
	overflow-x: auto; 
	padding-top: 60px; /* Place content 60px from the top */
	transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
        z-index:5;
}

.cart-shadow 
{
	-webkit-box-shadow: 2px 2px 21px 1px rgba(11,201,205,0.3);
	-moz-box-shadow: 2px 2px 21px 1px rgba(11,201,205,0.3);
	box-shadow: 2px 2px 21px 1px rgba(11,201,205,0.3);
}

/* Position and style the close button (top right corner) */
.cart-nav .btn-close 
{
	position: absolute;
	top: 20px;
	right: 25px;
	font-size: 20px;
	margin-left: 50px;
	cursor: pointer;
}
.cart-header 
{
	padding: .75rem 1.25rem;
	margin-bottom: 0;
	background-color: #074F57;
	color: #FFFFFF;
	border-bottom: 1px solid rgba(0,0,0,.125);
}
.cart-body {
        overflow-x:hidden;
}

.cart-width
{
	width: 700px;
}

.summary-header{
    height: 80px;
}

a.btn-cart
{
    text-align:center;
    text-decoration: none;
}
.btn-cart:active,
.btn-cart:hover,
.btn-cart:focus
{
    background-color: #00B3B3;
    text-decoration: none;
    cursor: pointer;
}

.btn-cart:disabled
{
    background-color: #EFEFEF;
    color: #B6B6B6;
    border-color: #B6B6B6;
    text-decoration: none;
    cursor: default;
}

a.cursor
{
    cursor: pointer;
    
}


.btn-pos
{
    outline: none;
    border: 1px solid #12353A;
    width: 100%;
    padding: 0.5rem 0 0.5rem 0;

    color:#FFFFFF;
    font-weight: 700;
    background-color: #12353A;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 3px 3px Silver;
}

.btn-pos.disabled,
.btn-pos:disabled
{
    outline: none;
    border: 1px solid #12353A;
    width: 100%;
    padding: 0.5rem 0 0.5rem 0;

    color:#12353A;
    font-weight: 700;
    background-color: #FFFFFF;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 3px 3px Silver;
}


a.btn-catalogue
{
    outline: none;
    font-weight:700;
    font-size: 0.75rem;
    padding: 7px 0 7px 0;
    border: 1px solid #E0ECFA;
    background-color: #FFFFFF;
}

a.btn-catalogue:active,
a.btn-catalogue:hover,
a.btn-catalogue:focus
{
    border: 1px solid #009999;
    cursor: pointer;
}
.catalogue-card{
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    border-radius: 0.75rem;
}

.catalogue-card-header{
    border: none !important;
    border-radius: 0.75rem 0.75rem 0 0 !important;
    height:80px;
    overflow:hidden;
}

.catalogue-card-footer{
    border: none !important;
    border-radius: 0 0 0.75rem 0.75rem !important;
}

.catalogue-image-container 
{
    width: 100%;
    height: 100%;
    position: relative;
    text-align: center;
    color: white;
    overflow:hidden;

}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    transition: background 0.5s ease;
    z-index: 2;
}

.catalogue-image-container:hover .overlay {
    display: block;
    background: rgba(0, 0, 0, .3);
}

.btn-add-to-cart {
    position: absolute;
    width: 150px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    opacity: 0;
    transition: opacity .35s ease;
    z-index: 3;
}

.btn-add-to-cart a {
    width: 150px;
    text-align: center;
    color: white;
    border-radius: 15px;
    text-decoration: none;
    background-color: #12353A;
    z-index: 3;
}

.btn-add-to-cart-mobile{
    text-decoration: none;
    background-color: #00B3B3;
    border: 1px solid #00B3B3;
    box-shadow: 2px 2px Silver;
    color: white;
    border-radius: 15px;
}

.btn-add-to-cart-mobile:active,
.btn-add-to-cart-mobile:hover,
.btn-add-to-cart-mobile:focus
{
    outline: none;
    border: 1px solid #12353A;

    color: #FFFFFF;
    background-color: #12353A;
    box-shadow: 2px 2px #00B3B3;
}

.list-group-item
{
    width:auto;
    height:150px;
}

.catalogue-image-container:hover .btn-add-to-cart {
    opacity: 1;
}

.catalogue-replacement-text
{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow:hidden;
}

img.catalogue-image 
{
    width:150px;
    height:150px;
    object-fit: fill;
    z-index: 1;

}

img.catalogue-image-list
{
    width:70px;
    height:70px;
    object-fit: fill;

}

img.photo-image 
{
    width:400px;
    height:400px;
    object-fit: fill;
    z-index: 1;

}

.quantity-button-box
{
    width:30px;
    height:30px;
    border: 1px solid #12353A;
    background-color: #12353A;
    box-shadow: 2px 2px Silver;
   display:flex;
   align-items:center;
   justify-content:space-around;
}

.quantity-button-box:active,
.quantity-button-box:hover,
.quantity-button-box:focus
{
    outline: none;
    border: 1px solid #00B3B3;

    color: #FFFFFF;
    background-color: #00B3B3;
    box-shadow: 2px 2px #12353A;
}

.quantity-box
{
    width:60px;
    height:30px;
}

.quantity-icon-size
{
    position:relative;
    font-size: 10px !important;
}

.btn-secondary.disabled, 
.btn-secondary:disabled {
    border-radius: 100px !important;
}

.btn-link:active,
.btn-link:hover,
.btn-link:focus,
.btn-link.disabled, 
.btn-link:disabled {
    border:none !important;
}

a.disabled-link {
  pointer-events: none;
  cursor: default;
}

a.order-link{
    color: #00B3B3;
    text-decoration: none;
}

a.order-link:active,
a.order-link:hover,
a.order-link:focus {
    color: #00B3B3;
    text-decoration: none;
}

a.order-link.disabled, 
a.order-link:disabled {
    color: #C4CCD4;
    text-decoration: none;
}
.un {
  display: inline-block;
}

.un::after {
  content: '';
  width: 0px;
  height: 2px;
  display: block;
  background: #12353A;
  transition: 300ms;
}

.un:hover::after {
  width: 100%;
}
.no-order-container{
  height: 300px;
}
.order-confirmed{
    outline: none;
    width: 100%;
    padding: 0.5rem 0 0.5rem 0;
    border-radius: 50rem!important;

    color:#12353A;
    font-weight: 700;
    background-color: #FFFFFF;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 3px 3px Silver;
    
}
.bg-darkblue
{
    background-color: #12353A !important;
}

.bg-turquoise
{
    background-color: #00B3B3 !important;
}

.bg-table
{
    background-color: #E0ECFA !important;
}

.bg-gloomy
{
    background-color: #E0ECFA !important;
}
.bg-super-light-grey
{
    background-color: #F0F0F0 !important;
}

.bg-light-grey
{
    background-color: #E6E6E6 !important;
}

.text-turquoise
{
    color: #00B3B3 !important;
}

.bg-light-success
{
    background-color: #d1e7dd !important;
}

.bg-light-warning
{
    background-color: #fff3cd !important;
}

.bg-light-danger
{
    background-color: #f8d7da !important;
}

.bg-light-primary
{
    background-color: #cfe2ff !important;
}

.bg-light-info
{
    background-color: #c8eaf7 !important;
}

.bg-light-violet
{
    background-color: #aa66cc !important;
}
.bg-transparent {
    background-color: transparent;
}
.border-orange {
    border-color: #FFD365 !important;
}
.border-salmon {
    border-color: #EF7272 !important;
}
.border-cyan {
    border-color: #72E2EF !important;
}
.border-lime {
    border-color: #A2EF72 !important;
}
.border-violet {
    border-color: #B772EF !important;
}
.border-taffy {
    border-color: #EF72D0 !important;
}

/* ************************************************************************************************* */
/* ************************************************ colors ***************************************** */
/* ************************************************************************************************* */

.bg-vg
{
    background-color: #61b146 !important;
}
.bg-g
{
    background-color: #d0dd37 !important;
}
.bg-p
{
    background-color: #f2eb3a !important;
}
.bg-vp
{
    background-color: #f8bd18 !important;
}
.bg-d1
{
    background-color: #f99b1f !important;
}
.bg-d2
{
    background-color: #ef5224 !important;
}
.bg-l
{
    background-color: #a71e48 !important;
}
.bg-m
{
    background-color: #7c3696 !important;
}
.bg-i
{
    background-color: #1495cf !important;
}
.bg-d
{
    background-color: #3e5eab !important;
}

/* ************************************************************************************************* */
/* ********************************************* font size ***************************************** */
/* ************************************************************************************************* */

.text-xxs
{
    font-size: 0.65rem;
    line-height: 0.75rem;
}

.text-xs
{
    font-size: 0.75rem;
    line-height: 1rem;
}
.text-sm
{
    font-size: 0.80rem;
    line-height: 1.25rem;
}
.text-base
{
    font-size: 1rem;
    line-height: 1.5rem;
}
.text-lg
{
    font-size: 1.125rem;
    line-height: 1.75rem;
}
.text-xl
{
    font-size: 2rem;
    line-height: 1.75rem;
}


@media screen and (min-width : 320px) and (max-width: 600px) {
    .container,
    .container-fluid 
    {
            width: 100%;
            padding-left: 0.5rem;
            padding-right: 0.5rem;
    }
    .cart-nav
    {
        width: 0;
    }
    .cart-width
    {
        width: 400px;
    }
    .text-sm
    {
        font-size: 0.75rem;
        line-height: 1rem;
    }
    .text-base
    {
        font-size: 0.875rem;
        line-height: 1.25rem;
    }
    .text-lg
    {
        font-size: 1rem;
        line-height: 1.5rem;
    }
    .text-xl
    {
        font-size: 1.125rem;
        line-height: 1.75rem;
    }

}

/* ************************************************************************************************* */
/* ******************************************* PMS ****************************************** */
/* ************************************************************************************************* */

.pms-card-image {
    width:auto;
    height:250px;
    max-width:100%;
    max-height:100%;
}
.pms-image {
    width:auto;
    height:350px;
    max-width:100%;
    max-height:100%;
}
.thumbnail_images ul{
    list-style: none;
    justify-content: center;
    display: flex;
    align-items: center;
    margin-top:10px
}
.thumbnail_images ul li{
    margin: 5px;
    padding: 10px;
    border: 2px solid #eee;
    cursor: pointer;
    transition: all 0.5s
}
.thumbnail_images ul li:hover{
    border: 2px solid #000
}
.main_image{
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #eee;
    height: 400px;
    width: 100%;
    overflow: hidden
}
.heart{
    height: 29px;
    width: 29px;
    background-color: #eaeaea;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center
}
.content p{
    font-size: 12px
}
.ratings span{
    font-size: 14px;
    margin-left: 12px
}
.colors{
    margin-top: 5px
}
.colors ul{
    list-style: none;
    display: flex;
    padding-left: 0px
}
.colors ul li{
    height: 20px;
    width: 20px;
    display: flex;
    border-radius: 50%;
    margin-right: 10px;
    cursor: pointer
}
.colors ul li:nth-child(1){
    background-color: #6c704d
}
.colors ul li:nth-child(2){
    background-color: #96918b
}
.colors ul li:nth-child(3){
    background-color: #68778e
}
.colors ul li:nth-child(4){
    background-color: #263f55
}
.colors ul li:nth-child(5){
    background-color: black
}
.right-side{
    position: relative
}
.search-option{
    position: absolute;
    background-color: #000;
    overflow: hidden;
    align-items: center;
    color: #fff;
    width: 200px;
    height: 200px;
    border-radius: 49% 51% 50% 50% / 68% 69% 31% 32%;
    left: 30%;
    bottom: -250px;
    transition: all 0.5s;
    cursor: pointer
}
.search-option .first-search{
    position: absolute;
    top: 20px;
    left: 90px;
    font-size: 20px;
    opacity: 1000
}
.search-option .inputs{
    opacity: 0;
    transition: all 0.5s ease;
    transition-delay: 0.5s;
    position: relative
}
.search-option .inputs input{
    position: absolute;
    top: 200px;
    left: 30px;
    padding-left: 20px;
    background-color: transparent;
    width: 300px;
    border: none;
    color: #fff;
    border-bottom: 1px solid #eee;
    transition: all 0.5s;
    z-index: 10
}
.search-option .inputs input:focus{
    box-shadow: none;
    outline: none;
    z-index: 10
}
.search-option:hover{
    border-radius: 0px;
    width: 100%;
    left: 0px
}
.search-option:hover .inputs{
    opacity: 1
}
.search-option:hover .first-search{
    left: 27px;
    top: 25px;
    font-size: 15px
}
.search-option:hover .inputs input{
    top: 20px
}
.search-option .share{
    position: absolute;
    right: 20px;
    top: 22px
}
.buttons .btn{
    height: 50px;
    width: 150px;
    border-radius: 0px !important
}

/* ************************************************************************************************* */
/* ******************************************* Directory List ************************************** */
/* ************************************************************************************************* */

.treeview-animated {
	font-size: 0.75rem;
	font-weight: 700;
	background: rgba(176, 224, 230, 0.2);
}

.treeview-animated hr {
	border-color: #6495ED;
}

.treeview-animated h5 {
	font-size: 1.4em;
	font-weight: 800;
	color: #6495ED;
}

.treeview-animated ul {
	position: relative;
	list-style: none;
	padding-left: 0;
}

.treeview-animated-list ul {
	padding-left: 1.5em;
	margin-top: 0.1em;
	background: rgba(176, 224, 230, 0.2);
}

.treeview-animated-element {
	padding: 0.2em 0.2em 0.2em 1em;
	cursor: pointer;
	transition: all .1s linear;
	border: 2px solid transparent;
	border-right: 0px solid transparent;
}

.treeview-animated-element:hover {
	color: #FFFFFF;
	background: #6495ED;
}

.treeview-animated-element.opened {
	color: #FFFFFF;
	border: 2px solid #FFFFFF;
	border-right: 0px solid transparent;
	background-color: #6495ED;
}

.treeview-animated-element.opened:hover {
	color: #FFFFFF;
	background: #6495ED;
}

.treeview-animated-items-header {
	display: block;
	padding: 0.4em;
	margin-right: 0;
	border-bottom: 2px solid transparent;
}

.treeview-animated-items-header:hover {
	color: #FFFFFF;
	background: #6495ED;
}

.treeview-animated-items-header.open {
	transition: all .1s linear;
	background-color: #6495ED;
	border-bottom: 2px solid #FFFFFF;
}

.treeview-animated-items-header.open span {
	color: #FFFFFF;
}

.treeview-animated-items-header.open:hover {
	color: #FFFFFF;
	background: #6495ED;
}

.treeview-animated-items-header.open div:hover {
	color: #FFFFFF;
	background: #6495ED;
}

.treeview-animated-items-header .fa-angle-right {
	transition: all .1s linear;
	font-size: .8rem;
	color: #FFFFFF;
}

.treeview-animated-items-header .fas {
	position: relative;
	transition: all .2s linear;
	transform: rotate(90deg);
	color: #12353A;
}

.treeview-animated-items-header .fa-minus-circle {
	position: relative;
	color: #12353A;
	transform: rotate(180deg);
	color: #FFFFFF;
}
.treeview-animated-list a {
    text-decoration: none;
    cursor: pointer;
}
/* ************************************************************************************************* */
/* ******************************************* POS-SYSTEM ****************************************** */
/* ************************************************************************************************* */

.category-scroll > .row {
	display: block;
	overflow-x: auto;
	white-space: nowrap;
}

.category-scroll > .row > .col-6{
	display: inline-block;
}

.list-image {
	width:70px;
	height:70px;
	max-width:100%;
	max-height:100%;
}

.modal-dialog {
    max-width: 100% !important;
    padding-top: 20px;
    margin: 0;
    overflow-y: initial !important;
}
.modal-body{
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

/* ************************************************************************************************* */
/* ******************************************* APP REG FORM ****************************************** */
/* ************************************************************************************************* */

.h-14 {
    height: 3rem;
}

.bg-whitishgrey{
    background: #f7f9ff;
}
/* TITLE */
 
#title-container {
    min-height: 460px;
    height: 100%;
    color: #fff;
    background-color: #77d0e6;
    text-align: center;
    padding: 105px 28px 28px 28px;
    box-sizing: border-box;
    position: relative;
    box-shadow: 10px 8px 21px 0px rgba(204, 204, 204, 0.75);
    -webkit-box-shadow: 10px 8px 21px 0px rgba(204, 204, 204, 0.75);
    -moz-box-shadow: 10px 8px 21px 0px rgba(204, 204, 204, 0.75);
}
 
#title-container h2 {
    font-size: 45px;
    font-weight: 800;
    color: #fff;
    padding: 0;
    margin-bottom: 0px;
}
 
#title-container h3 {
    font-size: 25px;
    font-weight: 600;
    color: #458999;
    padding: 0;
}
 
#title-container p {
    font-size: 13px;
    color: #fff;
    padding: 0 25px;
    line-height: 20px;
}
 
/* FORMS */
 
/*#qbox-container {
    background: url(../upload/MHM/MHM/SM-03/AppUserApply/lightbulb.png);
    background-repeat: repeat;
    position: relative;
    padding: 62px;
    min-height: 630px;
    box-shadow: 10px 8px 21px 0px rgba(204, 204, 204, 0.75);
    -webkit-box-shadow: 10px 8px 21px 0px rgba(204, 204, 204, 0.75);
    -moz-box-shadow: 10px 8px 21px 0px rgba(204, 204, 204, 0.75);
}*/
 
#steps-container {
    margin: auto;
    width: 500px;
    min-height: 420px;
    display: flex;
    vertical-align: middle;
    align-items: center;
}
 
.step {
    display: none;
}
 
.step h4 {
    margin: 0 0 26px 0;
    padding: 0;
    position: relative;
    font-weight: 500;
    font-size: 23px;
    font-size: 1.4375rem;
    line-height: 1.6;
}
 
button#prev-btn,
button#next-btn,
button#submit-btn {
    font-size: 17px;
    font-weight: bold;
    position: relative;
    width: 130px;
    height: 50px;
    background: #77d0e6;
    margin: 0 auto;
    margin-top: 40px;
    overflow: hidden;
    z-index: 1;
    cursor: pointer;
    transition: color .3s;
    text-align: center;
    color: #fff;
    border: 0;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}
 
button#prev-btn:after,
button#next-btn:after,
button#submit-btn:after {
    position: absolute;
    top: 90%;
    left: 0;
    width: 100%;
    height: 100%;
    background: #458999;
    content: "";
    z-index: -2;
    transition: transform .3s;
}
 
button#prev-btn:hover::after,
button#next-btn:hover::after,
button#submit-btn:hover::after {
    transform: translateY(-80%);
    transition: transform .3s;
}
button#next-btn:disabled,
button#submit-btn:disabled {
    background-color: #C4CCD4;
}
button#prev-btn:disabled::after,
button#next-btn:disabled::after,
button#submit-btn:disabled::after {
    position: absolute;
    top: 90%;
    left: 0;
    width: 100%;
    height: 100%;
    background: #999999;
    content: "";
    z-index: -2;
    transition: transform .3s;
}

.progress {
    border-radius: 0px !important;
}
 
.q__question {
    position: relative;
}
 
.q__question:not(:last-child) {
    margin-bottom: 10px;
}
 
.question__input {
    position: absolute;
    left: -9999px;
}
 
.question__label {
    position: relative;
    display: block;
    line-height: 40px;
    border: 1px solid #ced4da;
    border-radius: 5px;
    background-color: #fff;
    padding: 5px 20px 5px 50px;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}
 
.question__label:hover {
    border-color: #77d0e6;
}
 
.question__label:before,
.question__label:after {
    position: absolute;
    content: "";
}
 
.question__label:before {
    top: 12px;
    left: 10px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: inset 0 0 0 1px #ced4da;
    -webkit-transition: all 0.15s ease-in-out;
    -moz-transition: all 0.15s ease-in-out;
    -o-transition: all 0.15s ease-in-out;
    transition: all 0.15s ease-in-out;
}
 
.question__input:checked+.question__label:before {
    background-color: #77d0e6;
    box-shadow: 0 0 0 0;
}
 
.question__input:checked+.question__label:after {
    top: 22px;
    left: 18px;
    width: 10px;
    height: 5px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg);
}

input:focus {
    outline: none;
}
 
#input-container {
    display: inline-block;
    box-shadow: none !important;
    margin-top: 36px !important;
}
 
label.form-check-label.radio-lb {
    margin-right: 15px;
}
 
#q-box__buttons {
    text-align: center;
}
 
#multistep-form.input[type="text"],
#multistep-form.input[type="email"] {
    padding: 8px 14px;
}
 
#multistep-form.input[type="text"]:focus,
#multistep-form.input[type="email"]:focus {
    border: 1px solid #77d0e6;
    border-radius: 5px;
    outline: 0px !important;
    -webkit-appearance: none;
    box-shadow: none !important;
    -webkit-transition: all 0.15s ease-in-out;
    -moz-transition: all 0.15s ease-in-out;
    -o-transition: all 0.15s ease-in-out;
    transition: all 0.15s ease-in-out;
}

.form-check-input:checked {
    background-color: #EC4969 !important;
    outline: none !important;
    border: none !important;
}
 
.form-check-input:checked[type=radio],
.form-check-input:checked[type=radio]:hover,
.form-check-input:checked[type=radio]:focus,
.form-check-input:checked[type=radio]:active {
    border: none !important;
    -webkit-outline: 0px !important;
    box-shadow: none !important;
}
 
.form-check-input:focus,
#multistep-form.input[type="radio"]:hover {
    box-shadow: none;
    cursor: pointer !important;
}

#success {
    display: none;
}
 
#success h4 {
    color: #77d0e6;
    font-weight: 700;
    font-size: 18px;
}
 
.back-link {
    font-weight: 700;
    color: #77d0e6;
    text-decoration: none;
    font-size: 18px;
}
 
.back-link:hover {
    color: #458999;
}
/* MEDIA QUERIES */
 
@media (min-width: 1200px) {
    .h-35rem {
        height: 35rem;
    }
}
@media (min-width: 990px) and (max-width: 1199px) {
    #title-container {
        padding: 80px 28px 28px 28px;
    }
    #steps-container {
        width: 85%;
    }
}
 
@media (max-width: 991px) {
    #title-container {
        padding: 30px;
        min-height: inherit;
    }
}
 
@media (max-width: 767px) {
    #qbox-container {
        padding: 30px;
    }
    #steps-container {
        width: 100%;
        min-height: 400px;
    }
    #title-container {
        padding-top: 50px;
    }
}
 
@media (max-width: 560px) {
    #qbox-container {
        padding: 40px;
    }
    #title-container {
        padding-top: 45px;
    }
}
/* ************************************************************************************************* */
/* ******************************************* DASHBOARD ****************************************** */
/* ************************************************************************************************* */

.img-size-32 {
    width: 32px;
}
.img-size-32, .img-size-50, .img-size-64 {
    height: auto;
}
.img-circle {
    border-radius: 50%;
}
.mr-2, .mx-2 {
    margin-right: .5rem !important;
}
.ml-2 {
    margin-left: .5rem !important;
}
img {
    vertical-align: middle;
    border-style: none;
}
.mb-3, .my-3 {
    margin-bottom: 1rem !important;
}
.mb-4, .my-4 {
    margin-bottom: 2rem !important;
}
.mb-6, .my-6 {
    margin-bottom: 5rem !important;
}
.p-3 {
  padding: 1rem !important;
 }
 
.align-items-center {
    -webkit-align-items: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
}
.justify-content-between {
    -webkit-justify-content: space-between !important;
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
}
.d-flex {
    display: -webkit-flex !important;
    display: -ms-flexbox !important;
    display: flex !important;
}
.border-bottom {
    border-bottom: 1px solid #dee2e6 !important;
}
.text-light-green {
    color: #EDFFC2 !important;
}
.text-right {
    text-align: right !important;
}
.text-left {
    text-align: left !important;
}
.text-center {
    text-align: center;
}
.text-justify {
    text-align: justify;
}
.flex-column {
    -webkit-flex-direction: column !important;
    -ms-flex-direction: column !important;
    flex-direction: column !important;
}
.small-box, .small-box > a {
    color: #FFFFFF !important;
    font-size: 1rem;
    text-align: left;
}
.small-box {
    border-radius: .25rem;
    box-shadow: 0 0 1px rgba(0,0,0,.125),0 1px 3px rgba(0,0,0,.2);
    display: block;
    margin-bottom: 20px;
    position: relative;
}
.small-box h3, .small-box p {
    z-index: 5;
}
.small-box h3 {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 10px;
    padding: 0;
    white-space: nowrap;
}
.small-box > .inner {
    padding: 10px;
}
.small-box .icon {
    color: rgba(0,0,0,.15);
    z-index: 0;
}
.small-box .icon > i.fa, .small-box .icon > i.fab, .small-box .icon > i.fad, .small-box .icon > i.fal, .small-box .icon > i.far, .small-box .icon > i.fas, .small-box .icon > i.ion {
    font-size: 70px;
    top: 20px;
}
.small-box .icon > i {
    font-size: 90px;
    position: absolute;
    right: 15px;
    top: 15px;
    transition: -webkit-transform .3s linear;
    transition: transform .3s linear;
    transition: transform .3s linear,-webkit-transform .3s linear;
}
.small-box > .small-box-footer {
    background-color: rgba(0,0,0,.1);
    color: rgba(255,255,255,.8);
    display: block;
    padding: 3px 0;
    position: relative;
    text-align: center;
    text-decoration: none;
    z-index: 10;
}
.info-box, .info-box > a {
    color: #fff !important;
    font-size: 0.85rem;
    text-align: left;
}
.info-box {
    box-shadow: 0 0 1px rgba(0,0,0,.125),0 1px 3px rgba(0,0,0,.2);
    border-radius: .25rem;
    background-color: #FFFFFF;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 1rem;
    min-height: 80px;
    padding: .5rem;
    position: relative;
    width: 100%;
}
.info-box .info-box-content {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    line-height: 1.8;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding: 0 10px;
}
.info-box .info-box-text, .info-box .progress-description {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.info-box .info-box-number {
    display: block;
    margin-top: .25rem;
    font-weight: 700;
}
.info-box .info-box-icon {
    border-radius: .25rem;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    font-size: 1.875rem;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    width: 70px;
}
.info-box .info-box-icon > i.fab, .info-box .info-box-icon > i.far, .info-box .info-box-icon > i.fad, .info-box .info-box-icon > i.fal, .info-box .info-box-icon > i.far, .info-box .info-box-icon > i.fas, .info-box .info-box-icon > i.ion {
    font-weight: 400;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;    
}
.info-box .progress {
    background-color: rgba(0,0,0,.125);
    height: 2px;
    margin: 5px 0;
}
.progress {
    box-shadow: none;
    border-radius: 1px;
}
.progress {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 1rem;
    overflow: hidden;
    line-height: 0;
    font-size: .75rem;
    background-color: #E6E6E6;
    border-radius: .25rem;
    box-shadow: inset 0 .1rem .1rem rgba(0,0,0,.1);
}
.info-box .progress .progress-bar {
    background-color: #FFFFFF;
}
.progress-bar {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    overflow: hidden;
    color: #FFFFFF;
    text-align: center;
    white-space: nowrap;
    background-color: #3B82F6;
    transition: width .6s ease;
}
.bg-green {
	background-color:hsla(120,100%,95%,0.3)!important;
}

/* ************************************************************************************************* */
/* ******************************************* Workflow Beta ****************************************** */
/* ************************************************************************************************* */
.fw-bolder{
    font-size: 0.75rem;
    letter-spacing: 0.6px;
}

.btn-lightblue {
    color: #0F4E5C;
    background-color: #C7F4FE;
    border-color: #C7F4FE;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    letter-spacing: 1px;
}
.bg-lightpurple {
    background-color: #FBF9FF !important;
}
.bg-mediumpurple {
    background-color: #E0D1FF !important;
}
.text-darkpurple {
    color: #4E16A8 !important;
}
.bg-lightpink {
    background-color: #FCC1F6 !important;
}
.text-darkpink {
    color: #7D0587 !important;
}
.bg-lightyellow {
    background-color: #FFF972 !important;
}
.text-darkyellow {
    color: #8C8700 !important;
}
.bg-lightgreen {
    background-color: #DAF687 !important;
}
.text-darkgreen {
    color: #228C08 !important;
}
.bg-lightblue {
    background-color: #A8D0FE !important;
}
.text-darkblue {
    color: #3372BF !important;
}
.bg-lightorange {
    background-color: #FABB81 !important;
}
.text-darkorange {
    color: #7A3E07 !important;
}
.bg-vlightgrey {
    background-color: #FBFBFB !important;
}
.text-grey {
    color: #6c757d !important;
}

.shadow-scroll-x {
        white-space: nowrap;
        z-index:20;

        background-color: white;
        background-image: /* Shadows */ 
        linear-gradient(to right, white 0%, white 50%, rgba(15, 78, 92, 0) 100%), 
        linear-gradient(to left, white 0%, white 50%, rgba(15, 78, 92, 0) 100%), 

        /* Shadow covers */ 
        linear-gradient(to right, rgba(15, 78, 92, .1) 0%, white 50%, white 100%), 
        linear-gradient(to left, rgba(15, 78, 92, .1) 0%, white 50%, white 100%);
        background-repeat: no-repeat;

        background-position: left center, right center, left center, right center;
        background-size: 60px 100%, 60px 100%, 60px 100%, 60px 100%;

        /* Opera doesn't support this in the shorthand */
        background-attachment: local, local, scroll, scroll;
        -webkit-overflow-scrolling: touch;
}
/* ************************************************************************************************* */
/* ******************************************* Scrollbar ****************************************** */
/* ************************************************************************************************* */

/* Works on Firefox */
* {
  scrollbar-width: thin;                 
  scrollbar-color: #D9D9D9 #FFFFFF;
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 6px;        /* smaller width */
  height: 6px;       /* smaller height for horizontal scrollbar */
}

*::-webkit-scrollbar-track {
  background: #FFFFFF;
  border-radius: 10px; /* 👈 round track */
}

*::-webkit-scrollbar-thumb {
  background-color: #D9D9D9;
  border-radius: 10px; /* 👈 round thumb */
  border: 2px solid #FFFFFF; /* 👈 keeps thumb shape clean inside track */
}

/* ************************************************************************************************* */
/* **************************************** GOOGLE MAP ************************************************* */
/* ************************************************************************************************* */

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
#map,#map2 {
  width: 100%;
  height: 280px;
}
.map-canvas{
    z-index: 1;
    position: relative;
}
.map-search-container {
    position:absolute;
    margin-top:1rem;
    left:5rem;
    z-index:2;
    max-height:100%;
}

.map-search-results {
    position: sticky;
    z-index:2;
}

.custom-inactive .leaflet-popup-tip,
.custom-inactive .leaflet-popup-content-wrapper {
    color: #842029;
    background-color: #f8d7da;
    border-color: #f5c2c7;
}

.custom-active .leaflet-popup-tip,
.custom-active .leaflet-popup-content-wrapper {
    color: #0f5132;
    background-color: #d1e7dd;
    border-color: #badbcc;
}

.info-table-container {
    height:450px;
    z-index:2;
    position:absolute;
    background-color: #ffffff;
    margin-top:30px;
    margin-left:10px;
    margin-right:50px;
    overflow-y: scroll;
}

.status-button{
    margin-top:80px;
    left:56px;
    z-index:2;
    position:absolute;
}

.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
    outline: none;
    box-shadow: none;
}

/* ************************************************************************************************* */
/* **************************************** FOOTER ************************************************* */
/* ************************************************************************************************* */

footer.sticky-footer 
{
	padding: 3rem 0;
	flex-shrink: 0;
	-ms-flex-negative: 0;
}

footer.sticky-footer .copyright 
{
	line-height: 1;
	font-size: 0.75rem;
}

body.sidebar-toggled footer.sticky-footer 
{
	width: 100%;
}

/* ************************************************************************************************* */
/* **************************************** FOOTER ************************************************* */
/* ************************************************************************************************* */

.about-title
{
    margin:0;
    margin-bottom:4px;
    display: flex;
    font-size: 1.15rem;
    font-weight: bold;
    text-transform: uppercase;
    align-items: center;
    justify-content: center;
}
.listing-title
{
    margin:0;
    margin-bottom:4px;
    font-size: 1.00rem;
    font-weight: bold;
    text-transform: uppercase;
}

/* ************************************************************************************************* */
/* **************************************** Decoration ************************************************* */
/* ************************************************************************************************* */
.tree,
.tree ul {
    list-style-type: none;
    padding-left: 2rem;
}

.tree li {
    position: relative;
    padding: 0.5rem 0;
}

.tree li::before {
    content: "";
    position: absolute;
    top: 0;
    left: -1rem;
    border-left: 1px solid #ccc;
    height: 100%;
    width: 1px;
}

.tree li::after {
    content: "";
    position: absolute;
    top: 1.25rem;
    left: -1rem;
    border-top: 1px solid #ccc;
    width: 1rem;
}

.tree li:last-child::before {
    height: 1.25rem;
}

.tree .toggle {
    cursor: pointer;
}

.tree .collapsed ul {
    display: none;
}
.ribbon {
    position: absolute;
    top: -30px;
    right: -180px;
    padding: 15px;
}
.ribbon-content{
    position: relative; 
}
.ribbon.yellow {
    background: #FFD800;
    color: #2B2B2B;
    border-right: 5px solid #ffe866;
}
.ribbon:before, .ribbon:after {
    content: '';
    position: absolute;
    left: -9px;
    border-left: 10px solid transparent;
}
.ribbon:before {
    top: 0;
}
.ribbon:after {
    bottom: 0;
}
.ribbon.yellow:before {
    border-top: 80px solid #FFD800;
}
.ribbon.yellow:after {
    border-bottom: 80px solid #FFD800;
}
.ribbon span {
    display: block;
    font-weight: 600;
}
.timeline {
    border-left: 1px solid #ccc; /* thinner subtle grey line */
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
    margin: 0 auto;
    position: relative;
    padding: 50px;
    list-style-type: none;
    text-align: left;
    max-width: 80%;
}

.timeline .event {
    border-bottom: 1px dashed #F0F0F0;
    padding-bottom: 25px;
    margin-bottom: 25px;
    position: relative;
}

.timeline .event:last-of-type {
    padding-bottom: 0;
    margin-bottom: 0;
    border: none;
}

.timeline .event:before,
.timeline .event:after {
    position: absolute;
    display: block;
    top: 0;
}

.timeline .event:before {
    left: -207px;
    content: attr(data-date);
    text-align: right;
    font-weight: 100;
    font-size: 0.9em;
    min-width: 120px;
}
.timeline .event:after {
    background: #ffea00;              /* brighter yellow dot */
    border-radius: 50%;
    height: 12px;
    width: 12px;
    content: "";
    top: 5px;
    left: -57px;
    box-shadow: 0 0 10px rgba(255, 234, 0, 0.8); /* glowing bright shadow */
}
.brands__item img {
  display: block;
  max-width: 100%;
  width: 70px;
  object-fit: contain;
}
@media (max-width: 767px) {
    .timeline {
        max-width: 98%;
        padding: 25px;
    }

    .timeline .event {
        padding-top: 30px;
    }

    .timeline .event:before {
        left: 0px;
        text-align: left;
    }

    .timeline .event:after {
        left: -31.8px;
    }
    
    .brands__item img {
      display: block;
      max-width: 100%;
      width: 60px;
      object-fit: contain;
    }
    
}

/* ************************************************************************************************* */
/* **************************************** Horizontal Nav ***************************************** */
/* ************************************************************************************************* */

#workflow-horizontal-nav {
  display: flex;
  align-items: center;
  position: relative;
  background-color: #E0ECFA;
}

#workflow-horizontal-nav .nav-scroll-wrapper {
  position: relative;
  flex-grow: 1;
  overflow: hidden;
}

#workflow-horizontal-nav .nav-scroll {
  display: flex;
  flex-wrap: nowrap; /* Prevent wrapping */
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}
#workflow-horizontal-nav .nav-scroll::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

#workflow-horizontal-nav .nav-item {
  flex: 0 0 auto;
  color: #2B2B2B;
  background-color: transparent;
  border: none;
  padding: 0.5rem 1rem;
  white-space: nowrap;
  text-decoration: none;
}
#workflow-horizontal-nav .nav-item:hover {
  /*background-color: #fff;*/
}

#workflow-horizontal-nav .active {
    color: #3372BF !important; 
    border: none !important;
    outline: none !important;
}

#workflow-horizontal-nav .nav-btn {
  border: none;
  color: #2B2B2B;
  padding: 0.25rem 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent; /* navbar color to transparent */
  z-index: 5;
}

/* ************************************************************************************************* */
/* ***************************** Sidebar Nav (Workflow) ******************************************** */
/* ************************************************************************************************* */

#sidebar {
    min-width: 300px;
    max-width: 300px;
    background: #fff;
    color: #2B2B2B;
    transition: all 0.3s;
    position: fixed;
    top: 0;
    left: -290px; /* hidden by default */
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-wrap: break-word;
    z-index: 5;
}

#sidebar .overflow-y {
    border-right: 2px solid rgba(0, 0, 0, 0.05);
    flex: 1; /* take up remaining vertical space in the sidebar */
    overflow-y: auto; /* scrolls only when content exceeds */
    
    /* Optional: style the scrollbar */
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

/* Hover effect for Firefox */
#sidebar .overflow-y:hover {
    scrollbar-color: rgba(0, 0, 0, 0.5) transparent;
}

/* Chrome, Safari, Edge custom scrollbar */
#sidebar .overflow-y::-webkit-scrollbar {
    width: 2px;
}

#sidebar .overflow-y::-webkit-scrollbar-track {
    background: transparent;
}

#sidebar .overflow-y::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 3px;
    transition: background 0.2s;
}

#sidebar .overflow-y:hover::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.5);
}

/* Hide buttons completely by default */
#sidebar .overflow-y::-webkit-scrollbar-button {
    height: 0;
    width: 0;
    background: none;
}

/* If you really want them to appear on hover, you need to fake them */
#sidebar .overflow-y:hover::-webkit-scrollbar-button {
    height: 8px;
    background: rgba(0, 0, 0, 0.2); /* or your arrow graphic */
}
#sidebar.active {
  left: 0; 
    z-index:10;
}
#sidebar.active .custom-menu {
  margin-right: -20px;
}
#sidebar .nav-item {
    display: flex;
    align-items: start; /* vertical center */
    gap: 8px; /* space between circle and text */
    background: none;
    border: none;
    padding: 0.5rem;
    width: 100%;
    text-align: left;
    overflow-wrap: break-word;
    border-left: 3px solid rgba(0, 0, 0, 0.1);
    color: #2B2B2B;
}
#sidebar .nav-item:hover {
    border-left: 3px solid rgba(0, 0, 0);
    color: #000;
}

#sidebar .active,
#sidebar .nav-item.active:hover {
    color: #2B2B2B;
    border-left: 3px solid rgba(0, 0, 0);
    outline: none !important;
    font-weight: 700;
}

#sidebar .nav-item .workflow-counter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: transparent; /* default no fill */
    color: #2B2B2B;
    font-size: 12px;
    font-weight: bold;
    border: 1px solid transparent;
    flex-shrink: 0; /* don't shrink */
}

#sidebar .workflow-text {
    flex: 1; /* take remaining space */
}
#sidebar ul.components {
  padding: 0; 
}
#sidebar ul li > ul {
  margin-left: 10px; 
}
#sidebar ul li > ul li {
  font-size: 14px; 
}
#sidebar ul li a {
  padding: 10px 0;
  display: block;
  color: rgba(255, 255, 255, 0.8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1); 
}
#sidebar ul li a:hover {
  color: #fff; 
}
#sidebar ul li.active > a {
  background: transparent;
  color: #fff; 
}
@media (max-width: 991.98px) {
    #sidebar {
      margin-left: 0px; 
        z-index: 1!important; 
    }
    #sidebar.active {
      margin-left: 0; 
        z-index: 10!important; 
    }
    #sidebar .custom-menu {
      margin-right: -20px !important;
      top: 120px !important; 
    } 
}
#sidebar .custom-menu {
  display: inline-block;
  position: absolute;
  top: 150px;
  right: 0;
  margin-right: -20px;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s; 
}
@media (prefers-reduced-motion: reduce) {
  #sidebar .custom-menu {
    -webkit-transition: none;
    -o-transition: none;
    transition: none; 
  } 
}
#sidebar .custom-menu .btn {
  width: 40px;
  height: 40px;
  border-radius: 50%; 
  color: #2B2B2B;
}
#sidebar .custom-menu .btn.btn-primary {
  background: #ffc107;
  border-color: #ffc107; 
}
#sidebar .custom-menu .btn.btn-primary:hover, #sidebar .custom-menu .btn.btn-primary:focus {
  background: #ffc107 !important;
  border-color: #ffc107 !important; 
}

a[data-toggle="collapse"] {
  position: relative; 
}

.dropdown-toggle {
  position: relative; /* Make sure ::after is positioned relative to the link */
  padding-right: 1.5rem; /* Add space for the arrow */
}
.dropdown-toggle::after {
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%); 
}

@media (max-width: 991.98px) {
  #sidebarCollapse span {
    display: none; 
  } 
}

#workflow-content {
  width: 100%;
  padding: 0;
  min-height: 100vh;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s; 
}
.workflow-card {
  min-height: 80px; /* keeps short ones from looking too tiny */
}
/* ************************************************************************************************* */
/* ****************************************** Animation ******************************************** */
/* ************************************************************************************************* */

/* Pulse animation */
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.pulse {
  animation: pulse 1s ease-in-out infinite;
}
@keyframes pull {
  0%   { transform: translateX(0); }
  30%  { transform: translateX(-6px); }
  60%  { transform: translateX(6px); }
  100% { transform: translateX(0); }
}

.pull {
  animation: pull 1.5s ease-in-out infinite;
} 

/* Fullscreen loader overlay */
#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  opacity: 1;
  transition: opacity 0.5s ease;
}

/* Loader balls container */
.bouncing-balls {
  display: flex;
  gap: 10px;
}

/* Each ball */
.ball {
  width: 10px;
  height: 10px;
  background: #3498db;
  border-radius: 50%;
  animation: bounce 0.6s infinite alternate;
}

/* Stagger animations */
.ball:nth-child(2) {
  animation-delay: 0.2s;
}
.ball:nth-child(3) {
  animation-delay: 0.4s;
}

/* Bounce effect */
@keyframes bounce {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-20px);
  }
}


/* ************************************************************************************************* */
/* ****************************************** Notice Bar ******************************************** */
/* ************************************************************************************************* */

.notice-bar {
    background-color: #fff3cd; /* Bootstrap warning background */
    color: #664d03; /* Bootstrap warning text */
    padding: 10px 0;
}
.carousel-item {
    text-align: center;
}
.carousel-fade .carousel-item {
    opacity: 0;
    transition: opacity 1.5s ease-in-out; /* adjust timing here */
}

.carousel-fade .carousel-item.active {
    opacity: 1;
}