﻿.system-steps {
    padding-bottom: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 15px;
}

.system-steps .step {
    flex-grow: 1;
    display: flex;
    flex-direction: row;
    justify-content: flex-start; 
}

.system-steps .step.available {
    cursor: pointer;
}

.system-steps .step .text {
    font-size: 14px;
    line-height: 50px;
    background: #5c5c5c;
    color: #fff;
    padding-left: 10px;
    width: 100%;
}

.system-steps .step.active .text {
    background: #f78d1f;
}

@media(min-width:992px) {

    .system-steps {
        flex-direction: row;
        gap: 0;
    }

    .system-steps .step .step-arrow {
        border-left: 15px solid #5c5c5c;
        border-top: 25px solid transparent;
        border-bottom: 25px solid transparent;
    }

    .system-steps .step.active .step-arrow {
        border-left: 15px solid #f78d1f;
    }

    .system-steps .step .inverted-arrow {
        border-left: 15px solid transparent;
        border-top: 25px solid #5c5c5c;
        border-bottom: 25px solid #5c5c5c;
    }

    .system-steps .step.active .inverted-arrow {
        border-top: 25px solid #f78d1f;
        border-bottom: 25px solid #f78d1f;
    }
}


.shape-selection-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-row-gap: 15px;
    padding-bottom: 30px;
}

.shape-selection-container .shape-selection {
    flex-grow: 1;
    text-align: center;
}

@media(min-width:992px) {

    .shape-selection-container {
        grid-template-columns: repeat(6, 1fr);
    }
}

