@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

:root {
	--color1: #172838;
	--color2: #3C688B;
	--color3: #7597B4;
	--color4: #92BEC6;
	--color5: #D5DDE7;
	--colorText: #000000;
	--colorBackground: #eeeef0;
}

html {
	min-height:100%;
	position:relative;
}

body {
        font-family: 'Roboto', sans-serif;
        font-size: 14px;
        color: var(--colorText);
        text-align: left;
	background-color: var(--colorBackground);
	padding: 0px;
	margin: 0px;
	letter-spacing: 0.3px;
	height:100%;
	overflow-x: scroll;
}

p {
	text-align: justify;
}

ul {
	margin:0px;
	padding-left:30px;
}

td {
	vertical-align:top
}

table#container {
	background-color: #383943;
	position:relative;
	width:1000px;
	margin-left:auto;
	margin-right:auto;
	display:block;
	z-index: 1000;
	box-shadow:0px 3px 10px #000000;
	border:1px solid #000000;
}

h1 {
	margin: 0px;
	text-shadow: 1px 1px #222222;
	color: #ffffff;
}

h2 {
	margin: 0px;
	text-shadow: 1px 1px #222222;
}

h3 {
	margin: 0px;
	color: #999999;
}

a {
        color: inherit;
        font-weight: inherit;
        text-decoration: none;
}

a.block {
	display: block;
}

.centered {
	display: block;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.sortable-ghost {
	opacity: 0.4;
}

/* =========================== */
/* ========= SIDEBAR ========= */
/* =========================== */

.sidebar {
        background-color: var(--color1);
        color: white;
        width: 230px;
        display: block;
        margin: 0px;
        padding: 15px;

        min-height:1500px;

        position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    overflow:hidden;

        font-size: 14px;
        z-index:0;
}

.sidebarHeader {
        color: white;
        margin-top: 50px;
        font-weight: bold;
        display: block;
        font-size: 16px;
}

.sidebarTrackRow {
        display: block;
        width: 100%;
        color: var(--color5);
        font-size: 16px;
        text-align: left;
        margin-top: 15px;
        margin-bottom: 15px;
        line-height:30px;
        cursor:pointer;
        position:relative;
}

.sidebarTrackRow:hover {
        color: white;
}

.sidebarTrackRow:hover .sidebarRowTextIcon,
.sidebarTrackRow:hover .sidebarRowIcon {
        background-color:white;
}

.sidebarRowTextIcon {
        background-color:var(--color5);
        line-height:30px;
        width:30px;
        height:30px;
        border-radius:15px;
        display:inline-block;
        color:var(--color1);
        text-align:center;
        margin-right:10px;
        vertical-align:middle;
}

.sidebarRowIcon {
        width:30px;
        height:30px;
        line-height:30px;
        border-radius:15px;
        display:inline-block;
        text-align:center;
        margin-right:10px;
        vertical-align:middle;
}

.maskSettings {
        -webkit-mask-image: url('/images/ui/settings.png');
        mask-image: url('/images/ui/settings.png');
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        background-color:var(--color5);
}

.maskTeamMembers {
        -webkit-mask-image: url('/images/ui/members.png');
        mask-image: url('/images/ui/members.png');
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        background-color:var(--color5);
}

.sidebarPageLink {
        width:calc(100% + 30px);
        margin-left:-15px;
        display:block;
        padding:10px;
        padding-left:60px;
        font-size:12px;
}

.sidebarPageLink:hover {
        background-color:var(--color2);
}

.currentPage {
        padding-left:50px;

        background-color:var(--color2);
        border-left:10px solid var(--color4);
}

.disclosureArrow {
        transition: all 300ms ease-in-out;
        vertical-align:middle;
        position:absolute;
        right:0;
        top:4px;

        -webkit-mask-image: url('/images/ui/arrow.png');
        mask-image: url('/images/ui/arrow.png');
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        background-color:var(--color5);

        width:15px;
        height:22px;
}

.disclosureArrowRotated {
        transition: all 300ms ease-in-out;
        vertical-align:middle;
        position:absolute;
        right:0;
        top:4px;

        -webkit-mask-image: url('/images/ui/arrow.png');
        mask-image: url('/images/ui/arrow.png');
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        background-color:var(--color5);

        width:15px;
        height:22px;

        transform: rotate(90deg);
        color:red;
}

.disabled {
        opacity: 0.3;
}

.disabled:hover {
        opacity: 0.4;
}

.powerButton {
        display: block;
        background-color:var(--color5);
        background-image:url('/images/ui/power.png');
        background-size:9px 9px;
        background-repeat: no-repeat;
        background-position: center center;

        width:14px;
        height:14px;
        border-radius:7px;
        position:absolute;
        right:0;
        top:8px;
}

a.selected {
        color: var(--color4);
}

.footer {
        display: block;
        width: 100%;

        position: absolute;
        bottom: 0px;
        left: 0px;

        padding: inherit;
        color: var(--color5);
}

a.footerLink {
        letter-spacing: 1px;
}

a.footerLink:hover {
    color: white;
}

#pageContent {
        position:relative;
        left:280px;
        padding:10px;
        padding-top: 70px;
        padding-bottom: 70px;

        margin-top:70px;

        min-height:max(100vh - 70px, 1250px);
        height:100%;
        width:calc(100% - 280px);
}

