@charset "UTF-8";
/* RRSS Custom CSS */

/* Global Campus Design Styles */
:root {
      --uc-dark-blue: #182B49;
      --uc-mid-blue: #00629B;
      --uc-light-blue: #00C6D7;
      --uc-yellow: #FFCD00;
      --uc-pink: #D462AD;
      --uc-light-beige: #F5F0E6;
      --uc-cool-gray: #747678;
      --uc-stone: #B6B1A9;
      --white: #ffffff;
}

/*****************************
  HEADER RIBBON
 *****************************/

#header-logo-ribbon {background: #ffffff; /*border: 1px solid red;*/ padding: 0.5em 2em; margin: 0px;}
#header-logo-ribbon .container {padding: 0px; margin: 0px auto; max-width: 1200px; width: 100%;}
#header-logo-ribbon .row {/*border: 1px solid green;*/ padding: 0px; margin: 0px; display: flex;}

.header-site-title {padding: 0em; display: flex; align-items: center;}
.header-site-title a {color: #000; font-size: 1.35rem; letter-spacing: 1px; text-decoration: none; text-transform: uppercase;}
.header-site-title a:hover, .header-site-title a:active, .header-site-title a:focus {color: #006A96; text-decoration: underline;}
.header-logo-image {padding: 0em; text-align: right;}
.header-logo-image a {width: 100%;}
.header-logo-image img { margin: 0px auto;}
/*.header-site-title, .header-logo-image {border: 1px solid black;}*/

@media only screen and (max-width: 479px) {
    .header-logo-image {display: none;}
}

@media (max-width: 768px) {
    #header-logo-ribbon .row {
        flex-direction: column-reverse;
    }
    #header-logo-ribbon .row > div {width: 100%;}
    .header-site-title a {padding: 0.5em 0em;}
    .header-logo-image {text-align: left;}
}

#banner img {margin: 0px auto;}

/*************
    BUTTONS   
 *************/
button, a.button, input[type="button"] {margin: 0.5em; background-color: var(--uc-dark-blue); border: 1px solid var(--uc-dark-blue); color: var(--white); padding: 0.8em 1.2em; text-align: center; text-decoration: none; display: inline-block; font-size: 1em; font-weight: bold;}
a.button:link, a.button:visited {color: var(--white);}
a.button:visited {text-decoration: none;}
button:hover, button:active, button:focus, a.button:hover, a.button:active, a.button:focus, input[type="button"]:hover, input[type="button"]:active, input[type="button"]:focus {color: var(--black); background-color: var(--light-light-grey);}
.button-rounded {border-radius: 0.5em;}

/* Additional Sizes */
.button-small, .button.button-small {padding: 0.5em 1em; font-size: 0.8em;}
.button-large, .button.button-large {padding: 1em 2em; font-size: 1.2em;}

/* Alternate Styles */
button.button-alternate, a.button-alternate, input[type="button"].button-alternate {background-color: var(--light-light-grey); color: var(--uc-dark-blue);}
a.button-alternate:link, a.button-alternate:visited {color: var(--uc-dark-blue);}
button.button-alternate:hover, button.button-alternate:active, button.button-alternate:focus, a.button-alternate:hover, a.button-alternate:active, a.button-alternate:focus, input[type="button"].button-alternate:hover, input[type="button"].button-alternate:active, input[type="button"].button-alternate:focus {color: var(--white); background-color: var(--uc-dark-blue);}

/* Responsive Column Breakpoint: 960px */
@media (max-width: 960px) {
    button, a.button, input[type="button"] {padding: 0.8em 1em;}
    .button-large, .button.button-large {padding: 1em 1.6em;}
}
/* Responsive Column Breakpoint: 600px */
@media (max-width: 600px) {
    button, a.button, input[type="button"] {padding: 0.5em 0.8em;}
    .button-large, .button.button-large {padding: 0.8em 1.2em; font-size: 1.1em;}
}

/**************************
   Forms
 **************************/
.base-form section {
    width: 100%;
    max-width: 1200px;
    margin: 2rem auto;
    padding: 2rem;
    background: var(--uc-light-beige);
    border: 1px solid var(--uc-stone);
}

.base-form section h2 {color: var(--uc-mid-blue);}

/* Each row */
.form-entry {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 1em;
}
.form-entry > div {padding: 0.8em 0%;}

/* Label column */
.form-label {
    flex: 1 1 130px;
    margin-bottom: 0.5em;
    text-align: right;
}


@media (max-width: 1024px) {
    .form-label {
      text-align: left;
    }
}

.form-label label {
    font-size: 1.2em;
    font-weight: 600;
    color: var(--uc-dark-blue);
    padding: 0.5em;
}

@media (max-width: 960px) {
    .form-label {margin-bottom: 0em;}
    .form-label label {padding: 0.2em; margin-bottom: 0em;}
}

/* Input column */
.form-input {
  flex: 2 1 320px;
}

/* Inputs, select, textarea */
.base-form input[type="text"],
.base-form select,
.base-form textarea {
    width: 100%;
    padding: 0.5em 1em;
    border: 1px solid var(--uc-stone);
    border-radius: 4px;
    font-size: 1.2em;
    background: var(--white);
    transition: border-color 0.2s, box-shadow 0.2s;
}

/* Short input tweak */
.shortinput {
    max-width: 120px;
}

/* Focus states */
.base-form input:focus,
.base-form select:focus,
.base-form textarea:focus {
    outline: none;
    border-color: var(--uc-mid-blue);
    box-shadow: 0 0 0 2px rgba(0, 98, 155, 0.2);
}

/* Radio & checkbox groups */
.radio-horizontal,
.checkbox-horizontal {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-content: flex-start;
    padding-top: 1.2em !important;
}

.radio-horizontal label,
.checkbox-horizontal label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1em;
    color: var(--uc-dark-blue);

    font-size: 1.2em;
    font-weight: 200;
}

/* Inputs for radio/checkbox */
.base-form input[type="radio"],
.base-form input[type="checkbox"] {
    accent-color: var(--uc-mid-blue);
    cursor: pointer;
    margin-top: 0em;
}

/* Button */
.base-form button {
    background: var(--uc-mid-blue);
    color: var(--white);
    border: none;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    margin-left: auto;
}

/* Button hover/focus */
.base-form button:hover,
.base-form button:focus {
    background: var(--uc-dark-blue);
}

/* Button active */
.base-form button:active {
    transform: translateY(1px);
}