/* #msic_navbar is the nav bar. One msic_navbar id appears on each toplevel page.
   The tag type is ul. Its class is .msic_nav_ul. Each li inside this ul is of class
   .msic_nav_li. Each anchor (link) within each li is of class .msic_nav_a. */

#msic_navbar {
    padding:        0;
    margin:         0;
}

#edit_assessment_table {
	table-layout: fixed;
	border: none;
	border-spacing: 10px;
	font-family:    Arial, Helvetica, sans-serif;
	font-size:      14px;
	font-weight:    bold;
	padding-top: 10px;

	colgroup {
	    #col1 { width:5%; }
	    #col2 { width:80%; }
	    #col3 { width:15%; }
	}

	/* Used to alert user. */
	.warning {
	    color:red;
	}
}

/* .assessmentadminform and div.assessmentadminform contain css for the New Assessment page */

.assessmentadminform {
    
    .input_disabled {
        background-color:lightgrey;
        padding:2px 1px;
    }
	.assessment_popup_error {
		color: red;
		font-weight: bold;
	}

    .leftcolumn {
        width: 70%;
    }
    
    .rightcolumn {
        width: 30%;
    }

    .assessmentrow {
        display: flex;
    }

    .assessmentrow:after {
        content: "";
        display: table;
        clear: both;
    }

    .form_table {
        table-layout: fixed;
        border: none;
        border-spacing: 30px;
        font-family:    Arial, Helvetica, sans-serif;
        font-size:      14px;
        font-weight:    bold;
    }

    .edit_form_table {
        table-layout: fixed;
        border: none;
        border-spacing: 30px;
        font-family:    Arial, Helvetica, sans-serif;
        font-size:      14px;
        font-weight:    bold;
        padding-top: 50px;

        colgroup {
            #col1 { width:5%; }
            #col2 { width:80%; }
            #col3 { width:15%; }
        }

        /* Used to alert user. */
        .warning {
            color:red;
        }
    }
    button {
        white-space: nowrap;
        overflow: hidden;
        background-color: #003663;
        color: white;
        margin: 0px;
    }
    button {
        font-family:"Open Sans", Helvetica, Arial, sans-serif;
        font-size:14px;
        font-weight: bold;
    }
    td {
        border: none;
        font-size: 14px;
        color: black;
    }
    td a {
        font-size: 14px;
        font-weight: bold;
        color: #1cbbb4;
        text-decoration: underline;
    }
    button {
        white-space: nowrap;
        overflow: hidden;
        background-color: #003663;
        color: white;
        margin: 0px;
    }
    button {
        font-family:"Open Sans", Helvetica, Arial, sans-serif;
        font-size:14px;
        font-weight: bold;
    }
    td {
        font-size: 14px;
        color: black;
    }
    td a {
        font-size: 14px;
        font-weight: bold;
        color: #1cbbb4;
        text-decoration: underline;
    }
}

