/* Minification failed. Returning unminified contents.
(30,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(31,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(32,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(33,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(34,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(35,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(37,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(38,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(39,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(40,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(41,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(43,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(44,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(45,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(46,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(47,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(48,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(51,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(52,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(53,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(54,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(55,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(57,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(58,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(97,6): run-time error CSS1030: Expected identifier, found ' '
(139,28): run-time error CSS1039: Token not allowed after unary operator: '-body-bgcolor'
(153,17): run-time error CSS1039: Token not allowed after unary operator: '-page-title-color'
(170,17): run-time error CSS1039: Token not allowed after unary operator: '-color-darker1'
(175,17): run-time error CSS1039: Token not allowed after unary operator: '-panel-txtcolor'
(190,17): run-time error CSS1039: Token not allowed after unary operator: '-header-txtcolor'
(193,28): run-time error CSS1039: Token not allowed after unary operator: '-header-bgcolor'
(196,22): run-time error CSS1039: Token not allowed after unary operator: '-panel-box-shadow'
(207,17): run-time error CSS1039: Token not allowed after unary operator: '-navbar-txtcolor'
(210,28): run-time error CSS1039: Token not allowed after unary operator: '-navbar-bgcolor'
(226,17): run-time error CSS1039: Token not allowed after unary operator: '-navbar-txtcolor'
(232,17): run-time error CSS1039: Token not allowed after unary operator: '-navbar-txtcolor'
(251,21): run-time error CSS1039: Token not allowed after unary operator: '-navbar-txtcolor'
(257,17): run-time error CSS1039: Token not allowed after unary operator: '-navbar-txtcolor'
(268,17): run-time error CSS1039: Token not allowed after unary operator: '-navbar-txtcolor'
(274,21): run-time error CSS1039: Token not allowed after unary operator: '-navbar-txtcolor'
(280,25): run-time error CSS1039: Token not allowed after unary operator: '-navbar-txtcolor'
(286,17): run-time error CSS1039: Token not allowed after unary operator: '-navbar-txtcolor'
(289,28): run-time error CSS1039: Token not allowed after unary operator: '-navbar-bgcolor'
(290,28): run-time error CSS1039: Token not allowed after unary operator: '-navbar-bgcolor'
(297,21): run-time error CSS1039: Token not allowed after unary operator: '-navbar-txtcolor'
(300,32): run-time error CSS1039: Token not allowed after unary operator: '-navbar-bgcolor'
(306,25): run-time error CSS1039: Token not allowed after unary operator: '-navbar-bgcolor'
(309,36): run-time error CSS1039: Token not allowed after unary operator: '-body-bgcolor'
(441,32): run-time error CSS1039: Token not allowed after unary operator: '-header-bgcolor'
(442,21): run-time error CSS1039: Token not allowed after unary operator: '-header-txtcolor'
(702,17): run-time error CSS1039: Token not allowed after unary operator: '-navbar-bgcolor'
(705,28): run-time error CSS1039: Token not allowed after unary operator: '-panel-bgcolor'
(710,22): run-time error CSS1039: Token not allowed after unary operator: '-panel-box-shadow'
(717,17): run-time error CSS1039: Token not allowed after unary operator: '-panel-txtcolor'
(722,17): run-time error CSS1039: Token not allowed after unary operator: '-panel-txtcolor'
(744,17): run-time error CSS1039: Token not allowed after unary operator: '-panel-txtcolor'
(773,17): run-time error CSS1039: Token not allowed after unary operator: '-panel-txtcolor'
(776,28): run-time error CSS1039: Token not allowed after unary operator: '-panel-bgcolor'
(781,22): run-time error CSS1039: Token not allowed after unary operator: '-panel-box-shadow'
(794,21): run-time error CSS1039: Token not allowed after unary operator: '-color-darker1'
(808,17): run-time error CSS1039: Token not allowed after unary operator: '-panel-txtcolor'
(833,17): run-time error CSS1039: Token not allowed after unary operator: '-color-darker1'
(906,25): run-time error CSS1039: Token not allowed after unary operator: '-panel-txtcolor'
(912,25): run-time error CSS1039: Token not allowed after unary operator: '-panel-txtcolor-hover'
(914,36): run-time error CSS1039: Token not allowed after unary operator: '-panel-bgcolor-hover'
(1204,17): run-time error CSS1039: Token not allowed after unary operator: '-color-darker1'
(1310,17): run-time error CSS1039: Token not allowed after unary operator: '-panel-txtcolor'
(1316,17): run-time error CSS1039: Token not allowed after unary operator: '-panel-txtcolor'
(1395,17): run-time error CSS1039: Token not allowed after unary operator: '-panel-txtcolor'
(1953,28): run-time error CSS1039: Token not allowed after unary operator: '-panel-bgcolor'
(1956,22): run-time error CSS1039: Token not allowed after unary operator: '-panel-box-shadow'
(1969,17): run-time error CSS1039: Token not allowed after unary operator: '-panel-txtcolor'
(2008,17): run-time error CSS1039: Token not allowed after unary operator: '-color-darker1'
(2025,17): run-time error CSS1039: Token not allowed after unary operator: '-panel-txtcolor'
(2034,17): run-time error CSS1039: Token not allowed after unary operator: '-panel-txtcolor'
(2399,36): run-time error CSS1039: Token not allowed after unary operator: '-header-bgcolor'
(2432,17): run-time error CSS1039: Token not allowed after unary operator: '-panel-txtcolor'
(2503,17): run-time error CSS1039: Token not allowed after unary operator: '-danger'
(2756,17): run-time error CSS1039: Token not allowed after unary operator: '-panel-txtcolor'
(2805,21): run-time error CSS1039: Token not allowed after unary operator: '-panel-txtcolor'
(2832,28): run-time error CSS1039: Token not allowed after unary operator: '-status-color-to-do'
(2840,28): run-time error CSS1039: Token not allowed after unary operator: '-status-color-urgent'
(2848,28): run-time error CSS1039: Token not allowed after unary operator: '-status-color-warning'
(2856,28): run-time error CSS1039: Token not allowed after unary operator: '-status-color-rfq'
(2864,28): run-time error CSS1039: Token not allowed after unary operator: '-status-color-on-track'
(2872,28): run-time error CSS1039: Token not allowed after unary operator: '-status-color-ok'
(2996,25): run-time error CSS1039: Token not allowed after unary operator: '-panel-txtcolor'
(3093,21): run-time error CSS1039: Token not allowed after unary operator: '-panel-txtcolor'
(3157,17): run-time error CSS1039: Token not allowed after unary operator: '-panel-txtcolor'
(3249,17): run-time error CSS1039: Token not allowed after unary operator: '-panel-txtcolor'
(3387,17): run-time error CSS1039: Token not allowed after unary operator: '-panel-txtcolor'
(3549,22): run-time error CSS1039: Token not allowed after unary operator: '-panel-box-shadow'
(3640,22): run-time error CSS1039: Token not allowed after unary operator: '-panel-box-shadow'
(3653,22): run-time error CSS1039: Token not allowed after unary operator: '-panel-box-shadow'
(3758,26): run-time error CSS1039: Token not allowed after unary operator: '-panel-box-shadow'
(3927,33): run-time error CSS1039: Token not allowed after unary operator: '-panel-txtcolor'
(4019,29): run-time error CSS1039: Token not allowed after unary operator: '-panel-txtcolor'
(4059,21): run-time error CSS1039: Token not allowed after unary operator: '-panel-txtcolor'
(4078,21): run-time error CSS1039: Token not allowed after unary operator: '-panel-txtcolor'
(4121,25): run-time error CSS1039: Token not allowed after unary operator: '-panel-txtcolor'
(4210,25): run-time error CSS1039: Token not allowed after unary operator: '-panel-txtcolor'
(4231,17): run-time error CSS1039: Token not allowed after unary operator: '-header-txtcolor'
(4234,28): run-time error CSS1039: Token not allowed after unary operator: '-header-bgcolor'
(4509,26): run-time error CSS1039: Token not allowed after unary operator: '-cursor-cell-default'
(4900,17): run-time error CSS1039: Token not allowed after unary operator: '-panel-txtcolor'
(4905,17): run-time error CSS1039: Token not allowed after unary operator: '-panel-txtcolor'
(5083,17): run-time error CSS1039: Token not allowed after unary operator: '-status-color-ok'
(5089,17): run-time error CSS1039: Token not allowed after unary operator: '-status-color-on-track'
(5095,17): run-time error CSS1039: Token not allowed after unary operator: '-status-color-warning'
(5101,17): run-time error CSS1039: Token not allowed after unary operator: '-status-color-urgent'
(5107,17): run-time error CSS1039: Token not allowed after unary operator: '-status-color-rfq'
(5113,17): run-time error CSS1039: Token not allowed after unary operator: '-status-color-to-do'
(5141,21): run-time error CSS1039: Token not allowed after unary operator: '-page-title-color'
(5153,21): run-time error CSS1039: Token not allowed after unary operator: '-page-title-color'
(5360,36): run-time error CSS1039: Token not allowed after unary operator: '-panel-bgcolor'
(5363,30): run-time error CSS1039: Token not allowed after unary operator: '-panel-box-shadow'
(5393,21): run-time error CSS1039: Token not allowed after unary operator: '-panel-txtcolor'
(5776,21): run-time error CSS1039: Token not allowed after unary operator: '-panel-txtcolor'
(5804,25): run-time error CSS1039: Token not allowed after unary operator: '-panel-txtcolor'
(5959,21): run-time error CSS1039: Token not allowed after unary operator: '-panel-txtcolor'
(5977,25): run-time error CSS1039: Token not allowed after unary operator: '-panel-txtcolor'
(6440,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(6454,18): run-time error CSS1039: Token not allowed after unary operator: '-signature-pad-height'
(6699,36): run-time error CSS1039: Token not allowed after unary operator: '-header-bgcolor'
(7325,18): run-time error CSS1039: Token not allowed after unary operator: '-cursor-cell-w-time'
(7684,25): run-time error CSS1039: Token not allowed after unary operator: '-header-txtcolor'
(7687,36): run-time error CSS1039: Token not allowed after unary operator: '-header-bgcolor'
(7690,30): run-time error CSS1039: Token not allowed after unary operator: '-panel-box-shadow'
(7953,59): run-time error CSS1046: Expect comma, found '30'
(7953,65): run-time error CSS1046: Expect comma, found '/'
(7964,63): run-time error CSS1046: Expect comma, found '30'
(7964,69): run-time error CSS1046: Expect comma, found '/'
(8312,25): run-time error CSS1039: Token not allowed after unary operator: '-color-darker1'
(8485,17): run-time error CSS1039: Token not allowed after unary operator: '-color-darker2'
(8569,17): run-time error CSS1039: Token not allowed after unary operator: '-color-darker2'
(8578,17): run-time error CSS1039: Token not allowed after unary operator: '-color-darker2'
 */
/* Cert Pal 2017 */
/* Olof Gottryder */
/* Bootstrap default view is for a phone */
/* Medium 768px, Large 992px, Extra Large 1200px */
/* Get the phone (<medium) layout right first, then the other */
/* Styles starting with cpl_ is our own Cert Pal AB classes */

/* #eeeeee ###Light background border */
/* #f3f3f3 ###Light background */
/* #b9d4f9 ###VeryLightColor */
/* #666666 ###MediumColor */
/* #000000 ###DarkColor */
/* #ffd965 ###Highlight background (yellow marker) */
/* #000000 ###HighlightColor (black) */

/* px to rem when root font-size is 16px;
    10px = 0.625rem     (10/16)
    11px = 0.6875rem    (11/16)
    12px = 0.75rem      (12/16)
    13px = 0.8125rem    (13/16)
    14px = 0,875rem     (14/16)
    15px = 0,9375rem    (15/16)
    16px = 1rem         (16/16)
*/
/* --- Cert Pal CSS variables ---
    e.g. background-color: var(--body-bgcolor);
*/
:root {
    font-size: 13px; /* See media queries below */
    --body-bgcolor: #f0f0f0; /* Very light grey */
    --navbar-txtcolor: #dddddd; /* Light grey */
    --navbar-bgcolor: #343A40; /* Dark grey */
    --header-txtcolor: #ffffff; /* White */
    --header-bgcolor: #108B97; /* Turcoise */
    --page-title-color: #333333; /* Very dark grey */
    /* Panel */
    --panel-txtcolor: #666666; /* Dark grey */
    --panel-txtcolor-hover: #333333; /* Dark grey */
    --panel-bgcolor-hover: #dddddd; /* Light grey */
    --panel-bgcolor: #fafafa; /* Super light grey */
    --panel-box-shadow: 0.125rem 0.125rem 1rem -0.3rem rgba(0,0,100,0.4);
    /* Certificate statuses */
    --status-color-ok: #bbebb2; /* Green */
    --status-color-on-track: #c1cafd; /* Blue */
    --status-color-rfq: #deb979; /* Brown */
    --status-color-warning: #ffe9a9; /* Yellow */
    --status-color-urgent: #ffb3a1; /* Red */
    --status-color-to-do: #dddddd; /* Grey */
    /* https://hslpicker.com/ */
    /* Turcoise medium hsla(185, 81%, X3%, 1) - 80% #a3eef5, 75% #8ceaf3 */
    --color-lighter2: #14b3c2; /* Turcoise lighter2 42% */
    --color-lighter1: #119aa6; /* Turcoise lighter1 36% */
    --color-base: #108B97; /* Turcoise medium 33% */
    --color-darker1: #10767f; /* Turcoise darker1 28% */
    --color-darker2: #0d6f78; /* Turcoise darker2 26% */

    --cursor-cell-w-time: help;
    --cursor-cell-default: help;
}
/* Color of selected text */
::selection {
    background: #f9e58f; /* Orange/yellow */
    color: #000000; /* Black */
}

.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.cpl_page-footer {
    margin-top: 1rem;
    padding-top: 0.5rem;
    border-top: 1px solid #cccccc;
}

/* -- Google Chrome --*/
/* -- Mobile S 320px --*/
/* -- Mobile M 375px --*/
/* -- Mobile L 425px --*/
/* -- Tablet 768px --*/
/* -- Laptop 1024px- --*/
/* -- Laptop L 1440px- --*/
/* -- 4k 2560px --*/
/* -- Bootstrap --*/
/* -- breakpoint-xs: 0; */
/* -- breakpoint-sm: 576px; */
/* -- breakpoint-md: 768px; */
/* -- breakpoint-lg: 992px; */
/* -- breakpoint-xl: 1200px; */
/* -- breakpoint-xs: 0; */
/* -- breakpoint-sm: 576px; */
@media (min-width: 576px) {
    : root {
        font-size: 14px;
    }

    .container {
        max-width: 96%;
    }
}
/* -- breakpoint-md: 768px; */
@media (min-width: 768px) {
    :root {
        font-size: 15px;
    }

    .container {
        max-width: 94%;
    }
}
/* -- breakpoint-lg: 992px; */
@media (min-width: 992px) {
    :root {
        font-size: 16px;
    }

    .container {
        max-width: 92%;
    }
}
/* -- breakpoint-xl: 1200px; */
@media (min-width: 1200px) {
    :root {
        font-size: 16px;
    }

    .container {
        max-width: 90%;
    }
}

body {
    /* IE */
    background-color: #f0f0f0;
    background-color: var(--body-bgcolor);
    padding-top: 3rem;
    padding-bottom: 2rem;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 1rem;
    padding-right: 1rem;
}

h1, h2, h3, h4 {
    /* IE */
    color: #343A40;
    color: var(--page-title-color);
}

h1, h2, h3, h4 {
    margin-top: 1em;
    margin-bottom: 0.5em;
    font-size: 1.6rem;
    font-weight: 600;
}

h1 {
    /* Large text line-height < 1 */
    line-height: 0.92 !important;
    /* Large text create contrast */
    font-size: 2rem !important;
    /* Add white space */
    padding-top: 0.5rem !important;
    color: var(--color-darker1);
}

p {
    color: #666666;
    color: var(--panel-txtcolor);
    max-width: 80ch;
    line-height: 1.6;
}

.cpl_form_header {
    font-size: 1.6rem;
    font-weight: 600;
    margin-top: 1.9rem;
    margin-bottom: 0.5rem;
    margin-left: -0.0rem;
    padding: 0.0625rem 1rem;
    border-radius: 0.375rem;
    /* IE */
    color: #ffffff;
    color: var(--header-txtcolor);
    /* IE */
    background-color: #108B97;
    background-color: var(--header-bgcolor);
    /* IE */
    box-shadow: 2px 2px 15px -6px rgba(0,0,0,0.4);
    box-shadow: var(--panel-box-shadow);
}

a {
    color: #3267A0;
}

/* Nav menu - default dark theme */
.cpl_navbar {
    /* IE */
    color: #ffffff;
    color: var(--navbar-txtcolor);
    /* IE */
    background-color: #343A40;
    background-color: var(--navbar-bgcolor);
}

/* Keep top menu inside screen even if page is wider */
.fixed-top {
    width: 100vw !important;
}

.cpl_navbar .navbar-brand::before {
    /* Cert Pal logo font */
    content: "Cert Pal";
    font-family: Tahoma;
    font-weight: bold;
    font-size: 1.5625rem;
    /* IE */
    color: #ffffff;
    color: var(--navbar-txtcolor);
}

.cpl_navbar .navbar-nav .nav-link {
    /* IE */
    color: rgba(255, 255, 255, 0.5);
    color: var(--navbar-txtcolor);
}

    .cpl_navbar .navbar-nav .nav-link:hover, .cpl_navbar .navbar-nav .nav-link:focus {
        /* IE */
        color: rgba(255, 255, 255, 0.75);
    }

    .cpl_navbar .navbar-nav .nav-link.disabled {
        /* IE */
        color: rgba(255, 255, 255, 0.25);
    }

    .cpl_navbar .navbar-nav .show > .nav-link,
    .cpl_navbar .navbar-nav .active > .nav-link,
    .cpl_navbar .navbar-nav .nav-link.show,
    .cpl_navbar .navbar-nav .nav-link.active {
        /* IE */
        color: #ffffff;
        color: var(--navbar-txtcolor);
    }

.cpl_navbar .navbar-toggler {
    /* IE */
    color: rgba(255, 255, 255, 0.5);
    color: var(--navbar-txtcolor);
    border-color: rgba(255, 255, 255, 0.1);
}

.cpl_navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.cpl_navbar .navbar-text {
    /* IE */
    color: rgba(255, 255, 255, 0.5);
    color: var(--navbar-txtcolor);
}

    .cpl_navbar .navbar-text a {
        /* IE */
        color: #ffffff;
        color: var(--navbar-txtcolor);
    }

        .cpl_navbar .navbar-text a:hover, .cpl_navbar .navbar-text a:focus {
            /* IE*/
            color: #ffffff;
            color: var(--navbar-txtcolor);
        }

.cpl_navbar .nav .nav-item .dropdown-menu {
    /* IE */
    color: #ffffff;
    color: var(--navbar-txtcolor);
    /* IE */
    background-color: #343A40;
    background-color: var(--navbar-bgcolor);
    border: 1px solid var(--navbar-bgcolor);
    border-radius: 10px;
}

    .cpl_navbar .nav .nav-item .dropdown-menu .dropdown-item {
        /* IE */
        color: #ffffff;
        color: var(--navbar-txtcolor);
        /* IE */
        background-color: #343A40;
        background-color: var(--navbar-bgcolor);
    }

        .cpl_navbar .nav .nav-item .dropdown-menu .dropdown-item:hover {
            /* IE */
            color: #343A40;
            color: var(--navbar-bgcolor);
            /* IE */
            background-color: #f0f0f0;
            background-color: var(--body-bgcolor);
            cursor: pointer;
        }

.cpl_book-demo-menu {
    border: 1px solid #ffffff;
    border-radius: 35px;
    background-color: yellow;
    width: 160px;
    text-align: center;
}

    .cpl_book-demo-menu a {
        color: #333333 !important;
    }

@media (min-width: 768px) {
    .cpl_book-demo-menu {
        border: 1px solid #ffffff;
        border-radius: 35px;
        background-color: #ffffff;
        width: unset;
    }

        .cpl_book-demo-menu:hover {
            background-color: yellow;
        }

        .cpl_book-demo-menu a {
            color: #333333 !important;
        }
}

/*#region Cookie warning */

.cpl_cookie-warning-box {
    background-color: #ffffff;
    border-radius: 0.4rem;
    box-shadow: 0 17px 17px rgba(0,0,0,.15), 0 27px 55px rgba(0,0,0,.3);
    margin: 1rem;
    max-height: calc(100% - 48px);
    max-width: calc(100% - 48px);
    overflow: auto;
    padding: 0 0.2rem;
    position: fixed;
    z-index: 10012;
    right: 60px;
    bottom: 20px;
    display: none;
}

    .cpl_cookie-warning-box .cpl_cookie-warning-content {
        color: #757575;
        padding: 1rem;
    }
/*#endregion */

/* Override the default bootstrap behavior where horizontal description lists
   will truncate terms that are too long to fit in the left column
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

/*@media (min-width: 768px) {
    input[type=checkbox] {
        transform: scale(1.5);
    }
}*/

.cpl_growing-textarea {
    /* Set low until entering text - javascript */
    height: 2.5rem;
    min-height: 2rem;
    /* No textare handle icon at bottom right corner in Chrome */
    /*resize: none;*/
    /* No vertical scrollbar */
    overflow-y: hidden;
    width: 100%;
    /* Ensures padding doesn't affect overall width */
    box-sizing: border-box;
}


.cpl_checkbox-x3 {
    transform: scale(3) !important;
}

a[href^="mailto:"] {
    font-family: sans-serif;
    font-size: 0.6875rem;
}

    a[href^="mailto:"]:hover {
        color: #000000;
        background-color: #eeeeee;
        text-decoration: none;
    }

a[href^="tel:"] {
    font-family: sans-serif;
    font-size: 0.8125rem;
}

    a[href^="tel:"]:hover {
        color: #000000;
        background-color: #eeeeee;
        text-decoration: none;
    }

.cpl_input-narrow-center {
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center;
}

.cpl_h2-dropdown {
    display: inline-block;
}

    .cpl_h2-dropdown select {
        font-size: 1.4rem;
        font-weight: 600;
        font-style: italic;
        border: none;
        background-color: var(--header-bgcolor);
        color: var(--header-txtcolor);
    }

        .cpl_h2-dropdown select:hover {
            font-size: 1.4rem;
            font-weight: 600;
            border: none;
            background-color: #ffffff;
            color: #666666;
        }

    .cpl_h2-dropdown option {
        /* option can not be styled except colors */
        background-color: #ffffff;
        color: #666666;
    }

.cpl_borderless-dropdown {
    color: #666666;
    text-align: right;
    border: none; /* Remove the default border */
    outline: none; /* Remove the focus outline */
    background-color: transparent; /* Make the background transparent */
    padding: 0; /* Remove any padding */
    appearance: none; /* Remove default dropdown arrow in some browsers */
}
.cpl_borderless-dropdown-w-arrow {
    color: #666666;
    text-align: right;
    border: none; /* Remove the default border */
    outline: none; /* Remove the focus outline */
    background-color: transparent; /* Make the background transparent */
    padding: 0; /* Remove any padding */
    /*appearance: none;*/ /* Remove default dropdown arrow in some browsers */
}

.cpl_clickable {
    cursor: pointer;
}

    .cpl_clickable:hover {
        background-color: #cccccc !important;
    }

    /* Looks lika an a tag */
    .cpl_clickable i {
        font-size: 0.7rem;
        color: #3267a0;
        font-style: normal;
    }

.cpl_text-align-left {
    text-align: left !important;
}

.cpl_text-align-center {
    text-align: center !important;
}

.cpl_text-align-right {
    text-align: right !important;
}

