@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap");

:root {
   /* COLOURS */
   --main_colour: #464777;
	--main_colour_hover: #5c5d96;
   --light_colour: #ECECF1;
   --light_colour_hover: #dfdfec;

   --grey_1: #F7F7F7;
   --grey_2: #F2F1EF;
   --grey_3: #E5E5E5;
   --grey_4: #B9B9B9;
   --grey_5: #4C4C4C;

   --white: #FFFFFF;
   --red: #F24E4E;
   --light_red: #FEF1F1;
   --green: #75D722;
   --light_green: #ebffd9;
	
	--icon: var(--main_colour);
   --icon_grey: var(--grey_5);
   --icon_green: var(--green);
   --icon_amber: #FF8B2B;
   --icon_red: var(--red);

   --font_family: 'Inter';
   --font_main_colour: var(--grey_5);
   --font_light_colour: var(--grey_4);
	--font_size_small: .75em;
	--font_size_regular: 1em;
	--font_size_medium: 1.25em;
	--font_size_large: 1.5em;
	--font_size_extralarge: 2.5em;

	--spacing_small: 4px;
	--spacing_medium: 8px;
	--spacing_large: 16px;
	--spacing_extralarge: 32px;

	--border_radius: 10px;
	--border_thin: 1px solid var(--grey_3);
	--border_thick: 2px solid var(--grey_3);

	--box-shadow: 0px 0px 20px #00000025; 
}

::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

::-webkit-scrollbar-thumb {
	background-color: var(--grey_4);
	border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
	background-color: #afafaf;
}

::-webkit-scrollbar-track {
	display: none;
}

body {
	background-color: var(--grey_1);
	font-family: var(--font_family);
	font-weight: bold;
	font-size: var(--font_size_regular);
	color: var(--font_main_colour);
	margin: 0;
	padding: var(--spacing_large) var(--spacing_extralarge);
}

a {
	text-decoration: none;
}

a:hover {
   text-decoration:none;
}

/* HEADER */
#header_outer {
	display: flex;
	justify-content: space-between;
	align-content: center;
	align-items: center;
}

#header_logo_outer {
	display: flex;
	align-items: center;
}

#header_logo {
	width: 175px;
}

#version_logo {
	margin-top: 10px;
	margin-left: var(--spacing_large);
	padding: var(--spacing_small) var(--spacing_medium);
	background-color: #CB2E72;
	color: #FFFFFF;
	font-size: var(--font_size_small);
	border-top-left-radius: var(--border_radius);
	border-bottom-left-radius: var(--border_radius);
	cursor: pointer;
}

#version_logo:hover {
	background-color: #bd2265;
}

#feedback_logo {
	margin-top: 10px;
	padding: var(--spacing_small) var(--spacing_medium);
	color: #CB2E72;
	background-color: #F2D1E1;
	font-weight: normal;
	font-size: var(--font_size_small);
	border-top-right-radius: var(--border_radius);
	border-bottom-right-radius: var(--border_radius);
}

#feedback_logo:hover {
	background-color: #f0c8db;
}

#header_user_menu_button {
	border: none;
	background-color: unset;
}

.user_avatar {
	pointer-events: none;
	width: 40px;
	border-radius: 25px;
}

.user_menu {
	min-width: 300px !important;
	flex-direction: column;
	align-items: flex-start;
}

.user_menu.overlay_open {
	display: flex;
}

.menu_user_outer {
	display: flex;
	align-items: center;
	margin-bottom: var(--spacing_medium);
}

.menu_name_outer {
	margin-left: var(--spacing_medium);
}

.menu_user_email {
	font-weight: normal;
	font-size: var(--font_size_small);
	color: var(--font_light_colour);
	margin-top: 1px;
}

.user_menu_button {
	margin: var(--spacing_small) 0px !important;
	padding: var(--spacing_medium) var(--spacing_large) !important;
	width: 100%;
	display: flex;
}

.user_menu_button:hover {
	background-color: var(--grey_1) !important;
}

.user_menu_seperator {
	padding-top: var(--spacing_small);
	border-bottom: var(--border_thin);
	margin-bottom: var(--spacing_small);
	width: 100%;
}

.menu_psoda_button {
	color: #F58836;
	background-color: #FEF1E7 !important;
	justify-content: space-between;
}

.user_menu_button.menu_psoda_button:hover {
	background-color: #ffebdd !important;
}

.menu_psoda_button .psoda_icon svg use {
	fill: #F58836 !important;
}

.menu_line_manager_outer {
	padding: var(--spacing_medium) var(--spacing_large);
	background-color: var(--grey_1);
	border-radius: var(--border_radius);
	width: calc(100% - (var(--spacing_large) * 2));
	margin-top: var(--spacing_small);
}

.menu_line_manager_header {
	margin-bottom: var(--spacing_medium);
}

.menu_user_name {
	max-width: 300px;
}

.menu_line_manager_outer .menu_user_name {
	font-weight: normal;
}

.menu_line_manager_outer .menu_user_email:hover {
	text-decoration: underline;
}

.user_menu_button .checkbox_input_outer {
	margin-left: 120px;
}

/* LIGHTBOX */
#lightbox {
	position: fixed;
	z-index: 9;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: black;
	opacity: .5;
}

#lightbox.lightbox_off {
	display: none;
}

/* PREFERENCES */ 
#preferences_outer {
	display: none;
}

#preferences_outer.preferences_open {
	display: contents;
}

#preferences_lightbox {
	position: fixed;
	z-index: 9;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: black;
	opacity: .5;
}

#preferences_overlay_outer {
	position: fixed;
	z-index: 10;
	height: calc(100vh - 40px - (var(--spacing_large) * 2));
	width: 400px;
	background-color: var(--white);
	box-shadow: var(--box-shadow);
	border-radius: var(--border_radius);
	right: 20px;
	top: 20px;
	padding: var(--spacing_large);
}

/* ADD BAR */
.add_bar_outer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--spacing_medium);
	background-color: var(--white);
	border-radius: var(--border_radius);
	margin-top: var(--spacing_large);
	min-height: 42px;
}

.add_bar_outer_disabled {
	pointer-events: none;
}

.add_bar_outer_disabled .add_bar_outer_left {
	opacity: .5;
}

.add_bar_outer_left, .add_bar_outer_right {
	display: flex;
}

.add_bar_outer_right {
	align-items: center;
}

.add_bar_dropdown_outer {
	margin-right: calc(8px + (var(--spacing_small) * 2));
}

.add_bar_dropdown_input {
	width: 415px;
	padding-right: 70px !important;
	margin-top: 0 !important;
}

.add_dropdown_overlay {
	width: 465px;
	max-height: 400px;
	overflow-y: auto;
	overflow-x: hidden;
}

.add_bar_dropdown_input_clear {
	opacity: 0;
	pointer-events: none;
	cursor: pointer;
	z-index: 1;
	margin-left: -65px !important;
	margin-right: calc(var(--spacing_small) - (var(--spacing_small) * 2)) !important;
}

.add_bar_dropdown_input_clear.add_bar_dropdown_input_clear_visible {
	opacity: 1;
	pointer-events: all;
}

.add_bar_dropdown_input_caret {
	cursor: pointer;
	z-index: 1;
}

.add_dropdown_header_outer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--spacing_medium);
}

.add_dropdown_select_header_outer {
	display: flex;
	align-items: center;
}

#add_dropdown_select_header_checkbox {
	display: none;
	width: 16px;
	height: 16px;
	margin-right: var(--spacing_medium);
	margin-left: var(--spacing_medium);
}

.add_dropdown_select #add_dropdown_select_header_checkbox {
	display: flex;
}

.task_option_outer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--spacing_medium);
	border-top-right-radius: var(--border_radius);
	border-bottom-right-radius: var(--border_radius);
	cursor: pointer;
	/* margin-bottom: var(--spacing_small); */
	border: none;
	background-color: unset;
	width: 100%;
	padding-left: 20px;
	margin-left: 10px;
	border-left: var(--border_thick);
}

.add_dropdown_adhoc_outer .task_option_outer {
	border-radius: var(--border_radius);
	padding-left: var(--spacing_medium);
	margin-left: 0px;
	border-left: none;
}

