/*---------------------------------------////index/////--------------------------------------------------------------*/
body{
	background-image:url("imagweb/bg-22.jpg");
  	font-family: sans-serif;
}

img{

	width: 150px;
	height: 150px;
	margin-top: 5%;
}

.contener{
	max-width: 100%;
	text-align: center;
}
.bodyindex{
	width: 60%;
	margin: auto;
	text-align: center;
}
.buttonindex{
	background-color: #FBC029;
    border: none;
    color: white;   
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    cursor: pointer;
    outline: none;
    width: 30%;
    padding: 16px 34px;
    margin: 9px 4px;
    border-radius: 5px;
}
.buttonindex:hover{

	opacity: 0.9;
}
/*-----------------------------------------------------------------------------------------------------*/

/*--------------------------------------------////register////--------------------------------------------------------*/


 .inputtext{
  width: 100%;
  border: none;
  border-radius: 4px;
  box-sizing: border-box;
  outline: none;
  padding: 22px 20px;
  margin: 8px 0;
  border: 1px solid #ccc;
}

  select {
  width: 100%;
  border: none;
  border-radius: 4px;
  box-sizing: border-box;
  outline: none;
  padding: 14px 20px;
  margin: 8px 0;
  border: 1px solid #ccc;
}

.imge{

width: 150px;
height: 150px;


}
.submit {
  width: 99%;
  background-color: #FBC029;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 10px;
  outline: none;
  text-align: center;
}

.submit:hover {
  opacity: 0.9;
  cursor: pointer;
}

.bodyregister{

	max-width: 40%;
	margin: auto;
	text-align: center;
	margin-top: 5%;
}

.fname{

	float: left;
}

#profileDisplay { 

  display: block; 
  height: 110px; 
  width: 110px; 
  margin: 0px auto; 
  border-radius: 10px;

   }

.img-placeholder {
  width: 110px;
  height: 110px;
  background: black;
  opacity: .7;  
  z-index: 2;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: none;
   border-radius: 10px;
  
}

.img-placeholder h4 {
  margin-top: 50%;
  color: white;
  text-align: center;

}

.img-div:hover .img-placeholder {
  display: block;
  cursor: pointer;

}


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

/*----------------------------------------------////css addmember////-------------------------------------------------------*/



	.btnhomeindex{
	  background-color: #FBC029;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    outline: none;
    width: 15%;
    border-radius: 5px;
	}

	.btnhomeindex:hover{

	opacity: 0.8;

	}


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


/*----------------------------------------------////css login////-------------------------------------------------------*/

.textbody{

    max-width: 40%;
    margin: auto;
    text-align: center;

  }

  .inputlogin{
  width: 100%;
  border: none;
  border-radius: 5%;
  box-sizing: border-box;
  outline: none;
  padding: 14px 20px;
  margin: 8px 0;
  border: 1px solid #ccc;
  }

  img{

  width: 150px;
  height: 150px;
  margin-top: 5%;
}

.buttonlogin{
  background-color: #FBC029;
    border: none;
    color: white;   
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    cursor: pointer;
    outline: none;
    width: 80%;
    padding: 16px 34px;
    margin: 9px 4px;
    border-radius: 5px;
}

.buttonlogin:hover{

	opacity: 0.8;

}
#textcenter{

    text-align: center;
}

.red{

  color: red;
  font-size: 13px;


}

/*----------------------------------------------////css view////-------------------------------------------------------*/
.grid-container {
  
  margin: auto;
  width: 80%;
  display: grid;
  grid-column-gap: 0px;
  grid-template-columns: auto auto auto auto;
  background-color: none;
}

.grid-item {
  background-color: none;
  border: none;
  padding: 10px;
  font-size: 15px;
  text-align: center;
}

.grid-menu {
  
  margin: auto;
  width: 75%;
  display: grid;
  grid-column-gap: 0px;
  grid-template-columns: auto auto auto auto;
  background-color: none;
}

.grid-menu-item {
  background-color: none;
  border: none;
  padding: 10px;
  font-size: 15px;
  text-align: center;
}
.img-r{

	border-radius: 50%;
	width: 150px;
	height: 150px;

}

.link-input{

		text-decoration: none; 
		color: black;

	}

.divlogout{
		text-align: right;
	}

.btnlogout{

		text-decoration: none;
		color: black;
		cursor: pointer;
	}