/* Align all child objects at the bottom */
.cpl_flex-row-bottom {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
}
/* Align all child objects at the top */
.cpl_flex-row-top {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

.cpl_break-long-text {
    /* These are technically the same, but use both */
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-all;
    /* This is the dangerous one in WebKit, as it breaks things wherever */
    word-break: break-all;
    /* Instead use this non-standard one: */
    word-break: break-word;
    /* Adds a hyphen where the word breaks, if supported (No Blink) */
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

.cpl_overflow-hidden {
    overflow: hidden;
}

.cpl_show-me-link {
    padding: 0;
    margin-bottom: 0.75rem;
    line-height: 0.75rem;
    cursor: pointer;
}

    .cpl_show-me-link a {
        font-size: 0.75rem;
    }

        .cpl_show-me-link a:hover {
            color: #000000;
            background-color: #eeeeee;
            text-decoration: none;
        }

.cpl_strong {
    color: #555555;
    font-weight: 600;
    font-size: 1.1rem;
}

.cpl_cursor__pointer {
    cursor: pointer;
}

.cpl_disabled {
    text-decoration: line-through !important;
    color: #999999;
}

.cpl_absolute-bottom {
    position: absolute;
    bottom: 0;
}

.cpl_mandatory-field-text {
    position: relative;
    font-size: 0.8rem;
    font-style: italic;
    margin-left: 0.8rem;
}

    .cpl_mandatory-field-text::before {
        position: absolute;
        top: -0.45rem;
        left: -0.9rem;
        height: 1rem;
        content: '*';
        font-size: 1.7rem;
        color: red;
    }

.cpl_mandatory-field-checkbox {
    position: relative;
}

    .cpl_mandatory-field-checkbox::before {
        position: absolute;
        top: -0.4rem;
        left: -0.6rem;
        height: 1rem;
        content: '*';
        font-size: 1.5rem;
        color: red;
    }

/* Put textbox in a div with this class */
.cpl_mandatory-field-textbox {
    position: relative;
}

    .cpl_mandatory-field-textbox::before {
        position: absolute;
        top: 0.15rem;
        left: -0.85rem;
        height: 1rem;
        content: '*';
        font-size: 2rem;
        color: red;
    }

.cpl_highlight-tr {
    background-color: #fffad1; /* Light yellow */
    color: #000000; /* Black */
}

.cpl_highlight-small {
    background-color: #fff8bc; /* Light yellow */
    color: #333333; /* Dark grey */
    font-style: italic;
    max-width: 300ch;
}

.cpl_highlight-medium {
    background-color: #fbf2aa;
    color: #222222;
    padding: 0.2rem 0.4rem;
    max-width: 300ch;
}

.cpl_highlight-large {
    background-color: #f1e68a; /* Yellow */
    color: #000000; /* Black */
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border: 0.1rem solid #ff0000;
    max-width: 300ch;
}

.cpl_highlight-xlarge {
    background-color: #f1e68a; /* Yellow */
    color: #000000; /* Black */
    font-size: 1.2rem;
    font-weight: 600;
    padding: 0.4rem 0.8rem;
    border: 0.2rem solid #ff0000;
}

.validation-summary-errors {
    color: #333333 !important;
    background-color: #FFF09D;
    border: 1px solid #A00C4D;
    font-size: 0.8rem;
    padding: 15px 5px 0 5px;
    border-radius: 10px;
    margin-top: 0;
    margin-bottom: 1rem;
}

    .validation-summary-errors ul {
        margin-left: -10px;
    }

.validation-summary-valid {
    display: none;
}

.field-validation-error {
    color: #000000 !important;
    background-color: #FFF09D;
    border: 1px solid #A00C4D;
    border-radius: 5px;
    margin-top: 3px;
    margin-bottom: 5px;
    padding: 4px 8px;
    font-size: 0.8rem;
    font-weight: normal;
    display: inline-block;
}

.field-validation-valid {
    display: none;
}

.cpl_information-message {
    font-size: 1.2rem;
    font-weight: 600;
    padding: 0.3rem 0.75rem;
    margin: 0 -5px 12px -5px;
    /* IE */
    color: #343A40;
    color: var(--navbar-bgcolor);
    /* IE */
    background-color: #fafafa;
    background-color: var(--panel-bgcolor);
    border: 3px solid #108B97;
    border-radius: 10px;
    /* IE */
    box-shadow: 2px 2px 15px -6px rgba(0,0,0,0.4);
    box-shadow: var(--panel-box-shadow);
}

.cpl_discrete-text {
    font-size: 0.8rem;
    /* IE */
    color: #666666;
    color: var(--panel-txtcolor);
}

.cpl_discrete-dropdown {
    font-size: 0.9rem;
    color: var(--panel-txtcolor);
    background-color: transparent;
    border: 0;
    padding: 0;
    text-align: center;
}

.cpl_discrete-button {
    display: inline-block;
    padding: 0.25rem 0.4rem;
    line-height: 1.5;
    text-align: center;
    vertical-align: middle;
    font-weight: 400;
    font-size: 0.8rem;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: 0.2rem;
    user-select: none;
    cursor: pointer;
    background-color: transparent;
    color: #666666;
    color: var(--panel-txtcolor);
}

    .cpl_discrete-button:hover {
        color: #ffffff;
        background-color: #333333;
        border: 1px solid #000000;
    }

.cpl_loading-message {
    font-size: 1.125rem;
    padding: 60px 0 300px 0;
    text-align: center
}

    .cpl_loading-message img {
        width: 60px;
        height: 60px;
    }
/*#region Panel */
/* Content box on Details and Delete views */
.cpl_panel {
    width: 100%;
    /* Does not work with Chosen dropdown */
    /*overflow: auto;*/
    padding: 0.3rem 0.75rem 0.75rem 0.75rem;
    margin: 0 -5px 12px -5px;
    /* IE */
    color: #343A40;
    color: var(--panel-txtcolor);
    /* IE */
    background-color: #fafafa;
    background-color: var(--panel-bgcolor);
    /*border: 1px solid #dddddd;*/
    border-radius: 10px;
    /* IE */
    box-shadow: 2px 2px 15px -6px rgba(0,0,0,0.4);
    box-shadow: var(--panel-box-shadow);
}
    /* cpl_panel__heading -> h2 */
    .cpl_panel h2 {
        font-size: 1.1rem;
        margin-top: 0;
        padding-top: 0.2rem;
        padding-bottom: 0.3rem;
        margin-bottom: 0.5rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1px;
        border-bottom: 1px solid #eeeeee;
        color: var(--color-darker1);
    }

.cpl_panel-print {
    background-color: #ffffff !important;
    border: none !important;
    box-shadow: none;
}

/* Same as cpl_object-caption */
.cpl_object-title-1 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #666666;
    color: var(--panel-txtcolor);
    margin-bottom: 0.5rem;
}

.cpl_object-title-2 {
    font-size: 1.2rem;
    font-weight: 600;
}

.cpl_object-title-3 {
    font-size: 1rem;
    font-style: italic;
}

.cpl_no-borders {
    border: none !important;
}

.cpl_panel label {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0;
    margin-top: 0.5rem;
    position: relative;
    display: block;
    color: var(--color-darker1);
}

.cpl_sub-panel {
    padding: 0.8rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid #cccccc;
}
    /* cpl_sub-panel__heading -> h3 */
    .cpl_sub-panel h3 {
        margin: 0;
        font-size: 1.2rem;
        color: #333333;
    }

.cpl_sub-panel-level2 {
    padding: 0 0.8rem 0.8rem 0.8rem;
    border-radius: 0.3rem;
    border: 1px solid #cccccc;
    background-color: #f0f0f0;
}

/* TODO: replace with cpl_required-field */
.cpl_form-group-required label:after {
    content: " *";
    color: red;
}

.cpl_required-field:after {
    content: " *";
    color: red;
    position: absolute;
    /*top: 1px;*/
    padding-left: 3px;
}

.cpl_panel input[type=text], input[type=date], input[type=time], input[type=email], input[type=number], input[type=password], textarea, select {
    width: 100%;
    max-width: 150rem;
    display: block;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    background-color: #ffffff;
    background-clip: padding-box;
    border: 0.125rem solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    margin: 0;
}

    .cpl_panel input[type=text]:focus, input[type=date]:focus, input[type=email]:focus, input[type=number]:focus, input[type=password], textarea:focus, select:focus {
        color: #495057;
        background-color: #fff;
        border-color: #80bdff;
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }
/* e.g. Todo ul list */
.cpl_panel__items-ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .cpl_panel__items-ul > li {
        padding: 5px 0 5px 0;
        /* ###Light background border */
        border-bottom: 1px solid #eeeeee;
    }

        .cpl_panel__items-ul > li > a {
            color: #666666;
            color: var(--panel-txtcolor);
            text-decoration: none;
        }

        .cpl_panel__items-ul > li:hover {
            color: #000000;
            color: var(--panel-txtcolor-hover);
            background-color: #f3f3f3;
            background-color: var(--panel-bgcolor-hover);
        }

.cpl_panel__collapsible-item {
    background-color: #eeeeee;
    padding: 5px 10px;
    cursor: pointer;
}

    .cpl_panel__collapsible-item.collapsed {
        background-color: transparent;
        border-bottom: 1px solid #eeeeee;
    }

        .cpl_panel__collapsible-item.collapsed:hover {
            background-color: #eeeeee;
        }
/* Icon when the collapsible content is shown */
.cpl_caret-animated:after {
    font-family: "Font Awesome 5 Free";
    content: "\f0d8";
    float: right;
    margin-left: 15px;
    font-weight: 900; /* far 400, fas 900 */
    cursor: pointer;
}
/* Icon when the collapsible content is hidden */
.cpl_caret-animated.collapsed:after {
    content: "\f0d7";
}

/* Height is only important on wide screens when cpl_panel are floating next to each other */
@media (min-width: 768px) {
    .cpl_panel__col-group {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .cpl_panel {
        margin: 0 -0.5625rem 0.75rem -0.5625rem;
        line-height: unset !important;
    }

    .cpl_panel-full-height {
        height: calc(100vh - 180px);
    }

    .cpl_min-height__md-1 {
        /* 1 * 50px - 11 = 39px */
        min-height: 2.48rem;
        -ms-flex-positive: 1 !important;
        flex-grow: 1 !important;
    }

    .cpl_min-height__md-2 {
        /* 2 * 50px - 10 = 90px */
        min-height: 5.5rem;
        -ms-flex-positive: 2 !important;
        flex-grow: 2 !important;
    }

    .cpl_min-height__md-3 {
        /* 3 * 50px - 9 = 141px */
        min-height: 8.67rem;
        -ms-flex-positive: 3 !important;
        flex-grow: 3 !important;
    }

    .cpl_min-height__md-4 {
        /* 4 * 50px - 8 = 192px */
        min-height: 11.9rem;
        -ms-flex-positive: 4 !important;
        flex-grow: 4 !important;
    }

    .cpl_min-height__md-5 {
        /* 5 * 50px - 7 = 243px */
        min-height: 243px;
        -ms-flex-positive: 5 !important;
        flex-grow: 5 !important;
    }

    .cpl_min-height__md-6 {
        /* 6 * 50px - 6 = 294px */
        min-height: 18.5rem;
        -ms-flex-positive: 6 !important;
        flex-grow: 6 !important;
    }

    .cpl_min-height__md-7 {
        /* 7 * 50px - 5 = 345px */
        min-height: 22.05rem;
        -ms-flex-positive: 7 !important;
        flex-grow: 7 !important;
    }

    .cpl_min-height__md-8 {
        /* 8 * 50px - 4 = 396px */
        min-height: 25.35rem;
        -ms-flex-positive: 8 !important;
        flex-grow: 8 !important;
    }

    .cpl_min-height__md-9 {
        /* 9 * 50px - 3 = 447px */
        min-height: 28.55rem;
        -ms-flex-positive: 9 !important;
        flex-grow: 9 !important;
    }

    .cpl_min-height__md-10 {
        /* 10 * 50px - 2 = 498px */
        min-height: 31.7rem;
        -ms-flex-positive: 10 !important;
        flex-grow: 10 !important;
    }

    .cpl_min-height__md-11 {
        /* 11 * 50px - 1 = 549px */
        min-height: 34.75rem;
        -ms-flex-positive: 11 !important;
        flex-grow: 11 !important;
    }

    .cpl_min-height__md-12 {
        /* 12 * 50px - 0 = 600px */
        min-height: 38rem;
        -ms-flex-positive: 12 !important;
        flex-grow: 12 !important;
    }

    .cpl_min-height__md-13 {
        /* 13 * 50px + 1 = 651px */
        min-height: 40.6875rem;
        -ms-flex-positive: 13 !important;
        flex-grow: 13 !important;
    }

    .cpl_min-height__md-14 {
        /* 14 * 50px + 2 = 702px */
        min-height: 43.875rem;
        -ms-flex-positive: 14 !important;
        flex-grow: 14 !important;
    }

    .cpl_min-height__md-15 {
        /* 15 * 50px + 3 = 753px */
        min-height: 47.0625rem;
        -ms-flex-positive: 15 !important;
        flex-grow: 15 !important;
    }

    .cpl_min-height__md-16 {
        /* 16 * 50px + 4 = 804px */
        min-height: 50.25rem;
        -ms-flex-positive: 16 !important;
        flex-grow: 16 !important;
    }

    .cpl_min-height__md-17 {
        /* 17 * 50px + 5 = 855px */
        min-height: 53.4375rem;
        -ms-flex-positive: 17 !important;
        flex-grow: 17 !important;
    }

    .cpl_min-height__md-18 {
        /* 18 * 50px + 6 = 906px */
        min-height: 56.625rem;
        -ms-flex-positive: 18 !important;
        flex-grow: 18 !important;
    }

    /* ---- Max ----*/

    .cpl_max-height__md-1 {
        /* 1 * 50px - 11 = 39px */
        max-height: 2.48rem;
        overflow: auto;
    }

    .cpl_max-height__md-2 {
        /* 2 * 50px - 10 = 90px */
        max-height: 5.5rem;
        overflow: auto;
    }

    .cpl_max-height__md-3 {
        /* 3 * 50px - 9 = 141px */
        max-height: 8.67rem;
        overflow: auto;
    }

    .cpl_max-height__md-4 {
        /* 4 * 50px - 8 = 192px */
        max-height: 11.9rem;
        overflow: auto;
    }

    .cpl_max-height__md-5 {
        /* 5 * 50px - 7 = 243px */
        max-height: 243px;
        overflow: auto;
    }

    .cpl_max-height__md-6 {
        /* 6 * 50px - 6 = 294px */
        max-height: 18.5rem;
        overflow: auto;
    }

    .cpl_max-height__md-7 {
        /* 7 * 50px - 5 = 345px */
        max-height: 22.05rem;
        overflow: auto;
    }

    .cpl_max-height__md-8 {
        /* 8 * 50px - 4 = 396px */
        max-height: 25.35rem;
        overflow: auto;
    }

    .cpl_max-height__md-9 {
        /* 9 * 50px - 3 = 447px */
        max-height: 28.55rem;
        overflow: auto;
    }

    .cpl_max-height__md-10 {
        /* 10 * 50px - 2 = 498px */
        max-height: 31.7rem;
        overflow: auto;
    }

    .cpl_max-height__md-11 {
        /* 11 * 50px - 1 = 549px */
        max-height: 34.75rem;
        overflow: auto;
    }

    .cpl_max-height__md-12 {
        /* 12 * 50px - 0 = 600px */
        max-height: 38rem;
        overflow: auto;
    }

    .cpl_max-height__md-13 {
        /* 13 * 50px + 1 = 651px */
        max-height: 40.6875rem;
        overflow: auto;
    }

    .cpl_max-height__md-14 {
        /* 14 * 50px + 2 = 702px */
        max-height: 43.875rem;
        overflow: auto;
    }

    .cpl_max-height__md-15 {
        /* 15 * 50px + 3 = 753px */
        max-height: 47.0625rem;
        overflow: auto;
    }

    .cpl_max-height__md-16 {
        /* 16 * 50px + 4 = 804px */
        max-height: 50.25rem;
        overflow: auto;
    }

    .cpl_max-height__md-17 {
        /* 17 * 50px + 5 = 855px */
        max-height: 53.4375rem;
        overflow: auto;
    }

    .cpl_max-height__md-18 {
        /* 18 * 50px + 6 = 906px */
        max-height: 56.625rem;
        overflow: auto;
    }
}

/*#endregion */

.cpl_label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-darker1);
}

.cpl_div-onclick {
    cursor: pointer;
}

    .cpl_div-onclick:hover {
        background-color: #f0f0f0;
    }

.cpl_btn-xs {
    padding: 0.3rem 0.4rem;
    font-size: 0.7rem;
    line-height: 0.9;
    border-radius: 0.2rem;
}

.cpl_btn-secondary {
    background-color: #d6e1ff;
    color: #0e2e52;
    border-color: #1f4cb1;
}

    .cpl_btn-secondary:hover {
        background-color: #333333;
        color: #ffffff !important;
        border-color: #333333;
    }

/*#region Autocomplete */

.cpl_autocomplete {
    position: relative;
}
    /* Format input text box */
    .cpl_autocomplete input[type=text] {
        width: 100%;
        max-width: 150rem;
        display: block;
        padding: 0.375rem 0.75rem;
        font-size: 1rem;
        line-height: 1.5;
        background-color: #ffffff;
        background-clip: padding-box;
        border: 1px solid #ced4da;
        border-radius: 0.25rem;
        margin: 0;
        text-align: left;
    }

    /* Show caret at the right end of the autocomplete */
    .cpl_autocomplete::before {
        position: absolute;
        /* caret */
        content: " \25bc";
        top: 0.75rem;
        right: 0;
        height: 1.25rem;
        width: 1.5rem;
        font-size: 0.7rem;
        cursor: pointer;
    }

    .cpl_autocomplete .cpl_btn-clear {
        /* X */
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        top: 0.6rem;
        right: 1.7rem;
        height: 1.25rem;
        width: 1.25rem;
        font-size: 0.7rem;
        color: #999999;
        background-color: #ffffff;
        border: 1px solid #ffffff;
        border-radius: 50%;
        padding: 2px;
        cursor: pointer;
    }

        .cpl_autocomplete .cpl_btn-clear:hover {
            color: #ff0000;
            border: 1px solid #ff0000;
        }

/* To make autocomplete drop visible above modal dialog */
.ui-widget.ui-widget-content {
    z-index: 10000;
}
/* To limit the height of the autocomplete drop */
.ui-autocomplete {
    max-height: 400px;
    overflow-y: auto; /* prevent horizontal scrollbar */
    overflow-x: hidden; /* add padding to account for vertical scrollbar */
    z-index: 10000 !important;
}
/*#endregion */

/*#region Date range */

.daterangepicker th.week {
    color: #666666 !important;
    color: var(--panel-txtcolor) !important;
    font-size: 60% !important;
}

.daterangepicker td.week {
    color: #666666 !important;
    color: var(--panel-txtcolor) !important;
    font-size: 60% !important;
}

.cpl_date-range {
    position: relative;
    width: 100%;
    max-width: 100rem;
    display: block;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    background-color: #ffffff;
    background-clip: padding-box;
    border: 0.125rem solid #ced4da;
    border-radius: 0.25rem;
    margin: 0;
    text-align: left;
}

    .cpl_date-range span::after {
        position: absolute;
        /* caret */
        content: " \25bc";
        top: 0.65rem;
        right: -2px;
        height: 1.25rem;
        width: 1.5rem;
        font-size: 0.7rem;
        cursor: pointer;
    }

    .cpl_date-range .cpl_btn-clear {
        /* X */
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        top: 0.5rem;
        right: 1.6rem;
        height: 1.25rem;
        width: 1.25rem;
        font-size: 0.7rem;
        color: #999999;
        background-color: #ffffff;
        border: 1px solid #ffffff;
        border-radius: 50%;
        padding: 2px;
        cursor: pointer;
    }

        .cpl_date-range .cpl_btn-clear:hover {
            color: #ff0000;
            border: 1px solid #ff0000;
        }
/*#endregion */

/* Note: gets a horizontal scrollbar with this */
.cpl_row-in-row-compensation {
    margin-left: -15px !important;
    margin-right: -15px !important;
}
/* Note: removes the horizontal scrollbar on cpl_row-in-row-compensation with this */
.cpl_panel-no-scrollbars {
    overflow: hidden;
}

.cpl_row-in-row-compensation-less {
    margin-left: -5px !important;
    margin-right: -5px !important;
    /* No scrollbars */
    overflow: hidden;
}

.cpl_email-subject {
    font-weight: bold;
    font-size: 1.2rem;
    color: #666666;
    color: var(--panel-txtcolor);
    margin-bottom: 1rem;
}

.cpl_email-body {
    font-size: 1rem;
    color: #333333;
}

.cpl_min-height__md-1, .cpl_min-height__md-2, .cpl_min-height__md-3, .cpl_min-height__md-4, .cpl_min-height__md-5, .cpl_min-height__md-6, .cpl_min-height__md-7, .cpl_min-height__md-8, .cpl_min-height__md-9, .cpl_min-height__md-10, .cpl_min-height__md-11, .cpl_min-height__md-12 {
    position: relative;
    min-height: 1px;
}

/*#region Form controls */

.form-control {
    border-width: 0.125rem;
}

.cpl_form-control__wide {
    max-width: 30rem;
}

.cpl_form-control__full-width {
    max-width: 1000rem;
}

.cpl_form-control__small-quantity {
    width: 2.8rem !important;
    display: inline-block !important;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
}

.cpl_form-control__money {
    max-width: 5rem !important;
}

.cpl_form-control__number {
    text-align: right;
    max-width: 5rem !important;
}
/* Using jquery in certpal.ts for inputFilter */
.cpl_form-control__int {
    text-align: right;
    width: 5rem !important;
    max-width: 5rem !important;
    min-width: 5rem !important;
    overflow: hidden;
}

.cpl_form-control__decimal0d {
    text-align: right;
    width: 6rem !important;
    max-width: 6rem !important;
    min-width: 6rem !important;
    overflow: hidden;
}

.cpl_form-control__decimal1d {
    text-align: right;
    width: 6rem !important;
    max-width: 6rem !important;
    min-width: 6rem !important;
    overflow: hidden;
}

.cpl_form-control__decimal2d {
    text-align: right;
    width: 6rem !important;
    max-width: 6rem !important;
    min-width: 6rem !important;
    overflow: hidden;
}

.cpl_form-control-1rem {
    max-width: 1rem !important;
}

.cpl_form-control-2rem {
    max-width: 2rem !important;
}

.cpl_form-control-3rem {
    max-width: 3rem !important;
}

.cpl_form-control-4rem {
    max-width: 4rem !important;
}

.cpl_form-control-5rem {
    max-width: 5rem !important;
}

.cpl_form-control-6rem {
    max-width: 6rem !important;
}

.cpl_form-control-7rem {
    max-width: 7rem !important;
}

.cpl_form-control-8rem {
    max-width: 8rem !important;
}

.cpl_form-control-9rem {
    max-width: 9rem !important;
}

.cpl_form-control-10rem {
    max-width: 10rem !important;
}

.cpl_form-control-11rem {
    max-width: 11rem !important;
}

.cpl_form-control-12rem {
    max-width: 12rem !important;
}

.cpl_form-control-13rem {
    max-width: 13rem !important;
}

.cpl_form-control-14rem {
    max-width: 14rem !important;
}

.cpl_form-control-15rem {
    max-width: 15rem !important;
}

.cpl_form-control-16rem {
    max-width: 16rem !important;
}

.cpl_form-control-17rem {
    max-width: 17rem !important;
}

.cpl_form-control-18rem {
    max-width: 18rem !important;
}

.cpl_form-control-19rem {
    max-width: 19rem !important;
}

.cpl_form-control-20rem {
    max-width: 20rem !important;
}

.cpl_form-control__date {
    width: 11rem !important;
}

.cpl_form-control__time {
    max-width: 5.3rem !important;
}

.cpl_form-control__date-time {
    width: 11.25rem !important;
}

.cpl_form-control__zipcode {
    max-width: 5.4rem !important;
}

.cpl_form-control__duration {
    max-width: 5.3rem !important;
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
/*#endregion */

.cpl_zipcode-and-city {
}

    .cpl_zipcode-and-city .cpl_zipcode {
        display: inline-block;
    }

        .cpl_zipcode-and-city .cpl_zipcode input[type=text] {
            max-width: 5.4rem !important;
        }

    .cpl_zipcode-and-city .cpl_city {
        display: inline-block;
        width: calc(100% - 5.68rem);
    }

        .cpl_zipcode-and-city .cpl_city input[type=text] {
            max-width: 100rem !important;
        }

/* Fixed left column and dynamic right */
.cpl_fixed-dynamic-container {
    position: relative;
}

.cpl_fixed-dynamic-left-6rem {
    width: 6rem;
    position: absolute;
    top: 0;
    left: 0;
}

.cpl_fixed-dynamic-right-6rem {
    margin-left: 6rem;
}

/*#region Show and Hide */

/* Hidden - DO NOT USE d-none d-lg-block, it messes up table headings */
/* display: none - removes the element from the normal flow of the page allowing other elements to fill in */
/* visibility: hidden - leaves the element in the normal flow of the page such that is still occupies space */
@media screen and (max-width: 575px) {
    /* hide when xs 0-575px */
    .cpl_hide-when-xs {
        display: none;
        visibility: hidden;
    }
}

@media screen and (min-width: 576px) {
    /* hide when NOT xs 0-575px */
    .cpl_show-when-xs {
        display: none;
        visibility: hidden;
    }
}

@media screen and (min-width: 576px) and (max-width: 767px) {
    /* hide when sm 576-767px */
    .cpl_hide-when-sm {
        display: none;
        visibility: hidden;
    }
}

@media screen and (max-width: 575px), screen and (min-width: 768px) {
    /* hide when NOT sm 576-767px */
    .cpl_show-when-sm {
        display: none;
        visibility: hidden;
    }
}

@media screen and (max-width: 575px) {
    /* hide when NOT sm 576-767px OR MORE */
    .cpl_show-when-sm-or-more {
        display: none;
        visibility: hidden;
    }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    /* hide when md 768-991px */
    .cpl_hide-when-md {
        display: none;
        visibility: hidden;
    }
}

@media screen and (max-width: 767px), screen and (min-width: 992px) {
    /* hide when NOT md 768-991px */
    .cpl_show-when-md {
        display: none;
        visibility: hidden;
    }
}

@media screen and (max-width: 767px) {
    /* hide when NOT md 768-991px OR MORE */
    .cpl_show-when-md-or-more {
        display: none;
        visibility: hidden;
    }
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
    /* hide when lg 992-1199px */
    .cpl_hide-when-lg {
        display: none;
        visibility: hidden;
    }
}

@media screen and (max-width: 991px), screen and (min-width: 1200px) {
    /* hide when NOT lg 992-1199px */
    .cpl_show-when-lg {
        display: none;
        visibility: hidden;
    }
}

@media screen and (max-width: 991px) {
    /* hide when NOT lg 992-1199px OR MORE */
    .cpl_show-when-lg-or-more {
        display: none;
        visibility: hidden;
    }
}

@media screen and (min-width: 1200px) {
    /* hide when xl 1200-px */
    .cpl_hide-when-xl {
        display: none;
        visibility: hidden;
    }
}

@media screen and (max-width: 1199px) {
    /* hide when NOT xl 1200-px */
    .cpl_show-when-xl {
        display: none;
        visibility: hidden;
    }
}

/* display: none - removes the element from the normal flow of the page allowing other elements to fill in */
/* visibility: hidden - leaves the element in the normal flow of the page such that is still occupies space */
.cpl_hidden {
    display: none;
    visibility: hidden;
}

.cpl_visible {
    display: inherit;
    visibility: visible;
}
/*#endregion */

/* Bootstrap modal dialog */
.modal-header {
    /* Removes display flex */
    display: block;
    position: relative;
}

    .modal-header h3 {
        margin-top: 0;
        margin-bottom: 0;
        display: block;
    }

    .modal-header button {
        position: absolute;
        top: 1rem;
        right: 1rem;
    }

/* Modal dialog wide*/
.cpl_modal-wide {
    max-width: 80%;
}

@media (min-width: 1200px) {
    .cpl_modal-wide {
        max-width: 1150px;
    }
}

/*#region Good Work modal */

.cpl_good-work-modal {
    margin-top: 1rem;
    background-color: #fbf2aa;
    color: #222222;
    border: 0.5rem solid #e8b83a;
    border-radius: 2rem;
}

    .cpl_good-work-modal .modal-header {
        border-bottom: 0;
    }

    .cpl_good-work-modal .modal-footer {
        border: 0;
    }

        .cpl_good-work-modal .modal-footer .btn-outline-dark {
            background-color: #ffffff;
        }
/*#endregion */

.cpl_terms-modal {
    background-color: #f0f0f0;
    border: 5px solid #666666;
    border-radius: 15px;
}

.cpl_terms-body {
}

/*#region Attachments */

.cpl_attachments {
}

.cpl_attachments__icon {
    width: 2.625rem;
    /* eventual text under the icon */
    font-size: 0.75rem;
}

    .cpl_attachments__icon img {
        width: 2.625rem;
        height: 2.625rem;
    }

.cpl_attachments .cpl_attachments__row .cpl_attachments__name {
    min-height: 2.625rem;
    margin-left: 2.8125rem;
    margin-right: 2.8125rem;
    font-size: 0.875rem;
    display: flex;
    flex-flow: column;
    justify-content: center;
}

    .cpl_attachments .cpl_attachments__row .cpl_attachments__name a {
        color: #444444;
        text-decoration: none;
    }

        .cpl_attachments .cpl_attachments__row .cpl_attachments__name a:hover {
            text-decoration: underline;
        }

.cpl_attachments .cpl_attachments__row .cpl_attachments__remove-button {
    font-size: 0.75rem;
    width: 2.8125rem;
    padding-top: 0.625rem;
    text-align: right;
    float: right;
}
/*#endregion */

/*#region Index view */

.cpl_index-view__toolbox-ul {
    width: 100vw;
    margin-bottom: 0;
}

    .cpl_index-view__toolbox-ul .list-inline-item {
        /* In case of wrapping buttons */
        margin-bottom: 0.5rem;
    }

.cpl_index-view_search {
    border: 2px solid #888888;
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    margin-bottom: 0.5rem;
    width: 100%;
    background-color: #999999;
}

.cpl_index-view_search__search-button-activated {
    color: #ffffff;
    background-color: #000000;
}

.cpl_index-view_search .cpl_index-view_search__group {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
}

    .cpl_index-view_search .cpl_index-view_search__group .cpl_index-view_search__label-and-input {
        min-width: 280px;
        margin-right: 10px;
    }

        .cpl_index-view_search .cpl_index-view_search__group .cpl_index-view_search__label-and-input label {
            font-weight: 600;
            color: #ffffff;
            margin-bottom: 0;
        }

        .cpl_index-view_search .cpl_index-view_search__group .cpl_index-view_search__label-and-input input {
            width: 100%;
            max-width: unset;
            vertical-align: middle;
            padding: 0.375rem 0.75rem;
            border: 1px solid #ced4da;
            border-radius: 0.25rem;
            display: block;
        }

            .cpl_index-view_search .cpl_index-view_search__group .cpl_index-view_search__label-and-input input[type=checkbox] {
                width: 20px;
            }

.cpl_index-view_search .cpl_index-view_search__checkbox-group {
    margin-top: 1rem;
}

    .cpl_index-view_search .cpl_index-view_search__checkbox-group .cpl_checkbox-and-label {
        margin-bottom: 0.5rem;
    }

        .cpl_index-view_search .cpl_index-view_search__checkbox-group .cpl_checkbox-and-label label {
            color: #ffffff;
        }

.cpl_index-view_search .cpl_index-view_search__buttons {
    margin-top: 10px;
}

.cpl_index-view_search__buttons {
    margin: 10px 0 0 0;
}

.cpl_index-view_search__search-button {
    color: #000000;
    background-color: #cccccc;
}

    .cpl_index-view_search__search-button:hover {
        color: #ffffff;
        background-color: #28a745;
    }

.cpl_index-view_search__clear-search-button {
    color: #000000;
    background-color: #cccccc;
}

    .cpl_index-view_search__clear-search-button:hover {
        color: #000000;
        background-color: #ffffff;
    }

.cpl_index-view_search-result__list-table {
    font-size: 0.875rem;
    border-radius: 10px;
    /* IE */
    background-color: #fafafa;
    background-color: var(--panel-bgcolor);
    /* IE */
    box-shadow: 2px 2px 15px -5px rgba(0,0,0,0.4);
    box-shadow: var(--panel-box-shadow);
}

@media (min-width: 992px) {
    .cpl_index-view_search-result__list-table {
        font-size: 1rem;
    }
}

.cpl_sorting-information-lg {
    position: absolute;
    padding: 0.1875rem 0 0 0.3125rem;
    color: #666666;
    color: var(--panel-txtcolor);
    font-size: 0.7rem;
    visibility: hidden;
}

@media (min-width: 992px) {
    .cpl_sorting-information-lg {
        visibility: visible;
    }

        .cpl_sorting-information-lg:hover {
            color: #000000;
        }
}

.cpl_table-compact {
    width: 100%;
}

    /* A small screen requires larger distance between table rows to be clickable */
    .cpl_table-compact tr {
        height: 2rem;
    }

@media (min-width: 768px) {
    .cpl_table-compact tr {
        height: 1.5rem;
    }
}

@media (min-width: 992px) {
    .cpl_table-compact tr {
        height: 1rem;
    }
}

.cpl_table-compact th {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-darker1);
}

