*,
html,
body {
       margin: 0;
       padding: 0;
       scroll-behavior: smooth;
       font-family: 'Roboto', sans-serif;
}

ul li {
       list-style-type: none;
       margin: 7px auto;
}

a {
       text-decoration: none;
}

:root {
       --animate-duration: 1s;
       --animate-delay: 1s;
       --animate-repeat: infinite;

       --pallete1: #5271ff;
       --pallete2: #38b6ff;
       --pallete3: #5e17eb;
       --pallete4: #004aad;
       --pallete5: #F5F7F8;
       --pallete6: #F6F5F5;
       --pallete7: #d9d9d9;
       --pallete8: #a6a6a6;
       --pallete9: #737373;
       --pallete10: #100C08;
       --pallete11: #3049A5;
       --pallete12: #F5F5F5;
       --pallete13: #60A3D9;
       --pallete14: #FD49A0;
       --pallete15: #070F2B;
       --pallete16: #222831;
       --pallete17: #31363F;
       --pallete18: #ff3131;
       --pallete19: #B4B4B8;
       --pallete20: #C7C8CC;
       --pallete21: #EF7C8E;
       --pallete22: rgb(245, 245, 245, 0.9);
       --pallete23: rgb(16, 12, 8, 0.8);
       --pallete24: #d8eefe;
       --pallete25: #e3f6f5;
       --pallete26: #ff5470;
       --pallete27: #094067;
       --pallete28: #232946;
       --pallete29: #25d366;
       --pallete30: #ff8906;
       --pallete31: rgb(255, 180, 0);
       --pallete32: rgb(9, 64, 103, 0.9);
       --pallete33: rgb(255, 244, 0);
       --pallete34: rgb(244, 205, 42);
       --pallete35: rgb(253, 246, 140);

       --pallete1op: rgba(82, 113, 255, 0.2);
       --pallete2op: rgba(56, 182, 255, 0.2);
       --pallete11op: rgba(48, 73, 165, 0.5);
       --pallete27op: rgba(9, 64, 103, 0.5);
       --pallete24op: rgba(216, 238, 254, 0.2);
       --pallete25op: rgba(227, 246, 245, 0.3);
       --pallete13op: rgba(96, 163, 217, 0.3);
}

/* === START-GRAPHIC-WATER-LEVEL  === */
/* main article .container-water-level-tank {
       margin: auto;
} */

/* main article .container-water-level-chart {
       display: flex;
       justify-content: center;
       margin: auto;
       overflow-x: auto;
       overflow-y: hidden;
       width: 100%;
} */

.container-water-level-tank {
       margin: auto;
}

.container-water-level-chart {
       display: flex;
       justify-content: center;
       margin: auto;
       overflow-x: auto;
       overflow-y: hidden;
       width: 100%;
       /* height: 100%; */
       /* height: auto; */
}

/* === END-GRAPHIC-WATER-LEVEL  === */

.container-tank {
       margin: 0.5rem auto;
}

.container-tank .tank-title h3,
.container-tank .tank-title h5 {
       color: var(--pallete10);
       display: flex;
       flex-wrap: wrap;
       justify-content: center;
       align-items: center;
}

.container-tank .tank-cover {
       border-style: solid;
       width: 18rem;
       height: 2rem;
       margin: auto;
       border-top-left-radius: 1.4rem;
       border-top-right-radius: 1.4rem;
       background-color: var(--pallete25);
}

.container-tank .container-body-tank {
       position: relative;
       border-style: solid;
       width: 18rem;
       height: 20rem;
       margin: auto;
       border-bottom-left-radius: 1.4rem;
       border-bottom-right-radius: 1.4rem;
       background-color: var(--pallete24);
}

.container-tank .container-body-tank .tank-detail {
       position: absolute;
       bottom: 0;
       right: 0;
       left: 0;
       max-width: 80%;
       z-index: 2;
       display: flex;
       margin: 0 auto;
       flex-direction: column;
       color: var(--pallete25);
}

.container-tank .container-body-tank .tank-detail span {
       text-align: start;
}

.container-tank .container-water-tank {
       position: absolute;
       bottom: 0;
       border-bottom-left-radius: 1rem;
       border-bottom-right-radius: 1rem;
       background-color: var(--pallete13);
}

.container-tank .pegangan {
       border: solid 0.2rem;
       width: 60px;
       height: 30px;
       margin: auto;
       border-top-left-radius: 1.4rem;
       border-top-right-radius: 1.4rem;
}