/**
 * Created by: Jos Luijten.
 * Country: The Netherlands
 * Date: 06-04-20205
 * Time: 21:21
 * Filename: style.css
 * Description: the main css file that is used in the root index.php file to layout the page
 */


body {
    display: block; /*the default of chrome and other user agents is block*/
    margin: 0px;  /*the default of chrome and other user agents is 8px*/
}

img
{
    max-width:100%;
    max-height:100%;
}

h1
{
    text-align: center;
}

#header /* the top section of the page, showing location on website and containing menu and usericon */
{
    background-image: linear-gradient(115deg, rgba(5, 255, 247, 0.4), rgba(50, 246, 230, 0.5), rgba(0, 193, 237, 0.6), rgba(34, 67, 199, 0.7)), url("../image/Backgroundrepeating.jpg");
    background-size: 100% auto;
    background-position-y: -2%;
    border: solid rgb(0, 0, 74);
    border-width: 0px 0px 2px 0px;
    height: 100px; /*should corrispond to login height*/
    vertical-align: middle;
    text-align: center;
}

#menu /*the div containing site navigation. A.K.A the burger. on the top of the page giving a drop down menu*/
{
    position: absolute;
    left: 5%;
    top: 0;
    width: 110px; /*enforses the size of the images*/
    height: 92px; /*should corrispond to header hieght - margin*/
    margin: 4px;
}



#login /*the div containing image/buttons to start login sequence*/
{
    position: absolute;
    right: 5%;
    top: 0;
    width: 60px; /*enforses the size of the images*/
    height: 92px; /*should corrispond to header hieght - margin*/
    margin: 4px;
}

#main /*the div containing te current webpage and all objects, not the header and footer*/
{
    min-height: 100px;
}

#footer /*div containing end of webpage. som legal information and frequently used webpage links*/
{
    background-color: rgba(0, 193, 237, 1);
    border: solid rgb(0, 0, 74);
    border-width: 2px 0px 0px 0px;
    min-height: 100px;
    padding: 10px;
}

#box_background /*the background for indicating a message box or prompt has poped up*/
{
    visibility: hidden;
    position: absolute;
    top: 0px;
    background-color: rgb(50, 246, 230, 0.5);
    width: 100%;
    height: 100%;
}

#box /*message box or combobox or prompt or.... shown as popup and lies on top of a background*/
{
    background-color: rgba(0, 193, 237, 1);
    border: 2px solid rgb(0, 0, 74);
    min-width: 10%;
    min-height: 10%;;
}



/*///////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////self designed progress bar related stuff //////////////////////////////*/
.progress
{
    display: flex;
    flex-wrap: nowrap;
    border: 1px solid black;
    margin: 2%;
    border-radius: 5%;
}
.progresslabel
{
    min-width: 10px;
    width: 20%;
}
.progresscontainer{
    min-width: 30px;
    width: 80%;
    background-color: lightgray;
}
.progressbar
{
    display: flex;  /*goal is to vertically center text inside this progressbar*/
    align-items: center;    /*vertically center text inside this progressbar*/
    padding: 0;
    text-indent: 8px;
    height: 100%;
    background-color: blue;
}
/*////////////////E.O. self designed progress bar related stuff /////////////////////////*/
/*///////////////////////////////////////////////////////////////////////////////////////*/


/*///////////////////////////////////////////////////////////////////////////////////////*/
/*////////////////self designed dilogbox and message box stuff //////////////////////////*/
.dialog_link /*used by javascript to assign click action to make popup visible when clicked. */
{
    cursor: pointer;
}
#dialog_background
{
    display: none;
    background-color: rgba(63,107,255,0.5);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
}
.dialog_main
{
    display: none;
    overflow: auto;
    text-align: left;
    width: 65%;
    top: 15%;
    max-height: 70%; /*chose so that top + max-height leaves room on bottum*/
    margin: auto;
    margin-bottom: 20px;
    position: relative;
    background-color: #3f6bff;
    border: 2px solid black;
    padding: 5px;
}
.show_dialog
{
    display: block;
}
.menudropdown /*the invisible div showing up as drop down*/
{
    display: none;
    overflow: auto;
    position: relative;
    left: 10px;
    top: 10px;
    max-height: 80%; /*chose so that top + max-height leaves room on bottum*/
    max-width: 60%;
    padding: 4px;
    background-color: rgba(0, 193, 237, 1);
    border: solid rgb(0, 0, 74);
    
}
/*////////////////E.O. self designed dilogbox and message box stuff /////////////////////*/
/*///////////////////////////////////////////////////////////////////////////////////////*/







.course
{

}

.course_filter
{
    display: flex;
    border: 1px solid black;
    margin: 2%;
    border-radius: 5%;
    background-image: linear-gradient(115deg, rgba(5, 255, 247, 0.4), rgba(50, 246, 230, 0.5), rgba(0, 193, 237, 0.6), rgba(34, 67, 199, 0.7));
}
.course_filter > .idlearning_objective{
    width: 4%;
    border: 1px solid black;
    text-align: center;
    font-size: 150%;}
.course_filter > .title{
    width: 46%;
    border: 1px solid black;
    text-align: center;
    font-size: 150%;}
.course_filter > .subject{
    width: 19%;
    border: 1px solid black;
    text-align: center;
    font-size: 150%;}
.course_filter > .sub_subject{
    width: 19%;
    border: 1px solid black;
    text-align: center;
    font-size: 150%;}
.course_filter > .student_verdict{
    width: 8%;
    border: 1px solid black;
    text-align: center;
    font-size: 150%;}
.course_filter > .teacher_verdict{
    width: 8%;
    border: 1px solid black;
    text-align: center;
    font-size: 150%;}



.composed
{

}


.learning_objective
{
    display: flex;
    border: 1px solid black;
    margin: 2%;
    border-radius: 5%;
}
.learning_objective > .idlearning_objective{
    width: 4%;
    border: 1px solid black;
    text-align: center;
    font-size: 150%;}
.learning_objective > .title{
    width: 46%;
    border: 1px solid black;}
.learning_objective > .subject{
    width: 19%;
    border: 1px solid black;}
.learning_objective > .sub_subject{
    width: 19%;
    border: 1px solid black;}
.learning_objective > .student_verdict{
    width: 8%;
    border: 1px solid black;
    text-align: center;}
.learning_objective > .teacher_verdict{
    width: 8%;
    border: 1px solid black;
    text-align: center;}