@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');







:root {



    --primary-color: #334a5a;



    --secondary-color: #f5f5f5;



    --text-color: #333333;



    --background-color: #ffffff;



    --font-family: 'Rubik', sans-serif;



}



body {



    font-family: var(--font-family);



    background-color: var(--background-color);



    color: var(--text-color);



    margin: 0;



    padding: 0;



}



ul {



    list-style: none;



    padding: 0;



    margin: 0;



}



a{



    color: var(--primary-color);



    text-decoration: none;



}



.login-container {

    min-height: 100vh;

    background: var(--primary-color);

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 15px;

}



.login-inner-container {



    background: var(--secondary-color);



    padding: 40px;



    border-radius: 8px;



    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);



    width: 600px;



}



.logo-text {



    display: flex;



    align-items: flex-start;



    gap: 10px;



}



.logo-text img {



    width: 45%;



}



.logo-text span {



    font-weight: 700;



    text-transform: uppercase;



    font-size: 14px;



    position: relative;



    top: 5px;



}



.theme-bttn {



    display: inline-block;



    cursor: pointer;



    padding: 10px 52px;



    text-align: center;



    background: #334a5a;



    color: #fff;



    font-weight: 400;



    text-decoration: none;



    border-radius: 25px;



    border-bottom: 5px solid #2b3c48;



    box-shadow: 0px 5px 3px 0px rgba(0, 0, 0, 0.25);



    font-size: 16px;



}



.form-control {



    padding: 12px 16px;



    border: 1px solid #ccc;



}



.main_header {



    width: 100%;



    background: #fff;



    position: fixed;



    left: 0;



    right: 0;



    top: 0;



    z-index: 99;



        animation-duration: 0.5s;



    transition: 0.5s;



    padding: 10px 0;



}



.header-tabs.nav-tabs {



    border: none;



    display: flex;



    align-items: center;



    margin-top: 0;



    margin-bottom: 0px;



    justify-content: flex-end;



}



