::selection
{
    /*background-color: rgba(255,0,0,0.1);*/
    background-color: #59B1F6;
    text-shadow: none;
    color: #fff;
}

::-moz-selection
{
    /*background-color: rgba(255,0,0,0.1);*/
    background-color: #59B1F6;
    text-shadow: none;
    color: #fff;
}

.scaled_in
{
    opacity: 0.0;
    -ms-transform: scale(1.2,1.2);
    -webkit-transform: scale(1.2,1.2);
    transform: scale(1.2,1.2);
}

.clicked {
    transition: transform .2s !important;
    transform: scale(.96);
}

.wallet-card .clicked {
    transition: transform .2s !important;
    transform: scale(.98);
}

#wallet_card_wrapper {
    position: fixed;
    z-index: 9999999999;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    -webkit-backdrop-filter: blur(50px);
    backdrop-filter: blur(50px);
    padding: 10px;
    padding-top: 50px;
    background-color: rgba(255, 255, 255, .5);
    display: none;
}

body.sticky-scroll-in-progress {
    scroll-behavior: smooth;
}

body.dark #wallet_card_wrapper {
    background-color: rgba(4, 0, 42, 0.7);
}

body.android #wallet_card_wrapper {
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
}

body.showing-wallet-card #wallet_card_wrapper {
    display: block;
}

.flip
{
    /*transform: rotate(90deg);*/
    transform: scale(1.5);
    /*font-size: 30px !important;*/
    /*margin-top: -5px;*/
}

.rotate
{
    animation-name: spin;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-play-state: running;

    -webkit-animation-name: spin;
    -webkit-animation-duration: 2s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 0s;
    -webkit-animation-iteratchild-category-titleion-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-play-state: running;
}

@-ms-keyframes spin { from { -ms-transform: rotate(0deg); } to { -ms-transform: rotate(360deg); }}
@-moz-keyframes spin { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); }}
@-webkit-keyframes spin { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); }}
@keyframes spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); }}

/*///////////////////////////////////////////////////////////////////////////////*/


@font-face {
 font-family: Playball-Regular;
 src: url("../font/Playball-Regular.ttf");
}

html, 
body {
    width: 100vw;
    height: 100vh;
    /* height: 100dvh; */
}

body
{
    /*padding-top: 30px;*/
    padding-bottom: 0px;
    background-color: #fff;
    /*background-color: #3284ff;*/
    -webkit-font-smoothing: subpixel-antialiased;

    font-weight: 300;
}

body.showing-modal {
    /* position: fixed !important; */
}

a,
a:hover,
a:active,
a:visited
{
    color: #3284ff;
    outline: 0;
}

a:hover
{
    text-decoration: underline;
}

.btn-danger
{
    color: #fff;
    background-color: #c9302c;
    border-color: #ac2925;
}

.btn-danger:hover, .btn-danger:focus, .btn-danger.focus, .btn-danger:active, .btn-danger.active, .open > .dropdown-toggle.btn-danger
{
    color: #fff;
    background-color: #d9534f;
    border-color: #d43f3a;
}

.alert-dismissable .close,
.alert-dismissible .close
{
    top: -4px;
}

h1
{
    font-size: 22px;
    font-weight: bold;
}

h2, h3, h4
{
    font-size: 17px;
    font-weight: 300;
}

.form-control
{
    font-size: 1.0em;
    border: 1px solid #d0d0d0;
    box-shadow: none;
}

.form-control:focus
{
    border-color: #3283ff;
    outline: none !important;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 0px 4px rgba(50, 131, 255, .2) !important;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 0px 4px rgba(50, 131, 255, .2) !important;
}

.sidebar
{
    padding-top: 0px;
    padding-bottom: 50px;
    border-right: 1px solid #ccc;
    /*background-image: url("/bundles/appcore/images/logo.jpg");
    background-repeat: no-repeat;
    background-position: 26px 13px;
    background-size: 38px;*/
}

.categories
{
    margin-bottom: 20px;
    padding-left: 0px;
    list-style: none;
    margin-top: 20px;
}

.categories > li > a
{
    padding-right: 10px;
    padding-left: 10px;
    border-radius: 4px;
    border: 1px solid transparent;
    display: block;
    line-height: 2.0em;
    font-size: 1.2em;
}

.categories > .active > a
{
    color: #000;
    background-color: #fafafa;
    border: 1px solid #ccc;
    text-decoration: none;
}

.main .page-header
{
    margin-top: 0;
}

.placeholders
{
    margin-bottom: 30px;
    text-align: center;
}

.placeholders h4
{
    margin-bottom: 0;
}

.placeholder
{
    margin-bottom: 20px;
}

.placeholder img
{
    display: inline-block;
    border-radius: 50%;
}

.header-menu-left
{
    border-right: 1px solid #d8d8d8;
}

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

.header-menu-column
{
    position: relative;
    height: 89px;
}

@media (max-width: 767px)
{
    .header-menu-column
    {
        height: auto;
    }
}

#header-menu-search
{
    border-radius: 100px;
    margin-top: 26px;
}

#main-logo
{
    margin-top: 22px;
    float: right;
}

#menu_button {
    position: absolute;
    top: 50px;
    right: 0px;
    font-size: 20px;
    color: #000;
    /* border: 1px solid red; */
    height: 80px;
    width: 80px;
    text-align: center;
    padding-top: 30px;
}

body.dark #menu_button,
body.dark #prevPage {
    color: #fff;
}

#toggleMenu,
#toggleMenu:hover,
#toggleMenu:visited
{
    position: absolute;
    right: 0px;
    top: 10px;
    font-size: 20px;
    padding: 40px;
    color: #000;
    cursor: pointer;
    text-decoration: none;
}

#toggleMenu:active,
#content.menu-visible #toggleMenu
{
    /*color: #3284ff;*/
}

#prevPage,
#prevPage:hover,
#prevPage:visited
{
    position: absolute;
    left: 0px;
    top: 50px;
    font-size: 30px;
    padding: 44px 30px 14px 15px;
    color: #000 !important;
    cursor: pointer;
    text-decoration: none;
    display: none;
}

#prevPage:active
{
    color: #3284ff;
}
#content.menu-visible #categories
{
    display: block !important;
    min-height: 1000px;
    margin-top: 8px;
}

#content.menu-visible #content-container
{
    display: none !important;
}

body > .container-fluid
{
    /*max-width: 1300px;*/
}

#header-border
{
    position: relative;
    /*border: 1px solid #d0d0d0;*/
    border-bottom: none;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    padding: 12px 15px 8px 15px;
    color: #000;
    font-size: 0.84em;
}

#header {
    border-bottom: 1px solid #ccc;
    padding: 15px;
}

#header .logo {
    margin-top: -7px !important;
    display: inline-block !important;
}

#footer-border
{
    position: relative;
    border-top: 1px solid #ccc;
    /* border-top: none; */
    /* border-bottom-left-radius: 3px; */
    /* border-bottom-right-radius: 3px; */
    padding: 40px 45px 50px 45px;
    color: #888;
    font-size: 0.84em;
    min-height: 55px;
    max-width: 1440px;
}

.star-link a {
    text-decoration: none !important;
    display: inline-block;
    vertical-align: text-top;
    font-weight: 800 !important;
}

.star-link a:nth-child(1) {
    display: inline-block;
    font-size: 12px;
}

.star-link a:nth-child(2) {
    display: none;
    margin-top: -2px;
    margin-left: -1px;
    font-size: 14px;
}

.star-link:hover a:nth-child(1) {
    display: none;

}

.star-link:hover a:nth-child(2) {
    display: inline-block;
}

.logo
{
    position: relative;
    display: block;
    /*background-image: url('/bundles/appcore/images/logo.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    width: 150px;
    height: 150px;*/
    margin: auto;
    /*margin-top: 60px;*/
    /*margin-bottom: 60px;*/
    text-align: center;
    font-size: 38px;
}

#content.menu-visible .logo
{
    z-index: -1;
    height: 38px;
}

#categories li[data-category] {
    -webkit-transition: all .4s;
    -moz-transition: all .4s;
    transition: all .4s;
    opacity: 1.0;
}

#content.menu-visible #categories li[data-category] {
    max-width: 400px;
    margin: auto;
    font-size: 16px;
    text-align: center;
}

.before-menu-visible {
    transform: translateY(-50px) scale(1.5);
    opacity: 0.0 !important;
}

#content.menu-visible #form_search:not(:focus) {
    border: 1px solid #bbb;
}

#content.menu-visible .categories > .active > a {
     border: none;
}

.logo_mini
{
    display: inline-block;
    background-image: url('/bundles/appcore/images/logo_gray.png');
    background-repeat: no-repeat;
    background-size: contain;
    width: 41px;
    height: 41px;
}

#footer-border .logo_mini
{
    position: absolute;
    right: 0px;
    bottom: 0px;
}

#header-user-corner
{
    display: inline-block;
    float: right;
    margin-top: 10px;
    margin-right: 15px;
}

#content-container #header-user-corner {
    display: none;
}

#header-user-corner a,
#header-user-corner a:hover,
#header-user-corner a:active,
#header-user-corner a:visited
{
    color: #000;;
}

#footer
{
    font-weight: bold;
}

#footer .footer-categories
{
    list-style: outside none none;
    margin: 0px !important;
    padding: 0px !important;
    -webkit-column-count: 9;
    -moz-column-count: 9;
    column-count: 9;
}

#footer .footer-categories.bottom
{
    margin-top: 70px !important;
}

#footer_kategorije {
    display: none;
}

#footer a,
#footer a.hover,
#footer a.active,
#footer a.visited
{
    color: #000;
    font-weight: 100;
}

.semi-footer
{
    margin-bottom: 20px;
    margin-top: 20px;
    text-align: center;
}

body[user-agent="o8oo"] .semi-footer {
    display: none;
}

.semi-footer a,
.semi-footer a:hover,
.semi-footer a:active,
.semi-footer a:visited {
    display: inline-block;
    color: #000;
    margin-left: 10px;
    margin-right: 10px;
}

#facebookButtons
{
    height: 20px;
}

#content-container
{
    /* min-height: 1000px; */
    padding-top: 20px;
    padding-bottom: 100px;
    padding-left: 30px;
    /* border-left: 1px solid #ccc; */
    left: -1px;
}

.relative-item
{
    position: relative;
}

.sidebar .categories a
{
    font-weight: bold;
}

.sidebar .categories a.section
{
    font-weight: 300;
    margin-left: 14px;
    font-size: 1em;
}

.sidebar .categories a.admin .menu-icon
{
    margin-right: 6px;
}

.sidebar .categories a.admin.section
{
    margin-left: 20px;
}

.link-icon
{
    margin-right: 4px;
}

.carousel
{
    overflow: hidden;
    margin-bottom: 15px;
    height: 0px;
    padding-bottom: 33.33%;

    -webkit-box-reflect: below 3px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(60%, transparent) , to(rgba(250, 250, 250, 0.2)));

    transition: all .2s;
}

.carousel:active {
    /* transform: scale(.98) !important; */
}

body.android .carousel {
    -webkit-box-reflect: unset !important;
}

.carousel.screenshots
{
    padding-bottom: 60%;
}

.carousel-inner
{
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

.carousel-inner > .item
{
    height: 100%;
    width: 100%;
}

.carousel-inner > .item .image
{
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    /* border-radius: 10px; */
}

.carousel-inner > .item .image.web {
    display: none;
}

.carousel-inner > .item .image.app {
    display: block;
}

.carousel-control.left,
.carousel-control.right
{
    color: #000;
    text-shadow: none;
    background-image: none;
    display: none;
    opacity: 1.0;
    display: none !important;
}

.carousel-control .vertical-middle
{
    position: absolute;
    height: 0px;
    padding-bottom: 1em;
    top: 38%;
    left: 0px;
    width: 100%;
}

.carousel:hover .carousel-control
{
    display: block;
    opacity: 1.0;
}

.carousel-control.left .vertical-middle
{
    text-align: left;
}

.carousel-control.right .vertical-middle
{
    text-align: right;
}

.rounded-carousel-control
{
    background-color: #fff;
    background-color: rgba(255, 255, 255, .5);
    height: 60px;
    padding-top: 17px;
    text-align: center;
    display: inline-block;
    width: 30px;
}

.carousel-control.left .rounded-carousel-control
{
    border-top-right-radius: 100px;
    border-bottom-right-radius: 100px;
}

.carousel-control.right .rounded-carousel-control
{
    border-top-left-radius: 100px;
    border-bottom-left-radius: 100px;
}

.carousel-indicators
{
    bottom: 4px !important;
    margin-bottom: 0px;
}

.carousel-indicators li
{
    border: none;
    background-color: rgba(0, 0, 0, .1);
    width: 6px;
    height: 6px;
    margin: 1px;
}

.carousel-indicators li.active
{
    border: none;
    background-color: rgba(0, 0, 0, .2);
    width: 6px;
    height: 6px;
    margin: 1px;
}

#header-title
{
    text-align: center;
    margin-top: 23px;
}

.item-wrapper
{
    display: inline-block;
    margin-left: 15px;
    margin-bottom: 30px;
    vertical-align: top;
}

.item-wrapper .item-card {
    transition: all 0.2s;
}

.item-wrapper:hover .item-card {
    z-index: 100000;
    transform: scale(1.1);
}

.item-wrapper:active .item-card {
    z-index: 100000;
    transform: scale(0.9);
}

.item-wrapper.featured.css-hover:hover .item-card {
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2), 0px 6px 20px -6px rgba(0, 0, 0, 0.6) !important;
}

.item-wrapper:active .item-card {
    transition: all 0.1s;
    transform: scale(1.0);
}

.item-wrapper.featured.css-hover:active .item-card {
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2), 0px 4px 10px -6px rgba(0, 0, 0, 0.6) !important;
}

.details-heading .item-wrapper:hover .item-card {
    transform: scale(1.0);
}

.item-wrapper:not(:first-of-type)
{
    margin-left: 12px;
}

body[data-url="/admin/items"] .item-wrapper {
    margin-left: 5px !important;
}

body[data-url="/admin/items"] .item-wrapper:not(.featured) .item-card {
    width: 90px !important;
    height: 90px !important;
}

.item-wrapper.featured
{
    margin-bottom: 0px;
    /* -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(60%, transparent) , to(rgba(250, 250, 250, 0.2))); */
}

body.android .item-wrapper.featured {
    -webkit-box-reflect: unset !important;
}

.item-wrapper.featured:first-of-type
{
    margin-left: 0px;
}

.item-wrapper.featured:not(:first-of-type)
{
    margin-left: 16px;
}

.item-wrapper.admin,
.item-wrapper.search
{
    display: block;
    margin-right: 15px;
    margin-bottom: 40px;
}

.item-wrapper.search {
    margin-left: 0px;
    margin-right: 0px;
    padding-left: 10px !important;
}

.item-wrapper.admin > a,
.item-wrapper.search > a
{
    text-decoration: none;
}

.item-stat-wrapper.hidden
{
    display: none !important;
}

.item-card {
    width: 90px;
    height: 90px;
    /*border: 1px solid #d8d8d8;*/
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.4);
    border-radius: 30px;
    /*background-image: url('/bundles/appcore/images/placeholder_400x400.png');*/
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: inline-block;
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.4), 0px 10px 40px -10px rgba(0, 0, 0, .1);
}

.item-card.admin,
.item-card.search
{
    display: inline-block;
}

.form-row.admin .item-card.admin,
.form-row.search .item-card.search
{
    border-radius: 0px;
}

.item-card.placeholder_200x200
{
    background-image: url('/bundles/appcore/images/placeholder_400x400.png');
    background-size: 90px 90px;
}

.item-card.placeholder_360x200
{
    background-image: url('/bundles/appcore/images/placeholder_720x400.png');
    background-size: 90px 90px;
}

.item-card.placeholder_720x240
{
    background-image: url('/bundles/appcore/images/placeholder_1440x480.png');
    background-size: 90px 90px;
}

.item-card.placeholder_720x400
{
    background-image: url('/bundles/appcore/images/placeholder_1440x800.png');
    background-size: 90px 90px;
}

.item-card.admin.form-upload-element
{
    position: absolute;
    top: 1px;
    left: 1px;
    pointer-events: none;
    box-shadow: 0px 0px 0px transparent;
    background-color: #fff;
    border-radius: 80px !important;
    overflow: hidden;
    height: 78px;
    width: 78px;
}

input[type="file"].form-upload-element
{
    height: 80px;
    width: 80px;
    border-radius: 100px;
    overflow: hidden;
}

.form-row.admin.screenshots input[type="file"].form-upload-element
{
    /*padding-left: 160px;*/
}

.form-row.admin.screenshots .item-card.admin.form-upload-element
{
    width: 78px;
}

.form-row.admin.featured-image input[type="file"].form-upload-element
{
    /*padding-left: 160px;*/
    /*padding-left: 296px;*/
}

.form-row.admin.featured-image .item-card.admin.form-upload-element
{
    width: 78px;
    /*width: 270px;*/
}

.form-row.admin.featured-icon input[type="file"].form-upload-element
{
    /*padding-left: 160px;*/
}

.form-row.admin.featured-icon .item-card.admin.form-upload-element
{
    width: 78px;
}

.details-heading
{
    padding-top: 30px;
}

.details-heading .item-wrapper
{
    margin-left: 0px;
    margin-bottom: 0px;
}

.details-heading .item-card
{
    width: 150px;
    height: 150px;
}

.item-details.admin
{
    display: inline-block;
    vertical-align: top;
    margin-left: 10px;
    margin-right: 72px;
}

.item-details.search
{
    display: inline-block;
    vertical-align: top;
    margin-left: 10px;
    margin-right: 20px;
}

.item-title
{
    margin-top: 4px;
    min-width: 86px;
    max-width: 86px;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 14px;
    text-align: center;
}

.item-details.admin .item-title
{
    max-width: 100%;
    margin-top: 6px;
    margin-bottom: 4px;
}

.item-details.admin.featured .item-title
{
    margin-top: 4px;
}

.item-details.search .item-title
{
    max-width: 100%;
    margin-top: 4px;
    text-align: left;
}

.item-title a
{
    color: #000;
    font-weight: 500;
}

.item-title span
{
    color: #474747;
    font-weight: bold;
}

.item-category {
    min-width: 86px;
    max-width: 86px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 14px;
    text-align: center;
}

.item-price-wrapper {
    min-width: 86px;
    max-width: 86px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 14px;
    text-align: center;
}

.item-price {
    font-weight: bold;
    color: #000;
    background-color: mediumspringgreen;
    border-radius: 100px;
    padding-left: 5px;
    padding-right: 5px;
    margin-top: 2px;
    display: inline-block;
}

.item-price.old-price {
    text-decoration: line-through;
    background-color: transparent;
    color: #666;
    font-weight: 400;
}

.link-title .item-price.discount {
    font-size: 27px;
}

.message-button.floatable .item-category {
    text-align: left;
    padding-left: 0px;
}

.item-details.admin .item-info,
.item-details.search .item-info
{
    max-width: 100%;
    color: #858989;
}

.item-details.search .item-info a,
.item-details.search .item-info a:hover,
.item-details.search .item-info a:active,
.item-details.search .item-info a:visited
{
    color: #858989;
}

.item-details.featured .item-info .category_type
{
    display: inline-block;
    margin-left: 10px;
    margin-right: 10px;
    min-width: 130px;
}

.item-details.search .item-description
{
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 560px;
}

.item-actions.admin,
.item-actions.search
{
    display: inline-block;
    vertical-align: top;
    margin-top: 44px;
}

.item-wrapper.search,
.item-wrapper.admin
{
    position: relative;
    padding-left: 0px;
}

.item-details.search,
.item-details.admin
{
    width: 100%;
    padding-left: 100px;
    padding-right: 70px;
    margin-left: 0px;
    margin-right: 0px;
}

.item-card.search,
.item-card.admin
{
    position: absolute;
    top: 0px;
}

.item-actions.search,
.item-actions.admin
{
    margin-top: 8px;
    position: absolute;
    top: 0px;
    right: 0px;
    padding: 20px 10px 0px 20px;
}

.item-actions a {
    padding: 5px 15px;
    height: 28px;
    background-color: #3284ff;
    bottom: 0px;
    text-decoration: none;
    border-radius: 100px;
    color: #fff !important;
    font-weight: 500;
    display: inline-block;
}

.item-category a
{
    color: #999;
}

.item-wrapper.featured .item-card
{
    /*width: 162px;
    height: 86px;*/
    /* width: 220px;
    height: 116px; */
    width: 250px;
    height: 139px;
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2), 0px 4px 15px -6px rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    -webkit-box-reflect: below 5px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(60%, transparent) , to(rgba(250, 250, 250, 0.2)));
}

.item-wrapper.featured:first-of-type .item-title,
.item-wrapper.featured:first-of-type .item-category
{
    max-width: 164px;
}

.section-title
{
    margin-top: 30px !important;
    color: #000;
    font-weight: 100;
}

.section-title.large
{
    font-size: 34px;
    margin-top: 60px !important;
    margin-bottom: 30px !important;
    font-weight: 500;
}

.section-title.list
{
    margin-top: 0px !important;
    margin-bottom: 14px !important;
}

.child-category-title
{
    position: relative;
    margin-top: 20px;
    font-weight: 500;
    font-size: 30px;
    /* margin-bottom: 20px; */
}

.child-category-title .link-title
{
    display: inline-block;
    color: #000;
    text-decoration: none;
    font-weight: 500;
}

.child-category-title .link-more,
.expandable .link-more {
    float: right;
    font-size: 13px;
    line-height: 18px;
    padding: 5px 10px 5px 10px;
    position: absolute;
    right: -10px;
    /* background-color: #fff; */
    bottom: 0px;
    text-decoration: none;
    border-radius: 100px;
    color: #3284ff;
    /* color: #1436b8; */
    font-weight: 500 !important;
    box-shadow: 0px 0px 0px 1px #3284ff inset;
    /* box-shadow: 0px 0px 0px 1px #1436b8 inset; */
}

.show-item .link-more {
    background-color: transparent;
    box-shadow: 0px 0px 0px 1px #3284ff inset;
}

body.dark .child-category-title .link-more {
    box-shadow: 0px 0px 0px 1px #3284ff inset;
    /* background-color: #060028; */
}

body.dark .show-item .link-more {
    box-shadow: 0px 0px 0px 1px #3284ff inset;
    /* background-color: #060028; */
}

.wallet-card-feature .item-wrapper:not(:first-of-type) {
    margin-left: 0px;
}

.wallet-card-feature .item-title,
.wallet-card-feature .item-category {
    font-size: 12px;
    color: #fff;
    min-width: 76px;
    max-width: 76px;
}

.wallet-card-feature .item-title {
    color: #000;
}

.wallet-card-feature .item-title a {
    font-weight: 400;
}

body.dark .wallet-card-feature .item-title {
    color: #fff;
}

.wallet-card-feature .item-category {
    color: #999;
    color: #757979;
    pointer-events: none;
}

body.dark .wallet-card-feature .item-category {
    color: #999;
}

.wallet-card-feature .item-wrapper {
    margin-bottom: 15px;
    margin-top: 5px;
}

.wallet-card-feature:not(.max) .item-wrapper {
    margin-right: 10px;
}

.wallet-card-feature-items-wrapper {
    white-space: nowrap;
    overflow-x: auto;
}

.wallet-card-feature.max .wallet-card-feature-items-wrapper {
    white-space: normal;
    overflow-x: none;
    overflow-y: scroll;
    position: absolute;
    top: 40px;
    bottom: 0px;
}

.wallet-card-feature:not(.max) .item-card {
    width: 70px;
    height: 70px;
    border-radius: 24px;
}

.wallet-card-feature.max .item-card {
    width: 90px;
    height: 90px;
}

.wallet-card-feature.transition.off .item-card {
    transition: none !important;
}

.wallet-card-feature .item-title, 
.wallet-card-feature .item-category,
.wallet-card-feature .item-price-wrapper {
    min-width: 70px;
    max-width: 70px;
}

.wallet-card-feature.max .item-title, 
.wallet-card-feature.max .item-category {
    min-width: 90px;
    max-width: 90px;
}

#wallet_card_feature_items.max .item-wrapper:not(:first-of-type) {
    margin-left: 15px;
}

.club-card-button-all-items {
    display: block;
    color: #000 !important;
    border-radius: 100px;
    height: 70px;
    width: 70px;
    text-align: center;
    background-color: rgba(0, 0, 0, .1);
    -webkit-backdrop-filter: saturate(100%) blur(30px);
    backdrop-filter: saturate(100%) blur(30px);
    font-size: 30px;
    padding-top: 15px;
}

.wallet-card-feature.max .club-card-button-all-items {
    width: 90px;
    height: 90px;
    padding-top: 25px;
}

body.dark .club-card-button-all-items {
    background-color: rgba(255, 255, 255, .4);
}

body.showing-wallet-card #modal {
    -webkit-backdrop-filter: blur(5px) !important;
    backdrop-filter: blur(5px) !important;
    background-color: rgba(0, 0, 0, .6) !important;
}

#wallet_card_feature_friends .item-list .list-item {
    border-top: none !important;
    display: inline-block !important;
    margin-left: 15px;
}

#wallet_card_feature_friends .user-picture-area, 
#wallet_card_feature_friends .item-icon-area {
    display: block !important;
    height: 60px !important;
    width: 60px !important;
}

#wallet_card_feature_friends.max .user-picture-area, 
#wallet_card_feature_friends.max .item-icon-area {
    height: 90px !important;
    width: 90px !important;
}

#wallet_card_feature_friends.max .item-list .user-picture-area .item-card.admin.form-upload-element {
    height: 90px !important;
    width: 90px !important;
}

#wallet_card_feature_friends.max .user-icon {
    font-size: 80px !important;
}

#wallet_card_feature_friends.max .item-list .user-info, 
#wallet_card_feature_friends.max .item-list .item-info {
    width: 90px !important;
}

#wallet_card_feature_friends .item-list .user-actions,
#wallet_card_feature_friends .user-created {
    display: none !important;
}

#wallet_card_feature_friends .item-list .user-info, 
#wallet_card_feature_friends .item-list .item-info {
    display: block !important;
    margin-left: 0px !important;
    width: 60px !important;;
}

#wallet_card_feature_friends .item-list .user-info .user-name, 
#wallet_card_feature_friends .item-list .item-info .item-name {
    font-size: 12px !important;
    font-weight: 400 !important;
    text-align: center !important;
    white-space: nowrap !important;
}

#header-pagination
{
    font-size: 1.2em;
    text-align: center;
    width: 150px;
    height: 32px;
    margin: auto;
    margin-top: 0px;
    margin-bottom: 2px;
}

#header-pagination .pagination-info
{
    color: #858989;
    font-size: 0.84em;
    vertical-align: text-top;
    line-height: 20px;
}

#header-pagination a
{
    opacity: 0.0;
    color: #858989;
}

#header-pagination:hover a
{
    opacity: 1.0;
}

#header-pagination .button-left
{
    padding-right: 20px;
}

#header-pagination .button-right
{
    padding-left: 20px;
}

.absolute-link-right
{
    position: absolute;
    right: 15px;
}

.details-text-gray
{
    color: #757979;
}

.light-text
{
    font-weight: 200;
}

.normal-text
{
    text-decoration: line-through;
}

.medium-size
{
    font-size: 18px;
}

.breakable-text
{
    white-space: pre-line;
    word-break: break-word;
    margin-bottom: 10px !important;
}

.section-title.block-title
{
    margin-bottom: 10px !important;
}

.details-description
{
    white-space: pre-line;
    word-break: break-word;
}

.expandable .details-description
{
    white-space: pre-line;
    word-break: break-word;
    overflow-y: hidden;
    max-height: 170px;
}

.expandable.expanded .details-description
{
    max-height: none;
}

.expandable .link-more
{
    float: right;
    font-size: 12px;
    line-height: 18px;
    font-weight: 300;
    right: -10px;
    position: relative;
}

.expandable.expanded .link-more
{
    display: none;
}

.details-row
{
    /*border-bottom: 1px solid #d8d8d8;*/
}

#content
{
    /*border-radius: 6px;
    -webkit-box-shadow: 0 0px 0px 1px rgba(0,0,0,.15), 0px 10px 20px -10px #000;
    -moz-box-shadow: 0 0px 0px 1px rgba(0,0,0,.15), 0px 10px 20px -10px #000;
    box-shadow: 0 0px 0px 1px rgba(0, 0, 0, .15), 0px 10px 20px -10px #000;*/
    background-color: #fff;
    font-size: 0.84em;
    margin-left: initial;
    margin-top: 15px;
    max-width: 1312px;
    /*margin-bottom: 15px;*/

    display: none;
}

body.loaded #content {
    display: block;
}

.user-content input
{
    margin-bottom: 4px;
}

.user-content input,
.user-content label
{
    color: #474747;
    margin-bottom: 2px;
    font-size: 14px;
}

.modal-message-window input,
.modal-message-window select,
.modal-message-window textarea,
.user-content input,
.user-content select,
.user-content textarea
{
    color: #474747;
    margin-bottom: 2px;
    font-size: 17px;
    padding: 20px;
    border-radius: 100px;
    font-weight: 300;
}

.user-content select,
.modal-message-window select {
    padding: 0px 20px;
    height: 40px;
    -webkit-appearance: none;
}

.user-content textarea,
.modal-message-window textarea {
    min-height: 150px;
    border-radius: 20px;
}

#user_referral_code {
    /* letter-spacing: 1.8em; */
    text-transform: uppercase;
}

body.dark .user-content input,
body.dark .user-content select {
    color: #fff;
    background-color: #000;
    border-color: #222;
}

body.dark .user-content input:focus,
body.dark .user-content select:focus {
    border-color: #3283ff;
}

.user-content label {
    margin-left: 14px;
}

body.dark .user-content label {
    color: #fff;
}

.user-content .section-title
{
    text-align: center;
    margin-top: 70px !important;
    margin-bottom: 60px;
    color: rgba(0, 0, 0, 1);
    font-weight: 200;
    font-size: 30px;
}

.user-content .section-title.main-title
{
    text-align: left;
    margin-bottom: 0px;
    font-weight: 300;
}

.user-content .section-title.sub-title
{
    text-align: left;
    margin-top: 4px !important;
    margin-bottom: 30px;
    font-weight: 300;
    color: #888;
    font-size: 15px;
}

#rewards .item-title {
    text-align: center;
    font-weight: bold;
}

#rewards .item-category {
    text-align: center;
}

#rewards .item-wrapper .item-card {
    transform: rotate(0deg) scale(1);
    background-color: #000;
    border-radius: 100px;
        border-top-left-radius: 100px;
        border-top-right-radius: 100px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    height: 110px;
    box-shadow: 0px 1px 4px rgba(0, 0, 0, .2);
}

#rewards .item-wrapper .item-card .icon {
    transform: rotate(0deg) scale(1.0);
    border: 1px solid red;
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    padding-top: 15px;
    font-size: 40px;
    font-weight: bold;
    text-align: center;
    color: #fff;
    border: 1px solid greenyellow;
    border-radius: 100px;
        border-top-left-radius: 100px;
        border-top-right-radius: 100px;
    margin: 5px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border: 2px solid #000;
    color: #000;
}

#rewards .item-wrapper .item-card .icon .sub {
    font-size: 16px;
    margin-top: -8px;
}

.reward-wrapper {
    position: relative;
    display: inline-block;
}

#rewards.friends-rewards {
    display: block; 
    position: relative; 
    margin-left: -15px; 
    margin-right: -15px;
}

#rewards.friends-rewards .semi-transparent {
    transition: all 1s;
    opacity: .4;
    transform: scale(.9) !important;
}

#rewards .color-gold .item-card {
    background-color: gold;
}

#rewards .color-orange-red .item-card {
    background-color: orangered;
}

#rewards .color-brown .item-card {
    background-color: peru;
}

#rewards .color-tomato .item-card {
    background-color: tomato;
}

#rewards .color-green .item-card {
    background-color: springgreen;
}

#rewards .color-blue .item-card {
    background-color: royalblue;
}

#rewards .color-black .item-card {
    background-color: #000;
}

#rewards .color-black .item-card .icon,
#rewards .color-blue .item-card .icon,
#rewards .color-purple .item-card .icon  {
    border: 2px solid #fff;
    color: #fff;
}

#rewards .color-black .item-card .icon {
    border: 1px solid #fff;
    color: springgreen;
}

#rewards .color-purple .item-card {
    background-color: mediumslateblue;
}

#rewards .color-light-brown .item-card {
    background-color: navajowhite;
}

#rewards .color-deepskyblue .item-card {
    background-color: deepskyblue;
}

#rewards .color-turquoise .item-card {
    background-color: turquoise;
}

#rewards .color-turquoise .item-card .icon  {
    /* border: 2px solid dodgerblue;
    color: dodgerblue; */
}

#rewards .color-greenyellow .item-card {
    background-color: greenyellow;
}

#rewards .color-darkorange .item-card {
    background-color: coral;
    /* background-color: tomato;
    background-color: sandybrown;
    background-color: salmon; */
}

#rewards.friends-rewards .reward-wrapper:nth-of-type(1),
#rewards.friends-rewards .reward-wrapper:nth-of-type(3) {
    z-index: 0;
}

#rewards.friends-rewards .reward-wrapper:nth-of-type(2) {
    z-index: 1;
}

#rewards.friends-rewards:not(.animation) .reward-wrapper:nth-of-type(1) .item-wrapper .item-card {
    opacity: 1 !important;
    transform: translateX(120px) !important;
}

#rewards.friends-rewards:not(.animation) .reward-wrapper:nth-of-type(3) .item-wrapper .item-card {
    opacity: 1 !important;
    transform: translateX(-120px) !important;
}

#rewards .icon.multiline {
    font-size: 26px !important;
    line-height: 30px;
}

#rewards .small-text {
    font-size: 10px;
}

