html, body {
    position: relative;
    padding: 0;
    margin: 0;
    min-width: 1250px;
    color: #e2d3b7;
    font-family: Tahoma, Verdana, Segoe, sans-serif;
    font-size: 12px;
}

html {
    height: 100%;
}

body {
    min-height: 100%;
    background: url(images/shadow-left.png) 0 0 repeat-y, url(images/shadow-right.png) right 0 repeat-y, #2b2721 url(images/bg.webp) repeat-x center top;
}

a {
    color: #feeec8;
}

a:hover {
    color: #FFF;
}

.button-effects {
    transition: filter 150ms;
}

.button-effects:hover {
    filter: saturate(1.1) brightness(1.1);
}

.button-effects:active {
    filter: saturate(1.0) brightness(0.9);
}

#logo {
    display: block;
    background: url(images/logo.png);
    width: 523px;
    height: 345px;
    margin: 18px 0 -20px;
}

#header {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#navbar {
    background: url(images/navbar.png);
    width: 761px;
    height: 137px;
    display: flex;
    align-items: stretch;
    box-sizing: border-box;
    justify-content: stretch;
    padding: 43px 79px 30px;
}

#navbar a {
    flex: auto 1 1;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 43px;
    text-decoration: none;
    box-sizing: border-box;
    padding: 0 0 5px;
}

#navbar a:hover {
    filter: brightness(1.2) saturate(1.1);
}

#navbar a:active {
    filter: brightness(0.6);
}

#navbar a span {
    font-family: 'Roboto Slab', serif;
    position: relative;
    font-weight: 500;
    font-size: 0.942rem;
    letter-spacing: -0.015rem;
    text-transform: uppercase;
    text-shadow: none;

    background-image: linear-gradient(
        rgb(255, 255, 228) 0%, rgb(255, 255, 228) 44.6154%, rgb(255, 255, 220) 44.6254%, rgb(255, 255, 220) 46.9231%,
        rgb(255, 249, 206) 46.9331%, rgb(255, 249, 206) 49.2308%, rgb(255, 229, 188) 49.2408%, rgb(255, 229, 188) 51.5385%,
        rgb(244, 211, 168) 51.5485%, rgb(244, 211, 168) 53.8462%, rgb(226, 192, 153) 53.8562%, rgb(226, 192, 153) 56.1538%,
        rgb(205, 173, 135) 56.1638%, rgb(205, 173, 135) 58.4615%, rgb(185, 154, 116) 58.4715%, rgb(185, 154, 116) 100%
    );
    filter: drop-shadow(0 0 2px #000) drop-shadow(0 0 2px #000);

    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

.nav-separator {
    background: url(images/nav-separator.png);
    width: 2px;
    height: 68px;
    flex-shrink: 0;
    margin: -3px 0 0;
}

#page {
    display: flex;
    align-items: center;
    flex-direction: column;
    overflow-x: hidden;
}

#main {
    display: flex;
    justify-content: center;
}


.panel-content-top {
    height: 322px;
}

.panel-header, .content-header {
    height: 64px;
    text-align: center;
    line-height: 53px;

    font-family: 'Roboto Slab', serif;
    font-weight: bold;
    font-size: 1.10rem;
    letter-spacing: 0.07rem;
    text-transform: uppercase;

    background: linear-gradient(
        rgb(255, 240, 198) 0%, rgb(255, 240, 198) 35.1628%, rgb(225, 194, 157) 35.1728%, rgb(225, 194, 157) 36.7442%,
        rgb(210, 181, 146) 36.7542%, rgb(210, 181, 146) 38.3256%, rgb(216, 184, 149) 38.3356%, rgb(216, 184, 149) 39.907%,
        rgb(209, 176, 138) 39.917%, rgb(209, 176, 138) 41.4884%, rgb(193, 160, 123) 41.4984%, rgb(193, 160, 123) 43.0698%,
        rgb(164, 134, 100) 43.0798%, rgb(164, 134, 100) 44.6512%, rgb(140, 114, 90) 44.6612%, rgb(140, 114, 90) 46.2326%,
        rgb(159, 127, 97) 46.2426%, rgb(159, 127, 97) 47.814%, rgb(95, 76, 58) 47.824%, rgb(95, 76, 58) 100%
    );
    filter: drop-shadow(0 0 1px #000) drop-shadow(0 0 1px #000) drop-shadow(0 0 1px #000);

    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

.panel-header {
    margin: 15px 0 0;
}

#content-container {
    display: flex;
    justify-content: center;
}

.panel {
    position: relative;
    background: url(images/panels.png);
    width: 317px;
    height: 857px;
    z-index: 2;
    margin: -32px 0 0;
}

#content-wrapper, #g-limited-offer {
    position: relative;
    background: url(images/content-top.png) 0 0 no-repeat;
    width: 711px;
    margin: -17px -74px 0;
    z-index: 1;
}

