.hidden{
    display: none;
}


.drawing-calculator .headerText h2{
    margin-bottom: 30px;
}

.drawing-calculator .headerText p{
    margin-bottom: 23px;
}

.drawing-calculator .select-title{
    margin-bottom: 9px;
    font-size: 16px;
    font-weight: 800;
}

.drawing-calculator .select-title.second{
    margin-top: 18px;
}

.drawing-calculator .steps {
    font-family: 'Roboto';
}

.drawing-calculator .steps p{
    margin-bottom: 23px;
}

.drawing-calculator .steps .step{

    display: flex;
}

.drawing-calculator .steps .step .substep{
    display:none;
}

.drawing-calculator .steps .step .substep.active{
    display:block;
}

.drawing-calculator .steps .step .stepLeft{
    width: 330px;
}

.drawing-calculator .steps .step .stepRight{
    width: calc(100% - 330px);
    padding-left: 40px;
}

.drawing-calculator .steps .step .stepRight .substep{
    max-width: 620px;
}

.drawing-calculator .steps .step .stepRight .substep.color_corrosion_right{
    max-width: 100%;
}


.drawing-calculator .steps .step .imgRight {
    max-width: 615px;
}

.drawing-calculator .steps .step select{

    background-image: url('/modules/bant_designguide_calculator/images/arrow-down.png');
    background-repeat: no-repeat;
    background-size: 30px;
    background-position: 97% center;
    padding-right: 30px;
    cursor: pointer;
    max-width: 273px;
}

.drawing-calculator .steps .step input{
    max-width: 273px;
}


.drawing-calculator .steps .step select,  .drawing-calculator .steps .step option{
    font-family: 'Roboto';
}

.drawing-calculator .steps .step .stepRight .titleRight{
    font-size: 24px;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 32px;
}

.drawing-calculator .steps .step .stepRight .textRight {
    margin-bottom: 31px;
    font-size: 16px;
}

.drawing-calculator .steps .step .stepRight .textRight p{
    line-height: 19px;
}

.drawing-calculator .steps select,
.drawing-calculator .steps input {
    margin-right: 20px;
    border: 1px solid gray;
    border-radius: 0;
}

.drawing-calculator .steps .step .thread_diameter_text{
    margin-top: 10px;
}


.drawing-calculator .steps .screw_length_placeholder input {
    position: relative;
}

.drawing-calculator .steps .screw_length_placeholder input::after {
    position: absolute;
    left: 5px;
    top: 3px;
    content: "mm";
    pointer-events: none;
    opacity: 0.6;
}


.drawing-calculator .steps .controlls {

    justify-content: space-between;
    color: #000000;
    font-weight: 600;
    font-size: 17px;
    width: 330px;
    max-width: 273px;
    margin-top: 25px;
}

.drawing-calculator .steps .controlls div:hover{
    color: #ffc300;
}

.drawing-calculator .errorMsg {

    margin-top: 15px;
    color: #ff0000;
}

.drawing-calculator .nextStep, .drawing-calculator .prevStep {
    cursor: pointer;
}

.drawing-calculator .head_recess_cont_modified{
    display: flex;
    width: 100%;
}

.drawing-calculator .head_recess_cont_modified.hidden{
    display: none;
}

.drawing-calculator .head_recess_cont_modified .head_recess_cont_left {
    width: 50%;
    margin-right: 22px;
}

.drawing-calculator .head_recess_cont_modified .head_recess_cont_right{
    width: 50%;
}

.drawing-calculator .head_recess_cont_modified .recess-block-container {

    border: 1px solid #C7C7C7;
    border-radius: 21px;
    text-align: center;
    padding-top: 17px;
    padding-bottom: 19px;
}

.drawing-calculator .head_recess_cont_modified .head_recess_img_left, .drawing-calculator .head_recess_cont_modified .head_recess_img_right {
    padding-left: 44px;
    padding-right: 44px;
}

.drawing-calculator .head_recess_cont_modified .head_recess_text{
    margin-bottom: 17px;
    font-weight: 800;
    font-size: 24px;
}