.header-tabs.nav-tabs > li {



    float: none;



    display: inline-block;



    /* background: #5d656b; */



    width: auto;



    /* flex: 1; */



    background-image: linear-gradient(to bottom, #697a87, #576a78, #455a69, #334a5a, #213b4c);



}



.header-tabs.nav-tabs > li > a {



    color: #fff;



    font-size: 15px;



    border-radius: 0;



    padding: 7px 14px;



    border: none;



    margin: 0;



    border-left: 1px solid #e89c29;



    font-weight: 400;



    min-height: auto;



    display: flex;



    align-items: center;



}



.header-tabs.nav-tabs > li:first-child > a {



    border-radius: 15px 0 0 15px !important;



}



.header-tabs.nav-tabs > li:first-child {



    border-radius: 15px 0 0 15px !important;



}



.header-tabs.nav-tabs > li:last-child > a {



    border-radius: 0px 15px 15px 0px !important;



}



.header-tabs.nav-tabs > li:last-child > .dropdown {



    border-radius: 0px 15px 15px 0px !important;



}



.header-tabs.nav-tabs > li:last-child {



    border-radius: 0px 15px 15px 0px !important;



}



.main_header .logo-text img {



    width: 33%;



}



.my-calculation {



    margin-top: 80px;



}



.page-heading {



    font-size: 24px;



    font-weight: 600;



    margin: 0 0 10px 0;



}







.single_shared {



    background: #fff;



    padding: 15px;



    margin-bottom: 12px;



    border-radius: 10px;



    box-shadow: 0 3px 8px rgb(187 187 187);



    text-align: center;



}



.single_shared span {



    font-size: 29px;



}



.single_shared h3 {
    margin: 0 0 0 0;
    font-size: 21px;
    color: #000;
    text-transform: capitalize;
    min-height: 49px;
}



.single_shared h4 {



    margin: 16px 0 14px 0;



    font-size: 15px;



}



.custom-checkbox {



    text-align: left;



    border: 1px solid #ccc;



    padding: 15px;



    margin-top: 20px;



}



.custom-checkbox h3 {



    border-bottom: 1px solid #ccc;



    margin: 0 0 19px 0 !important;



    padding: 0 0 8px 0;



    font-size: 21px;



    color: #000;



    text-transform: capitalize;



}



.share_to_user input[type="checkbox"] {



    margin: 0;



    display: none;



}



.share_to_user label {



    font-weight: normal;



    color: #000;



    text-transform: capitalize;



    position: relative;



    padding: 0 0 0 32px;



    cursor: pointer;



    margin: 0 0 13px 0;



    display: block;



    text-align: left;



}



.share_to_user label::before {



    content: "";



    height: 23px;



    width: 25px;



    display: block;



    position: absolute;



    left: 0;



    top: 0;



    background: #334a5a;



}



.share_to_user input[type="checkbox"]:checked + label::after {



    content: '';



    display: block;



    position: absolute;



    top: 3px;



    left: 9px;



    width: 6px;



    height: 14px;



    border: solid #fdfdfd;



    border-width: 0 2px 2px 0;



    transform: rotate(45deg);



}



.theme-bttn {



    background: #334a5a;



    display: inline-block;



    padding: 8px 24px;



    border: none;



    border-bottom-color: currentcolor;



    border-bottom-style: none;



    border-bottom-width: medium;



    color: #fff;



    border-radius: 10px;



    border-bottom: 5px solid #2b3c48;



    box-shadow: 0px 5px 3px 0px rgba(0,0,0,0.25);



    margin-bottom: 7px;



}



.theme-bttn:hover {



    color: #fff;



}



.single_shared p {



    font-size: 14px;



    margin: 0 0 5px 0;



}



.btn-info {



    border-bottom: 5px solid #00a0c1;



}



.btn-danger {



    border-bottom: 5px solid #ae0011;



}



.stepper {



    position: fixed;



    top: 101px;



    left: 0;



    right: 0;



    margin: 0 auto;



    max-width: 100%;



    background: #fff;



    z-index: 9;



    padding: 0 20%;



}



.stepper .nav-tabs {



    position: relative;



    border: none;



    /* position: sticky; */



    top: 0;



}



.stepper .nav-tabs > li {



    width: 25%;



    position: relative;



    text-align: center;



}



.stepper .nav-tabs > li:after {



    content: '';



    position: absolute;



    background: #f1f1f1;



    display: block;



    width: 100%;



    height: 15px;



    top: 30px;



    left: 50%;



    z-index: 1;



}



.stepper .nav-tabs > li.completed::after {



  background: #34bc9b;



}



.stepper .nav-tabs > li:last-child::after {



  background: transparent;



}



.stepper .nav-tabs > li.active:last-child .round-tab {



  background: #34bc9b;



}



.stepper .completed .round-tab::after {



    content: '✔';



    color: #fff;



    position: absolute;



    left: 0;



    right: 0;



    margin: 0 auto;



    top: 3px;



    display: block;



    font-size: 19px;



}



.stepper .nav-tabs [data-toggle='tab'] {



  width: 25px;



  height: 25px;



  margin: 20px auto;



  border-radius: 100%;



  border: none;



  padding: 0;



  color: #f1f1f1;



}



.stepper .nav-tabs [data-toggle='tab']:hover {



  background: transparent;



  border: none;



}



.stepper .nav-tabs > .active > [data-toggle='tab'], .stepper .nav-tabs > .active > [data-toggle='tab']:hover, .stepper .nav-tabs > .active > [data-toggle='tab']:focus {



  color: #34bc9b;



  cursor: default;



  border: none;



}



.stepper .tab-pane {



  position: relative;



  padding-top: 50px;



}



.stepper .round-tab {



    width: 35px;



    height: 35px;



    display: flex;



    border-radius: 50%;



    border: none;



    color: #a3a3a3;



    z-index: 2;



    position: absolute;



    left: 0;



    text-align: center;



    font-size: 17px;



    background: #f1f1f1;



    justify-content: center;



    align-items: center;



}



.stepper .completed .round-tab {



  background: #34bc9b;



  font-size:0px;



}







.stepper .active .round-tab {



    background: #34bc9b;



    border: 2px solid #34bc9b;



    color: #fff;



}



/*.stepper .active .round-tab:hover {*/



/*  background: #fff;*/



/*  border: 2px solid #34bc9b;*/



/*}*/



.stepper .active .round-tab::after {



  display: none;



}



/*.stepper .disabled .round-tab {*/



/*  background: #fff;*/



/*  color: #f1f1f1;*/



/*  border-color: #f1f1f1;*/



/*}*/



/*.stepper .disabled .round-tab:hover {*/



/*  color: #4dd3b6;*/



/*  border: 2px solid #a6dfd3;*/



/*}*/



.stepper .disabled .round-tab::after {



  display: none;



}



.body_wrapper {



    width: 100%;



    margin-top: 127px;



}



.body_wrapper h1 {



    color: #000;



    font-size: 18px;



    font-weight: 700;



    text-align: left;



    margin: 0 0 20px;



    clear: both;



}



.three-tab-cal {



    outline: 1px solid #e6e6e6;



    width: 100%;



    display: block;



    /* float: left; */



    margin: 14px 0 32px 0;



    border-radius: 15px;



    overflow: hidden;



}



.tbsbox {



    width: 100%;



    /* float: left; */



    border-bottom: 1px solid #e6e6e6;



    display: flex;



    align-items: center;



    padding: 0 0;



    /* border-radius: 10px 0 0 0; */



}



.three-tab-cal.color-green .tbsbox {



    border-bottom: 1px solid #afbac7;



}



.tbsbox span.tbs1 {



    width: 64%;



    color: #000;



    font-size: 14px;



    position: relative;



    background: #fff;



    padding: 0 20px;



    font-weight: 500;



}



.three-tab-cal.color-green .tbsbox span.tbs1 {



    background: #E8F0F8;



}



.tbs2 {



    width: 36%;



    padding: 13px 20px;



    border-left: 1px solid #e6e6e6;



}



.three-tab-cal.color-green .tbs2 {



    border-left: 1px solid #afbac7;



}



.bodytab input {



    color: #000000;



    opacity: 1;



    font-weight: 400!important;



    font-size: 15px !important;



}



.three-tab-cal.color-green {



    background: #E8F0F8;



    border: 1px solid #afbac7;



}



.step-widget {



    position: fixed;



    top: 73px;



    left: 0;



    right: 0;



    margin: 0 auto;



    max-width: 100%;



    background: #fff;



    z-index: 9;



    padding: 19px 20%;



}



.step-widget ul {



    display: flex;



    /* justify-content: space-evenly; */



}



.step-widget ul li {



    width: 25%;



    position: relative;



    text-align: center;



}



.step-widget ul li::before {



    content: "";



    position: absolute;



    background: #f1f1f1;



    display: block;



    width: 100%;



    height: 15px;



    left: 130px;



    top: 11px;



    z-index: -1;



}
.form-control[readonly] {
    pointer-events: none;
}


.round-tab {



    width: 35px;



    height: 35px;



    display: flex;



    border-radius: 50%;



    border: none;



    color: #a3a3a3;



    z-index: 2;



    /* position: absolute; */



    left: 0;



    text-align: center;



    font-size: 17px;



    background: #f1f1f1;



    justify-content: center;



    align-items: center;



    margin: 0 auto;



}



.step-widget ul li span {



    color: #333;



    font-size: 14px;



}



.step-widget ul li:last-child::before {



    display: none;



}



.step-widget ul li.active .round-tab {



    background: #34bc9b;



    border: 2px solid #34bc9b;



    color: #fff;



}



.bodytab .tab-content {



    width: 100%;



    padding: 101px 0px 25px 0;



}



.separate {



    border-top: 1px solid #c6c6c6;



    margin-bottom: 26px;



    margin-top: 20px;



}



.custom-toggle-switch {



    width: 260px;



    height: 50px;



    offset: 2px;



    position: relative;



    padding: 0;



    background: rgba(227, 229, 232, 0.5);



    border-radius: 30px;



    font-size: 16px;



    font-weight: 500;



    line-height: normal;



    font-style: normal;



    display: flex;



    align-items: center;



}







.custom-toggle-switch button.custom-toggle-bttn.active {



    border: none;



    background: transparent;



    padding: 12px 20px;



    flex: 1;



    border-radius: 30px;



}



.custom-toggle-switch button.custom-toggle-bttn {



    border: none;



    background: transparent;



    padding: 12px 20px;



    flex: 1;



    border-radius: 30px;



}



.custom-toggle-switch button.custom-toggle-bttn.active {



    background: #6ab89d;



    color: #fff;



}



.step-widget .completed .round-tab {



    background: #34bc9b;



    font-size: 0px;



}



.step-widget .completed .round-tab::after {



    content: '✔';

    color: #fff;

    position: absolute;

    left: 0;

    right: 0;

    margin: 0 auto;

    top: 1px;

    display: block;

    font-size: 19px;

}



.step-widget ul li.completed::before {



    background: #34bc9b;



}



a.btnprev {



    display: inline-block;



    width: auto;



    padding: 8px 32px;



    text-align: center;



    background: #5d656b;



    color: #fff;



    font-size: 16px;



    font-weight: 400;



    text-decoration: none;



    border-radius: 10px;



    border-bottom: 5px solid #3e4448;



    box-shadow: 0px 5px 3px 0px rgba(0,0,0,0.25);



}



.machine_names {



    display: block;



    text-align: center;



    color: #000;



    font-weight: 600;



    font-size: 27px;



}



div#only_new, #compare_table {



    background: #fff;



}



