/* #region      ### V A R I A B L E S */

    :root {
        --dark-gray: #222;
        --light-orange: #FF6D38;
        --orange: #F9CE68;
        --light-brown: #916A37;
        --brown: #77572D; 
        --dark-brown: #563F20;
        --light-tan: #F8FAE2;
        --tan: #F1EABE;
        --dark-tan: #D7CE9B;
        --box-shadow-left: -2px 2px 5px var(--brown);
        --box-shadow-center: 0px 0px 5px var(--brown);
        --box-shadow-right: 2px 2px 5px var(--brown);
        --box-shadow1: 0px 10px 10px -3px rgba(0, 0, 0, 0.3);
        --box-shadow2: -1px 1px 4px rgba(0, 0, 0, 0.6);
        --box-shadow3: -1px -1px 4px rgba(0, 0, 0, 0.6);
        --text-shadow: -2px 2px 4px #000;
        --star: "★";
        --font-Nunito: 'Nunito', Helvetica, sans-serif;
        --font-Roboto: 'Roboto', sans-serif;
    }

/* #endregion   ### V A R I A B L E S */

/* #region      ### A N I M A T I O N S */

    @keyframes rotate {
        from { transform: rotate(0deg); }
        to   { transform: rotate(360deg); }
    }

    @keyframes rotateStars {
        0%   { opacity: 1; transform: rotate(0deg) scale(0); }
        33%  { opacity: 0; }
        50%  { opacity: 1; transform: rotate(180deg) scale(.8); }
        100% { opacity: 1; transform: rotate(360deg) scale(0); }
    }

    @keyframes pulsate {
        0%   { opacity: 1; }
        50%  { opacity: 0; }
        100% { opacity: 1; }
    }

/* #endregion   ### A N I M A T I O N S */

/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */

/* #region      ### G E N E R I C   C L A S S E S */

    .content-container {
        color: #111;
    }

    .hide {
        display: none;
        visibility: hidden;
        opacity: 0;
    }

    .show {
        display: block;
        visibility: visible;
        opacity: 1;
    }

    .text-left {
        text-align: left;
    }

    .text-center {
        text-align: center;
    }

    .text-right {
        text-align: right;
    }

    .position-relative {
        position: relative;
    }

    .block {
        display: block;
    }

    .inline-block {
        display: inline-block;
    }

/* #endregion   ### G E N E R I C   C L A S S E S */

/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */

/* #region      ### H T M L   T A G S */

    input[type="checkbox"]:hover {
        cursor: pointer;
    }

/* #endregion   ### H T M L   T A G S */

/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */


/* #region      ### P A G E   C O N T A I N E R S */

    .item-center {
        background-color: var(--tan);
    }

    .page-container {
        margin: auto;
        padding: 15px;
        width: 95%;
        text-align: center;
    }

    .ac-bug-container,
    .ac-fish-container,
    .ac-diving-container {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-evenly;
        width: 90%;

        margin: 10px auto;
        padding: 15px;
    }

    .ac-bug-container {

    }

    .ac-fish-container {

    }

    .ac-diving-container {

    }

/* #endregion   ### P A G E   C O N T A I N E R S */

/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */

/* #region      ### H E A D E R   I C O N S */

    /* @@@ This one is the whole container. */
    .ac-icons {

    }

        .ac-icons > div {
            z-index: 9750;
            position: relative;
        }

            .ac-icons > div:first-of-type {
                transform: translateX(15px);
            }

            .ac-icons > div:last-of-type {
                transform: translateX(-15px);
            }

        .ac-icons + hr {
            z-index: 9500;
            display: block;
            border-color: #8D7D67;
            border-style: solid;
            border-width: 1px;
            transform: translateY(-50px);
        }


    /* @@@ This one is the individual <div>s */
    .ac-icon {
        position: relative;
        display: inline-block;
        width: 112px;
        height: 112px;
    }

        .ac-icon:hover {
            cursor: pointer;
        }

        .ac-icon.bug {
            background-image: url(/Games/Animal-Crossing-New-Horizons/Pictures/Icons/ac-bugs-unselected.png);
            background-repeat: no-repeat;
        }

            .ac-icon.bug:hover,
            .ac-icon.bug.selected {
                background-image: url(/Games/Animal-Crossing-New-Horizons/Pictures/Icons/ac-bugs-selected.png);
            }

        .ac-icon.fish {
            background-image: url(/Games/Animal-Crossing-New-Horizons/Pictures/Icons/ac-fish-unselected.png);
            background-repeat: no-repeat;
        }

            .ac-icon.fish:hover,
            .ac-icon.fish.selected {
                background-image: url(/Games/Animal-Crossing-New-Horizons/Pictures/Icons/ac-fish-selected.png);
            }

        .ac-icon.diving {
            background-image: url(/Games/Animal-Crossing-New-Horizons/Pictures/Icons/ac-diving-unselected.png);
            background-repeat: no-repeat;
        }

            .ac-icon.diving:hover,
            .ac-icon.diving.selected {
                background-image: url(/Games/Animal-Crossing-New-Horizons/Pictures/Icons/ac-diving-selected.png);
            }

        .ac-icon.bug.selected::after,
        .ac-icon.fish.selected::after,
        .ac-icon.diving.selected::after {
            position: absolute;
            top: -27px;
            padding: 5px 10px;
            color: var(--brown);
            font-weight: 600;
            font-size: 1.2em;
            background-color: var(--orange);
            border-radius: 20px;
        }

        .ac-icon.bug.selected {

        }

            .ac-icon.bug.selected::after {
                content: "Insects";
                left: 16px;
            }

        .ac-icon.fish.selected {

        }

            .ac-icon.fish.selected::after {
                content: "Fish";
                left: 28px;
            }

        .ac-icon.diving.selected {

        }

            .ac-icon.diving.selected::after {
                content: "Sea Creatures";
                left: -30px;
                width: 150px;
            }

