html, body {

    position:absolute;
    left:0px;
    top:0px;
    margin: 0px;
    height:100%;
    width: 100%;

    font-family: 'Roboto', sans-serif;
    background-color:#EFEEF3;;
}

input {

    border:0;
    font-size:14px;
}

textarea {

    font-size:14px;
}

select {

    font-size:14px;
}
input:focus {

    outline:none;
}

textarea:focus {

    outline:none;

}

#ViewCont {

    position:absolute;
    width:98%;
    margin-left:-49%;
    left:50%;
    overflow-x:hidden;
    overflow-y:scroll;
}



.MenuCont {

    position:fixed;
    right:10px;
    top:0px;
    z-index:99;
}

.MenuCont div {

    position:relative;
    float:left;
    width:30px;
    height:30px;
    margin-right:2px;
    background-repeat:no-repeat;
    background-size:20px 20px;
    background-position:5px 5px;
    background-color:black;
    color:#ffffff;
    cursor:pointer;
}

.MenuCont .ChangePW {

    background-image:url('../img/settings.svg');
}

.MenuCont .Logout {

    background-image:url('../img/logout.png');
}

.ChangePWCont {

    z-index:99;
    position:fixed;
    top:-300px;
    left:50%;
    width:300px;
    margin-left:-200px;
    background-color:#EFEEF3;
    -webkit-transition:top 200ms;
}

.ChangePWCont[data-active="1"] {

    top:0px;
}

.ChangePWCont input {

    position:relative;
    width:200px;
    padding:5px;
    margin-left:40px;
    margin-bottom:10px;
    margin-top:10px;
}

.ChangePWCont .Save {

    position:relative;
    text-align:center;
    margin-left:40px;
    width:200px;
    padding:5px;
    background-color:black;
    color:#ffffff;
    cursor:pointer;
}

#Project {

    position:relative;
    float:left;
    width:100%;
    height:30px;
    margin-bottom:30px;
}

#Project div  {

    position:relative;
    float:left;
    width:50%;
    background-color:black;
    height:100%;
    text-align:center;
    text-transform:uppercase;
    color:#ffffff;
    line-height:30px;
    cursor:pointer;
}

#Project[data-id="1"] div[data-id="1"] {

    background-color:#5dc9ef;
}

#Project[data-id="2"] div[data-id="2"] {

    background-color:#5dc9ef;
}

.HeaderCont {

    position:relative;
    float:left;
    margin-top:30px;
    left:0px;
    width:100%;
    height:30px;
    background-color:black;
}

.HeaderCont .Header {

    position:relative;
    float:left;
    margin:0;
    border:0;
    padding:0;
    padding-right:5px;
    padding-top:5px;
    padding-left:5px;
    color:white;
}

.HeaderCont[data-type="StudyCourses"] .Header[data-type="name"] {

    width:390px;
}

.HeaderCont[data-type="StudyCourses"] .Header[data-type="members"] {

    width:150px;
}

.HeaderCont[data-type="StudyCourses"] .Header[data-type="blockSizeMax"] {

    width:150px;
}

.HeaderCont[data-type="StudyCourses"] .Header[data-type="blockSizeMin"] {

    width:140px;
}

#Layer {

    display:block;
    z-index:9999;
    position:fixed;
    top:0px;
    width:100%;
    height:100%;
    background-color:#eeeeee;
}

#Layer .LoginCont {

    position:relative;
    margin-top:100px;
    width:300px;
    margin-right:auto;
    margin-left:auto;
}

#Layer .LoginCont input {

    position:relative;
    float:left;
    width:100%;
    margin-bottom:10px;
    padding:10px;

}

#Layer .LoginCont .DoLogin, #Layer .LoginCont .NoPW {

    position:relative;
    float:left;
    width:100%;
    margin-top:10px;
    padding:5px;
    padding-right:10px;
    padding-left:10px;
    text-align:center;
    background-color:black;
    color:#ffffff;
    cursor:pointer;
}

#Layer .LoginCont .NoPW {

    width:100%;
}

.SaveData {

    position:relative;
    float:left;
    width:100%;
    height:20px;
    left:0%;
    margin-top:40px;
    margin-bottom:20px;
}

.SaveData .Save {

    position:relative;
    float:left;
    left:0px;
    height:20px;
    width:200px;
    text-align:center;
    background-color:white;
    color:black;
    line-height:20px;
    cursor:pointer;
}

