@font-face {
    font-family: "ivypresto-headline";
    src: url("/public/assets/fonts/Ivy-Presto/Ivy-Presto-Display-Light.otf") format("opentype");
    font-style: italic;
    font-weight: 300;
}

/*
@font-face {
    font-family: "CeraPro-Regular";
    src: url("/public/assets/fonts/cerapro/CeraPro-Regular.woff") format("woff2");
    font-style: normal;
    font-weight: 400;
}
*/

@font-face {
    font-display: swap;
    font-family: "CeraPro-Regular";
    font-weight: 400;
    src:url(/public/assets/fonts/cerapro-regular/font.woff2) format("woff2"),
        url(/public/assets/fonts/cerapro-regular/font.woff) format("woff")
}
@font-face {
    font-display: swap;
    font-family: "CeraPro-Bold";
    font-weight: 400;
    src:url(/public/assets/fonts/cerapro-bold/font.woff2) format("woff2"),
        url(/public/assets/fonts/cerapro-bold/font.woff) format("woff")
}


#openseagragon-viewer-wrapper {
    position: relative;     /* positioning context */
    height: calc(100dvh - 360px); /* REQUIRED */
    width: 100%;
}
#openseadragon {
    width: 100%;
    height: 100%; 
}
.nav-bar-tall {
    height: 80px;
}
/* Tabs */
.tabs-container .panel-body-csl {
  background: #fff;
  border: 1px solid #ffffff;
  border-radius: 2px;
  padding: 20px;
  position: relative;
  padding-left:15px;
}
.carousel-title {
    font-family: "ivypresto-headline";
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 1.4;
    color: #ffffff;
    text-shadow: 0 0 5px rgba(0,0,0,0.9), 0 0 10px rgba(0,0,0,0.7);
}

.carousel-text {
    font-family: "CeraPro-Regular";
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.4;
    color: #ffffff;
    text-shadow: 0 0 5px rgba(0,0,0,0.9), 0 0 10px rgba(0,0,0,0.7);

}

.panel-info-card-sm {
    position: absolute;
    z-index: 9999;
    display: none;
    width: 438px;
    height: 440px;
    border: 1px solid #96a49a;
    border-radius: 16px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
    background-color: white;
}
.panel-info-card-sm-heading {
    display: flex;
    align-items: center;          /* vertically center content */
    justify-content: center;      /* center the title by default */
    position: relative;           /* allow absolute positioning inside */
    font-family: "ivypresto-headline", serif;
    font-size: 26px;
    font-style: italic;
    font-weight: 300;
    line-height: 1.4;
    padding: 20px 15px;
    background-color: #ffffff;
    border-color: #ffffff;
    border-radius: 16px;
    color:rgb(61, 69, 67);
}
.panel-info-card-sm-body {
    padding-left: 15px;
    padding-right: 15px;
}
.panel-info-card-sm-image {
    border-radius: 16px;
    width:100%; 
    height:auto;
}
.panel-info-card-sm-text {
    font-family: "CeraPro-Regular", serif;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    color:rgb(61, 69, 67);
}
.panel-info-card-sm .close-btn {
    position: absolute;
    right: 5px;               /* pin to right edge */
    top: 20%;                  
    transform: translateY(-20%);  /* vertical center */
    cursor: pointer;           /* pointer on hover */
    font-size: 32px;           /* adjust size if needed */
    background: none;          /* no background */
    border: none;              /* no border */
    padding: 0;                /* remove padding */
    line-height: 1;            /* prevent extra spacing */
    color: #000;               /* or any color you want */
    width:48px;
    height: 48px;
}

/*
* panel-info-card-md
*/
.panel-info-card-md {
    position: absolute;
    z-index: 9999;
    display: none;
    width: 638px;
    height: 790px;
    border: 1px solid #96a49a;
    border-radius: 16px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
    background-color: white;
}
.panel-info-card-md-heading {
    display: flex;
    align-items: center;          /* vertically center content */
    justify-content: center;      /* center the title by default */
    position: relative;           /* allow absolute positioning inside */
    font-family: "ivypresto-headline", serif;
    font-size: 26px;
    font-style: italic;
    font-weight: 300;
    line-height: 1.4;
    padding: 20px 15px;
    background-color: #ffffff;
    border-color: #ffffff;
    border-radius: 16px;
    color:rgb(61, 69, 67);
}
.panel-info-card-md-body {
    padding-left: 15px;
    padding-right: 15px;
}
.panel-info-card-md .close-btn {
    position: absolute;
    right: 5px;                /* pin to right edge */
    top: 20%;                  
    transform: translateY(-20%);  /* vertical center */
    cursor: pointer;           /* pointer on hover */
    font-size: 32px;           /* adjust size if needed */
    background: none;          /* no background */
    border: none;              /* no border */
    padding: 0;                /* remove padding */
    line-height: 1;            /* prevent extra spacing */
    color: #000;               /* or any color you want */
    width: 48px;
    height: 48px;
}
.panel-info-card-md-image {
    border-radius: 16px;
    width:100%; 
    height:auto;
}
.panel-info-card-md-text {
    font-family: "CeraPro-Regular", serif;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    color:rgb(61, 69, 67);
    margin-right:230px;
}
.panel-info-card-md-overlay {
    position: absolute;
    right: 15px;               /* pin to right edge */
    top: 430px;                  
    cursor: pointer;           /* pointer on hover */
    font-size: 26px;           /* adjust size if needed */
    background: none;          /* no background */
    border: none;              /* no border */
    padding: 0;                /* remove padding */
    line-height: 1;            /* prevent extra spacing */
    color: #000;             /* or any color you want */
}
.panel-info-card-md-overlay-img {
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    width: 220px;
    height: auto;
}


