.noto-sans-title {
    font-family:"Noto Sans", sans-serif;
    font-optical-sizing:auto;
    font-weight:600;
    font-variation-settings:"wdth" 100;
    font-style:normal;
}

.noto-sans-text {
    font-family:"Noto Sans", sans-serif;
    font-optical-sizing:auto;
    font-weight:400;
    font-variation-settings:"wdth" 100;
    font-style:normal;
}

.noto-sans-subtext {
    font-family:"Noto Sans", sans-serif;
    font-optical-sizing:auto;
    font-weight:200;
    font-variation-settings:"wdth" 100;
    font-style:normal;
}

body {
    overflow:hidden;
    display:flex;
    justify-content:center;
    align-items:center;
}

.fileForm {
    width:300px;
    height:auto;
    margin:0 auto;
    min-height:300px;
    padding-top:25px;
    padding-bottom:25px;
    border-radius:14px;
    border:3px dotted rgb(0, 0, 26);
    display:flex;
    justify-content:center;
    align-items:center;
}

.fileForm div {
    width:100%;
    height:auto;
    text-align:center;
}

.fileForm div input {
    display:none;
}

.fileForm div label {
    width:100px;
    height:100px;
    border-radius:100px;
    background:rgba(211,211,211,0.7);
    text-align:center;
    color:black;
    display:flex;
    justify-content:center;
    align-items:center;
    margin-left:100px;
    color:rgb(0, 0, 26);
    font-size:24pt;
    cursor:pointer;
    animation-name:none;
    animation-duration:2.5s;
    animation-iteration-count:infinite;
}

.fileForm div p {
    font-style:italic;
}

.fileForm div #instructions {
    padding-left:30px;
    padding-right:30px;
    font-weight:600;
}

.fileForm div button {
    width:200px;
    height:40px;
    border-radius:6px;
    border:none;
    border:2px solid white;
    background:rgb(0, 0, 26);
    color:white;
    text-align:center;
    outline:none;
    cursor:pointer;
}

.fileForm div #confirmButton {
    animation-name:none;
    animation-duration:2.5s;
    animation-iteration-count:infinite;
}

.fileForm #fittingCTA {
    font-style:normal;
    cursor:pointer;
    animation-name:fittingAnimation;
    animation-duration:2.5s;
    animation-iteration-count:infinite;
}

.fileForm #fittingCTA:hover {
    color:rgb(255, 81, 0);
}

.fileForm .fittingMenu {
    display:none;
    width:80%;
    height:auto;
    padding:10px;
    border-top:1px solid black;
    border-bottom:1px solid black;
    margin-left:calc(10% - 10px);
}

.fileForm .fittingMenu input {
    display:block;
    width:100%;
    height:30px;
    margin-top:5px;
    padding-left:10px;
}

.fileForm .fittingMenu p {
    font-style:normal;
}

.fileList {
    display:none;
    position:absolute;
    top:10px;
    right:10px;
    width:300px;
    height:50px;
    background:rgba(194, 194, 194, 0.6);
    border-radius:3px;
}

.fileList p {
    text-align:center;
    color:black;
}

.fittingParametersDetails::-webkit-scrollbar {
    display:none;
}

.fittingParametersDetails {
    display:none;
    position:absolute;
    top:calc(50% - 150px);
    left:calc(50% + 175px);
    width:300px;
    height:300px;
    border-radius:10px;
    box-shadow:1px 1px 2px 2px rgba(0,0,0,0.5);
    overflow-y:scroll;
    padding:10px 10px 10px 10px;
}

.fittingParametersDetails p strong {
    font-size:16pt;
}

.hint {
    display:none;
    position:absolute;
    top:10px;
    right:10px;
    width:300px;
    height:100px;
    background:rgb(65, 0, 0);
    border-radius:3px;
    justify-content:center;
    align-items:center;
}

.hint p {
    text-align:center;
    color:white;
}

.infoButton {
    position:fixed;
    left:10px;
    bottom:10px;
    width:50px;
    height:50px;
    background:rgba(14,14,14);
    color:white;
    border-radius:3px;
    box-shadow:2px 2px 2px rgba(37, 37, 37, 0.7);
    display:flex;
    justify-content:center;
    align-items:center;
    cursor:pointer;
}