.task_option_outer:hover {
	background-color: var(--grey_1);
}

.task_option_outer div {
	pointer-events: none;
}

.task_option_selected {
	background-color: var(--light_colour);
}

.task_option_left_outer {
	display: flex;
	align-items: center;
	max-width: calc(100% - 150px);
}

.task_option_checkbox {
	display: none;
	width: 16px;
	height: 16px;
	margin-right: var(--spacing_medium);
}

.add_dropdown_select .task_option_checkbox {
	display: flex;
}

.task_option_is_existing .task_option_checkbox {
	pointer-events: none;
	opacity: 0;
}

.add_dropdown_select .task_option_is_existing {
	pointer-events: none;
	cursor: default;
	opacity: .5;
}

.task_option_name_outer {
	text-align: left;
}

.task_option_reference_outer {
	display: flex;
	align-items: center;
	margin-bottom: var(--spacing_small);
}

.task_option_is_adhoc .task_option_reference_outer {
	display: none;
}

.task_option_reference {
	font-size: var(--font_size_small);
}

.task_option_existing_text {
	font-size: var(--font_size_small);
	color: var(--font_light_colour);
}

.task_option_existing_outer {
	display: none;
}

.task_option_is_existing .task_option_existing_outer {
	display: flex;
	align-items: center;
	margin-left: var(--spacing_medium);
	width: 175px;
	justify-content: flex-end;
}

.task_option_existing_dot {
	width: 4px;
	height: 4px;
	background-color: var(--font_light_colour);
	border-radius: 4px;
	margin-right: var(--spacing_medium);
}

.task_option_existing_icon {
	margin-bottom: -3px;
}

.task_option_name {
	/* font-weight: bold; */
}

.task_option_parent_outer {
	display: flex;
	align-items: center;
	/* max-width: 200px; */
	margin-top: var(--spacing_large);
}

.task_option_existing_text {
	font-size: var(--font_size_small);
	color: var(--font_light_colour);
	margin-left: var(--spacing_small);
}

.task_option_existing_icon.psoda_icon.grey_font_icon use {
	fill: var(--font_light_colour) !important;
}

.task_option_parent_name {
	font-size: var(--font_size_small);
	font-weight: normal;
	margin-left: var(--spacing_small);
	margin-bottom: 5px;
	/* overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	max-width: 200px; */
	text-align: left;
}

.add_dropdown_adhoc_outer {
	margin-top: var(--spacing_large);
}

.add_dropdown_adhoc_header {
	margin-bottom: var(--spacing_medium);
}

.task_option_is_adhoc .task_option_parent_name {
	color: var(--font_light_colour);
}

.task_option_is_adhoc .task_option_parent_outer .psoda_icon.grey_font_icon use {
	fill: var(--font_light_colour) !important;
}

.add_dropdown_no_tasks_outer {
	text-align: center;
	padding: var(--spacing_large) var(--spacing_extralarge);
}

.add_dropdown_no_tasks_text {
	margin: var(--spacing_medium) 0;
}

.add_dropdown_no_tasks_desc {
	font-weight: normal;
	font-size: var(--font_size_small);
}

#add_bar_info {
	display: none;
	margin-left: var(--spacing_medium);
}

#add_bar_info.add_bar_info_visible {
	display: flex;
}

.add_bar_location_selected {
	display: none;
	margin: 0 var(--spacing_large);
	margin-top: 5px;
	align-items: center;
}

/* .add_bar_stopwatch_paused .add_bar_location_selected {
	margin-top: 0px;
} */

.add_bar_location_button {
	/* turning off location button as functionality for asset selector not added in this version */
	pointer-events: none;
	cursor: default;
	margin-right: calc(0px - var(--spacing_small)) !important;
}

.add_bar_location_button .psoda_icon:last-child {
	display: none;
}

.add_bar_dropdown_selected ~ .add_bar_location_button {
	display: none;
}

.add_bar_dropdown_selected ~ .add_bar_location_selected {
	display: flex;
	margin-right: var(--spacing_small);
}

.add_bar_dropdown_selected .add_bar_dropdown_input {
	pointer-events: none;
	color: var(--main_colour);
	background-color: var(--light_colour);
	white-space: nowrap;
	text-overflow: ellipsis;
}

.add_time_menu {
	width: 488px;
}

.add_time_menu_outer_top {
	display: flex;
	align-items: center;
	margin-bottom: var(--spacing_large);
}

.add_time_menu_outer_top .day_dropdown {
	width: 300px;
	margin-right: var(--spacing_large);
}

.add_time_menu_outer_top .day_dropdown select {
	font-size: var(--font_size_regular);
}

.add_time_menu_outer_top .timeentry_time_dash {
	margin-top: 15px;
}

.duration_input {
	margin-left: var(--spacing_medium);
}

/* TIMESHEET HEADER */
.timesheet_page_content_outer {
	margin-top: var(--spacing_large);
}

.timesheet_header_outer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--spacing_medium);
	background-color: var(--white);
	border-top-right-radius: var(--border_radius);
	border-top-left-radius: var(--border_radius);
	height: 40px;
}

.timesheet_header_left_outer {
	flex-grow: 1;
	flex-basis: 0;
}

.timesheet_header_right_outer {
	flex-grow: 1;
	flex-basis: 0;
	display: flex;
	justify-content: flex-end;
}

/* WORKFLOW */ 
.workflow_menu {
	min-width: 300px !important;
}

.workflow_outer {
	display: flex;
	align-items: center;
}

.workflow_bars {
	margin-top: var(--spacing_medium);
	margin-bottom: var(--spacing_medium);
	position: relative;
}

.workflow_bar_underlay {
	height: 8px;
	width: calc(100% - calc(var(--spacing_medium) * 2));
	position: absolute;
	top: 15px;
	left: var(--spacing_medium);
	background-color: var(--grey_2);
}

.workflow_bars .button_outer {
	position: relative;
	margin-left: var(--spacing_medium);
	margin-right: var(--spacing_medium);
}

.workflow_bars .current_state_button {
	pointer-events: none;
}

.threedot_menu_outer {
	display: flex;
	flex-direction: column;
}

.threedot_menu_outer .button_outer {
	text-align: left;
	margin: var(--spacing_small) 0;
}

.threedot_menu_outer .button_outer:first-child {
	margin-top: 0;
}

.threedot_menu_outer .button_outer:last-child {
	margin-bottom: 0;
}

.request_transition_menu {
	width: 400px;
}

.workflow_note_reason_outer {
	padding: var(--spacing_medium) var(--spacing_medium);
	margin-bottom: var(--spacing_medium);
	border-radius: var(--border_radius);
}

.overlay_header + .workflow_note_reason_outer {
	margin-top: var(--spacing_medium);
}

.workflow_note_reason_header {
	margin-bottom: var(--spacing_medium);
}

#workflow_reason_outer .workflow_note_reason_header {
	color: rgba(234,166,13,1);
}

#workflow_note_outer .workflow_note_reason_header {
	color: rgba(0, 164, 112);
}

#workflow_reason_outer {
	background-color: rgba(234, 166, 13, 0.1);
}

#workflow_note_outer {
	background-color: rgba(0, 164, 112, 0.1);
}

/* TIMESHEET LIST */
.timesheets_list_overlay {
	width: 250px;
}

.timesheets_list_dates_outer {
	display: flex;
	flex-direction: column;
	max-height: 300px;
	overflow: auto;
	margin-bottom: var(--spacing_medium);
	align-items: center;
}

.current_timesheet_button {
	display: flex;
	margin: auto !important;
}

.this_timesheet_date {
	text-align: center;
	color: var(--main_colour);
	padding: var(--spacing_small) var(--spacing_medium);
}

.this_timesheet_date.timesheet_list_date:hover {
	background-color: unset;
}

.this_timesheet_date_icon {
	margin-right: var(--spacing_medium);
}

.timesheet_list_date:hover {
	background-color: var(--grey_2);
}

/* OVERLAYS */
.overlay_outer {
	display: none;
	position: absolute;
	background-color: var(--white);
	z-index: 5;
	box-shadow: var(--box-shadow);
	padding: var(--spacing_large);
	border-radius: var(--border_radius);
	min-width: 200px;
}

