/*------------------------------------------------------------------
    File Name: merged-style.css
    Description: Combined Pluto Dashboard Template + Money Energy Time Theme
    Created: November 2025
-------------------------------------------------------------------*/

/*------------------------------------------------------------------
    TABLE OF CONTENTS
    
    1. Import Fonts
    2. Import Files
    3. Basic Styles
    4. Header & Topbar
    5. Sidebar
    6. Content Section
    7. Dashboard Components
    8. Forms & Inputs (Money Energy Time Theme)
    9. Tables
    10. Progress Bars
    11. Social Icons
    12. Charts
    13. Testimonials
    14. Blog & Tasks
    15. Widgets
    16. Calendar
    17. General Elements
    18. Gallery
    19. Icons
    20. Invoice
    21. Price Tables
    22. Mail
    23. Contact
    24. Login
    25. Error Pages
    26. Maps
    27. Responsive Design
-------------------------------------------------------------------*/

/*------------------------------------------------------------------
    1. Import Fonts
-------------------------------------------------------------------*/



/*------------------------------------------------------------------
    2. Import Files
-------------------------------------------------------------------*/

@import url(animate.css);
@import url(flaticon.css);
@import url(font-awesome.min.css);

/*------------------------------------------------------------------
    3. Basic Styles
-------------------------------------------------------------------*/

* {
    margin: 0;
    padding: 0;
    outline: none !important;
}

