.loadingtext {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 100px;
    margin-left: -50px;
    text-align: center;
    margin-top: 20px;
    color: white;
}
/*Loading bar*/
.spinner {
    background: white !important;
}
.app-loading .loading-bar-wrapper
{
     display: block;
}
.app-loading .loading-bar
{
    display: block;
    -webkit-animation: shift-rightwards 1s ease-in-out infinite;
    -moz-animation: shift-rightwards 1s ease-in-out infinite;
    -ms-animation: shift-rightwards 1s ease-in-out infinite;
    -o-animation: shift-rightwards 1s ease-in-out infinite;
    animation: shift-rightwards 1s ease-in-out infinite;
    -webkit-animation-delay: .4s;
    -moz-animation-delay: .4s;
    -o-animation-delay: .4s;
    animation-delay: .4s;
}
.loading-bar-wrapper{
    position: fixed;
    display: none;
    bottom: 60px;
    left: 0;
    right: 0;
    height: 4px;
    z-index: 800;
    background:#27ae60;
}
.loading-bar
{
    position: fixed;
    display: none;
    bottom: 60px;
    left: 0;
    right: 0;
    height: 4px;
    z-index: 800;
    background: red;
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%);
}

@-webkit-keyframes shift-rightwards
{
    0%
    {
        -webkit-transform:translateX(-100%);
        -moz-transform:translateX(-100%);
        -o-transform:translateX(-100%);
        transform:translateX(-100%);
    }

    40%
    {
        -webkit-transform:translateX(0%);
        -moz-transform:translateX(0%);
        -o-transform:translateX(0%);
        transform:translateX(0%);
    }

    60%
    {
        -webkit-transform:translateX(0%);
        -moz-transform:translateX(0%);
        -o-transform:translateX(0%);
        transform:translateX(0%);
    }

    100%
    {
        -webkit-transform:translateX(100%);
        -moz-transform:translateX(100%);
        -o-transform:translateX(100%);
        transform:translateX(100%);
    }

}
@-moz-keyframes shift-rightwards
{
    0%
    {
        -webkit-transform:translateX(-100%);
        -moz-transform:translateX(-100%);
        -o-transform:translateX(-100%);
        transform:translateX(-100%);
    }

    40%
    {
        -webkit-transform:translateX(0%);
        -moz-transform:translateX(0%);
        -o-transform:translateX(0%);
        transform:translateX(0%);
    }

    60%
    {
        -webkit-transform:translateX(0%);
        -moz-transform:translateX(0%);
        -o-transform:translateX(0%);
        transform:translateX(0%);
    }

    100%
    {
        -webkit-transform:translateX(100%);
        -moz-transform:translateX(100%);
        -o-transform:translateX(100%);
        transform:translateX(100%);
    }

}
@-o-keyframes shift-rightwards
{
    0%
    {
        -webkit-transform:translateX(-100%);
        -moz-transform:translateX(-100%);
        -o-transform:translateX(-100%);
        transform:translateX(-100%);
    }

    40%
    {
        -webkit-transform:translateX(0%);
        -moz-transform:translateX(0%);
        -o-transform:translateX(0%);
        transform:translateX(0%);
    }

    60%
    {
        -webkit-transform:translateX(0%);
        -moz-transform:translateX(0%);
        -o-transform:translateX(0%);
        transform:translateX(0%);
    }

    100%
    {
        -webkit-transform:translateX(100%);
        -moz-transform:translateX(100%);
        -o-transform:translateX(100%);
        transform:translateX(100%);
    }

}
@keyframes shift-rightwards
{
    0%
    {
        -webkit-transform:translateX(-100%);
        -moz-transform:translateX(-100%);
        -o-transform:translateX(-100%);
        transform:translateX(-100%);
    }

    40%
    {
        -webkit-transform:translateX(0%);
        -moz-transform:translateX(0%);
        -o-transform:translateX(0%);
        transform:translateX(0%);
    }

    60%
    {
        -webkit-transform:translateX(0%);
        -moz-transform:translateX(0%);
        -o-transform:translateX(0%);
        transform:translateX(0%);
    }

    100%
    {
        -webkit-transform:translateX(100%);
        -moz-transform:translateX(100%);
        -o-transform:translateX(100%);
        transform:translateX(100%);
    }
}
/*end loader*/
.hidden {
    display: none;
}
.fix-menu-bottom{
	position: fixed;
    z-index: 999;
    width: 100%;
    bottom: 0px;
    left: 0;
    margin-bottom: 0px!important;
}
.font-weight-normal {
    font-weight: normal!important;
}
.text-wrapper{
    word-wrap: break-word;
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 16px;
}
.account-cover {
    margin-bottom: 0;
    background-image: url(../img/pictures/cover_account.png)!important;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
.menu-flip-close{
	display: none;
}
.padding-left-50 {
	padding-left: 50px!important
}
.padding-left-60 {
	padding-left: 60px!important
}
.padding-top-bottom-20 {
    padding-top: 20px !important;
    padding-bottom: 20px!important
}
.padding-top-5 {
    padding-top: 5px !important;
}
.padding-bottom-5 {
    padding-bottom: 5px !important;
}
.padding-top-10 {
    padding-top: 10px !important;
}
.padding-bottom-10 {
    padding-bottom: 10px!important
}
.padding-top-20 {
    padding-top: 20px !important;
}
.padding-bottom-20 {
    padding-bottom: 20px!important
}
.margit-top-40,.margin-top-40{
	margin-top: 40px!important;
}
.margin-top-30{
    margin-top: 30px!important;
}
.margin-top-20{
    margin-top: 20px!important;
}
.margin-top-10{
    margin-top: 10px!important;
}
.margin-right-5 {
    margin-right: 5px!important;
}
.margin-right-10 {
    margin-right: 10px!important;
}
.margin-right-20 {
    margin-right: 20px!important;
}
.margin-right-30 {
    margin-right: 30px!important;
}
.pull-right {
    float: right !important;
}
.pull-left {
    float: left !important;
}
.no-margin{
     margin: 0!important;
}

.align-right {
    text-align: right !important;
}
.unread {
    background: #e6f7f0 !important;
    border-color: #41b368 !important;
    margin-bottom: 0 !important;
    padding-bottom: 30px !important;
    padding-top: 10px !important;
}
.read {
    background: #f5f5f5 !important;
    margin-bottom: 0 !important;
    padding-bottom: 30px !important;
    padding-top: 10px !important;
    padding-left: 10px;
}
.menu-bar .menu-right-icons {
    float: right;
    padding-right: 10px
}
.menu-bar .menu-right-icons a{
    width: 50px;
    height: 60px;
    display: block;
    text-align: center;
    font-size: 22px;
    line-height: 60px;
    float: left;
    color: white!important;
}
.menu-bar .menu-right-icons a em {
    position: absolute;
    top: 12px;
    right: 5px;
    color: #ffffff;
    font-size: 10px;
    background: red;
    line-height: 14px;
    padding: 2px;
    border-radius: 50%;
    width: 18px;
    height: 18px;
}
.full-width {
    width: 100% !important;
}
/*Overwride*/
/*=================================================================*/
.tab-content.current{
    max-height: 1024px!important;
}
.store-menu-card img,.item-border{
    border: none !important;
    /*background-image: url(../img/item-bg.png);*/
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #131313;
    padding: 2px;
}
.store-menu-cards {
    margin: 30px -10px!important;
}
.item-header-icon img {
    width: 120px;
    margin: 10px auto;
}
.activity-item i {
    font-size: 18px!important
}
.mobileui-music-3 .play {
    font-size: 24px!important;
}
.header h1 {
    width: inherit !important;
}
.menu-bar-title {
    left: 90px;
    width: inherit!important
}
.menu-bar-text-1 a {
    float: left;
    padding: 0 12px;
}
.activity-status {
    margin-bottom: 20px !important;
}
.footer-socials {
	text-align:center;
}
.page-menu {
	padding-top: 0px
}
.activity-status strong {
    font-size: 22px
}
.activity-status em {
    margin-top: -4px!important;
    font-size: 14px!important;
    font-style: normal;
    color: #868686
}
.pageapp-login-logo, .pageapp-login-logo img {
    width: 120px!important;
    /*display: none;*/
}
.pageapp-login {
    padding-top: 20px!important;
    width: 500px!important;
}
@media only screen and (max-width: 500px) {
    .pageapp-login-logo, .pageapp-login-logo img {
	}
	.pageapp-login {
	    padding-top: 10px!important;
	    width: 350px!important;
	}
}

.pageapp-login-input input:focus{
	border-bottom:solid 2px #2c3e50!important;
}

/*=================================================================*/
.ticket-list {
    width: 100%;
}
.ticket-list-item .ion-email-unread {
    color: red!important;
}
.ticket-list strong {
    padding-left: 10px;
    padding-right: 10px;
    margin-right: 10px;
    font-size: 13px;
    padding-top: 5px;
    padding-bottom: 5px;
    font-weight: 500;
    background-color: #2abb67;
    color: #fff
}
.ticket-list i {
    font-size: 16px!important;
    pointer-events: none;
    position: absolute;
    top: 1px;
    width: 20px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    right: 0;
    color: #1f1f1f;
}
.ticket-list em {
    font-size: 12px;
    font-style: normal;
    color: #ccc;
    position: absolute;
    top: 2px;
    right: 30px;
}
.ticket-list-item {
    height: 60px;
    line-height: 60px;
    font-weight: 500;
    font-size: 14px;
    display: block;
    width: 100%;
    color: #1f1f1f;
    border-bottom: solid 1px rgba(0, 0, 0, .1);
}
.ticket-list .closed,.ticket-list .closed i {
    color: #888888!important
} 
.ticket-list .closed strong {
    background-color: #cdcdcd!important;
    color: #888888!important
}


.custo-menu-bar-night .selected-bottom-bar {
	background-color: #456688
}
.custo-menu-bar-night {
	background-color: #34495e!important
}
.custo-menu-bar-night a,
.color-menu-bar a {
	color: #fff
}
.custo-menu-bar-night a i,
.color-menu-bar i {
	color: #fff
}
.custo-menu-bar-night a:hover {
	background-color: #456688
}
.custo-menu-bar-night a {
    color: #fff!important;
}





.serverlist-item {
	padding:15px 0 10px
}
.serverlist-item .ion-ios-circle-outline,.serverlist-item .ion-ios-circle-filled {
	font-size:20px;
	position:absolute;
	height:40px;
	line-height:35px
}
.serverlist-item .ion-checkmark,
.serverlist-item .ion-android-close,
.serverlist-item .ion-ios-checkmark-outline,
.serverlist-item .ion-checkmark-circled,
.serverlist-item .ion-close-circled,
.serverlist-item .ion-ios-close-outline {
	font-size:20px;
	position:absolute;
	height:30px;
	line-height:32px;
	display:none
}
.serverlist-item em {
	font-size:12px;
	line-height:17px;
	display:inline-block;
	padding-left:35px;
	padding-right:20px;
	font-style:normal;
	font-weight:500
}
.serverlist-item strong {
	font-size:16px;
	position:absolute;
	height:40px;
	line-height:35px;
	padding-left:20px;
	font-weight:500
}
.serverlist-item small {
	float: right;
    font-size: 12px;
    font-style: normal;
    color: #cacaca;
    height: 12px;
    margin-top: 5px;
}

/*skin*/
.serverlist-item {
	border-bottom: solid 1px rgba(0, 0, 0, .1)
}
.serverlist-item em {
	color: #1f1f1f
}
.serverlist-item em span {
	color: #c1c1c1
}
.serverlist-item em {
	border-right: solid 1px rgba(0, 0, 0, .1)
}
.serverlist-item strong {
	color: #1f1f1f
}
.completed-serverlist {
	color: #838383!important
}

.pagination {
    text-align: center;
}
.pagination ul{
    margin:0!important;
    padding:0!important;
}
.pagination li {
    display: inline-block;
    border-radius: 2px;
    text-align: center;
    vertical-align: top;
    height: 36px;
    margin: 0 5px;
}
.pagination li.active a {
    color: #fff!important;
    background: #e53935;
}
.pagination li.active a {
    cursor: default;
    color: #999;
}
.pagination li a {
    color: #444;
    display: inline-block;
    font-size: 16px;
    font-weight: 500;
    padding: 0 12px;
    line-height: 36px;
    height: 36px;
    border: 1px solid #e53935;
}

.head-icon-emoney {
    width: auto!important;
    font-size: 15px!important;
    border-right: solid 1px rgba(255,255,255,.2);
    padding: 0 10px;
}
@media only screen and (max-width: 600px) {
    .head-icon-emoney {
        display: none !important;
    }
}

/*///
flex-gallery*/

.flex-gallery{

}
.flex-gallery .row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 0px;
  margin: 0 -10px;
}

