@import url("./standard.css");



/*----------------------------------------------------------------------*/
/******************** [BEGIN] General: UMN Branding ********************/
/***** Changes the branding colors in Jadu to match UMN standard *****/
/************************************************************************/

/* Set the header top border to the UMN maroon color */
header {
    border-top: 10px solid #7a0019;
}

/* Set the alert link color to the UMN maroon color */
a.button.alert__link {
    background-color: #7a0019;
    border-color: #7a0019;
}

/* Changing background color of aside on login page */
aside#flash-message-alert-error-0 {
    border: 1px solid #f0f0f0;
    background-color: #f0f0f0;
}

/* Set the all buttons to the UMN maroon color */
.button,
input[type=submit],
.button--primary,
.button--secondary,
.form--form-builder.form--block .form__control .table-details .button,
.form--form-builder.form--block .form__control .table-details input[type=submit],
.form--form-builder.form--block .form__control .table-details .data-table .button,
.form--form-builder.form--block .form__control .table-details .data-table input[type=submit],
.form--form-builder.form--block .form__control .table-content>.button,
.form--form-builder.form--block .form__control .table-content>input[type=submit],
.form__block .calendar--event-booking .button,
.form__block .calendar--event-booking input[type=submit],
.form--form-builder .alert__link,
.form--form-builder.form--block .form__component--event-booking .button,
.form--form-builder.form--block .form__component--event-booking input[type=submit],
.form__component--file-upload .button,
.form__component--file-upload input[type=submit] {
    background-color: #7a0019;
    border-color: #7a0019;
    /* display: inline-block; */
}

/* Set button hover to the Folwell 'Hover' state light maroon color */
.button:hover,
input[type=submit]:hover,
.button--primary:hover,
.button--secondary:hover,
.form--form-builder.form--block .form__control .table-details .button:hover,
.form--form-builder.form--block .form__control .table-details input[type=submit]:hover,
.form--form-builder.form--block .form__control .table-details .data-table .button:hover,
.form--form-builder.form--block .form__control .table-details .data-table input[type=submit]:hover,
.form--form-builder.form--block .form__control .table-content>.button:hover,
.form--form-builder.form--block .form__control .table-content>input[type=submit]:hover,
.form__block .calendar--event-booking .button:hover,
.form__block .calendar--event-booking input[type=submit]:hover,
.form--form-builder .alert__link:hover,
.form--form-builder.form--block .form__component--event-booking .button:hover,
.form--form-builder.form--block .form__component--event-booking input[type=submit]:hover,
.form__component--file-upload .button:hover,
.form__component--file-upload input[type=submit]:hover {
    background-color: #a10021;
    border-color: #a10021;
}

/* Set button focus and active to the Folwell 'Hover' state light maroon color with outline */
.button:focus,
input[type=submit]:focus,
.button--primary:focus,
.button--secondary:focus,
.form--form-builder.form--block .form__control .table-details .button:focus,
.form--form-builder.form--block .form__control .table-details input[type=submit]:focus,
.form--form-builder.form--block .form__control .table-details .data-table .button:focus,
.form--form-builder.form--block .form__control .table-details .data-table input[type=submit]:focus,
.form--form-builder.form--block .form__control .table-content>.button:focus,
.form--form-builder.form--block .form__control .table-content>input[type=submit]:focus,
.form__block .calendar--event-booking .button:focus,
.form__block .calendar--event-booking input[type=submit]:focus,
.form--form-builder .alert__link:focus,
.form--form-builder.form--block .form__component--event-booking .button:focus,
.form--form-builder.form--block .form__component--event-booking input[type=submit]:focus,
.form__component--file-upload .button:focus,
.form__component--file-upload input[type=submit]:focus,
.button:active,
input[type=submit]:active,
.button--primary:active,
.button--secondary:active,
.form--form-builder.form--block .form__control .table-details .button:active,
.form--form-builder.form--block .form__control .table-details input[type=submit]:active,
.form--form-builder.form--block .form__control .table-details .data-table .button:active,
.form--form-builder.form--block .form__control .table-details .data-table input[type=submit]:active,
.form--form-builder.form--block .form__control .table-content>.button:active,
.form--form-builder.form--block .form__control .table-content>input[type=submit]:active,
.form__block .calendar--event-booking .button:active,
.form__block .calendar--event-booking input[type=submit]:active,
.form--form-builder .alert__link:active,
.form--form-builder.form--block .form__component--event-booking .button:active,
.form--form-builder.form--block .form__component--event-booking input[type=submit]:active,
.form__component--file-upload .button:active,
.form__component--file-upload input[type=submit]:active {
    background-color: #a10021;
    border-color: #a10021;
    outline: 3px solid #a10021;
	outline-offset: 2px;
}