.SaveData .Notify {

    position:relative;
    float:left;
    width:100px;
    line-height:18px;
    margin-left:5px;
    height:20px;
    text-align:center;
}


.AvailabilityPicker {

    z-index:1;
    position:absolute;
    top:20px;
    width:90%;
    left:0%;
}

.AvailabilityPicker div {

    position:relative;
    float:left;
    width:30px;
    height:20px;
    margin-right:3px;
    cursor:pointer;
}

.AvailabilityPicker .Available {

    background-color:green;
    border:2px solid black;
}

.AvailabilityPicker .UnDesired {

    background-color:orange;
}

.AvailabilityPicker .NotAvailable {

    background-color:red;
}


#Timetable {

    z-index:1;
    position:relative;
    width:100%;
    margin-top:50px;
    left:0%;
    height:530px;
    overflow:hidden;

}

#Timetable .WeekHeader {

    position:relative;
    float:left;
    width:100%;
    height:30px;

}

#Timetable .WeekHeader div {

    position:relative;
    float:left;
    width:17%;
    height:100%;
    line-height:30px;
    text-align:center;
    margin-left:0.5%;
}

#Timetable .WeekHeader :first-child {

    width:10%;
    margin-left:0%;
}


#Timetable .WeekHeader > :nth-child(7), #Timetable .WeekHeader > :nth-child(8) {

    display:none;
}

#Timetable .TimeCont {

    position:relative;
    float:left;
    width:10%;
    height:100%;
}

#Timetable .Time {

    position:relative;
    width:100%;
    height:30px;
    line-height:30px;
    text-align:center;
    background-color:white;
    margin-bottom:5px;
}


#Timetable .Day {

    position:relative;
    float:left;
    width:17%;
    margin-left:0.5%;
}

#Timetable .Day[data-day="6"], #Timetable .Day[data-day="7"] {

    display:none;
}

#Timetable .Day .Timeslot {

    position:relative;
    width:100%;
    height:30px;
    margin-bottom:5px;
    background-color:white;
    cursor:pointer;
}

#Timetable .Day .Timeslot[data-state="1"] {

    background-color:green;
}

#Timetable .Day .Timeslot[data-state="2"] {

    background-color:orange;
}

#Timetable .Day .Timeslot[data-state="3"] {

    background-color:red;
}

.Options {

    position:relative;
    margin-top:10px;
    left:0%;
    width:100%;
    height:30px;
}

.Options div {

    position:relative;
    float:left;
    height:20px;
    line-height:23px;
    margin-right:5px;
}

.Options div[data-type="Notes"] {

    position:relative;
    width:100%;
    margin-bottom:10px;
}

.Options input {

    position:relative;
    float:left;
    width:50px;
    height:20px;
    margin-right:20px;
    margin-bottom:20px;
    border:0px;
}

.Options input:focus {

    outline:none;
}

.Options textarea {

    position:relative;
    float:left;
    width:700px;
    height:100px;
    resize:vertical;
    border:0px;
}

.ModulesCont {

    position:relative;
    float:left;
    width:100%;
}

.Add {

    margin-top:30px;
    position:relative;
    float:right;
    width:30px;
    height:30px;
    border-radius:30px;
    background-color:black;
    color:#ffffff;
    text-align:center;
    line-height:30px;
    cursor:pointer;
}



.HeaderCont[data-type="Modules"] .Header[data-type="StudyCourse"] {

    width:150px;
}

.HeaderCont[data-type="Modules"] .Header[data-type="Title"] {

    width:415px;
}

.HeaderCont[data-type="Modules"] .Header[data-type="Teacher1"] {

    width:145px;
}

.HeaderCont[data-type="Modules"] .Header[data-type="Teacher2"] {

    width:145px;
}

#AddModule {

}


.HeaderCont .ExpandAll {


    position:relative;
    float:right;
    cursor:pointer;
}

#ModulesTable {


    position:relative;
    float:left;
    width:100%;
    top:30px;

}

#ModulesTable .Element {

    position:relative;
    float:left;
    width:100%;
    margin-bottom:10px;
    background-color:#ffffff;
}

#ModulesTable .Element[data-edit="1"] {

    border:1px solid #5dc9ef;
}

#ModulesTable .Element .Info {

    position:relative;
    float:left;
    width:100%;

}

#ModulesTable .Element .Info > div {

    position:relative;
    float:left;
    margin-left:10px;
    padding-top:5px;
    padding-bottom:5px;
}