/* Create four equal columns that sits next to each other */
.flex-gallery .column {
  flex: 25%;
  max-width: 25%;
  padding: 0 10px;
}

.flex-gallery .column a {
  margin-bottom: 20px;
  vertical-align: middle;
}
.flex-gallery .column a img {
  margin: 0!important
}
/* Responsive layout - makes a two column-layout instead of four columns */
/*@media screen and (max-width: 800px) {
  .flex-gallery .column {
    flex: 33.33%;
    max-width: 33.33%;
  }
}
*/
/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .flex-gallery .column {
    flex: 50%;
    max-width: 50%;
  }
}
/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 600px) {
  .flex-gallery .column {
    flex: 50%;
    max-width: 50%;
  }
  .collapse-on-mobile{
    float: none!important;
    width: 100%!important;
  }
  .hide-on-mobile {
    display: none!important;
  }
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
  .flex-gallery .column {
    flex: 100%;
    max-width: 100%;
  }
}


@media screen and (max-width: 400px) {
  .hide-on-screen-400 {
    display: none!important;
  }
  .collapse-on-screen-400{
    float: none!important;
    width: 100%!important;
  }
}
@media screen and (max-width: 480px) {
  .collapse-on-screen-480{
    float: none!important;
    width: 100%!important;
  }
  .hide-on-screen-480 {
    display: none!important;
  }
}