.gradient2 {
    background: #3284ff;
    background: -moz-linear-gradient(left,#26f5ff 0%,#268bff 100%);
    background: -webkit-gradient(linear,right top,left top,color-stop(0%,#26f5ff), color-stop(100%,#268bff));
    background: -webkit-linear-gradient(left,#26f5ff 0%,#268bff 100%);
    background: -o-linear-gradient(left,#26f5ff 0%,#268bff 100%);
    background: -ms-linear-gradient(left,#26f5ff 0%,#268bff 100%);
    background: linear-gradient(to left,#26f5ff 0%,#268bff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c63cff',endColorstr='#26f5ff',GradientType=1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gradient {
    /* background: #ffa300; */
    /* background: -moz-linear-gradient(left,#26f5ff 0%,#268bff 100%);
    background: -webkit-gradient(linear,right top,left top,color-stop(0%,#26f5ff), color-stop(100%,#268bff));
    background: -webkit-linear-gradient(left,#26f5ff 0%,#268bff 100%);
    background: -o-linear-gradient(left,#26f5ff 0%,#268bff 100%);
    background: -ms-linear-gradient(left,#26f5ff 0%,#268bff 100%); */
    /* background: linear-gradient(to top, #000000, #ffa300); */
    /* filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c63cff',endColorstr='#26f5ff',GradientType=1); */
    /* -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; */
}

#rewards .item-wrapper .item-card.gradient {
    color: #fff;
    -webkit-background-clip: none;
    -webkit-text-fill-color: none;
}

#rewards .item-wrapper .item-card:hover {
    transform: rotate(0deg) scale(1);
}

.dateInfo
{
    display: inline-block;
    margin-right: 10px;
}

.dateLink
{
    color: #888;
}

.dateLink:hover,
.dateLink:active,
.dateLink:focus,
.year-button:hover,
.year-button:focus,
.year-button:active
{
    color: #474747;
    text-decoration: none;
    cursor: pointer;
    outline: none;
}

.popover .popover-title
{
    text-align: center !important;
}

.popover .year-picker
{
    text-align: center;
    margin-bottom: 5px;
}

.popover .month-item
{
    font-weight: 300;
    text-align: center;
}

.month-item:hover,
.month-item:focus,
.month-item:active,
.month-item.active
{
    color: #474747;
    text-decoration: none;
    cursor: pointer;
    outline: none;
}

.popover .month-picker table
{
    margin-bottom: 0px !important;
}

.graph-container
{
    height: 355px;
    width: 678px;
    background-image: url('/bundles/appcore/images/loading.gif');
    background-position: center 130px;
    background-repeat: no-repeat;
    background-size: 48px;
}

.user-content .form-row
{
    position: relative;
    display: block;
    width: 250px;
    margin: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 500;
}

.friends-count {
    margin-top: 0px !important;
    font-weight: 300 !important;
}

.text-black a {
    color: #474747;
}

.user-content .form-row.admin
{
    margin-left: 0px;
}

.user-content .form-row.admin.small
{
    width: 250px;
}

.user-content .form-row.admin.medium
{
    width: 400px;
}

.user-content .form-row.admin.large
{
    width: auto;
}

.user-content .form-row.admin.circle
{
    width: auto;
    display: inline-block;
}

.user-content .form-row.admin.circle .relative-wrapper
{
    width: 96px;
    display: inline-block;
    vertical-align: text-top;
}

.user-content .form-row.admin.circle label
{
    display: block;
}

.user-content .form-row.admin.circle .discrete-message
{
    text-align: center;
    width: 80px;
}

.user-content .form-row.admin #item_description
{
    max-width: 100%;
    min-height: 300px;
}

.user-content .form-row.admin #item_whats_new
{
    max-width: 100%;
    min-height: 80px;
}

.user-content .form-row.button-row
{
    margin-top: 32px;
}

.user-content ul
{
    margin-bottom: 0px;
    padding-left: 0px;
    list-style: none;
}

.user-content .form-validation
{
    color: orangered;
    text-align: center;
    font-size: 12px;
    font-weight: 400;
}

.user-content .form-validation.password[data-error="<ul><li>Ova vrijednost ne smije biti prazna.</li></ul>"] {
    display: none;
}

.user-content .login-message
{
    margin-top: 30px;
    margin-left: 120px;
    margin-right: 120px;
}

.user-content .btn {
    background: none;
    color: #3283ff;
    text-shadow: none;
    border-color: #3283ff;
    padding: 12px;
}

.user-content .btn.red {
    color: red;
    border-color: red;
}

.red {
    color: red !important;
}

.user-content .btn:active {
    color: #fff;
    background-color: #3283ff;
    border-color: #3283ff;
}

.alert-danger {
    /* background: none;
    color: red;
    border-color: red;
    font-size: 14px;
    margin-bottom: 20px !important; */

    background: none;
    color: red;
    border-color: #ddd;
    font-size: 14px;
    margin-bottom: 20px !important;
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#fdec8d), color-stop(100%,#f9e659));
    color: #000;
    font-weight: 400 !important;
}

.discrete-message
{
    color: #858989;
    margin-left: 0px;
    margin-right: 0px;
}

.discrete-message.large
{
    margin-bottom: 30px;
}

.discrete-message.light
{
    color: #999;
}

.inline-comment
{
    display: inline-block;
    margin-left: 5px;
    font-style: italic;
}

.relative-wrapper
{
    position: relative;
}

.show-item-button {
    position: relative;
    display: inline-block;
    border: 1px solid #3284ff;
    border-radius: 4px;
    padding: 2px 8px 0px 8px;
    color: #3284ff;
    text-decoration: none;
    margin-left: 20px;
    background-color: transparent;
    transition: all 0.2s;
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.4), 0px 10px 30px -10px rgba(0, 0, 0, .7);
}

.show-item-button.green
{
    border: 1px solid #31c64a;
    color: #31c64a;
}

.show-item-button.green:hover
{
    background-color: #31c64a;
    color: #fff;
    text-decoration: none;
}

.show-item-button.black
{
    border: 1px solid transparent;
    color: #000;
}

.show-item-button.black:hover
{
    /*background-color: #000;*/
    color: #fff;
    text-decoration: none;
    transform: scale(1.1);
}

.show-item-button.orange
{
    border: 1px solid #ff981e;
    color: #ff981e;
}

.show-item-button.orange:hover
{
    background-color: #ff981e;
    color: #fff;
    text-decoration: none;
}

.show-item-button.blue
{
    border: 1px solid #3284ff;
    color: #3284ff;
}

.show-item-button.blue:hover,
.show-item-button.blue.permanent
{
    background-color: #3284ff;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}

.show-item-button.gold
{
    border: 1px solid #ffa41b;
    color: #3284ff;
}

.show-item-button.gold:hover,
.show-item-button.gold.permanent
{
    background-color: #ffa41b !important;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}

body.dark .show-item-button.gold:hover,
body.dark .show-item-button.gold.permanent {
    color: #000;
}

.show-item-button.bg-black
{
    border: 1px solid #000;
    color: #fff;
}

.show-item-button.bg-black:hover,
.show-item-button.bg-black.permanent
{
    background-color: #000 !important;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}

body.dark .show-item-button.bg-black:hover,
body.dark .show-item-button.bg-black.permanent {
    color: #fff;
}

.show-item-button.store-icon
{
    width: 138px;
    height: 46px;
    padding: 0px;
    margin-left: 0px;
    margin-right: 20px;
    border-radius: 8px;
}

.show-item-button.rate-button
{
    margin-left: 0px;
}

.show-item-button.store-icon.app-store
{
    background-image: url('/bundles/appcore/images/app_store_icon_original.png');
    background-repeat: no-repeat;
    background-size: 100%;
}

.show-item-button.store-icon.google-play
{
    background-image: url('/bundles/appcore/images/google_play_icon_original.png');
    background-repeat: no-repeat;
    background-size: 100%;
}

.show-item-button.store-icon.windows-store
{
    background-image: url('/bundles/appcore/images/windows_store_icon_original.png');
    background-repeat: no-repeat;
    background-size: 100%;
}

.show-item-button.float-bottom
{
    position: absolute;
    bottom: 10px;
}

.heading-column
{
    height: 150px;
    margin-bottom: 20px;
}

.contact-column
{
    display: inline-block;
    min-width: 78px;
    margin-right: 10px;
    text-align: right;
}

#form_search
{
    border-radius: 6px;
    margin-bottom: 15px;
    padding-left: 36px;
    background-color: #f2f2f2;
    transition: all 0.4s
}

#content.menu-visible #form_search {
    border-radius: 30px;
    margin-bottom: 15px;
    padding-left: 36px;
    height: 40px;
}

#form_search:not(:focus)
{
    border: 1px solid transparent;
}

#form_search:focus
{
    background-color: #fff;
    /*border-radius: 0px;*/
}

.search-icon
{
    position: absolute;
    top: 12px;
    left: 14px;
    pointer-events: none;
    color: #474747;
}

.search-clear-icon
{
    position: absolute;
    top: 12px;
    left: 14px;
    color: #474747;
}

.search-clear-icon {
    display: none;
    left: auto;
    right: 14px;
}

#content.menu-visible .search-icon
{
    position: absolute;
    top: 14px;
    left: 17px;
    pointer-events: none;
    color: #474747;
}

.bolded
{
    color: #474747;
}

.item-ratings .star
{
    margin-right: 10px;
    margin-bottom: 8px;
}

.item-ratings label
{
    display: inline;
}

.item-ratings label:after
{
    content: "\a";
    white-space: pre;
}

#form_rating input:hover,
#form_rating label:hover
{
    color: orange;
    cursor: pointer;
}

.details-heading .alert
{
    max-width: 500px;
    margin: auto;
    margin-bottom: 44px;
}

.open-button-mobile
{
    display: none;
}

.item-ratings input[type="radio"]
{
    display: none;
}

.item-ratings label
{
    white-space: nowrap;
    font-size: 22px;
}

.item-ratings input[type="radio"]:checked + label
{
    color: orange;
}

.rating-form .mobile-stars
{
    display: none;
}

#content .logo {
    text-decoration: none !important;
    font-size: 50px;
    font-weight: 800;
    line-height: 35px;
    color: #333;
    /* -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, transparent) , to(rgba(250, 250, 250, 0.1))); */
}

body #content .logo img.light {
    display: inline-block;
}

body #content .logo img.dark {
    display: none;
}

body.dark #content .logo img.light {
    display: none;
}

body.dark #content .logo img.dark {
    display: inline-block;
}

#content .logo .title
{
    display: inline-block;
    /* font-family: Playball-Regular; */
    text-decoration: none !important;
}

#content .logo .gradient
{
    background: #ff3535;
    background: -moz-linear-gradient(left,#26f5ff 0%,#268bff 100%);
    background: -webkit-gradient(linear,right top,left top,color-stop(0%,#26f5ff), color-stop(100%,#268bff));
    background: -webkit-linear-gradient(left,#26f5ff 0%,#268bff 100%);
    background: -o-linear-gradient(left,#26f5ff 0%,#268bff 100%);
    background: -ms-linear-gradient(left,#26f5ff 0%,#268bff 100%);
    background: linear-gradient(to left,#26f5ff 0%,#268bff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c63cff',endColorstr='#26f5ff',GradientType=1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#content .logo .title .stars {
    font-size: 20px;
}

.overflow-hidden
{
    overflow: hidden;
}

.overflow-hidden.left
{
    margin-left: -15px;
}

#arrow {
    opacity: 0.0;
    max-width: 5%;
    margin-top: 10px;
    transition: opacity .4s;
}

.reflection {
    -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(80%, transparent) , to(rgba(250, 250, 250, 0.2)));
}

body.dark .reflection {
    -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(60%, transparent) , to(rgba(250, 250, 250, 0.25)));
}

body .img-responsive.visible-on-black-theme {
    display: none;
}

body.dark .img-responsive.visible-on-black-theme {
    display: block;
}

body.dark .img-responsive.visible-on-white-theme {
    display: none;
}

body .img-responsive.visible-on-white-theme {
    display: block;
}

#arrow.show {
    opacity: 1.0;
}

.width-130
{
    max-width: 130%;
}

.width-50
{
    max-width: 50%;
    margin-top: 20px;
}

.width-75
{
    max-width: 75%;
    margin-top: 20px;
}

.width-85
{
    max-width: 85%;
    margin-top: 20px;
}

.width-100
{
    max-width: 100%;
    margin-top: 20px;
}

.row.block
{
    padding-top: 50px;
    padding-bottom: 50px;
    /*padding-left: 15px;*/
}

.row.block:not(:last-of-type)
{
    border-bottom: 1px solid #ccc;
}

.row.block.no-padding-bottom
{
    padding-bottom: 0px !important;
}

/*.row.block > div
{
    box-shadow: 0px 0px 0px 1px #ddd;
}*/

.featured-row
{
    white-space: nowrap;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    padding-top: 10px;
    padding-bottom: 55px;
}

.items-row
{
    white-space: nowrap;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    padding-top: 6px;
    padding-bottom: 2px;
}

.modal-title {
    font-weight: 800;
    font-size: 50px;
    margin-top: -69px;
    color: #fff;
}

.modal-dialog {
    margin-top: 60px !important;
}

@media (min-width: 768px) {
    .modal-dialog {
        margin: 100px auto !important;
    }
}

.modal-header {
    min-height: 50px;
    border-bottom: 0px;
}

.modal-content {
    -webkit-box-shadow: 0 40px 15px -30px rgba(0, 0, 0, .5);
    box-shadow: 0 40px 15px -30px rgba(0, 0, 0, .5);
    border-radius: 10px;
}

.modal-backdrop.in {
    filter: alpha(opacity=98);
    opacity: .98;
}

.modal-backdrop {
    background: #000;
    background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0.7) 20%, rgba(0,0,0,1.0) 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(20%, rgba(0,0,0,0.7)), color-stop(100%, rgba(0,0,0,1.0)));
    /* background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0.7) 20%, rgba(0,0,0,1.0) 100%); */
    background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,0.7) 20%, rgba(0,0,0,1.0) 100%);
    background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0.7) 20%, rgba(0,0,0,1.0) 100%);
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.7) 20%, rgba(0,0,0,1.0) 100%);
}

.modal button.close {
    font-weight: 400;
    font-size: 30px;
    margin-top: -8px;
    opacity: .6;
    text-shadow: 0px 0px 2px #fff;
}

.modal button.close:hover,
.modal button.close:focus  {
    opacity: 1.0;
}

.action_button {
    margin-bottom: 20px;
    position: relative;
    max-width: 350px;
    margin-left: auto;
    margin-right: auto;
}

.action_button .icon {
    position: absolute;
    top: 14px;
    left: 30px;
}

.show-item .action_button {
    padding: 25px;
    margin-bottom: 0px;
}

.show-item .action_button .icon {
    top: 28px;
}

.item-list-container .responsive-button-wrapper {
    /* margin-top: 50px; */
    /* margin-bottom: 50px; */
}

.show-item .action-button-wrapper {
    /* border: 1px solid red; */
    padding-top: 50px;
    padding-bottom: 50px;
    background-color: #f2f2f2;
}

#modal_inbound_body #featured_items {
    position: relative;
    width: 100%;
    height: 300px;
    /* border: 1px solid red; */
    margin-top: -65px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    pointer-events: none;
    overflow: hidden;
}

#modal_inbound_body #featured_items .featured-row {
    padding-top: 0px;
    padding-bottom: 10px;
    transform: rotate3d(0, 0, 1, -10deg);
}

#modal_inbound_body #featured_items .featured-row .item-wrapper.featured {
    margin-left: 8px;
    -webkit-box-reflect: inherit !important;
}

#modal_inbound_body #featured_items .featured-row .scroller {
    animation: scroller 60s linear infinite;
}

#modal_inbound_body #featured_items .featured-row .scroller_60 {
    animation: scroller 60s linear infinite;
}

#modal_inbound_body #featured_items .featured-row .scroller_50 {
    animation: scroller 50s linear infinite;
}

#modal_inbound_body #featured_items .featured-row .scroller_40 {
    animation: scroller 40s linear infinite;
}

#modal_inbound_body #featured_items .featured-row .scroller_30 {
    animation: scroller 30s linear infinite;
}

#showcase {
    margin-top: 30px;
    white-space: nowrap;
}

#showcase .showcase-row {
    animation: scroller 50s linear infinite;
}

#showcase .showcase-row:nth-of-type(1) {
    animation-duration: 40s;
}

#showcase .showcase-row:nth-of-type(2) {
    animation-duration: 30s;
}

#showcase .showcase-row:nth-of-type(3) {
    animation-duration: 38s;
}

#showcase .showcase-row:nth-of-type(4) {
    animation-duration: 45s;
}

#showcase .showcase-row:nth-of-type(5) {
    animation-duration: 50s;
}

#showcase .showcase-row:nth-of-type(6) {
    animation-duration: 46s;
}

#showcase .showcase-row .item-card {
    margin: 4px;
    margin-bottom: 0px;
    width: 65px;
    height: 65px;
    border-radius: 15px;
}

#modal_inbound iframe {
	display: block;
    border: none;
    width: 100%;
    height: 800px !important;
/*
	display: block;
    border: 1px solid red;
    width: 100%;
    height: 100px !important;
    max-height: 100px !important;
*/
overflow: hidden;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes scroller {
    0%   {transform: translateX(0%)}
    100% {transform: translateX(-100%)}
}

/* Standard syntax */
@keyframes scroller {
    0%   {transform: translateX(0%)}
    100% {transform: translateX(-100%)}
}

.btn-warning {
    background-image: -webkit-linear-gradient(top, #ffb105 0, #ff2605 100%) !important;
    background-image: -o-linear-gradient(top, #ffb105 0, #ff2605 100%) !important;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ffb105), to(#ff2605)) !important;
    background-image: linear-gradient(#ffb105, #ff2605) !important;
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffb105', endColorstr='#ff2605', GradientType=0) !important;
    filter: progid: DXImageTransform.Microsoft.gradient(enabled=false) !important;
    background-repeat: repeat-x !important;
    border-color: #e38d13 !important;
}

.btn-warning:focus,
.btn-warning:hover {
    background-image: -webkit-linear-gradient(top, #ff9b00 0, #ff2605 100%) !important;
    background-image: -o-linear-gradient(top, #ff9b00 0, #ff2605 100%) !important;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ff9b00), to(#ff2605)) !important;
    background-image: linear-gradient(#ff9b00, #ff2605) !important;
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff9b00', endColorstr='#ff2605', GradientType=0) !important;
    filter: progid: DXImageTransform.Microsoft.gradient(enabled=false) !important;
    background-repeat: repeat-x !important;
    border-color: #e38d13 !important;
    background-position: 0 0 !important;
}

.modal-header {
    position: relative;
    z-index: 999 !important;
}




@media (max-width: 767px)
{
    #header-user-corner a,
    #header-user-corner a:hover,
    #header-user-corner a:active,
    #header-user-corner a:visited
    {
        color: #3283ff;
        font-size: 14px;
    }

    .featured-row,
    .items-row
    {
        white-space: nowrap;
        overflow-x: scroll;
        -webkit-overflow-scrolling: touch;
    }

    .item-wrapper:last-of-type
    {
        margin-right: 12px;
    }

    .item-wrapper.featured:last-of-type
    {
        margin-right: 5px;
    }

    .section-title.large,
    .details-text-gray.light-text.medium-size.breakable-text {
        text-align: center;
        padding-left: 10px;
        padding-right: 10px;
    }
}

@media (max-width: 480px)
{
    .alert-message.alert {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .carousel
    {
        margin-left: -20px;
        margin-right: -20px;
        padding-bottom: 60%;
        padding-bottom: 70%;
        margin-top: -7px;
        border-radius: 0px;
        /* box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2); */
        /* box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2), 0px 4px 10px -6px rgba(0, 0, 0, 0.6), 0px 0px 1px rgba(0, 0, 0, 0.4), 0px 10px 50px rgba(0, 0, 0, .2); */
        -webkit-box-reflect: none;
        z-index: 1;
        /* border-radius: 10px; */
    }

    .carousel.screenshots {
        box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2), 0px 4px 10px -6px rgba(0, 0, 0, 0.2), 0px 10px 50px rgba(0, 0, 0, .2);
    }

    .details-heading .item-card
    {
        width: 110px;
        height: 110px;
        box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.4), 0px 10px 50px rgba(0, 0, 0, .2);
    }

    h1
    {
        margin-top: 5px;
    }

    .rating-form .item-ratings
    {
        position: relative;
    }

    .rating-form .item-ratings label
    {
        font-size: 14vw;
        vertical-align: middle;
        position: absolute;
    }

    .rating-form .item-ratings .stars label
    {
        color: transparent;
    }

    .item-ratings input[type="radio"]:checked + label
    {
        color: #FFAE00;
    }

    .rating-form .item-ratings .star
    {
        margin-right: 5vw;
    }

    .rating-form .item-ratings .star:last-of-type
    {
        margin-right: 0px
    }

    .rating-form .mobile-stars
    {
        display: block;
        /* color: #e0e0e0; */
        color: #ccc;
    }

    .rating-form .responsive-button-wrapper
    {
        margin-top: 70px;
    }

    .show-item-button
    {
        margin-left: 0px;
        margin-right: 0px;
        font-size: 16px;
        padding: 8px;
        text-align: center;
        width: 250px;
        border-radius: 100px;
    }

    .show-item-button.store-icon
    {
        text-align: left;
    }

    .responsive-button-wrapper
    {
        width: 100%;
        text-align: center;
    }

    .open-button-normal
    {
        display: none;
    }

    .open-button-mobile
    {
        display: inline-block;
    }

    .heading-column
    {
        height: auto;
    }

    .alert
    {
        margin-left: 0px !important;
        margin-right: 0px !important;
        border-radius: 20px;
        font-size: 14px;
    }

    .user-content .form-row.admin.medium
    {
        width: auto;
    }

    .item-wrapper.admin.item-stat-wrapper
    {
        margin-left: 0px;
        margin-right: 0px;
    }

    .show-item .section-title
    {
        margin-top: 60px !important;
    }

    .show-item .section-title.screenshots,
    .show-item .carousel.screenshots {
        display: none;
    }

    .show-item[data-id="273"] .section-title.screenshots,
    .show-item[data-id="273"] .carousel.screenshots {
        display: block;
    }

    .show-item .section-title.last
    {
        margin-top: 0px !important;
    }

    .details-heading
    {
        padding-top: 60px;
        padding-bottom: 15px;
    }

    .section-title.large
    {
        font-size: 30px;
        font-weight: 500;
        font-weight: bold;
    }

    .medium-size
    {
        font-size: 15px;
    }

    .light-text
    {
        font-weight: 300;
        font-size: 1.4em;
        /*color: #000;*/
    }

    .row.block
    {
        padding-top: 0px;
        padding-bottom: 0px;
        border-bottom: 0px !important;
    }

}

#modal {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 9999999999;
    background-color: rgba(0, 0, 0, .6);
    transition: all .4s;

    display: none;
}

#modal-place .modal {

}

body:not(.showing-conversation):not(.new-message-opened) #modal-place .modal:nth-last-of-type(1) #modal-content,
body.showing-conversation #modal-place > div:not(.modal):nth-last-of-type(1) #modal-content {
    transform: scale(1) translateY(0px);
}

body:not(.showing-conversation):not(.new-message-opened) #modal-place .modal:nth-last-of-type(2) #modal-content,
body.showing-conversation #modal-place > div:not(.modal):nth-last-of-type(2) #modal-content {
    transform: scale(.9) translateY(-40px);
    transform: scale(.86) translateY(-49px);
    transform: scale(.86) translateY(-56px);
    bottom: 30%;
}

body:not(.showing-conversation):not(.new-message-opened) #modal-place .modal:nth-last-of-type(3) #modal-content,
body.showing-conversation #modal-place > div:not(.modal):nth-last-of-type(3) #modal-content {
    transform: scale(.8) translateY(-88px);
    transform: scale(.66) translateY(-148px);
    transform: scale(.66) translateY(-168px);
    bottom: 30%;
}

/* #modal-place .modal:nth-last-of-type(2), */
body:not(.showing-conversation):not(.new-message-opened) #modal-place .modal:nth-of-type(1):not(:only-of-type),
body.showing-conversation #modal-place > div:not(.modal):nth-of-type(1):not(:only-of-type) #modal-content {
    /* -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px); */
    background-color: rgba(0, 0, 0, .6);
    /* box-shadow: 0px 60px 20px -30px rgba(0, 0, 0, .6), 0px 0px 0px 1px rgba(0, 0, 0, .05), 0px -20px 40px -10px rgba(0, 0, 0, .9); */
}

.modal-message-window #modal-content-up  {
    padding: 100px 10px 100%;
}

body.dark #modal {
    /* background-color: transparent; */
    background-color: rgba(0, 0, 0, .4);
}

#modal.animate-hide {
    opacity: 0.0;
}

body[user-agent="o8oo"] #modal {
    display: block;
}

body[data-url$="/register"] #modal,
body[data-url$="/login"] #modal,
body[data-url$="/successful_login"] #modal,
body[data-url$="/password_reset"] #modal,
/* body[data-url$="/"]:not([data-username=""]) #modal { */
body:not([data-username=""]) #modal {
    display: none;
}

.rating-message {
    /* position: fixed;
    top: 60px;
    left: -10px;
    right: -10px;
    z-index: 99999999; */
}

#modal.showing-item {
    display: block !important;
}

#modal.hidden {
    display: none !important;
}

#modal-content {
    position: absolute;
    top: 70px;
    left: 0px;
    right: 0px;
    bottom: 55px; 
    opacity: 1.0;
    transform: scale(1.0);

    background-color: rgba(255, 255, 255, .8);
    /* -webkit-backdrop-filter: saturate(1000%) blur(30px); */
    backdrop-filter: saturate(1000%) blur(30px);
    /* box-shadow: 0px 60px 20px -30px rgba(0, 0, 0, .6), 0px 0px 0px 1px rgba(0, 0, 0, .05); */
    border-radius: 20px;

    transition: top .2s, left .2s, right .2s, bottom .2s, transform 1s, opacity 1s;
    overflow: scroll;
    /* overflow-y: auto; */
    /* padding-left: 15px;
    padding-right: 15px; */
}

#modal:not(.modal-message) #modal-content {
    left: 0px;
    right: 0px;
    bottom: -15px;
    /* border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px; */
}

.token-modal {
    
}

.token-bg {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    color: #000;
    text-align: center;
    /* background: linear-gradient(150deg, #060028 0%, #14204e 100%) !important; */
    /* box-shadow: 0px 0px 0px 2px #fff inset !important; */
    border-radius: 20px;
}

.token-title {
    font-size: 30px;
    font-weight: bold;
    padding-left: 20px;
    line-height: 60px;
    text-align: left;
    -webkit-backdrop-filter: saturate(2000%) blur(30px);
    backdrop-filter: saturate(2000%) blur(30px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    background-color: rgba(250, 250, 250, 0.62);
    /* transition: background-color 0.5s cubic-bezier(0.28, 0.11, 0.32, 1); */
    border-bottom: 1px solid rgba(0, 0, 0, .1);
}

.token-icon {
    font-size: 200px;
    margin-top: 160px;
    /* border: 1px solid #fff; */
    /* border-radius: 1000px; */
    background-color: #eee;
    background: linear-gradient(150deg, #fafafa 0%, #ddd 100%) !important;
    /* width: 100%;
    height: 100%; */
    margin-top: 0px;
    padding-top: 80px;
    /* box-shadow: 0px 0px 20px 10px rgba(0, 0, 0, 1) inset; */
    position: absolute;
    top: 60px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: -1;
    color: #14204e;
}

.token-button {
    background-color: rgba(0, 0, 0, .2);
    -webkit-backdrop-filter: saturate(100%) blur(30px);
    backdrop-filter: saturate(100%) blur(30px);
    box-shadow: 0px 10px 10px -5px rgba(0, 0, 0, .1);
    padding: 15px;
    border-radius: 100px;
    color: #fff;
    font-weight: bold;

    width: 200px;
    margin: auto;
    margin-top: 10px;
}

.token-comment {
    font-size: 13px;
    font-weight: 300;
    margin-top: 30px;
    padding-left: 30px;
    padding-right: 30px;
    opacity: 1;
    -webkit-backdrop-filter: saturate(2000%) blur(30px);
    backdrop-filter: saturate(2000%) blur(30px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    background-color: rgba(250, 250, 250, 0.62);
    /* transition: background-color 0.5s cubic-bezier(0.28, 0.11, 0.32, 1); */
    border-top: 1px solid rgba(0, 0, 0, .1);
    height: 200px;
    padding-top: 20px;
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
}

.token-modal-content {
    bottom: 10% !important;
    left: 10px !important;
    right: 10px !important;
    /* background: linear-gradient(150deg, #060028 0%, #14204e 100%) !important;
    box-shadow: 0px 0px 0px 1px #fff inset !important; */
}

body.dark #modal-content {
    -webkit-backdrop-filter: saturate(100%) blur(30px);
    backdrop-filter: saturate(100%) blur(30px);
}

body.android #modal-content {
    background-color:#fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

#modal-content.done {
    animation: modal-open .2s, modal-pump .6s;
    /* animation-duration: .2s; */
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-play-state: running;
}

.popover-subtitle {
    font-size: 14px;
    font-weight: 200;
    color: #666;
    margin-top: 10px;
    white-space: normal;
    padding: 0px 20px;
}

.message .popover-subtitle {
    display: none;
}

body.android #modal-place .modal #modal-content.done {
    animation: none !important;
}

body.android #modal-place .modal:only-of-type #modal-content.done {
    animation: modal-open .2s, modal-pump .6s !important;
}

#messages .light-text {
    font-size: 14px;
}

#messages .item-list .user-info {
    margin-top: 10px !important;
}

#messages .item-list .user-info .user-created {
    position: absolute;
    top: 14px;
    right: 36px;
    font-size: 14px;
    /* background-color: rgba(255, 255, 255, .9); */
    padding: 7px;
}

#messages .item-list .item-info .item-created {
    position: absolute;
    top: 14px;
    right: 36px;
    font-size: 14px;
    /* background-color: rgba(255, 255, 255, .9); */
    padding: 7px;
}

#messages .item-list .list-item.oglas .item-info .item-created {
    right: 0px;
}

body.dark #messages .item-list .user-info .user-created {
    /* background-color: rgba(4, 0, 42, 0.85); */
}

#messages .item-list .user-info .message-body {
    font-size: 14px;
    font-weight: 300;
    /* width: 50%; */
    /* border: 1px solid red; */
    text-overflow: ellipsis;
    overflow: hidden;
    position: absolute;
    top: 45px;
    left: 74px;
    right: 30px;
}

.load-more-messages-wrapper {
    position: relative;
    text-align: center;
    transition: all 1s;
}

.message-conversation .load-more-messages {
    position: relative;
    margin: auto;
    margin-top: 15px;
    margin-bottom: 15px;
    /* padding: 10px; */
    /* padding-right: 11px;
    padding-left: 20px; */
    border-radius: 100px;
    /* background-color: #eee; */
    display: inline-block !important;
    font-size: 14px;
    z-index: 0;
}

body.dark .message-conversation .load-more-messages {
    background-color: transparent;
}

.message-conversation .load-more-messages .button {
    display: inline-block !important;
    font-size: 14px;
    padding: 9px;
    border-radius: 100px;
    color: #fff;
    /* background-color: #3284ff; */
    height: 30px;
    width: 30px;
    text-align: center;
    /* margin-left: 5px; */
    transition: all .4s;

    background-image: url('/bundles/appcore/images/loader.gif');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.message-conversation .load-more-messages.loading .button {
    /* transform: rotateZ(180deg); */
}

.message-conversation .load-more-messages-wrapper.invalid {
    opacity: 0;
}

.message-conversation .load-more-messages-wrapper.invalid .load-more-messages .button {
    /* background-color: #f55626; */
}

#modal:not(.modal-message-window) #modal-content.new-message {
    bottom: 30%;
}

#modal.maximized {
    -webkit-backdrop-filter: blur(35px);
    backdrop-filter: blur(35px);
    background-color: rgba(0, 0, 0, .9);
}

body.dark #modal.maximized {
    background-color: rgba(0, 0, 0, .9);
}

body.showing-conversation #modal.modal-message:not(.modal-message-window),
body.new-message-opened #modal.modal-message:not(.modal-message-window) {
    z-index: 0;
}

body.showing-conversation #modal.maximized:not(.modal-message-window) {
    /* z-index: 9999999999; */
}

body.showing-conversation #modal.keyboard.maximized:not(.modal-message-window):not(.modal-message) {
    pointer-events: none;
}

/* body.keyboard {
    overflow: none !important;
} */

.message-maximized-helper-button {
    /* pointer-events: none; */
}

body.showing-conversation #modal:not(.modal-message-window) #modal-content,
body.new-message-opened #modal:not(.modal-message-window) #modal-content {
    top: 0px !important;
    left: 0px;
    right: 0px;
    border-radius: 0px;
    bottom: 0px;
    overflow: scroll;
    /* background-color: rgba(255, 255, 255, .6); */
    background-color: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    overflow: hidden;
}

#modal.maximized:not(.modal-message-window) #modal-content.new-message {
    /* top: 50% !important;
    bottom: 4px !important;
    background-color: #fff;
    border-radius: 20px; */
}

body.android #modal.maximized:not(.modal-message-window) #modal-content.new-message {
    /* top: 50px !important;
    bottom: 45% !important; */
}

body.dark.showing-conversation #modal:not(.modal-message-window) #modal-content,
body.dark #modal.maximized:not(.modal-message-window) #modal-content.new-message {
    background-color: rgba(20, 20, 20, .8);
    background-color: #060028;
}

#modal-content.new-message > #modal-button-close {
    display: none !important;
}

#modal-content.new-message #modal-button-back,
#modal-content.new-message #modal-button-close,
#modal-content.new-message #modal-button-close-parent-modal,
#conversation_details.new-message #modal-button-close,
#modal-content.new-message .message-maximized-helper-button {
    right: auto;
    left: 0px;
}

#modal-content.new-message .message-send-button,
#modal-content.new-message .message-download-attachment-button,
#conversation_details.new-message .message-send-button {
    display: inline-block;
    position: absolute;
    right: 0px;
    top: 0px;
    color: #3284ff;
    cursor: pointer;
    font-weight: 600;
    font-size: 16px;
    z-index: 999;
    transition: all .4s;
    padding: 17px;
    text-decoration: none !important;
}

#modal-content.new-message #modal-button-back,
#modal-content.new-message #modal-button-close-parent-modal,
#modal-content.new-message #modal-button-close,
#modal-content.new-message .message-maximized-helper-button {
    font-size: 16px;
    font-weight: 500;
}

#message-progress {
    position: absolute;
    top: 55px;
    left: 0px;
    width: 0%;
    height: 2px;
    background-color: #3284ff;
    z-index: 99;
    transition: width 2s, opacity .4s;
    transition-timing-function: cubic-bezier(0.71, 0.29, 0.41, 0.99);
    opacity: 0;
}

#message-progress.pending {
    width: 99%;
    opacity: 1;
}

#message-progress.done {
    transition: width .4s, opacity .4s;
    width: 100%;
    opacity: 1;
}

#message-progress.reset {
    transition: width 0s, opacity 0s;
    /* width: 0%; */
    opacity: 0;
}

body.showing-conversation #modal:not(.maximized) #modal-content.new-message #message-progress {
    top: 100px;
}

#modal-content.new-message .message-buttons,
#modal-content.new-message .message-attachments,
#modal-content.new-message .message-text,
#conversation_details.new-message .message-buttons,
#conversation_details.new-message .message-attachments,
#conversation_details.new-message .message-text {
    background-color: rgba(255, 255, 255, .9);
    background-color: rgba(255, 255, 255, .8);
    -webkit-backdrop-filter: saturate(1000%) blur(30px);
    backdrop-filter: saturate(1000%) blur(30px);
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 56px;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    z-index: 2;
    box-shadow: 0px 0px 50px rgba(0, 0, 0, .1);
}

body.showing-conversation #modal:not(.maximized):not(.modal-message-window) #modal-content.new-message .message-buttons {
    top: 112px;
    display: none;
}

body.showing-conversation.maximized #modal.maximized #message-user-image {
    pointer-events: none;
}

#modal.modal-inbound-message #message-user-image {
    pointer-events: none;
}

body.showing-conversation.maximized #modal.maximized #message-user-image .message-reciever-icon {
    display: none;
}

body.dark #modal-content.new-message .message-buttons,
body.dark #modal-content.new-message .message-attachments,
body.dark #modal-content.new-message .message-text,
body.dark #conversation_details.new-message .message-buttons,
body.dark #conversation_details.new-message .message-attachments,
body.dark #conversation_details.new-message .message-text {
    background-color: rgba(4, 0, 42, 0.8);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    -webkit-backdrop-filter: saturate(100%) blur(30px);
    backdrop-filter: saturate(100%) blur(30px);
}

body.dark.showing-conversation #modal:not(.maximized) #modal-content.new-message .message-text,
body.dark.showing-conversation #modal:not(.maximized) #modal-content.new-message .message-attachments {
    /* background-color: rgba(0, 2, 52, 0.8); */
    /* background-color: rgba(255, 255, 255, 0.2); */
    background-color: rgba(255, 255, 255, 0.1);
}

#modal-content.new-message .message-text,
#conversation_details.new-message .message-text,
#modal-content.new-message .message-attachments,
#conversation_details.new-message .message-attachments {
    top: auto;
    bottom: 0px;
    border-top: 1px solid rgba(0, 0, 0, .1);
    border-bottom: none;
    height: 66px;
}

body.dark #modal-content.new-message .message-text,
body.dark #conversation_details.new-message .message-text,
body.dark #modal-content.new-message .message-attachments,
body.dark #conversation_details.new-message .message-attachments {
    border-top: 1px solid rgba(255, 255, 255, .06);
}

body.showing-conversation #modal:not(.maximized) #modal-content.new-message .message-text,
body.showing-conversation #modal:not(.maximized) #modal-content.new-message .message-attachments {
    bottom: 79px;
}

#modal .message-attachments {
    bottom: -150px !important;
    height: 150px !important;
    transition: bottom .4s;
}

#modal.showing-attachments .message-attachments {
    bottom: 138px !important;
}

#message-text-input {
    background-color: rgba(0, 0, 0, .05);
    -webkit-backdrop-filter: saturate(100%) blur(30px);
    backdrop-filter: saturate(100%) blur(30px);
    /* background-color: #f2f2f2; */
    border: none;
    outline: none;
    font-size: 16px;
    padding: 10px 15px;
    width: 100% !important;
    height: 100%;
    border-radius: 100px;
}

body.dark #message-text-input {
    /* background-color: rgba(255, 255, 255, .05); */
    background-color: rgba(255, 255, 255, .1);
}

/* body.dark.showing-conversation #modal:not(.maximized).keyboard:not(.keyboard-visible) #modal-content.new-message .message-text {
    background-color: rgba(200, 200, 200, .1);
} */

#message-text-input:focus {
    background-color: rgba(0, 0, 0, .06);
}

body.dark #message-text-input:focus {
    background-color: rgba(255, 255, 255, .1);
}

.message-conversation {
    /* padding-top: 100px;
    padding-bottom: 100px; */
    padding-top: 160px;
    padding-bottom: 190px;
    overscroll-behavior: contain;
}

body:not([data-url="/messages"]) .message-conversation {
    padding-top: 80px;
}

.message-conversation.prepare {
    position: absolute;
    top: 56px;
    left: 0px;
    right: 0px;
    /* background-color: rgba(255, 0, 0, .2); */
    padding: 0px;
    pointer-events: none;
}

.message-conversation .message {
    position: relative;
    /* z-index: -1; */
    word-break: break-all;
    white-space: normal;
    /* transition: all .2s; */
}

.multiple-message {
    position: relative;
    padding-left: 20px;
}

.message .message-action,
.multiple-message .message-action {
    position: absolute;
    font-size: 20px;
    right: 20px;
    top: 50%;
    margin-top: -20px;
    border-radius: 100px;
    padding: 15px 0px;
    text-align: center;
    /* background-color: #fff; */
    background-color: #e9e9ea;
    -webkit-backdrop-filter: saturate(2000%) blur(30px);
    backdrop-filter: saturate(2000%) blur(30px);
    color: #aaa;
    /* border: 1px solid red; */
    pointer-events: none;
    width: 50px;
    height: 50px;
}