/*-----------------------------------------------------------------------------------------------------*/

/*----------------------------------------------////input run/yoga/aerobics/bicycle view////-------------------------------------------------------*/

.body-form{
		max-width: 30%;
		margin: auto;
		text-align: center;
		margin-top: 5%;
		
	}

	.inputtext{

		width: 100%;
		height: 30px;
		outline: none;
		border-radius: 5px;
		border: 1px solid #ccc;

	}
	.p{

		text-align: left;
	}

	.rowsubmit{

		text-align: center;
	}
	
	.btnsubmit{

		width: 100%;
		height:35px;
		border-radius: 5px;
		border:none;
		background-color: #FBC029;
		color: white;
	}

	.btnsubmit:hover{

		opacity: 0.7;
		cursor: pointer;
	}
	.imgshow{

		border-radius: 50%;
		width: 150px;
		height: 150px;
	}

	.divlogout{

		text-align: right;
	}
	.btnlogout{

		text-decoration: none;
		color: black;
	}

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

/*--------------------------------------------////reportme////--------------------------------------------------------*/

.layout-bio{

		width: 100%;
		height: auto;
		margin: auto;
		text-align: center;
	}
	
  .grid-report {
  
  margin: auto;
  max-width: 75%;
  display: grid;
  grid-column-gap: 0px;
  grid-template-columns: auto auto auto auto;
  background-color: none;
}

.grid-report-item {
  background-color: none;
  border: none;
  padding: 10px;
  font-size: 15px;
  text-align: center;
}


	.grid-layout-row{
  		margin: auto;
 		width: 90%;
  		display: grid;
  		grid-template-columns: auto auto auto auto;
		text-align: center;
	}
	.grid-layout-item{
		padding: 20px;
		border: 0;
		text-align: center;
	}
	.img-r{

		border-radius: 50%;
		width: 150px;
		height:150px;
	}

	.btnlogout{

		text-decoration: none;
		color: black;
	
	}


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


/*----------------------------------------------////ขนาดหน้าจอ px////-------------------------------------------------------*/



@media only screen and (max-width: 1242px) {
  /* For tablets: */
.buttonindex{

	width: 60%;
}

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

.bodyregister{

	max-width: 90%;

}

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

.alert{
	width: 90%;
}

.btnhome{

	width: 60%;
}
/*------------------------*/

.container{
  width:80%;

}

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


.grid-container {
  
  margin: auto;
  width: 80%;
  display: grid;
  grid-column-gap: 0px;
  grid-template-columns: auto ;
  padding: none;

}

.grid-item {
	margin-top: 0px;
  border: none;
  padding: none;
  font-size: 15px;

}

.grid-menu {
  
  margin: auto;
  width: 90%;
  display: grid;
  grid-column-gap:none;
  grid-template-columns: auto auto  ;
  background-color: none;
}

.grid-menu-item {
  background-color: none;
  border: none;
  padding: 10px;
  font-size: 15px;
  text-align: center;
}
.img-r{

	border-radius: 50%;
	width: 100px;
	height: 100px;

}

.link-input{

		text-decoration: none; 
		color: black;
		cursor: none;

	}

.btnlogout{
	
		cursor:none;

	}

}
/*------------------------*/
.body-form{
		max-width: 90%;
		margin: auto;
		text-align: center;
		margin-top: 5%;
		
	}

}

@media only screen and (max-width: 1200px) {
  /* For tablets: */
.buttonindex{

	width: 60%;
}

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

.bodyregister{

	max-width: 90%;

}

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

.alert{
	width: 90%;
}

.btnhome{

	width: 60%;
}
/*------------------------*/

.container{
  width:80%;

}

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


.grid-container {
  
  margin: auto;
  width: 80%;
  display: grid;
  grid-column-gap: 0px;
  grid-template-columns: auto ;
  padding: none;

}

.grid-item {
	margin-top: 0px;
  border: none;
  padding: none;
  font-size: 15px;

}

.grid-menu {
  
  margin: auto;
  width: 90%;
  display: grid;
  grid-column-gap:none;
  grid-template-columns: auto auto  ;
  background-color: none;
}

.grid-menu-item {
  background-color: none;
  border: none;
  padding: 10px;
  font-size: 15px;
  text-align: center;
}
.img-r{

	border-radius: 50%;
	width: 100px;
	height: 100px;

}

.link-input{

		text-decoration: none; 
		color: black;
		cursor: none;

	}

.btnlogout{
	
		cursor:none;

	}

}
/*------------------------*/
.body-form{
		max-width: 90%;
		margin: auto;
		text-align: center;
		margin-top: 5%;
		
	}

}

