/*
  ____   ____    _     ____  _____    ____
 / ___| |  _ \  / \   / ___|| ____|  | ___|
 \___ \ | |_) |/ _ \ | |    |  _|    |___ \
  ___) ||  __// ___ \| |___ | |___    ___) |
 |____/ |_|  /_/   \_\\____||_____|  |____/
 [Magellan Template by space♦5]
*/

/*   Base settings
------- ------- ------- ------- ------- ------- ------- -------*/
/*   :: import ---   */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Roboto&display=swap');

/*   :: VARS ---   */
:root {
    /* Theme colors */
    --color-primary: #0044C1;
    --color-secondary: #3E578B;
    --color-accent: #6CDB00;
    --color-dark: #2B2C43;
    --color-white: #ffffff;
    --color-neutral: #EFF2F6;
    --color-placeholder: #DFE4EA;
    --color-bg: #e5e5e5;
    --color-text-grey: #737373;

    /* Theme-shades */
    --color-primary-light: #145de3;
    --color-primary-dark: #002785;
    --color-secondary-light: #0afc4c;
    --color-secondary-dark: #04cd3d;

    /* Fonts */
    --wf: 'Roboto', sans-serif;
    --wf2: 'Montserrat', sans-serif;
    --color-text-heading: var(--color-primary);
    --color-text: var(--color-dark);
    --color-text-accent: var(--color-accent);

    /* Fonts sizes */
    --size-text: 1rem;
    --size-text-note: 0.8125rem;
    --size-heading-xl: 3rem;
    --size-heading-l: 2.5rem;
    --size-heading-m: 2rem;
    --size-heading-s: 1.5rem;
    --size-heading-xs: 1.125rem;

    /* Project colors */
    --color-link: var(--color-primary);
    --color-link-hover: var(--color-secondary);
    --color-link-active: var(--color-secondary);
    --color-icon-primary: var(--color-primary);
    --color-icon-secondary: var(--color-secondary);

    --color-grey-dark: #323c47;
    --color-grey: #90a0b7;
    --color-grey-light: #c2cfe0;

    /* BG colors */
    --color-bg-light-blue: #E7EFFD;
    --color-bg-light-blue-dark: #D0DDF7;
    --color-bg-light-blue-dark2: #DBE1F2;

    --color-bg-grey: #f7f7f7;
    --color-bg-grey-light: #fafafa;
    --color-bg-grey-dark: #6d6d6d;

    /* SP5 DEV */
    --color-sp5-dev-bg: #05e745;
    --color-sp5-dev-text: #222e4e;

    /* Interface */
    --color-border: var(--color-placeholder);
    --color-border-hover: var(--color-accent);
    --color-input-bg: var(--color-white);
    --color-input-disabled-bg: #E1E6F9;
    --color-input-border: #97ABD4;
    --color-input-text: var(--color-text);
    --color-label-text: var(--color-primary);
    --color-input-placeholder-text: var(--color-text-grey);
    --color-table-black: var(--color-text);
    --color-table-grey: var(--color-text-grey);
    --color-icon-grey: var(--color-text-grey);
    --color-icon--active: var(--color-accent);
    --thover: rgba(184, 198, 220, 0.22); /*transparent hover*/
    --trans: all 0.2s; /*transition delay*/
    --bshadow: 0 4px 4px rgba(0, 0, 0, 0.15); /*box shadow*/
    --pwshadow: 0 2px 8px rgba(0, 0, 0, 0.25); /*popup win shadow*/
    --modal-bg: linear-gradient(45deg, rgba(6, 102, 205, 0.3) 0%, rgba(59, 179, 240, 0.6) 100%);

    /* UI colors */
    --color-yellow: #ffb946;
    --color-orange: #f7980a;
    --color-red: #f7685b;
    --color-green: #2ed47a;
    --color-purple: #AC25FF;
    --color-blue: #1f39d7;
    --color-dark-blue: #334d6e;
    --color-light-blue: #2FB4FF;
    --color-light-grey-blue: #98A4C2;
    --color-border-orange: #CDCA8B;
    --color-border-purple: #AC25FF;

    /* Task colors */
    --color-task-backlog: #90a0b6;
    --color-task-orange: #FFB23F;
    --color-task-red: #f7685b;
    --color-task-green: #2ed47a;
    --color-task-purple: #AC25FF;
    --color-task-blue: #1f39d7;

    /* Buttons */
    --color-btn-bg: var(--color-primary);
    --color-btn-border: var(--color-primary);
    --color-btn-text: var(--color-white);
    --color-btn-ghost-text: var(--color-icon-primary);
    --color-btn-shadow: rgba(37, 193, 252, 0.4);

    /* Objects */
    --gf: 8px; /* grid flow */
    --gap: 16px; /* gap size */
    --header-height: 64px;
    --wid: 1200px; /* max-width of content */
}

