/* add custom site CSS here */

figure .figcaption, figure .figcaption p, figure figcaption, figure figcaption p {
    margin-top: 0.1rem;
}

img {
  height: auto;
  max-width: 100%;
  vertical-align: middle;
}

.img-responsive {
  height: auto;
  max-width: 100%;
  display: block;
}

.center {
    margin-right: auto;
    margin-left: auto;
}

.center-block {
    display: block;
    margin-right: auto;
    margin-left: auto;
}

.height-100-percent {
    height: 100% !important;
}

.flex-direction-column {
	-ms-flex-direction: column;
	flex-direction: column !important;
}

.flex-display {
	display: -ms-flexbox;
	display: flex;
}



/* ------------------------------------------------------------------ */
/* External URL icon
/* ------------------------------------------------------------------ */
.show-external-link-image {
    background: url("../../images/general/external-link-image.png") center right no-repeat;
    padding-right: 17px;
}
/* ------------------------------------------------------------------ */
/* External URL icon
/* ------------------------------------------------------------------ */



/* ------------------------------------------------------------------ */
/* Style the autocomplete search suggestions popup
/* ------------------------------------------------------------------ */
.HTML_ELEMENT_NAMES_GENERAL_SEARCH_SUGGESTIONS_DIV {
    margin: 0px;
    position: relative;
    z-index: 2;
}

