:root {
    --bg: #3b3b3b;
    --bg-dark: #3b3b3b;
    --bg-light: white;
    
    --bg-logo: white;
    --bg-logo-dark: black;
    --bg-logo-light: white;

    --bg-select: white;
    --bg-select-dark: #171719;
    --bg-select-light: white;
    
    --bg-select-item-hover: rgb(177, 207, 241); 
    --bg-select-item-hover-light: rgb(177, 207, 241);
    --bg-select-item-hover-dark: rgb(88, 119, 153);

    --accent-bg: #2b2b2b;

    --text: white;
    --text-dark: white;
    --text-light: black;

    --bg-dialog: #f4f4f4;
    --bg-dialog-light: #f4f4f4;
    --bg-dialog-dark: var(--bg);
    --bg-dialog-btn: lightgray;

    --bg-comment-container: white;
    --bg-comment-container-light: white;
    --bg-comment-container-dark: #202020;
    --text-comment-container: black;
    --text-comment-container-light: black;
    --text-comment-container-dark: lightgray;

    --shadow-ticket-cell-hover: rgba(182, 182, 182, 0.6);
    --shadow-ticket-cell-hover-light: rgba(182, 182, 182, 0.6);
    --shadow-ticket-cell-hover-dark: rgba(102, 102, 102, 0.6);
    --text-ticket-cell-closed: #474747;
    --text-ticket-cell-closed-light: #474747;
    --text-ticket-cell-closed-dark: #7c7c7c;




    --accent: white;
    --accent-hover: #ebebeb;
    --accent-text: var(--bg);
    --code: #white;
    --preformatted: #ccc;
    --disabled: #111;
    --uav-red: #d51c29;
    --uav-gray: #736d6e;

    --highlight: var(--uav-red);
    --highlight-dev: goldenrod;
    --highlight-local: #4f6096;

	--selected-color: #4f6096;

	--gap: 12px;
	--changeColor: goldenrod;

	--archivedColor: rgb(170, 182, 0);
	--revokedColor: red;
	--newColor: green;
    --buildingColor: orange;

    --header-height: 50px;
}

* {
	box-sizing: border-box;
}

body, html {
    height: 100vh;
    overflow:hidden;
    margin:0;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 11pt;
    background-color: #3b3b3b;


}

button {
    cursor: pointer;
    background-color: var(--bg-select);
    color: var(--text);
    display: flex;
    gap: 5px;
    border: none;
    border-radius: 4px;
    padding: 5px 8px;
    width: fit-content;
    align-self: center; 
    border-style: none;
}

.status--2 {
    background:#75e4f3;
	border-color: color-mix(in oklab, #75e4f3, black 30%);
}
.status--1 {
    background: grey;
    border-color: color-mix(in oklab, grey, black 30%);
}
.status-0, .status-1 {
    background: #cc3300;
    border-color: color-mix(in oklab, #cc3300, black 30%);
}
.status-2{
    background: #ff9966;
    border-color: color-mix(in oklab, #ff9966, black 30%);
}
.status-3 {
    background: #ffcc00;
    border-color: color-mix(in oklab, #ffcc00, black 30%);
}
.status-4 {
    background: #99cc33;
    border-color: color-mix(in oklab, #99cc33, black 30%);
}
.status-5 {
    background:#3a6cc1;
    border-color: color-mix(in oklab, #3a6cc1, black 30%);
}
.status-ticket-Open {
    background:#adebf3;
    border-color: color-mix(in oklab, #3a6cc1, black 30%);
}
.status-ticket-Closed {
    background:#d8d8d8;
    border-color: color-mix(in oklab, #3a6cc1, black 30%);
}


.bubble {
    background-color: #adebf3;
    padding: 2px 7px;
    border-radius: 8px;
    color: black;

}
.bubble.Closed {
    background-color: #d8d8d8;
}
.bubble.Not-Operational {
    background-color: #ca9d08;
}
.bubble.Maintenance {
    background-color: #68f3c3;
}
.bubble.Online {
    background-color: lightgreen;
}
.bubble.Offline {
    background-color: rgb(238, 144, 144);
}
.bubble.status-5 {
    background-color:#3a6cc1;
}
.not-found-text {
    font-style: italic;
    font-size: 11pt;
    color: gray;
}

.columnTitle {
    margin: 5px 0;
    font-size: 15px;
    font-weight: 700;
    font-style: italic;
    color: #f7f7f7;
}

.menu {
    cursor: pointer;
    min-width:200px;
    position: fixed;
    top: 50px;
    right: 10px;
    z-index: 10000;
    background-color: #4d4d53;
    border: 1px solid #171719;
    color: white;
    box-shadow: 2px 2px 8px #171719;
}
.maintenanceLabel {
    text-transform: none;
    font-style: italic;
}

.capitalize {
    text-transform: capitalize !important;
}

.select {
    --font-size: 10pt;
    --padding: 4px;
    --value-container-padding: 0 4px;
    --height: 26px;
    min-width: 110px;
    text-transform: uppercase;
    color: var(--text);
    cursor: pointer;
    --item-padding: 0px 7px;
    --item-hover-bg: var(--bg-select-item-hover);
    --chevron-height: 10px;
    --chevron-width: 17px;
    --clear-icon-width: 16px;
    --clear-select-width: 18px;
    --background: var(--bg-select);
    --list-background: var(--bg-select);
    --border: 1px solid var(--bg-select);
    --border-hover: 1px solid var(--bg-select);
    --item-color: var(--text)
}

select {
    background-color: var(--bg-select);
    color: var(--text);
    border: 2px solid var(--bg-select);
}

.mono {
    color: white;
    background-color: rgba(175, 184, 193, 0.2);
    padding: 0.2em 0.4em;
    border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
    font-size: 0.85em;
    padding-top: 5px;
}

code {
    background-color: #171717;
    padding: 2px 4px;
    border-radius: 4px;
}

	.confirm-dialog-control {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
        gap: 6px;

	}