/* Add styles here that apply to all webapps */

:root {
  --su-black: black;
  --su-blue: #97d5c9;
  --su-dark-orange: #ff6a14;
  --su-dark-pink: #e91a1a;
  --su-gray: #444;
  --su-gray-even: #f6f6f6;
  --su-gray-odd: #e2e2e2;
  --su-grey: #444;
  --su-grey-even: #f6f6f6;
  --su-grey-odd: #e2e2e2;
  --su-green: green;
  --su-light-gray: grey;
  --su-light-grey: grey;
  --su-olive: #869954;
  --su-maroon: #651c32;
  --su-orange: #d45d00;
  --su-pink: #ffeeed;
  --su-red: red;
  --su-white: white;
  --su-yellow: yellow;
}

::placeholder {
  font-style: italic;
}

body {
    padding-bottom: 20px;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* If you use table row and table cell, have the contents take up the entire width */
.d-table-cell-100 {
	width: 100% !important;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Make all form elements have matching style */
div .bootstrap-select {
	background-color: #ffffff;
    background-image: none;
	border: 0.0625rem solid #999999;
    border-radius: 0.429rem;
	color: #333333;
	display: block;
	font-family: "Open Sans", Helvetica, Arial, sans-serif;
	font-size: .875rem;
    font-style: normal;
    font-weight: 400;
	height: auto;
	outline: none;
	padding: 0.6875rem 0.75rem !important;
    text-align: left;
	transition: all 0.1s ease-in-out;
}

/* Add grey cover to readonly and disabled items */
input[disabled],
input[readonly],
select[disabled],
select[readonly],
textarea[disabled],
textarea[readonly] {
    border: 0.0625rem solid #bdbdbd !important;
    background-color: #f7f7f7 !important;
    box-shadow: none;
    cursor: not-allowed;
}

input:not([type="button"], [type="checkbox"], [type="file"], [type="radio"]),
select {
	background-color: #ffffff;
    background-image: none;
	border: 0.0625rem solid #999999;
    border-radius: 0.429rem;
	color: #333333;
	display: block;
	font-family: "Open Sans", Helvetica, Arial, sans-serif;
	font-size: .875rem;
    font-style: normal;
    font-weight: 400;
	height: auto;
	line-height: 2.375rem; 
	outline: none;
	padding: 0.6875rem 0.75rem !important;
    text-align: left;
	transition: all 0.1s ease-in-out;
}

/* Set form elements to consume entire width */
input:not([type="button"], [type="checkbox"], [type="file"], [type="radio"]),
label,
select,
textarea {
	width: 100%;
}

label.no-width {
	width: auto !important;
}

/* Custom admin area */
.su-admin {
	float: right;
	font-weight: bold;
	color: var(--su-maroon) !important;
}

.su-admin a {
	margin-right: 50px;
}

.su-admin a:hover {
	color: var(--su-blue) !important;
}

@media only screen and (max-width: 26.25rem) {
	.su-admin {
		padding-top: 30px;
	}
	
	.su-admin a {
		margin-right: 20px;
	}
}

/* Custom background coloring */
.su-background--blue {
	background-color: var(--su-blue) !important;
	color: var(--su-black) !important;
}

.su-background--green {
	background-color: var(--su-green) !important;
	color: var(--su-white) !important;
}

.su-background--maroon {
	background-color: var(--su-maroon) !important;
	color: var(--su-white) !important;
}

.su-background--olive {
	background-color: var(--su-olive) !important;
	color: var(--su-white) !important;
}

.su-background--orange {
	background-color: var(--su-orange) !important;
	color: var(--su-white) !important;
}

.su-background--red {
	background-color: var(--su-red) !important;
	color: var(--su-white) !important;
}

.su-background-white-maroon {
	background-color: var(--su-white) !important;
	color: var(-su-maroon) !important;
}

.su-background-white-orange {
	background-color: var(--su-white) !important;
	color: var(-su-orange) !important;
}

.su-background-yellow {
	background-color: var(--su-yellow) !important;
	color: var(--su-black) !important;
}

/* Custom buttons */
.su-button {
	display: inline-block;
    max-width: 100%;
    height: 2.75rem;
    padding: 0.5rem 1.5rem 0.5rem 1.5rem;
    transition: all 0.1s ease-in-out;
    transition: all .2s ease-in-out;
    border-radius: 6.25rem;
    font-family: "Nunito", Helvetica, Arial, sans-serif;
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.45;
    text-align: center;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-size-adjust: 0.5;
}

.su-button:hover {
    filter: brightness(125%); 
}

.su-button--blue {
    background-color: var(--su-blue) !important;
    box-shadow: var(--su-blue) 0 0 0 1px inset !important;
    color: var(--su-maroon) !important;
}

.su-button--gray {
    background-color: var(--su-gray) !important;
    box-shadow: var(--su-gray) 0 0 0 1px inset !important;
    color: var(--su-white) !important;
}

.su-button--green {
    background-color: var(--su-green) !important;
    box-shadow: var(--su-green) 0 0 0 1px inset !important;
    color: var(--su-white) !important;
}

.su-button--grey {
    background-color: var(--su-grey) !important;
    box-shadow: var(--su-grey) 0 0 0 1px inset !important;
    color: var(--su-white) !important;
}

.su-button--maroon {
    background-color: var(--su-maroon) !important;
    box-shadow: var(--su-maroon) 0 0 0 1px inset !important;
    color: var(--su-white) !important;
}

.su-button--olive {
    background-color: var(--su-olive) !important;
    box-shadow: var(--su-olive) 0 0 0 1px inset !important;
    color: var(--su-white) !important;
}

.su-button--orange {
    background-color: var(--su-orange) !important;
    box-shadow: var(--su-orange) 0 0 0 1px inset !important;
    color: var(--su-white) !important;
}

.su-button--red {
    background-color: var(--su-red) !important;
    box-shadow: var(--su-red) 0 0 0 1px inset !important;
    color: var(--su-white) !important;
}

.su-button--white-orange {
    background-color: var(--su-white) !important;
    box-shadow: var(--su-orange) 0 0 0 1px inset !important;
    color: var(--su-orange) !important;
}

.su-button--white-maroon {
    background-color: var(--su-white) !important;
    box-shadow: var(--su-maroon) 0 0 0 1px inset !important;
    color: var(--su-maroon) !important;
}

.su-button--yellow {
    background-color: var(--su-yellow) !important;
    box-shadow: var(--su-yellow) 0 0 0 1px inset !important;
    color: var(--su-black) !important;
}

.su-delete {
	font-size: 200%;
	margin-left: 10px;
	text-decoration: none;
}

.su-delete:hover {
	cursor: pointer;
}

/* Custom filter area */
.su-filter {
    background-color: var(--su-maroon);
    border-radius: 5px;
    border: none;
    box-shadow: 5px 5px 5px grey;
    display: table;
    margin: auto;
	margin-bottom: 20px;
    padding: 10px;
    width: 80%;
}

.su-filter a:not(.su-button, [role=option]) {
    color: var(--su-dark-orange) !important;
    text-decoration: underline !important;
}

.su-filter a:not(.su-button, [role=option]):hover {
    color: var(--su-blue) !important;
    cursor: pointer;
}

.su-filter a:not(.su-button, [role=option]) label {
    color: var(--su-dark-orange) !important;
    text-decoration: underline !important;
}

.su-filter a:not(.su-button, [role=option]) label:hover {
    color: var(--su-blue) !important;
    cursor: pointer;
}

.su-filter div[class^='esg-col'] {
	padding-bottom: 10px;
}

.su-filter div[class='esg-card'] {
	background-color: inherit;
	border: 2px solid var(--su-blue);
	border-radius: 5px;
}

.su-filter label {
	color: white !important;
	text-align: center !important;
}

.su-filter label.left {
	text-align: left !important;
}

.su-filter label.right {
	text-align: right !important;
}

/* Custom floating divs */
.su-floating {
    background-color: var(--su-gray);
    border-radius: 10px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
    color: var(--su-white);
    padding: 12px 24px;
    position: fixed;
    white-space: nowrap;
    z-index: 9999;
}

.su-floating-bottom {
    bottom: 20px;
}

.su-floating--bottom {
    bottom: 20px;
}

.su-floating-center {
    left: 50%;
    transform: translateX(-50%); /* Perfectly offsets its own width to center it */
}

.su-floating--center {
    left: 50%;
    transform: translateX(-50%); /* Perfectly offsets its own width to center it */
}

.su-floating-left {
    left: 20px;
}

.su-floating--left {
    left: 20px;
}

.su-floating-middle {
    top: 50%;
    transform: translateY(-50%); /* Perfectly offsets its own height to center it */
}

.su-floating--middle {
    top: 50%;
    transform: translateY(-50%); /* Perfectly offsets its own height to center it */
}

.su-floating-right {
    right: 20px;
}

.su-floating--right {
    right: 20px;
}

.su-floating-top {
    top: 20px;
}

.su-floating--top {
    top: 20px;
}

/* Custom info blocks */
.su-info {
	cursor: help;
	content: url("https://webapps.susqu.edu/Images/icon-info.png");
	margin-left: 5px;
	margin-right: 5px;
}

/* Custom jump-to bottom button */
.su-jump-to a {
	background-color: var(--su-gray);
    border-radius: 10px;
    bottom: 20px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
    color: var(--su-white);
	font-size: 200%;
    padding: 12px 24px;
    position: fixed;
	right: 20px;
	text-decoration: none;
    white-space: nowrap;
    z-index: 9999;
}

@media only screen and (max-width: 26.25rem) {
	.su-jump-to {
		display: none;
	}
}

/* Custom messages */

.su-message {
	margin-bottom: 20px;
}

/* Custom results */
.su-results {
    margin-bottom: 20px;
    padding-left: 10px;
    padding-right: 10px;
}

.su-results .esg-row {
	padding: 10px;
}

.su-results .esg-row:nth-child(even) {
	background: var(--su-gray-even) !important;
}

.su-results .esg-row:nth-child(odd) {
    background: var(--su-gray-odd) !important;
}

.su-results-header {
    border-bottom: 2px solid grey;
    border-radius: 5px;
    color: white;
	font-weight: bold;
	padding: 10px;
}

.su-results-header--blue {
    background: var(--su-blue) !important;
}

.su-results-header--maroon {
    background: var(--su-maroon) !important;
}

.su-results-header--olive {
    background: var(--su-olive) !important;
}

.su-results-header--orange {
    background: var(--su-orange) !important;
}

/* Custom texrt coloring */
.su-text--black {
	color: var(--su-black) !important;
}

.su-text--black-bold {
	color: var(--su-black) !important;
	font-weight: bold !important;
}

.su-text--blue {
	color: var(--su-blue) !important;
}

.su-text--blue-bold {
	color: var(--su-blue) !important;
	font-weight: bold !important;
}

.su-text--green {
	color: var(--su-green) !important;
}

.su-text--green-bold {
	color: var(--su-green) !important;
	font-weight: bold !important;
}

.su-text--maroon {
	color: var(--su-maroon) !important;
}

.su-text--maroon-bold {
	color: var(--su-maroon) !important;
	font-weight: bold !important;
}

.su-text--olive {
	color: var(--su-olive) !important;
}

.su-text--olive-bold {
	color: var(--su-olive) !important;
	font-weight: bold !important;
}

.su-text--orange {
	color: var(--su-orange) !important;
}

.su-text--orange-bold {
	color: var(--su-orange) !important;
	font-weight: bold !important;
}

.su-text--red {
	color: var(--su-red) !important;
}

.su-text--red-bold {
	color: var(--su-red) !important;
	font-weight: bold !important;
}

.su-text--yellow {
	color: var(--su-yellow) !important
}

.su-text--yellow-bold {
	color: var(--su-yellow) !important
	font-weight: bold !important;
}

/* Used for jQuery validation messages */
.su-validation {
	background: var(--su-pink);
	border: 1px solid var(--su-dark-pink);
    border-radius: 5px;
	color: var(--su-dark-pink);
	display: none; /* This will be overridden at runtime during error display */
    font-weight: bold;
    margin-bottom: 20px;
	padding-left: 10px;
	width: 100%;
}