/* HEPRA THEME */
.bp-topbar {
    background-color: black;
}

.bp-topbar-content {
    border-bottom: 2px orange solid !important;
    background-image: url(../images/hepra-bar-40.jpg);
    background-repeat: no-repeat;
    height: 38px;
}
    .bp-topbar-content .bp-topbar-brand .bp-logo-img {
        padding-top: 7px;
    }

    .bp-logo-img {
        max-height: 30px;
    }


.k-drawer {
    background-color: transparent;
    color: #2e4b5e;
}

.k-drawer-wrapper {
    background-color: #fcfcfd;
}

/* Top toolbar Search field */
.bp-topbar-search {
    color: hsla(0,0%,100%,.6);
}
.bp-topbar-search .k-input {
    background-color: rgba(9,30,66,.48);
    color: inherit;
}
    .bp-topbar-search .k-textbox:focus, .bp-topbar-search .k-textbox:focus-within, .bp-topbar-search .k-textbox.k-state-focus, .bp-topbar-search .k-textbox.k-state-focused {
        background-color: rgba(9,30,66,.48);
        color: #deebff;
    }
    .bp-topbar-search .k-textbox:hover, .bp-topbar-search .k-textbox.k-state-hover {
        background-color: rgba(9,30,66,.48);
        color: #deebff;
    }

.bp-topbar-search input::-webkit-input-placeholder {
    color: hsla(0,0%,100%,.6)
}
.bp-topbar-search input::-moz-placeholder {
    color: hsla(0,0%,100%,.6)
}
.bp-topbar-search input:-ms-input-placeholder, .bp-topbar-search input::-ms-input-placeholder {
    color: hsla(0,0%,100%,.6)
}
.bp-topbar-search input::placeholder {
    color: hsla(0,0%,100%,.6)
}
.bp-topbar-search input:focus::-webkit-input-placeholder {
    color: #deebff
}
.bp-topbar-search input:focus::-moz-placeholder {
    color: #deebff
}
.bp-topbar-search input:focus:-ms-input-placeholder, .bp-topbar-search input:focus::-ms-input-placeholder {
    color: #deebff
}
.bp-topbar-search input:focus::placeholder {
    color: #deebff
}

/* Top Toolbar Buttons */
.bp-topbar-content .k-button {
    background-color: inherit;
    background-image: none;
    color: #deebff;
    border: none;
}
    .bp-topbar-content .k-button:hover, .bp-topbar-content .k-button.k-state-hover {
        background-color: rgba(9, 30, 66, 0.48);
    }

/* Top Toolbar Dropdown */
.bp-topbar-content .k-combobox.k-input {
    background-color: rgba(9,30,66,.48);
    color: hsla(0,0%,100%,.6);
}
    .bp-topbar-content .k-combobox.k-input.k-focus {
        color: #deebff;
    }
.bp-topbar-content .k-combobox .k-select {
    background-color: rgba(9,30,66,.48);
    color: hsla(0,0%,100%,.6);
    background-image: none;
}
.bp-topbar-content .k-combobox > :hover .k-select, .bp-topbar-content .k-combobox .k-state-hover .k-select {
    color: #deebff;
    background-color: hsla(0,0%,100%,.3);
    background-image: none;
}

/* Top Toolbar Menu */
.bp-topbar-content .k-menu:not(.k-context-menu) > .k-item {
    color: #deebff;
}
    .bp-topbar-content .k-menu:not(.k-context-menu) > .k-item:hover, .bp-topbar-content .k-menu:not(.k-context-menu) > .k-item.k-state-hover {
        color: #deebff;
        background-color: rgba(9, 30, 66, 0.48);
    }
    .bp-topbar-content .k-menu:not(.k-context-menu) > .k-item > .k-state-active {
        color: inherit;
    }

.bp-topbar-left .k-header.k-menu {
    flex-wrap: nowrap;
}
/* Top Toolbar Menu dropdowns should render below header - watch other popups... */
.k-popup.k-menu-popup {
    margin-top: 5px;                
}

.k-grid td.right-align {
    text-align: right !important;
}


/* ATTENDANCE */
.h-quickselect {
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: center !important;
    justify-content: center !important;
}
.h-quickselect button {
    display: inline-block;
    vertical-align: middle;
    margin: 5px;
    font-size: 120%;
    width: 160px;
    height: 80px;
}

/* little space between icon and text */
.h-quickselect span {
    margin-right: 3px;
}
/* larger icon size */
.h-quickselect span.fa:before {
    font-size: 140%;
    vertical-align: middle;
}

/* gray icons on gray buttons instead of black which was too sharp */
.h-quickselect .k-button-solid-base span {
    color: #6c6c6c;
}

/* Adding buttons into Clock-On Tile Header */
.k-card-header {
    padding: 9px 16px 9px;
}

    .k-card-header .k-card-title, .k-card-header .k-card-subtitle {
        margin-bottom: 0;
        padding: 3px 0px;
    }

