:root{
    --color-header: #05546c;
    --color-header-transparent: rgba(5, 84, 108, 0.8);
    --color-header-gradient: #003849;
    --color-header-hover: #047192;
    --color-header-hover-gradient: #025a74;
    --color-mobile-menu-shadow: rgba(0, 0, 0, 0.102);
    --color-mobile-menu-background-active: rgba(5, 84, 108, 0.12);
    --color-mobile-menu-background-hover: rgba(5, 84, 108, 0.07);
    --color-mobile-menu-accent: #055066;
    --color-mobile-menu-accent-dark: #014155;
    --color-mobile-menu-accent-light: #90bdcb;
    --color-contrast: #f13939;
    --color-contrast-transparent: rgba(139, 51, 51, 0.8);
    --color-contrast-gradient: #8d0505;
    --color-contrast-hover: #800000;
    --color-contrast-hover-gradient: #af0000;
    --color-contrast-green: #006023;
    --color-contrast-green-transparent: rgba(0, 96, 35, 0.8);
    --color-contrast-green-gradient: #004a1a;
    --color-contrast-green-hover: #008035;
    --color-contrast-green-hover-gradient: #006023;
    --color-footer-background: #002733;
}

@keyframes pulsingheart {
    0%,40%,80%,to {
        transform: scale(.75)
    }

    20%,60% {
        transform: scale(1)
    }
}

@-webkit-keyframes autofill {
    to {
        color: #666;
        background: #fff
    }
}

@keyframes autofill {
    to {
        color: #666;
        background: #fff
    }
}

@-webkit-keyframes shake {
    0%,to {
        -webkit-transform: translateX(0)
    }

    10%,30%,50%,70%,90% {
        -webkit-transform: translateX(-10px)
    }

    20%,40%,60%,80% {
        -webkit-transform: translateX(10px)
    }
}

@-moz-keyframes shake {
    0%,to {
        -moz-transform: translateX(0)
    }

    10%,30%,50%,70%,90% {
        -moz-transform: translateX(-10px)
    }

    20%,40%,60%,80% {
        -moz-transform: translateX(10px)
    }
}

@-o-keyframes shake {
    0%,to {
        -o-transform: translateX(0)
    }

    10%,30%,50%,70%,90% {
        -o-transform: translateX(-10px)
    }

    20%,40%,60%,80% {
        -o-transform: translateX(10px)
    }
}

@keyframes shake {
    0%,to {
        transform: translateX(0)
    }

    10%,30%,50%,70%,90% {
        transform: translateX(-10px)
    }

    20%,40%,60%,80% {
        transform: translateX(10px)
    }
}

@media (min-width:992px) {
    .container {
        max-width: 1280px
    }
}

body.page_login .login-btn{
    display: none;
}

.small,small {
    font-size: 80%;
}

strong, b{
   font-weight: 700;
}

.brand,.dropdown-item,.h1,.h2,.h3,.h4,.h5,.h6,.navbar,.navbar a,.td-name,a,button,h1,h2,h3,h4,h5,h6,input,p,select,textarea {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-optical-sizing: auto
}

.brand,.dropdown-item,.navbar,.navbar a,.td-name,a,button,input,p,select,textarea {
    font-family: "Noto Sans","Helvetica",Arial,sans-serif
}

.clientLink {
    font-stretch: 80%;
    letter-spacing: 0.3px;
    color: #262626 !important; 
    font-family: "Noto Sans","Helvetica",Arial,sans-serif;
    font-size: 1em;
    font-weight: 600;
}

.clientLink:hover {
   color: var(--color-header) !important;
}

.modal-title{
   font-weight: 500;
}

.modal-dialog .btn{
   font-size: 14px;
}

.mainListTableCont .invoiceInfo,.portalTableCont .invoiceInfo {
    font-size: 90%
}

.number{
    font-family: "Roboto Flex", "Helvetica", sans-serif;

}

.brand,.h1,.h2,.h3,.h4,.h5,.navbar,.td-name,button,h1,h2,h3,h4,h5,input {
    font-weight: 500
}

.dropdown-item {
    font-weight: 400;
}

.brand,.dropdown-item,.h1,.h2,.h3,.h4,.h5,.h6,.navbar,.td-name,h1,h2,h3,h4,h5,h6 {
   font-stretch: 90%;
   letter-spacing: 0.4px;
}
.navbar a{
   font-stretch: 99%;
   letter-spacing: 0.2px;
}

a.button,button:not(.btn-special-home):not(.btn-filter):not(#addLine) {
    font-stretch: 80%
}

.btn,.number {
    font-weight: 500
}
#invoiceLinesContainer .number{
    font-weight: 400 !important;
}

.btn-special-home {
    font-weight: 400
}

.h1,.h2,.h4,h1,h2,h4 {
    margin: 30px 0 0
}

.h1,h1 {
    font-size: 3.6em
}

.h2,h2 {
    font-size: 2.8em
}

.h3,h3 {
    font-size: 1.825em;
    line-height: 1.4;
    margin: 20px 0 0
}

.h4,h4 {
    font-size: 1.6em;
    line-height: 1.2em
}

.h5,h5 {
    font-size: 1.35em;
    line-height: 1.4em
}

.h6,h6 {
    line-height: 1.5em
}

.h6,h6 {
    font-size: .9em;
    font-weight: 600;
    text-transform: uppercase
}

p {
    font-size: 0.9rem;
    margin-bottom: 5px;
    line-height: 1.2rem;
}

.h1 .small,.h1 small,.h2 .small,.h2 small,.h3 .small,.h3 small,.h4 .small,.h4 small,.h5 .small,.h5 small,.h6 .small,.h6 small,h1 .small,h1 small,h2 .small,h2 small,h3 .small,h3 small,h4 .small,h4 small,h5 .small,h5 small,h6 .small,h6 small {
    color: #9a9a9a;
    line-height: 1.5em
}

h1 .small,h1 small,h2 .small,h2 small,h3 .small,h3 small {
    font-size: 60%
}

.card-title,.footer-big h4,.footer-big h5,.footer-brand,.info-title,.mainTitleRow h3,.media .media-heading,.title {
    font-family: "Noto Sans","Helvetica",Arial,sans-serif;
    font-stretch: 80%
}

.portal-table-price,.price {
    font-family: "Roboto Flex", "Helvetica",Arial,sans-serif
}

.title,.title a {
    color: #333
}

.card-title,.card-title a,.title,.title a {
    text-decoration: none
}

.card-title a {
    color: #333
}

.page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: #545b62;
    border-color: #545b62
}

.page-link {
    color: #3f4144
}

.page-link:hover {
    color: #212931
}

.page-link:focus {
    box-shadow: 0 0 0 .2rem rgba(124,133,142,.25);
    color: #21444f
}

.title-uppercase {
    text-transform: uppercase
}

.description {
    color: #9a9a9a
}

blockquote small {
    font-style: normal
}

.text-muted {
    color: #7d8e93!important
}

.text-primary,.text-primary:hover {
    color: #3e7b8c!important
}

.text-info,.text-info:hover {
    color: #3a9dac!important
}

.text-success,.text-success:hover {
    color: #329b60!important
}

.text-warning,.text-warning:hover {
    color: #f7a600!important
}

.text-danger,.text-danger:hover {
    color: #d25538!important
}

.text-white-transparent {
    color: rgba(255,255,255,0.6) !important;
}

.text-black-transparent {
    color: rgba(0,0,0,0.6) !important;
}

.badge {
    font-family: "Roboto Flex",sans-serif !important;
    font-optical-sizing: auto;
    font-variation-settings: "opsz" 12,"XOPQ" 110,"YOPQ" 90,"XTRA" 450;
    font-weight: 450;
    letter-spacing: .025em;
}

.badge-primary {
    background-color: #3e7b8c!important
}

.badge-info {
    background-color: #3a9dac!important
}

.badge-success {
    background-color: #329b60!important
}

.badge-warning {
    background-color: #f7a600!important;
    color: #fff
}

.badge-danger {
    background-color: #d25538!important
}

.badge-warning-alt {
    background-color: #ffedc8!important;
    color: #383838;
    width: 17px
}

.badge-transparent {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

a.badge-warning.focus[data-toggle=collapse],a.badge-warning:focus[data-toggle=collapse] {
    box-shadow: none
}

a.badge-warning-alt.focus:not([data-toggle=collapse]),a.badge-warning-alt:focus:not([data-toggle=collapse]),a.badge-warning-alt[data-toggle=collapse][aria-expanded=true] {
    box-shadow: 0 1px 1px 0 rgba(0,0,0,.3),0 0 0 .2rem #fff0cf
}

a.badge-warning:focus, a.badge-warning:hover {
    color: #fff;
    background-color: #e09700 !important;
  }

.heart {
    color: #eb5e28;
    animation: pulsingheart 1s ease infinite
}

.custom-control-input:focus:not(:checked)~.custom-control-label::before {
    border-color: #eea28b
}

.custom-control-input:focus~.custom-control-label::before {
    box-shadow: 0 0 0 .2rem rgba(178,60,24,.25)
}

.custom-control-input:checked~.custom-control-label::before {
    color: #fff;
    border-color: #b23c18;
    background-color: #c64a24
}

.custom-control-input:not(:disabled):active~.custom-control-label::before {
    color: #fff;
    background-color: #eea28b;
    border-color: #eea28b
}

.custom-checkbox .custom-control-input:disabled:checked~.custom-control-label::before {
    background-color: #ecc0b3;
    border-color: #bf968c
}

.footer .btn {
    margin-bottom: 0
}

.blockquote {
    border-left: 0 none;
    border-bottom: 1px solid #ccc5b9;
    border-top: 1px solid #ccc5b9;
    font-weight: 300;
    margin: 15px 0 10px;
    text-align: center
}

.title {
    margin-top: 30px;
    margin-bottom: 25px;
    min-height: 32px
}

body {
    font-size: .9rem;
    font-weight: 350;
    font-family: "Noto Sans","Helvetica",Arial,sans-serif
}

.font-weight-semibold{
   font-weight: 500;
}

a {
    color: #2687ad
}

a:focus,a:hover {
    color: #3292b8;
    text-decoration: none
}

hr {
    border-color: #f1eae0;
    border-color: rgba(0,0,0,.2)
}

mark, .mark {
   border-radius: 5px 5px 5px 0;
   padding: 0 8px 0 5px;
   display: inline-grid;
 }

 .mark.mark-danger{
    background: #fce1e1;
 }

.icon {
    fill: #66615b
}

a:active,a:focus,button::-moz-focus-inner,input[type=button]::-moz-focus-inner,input[type=file]>input[type=button]::-moz-focus-inner,input[type=reset]::-moz-focus-inner,input[type=submit]::-moz-focus-inner,select::-moz-focus-inner {
    outline: 0
}

.navbar-toggle,.ui-slider-handle:focus {
    outline: 0!important
}

.table-striped tbody tr:nth-of-type(2n+1) {
    background-color: rgba(61,122,140,.05)
}

.form-control,.input-group-addon,.tagsinput {
    -webkit-transition: all 300ms linear;
    transition: all 300ms linear
}

.carousel-control.left,.carousel-control.right,.form-control,.input-group-addon,.navbar,.navbar .alert,.tagsinput,.input-group-text {
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear
}

.carousel-control.left,.carousel-control.right,.navbar .alert {
    -webkit-transition: all 300ms linear;
    transition: all 300ms linear
}

.animation-transition-fast,.btn-hover,.dropdown-menu .dropdown-item,.filter,.tagsinput .tag,.tagsinput-remove-link,[data-toggle=collapse] i {
    -webkit-transition: all 150ms linear;
    -moz-transition: all 150ms linear;
    -o-transition: all 150ms linear;
    -ms-transition: all 150ms linear;
    transition: all 150ms linear
}

.btn-morphing .circle,.btn-morphing .fa,.gsdk-collapse {
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear
}

.fa {
    width: 18px;
    text-align: center
}

.margin-top {
    margin-top: 50px
}

.dropdown-menu .dropdown-item {
    padding: .25rem 1.5rem!important
}

.dropdown-menu .dropdown-item:active, .dropdown-menu .dropdown-item.active {
    background-color: #e5eef1 !important;
    color: #000 !important;
}
.dropdown-menu .dropdown-item:active:hover, .dropdown-menu .dropdown-item.active:hover {
    background-color: #e5eef1 !important;
    color: #000 !important;
}

.dropdown-menu .dropdown-item:focus,.dropdown-menu .dropdown-item:hover {
    background-color: #e5eef1
}

.bg-primary,a.bg-primary,.progress-bar,.progress-bar-primary{
    background-color: #2f8099 !important;
    border-color: #2f8099 !important;
    color:white;
}

a.bg-primary:hover{
    background-color: #25738a !important;
    border-color: #25738a !important
}


.bg-info,a.bg-info,.progress-bar-info,.label-info{
    background-color: #c3e1ea !important;
    border-color: #c3e1ea !important
}

.card-header.bg-info, .card-body.bg-info{
    background-color: #316d7e !important;
    border-color: #2d5663 !important;
}

a.bg-info:hover{
    background-color: #a9cfda !important;
    border-color: #a9cfda !important
}


.bg-success,a.bg-success,.progress-bar-success,.label-success{
    background-color: #329b60 !important;
    border-color: #329b60 !important
}

a.bg-success:hover{
    background-color: #22884f !important;
    border-color: #22884f !important
}

.progress-bar-warning,.label-warning{
    background-color: #f5a500 !important;
    border-color: #f5a500 !important
}

.bg-warning,a.bg-warning{
    background-color: #db9300 !important;
    border-color: #db9300 !important
}

a.bg-warning:hover{
    background-color: #c48301 !important;
    border-color: #c48301 !important
}


.bg-danger,a.bg-danger,.progress-bar-danger,.label-danger{
    background-color: #d25538 !important;
    border-color: #d25538 !important
}

a.bg-danger:hover, a.bg-danger:active, a.bg-danger:active:focus, a.bg-danger:focus, a.bg-danger:active:hover,
.dropdown-config .dropdown-item.bg-danger:hover,
.dropdown-config .dropdown-item.bg-danger:active,
.dropdown-config .dropdown-item.bg-danger:active:focus,
.dropdown-config .dropdown-item.bg-danger:focus,
.dropdown-config .dropdown-item.bg-danger:active:hover
{
    background-color: #b64329 !important;
    border-color: #b64329 !important;
    color: #fff !important;
}

a.bg-warning:hover, a.bg-warning:active, a.bg-warning:active:focus, a.bg-warning:focus, a.bg-warning:active:hover,
.dropdown-config .dropdown-item.bg-warning:hover,
.dropdown-config .dropdown-item.bg-warning:active,
.dropdown-config .dropdown-item.bg-warning:active:focus,
.dropdown-config .dropdown-item.bg-warning:focus,
.dropdown-config .dropdown-item.bg-warning:active:hover
{
    background-color: #c48301 !important;
    border-color: #c48301 !important;
    color: #fff !important;
}

a.bg-info:hover, a.bg-info:active, a.bg-info:active:focus, a.bg-info:focus, a.bg-info:active:hover,
.dropdown-config .dropdown-item.bg-info:hover,
.dropdown-config .dropdown-item.bg-info:active,
.dropdown-config .dropdown-item.bg-info:active:focus,
.dropdown-config .dropdown-item.bg-info:focus,
.dropdown-config .dropdown-item.bg-info:active:hover
{
    background-color: #2c7fb1 !important;
    border-color: #2c7fb1 !important;
    color: #fff !important;
}

a.bg-primary:hover, a.bg-primary:active, a.bg-primary:active:focus, a.bg-primary:focus, a.bg-primary:active:hover,
.dropdown-config .dropdown-item.bg-primary:hover,
.dropdown-config .dropdown-item.bg-primary:active,
.dropdown-config .dropdown-item.bg-primary:active:focus,
.dropdown-config .dropdown-item.bg-primary:focus,
.dropdown-config .dropdown-item.bg-primary:active:hover
{
    background-color: #2f8099 !important;
    border-color: #2f8099 !important;
    color: #fff !important;
}

a.bg-success:hover, a.bg-success:active, a.bg-success:active:focus, a.bg-success:focus, a.bg-success:active:hover,
.dropdown-config .dropdown-item.bg-success:hover,
.dropdown-config .dropdown-item.bg-success:active,
.dropdown-config .dropdown-item.bg-success:active:focus,
.dropdown-config .dropdown-item.bg-success:focus,
.dropdown-config .dropdown-item.bg-success:active:hover
{
    background-color: #329b60 !important;
    border-color: #329b60 !important;
    color: #fff !important;
}

.label-default {
    background-color: #66615b
}


.navbar-transparent {
    background-color: transparent!important;
    border-bottom: 1px solid transparent
}

.btn.btn-link {
    color: #66615b
}

.btn.btn-link.active,.btn.btn-link:active,.btn.btn-link:focus,.btn.btn-link:hover,.open>.btn.btn-link.dropdown-toggle {
    background-color: transparent;
    color: #403d39
}

.btn.btn-link .caret {
    border-top-color: #66615b
}

.btn .caret {
    border-top-color: #fff
}

.btn:focus,.btn:hover {
    outline: 0!important;
    -webkit-box-shadow: none;
    box-shadow: none
}

.btn.active,.btn:active,.open>.btn.dropdown-toggle {
    -webkit-box-shadow: none;
    box-shadow: none;
    outline: 0!important
}

.btn-primary {
    color: #fff;
    opacity: 1;
    filter: alpha(opacity=100)
}

.btn-primary.active,.btn-primary:active,.btn-primary:focus,.btn-primary:hover,.show>.btn-primary.dropdown-toggle {
    color: #fff
}

.btn-primary.btn-link {
    color: #51cbce
}

.btn-primary.btn-link.active,.btn-primary.btn-link:active,.btn-primary.btn-link:focus,.btn-primary.btn-link:hover,.open>.btn-primary.btn-link.dropdown-toggle {
    background-color: transparent;
    color: #34b5b8
}

.btn-primary.btn-link .caret {
    border-top-color: #51cbce
}

.btn-primary .caret {
    border-top-color: #fff
}

.btn-primary:not(:disabled):not(.disabled).active:focus,.btn-primary:not(:disabled):not(.disabled):active:focus,.show>.btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(35,138,169,.47)
}

.btn-outline-primary {
    color: #417889;
    border-color: #417889;
    background-color: transparent;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active,
.show > .btn-outline-primary.dropdown-toggle {
    color: #fff;
    background-color: #356574;
    border-color: #356574;
}

.btn-outline-primary:not(:disabled):not(.disabled).active,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.show > .btn-outline-primary.dropdown-toggle {
    background-color: #32606e;
    border-color: #32606e;
    color: #fff;
}

.btn-outline-primary:not(:disabled):not(.disabled).active:focus, .btn-outline-primary:not(:disabled):not(.disabled):active:focus, .show > .btn-outline-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(35,138,169,.47);
}

.btn-success {
    background-color: #399863;
    border-color: #399863;
    color: #fff;
    opacity: 1;
    filter: alpha(opacity=100)
}

.btn-success.active,.btn-success:active,.btn-success:focus,.btn-success:hover,.show>.btn-success.dropdown-toggle {
    background-color: #2b7e50;
    color: #fff;
    border-color: #2b7e50
}

.btn-success.btn-link {
    color: #2fa262
}

.btn-success.btn-link.active,.btn-success.btn-link:active,.btn-success.btn-link:focus,.btn-success.btn-link:hover,.open>.btn-success.btn-link.dropdown-toggle {
    background-color: transparent;
    color: #22884f
}

.btn-success.btn-link .caret {
    border-top-color: #2fa262
}

.btn-success .caret {
    border-top-color: #fff
}

.btn-info {
    background-color: #2c7fb1;
    border-color: #2c7fb1;
    color: #fff;
    opacity: 1;
    filter: alpha(opacity=100)
}

.btn-info.active,.btn-info:active,.btn-info:focus,.btn-info:hover,.show>.btn-info.dropdown-toggle {
    background-color: #246f9c;
    color: #fff;
    border-color: #246f9c;
}

.btn-info.btn-link {
    color: #4e7a99;
}

.btn-info.btn-link.active,.btn-info.btn-link:active,.btn-info.btn-link:focus,.btn-info.btn-link:hover,.open>.btn-info.btn-link.dropdown-toggle {
    background-color: transparent;
    color: #426986
}

.btn-info.btn-link .caret {
    border-top-color: #4e7a99
}

.btn-info .caret {
    border-top-color: #fff
}

.btn-warning {
    background-color: #f7a600;
    border-color: #f7a600;
    color: #4e2b0e;
    opacity: 1;
    filter: alpha(opacity=100)
}

.btn-warning:hover {
    color: #4e2b0e;
}

.btn-warning.active,.btn-warning:active,.btn-warning:focus,.btn-warning:hover,.show>.btn-warning.dropdown-toggle {
    background-color: #db9300;
    border-color: #db9300;
}

.show>.btn-warning.dropdown-toggle {
    color: #fff
}

.btn-warning:not(:disabled):not(.disabled).active,.btn-warning:not(:disabled):not(.disabled):active,.show>.btn-warning.dropdown-toggle {
    background-color: #db9300;
    border-color: #db9300
}

.btn-warning:not(:disabled):not(.disabled).active:focus,.btn-warning:not(:disabled):not(.disabled):active:focus,.show>.btn-warning.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(219,147,0,.59)
}

.btn-warning.btn-link {
    color: #fbc658
}

.btn-warning.btn-link.active,.btn-warning.btn-link:active,.btn-warning.btn-link:focus,.btn-warning.btn-link:hover,.open>.btn-warning.btn-link.dropdown-toggle {
    background-color: transparent;
    color: #db9300
}

.btn-warning.btn-link .caret {
    border-top-color: #f7a600
}

.btn-warning .caret {
    border-top-color: #fff
}

.btn-danger {
    color: #fff;
    opacity: 1;
    filter: alpha(opacity=100)
}

.btn-danger.btn-link {
    color: #f5593d
}

.btn-danger.btn-link.active,.btn-danger.btn-link:active,.btn-danger.btn-link:focus,.btn-danger.btn-link:hover,.open>.btn-danger.btn-link.dropdown-toggle {
    background-color: transparent;
    color: #f33816
}

.btn-danger.btn-link .caret {
    border-top-color: #f5593d
}

.btn-outline-danger {
    color: #b64329;
    border-color: #b64329;
    background-color: transparent;
}


.btn-outline-danger:hover,
.btn-outline-danger:focus,
.btn-outline-danger:active,
.btn-outline-danger.active,
.show > .btn-outline-danger.dropdown-toggle {
    color: #fff;
    background-color: #b64329;
    border-color: #b64329;
}


.btn-danger .caret {
    border-top-color: #fff
}

.btn.disabled,.btn:disabled,.btn[disabled] {
    opacity: .5;
    filter: alpha(opacity=50)
}

.btn-link {
    border-color: transparent!important;
    padding: 7px 18px
}

.btn-link:active,.btn-link:focus,.btn-link:hover {
    text-decoration: none;
    border-color: transparent
}

.btn-link.btn-icon {
    padding: 7px
}

.delete-btn {
    height: 26px;
    line-height: 13px!important;
    font-size: 24px!important;
    font-weight: 200;
    padding: 5px!important;
    text-align: center;
    float: right;
    right: -30px;
    position: absolute;
    top: 0
}

.btn:not(.btn-filter) {
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: .375rem 1.25rem;
    line-height: 2;
    border-radius: 30px
}

.btn-group-vertical .btn {
   border-radius: 10px;
}


.btn.btn-lg {
    font-size: 14px;
    padding: 11px 30px;
}

.btn.btn-lg.btn-simple {
    padding: 13px 30px!important
}

.btn.btn-sm:not(.btn-link) {
    font-size: 12px!important;
    padding: 9px 12px!important;
    line-height: 1.2!important
}

.btn.btn-xs:not(.btn-link) {
    font-size: 10px!important;
    padding: 8px 12px!important;
    line-height: 1!important
}

.btn-sm.btn-simple {
    padding: 6px 10px
}

.btn-group.select,.modal-register .modal-footer span,.navbar .logo-container .logo img {
    width: 100%
}

.btn-group.select .btn {
    text-align: left
}

.btn-group.select .caret {
    position: absolute;
    top: 50%;
    margin-top: -1px;
    right: 8px
}

.btn.btn-link:focus {
    box-shadow: none!important;
    text-decoration: none
}

.share-buttons .btn-outline-default {
    margin-top: 24px
}

#modals .btn-outline-neutral {
    margin-bottom: 10px
}

.btn-group.select {
    overflow: visible!important
}

.form-control::-moz-placeholder {
    color: #d2d2d2;
    opacity: 1;
    filter: alpha(opacity=100)
}

.form-control:-moz-placeholder {
    color: #d2d2d2;
    opacity: 1;
    filter: alpha(opacity=100)
}

.form-control::-webkit-input-placeholder {
    color: #d2d2d2;
    opacity: 1;
    filter: alpha(opacity=100)
}

.form-control:-ms-input-placeholder {
    color: #d2d2d2;
    opacity: 1;
    filter: alpha(opacity=100)
}

.form-control.bootstrap-select {
    padding: 0!important
}

.form-control-sm {
    height: calc(1.5em + .8rem + 2px)
}

.form-control.bootstrap-select .dropdown-menu li.active small{
    color: rgba(0, 0, 0, 0.5) !important;
}

.form-control:not(.form-control-sm) {
    background-color: #fff;  
    border-radius: 4px;
    color: #66615b;
    font-size: 14px;
    padding: 7px 12px;
    -webkit-box-shadow: none;
    box-shadow: none
}

.form-control:not(.form-control-sm):not(.is-invalid){
    border: 1px solid #ced4da;
}

.form-control.bootstrap-select.full-description .dropdown-menu li .text > small{
    display: block;
    white-space: wrap;
    text-transform: initial;
    padding-left: 0;
}

