@media screen and (max-width: 768px) {
    .table-wrapper {
        overflow-x: auto;
    }

    .nested.dropdown .dropdown-menu {
        top: 33px !important;
        right: 0px !important;
        left: 0px;
        margin-left: 0px !important;
    }
}

@media screen and (min-width: 1280px) {
    .table-container {
        overflow: visible;
    }
}

.table.is-fullwidth {
    width: 100% !important;
}

.table tr.is-selected td, .table tr.is-selected th {
    border-color: var(--bulma-table-cell-border-color);
}

.ellipsis {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 100px;
}

.ellipsis:hover {
    overflow: visible;
    white-space: normal;
    max-width: none;
}

.valignbottom{
    margin-top: auto;
}

.nowrap {
    white-space: nowrap;
}

/* nested dropdown */
.nested.dropdown:hover > .dropdown-menu {
    display: block;
}

.nested.dropdown .dropdown-menu {
    top: -15px;
    margin-left: 100%;
}

.nested.dropdown.is-right .dropdown-menu {
    top: -15px;
    right: 100%;
    margin-left: 100%;
}

.nested.dropdown .dropdown-trigger button:before {
    content: '';
    font-family: "Font Awesome 5 Free";
    font-weight: bolder;
    margin-right: 5px;
}

.nested.dropdown .dropdown-trigger button {
    padding: 0px 0px;
    border: 0px;
    font-size: 14px;
    font-weight: 400;
    height: 2em;
    box-shadow: none;
}

