.vuvee-mp-container ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.vuvee-mp-container.location {
    background: url(https://www.mojprozor.rs/wp-content/uploads/2023/10/energetska-efikasnost.jpg);
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    height: 100vh;
}

.vuvee-mp-container.location::before {
    content: '';
    background: #3d3737b8;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 0;
}

.vuvee-mp-container.location:after {
    content: '';
    position: absolute;
    backdrop-filter: brightness(70%) contrast(142%) saturate(0%) blur(0px) hue-rotate(194deg);
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
}

.vuvee-mp-container.location .mp-container-inner {
    z-index: 9;
}

.vuvee-mp-container {
    min-height: 100vh;
    width: 100%;
    position: relative;
}

.vuvee-mp-container::before {
    content: '';
    background: #F7F7F7;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 0;
}

.mp-container-inner {
    position: relative;
    width: 100%;
    max-width: 1440px;
    margin: auto;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

/* tabs start */

.mp-tabs-container {
    width: 100%;
}

.mp-tabs-container ul {
    display: flex;
    align-items: center;
    gap: 2px;
    padding-top: 2px
}

.mp-tabs-container ul li {
    flex: 1;
    height: 70px;
    background: #EFEFEF;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    padding: 0 30px;
    opacity: .4;
}

.mp-tabs-container ul li img {
    height: 40px;
    width: 40px;
}

.mp-tabs-container ul li a {
    max-width: 50%;
    text-transform: uppercase;
    color: #939393;
}

.mp-tabs-container ul li.active {
    position: relative;
    background: #f1b51c;
    opacity: 1;
}

.mp-tabs-container ul li.active a {
    color: white;
}

.mp-tabs-container ul li.active img {
    filter: brightness(0) invert(1);
}

/* tabs end */

/* center start */

.location .mp-center-container {
    gap: 15%;
    align-items: center;
}

.mp-center-container {
    margin-top: 15px;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
}

.mp-center-container>div {
    flex-basis: 50%;
}

.mp-empty-container {
    height: 20%;
}

.mp-center-form {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: white;
    padding: 50px;
    gap: 50px;
}

.mp-center-form h4 {
    margin: 0;
    color: #343434;
    font-size: 22px;
    font-weight: bold;
    text-transform: uppercase;
}

.mp-center-text h4 {
    color: white;
    font-weight: bold;
    font-size: 24px;
}

.mp-center-text p {
    color: white;
    font-size: 18px;
}

.mp-center-form form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.mp-center-form form label {
    font: normal normal normal 16px/26px Montserrat;
    color: #939393;
}

.mp-center-form form select {
    height: 50px;
    border: 1px solid lightgray;
    color: black;
    padding: 0 20px;
    font: normal normal normal 16px/26px Montserrat;
}

.mp-center-form form select {
    outline: none !important;
}

.mp-center-form form input[type="submit"] {
    width: 100%;
    height: 50px;
    background: #f1b51c;
    border: none;
    text-align: left;
    text-transform: uppercase;
    color: white;
    font: normal normal bold 14px/28px Montserrat;
    padding: 0 20px;
}

.mp-bigger-column {
    flex-basis: 70% !important;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.mp-smaller-column {
    flex-basis: 30% !important;

    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* center end */

/* vrsta grejanja start */

.mp-heating-type,
.mp-heating-area,
.mp-window-area,
.mp-window-type,
.mp-profile-type,
.mp-material-type,
.mp-glass-type,
.mp-total-savings,
.mp-window-info,
.mp-project-info,
.mp-fuel-price {
    background: white;
    padding: 35px;
    position: relative;
    padding-top: 70px;
}

.mp-left-column {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.mp-heating-type::before,
.mp-window-area::before,
.mp-heating-area::before,
.mp-window-type::before,
.mp-profile-type::before,
.mp-material-type::before,
.mp-glass-type::before,
.mp-total-savings::before,
.mp-window-info::before,
.mp-project-info::before,
.mp-fuel-price::before {
    position: absolute;
    top: 0;
    left: 0;
    font: normal normal bold 18px/26px Montserrat;
    letter-spacing: 0px;
    color: #343434;
    background: #EFEFEF 0% 0% no-repeat padding-box;
    height: 60px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
}

.mp-heating-type::before {
    content: 'Vrsta grejanja';
}

.mp-heating-area::before {
    content: 'grejna povrŠina'
}

.mp-window-area::before {
    content: 'površina prozora';
}

.mp-window-type::before {
    content: 'tip prozora'
}

.mp-profile-type::before {
    content: 'PROFILI PROZORA'
}

.mp-material-type::before {
    content: 'Materijal profila'
}

.mp-glass-type::before {
    content: 'Tip stakla'
}

.mp-total-savings::before {
    content: 'Ukupna uŠteda';
}

.mp-window-info::before {
    content: 'INFORMACIJE O PROFILU PROZORA';
}

.mp-project-info::before {
    content: 'informacije o projektu'
}

.mp-fuel-price::before {
    content: 'Cena goriva';
}

.mp-heating-type p,
.mp-window-area p,
.mp-heating-area p,
.mp-window-type p,
.mp-profile-type p,
.mp-material-type p,
.mp-glass-type p,
.mp-window-info p,
.mp-project-info p,
.mp-fuel-price p {
    font: normal normal normal 16px/26px Montserrat;
    letter-spacing: 0px;
    color: #939393;
}

.button-container {
    display: flex;
    align-items: center;
    gap: 15px;
}

.button-container label {
    flex: 1 22%;
    border: 1px solid lightgray;
    padding: 20px;
}

.button-container label div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.mp-profile-type .button-container label {
    max-width: 24%;
}

.button-container label div img {
    height: 60px;
}

.button-container label div h5 {
    margin: 0
}

.button-container label div span {
    font: normal normal bold 14px/36px Montserrat;
}

.mp-full-width-column {
    width: 100%;
    margin-top: 15px;
}

.mp-profile-type .button-container {
    flex-wrap: wrap;
}

.mp-profile-type .button-container label div img {
    height: 250px;
}

/* vrsta end */

/* tip prozora */

.window-type-button-container label {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 15px;
    border: 1px solid lightgray;
    padding: 30px;
}

.window-type-button-container label div {
    display: flex;
    align-items: center;
    gap: 20px;
}

.window-type-button-container label div span {
    font: normal normal bold 14px/36px Montserrat;
}

.mp-material-type label div img {
    visibility: hidden;
}

/* tip prozora end */

/* custom range slider */

.range-container {
    background: #EFEFEF;
    height: 60px;
    display: flex;
    align-items: center;
    padding: 2px 2px;
}

.range-container button {
    height: 56px;
    width: 58px;
    border: none;
    background: white;
    border-radius: 0;
}

input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    height: 5px;
    background: rgba(255, 255, 255, 0.6);
    background-image: linear-gradient(90deg, #939393 0%, #939393 100%);
    background-size: 50%;
    background-repeat: no-repeat;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 12px;
    width: 3px;
    background: rgb(242, 242, 242);
    background: #f1b51c;
    cursor: pointer;
    transition: background .3s ease-in-out;
}

input[type="range"]::-moz-range-thumb {
    -webkit-appearance: none;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: #F39200;
    cursor: ew-resize;
    transition: background .3s ease-in-out;
}

input[type="range"]::-ms-thumb {
    -webkit-appearance: none;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: #F39200;
    cursor: ew-resize;
    transition: background .3s ease-in-out;
}


input[type=range]::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    box-shadow: none;
    border: none;
    background: transparent;
}

/* custom slider end*/


.mp-save-results {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 20px;
    background: #EFEFEF;
}

.mp-save-results h5 {
    margin: 0;
    font: normal normal bold 18px/26px Montserrat;
    letter-spacing: -0.45px;
    color: #343434;
    text-transform: uppercase;
}

.mp-save-results button {
    height: 50px;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 20px;
    border: 0;
    background: #FFFFFF;
    padding: 0 20px;
}

.mp-save-results button span {
    font: normal normal normal 14px/24px Montserrat;
}

.mp-distributors {
    background: white;
    padding: 20px;
}

.mp-distributors h5 {
    margin: 0;
    font: normal normal bold 18px/26px Montserrat;
    letter-spacing: -0.45px;
    color: #343434;
    text-transform: uppercase;
}

.mp-distributors p {
    font: normal normal normal 16px/26px Montserrat;
}

.mp-distributors a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #272626 !important;
    font: normal normal bold 14px/28px Montserrat;
    letter-spacing: 0px;
    background: #f1b51c;
    padding: 0 20px;
    height: 50px;
    text-transform: uppercase;
    transition: all .2s linear;
}

.mp-distributors a:hover {
    color: white !important;
    background: #272626;
}

.mp-save-results button {
    border-radius: 0;

}

.mp-save-results button span {
    font-weight: bold !important;
}

.mp-save-results button:hover {
    color: #272626 !important;
}

.mp-save-results button:hover img {
    filter: brightness(0)
}

.mp-distributors a:hover img {
    filter: brightness(0) invert(1);
}

/* tables */

.mp-total-savings table {
    width: 100%;
}

.mp-total-savings table tr td {
    width: 33.33%;
}

.mp-total-savings table {
    border-collapse: collapse;
}

.mp-total-savings table tr td:first-child {
    text-align: center;
}

.mp-total-savings table tr th {
    text-align: left;
    font: normal normal bold 14px/36px Montserrat;
}

.mp-total-savings table tbody tr {
    background: #EFEFEF;
    height: 50px;
    border-bottom: 2px solid white;
}

.mp-total-savings table thead tr {
    border-bottom: 2px solid #f1b51c;
}

.mp-total-savings p {
    font: normal normal normal 16px/26px Montserrat;
    letter-spacing: -0.4px;
    color: #939393;
}

.mp-window-info {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.mp-window-info>div {
    flex: 1 50%;
}

.mp-window-info-column-right table {
    width: 100%;
}

.mp-window-info-column-right table {
    border-collapse: collapse;
}

.mp-window-info-column-right table tr {
    height: 50px;
    font: normal normal normal 16px/56px Montserrat;
    letter-spacing: 0px;
    color: #343434;
    border-bottom: 1px solid lightgray
}

.mp-window-info-column-right table tr:last-child {
    border-bottom: none;
}

.mp-window-info-column-left img {
    width: 100%;
    padding-top: 35px;
}

.mp-project-info table {
    width: 100%;
    border-collapse: collapse;
}

.mp-project-info table td {
    font: normal normal normal 16px/56px Montserrat;
    letter-spacing: 0px;
    color: #343434;
}

.mp-project-info table tr {
    border-bottom: 1px solid lightgray;
}

/* tooltips */

div#heating_tooltip {
    position: absolute;
    top: -45px;
    background: url(../assets/tooltip.svg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 85px;
    height: 54px;
    display: flex;
    padding-top: 8px;
    justify-content: center;
    color: white;
    left: calc(50% - 42.5px);
}


div#window_tooltip {
    position: absolute;
    top: -45px;
    background: url(../assets/tooltip.svg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 85px;
    height: 54px;
    display: flex;
    padding-top: 8px;
    justify-content: center;
    color: white;
    left: calc(50% - 42.5px);
}

.range-container {
    position: relative;
    margin-top: 50px;
}

.range-inner-container {
    flex-basis: 90%;
    position: relative;
}

.range-container button {
    flex-basis: 10%;
}

.range-inner-container {
    height: 100%;
    display: flex;
    align-items: center;
}

/* navigation bar */

.mp-navigation-container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 150px;
}

.mp-navigation-container a {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #939393;
    font: normal normal bold 14px/28px Montserrat;
    color: white;
    width: 230px;
    height: 60px;
    gap: 20px;
}

.mp-navigation-container a:before {
    content: '';
    height: 20px;
    width: 20px;
    background: url(../assets/arrowleft.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    filter: brightness(0) invert(1);
}

.mp-navigation-container form button {
    width: 230px;
    height: 60px;
    border: none;
    background: #f1b51c 0% 0% no-repeat padding-box;
    font: normal normal bold 14px/28px Montserrat;
    letter-spacing: 0px;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.mp-navigation-container form button:after {
    content: '';
    height: 20px;
    width: 20px;
    background: url(../assets/arrowright.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    filter: brightness(0) invert(1);
}

.fuel-container {
    height: 60px;
    display: flex;
    background: #efefef;
    align-items: stretch;
    justify-content: space-between;
    margin-top: 50px;
}

.fuel-container select {
    width: 30%;
    border: 1px solid #efefef;
    border-right: none;
    background: #efefef;
    padding: 0 10px;
    font-size: 18px;
    color: #343434;
}

.fuel-container input {
    width: 57%;
    border: 1px solid #efefef;
    border-left: none;
    font-size: 24px;
    text-align: right;
    padding-right: 20px;
}

.fuel-container:after {
    content: 'RSD / kWh';
    background: #f1b51c;
    height: 100%;
    width: 30%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    letter-spacing: 2px;
    color: white;
}

.mp-heating-type p.notice {
    font-size: 12px;
    line-height: 22px;
    margin-top: 20px;
    letter-spacing: 0.5px;
}

.fuel-container.pelet:after {
    content: 'RSD / Kg';
}

.fuel-container.loz:after {
    content: 'RSD / Kg';
}


.fuel-container.struja:after {
    content: 'RSD / kWh';
}


.fuel-container.gas:after {
    content: 'RSD / m3';
}



select#fuel-type,
input#fuel-price {
    outline: none;
    border: 1px solid lightgray;
    border-right: none;
    border-radius: 0;
    font-size: 18px;
}

.button-container label .profile-icons {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
    flex-wrap: wrap;
}

.button-container label .profile-icons>div {
    display: flex;
    align-items: flex-start;
    flex-direction: row;
    justify-content: space-between;
    padding-top: 20px;
    width: 100%;
}

/*.icon.gfaktor:after,
.icon.stakloug:after,
.icon.prozoruw:after {
    content: 'i';
    background: #f1b51c;
    height: 25px;
    width: 25px;
    color: white;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    font-size: 14px;
    position: absolute;
    top: 0;
    left: 0;
}

.icon.gfaktor,
.icon.stakloug,
.icon.prozoruw {
    position: relative;
}*/

.button-container label .profile-icons>div:last-child {
    border-top: 1px solid rgb(161, 161, 161);
}

.profile-icons .icon {
    flex-basis: 28.3%;
    text-align: center;
}

.profile-icons .icon p {
    font-size: 12px;
    line-height: 16px;
}

.profile-icons .icon h5 {
    font-size: 14px;
    line-height: 16px;
}


.mp-profile-type .button-container label div.profile-icons .icon img {
    width: 100%;
    max-width: 35px;
    height: 35px;
}

.mp-profile-type.dvoslojno label[for="lumax"],
.mp-profile-type.dvoslojno label[for="futura"],
.mp-profile-type.dvoslojno label[for="strong"] {
    display: none;
}

.mp-profile-type.active {
    display: block;
}

.mp-profile-type {
    display: none;
}

.mp-tabs-container ul li a {
    pointer-events: none;
}

.mp-tabs-container ul li.inactive {
    background: #1a1a1a;
}


@media screen and (max-width: 800px) {
    .location .mp-center-container {
        flex-direction: column;
        padding: 20px;
        gap: 20px;
    }

    .vuvee-mp-container.location {
        min-height: 100vh;
        height: unset;
    }

    .mp-center-form {
        padding: 20px;
    }


    .mp-tabs-container ul li {
        flex: unset;
        height: 80px;
    }

    .mp-tabs-container ul li a {
        width: 80%;
        max-width: 100%;
        display: none;
    }

    .mp-heating-type .button-container {
        flex-direction: column;
    }

    .mp-center-container {
        flex-direction: column;
    }

    .mp-heating-type .button-container label {
        width: 100%;
    }

    .mp-heating-area,
    .mp-window-area,
    .mp-fuel-price {
        padding: 20px;
        padding-top: 90px;
    }

    .fuel-container:after {
        width: 25%;
    }

    input#fuel-price {
        width: 40%;
    }

    select#fuel-type {
        width: 35%;
    }

    .window-type-button-container label>div {
        flex-direction: column;
        width: 100%;
    }

    .window-type-button-container label {
        position: relative;
        text-align: center;
        align-items: center;
        width: 100%;
    }

    .window-type-button-container label>input {
        position: absolute;
        top: 30px;
        left: 30px;
    }

    .mp-glass-type .button-container,
    .mp-material-type .button-container,
    .mp-profile-type .button-container {
        flex-direction: column;
    }

    .mp-glass-type .button-container label,
    .mp-material-type .button-container label,
    .mp-profile-type .button-container label {
        width: 100%;
        max-width: 100%;
    }
}

.vuvee-mp-container table * {
    border: none !important;
}

.vuvee-mp-container table tr {
    border-bottom: 1px solid lightgray !important;
}

.mp-total-savings table thead {
    border-bottom: 3px solid #f1b51c !important;
}

.mp-total-savings table td {
    vertical-align: middle;
}

.mp-total-savings table tbody tr {
    border-bottom: 3px solid white !important;
}

.mp-tabs-container ul li.inactive {
    background: #f1b51c;
    opacity: .4;
    position: relative;
}

.mp-tabs-container ul li.inactive:after,
.mp-tabs-container ul li.active:after {
    content: '';
    height: 8px;
    background: #f1b51c;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: -10px;
}

.mp-tabs-container ul li.inactive a {
    color: white;
}

.mp-tabs-container ul li.inactive img {
    filter: brightness(0) invert(1)
}

.mp-tabs-container {
    margin-bottom: 10px;
}

img.ivapix-flip {
    height: 70px !important;
    transform: scaleX(-1);
}

.mp-center-form form input[type="submit"] {
    border-radius: 0;
    color: #272626;
}

.mp-center-form form input[type="submit"]:hover {
    background: #272626;
}

.mp-navigation-container a:first-child {
    color: white;
    background: #272626;
    transition: all .2s linear;
}

.mp-navigation-container a:first-child:hover {
    background: #f1b51c;
    color: #272626;
}

.mp-navigation-container a:first-child:hover:before {
    filter: brightness(1)
}

.mp-navigation-container button {
    border-radius: 0 !important;
    color: #272626 !important;
}

.mp-navigation-container button:after {
    filter: brightness(0) !important;
}

.mp-navigation-container button:hover {
    color: white !important;
    background: #272626 !important;
}

body .mp-navigation-container button:hover:after {
    filter: invert(1) !important;
}

.mp-profile-type .button-container {
    align-items: stretch;
}

.mp-save-results button {
    border-radius: 0;
}