.main-header .logo {
  font-family: "Arial", Times, "Times New Roman", serif;
  font-weight: bold;
  font-size: 24px;
}

/* general css for tabPanel in dashboard
.tab-pane {
  font-family: "Arial", Times, "Times New Roman", serif;
  font-weight: bold;
  font-size: 12px;
  background-color:green;
  width:100%;
  min-height:1000px;
  margin-top:0px;
  margin-bottom:0px;
  float:none;
}
*/



/*contour initial: silver is the initial color*/
.skin-blue, .bslib-page-navbar {
  background-color:#934f4f /*#483939 silver*/ ;
  width:100%;
  background-image: url('../image/thinkai_logo.jpg');
  background-size: 10%;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position-y: 40%;
}


/* initial container content */
.content {
  min-height:1000px;
}

#shiny-tab-dashboard  {
  font-family: "Arial", Times, "Times New Roman", serif;
  font-weight: bold;
  font-size: 12px;
  background-color:gray /*silver*/;
  width:100%;
  min-height:900px;/*min-height:1500px;*/
  margin-top:0px;
  margin-bottom:0px;
  float:none;
  border: 1px black solid;
}

#shiny-tab-datacon  {
 
  font-family: "Arial", Times, "Times New Roman", serif;
  font-weight: bold;
  font-size: 12px;
  background-color:gray /*silver*/;
  width:100%;
  min-height:1000px;
  margin-top:0px;
  margin-bottom:0px;
  float:none;
  border: 1px black solid;
}



#shiny-tab-contact_client  {
 
  font-family: "Arial", Times, "Times New Roman", serif;
  font-weight: bold;
  font-size: 12px;
  background-color:silver;
  width:100%;
  min-height:1000px;
  margin-top:0px;
  margin-bottom:0px;
  float:none;
  
}

#shiny-tab-compte_client  {
 
  font-family: "Arial", Times, "Times New Roman", serif;
  font-weight: bold;
  font-size: 12px;
  background-color:silver;
  width:100%;
  min-height:1000px;
  margin-top:0px;
  margin-bottom:0px;
  float:none;
  
}

#shiny-tab-tuto  {
 
  font-family: "Arial", Times, "Times New Roman", serif;
  font-weight: bold;
  font-size: 12px;
  background-color:silver;
  width:100%;
  min-height:1000px;
  margin-top:0px;
  margin-bottom:0px;
  float:none;
  
}

#shiny-tab-article  {
 
  font-family: "Arial", Times, "Times New Roman", serif;
  font-weight: bold;
  font-size: 12px;
  background-color:silver;
  width:100%;
  min-height:1000px;
  margin-top:0px;
  margin-bottom:0px;
  float:none;
  
}

#figure-gen-side-panel{
  padding-left: 4px;
  /*padding-right: 4px;*/
}


#figure-gen-side-panel .well{
  /*padding: 3px;
  background-color: #131313;*/
  border: 1px black solid;
}

/* sidebar menu css */
.skin-blue .left-side, .skin-blue .main-sidebar, .skin-blue .wrapper, .bslib-page-navbar .left-side, .bslib-page-navbar .main-sidebar, .bslib-page-navbar .wrapper {
    background-color: #114848 /* #066262 #40033c #23054e #066262 teal #474d50 */; /* to have the initial color, comment this css code */
	font-family: 'Source Sans Pro',sans-serif;
	font-size: 18px;
}

/* Make sidebar which contains menu Dashboard data reading ... */
#sidebarCollapsed{
  position: fixed;
  z-index: 2000;
}

.container-fluid .tab-content .wrapper{
  margin-left: -30px;
}

.skin-blue .sidebar a,.bslib-page-navbar .sidebar a {
  color: #ffffff;
}

#class_data_exploration{
	font-family: "Arial", Times, "Times New Roman", serif;
	background-color:silver;
	font-weight: bold;
	font-size: 15px;
	color:white;
}

/* table column names*/
thead{
	background-color:teal;
	color:white;
	/*font-size: 10px;*/
	/*text-align:left;*/
}

/*  User dashboard menu css */
/*
.user-header {
  background-color: #463cbc;
}*/

/*
* Dashboard main div
*/
.tab-pane.dashboard-tabpane{
  /*min-height:1150px; */
  min-height: 74vh;
  max-height: 74vh;
  max-width:100%;
  /*padding-bottom: 100px*/;
  padding:10px 10px 100px 10px; 
  overflow-y: auto /*-webkit-paged-y*/;
}


