:root {
    /* default Color palette */
    --iq-red: #c21619;
    --iq-dark-blue: #4d8298;
    --iq-dark-blue-hover: #427185;
    --iq-blue: #95b4c2;
    --iq-blue-hover: #849fab;
    --iq-light-blue: #e3ecef;
    --iq-green: #ADFCBE;
    --iq-orange: #e5c45e;
    --iq-gray: #AAA;
    --iq-black: black;
    --iq-todo-ref: #fff; /*change this if */
}

html, body {
    background-color: var(--iq-light-blue);
}

    body .container, body .container-fluid {
        padding: 0 2rem;
    }

h1, h2, h3, h4, h5, h6 {
    margin-top: 0.5rem;
    margin-bottom: 1rem;
}

a {
    color: var(--iq-dark-blue);
}

    a:hover, a:active, a:focus {
        color: var(--iq-dark-blue-hover);
    }

.text-bold {
    font-weight: bold;
}

.text-red, .text-red:hover {
    color: var(--iq-red) !important;
}

.text-dark-blue, .text-dark-blue:hover {
    color: var(--iq-dark-blue) !important;
}

.bg-primary {
    background-color: var(--iq-dark-blue) !important;
}

.bg-red {
    background-color: var(--iq-red) !important;
}

.rounded-icon {
    padding: 0.3rem;
    border-radius: 1rem;
    height: 1.8rem;
    width: 1.8rem;
    text-align: center;
    transform: scale(0.7);
    margin-left: -0.3rem;
    margin-top: -1rem;
}

div.row{
    margin-left:0px !important;
    margin-right:0px !important;
}

.row .alert {
    width: 100%;
    margin: 1rem;
}

/* Inputs */

button, .btn {
    height: 2rem;
    border-radius: 0.3rem;
    line-height: 1;
}

.btn-primary {
    background-color: var(--iq-dark-blue);
    color: white !important;
    border-color: var(--iq-dark-blue);
}

    .btn-primary:hover, .btn-primary:focus, .btn-primary:active {
        background-color: var(--iq-dark-blue-hover) !important;
        color: white !important;
        border-color: var(--iq-dark-blue-hover) !important;
    }

.btn-light {
    background-color: white;
    color: var(--iq-dark-blue) !important;
    border-color: var(--iq-dark-blue);
}

    .btn-light:hover, .btn-light:focus, .btn-light:active {
        background-color: #EEE !important;
        color: var(--iq-dark-blue) !important;
        border-color: var(--iq-dark-blue);
    }

.btn-padding {
    padding: 0 4rem;
}

.btn, .btn:active, .btn:focus, .form-control, .form-control:active, .form-control:focus {
    box-shadow: none !important;
}

    .btn:not(.note-btn) > .fa, .btn:not(.note-btn) > .fas, .btn:not(.note-btn) > .far {
        transform: scale(1.7);
        margin-right: 1rem;
    }

    .btn.regular-icon-size .fa, .btn.regular-icon-size .fas, .btn.regular-icon-size .far {
        transform: scale(1);
        margin-right: 0.5rem;
    }

.btn-primary:disabled {
    background-color: var(--iq-dark-blue) !important;
    border-color: var(--iq-dark-blue) !important;
}

input, select, .form-control, .custom-file .custom-file-input, .custom-file .custom-file-label, .custom-file .custom-file-label::after {
    height: 2rem;
    border: 1px solid var(--iq-dark-blue);
    border-radius: 0.3rem;
    background-color: white;
    color: var(--iq-dark-blue) !important;
    font-weight: 700;
}

    input:focus, select:focus, .form-control:focus {
        border: 1px solid var(--iq-dark-blue);
    }

select {
    padding: 0 !important;
}

.custom-control-label{
    margin:0 !important;
}

.custom-control {
    display: flex;
    -webkit-align-items: center;
    align-items: center;
}

.custom-checkbox .custom-control-label:before {
    height: 1.3rem;
    width: 1.3rem;
    border: 1px solid var(--iq-dark-blue);
    border-radius: 1rem;
}

.custom-control-input:focus ~ .custom-control-label::before, .custom-file-input:focus ~ .custom-file-label {
    box-shadow: none !important;
}

.custom-control-input:not(:disabled):focus ~ .custom-control-label::before,
.custom-control-input:not(:disabled):active ~ .custom-control-label::before,
.custom-file-input:not(:disabled):focus ~ .custom-file-label {
    background-color: white;
    border-color: var(--iq-dark-blue);
}