.redBubble {
        position:absolute;
        width:16px;
        height:16px;
        border-radius:8px;
        left:20px;
        top:-5px;
        background-color:red;
        color:white;
        font-size:10px;
        text-align:center;
        line-height:16px;
}

/* =========================== */
/* ========== PAGES ========== */
/* =========================== */

.pageHeader:before {
	content: "";
}
.pageHeader {
        font-size: 60px;
        font-weight: 100;
        font-family: 'Helvetica Neue', Futura, 'Trebuchet MS', Arial, sans-serif;
        text-align: center;
        margin-top: 0px;
        margin-bottom: 25px;
        text-transform: uppercase;
        letter-spacing: 8px;
        display: block;
        color: var(--color3);
}

.assetSearchContainer {
        text-align: center;
        margin: 10px 0 20px;
}

.assetSearchInput {
        width: 50%;
        max-width: 400px;
        padding: 8px 12px;
        font-size: 16px;
        border: 1px solid var(--color3);
        border-radius: 4px;
}

.statusFilterContainer {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        margin: 10px 0;
}

.statusToggle {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 6px 12px;
        border: 1px solid var(--color3);
        border-radius: 20px;
        background-color: var(--color5);
        cursor: pointer;
        transition: background-color 0.2s;
}

.statusToggle .toggleState {
        padding: 2px 6px;
        border-radius: 10px;
        background-color: var(--color3);
        font-size: 12px;
        transition: background-color 0.2s, color 0.2s;
}

.statusToggle.active {
        background-color: var(--color2);
        color: white;
}

.statusToggle.active .toggleState {
        background-color: var(--color1);
        color: white;
}

.fixed {
  table-layout: fixed;
}

.trackTable {
/*	width: calc(100% - 50px);*/
	border-collapse: separate;
	border-spacing: 30px 0;
	table-layout: fixed;
	margin-bottom: 20px;
}

.trackTableHeader {
	text-align: left;
	background-color: var(--color2);
	color: var(--colorBackground);
	padding: 8px;
	border-radius: 10px 10px 0px 0px;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 14px;
	letter-spacing: 2px;
	min-width: 500px;
}

.trackTableColumn {
	border-style: solid;
	border-width: 0px 2px 2px 2px;
	border-color: var(--color2);
	padding: 5px;
}

.sprintHeader {
	color: var(--color3);
	margin-left: 15px;
	margin-top: 20px;
	margin-bottom: 5px;
	text-transform: uppercase;
	font-weight: bold;
	letter-spacing: 3px;
	display: block;
	font-size: 15px;
}

.itemRow {
	width: calc(100% - 22px);
	border: 1px solid var(--color5);
	padding: 8px;
	display: block;
	margin-top: -1px;
	font-weight: inherit;
}

.itemRow:hover {
	background-color: var(--color5);
}

.itemRowText {
	display:block;
	width: calc(100% - 50px);
	text-align: left;
}

.itemCard {
	width: calc((100% - 85px) / 3);
	min-width: 100px;
	height: 120px;
	border: 1px solid var(--color5);
	border-radius: 8px;
	margin: 5px;
	padding: 8px;
	display: inline-block;
	position: relative;
	font-weight: inherit;
	text-align: left;
	vertical-align: text-top;
}

.itemCard:hover {
	background-color: var(--color5);
}