/* Set visited buttons to the Folwell 'Active' state dark maroon color */
.button:visited,
.button--primary:visited,
.button--secondary:visited,
.form--form-builder.form--block .form__control .table-details .button:visited,
.form--form-builder.form--block .form__control .table-details .data-table .button:visited,
.form--form-builder.form--block .form__control .table-content>.button:visited,
.form__block .calendar--event-booking .button:visited,
.form--form-builder .alert__link:visited,
.form--form-builder.form--block .form__component--event-booking .button:visited,
.form__component--file-upload .button:visited {
    background-color: #4d0010;
    border-color: #4d0010;
    /* display: inline-block; */
}

/* Styling for tables to theme them with UMN colors */
.data-table th {
    background-color: #7a0019;
    border: 1px solid #7a0019;
}

.data-table td {
    border: 1px solid #7a0019;
}

/* Styling for checkboxes to theme them with UMN colors */
.form__checkbox:checked,
.form__block .xform_group input:checked[type=checkbox] {
    background-color: #7a0019;
}

.form__block .xform_group input:focus[type=checkbox] {
    outline: 3px solid #7a0019;
}

/* Styling for radio buttons to theme them with UMN colors */
.form__radio:checked,
.form__block .xform_group input:checked[type=radio] {
    background-color: #7a0019;
}

.form__block .xform_group input:focus[type=radio] {
    outline: 3px solid #7a0019;
}

/* Styling for progress bar to theme them with UMN colors */
.progress-bar__indicator,
.progress-bar--success .progress-bar__indicator,
.progress-bar .progress-indicator {
    background: #ffcc33;
}

/* Styling for all html tables in Jadu to theme them with UMN colors */
table th {
    background-color: #7a0019;
}

/* REVIEW - These are additional elements in standard.css with a blue outline focus effect applied, but that have not been explicitly observed live. Weigh whether to include these for sitewide branding consistency vs additional tech debt of maintaining
/* Styling for miscellaneous elements focus effect outline to theme them with UMN colors ***add closing comment tag back here***
input:focus,
select:focus,
textarea:focus,
.form__field:focus,
.form__textarea:focus,
.form__block select:focus,
.form__select:focus,
.form__checkbox:focus,
.form__radio:focus,
.form__block .xfields:focus,
.form__block .field:focus,
.form__block textarea:focus
.perceptive-content-view__table:focus,
.perceptive-content-worklist-view__table:focus,
.onbase-documents-list-output:focus {
    outline: 3px solid #7a0019;
}
*/

/******************** [END] General: UMN Branding ********************/
/*----------------------------------------------------------------------*/




/*----------------------------------------------------------------------*/
/******************** [BEGIN] General: Formatting ********************/
/***** General formatting changes for improved usability *****/
/************************************************************************/
/* Hide the "Register" button on the login page */
aside#flash-message-alert-error-0 a.button.alert__link[href$="register"] {
    display: none;
}

/* Move the lookup button below a dropdown */
.integrated-component input[type=text], .integrated-component select {
    flex: 0 0 100%;
}

/* Add space between a dropdown and the lookup button */
.form--form-builder .integrated-component .button {
    margin-top: 0.3em;
}

/* Hide the breadcrumb navigation from the end user */
.breadcrumb {
    display: none;
}

/* Add padding around items in a list for readability */
.list--form-summary .list__item-title {
    padding-right: 2.5rem;
}

/* Hide the breadcrumb in the navigation */
nav.breadcrumb {
    display: none;
}