.HTML_ELEMENT_NAMES_GENERAL_SEARCH_SUGGESTIONS_DIV .HTML_ELEMENT_NAMES_GENERAL_LIST {
	float:left;
	list-style:none;
	
	/* margin-top:-3px; */
	margin-top:-1.1rem;
	
	padding:0;
	position: absolute;
	width:	100%;
	font-size: .95rem;
	margin-left: 0px;
	margin-bottom: 0px;
}
.HTML_ELEMENT_NAMES_GENERAL_SEARCH_SUGGESTIONS_DIV .HTML_ELEMENT_NAMES_GENERAL_LIST li{padding: 3px; background: #f0f0f0; border-bottom: #bbb9b9 1px solid;}
.HTML_ELEMENT_NAMES_GENERAL_SEARCH_SUGGESTIONS_DIV .HTML_ELEMENT_NAMES_GENERAL_LIST li:hover{background:#900; color: white; cursor: pointer;}
/* ------------------------------------------------------------------ */
/* Style the autocomplete search suggestions popup
/* ------------------------------------------------------------------ */



/* =========================================================== */
/* Card */
/* =========================================================== */
.flex-card {
	position: relative;
	
	min-width: 0;
	
	background-color: #fff;
	background-clip: border-box;
	
	border: 1px solid rgba(128, 0, 42,.225);
	border-radius: .25rem;
	overflow: hidden;             /* Fixes the corners */
	
	margin: 0.0rem;                  /* Add space between cards */
	
	  &:hover {
		.flex-card-body-image {
			filter: contrast(100%);
		}
	  }
	
}

.flex-card-header:first-child {
    border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0;
}

.flex-card-header {
	padding: .75rem 1.25rem;
	margin-bottom: 0;
	background-color: rgba(128, 0, 42,.06);
	border-bottom: 1px solid rgba(128, 0, 42,.225);
}

.flex-card-body {
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;

	padding: 1.25rem;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}

.flex-card-body-title {

}

.flex-card-body-image {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
  filter: contrast(70%);
  overflow: hidden;
  position: relative;
}

.flex-card-body-text:last-child {
	margin-bottom: 0;
}

.flex-card-body-text {

}

.flex-card-body-button { 
  background-color: white;
  border: 1px solid @gray-light;
  //border-radius: 1rem;
  color: @gray-dark;
  padding: 0.5rem;
  text-transform: lowercase;
}

.flex-card-body-button-block {
  display: block;
  width: 100%;
}

.flex-card-footer {
	padding: .75rem 1.25rem;
}

.flex-card-link {

}
/* =========================================================== */
/* Card */
/* =========================================================== */


/* =========================================================== */
/* ACCORDION */
/* =========================================================== */
 .flex-accordion-card {
	 position: relative;
	 
	 min-width: 0;
	 word-wrap: break-word;
	 background-clip: border-box;
	 border: 1px solid rgba(0,0,0,.125);
	 border-radius: .25rem;
	 overflow: hidden;
}
 .flex-accordion-card-link {
	 cursor: pointer;
	 text-decoration: none;
}
 .flex-accordion-card-link:focus {
	 outline: #006298 dashed .075rem;
	 outline-offset: .125rem;
}
 .flex-accordion-card-header {
	 padding: .75rem 1.25rem;
	 margin-bottom: 0;
	 background-color: rgba(0,0,0,.03);
	 border-bottom: 1px solid rgba(0,0,0,.125);
	 border-radius: .25rem;
	 overflow: hidden;
}
 .flex-accordion-mb-0 {
	 margin-bottom: 0 !important;
}
 .flex-accordion-mb-0 > a {
	 display: block;
	 position: relative;
	 text-decoration: none;
}
 .flex-accordion-card-body {
	 -ms-flex: 1 1 auto;
	 flex: 1 1 auto;
	 padding: 0 18px;
	 background-color: white;
	 
	 overflow: hidden;
	 
	 /*
	 max-height: 0;
	 transition: max-height 0.2s ease-out;
	 */
	 
	 display: none;
}
/* .flex-accordion .active {
	 background-color: #a6a6a6;
}
 */
 .flex-accordion-mb-0 > a:after {
	 content: '\002B';
	 color: #777;
	 font-weight: bold;
	 float: right;
	 margin-left: 5px;
}
 .flex-accordion-mb-0 > a[aria-expanded='true']:after {
	 content: "\2212";
}
/* .flex-accordion-card-header:hover {
	 background: #cc0000;
}
 */
/* ------------------------------ */
/* Change row colors in accordion */
/* ------------------------------ */
 .flex-accordion-card:nth-of-type(even) > .flex-accordion-card-header {
	 background-color: #eaeae1;
}
/* ------------------------------ */
/* Change row colors in accordion */
/* ------------------------------ */
/* =========================================================== */
/* ACCORDION */
/* =========================================================== */
 .red-text {
	 color: #7d110c;
}
 .text li {
	 margin-bottom: 0px;
}
 .small {
	 font-size: 80%;
	 font-weight: 400;
}
 .flex-row {
	 flex-wrap: wrap;
	 margin-left: -1vh;
	 margin-top: -1vh;
}
 .flex-col {
	-ms-flex: 1 0 200px;
	 /* flex: 1 0 200px;  */
	 flex: 1 0 200px;
	 margin: 1vh;
}
/* -------------------------------------- */
/* Loading gif */
/* -------------------------------------- */
 .loading {
	/*display: block;
	 */
	 display: table;
	 margin: 0 auto;
	 visibility: visible;
	 padding-top: 3.1vh;
	 padding-bottom: 3.1vh;
	 text-align:center;
	 vertical-align:middle;
	 height: 230px;
	 width: 180px;
	/* top: 50%;
	 */
	/* left: 50%;
	 */
	 position: relative;
	/* z-index: 1000;
	 */
	/* background: #FFF 50% 75% no-repeat;
	 */
	 background: #FFF no-repeat;
	 background-image: url("../../images/general/ajax-loader.gif");
	 background-repeat: no-repeat;
	/* background-attachment: fixed;
	 */
	 background-position: center;
}
/* -------------------------------------- */
/* Media queries */
/* -------------------------------------- */
@media (max-width: 400px) {
	 .flex-row {
		 display: block;
	}
}

/* ------------------------------------------------------------------ */
/* Permissions Admin UI */
/* ------------------------------------------------------------------ */
.permissions-admin {
    margin-bottom: 2rem;
}

.permissions-header h2 {
    margin-bottom: 0.25rem;
}

.permissions-muted {
    color: #4a4a4a;
    font-size: 0.95rem;
}

.permissions-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 1.5rem 0;
}

.permissions-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.9rem;
    border-radius: 0.25rem;
    border: 1px solid rgba(128, 0, 42, 0.35);
    text-decoration: none;
    font-weight: 600;
    background: #fff;
    transition: all 0.2s ease;
    font-size: 17px;
}

.permissions-tab:hover,
.permissions-tab:focus {
    background: rgba(128, 0, 42, 0.08);
    border-color: rgba(128, 0, 42, 0.55);
}

.permissions-tab.is-active {
    background: #7d110c;
    color: #fff;
    text-decoration: none;
    border-color: #7d110c;
}