@media only screen and (max-width: 1125px) {
  /* For tablets: */
.buttonindex{

	width: 60%;
}

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

.bodyregister{

	max-width: 90%;

}

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

.alert{
	width: 90%;
}

.btnhome{

	width: 60%;
}
/*------------------------*/

.container{
  width:80%;

}

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


.grid-container {
  
  margin: auto;
  width: 80%;
  display: grid;
  grid-column-gap: 0px;
  grid-template-columns: auto ;
  padding: none;

}

.grid-item {
	margin-top: 0px;
  border: none;
  padding: none;
  font-size: 15px;

}

.grid-menu {
  
  margin: auto;
  width: 90%;
  display: grid;
  grid-column-gap:none;
  grid-template-columns: auto auto  ;
  background-color: none;
}

.grid-menu-item {
  background-color: none;
  border: none;
  padding: 10px;
  font-size: 15px;
  text-align: center;
}
.img-r{

	border-radius: 50%;
	width: 100px;
	height: 100px;

}

.link-input{

		text-decoration: none; 
		color: black;
		cursor: none;

	}

.btnlogout{
	
		cursor:none;

	}

}
/*------------------------*/
.body-form{
		max-width: 90%;
		margin: auto;
		text-align: center;
		margin-top: 5%;
		
	}

}

@media only screen and (max-width: 1080px) {
  /* For tablets: */
.buttonindex{

	width: 60%;
}

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

.bodyregister{

	max-width: 90%;

}

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

.alert{
	width: 90%;
}

.btnhome{

	width: 60%;
}
/*------------------------*/

.container{
  width:80%;

}

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


.grid-container {
  
  margin: auto;
  width: 80%;
  display: grid;
  grid-column-gap: 0px;
  grid-template-columns: auto ;
  padding: none;

}

.grid-item {
	margin-top: 0px;
  border: none;
  padding: none;
  font-size: 15px;

}

.grid-menu {
  
  margin: auto;
  width: 90%;
  display: grid;
  grid-column-gap:none;
  grid-template-columns: auto auto  ;
  background-color: none;
}

.grid-menu-item {
  background-color: none;
  border: none;
  padding: 10px;
  font-size: 15px;
  text-align: center;
}
.img-r{

	border-radius: 50%;
	width: 100px;
	height: 100px;

}

.link-input{

		text-decoration: none; 
		color: black;
		cursor: none;

	}

.btnlogout{
	
		cursor:none;

	}

}
/*------------------------*/
.body-form{
		max-width: 90%;
		margin: auto;
		text-align: center;
		margin-top: 5%;
		
	}

}

@media only screen and (max-width: 1024px) {
  /* For tablets: */
.buttonindex{

	width: 60%;
}

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

.bodyregister{
	margin-top: 15%;
	max-width: 80%;

}

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

.alert{
	width: 90%;
}

.btnhome{

	width: 60%;
}
/*------------------------*/

.container{
  width:80%;

}

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


.grid-container {
  
  margin: auto;
  width: 80%;
  display: grid;
  grid-column-gap: 0px;
  grid-template-columns: auto ;
  padding: none;

}

.grid-item {
	margin-top: 0px;
  border: none;
  padding: none;
  font-size: 15px;

}

.grid-menu {
  
  margin: auto;
  width: 90%;
  display: grid;
  grid-column-gap:none;
  grid-template-columns: auto auto  ;
  background-color: none;
}

.grid-menu-item {
  background-color: none;
  border: none;
  padding: 10px;
  font-size: 15px;
  text-align: center;
}
.img-r{

	border-radius: 50%;
	width: 100px;
	height: 100px;

}

.link-input{

		text-decoration: none; 
		color: black;
		cursor: none;

	}

.btnlogout{
	
		cursor:none;

	}

}
/*------------------------*/
.body-form{
		max-width: 90%;
		margin: auto;
		text-align: center;
		margin-top: 5%;
		
	}

}

