﻿@charset "utf-8";
/* CSS Document */

/* -+-+-+-+-+-+-+-+-   Forms   -+-+-+-+-+-+-+-+-
Add class ssoeForm to a <form> wrapper around form elements
*/

form.ssoeForm {
	font-family: proxima-nova, sans-serif;
padding-bottom:30px;
}

form.ssoeForm .formItem {
padding-top:15px;
padding-bottom:15px;
}

/*add to labels over inputs that do not register clicks*/
.noPointEvent {
pointer-events: none;
}


/*  -+-+-+-+-+-+-+-+-  form input  -+-+-+-+-+-+-+-+- */


form.ssoeForm input {
font-weight:400;
	color: var(--copy);
	font-size:2.4rem;
	border:none;
	border-bottom: 2px solid;
	border-color: var(--university-gold);
	padding:10px 35px 15px;
    background-color:transparent;
}

    form.ssoeForm input:focus {
        background-color: transparent;
    }

    /*  -+-+-+-+-+-+-+-+-  form label  -+-+-+-+-+-+-+-+- */
    form.ssoeForm label {
font-weight:400;
color: var(--charcoal);
text-transform:uppercase; 
padding-left:35px;
	position:relative;
	top:40px;
	font-size:2.4rem;
}

form.ssoeForm label.activeLabel {
	top:-5px;
	color: var(--royal-blue);
	font-weight:700;
	font-size:1.8rem;
	padding-bottom:3px;
}

/*  -+-+-+-+-+-+-+-+-  form drop down -+-+-+-+-+-+-+-+-  */

form.ssoeForm {}

form.ssoeForm .ddLabel {
	/*position:relative;
	z-index:1;*/
	pointer-events:none;
}

/* Normaly the <select> object>*/
form.ssoeForm .ddButton {
	margin: 0px; 
	width:100%;
    font-weight:400;
	color: var(--copy);
	font-size:2.4rem;
	border:none;
	border-bottom: 2px solid;
	border-color: var(--university-gold);
	padding:0px 35px 8px;
	/*position:relative;
	z-index:10;*/
	background:transparent;
}



/* hide select arrow*/
form.ssoeForm select {
    -moz-appearance: window;
    -webkit-appearance: none;

}
@-moz-document url-prefix() {
form.ssoeForm .ddButton {

  }
}

form.ssoeForm .ddArrow {
	background-image:url("../gfx/icons/dd-arrow-blue.png");
	background-repeat:no-repeat;
	background-position: 99% 30%;
	cursor:pointer;
}

form.ssoeForm .ddArrow:hover {
	background-image:url("../gfx/icons/dd-arrow-gold.png");
}

/*also removes background arrow, probably a better way to do this with JS */
 form.ssoeForm .addShadow {
-webkit-box-shadow: 10px 10px 10px -11px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 10px -11px rgba(0,0,0,0.75);
box-shadow: 10px 10px 10px -11px rgba(0,0,0,0.75);
	 background-image:none !important;
}

form.ssoeForm .ddButton:hover {}

form.ssoeForm .ddButton option { 
	padding:10px 60px 10px;
    cursor:pointer;
	margin-left:-35px;
}