.flex-row {



    display: flex;



    gap: 10px;



}



.flex-column-sticky {



    /* flex: 0 0 30%; */



    position: fixed;



    top: 200px;



    /* z-index: 999; */



    background: #fff;



    right: 18vw;



    width: 18vw;



}



a#save_pdf_new {



    display: inline-block;



    width: auto;



    padding: 8px 21px;



    text-align: center;



    background: #334a5a;



    color: #fff;



    font-size: 15px;



    font-weight: 400;



    text-decoration: none;



    border-radius: 25px;



    border-bottom: 5px solid #2b3c48;



    box-shadow: 0px 5px 3px 0px rgba(0, 0,);



}



.flex-result-container {



    border: 1px solid #e6e6e6;



    border-radius: 15px;



    margin-bottom: 30px;



}



.flex-result-container h3 {



    margin: 0;



    font-size: 15px;



    padding: 9px 10px;



}



.flex-result {



    display: flex;



    align-items: center;



    border-top: 1px solid #e6e6e6;



    padding: 0;



}



.flex-result label {



    margin: 0;



    font-weight: 400;



    font-size: 14px;



    width: 60%;



    padding: 4px 10px;



}



.flex-result > span {



    width: 40%;



    text-align: right;



    background: gray;



    padding: 4px 10px;



}

