/* ------------------------------ WHOLE SITE STYLING ---------------------------- */
* {
    font-family: Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif!important;
    color: #2B3BBB;
}
.sticky-top {
    z-index: 0;
    position: fixed;
}
#fullpage {
    z-index: 1;
    position:static;
    top: -10vh;
}
.fp-watermark {
    display: none!important;
    visibility: hidden!important;
}
body {
    animation: fadeInAnimation ease 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    background-color: #a59bff!important;
}
@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
     }
}
.modal-header {
    border-bottom: 0px!important;
}

.back-to-map, .refresh-button {
    padding: 20px;
}

/* -------------------------------- CHAT STYLING ------------------------------- */
.chat-shell {
    background-color: #FFCE95;
    margin: 20px!important;
    padding: 40px!important;
    border: #2B3BBB solid 3px;
    border-radius: 24px;
    outline: #FFAA87 solid 6px;
    outline-offset: -9px;
    box-shadow: #D7D1FD 8px 8px;
}
.chat-history {
    overflow: scroll;
    padding: 0px 20px;
}

.chat-input {
    overflow: scroll;
    background-color: #ffffff;
    border-radius: 16px;
    box-shadow: #FFAA87 6px 6px;
    outline: none !important;
}

.form-control { 
    background-color: #ffffff!important;
    color: #2B3BBB!important;
    border: none!important;
    resize: none;
    padding: 20px!important;
    outline: none !important;
}
.form-control::placeholder {
    color: #a59bff!important;
    outline: none !important;
}
.form-control:focus {
    outline: none !important;
}
.submit-button-shell {
    background-color: #ffffff!important;
    border: none!important;
}
.llm-text{
    box-shadow: #FFAA87 6px 6px;
    background-color: #fee9cf;
    border-radius: 8px 8px 8px 0px;
    padding: 20px;
    font-size: 16px;
    justify-content: left;
    text-align: left!important;
    display: block;
    float: left;
    width: 80%;
}
.user-text{
    box-shadow: #FFAA87 6px 6px;
    background-color: #ffffff;
    border-radius: 8px 8px 0px 8px;
    padding: 20px;
    font-size: 16px;
    justify-content: left;
    text-align: left!important;
    display: block;
    float: right;
    width: 80%;
}

/* ------------------------------- BUTTON STYLING ------------------------------ */
.learn-button {
    background-color: #ffffff!important;
}
.sail-button {
    background-color: #E5E1FF!important;
}
.learn-button, .sail-button {
    border: #2B3BBB solid 3px!important;
    color: #2B3BBB!important;
    font-weight: 600!important;
    border-radius: 60px!important;
    margin: 20px;
    box-shadow: #2B3BBB 4px 4px;
}
.learn-button:hover, .sail-button:hover {
    border: #2B3BBB solid 3px!important;
    color: #2B3BBB!important;
    font-weight: 600!important;
    border-radius: 60px!important;
    box-shadow: #2B3BBB 0px 0px!important;
    margin: 20px;
	transform: translate(4px, 4px)!important;
    transition: transform 120ms ease-in-out;
}


/* -------------------------- BG COLOR FOR WAVY SECTIONS ------------------------- */
.wavy-middle {
    background-color: #F4F3FD;
}

/* --------------------------------- TABLE STYLING ------------------------------- */
.table {
    border-radius: 16px;
}
td{
    --bs-table-color: #2B3BBB!important;
    --bs-table-striped-color: #2B3BBB!important;
    --bs-table-bg: #eceaff;
    --bs-table-striped-bg: #e7e4fe;
}

/* -------------------------------- NAVBAR STYLING ------------------------------- */
.nav-link {
    font-size: 18px!important;
    color: #2B3BBB!important;
    padding: 10px 30px!important;
}
.navbar {
    padding: 10px!important;
    background-color: #EBE8FC;
}
button.navbar-toggler {
    --bs-navbar-toggler-padding-y: 0;
    --bs-navbar-toggler-padding-x: 0;
    --bs-navbar-toggler-font-size: 1.5rem;
    --bs-navbar-toggler-border-color: none;
    --bs-navbar-toggler-border: 0;
    --bs-navbar-toggler-border-radius: 0;
    --bs-navbar-toggler-focus-width: 0;
    --bs-navbar-toggler-transition: none;
}
button.navbar-toggler-icon {
    color: #2B3BBB;
    --bs-navbar-toggler-icon-bg: url()!important;
}