.cpl_table__sort-order-icon {
    font-size: 0.75rem;
    /* ###VeryLightColor */
    color: #b9d4f9;
}

.cpl_table__tr-highlight {
    background-color: #fffbce;
    border-top: 3px solid yellow;
    border-bottom: 3px solid yellow;
}

.cpl_table__tr-totals {
    color: #666666;
    color: var(--panel-txtcolor);
    border-top: 3px solid #cccccc;
    font-weight: 700;
}

.cpl_table__tr-sub-header {
    font-size: 1rem;
    font-weight: 600;
    color: #666666;
    color: var(--panel-txtcolor);
}

.cpl_table__td-center {
    text-align: center;
    overflow: hidden;
}

.cpl_table__td-right {
    text-align: right;
    overflow: hidden;
}
/* max -1 234 567 {0:N0} */
.cpl_table__td-money {
    text-align: right;
    width: 7rem;
    max-width: 7rem;
    min-width: 7rem;
    overflow: hidden;
}
/* max -1 234 567 kr {0:C0} */
.cpl_table__td-money-kr {
    text-align: right;
    width: 7.4rem;
    max-width: 7.4rem;
    min-width: 7.4rem;
    overflow: hidden;
}

.cpl_table__td-edit-money {
    text-align: right;
    width: 12rem;
    max-width: 12rem;
    min-width: 12rem;
    overflow: hidden;
}

.cpl_table__td-small-money {
    text-align: right;
    width: 6rem;
    max-width: 6rem;
    min-width: 6rem;
    overflow: hidden;
}

.cpl_table__td-edit-small-money {
    text-align: right;
    width: 6rem;
    max-width: 6rem;
    min-width: 6rem;
    overflow: hidden;
}

.cpl_table__td-quantity {
    text-align: right;
    width: 6rem;
    max-width: 6rem;
    min-width: 6rem;
    overflow: hidden;
}

.cpl_table__td-edit-quantity {
    text-align: right;
    width: 6rem !important;
    max-width: 6rem !important;
    min-width: 6rem !important;
    overflow: hidden;
}
/* e.g. 2018-08-31 */
.cpl_table__td-date {
    text-align: left;
    /* 5.2rem was to small on certain phones 2020-03-02 */
    width: 5.7rem;
    max-width: 5.7rem;
    min-width: 5.7rem;
    overflow: hidden;
    white-space: nowrap;
}

.cpl_table__td-edit-date {
    text-align: left;
    width: 9.4rem;
    max-width: 9.4rem;
    min-width: 9.4rem;
    overflow: hidden;
    white-space: nowrap;
}

.cpl_table__td-date-and-time {
    text-align: left;
    width: 7.5rem;
    max-width: 7.5rem;
    min-width: 7.5rem;
    overflow: hidden;
    white-space: nowrap;
}

.cpl_table__td-edit-date-and-time {
    text-align: left;
    width: 7.5rem;
    max-width: 7.5rem;
    min-width: 7.5rem;
    overflow: hidden;
    white-space: nowrap;
}

.cpl_table__td-chkbox {
    text-align: center;
    width: 2.5rem;
    max-width: 2.5rem;
    min-width: 2.5rem;
    overflow: hidden;
}

.cpl_table__td-edit-chkbox {
    text-align: center;
    width: 2.5rem;
    max-width: 2.5rem;
    min-width: 2.5rem;
    overflow: hidden;
}
/* e.g. Ta bort */
.cpl_table__td-delete {
    text-align: center;
    width: 4rem;
    max-width: 4rem;
    min-width: 4rem;
    overflow: hidden;
}
/* e.g. PDF icon */
.cpl_table__td-icon {
    text-align: center;
    width: 2rem;
    max-width: 2rem;
    min-width: 2rem;
    overflow: hidden;
}

.cpl_table__td-isactive {
    text-align: center;
    width: 6.25rem;
    max-width: 6.25rem;
    min-width: 6.25rem;
    overflow: hidden;
}

.cpl_table__td-left-1rem {
    text-align: left;
    width: 1rem;
    max-width: 1rem;
    min-width: 1rem;
    overflow: hidden;
}

.cpl_table__td-left-2rem {
    text-align: left;
    width: 2rem;
    max-width: 2rem;
    min-width: 2rem;
    overflow: hidden;
}

.cpl_table__td-left-3rem {
    text-align: left;
    width: 3rem;
    max-width: 3rem;
    min-width: 3rem;
    overflow: hidden;
}

.cpl_table__td-left-4rem {
    text-align: left;
    width: 4rem;
    max-width: 4rem;
    min-width: 4rem;
    overflow: hidden;
}

.cpl_table__td-left-5rem {
    text-align: left;
    width: 5rem;
    max-width: 5rem;
    min-width: 5rem;
    overflow: hidden;
}

.cpl_table__td-left-6rem {
    text-align: left;
    width: 6rem;
    max-width: 6rem;
    min-width: 6rem;
    overflow: hidden;
}

.cpl_table__td-left-7rem {
    text-align: left;
    width: 7rem;
    max-width: 7rem;
    min-width: 7rem;
    overflow: hidden;
}

.cpl_table__td-left-8rem {
    text-align: left;
    width: 8rem;
    max-width: 8rem;
    min-width: 8rem;
    overflow: hidden;
}

.cpl_table__td-center-1rem {
    text-align: center;
    width: 1rem;
    max-width: 1rem;
    min-width: 1rem;
    overflow: hidden;
}

.cpl_table__td-center-2rem {
    text-align: center;
    width: 2rem;
    max-width: 2rem;
    min-width: 2rem;
    overflow: hidden;
}

.cpl_table__td-center-3rem {
    text-align: center;
    width: 3rem;
    max-width: 3rem;
    min-width: 3rem;
    overflow: hidden;
}

.cpl_table__td-center-4rem {
    text-align: center;
    width: 4rem;
    max-width: 4rem;
    min-width: 4rem;
    overflow: hidden;
}

.cpl_table__td-center-5rem {
    text-align: center;
    width: 5rem;
    max-width: 5rem;
    min-width: 5rem;
    overflow: hidden;
}

.cpl_table__td-center-6rem {
    text-align: center;
    width: 6rem;
    max-width: 6rem;
    min-width: 6rem;
    overflow: hidden;
}

.cpl_table__td-center-7rem {
    text-align: center;
    width: 7rem;
    max-width: 7rem;
    min-width: 7rem;
    overflow: hidden;
}

.cpl_table__td-center-8rem {
    text-align: center;
    width: 8rem;
    max-width: 8rem;
    min-width: 8rem;
    overflow: hidden;
}

.cpl_table__td-right-1rem {
    text-align: right;
    width: 1rem;
    max-width: 1rem;
    min-width: 1rem;
    overflow: hidden;
}

.cpl_table__td-right-2rem {
    text-align: right;
    width: 2rem;
    max-width: 2rem;
    min-width: 2rem;
    overflow: hidden;
}

.cpl_table__td-right-3rem {
    text-align: right;
    width: 3rem;
    max-width: 3rem;
    min-width: 3rem;
    overflow: hidden;
}

.cpl_table__td-right-4rem {
    text-align: right;
    width: 4rem;
    max-width: 4rem;
    min-width: 4rem;
    overflow: hidden;
}

.cpl_table__td-right-5rem {
    text-align: right;
    width: 5rem;
    max-width: 5rem;
    min-width: 5rem;
    overflow: hidden;
}

.cpl_table__td-right-6rem {
    text-align: right;
    width: 6rem;
    max-width: 6rem;
    min-width: 6rem;
    overflow: hidden;
}

.cpl_table__td-right-7rem {
    text-align: right;
    width: 7rem;
    max-width: 7rem;
    min-width: 7rem;
    overflow: hidden;
}

.cpl_table__td-right-8rem {
    text-align: right;
    width: 8rem;
    max-width: 8rem;
    min-width: 8rem;
    overflow: hidden;
}

.row {
    margin-left: -10px;
    margin-right: -10px;
}

.pagination-container {
    margin-top: 0.3125rem;
}

    .pagination-container .pagination {
    }

        .pagination-container .pagination a {
            padding: 0.3125rem 0.625rem;
            border-radius: 0.3125rem;
            color: #333333;
        }

            .pagination-container .pagination a:hover {
                background-color: silver;
                text-decoration: none;
            }

        .pagination-container .pagination .active a {
            color: #ffffff;
            /* IE */
            background-color: #108B97;
            background-color: var(--header-bgcolor);
        }

        .pagination-container .pagination .PagedList-ellipses a {
            padding: 0.3125rem 0;
        }

            .pagination-container .pagination .PagedList-ellipses a:hover {
                background-color: transparent;
            }
/*#endregion */

/*#region Create view */

.cpl_create-view__toolbox-ul {
    border-bottom: 1px solid #cccccc;
    margin-bottom: 0.5rem;
}

    .cpl_create-view__toolbox-ul .list-inline-item {
        /* In case of wrapping buttons */
        margin-bottom: 0.5rem;
    }
/*#endregion */

/*#region Details view */

.cpl_object-caption {
    font-size: 1.5rem;
    font-weight: 600;
    /* Large text line-height < 1 */
    line-height: 0.95;
    color: #666666;
    color: var(--panel-txtcolor);
    margin-bottom: 0.5rem;
}

.cpl_details-view__toolbox-ul {
    border-bottom: 1px solid #cccccc;
    margin-bottom: 0.5rem;
}

    .cpl_details-view__toolbox-ul .list-inline-item {
        /* In case of wrapping buttons */
        margin-bottom: 0.5rem;
    }

.cpl_created-info {
    margin-top: 10px;
    margin-bottom: 10px;
}

    .cpl_created-info a {
        font-size: 0.75rem;
    }

        .cpl_created-info a:hover, cpl_created-info a:visited, cpl_created-info a:link, cpl_created-info a:active {
            color: #000000;
            background-color: #FDFDC6;
            text-decoration: none;
        }

.cpl_created-info__link {
    text-decoration: none;
}

.cpl_created-info__body {
    font-size: 0.75rem;
    padding: 0.75rem;
    color: #333333;
    border: 1px solid #b8b8b8;
    background-color: #FDFDC6;
    border-radius: 0.4rem;
}

.cpl_phone-no {
}

.cpl_e-mail {
    /* Large text line-height < 1 */
    line-height: 0.80;
    margin-bottom: 0.2rem;
}

/*#endregion */
/*#region Edit view */
.cpl_edit-view__toolbox-ul {
    border-bottom: 1px solid #cccccc;
    margin-bottom: 0.5rem;
}

    .cpl_edit-view__toolbox-ul .list-inline-item {
        /* In case of wrapping buttons */
        margin-bottom: 0.5rem;
    }
/*#endregion */

/*#region Delete view */

.cpl_delete-view__confirmation-text {
    font-size: 1.8rem;
    font-weight: 600;
    /* IE */
    color: #dc3545;
    color: var(--danger);
    margin-top: -0.5rem;
    margin-bottom: 0.5rem;
}

.cpl_delete-view__toolbox-ul {
    border-bottom: 1px solid #cccccc;
    margin-bottom: 0.5rem;
}

    .cpl_delete-view__toolbox-ul .list-inline-item {
        /* In case of wrapping buttons */
        margin-bottom: 0.5rem;
    }
/*#endregion */

/*----------------------------------------------------------
             --- ContractorOrganization Views ---
----------------------------------------------------------*/
.cpl_organization-details-box {
}

.cpl_organization-logo {
    margin: 1.5rem 0 0.5rem 0;
}

    .cpl_organization-logo img {
        width: 100%;
        max-width: 20rem;
        max-height: 10rem;
    }

.cpl_white-label-logo {
    background-image: url('../../Content/Images/CertPalLogoTextOnly1530x310.png');
    /* You must set size - keep in mind the proportions */
    width: 9.6rem;
    height: 1.9rem;
    background-position: center;
    background-repeat: no-repeat;
    /* Resize the background image to cover the entire container */
    background-size: cover;
}

.cpl_organization-logo-list {
    margin: 0;
    max-width: 7rem;
    max-height: 2.5rem;
    overflow: hidden;
}

    .cpl_organization-logo-list img {
        width: 100%;
    }

.cpl_cor-configurationflags {
    padding: 10px;
    font-size: 0.75rem;
    background-color: #f7f7f7;
    border: 1px solid #e8e8e8;
}

    .cpl_cor-configurationflags h5 {
        color: #333333;
        padding: 0 0 5px 0;
        margin: 0;
    }

    .cpl_cor-configurationflags h6 {
        color: #333333;
        font-style: italic;
        padding: 5px 0 5px 0;
        margin: 0;
    }

.cpl_cor-configurationflags-edit {
}

    .cpl_cor-configurationflags-edit h6 {
        color: #333333;
        font-style: italic;
        padding: 10px 0 0 0;
        margin: 0;
    }

/*----------------------------------------------------------
                 --- ContractorUser Views ---
----------------------------------------------------------*/
.cpl_user-taxno {
    font-size: 1rem;
}

/* --- XSmall - bookings list ---*/
.cpl_cus-xsmall {
    width: 100%;
    margin-bottom: 10px;
}

    .cpl_cus-xsmall > .cpl_user-photo {
        width: 80px;
        margin-right: 10px;
        float: left;
    }

        .cpl_cus-xsmall > .cpl_user-photo > a > img {
            width: 100%;
            /* ###Light background border */
            border: 1px solid #eeeeee;
            /* ###Light background */
            background-color: #f3f3f3;
        }

    .cpl_cus-xsmall h3 {
        margin-top: 10px;
    }

/* --- Small - search list ---*/
.cpl_cus-small {
    width: 100%;
    margin-bottom: 10px;
}

    .cpl_cus-small > .cpl_user-photo {
        max-width: 180px;
    }

    .cpl_cus-small .cpl_user-photo img {
        width: 100%;
        /* ###Light background border */
        border: 1px solid #eeeeee;
        /* ###Light background */
        background-color: #f3f3f3;
    }

@media (min-width: 768px) {
    .cpl_cus-small .cpl_user-photo {
        max-width: 160px;
    }
}

/* --- Medium - parent child list ---*/
.cpl_user-medium-box {
    width: 100%;
    margin-bottom: 10px;
}

    .cpl_user-medium-box .cpl_user-photo {
        max-width: 400px;
    }

        .cpl_user-medium-box .cpl_user-photo img {
            width: 100%;
            /* ###Light background border */
            border: 1px solid #eeeeee;
            /* ###Light background */
            background-color: #f3f3f3;
        }

@media (min-width: 768px) {
    .cpl_user-medium-box {
        margin-right: 10px;
        margin-bottom: 10px;
        max-width: 200px;
        display: inline-block;
        border-bottom: 1px solid #cccccc;
    }

        .cpl_user-medium-box .cpl_user-photo {
            max-width: 160px;
        }

        .cpl_user-medium-box h3 {
            font-size: 1.125rem;
            margin: 5px 0 0 0;
        }
}
/* --- Large - details ---*/
.cpl_user-large-box {
    width: 100%;
    margin-bottom: 10px;
}

    .cpl_user-large-box > .cpl_cus-logo {
        margin: 10px 0 10px 0;
        max-width: 400px;
        max-height: 150px;
    }

        .cpl_user-large-box > .cpl_cus-logo img {
            width: 100%;
        }

    .cpl_user-large-box > .cpl_user-photo {
        max-width: 402px;
        margin-bottom: 10px;
        overflow: hidden;
    }

        .cpl_user-large-box > .cpl_user-photo > img {
            width: 100%;
            /* ###Light background border */
            border: 1px solid #eeeeee;
            /* ###Light background */
            background-color: #f3f3f3;
        }

@media (min-width: 768px) {
    .cpl_user-large-box > .cpl_user-photo {
        max-width: 403px;
    }

    .cpl_user-large-box h3 {
        font-size: 1.5625rem;
        margin: 5px 0 5px 0;
    }
}

.cpl_cus-det-photo {
    width: 100%;
    max-width: 400px;
}

.cpl_cer-certificate {
    width: 100%;
    max-width: 400px;
}

.cpl_cus-cert-box {
    margin-right: 15px;
}

    .cpl_cus-cert-box:hover {
        cursor: pointer;
        /* ###Light background */
        background-color: #f3f3f3;
    }

.cpl_cus-cert-image-box {
    /* ###Light background border */
    border: 1px solid #eeeeee;
}

.cpl_cus-cert-image {
    width: 100%;
}

.cpl_cus-cert-header {
    color: #000000;
}

.cpl_cus-cert-body {
    font-style: italic;
    margin-bottom: 15px;
    color: #666666;
    color: var(--panel-txtcolor);
}

/*----------------------------------------------------------
       --- Contractor user configuration settings ---
----------------------------------------------------------*/
.cpl_UserConfigurationFlagsList {
}

    .cpl_UserConfigurationFlagsList li {
        margin-left: -20px;
    }

/*#region Certificate diagram */
.cpl_certificate-diagram {
    width: 100%;
    max-width: 1200px;
}

.cpl_certificate-diagram-tools {
    text-align: right;
}

    .cpl_certificate-diagram-tools .cpl_info-text {
        /*width: 100%;*/
        text-align: right;
        color: #999999;
        font-style: italic;
        display: inline;
        padding-right: 5px;
    }

.cpl_certificate-diagram .cpl_certificate-diagram-item {
    cursor: pointer;
    width: 100%;
}

    .cpl_certificate-diagram .cpl_certificate-diagram-item:hover {
        /* ###Light background */
        background-color: #dddddd;
    }

    .cpl_certificate-diagram .cpl_certificate-diagram-item > label {
        text-align: left;
        font-size: 0.75rem;
        font-weight: normal;
        white-space: nowrap;
        cursor: pointer;
        color: #666666;
        color: var(--panel-txtcolor);
    }

    .cpl_certificate-diagram .cpl_certificate-diagram-item > ul {
        border: 0;
        width: 100%;
        margin: -5px 5px 0 0;
        padding: 0;
        background-color: #ffffff;
        white-space: nowrap;
        overflow: hidden;
    }

    .cpl_certificate-diagram .cpl_certificate-diagram-item ul li {
        display: inline-block;
        padding-top: 0.14rem;
        font-size: 0.625rem;
        height: 1.3rem;
        border: 1px solid #808080;
        margin-right: -5px;
        text-align: center;
    }

.cpl_certificate-diagram-bar_missing {
    /* Missing certificates - gray */
    /* IE */
    background-color: #eeeeee;
    background-color: var(--status-color-to-do);
    color: #000000;
}

.cpl_certificate-diagram-bar_urgent {
    /* Urgent matters - red */
    /* IE */
    background-color: #ffb3a1;
    background-color: var(--status-color-urgent);
    color: #000000;
}

.cpl_certificate-diagram-bar_expire-soon {
    /* Certificates soon expire - yellow */
    /* IE */
    background-color: #ffe9a9;
    background-color: var(--status-color-warning);
    color: #000000;
}

.cpl_certificate-diagram-bar_rfq {
    /* Request for quotation - purple */
    /* IE */
    background-color: #deb979;
    background-color: var(--status-color-rfq);
    color: #000000;
}

.cpl_certificate-diagram-bar_education-booked {
    /* Booked courses - blue */
    /* IE */
    background-color: #c1cafd;
    background-color: var(--status-color-on-track);
    color: #000000;
}

.cpl_certificate-diagram-bar_still-active {
    /* Certificates still valid after 6 months - green */
    /* IE */
    background-color: #d7f3d2;
    background-color: var(--status-color-ok);
    color: #000000;
}

.cpl_certificate-diagram-footer {
    font-size: 0.9rem;
    padding-bottom: 5px;
}

.cpl_certificate-diagram-legend-item {
    font-size: 0.7rem;
    text-align: center;
    min-width: 3rem;
    border-radius: 10px;
    border: 1px solid #808080;
    display: inline-block;
    margin-bottom: 0.4rem;
}

.cpl_certificate-diagram-footer .cpl_cov-legend-link {
    width: unset;
    display: inline-block;
    text-align: left;
    margin-right: 5px;
}

.cpl_certificate-diagram-footer a {
    text-decoration: none;
    color: #333333;
    font-size: 0.8rem;
}

    .cpl_certificate-diagram-footer a:hover {
        text-decoration: underline;
        color: #1414FF;
    }

.cpl_certificate-diagram-footer .cpl_cov-legend {
    display: inline-block;
    font-size: 0.8rem;
    padding: 0 10px 1px 10px;
    margin-right: 5px;
    border-radius: 10px;
}

.cpl_cer-status-indicator {
    text-align: center;
    border-radius: 5px;
    padding: 2px 0 2px 0;
    font-size: 0.625rem;
    width: 100px;
}

    .cpl_cer-status-indicator a {
        color: #333333;
    }

@media (min-width: 1240px) {
    .cpl_certificate-diagram {
        padding-bottom: 1rem;
    }

        .cpl_certificate-diagram .cpl_certificate-diagram-item > label {
            width: 30%;
            max-width: 300px;
            padding-right: 10px;
            display: inline-block;
        }

        .cpl_certificate-diagram .cpl_certificate-diagram-item > ul {
            width: 70%;
            max-width: 900px;
            display: inline-block;
            position: relative;
            top: 6px;
        }

    .cpl_certificate-diagram-footer {
        padding-bottom: 15px;
    }

        .cpl_certificate-diagram-footer .cpl_cov-legend-link {
            width: 130px;
            display: inline-block;
            text-align: right;
            margin-right: 10px;
        }
}
/*#endregion */

/*#region Certificate urgent list */
.cpl_cer-urgent-list {
    display: grid;
    grid-gap: 0;
    /* Columns: Date, CusCaption, EtyName, Status, Actions */
    grid-template-columns: minmax(4rem, 10rem) minmax(2rem, 15rem) minmax(4rem, 15rem) minmax(4rem, auto) minmax(6rem, 10rem);
    font-size: 0.8rem;
    max-width: 72rem;
    margin-bottom: 2rem;
}

    .cpl_cer-urgent-list h3 {
        font-size: 0.7rem;
        padding: 0.15rem 0;
        margin: 0;
        color: #333333;
        background-color: #dddddd;
    }

    .cpl_cer-urgent-list p {
        color: #333333;
        padding: 0.5rem 0;
        margin: 0;
        border-bottom: 1px solid #cccccc;
    }

    .cpl_cer-urgent-list .buttons {
        padding: 0.5rem 0;
        border-bottom: 1px solid #cccccc;
    }

        .cpl_cer-urgent-list .buttons a {
            display: block;
            color: #666666;
            color: var(--panel-txtcolor);
            margin-bottom: 0.8rem;
        }

            .cpl_cer-urgent-list .buttons a:hover {
                color: #ffffff;
                background-color: #343a40;
                text-decoration: none;
            }

        .cpl_cer-urgent-list .buttons .primary {
            font-size: 0.875rem;
            line-height: 1.5;
            padding: 0.25rem 0.5rem;
            color: #343a40;
            background-color: #ffffff;
            border: 1px solid #343a40;
            border-radius: 0.2rem;
        }
/*#endregion */

/*----------------------------------------------------------
                 --- Certificate Views ---
----------------------------------------------------------*/
/* Certificate Helper */

/* TODO: Check if cer- needed! */
.cpl_cer-front > img {
    width: 100%;
    border: 2px solid #cccccc;
    border-radius: 7px;
    background-color: #f3f3f3;
}

.cpl_cer-back > img {
    width: 100%;
    border: 2px solid #cccccc;
    border-radius: 7px;
    background-color: #f3f3f3;
    box-shadow: 3px 3px 10px 0px rgba(0,0,0,0.15);
}

.cpl_cer-data-sheet {
}

/* --- Small - search list ---*/
.cpl_cer-small {
    width: 100%;
    margin-bottom: 10px;
}

    .cpl_cer-small > h4 {
        font-size: 0.75rem;
    }

    .cpl_cer-small > img {
        width: 100%;
        max-width: 200px;
        /* ###Light background border */
        border: 1px solid #eeeeee;
        /* ###Light background */
        background-color: #f3f3f3;
    }

    .cpl_cer-small > p {
    }

@media (min-width: 768px) {
    .cpl_cer-small > img {
        max-width: 450px;
    }

    .cpl_cer-small h3 {
        color: #333333;
        margin: 5px 0 2px 0;
        font-size: 1.25rem;
    }
}

/* --- Medium - parent child list ---*/
.cpl_cer-medium {
    padding: 0.4rem;
    border: 1px solid #dddddd;
    border-radius: 10px;
    background-color: #FAFAFA;
    width: 100%;
    max-width: 800px;
    margin-bottom: 10px;
    cursor: pointer;
}

    .cpl_cer-medium:hover {
        background-color: #f0f0f0;
    }

    .cpl_cer-medium > h4 {
        color: #666666;
        color: var(--panel-txtcolor);
        font-size: 0.875rem;
        font-weight: bold;
    }

    .cpl_cer-medium > img {
        width: 100%;
        max-width: 800px;
        /* ###Light background border */
        border: 1px solid #eeeeee;
        /* ###Light background */
        background-color: #f3f3f3;
    }

    .cpl_cer-medium > p {
    }

.cpl_cer-medium-header {
    padding: 10px 15px;
    margin: 0 0 10px 0;
    border-radius: 3px;
    border: 1px solid #dddddd;
    color: #333;
    background-color: #f5f5f5;
}

/* HtmlHelper GetListOfCertificatesAsHtml */
.cpl_cer-medium-list {
}

    .cpl_cer-medium-list p {
    }

@media (min-width: 768px) {
    .cpl_cer-medium-header {
        margin: 0 -15px 10px -15px;
    }
}

/* --- Large - details ---*/
.cpl_cer-large {
    width: 100%;
    margin-bottom: 10px;
}

    .cpl_cer-large > h4 {
    }

    .cpl_cer-large > img {
        width: 100%;
        /* ###Light background border */
        border: 1px solid #eeeeee;
        /* ###Light background */
        background-color: #f3f3f3;
    }

    .cpl_cer-large > p {
    }

.cpl_cer-details {
    font-style: italic;
    margin-top: 10px;
    padding: 5px;
    color: #666666;
    color: var(--panel-txtcolor);
    /* ###Light background border */
    border: 1px solid #ff0000;
    /* ###Light background */
    background-color: #f3f3f3;
}

@media (min-width: 768px) {
}

/* Create */
.cpl_cer-images-box {
}

.cpl_cer-image {
    padding-bottom: 5px;
    margin-bottom: 10px;
    border: 1px solid #f0f0f0;
    background-color: #f8f8f8;
}

    .cpl_cer-image > img {
        width: 100%;
        max-width: 600px;
    }

/*----------------------------------------------------------
                 --- Education Views ---
----------------------------------------------------------*/

.cpl_edu-small {
}

    .cpl_edu-small h4 {
        color: #333333;
        font-size: 1rem;
    }

    .cpl_edu-small img {
        max-width: 60px;
    }

/* TODO: add medium and large too when needed */

.cpl_eor-logo {
    max-width: 500px;
    padding-right: 30px;
}

    .cpl_eor-logo img {
        width: 100%;
    }

.cpl_eor-list-icon {
    max-height: 60px;
    padding-right: 10px;
}

.cpl_eor-header-icon {
    max-height: 80px;
}

.cpl_eor-body {
    padding: 10px;
    max-width: 800px;
    /* ###Light background border */
    border: 1px solid #eeeeee;
    /* ###Light background */
    background-color: #f3f3f3;
}

    /* Headers */
    /*.cpl_eor-body dt {
    }*/

    /* Info text */
    .cpl_eor-body dd {
        padding-bottom: 10px;
    }
/* Education Description field with potential long text */
.cpl_edu-list-description {
    text-decoration: none;
    min-width: 150px;
}
/* Education TargetGroup field with potential long text */
.cpl_edu-list-targetgroup {
    text-decoration: none;
    min-width: 150px;
}

.cpl_eor-comment {
    color: #666666;
    color: var(--panel-txtcolor);
    font-style: italic;
    font-size: 0.875rem;
    margin-top: 10px;
}

.cpl_eor-contact {
    /*color: #ff0000;*/
}

/*----------------------------------------------------------
                 --- EducatorOrganization Views ---
----------------------------------------------------------*/
.cpl_eor-logo-list {
    margin: 0;
    width: 120px;
    max-height: 70px;
    overflow: hidden;
}

    .cpl_eor-logo-list img {
        width: 100%;
    }