/* Smooth transitions - but not for display/visibility */
a,
.btn,
button {
    transition: all 0.3s ease, display 0s, visibility 0s;
}
/* SF Pro Text (for paragraphs, inputs, UI text) */
/* SF Pro Display Webfont Kit (Self-Hosted) */
@font-face {
    font-family: "SF Pro Display";
    src: url("SFProDisplay-Regular.woff2") format("woff2"), url("SFProDisplay-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "SF Pro Display";
    src: url("SFProDisplay-Medium.woff2") format("woff2"), url("SFProDisplay-Medium.woff") format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "SF Pro Display";
    src: url("SFProDisplay-Bold.woff2") format("woff2"), url("SFProDisplay-Bold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "SF Pro Display";
    src: url("SFProDisplay-LightItalic.woff2") format("woff2"), url("SFProDisplay-LightItalic.woff") format("woff");
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "SF Pro Display";
    src: url("SFProDisplay-SemiboldItalic.woff2") format("woff2"), url("SFProDisplay-SemiboldItalic.woff") format("woff");
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}


html, body {
    margin: 0;
    padding: 0;
    color: #212529;
    font-size: 14px;
    line-height: 1.5;
    background: linear-gradient(135deg, #FFF9F0 0%, #FAF4E8 100%);
    overflow-x: hidden !important;
    font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 400;
}
.form-control {
    font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
p, span, li, input, textarea {
    font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
    font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 600;
}
a,
.btn,
button {
    transition: all 0.3s ease, display 0s, visibility 0s;
}
    body.demos .section {
        background: url(images/bg.png) repeat top center #f2f3f5;
    }

a {
    color: #1f1f1f;
    text-decoration: none !important;
    outline: none !important;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

    a:hover,
    a:focus {
        color: #2a3a4b;
        text-decoration: none;
    }

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
    letter-spacing: 0;
    font-weight: normal;
    position: relative;
    padding: 0;
    line-height: normal;
    color: #1f1f1f;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

h1 {
    font-size: 24px;
}

h2 {
    font-size: 2.5rem;
    color: #E8A5A5; /* Money - Soft Pink */
    font-weight: 600;
    text-align: center;
    margin-bottom: 1rem;
}

h3 {
    font-size: 24px;
    color: #000;
    line-height: normal;
    font-weight: 700;
    text-transform: uppercase;
}

h4 {
    font-size: 1.8rem;
    color: #C4B5D6; /* Energy - Lavender */
    font-weight: 500;
    margin-bottom: 1.5rem;
}

h5 {
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0;
    line-height: normal;
    color: #000;
}

h6 {
    font-size: 13px;
}

p {
    color: #58718a;
    font-size: 14px;
    line-height: 21px;
}

ul {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}

    ul li {
        list-style: none;
    }

/* Form Elements */
button,
input,
select,
textarea,
option {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Quartzite", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Utility Classes */
.full {
    width: 100%;
    float: left;
}

.center {
    display: flex;
    justify-content: center;
}

.verticle_center {
    display: flex;
    align-items: center;
}

.img-responsive {
    max-width: 100%;
}

.container {
    width: 1200px;
}

/* Color Utilities */
.red_bg {
    background: #ff4748;
}

.blue_bg {
    background: #36a9e2;
}

.yellow_bg {
    background: #fabb3d;
}

.green_bg {
    background: #79c347;
}

.green_bg2 {
    background: #1ed085;
}

.purple_bg {
    background: #8e68ef;
}

.brown_color {
    color: #795548 !important;
}

.brown_bg {
    background: #795548 !important;
}

/* Spacing Utilities */
.padding_top_10 {
    padding-top: 10px !important;
}

.padding_top_20 {
    padding-top: 20px !important;
}

.padding-bottom_0 {
    padding-bottom: 0 !important;
}

.margin_top_50 {
    margin-top: 50px;
}

.margin_top_30 {
    margin-top: 30px;
}

.margin_bottom_30 {
    margin-bottom: 30px;
}

.margin_0 {
    margin: 0 !important;
}

/*------------------------------------------------------------------
    4. Header & Topbar
-------------------------------------------------------------------*/

.full_container {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
}

.inner_container {
    padding: 0;
    margin: 0;
    display: flex;
}

.topbar {
    position: fixed;
    width: 100%;
    padding-left: 280px;
    z-index: 2;
    background: linear-gradient(90deg, #FF9800 0%, #D4C78F 50%, #E8D5C4 100%);
    top: 0;
    transition: ease all 0.3s;
    left: 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

#sidebar.active + #content .topbar {
    padding-left: 90px;
}

.topbar .navbar {
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.right_topbar {
    float: right;
    padding: 0;
}

.icon_info {
    float: left;
    width: 100%;
}

    .icon_info ul {
        float: left;
        width: auto;
        list-style: none;
        margin: 0;
    }

        .icon_info ul li {
            float: left;
            width: 35px;
            height: 35px;
            border-radius: 100%;
            text-align: center;
            line-height: 35px;
            position: relative;
            margin: 15px 0 0 5px;
        }

            .icon_info ul li a {
                color: #fff;
                font-size: 18px;
                font-weight: normal;
            }

                .icon_info ul li a img {
                    width: 35px;
                }

            .icon_info ul li .fa-question-circle {
                font-size: 21px;
                position: relative;
                top: 1px;
            }

        .icon_info ul.user_profile_dd li {
            width: auto;
        }

        .icon_info ul.user_profile_dd > li span {
            font-size: 13px;
            font-weight: 500;
            color: #fff;
            padding: 0 35px 0 10px;
        }

        .icon_info ul.user_profile_dd > li {
            width: auto;
            border-radius: 0;
            background: rgba(255, 255, 255, 0.25);
            backdrop-filter: blur(10px);
            margin: 0;
            padding: 12px 0 12px 20px;
            height: auto;
            transition: all 0.3s ease;
        }

            .icon_info ul.user_profile_dd > li:hover {
                background: rgba(255, 255, 255, 0.35);
            }

.sidebar_toggle {
    border: none;
    padding: 14px 26px 14px;
    font-size: 21px;
    background: #cbe6f9;
    margin-right: 0;
    cursor: pointer;
    float: left;
    color: #335487;
}

    .sidebar_toggle i {
        color: #335487;
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: 21px;
    }

    .sidebar_toggle:before {
        content: "\f0c9";
        font-family: 'FontAwesome';
        display: inline-block;
        color: #335487;
        font-size: 21px;
    }

/* If using button without icon */
button.sidebar_toggle:empty:before {
    content: "\f0c9";
    font-family: 'FontAwesome';
    display: inline-block;
    color: #335487;
    font-size: 21px;
}

/* Ensure all icons are visible */
button i {
    color: inherit;
    display: inline-block !important;
    visibility: visible !important;
}

i,
span {
    display: inline-block;
}

/* FontAwesome Icon Base */
.fa,
.fas,
.far,
.fab,
.fa-bars,
.fa-edit,
.fa-eye,
.fa-trash {
    display: inline-block !important;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Table Action Icons - Last Column */
table td:last-child i,
table td:last-child a,
table td:last-child a i,
table tbody tr td:last-child i,
table .fa,
table .fas,
table i,
td i,
td a i {
    color: #666;
    font-size: 18px;
    cursor: pointer;
    margin: 0 8px;
    transition: all 0.3s ease;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Action column links */
table td:last-child a,
table tbody tr td:last-child a {
    display: inline-block;
    margin: 0 5px;
}

table .fa:hover,
table .fas:hover,
table i:hover,
td i:hover,
table td:last-child i:hover {
    color: #335487;
    transform: scale(1.15);
}

/* Specific Icon Colors */
.fa-edit,
.fa-pencil-alt,
.fa-pencil,
a .fa-edit,
a .fa-pencil-alt,
a .fa-pencil {
    color: #1ed085 !important;
}

.fa-eye,
a .fa-eye {
    color: #2196f3 !important;
}

.fa-trash,
.fa-trash-alt,
a .fa-trash,
a .fa-trash-alt {
    color: #f44336 !important;
}

.fa-edit:hover,
.fa-pencil-alt:hover,
.fa-pencil:hover {
    color: #17a06b !important;
}

.fa-eye:hover {
    color: #0d7ac7 !important;
}

.fa-trash:hover,
.fa-trash-alt:hover {
    color: #c62828 !important;
}

/*------------------------------------------------------------------
    5. Sidebar
-------------------------------------------------------------------*/

#sidebar {
    min-width: 280px;
    max-width: 280px;
    background: linear-gradient(180deg, #F4E4D7 0%, #E8D5C4 50%, #DCC6B3 100%);
    color: #2C2C2C;
    transition: all 0.3s;
    position: relative;
    z-index: 11;
    box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.15);
    float: left;
    width: 100%;
    background-image: url('images/layout_img/pattern_h.png');
    background-blend-mode: soft-light;
    position: fixed;
    height: 100%;
    overflow: auto;
}

.sidebar_blog_1,
.sidebar_blog_2,
.sidebar_blog_3 {
    float: left;
    width: 100%;
}

#sidebar ul li a {
    text-align: left;
    padding: 15px 25px;
    display: block;
    font-size: 14px;
    color: #2C2C2C;
    font-weight: 500;
    transition: all 0.3s ease;
}

    #sidebar ul li a:hover,
    #sidebar ul li a:focus {
        color: #1A1A1A;
        background: rgba(255, 152, 0, 0.2);
        padding-left: 30px;
    }

#sidebar ul.components {
    padding: 15px 0;
    margin: 0;
    float: left;
    width: 100%;
}

    #sidebar ul.components li {
        position: relative;
    }

    #sidebar ul.components ul {
        background: rgba(212, 199, 143, 0.15);
        padding: 20px 0;
    }

        #sidebar ul.components ul li a {
            font-size: 13px;
            color: #2C2C2C;
            padding: 7px 35px;
        }

            #sidebar ul.components ul li a:hover {
                color: #1A1A1A;
                background: rgba(255, 152, 0, 0.2);
                padding-left: 45px;
            }

#sidebar ul li a i {
    margin-right: 20px;
    width: 15px;
    font-size: 20px;
    float: left;
    color: #D4822F;
}

#sidebar ul li a:hover i {
    color: #FF9800;
}

