@media screen and (min-width: 768px) {
html, body {
    max-width: 100%;
    /* overflow-x: auto; */
	background-color: #333;
}


.forgot-password-link {
    float: left;
    font-size: 80%;
    color: #bbbbbb;
    text-decoration: none;
    transition: color 0.2s ease, text-decoration 0.2s ease;
}

.forgot-password-link:hover {
    color: #ffffff;
    text-decoration: underline;
    cursor: pointer;
}

button.btn:hover {
    background-color: white !important;
    color: black !important;
    border-color: white !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}


.dash-table-tooltip {
    background-color: #222 !important;  /* Your desired background */
    color: #FFA500 !important;          /* Your desired text color */
    border-radius: 6px !important;
    font-size: 16px !important;
    border: 1px solid #FFA500 !important;
}

/* Optional: Change the tooltip arrow color */
.dash-table-tooltip:before, .dash-table-tooltip:after {
    border-bottom-color: #222 !important; /* Match the background */
}

.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner tr {
    min-height: 20px;
    height: 20px;
    padding-top: 0px;
    padding-bottom: 0px;
}

/* Reduce DataTable cell padding */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

.dash-table-container .dash-filter input {
    color: white !important;
    background-color: #1a1a1a !important;
    border: 1px solid #333 !important;
    font-family: Arial !important;
    font-size: 13px !important;
}

.dash-table-container .dash-spreadsheet-container a {
    color: #6FC2FF !important;        /* your custom color */
    text-decoration: underline !important;  /* keep underline */
}

#page-content {
	margin-top: 0rem !important;
}

.logincard{
	width: 45%;
	height: 550px !important;
	position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    
    margin: auto;
}


.form_login{
	margin-top: 15%;
	margin-left: auto;
	margin-right: auto;
	width: 60% !important;
}



.nav {
	--bs-nav-link-padding-y: 0.4rem !important;
}

.logo, .logout{
	font-size: 100%;
	color: white !important;
	textDecoration: none !important; 
	font-family: sans-serif;
	
}

/* Hover side icons to right */
.hover-right {
	position: relative;
	right: 0;
	transition: right ease 0.5s;	
}

/* Hover side icons to right */
.hover-right:hover {
	right: -10px;
}


.side_utility{
	position: fixed;
	display : block;
	margin-top: 15%;
	left: 0;
}

.card{
    border-style : solid;
    /*text-align: center;*/
    background-color: #272c30;
    color: #fff;
    font-family: sans-serif;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2)
}

#open_presentation_tab, #open_centralbank_stance,  #open_trade_ideas, #open_news{
	width: 1.8vh;
	float: inline-end;
}


.cardheader_marketsummary{
	font-family: sans-serif; 
	font-size: 100%;
	width: 95.5%;
	text-align: center;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.summary_slides{
	width: 100%;
	height: 450px;
	transform: 0.5;
}

.summary_slides_enlarged, .centralbank_stance_enlarged{
	width: 100%;
	height: 80vh;
}


.col-1 {
    flex: 0 0 auto;
    width: 4.5% !important;
}

.col-11 {
    flex: 0 0 auto;
    width: 95.5% !important;
}

.navbar{
	height: 100% !important;
}

#open-offcanvas{
	color: white;
}

.modal-header, .modal-body, .modal-footer{
	font-size: 1.5vh;
	font-family: sans-serif;
	color: white;
	background-color: #272c30;
}

.offcanvas-header, .offcanvas-body{
	font-size: 1.5vh;
	font-family: sans-serif;
	color: white;
	background-color: #272c30;
}


.btn:not(:disabled):not(.disabled) {
    cursor: pointer;
    font-size: 100%;
}

.hala_title{
	color: #ececf1; 
	font-weight: 600; 
	font-size: 150%;
	text-align: center;
	display: block;
	margin-left: auto;
	margin-right: auto;
}


.hala_image {
	/* display: block; */
	margin-left: auto;
	margin-right: auto;
	height: 50%;
}

.hala_image_row {
	height: 40%;
}

#hala_suggestions{
	padding-left: 10%;
	padding-right: 10%;
	font-size: 100%;
}

#hala_chatbot {
	width: 100%;
}

.hala_suggestions_image{
	width: 25%;
}

