@charset "utf-8";

/* ------ universal styles setup ------ */
@import url("./gilroy.css");
@import url("./roboto.css");

:root{ --sat: env(safe-area-inset-top); --sar: env(safe-area-inset-right); --sab: env(safe-area-inset-bottom); --sal: env(safe-area-inset-left); --bs-box-shadow: 0.25rem 0.5rem 1rem rgba(0, 0, 0, 0.15); --csat: constant(safe-area-inset-top); --csab: constant(safe-area-inset-bottom);}

:root{--minmax: 320px; --gt-auto-fill: auto-fill; --gt-auto-fit: auto-fit; --grid-template-column-fit: repeat(var(--gt-auto-fit), minmax(var(--minmax), 1fr)); --grid-template-column-fill: repeat(var(--gt-auto-fill), minmax(var(--minmax), 1fr));}

/* common */
html{/*overflow: hidden;*/}
body{/*padding-top: 56px; padding-bottom: 56px; overflow: hidden; */font-family: 'Gilroy'; display: flex; flex-direction: column;height: 100vh; -webkit-text-size-adjust: 100%;} /*background-color: var(--bs-gray-200); -> use only for testing,  background-color: var(--w); color: var(--bs-black); -> no need to add bg-color and color for body */
main{/*height: 100vh; max-height: calc(100vh - 112px); overflow-y: overlay; display: flex;*/ flex:1; padding-top: 56px;}
footer{margin-top: auto;}
main + footer.fixed-bottom{z-index: 1029;}
a{/*color: var(--b);*/}
i{/*font-size: 11px;*/}
h1,h2,h3,h4,h5,h6,p{/*margin-bottom: 0.5rem;*/} /*affects all defaults*/
ol, ul{padding-left: 0;}
.fs-7, .xsmall{font-size: 0.75rem;} .fs-8,.dxsmall{font-size: 0.60rem;}.fs-9, .txsmall{font-size: 0.45rem;}.fs-10, .fxsmall{font-size: 0.25rem;}
p:not([class="highcharts-description"]){white-space: pre-wrap;}
table, a, h5.modal-title, h4.modal-title{--bs-body-font-size:1rem; font-size: var(--bs-body-font-size); }
h5.modal-title{white-space: normal; word-break: break-word;}
.text-truncate{max-width: 100%;}
.bg-size-cover { background-size: cover !important;} .bg-size-contain { background-size: contain !important;} .bg-size-auto { background-size: auto !important;} .bg-size-100 { background-size: 100% !important;}

/* z-index setup */
:root{--bs-daterangepicker-dropdown-menu-z-index: 3001; --bs-modal-zindex: 1055; --bs-layout-header-z-index: 1031; --bs-layout-footer-z-index: 1030; --bs-scrolltop-z-index: 1; --bs-profile-holder-z-index: 0; --bs-profile-edit-z-index: 1;} /* --bs-layout-header-z-index: 1031; and --bs-layout-footer-z-index: 1030; and --bs-modal-zindex: 1055; -> not works with open daterangepicker's index 3001 - #imrudeen*/
.daterangepicker.dropdown-menu{z-index: var(--bs-daterangepicker-dropdown-menu-z-index) !important;}
main .daterangepicker.dropdown-menu{--bs-daterangepicker-dropdown-menu-z-index: 1030; z-index: var(--bs-daterangepicker-dropdown-menu-z-index) !important;} /*parentEl: 'main' -> add this property on initialization , refer drawers_modal static design - #imrudeen*/
.modal-backdrop.show + .select2-container{z-index: 1060;}
 
/*[data-bs-theme="primary"]{  --bs-body-color: var(--bs-white);  --bs-body-color-rgb: #ffffff;  --bs-body-bg: var(--bs-blue);  --bs-body-bg-rgb: 13, 110, 253; //#0d6efd;  --bs-tertiary-bg: #3182ce;}
[data-bs-theme="primary"] .btn {  --bs-dropdown-bg: #337ab7;  --bs-dropdown-link-active-bg: #004085;}
[data-bs-theme="primary"] .btn-pill {  --bs-btn-bg: #5788ff;  --bs-btn-border-color: rgba(255, 255, 255, 0.25);  --bs-btn-hover-bg: #4e7dff;  --bs-btn-hover-border-color: rgba(255, 255, 255, 0.25);  --bs-btn-active-bg: #4367b1;  --bs-btn-active-border-color: rgba(255, 255, 255, 0.5);  --bs-btn-focus-border-color: rgba(255, 255, 255, 0.5);  --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.2);}
.theme-primary-bg-body {  --bs-bg-opacity: 1;  background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important;}
.theme-primary-text-body {  --bs-text-opacity: 1;  color: rgba(var(--bs-body-color-rgb), var(--bs-text-opacity)) !important;}*/

/* global setup */
.navbar .nav-item .nav-link{font-size: 1.15rem;}
.popover-body{--bs-popover-body-padding-y: 0.5rem; --bs-popover-body-padding-x: 0.5rem; padding: var(--bs-popover-body-padding-y) var(--bs-popover-body-padding-x);}

@media screen and (max-width:767px){ main > .container-fluid, main > .container{/*padding-left: 5px; padding-right: 5px;*/}}

/* breadcrumb styles setup */
.breadcrumb{ margin-bottom: 0rem; --bs-breadcrumb-padding-y: 0.25rem; --bs-breadcrumb-padding-x: 0.5rem; --bs-breadcrumb-border-radius: 1rem; --bs-breadcrumb-divider: '/' ; --bs-breadcrumb-font-size:1rem;} /* --bs-breadcrumb-divider: url('../../.././resource/mobile_design/icon-right-arrow.svg');*/
.breadcrumb a{font-size: inherit;}


/* animations setup */
.nav-item, .form-label{ -webkit-animation-name: fadeInUp;  -moz-animation-name: fadeInUp;  -o-animation-name: fadeInUp;  animation-name: fadeInUp;  -webkit-animation-fill-mode: both;  -moz-animation-fill-mode: both;  -o-animation-fill-mode: both;  animation-fill-mode: both;  -webkit-animation-duration: 1s;  -moz-animation-duration: 1s;  -o-animation-duration: 1s;  animation-duration: 1s;} /*load animation*/

/* titles - fonts */
.xxltitle{font-size: 24px; font-weight: 700; color: var(--b); }
.ptitle, .xltitle{font-size: 20px; font-weight: 700; color: var(--b); font-family: 'Roboto'; }
.stitle, .lgtitle{font-size: 16px; font-weight: 600; color: var(--g3); font-family: 'Roboto';}
.title, .mdtitle{font-size: 14px; font-weight: 500; color: var(--g6); font-family: 'Roboto';}
.smtitle{font-size: 14px; font-weight: 400; color: var(--g3); font-family: 'Roboto';}
.xstitle{font-size: 11px; font-weight: 400; color: var(--g3); font-family: 'Roboto';}
.xxstitle{font-size: 8px; font-weight: 400; color: var(--g3); font-family: 'Roboto';}
.fg{font-family: 'Gilroy' !important; font-weight: 500;}

/* buttons */
/*.btn-outline{text-align: center; border-radius: 10px; font-size: 16px; font-weight: 600; display: flex; align-items: center; justify-content: center; border: 1px solid var(--bs-secondary-border-subtle) !important;}
.btn-blue {text-align: center; border-radius: 10px; font-size: 16px; font-weight: 600;display: flex; align-items: center; justify-content: center; background-color: var(--b) !important; color: var(--w) !important; }
.btn-gray{text-align: center; border-radius: 10px; font-size: 16px; font-weight: 600; display: flex; align-items: center; justify-content: center;  background-color: var(--gf);}
.btn-blue.btn-lg, .btn-gray.btn-lg, .btn-outline.btn-lg{padding:0.75rem 1rem;}

.btn-blue:hover, .btn-blue:active, .btn-blue:focus, .btn-blue:focus-visible{background-color: var(--db) !important;}
.btn-gray, .btn-gray:hover, .btn-gray:active, .btn-gray:focus, .btn-gray:focus-visible {background-color: var(--ga);}*/

.btn-circle{width: 25px; height: 25px; border-radius: 50px; padding: 0;}
.btn + .btn{ /*margin-left: 0.5rem;*/} /*margin-left: 0.5rem; -> insteadof this use gap*/
.btn-circle .icon{filter: brightness(0) invert(1);}

.btn:hover {/*animation: pulsate 1s infinite ease-out;*/} 

