:root {
    --hu-green: #00B7AF;
    --hu-blue: #2E84DD;
    --hu-red: #FF435A;
    --hu-nav: #26405A;
    /*menu nav*/
    --hu-green-1: #54BDBF;
    /*button*/
    --hu-green-2: #009b94;
    --hu-red-1: #FF536B;
    --hu-red-2: #FF0000;
    /* button focus */
    --hu-grey: #8C8C8C;
    --hu-grey-1: #E3E6E9;
    --hu-grey-2: #C3C6C9;
    --hu-dark: #151515;
    --hu-dark-2: #555555;
    /* graph */
    --hu-g1-1: #E3F4DB;
    --hu-g1-2: #C7EDC3;
    --hu-g1-3: #ACE5B3;
    --hu-g1-4: #95DCAE;
    --hu-g1-5: #7FD3AF;
    --hu-g1-6: #69C9B6;
    --hu-g1-7: #54BDBF;
    --hu-g1-h1: #aadd92;
    --hu-g1-h2: #87d87e;
    --hu-g1-h3: #6ed17b;
    --hu-g1-h4: #5dc983;
    --hu-g1-h5: #4cc18f;
    --hu-g1-h6: #40b39d;
    --hu-g1-h6: #3b9ea0;
    --hu-g-graph: #69b3a2;
    /*not used*/
    /* 25 40 55 darken of blue*/
    /*
    --hu-panel-1: #2176ce;
    --hu-panel-1a: #1c62ac;
    --hu-panel-1b: #164f89;
    --hu-panel-1c: #103b67;
    */
    /* 10 25 40 55 darken of green*/
    /*
    --hu-panel-4: #00a49d;
    --hu-panel-4a: #008983;
    --hu-panel-4b: #006d69;

    --hu-light-grey-1: #F2F5F7;
    --hu-panel-p1: #00B7AF;
    --hu-panel-6: #67C3CD;
    --hu-panel-7: #75C8D7;
    --hu-panel-8: #89CEDF;
    --hu-panel-9: #A0D6E1;
    --hu-panel-10: #B5DFEF;
    --hu-panel-12: #A6A6A6;
    --hu-panel-13: #BFBFBF;
    --hu-panel-14: #D9D9D9;
    --hu-panel-15: #F2F2F2;
    --hu-panel-16: #76aee8;
    */
}

body {
    background-color: unset;
}

body.mini-navbar nav.fixed-top .nav-left {
    margin-left: 70px;
    transition-duration: 0.4s;
}

:not(.mini-navbar) nav.fixed-top .nav-left {
    margin-left: 150px;
    transition-duration: 0.4s;
}

body.mini-navbar nav.fixed-top .nav-left,
body.mini-navbar div.nav-left {
    margin-left: 70px;
    transition-duration: 0.4s;
}

:not(.mini-navbar) nav.fixed-top .nav-left,
:not(.mini-navbar) div.nav-left {
    margin-left: 158px;
    transition-duration: 0.4s;
}

:not(.mini-navbar) .menu-pop {
    display: none;
}

.mini-navbar .menu-pop {
    display: block;
    
}


.bootstrap-select {
    z-index: 4000 !important;
}

.navbar-static-side {
    z-index: 2001;
    width: 160px;
}

@media (max-width: 768px) {
    :not(.mini-navbar) nav.navbar-static-side {
        display: none;
        transition-duration: 0.4s;
    }

    .mini-navbar nav.navbar-static-side {
        display: block;
    }

    :not(.mini-navbar) nav.fixed-top .nav-left {
        margin-left: 0px;
        transition-duration: 0.4s;
    }

    :not(.mini-navbar) div.nav-left {
        margin-left: 0px;
        transition-duration: 0.4s;
    }
}

@media (max-width: 1280px) {
    body {
        font-size: .75em;
    }

    #filterInput {
        max-width: 13em;
    }

    .input-group.filter-w {
        min-width: 13em;
    }

    .scenario-list, .mail-list, .batch-list, .link-list {
        max-width: 13em;
    }

    /* .custom-select-sm {
        font-size: 1em;
    } */
    /* .input-group-sm>.form-control, .input-group-sm>.custom-select, .input-group-sm>.input-group-prepend>.input-group-text, .input-group-sm>.input-group-append>.input-group-text, .input-group-sm>.input-group-prepend>.btn, .input-group-sm>.input-group-append>.btn {
        font-size: 1em;
    } */
    .card-width {
        min-width: 14rem;
    }
}

@media (min-width: 1281px) {
    .card-width {
        min-width: 17rem;
    }
}

@media (max-height: 600px) {
    .v-block {
        height: 27rem;
        max-height: 27rem;
    }

    .v-block-m {
        min-height: 27rem;
    }
}