@media only screen and (max-width: 960px) {
  /* For tablets: */
.buttonindex{

	width: 60%;
}

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

.bodyregister{

	max-width: 90%;

}

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

.alert{
	width: 90%;
}

.btnhome{

	width: 60%;
}
/*------------------------*/

.container{
  width:80%;

}

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


.grid-container {
  
  margin: auto;
  width: 80%;
  display: grid;
  grid-column-gap: 0px;
  grid-template-columns: auto ;
  padding: none;

}

.grid-item {
	margin-top: 0px;
  border: none;
  padding: none;
  font-size: 15px;

}

.grid-menu {
  
  margin: auto;
  width: 90%;
  display: grid;
  grid-column-gap:none;
  grid-template-columns: auto auto  ;
  background-color: none;
}

.grid-menu-item {
  background-color: none;
  border: none;
  padding: 10px;
  font-size: 15px;
  text-align: center;
}
.img-r{

	border-radius: 50%;
	width: 100px;
	height: 100px;

}

.link-input{

		text-decoration: none; 
		color: black;
		cursor: none;

	}

.btnlogout{
	
		cursor:none;

	}

}
/*------------------------*/
.body-form{
		max-width: 90%;
		margin: auto;
		text-align: center;
		margin-top: 5%;
		
	}

}

@media only screen and (max-width: 854px) {
  /* For tablets: */
.buttonindex{

	width: 60%;
}

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

.bodyregister{

	max-width: 90%;

}

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

.alert{
	width: 90%;
}

.btnhome{

	width: 60%;
}
/*------------------------*/

.container{
  width:80%;

}

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


.grid-container {
  
  margin: auto;
  width: 80%;
  display: grid;
  grid-column-gap: 0px;
  grid-template-columns: auto ;
  padding: none;

}

.grid-item {
	margin-top: 0px;
  border: none;
  padding: none;
  font-size: 15px;

}

.grid-menu {
  
  margin: auto;
  width: 90%;
  display: grid;
  grid-column-gap:none;
  grid-template-columns: auto auto  ;
  background-color: none;
}

.grid-menu-item {
  background-color: none;
  border: none;
  padding: 10px;
  font-size: 15px;
  text-align: center;
}
.img-r{

	border-radius: 50%;
	width: 100px;
	height: 100px;

}

.link-input{

		text-decoration: none; 
		color: black;
		cursor: none;

	}

.btnlogout{
	
		cursor:none;

	}

}
/*------------------------*/
.body-form{
		max-width: 90%;
		margin: auto;
		text-align: center;
		margin-top: 5%;
		
	}

}

@media only screen and (max-width: 828px) {
  /* For tablets: */
.buttonindex{

	width: 60%;
}

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

.bodyregister{

	max-width: 90%;

}

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

.alert{
	width: 90%;
}

.btnhome{

	width: 60%;
}
/*------------------------*/

.container{
  width:80%;

}

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


.grid-container {
  
  margin: auto;
  width: 80%;
  display: grid;
  grid-column-gap: 0px;
  grid-template-columns: auto ;
  padding: none;

}

.grid-item {
	margin-top: 0px;
  border: none;
  padding: none;
  font-size: 15px;

}

.grid-menu {
  
  margin: auto;
  width: 90%;
  display: grid;
  grid-column-gap:none;
  grid-template-columns: auto auto  ;
  background-color: none;
}

.grid-menu-item {
  background-color: none;
  border: none;
  padding: 10px;
  font-size: 15px;
  text-align: center;
}
.img-r{

	border-radius: 50%;
	width: 100px;
	height: 100px;

}

.link-input{

		text-decoration: none; 
		color: black;
		cursor: none;

	}

.btnlogout{
	
		cursor:none;

	}

}
/*------------------------*/
.body-form{
		max-width: 90%;
		margin: auto;
		text-align: center;
		margin-top: 5%;
		
	}

}