.custom-control-input:checked ~ .custom-control-label::before {
    color: var(--iq-dark-blue);
    border-color: var(--iq-dark-blue);
    background-color: white;
}

.custom-control-label::before {
    position: absolute;
    /*top: -0.15rem !important;*/
    top: 0.25rem;
    left: -1.5rem;
    display: block;
    width: 1rem;
    height: 1rem;
    pointer-events: none;
    content: "";
    background-color: #fff;
    border: #adb5bd solid 1px;
}

.custom-control-label::after {
    top: -0.55rem;
    /*top: -0.85rem;*/
    left: -2.27rem;
    width: 2.8rem;
    height: 2.8rem;
}

/*favourite variant*/
.custom-checkbox .custom-control-input:checked ~ .favouriteIcon::after {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20576%20512%22%3E%3Cpath%20fill%3D%22%234d8298%22%20d%3D%22M316.9%2018C311.6%207%20300.4%200%20288.1%200s-23.4%207-28.8%2018L195%20150.3%2051.4%20171.5c-12%201.8-22%2010.2-25.7%2021.7s-.7%2024.2%207.9%2032.7L137.8%20329%20113.2%20474.7c-2%2012%203%2024.2%2012.9%2031.3s23%208%2033.8%202.3l128.3-68.5%20128.3%2068.5c10.8%205.7%2023.9%204.9%2033.8-2.3s14.9-19.3%2012.9-31.3L438.5%20329%20542.7%20225.9c8.6-8.5%2011.7-21.2%207.9-32.7s-13.7-19.9-25.7-21.7L381.2%20150.3%20316.9%2018z%22%2F%3E%3C%2Fsvg%3E") !important;
}
.custom-checkbox .favouriteIcon:before {
    height: 1.3rem;
    width: 1.3rem;
    border: none;
    border-radius: unset;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20576%20512%22%3E%3Cpath%20fill%3D%22%234d8298%22%20d%3D%22M287.9%200c9.2%200%2017.6%205.2%2021.6%2013.5l68.6%20141.3%20153.2%2022.6c9%201.3%2016.5%207.6%2019.3%2016.3s.5%2018.1-5.9%2024.5L433.6%20328.4l26.2%20155.6c1.5%209-2.2%2018.1-9.7%2023.5s-17.3%206-25.3%201.7l-137-73.2L151%20509.1c-8.1%204.3-17.9%203.7-25.3-1.7s-11.2-14.5-9.7-23.5l26.2-155.6L31.1%20218.2c-6.5-6.4-8.7-15.9-5.9-24.5s10.3-14.9%2019.3-16.3l153.2-22.6L266.3%2013.5C270.4%205.2%20278.7%200%20287.9%200zm0%2079L235.4%20187.2c-3.5%207.1-10.2%2012.1-18.1%2013.3L99%20217.9%20184.9%20303c5.5%205.5%208.1%2013.3%206.8%2021L171.4%20443.7l105.2-56.2c7.1-3.8%2015.6-3.8%2022.6%200l105.2%2056.2L384.2%20324.1c-1.3-7.7%201.2-15.5%206.8-21l85.9-85.1L358.6%20200.5c-7.8-1.2-14.6-6.1-18.1-13.3L287.9%2079z%22%2F%3E%3C%2Fsvg%3E") !important;
    background-repeat: no-repeat;
}

/*favourite variant end*/
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
    background-image: url("data:image/svg+xml,%3Csvg%20class%3D%22w-6%20h-6%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22M5%2013l4%204L19%207%22%20stroke%3D%22%234d8298%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
}

.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label {
    color: #555;
}

    .custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before {
        background-color: #EEE;
    }

a .custom-checkbox .custom-control-label:hover {
    text-decoration: underline;
}


