/*--   FRAME   --*/

#frame {
    position:                           absolute;
    max-height:                         -webkit-fill-available;
    height:                             100vh;
    width:                              100%;
    top:                                0;
    bottom:                             0;
    overflow-y:                         hidden;
    display:                            grid;
    grid-template-columns:              minmax(20%, 1fr) minmax(400px, 720px) minmax(20%, 1fr);
    grid-template-rows:                 auto auto 1fr;
    grid-template-areas:                "top top top"
                                        ". notice ."
                                        "app app app";
}

#top {
    grid-area:                          top;
    width:                              100%;
}

#app {
    display:                            grid;
    grid-area:                          app;
    grid-template-columns:              minmax(20%, 1fr) minmax(400px, 720px) minmax(20%, 1fr);
    grid-template-rows:                 1fr;
    grid-template-areas:                ". content .";
    overflow-y:                         scroll;
}

#app::-webkit-scrollbar {
    display:                            none;
}

#content,
#menu {
    grid-area:                          content;
}

.block {
    margin:                             0 40px;
}





/*--   OBJECTS : TEXT   --*/

.separator {
    height:                             1px;
    width:                              100%;
    background:                         #4C1D08;
}

.title {
    font-size:                          20px;
    font-weight:                        670;
}

.subtitle {
    font-size:                          16px;
    font-weight:                        670;
}

.undertitle {
    color:                              #4C1D0844;
}

p {
    line-height:                        22px;
}

p.message {
    line-height:                        26px;
    text-align:                         center;
}

.tag {
    height:                             26px;
    width:                              fit-content;
    border-radius:                      8px;
    padding:                            7px 12px 0;
    font-size:                          10px;
    font-weight:                        570;
    text-transform:                     uppercase;
    color:                              white;
}





/*--   OBJECTS : LIST   --*/

.list .button-add {
    display:                            grid;
    grid-auto-flow:                     column;
    grid-template-columns:              auto auto 1fr;
    align-items:                        center;
    width:                              100%;
    height:                             unset;
    padding:                            48px 32px;
    font-size:                          14px;
    border-radius:                      0;
}

.list .button-add:hover {
    background:                         #1F1F1F;
}

.list .button-add img {
    width:                              20px;
    height:                             20px;
    margin-right:                       32px;
}

.list .button-add .value {
    font-size:                          12px;
    font-weight:                        570;
    border-radius:                      10px;
    text-transform:                     uppercase;
}

.list .button-add .count {
    margin-left:                        auto;
    color:                              #00FF4E;
}





/*--   HEADER   --*/

#header {
    display:                            flex;
    position:                           fixed;
    width:                              100%;
    height:                             108px;
    align-items:                        center;
    padding:                            0 40px;
    pointer-events:                     none;
}

#header > * {
    pointer-events:                     auto;
}

#header .button-icon.first,
#header .button.first {
    margin-left:                        auto;
}

#header .logo {
    max-height:                         64px;
    max-width:                          160px;
    object-fit:                         contain;
}

#header #logo-menu {
    display:                            none;
}

#notice {
    grid-area:                          notice;
    display:                            flex;
    align-items:                        center;
    width:                              100%;
    height:                             fit-content;
    padding:                            16px 32px;
    font-size:                          13px;
    font-weight:                        570;
    line-height:                        20px;
    z-index:                            200;
    color:                              white;
}

#notice.positive {
    background:                         #4558C8;
}

#notice.negative {
    background:                         #A83232;
}

#notice.neutral {
    background:                         #4558C8;
}





/*--   MENU   --*/

#menu {
    display:                            none;
    margin-top:                         156px;
    border-top:                         1px solid #4C1D08;
}

#menu .menu-button {
    display:                            grid;
    width:                              100%;
    height:                             unset;
    padding:                            48px 32px;
    font-size:                          14px;
    border-radius:                      0;
    border-bottom:                      1px #4C1D08 solid;
    color:                              #FF6417
}

#menu .menu-button:hover {
    background:                         #4C1D08;
}

#logo-menu {
    height:                             22px;
    margin-bottom:                      4px;
}

#menu #dropdown-language .icon {
    width:                              24px;
    margin-right:                       8px;
}

#menu #dropdown-language {
    position:                           absolute;
    bottom:                             64px;
    right:                              40px;
    margin-left:                        12px;
}

#menu #dropdown-language .options {
    margin-left:                        12px;
}





/*--   PRO   --*/

.pro {
    width:                              40px;
    height:                             20px;
    padding:                            3px 0;
    font-size:                          11px;
    font-weight:                        790;
    text-align:                         center;
    text-transform:                     uppercase;
    border-radius:                      10px;
    background:                         #DFF37D;
    color:                              #1D1E10;
}





/*--   QUERIES   --*/

@media only screen and (max-width: 720px) {

    #frame {
        grid-template-columns:          1fr;
        grid-template-rows:             auto auto 1fr;
        grid-template-areas:            "top"
                                        "notice"
                                        "app";
    }

    #app {
        grid-template-columns:          1fr;
        grid-template-areas:            "content";
    }

    .block {
        margin:                         0 32px;
    }

    #header {
        position:                       unset;
        height:                         88px;
        padding:                        0 32px;
    }

    #header.bordered {
        border-bottom:                  1px #3D3D3D solid;
    }

    #menu {
        margin-top:                     0;
        border:                         none;
    }

    #menu #dropdown-language {
        bottom:                         48px;
        right:                          32px;
    }
}