/* [ layout ]---------------------------------------------------------------- */

body {
    font-size: 0.9rem;
}

h1 {
    font-size: 1.1rem;
}

h2 {
    font-size: 1.0rem;
    font-weight: bold !important;
}

.hidden {
    display: none !important;
}

.tabs {
    margin-top: 1.2rem;
    margin-bottom: 0.5rem !important;
}

.breadcrumb {
    padding: 0 0.75rem;
    /*act as a navbar*/
    position: fixed;
    top: 0;
    z-index: 30;
}

.navbar.is-fixed-top {
    top: 1.4rem;
}

.red {
    color: red !important;
    font-weight: bold !important;
}

.headsup-guestName {}

.headsup-invoiceName {
    font-size: 80%;
}

.headsup {
    color: red !important;
    font-weight: bold !important;
}

.headsup-calendar {
    background-color: #FC808090 !important;
}

.blocked-calendar {
    background-color: #D0D0D090 !important;
}

.offer-open-calendar,
.offer-calendar {
    background-color: rgb(255, 255, 128) !important;
}

/*---[ table ]---------------------------------------------------------------*/

table.contents {
    font-size: 0.8rem;
}

table.contents tr:nth-child(even) {
    background-color: #EEEEEE;
}

table.contents tr:hover td {
    background: #CCFFCC;
}

table.contents tr.selected {
    background-color: #BCAE98;
}

table.contents tr.total {
    border-top: solid 2px black;
    font-weight: bold;
}

table.contents th {
    background-color: #00d1b2;
    color: black;
    /*padding: 4px 4px 5px 4px;*/
    /*text-align: left;*/
    /*font-weight: normal;*/
}

/*table.contents th a {
    font-weight: normal;
}*/

table.contents th.sorted-on {
    background-color: #00C80090;
}

table.contents th.firstColumnHeader {
    padding: 4px 4px 5px 12px;
}

table.contents th.sorted-on.ascending a:after {
    content: " \25b2";
}

table.contents th.sorted-on.descending a:after {
    content: " \25bc";
}

table.contents td {
    height: 22px;
    vertical-align: middle;
    padding-left: 5px;
}

table.contents td.sorted-on {
    background-color: #00B90020;
}

table.contents td.date-col {
    white-space: nowrap;
}

table.contents th.int-col,
table.contents th.decimal-col,
table.contents td.int-col,
table.contents td.decimal-col {
    text-align: right;
}

table.contents td a {
    padding: 4px 0px 0px 0px;
}

table.contents td a:hover {}

table.contents .centered {
    text-align: center;
}

table.contents .right {
    text-align: right;
}

/*#filter-search-panel-container {
    margin: 0 0 5px 0;
}
*/

/*---[ calendar ]----------------------------------------------------------------*/

table.calendar-table td {
    max-width: 8em;
    padding: 0 0.25rem !important;
}

table.calendar-table th {
    max-width: 8em;
}

table.calendar-table tr:hover td {
    background-color: #E0E0E0;
}

table.calendar-table .calendar-date {
    white-space: nowrap;
    vertical-align: middle;
}

.table td.calendar-weekend {
    /* background-color: #FBB; */
    color: red;
}

.calendar-row-marker-from td {
    position: relative;
}

.calendar-row-marker-to td {
    position: relative;
}

/*dashed lines*/
/*.calendar-row-marker td:not(:first-child)::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 4px;
  border-top: 4px dashed black;
  z-index: 5;
}*/

/*triangle down*/
.calendar-row-marker-from td:not(:first-child)::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid black;
}

/*triangle up*/
.calendar-row-marker-to td:not(:first-child)::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid black;
}

.calendar-cell {
    max-width: 10em;
    height: 1.5em;
    overflow: hidden;
    padding: 0 0.25em;
}

.calendar-cell:hover {
    outline: 2px dashed #000000;
    z-index: 2;
    position: relative;
}

table.resource-calendar .calendar-cell {
    height: auto;
    min-height: 1.5em !important;
}

.calendar-leaving {
    background-color: #FFBBBB90;
    border-radius: 0 0 0.75rem 0.75rem;
}

.calendar-arriving {
    background-color: #FFBBBB90;
    border-radius: 0.75rem 0.75rem 0 0;
}

.calendar-current {
    background-color: #FFBBBB90;
}

.calendar-free {
    background-color: #00C80090;
}

/*---[ form ]----------------------------------------------------------------*/

.status {
    color: #FF761C;
    font-weight: bold;
    padding: 5px 0px;
}

.error {
    color: #FF761C;
    font-weight: bold;
    padding: 5px 0px;
}

input.text-widget.date-field,
input.text-widget.time-field {
    width: 7rem;
}

input.text-widget.datetime-field {
    width: 14rem;
}

input.text-widget.decimal-field,
input.text-widget.int-field {
    width: 10rem;
    text-align: right;
}

/*custom field sizes for invoice edit*/
div.invoice-items input.text-widget.decimal-field {
    width: 7rem;
}

div.invoice-items textarea.textarea-widget.text-field {
    min-height: 3rem;
}

div.invoice-items td.items-unit input.text-widget.textline-field {
    width: 7rem;
}

span.label {
    /*otherwise radio and checkbox labels go next row*/
    display: inline;
}

div.object-widget {
    font-size: 0.9rem;
}

div.control {
    margin-top: 2px;
}

/*---[ buttons ]-------------------------------------------------------------*/

.buttons {
    padding: 10px 0px 3px 0px;
    margin-bottom: 1rem !important;
}

button,
.button-field {
    cursor: pointer;
    font-size: 1rem;
    background-color: #eeeeee;
    color: #000;
    border: 1px solid #464646;
    padding: 4px 10px;
    margin: 2px;
    border-radius: 5px;
}

button:hover,
.button-field:hover {
    background-color: #d0e7d0;
    border-color: #00c800;
}

button:disabled,
button[disabled],
.button-field:disabled {
    border: 1px solid #999999;
    background-color: #999999;
    color: #000000;
}

.btn-are-you-sure {
    background-color: #ffabab;
    outline-color: #ffabab;
}

.btn-are-you-sure:hover {
    background-color: #ff9696;
    border-color: #ff4040;
}

button.addtiny {
    position: absolute;
    top: 30px;
    left: -115px;
}

button.deltiny {
    position: absolute;
    top: 30px;
    left: -115px;
}

/*---[ the rest ]-------------------------------------------------------------*/

ul {
    list-style: inside;
}

/*---[ tooltip/popup stuff ]-------------------------------------------------*/

.tooltip {
    color: var(--bulma-link-text);
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 8rem;
    background-color: azure;
    color: var(--bulma-text-strong);
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    border-color: black;
    border-style: solid;
    white-space: normal;

    /* Position the tooltip */
    position: absolute;
    z-index: 1;
}

.tooltip.active .tooltiptext {
    visibility: visible;
}