#sidebar h4 {
    background: linear-gradient(135deg, #D4C78F 0%, #C9B87D 100%);
    margin: 0;
    padding: 21px 25px 19px;
    font-weight: 600;
    font-size: 18px;
    color: #2C2C2C;
    border-bottom: solid #FF9800 2px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

a[data-toggle="collapse"] {
    position: relative;
}

.sidebar_user_info {
    padding: 15px 25px;
    background: linear-gradient(135deg, #FF9800 0%, #F57C00 100%);
    border-bottom: 2px solid rgba(212, 199, 143, 0.4);
}

.user_profle_side {
    display: flex;
}

.user_img {
    width: 75px;
    height: 75px;
    float: left;
}

    .user_img img {
        border-radius: 100%;
        border: 3px solid rgba(212, 199, 143, 0.8);
    }

.user_info {
    margin: 0 0 0 15px;
    padding-top: 15px;
}

    .user_info h6 {
        font-size: 17px;
        font-weight: 600;
        color: #FFFFFF;
        letter-spacing: 0;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    }

    .user_info p {
        font-size: 13px;
        font-weight: 500;
        color: #FFF3E0;
        margin: 0;
    }

.online_animation {
    width: 12px;
    height: 12px;
    background: #D4C78F;
    border-radius: 100%;
    margin-top: 0;
    position: relative;
    top: 1px;
    -webkit-animation: online 2s infinite;
    animation: online 2s infinite;
    box-shadow: 0 0 8px #D4C78F;
}

@-webkit-keyframes online {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes online {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.logo_section {
    padding: 0;
    width: auto;
    text-align: center;
    background: transparent;
    float: left;
}

    .logo_section img {
        height: 42px;
        padding: 0;
        margin: 8px 15px 0;
        max-height: 42px;
        width: auto;
    }

#sidebar.active .logo_section a {
    width: 100%;
    display: flex;
    justify-content: center;
}

.logo_section img.logo_icon {
    margin: 0;
    text-align: center;
    padding: 8px 8px;
    height: 60px;
    max-height: 60px;
}

.bottom_sidebar ul li {
    float: left;
    width: 50%;
    list-style: none;
}

/*------------------------------------------------------------------
    6. Content Section
-------------------------------------------------------------------*/

#content {
    width: 100%;
    min-height: 100vh;
    transition: ease all 0.3s;
    position: relative;
    padding: 60px 25px 25px 305px;
    background: #f8f8f8;
}

#sidebar.active + #content {
    padding-left: 115px;
}

.page_title {
    background: #fff;
    margin-top: 0;
    margin-bottom: 30px;
    padding: 25px 35px 22px 38px;
    box-shadow: 1px 0 5px rgba(0, 0, 0, 0.1);
    margin-left: -40px;
    margin-right: -40px;
    position: relative;
}

    .page_title h2 {
        font-size: 20px;
        font-weight: 500;
        color: #335487;
        text-align: left;
    }

.content_inner_section {
    background: #fff;
    box-shadow: 0 0 3px 0px rgba(0, 0, 0, 0.4);
    padding: 25px 30px;
}

.white_shd {
    background: #fff;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    border-radius: 5px;
    margin-top: 0;
}

.dark_bg {
    background: #214162;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    border-radius: 5px;
    margin-top: 0;
}

/*------------------------------------------------------------------
    7. Dashboard Components
-------------------------------------------------------------------*/

.counter_section {
    min-height: auto;
    display: block;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    border: 0px solid #e7e7e7;
    padding: 30px 35px;
    background: #fff;
    border-radius: 5px;
    min-height: 125px;
    display: flex;
}

.couter_icon {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    float: left;
    margin: 8px 0 8px;
}

    .couter_icon i {
        color: #fff;
        font-size: 50px;
        line-height: normal;
        width: 100%;
        float: left;
        text-align: center;
    }

.counter_no {
    padding: 0 12px;
    align-content: center;
    align-items: center;
    float: right;
    width: 100%;
}

    .counter_no p.total_no {
        margin: 0;
        font-size: 24px;
        float: left;
        width: 100%;
        line-height: normal;
        font-weight: 600;
        color: #455a64;
        text-align: right;
        font-weight: 400;
    }

    .counter_no .head_couter {
        float: left;
        width: 100%;
        color: #99abb4;
        font-weight: 300;
        margin: 0px 0 0 0;
        font-size: 20px;
        text-align: right;
    }

/*------------------------------------------------------------------
    8. Forms & Inputs (Money Energy Time Theme)
-------------------------------------------------------------------*/

/* Form Container */
.form-horizontal {
    background: rgba(255, 255, 255, 0.9);
    padding: 3rem;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    max-width: 1200px;
    margin: 2rem auto;
}

    /* Form Title with Color Accent */
    .form-horizontal h4::before {
        content: "";
        display: inline-block;
        width: 5px;
        height: 25px;
        background: linear-gradient(180deg, #FF9800, #D4C78F, #E8D5C4);
        margin-right: 10px;
        border-radius: 3px;
    }

/* Form Labels */
.control-label,
p.control-label {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #7A6B5D;
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    letter-spacing: 0.3px;
}

/* Form Controls */
.form-control {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
    border: 2px solid #E8D5C4;
    border-radius: 10px;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    background-color: #FFFBF7;
    color: #4A4A4A !important;
    font-weight: 500 !important;
}

    .form-control:focus {
        border-color: #FF9800;
        box-shadow: 0 0 0 3px rgba(255, 152, 0, 0.15);
        outline: none;
        background-color: #FFFFFF;
        color: #4A4A4A !important;
    }

    .form-control:hover {
        border-color: #D4C78F;
    }

    .form-control::placeholder {
        color: #B8A89A !important;
        font-style: italic;
        font-weight: 400 !important;
    }

/* Input text visibility */
input.form-control,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="date"],
textarea.form-control {
    color: #4A4A4A !important;
    font-weight: 500 !important;
}

    input.form-control:focus,
    input[type="text"]:focus,
    input[type="email"]:focus,
    input[type="number"]:focus,
    input[type="tel"]:focus,
    input[type="date"]:focus,
    textarea.form-control:focus {
        color: #4A4A4A !important;
    }

    /* Enhanced Input Focus States */
    input[type="text"]:focus,
    input[type="date"]:focus,
    input[type="email"]:focus,
    select:focus,
    textarea:focus {
        border-color: #FF9800;
        background-color: #FFFFFF;
    }

/* Required Field Indicator */
input[required],
select[required] {
    border-left: 3px solid #FF9800;
}

/* Form Groups */
.form-group {
    margin-bottom: 1.5rem;
}

/* Row Spacing */
.row {
    margin-bottom: 1rem;
}

    /* Form Section Dividers */
    .row + .row {
        border-top: 1px solid rgba(196, 181, 214, 0.1);
        padding-top: 1.5rem;
    }

/* Horizontal Rule */
hr {
    border: 0;
    height: 2px;
    background: linear-gradient(to right, #FF9800, #D4C78F, #E8D5C4);
    margin: 2rem 0;
    opacity: 0.4;
}

/* Select Dropdown */
select.form-control {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23FF9800' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 12px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    color: #4A4A4A !important;
    font-weight: 500 !important;
}

    /* Fix Bootstrap height calc issue */
    select.form-control:not([size]):not([multiple]) {
        height: auto !important;
        min-height: calc(2.25rem + 2px) !important;
        padding: 0.75rem 2.5rem 0.75rem 1rem !important;
        line-height: 1.5 !important;
    }

    select.form-control option {
        color: #4A4A4A !important;
        background-color: #FFFFFF !important;
        font-weight: 500 !important;
        padding: 8px !important;
    }

    select.form-control:focus {
        color: #4A4A4A !important;
    }

    /* Ensure selected value is visible */
    select.form-control option:checked,
    select.form-control option[selected] {
        color: #4A4A4A !important;
        background-color: #E8D5C4 !important;
        font-weight: 600 !important;
    }

/* Dropdown text must be visible */
select,
.form-control select,
select.form-control {
    color: #4A4A4A !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
}

    /* Fix for disabled/readonly appearance */
    select.form-control:disabled,
    select.form-control[readonly] {
        color: #7A6B5D !important;
        background-color: #F5F5F5 !important;
        opacity: 0.8 !important;
    }

/* Image Upload Section */
input[type="file"] {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
    padding: 0.75rem;
    border: 2px dashed #D4C78F; /* Time - Golden Yellow */
    border-radius: 10px;
    background-color: #FFFBF7;
    width: 100%;
    max-width: 400px;
    cursor: pointer;
    transition: all 0.3s ease;
}

    input[type="file"]:hover {
        border-color: #E8A5A5;
        background-color: #FFF9F5;
    }

/* Rounded Image */
.rounded-image {
    width: 161px;
    height: 165px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #FF9800;
    box-shadow: 0 5px 20px rgba(255, 152, 0, 0.3);
    margin: 1rem 0;
    transition: all 0.3s ease;
}

    .rounded-image:hover {
        transform: scale(1.05);
        box-shadow: 0 8px 30px rgba(255, 152, 0, 0.4);
        border-color: #F57C00;
    }

/* Input Group (for datetime picker) */
.input-group {
    display: flex;
    align-items: stretch;
}

.input-group-text {
    background-color: #E8D5C4;
    border: 2px solid #E8D5C4;
    border-left: none;
    border-radius: 0 10px 10px 0;
    padding: 0.75rem 1rem;
    color: #7A6B5D;
}

.input-group .form-control {
    border-radius: 10px 0 0 10px;
}

/* Date Picker Icon */
.fa-calendar {
    color: #C4B5D6;
}

/* Validation Messages */
.text-danger,
span.text-danger {
    color: #D84A4A;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    margin-top: 0.25rem;
    display: block;
}

/* Buttons */
.btn,
input[type="submit"] {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
    padding: 0.85rem 2rem;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none !important;
    outline: none !important;
}

    .btn:focus,
    .btn.focus {
        box-shadow: none;
    }

    /* Upload Button */
    input[type="submit"][value="Upload"] {
        background: linear-gradient(135deg, #FF9800, #F57C00);
        color: white;
        box-shadow: 0 4px 15px rgba(255, 152, 0, 0.3);
    }

        input[type="submit"][value="Upload"]:hover {
            background: linear-gradient(135deg, #F57C00, #E65100);
            box-shadow: 0 6px 20px rgba(255, 152, 0, 0.4);
            transform: translateY(-2px);
        }

    /* Create Button */
    .btn-success,
    input[type="submit"][value="Create"] {
        background: linear-gradient(135deg, #D4C78F, #C9B87D);
        color: white;
        box-shadow: 0 4px 15px rgba(212, 199, 143, 0.3);
        border-color: #D4C78F;
    }

        .btn-success:hover,
        input[type="submit"][value="Create"]:hover {
            background: linear-gradient(135deg, #C9B87D, #BEA96C);
            box-shadow: 0 6px 20px rgba(212, 199, 143, 0.4);
            transform: translateY(-2px);
            color: white;
        }

    /* Back to List Button */
    .btn-primary,
    input[type="submit"][value="Back to List"] {
        background: linear-gradient(135deg, #E8D5C4, #DCC6B3);
        color: #2C2C2C;
        box-shadow: 0 4px 15px rgba(232, 213, 196, 0.3);
    }

        .btn-primary:hover,
        input[type="submit"][value="Back to List"]:hover {
            background: linear-gradient(135deg, #DCC6B3, #D0B7A2);
            box-shadow: 0 6px 20px rgba(232, 213, 196, 0.4);
            transform: translateY(-2px);
            color: #1A1A1A;
        }

.btn-custom {
    margin-top: 20px;
    background-color: transparent;
    border: 2px solid #ddd;
    padding: 12px 40px;
    font-size: 16px;
}

.main_bt {
    min-width: 125px;
    height: auto;
    float: left;
    background: #1ed085;
    text-align: center;
    color: #fff;
    padding: 10px 25px;
    font-size: 16px;
    border-radius: 5px;
    border: none;
    transition: ease all 0.5s;
    cursor: pointer;
    font-weight: 300;
}

    .main_bt:hover,
    .main_bt:focus {
        background: #ff5722;
        color: #fff;
    }

/*------------------------------------------------------------------
    9. Tables
-------------------------------------------------------------------*/

.table_format.strp table {
    border-radius: 8px 8px 0 0;
    overflow: hidden;
    color: #666;
}

.table_format.strp thead th {
    background: #335487;
    border: none;
    color: #fff;
    vertical-align: middle;
    font-weight: 400;
    text-transform: capitalize;
    line-height: 1;
    padding: 22px 40px;
    white-space: nowrap;
    font-size: 16px;
}

.table_format.strp tbody th,
.table_format.strp tbody td {
    font-size: 15px;
    padding: 20px 40px;
    vertical-align: middle;
    font-weight: 400;
    line-height: 1;
}

.table thead th {
    font-weight: 400;
}

.table-hover tbody tr:hover,
.table-hover tbody tr:focus {
    background-color: #1ed085 !important;
    color: #fff;
}

.table-responsive-sm {
    overflow: auto;
}

/*------------------------------------------------------------------
    10. Progress Bars
-------------------------------------------------------------------*/

.progress_bar {
    padding: 15px 40px 50px 40px;
}

.progress.skill-bar {
    background: #e9ecef;
    border-radius: 10px;
    height: 10px;
    margin-top: 2px;
}

    .progress.skill-bar .progress-bar {
        background-color: #1ed085;
        box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
    }

.progress-bar {
    background-color: #1ed085;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
}

.progress {
    display: flex;
    height: 10px;
    overflow: hidden;
    font-size: .75rem;
    background-color: #fff;
    border-radius: 10px;
}

.skill {
    font-size: 14px;
    color: #455a64;
    margin-top: 20px;
    font-weight: 500;
}

    .skill .info_valume {
        float: right;
    }

/*------------------------------------------------------------------
    11. Social Icons
-------------------------------------------------------------------*/

.socile_icons {
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    background: #fff;
    min-height: 165px;
}

.social_icon {
    width: 100%;
    text-align: center;
    font-size: 45px;
    background: black;
    padding: 10px 0 8px;
    color: #fff;
    background: #222;
}

.fb .social_icon {
    background: #3b5998;
}

.tw .social_icon {
    background: #00aced;
}

.linked .social_icon {
    background: #0077B5;
}

.google_p .social_icon {
    background: #d34836;
}

/*------------------------------------------------------------------
    12. Charts
-------------------------------------------------------------------*/

#canvas-holder {
    width: 100%;
    margin-top: 50px;
    text-align: center;
}

.area_chart {
    padding: 30px 0 30px 30px;
    width: 97%;
}

/*------------------------------------------------------------------
    13. Testimonials
-------------------------------------------------------------------*/

#testimonial_slider.carousel {
    width: 86%;
    margin: 35px 7% 35px;
}

    #testimonial_slider.carousel .item {
        color: #999;
        font-size: 14px;
        text-align: center;
        overflow: hidden;
        min-height: auto;
    }

    #testimonial_slider.carousel .img-box {
        width: 120px;
        height: 120px;
        margin: 0 auto;
        border-radius: 50%;
    }

/*------------------------------------------------------------------
    14. Blog & Tasks
-------------------------------------------------------------------*/

.dash_head {
    background-image: url('images/layout_img/pattern_h.png');
    font-weight: normal;
    height: auto;
    border-radius: 5px 5px 0 0;
    padding: 35px 45px 32px;
    background-size: cover;
    background-position: center center;
    background-color: #214162;
    position: relative;
}

    .dash_head h3 {
        color: #fff;
        text-transform: none;
        font-weight: 400;
        font-size: 22px;
    }

.dash_blog {
    min-height: 650px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    float: left;
    width: 100%;
    margin-bottom: 15px;
}

.task_list {
    float: left;
    width: 100%;
    list-style: none;
    margin: 0;
}

    .task_list li {
        padding: 20px 40px;
        border-bottom: solid #eee 1px;
        line-height: normal;
        font-size: 16px;
        border-left: solid 5px #666;
    }

        .task_list li:nth-child(1) {
            border-left-color: #ff9800;
        }

        .task_list li:nth-child(2) {
            border-left-color: #2196f3;
        }

        .task_list li:nth-child(3) {
            border-left-color: #673ab7;
        }

        .task_list li:nth-child(4) {
            border-left-color: #e91e63;
        }

        .task_list li:nth-child(5) {
            border-left-color: #1ed085;
        }

/*------------------------------------------------------------------
    15. Widgets
-------------------------------------------------------------------*/

.info_people {
    padding: 35px;
    display: flex;
}

    .info_people .p_info_img {
        width: 30%;
    }

        .info_people .p_info_img img {
            width: 100%;
            border-radius: 5px;
        }

.widget_progress_bar {
    padding: 40px 40px 50px 40px;
}

/*------------------------------------------------------------------
    16. Calendar
-------------------------------------------------------------------*/

.calendar {
    float: left;
    width: 100%;
}

    .calendar table.unstackable {
        display: inline-table;
        width: 100%;
    }

        .calendar table.unstackable thead tr:nth-child(1) th {
            font-weight: 500;
            text-shadow: 1px 1px 1px rgba(0, 0, 0, .5);
            border: none;
            color: #fff;
            text-align: center;
            background: #1ed085;
            font-size: 21px;
            padding: 15px 0;
        }

/*------------------------------------------------------------------
    17. General Elements
-------------------------------------------------------------------*/

/* Tabs */
.tabbar {
    float: left;
    width: 100%;
}

.tab-content {
    padding: 20px 0;
}

.tabbar .nav-tabs {
    border-bottom: solid #eee 1px;
}

.tabbar nav div.nav-tabs .nav-link {
    border-radius: 0;
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 300;
}

/* Pagination */
.pagination .btn {
    background: #1ed085;
    color: #fff;
    border-color: #1ed085;
    width: 45px;
    height: 40px;
    font-size: 14px;
    font-weight: 500;
}

    .pagination .btn.active,
    .pagination .btn:hover,
    .pagination .btn:focus {
        background: #333;
        border-color: #333;
    }

/*------------------------------------------------------------------
    18. Gallery
-------------------------------------------------------------------*/

.gallery_section_inner .column {
    background: #fff;
    box-shadow: 0 0 13px -10px #000;
    overflow: hidden;
}

.heading_section {
    border-top: solid #1ed085 2px;
    background: #335487;
}

    .heading_section h4 {
        color: #fff;
        margin: 0;
        font-weight: 200;
        text-align: center;
        padding: 16px 0 16px;
        font-size: 15px;
    }

/*------------------------------------------------------------------
    19. Icons
-------------------------------------------------------------------*/

.fontawesome-icons-list .fw_icon a {
    transition: ease all 0.2s;
    float: left;
    width: 100%;
    padding: 10px 15px;
    font-size: 14px;
    border-radius: 2px;
    color: rgba(21, 40, 60, 0.6);
}

    .fontawesome-icons-list .fw_icon a:hover,
    .fontawesome-icons-list .fw_icon a:focus {
        background-color: #1ed085;
        color: #fff;
        text-decoration: none;
        transform: scale(1.1);
    }

/*------------------------------------------------------------------
    20. Invoice
-------------------------------------------------------------------*/

h2.invoice_head {
    font-size: 22px;
    font-weight: 500;
    color: #222;
    text-align: left;
}

.invoice_blog h4 {
    color: #335487;
    background: #f8f8f8;
    padding: 15px 20px;
    font-weight: 400;
    font-size: 18px;
}

/*------------------------------------------------------------------
    21. Price Tables
-------------------------------------------------------------------*/

.price_table table.table {
    margin: 0;
}

.price_table table th,
.price_table table td {
    border: none;
    padding: 10px 15px;
    font-size: 14px;
    color: #666;
    vertical-align: middle;
}

.price_table_head h2 {
    line-height: normal;
    color: #fff;
    text-align: center;
    font-weight: 400;
    padding: 18px 20px;
    font-size: 24px;
}

/*------------------------------------------------------------------
    22. Mail
-------------------------------------------------------------------*/

.mail-box {
    border-collapse: collapse;
    border-spacing: 0;
    display: table;
    table-layout: fixed;
    width: 100%;
}

    .mail-box aside {
        display: table-cell;
        float: none;
        height: 100%;
        padding: 0;
        vertical-align: top;
    }

.inbox-head {
    background: #f6f6f6;
    border-radius: 0;
    color: #fff;
    min-height: 80px;
    padding: 24px 30px 24px;
    background-size: cover;
    background-position: center center;
}

    .inbox-head h3 {
        display: inline-block;
        font-weight: 500;
        margin: 0;
        padding-top: 3px;
        text-transform: none;
        letter-spacing: 0;
        color: #335487;
        font-size: 21px;
    }

/*------------------------------------------------------------------
    23. Contact
-------------------------------------------------------------------*/

.contact_blog {
    float: left;
    width: 100%;
    border: solid #ddd 1px;
    border-radius: 3px;
    padding: 30px;
}

.contact_inner {
    float: left;
    width: 100%;
}

    .contact_inner h3 {
        font-weight: 600;
        text-transform: none;
        font-size: 20px;
        margin-bottom: 10px;
        color: #455a64;
    }

/*------------------------------------------------------------------
    24. Login Section
-------------------------------------------------------------------*/

.login {
    background: #eee;
}

.full_height {
    height: 100vh;
}

.login_section {
    max-width: 640px;
    background: #fff;
    min-height: 540px;
    width: 100%;
    box-shadow: 0px 0 10px -8px #000;
    margin: 0px;
    padding: 0;
    border-radius: 10px;
    overflow: hidden;
}

.logo_login {
    background: url('images/layout_img/login_image.jpg');
    padding: 50px 0;
    background-position: center center;
    position: relative;
}

    .logo_login::after {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        background: rgb(253, 204, 21);
        top: 0px;
        left: 0;
    }

.login_form {
    padding: 50px 50px;
    float: left;
    width: 100%;
}

    .login_form form .field input {
        border-top: none;
        border-left: none;
        border-right: none;
        border-bottom: solid #ddd 2px;
        width: 395px;
        float: right;
        padding: 10px;
        line-height: normal;
        font-weight: 300;
        transition: ease all 0.5s;
    }

/*------------------------------------------------------------------
    25. Error Pages
-------------------------------------------------------------------*/

.error_page h2 {
    font-size: 150px;
    line-height: 150px;
    text-align: center;
    font-weight: 300;
}

.error_page h3 {
    color: #444d5b;
    text-align: center;
    font-weight: 700;
    font-size: 50px;
    line-height: 50px;
    margin-bottom: 25px;
    text-shadow: none;
    margin-top: 10px;
}

.error_404 {
    background: url('images/layout_img/pattern_h.png');
    background-size: cover;
    background-color: #fff;
}

/*------------------------------------------------------------------
    26. Maps
-------------------------------------------------------------------*/

#map {
    height: 100%;
    min-height: 720px;
}

/*------------------------------------------------------------------
    27. Footer
-------------------------------------------------------------------*/

.footer {
    min-height: 65px;
    background: #fff;
    margin-top: 30px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    border-radius: 5px;
    width: 100%;
}

    .footer p {
        margin: 0;
        line-height: normal;
        text-align: center;
        font-size: 14px;
        font-weight: 300;
        color: #214162;
        padding: 25px 15px;
    }

/*------------------------------------------------------------------
    28. Accessibility & Focus Styles
-------------------------------------------------------------------*/

*:focus {
    outline: 3px solid rgba(196, 181, 214, 0.5);
    outline-offset: 2px;
}

/*------------------------------------------------------------------
    29. Custom Scrollbar
-------------------------------------------------------------------*/

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #FFF9F0;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #E8A5A5, #C4B5D6);
    border-radius: 5px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(180deg, #D49494, #B3A3C5);
    }

/*------------------------------------------------------------------
    30. Audio Element Styling
-------------------------------------------------------------------*/

audio {
    width: 100%;
    max-width: 400px;
    margin: 1rem 0;
    border-radius: 10px;
}

    audio::-webkit-media-controls-panel {
        background-color: #E8D5C4;
    }

/*------------------------------------------------------------------
    31. Hidden & Utility Classes
-------------------------------------------------------------------*/

.hidden,
.d-none {
    display: none !important;
    visibility: hidden;
}

.dis_flex {
    display: flex;
}

/*------------------------------------------------------------------
    32. Responsive Design
-------------------------------------------------------------------*/

/* Force icon visibility */
table tr td:last-child,
table tbody tr td:last-child {
    text-align: center;
    white-space: nowrap;
}

    table tr td:last-child a,
    table tbody tr td:last-child a {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

        table tr td:last-child i,
        table tbody tr td:last-child i,
        table tr td:last-child a i,
        table tbody tr td:last-child a i {
            display: inline-block !important;
            visibility: visible !important;
            opacity: 1 !important;
            font-size: 18px !important;
            margin: 0 5px !important;
        }

/* Hamburger menu fallback */
.navbar-btn,
button[data-toggle="collapse"],
.sidebar_toggle {
    position: relative;
}

    .navbar-btn:after,
    button[data-toggle="collapse"]:after,
    .sidebar_toggle:empty:after {
        content: "☰";
        font-size: 24px;
        color: #335487;
        font-weight: bold;
    }

@media (max-width: 768px) {
    .form-horizontal {
        padding: 1.5rem;
    }

    h2 {
        font-size: 2rem;
    }

    h4 {
        font-size: 1.5rem;
    }

    .col-md-4,
    .col-md-3,
    .col-md-12 {
        margin-bottom: 1rem;
    }

    input[type="submit"],
    .btn {
        width: 100%;
        margin-bottom: 1rem;
    }

    #content {
        padding: 60px 15px 15px 15px;
    }

    .topbar {
        padding-left: 0;
    }

    #sidebar {
        margin-left: -280px;
    }

        #sidebar.active {
            margin-left: 0;
        }

    .dashboard_2 .social_icon {
        width: 100%;
        height: auto;
    }

    .dashboard_2 .social_cont {
        width: 100%;
    }
}

@media (max-width: 992px) {
    .container {
        width: 100%;
        max-width: 100%;
    }
}

/* End of Merged Stylesheet */

/*------------------------------------------------------------------
    CRITICAL ICON FIXES - DO NOT REMOVE
-------------------------------------------------------------------*/

/* SIDEBAR TOGGLE HAMBURGER BUTTON */
button#sidebarCollapse,
.sidebar_toggle,
button.sidebar_toggle {
    background: rgba(255, 255, 255, 0.25) !important;
    backdrop-filter: blur(10px) !important;
    border: none !important;
    padding: 14px 26px !important;
    cursor: pointer !important;
    display: inline-block !important;
    transition: all 0.3s ease !important;
}

    button#sidebarCollapse:hover,
    .sidebar_toggle:hover,
    button.sidebar_toggle:hover {
        background: rgba(255, 255, 255, 0.35) !important;
    }

    button#sidebarCollapse i.fa.fa-bars,
    .sidebar_toggle i.fa.fa-bars,
    .sidebar_toggle i {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: #fff !important;
        font-size: 21px !important;
        font-family: 'FontAwesome' !important;
        font-style: normal !important;
        font-weight: 900 !important;
    }

        /* If icon still doesn't show, use before pseudo-element */
        button#sidebarCollapse i.fa-bars:before,
        .sidebar_toggle i.fa-bars:before {
            content: "\f0c9" !important;
            font-family: 'FontAwesome' !important;
            display: inline-block !important;
        }

/* TABLE ACTION ICONS - FontAwesome on anchor tags */
table td:last-child,
table tbody td:last-child,
.table td:last-child {
    text-align: center !important;
    white-space: nowrap !important;
    padding: 10px !important;
}

/* FontAwesome classes ON anchor tags */
table td a.fa,
table tbody td a.fa,
td a.fa,
a.fa-edit,
a.fa-eye,
a.fa-trash,
a.fa-file,
a.fa-pencil {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-family: 'FontAwesome' !important;
    font-style: normal !important;
    font-weight: 900 !important;
    text-decoration: none !important;
    margin: 0 5px !important;
    width: auto !important;
    height: auto !important;
}

/* Size variants */
a.fa.fa-lg,
table td a.fa-lg {
    font-size: 1.33333em !important;
    line-height: 0.75em !important;
    vertical-align: -15% !important;
}

/* Before pseudo-elements for FontAwesome icons on anchors */
a.fa-edit:before {
    content: "\f044" !important;
    font-family: 'FontAwesome' !important;
}

a.fa-eye:before {
    content: "\f06e" !important;
    font-family: 'FontAwesome' !important;
}

a.fa-trash:before {
    content: "\f1f8" !important;
    font-family: 'FontAwesome' !important;
}

a.fa-file:before {
    content: "\f15b" !important;
    font-family: 'FontAwesome' !important;
}

a.fa-pencil:before {
    content: "\f040" !important;
    font-family: 'FontAwesome' !important;
}

/* Icon Colors */
a.fa-edit,
table td a.fa-edit,
a.fa-pencil,
table td a.fa-pencil {
    color: #1ed085 !important;
}

a.fa-eye,
table td a.fa-eye {
    color: #2196f3 !important;
}

a.fa-trash,
table td a.fa-trash {
    color: #f44336 !important;
}

a.fa-file,
table td a.fa-file {
    color: #ff9800 !important;
}

/* Hover Effects */
a.fa-edit:hover,
a.fa-pencil:hover {
    color: #17a06b !important;
    transform: scale(1.1);
}

a.fa-eye:hover {
    color: #0d7ac7 !important;
    transform: scale(1.1);
}

a.fa-trash:hover {
    color: #c62828 !important;
    transform: scale(1.1);
}

a.fa-file:hover {
    color: #f57c00 !important;
    transform: scale(1.1);
}

/* Force all FontAwesome icons to show */
i.fa,
i.fas,
i.far,
i.fab,
span.fa,
.fa {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Margin right class */
.mr-1 {
    margin-right: 0.25rem !important;
}
/* Force SF Pro on all editable / form-heavy pages */
body,
.form-control,
.form-group label,
p,
.control-label,
select,
option,
input,
textarea,
button {
    font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "kern";
}