.grid {
margin: 0 auto;
padding: 20px;
max-width: 1100px;
width: 100%;
border: 3px solid #585a56;
background-color: #c2d3da;
font-family: arial, sans-serif;

}

.grid_sign_in {
margin: 0 auto;
padding: 10px;
max-width: 450px;
width: 100%;
border: 3px solid #585a56;
background-color: #c2d3da;
font-family: arial, sans-serif;
}

.row {
width: 100%;
margin-bottom: 5px;
display: flex;
}

.row1{
width: 100%;
display: flex;
position: relative;
top: 0;
left: 0;
}

.row_600{
min-height:550px;
}

.col-1 {
width: 8.33%;
padding: 5px;
}

.col-2 {
width: 16.66%;
padding: 5px;
}

.col-3 {
width: 25%;
padding: 5px;
}

.col-4 {
width: 33.33%;
padding: 5px;
}

.col-5 {
width: 41.66%;
padding: 5px;
}

.col-6 {
width: 50%;
padding: 5px;
}

.col-7 {
width: 58.33%;
padding: 5px;
}

.col-8 {
width: 66.66%;
padding: 5px;
}

.col-9 {
width: 75%;
padding: 5px;
}

.col-10 {
width: 83.33%;
padding: 5px;
}

.col-11 {
width: 91.66%;
padding: 5px;
}

.col-12 {
width: 100%;
padding: 5px;
}

.required {
font-size: x-small;
}

h3 {
color:#272424;
margin: 0px;
}

h4 {
color:#272424;
margin: 0px;
}

body {
background-color:#81a3a7;
padding: 20px;
}

input[type="radio"]{
margin: 0 2px 0 20px;
}

input[type='button']{
margin: 10px;
background-color:#81a3a7;
color:#272424;
font-size: medium;
font-weight: bold;
padding: 2px 12px;
}

input[type='submit']{
margin: 10px;
background-color:#81a3a7;
color:#272424;
font-size: medium;
font-weight: bold;
padding: 2px 12px;
}

input[type='text']{
background-color:#ebf2fa;
}

input[type='password']{
background-color:#ebf2fa;
}

legend{
font-size: medium;
font-weight: bolder;
color: #272424;
}
select{
background-color:#ebf2fa;
}

.data_field{
position: relative;
top: 0;
left: 0;
min-height:50px;
background-color:#ebf2fa;
margin: 0 .5%;
border-top: 1px dotted #81a3a7;
padding: 10px;
}


.center{
text-align: center;
}

.error{
color: red;
}

.heading{
text-align: center;
padding-top: 5px;
padding-bottom: 0px;
margin-bottom: 20px;
border-bottom: 2px solid #585a56;
font-family: arial, sans-serif;
}

.label {
margin-left: 2px;
}

.label1 {
margin-left: 12px;
margin-top: 25px;
}

.label2 {
margin-left: 25px;
margin-top: 25px;
}

.logo{
margin-top: 2px;
margin-left: 10px;
}

.mask {
visibility:hidden; /* Hidden by default */
position: absolute; /* Stay in place */
z-index: -1; /* Starts at the bottom */
left: 0;
top: 0;
width: 100%; /* Full width */
min-height:50px;
/*height: 100%; /* Full height */
/*overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
}

.nav_center{
text-align: center;
position: relative;
display: inline-block;
}

.note_container{
position: relative;
top: 0;
left: 0;
height: 100%
/*min-height:50px;*/
margin: 0 .5%;
border-top: 1px dotted #81a3a7;
}

.note {
position: absolute; /* Stay in place */
z-index: 0; /* nuetral position */
left: 0;
top: 0;
width: 100%; /* Full width */
/*height: 100%; /* Full height */
min-height:50px;
/*overflow: auto; /* Enable scroll if needed */
background-color:#ebf2fa;
margin: 0 .5%;
border-top: 1px dotted #81a3a7;
padding: 10px;
}

.bottom_space{
margin-bottom: 10px;
}

#date_topic{
min-height:100px;
margin: 0 1% .5%;
padding: 10px;
margin-left: 20px;
}

#nav_menu ul {
list-style-type: none;
margin-top: 60px;
}

#nav_menu ul li {
float: left;
}

#nav_menu ul li a {
text-align: center;
display: block;
width: 150px;
padding: 5px 0;
text-decoration: none;
background-color:#81a3a7;
color: #272424;
font-weight: bold;
border-right: 2px solid #272424;
}

#nav_menu ul li a.lastitem {
border-right: none;
}

#nav_menu ul li a.current {
background-color: #585a56;
color:#ebf2fa;
}

#date{
width:80px
}

#select_subject{
width: 45%;
margin: 3px;
}

#new_subject{
width: 45%;
margin:  3px;
}

#note_button_group{
float: right;
}





/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 20%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}

.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}

//color pattern (darkest to lightest 1, 4, 2, 3, 5 )
//color 1 h3, h4, text of buttons, legend color, navigation text, navigation right border
//color 2 body background, button background, submit background, data field top border, navigation background
//color 3 grid background, other navigation
//color 4 grid border, heading bottom border, current navigation background
//color 5 text inputs background, select background, editable divs, current navigation text