/* For select input on dashboard panel make the select input div fit the parent container */
/* when the screen is greater than 601px and less tha 1300px do this */

#shiny-tab-dashboard .shiny-flow-layout>div {
    width: 99%;
}
	
@media screen and (max-width: 1300px){

  #shiny-tab-dashboard .shiny-flow-layout>div {
    display: inline-block;
    vertical-align: top;
    width: 100%;
	}
}

@media screen and (max-width: 1100px) and (min-width:501px){

	#xyzfacet_axis_var{
    display: flex;
    flex-wrap: wrap;
  }
  
  #xyzfacet_axis_var > div:nth-child(1),
  #xyzfacet_axis_var > div:nth-child(2),
  #xyzfacet_axis_var > div:nth-child(3),
  #xyzfacet_axis_var > div:nth-child(4){
    width: 50%;
  }
  
}

/*@media screen and (min-width: 768px) and (max-width: 1600px){
#shiny-tab-dashboard.tab-pane.active .container-fluid .row .col-sm-3{
    width:23%;
  }
}*/

@media screen and (min-width: 1101px) and (max-width: 1300px){
  /*#shiny-tab-dashboard.tab-pane.active .container-fluid .row .col-sm-3,*/
  #shiny-tab-dashboard.tab-pane.active .container-fluid > .row >.col-sm-2{
    width:30%;
  }
  
  #shiny-tab-dashboard.tab-pane.active .container-fluid .row:nth-child(1) .col-sm-9{
    width:70%;
  }
}

@media screen and (min-width: 1301px) and (max-width: 1600px){
  /*#shiny-tab-dashboard.tab-pane.active .container-fluid .row .col-sm-3,*/
  #shiny-tab-dashboard.tab-pane.active .container-fluid > .row >.col-sm-2{
    width:25%;
  }
  
  #shiny-tab-dashboard.tab-pane.active .container-fluid .row:nth-child(1) .col-sm-9{
    width:75%;
  }
}

@media screen and (max-width: 600px){
  /*#shiny-tab-dashboard.tab-pane.active .container-fluid .row .col-sm-3,*/
  #shiny-tab-dashboard.tab-pane.active .container-fluid > .row >.col-sm-2{
    width:100%;
  }
  
  #shiny-tab-dashboard.tab-pane.active .container-fluid .row:nth-child(1) .col-sm-9{
    width:100%;
    flex-wrap: wrap;
  }
}

@media screen and (min-width: 1601px){
  #shiny-tab-dashboard.tab-pane.active .container-fluid > .row >.col-sm-2{
    width:auto;
  }
}

@media screen and (min-width: 1601px){
  #shiny-tab-dashboard.tab-pane.active .container-fluid .row .col-sm-3{
    width:18%;
  }
  
  #shiny-tab-dashboard.tab-pane.active .container-fluid .row .col-sm-9{
    width:82%;
  }
}

@media screen and (max-width: 1300px) and (min-width:1101px){
	
	#shiny-tab-dashboard > div > div:nth-child(2) > .col-sm-3 > form > div > div > div:nth-child(13) > div > div,
	#shiny-tab-dashboard > div > div:nth-child(2) > div.col-sm-3 > form > div > div > div:nth-child(3),
  #shiny-tab-dashboard > div > div:nth-child(2) > div.col-sm-3 > form > div > div > div:nth-child(4){
    width: 100%;
  }
 
}

@media screen and (min-width:601px) and (max-width: 1100px) {

	#shiny-tab-dashboard > div > div:nth-child(2) > .col-sm-3 > form > div > div > div:nth-child(13) > div > div,
	#shiny-tab-dashboard > div > div:nth-child(2) > div.col-sm-3 > form > div > div > div:nth-child(3),
  #shiny-tab-dashboard > div > div:nth-child(2) > div.col-sm-3 > form > div > div > div:nth-child(4){
    width: 49%;
  }
}

@media screen and (max-width:767px){
  .file-data-read-panel .well{
    overflow-x: hidden;
  }
}

@media screen and (max-width: 1100px) {
  .col-sm-2 {
    width: 100%;
  }
  
  .col-sm-3 {
    width: 100%;
  }
  .col-sm-9 {
    width: 100%;
  }
  
  .col-sm-6 {
    width: 100%;
  }
  
}