div.assessmentadminform {
    position: absolute; width: 70%; z-index: 0;
    #assessmentcontent {
        /* Do not change position, z-index, or visibility! */
        /* The functioning of this page depends upon these values. */
        position: absolute; width: 100%; z-index: 9; visibility: visible;

        .salutation {
            text-align: left;
        }

        #save {
            /* Do not change visibility here! The functioning of this page depends upon this setting. */
            visibility: hidden; float: left;
        }
        #delete {
            /* Do not change visibility here! The functioning of this page depends upon this setting. */
            visibility: hidden; float: left;
        }
        #edit {
            /* Do not change visibility here! The functioning of this page depends upon this setting. */
            visibility: hidden; float: left;
        }
        #close {
            float: right;
            background-color: #1cbbb4;
        }
    }
    #editassessment {
        /* Do not change position, z-index, or visibility! */
        /* The functioning of this page depends upon these values. */
        position: absolute; width: 100%; z-index: -1; visibility: hidden;

        #modes_div {
            /* modes_div is the id of the div that contains the mode radio buttons. */
            border-style:solid; border-width:3px; border-color:darkblue; padding: 10px;

            span {
                font-weight:bolder;
            }

            /* mode_info is the info image button inside the modes_div */
            #mode_info {
                float: right;
            }

            /* show_all_modes_div is the div containing the checkbox for 'show all modes' */
            /* It is safe to make its checkbox disappear by setting 'visibility' to 'hidden' */
            #show_all_modes_div {
                float: right;

                /* show_all_modes_label is the label for the show all modes check box. */
                #show_all_modes_label {
                    font-weight:bold;
                }
            }
        }

        /* mode_help is the paragraph immediately following the modes_div. It is used
           for help text, explaining what the mode does. */
        #mode_help {
            color:green;
        }

        #submit {
            float: left;
        }
        #cancel {
            float: right;
        }

        select {
            font-family:    Arial, Helvetica, sans-serif;
            font-size:      14px;
            font-weight:    bold;
            background-color : white; 
        }

        option {
            font-family:    Arial, Helvetica, sans-serif;
            font-size:      14px;
            font-weight:    bold;
            background-color : white; 
        }
    }

    .assessment_popup_email {
        background-color: white;
    }

    .assessment_text {
        font-family:    Arial, Helvetica, sans-serif;
        font-size:      14px;
        font-weight:    bold;
    }
    .validate_real{}
    input[type="text"] {
        font-family:    Arial, Helvetica, sans-serif;
        font-size:      14px;
        font-weight:    bold;
        background-color : white; 
    }
    .alnright { text-align: right; }
    .alnleft { text-align: left; }
    tr {
        border: none;
    }
    td {
        border: none;
        font-size: 14px;
        color: black;
    }
    td:nth-child(odd) {
        padding: 0 0;
    }
    td:nth-child(even) {
        padding: 0 0;
    }
    p {
        padding : 0;
        margin : 0;
    }
    .validate_int {

    }
}
.site-content {
  margin-top: 35px;
}

#password_change_snippet {

    p {
        font-family:    Arial, Helvetica, sans-serif;
        color:          #003663;
        margin-bottom: .5rem;
    }
    
    #submit {
        font-size: 0.9em;
        font-weight: bold;
        background-color: #003663;
        border: none;
        color: white;
        height: 32px;
        text-decoration: none;
        cursor: pointer;
    }

    #about {
        p {
            color: green;
            margin-top: 20px;
        }
    }

    #response {
        color: red;
    }
}
.entry-content ul, .entry-content ol {
  margin-top: .25em;
  font-size: 15px;
}

p.user_banner {
    font-weight:    bold;
    font-family:    Arial, Helvetica, sans-serif;
    padding-top: 10px;
    padding-left: 45px;
    margin:         0;
    color:          #003663;
}

p.password_reset_text {
    font-weight:    bold;
    font-family:    Arial, Helvetica, sans-serif;
    color:          #003663;
}

.assessment_text {
    font-family:    Arial, Helvetica, sans-serif;
    font-size:      12px;
    font-weight:    bold;
}
.validate_real{}
input[type="text"] {
    font-family:    Arial, Helvetica, sans-serif;
    font-size:      12px;
    font-weight:    bold;
}
input[type="email"] {
    font-family:    Arial, Helvetica, sans-serif;
    font-size:      12px;
    font-weight:    bold;
}
input[type="url"] {
    font-family:    Arial, Helvetica, sans-serif;
    font-size:      12px;
    font-weight:    bold;
}
select {
    font-family:    Arial, Helvetica, sans-serif;
    font-size:      12px;
    font-weight:    bold;
}
.alnright { text-align: right; }
.alnleft { text-align: left; }
table {
    border-collapse: separate;
    border-spacing: 14px 0;
}
td { padding: 7px 0; }
.horizontal {
    display: inline;
}
.nameformat {
}
.non_neg_int_format {
}
.telephone {
}
.optional_telephone {
}
.emailformat {
}
.url {
}
.optional_url {
}
.validation_flag {

}

#outer {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 1000px;
    width: 1200px;
}

.misc_border {
    border-style:groove;
    border:blue;
}

.msic_row {
    width: 1200px;
    flex: 0 0 100px;
    margin: 5px;
    background-color: white;
}

.msic_small_row {
    width: 1200px;
    flex: 0 0 40px;
    margin: 5px;
    background-color: white;
}

.misc_big_row {
    flex-basis: 800px;
}

.msic_role_button {
    
}

.topnav {
    overflow: hidden;
    background-color: #e9e9e9;
 }

  /* Style the search box inside the navigation bar */