/* --------------------- REMOVES WEIRD FOCUS OUTLINE ON CLICK --------------------- */
*:focus {
    outline: 0 !important;
}

/* ---------------------------- ISLAND POPOVER/TOOLTIPS --------------------------- */
.custom-popover {
    --bs-popover-max-width: 200px;
    --bs-popover-border-color: #2B3BBB!important;
    --bs-popover-border-width: 3px!important;
    --bs-popover-border-radius: 16px!important;
    --bs-popover-header-bg:  #2B3BBB!important;
    --bs-popover-header-color: #ffffff!important;
    --bs-popover-body-color: #2B3BBB!important;
    font-weight: 500!important;
    box-shadow: 5px 5px 0px #5868e26a!important;
    --bs-popover-body-padding-x: 1rem;
    --bs-popover-body-padding-y: .5rem;
}
  

/* ============================= SVG (MAP) ATTRIBUTES ============================= */

/* ---------------------------------- MAP SIZING ---------------------------------- */
#IslandsMap {
    max-width: 1200px;
    margin: auto;
}

/* ------------------------------- HOVER ENLARGEMENT ------------------------------ */
#Island_1:hover, #Island_2:hover, #Island_3:hover, #Island_4:hover, #Island_5:hover, #Island_6:hover, #Island_7:hover, #Compass:hover{
    transform-origin:center;
    transform: scale(1.05);
}

/* ---------------------------- ISLSND 1 HOVER CHANGES ---------------------------- */
#Island_1:hover #Island1 .st2, #Island_1:hover #Lighthouse .st2{
    fill:#72deba;
}
#Island_1:hover #Shell .st6 {
    fill:#AFA7F8;
}
#Island_1:hover #Lighthouse .st17{
    fill:#E39DBA;
}

/* ---------------------------- ISLSND 2 HOVER CHANGES ---------------------------- */
#Island_2:hover #Island2 .st2, #Island_2:hover #Island2-2 .st2, #Island_2:hover #Tree #Palm .st2 {
    fill:#72deba;
}
#Island_2:hover #Tree #Palm .st6 {
    fill:#54B79B;
}

/* ---------------------------- ISLSND 3 HOVER CHANGES ---------------------------- */
#Island_3:hover #Island3 .st2, #Island_3:hover #Tree #Palm .st2 {
    fill:#72deba;
}
#Island_3:hover #Tree #Palm .st6 {
    fill:#54B79B;
}

/* ---------------------------- ISLSND 4 HOVER CHANGES ---------------------------- */
#Island_4:hover #Island4 .st2, #Island_4:hover #Island4-2 .st2, #Island_4:hover #Tree #Palm .st2 {
    fill:#72deba;
}
#Island_4:hover #Tree #Palm .st6 {
    fill:#54B79B;
}

/* ---------------------------- ISLSND 5 HOVER CHANGES ---------------------------- */
#Island_5:hover #Island5 .st2, #Island_5:hover #Island5-2 .st2{
    fill:#72deba;
}

/* ---------------------------- ISLSND 6 HOVER CHANGES ---------------------------- */
#Island_6:hover #Island6 .st2, #Island_6:hover #Chest .st2 {
    fill:#72deba;
}
#Island_6:hover #Chest .st6 {
    fill:#AFA7F8;
}

/* ---------------------------- ISLSND 7 HOVER CHANGES ---------------------------- */
#Island_7:hover #Island7 .st2, #Island_7:hover #Island7-2 .st2, #Island_7:hover #Island7-3 .st2{
    fill:#72deba;
}

/* ----------------------------- COMPASS HOVER CHANGES ---------------------------- */
#Compass:hover .st2 {
    fill:#E39DBA;
}
#Compass:hover .st13 {
    fill:#AFA7F8;
}