@media (min-width:576px){
	.container{max-width:540px}
}
@media (min-width:768px){
	.container{max-width:720px}
}
@media (min-width:992px){
	.container{max-width:960px}
}
@media (min-width:1200px){
	.container{max-width:1140px}
}


@media (min-width:576px){
	.row{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-15px;margin-left:-15px}
}
@media (min-width:768px){
	.row{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-15px;margin-left:-15px}
}
@media (min-width:992px){
	.row{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-15px;margin-left:-15px}
}
@media (min-width:1200px){
	.row{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-15px;margin-left:-15px}
}


@media (min-width:576px){
	.col-md{-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1;max-width:100%}
	.row-cols-md-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}
	.row-cols-md-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}
	.row-cols-md-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}
	.row-cols-md-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}
	.row-cols-md-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}
	.row-cols-md-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}
	.col-md-auto{-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:100%}
	.col-md-1{-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}
	.col-md-2{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}
	.col-md-3{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}
	.col-md-4{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}
	.col-md-5{-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}
	.col-md-6{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}
	.col-md-7{-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}
	.col-md-8{-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}
	.col-md-9{-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}
	.col-md-10{-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}
	.col-md-11{-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}
	.col-md-12{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}	

}
@media (min-width:768px){
	.col-md{-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1;max-width:100%}
	.row-cols-md-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}
	.row-cols-md-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}
	.row-cols-md-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}
	.row-cols-md-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}
	.row-cols-md-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}
	.row-cols-md-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}
	.col-md-auto{-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:100%}
	.col-md-1{-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}
	.col-md-2{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}
	.col-md-3{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}
	.col-md-4{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}
	.col-md-5{-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}
	.col-md-6{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}
	.col-md-7{-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}
	.col-md-8{-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}
	.col-md-9{-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}
	.col-md-10{-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}
	.col-md-11{-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}
	.col-md-12{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}
}
@media (min-width:992px){
	.col-md{position:relative;width:100%;padding-right:15px;padding-left:15px}
	.row-cols-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}
	.row-cols-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}
	.row-cols-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}
	.row-cols-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}
	.row-cols-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}
	.row-cols-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}
}
@media (min-width:1200px){
	.col-md{position:relative;width:100%;padding-right:15px;padding-left:15px}
	.row-cols-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}
	.row-cols-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}
	.row-cols-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}
	.row-cols-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}
	.row-cols-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}
	.row-cols-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}
}

/*

@media (min-width:320px) and (orientation: portrait) {
}
	
@media (min-width:320px) and (orientation: landscape) {
}

@media (min-width:576px){
}

@media (min-width:768px){
}

@media (min-width:992px){
}

@media (min-width:1200pxpx){
}
*/


@media (min-width:320px) and (orientation: portrait){
	.mainbody {
	  max-width: 100%;
	  height: 100%;
	  display: flex;
	  top: 0;
	  left: 0;
	  background-color: white;   
	}	
}

@media (min-width:320px) and (orientation: landscape){
	.mainbody {
	  max-width: 100%;
	  height: 100%;
	  display: flex;
	  top: 0;
	  left: 0;
	  background-color: white;   
	}	
}

@media (min-width:576px){
	.mainbody {
	  max-width: 100%;
	  height: 100%;
	  display: flex;
	  top: 0;
	  left: 0;
	  background-color: white;   
	}	
}

@media (min-width:768px){
	.mainbody {
	  max-width: 100%;
	  height: 100%;
	  display: flex;
	  top: 0;
	  left: 0;
	  background-color: white;   
	}	
}

@media (min-width:992px){
	.mainbody {
	  max-width: 100%;
	  height: 100%;
	  display: flex;
	  top: 0;
	  left: 0;
	  background-color: white;   
	}	
}

@media (min-width:1200pxpx){
	.mainbody {
	  max-width: 100%;
	  height: 100%;
	  display: flex;
	  top: 0;
	  left: 0;
	  background-color: white;   
	}	
}