.form-control:focus, .custom-file-input:focus ~ .custom-file-label {
    background-color: #fff;
    border: 1px solid #4b4b4b;
    -webkit-box-shadow: none;
    box-shadow: 0 0 0.2px 4px rgba(0, 56, 72, 0.14);        
    outline: 0!important
}

.input-group:has(input:focus) .input-group-text{
    border-color: #9a9a9a;
}

.input-group-text{
    border-color: #ced4da;
}

.form-control.no-border {
    border: medium!important
}

.col-form-label, .custom-control-label, .form-control-label {
    line-height: 1.5rem;
    font-size: 13px;
    font-weight: 500;
  }

.has-error .form-control,.has-error .form-control:focus,.has-success .form-control,.has-success .form-control:focus {
    -webkit-box-shadow: none;
    box-shadow: none
}

.has-success .form-control {
    border: 1px solid #ccc;
    color: #66615b
}

.has-success .form-control:focus {
    border: 1px solid #6bd098;
    color: #6bd098
}

.has-danger .form-control {
    background-color: #ffc0a4;
    border: 1px solid #f5593d;
    color: #f5593d
}

.has-danger .form-control:focus {
    background-color: #fff;
    border: 1px solid #f5593d
}

.form-control+.form-control-feedback {
    border-radius: 6px;
    font-size: 14px;
    color: #f5593d;
    font-size: .8rem;
    position: absolute;
    top: 100%;
    padding-left: 12px;
    vertical-align: middle
}

.open .form-control {
    border-radius: 4px 4px 0 0;
    border-bottom-color: transparent
}

.input-group.input-group-focus .input-group-addon {
    border-color: #9a9a9a
}

.input-lg {
    height: 55px;
    padding: 11px 30px
}

.has-error .control-label,.has-error .form-control-feedback {
    color: #f5593d
}

.has-success .control-label,.has-success .form-control-feedback {
    color: #6bd098
}

.input-group-addon {
    border-radius: 4px
}

.input-group-addon.no-border {
    border: medium!important
}

.has-error .input-group-addon,.has-success .input-group-addon,.input-group-addon {
    background-color: #fff
}

.has-error .form-control:focus+.input-group-addon {
    color: #f5593d
}

.has-success .form-control:focus+.input-group-addon {
    color: #6bd098
}

.form-control:focus+.input-group-addon,.form-control:focus~.input-group-addon {
    background-color: #fff
}

.input-group .form-control:first-child,.input-group-addon:first-child,.input-group-btn:first-child>.dropdown-toggle,.input-group-btn:last-child>.btn:not(:last-child):not(.dropdown-toggle) {
    border-right: 0 none;
    padding-right: 0
}

.input-group .form-control:last-child,.input-group-addon:last-child,.input-group-btn:first-child>.btn:not(:first-child),.input-group-btn:last-child>.dropdown-toggle {
    border-left: 0 none
}

.form-control[disabled],.form-control[readonly],fieldset[disabled] .form-control {
    background-color: #e3e3e3;
    color: #66615b;
    cursor: not-allowed
}

.input-group[disabled] .input-group-addon {
    background-color: #e3e3e3;
    cursor: not-allowed;
    border-color: #ddd
}

.input-group-btn .btn {
    border-width: 1px;
    padding: 9px 18px
}

.input-group-btn .btn-default:not(.btn-fill) {
    border-color: #ddd
}

.input-group-btn:last-child>.btn {
    margin-left: 0
}

.input-group > input.form-control:not(:focus) + div > button{
    border-color: #ccc !important;
  }

textarea.form-control {
    height: auto;
    font-size: inherit;
    padding: 5px 10px
}

.form-group {
    position: relative
}

.register-form .form-control {
    border: 1px solid transparent!important
}

#inputs .input-group {
    margin-bottom: 1rem
}

.card-form-horizontal .card-block .form-group {
    margin-bottom: 0
}

.form-group-no-border .form-control,.form-group-no-border .input-group-addon {
    border: 0!important
}

.register-form .input-group .input-group-addon {
    padding-right: 2px
}

.register-form .input-group .form-control {
    margin-left: -1px
}

.progress {
    background-color: #ddd;
    border-radius: 3px;
    box-shadow: none;
    height: 8px
}

.progress-thin {
    height: 4px
}



.slider {
    background: #c8c8c8
}

.c-1-color {
    background-color: #00f
}

.c-2-color {
    background-color: #fff
}

.alert {
    border: 0;
    font-size: 14px;
    padding: 8px 15px;
    border-radius: 4px;
    text-align: left;
    margin-bottom: .5rem;
    line-height: 1.1rem;
}

.alert .close {
    font-size: 20px
}

.alert .close:focus {
    outline: 0
}

.container .alert {
    border-radius: 4px
}

.navbar .alert {
    border-radius: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 85px;
    width: 100%;
    z-index: 3
}

.navbar:not(.navbar-transparent) .alert {
    top: 70px
}

.alert .close:hover {
    color: inherit
}

.alert .alert-icon {
    display: block;
    font-size: 30px;
    left: 15px;
    position: absolute;
    top: 50%;
    margin-top: -22px
}

.alert .alert-wrapper.message {
    padding-right: 60px
}

.alert .alert-wrapper i {
    position: relative;
    font-size: 20px;
    top: 5px;
    margin-top: -5px;
    font-weight: 600
}

.alert a {
    text-decoration: underline
}

.alert.alert-red {
    border: 1px solid #e2c7c1;
  background-color: #ffe5e5;
  color: #553a35;
  box-shadow: 2px 3px 8px 0px rgba(0, 0, 0, 0.17);
}

.alert-red hr {
    border-color: #f7d9d4
}

.alert .alert-title {
    font-size: 14px;
    font-weight: 400;
    line-height: 18px
}

.alert.alert-mini {
    margin-bottom: 0
}

.alert-dismissible.alert:not(.alert-mini) {
    padding-right: 40px
}

.alert .alert-body {
    font-size: 12px;
    font-weight: 400
}

.alert-dismissible .close {
    padding: .55rem .9rem
}

.alert-info {
    color: #005985;
    background-color: #c3e1ea
}

.alert-info hr {
    border-top-color: #abd2dd
}

.alert-primary {
    background-color: #2f8099;
    color: #fff
}

.alert-primary hr {
    border-color: #5294a8
}

.alert-success {
    background-color: #c9ecd8
}

.alert-success hr {
    border-color: #b9d7c5
}

.alert-warning {
    background-color: #ffedc8
}

.alert-warning hr {
    border-top-color: #fff7e8
}

.alert.alert-light {
    border: 1px solid #e6e3e3
}

.alert.alert-danger {
    background-color: #ec6c55;
    color: #fff
}

.alert-danger hr {
    border-top-color: #f48470
}

.alert-danger .alert-heading,.alert-danger a,.alert-dark a,.alert-primary a {
    color: #fff
}

.alert-danger a.alert-link,.alert-danger a.alert-link:active,.alert-danger a.alert-link:visited {
    color: #fff!important;
    text-decoration: none;
    border-bottom: 1px dotted rgba(255,255,255,.5)
}

.alert-danger a.alert-link:hover {
    text-decoration: none;
    border-bottom: 1px dotted #fff
}

.alert .alert-title a {
    text-transform: uppercase;
    font-weight: 600;
    font-size: 12px;
    line-height: inherit;
    text-decoration: underline
}

.alert-primary a:hover {
    color: #e9f8fb
}

.alert-danger a:hover {
    color: #fee
}

.alert-dark {
    color: #eaeaea;
    background-color: #606264
}

.alert-dark hr {
    border-top-color: #76797b
}

.alert-warning,.alert-warning .alert-heading,.alert-warning .alert-link {
    color: #413b30
}

.alert-warning a.alert-link,.alert-warning a.alert-link:active,.alert-warning a.alert-link:visited {
    text-decoration: none;
    border-bottom: 1px dotted rgba(0,0,0,.5)
}

.alert-warning a.alert-link,.alert-warning strong {
    font-weight: 600
}

.alert-warning a.alert-link:hover {
    text-decoration: none;
    border-bottom: 1px dotted #000
}

.alert-warning-subtle {
    font-size: 13px;
    line-height: 16px;
    background-color: #fff3d9;
    color: #735e34;
    border-radius: 0!important;
    border: 1px dashed #fcd27b
}

.alert-warning.alert-warning-subtle .alert-link {
    color: #222;
    font-weight: 500
}

.alert[data-icon]:not([data-icon=""]) {
    padding-left: 40px
}

.alert[data-icon]:not([data-icon=""]):before {
    content: attr(data-icon);
    position: absolute;
    left: 0;
    font-weight: 400;
    font-size: 100%;
    top: 0;
    bottom: 0;
    background: rgba(255,255,255,.5);
    color: #000;
    width: 30px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    vertical-align: middle;
    border-radius: 4px 0 0 4px
}

.alert.alert-danger[data-icon]:not([data-icon=""]):before {
    background: rgba(255,255,255,.7)
}

.alert-mini.alert {
    font-size: 11px;
    line-height: 12px;
    padding: 3px 5px;
    display: block;
    text-align: left;
    box-shadow: 0 1px 1px 0 rgba(0,0,0,.3);
    border-radius: 3px;
    border: 0
}

.alert-mini.alert[data-icon]:not([data-icon=""]) {
    padding-left: 26px
}

.alert-mini.alert[data-icon]:not([data-icon=""]):before {
    content: attr(data-icon);
    position: absolute;
    left: 0;
    font-weight: 900;
    font-size: 100%;
    top: 0;
    bottom: 0;
    background: rgba(255,255,255,.8);
    color: #000;
    width: 20px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    vertical-align: middle;
    border-radius: 3px 0 0 3px
}

.alert-light.alert[data-icon]:not([data-icon=""]):before {
    background: rgba(0,0,0,.05)
}

.alert-mini.alert-dismissible {
    cursor: pointer
}

.alert-mini .alert-title,.label {
    font-weight: 500;
    font-size: 12px
}

.alert hr {
    margin-top: 4px;
    margin-bottom: 10px
}

.alert-mini hr {
    margin-top: 5px;
    border-color: rgba(255,255,255,.3);
    border-style: dotted;
    margin-bottom: 5px
}

.alert-mini .alert-body {
    font-size: 11px;
    font-weight: 400
}

.label {
    padding: .2em .6em;
    border-radius: 10px;
    color: #fff;
    font-size: .75em;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 3px;
    line-height: 17px
}


.tooltip {
    font-size: 12px;
    font-weight: 400
}

.tooltip-inner {
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 13px rgba(0,0,0,.14),0 0 0 1px rgba(115,71,38,.23);
    color: #66615b;
    max-width: 200px;
    padding: 10px;
    text-align: center;
    text-decoration: none
}

.checkbox label::after,.checkbox label::before,.tooltip-inner:after,.tooltip-inner:before {
    content: "";
    display: inline-block;
    position: absolute
}

.tooltip.bs-tether-element-attached-left,.tooltip.tooltip-right {
    padding: 0 3px!important
}

.tooltip.bs-tether-element-attached-right .tooltip-inner::before,.tooltip.tooltip-left .tooltip-inner::before {
    border-left: 11px solid rgba(0,0,0,.2);
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
    right: -7px;
    left: auto;
    margin-left: 0;
    top: 13px
}

.tooltip.bs-tether-element-attached-right .tooltip-inner::after,.tooltip.tooltip-left .tooltip-inner::after {
    border-left: 11px solid #fff;
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
    right: -6px;
    left: auto;
    margin-left: 0;
    top: 8px
}

.tooltip.bs-tether-element-attached-bottom .tooltip-inner::before,.tooltip.tooltip-top .tooltip-inner::before {
    border-top: 11px solid rgba(0,0,0,.2);
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    bottom: -6px;
    left: 100%;
    margin-left: -60%
}

.tooltip.bs-tether-element-attached-bottom .tooltip-inner::after,.tooltip.tooltip-top .tooltip-inner::after {
    border-top: 11px solid #fff;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    bottom: -5px;
    content: "";
    display: inline-block;
    left: 100%;
    margin-left: -60%;
    position: absolute
}

.tooltip.bs-tether-element-attached-left .tooltip-inner::before,.tooltip.tooltip-right .tooltip-inner::before {
    border-right: 11px solid rgba(0,0,0,.2);
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
    top: 13px;
    margin-left: -8px;
    content: "";
    display: inline-block;
    position: absolute;
    left: 0
}

.tooltip.bs-tether-element-attached-left .tooltip-inner::after,.tooltip.tooltip-right .tooltip-inner::after {
    border-right: 11px solid #fff;
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
    top: 8px;
    margin-left: -7px;
    content: "";
    display: inline-block;
    position: absolute;
    left: 0
}

.popover.bs-tether-element-attached-top::after,.popover.bs-tether-element-attached-top::before,.popover.popover-bottom::after,.popover.popover-bottom::before {
    top: -9px
}

.tooltip.bs-tether-element-attached-top .tooltip-inner::before,.tooltip.tooltip-bottom .tooltip-inner::before {
    border-bottom: 11px solid rgba(0,0,0,.2);
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    top: -7px;
    content: "";
    display: inline-block;
    left: 100%;
    margin-left: -60%;
    position: absolute
}

.tooltip.bs-tether-element-attached-top .tooltip-inner::after,.tooltip.tooltip-bottom .tooltip-inner::after {
    border-bottom: 11px solid #fff;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    top: -6px;
    content: "";
    display: inline-block;
    left: 100%;
    margin-left: -60%;
    position: absolute
}

.tooltip.show {
    opacity: 1!important
}

.popover,.popover-title {
    font-weight: 400;
    color: #66615b
}

.popover {
    border: 0;
    border-radius: 4px;
    padding: 0;
    z-index: 1031;
    -webkit-box-shadow: none;
    box-shadow: none
}

.popover-title {
    background-color: #fffcf5;
    border-bottom: 0 none;
    font-size: 15px;
    line-height: 22px;
    padding: 15px 15px 0;
    text-align: center;
    border-radius: 4px 4px 0 0;
    margin: 0 0-10px
}

.popover-content {
    padding: 15px;
    text-align: center
}

.popover .arrow {
    border: 0
}

.popover.top .arrow {
    margin-left: 0
}

.popover.bottom .arrow:after {
    border-bottom-color: #f7765f
}

.popover-filter {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1030;
    background-color: #000;
    opacity: 0;
    filter: alpha(opacity=0);
    visibility: hidden;
    transition: visibility 0s linear .3s,opacity .3s linear
}

.popover-filter.in {
    visibility: visible;
    opacity: .2;
    filter: alpha(opacity=20);
    transition-delay: 0s
}

.popover.left::before,.popover.left>.arrow::after {
    border-left-color: #f7765f;
    bottom: -20px
}

.popover.top>.arrow::after {
    border-top-color: #f7765f
}

.popover.right>.arrow::after {
    border-right-color: #f7765f
}

.popover-primary {
    background-color: #6dd3d6;
    color: #fff
}

.popover-primary .popover-title {
    background-color: #6dd3d6;
    color: rgba(0,0,0,.56)
}

.popover-primary.bottom .arrow:after {
    border-bottom-color: #6dd3d6
}

.popover-primary.left>.arrow::after {
    border-left-color: #6dd3d6
}

.popover-primary.top>.arrow::after {
    border-top-color: #6dd3d6
}

.popover-primary.right>.arrow::after {
    border-right-color: #6dd3d6
}

.popover-info {
    background-color: #6ec7e0;
    color: #fff
}

.popover-info .popover-title {
    background-color: #6ec7e0;
    color: rgba(0,0,0,.56)
}

.popover-info.bottom .arrow:after {
    border-bottom-color: #6ec7e0
}

.popover-info.left>.arrow::after {
    border-left-color: #6ec7e0
}

.popover-info.top>.arrow::after {
    border-top-color: #6ec7e0
}

.popover-info.right>.arrow::after {
    border-right-color: #6ec7e0
}

.popover-success {
    background-color: #86d9ab;
    color: #fff
}

.popover-success .popover-title {
    background-color: #86d9ab;
    color: rgba(0,0,0,.56)
}

.popover-success.bottom .arrow:after {
    border-bottom-color: #86d9ab
}

.popover-success.left>.arrow::after {
    border-left-color: #86d9ab
}

.popover-success.top>.arrow::after {
    border-top-color: #86d9ab
}

.popover-success.right>.arrow::after {
    border-right-color: #86d9ab
}

.popover-warning {
    background-color: #fcd27b;
    color: #fff
}

.popover-warning .popover-title {
    background-color: #fcd27b;
    color: rgba(0,0,0,.56)
}

.popover-warning.bottom .arrow:after {
    border-bottom-color: #fcd27b
}

.popover-warning.left>.arrow::after {
    border-left-color: #fcd27b
}

.popover-warning.top>.arrow::after {
    border-top-color: #fcd27b
}

.popover-warning.right>.arrow::after {
    border-right-color: #fcd27b
}

.popover-danger {
    background-color: #f7765f;
    color: #fff
}

.popover-danger .popover-title {
    background-color: #f7765f;
    color: rgba(0,0,0,.56)
}

.popover-danger.bottom .arrow:after {
    border-bottom-color: #f7765f
}

.popover-danger.left>.arrow::after {
    border-left-color: #f7765f
}

.popover-danger.top>.arrow::after {
    border-top-color: #f7765f
}

.popover-danger.right>.arrow::after {
    border-right-color: #f7765f
}

.popover-primary.bs-tether-element-attached-bottom::after,.popover-primary.bs-tether-element-attached-bottom::before,.popover-primary.popover-top::after,.popover-primary.popover-top::before {
    border-top-color: #6dd3d6!important
}

.popover.popover-info.bs-tether-element-attached-top::after,.popover.popover-info.bs-tether-element-attached-top::before,.popover.popover-info.popover-bottom::after,.popover.popover-info.popover-bottom::before {
    border-bottom-color: #6ec7e0!important
}

.popover-success.bs-tether-element-attached-left::after,.popover-success.bs-tether-element-attached-left::before,.popover-success.popover-right::after,.popover-success.popover-right::before {
    border-right-color: #86d9ab!important
}

.popover.popover-warning.bs-tether-element-attached-right::after,.popover.popover-warning.bs-tether-element-attached-right::before,.popover.popover-warning.popover-left::after,.popover.popover-warning.popover-left::before {
    border-left-color: #fcd27b!important
}

.popover.popover-danger.bs-tether-element-attached-right::after,.popover.popover-danger.bs-tether-element-attached-right::before,.popover.popover-danger.popover-left::after,.popover.popover-danger.popover-left::before {
    border-left-color: #f7765f!important
}

.popover.bs-tether-element-attached-top::after,.popover.bs-tether-element-attached-top::before,.popover.popover-bottom::after,.popover.popover-bottom::before {
    border-bottom-color: #fff!important
}

.nav .nav-item .nav-link:focus,.nav .nav-item .nav-link:hover {
    background-color: transparent
}

.navbar {
    border: 0;
    font-size: 14px;
    transition: all .4s;
    -webkit-transition: all .4s;
    padding: 0;
    background: #fff;
    box-shadow: 0 6px 10px -4px rgba(0,0,0,.15)
}

.navbar .nav-link p,.navbar .navbar-brand {
    font-weight: 600;
    margin: 10px 0;
    font-size: 14px;
    color: #66615b;
    text-transform: uppercase
}

.navbar .nav-link i {
    font-size: 16px;
}

.navbar .nav-link [class^=fa] {
    top: 2px
}

.navbar .nav-link p {
    margin: 0;
    color: #9a9a9a!important;
    font-size: 12px;
    line-height: 1.5em;
    padding: 15px 0
}

.navbar .nav-link p:hover {
    color: #403d39!important
}

.navbar .navbar-nav .nav-item .nav-link {
    line-height: 1.6;
    margin: 15px 0;
    padding: 0 15px 2px;
    opacity: .8;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 400;
    color: #66615b;
    min-width: 85px
}

body:not(.logged) .navbar .navbar-nav .nav-item .nav-link{
   font-size: 15px !important;
   font-weight: 500;
}

.navbar .navbar-nav .nav-item.nav-item-icon .nav-link {
    padding-top: 10px;
    text-align: left;
}

@media screen and (min-width: 991px) {
    .navbar .navbar-nav .nav-item.nav-item-icon .nav-link{
        text-align: center;
    }
}

.navbar .navbar-nav .nav-item .nav-link.btn {
    margin: 15px 3px;
    padding: 9px
}

.navbar .navbar-nav .dropdown-menu {
    border-radius: 12px;
    margin-top: 1px
}

.navbar .navbar-collapse .nav-item .nav-link p {
    display: inline
}

.navbar .navbar-collapse .nav-item .dropdown-item i:not(.hio) {
    margin: 0 10px 0 5px;
    font-size: 18px;
    position: relative;
    top: 3px
}

.navbar .navbar-collapse.show .navbar-nav .nav-item {
    padding-right: 10px
}

.navbar .notification-bubble {
    right: 72px;
    padding: .2em .6em;
    position: absolute;
    top: 15px
}

.navbar .btn {
    margin: 15px 3px;
    font-size: 12px
}

.navbar .btn i {
    font-size: 14px;
    line-height: 13px
}

.navbar .btn-simple {
    font-size: 16px
}

.navbar .caret {
    left: 0;
    right: 0;
    margin-right: auto;
    margin-left: auto;
    position: absolute
}

.navbar.navbar-transparent {
    padding-top: 25px
}

.navbar .logo-container {
    margin-top: 5px
}

.navbar .logo-container .logo {
    overflow: hidden;
    border-radius: 50%;
    border: 1px solid #333;
    width: 50px;
    float: left
}

.navbar .logo-container .brand {
    font-size: 18px;
    color: #fff;
    line-height: 20px;
    float: left;
    margin-left: 10px;
    margin-top: 5px;
    width: 75px;
    height: 50px
}


.navbar-absolute {
    position: absolute;
    width: 100%;
    padding-top: 10px;
    z-index: 1029
}

.nav-open .nav .caret {
    border-bottom-color: #fff;
    border-top-color: #fff
}

.navbar-default .brand {
    color: #66615b!important
}

.navbar-default .navbar-nav .nav-item .nav-link:not(.btn) {
    color: #9a9a9a
}

.navbar-default .navbar-nav .active .nav-link,.navbar-default .navbar-nav .active .nav-link:not(.btn):focus,.navbar-default .navbar-nav .active .nav-link:not(.btn):hover,.navbar-default .navbar-nav .nav-item .nav-link:not(.btn):focus,.navbar-default .navbar-nav .nav-item .nav-link:not(.btn):hover {
    background-color: transparent;
    border-radius: 3px;
    color: #51bcda;
    opacity: 1;
    filter: alpha(opacity=100)
}

.navbar-default .navbar-nav .dropdown .nav-link:focus .caret,.navbar-default .navbar-nav .dropdown .nav-link:hover .caret {
    border-bottom-color: #51bcda;
    border-top-color: #51bcda
}

.navbar-default .navbar-nav .open .nav-link,.navbar-default .navbar-nav .open .nav-link:focus,.navbar-default .navbar-nav .open .nav-link:hover {
    background-color: transparent;
    color: #51bcda
}

.navbar-default .navbar-nav .navbar-toggle:focus,.navbar-default .navbar-nav .navbar-toggle:hover {
    background-color: transparent
}

.navbar-default:not(.navbar-transparent) .btn-default:hover {
    color: #51bcda;
    border-color: #51bcda
}

.red {
    color: red
}

.collapse .navbar-text {
    line-height: 55px
}

.navbar-default .navbar-brand {
    color: #66615b
}

.navbar-default .navbar-brand:focus,.navbar-default .navbar-brand:hover {
    color: #5e5e5e
}

.navbar-collapse.show .navbar-nav .nav-item {
    padding-right: 100px
}

.nav-tabs-navigation:last-child {
    border-bottom: 0 none
}

.nav-tabs-navigation:last-child .nav-stacked {
    border-right: 1px solid #f1eae0;
    font-size: 16px;
    font-weight: 600;
    padding: 20px 0
}

.nav-tabs-navigation:last-child .nav-stacked .nav-item .nav-link {
    padding: 7px 25px
}

.no-transition {
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    -ms-transition: none;
    transition: none
}


.hover-card {
    transition: all 0.2s ease-in-out;
 }
 
 .hover-card:hover {
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
 }
 
 .clickable-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.15) !important;
 }
 
 .groupBubble {
    border: 2px solid #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
 }
 
 .group-card .card {
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
 }
 
 .group-card .card:hover {
    border-color: rgba(0,0,0,0.1);
 }
 
 .group-card.deleting {
    pointer-events: none;
 }
 
 .delete-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.9);
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 14px;
    color: #666;
 }
 
 @media (max-width: 768px) {
    .group-card .card-body {
       padding: 1.5rem !important;
    }
    
    .group-card .card-title {
       font-size: 1rem;
    }
    
    .group-card .btn {
       font-size: 0.875rem;
       padding: 0.375rem 0.75rem;
    }
 }

.card {
    border-radius: 12px;
    box-shadow: 0 6px 10px -4px rgba(0,0,0,.15);
    background-color: #fff;
    color: #333;
    margin-bottom: 20px;
    position: relative;
    /* z-index: 1; */
    border: 0;
    -webkit-transition: transform 300ms cubic-bezier(.34,2,.6,1),box-shadow 200ms ease;
    -moz-transition: transform 300ms cubic-bezier(.34,2,.6,1),box-shadow 200ms ease;
    -o-transition: transform 300ms cubic-bezier(.34,2,.6,1),box-shadow 200ms ease;
    -ms-transition: transform 300ms cubic-bezier(.34,2,.6,1),box-shadow 200ms ease;
    transition: transform 300ms cubic-bezier(.34,2,.6,1),box-shadow 200ms ease
}

/* .card:not(.card-plain):hover {
    box-shadow: 0 12px 19px -7px rgba(0,0,0,.3)
} */

/* .card:not(.card-plain):hover {
    box-shadow: 0;
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    -moz-transform: translateY(0)
} */