/* EorActionLog */
.cpl_eor-action-log {
}

    .cpl_eor-action-log .cpl_item {
        border-bottom: 1px solid #a2a2a2;
        padding-bottom: 5px;
        margin-bottom: 5px;
    }

        .cpl_eor-action-log .cpl_item .cpl_date-time {
            padding-right: 5px;
            color: #848484;
        }

        .cpl_eor-action-log .cpl_item .cpl_performer {
            color: #848484;
            font-style: italic;
        }

        .cpl_eor-action-log .cpl_item .cpl_event {
        }

/*----------------------------------------------------------
                 --- EventBooking Views ---
----------------------------------------------------------*/
.cpl_evb-message-textarea {
    width: 100%;
    max-width: unset !important;
    margin-bottom: 10px;
}

.cpl_evb-price {
    font-size: 1rem;
    padding-right: 10px;
    padding-top: 5px;
}

.cpl_evb-waitinglist-box {
    text-align: center;
    padding: 10px;
    max-width: 650px;
}

/* EventBooking detail view */

.cpl_evb-course-info-box {
    padding: 10px;
    /* ###Light background border */
    border: 1px solid #eeeeee;
    /* ###Light background */
    background-color: #f3f3f3;
}

/*----------------------------------------------------------
                   --- Home View ---
----------------------------------------------------------*/
.cpl_dashboard-graph {
    max-width: 400px;
    width: 100%;
}

.cpl_home-banner {
    width: 100%;
}

@media (min-width: 992px) {
    .cpl_home-banner {
    }
}

/* Stop sign colors */
.cpl_error-text {
    font-weight: 600;
    padding: 0.3125rem;
    margin-bottom: 0.625rem;
    max-width: 30rem;
    color: #000000;
    border: 0.25rem solid #ff0033;
    background-color: #ffd908;
}

/* Lighter than error */
.cpl_warning-text {
    padding: 0.125rem 0.25rem;
    font-weight: 600;
    margin-bottom: 0.625rem;
    max-width: 34rem;
    color: #000000;
    background-color: #ffd965;
}

.cpl_address-box {
}

.cpl_default-hidden-button {
    overflow: visible !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    padding: 0 !important;
    display: block !important;
}

/*----------------------------------------------------------
              --- Education Event Overview ---
----------------------------------------------------------*/

.cpl_eev-overview-header {
    padding: 10px 15px;
    margin: 0;
    /* IE */
    color: #343A40;
    color: var(--panel-txtcolor);
}

.cpl_eev-overview {
    margin: 0;
}

@media (min-width: 768px) {
    .cpl_eev-overview-header {
        margin: 0 0px 0 0px;
    }

    .cpl_eev-overview {
        margin: 0 0px 10px 0px;
    }
}

/* Educations name list */

.cpl_eev-overview .cpl_edu-names {
    width: 20%;
    float: left;
    padding: 0;
    margin: 0;
    font-size: 0.75rem;
    border-top: 1px solid #dddddd;
    border-left: 1px solid #dddddd;
    border-bottom: 1px solid #dddddd;
    overflow-x: auto;
    white-space: nowrap;
}

    .cpl_eev-overview .cpl_edu-names ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .cpl_eev-overview .cpl_edu-names li {
        margin: 0;
        color: #333333;
        padding: 7px 7px 0 0;
        text-align: right;
        border-bottom: 1px solid #dddddd;
        height: 30px;
    }

    .cpl_eev-overview .cpl_edu-names .cpl_timeline-week-title {
        font-weight: bold;
    }

/* Day contents */

/* Simple:
    - Passed event (gray)
    - Everything OK (teacher, equipment) (green)
    - Bookable but info not complete (date and place) (yellow)
    - Planned course date (red)
    - NOTE: When not enough students close to course date show yellow to indicate that the course date might be cancelled!
*/

.cpl_eev-status-base {
    width: 10px;
    height: 23px;
    margin-top: 3px;
    border-radius: 5px;
    cursor: pointer;
}

/* Event created but not activated = Activate event */
.cpl_eev-status-not-bookable {
    border: 1px solid #a4a4a4;
    background-color: #cccccc; /* Grey */
}

/* Ready to book - some information missing like teacher and equipment = Add missing information */
.cpl_eev-status-pre-action-needed {
    border: 1px solid #B7B755;
    background-color: #FFFF00; /* yellow */
}

/* Missing information and running out of time = Add missing information */
.cpl_eev-status-urgent-pre-action-needed {
    border: 1px solid #cb7979;
    background-color: #ff9d9d; /* red */
}

/* Ready to book - all information completed = Do nothing */
.cpl_eev-status-event-ready {
    border: 1px solid #5bec00;
    background-color: #b8ff89; /* green */
}

/* Event passed - post action needed - teacher update participant results */
.cpl_eev-status-post-action-needed {
    border: 1px solid #777777;
    background-color: #FFFF00; /* yellow */
}

/* Event passed = Do nothing */
.cpl_eev-status-event-completed {
    border: 1px solid #cccccc;
    background-color: #f0f0f0; /* light grey */
}

/* Event canceled = Do nothing */
.cpl_eev-status-event-canceled {
    border: 1px solid #dddddd;
    background-color: #eeeeee; /* light grey */
}

/* --- Additional statuses --- */
/* - Booking exists but not enough yet = Wait until deadline and if still not enough students, cancel the event */
/* - Enough bookings exist to do the course = Do nothing */
/* - Fully booked, no waiting list = Consider creating a waiting list or a new event */
/* - Fully booked, people on waiting list = Consider creating a new event if enough students */

/* Legend */
.cpl_eev-overview-legend {
    font-size: 0.75rem;
    color: #333333;
}

    .cpl_eev-overview-legend ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .cpl_eev-overview-legend li {
        margin: 0 10px 0 0;
        float: left;
    }

    .cpl_eev-overview-legend .cpl_legend-base {
        width: 12px;
        height: 12px;
        margin: 2px 5px 0 0;
        ;
        border-radius: 6px;
        float: left;
    }

/*----------------------------------------------------------
                     --- Calendar ---
----------------------------------------------------------*/

.cpl_calendar_one-day {
    font-size: 1rem;
    width: 6.5rem;
    height: 9rem;
    padding: 0.6rem;
    margin-bottom: 0.6rem;
    text-align: center;
    line-height: 1.2;
    color: #333333;
    background-color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
    border: 1px solid #bbbbbb;
    border-radius: 3px;
    /* IE */
    box-shadow: 2px 2px 15px -6px rgba(0,0,0,0.4);
    box-shadow: var(--panel-box-shadow);
    float: none;
}

    .cpl_calendar_one-day .cpl_calendar_one-day__week-number {
        text-align: right;
        font-size: 0.5625rem;
    }

    .cpl_calendar_one-day .cpl_calendar_one-day__week-day {
    }

    .cpl_calendar_one-day .cpl_calendar_one-day__day-number {
        font-size: 2.875rem;
    }

    .cpl_calendar_one-day .cpl_calendar_one-day__month {
    }

    .cpl_calendar_one-day .cpl_calendar_one-day__year {
        font-size: 0.5625rem;
    }

/*----------------------------------------------------------
                 --- BuyerOrganization Views ---
----------------------------------------------------------*/
.cpl_buyer-organization-box {
    min-height: 400px;
    background-color: #CAE4FF;
    border-radius: 10px;
    padding: 5px;
}

/*----------------------------------------------------------
                 --- EducationEvent Views ---
----------------------------------------------------------*/
.cpl_eev-education-color {
    background-color: #ffe3b0;
}

.cpl_eev-education-organization-color {
    background-color: #ffffca;
}

.cpl_eev-education-event-color {
    background-color: #bdd7ee;
}

.cpl_eev-box {
    margin-bottom: 10px;
    /*padding: 5px 15px 10px 15px;*/
    max-width: 500px;
}

    .cpl_eev-box .cpl_day-calendar-box {
        float: left;
        margin-right: 20px;
    }

    .cpl_eev-box .cpl_eev-info-box {
        float: left;
    }

    .cpl_eev-box .cpl_eor-logo {
        max-width: 200px;
    }

.cpl_eev-info-box .cpl_eev-warning {
    background-color: yellow;
    font-weight: bold;
}

.cpl_eev-address {
    margin-bottom: 0;
}

.cpl_eev-contact-title {
    margin-top: 10px;
}

.cpl_eev-instructor {
    margin-top: 10px;
}

.cpl_eev-note {
    margin-top: 0.5rem;
    padding: 0.5rem 1rem;
    /*border: 1px solid #ff0000;*/
    border-radius: 5px;
    color: #333333;
    background-color: #fffcc6;
    box-shadow: var(--panel-box-shadow);
}

.cpl_eev-web-course-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-top: 0.5rem;
    color: #333333;
}

.cpl_eev-web-course-image {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--panel-box-shadow);
}

    .cpl_eev-web-course-image img {
        max-width: 100%;
    }

.cpl_eev-participant-organization {
    font-style: italic;
    /*font-weight: bold;*/
}
/* --- View: /EducationEvents4Educator/Create - Create EducationEvents for Educator ---*/
.cpl_eev-educator-eor-box {
    padding: 5px 10px 10px 10px;
    background-color: #ffffca;
}

.cpl_eev-educator-edu-box {
    padding: 5px 10px 10px 10px;
    background-color: #ffe3b0;
}

.cpl_eev-educator-eev-box {
    padding: 5px 10px 10px 10px;
    background-color: #D8E8F5;
    border: 1px solid #bdd7ee;
    border-radius: 10px;
}

/*----------------------------------------------------------
                 --- EventBooking Views ---
----------------------------------------------------------*/

.cpl_evb-list-box {
    margin: 10px;
}

    .cpl_evb-list-box .cpl_evb-tools {
        margin-left: 10px;
        margin-bottom: 1rem;
    }

        .cpl_evb-list-box .cpl_evb-tools .cpl_eev-send-messages-button {
            margin-right: 1rem;
            display: inline-block;
            cursor: pointer;
        }

            .cpl_evb-list-box .cpl_evb-tools .cpl_eev-send-messages-button:hover {
                background-color: #f0f0f0;
            }

    .cpl_evb-list-box .cpl_send-message-box {
        padding: 0 0 10px 0;
    }

        .cpl_evb-list-box .cpl_send-message-box .cpl_textarea {
            width: 100%;
            margin-bottom: 5px;
            max-width: unset !important;
        }

.cpl_page-error-message {
    color: #333333;
    background-color: #ffff8e;
    border: 5px solid #ff8900;
    border-radius: 0.625rem;
    padding: 5px 10px;
    margin-bottom: 10px;
    font-weight: bold;
}

.cpl_page-message {
    color: #000000;
    background-color: #c6ffb3;
    border: 5px solid #61ba5b;
    border-radius: 5px;
    padding: 5px 10px;
    margin-bottom: 10px;
    font-weight: bold;
    max-width: 100ch;
}

/*----------------------------------------------------------
      --- Screen Scraping Address list Cor and Eor ---
----------------------------------------------------------*/

.cpl_address-list {
    color: #000000;
    font-size: 0.75rem;
}

    .cpl_address-list .cpl_existing-item {
        border: 1px solid red !important;
        background-color: #FCFCCF !important;
    }

    .cpl_address-list .cpl_address-item {
        border: 1px solid #999999;
        border-radius: 5px;
        background-color: #ffffff;
        padding: 5px 10px;
        margin-bottom: 10px;
        /* IE */
        box-shadow: 2px 2px 15px -6px rgba(0,0,0,0.4);
        box-shadow: var(--panel-box-shadow);
    }

        .cpl_address-list .cpl_address-item .cpl_hit-title {
            font-size: 1rem;
            font-weight: bold;
        }

        .cpl_address-list .cpl_address-item .cpl_address-street {
        }

        .cpl_address-list .cpl_address-item .cpl_address-zip {
        }

        .cpl_address-list .cpl_address-item .cpl_address-city {
        }

        .cpl_address-list .cpl_address-item .cpl_address-phone {
        }

/*----------------------------------------------------------
       --- EducationType checkbox and price list ---
----------------------------------------------------------*/
.cpl_ety-checkbox-list {
    border-bottom: 1px solid #cccccc;
    padding: 17px 0 5px 0;
    min-height: 55px;
}

    .cpl_ety-checkbox-list:hover {
        background-color: #f6f6f6;
    }

    .cpl_ety-checkbox-list .cpl_chk-box {
        /* Fixed column left: Overall width 20px including 4px padding */
        float: left;
        width: 16px;
    }

    .cpl_ety-checkbox-list .cpl_chk-label {
        /* Dynamic column middle: (no float: left; and no width). This div coded third moves up into space between floated divs in IE and FF. */
        margin-left: 20px;
        margin-right: 94px;
    }

        .cpl_ety-checkbox-list .cpl_chk-label label {
            color: #333333;
            margin-top: -1px;
            font-weight: 600;
            font-size: 1rem;
        }

    .cpl_ety-checkbox-list .cpl_listprice {
        /* Fixed column right: Overall width 94px including 4px padding */
        position: absolute;
        top: 10px;
        right: 5px;
        /* content is 80px, want padding 10px to the right*/
        width: 90px;
    }

/*----------------------------------------------------------
                 --- Terms popup ---
----------------------------------------------------------*/
.cpl_accept-terms-box {
    margin-left: 20px;
}

    .cpl_accept-terms-box .cpl_read-terms {
    }

.cpl_terms-popup {
}

    .cpl_terms-popup .modal-header {
    }

        .cpl_terms-popup .modal-header h5 {
            display: inline-block;
            font-size: 1.5rem;
        }

        .cpl_terms-popup .modal-header .cpl_close {
            font-size: 2.25rem;
        }

    .cpl_terms-popup .modal-body {
    }

        .cpl_terms-popup .modal-body h6 {
            font-size: 1.125rem;
        }

/*----------------------------------------------------------
              --- Fade out div for long texts ---
----------------------------------------------------------*/
.cpl_fade-out-to-right {
    position: relative;
    max-width: 100%;
}

    .cpl_fade-out-to-right:after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 1) 100% );
    }

