/*#region themes*/

.theme-light {
    --bg: #FFFFFF;
    --font1: #424242;
    --font2: #757575;
    --font3: #616161;
    --accent: #1976D2; /* blue (700) */
    --accent-dark: #1565C0; /* blue (800) */
    --onaccent: #FFFFFF;
    --shadow: #DDDDDD;
    --border: #DDDDDD;
    --page-tab: #F5F5F5;
    --tab-hover: #EEEFF0;
    --tab-active: #E3F2FD; /* blue (50) */
    --link-header-hover: #424242;
    --alert-bg: #F5F5F5;
    --alert: #9C27B0; /* purple */
    --Modal-bg: #FFFFFF;
    --bell: #FF5722;
}

.theme-dark {
    --bg: #202124;
    --font1: #E2E2E2;
    --font2: #E2E2E2;
    --font3: #BDBDBD;
    --accent: #8AB4F8;
    --accent-dark: #73A5F7; /* made this up */
    --onaccent: #202124;
    --shadow: #1E1E1E; /* no shadow, essentially */
    --border: #3B3C3E;
    --page-tab: #292A2D;
    --tab-hover: #36373A;
    --tab-active: #394457;
    --link-header-hover: #FFFFFF;
    --alert-bg: #292A2D;
    --alert: #FFC107; /* amber */
    --Modal-bg: #202124;
    --bell: #FFEB3B;
}

.theme-superdark {
    --bg: #000000;
    --font1: #C8C8C8;
    --font2: #C8C8C8;
    --font3: #9A9A9A;
    --accent: #FBC02D;
    --accent-dark: #F9A825;
    --onaccent: #000000;
    --shadow: #0D0D0D;
    --border: #2A2A2A;
    --page-tab: #111111;
    --tab-hover: #1A1A1A;
    --tab-active: #22314A;
    --link-header-hover: #EAEAEA;
    --alert-bg: #111111;
    --alert: #D84315;
    --Modal-bg: #0A0A0A;
    --bell: #FBC02D;
}



/*#endregion*/

/*#region scrollbar */

/* width */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

/* Track */
::-webkit-scrollbar-track {
    background: var(--border);
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--font1);
}

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: var(--accent);
    }

/*#endregion*/

/*#region color*/

.accent {
    color: var(--accent);
}

.red {
    color: #F44336;
}

.yellow {
    color: #FFEB3B;
}

.green {
    color: #4CAF50;
}

.blue {
    color: #1976D2;
}

.lightblue {
    color: #BBDEFB;
}

.orange {
    color: #FF9800;
}

.amber {
    color: #FFC107;
}

.purple {
    color: #9C27B0;
}

.black {
    color: #424242;
}

.darkgrey {
    color: #757575;
}

.grey {
    color: #9E9E9E;
}

.lightgrey {
    color: #EEEFF0;
}

.white {
    color: #FFFFFF;
}

.pink {
    color: #E91E63;
}

.lime {
    color: #CDDC39;
}

.teal {
    color: #009688;
}

/* background-color */

.red_bg {
    background-color: #F44336;
}

.yellow_bg {
    background-color: #FFEB3B;
}

.green_bg {
    background-color: #4CAF50;
}

.blue_bg {
    background-color: #1976D2;
}

.lightblue_bg {
    background-color: #BBDEFB;
}

.orange_bg {
    background-color: #FF9800;
}

.amber_bg {
    background-color: #FFC107;
}

.purple_bg {
    background-color: #9C27B0;
}

.black_bg {
    background-color: #424242;
}

.darkgrey_bg {
    background-color: #757575;
}

.grey_bg {
    background-color: #9E9E9E;
}

.lightgrey_bg {
    background-color: #EEEFF0;
}

.white_bg {
    background-color: #FFFFFF;
}

/*#endregion*/

/*#region fonts*/

/* ---------------- */


/* these fonts match the theme and are stored in project, but they are not in use, so they are commented out. There are more commented out below in small groups

@font-face {
    font-family: "OpenSans-Bold";
    src: url("/AODMS/fonts/OpenSans/OpenSans-Bold.ttf");
}

@font-face {
    font-family: "OpenSans-BoldItalic";
    src: url("/AODMS/fonts/OpenSans/OpenSans-BoldItalic.ttf");
}

@font-face {
    font-family: "OpenSans-ExtraBold";
    src: url("/AODMS/fonts/OpenSans/OpenSans-ExtraBold.ttf");
}

@font-face {
    font-family: "OpenSans-ExtraBoldItalic";
    src: url("/AODMS/fonts/OpenSans/OpenSans-ExtraBoldItalic.ttf");
}

@font-face {
    font-family: "OpenSans-Italic";
    src: url("/AODMS/fonts/OpenSans/OpenSans-Italic.ttf");
}

@font-face {
    font-family: "OpenSans-Light";
    src: url("/AODMS/fonts/OpenSans/OpenSans-Light.ttf");
}

@font-face {
    font-family: "OpenSans-LightItalic";
    src: url("/AODMS/fonts/OpenSans/OpenSans-LightItalic.ttf");
}

@font-face {
    font-family: "OpenSans-Regular";
    src: url("/AODMS/fonts/OpenSans/OpenSans-Regular.ttf");
}

@font-face {
    font-family: "OpenSans-SemiBold";
    src: url("/AODMS/fonts/OpenSans/OpenSans-SemiBold.ttf");
}

@font-face {
    font-family: "OpenSans-SemiBoldItalic";
    src: url("/AODMS/fonts/OpenSans/OpenSans-SemiBoldItalic.ttf");
}

*/

/* ---------------------------------------------------------------------------- */

/*
@font-face {
    font-family: "Roboto-Black";
    src: url("/AODMS/fonts/Roboto/Roboto-Black.ttf");
}

/*
@font-face {
    font-family: "Roboto-BlackItalic";
    src: url("/AODMS/fonts/Roboto/Roboto-BlackItalic.ttf");
}

*/

@font-face {
    font-family: "Roboto-Bold";
    src: url("/AODMS/fonts/Roboto/Roboto-Bold.ttf");
}

/*
@font-face {
    font-family: "Roboto-BoldItalic";
    src: url("/AODMS/fonts/Roboto/Roboto-BoldItalic.ttf");
}

*/

@font-face {
    font-family: "Roboto-Italic";
    src: url("/AODMS/fonts/Roboto/Roboto-Italic.ttf");
}

/*
@font-face {
    font-family: "Roboto-Light";
    src: url("/AODMS/fonts/Roboto/Roboto-Light.ttf");
}

@font-face {
    font-family: "Roboto-LightItalic";
    src: url("/AODMS/fonts/Roboto/Roboto-LightItalic.ttf");
}
*/

@font-face {
    font-family: "Roboto-Medium";
    src: url("/AODMS/fonts/Roboto/Roboto-Medium.ttf");
}

@font-face {
    font-family: "Roboto-MediumItalic";
    src: url("/AODMS/fonts/Roboto/Roboto-MediumItalic.ttf");
}

@font-face {
    font-family: "Roboto-Regular";
    src: url("/AODMS/fonts/Roboto/Roboto-Regular.ttf");
}

/*
@font-face {
    font-family: "Roboto-Thin";
    src: url("/AODMS/fonts/Roboto/Roboto-Thin.ttf");
}

@font-face {
    font-family: "Roboto-ThinItalic";
    src: url("/AODMS/fonts/Roboto/Roboto-ThinItalic.ttf");
}

*/

