body {
    color: var(--bg-blue-green);
}

/* ID */
/* Spinners */
    .container-spinner-min {
        min-width: 15%;
    }
/* Navs | Tabs */
    .nav-tabs {
        display: grid;
        --bs-nav-tabs-border-width: 0px;
        background: var(--bg-blue-2);
        border-bottom: 1px solid var(--bg-blue-2);
        box-shadow: 0px 0px 5px 0px rgb(0 0 0 / 30%);
    }
    .nav-tabs .nav-link:not(.active):hover {
        background: var(--bg-blue-1);
        color: white;
        border-color: var(--bg-blue-1);
        /* border-bottom: 0;
        border-bottom-color: transparent; */
    }
    /* .nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
        border-bottom-color: transparent;
    } */
    .nav-tabs .nav-link {
        padding: .64rem 1rem;
        color: white;
        border-radius: 0;
        /* border-bottom: 0; */
        transition: all .3s;
    }
    .nav-tabs .nav-link.active {
        background-color: #f7f7f7;
    }
/* Container */
    .tab-content {
        background: #fff;
        padding: 15px;
        margin-bottom: 10px;
        border: 1px solid #dee2e6;
        border-top: transparent;
        border-radius: 0px 0px 2px 2px;
        /* position: relative; */
        box-shadow: 0px 0px 5px 0px rgb(0 0 0 / 30%);
    }
    .bg-info {
        background-color: #243E66 !important;
        color: white;
    }
    .container-segment {
        padding: 15px;
        border: 1px solid #aed6d5;
        border-radius: 5px;
        background: #f6fffc;
        width: 100%;
    }
    .container-profile-result-success {
        color: green;
        font-size: 1.2rem;
        padding: 0px 5px;
    }
    .container-profile-result-error {
        color: #d51212;
        font-size: 1.2rem;
        padding: 0px 5px;
    }
    .container-profile-result-success > i,
    .container-profile-result-error > i {
        font-size: 1.3rem;
    }
    .container-table-exc {
        height: auto;
        overflow: auto;
    }
    .container-fluid > .col-md-12 > .content-wrapper {
        padding-left: 0;
        padding-right: 0;
    }
    .body-input-text-editable {
        height: 203px;
        padding: 0px;
        overflow: auto;
        border: 1px solid #d9d8d8;
        border-radius: 0px 0px 5px 5px;
    }
    .container-info {
        font-size: .9rem;
        padding: .8rem .5rem;
        background: #e6f3ff;
        border: 1px solid #b6dcff;
        border-radius: 10px;
        margin: 0;
    }
    .segment-form-search {
        padding: .8rem .5rem .5rem;
        margin-top: .9rem;
        border: 1px solid #ddd;
        border-radius: .4rem;
        position: relative;
    }
    .container-payment {
        display: grid;
        justify-items: center;
    }
