/*
Light blue : 8ecae6
Medium blue : 219ebc
Dark blue : 023047
Yellow : ffb703
Orange : fb8500
*/

:root {
	--color-green: #2A9D8F;
	--color-light-green: #3ECCBB;
	--color-dark-blue: #264653;
	--color-medium-blue: #41778D;
	--color-light-blue: #f2f4f5;
	--color-yellow: #E9C46A;
	--color-orange: #E76F51;
	--color-light-orange: #F4A261;
	--color-transparent-green: rgba(42, 157, 143, 0.3);
	--color-transparent-orange: rgba(244, 162, 97, 0.3);
}

.accordion-custom {
	--bs-accordion-btn-bg: #264653;
	--bs-accordion-btn-color: white;
	--bs-accordion-active-color: #264653;
	--bs-accordion-border-color: #3ECCBB;
	--bs-accordion-btn-focus-box-shadow: #3ECCBB;
	--bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23264653' class='bi bi-dash-circle-fill' viewBox='0 0 16 16'%3e%3cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM4.5 7.5a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1h-7z'/%3e%3c/svg%3e");
	--bs-accordion-btn-icon:  url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-circle-fill' viewBox='0 0 16 16'%3e%3cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3v-3z'/%3e%3c/svg%3e");
	

	
	/*url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='var%28--bs-body-color%29'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")
	%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-plus-circle-fill' viewBox='0 0 16 16'%3e%3cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3v-3z'/%3e%3c/svg%3e
*/}

#CookiebotWidget {
	display: none !important;
}

body {
	color: var(--color-dark-blue);
	font-family: 'Lato', sans-serif !important;
}

body .btn-primary {
	background-color: var(--color-dark-blue);
	border: none !important;
}

body .btn-primary:hover {
	background-color: var(--color-medium-blue) !important;
}

body .btn-danger {
	background-color: var(--color-orange);
	border: none !important;
}

body .btn-danger:hover {
	background-color: var(--color-light-orange) !important;
}

body .modal-content {
	border: none;
}

body h1, body h2 {
	font-weight: bold;
}

#google_button iframe {
	margin: auto !important;
}

.message_container {
	padding: 0 30px;
}

#header_bar {
	background-color:var(--color-light-orange);
	align-items: center;
	color: white;
}

#header_bar img {
	max-height: 50px;
	max-width: 100%;
}

#btn_open_menu {
	font-size: 24px;
}

#btn_open_menu:hover {
	background: none;
	color: white;
}

#close_menu {
	text-align: right;
	padding: 10px;
}

#profile_menu {
	padding: 15px;
	border-bottom: solid 1px #ccc;
	text-align: center;
	background: var(--color-light-orange);
	color: var(--color-dark-blue);
}

#main_menu {
	background-color: white;
}

#main_menu .menu_tab {
	padding: 0;
}

#main_menu .menu_tab a {
	display: block;
	padding: 10px 15px;
	color: inherit;
	text-decoration: none;
}

#main_menu .menu_tab a:hover {
	color: inherit;
	background: #eee;
}

#footer_menu, #footer_menu a {
	color: #aaa;
	font-size: 12px;
	bottom: 10px;
}

.create_button {
	background-color: var(--color-dark-blue);
	transition: background-color 0.2s;
	height: 58px;
	width: 100%;
	color: white;
	font-weight: bold;
}

.create_button:hover {
	background-color: var(--color-light-orange) !important;
	color: white !important;
}

#create_actions_dropdown .dropdown-menu.show {
	width: 100%;
}

#create_actions_dropdown .dropdown-item:hover {
	background-color: var(--color-light-orange);
}

#left_dashboard #btn_settings {
	cursor: pointer;
	transition: color 0.2s;
	float: right;
}

#left_dashboard #btn_settings:hover {
	color: var(--color-medium-blue);
}

#left_dashboard #edit_solde_button, #left_dashboard #calcul_estimation, #modal_account_settings .remove_shared_with {
	font-size: 10px;
	color: white;
	background-color: var(--color-dark-blue);
	display: inline-block;
	border-radius: 50%;
	text-align: center;
	padding: 5px 7px;
	margin-left: 10px;
    position: relative;
    top: -3px;
    cursor: pointer;
    transition: background-color 0.2s;
}

#left_dashboard #calcul_estimation {
	padding: 5px 10px;
	font-weight: bold;
}

#modal_details_calcul #total_revenus, #modal_details_calcul #total_depenses, #modal_details_calcul #total_total {
	padding: 10px;
	margin: 10px;
	border: solid 1px #eee;
	border-left: none;
	border-right: none;
}

#modal_details_calcul .details_revenu {
	color: var(--color-green);
	font-size: 14px;
}

#modal_details_calcul .details_depense {
	color: var(--color-orange);
	font-size: 14px;
}

#modal_details_calcul .ignore {
	text-decoration: line-through;
	color: #aaa;
}