.permissions-cards {
    margin-bottom: 1rem;
}

.permissions-kpi {
    font-size: 2rem;
    font-weight: 700;
    color: #7d110c;
}

.permissions-meta {
    margin-top: 0.35rem;
    color: #5a5a5a;
    font-size: 0.9rem;
}

.permissions-card-action {
    margin-top: 1rem;
}

.permissions-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-end;
    margin-bottom: 1.25rem;
    padding: 0.75rem;
    border: 1px solid rgba(128, 0, 42, 0.15);
    border-radius: 0.5rem;
    background: rgba(128, 0, 42, 0.03);
}

.permissions-toolbar .form-group {
    margin-bottom: 0;
    min-width: 220px;
}

.permissions-search {
    flex: 1 1 auto;
}

.permissions-filter {
    flex: 0 1 auto;
}

.permissions-actions {
    display: flex;
    gap: 0.5rem;
}

.permissions-button-secondary {
    background: #f6f3f4;
    color: rgba(128, 0, 42, 0.55);
    border-color: rgba(128, 0, 42, 0.2);
}

.permissions-table-wrap {
    overflow-x: auto;
    background: #fff;
    border-radius: 0.35rem;
    border: 1px solid rgba(128, 0, 42, 0.1);
}

.permissions-table {
    margin-bottom: 0;
}

.permissions-table .headerTableRow td {
    font-weight: 600;
    background: rgba(128, 0, 42, 0.08);
}

.permissions-link {
    font-weight: 600;
    color: #7d110c;
    text-decoration: none;
    padding: 0.25rem 0.7rem;
    text-decoration: none;
}

.permissions-link:hover,
.permissions-link:focus {
    color: #590c08;
}

.permissions-back {
    margin-bottom: 1rem;
}

.permissions-detail-row {
    margin-bottom: 1.5rem;
}

.permissions-block {
    display: grid;
    gap: 0.75rem;
}

.permissions-block-item strong {
    display: block;
    margin-bottom: 0.35rem;
}

.permissions-kv {
    display: grid;
    gap: 0.5rem;
}

.perm-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.perm-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.15rem 0.65rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid transparent;
}

.perm-pill--write {
    background: rgba(0, 112, 60, 0.15);
    color: #0c5b2d;
    border-color: rgba(0, 112, 60, 0.35);
}

.perm-pill--read {
    background: rgba(0, 93, 166, 0.15);
    color: #0b3e6b;
    border-color: rgba(0, 93, 166, 0.35);
}

.perm-pill--none {
    background: rgba(90, 90, 90, 0.15);
    color: #4a4a4a;
    border-color: rgba(90, 90, 90, 0.3);
}

.perm-pill--ad {
    background: rgba(128, 0, 42, 0.12);
    color: #7d110c;
    border-color: rgba(128, 0, 42, 0.3);
}

.perm-pill--group {
    background: rgba(90, 42, 120, 0.12);
    color: #512468;
    border-color: rgba(90, 42, 120, 0.28);
}

.perm-pill--role {
    background: rgba(208, 141, 42, 0.2);
    color: #8c5311;
    border-color: rgba(208, 141, 42, 0.35);
}

.perm-pill--iu {
    background: rgba(0, 112, 60, 0.12);
    color: #0c5b2d;
    border-color: rgba(0, 112, 60, 0.25);
}

.perm-pill--non-iu {
    background: rgba(166, 77, 0, 0.15);
    color: #8a3f00;
    border-color: rgba(166, 77, 0, 0.3);
}

.perm-scope {
    font-weight: 600;
    color: #7d110c;
}

.perm-element {
    font-family: \"BentonSans\", \"Helvetica Neue\", Arial, sans-serif;
    font-size: 0.85rem;
    color: #444;
    background: rgba(0, 0, 0, 0.05);
    padding: 0.1rem 0.35rem;
    border-radius: 0.3rem;
}

.permissions-levels .flex-col {
    margin-bottom: 1rem;
}

