html, body, div, span, h1, h2, h3, p, a, em, img, strong, sub, sup, b, u, i, center, ol, ul, li,
form, fieldset, label, input, select, textarea, button, legend, table, caption, tbody, tfoot, thead, tr, th, td,
header, footer, nav, menu, aside, article, canvas, details, embed, figure, figcaption, section {
    margin  : 0;
    padding : 0;
    border  : none;
    outline : none;
}

html, body {
    min-height : 100%;
    height     : 100%;
}

body {
    display          : flex;
    flex-flow        : column nowrap;
    font-family      : "Open Sans", Helvetica, Arial, sans-serif;
    font-size        : 100%;
    line-height      : 1.5;
    background-color : #f8f8ff;
    color            : #000000;
}

h1 {
    font-size      : 1.5rem;
    font-weight    : bold;
    letter-spacing : .1em;
    text-transform : uppercase;
    margin         : .3em 0;
    text-align     : center;
    color          : #3758a1;
}

h2 {
    font-size      : 1.2rem;
    font-weight    : bold;
    letter-spacing : .05em;
    text-transform : uppercase;
    margin         : .3em 0;
    text-align     : center;
    color          : #3758a1;
}

h3 {
    font-size      : 1rem;
    font-weight    : bold;
    text-transform : uppercase;
    margin         : .2em 0;
    text-align     : center;
    color          : #3758a1;
}

h4 {
    font-size   : 1rem;
    font-weight : bold;
    margin      : .1em 0;
    text-align  : left;
}

h1 > a, h2 > a, h3 > a, h4 > a {
    font-size : inherit !important;
    color     : inherit !important;
}

a {
    color           : blue;
    text-decoration : none;
}

a > .fa {
    margin         : 0 .5em;
    vertical-align : middle;
}

table {
    font-size       : .8rem;
    margin          : 1em auto;
    border-collapse : collapse;

}

td {
    box-sizing     : border-box;
    padding        : .1em .3em;
    border         : 1px solid #3758a1;
    vertical-align : middle;
}

table > caption {
    font-size      : 1em;
    font-weight    : bold;
    text-transform : uppercase;
    padding        : .3em 0;
    text-align     : center;
    color          : steelblue;
}

table > thead > tr > td {
    font-weight : bold !important;
    text-align  : center !important;
}

hr {
    height           : 2px;
    background-color : #3758a1;
    color            : #3758a1;
}

input, select, textarea {
    box-sizing       : border-box;
    border           : 1px solid #3758a1;
    border-radius    : 40px;
    background-color : white;
    box-shadow       : none;
    padding          : .3em .7em;
}

textarea {
    border-radius    : 1em !important;
}

input {
    font-size : 1rem;
}

textarea {
    resize : vertical;
}

input:focus, select:focus, textarea:focus {
    background-color : khaki;
}

input[type=checkbox] {
    width          : 2em;
    height         : 2em;
    vertical-align : -.7em;
}

input[type=radio] {
    width          : 2em;
    height         : 2em;
    vertical-align : -.7em;
}

a.region:focus,
a.button:focus,
img#menu-logo:focus,
.menu-item > a:focus,
button.university-search-name-i:focus,
h1 > a:focus, h2 > a:focus,
h3 > a:focus, h4 > a:focus,
h5 > a:focus,
textarea:focus,
input:focus,
img:focus {
    outline        : none;
    box-shadow     : none;
    border         : 2px dashed lightskyblue !important;
}

.select2-container {
    max-width : 100% !important;
}

.select2.select2-container {
    /*width : 100% !important;*/
}

.select2-selection--single, .select2-selection--multiple {
    border-color  : #3758a1 !important;
    border-radius : 40px !important;
    padding-left: .5em !important;
}

optgroup {
    font-weight    : bold;
    font-style     : normal;
    text-transform : uppercase;
}

option {
    font-weight    : normal;
    font-style     : normal;
    text-transform : none;
}

label {
    display        : inline-block;
    margin-right   : .5em;
    vertical-align : middle;
    opacity        : 1;
    color          : #3758a1;
}

#wrapper button, #wrapper .button, .buttons-panel button, .buttons-panel .button {
    display         : flex;
    flex-direction  : column;
    justify-content : center;
    align-items     : center;
    box-sizing      : border-box;
    margin          : .3em 1em;
    padding         : .5em 1em;
    font-size       : 1rem;
    font-weight     : bold;
    border-radius   : 40px;
    border          : 3px solid  #ffcf4a;
    background      : #3758a1;
    text-align      : center;
    color           : #ffcf4a;
    cursor          : pointer;
}