/* right side is used for page content */
@media (min-width:320px) and (orientation: portrait) {
	.mainrightpane {
	  margin-left: 0px;
	  max-width: 60%;  
	  height: 100%;
	  background-color: white;
	  padding: 20px;
	  border-radius: 5px;
	  box-shadow: 0 2px 5px rgba(0,0,0,0.1);  
	}

	.maintreepane {
	  margin-left: 0px; /* Same as the width of the sidenav */    
	  max-width: 60%;
	  overflow-x: auto;
	  overflow-y: hidden;
	  white-space: nowrap;		  
	  height: 100%;
	  background-color: white;
	  padding: 20px;
	  border-radius: 5px;
	  box-shadow: 0 2px 5px rgba(0,0,0,0.1); 	
	}	
	
    .reunion-image-container {
        padding: 10px;
    }

    .reunion-image-container img {
        max-width: 100%;
        height: auto;
    }
	
    .image-container {
        padding: 10px;
    }

    .image-container img {
        max-width: 100%;
        height: auto;
    }	
}

@media (min-width:320px) and (orientation: landscape) {
	.mainrightpane {
	  margin-left: 0px;
	  max-width: 100%;  
	  height: 100%;
	  background-color: white;
	  padding: 20px;
	  border-radius: 5px;
	  box-shadow: 0 2px 5px rgba(0,0,0,0.1);  
	}

	.maintreepane {
	  margin-left: 0px;    
	  max-width: 100%;
	  overflow-x: auto;
	  overflow-y: hidden;
	  white-space: nowrap;	
	  
	  height: 100%;
	  background-color: white;
	  padding: 20px;
	  border-radius: 5px;
	  box-shadow: 0 2px 5px rgba(0,0,0,0.1); 	
	}	
	
    .image-container {
        padding: 10px;
    }

    .image-container img {
		max-width: 100%;
        height: auto;
    }	
}

@media (min-width:576px){
	.mainrightpane {
	  margin-left: 0px;
	  max-width: 100%;  
	  height: 100%;
	  background-color: white;
	  padding: 20px;
	  border-radius: 5px;
	  box-shadow: 0 2px 5px rgba(0,0,0,0.1);  
	}

	.maintreepane {
	  margin-left: 190px; /* Same as the width of the sidenav */    
	  overflow-x: auto;
	  overflow-y: hidden;
	  white-space: nowrap;	
	  max-width: 100%;
	  height: 100%;
	  background-color: white;
	  padding: 20px;
	  border-radius: 5px;
	  box-shadow: 0 2px 5px rgba(0,0,0,0.1); 	
	}	
	
    .image-container {
        padding: 10px;
    }

    .image-container img {
        max-width: 100%;
        height: auto;
    }		
}

@media (min-width:768px){
	.mainrightpane {
	  margin-left: 0px;
	  max-width: 100%;  
	  height: 100%;
	  background-color: white;
	  padding: 20px;
	  border-radius: 5px;
	  box-shadow: 0 2px 5px rgba(0,0,0,0.1);  
	}

	.maintreepane {
	  margin-left: 190px; /* Same as the width of the sidenav */    
	  overflow-x: auto;
	  overflow-y: hidden;
	  white-space: nowrap;	
	  max-width: 100%;
	  height: 100%;
	  background-color: white;
	  padding: 20px;
	  border-radius: 5px;
	  box-shadow: 0 2px 5px rgba(0,0,0,0.1); 	
	}	
	
    .image-container {
        padding: 10px;
    }

    .image-container img {
        max-width: 100%;
        height: auto;
    }		
}

@media (min-width:992px){
	.mainrightpane {
	  margin-left: 0px;
	  max-width: 100%;  
	  height: 100%;
	  background-color: white;
	  padding: 20px;
	  border-radius: 5px;
	  box-shadow: 0 2px 5px rgba(0,0,0,0.1);  
	}

	.maintreepane {
	  margin-left: 190px; /* Same as the width of the sidenav */    
	  overflow-x: auto;
	  overflow-y: hidden;
	  white-space: nowrap;	
	  max-width: 100%;
	  height: 100%;
	  background-color: white;
	  padding: 20px;
	  border-radius: 5px;
	  box-shadow: 0 2px 5px rgba(0,0,0,0.1); 	
	}	
	
    .image-container {
        padding: 10px;
    }

    .image-container img {
        max-width: 100%;
        height: auto;
    }		
}

