:root {
    --side-nav: #5FB283;
    --page-body: rgba(216, 240, 228, .75);
    --side-nav-radial-bg: radial-gradient(ellipse at top left, #63B487, #5DB182);
    --nmpc-primary: rgba(13, 143, 69, 1);
    /*--nmpc-primary: rgba(13, 143, 69, 1);*/
}


@charset "UTF-8";
/*-----------------------------------------------------------------------------------
    Template Name: NMPC 
    Description: This is them is for NMPC
    Author: Jeffrey Francisco
-----------------------------------------------------------------------------------
1. Card CSS
2. Side Nav CSS
3. Page Body

/**=====================
     01. Card CSS Start
==========================**/

/*.card{
    border-radius: 16px !important;
}

.card .card-header{
    border-top-left-radius: 16px !important;
    border-top-right-radius: 16px !important;
}

.card-square .card {
    border-radius: 0px !important;
}

.card-square .card .card-header {
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
}*/


.is-invalid + .select2-container--default .select2-selection--single {
    /*box-shadow: 0px 0px 5px #ff0000 !important;*/
    /*border-color:*/
    border: 1px solid #dc3545 !important;
    /*padding-right: calc(1.5em + .75rem);*/
    padding-right: calc(1.1em) !important;
    background-origin: content-box !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(1em + .1875rem) center;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
    overflow: hidden !important
}

.is-invalid + .select2-container--default .select2-selection--multiple {
    /*box-shadow: 0px 0px 5px #ff0000 !important;*/
    /*border-color:*/
    border: 1px solid #dc3545 !important;
    /*padding-right: calc(1.5em + .75rem);*/
    padding-right: calc(1.1em) !important;
    background-origin: content-box !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(1em + .1875rem) center;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
    overflow: hidden !important
}

.is-valid + .select2-container--default .select2-selection--single {
    border: 1px solid #198754 !important;
    /*padding-right: calc(1.5em + .75rem);*/
    padding-right: calc(1.1em) !important;
    background-origin: content-box !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(1em + .1875rem) center;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}

.is-valid + .select2-container--default .select2-selection--multiple {
    border: 1px solid #198754 !important;
    /*padding-right: calc(1.5em + .75rem);*/
    padding-right: calc(1.1em) !important;
    background-origin: content-box !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(1em + .1875rem) center;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}
 
/**=====================
      01. Card CSS Ends
==========================**/





/**=====================
     02. Side Nav CSS Start
==========================**/

.main-nav {
    /*background: var(--side-nav-radial-bg) !important;*/
    /*background: var(--nmpc-primary) !important;*/
}


/**=====================
      02. Side Nav CSS Ends
==========================**/



/**=====================
     03. Page Body CSS Start
==========================**/

/*.page-body {
    background: var(--page-body) !important;
}*/

/**=====================
      03. General CSS Ends
==========================**/
.border-radius-16 {
    border-radius: 16px !important;
}

/**=====================
     04. General CSS Start
==========================**/

/*.page-body {
    background: var(--page-body) !important;
}*/

/**=====================
      04. Page Body CSS Ends
==========================**/




.btn-nids-primary {
    background-color: rgba(18, 159, 60, 1) !important;
    border-radius: 5px !important;
    color: white !important;
}

    .btn-nids-primary > * {
        color: white;
    }

.btn-nids-secondary {
    background-color: rgba(254, 202, 15, 1) !important;
    border-radius: 5px !important;
    color: white !important;
}

    .btn-nids-secondary > * {
        color: white;
    }

.glass {
    /* From https://css.glass */
    background: rgba(255, 255, 255, 0.28);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(8.9px);
    -webkit-backdrop-filter: blur(8.9px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/**=====================
     04. General CSS Start
==========================**/

.select2-container .select2-selection--single .select2-selection__rendered {
    font-weight: 400 !important;
}

/**=====================
      04. General CSS Ends
==========================**/


/**=====================
     05. Org Chart CSS Start
==========================**/

.chart-card {
    width: 50px !important;
    height: auto;
    border-radius: 15px;
}

    .chart-card p {
        font-weight: 500 !important;
    }


/**=====================
      05. Org Chart CSS Ends
==========================**/


/**=====================
      06. Custom Dark Mode CSS Start
==========================**/
.dark-only .browse .browse-articles {
    background-color: #111727 !important;
}

    .dark-only .browse .browse-articles h6 {
        color: white !important;
    }

    .dark-only .browse .browse-articles ul li h5 {
        color: white !important;
    }

.dark-only .sidebar-user a {
    color: white !important;
}


table.dataTable thead tr {
    background-color: rgba(244, 244, 244, 1) !important;
}

.dark-only table.dataTable thead tr {
    background-color: rgba(17, 23, 39, 1) !important;
}

body.dark-only .alert-light {
    background-color: rgba(17, 23, 39, 1) !important;
}
/**=====================
      06. Custom Dark Mode CSS Ends
==========================**/


/**=====================
      06. Custom CSS Start
==========================**/
.form-check-input:checked {
    background-color: var(--nmpc-primary) !important;
    border-color: var(--nmpc-primary) !important;
}

.loader-box .loader-35:before {
    background-color: var(--nmpc-primary) !important;
    border-bottom-color: var(--page-body);
}



/**=====================
      06. Custom  CSS Ends
==========================**/


/**=====================
      07. Custom Card CSS Start
==========================**/

.coin-card {
    background: #5bcfc5;
    background: -moz-linear-gradient(left, #4ECCA3 25%, #5BC17F 100%);
    background: -webkit-linear-gradient(left, #4ECCA3 25%, #5BC17F 100%);
    background: linear-gradient(to right, #4ECCA3 25%, #5BC17F 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4ECCA3', endColorstr='#5BC17F',GradientType=1 );
    color: #fff;
}

.coin-card1:after {
    content: "";
    position: absolute;
    bottom: -20px;
    right: 0;
    height: 90px;
    width: 90px;
    transform: rotate(45deg);
    border-radius: 15px;
    background: -moz-linear-gradient(left, rgba(255, 255, 255, 0.1) 0%, rgba(49, 151, 183, 0) 100%);
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.1) 0%, rgba(49, 151, 183, 0) 100%);
    background: linear-gradient(to right, rgba(255, 255, 255, 0.1) 0%, rgba(49, 151, 183, 0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#40ffffff', endColorstr='#003197b7',GradientType=1 );
}

.coin-card1 .coin-icon {
    line-height: 100px;
    text-align: center;
    height: 100px;
    width: 100px;
    min-width: 100px;
    margin-right: 30px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 1.5rem;
}

@media only screen and (max-width: 575px) {
    .coin-card1 .coin-icon {
        float: left;
        line-height: 80px;
        height: 80px;
        width: 80px;
        min-width: 80px;
    }
}

/**=====================
      07. Custom Card CSS Start
==========================**/
.select2-container--default .select2-results__options .select2-results__option[aria-selected=true] {
    background-color: #0D8F45 !important;
    color: #fff !important;
}

/**=====================
      07. Custom Card CSS End
==========================**/


.bg-nmpc {
    background: #5bcfc5 !important;
    background: -moz-linear-gradient(left, #4ECCA3 25%, #5BC17F 100%) !important;
    background: -webkit-linear-gradient(left, #4ECCA3 25%, #5BC17F 100%) !important;
    background: linear-gradient(to right, #4ECCA3 25%, #5BC17F 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4ECCA3', endColorstr='#5BC17F',GradientType=1 ) !important;
    color: #fff !important;
}

.page-wrapper .page-body-wrapper .page-header {
    padding-bottom: 20px !important;
}

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

.bootstrap-tagsinput {
    width: 100%;
    padding: 0.2em;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    font-size: 12px;
    line-height: 2.3em;
    overflow-x: auto; /* allow horizontal scroll */
    overflow-y: hidden; /* prevent vertical scroll */
    white-space: nowrap; /* keep tags in one line */
}

    .bootstrap-tagsinput .tag {
        margin-right: 2px;
        color: white !important;
        background-color: #5bc0de;
        padding: 0.1em 0.3em; /* Reduce padding */
        border-radius: 5px;
        font-size: 14px; /* Reduce font size */
        display: inline-block; /* Ensure tags stay inline */
    }

    .bootstrap-tagsinput input {
        width: auto;
        margin-top: 2px; /* Reduce margin */
        font-size: 14px; /* Reduce font size */
        line-height: 1.8em; /* Adjust line height */
    }