#left_dashboard #edit_solde_button:hover, #left_dashboard #calcul_estimation:hover {
	background-color: var(--color-medium-blue);
}

#left_dashboard .solde {
	font-weight: bold;
	color:  var(--color-green);
}

#left_dashboard .solde.solde_negatif {
	color: var(--color-orange);
}

#left_dashboard #estimation_solde {
	cursor: pointer;
}

#left_dashboard #estimation_revenus {
	cursor: default;
}

#left_dashboard #estimation_solde, #left_dashboard #estimation_revenus {
	display: inline-block;
	max-width: 200px;
	width: 100%;
	padding: 10px;
	text-align: center;
	color: white;
	font-weight: bold;
	background-color: var(--color-green);
	border-radius: 8px;
	margin-top: 10px;
}


#left_dashboard #estimation_solde.solde_negatif, #left_dashboard #estimation_revenus.solde_negatif {
	background-color: var(--color-orange);
}

#left_dashboard #expandIncomesExpenses #nb_revenus_courants {
	margin-left: 10px;
	background-color: var(--color-green);
	color:  white;
}

#left_dashboard #expandIncomesExpenses #nb_depenses_courantes {
	margin-left: 10px;
	background-color: var(--color-orange);
	color:  white;
}


#left_dashboard #expandIncomesExpenses .accordion-body {
	max-height: 200px;
	overflow-y: auto;
}

.dashboard_date_selector, .liste_date_selector {
	text-align: center;
	margin-bottom: 20px;
}

.dashboard_date_selector .month_arrow, .liste_date_selector .month_arrow {
	font-size: 30px;
	cursor: pointer;
	display: inline-block;
	color: var(--color-light-orange);
	transition: color 0.2s;
}

.dashboard_date_selector .month_arrow:hover, .liste_date_selector .month_arrow:hover {
	color: var(--color-yellow);
}

.dashboard_date_selector #dashboard_selected_date, .liste_date_selector #liste_selected_date {
	display: inline-block;
	margin: 0 10px;
	width: 150px;
	position: relative;
    top: -4px;
    font-size: 20px;
}

#dashboard_display {
	overflow-x: hidden;
}

.calendar, #liste_mouvements {
	position: relative;
}

#liste_mouvements .liste_day_name {
	display: block;
	font-size: 14px;
}

.calendar .calendar_week, .calendar #calendar_day_names {
	padding:  0 15px;
}

.calendar .calendar_day_name {
	text-align: center;
	font-weight: bold;
	font-size: 14px;
}

.calendar .calendar_week .calendar_day {
	border: solid 1px #eee;
}

.calendar .calendar_week .calendar_day.today {
	box-shadow: inset 0 0 5px var(--color-light-orange);
}

.calendar .calendar_week .calendar_day.past_month {
	background-color: #fafafa;
	color:  #aaa;
}

.calendar .calendar_week .calendar_day .calendar_day_details {
	font-size: 12px;
}

.calendar .calendar_week .calendar_day .calendar_day_content {
	height: 130px;
	overflow-y: auto;
}

span.revenu, span.depense {
	display: inline-block;
	font-size: 10px;
	color: white;
	font-weight: bold;
	padding: 3px 5px;
	margin: 2px 4px;
	border-radius: 10px;
}

span.depense {
	background-color: var(--color-orange);
	cursor: pointer;
	transition: background-color 0.2s;
}

span.depense:hover {
	background-color: var(--color-light-orange);
}


span.revenu {
	background-color: var(--color-green);
	cursor: pointer;
	transition: background-color 0.2s;
}

span.revenu:hover {
	background-color: var(--color-light-green);
}

#modal_account .modal-header, #modal_account_settings .modal-header {
	background-color: var(--color-medium-blue);
	color: white;
}

#modal_expense .modal-header, #modal_expense_update .modal-header {
	background-color: var(--color-orange);
	color:  white;
}

#modal_income .modal-header, #modal_income_update .modal-header {
	background-color: var(--color-green);
	color:  white;
}

#modal_account_settings .remove_shared_with {
	background-color: var(--color-orange);
}

#modal_account_settings .remove_shared_with:hover {
	background-color: var(--color-light-orange);
}

#modal_account_settings .user_shared_with {
	font-size: 14px;
	padding-left: 10px;
}

.page_content {
	box-shadow: 0 0 8px #aaa;
	border-radius: 4px;
	background: white;
	margin: auto;
	padding: 3rem;
}

#profile {
	background-color: white;
}

#profile a {
	color: var(--color-dark-blue);
}

#profile a:hover {
	color: var(--color-medium-blue);
}

#profile #edit_profile {
	font-size: 14px;
	color: white;
	background-color: var(--color-dark-blue);
	display: inline-block;
	border-radius: 50%;
	text-align: center;
	padding: 6px 7px;
	margin-left: 20px;
    position: relative;
    top: -5px;
    cursor: pointer;
    transition: background-color 0.2s;
}

#profile #edit_profile:hover {
	background-color: var(--color-medium-blue);
}