﻿

/* Misc */

.modern-page .borderlist > .borderlistrow:first-child,
.modern-modal .borderlist > .borderlistrow:first-child {
    border-top: 1px solid #E0D9D2;
}

.modern-page .borderlistrow,
.modern-modal .borderlistrow {
    padding: 10px;
    border-left: 1px solid #E0D9D2;
    border-right: 1px solid #E0D9D2;
    border-bottom: 1px solid #E0D9D2;
}

ol, ul {
    list-style: none;
    padding-left: 0px;
}

.row .row {
    margin: 0px -15px;
}

/*div.page-content ol li b {
    color: #003745;
}*/

/* Cards */

.no-card {
    background-color: transparent;
    border: none;
}

.section-title {
    /*margin-bottom: 1rem;*/
}

/* Item list */

.modern-page .page-content .itemlist,
.modern-modal .itemlist {
    /*margin-bottom: 1.25rem;*/
}

.modern-page .page-content .itemlist.itemlist-grid,
.modern-modal .itemlist.itemlist-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 5px;
}

.modern-page .page-content .itemlist .itemlist-header,
.modern-modal .itemlist .itemlist-header {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: subgrid;
    padding:  10px;
    border-bottom: 1px solid #ccc;
}

.modern-page .page-content .itemlist .itemlist-icons-header,
.modern-modal .itemlist .itemlist-icons-header {
    padding-left: 3rem;
}

.modern-page .page-content .itemlist .listitem,
.modern-modal .itemlist .listitem {
    line-height: 20px;
}

.modern-page .page-content .itemlist .listitem-selection,
.modern-modal .itemlist .listitem-selection {
    display: block;
    color: #003745;
    cursor: pointer;
    padding-left: 3rem;

    background: url(/images/icons/checkmark-off.svg) 1rem center no-repeat;
    background-size: 1.2rem;
}

.modern-page .page-content .itemlist .listitem-selected,
.modern-modal .itemlist .listitem-selected {
    /*background: url(/images/ui/done.png) 99% center no-repeat;*/
    background: url(/images/icons/checkmark.svg) 1rem center no-repeat;
    background-size: 1.2rem;
    background-color: #eee;    
}

.modern-page .page-content .itemlist .listitem-locked,
.modern-modal .itemlist .listitem-locked {
    background: url(/images/ui/green-lock.png) 99% center no-repeat;
    background-color: #eee;
}

.modern-page .page-content .itemlist .listitem-selection:hover,
.modern-modal .itemlist .listitem-selection:hover {
    /*background-color: #F8F8F8;*/
    background-color: #f2efec;
}

.modern-page .page-content .itemlist .listitem-link,
.modern-modal .itemlist .listitem-link {
    /*text-decoration: none;*/
    /*display: block;*/
    /*background: url(/images/ui/more-arrow.png) 99% center no-repeat;*/
    color: #272727;
    /*font-weight: bolder;*/
    font-size: 1.0rem;
    background-size: 0.875rem;
    cursor: pointer;
}

.modern-page .page-content .itemlist a.listitem-link,
.modern-modal .itemlist a.listitem-link {
    display: block;
    text-decoration: none;
}

.modern-page .page-content .itemlist-grid .itemlist-row,
.modern-modal .itemlist-grid .itemlist-row {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: subgrid;
}

.modern-page .page-content .itemlist-grid a.itemlist-row,
.modern-modal .itemlist-grid a.itemlist-row {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: subgrid;
}

.modern-page .page-content .itemlist .listitem-link:hover,
.modern-modal .itemlist .listitem-link:hover {
    /*font-size: 1.15rem;
    background-size: 1.125rem;*/
    /*background-color: #F8F8F8;*/
    /*background-color: #f2efec;*/
    background-color: #ECEBDF;
}

.modern-page .page-content .itemlist .listitem-link-subtitle,
.modern-modal .itemlist .listitem-link-subtitle {
    color: #53565a;
    font-weight: normal;
}

/*.modern-page .page-content .itemlist .listitem-link-subtitle:hover {
    font-size: 1rem;
    background-size: 1.125rem;
}*/

.modern-page .page-content .itemlist .listitem .listitem-title,
.modern-modal .itemlist .listitem .listitem-title {
    color: #003745;
    font-size: 14px;
    font-weight: 700;
}

.modern-page .page-content .itemlist .listitem .listitem-subtitle,
.modern-modal .itemlist .listitem .listitem-subtitle {
    color: #006e96;
    font-size: 14px;
}

