/* Defaults & Variables */
:root {
    --NAVBAR-BG-COLOR: #c7b39c;
    --API_BUTTON-BG-COLOR: #ab957d;
    --NAVBAR_ICON-COLOR: #5b3a21;
    --NAVBAR_ICON-HOVER-COLOR: #cd5f53;
    --BOX-SHADOW-COLOR: #433a30;
    --TABLE-TEXT-COLOR: black;

    --SEARCH_CLIENT-FONT-SIZE: 18px;
    --FONT-HAMATSESA: hamatsesa-font;

    --LOADING_LOGO_SIZE: 200px;
}

body {
    font-family: var(--FONT-HAMATSESA);
    overflow-y: auto;
}
/* Defaults & Variables */

/* --------------------------------------------------- */

/* Navigation Bar CSS*/
.navbar {
    background-color: var(--NAVBAR-BG-COLOR);
    box-shadow: 0 1px 5px var(--BOX-SHADOW-COLOR);
}

/* Disable <a> "display: block;" default*/
.navbar_item {
    display: contents;
}

/* Adjusting title */
#title {
    width: 20%;
    min-width: 150px;
}

/* Adjusting logout icon */
.navbar_icon {
    position: relative;
    
    padding: 10px;
    font-size: 250%;

    color: var(--NAVBAR_ICON-COLOR);
    transition: 0.3s;
}

.navbar_icon:hover {
    color: var(--NAVBAR_ICON-HOVER-COLOR);
}
/* Navigation Bar CSS*/

/* --------------------------------------------------- */

/* Search */
.search {
    width: 50%;
    padding: 10px;
    
    color: black;
    font-size: var(--SEARCH_CLIENT-FONT-SIZE);
    
    outline: none;
    border: none;
    border-bottom: 1px solid var(--NAVBAR_ICON-COLOR);
}

.search::placeholder {
    color: black;
}
/* Search */

/* --------------------------------------------------- */

/* Api Button */
.api_button {
    background-color: var(--API_BUTTON-BG-COLOR);
    border: none;
    border-radius: 10px;

    font-size: 20px;

    transition: 0.3s;
}

.api_button:hover {
    font-size: 18px;
    box-shadow: 0 5px 0 var(--BOX-SHADOW-COLOR);
    background-color: var(--API_BUTTON-BG-COLOR);
}
/* Api Button */

/* --------------------------------------------------- */

/* Bootstrap5 Additions */
.data_box {
    margin-top: 15px;
    padding: 10px;
}

.data_box > * {
    margin-bottom: 10px;
}

.shop_table_wrapper {
    margin-bottom: 60px;
}

.shop_table_wrapper tr {
    border-color: #a7b9b1;
}

.table {
    --bs-table-bg: transparent;
}    

.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--NAVBAR-BG-COLOR);
}    

.btn-block {
    width: 100%;
}

.dropdown-item:hover {
    cursor: pointer
}
/* Bootstrap5 Additions */

/* --------------------------------------------------- */

/* Scroll Bar */
    /* width */
    ::-webkit-scrollbar {
        width: 10px;
    }

    /* Track */
    ::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    /* Handle */
    ::-webkit-scrollbar-thumb {
        background: var(--API_BUTTON-BG-COLOR);
    }

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: var(--API_BUTTON-BG-COLOR);
    }
/* Scroll Bar */

/* --------------------------------------------------- */

/* Animations & Fonts */
#loading_screen {
    position: absolute;
    top: 0;
    left: 0;

    height: 100vh;
    width: 100vw;

    background-color: white;
}


#loading_screen > img {
    position: absolute;
    top: calc(50% - var(--LOADING_LOGO_SIZE) / 2);
    left: calc(50% - var(--LOADING_LOGO_SIZE) / 2);

    width: var(--LOADING_LOGO_SIZE);
    height: var(--LOADING_LOGO_SIZE);

    /* margin: auto; */


    animation: heartbeat .3s infinite alternate
}

.item_animation {
    animation: increament 0.3s;
}

.flex_element {
    display: flex; 
    justify-content: center;
}

@keyframes pulse-animation {
    0% {
      box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);
    }
    100% {
      box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
    }
  }

@keyframes heartbeat
{
   to { transform: scale(1.2); }
}

@keyframes increament {
    0% {
        font-size: 100%;
    }

    50% {
        font-size: 125%;
    }

    100% {
        font-size: 100%;
    }
}

@font-face {
    font-family: hamatsesa-font;
    src: url('../MISC/ArbelHagildaBold.otf');
}
/* Animations & Fonts */

#item_template, #additional_item_template {
    display: none;
}

.addition_item {
    margin: 3px;
}

#pop_up_message {
    position: fixed;
    top: 25px;
    left: 50%;
    transform: translate(-50%, 0);

    z-index: 100;
    width: 30vw;

    text-align: center;

    padding: 15px;
    color: black;
    background-color: white;
    border-radius: 10px;
    border: 1px solid black;

    display: none;
}