@media only screen and (max-width: 800px) {
  /* For tablets: */
.buttonindex{

	width: 60%;
}

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

.bodyregister{

	max-width: 90%;

}

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

.alert{
	width: 90%;
}

.btnhome{

	width: 60%;
}
/*------------------------*/

.container{
  width:80%;

}

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


.grid-container {
  
  margin: auto;
  width: 80%;
  display: grid;
  grid-column-gap: 0px;
  grid-template-columns: auto ;
  padding: none;

}

.grid-item {
	margin-top: 0px;
  border: none;
  padding: none;
  font-size: 15px;

}

.grid-menu {
  
  margin: auto;
  width: 90%;
  display: grid;
  grid-column-gap:none;
  grid-template-columns: auto auto  ;
  background-color: none;
}

.grid-menu-item {
  background-color: none;
  border: none;
  padding: 10px;
  font-size: 15px;
  text-align: center;
}
.img-r{

	border-radius: 50%;
	width: 100px;
	height: 100px;

}

.link-input{

		text-decoration: none; 
		color: black;
		cursor: none;

	}

.btnlogout{
	
		cursor:none;

	}

}
/*------------------------*/
.body-form{
		max-width: 90%;
		margin: auto;
		text-align: center;
		margin-top: 5%;
		
	}

}

@media only screen and (max-width: 768px) {
  /* For tablets: */
.buttonindex{

	width: 60%;
}

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

.bodyregister{
	margin-top: 6%;
	max-width: 90%;

}

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

.alert{
	width: 90%;
}

.btnhome{

	width: 60%;
}
/*------------------------*/

.container{
  width:80%;

}

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


.grid-container {
  
  margin: auto;
  width: 80%;
  display: grid;
  grid-column-gap: 0px;
  grid-template-columns: auto ;
  padding: none;

}

.grid-item {
	margin-top: 0px;
  border: none;
  padding: none;
  font-size: 15px;

}

.grid-menu {
  
  margin: auto;
  width: 90%;
  display: grid;
  grid-column-gap:none;
  grid-template-columns: auto auto  ;
  background-color: none;
}

.grid-menu-item {
  background-color: none;
  border: none;
  padding: 10px;
  font-size: 15px;
  text-align: center;
}
.img-r{

	border-radius: 50%;
	width: 100px;
	height: 100px;

}

.link-input{

		text-decoration: none; 
		color: black;
		cursor: none;

	}

.btnlogout{
	
		cursor:none;

	}

}
/*------------------------*/
.body-form{
		max-width: 90%;
		margin: auto;
		text-align: center;
		margin-top: 5%;
		
	}

}

@media only screen and (max-width: 750px) {
  /* For tablets: */
.buttonindex{

	width: 60%;
}

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

.bodyregister{

	max-width: 90%;

}

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

.alert{
	width: 90%;
}

.btnhome{

	width: 60%;
}
/*------------------------*/

.container{
  width:80%;

}

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


.grid-container {
  
  margin: auto;
  width: 80%;
  display: grid;
  grid-column-gap: 0px;
  grid-template-columns: auto ;
  padding: none;

}

.grid-item {
	margin-top: 0px;
  border: none;
  padding: none;
  font-size: 15px;

}

.grid-menu {
  
  margin: auto;
  width: 90%;
  display: grid;
  grid-column-gap:none;
  grid-template-columns: auto auto  ;
  background-color: none;
}

.grid-menu-item {
  background-color: none;
  border: none;
  padding: 10px;
  font-size: 15px;
  text-align: center;
}
.img-r{

	border-radius: 50%;
	width: 100px;
	height: 100px;

}

.link-input{

		text-decoration: none; 
		color: black;
		cursor: none;

	}

.btnlogout{
	
		cursor:none;

	}

}
/*------------------------*/
.body-form{
		max-width: 90%;
		margin: auto;
		text-align: center;
		margin-top: 5%;
		
	}

}

@media only screen and (max-width: 720px) {
  /* For tablets: */
.buttonindex{

	width: 60%;
}

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

.bodyregister{

	max-width: 90%;

}

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

.alert{
	width: 90%;
}

.btnhome{

	width: 60%;
}
/*------------------------*/

.container{
  width:80%;

}

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


.grid-container {
  
  margin: auto;
  width: 80%;
  display: grid;
  grid-column-gap: 0px;
  grid-template-columns: auto ;
  padding: none;

}

.grid-item {
	margin-top: 0px;
  border: none;
  padding: none;
  font-size: 15px;

}

.grid-menu {
  
  margin: auto;
  width: 90%;
  display: grid;
  grid-column-gap:none;
  grid-template-columns: auto auto  ;
  background-color: none;
}

.grid-menu-item {
  background-color: none;
  border: none;
  padding: 10px;
  font-size: 15px;
  text-align: center;
}
.img-r{

	border-radius: 50%;
	width: 100px;
	height: 100px;

}

.link-input{

		text-decoration: none; 
		color: black;
		cursor: none;

	}

.btnlogout{
	
		cursor:none;

	}

}
/*------------------------*/
.body-form{
		max-width: 90%;
		margin: auto;
		text-align: center;
		margin-top: 5%;
		
	}

}

