/*  CSS STYLING GRID
    
    Author: C. P. Baaijens
    Date: 27-10-2021
    Copyright © Zuidwest Software B.V.
*/

.grid-container {
    background-color: var(--theme-color-background);
    padding: 1em;
    grid-gap: 1em;
}

.grid-container>div,
.grid-container>form {
    background-color: rgba(255, 255, 255, 0.8);
    padding: 1em;
    grid-gap: 1em;
    width: calc(100% - 4em);
}

.grid-template-login-header {
    grid-area: header;
    text-align: center;
}

.grid-template-login-content {
    grid-area: content;
}

.grid-template-login-sidebar-left {
    grid-area: side-left;
}

.grid-template-login-sidebar-right {
    grid-area: side-right;
}

.grid-template-login-footer {
    grid-area: footer;
}

.grid-template-login {
    display: grid;
    grid-template-areas:
        'header header header'
        'side-left content side-right'
        'footer footer footer';
    grid-template-columns: 20% 60% 20%;
}

.grid-template-admin-menu {
    grid-area: menu;
}

.grid-template-admin-header-add {
    grid-area: add;
    width: inherit;
}

.grid-template-admin-header-search {
    grid-area: search;
    width: inherit;
}

.grid-template-admin-header-info {
    grid-area: info;
    width: inherit;
}

.grid-template-admin-header-add>input {
    margin-bottom: .5em;
}

.grid-template-admin-header-search i {
    float: left;
}

.grid-template-admin-header-search input {
    margin: 0 .5em;
    width: inherit !important;
    min-width: 12vw;
}

.grid-template-admin-blog-upload-area {
    grid-area: blog-upload-area;
}

.grid-template-admin-blog-image-area {
    grid-area: blog-image-area;
    padding: 2em;
    margin: auto 2em;
    text-align: right;
}

.grid-template-admin-blog-image-area>img {
    width: 10em;
}

.grid-template-admin-blog-upload {
    display: grid;
    width: 100%;
    grid-template-areas:
        'blog-upload-area blog-image-area';
    grid-template-columns: 70% 30%;
}

.grid-template-admin-header {
    grid-area: header;
    text-align: center;
    border-bottom: 1px solid #ddd;
    padding-bottom: .5em;
    width: 100%;
    display: grid;
    grid-template-areas:
        'add search info';
    grid-template-columns: 20% 40% 40%;
}

.grid-template-admin-newsletter-header {
    grid-area: header;
    text-align: center;
    border-bottom: 1px solid #ddd;
    padding-bottom: .5em;
    width: 100%;
    display: grid;
    grid-template-areas:
        'add search info';
    grid-template-columns: 45% 35% 20%;
}

.grid-template-admin-menu>a {
    max-width: 10vw;
    text-overflow: ellipsis;
    overflow: hidden;
}

.grid-template-admin-content {
    grid-area: content;
    margin-top: 1em;
    width: 100%;
}

.admin-overview-contractor-inactive-table th,
.admin-overview-contractor-active-table th {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 3em;
}

.grid-template-admin-ip {
    display:grid;
    
    grid-template-areas:
        'ip-left ip-middle ip-right';
    grid-template-columns: 45% 10% 45%;
}

.grid-template-admin-ip > div {
    margin: 1em 0;
}

.grid-template-admin-ip-left {
    grid-area: ip-left;
}

.grid-template-admin-ip-middle {
    grid-area: ip-middle;
}

.grid-template-admin-ip-right {
    grid-area: ip-right;
}


.grid-template-admin-sidebar-left {
    grid-area: side-left;
}

.grid-template-admin-sidebar-right {
    grid-area: side-right;
}

.grid-template-admin-footer {
    grid-area: footer;
}

.grid-template-admin,
.grid-template-contractor {
    display: grid;
    justify-content: center;
    grid-template-areas:
        'header header header'
        'content content content'
        'footer footer footer';
    grid-template-columns: 100%;
    margin: 0;
}

.grid-item-main-business {
    grid-area: main-business;
    text-align: center;
}

.grid-item-main-quotation {
    grid-area: main-quotation;
    text-align: center;
}

.grid-item-main-new {
    grid-area: main-new;
    text-align: center;
}

.grid-item-main-leaflet {
    grid-area: main-leaflet;
    text-align: center;
}

.grid-item-main-events {
    grid-area: main-events;
    text-align: center;
}

.grid-item-main-newsletter {
    grid-area: main-newsletter;
    text-align: center;
}