#ModulesTable .Element .Activator {

    display:none;
    top:5px;
    position:absolute;
    right:90px;
    color:#5dc9ef;
}

#ModulesTable .Element[data-edit="1"] .Activator {

    display:block;
}


#ModulesTable .Element .Info > div select {

    width:100%;
}

#ModulesTable .Element .Info > div input {

    width:100%;
}

/*
#ModulesTable .Element[data-active="0"] .Info > div select {

    display:none;
}

#ModulesTable .Element[data-active="1"] .Info > div select {

    display:block;
}

#ModulesTable .Element[data-active="0"] .Info > div input {

    display:none;
}
*/
#ModulesTable .Element .Info > div input {

    display:block;
    width:98%;
    height:20px;
    background-color:#EFEEF3;
    padding-left:5px;
}

#ModulesTable .Element[data-active="0"] .Info > div .Title {

    display:block;
}

#ModulesTable .Element[data-active="1"] .Info > div .Title {

    display:none;
}

#ModulesTable .Element[data-active="1"] .Activator {

    top:auto;
    bottom:10px;
    right:20px;
}


#ModulesTable .Element .Info div[data-type="StudyCourse"] {

    min-width:120px;
}

#ModulesTable .Element .Info div[data-type="Teacher1"] {

    width:120px;
}

#ModulesTable .Element .Info div[data-type="Teacher2"] {

    width:120px;
}

#ModulesTable .Element .Info div[data-type="Title"] {

    width:420px;
    overflow:hidden;
    height:20px;
}

#ModulesTable .Element .Info div[data-type="Edit"] {

    position:absolute;
    right:5px;
    cursor:pointer;
}

#ModulesTable .Element .Info div[data-type="Edit"] img  {

   width:20px;
}

#ModulesTable .Element[data-active="0"] .Edit {

    display:none;
}

#ModulesTable .Element[data-active="1"] .Edit {

    display:block;
}

#ModulesTable .Element .Edit {

    position:relative;
    float:left;
    width:100%;
}

#ModulesTable .Element .Edit .Left {

    position:relative;
    float:left;
    width:30%;
}

#ModulesTable .Element .Edit .Left textarea {

    background-color:#EFEEF3;
    border:0px;
    resize:none;
}

#ModulesTable .Element .Edit .Wrapper {

    position:relative;
    float:left;
    width:100%;
    padding-bottom:10px;
    padding-top:5px;
    padding-left:15px;
}

#ModulesTable .Element .Edit .Title {

    position:relative;
    float:left;
    min-width:140px;
}

#ModulesTable .Element .Edit .Wrapper div {

    position:relative;
    float:left;
}

#ModulesTable .Element .Edit select {

    position:relative;
    float:left;
}

#ModulesTable .Element .Edit input {

    position:relative;
    float:left;
}


#ModulesTable .Element .Edit .Right {

    position:relative;
    float:left;
    width:65%;
}

#ModulesTable .Element .Edit .Right .Wrapper {

    position:relative;
    float:left;
    width:100%;
}

#ModulesTable .Element .Edit .Right .Title {

}

#ModulesTable .Element .Edit .Right textarea {

    position:relative;
    float:left;
    width:100%;
    height:65px;
    border:0;
    background-color:#EFEEF3;
}

#ModulesTable .Element .Edit .Right .Wrapper[data-type="Check"], #ModulesTable .Element .Edit .Right .Wrapper[data-type="TakesPlace"], #ModulesTable .Element .Edit .Right .Wrapper[data-type="LastChange"] {

    width:auto;
    margin-right:10px;
}

#ModulesTable select {

    border-radius:0;
    border:0;
    height:20px;
}

#ModulesTable textarea[data-type="Lecture"] {

    width:200px;
}

#ModulesTable tr[data-type="TakesPlace"] {

    width:90px;
}

.Modules .Element div select[data-type="StudyCourse"] {

     width:150px;
 }

.Modules .Element div .Horizontal[data-type="StudyCourse"] {

    position:fixed;
    left:0px;
    top:0px;
}


#ModulesTable .Element .Info > .Remove {

    position:absolute;
    right:35px;
    cursor:pointer;
    top:5px;
    margin-left:-10px;
    width:20px;
    height:20px;
    border-radius:40px;
    background-color:black;
    color:white;
    text-align:center;
    cursor:pointer;
    line-height:15px;
    padding:0px;
}




/*---------- AVAILABILITY ----------*/