.topnav span {
    float: left;
    padding: 6px;
    border: none;
    margin-top: 8px;
    margin-right: 12px;
    font-size: 17px;
 }

  .topnav select {
      float: left;
      padding: 6px;
      border: none;
      margin-top: 8px;
      margin-right: 12px;
      font-size: 17px;
   }

  /* Style the search box inside the navigation bar */
.topnav input[type=text] {
    float: left;
    padding: 6px;
    border: none;
    margin-top: 8px;
    margin-right: 12px;
    font-size: 17px;
    border: 1px solid #ccc;
}

.msic_nav_ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #003663;
}
  
.msic_nav_li {
    float: left;
}
  
.msic_nav_li .msic_nav_a {
    display: block;
    color: white;
    text-align: center;
    padding: 8px;
    text-decoration: none;
}
  
.msic_nav_li .msic_nav_a:hover {
    background-color: #003663;
    color:#1cbbb4;
}

.clickable_img {
    cursor: pointer;
}

.clickable_img:hover {
    filter: invert(75%);
}

/* For each page, there is a class. The class is the same as the name of the page.
   Each page is produced by one or more php snippets. Each snippet is wrapped in a
   div with the class of the page listed below. Thus, div.[page name] wraps of the
   html within the snippet. */

div.institutions {
    position: relative; left:20px;

    h1 {
        color:#003663;
    }

    #add_new_league_div {
        position: relative; left: 25%; width: 50%; display: block;
    }

    #add_new_league_open_close_button {
        float: left; font-size:14px; font-weight: bold;
    }

    #add_new_league_input_div {
        float: left; visibility:hidden;
    }

    #league_name_span {
        float: left;
    }

    #league_name_input {
        float: left; font-size:12px;
    }

    #league_name_spaces {
        float: left;
    }

    #league_options_div {
        visibility: hidden;
    }

    #institutions_div {
        display: block; max-width: 1000px; z-index: 1;
    }

    #popupEditor {
        position: absolute; z-index: 9; visibility: hidden;
    }

    table.scrolldown {
        width: 100%;

        /* border-collapse: collapse; */
        border-spacing: 0;
        border: 2px solid black;
        height: 800px;
    }

    table.leagues_scrolldown {
        width: 100%;

        /* border-collapse: collapse; */
        border-spacing: 0;
        border: 2px solid black;
        height: 500px;
    }

    /* To display the block as level element */
    table.scrolldown tbody,
    table.scrolldown thead {
        display: block;
    }

    thead tr th {
        height: 40px;
        line-height: 40px;
    }

    table.scrolldown tbody {

        /* Set the height of table body */
        height: 800px;

        /* Set vertical scroll */
        overflow-y: auto;

        /* Hide the horizontal scroll */
        overflow-x: auto;
    }

    tbody {
        border-top: 2px solid black;
        height: 100%;
    }

    tbody td,
    thead th {
        border-right: 2px solid black;
    }
    th, td {
        max-width: 150px;
        width: 150px;
        min-width: 150px;
        text-align: center;
    }
    #url_head {
        max-width: 40px;
        width: 40px;
        min-width: 40px;
        text-align: center;
    }
    td.url_th,
    td.url_td {
        max-width: 40px;
        width: 40px;
        min-width: 40px;
        text-align: center;
    }
    #status_head {
        width: 70px;
        min-width: 70px;
        text-align: center;
    }
    th.bit_td,
    td.bit_td {
        width: 70px;
        min-width: 70px;
        text-align: center;
    }
    th.medium_td,
    td.medium_td {
        width: 120px;
        min-width: 120px;
        text-align: center;
    }
    th.long_td,
    td.long_td {
        width: 250px;
        min-width: 250px;
        text-align: center;
    }
    button {
        white-space: nowrap;
        overflow: hidden;
        background-color: #003663;
        color: white;
        margin: 0px;
    }
    button {
        font-family:"Open Sans", Helvetica, Arial, sans-serif;
        font-size:11px;
        font-weight: bold;
    }
    td {
        font-size: 11px;
        color: black;
    }
    td a {
        font-size: 11px;
        font-weight: bold;
        color: #1cbbb4;
        text-decoration: underline;
    }
    .edit_client_info {

    }
    #loader {
        border: 12px solid #f3f3f3;
        border-radius: 50%;
        border-top: 12px solid #444444;
        width: 70px;
        height: 70px;
        animation: spin 1s linear infinite;
    }

    .center_loader {
        position: absolute;
        top: 500px;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    }

    @keyframes spin {
        100% {
            transform: rotate(360deg);
        }
    }

    #league_options_div {
        label {
            /* Add css to format labels inside of the league options section. */
        }
        input[type=radio] {
            /* Add css to format radio buttons inside of the league options section. */
        }
    }

    #institutions_div {

    }
}

