.cal-day-con {
    padding: 0;
}

.cal-day-con-number-con {
    padding: 1.5em;
    position: relative;
}

.cal-day-con-number-con-text {
    font-size: 0.6em;
    /*background-color: #ccc;*/
    /*border-radius: 50%;*/
    color: darkgrey;
    margin: 0;
    /*padding: 8px;*/
    position: absolute;
    top: 0px;
    left: 0px;
    /*min-width: 16px;*/
    /*text-align: center;*/
}

/*button.collapsable {*/
/*    cursor: pointer;*/
/*    padding: 10px;*/
/*    width: 100%;*/
/*    border: none;*/
/*    text-align: left;*/
/*    outline: none;*/
/*}*/

/*button.collapsable:after {*/
/*    content: '\02795'; !* Unicode character for "plus" sign (+) *!*/
/*    color: white;*/
/*    float: right;*/
/*    margin-left: 5px;*/
/*}*/

/*button.collapsable.active:after {*/
/*    content: "\2796"; !* Unicode character for "minus" sign (-) *!*/
/*}*/

div.collapsable:not(.active) {
    display: none;
}

div.collapsable.active {
    display: block;
}

.gaia_error {
    background-color: #ef4155;
    padding: 5px 15px;
}

.gaia_error p {
    margin: 0;
    color: white;
}

div.gaia_view {
    margin-top: 15px;
    margin-bottom: 30px;
}

.loading-indicator {
    background:
            url('/wp-content/plugins/chaos/assets/spinner.gif')
            no-repeat
            left center;
}

.loading-indicator-arrow {
    background:
            url('/wp-content/plugins/gaia/assets/arrow-spinner.gif')
            no-repeat
            left center;
}

img.spinner {
    max-width: 25px;
    height: auto;
    margin-right: 5px;
}

/* Filter area */
.gaia_filter {
    width: 100%;
    padding: 15px;
    background-color: lightgrey;
}

.gaia_filter_item::after {
    content: "";
    clear: both;
    display: table;
}

.gaia_filter .gaia_filter_title {
    width: 25%;
    float: left;
}

.gaia_filter .gaia_filter_content {
    width: 75%;
    float: left;
}

/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: auto;
    background-color: #555;
    font-size: small;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 0;
    margin-left: 0;

    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

/*
 * Form table
 */
table.gaia_form {
    width: 100%;
}

table.gaia_form th {
    white-space: nowrap;
}

table.gaia_form td {
    text-align: left;
    width: 99%;
}

/*
 * New style table definition
 */
table.gaia {
    width: 100%;
    border-collapse: collapse;
}

table.gaia thead th {
    background-color: #000000;
    color: #ffffff;
    position: sticky;
    position: -webkit-sticky;
    top: 48px;
}

table.gaia td,
table.gaia th {
    text-align: left;
    vertical-align: top;
}

table.gaia:not(.timesheet) tbody tr:nth-of-type(odd) {
    background: #eee;
}

table.gaia tfoot th,
table.gaia tfoot td {
    font-weight: bold;
}

/*
 * Table definition
 */
table.gaia_table {
    width: 100%;
    border-collapse: collapse;
}

/* Zebra striping */
table.gaia_table tr:nth-of-type(odd) {
    background: #eee;
}
table.gaia_table th {
    background: #333;
    color: white;
    font-weight: bold;
}
table.gaia_table td, table.gaia_table th {
    padding: 6px;
    border: 1px solid #ccc;
    text-align: left;
    vertical-align: top;
}

table.gaia_table thead th {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
}

table.gaia_table tfoot td {
    font-weight: bold;
}
/*
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media only screen and (max-width: 760px) {
    /* Force table to not be like tables anymore */
    table.gaia_table, table.gaia_table thead, table.gaia_table tbody, table.gaia_table th, table.gaia_table td, table.gaia_table tr {
        display: block;
    }

    /* Hide table headers (but not display: none;, for accessibility) */
    table.gaia_table thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    table.gaia_table tr {
        border: 1px solid #ccc;
    }

    table.gaia_table td {
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
    }

    table.gaia_table:not(.nopadding) td {
        padding-left: 50%;
    }

    table.gaia_table td:before {
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
    }
}

/*
Label the data for small version of the tables
*/
@media only screen and (max-width: 760px) {
    table.gaia_relatielijst td:nth-of-type(1):before { font-weight: bold; content: "Nr."; }
    table.gaia_relatielijst td:nth-of-type(2):before { font-weight: bold; content: "Naam"; }

    table.gaia_projectenlijst td:nth-of-type(1):before { font-weight: bold; content: "Nr."; }
    table.gaia_projectenlijst td:nth-of-type(2):before { font-weight: bold; content: "Naam"; }
    table.gaia_projectenlijst td:nth-of-type(3):before { font-weight: bold; content: "Facturatie"; }

    table.gaia_ticketlijst td:nth-of-type(1):before { font-weight: bold; content: "ID"; }
    table.gaia_ticketlijst td:nth-of-type(2):before { font-weight: bold; content: "Titel"; }
    table.gaia_ticketlijst td:nth-of-type(3):before { font-weight: bold; content: "Type"; }
    table.gaia_ticketlijst td:nth-of-type(4):before { font-weight: bold; content: "Status"; }

    table.gaia_ticket_notities_lijst td:nth-of-type(1):before { font-weight: bold; content: "Datum/tijd"; }
    table.gaia_ticket_notities_lijst td:nth-of-type(2):before { font-weight: bold; content: "Notitie"; }

    table.gaia_open_tickets td:nth-of-type(1):before { font-weight: bold; content: "ID"; }
    table.gaia_open_tickets td:nth-of-type(2):before { font-weight: bold; content: "Relatie"; }
    table.gaia_open_tickets td:nth-of-type(3):before { font-weight: bold; content: "Project"; }
    table.gaia_open_tickets td:nth-of-type(4):before { font-weight: bold; content: "Titel"; }
    table.gaia_open_tickets td:nth-of-type(5):before { font-weight: bold; content: "Status"; }
}


/*
 * Project management styles
 */
.project_zoeken_popup {
    display: none;
    cursor: default;
    position: absolute;
    overflow: auto;
    background-color: #f9f9f9;
    max-height: 350px;
    height: auto;
    min-width: 160px;
    width: auto;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
}

.project_selector {
    cursor: pointer;
    text-align: center;
    float: left;
    width: 40px;
}

.pm_zoekresultaat_relatie {
    font-weight: bold;
    text-decoration: underline;
}

.pm_zoekresultaat_project {
}

.pm_zoekresultaat_project:hover {
    cursor: pointer;
    background-color: lightgrey;
}

th.cel_tijd,
td.cel_tijd,
th.cel_getal,
td.cel_getal {
    text-align: right !important;
    white-space: nowrap !important;
}

table.nieuw_ticket_container {
    width: 100%;
}

table.nieuw_ticket_container td.left {
    width: 20%;
}

table.nieuw_ticket_container td.right {
    width: auto;
}

.nieuw_ticket_form_container {
    display: none;
}

table.timesheet tbody tr:nth-of-type(odd) {
    background: #fff;
}

table.timesheet tr.weekeinde {
    background-color: lightgrey !important;
}