.app-workspace {
    overflow: hidden;
}

.app-workspace .content {
    display: flex;
    flex-direction: column;
}

.full-note text-angular {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

text-angular .ta-scroll-window {
    height: 100%;
    min-height: 200px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.full-note text-angular .ta-scroll-window, text-angular .ta-scroll-window {
    height: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

    text-angular .ta-scroll-window [contenteditable] {
        flex: 1;
    }

    .full-note text-angular .ta-scroll-window [contenteditable] {
        flex: 1;
    }

.full-note text-angular textarea {
    flex: 1;
}

.app-header .app-header-container {
    background-color: #0D7D7B;
}

/*	tw-border-2 tw-border-dashed tw-rounded tw-p-4 tw-flex tw-justify-center */
.container-dashed {
    border-width: 1px;
    border-style: solid;
    border-radius: 0.25rem;
    border-color: #cccccc;
    padding: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 8px;
    background-color: #f9f9f9;
}

.ta-editor {
    min-height: 300px;
    height: auto;
    overflow: auto;
    font-family: inherit;
    font-size: 100%;
}

text-angular img {
    max-width: 100%;
}

.modal .modal-dialog .modal-content .modal-header {
    border-bottom: 1px solid #cccccc;
}

.modal .modal-dialog .modal-content .modal-body {
    padding: 15px;
    flex: 1;
}

.modal .modal-dialog .modal-content .modal-footer {
    border-top: 1px solid #dddddd;
}

.dropdown-menu .divider {
    background-color: #414141;
}

.extension .modal .modal-dialog {
    width: 100%;
}

.modal .modal-dialog .modal-content .modal-header {
    border-bottom: 1px solid #dddddd !important;
}

.modal .modal-dialog .modal-content .modal-header, .modal .modal-dialog .modal-content .modal-footer {
    padding: 8px 16px;
    background: #f1f1f1;
    height: 55px;
}

.extension .app-workspace .app-content {
    height: 100%;
}

.dropdown-menu .divider {
    height: 0.5px;
}

.panel .panel-body.checkbox-group ul li {
    height: 45px;
}

.tab-content {
    margin-top: 10px;
}

.tw-gap-y-2 {
    row-gap: .05rem;
}

.btn-skip {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 9999;
    padding: 5px 12px;
    left: 50%;
    position: absolute;
    transform: translateY(-150%);
    transition: transform 0.3s;
}

    .btn-skip:focus {
        transform: translateY(0%);
    }

.dropdown-menu .btn {
    background-color: #282828;
    color: white;
    width: 100%;
    text-align: left;
}

.app-header .app-header-container .user-menu {
    width: 250px;
}

    .app-header .app-header-container .user-menu .menu-toggle a {
        height: 100%;
        align-items: center;
    }

    .app-header .app-header-container .user-menu .menu-toggle .menu-items button {
        padding: 12px 15px;
    }

        .app-header .app-header-container .user-menu .menu-toggle .menu-items button i {
            margin-right: 10px;
        }

.btn-bars {
    background-color: transparent;
    padding: 0;
}

.drawer.left, .drawer.right {
    transition: none;
    display: none;
}

body.drawer-left-open .drawer.left, body.drawer-right-open .drawer.right {
    display: block;
}

/*Reset SCSS focus removal*/
*:focus, .dropdown-toggle:focus, select:focus, .form-control:focus {
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}

select:focus {
    outline-offset: -2px;
}

.btn:focus:not(.global-focus-none), [role="button"]:focus:not(.global-focus-none) {
    filter: brightness(0.85);
}

button.label {
    background-image: none;
    border: 1px solid transparent;
    touch-action: manipulation;
    margin-bottom: 0;
    user-select: none;
}

button.label-primary:focus {
    filter: brightness(1.25);
    text-decoration: underline;
}

.btn:focus .chips > .chip {
    text-decoration: underline;
}

.grid-list .grid-item:focus {
    outline-offset: 2px;
}

.transparent {
    background-color: transparent;
}

.border-0 {
    border: 0;
}

.text-left {
    text-align: left;
}

.panel {
    border-radius: 5px;
    overflow: hidden;
}

.padding-0 {
    padding: 0;
}

.outline-offset-1 {
    outline-offset: 1px !important;
}

.outline-offset-2 {
    outline-offset: 2px !important;
}

.side-nav {
    z-index: 75;
}

.panel, .panel-actions {
    overflow: initial;
}

.spyomic-page-header .header-actions .header-action:focus {
    background-color: #ccc;
    color: black;
    filter: brightness(1);
}

.dropdown-menu .btn:focus, .dropdown-menu .btn:hover {
    background-color: #0a6261;
    color: white;
    text-decoration: underline;
    filter: brightness(1.25);
}

wcag-conformance-totals svg {
    display: inline-block;
}

.modal .modal-content {
    padding: 0;
    display: flex;
    flex-direction: column;
}

.panel .panel-heading {
    border-width: 0;
}

.panel-group {
    display: flex;
    flex-direction: column;
    row-gap: 0.5rem;
}

/*Modal Fullscreen*/
.modal-fullscreen .modal-dialog {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    right: 0;
}

/*Modal Fullscreen*/
.modal-fullscreen .modal-body {
    overflow-y: auto;
}

.modal-dialog .modal-header button.btn-icon {
    display: flex;
    justify-content: center;
    align-items: center;
}

    .modal-dialog .modal-header button.btn-icon svg {
        width: 17px;
        height: 17px;
        color: #eeeeee;
    }

.modal-dialog .modal-header button.close {
    margin-left: 5px;
}

.modal-footer div[role="checkbox"] {
    position: absolute;
    left: 20px;
    margin-top: 6px;
}

.angucomplete-holder {
    position: relative;
}

    .angucomplete-holder .angucomplete-dropdown {
        background: white;
        border-radius: 3px;
        margin-top: 5px;
        position: absolute;
        width: 100%;
        z-index: 1000;
    }

        .angucomplete-holder .angucomplete-dropdown .angucomplete-row {
            padding: 3px 8px;
            border-bottom: 1px solid #eeeeee;
        }

.table.table-lg tbody tr td {
    height: 60px;
}

div[uib-accordion-group].panel-table .panel-body {
    padding: 0;
}

.action-cell-sm {
    width: 50px;
    text-align: center;
}

    .action-cell-sm div[role="checkbox"] {
        margin-top: 18px;
    }

button.copy-selector {
    background-color: #f9f2f4;
    padding: 0px 10px;
}

.empty-state {
    padding: 10px;
    text-align: left;
}

.project-code-suggestion-overview .tab-content {
    flex: 1;
}

    .project-code-suggestion-overview .tab-content > .tab-pane {
        height: 100%;
    }

@media only screen and (max-width: 750px) {
    .sidebar-modal .modal-dialog {
        width: 100%
    }
}


.label-definition {
    background-color: #0D7D7C !important;
    color: white !important;
}

.label-default {
    background-color: #777777 !important
}

.bg-priority-critical {
    background-color: #680E0C !important;
    color: white !important;
}

.bg-priority-high {
    background-color: #C41B16 !important;
    color: white !important;
}

.bg-priority-low {
    background-color: #FECB4A !important;
    color: black !important;
}

.app-page .note-grid > div[class^=col-] .note {
    margin: 0;
}

.tag {
    height: fit-content;
}

.sortable-ghost {
    opacity: .5;
    background-color: #C8EBFB;
}

.sortable-directive .sortable-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sortable-directive .sortable-list .item {
    background-color: white;
    border: 1px solid #EEEEEE;
    border-radius: 3px;
    padding: 8px 16px;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

.h1, h1 {
    font-size: 21px
}

.h2, h2 {
    font-size: 18px
}

.h3, h3 {
    font-size: 16px
}

.h4, h4 {
    font-size: 14px
}

.h5, h5 {
    font-size: 14px
}

.h6, h6 {
    font-size: 12px
}

.label-todo {
    background-color: #E9EBEE;
    color: #44546F;
}

.label-in-progress {
    background-color: #E9F2FF;
    color: #0055CC;
}

.label-done {
    background-color: #DCFFF1;
    color: #257151;
}

.text-lowest {
    color: #0065FF;
}

.text-low {
    color: #0065FF
}

.text-medium {
    color: #FFAB00;
}

.text-high {
    color: #FF5630;
}

.text-highest {
    color: #FF5630;
}