:root {
	/*planned session colors*/
	--bg-run: rgb(240, 128, 128);
	--bg-swim: rgb(135, 206, 250);
	--bg-bike: rgb(142, 187, 142);
	--bg-str: rgb(192, 49, 227);
	--bg-tran: rgb(198, 198, 198);

	/*completed session colors*/
	--bg-run-completed: rgba(240, 128, 128, 0.8);
	--bg-swim-completed: rgba(135, 206, 250, 0.8);
	--bg-bike-completed: rgba(142, 187, 142, 0.8);
	--bg-str-completed: rgba(192, 49, 227, 0.8);
	--bg-tran-completed: rgb(175, 175, 175, 0.8);
}

/*CalendarComponent*/
.triq-calendar {
	max-height: 100%;
	display: grid;
	grid-template-columns: 8fr;
}
.triq-calendar-scheduler {
	grid-row: 1;
}
.triq-calendar-charts {
	grid-row: 2;
}
.MyDateEdit .dxbl-calendar-content table tr:hover {
	background-color: lightgray;
}
.MyDateEdit .dxbl-calendar-day:not(.dxbl-calendar-day-disabled):hover:before {
	opacity:0;
}
.triq-calendar-charts {
	padding-bottom: 12px;
}
.triq-calendar-charts .dxbs-sc-tb-wrapper {
	padding: 12px;
}
* {
	box-sizing: border-box;
	border-collapse: collapse;
	margin: 0;
	padding: 0;
}
body {
	font-family: Arial, sans-serif;
	padding: 20px;
}
.calendar-container {
	display: grid;
	grid-template-columns: repeat(7, 1fr) 200px; /* 7 days + 1 summary column */
	grid-gap: 1px; /* No padding between the cells */
	width: 100%;
}
.calendar-header {
	display: contents;
}
.day-header, .week-summary-header {
	padding: 5px;
	background-color: #f4f4f4;
	box-shadow:0 0 0 1px #ddd;
}
.day-cell {
	box-shadow:0 0 0 1px #ddd;
	min-width: 160px ;
	min-height: 150px;
	display: flex;
	flex-direction: column;
	position: relative;
	padding-top: 4px;
	overflow: visible;
}
.day-date {
	padding: 5px;
}
.week-summary {
	box-shadow:0 0 0 1px #ddd;
	background-color: #f9f9f9;
	min-height: 150px;
}
.total-volumes{
	display:flex;
	flex-direction:column;
}
.total-value{
	font-weight:bold;
}
.today::before {
	/* border-top: 3px solid #fe7109; */
	content: "";
	background-color: #fe7109;
	position: absolute;
	height: 4px;
	width: 100%;
	top: 0;
	left: 0;
}
.other-month {
	background-color: #dbdbdb;
}
.sel-week {
	background-color: #f6edff;
}
.other-month.sel-week{
	background-color: #c8bed1;
}
.week-summary.sel-week {
	background-color: #ECE6F7;
}

/* Responsive Layout */
@media (max-width: 768px) {
	.calendar-container {
		grid-template-columns: repeat(7, 1fr) 150px;
		/* Adjust summary column size on smaller screens */
	}
}
@media (max-width: 480px) {
	.calendar-container {
		grid-template-columns: repeat(7, 1fr) 120px;
		/* Further adjust on smaller screens */
	}
}
.day-header, .week-summary-header, .day-cell, .week-summary {
	padding: 5px;
}

/*SessionItemComponent*/
.items {
	padding: 5px;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 5px;
}
.item {
	padding: 8px;
	border-radius: 4px;
	max-height: 73px;
	min-width: 150px;
	max-width: 200px;
	position: relative;
}
.fixed-workout-badge {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: white;
	color: black;
	border-width: 1px;
	border-color: black;
	border-style: solid;
	font-weight: bolder;
	font-size: 12px;
	bottom: 0;
	right: 0;
	width: 18px;
	height: 18px;
	transform: translate(50%);
	border-radius: calc(infinity * 1px);
}
.item-event{
	cursor: pointer;
}
.planned {
	order: 0;
}
.matched {
	order: 1;
}
.matched-group {
	display: flex;
	flex-direction: column;
	margin-bottom: -5px;
	position: relative;
}
.unplanned {
	order: 2;
}

