.ma-name {
    color: rgb(24, 188, 156);
    font-size: 36px;
    font-weight: bold;
    cursor: default;
    margin-bottom: 20px;
}

.ma-result {
    color: rgb(24, 188, 156);
    font-size: 22px;
    border: 2px rgb(24, 188, 156) solid;
    border-radius: 30px;
    font-weight: bold;
    cursor: default;
    text-align: center;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 20px;
}

.ma-description {
    color: gray;
    font-size: 20px;
    cursor: default;
    margin-top: 0px;
    margin-bottom: 40px;
    padding-left: 60px;
    padding-right: 40px;
}

.contract {
    background-color: rgb(24, 188, 156);
    color: white;
    font-size: 22px;
    cursor: pointer;
    padding-left: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-bottom: 20px;
    border-radius: 20px;
}

.contract-short-name {
    font-size: 20px;
    margin-left: 0px;
}

.contract-name {
    font-size: 18px;
    max-width: 160px;
    margin-left: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media all and (max-width: 750px) {
    .contract-short-name {
        max-width: none;
    }
    .contract-name {
        max-width: none;
    }
}


.contract-result {
    color: white;
    font-size: 22px;
    font-weight: bold;
    cursor: pointer;
    float: right;
    text-align: right;
    margin-right: 30px;
}

.form {
    margin-left: 0px;
    margin-bottom: 0px;
    color: rgb(24, 188, 156);
    font-size: 22px;
    cursor: pointer;
}

    .form.icon.selected {
        color: rgb(24, 188, 156);
    }

    .form.icon.not-selected {
        color: lightgray;
    }

    .form.name.selected {
        color: white;
        margin-left: 10px;
    }

    .form.name.not-selected {
        color: white;
        margin-left: 10px;
    }

    .form.result {
        font-size: 22px;
        font-weight: bold;
        cursor: pointer;
        float: right;
        text-align: right;
        margin-right: 20px;
    }

        .form.result.selected {
            color: white;
        }

        .form.result.not-selected {
            color: white;
        }

.not_contract_yet_defined {
    font-size: 22px;
    margin-left: 60px;
    margin-bottom: 20px;
    color: red;
}

.not_form_yet_defined {
    font-size: 22px;
    margin-left: 60px;
    margin-bottom: 20px;
    color: red;
}

.field-description{
    color:lightgray;
    font-style:italic;
    text-align:center;
    margin-bottom: 10px;
}

/* Toggle-Switch */
input:checked + .switch-slider {
    background-color: rgb(24, 188, 156);
}

input:focus + .switch-slider {
    box-shadow: 0 0 1px rgb(24, 188, 156);
}

/* Radio button */
.funkyradio-success input[type="radio"]:checked ~ label:before,
.funkyradio-success input[type="checkbox"]:checked ~ label:before {
    background-color: rgb(24, 188, 156);
}

/* Collapsable panels */

.panel.panel-default {
    border-radius: 20px;
}

    .panel.panel-default.form {
        background-color: rgba(211, 205, 181, 0.25);
    }

.panel-title.contract-title {
    font-size: 24px;
}

.panel-title.contract-selected {
    color: white;
    font-size: 24px;
    margin-right: 10px;
}

.panel-title.contract-description {
    font-size: 20px;
    margin-left: 40px;
    margin-top: 15px;
    margin-bottom: 20px;
    margin-right: 40px;
}

.panel-title.form-title {
    font-size: 18px;
}

.panel-title.form-selected {
    color: green;
    font-size: 18px;
    margin-right: 10px;
}

.panel-title.form-not_selected {
    display: none;
    color: lightgray;
    font-size: 18px;
    margin-right: 10px;
}

.panel-title.form-description {
    font-size: 18px;
    margin-top: 15px;
    margin-bottom: 15px;
}

.panel-heading.contract {
    cursor: pointer;
    border-bottom: 1px white solid;
    background-color: rgb(24, 188, 156);
    color: white;
    border-radius:20px;
}

    .panel-heading.contract .accordion-toggle:after {
        color: white; /* adjust as needed */
    }

.panel-heading.form {
    cursor: pointer;
    border-bottom: 1px white solid;
    background-color: rgb(211, 205, 181);
    color: white;
    border-radius: 20px;
}

    .panel-heading.form .accordion-toggle:after {
        color: white; /* adjust as needed */
    }

.panel-heading .accordion-toggle:after {
    /* symbol for "opening" panels */
    font-family: 'Glyphicons Halflings'; /* essential for enabling glyphicon */
    content: "\e113"; /* adjust as needed, taken from bootstrap.css */
    float: right; /* adjust as needed */
    color: grey; /* adjust as needed */
    margin-top: 0px;
}

.panel-heading .accordion-toggle.collapsed:after {
    /* symbol for "collapsed" panels */
    content: "\e114"; /* adjust as needed, taken from bootstrap.css */
}

.panel-body.contract {
    background-color: white;
    padding-top: 0px;
}

.panel-body.form {
    padding-top: 0px;
}

.column.contract-title-left {
    width: 55%;
    background-color: none;
    float: left;
    padding-left: 20px;
}

.column.contract-title-right {
    cursor: pointer;
    width: 30%;
    background-color: none;
    float: right;
    text-align: center;
}

.column.contract-description-left {
    width: 75%;
    background-color: none;
    float: left;
    padding-left: 20px;
    padding-right: 10px;
}

.column.contract-description-right {
    width: 25%;
    background-color: none;
    float: right;
    text-align: center;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

.buttons {
    margin-top: 5px;
    min-width: 100px;
    max-width: 100px;
    white-space: normal;
    border: 0px;
    border-radius: 10px;
    padding: 10px;
    font-size:12px;
}

    .buttons.advantages {
        min-width: 90px;
        max-width: 90px;
        background-color: white !important;
        color: rgb(24, 188, 156);
        border: 2px solid rgb(24, 188, 156);
    }

        .buttons.advantages:hover {
            color: rgb(153, 140, 91);
            border: 2px solid rgb(153, 140, 91);
        }

        .buttons.advantages:focus {
            outline-width: 0;
        }

    .buttons.calculate {
        background-color: darkorange;
    }

        .buttons.calculate:hover {
            background-color: orange;
        }

        .buttons.calculate:focus {
            outline-width: 0;
        }

    .buttons.select {
        background-color: green;
    }

        .buttons.select:hover {
            background-color: forestgreen;
        }

        .buttons.select:focus {
            outline-width: 0;
        }

    .buttons.summary {
        font-size: 32px;
        min-width: 70px;
        max-width: 70px;
        border-radius: 100%;
        background-color: rgb(88, 90, 85);
    }

        .buttons.summary:hover {
            background-color: rgb(128, 130, 123);
        }

        .buttons.summary:focus {
            outline-width: 0;
        }