.overlay_open {
	display: block;
}

/* ICONS */
.psoda_icon {
   vertical-align: middle;
}

.psoda_icon svg {
	pointer-events: none;
}

.psoda_icon use, .psoda_icon svg g, .psoda_icon svg path, .psoda_icon svg circle, .psoda_icon svg rect {
   fill: var(--icon) !important;
}

.psoda_icon.grey_font_icon use, .psoda_icon.grey_font_icon svg g, .psoda_icon.grey_font_icon svg path, .psoda_icon.grey_font_icon svg circle, .psoda_icon.grey_font_icon svg rect {
   fill: var(--icon_grey) !important;
}

.psoda_icon.white_font_icon use,.psoda_icon.white_font_icon svg g, .psoda_icon.white_font_icon svg path, .psoda_icon.white_font_icon svg circle, .psoda_icon.white_font_icon svg rect {
   fill: #ffffff !important;
}

.psoda_icon.red_font_icon use,.psoda_icon.red_font_icon svg g, .psoda_icon.red_font_icon svg path, .psoda_icon.red_font_icon svg circle, .psoda_icon.red_font_icon svg rect {
   fill: var(--icon_red) !important;
}

.psoda_icon.amber_font_icon use,.psoda_icon.amber_font_icon svg g, .psoda_icon.amber_font_icon svg path, .psoda_icon.amber_font_icon svg circle, .psoda_icon.amber_font_icon svg rect {
   fill: var(--icon_amber) !important;
}

.psoda_icon.green_font_icon use,.psoda_icon.green_font_icon svg g, .psoda_icon.green_font_icon svg path, .psoda_icon.green_font_icon svg circle, .psoda_icon.green_font_icon svg rect {
   fill: var(--icon_green) !important;
}

/* INPUTS */
input, button, textarea {
   font-family: var(--font_family);
	color: var(--font_main_colour);
	font-size: var(--font_size_regular);
}

button {
	cursor: pointer;
}

.text_input {
	background-color: var(--grey_1);
	padding: var(--spacing_medium) var(--spacing_large);
	border: none;
	border-radius: var(--border_radius);
	font-weight: bold;
	resize: vertical;
	min-height: 20px;
}

.text_input:disabled {
	pointer-events: none;
}

::placeholder {
	color: var(--font_light_colour);
}

.button_outer {
	font-weight: bold;
	border: none;
	border-radius: 10px;
	margin-left: var(--spacing_small);
	margin-right: var(--spacing_small);
}

.button_outer span {
	pointer-events: none;
}

.button_outer:first-child {
	margin-left: 0px;
}

.button_outer:last-child {
	margin-right: 0px;
}

.button_padding_0 {
	padding: 0;
}

.button_padding_1 {
	padding: var(--spacing_small) var(--spacing_medium);
}

.button_padding_2 {
	padding: var(--spacing_medium) var(--spacing_large);
}

.button_text {
	margin-left: var(--spacing_medium);
	margin-right: var(--spacing_medium);
}

.button_text:first-child {
	margin-left: 0px;
}

.button_text:last-child {
	margin-right: 0px;
}

.button_style_1 {
	background-color: var(--main_colour);
	color: var(--white);
}

.button_style_1:hover {
	background-color: var(--main_colour_hover);
}

.button_style_1:disabled {
	background-color: var(--grey_3);
	pointer-events: none;
}

.button_style_1 .psoda_icon svg use {
	fill: var(--white) !important;
} 

.button_style_1:disabled .psoda_icon svg use {
	fill: var(--white) !important;
} 

.button_style_2 {
	background-color: var(--light_colour);
	color: var(--main_colour);
}

.button_style_2:hover {
	background-color: var(--light_colour_hover);
}

.button_style_2:disabled {
	color: var(--grey_4);
	background-color: var(--grey_3);
	pointer-events: none;
}

.button_style_2:disabled .psoda_icon svg use {
	fill: var(--grey_3) !important;
} 

.button_style_3 {
	background-color: unset;
	border-color: var(--main_colour);
	border: 1.5px solid;
	color: var(--main_colour);
}

.button_style_3:hover {
	background-color: var(--light_colour);
}

.button_style_3:disabled {
	border-color: var(--grey_4);
	color: var(--font_light_colour);
	pointer-events: none;
}

.button_style_3:disabled .psoda_icon svg use {
	fill: var(--font_light_colour) !important;
} 

.button_style_4 {
	background-color: unset;
}

.button_style_4:hover {
	background-color: var(--grey_2);
}

.button_style_4:disabled {
	color: var(--font_light_colour);
	pointer-events: none;
}

.button_style_4:disabled .psoda_icon svg use {
	fill: var(--font_light_colour) !important;
} 

.button_style_5 {
	background-color: unset;
	color: var(--main_colour);
}

.button_style_5 .psoda_icon svg use {
	fill: var(--main_colour) !important;
}

.button_style_5:hover {
	background-color: var(--light_colour);
}

.button_style_5:disabled {
	color: var(--light_colour);
	pointer-events: none;
}

.button_style_5:disabled .psoda_icon svg use {
	fill: var(--light_colour) !important;
} 

.button_loading {
	position: relative;
	pointer-events: none;
}

.button_outer .circle_loader {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
}

.button_style_1 .circle_loader {
	border-color: var(--white) var(--white) var(--white) transparent;
}

.button_style_2 .circle_loader, .button_style_3 .circle_loader, .button_style_5 .circle_loader {
	border-color: var(--main_colour) var(--main_colour) var(--main_colour) transparent;
}

.button_style_4 .circle_loader {
	border-color: var(--grey_5) var(--grey_5) var(--grey_5) transparent;
}

.delete_button .circle_loader, .comment_delete_button .circle_loader {
	border-color: var(--red) var(--red) var(--red) transparent;
}

.button_loading .button_text {
	margin-right: 0px;
}

.button_style_1.button_loading .button_text {
	color: var(--main_colour);
}

.button_style_1.button_loading .psoda_icon svg use {
	fill: var(--main_colour) !important;
}

.button_style_2.button_loading .button_text {
	color: var(--light_colour);
}

.button_style_2.button_loading .psoda_icon svg use {
	fill: var(--light_colour) !important;
}

.button_style_3.button_loading .button_text, .button_style_4.button_loading .button_text, .button_style_5.button_loading .button_text {
	color: transparent;
}

.button_style_3.button_loading .psoda_icon svg use, .button_style_4.button_loading .psoda_icon svg use, .button_style_5.button_loading .psoda_icon svg use {
	fill: transparent !important;
}

.info_outer {
	display: flex;
	align-items: center;
}

.info_text {
	font-size: var(--font_size_small);
	color: var(--font_light_colour);
	margin-left: var(--spacing_medium);
}

.info_icon {
	border: 1px solid var(--font_light_colour);
	border-radius: 100px;
	width: 19px;
}

.info_icon svg {
	margin-left: 2.5px;
	margin-bottom: -1px;
}

.info_icon.psoda_icon.grey_font_icon use {
	fill: var(--font_light_colour) !important;
}

.timesheet_task_menu_details .psoda_icon, .timeentry_menu_details .psoda_icon {
	display: inline-block;
	border: 1px solid var(--font_main_colour);
	border-radius: 100px;
	width: 19px;
	margin-top: -2px;
}

.timesheet_task_menu_details .psoda_icon svg, .timeentry_menu_details .psoda_icon svg {
	margin-left: 2.5px;
	margin-bottom: -1px;
}

.number_input {
	color: var(--main_colour);
	border: none;
	text-align: center;
	/* display: block; */
	background-color: var(--grey_2);
	border-radius: 100px;
	width: 100px;
	margin-right: auto;
	margin-left: auto;
	font-weight: bold;
	padding: var(--spacing_small) 0px;
}

.number_input_active .number_input {
	background-color: var(--grey_3);
}

.number_input_hover .number_input, .has_comments .number_input {
	border: 1px solid var(--main_colour);
}

.number_input_label {
	margin-bottom: var(--spacing_small);
	font-size: var(--font_size_small);
	font-weight: normal;
	display: flex;
}