.permissions-level-title {
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.permissions-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.permissions-list li {
    padding: 0.35rem 0;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
    font-size: 0.92rem;
}

.permissions-list li:last-child {
    border-bottom: none;
}

.permissions-error {
    color: #7d110c;
    font-weight: 600;
}

.permissions-warning {
    color: #8a3f00;
    font-weight: 600;
}

/* Action message alerts */
.permissions-alert {
    padding: 0.65rem 1rem;
    border-radius: 6px;
    margin-bottom: 1rem;
    font-size: 0.93rem;
    font-weight: 500;
}
.permissions-alert--success {
    background: rgba(0, 140, 60, 0.12);
    color: #006b2e;
    border: 1px solid rgba(0, 140, 60, 0.25);
}
.permissions-alert--info {
    background: rgba(0, 90, 180, 0.10);
    color: #003d7a;
    border: 1px solid rgba(0, 90, 180, 0.22);
}
.permissions-alert--error {
    background: rgba(180, 20, 10, 0.10);
    color: #7d110c;
    border: 1px solid rgba(180, 20, 10, 0.22);
}

/* Add form (inline dropdown + button) */
.perm-add-form {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}
.perm-add-select {
    max-width: 280px;
    min-width: 160px;
}
.perm-add-level-select {
    max-width: 110px;
    min-width: 80px;
}
.perm-btn-add {
    white-space: nowrap;
    font-size: 0.88rem;
    padding: 0.35rem 0.9rem;
}
.perm-btn-remove {
    font-size: 0.82rem;
    padding: 0.25rem 0.65rem;
    background: rgba(180, 20, 10, 0.08);
    color: #7d110c;
    border: 1px solid rgba(180, 20, 10, 0.25);
    border-radius: 4px;
    cursor: pointer;
}
.perm-btn-remove:hover {
    background: rgba(180, 20, 10, 0.18);
}
.perm-btn-delete {
    /* font-size: 0.82rem; */
    padding: 0.25rem 0.7rem;
    background: rgba(160, 10, 5, 0.1);
    color: #7d110c;
    border: 1px solid rgba(160, 10, 5, 0.3);
    border-radius: 4px;
    cursor: pointer;
    /* font-weight: 900; */
    /* dont inherit the font-weight from the parent and font too */
    font-weight: 900 !important;
    font-size: 0.82rem !important;
    font: revert;
}
.perm-btn-delete:hover {
    background: rgba(160, 10, 5, 0.22);
}
.perm-detail-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.25rem;
}
.perm-detail-header h3 {
    margin: 0;
}
.perm-ad-group-note {
    font-size: 0.88rem;
    color: #555;
    background: rgba(0, 80, 160, 0.06);
    border-left: 3px solid rgba(0, 80, 160, 0.4);
    padding: 0.4rem 0.75rem;
    border-radius: 3px;
    margin-bottom: 0.75rem;
}
.perm-ad-group-note-inline {
    font-size: 0.8rem;
    color: #666;
    font-style: italic;
}
.perm-actions-cell {
    white-space: nowrap;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-direction: row;
}

.perm-level-inline {
    display: inline-block;
    width: auto;
    min-width: 80px;
    max-width: 120px;
    font-size: 0.88rem;
    padding: 0.2rem 0.4rem;
}

/* Create new entity form (collapsible) */
.perm-create-details {
    margin-bottom: 1.1rem;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 6px;
    overflow: hidden;
}
.perm-create-summary {
    padding: 0.55rem 1rem;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.92rem;
    background: rgba(0, 0, 0, 0.03);
    user-select: none;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.perm-create-summary::-webkit-details-marker { display: none; }
.perm-create-details[open] .perm-create-summary {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.perm-create-body {
    padding: 1rem;
    background: #fff;
}
.perm-create-fields {
    /* display: flex; */
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    margin-bottom: 0.85rem;
}
.perm-create-field {
    flex: 1 1 200px;
    min-width: 160px;
    max-width: 320px;
    margin-bottom: 0;
}
.perm-create-field label {
    font-size: 0.88rem;
    margin-bottom: 0.25rem;
    display: block;
}
.perm-required {
    color: #c0392b;
    font-weight: 700;
}
.perm-field-error {
    border-color: #c0392b !important;
    box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.18);
}
.perm-create-actions {
    display: flex;
    gap: 0.5rem;
}

@media (max-width: 900px) {
    .permissions-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .permissions-actions {
        justify-content: flex-start;
    }
    .perm-add-form {
        flex-direction: column;
        align-items: stretch;
    }
    .perm-add-select {
        max-width: 100%;
    }
    .perm-create-fields {
        flex-direction: column;
    }
    .perm-create-field {
        max-width: 100%;
    }
}