@media (min-width:1200pxpx){
	.mainrightpane {
	  margin-left: 0px;
	  max-width: 100%;  
	  height: 100%;
	  background-color: white;
	  padding: 20px;
	  border-radius: 5px;
	  box-shadow: 0 2px 5px rgba(0,0,0,0.1);  
	}

	.maintreepane {
	  margin-left: 190px; /* Same as the width of the sidenav */    
	  overflow-x: auto;
	  overflow-y: hidden;
	  white-space: nowrap;	
	  max-width: 100%;
	  height: 100%;
	  background-color: white;
	  padding: 20px;
	  border-radius: 5px;
	  box-shadow: 0 2px 5px rgba(0,0,0,0.1); 	
	}	
	
    .image-container {
        padding: 10px;
    }

    .image-container img {
        max-width: 100%;
        height: auto;
    }		
	
}




/* left side is used for navigation */
@media (min-width:320px) and (orientation: portrait) {
	.mainleftpane {
	  margin-left: 0px;
	  max-width: 25%;  
	  background-color: rgb(255, 160, 122);  
	  height: 100%;
	}

	.mainleftpane .section{
		width: calc(100% – 25%);
		margin-left: 25%;
		transition: all 0.5s ease;
	}

	.mainleftpane .section .top_navbar{
		background: rgb(7, 105, 185);
		height: 25%;
		display: flex;
		align-items: center;
		padding: 0 30px;
	 
	}

	.mainleftpane .section .top_navbar .hamburger a{
		font-size: 28px;
		color: #f4fbff;
	}

	.mainleftpane .section .top_navbar .hamburger a:hover{
		color: #a2ecff;
	}


	.mainleftpane .sidebar{
		background: rgb(255, 160, 122);
		position: relative; /* fixed */
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 100%;
		padding: 2px 0;
		transition: all 0.5s ease;
	}


	.mainleftpane .sidebar .profile{
		margin-bottom: 20px;
		max-width: 100%;
		text-align: center;
	}

	.mainleftpane .sidebar .profile img{
		display: block;
		width: 100%;
		height: 10%;
		border-radius: 50%;
		margin: 0 auto;
	}

	.mainleftpane .sidebar .profile h3{
		color: #ffffff;
		margin: 10px 0 5px;
	}

	.mainleftpane .sidebar .profile p{
		color: rgb(206, 240, 253);
		font-size: 14px;
	}

	.mainleftpane .sidebar ul{
		background: rgb(255, 160, 122);
		list-style-type: none;
		display: block;
		padding: 2px 2px;

		color: rgb(241, 237, 237);
		font-size: 16px;
		position: relative;
	}

	.mainleftpane .sidebar li{
		background: rgb(255, 160, 122);	
		display: block;
		padding: 2px 2px;
		
		color: rgb(241, 237, 237);
		font-size: 12px;
		position: relative;
	}

	.mainleftpane .sidebar a{
		background: rgb(255, 160, 122);
		display: block;
		padding: 2px 2px;
		
		color: rgb(241, 237, 237);
		font-size: 12px;
		position: relative;
	}

	.mainleftpane .sidebar ul li a .icon{
		color: #dee4ec;
		width: 10%;
		height: 3px;
		display: inline-block;
	}


	.mainleftpane .sidebar ul li a:hover,
	.mainleftpane .sidebar ul li a.active{
		color: #0c7db1;
		background:white;
		border-right: 2px solid rgb(5, 68, 104);
	}

	.mainleftpane .sidebar ul li a:hover .icon,
	.mainleftpane .sidebar ul li a.active .icon{
		color: #0c7db1;
	}

	.mainleftpane .sidebar ul li a:hover:before,
	.mainleftpane .sidebar ul li a.active:before{
		display: block;
	}		
}	