/* ---IN USE (signature font)------------- */
@font-face {
    font-family: "Yellowtail-Regular";
    src: url("/AODMS/fonts/Yellowtail/Yellowtail-Regular.ttf");
}

/*#endregion*/

/*#region text sizes/styles */
a, p, div {
    font-family: Roboto-Regular,sans-serif;
    color: var(--font1);
    font-size: 13px;
    line-height: 140%;
}

.m {
    font-family: Roboto-Medium,sans-serif;
}

.b {
    font-family: Roboto-Bold,sans-serif;
}

.i {
    font-family: Roboto-Italic,sans-serif;
}

.font3 {
    color:var(--font3);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--font1);
    font-weight: normal;
    margin: 0px;
}

h1 {
    font-size: 34px;
    font-family: Roboto-Bold,sans-serif;
}

h2 {
    font-size: 20px;
    font-family: Roboto-Medium,sans-serif;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 12px;
    margin-left: 0px;
}

h3 {
    font-size: 13px;
    font-family: Roboto-Medium;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 4px;
    margin-left: 0px;
}

h4 {
    font-size: 13px;
    font-family: Roboto-Medium;
    text-align: center;
    padding: 20px;
    text-transform: uppercase;
}


.txt-small {
    font-size: 11px;
}

.txt-reg {
    font-size: 16px;
}

.txt-medium {
    font-size: 28px;
}

.txt-large {
    font-size: 64px;
}

span.AODMS-title {
    font-size: 27px;
    font-family: Roboto-Medium,sans-serif;
    color: var(--font2);
    float: left;
    margin-top: 17px;
    margin-right: 8px;
}

span.server-label {
    font-size: 24px;
    margin-top: 18px;
    margin-right: 8px;
    float: left;
}

span.version-label {
    font-size: 16px;
    margin-top: 20.5px;
    margin-right: 8px;
    float: left;
}

#search {
    font-family: Roboto-Regular;
    font-size: 17px;
    border-radius: 4px;
    background-color: var(--page-tab);
    color: var(--font2);
    border: solid 1px var(--border);
    padding: 10px;
    transition: 0.2s;
    width: 400px;
    position: relative;
    top: 4px;
    padding-top: 4px;
    text-align: left;
    text-transform: none;
    margin: 0px;
}

    #search:hover {
        background-color: var(--tab-hover);
    }

.my-name {
    font-size: 19px;
    color: var(--font2);
    position: relative;
    top: 1px;
    transition:0.2s;
}

    .my-name:hover {
        color: var(--link-header-hover);
        transition:0.2s;
    }

span.tag {
    padding: 6px;
    font-size: 13px;
    font-family: Roboto-Regular;
    border-radius: 6px;
    display: inline-block;
    margin-bottom: 2px;
    margin-top: 0px;
}

span.smalltag {
    padding: 2px;
    padding-left: 6px;
    padding-right: 6px;
    border-radius: 4px;
    display: inline-block;
    margin-left: 6px;
}

span.apptag {
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 4px;
    padding-right: 4px;
    border-radius: 4px;
    display: inline-block;
    font-size: 11px;
    position: relative;
    top: -4px;
}

    span.apptag.beta {
        color: #FFFFFF;
        background-color: #1976D2;
    }

    span.apptag.test {
        color: #FFFFFF;
        background-color: #9C27B0;
    }

    span.apptag.dev {
        color: #424242;
        background-color: #FFC107;
    }

span.circle {
    border-radius: 50%;
    display: inline-block;
    line-height: 40px;
    margin-right: 5px;
    text-align: center;
    width: 40px;
    font-size: 14pt;
}

.error-status {
    font-size: 35px;
}

ul {
    list-style-type: disc;
    color: var(--font1);
    font-family: Roboto-Regular,sans-serif;
    font-size: 13px;
}

ol {
    color: var(--font1);
    font-family: Roboto-Regular,sans-serif;
    font-size: 13px;
}

li {
    margin: 2px;
}

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

    a.link_accent:hover {
        color: var(--accent-dark);
        cursor: pointer;
    }

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

    a.link_alert:hover {
        cursor: pointer;
    }

a.link_red {
    text-decoration: none;
    color: #F44336;
}

    a.link_red:hover {
        color: #E57373;
        cursor: pointer;
    }

a.link_yellow {
    text-decoration: none;
    color: #FFEB3B;
}

    a.link_yellow:hover {
        color: #FFF176;
        cursor: pointer;
    }

a.link_blue {
    text-decoration: none;
    color: #1976D2;
}

    a.link_blue:hover {
        color: #42A5F5;
        cursor: pointer;
    }

a.link_green {
    text-decoration: none;
    color: #4CAF50;
}

    a.link_green:hover {
        color: #81C784;
        cursor: pointer;
    }

a.link_orange {
    text-decoration: none;
    color: #FF9800;
}

    a.link_orange:hover {
        color: #FFB74D;
        cursor: pointer;
    }

a.link_purple {
    text-decoration: none;
    color: #9C27B0;
}

    a.link_purple:hover {
        color: #BA68C8;
        cursor: pointer;
    }

a.link_darkgrey {
    text-decoration: none;
    color: #757575;
}

    a.link_darkgrey:hover {
        color: #9E9E9E;
        cursor: pointer;
    }

a.link_black {
    text-decoration: none;
    color: #424242;
}

    a.link_black:hover {
        color: #757575;
        cursor: pointer;
    }

a.link_white {
    text-decoration: none;
    color: #FFFFFF;
}

    a.link_white:hover {
        cursor: pointer;
    }

span.link-header {
    color:var(--font2);
    transition:0.2s;
}
    span.link-header:hover {
        color: var(--link-header-hover);
        transition: 0.2s;
    }

var {
    color: #4CAF50;
}

.block-link {
    margin-right:10px;
    padding:4px 6px 4px 6px;
    border-radius: 6px;
    background-color: var(--page-tab);
}

    .block-link:hover:not(.block-link-active) {
        background-color: var(--tab-hover);
    }

.block-link-active {
    color: var(--accent);
    background-color: var(--tab-active);
}

/* #region block colors */

.block-1 {
    color: #424242;
    background-color: #82b1ff; /* blue */
}

.block-2 {
    color: #424242;
    background-color: #ffff8d; /* yellow */
}

.block-3 {
    color: #424242;
    background-color: #b9f6ca; /* green */
}

.block-4 {
    color: #424242;
    background-color: #ff8a80; /* red */
}

.block-5 {
    color: #424242;
    background-color: #ea80fc; /* purple */
}

.block-6 {
    color: #424242;
    background-color: #ffd180; /* orange */
}

.block-7 {
    color: #424242;
    background-color: #a7ffeb; /* teal */
}

.block-8 {
    color: #424242;
    background-color: #ffccbc; /* deep orange */
}

.block-9 {
    color: #424242;
    background-color: #84ffff; /* cyan */
}

.block-10 {
    color: #424242;
    background-color: #cfd8dc; /* grey */
}

/* #endregion */


div.tagBorder {
    border: solid 2px;
    border-radius: 12px;
    display: inline-flex;
    padding: 2px 10px 2px 10px;
    margin-right: 6px;
    margin-bottom: 8px;
    white-space: nowrap;
}

a.tagText {
    height: 16px;
    position: relative;
    top: 4px;
    margin-right: 10px;
    overflow: hidden;
}

div.form-banner {
    padding: 10px;
    border-radius: 6px;
    text-align: center;
    font-size: 16px;
    font-family: Roboto-Medium,sans-serif;
    margin-right: 20px;
}

div.code {
    display: inline;
    font-family: 'Courier New';
    white-space: nowrap;
    overflow: scroll;
    color: #4CAF50;
}