/*----------------------------------------------------------
                 --- Chat Room list ---
----------------------------------------------------------*/
.cpl_chat-room-list {
    max-width: 1200px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

    .cpl_chat-room-list .cpl_list-item {
        padding-top: 5px;
        padding-bottom: 5px;
        border-bottom: 1px solid #dddddd;
        height: 57px;
        overflow: hidden;
        clear: both;
    }

        .cpl_chat-room-list .cpl_list-item:hover {
            background-color: #eeeeee;
            cursor: pointer;
        }

        .cpl_chat-room-list .cpl_list-item .cpl_photo {
            border: 1px solid #ffffff;
            border-radius: 22px;
            background-color: #f0f0f0;
            margin-top: -0px;
            width: 45px;
            height: 45px;
            overflow: hidden;
            float: left;
        }

            .cpl_chat-room-list .cpl_list-item .cpl_photo img {
                width: 45px;
                height: 60px;
                position: relative;
                top: -6px;
            }

        .cpl_chat-room-list .cpl_list-item .cpl_content {
            margin-left: 60px;
            padding-bottom: 0px;
        }

            .cpl_chat-room-list .cpl_list-item .cpl_content .cpl_header {
                overflow: hidden;
            }

                .cpl_chat-room-list .cpl_list-item .cpl_content .cpl_header .cpl_chat-room-name {
                    color: #333333;
                    font-size: 1rem;
                    font-weight: 600;
                    float: left;
                }

                .cpl_chat-room-list .cpl_list-item .cpl_content .cpl_header .cpl_date {
                    color: #666666;
                    color: var(--panel-txtcolor);
                    font-size: 0.6875rem;
                    font-weight: normal;
                    float: right;
                }

            .cpl_chat-room-list .cpl_list-item .cpl_content .cpl_body {
                white-space: nowrap;
                overflow: hidden;
            }

                .cpl_chat-room-list .cpl_list-item .cpl_content .cpl_body img {
                    width: 20px;
                    height: 20px;
                    float: left;
                }

                .cpl_chat-room-list .cpl_list-item .cpl_content .cpl_body .cpl_short-message {
                    color: #333333;
                    width: 100%;
                    overflow: hidden;
                    float: left;
                }

                .cpl_chat-room-list .cpl_list-item .cpl_content .cpl_body .cpl_unread-messages-icon {
                    border: 1px solid #60b745;
                    background-color: #66c44a;
                    border-radius: 8px;
                    color: #ffffff;
                    font-size: 8px;
                    text-align: center;
                    position: relative;
                    top: -16px;
                    min-width: 14px;
                    height: 14px;
                    float: right;
                }

/*----------------------------------------------------------
                 --- Chat Messages ---
----------------------------------------------------------*/
.cpl_chat-room-messages {
    max-width: 1000px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

    .cpl_chat-room-messages .cpl_header {
        padding-top: 5px;
        padding-bottom: 5px;
        border-top: 1px solid #dddddd;
        border-bottom: 1px solid #dddddd;
        height: 60px;
    }

        .cpl_chat-room-messages .cpl_header .cpl_photo {
            border: 1px solid #ffffff;
            border-radius: 22px;
            margin-top: -0px;
            width: 50px;
            height: 50px;
            overflow: hidden;
            float: left;
        }

            .cpl_chat-room-messages .cpl_header .cpl_photo img {
                width: 50px;
                height: 65px;
                position: relative;
                top: -6px;
            }

        .cpl_chat-room-messages .cpl_header .cpl_chat-room-name {
            color: #333333;
            font-size: 1rem;
            font-weight: 600;
            margin: 12px 95px 0 60px;
            overflow: hidden;
            white-space: nowrap;
        }

        .cpl_chat-room-messages .cpl_header .cpl_tools {
            width: 95px;
            margin-top: -31px;
            text-align: right;
            float: right;
        }

            .cpl_chat-room-messages .cpl_header .cpl_tools label {
                display: inline-block;
                margin-right: 5px;
                margin-top: 5px;
                color: #666666;
                color: var(--panel-txtcolor);
                font-weight: normal;
            }

    .cpl_chat-room-messages .cpl_body {
        padding-top: 5px;
        max-height: 400px;
        overflow-y: auto;
    }

@media (min-width: 768px) {
    .cpl_chat-room-messages .cpl_body {
        max-height: 600px;
    }
}

.cpl_chat-room-messages .cpl_body .cpl_date {
    border: 1px solid #b5d1e0;
    border-radius: 10px;
    color: #444488;
    background-color: #d6e9f3;
    text-align: center;
    font-size: 0.75rem;
    width: 75px;
    padding: 1px;
    margin: 0 auto 5px auto;
}

.cpl_chat-room-messages .cpl_body .cpl_message-others {
    border: 1px solid #cccccc;
    border-radius: 10px;
    color: #111111;
    background-color: #f4f4f4;
    padding: 2px 5px 2px 10px;
    margin-right: 50px;
    margin-bottom: 10px;
}

    .cpl_chat-room-messages .cpl_body .cpl_message-others .cpl_time {
        color: #666666;
        color: var(--panel-txtcolor);
        font-size: 0.625rem;
        margin-top: 4px;
        float: right;
    }

.cpl_chat-room-messages .cpl_body .cpl_message-mine {
    border: 1px solid #b7dd96;
    border-radius: 10px;
    color: #111111;
    background-color: #e0ffc5;
    padding: 2px 5px 2px 10px;
    margin-left: 50px;
    margin-right: 5px;
    margin-bottom: 10px;
}

    .cpl_chat-room-messages .cpl_body .cpl_message-mine .cpl_time {
        color: #666666;
        color: var(--panel-txtcolor);
        font-size: 0.625rem;
        margin-top: 4px;
        float: right;
    }

.cpl_chat-send-message-box {
    /* Needed for heigh when float */
    overflow: hidden;
    /*border-top: 1px solid #dddddd;*/
    padding: 10px 0 10px 0;
}

    .cpl_chat-send-message-box .cpl_chat-textbox {
        margin-right: 70px;
    }

    .cpl_chat-send-message-box .cpl_chat-button {
        width: 70px;
        text-align: right;
        float: right;
    }

/*----------------------------------------------------------
          --- Toolbox w left and right tools ---
----------------------------------------------------------*/
.cpl_tool-box {
    overflow: hidden;
}

    .cpl_tool-box .cpl_tools-left {
        float: left;
    }

    .cpl_tool-box .cpl_tools-right {
        margin-right: 2px;
        float: right;
    }

        .cpl_tool-box .cpl_tools-right .cpl_label {
            margin-right: 5px;
            font-weight: normal;
            color: #666666;
            color: var(--panel-txtcolor);
        }

/*----------------------------------------------------------
                 --- WorkOrder View ---
----------------------------------------------------------*/
.cpl_text__highlight {
    color: indianred;
}

.cpl_wrk-details__add-attachment {
    background-color: #f0f0f0;
    padding-bottom: 10px;
    border-bottom: 1px solid #eeeeee;
}

.cpl_wrk-details__add-comment {
    background-color: #f0f0f0;
    padding-bottom: 5px;
    border-bottom: 1px solid #eeeeee;
}

.cpl_wrk-details__add-worker {
    background-color: #f0f0f0;
    padding-bottom: 5px;
    border-bottom: 1px solid #eeeeee;
}

.cpl_view-message-box {
}

    .cpl_view-message-box .cpl_view-highlighted-message {
        color: #000000;
        background-color: #ffff8e;
        border: 3px solid #FF8900;
        border-radius: 10px;
        font-size: 0.9rem;
        padding: 5px 10px 5px 10px;
        /*margin-bottom: 10px;*/
        display: inline-block;
        box-shadow: 2px 2px 15px -3px rgba(0,0,0,0.8);
    }

    .cpl_view-message-box .cpl_forward-wf-button {
        cursor: pointer;
        padding: 0.4rem 0.6rem;
        font-size: 0.875rem;
        line-height: 1.5;
        border-radius: 0.2rem;
        color: #ffffff;
        background-color: #28a745;
        border-color: #28a745;
    }

        .cpl_view-message-box .cpl_forward-wf-button:hover {
            text-decoration: none;
            background-color: #208738;
            border-color: #1D7932;
        }

    .cpl_view-message-box .cpl_backward-wf-button {
        cursor: pointer;
        padding: 0.4rem 0.6rem;
        font-size: 0.875rem;
        line-height: 1.5;
        border-radius: 0.2rem;
        color: #ffffff;
        background-color: #ff0000;
        border-color: #28a745;
    }

        .cpl_view-message-box .cpl_backward-wf-button:hover {
            text-decoration: none;
            background-color: #a00000;
            border-color: #1D7932;
        }

/*#region Log */
.cpl_log-field {
}

    .cpl_log-field .cpl_log-item {
        border-bottom: 1px solid #cccccc;
        padding-bottom: 5px;
        margin-bottom: 5px;
    }

        .cpl_log-field .cpl_log-item .cpl_log-time-stamp {
            color: #666666;
            color: var(--panel-txtcolor);
            font-size: 0.65rem;
        }

            .cpl_log-field .cpl_log-item .cpl_log-time-stamp .cpl_log-date-time {
                padding-right: 5px;
            }

            .cpl_log-field .cpl_log-item .cpl_log-time-stamp .cpl_log-performer {
            }

            .cpl_log-field .cpl_log-item .cpl_log-time-stamp .cpl_log-event {
            }
/*#endregion */

/*----------------------------------------------------------
                  --- DayJournal ---
----------------------------------------------------------*/
.cpl_dju__day-title {
    /* IE */
    color: #ffffff;
    color: var(--header-txtcolor);
    /* IE */
    background-color: #108B97;
    background-color: var(--header-bgcolor);
    font-size: 1.2rem;
    font-weight: 600;
    padding: 0.1rem 1rem;
    margin: 0 -0.5rem;
    border-radius: 0.5rem;
}

.cpl_dju__subject-block {
    margin-top: 0.5rem;
}

    .cpl_dju__subject-block .cpl_dju__reported-block {
        color: #333333;
        background-color: #FFFAD9;
        border: 1px solid #cccccc;
        border-radius: 10px;
        margin-top: -2rem;
        padding: 0.5rem 0;
        font-size: 0.9rem;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

        .cpl_dju__subject-block .cpl_dju__reported-block .cpl_dju__reported-item {
            /*width: 25rem;*/
            margin-left: 1rem;
            margin-bottom: 0.5rem;
        }

            .cpl_dju__subject-block .cpl_dju__reported-block .cpl_dju__reported-item .cpl_dju__reporter {
                font-size: 0.9rem;
                font-weight: 600;
            }

        .cpl_dju__subject-block .cpl_dju__reported-block .cpl_dju__warning {
            background-color: #e88c23;
            border: 3px solid #ff0000;
            color: #000000;
        }

/*----------------------------------------------------------
                  --- History Pages ---
----------------------------------------------------------*/

.cpl_history-pages-group {
    /* to set the position absolute top reference in the dropdown */
    position: relative;
}

.cpl_history-pages-dropdown {
    /* position dropdown below first button */
    position: absolute;
    top: 36px;
    background-color: #f0f0f0;
    z-index: 1;
}

.cpl_history-pages-dropdown-item {
    /* space each button evenly */
    margin-bottom: 5px;
}

/*----------------------------------------------------------
            --- Telerik HTML 5 Report Viewer ---
----------------------------------------------------------*/
#reportViewer1 {
    position: relative;
    /*width: 1300px;*/
    width: 100%;
    /*min-width: 768px;*/
    /*height: 900px;*/
    height: 800px;
    font-family: Verdana, Arial;
}

/*--------------------------------------------------------------
--- Timeline OLD (grid with scrollable dates grouped into weeks) ---
----------------------------------------------------------------*/
.cpl_timeline-box {
    width: 80%;
    float: left;
    border: 1px solid #dddddd;
    overflow-x: auto;
    white-space: nowrap;
}

    .cpl_timeline-box .cpl_wide-scrollable-content {
        width: 1000%;
    }

        .cpl_timeline-box .cpl_wide-scrollable-content .cpl_timeline-week {
            width: 78px;
            border-right: 1px solid #dddddd;
            float: left;
        }

            .cpl_timeline-box .cpl_wide-scrollable-content .cpl_timeline-week .cpl_timeline-week-header {
                height: 30px;
                font-size: 0.5625rem;
                border-bottom: 1px solid #dddddd;
            }

                .cpl_timeline-box .cpl_wide-scrollable-content .cpl_timeline-week .cpl_timeline-week-header ul {
                    margin: 0;
                    padding: 0;
                    list-style: none;
                }

                .cpl_timeline-box .cpl_wide-scrollable-content .cpl_timeline-week .cpl_timeline-week-header li {
                    margin: 0;
                    float: left;
                    width: 11px;
                    text-align: center;
                    border-right: 1px solid #dddddd;
                }

                .cpl_timeline-box .cpl_wide-scrollable-content .cpl_timeline-week .cpl_timeline-week-header .cpl_timeline-week-title {
                    padding: 2px 0 0 2px;
                    font-size: 0.625rem;
                    float: none;
                    border: none;
                }

                .cpl_timeline-box .cpl_wide-scrollable-content .cpl_timeline-week .cpl_timeline-week-header .cpl_timeline-last-day-title {
                    width: 11px;
                    border: none;
                }

    .cpl_timeline-box .cpl_timeline-week .cpl_timeline-week-days-ul {
        margin: 0;
        padding: 0;
        border-bottom: 1px solid #cccccc;
        height: 30px;
        list-style: none;
    }

        .cpl_timeline-box .cpl_timeline-week .cpl_timeline-week-days-ul li {
            margin: 0;
            float: left;
            width: 11px;
            height: 30px;
            text-align: center;
            border-right: 1px solid #e0e0e0;
        }

.cpl_timeline-week-days-ul .cpl_timeline-non-working-day {
    background-color: #eaeaea;
    border-bottom: 1px solid #cccccc;
}

.cpl_timeline-week-days-ul .cpl_timeline-today-line {
    border-left: 1px solid #ff0000;
}

.cpl_timeline-week-days-ul .cpl_timeline-urgent-zone-end-line {
    border-left: 1px solid #aaaaaa;
}

.cpl_timeline-empty-day {
    width: 11px;
    height: 30px;
    cursor: pointer;
}

    .cpl_timeline-empty-day:hover {
        background-color: #aaaaaa;
    }

.cpl_timeline-urgent-zone {
    background-color: #fceded;
    border-bottom: 1px solid #cccccc;
}

.cpl_alert {
    color: #cd5c5c !important; /* indianred */
    font-weight: 600;
}

/*#region Timeline tl */
/* Timeline - Grid with dates grouped into weeks e.g. WorkActivityOverview */
.tl_box {
    /* To fix box height */
    overflow: hidden;
    /* striped background 40 degrees */
    background: repeating-linear-gradient( 45deg, #f0f0f0, #f0f0f0 5px, #dddddd 5px, #dddddd 10px );
}
    /* Add this class for narrow time list */
    .tl_box.tl-box-narrow {
        /* To fix box height */
        overflow: hidden;
    }

        .tl_box.tl-box-narrow .tl_wk {
            width: 6.625rem;
            background-color: #ffffff;
        }

            .tl_box.tl-box-narrow .tl_wk .tl_wk-header li {
                width: 0.9375rem;
            }

            .tl_box.tl-box-narrow .tl_wk .tl_wk-days li {
                width: 0.9375rem;
            }

    /* Add this class for wide time list */
    .tl_box.tl-box-wide {
        /* To fix box height */
        overflow: hidden;
    }

        .tl_box.tl-box-wide .tl_wk {
            width: 19.75rem;
            background-color: #ffffff;
        }

            .tl_box.tl-box-wide .tl_wk .tl_wk-header li {
                width: 2.8125rem;
            }

            .tl_box.tl-box-wide .tl_wk .tl_wk-days li {
                width: 2.8125rem;
            }

    .tl_box .tl_wk {
        float: left;
        width: 13.1875rem;
        border-right: 1px solid #aaaaaa;
        background-color: #ffffff;
    }

        .tl_box .tl_wk .tl_wk-header {
            height: 2.6875rem;
            font-size: 0.7rem;
            border-bottom: 1px solid #dddddd;
        }

            .tl_box .tl_wk .tl_wk-header .tl_wk-title {
                font-size: 0.8rem;
                text-align: center;
                border-bottom: 1px solid #dddddd;
            }

            .tl_box .tl_wk .tl_wk-header ul {
                margin: 0;
                padding: 0;
                list-style: none;
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
            }

            .tl_box .tl_wk .tl_wk-header li {
                margin: 0;
                width: 1.875rem;
                text-align: center;
                line-height: 1;
                border-right: 1px solid #dddddd;
            }

                .tl_box .tl_wk .tl_wk-header li:last-child {
                    border-right: none;
                }

        .tl_box .tl_wk .tl_wk-days ul {
            margin: 0;
            padding: 0;
            border-bottom: 1px solid #cccccc;
            height: 1.875rem;
            list-style: none;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            cursor: var(--cursor-cell-default);
        }

        .tl_box .tl_wk .tl_wk-days li {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin: 0;
            width: 1.875rem;
            height: 1.875rem;
            border-right: 1px solid #e0e0e0;
        }

            .tl_box .tl_wk .tl_wk-days li:last-child {
                border-right: none;
            }

            .tl_box .tl_wk .tl_wk-days li:hover {
                background-color: #aaaaaa;
            }

.tl_wk-days .tl_off-day {
    background-color: #eaeaea;
}

.tl_wk-days .tl_today {
    border-left: 1px solid #ff0000;
}

.tl_outside {
    /* striped background 40 degrees */
    background: repeating-linear-gradient( 45deg, #f0f0f0, #f0f0f0 5px, #dddddd 5px, #dddddd 10px );
    border: 1px solid #f0f0f0;
}

.tl_left-fixed-column {
    border-top: 1px solid #cccccc;
    border-left: 1px solid #cccccc;
}

.tl_left-fixed-column-title {
    text-align: right;
    height: 2.6875rem;
    padding: 1.25rem 0.375rem 0 0;
    font-size: 0.8rem;
    font-weight: 600;
    border-bottom: 1px solid #cccccc;
}

.tl_left-fixed-column-item {
    height: 1.875rem;
    padding: 0.27rem 0.375rem 0 0;
    text-align: right;
    font-size: 0.8rem;
    border-bottom: 1px solid #cccccc;
    overflow: hidden;
}

.tl_left-fixed-column2-item {
    /* Center */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 1.875rem;
    border-bottom: 1px solid #cccccc;
    overflow: hidden;
    font-size: 0.7rem;
}

.tl_left-fixed-column2-total {
    position: absolute;
    height: 1.875rem;
    font-size: 0.8rem;
    font-weight: 600;
    padding-top: 5px;
    padding-right: 50px;
    margin-left: -50px;
    border-bottom: 1px solid #cccccc;
    white-space: nowrap;
}

/*#endregion */

.cpl_scrollable-box {
    border: 1px solid #dddddd;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
}

    .cpl_scrollable-box .cpl_wide-scrollable-content {
        width: 10000%;
    }

.cpl_fixed-2sidebars-1flexible-content-box {
    display: grid;
    grid-gap: 0;
    grid-template-columns: 12rem 2.1rem auto;
    grid-template-areas: "sidebar1 sidebar2 content";
}

    .cpl_fixed-2sidebars-1flexible-content-box .cpl_fixed-sidebar1 {
        grid-area: sidebar1;
    }

    .cpl_fixed-2sidebars-1flexible-content-box .cpl_fixed-sidebar2 {
        grid-area: sidebar2;
    }

    .cpl_fixed-2sidebars-1flexible-content-box .cpl_flexible-content {
        grid-area: content;
    }

.cpl_fixed-3sidebars-1flexible-content-box {
    display: grid;
    grid-gap: 0;
    grid-template-columns: 12rem 2.1rem 2.1rem auto;
    grid-template-areas: "sidebar1 sidebar2 sidebar3 content";
}

    .cpl_fixed-3sidebars-1flexible-content-box .cpl_fixed-sidebar1 {
        grid-area: sidebar1;
    }

    .cpl_fixed-3sidebars-1flexible-content-box .cpl_fixed-sidebar2 {
        grid-area: sidebar2;
    }

    .cpl_fixed-3sidebars-1flexible-content-box .cpl_fixed-sidebar3 {
        grid-area: sidebar3;
    }

    .cpl_fixed-3sidebars-1flexible-content-box .cpl_flexible-content {
        grid-area: content;
    }

/*----------------------------------------------------------
                     --- Legend ---
----------------------------------------------------------*/
.cpl_legend-box {
    padding-top: 10px;
    font-size: 0.8rem;
}

    .cpl_legend-box .cpl_legend-icon {
        margin-top: -2px;
        display: inline-block;
    }

.cpl_legend-text {
    font-size: 0.8rem;
}

.cpl_legend-box ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

/* Version 2 */
.cpl_legend-container {
    display: flex;
    flex-wrap: wrap;
    background-color: #eaeaea;
}

    .cpl_legend-container .cpl_legend-item {
        display: flex;
        /* v-align */
        align-items: center;
        /*width: 10rem;*/
        margin: 5px 10px;
    }

        .cpl_legend-container .cpl_legend-item .cpl_legend-icon {
            display: inline-block;
            width: 1.4rem;
            height: 1.4rem;
            margin-right: 0.3rem;
        }

        .cpl_legend-container .cpl_legend-item .cpl_legend-text {
            font-size: 0.7rem;
            font-weight: 600;
            display: inline-block;
        }

.cpl_wka-trip-box {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.cpl_wka_tools-selector {
    position: fixed;
    top: 65px;
    left: 0;
    right: 0;
    width: 100vw;
    background-color: #eaeaea;
    padding: 0.1rem;
    border-bottom: 1px solid #666666;
    /* low z-index is enough to show above work activity icons in the grid */
    z-index: 1;
}

    .cpl_wka_tools-selector .cpl_close {
        position: absolute;
        right: 20px;
        top: 10px;
        width: 16px;
        height: 16px;
        opacity: 0.3;
    }

        .cpl_wka_tools-selector .cpl_close:hover {
            opacity: 1;
        }

        .cpl_wka_tools-selector .cpl_close:before, .cpl_wka_tools-selector .cpl_close:after {
            position: absolute;
            left: 7px;
            content: ' ';
            height: 16px;
            width: 2px;
            background-color: #333;
        }

        .cpl_wka_tools-selector .cpl_close:before {
            transform: rotate(45deg);
        }

        .cpl_wka_tools-selector .cpl_close:after {
            transform: rotate(-45deg);
        }

    .cpl_wka_tools-selector .cpl_item-box {
        display: flex;
        flex-wrap: wrap;
    }

        .cpl_wka_tools-selector .cpl_item-box .cpl_label {
            display: flex;
            /* v-align */
            align-items: center;
            margin-right: 0.5rem;
            font-size: 0.8rem;
            font-weight: 600;
        }

        .cpl_wka_tools-selector .cpl_item-box .cpl_item {
            display: flex;
            /* v-align */
            align-items: center;
            border: 1px solid transparent;
            border-radius: 5px;
            padding: 2px 5px;
            cursor: pointer;
        }

        .cpl_wka_tools-selector .cpl_item-box .cpl_selected {
            border: 1px solid #000000;
            background-color: #666666;
            color: #ffffff;
        }

        .cpl_wka_tools-selector .cpl_item-box .cpl_item:hover {
            background-color: #666666;
            color: #ffffff;
        }

        .cpl_wka_tools-selector .cpl_item-box .cpl_item .cpl_icon {
            display: inline-block;
            width: 1.4rem;
            height: 1.4rem;
            margin-right: 0.3rem;
        }

        .cpl_wka_tools-selector .cpl_item-box .cpl_item .cpl_icon-text {
            font-size: 0.7rem;
            font-weight: 600;
            display: inline-block;
        }

    .cpl_wka_tools-selector .cpl_instructions {
        font-size: 0.8rem;
        max-width: 80ch;
    }

.wka_absent {
    position: relative;
    height: 9rem;
    overflow: hidden;
}

.wka_absent_header {
    font-size: 2.5rem;
    font-weight: 600;
    margin: 0.5rem 0 1rem 0;
}

.wka_absent_hours {
    font-size: 1.5rem;
    font-weight: 600;
}

.wka_absent_watermark {
    background-color: transparent;
}

    .wka_absent_watermark::before {
        position: absolute;
        top: 0;
        right: 1rem;
        color: #cccccc;
        font-size: 7rem;
    }

/*----------------------------------------------------------
              --- Work order overview ---
----------------------------------------------------------*/
.cpl_work-order-overview {
}

    .cpl_work-order-overview .buyer {
        font-weight: 600;
        margin-top: 5px;
    }

    .cpl_work-order-overview .status {
        margin-left: 0px;
    }

        .cpl_work-order-overview .status:hover {
            text-decoration: underline;
            cursor: pointer;
        }

        .cpl_work-order-overview .status .hits_ok {
            font-size: 0.8rem;
            background-color: #c6e0b4;
            border: 1px solid #c6e0b4;
            border-radius: 10px;
            padding: 0px 8px;
        }

        .cpl_work-order-overview .status .hits_warning {
            font-size: 0.8rem;
            background-color: #ffe699;
            border: 1px solid #ffd800;
            border-radius: 10px;
            padding: 0px 8px;
        }

        .cpl_work-order-overview .status .hits_danger {
            font-size: 0.8rem;
            background-color: #f4b084;
            border: 1px solid #f4b084;
            border-radius: 10px;
            padding: 0px 8px;
        }

/*----------------------------------------------------------
              --- Day Journal overview ---
----------------------------------------------------------*/
.cpl_day-journal-overview {
}

    .cpl_day-journal-overview .buyer {
        font-weight: 600;
        margin-top: 5px;
    }

    .cpl_day-journal-overview .info {
        color: #ff0000;
        font-weight: 600;
    }

        .cpl_day-journal-overview .info:hover {
            text-decoration: underline;
            cursor: pointer;
        }

.cpl_browser-attributes {
    color: #666666;
    color: var(--panel-txtcolor);
}

.cpl_browser-screen-size {
    color: #666666;
    color: var(--panel-txtcolor);
    margin-bottom: 1rem;
}

/*#region Image with pins */

.cpl_image-pin-canvas {
    display: block;
    /* must be px since the image is in px */
    width: 600px;
    height: 450px;
    overflow: hidden;
    border: 1px solid #cccccc;
    box-sizing: border-box;
    position: relative;
}

    .cpl_image-pin-canvas .cpl_background-image {
        position: relative;
    }

.cpl_ipc-pin-needle-red {
    /* Pin position */
    position: absolute;
    /* Pin size (same proportions as the background image */
    width: 31px;
    height: 76px;
    /* Text */
    color: #fff0f0;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    padding-left: 6px;
    /* Pin image */
    background-image: url('../../Content/ImagePins/pin-needle-red250x611.png');
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 100;
}

.cpl_ipc-pin-needle-grey {
    /* Pin position */
    position: absolute;
    /* Pin size (same proportions as the background image */
    width: 31px;
    height: 76px;
    /* Text */
    color: #fff0f0;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    padding-left: 6px;
    /* Pin image */
    background-image: url('../../Content/ImagePins/pin-needle-darkgrey250x611.png');
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 100;
}

.cpl_ipc-pin-needle-green {
    /* Pin position */
    position: absolute;
    /* Pin size (same proportions as the background image */
    width: 31px;
    height: 76px;
    /* Text */
    color: #fff0f0;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    padding-left: 6px;
    /* Pin image */
    background-image: url('../../Content/ImagePins/pin-needle-green250x611.png');
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 100;
}

.cpl_ipc-pin-text-on-yellow {
    /* Pin position */
    position: absolute;
    min-width: 58px;
    max-width: 200px;
    min-height: 38px;
    /* Text */
    padding: 1px 5px;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    color: #444444;
    background-color: yellow;
    border: 2px solid #444444;
    border-radius: 4px;
    z-index: 100;
    box-shadow: 3px 3px 8px -1px rgba(0,0,0,0.5);
}

.cpl_ipc-pin-text-on-white {
    /* Pin position */
    position: absolute;
    min-width: 58px;
    max-width: 200px;
    min-height: 30px;
    /* Text */
    padding: 2px 3px;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    color: #444444;
    background-color: white;
    border: 1px solid #444444;
    border-radius: 4px;
    z-index: 100;
    box-shadow: 3px 3px 8px -1px rgba(0,0,0,0.5);
}

/*----------------------------------------------------------
              --- Scalable wrapper ---
Uses javascript to adjust the scale of the content so it
fills the wrapper width and adjusts the wrapper height
to maintain content proportions. Used by ImagePin.
----------------------------------------------------------*/
.cpl_scaleable-wrapper {
    position: relative;
    margin: auto;
    overflow: hidden;
}

    .cpl_scaleable-wrapper .cpl_scalable-content {
        margin: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%);
    }

/*#endregion */

/*#region Star rating */

.cpl_stars {
    color: gold;
    display: inline-block;
}

    .cpl_stars i:before {
        /* Empty star: fas fa-star */
        font-family: "Font Awesome 5 Free";
        font-style: normal;
        content: "\f005";
    }

    .cpl_stars b:before {
        /* Filled star: far fa-star */
        font-family: "Font Awesome 5 Free";
        font-weight: 900; /* far 400, fas 900 */
        content: "\f005";
    }

.cpl_stars-color-1-2 {
    color: #ad0000;
}

.cpl_stars-color-on-3-4 {
    color: #a9a9a9;
}

.cpl_stars-color-5-6 {
    color: #ffd700;
}

/*#endregion */

/*#region Cert Pal status colors */
.cpl_status-color-ok {
    /* IE */
    color: #d7f3d2;
    color: var(--status-color-ok);
}

.cpl_status-color-on-track {
    /* IE */
    color: #dce1ff;
    color: var(--status-color-on-track);
}

.cpl_status-color-warning {
    /* IE */
    color: #ffe9a9;
    color: var(--status-color-warning);
}

.cpl_status-color-urgent {
    /* IE */
    color: #ffb3a1;
    color: var(--status-color-urgent);
}

.cpl_status-color-rfq {
    /* IE */
    color: #deb979;
    color: var(--status-color-rfq);
}

.cpl_status-color-to-do {
    /* IE */
    color: #dddddd;
    color: var(--status-color-to-do);
}
/*#endregion */

/* --- CertPal and SuperAdmin --- */
.cpl_btn-admin {
    color: #b87117;
    background-color: transparent;
    background-image: none;
    border-color: #17a2b8;
}

    .cpl_btn-admin:hover {
        color: #fff;
        background-color: #b87117;
        border-color: #b87117;
        text-decoration: none;
    }

.cpl_checkbox-and-label {
    margin-right: 1rem;
    white-space: nowrap;
}

    .cpl_checkbox-and-label label {
        font-weight: normal;
        display: inline;
        margin-top: -10px;
        color: var(--page-title-color);
    }

.cpl_radio-and-label {
    margin-right: 1rem;
    white-space: nowrap;
}

    .cpl_radio-and-label label {
        font-weight: normal;
        display: inline;
        margin-top: -10px;
        color: var(--page-title-color);
    }

.cpl_non-working-day {
    color: #b00e0e;
}

/* ----------------------------------------- */
/* --   Evb Create - Select user dropdown -- */
/* ----------------------------------------- */
.evb-user-dropdown-toggle {
    padding: 5px 10px 5px 10px !important;
    /*height: 34px;*/
    /*margin-left: 15px;*/
    border: 1px solid #cccccc;
    border-radius: 4px;
    color: #000000;
    background-color: #ffffff;
}

    .evb-user-dropdown-toggle:hover {
        text-decoration: none;
    }

.evb-user-dropdown-menu {
    max-width: 450px;
    max-height: 300px;
    overflow: auto;
    background-color: #ffffff !important;
}

    .evb-user-dropdown-menu li {
        border-bottom: 1px solid #cccccc;
        padding: 5px 10px 5px 10px;
    }

        .evb-user-dropdown-menu li:hover {
            background-color: #f0f0f0;
            cursor: pointer;
        }

        .evb-user-dropdown-menu li a {
            color: #333333;
            font-size: 14px;
            text-decoration: none;
            cursor: pointer;
        }

.evb-user-dropdown-menu-title {
    padding-right: 20px;
    font-style: italic;
    color: #aaaaaa;
}

.evb-user-dropdown-menu-pill {
    text-align: center;
    border-radius: 10px;
    padding: 2px 15px 2px 15px;
    font-size: 0.7rem;
}

.cpl_bar-icon {
    display: inline-block;
    margin-left: 7px;
    width: 20px;
    border-radius: 10px;
}

.cpl_bar-text {
    font-style: italic;
    color: #aaaaaa;
}

@media (min-width: 768px) {
    .evb-user-dropdown-toggle {
        margin-left: 0px;
        width: 600px;
    }

    .evb-user-dropdown-menu {
        width: 100%;
        background-color: #ffffff !important;
    }
}

.cpl_todo-warning {
    color: #222222 !important;
    background-color: #fbf2aa;
}

.cpl_label-input-group {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
}

    .cpl_label-input-group .cpl_label-input {
        min-width: 280px;
        margin-right: 10px;
    }

    .cpl_label-input-group .cpl_index-view_XXX_label-and-input label {
        font-weight: 600;
        color: #ffffff;
        margin-bottom: 0;
    }

    .cpl_label-input-group .cpl_label-input input {
        width: 100%;
        max-width: unset;
        vertical-align: middle;
        padding: 0.375rem 0.75rem;
        border: 1px solid #ced4da;
        border-radius: 0.25rem;
        display: block;
    }

        .cpl_label-input-group .cpl_label-input input[type=checkbox] {
            width: 20px;
        }

/*#region Translations */

.cpl_translate-icon {
    position: relative;
    top: 2px;
    font-size: 1.5rem;
    color: #444444;
    display: inline-block;
    cursor: pointer;
}

    .cpl_translate-icon:hover {
        color: #2c2c8b;
    }

.cpl_translated-text {
    padding: 5px;
    color: #333333;
    background-color: lightyellow;
}

.cpl_original-text {
    color: #888888;
    font-style: italic;
}

/*#endregion */

/*#region Mobile table */

.cpl_table2card-md {
    width: 100%;
    max-width: calc(100vw - 3rem);
}

    .cpl_table2card-md thead tr {
    }

    .cpl_table2card-md tr {
    }

    .cpl_table2card-md td {
    }

.cpl_m-td-container {
}

.cpl_m-td-label {
    display: none;
}

.cpl_m-td-content {
}

.cpl_m-img {
    max-width: 140px;
}

/* -- Bootstrap --*/
/* -- breakpoint-xs: 0; */
/* -- breakpoint-sm: 576px; */
/* -- breakpoint-md: 768px; */
/* -- breakpoint-lg: 992px; */
/* -- breakpoint-xl: 1200px; */
@media only screen and (max-width: 767px) {
    .cpl_table2card-md {
        /* Hide old table attributes */
        border: none !important;
        margin: 0 !important;
        padding: 0 !important;
        background-color: transparent;
        box-shadow: none;
    }

        .cpl_table2card-md thead tr {
            /* Hide table header */
            display: none;
        }

        .cpl_table2card-md tr {
            /* Show tr as a card */
            display: block;
            border-radius: 10px;
            /* IE */
            background-color: #fafafa;
            background-color: var(--panel-bgcolor);
            /* IE */
            box-shadow: 2px 2px 15px -5px rgba(0,0,0,0.4);
            box-shadow: var(--panel-box-shadow);
            padding: 15px 0 0 25px !important;
            margin: 0 10px 10px 0 !important;
            width: 48%;
            min-height: 900px;
            float: left;
        }

        .cpl_table2card-md td {
            /* Show td as label + field */
            display: block;
            border: none !important;
            margin: 0 !important;
            padding: 0 !important;
            float: left;
            clear: both;
        }

    .cpl_m-td-container {
        display: grid;
        grid-template-areas: 'm-label' 'm-content';
    }

    .cpl_m-td-label {
        grid-area: m-label;
        display: block;
        font-size: 1rem;
        font-weight: 600;
        /* IE */
        color: #343A40;
        color: var(--panel-txtcolor);
    }

    .cpl_m-td-content {
        grid-area: m-content;
        width: 100%;
        max-height: 350px;
        overflow: auto;
    }

    .cpl_m-img {
        max-width: 200px;
    }
}

@media screen and (max-width: 575px) {
    .cpl_table2card-md tr {
        /* Show tr as a card */
        min-width: 100%;
        min-height: unset;
    }

    .cpl_m-td-content {
        max-height: unset;
    }
}
/*#endregion */

/* -- WorkActivity Create_Work --*/
.cpl_skippedbreak {
}

@media screen and (min-width: 1024px) {
    .cpl_skippedbreak {
        display: inline-block;
        min-width: 14ch;
    }
}

/* -- WorkOrder Details --*/
.cpl_wrk_btn-check-time-reports {
}

.cpl_wrk_btn-create-day-journals {
    margin-top: 5px;
}

@media screen and (min-width: 1440px) {
    .cpl_wrk_btn-check-time-reports {
        float: left;
    }

    .cpl_wrk_btn-create-day-journals {
        float: right;
        margin: 0;
    }
}

.cpl_wrk_cus-card {
    padding: 10px;
    text-align: center;
}

.cpl_wrk_sor-card {
    padding: 2px 5px;
}

.cpl_wrk_cus-photo {
    margin-bottom: 0.5em;
}

    .cpl_wrk_cus-photo img {
        max-width: 100%;
        max-height: 650px;
    }

.cpl_wrk_cus-email {
    white-space: nowrap;
}

    .cpl_wrk_cus-email a {
        font-size: 1rem;
    }

.cpl_wrk_cus-phone {
    white-space: nowrap;
}

    .cpl_wrk_cus-phone a {
        font-size: 1rem;
    }

/*#region DayJournal */
/* --- DayJournal DayJournalTimeActivity */
.cpl_dju_dta-container {
    display: grid;
    grid-gap: 0.1rem;
    /*grid-template-columns: 2fr 3fr 1fr 1fr 1fr 1fr;*/
    /*grid-template-columns: 3fr 4fr 1fr;*/
}

    .cpl_dju_dta-container .cpl_text-header {
        font-weight: 600;
    }

    .cpl_dju_dta-container .cpl_text-footer {
        font-weight: 600;
    }

/* --- DayJournal Dju Time reports ---*/
.cpl_dju_details__timereports-box {
}

    .cpl_dju_details__timereports-box .cpl_header {
        font-weight: 600;
        margin: 1rem 0 0.5rem 0;
    }

    .cpl_dju_details__timereports-box .cpl_items-box {
        display: grid;
        grid-gap: 0.5rem;
        grid-template-columns: 1fr;
        font-size: 1.4rem;
    }

        .cpl_dju_details__timereports-box .cpl_items-box .cpl_item {
            position: relative;
            background-color: #FFFAD9;
            border: 1px solid #cccccc;
            border-radius: 10px;
            padding: 0.5em 0.5em 2em 1em;
            line-height: 1.2;
        }

        .cpl_dju_details__timereports-box .cpl_items-box .cpl_added-item {
            color: #333333;
            background-color: #ffe07f;
            border: 1px solid #df7a7a;
        }

        .cpl_dju_details__timereports-box .cpl_items-box .cpl_item .cpl_reporter {
            font-weight: 600;
            padding-bottom: 0.5rem;
        }

        .cpl_dju_details__timereports-box .cpl_items-box .cpl_item ul {
            color: #ff0000;
            padding-left: 20px;
            font-size: 0.8em;
        }

        .cpl_dju_details__timereports-box .cpl_items-box .cpl_item .cpl_approved-box {
            /* Note em here not rem */
            font-size: 0.6em;
            margin-top: 0.5em;
        }

@media (min-width: 576px) {
    .cpl_dju_details__timereports-box .cpl_items-box {
        grid-template-columns: 1fr 1fr;
        font-size: 1.2rem;
    }
}

@media (min-width: 768px) {
    .cpl_dju_details__timereports-box .cpl_items-box {
        grid-template-columns: 1fr 1fr 1fr;
        font-size: 1rem;
    }
}

@media (min-width: 992px) {
    .cpl_dju_details__timereports-box .cpl_items-box {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}

@media (min-width: 1200px) {
    .cpl_dju_details__timereports-box .cpl_items-box {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    }
}

@media (min-width: 1440px) {
    .cpl_dju_details__timereports-box .cpl_items-box {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    }
}

.cpl_dju_edit_timereport {
}

    .cpl_dju_edit_timereport .cpl_header {
        font-weight: 600;
        margin-top: 0.5rem;
    }

    .cpl_dju_edit_timereport .cpl_parts-box {
        display: grid;
        grid-gap: 0;
        grid-template-columns: 1fr;
        background-color: #FFFAD9;
        border: 1px solid #cccccc;
        border-radius: 10px;
        padding: 0.25rem 0.5rem 0.25rem 1rem;
    }

        .cpl_dju_edit_timereport .cpl_parts-box .cpl_part {
        }

            .cpl_dju_edit_timereport .cpl_parts-box .cpl_part .cpl_reporter {
                font-weight: 600;
            }

        .cpl_dju_edit_timereport .cpl_parts-box .cpl_alert2 {
            color: #ff0000;
        }

/*#endregion */

/*#region WorkActivity adjusted */
.cpl_wka-adjustments-container {
    font-size: 0.9rem;
}

    .cpl_wka-adjustments-container .cpl_wka-list-item {
        margin-bottom: 0.5rem;
    }

        .cpl_wka-adjustments-container .cpl_wka-list-item .cpl_performer {
        }

            .cpl_wka-adjustments-container .cpl_wka-list-item .cpl_performer::before {
                font-family: "Font Awesome 5 Free";
                font-weight: 900; /* far 400, fas 900 */
                /* fas fa-user-edit */
                content: "\f4ff";
                /* Dark red */
                color: #b63737;
            }

        .cpl_wka-adjustments-container .cpl_wka-list-item .cpl_details {
            font-size: 0.8rem;
            /* Dark red */
            color: #b63737;
        }
/*#endregion */

.cpl_eus-logo img {
    max-width: 100px;
}

.wka-absent-type-box {
    display: grid;
    grid-gap: 0;
    /* Columns: Vacation Sick VAB SickChild ATF */
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    font-size: 0.8rem;
    max-width: 60rem;
    margin-bottom: 1rem;
}

    .wka-absent-type-box .cpl_item {
        padding: 0.5rem 0.2rem;
        border: 0.2rem solid transparent;
    }

        .wka-absent-type-box .cpl_item:hover {
            border: 0.2rem solid #bbbbbb;
            border-radius: 1rem;
            background-color: #dddddd;
        }

        .wka-absent-type-box .cpl_item .cpl_icon {
            margin: auto;
            width: 4.2rem !important;
            height: 4.2rem !important;
        }

            .wka-absent-type-box .cpl_item .cpl_icon::before {
                font-size: 2.8rem;
            }

        .wka-absent-type-box .cpl_item .cpl_icon-text {
            margin-top: 0.3rem;
            text-align: center;
            overflow: hidden;
        }

    .wka-absent-type-box .cpl_selected {
        border: 0.2rem solid #bbbbbb;
        border-radius: 1rem;
        background-color: #dddddd;
    }

@media (min-width: 768px) {
    .wka-absent-type-box .cpl_item .cpl_icon {
        width: 5rem !important;
        height: 5rem !important;
    }

        .wka-absent-type-box .cpl_item .cpl_icon::before {
            font-size: 3rem;
        }

    .wka-absent-type-box .cpl_item .cpl_icon-text {
        font-size: 1rem;
    }
}

.cpl_flex-left-container {
    display: flex;
    gap: 2rem;
}

.wka-absent-input-box {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    width: 100%;
    padding: 0.5rem 1rem 1rem 1rem;
    background: #ffffff;
    border-radius: 8px;
    box-sizing: border-box;
    border: 2px solid #ced4da;
}

.wka-absent-input-box-edit {
    display: grid;
    grid-column-gap: 0.5rem;
    /* Columns: Date Duration */
    grid-template-columns: 1fr 5.3rem;
    max-width: 60rem;
    margin-bottom: 1rem;
}

/*#region VoluntaryInformationSection */
.cpl_voluntary-information-link {
    margin-top: 1rem;
    color: #3267a0;
    cursor: pointer;
}

    .cpl_voluntary-information-link:hover {
        color: #0d3054;
    }

    .cpl_voluntary-information-link::before {
        content: "\f0d7";
        font-family: "Font Awesome 5 Free";
        font-weight: 900; /* far 400, fas 900 */
        margin-right: 0.4rem;
    }

    .cpl_voluntary-information-link.expanded::before {
        content: "\f0d8";
    }

.cpl_voluntary-information-section {
    overflow: hidden;
}
/*#endregion */

/*#region Certificate Card */
.cpl_certificate-card {
    margin-bottom: 1rem;
}

    .cpl_certificate-card a {
        font-size: 0.75rem;
    }

        .cpl_certificate-card a:hover {
            color: #000000;
            background-color: #eeeeee;
            text-decoration: none;
        }

    .cpl_certificate-card h3 {
        font-size: 1rem;
        padding: 0.4rem 0;
        margin: 0;
        color: #666666;
        color: var(--panel-txtcolor);
    }

    .cpl_certificate-card .card-image {
        border: 2px solid #cccccc;
        border-radius: 7px;
        overflow: hidden;
        box-shadow: 3px 3px 10px 0px rgba(0,0,0,0.15);
    }

        .cpl_certificate-card .card-image img {
            max-width: 100%;
        }

    .cpl_certificate-card .valid-until {
        /* Icons and text aligned */
        position: relative;
        left: 1.8rem;
    }

        .cpl_certificate-card .valid-until::before {
            position: absolute;
            left: -1.6rem;
            font-family: "Font Awesome 5 Free";
            font-weight: 900; /* far 400, fas 900 */
            /* fas fa-calendar-check */
            content: "\f274";
            color: #666666;
            color: var(--panel-txtcolor);
        }

        .cpl_certificate-card .valid-until strong {
            padding: 0 0.25rem;
            font-weight: 600;
            margin-bottom: 0.625rem;
            color: #000000;
            background-color: #ffd965;
        }

    .cpl_certificate-card .booked {
        /* Icons and text aligned */
        position: relative;
        left: 1.8rem;
    }

        .cpl_certificate-card .booked::before {
            position: absolute;
            left: -1.8rem;
            font-family: "Font Awesome 5 Free";
            font-weight: 900; /* far 400, fas 900 */
            /* fas fa-graduation-cap */
            content: "\f19d";
            /* Blue */
            color: #2b5eb3;
        }

    .cpl_certificate-card .rfq {
        /* Icons and text aligned */
        position: relative;
        left: 1.8rem;
    }

        .cpl_certificate-card .rfq::before {
            position: absolute;
            left: -1.6rem;
            font-family: "Font Awesome 5 Free";
            font-weight: 900; /* far 400, fas 900 */
            /* fas fa-search-dollar */
            content: "\f688";
            /* Brown */
            color: indianred;
        }

.cpl_certificate-card-action-buttons {
    display: inline-block;
    margin-top: 0.5rem;
}

    .cpl_certificate-card-action-buttons a {
        display: block;
        color: #3267A0;
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
        margin-bottom: 0.5rem;
        max-width: 10rem;
        margin-right: 0.5rem;
    }

        .cpl_certificate-card-action-buttons a:hover {
            color: #ffffff;
            background-color: #343a40;
            text-decoration: none;
        }

    .cpl_certificate-card-action-buttons .primary {
        font-size: 0.875rem;
        line-height: 1.5;
        padding: 0.25rem 0.5rem;
        color: #343a40;
        background-color: #ffffff;
        border: 1px solid #343a40;
        border-radius: 0.2rem;
    }

@media (min-width: 768px) {
    .cpl_certificate-card-action-buttons a {
        display: inline-flex;
    }
}
/*#endregion */

/*#region Blinking background */
@-webkit-keyframes backgroundBlinkAnimation {
    from, to {
        /* Light yellow */
        background-color: #fffb92;
    }

    50% {
        background-color: transparent;
    }
}

@keyframes backgroundBlinkAnimation {
    from, to {
        /* Light yellow */
        background-color: #fffdc8;
    }

    50% {
        background-color: transparent;
    }
}

.cpl_yellow-background-blink {
    /* Continue to blink every 1 second */
    -webkit-animation: backgroundBlinkAnimation 1s step-end infinite;
    animation: backgroundBlinkAnimation 1s step-end infinite;
}
/*#endregion */

/*#region Blinking opacity */
@-webkit-keyframes opacityBlinkAnimation {
    from, to {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

@keyframes opacityBlinkAnimation {
    from, to {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

.cpl_opacity-blink {
    /* Continue to blink every 0.5 second */
    -webkit-animation: opacityBlinkAnimation 0.5s step-end infinite;
    animation: opacityBlinkAnimation 0.5s step-end infinite;
}
/*#endregion */

/*#region Add-remove list */
.cpl_add-remove-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    max-height: 12rem;
    margin-top: 2px;
    overflow: auto;
}

    .cpl_add-remove-list a {
        position: relative;
        color: #666666;
        color: var(--panel-txtcolor);
        /* Might be different depending on max lenght of text items in the list */
        min-width: 25rem;
        /* Prepare space for the trash can icon */
        margin-left: 1.2rem;
        /* In the event of long text items not touching each other */
        margin-right: 1rem;
    }

        .cpl_add-remove-list a::before {
            /* Trash can icon */
            position: absolute;
            top: 0.2rem;
            left: -1.1rem;
            font-family: "Font Awesome 5 Free";
            /* far fa-trash-alt */
            content: "\f2ed";
            color: #666666;
            color: var(--panel-txtcolor);
            font-size: 0.9rem;
        }

        .cpl_add-remove-list a:hover::before {
            /* Slightly bigger */
            font-size: 1.1rem;
            top: 0;
            left: -1.2rem;
            /* Dark red */
            color: #b63737;
            /* Light yellow */
            background-color: #fbeea4;
        }

        .cpl_add-remove-list a:hover {
            color: #000000;
            /* Light yellow */
            background-color: #fbeea4;
            text-decoration: none;
        }
/*#endregion */

/*#region Printing */
/* In need for page numbers see https://www.pagedjs.org/ */
@media print {
    body {
        margin: 0;
    }

    .cpl_printing-table-header {
        color: #000000;
        font-size: 2rem;
    }

    .cpl_printing-table-footer-spacer {
        height: 6px;
    }

        /* Fixed position printer table footer (stays at the bottom even on the last page) */
        .cpl_printing-table-footer-spacer .cpl_printing-table-footer {
            position: fixed;
            bottom: 5px;
            color: #666666;
        }

    .cpl_printing-exclude, .cpl_printing-exclude * {
        display: none !important;
        visibility: hidden !important;
    }

    .cpl_printing-full-width {
        max-width: none;
        width: 100% !important;
    }
}

@media screen {
    .cpl_printing-table-header {
        display: none !important;
    }

    .cpl_on-screen-exclude {
        display: none !important;
    }
}
/*#endregion */

/*#region Booking Select Users */
/* Activate users list */
.cpl_evb_show-users-list {
    position: relative;
    display: block;
    width: 100%;
    padding: 0.3rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #ffffff;
    background-clip: padding-box;
    border: 0.125rem solid #ced4da;
    border-radius: 0.25rem;
    cursor: pointer;
}
    /* Caret at the end */
    .cpl_evb_show-users-list::before {
        position: absolute;
        /* caret */
        content: " \25bc";
        top: 0.75rem;
        right: 0;
        height: 1.25rem;
        width: 1.5rem;
        font-size: 0.7rem;
    }
/* List box for selecting users */
.cpl_evb_select_users-list {
    display: none;
    border-left: 0.125rem solid #ced4da;
    border-right: 0.125rem solid #ced4da;
    border-bottom: 0.125rem solid #ced4da;
    border-radius: 0.25rem;
    /* Vertical scroll */
    max-height: 20rem;
    overflow: auto;
    cursor: pointer;
}
    /* User name */
    .cpl_evb_select_users-list a {
        display: block;
        text-decoration: none;
        color: #333333;
        padding: 0.3rem 0.75rem;
        font-size: 1rem;
        line-height: 1.5;
        width: 100%;
        clear: both;
    }

        .cpl_evb_select_users-list a:hover {
            background-color: #f0f0f0;
        }

        .cpl_evb_select_users-list a span {
            display: inline-block;
            float: right;
            color: #666666;
            font-style: italic;
            font-size: 0.9rem;
        }
            /* Icon */
            .cpl_evb_select_users-list a span i {
                border-radius: 0.625rem;
                padding: 0.125rem 0.6rem;
                font-size: 0.75rem;
                margin-left: 0.3rem;
            }
/* Icon colors */
.cpl_evb_select_users-list_icon-urgent {
    background-color: #ffb3a1;
}

.cpl_evb_select_users-list_icon-not-urgent {
    background-color: #ffe9a9;
}

.cpl_evb_select_users-list_icon-still-active {
    background-color: #d7f3d2
}

@media (min-width: 1240px) {
    .cpl_evb_select_users-list {
        max-width: 40rem;
    }
}
/*#endregion */

/*#region CrmHistory*/
.crm-history-filters {
    display: inline-flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    color: #666666;
    font-size: 0.8rem;
    font-style: italic;
}

    .crm-history-filters div {
        border: 1px solid #999999;
        border-radius: 5px;
        padding: 2px 5px;
        margin: 0 5px 5px 0;
    }

        .crm-history-filters div:hover {
            color: #ffffff;
            background-color: #999999;
            cursor: pointer;
        }

.crm-history-cards {
    overflow-x: hidden;
    overflow-y: auto;
}

.crm-history-card {
}

    .crm-history-card .crm-history-card-header {
        font-size: 0.7rem;
        color: #444444;
        background-color: #eeeeee;
        padding: 2px 5px;
        margin-bottom: 3px;
    }

@media (min-width: 992px) {
    .crm-history-cards {
        max-height: 20rem;
    }
}

.crm-history-card-notes {
    margin-bottom: 8px;
}
    /* Textarea that looks like plain text until focused */
    .crm-history-card-notes textarea {
        font-size: 1rem;
        font-style: italic;
        /* Darkblue */
        color: #1b70fa;
        outline: none;
        border: none;
        background-color: transparent;
        border-radius: 3px;
        box-shadow: none;
        font-weight: 400;
        margin: -10px 0 -10px 0;
        overflow: hidden;
        overflow-wrap: break-word;
        resize: none;
        /* height set to content height by javascript */
        height: 30px;
        padding: 4px 1px;
        width: 100%;
        box-sizing: border-box;
        display: block;
        transition-property: background-color, border-color, box-shadow;
        transition-duration: 700ms;
        transition-timing-function: ease;
        cursor: pointer;
    }

        .crm-history-card-notes textarea:focus {
            font-style: normal;
            background-color: #ffffff;
            box-shadow: inset 0 0 0 2px #0079bf;
            margin: 0;
            padding: 4px 8px;
            resize: vertical;
            cursor: auto;
        }

/*endregion*/

#cpl_quill-editor-container {
    height: 450px;
}

    #cpl_quill-editor-container .ql-editor {
        font: small/ 1.5 Arial,Helvetica,sans-serif;
    }

        #cpl_quill-editor-container .ql-editor h1 {
            color: #222;
            display: block;
            font-size: 2em;
            margin-block-start: 0.67em !important;
            margin-block-end: 0.67em !important;
            margin-inline-start: 0px !important;
            margin-inline-end: 0px !important;
            font-weight: bold;
        }

        #cpl_quill-editor-container .ql-editor h2 {
            color: #222;
            display: block;
            font-size: 1.5em;
            margin-block-start: 0.83em;
            margin-block-end: 0.83em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
            font-weight: bold;
            text-transform: none;
            border: none;
        }

        #cpl_quill-editor-container .ql-editor h3 {
            color: #222;
            display: block;
            font-size: 1.17em;
            margin-block-start: 1em;
            margin-block-end: 1em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
            font-weight: bold;
        }

        #cpl_quill-editor-container .ql-editor h4 {
            color: #222;
            display: block;
            font-size: 1em;
            margin-block-start: 1.33em;
            margin-block-end: 1.33em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
            font-weight: bold;
        }

        #cpl_quill-editor-container .ql-editor h5 {
            color: #222;
            display: block;
            font-size: 0.83em;
            margin-block-start: 1.67em;
            margin-block-end: 1.67em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
            font-weight: bold;
        }

        #cpl_quill-editor-container .ql-editor h6 {
            color: #222;
            display: block;
            font-size: 0.67em;
            margin-block-start: 2.33em;
            margin-block-end: 2.33em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
            font-weight: bold;
        }

        #cpl_quill-editor-container .ql-editor p {
            color: #222;
            display: block;
            margin-block-start: 0;
            margin-block-end: 0;
            margin-inline-start: 0;
            margin-inline-end: 0;
            max-width: none;
        }

        #cpl_quill-editor-container .ql-editor ol {
            color: #222;
            display: block;
            list-style-type: decimal;
            margin-block-start: 1em;
            margin-block-end: 1em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
            padding-inline-start: 40px;
        }

        #cpl_quill-editor-container .ql-editor li {
            margin-left: 15px;
        }

        #cpl_quill-editor-container .ql-editor ul {
            color: #222;
            display: block;
            list-style-type: disc;
            margin-block-start: 1em;
            margin-block-end: 1em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
            padding-inline-start: 40px;
        }