.number_input:disabled  {
	background-color: unset !important;
	border: none !important;
}

.input_error_active input, .input_error_active textarea {
	border: 1px solid var(--red) !important;
	background-color: var(--light_red) !important;
}

.input_error  {
	color: var(--red) !important;
	font-size: var(--font_size_small);
	text-align: left;
}

.mandatory_star {
	color: var(--red) !important;
}

.number_div_time_entry_outer {
	cursor: pointer;
	position: relative;
}

.number_time_entry_active {
	display: flex;
	align-items: center;
	flex-direction: row;
	justify-content: center;
}

.number_time_entry_active .number_input {
	width: 50px;
	margin: 0;
}

.number_input_width_1 .number_input {
	width: 20px;
}

.number_input_width_2 .number_input {
	width: 28px;
}

.number_input_width_3 .number_input {
	width: 36px;
}

.number_input_width_4 .number_input {
	width: 44px;
}

.number_div_time_entrys_amount {
	position: absolute;
	width: 19px;
	top: 3px;
	font-size: var(--font_size_small);
}

.short_text_outer_div, .text_outer_div {
	display: flex;
	flex-direction: column;
}

.short_text_input {
	border: none;
	padding: var(--spacing_small) 0px;
	border-radius: 100px;
	transition: .1s ease;
	background-color: transparent;
}

.short_text_input:hover, .short_text_input:focus {
	padding: var(--spacing_small) var(--spacing_medium);
	background-color: var(--grey_2);
}

/* .short_text_hover_override {
	margin-right: calc(var(--spacing_large) - calc(var(--spacing_medium) * 2) + 2px) !important;
}

.short_text_hover_override .stopwatch_rounding_outer {
	margin-right: calc(var(--spacing_large) - calc(var(--spacing_medium) * 2) + 2px) !important;
} */

.short_text_input:disabled {
	pointer-events: none;
}

.short_text_style_1 .short_text_input_label, .text_style_1 .text_input_label {
	font-weight: normal;
	font-size: var(--font_size_small);
}

.short_text_style_1 .short_text_input, .short_text_style_1 .short_text_input_prefix, .text_style_1 .text_input {
	font-weight: bold;
}

.short_text_style_2 .short_text_input_label, .text_style_2 .text_input_label {
	font-weight: bold;
	font-size: var(--font_size_small);
}

.short_text_style_2 .short_text_input, .short_text_style_2 .short_text_input_prefix, .text_style_2 .text_input {
	font-weight: normal;
}

.short_text_input_outer {
	display: flex;
	align-items: center;
}

.dropdown_outer_div {
	display: flex;
   flex-direction: column;
}

.dropdown_input {
	color: var(--main_colour);
	background-color: var(--light_colour);
	padding: var(--spacing_medium) var(--spacing_large);
	border: none;
	border-radius: var(--border_radius);
	cursor: pointer;
}

.dropdown_input:disabled {
	pointer-events: none;
}

.dropdown_style_1 .dropdown_input {
	font-weight: bold;
}

.dropdown_style_2 .dropdown_input {
	font-weight: normal;
}

.dropdown_style_1 .dropdown_input_label {
	font-weight: normal;
}

.dropdown_style_2 .dropdown_input_label {
	font-weight: bold;
}

.dropdown_input_label {
	margin-bottom: var(--spacing_small);
	font-size: var(--font_size_small);
}

.text_outer_div {
	margin-bottom: var(--spacing_large);
}

.text_input {
	margin-top: var(--spacing_small);
}

.empty_text_style {
	font-weight: normal;
	font-size: var(--font_size_small);
	color: var(--grey_4);
}

.checkbox_inner_div {
	display: flex;
	align-items: center;
}

.checkbox_outer_div {
	margin-bottom: var(--spacing_large);
}

.checkbox_input_outer {
	position: relative;
	background: none;
	border: none;
	padding: 0;
	margin-left: var(--spacing_medium);
}

.checkbox_input_background {
	pointer-events: none;
	width: 50px;
	height: 25px;
	background-color: var(--grey_4);
	border-radius: 20px;
}

.checkbox_input_checked .checkbox_input_background {
	background-color: var(--main_colour);
}

.checkbox_input_track {
	pointer-events: none;
	position: absolute;
	top: 2.5px;
	left: 2.5px;
	width: 20px;
	height: 20px;
	background-color: var(--white);
	border-radius: 20px;
}

.checkbox_input_checked .checkbox_input_track {
	left: unset;
	right: 2.5px;
}

.checkbox_outer_div_checked.checkbox_outer_hide_description_if_checked .checkbox_input_description {
	display: none;
}

.checkbox_input_description {
	font-weight: normal;
	margin-top: var(--spacing_small);
}

.blank_tab_add_button {
	margin: var(--spacing_large);
}

.selector_input {
	display: flex;
	justify-content: space-between;
	align-items: center;
	text-align: center;
}

.selector_option_input {
	border: var(--border_thin);
	border-radius: var(--border_radius);
	padding: var(--spacing_medium);
	margin: var(--spacing_small);
}

.selector_option_input_4 {
	width: calc(100% / 4);
}

.selector_option_input_3 {
	width: calc(100% / 3);
}

.selector_option_input_2 {
	width: calc(100% / 2);
}

.selector_option_input {
	cursor: pointer;
}

.selector_option_input_selected {
	border-color: var(--main_colour);
	background-color: var(--light_colour);
	color: var(--main_colour);
}

.selector_input_description {
	margin-top: var(--spacing_small);
	font-weight: normal;
	margin-bottom: var(--spacing_small);
	font-size: var(--font_size_small);
}

/* WORKFLOW */
.current_state_button {
	position: relative;
}

.current_state_green {
	color: var(--green);
	background-color: var(--light_green);
	padding-top: 5.6px;
	padding-bottom: 5.6px;
}

.current_state_green:hover {
	background-color: #dff5d0;
}

.current_state_green .psoda_icon svg use {
	fill: var(--green) !important;
}

.current_state_grey {
	color: var(--font_light_colour);
	background-color: var(--grey_3);
}

.current_state_grey:hover {
	background-color: #dddddd;
}

.current_state_grey .psoda_icon svg use {
	fill: var(--font_light_colour) !important;
}

.current_state_red {
	color: var(--red);
	background-color: var(--light_red);
}

.current_state_red:hover {
	background-color: #ffeded;
}

.current_state_red .psoda_icon svg use {
	fill: var(--red) !important;
}

/* #sidebar_header_outer .current_state_green:hover {
	background-color: var(--light_green);
} */

#current_state_note_icon {
	position: absolute;
	background: rgba(234,166,13,1);
	color: var(--white);
	height: 15px;
	width: 15px;
	border-radius: 100px;
	top: -5px;
	right: -5px;
	font-size: var(--font_size_small);
}

.current_state_button #current_state_note_icon.psoda_icon svg use {
	fill: var(--white) !important;
}

.current_state_button #current_state_note_icon.psoda_icon svg {
	margin-bottom: 3px;
}

/* TAB BUTTONS */

.tab_buttons_outer.tab_buttons_style_1 {
	background-color: var(--grey_2);
	padding: var(--spacing_small);
	border-radius: var(--border_radius);
}

.tab_buttons_outer.tab_buttons_style_2 {
	border-bottom: var(--border_thin);
	width: 100%;
}

.tab_buttons_outer.tab_buttons_style_1 .tab_button {
	border: none;
	font-weight: bold;
	padding: var(--spacing_small) var(--spacing_medium);
	border-radius: calc(var(--border_radius) / 1.4);
	margin-left: var(--spacing_small);
	margin-right: var(--spacing_small);
	background-color: transparent;
}

.tab_buttons_outer.tab_buttons_style_2 .tab_button {
	border: none;
	background-color: unset;
	font-weight: normal;
	padding: var(--spacing_medium) var(--spacing_large);
	margin-right: var(--spacing_small);
}

.tab_button span {
	pointer-events: none;
}

.tab_button:first-child {
	margin-left: 0px;
}

.tab_button:first-child {
	margin-right: 0px;
}

.tab_buttons_outer.tab_buttons_style_1 .tab_button:hover {
	background-color: var(--grey_3);
}