.custom-file .custom-file-label::after, .custom-file-input ~ .custom-file-label::after {
    content: "\f574" !important;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-top: -1px;
    margin-right: -1px;
    background-color: var(--iq-dark-blue);
    color: white !important;
    padding-top: 4px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.bootstrap-select {
    height: 2rem !important;
    border: none !important;
}

    .bootstrap-select .dropdown-toggle {
        font-weight: 700;
    }

        .bootstrap-select .dropdown-toggle:focus, .bootstrap-select > select.mobile-device:focus + .dropdown-toggle {
            outline: none !important;
        }

    .bootstrap-select .dropdown-menu {
        max-height: 200rem;
    }

.dropdown-item.active, .dropdown-item:active {
    background-color: var(--iq-dark-blue);
}


/* Tables */
.table, table {
    background-color: white;
}

thead, thead tr {
    background-color: var(--iq-dark-blue);
    color: white;
    border: none;
}

.table th, .table thead th {
    padding: 0.75rem;
    border: none;
    font-weight: normal;
}

tbody tr {
    min-height: 1rem;
}

.table td {
    border: none;
}

.table tr:not(:last-child) td {
    border: none;
    border-bottom: 1px solid var(--iq-dark-blue);
}

.table .top-border td {
    border-top: 1px solid var(--iq-dark-blue) !important;
}

/* Table sorter */
th.tablesorter-headerDesc div:after, th.tablesorter-headerAsc div:after {
    font-weight: 900;
}

/* Forms */
.white-row, .filter-row form {
    background-color: white;
    padding: 1rem;
}

/* Breadcrumb items */
.breadcrumb {
    background-color: transparent;
}

.breadcrumb-item {
    font-size: 1.2rem;
    font-weight: bold;
    display: inline;
    max-width: 25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .breadcrumb-item a {
        color: black !important;
        text-overflow: ellipsis;
    }

    .breadcrumb-item.active {
        color: var(--iq-dark-blue);
        cursor: default;
    }

        .breadcrumb-item.active::before {
            margin-right: 0.2rem;
        }

    .breadcrumb-item + .breadcrumb-item::before {
        font-family: "Font Awesome 5 Free";
        content: "\f105";
        font-weight: 900;
        margin-left: 0.3rem;
    }

/* Tabs */
.tabmenu {
    margin-bottom: 0px !important;
}

.nav-tabs {
    border-bottom: 7px solid var(--iq-dark-blue);
    display: flex;
    flex-direction: row;
    align-content: stretch;
}

    .nav-tabs .nav-item {
        width: auto;
        flex: 1 1 auto;
    }

        .nav-tabs .nav-item:hover, .custom-async-tabs .nav-tabs .nav-item:hover .active, .nav-tabs > .nav-item:hover > .active {
            color: var(--iq-light-blue) !important;
        }

    .nav-tabs .nav-link {
        background-color: var(--iq-blue);
        color: white !important;
        border-radius: 0;
        border: none;
    }

        .nav-tabs .nav-link:hover {
            color: #EEE !important;
        }

        .nav-tabs .nav-link.active {
            background-color: var(--iq-dark-blue);
            color: white !important;
        }

.tab-content {
    margin: 0 !important;
}

    .tab-content .tab-pane {
        /*padding: 1rem;*/
        padding-top: 0;
        margin-left: -1px;
        margin-right: -1px;
    }

        .tab-content .tab-pane.loading {
            background-color: white;
            color: var(--iq-dark-blue);
            padding: 5rem 0;
            text-align: center;
            margin: -1rem;
        }

        .tab-content .tab-pane .alert {
            margin-top: 1rem;
        }

    .tab-content > .tab-pane > .row {
        background-color: white;
    }

    .tab-content .table thead tr {
        background-color: white;
        color: var(--iq-dark-blue);
        border-top: 1px solid var(--iq-dark-blue);
        border-bottom: 2px solid var(--iq-dark-blue);
    }

    .tab-content .col .table {
        margin-left: calc(-1rem + 1px);
        width: calc(100% + 2rem - 2px);
    }

/* Scrollable tables */
.scrollable thead tr th {
    position: sticky;
    top: 0;
    background-color: white;
    color: var(--iq-dark-blue);
    box-shadow: inset 0 1px 0 var(--iq-dark-blue), inset 0 -2px 0 var(--iq-dark-blue);
}

.scrollable thead tr {
    border-top: none !important;
    border-bottom: none !important;
}

.scrollable.dark thead tr th {
    position: sticky;
    top: 0;
    background-color: var(--iq-dark-blue);
    color: white;
    z-index: 999;
}

/* Images */
img[alt]:after {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    content: attr(alt);
    padding-top: 2.2rem;
    padding-left: 0.4rem;
}

/* Login */
#account::before {
    background-color: #FFF !important;
}

/* EditProtocolItem */
.rowColor > td:not(:first-child), div.rowColor {
    background-color: #FFF !important;
}

:not(.protocolTextColor) > td > .protocolTextContentContainer.form-control {
    font-weight: normal;
    color: black !important;
}

.protocolTextContentContainer.form-control label {
    font-weight: bold;
    color: var(--iq-dark-blue) !important;
    font-size: 1rem;
}

:not(.protocolTextColor) > td > .protocolTextContentContainer {
    color: black !important;
    font-weight: normal;
}

.rowColor.visible .protocolTextContentContainer {
    background-color: #FFF !important;
}

.rowColor.hidden .protocolTextContentContainer {
    background-color: var(--iq-orange) !important;
}

.rowColor.hidden .protocolTextContentContainerResubmission,
.rowColor.hidden .protocolTextContentContainerPreResubmission {
    background-color: var(--iq-green) !important;
}

.protocolTextReferences {
    background-color: var(--iq-todo-ref) !important;
}

.protocolTextContentContainer p, .protocolTextContentContainer span {
    margin: 0;
    padding: 0;
}

.protocolTextColor {
    background-color: white !important;
}

    .protocolTextColor:not(.rowColor) > td > .protocolTextContentContainer,
    .protocolTextColor:not(.rowColor) > td > .protocolTextContentContainer div:not(.tooltip-inner):not(.note-toolbar):not(.filter-option):not(.filter-option-inner):not(.filter-option-inner-inner):not(.note-statusbar):not(.note-resizebar),
    .protocolTextColor:not(.rowColor) > td > .protocolTextContentContainer div:not(.tooltip-inner) b {
        background-color: white !important;
    }

.protocolTextColorGray > td:nth-child(2) > span,
.protocolTextColorGray > td:nth-child(4) > .dropdown,
.protocolTextColorGray > td:nth-child(4) > .dropdown > a,
.protocolTextColorGray > td > .protocolTextContentContainer,
.protocolTextColorGray > td > .protocolTextContentContainer > .protocolTextContent,
.protocolTextColorGray > td > .protocolTextContentContainer > .protocolTextContent > span,
.protocolTextColorGray > td > .protocolTextContentContainer > .protocolTextContent > p,
.protocolTextColorGray > td > .protocolTextContentContainer > .protocolTextContent > ul,
.protocolTextColorGray > td > .protocolTextContentContainer > .protocolTextContent > ul > li {
    color: var(--iq-gray) !important;
    font-weight: normal;
}

:not(.hidden).protocolTextColorBlue > td:nth-child(2) > span,
:not(.hidden).protocolTextColorBlue > td:nth-child(4) > .dropdown,
:not(.hidden).protocolTextColorBlue > td:nth-child(4) > .dropdown > a,
:not(.hidden).protocolTextColorBlue > td > .protocolTextContentContainer,
:not(.hidden).protocolTextColorBlue > td > .protocolTextContentContainer > .protocolTextContent,
:not(.hidden).protocolTextColorBlue > td > .protocolTextContentContainer > .protocolTextContent > span,
:not(.hidden).protocolTextColorBlue > td > .protocolTextContentContainer > .protocolTextContent > p,
:not(.hidden).protocolTextColorBlue > td > .protocolTextContentContainer > .protocolTextContent > ul,
:not(.hidden).protocolTextColorBlue > td > .protocolTextContentContainer > .protocolTextContent > ul > li {
    color: var(--iq-dark-blue) !important;
    font-weight: bold;
}


.protocolTextContentContainerPreResubmission,
.protocolTextContentContainerPreResubmission > .protocolTextContent,
.protocolTextContentContainerPreResubmission > .protocolTextContent > span,
.protocolTextContentContainerPreResubmission > .protocolTextContent > p,
.protocolTextContentContainerPreResubmission > .protocolTextContent > ul,
.protocolTextContentContainerPreResubmission > .protocolTextContent > ul > li,
protocolTextColorBlue > td:nth-child(2) > span,
protocolTextColorBlue > td:nth-child(4) > .dropdown,
protocolTextColorBlue > td:nth-child(4) > .dropdown > a,
protocolTextColorBlue > td > .protocolTextContentContainerPreResubmission,
protocolTextColorBlue > td > .protocolTextContentContainerPreResubmission > .protocolTextContent,
protocolTextColorBlue > td > .protocolTextContentContainerPreResubmission > .protocolTextContent > span,
protocolTextColorBlue > td > .protocolTextContentContainerPreResubmission > .protocolTextContent > p,
protocolTextColorBlue > td > .protocolTextContentContainerPreResubmission > .protocolTextContent > ul,
protocolTextColorBlue > td > .protocolTextContentContainerPreResubmission > .protocolTextContent > ul > li {
    color: var(--iq-dark-blue) !important;
    font-weight: bold !important;
}

:not(.hidden).protocolTextColorNone > td:nth-child(2) > span,
:not(.hidden).protocolTextColorNone > td:nth-child(4) > .dropdown,
:not(.hidden).protocolTextColorNone > td:nth-child(4) > .dropdown > a,
:not(.hidden).protocolTextColorNone > td > .protocolTextContentContainer,
:not(.hidden).protocolTextColorNone > td > .protocolTextContentContainer > .protocolTextContent,
:not(.hidden).protocolTextColorNone > td > .protocolTextContentContainer > .protocolTextContent > span,
:not(.hidden).protocolTextColorNone > td > .protocolTextContentContainer > .protocolTextContent > p,
:not(.hidden).protocolTextColorNone > td > .protocolTextContentContainer > .protocolTextContent > ul,
:not(.hidden).protocolTextColorNone > td > .protocolTextContentContainer > .protocolTextContent > ul > li {
    color: var(--iq-black) !important;
}



:not(.hidden).protocolTextColorBlue:not(.rowColor) > td > .protocolTextContentContainer {
    font-weight: bold;
}

.hidden:not(.rowColor).protocolTextColorRed > td:nth-child(2) > span,
.hidden:not(.rowColor).protocolTextColorRed > td:nth-child(4) > .dropdown,
.hidden:not(.rowColor).protocolTextColorRed > td:nth-child(4) > .dropdown > a,
.hidden:not(.rowColor).protocolTextColorRed > td > .protocolTextContentContainer,
.hidden:not(.rowColor).protocolTextColorRed > td > .protocolTextContentContainer > .protocolTextContent,
.hidden:not(.rowColor).protocolTextColorRed > td > .protocolTextContentContainer > .protocolTextContent > span,
.hidden:not(.rowColor).protocolTextColorRed > td > .protocolTextContentContainer > .protocolTextContent > p,
.hidden:not(.rowColor).protocolTextColorRed > td > .protocolTextContentContainer > .protocolTextContent > ul,
.hidden:not(.rowColor).protocolTextColorRed > td > .protocolTextContentContainer > .protocolTextContent > ul > li {
    color: red !important;
    font-weight: normal;
}

.light-gray-bg {
    background-color: rgb(191, 191, 191);
}

.note-editable ul, .collapse.show ul {
    list-style-type: disc;
    margin: 10px;
}

#Protokollbearbeitung {
    font: 10pt Arial !important;
}