body.dark .message .message-action,
body.dark .multiple-message .message-action {
    background-color: #222;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.message .message-indent {
    color: #888;
    font-size: 10px;
}

.multiple-message .message .tail {
    display: none;
}

.push {
    /* transform: scale(0.95); */
    animation-name: push;
    animation-duration: .2s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-direction: alternate;
    animation-play-state: running;

    -webkit-animation-name: push;
    -webkit-animation-duration: .2s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 0s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: alternate;
    -webkit-animation-play-state: running;
}

body.apple-maps-fullscreen .message-conversation .message.push {
    animation-name: none;
    -webkit-animation-name: none;
}

.pop-effect {
    animation-name: pop;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-direction: alternate;
    animation-play-state: running;

    -webkit-animation-name: pop;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 0s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: alternate;
    -webkit-animation-play-state: running;
}

.pop-left-effect {
    animation-name: pop-left;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-direction: alternate;
    animation-play-state: running;

    -webkit-animation-name: pop-left;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 0s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: alternate;
    -webkit-animation-play-state: running;
}

.pop-right-effect {
    animation-name: pop-right;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-direction: alternate;
    animation-play-state: running;

    -webkit-animation-name: pop-right;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 0s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: alternate;
    -webkit-animation-play-state: running;
}

@-ms-keyframes pop-left { 0% { transform: scale(1.0) translateX(0px) } 33% { transform: scale(1.3) translateX(-15px); } 66% { transform: scale(0.9) translateX(7px); } 100% { transform: scale(1.0) translateX(0px); }}
@-moz-keyframes pop-left { 0% { transform: scale(1.0) translateX(0px) } 33% { transform: scale(1.3) translateX(-15px); } 66% { transform: scale(0.9) translateX(7px); } 100% { transform: scale(1.0) translateX(0px); }}
@-webkit-keyframes pop-left { 0% { transform: scale(1.0) translateX(0px) } 33% { transform: scale(1.3) translateX(-15px); } 66% { transform: scale(0.9) translateX(7px); } 100% { transform: scale(1.0) translateX(0px); }}
@keyframes pop-left { 0% { transform: scale(1.0) translateX(0px) } 33% { transform: scale(1.3) translateX(-15px); } 66% { transform: scale(0.9) translateX(7px); } 100% { transform: scale(1.0) translateX(0px); }}

@-ms-keyframes pop-right { 0% { transform: scale(1.0) translateX(0px) } 33% { transform: scale(1.3) translateX(15px); } 66% { transform: scale(0.9) translateX(-7px); } 100% { transform: scale(1.0) translateX(0px); }}
@-moz-keyframes pop-right { 0% { transform: scale(1.0) translateX(0px) } 33% { transform: scale(1.3) translateX(15px); } 66% { transform: scale(0.9) translateX(-7px); } 100% { transform: scale(1.0) translateX(0px); }}
@-webkit-keyframes pop-right { 0% { transform: scale(1.0) translateX(0px) } 33% { transform: scale(1.3) translateX(15px); } 66% { transform: scale(0.9) translateX(-7px); } 100% { transform: scale(1.0) translateX(0px); }}
@keyframes pop-right { 0% { transform: scale(1.0) translateX(0px) } 33% { transform: scale(1.3) translateX(15px); } 66% { transform: scale(0.9) translateX(-7px); } 100% { transform: scale(1.0) translateX(0px); }}

@-ms-keyframes push { 0% { transform: scale(1.0) } 50% { transform: scale(0.95); } 100% { transform: scale(1.0); }}
@-moz-keyframes push { 0% { transform: scale(1.0) } 50% { transform: scale(0.95); } 100% { transform: scale(1.0); }}
@-webkit-keyframes push { 0% { transform: scale(1.0) } 50% { transform: scale(0.95); } 100% { transform: scale(1.0); }}
@keyframes push { 0% { transform: scale(1.0) } 50% { transform: scale(0.95); } 100% { transform: scale(1.0); }}

@-ms-keyframes pop { 0% { transform: scale(1.0) } 33% { transform: scale(1.3); } 66% { transform: scale(0.9); } 100% { transform: scale(1.0); }}
@-moz-keyframes pop { 0% { transform: scale(1.0) } 33% { transform: scale(1.3); } 66% { transform: scale(0.9); } 100% { transform: scale(1.0); }}
@-webkit-keyframes pop { 0% { transform: scale(1.0) } 33% { transform: scale(1.3); } 66% { transform: scale(0.9); } 100% { transform: scale(1.0); }}
@keyframes pop { 0% { transform: scale(1.0) } 33% { transform: scale(1.3); } 66% { transform: scale(0.9); } 100% { transform: scale(1.0); }}

@-ms-keyframes elastic { 0% { transform: translateY(0px); } 33% { transform: translateY(-9px); } 66% { transform: translateY(3px); } 100% { transform: translateY(0px); }}
@-moz-keyframes elastic { 0% { transform: translateY(0px); } 33% { transform: translateY(-9px); } 66% { transform: translateY(3px); } 100% { transform: translateY(0px); }}
@-webkit-keyframes elastic { 0% { transform: translateY(0px); } 33% { transform: translateY(-9px); } 66% { transform: translateY(3px); } 100% { transform: translateY(0px); }}
@keyframes elastic { 0% { transform: translateY(0px); } 33% { transform: translateY(-9px); } 66% { transform: translateY(3px); } 100% { transform: translateY(0px); }}

.message-conversation .message.from {
    text-align: left;
}

.message-conversation .message.to {
    text-align: right;
}

.message-conversation .message.to[data-type="queue"],
.message-conversation .message.to[data-type="node"][data-body=""],
.message-conversation .message.from[data-type="queue"][data-body=""] {
    display: none;
}

.message-conversation .message .body {
    position: relative;
    border-radius: 20px;
    padding: 8px 15px;
    margin: 5px 10px;
    display: inline-block;
    font-size: 16px;
    max-width: 80%;
    min-width: 40px;
    word-break: break-word;
    white-space: normal;
    text-align: left;
}

.message-conversation .message:not(.reply) .body.one-character {
    font-size: 50px;
    text-align: center;
}

.message-conversation .message .user-picture {
    position: absolute;
    bottom: -8px;
    left: -25px;
    height: 30px;
    width: 30px;
    border-radius: 100%;
    background-color: #f9f9f9;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    text-align: center;
    font-size: 25px;
    padding-top: 6px;
    overflow: hidden;
}

.message-conversation .message.user-info {
    margin-left: 30px;
}

.message-conversation .message .body .user-name {
    display: block;
    font-size: 14px;
    text-align: left;
}

.message-conversation .message[data-attachment="true"] .body .user-name {
    padding-left: 15px;
    margin-top: 8px;
    text-overflow: ellipsis;
    max-width: 158px;
    overflow: hidden;
    word-break: break-all;
    white-space: nowrap;
}

.message-conversation .message.to .user-picture,
.message-conversation .message.to .user-name {
    display: none;
}

.overflow-hidden {
    overflow: hidden !important;
}

.message-conversation .message .body.showcase {
    font-size: 20px;
    font-weight: bold;
    padding-left: 0px;
    padding-right: 0px;
    text-align: center;
}

.message-conversation .message .body.showcase #showcase {
    margin-top: 10px;
    /* border: 1px solid red; */
    overflow: hidden;
    /* width: 100%; */
    padding-bottom: 20px;
    margin-bottom: -40px;
}

.message-conversation .message .tail {
    position: absolute;
    font-size: 36px;
    bottom: 2px;
    z-index: -1;
}

.message-conversation .message.from > .body {
    color: #000;
    background-color: #e9e9ea;
}

body.dark .message-conversation .message.from > .body {
    color: #fff;
    background-color: #222;
}

.message-conversation .message.to > .body {
    color: #fff;
    background-color: #3284ff;
}

.message-conversation .message.from > .tail {
    /* color: #888; */
    color: #e9e9ea;
    left: 10px;
}

body.dark .message-conversation .message.from > .tail {
    color: #222;
}

.message-conversation .message.to > .tail {
    color: #3284ff;
    transform: scaleX(-1);
    left: auto;
    right: 10px;
}

.message-conversation .message.from.typing .body {
    padding-top: 10px;
    padding-bottom: 6px;
}

.message-conversation .message .timestamp {
    display: inline-block;
    color: #666;
    position: absolute;
    top: 11px;
    font-size: 10px;
    max-width: 56px;
    word-break: break-word;
    z-index: -1;
    transition: all .4s;
    opacity: 0;
}

body.dark .message-conversation .message .timestamp {
    color: #999;
}

.message-conversation .message.from .timestamp {
    transform: scale(.8) translateX(-40px);
    text-align: left;
}

.message-conversation .message.to .timestamp {
    transform: scale(.8) translateX(40px);
    text-align: right;
    margin-left: -52px;
}

.message-conversation .message.showing-timestamp .timestamp {
    opacity: 1;
    transform: scale(1) translateY(0px);
}

.message-conversation .message[data-type="money"] .body {
    height: 250px;
    width: 200px;
    background-color: #000 !important;
    background-image: url('/bundles/appcore/images/o8oo_card.png'), url('/bundles/appcore/images/o8oo_card_preload.png');
    background-size: contain;
    box-shadow: 0px 0px 1px #fff;
}

.message-conversation .message[data-type="money"] .tail {
    color: #000 !important;
    text-shadow: 0px 0px 1px #fff;
}

#message-attachment-button {
    position: absolute;
    top: 12px;
    right: 56px;
    font-size: 20px;
    padding: 9px 15px;
    color: #3284ff;
}

#message-send-button {
    position: absolute;
    top: 16px;
    right: 10px;
    font-size: 15px;
    padding: 9px 15px;
    border-radius: 100px;
    color: #fff;
    background-color: #3284ff;
}

.new-message .message-reciever {
    background-color: rgba(0, 0, 0, .04);
    /* background-color: #eee; */
    -webkit-backdrop-filter: saturate(10%) blur(50px);
    backdrop-filter: saturate(10%) blur(50px);

    position: absolute;
    top: 0px;
    left: 15px;
    right: 15px;
    height: 50px;
    border-radius: 25px;
    opacity: 0;
    z-index: 1;

    transition: all .4s;
}

body.dark .new-message .message-reciever {
    /* background-color: rgba(255, 255, 255, .05); */
    background-color: #222;
    background-color: #050020;
}

body.dark .new-message .message-reciever.opened {
    /* background-color: rgba(255, 255, 255, .1); */
    /* background-color: #222; */
}

.new-message .message-text-wrapper {
    position: relative;
    height: 100%;
    width: 100%;
    padding: 10px;
    padding-right: 104px;
    transition: all .4s;
}

body.showing-conversation #modal:not(.maximized).keyboard #modal-content.new-message .message-text {
    bottom: 45px;
    margin: 15px -1px;
    border-radius: 0px;
    box-shadow: 0px 5px 10px -6px rgba(0, 0, 0, .2);
    height: 74px;
    transition: all .4s;
    border: 1px solid transparent;
    border-top: 1px solid rgba(0, 0, 0, .1);
    background-color: rgba(255, 255, 255, 1);
    overflow: hidden;
}

body.dark.showing-conversation #modal:not(.maximized).keyboard #modal-content.new-message .message-text {
    border: 1px solid rgba(255, 255, 255, .06);
    background-color: #060028;
}

/* body.showing-conversation #modal:not(.maximized).keyboard:not(.keyboard-visible) #modal-content.new-message .message-text {
    bottom: 80px;
    margin: 15px 5px;
    border-radius: 20px;
    box-shadow: 0px 5px 10px -6px rgba(0, 0, 0, .2);
    height: 67px;
    transition: all .4s;
    border: 1px solid rgba(0, 0, 0, .1);
    overflow: hidden;
    left: 70%;
    border-radius: 35px;
    background-color: rgba(255, 255, 255, 1);
} */

/* body.dark.showing-conversation #modal:not(.maximized).keyboard:not(.keyboard-visible) #modal-content.new-message .message-text {
    background-color: rgba(200, 200, 200, .1);
    box-shadow: 0px 4px 10px -4px rgba(0, 0, 0, .9);
    border: 0px solid rgba(255, 255, 255, .06);
}

body.showing-conversation #modal:not(.maximized).keyboard:not(.keyboard-visible) #modal-content.new-message .message-text-wrapper {
    opacity: 0;
    pointer-events: none;
} */

#modal-content.new-message .message-text #message-toggler-button {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    text-align: center;
    font-size: 22px;
    color: #3284ff;
    padding-top: 22px;
    display: none;
}

/* body.showing-conversation #modal:not(.maximized).keyboard:not(.keyboard-visible) #modal-content.new-message .message-text #message-toggler-button {
    display: block;
} */

.new-message #message-user-image {
    /* border: 1px solid red; */
    height: 100%;
    position: relative;
}

.new-message #message-user-image .user-picture-area,
#logo_user .user-picture-area {
    margin: auto !important;
    display: block !important;
    height: 40px !important;
    width: 40px !important;
    /* top: 12px !important; */
    top: 8px !important;
}

.new-message #message-user-image .user-picture-area .user-picture,
.new-message #message-user-image .user-picture-area .item-card,
#logo_user .user-picture-area .user-picture {
    height: 40px !important;
    width: 40px !important;
    background-color: transparent !important;
    top: 0px !important;
    left: 0px !important;
}

.new-message #message-user-image .user-picture-area .user-icon,
#logo_user .user-picture-area .user-icon {
    font-size: 30px !important;
}

#message-friends {
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;
    overflow-y: scroll;
    overflow-x: hidden;
    /* margin: 10px; */
    margin-top: 100px;
    padding-bottom: 100px;
}

#search-friends #message-friends {
    margin-top: 150px;
    padding-top: 10px;
}

#message-friends > .item-list {
    padding-bottom: 70px;
}

#message-friends .user-action-icon.arrow-right {
    display: none;
}

#message-friends .item-list .list-item {
    padding-left: 10px;
    padding-right: 10px;
}

#message-reciever-user {
    font-weight: 500;
    padding-left: 5px;
}

.new-message .message-reciever .message-reciever-label {
    margin-left: 20px;
    margin-top: 13px;
    font-size: 16px;
    display: none;
}

.new-message .message-reciever .message-reciever-icon {
    position: absolute;
    right: 17px;
    top: 20px;
    pointer-events: none;
    transition: all .4s;
    display: none;
}

.new-message .message-reciever.opened {
    height: auto;
    bottom: 76px;
    border-radius: 20px;
    /* background-color: rgba(0, 0, 0, .01); */
    background-color: #eee;
    top: 66px;
    opacity: 1;
}

body.showing-conversation #modal:not(.maximized) .new-message .message-reciever.opened {
    top: 180px;
    bottom: 160px;
    display: none;
    pointer-events: none;
}

body.showing-conversation #modal:not(.maximized) .message-conversation {
    padding-top: 160px;
    padding-bottom: 190px;
}

body.showing-conversation #messages .parent {
    display: none;
}

.new-message .message-reciever.opened .message-reciever-icon {
    transform: rotateZ(-180deg);
}

#message-user-image .message-reciever-icon {
    display: block;
    margin: auto;
    text-align: center;
    padding-left: 66px;
    margin-top: -15px;
    transition: all .4s;
}

#message-user-image.opened .message-reciever-icon {
    transform: scaleY(-1);
}

#modal-content.pump {
    transform: scale(1.05);
}

#modal-content-up {
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    padding-left: 0px;
    padding-right: 0px;
    margin-left: 0px;
    margin-right: 0px;
}

.modal-inbound-message #modal-content-up {
    padding-left: 0px;
    padding-right: 0px;
    margin-left: 0px;
    margin-right: 0px;
}

#modal-content-down {
    position: absolute;
    bottom: 0px !important;
    left: 0px !important;
    right: 0px !important;
    background-color: rgba(255, 255, 255, .8);
    -webkit-backdrop-filter: saturate(1000%) blur(30px);
    backdrop-filter: saturate(1000%) blur(30px);
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

#modal.showing-item #modal-content-down {
    background-color: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.dynamic-modal-content-down {
    position: fixed !important;
    bottom: 0px !important;
    left: -6px !important;
    right: -6px !important;
    background-color: rgba(255, 255, 255, .8);
    -webkit-backdrop-filter: saturate(1000%) blur(30px);
    backdrop-filter: saturate(1000%) blur(30px);
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    z-index: 1;
}

body.dark .dynamic-modal-content-down {
    background-color: rgba(0, 2, 52, 0.8);
    -webkit-backdrop-filter: saturate(100%) blur(30px);
    backdrop-filter: saturate(100%) blur(30px);
}

body.dark .dynamic-modal-content-down .button {
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.popover-login-icon {
    font-size: 160px;
    margin: auto;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    padding-top: 54px;
    background-color: #f4f4f4;
    pointer-events: none;
}

body.dark .popover-login-icon {
    background-color: #333;
}

.user-icon {
    font-size: 50px;
    margin: auto;
    position: absolute;
    top: 12px;
    left: 0px;
    right: 0px;
    padding-top: 0px;
    pointer-events: none;
    display: inline-block;
    color: #000;
}

.user-picture-area[data-image] .user-icon {
    display: none;
}

.user-picture-area[data-image=""] .user-icon {

}

.item-list-container .section-title {
    margin-bottom: 60px !important;
    margin-top: 20px !important;
}

.item-list .user-info,
.item-list .item-info {
    display: inline-block;
    vertical-align: top;
    margin-top: 15px;
    margin-left: 10px;
}

.preferences-list.item-list .item-info {
    margin-bottom: 15px;
}

.preferences-list .item-switch {
    position: absolute;
    top: 30px;
    right: 0px;
    width: 50px;
    height: 30px;
    margin: 4px;
    border-radius: 100px;
    background-color: #eee;
    transition: all .2s;
}

.preferences-list .item-switch .item-switch-toggle {
    position: absolute;
    top: 2px;
    left: 3px;
    width: 25px;
    height: 25px;
    border-radius: 100px;
    background-color: #fff;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, .2);
    transition: all .2s;
}

.preferences-list .list-item[data-value="true"] .item-switch {
    background-color: #3284ff;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, .2) inset;
}

.preferences-list .list-item[data-value="true"] .item-switch .item-switch-toggle {
    left: 22px;
    box-shadow: -1px 1px 4px rgba(0, 0, 0, .6);
}

.preferences-list .item-check {
    position: absolute;
    top: 24px;
    right: 4px;
    width: 26px;
    height: 26px;
    margin: 4px;
    border-radius: 8px;
    background-color: #eee;
    transition: all .2s;
    /* overflow: hidden; */
}

.preferences-list .item-check .item-switch-toggle {
    position: absolute;
    top: -7px;
    left: 4px;
    width: 26px;
    height: 26px;
    /* transition: all .2s; */
    font-size: 26px;
    text-align: center;
    color: #3284ff;
    text-shadow: 1px 3px 2px rgba(0, 0, 0, .1);
    opacity: 0.0;
    transform: scale(1.2);
}

.preferences-list .list-item[data-checked="true"] .item-check .item-switch-toggle {
    opacity: 1.0;
    transform: scale(1.0);
}

.item-list .level-badge {
    height: 20px;
    width: 20px;
    border-radius: 100%;
    background-color: #fff;
    border: 1px solid #000;
    color: #000;
    font-size: 12px;
    text-align: center;
    font-weight: 600;
}

.user-info-row .info .level-badge {
    color: #ffb51c;
    font-size: 20px;
    line-height: 16px;
}

.user-info-row .info.money {
    color: #ffb51c;
    font-weight: 400;
}


.user-info-row .info .level-number {
    display: inline-block;
    /* padding-left: 10px; */
}

.level-badge[data-level="0"] {
    color: #000;
}

.level-badge[data-level="1"] {
    color: #403F4C;
}

.level-badge[data-level="2"] {
    color: #E84855;
}

.level-badge[data-level="3"] {
    color: #ffb51c;
}

.level-badge[data-level="4"] {
    color: #3185FC;
}

.level-badge[data-level="5"] {
    color: #3fc8ff;
}

.level-badge[data-level="6"] {
    color: #ff488d;
}

.level-badge[data-level="7"] {
    color: #ff6a32;
}

.level-badge[data-level="8"] {
    color: #fce002;
}

.level-badge[data-level="9"] {
    color: #d2f800;
}

.level-badge[data-level="10"] {
    color: #bbb;
}

.item-list .user-level {
    position: absolute;
    left: 40px;
    top: 50px;
    display: none;
}

.item-list .user-info .user-name,
.item-list .item-info .item-name {
    font-size: 16px;
    font-weight: 500;
}

.item-list .user-info .user-name {
    width: 100%;
    /* border: 1px solid red; */
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-list.friend-list .user-info {
    width: 68%;
    /* border: 1px solid blue; */
    /* overflow: hidden; */
}

#messages .item-list .user-info .user-name,
#messages .item-list .item-info .item-name {
    /* position: absolute;
    top: 20px;
    left: 73px;
    right: 0px;
    overflow: hidden; */
    /* border: 1px solid green; */
}

#messages .item-list .user-info .user-name {
    width: 200px;
}

.item-list.pending .user-info .user-name,
.item-list.pending .user-info .item-name,
#messages .item-list.pending .user-info .message-body {
    height: 20px;
    width: 160px;
    border-radius: 4px;
    background-color: #eee;
}

#messages .item-list.pending .user-info .message-body { 
    width: 250px;
}

.item-list.pending .animating-item {
    
}

.color-animation {
    animation-name: color;
    animation-duration: .5s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state: running;

    -webkit-animation-name: color;
    -webkit-animation-duration: .5s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 0s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-play-state: running;
}

body.dark .item-list.pending .user-info .user-name,
body.dark .item-list.pending .user-info .item-name,
body.dark #messages .item-list.pending .user-info .message-body {
    background-color: #333;
}

body.dark .color-animation {
    animation-name: black-color;
    -webkit-animation-name: black-color;
}

@-ms-keyframes color { from { background-color: #f4f4f4; } to { background-color: #ddd }}
@-moz-keyframes color { from { background-color: #f4f4f4; } to { background-color: #ddd }}
@-webkit-keyframes color { from { background-color: #f4f4f4; } to { background-color: #ddd }}
@keyframes color { from { background-color: #f4f4f4; } to { background-color: #ddd }}

@-ms-keyframes black-color { from { background-color: #111; } to { background-color: #333 }}
@-moz-keyframes black-color { from { background-color: #111; } to { background-color: #333 }}
@-webkit-keyframes black-color { from { background-color: #111; } to { background-color: #333 }}
@keyframes black-color { from { background-color: #333; } to { background-color: #888 }}

.item-list .user-info .user-created,
.item-list .item-info .item-description  {
    font-size: 11px;
    font-weight: 300;
}

.item-list .user-actions {
    display: inline-block;
    vertical-align: top;
    font-size: 25px;
    position: absolute;
    right: -15px;
    top: 0px;
    color: #3284ff;
}

.item-list .user-actions .user-action-icon,
.item-list .user-actions .user-action-icon:active,
.item-list .user-actions .user-action-icon:hover {
    padding: 22px;
    cursor: pointer;
    text-decoration: none !important;
    display: inline-block;
}

.item-list .user-actions .user-action-icon-circle {
    display: inline-block;
    width: 25px;
    height: 25px;
    border: 1px solid red;
    border-radius: 100%;
    text-align: center;
    font-size: 12px;
    padding: 6px;
    border-color: #3284ff;
    position: relative;
    top: -2px;
}

.parent-child-wrapper {
    position: relative;
    white-space: nowrap;
    /* border: 1px dashed orange; */
    /* overflow: hidden; */
    transition: all .4s;
    left: 0%;
}

.parent-child-wrapper .parent,
.parent-child-wrapper .child {
    position: relative;
    display: inline-block;
    width: 100%;
    /* border: 1px solid red; */
    vertical-align: top;
    transition: all .4s;
}

.parent-child-wrapper.details {
    left: -100%;
}

.parent-child-wrapper.details .parent {
    /* margin-left: -100%; */
}

.parent-child-wrapper.details .parent-child-wrapper .parent {
    margin-left: 0%;
}

.parent-child-wrapper.details .item-list-container.parent .responsive-button-wrapper .button.item {
    display: none;
}

.parent-child-wrapper.details .send-message-button.visible {
    bottom: 0px !important;
}

.parent-child-wrapper .child {
    padding-top: 10px;
    /* border: 1px solid blue; */
}

.parent-child-wrapper:not(.details) > .child {
    opacity: 0.0;
    pointer-events: none;
    display: none;
}

.parent-child-wrapper.details > .parent {
    opacity: 0.0;
    pointer-events: none;
}

.parent-child-wrapper .user-action-icon.arrow-right {
    padding: 31px !important;
    color: #757979 !important;
    font-size: 18px !important;
}

#messages .parent-child-wrapper .user-action-icon.arrow-right {
    padding: 25px 25px 10px 25px !important;
    font-size: 14px !important;
    /* background-color: rgba(255, 255, 255, .9); */
}

body.dark #messages .parent-child-wrapper .user-action-icon.arrow-right {
    /* background-color: rgba(4, 0, 42, 0.85); */
}

.parent-child-wrapper .child .user-info-row {
    border-top: 1px solid rgba(0, 0, 0, .06);
    font-size: 16px;
    font-weight: 600;
    padding: 20px 0px;
    padding-left: 10px;
    white-space: normal;
}

body.dark .parent-child-wrapper .child .user-info-row {
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.parent-child-wrapper .child .user-info-row .info {
    font-weight: 200;
    padding-left: 2px;
    float: right;
}

.parent-child-wrapper .child .user-buttons {
    text-align: center;
    margin-top: 30px;
}

.parent-child-wrapper .button-back {
    position: fixed;
    top: -100px;
    left: 0px;
    color: #fff;
    cursor: pointer;
    font-size: 25px;
    z-index: 999;
    transition: all .4s;
    padding: 3px 30px 2px;
    font-size: 18px;
    border-radius: 100px;
    margin-top: 17px;
    margin-left: 10px;
    opacity: 0;

    background-color: rgba(0, 0, 0, .2);
    -webkit-backdrop-filter: saturate(100%) blur(30px);
    backdrop-filter: saturate(100%) blur(30px);
}

body.dark .parent-child-wrapper .button-back {
    background-color: rgba(255, 255, 255, .4);
    color: #000;
}

.parent-child-wrapper.details > .button-back {
    top: 0px;
    opacity: 1;
}

#messages .parent-child-wrapper.details > .button-back {
    top: -100px;
}

.profile .responsive-button-wrapper .user-picture {
    position: relative;
    width: 60px;
    height: 60px;
    background-size: cover;
    background-position: center;
}

.responsive-button-wrapper.payment .user-picture {
    position: relative;
    width: 60px !important;
    height: 60px !important;
    background-size: cover;
    background-position: center;
}

.payment-cards {
    position: relative;
    text-align: center;
}

.payment-cards a {
    margin-bottom: 10px;
    display: inline-block;
}

.profile .picture-blur-wrapper {
    position: absolute;
    /* border: 1px solid red; */
    left: 0px;
    right: 0px;
    top: 0px;
    height: 444px;
}

.profile .picture-blur-image {
    position: relative !important;
    width: 210px !important;
    height: 210px !important;
    margin-top: 150px !important;
    top: 0px !important;
    left: 0px !important;
}

.profile .picture-blur-effect {
    position: absolute;
    /* border: 1px solid blue; */
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: rgba(255, 255, 255, .6);
    -webkit-backdrop-filter: saturate(1000%) blur(30px);
    backdrop-filter: saturate(1000%) blur(30px);
}

body.dark .profile .picture-blur-effect {
    background-color: rgba(0, 0, 0, .6);
    background-color: #060028;
}

.preferences-list .list-item.clicked {
    transition: none !important;
    transform: none !important;
}

.item-list .list-item {
    position: relative;
    border-top: 1px solid rgba(0, 0, 0, .06);
    padding-top: 10px;
    padding-bottom: 6px;
    text-align: left;
    text-decoration: none;
    display: block;
    color: #000;
}

.main-menu.item-list .list-item {
    padding-top: 6px;
}

body.dark .item-list .list-item {
    color: #fff;
}

.list-item.button.child-button[data-key="tema"][data-value="dark"],
.list-item.button.child-button[data-key="tema"][data-value="auto"] {
    display: none;
}

/* .item-list.preferences-list > .list-item[data-type="radio"] { */
.item-list.preferences-list > .list-item:not([data-type=""]) {
    border-top: none;
}

.item-list.preferences-list > .list-item > .item-info {
    display: block;
    margin-left: 0px;
}

.item-list.preferences-list > .list-item > .item-info > .item-name {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 5px;
}

.list-item.user-form .item-description {
    margin-left: 10px;
    margin-right: 10px;
    text-align: right;
    white-space: normal;
}

.list-item.user-form .user-form-table {
    width: 100%;
}

.list-item.user-form .user-form-input {
    background-color: rgba(0, 0, 0, .05);
    border: 0px !important;
    box-shadow: none !important;
    outline: none;
    margin-top: 4px;
    text-align: right;
    height: 34px;
    height: 33px;
    -webkit-appearance: none;
}

.modal-message-window .list-item.user-form .user-form-input[type="date"],
.modal-message-window .list-item.user-form .user-form-input[type="time"],
.modal-message-window .list-item.user-form .user-form-input[type="datetime-local"],
#my_data .list-item.user-form .user-form-input[type="date"],
#my_data .list-item.user-form .user-form-input[type="time"],
#my_data .list-item.user-form .user-form-input[type="datetime-local"] { 
    box-sizing: content-box !important;
    /* border: 1px solid red !important; */
    padding: 0px !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    min-width: 100px;
}

#modal .dirty .list-item.user-form[data-valid="false"] .user-form-input,
#modal .dirty .list-item.user-form[data-valid="false"] .item-check {
    /* border: 2px solid red !important; */
    /* background: -webkit-gradient(linear, left top, right top, color-stop(0%,#fdec8d), color-stop(100%,#f9e659));
    box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, .2) inset !important; */
    background-color: #fdec8d !important; 
}

#modal .error-message {
    top: 56px;
    left: 0px;
    right: 0px;
    position: absolute;
    border-radius: 0px;
    text-align: center;
    padding: 0px;
    margin: 0px;
    background-color: #fdec8d;
    background: -moz-linear-gradient(top, #fdec8d 0%, #f9e659 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#fdec8d), color-stop(100%,#f9e659));
    color: #000;
    font-weight: 400;
    /* height: 40px; */
    padding-top: 10px;
    padding-bottom: 8px;
    border: none;
    /* border-bottom: 1px solid #ddd; */
    z-index: 100;
}

.error-message {
    display: none;
}

#modal .dirty .error-message.visible {
    display: block;
}

body.dark .list-item.user-form .user-form-input {
    background-color: rgba(255, 255, 255, .1) !important;
    color: #fff;
}

body.dark .message .list-item.user-form .user-form-input {
    background-color: transparent !important;
    color: #fff;
}

.list-item.user-form select {
    height: 42px !important;
    padding-right: 42px;
}

.message .list-item.user-form select.user-form-input {
    padding: 6px 0px;
    margin-top: -2px;
}

.message .list-item.user-form [type="date"].user-form-input,
.message .list-item.user-form [type="time"].user-form-input,
.message .list-item.user-form [type="datetime-local"].user-form-input {
    /* border: 1px solid red !important; */
    margin-right: 0px !important;
    display: inline-block;
    position: absolute;
    top: 0px;
    height: 42px !important;
    padding: 0px;
}

input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-inner-spin-button,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-inner-spin-button,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

.message .list-item.user-form .user-form-input-dropdown {
    display: none;
}

.modal-message-window .message .list-item.user-form select.user-form-input {
    padding-right: 42px;
    height: 42px !important;
}

.modal-message-window .message .list-item.user-form .user-form-input-dropdown {
    display: block;
}

.user-form[data-editable="false"] select,
.user-form[data-editable="false"] .item-checkbox {
    pointer-events: none;
}

.list-item.user-form .user-form-input-dropdown {
    position: absolute;
    right: 16px;
    top: 45%;
    pointer-events: none;
    transition: all .4s;
}

.list-item.user-form.focused .user-form-input-dropdown {
    transform: rotateX(180deg);
}

.item-checkbox {
    position: relative;
    margin: 15px 0px 25px 0px;
}

.message .item-checkbox {
    display: none;
}

.item-checkbox .item-check .item-switch-toggle {
    opacity: 0.0;
}

.item-checkbox[data-checked="true"] .item-check .item-switch-toggle {
    opacity: 1.0;
    transform: scale(1.0);
}

.item-checkbox .item-check {
    top: -6px;
}

.item-checkbox .item-checkbox-title {
    text-align: right;
    font-size: 16px;
    margin-right: 50px;
}

.user-form-title {
    vertical-align: text-top;
}

.user-form-data {
    position: relative;
}

.message .user-form-data {
    width: 50%;
}

.list-item.user-form .user-form-input::placeholder {
    /* color: #000 !important; */
    /* font-size: 12px; */
    /* font-weight: 100; */
    /* text-align: center; */
}

.list-item.user-form .user-form-input:focus {
    background-color: rgba(0, 0, 0, .05);
}

.list-item.user-form .item-info {
    margin-right: 10px;
}

.popover-login-user-picture-wrapper {
    -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(80%, transparent) , to(rgba(250, 250, 250, 0.1)));
    color: #474747;
}

body.dark .popover-login-user-picture-wrapper {
    color: #fff;
}

.popover-login-user-picture-area {
    height: 210px;
    width: 210px;
    border-radius: 80px;
    border: 0px solid #333;
    position: relative;
    margin: auto;
    margin-bottom: 30px;
    overflow: hidden;
    background-color: #f4f4f4;
    text-align: center;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, .2);
}

.user-picture-area,
.item-icon-area {
    height: 60px;
    width: 60px;
    border-radius: 100%;
    border: 0px;
    position: relative;
    margin-bottom: 0px;
    overflow: hidden;
    text-align: center;
    display: inline-block;
    background-color: #f4f4f4;
    z-index: 1;
}

.item-list.pending .user-picture-area {
    background-color: #eee;
}

body.dark .item-list.pending .user-picture-area {
    background-color: #333;
}

.item-icon-area {
    border-radius: 0px;
    overflow: visible;
    background-color: transparent;
}

.item-icon-area .item-icon {
    font-size: 30px;
    margin: auto;
    position: absolute;
    top: 18px;
    left: 0px;
    right: 0px;
    padding-top: 0px;
    pointer-events: none;
    display: inline-block;
    color: #000;
}

body.dark .item-icon-area .item-icon {
    color: #999;
}

.item-list .user-picture-area .item-card.admin.form-upload-element,
#logo_user .user-picture-area .item-card.admin.form-upload-element {
    height: 60px;
    width: 60px;
    top: 0px;
    left: 0px;
    display: none;
}

.item-list .user-picture-area .item-card.admin.form-upload-element[data-image],
#logo_user .user-picture-area .item-card.admin.form-upload-element[data-image] {
    display: block;
}

.item-list .user-menu-message {
    font-weight: 300;
}

#action-button-floatable .user-picture-area {
    border-color: #000;
}

.responsive-button-wrapper.attachment .user-picture-area {
    width: 48px;
    height: 64px;
    margin: auto;
    background-size: 48px 64px;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('/bundles/appcore/images/report.png');
    text-align: center;
    font-size: 30px;
    padding-top: 55%;
    padding-left: 2px;
    color: #007aff;
    background-color: transparent;
    border-radius: 0px;
    box-shadow: 0px 9px 10px -10px #000;
}

.responsive-button-wrapper.attachment .user-icon {
    padding-top: 12px;
    color: #007aff;
    font-size: 20px;
    text-align: center;
    padding-left: 2px;
}

.attachment #file_attachment {
    position: absolute;
    border: 1px dashed red;
    top: 0px;
    bottom: 0px;
    left: 0px;
    width: 100%;
    z-index: 1;
    opacity: 0;
}

.qq-uploader {
    width: 100% !important;
    height: 100% !important;
}

#message-attachment-button .qq-uploader {
    position: absolute;
    top: 0px;
    left: 0px;
    opacity: 0;
}

.qq-upload-list-selector {
    height: 100% !important;
    display: none;
}

.fileupload-preview {
    display: none;
}

.qq-upload-button {
    width: 100%;
    height: 100% !important;
    position: absolute !important;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

.attachment-details {
    background-color: rgba(245, 245, 245, .94);
    -webkit-backdrop-filter: saturate(1000%) blur(30px);
    backdrop-filter: saturate(1000%) blur(30px);
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    z-index: 1;
    display: none;
}

body.dark .attachment-details {
    background-color: rgba(0, 2, 46, 0.8);
    -webkit-backdrop-filter: saturate(100%) blur(30px);
    backdrop-filter: saturate(100%) blur(30px);
}

.modal.showing-attachment-details .attachment-details {
    display: block;
}

.attachment-details .file-placeholder {
    position: absolute;
    top: 0px;
    height: 100%;
    left: 0px;
    right: 0px;
    /* border-bottom: 1px dashed red; */
    /* padding-top: 56px; */
    text-align: center;
}

#modal-content.new-message .message-buttons {
    overflow: hidden;
}

.modal .message-buttons .buttons-row {
    position: relative;
    transition: all .4s;    
}

.modal.showing-attachment-details .message-buttons .buttons-row {
    /* margin-top: -55px; */
}

.modal .message-buttons .buttons-row.primary-buttons {
    opacity: 1;
}

.modal .message-buttons .buttons-row.secondary-buttons {
    /* margin-top: 55px; */
    opacity: 0;
}

.modal.showing-attachment-details .message-buttons .buttons-row.primary-buttons {
    opacity: 0;
}

.modal.showing-attachment-details .message-buttons .buttons-row.secondary-buttons {
    opacity: 1;
}

.modal .message-buttons .buttons-row.message-preview-buttons {
    display: none;
    opacity: 0;
}

.modal.message-attachment.showing-attachment-details .message-buttons .buttons-row.primary-buttons,
.modal.message-attachment.showing-attachment-details .message-buttons .buttons-row.secondary-buttons {
    display: none;
}

.modal.message-attachment.showing-attachment-details .message-buttons .buttons-row.message-preview-buttons {
    display: block;
    opacity: 1;
}

.modal.showing-attachment-details .message-buttons #modal-button-back,
.modal.showing-attachment-details .message-buttons #modal-button-close-parent-modal {
    display: block !important;
}

.responsive-button-wrapper.payment #action-button-floatable .user-picture-area {
    height: 64px;
    width: 64px;
    margin-top: 5px;
    border-radius: 0px;
    background-color: transparent;
}

.responsive-button-wrapper.payment #action-button-floatable .user-picture-area .user-icon {
    color: #3284ff;
    color: #000;
    font-size: 46px;
}

body.dark .responsive-button-wrapper.payment #action-button-floatable .user-picture-area .user-icon {
    color: #fff;
}

