h1 {
    color: black;
    text-align: center;
    /*font-family: "Verdana", Geneva, sans-serif;*/
}

/****** Body ******/
body {
    margin: 0;
    background: var(--bg-color);
    height: 100%;
    font-family: 'Montserrat', "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: var(--text-nodes) !important;
    background-color: var(--bg-color) !important;
}

.popover {
    font-family: 'Montserrat', "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: var(--text-nodes) !important;
    background-color: var(--bg-color) !important;
    z-index: 10000000000000000000000000 !important;
}

.popover-body {
    max-height: 80vh; /* Example max-height */
    overflow-y: auto; /* Enables scrolling within the popover */
}

.popover-header {
    font-family: 'Montserrat', "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: var(--text-nodes) !important;
    background-color: var(--bg-color) !important;
}

.tooltip {
    font-family: 'Montserrat', "Helvetica Neue", Helvetica, Arial, sans-serif;
}

canvas {
    font-family: 'Montserrat', "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    color: var(--text-nodes) !important;
}

.card {
    font-family: 'Montserrat', "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.box {
    height: -webkit-fill-available;
}

.spinner-border {
    z-index: 9999999999999;
    min-width: 1rem;
    min-height: 1rem;
}


/* NavBar */

/* #navBar {
    height: 50px;
} */

#contentNavBar{
    height: 100%;
    width: 100%;
}

/*@media (max-width:992px) and (min-width:575px) {*/
    /*#navBar {*/
        /*height: 188px !important;*/
    /*}*/
/*}*/

/*@media (max-width:574px) {*/
    /*#navBar {*/
        /*height: 232px !important;*/
    /*}*/
/*}*/

/* Wrapper of the base */
.wrapper {
    /*position: relative;*/
    display: flex;
    width: 100%;
}

#content {
    background-color: var(--bg-color);
    position: relative;
    width: 100%;
    min-height: 100%;
    overflow-y: scroll;
    max-width: none !important;
    /*margin: auto !important;*/
    /* Blur efect */
    -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px);

}

#content::-webkit-scrollbar{
    display: none;
}

/*Modal message above all others*/
.modal{
    z-index: 100000039;
    background-color: var(--bg-color);
}

html {
    height: 100%;
}

/* loading of the page */
#overlay {
    position: fixed;
    top: 45%;
    left: 45%;
    width: 100%;
    height: 100%;
    z-index: 9999;
}

/* Selection of text */
::-moz-selection { background: var(--sticky-color);}
::selection { background: var(--sticky-color); } 
::selection:window-inactive {background: var(--bg-secondary-color); }
::-moz-selection:-moz-window-inactive {background: var(--bg-secondary-color); }

/* Icons of cards */
.fa-175x {
    font-size: 1.75em;
}

/* Check all buttons */
.btn-primary {
    color: var(--noactive-bg-color);
    background: transparent none;
    border-color: var(--noactive-bg-color);
}

.btn-primary:hover {
    color: #fff;
    background-color: var(--noactive-bg-color);
    border-color: var(--noactive-bg-color);
}

.btn-primary:not(:disabled):not(.disabled):active {
    color: #fff;
    background-color: var(--noactive-bg-color);
    border-color: var(--noactive-bg-color);
}

.btn-primary.focus, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled):active:focus {
    outline: 0;
    border: 0;
    background-color: var(--active-bg-color);
    box-shadow: 0 0 0 0.1rem var(--active-bg-color);
}

.show>.btn-primary.dropdown-toggle {
    color: #fff;
    background-color: var(--noactive-bg-color);
    border-color: var(--noactive-bg-color);
}

.show>.btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.1rem var(--active-bg-color);
}

/* Close arrow */
.fa-times{
    font-size: 24px;
}
button.close{
    padding: 0;
    top: 0;
    right: 15px;
    text-align: center;
    line-height: 60%;
}

