/* Plameco paginakop met blauwe balk. */
@media screen {
    header.main {
        background-image:
            url("../images/layout/plameco-logo.svg"),
            linear-gradient(to bottom,
                #ffffff 0px,
                #ffffff 75px,
                #edf0f6 95px,
                #0000d2 95px,
                #0000d2 120px);
        background-repeat: no-repeat;
        background-position: 65px 6px, center;
        background-size: auto 82px, calc(100% - 82px) 100%;
    }
}

/* Plameco: tabelhighlight */
@media screen {
    table tbody tr:hover td,
    table tbody tr#empty_row:hover td {
        background-color: #000091;
    }
    table tbody tr:hover td,
    table tbody tr:hover td a {
        color: #ffffff;
    }
    table tbody tr:hover td .selectbox {
        color: #444444;
    }
}

/* Plameco: knoppen */
@media screen {
    input.button,
    button,
    a.button,
    a.download_button,
    a.technical-button,
    button.excel_button,
    .backgroundsize button.excel_button {
        background-color: #0000d2;
        border-color: #000091;
        color: #ffffff;
    }
    input.button:hover,
    button:hover,
    a.button:hover,
    a.download_button:hover,
    a.technical-button:hover,
    button.excel_button:hover,
    .backgroundsize button.excel_button:hover {
        background-color: #000091;
        border-color: #000091;
        color: #ffffff;
    }
}

/* Plameco: bericht plaatsen */
@media screen {
    a.btn.add-icon,
    a.btn.add-icon:visited {
        position: relative;
        background-image: none;
        background-color: #0000d2;
        border-color: #000091;
        color: #ffffff;
        padding-left: 30px;
    }
    a.btn.add-icon:hover,
    a.btn.add-icon:focus,
    a.btn.add-icon:active {
        background-image: none;
        background-color: #000091;
        border-color: #000091;
        color: #ffffff;
    }
    a.btn.add-icon::before {
        content: "+";
        position: absolute;
        left: 9px;
        top: 50%;
        transform: translateY(-50%);
        width: 14px;
        height: 20px;
        line-height: 20px;
        font-family: Arial, sans-serif;
        font-size: 22px;
        font-weight: normal;
        text-align: center;
        color: #ffffff;
        background: none;
        text-indent: 0;
        pointer-events: none;
    }
}

/* Plameco: afbeelding toevoegen */
@media screen {
    .btn.icon-btn.add.js-add-image,
    .backgroundsize .btn.icon-btn.add.js-add-image {
        position: relative;
        background-image: none;
        background-color: #0000d2;
        color: #ffffff;
        text-indent: -9999px;
    }
    .btn.icon-btn.add.js-add-image:hover,
    .btn.icon-btn.add.js-add-image:focus {
        background-color: #000091;
    }
    .btn.icon-btn.add.js-add-image::before {
        content: "+";
        position: absolute;
        inset: 0;
        text-indent: 0;
        text-align: center;
        font-family: Arial, sans-serif;
        font-size: 25px;
        font-weight: normal;
        line-height: 30px;
        color: #ffffff;
        pointer-events: none;
    }
}

/* Plameco: grotere paginakop */
@media screen {
    header.main {
        height: 158px;
        background-image:
            url("../images/layout/plameco-logo.svg"),
            linear-gradient(to bottom,
                #ffffff 0px,
                #ffffff 113px,
                #edf0f6 133px,
                #0000d2 133px,
                #0000d2 158px);
        background-size: auto 120px, calc(100% - 82px) 100%;
    }
    header.main #breadcrumbs {
        position: absolute;
        top: 133px;
        margin-top: 0;
    }
    header.main #user_settings {
        padding-top: 58px;
    }
    header.main #search {
        margin-top: 130px;
    }
}