.popover-login-user-picture-area #user_profile_picture {
    height: 200px;
    width: 200px;
    border-radius: 100%;
}

.popover-login-user-picture-area .item-card.admin.form-upload-element {
    height: 210px;
    width: 210px;
    top: 0px;
    left: 0px;
    background-color: transparent;
    /* background-size: contain; */
}

.popover-login-user-picture-area .item-card.admin.form-upload-element[data-image] {
    background-color: #fff;
}

.popover-login-user-picture-area .form-validation.active {
    color: #fff;
    text-align: center;
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: #333;
    padding: 15px;
    padding-top: 72px;
    top: 0px;
}

.profile .user-image-edit {
    font-size: 16px;
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    pointer-events: none;
    margin: 0px;
}

.profile .user-image-edit a {
    text-decoration: none !important;
    color: #fff;
    text-shadow: 0px 1px 2px #000;
    display: block;
    margin: 170px 0px 0px;
    pointer-events: none;
    background-color: rgba(0, 0, 0, .7);
    padding-bottom: 10px;
    padding-top: 10px;
}

.profile .user-name {
    position: relative;
    margin-top: -10px;
    font-size: 30px;
    margin-bottom: 20px;
    max-width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #000;
    text-decoration: none !important;
}

.profile a:hover,
.profile a:active,
.profile a:focus,
.profile a {
    text-decoration: none !important;
}

body.dark .profile .user-name { 
    color: #fff;
}

.user-menu .user-menu-item {
    position: relative;
    display: block;
    text-align: left;
    color: #000;
}

.user-menu .user-menu-item .item-badge {
    right: 5px !important;
}

.user-menu .user-menu-item:last-of-type > a {
    border-bottom: 1px solid rgba(0, 0, 0, .06);
}

.user-menu .user-menu-item a {
    position: relative;
    font-size: 16px;
    font-weight: 500;
    padding: 18px;
    text-decoration: none !important;
}

.user-menu .user-menu-item > a {
    display: block;
    /* border-top: 1px solid #0000000f; */
    color: #000;
    text-align: left;
}

.user-menu .user-menu-item.red a {
    color: red;
}

.user-menu-item-icon {
    position: absolute !important;
    right: 0px;
    top: 0px;
    font-size: 19px !important;
    border-left: 1px solid rgba(0, 0, 0, .06);
    padding: 25px 32px !important;
    margin: 4px;
    margin-right: 0px;
    padding-left: 24px !important;
}

.user-menu-item.form-row {
    border-top: 1px solid rgba(0, 0, 0, .06);
    width: auto !important;
    margin: 0px !important;
}

.user-menu-item.form-row label {
    position: absolute;
    display: block;
    margin: 20px 10px;
    pointer-events: none;
}

.user-menu-item.form-row input,
.user-menu-item.form-row select {
    border: none !important;
    margin: 0px !important;
    border-radius: 0px !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 30px !important;
    padding-left: 120px !important;
    background: none !important;
    text-align: right;
}

.user-menu-item.form-row select {
    padding: 0px !important;
    padding-left: 120px !important;
    height: 60px;
}

.user-menu-item.form-row .password-mask {
    position: absolute;
    border: none !important;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    pointer-events: none;
}

.user-menu-item button {
    border: none !important;
    box-shadow: none !important;
    position: relative !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    padding: 16px !important;
}

.user-menu-message {
    margin-top: 70px !important;
}

#modal .view {
    display: none;
    opacity: 0.0;
    /* margin-top: -50px; */
    transform: scale(.9);
    transform-origin: top center;

    transition: all .4s;
}

#modal .view.absolute {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

#modal .fullscreen {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

#modal #modal-iframe {
    height: 100%;
    width: 100%;
    border: none;
}

#modal .view.visible {
    display: block;
}

#modal .view.active {
    opacity: 1.0;
    /* margin-top: 0px; */
    transform: scale(1.0);
}

#modal.showing-item .view,
#modal.showing-item #modal-content-down .button {
    display: none;
}

#modal-content-down .button.item,
.responsive-button-wrapper .button.item {
    border: none !important;
    /* background-color: rgba(245, 245, 245, .8); */
    background-color: rgba(255, 255, 255, .8);
    -webkit-backdrop-filter: saturate(1000%) blur(30px);
    backdrop-filter: saturate(1000%) blur(30px);
    border-radius: 20px;
    border-radius: 30px !important;
    margin: 10px;
    margin-bottom: 40px;
    /* box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2), 0px 4px 10px -6px rgba(0, 0, 0, 0.2); */
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2), 0px 4px 10px -6px rgba(0, 0, 0, 0.2), 0px 10px 50px rgba(0, 0, 0, .1);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    background-color: rgba(255, 255, 255, 0.92);
    background-color: rgba(255, 255, 255, 0.8);
}

body.dark #modal-content-down .button.item,
body.dark .responsive-button-wrapper .button.item {
    -webkit-backdrop-filter: saturate(100%) blur(30px);
    backdrop-filter: saturate(100%) blur(30px);
}

.responsive-button-wrapper .button.item {
    position: fixed;
    z-index: 999;
    bottom: 0px;
    left: 0px;
    right: 0px;
    padding: 15px !important;
    height: auto !important;
    text-align: left !important;
    border-radius: 40px;
}

#messages .responsive-button-wrapper .button.item {
    left: auto;
    bottom: auto;
    top: 39px;
    opacity: 0.0;
    z-index: 99999999999;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#messages .responsive-button-wrapper .button.item.floatable {
    top: 12px;
    right: -3px;
    opacity: 1;
    box-shadow: none !important;
}

.inspected {
    border: 2px dashed red !important;
}

.button.item .item-wrapper {
    margin: 0px;
}

.button.item .item-wrapper .item-card {
    width: 64px;
    height: 64px;
    border-radius: 20px;
    margin-top: 2px;
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.4), 0px 10px 50px rgba(0, 0, 0, .2);
}

.button.item .item-wrapper:hover .item-card {
    transform: scale(1.0);
}

.responsive-button-wrapper .button.item .item-details {
    display: inline-block;
    margin-top: 15px;
    margin-left: 5px;
}

.responsive-button-wrapper.payment .button.item .item-details {
    margin-top: 10px;
}

.responsive-button-wrapper .action-button {
    width: auto !important;
    padding: 2px 10px;
    font-weight: 300 !important;
    border-radius: 100px;
    float: right;
    margin-top: 26px;
    margin-right: 15px;
    max-width: 100px;
    height: 28px !important;
    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
    position: absolute;
    right: 0px;
    top: 10px
}

.responsive-button-wrapper .action-button[data-queue-id=""] {
    padding-right: 22px;
}

.responsive-button-wrapper .action-button[data-queue-id=""] .icon-right {
    top: 7px !important;
    right: 7px !important;
}

.responsive-button-wrapper.payment .action-button {
    /* padding: 2px 15px; */
    margin-top: 24px;
}

.parent.item-list-container .responsive-button-wrapper .action-button {
    padding: 5px 12px;
    background-color: #3284ff;
    color: #fff;
    border: none;
    font-size: 12px;
}

.child.user-info .responsive-button-wrapper .action-button {
    padding: 2px 13px 2px 10px;
}

.responsive-button-wrapper #action-button-floatable {
    bottom: -180px;
    transition: all .4s;
    pointer-events: none;
    /* box-shadow: none !important; */
}

.responsive-button-wrapper #action-button-floatable.floatable {
    bottom: 0px;
}

#modal.showing-attachment-details .responsive-button-wrapper #action-button-floatable.floatable {
    bottom: -130px;
}

.responsive-button-wrapper #action-button-floatable.fixed {
    bottom: 0px;
    margin: 0px;
    margin-left: -15px;
    margin-right: -15px;
    margin-bottom: 15px;
    border-radius: 0px;
    border-top: 1px solid rgba(0, 0, 0, .1) !important;
    transform: scale(1) !important;
}

body.dark .responsive-button-wrapper #action-button-floatable.fixed {
    border-top: 1px solid rgba(255, 255, 255, .06) !important;
}

.responsive-button-wrapper #action-button-floatable.floatable,
.responsive-button-wrapper #action-button-floatable.fixed {
    pointer-events: all;
}

#modal.message-attachment.showing-attachment-details .responsive-button-wrapper #action-button-floatable {
    display: none;
}

.responsive-button-wrapper .button.item .item-details .item-name {
    color: #000;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.responsive-button-wrapper .button.item .item-details .item-category {
    font-size: 12px;
    font-weight: 300;
}

.responsive-button-wrapper.payment .button.item .item-details .item-category,
.responsive-button-wrapper.attachment .button.item .item-details .item-category {
    max-width: 200px;
    white-space: break-spaces;
}

#conversation_details {
    z-index: 999999999;
    display: none;
    /* border: 1px dashed red; */
}

#modal:not(.showing-item) #modal-content-down .button.item {
    display: none;
}

#modal.showing-item #modal-content-down .button.item {
    display: block;
}

#modal.showing-item .view[data-view="item"] {
    display: block;
}

#modal.message-attachment #modal-content-down .responsive-button-wrapper #action-button-floatable {
    display: none !important;
}

/* #modal.message-attachment .message-buttons .buttons-row, */
#modal.message-attachment .preferences-list {
    display: none;
}

#modal #modal-button-back,
#modal #modal-button-close,
#modal #modal-button-close-parent-modal,
#wallet_card_close,
#wallet_card_save_location,
.message-maximized-helper-button {
    position: absolute;
    top: 0px;
    right: 0px;
    color: #888;
    cursor: pointer;
    font-size: 18px;
    font-weight: 400;
    z-index: 999;
    transition: all .4s;
    padding: 17px;
    display: none;
}

#modal #modal-button-close .icon,
#wallet_card_close,
#wallet_card_save_location {
    color: #fff;
    width: 30px;
    height: 30px;
    border-radius: 100px;
    text-align: center;
    padding-top: 7px;
    background-color: rgba(0, 0, 0, .2);
    -webkit-backdrop-filter: saturate(100%) blur(30px);
    backdrop-filter: saturate(100%) blur(30px);
    transition: all .4s;
}

#wallet_card_close,
#wallet_card_save_location {
    width: auto;
    height: 26px;
    padding: 2px;
    top: 46px;
    right: 15px;
    padding-left: 10px;
    padding-right: 10px;
    font-weight: 400;
    font-size: 14px;
    color: #000;
    background-color: rgba(0, 0, 0, .1) !important;
}

#wallet_card_save_location {
    right: 90px;
    padding-left: 15px;
    padding-right: 15px;
}

#wallet_card_save_location.pending {
    background-color: #3284ff !important;
    color: #fff;
}

#wallet_card_save_location {
    display: none;
}

#lokacija_korisnika_info {
    display: inline-block;
    float: right;
    margin-right: 10px;
    /* color: rgba(0, 0, 0, .6); */
}

body.showing-wallet-card #wallet_card_close,
body.showing-wallet-card #wallet_cards[data-user-id="0"] #wallet_card_save_location {
    display: block;
}

body.dark #modal #modal-button-close .icon,
body.dark #wallet_card_close {
    background-color: rgba(255, 255, 255, .4);
    color: #000;
}

body.dark #wallet_card_close,
body.dark #wallet_card_save_location {
    background-color: rgba(255, 255, 255, .4) !important;
    color: #000;
}

body.dark #modal #modal-button-close {
    /* background-image: url('/bundles/appcore/images/close_white.png'); */
}

body.dark .responsive-button-wrapper.attachment #action-button-floatable .user-picture-area {
    background-color: transparent;
}

body.dark #action-button-floatable .user-picture-area,
body.dark .user-picture-area {
    background-color: #333;
}

body.dark .user-icon {
    color: #fff;
}

#modal.showing-item #modal-button-close {
    display: block;
}

#modal-content.loading #modal-button-close {
    opacity: 0.0;
}

body.welcome-survey #modal-button-close {
    display: none !important;
}

#modal .button {
    display: block;
}

#modal .button.visible {
    display: none;
}

#modal-content-down .button,
.dynamic-modal-content-down .button,
.responsive-button-wrapper .button.item {
    display: block;
    font-size: 16px !important;
    font-weight: 500;
    color: #3284ff;
    text-align: center;
    height: 60px;
    padding-top: 19px;
    border-top: 1px solid rgba(0, 0, 0, .06);
    margin-bottom: 40px;
}

body[data-username=""] #modal #modal-content {
    bottom: 55px;
}

body[data-username=""] #modal #modal-content-down .button {
    margin-bottom: 0px;
}

.item-list-container .responsive-button-wrapper .button.item {
    color: #000;
}

#modal-content-down .button:last-child,
.dynamic-modal-content-down .button:last-child {
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

#modal-content-down .button:hover,
.dynamic-modal-content-down .button:hover {
    text-decoration: none;
}

#modal-content-down .button:active,
#modal-content-down .button.active {
    /* background-color: rgba(255, 255, 255, .4); */
    background-color: rgba(0, 0, 0, .05);
}

#modal-content .section-title.large {
    margin-bottom: 15px !important;
}

#modal-content .row:first-of-type .section-title.large {
    margin-bottom: 30px !important;
    font-size: 40px !important;
}

#modal-content-down .responsive-button-wrapper.attachment .action-button {
    display: block !important;
    border-radius: 100px !important;
    color: #fff !important;
    padding-top: 0px !important;
    padding: 2px 12px !important;
    background-color: #3284ff;
    /* font-size: 12px !important;
    font-weight: 400 !important; */
}

.card-category {
    position: relative;
}

.wallet-category {
    position: relative;
    margin-left: -15px;
    margin-right: -15px;

    -webkit-perspective: 100px;
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    /* -webkit-box-reflect: below 8px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(80%, transparent) , to(rgba(250, 250, 250, 0.2))); */
}

body.dark .wallet-category {
    /* -webkit-box-reflect: below 8px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(60%, transparent) , to(rgba(250, 250, 250, 0.25))); */
}

.card-category[data-category="o8oo"] .wallet-category {
    /* -webkit-box-reflect: below 8px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, transparent), to(rgba(250, 250, 250, 0.2))); */
}

body.dark .card-category[data-category="o8oo"] .wallet-category {
    /* -webkit-box-reflect: below 8px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, transparent), to(rgba(250, 250, 250, 0.4))); */
}

body.android .wallet-category {
    -webkit-box-reflect: unset !important;
}

.wallet-card {
    position: relative;
    border-radius: 20px;
    width: 100%;
    height: 220px;
    background-color: #fff;
    background-size: cover;
    background-position: center;

    transition: box-shadow .4s;
}

.wallet-card {
    box-shadow: 0px -10px 10px -16px rgba(0, 0, 0, .2), 0px 0px 5px rgba(0, 0, 0, .1), 0px 0px 0px 1px rgba(0, 0, 0, .1) inset;
}

.card-category.FOCUSED .wallet-card {
    box-shadow: 0px -10px 10px -9px rgba(0, 0, 0, .1), 0px 0px 10px rgba(0, 0, 0, .1), 0px 0px 0px 1px rgba(0, 0, 0, .1) inset;
}

body.dark .wallet-card {
    /* border: 1px solid rgba(0, 0, 0, .2); */
    background-color: #000;
    box-shadow: 0px -10px 10px -16px rgba(0, 0, 0, .2), 0px 0px 5px rgba(0, 0, 0, .1), 0px 0px 0px 1px rgba(0, 0, 0, .2) inset;
}

body.dark .card-category.FOCUSED .wallet-card {
    box-shadow: 0px -10px 10px -9px rgba(0, 0, 0, .2), 0px 0px 10px rgba(0, 0, 0, .1), 0px 0px 0px 1px rgba(0, 0, 0, .2) inset;
}

body.dark .wallet-card[data-id="0800.club"] {
    border: 1px solid #111;
    border-top: 1px solid #222;
    border-bottom: 1px solid #000;
}

.wallet-card[data-id="0800.prepaid"] .wallet-card-overlay.front {
    background-color: #fff;
}

.wallet-card[data-id="0800.club"] .wallet-card-overlay.front {
    background-color: #000;
}

.wallet-card[data-id="0800.prepaid"].preloaded .wallet-card-overlay.front,
.wallet-card[data-id="0800.club"].preloaded .wallet-card-overlay.front {
    background-color: transparent;
}

.wallet-card-overlay {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position-x: right;
    border-radius: 18px;
}

.wallet-card[data-id="0800.prepaid"] .wallet-card-overlay {
    background-position-x: center;
}

.wallet-card-overlay.background {
    margin: 15px;
}

.wallet-card[data-id="0800.prepaid"] .wallet-card-overlay.background {
    margin: 0px;
    margin-left: 15px;
    margin-right: 15px;
}

.wallet-card-overlay-background-container {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    border-radius: 10px;
    overflow: hidden;
}

.wallet-card-overlay-background-gradient {
    position: relative;
    height: 500px;
    width: 500px;
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position-x: center;
}

.card-category.collapsed .wallet-card {
    display: none;
}

.card-category.collapsed .wallet-card:nth-of-type(1), 
.card-category.collapsed .wallet-card:nth-of-type(2),
.card-category.collapsed .wallet-card:nth-of-type(3),
.card-category.collapsed .wallet-card:nth-of-type(4) {
    display: block;
}

.wallet-category .wallet-card {
    margin-top: -210px;
    transition: margin-top .4s;
    -webkit-perspective: 100px;
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
}

.wallet-category .wallet-card:first-of-type {
    margin-top: 0px !important;
}

.card-category:not(.collapsed) .wallet-category .wallet-card,
.card-category.FOCUSED .wallet-category .wallet-card {
    /* margin-top: -170px; */
}

.card-category:not(.collapsed) .wallet-category .wallet-card {
    margin-top: -170px;
}

#wallet_card_wrapper #wallet_card_title {
    position: absolute;
    z-index: 1;
    top: 50px;
    left: 0px;
    right: 0px;
    padding-left: 20px;
    padding-right: 20px;
    font-size: 20px;
    font-weight: 300;
}

#wallet_card_wrapper #wallet_card_placeholder {
    position: absolute;
    z-index: 1;
    top: 80px;
    left: 5px;
    right: 5px;
    transition: all .4s;
}

#wallet_card_wrapper.showing-steps #wallet_card_placeholder {
    z-index: 0;
    transform: scale(.94) translateY(-4px);
}

.wallet-card-icon,
.money-message-icon {
    position: absolute;
    top: 1px;
    left: 10px;
    height: 60px;
    width: 60px;
    border-radius: 100px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    text-align: left;
    padding-left: 10px;
    padding-top: 14px;
    font-size: 20px;
    font-weight: bold;
    white-space: nowrap;
    color: #fff;
}

.money-message-text {
    position: absolute;
    font-weight: bold;
    white-space: nowrap;
    color: #fff;
    top: 86px;
    /* border: 1px solid red; */
    width: auto;
    left: 0px;
    right: 0px;
    font-size: 50px;
    padding: 0px;
    text-align: center;
    /* text-shadow: 0px 0px 10px #f0e, 0px 0px 5px #f0e; */
}

.shadow-color-animation
{
    animation-name: shadow_color;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state: running;

    -webkit-animation-name: shadow_color;
    -webkit-animation-duration: 10s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-play-state: running;
}

@-ms-keyframes shadow_color { 
    0% { text-shadow: 0px 0px 10px transparent, 0px 0px 5px transparent; }
    10% { text-shadow: 0px 0px 10px #f00, 0px 0px 0px #f00; }
    20% { text-shadow: 0px 0px 10px #f0e, 0px 0px 5px #f0e; }
    30% { text-shadow: 0px 0px 20px #b900ff, 0px 0px px #b900ff; }
    40% { text-shadow: 0px 0px 10px #1200ff, 0px 0px 5px #1200ff; }
    50% { text-shadow: 0px 0px 20px #00bcff, 0px 0px 5px #00bcff; }
    60% { text-shadow: 0px 0px 10px #00ffe3, 0px 0px 0px #00ffe3; }
    70% { text-shadow: 0px 0px 20px #00ff2d, 0px 0px 5px #00ff2d; }
    80% { text-shadow: 0px 0px 10px #e9ff00, 0px 0px 5px #e9ff00; }
    90% { text-shadow: 0px 0px 20px #ffae00, 0px 0px 0px #ffae00; }
}
@-moz-keyframes shadow_color {
    0% { text-shadow: 0px 0px 10px transparent, 0px 0px 5px transparent; }
    10% { text-shadow: 0px 0px 10px #f00, 0px 0px 0px #f00; }
    20% { text-shadow: 0px 0px 10px #f0e, 0px 0px 5px #f0e; }
    30% { text-shadow: 0px 0px 20px #b900ff, 0px 0px px #b900ff; }
    40% { text-shadow: 0px 0px 10px #1200ff, 0px 0px 5px #1200ff; }
    50% { text-shadow: 0px 0px 20px #00bcff, 0px 0px 5px #00bcff; }
    60% { text-shadow: 0px 0px 10px #00ffe3, 0px 0px 0px #00ffe3; }
    70% { text-shadow: 0px 0px 20px #00ff2d, 0px 0px 5px #00ff2d; }
    80% { text-shadow: 0px 0px 10px #e9ff00, 0px 0px 5px #e9ff00; }
    90% { text-shadow: 0px 0px 20px #ffae00, 0px 0px 0px #ffae00; }
}
@-webkit-keyframes shadow_color {
    0% { text-shadow: 0px 0px 10px transparent, 0px 0px 5px transparent; }
    10% { text-shadow: 0px 0px 10px #f00, 0px 0px 0px #f00; }
    20% { text-shadow: 0px 0px 10px #f0e, 0px 0px 5px #f0e; }
    30% { text-shadow: 0px 0px 20px #b900ff, 0px 0px px #b900ff; }
    40% { text-shadow: 0px 0px 10px #1200ff, 0px 0px 5px #1200ff; }
    50% { text-shadow: 0px 0px 20px #00bcff, 0px 0px 5px #00bcff; }
    60% { text-shadow: 0px 0px 10px #00ffe3, 0px 0px 0px #00ffe3; }
    70% { text-shadow: 0px 0px 20px #00ff2d, 0px 0px 5px #00ff2d; }
    80% { text-shadow: 0px 0px 10px #e9ff00, 0px 0px 5px #e9ff00; }
    90% { text-shadow: 0px 0px 20px #ffae00, 0px 0px 0px #ffae00; }
}
@keyframes shadow_color {
    0% { text-shadow: 0px 0px 10px transparent, 0px 0px 5px transparent; }
    10% { text-shadow: 0px 0px 10px #f00, 0px 0px 0px #f00; }
    20% { text-shadow: 0px 0px 10px #f0e, 0px 0px 5px #f0e; }
    30% { text-shadow: 0px 0px 20px #b900ff, 0px 0px px #b900ff; }
    40% { text-shadow: 0px 0px 10px #1200ff, 0px 0px 5px #1200ff; }
    50% { text-shadow: 0px 0px 20px #00bcff, 0px 0px 5px #00bcff; }
    60% { text-shadow: 0px 0px 10px #00ffe3, 0px 0px 0px #00ffe3; }
    70% { text-shadow: 0px 0px 20px #00ff2d, 0px 0px 5px #00ff2d; }
    80% { text-shadow: 0px 0px 10px #e9ff00, 0px 0px 5px #e9ff00; }
    90% { text-shadow: 0px 0px 20px #ffae00, 0px 0px 0px #ffae00; }
}

.wallet-card[data-id="0800.prepaid"] .wallet-card-icon {
    color: #000;
    top: -2px;
}

.wallet-card[data-id="0800.club"] .wallet-card-icon {
    color: #fff;
    top: -2px;
}

.wallet-card-header-title {
    font-size: 16px;
    padding-top: 20px;
    padding-left: 90px;
    color: #000;
    font-weight: bold;
    display: none;
    /* text-shadow: 0px 1px 2px rgba(0, 0, 0, .1); */
    /* -webkit-text-stroke: 0px #fff; */
}

.wallet-bottom-link {
    display: block;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-top: 10px;
    color: #000;
    margin-bottom: 20px;
    opacity: 0;
    
    transition-delay: 0s;
    transform: translateY(-25px);
    transition: all 1s;
}

.card-category.FOCUSED .wallet-bottom-link,
.card-category:not(.collapsed) .wallet-bottom-link {
    opacity: 1;
    transform: translateY(0px);
}

.wallet-card-saldo {
    position: absolute;
    top: 10px;
    right: 15px;
    font-weight: bold;
    /* text-shadow: 0px 0px 1px rgba(0, 0, 0, .8); */
    font-size: 14px;
    color: #fff;
}

.wallet-card[data-id="0800.prepaid"] .wallet-card-saldo {
    color: #000;
}

#wallet_card_features {
    position: fixed;
    top: 120px;
    left: 5px;
    right: 5px;
    bottom: 0px;
    margin-right: 0px !important;
    margin-left: 0px !important;
    padding-top: 180px;
    overflow-y: scroll;
    padding-bottom: 50px;
}

#wallet_card_wrapper.showing-steps #wallet_card_features {
    position: fixed;
    top: 94px;
}

#wallet_card_feature_qr_code img,
#wallet_card_feature_qr_code canvas {
    margin: auto;
    padding-top: 20px;
    padding-bottom: 20px;
    height: 100%;
}

#wallet_card_feature_qr_code_value,
#wallet_card_feature_qr_code_image,
#wallet_card_feature_qr_code_camera {
    height: 100%;
}

#wallet_card_feature_bar_code_image {
    width: 100%;
    padding: 15px;
    margin-top: -33px;
}

#wallet_card_camera {
    position: absolute !important;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    /* border: 1px solid red;
    border-radius: 10px; */
}

#wallet_card_camera video {
    position: absolute;
    top: 0;
    left: 0px;
    right: 0px;
    bottom: 0px;
    width: 100%;
    z-index: -1000;
}

#wallet_card_camera canvas,
#wallet_card_camera video {
    width: 100%;
}

#wallet_card_feature_qr_code[data-display="code"] #wallet_code_carousel,
#wallet_card_feature_qr_code[data-display="camera"] #wallet_card_camera {
    display: block;
}

#wallet_card_feature_qr_code[data-display="camera"] #wallet_code_carousel,
#wallet_card_feature_qr_code[data-display="code"] #wallet_card_camera,
#wallet_card_feature_qr_code[data-display="camera"] .title-display[data-display="code"],
#wallet_card_feature_qr_code[data-display="code"] .title-display[data-display="camera"] {
    display: none;
}

#wallet_card_feature_qr_code[data-display="camera"] .title-display[data-display="camera"],
#wallet_card_feature_qr_code[data-display="code"] .title-display[data-display="code"] {
    display: inline;
}

.wallet-card-feature.max #wallet_card_feature_bar_code_image {
    padding: 0px;
    width: 100%;
    height: 60%;
    margin-top: -30px;
}

#wallet_code_carousel {
    position: absolute;
    top: 0px;
    bottom: 0px !important;
    left: 0px;
    right: 0px;
    /* border: 1px dashed red; */
    margin-left: 0px;
    margin-right: 0px;
    height: auto;
    margin-bottom: 0px;
    -webkit-box-reflect: unset !important;
    box-shadow: none;
    margin-top: 0px;
    border-radius: 0px;
    z-index: 0;
    transition: none;
}

#wallet_code_carousel:active {
    transform: none !important;
}

#category-carousel .item .modal-link {
    height: 100%;
}

.wallet-card-feature.max #wallet_code_carousel {
    top: 40px;
}

.wallet-card-feature-buttons {
    position: absolute;
    bottom: 20px;
    left: 0px;
    right: 0px;
    text-align: center;
}

#wallet_card_feature_qr_code #wallet_card_camera_button .button-text {
    display: none;
}

#wallet_card_feature_qr_code[data-display="camera"] #wallet_card_camera_button .button-text[data-display="camera"],
#wallet_card_feature_qr_code[data-display="code"] #wallet_card_camera_button .button-text[data-display="code"] {
    display: block;
}

.wallet-card-feature-button {
    display: inline-block;
    padding: 10px;
    padding-left: 30px;
    padding-right: 30px;
    font-weight: 400;
    font-size: 18px;
    color: #000;
    background-color: rgba(200, 200, 200, .4) !important;
    border-radius: 100px;
    -webkit-backdrop-filter: saturate(100%) blur(4px);
    backdrop-filter: saturate(100%) blur(4px);
    /* pointer-events: none;
    display: none; */
}

/* body[data-username="nenad.kuren@knowhow.hr"] .wallet-card-feature-button {
    pointer-events: all;
    display: inline-block;
} */

.index-token-button {
    position: absolute;
    bottom: 0px;
    right: 6px;
    font-size: 30px;
    color: #888;
    padding: 10px;
    width: 50px;
    height: 50px;
    z-index: 1;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;

    display: none;
    /* display: block; */
}

.id-card-button {
    position: absolute;
    bottom: -10px;
    right: -5px;
    font-size: 25px;
    color: #01734b;
    padding: 25px;
    z-index: 1;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    /* box-shadow: 0px 0px 0px 1px red; */
    border-radius: 100px;
    transition: all .4s;
    display: none;
    /* display: block; */    
}

body[data-username="hls@0800.hr"] .id-card-button,
body[data-username="hls3@0800.hr"] .id-card-button {
    /* display: block;; */
}

body[data-url="/messages"] .id-card-button {
    display: none !important;
}

.id-card-button.clicked {
    color: #01734b;
}

.index-token-button.clicked  {
    color: #14204e;
}

/* body[data-username="nenad.kuren@knowhow.hr"][data-url="/"] .index-token-button,
body[data-username="nenad.kuren@knowhow.hr"][data-url="/wallet"] .index-token-button,
body[data-username="nenad.kuren@knowhow.hr"][data-url="/profile"] .index-token-button {
    display: block;
} */

body[data-url="/"] .index-token-button,
body[data-url="/wallet"] .index-token-button,
body[data-url="/profile"] .index-token-button {
    display: block;
}

body.dark .wallet-card-feature-button {
    background-color: rgba(255, 255, 255, .4) !important;
}

#wallet_card_feature_saldo_buttons {
    padding: 0px 15px;
}

.wallet-card-feature.max #wallet_card_feature_saldo_buttons {
    padding-top: 30px;
}

#wallet_card_feature_saldo_button_prepaid,
#wallet_card_feature_saldo_button_club,
#wallet_card_feature_saldo_button_club_activate {
    height: 45px;
    width: 100%;
    padding: 0px;
    text-align: center;
    padding-top: 9px;
    background-color: #000 !important;
    color: #fff;
    margin-top: 10px;
    position: relative;
}

#wallet_card_feature_saldo_button_prepaid {
    background-color: #3284ff !important;
}

#wallet_card_feature_saldo_button_club_activate {
    background-color: #4fc450 !important;
}

#wallet_card_feature_qr_code_value img,
#wallet_card_feature_qr_code_value canvas {
    display: block;
    height: 100%;
}

#wallet_card_feature_qr_code.wallet-card-feature.max img,
#wallet_card_feature_qr_code.wallet-card-feature.max canvas {
    padding: 20px;
    height: auto;
    width: 100%;
}

#wallet_card_feature_qr_code.wallet-card-feature.max #wallet_card_camera canvas,
#wallet_card_feature_qr_code.wallet-card-feature.max #wallet_card_camera video {
    height: 100% !important;
    width: auto !important;
    padding: 0px !important;
    margin-top: 0px !important;
    position: absolute !important;
    left: 0px !important;
    right: 0px !important;
    margin: auto !important;
    transform: translateX(-50%) !important;
    left: 50% !important;
}

#qr_code_reader {
    position: relative;
    width: 100%;
    height: 100%;
    border: none;
}

.wallet-card-feature-title-value .timeout {
    color: rgba(0, 0, 0, .6);
}

body.dark .wallet-card-feature-title-value .timeout {
    color: rgba(255, 255, 255, .4);
}

.wallet-card-feature-col {
    padding-left: 5px !important;
    padding-right: 5px !important;
}

.card-specific {
    display: none;
}

#wallet_card_wrapper[data-id="0800.club"] .card-specific[data-id="0800.club"],
#wallet_card_wrapper[data-id="0800.prepaid"] .card-specific[data-id="0800.prepaid"] {
    display: block;
}

#wallet_card_wrapper[data-id="0800.club"] #wallet_card_feature_saldo_button_club,
#wallet_card_wrapper[data-id="0800.prepaid"] #wallet_card_feature_saldo_button_club {
    display: none;
}

#wallet_card_wrapper:not([data-id="0800.club"]):not([data-id="0800.prepaid"]) #wallet_card_feature_saldo_button_club {
    display: block;
}

.wallet-card-feature {
    position: relative;
    font-weight: 400;
    font-size: 14px;
    color: #000;
    background-color: rgba(255, 255, 255, .3);
    box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, .05);
    /* -webkit-backdrop-filter: saturate(300%) blur(30px);
    backdrop-filter: saturate(300%) blur(30px); */
    min-height: 150px;
    border-radius: 20px;
    margin-top: 10px;
}

#wallet_card_feature_qr_code {
    height: 150px;
}

.wallet-card-feature.max {
    position: fixed;
    height: auto;
    left: 10px;
    right: 10px;
    bottom: 30px;
    top: 300px;
    background-color: rgba(255, 255, 255, .5);
    -webkit-backdrop-filter: blur(100px);
    backdrop-filter: blur(100px);
    z-index: 999999999;
    overflow: hidden;
}

#wallet_card_qr_code_steps {
    font-weight: 400;
    font-size: 14px;
    color: #000;
    box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, .05);
    min-height: 150px;
    border-radius: 20px;
    margin-top: 10px;

    position: fixed;
    height: 200px;
    left: 15px;
    right: 15px;
    bottom: auto;
    top: 100px;
    background-color: rgba(255, 255, 255, .9);
    border: 1px solid rgba(0, 0, 0, .1);
    -webkit-backdrop-filter: saturate(200%) blur(10px);
    backdrop-filter: saturate(200%) blur(10px);
    z-index: 1;
    margin-left: -5px;
    margin-right: -5px;
    opacity: 1.0 !important;
    transition: top .4s;

    display: none;
}

#wallet_card_wrapper.showing-steps #wallet_card_qr_code_steps {
    display: block;
    top: 85px;
}

.wallet-card-steps {
    padding-left: 10px;
    padding-right: 10px;
}

.wallet-card-step {
    position: relative;
    font-size: 16px;
    font-weight: 300;
    padding: 5px;
    padding-top: 7px;
    padding-bottom: 7px;
    /* border-bottom: 1px dotted rgba(0, 0, 0, .2); */
}

.wallet-card-step:not(:last-of-type) {
    border-bottom: 1px dotted rgba(0, 0, 0, .2);
}

.wallet-card-step .loading-ikona {
    float: right;
    color: #3284ff;
    font-size: 12px;
    padding-top: 8px;

    transition: all .4s;
}

#wallet_card_qr_code_steps_bill_amount {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    margin-top: 1px;
    text-decoration: none;
    font-weight: 400;
    padding: 7px 5px 0px 30px;
}

.wallet-card-step .icon {
    display: inline-block;
    vertical-align: bottom;
    border: 2px solid #000;
    width: 25px;
    height: 25px;
    border-radius: 100px;
    font-size: 15px;
    text-align: center;
    padding-top: 4px;
    color: #3284ff;
}