/* Adding border around repeatable question */
.table-content {
    height: 100% !important;
    border: 1px solid;
    overflow: hidden;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 1rem;
    padding-bottom: 0.5rem;
}

/* Styling for Integrated Component flex container */
.form--form-builder .integrated-component {
    flex-wrap: wrap;
}

/******************** [END] General: Formatting ********************/
/*----------------------------------------------------------------------*/




/*----------------------------------------------------------------------*/
/******************** [BEGIN] Bug Fix: File Upload ********************/
/***** Changes to the "File Upload" element to make errors more visible *****/
/************************************************************************/

/* Adding color to file upload error icon */
.dz-error-mark path {
    fill: #CC0000;
    stroke: white;
}

/* Adding color to file upload error icon */
.dz-success-mark path {
    fill: #4BB543;
    stroke: white;
}

/* Increase margin to show the icons better */
.xforms_dropzone .dz-preview .dz-error-message {
    margin-top: 3em;
}

/******************** [END] Bug Fix: File Upload ********************/
/*----------------------------------------------------------------------*/




/*----------------------------------------------------------------------*/
/******************** [BEGIN] Custom: Loading Icon ********************/
/***** Creates the loading symbol when a form is submitted *****/
/************************************************************************/

/* Add the white overlay on the screen to prevent clicking anything on the form */
#overlay {
    background: #ffffff;
    color: #666666;
    position: fixed;
    height: 100%;
    width: 100%;
    z-index: 5000;
    top: 0;
    left: 0;
    float: left;
    text-align: center;
    padding-top: 25%;
    opacity: .80;
  }

/* Add spinner styling */
.spinner {
margin: auto;
left: 0;
right: 0;
top: 38%;
bottom: 0;
position: fixed;
text-align: center;
z-index: 50001;
}

/* Add spinner styling */
.spinner > div {
width: 18px;
height: 18px;
background-color: #7a0019;
border-radius: 100%;
display: inline-block;
-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

/* Add spinner animation */
.spinner .bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}

/* Add spinner animation */
.spinner .bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}

/* Add spinner animation */
@-webkit-keyframes sk-bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0) }
40% { -webkit-transform: scale(1.0) }
}

/* Add spinner animation */
@keyframes sk-bouncedelay {
0%, 80%, 100% { 
  -webkit-transform: scale(0);
  transform: scale(0);
} 40% { 
  -webkit-transform: scale(1.0);
  transform: scale(1.0);
}
  }
/******************** [END] Custom: Loading Icon ********************/
/*----------------------------------------------------------------------*/




/*----------------------------------------------------------------------*/
/******************** [BEGIN] Component: Display Field/Text Area ********************/
/***** Custom styling of Display Field and Display Area Elements *****/
/************************************************************************/

/* Add a grey color to display text and display areas using custom CSS class */
.umn-display {
	background-color: #f0f0f0;
}

/******************** [END] Component: Display Field/Text Area ********************/
/*----------------------------------------------------------------------*/




/*----------------------------------------------------------------------*/
/******************** [BEGIN] IC: CXM - Existing Case ********************/
/***** Custom styling for the "CXM - Existing Case" IC *****/
/************************************************************************/

.form__control[data-secondary="cxmCaseAccessCodeVerified_Hidden"] {
    opacity: 0 !important;
}

.umn-alert-box {    
    box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
    margin: 0.5rem;
}

.umn-alert-info {
    color: #a94442;
    font-size: 55px;
    margin: 0;
    padding: 0.5rem;
}

.umn-alert-error {
    color: #a94442;
    font-size: 55px;
    margin: 0;
    padding: 0.5rem;
}

.umn-alert-message {
    padding-top: 0 !important;
}

.umn-flex-container {
    display: inline-flex;
    flex-flow: none;
    vertical-align: middle;
    justify-content: space-around;
    align-items: center;
    list-style: none;
    padding: 0 1rem 0 1rem;;
}

.umn-flex-item {
    padding: 0.35rem;
    text-align: center;
}

/******************** [END] IC: CXM - Existing Case ********************/
/*----------------------------------------------------------------------*/