/* Disabled buttons */
.btn-outline-primary:disabled{
    color: var(--disabled-button-color);
    border-color: var(--disabled-button-border);
}
.btn-primary:disabled{
    background-color: var(--disabled-button-border);
    border-color: var(--disabled-button-border);
}

.btn-secondary:disabled{
    background-color: var(--disabled-button-border);
    border-color: var(--disabled-button-border);
}

button.dropdown-toggle{
    margin: 0
}

tr:hover td {
    background: var(--disabled-field)
}

.alert-info, .alert-primary{
    background: var(--disabled-field);
    border-color: var(--border-color);
    color: var(--noactive-bg-color);
}

.alert-warning, .alert-danger{
    background: var(--bg-secondary-color);
    border-color: var(--border-alert);
    /* border-color: var(--active-bg-color); */
    color: var(--text-alert);
}

.custom-control-input:focus, .label::after, label.custom-control-label:focus, .custom-control-input::after, .custom-control-input:not(:disabled):not(.disabled):active:focus {
    color: var(--text-nodes);
    /* border-color: #80bdff; */
    outline: 0;
    border: 0;
    box-shadow: 0 0 0 0.1rem var(--active-bg-color) !important;
    /* box-shadow: none !important; */
}

.form-control:focus, .form-control:not(:disabled):not(.disabled):active:focus {
    color: var(--text-nodes);
    background-color: #fff;
    /* border-color: #80bdff; */
    outline: 0;
    border: 0;
    box-shadow: 0 0 0 0.1rem var(--active-bg-color);
}

/* Behavior for checkboxes */
.custom-control-input:checked~.custom-control-label::before {
    background-color: var(--active-bg-color);
    border-color: var(--active-bg-color);
}

.custom-control-input:focus~.custom-control-label::before {
    box-shadow: 0 0 0 0.1rem var(--active-bg-color);
    border: 0;
    outline: 0;
}

.custom-checkbox .fix-permission::after {
    margin-left: 10px;  
}

.custom-checkbox .fix-permission::before {
    margin-left: 10px;  
}

.custom-checkbox:checked .fix-permission::before {
    margin-left: 10px; 
    background-color: var(--active-bg-color);
    border-color: var(--active-bg-color); 
}

.clickable {
    cursor: pointer
}
.clickable:disabled {
    cursor: default
}
.hover-clickable:hover{
    cursor: pointer;
    color: var(--active-bg-color);
}
.hover-clickable.icon-active:hover{
    cursor: pointer;
    color: var(--noactive-bg-color);
}
button:disabled {
    cursor: default
}
input:disabled {
    cursor: default;
    background-color: var(--disabled-field);
}
input{
    border-color: #3886db;
}
/* input:not([type]), input[type="text"], input[type="number"]{
    padding-top: 3px !important;
    height: 38px !important;
}
#module {
    padding-left: 0;
    padding-right: 0;
} */

.display-4 {
    font-size: 3.0rem;
    font-weight: 300;
    line-height: 1.2;
}

.display-5 {
    font-size: 2.5rem;
    font-weight: 300;
    line-height: 1.2;
}

.jumbotron {
    padding: 2rem;
    background-color: var(--bg-secondary-color);
}

.widewrapper {
    width:100%;
}
  
.widewrapper > img {
    width:100%;
}
/* Top navigation bar icons */
.nav-top-icon{
    color: var(--bg-color);
}
/* Top navigation bar & footer texts  */
.nav-top-text{
    color: var(--bg-color) !important;
}

strong {
    color: var(--active-bg-color);
}
.form-control{
    background-color: var(--forms-color);
    border-color: var(--border-color);
}
.form-control:disabled{
    background-color: var(--disabled-field);
}

.form-select:focus{
    border-color: var(--border-color);
    border-radius: 0.25rem;
    box-shadow: 0 0 0 0.1rem var(--active-bg-color);
} 