.tab_buttons_outer.tab_buttons_style_1 .tab_button_text {
	margin-left: var(--spacing_medium);
}

.tab_buttons_outer.tab_buttons_style_1 .tab_button_active {
	background-color: var(--white);
	color: var(--main_colour);
}

.tab_buttons_outer.tab_buttons_style_1 .tab_button_active:hover {
	background-color: var(--white);
}

.tab_buttons_outer.tab_buttons_style_2 .tab_button_active {
	font-weight: bold;
	border-bottom: 2px solid var(--main_colour);
	color: var(--main_colour);
}

.tab_buttons_outer.tab_buttons_style_2 .tab_button:hover {
	color: var(--main_colour);
}

/* TAB CONTENT */
.tab_content_outer {
	border-radius: var(--border_radius);
}

.tasks_table_container, #timeentries_content_inner {
	max-height: calc(100vh - 225px); /*225px roughly the height of content above the table*/
	overflow: auto;
	border-radius: var(--border_radius);
}

.tasks_table_outer {
	border-spacing: 0;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	border-collapse: separate;
	border-radius: var(--border_radius);
	background-color: var(--white);
	table-layout: fixed;
}

.tasks_table_header_tr {
	background-color: var(--grey_1);
	position: sticky;
	top: 0;
	z-index: 2;
}

.tasks_table_footer_outer {
	background-color: var(--white);
	position: sticky;
	bottom: 0;
	border-top: var(--border_thin);
	z-index: 2;
}

.tasks_table_day_th {
	width: 100px;
}

.tasks_table_day_th, .tasks_table_td {
	padding: var(--spacing_medium);
	text-align: center;
	border-bottom: var(--border_thin);
}

.tasks_table_day_th:first-child {
	width: 300px;
	text-align: left;
}

.tasks_table_day_th:last-child {
	width: 100px;
}

.tasks_table_footer_td:first-child {
	text-align: left;
}

.tasks_table_footer_td {
	padding: var(--spacing_large);
	text-align: center;
	border-top: var(--border_thin);
}

.tasks_table_tr, .time_entry_outer {
	transition: .5s ease;
}

.timesheet_task_label_td {
	text-align: left;
	display: flex;
   justify-content: space-between;
}

.timesheet_task_label_outer {
	border: none;
	background-color: unset;
	cursor: pointer;
	width: calc(100% - 44px);
}

.timesheet_task_label_outer div {
	pointer-events: none;
}

.timesheet_task_label_outer:hover .timesheet_task_label_title {
	text-decoration: underline;
}

.timesheet_task_label_top {
	display: flex;
	align-items: center;
}

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

.timesheet_task_label_parent_icon {
	margin-right: var(--spacing_medium);
}

.timesheet_task_label_parent_name {
	font-size: var(--font_size_small);
	font-weight: normal;
	margin-top: -3px;
	text-align: left;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.timesheet_task_label_adhoc .timesheet_task_label_parent_name {
	color: var(--font_light_colour);
}

.timesheet_task_label_adhoc .timesheet_task_label_parent_icon svg use {
	fill: var(--font_light_colour) !important;
}

.timesheet_task_label_indent {
	width: 20px;
	height: 8px;
	margin-right: var(--spacing_medium);
	margin-left: 9px;
	border-left: 3px solid var(--grey_4);
	border-bottom: 3px solid var(--grey_4);
	border-bottom-left-radius: 2px;
}

.timesheet_task_label_title {
	font-weight: bold;
	text-align: left;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}	

.delete_button .button_text {
	color: var(--red);
}

.delete_button .psoda_icon svg use {
	fill: var(--red) !important;
}

.tasks_table_tr + .tasks_tab_empty_outer {
	display: none;
}

.tasks_tab_empty_inner {
	width: 500px;
	text-align: center;
	margin: auto;
	padding: var(--spacing_extralarge);
}

.tasks_tab_empty_title {
	padding: var(--spacing_medium) 0;
	margin-top: var(--spacing_large);
}

.tasks_tab_empty_desc {
	font-weight: normal;
	font-size: var(--font_size_small);
}

.unrostered_day {
	background-color: var(--grey_1);
}

.unrostered_day .number_input {
	background-color: var(--grey_3);
}

/* TIME ENTRY TAB CONTENT */
.timeentries_day_header_outer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--spacing_medium) var(--spacing_large);
	border-bottom: var(--border_thin);
}

.timeentries_day_header_left {
	display: flex;
	align-items: center;
}

.timeentries_day_outer {
	margin-bottom: var(--spacing_extralarge);
}

.timeentries_day_outer_hidden .timeentries_day_inner {
	display: none;
}

.timeentries_day_outer_hidden .timeentries_day_header_collapse svg {
	transform: rotate(-90deg);
}

.time_entry_outer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: var(--white);
	border-bottom: var(--border_thin);
	padding: var(--spacing_medium);
}

.time_entry_outer.highlight_row {
	background-color: var(--light_colour);
}

.time_entry_outer_disabled {
	opacity: .5;
	pointer-events: none;
}

.timeentries_day_inner .empty_text_style {
	padding-top: var(--spacing_medium);
	padding-left: var(--spacing_large);
}

.time_entry_outer:nth-last-child(2) {
	border-bottom-left-radius: var(--border_radius);
	border-bottom-right-radius: var(--border_radius);
	border-bottom: none;
}

.time_entry_outer + .no_time_entries_text {
	display: none;
}

.time_entry_left_outer {
	display: flex;
	align-items: center;
	width: 350px;
}

.time_entry_center_outer {
	width: calc(100% - 350px - 375px); /*left and right widths minused*/
}

.time_entry_right_outer {
	display: flex;
	align-items: center;
}

.timeentry_description {
	margin: 0;
}

.timeentry_description .text_input {
	background-color: var(--white);
	font-size: var(--font_size_small);
	margin: var(--spacing_small) 0px;
	height: 40px;
}

.timeentry_description .text_input:hover, .timeentry_description .text_input:focus {
	background-color: var(--grey_2);
}

.timeentry_description_disabled {
	margin: 0;
	background-color: var(--white);
	font-size: var(--font_size_small);
	margin: var(--spacing_small) 0px;
	padding: var(--spacing_medium) var(--spacing_large);
	height: 40px;
	overflow: auto;
	font-weight: normal;
}

.timeentry_start_time {
	margin-left: var(--spacing_extralarge);
}

.timeentry_time_dash {
	margin: 0px var(--spacing_medium);
}

.timeentry_end_time {
	margin-right: var(--spacing_large);
}

.timeentry_row_total {
	/* margin: 0px var(--spacing_large); */
	width: 75px;
	text-align: center;
}

.timeentry_row_total.timeentry_row_total_dot_format {
	width: 50px;
}

.timeentry_row_total_editable {
	padding: var(--spacing_small) 0px;
	border-radius: 100px;
}

.timeentry_row_total_editable:hover {
	background-color: var(--grey_2);
}

.timeentries_text_unrostered_day {
	color: var(--font_light_colour);
}

/* SIDEBAR */
#sidebar_outer {
	width: 400px;
	/* min-height: 600px; */
	height: calc(100vh - 225px + 56px - (var(--spacing_medium) * 2)); /*225px used from tasks tab table, then adding on 56px which is the height of the timesheet header bar, then remove the medium size padding */
	padding: var(--spacing_medium) var(--spacing_large);
	background-color: var(--white);
	border-radius: var(--border_radius);
	margin-left: var(--spacing_large);
	display: flex;
	flex-direction: column;
}

.timesheet_page_sidebar_active {
	display: flex;
}

.timesheet_page_sidebar_active .timesheet_page_content_inner {
	width: calc(100% - 400px - var(--spacing_large) - (var(--spacing_large) * 2)); /*sidebar width (400px), sidebar margin left and sidebar padding*/
}

.timesheet_page_sidebar_active .tasks_table_container {
	overflow: auto;
}

.timesheet_page_sidebar_active .tasks_table_day_th:first-child, .timesheet_page_sidebar_active .tasks_table_td:first-child, .timesheet_page_sidebar_active .tasks_table_footer_td:first-child  {
	position: sticky;
	left: 0;
	background-color: var(--white);
	border-right: var(--border_thin);
	z-index: 1;
}