/* Ignore leagues! Changes to .institutions will automatically apply to .leagues */

.leagues {
}

/* Ignore .manage-clients. Changes to .updateclients will automatically apply to .manage-clients. */

.manage-clients {
}

div.msic-profile {
    /* Style the tab */
    .tab {
        overflow: hidden;
        border: 1px solid #ccc;
        background-color: #f1f1f1;
        width: 1840;
    }

    /* Style the buttons that are used to open the tab content */
    .tab button {
        background-color: inherit;
        float: left;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 14px 30px;
        transition: 0.3s;
    }

    /* Change background color of buttons on hover */
    .tab button:hover {
        background-color: #ddd;
    }

    /* Create an active/current tablink class */
    .tab button.active {
        background-color: #ccc;
    }

    /* Style the tab content */
    .tabcontent {
        display: none;
        padding: 6px 12px;
        border: none;
        border-top: none;
        border-left: none;
        width: 1840;
    }

    .column {
        float: left;
        width: 25%;
    }

    .rcolumn {
        float: right;
        width: 25%;
    }

    /* Clear floats after the columns */
    .row:after {
        content: "";
        display: table;
        clear: both;
    }

    nav ul{height:200px; width:80%;}
    nav ul{overflow:hidden; overflow-y:scroll;}

    .vertical-center {
        margin: 0;
        position: relative;
        top: 50%;
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    .horizontal-center {
        margin: 0;
        position: relative;
        left: 33%;
        -ms-transform: translateX(-33%);
        transform: translateX(-33%);
    }

    .importantlink {
    }

    a.importantlink:link, a.importantlink:visited {
        background-color: #f44336;
        color: white;
        padding: 14px 25px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
    }

    a.importantlink:hover, a.importantlink:active {
        background-color: red;
    }
    
	#loader {
        border: 12px solid #f3f3f3;
        border-radius: 50%;
        border-top: 12px solid #444444;
        width: 70px;
        height: 70px;
        animation: spin 1s linear infinite;
    }

    .center_loader {
        position: absolute;
        top: 500px;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    }

    #Profile {
        float: left;position: relative;
    left: 20px;
    }

    #view_folders_and_files {
        float: left;
    }

    #CPR {
        h2 {
            color:#003663;
        }
        #div_wrapping_form {
            margin: auto; padding: 10px; width: 600px;
        }
        #div_rapping_filters {
            margin: auto; padding: 10px;
            label {
                font-weight: bold;
            }
        }
        #yearselect {
            font-weight: bold;
        }
        #extensionselect {
            font-weight: bold;
        }
    }

    #directorytable {
        width: 600px;
        /* Add css to format tags in the directory table. */
    }

    #assessments_iframe {
        float: left;
    }
}

div.update-clients {

}

div.member-assessments {
    #primary {
        position: relative; z-index: 1;
    }
    #assessments_div {
        display: block; max-width: 1000px;
    }
    #details_frame {
        position: absolute; z-index: -1; visibility: hidden; top: 0; left: 0;
    }
    h2 {
        color: #003663;
    }
    table.scrolldown {
        width: 100%;

        /* border-collapse: collapse; */
        border-spacing: 0;
        border: 2px solid black;
        height: 800px;
    }

    /* To display the block as level element */
    table.scrolldown tbody,
    table.scrolldown thead {
        display: block;
    }

    thead tr th {
        height: 40px;
        line-height: 40px;
    }

    table.scrolldown tbody {

        /* Set the height of table body */
        height: 800px;

        /* Set vertical scroll */
        overflow-y: auto;

        /* Hide the horizontal scroll */
        overflow-x: hidden;
    }

    tbody {
        border-top: 2px solid black;
        height: 100%;
    }

    tbody td,
    thead th {
        border-right: 2px solid black;
    }
    th, td {
        max-width: 110px;
        width: 110px;
        min-width: 110px;
        text-align: center;
        font-size: 10px;
    }
    button {
        white-space: nowrap;
        overflow: hidden;
        background-color: #003663;
        color: white;
        margin: 0px;
    }
    button {
        font-family:"Open Sans", Helvetica, Arial, sans-serif;
        font-size: 10px;
        font-weight: bold;
    }
    td {
        font-size: 10px;
        color: black;
    }
    .assessment_popup {
        color: #1cbbb4;
        font-weight: bold;
        text-decoration: underline;
        background:none;
        border:none;
        margin:0;
        padding:0;
        cursor: pointer;
    }
}