/*
* panel-info-card-md-csl
*/
.panel-info-card-md-csl {
    position: absolute;
    z-index: 9999;
    display: none;
    width: 738px;
    height: 700px;
    border: 1px solid #96a49a;
    border-radius: 16px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
    background-color: white;
}
.panel-info-card-md-csl-heading {
    display: flex;
    align-items: center;          /* vertically center content */
    justify-content: center;      /* center the title by default */
    position: relative;           /* allow absolute positioning inside */
    font-family: "ivypresto-headline", serif;
    font-size: 26px;
    font-style: italic;
    font-weight: 300;
    line-height: 1.4;
    padding: 20px 15px;
    background-color: #ffffff;
    border-color: #ffffff;
    border-radius: 16px;
    color:rgb(61, 69, 67);
}
.panel-info-card-md-csl-body {
    padding-left: 15px;
    padding-right: 15px;
}
.panel-info-card-md-csl .close-btn {
    position: absolute;
    right: 5px;               /* pin to right edge */
    top: 20%;                  
    transform: translateY(-20%);  /* vertical center */
    cursor: pointer;           /* pointer on hover */
    font-size: 32px;           /* adjust size if needed */
    background: none;          /* no background */
    border: none;              /* no border */
    padding: 0;                /* remove padding */
    line-height: 1;            /* prevent extra spacing */
    color: #000;               /* or any color you want */
    width: 48px;
    height: 48px;

}
.panel-info-card-md-csl-image {
    border-radius: 16px;
    width:100%; 
    height:auto;
}
.panel-info-card-md-csl-text {
    font-family: "CeraPro-Regular", serif;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    color:rgb(61, 69, 67);
}
.panel-info-card-md-csl-overlay {
    position: absolute;
    right: 15px;               /* pin to right edge */
    top: 430px;                  
    cursor: pointer;           /* pointer on hover */
    font-size: 26px;           /* adjust size if needed */
    background: none;          /* no background */
    border: none;              /* no border */
    padding: 0;                /* remove padding */
    line-height: 1;            /* prevent extra spacing */
    color: #000;             /* or any color you want */
}
.panel-info-card-md-csl-overlay-img {
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    width: 220px;
    height: auto;
}
.carousel-control-round {
    border-radius: 16px;
}
/*
* panel-info-card-lg
*/
.panel-info-card-lg {
    position: absolute;
    z-index: 9999;
    display: none;
    width: 738px;
    height: 850px;
    border: 1px solid #96a49a;
    border-radius: 16px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
    background-color: white;
}
.panel-info-card-lg-heading {
    display: flex;
    align-items: center;          /* vertically center content */
    justify-content: center;      /* center the title by default */
    position: relative;           /* allow absolute positioning inside */
    font-family: "ivypresto-headline", serif;
    font-size: 26px;
    font-style: italic;
    font-weight: 300;
    line-height: 1.4;
    padding: 20px 15px;
    background-color: #ffffff;
    border-color: #ffffff;
    border-radius: 16px;
    color:rgb(61, 69, 67);
}
.panel-info-card-lg-body {
    padding-left: 15px;
    padding-right: 15px;
}
.panel-info-card-lg .close-btn {
    position: absolute;
    right: 5px;               /* pin to right edge */
    top: 20%;                  
    transform: translateY(-20%);  /* vertical center */
    cursor: pointer;           /* pointer on hover */
    font-size: 32px;           /* adjust size if needed */
    background: none;          /* no background */
    border: none;              /* no border */
    padding: 0;                /* remove padding */
    line-height: 1;            /* prevent extra spacing */
    color: #000;               /* or any color you want */
    width: 48px;
    height: 48px;    
}
.panel-info-card-lg-image {
    border-radius: 16px;
    width:100%; 
    height:auto;
}
.panel-info-card-lg-text {
    font-family: "CeraPro-Regular", serif;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    color:rgb(61, 69, 67);
    height: 200px;
    overflow-y: auto; /* scrollable */
}
.panel-info-card-lg-overlay {
    position: absolute;
    right: 15px;               /* pin to right edge */
    top: 365px;                  
    cursor: pointer;           /* pointer on hover */
    font-size: 26px;           /* adjust size if needed */
    background: none;          /* no background */
    border: none;              /* no border */
    padding: 0;                /* remove padding */
    line-height: 1;            /* prevent extra spacing */
    color: #000;             /* or any color you want */
}
.panel-info-card-lg-overlay-img {
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    width: 220px;
    height: auto;
}

