/* main configure -- begin */

body {
    padding-top: 20px;
}

.container {
    margin-bottom: 10px;
}

/* main configure -- end */

/* Global -- begin */

.disabled {
    cursor: not-allowed;
    opacity: 0.5;
    background: #FFF;
}

.modal-title {
    color: #fff;
}

.nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover {
    border: 0;
}

.nav-tabs.custom-tabs {
    border-bottom: 1px solid #72AC45;
}

.nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover {
    border-bottom: 3px #72AC45 solid;
    color: #000;
}

.nav,
.nav * {
    color: #000;
}

.nav:hover,
.nav *:hover,
.nav *:active,
.nav *:focus {
    color: #000;
}

.nav>li>a:focus,
.nav>li>a:hover {
    text-decoration: none;
    background-color: #fff;
    border-color: #FFF;
}

.navbar-right {
    margin-right: 0;
}

.btn-brown {
    color: #fff;
    background-color: #ff3900;
    border-color: #ff3900;
    outline: none;
}

.btn-brown:hover,
.btn-brown:focus,
.btn-brown:active {
    color: #fff;
    background-color: #ea2c00;
    border-color: #ea2c00;
    outline: none;
}

.radio.custom {
    margin-top: 5px;
    margin-bottom: 0px;
}

#tab-rail #configure-RailHeight :nth-child(2) {
    margin-top: 25px;
}

#configure-clampingMethod>div:not(:first-child),
#configure-clampingWidth>div:not(:first-child),
#configure-clampingHeight>div:not(:first-child),
#configure-clampingSurface>div:not(:first-child) {
    margin-top: 3px;
}

#configure-clampingMethod>div span,
#configure-clampingSurface>div span {
    margin-top: 23px;
}

#configure-clampingWidth>div span,
#configure-clampingHeight>div span {
    margin-top: 25px;
}

#configure-clampingMethod>div input,
#configure-clampingSurface>div input {
    margin-top: 25px;
}

#configure-clampingWidth>div input,
#configure-clampingHeight>div input {
    margin-top: 27px;
}

/* #configure-clampingMethod:first-child {
    margin-top: 5px;
} */

.isLengthTwoColumn {
    width: 50%;
    float: left;
}

.height-img-item {
    width: 150px;
}

/* Global -- end */

header {
    background: #72AC45;
    height: 60px;
    line-height: 60px;
    font-size: 30px;
    color: #fff;
    text-align: center;
    margin-bottom: 5px;
    position: relative;
}

header .title {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
}

header .language {
    position: absolute;
    right: 15px;
    width: 150px;
    top: 12px;
}

.canvas-container {
    width: 100%;
    padding-top: 50%;
    position: relative;
}

/* procebox -- begin */

.canvas-container .pricebox {
    
    position: absolute;
    top: 0px;
    left: 0px;
    color: #000000;
    font-size: 30px;
    padding: 40px;
    text-align: center;
    border-radius: 3px;
    /* background: rgba(30,30,30,0.1); */
}

.canvas-container .pricebox .summary__price__label {
    display: block;
}

.canvas-container .pricebox #price_value {
    /* font-size: 30px; */
}

.canvas-container #renderCanvas:focus {
    outline: none;
    border: none;
}

.canvas-container .View3D {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

/* dialog -- begin */

#new-product-dialog .modal-dialog {
    margin-top: 184px;
}

#new-product-dialog .modal-dialog .modal-header {
    background: #72AC45;
}

#new-product-dialog .modal-body .row {
    margin-bottom: 4px;
}

/* dialog -- end */

#tab-rail {
    margin-top: 20px;
}

#tab-rail .rail-content {
    margin: auto;
    max-width: 800px;
}

#tab-rail .rail-content b {
    display: inline-block;
    width: 100%;
    text-align: right;
}

@media screen and (max-width: 767px) {
    #tab-rail .rail-content b {
        text-align: left;
    }
}

#tab-rail #configure-RailHeight {
    margin-top: 10px;
}

#tab-rail #configure-RailHeight input {
    margin-top: 44px;
}
@media screen and (max-width: 767px) {
    #tab-rail #configure-RailHeight input {
        margin-top: 10%;
    }
}
@media screen and (max-width: 450px) {
    .col-vxs-12{
        width: 100%;
    }
    .hidden-vxs{
        display: none!important;
    }
    .show-vxs{
        display: block!important;
    }
}
@media screen and (max-width: 300px) {
    .isLengthTwoColumn{
        width: 100%;
    }
}


