body {
    font-family: 'Lato', sans-serif;
    margin: 0;
}

@media screen and (max-width: 990px) {
    .action-button-container {
        margin-left: 0px !important;
    }
    .add-multiple-to-cart {
        margin-left: 210px !important;
    }
    .form-div .form-group label {
        display: block;
        margin-bottom: 7px !important;
        font-weight: bold;
    }
    .form-group .custom-dropdown #ProductType {
        width: 350px;
    }
    .form-group .custom-dropdown #MotorShaftSize {
        width: 196px;
    }
    .form-group .custom-dropdown #GearboxShaftSize {
        width: 196px;
    }
    .form-group .custom-dropdown #CouplingServiceFactor {
        width: 350px;
    }
    .form-group .custom-dropdown #InputGearboxRatio {
        width: 350px;
    }
    .form-group .custom-dropdown {
        position: relative;
        display: inline-block;
        max-width: 60%;
    }
    input.textoption.form-control, select.filteroption {
        width: 196px;
        padding: 0px 7px;
    }
    .form-group select.filteroption {
        width: 75px;
        padding: 0px 7px;
    }
    .form-group select.filteroption:not(.unitfilter) {
        width: 315px !important;
    }
    .search-result {
        margin-top: 20px;
    }

    .product-thumb {
        margin-bottom: 20px;
    }

    .resources-panel .prod-thumb {
        margin-bottom: 20px;
    }

    .filter-action {
        margin: 20px !important;
    }

    .filter-inner {
        display: none;
        position: absolute;
        top: 50px;
        width: calc(100% - 30px);
        background: #fff;
        z-index: 999;
    }

    .overlay {
        display: none;
        position: fixed;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        z-index: 99;
    }
}


.main-panel {
    width: 100%;
}

.form-div .form-group {
}

    .form-div .form-group label,
    .form-div .form-group div {
        vertical-align: top;
    }


    .form-div .form-group label {
        margin: 4px 0px 0px 0px;
        font-weight: bold;
        font-size: 15px;
    }
.unit-label-container .unit-label {
    margin-top: 8px;
    margin-left: 8px;
}
.custom-dropdown {
    position: relative;
    display: inline-block;
    max-width: 25%;
}

button, input {
    overflow: visible;
    width: 130px;
    border-radius: 10px;
    height: 39px;
    border: 1px solid #cccccc;
}
label {
    margin-left: -15px;
    margin-top: 5px;
    font-weight: bold;
    font-size: 15px;
}
select {
    -moz-appearance: none;
    display: block;
    height: 41px;
    padding: 10px 3px 10px 10px;
    font-size: 14px;
    color: #333;
    background-color: #ffffff;
    background-image: none;
    border: 1px solid #cccccc;
    -ms-word-break: normal;
    word-break: normal;
    border-radius: 8px;
}



.custom-dropdown:after {
    font: 17px "Consolas", monospace;
    color: #333;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    right: 25px;
    top: 8px;
    padding: 0 0 2px;
    position: absolute;
    pointer-events: none;
}
.custom-input:after {
    content: '';
    font: 17px "Consolas", monospace;
    color: #333;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    right: 25px;
    top: 8px;
    padding: 0 0 2px;
    position: absolute;
    pointer-events: none;
}
#InputGearboxRatio {
    width: 194px;
}
select.filteroption {
    width: 260px;
    padding: 0px 7px;
}
#ProductType {
    width: 194px;
}
.unit-label-container label {
    width: 60px;
    padding-left:10px;
}
.unit-label-container label, .unit-label-container select {
    width: 78px;
}

.hide {
    display:none;
}
.row .col-lg-12 {
    font-size: 88px;
    text-align: center;
}
.btn {
    border: 0;
    border-radius:0px;
    width: 49%,
    
}

.btn-default {
    color: #cc0033 !important;
    border-color: #cc0033 !important;
    border: 1px solid !important;
    border-radius: 0;
}

.btn-primary {
    background: #cc0033;
    border-radius: 0;
}

    .btn-primary:hover {
        background: #cc0033;
        border-radius: 0;
    }