.card.card-plain {
    background-color: transparent;
    box-shadow: none;
    border-radius: 0
}

.card .card-footer {
    padding: 15px;
    background: 0 0;
    border-top: 0 none
}

.card .card-footer .social-line .btn:first-child {
    border-radius: 0 0 0 6px
}

.card .card-footer .social-line .btn:last-child {
    border-radius: 0 0 6px 0
}

.card .card-block .card-footer {
    padding: 0
}

.card .card-block .card-description+.card-footer {
    padding-top: 10px
}

.card.card-register:hover,.card.no-transition:hover,.card.page-carousel:hover {
    box-shadow: 0 6px 10px -4px rgba(0,0,0,.15);
    transform: none;
    -webkit-transform: none;
    -ms-transform: none;
    -moz-transform: none
}

.card:not(.card-subtle) .card-header{
      border-radius: 12px 12px 0 0;
}
.card:not(.card-subtle) .card-header:first-child{
    border-radius: 12px 12px 0 0;
}
.card:not(.card-subtle) .card-footer:last-child {
    border-radius: 0 0 12px 12px;
 }

 .card.card-subtle .card-header{
    border-radius: 10px 10px 0 0;
 }
 .card.card-subtle .card-header:first-child{
    border-radius: 10px 10px 0 0;
 }
 .card.card-subtle .card-footer:last-child {
    border-radius: 0 0 10px 10px;
 }

.section-dark .card-profile.card-plain .card-title {
    color: #fff!important
}

.section-dark .card-profile.card-plain .card-description {
    color: rgba(255,255,255,.7)
}

.card-profile {
    margin-top: 30px;
    text-align: center
}

.card-profile .card-cover {
    height: 130px;
    background-position: center center;
    background-size: cover;
    border-radius: 12px 12px 0 0
}

.card-profile .card-block .card-title {
    margin-top: 5px!important
}

.card-profile .card-block .card-category {
    margin-bottom: 5px;
    margin-top: 5px
}

.card-profile .card-avatar {
    max-width: 120px;
    max-height: 120px;
    margin: -60px auto 0;
    border-radius: 50%;
    overflow: hidden
}

.card-profile .card-avatar img {
    max-width: 100%;
    height: auto
}

.card-profile .card-avatar.border-white {
    border: 4px solid #fff
}

.card-profile .card-avatar.border-gray {
    border: 4px solid #ccc
}

.section .card-profile {
    margin-top: 100px
}

.card-register {
    background-color: #ff8f5e;
    border-radius: 8px;
    color: #fff;
    max-width: 350px;
    margin: 120px 0 70px;
    min-height: 400px;
    padding: 30px;
    z-index: 1
}

.card-register .social-line .btn,.section-image .card-register {
    margin-top: 0
}

.card-register label {
    margin-top: 15px
}

.card-register .title {
    color: #b33c12;
    text-align: center
}

.card-register .btn {
    margin-top: 30px
}

.card-register .forgot {
    text-align: center
}

.footer {
    background-attachment: fixed;
    position: relative;
    line-height: 20px
}

.footer nav>ul {
    list-style: none;
    margin: 0;
    padding: 0;
    font-weight: 400
}

.footer nav>ul>li {
    display: inline-block;
    padding: 10px 15px;
    margin: 15px 3px;
    line-height: 20px;
    text-align: center
}

.footer nav>ul a:not(.btn) {
    color: #777;
    display: block;
    margin-bottom: 3px;
    line-height: 1.6;
    opacity: .8;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 600
}

.footer nav>ul a:not(.btn):focus,.footer nav>ul a:not(.btn):hover {
    color: #777;
    opacity: 1
}

.footer .copyright {
    color: #777;
    padding: 10px 0;
    font-size: 14px;
    margin: 15px 3px;
    line-height: 20px;
    text-align: center
}

.dropdown-menu {
    padding: 0
}

.show .dropdown-menu {
    opacity: 1;
    filter: alpha(opacity=100);
    visibility: visible
}

.dropdown-menu .divider {
    background-color: #f1eae0;
    margin: 0
}

.dropdown-menu .dropdown-header {
    color: #5b5b5b;
    font-size: 12px;
    padding: 8px 15px;
    background: #f9f9f9;
    border-bottom: 1px solid #d9d9d9
}

.dropdown-menu .no-notification {
    color: #9a9a9a;
    font-size: 1.2em;
    padding: 30px;
    text-align: center
}

.dropdown-menu .dropdown-item {
    padding: 0!important
}

.dropdown-menu .dropdown-item a {
    color: #66615b;
    font-size: 14px;
    padding: 10px 45px 10px 15px;
    clear: both;
    white-space: nowrap;
    width: 100%;
    display: block
}

.dropdown-menu .dropdown-item a img {
    margin-top: -3px
}

.dropdown-menu .dropdown-item a:focus,a:focus {
    outline: 0!important
}

.btn-group.select .dropdown-menu {
    min-width: 100%
}

.select .dropdown-menu .dropdown-item:first-child a {
    border-radius: 0;
    border-bottom: 0 none
}

.dropdown-menu .dropdown-item a:focus,.dropdown-menu .dropdown-item a:hover {
    color: #fff;
    opacity: 1;
    text-decoration: none
}

.dropdown-menu.dropdown-primary .dropdown-item:focus,.dropdown-menu.dropdown-primary .dropdown-item:hover {
    background-color: #6dd3d6
}

.dropdown-menu.dropdown-info .dropdown-item:focus,.dropdown-menu.dropdown-info .dropdown-item:hover {
    background-color: #6ec7e0
}

.dropdown-menu.dropdown-success .dropdown-item:focus,.dropdown-menu.dropdown-success .dropdown-item:hover {
    background-color: #86d9ab
}

.dropdown-menu.dropdown-warning .dropdown-item:focus,.dropdown-menu.dropdown-warning .dropdown-item:hover {
    background-color: #fcd27b
}

.dropdown-menu.dropdown-danger .dropdown-item:focus,.dropdown-menu.dropdown-danger .dropdown-item:hover {
    background-color: #f7765f
}

.dropdown-divider,.modal .modal-footer>div {
    margin: 0!important
}

.dropdown-divider-thick{
    border-top: 5px solid #e9ecef;
}

.btn-group.select.open {
    overflow: visible
}

.dropdown-menu-right {
    right: -2px;
    left: auto
}

@media (min-width:768px) {
    .navbar-form {
        margin-top: 21px;
        margin-bottom: 21px;
        padding-left: 5px;
        padding-right: 5px
    }

    .navbar-search-form {
        display: none
    }

    .dropdown-btn.show .dropdown-menu,.dropdown.show .dropdown-menu,.navbar-nav .dropdown-item.show .dropdown-menu {
        transform: translate3d(0,0,0);
        visibility: visible!important
    }

    .bootstrap-select .dropdown-menu {
        -webkit-box-shadow: none;
        box-shadow: none;
        -webkit-transition: all 150ms linear;
        -moz-transition: all 150ms linear;
        -o-transition: all 150ms linear;
        -ms-transition: all 150ms linear;
        transition: all 150ms linear
    }

    .dropup.show .dropdown-menu {
        -webkit-transform: translate3d(0,-10px,0);
        -moz-transform: translate3d(0,-10px,0);
        -o-transform: translate3d(0,-10px,0);
        -ms-transform: translate3d(0,-10px,0);
        transform: translate3d(0,-10px,0);
        opacity: 1;
        visibility: visible
    }

    .bootstrap-select .show .dropdown-menu,.dropup .dropdown-menu {
        transition: all .3s cubic-bezier(.215,.61,.355,1) 0s,opacity .3s ease 0s,height 0s linear .35s
    }

    .dropup .dropdown-menu {
        -webkit-transform: translate3d(0,30px,0);
        -moz-transform: translate3d(0,30px,0);
        -o-transform: translate3d(0,30px,0);
        -ms-transform: translate3d(0,30px,0);
        transform: translate3d(0,30px,0);
        opacity: 0;
        visibility: hidden;
        display: block
    }

    .bootstrap-select .show .dropdown-menu {
        transform: translate3d(0,0,0)
    }

    #dropdown-row .dropdown .dropdown-menu:before,.card-just-text .dropdown .dropdown-menu:before,.card.card-just-text .dropdown .dropdown-menu:before,.dropdown-btn .dropdown-menu:before,.navbar-nav li .dropdown-menu:before {
        border-bottom: 11px solid #f1eae0;
        border-left: 11px solid transparent;
        border-right: 11px solid transparent;
        content: "";
        display: inline-block;
        position: absolute;
        right: 12px;
        top: -11px
    }

    #dropdown-row .dropdown .dropdown-menu:before {
        left: 12px!important;
        right: auto
    }

    #dropdown-row .dropdown .dropdown-menu:after,.card-just-text .dropdown .dropdown-menu:after,.card.card-just-text .dropdown .dropdown-menu:after,.dropdown-btn .dropdown-menu:after,.navbar-nav li .dropdown-menu:after {
        border-bottom: 11px solid #fffcf5;
        border-left: 11px solid transparent;
        border-right: 11px solid transparent;
        content: "";
        display: inline-block;
        position: absolute;
        right: 12px;
        top: -10px
    }

    #dropdown-row .dropdown .dropdown-menu:after {
        left: 12px!important;
        right: auto
    }

    #dropdown-row .dropdown .dropdown-menu {
        left: 15px
    }

    .navbar-nav.navbar-right li .dropdown-menu:after,.navbar-nav.navbar-right li .dropdown-menu:before {
        left: auto;
        right: 12px
    }

    .footer:not(.footer-big) nav ul li:first-child {
        margin-left: 0
    }

    body>.navbar-collapse.collapse {
        display: none!important
    }
}

#navbar .dropdown-menu .dropdown-item {
    padding: 3px 1.5rem!important
}

.dropup .dropdown-menu:after,.dropup .dropdown-menu:before {
    border-top: 11px solid #dcd9d1;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    content: "";
    display: inline-block;
    position: absolute;
    right: 12px;
    bottom: -12px
}

.dropup .dropdown-menu:after {
    border-top: 11px solid #fffcf5;
    bottom: -11px
}

.dropdown .dropdown-toggle:after,.dropup .dropdown-toggle:after {
    margin-left: .105em
}

.dropdown-toggle::after {
    content: "\e969";
    font-family: heroicons-outline;
    border: 0!important;
    display: inline-block;
    vertical-align: top
}

.dropdown-notification .dropdown-notification-list li {
    border-bottom: 1px solid #f1eae0;
    color: #66615b;
    font-size: 16px;
    padding: 10px 5px;
    width: 330px
}

.dropdown-notification .dropdown-notification-list li a {
    color: #66615b;
    white-space: normal
}

.dropdown-notification .dropdown-notification-list li a .notification-text {
    padding-left: 40px;
    position: relative
}

.dropdown-notification .dropdown-notification-list li a .notification-text .label {
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -12px;
    left: 7px
}

.dropdown-notification .dropdown-notification-list li a .notification-text .message {
    font-size: .9em;
    line-height: .7;
    margin-left: 10px
}

.dropdown-notification .dropdown-notification-list li a .notification-text .time {
    color: #9a9a9a;
    font-size: .7em;
    margin-left: 10px
}

.dropdown-notification .dropdown-notification-list li a .read-notification {
    font-size: 12px;
    opacity: 0;
    position: absolute;
    right: 5px;
    top: 50%;
    margin-top: -12px
}

.dropdown-notification .dropdown-notification-list li:hover {
    background-color: #f0efeb;
    color: #66615b;
    opacity: 1;
    text-decoration: none
}

.dropdown-notification .dropdown-notification-list li:hover .read-notification {
    opacity: 1!important
}

.dropdown-notification .dropdown-footer {
    background-color: #e8e7e3;
    border-radius: 0 0 8px 8px
}

.dropdown-notification .dropdown-footer .dropdown-footer-menu {
    list-style: outside none none;
    padding: 0 5px
}

.dropdown-notification .dropdown-footer .dropdown-footer-menu li {
    display: inline-block;
    text-align: left;
    padding: 0 10px
}

.dropdown-notification .dropdown-footer .dropdown-footer-menu li a {
    color: #9c9b99;
    font-size: .9em;
    line-height: 35px
}

.nav-tabs-navigation {
    text-align: center;
    border-bottom: 1px solid #f1eae0;
    margin-bottom: 30px
}

.nav-tabs-navigation .nav>.nav-item>.nav-link {
    padding-bottom: 20px
}

.nav-tabs-wrapper {
    display: inline-block;
    margin-bottom: -6px;
    margin-left: 1.25%;
    margin-right: 1.25%;
    position: relative;
    width: auto
}

.nav-tabs {
    border-bottom: 0 none;
    font-size: 16px;
    font-weight: 600
}

.nav-tabs .nav-item .nav-link {
    border: 0;
    color: #a49e93;
    background-color: transparent
}

.nav-tabs .nav-item .nav-link.active,
.nav-tabs .nav-item .nav-link.active .card-title,
.nav-tabs .nav-item .nav-link:hover,
.card-header > .card-title  {
    color: #000000 !important
}

.nav-tabs .nav-item {
    color: #66615b;
    position: relative
}

.nav-tabs .nav-item .nav-link.active,.nav-tabs .nav-item .nav-link.active:focus,.nav-tabs .nav-item .nav-link.active:hover {
    background-color: transparent;
    border: 0
}

.nav-tabs .nav-item .nav-link.active:after,.nav-tabs .nav-item .nav-link.active:focus:after,.nav-tabs .nav-item .nav-link.active:hover:after {
    border-bottom: 11px solid #fff;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    content: "";
    display: inline-block;
    position: absolute;
    right: 40%;
    bottom: 5px
}

.nav-tabs .nav-item .nav-link.active:before,.nav-tabs .nav-item .nav-link.active:focus:before,.nav-tabs .nav-item .nav-link.active:hover:before {
    border-bottom: 11px solid #f1eae0;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    content: "";
    display: inline-block;
    position: absolute;
    right: 40%;
    bottom: 6px
}

.nav-tabs .nav-item.show .nav-link {
    background-color: transparent
}

.nav-tabs .dropdown-menu {
    margin-top: -6px;
    margin-left: -46px;
    border-radius: 8px
}

.nav-tabs .dropdown-menu .dropdown-item.active,.nav-tabs .dropdown-menu .dropdown-item:hover {
    color: #fff;
    background-color: #68b3c8
}

.nav-tabs .dropdown-menu :after,.nav-tabs .dropdown-menu :before {
    border-bottom: 11px solid #f1eae0;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    content: "";
    display: inline-block;
    position: absolute;
    right: 12px;
    top: -11px
}

.nav-tabs .dropdown-menu :after {
    border-bottom: 11px solid #fffcf5;
    top: -10px
}

.nav-pills .nav-item+.nav-link {
    margin-left: 0
}

.nav-pills .nav-item .nav-link {
    border: 1px solid #edf4f6;
    border-radius: 0;
    color: #4a4a4a;
    font-weight: 500;
    padding: 10px 25px;
    background: #fff;
    margin-top: -1px
}

.nav-pills .nav-item.active .nav-link,.nav-pills .nav-item.active .nav-link:focus,.nav-pills .nav-item.active .nav-link:hover {
    background-color: #086886;
    color: #fff
}

.nav-pills .nav-item:first-child .nav-link {
    margin-top: 0
}

.nav-pills .nav-item .nav-link.active {
    background-color: #086886;
    color: #fff !important;
}

.nav-pills.nav-pills-vertical .nav-item:first-child .nav-link {
    border-radius: 6px 6px 0 0;
}

.nav-pills.nav-pills-vertical .nav-item:last-child .nav-link {
    border-radius: 0 0 6px 6px;
}

.nav-pills.nav-pills-vertical {
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.15);
    border-radius: 6px
}

.modal-header {
    border-bottom: 1px solid #ddd;
    padding: 20px;
    text-align: center;
    display: block!important;
}

.modal-header.no-border-header {
    border-bottom: 0 none!important;
}

.modal-header.no-border-header .modal-title {
    margin-top: 20px
}

.modal-header button.close {
    right: 17px;
    position: absolute;
    top: 17px
}

.modal-content {
    border: 0;
    border-radius: 20px;
    box-shadow: 0 50px 100px 0 rgba(0,0,0,.5);
    background-color: rgba(255, 255, 255, 1);
    backdrop-filter: blur(10px);
}

.modal-content .modal-header h6 {
    margin-top: 10px
}

.modal-dialog {
    padding-top: 90px
}

.modal-dialog.modal-lg {
    padding-top: 10px
}

@media (min-width:576px) and (max-width:992px) {
    .modal-dialog.modal-lg {
        max-width: 720px!important
    }
}

@media (max-width:575px) {
    .modal-dialog .modal-body {
        padding: 20px 30px
    }
}

@media (max-width:442px) {
    .modal-dialog .modal-body {
        padding: 20px
    }
}

.modal-body {
    padding: 20px 50px;
    color: #000
}

.modal-footer {
    border-top: 1px solid #f6f6f6;
    padding: 0;
    background: #fbfbfb;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px
}

.modal-footer.no-border-footer {
    border-top: 0 none
}

.modal-footer .left-side,.modal-footer .right-side,.toggle-view+i {
    display: inline-block;
    text-align: center;
    width: 49%
}

.modal-footer .btn-link {
    padding: 20px;
    width: 100%
}

.modal-footer .divider {
    background-color: #ddd;
    display: inline-block;
    height: 63px;
    margin: 0-3px;
    width: 1px
}

.modal.fade .modal-dialog,.modal.in .modal-dialog {
    transform: none;
    -webkit-transform: none;
    -moz-transform: none
}

.modal-backdrop.in {
    opacity: .25
}

.modal-register .modal-footer {
    text-align: center;
    margin-bottom: 25px;
    padding: 20px 0 15px
}

.modal-header:after,.modal-header:before {
    display: table;
    content: " "
}

@media (max-width:767px) {
    body {
        position: relative;
        font-size: .85rem
    }

    h6 {
        font-size: 1em
    }

    .navbar .container {
        left: 0;
        width: 100%;
        -webkit-transition: all .33s cubic-bezier(.685,.0473,.346,1);
        -moz-transition: all .33s cubic-bezier(.685,.0473,.346,1);
        -o-transition: all .33s cubic-bezier(.685,.0473,.346,1);
        -ms-transition: all .33s cubic-bezier(.685,.0473,.346,1);
        transition: all .33s cubic-bezier(.685,.0473,.346,1);
        position: relative
    }

    .navbar .navbar-nav .dropdown-menu {
        height: 400px;
        overflow-y: scroll
    }
    @-webkit-keyframes fadeIn {
        0%{opacity: 0}

    to {
        opacity: 1
    }
}

@-moz-keyframes fadeIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.navbar-nav {
    margin: 1px -15px
}

.navbar-nav .open .dropdown-menu>li>a {
    padding: 15px 15px 5px 50px
}

.navbar-nav .open .dropdown-menu>li:first-child>a {
    padding: 5px 15px 5px 50px
}

.navbar-nav .open .dropdown-menu>li:last-child>a {
    padding: 15px 15px 25px 50px
}

[class*=navbar-] .navbar-nav .active>a,[class*=navbar-] .navbar-nav .active>a:focus,[class*=navbar-] .navbar-nav .active>a:hover,[class*=navbar-] .navbar-nav .navbar-nav .open .dropdown-menu>li>a:active,[class*=navbar-] .navbar-nav .open .dropdown-menu>li>a,[class*=navbar-] .navbar-nav .open .dropdown-menu>li>a:focus,[class*=navbar-] .navbar-nav .open .dropdown-menu>li>a:hover,[class*=navbar-] .navbar-nav>li>a,[class*=navbar-] .navbar-nav>li>a:focus,[class*=navbar-] .navbar-nav>li>a:hover {
    color: #fff
}

[class*=navbar-] .navbar-nav .open .dropdown-menu>li>a:focus,[class*=navbar-] .navbar-nav .open .dropdown-menu>li>a:hover,[class*=navbar-] .navbar-nav .open .dropdown-menu>li>a:not(.btn),[class*=navbar-] .navbar-nav>li>a:focus,[class*=navbar-] .navbar-nav>li>a:hover,[class*=navbar-] .navbar-nav>li>a:not(.btn) {
    opacity: .7;
    background: 0 0
}

[class*=navbar-] .navbar-nav.navbar-nav .open .dropdown-menu>li>a:active {
    opacity: 1
}

[class*=navbar-] .navbar-nav .dropdown>a:hover .caret {
    border-bottom-color: #777;
    border-top-color: #777
}

[class*=navbar-] .navbar-nav .dropdown>a:active .caret {
    border-bottom-color: #fff;
    border-top-color: #fff
}

.dropdown-menu {
    display: none
}

.navbar-fixed-top {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.btn.dropdown-toggle {
    margin-bottom: 0
}

.table-responsive {
    width: 100%;
    margin-bottom: 15px;
    overflow-x: scroll;
    overflow-y: hidden;
    border: 1px solid #ddd;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    -webkit-overflow-scrolling: touch
}}

@media screen and (max-width:991px) {
    .navbar-collapse {
        position: fixed;
        display: block;
        top: 0;
        height: 100%;
        width: 300px;
        right: 0;
        z-index: 1032;
        visibility: visible;
        background-color: #999;
        overflow-y: visible;
        border-top: none;
        text-align: left;
        border-left: 1px solid #ccc5b9;
        padding-right: 0;
        padding-left: 40px;
        padding-top: 15px;
        -webkit-transform: translate3d(300px,0,0);
        -moz-transform: translate3d(300px,0,0);
        -o-transform: translate3d(300px,0,0);
        -ms-transform: translate3d(300px,0,0);
        transform: translate3d(300px,0,0);
        -webkit-transition: all .33s cubic-bezier(.685,.0473,.346,1);
        -moz-transition: all .33s cubic-bezier(.685,.0473,.346,1);
        -o-transition: all .33s cubic-bezier(.685,.0473,.346,1);
        -ms-transition: all .33s cubic-bezier(.685,.0473,.346,1);
        transition: all .33s cubic-bezier(.685,.0473,.346,1)
    }

    .navbar-collapse ul {
        position: relative;
        z-index: 3;
        height: 95%
    }

    .navbar-collapse .navbar-nav>.nav-item:last-child {
        border-bottom: 0
    }

    .navbar-collapse .navbar-nav>.nav-item>.nav-link {
        margin: 0;
        color: #9a9a9a!important;
        text-transform: uppercase;
        font-weight: 600;
        font-size: 12px;
        line-height: 1.5em;
        padding: 15px 0
    }

    .navbar-collapse .navbar-nav>.nav-item>.nav-link:active,.navbar-collapse .navbar-nav>.nav-item>.nav-link:hover {
        color: #403d39!important
    }

    .navbar-collapse.has-image::after,.navbar-collapse::after {
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        position: absolute;
        display: block;
        content: "";
        z-index: 1
    }

    .navbar-collapse::after {
        background-color: #fffcf5;
        background-image: linear-gradient(to bottom,transparent 0,rgba(112,112,112,0) 60%,rgba(186,186,186,.15) 100%)
    }

    .navbar-collapse.has-image::after {
        background-color: rgba(17,17,17,.8)
    }

    .nav-open .navbar-collapse {
        -webkit-transform: translate3d(0,0,0);
        -moz-transform: translate3d(0,0,0);
        -o-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0)
    }

    .nav-open .wrapper {
        left: 0
    }

    .nav-open .navbar-translate,.nav-open .wrapper {
        -webkit-transform: translate3d(-300px,0,0);
        -moz-transform: translate3d(-300px,0,0);
        -o-transform: translate3d(-300px,0,0);
        -ms-transform: translate3d(-300px,0,0);
        transform: translate3d(-300px,0,0)
    }

    .dropdown .dropdown-menu:after,.dropdown .dropdown-menu:before,.dropdown.show .dropdown-menu:after,.dropdown.show .dropdown-menu:before,.wrapper .navbar-collapse {
        display: none
    }

    .fixed-top .navbar-collapse {
        background-color: #ff8f5e;
        float: left
    }

    .dropdown .dropdown-menu,.dropdown.show .dropdown-menu {
        background-color: transparent;
        border: 0;
        transition: none;
        -webkit-box-shadow: none;
        box-shadow: none;
        width: auto;
        border-radius: 0
    }

    .dropdown .dropdown-menu .dropdown-item:focus,.dropdown .dropdown-menu .dropdown-item:hover,.dropdown.show .dropdown-menu .dropdown-item:focus,.dropdown.show .dropdown-menu .dropdown-item:hover {
        background-color: transparent;
        border-radius: 0
    }

    .dropdown .dropdown-menu .dropdown-item a:focus,.dropdown .dropdown-menu .dropdown-item a:hover,.dropdown.show .dropdown-menu .dropdown-item a:focus,.dropdown.show .dropdown-menu .dropdown-item a:hover {
        color: #403d39
    }

    .dropdown .dropdown-menu {
        display: none
    }

    .dropdown.show .dropdown-menu {
        display: block
    }

    .wrapper {
        -webkit-transition: all .33s cubic-bezier(.685,.0473,.346,1);
        -moz-transition: all .33s cubic-bezier(.685,.0473,.346,1);
        -o-transition: all .33s cubic-bezier(.685,.0473,.346,1);
        -ms-transition: all .33s cubic-bezier(.685,.0473,.346,1);
        transition: all .33s cubic-bezier(.685,.0473,.346,1);
        left: 0;
        background-color: #fff
    }
}

.table-condensed>tbody>tr>td,.table-condensed>tbody>tr>th,.table-condensed>tfoot>tr>td,.table-condensed>tfoot>tr>th,.table-condensed>thead>tr>td,.table-condensed>thead>tr>th {
    padding: 1px;
    text-align: center;
    z-index: 1;
    cursor: pointer
}

