/* Poppins font for ilionx */
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

.ms-core-pageTitle, md-tab-item {
    font-family: Poppins, Tenorite, "Segoe UI Light", "Segoe UI", "Segoe", Tahoma, Helvetica, Arial, sans-serif;
}

.qpc-error {
    color: #c00 !important;
}

h3 {
    font-size: 1.25em;
    font-weight: bold;
    margin-bottom: 0.6em;
}

.qpc-page {
    padding: 0 25px;
}

.qpc-form {
    margin-bottom: 1em;
    background-color: #e6e6e6;
    padding: 15px 25px;
    margin-top: 1em;
}

#message {
    color: #0b0;
    padding: 10px 0;
    margin: 1em 0;
}

.qpc-field {
    display: block;
    clear: left;
    padding: 10px 0;
}

.qpc-field > span:first-child {
    display: inline-block;
    width: 40%;
    max-width: 350px;
    font-weight: bold;
    margin-right: 5%;
    vertical-align: top;
}

.qpc-field input[type='radio'] {
    vertical-align: middle;
}

.qpc-field select,
.qpc-field input[type='text'],
.qpc-field input[type='url'],
.qpc-field input[type='date'],
.qpc-field input[type='password'],
.qpc-field input[type='number'] {
    display: inline-block;
    width: 50%;
    max-width: 350px;
    border: solid 1px #999;
    padding: 5px 2px;
    background-color: white;
    margin-right: 15px;
}

.qpc-dynamicInput {
    display: inline-block;
    width: 50%;
    max-width: 350px;
    position: relative;
}

    .qpc-dynamicInput > div {
        position: relative;
    }

    .qpc-dynamicInput a {
        position: absolute;
        right: 6px;
        top: -4px;
        color: #B00;
        font-weight: bold;
        font-size: 20px;
        text-decoration: none;
    }

        .qpc-dynamicInput a.addItem {
            color: #0B0;
            right: 4px;
        }

    .qpc-dynamicInput input {
        width: 100% !important;
        max-width: inherit;
        border-top: none !important;
    }

    .qpc-dynamicInput div:first-child input {
        border-top: solid 1px #999 !important;
    }

.qpc-field input[type='number'] {
    width: 50px;
}

.qpc-field input.value-only {
    border: none;
    border-bottom: solid 1px #999;
    background-color: transparent;
    color: #666;
}

body {
    overflow: auto;
}

.qpc-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.qpc-progress .qpc-progressBg {
    background-color: white;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.75;
}

.qpc-progress > md-progress-circular {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -25px;
    margin-top: -25px;
}

.qpc-description {
    display: inline-block;
    margin-left: 25px;
    color: #808080;
    font-style: italic;
}


legend {
    font-weight: bold;
}

fieldset {
    /* border: solid 2px rgb(255,64,129); */
    border: none;
    background-color: #ddd;
    padding: 20px;
    margin-top: 10px;
}

md-progress-circular.inline {
    display: inline-block;
    position: relative;
    top: 11px;
}

.qpc-table {
    width: 100%;
    margin-bottom: 1em;
}

.qpc-table tr td, .qpc-table tr th {
    vertical-align: top;
    padding: 4px;
    margin-right: 2px;
    margin-bottom: 2px;
    text-align: left;
}

.qpc-table-date {
    white-space: nowrap;
}

/* Information */
.qpc-table-rowtype-0 {
    background-color: #f4f4f4;
}

/* Error */
.qpc-table-rowtype-1 {
    background-color: #fbb;
}

/* Warning */
.qpc-table-rowtype-2 {
    background-color: #fcb712; /* ilionx yellow */
}

/* Completed */
.qpc-table-rowtype-3 {
    background-color: #7f7;
}

/* Easter egg */
.qpc-table-rowtype-100 {
    background-color: #77f;
}

/* Modals */
.qpc-modal #chromeControl_bottomheader, .qpc-modal #suiteBar {
    display: none !important;
}

.qpc-modal #suiteBarLeft {
    background-color: #333;
}

.qpc-modal #chrome_ctrl_container {
    margin-bottom: 1em;
}

.no-access {
    font-family: "Segoe UI Regular WestEuropean","Segoe UI",Tahoma,Arial,sans-serif;
}

.no-access nav {
    padding: 10px 27px;
    color: white;
    font-weight: 400;
    background-color: black;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
}

.no-access h1 {
    padding-top: 60px;
    font-weight: normal;
}

md-tab-content ul {
    padding-left: 0;
}

