/* DEFAULTS
----------------------------------------------------------*/

body {
    font-family: 'Roboto',"Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
    font-size: 1em;
    margin: 0px;
}

body, html {
    height: 100vh;
    width: 100vw;
}


header, footer {
    padding: 10px;
    color: white;
    background-color: black;
}

section {
    margin: 5px;
    padding: 10px;
    background-color: lightgrey;
}

article {
    margin: 5px;
    padding: 10px;
    background-color: white;
}



/* HEADINGS   
----------------------------------------------------------*/

h1, h2, h3, h4, h5, h6
{color: darkslategrey; text-transform: none; font-weight: 500; margin-bottom: 10px; }

h1 { font-size: 1.6em; padding-bottom: 0px; font-weight: bold}

h2 { font-size: 1.5em; font-weight:bold;}

h3 {
    font-size: 1.2em;
    font-weight: bold;
}

h4 {
    font-size: 1.1em;
    font-weight: bold;
}

h5, h6 {font-size: 1em;}

/* this rule styles <h1> and <h2> tags that are the 
first child of the left and right table columns */

.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2
{ margin-top: 0px;}

.uamslogo {
    max-width:100%;
}


/* PRIMARY LAYOUT ELEMENTS   
----------------------------------------------------------*/

.page {
    background-color: #fff;
    margin: 20px 20px 20px 20px;
    border: 1px solid #496077;
    padding: 20px;
}

.container {
    display: flex;
    flex-flow: row;
    width: 1088px;
}