.itemCardHeader {
	width: 100%;
	height: 30px;
	background-color: var(--color5);
	border-radius: 8px 8px 0px 0px;
	position: absolute;
	top: 0px;
	left: 0px;
	font-weight: bold;
	text-align: center;
	font-size: 10px;
	line-height: 30px;
	overflow: hidden;
	color: var(--color1);
}

.buildCard {
	width: calc((100% - 28px));
	min-width: 100px;
	min-height: 120px;
	border: 1px solid var(--color3);
	border-radius: 8px;
	margin: 5px;
	padding: 8px;
	display: inline-block;
	position: relative;
	font-weight: inherit;
	text-align: left;
	vertical-align: text-top;
}

.buildCardHeader {
	width: 100%;
	height: 30px;
	background-color: var(--color3);
	border-radius: 8px 8px 0px 0px;
	position: absolute;
	top: 0px;
	left: 0px;
	font-weight: bold;
	text-align: center;
	font-size: 14px;
	line-height: 30px;
/*	overflow: hidden;*/
	color: var(--colorBackground);
}

.keyword {
	background-color: var(--color1);
	color: var(--color5);
	padding-left: 5px;
	padding-right: 5px;
	margin-right: 3px;
	border-radius: 3px;
	cursor: pointer;
}

a.sectionButton {
	float:right;
	font-size: 14px;
	font-weight: bold;
	display: inline-block;
	width: 40px;
	text-align: right;
}

a.button {
	display: inline-block;
	background-color: var(--color5);
	border-radius: 3px;
	padding: 5px;
	margin-right: 5px;
	font-weight: inherit;
}

a.button:hover {
	background-color: var(--color3);
}

a.buttonSelected {
        background-color: var(--color4);
}

a.subtleButton {
        display:inline-block;
        background-color: var(--color5);
        border-radius:3px;
        padding:3px 6px;
        margin-right:5px;
        font-size:12px;
		color: var(--colorText);
}

a.subtleButton:hover {
        background-color: var(--color3);
}

a.NoteList {
        width: calc(100% - 22px);
	border: 1px solid var(--color5);
	padding: 8px;
	display: block;
	margin-top: -1px;
	font-weight: inherit;
	position:relative;
}

td.itemInfoTitle {
	background-color: var(--color2);
	color: var(--color5);
	text-align: right;
	padding: 8px;
	padding-right: 10px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 2px;
}

td.itemInfoField {
	text-align: left;
	padding: 8px;
	padding-right: 10px;
}

/* =========================== */
/* ========= CALENDAR ======== */
/* =========================== */

td.calendarCell {
	border:1px solid var(--colorBackground);
	background-color: var(--color5);
	height: 150px;
	padding: 5px;
}

.calendarHeader {
	font-size: 20px;
	font-weight: 200;
	font-family: 'Helvetica Neue', Futura, 'Trebuchet MS', Arial, sans-serif;
	text-align: left;
	text-transform: uppercase;
	letter-spacing: 3px;
	display: block;
	color: var(--color2);
	margin-bottom: 10px;
}

.calendarSubheader {
	font-size: 12px;
	font-weight: 200;
	font-family: 'Helvetica Neue', Futura, 'Trebuchet MS', Arial, sans-serif;
	text-align: left;
	text-transform: none;
	letter-spacing: 3px;
	display: block;
	color: var(--color5);
	margin-bottom: 10px;
}

.checkbubble:after {
	content: '\25EF';
}
.checkbubble:hover:after {
	content: '\25C9';
}
.checkedbubble:after {
	content: '\25C9';
}
.checkedbubble:hover:after {
	content: '\25EF';
}

/* =========================== */
/* ========== HESTIA ========= */
/* =========================== */

.hestiaBar {
	background-color: var(--color5);
	width: 260px;
	float: left;
	display: block;
	margin: 0px;
	margin-right: 10px;
	
	position:absolute;
    top:0;
    bottom:0;
    left:310px;
    right:0;
    overflow-y:scroll;
	overflow-x:hidden;
}

a.hestiaEntry {
	display: block;
	background-color: var(--color5);
	border: 1px solid var(--color2);
/*	height: 50px;*/
	width: calc(100%-2px);
	color: var(--colorText);
	padding: 5px;
	font-weight: inherit;
}

a.hestiaEntry:hover {
	background-color: var(--colorBackground);
}

.hestiaInput {
	display: block;
	position: absolute;
	left: 560px;
	bottom: 0;
	
	height: 225px;
	width: calc(100% - 570px);
	padding:5px;
	background-color: var(--color3);
}