.drawing-calculator .head_recess_cont_modified .head_recess_desc{
    font-size: 16px;
    line-height: 19px;
    margin-top: 24px;
}

.drawing-calculator .color-corrosion-block-content {
    display: flex;
}

.drawing-calculator .color-corrosion-block-content .color_corrosion_img_left{
    width: 300px;
}

.drawing-calculator .color-corrosion-block-content table {

}

.drawing-calculator .color-corrosion-block-content table th {
    background-color: #ffc300;
    padding-right: 11px;
    border-right: 4px solid white;
    padding-left: 8px;
    padding-top: 4px;
    padding-bottom: 4px;
}

.drawing-calculator .color-corrosion-block-content table th.spacerth{
    height: 6px;
    background-color: #fff;
    border: none;
    padding: 0;
}


.drawing-calculator .color-corrosion-block-content table th table th{
    background-color: #ffc300;
    border-right: none;
    border-bottom: none;
    padding: 0;
    text-align: center;
}

.drawing-calculator .color-corrosion-block-content table th table th.cl {
    padding-right: 18px;
    text-align: left;
}

.drawing-calculator .color-corrosion-block-content table th table th.cr {
    text-align: right;
}

.drawing-calculator .color-corrosion-block-content table th table tbody{
    border-top: none;
    border-bottom: none;
}

.drawing-calculator .color-corrosion-block-content tbody {
    border-top: 2px solid black;
    border-bottom: 2px solid black;
}

.drawing-calculator .color-corrosion-block-content table tbody tr:nth-child(odd) {
    background-color: #E5E5E5;
}

.drawing-calculator .color-corrosion-block-content table td{

    text-align: center;
    padding: 5px;
    padding-top: 8px;
    padding-bottom: 8px;
}

.drawing-calculator .color-corrosion-block-content table .top-row td{
    border-top: 2px solid black;
    font-weight: 600;
}

.drawing-calculator .color-corrosion-block-content table .first {
    text-align: left;
}

.drawing-calculator .color-corrosion-block-content table .header-last {
    border-right: none;
}

.drawing-calc-form-containter {
    margin-top: 35px;
    margin-left: 10px;
    margin-right: 10px;
    width: 100%;
    background-color: #ffc300;
    padding: 19px 25px;
    text-align: center;
    font-weight: bold
}


.drawing-calc-form-containter .form-open-button {
    color: #ffffff;
    background-color: #000000;
    max-width: 230px;
    margin: 15px auto 0 auto;
    padding: 4px 0;
    border-radius: 15px;
}

.result-right img{

    width: 370px;
    margin: 0 auto;
}

.result-left .result-left-title{
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 25px;
}

.result-left{

    width: 375px;
}

.result-left p{
    color: #000000;
    font-size: 16px;
    text-align: justify;
    margin-bottom: 32px;
}

.result-left .ptop{
    color: #000000;
}

.result-left a{
    color: #000000;
}

.result-left a:hover{
    color:#ffc300;
}

.result-left .download-pdf-link {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 34px;
    margin-top: 35px;
    display: flex;
    align-items: center;
    cursor: pointer;
    font-family: 'Roboto';
}

.result-left .download-pdf-link:hover {

    color:#ffc300;
}

.result-left .download-pdf-link .download-icon {
    margin-right: 3px;
    font-family: 'celo-font';
    font-size: 27px;
    line-height: 18px;
}

.result .result-left .hole-calculator-link{
    color: #000000;
    font-weight: 800;
    cursor: pointer;
    margin-top: 32px;
    font-size: 16px;
}

.result .result-left .hole-calculator-link:hover{
    color: #ffc300;
}

.result .result-right{
    width: calc(100% - 375px);
    text-align: right;
}

.result #backToCalculator {
    margin-top: 25px;
    color: #000000;
    cursor: pointer;
    font-family: 'Roboto';
    background-color: #ffc300;
    display: inline-block;
    padding: 11px 14px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 800;
}

.result #backToCalculator:hover {
    color: #ffc300;
    background-color: #000000;
}

