/*------------------------------------*\
 #Developed by Toolkit Systems
/*------------------------------------*/


/*------------------------------------*\
/* SECTION: Variables */
/*------------------------------------*/

:root {
    /* Global Colors */
    --primary: #05243B;
    --primary_hover: #082f4d;
    --secondary: #00FFB1;
    --secondary_hover: #04f2a9;
    --tertiary: #9ad4ff;
    --tertiary_hover: #79c0f5;

    /* Feedback Colors */
    --success: #4fc109;
    --error: #B00020;
    --warning: #ec932a;
    --notification: var(--primary);

    /* Text Colors */
    --text: #171717;
    --text_light: #676767;
    --text_lighter: #A3A3A3;
    --text_disabled: rgba(255, 255, 255, 0.38);
    --text_inverted: #fff;
    --text_on_primary: var(--text_inverted);
    --text_on_primary_light: #aaa;

    /* Background Colors*/
    --bg: #fff;
    --bg_hover: #1b1b1b;
    --bg1: #efefef;
    --bg1_hover: #ddd;
    --bg2: #344155;
    --bg2_hover: #344155;
    --bg3: #232a36;
    --bg3_hover: #232a36;
    --bg_box: var(--bg);
    --bg_box_hover: var(--bg_hover);

    /* Font Style*/
    --font_weight: 400;
    --font_weight_light: 300;
    --font_weight_heavy: 500;
    --font_weight_heading: 700;

    /* Border Radius */
    --border_radius: 5px;

    /* Font Sizes */
    --h1: 36px;
    --h2: 30px;
    --h3: 26px;
    --h4: 1.15rem;

    /* Drop Shadows */
    --z1: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
    --z2: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --z3: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.3);
    --z4:
        0 0px 2.7px rgba(0, 0, 0, -0.004),
        0 0.3px 4.7px rgba(0, 0, 0, 0.002),
        0 0.9px 6.5px rgba(0, 0, 0, 0.013),
        0 2.1px 8.4px rgba(0, 0, 0, 0.026),
        0 4.3px 11.4px rgba(0, 0, 0, 0.042),
        0 10px 20px rgba(0, 0, 0, 0.06);
    --z5:
        0 0.1px 2.7px rgba(0, 0, 0, -0.004),
        0 0.6px 4.7px rgba(0, 0, 0, 0.002),
        0 1.8px 6.5px rgba(0, 0, 0, 0.013),
        0 4.2px 8.4px rgba(0, 0, 0, 0.026),
        0 8.6px 11.4px rgba(0, 0, 0, 0.042),
        0 20px 20px rgba(0, 0, 0, 0.06);
}


/*------------------------------------*\
/* SECTION: Global Settings */
/*------------------------------------*/

* {
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}

html {
    font-size: 16px;
    color: var(--text);
    line-height: 1.5;
    font-weight: var(--font_weight);
}

body {
    margin: 0;
    background-color: var(--bg);
}

main {
    width: 100%;
}

.page {
    display: flex;
    flex-flow: row nowrap;
}

.main {
    padding: 70px 20px;
}

a {
    text-decoration: none;
    color: var(--text);
}

/*------------------------------------*\
/*             Icons                  */
/*------------------------------------*/

.icon {
    width: 20px;
    height: 20px;
}

.icon--smaller {
    width: 16px;
    height: 16px;
}

.icon--color {
    fill: var(--primary);
}

.icon--color:hover {
    fill: var(--primary_hover);
}

/*------------------------------------*\
/* SECTION: Heading */
/*------------------------------------*/

.heading {
    font-weight: var(--font_weight_heading);
}

.heading_container {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
}

.heading_container.center {
    justify-content: center;
}

.heading.h1 {
    font-size: var(--h1);
    line-height: calc(var(--h1) + 0.2rem);
}

.heading.h2 {
    font-size: var(--h2);
    line-height: calc(var(--h2) + 0.2rem);
}

.heading.h3 {
    font-size: var(--h3);
    line-height: calc(var(--h3) + 0.2rem);
}

/*------------------------------------*\
/* SECTION: Buttons */
/*------------------------------------*/