/*#endregion*/

/*#region events */

.mop:hover {
    cursor: pointer;
}

.highlighted {
    background-color: var(--tab-active);
}

.highlighted2 {
    background-color: var(--tab-hover);
}

.barrel-roll {
    transition: transform 4s ease;
    transform: rotate(360deg);
}

/*#endregion*/

/*#region grid*/

/*#region grid-layout*/

div.layout-header {
    grid-area: header;
    /* make this its own grid */

    display: grid;
    grid-template-columns: 600px auto 600px; /* could be auto auto auto, but the left changes sizes when spinner is on (review that) */

    height: 48px; /* total is 48 + 16 = 64px */
    padding: 8px 20px 8px 20px;
    min-width: 1240px; /* accounts for 40 px of padding */
    border-bottom: solid 1px var(--border);
}

div.layout-menu {
    grid-area: menu;
    height: calc(100vh - 242px);
    overflow: hidden;
    padding-bottom: 100px;
}

    div.layout-menu:hover {
        overflow-y: scroll;
    }

div.layout-main {
    grid-area: main;
    height: calc(100vh - 152px); /* accounts for padding top 10 */
    overflow: hidden;
    padding-top: 10px;
}

div.layout-footer {
    grid-area: footer;
    height: 76px;
    overflow: hidden;
    min-width: 1280px;
    border-top: solid 1px var(--border);
}

.layout-footer-clock {
    height: 60px;
    position: relative;
    float: left;
    border-right: solid 1px var(--border);
    text-align: center;
    padding: 8px 12px 8px 12px;
}

.layout-footer-link:hover {
    transition: 0.2s;
    cursor: pointer;
    background-color: var(--page-tab);
}

.ViewBox {
    border: solid 1px var(--border);
    display: inline-block;
    padding: 10px 16px 10px 16px;
    position: relative;
    top: 1px;
    text-align: center;
    transition: 0.2s;
}

    .ViewBox:hover {
        cursor: pointer;
    }

.layout-footer-section {
    height: 60px;
    position: relative;
    float: left;
    border-right: solid 1px var(--border);
    text-align: center;
    padding: 8px 12px 8px 12px;
}

div.grid-layout-fullwidth {
    display: grid;
    grid-template-areas: 'header' 'main';
}

div.grid-layout {
    display: grid;
    grid-template-areas: 'header header' 'menu main' 'footer footer';
    grid-template-columns: 282px auto;
}

/* page layouts. complicated. */

div.main-master-0 { /* sits inside #main. Holds big title, sub tabs, content (Example: Home) */
    margin-left: 10px;
    margin-top: 12px;
}

div.main-master-1 { /* sits inside #main. Holds app tabs, sub tabs, content (Example: People) */
    margin-left: 10px;
}

div.main-master-x-1 {
    height: calc(100vh - 198px);
}

div.main-master-x-1-1 {
    padding-top: 16px;
    padding-bottom: 200px;
    overflow-y: scroll;
    height: calc(100vh - 414px);
}

div.main-master-x-1-2 { /* for use on 'inbox' grid */
    overflow-y: hidden;
    height: calc(100vh - 198px);
}

div.main-master-x-1-3 { /* for use with sticky tables, see MTL */
    padding-top: 16px;
    padding-bottom: 0px;
    overflow-y: scroll;
    height: calc(100vh - 214px);
}

div.main-master-x-1-4 { /* for use with sticky tables and inbox */
    padding-top: 16px;
    padding-bottom: 0px;
    overflow-y: scroll;
    height: calc(100vh - 231px);
}

/*#endregion*/

/*#region grid-inbox (styled like outlook inboxes with viewer)*/

.inbox-container { /* whole page */
    display: grid;
    grid-template-columns: 300px auto;
    padding: 0px;
    margin-top: 16px;
    height: calc(100vh - 215px);
    width: calc(100vw - 293px);
    border-left: solid 1px var(--border);
    border-top: solid 1px var(--border);
    border-top-left-radius: 6px;
}

.inbox-col {
    padding: 10px 10px 200px 10px;
    overflow-y: scroll;
    overflow-x: hidden;
}

#inbox-contents {
    border-left: none;
}

.inbox-title {
    font-size: 13px;
    font-family: Roboto-Medium,sans-serif;
    color: var(--font1);
    margin-bottom: 2px;
    padding: 10px;
}

.inbox-sub {
    font-size: 12.5px;
    font-family: Roboto-Medium,sans-serif;
    color: var(--font1);
    margin-bottom: 2px;
    padding-left: 10px;
}

/* with counter */

.inbox-label {
    border-radius: 6px;
    margin-bottom: 2px;
    padding: 10px 20px 10px 25px;
    display: grid;
    grid-template-columns: auto auto;
    transition:0.2s;
}

    .inbox-label-head {
        font-family: Roboto-Medium,sans-serif;
        padding:10px;
    }

    .inbox-label > div:nth-child(2) {
        text-align: right;
    }

    .inbox-label:hover:not(.inbox-label-active) {
        background-color: var(--tab-hover);
        transition: 0.2s;
    }

    .inbox-label.nocounter {
        grid-template-columns: auto;
    }

.inbox-label-active {
    background-color: var(--tab-active);
    color: var(--accent);
}

.inbox-note {
    border-radius: 6px;
    margin: 10px 0px 2px 0px;
    padding: 10px;
    border: solid 1px var(--border);
}



/*#endregion*/

/*#region grid-container*/

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
    margin-right: 20px;
    column-gap: 30px;
}

.grid-c {
    border-radius: 6px;
    border: solid 1px var(--border);
    margin-bottom: 30px;
    padding: 10px;
}

.grid-c-noborder {
    border: 1px transparent;
    margin-bottom: 30px;
    padding: 10px;
}

/*#endregion*/

/*#endregion*/

/*#region form elements*/

form {
    margin-bottom: 30px;
}

.Enabled {
    font-family: Roboto-Regular;
    font-size: 13px;
    border-radius: 4px;
    background-color: var(--page-tab);
    color: var(--font1);
    border: solid 1px var(--border);
    padding: 10px;
    transition: 0.2s;
}

    .Enabled:focus {
        color: var(--accent);
        border-color: var(--accent);
        outline: none;
    }



.Readonly {
    font-family: Roboto-Regular;
    font-size: 13px;
    border-radius: 4px;
    background-color: transparent;
    color: var(--font1);
    border: solid 1px var(--border);
    padding: 10px;
    outline: none;
    cursor: default;
}

.filter {
    font-family: Roboto-Regular;
    font-size: 13px;
    border-radius: 4px;
    color: var(--font1);
    background-color: var(--page-tab);
    border: none;
    padding: 10px;
    margin-right: 10px;
    width: 300px;
    outline: none; /* chrome blue border */
}

select:hover {
    cursor: pointer;
}

textarea {
    min-width: 600px;
    min-height: 30px;
    resize: vertical;
}

    textarea.max {
        width: 800px;
        /*height:100px; */

        min-width: 600px;
        max-width: 1200px;
        /* max-height:500px; */

    }