/* Buttons */
    a.btn {
        padding: .5rem 1rem;
    }
    .btn {
        min-height: 32px;
    }
    .btn-w-100 {
        width: 100%;
    }
    .btn-icon {
        font-size: 1.2rem;
        color: white;
        padding: .5rem .6rem !important;
        border: 0;
        border-radius: 3px;
        transition: .3s ease-in-out;
    }
    .btn-light {
        color: var(--bg-blue-green);
        background: #ededed;
        border: 1px solid #bfbfbf;
    }
    .btn-primary {
        background: var(--bg-blue);
        border-color: var(--bg-blue);
        transition: 0.5s all;
        --bs-btn-hover-bg: var(--btn-primary);
        --bs-btn-hover-border-color: var(--btn-primary);
        --bs-btn-active-bg: var(--bg-blue-2);
        --bs-btn-active-border-color: var(--bg-blue-2);
    }
    .btn-success {
        background: #009b58;
        border-color: #009b58;
        transition: .5s all;
    }
    .btn-wine {
        color: white;
        background: #97154b;
        border-color: #97154b;
        transition: 0.5s all;
        --bs-btn-active-color: #ffffff;
        --bs-btn-hover-bg: #c41c62;
        --bs-btn-hover-border-color: #c41c62;
        --bs-btn-active-bg: #740f39;
        --bs-btn-active-border-color: #740f39;
    }
    .btn-show-password {
        font-size: 1.5rem;
        color: var(--bg-blue-2);
        transition: all .3s;
    }
    .input-group-append .btn {
        z-index: 1;
    }
    .input-group-append > button, .input-group-append > a {
        /* height: 32px; */
        padding: .2rem .6rem;
    }
    .input-group-append > button:not(:nth-child(1)),
    .input-group-append > a:not(:nth-child(1)) {
        border-left: 1px solid #d8d8d8;
    }
    .btn-copy-link {
        color: white;
    }
    .bg-info .btn-close {
        color: white;
    }
    .btn-config-month {
        background: #28437f;
        color: white;
        font-size: 18px;
        padding: 4px 6px;
        border: 1px solid #ddd;
        border-radius: 5px;
        transition: 0.3s;
    }
    .alert-dismissible .btn-close {
        z-index: 1;
    }
    .btn-info-form {
        color: var(--bg-blue-2);
        background: none;
        padding: 0 .3rem;
        font-size: 1.1rem;
        border: 0;
    }
    .btn-obs {
        border: 0;
        font-size: 2rem;
        color: var(--bg-blue-1);
        background: white;
        padding: 0;
        transition: .3s all;
    }
    .btn-link-list {
        background: var(--bg-lime);
        color: #3d3d3d;
        font-size: 1rem;
        padding: .3rem .5rem;
        border-color: var(--bg-lime);
        border-radius: .3rem;
        transition: .3s all;
    }
    .btn-xmark {
        background: #eeeeee;
        color: #3d3d3d;
        border: 0;
        border-radius: 5px;
    }
    .bootstrap-select > .btn-light {
        background: white;
        border-color: #dee2e6;
        height: 35px;
        line-height: normal;
    }
    .btn-payment-mode {
        width: 10rem;
        padding: 1.2rem;
        display: flex;
        border: 1px solid #e7e7e7;
        border-radius: .5rem;
        cursor: pointer;
        transition: .3s all;
    }
    .btn-plans-extra {
        display: block;
        cursor: pointer;
        color: white;
        /* margin: 0 auto; */
        position: relative;
        text-decoration: none;
        font-weight: 600;
        border-radius: 6px;
        overflow: hidden;
        padding: 3px;
        isolation: isolate;
        text-decoration: none !important;
        transition: .3s all;
    }
    .btn-plans-extra span {
        position: relative;
        display: block;
        padding: .157rem 1rem;
        font-size: 0.875rem;
        background: #000;
        border-radius: 3px;
        height: 100%;
    }
    .btn-plans-extra::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 400%;
        height: 100%;
        background: linear-gradient(115deg,#4fcf70,#fad648,#a767e5,#12bcfe,#44ce7b);
        background-size: 25% 100%;
        animation: an-at-keyframe-css-at-rule-that-translates-via-the-transform-property-the-background-by-negative-25-percent-of-its-width-so-that-it-gives-a-nice-border-animation_-We-use-the-translate-property-to-have-a-nice-transition-so-it_s-not-a-jerk-of-a-start-or-stop .75s linear infinite;
        animation-play-state: paused;
        translate: -5% 0%;
        transition: translate 0.25s ease-out;
    }
    .btn-plans-extra:hover::before {
        animation-play-state: running;
        transition-duration: 0.75s;
        translate: 0% 0%;
    }
    .btn-light:hover {
        background: #ddd;
        border-color: #bfbfbf;
    }
    .btn-primary:hover {
        background-color: var(--btn-primary);
        border-color: var(--btn-primary);
    }
    .btn-wine:hover, .btn-wine:active, .btn-wine:focus {
        color: white;
    }
    .btn-obs:hover {
        color: var(--bg-green-shad);
    }
    .btn-link-list:hover {
        background: #c8e26b;
        color: black;
    }
    .btn-xmark:hover {
        background: #ddd;
    }
    .btn-payment-mode:hover {
        background: aliceblue;
        border-color: #bce0ff;
    }
    .btn-plans-extra:hover {
        color: white;
    }
    .btn-payment-mode:active, .btn-payment-mode:focus {
        background: #e0ebf5;
    }
    .btn-disabled {
        opacity: 0.65;
        pointer-events: none;
    }