.button_container {
    display: flex;
    flex-flow: row nowrap;
    gap: 5px;
}

.button_container.center {
    justify-content: center;
}

.button_container.right {
    justify-content: flex-end;
}

.button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px 10px;
    background-color: var(--primary);
    color: var(--text_on_primary);
    cursor: pointer;
    text-decoration: none;
    border: 1px solid transparent;
    font-size: 14px;
    max-height: 23px;
    font-weight: 300;
}

.button:hover {
    background-color: var(--primary_hover);
    color: var(--secondary);
}

.button.disabled {
    filter: opacity(0.3) grayscale(80%);
    cursor: default;
}

.button.secondary {
    background-color: var(--bg);
    color: var(--text);
    border: 2px solid var(--primary);
}

.button.secondary:hover {
    background-color: var(--tertiary);
}

/*------------------------------------*\
/* SECTION: Box */
/*------------------------------------*/

.box {
    background-color: var(--bg_box);
    border-radius: var(--border_radius);
    padding: 20px;
    box-shadow: var(--z1);
}

/*------------------------------------*\
/* SECTION: Header */
/*------------------------------------*/

header {
    padding: 10px;
    background-color: var(--primary);
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    z-index: 10;
    width: 100%;
    height: 50px;
}

.header__section {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    width: 250px;
}

.header__section--right {
    justify-content: flex-end;
}

.header__logo {
    width: 25px;
    height: 25px;
    margin-right: 10px;
}

.header__name {
    color: var(--text_on_primary);
    margin-right: 40px;
    font-size: 18px;
}

.header__link {
    text-decoration: none;
    color: var(--text_on_primary);
    font-weight: 300;
    font-size: 18px;
    margin-right: 10px;
}

.header__link:hover {
    color: var(--secondary);
}

.header__link.active {
    color: var(--secondary);
}

.header__search {
    border-radius: 50px;
    padding: 5px 10px;
    margin-bottom: 2px;
    border: none;
    outline: none;
    background-color: var(--primary_hover);
    color: var(--text_on_primary);
    width: 100%;
}

.header__search::placeholder {
    color: var(--text_on_primary_light);
}

.header__notification--icon {
    width: 16px;
    height: 16px;
    fill: var(--text_on_primary);
    margin-right: 20px;
    cursor: pointer;
}

.header__notification--icon:hover {
    fill: var(--secondary);
}

.header__notification--icon.active {
    fill: var(--warning);
}

.header__account {
    color: var(--text_on_primary);
    font-weight: 300;
}

/*------------------------------------*\
/* SECTION: Sidenav */
/*------------------------------------*/

.sidenav__container {
    max-width: 200px;
    width: 100%;
    padding-top: 50px;
}

.sidenav {
    background-color: var(--bg2);
    width: 200px;
    height: 100vh;
    position: fixed;
    display: flex;
    flex-flow: column;
}

.sidenav__link {
    padding: 20px;
    color: var(--text_on_primary);
}

.sidenav__link:hover {
    color: var(--secondary);
}

.sidenav__link.active {
    color: var(--secondary);
    background-color: var(--bg3);
}

/*------------------------------------*\
/* SECTION: Notifications */
/*------------------------------------*/

.notifications {
    position: fixed;
    top: 65px;
    right: 20px;
    width: 300px;
    max-height: 90vh;
    overflow-y: scroll;
    display: none;
    z-index: 10;
}

.notifications__item {
    padding: 10px 20px;
    padding-right: 10px;
    background-color: var(--primary);
    color: var(--text_on_primary);
    margin: 5px 5px;
    border-radius: var(--border_radius);
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
}

.notifications__text {
    display: flex;
    flex-flow: column;
}

.notifications__info_container {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 300;
    margin-bottom: 5px;
    gap: 5px;
}

.notifications__button_container {
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    width: 30px;
    cursor: pointer;
}

.notifications__button {
    width: 14px;
    height: 14px;
    fill: var(--text_on_primary);
}