.btn-default:hover {
    border-radius: 0;
    border: 0;
}

.panel-heading {
    margin: 20px 0px 10px 0px;
}

    .panel-heading .panel-title {
        color: #cc0033 !important;
        background: #f6f6f6;
        padding: 5px 1px;
        font-size: 24px;
        background-color: #f6f6f6;
    }

        .panel-heading .panel-title a {
            color: #cc0033 !important;
            display: block;
            position: relative;
            text-decoration: none;
        }

.action-row {
    padding: 70px 68px;
}

.accordion-button::after {
    content: " ";
    width: 20px;
    height: 20px;
    position: absolute;
    right: 0;
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' d='M8 0a1 1 0 0 1 1 1v6h6a1 1 0 1 1 0 2H9v6a1 1 0 1 1-2 0V9H1a1 1 0 0 1 0-2h6V1a1 1 0 0 1 1-1z' clip-rule='evenodd'/%3e%3c/svg%3e");
    transform: scale(.7) !important;
}

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' d='M0 8a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1z' clip-rule='evenodd'/%3e%3c/svg%3e");
}

/**2nd Screen**/
.filter-title {
    background: #f6f6f6;
    padding: 5px 10px;
    font-size: 17px;
    font-weight: bold;
    border-bottom: solid 2px #e1dfdf;
}

.filter-panel .accordion-button {
    background: #f6f6f6;
    padding: 5px 10px;
    font-size: 15px;
    font-family: arial;
    font-weight: bold;
    display: block;
    border-bottom: solid 1px #e1dfdf;
    position: relative;
    color: #333333;
}

    .filter-panel .accordion-button::after {
        right: 15px;
        height: 12px;
        width: 12px;
        top: 8px;
    }

.filter-data {
    border: solid 1px #e1dfdf;
    padding: 15px 20px;
}

.filter-action {
    margin-top: 20px;
}

.filter-data ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .filter-data ul li {
        display: block;
    }

        .filter-data ul li input {
            display: inline-block;
            vertical-align: top;
            height: 12px;
            width: 12px;
        }

        .filter-data ul li label {
            display: inline-block;
            vertical-align: top;
            margin: 5px 0 0 5px;
            line-height: 1px;
            font-size: 15px;
        }

.product-thumb {
    border: solid 1px #ccc;
    padding: 15px;
    padding-top: 0px;
}

    .product-thumb .img {
        overflow: hidden;
        max-height: 175px;
    }

        .product-thumb .img img {
            margin-left: auto;
            margin-right: auto;
            display: block;
        }

    .product-thumb .content {
        margin-top: 10px;
    }

        .product-thumb .content h6 {
            margin-bottom: 5px;
            font-size: 20px;
            color: #cc0033;
            font-weight: 700;
        }

        .product-thumb .content p {
            margin-bottom: 0px;
            font-size: 16px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3; /* number of lines to show */
            line-clamp: 3;
            -webkit-box-orient: vertical
        }

        .product-thumb .content .info {
            font-size: 12px;
            margin-bottom: 5px;
        }

            .product-thumb .content .info > div {
                font-size: 14px;
            }

                .product-thumb .content .info > div:first-child {
                    font-weight: bold;
                    font-size: 16px;
                }

    .product-thumb .compare-chk {
        margin-top: 4px;
        margin-bottom: -8px;
        cursor: pointer;
    }

        .product-thumb .compare-chk input {
            pointer-events: none;
            margin: -3px -49px;
            height: 18px;
        }

li .filter-item {
    pointer-events: none;
}

.panel-collapse li {
    cursor: pointer;
}

button:focus {
    border: none !important;
    outline: 0 !important;
    box-shadow: 0 0 0 0 !important;
}

.btn-primary {
    background: #cc0033 !important;
    border-color: #cc0033 !important;
    width: 100%;
    margin: 7px 0px;
}

.row.action-row .btn, .filter-action .btn {
    width: 125px;
    font-size: 17px;
    border: 1px solid;
    font-weight: bold;
}