#tab-rail #configure-RailHeight span {
    display: inline-block;
    width: 0;
    font-size: 0;
}

#tab-rail #configure-RailHeight img {
    width: 100%;
    margin-left: 25px;
    border-radius: 4px;
}
@media screen and (max-width: 767px) {
    #tab-rail #configure-RailHeight img {
        width: 60%;
    }
}
#configure-RailLength {
    border-radius: 4px;
    margin-top: 10px;
    border: 1px #72AC45 solid;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
}

#configure-RailLength .radio {
    text-align: center !important;
}

#tab-clampingModule {
    padding-top: 20px;
}

#tab-clampingModule form {
    padding-top: 5px;
}

#tab-clampingModule span {
    display: inline-block;
    width: 94px;
}

#tab-clampingModule #configure-clampingSurface span {
    width: 100px;
}

#tab-steelParallels img {
    width: 80px;
    /* height: 55px; */
    vertical-align: top;
    /* border: 1px lightgray solid; */
    border-radius: 4px;
}

#tab-clampingModule img {
    width: calc(100% - 102px);
    max-width: 105px;
    /* height: 55px; */
    vertical-align: top;
    /* border: 1px lightgray solid; */
    border-radius: 4px;
}
#configure-clampingSurface img {
    width: calc(100% - 122px);
}

#tab-clampingModule #configure-clampingHeight img {
    width: 100px;
}

#tab-clampingModule #configure-clampingSurface img {
    margin-left: 20px;
}

.width-15 {
    padding-left: 3px;
    width: 15%;
    float: left;
}

.width-20 {
    padding-left: 3px;
    width: 20%;
    float: left;
}

.width-25 {
    padding-left: 3px;
    width: 25%;
    float: left;
}

.w-20 {
    padding-left: 3px;
    width: 20%;
    float: left;
}
.w-25 {
    padding-left: 3px;
    width: 25%;
    float: left;
}
.w-30 {
    padding-left: 3px;
    width: 30%;
    float: left;
}
.w-show-33{
    display: none;
}
@media screen and (max-width: 650px) {
    .w-show-33{
        display: block;
    }
    .w-20 {
        width: 33%;
    }
    .w-25 {
        width: 33%;
    }
    .w-30 {
        width: 33%;
    }
    
}
.w-show-50{
    display: none;
}

@media screen and (max-width: 440px) {
    .w-show-50{
        display: block;
    }
    .w-show-33{
        display: none;
    }
    .w-20 {
        width: 50%;
    }
    .w-25 {
        width: 50%;
    }
    .w-30 {
        width: 50%;
    }
}
/* .debug
{
outline: 3px green solid;
} */
@media screen and (max-width: 449px) {
    .width-15 {
        width: 100%;
    }
    .width-20 {
        width: 100%;
    }
    .width-25 {
        width: 100%;
    }
}
.show-50{
    display: none;
}
@media screen and (min-width: 450px) {
    .show-50{
        display: block;
    }
    .width-15 {
        width: 50%;
    }
    .width-20 {
        width: 50%;
    }
    .width-25 {
        width: 50%;
    }
}
.show-33{
    display: none;
}
@media screen and (min-width: 600px) {
    .show-33{
        display: block;
    }
    .show-50{
        display: none;
    }
    .width-15 {
        width: 33%;
    }
    .width-20 {
        width: 33%;
    }
    .width-25 {
        width: 33%;
    }
}

@media screen and (min-width: 807px) {

    .width-15 {
        width: 33%;
    }
    .width-20 {
        width: 33%;
    }
    .width-25 {
        width: 33%;
    }
}

@media screen and (min-width: 1000px) {
    .show-33{
        display: none;
    }
    .show-50{
        display: none;
    }
    .width-15 {
        width: 15%;
    }
    .width-20 {
        width: 20%;
    }
    .width-25 {
        width: 25%;
    }
}

.clampingMethod-img-item {
    width: 50px;
    height: 60px;
    vertical-align: text-top;
}

/* Steel Parallels */

#tab-steelParallels {
    padding-top: 20px;
}

#tab-steelParallels .disabled {
    pointer-events: none;
    opacity: 0.4;
    background: #F7f7f7;
}

.bg-custom {
    background: #B4C8F6;
}

.Frasanschlag {
    /* background: #d0d0d0; */
    text-align: center;
}

.Frasanschlag img {
    width: 80%;
    margin: auto;
}