div.assessmentpopup {
    position: absolute; width: 100%; z-index: 0;

    #assessmentcontent {
        position: absolute; width: 100%; z-index: 9; visibility: visible;

        #save {
            visibility: hidden; float: left;
        }
        #delete {
            visibility: hidden; float: left;
        }
        #edit {
            visibility: hidden; float: left;
        }
        #close {
            float: right;
background-color: #1cbbb4;
        }
    }
    #editassessment {
        position: absolute; width: 100%; z-index: -1; visibility: hidden;

        #submit {
            float: left;
        }
        #cancel {
            float: right;
        }
    }
    
	.assessment_text {
		font-family:    Arial, Helvetica, sans-serif;
		font-size:      14px;
		font-weight:    bold;
	}
	.validate_real{}
	input[type="text"] {
		font-family:    Arial, Helvetica, sans-serif;
		font-size:      14px;
		font-weight:    bold;
		background-color : white; 
	}
	.alnright { text-align: right; }
	.alnleft { text-align: left; }
	table {
		border-collapse: separate;
		border-spacing: 20px 0;
		border: none;
	}
	tr {
		border: none;
	}
	td:nth-child(odd) {
		padding: 0 0;
		border: none;
	}
	td:nth-child(even) {
		padding: 0 0;
		border: none;
	}
	p {
		padding : 0;
		margin : 0;
	}
    .validate_int {

	}
}

/* Do not confuse this class with .update_clients above. This class applies to the div within pages
   update-clients and manage-clients which allow the user to alter profile information. Changes to this
   form should be made here. */

div.updateclients {
    #create_client_account {
        background-color: #1cbbb4; color: white; visibility: hidden;
    border: none;
    margin-bottom: 10px;
    }
    #snippet {
        position: relative; z-index: 0; left: 30px; margin-top: 20px;
    }
    #create_new_profile_button {
        background-color: #003663; color: white;
    }
    #outer {
        display: flex; flex-direction: column;
    }
    #create_client_title {
        visibility: hidden; font-weight: bold; float: right;
    }
    #create_new_client {
        float: right;
    }
    #create_client_spaces {
        float: right;
    }
    #clear_all_fields {
        float: right;
    }
    #profile_form_table {
        border: none;

        tr {
            border: none;
        }
        td {
            border: none;
        }
    }
    #wpiframe_container {
        position: absolute; z-index: -1; visibility: hidden; border:4px solid red;
    }
    body {
        font-size: 0.6em;
    }
	select {
		font-size: 12px;
        height: 38px;
	}
    .msic_big_row input {
        padding: 5px;
        height: 32px;
    }
    .msic_big_row input[type=text] {
         padding: 5px;
        height: 32px;
    }
    .msic_big_row input[type=email] {
        padding: 5px;
        height: 18px;
    }
    .msic_big_row input[type=checkbox] {
        padding: 5px;
        height: 18px;
    }
    .msic_big_row input[type=password] {
        padding: 5px;
        height: 32px;
    }
    .msic_big_row input[type=submit] {
        padding: 5px;
        height: 18px;
    }
    #submit {
        font-size: 0.9em;
        font-weight: bold;
        background-color: #003663;
        border: none;
        color: white;
        height: 32px;
        text-decoration: none;
        cursor: pointer;
    }
    .msic_big_row input[type=button] {
        font-size: 0.9em;
        font-weight: bold;
        background-color: green;
        border: none;
        color: white;
        height: 40px;
        text-decoration: none;
        cursor: pointer;
    }
	#loader {
        border: 12px solid #f3f3f3;
        border-radius: 50%;
        border-top: 12px solid #444444;
        width: 70px;
        height: 70px;
        animation: spin 1s linear infinite;
    }
    .center_loader {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    }
}