@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900&display=swap');

:root {
    --primary-color: #1363A6;
}

body {
    font-family: "Be Vietnam Pro", serif !important;
}

table#lowerTable input,
.txt-center input {
    width: 100%;
}

.table-center tr td,
.table-center tr th {
    text-align: center !important;
}

select:focus,
input:focus{
    box-shadow: none !important;
}

textarea{
    outline: none;
}
.have-percent input.final-output,
.form-group.order-quantity input,
.form-group.date-pick input.dateInput{
    text-align: center !important;
}

.raw-material td select {
    text-align: left !important;
}
.total-cost * {
    text-transform: capitalize;
}


input[type="number"] {
    -moz-appearance: textfield;
    /* Remove arrows in Firefox */
    -webkit-appearance: none;
    /* Remove arrows in Chrome, Safari, Edge */
    appearance: none;
    /* Standard property for modern browsers */
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    /* Remove spin buttons in Chrome, Safari */
    margin: 0;
    /* Remove extra margin if needed */
}

a.btn,
button {
    font-family: "Be Vietnam Pro", serif;
    color: var(--primary-color);
}

a.nav-link {
    color: var(--primary-color) !important;
    font-family: "Be Vietnam Pro", serif;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-align: center !important;
    text-underline-position: from-font !important;
    text-decoration-skip-ink: none !important;
}

.header-area {
    border-color: #1363A64D !important;
}

.header-area .login-area {
    gap: 15px;
}

.header-area .login-area i {
    color: var(--primary-color) !important;
}

.log-btn {
    padding: 5px 35px !important;
    border: 1px solid var(--primary-color) !important;
    color: var(--primary-color) !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    border-radius: 10px !important;
}

.log-btn:hover {
    color: #FFF !important;
    background: var(--primary-color) !important;
}

.site-header .r_side {
    gap: 30px;
}

.site-header .r_side .user_icon {
    font-size: 20px;
}

.site-header .r_side .user_icon i {
    color: var(--primary-color) !important;
}

.site-header ul.nav {
    gap: 30px;
}

.footer {
    background-color: var(--primary-color);
    /* Blue background */
    color: white;
    padding: 40px 0 10px;
    bottom: 0;
    position: relative;
}

.footer .nav-link {
    color: #FFF !important;
    text-decoration: none;
}

.footer .social-icons,
.footer .social-icons a {
    color: white;
    font-size: 1.5rem;
    margin: 0 10px;
}

.footer .logo img {
    max-width: 100px;
}


.footer p {
    margin: 0;
    font-size: 0.875rem;
}

.footer .copy-right-bar {
    border-top: 1px solid #FFFFFF80;
    padding-top: 20px;
    max-width: 85%;
    margin: 0 auto;
}

.footer .copy-right-bar p {
    font-weight: 300;
}

.footer ul.nav {
    gap: 30px;
}


.form_one {
        display: grid;
            gap: 0;
            padding: 25px 5px;
            border: 1px solid var(--primary-color);
            border-radius: 13px;
            margin: 0 auto;
            grid-template-columns: repeat(6, 1fr);
}

.form_one .form-group {
    display: flex;
    text-wrap: nowrap;
    align-items: center;
    gap: 10px;
    padding: 0 7px;
    flex-direction: column;;
}

.form_one .form-group label {
    margin: 0;
    font-weight: 700;
    color: var(--primary-color);
}