.result #hubspotPopupOpen {
    margin-top: 25px;
    color: #000000;
    cursor: pointer;
    font-family: 'Roboto';
    background-color: #ffc300;
    display: inline-block;
    padding: 11px 14px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 800;
}

.result #hubspotPopupOpen:hover {
    color: #ffc300;
    background-color: #000000;
}

.length-limit-disclaimer{
    font-size: 15px;
    margin-top: 21px;
    font-weight: 600;
    line-height: 19px;
}

.color_corrosion_text_left, .color_corrosion_text_left table{
    width: 100%;
}

.form-open-button {
    cursor: pointer;
}

.form-open-button:hover {
    color: #ffc300;
}

.hubspotPopup, .contactPopup {
    display: none;
}

.hubspotPopup.open, .contactPopup.open {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #00000050;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    z-index: 100000000;
}

.hubspotPopupData, .contactPopupData {
    background: #fff;
    width: auto;
    height: auto;
    padding: 0 0 45px;
    border-radius: 10px;
}

.contactPopupData {
    background: #fff;
    width: auto;
    height: auto;
    padding: 0 0 0;
    border-radius: 10px;
}

#hubspotForm, #contactHubspotForm {
    padding: 15px 45px;
    margin: 0;
}

#contactHubspotForm h2 strong > br {
    display: none !important;
}

#hubspotForm .hs-input, #contactHubspotForm .hs-input {
    width: 100%;
    margin-bottom: 15px;
}

#hubspotForm .legal-consent-container, #contactHubspotForm .legal-consent-container {
    margin-top: 15px;
    margin-bottom: 15px;
}

#hubspotForm label.hs-form-booleancheckbox-display, #contactHubspotForm label.hs-form-booleancheckbox-display {
    display: flex;
    flex-direction: row;
    align-items: center;
    cursor: pointer;
}

#contactHubspotForm label.hs-form-booleancheckbox-display {
    font-size: 12px;
}

#hubspotForm label.hs-form-booleancheckbox-display > input, #contactHubspotForm label.hs-form-booleancheckbox-display > input {
    width: auto;
    margin: 0;
}

#hubspotForm .hs-richtext, #contactHubspotForm .hs-richtext {
    margin-bottom: 15px;
}

#hubspotForm .actions, #contactHubspotForm .actions {
    text-align: center;
}

#hubspotForm input[type="submit"], #contactHubspotForm input[type="submit"] {
    margin-top: 25px;
    color: #000000;
    cursor: pointer;
    font-family: 'Roboto';
    background-color: #ffc300;
    display: inline-block;
    padding: 11px 14px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 800;
    min-width: 150px;
}

#hubspotForm input[type="submit"]:hover, #contactHubspotForm input[type="submit"]:hover {
    color: #ffc300;
    background-color: #000000;
}

#hubspotForm .inputs-list, #contactHubspotForm .inputs-list {
    list-style: none;
    padding: 0;
}

#hubspotForm .hs-error-msg, #contactHubspotForm .hs-error-msg {
    color: rgb(178 34 34 / 1);
    font-size: 12px;
}

#hubspotForm input[type="text"], #hubspotForm input[type="email"], #hubspotForm input[type="tel"], #contactHubspotForm input[type="text"], #contactHubspotForm input[type="email"], #contactHubspotForm input[type="tel"] {
    --tw-border-opacity: 1;
    --tw-bg-opacity: 1;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: rgb(255 255 255 / 1);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    height: 2.5rem;
    outline-width: 0;
    padding-left: .5rem;
    padding-right: .5rem;
    width: 100%;
    border-color: rgb(0 0 0 / 1);
    border-radius: 9px;
    border-width: 1px;
    font-family: Roboto, sans-serif;
}
#hubspotForm input[type="text"]:hover, #hubspotForm input[type="email"]:hover, #hubspotForm input[type="tel"]:hover,
#hubspotForm input[type="text"]:focus, #hubspotForm input[type="email"]:focus, #hubspotForm input[type="tel"]:focus,
#contactHubspotForm input[type="text"]:hover, #contactHubspotForm input[type="email"]:hover, #contactHubspotForm input[type="tel"]:hover,
#contactHubspotForm input[type="text"]:focus, #contactHubspotForm input[type="email"]:focus, #contactHubspotForm input[type="tel"]:focus {
    border-color: #ffc300
}