.wallet-card-step:not(.checked) .icon::before {
    content: "" !important;
}

.wallet-card-step .loading-ikona {
    opacity: 0;
}

.wallet-card-step.loading .loading-ikona {
    opacity: 1;
}

.wspay-item {
    position: relative;
    background-color: rgba(255, 255, 255, .9);
    /* -webkit-backdrop-filter: saturate(1000%) blur(30px);
    backdrop-filter: saturate(1000%) blur(30px); */
    padding: 25px 10px;
    border-radius: 20px;
    box-shadow: 0px 5px 15px -12px rgba(0, 0, 0, .8);
    margin-top: -35px;
}

body.dark .wspay-item {
    background-color: rgba(4, 0, 42, 0.8);
    /* backdrop-filter: saturate(100%) blur(30px);
    -webkit-backdrop-filter: saturate(100%) blur(30px); */
    box-shadow: 0px 0px 0px 1px rgb(255 255 255 / 15%);
}

.wspay-item .wspay-item-image {
    position: relative;
    width: 90px;
    height: 90px;
    background-size: cover;
    border-radius: 25px;
}

.wspay-item .wspay-item-name {
    font-size: 17px;
    font-weight: 500;
    position: absolute;
    top: 32px;
    left: 0px;
    padding-left: 110px;
    right: 0px;
    width: 100%;
}

.wspay-item .wspay-item-company {
    font-size: 12px;
    font-weight: 300;
}

.wspay-item .wspay-item-price {
    font-size: 25px;
    font-weight: bold;
    position: absolute;
    top: 75px;
    left: 0px;
    padding-left: 110px;
    right: 0px;
    width: 100%;
}

#payment_barcode {
    text-align: center;
}

#payment_barcode_title {
    text-align: center;
}

.payment-title {
    text-align: center;
    margin-top: 100px;
}

#payment_barcode canvas {
    display: inline-block;
    width: 100%;
    /* border-radius: 20px; */
}

body.dark #payment_barcode canvas {
    padding: 10px;
    background-color: #fff;
}

#wallet_card_feature_qr_code.max {
    height: auto;
}

.wallet-card-feature .max-item {
    display: none;
}

.wallet-card-feature.max .max-item {
    display: block;
}

body.android .wallet-card-feature.max {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    /* background-color: #282633!important; */
}

#wallet_card_features.showing-feature .wallet-card-feature:not(.max) {
    opacity: 0;
}

.wallet-card-feature-title {
    color: #000;
    padding: 5px 15px;
    font-weight: 500;
}

#wallet_card_feature_qr_code[data-display="camera"] .wallet-card-feature-title {
    position: relative;
    background-color: rgba(200, 200, 200, .4) !important;
    -webkit-backdrop-filter: saturate(100%) blur(4px);
    backdrop-filter: saturate(100%) blur(4px);
    z-index: 1;
}

#wallet_card_feature_qr_code[data-display="camera"] #wallet_card_feature_qr_code_value {
    overflow: hidden;
}

#wallet_card_feature_qr_code[data-display="camera"] .wallet-card-feature-title .arrow {
    opacity: 1.0;
}

.wallet-card-feature-description {
    color: #000;
    padding: 5px 15px;
    font-weight: 300;
    white-space: break-spaces;
    max-height: 105px;
    overflow: hidden;
}

.wallet-card-feature-content {
    position: absolute;
    top: 35px;
    bottom: 0px;
    overflow: hidden;
    overflow-y: scroll;
    left: 0px;
    right: 0px;
}

“   .max .wallet-card-feature-content {
    top: 40px;
}

.wallet-card-feature #messages {
    padding-left: 5px;
    padding-right: 5px;
}

.wallet-card-feature .item-list .list-item {
    padding-left: 5px;
}

.wallet-card-feature #messages .item-list .user-info {
    margin-top: 12px !important;
    margin-left: 5px !important;
}

.wallet-card-feature .item-list .user-info .user-name, 
.wallet-card-feature .item-list .item-info .item-name {
    font-size: 14px;
}

.wallet-card-feature #messages .item-list .user-info .message-body {
    font-size: 12px;
    top: 40px;
    width: 180px;
}

.wallet-card-feature #messages .item-list .user-info .user-created {
    top: 40px;
    right: 10px;
    font-size: 12px;
    background-color: transparent !important;
    padding: 0px;
}

.wallet-card-feature #messages .transaction-value {
    position: absolute;
    top: 22px;
    right: 10px;
    font-weight: bold;
}

.wallet-card-feature-description-short {
    color: #000;
    padding: 5px 15px;
    font-weight: 200;
}

.wallet-card-feature.max .wallet-card-feature-description {
    max-height: none;
    overflow-y: scroll;
    position: absolute;
    top: 40px;
    bottom: 0px;
}

body.dark .wallet-card-feature-description,
body.dark .wallet-card-feature-description-short {
    color: #fff;
}

.wallet-card-feature.max .wallet-card-feature-title {
    font-size: 20px;
    font-weight: bold;
}

.wallet-card-feature.max .wallet-card-feature-title.subtitle {
    margin-top: 50px;
    margin-bottom: 20px;
    /* border-top: 1px solid rgba(0, 0, 0, .1); */
}

body.dark .wallet-card-feature.max .wallet-card-feature-title.subtitle {
    /* border-top: 1px solid rgba(255, 255, 255, .1); */
}

.wallet-card-feature-title .arrow {
    float: right;
    margin-top: 6px;
    transition: all .2s;
    opacity: .2;
    transform: rotateZ(0deg);
}

.wallet-card-feature.max .wallet-card-feature-title .arrow {
    transform: rotateZ(90deg);
}

.visible-max {
    display: none;
}

.wallet-card-feature.max .visible-max {
    display: block;
}

.wallet-card-feature-value {
    color: #000;
    padding: 5px 15px;
    font-weight: bold;
    font-size: 25px;
}

body.dark .wallet-card-feature-title {
    color: #fff;
}

body.dark #wallet_card_qr_code_steps .wallet-card-feature-title {
    color: #000;
}

body.dark .wallet-card-feature-value {
    color: #fff;
}

body.dark .wallet-card-feature {
    background-color: rgba(255, 255, 255, .05);
}

body.dark .wallet-bottom-link {
    color: #888;
}

.wallet-bottom-link,
.wallet-bottom-link:active,
.wallet-bottom-link:hover {
    text-decoration: none;
    color: #000;
}

body.dark .wallet-bottom-link,
body.dark .wallet-bottom-link:active,
body.dark .wallet-bottom-link:hover {
    text-decoration: none;
    color: #fff;
}

.card-category .child-category-title .link-more {
    padding-right: 24px;
    padding-bottom: 1px;
    font-size: 14px;
    font-weight: bold;
    color: #000;
}

body.dark .card-category .child-category-title .link-more {
    color: #fff;
}

.card-category[data-cards-length="0"] {
    display: none;
}

.card-category[data-cards-length="1"] .link-more, 
.card-category[data-cards-length="2"] .link-more,
.card-category[data-cards-length="3"] .link-more,
.card-category[data-cards-length="4"] .link-more {
    /* display: none; */
    opacity: 0;
    pointer-events: none;
}

.card-category .child-category-title .link-more {
    opacity: 1;
    pointer-events: none;
}

.card-category .child-category-title .link-more.sum {
    padding-right: 9px;
    background-color: transparent;
    box-shadow: none !important;
    font-weight: bold !important;
}

.card-category.collapsed .link-more .collapsed-value {
    display: inline;
    font-size: 13px;
    line-height: 18px;
    padding: 5px 10px 5px 10px;
    /* background-color: #fff; */
    text-decoration: none;
    border-radius: 100px;
    color: #3284ff;
    font-weight: 500 !important;
    box-shadow: 0px 0px 0px 1px #3284ff inset;
}

body.dark .card-category.collapsed .link-more .collapsed-value {
    box-shadow: 0px 0px 0px 1px #3284ff inset;
    /* background-color: #060028; */
}

.card-category.collapsed .link-more .non-collapsed-value {
    display: none;
}

.card-category:not(.collapsed) .link-more .collapsed-value {
    display: none;
}

.card-category:not(.collapsed) .link-more .non-collapsed-value {
    display: inline;
    font-size: 13px;
    line-height: 18px;
    padding: 5px 10px 5px 10px;
    /* background-color: #fff; */
    text-decoration: none;
    border-radius: 100px;
    color: #3284ff;
    font-weight: 500 !important;
    box-shadow: 0px 0px 0px 1px #3284ff inset;
}

body.dark .card-category:not(.collapsed) .link-more .non-collapsed-value {
    box-shadow: 0px 0px 0px 1px #3284ff inset;
    /* background-color: #060028; */
}

.modal-message-window .section-title.popover-title,
.user-content .section-title.popover-title {
    margin-bottom: 30px !important;
    font-size: 40px !important;

    margin: 0px !important;
    margin-bottom: 25px !important;
    background: none;
    border: none;

    font-size: 50px !important;
    margin-top: 0px !important;
    white-space: nowrap !important;
    margin-left: -20px !important;
    width: auto !important;
    margin-right: -20px !important;
    overflow: hidden !important;
    text-overflow: ellipsis;
}

.modal-message-window .section-title.popover-title {
    font-size: 30px !important;
}

#invitation-wrapper {
    position: fixed;
    z-index: 9999999999;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);

    display: none;
}

.invitation {
    padding: 70px 20px 80px;
    border-radius: 20px;
    text-align: center;
    background-color: rgb(255, 188, 9);
    color: #fff;
    box-shadow: 0px 10px 9px -5px rgba(0, 0, 0, .2);
    position: fixed;
    z-index: 1;
    left: 0px;
    right: 0px;
    top: 140px;

    opacity: 1.0;
    transform: scale(1.0);
    transition: top .2s, left .2s, right .2s, bottom .2s, padding .2s, transform 1s;
    overflow: scroll;
}

body.dark .invitation {
    color: #000;
}

.user-content.profile .invitation {
    left: 10px;
    right: 10px;
}

.invitation-header-button {
    position: absolute;
    top: 0px;
    right: -10px;
    height: 45px;
    min-width: 45px;
    text-align: center;
    padding-top: 0px;
    padding-right: 10px;
}

.invitation-header-button-title {
    display: inline-block;
    padding-top: 12px;
    font-size: 16px;
    font-weight: 500;
    padding-right: 25px;
}

.invitation-header-button-icon {
    position: absolute;
    top: 13px;
    right: 10px;
}

.invitation-code {
    -webkit-box-reflect: below -26px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, transparent) , to(rgba(250, 250, 250, 0.9)));
    color: #fff;
    text-shadow: 0px 1px 0px rgba(0, 0, 0, .2);
    font-weight: 500;
    font-size: 40px;
}

body.dark .invitation-code {
    color: #000;
    -webkit-box-reflect: below -26px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, transparent) , to(rgba(250, 250, 250, 0.5)));
}

.invitation-code-letter {
    display: inline-block;
    width: 40px;
    text-align: center;
}

.invitation-header {
    position: absolute;
    top: 0px;
    left: 10px;
    right: 10px;
    font-size: 20px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, .4);
    padding-bottom: 5px;
    padding-left: 10px;
    padding-top: 10px;
}

body.dark .invitation-header {
    border-bottom: 1px solid rgba(0, 0, 0, .1);
}

.invitation-title {

}

.invitation-footer {
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
    color: #333;
    font-size: 10px;
    white-space: normal;
    padding: 10px 0px;
}

body.dark .invitation-footer {
    color: #000;
}

#modal-content .row:last-of-type {
    margin-bottom: 130px !important;
}

.message .popover-title {
    margin: 0px !important;
    padding: 11px 0px 10px 0px !important;
    background-color: transparent !important;
    color: #000;
    font-size: 14px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom: 1px solid #ddd;
}

.message.to .popover-title {
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

body.dark .message .popover-title {
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

#modal-content .message .section-title.large {
    margin-bottom: 0px !important;
}

.message .item-description {
    display: none;
}

.modal-message .message-notice,
.payment.message-notice {
    text-align: center;
    display: block;
    padding: 30px;
    color: #888;
    color: #000;
}

body.dark .modal-message .message-notice,
body.dark .payment.message-notice {
    color: #888;
}

.payment.message-notice {
    padding: 30px 10px;
}

.payment.message-notice.subtitle {
    padding-bottom: 0px;
}

.payment.message-notice.subtitle.friends {
    white-space: normal;
    padding-bottom: 40px;
    margin-top: -40px;
}

.message .item-info {
    color: #000;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}

.message.to .item-info {
    color: #fff;
}

body.dark .message .item-info {
    color: #fff;
}

.message .list-item > .item-info {
    margin: 0px !important;
}

.message .item-name {
    font-size: 13px !important;
    font-weight: 300 !important;
    word-break: normal;
}

.message .item-list .list-item {
    border-top: none !important;
    padding: 0px !important;
    margin-left: 3px;
    margin-right: 3px;
    max-height: 210px;
    overflow: hidden;
}

.message .item-info .list-item:last-of-type .user-form-table {
    border-bottom: 0px !important;
}

.message .user-form-input {
    background-color: transparent !important;
    color: #000 !important;
}

.message.to .user-form-input {
    color: #fff !important;
}

body.dark .message .user-form-input {
    color: #fff !important;
}

.message[data-type="form"] .body,
.message[data-type="payment"] .body {
    max-width: 50%;
    padding: 0px;
}

.message-conversation .message.from[data-type="payment"]  .body {
    /* background-color: #000; */
    /* background-image: url(/bundles/appcore/images/o8oo_card.png), url(/bundles/appcore/images/o8oo_card_preload.png);
    background-size: cover; */
}

.message-conversation .message.from[data-type="payment"] .tail {
    /* color: #000; */
}

body.dark .message-conversation .message.from[data-type="payment"] .body {
    background-color: #222;
}

body.dark .message-conversation .message.from[data-type="payment"] .tail {
    color: #222;
}

body.dark .message.from[data-type="payment"] .popover-title {
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

body.dark .message.from[data-type="payment"] .item-info {
    color: #fff;
}

body.dark .message.from[data-type="payment"] .user-form-input {
    color: #fff !important;
}

.message .user-form-table {
    border-bottom: 1px solid #ddd;
}

.message.to .user-form-table {
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

body.dark .message.from[data-type="payment"] .user-form-table {
    /* border-bottom: 1px solid rgba(255, 255, 255, .1); */
    /* border-bottom: 1px solid #ccc; */
}

body.dark .message .user-form-table {
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.message .user-form-input {
    pointer-events: none;
    resize: none;
}

.file-container {
    position: relative;
    height: auto;
    border: 0px dashed #aaa;
    background-color: transparent;
    transition: none;
    border-radius: 15px;
    overflow: hidden;
}

.message .file-container {
    height: 180px;
    width: 160px;
    white-space: nowrap;
}

.file-container .file-list {
    display: inline-block;
}

.file-container .file {
    position: relative;
    display: inline-block;
    margin-left: 10px;
    margin-right: 10px;
    vertical-align: top;
    transition: all .4s;
    color: #555;
    text-decoration: none !important;
}

.modal .file-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.modal .file-container .file {
    margin: 0px;
}

.attachment-details .file-container .file {
    width: 100%;
}

.modal .file-container #file_upload:not(:only-child) {
    display: none;
}

.file-container .file::-moz-focus-inner {
    border: 0;
}

.file-container .file:hover {
    cursor: pointer;
}

.file .icon .file-type-icon {
    width: 50px;
    margin-left: 21px;
    border-radius: 4px;
    font-size: 20px;
    height: 60px;
    padding-top: 15px;
    margin-top: -16px;
    box-shadow: 0px 4px 10px -2px #888, 0px 0px 0px 1px rgba(0, 0, 0, .1) inset;
    color: #fff;
    text-shadow: 3px 1px 2px rgba(0, 0, 0, .5);
    transform: perspective(100px) translateX(-8px) rotateY(-35deg);
    font-weight: 400;
    transition: all .4s;
}

.file.opened .icon .file-type-icon {
    transform: perspective(50px) translateX(-16px) rotateY(-45deg);
}

.attachment-details-actions {
    
}

.attachment-details-actions .button {
    color: #3284ff;
    text-align: center;
    padding: 15px;
    text-decoration: none !important;
}

.attachment-details-actions .button.red {
    color: red;
}

.attachment-details-actions .button.gray {
    color: #888;
}

.attachment-details-actions .button:not(:last-of-type) {
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    padding-bottom: 20px;
}

body.dark .attachment-details-actions .button:not(:last-of-type) {
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.attachment-details-actions .button:last-of-type {
    padding-top: 20px;
    padding-bottom: 30px;
}

.file .icon.preview {
    border: 1px solid #e3e3e3;
    border-radius: 6px;
    background-color: #f9f9f9;
    overflow: hidden;
    background-image: none !important;
}

.file .icon .preview {
    position: absolute;
    left: -2px;
    right: -2px;
    bottom: -2px;
    top: -2px;
    background-size: cover;
    background-position: center;
}

body.dark .file .icon .preview {
    background-color: #060028;
}

.file .icon .file-type-icon-paper {
    height: 50px;
    width: 50px;
    background-color: #fff;
    box-shadow: 0px 4px 10px -2px rgba(0, 0, 0, .2), 0px 0px 0px 1px rgba(0, 0, 0, .1) inset;
    position: absolute;
    top: 42px;
    left: 50%;
    border-radius: 4px;
    margin-left: -22px;
    top: 50%;
    margin-top: -22px;
}

.file-container .file:active {
    transform: scale(.95);
}

.file-container .file #file_attachment {
    position: absolute;
    border: 1px dashed red;
    top: 0px;
    bottom: 0px;
    left: 0px;
    width: 100%;
    z-index: 1;
    opacity: 0;
}

.qq-uploader {
    width: 100% !important;
    height: 100% !important;
}

.fileupload-preview {
    display: none;
}

.qq-upload-button {
    width: 100%;
    height: 100% !important;
    position: absolute !important;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

.file-container .file #file_attachment input[type="file"] {
    height: 100%;
    border: 1px solid blue;
    width: 100%;
}

.message .file-container .file {
    position: absolute;
    top: 10px;
    display: none;
    pointer-events: none;
}

.message .file-container .file .filename {
    display: none;
}

.message .file-container .file.uploaded:nth-last-of-type(1) {
    display: block;
    /* transform: scale(.8) translateY(28px); */
    /* z-index: 4; */
    transform: translateY(0px) rotate(0deg);
}

.message .file-container .file.uploaded:nth-last-of-type(2) {
    display: block;
    /* transform: scale(.92) translateY(11px); */
    /* z-index: 3; */
    transform: translateY(2px) rotate(-10deg);
}

.message .file-container .file.uploaded:nth-last-of-type(3) {
    display: block;    
    /* z-index: 2; */
    transform: translateY(2px) rotate(-20deg);
}

.message .file-container .file.uploaded:nth-last-of-type(4) {
    /* display: block; */
    /* z-index: 1; */
    transform: translateY(2px) rotate(20deg);
}

.message .file-container .file:only-child {
    display: block;
    transform: translateY(2px) rotate(0deg);
}

.file-container .file .icon {
    position: relative;
    width: 96px;
    height: 128px;
    margin: auto;
    background-size: 96px 128px;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('/bundles/appcore/images/report.png');
    text-align: center;
    font-size: 30px;
    padding-top: 55%;
    padding-left: 2px;
    color: #007aff;
}

.attachment-details .file-container .file .icon {
    position: relative;
    width: 115px;
    height: 154px;
    background-size: 115px 154px;
    padding-top: 60px;
    padding-left: 3px;
    margin-top: 120px;
}

.attachment-details .file-container .file .icon.preview {
    width: 100%;
    height: 300px;
    margin: 0px;
    padding: 0px;
    border-radius: 0px !important;
    background-color: transparent;
}

.modal.showing-attachment-details .attachment-details .file-container .file .icon.preview {
    height: 100%;
    overflow-y: scroll;
    border: 0px;
}

@keyframes animatedPreview {
    from {
        background-size: 100%;
    }
    to {
        background-size: 110%;
    }
}

.attachment-details .file-container .file .icon.preview .preview {
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}

.file .icon .preview.details {
    display: none;
    width: 100%;
}

.modal.showing-attachment-details .attachment-details .file-container .file .icon .preview {
    display: none;
}

.modal.showing-attachment-details .attachment-details .file-container .file .icon .preview.details {
    display: block;
    position: absolute;
    top: auto;
    bottom: auto;
    width: 100%;
    padding-bottom: 135px;
    padding-top: 55px;

    top: 0px;
    padding-top: 0px;
    transition: top .4s;

    /* top: 50%;
    transform: translateY(-50%); */
}

#modal.message-attachment.showing-attachment-details .attachment-details .file-container .file .icon .preview.details {
    padding-bottom: 0px;
}

.attachment-details .file-placeholder {
    border-radius: 0px;
}

.attachment-details .file .icon .file-type-icon {
    margin-left: 30px;
    margin-top: -10px;
}

#file_upload .icon {
    transition: all .4s;
}

.file .corner-icon {
    color: #aaa;
    position: absolute;
    top: 0px;
    right: 0px;
    font-size: 14px;
    z-index: 2;
    cursor: default;
    display: none;
}

.file:hover .options-icon,
.file.popover-opened .options-icon {
    display: block;
    transition: all .4s;
}

.file .options-icon:hover {
    color: #007aff;
    cursor: pointer;
}

.file.popover-opened .options-icon {
    transform: rotateX(-180deg);
}

.popover .delete-file-button {
    color: red !important;
}

#file_upload .error-icon {
    color: #e83c2a;
}

#file_upload.error .error-icon {
    display: block;
}

#file_upload.upload_in_progress .icon {
    color: transparent;
}

.file-container .file .filename {
    width: 96px;
    text-align: center;
    font-size: 12px;
    margin-top: 5px;
    margin-bottom: 15px;
    white-space: normal;
}

body.dark .file-container .file .filename { 
    color: #fff;
}

.file-container .file:hover .filename {
    text-decoration: none;
}

.attachment-details .file-container .file .filename {
    font-size: 20px;
    font-weight: 400;
    text-shadow: 0px 2px 1px rgba(0, 0, 0, .1);
    width: 100%;
    padding-left: 15%;
    padding-right: 15%;
}

#modal.message-attachment.showing-attachment-details .attachment-details .file-container .file .filename {
    display: none;
}

#file_attachment_progress_container {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    width: 100%;
    opacity: .2;
    display: none;
}

.message #file_attachment_progress_container {
    display: none;
}

#file_attachment_progress {
    stroke-dashoffset: 0px;
    transition: stroke-dashoffset .4s linear;
    stroke: #007aff;
    stroke-width: 20px;
}

#file_attachment_progress_value {
    color: #007aff;
    font-size: 10px;
    position: absolute;
    top: 50%;
    margin-top: -1px;
    left: 0px;
    right: 0px;
    z-index: 3;
    font-family: "SFNText", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    transition: all .4s;
    opacity: 0;
}

#file_upload.upload_in_progress #file_attachment_progress_value {
    opacity: 1;
}

.message-conversation .message[data-attachment] {

}

.message-conversation .message[data-attachment] .body {
    padding: 0px;
}

.message-conversation .message[data-attachment] .popover-title,
.message-conversation .message[data-attachment] .item-name {
    display: none;
}

.message-conversation .message[data-attachment] .list-item {
    margin: 0px;
}

.message-conversation .message[data-attachment] .file-container.preview-attachment {
    height: 200px;
    width: 160px;
}

.message-conversation .message[data-attachment] .item-list .list-item {
    max-height: 280px;
}

.message-conversation .message[data-attachment] .file-container .file {
    top: 0px;
}

.message-conversation .message[data-attachment] .file-container #file_upload {
    display: none;
}

.message-conversation .message[data-attachment] .file-container .file .icon {
    width: 130px;
    height: 160px;
    border-radius: 15px;
    border: 0px;
    margin-top: 5px;
}

.message-conversation .message[data-attachment] .file-container .file .icon.preview {
    width: 150px;
    height: 190px;
    border-radius: 15px;
    border: 0px;
    margin-top: 5px;
}

.message-conversation .message[data-attachment] .file-container .file .icon.preview {
    box-shadow: 0px 2px 5px -3px rgba(0, 0, 0, .9);
}

.message-conversation .message[data-attachment] .tail {
    bottom: 3px;
}

body:not(.android) .message-conversation .message.to[data-attachment] .tail {
    bottom: 6px;
    right: 11px;
}

.message-conversation .message[data-attachment] .file .icon .file-type-icon {
    margin-left: 37px;
    margin-top: -19px;
}

#main_menu {
    display: none;
}

#main_menu .main-menu-item {
    position: relative;
    display: inline-block;
    height: 80px;
    width: 20%;
    color: #888;
    font-size: 22px;
    text-align: center;
    padding-top: 12px;
    text-decoration: none !important;
    /* transition: color .4s; */
}

#main_menu .main-menu-item:active,
#menu_button:active,
#main_menu .main-menu-item.active,
#menu_button.active {
    color: #3284ff !important;
    /* color: #f52538 !important;     */
    cursor: pointer;
}

#main_menu .main-menu-item:hover .main-menu-text {
    /* font-weight: 200; */
}

#main_menu .main-menu-item .main-menu-icon {
    font-size: 22px;
}

#main_menu .main-menu-item .main-menu-badge {
    position: absolute;
    left: 50%;
    margin-left: 6px;
    top: -6px;
    top: 2px;
    font-size: 12px;
    color: #fff;
    background-color: #f52538;
    padding: 0px 4px;
    min-width: 18px;
    height: 18px;
    border-radius: 100px;
    text-align: center;    
    transition: all .4s;
}

#main_menu .main-menu-item.opened .main-menu-badge {
    top: 6px;
    top: 2px;
}

#main_menu .main-menu-item[data-badge="0"] .main-menu-badge,
#main_menu .main-menu-item[data-badge=""] .main-menu-badge {
    display: none;
}

.item-badge {
    display: inline-block;
    font-size: 14px;
    color: #fff;
    background-color: #f52538;
    padding: 0px 4px;
    min-width: 20px;
    height: 20px;
    border-radius: 100px;
    text-align: center; 
}

.friend-list .item-badge {
    display: inline-block;
    font-size: 10px;
    color: #fff;
    background-color: #f52538;
    padding: 1px 4px;
    min-width: 15px;
    height: 15px;
    border-radius: 100px;
    text-align: center; 
    position: absolute;
    /* top: 32px;
    right: 40px; */
    top: 12px;
    left: 48px;
    z-index: 1;
}

.user-menu .item-badge {
    position: absolute;
    right: 80px;
    top: 50%;
    margin-top: -9px;
}

#main_menu .main-menu-item .main-menu-text {
    font-size: 11px;
    font-weight: 300;
    display: none;
}

#main_menu {
    position: fixed;
    height: 70px;
    bottom: -2px;
    left: 0px;
    right: 0px;
    background-color: #fff;
    background-color: rgba(255, 255, 255, .8);
    /* -webkit-backdrop-filter: saturate(300%) blur(20px);
    -webkit-backdrop-filter: saturate(1000%) blur(20px); */
    -webkit-backdrop-filter: saturate(2000%) blur(30px); 
    backdrop-filter: saturate(2000%) blur(30px);
    border-top: 1px solid rgba(0, 0, 0, .1);
    /* border-top: 1px solid #eee; */
    /* z-index: 9999999999999; */
    z-index: 999999999;

    overflow: hidden;

    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    /* background-color: rgba(250, 250, 250, 0.92); */
    transition: background-color 0.5s cubic-bezier(0.28, 0.11, 0.32, 1);
}

#main_menu_canvas,
#o8oo_header_canvas {
    display: none;
}

.main-menu-shadow {
    position: fixed;
    height: 50px;
    bottom: -50px;
    left: -100px;
    right: -100px;
    z-index: -1;
    display: none;

    /* box-shadow: 0px 0px 250px rgba(0, 0, 0, .4); */
    /* box-shadow: 0px 0px 100px red, 0px 0px 100px red, 0px 0px 100px red; */
}

body.dark .main-menu-shadow {
    /* box-shadow: 0px 0px 300px rgba(0, 0, 0, 1), 0px 0px 300px rgba(0, 0, 0, 1), 0px 0px 300px rgba(0, 0, 0, 1); */
}

.row-section {
    position: relative;
}

body.dark #main_menu {
    -webkit-backdrop-filter: saturate(100%) blur(30px); 
    backdrop-filter: saturate(100%) blur(30px);
}

#views {
    position: relative;
}

#views .view {
    position: fixed;
    height: 90px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background-color: #fff;
    background-color: rgba(255, 255, 255, .8);
    /* -webkit-backdrop-filter: saturate(300%) blur(20px);
    backdrop-filter: saturate(300%) blur(20px); */
    /* border-top: 1px solid rgba(0, 0, 0, .06); */
    z-index: 9999999999999;
}

#views .view {
    z-index: 0;
    opacity: 0.0;
}

#views .view.blur {
    -webkit-backdrop-filter: saturate(300%) blur(20px);
    backdrop-filter: saturate(300%) blur(20px);
    z-index: 9999999999999;
    opacity: 1.0;
}

body.dark #main_menu {
    background-color: #000;
    background-color: rgba(0, 0, 0, .8);
    background-color: rgba(4, 0, 42, 0.85);
    border-top: 1px solid rgba(255, 255, 255, .1);
    /* border-top: 1px solid #222; */
}

body.showing-conversation.maximized #main_menu {
    display: none;
}

body.dark .user-menu-item.form-row {
    border-top: 1px solid rgba(255, 255, 255, .1);
}

body.dark .user-menu .user-menu-item > a {
    border-top: 1px solid rgba(255, 255, 255, .1);
}

body.dark .item-list .list-item {
    border-top: 1px solid rgba(255, 255, 255, .1);
}

body.dark #views .view {
    background-color: #000;
    background-color: rgba(0, 0, 0, .4);
    background-color: #060028;
    background-color: rgba(4, 0, 42, 0.9);
}

#views .view {
    bottom: 80px;
    right: auto;
    /* border: 1px solid rgba(255, 255, 255, .1); */
    height: auto;
    margin-top: 80px;
    transition: top .2s, left .2s, right .2s, bottom .2s, height .2s, width .2s;

    top: 100%;
    border-radius: 10000px;
    width: 20%;
}

#views .view:nth-child(1) {
    left: 0%;
}

#views .view:nth-child(2) {
    left: 20%;
}

#views .view:nth-child(3) {
    left: 40%;
}

#views .view:nth-child(4) {
    left: 60%;
}

#views .view:nth-child(5) {
    left: 80%;
}

#views .view.active {
    top: 0%;
    left: 0%;
    width: 100%;
    border-radius: 0px;
}

#views .view h1 {
    position: relative;
    top: 50%;
    text-align: center;
    font-weight: 100;

    font-size: 24px;
    color: #888;

    transition: transform 4s;

    transform: scale(1.0);
}

#views .view.active h1 {
    transform: scale(10.0);
}

.loader-icon {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 100px;
    border: 1px solid #888888;
    border-bottom: 1px solid transparent;
    /* border-style: dashed; */
    margin: auto;
    margin-top: -63px;
    display: none;
}

.rotate
{
    animation-name: spin;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-play-state: running;

    -webkit-animation-name: spin;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 0s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-play-state: running;
}

.rotate.slow {
    animation-duration: 8s;
    -webkit-animation-duration: 8s;
}

@-ms-keyframes spin { from { -ms-transform: rotate(0deg); } to { -ms-transform: rotate(360deg); }}
@-moz-keyframes spin { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); }}
@-webkit-keyframes spin { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); }}
@keyframes spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); }}

.pulse-animation
{
    animation-name: pulse;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state: running;

    -webkit-animation-name: pulse;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 0s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-play-state: running;
}