.form_one .order-quantity .input-group {
    gap: 10px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.form_one .form-group.order-quantity .input-group select,
.form_one .form-group.order-quantity .input-group input {
    max-width: 100% !important;
}

.form_one .form-group select,
.form_one .form-group input {
    max-width: 100% !important;
    width: 100% !important;
    border-color: var(--primary-color);
    border-radius: 8px !important;
    color: var(--primary-color);
}


section.hero-one {
    padding: 70px 0 0;
}

.hero-one h2.title {
    font-size: 60px;
    color: var(--primary-color);
    font-weight: 700;
    margin: 40px 0 60px;
}

.btn-before {
    border: 1px solid var(--primary-color) !important;
    padding: 5px 39px !important;
    position: relative !important;
    color: var(--primary-color) !important;
    overflow: hidden !important;
    font-family: "Be Vietnam Pro", serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    height: fit-content;
}

.btn-before:before {
    position: absolute;
    content: '';
    width: 15px;
    height: 100px;
    background: var(--primary-color);
    left: -7px;
    bottom: -30px;
    z-index: -1;
    transition: .6s all ease;
    transform: rotate(-22deg);
}

.btn-before:hover {
    color: #FFF !important;
    border-color: var(--primary-color);
    background: var(--primary-color) !important;
    transition: .5s all ease;
}

.btn-before:hover:before {
    width: 110%;
    height: 100px !important;
    bottom: -35px;
}

.top-btns.d-flex.justify-content-center.mb-3 {
    gap: 20px;
}

.top-btns button.btn-before {
    width: 180px;
    padding: 5px !important;
}

.h2 {
    color: var(--primary-color) !important;
    font-weight: 700 !important;
    font-size: 40px !important;
}

.raw-material h2 {
    margin-bottom: 0 !important;
}

.myTable table {
    text-wrap: nowrap !important;
    /* border-radius: 10px; */
    overflow: hidden;
}

.container-fluid {
    width: 90% !important;
}

.myTable select {
    width: fit-content;
}


.raw-material .top-bar {
    margin: 30px 0;
}

.myTable table td {
    padding: 5px;
}

.myTable table input,
.myTable table select {
    border-radius: 0;
    border: 0;
    text-align: center;
}

.myTable tr th {
    background: #1363A6;
    color: #FFF;
    font-weight: 500;
    text-align: center;
    text-transform: capitalize;
    align-content: center;
}

.blue-field:focus,
.blue-field,
.blue-field input {
    background: #D2EDFF !important;
    border-radius: 5px !important;
    color: var(--primary-color) !important;
}

.have-percent,
.have-percent input {
    color: var(--primary-color) !important;
}

.have-percent input {
    text-align: right !important;
}

.no-border-td .btn-no-event-times,
.field-action .btn-cancel {
    background: rgb(255, 0, 0);
    border-radius: 50%;
    padding: 3px 9px;
    color: #FFF;
}

.field-action .btn-cancel:hover {
    background: #b00303;
    color: #FFF;
}

.have-percent {
    display: flex;
    align-items: center;
    padding-right: 12px;
}

.top-area {
    display: flex;
    justify-content: center;
    gap: 20px;
    align-items: center;
}

.top-area h5 {
    margin: 0;
    font-size: 29px;
    font-weight: 600;
    color: var(--primary-color);
    text-transform: capitalize;
}

table * {
    border-color: #1363A64D;
}

table thead * {
    border-color: #FFF;
}



/* .raw-mt-table td.field-waste,
.raw-mt-table td.field-solid {
    min-width: 100px;
}

.raw-mt-table td.field-cost-m,
.raw-mt-table td.field-micron,
.raw-mt-table td.field-gsm {
    width: 150px;
}

.raw-mt-table td.field-density {
    width: 100px;
}

.raw-mt-table td.field-total-gsm {
    width: 155px;
}

.raw-mt-table td.field-cost-per-kg {
    width: 180px;
}

.raw-mt-table td.field-lower {
    width: 125px;
}
td.field-material,
td.field-type {
    width: min-content;
}
td.field-required-kgs-estimated {
    width: 250px;
}




td.field-micron.sovent {
    width: 406px !important;
}
td.field-action {
    width: 70px !important;
}

*/

td.field-lower,
td.field-solid{
    width: 90px;
    display: block;
}

.no-border-td,
.no-border-td td {
    border: 0 !important;
}
.no-border-td td.field-material,
.no-border-td td.field-type {
    visibility: hidden;
}
.form-control {
    padding: .375rem .15rem !important;
}

.h4 {
    color: var(--primary-color) !important;
    font-weight: 600 !important;
    font-size: 20px !important;
    text-transform: capitalize !important;
    margin: 0 !important;
}

h5.h5 {
    text-wrap: wrap;
    font-size: 16px;
    line-height: 22px;
    font-weight: 400;
    padding: 10px;
    border: 1px solid #1363A64D;
    border-radius: 10px;
    margin: 0;
    display: inline-block;
}

.based-ink-res {
    display: flex;
    flex-direction: column;
    border: 1px solid #1363A64D;
    border-radius: 10px;
    overflow: hidden;
}

.based-ink-res input {
    padding: 2px !important;
}

.based-ink-res .btm-field {
    padding: 5px;
    border-top: 1px solid #1363A64D;
}

.rm-details .has-input {
    text-align: center;
}

.rm-details .has-input input {
    width: 100%;
    outline: 0;
}

.rm-details table td.has-input input:focus {
    background: #d2edff;
}

.rm-details table td.has-input {
    padding: 0;
}

.rm-details table td.has-input input,
.rm-details table td {
    padding: 10px;
}

.rm-details table td label {
    font-weight: 500;
}


.oc-table td.has-input {
    text-align: center;
    padding: 04px;
    min-width: 180px;
}

.oc-table td.has-input input {
    padding: 8px;
    width: 100%;
    border-radius: 5px;
}

.oc-table td.has-input input:focus {
    outline: 1px solid var(--primary-color);
}

.oc-table td.has-label,
.oc-table td.has-checkbox {
    min-width: 150px;
    padding: 6px 10px 0;
}

.oc-table td.has-checkbox input {
    margin: 0;
}

.oc-table td.has-label label,
.oc-table td.has-checkbox label {
    display: inline-flex;
    gap: 13px;
    color: #535353;
    font-weight: 600;
    font-size: 17px;
    text-transform: capitalize;
}

.oc-table thead tr th {}

th.th-has-tag {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

th.th-has-tag span {
    background: #FFF;
    color: red;
    border-radius: 4px;
}


.result-tables td.has-input {
    padding: 0;
}

.result-tables * {
    border-color: #1363a680;
}

.result-tables td {
    align-content: center;
    width: 50%;
    background: #FFF !important;
    color: var(--primary-color);
    font-weight: 600;
    padding: 5px .5rem !important;
    /* text-transform: capitalize; */
}

.result-tables td.has-input input:focus {
    background: #d2edff;
}

.result-tables td.has-input input,
.result-tables td.has-input select {
    padding: 6px;
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    text-align: center;
    color: var(--primary-color);
}

.result-tables {
    max-width: 600px;
    margin: 0 auto;
}

.pouch-zipper-table .result-tables {
    width: 100%;
    max-width: 100%;
}

td.has-input.has-two-input,
td.has-input.has-two-input input {
    padding: 0 !important;
}

.pouch-zipper-table {
    max-width: 1100px;
    margin: 0 auto;
}

.pouch-zipper-table {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* Registraion Form Css */
.reg-form .form-title {
    padding: 40px 20px 29px;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 0 4px 0;
    border-radius: 10px;
    margin-bottom: 30px;
}


.login-form .form-title h2,
.reg-form .form-title h2 {
    font-weight: 700;
    font-size: 45px;
    color: var(--primary-color);
    line-height: 1.3;
    margin: 0;
}

.reg-form .form-title p,
.login-form .form-title p {
    color: var(--primary-color);
}

.reg-form .form-title p {
    color: var(--primary-color);
    margin: 0;
    font-weight: 500 !important;
}

.reg-form form,
.login-form form {
    max-width: 935px;
    margin: 0 auto;
}

.form-box {
    padding: 25px 15px 05px 15px;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 0 4px 0;
    border-radius: 11px;
    margin-bottom: 50px;
}

.text-required {
    font-size: 12px;
    font-weight: 400;
    color: #C1C1C1;
    letter-spacing: 0.5px;
}

.info-text {
    font-size: 11px;
    font-weight: 400;
    color: #C1C1C1;
    margin-top: 5px !important;
}

.form-box label.form-label {
    color: var(--primary-color);
    font-weight: 500;
}

.form-box input,
.form-box select {
    font-size: 14px;
    padding: 15px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0 4px 0;
    border: 0;
}

.form-box input:focus,
.form-box select:focus {
    box-shadow: rgb(19, 99, 166, 0.5) 0px 0 4px 0 !important;
}

.form-box input::placeholder {
    color: #C1C1C1;
}

.form-box button.pw-btn {
    background: var(--primary-color);
    color: #FFF;
    border-radius: 7px !important;
}

.form-box button.pw-btn:hover {
    background: #2a82cb;
}

.form-box button.pw-btn:focus {
    box-shadow: none;
}

input[type="radio"],
input[type="checkbox"] {
    border-radius: 6px !important;
    border: 2px solid #C1C1C1 !important;
    box-shadow: none !important;
    padding: 10px !important;
}

.radio-field label.form-check-label,
.checkbox-field label.form-check-label {
    position: relative;
    bottom: -4px;
    padding-left: 5px;
    color: var(--primary-color)
}

input[type="radio"][data-selected="true"],
input[type="checkbox"][data-selected="true"] {
    border-color: var(--primary-color) !important;
    background: url('./../imgs/active-checkbox.png') !important;
    border-radius: 4px !important;
    background-position: center center !important;
    background-size: auto !important;
    background-repeat: no-repeat !important;
}

.form-box .mb-4:nth-last-of-type(1) {
    margin-bottom: 13px !important;
}

.reg-button {
    display: flex;
    justify-content: flex-end;
}

.reg-button button {
    min-width: 180px;
}

.reg-acc label.form-check-label {
    font-size: 10px;
    color: #C1C1C1;
    font-weight: 400;
    bottom: -1px;
    left: 4px;
    text-transform: capitalize;
}

.reg-acc a {
    color: #C1C1C1;
}

.reg-acc a:hover {
    color: var(--primary-color);
}

.info-text a {
    color: #0991F7;
    text-decoration: none;
}

.info-text a:hover {
    text-decoration: underline;
}

.login-form .form-title {
    margin-bottom: 50px;
}


@media (max-width: 1380px) {

    .form_one .form-group select,
    .form_one .form-group input {
        width: 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width: 955px) {

    .form_one .form-group {
            display: grid;
            grid-template-columns: 30% 65%;
            padding: 0 0 12px;
            border-bottom: 1px solid #d2edff;
        }
    
        .form_one .form-group:nth-last-child(1) {
            padding: 0 0 0;
            border-bottom: 0;
        }

    .form_one {
        display: flex;
            flex-direction: column;
            gap: 12px;
    }


    .form_one .form-group.order-quantity .input-group input,
    .form_one .form-group.order-quantity .input-group select {
        width: 100% !important;
        max-width: 100% !important;
    }
        .form_one .form-group label {
            text-wrap: wrap;
        }

    .rm-details td.has-input {
        min-width: 150px;
    }

    .raw-mt-table input {
        min-width: 100px;
    }
}


@media (max-width: 767px) {

    .reg-form .form-title h2,
    .login-form .form-title h2,
    .hero-one h2.title {
        font-size: 30px;
        line-height: 1.3;
        margin-bottom: 10px;
    }

    .reg-form input#firstName {
        margin-bottom: 20px;
    }

    .reg-button {
        padding-top: 20px;
    }

    .reg-button button.btn {
        width: 100%;
    }

    h2.h2 {
        font-size: 25px !important
    }

    body .raw-material .top-bar {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start !important;
        margin: 20px 0 20px;
    }

}


.error-message {
    margin-bottom: 1rem;
    padding: 1rem;
    background-color: #ff6666;
    /* Light green */
    border: 1px solid #ff9999;
    /* Green border */
    color: #8B0000;
    /* Dark green text */
    border-radius: 0.5rem;
}

.success-message {
    margin-bottom: 1rem;
    padding: 1rem;
    background-color: #d4edda;
    /* Light green */
    border: 1px solid #c3e6cb;
    /* Green border */
    color: #155724;
    /* Dark green text */
    border-radius: 0.5rem;
}

.rolling-sec {
    max-width: 930px;
    margin: auto;
}

.rolling-sec table tr {
    display: grid;
    grid-template-columns: 77% 23%;
    margin-bottom: 7px;
}

.rolling-sec table tr {
    border: 0;
}

.rolling-sec table tr td {
    border-color: #1363A64D;
    border: 1px solid #1363A64D;
    border-radius: 7px 0 0px 7px;
    display: flex;
    align-items: center;
}

.rolling-sec input {
    padding: 6px 12px;
    width: 100%;
}

.rolling-sec input:focus {
    outline: 0;
}

.rolling-sec table tr td:nth-last-child(1) {
    border-radius: 0px 7px 7px 0;
    border-left: 0;
    overflow: hidden;
}

.rolling-sec table tr td:nth-child(1) {
    padding-left: 10px;
}

.rolling-sec table tr .has-blue-field input {
    text-align: center !important;
}

.rolling-sec .h4 {
    font-size: 20px;
    color: var(--primary-color);
    font-weight: bold;
}
.have-percent.grey-bg {
    background: #e9ecef;
    border-radius: 5px !important;
    overflow: hidden;
}

.container-fluid.full-wid {
    width: 100% !important;
    padding: 0;
}

@media(max-width:767px) {
body table tr td {
text-wrap: wrap !important;
}

.raw-mt-table input {
min-width: min-content !important;
}
.top-btns {
flex-direction: column;
gap: 10px !important;
}

.top-btns button {
width: 100% !important;
}
.rolling-sec table tr {
grid-template-columns: 70% 30%;
}
table.table2 tr td {
text-wrap: nowrap !important;
}
.navbar ul.navbar-nav {
align-items: middle;
padding-top: 15px;
}
.header-area .login-area {
justify-content: center;
padding-top: 20px;
}

.header-area .login-area a.btn {
flex: auto;
}
.header-area .navbar-brand img {
max-width: 100px;
}
}

@media print {
    .table {
        width: 100%;
        table-layout: fixed; /* Ensures table fits within page without scrolling */
    }

    .table td, .table th {
        word-wrap: break-word;
        overflow: hidden;
    }
}


.graph-col {
    padding: 20px;
    border: 1px solid #dee2e6;
}
h2.graph-title {
    font-size: 20px;
    text-align: center;
    padding-bottom: 10px;
} 

.new-table td input {
    width: 100%;
}

input:focus {
    outline: 0;
}