.filter-action .btn {
    width: 120px;
    border-radius: 0;
}

.product-thumb .compare-chk input {
    display: inline-block;
    vertical-align: top;
    margin: 0px -49px;
    height: 18px;
}

.product-thumb .compare-chk label {
    display: inline-block;
    vertical-align: top;
    margin: 5px;
    padding: 0;
    line-height: 12px;
    font-size: 14px;
    margin-left: 5px;
    color: #cc0033;
    font-weight: bold;
    cursor: pointer;
}

.btn-w-border {
    border: solid 2px #cc0033;
    padding: 5px;
    width: 100%;
    background: none;
    font-size: 14px;
    color: #cc0033;
    display: block;
    margin-top: 10px;
    border-radius:0px;
}


.search-result {
    font-size: 12px !important;
    line-height: 14px;
    padding-bottom: 0px !important;
    font-weight: bold !important;
}

.main-title h1 {
    font-size: 24px;
    margin: 0 0 15px 0;
}

.company-info p {
    margin: 0;
    font-size: 12px;
    line-height: 14px;
}

.form-group label .circle {
    display: inline-block;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: #cc0033;
    text-align: center;
    line-height: 20px;
    padding: 0;
    color: #fff;
}

.resource-action {
    margin-top: 35px;
}

.product-description {
    height: 70px;
}

.product-thumb .img img, .prod-thumb .img img {
    width: 177px;
    height: 177px;
}

.product-img {
    overflow: hidden;
    text-align: center;
   
}
@media  (max-width: 1024px) {
    .product-img {
        max-width: 350px;
        text-align: center;
        margin: 0 auto;
    }
}

    .product-img img {
        position: relative;
        top: -176px;
        left: -67px;
    }

    .product-img img {
        max-width: 70%;
        max-height: 100%;
        transform: translateY(50%);
    }

.resources-panel h4 {
    font-size: 15px;
    margin: 20px 0px;
}

.resources-panel .prod-thumb .img {
    overflow: hidden;
    max-height: 175px;
    margin-bottom: 10px;
}

    .resources-panel .prod-thumb .img img {
        margin-left: auto;
        margin-right: auto;
        display: block;
    }

.resources-panel .prod-thumb h6 {
    font-size: 14px;
    font-weight: bold;
    margin: 0px 0px 5px 0px;
}

.resources-panel .prod-thumb p {
    font-size: 12px;
    line-height: 16px;
    margin: 0 0 10px 0;
    min-height: 48px;
}

.compare-option-base-info {
    max-height: 80px;
}

    .compare-option-base-info p {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3; /* number of lines to show */
        line-clamp: 3;
        -webkit-box-orient: vertical;
        min-height: 32px;
    }

.resources-panel .prod-thumb .more-info {
    color: #cc0033;
    text-decoration: none;
    font-size: 12px;
}

.back-action {
    color: #cc0033;
    font-size: 16px;
    font-weight: bold;
    padding: 0px 0px 15px 0px;
    cursor: pointer;
}

.prod-details {
    border: solid 1px #eee;
    font-size: 12px;
    width: 100%;
    border-right: none;
}

    

    .prod-details > .row > div:first-child {
        font-weight: 400;
        font-size: 14px;
    }

    .prod-details > .row > div:first-child, .compare-main-panel > .row > div:first-child {
        min-width: 271px;
    }

    .prod-details > .row > div {
        padding: 8px 15px 8px 30px;
        font-size: 13px;
        border-right: solid 1px #eee;
        min-width: 228px;
    }

.resources-panel.compare-panel .prod-thumb h6 {
    font-size: 18px;
    font-weight: 400;
    color: #000000;
    margin: 0px 0px 5px 0px;
}

.resources-panel.compare-panel .prod-thumb {
    padding: 10px;
}

.prod-details .property-group-row .col-md-3 {
    background-color: grey !important;
    font-weight: bold !important;
    color: white !important;
    border: none !important;
}

.compare-main-panel {
    overflow-x: auto;
}