.hestiaPanelTitle {
	text-transform: uppercase;
	color: var(--color2);
	font-weight: bold;
	margin-top: 10px;
	font-size: 12px;
}

a.prometheusRow {
	background-color:var(--color5);
	margin-bottom:5px;
	border-radius:10px;
	width:calc(100%-40px);
	padding:20px;
	display:block;
	font-weight: inherit;
}

a.prometheusRow:hover {
	background-color:var(--color3);
}

table.inputTable {
	width: 100%;
	text-align: left;
	border-collapse: collapse; 
}

tr.inputRow {
	border-bottom: 1px solid #ddd;
}

td.inputRowTitle {
	color: var(--color3);
	font-weight: bold;
	letter-spacing: 1px;
	display: block;
	font-size: 15px;
	text-align: right;
	margin-right: 5px;
	padding: 5px;
}

a.liveSearchResult {
	display:block;
	border:1px solid #000000;
	padding:5px;
	margin-top:-1px;
	font-weight:normal;
	background-color:var(--color5);
}
a.liveSearchResult:hover {
        background-color:var(--color4);
}

/* Tables for basic lists */
.listTable {
        border:1px solid #000000;
        border-radius:10px;
        box-shadow:2px 2px 3px #cccccc;

        margin-left:auto;
        margin-right:auto;

        width:calc(100% - 100px);
        min-height:30px;

        border-spacing:0;
        border-collapse:separate;
}

.listTable tr:first-child td:first-child { border-top-left-radius:10px; }
.listTable tr:first-child td:last-child { border-top-right-radius:10px; }
.listTable tr:last-child td:first-child { border-bottom-left-radius:10px; }
.listTable tr:last-child td:last-child { border-bottom-right-radius:10px; }

.listRow {
        background-color:#ffffff;
}

.listRow:hover {
        background-color:#dee6f4;
}

.listRow td:first-child {
        text-align:left;
        padding-left:20px;
}

.listCell {
        height:50px;
        vertical-align:middle;
        text-align:center;
        position:relative;
        border-top:1px solid #aeb0bf;
        background-color:transparent;
}