@media (min-height:601px) {
    .v-block {
        height: 30rem;
        max-height: 30rem;
    }

    .v-block-m {
        min-height: 30rem;
    }
}

.card-hover:hover {
    background-color: rgba(0, 0, 0, 0.08);
    cursor: pointer;
}

#page-wrapper .nav-top-margin {
    margin-top: 70px;
}

nav.fixed-left {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1040;
    height: 100%
}

/*
------------------------------------------------------------
Colors
------------------------------------------------------------
 */
.bg-grey-hu {
    background-color: var(--hu-grey-1) !important;
    color: var(--hu-dark);
}

.bg-green-hu {
    background-color: var(--hu-green) !important;
    color: white;
}

.dark-hu {
    color: var(--hu-dark-2);
    font-weight: 100 !important;
}

/*
------------------------------------------------------------
Navigation Bar
------------------------------------------------------------
 */
#page-wrapper {
    padding: 0;
    position: relative !important;
    flex-shrink: 1;
    width: calc(100% - 190px);
}

.bg-nav {
    background-color: var(--hu-nav);
}

/*
------------------------------------------------------------
Navigation Bar
------------------------------------------------------------
 */
.navbar-default {
    border-color: var(--hu-nav);
    background-color: var(--hu-nav);
}

.nav>li.active {
    border-left: 5px solid white;
    background: var(--hu-green-1);
}

.navbar-default>li>a, .navbar-light .navbar-nav .show>.nav-link {
    color: white;
}

.navbar-default .nav>li.active>a:hover {
    background-color: var(--hu-green-1);
    filter: brightness(90%);
}

.navbar-default .nav>li>a:hover {
    background-color: var(--hu-nav);
    filter: brightness(90%);
}

.nav-header, #main-nav, #side-menu,
body.mini-navbar .nav-header {
    background-color: var(--hu-nav);
    background-image: unset;
}

/*
------------------------------------------------------------
Buttons
------------------------------------------------------------
*/
.grey-hu {
    color: #676a6c;
    background-color: #fff;
}

.primary-hu {
    color: var(--hu-green-1);
    background-color: #fff;
}
.hu-green {
    color: var(--hu-green-1);
}

.icon-primary-hu {
    color: var(--hu-green-1);
    background-color: #fff;
    border-color: var(--hu-green-1);
    border: 1px;
}

.btn-primary-hu, .badge-primary-hu {
    color: #fff;
    background-color: var(--hu-green-1);
    border-color: var(--hu-green-1);
}
.pointer {
  cursor: pointer;
}

.custom-file-input:hover~.custom-file-label::after,
.btn-primary-hu:hover,
.btn-primary-hu:focus,
.btn-primary-hu.focus {
    background-color: var(--hu-green-2);
    border-color: var(--hu-green-2);
    color: #FFFFFF;
}

.btn-primary-hu.disabled,
.btn-primary-hu:disabled,
.btn-alert-hu.disabled,
.btn-alert-hu:disabled {
    color: #000;
    background-color: var(--hu-grey-1);
    border-color: var(--hu-grey-1);
}

.btn-primary-hu:not(:disabled):not(.disabled):active,
.btn-primary-hu:not(:disabled):not(.disabled).active,
.show>.btn-primary-hu.dropdown-toggle {
    color: #fff;
    background-color: var(--hu-green-1);
    border-color: var(--hu-green-1);
}

/*
    Alert
*/
.btn-alert-hu,
.badge-alert-hu {
    color: #fff;
    background-color: var(--hu-red-1);
    border-color: var(--hu-red-1);
}

.btn-alert-hu:not(:disabled):not(.disabled):hover,
.btn-alert-hu:not(:disabled):not(.disabled):focus,
.btn-alert-hu:not(:disabled):not(.disabled).focus {
    background-color: var(--hu-red-2);
    border-color: var(--hu-red-2);
    color: #FFFFFF;
}

.btn-alert-hu:not(:disabled):not(.disabled):active,
.btn-alert-hu:not(:disabled):not(.disabled).active,
.show>.btn-alert-hu.dropdown-toggle {
    color: #fff;
    background-color: var(--hu-red-1);
    border-color: var(--hu-red-1);
}