@-ms-keyframes pulse { from { box-shadow: 0px 0px 0px 10px #3284ff; } to { box-shadow: 0px 0px 0px 10px #3284ff; }}
@-moz-keyframes pulse { from { box-shadow: 0px 0px 0px 10px #3284ff; } to { box-shadow: 0px 0px 0px 10px #3284ff; }}
@-webkit-keyframes pulse { from { box-shadow: 0px 0px 0px 10px #3284ff; } to { box-shadow: 0px 0px 0px 10px #3284ff; }}
@keyframes pulse { from { box-shadow: 0px 0px 0px 0px #3284ff; } to { box-shadow: 0px 0px 0px 10px #3284ff; }}

.wiggle-animation
{
    animation-name: wiggle;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-delay: .4s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-play-state: running;

    -webkit-animation-name: wiggle;
    -webkit-animation-duration: 2s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: .4s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: normal;
    -webkit-animation-play-state: running;
}

@-ms-keyframes wiggle { 
    0% { scale: 1.0; }
    10% { scale: 0.9; }
    20% { scale: 1.4; }
    30% { scale: 1.4; transform: rotateZ(-5deg)}
    40% { scale: 1.4; transform: rotateZ(5deg)}
    50% { scale: 1.4; transform: rotateZ(-4deg)}
    60% { scale: 1.4; transform: rotateZ(4deg)}
    70% { scale: 1.0; transform: rotateZ(0deg)}
    80% { scale: 0.95;}
    90% { scale: 1.05;}
    100% { scale: 1.0;}
}
@-moz-keyframes wiggle {
    0% { scale: 1.0; }
    10% { scale: 0.9; }
    20% { scale: 1.4; }
    30% { scale: 1.4; transform: rotateZ(-5deg)}
    40% { scale: 1.4; transform: rotateZ(5deg)}
    50% { scale: 1.4; transform: rotateZ(-4deg)}
    60% { scale: 1.4; transform: rotateZ(4deg)}
    70% { scale: 1.0; transform: rotateZ(0deg)}
    80% { scale: 0.95;}
    90% { scale: 1.05;}
    100% { scale: 1.0;}
}
@-webkit-keyframes wiggle {
    0% { scale: 1.0; }
    10% { scale: 0.9; }
    20% { scale: 1.4; }
    30% { scale: 1.4; transform: rotateZ(-5deg)}
    40% { scale: 1.4; transform: rotateZ(5deg)}
    50% { scale: 1.4; transform: rotateZ(-4deg)}
    60% { scale: 1.4; transform: rotateZ(4deg)}
    70% { scale: 1.0; transform: rotateZ(0deg)}
    80% { scale: 0.95;}
    90% { scale: 1.05;}
    100% { scale: 1.0;}
}
@keyframes wiggle {
    0% { scale: 1.0; }
    10% { scale: 0.9; }
    20% { scale: 1.4; }
    30% { scale: 1.4; transform: rotateZ(-5deg)}
    40% { scale: 1.4; transform: rotateZ(5deg)}
    50% { scale: 1.4; transform: rotateZ(-4deg)}
    60% { scale: 1.4; transform: rotateZ(4deg)}
    70% { scale: 1.0; transform: rotateZ(0deg)}
    80% { scale: 0.95;}
    90% { scale: 1.05;}
    100% { scale: 1.0;}
}

#search_menu {
    display: none;
}

@media (max-width: 9911px)
{
    #main_menu {
        display: block;
    }

    body
    {
        /* padding: 4px; */
        /* background-color: #000; */
    }

    #content {
        margin-top: 0px;
        padding-bottom: 100px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .featured-row, .items-row {
        padding-top: 10px;
        padding-bottom: 20px;
        padding-bottom: 55px;
        margin-bottom: -35px;
        margin-left: -20px;
        margin-right: -20px;
        padding-left: 5px;
        padding-right: 5px;
    }

    #modal_inbound .featured-row, .items-row {
        padding-bottom: 20px;
        margin-bottom: 0px;
        margin-left: -20px;
        margin-right: -20px;
        padding-left: 5px;
        padding-right: 5px;
    }

    /*.item-wrapper.featured {
        -webkit-box-reflect: initial;
    }*/

    .sidebar {
        padding-bottom: 25px;
        /* border-bottom: 1px solid #eee; */
        border-bottom: 1px solid rgba(0, 0, 0, .1);
        border-right: none;
        height: 130px;
        position: fixed;
        top: -50px;
        left: 0px;
        right: 0px;
        z-index: 9999999999999;
        /* background-color: #fff;
        background-color: rgba(255, 255, 255, .8);
        -webkit-backdrop-filter: saturate(300%) blur(20px);
        backdrop-filter: saturate(300%) blur(20px); */
    }

    .o8oo-sidebar-fix {
        position: fixed;
        top: 0px;
        left: 0px;
        right: 0px;
        height: 113px;
        height: 100px;
        /* bottom: -50px; */
        /* border: 1px solid red; */
        background-color: #fff;
        background-color: rgba(255, 255, 255, .8);
        /* -webkit-backdrop-filter: saturate(300%) blur(20px);
        -webkit-backdrop-filter: saturate(1000%) blur(20px); */
        -webkit-backdrop-filter: saturate(2000%) blur(30px);
        backdrop-filter: saturate(2000%) blur(30px);

        -webkit-backdrop-filter: saturate(180%) blur(20px);
        backdrop-filter: saturate(180%) blur(20px);
        /* background-color: rgba(250, 250, 250, 0.92); */
        transition: background-color 0.5s cubic-bezier(0.28, 0.11, 0.32, 1), all .4s;
    }

    body.dark .o8oo-sidebar-fix {
        -webkit-backdrop-filter: saturate(100%) blur(30px);
        backdrop-filter: saturate(100%) blur(30px);
    }

    /* body.android .o8oo-sidebar-fix,
    body.android #main_menu {
        background-color: rgba(255, 255, 255, .98);
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    } */
    
    #content.menu-visible .sidebar {
	    position: relative;
    }

    body.dark .sidebar {
        border-bottom: 1px solid rgba(255, 255, 255, .1);
        /* border-bottom: 1px solid #222; */
    }

    body.dark .o8oo-sidebar-fix {
        background-color: #000;
        background-color: rgba(0, 0, 0, .8);
        background-color: rgba(4, 0, 42, 0.85);
    }

    body.dark #modal-content {
        /* background-color: rgba(0, 0, 0, .8); */
        /* background-color: rgba(10, 10, 10, .8); */
        background-color: rgba(20, 20, 20, .8);
        background-color: rgba(0, 2, 46, 0.8);
    }

    body.android.dark #modal-content {
        background-color: rgba(0, 2, 46, 1);
    }

    body.dark #modal:not(.maximized) #modal-content {
        /* background-color: rgba(0, 0, 0, .8); */
    }

    body.dark .responsive-button-wrapper .button.item {
        /* background-color: rgba(50, 50, 50, .8) !important; */
        /* background-color: rgba(4, 0, 42, 0.8) !important; */
        /* background-color: rgba(0, 2, 41, 0.8) !important; */
        /* background-color: rgba(0, 0, 0, .8) !important; */
    }

    body.dark #modal #modal-button-close {
        /* opacity: .4; */
    }

    body.dark .responsive-button-wrapper .button.item .item-details .item-name {
        color: #fff !important;
    }

    body.dark #modal-content-down {
        background-color: rgba(20, 20, 20, .8);
    }

    body.dark #modal-content-down .button {
        border-top: 1px solid rgba(255, 255, 255, .1);
    }

    body.dark #modal-content {
        box-shadow: 0px 60px 20px -30px rgba(0, 0, 0, .4), 0px 0px 0px 1px rgba(255, 255, 255, .15);
    }

    body.dark .user-menu-item-icon {
        border-left: 1px solid rgba(255, 255, 255, .1);
    }

    .logo
    {
        margin-left: 5px;
        margin-bottom: 0px;
        margin-top: 0px;
        width: 80px;
        height: 80px;
        color: #000 !important;
        font-size: 15px;
        text-align: center;
        text-decoration: none !important;
    }

    #content .logo {
        background-image: none;
        margin-left: 0px;
        margin-top: 70px;
        width: auto;
        height: auto;
        font-size: 25px;
        font-weight: 500;
        text-align: left;
    }

    body.prev #content .logo {
        padding-left: 50px;
    }

    body[data-url$="/search"] #search_menu {
        display: block;
        position: fixed;
        top: 16px;
        left: 10px;
        right: 10px;
        z-index: 9999999;
    }

    body[data-url$="/search"] #search_menu input {
        position: absolute;
        left: 0px;
        right: 0px;
        width: 100%;
        background-color: rgba(0, 0, 0, .05);
        font-size: 16px;
        padding: 20px 42px;
        border-radius: 100px;

        /* -webkit-backdrop-filter: saturate(180%) blur(10px); */
        /* -webkit-backdrop-filter: saturate(300%) blur(20px);
        backdrop-filter: saturate(300%) blur(20px); */
    }

    body[data-url$="/search"] #content .logo,
    body[data-url$="/search"] #content #prevPage {
        display: none !important;
    }

    body[data-url$="/search"] #search_menu .search-icon {
        top: 14px;
        left: 14px;
        font-size: 16px;
    }

    body[data-url$="/search"] #search_menu .search-clear-icon,
    body[data-url$="/search"] #search_menu .search-loading-icon {
        display: block;
        top: 0px;
        right: 0px;
        font-size: 16px;
        padding: 14px;
        opacity: 0.0;

        transition: all .4s;
    }

    .search-loading-icon,
    body[data-url$="/search"] #search_menu .search-loading-icon {
        left: auto;
        opacity: 1.0;
        display: none;
    }

    .search-loading-icon.rotate {
        display: block !important;
    }

    #search_menu.dirty .search-clear-icon {
        opacity: 1.0 !important;
        right: 70px !important;
    }

    body[data-url$="/search"] #search_menu.dirty input {
        width: 80%;
    }

    body.dark[data-url$="/search"] #search_menu .search-icon,
    body.dark[data-url$="/search"] #search_menu .search-clear-icon {
        color: #888;
    }

    body[data-url$="/search"] #search_menu .search-button,
    body[data-url$="/search"] #search_menu .close-button {
        position: absolute;
        top: 0px;
        right: 0px;
        color: #3284ff;
        height: 42px;
        width: 70px;
        /* border: 1px solid red; */
        text-align: center;
        font-size: 18px;
        padding-top: 8px;
        font-weight: 300;
        cursor: pointer;

        display: none;
        transition: all 1s;
    }

    body[data-url$="/search"] #search_menu.dirty .search-button {
        display: block;
    }

    #content .logo .title
    {
        display: block;
    }

    #content #toggleMenu
    {
        top: 50px;
        padding: 31px;
        padding-right: 25px;
        -webkit-transition: all .4s;
        -moz-transition: all .4s;
        transition: all .3s;
    }

    #content #categoriesSearch
    {
        margin-top: 22px;
        padding-top: 10px;
        border-top: 1px solid #eee;
    }

    #content.details-view:not(.menu-visible) #prevPage
    {
        display: block;
    }

    #content-container
    {
        /* min-height: auto; */
        padding-top: 79px;
        padding-left: 15px;
        border-left: none;
        left: 0px;
    }

    #modal.showing-item #content-container {
        padding-left: 20px;
        padding-right: 20px;
    }

    body[data-url$="/login"] .semi-footer,
    body[data-url$="/register"] .semi-footer,
    body[data-url$="/password_reset"] .semi-footer {
        display: none;
    }

    .child-category-title
    {
        margin-top: 40px;
        font-weight: 500;
        font-size: 30px;
    }

    .sidebar .categories a
    {
        padding-top: 4px;
        padding-bottom: 4px;
    }

    #categoriesSearch
    {
        padding-top: 4px;
        padding-bottom: 15px;
        background-color: #fff;
        height: 64px;
        margin-top: -80px;
    }

    #header-user-corner
    {
        display: block !important;
        float: none;
        margin-top: 30px;
        margin-right: 0px;
        text-align: center;
        margin-bottom: 20px;
    }

    #header-user-corner > a
    {
        padding: 5px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .categories > .active > a
    {
      color: #fff;
      background-color: #3284ff;
    }

    .graph-container
    {
        width: auto;
        overflow-x: scroll;
        -webkit-overflow-scrolling: touch;
    }

    .table-responsive
    {
        border: 0px;
        margin-bottom: 0px;
    }

    .popover .month-item
    {
        padding: 20px;
    }

    .popover .year-picker
    {
        font-size: 25px;
    }

    .popover .year-picker .year-button
    {
        display: inline-block;
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .popover .year-picker .year-button-left
    {
        padding-right: 15px;
    }

    .popover .year-picker .year-button-right
    {
        padding-left: 15px;
    }

    .dateLink.datePrevious,
    .dateLink.dateNext
    {
        position: absolute;
        font-size: 25px;
    }

    .dateLink.datePrevious
    {
        padding: 10px 5px 10px 20px;
        right: 45px;
    }

    .dateLink.dateNext
    {
        padding: 10px 20px 10px 5px;
        right: 0px;
    }

    .item-details.featured .item-info
    {
        padding-bottom: 10px;
    }
}

@media (min-width: 768px)
{
    .container
    {
      width: 100%;
    }
}

@media (min-width: 992px)
{
    body > .container-fluid
    {
        /*min-width: 1300px;*/
        /*max-width: 1300px;*/
    }

    .sidebar {
        max-width: 250px;
    }
}

@media (max-width: 360px)
{
    .item-details.featured .item-info
    {
        font-size: 0.86em;
    }

    .item-details.featured .item-info .category_type
    {
        min-width: 100px;
    }

    .details-heading .item-card
    {
      width: 90px;
      height: 90px;
    }

    h1
    {
        margin-bottom: 5px;
    }
}

body.dark {
    /* background-color: #000 !important; */
    background-color: #060028 !important;
}

body.dark #content {
    background-color: inherit;
    color: #fff;
}

body.dark #content .logo {
    color: #fff !important;
}

body.dark .item-title a,
body.dark .child-category-title .link-title,
body.dark #header-user-corner > a {
    color: #fff !important;
}

body.dark .semi-footer a,
body.dark .details-text-gray {
    color: #999 !important;
}

body.dark .responsive-button-wrapper .button.item .item-details .item-category  {
    color: #757979 !important;
}

body.dark .knowhow b {
    color: #fff !important;
}

body.dark .section-title {
    color: rgba(255, 255, 255, 1);
    font-weight: 300;
    font-weight: bold;
}

body.dark .show-item .action-button-wrapper,
body.dark #categoriesSearch {
    background-color: #000;
}

body.dark #toggleMenu,
body.dark #toggleMenu:hover,
body.dark #toggleMenu:visited {
    color: #eee;
}

body.dark #form_search {
    background-color: #000 !important;
    border: 1px solid #444 !important;
}

body.dark #form_search {
    background-color: #000;
    border: 1px solid #444;
}

@media (max-width: 9911px) {
    body.dark[data-url$="/search"] #search_menu input {
        background-color: rgba(255, 255, 255, .1) !important;
        border-color: transparent !important;
        color: #fff;
    }

    body.dark[data-url$="/search"] #search_menu input:focus {
        background-color: rgba(255, 255, 255, .2) !important;
        box-shadow: none !important;
    }
}

body.dark #form_search:focus {
    box-shadow: inset 0 1px 1px rgba(0, 52, 255, 0.08), 0 0 0px 4px rgba(0, 142, 255, 0.6);
}

body.dark #header,
body.dark #footer-border {
    border-color: #444 !important;
}

body.dark .categories > .active > a {
    color: #fff;
    background-color: #222;
    border: 1px solid #ccc;
}

body.dark #footer a,
body.dark #footer a.hover,
body.dark #footer a.active,
body.dark #footer a.visited {
    color: #aaa;
}

body.dark .carousel
{
    /* -webkit-box-reflect: below 3px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(60%, transparent) , to(rgba(250, 250, 250, 0.25))); */
    -webkit-box-reflect: none;
}

body.dark .item-wrapper.featured
{
    -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(60%, transparent) , to(rgba(250, 250, 250, 0.25)));
}

body.dark #content .logo {
    /* -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, transparent) , to(rgba(250, 250, 250, 0.25))); */
}

body.dark #views .view h1 {
    color: #fff;
}

body.dark .loader-icon {
    border-color: #fff;
    border-bottom-color: transparent;
}


body.dark #modal-content-down .button:active,
body.dark #modal-content-down .button.active {
    background-color: rgba(0, 0, 0, .4);
}

body[user-agent="o8oo"] .logo {
    margin-top: 104px !important;
    /* margin-top: 100px !important; */
    /* margin-top: 112px !important; */
}

body #content .logo img {
    height: 50px;
    height: 40px;
    box-shadow: 0px 0px 1px 0px #fff;
    margin-top: -8px;
    border-radius: 10px;
}

body[user-agent="o8oo"] #toggleMenu {
    top: 84px !important;
}

body[user-agent="o8oo"] .sidebar {
    height: 164px !important;
    height: 151px !important;
    overflow: hidden !important;
}

body[user-agent="o8oo"] #content-container {
    padding-top: 117px;
}

body[user-agent="o8oo"] #content-container.no-header {
    padding-top: 20px;
}

body[user-agent="o8oo"] #menu_button,
body[user-agent="o8oo"] #prevPage {
    top: 84px;
    top: 78px;
    top: 62px;
    top: 54px;
    top: 58px;
}

body[data-url="/profile"] #prevPage,
body[data-url="/wallet"] #prevPage,
body[data-url="/search"] #prevPage,
body[data-url="/messages"] #prevPage {
    display: none !important;
}

.show-item-company {
    position: absolute;
    white-space: nowrap;
    color: rgba(0, 0, 0, .05);
    font-size: 120px;
    top: 0px;
    left: 0px;
    right: 0px;
    overflow: hidden;
}

body.dark .show-item-company {
    color: rgba(255, 255, 255, .1);
}

#logo_subtitle {
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    text-align: center;
    padding-bottom: 10px;
    font-weight: 400;
    color: #757979;
    color: orange;
    color: #888;
    opacity: 0;
    display: none;
    /* transition: bottom .4s, opacity 1s; */
    font-size: 25px;
    font-weight: bold;
    padding-left: 60px;
    white-space: nowrap;
    padding-right: 60px;
    text-overflow: ellipsis;
    overflow: hidden;
}

#logo_subtitle.visible {
    bottom: 0px;
    opacity: 1;
}

#logo_user {
    position: absolute;
    right: 0px;
    margin-right: 20px;
    margin-bottom: 25px;
    /* transform: translateX(-20px) translateY(-25px); */
    bottom: 0px;
    opacity: 0;
    display: none;
    transition: bottom .4s, opacity 1s;
}

body.showing-conversation #logo_user,
body.new-message-user-picked #logo_user {
    bottom: -6px;
    bottom: -9px;
    opacity: 1;
}

body[data-url="/messages"] #logo_subtitle {
    display: block;
}

body[data-url="/messages"] #logo_user {
    display: block;
}

body[data-url="/messages"].showing-conversation #content .logo,
body[data-url="/messages"].new-message-opened #content .logo {
    display: none;
}

body[user-agent="o8oo"] #views .view {
    margin-top: 114px;
}

body[user-agent="o8oo"][data-url$="/search"] #search_menu {
    top: 50px;
}

body[user-agent="o8oo"] #modal-content {
    top: 94px;
    top: 83px;
    top: 60px;
}

body[user-agent="o8oo"] .item-wrapper.featured:hover .item-card {
    transform: scale(.98);
}

#watermark {
    display: none;
}

/***************************************************************************************************/
/***************************************************************************************************/
/************************************** ANDROID optimizations **************************************/
/***************************************************************************************************/
/***************************************************************************************************/

/* body.android #modal-content {
    background-color: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
} */

/* body.android.dark #modal-content {
    background-color: #060028;
}

body.android #views .view.blur {
    background-color: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

body.android.dark #views .view.blur {
    background-color: #060028;
} */

.search-term,
.search-subterm {
    position: relative;
    display: inline-block;
    padding: 10px 25px;
    border-radius: 100px;
    background-color: rgba(0, 0, 0, .05);
    margin-left: 10px;
    margin-bottom: 10px;
    font-size: 16px;    
    font-weight: 200;
    padding-left: 45px;
    transition: all .4s;
}

.search-subterm {
    display: none;
}

.search-term u {
    text-decoration: none;
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    height: 5px;
    background: mediumspringgreen;
    z-index: -1;
}

body.dark .search-term b {
    text-shadow: 0px 1px 4px #000;
}

.z-index {
    z-index: 0;
}

.row-section.card-section {
    display: none;
}

body[data-username="nenad.kuren@knowhow.hr"] .row-section.card-section {
    display: block;
}

.o8oo-card {
    position: relative;
    height: 220px;
    /* width: 100%; */
    /* border: 1px solid red; */
    border-radius: 20px;
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2), 0px 4px 20px -6px rgba(0, 0, 0, 0.6);
    margin-left: -15px;
    margin-right: -15px;
    overflow: hidden;
}

.o8oo-card .keyword {
    font-size: 57px;
    font-weight: bold;
    color: #fff;
    position: absolute;
    top: 10px;
    left: 0px;
    padding-left: 10px;
    white-space: nowrap;
    text-shadow: 0px 4px 0px rgba(0, 0, 0, .1);
}

.o8oo-card .action-button-wrapper {
    position: absolute;
    bottom: 20px;
    left: 0px;
    right: 0px;
    text-align: center;
}

.o8oo-card .action-button {
    font-size: 18px;
    color: #fff;
    font-weight: 400;
    display: inline-block;
    border: 1px solid #fff;
    border-radius: 100px;
    padding: 4px 20px;
    text-shadow: 0px 2px 0px rgba(0, 0, 0, .1);
}

.row-section.card-section .link-title {
    /* padding-left: 15px; */
}

.row-section.card-section[data-category-name="telco"] .link-title {
    color: #f63e54;
}

.row-section.card-section[data-category-name="telco"] .o8oo-card {
    background: #f63e54;
    background: linear-gradient(135deg, #f63e54, #f66677);
}

.row-section.card-section[data-category-name="osig"] .link-title {
    color: #1c7df3;
}

.row-section.card-section[data-category-name="osig"] .o8oo-card {
    background: linear-gradient(135deg, #1c7df3, #1abcfa);
}

.row-section.card-section[data-category-name="benzinske"] .link-title {
    color: #0c9d46;
}

.row-section.card-section[data-category-name="benzinske"] .o8oo-card {
    background: #0c9d46;
    background: linear-gradient(135deg, #0c9d46, #39c973);
}

.marker-container {
    width: 250px;
    padding: 0px;
    padding-bottom: 10px;
    /* background: rgba(247, 247, 247, 0.96); */
    -webkit-backdrop-filter: saturate(100%) blur(30px);
    backdrop-filter: saturate(100%) blur(30px);
    background-color: rgba(255, 255, 255, .5);
    border-radius: 10px;
    box-shadow: 10px 10px 50px rgba(0, 0, 0, 0.29);
    font-family: Helvetica, Arial, sans-serif;
    /* -webkit-transform-origin: 0 10px;
    transform-origin: 0 10px; */
}

body.dark .marker-container {
    background-color: rgba(0, 0, 0, .4) !important;
}

.marker-container h1 {
    margin-top: 0;
    padding: 5px 15px;
    color: #000;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, .4);
    background-color: #eee;
    -webkit-backdrop-filter: saturate(300%) blur(30px);
    backdrop-filter: saturate(300%) blur(30px);
    background-color: rgba(247, 247, 247, 0.5);
    /* border-bottom: 1px solid #ddd; */
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    font-size: 26px;
    font-weight: bold;
    margin-bottom: 0px;
}

.marker-container h1 .item-card {
    position: absolute;
    right: 10px;
    top: -20px;
    width: 50px;
    height: 50px;
    border-radius: 20px;
}

body.dark .marker-container h1 {
    color: #fff;
    -webkit-backdrop-filter: saturate(100%) blur(30px);
    backdrop-filter: saturate(100%) blur(30px);
    background-color: rgba(0, 0, 0, 0.2);
}

.marker-container h2 {
    font-size: 10px;
    margin: 0px;
    padding: 5px 15px;
    color: #000;
    margin-bottom: 10px;;
    /* text-align: center; */
    font-weight: 200;
}

body.dark .marker-container h2 {
    color: #fff;
}

.marker-container .gorivo {
    font-size: 14px;
    margin: 0px;
    padding: 5px 15px;
    color: #000;
}

body.dark .marker-container .gorivo {
    color: #fff;
}

.marker-container .gorivo b {
    background-color: greenyellow;
    padding: 0px 2px;
    border-radius: 3px;
}

.marker-container .gorivo[data-type="auto_plin"] b {
    background-color: gold;
    color: #000;
}

.marker-container .gorivo[data-type="eurodizel"] b,
.marker-container .gorivo[data-type="eurodizel_class"] b {
    background-color: #000;
    color: #fff;
}

.marker-container .gorivo[data-type="eurosuper_95"] b,
.marker-container .gorivo[data-type="eurosuper_95_class"] b,
.marker-container .gorivo[data-type="eurosuper_100"] b {
    background-color: forestgreen;
    color: #fff;
}

.marker-container .gorivo[data-type="plavi_dizel"] b {
    background-color: mediumblue;
    color: #fff;
}

.marker-container section {
    padding: 0 15px 5px;
    font-size: 14px;
}

.marker-container section p {
    margin: 5px 0;
}

.marker-container:after {
    content: "";
    position: absolute;
    bottom: 0px;
    left: 50%;
    width: 0;
    height: 0;
    margin-bottom: -10px;
    border-right: 10px solid transparent;
    border-top: 10px solid rgba(247, 247, 247, 0.8);
    border-left: 10px solid transparent;
    margin-left: -10px;
} 

body.dark .marker-container:after {
    border-top: 10px solid rgba(0, 0, 0, 0.5);
}

@-webkit-keyframes scale-and-fadein {
    0% {
        -webkit-transform: scale(1.2);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(1);
        opacity: 1;
    }
}

@keyframes scale-and-fadein {
    0% {
        transform: scale(1.2);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.search-term .search-icon {
    position: absolute;
    top: 14px;
    left: 17px;
    color: #474747;
}

#search_terms {
    position: relative;
    white-space: nowrap;
    overflow-x: scroll;
    padding-top: 10px;
    padding-bottom: 50px;
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 0px;
    padding-right: 10px;
}

#search_terms .search-term,
#search_terms .search-subterm {
    transition: none;
}

#search_terms .search-term.active {
    /* background-color: rgba(0, 0, 0, .1); */
    /* color: #fff; */
    font-weight: bold;
}

#search_terms .search-term.active .search-subterm {
    display: inline-block;
}

#search_terms .search-term.active .search-icon {
    /* color: #fff; */
}

#apple-maps {
    /* margin-top: -10px; */
    margin-left: -5px;
    margin-right: -5px;
    margin-bottom: 160px;
    position: relative;
    /* border: 1px solid red; */
    height: 200px;
    border-radius: 20px;
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2), 0px 4px 10px -6px rgba(0, 0, 0, 0.6);
    overflow: hidden !important;
    z-index: 1;
    transition: all .2s;
}

.message #apple-maps {
    margin-top: 5px;
    margin-left: -5px;
    margin-right: -5px;
    margin-bottom: 5px;
}

body[data-section="section"] #apple-maps {
    margin-top: 20px;
}

body:not(.apple-maps-fullscreen) #apple-maps .apple-map {
    pointer-events: none;
}

body:not(.apple-maps-fullscreen) #apple-maps .apple-map .mk-controls-container {
    display: none;
}

body.apple-maps-fullscreen #apple-maps {
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin-bottom: 0px !important;
    height: auto !important;
}

body.apple-maps-fullscreen .apple-map-header-footer {
    display: none;
}

body.apple-maps-fullscreen #search_results {
    position: relative;
    z-index: 100;
}

body.apple-maps-fullscreen #search_terms {
    position: fixed;
    top: 100px;
    z-index: 100;
    left: 0px;
    right: 0px;
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 30px;
    padding-bottom: 50px;
}

body.apple-maps-fullscreen #search_terms .search-term,
body.apple-maps-fullscreen #search_terms .search-subterm {
    -webkit-backdrop-filter: saturate(100%) blur(30px);
    backdrop-filter: saturate(100%) blur(30px);
    background-color: rgba(255, 255, 255, .5);
}

body.dark .search-term {
    background-color: rgba(255, 255, 255, .1);
}

body.dark.apple-maps-fullscreen .search-term,
body.dark.apple-maps-fullscreen .search-subterm {
    background-color: rgba(0, 0, 0, .4) !important;
}

body.dark .search-term .search-icon {
    color: #888;
}

body.dark.apple-maps-fullscreen .search-icon {
    color: #fff;
}

body[data-url$="/search"].apple-maps-fullscreen #search_menu input {
    width: 80%;
}

body[data-url$="/search"].apple-maps-fullscreen #search_menu .close-button {
    display: block;
}

body[data-url$="/search"].apple-maps-fullscreen #search_menu.dirty .close-button {
    display: none;
}

body[data-url$="/search"].apple-maps-fullscreen #search_results {
    display: none;
}

#o8oo_header .header-close-button {
    color: #3284ff;
    font-weight: 400;
    z-index: 9999999;
    position: absolute;
    top: 100px;
    right: 5px;
    font-size: 18px;
    padding: 10px;

    display: none;
}

body.apple-maps-fullscreen #o8oo_header .header-close-button {
    display: block;
}

body[data-url="/messages"].apple-maps-fullscreen #logo_user,
body[data-url="/messages"].apple-maps-fullscreen #modal-content.new-message .message-text {
    display: none;
}

.location-string {
    font-size: 8px;
    display: block;
    font-weight: 200;
    text-align: right;
    display: none;
}

body[data-url$="/search"] #o8oo_header .header-close-button {
    display: none;
}

#apple-maps .apple-map-block {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}

#apple-maps .apple-map-header-footer {
    position: absolute;            
    height: 40px;
    left: 0px;
    right: 0px;
    color: #000;
    font-size: 16px;
    font-weight: 400;
    padding: 10px;
    z-index: 1;
    background-color: rgba(255, 255, 255, .5);
    -webkit-backdrop-filter: saturate(300%) blur(30px);
    backdrop-filter: saturate(300%) blur(30px);
}

#apple-maps .apple-map-block .apple-map-header {
    top: 0px;
}

#apple-maps .apple-map-block .apple-map-footer {
    bottom: 0px;
}

#apple-maps .apple-map-block .apple-map-header-footer .arrow {
    float: right;
    /* color: #3284ff; */
    margin-top: 7px;
    font-size: 12px;
    /* text-shadow: 0px 0px 1px #fff, 0px 0px 1px #fff, 0px 0px 1px #fff; */
}

body.dark #apple-maps .apple-map-header-footer {
    color: #fff;
    background-color: rgba(0, 0, 0, .2);
}

#apple-maps .apple-map {
    width: 100%;
    height: 100%;
}

#apple-maps .item-wrapper.featured .item-card {
    position: relative;
    overflow: hidden;
    height: 180px;
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2), 0px 4px 20px -6px rgba(0, 0, 0, 0.6);
}

#apple-maps .user-location {    
    background-color: #3284ff;
    padding: 10px;
    border-radius: 100%;
    display: block;
    width: 1px;
    height: 1px;

    animation: pin 3s infinite;
    -moz-animation: pin 3s infinite;
    -webkit-animation: pin 3s infinite;
}

@keyframes pin {
    0% { box-shadow: 0px 0px 10px rgba(50, 132, 255, 0.2), 0px 0px 0px 3px #fff inset, 0px 0px 0px 0px rgba(50, 132, 255, .2), 0px 0px 0px 0px rgba(50, 132, 255, .4); }
    70% {box-shadow: 0px 0px 10px rgba(50, 132, 255, 0.2), 0px 0px 0px 3px #fff inset, 0px 0px 0px 0px rgba(50, 132, 255, .2), 0px 0px 0px 50px rgba(50, 132, 255, .0);}
    100% { box-shadow: 0px 0px 10px rgba(50, 132, 255, 0.2), 0px 0px 0px 3px #fff inset, 0px 0px 0px 0px rgba(50, 132, 255, .2), 0px 0px 0px 50px rgba(50, 132, 255, .0); }
}

#terms-modal-iframe,
#token-modal-iframe {
    position: relative;
    border: none;
    height: 100%;
    width: 100%;
}

#terms-modal-iframe #modal-place,
#terms-modal-iframe #modal-place {
    display: none;
}

.icon-right {
    position: absolute;
    top: 13px;
    right: 13px;
    font-size: 11px;
}

.wallet-card-feature-button .icon-right {
    top: 16px;
}

/* .row-section[data-category-name="vozila"],
.row-section[data-category-name="goriva"],
.row-section[data-category-name="financije"],
.row-section[data-category-name="nautika"],
.row-section[data-category-name="podrska.fond"]
{
    display: none;
}

.card-category[data-category="Vozila"],
.card-category[data-category="Goriva"],
.card-category[data-category="Financije"],
.card-category[data-category="Nautika"]
{
    display: none;
}

#my_data .item-list .list-item[data-key="Vozila"],
#my_data .item-list .list-item[data-key="Goriva"],
#my_data .item-list .list-item[data-key="Financije"],
#my_data .item-list .list-item[data-key="Nautika"]
{
    display: none;
} */

/* body .row-section[data-category-name^="rennais."]
{
    display: none;
} */

.text-italic {
    font-style: italic;
}

.dot {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 100px;
    background: springgreen;    
    margin-bottom: 2px;
    margin-right: 4px;
    /* background: red; */
}

.child-category-title > .dot {
    width: 7px;
    height: 7px;
    margin-bottom: 8px;
    margin-left: -8px;
    margin-right: 0px;
}

.dot.green {
    background: springgreen;
}

.dot.red {
    background: red;
}

.dot.orange {
    background: orange;
}

#download_links,
#copyright,
#footer_app_download {
    display: none;
}

body[user-agent="o8oo"][data-url="/profile"] #content-container {
    padding-top: 140px !important;
    padding-bottom: 50px !important;
}

#message-options-button,
#message-options,
#keyboard {
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
    transition: all .4s;
}

.message-cancel-button.messenger,
.close-parent-modal.messenger {
    display: none;
    opacity: 0;
}

.messenger.iframe_title {
    display: none;
}

#message-text #options-details {
    display: none;
}








body[data-appname="Lovački savez"] #main_menu .main-menu-item,
body[data-appname="Hrvatski lovački savez"] #main_menu .main-menu-item,
body[data-appname="HLS Loyalty"] #main_menu .main-menu-item {
    color: #aaa;
    color: rgba(0, 0, 0, .3);
}

body[data-appname="Lovački savez"] #main_menu .main-menu-item:active, 
body[data-appname="Hrvatski lovački savez"] #main_menu .main-menu-item:active, 
body[data-appname="HLS Loyalty"] #main_menu .main-menu-item:active, 
body[data-appname="Lovački savez"] #menu_button:active, 
body[data-appname="Hrvatski lovački savez"] #menu_button:active, 
body[data-appname="HLS Loyalty"] #menu_button:active, 
body[data-appname="Lovački savez"] #main_menu .main-menu-item.active, 
body[data-appname="Hrvatski lovački savez"] #main_menu .main-menu-item.active, 
body[data-appname="HLS Loyalty"] #main_menu .main-menu-item.active, 
body[data-appname="Lovački savez"] #menu_button.active,
body[data-appname="Hrvatski lovački savez"] #menu_button.active,
body[data-appname="HLS Loyalty"] #menu_button.active {
    color: #02734a !important;
}

body[data-appname="Lovački savez"] .index-token-button,
body[data-appname="Hrvatski lovački savez"] .index-token-button,
body[data-appname="HLS Loyalty"] .index-token-button,
body[data-appname="Lovački savez"] .show-item-button,
body[data-appname="Hrvatski lovački savez"] .show-item-button,
body[data-appname="HLS Loyalty"] .show-item-button {
    /* display: none !important; */
}

body[data-appname="Lovački savez"][data-url="/messages"] .show-item-button,
body[data-appname="Hrvatski lovački savez"][data-url="/messages"] .show-item-button,
body[data-appname="HLS Loyalty"][data-url="/messages"] .show-item-button {
    display: inline-block !important;
}

body[data-appname="Lovački savez"] #kartice,
body[data-appname="Hrvatski lovački savez"] #kartice,
body[data-appname="HLS Loyalty"] #kartice {
    display: none !important;
}

body[data-appname="Lovački savez"] #wallet_card_feature_items,
body[data-appname="Hrvatski lovački savez"] #wallet_card_feature_items,
body[data-appname="HLS Loyalty"] #wallet_card_feature_items,
body[data-appname="Lovački savez"] #wallet_card_feature_friends,
body[data-appname="Hrvatski lovački savez"] #wallet_card_feature_friends,
body[data-appname="HLS Loyalty"] #wallet_card_feature_friends {
    display: none !important;
}

body[data-appname="Lovački savez"] .wallet-card:not([data-company="Hrvatski lovački savez"]),
body[data-appname="Hrvatski lovački savez"] .wallet-card:not([data-company="Hrvatski lovački savez"]),
body[data-appname="HLS Loyalty"] .wallet-card:not([data-company="Hrvatski lovački savez"]) {
    display: none !important;
}

body[data-appname="Lovački savez"] #o8oo_header .logo img[src="/bundles/appcore/images/app_icon.png"],
body[data-appname="Hrvatski lovački savez"] #o8oo_header .logo img[src="/bundles/appcore/images/app_icon.png"],
body[data-appname="HLS Loyalty"] #o8oo_header .logo img[src="/bundles/appcore/images/app_icon.png"],
body[data-appname="Lovački savez"] #o8oo_header .logo #logo_title[data-title="Hrvatska"],
body[data-appname="Hrvatski lovački savez"] #o8oo_header .logo #logo_title[data-title="Hrvatska"],
body[data-appname="HLS Loyalty"] #o8oo_header .logo #logo_title[data-title="Hrvatska"],
body[data-appname="Lovački savez"] #wallet_card_camera_button,
body[data-appname="Hrvatski lovački savez"] #wallet_card_camera_button,
body[data-appname="HLS Loyalty"] #wallet_card_camera_button,
body[data-appname="Lovački savez"] #wallet_card_feature_saldo_button_club,
body[data-appname="Hrvatski lovački savez"] #wallet_card_feature_saldo_button_club,
body[data-appname="HLS Loyalty"] #wallet_card_feature_saldo_button_club,
body[data-appname="Lovački savez"] #wallet_card_feature_saldo_button_club_activate,
body[data-appname="Hrvatski lovački savez"] #wallet_card_feature_saldo_button_club_activate,
body[data-appname="HLS Loyalty"] #wallet_card_feature_saldo_button_club_activate {
    display: none !important;
}

.wallet-card[data-company="Lovački savez"],
.wallet-card[data-company="Hrvatski lovački savez"],
.wallet-card[data-company="HLS Loyalty"] {
    height: 230px;
}

.wallet-card[data-company="Lovački savez"] .wallet-card-icon,
.wallet-card[data-company="Hrvatski lovački savez"] .wallet-card-icon,
.wallet-card[data-company="HLS Loyalty"] .wallet-card-icon {
    display: block !important;
    top: 46%;
    left: 10%;
    height: 40%;
    width: 20%;
    border-radius: 10px;
    background-size: cover;
    box-shadow: 0px 0px 10px 15px #fff;
}

body:not(.showing-wallet-card) .wallet-card[data-company="Lovački savez"],
body:not(.showing-wallet-card) .wallet-card[data-company="Hrvatski lovački savez"],
body:not(.showing-wallet-card) .wallet-card[data-company="HLS Loyalty"] {
    -webkit-box-reflect: below 5px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(70%, transparent) , to(rgba(250, 250, 250, 0.2))) !important;
}

body[data-appname="Lovački savez"] #wallet_card_features,
body[data-appname="Hrvatski lovački savez"] #wallet_card_features,
body[data-appname="HLS Loyalty"] #wallet_card_features,
body[data-appname^="HLS"] #wallet_card_features {
    top: 150px;
}

body[data-appname="Lovački savez"] .wallet-card-feature.max, 
body[data-appname="Hrvatski lovački savez"] .wallet-card-feature.max, 
body[data-appname="HLS Loyalty"] .wallet-card-feature.max, 
body[data-appname^="HLS"] .wallet-card-feature.max {
    top: 330px;
}

body[data-appname="Lovački savez"] .user-menu .list-item[data-name="my-data"], 
body[data-appname="Hrvatski lovački savez"] .user-menu .list-item[data-name="my-data"], 
body[data-appname="HLS Loyalty"] .user-menu .list-item[data-name="my-data"] {
    display: none;
}

body[data-appname="Lovački savez"] label[for="user_referral_code"], 
body[data-appname="Hrvatski lovački savez"] label[for="user_referral_code"], 
body[data-appname="HLS Loyalty"] label[for="user_referral_code"], 
body[data-appname^="HLS"] label[for="user_referral_code"] {
    /* display: none; */
}

body[data-appname="Lovački savez"] #user_referral_code, 
body[data-appname="Hrvatski lovački savez"] #user_referral_code, 
body[data-appname="HLS Loyalty"] #user_referral_code, 
body[data-appname^="HLS"] #user_referral_code {
    /* display: none; */
}

body[data-appname="Lovački savez"] .wallet-card-feature-description-short,
body[data-appname="Hrvatski lovački savez"] .wallet-card-feature-description-short,
body[data-appname="HLS Loyalty"] .wallet-card-feature-description-short,
body[data-appname^="HLS"] .wallet-card-feature-description-short {
    display: none !important;
}

body.showing-modal {
    overflow: hidden;
}

#modal.dynamic-content-modal .details-heading {
    padding-top: 20px;
}

#modal.dynamic-content-modal #action-button-main {
    display: inline-block !important;
    font-weight: 500;
    text-shadow: 0px 1px 3px #000;
}

#modal.dynamic-content-modal #category-carousel {
    margin-left: -25px;
    margin-right: -25px;
    border-radius: 0px;
    margin-top: 0px;
}

#modal.dynamic-content-modal #content-container {
    padding-top: 0px !important;
}

#modal.dynamic-content-modal .item-h1-name {
    font-size: 32px;
}

#modal.dynamic-content-modal .responsive-button-wrapper {
    margin-bottom: 30px;
}

#modal.dynamic-content-modal .responsive-button-wrapper .button.item .item-details .item-name {
    max-width: 215px;
}