button {
    font-size: 13px;
    font-family: Roboto-Medium,sans-serif;
    text-transform: uppercase;
    padding: 12px 24px;
    border: none;
    border-radius: 4px;
    margin-right: 10px;
    transition: 0.2s;
    white-space: nowrap;
}

    button:hover {
        cursor: pointer;
    }

    button.save {
        background-color: var(--accent);
        color: var(--onaccent);
    }

        button.save:hover {
            background-color: var(--accent-dark);
        }

    button.other {
        background-color: #EEEEEE;
        color: #424242;
    }

        button.other:hover {
            background-color: #DDDDDD;
        }

    button.delete {
        background-color: #F44336;
        color: var(--font1);
    }

        button.delete:hover {
            background-color: #E53935;
        }

    button.add {
        background-color: #4CAF50;
        color: var(--font1);
    }

        button.add:hover {
            background-color: #43A047;
        }

    button.special {
        background-color: #4CAF50;
        color: #FFFFFF;
    }

        button.special:hover {
            background-color: #43A047;
        }

    button.sign {
        background-color: #673AB7;
        color: #FFFFFF;
    }

        button.sign:hover {
            background-color: #512DA8;
        }

    button.continue {
        background-color: var(--accent);
        color: var(--onaccent);
    }

        button.continue:hover {
            background-color: var(--accent-dark);
        }

    button.random {
        background-color: var(--bg);
        border: solid 1px var(--accent);
        color: var(--accent);
        padding-top: 11px; /* 1px less to account for border */
        padding-bottom: 11px;
    }

        button.random:hover {
            border: solid 1px var(--accent-dark);
            color: var(--accent-dark);
            transition: 0.2s;
        }

            button.random:hover span.mdi {
                color: var(--accent-dark);
                transition: 0.2s;
            }

        button.random span:last-child {
            position: relative;
            top: -4px;
            margin-left: 8px;
        }

    button.randomGreen {
        background-color: var(--bg);
        border: solid 1px #4CAF50;
        color: #4CAF50;
        padding-top: 11px; /* 1px less to account for border */
        padding-bottom: 11px;
    }

        button.randomGreen:hover {
            border: solid 1px #43A047;
            color: #43A047;
            transition:0.2s;
        }

            button.randomGreen:hover span.mdi {
                color: #43A047;
                transition: 0.2s;
            }

        button.randomGreen span:last-child {
            position: relative;
            top: -4px;
            margin-left: 8px;
        }

    button.randomRed {
        background-color: var(--bg);
        border: solid 1px #F44336;
        color: #F44336;
        padding-top: 11px; /* 1px less to account for border */
        padding-bottom: 11px;
    }

        button.randomRed:hover {
            border: solid 1px #E53935;
            color: #E53935;
            transition:0.2s;
        }

            button.randomRed:hover span.mdi {
                color: #E53935;
                transition: 0.2s;
            }

        button.randomRed span:last-child {
            position: relative;
            top: -4px;
            margin-left: 8px;
        }

    button.randomOrange {
        background-color: var(--bg);
        border: solid 1px #FF9800;
        color: #FF9800;
        padding-top: 11px; /* 1px less to account for border */
        padding-bottom: 11px;
    }

        button.randomOrange:hover {
            border: solid 1px #FFB74D;
            color: #FFB74D;
            transition: 0.2s;
        }

            button.randomOrange:hover span.mdi {
                color: #FFB74D;
                transition:0.2s;
            }

        button.randomOrange span:last-child {
            position: relative;
            top: -4px;
            margin-left: 8px;
        }

    button.randomGrey {
        background-color: var(--bg);
        border: solid 1px #757575;
        color: #757575;
        padding-top: 11px; /* 1px less to account for border */
        padding-bottom: 11px;
    }

        button.randomGrey:hover {
            border: solid 1px #757575;
            color: #757575;
            transition:0.2s;
        }

            button.randomGrey:hover span.mdi {
                color: #757575;
                transition: 0.2s;
            }

        button.randomGrey span:last-child {
            position: relative;
            top: -4px;
            margin-left: 8px;
        }

    button.filter-shortcut {
        background-color: var(--page-tab);
        color: var(--font1);
        font-family: Roboto-Regular;
        text-transform: none;
    }

        button.filter-shortcut:hover {
            background-color: var(--tab-hover);
        }


    button.link {
        background-color: transparent;
        border: none;
        color: var(--accent);
        font-size: 12pt;
        padding: 0px;
    }

        button.link:hover {
            color: var(--accent-dark);
            transition: 0.2s;
        }

        button.link span:first-child {
            padding-right: 10px;
        }

        button.link span:last-child {
            font-family: Roboto-Regular,sans-serif;
            text-transform: none;
            position: relative;
            top: -8px;
        }


    button:focus {
        outline: none; /* chrome blue border */
    }

/*#region toggle*/

.checkboxHolder, .radioHolder {
    
    height: 24px;
}

    .checkboxHolder:hover .toggle-label {
        font-family: 'Roboto-Medium';
    }

    .radioHolder:hover .toggle-label {
        font-family: 'Roboto-Medium';
    }

.checkboxHolder-readonly, .radioHolder-readonly {
    height: 24px;
}

.checkbox, .radio {
    display: inline-block;
    height: 24px;
    width: 24px;
    position: relative;
    margin-right: 6px;
}

.toggle-label {
    position: relative;
    top: -4px;
    left: -3px;
    font-size: 13px;
}

.button-group button {
    background-color: var(--page-tab);
    color: var(--font1);
    border-radius: unset;
    margin: -2px; /* seems there is some default margin of 1-4px all around */
}

    .button-group button:first-of-type {
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
    }

    .button-group button:last-of-type {
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
    }

    .button-group button:hover {
        background-color: var(--tab-hover);
    }

.button-group-selected {
    background-color: var(--tab-active) !important;
}

.button-group .button-group-small {
    font-size:8pt;
    padding:6px 8px 6px 8px;
    margin:0px;
}

/* file upload */

input[type="file"]::file-selector-button {
    font-size: 13px;
    font-family: Roboto-Medium,sans-serif;
    text-transform: uppercase;
    padding-left: 24px;
    padding-right: 24px;
    border-radius: 4px;
    margin-right: 10px;
    transition: 0.2s;
    white-space: nowrap;
    background-color: var(--bg);
    border: solid 1px var(--accent);
    color: var(--accent);
    padding-top: 11px; /* 1px less to account for border */
    padding-bottom: 11px;
}

    input[type="file"]::file-selector-button:hover {
        cursor: pointer;
        border: solid 1px var(--accent-dark);
        color: var(--accent-dark);
    }

/* end file upload */

.slider {
    -webkit-appearance: none;
    appearance: none;
    width: 180px;
    height: 10px;
    border-radius: 5px;
    background: var(--border);
    outline: none;
    
    -webkit-transition: .2s;
    transition: .2s;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
}

.slider::-webkit-slider-thumb:hover {
    background: var(--accent-dark);
    transition: 0.2s;
}

/*#endregion*/

/*#endregion*/

/*#region layout*/

body {
    background-color: var(--bg);
    margin: 0px;
    font-family: Roboto-Regular,sans-serif;
    font-size: 13px;
    overflow: hidden;
    transition: 0.2s;
}

.shadow {
    box-shadow: 0px 1px 3px var(--shadow);
}

div.list-in-td {
    display: block;
    margin-bottom: 8px;
    padding: 8px;
    border: solid 1px var(--border);
    border-radius: 4px;
}

#functionDone {
    display: inline;
    position: absolute;
    top: 73px;
    height: 40px;
    width: 0px;
    right: 0px;
    background-color: #4CAF50;
    overflow: hidden;
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
    color: #F0F0F0;
    font-family: Roboto-Regular;
}

    #functionDone > span {
        color: #F0F0F0;
        font-family: Roboto-Medium;
        font-size: 13px;
        position: relative;
        top: 11px;
        left: 20px;
    }

/*#region LOADING */

div.refresh {
    display: inline-block;
    width: 32px;
    height: 32px;
}