@media (min-height: 1920px ) {
    .panel-info-card-sm {
        position: absolute;
        z-index: 9999;
        display: none;
        width: 738px;
        height: 640px;
        border: 1px solid #96a49a;
        border-radius: 16px;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
    }
    .panel-info-card-sm-heading {
        display: flex;
        align-items: center;          /* vertically center content */
        justify-content: center;      /* center the title by default */
        position: relative;           /* allow absolute positioning inside */
        font-family: "ivypresto-headline", serif;
        font-size: 28px;
        font-style: italic;
        font-weight: 300;
        line-height: 1.4;
        padding: 20px 15px;
        background-color: #ffffff;
        border-color: #ffffff;
        border-radius: 16px;
        color:rgb(61, 69, 67);
    }
    .panel-info-card-sm-body {
        padding-left: 15px;
        padding-right: 15px;
    }
    .panel-info-card-sm-image {
        border-radius: 16px;
        width:100%; 
        height:auto;
    }
    .panel-info-card-sm-text {
        font-family: "CeraPro-Regular", serif;
        font-size: 17px;
        font-style: normal;
        font-weight: 400;
        color:rgb(61, 69, 67);
    }
    .panel-info-card-sm .close-btn {
        position: absolute;
        right: 5px;               /* pin to right edge */
        top: 20%;                  
        transform: translateY(-20%);  /* vertical center */
        cursor: pointer;           /* pointer on hover */
        font-size: 32px;           /* adjust size if needed */
        background: none;          /* no background */
        border: none;              /* no border */
        padding: 0;                /* remove padding */
        line-height: 1;            /* prevent extra spacing */
        color: #000;               /* or any color you want */
        width: 48px;
        height: 48px;
    }

    /*
    * panel-info-card-md
    */
    .panel-info-card-md {
        position: absolute;
        z-index: 9999;
        display: none;
        width: 838px;
        height: 1020px;
        border: 1px solid #96a49a;
        border-radius: 16px;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
    }
    .panel-info-card-md-heading {
        display: flex;
        align-items: center;          /* vertically center content */
        justify-content: center;      /* center the title by default */
        position: relative;           /* allow absolute positioning inside */
        font-family: "ivypresto-headline", serif;
        font-size: 32px;
        font-style: italic;
        font-weight: 300;
        line-height: 1.4;
        padding: 20px 15px;
        background-color: #ffffff;
        border-color: #ffffff;
        border-radius: 16px;
        color:rgb(61, 69, 67);
    }
    .panel-info-card-md-body {
        padding-left: 15px;
        padding-right: 15px;
    }
    .panel-info-card-md-image {
        border-radius: 16px;
        width:100%; 
        height:auto;
    }
    .panel-info-card-md-text {
        font-family: "CeraPro-Regular", serif;
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        color:rgb(61, 69, 67);
        margin-right:300px;
    }
    .panel-info-card-md .close-btn {
        position: absolute;
        right: 5px;               /* pin to right edge */
        top: 20%;                  
        transform: translateY(-20%);  /* vertical center */
        cursor: pointer;           /* pointer on hover */
        font-size: 32px;           /* adjust size if needed */
        background: none;          /* no background */
        border: black;              /* no border */
        padding: 0;                /* remove padding */
        line-height: 1;            /* prevent extra spacing */
        color: #000;               /* or any color you want */
        width: 48px;
        height: 48px;
    }
    .panel-info-card-md-overlay {
        position: absolute;
        right: 15px;               /* pin to right edge */
        top: 535px;                  
        cursor: pointer;           /* pointer on hover */
        font-size: 26px;           /* adjust size if needed */
        background: none;          /* no background */
        border: none;              /* no border */
        padding: 0;                /* remove padding */
        line-height: 1;            /* prevent extra spacing */
        color: #000;               /* or any color you want */
    }
    .panel-info-card-md-overlay-img {
        border-radius: 16px;
        width: 280px;
        height: auto;
    } 

    /*
    * panel-info-card-md-csl
    */    
    .panel-info-card-md-csl {
        position: absolute;
        z-index: 9999;
        display: none;
        width: 738px;
        height: 820px;
        border: 1px solid #96a49a;
        border-radius: 16px;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
    }
    .panel-info-card-md-csl-heading {
        display: flex;
        align-items: center;          /* vertically center content */
        justify-content: center;      /* center the title by default */
        position: relative;           /* allow absolute positioning inside */
        font-family: "ivypresto-headline", serif;
        font-size: 32px;
        font-style: italic;
        font-weight: 300;
        line-height: 1.4;
        padding: 20px 15px;
        background-color: #ffffff;
        border-color: #ffffff;
        border-radius: 16px;
        color:rgb(61, 69, 67);
    }
    .panel-info-card-md-csl-body {
        padding-left: 15px;
        padding-right: 15px;
    }
    .panel-info-card-md-csl-image {
        border-radius: 16px;
        width:100%; 
        height:auto;
    }
    .panel-info-card-md-csl-text {
        font-family: "CeraPro-Regular", serif;
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        color:rgb(61, 69, 67);
    }
    .panel-info-card-md-csl .close-btn {
        position: absolute;
        right: 5px;                /* pin to right edge */
        top: 20%;                  
        transform: translateY(-20%);  /* vertical center */
        cursor: pointer;           /* pointer on hover */
        font-size: 32px;           /* adjust size if needed */
        background: none;          /* no background */
        border: none;              /* no border */
        padding: 0;                /* remove padding */
        line-height: 1;            /* prevent extra spacing */
        color: #000;               /* or any color you want */
        width: 48px;
        height: 48px;
    }
    .panel-info-card-md-csl-overlay {
        position: absolute;
        right: 15px;               /* pin to right edge */
        top: 535px;                  
        cursor: pointer;           /* pointer on hover */
        font-size: 26px;           /* adjust size if needed */
        background: none;          /* no background */
        border: none;              /* no border */
        padding: 0;                /* remove padding */
        line-height: 1;            /* prevent extra spacing */
        color: #000;               /* or any color you want */
    }
    .panel-info-card-md-csl-overlay-img {
        border-radius: 16px;
        width: 280px;
        height: auto;
    } 

    /*
    * panel-info-card-lg
    */
    .panel-info-card-lg {
        position: absolute;
        z-index: 9999;
        display: none;
        width: 938px;
        height: 1350px;
        border: 1px solid #96a49a;
        border-radius: 16px;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
    }
    .panel-info-card-lg-heading {
        display: flex;
        align-items: center;          /* vertically center content */
        justify-content: center;      /* center the title by default */
        position: relative;           /* allow absolute positioning inside */
        font-family: "ivypresto-headline", serif;
        font-size: 26px;
        font-style: italic;
        font-weight: 300;
        line-height: 1.4;
        padding: 20px 15px;
        background-color: #ffffff;
        border-color: #ffffff;
        border-radius: 16px;
        color:rgb(61, 69, 67);
    }
    .panel-info-card-lg-body {
        padding-left: 15px;
        padding-right: 15px;
    }
    .panel-info-card-lg .close-btn {
        position: absolute;
        right: 5px;                /* pin to right edge */
        top: 20%;                  
        transform: translateY(-20%);  /* vertical center */
        cursor: pointer;           /* pointer on hover */
        font-size: 26px;           /* adjust size if needed */
        background: none;          /* no background */
        border: none;              /* no border */
        padding: 0;                /* remove padding */
        line-height: 1;            /* prevent extra spacing */
        color: #000;               /* or any color you want */
        width: 48px;
        height: 48px;
    }
    .panel-info-card-lg-image {
        border-radius: 16px;
        width:100%; 
        height:auto;
    }
    .panel-info-card-lg-text {
        font-family: "CeraPro-Regular", serif;
        font-size: 15px;
        font-style: normal;
        font-weight: 400;
        color:rgb(61, 69, 67);
        height: 500px;
        overflow-y: auto; /* scrollable */
    }
    .panel-info-card-lg-overlay {
        position: absolute;
        right: 15px;               /* pin to right edge */
        top: 515px;                  
        cursor: pointer;           /* pointer on hover */
        font-size: 26px;           /* adjust size if needed */
        background: none;          /* no background */
        border: none;              /* no border */
        padding: 0;                /* remove padding */
        line-height: 1;            /* prevent extra spacing */
        color: #000;             /* or any color you want */
    }
    .panel-info-card-lg-overlay-img {
        border-top-left-radius: 16px;
        border-bottom-left-radius: 16px;
        border-bottom-right-radius: 16px;
        width: 220px;
        height: auto;
    }    
}