@media only screen and (max-width: 640px) {
  /* For tablets: */
.buttonindex{

	width: 60%;
}

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

.bodyregister{

	max-width: 90%;

}

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

.alert{
	width: 90%;
}

.btnhome{

	width: 60%;
}
/*------------------------*/

.container{
  width:80%;

}

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


.grid-container {
  
  margin: auto;
  width: 80%;
  display: grid;
  grid-column-gap: 0px;
  grid-template-columns: auto ;
  padding: none;

}

.grid-item {
	margin-top: 0px;
  border: none;
  padding: none;
  font-size: 15px;

}

.grid-menu {
  
  margin: auto;
  width: 90%;
  display: grid;
  grid-column-gap:none;
  grid-template-columns: auto auto  ;
  background-color: none;
}

.grid-menu-item {
  background-color: none;
  border: none;
  padding: 10px;
  font-size: 15px;
  text-align: center;
}
.img-r{

	border-radius: 50%;
	width: 100px;
	height: 100px;

}

.link-input{

		text-decoration: none; 
		color: black;
		cursor: none;

	}

.btnlogout{
	
		cursor:none;

	}

}
/*------------------------*/
.body-form{
		max-width: 90%;
		margin: auto;
		text-align: center;
		margin-top: 5%;
		
	}

}

@media only screen and (max-width: 603px) {
  /* For tablets: */
.buttonindex{

	width: 60%;
}

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

.bodyregister{

	max-width: 90%;

}

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

.alert{
	width: 90%;
}

.btnhome{

	width: 60%;
}
/*------------------------*/

.container{
  width:80%;

}

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


.grid-container {
  
  margin: auto;
  width: 80%;
  display: grid;
  grid-column-gap: 0px;
  grid-template-columns: auto ;
  padding: none;

}

.grid-item {
	margin-top: 0px;
  border: none;
  padding: none;
  font-size: 15px;

}

.grid-menu {
  
  margin: auto;
  width: 90%;
  display: grid;
  grid-column-gap:none;
  grid-template-columns: auto auto  ;
  background-color: none;
}

.grid-menu-item {
  background-color: none;
  border: none;
  padding: 10px;
  font-size: 15px;
  text-align: center;
}
.img-r{

	border-radius: 50%;
	width: 100px;
	height: 100px;

}

.link-input{

		text-decoration: none; 
		color: black;
		cursor: none;

	}

.btnlogout{
	
		cursor:none;

	}

}
/*------------------------*/
.body-form{
		max-width: 90%;
		margin: auto;
		text-align: center;
		margin-top: 5%;
		
	}

}

@media only screen and (max-width: 533px) {
  /* For tablets: */
.buttonindex{

	width: 60%;
}

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

.bodyregister{

	max-width: 90%;

}

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

.alert{
	width: 90%;
}

.btnhome{

	width: 60%;
}
/*------------------------*/

.container{
  width:80%;

}

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


.grid-container {
  
  margin: auto;
  width: 80%;
  display: grid;
  grid-column-gap: 0px;
  grid-template-columns: auto ;
  padding: none;

}

.grid-item {
	margin-top: 0px;
  border: none;
  padding: none;
  font-size: 15px;

}

.grid-menu {
  
  margin: auto;
  width: 90%;
  display: grid;
  grid-column-gap:none;
  grid-template-columns: auto auto  ;
  background-color: none;
}

.grid-menu-item {
  background-color: none;
  border: none;
  padding: 10px;
  font-size: 15px;
  text-align: center;
}
.img-r{

	border-radius: 50%;
	width: 100px;
	height: 100px;

}

.link-input{

		text-decoration: none; 
		color: black;
		cursor: none;

	}

.btnlogout{
	
		cursor:none;

	}

}
/*------------------------*/
.body-form{
		max-width: 90%;
		margin: auto;
		text-align: center;
		margin-top: 5%;
		
	}

}