.toggle-view+i {
    position: absolute;
    right: 6px;
    bottom: 1px;
    z-index: 2000;
    height: 37px;
    width: 32px;
    display: block;
    font-size: 21px;
    line-height: 36px
}

input:-webkit-autofill {
    -webkit-animation-name: autofill;
    -webkit-animation-fill-mode: both
}


input.form-control:not(.form-control-sm),select.form-control:not(.form-control-sm) {
    font-size: .9rem;
    line-height: 1.4;
    height: calc(1.5em + .75rem + 5px)
}

.nav-open .mobile-overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(255,255,255,.3);
    -webkit-backdrop-filter: blur(.5px);
    backdrop-filter: blur(.5p)
}

.nav-open body {
    height: 100%;
    overflow: hidden
}

.ios-safe {
    padding-right: env(safe-area-inset-right);
    padding-left: env(safe-area-inset-left)
}

.navbar .navbar-brand {
    padding: 0 15px
}

.navbar .wrapper {
    width: auto
}

.navbar-brand img {
    max-width: 200px
}

.navbar-collapse::after {
    background-color: #b63a14
}

.navbar-collapse {
    min-height: 100%
}

.nav-item .badge {
    position: absolute;
    top: 6px;
    left: calc(100% - 25px);
    font-size: 12px;
    border-radius: 50px;
    padding: 2px 6px
}

.card-header-tabs .nav-item h5 {
    font-size: 16px;
    display: inline
}

.card-header-tabs {
    width: 100%;
    overflow-x: auto;
    scroll-behavior: smooth;
    overflow-y: hidden;
    z-index: 1;
    position: relative;
    margin-bottom: -14px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.card-header-tabs::-webkit-scrollbar {
    display: none;
    height: 0;
    width: 0;
}

.nav-item .badge.inline {
    position: relative;
    left: auto;
    top: auto;
    font-size: 12px;
    border-radius: .25rem;
    padding: 3px 6px;
    vertical-align: text-bottom;
    display: inline-block
}

.nav-link:not(.active)>.badge {
    opacity: .7
}

.nav-link.active>.badge,.nav-link:hover>.badge {
    opacity: 1
}

@media (max-width:991px) {
    .navbar .wrapper {
        width: 100%
    }

    .dropdown .dropdown-menu,.dropdown.show .dropdown-menu {
        background-color: #fff
    }

    .dropdown.dropdown-config .dropdown-menu>a {
        font-size: 12px!important
    }
}

@media (max-width:575px) {

    .dropdown.dropdown-config .dropdown-toggle {
        padding-right: .2em;
        padding-left: .2em
    }
}

@media (max-width: 575px) {
    .nopad-xs {
        padding: 0;
    }
}

@media (min-width: 576px) and (max-width: 767px) {
    .nopad-sm {
        padding: 0 !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .nopad-md {
        padding: 0 !important;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .nopad-lg {
        padding: 0 !important;
    }
}

@media (min-width: 1200px) {
    .nopad-xl {
        padding: 0 !important;
    }
}

/* .custom-file {
    overflow: hidden
} */

.tox.tox-tinymce{
    border-radius: 5px;
}

.custom-file-label {
    line-height: 25px
}

.custom-file-label.selected {
    white-space: nowrap
}

#invoiceSettings .input-group-text {
    font-size: .9rem
}

.custom-control {
    line-height: 175%
}

.form-control::placeholder {
    color: #a9a7a7
}

.nav-tabs .nav-item .nav-link.active::before,.nav-tabs .nav-item .nav-link.active:focus::before,.nav-tabs .nav-item .nav-link.active:hover::before {
    border-bottom: 11px solid #e0e0e0;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    content: "";
    display: inline-block;
    position: absolute;
    right: 40%;
    bottom: 1px
}

.nav-tabs .nav-item .nav-link.active::after,.nav-tabs .nav-item .nav-link.active:focus::after,.nav-tabs .nav-item .nav-link.active:hover::after {
    border-bottom: 11px solid #fff;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    content: "";
    display: inline-block;
    position: absolute;
    right: 40%;
    bottom: -1px
}

.card .card-footer {
    background: #f0f4f6;
}

.navbar-collapse .navbar-nav>.nav-item>.nav-link.text-white {
    color: #fff!important
}

.navbar-default .navbar-nav .nav-item .nav-link:not(.btn):not(.text-white) {
    color: #fff!important
}

.footer-sticky a,.navbar-default .navbar-nav .nav-item .nav-link.text-white:hover {
    color: #fff!important
}

.nav-pills .nav-item .nav-link {
    padding: 10px 1rem
}

.popover {
    background-color: #cb3333;
    text-decoration: none
}

.popover .popover-body,.tooltip .tooltip-inner {
    color: rgba(255,255,255,.9);
    background-color: #cb3333;
    box-shadow: 1px 1px 6px rgba(0,0,0,.4);
    text-align: left;
    border-radius: 4px;
    padding: .4rem .55rem;
    line-height: 120%;
    font-weight: 300;
    font-size: 12px
}

.bs-popover-auto[x-placement^=right] .arrow::after,.bs-popover-right .arrow::after,.bs-tooltip-auto[x-placement^=right] .arrow::before,.bs-tooltip-right .arrow::before {
    border-right-color: #cb3333
}

.bs-popover-auto[x-placement^=bottom] .arrow::after,.bs-popover-bottom .arrow::after,.bs-tooltip-auto[x-placement^=bottom] .arrow::before,.bs-tooltip-bottom .arrow::before {
    border-bottom-color: #cb3333
}

.bs-popover-auto[x-placement^=top] .arrow::after,.bs-popover-top .arrow::after,.bs-tooltip-auto[x-placement^=top] .arrow::before,.bs-tooltip-top .arrow::before {
    border-top-color: #cb3333
}

.bs-popover-auto[x-placement^=left] .arrow::after,.bs-popover-left .arrow::after,.bs-tooltip-auto[x-placement^=left] .arrow::before,.bs-tooltip-left .arrow::before {
    border-left-color: #cb3333
}

.bs-donebutton {
    padding: 0
}

.bs-donebutton .btn {
    padding: 5px!important;
    border: 0!important;
    background-color: #eae8e8!important;
    border-radius: 0!important
}

.bs-searchbox {
    border-bottom: 1px solid #ccc
}

.bs-searchbox .form-control::placeholder {
    color: #595959
}

.pill-left {
    border-radius: 30px 0 0 30px !important;
}

.pill-right {
    border-radius: 0 30px 30px 0 !important;
}

.btn.btn-square {
    border-radius: 6px;
}

.btn-primary {
    background-color: #417889;
    border-color: #417889
}

.btn-primary.active,.btn-primary:active,.btn-primary:focus,.btn-primary:hover,.show>.btn-primary.dropdown-toggle {
    background-color: #356574;
    border-color: #356574
}

.btn-primary:not(:disabled):not(.disabled).active,.btn-primary:not(:disabled):not(.disabled):active,.show>.btn-primary.dropdown-toggle {
    background-color: #32606e;
    border-color: #32606e
}

.btn-secondary {
    color: #fff;
    background-color: #819399;
    border-color: #819399;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.btn-secondary:hover {
    color: #fff;
    background-color: #758387;
    border-color: #758387;
}

.btn-secondary:focus,.btn-warning.active,.btn-warning:active,.btn-warning:focus {
    color: #fff!important
}

.btn-primary.disabled,.btn-primary:disabled {
    color: #fff;
    background-color: #4e7f8e;
    border-color: #4e7f8e;
}

.btn.btn-icon {
    text-transform: uppercase;
    font-size: 14px;
    padding: 8px 14px
}

.btn.btn-icon [class*="hio"]:not(.by-stack-1x):not(.by-stack-2x) {
    font-size: 150%;
    line-height: 0;
    margin-top: 0;
    display: inline-block;
    position: relative;
    opacity: 0.5;
    transition: opacity 0.2s ease;
    padding-right: 2px;
}
.btn.btn-icon:hover [class*="hio"]:not(.by-stack-1x):not(.by-stack-2x){
    opacity: 1;
}

.btn.btn-icon.btn-lg {
    text-transform: uppercase;
    line-height: 16px;
    font-size: 13px;
    padding: 13px 14px
}

.btn.btn-icon.btn-lg [class*="hio"] {
    font-size: 200%;
    display: inline-block;
    top: 7px;
    right: 3px
}

.btn.btn-icon.btn-sm {
    font-size: 12px;
    padding: 5px 14px
}

.btn.btn-icon.btn-sm [class*="hio"] {
    font-size: 170%;
    display: inline-block;
    right: 4px;
    margin-right: 0
}

.btn-search {
    border-radius: 0 3px 3px 0!important;
    border-color: #ccc
}

.input-group #homeSearch {
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out
}

.input-group.input-group-focus .btn-search {
    border-color: #6c757d
}

.input-group.input-group-focus #homeSearch {
    box-shadow: inset 0 0 7px rgba(0,0,0,.19)
}

#homeSearch {
    border-radius: 30px 0 0 30px !important;
}

#homeSearch + .input-group-append .btn {
    border-radius: 0 30px 30px 0 !important;
}

.navbar .nav-link i {
    right: 0
}

.btn.btn-icon i {
    -webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -ms-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    transition: all 200ms linear
}

.btn-group .btn > i {
    /* vertical-align: top; */
    font-size: 120%;
    /* margin-right: 5px; */
    /* line-height: 22px;
    margin-top: 1px */
}

.btn-group .btn+.btn,.btn-group .btn+.btn-group,.btn-group .btn-group+.btn,.btn-group .btn-group+.btn-group {
    margin-left: 1px
}

.btn-special-home * {
    transition: all 300ms ease
}

.btn.btn-special-home,.btn.btn-special-home:active,.btn.btn-special-home:hover,.btn.btn-special-home:visited {
    background-color: transparent;
    border: 0;
    padding: 0;
    white-space: normal!important;
    word-wrap: break-word;
    color: #303030
}

.btn.btn-special-home:active,.btn.btn-special-home:hover,.btn.btn-special-home:visited {
    color: inherit
}

.btn.btn-special-home i[class*="hio"] {
    display: block;
    color: #0c7c9d;
    border: .5px solid #c8dbe1;
    border-radius: 100px;
    font-size: 40px;
    padding: 14px 10px;
    clear: both;
    width: 70px;
    margin: 0 auto 5px;
    background-color: rgba(255,255,255,.93);
    box-shadow: 1px 1px 10px -2px rgba(23,142,178,.11)
}

.btn.btn-special-home span {
    display: block;
    height: 36px;
    overflow: hidden;
    line-height: 16px;
    padding-top: 5px;
    text-align: center;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .6px
}

.btn.btn-special-home.btn-sm span {
    font-size: 11px;
    padding-top: 4px;
    min-height: 30px;
    height: auto;
    line-height: 12px
}

.btn.btn-special-home:hover i[class*="hio"] {
    background-color: #0b6784;
    color: #fff
}

.btn.btn-special-home.btn-sm {
    max-width: 150px;
    padding: 3px 0
}

.btn.btn-special-home.btn-sm i[class*="hio"] {
    width: 50px;
    padding: 9px 4px;
    font-size: 28px;
    margin-bottom: 0;
    text-align: center;
}

.btn-special-home > .badge{
    display: inline-block !important;
    height: 20px !important;
    min-width: 20px !important;
    padding: 0 2px;
    line-height: 11px !important;
    position: absolute;
    border-radius: 30px;
    min-height: auto !important;
    top: 12px;
    font-size: 12px !important;
    left: 59%;
 }

 .btn.btn-special-home.btn-special-alt i[class*="hio"] {
	display: block;
	color: #fff;
	border: 1px solid #fff;
	border-radius: 100px;
	clear: both;
	margin: 0 auto 5px;
	background-color: rgba(255, 255, 255, 0.19);
	box-shadow: 1px 1px 10px -2px rgba(23, 142, 178, 0), inset 3px 3px 5px rgba(255, 255, 255, 0.11), inset -3px 3px 10px rgba(255, 255, 255, 0);
}

.btn.btn-special-home.btn-special-alt {
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255, 255, 255, 0.21);
    color: #fff;
    backdrop-filter: blur(10px);
    transition: all .2s ease;
    box-shadow: 0px 5px 4px rgba(0, 0, 0, 0.1);
}

.btn.btn-special-home.btn-special-alt:hover {
    background: rgba(255,255,255,.25);
    border: 1px solid rgba(255,255,255,.5);
    color: #fff;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
}

.btn.btn-special-home.btn-special-alt:hover > i {
    background-color: transparent;
    color: #414141;
    box-shadow: 1px 1px 10px -2px rgba(0, 0, 0, 0), inset 30px 30px 10px rgb(255, 255, 255),inset -10px -10px 10px rgb(255, 255, 255);
    transform: scale(1.1);
}

div.mobile-menu .btn-special-home > .badge{
    display: inline-block !important;
    position: absolute;
    top: 10px;
    left: 65%;
    border-radius: 30px;
    height: 20px !important;
    line-height: 19px !important;
    width: auto !important;
    min-width: 20px !important;
    letter-spacing: inherit;
    padding: 0 2px;
    font-size: 11px !important;
 }

 div.mobile-menu .btn-special-home:hover > .badge{
    top: 10px;
    left: 65%;
    box-shadow: none;
    transform: scale(1);
 }

 .mobile-menu>.row {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.mobile-menu .btn {
    max-width: 100%!important;
    font-size: 25px !important;
    height: 59px !important;
    border-right: 1px solid #ccc !important;
    padding: 0!important;
    margin: 0!important;
    border-radius: 0!important;
    color: #000 !important;
}

.mobile-menu .btn:last-child {
    border: 0!important;
}

.mobile-menu .btn:active,.mobile-menu .btn:hover {
    background-color: rgba(255,255,255,.1)!important;
    border-radius: 0!important;
    border: 0 !important;
    border-right: 1px solid #ccc !important;
    box-shadow: none !important;
}

.mobile-menu .btn>span {
    display: block!important;
    font-size: 9px;
    padding: 4px 0 0 !important;
    min-height: initial!important;
    height: auto !important;
    line-height: 10px !important;
}

.mobile-menu .btn i {
    border: 0!important;
    border-radius: 0!important;
    padding: 3px 0 0!important;
    clear: both;
    width: 100%!important;
    margin: 0 auto 5px!important;
    background-color: transparent!important;
    font-size: 25px!important;
    box-shadow: none!important;
    color: #0b6784 !important;
    border: 0 !important;
}

.mobile-menu .btn:active i,.mobile-menu .btn:hover i {
    color: #22809c!important;
    transform: scale(1) !important;
    box-shadow: none !important;
}


.btn-special-home:hover > .badge{
 top: 11px;
 left: 61%;
 box-shadow: -2px 5px 6px 0 rgba(0, 0, 0, 0.4);
 transform: scale(1.2);
}

@media (max-width:575px) {
    .btn.btn-special-home.btn-sm {
        margin-top: 20px;
        margin-bottom: 0;
        max-width: 49%
    }

    .btn.btn-special-home.btn-sm i[class*="hio"] {
        width: auto;
        padding: 3px;
        font-size: 30px;
        display: block;
        margin: 4px;
        border-radius: 5px
    }

    .btn.btn-special-home.btn-sm span {
        height: auto;
        min-height: 30px;
        display: block;
        padding: 0 10px;
        font-size: 10px
    }
}

.line-clamp, .line-clamp-1 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}
.line-clamp-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;   
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}
.line-clamp-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
}

.page-title h3 {
    line-height: 1.8rem
}

.page-title p {
    line-height: 120%
}

.page-title small {
    display: inline-block;
    line-height: 16px;
    margin-bottom: 10px;
    margin-top: 10px
}

.badge-danger,.btn-danger {
    background-color: #d25538;
    border-color: #d25538;
}


.btn-danger:not(:disabled):not(.disabled).active,
.btn-danger:not(:disabled):not(.disabled):active,
.show>.btn-danger.dropdown-toggle {
    background-color: #b64329;
    border-color: #b64329;
}

.btn-danger.active,
.btn-danger:active,
.btn-danger:focus,
.btn-danger:hover,
.show>.btn-danger.dropdown-toggle,
.dropdown-item.btn-danger:hover {
    background-color: #b64329 !important;
    color: #fff !important;
    border-color: #b64329;
}

.portal-table-price {
    width: 120px
}

.status-badge.d-block {
    max-width: 150px !important;
}

.status-badge.d-block:not(.mx-auto) {
    margin-left: auto;
}

@media (max-width:540px) {
    .portal-table-price {
        width: 75px!important
    }

    .status-badge.badge {
        white-space: normal!important;
        word-wrap: break-word;
        word-break: normal;
        margin: 0;
        padding: 1px 3px;
        display: block!important;
        line-height: 11px
    }
}

.dropdown.dropdown-config button::after,.dropdown.dropdown-country a::after {
    display: none
}

.dropdown.dropdown-config button {
    background-color: rgba(205, 205, 205, 0.1);
    text-align: center;
    border-radius: 10px;
    /* box-shadow: 2px 2px 5px rgba(3, 3, 3, 0.14); */
}

.dropdown.dropdown-config .dropdown-toggle {
    border: 1px solid #e2e6ea;
}

.dropdown.dropdown-config .dropdown-toggle i.hio{
    font-size: 1.3rem;
  }

.dropdown.dropdown-config button:hover {
    background-color: rgba(16, 69, 86, 0.06);
}

.dropdown.dropdown-config .dropdown-menu {
    margin-top: 2px;
    border-radius: 10px;
    border: 1px solid #ccc;
    overflow: hidden;
    box-shadow: 1px 1px 8px 1px rgba(0,0,0,.32);
    z-index: 1004;
}

.dropdown.dropdown-config .dropdown-menu>a {
    border-top: 1px solid #ccc;
    border-radius: 0;
    font-size: 12px!important;
    padding: .65rem 1.3rem .5rem 1.5rem!important;
    line-height: 16px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: row;
    gap: 2px;
}

.dropdown.dropdown-config .dropdown-toggle>[class*="hio"] {
    font-size: 25px;
    vertical-align: middle;
    margin-top: 0;
    margin-left: -4px;
    margin-right: -1px
}

.dropdown.dropdown-config .dropdown-menu>.dropdown-item>[class*="hio"] {
    font-size: 20px;
    vertical-align: middle;
    width: 23px;
    margin-left: -10px;
}

.dropdown.dropdown-config .dropdown-menu>a:first-child {
    border-top: 0 none
}

.dropdown.dropdown-config.show .dropdown-toggle {
    background-color: rgba(16, 69, 86, 0.06);
}

.dropdown.dropdown-inheader .dropdown-toggle {
    font-size: 1.3rem;
    font-weight: 700;
    padding: 2px 0 0 6px;
    color: #016186;
    text-decoration: underline
}

.bootstrap-select .bs-searchbox input,.dropdown.dropdown-inheader.show .dropdown-toggle {
    background-color: transparent!important
}

.dropdown-country a.dropdown-toggle,.dropdown-country a.dropdown-toggle:hover {
    color: #000
}

.bg-clip {
    background-clip: content-box
}

.input-group .form-control:first-child {
    border-right: 1px solid #6c757d
}

.input-group #clientPostPlace.form-control:first-child {
    border-right: 1px solid #ccc
}

.modal .modal-header {
    background-color: rgba(231, 231, 231, 0.37);
    color: #000;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    box-shadow: 0-2px 5px -1px rgba(0,0,0,.05) inset;
    border-bottom: none;
    padding: 12px 10px 10px
}

.modal .modal-footer {
    border-top: 1px solid rgba(56, 56, 56, 0.11);
}

.modal .modal-footer > .btn {
    margin: 0 !important;
    border-radius: 0 0 20px 20px !important;
}

.modal .modal-title {
    font-weight: 400M
}

.modal .modal-footer .btn {
    width: 100%;
    border-radius: 0;
    background-color: rgba(243, 246, 247, 0.85);
    border: 0;
    padding: 13px 5px;
    color: #043848;
    opacity: .8;
    font-size: .9rem;
    transition: all 100ms ease;
}

.modal .modal-footer .left-side .btn {
    border-left: none;
    border-right: 2px solid rgba(152, 152, 152, 0.41);
}

.modal .modal-footer .left-side .btn:hover {
    border-right: 2px solid rgba(152, 152, 152, 0.41);
}


.modal .modal-footer .left-side,.modal .modal-footer .right-side {
    width: 50%
}

.modal .modal-footer .right-side .btn {
    border-radius: 0 0 20px 0
}

.modal .modal-footer .left-side .btn {
    border-radius: 0 0 0 20px
}

.modal .modal-footer .btn:active,.modal .modal-footer .btn:hover,.modal .modal-footer .btn:visited {
    background-color: #ecf2f4;
    opacity: 1;
   
    color: #000;
    box-shadow: none!important
}

.modal.modal-alert .modal-body,.modal.modal-confirm .modal-body {
    min-height: 100px;
    justify-content: center;
    align-items: center;
    display: flex
}

.modal .modal-footer .right-side.single {
    width: 100%
}

.modal .modal-footer .right-side.single .btn {
    border-radius: 0 0 20px 20px
}

.modal-open .modal {
    -webkit-backdrop-filter: blur(1.5px);
    backdrop-filter: blur(1.5px)
}

.modal-backdrop.show {
    opacity: .4
}

#navbar-top {
    transition: all 100ms ease;
    min-height: 65px
}

body.modal-open #navbar-top {
    z-index: 1040
}

.full-modal .modal-dialog {
    margin-top: 0!important;
    margin-bottom: 0!important;
    padding-top: 5px;
    width: 700px;
    max-width: calc(100% - 20px)
}

.filepond--drip {
    background: #1e7795!important
}

.modal-body.pdfobject-container {
    padding: 0
}

.pdfobject {
    min-height: calc(100vh - 100px)
}

.full-modal .modal-content {
    min-height: calc(100vh - 50px)
}

#navbar-top .dropdown-menu::after {
    display: none!important;
    position: relative
}

#navbar-top .dropdown-menu {
    border-radius: 10px!important;
    background-color: #fff;
    /* overflow: hidden; */
    border: 0!important;
    box-shadow: 0 1px 7px 0 rgba(0,0,0,.35)
}

#navbar-top .dropdown-menu a,
#navbar-top .dropdown-menu a:focus,
#navbar-top .dropdown-menu a:visited {
    border-radius: 0;
    font-size: 12px;
    text-transform: uppercase;
    padding: 6px 30px 6px 20px!important
}

#navbar-top .dropdown-menu li:first-child > a, #navbar-top .dropdown-menu .dropdown-header:first-child{
    border-radius: 10px 10px 0 0 !important;
  }
  
#navbar-top .dropdown-menu li:last-child > a{
border-radius: 0 0 10px 10px !important;
}



#navbar-top .dropdown-menu a:not(.bg-*):active,
.dropdown.dropdown-config .dropdown-menu>a:not(.bg-*).active,
.dropdown.dropdown-config .dropdown-menu>a:not(.bg-*):active,
.dropdown.dropdown-config .dropdown-menu>a:not(.bg-*):hover {
    border-radius: 0;
    background-color: #ecf2f4!important;
    color: #053442 !important;
    box-shadow: none
}

.dropdown-menu a:active,
.dropdown-menu a:active:focus,
.dropdown-menu a:active:hover{
  background-color: #e5eef1;
  color: #16181b;
}

#navbar-top .dropdown-menu a.dropdown-item:not(.bg-*):hover{
    background-color: #ecf2f4;
    color: #053442;
}

#navbar-top .dropdown-menu a i {
    margin-left: -5px;
    width: 15px
}

#navbar-top .navbar-nav li .dropdown-menu::before {
    display: none!important
}

#navbar-top.fixed-top {
    padding-top: 0;
    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top)
}

#navbar-top .dropdown-menu {
    min-width: 200px
}

.name-icon {
    text-emphasis: none;
    font-style: normal;
    line-height: 20px;
    border-radius: 6px;
    border: .5px solid #fff;
    width: 24px;
    height: 20px;
    font-size: 14px!important;
    margin: 0 auto 9px!important;
    font-weight: 500;
    text-transform: none;
    text-align: center!important;
    background: #fff;
    color: #000
}

.card-title {
    font-size: 16px;
    line-height: 1.4em;
    font-weight: 600;
    color: #565656 !important
}

h3.card-title {
    font-size: 18px;
    line-height: 1.5em;
}


.tab-content .card-title {
    font-weight: 500
}

#navbar-primary .navbar-nav>.nav-item .badge,.createInvoice .card-title .badge.badge-special {
    color: #4d3a3a;
    background-color: rgba(255,217,5,.86);
    font-size: 10px;
    top: 17px;
    left: calc(100% - 30px);
    border-radius: 6px;
    vertical-align: middle;
    width: 30px
}

.sending-method label.btn.active::before {
    content: "";
    position: absolute;
    left: calc(50% - 7px);
    top: 100%;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;

    clear: both
}
.sending-method label.btn.btn-secondary.active::before {
    border-top: 7px solid #545b62;
}
.sending-method label.btn.btn-warning.active::before {
    border-top: 7px solid #c28200;
}
.sending-method label.btn.btn-danger.active::before {
    border-top: 7px solid #a23b24;
}
.sending-method label.btn.btn-success.active::before {
    border-top: 7px solid #1c7430;
}
.sending-method label.btn.btn-info.active::before {
    border-top: 7px solid #10707f;
}
.sending-method label.btn.btn-primary.active::before {
    border-top: 7px solid #32606e;
}
.sending-method label.btn.btn-light.active::before {
    border-top: 7px solid #c2c7cc;
}
.sending-method label.btn.btn-dark.active::before {
    border-top: 7px solid #171a1d;
}

.sending-method label.btn:first-child {
    border-radius: 4px 0 0 4px
}

.sending-method label.btn:last-child {
    border-radius: 0 4px 4px 0
}

.sending-method label.btn.active {
    box-shadow: inset 0 0 13px 0 rgba(0,0,0,.23)
}

.sending-method>.btn {
    justify-content: space-around;
    align-content: space-between;
    display: flex;
    align-items: center;
    line-height: 15px;
    min-height: 32px
}