#agenda {
    padding-top: 10px;
}

/* Summernote */
.note-editable p, .note-editable span {
    margin-bottom: 0.3rem;
    line-height: 10pt;
    font-size: 10pt;
    margin: 0;
    padding: 0;
}

.datepicker.datepicker-dropdown {
    z-index: 999999999 !important;
}

.attachments > table > tbody > .attachment, .attachments > table > tbody > .attachment > td {
    border: none;
    padding: 0;
    padding-bottom: 5px;
}

.fa-stack{
    height: 16px !important;
    width:16px !important;
    display: inline-block !important;
    line-height:inherit !important;
    /*top:-2px;*/
}

.commentAddIcon{
    background-image: url(../commentAdd.svg);
    background-repeat:no-repeat;
    padding-left:32px;
}

.commentAddIconDarkBlue {
    background-image: url(../commentAddDarkBlue.svg);
    background-size: 16px 16px;
    background-repeat: no-repeat;
    height: 16px !important;
    width: 16px !important;
    display: inline-block !important;
    padding-left: 23px;
    position: relative;
    top: 3px;
}

.row-tran .light-gray-bg {
    background-color: #f2f2f2;
}

.row-tran td, .row-tran th {
    /*-moz-filter: brightness(120%) contrast(0.5) !important;
    -webkit-filter: brightness(120%) contrast(0.5) !important;
    filter: brightness(120%) contrast(0.5) !important;*/
    color: #d9d9d9;
}

.row-hidden {
    display:none;
}

.infoContainer {
    transform: scale(0);
    animation: pulse 10s ease 1 normal;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        transform-origin: 100% 50%;
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
    }

    25% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
    }

    50% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
    }

    100% {
        transform: scale(0);
        transform-origin: 100% 50%;
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
}