body {
    font-family: 'Source Sans Pro', sans-serif;
}
body.main{
    margin: 0; padding: 0;
}
html.main {
    margin: 0; padding: 0;
}
input {
    font-family: 'Source Sans Pro', sans-serif;
}
input[type=text], input[type=email], input[type=password], input[type=date], input[type=time], input[type=number], textarea, select {
    display: block;
    font-size: 20px;
    border-radius: 2px;
    border: 3px solid #aaaaaa;
    padding: 5px;
    margin: 5px 10px 10px 5px;
    color: black;
    transition: box-shadow 0.3s, border 0.3s;
}
textarea {
    height: 10vh;

}
label {
    float: left;
    width: 15em;
    margin-right: 1em;
}
input[type=text]:hover, input[type=email]:hover, input[type=password]:hover, input[type=date]:hover, input[type=time]:hover, input[type=number]:hover, textarea:hover, select:hover {
     box-shadow: 0 0 5px 2px #969696;
     border: solid 3px #707070;
 }
input[type=text]:focus, input[type=email]:focus, input[type=password]:focus, input[type=date]:focus, input[type=time]:focus, input[type=number]:focus, textarea:focus, select:focus {
    box-shadow: 0 0 5px 3px #949494;
    border: solid 3px #505050;
}
input[type=button], input[type=submit]{
    background-color: #431f59;
    font-size: 20px;
    border-radius: 2px;
    color: white;
    border: none;
    padding: 5px;
    margin: 10px;
    font-weight: 300;
    font-family: 'Source Sans Pro', sans-serif;
    width: 100px;
}
input[type=button]:hover, input[type=submit]:hover {
    background-color: #C750C8;
}
input[type=button]:focus, input[type=submit]:focus {
    background-color: #913392;
}
input.mainAction[type=button]{
font-weight: 600;
}
#ajaxform input[type=text], #ajaxform input[type=email], #ajaxform input[type=password], #ajaxform input[type=date], #ajaxform input[type=time], #ajaxform input[type=number], #ajaxform textarea, #ajaxform select {
    width: 90%;
}
#loginform input[type=email]:focus, #loginform input[type=password]:focus {
    border: 4px solid #913392;
    box-shadow: none;
}
#loginform input[type=email]:hover, #loginform input[type=password]:hover {
    border: 4px solid #913392;
    box-shadow: none;
}
#loginform input[type=email], #loginform input[type=password] {
    border: 2px solid #C750C8;
    width: 80%;

}
#loginform input[type=button], #loginform input[type=submit] {
    border: 0;
    color: black;
    background-color: white;
    font-weight: 400;
    width: 150px;

}
#loginform input[type=button]:hover, #loginform input[type=submit]:hover {
    background-color: #ddd;
}
#loginform input[type=button]:focus, #loginform input[type=submit]:focus {
    background-color: #aaa;
}
div.ajaxButtons {
    text-align: right;
}
 h1, h2, h3, h4, h5, h6 {font-weight: 400;}
 div#login-box{max-width: 500px; margin-left: auto; margin-right: auto; margin-top: 10%; text-align: center; font-size: 20px; background-color: rgba(67, 31, 89, 0.9); color: white; padding: 20px; border-radius: 25px; box-shadow: 0 0 15px 2px rgba(0,0,0,0.7);}
 .red{color: red;}
 .green{color: limegreen;}
 .logintitle {
     font-weight:300;
 }
 div#sidebar {
     float: left; background-color: #431f59; margin: 0 20px 0 0; box-shadow: 0 0 15px 2px rgba(0,0,0,0.7);
     width: 30%;
     min-width:200px;
     max-width: 400px;
     color: white;
     height: 100vh;
     position: fixed;
}
div#header{
    background: #431f59;
    box-shadow: 0 0 15px 2px rgba(0,0,0,0.7);
    color: white;
    margin-top: 20px;
    margin-right:5%;
    padding: 20px;
    width: calc(65% - 100px);
    float: right;
}
div#menu{
    background: linear-gradient(135deg, rgb(255,255,255) 0%,rgb(229,229,229) 100%);
    margin-right:5%;
    margin-bottom:20px;
    padding-top:5px;
    padding-bottom: 5px;
    padding-left: 20px;
    padding-right: 20px;
    width: calc(65% - 100px);
    float: right;
}
p{font-size: 1.2em;}
div.content{
  background: linear-gradient(135deg, rgb(255,255,255) 0%,rgb(229,229,229) 100%);
  padding: 20px;
  margin-right:5%;
  width: calc(65% - 100px);
  float: right;
  margin-bottom: 20px;
}
div#ajax{overflow: auto;}