@media screen and (min-width:990px) {
    #navbar-primary .navbar-nav>.nav-item .badge {
        top: 10px;
        right: 5px!important;
        width: 30px
    }

    #navbar-primary .nav-item.nav-item-icon:after {
        width: 0;
        -webkit-transition: width .4s;
        transition: width .4s;
        content: " ";
        height: 2px;
        background-color: #fff;
        position: relative;
        bottom: 5px;
        z-index: 2000;
        margin: 0 auto;
        display: block
    }

    #navbar-primary .nav-item.nav-item-icon.active:after,#navbar-primary .nav-item.nav-item-icon:hover:after {
        width: 70px
    }

    .nav-link.nav-link-icon {
        display: block;
        margin-top: 5px!important;
        margin-bottom: 5px!important
    }

    .nav-link.nav-link-icon i {
        display: block;
        text-align: center;
        font-size: 22px;
        margin-bottom: 8px
    }
}

@media screen and (max-width:991px) {
    body:not(.logged) {
        padding-top: 85px !important
    }
    body {
        padding-top: 65px!important
    }

    #navbar-primary.navbar-collapse {
        padding-left: 15px;
        padding-top: 0
    }

    #navbar-primary.navbar-collapse>.navbar-nav {
        height: 100%;
        overflow-y: scroll;
        overflow-x: visible;
        margin-bottom: 0;
        margin-top: 0;
        margin-right: 10px
    }

    #navbar-primary.navbar-collapse>.navbar-nav>li:first-child {
        margin-top: 15px
    }

    #navbar-primary.navbar-collapse>.navbar-nav>li:last-child>a {
        margin-bottom: 25px
    }

    #navbar-primary.navbar-collapse .navbar-nav .nav-item {
        margin-left: 15px;
        padding-right: 0
    }

    html.nav-open body {
        height: 100%;
        overflow: hidden
    }

    html.nav-open #navbar-primary {
        filter: blur(0)
    }

    #navbar-primary {
        filter: blur(2px)
    }

    .wrapper {
        background-color: transparent
    }

    .nav-link.nav-link-border:not(.nav-link-btn) {
        border: 1px solid rgba(255,255,255,.3)
    }

    .nav-link.nav-link-border {
        border-radius: 4px;
        margin-right: 5px!important;
        display: block;
        padding: 10px 15px!important;
        margin-left: -15px!important;
        margin-top: 5px!important
    }

    .nav-link.nav-link-border:hover {
        border-radius: 4px!important
    }

    .container {
        max-width: 100%!important
    }

}

.mainTitleRow {
    min-height: 125px
}

@media (max-width:575px) {
    .mainTitleRow {
        min-height: 85px
    }

    body {
        padding-top: 65px!important
    }
}

#loginForm,#loginForm #mobile {
    -webkit-transform: none!important;
    -moz-transform: none!important;
    -o-transform: none!important;
    transform: none!important
}

.spinner-btn i.by-spin {
    font-size: 140%;
    vertical-align: sub
}

body.modal-open.iosBugFix {
    position: fixed
}

u {
    text-decoration: none;
    border-bottom-style: dotted;
    border-bottom-color: inherit;
    border-bottom-width: 1px
}

body {
    padding-top: 86px;
    background-color: #f3f4f4;
    min-height: 100vh;
    position: relative;
    padding-bottom: 50px;
    color: #303030
}

body#tinymce {
    padding-top: 0 !important;
    background-color: #fff !important;
    min-height: auto !important;
}

body.logged {
    padding-top: 70px
}

body.page_login{
    padding-top: 85px;
}

.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6 {
    font-family: "Roboto Flex", "Helvetica",Arial,sans-serif
}


.invoiceFilter .btn.btn-filter {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase
}

#mainFooter .list-inline-item {
    border-right: 1px solid rgba(255,255,255,.3);
    padding-right: 10px
}

#mainFooter .list-inline-item a {
    cursor: pointer
}

#mainFooter .list-inline-item a:hover {
    color: #fff;
    text-decoration: underline
}

#mainFooter .list-inline-item:last-child {
    border-right: 0 none!important;
    padding-right: 0
}

#mainListTable {
    position: relative
}

#mainListTable thead {
    position: sticky;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    box-shadow: 0 0 17px -10px #000
}

#mainListTable thead:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    border-top: 1px solid #ccc
}

#mainListTable thead,.mainListTableHeader {
    position: relative;
    z-index: 1001
}

.mainListTableHeader>div {
    overflow: hidden;
    padding-bottom: 10px;
    background-color: transparent;
    margin-bottom: -10px
}

.mainListTableHeader>div>div {
    position: relative;
}

.mainListTableCont {
    max-height: calc(100vh - 507px);
    min-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 2;
    position: relative;
}

.mainListTableCont > .sticky-top{
    z-index: 1;
}

@media (max-width:575px) {
    p {
        font-size: 14px;
        line-height: 140%
    }

    .mainListTableCont {
        max-height: 100%!important;
        min-height: 300px;
        overflow-y: auto;
        overflow-x: hidden
    }
}


.mainListTableCont .text-right .badge {
    max-width: 120px;
    margin-left: auto
}

.mainListTableCont .badge {
    font-size: 80%;
    font-weight: 600;
    padding: .4em
}

@media (max-height:668px) {
    #mainListTable thead {
        position: relative!important;
        box-shadow: none
    }

    .mainListTableCont {
        max-height: none;
        overflow: auto
    }
}

.flex-grow {
    flex: 1
}

.table-upgraded .table {
    border-collapse: collapse!important;
    border: 1px solid #c1d4da!important
}

.table-upgraded .table th {
    background-color: #e6eff2;
    border: 1px solid #c1d4da!important
}

.table-upgraded .table td {
    background-color: #fff;
    border: 1px dashed #c1d4da
}

#screenHolder {
    margin-top: 1vw;
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2)
}

.icon-huge {
    font-size: 4rem !important;
}

.icon-large {
    font-size: 3rem !important;
}

.icon-medium {
    font-size: 2rem !important;
}

.card-subtle {
    border-radius: 10px;
    border: 0
}

.card-clean, .card-clean:hover{
    border:none !important;
    box-shadow: none !important;
}

.bg-transparent {
    background-color: transparent
}

.card-footer:last-child {
    border-radius: 0 0 calc(6px - 1px) calc(6px - 1px)
}

.card-subtle:not(.card-plain),.card-subtle:not(.card-plain):hover {
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.15)
}

.card.card-subtle {
    margin-bottom: 3rem
}

.card.card-subtle.fullh {
    margin-bottom: 3rem;
    min-height: calc(100vh - 350px)
}

.card.card-subtle.halfh {
    margin-bottom: 3rem;
    min-height: calc(50vh - 150px)
}

.min-vh-auto {
    min-height: calc(100vh - 170px);
}

@media (max-width:575px) {
    .card.card-subtle.fullh {
        margin-bottom: 3rem;
        min-height: calc(100vh - 240px)
    }
}

.table-noborder,.table-noborder tbody,.table-noborder td,.table-noborder th,.table-noborder thead,.table-noborder tr {
    border-color: transparent!important
}

.hidden-spin {
    display: none !important;
}

.footer-sticky {
    background-color:var(--color-footer-background) !important;
    bottom: 0;
    position: absolute;
    width: 100%;
    min-height: 50px
}

.alternate-nav {
    border-bottom: 1px solid #ccc;
    background-color: #fff
}

.rounded-1{
    border-radius: 20px !important;
}

.rounded-3{
    border-radius: 40px !important;
}

.btn-multiline {
    white-space: normal !important;
    word-wrap: break-word;
    line-height: 1.3rem !important;
    padding: 10px 50px 15px !important;
    box-shadow: 5px 5px 20px 0px rgba(8, 20, 39, 0.5);
    border-radius: 50px !important;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
.btn-multiline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%);
    pointer-events: none;
    z-index: 1;
    border-radius: 50px 50px 0 0;
}
.btn-multiline > * {
    position: relative;
    z-index: 2;
}
.btn-multiline:hover{
    /* expand the button zoom */
    transform: scale(1.02);
    box-shadow: 5px 5px 20px 0px rgba(10, 22, 39, 0.5);
}
.btn-multiline:hover::before {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.15) 50%, transparent 100%);
}


.gradient-from-bottom {
    position: relative;
}
.gradient-from-bottom::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 200px;
    /* background: linear-gradient(to top, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.2) 50%, transparent 100%); */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.1) 50%, transparent 100%);
    pointer-events: none;
    z-index: 1;
}
.gradient-from-bottom > * {
    position: relative;
    z-index: 2;
}
#reminderTimelineCarousel .carousel-indicators {
    position: relative;
    margin: -50px 0 0 0;
    bottom: 0;
}
#reminderTimelineCarousel .carousel-inner {
    padding: 40px 0 60px;
}
#reminderTimelineCarousel .carousel-item {
    padding: 0;
}
#reminderTimelineCarousel .carousel-indicators li {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.3);
    margin: 0 5px;
}
#reminderTimelineCarousel .carousel-indicators li.active {
    background-color: #dc3545;
}

.btn-special {
    font-weight: 400;
    font-family: "Roboto Flex";
}

.btn-special strong {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.2rem;
    padding-top: 8px;
    display: inline-block
}

body:not(.logged) #navbar-top{
	box-shadow:none;
}

body.homepage:not(.logged) #navbar-top{
	background-color:transparent;
}

section, .section {
  position: relative;
  z-index: 1;
}

.text-light-dark {
  --bs-bg-opacity: 1;
  color: rgba(0,0,0, 1) !important;
}

.bg-gradient-primary {
  background-color: var(--color-header);
  background-image: linear-gradient(130deg, var(--color-header) 15%, var(--color-header) 40%, var(--color-header) 60%, var(--color-header) 100%) !important;
}


.waves-bottom-center {
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  top: auto;
}

.frontpage-features .card {
    height: calc(100% - 3rem);
    text-align: center;
}

.features-badge.badge {
	position: absolute;
	right: 14px;
	top: 14px;
	font-size: 13px;
	font-weight: 400;
	border-radius: 7px;
	padding: 5px 13px;
	box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.25);
	letter-spacing: 0.5px;
}



.lead {
  line-height: 1.6rem;
}

.btn-round {
  border-radius: 30px !important;
}

.text-light {
  color: #f3f4f4 !important;
}


body:not(.logged) #navbar-top{
  padding:10px 0;
}

body.scrolled:not(.logged) #navbar-top{
    background-color: rgba(255, 255, 255, 0.74);
    box-shadow: 0 6px 10px -4px rgba(0,0,0,.15) !important;
    backdrop-filter: blur(10px);
}

body.scrolled:not(.logged) #navbar-top .navbar-toggler{
    border-color:var(--color-header) !important;
    color:var(--color-header) !important;
}

body.scrolled:not(.logged) .site-logo g, body.scrolled:not(.logged) .site-logo g *{
  fill:var(--color-header);
}

#navbar-top{
  transition: background-color .5s, color .5s;
}

.site-logo g{
  transition:fill .5s;
}

@media screen and (min-width: 990px) {
	body.scrolled:not(.logged) .navbar-default .navbar-nav .nav-item .nav-link
	{
	color:#000000 !important;
	}
	
}

/* General styles */
.screens-container canvas {
    transform: scaleX(-1);
    height: 100%;
    width: 100%;
    object-fit: contain;
}

.screens-container {
    pointer-events: none;
}

#frontpage-top-section, #accountant-hero-section{
	margin-top: -86px;
    padding-top: 150px;
}

.account-warning-badge{
    position: absolute;
    top: -24px;
    left: -1px;
    right: -1px;
    border-radius: 6px 6px 0 0;
    height: auto;
    white-space: normal;
    padding-top:5px;
    padding-bottom: 5px;
}
.company-cards .account-warning-badge{
    top: 0px !important;
    border-radius: 9px 9px 0 0 !important;
}

/* Extra small devices (max-width: 530px) */
@media screen and (max-width: 530px) {
    .screens-container canvas {
        min-height: 400px;
    }
    .screens-container {
        margin-top: -5rem;
        margin-bottom: -8rem;
        min-height: 400px;
    }
}

/* Small devices (max-width: 991px) */
@media screen and (max-width: 991px) {
    .screens-container {
        min-height: 450px;
        margin-top: -5rem;
        margin-bottom: -5rem;
    }
    .screens-container canvas {
        min-height: 450px;
    }
}

/* Large devices (min-width: 991px) */
@media screen and (min-width: 991px) {
    .screens-container {
        min-height: 500px;
        margin-top: -6rem;
        margin-bottom: -10rem;
    }
    .screens-container canvas {
        min-height: 500px;
    }
}

/* Extra large devices (min-width: 1200px) */
@media screen and (min-width: 1200px) {
    .screens-container {
        min-height: 600px;
        margin-top: 0rem;
        margin-bottom: 0rem;
    }
    .screens-container canvas {
        min-height: 600px;
    }

    #frontpage-top-section, #accountant-hero-section{
        padding-top: 86px;
    }
}

/* Ultra-wide screens (min-width: 2200px) */
@media screen and (min-width: 2200px) {
    
    #frontpage-top-section, #accountant-hero-section {
        padding-bottom: 100px;
    }
}


.accordion.faq .card-header:after {
   
	background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%229%22%20r%3D%229%22%20fill%3D%22%2305546c%22%3E%3C%2Fcircle%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6%209.00002C6%208.66865%206.26863%208.40002%206.6%208.40002L11.4%208.40002C11.7314%208.40002%2012%208.66865%2012%209.00002C12%209.3314%2011.7314%209.60002%2011.4%209.60002L6.6%209.60002C6.26863%209.60002%206%209.3314%206%209.00002Z%22%20fill%3D%22white%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
	background-size: 18px;
	background-repeat: no-repeat;
	content: " ";
	width: 19px;
	height: 19px;
	float: right;
	background-position: center center;
	 
}
.accordion.faq .card-header.collapsed:after {
	background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%229%22%20r%3D%229%22%20fill%3D%22%2305546c%22%3E%3C%2Fcircle%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9.00078%204.79999C9.33215%204.79999%209.60078%205.06862%209.60078%205.39999V8.39999H12.6008C12.9322%208.39999%2013.2008%208.66862%2013.2008%208.99999C13.2008%209.33136%2012.9322%209.59999%2012.6008%209.59999H9.60078V12.6C9.60078%2012.9314%209.33215%2013.2%209.00078%2013.2C8.66941%2013.2%208.40078%2012.9314%208.40078%2012.6V9.59999H5.40078C5.06941%209.59999%204.80078%209.33136%204.80078%208.99999C4.80078%208.66862%205.06941%208.39999%205.40078%208.39999L8.40078%208.39999V5.39999C8.40078%205.06862%208.66941%204.79999%209.00078%204.79999Z%22%20fill%3D%22white%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
}

.accordion.faq .card-header{
  border: none;
  border-top:1px solid #dfe3e9;
}
.accordion.faq .card{
	  border-bottom: 1px solid #dfe3e9 !important;
	border-radius: 0 !important;
}

.copyright a,.copyright span {
    opacity: .5;
    font-weight: 400!important
}

.copyright a:hover {
    opacity: 1
}

.text-contrast {
    color: #302b26
}

#navbar-top {
    background-color: var(--color-header);
    z-index: 1050
}

#pageLoader,.page-signup::before {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}

.page-signup::before {
    bottom: 0;
    right: 0;
    background-color: rgba(255,255,255,.49);
    position: absolute;
    display: block;
    content: ""
}

.bg-white-opacity {
    background-color: rgba(255,255,255,.95)
}

.table-responsive {
    border: 0
}

@media (max-width:575px) {
    .card-subtle.fullh {
        margin-left: -10px;
        margin-right: -10px
    }

    .table-responsive-md {
        border: 1px solid #dbdbdb;
        border-top: 0
    }

    .go_invoice .card-body {
        padding-right: .9rem;
        padding-left: .9rem
    }
}

#pageLoader {
    position: fixed;
    background: #fff;
    opacity: .9;
    z-index: 1049;
    text-align: center
}

#pageLoader i {
    margin-top: calc(50vh - 30px);
    position: absolute;
}

.dynamicLoader {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-content: center;
    background-color: rgba(255,255,255,.3);
    align-items: center
}

.dynamicLoader i {
    width: 50px;
    height: 50px;
    font-size: 50px;
    flex-basis: content
}

#showRecipientGroups,.set_position_relative,li.w-badge {
    position: relative
}

#reminderSend .form-check-label {
    vertical-align: text-top
}

input[type=date] {
    min-height: 32px
}

.customer_container .form-group label {
    margin-bottom: 1px
}

#addLine,#showRecipientEdit label {
    font-size: 11px
}

#showRecipientGroups>div {
    max-height: 410px;
    overflow: auto;
    background: linear-gradient(white 30%,rgba(255,255,255,0)),linear-gradient(rgba(255,255,255,0),white 70%)0 100%,radial-gradient(50%0,farthest-side,rgba(0,0,0,.1),transparent),radial-gradient(50% 100%,farthest-side,rgba(0,0,0,.1),transparent)0 100%;
    background: linear-gradient(#fff 30%,rgba(255,255,255,0)),linear-gradient(rgba(255,255,255,0),#fff 70%)0 100%,radial-gradient(farthest-side at 50%0,rgba(0,0,0,.1),transparent),radial-gradient(farthest-side at 50% 100%,rgba(0,0,0,.1),transparent)0 100%;
    background-repeat: no-repeat;
    background-color: #fff;
    background-size: 100% 40px,100% 40px,100% 14px,100% 14px;
    background-attachment: local,local,scroll,scroll
}

#invoiceLinesContainer label {
    font-size: 10px;
    position: absolute;
    left: 5px;
    top: -13px;
    border: 1px solid #ccc;
    margin-top: 3px;
    background: #fff;
    border-radius: 3px;
    padding: 0 4px;
    z-index: 1;
    opacity: .9;
    line-height: 11px
}

#invoiceLinesContainer .easy-autocomplete input {
    border-color: #ced4da;
    border-radius: .2rem;
    border-style: solid;
    border-width: 1px;
    box-shadow: none;
    color: #555;
    padding: 4px 12px
}

#invoiceLinesContainer .form-control[disabled] {
    opacity: .6
}

#invoiceLinesContainer .lineContainer.alert {
    padding-right: 35px!important
}

.grossamount,.netamount {
    background-color: #fffea6;
    height: calc(1.5em + .8rem + 2px);
    padding-right: 10px;
    line-height: 1.5;
    border-radius: .2rem;
    border: 1px solid #d5d4a6;
    font-size: inherit
}

.lineContainer {
    position: relative;
    border: 1px solid #dce6ea;
    border-radius: 0!important;
    padding: 13px 10px 10px;
    margin-right: -21px;
    margin-left: -21px;
    margin-bottom: -1px;
    background-color: #f4f7f9
}

#addLine {
    transition: width 200ms ease;
    width: auto;
    background-color: #819399;
    border-radius: 4px;
    text-align: center;
    height: 26px;
    color: #fff;
    padding: 0 10px!important;
    line-height: 26px;
    margin-top: 7px!important;
    text-decoration: none!important;
    display: inline-block;
    text-transform: uppercase;
    font-weight: 500;
    overflow: hidden;
    border: 0;
    letter-spacing: 0.6px;
}

#addLine:hover {
    background-color: #536a71
}

.easy-autocomplete-container .eac-item {
    font-size: 13px!important
}

.easy-autocomplete-container ul {
    top: 2px!important;
    border: 1px solid #ccc!important;
    border-radius: 5px!important;
    overflow: hidden!important;
    box-shadow: 0 3px 8px 0 rgba(0,0,0,.25)
}

.easy-autocomplete-container ul li.selected {
    background: 0 0 #ecf2f4 !important
}

.easy-autocomplete-container ul .eac-category,.easy-autocomplete-container ul li {
    padding: 6px 12px!important;
    border: 0!important;
    border-bottom: 1px solid #e3e3e3!important
}

.easy-autocomplete-container {
    border-radius: 5px
}

#invoiceLinesContainer .alert-dismissible .close {
    transition: all ease 200ms;
    position: absolute;
    top: 34px;
    right: 11px;
    font-size: 20px;
    color: #fff;
    border-radius: 3px;
    padding: 0;
    width: 25px;
    height: 25px;
    line-height: 23px;
    background: #d25538;
    font-weight: 300;
    opacity: 1
}

#invoiceLinesContainer .alert-dismissible .close:hover {
    color: #fff;
    border: 1px solid #b64329;
    background: #b64329;
    opacity: 1
}

.frequencySettingsInfo .alert > div:first-child{
    cursor:pointer;
}
.frequencySettingsInfo .alert > div:first-child:after{
    content: "\e969";
    font-family: heroicons-outline;
    transition: all 200ms ease-in;
    display: inline-block;
    position:relative;
    vertical-align: middle;
    position: absolute;
    right: 18px;
    top: 9px;
}

.frequencySettingsInfo .alert > div[aria-expanded="true"]:first-child:after{
    transform: rotate(90deg) !important;
}

.invoice_type_2 {
    background-color: #fffce6
}

.invoice_type_2 .dropdown-toggle {
    background-color: #e0dcc6
}

.payLineComment {
    padding-left: 10px
}

.payments-table a i {
    color: #303739;
    transition: all 200ms ease
}

.payments-table a:hover i {
    color: #ea2100
}

.btn-w-icon i {
    font-size: 23px;
    position: absolute;
    left: 10px;
    top: 7px
}

@media (min-width:992px) {
    .lineContainer .itemsCont {
        flex: 0 0 70px;
        max-width: 70px
    }

    .lineContainer .grossCont,.lineContainer .netCont,.lineContainer .priceCont {
        flex: 0 0 135px
    }
}

@media (min-width:1200px) {
    .lineContainer .itemsCont {
        flex: 0 0 90px;
        max-width: 90px
    }

    .lineContainer .grossCont,.lineContainer .netCont,.lineContainer .priceCont {
        flex: 0 0 155px
    }
}

@media (max-height:500px) {
    body {
        padding-top: 0!important
    }

    .fixed-top {
        position: relative
    }
}

@media (max-width:320px) {
    #mainFooter .list-inline-item {
        font-size: 10px
    }
}

@media (max-width:320px) and (min-height:500px) {
    body {
        padding-top: 65px!important
    }
}

@media (max-width:576px) {
    .navbar-brand img {
        max-width: 140px
    }

    #navbar-top {
        min-height: 65px
    }
}

@media (min-width:575px) {
    .mobile-menu {
        display: none
    }
}

@media (max-width:576px) {
    .has-mobile-menu .footer-sticky {
        position: relative;
        bottom: 0
    }

    html {
        -webkit-overflow-scrolling: touch
    }

    body.has-mobile-menu {
        padding-bottom: 130px
    }
}

.mobile-menu {
    position: sticky!important;
    bottom: 0;
    background-color: #f6fafb;
    right: 0;
    left: 0;
    width: 100%!important;
    z-index: 1000!important;
    float: none;
    opacity: .99;
    box-shadow: 0-1px 9px 0 rgba(0,0,0,.4);
    height: 60px;
    border-top: solid 1px #ccc;
    margin-bottom: 0
}


#hamburger-menu,#hamburger-menu span {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg)
}

#hamburger-menu {
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
    height: 30px;
    position: relative;
    width: 40px;
    text-align: center;
    margin-right: 15px
}

#hamburger-menu span {
    position: absolute;
    margin: 0 6px!important;
    width: 25px;
    opacity: 1;
    left: 0;
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out
}

#hamburger-menu span:nth-child(1) {
    top: 7px
}

#hamburger-menu span:nth-child(2) {
    top: 14px
}

#hamburger-menu span:nth-child(3) {
    top: 21px
}

.nav-open #hamburger-menu span:nth-child(1) {
    top: 10px;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg)
}

.nav-open #hamburger-menu span:nth-child(2) {
    opacity: 0;
    left: -10px
}

.nav-open #hamburger-menu span:nth-child(3) {
    top: 10px;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg)
}

.selectpicker~.dropdown-toggle {
    border: 0
}

.bootstrap-select.show {
    border: 1px solid #9a9a9a!important
}

.selectpicker.subtext-below~.dropdown-menu li small {
    display: block;
    padding: 0;
    margin: 0;
    line-height: 10px
}

.bootstrap-select>.dropdown-menu.show {
    box-shadow: 0 3px 11px rgba(0,0,0,.5)!important;
    background-color: #fff;
    border-radius: 5px;
    margin-top: 6px
}

.bootstrap-select .dropdown-item,.bootstrap-select .dropdown-toggle {
    font-size: .9em
}

.bootstrap-select .dropdown-toggle {
    border-radius: 3px
}

.bootstrap-select .dropdown-item.active,.bootstrap-select .dropdown-item:active {
    color: #000;
    text-decoration: none;
    background-color: #dae0e5
}

.bootstrap-select .divider {
    height: 0;
    margin: .5rem 0;
    overflow: hidden;
    border-top: 1px solid #e9ecef
}

.bootstrap-select .inner ul li .text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bootstrap-select.full-description .inner ul li .text{
    max-width: calc(100% - 30px);
}

.bootstrap-select [class*="hio"] {
    font-size: 20px;
    vertical-align: top
}

.bootstrap-select .dropdown-menu .dropdown-item.selected {
    background-color: #f3f3f3;
    border-top-color: #fff !important;
}

.bootstrap-select .dropdown-menu .dropdown-item:hover {
    background-color: #e5eef1 !important;
    border-top-color: #fff !important;
    border-bottom-color: #fff !important;
}

.bootstrap-select .btn.dropdown-toggle {
    height: 100%
}

.filter-option-inner-inner i.pe.by-icon-plus {
    font-size: 18px
}

.bootstrap-select .dropdown-menu .dropdown-item {
    border-bottom: 1px solid #ecebeb;
    font-weight: 500;
    text-transform: uppercase;
    padding: .6rem 1.5rem .2rem!important;
    background-color: #fff;
    border-top: 1px solid #ecebeb;
    margin-top: -1px;
}