.flex-result > span span.input-group-text {

    padding: 0;

    border: none;

}

.flex-result > span .form-control {

    padding: 0 3px;

    background: transparent;

    border: none;

    color: #000;

    text-align: left;

}

.running-cost .flex-result  span {



    background: #f4cccc;



    color: #000;



}



.flex-result span .tbs2 {

    width: 100%;

    text-align: left;

    color: #000;

}



.running-cost .flex-result  span .tbs2 {



    color: #000;



}



.profit-cost .flex-result  span {
   background: #d9ead3;
    color: #000;
}

.calculation-cost .flex-result  span {
   background: #f8cbee;
    color: #000;
}



.bodytab input {



    color: #000000;



    opacity: 1;



    font-weight: 400!important;



    font-size: 15px !important;



}



input.readonly, input.tbs2, input.tbs3 {



    background: none;



    border: none;



    color: #fff;



    padding: 0 5px;



}





.profit-cost .flex-result  span .tbs2, .calculation-cost .flex-result  span .tbs2 {



    color: #000;



}







.flex-column-sticky h1 {



    text-align: left !important;



    font-size: 20px !important;



    display: flex;



    align-items: center;



    justify-content: space-between;



}



.previous-month-cost .flex-result  span {



    background: #cfe2f3;



    color: #000;



}