.grid-template-main {
    grid-template-areas:
        'main-business main-quotation main-new'
        'main-leaflet main-events main-newsletter';
    grid-template-columns: 33.33% auto 33.33%;
}

.grid-template-contractor-header-appprove {
    grid-area: contractor-header-appprove;
}

.grid-template-contractor-header-buttons {
    grid-area: contractor-header-buttons;
}

.grid-template-contractor-header-viewer {
    grid-area: contractor-header-viewer;
}

.grid-template-contractor-header-admin {
    text-align: center;
    width: calc(100% - 1em);
    display: grid;
    grid-template-areas:
        'contractor-header-buttons contractor-header-appprove contractor-header-viewer';
    grid-template-columns: 50% 25% 25%;
    grid-area: contractor-header;
    min-height: unset !important;
}

.grid-pre-checkbox {
    margin: unset !important;
}

.grid-template-contractor-header-user {
    text-align: center;
    width: calc(100% - 1em);
    grid-area: contractor-header;
    min-height: unset !important;
}

.grid-template-contractor-header-user a,
.grid-template-contractor-header-user label,
.grid-template-contractor-header-buttons a,
.grid-template-contractor-header-buttons label {
    float: left;
    margin: .5em;
    padding: .4em;
}

.grid-template-contractor-header {
    text-align: center;
    width: calc(100% - 1em);
    display: grid;
    grid-template-areas:
        'contractor-header-buttons contractor-header-appprove contractor-header-viewer';
    grid-template-columns: 25% 25% 50%;
    grid-area: contractor-header;
    min-height: unset !important;
}

.grid-template-contractor-header>div {
    width: inherit;
    border: 1px solid #ddd;
}

.grid-template-contractor-header>div>input,
.grid-template-contractor-header>div>select,
.grid-template-contractor-header>div>button,
.grid-template-contractor-header>div>label {
    margin: .5em;
    float: left;
}

.grid-template-contractor-sideleft {
    grid-area: contractor-sideleft;
}

.grid-template-contractor-form {
    grid-area: contractor-form;
}

.grid-template-contractor-form label {
    padding: 0 .5em 1em .5em;
    font-size: 1.5em;
}

.grid-template-contractor-form td>input, .grid-template-contractor-form td>textarea {
    width: calc(100% - 1em) !important;
}

#contractorCreateForm th,
#contractorEditForm th {
    background-color: #2dbe6c !important;
    padding: .5em;
    font-size: unset;
}

.grid-template-contractor-province {
    grid-area: contractor-province;
}

.grid-template-contractor-province table {}

.grid-template-contractor-category {
    grid-area: contractor-category;
}

.grid-template-contractor-category table {
    height: 45%;
}

.grid-template-contractor-upload {
    grid-area: contractor-upload;
}

.grid-template-contractor-images {
    grid-area: contractor-images;
}

.grid-template-contractor-sideright {
    grid-area: contractor-sideright;
}

.grid-template-contractor {
    text-align: center;
    width: 100%;
    display: grid;
    grid-template-areas:
        'contractor-sideleft contractor-header contractor-header contractor-header contractor-sideright'
        'contractor-sideleft contractor-form contractor-category contractor-province contractor-sideright'
        'contractor-sideleft contractor-form contractor-category contractor-province contractor-sideright'
        'contractor-sideleft contractor-images contractor-upload contractor-upload contractor-sideright'
        'contractor-sideleft contractor-images contractor-upload contractor-upload contractor-sideright';
    grid-template-columns: auto 59% 25% 15% auto;
}

.grid-template-contractor>div {
    border: 1px solid #ddd;
    width: inherit;
    padding: 0 !important;
}

.grid-drop-category {
    height: 90%;
    padding-left: .5em;
}

.grid-drop-container {
    height: 80%;
    border: 1px solid #ddd;
    width: calc(100% - .5em) !important;
    margin: .25em;
    padding: 1em !important;
}

.grid-template-contractor .a-select-down-arrow {
    top: 0em !important;
}

.grid-template-contractor-province td,
.grid-template-contractor-province label {
    padding: .5em 0;
    margin: 0;
}

.grid-template-contractor-province td:first-child {
    width: 10%;
    display: inherit;
}

.grid-template-contractor-province td:last-child {
    width: 90%;

    padding: 0 .5em;
}
.grid-viewer-image-holder, .grid-other-image-holder {
    cursor: pointer;
}

                                               
td > .fa-info-circle {
    cursor: pointer;
    font-size: 1.5em;
}

.menu-undertitle {
    color: white;
    font-weight: 500;
}