@media (min-width:320px) and (orientation: landscape) {
	.mainleftpane {
	  margin-left: 0px;
	  max-width: 10%;  
	  background-color: rgb(255, 160, 122);  
	  height: 100%;
	}

	.mainleftpane .section{
		width: calc(100% – 10%);
		margin-left: 10%;
		transition: all 0.5s ease;
	}

	.mainleftpane .section .top_navbar{
		background: rgb(7, 105, 185);
		height: 20%;
		display: flex;
		align-items: center;
		padding: 0 30px;
	 
	}

	.mainleftpane .section .top_navbar .hamburger a{
		font-size: 28px;
		color: #f4fbff;
	}

	.mainleftpane .section .top_navbar .hamburger a:hover{
		color: #a2ecff;
	}


	.mainleftpane .sidebar{
		background: rgb(255, 160, 122);
		position: relative; /* fixed */
		top: 0;
		left: 0;
		right: 0;
		width: 10%;
		height: 100%;
		padding: 2px 0;
		transition: all 0.5s ease;
	}


	.mainleftpane .sidebar .profile{
		margin-bottom: 20px;
		max-width: 10%;
		text-align: center;
	}

	.mainleftpane .sidebar .profile img{
		display: block;
		width: 10%;
		height: 10%;
		border-radius: 50%;
		margin: 0 auto;
	}

	.mainleftpane .sidebar .profile h3{
		color: #ffffff;
		margin: 10px 0 5px;
	}

	.mainleftpane .sidebar .profile p{
		color: rgb(206, 240, 253);
		font-size: 14px;
	}

	.mainleftpane .sidebar ul{
		background: rgb(255, 160, 122);
		list-style-type: none;
		display: block;
		padding: 5px 5px;

		color: rgb(241, 237, 237);
		font-size: 16px;
		position: relative;
	}

	.mainleftpane .sidebar li{
		background: rgb(255, 160, 122);	
		display: block;
		padding: 5px 5px;
		
		color: rgb(241, 237, 237);
		font-size: 16px;
		position: relative;
	}

	.mainleftpane .sidebar a{
		background: rgb(255, 160, 122);
		display: block;
		padding: 13px 30px;
		
		color: rgb(241, 237, 237);
		font-size: 16px;
		position: relative;
	}

	.mainleftpane .sidebar ul li a .icon{
		color: #dee4ec;
		width: 5px;
		height: 5px;
		display: inline-block;
	}


	.mainleftpane .sidebar ul li a:hover,
	.mainleftpane .sidebar ul li a.active{
		color: #0c7db1;
		background:white;
		border-right: 2px solid rgb(5, 68, 104);
	}

	.mainleftpane .sidebar ul li a:hover .icon,
	.mainleftpane .sidebar ul li a.active .icon{
		color: #0c7db1;
	}

	.mainleftpane .sidebar ul li a:hover:before,
	.mainleftpane .sidebar ul li a.active:before{
		display: block;
	}	
}