.bootstrap-select .dropdown-menu .new_customer {
    background-color: #e5ecee!important;
    text-transform: uppercase
}

.bootstrap-select .dropdown-menu .new_customer:hover {
    background-color: #d5dfe1!important
}

.bootstrap-select .dropdown-menu {
    border-radius: 4px;
    border: 0!important;
    max-width: 100%!important;
    min-width: 100%!important;
    overflow-x: hidden!important
}

.bootstrap-select .dropdown-menu li:first-child {
    background-color: #e6e6e6;
    position: sticky;
    top: 0
}

.bootstrap-select.show-tick .dropdown-menu .selected span.check-mark {
    top: calc(50% - 10px);
    color: #094d62
}

.bootstrap-select .bs-searchbox {
    background-color: #f9f9f9;
    color: #2b2b2b
}

.btn-light:not(.dropdown-toggle){
    background-color:#ffffff;
    border-color: #f4f7f8;
}
.btn-light:not(.dropdown-toggle):hover{
    background-color:#e5eef1;
    border-color: #dce6e9;
}

.btn-light:hover,.show>.btn-light.dropdown-toggle {
    background-color: #dee9ec;
}

.bootstrap-select.dropdown-toggle {
    border-radius: 3px
}

.bootstrap-select .dropdown-menu .new_customer:before {
    content: "\e969";
    line-height: 16px;
    display: inline-block;
    font-family: heroicons-outline;
    padding-right: 8px;
    font-size: 90%;
    vertical-align: super
}

.bootstrap-select li.no-results {
    white-space: nowrap;
    padding: 5px 9px;
    font-size: 14px;
    font-weight: 300;
    margin: 0;
    text-align: center
}

#invoiceForm .bootstrap-select .dropdown-toggle {
    min-height: 100%
}

 .bootstrap-select .filter-option-inner-inner i[class*="hio"] {
    font-size: 1.1rem;
    vertical-align: sub
}

a.chevronToggle:not(.collapsed) i{
    transform:rotate(90deg);
}
a.chevronToggle i{
    display: inline-block;
}
a.chevronToggle{
    transition: all 300ms ease;
}

.recurringInvoiceList > div {
    border-bottom:2px solid #f3f3f3;
    width: auto;
  }
  
  .recurringInvoiceList > div:first-child {
    /* border-top:2px solid #f3f3f3; */
    margin-top:15px;
  }
  
  .recurringInvoiceList > div:last-child {
    border-bottom:none;
  }

.animated {
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both
}

.animated.hinges {
    -webkit-animation-duration: 2s;
    -moz-animation-duration: 2s;
    -o-animation-duration: 2s;
    animation-duration: 2s
}

.animated.slow {
    -webkit-animation-duration: 3s;
    -moz-animation-duration: 3s;
    -o-animation-duration: 3s;
    animation-duration: 3s
}

.animated.snail {
    -webkit-animation-duration: 4s;
    -moz-animation-duration: 4s;
    -o-animation-duration: 4s;
    animation-duration: 4s
}

.shake {
    -webkit-animation-name: shake;
    -moz-animation-name: shake;
    -o-animation-name: shake;
    animation-name: shake
}

hr.spacer {
    width: 40px;
    border-width: 4px;
    margin-left: 0;
    border-color: #c64a24
}

hr.thick {
    border-color: #f4f4f4;
    border-width: 4px
}

.login .modal-dialog {
    width: 350px
}

.login .modal-footer {
    border-top: 0;
    margin-top: 0;
    padding: 10px 20px 20px
}

.login .modal-header {
    border: 0;
    padding: 15px
}

.login .box .social {
    float: none;
    margin: 0 auto 30px;
    text-align: center
}

.login .social .circle {
    background-color: #eee;
    color: #fff;
    border-radius: 100px;
    display: inline-block;
    margin: 0 17px;
    padding: 15px
}

.login .social .circle .fa {
    font-size: 16px
}

.login .social .facebook {
    background-color: #455ca8;
    color: #fff
}

.login .social .google {
    background-color: #f74933
}

.login .social .github {
    background-color: #403a3a
}

.login .facebook:hover {
    background-color: #6e83cd
}

.login .google:hover {
    background-color: #ff7566
}

.login .github:hover {
    background-color: #4d4d4d
}

.login .forgot {
    color: #797979;
    margin-left: 0;
    overflow: hidden;
    text-align: center;
    width: 100%
}

.login .btn-login,.registerBox .btn-register {
    border-width: 0;
    color: #fff;
    display: block;
    padding: 10px 50px;
    text-transform: uppercase;
    width: 100%;
    margin: 20px auto 0
}

.login .box .form input#mobile,.login .box .form input[type=password] {
    color: #333;
    font-size: 15px;
    height: 40px;
    margin-bottom: 5px;
    padding: 10px 12px;
    width: 100%
}

.login {
    min-height: calc(100vh - 110px)
}

.signupContainer {
    max-width: 550px
}

@media (min-width:1300px) {
    .loginContainer {
        max-width: 500px
    }

    .signupContainer {
        max-width: 650px
    }
}

.bg-image {
    background-color: #fff
}

.bg-image::after {
    content: "";
    background-image: url(/img/artwork/artwork-signup.webp);
    background-size: cover;
    background-position: center center;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
    opacity: .9
}

@media (max-width:400px) {
    .login .modal-dialog {
        width: auto;
        max-width: 100%
    }
}

.big-login,.big-register {
    background-color: #0bf;
    color: #fff;
    border-radius: 7px;
    border-width: 2px;
    font-size: 14px;
    font-style: normal;
    font-weight: 200;
    padding: 16px 60px;
    text-transform: uppercase;
    transition: all .3s ease 0s
}

.big-register {
    background-color: transparent;
    color: #0bf;
    border-color: #0bf
}

.big-login:hover {
    background-color: #00a4e4;
    color: #fff
}

.big-register:hover {
    border-color: #00a4e4;
    color: #00a4e4
}

.company-listing .list-group-item.active-company::after {
    font-family: heroicons-outline;
    content: "\e969";
    position: absolute;
    right: 9px;
    top: 2px;
    font-size: 2em;
    color: #086886
}

/* Company filter section styling */
.company-filter-container .input-group {
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    overflow: hidden;
 }
 
 .company-filter-container .input-group-text {
    border: none;
    background-color: #ffffff;
    margin: 0;
 }
 
 .company-filter-container .form-control {
    border: none;
    padding-left: 0.5rem;
    font-size: 0.95rem;
    margin: 0;
    box-shadow: none;
 }
 
 .company-filter-container .form-control:focus {
    box-shadow: none;
    border: none;
 }
 
 .company-filter-container .input-group:focus-within {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
 }
 
 .company-filter-container .btn {
    border: none;
    padding: 0.375rem 0.75rem;
    margin: 0;
 }
 
 /* Mobile responsive */
 @media (max-width: 576px) {
    .company-filter-container .input-group {
       width: 100% !important;
       max-width: 300px;
    }
 }

.card.card-price {
    border-radius: 15px;
    -webkit-box-shadow: 0 3px 0 0 rgba(0,0,0,.08);
    box-shadow: 0 3px 0 0 rgba(0,0,0,.08);
    transition: all .2s ease-in-out;
    position: relative;
    will-change: transform;
    border: transparent
}

.card.card-price:hover {
    transform: scale(1.02);
    -webkit-box-shadow: 0 20px 35px 0 rgba(0,0,0,.08);
    box-shadow: 0 20px 35px 0 rgba(0,0,0,.08)
}

.card.card-price:hover:after {
    width: 100%
}

.card.card-price .card-header {
    background-color: #fff;
    padding-left: 2rem;
    border-bottom: 0
}

.card.card-price .card-title {
    margin-bottom: 1rem
}

.card.card-price .card-block {
    padding-top: 0
}

.card.card-price .list-group-item {
    border: 0;
    padding: .25rem;
    color: gray;
    font-weight: 300
}

.card.card-price .display-2 {
    font-size: 7rem;
    letter-spacing: -.5rem
}

.card.card-price .display-2 .currency {
    font-size: 2.75rem;
    position: relative;
    font-weight: 400;
    top: -45px;
    letter-spacing: 0
}

.card.card-price .display-2 .period {
    font-size: 1rem;
    color: #b3b3b3;
    letter-spacing: 0
}

.app-mva-table {
    max-width: 720px;
    background-color: #e2e9ee;
    border: 0;
    padding: 15px;
    display: block
}

.app-mva-table table td,.app-mva-table table th {
    border: 0;
    color: #0d3362;
    vertical-align: middle
}

.app-mva-table table td {
    padding: .1rem
}

.app-mva-table table .box {
    border: 1px solid #ccc
}

.app-mva-table table .boxDisabled {
    border: 1px solid #ccc;
    background-color: #ededed
}

.app-mva-table table td:first-child>* {
    display: block;
    color: #0d3362
}

.app-mva-table table td:first-child>strong {
    font-size: 13px;
    font-weight: 900
}

.app-mva-table table td input {
    padding: 1px 6px 1px 1px;
    width: 100%;
    text-align: right
}

.app-mva-table .table-hover tbody tr:hover {
    background-color: rgba(23,60,105,.05)
}

.app-mva-table table th:nth-child(2),.app-mva-table table th:nth-child(4) {
    width: 130px
}

.app-mva-table table th:nth-child(3) {
    width: 10px
}

@media (max-width:576px) {
    .app-mva-table {
        margin-left: -15px;
        margin-right: -15px;
        width: auto
    }

    .app-mva-table table th:nth-child(2),.app-mva-table table th:nth-child(4) {
        width: 100px
    }
}

#attachment-text {
    background-color: #f2f5f7;
    padding: 20px
}

#attachment-list .name {
    font-size: 12px;
    text-transform: uppercase
}

.bootstrap-select #stored_attachments+.dropdown-toggle+.dropdown-menu li small {
    display: block!important;
    padding-left: 0!important
}

.bootstrap-select .filter-option-inner-inner i {
    vertical-align: text-top
}

.bootstrap-select .filter-option-inner-inner {
    line-height: 1.4rem
}

.bootstrap-select .bs-searchbox>input {
    border: 0;
    border-radius: 0
}

.bootstrap-select>.dropdown-toggle.bs-placeholder,.bootstrap-select>.dropdown-toggle.bs-placeholder:active,.bootstrap-select>.dropdown-toggle.bs-placeholder:focus,.bootstrap-select>.dropdown-toggle.bs-placeholder:hover {
    color: #636363
}

.some-fb-icon {
    background-color: #4c76be
}

.some-twitter-icon {
    background-color: #00c7ff
}

.some-x-icon {
    background-color: #000000
}

.some-icon {
    overflow: hidden
}

.some-icon img {
    -webkit-transition: all 150ms ease-in-out;
    -moz-transition: all 150ms ease-in-out;
    -ms-transition: all 150ms ease-in-out;
    -o-transition: all 150ms ease-in-out;
    transition: all 150ms ease-in-out
}

.some-icon:hover img {
    transform: scale(1.2)
}

.underline {
    border-bottom: 1px dashed #303030
}

.group-colors>div,.groupBubble {
    margin-right: 5px;
    display: inline-block
}

.groupBubble {
    width: 15px;
    height: 15px;
    border-radius: 3px;
    vertical-align: sub
}

.groupBubble.large {
    width: 22px;
    height: 22px;
    vertical-align: initial;
    margin-bottom: -1px
}

.badge.badge-group {
    color: #fff;
    font-weight: 400;
    margin-right: 4px;
    max-width: 200px;
    text-overflow: ellipsis;
    overflow: hidden;
    vertical-align: middle;
    font-size: 11px;
    text-transform: uppercase;
    padding: 2px 6px
}

.badge.badge-recurring {
    background-color: #fff;
    border: 1px solid #ebebeb;
    color: #707b7e;
    font-weight: 300;
    margin-right: 4px;
    max-width: 200px;
    text-overflow: ellipsis;
    overflow: hidden;
    vertical-align: baseline;
    font-size: 11px;
    text-transform: uppercase;
    padding: 2px 6px;

}

.badge.badge-recurring:hover{
    background-color:#ebebeb;
    color: #000;
}

.badge.badge-recurring i{
    color: #000 !important;
}

.recurringItemContainer{
    transition: all 200ms ease;
}

/* Color Picker Enhancement */
/* modal color picker */
.group-colors>div:not(.selected):hover {
    box-shadow: 0 0 3px 1px rgba(0,0,0,.4)
}

.group-colors.colors-small>div {
    width: 30px;
    height: 30px;
    border-radius:30px;
}

.group-colors>div.selected {
    border: 2px solid rgba(0,0,0,.4);
    box-shadow: 0 0 3px 1px rgba(0,0,0,.4)
}
/** main edit page color picker */
.color-picker-container .group-colors {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.color-picker-container .group-colors.colors-large div {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid transparent;
    transition: all 0.2s ease;
    position: relative;
}

.color-picker-container .group-colors.colors-large div:hover {
    transform: scale(1.1);
    border-color: rgba(0, 0, 0, 0.2);
}

.color-picker-container .group-colors.colors-large div.selected {
    border-color: #007bff;
    transform: scale(1.15);
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.color-picker-container .group-colors.colors-large div.selected::after {
    content: "✓";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-weight: bold;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}

label h5[required]::after,label[required]::after,legend[required]::after {
    content: "*";
    color: #d25538
}

.metadataToggler i {
    font-size: 28px;
    line-height: 20px;
    margin-left: 15px
}

.metadataToggler {
    margin-left: -12px!important;
    display: inline-block
}

.metadataToggler[aria-expanded=true] i {
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    -webkit-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    transform: rotate(-180deg)
}

.country-container select {
    width: calc(100% + 26px);
    height: calc(100% + 15px);
    position: absolute;
    margin: -22px -14px;
    opacity: 0;
    max-width: 55px;
}

/**
 * Copyright (c) 2021 Peyton Gasink
 * Distributed under MIT License.
 
 * This file contains all the styling for the toasts. It may cause
 * conflicting styles if simultaneously using Bootstrap toasts not generated by
 * Bootstrap Toaster, which is not recommended.
 */

 .status-icon {
    font-size: 1.1rem;
}

.toast {
    /* Ported back from Bootstrap 5's toast styling */
    width: 350px;
    border: 1px solid rgba(0, 0, 0, 0.19);
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, 0.36);
    -ms-flex-preferred-size : auto;
    flex-basis: auto;
}

.toast.wide {
    /* Ported back from Bootstrap 5's toast styling */
    width: 550px;
    max-width: calc(100vw - 1.6rem); 
}

.toast.center{
    margin-right: calc(50vw - 275px) !important;
    width: 550px;
    max-width: calc(100vw - 1.6rem); 
}
/* remove margin right if its a small screen */
@media (max-width: 576px) {
    body .toast.center{
        margin-right: .8rem !important;
    }
}

#toastContainer {
    /*
        Variables dedicated to light and dark theme colors. The light theme ones are only used
        for JavaScript overrides, and are duplicates of Bootstrap's settings.
    */
    --header-color-light: #6c757d;
    --text-color-light: #212529;
    --header-bg-color-light: rgba(255,255,255, .95);
    --body-bg-color-light: rgba(255,255,255, .95);
    --header-color-dark: #f8f9fa;
    --text-color-dark: #f8f9fa;
    --header-bg-color-dark: rgba(30,40,45,.95);
    --body-bg-color-dark: rgba(30,40,45,.95);
    max-height: 100vh;
    overflow-y: scroll;
    /* Hide scrollbar in Firefox */
    scrollbar-width: none;
    /* Render in front of Bootstrap toasts */
    z-index: 1060;
    display: flex;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: end;
    align-content: center;
    pointer-events: none;
}

#toastContainer .toast {
    background-color: var(--body-bg-color-light);
    pointer-events: all;
    border-radius: 12px;
}

/* Hide scrollbar in all webkit-based browsers. */
#toastContainer::-webkit-scrollbar {
    display: none;
}

#toastContainer .toast {
    margin: 0.8rem;
}

.toast-header{
    background-color: var(--color-header);
    color: #ffffff;
    border-radius: 12px 12px 0 0;
}
.toast-header .close {
    color: #ffffff;
}

/** group edit page */
/* Modern Form Styling */
.group-edit-container .form-section {
    padding: 1rem 0;
}

.group-edit-container .section-title {
    font-weight: 600;
    color: #2c3e50;
    border-bottom: 2px solid #e9ecef;
    padding-bottom: 0.5rem;
}

.modern-form .form-label {
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.5rem;
}

.modern-form .form-label.required::after {
    content: " *";
    color: #dc3545;
}

.modern-form .form-label i {
    font-size: 0.9rem;
}

.modern-form .form-control {
    border: 2px solid #e9ecef;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    transition: all 0.2s ease;
}

.modern-form .form-control:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.modern-form .form-control.is-valid {
    border-color: #28a745;
}

.modern-form .form-control.is-invalid {
    border-color: #dc3545;
}

/* Color Preview Section */
.color-preview-section, .quick-actions-section {
    border: 1px solid #dee2e6;
    transition: all 0.2s ease;
}


#descriptionCounter.text-warning {
    font-weight: bold;
}

/* Header Gradient Transitions */
.group-header-card {
    transition: background 0.3s ease;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .group-edit-container .group-header-content {
        gap: 1rem !important;
    }
    
    .group-edit-container .group-header-content .group-avatar {
        font-size: 1.5rem;
    }
    
    .group-edit-container .group-header-info h2 {
        font-size: 1.25rem;
    }
    
    .group-edit-container .form-actions {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .group-edit-container .form-actions .btn {
        width: 100%;
        margin-right: 0;
    }
    
    .group-edit-container .quick-actions-section .btn {
        width: 100%;
        margin-right: 0;
    }
    
    .group-edit-container .color-picker-container .group-colors.colors-large div {
        width: 35px;
        height: 35px;
    }
}

/* Form Validation Feedback */
.invalid-feedback {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: #dc3545;
}

.form-control.is-invalid ~ .invalid-feedback {
    display: block;
}

.form-control:not(.is-invalid) ~ .invalid-feedback {
    display: none;
}

/* Force toast container to top center on mobile. */
@media only screen and (max-width: 576px) {
    #toastContainer {
        width: 100%;
        top: 0 !important;
        bottom: auto !important;
        left: 0 !important;
        transform: none !important;
    }

    #toastContainer .toast {
        margin: 0.8rem auto;
    }
}

@media (prefers-color-scheme: dark){
    .toast, .toast-header, .toast-header .close {
        color: var(--text-color-dark);
    }

    .toast {
        background-color: var(--body-bg-color-dark) !important;
    }

    .toast-header {
        background-color: var(--header-bg-color-dark) !important;
    }
}

.placeholder{
    display: inline-block !important;
    background: #ccc;
    line-height: 100% !important;;
    width:40%;

    background: #d6d6d6;
    background: linear-gradient(to right, #eeeeee 10%, #dddddd 18%, #eeeeee 33%); 
    background-size: 800px 104px;
    position: relative;
}
.row.animation .placeholder{
    animation-duration: 1.25s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: placeHolderShimmer;
    animation-timing-function: linear;
}

.placeholder::after{
    content: " ";
    display: inline-block;
}

.mark.placeholder{
    width:80% !important;
    line-height: 120% !important;
}

.invoiceInfo.placeholder{
    width:20% !important;
    content:" ";
}

small.placeholder{
    width: 30%
}

.badge.placeholder{
    width: 80%;
    background-color: inherit !important
}

.number.placeholder{
    width: 30%;
    line-height:120% !important;
}

.by-icon-more-1.placeholder, .hio-ellipsis-horizontal.placeholder{
    font-size: 150%;
    padding: 5px;
    width: 40px;
    text-align: center;
    border-radius: 5px
}

.small.custom-control .custom-control-label::before, 
.small.custom-control .custom-control-label::after {
    top: 0.26rem !important;;
    width: 0.75rem !important;
    height: 0.75rem !important;
    left: -1.2rem !important;
}
.small.custom-control{
    font-size: 0.8rem !important;
    line-height: 150%;
    padding-left: 1.2rem;
}

.small.custom-control .custom-control-input {
    left: 2px;
    width: 1.1rem;
    height: 1.1rem;
}

.small.custom-control.custom-control-inline {
    margin-right: 0.7rem;
}
.invoiceFilter .btn.btn-warning{
    color: #fff !important;
}
.invoiceFilter .btn:not(.active):not(:hover){
    background-color: #adadad !important;
    border-color: #adadad;
}
.invoiceFilter .btn.btn-success.active{
    box-shadow: 0px 0px 0px 1px #9cb4a2 !important;
    border:1px solid #fff !important;
}

.invoiceFilter .btn.btn-warning.active{
    box-shadow: 0px 0px 0px 1px #cfb98b !important;
    border:1px solid #fff !important;
}

.invoiceFilter .btn.btn-danger.active{
    box-shadow: 0px 0px 0px 1px #cfaba2 !important;
    border:1px solid #fff !important;
}
.invoiceFilter .btn:focus{
    box-shadow: none !important;
    outline: 0 !important;
}

@keyframes placeHolderShimmer{
    0%{
        background-position: -468px 0
    }
    100%{
        background-position: 468px 0
    }
}

@keyframes highlightFlash {
    0% {
       box-shadow:inset 0 0 0 rgba(255, 203, 0, 0); /* No shadow initially */
    }
    20% {
       box-shadow:inset 0 0 30px 5px rgba(255, 203, 0, 0.7); /* First flash with glow */
    }
    40% {
       box-shadow:inset 0 0 0 rgba(255, 203, 0, 0); /* Fade out */
    }
    60% {
       box-shadow:inset 0 0 10px 5px rgba(255, 203, 0, 0.7); /* Second flash with glow */
    }
    80% {
       box-shadow:inset 0 0 0 rgba(255, 203, 0, 0); /* Fade out */
    }
    100% {
       box-shadow:inset 0 0 0 rgba(255, 203, 0, 0); /* Ensure no shadow at the end */
    }
 }
 .highlighted{
    background-color: #fbfbfb;
 }

.highlightFlash {
    animation: highlightFlash 2s ease-out;
    animation-fill-mode: forwards;
 }

#filterCollapseBtn:not(.collapsed) i{
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg) !important;
    display: inline-block;
}

#filterCollapseBtn i{
    transition: all 150ms linear;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg) !important;
    display: inline-block;
}

.sort-button {
    position: relative;
    padding-right: 10px;
    padding-left: 10px;
 }

 .sort-button:after {
    content: '';
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
 }

 .sort-button.asc:after {
    border-top: 5px solid #3e5969;
    top: calc(100% - 5px);
 }

 .sort-button.desc:after {
    border-bottom: 5px solid #3e5969;
    top: calc(100% - 10px);
 }

 /* public invoice page */
 .public-logo-cont img{
    max-height: 120px;
}
.public-invoice-cont {
   border-top: 20px solid var(--color-header);
   box-shadow: 2px 2px 20px rgba(0,0,0,0.1);
}

.public-history-cont{
    border-top: 10px solid var(--color-header);
    border-bottom: 10px solid var(--color-header);
    margin-top:2rem;
    box-shadow: 2px 2px 20px rgba(0,0,0,0.1);
   
}
.public-history-cont .table-upgraded .table{
    margin-bottom:20px !important;
}
.public-history-cont .table-upgraded .table th{
    border:none !important;
    background: none !important;
    
}

.public-history-cont .card-header[aria-expanded="true"]{
    background: #f9f9f9 !important;
}

.bottom-spacer{
    margin-bottom:40px;
}

.public-invoice-info-table {
    max-width: 100%;
    width: 300px;
}
.public-invoice-info-table td {
    padding: 2px 5px;
}
.public-invoice-info-table.summary {
    margin-top: 20px;
    font-size: 120%;
    font-weight: 500;
}
/* smaller .public-invoice-info-table.summary for mobile */
@media (max-width: 768px) {
    .public-invoice-info-table {
        width: 240px;
    }
    .public-invoice-info-table.summary {
        font-size: 100%;
    }
}

.public-invoice-info-table td:first-child {
    color: var(--gray);
}

body.online-invoice {
    padding-top: 10px;
}
body.online-invoice .table-bordered {
    border: 1px solid #dee2e6;
}

body.online-invoice .table-bordered th,
body.online-invoice .table-bordered td {
    border: 1px solid #dee2e6;
}

.text-smaller {
    font-size: 0.75rem;
}

/** news ticker styling */
.news-title{
    font-weight: 400;
}

a.news-title{
    text-decoration: underline; 
    color: #000;
    font-weight: 400;
}

.news-ticker-carousel {
    position: relative;
    min-height: 210px;
}
.news-slides-container {
    position: relative;
    overflow: hidden;
}
.news-slide {
    display: none;
    padding: .4rem 1rem;
    animation: fadeIn 1.5s;
}
.news-slide.active {
    display: flex;
    flex-direction: column;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.news-dots {
    padding: 0.5rem 0;
}
.news-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #ccc;
    margin: 0 4px;
    cursor: pointer;
    transition: all 0.3s;
}
.news-dot:hover {
    background-color: #999;
    transform: scale(1.2);
}
.news-dot.active {
    background-color: var(--color-contrast);
    width: 24px;
    border-radius: 4px;
}

#portal-toggle-news{
    font-weight: 400;
    text-decoration: underline;
}

.news-ticker .news-date{
    font-size: 11px;
    font-weight: 400;
}

.news-item .news-date-inner{
    float: right; 
    font-size: small;
}