.listCell.status1 { border-left:8px solid #E44234; }
.listCell.status2 { border-left:8px solid #F69F19; }
.listCell.status3 { border-left:8px solid #ab226f; }
.listCell.status4 { border-left:8px solid #176CB9; }
.listCell.status5 { border-left:8px solid #1D8C79; }

.bountyStatus { display:inline-block; padding:2px 6px; border-radius:4px; font-weight:bold; }
.bountyStatus.enabled { background-color:#1D8C79; color:white; }
.bountyStatus.disabled { background-color:#E44234; color:white; }

.commentCell {
        height:auto;
        padding:10px 20px;
        text-align:left;
        background-color:#ffffff;
}

.autoCommentCell {
        height:auto;
        padding:5px 20px;
        font-size:12px;
        text-align:left;
        background-color:#ffffff;
        color:#636363;
}

.autoCommentCell .autoCommentAuthor {
        font-weight:bold;
        margin-right:5px;
}

.commentAsset {
        font-weight:bold;
}

.commentMeta {
        font-size:12px;
        color:#636363;
        margin-bottom:5px;
        display:flex;
        justify-content:space-between;
}

.commentMetaMain {
        flex:1;
}

.commentRow {
        display:flex;
        align-items:flex-start;
}

.commentAvatar {
        width:30px;
        height:30px;
        border-radius:15px;
        background-color:var(--color5);
        color:var(--color1);
        text-align:center;
        line-height:30px;
        font-weight:bold;
        margin-right:10px;
        flex-shrink:0;
}

.commentAvatar img {
        width:30px;
        height:30px;
        border-radius:15px;
        display:block;
}

.commentContent {
        flex:1;
}

.commentMeta .commentAuthor {
        font-weight:bold;
}

.commentTimestamp {
        color:#999999;
}

.autoCommentRow {
        display:flex;
        justify-content:space-between;
}

.autoCommentText {
        flex:1;
}

/* Asset file preview */
.assetFilePreviewLink {
        display:inline-block;
}
.assetFilePreview {
        max-width:600px;
        max-height:600px;
        display:block;
        margin-bottom:10px;
}

.assetFilePlaceholder {
        width:200px;
        height:200px;
        display:flex;
        align-items:center;
        justify-content:center;
        background-color:var(--color5);
        color:var(--color3);
        font-weight:bold;
        margin-bottom:10px;
        border:1px solid var(--color3);
        border-radius:10px;
        font-size:48px;
        cursor:pointer;
}

/* Asset file grid on asset page */
.assetFileGrid {
        display:flex;
        flex-wrap:wrap;
        gap:10px;
        margin-left:15px;
}

.assetFileGridItem {
        width:120px;
        text-align:center;
        cursor:pointer;
}

.assetFileThumb {
        width:100px;
        height:100px;
        object-fit:cover;
        display:block;
        margin:0 auto 5px;
        border:1px solid #aeb0bf;
        border-radius:4px;
        background-color:#ffffff;
}

.assetFileIcon {
        width:100px;
        height:100px;
        display:flex;
        align-items:center;
        justify-content:center;
        border:1px solid #aeb0bf;
        border-radius:4px;
        margin:0 auto 5px;
        background-color:var(--color5);
        color:var(--color3);
        font-weight:bold;
}

.assetFileName {
        font-size:12px;
        word-wrap:break-word;
}

.assetFileTypeHeader {
        margin-left:15px;
        margin-top:15px;
        margin-bottom:5px;
        font-weight:bold;
}

.recentAssetFile {
        background-color:#f5f5f5;
        border-radius:6px;
        padding:8px 6px;
        box-shadow:0 1px 2px rgba(0,0,0,0.1);
        transition:transform 0.15s ease, box-shadow 0.15s ease;
}

.recentAssetFile:focus,
.recentAssetFile:hover {
        outline:none;
        transform:translateY(-2px);
        box-shadow:0 3px 6px rgba(0,0,0,0.15);
}

.recentFileTitle {
        font-weight:bold;
        font-size:12px;
        margin-bottom:2px;
        color:#1f2244;
}

.recentFileAsset {
        font-size:11px;
        color:#4e536d;
        margin-bottom:2px;
}

.recentFileTimestamp {
        font-size:10px;
        color:#7a7f99;
}

.recentFilesEmptyState {
        margin-left:15px;
        margin-top:20px;
        color:#4e536d;
}

.recentShowMoreButton {
        display:block;
        margin:20px auto;
        padding:8px 16px;
        background-color:var(--color5);
        border:1px solid var(--color3);
        border-radius:4px;
        font-size:12px;
        cursor:pointer;
        color:var(--colorText);
}

.recentShowMoreButton:hover {
        background-color:var(--color3);
        color:#ffffff;
}

.recentShowMoreButton:disabled {
        opacity:0.6;
        cursor:default;
}

/* Drag and drop file upload */
.file-drop-area {
        border:2px dashed var(--color3);
        padding:100px;
        text-align:center;
        cursor:pointer;
        background-color:var(--color5);
        color:var(--colorText);
        width:100%;
        box-sizing:border-box;
        border-radius:4px;
}

.file-drop-area.dragover {
        background-color:var(--color4);
}

/* Export popup */
#exportPopupOverlay {
        position:fixed;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background:rgba(0,0,0,0.5);
        display:none;
        align-items:center;
        justify-content:center;
        z-index:2000;
}

#exportPopup {
        background:var(--color5);
        padding:30px;
        border-radius:6px;
        box-shadow:0px 2px 10px rgba(0,0,0,0.5);
        min-width:300px;
        max-width:90%;
}

#exportPopup h2 {
        margin-top:0;
        margin-bottom:20px;
        font-size:18px;
        color:var(--color1);
}

#exportPopup .optionGroup {
        margin-bottom:15px;
}

#exportPopup .optionGroupHeader {
        margin-bottom:5px;
        font-weight:bold;
        color:var(--color1);
}

#exportPopup label {
        margin-right:15px;
}

#exportPopup input[type="number"] {
        width:60px;
        margin-left:5px;
}

#exportPopup .buttonRow {
        text-align:right;
        margin-top:20px;
}

#exportPopup .buttonRow input[type="button"],
#exportPopup .buttonRow input[type="submit"] {
        background:var(--color2);
        color:#fff;
        border:none;
        border-radius:3px;
        padding:6px 12px;
        font-size:12px;
        cursor:pointer;
        margin-left:10px;
}

#exportPopup .buttonRow input[type="button"]:hover,
#exportPopup .buttonRow input[type="submit"]:hover {
        background:var(--color3);
}