.calculator-wrapper {
    background-color: rgba(14,43,95, .5);
    border: 1px solid #0e2b5f;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
}
.calculator-wrapper .extra {
    color: #FFF;
    font-size: 12px;
    text-align: center;
}
.calculator-wrapper .header {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.calculator-wrapper .header h3 {
    color:  #FFF;
    font-size: 24px;
}
.calculator-wrapper .header p {
    color: #FFF;
    font-size: 18px;
}

.calculator-wrapper select {
    background-color: #FFF;
    border: none;
    color: #0e2b5f;
    font-size: 16px;
    padding: 10px 20px;
    width: 100%;
}

.calculator-wrapper form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
@media all and (min-width: 768px) {
    .calculator-wrapper form {
	flex-direction: row;
	flex-wrap: wrap;
    }
}

.calculator-wrapper form .field-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}
@media all and (min-width: 768px) {
    .calculator-wrapper form .field-wrapper {
	width: calc(33% - 8px);
    }
    .calculator-wrapper form .field-wrapper.full {
	width: 100%;
    }
}

.calculator-wrapper form .field-wrapper label {
    color: #FFF;
    font-size: 18px;
    font-weight: bold;
    width: 100%;
}
.calculator-wrapper form .field-wrapper .input-wrapper {
    background-color: #FFF;
    border-radius: 10px;
    display: flex;
    flex-direction: row;
    gap: 8px;
    padding: 12px;
}
.calculator-wrapper form .field-wrapper .input-wrapper input {
    background-color: transparent;
    border: none;
    color: #0e2b5f;
    padding: 8px;
    width: 70%;
}
.calculator-wrapper form .field-wrapper .input-wrapper select {
    background-color: #FFF;
    border: none;
    color: #0e2b5f;
    font-size: 16px;
    padding: 10px 20px;
    width: 100%;
}
.calculator-wrapper form .field-wrapper .input-wrapper span {
    color: #0e2b5f;
    font-size: 12px;
    font-weight: 600;
    width: calc(100% - 80% - 8px);
}
.calculator-wrapper form .buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

@media all and (min-width: 768px) {
    .calculator-wrapper form .buttons {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
        width: 100%;
    }
}
.calculator-wrapper form .buttons button {
    border-radius: 10px;
    border: none;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 20px;
    text-align: center;
}
.calculator-wrapper form .buttons button:first-child {
    background-color: #0e2b5f;
    color: #FFF;
}
.calculator-wrapper form .buttons button:last-child {
    background-color: #FFF;
    color: #0e2b5fi;
}

.calculator-wrapper .form-return {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.calculator-wrapper .form-return p {
    color: #FFF;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
}

.calculator-wrapper .form-return .total-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.calculator-wrapper .form-return .total-wrapper .total,
.calculator-wrapper .form-return .total-wrapper .tubs-total,
.calculator-wrapper .form-return .total-wrapper .slabs-total,
.calculator-wrapper .form-return .total-wrapper .total-bricks,
.calculator-wrapper .form-return .total-wrapper .total-mortar {
    align-items: center;
    color: #FFF;
    display: flex;
    flex-direction: row;
    gap: 6px;
    justify-content: center;
}
.calculator-wrapper .form-return .total-wrapper .total .input,
.calculator-wrapper .form-return .total-wrapper .tubs-total .input,
.calculator-wrapper .form-return .total-wrapper .slabs-total .input,
.calculator-wrapper .form-return .total-wrapper .total-bricks .input,
.calculator-wrapper .form-return .total-wrapper .total-mortar .input {
    font-size: 32px;
    font-weight: 600;
}
.calculator-wrapper .form-return .total-wrapper .counts {
    display: flex;
    flex-direction: row;
    gap: 8px;
    justify-content: center;
}
.calculator-wrapper .form-return .total-wrapper .counts .count {
    align-items: center;
    color: #FFF;
    display: flex; 
    flex-direction: row;
    font-size: 18px;
    gap: 6px;
    width: calc(50%-4px);
}
.calculator-wrapper .form-return .total-wrapper .counts .count .input {
    color: #FFF;
    font-size: 24px;   
}

.calculator-wrapper .error {
    border: 1px solid red;
    color: #FFF;
    font-size: 18px;
    font-weight: 600;
    padding: 10px 20px;
    text-align: center;
}

.product_cat-jointing-compound-primer .calculator-wrapper select {
    display: none;
}