/**
 * CSS for crm template
 */
/* latin-ext */
@font-face {
  font-family: 'Red Hat Display';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/afwstandalone/css/font/redhatdisplay/8vIQ7wUr0m80wwYf0QCXZzYzUoTg8z6hR4jNCH5Z.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Red Hat Display';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/afwstandalone/css/font/redhatdisplay/8vIQ7wUr0m80wwYf0QCXZzYzUoTg_T6hR4jNCA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Red Hat Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/afwstandalone/css/font/redhatdisplay/8vIQ7wUr0m80wwYf0QCXZzYzUoTg8z6hR4jNCH5Z.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Red Hat Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/afwstandalone/css/font/redhatdisplay/8vIQ7wUr0m80wwYf0QCXZzYzUoTg_T6hR4jNCA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Red Hat Display';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/afwstandalone/css/font/redhatdisplay/8vIQ7wUr0m80wwYf0QCXZzYzUoTg8z6hR4jNCH5Z.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Red Hat Display';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/afwstandalone/css/font/redhatdisplay/8vIQ7wUr0m80wwYf0QCXZzYzUoTg_T6hR4jNCA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Red Hat Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/afwstandalone/css/font/redhatdisplay/8vIQ7wUr0m80wwYf0QCXZzYzUoTg8z6hR4jNCH5Z.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Red Hat Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/afwstandalone/css/font/redhatdisplay/8vIQ7wUr0m80wwYf0QCXZzYzUoTg_T6hR4jNCA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html { padding-bottom: 0 !important; }
body {
    font-family: 'Red Hat Display', sans-serif;
    letter-spacing: 0.03rem;
}

.main-grid-container,body,html {
    height: 100%
}

@media print,screen and (min-width: 40em) {
    .content-frame {
        height:100%
    }
}

.button .badge {
    line-height: 1.5
}

.button {
    font-weight: 500;
}

.button i[class*="fi"] {
    margin-right: 0.5rem;
}

.chatbutton {
    position: relative
}

.chatbutton .unseen-message-count {
    position: absolute;
    right: 0;
    top: 0
}

.main-navigation {
    padding: 1rem;
    -webkit-box-shadow: rgba(0,0,0,.13) 0 1px 3px 0,rgba(0,0,0,.09) 0 1px 2px 0;
    box-shadow: rgba(0,0,0,.13) 0 1px 3px 0,rgba(0,0,0,.09) 0 1px 2px 0;
    background-color: #fefefe;
    overflow-y: auto;
}

.main-navigation .company-logo img {
    margin-bottom: 0;
    max-width: 150px;
    max-height: 50px;
}

@media print,screen and (min-width: 40em) {
    .main-navigation .company-logo {
        margin-bottom:2rem;
        text-align: center;
    }
}

@media print,screen and (min-width: 40em) {
    .main-navigation {
        padding:2rem;
        height: 100%
    }
}

.main-menu {
    padding: 0;
    margin: 1rem 0 0;
    list-style: none;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    background-color: #fefefe
}

@media print,screen and (min-width: 40em) {
    .main-menu {
        margin: 0;
    }
}

[data-whatinput=mouse] .main-menu li {
    outline: 0
}

.main-menu .button,.main-menu a {
    line-height: 1;
    text-decoration: none;
    display: block;
    padding: .7rem 1rem
}

.main-menu a,.main-menu button,.main-menu input,.main-menu select {
    margin-bottom: 0
}

.main-menu input {
    display: inline-block
}

.main-menu .menu-item {
    margin-bottom: .25rem
}

.main-menu .menu-item .material-icons {
    font-size: 14px;
    vertical-align: bottom;
}

.main-menu .menu-item-link {
    padding: .7rem 1.8rem;
    color: #555;
    font-weight: 500;
    font-size: .813rem;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
    border-radius: 9px
}

.main-menu .menu-item-link.active,.main-menu .menu-item-link:hover {
    color: #0a0a0a;
    background-color: #edf6fd !important;
}

.interface-select label {
    font-weight: 500;
    color: #555;
    font-size: .6rem
}

.interface-select select {
    height: 1.8rem;
    font-size: .8rem;
    -webkit-box-shadow: rgba(0,0,0,.13) 0 1px 3px 0,rgba(0,0,0,.09) 0 1px 2px 0;
    box-shadow: rgba(0,0,0,.13) 0 1px 3px 0,rgba(0,0,0,.09) 0 1px 2px 0
}

.page-header {
    padding-top: .5rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid rgba(0,0,0,.1)
}

.page-header .page-title {
    margin-bottom: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #555
}

@media print,screen and (min-width: 40em) {
    .page-header .page-title {
        font-size:1.2rem
    }
}

.page-header a,.page-header button,.page-header select {
    margin-bottom: 0
}

.frame-body {
    padding: 1rem
}

.frame-body section {
    margin-bottom: 1rem
}

.frame-body section h2 {
    font-size: 1.75rem;
    font-weight: 600;
    color: #555
}

.frame-body .section-footer {
    margin-top: 1rem
}

@media print,screen and (min-width: 40em) {
    .frame-body {
        overflow-y:scroll
    }
}

.tabs {
    border: none;
    background: transparent;
}
/*
.tabs .tabs-title {
    margin-right: 1.5rem;
    margin-bottom: -4px
}
*/
.tabs .tabs-title a {
    font-weight: 5
    text-decoration: none;
    padding: 1rem 1.5rem 0.5rem 0;
    font-size: 1rem;
    font-weight: 500;
    border-bottom: 3px solid transparent;
    -webkit-transition: border-bottom-color .3s ease;
    transition: border-bottom-color .3s ease
}

.tabs .tabs-title a:hover,
.tabs .tabs-title a:not(.is-active) {
    border-bottom-color: #cacaca;
    color: #0a0a0a;
}

.tabs .tabs-title a[aria-selected=true] {
    border-bottom-color: #1779ba;
    background-color: transparent;
}

.tabs-content {
    border: none;
}
.tabs-panel {
    padding: 1rem 0 0 0;
}

#linked-users-tabs {
    display: flex;
    flex-direction: row;
    justify-content: justify;
}
#linked-users-tabs li {
    width: 50%;
}
#linked-users-tabs li:first-child:last-child {
    width: 100%;
}
#linked-users-tabs + .tabs-content .column-title {
    display: none; /* shown as the tab button itself */
}