.hala_suggestions_text {
	color: #ececf1; 
	font-size: 100%;
}

.hala_suggestions_image_text {
	display: inline-flex;
	align-items: center;
	margin: 0 auto;
	width: 50%
}

.hala_buttons {
	color: #ececf1;
	background-color: #40414f;
	border-color: #272c30;
}


.disclaimer{
	color: #ececf1; 
	font-size: 60%;
}

#search-input-chatbot{
	border-width: 0.3vh;
	background-color: #40414f;
	border-color: #40414f;
	color: #fff;
}

#submit-button-chatbot{
	color: #ececf1; 
	background-color: #40414f;
	border-color: #40414f;
	
}

#close_presentation_tab, #close_centralbank_stance, #close_trade_ideas, #close_news, #close_reset_password{
	width: auto;
}


.centralbank_stance{
	height: 500px;
	overflow-y: auto;
	text-align: justify;
}

ul {
	font-size: 100% !important;
	color: #ececf1 !important;
}

.centralbank_speeches_header{
	text-decoration: underline;
	font-size: 100%;
	color: #ececf1 !important;
}

#trade_idea .trich_carousel .slick-next:before{
	color: white;
	margin-left: -100% !important;
	
}


#trade_idea .trich_carousel .slick-prev:before{
	color: white;
	margin-left: 70% !important;

}


#international_overall_anxiety .trich_carousel .slick-next:before{
	color: white;
	margin-left: -100% !important;
	
}


#international_overall_anxiety .trich_carousel .slick-prev:before{
	color: white;
	margin-left: 70% !important;

}

#modal_xl_trade_ideas .trich_carousel .slick-next:before{
	color: white;
	margin-left: -100% !important;
	
}


#modal_xl_trade_ideas .trich_carousel .slick-prev:before{
	color: white;
	margin-left: 70% !important;

}

.trade_idea_iframe{
	width: 98%;
	height: 450px;
}

#news_box {
	height: 100%;
}

.news_iframe{
	width: 100%;
	height: 100%;
}

.btn.disabled, .btn:disabled {
	opacity: 1 !important;
}

.centralbank_stance_modal{
	height: 75vh;
	overflow-y: auto;
	font-size: 100%;
}

#carousel .slick-slider{
	height: 450px;
}

.news_iframe_enlarged{
	width: 100%;
	height: 75vh;
}

/*.btn-primary:hover {
	color: black;
    background-color: white;
    border-color: #272c30;
	
}*/

/*.btn-primary.focus, .btn-primary:focus{
    color: black;
    border-color: #272c30;
    box-shadow: 0 0 0 0.2rem #40414f;
    
}*/

.col-md-9 {
    flex: 0 0 auto;
    width: 73% !important;
  }

.btn-secondary{
	color: white !important;
	background-color: #40414f !important;
	border-color: #40414f !important;
	font-family: sans-serif;
}


.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner.dash-fill-width .cell table {
	font-size: 100% !important;
}

.nav-tabs .nav-link{
	color: white;
	font-size: 100%;
}


#market_summary_layout .trich_carousel .slick-next:before{
	color: white;
	margin-left: -100% !important;
	
}


#market_summary_layout .trich_carousel .slick-prev:before{
	color: white;
	margin-left: 70% !important;

}

#tab_content_city .trich_carousel .slick-next:before{
	color: white;
	margin-left: -100% !important;
	
}


#tab_content_city .trich_carousel .slick-prev:before{
	color: white;
	margin-left: 70% !important;

}

/*dropdown style*/
.dash-dropdown{
	color: #fff !important;
	font-size: 100%;
}

/*dropdown submenu style*/
.dash-dropdown .VirtualizedSelectOption {
	background-color: #333;
	color: #fff !important;
	font-size: 100%;
}	

/*dropdown submenu style*/
.dash-dropdown .VirtualizedSelectOption:hover {
	background-color: gray;
	color: #fff !important;
	font-size: 100%;
}

.Select--multi .Select-value{
	color : #fff !important;
}

.Select-menu-outer {
    background-color: #333 !important;
    color: white !important;
}

.Select.has-value.Select--single > .Select-control .Select-value .Select-value-label{
	color: #fff !important;
}

.Select-control{
	background-color: #333 !important;
}

#tab_content_dq{
	height: 530px;
}