#figure-gen-main-panel{
  margin-bottom: auto;
  padding-left: 4px;
  padding-right: 4px;
}

#figure-gen-main-panel .well{
  padding-right: 10px;
  padding-left: 10px;
  padding-bottom: 10px;
}
  
@media screen and (max-width: 600px){
	
	/* when the screen is less than 600px do this for @param shiny-tab-dashboard */
	#shiny-tab-dashboard > div > div:nth-child(2) > .col-sm-3 > form > div > div > div:nth-child(13) > div > div,
	#shiny-tab-dashboard > div > div:nth-child(2) > div.col-sm-3 > form > div > div > div:nth-child(3),
  #shiny-tab-dashboard > div > div:nth-child(2) > div.col-sm-3 > form > div > div > div:nth-child(4){
    width: 100%;
  }
  
  /* main @container-fluid display on device less than 600px */
  .container-fluid{
    padding-right: 0;
    padding-left: 5px;
  }
  
  #figure-gen-main-panel{
    padding-right: 0;
    padding-left: 0;
    width: 98%;
  }
  
  #figure-gen-main-panel .well{
    padding-right: 0;
    padding-left: 5px;
  }
  
}

@media screen and (min-width: 601px) and (max-width: 810px){
  
  #figure-gen-main-panel{
    padding-right: 0;
    padding-left: 0;
    width: 100%;
  }
  
  #figure-gen-main-panel .well{
    /*padding-right: 0;
    padding-left: 5px;*/
    padding-right: 10px;
    padding-left: 10px;
  }
  
  .container-fluid{
    padding-right: 0px;
  }
  
  .container-fluid.main-thinkai-page{
    padding-right: 0px;
    padding-left: 6px;
  }
}


/* when the screen is less than 1300px do this */

@media screen and (max-width: 1300px){
  
  #shiny-tab-dashboard{
    overflow-y: hidden;
  }
  
  #shiny-tab-datacon{
    /*overflow-y: hidden;*/
    overflow-x: hidden;
    min-height: 1600px;
  }
  
  .file-data-display-panel{
    
  }
  /*
  .file-data-display-panel div div.well div.tabbable div.tab-content div.tab-pane.active{
    min-height:500px;
  }*/
  
  .tab-pane.dashboard-tabpane{
    padding-left: 0px;
  }
}



/* Make sidebar menu button position fixed and top */

@media screen and (max-width: 1300px){
	
	.sidebar-menu{
	  margin-top: 20px;
	}

}

@media screen and (min-width: 769px) and (max-width: 1200px){
	
	li.sidebar-toggle{
	  position: fixed;
    margin-left: 80px;
    top: 0;
	}

}

@media screen and (min-width: 1201px) and (max-width: 1300px){
	
	li.sidebar-toggle{
	  position: inherit;
    margin-left: auto;
    top: 0;
	}
}

@media screen and (max-width: 768px){
	
	li.sidebar-toggle{
	  position: fixed;
    margin-left: 105px;
    top: 5px;
	}

}

/* make the title lecture des fichiers width 100% */

@media screen and (max-width: 1200px){
	
	.lecture-fichier{
	  width: 100%;
	}
 
}


/* Excel file reading dialogue box*/

@media screen and (max-width: 768px){
	#r_file_reading_dialogue_box{
	  width: 90%;
	  font-size: 10px;
	  left: 12.4px;
    top: 289px;
	}
 
}

/* content wrapper margin left for phones adptation*/

@media (max-width: 767px){
	.content-wrapper{
	  margin-left: 10px;
	}
	
	.content{
	  padding-right: 0px;
    padding-top: 0px;
	}
	
	#Polllytics{
	  font-size: 10px;
	}
	
	#shiny-tab-dashboard.tab-pane.active .container-fluid .row:nth-child(1) .col-sm-9 .btn{
	  margin-top: 3px;
    margin-bottom: 3px;
	}
}

@media screen and (min-width: 768px) and (max-width: 810px){
  .content{
	  padding: 2px;
	}
}

/*Set the head of main dahboard page style                                  */
#shiny-tab-dashboard > div:nth-child(1) > div:nth-child(1){
  display:flex;
  padding: 6px;
  flex-wrap: wrap;
}

