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

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

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


.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;
}


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

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

.navbar{
	height: 100% !important;
}

#btn_sidebar{
	color: white;
}

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

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


.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner input:not([type=radio]):not([type=checkbox]){
	color: white !important;
}

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


#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;

}

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


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

}


.show-hide{
	display: none;
}


.nav-tabs .nav-link {
	color: white;
}

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

.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;
    
}

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


.Select, .Select div, .Select input, .Select span{
	background-color: #333;
	color: white !important;
}

.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th{
	background-color: #333;
}

.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner td{
	background-color: #333;
}

.dash-table-container .previous-next-container button.previous-page, .dash-table-container .previous-next-container button.next-page, .dash-table-container .previous-next-container button.first-page, .dash-table-container .previous-next-container button.last-page{
	background-color: #272c30;
	color: white;
}


}



@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;
	
}

.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_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;
    
}


}