.tooltip {
    position: relative;
    display: inline-block;
    cursor: help;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    font-family: 'Noto Sans';
    font-size: 9pt;
    text-align: left;
    border-radius: 6px;
    padding: 5px;

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

.tooltip.tooltip-top .tooltiptext {
    bottom: 150%;
    left: 50%;
    margin-left: -60px;
}

.tooltip.tooltip-left .tooltiptext {
    top: -5px;
    right: 80%;
}

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

.country_flag {
    padding-right: 5px;
}

.has-padding-top-20 {
    padding: 20px;
}

.tableOptionsContainer {
    padding-top: 10px;
    padding-bottom: 12px;
}

.full-link {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

.preview {
    cursor: pointer;
}

.previewer {
    position: absolute;
    border: 3px solid #e9ecef;
    background: white;
    padding: 5px;
    color: #fff;
    z-index: 100;
    opacity: 0.8;
}

.dynamic-tooltip {
    cursor: help;
}

.popup-tooltip {
    position: absolute;
    border: 3px solid #e9ecef;
    background: hsl(var(--bulma-scheme-h),var(--bulma-scheme-s),var(--bulma-background-l));
    z-index: 100;
    opacity: 0.9;
}

.previewer img {
    max-width: 250px;
    max-height: 250px;
}

table tr.is-red-border, table tr.is-red-border td, table tr.is-red-border th {
    border: 2px solid red !important;
}

table tr.is-still-queue, table tr.is-still-queue td, table tr.is-still-queue th {
    border: 2px solid grey !important;
}

.table tr.is-warning-light {
    --bulma-table-color: var(--bulma-warning-invert);
    --bulma-table-cell-heading-color: var(--bulma-warning-invert);
    --bulma-table-cell-background-color: hsl(var(--bulma-warning-h),var(--bulma-warning-s),var(--bulma-warning-light-l))!important;
    --bulma-table-cell-border-color: hsla(var(--bulma-warning-h),var(--bulma-warning-s),var(--bulma-warning-l),1);
}

.table tr.is-link-light {
    --bulma-table-color: var(--bulma-link-invert);
    --bulma-table-cell-heading-color: var(--bulma-link-invert);
    --bulma-table-cell-background-color: hsl(var(--bulma-link-h),var(--bulma-link-s),var(--bulma-link-light-l))!important;
    --bulma-table-cell-border-color: hsla(var(--bulma-link-h),var(--bulma-link-s),var(--bulma-link-l),1);
}

.table tr.is-danger-light {
    --bulma-table-color: var(--bulma-danger-invert);
    --bulma-table-cell-heading-color: var(--bulma-danger-invert);
    --bulma-table-cell-background-color: hsl(var(--bulma-danger-h),var(--bulma-danger-s),var(--bulma-danger-light-l))!important;
    --bulma-table-cell-border-color: hsla(var(--bulma-danger-h),var(--bulma-danger-s),var(--bulma-danger-l),1);
}

.notification.is-purple {
    background-color: #673ab7;
    color: #ffffff;
}

.button.is-multiline {
    min-height: 2.25em;
    white-space: unset;
    height: auto;
    flex-direction: column;
}

.modal-card.modal-card-max, .modal-card.modal-card-max > .modal-content {
    min-width: 640px;
    max-width: 1280px;
    width: 90vw;
}

.modal .modal-card-head, .modal .modal-card-foot {
    padding: 1rem;
}

.modal-card-body, .modal-content {
    max-height: 65vh;
}

/** This isn't the actual suggested CSS - but it is just a quick fix to replicate the functionality**/
.button.is-multiline .icon {
    margin: 0! important;
}

/* selectize */
.is-small > .selectize-control > .selectize-input {
    padding: 5px 8px;
    font-size: 1em;
    margin-right: 20px;
}

.selectize-dropdown .optgroup-header {
    font-weight: bold;
}

.selectize-control.single .selectize-input:after {
    display: none !important;
}

.select.is-small .selectize-input.items.full.has-options.has-items {
    max-height: 30px;
}

/* panel-block colors */
.panel-block.is-primary {
    background-color: #00d1b2;
    color: #fff;
}

.panel-block.is-primary:hover {
    background-color: #00c4a7;
    color: #fff;
}

.panel-block.is-link {
    background-color: #3273dc;
    color: #fff;
}

.panel-block.is-link:hover {
    background-color: #3e56c4;
    color: #fff;
}

.panel-block.is-info {
    background-color: #3298dc;
    color: #fff;
}

.panel-block.is-info:hover {
    background-color: #3488ce;
    color: #fff;
}

.panel-block.is-success {
    background-color: #48c774;
    color: #fff;
}

.panel-block.is-success:hover {
    background-color: #3ec487;
    color: #fff;
}

.panel-block.is-warning {
    background-color: #ffdd57;
    color: rgba(0,0,0,.7);
}

.panel-block.is-warning:hover {
    background-color: #ffdc7d;
    color: rgba(0,0,0,.7);
}

.panel-block.is-danger {
    background-color: #f14668;
    color: #fff;
}

.panel-block.is-danger:hover {
    background-color: #f03a5f;
    color: #fff;
}

.panel-block.is-white {
    background-color: #fff;
    color: #0a0a0a;
}

.panel-block.is-white:hover {
    background-color: #f9f9f9;
    color: #0a0a0a;
}

.panel-block.is-light {
    background-color: #f5f5f5;
    color: rgba(0,0,0,.7);
}

.panel-block.is-light:hover {
    background-color: #eee;
    color: rgba(0,0,0,.7);
}

.panel-block.is-dark {
    background-color: #363636;
    color: #fff;
}

.panel-block.is-dark:hover {
    background-color: #2f2f2f;
    color: #fff;
}

.panel-block.is-black {
    background-color: #0a0a0a;
    color: #fff;
}

.panel-block.is-black:hover {
    background-color: #040404;
    color: #fff;
}

.panel-block.is-primary.is-light {
    background-color: #ebfffc;
    color: #00947e;
}

.panel-block.is-primary.is-light:hover {
    background-color: #defffa;
    color: #00947e;
}

.panel-block.is-link.is-light {
    background-color: #eef3fc;
    color: #3850b7;
}

.panel-block.is-link.is-light:hover {
    background-color: #e6e9f7;
    color: #3850b7;
}

.panel-block.is-info.is-light {
    background-color: #eef6fc;
    color: #296fa8;
}

.panel-block.is-info.is-light:hover {
    background-color: #e4eff9;
    color: #296fa8;
}

.panel-block.is-success.is-light {
    background-color: #effaf5;
    color: #257953;
}

.panel-block.is-success.is-light:hover {
    background-color: #e6f7ef;
    color: #257953;
}

.panel-block.is-warning.is-light {
    background-color: #fffaeb;
    color: #946c00;
}

.panel-block.is-warning.is-light:hover {
    background-color: #fff6de;
    color: #946c00;
}

.panel-block.is-danger.is-light {
    background-color: #feecf0;
    color: #cc0f35;
}

.panel-block.is-danger.is-light:hover {
    background-color: #fde0e6;
    color: #cc0f35;
}

/* fake disabled input */
.input.is-disabled {
    background-color: var(--bulma-input-disabled-background-color);
    border-color: var(--bulma-input-disabled-border-color);
    box-shadow: none;
    color: var(--bulma-input-disabled-color);
}

/* table stripes */
tr.grey-striped {
    background: repeating-linear-gradient(-45deg, #dfdfdf, #dfdfdf 10px, white 10px, white 40px);
}

tr.orange-striped {
    background: repeating-linear-gradient(-45deg, #f9e69c, #f9e69c 10px, white 10px, white 40px);
}

/* magnifier */
.loupe {
    z-index: 9999;
    display: none;
    position: absolute;
    width: 200px;
    height: 200px;
    border: 1px solid black;
    cursor: crosshair;
    overflow: hidden;
    background: -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), white;
    background: -moz-linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), -moz-linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), white;
    background: linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0), white;
    background-repeat: repeat, repeat;
    background-position: 0px 0, 5px 5px;
    -webkit-transform-origin: 0 0 0;
    transform-origin: 0 0 0;
    -webkit-background-origin: padding-box, padding-box;
    background-origin: padding-box, padding-box;
    -webkit-background-clip: border-box, border-box;
    background-clip: border-box, border-box;
    -webkit-background-size: 10px 10px, 10px 10px;
    background-size: 10px 10px, 10px 10px;
    -webkit-box-shadow: none;
    box-shadow: none;
    text-shadow: none;
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    transition: none;
    -webkit-transform: scaleX(1) scaleY(1) scaleZ(1);
    transform: scaleX(1) scaleY(1) scaleZ(1);
}

.loupe img {
    position: absolute;
    right; 0;
}

/* bootstrap-duration-picker */
.bdp-input input {
    display: inline-block;
    margin-bottom: 3px;
    width: 60px;
}

.bdp-block {
    display: inline-block;
    line-height: 1;
    text-align: center;
    padding: 5px 3px;
}