#nav li a:hover,a:active {
    background-color: #C750C8 }
#nav {
    list-style: none;
    margin: 0;
    padding: 16px;
}
#nav li {
    width: 100%;
    max-width:250px;
    margin-left: auto;
    margin-right: auto;
}
#nav li a {
    display: block;
    padding: 16px 15px;
    text-decoration: none;
    font-weight: 600;
    color: white;
    text-align: center;
}
.heading{
    font-size: 3em;
    font-weight: 300;
}
/*table styles */
table {
    width: 100%;
    border-collapse: collapse;
}
/* Zebra striping */
tr:nth-of-type(odd) {
    background: #fff;
}
tr:nth-of-type(even) {
    background: #eee;
}
th {
    background: #431f59;
    color: white;
    font-weight: bold;
}
td, th {
    padding: 6px;
    border: 1px solid #ccc;
    text-align: left;
}
/*table styles END
* Calendar Styles
*/
div.day-number {
    float: right;
    background-color: #431f59;
    color: white;
    margin: -5px -5px 0 0;
    width: 20px;
    padding: 5px;
}
td.calendar-day	{ min-height:100px;  position:relative; }
td.calendar-day-np { background:#ddd; min-height:100px; }
td.calendar-day:hover{ background:#C750C8; }
td.calendar-day, td.calendar-day-np { width:120px; padding:5px; border-bottom:1px solid #999; border-right:1px solid #999; }
p.cal-appointment {
    background-color: #CBF1E3;
}
p.cal-event {
    background-color: #CBE0F1;
}
p.cal-event-repeating {
     background-color: #f1d093;
 }
p.cal-item {
    font-size: 0.8em;
}
/*Calendar Syles END*/
@media screen and (max-width: 750px) {
    div#login-box{margin-top: 5%;}
    div#sidebar{width: 100%; max-width: none;  height: auto; float: none; margin: 0; box-shadow: none; position: relative;}
    div#header{float: none; width: calc(100% - 10px); padding: 5px; margin-top: 0; margin-right: 0; box-shadow: none;}
    div#menu{float: none; width: calc(100% - 10px); padding: 5px; margin-top: 0; margin-right: 0; margin-bottom: 0;}
    div.content{float: none; width: calc(100% - 10px); padding: 5px; margin-top: 0; margin-right: 0;}
    #nav li a {padding: 8px 15px;}

    /* Force table to not be like tables anymore */
    table.dataTable, thead.dataTable, tbody.dataTable, th.dataTable, td.dataTable, tr.dataTable {
        display: block;
    }

    /* Hide table headers (but not display: none;, for accessibility) */
    thead.dataTable tr.dataTable {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    tr.dataTable { border: 1px solid #ccc; }

    td.dataTable {
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50%;
    }

    td.dataTable:before {
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
    }
}
@media print {
    div#sidebar{display: none;}
    div#menu{display: none;}
    div.content{background: none; width: 100%; float: none; padding: 0; margin: 0;}
    div#header{background: none; width: 100%; float: none; padding: 0; margin: 0; box-shadow: none; color: black;}
    input[type=checkbox]{display: none;}
    th {
        background: white;
        color: black;
    }

}