/* Site CSS */


/*Color Variables*/
 :root {
 /*primary colors*/
  --cherry: #BA0C2F;
  --silver: #A7A8AA;
  --turquoise: #007A86;
  --lobo-gray: #63666A;
  --light-grey: #f2f2f2;
 /*secondary colors*/
  --high-noon: #FFC600;
  --sandia-sunset: #ED8B00;
  --terra: #C05131;
  --mesa: #D6A461;
  --green-chile: #A8AA19;
  --deep-dusk: #8A387C;
  --white: #FFFFFF;
  --secondary-white: #F5F5F5;
  --black: #222222;
}

#main{
    margin: 2%;
}


dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(1px);
}

.modal-dialog {
    padding: 0;
    border: none;
    border-radius: 6px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    width: 85%;
    max-width: 85%;
    min-height: 50%;
    max-height: 85%;
    overflow-y: auto;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.modal-header {
    display: flex;
    align-items: center;
    /* justify-content: space-between; */
    padding: 12px 24px;
    border-bottom: 1px solid #dee2e6;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 1;
}

.modal-header h5 {
    margin: 0;
}

.modal-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.modal-fullpage-btn {
    background: none;
    border: none;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    color: #6c757d;
    padding: 0;
    text-decoration: none;
}

.modal-fullpage-btn:hover {
    color: #343a40;
}

.modal-close-btn {
    background: none;
    border: none;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    color: #6c757d;
    padding: 0;
}

.modal-body {
    padding: 16px 24px;
}

.btn-group{
    margin:5px 0;
}

.checkbox-hide input[type=checkbox] , .checkbox-hide input[type=radio]{
    display:none;
}
label.checkbox-hide{
  background-color: var(--white);
  color: var(--black);
  border:solid 1px var(--white);
}

label.checkbox-hide:has(input[type="checkbox"]:checked), label.checkbox-hide:has(input[type="radio"]:checked){
  background-color: var(--cherry);
  color: var(--white);
  /* border-right:solid 1px var(--white); */
}

label.checkbox-hide:hover, label.checkbox-hide:active, label.checkbox-hide:focus-within{
  background-color: var(--light-grey);
  color: var(--balck);
  /* border-right:solid 1px var(--white); */
}

#app-header {
    padding-top:35px;
}

#home #hero {
    background-position:left center;
    height:500px;
}


#hero {
    background: #fff url(../img/cascade.jpg) left top no-repeat;
    background-size:cover;
    height:250px;
}

#bigvid #hero {
    height: auto;
    background-image: none;
}


 #header {
    padding: 30px 0 10px 0;
    position: absolute;
    width: 100%;
    background-color: rgba(255,255,255,.75);
}

#regions #header {position:initial;}


figure.caption {
   background-color: #fff;
   padding: 5px;
   font-size: .875em;
   display: table;
   border:1px solid #ddd;
}

figure.caption img {
    display: block;
    width: 100%;
}

figure.caption figcaption {
    display: table-caption;
    caption-side: bottom;
    background: #fff;
    padding: 0 5px 5px;
}


/* long shadow tests */
.shadow:before,
.shadow:after {
  content: "";
  position: absolute;
  display: block;
  border: 0;
}

.shadow:before {
  top: 0;
  left: 100%;
  height: 100%;
  width: 0;
  padding-right: 100%;
  transform-origin: 0% 0%;
  transform: skew(0deg, 45deg);
  background: linear-gradient(to right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, .2) 100%);
}

.shadow:after {
  top: 100%;
  left: 0;
  width: 100%;
  height: 0;
  padding-top: 100%;
  transform-origin: 0% 0%;
  transform: skew(45deg, 0deg);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, .2) 100%);

}

.callout {padding:20px; overflow:hidden; opacity:1; margin-bottom:30px;}
.imgbg {
    overflow: hidden;
    padding: 50px;
    background-image: url(https://wcmsdev.unm.edu/brand-test/carousel/people-4.jpeg);
}

.bound {
    overflow: hidden;
    padding: 50px;
    background-color:#a7a8aa;
}

caption {
    position : absolute;
    bottom : -20px;
}

.vmiddle {
	display: inline-block;
	vertical-align: middle;
	float: none;
}