@media (min-width:576px){
	.mainleftpane {
	  margin-left: 0px;
	  max-width: 190px;  
	  background-color: rgb(255, 160, 122);  
	  height: 100%;
	}

	.mainleftpane .section{
		width: calc(100% – 190px);
		margin-left: 190px;
		transition: all 0.5s ease;
	}

	.mainleftpane .section .top_navbar{
		background: rgb(7, 105, 185);
		height: 50px;
		display: flex;
		align-items: center;
		padding: 0 30px;
	 
	}

	.mainleftpane .section .top_navbar .hamburger a{
		font-size: 28px;
		color: #f4fbff;
	}

	.mainleftpane .section .top_navbar .hamburger a:hover{
		color: #a2ecff;
	}


	.mainleftpane .sidebar{
		background: rgb(255, 160, 122);
		position: relative; /* fixed */
		top: 0;
		left: 0;
		right: 0;
		width: 190px;
		height: 100%;
		padding: 2px 0;
		transition: all 0.5s ease;
	}


	.mainleftpane .sidebar .profile{
		margin-bottom: 20px;
		max-width: 190px;
		text-align: center;
	}

	.mainleftpane .sidebar .profile img{
		display: block;
		width: 100px;
		height: 100px;
		border-radius: 50%;
		margin: 0 auto;
	}

	.mainleftpane .sidebar .profile h3{
		color: #ffffff;
		margin: 10px 0 5px;
	}

	.mainleftpane .sidebar .profile p{
		color: rgb(206, 240, 253);
		font-size: 14px;
	}

	.mainleftpane .sidebar ul{
		background: rgb(255, 160, 122);
		list-style-type: none;
		display: block;
		padding: 5px 5px;

		color: rgb(241, 237, 237);
		font-size: 16px;
		position: relative;
	}

	.mainleftpane .sidebar li{
		background: rgb(255, 160, 122);	
		display: block;
		padding: 5px 5px;
		
		color: rgb(241, 237, 237);
		font-size: 16px;
		position: relative;
	}

	.mainleftpane .sidebar a{
		background: rgb(255, 160, 122);
		display: block;
		padding: 13px 30px;
		
		color: rgb(241, 237, 237);
		font-size: 16px;
		position: relative;
	}

	.mainleftpane .sidebar ul li a .icon{
		color: #dee4ec;
		width: 5px;
		height: 5px;
		display: inline-block;
	}


	.mainleftpane .sidebar ul li a:hover,
	.mainleftpane .sidebar ul li a.active{
		color: #0c7db1;
		background:white;
		border-right: 2px solid rgb(5, 68, 104);
	}

	.mainleftpane .sidebar ul li a:hover .icon,
	.mainleftpane .sidebar ul li a.active .icon{
		color: #0c7db1;
	}

	.mainleftpane .sidebar ul li a:hover:before,
	.mainleftpane .sidebar ul li a.active:before{
		display: block;
	}
	
}

@media (min-width:768px){
	.mainleftpane {
	  margin-left: 0px;
	  max-width: 190px;  
	  background-color: rgb(255, 160, 122);  
	  height: 100%;
	}

	.mainleftpane .section{
		width: calc(100% – 190px);
		margin-left: 190px;
		transition: all 0.5s ease;
	}

	.mainleftpane .section .top_navbar{
		background: rgb(7, 105, 185);
		height: 50px;
		display: flex;
		align-items: center;
		padding: 0 30px;
	 
	}

	.mainleftpane .section .top_navbar .hamburger a{
		font-size: 28px;
		color: #f4fbff;
	}

	.mainleftpane .section .top_navbar .hamburger a:hover{
		color: #a2ecff;
	}


	.mainleftpane .sidebar{
		background: rgb(255, 160, 122);
		position: relative; /* fixed */
		top: 0;
		left: 0;
		right: 0;
		width: 190px;
		height: 100%;
		padding: 2px 0;
		transition: all 0.5s ease;
	}


	.mainleftpane .sidebar .profile{
		margin-bottom: 20px;
		max-width: 190px;
		text-align: center;
	}

	.mainleftpane .sidebar .profile img{
		display: block;
		width: 100px;
		height: 100px;
		border-radius: 50%;
		margin: 0 auto;
	}

	.mainleftpane .sidebar .profile h3{
		color: #ffffff;
		margin: 10px 0 5px;
	}

	.mainleftpane .sidebar .profile p{
		color: rgb(206, 240, 253);
		font-size: 14px;
	}

	.mainleftpane .sidebar ul{
		background: rgb(255, 160, 122);
		list-style-type: none;
		display: block;
		padding: 5px 5px;

		color: rgb(241, 237, 237);
		font-size: 16px;
		position: relative;
	}

	.mainleftpane .sidebar li{
		background: rgb(255, 160, 122);	
		display: block;
		padding: 5px 5px;
		
		color: rgb(241, 237, 237);
		font-size: 16px;
		position: relative;
	}

	.mainleftpane .sidebar a{
		background: rgb(255, 160, 122);
		display: block;
		padding: 13px 30px;
		
		color: rgb(241, 237, 237);
		font-size: 16px;
		position: relative;
	}

	.mainleftpane .sidebar ul li a .icon{
		color: #dee4ec;
		width: 5px;
		height: 5px;
		display: inline-block;
	}


	.mainleftpane .sidebar ul li a:hover,
	.mainleftpane .sidebar ul li a.active{
		color: #0c7db1;
		background:white;
		border-right: 2px solid rgb(5, 68, 104);
	}

	.mainleftpane .sidebar ul li a:hover .icon,
	.mainleftpane .sidebar ul li a.active .icon{
		color: #0c7db1;
	}

	.mainleftpane .sidebar ul li a:hover:before,
	.mainleftpane .sidebar ul li a.active:before{
		display: block;
	}
	
}

