:root {
    --default-spacing: 20px;
    --cell-spacing: 10px;
    --side-panel-min-width: 60px;
    --accent-color: #337ab7;
    --accent-color-25pc: #1E8BCD3F;
    --red: #ED3D3B;
    --green: #309048;
    --blue: #1E8BCD;
    --yellow: #fbe83b;
    --orange: #FB983B;
    --black: #575755;
    --gray: #A9A8A8;
    --ppf-blue: #2E2F7E;
    --red-25pc: #ED3D3B3F;
    --green-25pc: #3090483F;
    --blue-25pc: #1E8BCD3F;
    --yellow-25pc: #fbe83b3F;
    --orange-25pc: #FB983B3F;
    --black-25pc: #5757553F;
    --gray-25pc: #A9A8A83F;
    --menu-bg: #F0F0F0;
    --border-color: #e0e0e0;
    --border-radius: 5px;
    --body-bg-color: #f4f4f4;
    --text-color: #242424;
    --panel-bg-color: #fff;
    --odd-row-bg-color: #f5f5f5;
    --popup-bg-color: #fff;
}



/*spaced containers*/
/*TODO GMA rename to mv,etc. (for margin) & add pv,etc. (for padding)*/
.sv {
    margin: var(--default-spacing) 0;
}

.sh {
    margin: 0 var(--default-spacing);
}

.st {
    margin-top: var(--default-spacing);
}

.sr {
    margin-right: var(--default-spacing);
}

.sb {
    margin-bottom: var(--default-spacing);
}

.sl {
    margin-left: var(--default-spacing);
}


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

body {
    min-height: 100vh;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/*missing in DX stylesheets */
.dx-popover-arrow::after {
    background: var(--popup-bg-color);
}

.panel {
    background: var(--panel-bg-color);
    border-radius: var(--border-radius);
    box-shadow: 0px 2px 5px #dbdbdb;
}

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

.dx-page-toolbar {
    background: none;
}

.dx-toolbar {
    background: none;
}

.emphasis-box {
    border-radius: var(--border-radius);
    padding: var(--default-spacing);
    margin: 5px;
}

/*simple div to display an empty state*/
.empty-state {
    font-style: italic;
}

/*most titles in toolbars, we don't want any margin*/
h4.page-title {
    margin: 0;
}

/*to have a shadow on the menu from the page*/
.layout-body .dx-drawer-content {
    box-shadow: -1px 0px 5px #bdbdbd;
}

/*to allow the multiview (~= tab content) to scroll while in a flex container */
.dx-multiview-item-content {
    overflow-y: auto;
}

/* necessary for single-card layout like login page. 
    Needs to be registered globally instead of scoped to apply to inner elements*/
.with-footer>.dx-scrollable-wrapper>.dx-scrollable-container>.dx-scrollable-content {
    height: 100%;

    &>.dx-scrollview-content {
        display: flex;
        flex-direction: column;
        min-height: 100%;
    }
}

/* mini cards are always shown the same way */
.mini-card-wrapper {
    display: flex;
    flex-direction: row;
    gap: var(--default-spacing);
    flex-wrap: wrap;
}

/* simple wrapper to handle form item display when they are not in a form*/
.dx-field {
    display: block;
}

.dx-field.readonly {
    :is(p) {
        border: 1px solid #e7e7e7;
        padding: 5px 10px;
        margin: 5px 0px;
    }
}

/*----------- PLANNING TABLE ------------*/

/* default styles for tables */
table.planning {
    width: 100%;
    font-size: 0.875rem;
    line-height: 1.25rem;
    text-align: left;
    color: var(--text-color);
    border-collapse: unset;
    table-layout: fixed;
    border-spacing: 10px 0px;
}

table.planning thead {
    text-transform: uppercase;
    line-height: 1rem;    
}

table.planning thead>tr>th {
    font-weight: bold;
    padding: 0.5rem .4rem;
    white-space: nowrap;
    background-color: var(--gray);
}

table.planning tbody>tr {
    background-color: var(--body-bg-color);
    border-bottom-width: 1px;
}

table.planning tbody>tr>td {
    padding: 0;
    border-width: 0;
    border-bottom: 1px solid var(--border-color);
    vertical-align: text-top;
}

table.planning tbody>tr>td:first-child {
    font-weight: 600;
    padding-top: 5px;
    padding-bottom: 5px;
}

table.planning tbody>tr>td h3 {
    font-weight: bold
}

table.planning tbody>tr>td p.comment {
    color: var(--gray);
}

table.planning tbody>tr>td .schedule {
    color: var(--blue);
    float: right;
}

table.planning tbody td.avatar {
    padding: 0.5rem 1rem;
    width: 70px;
    min-width: 70px;
}

table.planning p i {
    margin-right: 8px;
}

div.table-wrapper {
    opacity: 1;
    overflow-x: hidden;
    transform: translateY(0);
    transition: all .5s ease-out;
}

div.table-wrapper.disappear {
    opacity: 0;
    transform: translateY(-100%);
}

div.table-wrapper.appear {
    opacity: 0;
    transform: translateY(100%);
    transition: none;
}
p.job {
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    justify-content: flex-end;
    gap: 8px;
    margin: .5rem 0px;
}

p.job>span.content {
    text-overflow: ellipsis;
    overflow: hidden;
}

p.job>span.time {
    font-size: .9em;
    background-color: #cbcbcb;
    color: black;
    padding: 0px 8px 2px 8px;
    border-radius: 3px;
    flex: 0 0 auto;
}

p.comment {
    line-height: 1em;
    margin-bottom: 0.5rem;
    margin-top: -5px;
}

.label {
    padding: 0px 8px 2px 8px;
    border-radius: 3px;
    margin: .5rem 0px;
    font-size: .9em;
    display: block;
    text-transform: uppercase;
}
.label>.details {
    text-transform: capitalize;
}
.label-s {
    padding: 0px 3px;
    border-radius: 3px;
    font-size: .9em;
}

html.dark img.ppf-logo {
    content: url(/images/PeopleForce_Logo_DarkBG.png)
}

html.dark table.planning thead {
    background-color: rgb(55, 65, 81);
    color: rgb(156, 163, 175)
  }
  
  html.dark table.planning thead>tr>th {
    background-color: rgb(55, 65, 81);
    color: white;
  }

@media print {

    header,
    nav,
    .progress-bar,
    .index-box {
        display: none !important;
    }

    .navigate-table-wrapper {
        margin: 0 !important;
    }

    .workshop-header {
        page-break-before: always;
        position: unset;
    }

    table.planning thead th {
        position: unset;
    }
}