.form-select:disabled{
    background-color: var(--disabled-field);
}
.form-control:focus, .form-control:not(:disabled):not(.disabled):active:focus {
    outline: 0;
    box-shadow: 0 0 0 0.1rem var(--active-bg-color);
}
.custom-file-label::after{
    background-color: var(--disabled-field);
}
.input-group-text{
    background-color: var(--disabled-field);
}
/* .form-control::placeholder{
    color: var(--bg-color);
} */

.form-group {
    color: var(--noactive-bg-color);
}

.table {
    color: var(--noactive-bg-color);
}

.icon-card{
    color: var(--bg-secondary-color);
}

.card-img-top{
    background-color: var(--noactive-bg-color);
}

.card-body{
    background-color: var(--bg-color);
}

.card{
    border-top-width: 0px;
    border-left-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
}

/* Popovers close button */
.fa-times{
    color: var(--text-nodes);
}

/* Modal background */
.modal-content{
    background-color: var(--bg-color);
}
.modal.fade.show {
    background: none;
}

/* React tables background */
.react-grid-Grid{
    background-color: var(--bg-color);
    opacity: 1;
    color: var(--text-nodes);
}

.react.grid.Main{
    color: var(--noactive-bg-color) !important;
}

.react-grid-checkbox:checked+.react-grid-checkbox-label::before{
    background: var(--active-bg-color) !important;
}

.react-contextmenu-item.react-contextmenu-item--selected{
    background-color: var(--noactive-bg-color) !important;
}

.rdg-selected {
    border: solid var(--active-bg-color) !important;
}

.rdg-editor-container input.editor-main{
    border-color: var(--sticky-color) !important;
    outline: 0 !important;
    background-color: var(--disabled-field) !important;
}

.drag-handle{
    background-color: var(--active-bg-color) !important;
}

.big_number {
    font-size: 60px;
    text-align: center;
    margin-bottom: 0;
    color: var(--active-bg-color);
}

.dashboard_word {
    font-size: 20px;
    text-align: center; 
    color: var(--text-nodes);
}

.fa-5vw{
    font-size: 5vw;
}

.input-group>.custom-file, .input-group>.custom-select, .input-group>.form-control, .input-group>.form-control-plaintext.form-control .label_permission {
    padding-top: 7px;
    padding-left: 10px;
}

div.bootstrap-tagsinput{
    min-height: 38px;
}


.show>.btn-outline-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.1rem var(--active-bg-color);
}

.bootstrap-tagsinput .tag {
    background-color: var(--active-bg-color);
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 2px;
    padding-bottom: 2px;
    border-radius: 5px;
}

/* Change the white to any color ;) */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 30px var(--form-color) inset !important;
    border: 2px solid var(--active-bg-color);
    transition: background-color 5000s ease-in-out 0s;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1)  
}
input:-webkit-autofill::first-line{
    font-family: 'Montserrat', "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1rem;
}

.list-group-item.active {
    background-color: transparent;
    border-color: var(--active-bg-color);
    border-width: thin !important;
}

.badge-primary{
    background-color: var(--active-bg-color);
}

.tooltip-inner {
    max-width: 400px !important;
}

.remark_row {
    background-color: var(--bg-secondary-color);
}

#content {
    scroll-behavior: smooth;
  }
.check_item_bom{
    margin-right: 3px;
}

.toast-warning {
    background-color: var(--noactive-bg-color);
}

.tooltip-inner {
    text-align: left;
}

.list-group-item.active {
    color: black
}

/* .container{
    padding-left: 0;
    padding-right: 0;
} */

 /* The close (cross) button */
/* .close:focus, .close:hover {
    box-shadow: none !important;
}
.close{
    float: right;
} */

/* In Bootstrap 5, they are underlined by default */
.btn-link {
    text-decoration: none;
}

/* Dropdown and alert width */
.dropdown-menu {
    width: auto;
}
.alert {
    width: auto;
}