.flex-cols2-scroll {



    flex: 0 0 70%;



    /* display: flex; */



    /* gap: 10px; */



    /* height: calc(100vh - 280px); */



    /* overflow-y: scroll; */



}



table.custom-table {



    width: 100%;



    border: 1px solid #e6e6e6;



}



.custom-table tr > th {



    font-size: 14px;



    padding: 8px 10px;



    font-weight: 500;



    border: 1px solid #e6e6e6;



}



tr.group-1 {



    background: #E8F0F8;



}



.custom-table tr td:first-child {



    width: 32%;



}



.custom-table tr td {



    font-size: 14px;



    padding: 8px 10px;



    font-weight: 500;



    border: 1px solid #e6e6e6;



}



.bodytab input {



    color: #000000;



    opacity: 1;



    font-weight: 400!important;



    font-size: 15px !important;



}



.custom-table .inner-table tr td {



    border: none;



}



.custom-table .inner-table tr td:first-child {



    width: 60%;



}



.custom-table .inner-table tr td:last-child {



    background: lightgray;



}



.inner-table .tbs2 {

    color: #000;

    width: 100%;

    text-align: left;

}















#compare_table h1 {



    text-align: left;



    margin: 37px 0 33px 0;



    font-size: 18px;



    font-weight: 700;



}



.existingplan_bottom_sec {



    width: 100%;



    display: inline-block;



    background: #334a5a;



    margin-top: 15px;



    outline: 1px solid #ccc;



}



.existingplan_bottom_sec .existinbox {



    width: 100%;



    float: left;



    border-bottom: 1px solid #ccc;



    display: flex;



    padding: 0 0;



}



.existingplan_bottom_sec .existinbox.head {



    border-left: none;



}



.existingplan_bottom_sec .existinbox.head span.tbs1 {



    flex: 1;



    float: left;



    color: #000;



    font-size: 18px;



    position: relative;



    padding: 10px 5px;



    border-right: 1px solid #ccc;



    background: #fff;



}



.existingplan_bottom_sec .existinbox.head span.tbs2 {



    flex: 1;



    float: left;



    color: #fff;



    font-size: 18px;



    font-weight: 600;



    text-align: center;



    padding: 10px 5px;



    border-right: 1px solid #ccc;



    background: #5d656b;



}



.existingplan_bottom_sec .existinbox.head span.tbs3 {



    flex: 1;



    float: left;



    color: #fff;



    font-size: 18px !important;



    font-weight: 600;



    text-align: center;



    padding: 10px 5px;



    background: #5d656b;



    /* width: auto; */



    line-height: 51px;



}



.existingplan_bottom_sec .existinbox {



    width: 100%;



    float: left;



    border-bottom: 1px solid #ccc;



    display: flex;



    padding: 0 0;



}



input.readonly, input.tbs2, input.tbs3 {



    background: none;



    border: none;



    color: #fff;



    padding: 0 5px;



}



.existingplan_bottom_sec .existinbox span.tbs1 {



    flex: 1;



    float: left;



    color: #000;



    font-size: 14px;



    position: relative;



    padding: 10px 5px;



    border-right: 1px solid #ccc;



    background: #fff;



    font-weight: 700;



    border-bottom: 1px solid #ccc;



}



.existingplan_bottom_sec .existinbox span.tbs2 {



    flex: 1;



    float: left;



    color: #fff;



    font-size: 15px;



    text-align: center;



    padding: 10px 5px;



    border-right: 1px solid #ccc;



    width: auto !important;



    font-weight: 600;



    line-height: 52px;



}



.existingplan_bottom_sec .existinbox.head span.tbs3 {



    flex: 1;



    float: left;



    color: #fff;



    font-size: 18px !important;



    font-weight: 600;



    text-align: center;



    padding: 10px 5px;



    background: #5d656b;



    /* width: auto; */



    line-height: 51px;



}



.existingplan_bottom_sec .existinbox .tbs3 {



    flex: 1;



}



.custom-table .inner-table tr td:last-child span.input-group-text {

    padding: 3px;

    background: transparent;

}