/* ----- Scrollbar Style ----- */
/* Chrome, Edge, and Safari */
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background-color:transparent; }
*::-webkit-scrollbar-thumb { background-color: rgba(1,1,1,0.3); -webkit-border-radius: 10px; border-radius: 10px; border-left: 0px solid #f50000; border-right: 0px solid #f50000; }
/* Firefox - if need enable - #imrudeen
* { scrollbar-width: thin; scrollbar-color: #d6d6d6 #ffffff; } */


/* -----  Content Load Animation Style ----- */
@-webkit-keyframes fadeInUp{from{opacity: 0;-webkit-transform: translatey(30px);-moz-transform: translatey(30px);-o-transform: translatey(30px);transform: translatey(30px)}to{opacity: 1;-webkit-transform: translatey(0);-moz-transform: translatey(0);-o-transform: translatey(0);transform: translatey(0)}}@-moz-keyframes fadeInUp{from{opacity: 0;-webkit-transform: translatey(30px);-moz-transform: translatey(30px);-o-transform: translatey(30px);transform: translatey(30px)}to{opacity: 1;-webkit-transform: translatey(0);-moz-transform: translatey(0);-o-transform: translatey(0);transform: translatey(0)}}@keyframes fadeInUp{from{opacity: 0;-webkit-transform: translatey(30px);-moz-transform: translatey(30px);-o-transform: translatey(30px);transform: translatey(30px)}to{opacity: 1;-webkit-transform: translatey(0);-moz-transform: translatey(0);-o-transform: translatey(0);transform: translatey(0)}}.fadeInUp{-webkit-animation-name: fadeInUp;-moz-animation-name: fadeInUp;-o-animation-name: fadeInUp;animation-name: fadeInUp;-webkit-animation-fill-mode: both;-moz-animation-fill-mode: both;-o-animation-fill-mode: both;animation-fill-mode: both;-webkit-animation-duration: 1s;-moz-animation-duration: 1s;-o-animation-duration: 1s;animation-duration: 1s}

/* common */
.isEmpty:empty{display: none;}
.btn-xs{--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem;}
.btn-xxs{--bs-btn-padding-y: .15rem; --bs-btn-padding-x: .25rem; --bs-btn-font-size: .75rem;}
.icon-link-hover-vr{--bs-icon-link-transform: translate3d(0, -.125rem, 0);}
.border-dashed{border-style: dashed;}
.max-width-none{max-width: none !important;}
.max-width-unset{max-width: unset !important;}
.bg-blue{background-color: var(--b) !important;}
.text-blue{color: var(--b) !important;}
.flex-fill{max-width: 100%;}
.flexsb{display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;}
.flexs{display: flex; flex-wrap: wrap; align-items: center; justify-content: start;}
.flexc{display: flex; flex-wrap: wrap; align-items: center; justify-content: center;}
.flexe{display: flex; flex-wrap: wrap; align-items: center; justify-content: end;}
.wh10{width: 10px; height: 10px;}.wh20{width: 20px; height: 20px;}.wh30{width: 30px; height: 30px;}.wh40{width: 40px; height: 40px;}.wh50{width: 50px; height: 50px;}.wh60{width: 60px; height: 60px;}.wh70{width: 70px; height: 70px;}.wh80{width: 80px; height: 80px;}.wh90{width: 90px; height: 90px;}.wh100{width: 100px; height: 100px;}
.w10{width: 10px; }.w15{width: 15px; }.w20{width: 20px; }.w30{width: 30px; }.w40{width: 40px; }.w50{width: 50px; }.w60{width: 60px; }.w70{width: 70px; }.w80{width: 80px; }.w90{width: 90px; }.w100{width: 100px; }
.h10{height: 10px;}.h20{height: 20px;}.h30{height: 30px;}.h40{height: 40px;}.h50{height: 50px;}.h60{height: 60px;}.h70{height: 70px;}.h80{height: 80px;}.h90{height: 90px;}.h100{height: 100px;}
.icon{vertical-align: baseline;}
.text-indent{text-indent: -15px; padding-left: 15px;}
.ellipsis{text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.ellipsis-1, .truncate-lc{overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.position-sticky{top: 0; z-index: 1; background-color: var(--bs-body-bg);}
.rating{color: var(--bs-yellow);}
.rating + .rating{ margin-left: 0.5rem;}
.scrollable-y{--scroll-area: 350px; max-height: var(--scroll-area); overflow-y: auto; overflow-x: hidden;}
.scrollable-x{--scroll-area: 350px; max-height: var(--scroll-area); overflow-y: hidden; overflow-x: auto;}
.icon-dropdown .dropdown-toggle::after{content: unset;}
.onlysobigpara, .onlysobigcontainer, .onlysobigcontainermodal{white-space: pre-line; word-break: break-word;}
.onlysobigcontainer, .onlysobigcontainermodal {/*max-height: 50px;*/overflow: hidden; /*max-width: calc(100% - 35px);*/} 
.showmore-onlysobigcontainer {display: block; cursor: pointer; font-size: .75rem; font-weight: normal; text-align: left;}

.viewall{transition-duration: .5s;font-size: 12px;display: inline-flex}
.viewall i{padding-left: 5px;transition-duration: .5s}
.viewall:hover i{padding-left: 20px;transition-duration: .5s}
.viewall i::before{font-size: 13px}
.icon-link{white-space: nowrap;}

.image-gallery{display: flex;flex-flow: row wrap;justify-content: flex-start;overflow-x: hidden;overflow-y: hidden; margin-bottom: 0;}
.gallery-item{ border-radius: 10px; width: 80px; height: 80px; margin: 5px; float: left; position: relative; overflow: hidden; flex-basis: 20%;-ms-flex: auto; flex:1 0 auto;background-color: #efefef; justify-content: center; display: flex; max-width: 130px;}
.gallery-item .bg-img{position: absolute; transform: translate(-50%, -50%); min-height: 100%;  /*transform: translate(-50%, -65%); min-height: 70%;*/ top: 50%; left: 50%; max-width: unset; max-height: unset; min-width: 100%; background-size: cover; background-repeat: no-repeat; background-position: center;}
.hidden-count{ position: absolute; top: 35%; right: 35%; color: var(--bs-primary); background-color: rgba(255, 255, 255, 0.7); border-radius: 50%; padding: 5px; cursor: pointer; font-weight: 600; width: 30px; height: 30px; font-size: 13px; display: flex; align-items: center; justify-content: center;}
.img-fluid-holder{width: 100%; height: 100%; min-width: 100%; min-height: 100%;background-size: cover; background-repeat: no-repeat; background-position: center;}
label.box{background:var(--bs-body-secondary-bg);}

/*@media(max-width: 1333px){.gallery-item{flex-basis: 10%}}
@media(max-width: 1073px){.gallery-item{flex-basis: 15%}}
@media(max-width: 815px){.gallery-item{flex-basis: 15.2%}}
@media(max-width: 555px){.gallery-item{flex-basis: 30.33%}}
@media(max-width: 425px){.gallery-item{flex-basis: 22.5%}}
@media(max-width: 375px){.gallery-item{flex-basis: 46%}}*/

/* Accordion style setup */
.accordion{--bs-accordion-btn-icon-width:0.75rem;}
.accordion-button::after{content: ''; /*position: absolute; top: 50%; right: 1rem;*/ width: 0; height: 0; border-style: solid; border-width: 0.275rem 0.275rem 0; /*font-family: "Font Awesome 6 Free"; content: "\f107"; display: grid; place-content:center; font-size: 0.75rem; font-weight: 900; */background-image: unset !important;}
.accordion-button:not(.collapsed)::after{background-image: unset !important; }

/* Chart style setup */
.chart-container{width: 100%; min-height: 15rem; }

/* flex - grid styles setup (cards) */
.grid-row{display: flex;flex-flow: row wrap;justify-content: flex-start;overflow-x: hidden;overflow-y: hidden;}
.grid-item{height: auto; flex-basis: 20%;-ms-flex: auto;width: 259px;position: relative;padding: 10px;box-sizing: border-box; z-index: 0;}  /*z-index: 0; -> need to avoid onscroll projects list item grid/list item button click issue*/
.grid-row a{text-decoration: none}
.wrapping-link{position: absolute;top: 0;left: 0;bottom: 0;right: 0;z-index: 2;color: currentColor}
.grid-item-wrapper{-webkit-box-sizing: initial;-moz-box-sizing: initial;box-sizing: initial;background: #ececec;margin: 0;height: 100%;width: 100%;overflow: hidden;-webkit-transition: padding 0.15s cubic-bezier(0.4,0,0.2,1), margin 0.15s cubic-bezier(0.4,0,0.2,1), box-shadow 0.15s cubic-bezier(0.4,0,0.2,1);transition: padding 0.15s cubic-bezier(0.4,0,0.2,1), margin 0.15s cubic-bezier(0.4,0,0.2,1), box-shadow 0.15s cubic-bezier(0.4,0,0.2,1);position: relative;border-radius: 10px}
.grid-item-container{height: 100%;width: 100%;position: relative}
.grid-image-top{height: 150px;width: 120%;background-size: cover;position: relative;background-position: 50% 50%;left: -10.5%;top: -4.5%;overflow: hidden}
.grid-image-top .centered{text-align: center;transform: translate(-50%, -50%);background-size: cover;background-repeat: no-repeat;position: absolute;top: 54.5%;left: 50%;width: 100%;height: 100%;background-position: center}
.grid-image-top.rex-ray{background: -webkit-gradient(linear,left top, left bottom,from(#007DB8),to(#00447C));background: -webkit-linear-gradient(#007DB8,#00447C);background: -o-linear-gradient(#007DB8,#00447C);background: linear-gradient(#007DB8,#00447C)}
.rex-ray-image{background-image: url(https://thecodeteam.com/wp-content/uploads/2017/08/Rex-Ray-icon-209x300.png)}
.grid-item-content{padding: 0 10px 10px;}
.grid-item-footer{display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}
.grid-item-footer.label-group{justify-content: start; grid-gap: 0.25rem 0.5rem; }
.grid-item-footer .h-divider{display: none; opacity: 0.3;}
.grid-item-footer .label + .h-divider{display: inline-block; }
.grid-item-footer.label-group.label-grid-group.isEmpty:empty{display: none;}
.grid-item-footer.label-group.label-grid-group {--minmax: 80px; display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--minmax), 1fr));}
.grid-item-footer.label-group.label-grid-group .h-divider{display: none;}
.grid-item-footer.label-group.label-grid-group .label{padding: 0.25rem; border-radius: 7px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.item-title{font-size: 24px;line-height: 26px;font-weight: 700;margin-bottom: 18px;display: block}
.item-category{text-transform: uppercase;display: block;margin-bottom: 20px;font-size: 14px}
.item-excerpt{margin-bottom: 20px;display: block;font-size: 14px}
.more-info{position: absolute;bottom: 0;margin-bottom: 1rem;padding-left: 0;transition-duration: .5s;font-size: 12px;display: flex}
.more-info i{padding-left: 5px;transition-duration: .5s}
.grid-item:hover .more-info i{padding-left: 20px;transition-duration: .5s}
.more-info i::before{font-size: 13px}
.grid-item:hover .grid-item-wrapper{padding: 2% 2%;margin: -2% -2%}
@media(max-width: 1333px){.grid-item{flex-basis: 33.33%}}
@media(max-width: 1073px){.grid-item{flex-basis: 33.33%}}
@media(max-width: 815px){.grid-item{flex-basis: 50%}}
@media(max-width: 555px){.grid-item{flex-basis: 100%}}

.grid-item.list_view{width: 280px;flex-basis: 33.33%;}
.list_view .grid-item-container{flex-direction: row; display: flex;}
.list_view .grid-image-top{height: 120%; width: 100px;left: -5.5%; top: -10.5%;float: left;}
.list_view .grid-image-top .centered{top: 50%; left: 60%;}
.list_view .grid-item-content{padding: 10px 10px 10px 0px; width: calc(100% - 100px); float: left;}
@media(max-width: 1333px){.grid-item.list_view{flex-basis: 33.33%}}
@media(max-width: 1073px){.grid-item.list_view{flex-basis: 50%}}
@media(max-width: 815px){.grid-item.list_view{flex-basis: 50%}}
@media(max-width: 555px){.grid-item.list_view{flex-basis: 100%}.list_view .grid-image-top{left: -3.5%;}}


/* forms */
.error-text{ --bs-text-opacity: 1; color: rgba(var(--bs-danger-rgb), var(--bs-text-opacity)) !important; font-size: 0.75rem; text-align: left; margin: 0.25rem 0rem;}
.form-group:not(:last-child), .form-check:not(:last-child){margin-bottom: 1rem;}
.form-label{font-weight: 500; font-size: 14px;}
.form-control{min-height: 40px; font-size: 14px; /*background-color: var(--gf); border-color: transparent !important;*/ transition: none !important; border-radius: 10px;}

.form-control:hover, .form-control:focus{/*background-color: var(--w); -webkit-box-shadow:2px 2px 7px rgba(0, 0, 0, 0.2); -moz-box-shadow:2px 2px 7px rgba(0, 0, 0, 0.2); box-shadow:2px 2px 7px rgba(0, 0, 0, 0.2);*/ }
.form-control:-webkit-autofill { /*background-color: var(--gf) !important;  -webkit-box-shadow: 0 0 0px 1000px var(--gf) inset !important; box-shadow: 0 0 0px 1000px var(--gf) inset !important;*/}

/* forms/form-select */
.input-group .form-select, 
.input-group .select2, 
.input-group .select2 .select2-selection, 
.input-group .select2 .select2-selection .select2-selection__rendered {  
  border-radius: 10px !important; 
}

.input-group .form-select:first-child, 
.input-group .select2:not(:last-child), 
.input-group .select2:not(:last-child) .select2-selection, 
.input-group .select2:not(:last-child) .select2-selection .select2-selection__rendered {  
  border-top-right-radius: 0 !important;  
  border-bottom-right-radius: 0 !important;
}

.input-group .form-select:last-child, 
.input-group .select2:last-child, 
.input-group .select2:last-child .select2-selection, 
.input-group .select2:last-child .select2-selection .select2-selection__rendered {  
  border-top-left-radius: 0 !important;  
  border-bottom-left-radius: 0 !important;
}

.input-group .form-select:only-child {  
  border-radius: 10px !important;
}

/* forms/form-check */
.form-check{/*padding-left: 0;*/} /*padding-left: 0; -> affects all default checks*/
.form-check-label{line-height: var(--bs-body-line-height); }
.form-check-success .form-check-input:checked {background-color: var(--bs-success); border-color: var(-bs-success-border-subtle);}
.form-check-success .form-check-input:focus { border-color: var(--bs-success-border-subtle); outline: 0; box-shadow: 0 0 0 .25rem rgba(25,135,84,.25)}
.form-check-danger .form-check-input:checked {background-color: var(-bs-danger); border-color: var(--bs-danger-bg-subtle);}
.form-check-danger .form-check-input:focus { border-color: var(--bs-danger-border-subtle); outline: 0; box-shadow: 0 0 0 .25rem rgba(220,53,69,.25)}
.form-check-warning .form-check-input:checked {background-color: var(-bs-warning); border-color: var(--bs-warning-bg-subtle);}
.form-check-warning .form-check-input:focus { border-color: var(--bs-warning-border-subtle); outline: 0; box-shadow: 0 0 0 .25rem rgba(255,193,7,.25)}
.form-check-info .form-check-input:checked {background-color: var(-bs-info); border-color: var(--bs-info-bg-subtle);}
.form-check-info .form-check-input:focus { border-color: var(--bs-info-border-subtle); outline: 0; box-shadow: 0 0 0 .25rem rgba(13,202,240,.25)}

.flex-form-check{display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding-left: 0;}
.flex-form-check label{flex: 1; }
.form-check .btn{/*background-color: var(--gf) !important; color: var(--g9);*/ border-color: transparent !important; margin: 2px; border-radius: 10px; font-weight: 500; font-size: 14px; display: flex; align-items: center; justify-content: center; white-space: nowrap;}  /*white-space: nowrap; -> if it is not fit for all, try page specific changes*/
.form-check .btn-check:checked + .btn{/*background-color: var(--b) !important; color: var(--w);*/}
.form-check .btn i{ font-size: 12px;}
.input-daterange-item{position: relative; flex: 1; }
.input-daterange-item input{max-width: 100%;}
#clearFilterDueDates{color: var(--bs-danger); font-size: 0.75rem; cursor: pointer;}

/* Custom styles for select - form-select */ /*need this for themes - #imrudeen*/
.custom-select-wrapper { position: relative;}
.custom-select-wrapper .form-select {  background-image: unset;}
.custom-select-wrapper::after { content: '';  position: absolute;  top: 50%;  right: 1rem;  width: 0;  height: 0;  border-style: solid;  border-width: 0.275rem 0.275rem 0;  transform: translateY(-50%) rotate(0deg);  pointer-events: none;}
.custom-select-wrapper:focus-within::after { transform: translateY(-50%) rotate(180deg);}

/* forms/input-field */
[type="search"]:not([class*="select2-search__field"]){background-image: url('../../.././resource/mobile_design/icon-search.svg'); background-position: 10px center; background-repeat: no-repeat; padding-left: 30px;}

.input-field { position: relative; display: flex; align-items: center;} /* animated form input-field */
.input-field input{-webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 20px 0 5px 40px; background: var(--gf); }
.input-field label {position: absolute; left: 40px; top: 17px; margin-bottom: 0; font-size: 12px; -webkit-transition: all .2s; transition: all .2s; transform: translateY(-50%);pointer-events: none;}
.input-field .btn-circle {position: absolute; left: 5px;}
.input-field input::-webkit-input-placeholder{ color:transparent;}
.input-field input::-moz-placeholder { color:transparent;}
.input-field input:focus + label, .input-field input:not(:placeholder-shown) ~ label{ top: 7px; font-size: 10px; color: var(--ga);}

.input-field-70 input{height: 70px; padding: 20px 0 5px 70px;}
.input-field-70 label{left: 70px; top: 25px; }
.input-field-70 .btn-circle{width: 40px; height: 40px; left: 15px;}
.input-field-70 input:focus + label, .input-field-70 input:not(:placeholder-shown) ~ label { top: 17px;}


.custom-file-input-label { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; }
.custom-file-input-label input[type="file"] { position: absolute; left: 0; top: 0; opacity: 0; cursor: pointer; }

/* table styles setup */
#vendorAccordion table{table-layout: fixed;}
#vendorAccordion table td span{word-break: break-word;}

/* callout styles setup */
.callout h4{margin-bottom: .25rem}
.callout>:last-child{margin-bottom: 0}
.callout .callout{margin-top: -.25rem}

/* modal styles setup */
.modal-status .modal-dialog{width: 320px;}
.btn-close-sm { --bs-btn-close-width: 1rem; --bs-btn-close-height: 1rem;}
.btn-close-md { --bs-btn-close-width: 1.5rem; --bs-btn-close-height: 1.5rem;}
.btn-close-lg { --bs-btn-close-width: 2rem; --bs-btn-close-height: 2rem;}
.btn-close-lg { --bs-btn-close-width: 2.5rem; --bs-btn-close-height: 2.5rem;}
.confirmationmodal.show{ display: flex !important; align-items: center; justify-content: center;}
.modal-header + form {overflow-y: auto;} /*added to avoid header scroll along with body on left/right modals*/

/* select2 styles setup */
.select2-container{display: flex !important; flex-grow: 1;}
.select2-container .selection{flex:1; overflow: hidden;} /*overflow: hidden; -> here required to avoid ellipsed text overflow on select2-selection__rendered - #imrudeen */
.select2-container .select2-selection--single, .select2-container--default .select2-selection--multiple{ display: flex !important; justify-content: space-between; align-items: center; padding: .375rem .75rem .375rem .75rem; font-size: 1rem; font-weight: 400; line-height: 1.5 !important; flex: 1; min-height: 40px !important; }
.select2-container .select2-selection--single .select2-selection__rendered{ flex: 1; line-height: inherit !important; padding: 0 !important;}
.select2-container--default .select2-selection--single .select2-selection__arrow{display: flex !important; position: unset !important; height: auto !important; line-height: inherit !important; width: 20px !important; justify-content: center;}
.select2-container--default .select2-selection--single .select2-selection__arrow b{margin: unset !important; position: unset !important; display: flex !important; height: auto !important; width: auto !important; line-height: inherit !important;}

.select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple{border-radius: 10px !important; border-color: var(--bs-gray-300) !important;}
.select2-container--default.select2-container--open.select2-container--above .select2-selection--single,.select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple{border-top-left-radius: 0 !important; border-top-right-radius: 0 !important;}
.select2-container--default.select2-container--open.select2-container--below .select2-selection--single, .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple{border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important;}

.select2-container .select2-search--inline .select2-search__field{width: 100% !important; margin-top: 0 !important;}
.select2-container .select2-selection--single .select2-selection__rendered{display: flex !important;align-items: center; justify-content: start; flex-direction: row-reverse;}
.select2-container--default .select2-selection--single .select2-selection__clear {margin-left: auto; }
.select2-container--default .select2-selection--single .select2-selection__clear, .select2-container--default .select2-selection--multiple .select2-selection__clear{color: var(--bs-danger); position: absolute; right: 0;}

.select2-container--default .select2-selection--multiple .select2-selection__rendered{width: 100%; display: flex !important; flex-wrap: wrap; /*flex-direction: row-reverse;*/}
.select2-container--default .select2-selection--multiple .select2-selection__choice{/*flex: 1;*/ text-align: center; justify-content: space-between; display: flex;}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{margin-right: auto;}
.select2-container--default .select2-selection--multiple .select2-selection__clear{margin-right: 0; margin-left: auto;}
.select2-container .select2-search--inline{ width: 100%; margin-right: auto;}

.select2-results__option{word-break: break-word;}

/* tab styles setup */
.nav.nav-tabs .nav-link {
    margin-top: 5px;
    /*color: #000;*/ /*color: #000; -> dont use color for theme - #imrudeen*/
    border: none;
    border-bottom: 3px solid #e2e2e2;
    transition: all .3s ease-in-out;
}
.nav.nav-tabs .nav-link.active {
    color: var(--bs-nav-link-color);
    border-bottom: 3px solid var(--bs-nav-link-color);
}
@media screen and (max-width:767px){
    .nav.nav-tabs .nav-link{padding: 2px 4px;}
}

/* list-group styles setup */
.list-group.list-group-horizontal{flex-direction: row;}
.list-group{width: 100%; /*margin-inline: 1.5rem*/}
.form-check-input:checked .form-checked-content{opacity: .5}
.form-check-input-placeholder{border-style: dashed}
[contenteditable]:focus{outline: 0}
.list-group-checkable .list-group-item{cursor: pointer}
.list-group-item-check{position: absolute;clip: rect(0, 0, 0, 0)}
.list-group-item-check:hover .list-group-item{background-color: var(--bs-secondary-bg)}
.list-group-item-check:checked .list-group-item{color: #fff;background-color: var(--bs-primary);border-color: var(--bs-primary)}
.list-group-item-check[disabled] .list-group-item,.list-group-item-check:disabled .list-group-item{pointer-events: none;filter: none;opacity: .5}
.list-group-radio .list-group-item, .list-group-check .list-group-item{cursor: pointer;border-radius: .5rem}
.list-group-radio .form-check-input, .list-group-check .form-check-input{z-index: 2;margin-top: -.5em}
.list-group-radio .list-group-item:hover, .list-group-radio .list-group-item:focus, .list-group-check .list-group-item:hover, .list-group-check .list-group-item:focus{background-color: var(--bs-secondary-bg)}
.list-group-radio .form-check-input:checked + .list-group-item, .list-group-check .form-check-input:checked + .list-group-item{background-color: var(--bs-body);border-color: var(--bs-primary);box-shadow: 0 0 0 2px var(--bs-primary)}
.list-group-radio .form-check-input[disabled] .list-group-item,.list-group-radio .form-check-input:disabled .list-group-item, .list-group-check .form-check-input[disabled] .list-group-item,.list-group-check .form-check-input:disabled .list-group-item{pointer-events: none;filter: none;opacity: .5}
.list-group-item .icon{width: 15px;}
.list-group-item.active a{ color: var(--w);}

.form-check-input:checked + .form-checked-content {  opacity: .5;}
.list-group-item-check:hover + .list-group-item {  background-color: var(--bs-secondary-bg);}
.list-group-item-check:checked + .list-group-item {  color: #fff;  background-color: var(--bs-primary);  border-color: var(--bs-primary);}
.list-group-item-check[disabled] + .list-group-item,.list-group-item-check:disabled + .list-group-item {  pointer-events: none;  filter: none;  opacity: .5;}


/* avatar style setup */
.avatar {
    --bs-avatar-width: 32px;
    --bs-avatar-bg: var(--ds-background-neutral-bold);
    position: relative;
    width: var(--bs-avatar-width) !important;
    height: var(--bs-avatar-width) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ds-text-inverse);
    line-height: 1;
    /*font-size: 14px;*/
    border-radius: 50%;
    -o-object-fit: cover;
    object-fit: cover;
    background-color: var(--bs-avatar-bg);
    flex-shrink: 0;
    overflow: hidden; /*this will affect dropdown, so avoid avatar on dropdowns*/
    text-align: center;
}
.avatar-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}
.avatar-stack {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.avatar-stack .avatar {
    overflow: hidden;
    margin-left: -8px;
    border: 2px solid #fff;
}
.avatar-xs{--bs-avatar-width: 16px}.avatar-sm{--bs-avatar-width: 24px}.avatar-lg{--bs-avatar-width: 40px}.avatar-xl{--bs-avatar-width: 96px}.avatar-xxl{--bs-avatar-width: 128px}
.avatar[class*="text-bg-"] {color: #fff !important; text-shadow: 1px 1px 3px #000;}

/* blank status styles setup */
.blankslate {
    --bs-blankslate-bg: var(--bs-body-bg);
    --bs-blankslate-color: var(--bs-body-color);
    --bs-blankslate-max-width: 464px;
    --bs-blankslate-font-size: 0.875rem;
    --bs-blankslate-margin-y: 3rem;
    --bs-blankslate-top-img-width: 160px;
    --bs-blankslate-top-img-height: 160px;
    position: relative;
    max-width: var(--bs-blankslate-max-width);
    margin: var(--bs-blankslate-margin-y) auto;
    font-size: var(--bs-blankslate-font-size);
    color: var(--bs-blankslate-color);
    background-color: var(--bs-blankslate-bg);
    text-align: center;
}
.blankslate-top-img {
    display: inline-block;
    max-width: var(--bs-blankslate-top-img-width);
    max-height: var(--bs-blankslate-top-img-height);
    margin-bottom: 1.5rem;
}
.blankslate-body {
    margin-bottom: 1.5rem;
}
.blankslate-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 1rem;
    gap: 0.5rem;
}

/* image upload - without camera styles setup */
.draganddrop #drop-area { border: 2px dashed; padding: 20px 20px 40px; cursor: pointer; border-radius: 10px; }
.draganddrop #preview-container { display: none; }
.draganddrop #uploaded-list{max-height: 45vh; overflow-y: overlay;}
.draganddrop .uploaded-item{position: relative; border: 1px dashed; padding: 0; border-radius: 10px;}
.draganddrop .preview-btn { margin-right: 10px; }
.right-tick{position: absolute;right: 5px;top: 5px;}
.draganddrop #fileInput { display: none;} 

/*if file size very lengthy this format if not suitable for uploaded list items - #imrudeen*/
/*.draganddrop .fileDetail{ display: flex; align-items: center; justify-content: center;}
.draganddrop .fileDetailLeft{ display: flex; flex-wrap:wrap; font-size: 12px; padding: 5px;}
.draganddrop .fileDetailLeft span{margin: 0px 5px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width: 80%;}
.draganddrop .fileDetailLeft span:first-child{flex: 1 1 100%; max-width: 100%;} 
.draganddrop .fileDetailRight{ display: flex; position: absolute;  right: 5px; bottom: 5px; }
.draganddrop .fileDetailLeft.previewItem{width: 105px; height: 105px; padding: 0;border-radius: 10px; overflow: hidden;}
.draganddrop .fileDetailLeft.previewItem .previewItemImg{object-fit: cover;}*/

.modal.modal-top.imageuploadmodal .modal-dialog, .modal.modal-bottom.imageuploadmodal .modal-dialog{height: 100%; min-height: calc(100% - var(--bs-modal-margin)* 2);}
.modal.modal-top.imageuploadmodal .modal-content, .modal.modal-bottom.imageuploadmodal .modal-content{height: 100%; overflow-y: unset;}
.modal.modal-top.imageuploadmodal .modal-body, .modal.modal-bottom.imageuploadmodal .modal-body{height: 100%; max-height:unset; overflow-y: unset;}
.modal.modal-top.imageuploadmodal .modal-body .step_wrapper .step, .modal.modal-bottom.imageuploadmodal .modal-body .step_wrapper .step{padding: 0.5rem}
.modal.modal-bottom .step_wrapper .step .draganddrop #uploaded-list{max-height: unset; overflow-y: unset;}

.modal.modal-bottom .step_wrapper .step .draganddrop #preview-container{padding: 0.5rem;}
.modal.modal-bottom .step_wrapper .step .draganddrop .photosanddocs_preview_container{max-height: calc(100vh - 330px); overflow-y: overlay;}
.modal.modal-bottom .step_wrapper .step .draganddrop .only_documents_preview_container{max-height: calc(100vh - 240px); overflow-y: overlay;}
.modal.modal-bottom .step_wrapper .step .progress[style*="display: block"] ~ .draganddrop .photosanddocs_preview_container{max-height: calc(100vh - 361px);}
.modal.modal-bottom .step_wrapper .step .progress[style*="display: block"] ~ .draganddrop .only_documents_preview_container{max-height: calc(100vh - 266px);}

.draganddrop #uploaded-list .fileDetail{ display: flex; align-items: center; justify-content: center; padding: 5px; white-space: normal; word-break: break-word;}
.draganddrop #uploaded-list .fileDetailLeft{ display: flex; flex-wrap:wrap; font-size: 12px; grid-gap:0.25rem; overflow: hidden; white-space: nowrap;}
.draganddrop #uploaded-list .fileDetailLeft div{text-overflow: ellipsis; overflow: hidden;}
.draganddrop #uploaded-list .fileDetailLeft .fileTypeChidCta{display: flex; flex-wrap: wrap; grid-gap:0.25rem;}
.draganddrop #uploaded-list .fileDetailRight{display: flex; grid-gap:0.25rem;}
.draganddrop #uploaded-list .fileDetailLeft span{white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width: 100%;}

.draganddrop #snapuploaded-list{--minmax: 130px; display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--minmax), 1fr));} /*auto-fit -> not fits on snapped image preview list - #imrudeen */
.draganddrop #snapuploaded-list .uploaded-item{ position: relative; border: 1px dashed #EAEDFF; background-color: #F1F8FF; padding: 0; border-radius: 10px; width: auto; height: 130px;     display: flex;}
.draganddrop #snapuploaded-list .uploaded-item .fileDetailLeft.previewItem{width: 100%; height: 100%; padding: 0; border-radius: 10px; overflow: hidden; object-fit: cover;}

.draganddrop #snapuploaded-list{/*flex-direction: unset !important; flex-wrap: wrap;*/}
.draganddrop #snapuploaded-list .fileDetail{ display: flex; align-items: center; justify-content: center;}
.draganddrop #snapuploaded-list .fileDetailLeft{ display: flex; flex-wrap:wrap; font-size: 12px; }
.draganddrop #snapuploaded-list .fileDetailLeft span{margin: 0px 5px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width: 80%;}
.draganddrop #snapuploaded-list .fileDetailLeft span:first-child{flex: 1 1 100%; max-width: 100%;} 
.draganddrop #snapuploaded-list .fileDetailRight{ display: flex; position: absolute; right: 0px; left: 0px; bottom: 0px; justify-content: space-between; padding: 5px;}
.draganddrop #snapuploaded-list .fileDetailLeft.previewItem{width: 105px; height: 105px; padding: 0;border-radius: 10px; overflow: hidden;}
.draganddrop #snapuploaded-list .fileDetailLeft.previewItem .previewItemImg{object-fit: cover; display: flex; align-items: center; justify-content: center; text-align: center;}

/* image upload - without camera styles setup */
.draganddrop #drop-area{position: relative;}
.draganddrop #drop-area:empty{display: none;}
#galleryBtn{position: absolute; bottom: 4px; width: 100%; display: flex; justify-content: center; z-index: 1;}
#galleryBtn.without_drop_and_drop_upload_btn{ position: relative; bottom: auto; border: 2px dashed; padding: 20px 20px 20px; cursor: pointer; border-radius: 10px;}
#cameraBtn i{font-size: 60px; color: #ad0002;}
#camera_modal .modal-header, #camera_modal .modal-footer{background-color: #ffffff50;}
#camera_modal.modal.modal-right .modal-body{ display: flex; padding: 0;}
.camera-container #video{position: absolute; top: 6%; left: 0; /*width: auto;*/ width: 100%; height: calc(100% - 160px); z-index: 0; object-fit: cover;} /*top: 0; height: 100%;*/
.camera-container #canvas{border-radius: 10px !important;}
.camera-container #upload{color: #fff;}
.camera-container #snap{background-color: #ffffff !important; width: 70px !important; height: 70px !important;position: relative; color: #000 }
.camera-container #snap::before{content: ''; position: absolute; width: 80px; height: 80px; border: 3px solid var(--bs-red) !important; background-color: transparent; top: -7px; left: -7px; border-radius: 50%;}
.camera-container #canvas, .camera-container #snap, .camera-container #swapview, .camera-container #upload{/*position: absolute; */z-index: 1; width: 50px; height: 50px; background-color: #ffffff50; border-radius: 50%; border: 2px solid #fff; font-size: 1.5rem; display: grid; place-content: center;}
.camera-container #canvas:hover, .camera-container #snap:hover, .camera-container #swapview:hover, .camera-container #canvas:focus, .camera-container #upload:focus, .camera-container #swapview:focus, .camera-container #upload:hover, .camera-container #upload:focus{background-color: #ffffff; /*box-shadow: 0px 0px 3px 0 #fff;*/ display: grid; place-content:center; color: #000;}

.camera-container{position: relative; display: flex; flex-direction: column; padding: 1rem; flex:1; justify-content: space-between; background-color: var(--bs-black);}
.cameracloseBtn.uploadBtn{ color: var(--bs-white); /*width: 20px;*/ height: 20px; background-color: transparent !important;  z-index: 1; /*margin-left: auto; margin-right: 0;*/ border-radius: 5px !important; font-weight: 600; font-size: 20px; display: grid; place-content: center; border: 0 !important; transition: transform 0.1s ease; transform: none;}
.camera-actions{display: flex; justify-content: space-between; align-items: center; }

@media screen and (max-width:767px) and (orientation: portrait){
    .cameracloseBtn{margin-left: auto;}
}
@media only screen and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2)  and (orientation: portrait) {
    .cameracloseBtn{margin-left: auto;}
}

@media screen and (max-width:767px) and (orientation: landscape){
    .camera-container{flex-direction: row;} 
    .camera-actions{flex-direction: column-reverse;}
    .camera-container #video{ height: 100%; width: calc(100% - 160px); top: 0; left: 6%;}
    .cameracloseBtn.uploadBtn{transform: translate(-30px, 10px) rotate(-90deg); transition: transform 0.1s ease;}
}
@media only screen and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2)  and (orientation: landscape) {
    .camera-container{flex-direction: row;} 
    .camera-actions{flex-direction: column-reverse;}    
    .camera-container #video{ height: 100%; width: calc(100% - 160px); top: 0; left: 6%;}
    .cameracloseBtn.uploadBtn{transform: translate(-30px, 10px) rotate(-90deg); transition: transform 0.1s ease;}
}


/* loader styles setup <div class="spinner-1/spinner-2"></div> OR <div class="spinner-1 spinner-xs position-fixed start-50 top-50" style="z-index: 9999;"></div> */
.spinner-1{--bs-spinner-width: 50px; width: var(--bs-spinner-width); aspect-ratio: 1;display:grid;-webkit-mask: conic-gradient(from 15deg,#0000,#000);animation: sp1 1s infinite steps(12)}
.spinner-1,.spinner-1:before,.spinner-1:after{background:radial-gradient(closest-side at 50% 12.5%, #f03355 96%,#0000) 50% 0/20% 80% repeat-y,radial-gradient(closest-side at 12.5% 50%, #f03355 96%,#0000) 0 50%/80% 20% repeat-x}
.spinner-1:before,.spinner-1:after{content: "";grid-area: 1/1;transform: rotate(30deg)}
.spinner-1:after{transform: rotate(60deg)}
@keyframes sp1{100%{transform:rotate(1turn)}}

.spinner-2{--bs-spinner-width:22px; --bs-spinner-w: 4px; --bs-spinner-h: 4px; width: var(--bs-spinner-w);height: var(--bs-spinner-w);border-radius: 50%;color: #25b09b;box-shadow: calc(1*var(--bs-spinner-width))calc(0*var(--bs-spinner-width)) 0 0,calc(0.707*var(--bs-spinner-width))calc(0.707*var(--bs-spinner-width)) 0 1px,calc(0*var(--bs-spinner-width))calc(1*var(--bs-spinner-width)) 0 2px,calc(-0.707*var(--bs-spinner-width)) calc(0.707*var(--bs-spinner-width)) 0 3px,calc(-1*var(--bs-spinner-width)) calc(0*var(--bs-spinner-width)) 0 4px,calc(-0.707*var(--bs-spinner-width)) calc(-0.707*var(--bs-spinner-width))0 5px,calc(0*var(--bs-spinner-width))calc(-1*var(--bs-spinner-width))0 6px;animation: sp2 1s infinite steps(8);}
@keyframes sp2{100%{transform: rotate(1turn)}}

.spinner-xs{--bs-spinner-width: 16px; --bs-spinner-w: 1px; --bs-spinner-h: 1px;}
.spinner-sm{--bs-spinner-width: 24px; --bs-spinner-w: 2px; --bs-spinner-h: 2px;}
.spinner-lg{--bs-spinner-width: 40px; --bs-spinner-w: 3px; --bs-spinner-h: 3px;}
.spinner-xl{--bs-spinner-width: 96px;--bs-spinner-w: 5px; --bs-spinner-h: 5px;}
.spinner-xxl{--bs-spinner-width: 128px; --bs-spinner-w: 6px; --bs-spinner-h: 6px;}

.spinner-style-1 {
  font-size: 3px;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  position: relative;
  text-indent: -9999em;
  animation: mulShdSpin 1.1s infinite ease;
  transform: translateZ(0);
}
@keyframes mulShdSpin {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(240,51,85,0.2), 2.5em 0em 0 0em rgba(240,51,85,0.2), 1.75em 1.75em 0 0em rgba(240,51,85,0.2), 0em 2.5em 0 0em rgba(240,51,85,0.2), -1.8em 1.8em 0 0em rgba(240,51,85,0.2), -2.6em 0em 0 0em rgba(240,51,85,0.5), -1.8em -1.8em 0 0em rgba(240,51,85,0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(240,51,85,0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(240,51,85,0.2), 1.75em 1.75em 0 0em rgba(240,51,85,0.2), 0em 2.5em 0 0em rgba(240,51,85,0.2), -1.8em 1.8em 0 0em rgba(240,51,85,0.2), -2.6em 0em 0 0em rgba(240,51,85,0.2), -1.8em -1.8em 0 0em rgba(240,51,85,0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(240,51,85,0.5), 1.8em -1.8em 0 0em rgba(240,51,85,0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(240,51,85,0.2), 0em 2.5em 0 0em rgba(240,51,85,0.2), -1.8em 1.8em 0 0em rgba(240,51,85,0.2), -2.6em 0em 0 0em rgba(240,51,85,0.2), -1.8em -1.8em 0 0em rgba(240,51,85,0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(240,51,85,0.2), 1.8em -1.8em 0 0em rgba(240,51,85,0.5), 2.5em 0em 0 0em rgba(240,51,85,0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(240,51,85,0.2), -1.8em 1.8em 0 0em rgba(240,51,85,0.2), -2.6em 0em 0 0em rgba(240,51,85,0.2), -1.8em -1.8em 0 0em rgba(240,51,85,0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(240,51,85,0.2), 1.8em -1.8em 0 0em rgba(240,51,85,0.2), 2.5em 0em 0 0em rgba(240,51,85,0.5), 1.75em 1.75em 0 0em rgba(240,51,85,0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(240,51,85,0.2), -2.6em 0em 0 0em rgba(240,51,85,0.2), -1.8em -1.8em 0 0em rgba(240,51,85,0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(240,51,85,0.2), 1.8em -1.8em 0 0em rgba(240,51,85,0.2), 2.5em 0em 0 0em rgba(240,51,85,0.2), 1.75em 1.75em 0 0em rgba(240,51,85,0.5), 0em 2.5em 0 0em rgba(240,51,85,0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(240,51,85,0.2), -1.8em -1.8em 0 0em rgba(240,51,85,0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(240,51,85,0.2), 1.8em -1.8em 0 0em rgba(240,51,85,0.2), 2.5em 0em 0 0em rgba(240,51,85,0.2), 1.75em 1.75em 0 0em rgba(240,51,85,0.2), 0em 2.5em 0 0em rgba(240,51,85,0.5), -1.8em 1.8em 0 0em rgba(240,51,85,0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(240,51,85,0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(240,51,85,0.2), 1.8em -1.8em 0 0em rgba(240,51,85,0.2), 2.5em 0em 0 0em rgba(240,51,85,0.2), 1.75em 1.75em 0 0em rgba(240,51,85,0.2), 0em 2.5em 0 0em rgba(240,51,85,0.2), -1.8em 1.8em 0 0em rgba(240,51,85,0.5), -2.6em 0em 0 0em rgba(240,51,85,0.7), -1.8em -1.8em 0 0em #ffffff;
  }
}

/*.spinner-2{--d:22px; --bs-spinner-w: 4px; --bs-spinner-h: 4px; width: var(--bs-spinner-w);height: var(--bs-spinner-w);border-radius: 50%;color: #25b09b;box-shadow: calc(1*var(--d))calc(0*var(--d)) 0 0,calc(0.707*var(--d))calc(0.707*var(--d)) 0 1px,calc(0*var(--d))calc(1*var(--d)) 0 2px,calc(-0.707*var(--d)) calc(0.707*var(--d)) 0 3px,calc(-1*var(--d)) calc(0*var(--d)) 0 4px,calc(-0.707*var(--d)) calc(-0.707*var(--d))0 5px,calc(0*var(--d))calc(-1*var(--d))0 6px;animation: sp2 1s infinite steps(8);}
@keyframes sp2{100%{transform: rotate(1turn)}}
.spinner-xs{--bs-spinner-width: 16px; --bs-spinner-w: 1px; --bs-spinner-h: 1px;}
.spinner-sm{--bs-spinner-width: 24px; --bs-spinner-w: 2px; --bs-spinner-h: 2px;}
.spinner-lg{--bs-spinner-width: 40px; --bs-spinner-w: 3px; --bs-spinner-h: 3px;}
.spinner-xl{--bs-spinner-width: 96px; --bs-spinner-w: 5px; --bs-spinner-h: 5px;}
.spinner-xxl{--bs-spinner-width: 128px; --bs-spinner-w: 6px; --bs-spinner-h: 6px;}*/

/* -- calendar styles setup -- */
.calendar-type .active{color: var(--bs-success);}
.calendar-day.active, .calendar-day.calendar-week.active{color: var(--bs-light); background-color: var(--bs-success);}
.calendar-container{margin: 0 auto;text-align: center}
.calendar-header{display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px; background-color: var(--bs-light); }
.calendar-header h4{margin: 0}
.calendar-days{display: flex;justify-content: start; overflow-x: overlay; flex: 1;}
.calendar-day-cta{ flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.calendar-day{width: 30px;height: 30px;line-height: 30px;border-radius: 50%;margin: 2px 5px;background-color: #f0f0f0;cursor: pointer; flex-shrink: 0;}
.calendar-day.calendar-week{width: 65px;height: 30px;line-height: 30px;border-radius: 10px;margin: 2px 5px;background-color: #f0f0f0;cursor: pointer; flex-shrink: 0;white-space: nowrap;}
.day-label{font-size: 13px; white-space: nowrap;}
.calendar-nav{display: flex; justify-content: space-between; align-items: stretch;}
.calendar-nav #prevBtn, .calendar-nav #nextBtn{ padding: 5px; color: var(--bs-primary); /*background-color: var(--bs-primary-bg-subtle); border-color: var(--bs-primary-rgb);*/}
.calendar-nav #prevBtn:focus, .calendar-nav #nextBtn:focus{border-color: var(-bs-primary-border-subtle);}
.activity-timeline{margin-top: 20px}

/* -- timeline styles setup -- */
.timeline-centered{position:relative;margin-bottom:30px}
.timeline-centered.timeline-sm .timeline-entry{margin-bottom:20px!important}
.timeline-centered.timeline-sm .timeline-entry .timeline-entry-inner .timeline-label{padding:1em}
.timeline-centered:before,.timeline-centered:after{content:" ";display:table}
.timeline-centered:after{clear:both}
.timeline-centered:before{content:"";position:absolute;display:block;width:7px;background:#fff;left:50%;top:20px;bottom:20px;margin-left:-4px}
.timeline-centered .timeline-entry{position:relative;width:50%;float:right;margin-bottom:70px;clear:both}
.timeline-centered .timeline-entry:before,.timeline-centered .timeline-entry:after{content:" ";display:table}
.timeline-centered .timeline-entry:after{clear:both}
.timeline-centered .timeline-entry.begin{margin-bottom:0}.timeline-centered .timeline-entry.left-aligned{float:left}
.timeline-centered .timeline-entry.left-aligned .timeline-entry-inner{margin-left:0;margin-right:-28px}
.timeline-centered .timeline-entry.left-aligned .timeline-entry-inner .timeline-time{left:auto;right:-115px;text-align:left}
.timeline-centered .timeline-entry.left-aligned .timeline-entry-inner .timeline-icon{float:right}
.timeline-centered .timeline-entry.left-aligned .timeline-entry-inner .timeline-label{margin-left:0;margin-right:85px}
.timeline-centered .timeline-entry.left-aligned .timeline-entry-inner .timeline-label:after{left:auto;right:0;margin-left:0;margin-right:-9px;-moz-transform:rotate(180deg);-o-transform:rotate(180deg);-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}
.timeline-centered .timeline-entry .timeline-entry-inner{position:relative;margin-left:-31px}
.timeline-centered .timeline-entry .timeline-entry-inner:before,.timeline-centered .timeline-entry .timeline-entry-inner:after{content:" ";display:table}
.timeline-centered .timeline-entry .timeline-entry-inner:after{clear:both}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-time{position:absolute;left:-115px;text-align:right;padding:10px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-time>span{display:block}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-time>span:first-child{font-size:18px;font-weight:700}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-time>span:last-child{font-size:12px}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon{background:#fff;color:#999;display:block;width:60px;height:60px;-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;border-radius:50%;text-align:center;border:7px solid #fff;line-height:45px;font-size:15px;float:left}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-primary{background-color:#dc6767;color:#fff}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-success{background-color:#5cb85c;color:#fff}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-info{background-color:#5bc0de;color:#fff}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-warning{background-color:#f0ad4e;color:#fff}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-danger{background-color:#d9534f;color:#fff}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-red{background-color:#bf4346;color:#fff}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-green{background-color:#488c6c;color:#fff}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-blue{background-color:#0a819c;color:#fff}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-yellow{background-color:#f2994b;color:#fff}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-orange{background-color:#e9662c;color:#fff}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-pink{background-color:#bf3773;color:#fff}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-violet{background-color:#9351ad;color:#fff}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-grey{background-color:#4b5d67;color:#fff}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-icon.bg-dark{background-color:#594857;color:#fff}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label{position:relative;background:#fff;padding:1.7em;margin-left:85px;-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label.bg-red{background:#bf4346}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label.bg-red:after{border-color:transparent #bf4346 transparent transparent}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label.bg-red .timeline-title,.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label.bg-red p{color:#fff}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label.bg-green{background:#488c6c}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label.bg-green:after{border-color:transparent #488c6c transparent transparent}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label.bg-green .timeline-title,.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label.bg-green p{color:#fff}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label.bg-orange{background:#e9662c}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label.bg-orange:after{border-color:transparent #e9662c transparent transparent}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label.bg-orange .timeline-title,.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label.bg-orange p{color:#fff}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label.bg-yellow{background:#f2994b}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label.bg-yellow:after{border-color:transparent #f2994b transparent transparent}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label.bg-yellow .timeline-title,.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label.bg-yellow p{color:#fff}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label.bg-blue{background:#0a819c}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label.bg-blue:after{border-color:transparent #0a819c transparent transparent}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label.bg-blue .timeline-title,.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label.bg-blue p{color:#fff}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label.bg-pink{background:#bf3773}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label.bg-pink:after{border-color:transparent #bf3773 transparent transparent}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label.bg-pink .timeline-title,.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label.bg-pink p{color:#fff}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label.bg-violet{background:#9351ad}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label.bg-violet:after{border-color:transparent #9351ad transparent transparent}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label.bg-violet .timeline-title,.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label.bg-violet p{color:#fff}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label.bg-grey{background:#4b5d67}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label.bg-grey:after{border-color:transparent #4b5d67 transparent transparent}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label.bg-grey .timeline-title,.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label.bg-grey p{color:#fff}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label.bg-dark{background:#594857}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label.bg-dark:after{border-color:transparent #594857 transparent transparent}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label.bg-dark .timeline-title,.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label.bg-dark p{color:#fff}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label:after{content:"";display:block;position:absolute;width:0;height:0;border-style:solid;border-width:9px 9px 9px 0;border-color:transparent #fff transparent transparent;left:0;top:20px;margin-left:-9px}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label .timeline-title,.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label p{color:#999;margin:0}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label p+p{margin-top:15px}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label .timeline-title{margin-bottom:10px;font-family:"Oswald";font-weight:700}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label .timeline-title span{-webkit-opacity:.6;-moz-opacity:.6;opacity:.6;-ms-filter:alpha(opacity=60);filter:alpha(opacity=60)}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label p .timeline-img{margin:5px 10px 0 0}
.timeline-centered .timeline-entry .timeline-entry-inner .timeline-label p .timeline-img.pull-right{margin:5px 0 0 10px}

.cbp_tmtimeline{margin:0;padding:0;list-style:none;position:relative}
.cbp_tmtimeline:before{content:'';position:absolute;top:0;bottom:0;width:3px;background:#eee;left:20%;margin-left:-6px}
.cbp_tmtimeline>li{position:relative}
.cbp_tmtimeline>li:first-child .cbp_tmtime span.large{color:#444;font-size:17px!important;font-weight:700}
.cbp_tmtimeline>li:first-child .cbp_tmicon{background:#fff;color:#666}
.cbp_tmtimeline>li:nth-child(odd) .cbp_tmtime span:last-child{color:#444;font-size:13px}
.cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel{background:#f0f1f3}
.cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel:after{border-right-color:#f0f1f3}
.cbp_tmtimeline>li .empty span{color:#777}
.cbp_tmtimeline>li .cbp_tmtime{display:block;width:23%;padding-right:70px;position:absolute}
.cbp_tmtimeline>li .cbp_tmtime span{display:block;text-align:right}
.cbp_tmtimeline>li .cbp_tmtime span:first-child{font-size:15px;color:#3d4c5a;font-weight:700}
.cbp_tmtimeline>li .cbp_tmtime span:last-child{font-size:14px;color:#444}
.cbp_tmtimeline>li .cbp_tmlabel{margin:0 0 15px 23%;background:#f0f1f3;padding:5px;position:relative;border-radius:5px; text-align: left;}
.cbp_tmtimeline>li .cbp_tmlabel:not([class*="plain_tmlabel"]):after{right:100%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none;border-right-color:#f0f1f3;border-width:10px;top:10px}
.cbp_tmtimeline>li .cbp_tmlabel blockquote{font-size:16px}
.cbp_tmtimeline>li .cbp_tmlabel .map-checkin{border:5px solid rgba(235,235,235,.2);-moz-box-shadow:0 0 0 1px #ebebeb;-webkit-box-shadow:0 0 0 1px #ebebeb;box-shadow:0 0 0 1px #ebebeb;background:#fff!important}
/*.cbp_tmtimeline>li .cbp_tmlabel h2{margin:0;padding:0 0 10px 0;line-height:26px;font-size:16px;font-weight:400}
.cbp_tmtimeline>li .cbp_tmlabel h2 a{font-size:15px}
.cbp_tmtimeline>li .cbp_tmlabel h2 a:hover{text-decoration:none}
.cbp_tmtimeline>li .cbp_tmlabel h2 span{font-size:15px}
.cbp_tmtimeline>li .cbp_tmlabel p{color:#444}*/
.cbp_tmtimeline>li .cbp_tmicon{width:20px;height:20px;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;font-size:1.4em;line-height:20px;-webkit-font-smoothing:antialiased;position:absolute;color:#fff;background:#46a4da;border-radius:50%;text-align:center;left:23.5%;top:0;margin:0 0 0 -25px}
@media screen and (max-width:992px) and (min-width:768px){.cbp_tmtimeline>li .cbp_tmtime{padding-right:60px}}
@media screen and (max-width:65.375em){.cbp_tmtimeline>li .cbp_tmtime span:last-child{font-size:12px}}
/*@media screen and (max-width:47.2em){
.cbp_tmtimeline:before{display:none}
.cbp_tmtimeline>li .cbp_tmtime{width:100%;position:relative;padding:0 0 20px 0}
.cbp_tmtimeline>li .cbp_tmtime span{text-align:left}
.cbp_tmtimeline>li .cbp_tmlabel{margin:0 0 30px 0;padding:1em;font-weight:400;font-size:95%}
.cbp_tmtimeline>li .cbp_tmlabel:after{right:auto;left:20px;border-right-color:transparent;border-bottom-color:#f5f5f6;top:-20px}
.cbp_tmtimeline>li .cbp_tmicon{position:relative;float:right;left:auto;margin:-64px 5px 0 0}
.cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel:after{border-right-color:transparent;border-bottom-color:#f5f5f6}
}*/
.bg-green{background-color:#50d38a!important;color:#fff}
.bg-blush{background-color:#ff758e!important;color:#fff}
.bg-orange{background-color:#ffc323!important;color:#fff}
.bg-info{background-color:#2CA8FF!important}

.cbp_tmtimeline>li .cbp_tmlabel.plain_tmlabel{background-color: transparent;}
.cbp_tmtimeline>li .cbp_tmlabel.plain_tmlabel{padding:0px;}
.cbp_tmtimeline>li.no-schedule .cbp_tmlabel{ margin:0 ; text-align: center; padding: 0.5rem; background: #f0f1f3;}
.cbp_tmtimeline>li .cbp_tmlabel h6{margin-bottom: 0;}
.cbp_tmtimeline>li.list-group-item-action, .cbp_tmtimeline>li.list-group-item-action:focus, .cbp_tmtimeline>li.list-group-item-action:hover{background-color: transparent; padding: 0px;}
.cbp_tmtimeline>li.list-group-item-action .form-check-label{max-width: calc(100% - 15px); padding: 10px;}
.activity-timeline .cbp_tmtimeline:before{content: unset;}
.activity-timeline .cbp_tmtimeline>li .list-group-item:before{content:'';position:absolute;top:0px; left: 60px; bottom:0;width:0px; border-left: 2px dashed var(--bs-secondary);}
.activity-timeline .cbp_tmtimeline>li .cbp_tmtime{width: 50px; padding-right: 5px;}
.activity-timeline .cbp_tmtimeline>li .cbp_tmicon{top: 5px; width: 30px; height: 30px; line-height: inherit; left: 72px;}
.activity-timeline .cbp_tmtimeline>li .cbp_tmlabel{margin: 0 0 0px 80px;}
.activity-timeline .cbp_tmtimeline.list-group{border:0;}
.activity-timeline .cbp_tmtimeline.list-group-radio .list-group-item, .activity-timeline .cbp_tmtimeline.list-group-check .list-group-item{ border: 0 !important;    margin: 2px; padding: 5px 30px 5px 5px !important;}
.activity-timeline .cbp_tmtimeline>li .cbp_tmicon i{font-size: 16px;}

/* -- timeline (spilt/centered/outline) styles setup -- */
.timeline_sec .timeline{line-height: 1.4em;list-style: none;margin: 0;padding: 0;width: 100%}
.timeline_sec .timeline h1, .timeline_sec .timeline h2, .timeline_sec .timeline h3, .timeline_sec .timeline h4, .timeline_sec .timeline h5, .timeline_sec .timeline h6{line-height: inherit; margin-bottom: 0;}
.timeline_sec .timeline-item{padding-left: 40px;position: relative}
.timeline_sec .timeline-item:last-child{padding-bottom: 0}
.timeline_sec .timeline-info{font-size: 12px;font-weight: 700;letter-spacing: 3px;margin: 0 0 0.5em 0;text-transform: uppercase;white-space: nowrap}
.timeline_sec .timeline-marker{position: absolute;top: 0;bottom: 0;left: 0;width: 15px}
.timeline_sec .timeline-marker:before{background: #FF6B6B;border: 2px solid transparent;border-radius: 100%;content: "";display: block;height: 15px;position: absolute;top: 4px;left: 0;width: 15px;transition: background 0.3s ease-in-out, border 0.3s ease-in-out}
.timeline_sec .timeline-marker:after{content: "";width: 3px;background: #CCD5DB;display: block;position: absolute;top: 24px;bottom: 0;left: 6px}
.timeline_sec .timeline-item:last-child .timeline-marker:after, .timeline_sec .timeline-item:last-of-type .timeline-marker:after{content: none}
.timeline_sec .timeline-item:not(.period):hover .timeline-marker:before{background: transparent;border: 3px solid #FF6B6B}
.timeline_sec .timeline-content{padding-bottom: 40px}
.timeline_sec .timeline-content p{white-space: normal;}
.timeline_sec .timeline-content p:last-child{margin-bottom: 0}
.timeline_sec .period{padding: 0}
.timeline_sec .period .timeline-info{display: none}
.timeline_sec .period .timeline-marker:before{background: transparent;content: "";width: 15px;height: auto;border: none;border-radius: 0;top: 0;bottom: 30px;position: absolute;border-top: 3px solid #CCD5DB;border-bottom: 3px solid #CCD5DB}
.timeline_sec .period .timeline-marker:after{content: "";height: 32px;top: auto}
.timeline_sec .period .timeline-content{padding: 10px 0 40px}
.timeline_sec .period .timeline-title{margin: 0}@media (min-width: 768px){.timeline_sec .timeline-split .timeline, .timeline_sec .timeline-centered .timeline{display: table}
.timeline_sec .timeline-split .timeline-item, .timeline_sec .timeline-centered .timeline-item{display: table-row;padding: 0}
.timeline_sec .timeline-split .timeline_sec .timeline-info, .timeline_sec .timeline-centered .timeline-info, .timeline_sec .timeline-split .timeline-marker, .timeline_sec .timeline-centered .timeline-marker, .timeline_sec .timeline-split .timeline-content, .timeline_sec .timeline-centered .timeline-content, .timeline_sec .timeline-split .period .timeline-info, .timeline_sec .timeline-centered .period .timeline-info{display: table-cell;vertical-align: top}
.timeline_sec .timeline-split .timeline-marker, .timeline_sec .timeline-centered .timeline-marker{position: relative}
.timeline_sec .timeline-split .timeline-content, .timeline_sec .timeline-centered .timeline-content{padding-left: 30px}
.timeline_sec .timeline-split .timeline-info, .timeline_sec .timeline-centered .timeline-info{padding-right: 30px}
.timeline_sec .timeline-split .period .timeline-title, .timeline_sec .timeline-centered .period .timeline-title{position: relative;left: -45px}}@media (min-width: 992px){.timeline_sec .timeline-centered, .timeline-centered .timeline-item, .timeline_sec .timeline-centered .timeline-info, .timeline_sec .timeline-centered .timeline-marker, .timeline_sec .timeline-centered .timeline-content{display: block;margin: 0;padding: 0}
.timeline_sec .timeline-centered .timeline-item{padding-bottom: 40px;overflow: hidden}
.timeline_sec .timeline-centered .timeline-marker{position: absolute;left: 50%;margin-left: -7.5px}
.timeline_sec .timeline-centered .timeline-info, .timeline_sec .timeline-centered .timeline-content{width: 50%}
.timeline_sec .timeline-centered > .timeline-item:nth-child(odd) .timeline-info{float: left;text-align: right;padding-right: 30px}
.timeline_sec .timeline-centered > .timeline-item:nth-child(odd) .timeline-content{float: right;text-align: left;padding-left: 30px}
.timeline_sec .timeline-centered > .timeline-item:nth-child(even) .timeline-info{float: right;text-align: left;padding-left: 30px}
.timeline_sec .timeline-centered > .timeline-item:nth-child(even) .timeline-content{float: left;text-align: right;padding-right: 30px}
.timeline_sec .timeline-centered > .timeline-item.period .timeline-content{float: none;padding: 0;width: 100%;text-align: center}
.timeline_sec .timeline-centered .timeline-item.period{padding: 50px 0 90px}
.timeline_sec .timeline-centered .period .timeline-marker:after{height: 30px;bottom: 0;top: auto}
.timeline_sec .timeline-centered .period .timeline-title{left: auto}}
.timeline_sec .marker-outline .timeline-marker:before{background: transparent;border-color: #FF6B6B}
.timeline_sec .marker-outline .timeline-item:hover .timeline-marker:before{background: #FF6B6B}


 /*format-1*/
.omw_steps .timeline_sec.omw_timeline .timeline-marker:before{font-family: "Font Awesome 6 Free"; font-weight: 900; color: #fff; width: 25px; height: 25px; display: grid; place-content:center; font-size: 0.75rem;}
.omw_steps .timeline_sec.omw_timeline .timeline-marker:after{width: 2px; top: 32px; left: 12px;}
/*.omw_steps .timeline_sec.omw_timeline .timeline-item-omw .timeline-marker:before{content: "\f48b";} 
.omw_steps .timeline_sec.omw_timeline .timeline-item-start .timeline-marker:before{content: "\f04b";}
.omw_steps .timeline_sec.omw_timeline .timeline-item-start.timeline-item-active .timeline-marker:before{content: "\f04c";}
.omw_steps .timeline_sec.omw_timeline .timeline-item-completed .timeline-marker:before{content: "\f04d";}
.omw_steps .timeline_sec.omw_timeline .timeline-item-arrived .timeline-marker:before{content: "\f3c5";}*/
.omw_steps .timeline_sec.omw_timeline .timeline-item:not(.period):hover .timeline-marker:before, .omw_steps .timeline_sec.omw_timeline  .timeline-item.timeline-item-active:not(.period) .timeline-marker:before{color: #FF6B6B;}
.omw_steps .timeline_sec.omw_timeline .timeline-info{font-weight: 400; letter-spacing: inherit; margin-bottom: 0;}
.omw_steps .timeline_sec.omw_timeline .timeline-title{font-weight: 600;  text-transform: uppercase;}
.omw_steps .timeline_sec.omw_timeline .timeline-content{padding-bottom: 15px;}

.omw_steps .timeline_sec.omw_timeline .timeline-item{cursor: pointer; position: relative;}
.omw_steps .timeline_sec.omw_timeline .timeline-item.timeline-item-next, .omw_steps .timeline_sec.omw_timeline  .timeline-item.timeline-item-prev{cursor: not-allowed; pointer-events: none;}
.omw_steps .timeline_sec.omw_timeline .timeline-item.timeline-item-next:not(.period) .timeline-marker:before, .omw_steps .timeline_sec.omw_timeline  .timeline-item.timeline-item-next:not(.period):hover .timeline-marker:before{background: #ffb4b4; border: 2px solid #ffb4b4; color: #ffffff; }
.omw_steps .timeline_sec.omw_timeline .timeline-item.active:not(.period) .timeline-marker:before, .omw_steps .timeline_sec.omw_timeline .timeline-item.timeline-item-active:not(.period) .timeline-marker:before, .omw_steps .timeline_sec.omw_timeline .timeline-item.timeline-item-active:not(.period):hover .timeline-marker:before{background: transparent; border: 2px solid #FF6B6B;}

/*.omw_steps .timeline_sec.omw_timeline .timeline-item, .omw_steps .timeline_sec.omw_timeline .timeline-item.timeline-item-prev{display: none;}
.omw_steps .timeline_sec.omw_timeline .timeline-item.timeline-item-active{display: block;}*/

.omw_steps .timeline_sec.omw_timeline .timeline-item.active:not(.period) .timeline-marker .time-line-flash{animation: pulsate 1s ease-out;animation-iteration-count: infinite;opacity: 0;box-shadow: 0 0 1px 2px #FF6B6B;animation-delay: 1.1s; position: absolute; top: 4px; left: 0; width: 25px; height: 25px; border-radius: 50px;}
.omw_steps .timeline_sec.omw_timeline .timeline-item.active:not(.period) .timeline-marker:after{background: transparent; border-left: 3px dotted #FF6B6B;}

/*format-2-accordion*/
.omw_accordion .timeline_sec.omw_timeline .timeline-marker:before{font-family: "Font Awesome 6 Free"; font-weight: 900; color: #fff; width: 25px; height: 25px; display: grid; place-content:center; font-size: 0.75rem;}
.omw_accordion .timeline_sec.omw_timeline .timeline-marker:after{width: 2px; top: 32px; left: 12px;}
.omw_accordion .timeline_sec.omw_timeline .header-timeline .timeline-marker:after{content: none;}

.omw_accordion .timeline_sec.omw_timeline .timeline-item:not(.period):hover .timeline-marker:before, .omw_accordion .timeline_sec.omw_timeline  .timeline-item.active:not(.period) .timeline-marker:before{color: #FF6B6B;}
.omw_accordion .timeline_sec.omw_timeline .timeline-info{font-weight: 400; letter-spacing: inherit; margin-bottom: 0; min-height: 8px;} /*min-height: 8px; -> need for center alignment id incase of empty timeline-info*/
.omw_accordion .timeline_sec.omw_timeline .timeline-title{font-weight: 600;  text-transform: uppercase;}
.omw_accordion .timeline_sec.omw_timeline .timeline-content{padding-bottom: 15px;}

.omw_accordion .timeline_sec.omw_timeline .timeline-item{cursor: pointer; position: relative;}
.omw_accordion .timeline_sec.omw_timeline .timeline-item.timeline-item-next, .omw_accordion .timeline_sec.omw_timeline  .timeline-item.timeline-item-prev, .omw_accordion .timeline_sec.omw_timeline .inline-timeline .timeline-item{cursor: not-allowed; pointer-events: none;}
.omw_accordion .timeline_sec.omw_timeline .timeline-item.timeline-item-next:not(.period) .timeline-marker:before, .omw_accordion .timeline_sec.omw_timeline  .timeline-item.timeline-item-next:not(.period):hover .timeline-marker:before{background: #ffb4b4; border: 2px solid #ffb4b4; color: #ffffff; }
.omw_accordion .timeline_sec.omw_timeline .timeline-item.active:not(.period) .timeline-marker:before, .omw_accordion .timeline_sec.omw_timeline  .timeline-item.active:not(.period):hover .timeline-marker:before, .omw_accordion .timeline_sec.omw_timeline .timeline-item.timeline-item-active:not(.period) .timeline-marker:before, .omw_accordion .timeline_sec.omw_timeline  .timeline-item.timeline-item-active:not(.period):hover .timeline-marker:before{background: transparent; border: 2px solid #FF6B6B;}

.omw_accordion .timeline_sec.omw_timeline .header-timeline .timeline-item, .omw_accordion .timeline_sec.omw_timeline .header-timeline .timeline-item.timeline-item-prev{display: none;}
.omw_accordion .timeline_sec.omw_timeline .header-timeline .timeline-item.active,.omw_accordion .timeline_sec.omw_timeline .header-timeline .timeline-item.timeline-item-active, .omw_accordion .timeline_sec.omw_timeline .header-timeline .timeline-item.timeline-item-arrived.timeline-item-prev{display: block;}

.omw_accordion .timeline_sec.omw_timeline .timeline-item.active:not(.period) .timeline-marker .time-line-flash, .timeline_sec.omw_timeline .timeline-item.timeline-item-active:not(.period) .timeline-marker .time-line-flash{animation: pulsate 1s ease-out;animation-iteration-count: infinite;opacity: 0;box-shadow: 0 0 1px 2px #FF6B6B;animation-delay: 1.1s; position: absolute; top: 4px; left: 0; width: 25px; height: 25px; border-radius: 50px;}
.omw_accordion .timeline_sec.omw_timeline .timeline-item.previous_state:not(.period) .timeline-marker:after, .timeline_sec.omw_timeline .timeline-item.timeline-item-active:not(.period) .timeline-marker:after{background: transparent; border-left: 3px dotted #FF6B6B;}
.timeline_sec.omw_timeline .timeline-item.timeline-item-prev:not(.period) .timeline-marker:after{background: transparent; border-left: 3px solid #FF6B6B;}

.timeline_sec.omw_timeline .timeline-item .timeline-marker-icon {position: absolute; width: 25px; height: 25px; display: grid; place-content: center; font-size: 0.75rem; border-radius: 50px; top: 4px; color: var(--bs-white);}
.timeline_sec.omw_timeline .timeline-item:not(.period):hover .timeline-marker-icon, .timeline_sec.omw_timeline .timeline-item.active:not(.period) .timeline-marker-icon, .timeline_sec.omw_timeline  .timeline-item.active:not(.period):hover .timeline-marker-icon, .timeline_sec.omw_timeline .timeline-item.timeline-item-active:not(.period) .timeline-marker-icon, .timeline_sec.omw_timeline .timeline-item.timeline-item-active:not(.period):hover .timeline-marker-icon{color: #FF6B6B;}
.inactive-no-cursor{ cursor: not-allowed; pointer-events: none;}
.omw_accordion .timeline_sec.omw_timeline .timeline.body-timeline .timeline-item.done .timeline-marker:before{background:var(--bs-success);}
.omw_accordion .timeline_sec.omw_timeline .timeline.header-timeline .timeline-content{padding-bottom: 0;}
.omw_accordion .timeline_sec.omw_timeline .timeline.body-timeline .timeline-item.done:not(.period):hover .timeline-marker:before{background: transparent; border: 3px solid var(--bs-success); color: var(--bs-white);}
.omw_accordion .timeline_sec.omw_timeline .timeline.body-timeline .timeline-item.done:not(.period):hover .timeline-marker .timeline-marker-icon{color: var(--bs-success);}
.km-accordion-button{display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0.5rem; text-align: center;}
.km-accordion-button::after{margin: auto;}

#accordion-item-omw_timeline li.timeline-item {min-height: 50px;}

@-moz-keyframes pulsate{0%{transform: scale(0.1, 0.1);opacity: 0}50%{opacity: 1}100%{transform: scale(1.2, 1.2);opacity: 0}}
@-webkit-keyframes pulsate{0%{transform: scale(0.1, 0.1);opacity: 0}50%{opacity: 1}100%{transform: scale(1.2, 1.2);opacity: 0}}
@-o-keyframes pulsate{0%{transform: scale(0.1, 0.1);opacity: 0}50%{opacity: 1}100%{transform: scale(1.2, 1.2);opacity: 0}}
@keyframes pulsate{0%{transform: scale(0.1, 0.1);opacity: 0}50%{opacity: 1}100%{transform: scale(1.2, 1.2);opacity: 0}}
@-moz-keyframes bounce{0%{opacity: 0;transform: translateY(-2000px) rotate(-45deg)}60%{opacity: 1;transform: translateY(30px) rotate(-45deg)}80%{transform: translateY(-10px) rotate(-45deg)}100%{transform: translateY(0) rotate(-45deg)}}
@-webkit-keyframes bounce{0%{opacity: 0;transform: translateY(-2000px) rotate(-45deg)}60%{opacity: 1;transform: translateY(30px) rotate(-45deg)}80%{transform: translateY(-10px) rotate(-45deg)}100%{transform: translateY(0) rotate(-45deg)}}
@-o-keyframes bounce{0%{opacity: 0;transform: translateY(-2000px) rotate(-45deg)}60%{opacity: 1;transform: translateY(30px) rotate(-45deg)}80%{transform: translateY(-10px) rotate(-45deg)}100%{transform: translateY(0) rotate(-45deg)}}
@keyframes bounce{0%{opacity: 0;transform: translateY(-2000px) rotate(-45deg)}60%{opacity: 1;transform: translateY(30px) rotate(-45deg)}80%{transform: translateY(-10px) rotate(-45deg)}100%{transform: translateY(0) rotate(-45deg)}}

.flash{--flash-box-shadox-color: var(--bs-danger); animation: pulsate 1s ease-out;animation-iteration-count: infinite;opacity: 0;box-shadow: 0 0 1px 2px var(--flash-box-shadox-color);animation-delay: 1.1s; position: absolute; width: 25px; height: 25px; border-radius: 50px;}
.flash-light{--flash-box-shadox-color: var(--bs-light);}.flash-danger{--flash-box-shadox-color: var(--bs-danger);} .flash-success{--flash-box-shadox-color: var(--bs-success);}.flash-warning{--flash-box-shadox-color: var(--bs-warning);} .flash-primary{--flash-box-shadox-color: var(--bs-primary);} .flash-info{--flash-box-shadox-color: var(--bs-info);} .flash-secondary{--flash-box-shadox-color: var(--bs-secondary);}


/* -- sign_in/sign_up/forgot_password styles setup -- */
figure.banner{--banner-max-height: 250px; display: flex; max-height: var(--banner-max-height); align-items: center; justify-content: center; overflow: hidden;}  
figure.banner img{ width: 100%;}
/*figure.banner{--banner-max-height: 250px; display: flex; height: var(--banner-max-height); align-items: center; justify-content: center; overflow: hidden;}  
figure.banner img{ width: 100%;height: 100%; object-fit: contain; margin: 0;}*/
.without_login_main{display: flex; flex-direction: column; }
.sign_in_container{margin: auto;}
.sign_in{ display: flex; flex-direction: column; align-items: center; justify-content: center;} /*height: 100vh;*/
.sign_in_holder{min-width: 250px; padding: calc(var(--bs-gutter-x) * .5);}
.sign_in figure.banner img{ max-width: 200px;}
.social{display: flex; flex-wrap: wrap; align-items: center; justify-content: center;}

figure.banner.image_banner, figure.banner.document_banner{height: 250px;}/*max-height: var(--banner-max-height); not suits to documents information modal - #imrudeen*/
figure.banner.image_banner img{height: 100%; object-fit: cover; margin: 0;}
figure.banner.document_banner img{height: 100%; object-fit: contain; margin: 0;}

/* -- items selector styles setup -- */
.selectable-item.selected { background-color: var(--bs-danger-bg-subtle); }
.selectable-item .selectable-item-checkbox { position: absolute; bottom: 5px; left: 5px; visibility: hidden;}
.selectable-item.selected .selectable-item-checkbox { visibility: visible;}
.selectable-item .selectable-item-deleteBtn { position: absolute; bottom: 3px; left: 20px; visibility: hidden;}
.selectable-item.selected .selectable-item-deleteBtn { visibility: visible;}

/* -- property list styles setup -- */
.listgrid-btn-group .btn{/*border:0;*/}
.listgrid-btn-group .fas{color: var(--ga);}
.listgrid-btn-group .active .fas{color: var(--b);}
.property_list .card-header{padding: 0;}
.property_list .highlights{display: flex; flex-wrap: wrap; justify-content: space-around;}
.property_list .highlights .item{flex-grow: 1; font-size: 13px; font-weight: 500; line-height: 1.5; color: var(--b);}
.property_list .icon{/*margin-right: 3px;*/}
.property_list .grid-item .btn{padding: 0.1rem 0.5rem; font-size: 12px; border-radius: 7px;}

.property_list .grid-item-wrapper, .property_project_item .grid-item-wrapper{background-color: transparent; -webkit-box-shadow: 4px 4px 8px 2px rgba(0, 0, 0, 0.2); -moz-box-shadow: 4px 4px 8px 2px rgba(0, 0, 0, 0.2); box-shadow: 4px 4px 8px 2px rgba(0, 0, 0, 0.2);}
.property_list .grid-item:hover .grid-item-wrapper{-webkit-box-shadow: 2px 2px 7px rgba(0, 0, 0, 0.2); -moz-box-shadow: 2px 2px 7px rgba(0, 0, 0, 0.2); box-shadow: 2px 2px 7px rgba(0, 0, 0, 0.2);}
.property_list .grid-image-top{left: 0; top: 0; width: 100%;}
.property_list .grid-image-top .centered{width: 96%; height: 90%; top: 0; left: 0; border-radius: 10px; transform: translate(5px, 5px);}
.property_list .list_view .grid-image-top .centered{width: 81.5%; height: 81.5%; top: 0; left: 0; border-radius: 10px; transform: translate(5px, 5px);}
.property_list .list_view .grid-image-top{left: 0; top: 0; width: 100px;}
.property_list .list_view .grid-image-top{height: auto;}
.property_list .list_view .grid-image-top .centered{width: 87%; height: 93%;}

/* -- projects list styles setup -- */
.property_list .grid-image-top .centered{display: flex; flex-direction: column; justify-content: space-between; overflow: hidden;}
.image-badges{display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 2px; gap: 2px; background-color: #00000090;}
.property_list .badge{/*padding: 2px 4px; font-size: 9px; font-weight: normal; border-radius: 4px; flex: 1;*/}

/* -- property list details styles setup -- */
.property_list_details .profile{display: flex;align-items: center;justify-content: center;flex-direction: row;text-align: center;padding: 10px}
.property_list_details .profile .profile-holder{width: 50px; height: 50px; border-radius: 50px; background-color: #AAAAAA; display: flex; align-items: center; justify-content: center; margin-right: 0.5rem;}
.property_list_details .profile .profile-details{text-align: start; flex:1;}
.property_list_details .profile .profile-edit{width: 25px; height: 25px; border-radius: 50px; background-color: #2A5F73; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; position: relative; right: auto; }
.property_list_details .profile .profile-edit .icon{ padding: 0; }
.property_list_details .profile .profile-edit img{width: 12px; filter: brightness(0) invert(1);}
.property_list_details .profile .profile-edit + .profile-edit{margin-left: 0.5rem;}
.property_list_details .banner .badge{--bs-btn-line-height: 1.5; line-height: var(--bs-btn-line-height);}
.map{border-radius: 10px;overflow: hidden;}

.contacts{display: flex; flex-direction: column;}
.contact-item{margin-bottom: 1rem;}
.contact-pic{width: 50px; height: 50px; border-radius: 50px; background-color: #AAAAAA; display: flex; align-items: center; justify-content: center; margin-right: 0.5rem; float: left; overflow: hidden;}
.contact-details{float: left; width:calc(100% - 50px - 0.5rem); font-size: 13px; }
.contacts i{font-size: 9px; color: var(--b);}
.contacts .btn-menu{font-size: 9px; color: var(--b);}
.contact-left{float: left; }
.contact-right{float: right; }
.contact-more-info{float: left;width: 100%; }

#section-navbar{padding: 0.5rem; }
#section-navbar .nav{display: flex; flex-wrap: nowrap; overflow-x: overlay; overflow-y: hidden; gap:1;}
#section-navbar .nav-item .nav-link{padding: 0.5rem; font-size: 13px; white-space: nowrap;}


/* -- payment styles setup -- */
.status-pic{width: 80px; height: 80px; border-radius: 50px; display: grid; place-content:center; margin: auto auto 2rem;}
.status-pic i{color: var(--w); font-size: 20px;}
.status-pic.status-danger{background-image: linear-gradient(to bottom right, #F86077, #F8607750);}
.status-pic.status-success{background-image: linear-gradient(to bottom right, #2FB390, #2FB39050);}
.status-pic.status-warning{background-image: linear-gradient(to bottom right, #ffc107, #ffc10750);}

.payment-card-holder{ min-width: 320px; height: 150px; border-radius: 25px; background-repeat: no-repeat; background-position: right; background-size: contain; background-blend-mode: multiply; background-color: var(--b); position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 1rem; margin-bottom: 2rem;}
.empty-payment-card-holder{display: flex; align-items: start; justify-content: center;}
.payment-card-holder .card-basic-header, .payment-card-holder .card-basic-footer{display: flex; align-items: center; justify-content: space-between;}
@media screen and (max-width:375px){
	.payment-card-holder{min-width: auto; background-size: cover;}
}

.payments .list-group{margin-inline:0;}
.payments .list-group .list-group-item{border-width:0;}
.payments-summary-list-group .list-group-item:last-child{border-top: 2px dashed var(--bs-list-group-border-color);}
.payment-list-group.list-group-radio .list-group-item{background-color: var(--gf)}


/* -- appointment styles setup -- */
.list-group-sppointment-types{overflow-y: auto; max-height: calc(100vh - 205px);}
.appointments.list, .appointments.calendar{display: none;}
.appointments .app-list, .appointments .app-grid{border: 0; outline: none; color: var(--bs-secondary);}
.appointments .app-list.active, .appointments .app-grid.active{color: var(--bs-primary);}
.appointments.list.show, .appointments.calendar.show{display: block;}


/* -- appointment create styles setup -- */
.custom_calendar .calendar{width: 100%;border-collapse: collapse;height: 45vh}
.custom_calendar .calendar th,.custom_calendar .calendar td{padding: 0.25rem;text-align: center;border: 1px solid #ddd;vertical-align: middle;font-weight: 500}.custom_calendar .calendar th{background-color: var(--bs-gray);color: var(--bs-white)}
.custom_calendar .calendar td{cursor: pointer}
.custom_calendar .calendar td.active{background-color: var(--bs-green);color: var(--bs-white)}
.custom_calendar .calendar td:not([class="text-muted"]):hover{background-color: var(--bs-gray-300)}
.custom_calendar .calendar .text-muted{color: #aaa !important;pointer-events: none;font-weight: normal}
.step_wrapper .step{display: none}
.step_wrapper .step.active{display: block}
.step_wrapper .step-summary{margin-bottom: 1rem;border: 1px solid #c7dbf9;padding: 10px;border-radius: 7px;background: #eff5ff;position: relative}
.step_wrapper .step-summary:empty{display: none;}
.step_wrapper .step-summary p{margin-bottom: 0; padding: 0.5rem;}
.step_wrapper .step-summary p:not(:last-child){border-bottom: 1px solid #efefef;}
.step_wrapper .step-summary .avatar{position: absolute; right: 0px; top: 0px; cursor: pointer; width: 25px; height: 25px; font-size: 11px; border-radius: 0px 7px 0px 7px }
.step_wrapper .step-footer{ position: fixed; bottom: 0; right: 0; left: 0; background-color: var(--w); padding: 1rem; z-index: 2;} /*z-index: 2; -> need this to avoid index issue with form-check list - #imrudeen*/


/* -- invoice styles setup -- */
.invoice_header .list-group-item{ border: 0; text-align: left; flex:1; padding: 0.25rem;}
.invoice_header .list-group-item:not(:last-child){ border-right: var(--bs-list-group-border-width) dashed var(--bs-list-group-border-color); }

/*Date column not looks good, to overcome added this css - under testing - #imrudeen*/
/*.invoice_header{text-align: left; }
.invoice_header .list-group.list-group-horizontal{grid-gap: 0.25rem; padding: 0.25rem; flex-wrap:wrap;}
.invoice_header .list-group-item{ border: var(--bs-list-group-border-width) dashed var(--bs-list-group-border-color) !important; border-radius: var(--bs-list-group-border-radius) !important; flex:1 0 auto;}*/

.invoice_items_form .invoice_items_header{box-shadow: var(--bs-box-shadow); border-radius: 10px; padding: 0.25rem;}
.invoice_items_form .form-control{border:0; background-color: transparent; min-height: auto; font-weight: bold; }
.invoice_items_form .form-control:hover, .invoice_items_form .form-control:focus{box-shadow: unset;}
.invoice_items_form .invoice_items_header .form-floating #inv_item_name{ border-radius: 10px 10px 0 0; --bs-list-group-border-width: 1px; --bs-list-group-border-color: #dee2e6; border-bottom: var(--bs-list-group-border-width) dashed var(--bs-list-group-border-color) !important;}
.invoice_items_form .invoice_items_header .form-floating + .form-floating{margin-top: 0.5rem;}
.invoice_items_form .invoice_items_header .form-floating #inv_item_desc{ border-radius: 0 0 10px 10px;}
.invoice_items_form .list-group .form-control{ border-radius: 4px;}
/*.invoice_items_form .invoice_items_header .custom_textarea{height: 120px; display: flex; flex-direction: column; align-items: center; }
.invoice_items_form .invoice_items_header .custom_textarea textarea{height: 100%; width: 100%; } under testing */
.inv_item_discount_holder{display: flex; align-items: center;}
.inv_item_discount_holder #inv_item_discount{ max-width: 85%;}

/* -- photos and docs gallery styles setup -- */
/* -- pictures -- */
.gallery-item.selected { border: 2px solid red;}
.item-checkbox {position: absolute;top: 5px;right: 5px;visibility: visible;}
.gallery-item.selected .item-checkbox {visibility: visible;}
#gallery-item-details-modal .openseadragon{width: 100%; height: 100%; object-fit: cover;}
.pictures-item-gallery .gallery-item{/*max-width: 375px; width: 130px; height: 130px;*/}
.image-gallery{--minmax : 180px; display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--minmax), 1fr)); grid-gap: .5rem; align-items: start;} /*:not(.gallery-prev-sec) -> removed to make universal size update - #imrudeen*/
.gallery-prev-sec{--minmax : 130px;}
.image-gallery .gallery-item{width: auto; height: var(--minmax); max-width: unset; margin: 0;} /*:not(.gallery-prev-sec) -> removed to make universal size update - #imrudeen*/
.gallery-item-actions{margin: 0; padding: 5px; display: flex; justify-content: space-between; width: 100%; flex: 1 0 100%; background-color: rgba(1, 1, 1, 0.7);}
.gallery-item-thumb{position:absolute; max-height: 100%;}
.gallery-item .gallery-item-icon{font-size: 50px; margin: auto;}

.gallery-item-column{display: flex; flex-direction: column; flex: 1; width: 100%; height: 100%;}
.gallery-item-column .gallery-item-bg-holder{position: relative; flex: 1; min-height: 80px; }
.gallery-item-column .gallery-item-caption{--bs-avatar-width:24px; position: relative; flex:unset; text-align: center; min-height: var(--bs-avatar-width); }
.gallery-item-column .gallery-item-actions{position: relative !important; flex:unset; }
 
/* -- album -- */
.album{--minmax : 175px; display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--minmax), 1fr)); grid-gap: .5rem;}
.album-item{ display: flex; flex-direction: column; justify-content: center; align-items: center; background-color:var(--b); border-radius: 7px; padding: 0px; /*flex: 1;*/ width: auto; height: var(--minmax);}
.album-label{font-weight: 500; font-size: 14px; padding: 4px; color: var(--bs-white); display: grid; place-content: center;}
.album-caption{--bs-avatar-width:24px; text-align: center; min-height: var(--bs-avatar-width); line-height: 1.5; padding: 2px 5px;}
.album-count{position: absolute; width: 30px; height: 30px; background-color: rgba(255,255,255,0.3); border-radius: 50px; display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--bs-white); transform: translate(0%, -30%);} /*display:grid -> not work with flash*/
.album-thumb{width: auto; height: 100%; object-fit: cover; border-radius: 7px 7px 0 0;} /*width: 80px; height: 60px;*/
.hidden-album-item-gallery{display: none;}
.hidden-album-item-gallery.visible{display: block;}
.album-item{position: relative;}
.album-layers{position: absolute; left: -3px; bottom: -3px; background-color: #00000030; width: 100%; height: 100%; border-radius: 7px; z-index: -1; transition: all ease-out 1s;}
.album-layers:before,.album-layers:after{ left: 0; bottom: 0;}
.album-item:hover .album-layers:before{content:''; position: absolute; left: -3px; bottom: -3px; background-color: #66666630; width: 100%; height: 100%; border-radius: 7px; transition: all ease-out 1s;}
.album-item:hover .album-layers:after{content:''; position: absolute; left: -6px; bottom: -6px; background-color: #33333330; width: 100%; height: 100%; border-radius: 7px; transition: all ease-out 1s;}
.gallery-item-details-actions{display: flex; flex-wrap: wrap; align-items: center; justify-content: center; padding: 1rem;  position: fixed; bottom: 70px; left: 0; right: 0; }

div.album-thumb{ position: absolute; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: center; top: 0;} /*background-size: contain; -> not looks good in label view photos tabs*/
div.album-label{ position: absolute; bottom: 0; /* height: 30px; */ background-color: rgba(1, 1, 1, 0.5); width: 100%;} /* height: 30px; -> removed to make auto height based on avatar size placed inside - #imrudeen */
a.album-item, .album-action-item{/*background-color:var(--bs-tertiary-color);*/background-color: rgba(var(--gallery-item-bg-rgb), var(--gallery-item-bg-opacity)) !important; border-radius: 10px; overflow: hidden;}
/*.album-category{border: 1px dashed var(--bs-border-color); margin-bottom: 0rem; --album-category-padding: 0.25rem; --bs-album-category-border-radius: 1rem;}*/

.album-column{display: flex; flex-direction: column; flex: 1; width: 100%; height: 100%;}
.album-column .album-bg-holder{position: relative; flex: 1;}
.album-column .album-label{position: relative !important; flex:unset; }

/* -- vendor styles setup -- */
.about_vendor .actions{position: absolute; top: -40px !important; right: 0; z-index: 1;}
.about_vendor_thumb{ position: absolute; left: 15px; top: -3rem !important; display: flex; flex: 1; align-items: end; max-width: calc(100% - 15px); width: 100%;}
.about_vendor_thumb_info{ text-align: center; flex-basis: 100%; position: absolute; right: 0; bottom: 0; top: 42px; left: 102px; display: flex;
 flex-direction: column; align-items: center; justify-content: center;}
#vendor_documents_modal .card-img-top{min-width:130px; width:100%; height:100px; max-height:100px; object-fit:cover; display: flex; align-items: center; justify-content: center; overflow: hidden; background-color: var(--bs-card-cap-bg); background-size: cover; }
#vendor_documents_modal .card-img-top.card-img-top-icon img{max-width:70px;}

.pin-blk {/* width: 25%;*/}
.profile .profile-holder{/*border-radius: 0px; background-color: white;width: 110px;*/}

/* -- tickets styles setup -- */
.image-gallery-hidden {display: none;}
.image-gallery-hidden.show {display: flex;}
.ticket_info_table .image-gallery-hidden{max-height: 200px; overflow: hidden auto;}
.ticket_info_table .image-gallery-hidden .gallery-item{display: inline-block !important;}
.list-group-tickets-notifications{ max-height:calc(100% - 120px); overflow:hidden auto;}
.list-group-item.unread_msg {background: #eff1ff;}
.sa-button-container button {padding: 10px 15px !important;font-size: 15px !important;}

/* -- sub contractor styles setup -- */
.table-coverage{/*table-layout: fixed;*/}
.table-coverage td{/*word-break: break-all;*/}


/* -- sweet alert styles setup -- */
.stop-scrolling .sweet-alert h2 {font-size: 20px !important; margin: 5px 0 !important;}
.sweet-alert fieldset {padding: 0;}
/*.stop-scrolling .sweet-alert .sa-icon {
width: 30px !important;
height: 30px !important;
margin: 5px auto !important;
padding: 0 !important;
}
.stop-scrolling .sweet-alert .sa-icon.sa-error .sa-line{width: 30px; top: 13px;}
.stop-scrolling .sweet-alert .sa-icon.sa-error .sa-line.sa-left {
    left: 0;
}
.stop-scrolling .sweet-alert .sa-icon.sa-error .sa-line.sa-right {
    right: 0;
}
.stop-scrolling .sweet-alert .sa-icon.sa-warning .sa-body {
width: 5px !important;
height: 16px !important;
top: 3px !important;
}
.stop-scrolling .sweet-alert .sa-icon.sa-warning .sa-dot {
width: 7px !important;
height: 7px !important;
bottom: 2px !important;
}
.stop-scrolling .sweet-alert .sa-icon.sa-success .sa-line.sa-tip {width: 12px !important;left: 5px !important;top: 18px !important;}
.stop-scrolling .sweet-alert .sa-icon.sa-success .sa-line.sa-long {width: 20px !important;right: 0px !important;top: 14px !important;}
.stop-scrolling .sweet-alert .sa-icon.sa-success .sa-fix {height: 0px !important;}
.stop-scrolling .sweet-alert .sa-icon.sa-success .sa-placeholder {width: 30px !important;height: 30px !important;}
.stop-scrolling .sweet-alert .sa-icon.sa-success::before {width: 0 !important;}
.stop-scrolling .sweet-alert fieldset:empty{display: none;}*/
/*
.sweet-alert .sa-icon {
.sa-button-container button {padding: 6px 12px !important;font-size: 15px !important;}
.sweet-alert .sa-icon.sa-success .sa-line.sa-tip {width: 12px !important;left: 5px !important;top: 18px !important;}
.sweet-alert .sa-icon.sa-success .sa-line.sa-long {width: 20px !important;right: 0px !important;top: 14px !important;}
.sweet-alert .sa-icon.sa-success .sa-fix {height: 0px !important;}
.sweet-alert .sa-icon.sa-success .sa-placeholder {width: 30px !important;height: 30px !important;}
.sweet-alert .sa-icon.sa-success::before {width: 0 !important;}
*/

/* --  install app styles setup -- */
.app_logo_close{position: absolute; right: 1rem; top: 0.5rem;}
.app_logo{position: absolute; left: calc(50% - 3rem); top: -25%; border-radius: 50%; --logo-size:80px; width: var(--logo-size); height: var(--logo-size); display: flex; align-items:center; justify-content: center; background-color: var(--bs-white); padding: 0rem;}
.app_logo img{max-width: 90%;}

/* --  attendance styles setup -- */
:root{--code-present-color: #00a700; --code-incentive-pay-color: #800000; --code-half-day-incentive-pay-color: #6495ED; --code-paid-time-off-color: #FFA500; --code-loff-of-pay-color: #ff0000; --code-holiday-color: #808000; --code-logout-missing-color: #FF00FF; --code-half-day-color: #FF4500;--code-week-off-color:#00F;}
.td_att_status_list_group{--minmax: 80px; display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--minmax), 1fr)); grid-gap: 0.25rem;}
.td_att_status_list_item{display: flex; flex-direction: column; border: 1px dashed var(--bs-border-color); border-radius: 10px; padding: 0rem 0.25rem;}
.td_att_status_list_item + .td_att_status_list_item{ /*border-left: 1px dashed var(--bs-border-color);*/}

.code_present{color:var(--code-present-color);}
.code_incentive_pay{color:var(--code-incentive-pay-color);}
.code_half_day_incentive_pay{color:var(--code-half-day-incentive-pay-color);}
.code_paid_time_off{color:var(--code-paid-time-off-color);}
.code_loss_of_pay{color:var(--code-loff-of-pay-color);}
.code_holiday{color:var(--code-holiday-color);}
.code_logout_time_missing{color:var(--code-logout-missing-color);}
.code_half_day{color:var(--code-half-day-color);}

.code_tags_list_group{--minmax: 100px; display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--minmax), 1fr)); grid-gap: 0.125rem; font-size: 0.75rem;}
.code_tags_list_item{border: 1px dashed var(--bs-border-color); border-radius: 10px; padding: 0rem 0.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.popover .code_tags_list_group{grid-gap: 0.5rem;}
.popover .code_tags_list_item{padding: 0.25rem 0.5rem;}
.monthly_att_status_list_group{ display: flex; flex-wrap: wrap; grid-gap: 0.25rem;}
.monthly_att_status_list_item{ flex: 1; border: 1px dashed var(--bs-border-color); border-radius: 10px; padding: 0rem 0.25rem;}
.attendance .actions{position: absolute; right: 0; top: -40px; z-index: 2;} /*z-index: 1-> updated to z-index: 2 bcz z-index: 1 not clickable on attendance actions dropdown menu items - #imrudeen*/

/* -- attendance calendar styles setup -- */
.attendance .calendar-header{padding: 0.25rem 0.25rem; margin-bottom: 0;}
.attendance table.calendar, .attendance table.month-table {width: 100%;border-collapse: collapse;margin-bottom: 20px;}
.attendance table.calendar th,.attendance table.calendar td {width: calc(100% / 7);height: 50px;text-align: center;border: 1px solid #e7e7e7;}
.attendance table.calendar th.month-header{color: #fff !important; background-color: RGBA(var(--bs-primary-rgb), var(--bs-bg-opacity, 1)) !important;}
.attendance table.calendar th {background-color: #6c757d; color: #fff; border-color: #5f656e;}
.attendance table.calendar td {cursor: pointer;position: relative;}
.attendance table.calendar td .attendance_status{position: absolute; right: 0; top: 0; padding: 0.25rem; font-size: 11px; font-weight: 600;}

:root{--code-present-bg: #e4f7e4; --code-incentive-pay-bg: #800000; --code-half-day-incentive-pay-bg: #f2e1e1; --code-paid-time-off-bg: #fff1d6; --code-loff-of-pay-bg: #ffebeb; --code-holiday-bg: #e9e9ac; --code-logout-missing-bg: #ffe2ff; --code-half-day-bg: #ffeac9;--code-week-off-bg:#DFDFFF;--code-active:#89929b;}
.attendance table.calendar td.code_present{background-color: var(--code-present-bg);}
.attendance table.calendar td.code_incentive_pay{background-color:var(--code-incentive-pay-bg);}
.attendance table.calendar td.code_half_day_incentive_pay{background-color:var(--code-half-day-incentive-pay-bg);}
.attendance table.calendar td.code_paid_time_off{background-color:var(--code-paid-time-off-bg);}
.attendance table.calendar td.code_loss_of_pay{background-color:var(--code-loff-of-pay-bg);}
.attendance table.calendar td.code_holiday{background-color:var(--code-holiday-bg);}
.attendance table.calendar td.code_logout_time_missing{background-color:var(--code-logout-missing-bg);}
.attendance table.calendar td.code_half_day{background-color:var(--code-half-day-bg);} 
.attendance table.calendar td.code_week_off{background-color:var(--code-week-off-bg);} 
#calendarBody .active{border:1px solid #6c757d; background-color:var(--code-active);color:#ffff;}

/* -- sms styles setup -- */
.sms_status_list_group{--minmax: 80px; display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--minmax), 1fr)); grid-gap: 0.25rem;}
.grid-template-columns-fit{grid-template-columns: repeat(auto-fit, minmax(var(--minmax), 1fr));}
.sms_status_list_item{display: flex; flex-direction: column; border: 1px dashed var(--bs-border-color); border-radius: 10px; padding: 0rem 0.25rem; }
.sms_status_list_group.sms_status_list_group_row{display: flex; flex-wrap: wrap; grid-gap: 0.25rem;}
.sms_status_list_group_row .sms_status_list_item{display: flex; border: 1px dashed var(--bs-border-color); border-radius: 10px; padding: 0rem 0.25rem; grid-gap: 0.25rem;}

.chatbox .chatbox-item{position: relative; margin: 15px 0;}
.chatbox .sms_sender:before{content: '';position: absolute;top: -6px;left: -7px;width: 0;height: 0;border-style: solid;border-width: 0 12px 15px 12px;border-color: transparent transparent #f5f5f5 transparent;-webkit-transform: rotate(-37deg);-ms-transform: rotate(-37deg);transform: rotate(-37deg)}
.chatbox .sms_replyer:before{content: '';position: absolute;bottom: 15px;right: -7px;width: 0;height: 0;border-style: solid;border-width: 0 12px 15px 12px;border-color: transparent transparent #4b7bec transparent;-webkit-transform: rotate(37deg);-ms-transform: rotate(37deg);transform: rotate(37deg)}
.chatbox .sms_replyer{text-align: right;}
.chatbox .sms_sender .msg{padding: 8px; margin-bottom: 0.25rem; background: #f5f5f5;display: inline-block;border-bottom-left-radius: 10px;border-top-right-radius: 10px;border-bottom-right-radius: 10px;}
.chatbox .sms_replyer .msg{padding: 8px; margin-bottom: 0.25rem; background: #4b7bec; color: #ffffff; display: inline-block;border-top-left-radius: 10px;border-top-right-radius: 10px;border-bottom-left-radius: 10px;}
.chatbox .time{display: block;}
.chatbox .sms_replyer .time{margin-right: 20px}
.chatbox .divider{position: relative;z-index: 1;text-align: center; }
.chatbox .divider .date{color: #222;background: #fff; display: inline-block; padding:0 1rem; border-radius: 50px;}
.chatbox .divider:after{display: block;content: '';clear: both;position: absolute;top: 50%;left: 0;border-top: 1px solid #EBEBEB;width: 100%;height: 100%;z-index: -1}

.send-btns .attach{display: flex; flex-wrap: wrap; align-items: center; grid-gap: 0.25rem;}
.send-btns .button-wrapper{position: relative;width: 125px;height: auto; min-height: 40px; text-align: left; display: inline-block; background: #F6F7FA;border-radius: 3px;padding: 5px 15px; overflow: hidden; display: flex; align-items: center; grid-gap: 0.5rem;}
.send-btns .button-wrapper span.label{position: relative;z-index: 1;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;width: 100%;cursor: pointer;color: #343945;font-weight: 400;text-transform: capitalize;font-size: 13px; grid-gap: 0.5rem;}
#upload{display: inline-block;position: absolute;z-index: 1;width: 100%;height: 100%;top: 0;left: 0;opacity: 0;cursor: pointer;  grid-gap: 0.25rem;}
.send-btns .attach .form-control{display: inline-block;width: 120px;height: auto;padding: 5px 8px;font-size: 13px;font-weight: 400;line-height: 1.5;color: #343945;background-color: #F6F7FA;background-clip: padding-box;border: 1px solid #F6F7FA;border-radius: 3px;}
.send-btns .add-apoint{text-decoration: none;background: #F6F7FA;border-radius: 3px;padding: 8px 8px;font-size: 13px;font-weight: 400;line-height: 1.2;color: #343945; min-height: 40px;display: flex; align-items: center; grid-gap: 0.5rem;}

/* -- desktop sms page styles setup for mobile view -- */
@media screen and (max-width: 991.98px) {
    .main-wrapper .content { flex-flow: column wrap; }
    .main-wrapper .content .sidebar-group { width: 100%; }
    .chat, .right-sidebar { display: flex; flex-direction: column; width: 100%; }
}

/* --  status list group styles setup -- */
.status_list_group{display: flex; flex-wrap: wrap; border-radius: var(--bs-list-group-border-radius); grid-gap: 0.25rem; --bs-list-group-border-width:1px; --bs-list-group-border-radius: var(--bs-border-radius); --bs-list-group-border-color: var(--bs-border-color);}
.status_list_group.status_grid_list_group{ --minmax: 80px; display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--minmax), 1fr));}
.status_list_item{flex: 1; display: flex; /*flex-wrap: wrap;*/ align-items: center; justify-content: center;  border-radius: inherit; padding: 0.25rem 0.5rem; grid-gap: 0.25rem; } /*overflow: hidden; - if need this add class on elem - #imrudeen*/

.project_dashboard_status_list_item{overflow: hidden; min-width: 50px;}

/* --  horizontal steps core styles setup -- */
.omw_sec .stepscta{display: flex; background: var(--wht);; overflow: overlay;}
.omw_sec #steps {/*width: 50%;margin: 50px auto; */ padding: 0px; margin: 0px auto;display: inline-flex; justify-content: center; /*background: var(--wht);*/ height: 100px; border: 2px solid var(--wht); position: relative;}
.omw_sec .step {  width: 40px;  height: 40px;  background-color: white;  display: inline-block;  border: 4px solid;  border-color: transparent;  border-radius: 50%;  color: #cdd0da;  font-weight: 600;  text-align: center;  line-height: 32px; margin: 0 0 20px 0;}
.omw_sec .step:first-child {  line-height: 36px; transform: translate(0, 0px); }
.omw_sec .step:nth-child(n+2) {  margin-left: 50px;  transform: translate(0, 0px);}
.omw_sec .step:before {  width: 50px;  height: 2px;  display: block;  background-color: white;  transform: translate(-54px, 15px);  content: ""; }
/*.omw_sec  .step:after {  width: 150px;  display: block;  transform: translate(-58px, 3px);  color: #818698;  content: attr(data-desc);  font-weight: 400;  font-size: 13px; line-height: 20px;} */
.omw_sec .step:first-child:before{display: none;}
/*.omw_sec .step:first-child:after {  transform: translate(-55px, -1px); line-height: 16px;}*/
.omw_sec .step.active {  border-color: #73b5e8;  color: #73b5e8;}
.omw_sec .step.active:before {  background: linear-gradient(to right, #58bb58 0%, #73b5e8 100%);}
.omw_sec .step.active:after {  color: #73b5e8;}
.omw_sec .step.done {  background-color: #4355a0;  border-color: #4355a0;  color: white;}
.omw_sec .step.done:before {  background-color: #4355a0;}
.omw_sec .step .stepspan { background-color: #4355a0; border: 2px solid #ffffff; width: 32px; height: 32px; position: absolute; top: 0px; left: 0px; border-radius: 50px;	display: flex;	align-items: center; justify-content: center;}
.omw_sec .timestamp{ position: absolute; /* right: 0;*/top: 18px; width: 45px; font-size: 12px; line-height: 12px; background: var(--wht); height: 45px; border-radius: 50px 10px;  z-index: 1; display: flex; align-items: center; justify-content: center; text-align: center; padding: 5px;}
/*.omw_sec .timestamp.timestamp1{transform: translate(-135px, -10px);}*/
/*.omw_sec .timestamp.timestamp2{transform: translate(0px, -10px);}*/
/*.omw_sec .timestamp.timestamp3{transform: translate(135px, -10px);}*/
.omw_sec .trackText {  width: 88px;  display: block;  transform: translate(-27px, 40px);  color: #818698;  content: attr(data-desc);  font-weight: 400;  line-height: 20px; color: var(--dblu); }
.omw_sec .step .trackText.trackText1{font-size: 13px; font-weight: 600; color: #4355a0;}
.omw_sec .step .trackText.trackText2{font-size: 11px; letter-spacing: 1px; color: #4355a0;}
.omw_sec .step .trackText.trackText3{font-size: 11px; font-style:normal; color: #717171; line-height: 16px;}
.dark_mode .omw_sec  #steps, .dark_mode .stepscta{background: var(--blu); border: unset;}
.dark_mode .omw_sec  .timestamp{background: var(--blu); border: unset; color: #aca5fd !important;}
.dark_mode .omw_sec  .step .trackText.trackText3{ color: #aca5fd !important;}
.omw_sec .stepscta.tracker_stepacta .step{border-radius: 7px;}
.omw_sec .stepscta.tracker_stepacta .step .stepspan{border-radius: 7px; border: 0;}
.omw_sec .stepscta.tracker_stepacta .step .stepspan i{font-size: 18px; color: #4355a0 !important;}
.omw_sec .stepscta.tracker_stepacta .step.done .stepspan i{font-size: 18px; color: var(--bs-white) !important;}
.omw_sec .stepscta.tracker_stepacta .step, .stepscta.tracker_stepacta .step .stepspan { background-color: #e2e7ff;}
.omw_sec .stepscta.tracker_stepacta .step.done, .stepscta.tracker_stepacta .step.done .stepspan { background-color: #4355a0;}
.omw_sec .stepscta.tracker_stepacta .step:before{background-color: #efefef;}
.omw_sec .stepscta.tracker_stepacta .step.done:before { background-color: #4355a0;}
.omw_sec #steps .trackText * {font-size: 13px !important;}

/* loader image css code start  added on 04-03-2024*/
#loader{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.8); display: flex; justify-content: center; align-items: center; z-index: 9999;}
#loader img{ width: 100px;}

div#showLoading, #showLoadingMsg, #showLoader {position: fixed;text-align: center;left: 0;right: 0;top: 0;bottom: 0;z-index: 99999;vertical-align: middle;font-size: 20px;line-height: 100vh; display: grid; place-content:center;/* display: flex; justify-content: center; align-items: center;*/} 
/*body.pace-running div#showLoading, body.pace-running #showLoadingMsg, body.pace-running #showLoader{display: flex; justify-content: center; align-items: center;}
body.pace-done div#showLoading, body.pace-done #showLoadingMsg, body.pace-done #showLoader{display: none;}*/

:root{--loader-bg-rgb:var(--bs-black-rgb); --loader-bg-opacity:0.8;}
div#showLoading, #showLoadingMsg, #showLoader {background: rgb(255, 255, 255, 80%); background: rgba(var(--loader-bg-rgb),var(--loader-bg-opacity)); color: var(--bs-body-color);}
[data-bs-theme="light"]{--loader-bg-rgb:var(--bs-white-rgb);}

/* loader image css code end */

.m_mac_table tr td:first-child {width: 160px !important;}

.role_types_dropdown + .user-login-page-input-fields {padding: 10px 0 0 !important;}
.role_types_dropdown{display: flex;}
.role_types_dropdown_toggle{flex: 1; display: flex; align-items: center; justify-content: space-between; grid-gap: 0.5rem; border-radius: 10px; border: none; outline: none !important; padding: 5px 15px;}
.role_types_dropdown.open .role_types_dropdown_toggle{border-radius: 10px 10px 0 0;}
.role_types_dropdown .role_types_dropdown_menu{display: none !important;}
.role_types_dropdown.open .role_types_dropdown_menu{display: block !important;}
.role_types_dropdown_toggle a{ display: flex; align-items: center; justify-content: center; grid-gap: 0.5rem; color: var(--wht) !important;}
.role_types_dropdown_menu{margin: 0; right: 0; border-radius: 0 0 7px 7px;}
.role_types_dropdown_menu_item a{ display: flex !important; align-items: center; justify-content: start; grid-gap: 0.5rem; }

/* notice styles setup */
.notice{padding: 15px;background-color: #fafafa;border-left: 6px solid #7f7f84;margin-bottom: 10px;-webkit-box-shadow: 0 5px 8px -6px rgba(0,0,0,.2);-moz-box-shadow: 0 5px 8px -6px rgba(0,0,0,.2);box-shadow: 0 5px 8px -6px rgba(0,0,0,.2)}
.notice-sm{padding: 10px;font-size: 76%}
.notice-success{border-color: #80D651} .notice-success>strong{color: #80D651}
.notice-info{border-color: #45ABCD} .notice-info>strong{color: #45ABCD}
.notice-warning{border-color: #FEAF20} .notice-warning>strong{color: #FEAF20}
.notice-danger{border-color: #d73814} .notice-danger>strong{color: #d73814}
.notice-primary{border-color: #3584f7} .notice-primary>strong{color: #3584f7}
.pdf-page {  border: 1px solid #302f2f; margin-bottom: 20px; }
#pdf-controls { text-align: center; margin-bottom:10px;}
#pdf-canvas-container {overflow-x: auto;}