/*  TECH
------- ------- ------- ------- ------- ------- ------- -------*/
* {
    box-sizing: border-box;
}

*, ::after, ::before {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    color: var(--color-text);
    font-family: var(--wf), Helvetica, Arial, sans-serif;
    font-size: 100%;
    background: var(--color-bg-light-blue);
    margin: 0;
    padding: 0;
}

.app {
    margin: 8px;
}

.wid {
    max-width: 1440px;
    min-width: 748px;
    margin: 0 auto;
}

.hide-on-mobile {
    display: block;
}

.show-on-mobile {
    display: none;
}


@media screen and (max-width: 767px) {
    .wid {
        max-width: 100%;
        min-width: 100%;
    }

    .hide-on-mobile {
        display: none;
    }

    .show-on-mobile {
        display: block;
    }
}


/* PADS */
.pad-1 {
    width: 100%;
    height: 1px;
}

.pad-4 {
    width: 100%;


    height: 4px;
}

.pad-1x {
    width: 100%;
    height: var(--gf);
}

.pad-2x {
    width: 100%;
    height: calc(var(--gf) * 2);
}

.pad-3x {
    width: 100%;
    height: calc(var(--gf) * 3);
}

.pad-4x {
    width: 100%;
    height: calc(var(--gf) * 4);
}

.pad-5x {
    width: 100%;
    height: calc(var(--gf) * 5);
}

.pad-6x {
    width: 100%;
    height: calc(var(--gf) * 6);
}

.pad-8x {
    width: 100%;
    height: calc(var(--gf) * 8);
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: var(--color-text);
    text-decoration: none;
    transition: all 0.3s;
}

a:hover {
    color: var(--color-link-hover);
    transition: all 0.3s;
}

/* DATA TABLE */
.dtable {
    width: 100%;
}

.dtable__header {
    font-weight: bold;
    font-size: 1.1em;
    color: var(--color-dark-blue);
    display: flex;
    background: var(--color-white);
    padding: 8px 0;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.dtable__body {
}

.dtable__footer {
    margin: 0 0 32px 0;
}

.dtable__body--dashed ~ .dtable__line:nth-child(even) {
    background: var(--color-bg-grey-light);
    border: 1px solid crimson;
}

.dtable__line {
    color: var(--color-table-grey);
    background: var(--color-bg-grey-light);
    font-size: 1em;
    display: flex;
    align-items: center;
    margin: 1px 0 0 0;
    padding: 8px 0;
    cursor: pointer;
    transition: all 0.2s;
    /*border: 1px solid var(--color-sp5-dev-bg);*/
    width: 100%;
}

.dtable__line:hover {
    background: var(--color-bg-grey) !important;
    transition: all 0.2s;
}

.dtable__line .ctbox {
    background: transparent;
}

[class*='tcell-'] {
    padding: 8px 4px;
}

.tcell-5 input[type="checkbox"] {
    margin: 0 16px;
}

.tcell-micro {
    width: 60px;
}

.tcell-5 {
    width: 5%;
}

.tcell-10 {
    width: 10%;
}

.tcell-15 {
    width: 15%;
}

.tcell-20 {
    width: 20%;
}

.tcell-40 {
    width: 40%;
}

.tcell-ellepsis {
    text-overflow: ellipsis;
}