/*
.tabs-panel {
    padding: 0
}

.tabs-panel table thead {
    background-color: #fafafa;
    border-bottom: 2px solid #f2f2f2
}

.tabs-panel table tbody {
    background-color: #fafafa;
    border: 1px solid rgba(13,13,13,0)
}

*/

.shadowed-box {
    padding: 1rem;
    box-shadow: rgba(0,0,0,.13) 0 1px 3px 0, rgba(0,0,0,.09) 0 1px 2px 0;
    border-radius: 6px;
    margin-bottom: 1.5rem;
}

.shadowed-box .element-list .element {
    padding: 0;
    box-shadow: none;
    border: none;
    font-weight: 500;
    font-size: 0.9rem;
}
.shadowed-box .element-list .element > div div {
    font-weight: 400;
}
.shadowed-box .element-list .element:hover {
    box-shadow: none;
}


.contact-card {
    margin-bottom: 1.5rem;
    position: relative;
}
.contact-card .displayname {
    font-size: 1.15rem;
}
.contact-card .department,
.contact-card .email {
    font-size: 0.9rem;
    color: #505050;
    margin-top: -0.8rem;
}

.contact-card .email {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}



.label {
    display: inline-block;
    padding: .4rem .6rem;
    border-radius: 6px;
    font-size: .6rem;
    line-height: 1;
    white-space: nowrap;
    cursor: default;
    background: #1779ba;
    color: #fefefe
}

.label.softgray {
    background: #555;
    color: #fefefe
}

.label.fadedprimary {
    background: #d8e8f3;
    color: #0a0a0a
}

.label.outgoing {
    background: #2968f9;
    color: #fefefe
}

.element-meta.element-meta-ingress {
    font-style: italic;
}

.element-list .badge {
    padding: 0.15rem;
    font-size: 0.3rem;
    line-height: 1;
    margin-left: auto;
}

.button-blocks {
    margin-bottom: 2rem;
}

.button-blocks .button,
body.standalone .button-blocks .button {
    font-size: 1rem;
    font-weight: 500;
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-radius: 12px;
    box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px;
}
.button-blocks .button .button-block-graphic {
    margin-bottom: 1rem;
}
.button-blocks .button .button-block-graphic svg {
    max-width: 15px;
    vertical-align: bottom;
    margin-right: 0.4rem;
}
.button-blocks .button .material-icons {
    vertical-align: middle;
    margin-right: 0.5rem;
}

.button.icon-button svg {
    max-width: 18px;
    vertical-align: bottom;
    margin-right: 0.3rem;
}

.expanding-box-left {
    width: 0px;
    transition: width 0.2s ease;
    overflow: hidden;
}

.expanding-box-left.expand {
    width: 18px;
}

.samtalebtn {
    min-width: 200px;
}


/* workspace related elements*/
table.jqdatatable {
    border-radius: 18px 18px 0 0;
    overflow: hidden;
}

table.jqdatatable thead {
    background-color: #edf6fd;
}