.header
{position: relative; margin: 0px; padding: 0px; background: #ffffff; width: 100%; text-align:center;}

.header h1
{font-weight: 500; margin: 15px; padding: 0px 0px 0px 20px; color: #003399;border: none;
 line-height: 2em; font-size: 2em;}

.main
{ padding: 0px 12px; margin: 12px 8px 8px 8px;}

.leftCol
{padding: 6px 0px; margin: 12px 8px 8px 8px; width: 200px; min-height: 200px;}

.footer
{color: #4e5766; padding: 8px 0px 0px 0px; margin: 0px auto; text-align: center; line-height: normal;}

/* TAB MENU   
----------------------------------------------------------*/


div.menu
{padding: 20px 20px 20px 20px; display:inline-block;}

div.menu ul
{list-style: none; margin: 20px; padding: 20px; width: auto;}

div.menu ul li a, div.menu ul li a:visited
{background-color: #465c71; border: 1px #4e667d solid; color: white;
display: inline-block; line-height: 1.35em; padding: 20px 20px;
text-decoration: none; white-space: nowrap;}

div.menu ul li a:hover
{background-color: #bfcbd6; color: #465c71; text-decoration: none;}

div.menu ul li a:active a:link
{background-color: #465c71; color: white; text-decoration: none;}


nav {
    background-color: slategray;
    border: 1px solid #dedede;
    border-radius: 4px;
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
    color: #fff;
    display: block;

    overflow: hidden;
    width: 100%;

}

    nav ul {
        margin: 0;
        padding: 0;
    }

        nav ul li {
            display: inline-block;
            list-style-type: none;
            -webkit-transition: all 0.2s;
            -moz-transition: all 0.2s;
            -ms-transition: all 0.2s;
            -o-transition: all 0.2s;
            transition: all 0.2s;
        }

    nav > ul > li > a > .caret {
        border-top: 4px solid #aaa;
        border-right: 4px solid transparent;
        border-left: 4px solid transparent;
        content: "";
        display: inline-block;
        height: 0;
        width: 0;
        vertical-align: middle;
        -webkit-transition: color 0.1s linear;
        -moz-transition: color 0.1s linear;
        -o-transition: color 0.1s linear;
        transition: color 0.1s linear;
    }

    nav > ul > li > a {
        color: #fff;
        display: block;
        line-height: 56px;
        padding: 0 24px;
        text-decoration: none;
    }

    nav > ul > li:hover {
        background-color: rgb( 40, 44, 47 );
    }

        nav > ul > li:hover > a {
            color: rgb( 255, 255, 255 );
        }

            nav > ul > li:hover > a > .caret {
                border-top-color: rgb( 255, 255, 255 );
            }

    nav > ul > li > div {
        color: #fff;
        background-color: rgb( 40, 44, 47 );
        border-top: 0;
        border-radius: 0 0 4px 4px;
        box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
        display: none;
        margin: 0;
        opacity: 0;
        position: absolute;
        width: 100%;
        visibility: hidden;
        z-index: 100;
        -webkit-transiton: opacity 0.2s;
        -moz-transition: opacity 0.2s;
        -ms-transition: opacity 0.2s;
        -o-transition: opacity 0.2s;
        -transition: opacity 0.2s;
    }

    nav > ul > li:hover > div {
        display: block;
        opacity: 1;
        visibility: visible;
    }

    nav > ul > li > div ul > li {
        display: block;
    }

        nav > ul > li > div ul > li > a {
            color: #fff;
            display: block;
            padding: 12px 24px;
            text-decoration: none;
        }

        nav > ul > li > div ul > li:hover > a {
            background-color: rgba( 255, 255, 255, 0.1);
        }


a:hover {
    color: #1d60ff;
    text-decoration: none;
}

a:active {
    color: #034af3;
}

p {
    margin-bottom: 5px;
    line-height: 1.5em;
    
}

.Important {
    font-size: large;
    color: Red;
}

/* FORM ELEMENTS   
----------------------------------------------------------*/

fieldset
{margin: 1em 0px;  padding: 1em; border: 1px solid #ccc;}

fieldset p 
{margin: 2px 12px 10px 10px;}

fieldset.login label, fieldset.register label, fieldset.changePassword label
{ display: block;}

fieldset label.inline 
{display: inline;}

legend 
{font-size: 1.1em;  font-weight: 600;padding: 2px 4px 8px 4px;}

input.textEntry 
{ width: 320px; border: 1px solid #ccc;}

input.passwordEntry 
{ width: 320px;border: 1px solid #ccc;}

div.accountInfo
{
    width: 42%;
}

.select-semester {
    width: 100%;
    font-size: 1em;
    border: 1px solid #ccc;
    margin-bottom: 10px;
    font-family: 'Roboto',"Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
}

.select-course {
    width: 100%;
    font-size: 1em;
    border: 1px solid #ccc;
    margin-bottom: 10px;
    font-family: 'Roboto',"Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
}

.instructor-mapping-grid {
      width: 100%;
      margin-bottom: 20px;
}

.instructor-mapping-grid td {
    width: 250px;
    padding: 5px;
  
}




/* MISC  
----------------------------------------------------------*/

.clear
{
    clear: both;
}


.title
{ display: block;  float: right; text-align: center; width: auto;}

.loginDisplay
{ font-size: 1.1em; display: block; text-align: left; padding: 10px; margin: 10px; color: black;}

.loginDisplay a:link
{
    color: blue;
}

.loginDisplay a:visited
{
    color: black;
}

.loginDisplay a:hover
{
    color: black;
}

.failureNotification
{
    font-size: 1.2em;
    color: Red;
}

.bold
{
    font-weight: bold;
}

.row {
    width: 100%;
   
}

.menublock {
    width: 20%;
 
    height: 100vh;
	
}

.block {
    width: 80%;
    margin-left: 10px;
}

.content-area {
    width: 99%;
    margin-left: 20px;
}
    


.wrap {
    width: 100%;
    min-width: 940px;
}

.left {
    float: left;
    width: 30%;
    height: 100vh;
}

.center {
    margin: 0 205px;
    height: 100vh;
}

.right {
    float: right;
    width: 30%;
    height: 100vh;
}

.submitButton
{text-align: right;  padding-right: 10px;
}

.verticaltext {font:bold; color: #0000FF; writing-mode: tb-rl; filter: flipH() flipV();

}

.padded {  padding: 10px 2em 0.25in 0; 
    text-align: center;
} 
    
input.text  { font-size: 1em; border: 1px solid #ccc;
    font-family: 'Roboto', "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
    
}

.left-text {
    text-align: left;
}

.text {
    font-size: 1em;
    border: 1px solid #ccc;
    margin-bottom: 10px;
    font-family: 'Roboto',"Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
    width:100%;
    padding: 4px;
}

.small-number-input {
    font-size: 1em;
    border: 1px solid #ccc;
    margin-bottom: 10px;
    font-family: 'Roboto',"Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
    width: 122px;
    padding: 4px;
}


.formlabel {
    font-size: 1em;
    margin-bottom: 10px;
    font-family: 'Roboto',"Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
    width: 100%;
}



    .text.description {width: 80%;
    }


.button_style {
    font-family: 'Roboto', sans-serif;
    font-weight:bold;
    background-color: slategray;
    color: white;
    font-size: 1em;
    border: 1px solid #ccc;
    text-align: center;
    min-height: 40px;
    padding: 5px;
    height: auto;
    border: 1px solid #dedede;
    border-radius: 4px;
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 10px;
}

    .button_style:hover {
        cursor: pointer;
        background-color: blue;
        
    }

    .button_style:active {
        cursor: grabbing;
        background-color: gray;
    }

.menu-button{
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    background-color: slategray;
    color: white;
    font-size: 1em;
    border: 1px solid #ccc;
    text-align: center;
    height: 29px;
    border: 1px solid #dedede;
    border-radius: 4px;
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
    width: 100%;
    margin-bottom: 10px;
}



.small_button_style {
    background-color: slategray;
    color: darkblue;
    font-size: .8em;
    border: 1px solid #ccc;
    margin: 10px 5px 10px 5px;
    height: 29px;
    border: 1px solid #dedede;
    border-radius: 4px;
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
}

    .small_button_style:hover {
        background-color: blue;
        border: 1px solid blue;
    }


.large_button_style {
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    background-color: slategray;
    color: white;
    font-size: 1em;
    border: 1px solid #ccc;
    height: 29px;
    border: 1px solid #dedede;
    border-radius: 2px;
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
    width: 100%;
    height: auto;
    min-height: 60px;
    text-wrap: normal;
    white-space: normal;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 10px;
}

    .large_button_style:hover {
        background-color: blue;
        border: 1px solid blue;
    }

.large_button_style:hover > a {
    background-color: rgba( 255, 255, 255, 0.1);
}

.content-area-button {
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    background-color: slategray;
    color: white;
    font-size: 1em;
    border: 1px solid #ccc;
    height: 29px;
    border: 1px solid #dedede;
    border-radius: 4px;
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
    width: 250px;
    height: auto;
    min-height: 60px;
    text-wrap: normal;
    white-space: normal;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 10px;
}

    .content-area-button:hover {
        background-color: blue;
        border: 1px solid blue;
    }




.editlist {  width:95%}

.indent
{padding-left: 10px;}

.ninetypercentwidth {
    width: 90%
}

.horizontalbar {
    color: #FFFFFF;
}

.mainmenuheader { font-size:larger;}

.mainpanel { margin-bottom:15px}

.attentionmessage-red
{font-size: .9em; color: Red; font-weight:bold;}

.attentionmessage-green
{font-size: .9em; color: Green;}




/*Grid View Style Elements*/

.scroll-area {
    overflow: scroll;
}



.GridViewStyle {
    border: 1px solid #dedede;
    border-collapse: collapse;
    table-layout: auto;
    font-size: .9em;
    padding: 4px;
    margin-top: 10px;
    margin-bottom: 10px;
    border-radius: 4px;
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
    margin-right: 0px;
}

    .GridViewStyle td {padding:5px;}

.HeaderStyle {
    border: 1px solid #dedede;
    background-color: slategray;
    padding: 4px;
}

.HeaderStyle th {padding:5px; color: white; text-align:left; }

.HeaderStyle th a {padding:5px; color: white; text-align:left; }

/*Row*/

tr.RowStyle {background-color:#ffffff; padding:10px;}

tr.RowStyle:hover {cursor:pointer; background-color:khaki}
 
tr.AlternatingRowStyle {background-color:#CCCCCC;}
 
tr.AlternatingRowStyle:hover { cursor: pointer; background-color: khaki;}

/*Footer*/
.FooterStyle {background-color:navy; height:25px;}
/*Pager*/
.PagerStyle table { margin:auto;border:none;}
 
tr.PagerStyle {text-align:center; background-color:#ddd;}
 
.PagerStyle table td {border:1px; padding:5px; }
 
.PagerStyle a {border:1px solid #fff; padding:2px 5px 2px 5px; color:black; text-decoration:none; text-align:center;}
 
.PagerStyle span {padding:2px 5px 2px 5px; color:#000; font-weight:bold; border:2px solid #938ede;}

.EditLongText {width:100%;}

.EditCourseObjectiveText {width:100%;}

.SelectedRowText { background-color:black;font-weight:bold;color:white;}

.CommandRowStyle {font-size: 1em;  padding: 2px;}

/*Detail View Style Elements*/

.DetailViewStyle { border:1px solid grey; border-collapse:collapse; table-layout:auto; font-size:.9em; width:100%;
    padding:4px;}

    .DetailViewStyle td {padding:5px;
    }

.DetailHeaderStyle {background-color: lightgoldenrodyellow; font-weight:bold; padding:5px}

.DetailHeaderStyle th {padding:5px 0px 5px 0px; text-align:left;  font-weight:bold;}

.DetailRowStyle tr {background-color:#ffffff; padding:10px}

.CourseLevelAssignmentPanel {border:1px solid grey; padding:5px; background-color:azure;}

.CourseLevelAssignmentPanel p {font-size:.9em; }

.CourseLevelAssignmentPanel .checkboxstyle {font-size:.8em; padding: 5px 10px 10px 5px;}

.CourseLevelAssignmentPanel .labelstyle {font-size:.9em;}

.objectivecolor1 { background-color:#99CCFF}

.objectivecolor2 { background-color:#99CCFF; width: 25%; }

.compcolor1 {  background-color:#99CCFF}

.compcolor2 {  background-color:#99CCFF;width: 25%;}

.teachcolor1 { background-color:#FFCC99 }

.teachcolor2 { background-color:#FFCC99; width: 25%; vertical-align:top; }

.assmtcolor1 {  background-color:#CCFFCC}

.assmtcolor2 { background-color:#CCFFCC;width: 25%;vertical-align:top; }

.twentyfivepercentwidth { width: 25%;}

.changecompetencystyle {background-color: #FFE8E8;}

.Program-Drop-Down-Style { width:50%;}

.questionlabelstyle {width:100%;}

table.border_style
 {border-top-style:solid; border-right-style:solid; border-bottom-style:solid; border-left-style:solid;
 border-width:thin; border-collapse:collapse;}
 
 table.border_style td
 {border-top-style:solid; border-right-style:solid; border-bottom-style:solid; border-left-style:solid;
 border-width:thin;  width:150px;}
 
  table.border_style th
 {border-top-style:solid; border-right-style:solid; border-bottom-style:solid;
 border-left-style:solid; border-width:thin;}

.text-wrap-up {
    text-wrap: normal;
    white-space: normal;
}


.admin-panel-content {
    text-wrap: normal;
    white-space: normal;
    text-align: left;
    padding-bottom: 10px;
}
.report-dashboard {
    margin:10px;
}

.edit-grid-text {
    text-wrap:normal;
    white-space:normal;
    height:100px;
}


.edit-grid-text-small {
    width: 25px;
}

.small-grid td{
    padding: 5px;
}

.login-section {
    width: 360px;
    margin: 0 auto;
   
}

.login-label {
    font-weight: bold;
    font-family: 'Roboto',"Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
    width: 200px;
}

.login-button-section {
    text-align: center;
    margin-top: 10px;
}

.login-info-row {
    display:flex;
   flex-direction: row;
}

.login-text {
    width: 250px;
    font-size: 1em;
    border: 1px solid #ccc;
    margin-bottom: 10px;
    padding: 4px;
    font-family: 'Roboto',"Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    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 {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 80%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

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

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

#message {
    padding:20px;
}

/* Add Animation */
@-webkit-keyframes animatetop {
    from {
        top: -300px;
        opacity: 0
    }

    to {
        top: 0;
        opacity: 1
    }
}

@keyframes animatetop {
    from {
        top: -300px;
        opacity: 0
    }

    to {
        top: 0;
        opacity: 1
    }
}

.modal-header {
    padding: 2px 16px;
    background-color: darkslateblue;
    color: white;
}

.modal-warning-header {
    padding: 2px 16px;
    background-color: red;
    color: white;
}

.modal-header h2 {
    color: white;
}

.modal-body {
    padding: 2px 16px;
}

.modal-footer {
    padding: 2px 16px;
    background-color: darkslateblue;
    color: white;
}

.btn-yes {
    color: white;
    border: 1px white;
    margin: 10px;

}

.btn-no {
    color: white;
    border: 1px white;
    margin: 10px;
}

.flex-columns {
    height: auto;
    padding: 30px 15px 60px;
    text-align: center;
    display: grid;
    grid-gap: 10px;
    grid-row-gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    align-items: center;
}

.panel-section {
    background-color: #fff;
    border: 2px solid #ccc;
    border-radius: 3px;
    box-shadow: 0 8px 6px -6px black;
    margin-top: 20px;
    padding: 10px;
    white-space: normal;
    min-height: 300px;
 
}

.panel-section h2 {
    font-weight: bold;
}

.panel-content {
    width: 100%;
}

.course-add-info {
    width: 100%;
}

.course_info_form_item {
    display:block;
    width: 300px;
    border: 1px solid #ccc;
    margin: 5px 0 10px 0;
    font-size: 1em;
    font-family: 'Roboto',"Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
    padding: 4px;
}

.course-desc {
    width: 400px;
    height: 500px;
}

.table-labels {
      width: 20%;
}
.table-inputs {
    width: 80%;
}
.form-area  {
    width: 100%;
}

.text-label {
    width: auto;
    font-weight:bold;
}

@media screen and (max-width: 400px) {


    .login-label {
        width: 100%;
    }

    .login-text {
        width: 100%;
    }

    .login-section {
        width: 100%;
    }

    .login-info-row {
        display: flex;
        flex-direction: column;
    }


}

@media screen and (max-width:700px) {

    .menublock {
        width:100%;
        height: auto;
    }
    .content-area {
        width:100%;
    }

    .container {
        flex-wrap: wrap;
    }

    .text {
        width:100%;
    }

}

.small-eval-grid {
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 20px;
}

.evaluation-summary-grid {
    margin-top: 10px;
    margin-bottom: 20px;
    width: 100%;
    
}

.evaluation-summary-grid td {
    padding: 5px;
}

.evaluation-summary-grid th {
   padding: 5px;
   background-color: lightgreen;
}

.eval-caption-style {
    font-weight: bold;
    text-align: left;
}

.instructor-list {
    font-weight: bold;
    text-indent: 5px;
    margin-bottom: 5px;
}

#more-info {
    width: 100%;
}

@media print {
    .large_button_style  {
        display: none;
    }
    .button_style {
        display: none;
    }

    nav {
        display: none;
    }
    .menublock {
        display: none;
    }

    .content-area {
        width: 100%;
    }

    .loginDisplay {
        display: none;
    }

    .selectcourse {
        display:none;
    }

    .uamslogo {
        display:none;
    }

    .catslogo {
        align-content: center;
        margin-left: auto;
        margin-right: auto;
    }
}

#btnNewReminderEmail:hover {
    cursor: pointer;
}

#btnNewFirstEmail:hover {
    cursor: pointer;
}

#btnSendReport:hover {
    cursor: pointer;
}