@media only screen and (max-width: 480px) {
  /* For tablets: */
.buttonindex{

	width: 60%;
}

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

.bodyregister{

	max-width: 90%;

}

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

.alert{
	width: 90%;
}

.btnhome{

	width: 60%;
}
/*------------------------*/

.container{
  width:80%;

}

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


.grid-container {
  
  margin: auto;
  width: 80%;
  display: grid;
  grid-column-gap: 0px;
  grid-template-columns: auto ;
  padding: none;

}

.grid-item {
	margin-top: 0px;
  border: none;
  padding: none;
  font-size: 15px;

}

.grid-menu {
  
  margin: auto;
  width: 90%;
  display: grid;
  grid-column-gap:none;
  grid-template-columns: auto auto  ;
  background-color: none;
}

.grid-menu-item {
  background-color: none;
  border: none;
  padding: 10px;
  font-size: 15px;
  text-align: center;
}
.img-r{

	border-radius: 50%;
	width: 100px;
	height: 100px;

}

.link-input{

		text-decoration: none; 
		color: black;
		cursor: none;

	}

.btnlogout{
	
		cursor:none;

	}

}
/*------------------------*/
.body-form{
		max-width: 90%;
		margin: auto;
		text-align: center;
		margin-top: 5%;
		
	}

}

@media only screen and (max-width: 414px) {
  /* For tablets: */
.buttonindex{

	width: 60%;
}

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

.bodyregister{

	max-width: 90%;

}

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

.alert{
	width: 90%;
}

.btnhome{

	width: 60%;
}
/*------------------------*/

.container{
  width:80%;

}

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


.grid-container {
  
  margin: auto;
  width: 80%;
  display: grid;
  grid-column-gap: 0px;
  grid-template-columns: auto ;
  padding: none;

}

.grid-item {
	margin-top: 0px;
  border: none;
  padding: none;
  font-size: 15px;

}

.grid-menu {
  
  margin: auto;
  width: 90%;
  display: grid;
  grid-column-gap:none;
  grid-template-columns: auto auto  ;
  background-color: none;
}

.grid-menu-item {
  background-color: none;
  border: none;
  padding: 10px;
  font-size: 15px;
  text-align: center;
}
.img-r{

	border-radius: 50%;
	width: 100px;
	height: 100px;

}

.link-input{

		text-decoration: none; 
		color: black;
		cursor: none;

	}

.btnlogout{
	
		cursor:none;

	}

}
/*------------------------*/
.body-form{
		max-width: 90%;
		margin: auto;
		text-align: center;
		margin-top: 5%;
		
	}

}

@media only screen and (max-width: 384px) {
  /* For tablets: */
.buttonindex{

	width: 60%;
}

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

.bodyregister{

	max-width: 90%;

}

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

.alert{
	width: 90%;
}

.btnhome{

	width: 60%;
}
/*------------------------*/

.container{
  width:80%;

}

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


.grid-container {
  
  margin: auto;
  width: 80%;
  display: grid;
  grid-column-gap: 0px;
  grid-template-columns: auto ;
  padding: none;

}

.grid-item {
	margin-top: 0px;
  border: none;
  padding: none;
  font-size: 15px;

}

.grid-menu {
  
  margin: auto;
  width: 90%;
  display: grid;
  grid-column-gap:none;
  grid-template-columns: auto auto  ;
  background-color: none;
}

.grid-menu-item {
  background-color: none;
  border: none;
  padding: 10px;
  font-size: 15px;
  text-align: center;
}
.img-r{

	border-radius: 50%;
	width: 100px;
	height: 100px;

}

.link-input{

		text-decoration: none; 
		color: black;
		cursor: none;

	}

.btnlogout{
	
		cursor:none;

	}

}
/*------------------------*/
.body-form{
		max-width: 90%;
		margin: auto;
		text-align: center;
		margin-top: 5%;
		
	}

}