.btn-primary-hu:not(:disabled):not(.disabled):active:focus,
.btn-primary-hu:not(:disabled):not(.disabled).active:focus,
.show>.btn-primary-hu.dropdown-toggle:focus,
.btn-alert-hu:not(:disabled):not(.disabled):active:focus,
.btn-alert-hu:not(:disabled):not(.disabled).active:focus,
.show>.btn-alert-hu.dropdown-toggle:focus {
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.btn-link:hover {
    color: var(--hu-green-2);
}

.btn-link:hover,
.btn-link:focus,
.btn-link:active,
.btn-link.active,
.open .dropdown-toggle.btn-link {
    color: var(--hu-green-2);
    text-decoration: none;
}

.btn-link-blue {
    color: var(--hu-blue);
}

.btn-link-blue:hover {
    color: #0056b3;
}

.btn-link-blue:hover,
.btn-link-blue:focus,
.btn-link-blue:active,
.btn-link-blue.active,
.open .dropdown-toggle.btn-link {
    color: #0056b3;
    text-decoration: none;
}

.btn-primary-hu:not(:disabled):not(.disabled):active:focus,
.btn-primary-hu:not(:disabled):not(.disabled).active:focus,
.show>.btn-primary-hu.dropdown-toggle:focus {
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.btn-outline-light {
    color: #676a6c;
    border-color: transparent;
}

.btn-outline-light:hover {
    color: var(--hu-green-1);
    border-color: var(--hu-grey);
}

tr:hover .btn-outline-light {
    color: var(--hu-green-1);
    background-color: white;
}

/*
------------------------------------------------------------
Tables
------------------------------------------------------------
*/

.tableHeight400 {

    min-height: 400px;

}



td {
    font-size: 0.8rem;
}
th {
    /* font-size: 0.9rem; */
}
.page-group {
    height: 2rem;
}

.b-table>thead>tr>th[role=columnheader] {
    vertical-align: middle;
}

.pagination li.page-item.disabled span,
.pagination li.page-item:not(.active) .page-link {
    color: #6c757d;
    padding: 0.25rem 0.5rem;
    line-height: 1.5;
}

.pagination li.page-item.active .page-link,
.pagination li.page-item:not(.disabled):not(.active) .page-link:hover {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
    border: 1px 0px;
    padding: 0.25rem 0.5rem;
    line-height: 1.5;
}

.page-item.active .page-link {
    background-color: var(--hu-green-1);
    border-color: var(--hu-green-1);
}

.table-responsive {
    overflow-y: visible;
}

.table-responsive .dropdown-menu {
    overflow: visible;
}
/*
------------------------------------------------------------
Select
------------------------------------------------------------
*/
.custom-select:focus {
    border-color: var(--hu-green-1);
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(84, 189, 191, 0.25);
}

.custom-switch:focus {
    border-color: var(--hu-green-1);
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(84, 189, 191, 0.25);
}

.custom-switch .custom-control-label::after {
    background-color: rgba(84, 189, 191, 0.25);
}

.custom-switch .custom-control-input:disabled:checked~.custom-control-label::before {
    background-color: rgba(84, 189, 191, 0.25);
}

.custom-control-input:focus~.custom-control-label::before {
    box-shadow: 0 0 0 0.2rem rgba(84, 189, 191, 0.25);
}

.custom-control-input:focus:not(:checked)~.custom-control-label::before {
    border-color: var(--hu-g1-4);
}

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

/*
------------------------------------------------------------
Input
------------------------------------------------------------
*/
.custom-select:focus,
.form-control:focus {
    border-color: var(--hu-green-1);
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(84, 189, 191, 0.25);
}

::-webkit-input-placeholder {
    font-style: italic;
}

:-moz-placeholder {
    font-style: italic;
}

::-moz-placeholder {
    font-style: italic;
}

:-ms-input-placeholder {
    font-style: italic;
}

.input-group.filter-w {
    min-width: 16.55em;
}

.custom-select.filter-w {
    min-width: 14em;
}

.form-control {
    border-radius: 0.25rem;
}

/*
------------------------------------------------------------
Nav
------------------------------------------------------------
*/
.nav-tabs .nav-link.active.nav-active-hu {
    color: var(--hu-green-1);
    background-color: #fff;
}

.nav-tabs .nav-link.active.nav-inactive-hu.nav-disabled {
    color: #AAA;
    background-color: var(--hu-grey-1);
}

.nav-tabs .nav-link.active.nav-inactive-hu:not(.nav-disabled) {
    color: var(--hu-dark-2);
    background-color: var(--hu-grey-1);
}

.modal-previous:hover {
  color: var(--hu-dark);
  border:1px solid var(--hu-dark-2);

}

.wizard-cancel {
    color: var(--hu-dark);
    background-color: var(--hu-grey-1);
}

.nav-tabs .nav-link.active.nav-inactive-hu:hover:not(.nav-disabled),
.wizard-cancel:hover {
    color: var(--hu-dark);
    background-color: var(--hu-grey-2);
}

.nav-tabs .nav-link.active.nav-active-hu:hover,
.nav-tabs .nav-link.active.nav-inactive-hu:hover:not(.nav-disabled) {
    background-color: var(--hu-green-1);
    border-color: var(--hu-green-1);
    color: #FFFFFF;
}

.nav-tabs .nav-link.active.nav-inactive-hu:hover.nav-disabled {
    cursor: auto;
    color: #AAA;
}


/*
------------------------------------------------------------
Other
------------------------------------------------------------
*/
.v-selected-card {
    background-color: var(--hu-grey-1);
    border-color: var(--hu-grey-2);
}
.v-thumbnail, .v-selected, .page-item.active .page-link {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}

.card-hover.v-selected {
    color: var(--hu-dark);
    background-color: var(--hu-grey-1);
    border-color: var(--hu-grey-1);
}

.thumb-box {
    min-height: 11rem;
    min-width: 16rem;
}

.modal-backdrop {
    opacity: .5;
    background-color: #555;
}

.badge-info {
    background-color: var(--hu-green-1);
}

.fa-l {
    font-size: 1.2em;
}

.custom-file-input~.custom-file-label::after {
    background-color: var(--hu-green-1);
    color: #fff;
}

.custom-control-input:checked~.custom-control-label::before {
    color: #fff;
    border-color: var(--hu-green-1);
    background-color: var(--hu-green-1);
}

.error-feedback {
    width: 100%;
    margin-top: 0.25rem;
    color: #dc3545;
}

.warning-feedback {
    width: 100%;
    margin-top: 0.25rem;
    font-size: 80%;
    color: orange;
}

.animate {
    animation-duration: .2s;
}


.card-graph {
    max-width: 30rem;
    min-height: 15rem;
    max-height: 20rem;
}
.card-graph:not(.no-hover):hover {
    filter: brightness(90%);
    cursor: pointer;
}

.card-graph.no-hover:hover {
    filter: unset;
    cursor: unset;
}


.card-campaign {
    background-color: var(--hu-green-1) !important;
    width: 15rem;
    height: 15rem;
    color: white;
}


.card-campaign:not(.no-hover):hover {
    filter: brightness(90%);
    cursor: pointer;
}

.card-campaign.no-hover:hover {
    filter: unset;
    cursor: unset;
}

.card-campaign .btn-link:hover,
.h-dark:hover {
    color: var(--gray);
}

.card-campaign .img-thumbnail {
    background-color: var(--hu-green-1);
    border-radius: 2px;
    padding: 0;
    margin: 0;
}

.card-campaign .card-box {
    width: 12rem;
}

div .color-green, .color-green {
    color: var(--hu-green);
}

.color-green1 {
    color: var(--hu-green-1);
}

div .color-orange {
    color: orange;
}

div .color-red, .color-grey {
    color: var(--hu-grey);
}

.color-white {
    color: white;
}

div .color-red {
    color: var(--hu-red);
}

div .bgcolor-green {
    background-color: var(--hu-green);
    ;
    color: white;
}

div .bgcolor-orange {
    background-color: orange;
    color: white;
}

div .bgcolor-red {
    background-color: var(--hu-red);
    color: white;
}

.collapsed>.when-opened,
:not(.collapsed)>.when-closed {
    display: none;
}

.icon-step {
    width: 1em;
}

.card-hover:hover {
    background-color: rgba(0, 0, 0, 0.08);
    cursor: pointer;
}

.text-end {
    text-align: end;
}

.hu-red {
    color: var(--hu-red)
}

.hu-grey {
    color: var(--hu-grey)
}

.hu-orange {
    color: orange;
}

.hu-blue {
    color: var(--hu-blue)
}

/*
------------------------------------------------------------
Tooltip graph campaign
------------------------------------------------------------
*/
.tooltip-inner.tooltip-xl {
  max-width: 400px;
  width: auto;
}

/*
------------------------------------------------------------
Format
------------------------------------------------------------
*/

.msg-cont {
  font-size:0.75rem;
  margin-top: 1%;
  word-break: break-all;
  word-wrap: break-word;
  white-space: pre-wrap;

}

.nav-icon {
  margin-left: 4px;
}

/*
------------------------------------------------------------
Scrollbar
------------------------------------------------------------

for firefox
*/

body {
    scrollbar-color: var(--hu-green-2) white;
    scrollbar-width: thin;
}
/* width */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  /* Track */
  ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 1px grey;
    border-radius: 10px;
    opacity: 0.5;
  }

  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: var(--hu-green-1);
    border-radius: 10px;
    opacity: 0.5;
  }

  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: var(--hu-green-2);
  }

  ::-webkit-scrollbar-button {
    color: var(--hu-green-2);
    /* background: var(--hu-green-2); */
  }

  /* toaster */

  .b-toaster {
    z-index: 1100000;
}