:root {
    --main-bg-color: #ececec;
    --header-color: #f5f5f5;
    --popup-color: #f7f7f7;
    --defecit-color: #ebebeb;
    --high-defecit-color: #d6d6d6;
    --h1-color: #36535e;
    --h2-color: #414141;
    --h3-color: #585858;
    --h3-color-dark: #4e4e4e;
    --dark-font: #202020;
    --green-button: #2ecc71;
    --green-button-hover: #29b866;
    --bright-green-button: #3df188;
    --bright-green-button-hover: #37d97a;
    --blue-button: #3498db;
    --blue-button-hover: #2980b9;
    --yellow-button: #d7e233;
    --yellow-button-hover: #c2cb2e;
    --red-button: #e23333;
    --red-button-hover: #cb2e2e;
    --dark-red-button: #bb1515;
    --dark-red-button-hover: #961111;
    --neutral-button: #e0e0e0;
    --neutral-button-hover: #cacaca;
    --card-color: #cccccc;
    --warning-color: #d7e233;
    --warning-color-text: #a0a82b;
    --error-color: #e23333;
    --dark-blue-color: #2555e6;
    --ban-color: #bb1515;
    --success-color: #22eb51;
    --report-button: #d91919;
    --notification-color: #c53838;
    --gray-border: #cccccc;
    /* Icon Color: #565656*/
}

h1 {
    color: var(--h1-color);
    font-size: 3rem;
}

h2 {
    font-size: 1.75rem;
    color: var(--h2-color);
}

h3 {
    font-size: 1.4rem;
}

a {
    color: #3b5cc2;
    text-decoration: none;
}

a:hover {
    color: #23397a;
}

p {
    font-size: 1rem;
    font-weight: 500;
    color: #0d1127;
}

@font-face {
  font-family: "Noto Sans";
  src: url("../fonts/Noto_Sans/static/NotoSans-Medium.ttf");
  font-weight: 1 399;
}

@font-face {
  font-family: "Noto Sans";
  src: url("../fonts/Noto_Sans/static/NotoSans-SemiBold.ttf");
  font-weight: 400 699;
}

@font-face {
  font-family: "Noto Sans";
  src: url("../fonts/Noto_Sans/static/NotoSans-Bold.ttf");
  font-weight: bold;
}

@font-face {
  font-family: "Noto Sans";
  src: url("../fonts/Noto_Sans/static/NotoSans-ExtraBold.ttf");
  font-weight: bolder;
}

.notif-abs-div {
  position: absolute;
  right: 5px;
  top: 20px;
}

#notif-div {
    position: sticky;
    margin-left: auto;
    margin-right: 10px;
    width: fit-content;
    top: 10px;
}

.notification {
    background-color: var(--notification-color);
    width: 15rem;
    text-align: center;
    padding: 10px 10px;
    border-radius: 10px;
    border: 1px solid var(--h2-color);
    box-shadow: 0 4px 12px rgb(0,0,0,0.25);
    color: var(--dark-font-color);
    animation: fadeIn 0.15s ease-out;
}

.template {
    display: none;
}

@keyframes fadeIn {
  0% { opacity: 0; 
       display: flex;
    }
  100% { opacity: 1; }
}

.fade-out { animation: fadeOut 2.5s; }

@keyframes fadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}