@media (min-width:992px){
	.mainleftpane {
	  margin-left: 0px;
	  max-width: 190px;  
	  background-color: rgb(255, 160, 122);  
	  height: 100%;
	}

	.mainleftpane .section{
		width: calc(100% – 190px);
		margin-left: 190px;
		transition: all 0.5s ease;
	}

	.mainleftpane .section .top_navbar{
		background: rgb(7, 105, 185);
		height: 50px;
		display: flex;
		align-items: center;
		padding: 0 30px;
	 
	}

	.mainleftpane .section .top_navbar .hamburger a{
		font-size: 28px;
		color: #f4fbff;
	}

	.mainleftpane .section .top_navbar .hamburger a:hover{
		color: #a2ecff;
	}


	.mainleftpane .sidebar{
		background: rgb(255, 160, 122);
		position: relative; /* fixed */
		top: 0;
		left: 0;
		right: 0;
		width: 190px;
		height: 100%;
		padding: 2px 0;
		transition: all 0.5s ease;
	}


	.mainleftpane .sidebar .profile{
		margin-bottom: 20px;
		max-width: 190px;
		text-align: center;
	}

	.mainleftpane .sidebar .profile img{
		display: block;
		width: 100px;
		height: 100px;
		border-radius: 50%;
		margin: 0 auto;
	}

	.mainleftpane .sidebar .profile h3{
		color: #ffffff;
		margin: 10px 0 5px;
	}

	.mainleftpane .sidebar .profile p{
		color: rgb(206, 240, 253);
		font-size: 14px;
	}

	.mainleftpane .sidebar ul{
		background: rgb(255, 160, 122);
		list-style-type: none;
		display: block;
		padding: 5px 5px;

		color: rgb(241, 237, 237);
		font-size: 16px;
		position: relative;
	}

	.mainleftpane .sidebar li{
		background: rgb(255, 160, 122);	
		display: block;
		padding: 5px 5px;
		
		color: rgb(241, 237, 237);
		font-size: 16px;
		position: relative;
	}

	.mainleftpane .sidebar a{
		background: rgb(255, 160, 122);
		display: block;
		padding: 13px 30px;
		
		color: rgb(241, 237, 237);
		font-size: 16px;
		position: relative;
	}

	.mainleftpane .sidebar ul li a .icon{
		color: #dee4ec;
		width: 5px;
		height: 5px;
		display: inline-block;
	}


	.mainleftpane .sidebar ul li a:hover,
	.mainleftpane .sidebar ul li a.active{
		color: #0c7db1;
		background:white;
		border-right: 2px solid rgb(5, 68, 104);
	}

	.mainleftpane .sidebar ul li a:hover .icon,
	.mainleftpane .sidebar ul li a.active .icon{
		color: #0c7db1;
	}

	.mainleftpane .sidebar ul li a:hover:before,
	.mainleftpane .sidebar ul li a.active:before{
		display: block;
	}
	
}