table.jqdatatable thead th {
    border-bottom: none;
    font-weight: 500;
    color: rgba(0,0,0,0.75);
    font-size: 0.813rem;
    padding: 1rem 2rem 0.75rem 10px;
    transition: background-color 0.2s ease;
}
table.jqdatatable thead th:hover {
    background-color: rgba(0,0,5,0.02);
}

table.jqdatatable tbody td {
    border: 1px solid #edf6fd;
    border-top: none;
    font-size: 0.9rem;
}

table.jqdatatable tbody tr:hover td {
    background-color: #f9f9fa;
}

table.jqdatatable tbody td a {
    font-weight: 500;
}

.ws-history-bar .dropdown.menu > li {
    padding: 0.3rem;
    padding-left: 0;
}

.ws-history-bar .dropdown.menu > li li:hover {
    background-color: rgba(0,0,0,0.025);
}

.ws-history-bar .dropdown.menu > li .menu {
    min-width: 300px;
    border: none;
    border-radius: 3px;
    font-size: 0.9rem;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
}

.ws-history-bar .dropdown.menu > li .menu a {
    color: #454545;
    font-weight: 400;
    padding: 1rem;
}

.ws-history-bar .dropdown.menu > li.is-dropdown-submenu-parent > a {
    padding: 0 1.5rem 0 0;
    font-weight: 600;
    color: #555;
    font-size: 1.2rem;
}
.ws-history-bar .dropdown.menu > li.is-dropdown-submenu-parent > a:hover {
    color: #757575;
}

.ws-history-bar .dropdown.menu > li.is-dropdown-submenu-parent > a::after {
    border-color: #555 transparent transparent;
    margin-top: -1px;
}
.ws-history-bar .dropdown.menu > li.is-dropdown-submenu-parent:hover > a::after {
    border-color: #757575 transparent transparent;
}

.ws-history-bar .close-button { line-height: 1.8; }

.oppflgtask {
    font-size: 0.813rem;
}

.colored-title {
    border-bottom: 3px solid #555;
}

.colored-title.primary {
    border-color: #1779ba;
}
.colored-title.secondary {
    border-color: #b0e0ff;
}
.colored-title.warning {
    border-color: #ffae00;
}
.colored-title.alert {
    border-color: #cc4b37;
}
.colored-title.success {
    border-color: #3adb76;
}

.accessformcontainer {
    padding: 1rem 2rem;
    margin: 1rem 0;
    border-radius: 12px;
    box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em;
}

.block {
    margin-bottom: 1.75rem;
}

.cpcommontoast .toasttitle {
    font-size: 1rem;
    font-weight: 600;
}

.cpcommontoast p:last-of-type {
    margin-bottom: 0;
}

.cpcommontoast.callout {
    background-color: #7F2CCB;
    color: #fefefe;
    font-weight: 500;
    font-size: 0.9rem;
    border-radius: 9px;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
}

.cpcommontoast.callout a {
    color: #fefefe;
    text-decoration: underline;
    font-weight: 600;
}

.cpcommontoast.callout .close-button {
    color: #fefefe;
}

/**
 * Datatable
 */
table.datatablejs {
    width: 100%;
    font-size: 0.9rem;
    border-spacing: 0;
    border-collapse: separate;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.08);
    /* box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px; */
}

.dataTables_wrapper .button {
    margin-bottom: 0;
}

.dataTables_filter .button {
    float: right;
    margin-left: 1rem;
    padding: 0.75rem 1.15rem;
}

table.datatablejs caption {
    text-align: left;
    padding-left: 0;
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: 0.024rem;
}

table.datatablejs thead,
table.datatablejs tfoot {
    font-size: 0.813rem;
    background-color: #f6f8f9;
}

table.datatablejs thead th,
table.datatablejs tfoot th,
table.datatablejs tbody td {
    padding: 0.75rem 1.1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    border-right: 1px solid rgba(0, 0, 0, 0.08);
    transition: background-color 0.15s ease;
}
table.datatablejs thead th:last-child,
table.datatablejs tbody td:last-child {
    border-right: none;
}

table.datatablejs tbody tr:last-child td {
    border-bottom: none;
}
table.datatablejs tfoot th {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

table.datatablejs thead,
table.datatablejs tbody {
    border: none;
}

table.datatablejs tbody {
    background-color: #fefefe;
}

table.datatablejs tbody tr {
    border-bottom: 0;
    border-bottom: 1px solid #f1f1f1;
    background-color: #fefefe;
}

table.datatablejs tbody tr:hover td {
    background-color: #f6f8f9;
}

table.datatablejs thead th,
table.datatablejs tfoot th,
table.datatablejs tbody td.click {
    font-weight: 500;
}

table.datatablejs .d-__select,
table.datatablejs .d-edlink {
    text-align: center;
}

.dataTables_info {
    font-size: 0.75rem;
    color: #5a5a5a;
}