#tab_content_dq .trich_carousel .slick-next:before{
	color: white;
	margin-left: -100% !important;
	
}


#tab_content_dq .trich_carousel .slick-prev:before{
	color: white;
	margin-left: 70% !important;

}

.DateInput_input__focused{
	background-color: #333;
	font-size: 100%;
	color: #fff;
}

.DateInput{
	background: #333 !important;
	font-size: 150% !important;
	color: #fff !important;
	width: 30% !important;
}

.DateRangePickerInput{
	background-color: #333 !important;
	font-size: 100% !important;
	color: #fff !important;
}

.DateInput_input{
	background-color: #333 !important;
	font-size: 100% !important;
	color: #fff !important;
}

.CalendarMonth{
	background-color: #333 !important;
}

.CalendarMonthGrid {
	background: #333 !important;
}

.CalendarDay__selected_span:active, .CalendarDay__selected_span:hover{
	background-color: gray !important;
}

.CalendarDay__selected, .CalendarDay__selected:active, .CalendarDay__selected:hover{
	background-color: #272c30 !important;
	border-color: #272c30 !important;
}

.CalendarDay__selected_span {
	background-color: #333 !important;
	border-color: #333 !important;
}

.CalendarMonth_caption {
	color: #fff !important;
}

.CalendarDay__default:hover{
	background-color: #333 !important;
}

.CalendarDay__default{
	background-color: #333 !important;
	color: white !important;
	border-color: #333 !important;
}

.DayPicker_transitionContainer__horizontal{
	background: #333 !important;
}

.DayPickerNavigation_leftButton__horizontalDefault{
	background: #333 !important;
}

.DayPickerNavigation_svg__horizontal{
	background-color: #333;
	color: white;
}

.DayPickerNavigation_rightButton__horizontalDefault{
	background-color: #333;
}

.code, kbd, pre, samp {
    font-family: var(--bs-font-monospace) !important;
}

pre {
    display: block !important;
    margin-top: 0 !important;
    margin-bottom: 1rem !important;
    overflow: auto;
    font-size: .875em !important;
}

pre code.hljs {
	height: 450px;
}

.Select-input > input{
	color: #fff;
}

.Select, .Select div, .Select input, .Select span{
	text-align: left;
}

/* .mantine-kcpopt{ */
	/* background-color: #333; */
	/* color: #fff; */
	/* font-family: sans-serif; */
	
/* } */

/* .mantine-Select-dropdown, .mantine-Select-item { */
	/* background-color: #333; */
	/* color: #fff !important; */
	/* font-family: sans-serif; */
	
/* } */

.mantine-Select-item[data-selected], .mantine-Select-item[data-selected]:hover, .mantine-Select-item[data-hovered]{
    background-color: gray !important;
}

.mantine-Select-item:hover{
    background-color: gray !important;
}	

.mantine-Select-groupLabel:hover > .mantine-Select-item:hover{
	background-color: gray !important;
}

.mantine-753b79[data-orientation="vertical"]{
	background-color: #333 !important;
}

.mantine-6h7z1o[data-hovered] {
    background-color: gray !important;
}

.accordion{
	--bs-accordion-bg: #3b3c36;
	--bs-accordion-btn-bg: #454545;
	--bs-accordion-btn-color: #ffffff;
	overflow-y: auto;
	--bs-accordion-btn-icon: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFFFFF'%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);

}

.accordion-button{
	font-size: 45%;
}

.rc-slider-mark-text, .rc-slider-mark-text rc-slider-mark-text-active{
	font-size: 90% !important;
}

#tool_calendar{
	width: 40% !important;
}

#tool_utility{
	width: 40% !important;
}

#add {
	width: 10% !important;
}

#subtract {
	width: 10% !important;
}

.mantine-1f3oat5 {
	font-size: medium !important;
}

.table-hover tbody tr:hover {
                    background-color: #495057 !important;
                    color: #ffffff !important;
                }
                
.table-hover-blue tbody tr:hover {
    background-color: #1e3d59 !important;
    color: #ffffff !important;
}

.table-hover-green tbody tr:hover {
    background-color: #2d5a3d !important;
    color: #ffffff !important;
}

.table-hover-orange tbody tr:hover {
    background-color: #6d4423 !important;
    color: #ffffff !important;
}