.cpl_html-content-viewer {
    font: small/ 1.5 Arial,Helvetica,sans-serif;
    background-color: #f0f0f0;
    border: 1px solid #dddddd;
    border-radius: 0.5rem;
    padding-left: 1rem;
}

@media print {
    .cpl_html-content-viewer {
        font-size: 1rem;
        background-color: #ffffff;
        border: none;
        padding: 0;
    }
}

@media (min-width: 768px) {
    .cpl_html-content-viewer {
        min-height: 6rem;
    }
}

@media (min-width: 992px) {
    .cpl_html-content-viewer {
        min-height: 25rem;
    }
}

.cpl_html-content-viewer label {
    font-size: 1.2rem;
    font-weight: normal;
    color: #333333;
}

.cpl_html-content-viewer .cpl_viewer-textarea {
}

    .cpl_html-content-viewer .cpl_viewer-textarea textarea {
        max-width: calc(100% - 1rem);
    }

    .cpl_html-content-viewer .cpl_viewer-textarea .cpl_viewer-textarea-read-only {
        font-size: 1rem;
        color: #333333;
        border: 1px solid #cccccc;
        border-radius: 0.2rem;
        padding: 0.5rem;
        margin-right: 0.5rem;
        min-height: 4rem;
    }

.cpl_html-content-viewer .cpl_viewer-textbox {
}

    .cpl_html-content-viewer .cpl_viewer-textbox input[type=text] {
        max-width: calc(100% - 1rem);
    }

    .cpl_html-content-viewer .cpl_viewer-textbox .cpl_viewer-textbox-read-only {
        font-size: 1rem;
        color: #333333;
        border: 1px solid #cccccc;
        border-radius: 0.2rem;
        padding: 0.5rem;
        margin-right: 0.5rem;
        min-height: 2.5rem;
    }

.cpl_html-content-viewer .cpl_viewer-checkbox {
    margin-right: 1rem;
    white-space: nowrap;
}

    .cpl_html-content-viewer .cpl_viewer-checkbox label {
        display: inline-block;
        margin-top: -0.4rem;
        margin-left: 0.4rem;
        max-width: calc(100% - 2rem);
        white-space: pre-wrap;
    }

    .cpl_html-content-viewer .cpl_viewer-checkbox input[type=checkbox] {
        vertical-align: top;
        /* Slightly bigger checkboxes */
        transform: scale(1.3);
    }

.cpl_html-content-viewer .cpl_viewer-checkbox-read-only {
    margin-top: 0.5rem;
}

    .cpl_html-content-viewer .cpl_viewer-checkbox-read-only label {
        display: inline-block;
        margin-top: -0.4rem;
        margin-left: 0.4rem;
        max-width: calc(100% - 2rem);
        white-space: pre-wrap;
    }

    .cpl_html-content-viewer .cpl_viewer-checkbox-read-only input[type=checkbox] {
        vertical-align: top;
    }

:root {
    /* set by javacript */
    --signature-pad-height: 200px;
}

.cpl_html-content-viewer .cpl_viewer-signature-pad {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: calc(100% - 1rem);
    max-width: 100rem;
    height: var(--signature-pad-height);
    border: 0.125rem solid #ced4da;
    border-radius: 0.25rem;
    background-color: #ffffff;
}

    .cpl_html-content-viewer .cpl_viewer-signature-pad::before {
        left: 20px;
        -webkit-transform: skew(-3deg) rotate(-3deg);
        transform: skew(-3deg) rotate(-3deg);
    }

    .cpl_html-content-viewer .cpl_viewer-signature-pad::after {
        right: 20px;
        -webkit-transform: skew(3deg) rotate(3deg);
        transform: skew(3deg) rotate(3deg);
    }

    .cpl_html-content-viewer .cpl_viewer-signature-pad .signature-pad {
        position: relative;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        border-bottom: 1px solid #cccccc;
        overflow: hidden;
    }

        .cpl_html-content-viewer .cpl_viewer-signature-pad .signature-pad img {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            padding: 10px;
        }

        .cpl_html-content-viewer .cpl_viewer-signature-pad .signature-pad canvas {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            display: none;
        }

    .cpl_html-content-viewer .cpl_viewer-signature-pad .signature-buttons a {
        font-size: 1.2em;
        padding: 0.25rem 0.5rem;
    }

.cpl_viewer-signature-pad-read-only {
    position: relative;
    width: 45rem;
    height: 7rem;
    border-bottom: 1px solid #cccccc;
}

    .cpl_viewer-signature-pad-read-only img {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        padding: 10px;
    }

/* Textbox that looks like text */
.cpl_html-content-viewer .cpl_log-field {
    font-size: 0.8rem !important;
    font-weight: 400;
    font-style: italic;
    color: #666666;
    background-color: transparent !important;
    margin: -3px 0;
    padding: 4px 8px;
    width: 100%;
    height: 27px;
    outline: none;
    border: none !important;
    border-radius: 3px;
    box-shadow: none;
    cursor: pointer;
}

    .cpl_html-content-viewer .cpl_log-field:focus {
        font-style: normal;
        color: #333333;
        background-color: #ffffff !important;
        box-shadow: inset 0 0 0 2px #0079bf !important;
        cursor: auto;
    }

.cpl_html-content-viewer .cpl_viewer-log-read-only {
    font-size: 0.8rem !important;
    font-weight: 400;
    font-style: italic;
    color: #666666;
    background-color: transparent !important;
    margin-bottom: 0.8rem;
}

.cpl_html-content-viewer h1 {
    color: #222;
    display: block;
    font-size: 2em;
    margin-block-start: 0.67em !important;
    margin-block-end: 0.67em !important;
    margin-inline-start: 0px !important;
    margin-inline-end: 0px !important;
    font-weight: bold;
}

.cpl_html-content-viewer h2 {
    color: #222;
    display: block;
    font-size: 1.5em;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    text-transform: none;
}

.cpl_html-content-viewer h3 {
    color: #222;
    display: block;
    font-size: 1.17em;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}

.cpl_html-content-viewer h4 {
    color: #222;
    display: block;
    font-size: 1em;
    margin-block-start: 1.33em;
    margin-block-end: 1.33em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}

.cpl_html-content-viewer h5 {
    color: #222;
    display: block;
    font-size: 0.83em;
    margin-block-start: 1.67em;
    margin-block-end: 1.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}

.cpl_html-content-viewer h6 {
    color: #222;
    display: block;
    font-size: 0.67em;
    margin-block-start: 2.33em;
    margin-block-end: 2.33em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}

.cpl_html-content-viewer p {
    color: #222;
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    max-width: none;
}

.cpl_html-content-viewer ol {
    color: #222;
    display: block;
    list-style-type: decimal;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
}

.cpl_html-content-viewer li {
    margin-left: 15px;
}

.cpl_html-content-viewer ul {
    color: #222;
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
}

.cpl_html-content-viewer input[type=text] {
    max-width: 40rem;
}

.cpl_html-content-viewer textarea {
    max-width: 40rem;
}

/*#endregion */

/*#region GotoPageByNumber*/

.CplGotoPageByNumber {
    margin-bottom: 1rem;
}

    .CplGotoPageByNumber input[type=text] {
        width: 3rem;
        max-width: 4rem;
        display: inline-block;
        padding: 0.2rem 0.5rem;
        font-size: 1rem;
        line-height: 1.1;
        background-color: #ffffff;
        background-clip: padding-box;
        border: 0.125rem solid #ced4da;
        border-radius: 0.25rem;
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        margin: 0 0.5rem 0 0.5rem;
    }

    .CplGotoPageByNumber a {
        color: #333333;
        background-color: #cccccc;
        padding: 0.3rem 0.5rem;
        border-radius: 0.2rem;
        text-decoration: none;
    }

        .CplGotoPageByNumber a:hover {
            color: #ffffff;
            background-color: var(--header-bgcolor);
        }

/*#endregion */

/*#region AttachmentSet Partial */

.ats_attachment-box {
    display: flex;
    flex-direction: row;
}

    .ats_attachment-box a {
        text-decoration: none;
    }

.ats_form {
}

.ats_upload-box {
    position: relative;
}

    .ats_upload-box .ats_drop-area {
        border: 2px solid #c8dadf;
        font-size: 0.8rem;
        width: 11rem;
        text-align: center;
        background-color: #c8dadf;
        padding: 1rem;
    }

    .ats_upload-box .ats_is-dragover {
        border: 2px dotted #cccccc;
        background-color: #ffffff;
    }

    .ats_upload-box .ats_select-manually {
    }

        .ats_upload-box .ats_select-manually .ats_select-manually-button {
            font-size: 0.8rem;
            color: #333333;
            white-space: nowrap;
            border: 1px solid transparent;
            border-radius: 10px;
            padding: 0.2rem 0.5rem;
            margin-top: 0.2rem;
            cursor: pointer;
        }

            .ats_upload-box .ats_select-manually .ats_select-manually-button:hover {
                border: 1px solid #000000;
                color: #ffffff;
                background-color: #000000;
            }

.ats_uploaded-files-box {
    padding: 0 1rem;
}

    .ats_uploaded-files-box ul {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin: 0;
        padding: 0;
    }

    .ats_uploaded-files-box li {
        border: 1px solid #cccccc;
        border-radius: 1rem;
        list-style-type: none;
        padding: 0.1rem 0.7rem;
        margin: 0 0.5rem 0.5rem 0;
        overflow: hidden;
        white-space: nowrap;
        cursor: pointer;
    }

        .ats_uploaded-files-box li:hover {
            color: #ffffff;
            background-color: #000000;
            border-color: #000000;
        }

        .ats_uploaded-files-box li a {
            color: #666666;
        }

            .ats_uploaded-files-box li a:hover {
                color: #ffffff;
            }

    .ats_uploaded-files-box .ats_message-click-to-download {
        font-size: 0.8rem;
        display: block;
    }

    .ats_uploaded-files-box .ats_message-click-to-delete {
        display: none;
    }

.ats_delete-mode .ats_uploaded-files-box li {
    border: 1px solid red;
}

    .ats_delete-mode .ats_uploaded-files-box li:hover {
        color: #ffffff;
        background-color: red;
        border-color: red;
    }

/* Selected for delete when clicked (until delete confirmed or cancelled) */
.ats_delete-mode .ats_file-selected-for-delete {
    color: #ffffff;
    background-color: red;
    border-color: red;
}

.ats_delete-mode .ats_uploaded-files-box .ats_message-click-to-download {
    display: none;
}

.ats_delete-mode .ats_uploaded-files-box .ats_message-click-to-delete {
    font-size: 0.8rem;
    color: red;
    display: block;
}

.ats_footer {
}

.ats-message-status {
    background-color: #ffe9a9;
    padding: 0 0.5rem;
    margin-bottom: 0.5rem;
    display: none;
}

.ats_hidden-file-input {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}
/*#endregion */

/*#region Chosen multi drop */

@media (min-width: 1200px) {
    .chosen-select {
        /* Minimize loading flickering */
        /* TODO: Test this on a phone - chosen might be disabled on phones? */
        visibility: hidden;
        height: 39px;
    }
}

.chosen-container-active .chosen-choices {
    /* Light blue shadow border when active */
    -webkit-box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* 0 0 5px rgba(0, 0, 0, 0.3); */
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* 0 0 5px rgba(0, 0, 0, 0.3); */
}

.chosen-container-multi .chosen-choices {
    /* Make same look as a textbox */
    font-size: 1rem; /* new */
    padding: 0.25rem 1rem 0.25rem 0.5rem; /* 0 5px */
    background-image: none; /* linear-gradient(#eee 1%, #fff 15%); */
    border: 0.125rem solid #ced4da; /* 1px solid #aaa; */
    border-radius: 0.25rem; /* new */
}

    .chosen-container-multi .chosen-choices::before {
        /* Add caret at the end of multi drop */
        position: absolute;
        /* caret */
        content: " \25bc";
        top: 0.75rem;
        right: 0;
        height: 1.25rem;
        width: 1.5rem;
        font-size: 0.7rem;
        cursor: pointer;
    }

/*#endregion */

/*#region Compress on phone */

/* <div class="cpl_compress-on-phone"><div class="show-more-button">Show more</div><div class="block-to-show">...</div></div>*/
/* $('.cpl_compress-on-phone .show-more-button').click(function () { $(this).parent().toggleClass('open'); }) */
.cpl_compress-on-phone {
}
    /* show more-button */
    .cpl_compress-on-phone .show-more-button {
        position: relative;
        display: inline-block;
        font-size: 0.8rem;
        font-weight: 400;
        margin-top: 0.8rem;
        padding: 0.12rem 1.5rem 0.12rem 0.4rem;
        color: #333333;
        background-color: #cccccc;
        border-radius: 0.2rem;
    }

    .cpl_compress-on-phone.open .show-more-button {
        color: #000000;
        background-color: #f0f0f0;
    }
    /* Add show more-button caret down */
    .cpl_compress-on-phone .show-more-button::before {
        position: absolute;
        /* caret down */
        content: " \25bc";
        top: 0.32rem;
        right: 0;
        height: 1.25rem;
        width: 1rem;
        font-size: 0.65rem;
        cursor: pointer;
    }

    .cpl_compress-on-phone.open .show-more-button::before {
        position: absolute;
        /* caret up */
        content: " X";
        font-size: 0.7rem;
        font-weight: 500;
        top: 0.2rem;
        right: 0;
        height: 1.25rem;
        width: 1rem;
        cursor: pointer;
    }

    .cpl_compress-on-phone .show-more-button:hover {
        /*text-decoration: none;*/
        color: #000000;
        background-color: #f0f0f0;
    }
    /* expanded-block */
    .cpl_compress-on-phone .block-to-show {
        max-height: 0;
        transition: 1s ease-in-out max-height;
        overflow: hidden;
    }

    .cpl_compress-on-phone.open .block-to-show {
        max-height: 100rem;
    }

@media screen and (min-width: 1000px) {
    /* Hide show more-button on large screens */
    .cpl_compress-on-phone .show-more-button {
        display: none;
        visibility: hidden;
    }
    /* Show content block on large screens */
    .cpl_compress-on-phone .block-to-show {
        max-height: 100rem;
    }
}

/*#endregion */

/*#region UserWorkActivities */