.modern-page .page-content .itemlist .listitem .listitem-editlabel,
.modern-modal .itemlist .listitem .listitem-editlabel {
    font-size: 14px;
    color: #003745;
    display: block;
}

.modern-page .page-content .itemlist .listitem .listitem-edit,
.modern-modal .itemlist .listitem .listitem-edit {
    width: 100%;
    border: 1px solid #ccc;
    margin-bottom: 5px;
}

.modern-page .page-content .itemlist .listitem-audit,
.modern-modal .itemlist .listitem-audit {
    background: url(/images/icons/v3/audit.svg) 0.55rem center no-repeat;
    background-size: 2rem;
    padding-left: 3rem
}

.modern-page .page-content .itemlist .listitem-deviation,
.modern-modal .itemlist .listitem-deviation {
    background: url(/images/icons/v3/deviation.svg) 0.55rem center no-repeat;
    background-size: 2rem;
    padding-left: 3rem
}

.modern-page .page-content .itemlist .listitem-customer,
.modern-modal .itemlist .listitem-customer {
    background: url(/images/icons/v3/company.png) 0.55rem center no-repeat;
    background-size: 2rem;
    padding-left: 3rem
}

.modern-page .page-content .itemlist .listitem-person,
.modern-modal .itemlist .listitem-person {
    background: url(/images/icons/v3/person.png) 0.55rem center no-repeat;
    background-size: 2rem;
    padding-left: 3rem
}

.modern-page .page-content .itemlist .listitem-businessscope,
.modern-modal .itemlist .listitem-businessscope {
    background: url(/images/icons/v3/audit.svg) 0.55rem center no-repeat;
    background-size: 2rem;
    padding-left: 3rem
}

.modern-page .page-content .itemlist .listitem-auditplan,
.modern-modal .itemlist .listitem-auditplan {
    background: url(/images/icons/v3/auditplan.svg) 0.55rem center no-repeat;
    background-size: 2rem;
    padding-left: 3rem
}

.modern-page .page-content .itemlist .listitem-certificationplan,
.modern-modal .itemlist .listitem-certificationplan {
    background: url(/images/icons/v3/certificationplan.svg) 0.55rem center no-repeat;
    background-size: 2rem;
    padding-left: 3rem
}

.modern-page .page-content .itemlist .listitem-customerinfoverification,
.modern-modal .itemlist .listitem-customerinfoverification {
    background: url(/images/icons/v3/audit.svg) 0.55rem center no-repeat;
    background-size: 2rem;
    padding-left: 3rem
}

.modern-page .page-content .itemlist .listitem-certificateorder,
.modern-modal .itemlist .listitem-certificateorder {
    background: url(/images/icons/v3/audit.svg) 0.55rem center no-repeat;
    background-size: 2rem;
    padding-left: 3rem
}

.modern-page .page-content .itemlist .listitem-auditdocumentation,
.modern-modal .itemlist .listitem-auditdocumentation {
    background: url(/images/icons/v3/audit.svg) 0.55rem center no-repeat;
    background-size: 2rem;
    padding-left: 3rem
}

/* Info grid */

.modern-page .page-content .infogrid {
    
}

.modern-page .page-content .infogrid .infogrid-row {
    margin-top: 15px
}

.modern-page .page-content .resp-infogrid .infogrid-header,
.modern-page .page-content .resp-infogrid-3 .infogrid-header,
.modern-page .page-content .infogrid .infogrid-header {
    font-size: 14px;
    color: #0B5673;    
}

.modern-page .page-content .resp-infogrid .infogrid-value,
.modern-page .page-content .infogrid .infogrid-value {
    padding-left: 12px;
    font-size: 16px;
    margin-top: 0.3rem;
}

.modern-page .page-content .resp-infogrid-3 .infogrid-value {
    font-size: 16px;
    margin-top: 0.3rem;
}

.modern-page .page-content .infogrid .infogrid-editlabel {
    font-size: 14px;
    color: #003745;
    display: block;
}

.modern-page .page-content .infogrid .infogrid-edit {
    width: 100%;
    border: 1px solid #ccc;
}

/* Responsive info grid */

.modern-page .page-content .resp-infogrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 1rem;
}

.modern-page .page-content .resp-infogrid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 1rem;
}

@media screen and (max-width: 768px) {
    .modern-page .page-content .resp-infogrid,
    .modern-page .page-content .resp-infogrid-3 {
        grid-template-columns: 1fr;
    }
}

/* Button row */

/*.modern-page .page-content .buttonrow {
    margin-top: 15px;
}*/

