/* General UI items */

.modal_dialog {
    display: none;
}
.message-box {
    padding: 0.5rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    background: #E9E9E9;
    display: none;
}
.message-box.error_message {
    color: #FF8080;
    display: block;
}
.message-box.ok_message {
    display: block;
}


/* Conditional displaying of content items based on permissions */

#loading_icon {
    display:none;
}
#content.loading #loading_icon {
    display:block;
}

#unknown_user_banner {
    display:none;
}
#content.unknown_user #unknown_user_banner {
    display:block;
}

#main_content {
    display:none;
}
#content.regular_user #main_content {
    display:block;
}
#content.admin_user #main_content {
    display:block;
}

#tabs {
    display:none;
}
#content.admin_user #tabs {
    display:block;
}

#content-1-users {
    display:none;
}
#content.admin_user #content-1-users {
    display:block;
}

#content-2-sessions {
    display:none;
}
#content.admin_user #content-2-sessions {
    display:block;
}

/* Visual styles */

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    background: white;
    margin: 0;
    padding: 0;
}

#header {
    width: 100%;
    background: #FF9900;
    padding:0.3rem;
}
#header img {
    float:left;
    height: 2rem;
    margin: 0.3rem 1.5rem 0.3rem 0.3rem;
}
#header h2 {
    font-weight: bold;
    margin: 0.3rem 1.5rem 0.3rem 1.5rem;
}
#header #current_user {
    float:right;
    margin: 0.5rem 1.5rem 0.5rem 1.5rem;
}
.clear {
    clear:both;
}

#content {
    margin-top: 1rem;
}

.loading_icon {
    width: 100%;
    margin-top: 3rem;
    margin-bottom: 4rem;
}
.loading_icon img {
    display:block;
    width: 50%;
    max-width: 200px;
    margin-left: auto;
    margin-right: auto;
}

#unknown_user_banner {
    text-align: center;
}


#user_profile_unlock {
    display: block;
    max-width: 30rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

table#users {
    margin-bottom: 1rem;
}

td {
    padding: 0.2rem 0.5rem 0.3rem 0.5rem;
}


.modal_dialog .dialog_section {
    padding-bottom: 2.5rem;
    clear:left;
}
.modal_dialog .dialog_section_title {
    font-weight: bold;
    margin-bottom: 0.2rem;
    border-bottom: 1px solid #F0F0F0;
    padding-bottom: 0.2rem;
}

.modal_dialog .dialog_label {
    min-inline-size: 45%;
    display: inline-block;
}

.modal_dialog input[type="text"], .modal_dialog input[type="password"], .modal_dialog input[type="file"], .modal_dialog select {
    width: 45%;
    min-width: 200px;
}

.modal_dialog img.profile_photo {
    height: 8rem;
    float: left;
    margin-right: 2rem;
    margin-bottom: 2.5rem;
}

.modal_dialog img.session_photo {
    width:100%
}

/* Responsiveness */

@media screen and (max-width: 20rem) {
    #header h2 {
        display: none;
    }
}

@media screen and (max-width: 100rem) {
    .ui-dialog {
        width: 90%;
    }
}

@media screen and (max-width: 40rem) {
    .session_source, .session_mode {
        display: none;
    }
}