/* #endregion   ### H E A D E R   I C O N S */

/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */

/* #region      ### S E A R C H   C O N T A I N E R */

    .ac-search-container {
        z-index: 9999;
        position: relative;
        display: flex;
        flex-flow: row nowrap;
        align-items: flex-start;
        justify-content: space-between;

        margin: 0px auto;
        padding: 15px;
        text-align: left;
        width: 87%;
        color: #8D7D67;

        transform: translateY(40px);
    }

        .ac-search-container select {
            padding: 10px;
        }

            .ac-search-container select option {
                border-radius: 0;
            }

        .ac-search-container.open {
            left: 0px;
        }

        .ac-search-section {
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-between;
            width: 90%;
            margin: auto;
            transform: translateY(30px);
        }

            .ac-search-section > div {
                padding: 15px;
            }

            .ac-search-section > div:last-of-type {
                flex-grow: 2;
                display: flex;
                justify-content: flex-end;
                flex-flow: row wrap;
            }

    .ac-tab {
        position: absolute;
        top: -25px;
        left: 5px;
        margin: 0px;
        padding: 3px 15px;
        color: #8D7D67;
        font-weight: 600;
        /*background-color: #8D7D67;*/
        transform: translateY(-8px);
        font-size: 1.2em;
    }

    .ac-search-month {
        display: block;
        margin: 0 0 10px 7px;
        font-size: 1.2em;
        font-weight: bold;
    }

    .ac-search-textbox {
        margin: 5px;
        padding: 10px;
        width: 88%;
        color: var(--brown);
    }

    .ac-search-monthDDL {
        margin: 5px;
    }

        .ac-search-monthDDL:hover {
            cursor: pointer;
        }

    .ac-search-checkbox {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: space-between;

        margin: 7px 10px 10px 10px;
        width: 200px;
        font-weight: 600;

        background-color: #685C4D;
        border: 1px #685C4D solid;
        border-radius: 5px;
        overflow: hidden;
    }

        .ac-search-checkbox:hover {
            background-color: #8D7D67;
        }

        .ac-search-checkbox:hover label {
            background-color: #F9CE68;
            color: #685C4D;
        }

        .ac-search-checked {
            background-color: #8D7D67 !important;
        }

            .ac-search-checked:hover label {
                background-color: #F7E1AD !important;
            }

            .ac-search-checked label {
                background-color: #F9CE68 !important;
                color: #685C4D !important;
            }

        .ac-search-checkbox > input[type="checkbox"] {
            flex-grow: 1;
            width: 20px;
            height: 20px;
        }

        .ac-search-checkbox > label {
            width: 75%;
            background-color: #8D7D67;
            color: #FFF;
            padding: 5px 10px;
        }

            .ac-search-checkbox > label:hover {
                cursor: pointer;
            }

/* #endregion   ### S E A R C H   C O N T A I N E R */

/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */

/* #region      ### I T E M S */

    /* @@@ The whole item's container. */
    .ac-item {
        position: relative;
        z-index: 9500;
        margin: 5px;
        vertical-align: top;
        display: inline-block;
        width: 250px;
        border: 1px #222 solid;
        background-color: #FFF;
        box-shadow: var(--box-shadow2);
        height: 90px;
        overflow: hidden;
        border-radius: 3px;
        color: #8D7D67;
        font-weight: bold;
    }

        .ac-item:hover {
            transform: translateY(-3px);
            cursor: pointer;
        }

        .ac-item:active {
            transform: translateY(-3px) scale(0.95);
        }

        .ac-item.open {
            height: 305px;
        }

        .ac-item span:not(.name):not(.months) {

        }

        .ac-item span:not(.current-month):not(.animals) {
            display: block;
            position: relative;
            padding: 8px 3px;
            width: 98%;
            text-align: center;
            border-bottom: 1px #8D7D67 solid;
        }

    .donation-item {
        border-bottom: 1px #8D7D67 solid !important;
        box-shadow: var(--box-shadow2) !important;
    }

    /* @@@ Checkbox on the right of the item. */
    .ac-item-checkbox {
        display: block;
        position: absolute;
        top: 6px;
        right: 7px;
        width: 30px;
        height: 30px;
    }

    .name,
    .months {
        background-color: #F8FAE2;
        color: #8D7D67;
        font-weight: 600;
    }

    .name {
        box-shadow: var(--box-shadow2);
    }

    /* @@@ Blinking dot for creatures that are currently findable. */
    .ac-live {
        position: relative;
    }

        .ac-live::after {
            content: "•";
            position: absolute;
            left: 9px;
            top: 8px;
            font-size: 3.5em;
            color: red;
            animation: pulsate 3s infinite linear;
        }

    .price {
        background-image: url('../Images/Bells.png');
        background-position: 4% 50%;
        background-repeat: no-repeat;
    }

    .location {
        /* @@@ No special styling needed. */
    }

    .time,
    .months {
        height: 50px;
    }

    .time {

    }

    .months {
        padding-top: 6px !important;
        box-shadow: var(--box-shadow3);
        font-size: 0.9em;
        line-height: 20px;
    }

    .ac-item .donated, 
    .ac-item .missing {
        color: #FFF;
    }

    .ac-item .donated {
        background-color: var(--green);
        color: var(--yellow);
    }

        .ac-item:hover .donated {
            background-color: var(--light-green);
        }

        .donated .animals,
        .missing .animals {
            display: inline-block;
            width: 25px;
            height: 15px;
            line-height: 15px;
            border-radius: 20px;
            background-color: rgba(0, 0, 0, 0.5);
            position: relative;
            text-align: center;
            padding: 8px 4px 8px 3px;
        }

    .ac-item .missing .animals {

    }

    .ac-item .donated::before {
        position: absolute;
        content: "★";
        left: 10px;
        top: 10px;
        font-size: 16pt;
    }

    .ac-item .missing {
        background-color: var(--red);
    }

        .ac-item:hover .missing {
            transition: 0.2s;
            background-color: var(--light-red);
        }

        .ac-item .missing::before {
            position: absolute;
            content: "x";
            left: 14px;
            top: 8px;
            font-size: 16pt;
        }

    .current-month {
        display: inline-block !important;
        margin: 0 2px;
        font-weight: bold;
        color: #FFF;
        background-color: #8D7D67;
        padding: 3px 8px;
        border-radius: 3px;
        
    }

/* #endregion   ### I T E M S */

/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */

/* #region      ### S E L E C T   A L L   O P T I O N */

    .select-all-container {
        display: flex;
        justify-content: left;
        align-items: center;
        width: 90%;
        margin: 0 auto 10px auto;
    }

        .select-all-container span {
            font-size: 1.5em;
        }

    .cbSelectAll {

    }

/* #endregion   ### S E L E C T   A L L   O P T I O N */

/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */

/* #region      ### M I S C */

.selected-month-container {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;

    margin: 10px auto;
    padding: 15px;
    font-size: 1.2em;
    line-height: 34px;
    width: 85%;
    font-weight: 600;

    transform: translateY(-40px);
}

    .selected-month-container > span {
        background-color: #F8FAE2;
        color: #8D7D67;
        border: 2px #8D7D67 solid;
        box-shadow: var(--box-shadow1);
        border-radius: 5px;
        overflow: hidden;
        margin: 0 10px;
    }

    .selected-month-container > span > span {
        display: block;
    }

    .selected-month-container span > span:first-of-type {
        background-color: #F9CE68;
        color: #222;
        padding: 5px 15px;
        border-bottom: 2px #8D7D67 solid;
        box-shadow: var(--box-shadow2);
    }

    .selected-month-container span > span:last-of-type {
        padding: 10px 20px;
        font-size: 1.5em;
    }

.selected-month,
.current-time {
    text-decoration: none !important;
}


/* #endregion   ### M I S C */

/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */