@import url('/files/exo.css');
@import url('/files/google-icons.css');
@import url('/files/material-icons.css');

/* "Default" theme colors */
:root {
    --awt-primary1: #4fabbd;
    --awt-primary2: #58b6a3;
    --awt-comp1: #66b26a;
    --awt-comp2: #99e451;
    --awt-comp3: #ddfd51;
    --awt-comp4: #f4ff54;
    --awt-accent1: #ffde59;
    --awt-accent2: #ff914d;
    --awt-security: #b93d22;

    --btn-primary: #58b6a3;
    --btn-primary-hover: #4c9e8d;

    --input-label: #58b6a3;

    --awt-comp1-hover: #508c53;
    --awt-accent2-hover: #db7e44;
    --awt-security-hover: #912f1a;

    --body-bg: #f2f3f4;
    --body-text: #181818;
    --body-text-hover: rgba(0, 0, 0, 0.1);
    --body-text-hover2: rgba(0, 0, 0, 0.05);
    --body-contrast: #f2f3f4;

    --settings-pane: #ddd;

    --dropdown-bg: #dadada;

    --nav-color: #4fabbd;
    --nav-drop-bg: #f2f3f4;
    --nav-drop-text: #181818;
    --nav-icon-color: rgba(0, 0, 0, 0.54);

    --card-background: #f2f3f4;

    --background-image: url("/files/awt-background.png");

    --link-text: #039be5;
    --error-red: #f44336;

    --disabled-text: rgba(0, 0, 0, 0.42);

    --table-striping: rgba(0, 0, 0, 0.03);
    --table-row-underline: rgba(0, 0, 0, 0.12);
    --form-row-underline: #9e9e9e;

    --shadow-1: rgba(0, 0, 0, 0.14);
    --shadow-2: rgba(0, 0, 0, 0.12);
    --shadow-3: rgba(0, 0, 0, 0.2);
}

/* Original purple nav */
[data-theme="purple"] {
    --nav-color: #7c4dff;
}

/* Dark elements with white background */
[data-theme="dark-light"] {
    --awt-primary2: #262a2e;

    --nav-color: #343a40;

    --btn-primary: #343a40;
    --btn-primary-hover: #343a40;
}

/* Theme for Ciena build */
[data-theme="ciena"] {
    --awt-primary2: #96021b;

    --nav-color: #b9010e;

    --btn-primary: #96021b;
    --btn-primary-hover: #96021b;
}

/* Dark everything */
[data-theme="dark"] {
    --awt-primary2: #262a2e;

    --body-bg: #222629;
    --body-text: rgba(255, 255, 255, 0.78);

    --nav-color: #343a40;
    --nav-drop-bg: #222629;
    --nav-drop-text: rgba(255, 255, 255, 0.78);
    --nav-icon-color: rgba(255, 255, 255, 0.54);

    --dropdown-bg: #343a40;

    --card-background: #262a2e;
    --settings-pane: #444;
    --body-contrast: rgba(255, 255, 255, 0.78);

    --background-image: url("/files/awt-background-dark.png");

    --disabled-text: rgba(255, 255, 255, 0.58);

    --table-striping: rgba(255, 255, 255, 0.02);
    --table-row-underline: rgba(255, 255, 255, 0.2);

    --btn-primary: #343a40;
    --btn-primary-hover: #343a40;

    --error-red: #96021b;
}

th[role=columnheader] {
    cursor: pointer;
}

th[role=columnheader][data-sort-method=none] {
    cursor: auto !important;
}

th[aria-sort=ascending] i.down {
    display: inline-block !important;
}

th[aria-sort=descending] i.down {
    display: none !important;
}

th[aria-sort=ascending] i.up {
    display: none !important;
}

th[aria-sort=descending] i.up {
    display: inline-block !important;
}

th i {
    display: none !important;
    vertical-align: bottom;
}

th a i {
    display: inline-block !important;
}

::placeholder {
    color: var(--disabled-text);
}

.collapsible-body {
    padding: 20px;
}

.text-med {
    font-size: 1.2rem;
}

.text-big {
    font-size: 1.5rem;
}

html {
    font-family: Exo, serif !important;

    background-image: var(--background-image);
    background-position: center;
    background-size: 70%;
    background-attachment: fixed;

    color: var(--body-text);
    background-color: var(--body-bg);
}

button,input,optgroup,select,textarea {
    font-family: Exo, serif !important;
}

/* Clicking the label does not activate the input without this */
input[type="text"] + label {
    pointer-events: none;

    * {
        pointer-events: all;
    }
}

.collection .collection-item {
    border-bottom: 1px solid var(--table-row-underline) !important;
}

.collection {
    border: 1px solid var(--table-row-underline) !important;
}

.sidenav li>a {
    color: var(--body-text) !important;
}

.sidenav li>a>i {
    color: var(--nav-icon-color) !important;
}

/* Rule needed so sidenav doesn't auto-collapse on small screens */
@media only screen and (max-width: 992px) {
    .sidenav.sidenav-fixed {
        transform: translateX(0) !important;
    }
}

/* label color inside entry before its clicked into */
input[type=text]:not(.browser-default).validate+label,
input[type=number]:not(.browser-default).validate+label,
input[type=password]:not(.browser-default).validate+label {
    color: var(--disabled-text);
}

/* label color once its above the form entry box */
input[type=text]:not(.browser-default).validate+label.active,
input[type=number]:not(.browser-default).validate+label.active,
input[type=password]:not(.browser-default).validate+label.active {
    color: var(--body-text);
}

.input-field>label, .select-dropdown li.disabled>span {
    color: var(--disabled-text);
}

.input-field>label:not(.label-icon).active {
    color: var(--body-text);
}

.select-wrapper .caret {
    fill: var(--body-text);
}

/* text inside disabled form entries
   color of line below disabled form entries */
input[type=text]:not(.browser-default):disabled,
input[type=number]:not(.browser-default):disabled,
input[type=password]:not(.browser-default):disabled {
    color: var(--disabled-text);
    border-bottom-color: var(--form-row-underline);
}

/* text color inside form entry (while and after you type)
   color of line below form entries */
input[type=text]:not(.browser-default),
input[type=number]:not(.browser-default),
input[type=password]:not(.browser-default) {
    color: var(--body-text);
    border-bottom-color: var(--form-row-underline);
}

/* label text color while its clicked into before validation */
input[type=text]:not(.browser-default):focus:not([readonly])+label,
input[type=number]:not(.browser-default):focus:not([readonly])+label,
input[type=password]:not(.browser-default):focus:not([readonly])+label {
    color: var(--input-label);
}

/* label text color while its clicked into and its proven valid */
input[type=text]:not(.browser-default):focus.valid ~ label,
input[type=number]:not(.browser-default):focus.valid ~ label,
input[type=password]:not(.browser-default):focus.valid ~ label {
    color: #4caf50;
}

/* label text color while its clicked into and its proven invalid */
input[type=text]:not(.browser-default):focus.invalid ~ label,
input[type=number]:not(.browser-default):focus.invalid ~ label,
input[type=password]:not(.browser-default):focus.invalid ~ label {
    color: #f44336;
}

.divider {
    background-color: var(--disabled-text);
}

table.striped>tbody>tr:nth-child(odd) {
    background-color: var(--table-striping);
}

tr {
    border-color: var(--table-row-underline);
}

.card {
    background-color: var(--card-background);
    border-radius: 10px;
    box-shadow: 0 2px 2px 0 var(--shadow-1),0 3px 1px -2px var(--shadow-2),0 1px 5px 0 var(--shadow-3);
}

.modal {
    border-radius: 10px;
}

.card .card-action:last-child {
    border-radius: 0 0 10px 10px;
}

.card-primary2 {
    background-color: var(--awt-primary2) !important;
}

.card-primary2 .card-content {
    color: var(--body-contrast);
}

.error-red {
    background-color: var(--error-red) !important;
    color: var(--body-contrast);
}

.card-panel {
    box-shadow: 0 2px 2px 0 var(--shadow-1),0 3px 1px -2px var(--shadow-2),0 1px 5px 0 var(--shadow-3);
}

li:not(.active) .collapsible-header.last {
    border-radius: 0 0 10px 10px;
}

.tabs .tab a{
    color: var(--body-text);
    background-color: var(--body-text-hover2);
} /*Black color to the text*/

.tabs .tab a:hover {
    background-color: var(--body-text-hover);
    color: var(--body-text);
} /*Text color on hover*/

.tabs .tab a.active {
    background-color: var(--body-text-hover);
    color: var(--body-text);
} /*Background and text color when a tab is active*/

.tabs .indicator {
    background-color: var(--table-row-underline);
} /*Color of underline*/

.tabs .tab a:focus, .tabs .tab a:focus.active {
    background-color: var(--body-text-hover);
} /*Color right after click*/

@media only screen and (min-width: 1514px) {
    .row .col.xxl6 {
        width: 50%;
        margin-left: auto;
        left: auto;
        right: auto;
    }
}

.h1, h2, h3, h4, h5 {
    margin: 0;
}

.container {
    max-width: 100%;
    width: 100%;
    margin: 0;
    padding-left: 190px;
}

.inner-card {
    padding: 20px 20px;
}

.outer-card {
    margin: 20px 20px
}

a {
    color: var(--link-text);
}

.collection a.collection-item {
    background-color: transparent;
    color: var(--body-text);
}

.collection .collection-item.active {
    background-color: rgba(0, 0, 0, 0.54);
    color: var(--body-contrast);
}

.collection a.collection-item:not(.active):hover {
    background-color: var(--settings-pane);
}

nav {
    background-color: var(--nav-color);
    height: 64px !important;
}

nav .nav-wrapper {
    height: 64px !important;
}

.valign-wrapper {
    height: 100%
}

/* Set navbar icon height to inherit so they dont overflow their button */
nav .nav-wrapper i {
    height: inherit;
    line-height: inherit;
}

@media only screen and (max-width: 992px) {
    nav .brand-logo.left {
        left: 0 !important;
    }
}

#toast-container {
    top: 10%;
    left: 50%;
    right: auto;
    transform: translate(-50%, 0px);
}

.dropdown-content {
    background-color: var(--nav-drop-bg);
}

.collapsible-body {
    background-color: var(--nav-drop-bg) !important;
}

.modal {
    background-color: var(--body-bg);
}

i.right {
    margin-left: 8px;
}

.dropdown-content li>a, .dropdown-content li>span {
    color: var(--body-text);
}

.dropdown-content li:hover,
.dropdown-content li.active {
    background-color: var(--dropdown-bg);
}

.collapsible-body ul>li>a {
    color: var(--body-text);
}

.btn {
    background-color: var(--btn-primary);
}

.btn:hover {
    background-color: var(--btn-primary-hover);
}

.btn:focus {
    background-color: var(--btn-primary-hover);
}

.btn.green {
    background-color: var(--awt-comp1) !important;
}

.btn.green:hover {
    background-color: var(--awt-comp1-hover) !important;
}

.btn.red {
    background-color: #f44336 !important;
}

.btn.red:hover {
    background-color: #b82b21 !important;
}

.btn.orange {
    background-color: var(--awt-accent2) !important;
}

.btn.orange:hover {
    background-color: var(--awt-accent2-hover) !important;
}

.dropdown-trigger {
    padding-right: 8px;
    padding-left: 16px;
}

.awt-primary1-bg {
    background-color: var(--awt-primary1) !important;
}

.awt-primary1-text {
    color: var(--awt-primary1) !important;
}

.awt-primary2-bg {
    background-color: var(--awt-primary2) !important;
}

.awt-primary2-text {
    color: var(--awt-primary2) !important;
}

.awt-comp1-bg {
    background-color: var(--awt-comp1) !important;
}

.awt-comp1-text {
    color: var(--awt-comp1) !important;
}

.awt-comp2-bg {
    background-color: var(--awt-comp2) !important;
}

.awt-comp2-text {
    color: var(--awt-comp2) !important;
}

.awt-comp3-bg {
    background-color: var(--awt-comp3) !important;
}

.awt-comp3-text {
    color: var(--awt-comp3) !important;
}

.awt-comp4-bg {
    background-color: var(--awt-comp4) !important;
}

.awt-comp4-text {
    color: var(--awt-comp4) !important;
}

.awt-accent1-bg {
    background-color: var(--awt-accent1) !important;
}

.awt-accent1-text {
    color: var(--awt-accent1) !important;
}

.awt-accent2-bg {
    background-color: var(--awt-accent2) !important;
}

.awt-accent2-text {
    color: var(--awt-accent2) !important;
}

.awt-security-bg {
    background-color: var(--awt-security) !important;
}

.awt-security-text {
    color: var(--awt-security) !important;
}