option:focus,
option:active,
option:checked {
background: linear-gradient(#3d3d3d, #3d3d3d);
}

form.ssoeForm .ddButton option:hover { 
	background-color:var(--fixed-university-gold);
}


/*  -+-+-+-+-+-+-+-+-  form drop down PUSH FIX -+-+-+-+-+-+-+-+-  */




form.ssoeForm .ddFormItem {
	position:relative;
	padding-bottom:60px;
}

form.ssoeForm select {
	position:absolute;
}

form.ssoeForm .ddButton:hover {
}

form.ssoeForm .addShadow {
	z-index:999;
	background-color:white;
}

/*  -+-+-+-+-+-+-+-+-  text area -+-+-+-+-+-+-+-+- */

form.ssoeForm textarea {
	border:none;
	border-bottom: 2px solid;
	border-color: var(--university-gold);
	margin: 0px; 
	width:100%;
    font-weight:400;
	color: var(--copy);
	font-size:1.8rem;
	background:transparent;
	padding:0px 20px 0px 35px;
	height:45.5px;
	min-height:45.5px;
	background-image:url("../gfx/icons/text-area.svg");
	background-repeat:no-repeat;
	background-position: 99.6% 97%;
  background-size: 12px;
}


form.ssoeForm .txtLabel {
pointer-events: none;}

/*  -+-+-+-+-+-+-+-+-  check box  -+-+-+-+-+-+-+-+- */
form.ssoeForm .chkLabel {
	display:block;
	padding-left:0px;
	padding-bottom:55px;
	
}

form.ssoeForm .chkBoxLabel {
	top:0px;
}

form.ssoeForm .chkTxt {
text-transform:none;
	position:relative;
	top:-4px;
}


form.ssoeForm input[type=checkbox] {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

form.ssoeForm input[type=checkbox] ~ label::before {
	pointer-events:auto;
	cursor:pointer;
content: '\2B24';
display: inline-flex;
text-align: center;
color: transparent;
line-height: 0.75;
width: 40px;
height: 40px;
border: 8px solid;
border-color: var(--university-gold);
border-radius: 50%;
margin: 10px 25px 10px 0px;
blackground-color: red;
font-size: 35px;
justify-content: center;
	text-indent:-0.5px;
}


form.ssoeForm input[type=checkbox]:checked ~ label::before {
  color: var(--university-gold);
	border-color:var(--royal-blue);
}

form.ssoeForm input[type=checkbox] ~ label:hover::before {
border-color: var(--royal-blue)!important;	
}

form.ssoeForm input[type=checkbox]:checked ~ label:hover::before {
	color:var(--royal-blue);
	border-color: var(--university-gold) !important;
}

/*  -+-+-+-+-+-+-+-+-  slide -+-+-+-+-+-+-+-+- */

form.ssoeForm .slideLabel
{
display: block;
padding-left: 0px;
padding-bottom: 20px;
position:static;}

form.ssoeForm .slideBox {
width:100px; 
height:44px; 
background-color:var(--fixed-charcoal); 
border-radius: 22px;
margin: 0px 0px 15px 0px;;
display:flex;
align-items: center;
	padding:0px 2px;
	justify-content:flex-start;
}

/*   off state   */
form.ssoeForm .slideBox.slideOff {
	justify-content:flex-start;
}

/*   on state   */
form.ssoeForm .slideBox.slideOn {
	justify-content:flex-end !important;
	background-color:var(--success-green);
}

form.ssoeForm .slideBox .radioSlide {
	height:40px;
	width:40px;
	border-radius:50%;
	border-color:var(--university-gold);
	border-width:8px;
	border-style:solid;
	background-color:white;
	cursor:pointer;
}

form.ssoeForm .slideBox .radioSlide:hover {
	border-color:var(--royal-blue);
}

    form.ssoeForm .slideBox input[type=radio], form.ssoeForm input[type=radio] {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

form.ssoeForm .matchCheckbox {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    border-color: var(--university-gold);
    border-width: 8px;
    border-style: solid;
    background-color: white;
    cursor: pointer;
}

form.ssoeForm input[type=radio] ~ label::before {
    pointer-events: auto;
    cursor: pointer;
    content: '\2B24';
    display: inline-flex;
    text-align: center;
    color: transparent;
    line-height: 0.75;
    width: 40px;
    height: 40px;
    border: 8px solid;
    border-color: var(--university-gold);
    border-radius: 50%;
    margin: 10px 25px 10px 0px;
    blackground-color: red;
    font-size: 35px;
    justify-content: center;
    /*text-indent: -0.5px;*/
}

form.ssoeForm input[type=radio]:checked ~ label::before {
    color: var(--university-gold);
    border-color: var(--royal-blue);
}

form.ssoeForm input[type=radio] ~ label:hover::before {
    border-color: var(--royal-blue) !important;
}

form.ssoeForm input[type=radio]:checked ~ label:hover::before {
    color: var(--royal-blue);
    border-color: var(--university-gold) !important;
}

 


/*  -+-+-+-+-+-+-+-+-  file upload -+-+-+-+-+-+-+-+- */
form.ssoeForm .custom-file {
    height: auto;
}

form.ssoeForm .custom-file .custom-file-input {
	height:1px;
		padding:0px;
}

form.ssoeForm .custom-file .fileUpload {
	width:100%;
	border-color:var(--university-gold);
	border-width:2px;
	border-style:solid;	
	border-top:0px;
	border-left:0px;
	border-right:0px;
	top:2px;	
}



form.ssoeForm .custom-file .fileUpload::after {
	font-weight: 700;
    font-size: 1.9rem;
    padding: 0.6rem 3.0rem;
	background-color: #ffffff;
font-family: proxima-nova, sans-serif;
color: var(--royal-blue);
border: 4px solid;
border-color: var(--royal-blue);
text-transform: uppercase;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
cursor:pointer;	
	height:auto;
	bottom:10px;
	right:5px;
	top:auto;
}

form.ssoeForm .custom-file .fileUpload:hover::after {
	border-color: var(--royal-blue);
color: var(--royal-blue);
background-color: var(--BG-university-gold);
-webkit-animation: pulse 1s;
animation: pulse 1s;
}



/*  -+-+-+-+-+-+-+-+-  submit -+-+-+-+-+-+-+-+- */

form.ssoeForm input[type="submit"] {
    font-weight: 700;
    font-size: 1.9rem;
    padding: 0.6rem 5.0rem;
    background-color: var(--royal-blue);
    font-family: proxima-nova, sans-serif;
    color: white;
    border: 4px solid;
    border-color: var(--university-gold);
    text-transform: uppercase;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    cursor: pointer;
}

    form.ssoeForm input[type="submit"]:hover {
        background-color: white;
        color: var(--royal-blue);
        border-color: var(--royal-blue);
        -webkit-animation: pulse 1s;
        animation: pulse 1s;
    }

    /*overwrite for epiform css*/
form.ssoeForm button[type="submit"] {
    font-weight: 700 !important;
    font-size: 1.9rem !important;
    padding: 0.6rem 5.0rem !important;
    background-color: var(--royal-blue) !important;
    font-family: proxima-nova, sans-serif !important;
    color: white !important;
    border: 4px solid !important;
    border-color: var(--university-gold) !important;
    text-transform: uppercase !important;
    -moz-border-radius: 50px !important;
    -webkit-border-radius: 50px !important;
    border-radius: 50px !important;
    cursor: pointer !important;
    height: auto !important;
    width: auto !important;
    max-width: none !important;
    background-image: none !important;
    margin-top: 50px;
}

    form.ssoeForm button[type="submit"]:hover {
        background-color: white !important;
        color: var(--royal-blue) !important;
        border-color: var(--royal-blue) !important;
        -webkit-animation: pulse 1s !important;
        animation: pulse 1s !important;
    }

/*  -+-+-+-+-+-+-+-+-  faculty search -+-+-+-+-+-+-+-+- */

form.facultySearch #facSearchBox, form.facultySearch .searchForFaculty {
    font-size: 2.1rem;
    text-align: left;
    padding: 25px 35px;
    border-radius: 30px !important;
    border: 5px solid;
    border-top-color: currentcolor;
    border-right-color: currentcolor;
    border-bottom-color: currentcolor;
    border-left-color: currentcolor;
    color: var(--dark-blue);
    border-color: var(--university-gold);
    margin: 40px 0px 75px;
}


/*  -+-+-+-+-+-+-+-+-  Form validation -+-+-+-+-+-+-+-+- */
.EPiServerForms .Form__Element .Form__Element__ValidationError {
    background-color: #FCECEC;
    color: #9B1C1C;
    padding: 7px 15px;
    border-radius: 7px;
   /* border: 1px solid #DBDBDB; */
    font-size:1.6rem;
}

.ddFormItem .Form__Element__ValidationError {
    position: relative;
    top: 50px;
}

.FormRecaptcha .g-recaptcha > div:first-child {
    margin: 0 auto;
}

.FormRecaptcha .captchaValidate {
    text-align: center;
    display: block;
    width: 304px;
    margin: 2px auto;
}

/*  -+-+-+-+-+-+-+-+-  Episerver Form feedback post submit -+-+-+-+-+-+-+-+- */
.Form__Status .Form__Status__Message {
    background-color: #ffffff !important;
    font-size: 2.8rem !important;
    color: var(--royal-blue) !important;
    padding: 1.4rem 7rem !important;
    border: 6px solid !important;
    border-top-color: currentcolor !important;
    border-right-color: currentcolor !important;
    border-bottom-color: currentcolor !important;
    border-left-color: currentcolor !important;
    border-color: var(--royal-blue) !important;
    margin: 4.5rem 0rem !important;
    text-transform: uppercase !important;
    -moz-border-radius: 50px !important;
    -webkit-border-radius: 50px !important;
    border-radius: 50px !important;
    text-align: center !important;
}

    .Form__Status .Form__Status__Message p, .Form__Status .Form__Status__Message {
        background-color: #ffffff !important;
        font-family: proxima-nova, sans-serif !important;
        font-weight: 700 !important;
        font-size: 2.8rem !important;
        color: var(--royal-blue) !important;
        text-align: center !important;
    }

.EPiServerForms .hide {
    display: none !important;
}


/* -+-+-+-+-+-+-+-+-   department color switch for border color   -+-+-+-+-+-+-+-+-*/
/* Add these tags to <body> to swap/wrap for Departments 

- .dept-bio
- .dept-chem
- .dept-civ
- .dept-ec
- .dept-ind
- .dept-mem

*/
.dept-bio form.ssoeForm input, .dept-bio form.ssoeForm .ddButton, .dept-bio form.ssoeForm textarea, .dept-bio form.ssoeForm .custom-file .fileUpload {
    border-color: var(--dept-bio) !important;
}

.dept-chem form.ssoeForm input,.dept-chem form.ssoeForm .ddButton, .dept-chem form.ssoeForm textarea, .dept-chem form.ssoeForm .custom-file .fileUpload  {
    border-color: var(--dept-chem) !important;
}

.dept-civ form.ssoeForm input, .dept-civ form.ssoeForm .ddButton, .dept-civ form.ssoeForm textarea, .dept-civ form.ssoeForm .custom-file .fileUpload  {
    border-color: var(--dept-civ) !important;
}

.dept-ec form.ssoeForm input, .dept-ec form.ssoeForm .ddButton, .dept-ec form.ssoeForm textarea, .dept-ec form.ssoeForm .custom-file .fileUpload  {
    border-color: var(--dept-ec) !important;
}

.dept-ind form.ssoeForm input, .dept-ind form.ssoeForm .ddButton, .dept-ind form.ssoeForm textarea, .dept-ind form.ssoeForm .custom-file .fileUpload  {
    border-color: var(--dept-ind) !important;
}

.dept-mem form.ssoeForm input, .dept-mem form.ssoeForm .ddButton, .dept-mem form.ssoeForm textarea, .dept-mem form.ssoeForm .custom-file .fileUpload  {
    border-color: var(--dept-mem) !important;
}