#content legend {
    line-height: 50px;
    font-size: 20px;
    color: white;
    display: block;
    width: 100%;
    margin: 20px 0;
}

        #content legend.orange { /*IE9*/
            background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmYTY0MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmOWMyYSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
            background-size: 100%;
            background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffa640), color-stop(100%, #ff9c2a));
            background-image: -webkit-linear-gradient(top, #ffa640, #ff9c2a);
            background-image: -moz-linear-gradient(top, #ffa640, #ff9c2a);
            background-image: -o-linear-gradient(top, #ffa640, #ff9c2a);
            background-image: linear-gradient(top, #ffa640, #ff9c2a);
        }

        #content legend.grey { /*IE9*/
            background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjEwMCUiIHgyPSI1MCUiIHkyPSIwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0icmdiYSgwLCAwLCAwLCAwLjIpIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSJyZ2JhKDI1NSwgMjU1LCAyNTUsIDAuMikiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
            background-size: 100%;
            background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, rgba(0, 0, 0, 0.2)), color-stop(100%, rgba(255, 255, 255, 0.2)));
            background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2));
            background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2));
            background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2));
            background-image: linear-gradient(bottom, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2));
        }

    #content .content {
        font-size: 15px;
        line-height: 20px;
        color: #6c7478;
        padding: 35px 10px;
    }

    .imageTrobaCalculator {
        width: 100%;
    }


    .sketch-disabled {
        height: 51px;
        opacity: 0.5;
        filter: alpha(opacity=50);
    }

    table.contentTable {
        border: 1px solid rgb(242, 242, 241);
        width: 100%;
    }

        table.contentTable thead tr {
            background: rgb(247, 141, 31);
        }

            table.contentTable thead tr th {
                text-align: left;
                color: #fff;
                font-weight: normal;
            }

        table.contentTable tbody tr:nth-child(even) {
            background: #fff;
        }

        table.contentTable tbody tr:nth-child(odd) {
            background: rgb(242, 242, 241);
        }

        table.contentTable th, table.contentTable td {
            vertical-align: top;
            padding: 5px;
        }

    table.checkboxTable {
        border: none;
        width: 100%;
        padding-top: 10px;
    }

        table.checkboxTable td {
            vertical-align: top;
            padding: 5px;
            padding-left: 0px;
        }


    .nav {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        padding-left: 0;
        margin-bottom: 0;
        list-style: none;
    }


    .nav-tabs.wizard {
        background-color: transparent;
        padding: 0;
        width: 100%;
        margin: 1em auto;
        border-radius: 0;
        clear: both;
        border-bottom: none;
    }

        .nav-tabs.wizard li {
            width: 100%;
            float: none;
            margin-bottom: 3px;
        }

            .nav-tabs.wizard li a {
                display: block;
                height: 45px;
                color: #6c7478 !important;
            }

            .nav-tabs.wizard li > * {
                position: relative;
                padding: 1em .8em .8em 2.5em;
                color: #fff;
                background-image: linear-gradient(to top, rgb(142, 145,147) 0%, rgb(177, 181, 183) 100%);
                border-color: rgb(157, 161, 163);
            }

            .nav-tabs.wizard li.active > * {
                color: #fff !important;
                border-color: #F78D1F !important;
                border-bottom: none !important;
                background-image: linear-gradient(to top, rgb(238, 125, 23) 0%, rgb(255, 152, 33) 100%) !important;
                border-image-source: linear-gradient(to top, rgb(238, 125, 23) 0%, rgb(255, 152, 33) 100%) !important;
            }

            .nav-tabs.wizard li::after:last-child {
                border: none;
            }

        .nav-tabs.wizard > li > a {
            opacity: 1;
            font-size: 15px;
        }

    @media(min-width:960px) {
        .nav-tabs.wizard li {
            position: relative;
            padding: 0;
            margin: 4px 4px 4px 0;
            width: 16.3%;
            float: left;
            text-align: center;
        }

            .nav-tabs.wizard li a {
                display: block;
                height: 54px;
                color: #fff !important;
                padding-top: 17px;
            }

            .nav-tabs.wizard li.active a {
                padding-top: 17px;
            }

            .nav-tabs.wizard li::after,
            .nav-tabs.wizard li > *::after {
                content: '';
                position: absolute;
                top: 0px;
                left: 100%;
                height: 0;
                width: 0;
                border: 27px solid transparent;
                border-right-width: 0;
                /*border-left-width: 20px*/
            }

            .nav-tabs.wizard li::after {
                z-index: 1;
                -webkit-transform: translateX(4px);
                -moz-transform: translateX(4px);
                -ms-transform: translateX(4px);
                -o-transform: translateX(4px);
                transform: translateX(4px);
                border-left-color: #fff;
                margin: 0
            }

            .nav-tabs.wizard li > *::after {
                z-index: 2;
                border-left-color: inherit
            }

            .nav-tabs.wizard li:last-child {
                margin-right: 0;
            }

                .nav-tabs.wizard li:last-child a:after,
                .nav-tabs.wizard li:last-child:after {
                    content: "";
                    border: none;
                }
    }

    @media print {
        .wizard {
            display: none;
        }

        .print-button {
            display: none;
        }
    }

    .input-validation-failed {
        color: #f00;
        padding-top: 1px !important;
        padding-bottom: 2px !important;
        margin-bottom: 0px;
        width: 100%;
    }

    .input-group {
        padding-top: 10px;
    }

    .sectionContent {
        list-style-type: none;
    }

    .sections {
        list-style-type: none;
    }

    .ownAmount {
        height: 40px !important;
    }

    img.legendicon {
        width: 15px;
        height: 15px;
        max-width: 15px;
        max-height: 15px;
    }

    div.drainbuttons {
    }

    div.drainbutton {
        float: right;
        height: 28px;
        width: 28px;
        background-repeat: no-repeat;
        background-position: center;
    }

    div.buttonedit {
        background-image: url("../../images/layout/edit_inactive.png");
    }

        div.buttonedit:hover, div.buttondelete:active {
            background-image: url("../../images/layout/edit_active.png");
        }

    div.buttondelete {
        background-image: url("../../images/layout/delete_inactive.png");
    }

        div.buttondelete:hover, div.buttondelete:active {
            background-image: url("../../images/layout/delete_active.png");
        }

    img.pointer {
        cursor: pointer;
    }

   .row__gurantee-text p {
      padding: 10px;
      background-color: #ebebeb;
      margin-top: 15px;
   }

   #section6 .row__gurantee-text p {
      margin: 30px 0px;      
   }