#content-wrapper::before {
    content: '';
    z-index: 1;
    background: url(images/content-repeat.png) 0 0;
    position: absolute;
    top: 401px;
    bottom: 147px;
    left: 0;
    right: 0;
}

#content-wrapper::after, #g-limited-offer::after {
    content: '';
    z-index: 2;
    background: url(images/content-bottom.png);
    position: absolute;
    height: 186px;
    bottom: 0;
    left: 0;
    right: 0;
}

#content {
    position: relative;
    z-index: 3;
    min-height: 982px;
    padding: 0 76px 48px;
}

#panel-left {

}

#panel-right {

}

#footer {
    content: '';
    height: 173px;
}

.button, button, .download-button {
    position: relative;
    display: inline-block;
    height: 42px;
    line-height: 43px;
    box-sizing: border-box;
    text-align: center;
    white-space: nowrap;
    font-size: 0.942rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 32px;
    user-select: none;
    margin: -1px 0;
}

.button span, button span, .download-button span {
    font-family: 'Roboto Slab', serif;
    position: relative;
    font-weight: 500;
    letter-spacing: -0.015rem;
    text-transform: uppercase;
    text-shadow: none;
    z-index: 3;

    background-image: linear-gradient(
        rgb(255, 255, 228) 0%, rgb(255, 255, 228) 34.1667%, rgb(255, 255, 220) 34.1767%, rgb(255, 255, 220) 40.75%,
        rgb(255, 249, 206) 40.76%, rgb(255, 249, 206) 47.3333%, rgb(255, 229, 188) 47.3433%, rgb(255, 229, 188) 53.9167%,
        rgb(244, 211, 168) 53.9267%, rgb(244, 211, 168) 60.5%, rgb(226, 192, 153) 60.51%, rgb(226, 192, 153) 67.0833%,
        rgb(205, 173, 135) 67.0933%, rgb(205, 173, 135) 73.6667%, rgb(185, 154, 116) 73.6767%, rgb(185, 154, 116) 100%
    );
    filter: drop-shadow(0 0 2px #000) drop-shadow(0 0 2px #000);

    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

a.button {
    text-decoration: none;
}

.button::before, button::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 22px;
    right: 22px;
    z-index: 1;
    background: url(images/button-repeat.png) 0 0;
}

.button::after, button::after {
    content: '';
    z-index: 2;
    position: absolute;
    background: url(images/button-terminators.png) 0 0 no-repeat, url(images/button-terminators.png) right -43px no-repeat;
    top: 0;
    left: 0;
    right: 0;
    height: 42px;
}

.button:hover, button:hover, .download-button:hover {
    filter: brightness(1.2) saturate(1.1);
}

.button:active, button:active, .button.active, button.active, .download-button:active {
    filter: brightness(0.6);
}

input[type=text], input[type=password], input[type=email], select {
    box-sizing: border-box;
    color: #a3998a;
    height: 38px;
    border-style: solid;
    border-image-slice: 19 20 19 20;
    border-image-width: 19px 20px 19px 20px;
    border-image-outset: 0px 0px 0px 0px;
    border-image-repeat: round stretch;
    border-image-source: url(images/input.png);
    background: transparent;
    padding: 0 16px;
}

select {
    -webkit-appearance: none;
    appearance: none !important;
    padding-right: 30px;
    border-image-source: url(images/select.png);
}

option {
    background: #201d19;
}

textarea {
    color: #a3998a;/*
    border: 1px solid #4c3e2e;*/
    padding: 11px 16px;/*
    background: #201d19;*/
    box-sizing: border-box;/*
    box-shadow: inset 0 0 0 1px #564837, 0 0 6px #000;*/

    border-style: solid;
    border-image-slice: 17 20 17 20 fill;
    border-image-width: 17px 20px 17px 20px;
    border-image-outset: 0px 0px 0px 0px;
    border-image-repeat: round stretch;
    border-image-source: url(images/input.png);
    background: transparent;
}

.callendar-month, .callendar-event-title {
    background: url(images/text-bg.png) center center no-repeat;
    min-width: 167px;
    height: 39px;
    text-align: center;
    margin: -13px 0 -7px;
}

.callendar-month span, .callendar-event-title span {
    font-family: 'Roboto Slab', serif;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.98rem;
    line-height: 36px;

    background: linear-gradient(
            rgb(238, 211, 176) 0%, rgb(238, 211, 176) 38.7143%, rgb(223, 194, 162) 38.7243%, rgb(223, 194, 162) 41.0714%,
            rgb(209, 179, 145) 41.0814%, rgb(209, 179, 145) 43.4286%, rgb(194, 165, 131) 43.4386%, rgb(194, 165, 131) 45.7857%,
            rgb(182, 153, 118) 45.7957%, rgb(182, 153, 118) 48.1429%, rgb(168, 139, 106) 48.1529%, rgb(168, 139, 106) 50.5%,
            rgb(159, 129, 97) 50.51%, rgb(159, 129, 97) 52.8571%, rgb(150, 118, 90) 52.8671%, rgb(150, 118, 90) 100%
    );
    filter: drop-shadow(0 0 1px #000) drop-shadow(0 0 1px #000) drop-shadow(0 0 1px #000);

    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

.callendar-container {
    display: flex;
    flex-wrap: wrap;
    width: 234px;
    justify-content: flex-end;
    margin: 0 auto;
}

.callendar-cell {
    position: relative;
    text-align: center;
    line-height: 30px;
    background: url(images/callendar-cell.png) 0 0;
    width: 30px;
    height: 30px;
    margin: 3px 3px 0 0;
    cursor: default;
}

.callendar-cell.special {
    background-position-x: -31px;
}

.callendar-event-description {
    position: absolute;
    width: 237px;
    padding: 1px 10px 10px;
    border: 1px solid #62432e;
    line-height: normal;
    background: url(images/content-repeat.png) center center repeat-y;
    display: none;
    transform: translateY(-50%);
    text-align: justify;
    z-index: 10;
    top: 15px;
    left: 30px;
    box-shadow: 0 0 5px 3px #000, inset 0 0 0 1px #383222, inset 0 0 0 2px #c5aa82, inset 0 0 0 3px #84724e, inset 0 0 0 4px #bcb383;
    border-radius: 4px;
}

.callendar-cell:hover {
    z-index: 2;
}

.callendar-cell:hover .callendar-event-description {
    display: block;
}

.callendar-text-outer {
    color: #666;
}

.callendar-event-title {
    margin: 0 0 -9px;
    filter: brightness(1.3);
}

.front-link {
    display: block;
    background: url(images/text-bg.png) center center no-repeat;
    background-size: 100% 100%;
    min-width: 167px;
    height: 39px;
    text-decoration: none;
    text-align: center;
    margin: 0 auto;
    width: 240px;
}

.front-link:hover {
    filter: brightness(1.2) saturate(1.1);
}

.front-link:active {
    filter: brightness(0.6);
}

.front-link span {
    font-family: 'Roboto Slab', serif;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.97rem;
    line-height: 36px;
    letter-spacing: 0.01rem;

    background: linear-gradient(
        rgb(238, 211, 176) 0%, rgb(238, 211, 176) 35.8333%, rgb(223, 194, 162) 35.8433%, rgb(223, 194, 162) 42.25%,
        rgb(209, 179, 148) 42.26%, rgb(209, 179, 148) 48.6667%, rgb(194, 167, 133) 48.6767%, rgb(194, 167, 133) 55.0833%,
        rgb(179, 153, 118) 55.0933%, rgb(179, 153, 118) 61.5%, rgb(167, 139, 106) 61.51%, rgb(167, 139, 106) 67.9167%,
        rgb(156, 127, 97) 67.9267%, rgb(156, 127, 97) 74.3333%, rgb(150, 118, 90) 74.3433%, rgb(150, 118, 90) 100%
    );
    filter: drop-shadow(0 0 1px #000) drop-shadow(0 0 1px #000) drop-shadow(0 0 1px #000);

    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

.front-link-callendar {
    margin: 3px auto 0;
}

.front-link-forgotpassword {
    margin: 0 auto -17px;
}

.front-link-ranking {
    margin: 2px auto 0;
}

.form-links {
    margin: 41px 0 0;
}

#login-form {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin: -4px 0 0;
}

#login_input, #password_input {
    box-sizing: border-box;
    color: #a3998a;
    height: 38px;
    border-style: solid;
    border-image-slice: 19 20 19 49;
    border-image-width: 19px 20px 19px 49px;
    border-image-outset: 0px 0px 0px 0px;
    border-image-repeat: round stretch;
    padding: 0 16px 0 45px;
    width: 226px;
}

#login_input {
    border-image-source: url(images/panel-input-login.png);
}

#password_input {
    border-image-source: url(images/panel-input-password.png);
}

.label-password, .label-login {
    text-align: center;
}

.label-password span, .label-login span {
    font-family: 'Roboto Slab', serif;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.97rem;
    letter-spacing: 0.01rem;

    background: linear-gradient(
        rgb(255, 238, 203) 0%, rgb(255, 238, 203) 35.8333%, rgb(253, 226, 192) 35.8433%, rgb(253, 226, 192) 42.25%,
        rgb(228, 200, 167) 42.26%, rgb(228, 200, 167) 48.6667%, rgb(220, 190, 156) 48.6767%, rgb(220, 190, 156) 55.0833%,
        rgb(200, 171, 139) 55.0933%, rgb(200, 171, 139) 61.5%, rgb(179, 150, 116) 61.51%, rgb(179, 150, 116) 67.9167%,
        rgb(168, 138, 104) 67.9267%, rgb(168, 138, 104) 74.3333%, rgb(154, 125, 94) 74.3433%, rgb(154, 125, 94) 100%
    );
    filter: drop-shadow(0 0 1px #000) drop-shadow(0 0 1px #000) drop-shadow(0 0 1px #000);

    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

.session-button, .download-button {
    background: url(images/session-button.png) 0 0;
    width: 135px;
    height: 44px;
    margin: 7px auto 0;
}

.session-button::after, .session-button::before {
    display: none;
}

.ranking-container {
    width: 211px;
    height: 369px;
    margin: 0 auto;
}

.ranking-row {
    position: relative;
    display: flex;
    height: 36px;
    line-height: 36px;
    margin: 0 0 1px;
}

.ranking-place {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
}

.ranking-name {
    flex: auto 1 1;
    text-align: center;
    white-space: nowrap;
    padding: 0 0 0 25px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ranking-name a {
    text-decoration: none;
}

.ranking-value {
    width: 50px;
    flex-shrink: 0;
    text-align: right;
}

.ranking-text-gradient {
    font-family: 'Roboto Slab', serif;
    font-weight: 600;
    font-size: 1.07rem;

    background: linear-gradient(
        rgb(255, 240, 205) 0%, rgb(255, 240, 205) 28.0769%, rgb(255, 234, 198) 28.0869%, rgb(255, 234, 198) 34.6154%,
        rgb(249, 220, 185) 34.6254%, rgb(249, 220, 185) 41.1538%, rgb(234, 206, 170) 41.1638%, rgb(234, 206, 170) 47.6923%,
        rgb(228, 196, 162) 47.7023%, rgb(228, 196, 162) 54.2308%, rgb(217, 188, 150) 54.2408%, rgb(217, 188, 150) 60.7692%,
        rgb(209, 176, 139) 60.7792%, rgb(209, 176, 139) 67.3077%, rgb(200, 165, 127) 67.3177%, rgb(200, 165, 127) 73.8462%,
        rgb(192, 156, 116) 73.8562%, rgb(192, 156, 116) 80.3846%, rgb(185, 150, 110) 80.3946%, rgb(185, 150, 110) 100%
    );
    filter: drop-shadow(0 0 0 #000) drop-shadow(0 0 0 #000) drop-shadow(0 0 0 #000) drop-shadow(0 0 0 #000) drop-shadow(0 0 2px #000);

    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

.ranking-name a:hover {
    filter: brightness(1.2) saturate(1.1);
}

.ranking-name a:active {
    filter: brightness(0.6);
}

.footer-nav {
    background: url(images/footer-bg.png) center 0 no-repeat;
    height: 45px;
    min-width: 622px;
    text-align: center;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.032rem;
    padding: 14px 0 0;
    box-sizing: border-box;
    margin: -6px 0 0;
}

.footer-nav a {
    text-decoration: none;
}

.footer-nav span {
    background: linear-gradient(
        rgb(255, 240, 205) 0%, rgb(255, 240, 205) 28.0769%, rgb(255, 234, 198) 28.0869%, rgb(255, 234, 198) 34.6154%,
        rgb(249, 220, 185) 34.6254%, rgb(249, 220, 185) 41.1538%, rgb(234, 206, 170) 41.1638%, rgb(234, 206, 170) 47.6923%,
        rgb(228, 196, 162) 47.7023%, rgb(228, 196, 162) 54.2308%, rgb(217, 188, 150) 54.2408%, rgb(217, 188, 150) 60.7692%,
        rgb(209, 176, 139) 60.7792%, rgb(209, 176, 139) 67.3077%, rgb(200, 165, 127) 67.3177%, rgb(200, 165, 127) 73.8462%,
        rgb(192, 156, 116) 73.8562%, rgb(192, 156, 116) 80.3846%, rgb(185, 150, 110) 80.3946%, rgb(185, 150, 110) 100%
    );
    filter: drop-shadow(2px 2px 1px #000);

    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

.footer-nav a:hover {
    filter: brightness(1.2) saturate(1.1);
}

.footer-nav a:active {
    filter: brightness(0.6);
}

.logout-form {
    height: 255px;
    justify-content: space-between;
}

.logout-form .button {
    width: 228px;
}