.bp-tile-wbuttons .k-tilelayout-item-header {
    display: flex;
    gap: 8px;
}

    .bp-tile-wbuttons .k-tilelayout-item-header h5 {
        flex: 1;
    }

/* hide toolbar on grid */
.bp-grid-no-toolbar .k-toolbar.k-grid-toolbar {
    display: none;
}

.bp-margin-bottom {
    margin-bottom: 5px;
}

.bp-display-none {
    display: none !important;
}

/* hide header on grid */
.bp-grid-no-header .k-grid-header {
    display: none;
}

.bp-grid-no-scroll .k-grid-content {
    overflow-y: hidden;
}

.bp-grid-no-scroll .k-grid-header {
    padding-right: 0 !important;
}

.bp-grid-no-scroll .k-grid-header-wrap {
    border-width: 0px !important;
}

/* hide expander for sub-grid without sub-items */
tr.no-children .k-hierarchy-cell * {
    display: none !important;
}

/* tiles get strange sizes when one tile grows */
.k-tilelayout.no-auto-rows {
    grid-auto-rows: initial !important;
}

.bp-font-size-80 {
    font-size: 80%;
}

.h-attendance-overview {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: row;
    text-align: center;
    column-gap: 30px;
}

.h-attendance-time {
    font-size: 2em;
    font-weight: bold;
}

.h-no-padding {
    padding: 0px !important;
}

.h-clo-approval {
    width: 5px;
}
.h-clo-pending {
    background-color: #fffb92;
}
.h-clo-approved {
    background-color: #81b56b;
}
.h-clo-rejected {
    background-color: #ff8282;
}

.k-grid td.h-no-border {
    border-width: 0 0 0px 0px;
}

.k-grid td.h-show-overflow {
    display: flex;
    flex-wrap: wrap;
}

.h-clo-presence {
    width: 5px;
}
.h-clo-field {
    color: #fffb92;
}
.h-clo-office, .h-clo-home {
    color: #81b56b;
}
.h-clo-absent {
    color: #5da8d3;
}
.h-clo-break {
    color: #b9b9b9;
}

.h-clo-presence-user-container {
    display: flex;
    margin-top: auto;
    margin-bottom: auto;
}

.h-clo-presence-user-picture .h-clo-presence-user-name {
    flex: 1;
}

.h-clo-presence-user-name {
    margin-left: 10px;
    margin-top: auto;
    margin-bottom: auto;
}

.h-clo-presence-picture {
    display: flex;
    height: 26px;
    width: 26px;
    border-radius: 100%;
    margin-top: auto;
    margin-bottom: auto;
}

.h-clo-presence-telerik-avatar-container {
    height: 26px;
    width: 26px;
}

.h-clo-presence-telerik-avatar {
    margin-right: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.h-clo-presence-telerik-avatar-initials {
    font-size: 13px;
}

.h-clo-pastevents {
    /*max-height: 600px;*/
}

.h-clo-tile-balancechart .k-tilelayout-item-body {
    padding-bottom: 6px;
}

.notification-inbox-dot {
    height: 8px;
    width: 8px;
    background-color: red;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    top: 5px;
    left: -13px;
}

/* TOAST Notifications */
.h-notification.k-notification-group {
    margin: 50px 25px;
}
.h-notification .k-notification {
    padding: 12px 10px 12px 20px;
    font-size: 14px;
}
.h-notification .k-notification-wrap {
    align-items: center;
}
    .h-notification.k-notification-wrap > .k-i-close {
        margin-left: 10px;
    }

/* toolbar above grid */
.k-toolbar.bp-toobar-above-grid {
    border-bottom: none;
}

/* separator in card header */
.k-card-header .k-separator {
    align-self: center;
    width: 0;
    height: 1.4285714286em;
    border-width: 0 0 0 1px;
    border-style: solid;
    border-color: inherit;
}

/* device confirmation */
.consent-required {
    margin-left: 5px;
}
.consent-label .fa {
    margin-left: 5px;
}

/* key grab */
.h-no-focus-visible:focus-visible {
    outline: none !important;
}

/* highlited field */
.k-textbox.h-field-high, .k-textbox.h-field-high:focus, .k-textbox.h-field-high:focus-within, .k-textbox.h-field-high.k-state-focus, .k-textbox.h-field-high.k-state-focused {
    background-color: aliceblue;
}

/* Admin side User page user roles */
.user-roles {
    display: inline-block;
    padding: 0 15px;
    height: 30px;
    font-size: 14px;
    line-height: 30px;
    border-radius: 20px;
    background-color: lightgray;
    margin-bottom: 5px;
    margin-right: 5px;
}

/* Admin side User page user role selection */
.role-selections {
    display: inline-block; padding: 0px 20px;
    margin: 5px;
    height: 35px;
    font-size: 14px;
    line-height: 35px;
    border-radius: 25px;
    background-color: #E4E4E4;
}

/* Roles page role permissions */
.role-premissions {
    display: inline-block; padding: 0px 10px;
    margin: 3px 3px;
    height: 20px;
    font-size: 12px;
    line-height: 20px;
    border-radius: 20px;
    background-color: #E4E4E4;
}

/* Grant types OpenID Clients page */
.grant-types {
    display: inline-block; padding: 0px 20px;
    margin: 5px 5px;
    height: 35px;
    font-size: 14px;
    line-height: 35px;
    border-radius: 25px;
    background-color: #E4E4E4;
}

/* Allowed scopes OpenID Clients page */
.allowed-scopes {
    display: inline-block;
    padding: 0px 15px;
    margin: 5px 5px;
    height: 30px;
    font-size: 14px;
    line-height: 30px;
    border-radius: 20px;
    background-color: #E4E4E4;
}

/* User claims for OpenID Identity Resources grid */
.user-claims {
    display: inline-block;
    padding: 0px 20px;
    margin: 5px 5px;
    height: 35px;
    font-size: 14px;
    line-height: 35px;
    border-radius: 25px;
    background-color: #E4E4E4;
}

/* OpenID Identity Resources edit/create window form */
ul.dialog-form li {
    margin: 10px 0;
}

.window-button-group {
    float: right;
    /*position: absolute;
    right: 0;
    bottom: 0;
    padding-bottom: 10px;
    padding-right: 10px;*/
}

.clients-window {
    max-height: 90%;
}

/* Cancel / Create buttons in Edit / Create window on page OpenID Api Resources */
/*.window-buttons {
    margin-bottom: 50px;
    float: right;
}*/

/* Form in Edit / Create window on page OpenID Identity Resources */
/*#main-tab-form > *{
    padding-bottom: 10px;
}*/

/* Checkboxes for user roles on Users page Edit/Create window */
#user-role-check {
    all: unset;
}