.timesheet_page_sidebar_active .tasks_table_day_th:last-child, .timesheet_page_sidebar_active .tasks_table_td:last-child, .timesheet_page_sidebar_active .tasks_table_footer_td:last-child  {
	position: sticky;
	right: 0;
	background-color: var(--white);
	border-left: var(--border_thin);
}

.tasks_table_tr.sidebar_selected, .tasks_table_tr.sidebar_selected .tasks_table_td:first-child, .tasks_table_tr.sidebar_selected .tasks_table_td:last-child, 
.tasks_table_tr.highlight_row, .tasks_table_tr.highlight_row .tasks_table_td:first-child, .tasks_table_tr.highlight_row .tasks_table_td:last-child {
	background-color: var(--light_colour);
}

.timesheet_page_sidebar_active .timesheet_task_label_td .overlay_open {
	margin-left: 52px;
	margin-top: -52px;
}

.timesheet_page_sidebar_active .timesheet_task_label_td .overlay_open.overlay_pos_change {
	margin-left: 0px;
	margin-top: 0px;
}

#sidebar_tab_content_outer {
	height: calc(100% - 290px);
	overflow-y: auto;
	overflow-x: hidden;
	padding-bottom: var(--spacing_medium);
	border-bottom: var(--border_thin);
	/* margin-top: calc(0px - var(--spacing_large)); */
}

#sidebar_header_outer {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

#sidebar_header {
	display: flex;
}

.sidebar_header_text {
	margin-left: var(--spacing_medium);
}

.sidebar_effort_text input, .sidebar_progress_text input {
	width: 100px;
}

#sidebar_effort_outer, #sidebar_progress_outer {
	display: flex;
	transition: .1s ease;
}

#sidebar_effort_outer {
	margin-right: var(--spacing_large);
}

#sidebar_effort_outer .psoda_icon {
	margin-right: var(--spacing_medium);
}

#sidebar_tab_content_outer > div {
	display: flex;
   flex-direction: column;
}

#sidebar_progress_circle_tick {
	display: none;
	margin-top: var(--spacing_small);
	margin-right: var(--spacing_medium);
	background: var(--green);
	height: 30px;
	width: 30px;
	border-radius: 100px;
}

#sidebar_progress_outer .psoda_icon svg {
	margin-top: 5px;
	margin-left: 5px;
}

#sidebar_progress_circle_outer {
	--size: 30px;
	--progress: 0;
	--half-size: calc(var(--size) / 2);
	--stroke-width: 4px;
	--radius: calc((var(--size) - var(--stroke-width)) / 2);
	--circumference: calc(var(--radius) * pi * 2);
	--dash: calc((var(--progress) * var(--circumference)) / 100);
	margin-right: var(--spacing_medium);
	margin-top: var(--spacing_small);
 }

 #sidebar_progress_circle_outer circle {
	cx: var(--half-size);
	cy: var(--half-size);
	r: var(--radius);
	stroke-width: var(--stroke-width);
	fill: none;
	stroke-linecap: round;
	transform: rotate(-90deg);
	transform-origin: var(--half-size) var(--half-size);
	stroke-dasharray: var(--dash) calc(var(--circumference) - var(--dash));
	stroke: var(--green);
}

.sidebar_progress_complete #sidebar_progress_circle_outer {
	display: none;
}

.sidebar_progress_complete #sidebar_progress_circle_tick {
	display: flex;
}

#sidebar_details_outer {
	display: flex;
	margin-top: var(--spacing_large);
	/* margin-bottom: var(--spacing_large); */
}

.sidebar_close_button {
	display: block;
	margin-left: auto !important;
	margin-right: auto !important;
	margin-top: var(--spacing_large);
}

#sidebar_ad_hoc_text {
	margin-top: var(--spacing_large);
}

#sidebar_context_outer {
	margin-top: var(--spacing_large);
}

#sidebar_context_label, #sidebar_reference_label, #sidebar_description_label {
	font-size: var(--font_size_small);
}

#sidebar_context_inner {
	display: flex;
	margin-top: var(--spacing_small);
	margin-bottom: var(--spacing_large);
	flex-wrap: wrap;
}

#sidebar_context_item {
	display: flex;
	font-size: var(--font_size_small);
	font-weight: normal;
}

#sidebar_context_text {
	margin-top: 2px;
	margin-left: var(--spacing_small);
}

#sidebar_context_breadcrumb {
	margin-left: var(--spacing_medium);
	margin-right: var(--spacing_medium);
}

#sidebar_reference_text {
	font-weight: normal;
	margin-top: var(--spacing_small);
	margin-bottom: var(--spacing_large);
}

#sidebar_description_text {
	font-size: var(--font_size_small);
	font-weight: normal;
	margin-top: var(--spacing_small);
	margin-bottom: var(--spacing_large);
}

.sidebar_view_task_button {
	/* padding: 0; */
   margin: 0;
}

#sidebar_tab_content_outer #sidebar_charge_outer {
	flex-direction: row;
	justify-content: space-between;
	margin-top: var(--spacing_large);
	margin-bottom: var(--spacing_large);
}

.hourly_rate_text input {
	width: 100px;
}

#sidebar_total_charge_outer {
	margin-top: var(--spacing_large);
	margin-bottom: var(--spacing_medium);
	text-align: center;
	border: var(--border_thick);
	padding: var(--spacing_medium);
	border-radius: var(--border_radius);
}

#sidebar_total_charge_label {
	font-size: var(--font_size_small);
	font-weight: normal;
	margin-bottom: var(--spacing_small);
}

#sidebar_total_charge_text {
	pointer-events: none;
	font-weight: bold;
	border: none;
	text-align: center;
	font-size: var(--font_size_medium);
}

.attachments_outer {
	margin-top: calc(var(--spacing_large) + var(--spacing_medium));
	/* height: 100px; */
	padding-top: 20px;
	padding-bottom: 20px;
	background-color: var(--grey_1);
	border: var(--border_thick);
	border-radius: var(--border_radius);

	/*remove these just for placeholder text*/
	font-size: var(--font_size_small);
	font-weight: normal;
	color: var(--font_light_colour);
	text-align: center;
}

.sidebar_billing_non .hourly_rate_text, .sidebar_billing_non #sidebar_total_charge_outer, .sidebar_billing_non .charge_rounding_dropdown {
	display: none !important;
}

.sidebar_billing_once .charge_rounding_dropdown {
	display: none !important;
}

/* COMMENTS */
#sidebar_comments_outer {
	max-height: calc(100% - 76px);
	overflow: auto;
	padding-top: var(--spacing_large);
	padding-bottom: var(--spacing_medium);
}

#sidebar_comments_outer.comments_outer_add_comment_active {
	max-height: calc(100% - 106px);
}

.comment_outer {
	display: flex;
	flex-direction: row !important;
	font-size: var(--font_size_small);
	font-weight: normal;
	margin-bottom: var(--spacing_medium);
	text-align: left;
	align-items: flex-start;
	justify-content: space-between;
}

.comment_content_inner {
	display: flex;
	flex-direction: row !important;
}

.comment_content_outer {
	margin-left: var(--spacing_medium);
}

.comment_image {
	border-radius: 30px;
}

.comment_content_top_outer {
	display: flex;
	align-items: center;
}

.comment_content_bottom_outer {
	display: flex;
}

.comment_dot {
	width: 4px;
	height: 4px;
	border-radius: 4px;
	background-color: var(--font_light_colour);
	margin: 0 var(--spacing_medium);
}

.comment_name {
	font-weight: bold;
	color: var(--main_colour);
	max-width: 200px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.comment_date {
	color: var(--font_light_colour);
}

.comment_comment {
	width: 100%;
}

.comment_time + .comment_comment {
	padding: var(--spacing_small) 0;
}

.comment_time, .comment_time.comment_comment_editable:hover, .comment_time.comment_comment_editable:focus {
	height: max-content;
	margin-right: var(--spacing_small);
	background-color: var(--grey_3);
	color: var(--main_colour);
	font-weight: bold;
	padding: var(--spacing_small) var(--spacing_medium);
	border-radius: 100px;
}

.comment_comment, .comment_time {
	transition: .1s ease;
}

.comment_comment_editable:hover, .comment_comment_editable:focus {
	background-color: var(--grey_1);
	padding: var(--spacing_small) var(--spacing_small);
	border-radius: var(--border_radius);
}

#comment_content_error_div {
	color: var(--red) !important;
	font-weight: bold;
	text-align: left;
}