#content button:hover, #content .button:hover, .buttons-panel button:hover {
    background    : #ffcf4a;
    border-color  : #3758a1;
    color         : #3758a1;
}

#content button.active, #content .button.active, .buttons-panel button.active {
    background    : #ffcf4a;
    border-color  : #3758a1;
    color         : #3758a1;
}

p {
    margin      : .3em 0;
    text-indent : 1.5em;
    text-align  : justify;
}

img {
    vertical-align : middle;
}

ul {
    list-style : none outside;
}

ol {
    list-style : decimal outside;
}

.hidden {
    display : none !important;
}

.error {
    font-weight : bold !important;
    color       : #cb2156 !important;
    font-size   : .9em;
}

#wrapper {
    flex      : 1 0 auto;
    display   : flex;
    flex-flow : column nowrap;
}

#wrapper > * {
    flex-shrink : 0;
}

#footer {
    display         : flex;
    justify-content : center;
    align-items     : center;
    font-size       : .8rem;
    padding         : .1em;
    border-top      : 2px solid #3758a1;
    background      : #f1bd44;
}

#footer > #footer-copy {
    flex-grow  : 1;
    text-align : center;
}

#main-menu {
    display         : flex;
    flex-flow       : row wrap;
    justify-content : flex-start;
    align-items     : center;
    padding         : .2em 2em;
    background      : #3758a1;
}

#main-menu #menu-logo {
    height           : 4em;
    margin-right     : 2em;
    background-color : aliceblue;
    padding          : .5em 1em;
    border-radius    : 0 1em;
    box-sizing       : border-box;
}

#main-menu > .menu-item {
    position : relative;
}

#main-menu > .menu-item a {
    display       : flex;
    align-items   : center;
    box-sizing    : border-box;
    margin        : 0 2em 0 0;
    padding       : 0 .5em;
    font-size     : 1rem;
    font-weight   : bold;
    border        : 4px solid transparent;
    border-left   : none;
    border-right  : none;
    line-height   : 1;
    height        : 4em;
    color         : white;
}

#main-menu > .menu-item > a {
    text-align : center;
}

#main-menu > .menu-item a:hover {
    color        : #ffcf4a;
    border-color : #ffcf4a;
}

#main-menu .menu-item-active > a {
    color        : #ffcf4a;
    border-color : #ffcf4a;
}

#main-menu .sub-menu {
    left     : -1000em;
    top      : 4.1em;
    position : absolute;
    opacity  : 0;
    z-index  : 10;
}

#main-menu .sub-menu .sub-menu-item {
    background : #3758a1;
}

#main-menu .sub-menu .sub-menu-item a {
    margin     : 0 1em;
    text-align : left;
    width      : 15.5em;
}

#main-menu .menu-item:hover .sub-menu {
    left    : 0;
    opacity : 1;
}

#main-menu .fa-facebook,
#main-menu .fa-low-vision,
#main-menu .fa-volume-up,
#main-menu .fa-volume-mute {
    font-size   : 1.7rem;
    margin-left : .5em;
    color       : white;
    cursor      : pointer;
}

#main-menu .fa-youtube {
    font-size        : 1.7rem;
    margin-left      : .5em;
    color            : red;
    background-color : white;
}

#main-registry-title {
    margin         : .5rem auto 0;
    font-size      : 2rem;
    letter-spacing : .2em;
    color          : #3758a1;
    text-transform : uppercase;
    text-align     : center;
    padding        : .5rem 2rem;
    font-weight    : bold;
    border-radius  : 0 1rem;
    text-shadow    : 2px 2px 4px #3758a1;
}

#content {
    flex-grow : 1;
    display   : flex;
    flex-flow : column nowrap;
    margin    : 0;
}

.buttons-panel {
    display         : flex;
    flex-flow       : row wrap;
    justify-content : center;
    align-items     : center;
    margin          : .3em 0;
}

.buttons-panel input {
    margin : .5em 0;
}

.buttons-panel.bordered {
    border-top    : 1px solid #3758a1;
    border-bottom : 1px solid #3758a1;
}

#content img {
    max-width : 95%;
}

.flex-separator {
    flex-grow : 1;
}