#tab-rail {
    border: 1px #72AC45 solid;
}

#tab-steelParallels>div,
#tab-clampingModule>div {
    border: 1px #72AC45 solid;
}

#tab-clampingModule>div>div,
#tab-steelParallels>div>div,
#tab-rail>div {
    padding-top: 5px;
}

#tab-rail>div {
    padding-top: 20px;
}

/* width */

.custom-scroll {
    overflow-y: auto;
    overflow-x: hidden;
}

.custom-scroll::-webkit-scrollbar {
    width: 3px;
}

/* Track */

.custom-scroll::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */

.custom-scroll::-webkit-scrollbar-thumb {
    background: #72AC45;
}

/* Handle on hover */

.custom-scroll::-webkit-scrollbar-thumb:hover {
    background: #72AC45;
}

@-ms-keyframes spin {
    from {
        -ms-transform: rotate(0deg);
    }
    to {
        -ms-transform: rotate(360deg);
    }
}

@-moz-keyframes spin {
    from {
        -moz-transform: rotate(0deg);
    }
    to {
        -moz-transform: rotate(360deg);
    }
}

@-webkit-keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@media screen and (max-width: 500px) {
    video {
        display: none;
    }
}

.loading-back {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* display: none; */
    z-index: 9998;
    /* color:#fff; */
}

.loading {
    position: absolute;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
    z-index: 9999;
    width: 30px;
    color: #72AC45;
    font-size: 100px;
}

.loading i {
    -animation: spin 1.6s infinite linear;
    -webkit-animation: spin 1.6s infinite linear;
    -moz-animation: spin 1.6s infinite linear;
    -ms-animation: spin 1.6s linear infinite;
    -o-animation: spin 1.6s linear infinite;
    animation: spin 1.6s linear infinite;
}

img.info-icon {
    width: 30px !important;
    cursor: help;
}

.my-tooltip {
    font-size: 11px;
    border-radius: 3px;
    position: absolute;
    width: 40%;
    padding: 15px;
    display: none;
    top: 20px;
    color: #000;
    left: 300px;
    background: #F7f7f7;
    border: 1px #72AC45 solid;
    pointer-events: none;
}

/* .my-tooltip::after {
    content: " ";
    position: absolute;
    left: 0;
    right: 100%;
    margin-left: -32px;
    margin-top: -10px;
    border-width: 15px;
    border-style: solid;
    border-color: transparent #72AC45 transparent transparent;
} */

.quantity {
    position: relative;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}

.quantity input {
    width: 65px;
    height: 32px;
    line-height: 1.65;
    float: left;
    display: block;
    padding: 0;
    margin: 0;
    padding-left: 20px;
    border: 1px solid #eee !important;
}

.quantity input:focus {
    outline: 0;
}

.quantity-nav {
    float: left;
    position: relative;
    height: 32px;
}

.quantity-button {
    position: relative;
    cursor: pointer;
    border-left: 1px solid #eee;
    width: 18px;
    text-align: center;
    color: #333;
    font-size: 13px;
    font-family: "Trebuchet MS", Helvetica, sans-serif !important;
    line-height: 1.1;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    background: #2E2E2E;
}

.quantity-button.quantity-up {
    color: #FFF;
    position: absolute;
    height: 50%;
    top: 0;
    border-bottom: 1px solid #eee;
}

.quantity-button.quantity-down {
    color: #FFF;
    position: absolute;
    bottom: 0px;
    height: 50%;
}

.quantity-button.quantity-up:hover,
.quantity-button.quantity-down:hover {
    background-image: linear-gradient(#3D3D3D 1%, #191919 42%, #121212);
}

.bucket-number-input {
    width: 65px !important;
}

.btn-addBucket {
    background-color: #2E2E2E !important;
    background-image: linear-gradient(#4F4F4F 1%, #404040 42%, #292929);
    color: #FFF !important;
    padding-left: 33px;
    border-radius: 0px;
    position: relative;
}

.btn-addBucket:hover {
    color: #FFF !important;
    background-image: linear-gradient(#3D3D3D 1%, #191919 42%, #121212);
    font-weight: 100;
}

.btn-addBucket .card-icondd {
    background-image: url('../img/cart-button-icon.png') !important;
    width: 20px;
    height: 20px;
    display: inline-block;
    background-size: 20px 20px;
    position: absolute;
    left: 6px;
    top: 6px;
}

@media (max-width: 767px) {
    .custom-form-group {
        margin-bottom: -1px!important;
    }
}