/*
#blabla		id
.blabla		class

div > p { }	In combination together
div + p { } style p if immediately after a div, not inside
*/




* {
    box-sizing: border-box;

}

/* Style the body */
body {
    font-family: arial, helvetica, sans-serif; 
    font-style: sans-serif; 

}

/* Header/logo Title */
.header {
    padding: 20px;
    text-align: center;
    background: #F0EDE5;
	color: #303030;
}

/* For logo */
.logo {
    float: left;
	
}

.icon {
border: 0; 
width: 30; 
height: 30; 

}	

/* Style the top navigation bar */
.navbar {
    display: flex;
    background-color: #757070;
}

/* Style the navigation bar links */
.navbar a {
    color: white;
    padding: 14px 20px;
    text-decoration: none;
    text-align: center;
}

/* Change color on hover */
.navbar a:hover {
    background-color: #ddd;
    color: black;
}

/* Hide icon with 3 lines, show it only on small screen */
.navbar .icon {
  display: none;
}

/* Create an active/current navbar selection */
a.active {
  background-color: #b60015;
    
}


/* Column container */
.row {  
    display: flex;
    flex-wrap: wrap;
}
/* Sidebar/left column */
.side20 {
    flex: 20%;
    background-color: #f1f1f1;
    padding: 20px;
}

.side30 {
    flex: 30%;
    background-color: #f1f1f1;
    padding: 20px;
}

.side40 {
    flex: 40%;
    background-color: #f1f1f1;
    padding: 20px;
	text-align: center;
}

/* Main column */
.main {
    flex: 70%;
    background-color: white;
    padding: 20px;
	
}




/* Footer */
.footer {
    padding: 20px;
    text-align: center;
    background: #ddd;
}



/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
    .row, .navbar {   
        flex-direction: column;
    }

/* This is to show the compressed menu and replace it with 3 horizontal lines on small screens */
	.navbar a {display: none;}		/* On small screen make the navbar disappear ... */
	.navbar a.icon {				/* ... and show the icon */
		float: right;
		display: block;
	}
	.navbar.responsive {position: relative;}
	.navbar.responsive .icon {					/* This will postion the 3 horizontal lines in the top right corner */
		/*position: absolute;		
		right: 0;
		top: 0;*/
	}
	.navbar.responsive a {
		float: none;
		display: block;
		text-align: center;
	}
	.input, input{								/* This will size the input fields at 100% on small screens */
		width: 100%;
	}
}
@media screen and (min-width: 701px) {			/* This will size the input fields at 50% on regular monitors */
	.input, input{
		width: 100%;
	}
	
}	

/* Table style*/
td, th {
	border: 1px solid #dddddd;
	border-radius: 5px;						/*  *** Make the border rounded.... */
	text-align: left;
	padding: 4px;
}

.td_green {
    color: green;
	text-align: right;
}
.td_red {
    color: red;
	text-align: right;
}
.td_black {
    color: black;
	text-align: right;
}	
tr:nth-child(even) {				
	background-color: #dddddd;
}	
			
a {
	text-decoration: none;					/* *** This is to remove the underscore between the images in the a href=.... */
}

			
/*th {
	cursor: pointer;
	color: red;
}*/




				
/* Make some round borders on all input fields*/				
 .input, input{
	
	border-radius: 5px;
	border: 2px solid #ccc;
	padding: 4px;
	box-sizing: border-box;
	margin-top: 6px;
	margin-bottom: 6px;
	resize: vertical;
}

input[type=checkbox]{
	transform: scale(2);
	-webkit-transform:scale(1, 1);
	text-align: left;
}

.mandat {
	color: red;
}
	
.bad-border {
	border: 2px solid red;
}	

.num-record {
	text-align:left;
	font-size: 18px;	
	font-weight: bold;
}
.test2 {
	float:center;
}

.my_font_bold {
font-weight: bold;
}

.img {
	max-width: 600px;
	max-height: 800px;
	margin-bottom:10px;
	width:250
					
}
.img:hover {									/*utilized in payments to zoom the pictures and in tenants to enlarge picture_id*/
	width: 80%;
}

.submit_button {
  width: 100px;
  background-color: #b60015;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
 
}

.submit_button:hover {
	background-color: #757070;
    
}