.Availability {

    position:relative;
    top:0px;
    left:0%;
    width:100%;
}
.Availability .Element, .StudyCourses .Element {

    position:relative;
    width:100%;
    height:25px;
}

.Availability .Element > div{

    position:relative;
    float:left;
    width:23%;
    height:100%;
    line-height:20px;
    margin-right:3px;
    font-size:12px;
    border-right:1px solid white;
    border-top:1px solid white;
    border-bottom:1px solid white;

}

.Availability .Element > :first-child {

    width:5%;
}



#StudyCoursesTable {

    position: relative;
    float: left;
    margin-top:0px;
    top: 0px;
    width:100%;
    left: 0%;
    min-height: 100px;
    overflow: scroll
}

#StudyCoursesTable .Element {

    position:relative;
    float:left;
    width:100%;
}

#StudyCoursesTable .Element .Wrapper {

    min-width:150px;
}

#StudyCoursesTable .Element .Wrapper[data-type="name"] {

    width:400px;
}

#StudyCoursesTable .Element > div {

    position:relative;
    float:left;
    margin-right:5px;
}


#StudyCoursesTable .Element .Remove {

    position:absolute;
    right:35px;
    cursor:pointer;
    top:2px;
    margin-left:-10px;
    width:20px;
    height:20px;
    border-radius:40px;
    background-color:black;
    color:white;
    text-align:center;
    cursor:pointer;
    line-height:15px;
    padding:0px;
}


#StudyCoursesTable .Element > div input {

    position:relative;
    width:100%;
    top:2.5px;
    height:20px;

}

.CreateDB {

    position:relative;
    float:left;
    left:0%;
    margin-top:50px;
}

.CreateDB input {

    position:relative;
    float:left;
    margin-right:5px;
    width:150px;
    height:28px;
}

.CreateDB div {

    position:relative;
    float:left;
    padding:5px;
}

.CreateDB .Create {

    background-color:white;
    cursor:pointer;
}


.HeaderCont[data-type="Teacher"] .Header[data-type="Name"] {

  width:200px;
}

.HeaderCont[data-type="Teacher"] .Header[data-type="Email"] {

    width:300px;
}

.HeaderCont[data-type="Teacher"] .Header[data-type="DaySequenced"], .HeaderCont[data-type="Teacher"] .Header[data-type="MaxActivitiesPerDay"] {

    width:150px;
}

.HeaderCont[data-type="Teacher"] .Header[data-type="MaxDaysPerWeek"] {

    width:185px;
}

.HeaderCont[data-type="Teacher"] .Header[data-type="Password"] {

    width:300px;
}

#TeachersTable {

    position:relative;
    float:left;
    width:100%;
    top:30px;
}

#TeachersTable .Element {

    position:relative;
    float:left;
    width:100%;
    margin-bottom:10px;
    background-color:#ffffff;
}

#TeachersTable .Element .Wrapper {

    position:relative;
    float:left;
    padding-bottom:10px;
    padding-top:5px;
    padding-left:15px;

}

#TeachersTable .Element .Wrapper[data-type="Name"] {

    width:200px;
}

#TeachersTable .Element .Wrapper[data-type="Email"] {

    width:300px;
}

#TeachersTable .Element .Wrapper[data-type="Email"] input {

    width:100%;
}

#TeachersTable .Element .Wrapper[data-type="DaysSequenced"], #TeachersTable .Element .Wrapper[data-type="MaxActivitiesPerDay"], #TeachersTable .Element .Wrapper[data-type="MaxDaysPerWeek"] {

    width:150px;
}

#TeachersTable .Element .Wrapper[data-type="Password"] {

    width:300px;
}

#TeachersTable .Element .Wrapper[data-type="Password"] input {

    width:100%;
}

#TeachersTable .Element .Wrapper[data-type="Notes"]  {

    width:95%;
    font-size:12px;
}

#TeachersTable .Element .Title {

    position:relative;
    float:left;
    min-width:140px;
}

#TeachersTable .Element .Wrapper div {

    position:relative;
    float:left;
}

#TeachersTable .Element select {

    position:relative;
    float:left;
}

#TeachersTable .Element input {

    position:relative;
    float:left;
}

#TeachersTable .Element .Remove {

    position:absolute;
    right:5px;
    cursor:pointer;
    top:7px;
    margin-left:-10px;
    width:20px;
    height:20px;
    border-radius:40px;
    background-color:black;
    color:white;
    text-align:center;
    cursor:pointer;
    line-height:15px;
    padding:0px;
}