/* styling for client page */
/* Modern Client Info Styles */
.client-info-wrapper {
    max-width: 100%;
    }

    #clientTabs .nav-link {
        text-transform: uppercase;
    }

    .nav-tabs .nav-item .nav-link {
    color: #676767;
    }
    /* Client Header Card */
    .client-header-card {
    background: linear-gradient(135deg, #05546c 0%, #5f2323 100%);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    }
    
    .client-header-content {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    }
    
    .client-avatar {
    width: 4rem;
    height: 4rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: white;
    backdrop-filter: blur(10px);
    }
    
    .client-header-info h2.client-name {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 0.25rem 0;
    color: white;
    }
    
    .client-id {
    font-size: 1rem;
    margin: 0;
    opacity: 0.9;
    color: rgba(255, 255, 255, 0.8);
    }
    
    .client-actions {
    display: flex;
    gap: 0.75rem;
    }
    
    .btn-modern {
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-weight: 500;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    }
    
    .btn-modern.btn-light {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
    color: white;
    backdrop-filter: blur(10px);
    }
    
    .btn-modern.btn-light:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
    }
    
    .btn-modern.btn-outline-secondary {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.3);
    color: white;
    }
    
    .btn-modern.btn-outline-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
    }
    
    /* Client Note Card */
    .client-note-card {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: inset 2px 2px 5px rgba(82, 62, 5, 0.09), 2px 2px 10px 0px rgba(0, 0, 0, 0.15);
    }
    
    .note-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    }
    
    .note-title {
    font-weight: 600;
    color: #856404;
    }
    
    .note-content {
    color: #856404;
    line-height: 1.6;
    }
    
    /* Info Cards Grid */
    .info-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    }
    
    .info-card {
    background: white;
    border-radius: 16px;
    border: 1px solid #e3e6f0;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    }
    
    .info-card:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    }
    
    .info-card-header {
    background: #f8f9fc;
    border-bottom: 1px solid #e3e6f0;
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    }
    
    .info-card-header i {
    font-size: 1.25rem;
    }
    
    .info-card-title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: #2c3e50;
    }
    
    .info-card-body {
    padding: 1.5rem;
    }
    
    /* Info Items */
    .info-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1rem 0;
    border-bottom: 1px solid #f1f3f4;
    }
    
    .info-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
    }
    
    .info-item:first-child {
    padding-top: 0;
    }
    
    .info-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    color: #5a5c69;
    min-width: 140px;
    flex-shrink: 0;
    }
    
    .info-label i {
    font-size: 0.875rem;
    width: 16px;
    }
    
    .info-value {
    flex: 1;
    text-align: right;
    color: #2c3e50;
    font-weight: 500;
    }
    
    /* Special Info Value Styles */
    .address-value {
    text-align: right;
    line-height: 1.4;
    }
    
    .member-number {
    background: #e3f2fd;
    color: #1976d2;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.875rem;
    }
    
    .member-comment {
    background: #f8f9fc;
    border: 1px solid #e3e6f0;
    border-radius: 8px;
    padding: 1rem;
    line-height: 1.5;
    font-style: italic;
    color: #5a5c69;
    text-align: left;
    margin-top: 0.5rem;
    }
    
    /* Links */
    .external-link {
    color: #3498db;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    transition: color 0.3s ease;
    }
    
    .external-link:hover {
    color: #2980b9;
    text-decoration: none;
    }
    
    .external-link i {
    font-size: 0.75rem;
    }
    
    .phone-link, .email-link {
    color: #3498db;
    text-decoration: none;
    transition: color 0.3s ease;
    }
    
    .phone-link:hover, .email-link:hover {
    color: #2980b9;
    text-decoration: none;
    }
    
    /* Privacy Toggle */
    .privacy-toggle {
    color: #6c757d;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    transition: color 0.3s ease;
    }
    
    .privacy-toggle:hover {
    color: #495057;
    text-decoration: none;
    }
    
    .privacy-content {
    font-family: monospace;
    background: #f8f9fc;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.875rem;
    }
    
    /* Page Title with Client Info */
    h3 small.text-muted {
    font-size: 0.8rem;
    font-weight: 500;
    }

    h3 .badge {
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
    }

    h3 .badge.counter {
        font-size: 1rem;
        padding: 0.25rem 0.5rem;
        border-radius: 50px;
        border: 2px solid #fff;
        box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.51);
    }

    /* Responsive Design */
    @media (max-width: 768px) {
    h3 small.text-muted {
        font-size: 0.75rem;
        margin-top: 0.25rem;
    }

    h3 .badge {
        font-size: 0.65rem;
        padding: 0.2rem 0.4rem;
    }

    .client-header-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
        padding: 1.5rem;
    }
    
    .client-header-content {
        width: 100%;
    }
    
    .client-actions {
        width: 100%;
        justify-content: flex-start;
    }
    
    .info-cards-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .info-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .info-label {
        min-width: auto;
    }
    
    .info-value {
        text-align: left;
        width: 100%;
    }
    
    .address-value {
        text-align: left;
    }
    }
    
    /* Analytics Header Card - Matching Client Header Design */
    .analytics-header-card {
    background: linear-gradient(135deg, #05546c 0%, #5f2323 100%);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    color: white;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    }
    
    .analytics-header-content {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    }
    
    .analytics-icon {
    width: 4rem;
    height: 4rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: white;
    backdrop-filter: blur(10px);
    }
    
    .analytics-header-info h2.analytics-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 0.25rem 0;
    color: white;
    }
    
    .analytics-subtitle {
    font-size: 1rem;
    margin: 0;
    opacity: 0.9;
    color: rgba(255, 255, 255, 0.8);
    }
    
    @media (max-width: 768px) {
    .analytics-header-card {
        padding: 1.5rem;
    }
    
    .analytics-header-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        text-align: left;
    }
    
    .analytics-header-info h2.analytics-title {
        font-size: 1.5rem;
    }
    }
    
    .nav-tabs .nav-link {
    border: none;
    border-radius: 0;
    color: #6c757d;
    font-weight: 500;
    padding: 1rem 1.5rem;
    margin-right: 0;
    transition: all 0.3s ease;
    position: relative;
    background: none;
}



.nav-tabs .nav-link i {
    font-size: 1rem;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.nav-tabs .nav-link.active i,
.nav-tabs .nav-link:hover i {
    opacity: 1;
}

/* Tab badge styling */
.nav-tabs .nav-link .badge {
    font-size: 10px;
    padding: .25rem .25rem;
    background-color: #6c757d;
    border-radius: 30px;
    font-weight: 400;
    min-width: 18px;
    text-align: center;
}

.nav-tabs .nav-link.active .badge {
    background-color: #4e73df;
    color: white;
}

.tab-content {
    min-height: 400px;
}

.tab-pane {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

    /* Modern Analytics Dashboard */
    .analytics-dashboard {
    margin-bottom: 2rem;
    }

/* KPI Cards */
.kpi-section {
    margin-bottom: 3rem;
}

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.kpi-card {
    background: white;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.kpi-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--kpi-color), var(--kpi-color-light));
}

.kpi-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.kpi-primary {
    --kpi-color: #3498db;
    --kpi-color-light: #85c1e5;
}

.kpi-success {
    --kpi-color: #27ae60;
    --kpi-color-light: #7fb069;
}

.kpi-warning {
    --kpi-color: #f39c12;
    --kpi-color-light: #f8c471;
}

.kpi-info {
    --kpi-color: #9b59b6;
    --kpi-color-light: #c39bd3;
}

/* Payment Rating KPI Colors */
.kpi-rating-a-plus {
    --kpi-color: #27ae60;
    --kpi-color-light: #58d68d;
}

.kpi-rating-a {
    --kpi-color: #2ecc71;
    --kpi-color-light: #7fb069;
}

.kpi-rating-b {
    --kpi-color: #f39c12;
    --kpi-color-light: #f8c471;
}

.kpi-rating-c {
    --kpi-color: #e67e22;
    --kpi-color-light: #f0b27a;
}

.kpi-rating-d {
    --kpi-color: #e74c3c;
    --kpi-color-light: #ec7063;
}

.kpi-rating-f {
    --kpi-color: #c0392b;
    --kpi-color-light: #e74c3c;
}

.kpi-rating-pending {
    --kpi-color: #95a5a6;
    --kpi-color-light: #bdc3c7;
}

.kpi-icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--kpi-color), var(--kpi-color-light));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    color: white;
    font-size: 1.5rem;
}

.kpi-content {
    flex: 1;
}

.kpi-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #6c757d;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.kpi-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 0.25rem;
    line-height: 1.2;
}

.kpi-label {
    font-size: 0.875rem;
    color: #95a5a6;
}

/* Charts Section */
.charts-section {
    margin-top: 2rem;
}

.charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 2rem;
}

.chart-full-width {
    grid-column: 1 / -1;
}

/* Velocity Metrics Styles */
.velocity-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    padding: 1.5rem 0;
}

.metric-item {
    text-align: center;
    padding: 1.5rem;
    background: #f8f9fc;
    border-radius: 12px;
    border-left: 4px solid #e3e6f0;
    transition: all 0.3s ease;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.metric-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.metric-value {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #5a5c69;
}

.metric-value.success {
    color: #1cc88a;
    border-left-color: #1cc88a;
}

.metric-value.warning {
    color: #f6c23e;
    border-left-color: #f6c23e;
}

.metric-value.danger {
    color: #e74a3b;
    border-left-color: #e74a3b;
}

.metric-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #5a5c69;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
}

.metric-target {
    font-size: 0.75rem;
    color: #858796;
    font-style: italic;
}

/* Success, Warning, Danger styling for metric items */
.metric-item.success {
    border-left-color: #1cc88a;
    background: rgba(28, 200, 138, 0.05);
}

.metric-item.success .metric-value {
    color: #1cc88a;
}

.metric-item.success .metric-label {
    color: #1cc88a;
}

.metric-item.warning {
    border-left-color: #f6c23e;
    background: rgba(246, 194, 62, 0.05);
}

.metric-item.warning .metric-value {
    color: #f6c23e;
}

.metric-item.warning .metric-label {
    color: #f6c23e;
}

.metric-item.danger {
    border-left-color: #e74a3b;
    background: rgba(231, 74, 59, 0.05);
}

.metric-item.danger .metric-value {
    color: #e74a3b;
}

.metric-item.danger .metric-label {
    color: #e74a3b;
}

.chart-container {
    background: white;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.chart-container:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.chart-header {
    margin-bottom: 1.5rem;
    text-align: center;
}

.chart-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 0.25rem;
}

.chart-subtitle {
    font-size: 0.875rem;
    color: #95a5a6;
    margin: 0;
}

.chart-wrapper {
    position: relative;
    height: 300px;
}

.chart-full-width .chart-wrapper {
    height: 400px;
}

/* History Controls */
/* Modern History Header */
.history-header {
    background: linear-gradient(135deg, #05546c 0%, #5f2323 100%);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    color: white;
    position: relative;
    overflow: hidden;
}

.history-header::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 200px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    transform: translate(50px, -50px);
}

.history-title-section {
    position: relative;
    z-index: 2;
    margin-bottom: 1.5rem;
}

.history-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    display: flex;
    align-items: center;
    color: white;
}

.history-title i {
    font-size: 1.5rem;
    margin-right: 0.75rem;
    opacity: 0.9;
}

.history-subtitle {
    font-size: 1rem;
    margin: 0;
    opacity: 0.9;
    font-weight: 400;
}

/* Enhanced Filter Panel */
.filter-panel {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2rem;
    align-items: end;
}

.filter-section {
    min-width: 0;
}

.filter-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.filter-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    align-items: end;
}

/* Modern Search Input */
.search-container {
    min-width: 320px;
    flex: 1;
}

.search-input-wrapper {
    position: relative;
    display: block;
    width: 100%;
}

.search-input {
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    padding: 0.65rem 3rem 0.65rem 3rem;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    width: 100%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    color: #495057;
}

.search-input::placeholder {
    color: #8e9aaf;
    opacity: 1;
}

.search-input:focus {
    background: white;
    border-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.3), 0 4px 12px rgba(0, 0, 0, 0.15);
    outline: none;
    transform: translateY(-1px);
}

.search-icon {
    position: absolute;
    left: 1.125rem;
    top: 50%;
    transform: translateY(-50%);
    color: #8e9aaf;
    font-size: 1.125rem;
    z-index: 3;
    pointer-events: none;
    transition: color 0.3s ease;
}

.search-input:focus + .search-icon,
.search-input:not(:placeholder-shown) + .search-icon {
    color: #495057;
}

.search-clear-btn {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(108, 117, 125, 0.15);
    border: none;
    color: #6c757d;
    padding: 0.375rem;
    border-radius: 50%;
    transition: all 0.2s ease;
    z-index: 3;
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    opacity: 0;
    visibility: hidden;
}

.search-input:not(:placeholder-shown) ~ .search-clear-btn {
    opacity: 1;
    visibility: visible;
}

.search-clear-btn:hover {
    background: rgba(220, 53, 69, 0.15);
    color: #dc3545;
    transform: translateY(-50%) scale(1.1);
}

/* Filter Group */
.filter-group {
    display: flex;
    gap: 0.75rem;
}

.filter-select {
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    min-width: 140px;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.filter-select:focus {
    background: white;
    border-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
    outline: none;
}

/* Sort Section */
.sort-section {
    min-width: 160px;
}

.sort-select {
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    width: 100%;
}

.sort-select:focus {
    background: white;
    border-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
    outline: none;
}

/* Invoice List Container */
.invoice-list-container {
    margin-top: 1rem;
}

/* Year Groups */
.year-group {
    margin-bottom: 2rem;
}

.year-group.hidden {
    display: none;
}

.year-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.5rem 0 1rem 0;
    border-bottom: 2px solid #e3e6f0;
    margin-bottom: 1rem;
}