#user-role-check:hover {
    all: unset;
    cursor: pointer;
}


/* Tab strip on Clients page Edit/Create window */
.tab-container .k-tabstrip .k-tabstrip-items {
    flex-wrap: wrap;
    width: 100%;
}

/* Api resources generate secret button */
/*.generate-secret-button {
    width: 100px;
}*/

.user-email-checked {
    margin-left: 5px;
}

/* Admin Email Settings textboxes */
#settings-form-item {
    padding-bottom: 10px;
}

.bp-flex1 {
    flex: 1;
}

/* Notification Inbox buttons */
.read-button {
    border: none;
    background: none;
    float: right;
}

.read-all-button {
    width: 300px;
}

/* Notifications Inbox text */
.no-notifications-text {
    color: grey;
    text-align: center;
}

.notification-sender-text {
    padding: 0px;
    margin: 0px;
    display: inline;
    text-align: center;
}

.notification-senton-text {
    color: grey;
    font-size: 12px;
}

.inbox-card-header {
    padding: 5px 5px 5px 15px;
    margin: 0px;
}

.inbox-card-footer {
    padding: 5px 5px 5px 15px;
    margin: 0px;
    text-align: right;
}

.translations-grid-searchbar {
    margin-left: auto;
    display: flex;
    align-items: center;
}

.search-icon {
    padding-right: 5px;
}

.grid-tool-bar-right {
    margin-left: auto;
}

.grid-tool-bar-right > button {
    margin-right: 10px;
}

.overall-attendance-toolbar-buttons {
    margin-left: auto;
}

.overall-attendance-toolbar {
    display: flex;
    width: 100%;
}

.quick-event-editor-container {
    display: flex;
    width: 100%;
    height: 100%;
}

.quick-event-editor-left-child, .quick-event-editor-right-child {
    flex: 1;
}

.quick-event-editor-left-child {
    margin-left: auto;
    margin-right: auto;
}

.template-editor-combobox {
    width: 100%;
}
.overall-attendance-toolbar-buttons {
    margin-left: auto;
}

.overall-attendance-toolbar {
    display: flex;
    width: 100%;
}

.template-button-editor-icon {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.attendance-quickevent-template-selector-header {
    display: flex;
    width: 100%;
}

.attendance-quickevent-template-selector-title {
    width: 100%;
}

.attendance-template-selector {
    flex: 1;
    margin-left: auto;
    width: 100%;
}

.view-entry-edit-history-button {
    width: 13px;
    vertical-align: text-bottom;
    margin-right: 2px;
}

.view-entry-edit-history-button:hover {
    font-size: 80%;
    cursor: pointer;
    text-decoration: underline;
}

.text-bold {
    font-weight: bold;
}
.text-invalid {
    color: red;
}

.application-settings-tenant-images {
    padding-top: 20px;
}

.flex-wrap {
    flex-wrap: wrap;
}

.application-settings-tenant-images-card {
    height: 350px;
}

.application-settings-image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.application-settings-image {
    width: 100%;
}

.text-subnote {
    font-size: 85%;
    color: dimgray;
}

div.small-absence-tooltip {
    color: #919191;
    float: right;
    display: inline;
}

.att-comment-icon {
    font-size: 14px;
}

.bp-max-50vh {
    max-height: 50vh;
}