/*********************************************************************/
/***** BEGIN DESIGNPLUS THEME IMPORT & CUSTOMIZATION  ****************/
/*********************************************************************/
/* Import statements need to be at the top of your CSS file */

/*** Legacy Sidebar ***/
/* For Main CSS file */
@import url(https://designtools.ciditools.com/css/themes.css);
/* For Mobile app CSS file */
/*@import url(https://designtools.ciditools.com/css/app.css);*/
/* Institution color customizations */
@import url(https://designtools.ciditools.com/css/inst_theme_overrides.css);

/*** New Sidebar ***/
/* For Main CSS files */
@import url(https://designplus.ciditools.com/css/content.css);
@import url(https://designplus.ciditools.com/css/editor.css);
/* For Mobile app CSS file */
/*@import url(https://designplus.ciditools.com/css/mobile.css);*/

:root {
  --dt-color-primary: #FFCC00;
  --dt-color-primary-contrast: #000000;
  --dt-color-primary-dark-text: #736000;
  --dt-color-secondary: #57150B;
  --dt-color-secondary-contrast: #FFFFFF;
  --dt-color-secondary-dark-text: #57150B;
  --dt-color-accent: #FFEEBD;
  --dt-color-accent-contrast: #000000;
  --dt-color-accent-dark-text: #706953;
  --dt-color-gray: #CCCCCC;
  --dt-color-gray-contrast: #000000;
  --dt-color-gray-dark-text: #636363;
  --dt-color-white: #FFFFFF;
  --dt-color-white-contrast: #000000;
  --dt-color-white-dark-text: #707070;
  --dt-color-graybg: #E6E6E6;
  --dt-color-graybg-contrast: #000000;
}

/*********************************************************************/
/***** END DESIGNPLUS THEME IMPORT & CUSTOMIZATION   *****************/
/*********************************************************************/
.ro__modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  z-index: 999999;
}

.ro__modal.fade-in,
.ro__modal.fade-out {
  display: block;
  opacity: 0;
  transition: opacity 0.5s;
}

.ro__modal.is-open {
  display: block;
  opacity: 1;
}

.ro__modal__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.25);
}

.ro__modal__wrap {
  position: absolute;
  top: 50%;
  margin: auto;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 480px;
}

.ro__modal__header {
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
  background-color: #d2413d;
  background-image: linear-gradient(to bottom, #ee5f5b, #a4100c);
  background-repeat: repeat-x;
  border: 1px solid;
  border-color: #a4100c;
  /*border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);*/
  box-shadow: none;
  padding: 8px;
}

.ro__modal__header>i:first-child {
  margin-right: 8px;
}

.ro__modal__header button {
  float: right;
  color: #fff;
}

.ro__modal__header button:hover {
  color: #e5e5e5;
}

.ro__modal__content {
  background: #fff;
  padding: 1em;
  border: 1px solid #66767F;
  border-top-width: 0;

}

.ro__modal__content .ro__modal__message {
  display: block;
  margin-bottom: 24px;
}

.ro__modal__content .ro__modal__buttons {
  display: flex;
  gap: 16px;
}

.ro__modal__content .ro__modal__buttons>button {
  flex: 1 0 auto;
}