#hubspotForm input[type="text"]::placeholder, #hubspotForm input[type="email"]::placeholder, #hubspotForm input[type="tel"]::placeholder, #contactHubspotForm input[type="text"]::placeholder, #contactHubspotForm input[type="email"]::placeholder, #contactHubspotForm input[type="tel"]::placeholder {
    font-family: Roboto, sans-serif;
}

#hubspotForm select, #contactHubspotForm select {
    --tw-border-opacity: 1;
    --tw-bg-opacity: 1;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: rgb(255 255 255 / 1);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    height: 2.5rem;
    outline-width: 0;
    padding-left: .5rem;
    padding-right: .5rem;
    width: 100%;
    border-color: rgb(0 0 0 / 1);
    border-radius: 9px;
    border-width: 1px;
    font-family: Roboto, sans-serif;
    cursor: pointer;
}

#hubspotForm select::placeholder, #contactHubspotForm select::placeholder {
    font-family: Roboto, sans-serif;
}

#hubspotForm select option, #contactHubspotForm select option {
    color: #6c868e;
}

#hubspotForm select:hover, #hubspotForm select:focus, #contactHubspotForm select:hover, #contactHubspotForm select:focus {
    border-color: #ffc300;
}

#hubspotForm .legal-consent-container > div, #contactHubspotForm .legal-consent-container > div {
    color: rgb(112 112 112 / 1);
    font-size: 14px;
    line-height: 16px;
    font-weight: 500;
    font-family: Roboto,sans-serif;
}

#hubspotForm .legal-consent-container > div a, #contactHubspotForm .legal-consent-container > div a {
    font-size: 14px !important;
}

#hubspotForm .legal-consent-container .hs-form-booleancheckbox-display>span, #contactHubspotForm .legal-consent-container .hs-form-booleancheckbox-display>span {
    width: calc(100% - 30px) !important;
}

.tingle-modal.hubspot-popup {
    z-index: 100000000;
    height: 100vh;
    width: 100vw;
    background-color: rgba(0, 0, 0, .5);
}

.hubspotPopup .popupTitle, .contactPopup .popupTitle {
    background: #ffc300;
    position: relative;
    padding: 10px 45px;
    border-radius: 10px 10px 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hubspotPopup .popupTitle p, .contactPopup .popupTitle p {
    margin: 0;
    font-size: 16px;
    font-weight: bold;
    line-height: 20px;
    font-family: Archia, Ubuntu, sans-serif;
}

.hubspotPopup .popupTitle .popupClose, .contactPopup .popupTitle .popupClose {
    position: absolute;
    right: 10px;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.hubspotPopup .popupTitle .popupClose svg path, .contactPopup .popupTitle .popupClose svg path {
    fill: #000;
}

.hubspotPopup .popupTitle .popupClose:hover svg path, .contactPopup .popupTitle .popupClose:hover svg path {
    fill: #fff;
}

@media (max-width: 960px) {
    .drawing-calculator .steps .step .stepRight{
        display:none;
    }

    .drawing-calculator .steps .step .stepLeft {
        width: 420px;
        text-align: center;
    }

    .drawing-calculator .steps .step{
        justify-content: center;
    }

    .drawing-calculator .headerText{
        text-align: center;
    }

    .drawing-calculator .select-title{
        margin-bottom: 20px;
    }

    .drawing-calculator .controlls {
        margin-left: auto;
        margin-right: auto;
        margin-top: 31px;
    }

    .drawing-calculator .steps select, .drawing-calculator .steps input{
        margin-right: 0;
    }
}
@media screen and (max-width: 991px) {
    .result-left {
        width: 100% !important;
    }
    .result-right {
        display: none !important;
    }
    .result-right img {
        display: none !important;
    }
}