@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300&display=swap');

/* ===================================================================================== */

html,body{

	background-color: white;
	font-family: 'Kanit', sans-serif;
	font-size: 1.1em;
	width: 100%;

}

body{

		background-color: #707070;

}

#map {
  height: 400px;
  /* The height is 400 pixels */
  width: 90%;
  /* The width is the width of the web page */
}

hr{

	margin-top: 35px;
	background-color: lightgray;
	width: 85%;

}

hr#header-line{

	margin: 10px 0;
	width: 100%;
	background-color: gray;

}

/*----------------- GO TO Top btt -----------------------------*/

#topBtn {
	display: none;
	position: fixed;
	bottom: 20px;
	right: 30px;
	z-index: 99;
	font-size: 18px;
	border: none;
	outline: none;
	background-color: rgba(184, 182, 182, 0.74);
	color: black;
	cursor: pointer;
	padding: 15px;
	border-radius: 5px;
}
  
#topBtn:hover {
	background-color: #555;
}

 /*--------------------------------------------------------------*/ 

a.dropdown-item.active {

	background-color: lightgray;
	color: black;

}

a#banner:hover{

	text-decoration: none;

}

h1,h2{

	padding : 0 20px 0 20px;

}

div#btn-contain{

	display: inline-flex;

}

#banner-text{

	margin: 0;

}

h3#banner-text{

	margin-top: -5px;

}

#dashboard-header{

	display: flex; 
	padding : 20px 30px;
	margin: 20px 20px 50px 20px;
	justify-content: center;
	background-color: #F7F7F7;
	width: auto;

}

#dash-div {

	margin: 0 5% 20px 5%;

}

#img-text,#img-text-reverse{

	display: flex;
}

#header-banner{

	background-color: #080808;
	height: 200px;
	margin: 0;
	display: flex;
	justify-content: center;

}

#banner-contain{

	justify-content: start;
	color: gray;

}

nav{

	border-bottom: solid lightgray 1px;
	background-color: white;
	width: 100%;

}

a{

	margin: 0 10px 0 0 ;

}

#Reg_navbar{

	padding-top : 0 ;
	padding-bottom: 0;

}

button#lower-btn{

	margin : 10px 20px

}

a#banner{

	margin: 0;
	padding: 0;

}

p{

	margin: 0;
	padding: 20px 30px 0px 30px;
	color : #454545 ;
	text-justify: distribute;

}

p#firstParagraph{

	padding: 60px 30px 0px;

}

p#imageDiscript{

	font-size: 0.85em;
	padding: 20px 10px 0;

}

p#text-in-box{

	padding: 20px 0px 0px 0px;
	margin-bottom: 30px;
    height: 40%;
	font-size: 1rem;

}

p#collision-top{

	padding-top: 0px;

}

article{

	margin : 30px 20% 0 20%;
	padding: 40px ;
	background-color: white;
	border: solid lightgray 1px;
	border-radius: 10px;

}

footer{

	margin-top: 50px ;
	background-color : white;
	display: flex;
	padding-top: 20px;
	text-align: center;
	border-top: solid lightgray 1px;

}

b#b-inarct{

	font-size: 1.4em;
	margin-right: 3px;

}

b#b-extra{

	font-size: 1.8em;

}

/* ======================================== Footer Parts =================================================== */

.img-contain{
	
	width: 100%;
	display: flex;
	justify-content: right;
	padding: 20px 50px;

}

.img-contain a{
	
	margin: 0;

}

.img-contain #footer-banner{

	width : 100% ;
	display: flex;
	justify-content: left;
	color : #454545 ;

}

#footer-img-link{

	display: flex; 
	width: 100% ; 
	justify-content: right ;

}

#footer-img-1{width : 180px ; height : 90px ;}
#footer-img-2{width : 160px ; height : 100% ;}
#footer-img-3{width : 90px ; height : 100% ;}

#footer-banner img {

	margin-right: 20px ;
	width: 100px ;
	height : 100px ;

}

#footer-text {

	text-align: left;
	padding: 10px 0;

}

#footer-text p {

	padding: 0;
	margin: 0;

}

#footer-text h3 {

	padding: 0;
	margin: 0;

}

#footer-text hr {

	margin : 5px 0 0;
	width: 100%;

}

/* ========================================================================================================== */

#imginText-left{

	padding-top: 28px;
	margin-left: 20px;
	height: auto;

}

#imginText-right{

	padding-top: 28px;
	margin-right: 20px;
	height: auto;

}

#imginText-middle{
	
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 10px;
	height: auto;

}

#textarea-head{

		margin-left: 1.5%;

}

#ta{

	width: 97% ; 
	margin: 0 1.5% 30px 1.5%;

}

#input-box{

	width: 47% ; 
	margin: 0 1.5% 0 1.5%;

}

#login-form{

	margin : 50px 30% 50px 30%;

}

div.carousel-inner {

	background-color: #E2E2E2;

}

#carouselExampleIndicators .carousel-item img{

  	object-fit: contain;
  	object-position: center;
  	overflow: hidden;
  	width:100%;
  	height:25em;

}

.carousel-thumbnails .carousel-indicators img {

    max-width: 100px;
    height: 50px;
    overflow: hidden;
    display: block;

}


.carousel-thumbnails .carousel-indicators li {

    height: auto;
    max-width: 100px;
    width: 100px;
    border: none;
	box-shadow: 1px 3px 5px 0px rgba(0,0,0,0.75);

}