.custom-table .inner-table tr td:last-child .form-control {

    padding: 3px;

    background: transparent;

    flex: auto;

    /* text-align: right; */

    border: none;

}



.screen_menu {

    display: none;

}



.sidenav {

    height: 100%;

    width: 0;

    position: fixed;

    z-index: 99999;

    top: 0;

    left: 0;

    background-color: #334a5a;

    overflow-x: hidden;

    transition: 0.3s;

    padding-top: 60px;

}




#current_option_display .btn-outline-primary {

    color: #3a4a58;

    border-color: #3a4a58;

}

#current_option_display .btn.active, #current_option_display .btn:hover {

    background-color: #3a4a58;

    border-color: #3a4a58;

    color: #fff;

}









@media screen and (min-width: 1600px) and (max-width: 2000px) {


    .flex-column-sticky {
        right: 11vw;
        width: 22vw;
        height: calc(100vh - 250px);
        overflow-y: scroll;
        }
}
.float-bttn {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    padding: 10px 0 0 0;
    text-align: center;
    border-top: 1px solid #ccc;
    display: none;
}
.step4-header-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 20px;
}
.remove-option-buttons {
    display: flex;
    gap: 10px;
    align-items: center;
}
 
    .flaoting_button ul li.active a {
    background: #e9a73e !important;
}
button.theme-btn.btn-danger.remove-option-btn {
    padding: 1px 16px;
    border-right: navajowhite;
    border-radius: 3px;
}
#current_option_display span::before {
    content: "";
    position: absolute;
    right: -13px;
    top: 0;
    border-right: 5px solid transparent;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-left: 12px solid #198754;
    border-bottom: 9px solid transparent;
}
#current_option_display span {
    position: relative;
}
.topleft-option ul {
    display: flex;
    /* border: 1px solid #ccc; */
    /* border-radius: 5px; */
    flex-wrap: wrap;
}
.topleft-option ul a {
    font-size: 15px;
    border: none;
    color: #fff;
    margin: 0px 0;
    padding: 8px 18px;
    text-align: center;
    box-shadow: 0px 0px 5px 3px rgba(0, 0, 0, 0.125);
    white-space: nowrap;
    display: block;
    background: #334a5a;
}

.topleft-option ul li:first-child a {
    border-radius: 5px 0 0 5px;
}
.topleft-option ul li.result-btn a {
    border-radius: 0 5px 5px 0;
}

.topleft-option ul li.active a {
    background: #e9a73e !important;
}
.compare_table-option-display {
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0 0 16px 6px rgba(0,0,0,0.125);
}
li.top-to-btn {
    display: none;
}
.topleft-option li.top-to-btn{
    display: none;
}
button.go_top_of_page_step4 {
    border: none;
    background: #3a4a58;
    color: #fff;
    border-radius: 5px;
    margin-left: 7px;
    padding: 7px 12px;
}
.flaoting_button {
    position: fixed;
    bottom: 0;
    z-index: 99;
    left: 0;
    width: 100%;
    background: #fff;
    padding: 10px 15px;
}
.flaoting_button ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.flaoting_button ul li:first-child a {
    border-radius: 5px 0 0 5px;
}
.flaoting_button ul li.result-btn a {
    border-radius: 0 5px 5px 0;
}
.flaoting_button a {
    color: #fff;
    margin: 0px 0;
    background: #fd9000;
    padding: 8px 18px;
    text-align: center;
    box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.125);
    white-space: nowrap;
    display: block;
}



.flaoting_button a {
    background: #334a5a !important;
}
.container.border-top.mt-4.py-3.text-center {
    padding-bottom: 64px !important;
}
button.theme-bttn.compare-btn {
    background: dodgerblue;
    border-bottom: 5px solid #117ce4;
}
#compare_table table th {
    text-align: center;
}
#compare_table table th:first-child {
    text-align: left;
}
.remove-option-buttons{
    display: none;
}
.flaoting_button{
    display: none;
}
div#add_option_container {
    display: none !important;
}
#add_option_container_bottom {
    display: none;
}