.comment_delete_button {
	display: none;
}

.comment_outer:hover .comment_delete_button {
	display: block;
}

.comment_delete_button .psoda_icon svg use {
	fill: var(--red) !important;
}

.comment_delete_button {
	background-color: var(--light_red);
}

.comment_delete_button:hover {
	background-color: #ffeded;
}

#sidebar_comments_number {
	background-color: var(--grey_2);
	color: var(--font_light_colour);
   
	display: inline-block;
	width: 20px;
	padding: calc((20px - 15.2px) / 2) 0;
	font-size: var(--font_size_small);
	border-radius: 30px;
	margin-left: var(--spacing_small);
}

.tab_button_active #sidebar_comments_number {
	background-color: var(--main_colour);
	color: var(--white); 
}

.add_comment_outer {
	display: flex;
	flex-direction: row !important;
	margin-top: var(--spacing_medium);
	margin-bottom: var(--spacing_medium);
	position: relative;
}

.tasks_table_td .add_comment_outer {
	margin-top: var(--spacing_large);
}

.add_comment_input_outer {
	display: flex;
	width: 100%;
}

.add_comment_input {
	margin: 0;
	margin-left: var(--spacing_medium);
	width: 100%;
}

.add_comment_input textarea {
	margin: 0;
	height: 20px;
	resize: none;
}

.add_comment_input textarea:focus {
	height: 50px;
}

.add_comment_input_dropdown {
	display: none;
}

.add_comment_button {
	display: none;
	height: 35px;
}

.add_comment_button svg {
	margin-top: 3px;
}

.add_time_input {
	display: none;
	position: absolute;
	top: 4px;
	left: 8px;
}

.add_time_input textarea {
	margin: 0;
	height: 20px;
	width: 40px;
	resize: none;
	padding: var(--spacing_small) var(--spacing_medium);
	color: var(--main_colour);
	background-color: var(--grey_3);
	border-radius: 100px;
	text-align: center;
}

.add_time_input .input_error {
	position: absolute;
	width: max-content;
	bottom: 34px;
}

.add_comment_active .add_time_input + .add_comment_input .text_input {
	padding-left: 65px;
}

.add_comment_active .add_time_input {
	display: flex;
}

.add_comment_active .add_comment_input {
	margin-left: var(--spacing_small);
}

.add_comment_active .add_comment_input_dropdown {
	display: flex;
}

.add_comment_active .add_comment_button {
	display: flex;
}

.add_comment_active  .comment_image {
	display: none;
}

.add_comment_input.has_day_dd .text_input {
	padding-right: 85px;
}

.add_comment_input_dropdown {
	position: absolute;
	right: 45px;
	top: 5.5px;
}

.add_comment_input_dropdown select {
	padding: var(--spacing_small) 0;
}

.task_comment_overlay  {
	text-align: left;
	width: 400px;
}

#task_hover_comments_outer {
	margin-top: var(--spacing_large);
}

#task_hover_comments_outer {
	max-height: 200px;
	overflow: auto;
}

/* BLANK TAB */
#blank_tab_content_header_outer {
	display: flex;
	justify-content: center;
	padding: var(--spacing_large);
}

#blank_tab_content_header_text {
	margin-left: var(--spacing_medium);
}

#blank_tab_content_inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	background: var(--white);
	border-top: var(--border_thin);
	border-bottom-left-radius: var(--border_radius);
	border-bottom-right-radius: var(--border_radius);
	padding: var(--spacing_extralarge);
	min-height: 300px;
}

#blank_tab_content_checkboxes {
	width: 400px;
}

.tasks_tab_content_outer .holiday_icon {
	margin-left: var(--spacing_small);
	margin-bottom: -2px;
}

.timeentries_tab_content_outer .holiday_icon {
	margin-right: var(--spacing_medium);
	margin-bottom: -2px;
}

/* Circle loader */
.circle_loader {
   width: 14px;
   height: 14px;
   border: 1px solid;
   border-color: var(--main_colour) var(--main_colour) var(--main_colour) transparent;
   border-radius: 50%;
   animation: circle_loader 1.2s linear infinite;
}

.circle_loader_grey {
   border-color: var(--grey_5) var(--grey_5) var(--grey_5) transparent;
}

.circle_loader_white {
   border-color: var(--white) var(--white) var(--white) transparent;
}

#navigator.navigator_expanded .circle_loader {
   margin-right: 10px;
   margin-left: 5px;
	display: block;
	margin-top: 13px;
}

#navigator .circle_loader {
	display: none;
}

@keyframes circle_loader {
   0% {
     transform: rotate(0deg);
   }
   100% {
     transform: rotate(360deg);
   }
}

.page_loader_outer {
	position: absolute;
	margin: auto;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	max-width: max-content;
	text-align: center;
	height: max-content;
	font-size: var(--font_size_small);
}

.page_loader {
	margin: auto;
	margin-bottom: var(--spacing_medium);
}

#error_message {
	position: fixed;
	width: 500px;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	border-radius: var(--border_radius);
	top: 20px;
	left: 0;
	right: 0;
	margin: auto;
	background: linear-gradient(to left, rgb(255, 243, 243), rgb(255, 221, 221));
	z-index: 5;
	box-shadow: var(--box-shadow);
	padding: var(--spacing_large);
}

#error_message.error_message_success {
	background: linear-gradient(to left, rgb(244, 255, 243), rgb(221, 255, 221));
}

#error_message.error_message_warning {
	background: linear-gradient(to left, #ffefe2, #ffe2ca);
}

.error_left {
	display: flex;
}

.error_icon {
	background: var(--white);
	border-radius: 100px;
	height: 40px;
	width: 40px;
	box-shadow: var(--box-shadow);
}

.error_icon svg {
	padding: 7.5px;
}

.error_icon svg use {
	fill: var(--red) !important;
}

.error_message_success .error_icon svg use {
	fill: var(--green) !important;
}

.error_message_warning .error_icon svg use {
	fill: var(--icon_amber) !important;
}

.error_inner {
	/* width: calc(100% - 40px - 20px -(var(--spacing_large)* 2)); */
	padding: 0 var(--spacing_large);
}

.error_message {
	font-size: var(--font_size_small);
	font-weight: normal;
	margin-top: var(--spacing_medium);
	text-align: left;
}

/* STOPWATCH */
.stopwatch_description_input {
	display: none;
	margin-bottom: 0;
}

.stopwatch_description_input .text_input {
	height: 20px;
	width: 400px;
	margin-left: var(--spacing_large);
	margin-top: 0;
}

.add_bar_stopwatch_paused .stopwatch_description_input, .add_bar_stopwatch_counting .stopwatch_description_input {
	display: block;
}

.add_bar_stopwatch_counting .stopwatch_description_input .text_input {
	margin-right: var(--spacing_large);
}

.stopwatch_rounding_inner {
	display: none;
	margin-right: var(--spacing_large);
	margin-left: var(--spacing_large);
	/* transition: .1s ease; */
}

.add_bar_stopwatch_paused .stopwatch_rounding_inner {
	display: block;
}

.stopwatch_rounding_label {
	font-size: var(--font_size_small);
	font-weight: normal;
}

.stopwatch_rounding_down svg {
	transform: rotate(180deg);
}

.stopwatch_time {
	display: none;
}

.add_bar_stopwatch_counting .stopwatch_time {
	display: block;
	pointer-events: none;
}

.stopwatch_time .short_text_input {
	width: 100px;
	font-size: var(--font_size_medium);
	text-align: center;
	/* margin-right: var(--spacing_medium); */
}

.add_bar_stopwatch_counting .stopwatch_time .short_text_input {
	background-color: var(--light_colour);
}

.add_bar_stopwatch_paused .stopwatch_time {
	display: block;
}