.carousel-control-next, .carousel-control-prev /*, .carousel-indicators */ {
    filter: invert(100%);
}


/* ============================= FLex Box Display =============================  */

div#button-container {

	display: flex;
	flex-wrap: wrap;
	justify-content: center;

}

div#outer-contain{

	padding : 0 ;
	margin-top : 50px;
	display: flex;
	flex-wrap: wrap;
	/*justify-content: start;*/
	align-content: start;

}

div#data-box{

	padding : 10px 10px 20px 10px;
	height: 100%;
	color: black;

}

div#input-div {

	display: flex; 
	margin-bottom: 30px; 	

}

div#data-cnt-box {

	font-size: 1.2em;
	background-color: #F7F7F7;/*#F3F3F3*/
	padding : 10px 30px ; 
	border-radius: 10px ;
	margin: 20px 20px 20px;
	text-align: center;
	color: black

}


#imgShowcase{

	margin: 15px;

}

#data-box:hover{

	background-color: #CBD2D5;

}

#data-cnt-box:hover{

	background-color: #F2F2F2;

}
/* ===============================================================================  */

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

	.carousel-thumbnails .carousel-indicators img {

		height: 30px;
	
	}

}

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

	article{

		margin-top:30px ;

	}

	p#firstParagraph{

		padding: 20px 30px 0px;
	
	}

	p#text-in-box{

		font-size: 0.8rem;
	
	}

	.img-contain{

		display : inline;

	}

	#footer-img-link{

		justify-content: center ;
		margin-top: 30px;
	}

	.img-contain #footer-banner{

		width : 100% ;
		display: flex;
		justify-content: center;

	}

	#img-text{

		display: inline;

	}

	#img-text-reverse{

		display : flex;
		flex-direction: column-reverse;

	}

	#imginText-left,#imginText-right,#imginText-middle{ /*<===== How to set element position to middle of the display*/

    	display: block; 
   		margin: 0 auto 20px; 
		justify-content: center;
		width: 60%;

	}

	#header-banner { /*Hidden banner when width lower the 1000 pixel*/

		display: none;
		height: 0;
		width: 0;
		margin: 0;
		padding:0 ; 

	}

	#carouselExampleIndicators .carousel-item img{

	  	height:21em;

	}

}

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

	div#data-cnt-box{

		text-align: center;
		font-size: 1.1em;
		margin-top: 20px

	}

	#login-form{

		margin : 0 15% 0 15%;

	}

	.img-contain{
		
		padding: 20px 30px;

	}

	#footer-banner img {

		margin-right: 20px ;
		width: 80px ;
		height : 80px ;

	}	

	#footer-img-1{width : 150px ; height : 75px ;}
	#footer-img-2{width : 130px ; height : 100% ;}
	#footer-img-3{width : 80px ; height : 100% ;}

	#footer-text p {

		padding: 0;
		margin: 0;
		font-size: 3vw;

	}

	#footer-text h3 {

		padding: 0;
		margin: 0;
		font-size: 5vw;

	}

	#carouselExampleIndicators .carousel-item img{

	  	height:18em;

	}

}

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

	p,pre,p#firstParagraph{

		padding: 20px 5px 0;

	}

	div#btn-contain{

		display: inline;
		
	}

	button#lower-btn{

		margin : 0;

	}

	p#imageDiscript{

		padding:20px 5px 0 5px;
		font-size: 0.7em;

	}

	h1{

		font-size: 1.6em;
		margin-left: 0px;

	}

	#gbif_logo{

		padding-top: 0px;
		margin-bottom : 0px;

	}

	#softnix_logo{

				margin-bottom : 40px;

	}
	/* ============================== FlexBox =============================== */

	#outer-contain{

		padding : 0 15px;

	}

}

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

	#dashboard-header {

		display : inline;
		background-color: white;

	}

	#dash-div {

		margin: 0 50px 30px 50px;

	}


}

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

	#dashboard-header {

		display : inline;

	}

}

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

	.carousel-thumbnails .carousel-indicators img {

		max-width: 100px;
		height: 25px;
	
	}

}

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


	div#data-cnt-box{

		padding: 10px 20px;
		font-size: 1em;

	}

	p#text-in-box{

		font-size: 0.75rem;
	
	}


	#imginText-left,#imginText-right,#imginText-middle{

		width: 95%;
		margin-bottom: 30px;

	}

	p{

		font-size: 0.9em;

	}

	h1,h2{

		padding : 0;
		font-size: 1.4em;

	}

	div#modalBody{

		margin-top: 25%;		

	}

	#textarea-head{

		margin-left: 5%;

	}

	#input-box , #ta{

		width: 90% ; 
		margin: 0 5% 30px 5%;

	}

	div#input-div{

		display: inline; 

	}

	#login-form{

		margin : 0 10% 0 10%;

	}

	#footer-img-1{width : 130px ; height : 65px ;}
	#footer-img-2{width : 110px ; height : 100% ;}
	#footer-img-3{width : 60px ; height : 100% ;}

	#carouselExampleIndicators .carousel-item img{

	  	height:12em;

	}

}

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

	div#data-cnt-box{

	font-size: 1em;

	}

	.carousel-thumbnails .carousel-indicators img {

		max-width: 100px;
		height: 20px;
	
	}

}

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

	div#data-cnt-box{

		font-size: 1em;

	}

	#footer-img-1{width : 100px ; height : 50px ;}
	#footer-img-2{width : 90px ; height : 100% ;}

}