.hl {
    color       : steelblue !important;
    font-weight : bold !important;
}

.hint {
    font-size : .8rem;
    color     : #225e90;
}

.university-search-advanced {
//    text-transform : uppercase;
}

.fa-file-excel {
    color : green;
}

.clear-button {
    display        : inline-block !important;
    position       : relative;
    border         : none !important;
    background     : none !important;
    width          : 0 !important;
    outline        : none;
    cursor         : pointer;
    vertical-align : middle;
    margin         : 0 !important;
    padding        : 0 !important;
}

.clear-button:after {
    content          : "X";
    display          : inline-block;
    width            : 1em;
    height           : 1em;
    position         : absolute;
    background-color : steelblue;
    z-index          : 1;
    top              : 0rem;
    right            : .5rem;
    bottom           : 0;
    margin           : auto;
    padding          : .1rem .2rem .2rem;
    border-radius    : 50%;
    text-align       : center;
    color            : white;
    font-weight      : bold;
    font-size        : .8em;
    cursor           : pointer;
}

input.input-clear:not(:valid) ~ .clear-button {
    display : none !important;
}

.ui-dialog {
    max-width : 100%;
}

.ui-widget-header {
    background : linear-gradient(to bottom right, steelblue, darkblue, steelblue);
}

.ui-dialog .ui-dialog-titlebar {
}

.ui-dialog .ui-dialog-title {
    color     : white;
    font-size : 1rem;
}

.ui-widget-header.error {
    background : linear-gradient(to bottom right, gold, darkgoldenrod, gold);
}

.ui-dialog .ui-widget-header.error .ui-dialog-title {
    color : #cb2156 !important;
}

.ui-dialog .ui-dialog-titlebar-close {
    width  : 2rem;
    height : 2rem;
    top    : .9rem;
}

.ui-dialog .ui-dialog-buttonpane {
    margin     : 0;
    padding    : .2em 1em;
    text-align : center;
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
    float : none;
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button {
    margin        : .2em 0;
    background    : linear-gradient(to bottom right, steelblue, darkblue, steelblue);
    color         : white;
    border-radius : 0 .5em !important;
    border        : none !important;
    font-size     : 1rem;
    font-weight   : bold;
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset .ui-button:hover {
    background : linear-gradient(to bottom right, gold, darkgoldenrod, gold);
    color      : black;
}

.flex-break {
    flex-basis : 100%;
    width      : 0px;
    height     : 0px;
    overflow   : hidden;
    display    : none;
}

#wrapper .university-search-name {
    text-align : right;
    margin     : .2em 2em .2em 0;
}

#wrapper .university-search-name button.university-search-name-i {
    display    : inline;
    border     : none;
    background : none;
    padding    : 0;
    margin     : 0;
}

#wrapper .university-search-name button.university-search-name-i:hover {
    background : none;
}

#wrapper .university-search-name .university-search-name-i:before {
    font-family    : "Font Awesome 5 Free";
    font-weight    : bold;
    content        : "\f002";
    color          : #f1bd44;
    font-size      : 1.3rem;
    vertical-align : middle;
}

#wrapper #regions-wrapper .university-search-name {
    width      : 32em;
    max-width  : 98%;
    margin     : 0 auto .5em;
    text-align : left;
}

#wrapper .university-search-name input {
    width     : 40em;
    max-width : 90%;
}

#wrapper #regions-wrapper .university-search-name input,
#wrapper #university-search-advanced .university-search-name input {
    width : calc(100% - 5em);
}

div#zso-forms.buttons-panel a.button {
    width: 46%;
    font-size: 0.95rem;
}

.ui-autocomplete.ui-widget-content .ui-state-active {
    font-weight : normal !important;
}

@media only screen and (max-width : 70em) {
    #main-menu .flex-break {
        display : block;
    }

    #main-menu > a {
        margin-bottom : .5em !important;
    }

    #main-registry-title {
        font-size : 1.7rem;
    }
}

@media only screen and (max-width : 50em) {
    #university-search-name {
        text-align : center;
    }
}

@media only screen and (max-width : 40em) {
    #content {
        padding : .5em .5em;
        border  : none;
    }

    #main-menu {
        flex-flow   : column wrap;
        align-items : flex-start;
    }

    #main-menu .flex-break {
        display : none;
    }

    #main-menu > .menu-item > a {
        text-align : left;
    }

    #main-registry-title {
        font-size : 1.5rem;
    }
}