.stopwatch_menu_button {
	display: none;
}

.add_bar_stopwatch_paused .stopwatch_menu_button {
	display: block;
}

.stopwatch_stop_button {
	display: none;
}

.add_bar_stopwatch_counting .stopwatch_stop_button {
	display: block;
}

.stopwatch_add_time_button {
	display: none;
}

.add_bar_stopwatch_paused .stopwatch_add_time_button {
	display: block;
}

.add_bar_stopwatch_counting .add_bar_task_button, 
.add_bar_stopwatch_paused .add_bar_task_button, 
.add_bar_stopwatch_counting .add_bar_time_button,
.add_bar_stopwatch_paused .add_bar_time_button, 
.add_bar_stopwatch_paused .add_bar_stopwatch_button,
.add_bar_stopwatch_counting .add_bar_stopwatch_button {
	display: none;
}

.add_bar_stopwatch_counting {
	background-color: var(--light_colour);
	border: 2px dashed var(--main_colour);
	min-height: 38px;
}

.add_bar_stopwatch_counting .add_bar_dropdown_input_clear, 
.add_bar_stopwatch_paused .add_bar_dropdown_input_clear {
	display: none;
}

.add_bar_stopwatch_counting .add_bar_dropdown_input_caret,
.add_bar_stopwatch_paused .add_bar_dropdown_input_caret {
	display: none;
}

.add_bar_stopwatch_counting .add_bar_dropdown_input,
.add_bar_stopwatch_paused .add_bar_dropdown_input {
	display: none;
}

.add_bar_dropdown_stopwatch_input {
	display: none;
	padding: var(--spacing_medium);
	max-width: 300px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.add_bar_stopwatch_counting .add_bar_dropdown_stopwatch_input,
.add_bar_stopwatch_paused .add_bar_dropdown_stopwatch_input {
	display: block;
}

.add_bar_stopwatch_counting .add_bar_dropdown_outer,
.add_bar_stopwatch_paused .add_bar_dropdown_outer {
	margin-right: 0px;
}

.stopwatch_stop_button {
	background-color: var(--red);
}

.stopwatch_stop_button:hover {
	background-color: #e53f3f;
}

/* PREFERENCES */

#preferences_header_outer {
	display: flex;
   justify-content: space-between;
	align-items: center;
}

#preferences_header_left_outer {
	display: flex;
	align-items: center;
}

.preferences_header_text {
	margin-left: var(--spacing_medium);
}

#preferences_overlay_inner {
	height: calc(100vh - 40px - (var(--spacing_large) * 2) - 32px - 10px - 68px - 40px);
	overflow: auto;
	padding-top: var(--spacing_large);
	margin-top: var(--spacing_medium);
}

#preferences_overlay_footer {
	padding-top: var(--spacing_large);
	padding-bottom: var(--spacing_large);
}

.preference_option {
	display: none;
	margin-bottom: var(--spacing_extralarge);
}

#preferences_overlay_inner.preferences_general_selected .preference_option_general,
#preferences_overlay_inner.preferences_general_selected #preferences_inner_creation_outer,
#preferences_overlay_inner.preferences_datetime_selected .preference_option_datetime {
	display: block;
}

#preferences_inner_creation_outer {
	display: none;
	border: 1px solid var(--main_colour);
	border-radius: var(--border_radius);
	padding: var(--spacing_large);
	margin-bottom: var(--spacing_extralarge);
}

#preferences_inner_creation_outer div:last-child {
	margin-bottom: 0;
}

#preferences_inner_creation_text {
	font-weight: normal;
	padding-bottom: var(--spacing_large);
	font-size: var(--font_size_small);
	color: var(--main_colour);
}

#preferences_inner_creation_text .psoda_icon {
	margin-right: var(--spacing_medium);
}

.preferences_date_format_header {
	display: none;
}

.preferences_option_description {
	display: none;
	margin-top: var(--spacing_small);
	margin-bottom: var(--spacing_small);
	font-weight: normal;
	font-size: var(--font_size_small);
}

#preferences_outer .checkbox_input_description {
	margin-top: var(--spacing_small);
	font-size: var(--font_size_small);
}

#preferences_outer .dropdown_input {
	width: max-content;
}

.selector_option_label_bottom {
	font-size: var(--font_size_small);
	font-weight: normal;
}

/* WELCOME POPUPS */

#welcome_popup_outer {
	position: fixed;
	background: var(--white);
	border-radius: var(--border_radius);
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 50%;
	height: max-content;
	padding: var(--spacing_large);
	z-index: 100;
}

.welcome_popup_inner {
	max-height: 85vh;
	overflow: auto;
}

.welcome_popup_close_button {
	float: right;
	position: absolute;
	right: var(--spacing_medium);
	background-color: var(--white);
	padding: var(--spacing_medium);
}

.welcome_popup_thumbnail {
	width: 100%;
	margin-bottom: var(--spacing_large);
	margin-top: var(--spacing_small);
}

.welcome_popup_descr {
	font-weight: normal;
	margin-top: var(--spacing_medium);
	margin-bottom: var(--spacing_medium);
}

.welcome_popup_descr li {
	margin-top: var(--spacing_large);
	margin-bottom: var(--spacing_large);
}


.play_button_outer {
	box-shadow: var(--box-shadow);
	padding: var(--spacing_large);
	background-color: var(--white);
	border-radius: 100px;
	width: 30px;
	height: 30px;
	cursor: pointer;
	float: right;
	margin-top: -63px;
	z-index: 10;
	position: absolute;
	right: 50px;
}

.play_button_outer svg {
	margin-top: 3px;
	margin-left: 3px;
}

.play_button_outer:hover {
	box-shadow: 0px 0px 20px #00000046;
}

#welcome_popup_2_outer {
	position: fixed;
	background: var(--white);
	border-radius: var(--border_radius);
	box-shadow: var(--box-shadow);
	width: 300px;
	height: max-content;
	padding: var(--spacing_large);
	z-index: 100;
}

.welcome_popup_2_title_outer {
	display: flex;
}

.welcome_popup_2_description {
	font-weight: normal;
	margin-top: var(--spacing_medium);
	margin-bottom: var(--spacing_large);
}

.welcome_popup_2_title_outer .psoda_icon {
	transform: rotate(180deg);
	margin-left: var(--spacing_medium);
	margin-top: -5px;
}

.user_menu_tutorial_button:focus {
	background-color: var(--grey_1) !important;
}

/* TUTORIAL PAGE */
.tutorials_header_outer {
	display: flex;
	justify-content: space-between;
	margin-top: var(--spacing_extralarge);
	margin-bottom: var(--spacing_extralarge);
}

.tutorials_header_text {
	font-size: var(--font_size_large);
}

.tutorials_content_outer {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	margin-bottom: var(--spacing_extralarge);
}

.tutorial_video_outer {
	background-color: var(--white);
	border-radius: var(--border_radius);
	width: 300px;
	height: 325px;
	margin: var(--spacing_medium);
	padding: var(--spacing_large);
	overflow: auto;
	position: relative;
}

.tutorial_text_top {
	display: flex;
	margin-top: var(--spacing_medium);
}

.tutorial_text_top_dot {
	width: 4px;
	height: 4px;
	margin-top: 8px;
	border-radius: 4px;
	background-color: var(--font_light_colour);
	margin-left: var(--spacing_medium);
	margin-right: var(--spacing_medium);
}

.tutorial_text_top_length {
	color: var(--font_light_colour);
}

.tutorial_text_bottom {
	font-weight: normal;
	font-size: var(--font_size_small);
	margin-top: var(--spacing_small);
}

.tutorial_thumbnail {
	width: 100%;
}

.tutorial_video_outer .play_button_outer {
	margin-top: -50px;
	right: 25px;
}

#video_outer {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	height: 90%;
	width: max-content;
	z-index: 100;
}

#video_video {
	height: 100%;
	border-radius: var(--border_radius);
}

.video_close_button {
	position: fixed;
	top: 25px;
	right: 25px;
	z-index: 100;
}

.video_close_button:hover {
	background-color: #00000046;
}

.video_close_button .psoda_icon svg use {
	fill: var(--white) !important;
}