.notifications::-webkit-scrollbar {
    width: 5px;
}
.notifications::-webkit-scrollbar-button {
    height: 5px;
}
.notifications::-webkit-scrollbar-track {

}
.notifications::-webkit-scrollbar-track-piece {

}
.notifications::-webkit-scrollbar-thumb {
    background-color: var(--primary);
    border-radius: 50px;
}

/*------------------------------------*\
/* SECTION: Tabs */
/*------------------------------------*/

.tab_container {
    display: flex;
    flex-flow: row wrap;
    gap: 30px;
    margin-bottom: 15px;
}

.tab {
    border-bottom: 2px solid transparent;
    color: var(--text_light);
}

.tab:hover {
    border-bottom: 2px solid var(--secondary);
    cursor: pointer;
    color: var(--text);
}

.tab.active {
    border-bottom: 2px solid var(--primary);
    font-weight: 500;
    color: var(--text);
}

.tab.active:hover {
    border-bottom: 2px solid var(--primary);
    cursor: default;
}

/*------------------------------------*\
/* SECTION: Table */
/*------------------------------------*/

.table {
    width: 100%;
    text-align: left;
    overflow-x: auto;
}

th, td {
    padding: 5px 15px;
}

tr:nth-child(odd) {
  background-color: var(--bg1);
}

tr:hover {
    background-color: var(--tertiary);
}

th {
    background-color: var(--primary);
    color: var(--text_on_primary);
    font-weight: 300;
}

/*------------------------------------*\
/* SECTION: Input */
/*------------------------------------*/

.input_container {
    display: flex;
    flex-flow: column;
    gap: 15px;
}

.input_container.center {
    align-items: center;
}

label {
    display: flex;
    flex-flow: column;
    width: 300px;
}

.input {
    background-color: var(--bg1);
    outline: none;
    border: none;
    padding: 5px 10px;
}
































/*------------------------------------*\
/* SECTION: Animation */
/*------------------------------------*/

/* Drop Shadow with hover animation */
.hoverable {
    -webkit-transition: -webkit-box-shadow .25s, margin-top .25s, margin-bottom .25s;
    transition: box-shadow .25s, margin-top .25s, margin-bottom .25s, -webkit-box-shadow .25s;
}

@media (pointer:fine) {
    /* Hover animation only visible on devices with expected fine human interface device (mouse) */
    .hoverable:hover {
        -webkit-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        box-shadow: var(--z5);
        /* margin-top: -2px;
        margin-bottom: 2px; */
    }
}

/* Loading Animation */
#loader {
  position: fixed;
  bottom: 10px;
  right: 5px;
  width: 55px;
  height: 55px;
  display: none;
  visibility: hidden;
}

#loader:after {
  content: " ";
  display: block;
  width: 30px;
  height: 30px;
  margin: 1px;
  border-radius: 50%;
  border: 5px solid var(--secondary);
  border-color: var(--secondary) transparent var(--primary) transparent;
  animation: loader 1.2s linear infinite;
}

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


/*------------------------------------*\
/* SECTION: Return Messages */
/*------------------------------------*/

.return_message {
    position: fixed;
    top: calc(var(--header) + 30px);
    left: 30px;
    width: 320px;
    z-index: 100;
}

.return_message_box {
    width: 100%;
    border-radius: 5px;
    position: relative;
    margin-bottom: 20px;
    z-index: 100;
    left: -600px;
    border-bottom: 10px solid var(--bg2);
    box-shadow: var(--z4);
    background-color: var(--bg2);
}

.return_message_close {
    cursor: pointer;
    display: flex;
    place-items: center;
    position: absolute;
    top: 0px;
    right: 0px;
    padding: 15px;
}

.return_message_close:hover {
    color: var(--secondary);
}

.return_message_message {
    padding: 20px;
    width: 300px;
}

.return_message_error {
    border-bottom-color: var(--error);
}

.return_message_warning {
    border-bottom-color: var(--warning);
}

.return_message_notification {
    border-bottom-color: var(--notification);
}

.return_message_success {
    border-bottom-color: var(--success);
}

/*------------------------------------*\
/* SECTION: Helper */
/*------------------------------------*/

.hidden {
    display: none;
    visibility: hidden;
}

.filler {
    flex: 1;
}