#modal.dynamic-content-modal #sadrzaj img {
    width: 100%;
    height: auto;
    margin-bottom: 10px;
    border-radius: 10px;
}

#modal.dynamic-content-modal #sadrzaj button {
    display: none;
}

.dynamic-link-image {
    height: 265px !important;
}

.modal.showing-item.dynamic-content-modal {
    font-size: 16px;
}

.dynamic-button.floatable .item-category {
    text-align: left;
}

.dynamic-content-wrapper.full-category .link-more {
    display: none;
}

.dynamic-content-wrapper.full-category .row-section .items-row {
    white-space: normal;
}

.dynamic-content-wrapper.full-category .item-wrapper {
    width: 32% !important;
    margin: 2px !important;
}

.dynamic-content-wrapper.full-category .item-card {
    width: 100% !important;
    height: 20vh !important;
    height: 32vw !important;
    border-radius: 15px;
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.4), 0px 10px 40px -10px rgba(0, 0, 0, .1) !important;
}

body.showing-main-menu-on-top #modal-place {
    position: relative;
    z-index: 1;
}

body.showing-main-menu-on-top #o8oo_header {
    z-index: 1;
}

body.showing-main-menu-on-top #main_menu {
    transition: all .3s ease-in-out;
    box-shadow: 0px 100px 200px rgba(0, 0, 0, .9), 0px 100px 200px rgba(0, 0, 0, .9), 0px 100px 200px rgba(0, 0, 0, .9), 0px 100px 200px rgba(0, 0, 0, .9), 0px 100px 200px rgba(0, 0, 0, .9);
}

body.showing-main-menu-on-top-animation #main_menu {
    bottom: -100px;
}

body.showing-main-menu-cart #main_menu .main-menu-item {
    transition: all .4s;
    width: 16%;
}

body.showing-main-menu-cart #main_menu .main-menu-item.cart {
    /* color: #3284ff; */
}

#main_menu .main-menu-item.cart:active, 
#main_menu .main-menu-item.cart.active {
    /* color: #3284ff !important; */
}

#main_menu .main-menu-badge.pop {
    transform: scale(1.5);
}

#modal #modal-content.cart-modal-content #content-container {
    padding-top: 80px !important;
}

#modal-content.cart-modal-content .dynamic-button {
    display: inline-block;
}

#modal-content.cart-modal-content h1 {
    margin-bottom: 50px;
    font-size: 60px;
    text-align: center;
    color: #000;
}

#modal-content.cart-modal-content .payment.message-notice.subtitle.cart {
    white-space: normal;
    padding-bottom: 40px;
    margin-top: -40px;
    font-size: 13px;
}

#modal-content.cart-modal-content .icon-right {
    font-size: 14px;
}

#cart_item_list {
    margin-top: 50px;
    margin-left: -15px;
    margin-right: -15px;
    margin-bottom: 50px;
}

#cart_item_list .item-picture {
    position: relative;
    width: 60px;
    height: 60px;
    background-size: contain;
    border-radius: 200px;
    display: inline-block;
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.4), 0px 10px 40px -10px rgba(0, 0, 0, .3);
}

#cart_item_list.item-list .user-info {
    width: 40%;
}

#cart_item_list.item-list .user-info .user-name {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#cart_item_list.item-list .user-actions {
    display: inline-block;
    vertical-align: top;
    font-size: 25px;
    position: absolute;
    right: -5px;
    top: 10px;
    color: #3284ff;
}

#cart_item_list.item-list .user-actions .user-action-icon, 
#cart_item_list.item-list .user-actions .user-action-icon:active, 
#cart_item_list.item-list .user-actions .user-action-icon:hover {
    padding: 0px;
    cursor: pointer;
    text-decoration: none !important;
    display: inline-block;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 1000px;
    width: 50px;
    height: 50px;
    text-align: center;
    padding-top: 15px;
    font-size: 20px;
    background-color: #fff;
}

#cart_item_list.item-list .user-actions .user-action-icon.count {
    color: #000;
    box-shadow: none !important;
    border: none;
    font-weight: 400;
    font-size: 15px;
    padding-top: 0px;
    transform: translateY(17px);
}

#cart_item_list.item-list .user-actions .user-action-icon.count .upper {
    font-weight: 900;
    font-size: 20px;
}

#cart_item_list.item-list .user-actions .user-action-icon.count .lower {
    font-weight: 200;
    font-size: 10px;
}

.cart-sum-title {
    font-size: 25px;
    font-weight: 300;
    text-align: right;
    margin-right: 30px;
}

.cart-sum-title #cart_sum {
    font-weight: 900;
    margin-left: 30px;
}

.cart-modal > * {
    transition: all .4s;
}

.cart-modal:not(.cart-confirm-dialog) .confirm-dialog-toggle.on {
    display: none;
    opacity: 0;
}

.cart-modal.cart-confirm-dialog .confirm-dialog-toggle:not(.on) {
    display: none;
    opacity: 0;
}

#cart_confirm_buttons,
.confirm-dialog-buttons {
    text-align: center;
}

#cart_confirm_buttons .button {
    margin-bottom: 10px;
}

.cart-modal.cart-confirm-dialog-done .confirm-dialog-toggle-done {
    display: none !important;
}

.cart-confirm-dialog-not-done {
    display: none;
}

.cart-modal.cart-confirm-dialog-done .cart-confirm-dialog-not-done {
    display: block;
}

.confirm-dialog-buttons {
    margin-top: 50px;
}

.button-little-subtitle {
    color: #aaa !important;
    font-weight: 200 !important;
    font-size: 12px !important;
    padding: 10px 10px !important;
}

body[data-appname^="Lovački"] .parent.item-list-container .responsive-button-wrapper .action-button,
body[data-appname^="HLS"] .parent.item-list-container .responsive-button-wrapper .action-button {
    background-color: #02734a;
}

/* #gradient-shadow-top {
    position: absolute;
    bottom: 720px;
    height: 0px;
    left: 0px;
    right: 0px;
    box-shadow: 0px 0px 100px 200px #000;
    z-index: 1;

    transition: none;

    opacity: 0;
}

body.maximized #gradient-shadow-top {
    transition: opacity .4s ease 0s;
    opacity: 1;
} */

body.maximized .message-conversation {
    padding-top: 100%;
}

body.new-message-opened #modal-content.new-message {
    overflow: hidden;
}

body.new-message-opened.maximized #modal-content.new-message {
    bottom: 0px !important;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    /* display: block; */
}

body.maximized .message-conversation {
    padding-top: 100%;
}

body.new-message-opened #modal-content.new-message {
    overflow: hidden;
}

#search-messages-wrapper {
    position: relative;
}

#search-messages {
    background-color: rgba(0, 0, 0, .05);
    -webkit-backdrop-filter: saturate(100%) blur(30px);
    backdrop-filter: saturate(100%) blur(30px);
    border: none;
    outline: none;
    font-size: 16px;
    padding: 10px 20px;
    width: 100% !important;
    height: 45px;
    border-radius: 100px;
    margin-top: 0px;
    margin-bottom: 0px;
    padding-right: 40px;
}

#search-messages:focus, 
#search-messages:active {
    /* background-color: rgba(0, 0, 0, .05);  */
}

#search-messages-clear {
    position: absolute;
    top: 0px;
    right: 0px;
    font-size: 18px;
    opacity: .6;
    padding: 10px;
    /* background-color: rgba(0, 0, 0, .1); */
    border-radius: 100px;
    width: 45px;
    height: 45px;
    text-align: center;
    padding-top: 14px;
    opacity: 0;
    transition: opacity .4s;
}

#search-messages-wrapper.dirty #search-messages-clear {
    opacity: 1;
}

body[data-appname^="Lovački"] .item-list .user-actions,
body[data-appname^="HLS"] .item-list .user-actions {
    color: #02734a;
}

body[data-appname^="Lovački"] .item-list .list-item.oglas .user-actions,
body[data-appname^="HLS"] .item-list .list-item.oglas .user-actions {
    display: none;
}

body[data-appname^="Lovački"] .invitation,
body[data-appname^="HLS"] .invitation {
    padding: 90px 20px 90px;
    border-radius: 30px;
    background-color: #02734a;
    box-shadow: 0px 50px 90px -30px rgba(0, 0, 0, 1);
}

body[data-appname^="Lovački"] .invitation-footer,
body[data-appname^="HLS"] .invitation-footer {
    color: #fff;
}

body[data-appname^="Lovački"] .preferences-list .list-item[data-value="true"] .item-switch,
body[data-appname^="HLS"] .preferences-list .list-item[data-value="true"] .item-switch {
    background-color: #02734a;
}

body[data-appname^="Lovački"] .preferences-list .item-check .item-switch-toggle,
body[data-appname^="HLS"] .preferences-list .item-check .item-switch-toggle {
    color: #02734a;
}

body[data-appname^="Lovački"] #message-send-button,
body[data-appname^="HLS"] #message-send-button {
    background-color: #02734a !important;
}

body[data-appname^="Lovački"] .message-conversation .message.to .body,
body[data-appname^="HLS"] .message-conversation .message.to .body {
    background-color: #02734a;
}

body[data-appname^="Lovački"] .message-conversation .message.to .tail,
body[data-appname^="HLS"] .message-conversation .message.to .tail {
    color: #02734a;
}

body[data-appname^="Lovački"] #modal-content.new-message .message-send-button, 
body[data-appname^="HLS"] #modal-content.new-message .message-send-button, 
body[data-appname^="Lovački"] #modal-content.new-message .message-download-attachment-button, 
body[data-appname^="HLS"] #modal-content.new-message .message-download-attachment-button, 
body[data-appname^="Lovački"] #conversation_details.new-message .message-send-button,
body[data-appname^="HLS"] #conversation_details.new-message .message-send-button {
    color: #02734a;
}

body[data-appname^="Lovački"] .show-item-button.blue:hover, 
body[data-appname^="HLS"] .show-item-button.blue:hover, 
body[data-appname^="Lovački"] .show-item-button.blue.permanent,
body[data-appname^="HLS"] .show-item-button.blue.permanent {
    background-color: #02734a;
    border: 1px solid #02734a;
}

body[data-appname^="Lovački"] .parent.item-list-container .responsive-button-wrapper .action-button,
body[data-appname^="HLS"] .parent.item-list-container .responsive-button-wrapper .action-button {
    position: absolute;
    top: 5px;
    right: -2px;
    font-size: 20px;
    padding: 5px;
    background-color: #02734a;
    height: 40px !important;
    width: 40px !important;
}

body[data-appname^="Lovački"][data-url="/messages"] #modal-content.new-message .message-buttons,
body[data-appname^="HLS"][data-url="/messages"] #modal-content.new-message .message-buttons {
    /* top: 100px !important;
    display: none !important; */
}

body[data-appname^="Lovački"][data-url="/messages"] #modal-content.new-message .message-buttons .message-send-button,
body[data-appname^="HLS"][data-url="/messages"] #modal-content.new-message .message-buttons .message-send-button {
    /* display: none; */
}

body[data-appname^="Lovački"] .new-message .message-reciever.opened,
body[data-appname^="HLS"] .new-message .message-reciever.opened {
    height: auto;
    bottom: 150px;
    bottom: 0px;
    border-radius: 30px;
    background-color: rgba(0, 0, 0, 0.0);
    top: 120px;
    opacity: 1;
}

/* body[data-url="/messages"] {
    border: 1px solid red;
    height: 100dvh;
}

html, body {
    height: 100dvh;
}

body[data-url="/messages"] #main_menu,
body[data-url="/messages"].android #main_menu {
    bottom: 0dvh !important;
} */

/* body.android.showing-conversation #modal.maximized.keyboard #modal-content.new-message .message-text, 
body.android.new-message-opened #modal.maximized.keyboard #modal-content.new-message .message-text {
    bottom: 45%;
    margin: 0px 20px;
    border-radius: 100px;
    box-shadow: 0px 5px 20px -5px rgba(0, 0, 0, .2);
    height: 70px;
    transition: all .4s;
    border: 1px solid rgba(0, 0, 0, .1);
    background-color: rgba(255, 255, 255, .8);
    overflow: hidden;
}

body.android.showing-conversation #modal:not(.maximized).keyboard #modal-content.new-message .message-text, 
body.android.new-message-opened #modal:not(.maximized).keyboard #modal-content.new-message .message-text {
    bottom: 65px;
    margin: 0px 20px;
    border-radius: 100px;
    box-shadow: 0px 5px 20px -5px rgba(0, 0, 0, .2);
    height: 70px;
    transition: all .4s;
    border: 1px solid rgba(0, 0, 0, .1);
    background-color: rgba(255, 255, 255, .8);
    overflow: hidden;
} */

body.virtual-keyboard-visible #main_menu {
    display: none;
}

#modal.showing-attachment-details #modal-content {
    border-radius: 0px;
    top: 0px;
}

#modal.showing-attachment-details #modal-content .message-buttons {
    height: 180px;
    padding-top: 50px;
    background-color: transparent;
    -webkit-backdrop-filter: unset !important;
    backdrop-filter: unset !important;
    box-shadow: none;
    border-bottom: none;
}

#modal.showing-attachment-details #modal-content .message-buttons .primary-buttons {
    box-shadow: 0px 0px 80px 80px rgba(0, 0, 0, 1);
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    z-index: 1000;
    opacity: 1;
}

#modal.showing-attachment-details #modal-content .message-buttons .primary-buttons .button {
    display: none;
}

#modal.showing-attachment-details #modal-content .message-buttons .message-preview-buttons .button,
#modal.showing-attachment-details #modal-content .message-buttons .secondary-buttons .button {
    color: #fff;
    z-index: 9999;
    text-shadow: 0px 2px 3px #000;
}

#modal.showing-attachment-details #modal-content .message-buttons .message-preview-buttons .button.message-download-attachment-button {
    color: #6ae4b8;
    font-size: 25px;
    /* left: 0px; */
    top: -8px;
    padding: 20px;
}

#modal.showing-attachment-details #modal-content .attachment-details {
    background-color: #000;
}

#messages-buttons,
.menu-buttons {
    margin-top: 15px;
    margin-bottom: 30px;
    display: flex;
    width: 100%;
    gap: 5px;
    -webkit-box-reflect: below 5px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(30%, transparent), to(rgba(250, 250, 250, 0.1)));
}

body:not([data-url="/messages"]) #messages-buttons {
    display: none;
}

#messages-buttons .messages-button,
.menu-buttons .menu-button {
    font-size: 18px;
    font-weight: 400;
    padding: 12px 15px;
    background-color: rgba(0, 0, 0, .3);
    border-radius: 22px;
    color: #000;
    display: inline-block;
    text-align: center;
    flex: 1 1 auto;
    background-color: rgba(228, 238, 233, 1);
    color: #02734a;
    transition: all .4s;
}

#messages-buttons .messages-button .messages-button-text,
.menu-buttons .menu-button .menu-button-text {
    display: none;
}

#messages-buttons .messages-button.active,
.menu-buttons .menu-button.active {
    background-color: #02734a;
    color: #fff;
}

#messages-buttons .messages-button.active .messages-button-text,
.menu-buttons .menu-button.active .menu-button-text {
    display: inline-block;
    font-style: normal;
    padding-left: 7px;
}

#messages {
    margin-top: 20px;
    /* margin-bottom: 50px; */
}

.group-header-block {
    padding: 10px;
    height: 230px;
    margin-left: -10px;
    margin-right: -10px;
    border-radius: 30px;
    background-color: #02734a;
    background: linear-gradient(180deg, #02734a 60%, #01603e 100%);
    box-shadow: 0px 4px 10px -3px rgba(0, 0, 0, .6);
    color: #fff;
    overflow: hidden;
    position: relative;
    transition: all .2s;
    display: none;
}

.group-header-block {
    margin-top: -10px;
    margin-bottom: 10px;
}

#recepti-element {
    background: linear-gradient(180deg, #730202 60%, #5e0000 100%);
}

body:not([data-title-path^="Hrvatski lovački savez,Oglasnik"]) .group-header-block {
    display: none !important;
}

body[data-title-path^="Hrvatski lovački savez,Oglasnik"] #sell-item-element {
    display: block !important;
}

body[data-title-path^="Hrvatski lovački savez,Recepti"] #recepti-element {
    display: block !important;
}

body[data-title-path^="Hrvatski lovački savez,Oglasnik"]:not([data-title-path="Hrvatski lovački savez,Oglasnik"]) .group-header-block,
body[data-title-path^="Hrvatski lovački savez,Recepti"]:not([data-title-path="Hrvatski lovački savez,Recepti"]) .group-header-block {
    height: 66px;
}

body[data-title-path^="Hrvatski lovački savez,Oglasnik"]:not([data-title-path="Hrvatski lovački savez,Oglasnik"]) .group-header-block #sell-item-input-wrapper,
body[data-title-path^="Hrvatski lovački savez,Recepti"]:not([data-title-path="Hrvatski lovački savez,Recepti"]) .group-header-block #sell-item-input-wrapper {
    bottom: 11px;
}

.group-header-block .sell-item-buttons.filter-buttons,
.group-header-block #count-items-title {
    display: none;
}

body[data-title-path^="Hrvatski lovački savez,Oglasnik"]:not([data-title-path="Hrvatski lovački savez,Oglasnik"]) .group-header-block .sell-item-buttons.filter-buttons,
body[data-title-path^="Hrvatski lovački savez,Recepti"]:not([data-title-path="Hrvatski lovački savez,Recepti"]) .group-header-block .sell-item-buttons.filter-buttons,
body[data-title-path^="Hrvatski lovački savez,Oglasnik"]:not([data-title-path="Hrvatski lovački savez,Oglasnik"]) .group-header-block #count-items-title,
body[data-title-path^="Hrvatski lovački savez,Recepti"]:not([data-title-path="Hrvatski lovački savez,Recepti"]) .group-header-block #count-items-title {
    display: inline-block;
}

body[data-title-path^="Hrvatski lovački savez,Oglasnik"]:not([data-title-path="Hrvatski lovački savez,Oglasnik"]) .group-header-block .sell-item-buttons:not(.filter-buttons),
body[data-title-path^="Hrvatski lovački savez,Recepti"]:not([data-title-path="Hrvatski lovački savez,Recepti"]) .group-header-block .sell-item-buttons:not(.filter-buttons) {
    display: none;
}

body[data-title-path^="Hrvatski lovački savez,Oglasnik"]:not([data-title-path="Hrvatski lovački savez,Oglasnik"]) .group-header-block #sell-item-bg,
body[data-title-path^="Hrvatski lovački savez,Recepti"]:not([data-title-path="Hrvatski lovački savez,Recepti"]) .group-header-block #sell-item-bg {
    bottom: -205px;
}

#choose-mail-input-wrapper,
#sell-item-input-wrapper {
    position: relative;
    width: 280px;
    margin: auto;
    margin-top: 100px;
}

#sell-item-input-wrapper {
    bottom: 25px;
    text-align: center;
    margin: auto !important;
    position: absolute;
    left: 0px;
    right: 0px;
    width: auto;
}

#choose-mail-input {
    border: none;
    outline: none;
    padding: 10px;
    /* text-align: right; */
    text-align: center;
    /* padding-right: 130px; */
    width: 100%;
    height: 44px;
}

#choose-mail-input-placeholder {
    /* position: absolute;
    top: 0px;
    color: #444;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, .3);
    font-size: 16px;
    font-weight: 400;
    right: 0px;
    border-left: 1px solid rgba(0, 0, 0, .1);
    pointer-events: none;
    padding: 12px 20px 9px 20px;
    border-top-right-radius: 100px;
    border-bottom-right-radius: 100px;
    background-color: rgba(228, 238, 233, .8);
    height: 44px; */
}

#choose-mail-input-placeholder {
    top: 0px;
    color: #fff;
    font-size: 12px;
    font-weight: 300;
    right: 0px;
    text-align: center;
    margin-bottom: -7px;
    display: none;
}

#choose-mail-element.dirty #choose-mail-input-placeholder {
    display: block;
}

#choose-mail-reserve-button,
.sell-item-buttons {
    padding: 10px 20px;
    background-color: #000;
    display: inline-block;
    width: 150px;
    text-align: center;
    font-size: 16px;
    border-radius: 100px;
    margin: auto;
    margin-top: 10px;
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.9), 0px 10px 30px -10px rgba(0, 0, 0, 1);
}

body[data-title-path^="Hrvatski lovački savez,Recepti"]:not([data-title-path="Hrvatski lovački savez,Recepti"]) .group-header-block .sell-item-buttons,
.group-header-block.oglasnik-category .sell-item-buttons {
    width: auto;
}

body[data-title-path^="Hrvatski lovački savez,Recepti"]:not([data-title-path="Hrvatski lovački savez,Recepti"]) .group-header-block #sell-item-input-wrapper,
.group-header-block.oglasnik-category #sell-item-input-wrapper {
    text-align: right;
    padding-right: 13px;
}

#choose-mail-reserve-button {
    display: block;
}

#choose-mail-input-bg,
#sell-item-bg {
    position: absolute;
    font-size: 300px;
    opacity: .2;
    transform: scale(1.42) rotate(4deg);
    top: -4px;
    left: 0px;
    right: 0px;
    text-align: center;
    /* transition: all .3s; */
}

#sell-item-bg {
    transform: scale(1.0) rotate(4deg);
    bottom: -120px;
    top: auto;
}

#choose-mail-title,
#sell-item-title,
#count-items-title {
    color: #fff;
    position: absolute;
    top: 16px;
    left: 0px;
    right: 0px;
    font-size: 32px;
    white-space: break-spaces;
    text-align: center;
    padding: 0px 50px;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, .9);
    z-index: 1;
}

#count-items-title {
    top: 14px;
    left: 30px;
    right: auto;
    padding: 0px;
    font-size: 20px;
}

#sell-item-title {
    bottom: 90px;
    top: auto;
}

#choose-mail-element-footer {
    margin-top: 20px;
}

#choose-mail-element-footer .choose-mail-list-item {
    font-size: 16px;
    padding: 10px 10px;
    padding: 6px 10px;
    font-weight: 300;
    white-space: normal;
}

#choose-mail-element-footer .choose-mail-list-item .icon {
    color: #02734a;
    font-size: 22px;
    padding-right: 5px;
    text-shadow: 0px 8px 5px rgba(0, 0, 0, .2);
}

body[data-appname^="Lovački"][data-url="/messages"] #message-friends .item-list .list-item,
body[data-appname^="HLS"][data-url="/messages"] #message-friends .item-list .list-item {
    padding-left: 10px;
    padding-right: 10px;
    background-color: #02734a;
    border-radius: 100px;
    border: none;
    color: #fff;
    margin-bottom: 10px;
    background-color: #e4eee8;
    color: #000;
}

body[data-appname^="Lovački"][data-url="/messages"] #message-friends .item-list .list-item .details-text-gray,
body[data-appname^="HLS"][data-url="/messages"] #message-friends .item-list .list-item .details-text-gray {
    color: #fff;
    color: #000;
}

body[data-appname^="Lovački"][data-url="/messages"] #message-friends .item-list .user-info, 
body[data-appname^="HLS"][data-url="/messages"] #message-friends .item-list .user-info, 
body[data-appname^="Lovački"][data-url="/messages"] #message-friends .item-list .item-info,
body[data-appname^="HLS"][data-url="/messages"] #message-friends .item-list .item-info {
    margin-top: 10px;
}

body[data-appname^="Lovački"][data-url="/messages"] #logo_user,
body[data-appname^="HLS"][data-url="/messages"] #logo_user {
    transition: none;
    transition: all .4s;
}

body[data-appname^="Lovački"] .item-actions a,
body[data-appname^="HLS"] .item-actions a {
    background-color: rgba(228, 238, 233, 1);
    color: #02734a !important;
}

#groups-wrapper {
    
}

#groups-wrapper .section-title {
    display: none;
}

#groups-wrapper .list-item {
    padding-top: 10px;
}

#groups-wrapper .list-item.disabled {
    opacity: .2;
    pointer-events: none;
    /* display: none; */
}

#groups-wrapper .list-item .item-info {
    margin-top: 10px;
}

#groups-wrapper .list-item .item-icon {
    color: #02734a;
    top: 15px;
}

body[data-title-path^="Hrvatski lovački savez,Recepti"] #groups-wrapper .list-item .item-icon {
    color: #c22520;
}

#groups-wrapper .list-item .item-description {
    font-size: 14px;
    text-overflow: ellipsis;
    width: 60vw;
    overflow: hidden;
}

#groups-wrapper .list-item .item-name {
    text-overflow: ellipsis;
    width: 60vw;
    overflow: hidden;
}

#groups-wrapper .list-item .item-cijena {
    position: absolute;
    top: 37px;
    right: 0px;
    font-size: 14px;
    padding: 7px 11px;
}

body.scrollable-title #logo-el {
    display: none;
}

body.scrollable-title #logo_subtitle {
    transition: all .4s;
    opacity: 1;
    /* pointer-events: none; */
    direction: ltr;

    text-overflow: unset;
    white-space: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    mask-image: linear-gradient(to left, black 80%, transparent 90%);
    mask-composite: exclude;
    -webkit-mask-image: linear-gradient(to left, black 80%, transparent 90%);
    -webkit-mask-composite: xor;
    mask-mode: alpha;

    mask-image: linear-gradient(to right, transparent 10%, black 20%, black 80%, transparent 90%);
    -webkit-mask-image: linear-gradient(to right, transparent 10%, black 20%, black 80%, transparent 90%);
}

body.scrollable-title #logo_subtitle_scroll_text {
    transition: all 4s;
    position: relative;
    left: 0px;
}

body.scrollable-title #logo_subtitle::-webkit-scrollbar {
    display: none;
}

body.scrollable-title #messages .responsive-button-wrapper .button.item.floatable {
    display: none;
}

body.scrollable-title #prevPage {
    display: block !important;
    opacity: 1;
}

body.scrollable-title #logo_user {
    display: block !important;
    opacity: 1;
    bottom: -6px;
    bottom: -9px;
}

.item-icon-area .item-icon.bi {
    top: 9px !important;
}

.game-icons--winchester-rifle {
    display: inline-block;
    width: 512px;
    height: 512px;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23000' d='m323.8 149.6l10.4 13.8L491.8 43.8L481.4 30zm-95.1 72.2l25.3 33.3l-68.7 64.7l-21.5-10.1l9.3-45.7zM18.3 424.2l99.1-95.3s21.7 10.5 27.5 8.7c.5-.2 1-.4 1.4-.8c2.6-2 6-6.9 9.1-12l1.1.5l19 8.8L74.3 482c-6.8-40.3-51.6-57.5-56-57.8m224.1-212.8l67.7-51.3l17.1 22.6c4.7 6.3 3.9 15.5-2.4 20.2l-56.4 42.8l-.7-1zm-64.8 182.3c7.9 4.8 18.3 2.3 23.1-5.7l14-23.1c3.4-5.7 3.2-12.8-.6-18.3c1.3-.7 2.5-1.5 3.6-2.3c5.4-4 9-9.9 10.1-16.4c1.1-6.8-.5-13.8-4.4-20.3l-6.4 6.1c2.1 3.9 3 8.4 2.3 12.9c-1 6.4-5.7 11.5-12.7 14.2c-7.7-3.1-16.5-.2-20.7 6.9l-14 23.1c-4.8 7.8-2.3 18.1 5.7 22.9m1.7-18.6l14.1-23.2c2.4-3.9 7.4-5.1 11.3-2.8l1.1.8c3.1 2.6 3.8 7.1 1.7 10.5l-14.1 23.2c-2.4 3.9-7.4 5.2-11.3 2.8c-3.9-2.3-5.2-7.4-2.8-11.3m167.6-189c-.5-3-1.5-5.9-2.8-8.7L488.5 67.9l5.2 6.9zm-192.7 84.5l-3.2 15.6c-7.7-3.3-10.2-12.1-18.1-9.2c2.4-8.6 16.4-5.3 21.3-6.4'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.mdi--gun {
    display: inline-block;
    width: 24px;
    height: 24px;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M7 5h16v4h-1v1h-6a1 1 0 0 0-1 1v1a2 2 0 0 1-2 2H9.62c-.38 0-.73.22-.9.56l-2.45 4.89c-.17.34-.51.55-.89.55H2s-3 0 1-6c0 0 3-4-1-4V5h1l.5-1h3zm7 7v-1a1 1 0 0 0-1-1h-1s-1 1 0 2a2 2 0 0 1-2-2a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.wpf--swiss-army-knife {
    display: inline-block;
    width: 26px;
    height: 26px;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath fill='%23000' d='M12.5 0A4.5 4.5 0 0 0 8 4.5v17a4.5 4.5 0 0 0 9 0v-17A4.5 4.5 0 0 0 12.5 0M.062.406c-.164 1.052-.09 3.636.813 4.875L7 13.781V7.47l-1.125-.157l.219-1.343l-1.344-.22l.219-1.313l-1.344-.218l.219-1.344L2.5 2.687l.219-1.343l-1.344-.219C.983 1.034.31.541.062.406M12.5 3a1.5 1.5 0 1 1-.001 3.001A1.5 1.5 0 0 1 12.5 3M18 4v6.531s1.802 2.182 2.938 3.563c1.006 1.224 3.015 2.743 4.968 2.094c-.83-1.948-1.6-3.413-2.25-4.875C21.591 8.466 18 4 18 4M1 12c-.747.072-1 .806-1 2.188C0 17.907 7 22 7 22v-2.844s-2-.726-2-3.062c0-1.318-.309-2.148-1-2.719c-.219-.181-.9-.438-1.219-.219c.271.477 1.044 2.183.625 2.438C2.83 15.947.832 15.274 1 12m11 8h1v1h1v1h-1v1h-1v-1h-1v-1h1z'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.game-icons--bowie-knife {
    display: inline-block;
    width: 512px;
    height: 512px;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23000' d='M416.833 424.997a51.54 51.54 0 0 0-13.354 22.973l-78.98-78.98l44.972-44.97l78.98 78.978a51.54 51.54 0 0 0-22.974 13.354zm-209.087-202.24l-86.28-97.65l97.653 86.277l90.77 80.19l14.927-14.927c-90.534-99.383-137.713-167.87-176.19-212.085c0 0-39.608 13.795-122.627-38.08c0 0 7.062 120.442 252.034 296.948l9.913-9.913zm155.22 82.16a14.43 14.43 0 0 0-20.37-20.37l-57.57 57.567a14.43 14.43 0 0 0 20.37 20.37zM486 429.15a33.746 33.746 0 0 0-47.722 0l-8.646 8.647a33.746 33.746 0 0 0 0 47.722z'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.tabler--binoculars-filled {
    display: inline-block;
    width: 24px;
    height: 24px;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M8.887 6.748c-.163 0-.337.016-.506.057c-.172.041-.582.165-.838.562l-.014.02l-.607 1.05c-.307.205-.534.46-.693.717l-.014.02l-2.572 4.65a4 4 0 0 0-.274.494l-.006.01A4 4 0 0 0 3 16a4 4 0 0 0 8 0v-1h2v1a4 4 0 1 0 7.635-1.67l-.004-.012a4 4 0 0 0-.274-.494l-2.572-4.65l-.014-.02a2.3 2.3 0 0 0-.693-.716l-.607-1.051l-.014-.02c-.256-.397-.667-.52-.838-.562a2.2 2.2 0 0 0-.664-.051a2 2 0 0 0-.68.156c-.184.081-.638.327-.754.889l-.007.037l-.14 1.1c-.22.283-.374.64-.374 1.064v1h-2v-1c0-.424-.154-.781-.373-1.064l-.14-1.1l-.008-.037c-.116-.562-.57-.808-.754-.889a2 2 0 0 0-.68-.156a2 2 0 0 0-.158-.006M7 14a2 2 0 1 1-1.838 1.209l.19-.342C5.712 14.344 6.316 14 7 14m10 0c.684 0 1.288.344 1.648.867l.19.342A2 2 0 1 1 17 14'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

#groups-wrapper .list-item .item-icon.game-icons--winchester-rifle {
    height: 60px;
    width: 60px;
    position: absolute;
    top: 0px;
    left: 0px;
}

#groups-wrapper .list-item .item-icon.mdi--gun {
    height: 45px;
    width: 45px;
    position: absolute;
    top: 8px;
    left: 3px;
}

#groups-wrapper .list-item .item-icon.game-icons--bowie-knife {
    height: 55px;
    width: 55px;
    position: absolute;
    top: 3px;
    left: 0px;
}

#groups-wrapper .list-item .item-icon.tabler--binoculars-filled {
    height: 50px;
    width: 50px;
    position: absolute;
    top: 5px;
    left: 0px;
}

#groups-wrapper .list-item .item-icon.bi-crosshair {
    font-size: 40px;
    top: 2px !important;
}

body.scrollable-title #logo_user .user-picture-area {
    /* background-color: transparent; */
    background-color: rgba(0, 0, 0, .05);
}

body.scrollable-title #logo_user .user-picture-area .user-icon {
    font-size: 28px !important;
    color: #02734a;
    top: 4px;
    display: block !important;
    transition: all .4s;
}

body.scrollable-title[data-title-path^="Hrvatski lovački savez,Recepti"] #logo_user .user-picture-area .user-icon {
    /* color: #c22520; */
}

body.scrollable-title #logo_user .user-picture-area .user-picture {
    display: none !important;
}

body.scrollable-title #logo_user .user-picture-area .user-picture.visible {
    display: block !important;
}

body.scrollable-title #logo_user .user-picture-area .user-icon.game-icons--winchester-rifle {
    height: 33px;
    width: 33px;
    top: 5px;
}

body.scrollable-title #logo_user .user-picture-area .user-icon.mdi--gun {
    height: 33px;
    width: 33px;
    top: 5px;
}

body.scrollable-title #logo_user .user-picture-area .user-icon.game-icons--bowie-knife {
    height: 30px;
    width: 30px;
    top: 5px;
}

body.scrollable-title #logo_user .user-picture-area .user-icon.tabler--binoculars-filled {
    height: 30px;
    width: 30px;
    top: 4px;
}

body.scrollable-title #logo_user .user-picture-area .user-icon.fa-truck-pickup {
    top: 6px;
}

body.scrollable-title #logo_user .user-picture-area .user-icon.fa-tshirt {
    top: 6px;
}

body.scrollable-title #logo_user .user-picture-area .user-icon.fa-newspaper {
    top: 8px;
    font-size: 25px !important;
}

body.scrollable-title #logo_user .user-picture-area .user-icon.bi-crosshair {
    top: 0px;
}

body.scrollable-title #logo_user .user-picture-area .user-icon.bi-person-circle {
    top: 0px;
}

body.scrollable-title #logo_user .user-picture-area .user-icon.bi-folder-fill {
    top: 0px;
}

body.scrollable-title #logo_user .user-picture-area .user-icon.fa-paint-roller {
    top: 10px;
    font-size: 25px !important;
}

body.scrollable-title #messages-buttons {
    display: none;
}

body:not([data-appname^="Lovački"]):not([data-appname^="HLS"]) #messages-buttons {
    display: none;
}

#messages .item-icon-area {
    border-radius: 100px;
    background-color: #f4f4f4;
}

#my_data .list-item[data-key="Sport"] {
    display: none;
}

.message .list-item[data-type="attachment"] {
    margin-top: -7px;
}

.message .list-item[data-type="attachment"] .file-container {
    width: unset;
}

.responsive-button-wrapper .button.item .item-details .item-category {
    text-align: left;
    padding-left: 0px;
}

body[data-appname^="Lovački"] #modal-content-down .responsive-button-wrapper.attachment .action-button,
body[data-appname^="HLS"] #modal-content-down .responsive-button-wrapper.attachment .action-button {
    background-color: #02734a;
    border: 1px solid #02734a;
}

body[data-appname^="Lovački"] .responsive-button-wrapper.attachment .user-icon,
body[data-appname^="HLS"] .responsive-button-wrapper.attachment .user-icon {
    color: #02734a;
}


body[data-appname^="Lovački"] .file-container .file .icon,
body[data-appname^="HLS"] .file-container .file .icon {
    color: #02734a;
}

body[data-appname^="Lovački"] .file-container .file.uploaded .filename,
body[data-appname^="HLS"] .file-container .file.uploaded .filename {
    display: none;
}

body[data-appname^="Lovački"] #file_upload .icon,
body[data-appname^="HLS"] #file_upload .icon {
    color: #02734a;
}

body[data-appname^="Lovački"] .responsive-button-wrapper.attachment #action-button-floatable .item-wrapper,
body[data-appname^="HLS"] .responsive-button-wrapper.attachment #action-button-floatable .item-wrapper {
    pointer-events: none;
}

body[data-appname^="Lovački"][data-url="/messages"] #modal.showing-attachment-details #modal-content .attachment-details,
body[data-appname^="HLS"][data-url="/messages"] #modal.showing-attachment-details #modal-content .attachment-details {
    /* z-index: 99999; */
}