.cpl_wka-user-list {
    max-width: 700px;
    color: #333333;
}

    .cpl_wka-user-list .b_day-box {
        border-radius: 0.4rem;
    }

        .cpl_wka-user-list .b_day-box.b_non-working-day {
            color: #999999 !important; /* grey */
        }

        .cpl_wka-user-list .b_day-box .b_day-header {
            position: relative;
            display: flex;
            font-weight: 500;
            overflow: hidden;
            margin: 0.4rem 0;
        }

            .cpl_wka-user-list .b_day-box .b_day-header .b_holiday-name {
                font-size: 0.8rem;
                font-weight: 400;
                margin: 0.2rem 1rem;
            }

            .cpl_wka-user-list .b_day-box .b_day-header .b_trip {
                position: absolute;
                top: 0.2rem;
                right: 0rem;
                font-size: 0.8rem;
                color: #999999;
                padding-right: 2.1rem;
                cursor: pointer;
            }

                .cpl_wka-user-list .b_day-box .b_day-header .b_trip::before {
                    position: absolute;
                    font-family: "Font Awesome 6 Free";
                    font-weight: 900; /* far 400, fas 900 */
                    /* fas fa-airplane */
                    content: " \f072";
                    top: 0.1rem;
                    right: 1rem;
                    font-size: 0.8rem;
                }

        .cpl_wka-user-list .b_day-box .b_report-box {
            display: flex;
            flex-direction: row;
            margin-bottom: 0.5rem;
        }

            .cpl_wka-user-list .b_day-box .b_report-box.b_missing-hours {
                color: #bb3a3a; /* red rgba(156, 48, 48, 1) */
                background-color: #ffbbbb;
            }

            .cpl_wka-user-list .b_day-box .b_report-box .b_report-desc {
                flex: 1 1 auto; /* dynamic width */
                min-width: 2rem;
            }

                .cpl_wka-user-list .b_day-box .b_report-box .b_report-desc .b_place {
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    overflow: hidden;
                }

                .cpl_wka-user-list .b_day-box .b_report-box .b_report-desc .b_absence {
                    white-space: nowrap;
                    overflow: hidden;
                    color: #cd5c5c /* indianred */
                }

                .cpl_wka-user-list .b_day-box .b_report-box .b_report-desc .b_work-done {
                    font-style: italic;
                }

                .cpl_wka-user-list .b_day-box .b_report-box .b_report-desc .b_project {
                    font-size: 0.8rem;
                }

            .cpl_wka-user-list .b_day-box .b_report-box .b_report-time-range {
                min-width: 7rem; /* fixed width */
                text-align: right;
                cursor: pointer;
            }

                .cpl_wka-user-list .b_day-box .b_report-box .b_report-time-range .b_overtime {
                    font-size: 0.8rem;
                    color: #666666;
                }

                .cpl_wka-user-list .b_day-box .b_report-box .b_report-time-range .b_icons {
                    font-size: 0.8rem;
                    color: #666666;
                }

            .cpl_wka-user-list .b_day-box .b_report-box .b_report-duration {
                min-width: 6rem; /* fixed width */
                max-height: 1.5rem;
                text-align: right;
                padding-right: 2.1rem;
                cursor: pointer;
            }

            .cpl_wka-user-list .b_day-box .b_report-box.b_missing-hours .b_report-duration {
                position: relative;
            }

                .cpl_wka-user-list .b_day-box .b_report-box.b_missing-hours .b_report-duration::before {
                    position: absolute;
                    font-family: "Font Awesome 6 Free";
                    font-weight: 900; /* far 400, fas 900 */
                    /* fas fa-caret-down */
                    content: "\f0d7";
                    top: 0.1rem;
                    right: 1rem;
                }

            .cpl_wka-user-list .b_day-box .b_report-box .b_report-duration.b_approved {
                position: relative;
            }

                .cpl_wka-user-list .b_day-box .b_report-box .b_report-duration.b_approved::before {
                    position: absolute;
                    font-family: "Font Awesome 6 Free";
                    font-weight: 900; /* far 400, fas 900 */
                    /* fas fa-check */
                    content: "\f00c";
                    top: 0.1rem;
                    right: 1rem;
                    font-size: 0.8rem;
                    color: #666666; /* #49e42e; */
                }

            .cpl_wka-user-list .b_day-box .b_report-box .b_report-duration.b_not-approved {
                position: relative;
                color: #cd5c5c; /* indianred #cd5c5c hsla(0, 53%, 58%, 1) */
            }

                .cpl_wka-user-list .b_day-box .b_report-box .b_report-duration.b_not-approved::before {
                    position: absolute;
                    font-family: "Font Awesome 6 Free";
                    font-weight: 900; /* far 400, fas 900 */
                    /* fas fa-exclamation-circle */
                    content: "\f06a";
                    top: 0.1rem;
                    right: 1rem;
                    font-size: 0.9rem;
                    color: #9c3030; /* darker indianred hsla(0, 53%, 40%, 1) */
                }

            .cpl_wka-user-list .b_day-box .b_report-box .b_report-duration:hover {
                border-radius: 0.4rem;
                color: #ffffff;
                background-color: #333333;
            }

    .cpl_wka-user-list .b_week-sum-box {
        display: flex;
        flex-direction: row;
        margin-top: 1rem;
        padding: 0.3rem 0;
        text-align: center;
        border-bottom: 0.25rem solid #0f808a; /* dark turqouise hsla(185, 80%, 30%, 1) */
    }

        .cpl_wka-user-list .b_week-sum-box h2 {
            flex: 1 1 auto; /* dynamic width */
            font-size: 1.1rem;
            font-weight: 500;
            font-style: italic;
            margin-top: 0.5rem;
            text-align: left;
        }

        .cpl_wka-user-list .b_week-sum-box h3 {
            font-size: 1rem;
            font-weight: 500;
            margin: 0 0.5rem;
            padding: 0;
        }

        .cpl_wka-user-list .b_week-sum-box .b_comp-payout {
            position: relative;
            text-align: right;
            padding-right: 2rem;
        }

            .cpl_wka-user-list .b_week-sum-box .b_comp-payout::before {
                position: absolute;
                font-family: "Font Awesome 6 Free";
                font-weight: 900; /* far 400, fas 900 */
                /* fas fa-caret-down */
                content: "\f0d7";
                top: 0.1rem;
                right: 1rem;
            }

            .cpl_wka-user-list .b_week-sum-box .b_comp-payout:hover {
                border-radius: 0.4rem;
                color: #ffffff;
                background-color: #333333;
            }

    .cpl_wka-user-list .b_month-sum-box {
        display: flex;
        flex-direction: row;
        margin: 0.8rem 0;
        padding: 0.5rem 0 0.3rem 0;
        text-align: center;
        background-color: #d1f7fa; /* light turqouise hsla(185, 82%, 90%, 1) */
        color: #333333;
        border-bottom: 0.5rem solid #0f808a; /* dark turqouise hsla(185, 80%, 30%, 1) */
    }

        .cpl_wka-user-list .b_month-sum-box h2 {
            flex: 1 1 auto; /* dynamic width */
            font-size: 1.1rem;
            font-weight: 500;
            margin-top: 0.5rem;
            text-align: left;
        }

        .cpl_wka-user-list .b_month-sum-box h3 {
            font-size: 1rem;
            font-weight: 500;
            margin: 0 0.5rem;
            padding: 0;
        }

/*#endregion */

/*#region WorkActivityOverview icons */
/* WorkActivityOverview icons in the toolbar, Timeline grid and legend */
/* UserWorkActivities dropdown menu icons */

/* Toolbox cursor icon */
.q-cursor {
    background-color: #ffffff;
    color: #6666aa;
    border-radius: 50%;
    width: 1.5rem;
    height: 1.5rem;
}

    .q-cursor:before {
        /* fas fa-mouse-pointer */
        content: "\f245";
        font-family: "Font Awesome 5 Free";
        font-weight: 900; /* far 400, fas 900 */
        font-size: 0.85rem;
        /* Center */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 2px 0 0 1px;
    }

/* Toolbox delete icon */
.q-delete {
    background-color: #ffffff;
    color: #ff0000;
    border-radius: 50%;
    width: 1.5rem;
    height: 1.5rem;
}

    .q-delete:before {
        /* fas fa-times */
        content: "\f00d";
        font-family: "Font Awesome 5 Free";
        font-weight: 900; /* far 400, fas 900 */
        font-size: 0.85rem;
        /* Center */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 2px 0 0 0;
    }

.q_not_approved {
    border: 1px solid #ac0000 !important;
}

.q-small-text {
    font-size: 0.6rem;
}