md-tab-content ul li {
    list-style-position: inside;
    list-style-type: square;
    margin-bottom: 4px;
}

md-tab-content a {
    text-decoration: none;
    color: rgb(33,150,243);
}

md-list h3 {
    margin: 0 0 0 0;
    font-size: 1.1em;
    font-weight: normal;
}

md-list h4 {
    color: darkgreen;
}

md-list p {
    margin-top: 0;
    color: darkgrey;
}

md-list-item.disabled {
    opacity: 0.4;
}

md-tabs {
    overflow: visible;
    /*height: auto;*/
}

md-tab-content {
    /* overflow: visible;  */
}

md-tabs.md-default-theme md-tabs-wrapper, md-tabs md-tabs-wrapper {
    background-color: #404040;
    box-shadow: 0px 0px 6px 0px rgba(70,70,70,0.5);
}

md-tabs.md-default-theme .md-tab, md-tabs .md-tab {
    color: white;
}

.pagination {
    margin: 0.5em 0 1em;
    font-size: 1.1em;
}

.pagination a {
    display: inline-block;
    margin-right: 3px;
    border-radius: 2px;
    color: white;
    background-color: #8688A5;
    padding: 4px 6px;
    min-width: 1em;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.5s ease;
}

.pagination a[disabled] {
    opacity: 0.5;
    cursor: default;
}

.pagination a:hover {
    background-color: #183862;
}

.attention {
    display: inline-block;
    padding: 4px 5px;
    background-color: orangered;
    color: white;
    border-radius: 3px;
}

.attention.uptodate {
    background-color: #7f7;
    color: black;
}


/* ILIONX BRANDING 

Rood		#E8003D
Do-Blauw	#183862
Li Blauw	#8688A5
Grijs		#DADADA
*/

/* button color */
.md-button.md-default-theme.md-primary, .md-button.md-primary {
    color: #E8003D;
}
    .md-button.md-default-theme.md-primary.md-fab, .md-button.md-primary.md-fab, .md-button.md-default-theme.md-primary.md-raised, .md-button.md-primary.md-raised,
    md-progress-linear.md-default-theme .md-bar, md-progress-linear .md-bar {
        background-color: #E8003D;
    }

.md-button.md-default-theme.md-primary.md-fab:not([disabled]).md-focused, .md-button.md-primary.md-fab:not([disabled]).md-focused, .md-button.md-default-theme.md-primary.md-fab:not([disabled]):hover, .md-button.md-primary.md-fab:not([disabled]):hover, .md-button.md-default-theme.md-primary.md-raised:not([disabled]).md-focused, .md-button.md-primary.md-raised:not([disabled]).md-focused, .md-button.md-default-theme.md-primary.md-raised:not([disabled]):hover, .md-button.md-primary.md-raised:not([disabled]):hover
{
    background-color: #8688A5;
    opacity: 0.8;
}

/* Toolbar*/
md-toolbar.md-default-theme:not(.md-menu-toolbar), md-toolbar:not(.md-menu-toolbar), md-toolbar h2 {
    background-color: #183862;
    color: white;
}

/* active tab text */
md-tabs.md-default-theme .md-tab.md-active, md-tabs .md-tab.md-active, md-tabs.md-default-theme .md-tab.md-active md-icon, md-tabs .md-tab.md-active md-icon, md-tabs.md-default-theme .md-tab.md-focused, md-tabs .md-tab.md-focused, md-tabs.md-default-theme .md-tab.md-focused md-icon, md-tabs .md-tab.md-focused md-icon {
    color: #DADADA;
}

/* links */
md-tab-content a {
    color: #E8003D;
}

#suiteBarLeft {
    background-color: #E8003D;
}
/* active tab ink bar */
md-tabs.md-default-theme md-ink-bar, md-tabs md-ink-bar
{
    background-color: #FFF;
    color: #FFF;
}

/* Checkboxes */
md-checkbox.md-default-theme.md-checked .md-ink-ripple, md-checkbox.md-checked .md-ink-ripple {
    color: #E8003D;
}
md-checkbox.md-default-theme.md-checked .md-icon, md-checkbox.md-checked .md-icon {
    background-color: #E8003D;
}
/* progress circle */
@keyframes ilionxBlueStroke {
    0% {
        stroke: #8688A5;
    }
    50% {
        stroke: #183862;
    }
    100% {
        stroke: #8688A5;
    }
}

md-progress-circular svg path {
    stroke: #8688A5;
    animation-name: ilionxBlueStroke;
    animation-duration: 2s;
}