/*#endregion*/

/*#region digital signature (dig-sig)*/

.dig-sig {
    display:inline-block;
    border-radius:4px;
    text-align:center;
}

.dig-sig-title {
    color:#FFFFFF;
    font-size:13px;
    background-image: linear-gradient(#B39DDB, #673AB7);
    padding:2px 12px 0px 12px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.dig-sig-name {
    font-size:13px;
    padding:4px 12px 2px 12px;
}

.dig-sig-date {
    font-size:11px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    padding:2px 12px 4px 12px;
}

.dig-sig-name, .dig-sig-date {
    background-color:#C1C4E9;
    color:#424242;
}




/*#endregion*/

/*#region info*/

div.alert {
    position: relative;
    display: inline-block;
    border-radius: 6px;
    margin-right: 20px;
    margin-bottom: 12px;
    max-width: 600px;
    min-width: 400px;
    min-height: 70px;
    left: 2px; /* to make way for the 2px shadow */

    background-color: var(--alert-bg);
    box-shadow: 0px 2px 2px var(--shadow);
}

    div.alert span.icon {
        position: relative;
        top: 10px;
        left: 20px;
        color: #FFFFFF;
        float: left;
    }

    div.alert span.txt-reg {
        position: relative;
        top: 16px;
        left: 5px;
        margin-left: 34px;
    }

div.alertcontent {
    position: relative;
    font-family: Roboto-Regular;
    margin-top: 20px;
    margin-left: 67px;
    margin-right: 24px;
    margin-bottom: 12px;
    padding-top: 0px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 00px;
}

div.alert ul {
    margin: 0px;
    padding-left: 18px;
    font-family: Roboto-Regular;
}

div.info {
    color: var(--alert);
}

    div.info span {
        color: var(--alert);
    }

    div.info div {
        color: var(--alert);
    }

    div.info ul {
        color: var(--alert);
    }

    div.info span.icon {
        color: var(--alert);
    }

div.good {
    color: #4CAF50;
}

    div.good span {
        color: #4CAF50;
    }

    div.good div {
        color: #4CAF50;
    }

    div.good ul {
        color: #4CAF50;
    }

    div.good span.icon {
        color: #4CAF50;
    }

div.stop {
    color: #F44336;
}

    div.stop span {
        color: #F44336;
    }

    div.stop div {
        color: #F44336;
    }

    div.stop ul {
        color: #F44336;
    }

    div.stop span.icon {
        color: #F44336;
    }

div.caution {
    color: #FF9800;
}

    div.caution span {
        color: #FF9800;
    }

    div.caution div {
        color: #FF9800;
    }

    div.caution ul {
        color: #FF9800;
    }

    div.caution span.icon {
        color: #FF9800;
    }

div.field-info {
    width:800px;
}

#banner {
    height: 40px;
    width: 100%;
    overflow: hidden;
    position: absolute;
    bottom:77px;
    background-color:#B71C1C;
    z-index:2;
    display:none;
  }
  
  #banner div {
    display: block;
    position: absolute;
    top:11px;
    animation: bannerKF 40s linear infinite;
  }
  
  #banner span {
    float: left;
    color:#FFFFFF;
    font-size: 16px;
    white-space: nowrap;
  }
  
  /* this is tuned based on the length of the AODMS mx message. It's scrolling not to -100%, but just -80% so that it shortens the wait on the next loop */
  @keyframes bannerKF {
    0% { left: 100%; }
    100% { left: -80%; }
  }

/*#endregion*/

/*#region splash*/

#splash_1 {
    height: calc(100vh);
    width: calc(100vw);
    position: fixed;
    z-index: 3;
    overflow-y: hidden;
    background-color: var(--bg);
}

#splash_1a {
    position: relative;
    top: calc(50vh - 150px);
    text-align: center;
}

#splash_progress_bg {
    position: relative;
    left: calc(50vw - 150px);
    width: 300px;
    height: 4px;
    margin-bottom: 15px;
    background-color: var(--tab-hover);
}

#splash_progress_fill {
    height: 100%;
    width: 0px;
    background-color: var(--accent);
}

#splash_1b {
    font-size: 19px;
}

#splash_2 {
    height: calc(100vh);
    width: calc(100vw);
    position: fixed;
    z-index: 3;
    overflow-y: hidden;
    background-color: var(--bg);
}

#Xmas {
    height: 69px;
    width: calc(100vw);
    position: fixed;
    z-index: 0;
    overflow-y: hidden;
    background-image:url('/AODMS/img/christmas_lights.gif');
}

#darkscreen {
    display: none;
    position: fixed;
    height: calc(100vh);
    width: calc(100vw);
    z-index: 2;
    overflow-y: hidden;
    background-color: #000000;
    opacity: 0.5;
}

#window_width_notice {
    display: none;
    position: fixed;
    z-index: 2;
    background-color: var(--bg);
    height: calc(100vh);
    width: calc(100vw);
    text-align: center;
}

    #window_width_notice div {
        position: relative;
        top: calc(50vh - 150px);
        left: calc(50vw - 110px);
        width: 220px;
        height: 300px;
        text-align: center;
    }

/*#endregion*/

/*#region tour*/

#tour {
    display: none;
    position: absolute;
    background-color: #1565C0;
    color: #FFFFFF;
    padding: 10px;
    max-width: 300px;
    z-index: 100;
    border-radius: 4px;
}

#tour_pointer_up {
    position: absolute;
    top: -16px;
    right: 0px;
}

#tour_pointer_down {
    position: absolute;
    bottom: -16px;
    left: 0px;
}

#tour_pointer_left {
    position: absolute;
    top: 0px;
    left: -16px;
}

#tour_pointer_right {
    position: absolute;
    bottom: 0px;
    right: -16px;
}

/*#endregion*/

/*#region Modal*/

#ModalProgress-holder {
    display: none;
    align-items: center;
    position: fixed;
    top: 0px;
    left: calc(50vw - 200px);
    width: 400px;
    height: 100%;
    z-index: 2;
}

#ModalProgress {
    width: 360px;
    padding: 20px;
    padding-bottom: 14px;
    background-color: var(--Modal-bg);
    border-radius: 4px;
    text-align: center;
}

#ModalProgressbar {
    position: relative;
    width: 100%;
    height: 4px;
    background-color: var(--tab-hover);
}

#ModalProgressbar-fill {
    height: 100%;
    width: 0%;
    background-color: var(--accent);
}

#ModalSmall-holder {
    display: none;
    align-items: center;
    position: fixed;
    top: 0px;
    left: calc(50vw - 200px);
    width: 400px;
    height: 100%;
    z-index: 3;
}

#ModalSmall {
    width: 360px;
    padding: 20px;
    padding-bottom: 19px;
    background-color: var(--Modal-bg);
    border-radius: 4px;
}

#ModalSmall-title {
    font-size: 14pt;
    font-family: Roboto-Medium,sans-serif;
    color: var(--font1);
    padding-bottom: 14px;
}

#ModalSmall-msg {
    color: var(--font1);
    padding-bottom: 20px;
}

#ModalSmall-buttons {
    text-align: right;
    height: 46px;
}

#ModalBig-holder {
    display: none;
    align-items: center;
    position: fixed;
    top: 0px;
    left: calc(50vw - 500px);
    width: 1000px;
    height: 100%;
    z-index: 3;
}

#ModalBig {
    width: 1000px;
    position: relative;
    top: -1200px;
}