/* Tables */
    .table thead th, .table tbody td, td p {
        font-size: .8rem;
    }
    .table thead .tr-hours {
        background: #DDE6C3;
    }
    .table thead .tr-hours > th {
        border-bottom-width: inherit;
        border-bottom-color: white;
    }
    .table-striped>tbody>tr:nth-of-type(odd)>* {
        --bs-table-accent-bg: #00000000;
    }
    .table tbody tr.bg-success-light {
        background-color: #8bda9f !important;
    }
    .table tbody tr.bg-warning-light {
        background-color: #ffce62 !important;
    }
    .table tbody tr.bg-danger-light {
        background-color: #ff776e !important;
    }
    .table tbody tr.bg-success-light td b,
    .table tbody tr.bg-warning-light td b,
    .table tbody tr.bg-danger-light td b {
        color: black;
    }
    .table tbody tr.bg-success-light td button,
    .table tbody tr.bg-warning-light td button,
    .table tbody tr.bg-danger-light td button {
        background-color: #eeeeee;
        color: #3d3d3d;
    }
    .table-overflow {
        overflow: auto;
    }
    .bg-tfoot {
        background: #ecf6d6;
        bottom: 0;
        position: sticky;
    }
    .tr-style .btn-info-form, .tr-style-alt .btn-info-form,
    .table-tr .btn-info-form, .table-tr-alt .btn-info-form {
        color: white;
    }
    .table > thead > .tr-vertical-middle > th {
        vertical-align: middle;
    }
    .tr-collapse {
        transition: .3s all;
    }
    .tr-collapse.no-show {
        display: none;
    }

/* Text */
    .tx{
        font-size: 14px;
        /* font-family: arial; */
        color: #000;
    }
    .txt-ct-mobile {
        text-align: center;
    }
    .txt-graphite {
        color: #3d3d3d;
    }
    .txt-color {
        color: #243E66;
    }
    .forms-sample label {
        font-size: 0.875rem;
        margin-bottom: .1rem;
    }
    .tab-pane .titleSection {
        color: #243E66;
        font-weight: 600;
    }
    .alert-primary p {
        color: #114e7e;
    }
    .calendar-container .textForm {
        font-size: .8rem;
        font-family: 'Segoe UI', 'sans-serif';
    }
    .titleExcMonth {
        color: var(--bg-blue-green);
        font-size: 1rem;
        font-weight: 600;
        margin-bottom: 0;
    }
    .tag-text-primary {
        color: #3f5f8f;
    }
    .tag-text-success {
        color: #20a73d;
    }
    .tag-text-warning {
        color: #d8a91b;
    }
    .tag-text-danger {
        color: #d80600;
    }
    .tag-text-wine {
        color: #97154b;
    }
    .tag-text-purple {
        color: #873f8f;
    }
    .tag-text-gold {
        color: var(--bg-gold);
    }
    .tag-text-disabled {
        color: #5a8070;
    }
    .badge-form-search {
        background-color: white;
        font-size: .9rem;
        font-weight: 400;
        color: #a1a1a1;
        top: 0;
        position: absolute;
        transform: translate(0, -60%);
    }
/* Inputs */
    .input-group .flex-nowrap input {
        height: auto;
    }
    option:disabled {
        background: #f2f2f2;
    }
    .form-control.form-control-color {
        padding: .3rem;
    }
    .text-resize {
        resize: vertical;
    }
    /* .input-text-editable {
        word-wrap: break-word;
        user-select: text;
        resize: none;
        outline: none;
        width: 100%;
        height: 203px;
        padding: 15px;
        box-sizing: border-box;
        border: none;
        -webkit-user-modify: read-write;
    } */
    .dropdown-item-input {
        transition: .2s ease-in-out;
    }
    .dropdown-menu .dropdown-item-input:hover {
        background: var(--bg-blue-line);
    }
    .dropdown-menu .dropdown-item.active {
        color: #fff;
        text-decoration: none;
        background-color: #007bff;
    }
    .input-group-text {
        background-color: #f1f1f1;
    }
    .form-control.w-auto {
        width: 100% !important;
    }
    .bootstrap-select.show-tick .dropdown-menu .selected span.check-mark {
        top: 8px;
    }
    .ui-timepicker-standard {
        border-color: #d7d7d7;
    }
    .ui-timepicker-standard .ui-state-hover {
        background-color: #dde7ff;
        border-color: #dde7ff;
    }
/* Images */
    .img-preview {
        max-width: 100%;
        max-height: 200px;
        border: 1px solid #ddd;
        border-radius: 5px;
        cursor: pointer;
        transition: 0.3s;
        box-shadow: 0px 1px 4px 3px #ddd;
    }
    .img-preview:hover {
        opacity: 0.7;
    }
/* Icons */
    .btn i {
        margin: 0;
    }