.infoButton h3 {
    font-size:18pt;
}

.info {
    display:none;
    position:fixed;
    top:calc(5% - 2px);
    left:calc(5% - 2px);
    width:90%;
    height:90%;
    border-radius:3px;
    background:rgb(235, 235, 235);
    border:2px solid white;
    z-index:90;
}

.info .container {
    width:100%;
    height:100%;
    border-radius:3px;
    padding:5%;
}

.info .container div::-webkit-scrollbar {
    display:none;
}

.info .container div {
    width:28%;
    height:80%;
    float:left;
    background:white;
    margin-left:calc(6% / 4);
    border-radius:6px;
    overflow-y:scroll;
}

.info .container div h2 {
    padding-top:20px;
    text-align:center;
    font-size:26pt;
}

.info .container div p {
    padding-left:30px;
    padding-right:30px;
    padding-bottom:30px;
}

.info .container div a {
    color:black;
}

.chartBox {
    display:none;
    width:100%;
    height:100%;
}

.formLimits {
    position:absolute;
    top:0;
    right:0;
    width:250px;
    height:100%;
    border-radius:10px 0px 0px 10px;
    border-left:1px solid rgb(0, 0, 0);
    display:none;
    justify-content:center;
    align-items:center;
    background:white;
    opacity:0.3;
    transition:1s;
    overflow-y:scroll;
}

.formLimits:hover {
    opacity:1;
}

.formLimits div {
    width:100%;
    height:95%;
    text-align:center;
}

.formLimits div label {
    width:200px;
    height:40px;
    background:none;
    border-radius:0px;
    text-align:center;
    font-size:10pt;
}

.formLimits div input, .formLimits div select {
    width:180px;
    height:30px;
    border:none;
    border:1px solid black;
    border-radius:3px;
    margin-top:5px;
    margin-bottom:10px;
    text-align:center;
    outline:none;
}

.formLimits div button {
    width:180px;
    height:30px;
    background:green;
    color:white;
    border:none;
    border:1px solid black;
    margin-bottom:10px;
    outline:none;
    cursor:pointer;
}

.formLimits div .endSection {
    margin-bottom:40px;
}

#zoomButton {
    background:blue;
    color:white;
}

#showOnlyButton {
    background:green;
    color:white;
}

#addButton {
    background:rgb(0, 104, 0);
    color:white;
}

#showAllButton {
    background:rgb(0, 85, 0);
    color:white;
}

#hideButton {
    background:rgb(71, 0, 0);
    color:white;
}

#hideOnlyButton {
    background:red;
    color:white;
}

#hideAllButton {
    background:rgb(167, 0, 0);
    color:white;
}

#calculateButton {
    background:lightblue;
    color:black;
}

.resultDiv {
    display:none;
    position:absolute;
    top:calc(50% - 65px);
    left:calc(50% - 225px);
    width:450px;
    height:130px;
    background:rgb(24, 24, 24);
    box-shadow:1px 1px 2px black;
    z-index:90;
    text-align:center;
}

.resultDiv p {
    color:white;
    text-align:left;
    padding-left:10px;
    padding-right:10px;
}

.resultDiv button {
    width:40%;
    height:30px;
    background:green;
    color:white;
    border:none;
    text-align:center;
    cursor:pointer;
}

.resultDiv .closeButton {
    background:red;
}

@keyframes fittingAnimation {
    0% {
        color:navy;
    }

    50% {
        color:rgb(0, 160, 0);
    }

    100% {
        color:navy;
    }
}

@keyframes filesAnimation {
    0% {
        background:rgba(211,211,211,0.7);
    }

    50% {
        background:rgb(0, 160, 0);
    }

    100% {
        background:rgba(211,211,211,0.7);
    }
}

@keyframes buttonAnimation {
    0% {
        background:rgb(0,0,26);
    }

    50% {
        background:rgb(0, 160, 0);
    }

    100% {
        background:rgb(0,0,26);
    }
}