#ModalBig-title {
    display: block;
    background-color: var(--page-tab);
    font-size: 16pt;
    font-family: Roboto-Medium,sans-serif;
    color: var(--font1);
    padding: 20px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom: solid 1px var(--border);
}

#ModalBig-page {
    display: block;
    background-color: var(--Modal-bg);
    color: #424242;
    font-size: 12pt;
    padding: 20px;
    height: 500px;
    overflow-y: scroll;
}

#ModalBig-buttons {
    display: block;
    /* corrects a 1px gap between 'page' and 'buttons' */
    position: relative;
    top: -1px;
    background-color: var(--page-tab);
    text-align: right;
    padding: 20px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-top: solid 1px var(--border);
}

div.c_ModalBig {
    display: block;
    position: relative;
    margin-right: 20px;
    padding: 10px;
    border-radius: 6px;
    border: solid 1px var(--border);
    margin-bottom: 12px;
}

ul.ModalSmall_invalid {
    list-style-type: none;
    list-style-position: inside;
    padding: 0px;
    margin-top: 0px;
}

li.ModalSmall_invalid {
    background-color: #FFCC80;
    border-radius: 4px;
    padding: 10px;
    margin-left: 0px;
    margin-bottom: 12px;
    color: #424242;
}

/*#endregion*/

/*#region nav */




.nav_left_title {
    font-size: 13px;
    font-family: Roboto-Medium,sans-serif;
    color: var(--font2);
    text-transform: uppercase;
    padding-left: 16px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.nav_left_tab {
    padding-top: 7px;
    padding-bottom: 7px;
    padding-left: 20px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    line-height: normal;
    position: relative;
    transition:0.2s;
}

.nav_left_icon {
    position: relative;
    top: 1px;
    margin-right: 12px;
}

.nav_left_tab_label {
    font-size: 13px;
    font-family: Roboto-Regular,sans-serif;
    position: relative;
    top: -4px;
    margin-right: 8px;
}

.nav_left_tab:hover {
    cursor: pointer;
}

    .nav_left_tab:hover:not(.nav_left_tab_active) {
        background-color: var(--tab-hover);
        transition: 0.2s;
    }

.nav_left_tab_active {
    background-color: var(--tab-active);
    color: var(--accent);
}

.nav_app_container {
    position: relative;
    border-bottom: solid 1px var(--border);
    z-index: 1;
    white-space: nowrap;
}

.nav_app_tab {
    font-family: Roboto-Medium,sans-serif;
    font-size: 11pt;
    font-weight: normal;
    color: var(--font2);
    padding-left: 14px;
    padding-right: 14px;
    padding-top: 4px;
    padding-bottom: 14px;
    display: inline-block;
    margin-right: 10px;
    transition: 0.2s;
}

.nav_app_tab_active {
    color: var(--accent);
}

.nav_app_tab:hover {
    cursor: pointer;
}

    .nav_app_tab:hover:not(.nav_app_tab_active) .tab_bottom {
        background-color: var(--font1);
    }

    .nav_app_tab:hover:not(.nav_app_tab_active) {
        color: var(--font1);
    }

.nav_app_tab_icon_R span.icon {
    position: relative;
    top: 3px;
    left: 4px;
    transition: 0s !important;
}

.nav_app_tab_icon_L span.icon {
    position: relative;
    top: 3px;
    right: 4px;
    transition: 0s !important;
}

.nav_app_tab.howto {
    color:#EC407A;
}

    .nav_app_tab.howto:hover {
        color:#F06292;
    }

.tab_bottom {
    position: relative;
    bottom: -14px;
    left: -12px;
    height: 3px;
    width: calc(100% + 24px);
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
    transition: 0.2s;
}

.tab_bottom_active {
    background-color: var(--accent);
}

    .howto:hover > .tab_bottom {
        background-color: #F06292 !important;
    }

.nav_page_container {
    position: relative;
    padding-bottom: 14px;
    z-index: 1;
}

.nav_page_title { /* can get rid of these for just a regular h2 */
    font-size: 14pt;
    font-family: Roboto-Medium,sans-serif;
    margin-bottom: 12px;
    color: var(--font1);
}

.nav_page_tab {
    font-size: 13px;
    font-family: Roboto-Regular,sans-serif;
    color: var(--font1);
    padding: 8px 12px 8px 12px;
    background-color: var(--page-tab);
    display: inline-block;
    border-radius: 40px;
    margin-right: 8px;
    transition: 0.2s;
}

    .nav_page_tab:hover {
        cursor: pointer;
    }

        .nav_page_tab:hover:not(.nav_page_tab_active) {
            background-color: var(--tab-hover);
        }

.nav_page_tab_active {
    color: var(--accent);
    background-color: var(--tab-active);
}

.nav_page_tab_icon_R {
    padding: 7px 16px 8px 12px;
}

.nav_page_tab_icon_R span.mdi {
    position: relative;
    top: 2px;
    left: 4px;
    transition: 0s !important;
}

.nav_page_tab_icon_L span.mdi {
    position: relative;
    top: 2px;
    right: 4px;
    transition: 0s !important;
}

.content {
    display: none;
}


/*#endregion*/

/*#region card */

/*#region form-grid*/

.form-section {
    display: grid;
    grid-template-columns: 230px auto;
    margin-right: 20px;
    column-gap: 10px;
    border-radius: 6px;
    border: solid 1px var(--border);
    margin-bottom: 12px;
}

.form-cell {
    color: var(--font1);
    font-size: 13px;
    font-family: Roboto-Medium;
    margin-top: 12px;
    padding-left: 10px;
}
/* right col */
div.form-cell:nth-child(2n) {
    font-family: Roboto-Regular;
    padding-right: 50px; /* plenty of padding from right side (of screen usually) */
}

/* last row (which would typically occur per section) */
div.form-cell:last-child {
    margin-bottom: 12px;
}

/*#endregion*/

/*#region feed-grid */

.feed-section {
    display: grid;
    grid-template-columns: 50px auto;
    column-gap: 16px;
    border-radius: 6px;
    border: solid 1px var(--border);
    padding: 16px 16px 20px 16px;
    margin-right: 20px;
    margin-bottom: 20px;
}

.feed-cell {
    color: var(--font1);
    font-size: 13px;
    font-family: Roboto-Medium;
}

/*#endregion*/



div.c {
    position: relative;
    display: block;
    margin-right: 20px;
    padding: 10px;
    border-radius: 6px;
    border: solid 1px var(--border);
    margin-bottom: 12px;
}

div.c_title {
    font-size: 14pt;
    font-family: Roboto-Medium,sans-serif;
    color: var(--font1);
    padding-bottom: 10px;
}

div.buffer4 {
    padding-bottom: 4px;
}

div.buffer {
    padding-bottom: 8px;
}

div.buffer12 {
    padding-bottom: 12px;
}



/*#endregion*/

/*#region FloatingActionButtons (FAB) */
/* note, FAB and fab (font awesome bold) could be conflicts. FAB should only be on a div.FAB while fab should only apply to <i> tags */

#FAB-container {
    position: absolute;
    left: 280px;
    bottom: 100px;
    height: auto;
    width: calc(100vw - 300px);
    text-align: center;
}

div.FAB { /* don't remove the div. (see note above) */
    display: inline;
    height: 64px;
    width: 64px;
    border-radius: 32px;
    transition: 0.2s;
    box-shadow: 0px 1px 3px var(--shadow);
    padding-right: 20px;
    padding-left: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-family: Roboto-Medium;
    margin-right: 12px;
    text-transform: uppercase;
}