.q-alert {
    color: #e85f07;
    width: 1.5rem;
    height: 1.5rem;
    cursor: pointer;
}

    .q-alert:before {
        /* fas fa-exclamation-triangle */
        content: "\f071";
        font-family: "Font Awesome 5 Free";
        font-weight: 900; /* far 400, fas 900 */
        font-size: 1rem;
        /* Center */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

.q-unknown {
    /* Center */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #666666;
    width: 1.5rem;
    height: 1.5rem;
}

    .q-unknown:before {
        /* far fa-question-circle */
        content: "\f059";
        font-family: "Font Awesome 5 Free";
        font-weight: 900; /* far 400, fas 900 */
        font-size: 1.3rem;
    }

.q-empty {
    width: 1.5rem;
    height: 1.5rem;
}

/* Work (arbete) */
.q-wrk {
    /* Default color Green */
    color: #000000 !important;
    background-color: #c6e0b4 !important;
    border: 1px solid #9cd574;
    /* form */
    border-radius: 50%;
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0.7rem;
    /* Center */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: var(--cursor-cell-w-time);
}

.q-low {
    /* Blue */
    background-color: #bfe8ff !important;
    border: 1px solid #52bffe;
}

.q-high {
    /* Yellow */
    background-color: #ffe699 !important;
    border: 1px solid #fbd255;
}

/* Vacation (semester) */
.q-vac {
    background-color: #ffffff;
    color: #6666aa;
    border-radius: 50%;
    width: 1.5rem;
    height: 1.5rem;
}
    /* Vacation icon */
    .q-vac:before {
        /* fas fa-umbrella-beach */
        content: "\f5ca";
        font-family: "Font Awesome 5 Free";
        font-weight: 900; /* far 400, fas 900 */
        font-size: 0.9rem;
        /* Center */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    /* Vacation and Work combo - hide icon and show absent indicator */
    .q-vac.q-wrk::before {
        position: absolute;
        bottom: 3px;
        right: 0px;
        content: "";
        /* VAC: white square w blue border */
        width: 1.1rem;
        height: 0.5rem;
        border: 0.1rem solid #ffffff;
        border-radius: 0.5rem 0.5rem 0 0;
        background-color: #6666aa;
        transform: rotate(15deg);
    }

/* Rotation (rotationsledig) */
.q-rot {
    background-color: #ffffff;
    color: #6666aa;
    border-radius: 50%;
    width: 1.5rem;
    height: 1.5rem;
}
    /* Rotation icon */
    .q-rot:before {
        /* fas fa-sync-alt */
        content: "\f2f1";
        font-family: "Font Awesome 5 Free";
        font-weight: 900; /* far 400, fas 900 */
        font-size: 0.9rem;
        /* Center */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    /* Rotation and Work combo - hide icon and show absent indicator */
    .q-rot.q-wrk::before {
        position: absolute;
        bottom: 3px;
        right: 0px;
        content: "";
        /* VAC: white square w blue border */
        width: 1.1rem;
        height: 0.5rem;
        border: 0.1rem solid #ffffff;
        border-radius: 0.5rem 0.5rem 0 0;
        background-color: #6666aa;
        transform: rotate(15deg);
    }

/* Invalid absence (ogiltig frånvaro) */
.q-inv {
    background-color: #ffffff;
    color: #ff66aa;
    border-radius: 50%;
    width: 1.5rem;
    height: 1.5rem;
}
    /* Invalid absence icon */
    .q-inv:before {
        /* far fa-frown */
        content: "\f119";
        font-family: "Font Awesome 5 Free";
        font-weight: 400; /* far 400, fas 900 */
        font-size: 0.9rem;
        /* Center */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    /* Invalid absence and Work combo - hide icon and show absent indicator */
    .q-inv.q-wrk::before {
        position: absolute;
        bottom: 3px;
        right: 0px;
        content: "";
        /* VAC: white square w blue border */
        width: 1.1rem;
        height: 0.5rem;
        border: 0.1rem solid #ffffff;
        border-radius: 0.5rem 0.5rem 0 0;
        background-color: #6666aa;
        transform: rotate(15deg);
    }

/* Sick (Sjuk) */
.q-sic {
    background-color: #ffe699;
    color: #aa5555;
    border-radius: 50%;
    width: 1.5rem;
    height: 1.5rem;
}
    /* Sick icon */
    .q-sic:before {
        /* fas fa-thermometer-half */
        content: "\f2c9";
        font-family: "Font Awesome 5 Free";
        font-weight: 900; /* far 400, fas 900 */
        font-size: 1.2rem;
        /* Center */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    /* Sick and Work combo - hide icon and show absent indicator */
    .q-sic.q-wrk::before {
        position: absolute;
        bottom: 1px;
        right: 1px;
        content: "";
        /* SIC: red oval w yellow border */
        width: 0.5rem;
        height: 1rem;
        border-radius: 0.2rem;
        border: 0.125rem solid #ffe699;
        background-color: #aa5555;
    }

/* Sick child (VAB) */
.q-vab {
    background-color: #ffe699;
    color: #666666;
    border-radius: 50%;
    width: 1.5rem;
    height: 1.5rem;
}
    /* Sick child icon */
    .q-vab:before {
        /* fas fa-child */
        content: "\f1ae";
        font-family: "Font Awesome 5 Free";
        font-weight: 900; /* far 400, fas 900 */
        font-size: 1.1rem;
        /* Center */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    /* Sick child and Work combo - hide icon and show absent indicator */
    .q-vab.q-wrk::before {
        position: absolute;
        bottom: 1px;
        right: 1px;
        content: "";
        /* VAB: dark circle w yellow border */
        width: 0.7rem;
        height: 0.7rem;
        border-radius: 50%;
        border: 0.1875rem solid #ffe699;
        background-color: #666666;
    }

/* Parental leave (föräldraledig) */
.q-par {
    background-color: #d0d0ff;
    color: #444444;
    border-radius: 50%;
    width: 1.5rem;
    height: 1.5rem;
}
    /* Parental leave icon */
    .q-par:before {
        /* fas fa-baby */
        content: "\f77c";
        font-family: "Font Awesome 5 Free";
        font-weight: 900; /* far 400, fas 900 */
        font-size: 1.2rem;
        /* Center */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    /* Parental leave and Work combo - hide icon and show absent indicator */
    .q-par.q-wrk::before {
        position: absolute;
        bottom: 1px;
        right: 1px;
        content: "";
        /* PAR: dark circle w purple border */
        width: 0.7rem;
        height: 0.7rem;
        border-radius: 50%;
        border: 0.25rem solid #d0d0ff;
        background-color: #444444;
    }

/* Work hours compensation (ATF) */
.q-atf {
    background-color: #ffffff;
    color: #666666;
    border-radius: 50%;
    width: 1.5rem;
    height: 1.5rem;
}
    /* Work hours compensation icon */
    .q-atf:before {
        /* far fa-clock */
        content: "\f017";
        font-family: "Font Awesome 5 Free";
        font-weight: 400; /* far 400, fas 900 */
        font-size: 1.1rem;
        /* Center */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    /* Work hours compensation and Work combo - hide icon and show absent indicator */
    .q-atf.q-wrk::before {
        position: absolute;
        bottom: 1px;
        right: 1px;
        content: "";
        /* ATF: white circle w dark border */
        width: 0.65rem;
        height: 0.65rem;
        border-radius: 50%;
        border: 1px solid #666666;
        background-color: #ffffff;
    }

/* Leave of absence (tjänstledig) */
.q-loa {
    background-color: #ffffff;
    color: #6666aa;
    border-radius: 50%;
    width: 1.5rem;
    height: 1.5rem;
}
    /* Leave of absence icon */
    .q-loa:before {
        /* fas fa-user-slash */
        content: "\f506";
        font-family: "Font Awesome 5 Free";
        font-weight: 900; /* far 400, fas 900 */
        font-size: 0.9rem;
        /* Center */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    /* Leave of absence and Work combo - hide icon and show absent indicator */
    .q-loa.q-wrk::before {
        position: absolute;
        bottom: 1px;
        right: 1px;
        content: "";
        /* LOA: white square w dark border */
        width: 0.55rem;
        height: 0.55rem;
        border: 1px solid #666666;
        background-color: #ffffff;
    }

/* Compensatory leave (kompledig) */
.q-cmp {
    background-color: #ffffff;
    color: #666666;
    border-radius: 50%;
    width: 1.5rem;
    height: 1.5rem;
}
    /* Compensatory leave icon */
    .q-cmp:before {
        /* fas fa-bed */
        content: "\f236";
        font-family: "Font Awesome 5 Free";
        font-weight: 900; /* far 400, fas 900 */
        font-size: 0.9rem;
        /* Center */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    /* Compensatory leave and Work combo - hide icon and show absent indicator */
    .q-cmp.q-wrk::before {
        position: absolute;
        bottom: 1px;
        right: 2px;
        content: "";
        /* CMP: dark circle */
        width: 1.3rem;
        height: 0.5rem;
        border-radius: 5px;
        border: 0.125rem solid #ffffff;
        background-color: #666666;
    }

/*#endregion */

/*#region WorkOrder Scrum Board */

.cpl_wrk-scrum-board {
    position: absolute;
    top: 4rem;
    left: 0;
    bottom: 0;
    right: 0;
    padding: 1rem;
    background-color: #ffffff;
}

    .cpl_wrk-scrum-board .c_header {
    }

        .cpl_wrk-scrum-board .c_header .c_title {
            font-size: 1.6rem;
            font-weight: 600;
            margin-top: 0rem;
            margin-bottom: 0.5rem;
            margin-left: -0.0rem;
            padding: 0.0625rem 1rem;
            border-radius: 0.375rem;
            /* IE */
            color: #ffffff;
            color: var(--header-txtcolor);
            /* IE */
            background-color: #108B97;
            background-color: var(--header-bgcolor);
            /* IE */
            box-shadow: 2px 2px 15px -6px rgba(0,0,0,0.4);
            box-shadow: var(--panel-box-shadow);
        }

        .cpl_wrk-scrum-board .c_header .c_buttons {
            margin-bottom: -0.5rem;
        }

            .cpl_wrk-scrum-board .c_header .c_buttons .c_search-input {
                width: 100%;
                max-width: 150rem;
                display: block;
                padding: 0.375rem 0.75rem;
                font-size: 1rem;
                line-height: 1.5;
                background-color: #ffffff;
                background-clip: padding-box;
                border: 1px solid #ced4da;
                border-radius: 0.25rem;
                margin: 0;
                text-align: left;
            }

    .cpl_wrk-scrum-board .c_surface {
        display: flex;
        flex-direction: column;
        height: calc(100% - 4.5rem);
    }

        .cpl_wrk-scrum-board .c_surface .c_content {
            display: flex;
            flex-direction: column;
            flex: 1 1 0%;
            position: relative;
            overflow-y: auto;
            outline: none;
        }

            .cpl_wrk-scrum-board .c_surface .c_content .c_board-wrapper {
                position: absolute;
                top: 8px;
                right: 0;
                bottom: 0;
                left: 0;
            }

                .cpl_wrk-scrum-board .c_surface .c_content .c_board-wrapper .c_board-main-content {
                    display: flex;
                    flex-direction: column;
                    margin-right: 0;
                    position: relative;
                    transition: margin .1s ease-in;
                    height: 100%;
                    line-height: 20px;
                }

                    .cpl_wrk-scrum-board .c_surface .c_content .c_board-wrapper .c_board-main-content .c_board-canvas {
                        flex-grow: 1;
                        position: relative;
                    }

                        .cpl_wrk-scrum-board .c_surface .c_content .c_board-wrapper .c_board-main-content .c_board-canvas .c_board {
                            user-select: none;
                            white-space: nowrap;
                            margin-bottom: 8px;
                            overflow-x: auto;
                            overflow-y: hidden;
                            padding-bottom: 8px;
                            position: absolute;
                            top: 0;
                            right: 0;
                            bottom: 0;
                            left: 0;
                        }

                            .cpl_wrk-scrum-board .c_surface .c_content .c_board-wrapper .c_board-main-content .c_board-canvas .c_board .c_list-wrapper {
                                width: 272px;
                                margin: 0 4px;
                                height: 100%;
                                box-sizing: border-box;
                                display: inline-block;
                                vertical-align: top;
                                white-space: nowrap;
                            }

                            .cpl_wrk-scrum-board .c_surface .c_content .c_board-wrapper .c_board-main-content .c_board-canvas .c_board .c_active-line {
                                width: 1px;
                                margin: 0 4px;
                                height: 100%;
                                box-sizing: border-box;
                                display: inline-block;
                                vertical-align: top;
                                background-color: seagreen;
                            }

                            .cpl_wrk-scrum-board .c_surface .c_content .c_board-wrapper .c_board-main-content .c_board-canvas .c_board .c_closed-line {
                                width: 1px;
                                margin: 0 4px;
                                height: 100%;
                                box-sizing: border-box;
                                display: inline-block;
                                vertical-align: top;
                                background-color: indianred;
                            }

                            .cpl_wrk-scrum-board .c_surface .c_content .c_board-wrapper .c_board-main-content .c_board-canvas .c_board .c_list {
                                background-color: #ebecf0;
                                border-radius: 3px;
                                box-sizing: border-box;
                                display: flex;
                                flex-direction: column;
                                max-height: 100%;
                                position: relative;
                                white-space: normal;
                            }

                            .cpl_wrk-scrum-board .c_surface .c_content .c_board-wrapper .c_board-main-content .c_board-canvas .c_board .c_list-header {
                                flex: 0 0 auto;
                                padding: 10px 8px;
                                position: relative;
                                min-height: 30px;
                                border-radius: 0.3rem;
                                margin-bottom: 0.4rem;
                            }

                                .cpl_wrk-scrum-board .c_surface .c_content .c_board-wrapper .c_board-main-content .c_board-canvas .c_board .c_list-header .c_list-header-title {
                                    position: absolute;
                                    top: 3px;
                                    right: 20px;
                                    bottom: 0;
                                    left: 15px;
                                }

                                .cpl_wrk-scrum-board .c_surface .c_content .c_board-wrapper .c_board-main-content .c_board-canvas .c_board .c_list-header .c_list-header-number {
                                    font-size: 0.9rem;
                                    font-weight: 600;
                                    /*color: #333333;*/
                                    text-align: right;
                                    position: absolute;
                                    top: 4px;
                                    left: 4px;
                                    width: 15px;
                                    height: 20px;
                                    z-index: 1;
                                }
                                /* Textbox that looks like a label */
                                .cpl_wrk-scrum-board .c_surface .c_content .c_board-wrapper .c_board-main-content .c_board-canvas .c_board .c_list-header .c_list-header-title input[type=text] {
                                    font-size: 0.9rem;
                                    font-weight: 600;
                                    color: #333333;
                                    background-color: transparent;
                                    margin: -3px 0;
                                    padding: 4px 8px;
                                    width: 100%;
                                    height: 27px;
                                    /*overflow-wrap: break-word;*/
                                    outline: none;
                                    border: none;
                                    border-radius: 3px;
                                    box-shadow: none;
                                    cursor: pointer;
                                }

                                    .cpl_wrk-scrum-board .c_surface .c_content .c_board-wrapper .c_board-main-content .c_board-canvas .c_board .c_list-header .c_list-header-title input[type=text]:focus {
                                        color: #000000 !important;
                                        background-color: #ffffff;
                                        box-shadow: inset 0 0 0 2px #0079bf;
                                        cursor: auto;
                                    }

                                /* Menu button (...) in the upper right corner of the list header */
                                .cpl_wrk-scrum-board .c_surface .c_content .c_board-wrapper .c_board-main-content .c_board-canvas .c_board .c_list-header .c_list-header-menu {
                                    color: #6b778c;
                                    text-align: center;
                                    border-radius: 3px;
                                    position: absolute;
                                    top: 4px;
                                    right: 4px;
                                    width: 20px;
                                    height: 20px;
                                    z-index: 1;
                                }

                                    .cpl_wrk-scrum-board .c_surface .c_content .c_board-wrapper .c_board-main-content .c_board-canvas .c_board .c_list-header .c_list-header-menu:before {
                                        /* fas fa-ellipsis-h */
                                        content: "\f141";
                                        font-family: "Font Awesome 5 Free";
                                        font-weight: 900; /* far 400, fas 900 */
                                        font-size: 0.7rem;
                                        /* Center */
                                        display: flex;
                                        flex-direction: column;
                                        align-items: center;
                                        justify-content: center;
                                    }

                                    .cpl_wrk-scrum-board .c_surface .c_content .c_board-wrapper .c_board-main-content .c_board-canvas .c_board .c_list-header .c_list-header-menu:hover {
                                        color: #333333 !important;
                                        background-color: #cccccc;
                                        cursor: pointer;
                                    }

                            .cpl_wrk-scrum-board .c_surface .c_content .c_board-wrapper .c_board-main-content .c_board-canvas .c_board .c_list-header-description {
                                margin-bottom: 12px;
                            }
                                /* Textarea that looks like a description text */
                                .cpl_wrk-scrum-board .c_surface .c_content .c_board-wrapper .c_board-main-content .c_board-canvas .c_board .c_list-header-description textarea {
                                    position: relative;
                                    font-size: 12px;
                                    font-style: italic;
                                    color: #333333;
                                    outline: none;
                                    border: none;
                                    background-color: transparent;
                                    border-radius: 3px;
                                    box-shadow: none;
                                    font-weight: 400;
                                    margin: -10px 0 -4px 0;
                                    overflow: hidden;
                                    overflow-wrap: break-word;
                                    resize: none;
                                    height: 22px;
                                    max-height: 22px;
                                    padding: 4px 8px;
                                    width: 100%;
                                    box-sizing: border-box;
                                    display: block;
                                    transition-property: background-color, border-color, box-shadow;
                                    transition-duration: 700ms;
                                    transition-timing-function: ease;
                                    cursor: pointer;
                                }

                                    .cpl_wrk-scrum-board .c_surface .c_content .c_board-wrapper .c_board-main-content .c_board-canvas .c_board .c_list-header-description textarea:focus {
                                        font-style: normal;
                                        background-color: #ffffff;
                                        box-shadow: inset 0 0 0 2px #0079bf;
                                        min-height: 150px;
                                        max-height: 300px;
                                        margin: 0;
                                        resize: vertical;
                                        cursor: auto;
                                    }

                            .cpl_wrk-scrum-board .c_surface .c_content .c_board-wrapper .c_board-main-content .c_board-canvas .c_board .c_list-cards {
                                flex: 1 1 auto;
                                overflow-y: auto;
                                overflow-x: hidden;
                                margin: 0 4px 0 4px;
                                padding: 0 4px;
                                min-height: 20px;
                                z-index: 1;
                            }

                            .cpl_wrk-scrum-board .c_surface .c_content .c_board-wrapper .c_board-main-content .c_board-canvas .c_board .c_list-card-dragging {
                                transform: rotate(5deg);
                            }

                            .cpl_wrk-scrum-board .c_surface .c_content .c_board-wrapper .c_board-main-content .c_board-canvas .c_board .c_list-card {
                                position: relative;
                                display: block;
                                text-decoration: none;
                                background-color: #ffffff;
                                border-radius: 3px;
                                box-shadow: 0 1px 0 rgb(9 30 66 / 25%);
                                margin-bottom: 8px;
                                max-width: 300px;
                                min-height: 20px;
                                z-index: 0;
                                cursor: pointer;
                            }

                                .cpl_wrk-scrum-board .c_surface .c_content .c_board-wrapper .c_board-main-content .c_board-canvas .c_board .c_list-card:hover {
                                    background-color: #f6f6f6;
                                    text-decoration: none;
                                    box-shadow: 0 1px 0 rgb(9 30 66 / 55%);
                                }

                                /* Order number */
                                .cpl_wrk-scrum-board .c_surface .c_content .c_board-wrapper .c_board-main-content .c_board-canvas .c_board .c_list-card .c_list-card-order-no {
                                    position: absolute;
                                    font-size: 12px;
                                    color: #666666;
                                    top: 0;
                                    right: 6px;
                                    z-index: 40;
                                }

                                /* Initials of the card owner */
                                .cpl_wrk-scrum-board .c_surface .c_content .c_board-wrapper .c_board-main-content .c_board-canvas .c_board .c_list-card .c_list-card-owner {
                                    position: absolute;
                                    font-size: 12px;
                                    color: #666666;
                                    bottom: 0;
                                    right: 6px;
                                    z-index: 40;
                                }

                                .cpl_wrk-scrum-board .c_surface .c_content .c_board-wrapper .c_board-main-content .c_board-canvas .c_board .c_list-card .c_list-card-details {
                                    overflow: hidden;
                                    padding: 6px 8px 2px 8px;
                                    position: relative;
                                    z-index: 10;
                                }

                                    .cpl_wrk-scrum-board .c_surface .c_content .c_board-wrapper .c_board-main-content .c_board-canvas .c_board .c_list-card .c_list-card-details .c_card-user-groups {
                                        position: relative;
                                        overflow: auto;
                                        width: 190px;
                                    }
                                        /* Colored user group pill */
                                        .cpl_wrk-scrum-board .c_surface .c_content .c_board-wrapper .c_board-main-content .c_board-canvas .c_board .c_list-card .c_list-card-details .c_card-user-groups span {
                                            float: left;
                                            position: relative;
                                            display: block;
                                            line-height: 100px;
                                            height: 8px;
                                            /* Max 5 pills */
                                            max-width: 33px;
                                            min-width: 33px;
                                            padding: 0;
                                            margin: 0 4px 4px 0;
                                            border-radius: 4px;
                                        }

                            .cpl_wrk-scrum-board .c_surface .c_content .c_board-wrapper .c_board-main-content .c_board-canvas .c_board .c_list-footer {
                                height: 34px;
                                padding: 0px 8px;
                            }

                                .cpl_wrk-scrum-board .c_surface .c_content .c_board-wrapper .c_board-main-content .c_board-canvas .c_board .c_list-footer a {
                                    display: block;
                                    font-size: 13px;
                                    font-weight: 600;
                                    text-decoration: none;
                                    color: #888888;
                                    padding: 4px 8px;
                                    border-radius: 3px;
                                }

                                    .cpl_wrk-scrum-board .c_surface .c_content .c_board-wrapper .c_board-main-content .c_board-canvas .c_board .c_list-footer a:hover {
                                        color: #333333;
                                        background-color: #cccccc;
                                    }

                            .cpl_wrk-scrum-board .c_surface .c_content .c_board-wrapper .c_board-main-content .c_board-canvas .c_board .c_list-card .c_list-card-details .c_list-card-work-description {
                                font-size: 0.8rem;
                                font-weight: 600;
                                color: #333333;
                            }

                            .cpl_wrk-scrum-board .c_surface .c_content .c_board-wrapper .c_board-main-content .c_board-canvas .c_board .c_list-card .c_list-card-details .c_list-card-customer {
                                font-size: 0.8rem;
                                color: #333333;
                            }

                            .cpl_wrk-scrum-board .c_surface .c_content .c_board-wrapper .c_board-main-content .c_board-canvas .c_board .c_list-card .c_list-card-details .c_list-card-icons {
                                font-size: 0.8rem;
                                color: #666666;
                                margin-left: -0.6rem;
                            }

                                .cpl_wrk-scrum-board .c_surface .c_content .c_board-wrapper .c_board-main-content .c_board-canvas .c_board .c_list-card .c_list-card-details .c_list-card-icons i {
                                    font-size: 0.75rem;
                                    margin-left: 0.6rem;
                                    margin-right: 0.1rem;
                                }

/*#endregion */

/*#region WorkOrder PrintPlannerCards */

.e_book {
}

.e_page-frame {
    /* A4 210x297mm */
    width: 210mm;
    height: 297mm;
    padding: 5mm;
    /* Gap between pages on screen */
    margin-top: 10px;
    border-radius: 0.4rem;
    background: #ffffff;
    box-shadow: 0.125rem 0.125rem 1rem -0.3rem rgba(0,0,100,0.4);
    overflow: hidden;
}

.e_page-content {
    min-height: 287mm;
    outline: 5mm #FFEAEA solid;
    overflow: hidden;
}

@page {
    /* A4 210x297mm */
    size: A4;
    margin: 0;
}

.e_cards-box {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}

    .e_cards-box .e_card {
        font-size: 11px;
        border: 1px solid #cccccc;
        border-radius: 4px;
        width: 33%; /* 210 / 3 = 70 - gap */
        height: 90mm; /* 297 / 3 = 99 - gap */
        overflow: hidden;
    }

        .e_cards-box .e_card .e-card-box {
            padding: 0px 5px;
            border-bottom: 1px solid #cccccc;
        }

        .e_cards-box .e_card .e_card-h1 {
            font-size: 18px;
            font-weight: 600;
            padding: 0 0 0 5px;
            border-bottom: 1px solid #cccccc;
        }

        .e_cards-box .e_card .e_card-h2 {
            font-size: 14px;
            font-weight: 600;
            padding-bottom: 2px;
            line-height: 0.9;
        }

        .e_cards-box .e_card .e_card-h3 {
            font-size: 14px;
            font-weight: 400;
            min-width: 100px;
            line-height: 0.9;
        }

        .e_cards-box .e_card label {
            margin: 0;
            padding: 0 5px 0 0;
            font-size: 10px;
        }

        .e_cards-box .e_card .e_card-box4-left {
            float: left;
            width: 45%;
            height: 70mm;
            padding: 5px;
            border-right: 1px solid #cccccc;
        }

            .e_cards-box .e_card .e_card-box4-left .e_label1 {
                min-height: 55px;
            }

        .e_cards-box .e_card .e_card-box4-right {
            width: 55%;
            float: right;
            padding-bottom: 5px;
            border-bottom: 1px solid #cccccc;
        }

            .e_cards-box .e_card .e_card-box4-right .e_label2 {
                padding: 5px 0 0 5px;
                display: inline-block;
                min-width: 50px;
            }

            .e_cards-box .e_card .e_card-box4-right .e_input2 {
                display: inline-block;
                min-width: 70px;
                border: 1px solid #cccccc;
                border-radius: 3px;
                padding-left: 3px;
            }

        .e_cards-box .e_card .e_promised-customer {
            color: red;
            font-weight: 600;
            min-height: 1rem;
        }

@media print {
    body {
        margin: 0 !important;
        padding: 0 !important;
    }

    .e_page-frame {
        margin: 0;
        /* Reset all properties to initial */
        border: initial;
        border-radius: initial;
        width: initial;
        min-height: initial;
        box-shadow: initial;
        background: initial;
        overflow: initial;
    }

    .e_page-break-after {
        page-break-after: always;
    }

    .e_page-content {
        /* Fix to fill more of the page - bootstrap is causing this */
        min-height: 360mm;
        border: none;
        outline: none;
        overflow: initial;
    }

    .e_cards-box .e_card {
        font-size: 15px;
        border: 1px solid #000000;
        width: 81mm; /* 210 / 3 = 70 - gap */
        height: 109mm; /* 297 / 3 = 99 - gap */
    }

        .e_cards-box .e_card .e_card-h1 {
            font-size: 26px;
        }

        .e_cards-box .e_card .e_card-h2 {
            font-size: 18px;
        }

        .e_cards-box .e_card .e_card-h3 {
            font-size: 18px;
        }

        .e_cards-box .e_card .e_card-box4-left .e_label1 {
            min-height: 65px;
        }

        .e_cards-box .e_card .e_card-box4-right .e_label2 {
            min-width: 70px;
        }
}

/*#endregion */

.cpl_PillBox {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 1.5rem;
}

    .cpl_PillBox .cpl_PillSet {
    }

        .cpl_PillBox .cpl_PillSet .cpl_PillTitle {
            font-size: 1rem;
            color: #666666;
        }

        .cpl_PillBox .cpl_PillSet .cpl_Pill {
            height: 0.5rem;
            max-width: 2.5rem;
            min-width: 2.5rem;
            padding: 0;
            margin: 0;
            border-radius: 0.25rem;
        }

        .cpl_PillBox .cpl_PillSet .cpl_PillColorValue {
            font-size: 0.6rem;
            color: #666666;
        }

.cpl_WofDropdown {
    width: 100%;
    border: 0.125rem solid #ced4da;
    border-radius: 0.25rem;
}

.cpl_WofPillSm {
    display: inline-block;
    height: 0.8rem;
    max-width: 1.2rem;
    min-width: 1.2rem;
    padding: 0;
    margin: 0;
    border-radius: 0.4rem;
}

.cpl_good-work-popup {
    max-width: 18rem !important;
}

    .cpl_good-work-popup h4 {
        margin-top: 0;
    }

    .cpl_good-work-popup .modal-content {
        border-radius: 0.8rem;
    }

.cpl_accept-work-order-popup {
    max-width: 30rem !important;
}

    .cpl_accept-work-order-popup h4 {
        margin-top: 0;
    }

    .cpl_accept-work-order-popup .modal-content {
        border-radius: 0.8rem;
    }

        .cpl_accept-work-order-popup .modal-content label {
            font-size: 0.9rem;
            font-weight: 600;
            margin-bottom: 0;
            margin-top: 0.5rem;
            position: relative;
            display: block;
            color: var(--color-darker1);
        }

.cpl_text-to-html {
    color: #333333;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border-radius: 0.5rem;
    padding: 0.4rem 1rem;
}

    .cpl_text-to-html p {
        color: #333333;
        margin: 0.1rem 0 0.1rem 0;
    }

    .cpl_text-to-html ol {
        margin: 0.5rem 0 0.5rem 0;
    }

    .cpl_text-to-html li {
        margin: 0.2rem 0 0.2rem 0;
    }


.cpl-home_page_button_container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* Aligns child divs to the left */
    gap: 2rem; /* Optional: Add space between the child divs */
    margin: 1rem;
}

    .cpl-home_page_button_container .cpl-home_page_button {
        flex: 1 1 15rem; /* Flex-grow: 1, Flex-shrink: 1, Flex-basis: 200px */
        /*max-width: 20rem;*/ /* Set the max width to 200px */
        height: 14rem; /* Optional: Set a height for the divs */
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 3rem;
        cursor: pointer;
    }

        .cpl-home_page_button_container .cpl-home_page_button:hover {
            background-color: lightgray; /* Optional: Background color */
        }

        .cpl-home_page_button_container .cpl-home_page_button img {
            width: auto; /* Make the image take up the full width of the div */
            height: 10rem; /* Maintain the aspect ratio */
            display: block; /* Remove any inline spacing below the image */
            object-fit: cover; /* Ensure the image covers the entire div without distortion */
            margin-bottom: 1rem;
        }

/* -- breakpoint-lg: 992px; */
@media (max-width: 992px) {
    .cpl-home_page_button_container .cpl-home_page_button {
        background-color: lightgray; /* Optional: Background color */
    }
    .cpl-home_page_button_container .cpl-home_page_button:hover {
        background-color: #cccccc; /* Optional: Background color */
    }
}

/*----------------------------------------------------------
       --- Cert Pal icons mapping fontawsome icons ---
----------------------------------------------------------*/

/* --- Action icons in aphabetical order ---*/
.cpl_icon__mini {
    font-size: 1rem;
    padding-right: 0.2rem;
}
.cpl_icon__add:before {
    /* fas fa-plus */
    content: "\f067";
}
.cpl_icon__address:before {
    /* home */
    content: "\f015";
}
.cpl_icon__approve:before {
    /* fas fa-check */
    content: "\f00c";
}
.cpl_icon__approved {
    color: #49E42E;
}
    .cpl_icon__approved:before {
        /* fas fa-check */
        content: "\f00c";
    }
.cpl_icon__attach:before {
    /* fas fa-paperclip */
    content: "\f0c6";
}
.cpl_icon__back:before {
    /* fas fa-angle-left */
    content: "\f104";
}
.cpl_icon__back-to-list:before {
    /* fas fa-angle-double-left */
    content: "\f100";
}
.cpl_icon__cancel:before {
    /* fas fa-ban */
    content: "\f05e";
}
.cpl_icon__changed-from-to:before {
    /* fas fa-long-arrow-alt-right */
    content: "\f30b";
}
.cpl_icon__chart:before {
    /* fas fa-chart-bar */
    content: "\f080";
}
.cpl_icon__clear-filter:before {
    /* fas fa-ban */
    content: "\f05e";
}
.cpl_icon__continue {
    color: #49E42E;
    font-size: 2rem;
}
    .cpl_icon__continue:hover {
        color: #217113;
    }
    .cpl_icon__continue:before {
        /* far fa-arrow-alt-circle-right */
        font-weight: 400; /* far 400, fas 900 */
        content: "\f35a";
    }
.cpl_icon__copy:before {
    /* far fa-copy */
    font-weight: 400; /* far 400, fas 900 */
    content: "\f0c5";
}
.cpl_icon__create:before {
    /* far fa-plus-square */
    font-weight: 400; /* far 400, fas 900 */
    content: "\f0fe";
}
.cpl_icon__decline:before {
    /* fas fa-ban */
    content: "\f05e";
}
/*.cpl_icon__delete { color: #A41E32; }*/
.cpl_icon__delete:before {
    /* far fa-trash-alt */
    font-weight: 400; /* far 400, fas 900 */
    content: "\f2ed";
}
.cpl_icon__details {
    display: none !important;
    visibility: hidden;
}
    .cpl_icon__details:before {
        /* align-left */
        content: "\f036";
    }
.cpl_icon__download:before {
    /* fas fa-file-download */
    content: "\f56d";
}
.cpl_icon__edit:before {
    /* fas fa-edit */
    content: "\f044";
}
.cpl_icon__email {
    font-size: 0.8rem;
    color: #666666;
    color: var(--color-darker2);
}
    .cpl_icon__email:before {
        /* envelope */
        content: "\f0e0";
    }
.cpl_icon__export:before {
    /* fas fa-file-export */
    content: "\f56e";
}
.cpl_icon__favorite-on {
    color: #97e588;
    font-size: 1.2rem;
}
    .cpl_icon__favorite-on:before {
        /* fas fa-star */
        content: "\f005";
    }
.cpl_icon__favorite-off {
    color: #cccccc;
    font-size: 1.3rem;
}
    .cpl_icon__favorite-off:hover {
        color: #97e588;
        cursor: pointer;
    }
    .cpl_icon__favorite-off:before {
        /* far fa-star */
        font-weight: 400; /* far 400, fas 900 */
        content: "\f005";
    }
.cpl_icon__filter:before {
    /* filter */
    content: "\f0b0";
}
.cpl_icon__fixed-size {
    /* to make lists with starting icons to look straight */
    width: 1.4rem;
    text-align: center;
    overflow: hidden;
}
.cpl_icon__follow-up {
    color: #E80404 !important;
}
    .cpl_icon__follow-up:before {
        /* fas fa-exclamation-circle */
        content: "\f06a";
    }
.cpl_icon__help {
    color: #666666;
}
    .cpl_icon__help:hover {
        color: #066BCE;
    }
    .cpl_icon__help:before {
        /* fas fa-question-circle */
        content: "\f059";
    }
.cpl_icon__link:before {
    /* fas fa-link */
    content: "\f0c1";
}
.cpl_icon__maintain:before {
    /* fas fa-gear */
    content: "\f013";
}
.cpl_icon__map-marker {
    color: #666666;
}
    .cpl_icon__map-marker:before {
        /* fas fa-map-marker-alt */
        content: "\f3c5";
    }
.cpl_icon__merge:before {
    /* fas fa-sign-in-alt */
    content: "\f2f6";
}
.cpl_icon__next:before {
    /* fas fa-angle-right */
    content: "\f105";
}
.cpl_icon__phone-fixed {
    font-size: 0.8rem;
    color: #666666;
    color: var(--color-darker2);
}
    .cpl_icon__phone-fixed:before {
        /* earphone */
        content: "\f095";
    }
.cpl_icon__phone-cell {
    font-size: 0.8rem;
    color: #666666;
    color: var(--color-darker2);
}
    .cpl_icon__phone-cell:before {
        /* phone */
        content: "\f095";
    }
.cpl_icon__previous:before {
    /* fas fa-angle-left */
    content: "\f104";
}
.cpl_icon__print:before {
    /* fas fa-print */
    content: "\f02f";
}
.cpl_icon__refresh:before {
    /* fas fa-redo-alt */
    content: "\f2f9";
}
.cpl_icon__save:before {
    /* save */
    content: "\f0c7";
}
.cpl_icon__setting {
    color: #666666;
}
    .cpl_icon__setting:hover {
        color: #066BCE;
    }
    .cpl_icon__setting:before {
        /* fas fa-cog */
        content: "\f013";
    }
.cpl_icon__show:before {
    /* fas fa-eye */
    content: "\f06e";
}
.cpl_icon__refresh:before {
    /* fas fa-sync-alt */
    content: "\f2f1";
}
.cpl_icon__report:before {
    /* fas fa-print */
    content: "\f02f";
}
.cpl_icon__rfq-request:before {
    /* fas fa-search-dollar */
    content: "\f688";
}
.cpl_icon__rfq-receiver:before {
    /* fas fa-envelope */
    content: "\f0e0";
}
.cpl_icon__rfq-offer:before {
    /* fas fa-file-invoice-dollar */
    content: "\f571";
}
.cpl_icon__sort-ascending {
    color: #b9d4f9;
}
    .cpl_icon__sort-ascending:before {
        /* arrow-down */
        content: "\f063";
    }
.cpl_icon__save:before {
    /* fas fa-save */
    content: "\f0c7";
}
.cpl_icon__sort-descending {
    color: #b9d4f9;
}
    .cpl_icon__sort-descending:before {
        /* arrow-up */
        content: "\f062";
    }
.cpl_icon__toolbox:before {
    /* briefcase */
    content: "\f0b1";
}
.cpl_icon__upload:before {
    /* upload */
    content: "\f093";
}
.cpl_icon__when-updated:before {
    /* time */
    content: "\f017";
}
.cpl_icon__web-address:before {
    /* globe */
    content: "\f0ac";
}

/* --- Cert Pal workflow icons in alphabetical order ---*/
.cpl_icon__wf-forward {
    color: #1e561e;
}
    .cpl_icon__wf-forward:before {
        /* fas fa-chevron-circle-right */
        content: "\f138";
    }
.cpl_icon__wf-backward {
    color: #6f1b1b;
}
    .cpl_icon__wf-backward:before {
        /* fas fa-chevron-circle-left */
        content: "\f137";
    }
.cpl_icon__wf-pause {
    color: #444444;
}
    .cpl_icon__wf-pause:before {
        /* fas fa-pause-circle */
        content: "\f28b";
    }
.cpl_icon__wf-stop {
    color: #6f1b1b;
}
    .cpl_icon__wf-stop:before {
        /* fas fa-stop-circle */
        content: "\f28d";
    }
.cpl_icon__wf-reactivate {
    color: #444444;
}
    .cpl_icon__wf-reactivate:before {
        /* fas fa-chevron-circle-up */
        content: "\f139";
    }

/* --- All Cert Pal objects in alphabetical order ---*/
.cpl_icon__accounting-cost-center:before {
    /* fas fa-money-check-alt */
    content: "\f53d";
}
.cpl_icon__add-on:before {
    /* fas fa-clone */
    content: "\f24d";
}
.cpl_icon__add-on-type:before {
    /* leaf */
    content: "\f06c";
}
.cpl_icon__activity-log:before {
    /* fas fa-clock */
    content: "\f017";
}
.cpl_icon__api-consumer:before {
    /* fas fa-cog */
    content: "\f013";
}
.cpl_icon__attachment-set:before {
    /* leaf */
    content: "\f06c";
}
.cpl_icon__attachment-set-item:before {
    /* leaf */
    content: "\f06c";
}
.cpl_icon__attendance:before {
    /* fas fa-tasks */
    content: "\f0ae";
}
.cpl_icon__buyer-organization:before {
    /* fas fa-hotel */
    content: "\f594";
}
.cpl_icon__buyer-user:before {
    /* fas fa-street-view */
    content: "\f21d";
}
.cpl_icon__certificate:before {
    /* far fa-address-card */
    font-weight: 400; /* far 400, fas 900 */
    content: "\f2bb";
}
.cpl_icon__certificate-overview:before {
    /* fas fa-cog */
    content: "\f013";
}
.cpl_icon__certificate-monitor:before {
    /* fas fa-chart-bar */
    content: "\f080";
}
.cpl_icon__certificate-statement:before {
    /* fas fa-print */
    content: "\f02f";
}
.cpl_icon__chat-ai:before {
    /* far fa-comment-alt */
    font-weight: 400; /* far 400, fas 900 */
    content: "\f27a";
}
.cpl_icon__chat-ai-prep:before {
    /* far fa-comment-alt */
    font-weight: 400; /* far 400, fas 900 */
    content: "\f27a";
}
.cpl_icon__chat:before {
    /* far fa-comment-alt */
    font-weight: 400; /* far 400, fas 900 */
    content: "\f27a";
}
.cpl_icon__checklist-template:before {
    /* fas fa-tasks */
    content: "\f0ae";
}
.cpl_icon__competence-user:before {
    /* fas fa-users-cog */
    content: "\f509";
}
.cpl_icon__competence-role:before {
    /* fas fa-users-cog */
    content: "\f509";
}
.cpl_icon__contractor-price-list:before {
    /* usd */
    content: "\f155";
}
.cpl_icon__contractor-user:before {
    /* user */
    content: "\f007";
}
.cpl_icon__contractor-user-group:before {
    /* fas fa-user-friends */
    content: "\f500";
}
.cpl_icon__contractor-user-settings:before {
    /* fas fa-users-cog */
    content: "\f509";
}
.cpl_icon__contractor-user-per-diem:before {
    /* fas fa-plane */
    content: "\f072";
}
.cpl_icon__contractor-organization:before {
    /* fas fa-archway */
    content: "\f557";
}
.cpl_icon__crm-business-area:before {
    /* fas fa-sitemap */
    content: "\f0e8";
}
.cpl_icon__crm-business-case:before {
    /* fas fa-file-invoice-dollar */
    content: "\f571";
}
.cpl_icon__crm-email-template:before {
    /* fas fa-envelope-square */
    content: "\f199";
}
.cpl_icon__crm-user-group:before {
    /* fas fa-user-tag */
    content: "\f507";
}
.cpl_icon__day-journal:before {
    /* book */
    content: "\f02d";
}
.cpl_icon__education-event:before {
    /* fas fa-chalkboard-teacher */
    content: "\f51c";
}
.cpl_icon__education-organization:before {
    /* fas fa-school */
    content: "\f549";
}
.cpl_icon__education:before {
    /* education */
    content: "\f19d";
}
.cpl_icon__education-forecast:before {
    /* fas fa-calculator */
    content: "\f1ec";
}
.cpl_icon__education-type:before {
    /* education */
    content: "\f19d";
}
.cpl_icon__educator-user:before {
    /* user */
    content: "\f007";
}
.cpl_icon__email-log:before {
    /* fas fa-envelope-open-text */
    content: "\f658";
}
.cpl_icon__email-queue:before {
    /* envelope */
    content: "\f0e0";
}
.cpl_icon__email-to-send {
    color: #ff0000;
}
    .cpl_icon__email-to-send:before {
        /* envelope */
        content: "\f0e0";
    }
.cpl_icon__equipment:before {
    /* fas fa-drafting-compass */
    content: "\f568";
}
.cpl_icon__equipment-type:before {
    /* leaf */
    content: "\f06c";
}
.cpl_icon__error:before {
    /* leaf */
    content: "\f06c";
}
.cpl_icon__error-log:before {
    /* fas fa-exclamation-triangle */
    content: "\f071";
}
.cpl_icon__event-booking:before {
    /* fas fa-ticket-alt */
    content: "\f3ff";
}
.cpl_icon__history-event-type:before {
    /* fas fa-history */
    content: "\f1da";
}
.cpl_icon__home:before {
    /* home */
    content: "\f015";
}
.cpl_icon__html-content:before {
    /* fas fa-clipboard-list */
    content: "\f46d";
}
.cpl_icon__image-pin:before {
    /* fas fa-map-pin */
    content: "\f276";
}
.cpl_icon__image-pin-container:before {
    /* far fa-image */
    font-weight: 400; /* far 400, fas 900 */
    content: "\f03e";
}
.cpl_icon__incident {
    color: #B85050;
}
    .cpl_icon__incident:before {
        /* tint */
        content: "\f043";
    }
.cpl_icon__invoice-header:before {
    /* fas fa-file-invoice-dollar */
    content: "\f571";
}
.cpl_icon__invoice-row:before {
    /* fas fa-file-invoice-dollar */
    content: "\f571";
}
.cpl_icon__instructor-organization:before {
    /* fas fa-chalkboard */
    content: "\f51b";
}
.cpl_icon__instructor-user:before {
    /* fas fa-chalkboard-teacher */
    content: "\f51c";
}
.cpl_icon__labor:before {
    /* fas fa-wrench */
    content: "\f0ad";
}
.cpl_icon__language:before {
    /* fas fa-language */
    content: "\f1ab";
}
.cpl_icon__print-work-order:before {
    /* fas fa-print */
    content: "\f02f";
}
.cpl_icon__work-order-field:before {
    /* fas fa-print */
    content: "\f02f";
}
.cpl_icon__rating-answer-group:before {
    /* fas fa-balance-scale */
    content: "\f24e";
}
.cpl_icon__rating-form:before {
    /* fas fa-balance-scale */
    content: "\f24e";
}
.cpl_icon__scrum-board:before {
    /* fas fa-grip-vertical */
    content: "\f58e";
}
.cpl_icon__sms:before {
    /* leaf */
    content: "\f06c";
}
.cpl_icon__sms-log:before {
    /* fas fa-sms */
    content: "\f7cd";
}
.cpl_icon__subcontractor-organization:before {
    /* fas fa-archway */
    content: "\f557";
}
.cpl_icon__subcontractor-user:before {
    /* user */
    content: "\f007";
}
/*.cpl_icon__support-ticket { display: none !important; visibility: hidden; }*/
.cpl_icon__support-ticket:before {
    /* fas fa-headset */
    content: "\f590";
}
.cpl_icon__text-template:before {
    /* fas fa-stamp */
    content: "\f5bf";
}
.cpl_icon__todo:before {
    /* fas fa-clipboard-list */
    content: "\f46d";
}
.cpl_icon__teacher:before {
    /* education */
    content: "\f19d";
}
.cpl_icon__translate {
    color: #999999;
    font-size: 1.5rem;
    width: 2rem;
}
    .cpl_icon__translate:hover {
        color: #333333;
    }
    .cpl_icon__translate:before {
        /* fas fa-language */
        content: "\f1ab";
    }
.cpl_icon__unit:before {
    /* leaf */
    content: "\f06c";
}
.cpl_icon__vehicle:before {
    /* fas fa-car-side */
    content: "\f5e4";
}
.cpl_icon__waiting {
    color: #999999;
    font-size: 0.9rem;
}
    .cpl_icon__waiting:before {
        /* fas fa-hourglass-half */
        content: "\f252";
    }
.cpl_icon__work-activity:before {
    /* fas fa-user-clock */
    content: "\f4fd";
}
.cpl_icon__work-activity__trip:before {
    /* fas fa-car */
    content: "\f1b9";
}
.cpl_icon__work-activity__absent:before {
    /* fas fa-thermometer-half */
    content: "\f2c9";
}
.cpl_icon__work-activity-overview:before {
    /* fas fa-th */
    content: "\f00a";
}
.cpl_icon__work-activity-type:before {
    /* leaf */
    content: "\f06c";
}
.cpl_icon__work-activity-user:before {
    /* fas fa-align-justify */
    content: "\f039";
}
.cpl_icon__work-journal-day-item:before {
    /* book */
    content: "\f02d";
}
.cpl_icon__work-order:before {
    /* far fa-list-alt */
    font-weight: 400; /* far 400, fas 900 */
    content: "\f022";
}
.cpl_icon__work-order-field:before {
    /* fas fa-table-list */
    content: "\f00b";
}
.cpl_icon__work-order-import:before {
    /* as fa-file-excel */
    content: "\f1c3";
}
.cpl_icon__work-order-module:before {
    /* far fa-list-alt */
    font-weight: 400; /* far 400, fas 900 */
    content: "\f022";
}
.cpl_icon__work-order-module-template:before {
    /* far fa-list-alt */
    font-weight: 400; /* far 400, fas 900 */
    content: "\f022";
}
.cpl_icon__work-order-status:before {
    /* fas fa-battery-quarter */
    font-weight: 900; /* far 400, fas 900 */
    content: "\f243";
}
.cpl_icon__work-order-status-button:before {
    /* fas fa-hammer */
    font-weight: 900; /* far 400, fas 900 */
    content: "\f6e3";
}
.cpl_icon__work-schedule:before {
    /* far fa-list-alt */
    font-weight: 400; /* far 400, fas 900 */
    content: "\f022";
}
.cpl_icon__work-schedule-time-block-type:before {
    /* fas fa-calendar-week */
    font-weight: 900; /* far 400, fas 900 */
    content: "\f784";
}
.cpl_icon__worker-role:before {
    /* far fa-calendar-alt */
    font-weight: 400; /* far 400, fas 900 */
    content: "\f073";
}