.link-symbol {
	position: absolute;
	left: 70%;
	display: flex;
	flex-direction: row;
	top: -15%;
	font-size: 16px;
}
.Transition{
	background-color: var(--bg-tran) !important;
}
.Running{
	background-color: var(--bg-run) !important;
}
.Swimming{
	background-color: var(--bg-swim) !important;
}
.Cycling{
	background-color: var(--bg-bike) !important;
}
.StrengthTraining{
	background-color: var(--bg-str) !important;
}

.OtherSports {
	background-color: var(--bg-tran) !important;
}

.Running.completed{
	background-color: #c6c6c6 !important;
	border: 6px solid var(--bg-run-completed);
}
.Swimming.completed{
	background-color: #c6c6c6 !important;
	border: 6px solid var(--bg-swim-completed);
}
.Cycling.completed{
	background-color: #c6c6c6 !important;
	border: 6px solid var(--bg-bike-completed);
}
.StrengthTraining.completed{
	background-color: #c6c6c6 !important;
	border: 6px solid var(--bg-str-completed);
}
.OtherSports.completed {
	background-color: var(--bg-tran) !important;
}

.isSkipped {
	background: linear-gradient(to right top, transparent 47.75%, rgb(157,39,81) 49.5%, rgb(157,39,81) 50.5%, transparent 52.25%);
}
/**
.Transition.completed.tri{
	background: linear-gradient(to right, #c6c6c6 80%, var(--fade-color) 100%);
}
.Running.completed.tri{
	background: linear-gradient(to right, #c6c6c6 80%, var(--fade-color) 100%);
}
.Swimming.completed.tri{
	background: linear-gradient(to right, #c6c6c6 80%, var(--fade-color) 100%);
}
.Cycling.completed.tri{
	background: linear-gradient(to right, #c6c6c6 80%, var(--fade-color) 100%);
}
*/
.tri {
	--fade-color: rgb(0, 249, 233, 0.4);
	margin-bottom: -5px;
	border-bottom-right-radius: 0;
	border-top-right-radius: 0;
}

.session-header {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.session-title {
	font-weight: bold;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.delete-button{
	line-height: 0;
}

.triq-name{
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin-right: 10px;
}
.triq-marker{
	white-space: nowrap;
}
.triq-activity{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.session-infos{
	display: flex;
	flex-direction: row;
	height: auto;
	font-size: 10px;
}
.session-info-box{
	background-color: white;
	overflow: hidden;
	white-space: nowrap;
	margin: 2px;
	padding: 2px 5px 2px 5px;
	border-radius: 5px;
}

/*SessionToolTip*/

/*.sessionTooltip {
	min-width: 240px;
	background-color: mediumvioletred;
	position: absolute;
	top: 80px;
	left: -20px;
	display: flex;
	flex-direction: column;
	z-index: 100;
	box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.3);
	border: 1px solid rgba(0, 0, 0, 0.3);
}*/
.tooltip-header{
	 padding: 20px;
	 display: flex;
	 flex-direction: row;
	 justify-content: space-between;
	 align-items: center;
 }
dxbl-window-dialog{
	max-height:1000px;
}
.dxbl-popup-header {
}
.tooltip-header h5 {
	margin-bottom: 0;
}


.tooltip-content{
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	width:100%;
}

.tooltip-name {
	display: block;
	cursor: pointer;
	white-space: nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

.tooltip-values {
	display:flex;
	gap:20px;
	margin-top:5px;
}

.tooltip-steps{
	margin-top:10px;
	border-top: 2px solid gray;
	padding-top: 10px;
	display:flex;
	flex-direction:column;
	overflow:hidden;
	white-space:nowrap;
}
.tooltip-table {
	display:flex;
	flex-direction:column;
}


.no-steps {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

tr, th, td{
	padding: 2px 6px 2px 6px;
	border: 1px solid black;
}

th{
	background-color:lightgray;
}
td.tooltip-non-bordered-cell{
	border-top:	1px solid transparent !important;
	border-bottom: 0px solid transparent !important;
}
td.tooltip-bordered-cell {
	padding: 0px;
}
tr.tooltip-bordered-cell {
	border: 2px solid black !important;
}

.closeButton{
	background: none;
	border: none;
}
.detailButton{
	padding-top: 5px;
	background-color: #fff;
	border: 0px;
	border-bottom:1px solid;
}