div.FAB-add {
    background-color: #4CAF50;
    color: #FFFFFF;
}

    div.FAB-add:hover {
        cursor: pointer;
        background-color: #43A047;
    }

div.FAB-print {
    background-color: var(--accent);
    color: var(--onaccent);
}

    div.FAB-print:hover {
        cursor: pointer;
        background-color: var(--accent-dark);
    }

div.FAB-other {
    background-color: #78909C;
    color: #FFFFFF;
}

    div.FAB-other:hover {
        cursor: pointer;
        background-color: #607D8B;
    }

div.FAB-sig {
    background-color: #673AB7;
    color: #FFFFFF;
}

    div.FAB-sig:hover {
        cursor: pointer;
        background-color: #512DA8;
    }

/*#endregion*/

/*#region Person*/

div.person {
    padding: 6px;
    display: inline-block;
    white-space: nowrap;
    max-height: 36px;
}

    div.person:hover {
        cursor: pointer;
        background-color: var(--tab-hover);
        border-radius: 4px;
        transition: 0.2s;
    }

div.person-A {
    position: relative;
    display: block;
    height: 34px;
    width: 34px;
    border-radius: 17px;
    text-align: center;
    float: left;
}

    div.person-A span {
        position: relative;
        font-size: 13pt;
        top: 8px;
        color: #FFFFFF;
    }

div.person-A-flat {
    position: relative;
    display: block;
    height: 23px;
    width: 34px;
    border-radius: 10px;
    text-align: center;
    float: left;
}

    div.person-A-flat span {
        position: relative;
        font-size: 12pt;
        top: 3px;
        color: #FFFFFF;
    }

div.level-C { /* C for CIV */
    background-color: #9E9E9E; /* teal */
}

div.level-O { /* O for Officer */
    background-color: #607D8B; /* bluegrey */
}

div.level-1 {
    background-color: #9C27B0; /* purple */
}

div.level-3 {
    background-color: #F44336; /* red */
}

div.level-5 {
    background-color: #FF9800; /* orange */
}

div.level-7 {
    background-color: #4CAF50; /* green */
}

div.level-9 {
    background-color: #1976D2; /* blue */
}

div.level-0 { /* 0 for CEM */
    background-color: #1976D2; /* blue */
}    

.person-B {
    position: relative;
    display: inline-block;
    margin-left: 10px;
    max-height: 34px;
    top: -1px;
}


/*#endregion*/

/*#region progress*/

progress {
    border: none; /* seems to get rid of default appearance */
    width: 50px;
    height: 8px;
    border-radius: 0px;
}

    progress::-webkit-progress-bar {
        border: solid 0px transparent; /* allows for border radius */

        background-color: var(--border);
    }

    progress::-webkit-progress-value {
        background-color: #FF9800;
        transition: 0.2s;
    }

.progress-filled::-webkit-progress-value {
    background-color: #4CAF50;
    transition: 0.2s;
}

.progress2::-webkit-progress-value {
    background-color: var(--accent);
 }

progress#shotclock_progress {
    border: none; /* seems to get rid of default appearance */
    width: 100px;
    height: 8px;
    position: relative;
    top: 8px;
    border-radius: 0px;
}

    progress#shotclock_progress::-webkit-progress-bar {
        border: solid 0px transparent; /* allows for border radius */

        background-color: var(--border);
    }

    progress#shotclock_progress::-webkit-progress-value {
        background-color: var(--accent);
        transition: 0.2s;
    }

    progress#shotclock_progress.warning::-webkit-progress-value {
        background-color: #FF9800;
        transition: 0.2s;
    }

/*#endregion*/

/*#region google charts*/

#map path {
    stroke: var(--border);
}

/*#endregion*/

/*#endregion*/

/*#region tables*/

/*#region elements*/

/*  see https://www.google.com/design/spec/components/data-tables.html#  */

table {
    border-spacing: 0px;
    margin-bottom: 10px;
    margin-right: 10px;
}


tr.sectiontitle > td { /* sectiontitle td (same font as h2) */
    border: none;
    padding-left: 10px;
    padding-top: 40px;
    padding-bottom: 0px;
    text-align: left;
    font-size: 14pt;
    font-family: Roboto-Medium,sans-serif;
}

tr.sectiontitle:first-child > td {
    padding-top: 0px;
}

th {
    border-bottom: solid 2px var(--border);
    font-family: Roboto-Regular,sans-serif;
    color: var(--font2);
    font-size: 15px;
    font-weight: normal;
    padding-top: 16px;
    padding-bottom: 18px;
    padding-left: 20px;
    padding-right: 20px;
    vertical-align: bottom;
}

    th.group {
        border-bottom: none;
        padding-bottom: 0px;
    }

td {
    border-bottom: solid 1px var(--border);
    font-family: Roboto-Regular,sans-serif;
    color: var(--font1);
    font-size: 13px;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 20px;
    padding-right: 20px;
    vertical-align: top;
}

.shade {
    background-color: var(--tab-hover);
}

.txt {
    text-align: left;
}

.num {
    text-align: right;
}

.ctr {
    text-align: center;
}

.ico {
    text-align: left;
    padding-left: 14px;
    padding-right: 14px;
    white-space: nowrap;
}

.left-border {
    border-left: solid 1px var(--border);
}

.right-border {
    border-right: solid 1px var(--border);
}

.nowrap { /* also applies to any tag with .nowrap */
    white-space: nowrap;
}

td.foot {
    font-family: Roboto-Regular,sans-serif;
    padding-top: 12px;
    padding-bottom: 12px;
    color: var(--font2);
    font-size: 12px;
    border-bottom: none;
}


table.jModalBig {
    border-spacing: 0px;
    border: solid 1px var(--border);
    border-radius: 6px;
    margin-bottom: 12px;
    width: 900px;
}

/*#endregion*/

/*#region stick table*/

/* these will still rely on normal table, tr, and td tags */

table.sticky {
    overflow-y: auto;
    max-height: calc(100vh - 320px);
    max-width: calc(100vw - 340px);
    display: inline-block;
    border-bottom: solid 1px var(--border);
}

thead.sticky th {
    position: sticky;
    top: 0;
    background-color: var(--bg);
    z-index: 1;
}

tfoot.sticky th {
    position: sticky;
    bottom: 0;
    background-color: var(--bg);
    z-index: 1;
    border-top: solid 2px var(--border);
    border-bottom: none;
}

/*#endregion*/

/*#region record-controls*/

div.iconHolder {
    position: relative;
    display: inline-flex;
}


/*#endregion*/

/*#region calendar*/

div.calendar-row-holder {
    float: left;
    text-align: center;
    margin-top: 10px;
    width: 900px;
    height: auto;
}

div.calendar-holder {
    float: left;
    margin-right: 20px;
    margin-bottom: 20px;
}

span.cal-nav {
    height: 36px;
    width: 36px;
    border-radius: 50%;
    float: left;
    margin-right: 6px;
    transition: 0.2s;
}

    span.cal-nav:hover {
        background-color: var(--tab-hover);
        cursor: pointer;
    }

th.cal {
    font-family: Roboto-Regular,sans-serif;
    color: var(--font2);
    font-size: 13px;
    font-weight: normal;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 4px;
    padding-right: 4px;
}

td.cal {
    font-family: Roboto-Regular,sans-serif;
    color: var(--font1);
    font-size: 11px;
    font-weight: normal;
    width: 24px;
    height: 24px;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 2px;
    padding-right: 2px;
    text-align: center;
    border: none;
    transition: 0.2s;
}

    td.cal:hover {
        cursor: pointer;
        background-color: var(--tab-hover);
        border-radius: 50%;
    }

