:root {
    --shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.montserrat-<uniquifier> {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

* {padding:0;margin:0;font-family:"Montserrat", sans-serif;}
html, body {min-width: 100vw; height: 100vh;}

body {background-image:url('bg.svg');background-repeat:no-repeat;background-size:cover;background-position: center center;}

.everything {max-width:60rem;margin:auto auto 5rem auto;display:flex;flex-direction:row;justify-content:space-between;}

/* FORMS */
.gen-form, .channel-forms-all, .result-box {background-color:white;padding:1rem;border-radius:0.5rem;margin:1rem;box-shadow: var(--shadow);}

.channel-forms-all {max-height:32rem;overflow-x:scroll;}

.channel-form, .gen-int {margin:1rem 0;padding:0.5rem;background-color:#f1f1f1;border-radius:0.3rem;}
.inputs {display:flex;flex-direction:column;max-width:24rem;}

.result-box{margin:1rem;width:36rem;height:auto;}

.channel-form p label, .gen-int p label {font-size:0.8rem;color:#353535;}
.channel-form p, .gen-int p { display:flex;flex-direction:row; justify-content:space-between;width:100%;padding:0.2rem;}
.channel-form p input, .gen-int p input {border:none;outline;none;font-size:0.8rem;padding:0.1rem;border-radius:0.1rem; width:8rem;}

.gen-int {margin-bottom:0;}

.remove-channel {background-color:#ae2012;margin-left:auto;width:4rem;}
.remove-channel:hover {opacity:1;}
.remove-channel, #add-channel {border:none;outline:none;padding:0.3rem;font-size:0.7rem;border-radius:0.3rem;opacity:0.5;transition: all 0.3s ease;color:#f3f6f9;}
#add-channel {width:100%;background-color:#90a955; }
#add-channel:hover {opacity:1;}

.submit {background-color:#ee9b00; width:20rem;padding:0.5rem;border-radius:0.5rem;transition:all 0.5s ease;border:none;outline:none;box-shadow:var(--shadow);margin:auto;margin-bottom:1rem;}
.submit:hover {background-color:#4f772d;color:white;}

table {
    border-collapse: collapse;
    margin: 1rem auto;
    font-size: 0.7rem;
    background-color: white;
    border-radius: 0.3rem;
    overflow: hidden;
    box-shadow: var(--shadow);
}

thead {
    background-color: #f4f6f9;
    color: #333;
    text-align: left;
}

thead th {
    padding: 12px 16px;
    font-weight: 500;
    text-transform: uppercase;
    border-bottom: 2px solid #ddd;
}

tbody tr {
    border-bottom: 1px solid #eee;
    transition: background-color 0.2s ease;
}

tbody tr:hover {
    background-color: #f9fafb;
}

td, th {
    padding: 12px 8px;
    color: #444;
}

td:first-child {
    font-weight: 500;
    color: #222;
}

.logo {height:4rem;width:auto;}
h1 {font-weight:300;font-size:2.5rem;filter:drop-shadow(var(--shadow));color:#353535;}
.title-set {width:18rem;margin:1rem auto 3rem auto;display:flex;flex-direction:row;justify-content:space-between;}

.footer {padding:0.5rem;font-size:0.6rem;color:#e1e5e9;background-color:#454545;width:100%;height:fit-content;text-align:center;position:fixed;bottom:0;}

h3 {color:#353535;}
h4 {}
h5 {margin-top:1rem;}

.pop-div {display:flex;flex-direction:row;justify-content:space-between;font-size:0.9rem;padding:0.5rem;border-radius:0.5rem;width:calc(100% - 1rem);margin:1rem auto;color:#f3f6f9;}
.pop-div h4, .pop-div p {filter:drop-shadow(0 0 3px #353535);}

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

.toggle { border-radius:0.3rem; width: 12rem; padding:1rem;background-color:#ee9b0088;display:flex;flex-direction:row;justify-content:space-around;margin:auto;}
.toggle:hover {background-color:#ee9b00;}
.toggle h5 { opacity: 0.5; margin:0 1rem;}
.toggle h5.on { opacity: 1;}

.res-bar {height:fit-content;padding:0;width:100%;border-radius:0.3rem;display:flex;flex-direction:row;margin:1rem 0 2.2rem 0;overflow:hidden;}
.res-bar:hover {margin-bottom:1rem;}
.res-bar-el {opacity:0.7;transition:all 0.5s ease;height:2rem;box-shadow: inset 0 0 2px #fff;}
.res-bar-el:hover {opacity:1;height:fit-content;border-radius:0.5rem;width:fit-content;}
.res-bar-el h6 {line-height:2rem;color:white;text-align:center;width:100%;}
.res-bar-el p {display:none;color:white;line-height:1.2rem;font-size:0.7rem;text-align:center;}
.res-bar-el:hover p {display:block;}

.res-chart {display:flex; flex-direction:row;height:21rem;border-left:solid #676767 2px;border-bottom:solid #676767 2px;padding-bottom:1rem;margin:1rem 0 0 0;}
.res-chart-bar {align-self: flex-end;border-radius:0.1rem;opacity:0.7;transition:all ease 0.5s;}
.res-chart-bar:hover {opacity:1;border-radius:0.3rem;}

.res-chart-bar h6 {color:white;line-height:2rem;text-align:center;}
.res-chart-bar p {color:white;line-height:2rem;text-align:center;display:none;font-size:0.7rem;}
.res-chart-bar:hover p {display:block;}

.extra-info {font-weight:200;font-size:0.7rem;color:#454545;}