body[data-appname^="Lovački"][data-url="/messages"] .responsive-button-wrapper #action-button-floatable.fixed,
body[data-appname^="HLS"][data-url="/messages"] .responsive-button-wrapper #action-button-floatable.fixed {
    pointer-events: all;
    background-color: transparent;
    backdrop-filter: none;
    box-shadow: none;
    border-top: none !important;
    bottom: auto;
    top: 29px;
    left: auto;
    right: 0px;
    font-size: 25px !important;
}

body[data-appname^="Lovački"][data-url="/messages"] .responsive-button-wrapper #action-button-floatable.fixed .button,
body[data-appname^="HLS"][data-url="/messages"] .responsive-button-wrapper #action-button-floatable.fixed .button {
    border-bottom: none;
    display: inline-block;
}

body[data-appname^="Lovački"][data-url="/messages"] .responsive-button-wrapper.fullscreen,
body[data-appname^="HLS"][data-url="/messages"] .responsive-button-wrapper.fullscreen {

}

body[data-appname^="Lovački"][data-url="/messages"] .responsive-button-wrapper.fullscreen .button,
body[data-appname^="HLS"][data-url="/messages"] .responsive-button-wrapper.fullscreen .button {
    color: #6ae4b8;
    z-index: 9999;
    text-shadow: 0px 2px 3px #000;
    padding: 20px 20px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body[data-appname^="Lovački"][data-url="/messages"] .responsive-button-wrapper.fullscreen .button.red,
body[data-appname^="HLS"][data-url="/messages"] .responsive-button-wrapper.fullscreen .button.red {
    color: #ff4848 !important;
}

#groups-wrapper .list-item[data-key="Moji oglasi"],
#groups-wrapper .list-item[data-key="Moji recepti"] {
    display: none;
}

body[data-title="Moji oglasi"] .message-conversation .message,
body[data-title="Moji recepti"] .message-conversation .message {
    display: none;
}

body[data-title="Moji oglasi"] .message-conversation .message.to.queue[data-type="form"],
body[data-title="Moji recepti"] .message-conversation .message.to.queue[data-type="form"] {
    display: block;
}

body[data-title="Moji oglasi"] #message-text,
body[data-title="Moji recepti"] #message-text {
    display: none;
}

body[data-title="Moji oglasi"] .message-conversation .message.to .tail,
body[data-title="Moji recepti"] .message-conversation .message.to .tail {
    display: none;
}

body[data-title="Moji oglasi"] .message-conversation .message .body,
body[data-title="Moji recepti"] .message-conversation .message .body {
    border-radius: 50px !important;
    height: 182px !important;
    max-width: none !important;
    width: auto !important;
    overflow: hidden !important;
    padding: 10px;
}

body[data-title="Moji recepti"] .message-conversation .message .body {
    background-color: #730202 !important;
}

body[data-title="Moji oglasi"] .message .list-item[data-type="attachment"],
body[data-title="Moji recepti"] .message .list-item[data-type="attachment"] {
    /* margin-top: -192px; */
    z-index: 99999;
    /* left: -10px; */
    width: 132px;
    position: absolute;
    top: -30px;
    left: -10px;
}

body[data-title="Moji oglasi"] .message.to .item-info,
body[data-title="Moji recepti"] .message.to .item-info {
    color: #fff;
    margin-left: 33vw;
}

body[data-title="Moji oglasi"] .message.to .popover-title,
body[data-title="Moji recepti"] .message.to .popover-title {
    color: #000;
    text-align: right;
    padding-right: 20px !important;
}

body[data-title="Moji oglasi"] .message .list-item.user-form select.user-form-input,
body[data-title="Moji recepti"] .message .list-item.user-form select.user-form-input {
    padding-right: 12px;
    direction: rtl;
}

body[data-title="Moji oglasi"] .message .item-list .list-item,
body[data-title="Moji recepti"] .message .item-list .list-item {
    overflow: visible;
}

body[data-title="Moji oglasi"] .message .item-list .list-item[data-name="status"],
body[data-title="Moji recepti"] .message .item-list .list-item[data-name="status"] {
    display: none !important;
}

.item-icon-area.oglasnik.slika {
    background-size: cover;
    background-position: center;
}

#sell-item-input-wrapper .sort-icon {
    display: inline-block;
    transition: all .4s;
}

#sell-item-input-wrapper .sort-icon.asc {
    transform: rotate(180deg);
}

.oglas > .item-card {
    width: 100px !important;
    height: 100px !important;
    border-radius: 100px !important;
}

.item-wrapper.oglas .item-title, 
.item-wrapper.oglas .item-category, 
.item-wrapper.oglas .item-price-wrapper {
    min-width: 100px !important;
    max-width: 100px !important;
}

.item-price.oglasnik {
    position: absolute;
    right: 10px;
    top: 50px;
    background-color: #ddd;
    font-size: 20px;
    padding-left: 15px;
    padding-right: 15px;
}

body[data-title="Trebam majstora"] .item-price.oglasnik,
body[data-title="Trebam majstora"] #groups-wrapper .list-item .item-cijena {
    display: none;
}

body[data-title-path^="Hrvatski lovački savez"] #logo_user .user-picture-area .user-icon {
    top: 8px;
    font-size: 23px !important;
}

body[data-title-path^="Hrvatski lovački savez,Oglasnik"] #logo_user .user-picture-area .user-icon {
    top: 0px;
    font-size: 28px !important;
}

body[data-appname=""] .main-menu-item.poruke,
body[data-appname=""] .main-menu-item.cart {
    display: none !important;
}

body[data-appname=""] #main_menu .main-menu-item {
    width: 25%;
}

body.new-message-opened:not(.new-message-user-picked) #modal-content.new-message .message-text {
    display: none;
}

body.new-message-opened.new-message-user-picked #search-friends,
body.new-message-opened.new-message-user-picked #message-friends-wrapper,
body.new-message-opened.new-message-user-picked #message-friends,
body.showing-conversation  #message-friends {
    display: none !important;
}

#search-friends-loader {
    width: 20px;
    height: 25px;
    background-image: url(/bundles/appcore/images/loader.gif);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: 10px;
    right: 13px;
}

body[data-url="/friends"] .friend-list .list-item[data-id="0"] {
    display: none;
}

.no-transition {
    transition: none !important;
}

.no-scroll {
    overscroll-behavior: none;
    overflow: hidden;
    touch-action: none;
}

#message_popup {
    border: 1px solid #fff;
    background-color: #fff;
    border-radius: 100px;
    box-shadow: 0px 4px 20px -5px rgba(0, 0, 0, .4), 0px 4px 200px 0px rgba(0, 0, 0, .5);
    position: absolute;
    top: -70px;
    left: 20px;
    right: 20px;
    z-index: 1;
}

body.android #message_popup {
    top: -57px;
}

#popup_content {
    padding: 10px;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    overflow-x: auto;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 100px;
    background-color: #fff;
    z-index: 1;
}

#message_popup_background {
    /* background-color: rgba(255, 0, 0, .5); */
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    z-index: 1;
}

#message_popup .popup {
    font-size: 34px;
    text-align: center;
    padding: 0px 16px;
    border-radius: 100px;
    /* background-color: rgba(0, 0, 0, .05); */
    display: inline-block;
}

body.android #message_popup .popup {
    font-size: 25px;
}

#message_popup #reply {
    color: #036945;
}

#message_popup #report {
    color: #d73535;
    color: #036945;
}

#message_popup .bouble {
    position: absolute;
    border-radius: 100px;
    background-color: #fff;
    box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, .4);
}

#message_popup .bouble.one {
    height: 18px;
    width: 18px;
    bottom: -4px;
    right: 6px;
}

.message.from #message_popup .bouble.one {
    right: auto;
    left: 6px;
}

#message_popup .bouble.two {
    height: 8px;
    width: 8px;
    bottom: -14px;
    right: 6px;
}

.message.from #message_popup .bouble.two {
    right: auto;
    left: 6px;
}

.push-hard {
    transition: all .4s;
    transform: scale(0.90);

    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

#message-report-button {
    position: absolute;
    top: 14px;
    right: 58px;
    font-size: 15px;
    padding: 9px 14px;
    border-radius: 100px;
    color: #fff;
    background-color: #f86565;
    background-color: #454545;
    background-color: #01734b;
    transition: all .4s;
}

body:not(.message-popup) #message-report-button {
    opacity: 0 !important;
    pointer-events: none;
    transform: scale(.8) translateX(40px);
}

body.message-popup #message-send-button {
    text-align: center;
    height: 39px;
    width: 39px;
    font-size: 21px;
    padding: 4px;
}

body.message-popup .new-message .message-text-wrapper {
    padding-right: 128px;
}

#message-attachment-button {
    transition: all .4s;
}

body.message-popup #message-attachment-button {
    opacity: 0;
    transform: scale(.8) translateX(-40px);
}

#message-popup-reply-background {
    position: fixed;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 100%;
    /* background: linear-gradient(to top, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, .2) 100%); */
    pointer-events: none;
    /* transition: all .2s; */
    opacity: 0;
}

body.message-popup-reply #message-popup-reply-background {
    background: rgba(255, 255, 255, .8);
    backdrop-filter: saturate(180%) blur(10px);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    backdrop-filter: saturate(180%) blur(10px);
    pointer-events: all;
    opacity: 1;
}

body.message-popup #message-popup-reply-background {
    /* pointer-events: all; */
    z-index: 1;
}

#message-text .message-conversation.temporary {
    padding: 0px !important;
    position: absolute;
    bottom: 120px;
    left: 0px;
    right: 00px;
    pointer-events: none;
    display: none;
}

body.message-popup-reply #message-text .message-conversation.temporary {
    display: block !important;
}

body.message-popup-reply #message-text {
    background-color: #fff !important;
    overflow: visible !important;
}

body.message-popup-reply #message-text .message-conversation.temporary .message.from {
    margin-left: 50px;
    transform: scale(1.3);
}

body.message-popup-reply #message-text .message-conversation.temporary .message.from.user-info {
    margin-left: 100px;
}

body.message-popup-reply #message-text .message-conversation.temporary .message.to {
    margin-right: 50px;
    transform: scale(1.3);
}

body.android.message-popup-reply #message-text .message-conversation.temporary .message.from {
    margin-left: 50px;
    transform: scale(1.3);
}

body.android.message-popup-reply #message-text .message-conversation.temporary .message.from.user-info {
    margin-left: 90px;
}

body.android.message-popup-reply #message-text .message-conversation.temporary .message.to {
    margin-right: 50px;
    transform: scale(1.3);
}

body.ios.new-message-user-picked.message-popup-reply #message-text .message-conversation.temporary .message.from {
    margin-left: 55px;
    transform: scale(1.3);
}

body.ios.new-message-user-picked.message-popup-reply #message-text .message-conversation.temporary .message.from.user-info {
    margin-left: 90px;
}

body.ios.new-message-user-picked.message-popup-reply #message-text .message-conversation.temporary .message.to {
    margin-right: 55px;
    transform: scale(1.3);
}

.bounce {
  animation: bounce 1.0s ease-in-out infinite;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0) scale(1.3);
    animation-timing-function: ease-out;
  }
  50% {
    transform: translateY(-15px) scale(1.3);
    animation-timing-function: ease-in;
  }
}

body[data-url="/messages"] #modal.modal-inbound-message #modal-content {
    top: 120px !important;
    border-radius: 30px !important;
    bottom: 25%;
    left: 0px;
    right: 0px;
}

body[data-url="/messages"] #modal.modal-inbound-message #message-conversation {
    padding-top: 80px;
    padding-bottom: 20px;
}

body[data-url="/messages"] #modal.modal-inbound-message .message-buttons {
    top: 0px !important;
    display: block !important;
}

body[data-url="/messages"] #modal.modal-inbound-message #message-progress {
    top: 55px !important;
    background-color: #02734a !important;
    transition: width 2.1s, opacity .4s !important;
}

body.message-popup-reply #message-report-button {
    opacity: 0 !important;
    pointer-events: none;
    transform: scale(.8) translateX(40px);
}

body.message-popup-reply .new-message .message-text-wrapper {
    padding-right: 67px;
}

.message.to.user-info #message_popup {
    left: -10px;
}

#messages .item-list .list-item[data-name="Lovački oglasnik"],
#messages .item-list .list-item[data-name="0800 Messenger - Prijave"] {
    display: none !important;
}

.message .list-item[data-name="komentar"] .user-form-title {
    height: 200px;
    width: 200px;
}

.message .list-item[data-name="komentar"] .user-form-data {
    display: none;
}

.message.to[data-step-id="524"] {
    display: none;
}

.modal-message-window .list-item[data-name="komentar"] .user-form-title {
    display: none;
}

.modal-message-window .list-item[data-name="komentar"] .user-form-input {
    height: 300px;
    text-align: left;
}

.list-item[data-name="komentar"] .user-form-table {
    border-bottom: none !important;
}

.list-item[data-name="_message_id"],
.list-item[data-name="kategorija"] {
    display: none !important;
}

body[data-title-path^="Hrvatski lovački savez,Recepti"] .list-item[data-name="kategorija"] {
    display: block !important;
}

.message-conversation .message .body {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

#o8oo_header {
    transition: all .4s;
}

body.user-info #o8oo_header {
    height: 501px !important;
}

body.user-info .o8oo-sidebar-fix {
    height: 450px;
    background-color: rgba(255, 255, 255, 1);
}

body.user-info #logo_subtitle {
    bottom: 90px;
    /* mask-image: linear-gradient(to left, black 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(to left, black 90%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%); */
}

body.user-info #logo_user {
    margin: 0px;
    position: absolute;
    top: 130px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

#o8oo_header .user-picture-area {
    transition: all .4s;
}

body.user-info #o8oo_header .user-picture-area {
    height: 200px !important;
    width: 200px !important;
}

body[data-appname^="Lovački"][data-url="/messages"] #o8oo_header .user-picture,
body[data-appname^="HLS"][data-url="/messages"] #o8oo_header .user-picture {
    /* transition: all .4s; */
}

body.user-info #o8oo_header .user-picture,
body.user-info #o8oo_header #logo_user .user-picture-area .item-card.admin.form-upload-element {
    height: 200px !important;
    width: 200px !important;
}

#o8oo_header .user-picture,
#o8oo_header #logo_user .user-picture-area .item-card.admin.form-upload-element {
    transition: all .4s;
}

body.user-info #logo_user .user-picture-area .user-icon,
body.user-info #logo_user .user-picture-area .user-icon.fa-newspaper,
body.user-info #logo_user .user-picture-area .user-icon.fa-paint-roller {
    top: 36px !important;
    font-size: 125px !important;
}

body.user-info #logo_user .user-picture-area .user-icon.game-icons--winchester-rifle {
    height: 133px;
    width: 133px;
}

body.user-info #logo_user .user-picture-area .user-icon.bi-crosshair {
    top: 10px !important;
}

body.user-info #logo_user .user-picture-area .user-icon.mdi--gun {
    height: 133px;
    width: 133px;
    top: 35px !important;
}

body.user-info #logo_user .user-picture-area .user-icon.game-icons--bowie-knife {
    height: 130px;
    width: 130px;
}

body.user-info #logo_user .user-picture-area .user-icon.tabler--binoculars-filled {
    height: 130px;
    width: 130px;
}

body.user-info #logo_user .user-picture-area .user-icon.bi-folder-fill {
    top: 15px !important;
}

body.scrollable-title #logo_user .user-picture-area .user-icon.fa-dog {
    top: 8px !important;
    font-size: 23px !important;
}

body.user-info #logo_user .user-picture-area .user-icon.fa-dog {
    top: 36px !important;
    font-size: 125px !important;
}

#o8oo_header .menu-buttons {
    opacity: 0;
    pointer-events: none;
    transition: all .4s;
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    padding: 0px 10px;
}

body.user-info #o8oo_header .menu-buttons {
    opacity: 1;
    pointer-events: all;
}

#user-info-background {
    /* border: 1px solid red; */
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: -1;
    display: none;
}

body.user-info #user-info-background {
    display: block;
}

.message-conversation .message.reply {
    display: none;
}

.message-conversation .message.reply.loaded {
    display: block;
}

.message-conversation .message .body .original-message {
    pointer-events: none;
    text-align: center;
}

.message-conversation .message .body .original-message > .message {
    display: inline-block;
}

.message-conversation .message .body .original-message .message .body {
    z-index: 1;
}

.message-conversation .message .body .original-message .message .tail {
    z-index: 0;
}

.message-conversation .message.from .body .original-message .message.from .body {
    background-color: #d2d2d2;
}

.message-conversation .message.from .body .original-message .message.from .tail {
    color: #d2d2d2;
}

.message-conversation .message.to .body .original-message .message.from .body {
    background-color: #e3e3e3;
}

.message-conversation .message.to .body .original-message .message.from .tail {
    color: #e3e3e3;
}

.message-conversation .message .body .original-message .message.to .body {
    background-color: #004a2f;
}

.message-conversation .message .body .original-message .message.to .tail {
    color: #004a2f;
}

.message-conversation .message .body .reply-message {
    
}

.message-conversation .message .body .reply-message {
    text-align: center;
    margin-top: 8px;
}

body.message-popup-reply #message-text .message-conversation.temporary .original-message .message {
    margin: 0px !important;
    transform: scale(1.0) !important;
}

body.message-popup-reply #message-text .message-conversation.temporary .original-message .message.from.user-info {
    margin-left: 20px !important;
}

body.message-popup-reply #message-text .message-conversation.temporary .original-message .message.from.user-info {
    margin-left: 20px !important;
}

body.message-popup-reply #message-text .message-conversation.temporary .original-message .message.to.user-info {
    /* margin-left: 20px !important; */
}

.message-conversation .original-message .message.to.user-info {
    margin-left: 0px;
}

.message-conversation .message .body .original-message .message > .user-picture, 
.message-conversation .message .body .original-message .message > .body > .user-name {
    display: block;
}

.message-conversation .message .body .original-message .message.to > .user-picture, 
.message-conversation .message .body .original-message .message.to > .body > .user-name {
    display: none;
}

.message-conversation .message.reply .body {
    max-width: 100% !important;
}

.message.reply .body.one-character .original-message {
    position: relative;
    z-index: 0;
    margin-bottom: 5px;
}

.message.reply .body.one-character .reply-message {
    position: absolute;
    z-index: 1;
    font-size: 60px;
    bottom: -24px;
}

.message.reply.to .body.one-character .reply-message {
    left: -20px;
}

.message.reply.from .body.one-character .reply-message {
    right: -20px;
}

.word-rotator {
    
}

.word-rotator .word {
    display: none;
}

.word-rotator .word.current {
    display: inline-block;
}

#messages-locked-window {
    position: fixed;
    /* border: 1px solid red; */
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    /* background: rgba(255, 255, 255, .0); */
    z-index: 100;
    -webkit-backdrop-filter: saturate(180%) blur(1px);
    backdrop-filter: saturate(180%) blur(1px);
}

#messages #unlock-screen {
    /* border: 1px solid red; */
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    padding-top: 100px;
    padding-bottom: 100px;
    display: none;
}

body[data-url="/rewards"] #messages #unlock-screen {
    top: 170px;
}

#messages.locked #unlock-screen {
    display: block;
}

#messages #screenshots {
    position: absolute;
    /* border: 1px solid blue; */
    white-space: nowrap;
    overflow: hidden;
    overflow-x: auto;
    top: 100px;
    bottom: -10px;
    left: 0px;
    right: 0px;
}

#messages #screenshots .screenshot {
    position: relative;
    /* border: 1px solid green; */
    height: 100%;
    margin: 10px;
    text-align: center;
    display: inline-block;
    transition: all .4s;

    transform: translateX(-50%);
    margin-left: 5%;

    /* -webkit-box-reflect: below 5px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(60%, transparent), to(rgba(250, 250, 250, 0.2))); */
}

body[data-url="/rewards"] #messages #screenshots .screenshot {
    height: initial;
    margin: 0px;
}

#messages #screenshots .screenshot:first-of-type,
body[data-url="/rewards"] #messages #screenshots .screenshot:first-of-type {
    margin-left: 50%;
}

#messages #screenshots .screenshot:last-of-type {
    /* margin-right: 50%; */
}

#messages #screenshots .screenshot .image {
    /* height: 550px; */
    height: 60%;
    box-shadow: 0px 0px 0px 10px #e4eee8;
    border-radius: 30px;
    margin-top: 20px;
}

#messages #screenshots .screenshot .badge {
    padding: 0px;
    font-size: 70vw;
    background-color: transparent;
    color: #000;
}

body.android #messages #screenshots .screenshot .badge {
    font-size: 55vw;
}

#messages #screenshots .screenshot .badge .icon {
    position: absolute;
    top: 20vw;
    left: 0px;
    right: 0px;
    font-size: 25vw;
    font-size: 14vh;
}

body.android #messages #screenshots .screenshot .badge .icon {
    top: 17vw;
    font-size: 20vw;
    top: 7vh;
    font-size: 11vh;
}

#messages #screenshots .screenshot .badge .icon.prvi {
    font-size: 21vh;
    top: 6vh;
}

body.android #messages #screenshots .screenshot .badge .icon.prvi {
    font-size: 18vh;
    top: 4vh;
}

#messages #screenshots .screenshot .badge .icon.fa-grunt {
    font-size: 40vw; 
    top: 17vw;
}

body.android #messages #screenshots .screenshot .badge .icon.fa-grunt {
    font-size: 32vw;
}

#messages #screenshots .screenshot .badge .icon.fa-feather-alt {
    font-size: 10vw;
    top: 20vw;
    transform: rotateY(180deg) rotate(-6deg);
    left: -24vw;
}

body.android #messages #screenshots .screenshot .badge .icon.fa-feather-alt {
    font-size: 7vw;
    top: 15vw;
    left: -18vw;
}

body.android #messages #screenshots .screenshot .image {
    height: 55%;
}

#messages #screenshots .screenshot.red .image {
    box-shadow: 0px 0px 0px 10px #7302011c;
}

#messages #screenshots .screenshot .title {
    position: absolute;
    top: 60%;
    left: -10px;
    right: -10px;
    /* border: 1px solid red; */
    font-size: 12px;
    white-space: normal;
    padding: 0px 15px;
    color: #666;
    /* background: linear-gradient(to top, white 0%, rgba(255, 255, 255, .95) 50%, rgba(255, 255, 255, .0) 100%); */
    /* padding-top: 50px; */
    margin-top: 30px;
    transition: all .4s;
    opacity: 0;
}

body.android #messages #screenshots .screenshot .title {
    top: 55%;
    font-size: 11px;
}

body[data-url="/rewards"] #messages #screenshots .screenshot .title {
    top: 100%;
}

#messages #screenshots .screenshot.active .title {
    opacity: 1;
    margin-top: 40px;
}

body[data-url="/rewards"] #messages #screenshots .screenshot.active .title {
    margin-top: 10px;
    color: #000;
}

#messages #screenshots .screenshot .title h1 {
    margin-bottom: 10px;
    display: inline-block;
    display: none;
}

body[data-url="/rewards"] #messages #screenshots .screenshot .title h1 {
    display: block;
}

/* #messages #screenshots .screenshot:first-of-type .title h1,
#messages #screenshots .screenshot:last-of-type .title h1 {
    display: block;
} */

#unlock-screen .slider-container {
    width: 300px;
    height: 54px;
    background: #f0f0f0;
    border-radius: 100px;
    position: relative;
    overflow: hidden;
    /* border: 2px solid #ddd; */
    margin: 20px auto;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);

    position: absolute;
    bottom: 110px;
    left: 0px;
    right: 0px;
}

body[data-url="/rewards"] #messages .slider-container {
    bottom: 50px;
}

body.android #unlock-screen .slider-container {
    bottom: 130px;
}

body[data-url="/rewards"].android #messages .slider-container {
    bottom: 70px;
}

#unlock-screen .slider-track-wrapper {

}

#unlock-screen .slider-track {
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    /* background: linear-gradient(to right, #4CAF50, #8BC34A); */
    background: #01734b;
    border-radius: 100px;
    /* transform: translateX(-100%); */
    transition: all 0.3s ease;
    overflow: hidden;
    z-index: 3;
}

#unlock-screen .slider-button {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 46px;
    height: 46px;
    background: white;
    border-radius: 50%;
    cursor: grab;
    z-index: 3;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: left 0.1s ease, background-color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    font-size: 18px;
    color: #02734a;
    margin: 2px;
}

#unlock-screen .slider-button:active {
    cursor: grabbing;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

#unlock-screen .slider-button::after {
    /* content: "→"; */
    /* font-size: 20px;
    color: #666; */
}

#unlock-screen .slider-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* color: #666; */
    font-family: Arial, sans-serif;
    font-size: 14px;
    z-index: 1;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

#unlock-screen .slider-track .slider-text {
    color: #fff;
    width: 300px;
}

#unlock-screen .slider-unlocked .slider-button {
    /* background-color: #4CAF50; */
}

#unlock-screen .slider-unlocked .slider-button::after {
    /* content: "✓";
    color: white;
    font-weight: bold; */
}

#unlock-screen .slider-unlocked .slider-text {
    opacity: 0;
}

#unlock-screen .icon.unlocked {
    display: none;
}

#unlock-screen .slider-unlocked .icon.unlocked {
    display: inline-block;
}

#unlock-screen .slider-unlocked .icon.locked {
    display: none;
}

#invitation-wrapper.unlock-screen .invitation {
    top: 90px;
    left: 5px;
    right: 5px;
}

#invitation-wrapper.unlock-screen {
    -webkit-backdrop-filter: blur(25px);
    backdrop-filter: blur(25px);
    background: rgba(255, 255, 255, .8);
}

.slide-to-unlock-text {
    /* background: linear-gradient(90deg, #666 0%, #ccc 20%, #666 40%); */
    background: linear-gradient(90deg, #666 0%, #009662 20%, #666 40%);
    background-size: 200% auto;
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    animation: slideShine 4s infinite linear;
    animation-direction: reverse;
}

@keyframes slideShine {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

#unlock-messages-notice {
    /* border: 1px solid rgba(0, 0, 0, .05); */
    position: fixed;
    top: 400px;
    left: 25px;
    right: 25px;
    /* border-radius: 4px; */
    /* background: rgb(252 252 252 / 90%); */
    /* height: 350px; */
    /* box-shadow: 0px -1px 0px 1px rgba(255, 255, 255, 1) inset; */
    /* z-index: 1; */
    /* box-shadow: 0px 50px 90px -50px rgba(0, 0, 0, 1);*/
    top: 47vh;
}

#unlock-messages-notice .notice-item {
    font-size: 30px;
    font-weight: bold;
    color: #000;
    text-align: center;
    /* text-shadow: 0px 1px 1px rgba(0, 0, 0, .1); */
}

#unlock-messages-notice .notice-item.small {
    font-size: 14px;
    font-weight: 300;
    margin-top: 50px;
    color: #000;
}

#unlock-messages-notice .notice-item  #unlock-messages-notice-friends {
    color: #01734b;
}

#unlock-messages-notice.unlocked .notice-item.locked-version {
    display: none;
}

#unlock-messages-notice .notice-item.unlocked-version {
    display: none;
}

#unlock-messages-notice.unlocked .notice-item.unlocked-version {
    display: block;
}

.shine {
    transform-style: preserve-3d;
    animation: wiggle 8s ease-in-out infinite;
    overflow: hidden;
    will-change: transform;

    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

.shine.hard {
    animation: wiggle_shadow 8s ease-in-out infinite;
    /* overflow: visible; */
}

.shine.hard.enlarge {
    animation: wiggle_shadow_enlarge 8s ease-in-out infinite;
}

.badge.shine {
    /* transition: all .4s; */
}

.screenshot:not(.active) .badge.shine {
    animation: none;
}

.shine::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.1) 40%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0.1) 60%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: translateX(-100%) translateY(-50%) rotate(25deg);
    animation: shine 8s ease-in-out infinite, fadeIn 0.1s forwards;
    pointer-events: none;
    z-index: 2;

    will-change: transform;
    -webkit-font-smoothing: antialiased;

    transform: translateX(-100%) translateY(-50%) rotate(25deg) translateZ(0);
    -webkit-transform: translateX(-100%) translateY(-50%) rotate(25deg) translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.shine.hard::before {
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.1) 40%,
        rgba(255, 255, 255, 0.5) 50%,
        rgba(255, 255, 255, 0.1) 60%,
        rgba(255, 255, 255, 0) 100%
    );
}

.shine.hard.enlarge::before {
    background: none;
}

.screenshot:not(.active) .shine.hard::before {
    background: none;
}

/* Animacije */
@keyframes wiggle {
    0%, 100% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    25% {
        transform: rotateX(2deg) rotateY(3deg) rotateZ(-0.5deg);
    }
    50% {
        transform: rotateX(-1deg) rotateY(-2deg) rotateZ(0.5deg);
    }
    75% {
        transform: rotateX(1.5deg) rotateY(2.5deg) rotateZ(-0.3deg);
    }
}

@keyframes wiggle_shadow {
    0%, 100% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
        text-shadow: 0px 0px 0px rgba(0, 0, 0, .2);
    }
    25% {
        transform: rotateX(10deg) rotateY(15deg) rotateZ(-2.5deg);
        text-shadow: 4.8px 5.9px 0px rgba(0, 0, 0, 0.45);
    }
    50% {
        transform: rotateX(-5deg) rotateY(-10deg) rotateZ(2.5deg);
        text-shadow: -3.2px 2.8px 0px rgba(0, 0, 0, 0.28);
    }
    75% {
        transform: rotateX(7.5deg) rotateY(12.5deg) rotateZ(-1.5deg);
        text-shadow: 3.9px 5.4px 0px rgba(0, 0, 0, 0.38);
    }
}

@keyframes wiggle_shadow_enlarge {
    0%, 100% {
        transform: perspective(400px) scale(1.0) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
        text-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
    }
    25% {
        transform: perspective(1000px) scale(1.0) rotateX(10deg) rotateY(15deg) rotateZ(-2.5deg);
        /* Perspektiva 400px stvara ekstremnu dubinu - sjena je proporcionalno veća */
        text-shadow: 9.0px 11.1px 0px rgba(0, 0, 0, 0.55);
    }
    50% {
        transform: perspective(400px) scale(1.0) rotateX(-5deg) rotateY(-10deg) rotateZ(2.5deg);
        text-shadow: -5.4px 4.7px 0px rgba(0, 0, 0, 0.35);
    }
    75% {
        transform: perspective(1000px) scale(1.0) rotateX(7.5deg) rotateY(12.5deg) rotateZ(-1.5deg);
        text-shadow: 7.4px 10.1px 0px rgba(0, 0, 0, 0.48);
    }
}

@keyframes shine {
    0%, 100% {
        transform: translateX(-100%) translateY(-50%) rotate(25deg);
    }
    20%, 80% {
        transform: translateX(100%) translateY(-50%) rotate(25deg);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* .user-menu .list-item[data-name="rewards"] {
    display: none;
} */

.user-menu .list-item[data-name="rewards"] {
    display: block;
}

body:not([data-appname^="Lovački"]):not([data-appname^="HLS"]) .user-menu .list-item[data-name="rewards"],
body:not([data-appname^="Lovački"]):not([data-appname^="HLS"]) #header-notice-message {
    display: none;
}

#header-notice-message {
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, #fdec8d), color-stop(100%, #f9e659));
    color: #000;
    position: fixed;
    top: 100px;
    left: 0px;
    right: 0px;
    text-align: center;
    font-size: 3.3vw;
    font-weight: 400;
    border-top: 1px solid rgba(0, 0, 0, .1);
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    padding: 7px 0px;
    transition: all .4s;
}

#header-notice-message .link {
    padding-left: 15px; 
    font-weight: 500;
}

body[data-url="/profile"] #header-notice-message .link {
    /* display: none; */
}

body.user-info #header-notice-message {
    /* display: none; */
    opacity: 0;
    top: 450px;
    pointer-events: none;
}

.item-badge.notice {
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, #fdec8d), color-stop(100%, #f9e659));
    border: 1px solid rgba(0, 0, 0, .1);
    color: #000;
    font-weight: bold;
    padding: 3px 8px;
    height: auto;
    right: 15px;
    margin-top: -13px;
}

body[data-appname^="Lovački"] .invitation,
body[data-appname^="HLS"] .invitation {
    background-image: url(https://0800.hr/bundles/appcore/images/hls_180.jpeg);
    background-repeat: no-repeat;
    background-size: 95px;
}

body[data-appname^="Lovački"] .invitation-header,
body[data-appname^="HLS"] .invitation-header {
    left: 90px;
    border-bottom: 1px solid rgba(255, 255, 255, .2);
    padding-left: 0px;
}

body[data-appname^="Lovački"] .invitation-header,
body[data-appname^="HLS"] .invitation-header {
    font-size: 17px;
}

body[data-appname^="Lovački"] .invitation-header-button-icon,
body[data-appname^="HLS"] .invitation-header-button-icon {
    top: 15px;
    right: 14px;
}

body:not([data-url="/rewards"]) #rewards > .item-list-container.parent,
body:not([data-url="/rewards"]) #rewards > .message-notice,
body:not([data-url="/rewards"]) #rewards #slider {
    display: none;
}

body:not([data-url="/rewards"]) #rewards #messages #unlock-screen {
    /* border: 1px solid red; */
    position: relative;
    top: unset;
    left: unset;
    right: unset;
    bottom: unset;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-left: -20px;
    margin-right: -20px;
}

#rewards #messages #screenshots {
    position: relative;
    /* border: 1px solid blue; */
    white-space: nowrap;
    overflow: hidden;
    overflow-x: auto;
    top: auto;
    bottom: auto;
    left: 0px;
    right: 0px;
}

#rewards #messages #screenshots .screenshot {
    vertical-align: top;
    margin-left: 0;
}

#rewards #messages #screenshots .screenshot:first-of-type {
    margin-left: 50%;
}

#rewards #messages #screenshots .screenshot .title {
    position: relative;
    top: unset;
    left: unset;
    right: unset;
    /* border: 1px solid red; */
    font-size: 12px;
    white-space: normal;
    padding: 0px 15px;
    color: #666;
    /* background: linear-gradient(to top, white 0%, rgba(255, 255, 255, .95) 50%, rgba(255, 255, 255, .0) 100%); */
    /* padding-top: 50px; */
    margin-top: 10px;
    transition: all .4s;
    /* opacity: 0; */
    width: 60vw;
    display: inline-block;
}

#rewards #messages #screenshots .screenshot .title h1 {
    color: #000;
    display: block;
}

#rewards #messages #screenshots .screenshot .title .requirements {
    /* display: none !important; */
    color: #000;
}

body:not([data-url="/rewards"]) #rewards #messages #screenshots .screenshot[data-unlocked="false"] .badge .background {
    filter: brightness(0);
}

#kvadratici {
    position: absolute;
    /* box-shadow: 0px 0px 0px 1px red inset; */
    top: 0;
    left: 0;
    right: 0;
    height: 25%;
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    grid-template-columns: repeat(11, 1fr);
    opacity: .5;
}

#kvadratici i {
    /* box-shadow: 0px 0px 0px 1px #ffffff inset; */
}

#kvadratici i:nth-child(-n+11):nth-child(odd) {
    background: #fff;
}

#kvadratici i:nth-child(-n+11):nth-child(even) {
    background: #895f0e;
}

#kvadratici i:nth-child(n+12):nth-child(odd) {
    background: linear-gradient(to bottom, #fff, #895f0e);
}

#kvadratici i:nth-child(n+12):nth-child(even) {
    background: #895f0e;
}

#kvadratici i:nth-child(21) {
    /* background: #02734a !important; */
}

#republika-hrvatska {
    color: #fff;
    font-size: 1.6vw;
    /* box-shadow: 0px 0px 0px 1px red; */
    position: absolute;
    bottom: 2vw;
    left: 0px;
    right: 0px;
    display: none;
}

#broj-iskaznice {
    color: #fff;
    font-size: 1.6vw;
    /* box-shadow: 0px 0px 0px 1px red; */
    position: absolute;
    bottom: -8.4vw;
    left: -2vw;
    right: -2vw;
}

body.android #republika-hrvatska,
body.android #broj-iskaznice {
    zoom: 0.8;
}

#id-card-wrapper {
    position: fixed;
    z-index: 9999999999;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    background-color: rgba(255, 255, 255, .9);
    padding-top: 90px;
    text-align: center;
    display: none;
}

#id-card-wrapper .edit-button {
    border-radius: 100px;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, .2);
    font-size: 5vw;
    padding: 10px 30px;
    margin-top: 40px;
    position: relative;
    display: inline-block;
    background-color: #000;
    color: #fff;
    font-weight: 400;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    text-decoration: none !important;
}

#id-card-button.locked {
    box-shadow: 0px 0px 0px 10000px #04744c99;
}

#id-card-wrapper .unlock-messages-notice {

}

body.user-info #o8oo_header .menu-buttons .menu-button[data-button="notifications"],
body.user-info:not([data-friend-id]) #o8oo_header .menu-buttons .menu-button[data-button="ban"] {
    opacity: .2;
    pointer-events: none;
}

.menu-buttons .menu-button .menu-button-text {
    display: inline-block;
    font-size: 16px;
    font-style: normal;
    padding-left: 4px;
}