.compare-thumb-list, .prod-details > .row {
    flex-wrap: nowrap;
    margin: 0;
}

    .prod-details > .row.bg-yellow > .col-md-3 {
        background-color: yellow !important;
    }

.compare-thumb-list .productresult {
    border: solid 1px #eee;
    border-right: none;
}

    .compare-thumb-list .productresult:last-child {
        border: solid 1px #eee;
        border-right: solid 1px #eee;
    }

.wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    text-align: center;
    transform: translateX(-50%);
}

.spanner {
    position: absolute;
    top: 50%;
    left: 0;
    background: #2a2a2a55;
    width: 100%;
    display: block;
    text-align: center;
    height: 300px;
    color: #FFF;
    transform: translateY(-50%);
    z-index: 1000;
    visibility: hidden;
}

.overlay-full-screen {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    visibility: hidden;
    z-index: 10;
}

.loader,
.loader:before,
.loader:after {
    border-radius: 50%;
    width: 2.5em;
    height: 2.5em;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation: load7 1.8s infinite ease-in-out;
    animation: load7 1.8s infinite ease-in-out;
}

.loader {
    color: #ffffff;
    font-size: 10px;
    margin: 80px auto;
    position: relative;
    text-indent: -9999em;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}

    .loader:before,
    .loader:after {
        content: '';
        position: absolute;
        top: 0;
    }

    .loader:before {
        left: -3.5em;
        -webkit-animation-delay: -0.32s;
        animation-delay: -0.32s;
    }

    .loader:after {
        left: 3.5em;
    }

@-webkit-keyframes load7 {
    0%, 80%, 100% {
        box-shadow: 0 2.5em 0 -1.3em;
    }

    40% {
        box-shadow: 0 2.5em 0 0;
    }
}

@keyframes load7 {
    0%, 80%, 100% {
        box-shadow: 0 2.5em 0 -1.3em;
    }

    40% {
        box-shadow: 0 2.5em 0 0;
    }
}

.show {
    visibility: visible;
}

.spanner, .overlay {
    opacity: 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

    .spanner.show, .overlay.show {
        opacity: 1
    }

@media only screen and (max-width: 600px) {
    .unit-label-container {
        width: 40%
    }

    .select-option-with-unit {
        width: 60%
    }

    .form-div .form-group label, .form-div .form-group div {
        margin-right: -10px !important;
    }
    #ProductType, #CouplingServiceFactor, #InputGearboxRatio {
        width: 315px !important;
    }
    .titleforValue {
        height: 15px !important;
        cursor: pointer;
        margin-left: 30px !important;
        margin-top: 0px !important;
    }
}
#ProductType {
    width: 259px;
}



#GearboxNominalRatio {
    width: 104px !important;
}

#ServiceFactorCSF {
    width: 104px !important;
}

#MotorShaftSize {
    width: 104px ;
}

#GearboxShaftSize {
    width: 104px ;
}

#CouplingServiceFactor {
    width: 104px;
}

@media only screen and (min-width: 600px) {
    .form-div .form-group label, .form-div .form-group div {
        margin-right: -20px !important;
    }
}

.calculated-values {
    margin-left: 13px !important;
}

.titleforValue {
    height: 15px;
    cursor: pointer;
    margin-left: 119px;
    margin-top: -39px;
}
.CtRexnordSapMaterialNumber1{
    display:none;
}
.panel-collapse .col-lg-9 .row #dark {
    font-weight: bold;
    color: green;
}
.panel-collapse .col-lg-9 .row #hid {
    visibility: hidden;
}
.product-thumb .row .margi {
    margin-top: -7px;
}
.ui-dialog .ui-dialog-buttonpane button {
    margin: 0.5em 4.1em 0.5em 0;
    cursor: pointer;
    text-transform: UPPERCASE;
    color: white;
    background: #cc0033;
    font-weight:bold;
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
    text-align: center !important;
}

.Qty {
    text-align: center;
}

.IDNumber {
    text-align: center;
}

.label-id {
    text-align: center;
}

.label-quantity-required {
    text-align: center;
}