.filter-btn {
    /*padding: 0 5px;*/
    height: 36px;
    line-height: 36px;
    text-align: center;
    font-size: 14px;
    display: inline-block;
    margin: 5px;
}



#bg-green-dark {
    background-color: #2abb67!important;
    color: #fff
}
#bg-blue-dark {
    background-color: #2980b9!important;
    color: #fff!important
}
#bg-red-dark {
    background-color: #c0392b!important;
    color: #fff
}

.cls-canlevel,.cls-canappend,.cls-canlucky,.cls-canexcellent{ display: none;}

.store-history-item h3 {
    line-height: 18px!important;
}


/*autocomplete*/
.autocomplete {
    /*the container must be positioned relative:*/
    position: relative;
    display: inline-block;
    margin-bottom: 0 !important;
}
.autocomplete-items {
    position: absolute;
    z-index: 99;
    /*padding: 0 15px;*/
    /*position the autocomplete items to be the same width as the container:*/
    background: transparent;
    top: 100%;
    left: 0;
    right: 0;
}
.autocomplete-items div {
    padding: 8px 10px;
    cursor: pointer;
    background-color: #fff; 
    border-bottom: 1px solid #f0f3f6;
    border-left: 1px solid #f0f3f6;
    border-right: 1px solid #f0f3f6;
}
.autocomplete-items div:hover {
    /*when hovering an item:*/
    background-color: #f0f3f6; 
}
.autocomplete-active {
    /*when navigating through the items using the arrow keys:*/
    background-color: DodgerBlue !important; 
    color: #ffffff; 
}