/* Others */
    hr {
        border-top: 1px solid rgb(0 0 0 / 20%);
    }
    .fieldset-sloan {
        padding: .25rem .5rem .5rem;
        border: 1px solid #ddd;
        border-radius: .4rem;
    }
    .fieldset-sloan > legend {
        float: none;
        width: auto;
        padding: 0.25em 0.4em;
        background-color: white;
        font-size: .9rem;
        font-weight: 400;
        color: #a1a1a1;
        margin: 0;
    }
    .divider-menu {
        margin-top: .5rem;
        margin-bottom: .5rem;
        border-top: 1px solid rgb(255 255 255);
    }
    .tooltip {
        font-size: .8rem;
    }
    .custom-tooltip {
        --bs-tooltip-bg: var(--bg-blue);
    }
    .custom-tooltip .tooltip-inner {
        /* color: #3d3d3d; */
        background-color: var(--bg-blue);
    }
    .tooltip.show.custom-tooltip {
        opacity: 1;
    }
    .divider-segment {
        border-color: var(--bg-blue-green);
    }
    .divider-sub-segment {
        border-color: #bdbdbd;
    }
    .tab-pane .title-hr {
        border-color: #243E66;
    }
    .mg-zero-bottom {
        margin-bottom: 0;
    }
    .tab-pane .year-header {
        margin-top: 0;
    }
    .mg-section {
        margin-bottom: 3rem;
    }
    .pd-sides-zero {
        padding-left: 0;
        padding-right: 0;
    }
    .pd-zero {
        padding: 0;
    }
    .min-content {
        width: 100%;
    }
    .fit-content {
        width: 100%;
    }
    .segment-selected {
        transition: .5s all;
    }
    .segment-selected.active {
        background: #dcf3c7;
        border-radius: 5px;
    }
/* Swal */
    /* .swal-modal, .swal2-modal {max-width: 68%; height: 40%} */
    /* .swal-button--confirm{background-color:#337ab7!important;} */
    /* .swal-text, .swal2-html-container{color:#472380 !important;font-size: 15px;text-align: center;} */
    /* .swal2-title {font-size: 22px;} */
    /* .swal2-icon {font-size: 15px;} */
    /* .swal2-styled.swal2-confirm, .swal2-styled.swal2-cancel {font-size: 13px;} */

/* Keyframes */
    @-webkit-keyframes zoom {
        from {-webkit-transform:scale(0)} 
        to {-webkit-transform:scale(1)}
    }

    @keyframes zoom {
        from {transform:scale(0)} 
        to {transform:scale(1)}
    }

    @keyframes an-at-keyframe-css-at-rule-that-translates-via-the-transform-property-the-background-by-negative-25-percent-of-its-width-so-that-it-gives-a-nice-border-animation_-We-use-the-translate-property-to-have-a-nice-transition-so-it_s-not-a-jerk-of-a-start-or-stop {
        to {
          transform: translateX(-25%);
        }
    }
/* Media Queries */
    /* @media screen and (max-width: 768px) {
        ::-webkit-scrollbar {
            display: none;
        }
    } */


/* Media Queries */

    @media (max-width: 620px) {
        .tab-pane > .col-md-12, .tab-pane > .col-md-6 {
            padding-left: 5px;
            padding-right: 5px;
        }
        .container-fluid > .col-md-12,
        .col-md-12 > .col-md-12,
        .col-md-12 > .col-md-6 {
            /* padding: 0; */
            padding-left: 0;
            padding-right: 0;
        }
        .card .card-body {
            padding: 1.88rem 0.8rem;
        }
    }

    @media screen and (min-width: 768px) {
        .nav-tabs {
            display: flex;
        }
        .container-info {
            margin: 0 5%;
        }
        .container-info label {
            font-size: .95rem;
        }
        .segment-form-search {
            max-width: max-content;
        }
        .container-payment {
            grid-template-columns: repeat(1, 1fr);
        }
        .btn-w-100 {
            width: auto;
        }
        .pd-left-md-6 {
            padding-left: 7px;
        }
        .pd-right-md-6 {
            padding-right: 7px;
        }
        .min-content {
            width: min-content;
        }
        .fit-content {
            width: fit-content;
        }
        .form-control.w-auto {
            width: auto !important;
        }
    }

    @media screen and (min-width: 992px) {
        .txt-ct-mobile {
            text-align: left;
        }
    }