.buttonrow {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Nice table */

.nicetable {
    border-bottom: 1px solid #ddd;
    /*margin: 0 auto;*/
    /*clear: both;*/
    border-collapse: separate;
    border-spacing: 0;
}

.nicetable thead tr th {
    text-align: center;
    vertical-align: middle;
    padding: 5px;
}

.nicetable tbody tr {
    /*border-bottom: 1px solid #ccc;
        border-left: 1px solid #ddd;
        border-right: 1px solid #ccc;*/
    cursor: pointer;
}

.nicetable tbody tr td:first-child {
    border-left: 1px solid #ddd;
}

.nicetable tbody td {
    border-top: 1px solid #ddd;
    border-right: 1px solid #ddd;
    padding: 5px;
    vertical-align: middle;
}

.nicetable thead .sortable {
    background-repeat: no-repeat;
    background-position: center right;
    background-image: url(/images/sort_both.png);
    padding-right: 20px;
}

.nicetable thead .sortAsc {
    background-image: url(/images/sort_asc.png);
}

.nicetable thead .sortDsc {
    background-image: url(/images/sort_desc.png);
}

.nicetable tbody tr:hover {
    background-color: #F8F8F8 !important;
}

.validation-error {
    color: red;
    padding-top: 7px;
}

/* Meeting */

.meeting {
    display: grid;
    grid-template-columns: 8rem auto
}

.meeting div.info {
    padding-bottom: 4px;
    text-align: right;
}

.meeting div.text {
    padding: 2px 4px 4px 8px;
    border-left: 1px solid #ccc;
    min-height: 60px;
}

.meeting div.info div.name {
    margin-right: 4px;
    font-size: 14px;
}

.meeting div.info div.extra {
    margin-top: 2px;
    margin-right: 4px;
    font-size: 11px;
    line-height: 14px;
    font-weight: bold;
    color: #222;
}

.meeting div.info div.type {
    margin-right: 4px;
    font-size: 11px;
    line-height: 18px;
    font-weight: bold;
    color: #006e96;
}

.meeting div.info div.start {
    margin-right: 4px;
    font-size: 9px;
    line-height: 16px;
    color: #000;
}

.meeting div.info div.end {
    margin-right: 4px;
    font-size: 9px;
    line-height: 9px;
    color: #c88;
}

.meeting div.info div.days {
    margin-right: 4px;
    font-size: 9px;
    line-height: 16px;
    color: #006e96;
}

.meeting div.info div.auditor-role {
    margin-right: 4px;
    font-size: 10px;
    line-height: 16px;
    color: #000;
}

.meeting div.info div.site {
    margin-right: 4px;
    font-size: 9px;
    line-height: 16px;
    color: #000;
}

/* More meetings */

.meeting-list .meetingrowinfo {
    width: 10rem;
    border-right: 1px solid #ccc;
    text-align: right;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
}

.meeting-list .meetingrowinfo .name {
    font-size: 14px;
}

.meeting-list .meetingrowinfo .auditor-role {
    font-size: 10px;
    line-height: 16px;
    color: #000;
}

.meeting-list .meetingrowinfo .type {
    font-size: 11px;
    line-height: 18px;
    font-weight: bold;
    color: #006e96;
}

.meeting-list .meetingrowinfo .site {
    font-size: 9px;
    line-height: 16px;
    color: #000;
}

.meeting-list .meetingrowinfo .days {
    font-size: 9px;
    line-height: 16px;
    color: #006e96;
}

.meeting-list .meetingrowtext {
    flex: 1;
    padding-left: 0.5rem;
}

/* Knockout file uploader */

.file-uploader {
    cursor: pointer;
    border: dashed 2px #ccc;
    border-radius: 10px;
    width: 100%;
    height: 150px;
    padding: 1rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.file-uploader.highlight {
    border-color: #0083BA;
}

.file-uploader input {
    display: none;
}

.file-uploader span {
    pointer-events: none;
}

/* Helptext box*/

.helptextbox {
    border: 1px solid #BEC49A;
    min-height: 80px;
    padding: 1rem;
    background-color: #ECEBDF;
}

/* Shortcut button */

.shortcut-column {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex-grow: 0;
    flex-shrink: 0;
    position: sticky;
    top: 0;
}

.shortcut-row {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: right;
    gap: 0.5rem;
    position: absolute;
    top: -34px;
    padding-right: 16px;
}

.shortcut-button {
}

.shortcut-button img {
    width: 24px;
    height: 24px;
}

.shortcut-button:hover {
    background-color: #D7CFC6;
}