@media (min-width:1200pxpx){
	.mainleftpane {
	  margin-left: 0px;
	  max-width: 190px;  
	  background-color: rgb(255, 160, 122);  
	  height: 100%;
	}

	.mainleftpane .section{
		width: calc(100% – 190px);
		margin-left: 190px;
		transition: all 0.5s ease;
	}

	.mainleftpane .section .top_navbar{
		background: rgb(7, 105, 185);
		height: 50px;
		display: flex;
		align-items: center;
		padding: 0 30px;
	 
	}

	.mainleftpane .section .top_navbar .hamburger a{
		font-size: 28px;
		color: #f4fbff;
	}

	.mainleftpane .section .top_navbar .hamburger a:hover{
		color: #a2ecff;
	}


	.mainleftpane .sidebar{
		background: rgb(255, 160, 122);
		position: relative; /* fixed */
		top: 0;
		left: 0;
		right: 0;
		width: 190px;
		height: 100%;
		padding: 2px 0;
		transition: all 0.5s ease;
	}


	.mainleftpane .sidebar .profile{
		margin-bottom: 20px;
		max-width: 190px;
		text-align: center;
	}

	.mainleftpane .sidebar .profile img{
		display: block;
		width: 100px;
		height: 100px;
		border-radius: 50%;
		margin: 0 auto;
	}

	.mainleftpane .sidebar .profile h3{
		color: #ffffff;
		margin: 10px 0 5px;
	}

	.mainleftpane .sidebar .profile p{
		color: rgb(206, 240, 253);
		font-size: 14px;
	}

	.mainleftpane .sidebar ul{
		background: rgb(255, 160, 122);
		list-style-type: none;
		display: block;
		padding: 5px 5px;

		color: rgb(241, 237, 237);
		font-size: 16px;
		position: relative;
	}

	.mainleftpane .sidebar li{
		background: rgb(255, 160, 122);	
		display: block;
		padding: 5px 5px;
		
		color: rgb(241, 237, 237);
		font-size: 16px;
		position: relative;
	}

	.mainleftpane .sidebar a{
		background: rgb(255, 160, 122);
		display: block;
		padding: 13px 30px;
		
		color: rgb(241, 237, 237);
		font-size: 16px;
		position: relative;
	}

	.mainleftpane .sidebar ul li a .icon{
		color: #dee4ec;
		width: 5px;
		height: 5px;
		display: inline-block;
	}


	.mainleftpane .sidebar ul li a:hover,
	.mainleftpane .sidebar ul li a.active{
		color: #0c7db1;
		background:white;
		border-right: 2px solid rgb(5, 68, 104);
	}

	.mainleftpane .sidebar ul li a:hover .icon,
	.mainleftpane .sidebar ul li a.active .icon{
		color: #0c7db1;
	}

	.mainleftpane .sidebar ul li a:hover:before,
	.mainleftpane .sidebar ul li a.active:before{
		display: block;
	}
	
}








#main-wrapper{
	width:500px;
	margin: 0 auto;
	background: #f7b32d;
	padding:5px;
	border-radius:10px;
	border: 2px solid #95a5a6;
}

.avatar{
	width:150px;
	text-align:center;
}

.myform{
	width:450px;
	margin:0 auto;
}

.inputvalues{
	width:435px;
	margin:5px auto;
	padding:5px;
}

.radiobtns{
	margin: 10px;
}

.selectbox{
margin: 10px;	
}

#login_btn{
	margin-top:10px;
	background-color:#7DBD00;
	padding:5px;
	color:white;
	width:100%;
	text-align:center;
	font-size:18px;
	font-weight:bold;
}

#register_btn{
	margin-bottom:20px;
	margin-top:10px;
	background-color:#2956B2;
	padding:5px;
	color:white;
	width:100%;
	text-align:center;
	font-size:18px;
	font-weight:bold;
}

#signup_btn{
	margin-top:10px;
	background-color:#7DBD00;
	padding:5px;
	color:white;
	width:100%;
	text-align:center;
	font-size:18px;
	font-weight:bold;
}

#back_btn{
	margin-top:10px;
	background-color:#2956B2;
	padding:5px;
	color:white;
	width:100%;
	text-align:center;
	font-size:18px;
	font-weight:bold;
}

#logout_btn{
	margin-top:10px;
	background-color:#FF5B00;
	padding:5px;
	color:white;
	width:100%;
	text-align:center;
	font-size:18px;
	font-weight:bold;
	margin-bottom:20px;
}