.year-header-main {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.year-title {
    font-size: 2rem;
    font-weight: 700;
    color: #2c3e50;
    margin: 0;
    letter-spacing: -0.5px;
}

.year-total {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.total-amount {
    font-size: 1rem;
    font-weight: 700;
    color: #329b60;
    line-height: 1;
}

.total-label {
    font-size: 0.75rem;
    color: #858796;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 0.25rem;
}

/* Stats Toggle Button */
.stats-toggle-btn {
    background: transparent;
    border: none;
    color: #858796;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
}

.stats-toggle-btn:hover {
    background: rgba(229, 231, 235, 0.6);
    color: #5a5c69;
}

.stats-toggle-btn:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(205, 205, 205, 0.2);
}

.stats-toggle-icon {
    font-size: 0.75rem;
    transition: transform 0.3s ease;
}

.stats-toggle-btn.collapsed .stats-toggle-icon {
    transform: rotate(-90deg);
}

.toggle-text {
    font-size: 0.75rem;
}

.year-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.year-count {
    font-size: 0.875rem;
    color: #6c757d;
    background: #f8f9fc;
    padding: 0.375rem 0.875rem;
    border-radius: 20px;
    border: 1px solid #e3e6f0;
    font-weight: 500;
}

/* Year Statistics */
.year-stats {
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, #f8f9fc 0%, #fff 100%);
    border-radius: 12px;
    padding: 1rem;
    border: 1px solid #e3e6f0;
    transition: all 0.3s ease;
    overflow: hidden;
}

.year-stats.collapsed {
    max-height: 0;
    padding: 0 1rem;
    margin-bottom: 0;
    opacity: 0;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0.75rem 0.5rem;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #e3e6f0;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.stat-value {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    margin-bottom: 0.25rem;
}

.stat-label {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.8;
}

/* Stat item colors */
.stat-item.positive .stat-value { color:#3e7b8c; }
.stat-item.positive { border-left: 3px solid #3e7b8c; background: rgba(62, 123, 140, 0.11);}

.stat-item.negative .stat-value { color: #d25538; }
.stat-item.negative { border-left: 3px solid #d25538; background: rgba(210, 85, 56, 0.11);}

.stat-item.success .stat-value { color: #329b60; }
.stat-item.success { border-left: 3px solid #329b60; background: rgba(50, 155, 96, 0.11);}

.stat-item.warning .stat-value { color: #f6c23e; }
.stat-item.warning { border-left: 3px solid #f6c23e; background: rgba(246, 194, 62, 0.11);}

.stat-item.danger .stat-value { color: #d25538; }
.stat-item.danger { border-left: 3px solid #d25538; background: rgba(210, 85, 56, 0.11);}

.stat-item.info .stat-value { color: #36b9cc; }
.stat-item.info { border-left: 3px solid #36b9cc; background: rgba(54, 185, 204, 0.11);}

.year-invoices {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Invoice Items */
.invoice-item {
    background: #fff;
    border: 1px solid #e3e6f0;
    border-radius: 0.35rem;
    transition: all 0.2s ease;
    overflow: visible;
}

.invoice-item:hover {
    border-color: #d1d3e2;
    box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.1);
}

.invoice-item.hidden {
    display: none;
}

.invoice-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
}

.invoice-main {
    display: grid;
    grid-template-columns: auto 1fr auto auto auto;
    gap: 1rem;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.invoice-type .badge {
    font-size: 0.75rem;
    font-weight: 600;
    min-width: 80px;
    text-align: center;
}

.invoice-info {
    min-width: 0;
}

.invoice-number {
    margin-bottom: 0.125rem;
}

.invoice-link {
    color: #5a5c69;
    font-weight: 600;
    text-decoration: none;
    font-size: 1rem;
}

.invoice-link:hover {
    color: #3a3b45;
    text-decoration: none;
}

.invoice-ref {
    margin-top: 0.125rem;
}

.invoice-date {
    color: #858796;
    font-size: 0.875rem;
    min-width: 80px;
    text-align: center;
    line-height: 1.3;
}

/* Payment Timing Indicators */
.payment-timing {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-block;
    margin-top: 0.25rem;
}

.payment-timing.early {
    background: rgba(39, 174, 96, 0.15);
    color: #27ae60;
}

.payment-timing.on-time {
    background: rgba(46, 204, 113, 0.15);
    color: #2ecc71;
}

.payment-timing.late {
    background: rgba(243, 156, 18, 0.15);
    color: #f39c12;
}

.payment-timing.overdue {
    background: rgba(231, 76, 60, 0.15);
    color: #e74c3c;
}

.payment-timing.completed {
    background: rgba(40, 167, 69, 0.15);
    color: #28a745;
    
 }

 .partial-payment-info {
    margin-top: 4px;
    font-size: 0.85em;
    line-height: 1.2;
 }
 
 .partial-payment-info small {
    display: flex;
    align-items: center;
    gap: 4px;
 }
 
 .partial-payment-info .by-icon-info-circle {
    font-size: 0.9em;
    opacity: 0.8;
 }

.invoice-amount {
    font-weight: 600;
    color: #5a5c69;
    text-align: right;
    min-width: 120px;
}

.invoice-amount h5 {
    text-overflow: ellipsis;
    white-space: nowrap !important;
    font-size: 16px;
    color: var(--color-header);
    font-weight: 600;
    margin-bottom: 0;
    display: inline-block;
}

.amount-value {
    font-size: 1rem;
}

.invoice-status {
    min-width: 100px;
    text-align: right;
}

.status-text {
    font-size: 0.875rem;
}

.invoice-actions {
    margin-left: 1rem;
}

/* Modern overdue and draft invoice cards */
.overdue-invoice-row {
    transition: all 0.2s ease;
 }
 
 .overdue-invoice-row:hover .card {
    box-shadow: 0 8px 10px -4px rgba(0,0,0,.15);
 }
 
 .overdue-invoice-row .dropdown {
    position: relative;
 }
 
 .overdue-invoice-row .dropdown.show {
    z-index: 1048;
 }
 
 .overdue-invoice-row .dropdown-menu {
    z-index: 1049;
    position: absolute;
 }
 
 .draft-invoice-row {
    transition: all 0.2s ease;
 }
 
 .draft-invoice-row:hover .card {
    box-shadow: 0 8px 10px -4px rgba(0,0,0,.15);
 }
 
 .draft-invoice-row .dropdown {
    position: relative;
 }
 
 .draft-invoice-row .dropdown.show {
    z-index: 1050;
 }
 
 .draft-invoice-row .dropdown-menu {
    z-index: 1051;
    position: absolute;
 }
 
 .border-left-danger {
    border-left: 4px solid #dc3545 !important;
 }
 
 .border-left-warning {
    border-left: 4px solid #ffc107 !important;
 }
 .border-left-success {
    border-left: 4px solid #28a745 !important;
 }
 .border-left-primary {
    border-left: 4px solid var(--color-header) !important;
 }
 .border-left-secondary {
    border-left: 4px solid #6c757d !important;
 }
 .border-left-info {
    border-left: 4px solid #17a2b8 !important;
 }





/* Group Header Card - similar to client-header-card */
.group-header-card {
    border-radius: 16px 16px 0 0;
    padding: 2rem;
    margin-bottom: 0;
    color: white;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    position: relative;
}

.group-header-card.rounded {
    border-radius: 16px !important;
}

.group-avatar {
    width: 64px;
    height: 64px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    backdrop-filter: blur(10px);
}

.group-header-info h2.group-name {
    font-size: 1.8rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    color: white;
}

.group-header-info .group-meta {
    font-size: 0.9rem;
    margin: 0 0 0.5rem 0;
    opacity: 0.9;
}

.group-header-info .group-description {
    font-size: 0.95rem;
    margin: 0;
    opacity: 0.85;
    max-width: 500px;
    line-height: 1.4;
}

.group-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}



/* Group Filter Panel */
.group-filter-panel {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 0 0 16px 16px;
    padding: 1.5rem 2rem;
    margin-bottom: 1rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.filter-section {
    max-width: 100%;
}

.filter-label {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 1rem;
    display: block;
}

.filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

.search-container {
    flex: 1;
    min-width: 280px;
    max-width: 400px;
}

.search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.search-input {
    width: 100%;
    padding: 0.75rem 2.5rem 0.75rem 2.5rem;
    border: 2px solid #e9ecef;
    border-radius: 25px;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    background: white;
}

.search-input:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.search-icon {
    position: absolute;
    left: 1rem;
    color: #6c757d;
    font-size: 0.9rem;
}

.search-clear-btn {
    position: absolute;
    right: 0.75rem;
    background: none;
    border: none;
    color: #6c757d;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 50%;
    transition: all 0.2s ease;
    display: none;
}

.search-clear-btn:hover {
    background: #f8f9fa;
    color: #495057;
}

.search-input:not(:placeholder-shown) + .search-icon + .search-clear-btn {
    display: block;
}

.filter-group {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}

.filter-select {
    padding: 0.5rem 0.75rem;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    font-size: 0.85rem;
    background: white;
    min-width: 120px;
    transition: all 0.2s ease;
}

.filter-select:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);
}

.sort-order-btn {
    padding: 0.5rem 0.75rem;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sort-order-btn:hover {
    background: #f8f9fa;
    border-color: #adb5bd;
}

/* Responsive adjustments for group header */
@media (max-width: 768px) {
    
    .group-actions {
        width: 100%;
        justify-content: flex-start;
    }
    
    .group-filter-panel {
        padding: 1rem;
    }
    
    .filter-row {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
    
    .search-container {
        min-width: auto;
        max-width: none;
    }
    
    .filter-group {
        justify-content: space-between;
    }
}

/* Outbox header banner - reusing client-header-card styles */

/* Outbox invoice styling */
.outbox-invoice-row {
    transition: all 0.2s ease;
    padding-left: 10px;
}

.outbox-invoice-row:hover .card {
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.outbox-invoice-row:last-child {
   margin-bottom: 40px !important;
}

/* Modern outbox group headers */
.outbox-group-header {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 12px;
    padding: 16px 20px;
    
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border-left: 4px solid #007bff;
    backdrop-filter: blur(10px);
    z-index: 1020;
    position: sticky;
    top: 0px;
}

.outbox-group-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,0.9);
    border-radius: 12px;
    z-index: -1;
}

/* Color variations for different time periods */
.outbox-group-current {
    border-left-color: #28a745;
    background: linear-gradient(135deg, #28a745 0%, #c3e6cb 100%);
}

.outbox-group-next {
    border-left-color: #007bff;
    background: linear-gradient(135deg, #007bff 0%, #bee5eb 100%);
}

.outbox-group-future {
    border-left-color: #ffc107;
    background: linear-gradient(135deg, #ffc107 0%, #ffeaa7 100%);
}

.outbox-group-distant {
    border-left-color: #6c757d;
    background: linear-gradient(135deg, #6c757d 0%, #e9ecef 100%);
}

/* Icon styling */
.outbox-group-header .group-icon-wrapper {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.outbox-group-header .group-icon-wrapper i {
    font-size: 18px;
    color: #495057;
}

.outbox-group-current .group-icon-wrapper i {
    color: #28a745;
}

.outbox-group-next .group-icon-wrapper i {
    color: #007bff;
}

.outbox-group-future .group-icon-wrapper i {
    color: #ffc107;
}

.outbox-group-distant .group-icon-wrapper i {
    color: #6c757d;
}

/* Typography */
.outbox-group-header h5 {
    color: #212529;
    font-size: 1.1rem;
    letter-spacing: -0.02em;
}

.outbox-group-header .text-muted {
    font-size: 0.875rem;
    opacity: 0.8;
}

/* Count badge */
.outbox-group-header .group-count .badge {
    background: rgba(255,255,255,0.9) !important;
    color: #495057 !important;
    font-weight: 600;
    font-size: 0.875rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Sticky state enhancement */
.outbox-group-header.stuck {
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    backdrop-filter: blur(15px);
}

.outbox-group-header.stuck::before {
    background: rgba(255,255,255,0.95);
}

/* Hover effect */
.outbox-group-header:hover {
    transition: all 0.2s ease;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .outbox-group-header {
        margin: 0 4px;
        padding: 12px 16px;
    }
    
    .outbox-group-header .group-icon-wrapper {
        width: 32px;
        height: 32px;
        margin-right: 12px;
    }
    
    .outbox-group-header .group-icon-wrapper i {
        font-size: 14px;
    }
    
    .outbox-group-header h5 {
        font-size: 1rem;
    }
}
 
 
 
 /* Badge styling */
 .badge-sm {
    font-size: 0.7em;
    padding: 0.25em 0.5em;
 }
 
 /* Responsive adjustments for invoice cards */
 @media (max-width: 768px) {
    .overdue-invoice-row,
    .draft-invoice-row {
       margin-bottom: 0.75rem;
    }
    
    .overdue-invoice-row .card-body,
    .draft-invoice-row .card-body {
       padding: 0.75rem;
    }
    
    .invoice-client {
       margin-bottom: 0.25rem;
    }
    
    .invoice-details {
       font-size: 0.9em;
    }
    
    .invoice-details small {
       font-size: 0.8em;
    }
    
    .dropdown:not(.dropdown-inheader) {
       margin-top: 1rem;
    }
 }
 
 @media (max-width: 768px) {
     .invoice-amount {
        min-width: auto;
        text-align: left !important;
     }
     
     .partial-payment-info {
        font-size: 0.8em;
        margin-top: 2px;
     }
     .invoice-amount {
        margin-top: 1rem;
     }
     
     .invoice-client {
        margin-bottom: 0.5rem;
     }
  }

/* Responsive adjustments */
@media (max-width: 768px) {
    /* Tab Navigation Mobile */
    .nav-tabs {
        flex-wrap: nowrap;
        /* overflow-x: auto;
        padding-bottom: 2px; */
        -webkit-overflow-scrolling: touch;
    }
    
    .nav-tabs .nav-link {
        padding: 0.75rem 1rem;
        white-space: nowrap;
        font-size: 0.875rem;
    }
    
    .nav-tabs .nav-link i {
        font-size: 0.875rem;
    }

    .nav-tabs .nav-link .badge {
        font-size: 0.675rem;
        padding: 0.125rem 0.375rem;
    }
    
    /* Analytics Dashboard Mobile */
    .dashboard-title {
        font-size: 1.5rem;
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .kpi-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .charts-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .chart-wrapper {
        height: 250px;
    }
    
    .chart-full-width .chart-wrapper {
        height: 300px;
    }
    
    /* History Header Mobile */
    .history-header {
        padding: 1.5rem;
    }
    
    .history-title {
        font-size: 1.5rem;
    }
    
    .history-subtitle {
        font-size: 0.875rem;
    }
    
    /* Filter Panel Mobile */
    .filter-panel {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .filter-row {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .search-container {
        min-width: auto;
        width: 100%;
    }
    
    .filter-group {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .filter-select {
        min-width: auto;
        width: 100%;
    }
    
    .sort-section {
        min-width: auto;
    }
    
    /* Year Statistics Mobile */
    .year-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .year-header-main {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        width: 100%;
    }
    
    .year-title {
        font-size: 1.5rem;
    }
    
    .total-amount {
        font-size: 1.25rem;
    }
    
    .year-meta {
        align-self: flex-start;
        flex-wrap: wrap;
        gap: 0.75rem;
    }
    
    .stats-toggle-btn {
        padding: 0.125rem 0.375rem;
        font-size: 0.675rem;
    }
    
    .toggle-text {
        font-size: 0.675rem;
    }
    
    .stats-toggle-icon {
        font-size: 0.675rem;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    
    .stat-item {
        padding: 0.5rem 0.375rem;
    }
    
    .invoice-main {
        grid-template-columns: 1fr;
        gap: 0.5rem;
        text-align: left;
    }
    
    .invoice-content {
        flex-direction: column;
        align-items: stretch;
        padding: 0.75rem;
    }
    
    .invoice-actions {
        margin-left: 0;
        margin-top: 0.5rem;
        align-self: flex-end;
    }
    
    .invoice-date,
    .invoice-amount,
    .invoice-status {
        text-align: left;
        min-width: auto;
    }
    
    .payment-timing {
        font-size: 0.675rem;
        padding: 0.1rem 0.25rem;
        margin-top: 0.125rem;
    }

    .velocity-metrics {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 1rem 0;
    }

    .metric-item {
        padding: 1rem;
        min-height: 100px;
    }

    .metric-value {
        font-size: 1.5rem;
    }

    .metric-label {
        font-size: 0.75rem;
    }
    
    .history-controls {
        width: 100%;
    }
    
    .history-controls .input-group,
    .history-controls select {
        width: 100% !important;
        max-width: none !important;
    }
    
    .invoice-card-header {
        padding: 0.5rem 0.75rem;
    }
    
    .invoice-card-body {
        padding: 0.75rem;
        gap: 0.5rem;
    }
}

@media (max-width: 576px) {
    .d-flex.flex-wrap.gap-2.history-controls {
        flex-direction: column;
        gap: 0.75rem;
    }
}

/* Animation for filtering */
.invoice-card {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* clients page */
.client-card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    border: 1px solid rgba(0,0,0,.1);
}

.client-card:hover {
    transform: translateY(-0.5px);
    box-shadow: 0 8px 25px rgba(0,0,0,.15) !important;
}

.client-list-item {
    transition: background-color 0.2s ease-in-out;
    border-left: 3px solid rgba(0,0,0,.125);
}

.client-list-item:hover {
    background-color: #fafafa !important;
    border-left-color: var(--color-header) !important;
    border-left-width: 3px;
}

.icon-lg {
    font-size: 1.5rem;
}

#clientStats .card {
    transition: transform 0.2s ease-in-out;
}

@media (max-width: 991px) {
    /* Responsive adjustments for search and filter controls */
    .client-search-filters {
        width: 100%;
    }
    
    .client-search-filters .input-group {
        max-width: 100% !important;
    }
    
    .client-search-filters select {
        width: auto !important;
        min-width: 120px !important;
        flex: 1;
    }
    
    /* View controls move to full width on mobile */
    .client-view-controls {
        width: 100%;
        justify-content: center;
        margin-top: 15px;
    }
}

@media (max-width: 768px) {
    /* Mobile adjustments for client list items */
    .client-list-item .row > div {
        margin-bottom: 10px;
    }
    
    .client-list-item .col-md-1 {
        text-align: left !important;
    }
    
    /* Stack filter controls on very small screens */
    .client-search-filters .d-flex.flex-wrap > * {
        margin-bottom: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Sort controls stay together */
    .client-search-filters .d-flex.align-items-center {
        width: 100% !important;
    }
    
    .client-search-filters .d-flex.align-items-center select {
        flex: 1;
        margin-right: 8px !important;
    }
    
    .client-search-filters .d-flex.align-items-center button {
        flex-shrink: 0;
    }
}



@media (max-width: 576px) {
    /* Extra small screens */
    .client-search-filters select {
        font-size: 14px;
        min-width: 100px !important;
    }
}

.badge-group {
    font-size: 0.75rem;
    margin-right: 0.25rem;
    margin-bottom: 0.25rem;
}

.spinner-border:not(.spinner-border-sm) {
    width: 3rem;
    height: 3rem;
}

/* Styles borrowed from Bootstrap 5 for backport */

.top-0 {
  top: 70px !important;
}

.top-50 {
  top: 50% !important;
}

.bottom-0 {
  bottom: 0 !important;
}

.left-0 {
  left: 0 !important;
}

.left-50 {
  left: 50% !important;
}

.right-0 {
  right: 0 !important;
}

.translate-middle {
  transform: translate(-50%, -50%) !important;
}

.translate-middle-x {
  transform: translateX(-50%) !important;
}

.translate-middle-y {
  transform: translateY(-50%) !important;
}

.opacity-90 {
    opacity: 0.9 !important;
  }
  .opacity-80 {
    opacity: 0.8 !important;
  }
  .opacity-70 {
    opacity: 0.7 !important;
  }
  .opacity-60 {
    opacity: 0.6 !important;
  }
  .opacity-50 {
    opacity: 0.5 !important;
  }
  .opacity-40 {
    opacity: 0.4 !important;
  }
  .opacity-30 {
    opacity: 0.3 !important;
  }
  .opacity-20 {
    opacity: 0.2 !important;
  }
  .opacity-10 {
    opacity: 0.1 !important;
  }
  
  .translate-top-2 {
    -webkit-transform: translate(0, -2rem);
    transform: translate(0, -2rem);
  }
  .translate-top-1 {
    -webkit-transform: translate(0, -1rem);
    transform: translate(0, -1rem);
  }
  
  .particle-move-up-1 {
    left: 25%;
    -webkit-animation-name: moveups;
    animation-name: moveups;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-duration: 45s;
    animation-duration: 45s;
  }
  .particle-move-up-2 {
    left: 10%;
    -webkit-animation-name: moveups;
    animation-name: moveups;
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
    -webkit-animation-duration: 32s;
    animation-duration: 32s;
  }
  .particle-move-up-3 {
    left: 70%;
    -webkit-animation-name: moveups;
    animation-name: moveups;
    -webkit-animation-delay: 4s;
    animation-delay: 4s;
    -webkit-animation-duration: 36s;
    animation-duration: 36s;
  }
  .particle-move-up-4 {
    left: 40%;
    -webkit-animation-name: moveups;
    animation-name: moveups;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-duration: 27s;
    animation-duration: 27s;
  }
  .particle-move-up-5 {
    left: 65%;
    -webkit-animation-name: moveups;
    animation-name: moveups;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-duration: 38s;
    animation-duration: 38s;
  }
  .particle-move-up-6 {
    left: 75%;
    -webkit-animation-name: moveups;
    animation-name: moveups;
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
    -webkit-animation-duration: 25s;
    animation-duration: 25s;
  }
  .particle-move-up-7 {
    left: 35%;
    -webkit-animation-name: moveups;
    animation-name: moveups;
    -webkit-animation-delay: 7s;
    animation-delay: 7s;
    -webkit-animation-duration: 25s;
    animation-duration: 25s;
  }
  .particle-move-up-8 {
    left: 50%;
    -webkit-animation-name: moveups;
    animation-name: moveups;
    -webkit-animation-delay: 15s;
    animation-delay: 15s;
    -webkit-animation-duration: 45s;
    animation-duration: 45s;
  }
  .particle-move-up-9 {
    right: 15%;
    -webkit-animation-name: moveups;
    animation-name: moveups;
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
    -webkit-animation-duration: 35s;
    animation-duration: 35s;
  }
  @keyframes moveups {
    0%{
      transform: translateY(0);
      opacity: 1;
      border-radius: 0;
    }
    100%{
      transform: translateY(-1000px);
      opacity: 0;
      border-radius: 50%;
    }
  }
  
  .z-index-n1 {
    z-index: -1;
  }
  
  .scribble:not(.position-relative) {
    position: absolute;
  }
  .scribble svg {
    background: none !important;
  }
  
  .start-0 {
    left: 0 !important;
  }
  


.scale-1 svg {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  .scale-2 svg {
    -webkit-transform: scale(2);
    transform: scale(2);
  }
  .scale-3 svg {
    -webkit-transform: scale(3);
    transform: scale(3);
  }
  .scale-4 svg {
    -webkit-transform: scale(4);
    transform: scale(4);
  }
  .scale-5 svg {
    -webkit-transform: scale(5);
    transform: scale(5);
  }
  .scale-6 svg {
    -webkit-transform: scale(6);
    transform: scale(6);
  }
  .scale-7 svg {
    -webkit-transform: scale(7);
    transform: scale(7);
  }
  .scale-8 svg {
    -webkit-transform: scale(8);
    transform: scale(8);
  }
  .scale-9 svg {
    -webkit-transform: scale(9);
    transform: scale(9);
  }
  .scale-10 svg {
    -webkit-transform: scale(10);
    transform: scale(10);
  }
  
  .particle-move-up-1, .particle-move-up-2, .particle-move-up-3, .particle-move-up-4, .particle-move-up-5, .particle-move-up-6, .particle-move-up-7, .particle-move-up-8, .particle-move-up-9 {
      -webkit-animation-iteration-count: infinite;
      animation-iteration-count: infinite;
      -webkit-animation-timing-function: linear;
      animation-timing-function: linear;
  }
  
  .particle-move-up {
      position: absolute;
      display: block;
      list-style: none;
      bottom: -150px;
  }

/* Modern Earnings Chart Styles */
#modernEarningsChart {
    max-height: 400px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

/* Chart container styling */
.card-body canvas {
    border-radius: 6px;
}

/* Summary stats styling */
.card-body .row .col-6 .text-center {
    padding: 8px;
    border-radius: 6px;
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(5px);
    transition: all 0.2s ease;
}

.card-body .row .col-6 .text-center:hover {
    background: rgba(255,255,255,0.9);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

@media (max-width: 768px) {
    #modernEarningsChart {
        max-height: 300px;
    }
    
    .card-body .row .col-6 {
        margin-bottom: 15px;
    }
    
    .card-body .row .col-6 small {
        font-size: 11px;
    }
    
    .card-body .row .col-6 strong {
        font-size: 14px;
    }
    
    /* Optimize chart spacing on mobile */
    .card-body canvas {
        margin: 0 -10px;
    }
    
    /* Reduce legend spacing on mobile */
    .chart-legend {
        margin-bottom: 10px;
    }
}

@media (max-width: 576px) {
    #modernEarningsChart {
        max-height: 250px;
    }
    
    .card-header h5 {
        font-size: 16px;
    }
    
    .card-body .row .col-6 .text-center {
        padding: 6px;
        margin-bottom: 8px;
    }
}

/* Modern Revenue Cards Styling */
.revenue-progress .progress {
    border-radius: 10px;
    background-color: rgba(0,0,0,0.05);
}

.revenue-progress .progress-bar {
    border-radius: 10px;
    transition: width 0.6s ease;
}

.stat-card {
    padding: 15px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(248,249,250,0.8) 100%);
    border: 1px solid rgba(0,0,0,0.05);
    transition: all 0.2s ease;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.stat-value {
    font-size: 16px;
    font-weight: bold;
    color: #2c3e50;
    margin-bottom: 4px;
}

.stat-label {
    font-size: 12px;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Revenue KPI Grid Styling */
.revenue-kpi-container {
    position: relative;
}

.revenue-kpi-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.revenue-kpi-container .kpi-item {
    display: flex;
    align-items: center;
    padding: 12px;
    border-radius: 8px;
    background: rgba(255,255,255,0.6);
    border: 1px solid rgba(0,0,0,0.05);
    transition: all 0.2s ease;
}

.revenue-kpi-container .kpi-item:hover {
    background: rgba(255,255,255,0.9);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.revenue-kpi-container .kpi-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    color: white;
    font-size: 14px;
}

.revenue-kpi-container .kpi-content {
    flex: 1;
}

.revenue-kpi-container .kpi-value {
    font-size: 14px;
    font-weight: bold;
    color: #2c3e50;
    margin-bottom: 2px;
}

.revenue-kpi-container .kpi-label {
    font-size: 11px;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Collection Rate Styling */
.collection-rate .progress {
    border-radius: 12px;
    background-color: rgba(0,0,0,0.05);
}

.collection-rate .progress-bar {
    border-radius: 12px;
    transition: width 0.8s ease;
}

.collection-rate .badge {
    font-size: 12px;
    padding: 6px 12px;
}

/* Medium/Small Desktop and Tablet Optimizations */
@media (max-width: 991.98px) {
    .revenue-kpi-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    
    .revenue-kpi-container .kpi-item {
        padding: 10px;
    }
    
    .revenue-kpi-container .kpi-value {
        font-size: 13px;
    }
    
    .revenue-kpi-container .kpi-icon {
        width: 34px;
        height: 34px;
        margin-right: 10px;
        font-size: 13px;
    }
}

/* Small Tablet Optimizations */
@media (max-width: 767.98px) {
    .revenue-kpi-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    
    .revenue-kpi-container .kpi-item {
        padding: 8px;
    }
    
    .revenue-kpi-container .kpi-value {
        font-size: 12px;
    }
    
    .revenue-kpi-container .kpi-icon {
        width: 32px;
        height: 32px;
        margin-right: 8px;
        font-size: 12px;
    }
}

/* Mobile Optimizations for Revenue Cards */
@media (max-width: 576px) {
    .revenue-kpi-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    .revenue-kpi-container .kpi-item {
        padding: 10px;
    }
    
    .revenue-kpi-container .kpi-icon {
        width: 32px;
        height: 32px;
        margin-right: 10px;
        font-size: 12px;
    }
    
    .stat-card {
        padding: 12px;
    }
    
    .stat-value {
        font-size: 14px;
    }
}

/* Outbox Totals Styling */
.badge-lg {
    font-size: 0.9rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.outbox-group-header .group-count .badge {
    font-size: 0.75rem;
    font-weight: 600;
    min-width: 60px;
    text-align: center;
}

.outbox-group-header .group-count .badge-dark {
    background-color: #495057 !important;
    color: white !important;
    border: 1px solid rgba(255,255,255,0.1);
}

.outbox-group-header .group-count .badge-light {
    background: rgba(255,255,255,0.95) !important;
    color: #495057 !important;
    border: 1px solid rgba(0,0,0,0.1);
}

/* Header Badge Styling */
.client-header-info .badge-primary {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%) !important;
    color: white !important;
    font-weight: 600;
    letter-spacing: 0.5px;
}


@media (min-width: 576px) {
    .border-sm-top {
      border-top: 1px solid #e3e7eb !important;
    }
    .border-sm-right {
      border-right: 1px solid #e3e7eb !important;
    }
    .border-sm-bottom {
      border-bottom: 1px solid #e3e7eb !important;
    }
    .border-sm-left {
      border-left: 1px solid #e3e7eb !important;
    }
    .border-sm-top-0 {
      border-top: 0 !important;
    }
    .border-sm-right-0 {
      border-right: 0 !important;
    }
    .border-sm-bottom-0 {
      border-bottom: 0 !important;
    }
    .border-sm-left-0 {
      border-left: 0 !important;
    }
    .border-sm-x {
      border-left: 1px solid #e3e7eb !important;
      border-right: 1px solid #e3e7eb !important;
    }
    .border-sm-y {
      border-top: 1px solid #e3e7eb !important;
      border-bottom: 1px solid #e3e7eb !important;
    }
    .border-sm {
      border-top: 1px solid #e3e7eb !important;
      border-bottom: 1px solid #e3e7eb !important;
      border-left: 1px solid #e3e7eb !important;
      border-right: 1px solid #e3e7eb !important;
    }
    .border-sm-0 {
      border-top: 0 !important;
      border-bottom: 0 !important;
      border-left: 0 !important;
      border-right: 0 !important;
    }
  }
  
  @media (min-width: 768px) {
    .border-md-top {
      border-top: 1px solid #e3e7eb !important;
    }
    .border-md-right {
      border-right: 1px solid #e3e7eb !important;
    }
    .border-md-bottom {
      border-bottom: 1px solid #e3e7eb !important;
    }
    .border-md-left {
      border-left: 1px solid #e3e7eb !important;
    }
    .border-md-top-0 {
      border-top: 0 !important;
    }
    .border-md-right-0 {
      border-right: 0 !important;
    }
    .border-md-bottom-0 {
      border-bottom: 0 !important;
    }
    .border-md-left-0 {
      border-left: 0 !important;
    }
    .border-md-x {
      border-left: 1px solid #e3e7eb !important;
      border-right: 1px solid #e3e7eb !important;
    }
    .border-md-y {
      border-top: 1px solid #e3e7eb !important;
      border-bottom: 1px solid #e3e7eb !important;
    }
    .border-md {
      border-top: 1px solid #e3e7eb !important;
      border-bottom: 1px solid #e3e7eb !important;
      border-left: 1px solid #e3e7eb !important;
      border-right: 1px solid #e3e7eb !important;
    }
    .border-md-0 {
      border-top: 0 !important;
      border-bottom: 0 !important;
      border-left: 0 !important;
      border-right: 0 !important;
    }
  }
  
  @media (min-width: 992px) {
    .border-lg-top {
      border-top: 1px solid #e3e7eb !important;
    }
    .border-lg-right {
      border-right: 1px solid #e3e7eb !important;
    }
    .border-lg-bottom {
      border-bottom: 1px solid #e3e7eb !important;
    }
    .border-lg-left {
      border-left: 1px solid #e3e7eb !important;
    }
    .border-lg-top-0 {
      border-top: 0 !important;
    }
    .border-lg-right-0 {
      border-right: 0 !important;
    }
    .border-lg-bottom-0 {
      border-bottom: 0 !important;
    }
    .border-lg-left-0 {
      border-left: 0 !important;
    }
    .border-lg-x {
      border-left: 1px solid #e3e7eb !important;
      border-right: 1px solid #e3e7eb !important;
    }
    .border-lg-y {
      border-top: 1px solid #e3e7eb !important;
      border-bottom: 1px solid #e3e7eb !important;
    }
    .border-lg {
      border-top: 1px solid #e3e7eb !important;
      border-bottom: 1px solid #e3e7eb !important;
      border-left: 1px solid #e3e7eb !important;
      border-right: 1px solid #e3e7eb !important;
    }
    .border-lg-0 {
      border-top: 0 !important;
      border-bottom: 0 !important;
      border-left: 0 !important;
      border-right: 0 !important;
    }
  }
  
  @media (min-width: 1200px) {
    .border-xl-top {
      border-top: 1px solid #e3e7eb !important;
    }
    .border-xl-right {
      border-right: 1px solid #e3e7eb !important;
    }
    .border-xl-bottom {
      border-bottom: 1px solid #e3e7eb !important;
    }
    .border-xl-left {
      border-left: 1px solid #e3e7eb !important;
    }
    .border-xl-top-0 {
      border-top: 0 !important;
    }
    .border-xl-right-0 {
      border-right: 0 !important;
    }
    .border-xl-bottom-0 {
      border-bottom: 0 !important;
    }
    .border-xl-left-0 {
      border-left: 0 !important;
    }
    .border-xl-x {
      border-left: 1px solid #e3e7eb !important;
      border-right: 1px solid #e3e7eb !important;
    }
    .border-xl-y {
      border-top: 1px solid #e3e7eb !important;
      border-bottom: 1px solid #e3e7eb !important;
    }
    .border-xl {
      border-top: 1px solid #e3e7eb !important;
      border-bottom: 1px solid #e3e7eb !important;
      border-left: 1px solid #e3e7eb !important;
      border-right: 1px solid #e3e7eb !important;
    }
    .border-xl-0 {
      border-top: 0 !important;
      border-bottom: 0 !important;
      border-left: 0 !important;
      border-right: 0 !important;
    }
  }


    /* Custom column widths */
    .col-w-250 {
        width: 250px !important;
        flex: 0 0 250px !important;
    }
    .col-w-200 {
        width: 200px !important;
        flex: 0 0 200px !important;
    }
    .col-w-150 {
        width: 150px !important;
        flex: 0 0 150px !important;
    }
    .col-w-100 {
        width: 100px !important;
        flex: 0 0 100px !important;
    }
    .col-w-50 {
        width: 50px !important;
        flex: 0 0 50px !important;
    }


  .gap-0	{gap: 0;}
  .gap-1	{gap: 0.25rem;}
  .gap-2	{gap: 0.5rem;}
  .gap-3	{gap: 0.75rem;}
  .gap-4	{gap: 1rem;}
  .gap-5	{gap: 1.25rem;}
  .gap-6	{gap: 1.5rem;}
  .gap-7	{gap: 1.75rem;}
  .gap-8	{gap: 2rem;}
  .gap-9	{gap: 2.25rem;}
  .gap-10	{gap: 2.5rem;}
  .gap-11	{gap: 2.75rem;}
  .gap-12	{gap: 3rem;}
  .gap-14	{gap: 3.5rem;}
  .gap-16	{gap: 4rem;}
  .gap-20	{gap: 5rem;}
  .row-gap-0	{row-gap: 0;}
  .row-gap-1	{row-gap: 0.25rem;}
  .row-gap-2	{row-gap: 0.5rem;}
  .row-gap-3	{row-gap: 0.75rem;}
  .row-gap-4	{row-gap: 1rem;}
  .row-gap-5	{row-gap: 1.25rem;}
  .row-gap-6	{row-gap: 1.5rem;}
  .row-gap-7	{row-gap: 1.75rem;}
  .row-gap-8	{row-gap: 2rem;}
  .row-gap-9	{row-gap: 2.25rem;}
  .row-gap-10	{row-gap: 2.5rem;}
  .row-gap-11	{row-gap: 2.75rem;}
  .row-gap-12	{row-gap: 3rem;}
  .row-gap-14	{row-gap: 3.5rem;}
  .row-gap-16	{row-gap: 4rem;}
  .row-gap-20	{row-gap: 5rem;}
  .column-gap-0	{column-gap: 0;}
  .column-gap-1	{column-gap: 0.25rem;}
  .column-gap-2	{column-gap: 0.5rem;}
  .column-gap-3	{column-gap: 0.75rem;}
  .column-gap-4	{column-gap: 1rem;}
  .column-gap-5	{column-gap: 1.25rem;}
  .column-gap-6	{column-gap: 1.5rem;}
  .column-gap-7	{column-gap: 1.75rem;}
  .column-gap-8	{column-gap: 2rem;}
  .column-gap-9	{column-gap: 2.25rem;}
  .column-gap-10	{column-gap: 2.5rem;}
  .column-gap-11	{column-gap: 2.75rem;}
  .column-gap-12	{column-gap: 3rem;}
  .column-gap-14	{column-gap: 3.5rem;}
  .column-gap-16	{column-gap: 4rem;}
  .column-gap-20	{column-gap: 5rem;}

.collector_status_bubble{
    display: inline-block;
    padding-right: 3px;
    height: 12px;
    width: 16px;
    vertical-align: middle;
    line-height: 12px;
}
.collector_status_bubble svg{
    display: block;
}
.collector_status_bubble .bubble_front.processing {
    fill: rgba(255, 136, 0, 0.9);
  }
  .collector_status_bubble .bubble_back.processing {
    fill: transparent;
    stroke: rgba(255, 136, 0, 0.3);
  }
  .collector_status_bubble .bubble_front.queued {
    fill: rgba(34, 134, 25, 0.9);
  }
  .collector_status_bubble .bubble_back.queued {
    fill: transparent;
    stroke: rgba(34, 134, 25, 0.3);
  }