.table-hover-red tbody tr:hover {
    background-color: #5d2f2f !important;
    color: #ffffff !important;
}


}



@media screen and (max-width: 768px) {

html, body {
    max-width: 100%;
    /* overflow-x: auto; */
	background-color: #333;
}

.logo {
	font-size: 70%;
	color: white !important;
	textDecoration: none !important; 
	font-family: sans-serif;
	
}

#page-content {
	margin-top: 0rem !important;
}

.nav {
	--bs-nav-link-padding-y: 0.4rem !important;
}


.side_utility {
    position: fixed;
	display: none;
	left: 50%;
	bottom: 0;
	transform: translate(-50%, -50%);
	margin: 0 auto;
}

.card{
    border-style : solid;
    text-align: center;
    background-color: #272c30;
    color: #fff;
    font-family: sans-serif;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
	width: 100%;
}

#open_presentation_tab, #open_centralbank_stance, #open_trade_ideas, #open_news{
	display: none;
}

.cardheader_marketsummary{
	font-family: sans-serif; 
	font-size: 70%;
	text-align: center;
	display: block;
	margin-left: auto;
	margin-right: auto;

}

.summary_slides{
	width: 100%;
	height: 30vh;
}

.navbar{
	height: 100% !important;
}

.col-1 {
    flex: 0 0 auto;
    width: 8.333% !important;
}

#btn_sidebar {
    color: white;
    font-size: 50%;
    margin-top: 10%;
    margin-left: -10%;
}

.modal-header, .modal-body, .modal-footer{
	font-size: 1.2vh;
	font-family: sans-serif;
	color: white;
	background-color: #272c30;
}

.btn:not(:disabled):not(.disabled) {
    cursor: pointer;
    font-size: 35%;
	width: 100%;
}

#hala_chatbot {
	margin-top: 8%;
}

.hala_title{
	color: #ececf1; 
	font-weight: 600; 
	font-size: 120%;
	text-align: center;
	display: block;
	margin-left: auto;
	margin-right: auto;
}


.hala_image {
	display: block;
	margin-left: auto;
	margin-right: auto;
	height: 40%;
	
}


#hala_suggestions{
	font-size: 100%;
}


.hala_suggestions_text {
	color: #ececf1; 
	font-size: 35%;
}

.hala_suggestions_image_text {
	display: inline-flex;
	align-items: center;
	margin: 0 auto;
	width: 50%
}

.hala_suggestions_image {
	width: 30%
}

.hala_buttons {
	color: #ececf1;
	background-color: #40414f;
	border-color: #272c30;
}

.hala_image_row {
	height: 35%;
}

.disclaimer{
	color: #ececf1; 
	font-size: 35%;
}


#search-input-chatbot{
	border-width: 0.3vh;
	background-color: #40414f;
	border-color: #40414f;
	color: #fff;
	font-size: 35%;
}

#submit-button-chatbot{
	color: #ececf1; 
	background-color: #40414f;
	border-color: #40414f;
	font-size: 35%;
	
}

.centralbank_stance{
	height: 45vh;
	overflow-y: scroll;
	text-align: left;
}

ul {
	font-size: 45% !important;
	color: #ececf1 !important;
}

.centralbank_speeches_header{
	text-decoration: underline;
	font-size: 55%;
	color: #ececf1 !important;
}

#trade_idea{
	height: 55vh !important;
	overflow-y: auto;
}

#trade_idea .trich_carousel .slick-next:before{
	color: white;
	margin-left: -100% !important;
	
}


#trade_idea .trich_carousel .slick-prev:before{
	color: white;
	margin-left: 70% !important;

}

.trade_idea_iframe{
	width: 98%;
	height: 65vh;
}

#news_box {
	height: 100%;
	margin-top: 10%;
}

.news_iframe{
	width: 100%;
	height: 50vh;
	margin-bottom: -4rem;
}

.btn.disabled, .btn:disabled {
	opacity: 1 !important;
	font-size: x-small;
}


.btn-primary:hover {
	color: black;
    background-color: white;
    border-color: #272c30;
	
}

.btn-primary.focus, .btn-primary:focus{
    color: black;
    background-color: white !important;
    border-color: #272c30;
    box-shadow: 0 0 0 0.2rem #40414f;
    
}



}