@media only screen and (max-width: 375px) {
  /* For tablets: */
.buttonindex{

	width: 60%;
}

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

.bodyregister{

	max-width: 90%;

}

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

.alert{
	width: 90%;
}

.btnhome{

	width: 60%;
}
/*------------------------*/

.container{
  width:90%;

}

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


.grid-container {
  
  margin: auto;
  width: 80%;
  display: grid;
  grid-column-gap: 0px;
  grid-template-columns: auto ;
  padding: none;

}

.grid-item {
	margin-top: 0px;
  border: none;
  padding: none;
  font-size: 15px;

}

.grid-menu {
  
  margin: auto;
  width: 90%;
  display: grid;
  grid-column-gap:none;
  grid-template-columns: auto auto  ;
  background-color: none;
}

.grid-menu-item {
  background-color: none;
  border: none;
  padding: 10px;
  font-size: 15px;
  text-align: center;
}
.img-r{

	border-radius: 50%;
	width: 100px;
	height: 100px;

}

.link-input{

		text-decoration: none; 
		color: black;
		cursor: none;

	}

.btnlogout{
	
		cursor:none;

	}

}
/*------------------------*/
.body-form{
		max-width: 90%;
		margin: auto;
		text-align: center;
		margin-top: 5%;
		
	}

}

@media only screen and (max-width:360px) {
  /* For tablets: */
.buttonindex{

	width: 60%;
}

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

.bodyregister{

	max-width: 90%;

}

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

.alert{
	width: 90%;
}

.btnhome{

	width: 60%;
}
/*------------------------*/

.container{
  width:90%;

}

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


.grid-container {
  
  margin: auto;
  width: 80%;
  display: grid;
  grid-column-gap: 0px;
  grid-template-columns: auto ;
  padding: none;

}

.grid-item {
	margin-top: 0px;
  border: none;
  padding: none;
  font-size: 15px;

}

.grid-menu {
  
  margin: auto;
  width: 90%;
  display: grid;
  grid-column-gap:none;
  grid-template-columns: auto auto  ;
  background-color: none;
}

.grid-menu-item {
  background-color: none;
  border: none;
  padding: 10px;
  font-size: 15px;
  text-align: center;
}
.img-r{

	border-radius: 50%;
	width: 100px;
	height: 100px;

}

.link-input{

		text-decoration: none; 
		color: black;
		cursor: none;

	}

.btnlogout{
	
		cursor:none;

	}

}
/*------------------------*/
.body-form{
		max-width: 90%;
		margin: auto;
		text-align: center;
		margin-top: 5%;
		
	}
/*------------------------*/



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

}

@media only screen and  (max-width:320px) {
  /* For tablets: */
.buttonindex{

	width: 60%;
}

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

.bodyregister{

	max-width: 90%;

}

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

.bodyadd{

  max-width: 100%;
}

  .btnhomeindex{

    font-size: 16px;
    margin: 4px 2px;
    cursor: none;
    width: 90%;
  
  }


/*------------------------*/
.textbody{

    max-width: 25%;
    margin: auto;
    text-align: center;

  }

  .inputlogin{
  width: 100%;
  border: none;
  border-radius: 5%;
  box-sizing: border-box;
  outline: none;
  padding: 14px 20px;
  margin: 8px 0;
  border: 1px solid #ccc;
  }

  img{

  width: 150px;
  height: 150px;
  margin-top: 5%;
}

.buttonlogin{
  background-color: #FBC029;
    border: none;
    color: white;   
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    cursor: pointer;
    outline: none;
    width: 80%;
    padding: 16px 34px;
    margin: 9px 4px;
    border-radius: 5px;
}



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

.grid-container {
  
  margin: auto;
  width: 80%;
  display: grid;
  grid-column-gap: 0px;
  grid-template-columns: auto ;
  padding: none;

}

.grid-item {
	margin-top: 0px;
  border: none;
  padding: none;
  font-size: 15px;

}

.grid-menu {
  
  margin: auto;
  width: 90%;
  display: grid;
  grid-column-gap:none;
  grid-template-columns: auto auto ;
  background-color: none;
}

.grid-menu-item {
  background-color: none;
  border: none;
  padding: 10px;
  font-size: 15px;
  text-align: center;
}
.img-r{

	border-radius: 50%;
	width: 100px;
	height: 100px;

}

.link-input{

		text-decoration: none; 
		color: black;
		cursor: none;

	}

.btnlogout{
	
		cursor:none;

	}


/*------------------------*/
.body-form{
		max-width: 90%;
		margin: auto;
		text-align: center;
		margin-top: 5%;
		
	}
/*------------------------*/
.grid-layout-row{

  	width: 80%;
		grid-template-columns:auto auto;
		text-align: center;
		
	}


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


}

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