td.cal-today {
    font-family: Roboto-Regular,sans-serif;
    color: var(--font1);
    font-size: 11px;
    font-weight: normal;
    width: 24px;
    height: 24px;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 2px;
    padding-right: 2px;
    text-align: center;
    border: none;
    background-color: var(--accent);
    border-radius: 50%;
    color: var(--onaccent);
}

    td.cal-today:hover {
        cursor: pointer;
    }

td.cal-othermonth {
    width: 24px;
    height: 24px;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 2px;
    padding-right: 2px;
    border: none;
}

span.cal-span {
    position: relative;
    top: 5px;
    line-height: 100%;
}

/* default date and time elements */

input[type="date"]::-webkit-calendar-picker-indicator {
    background-color: #E2E2E2;
    border-radius: 3px;
    transition: 0.2s;
}

input[type="time"]::-webkit-calendar-picker-indicator {
    background-color: #E2E2E2;
    border-radius: 3px;
    transition: 0.2s;
}

/*#endregion*/

/*#endregion*/

/*#region community*/

div.comm {
    display: inline-block;
    padding: 16px 40px 20px 40px;
    border-radius: 6px;
    width: 840px;
    margin-bottom: 2px;
}

div.comm-op { /* divs with this class should also have 'comm' */
    background-color: var(--page-tab);
    box-shadow: 0px 1px 3px var(--shadow);
}

div.comm-comment { /* divs with this class should also have 'comm' */
    border: solid 1px var(--border);
}

div.comm-comment-sub { /* divs with this class should NOT have the 'comm' class */
    display: inline-block;
    padding: 16px 40px 20px 40px;
    border-radius: 6px;
    width: calc(760px);
    margin-bottom: 12px;
    border: solid 1px var(--border);
    position: relative;
    left: 80px;
}

div.comm-l {
    position: relative;
    float: left;
    width: 80%;
}

div.comm-r {
    position: relative;
    float: right;
}

div.reaction_container {
    position: relative;
    margin-top: 10px;
    display: inline-block;
    border: solid 1px var(--border);
    border-radius: 6px;
    overflow: hidden;
}

    div.reaction_container div.reaction_tab {
        font-size: 10pt;
        padding: 8px 10px 8px 10px;
        float: left;
        min-width: 30px;
        border-right: solid 1px var(--border);
    }

        div.reaction_container div.reaction_tab:last-of-type {
            border-right: none;
        }

div.reaction_tab img {
    height: 20px;
    position: relative;
    top: 0px;
    float: left;
}

div.reaction_tab span.reaction_count {
    position: relative;
    top: 1px;
    left: 6px;
    float: left;
    padding-right: 6px;
}

div.reaction_tab_active {
    color: var(--accent);
    background-color: var(--tab-active);
}

div.react_tab {
    background-color: var(--page-tab);
}

    div.react_tab:hover {
        cursor: pointer;
        background-color: var(--tab-hover);
        transition: 0.2s;
    }

.icon-48px.mdi-reply-outline {
    position: relative;
    left: -790px;
    top: 0px;
    color: var(--border);
}

/*#endregion*/

/*#region icon styles */

/* because I keep switching between icon libraries (google, fa, mdi...), I'm going to preface each class with "icon" this way they work across any library */

.icon-16px {
    font-size: 16px;
}

.icon-18px {
    font-size: 18px;
}

.icon-24px {
    font-size: 24px;
}

.icon-28px {
    font-size: 28px;
}

.icon-31px {
    font-size: 31px;
}
/* exclusively for icon */
.icon-36px {
    font-size: 36px;
}

.icon-48px {
    font-size: 48px;
}

.icon-72px {
    font-size: 72px;
}

.icon-96px {
    font-size: 96px;
}

.icon-128px {
    font-size: 128px;
}
/* exclusively for icon */

.icon {
    transition: 0.2s;
}

.iconify {
    transition: 0.2s;
}

.mdi {
    line-height: 100% !important; /* override AODMS 140% line-height */
}

.icon-hasLabel {
    float: left;
    margin-right: 6px;
}

.icon-Label {
    position: relative;
    top: 4px;
}

.icon-forField {
    position: relative;
    top: 5px;
    left: 6px;
}

.icon-RowEnabled {
    color: var(--font1);
}

.icon-RowEnabled:hover {
    color: var(--accent);
}

.icon-order-by {
    position: relative;
    top: 4px;
    left:4px;
    color: var(--font3);
    transition: 0.2s;
}

    .icon-order-by:hover {
        color: var(--font2);
        cursor: pointer;
    }

.icon-inButton {
    position: relative;
    top: 1px;
    margin-right: 4px;
}

.icon-36px-circled {
    color: var(--onaccent);
    background-color: var(--accent);
    border-radius: 50%;
    padding: 2px 5px 2px 6px;
    position: relative;
    top: 4px;
    margin-right: 10px;
}

.icon-logo-large {
    display: inline-block;
    background-color: var(--accent);
    color: var(--bg);
    border-radius: 8px;
    padding: 9px 7px 6px 11px;
    box-shadow: 0px 2px 2px var(--shadow);
}

.icon-logo-small {
    display: block;
    background-color: var(--accent);
    color: var(--bg);
    border-radius: 3px;
    padding: 4px 3px 2px 4px;
    box-shadow: 0px 2px 2px var(--shadow);
    position: relative;
    float: left;
    top: 5px;
    margin-right: 14px;
}

i.wi {
    font-size: 32px;
}

.userbadge {
    top: 2px;
    position: relative;
    margin-left: 3px;
}

/*#endregion*/

/*#region questions */

.question {
    position: relative;
    display: block;
    margin-right: 20px;
    padding: 10px;
    border-radius: 6px;
    border: solid 1px var(--border);
    margin-bottom: 12px;
    width: 1200px;
    float: left;
}

.question-l {
    float: left;
    width: 800px;
}

.question-r {
    position: relative;
    display: block;
    padding: 10px;
    border-radius: 6px;
    border: solid 1px var(--border);
    margin-bottom: 12px;
    width: 300px;
    float: right;
    background-color: var(--page-tab);
}

.txt-question {
    font-size:16px;
}

.txt-choice {
    font-size:14px;
}

.choice {
    display:flex;
    align-items: center;
    padding-bottom:6px;
    left:16px;
    position: relative;
    width:700px;
}

.choice-text {
    margin-left:10px;
}

/*#endregion */

/*#region notification */

.notification-off {
    color: var(--font2);
    transition:0.2s;
}

    .notification-off:hover {
        color: var(--link-header-hover);
        transition:0.2s;
    }

.notification-on {
    display: inline-block;
    background-size: cover;
    position: relative;
    animation: swing 1s ease-in-out infinite alternate;
    transform-origin: top center;
    color: var(--bell);
}

.notification-error {
    color: #9E9E9E;
}

@keyframes swing {
    0% {
        transform: rotate(12deg);
    }

    100% {
        transform: rotate(-12deg);
    }
}

/*#endregion*/

/*#region extra */


@keyframes SixSeven {
    0% {
        transform: rotate(0deg);
    }

    15% {
        transform: rotate(-3deg);
    }

    30% {
        transform: rotate(2deg);
    }

    45% {
        transform: rotate(-2deg);
    }

    60% {
        transform: rotate(3deg);
    }

    75% {
        transform: rotate(-3deg);
    }

    90% {
        transform: rotate(2deg);
    }

    100% {
        transform: rotate(0deg);
    }

}

.SixSeven {
    animation: SixSeven 3s ease-in-out
}

/*#endregion*/