@charset "UTF-8";
@font-face {
    font-family: 'DIN Bold';
    src: url('../fonts/DINOT-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DIN Regular';
    src: url('../fonts/DINOT.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

.MatCardLogo {
    width: 80%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.resultImage {
    width: 95%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.pictureChosen {
    max-width: 80px;
    height: 80px;
    margin: 1px;
    border: 4px solid #000000;
}

.pictureOption {
    max-width: 80px;
    height: 80px;
    margin: 1px;
    border: 4px solid #dcdcdc;
}

.pictureOption:hover {
    border: 4px solid #000000;
}


/* FOR THE DATATABLES */

.develop {
    border-style: solid;
    border-width: 1px;
}

.buttonCalculateInactive {
    width: 350px;
    background: linear-gradient(180deg, grey 0%, lightgrey 100%);
    color: black;
    padding: 10px 25px;
    font-size: 28px;
    text-align: center;
    border-radius: 5px;
    border-color: snow;

}

.buttonCalculateActive {
    width: 350px;
    background: linear-gradient(180deg, rgba(0, 131, 193, 1) 0%, rgba(0, 131, 193, 0.5) 100%);
    color: white;
    padding: 10px 25px;
    font-size: 28px;
    text-align: center;
    border-radius: 5px;
    border-color: snow;
}

.tableUnderImage {
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
    display: block;
    text-align: left;
}

.structureImage {
    width: 90%;
    display: block;
    margin-left: 20px;
    margin-right: 20px;
}

.structureBlock {
    padding: 5%;
    border-radius: 15px;
    /*background-color: rgb(220, 220, 220);*/
    background: radial-gradient(circle, rgba(250, 250, 250) 25%, rgba(210, 210, 210) 100%);
    height: 100%;
}

.chosenStructureBlock {
    padding: 5%;
    border-radius: 15px;
    background-color: rgb(200, 200, 200);
    height: 100%;
}

.structureBlockAnalytical {
    padding: 8%;
    border-radius: 1px;
    /*background-color: rgb(220, 220, 220);*/
    background: white;
    height: 100%;
    outline: rgb(239,239,245) solid 1pt;
}

.structureBlockAnalytical:hover {
    outline: darkgrey solid 1.5pt;
}
.chosenStructureBlockAnalytical {
    padding: 8%;
    border-radius: 1px;
    /*background-color: rgb(220, 220, 220);*/
    background: white;
    height: 100%;
    outline: darkgrey solid 1.5pt;
}


.errorBlock {
    color: white;
    padding: 10px;
    border-radius: 15px;
    background-color: #F44455;
    margin-top: 5px;
}

.warningBlock {
    color: white;
    padding: 10px;
    border-radius: 15px;
    background-color: #FF7800;
    margin-top: 5px;
}

.infoBlock {
    color: white;
    padding: 10px;
    border-radius: 15px;
    background-color: grey;
    margin-top: 5px;
}

.errorParagraph {
    color: white;
    border-radius: 15px;
    background-color: #F44455;
}

.structureBlock:hover {
    background: rgb(200, 200, 200);
    height: 100%;
}

.blocktext {
    text-align: justify;
}

.inputTable {
    margin-top: 10px;
    margin-bottom: 10px;
    display: block;
    margin-right: auto;
    text-align: left;
}

.myLabels {
    padding-right: 10px;
}

.invalidField {
    border: 2px solid red;
    border-radius: 4px;
}

.sfield {
    width: 60px;
    text-align: right;
    margin: 5px;
}

.smfield {
    width: 80px;
    text-align: right;
    margin: 5px;
}

.mfield {
    width: 100px;
    text-align: right;
    margin: 5px;
}

.mlfield {
    width: 120px;
    text-align: right;
    margin: 5px;
}

.lfield {
    width: 140px;
    text-align: right;
    margin: 5px;
}


td.highlight {
    background-color: whitesmoke !important;
}

tfoot input {
    width: 100%;
    padding: 3px;
    box-sizing: border-box;
}

.custom-radio-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    outline: dark;
}

.btn-primary {
    background: #333;
    color: white;
    font-size: 28px;
    text-align: center;
}

#space {
    padding: 15px;
    text-align: justify;
    width: 200%;
}

#agb {
    text-align: justify;
}

#wrapper {
    text-align: left;
    margin: 0 auto;
}

#lp-body {
    background-color: #e4e3e3;
    background-image: url(/static/images/background_logos.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-attachment: scroll;
    overflow: auto;
    height: 100%;
}


.bg-circle {
    position: relative; /*makes left effective*/


    background-color: #e4e3e3;
    border-radius: 50%;
    width: 100%;
    height: 60%;
    margin-top: 10%;

}

/* for the loading animation */
/* can be deleted if not used */
.loader {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid yellow;
    width: 60px;
    height: 60px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
}

.material-symbols-rounded {
  font-variation-settings: 'FILL' 0,
  'wght' 600,
  'GRAD' 0,
  'opsz' 40;
  vertical-align: middle;
  float: right;
  color: #2596be;
}

/* Safari */
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}