@media screen and (max-width: 915px){
	#shiny-tab-dashboard > div:nth-child(1) > div:nth-child(1){
	  padding-left: 12px;
    padding-right: 12px;
	}
	
	#shiny-tab-dashboard > div:nth-child(1) > div:nth-child(1) div.col-sm-9:nth-child(3){
	  margin-left: 0;
	  padding-top: 3px;
	}
 
 #shiny-tab-dashboard > div:nth-child(1) > div:nth-child(1) div.col-sm-9:nth-child(3) button{
	  font-size: 10px;
	}
}

#dashBoardFigmainPanel{
  position: relative;
  z-index: 1000;
}


/*Transform tabsetmenu of the dashboard*/
/* Add to your CSS file or tags$style() */
@media (max-width: 768px) {
  
  /* Container for the dropdown */
  #dashBoardFigmainPanel.nav.nav-pills {
    position: relative;
    display: block;
    border: 1px solid #ddd;
    border-radius: 5px;
    /*background: white;*/
    margin-bottom: 15px;
  }
  
  /* Hide all list items by default */
  #dashBoardFigmainPanel.nav.nav-pills > li {
    display: none;
    margin: 0;
    width: 100%;
  }
  
  /* Show only the active tab and action buttons */
  /*#dashBoardFigmainPanel.nav.nav-pills > li.active,
  #dashBoardFigmainPanel.nav.nav-pills > li:nth-last-child(-n+3) {
    display: block !important;
    border-bottom: 1px solid #f0f0f0;
  }*/
  
  #dashBoardFigmainPanel.nav.nav-pills > li.active{
    display: block !important;
    border-bottom: 1px solid #f0f0f0;
  }
  
  /* Remove borders from last items */
  #dashBoardFigmainPanel.nav.nav-pills > li:nth-last-child(-n+3) {
    border-bottom: none;
  }
  
  /* Make the last 2 li non pointable*/
  #dashBoardFigmainPanel.nav.nav-pills > li:nth-last-child(-n+2) {
    pointer-events: none;
  }
  
  /* Style the dropdown trigger */
  #dashBoardFigmainPanel.nav.nav-pills::before {
    content: "☰ Menu";
    display: block;
    padding: 12px 15px;
    background: linear-gradient(135deg, #4d4747, #536171);
    color: white;
    cursor: pointer;
    border-radius: 4px 4px 0 0;
    font-weight: 600;
    position: relative;
    transition: all 0.3s ease;
  }
  
  /* Dropdown arrow */
  #dashBoardFigmainPanel.nav.nav-pills::after {
    content: "▾";
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    font-size: 16px;
    pointer-events: none;
  }
  
  /* Make the entire container focusable */
  #dashBoardFigmainPanel.nav.nav-pills {
    outline: none;
  }
  
  /* Show dropdown when container is focused (clicked) */
  #dashBoardFigmainPanel.nav.nav-pills:focus-within::before {
    /*background: linear-gradient(135deg, #0056b3, #004494);*/
    background:linear-gradient(135deg, #4d4747, #536171);
    border-radius: 4px 4px 0 0;
  }
  
  #dashBoardFigmainPanel.nav.nav-pills:focus-within::after {
    content: "▴";
  }
  
  #dashBoardFigmainPanel.nav.nav-pills:focus-within > li {
    display: block !important;
    animation: fadeIn 0.3s ease;
  }
  
  #dashBoardFigmainPanel.nav.nav-pills:focus-within {
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    z-index: 1000;
  }
  
  /* Also keep hover for desktop touch devices */
  #dashBoardFigmainPanel.nav.nav-pills:hover::before {
    background: linear-gradient(135deg, #0056b3, #004494);
  }
  
  #dashBoardFigmainPanel.nav.nav-pills:hover::after {
    content: "▴";
  }
  
  /*#dashBoardFigmainPanel.nav.nav-pills:hover > li {
    display: block !important;
  }*/
  
  /* Make the trigger area tappable */
  #dashBoardFigmainPanel.nav.nav-pills::before {
    -webkit-tap-highlight-color: transparent;
    user-select: none;
  }
  
  /* Style the tabs in dropdown */
  #dashBoardFigmainPanel.nav.nav-pills > li a {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    text-decoration: none;
    /*color: #333;*/
    transition: all 0.2s ease;
    border: none !important;
    border-radius: 0;
    width: 100%;
    box-sizing: border-box;
  }
  
  /* Animation */
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
  }
}