html {
    height: 100%;
    overflow-x: hidden;
}

body {
    font-family: 'Montserrat', sans-serif;
    height: 100%;
    margin: 0;
    background: linear-gradient(72deg, rgba(150, 150, 150, 1) 0%, rgba(100, 100, 100, 1) 100%) no-repeat fixed;
    overflow-x: hidden;
}

.page-header {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    z-index: 2;
}

.sticky-top {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    z-index: 2;
}

.bg-lightgray {
    background-color: #e9ecef;
}

.bg-defender {
    background-color: #eef2ff;
}

.bg-defender-light {
    background-color: #f7f7ff;
}

.bg-attacker {
    background-color: #ffeeee;
}

.bg-attacker-light {
    background-color: #fff8f7;
}

.bg-support {
    background-color: #f3eef3;
}

.bg-support-light {
    background-color: #f7f6fc;
}

img.victory {
    -webkit-filter: drop-shadow(0px 0px 20px rgba(255, 193, 0, 0.9));
    filter: drop-shadow(0px 0px 20px rgba(255, 193, 0, 0.9));
}

.hidden {
    display: none;
}

.opacity-60 {
    opacity: 60%;
}

.opacity-30 {
    opacity: 30%;
}

.troop-count-zero {
    opacity: 60%;
}

.countdown-timer {
    font-family: monospace, monospace;
}

select.form-control, input.form-control, textarea.form-control, .select2-selection, .select2-search {
    background-color: #f6f5f5 !important;
}

select.form-control:focus, input.form-control:focus, textarea.form-control:focus, .select2-search:focus {
    background-color: #ffffff !important;
    transition: 0.3s !important;
}

.list-group-item {
    background-color: #eef1f4 !important;
}

.hidden-table {
    height: 0;
}

.hidden-table-wrapper {
    display: none;
}

.send-confirmation-button {
    height: 20pt;
    width: 130pt;
    font: bold 10pt Arial, Helvetica, sans-serif;
    margin: 2pt;
    margin-right: 0px;
    text-align: center
}

.flash-button {

    animation-name: flash;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;

/ / Firefox 1 + -webkit-animation-name: flash;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;

/ / Safari 3 - 4 -moz-animation-name: flash;
    -moz-animation-duration: 1s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
}

@keyframes flash {
    0% {
    }
    50% {
        background: silver;
        border-color: silver;
    }
    100% {
    }
}

/*Firefox 1+*/
@-webkit-keyframes flash {
    0% {
    }
    50% {
        background: silver;
        border-color: silver;
    }
    100% {
    }
}

/*Safari 3-4*/
@-moz-keyframes flash {
    0% {
    }
    50% {
        background: silver;
        border-color: silver;
    }
    100% {
    }
}

.form-switch {
    display: inline-block;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.form-switch i.form-switch-icon {
    position: relative;
    display: inline-block;
    margin-right: .5rem;
    width: 46px;
    height: 26px;
    background-color: rgb(209, 209, 209);
    border-radius: 23px;
    vertical-align: text-bottom;
    transition: all 0.3s linear;
}

.form-switch .btn > i {
    color: rgb(49, 121, 255);
}

.form-switch i.form-switch-icon::before {
    content: "";
    position: absolute;
    left: 0;
    width: 42px;
    height: 22px;
    background-color: rgb(241, 241, 241);
    border-radius: 11px;
    transform: translate3d(2px, 2px, 0) scale3d(1, 1, 1);
    transition: all 0.25s linear;
}

.form-switch i.form-switch-icon::after {
    content: "";
    position: absolute;
    left: 0;
    width: 22px;
    height: 22px;
    background-color: #fff;
    border-radius: 11px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.24);
    transform: translate3d(2px, 2px, 0);
    transition: all 0.2s ease-in-out;
}

.form-switch:active i.form-switch-icon::after {
    width: 28px;
    transform: translate3d(2px, 2px, 0);
}

.form-switch:active input:checked + i.form-switch-icon::after {
    transform: translate3d(16px, 2px, 0);
}

.form-switch input {
    display: none;
}

.form-switch input:checked + i.form-switch-icon {
    background-color: #479dff;
}

.form-switch input:checked + i.form-switch-icon::before {
    transform: translate3d(18px, 2px, 0) scale3d(0, 0, 0);
}

.form-switch input:checked + i.form-switch-icon::after {
    transform: translate3d(22px, 2px, 0);
}

.table-success, .table-success > td, .table-success > th {
    background-color: #c3e6cb !important;
}

.table:not(.table-list) > thead > tr > th {
    vertical-align: middle !important;
}

.gray {
    background-color: lightgray;
}

td {
    vertical-align: middle !important;
}

th {
    vertical-align: middle !important;
}

.center-v {
    vertical-align: middle !important;
}

.center-h {
    text-align: center !important;
}

.center-hv {
    vertical-align: middle !important;
    text-align: center !important;
}

.th-sortable {
    cursor: pointer;
}

.card-main {
    background-color: rgba(250, 250, 250, 1);
    min-height: 98vh;
    border: 0 !important;
}

.card-header {
    background-color: rgb(223, 223, 223);
}

.stealthy-link {
    color: inherit;
}

.stealthy-link:hover {
    text-decoration: underline;
    color: inherit;
}

.asteriskField {
    display: none;
}

form .alert ul {
    padding: 0;
    margin: 0;
}

.ajax-tooltip {
    position: absolute;
    min-width: 100px !important;
    z-index: 1001;
}

.button-with-picture:hover > .account-img {
    transform: scale(1.3);
}

.account-img:hover {
    transform: scale(1.5);
}

.tbl-border-left {
    border-left: 1px solid #cdd0d4;
}

.tbl-border-right {
    border-right: 1px solid #cdd0d4;
}

.tbl-border-top {
    border-top: 1px solid #cdd0d4;
}

.tbl-border-bottom {
    border-bottom: 1px solid #cdd0d4;
}

.btn-group-xs > .btn, .btn-xs {
    padding: .25rem .4rem;
    font-size: .875rem;
    line-height: .5;
    border-radius: .2rem;
}

.att-plan-th {
    min-height: 72px; /* att-plan-btn + its margin */
    max-height: 72px; /* att-plan-btn + its margin */
    min-width: 152px; /* att-plan-btn + its margin */
    max-width: 152px; /* att-plan-btn + its margin */
    overflow: hidden;
}

.att-plan-btn {
    position: relative;
    font-size: 12px;
    min-height: 70px;
    max-height: 70px;
    min-width: 150px;
    max-width: 150px;
    margin: 1px;
    padding: 0;
    overflow: hidden;
}

.att-plan-btn .att-plan-btn-tr {
    position: absolute;
    top: 1px;
    right: 5px;
}

.att-plan-btn > p {
    margin-bottom: 0;
    padding-bottom: 0;
}

.att-plan-btn .att-plan-btn-tl {
    position: absolute;
    top: 1px;
    left: 5px;
}

.att-plan-btn .att-plan-btn-bl {
    position: absolute;
    bottom: 1px;
    left: 5px;
}

.att-plan-btn .att-plan-btn-br {
    position: absolute;
    bottom: 1px;
    right: 5px;
}

.artifact-plan-btn {
    position: relative;
}

.artifact-plan-btn .artifact-plan-btn-tr {
    position: absolute;
    top: 1px;
    right: 1px;
}

.artifact-plan-btn .artifact-plan-btn-tl {
    position: absolute;
    top: 1px;
    left: 1px;
}

.artifact-plan-btn .artifact-plan-btn-cr {
    position: absolute;
    top: 16px;
    right: 1px;
}

.artifact-plan-btn .artifact-plan-btn-br {
    position: absolute;
    bottom: 0;
    right: 1px;
}

#attacks-planning-table-frame {
    height: 95vh;
    overflow: scroll;
}

#attacks-planning-table-frame #attacks-table thead tr:nth-child(1) th {
    position: sticky;
    top: 0;
    z-index: 1;
    margin: 0px;
}

#attacks-planning-table-frame #attacks-table th {
    position: -webkit-sticky; /* for Safari */
    position: sticky;
    background: #222831;
    z-index: 1;
    top: 0;
    margin: 0px;
}

#attacks-planning-table-frame #attacks-table tbody th {
    position: -webkit-sticky; /* for Safari */
    position: sticky;
    background: #222831;
    left: 0;
    z-index: 1;
    margin: 0px;
}

#attacks-planning-table-frame #attacks-table thead tr th:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    margin: 0px;
}

#attacks-table td {
    background: #31343b;
    padding: 0 !important;
}

.shadow-right {
    box-shadow: 8px 0px 8px -8px black;
}

.shadow-bottom {
    box-shadow: 0px 8px 8px -8px black;
}

.hidden-btn {
    display: none;
}

.blur-background {
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    background: rgba(255, 255, 255, 0.1);
}

.text-blur {
  color: transparent;
  text-shadow: #111 0 0 10px;
  transition: 0s;
}
.unblur-on-hover-wrapper:hover .text-blur.text-unblur-on-hover {
    color: black;
    text-shadow: none;
    transition: 0.8s;
}

.hide-on-hover-wrapper:hover .hide-on-hover {
    display: none;
}

.fill-parent {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
}

.hidden-btn-wrapper:hover .hidden-btn, .hidden-btn:hover {
    display: inline-block;
}

@keyframes swing {
    0% {
        transform: rotate(0deg);
    }
    10% {
        transform: rotate(20deg);
    }
    30% {
        transform: rotate(0deg);
    }
    40% {
        transform: rotate(-15deg);
    }
    50% {
        transform: rotate(0deg);
    }
    60% {
        transform: rotate(10deg);
    }
    70% {
        transform: rotate(0deg);
    }
    80% {
        transform: rotate(-5deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

@keyframes sonar {
    0% {
        transform: scale(0.9);
        opacity: 1;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

body {
    font-size: 0.9rem;
}

.page-wrapper .sidebar-wrapper,
.sidebar-wrapper .sidebar-brand > a,
.sidebar-wrapper .sidebar-dropdown > a:after,
.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a:before,
.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu > li > a:after,
.sidebar-wrapper ul li a i,
.page-wrapper .page-content,
.sidebar-wrapper .sidebar-search input.search-menu,
.sidebar-wrapper .sidebar-search .input-group-text,
.sidebar-wrapper .sidebar-menu ul li a,
#show-sidebar,
#close-sidebar {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

/*----------------page-wrapper----------------*/

.page-wrapper {
    height: 100vh;
}

.page-wrapper .theme {
    width: 40px;
    height: 40px;
    display: inline-block;
    border-radius: 4px;
    margin: 2px;
}

.page-wrapper .theme.chiller-theme {
    background: #1f291e;
}

/*----------------toggeled sidebar----------------*/

.page-wrapper.toggled .sidebar-wrapper {
    left: 0px;
}

@media screen and (min-width: 768px) {
    .page-wrapper.toggled .page-content {
        padding-left: 260px;
    }
}

/*----------------show sidebar button----------------*/
#show-sidebar {
    position: fixed;
    left: 0;
    top: 10px;
    border-radius: 0 4px 4px 0px;
    width: 35px;
    transition-delay: 0.3s;
    z-index: 999;
}

.page-wrapper.toggled #show-sidebar {
    left: -40px;
}

/*----------------sidebar-wrapper----------------*/

.sidebar-wrapper {
    width: 260px;
    height: 100%;
    max-height: 100%;
    position: fixed;
    top: 0;
    left: -300px;
    z-index: 999;
}

.sidebar-wrapper ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.sidebar-wrapper a {
    text-decoration: none;
}

/*----------------sidebar-content----------------*/

.sidebar-content {
    max-height: calc(100% - 84px); /* - Height of the footer */
    height: calc(100% - 84px);
    overflow-y: scroll;
    overflow-x: hidden;
    position: relative;
}

.sidebar-content.desktop {
    overflow-y: hidden;
}

/*--------------------sidebar-brand----------------------*/

.sidebar-wrapper .sidebar-brand {
    padding: 10px 20px;
    display: flex;
    align-items: center;
    font-size: 1.5em;
}

.sidebar-wrapper .sidebar-brand > a {
    text-transform: uppercase;
    font-weight: bold;
    flex-grow: 1;
}

.sidebar-wrapper .sidebar-brand #close-sidebar {
    cursor: pointer;
    font-size: 20px;
    padding: 10px 10px 10px 10px;
}

/*--------------------sidebar-header----------------------*/

.sidebar-wrapper .sidebar-header {
    padding-left: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 5px;
    margin-bottom: 10px;
}

.sidebar-wrapper .sidebar-header .user-pic {
    float: left;
    width: 60px;
    padding: 2px;
    border-radius: 12px;
    margin-right: 10px;
    overflow: hidden;
}

.sidebar-wrapper .sidebar-header .user-pic img {
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.sidebar-wrapper .sidebar-header .user-info {
    float: left;
}

.sidebar-wrapper .sidebar-header .user-info > span {
    display: block;
}

.sidebar-wrapper .sidebar-header .user-info .user-role {
    font-size: 12px;
}

/*-----------------------sidebar-search------------------------*/

.sidebar-wrapper .sidebar-search > div {
    padding: 10px 20px;
}

/*----------------------sidebar-menu-------------------------*/

.sidebar-wrapper .sidebar-menu {
    padding-bottom: 10px;
}

.sidebar-wrapper .sidebar-menu .header-menu span {
    font-weight: bold;
    font-size: 14px;
    padding: 15px 20px 5px 20px;
    display: inline-block;
}

.sidebar-wrapper .sidebar-menu ul li a:not(.subscription-required-tag) {
    display: inline-block;
    width: 100%;
    text-decoration: none;
    position: relative;
    padding: 8px 30px 8px 20px;
}

.sidebar-wrapper .sidebar-menu ul li a i {
    margin-right: 10px;
    font-size: 12px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 4px;
}

.sidebar-wrapper .sidebar-menu ul li a:hover > i::before {
    display: inline-block;
    animation: swing ease-in-out 0.5s 1 alternate;
}

.sidebar-wrapper .sidebar-menu .sidebar-dropdown > a:after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f105";
    font-style: normal;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    background: 0 0;
    position: absolute;
    right: 15px;
    top: 14px;
}

.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu ul {
    padding: 5px 0;
}

.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu > li {
    margin-left: 20px;
    font-size: 13px;
    background-color: #3b3e47;
    border-left-style: solid;
    border-left-color: #80838e;
    border-left-width: 3px;
}

.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu .sidebar-subsubmenu {
    margin-left: 20px;
    font-size: 13px;
    background-color: #454852;
    border-left-style: solid;
    border-left-color: #80838e;
    border-left-width: 3px;
}

.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu .sidebar-subsubmenu a:hover {
    color: #cbcbcb;
}

.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu > li > a[data-toggle="collapse"]:after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f105";
    font-style: normal;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    background: 0 0;
    position: absolute;
    right: 15px;
    top: 14px;
}

.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu > li > a[aria-expanded="true"]:after {
    transform: rotate(90deg);
    right: 17px;
}

.sidebar-wrapper .sidebar-menu ul li a span.label,
.sidebar-wrapper .sidebar-menu ul li a span.badge {
    float: right;
    margin-top: 8px;
    margin-left: 5px;
}

.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a .badge,
.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a .label {
    float: right;
    margin-top: 0px;
}

.sidebar-wrapper .sidebar-menu .sidebar-submenu {
    word-break: break-word;
    display: none;
}

.sidebar-wrapper .sidebar-menu .sidebar-dropdown.active > a:after {
    transform: rotate(90deg);
    right: 17px;
}

/*--------------------------side-footer------------------------------*/

.sidebar-footer {
    position: absolute;
    width: 100%;
    bottom: 0;
    display: flex;
    flex-direction: column;
}

.sidebar-footer > a {
    flex-grow: 1;
    text-align: center;
    height: 22px;
    line-height: 22px;
    position: relative;
}

.sidebar-footer > a .notification {
    position: absolute;
    top: 0;
}

.badge-sonar {
    display: inline-block;
    background: #980303;
    border-radius: 50%;
    height: 8px;
    width: 8px;
    position: absolute;
    top: 0;
}

.badge-sonar:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    border: 2px solid #980303;
    opacity: 0;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    animation: sonar 1.5s infinite;
}

/*--------------------------page-content-----------------------------*/

.page-wrapper .page-content {
    display: inline-block;
    width: 100%;
    padding-left: 0px;
    padding-top: 20px;
}

.page-wrapper .page-content > div {
    padding: 20px 40px;
}

/*.page-wrapper .page-content {*/
/*  overflow-x: hidden;*/
/*}*/

/*------scroll bar---------------------*/

div::-webkit-scrollbar {
    width: 10px;
    height: 12px;
}

div::-webkit-scrollbar-button {
    width: 0px;
    height: 0px;
}

div::-webkit-scrollbar-thumb {
    background: #a8acaf;
    border: 0px none #ffffff;
    border-radius: 0px;
}

div::-webkit-scrollbar-thumb:hover {
    background: #525965;
}

div::-webkit-scrollbar-thumb:active {
    background: #525965;
}

div::-webkit-scrollbar-track {
    background: transparent;
    border: 0px none #ffffff;
    border-radius: 50px;
}

div::-webkit-scrollbar-track:hover {
    background: transparent;
}

div::-webkit-scrollbar-track:active {
    background: transparent;
}

div::-webkit-scrollbar-corner {
    background: transparent;
}

/*-----------------------------chiller-theme-------------------------------------------------*/

.chiller-theme .sidebar-wrapper {
    background: #31353D;
    box-shadow: 0px -1px 10px #282c33;
}

.chiller-theme .sidebar-wrapper .sidebar-header,
.chiller-theme .sidebar-wrapper .sidebar-search,
.chiller-theme .sidebar-wrapper {
    border-top: 1px solid #3a3f48;
}

.chiller-theme .sidebar-wrapper .sidebar-search input.search-menu,
.chiller-theme .sidebar-wrapper .sidebar-search .input-group-text {
    border-color: transparent;
    box-shadow: none;
}

.chiller-theme .sidebar-wrapper .sidebar-header .user-info .user-role,
.chiller-theme .sidebar-wrapper .sidebar-header .user-info .user-status,
.chiller-theme .sidebar-wrapper .sidebar-search input.search-menu,
.chiller-theme .sidebar-wrapper .sidebar-search .input-group-text,
.chiller-theme .sidebar-wrapper .sidebar-brand > a,
.chiller-theme .sidebar-wrapper .sidebar-menu ul li a,
.chiller-theme .sidebar-footer button,
.chiller-theme .sidebar-footer > a {
    color: #b0b6c1;
}

.chiller-theme .sidebar-wrapper .sidebar-menu ul li:hover > a,
.chiller-theme .sidebar-wrapper .sidebar-menu .sidebar-dropdown.active > a,
.chiller-theme .sidebar-wrapper .sidebar-header .user-info,
.chiller-theme .sidebar-wrapper .sidebar-brand > a:hover,
.chiller-theme .sidebar-footer > a:last-child:hover i {
    color: #d2d7e2;
}

.sidebar-footer > a:first-child:hover i {
    color: #ff7f7f;
}

.page-wrapper.chiller-theme.toggled #close-sidebar {
    color: #bdbdbd;
}

.page-wrapper.chiller-theme.toggled #close-sidebar:hover {
    color: #ffffff;
}

.chiller-theme .sidebar-wrapper ul li:hover a i,
.chiller-theme .sidebar-wrapper .sidebar-dropdown .sidebar-submenu li a:hover:before,
.chiller-theme .sidebar-wrapper .sidebar-search input.search-menu:focus + span,
.chiller-theme .sidebar-wrapper .sidebar-menu .sidebar-dropdown.active a i {
    color: #ffffff;
    text-shadow: 0px 0px 20px rgba(255, 255, 255, 0.733);

}

.chiller-theme .sidebar-wrapper .sidebar-menu ul li a i,
.chiller-theme .sidebar-wrapper .sidebar-menu .sidebar-dropdown div,
.chiller-theme .sidebar-wrapper .sidebar-search input.search-menu,
.chiller-theme .sidebar-wrapper .sidebar-search .input-group-text {
    background: #3a3f48;
}

.chiller-theme .sidebar-wrapper .sidebar-menu .header-menu span {
    color: #b5bbc4;
}

.chiller-theme .sidebar-footer {
    background: #3a3f48;
    border-top: 1px solid #464a52;
}

.chiller-theme .sidebar-footer > a:first-child {
    border-left: none;
}

.chiller-theme .sidebar-footer > a:last-child {
    border-right: none;
}


/*--------------------------alliance defense sent list------------------------------*/

#div_id_sending_account_membership {
    display: none;
}

.offensive {
    color: red;
}

.important {
    color: #007bff
}

.offimportant {
    background: -webkit-linear-gradient(90deg, red 50%, #007bff 50%);
    background: -o-linear-gradient(90deg, red 50%, #007bff 50%);
    background: -moz-linear-gradient(90deg, red 50%, #007bff 50%);
    background: linear-gradient(90deg, red 50%, #007bff 50%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

td a {
    color: #212529;
}

td a:hover {
    /**font-weight: 800;**/
    color: #212529;
}

.color-pick-btn {
    /*width: 25px;*/
    /*height: 25px;*/
    position: relative;

}

.color-pick-btn:hover {
    cursor: pointer;
}

.color-picker {
    display: none;
    background: white;
    border: 1px solid black;
    position: absolute;
    padding: 1em;
    z-index: 1000;
}

.color-picker-item {
    cursor: pointer;
    border-radius: 0.2rem;
    height: 25px;
    width: 25px;
    text-align: center;
    border: 0.5px solid wheat;
}

.cross {
    color: red;
}

.ui-widget-overlay {
    display: none !important;
}

.thead-black {
    background-color: #4b545c;
    color: #fff;
}

.table td, th {
    border-top: none !important;
}

/* Override Bootstrap's -webkit-overflow-scrolling: touch on .table-responsive.
   On iOS WebKit, this property creates a containing block that traps
   position:fixed dropdown menus inside the scroll container. Momentum
   scrolling is the default on iOS 13+, so this is safe to remove. */
.table-responsive {
    -webkit-overflow-scrolling: auto;
}

#filteredplayers, #filteredalliances {
    table-layout: fixed;
}

.error-403-bg-image {
    background-image: url('../img/error_pics/403.svg');
    background-repeat: no-repeat;
    height: 100vh;
}

.error-404-bg-image {
    background-image: url('../img/error_pics/404.svg');
    background-repeat: no-repeat;
    height: 100vh;
}

.error-500-bg-image {
    background-image: url('../img/error_pics/500.svg');
    background-repeat: no-repeat;
    height: 100vh;
}

.tooltip {
    pointer-events: none;
}

.badge-purple {
    background-color: mediumpurple;
    color: white;
}

.badge-green {
    background-color: forestgreen;
    color: white;
}

.highlight-hero {
    background-color: orange !important;
}

.text-gold {
    color: #c99d67;
}

.icon-outline {
    -webkit-text-stroke: 1px #000;
}

.dropdown-item.active {
    background-color: #007bff99 !important;
}

.hero-item-wrapper {
    display: none;
    position: fixed;
    top: 50%;
    left: 55%;
    margin: auto;
    background: #31353D;
    border-radius: 5px;
    transform: translate(-50%, -50%);
    z-index: 9999;
    padding: 25px;
}

.fake-hero-item {
    width: 80px;
    height: 80px;
    margin: 5px;
}

.helmets-male {
    background: url("../img/hero_items/male/helmets.png") lightgray;
}

.helmets-female {
    background: url("../img/hero_items/female/helmets.png") lightgray;
}

.armors-male {
    background: url("../img/hero_items/male/armors.png") lightgray;
}

.armors-female {
    background: url("../img/hero_items/female/armors.png") lightgray;
}

.boots-male {
    background: url("../img/hero_items/male/boots.png") lightgray;
}

.boots-female {
    background: url("../img/hero_items/female/boots.png") lightgray;
}

.right_handed_items-female, .right_handed_items-male {
    background: url("../img/hero_items/weapons-min.png") lightgray;
}

.left_handed_items-female, .left_handed_items-male {
    background: url("../img/hero_items/left-hand.png") lightgray;
}

.left_handed_items-female, .left_handed_items-male, .right_handed_items-female, .right_handed_items-male, .boots-female, .boots-male, .armors-female, .armors-male, .helmets-female, .helmets-male {
    height: 80px !important;
    width: 80px !important;
    border: 2px solid darkgoldenrod;
    background-repeat: no-repeat;
    border-radius: 3px;
    margin: 5px;
    -webkit-box-shadow: 10px 10px 29px -10px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 10px 10px 29px -10px rgba(0, 0, 0, 0.75);
    box-shadow: 10px 10px 29px -10px rgba(0, 0, 0, 0.75);
}

.helmets-1, .armors-16, .boots-28, .left_handed_items-37, .left_handed_items-38, .left_handed_items-39, .right_handed_items-100, .right_handed_items-101, .right_handed_items-102 {
    background-position: 0 0;
}

.helmets-2, .armors-17, .boots-29, .right_handed_items-115, .right_handed_items-116, .right_handed_items-117 {
    background-position: -80px 0;
}

.helmets-3, .armors-18, .boots-30, .right_handed_items-70, .right_handed_items-71, .right_handed_items-72 {
    background-position: -160px 0;
}

.helmets-4, .armors-19, .boots-31, .left_handed_items-40, .left_handed_items-41, .left_handed_items-42, .right_handed_items-103, .right_handed_items-104, .right_handed_items-105 {
    background-position: 0 -80px;
}

.helmets-5, .armors-20, .boots-32, .right_handed_items-118, .right_handed_items-119, .right_handed_items-120 {
    background-position: -80px -80px;
}

.helmets-6, .armors-21, .boots-33, .right_handed_items-73, .right_handed_items-74, .right_handed_items-75 {
    background-position: -160px -80px;
}

.helmets-7, .armors-22, .boots-34, .left_handed_items-43, .left_handed_items-44, .left_handed_items-45, .right_handed_items-106, .right_handed_items-107, .right_handed_items-108 {
    background-position: 0 -160px;
}

.helmets-8, .armors-23, .boots-35, .right_handed_items-121, .right_handed_items-122, .right_handed_items-123 {
    background-position: -80px -160px;
}

.helmets-9, .armors-24, .boots-36, .right_handed_items-76, .right_handed_items-77, .right_handed_items-78 {
    background-position: -160px -160px;
}

.helmets-10, .armors-25, .left_handed_items-46, .left_handed_items-47, .left_handed_items-48, .right_handed_items-109, .right_handed_items-110, .right_handed_items-111 {
    background-position: 0 -240px;
}

.helmets-11, .armors-26, .right_handed_items-124, .right_handed_items-125, .right_handed_items-126 {
    background-position: -80px -240px;
}

.helmets-12, .armors-27, .right_handed_items-79, .right_handed_items-80, .right_handed_items-81 {
    background-position: -160px -240px;
}

.helmets-13, .left_handed_items-49, .left_handed_items-50, .left_handed_items-51, .right_handed_items-112, .right_handed_items-113, .right_handed_items-114 {
    background-position: 0 -320px;
}

.helmets-14, .right_handed_items-127, .right_handed_items-128, .right_handed_items-129 {
    background-position: -80px -320px;
}

.helmets-15, .right_handed_items-82, .right_handed_items-83, .right_handed_items-84 {
    background-position: -160px -320px;
}

.left_handed_items-52, .left_handed_items-53, .left_handed_items-54 {
    background-position: 0 -400px;
}

.right_handed_items-55, .right_handed_items-56, .right_handed_items-57 {
    background-position: -240px 0;
}

.right_handed_items-58, .right_handed_items-59, .right_handed_items-60 {
    background-position: -240px -80px;
}

.right_handed_items-61, .right_handed_items-62, .right_handed_items-63 {
    background-position: -240px -160px;
}

.right_handed_items-64, .right_handed_items-65, .right_handed_items-66 {
    background-position: -240px -240px;
}

.right_handed_items-67, .right_handed_items-68, .right_handed_items-69 {
    background-position: -240px -320px;
}

.right_handed_items-85, .right_handed_items-86, .right_handed_items-87 {
    background-position: -320px 0;
}

.right_handed_items-88, .right_handed_items-89, .right_handed_items-90 {
    background-position: -320px -80px;
}

.right_handed_items-91, .right_handed_items-92, .right_handed_items-93 {
    background-position: -320px -160px;
}

.right_handed_items-94, .right_handed_items-95, .right_handed_items-96 {
    background-position: -320px -240px;
}

.right_handed_items-97, .right_handed_items-98, .right_handed_items-99 {
    background-position: -320px -320px;
}

/* LOADER */
.loader-wrapper {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #242f3f;
    opacity: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1042;
}

.loader {
    display: inline-block;
    width: 30px;
    height: 30px;
    position: relative;
    border: 4px solid #Fff;
    animation: loader 2s infinite ease;
}

.loader-inner {
    vertical-align: top;
    display: inline-block;
    width: 100%;
    background-color: #fff;
    animation: loader-inner 2s infinite ease-in;
}

@keyframes loader {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(180deg);
    }
    50% {
        transform: rotate(180deg);
    }
    75% {
        transform: rotate(360deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes loader-inner {
    0% {
        height: 0%;
    }
    25% {
        height: 0%;
    }
    50% {
        height: 100%;
    }
    75% {
        height: 100%;
    }
    100% {
        height: 0%;
    }
}

.bg-legionnaire {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/roman_units.png") -0 -0;
}

.bg-praetorian {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/roman_units.png") -24px -0;
}

.bg-imperian {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/roman_units.png") -0 -24px;
}

.bg-equites_legati {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/roman_units.png") -24px -24px;
}

.bg-equites_imperatoris {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/roman_units.png") -48px -0;
}

.bg-equites_caesaris {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/roman_units.png") -48px -24px;
}

.bg-roman_ram {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/roman_units.png") -0 -48px;
}

.bg-fire_catapult {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/roman_units.png") -24px -48px;
}

.bg-senator {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/roman_units.png") -48px -48px;
}

.bg-roman_settler {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/roman_units.png") -72px -0;
}

.bg-roman_hero {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/roman_units.png") -72px -24px;
}

.bg-phalanx {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/gaul_units.png") -0 -0;
}

.bg-swordsmen {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/gaul_units.png") -24px -0;
}

.bg-pathfinder {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/gaul_units.png") -0 -24px;
}

.bg-theutates_thunder {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/gaul_units.png") -24px -24px;
}

.bg-druidrider {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/gaul_units.png") -48px -0;
}

.bg-haeduan {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/gaul_units.png") -48px -24px;
}

.bg-gaul_ram {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/gaul_units.png") -0 -48px;
}

.bg-trebuchet {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/gaul_units.png") -24px -48px;
}

.bg-chieftain {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/gaul_units.png") -48px -48px;
}

.bg-gaul_settler {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/gaul_units.png") -72px -0;
}

.bg-gaul_hero {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/gaul_units.png") -72px -24px;
}

.bg-clubswinger {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/teuton_units.png") -0 -0;
}

.bg-spearman {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/teuton_units.png") -24px -0;
}

.bg-axeman {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/teuton_units.png") -0 -24px;
}

.bg-scout {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/teuton_units.png") -24px -24px;
}

.bg-paladin {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/teuton_units.png") -48px -0;
}

.bg-teutonic_knight {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/teuton_units.png") -48px -24px;
}

.bg-teuton_ram {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/teuton_units.png") -0 -48px;
}

.bg-catapult {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/teuton_units.png") -24px -48px;
}

.bg-chief {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/teuton_units.png") -48px -48px;
}

.bg-teuton_settler {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/teuton_units.png") -72px -0;
}

.bg-teuton_hero {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/teuton_units.png") -72px -24px;
}

.bg-slave_militia {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/egyptian_units.png") -0 -0;
}

.bg-ash_warden {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/egyptian_units.png") -24px -0;
}

.bg-khopesh_warrior {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/egyptian_units.png") -0 -24px;
}

.bg-sopdu_explorer {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/egyptian_units.png") -24px -24px;
}

.bg-anhur_guard {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/egyptian_units.png") -48px -0;
}

.bg-resheph_chariot {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/egyptian_units.png") -48px -24px;
}

.bg-egyptian_ram {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/egyptian_units.png") -0 -48px;
}

.bg-stone_catapult {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/egyptian_units.png") -24px -48px;
}

.bg-nomarch {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/egyptian_units.png") -48px -48px;
}

.bg-egyptian_settler {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/egyptian_units.png") -72px -0;
}

.bg-egyptian_hero {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/egyptian_units.png") -72px -24px;
}

.bg-mercenary {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/hun_units.png") -0 -0;
}

.bg-bowman {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/hun_units.png") -24px -0;
}

.bg-spotter {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/hun_units.png") -0 -24px;
}

.bg-steppe_rider {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/hun_units.png") -24px -24px;
}

.bg-marksman {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/hun_units.png") -48px -0;
}

.bg-marauder {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/hun_units.png") -48px -24px;
}

.bg-hun_ram {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/hun_units.png") -0 -48px;
}

.bg-hun_catapult {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/hun_units.png") -24px -48px;
}

.bg-logades {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/hun_units.png") -48px -48px;
}

.bg-hun_settler {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/hun_units.png") -72px -0;
}

.bg-hun_hero {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/hun_units.png") -72px -24px;
}

.bg-hoplite {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/spartan_units.png") -0 -0;
}

.bg-sentinel {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/spartan_units.png") -24px -0;
}

.bg-shieldsman {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/spartan_units.png") -48px -0;
}

.bg-twinsteel_therion {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/spartan_units.png") -0 -24px;
}

.bg-elpida_rider {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/spartan_units.png") -24px -24px;
}

.bg-corinthian_crusher {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/spartan_units.png") -48px -24px;
}

.bg-spartan_ram {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/spartan_units.png") -0 -48px;
}

.bg-spartan_ballista {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/spartan_units.png") -24px -48px;
}

.bg-ephor {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/spartan_units.png") -48px -48px;
}

.bg-spartan_settler {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/spartan_units.png") -72px -0;
}

.bg-spartan_hero {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/spartan_units.png") -72px -24px;
}

.bg-thrall {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/viking_units.png") -0 -0;
}

.bg-shield_maiden {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/viking_units.png") -24px -0;
}

.bg-berserker {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/viking_units.png") -0 -24px;
}

.bg-heimdalls_eye {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/viking_units.png") -24px -24px;
}

.bg-huskarl_rider {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/viking_units.png") -48px -0;
}

.bg-valkyries_blessing {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/viking_units.png") -48px -24px;
}

.bg-viking_ram {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/viking_units.png") -0 -48px;
}

.bg-viking_catapult {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/viking_units.png") -24px -48px;
}

.bg-jarl {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/viking_units.png") -48px -48px;
}

.bg-viking_settler {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/viking_units.png") -72px -0;
}

.bg-viking_hero {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/viking_units.png") -72px -24px;
}

.bg-pikeman {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/natar_units.png") -0 -0;
}

.bg-thorned_warrior {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/natar_units.png") -24px -0;
}

.bg-guardsman {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/natar_units.png") -0 -24px;
}

.bg-birds_of_prey {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/natar_units.png") -24px -24px;
}

.bg-axerider {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/natar_units.png") -48px -0;
}

.bg-natarian_knight {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/natar_units.png") -48px -24px;
}

.bg-warelephant {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/natar_units.png") -0 -48px;
}

.bg-ballista {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/natar_units.png") -24px -48px;
}

.bg-natarian_emperor {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/natar_units.png") -48px -48px;
}

.bg-natar_settler {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/natar_units.png") -72px -0;
}

.bg-natar_hero {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/natar_units.png") -72px -24px;
}

.bg-rat {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/nature_units.png") -0 -0;
}

.bg-spider {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/nature_units.png") -24px -0;
}

.bg-snake {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/nature_units.png") -0 -24px;
}

.bg-bat {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/nature_units.png") -24px -24px;
}

.bg-wild_boar {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/nature_units.png") -48px -0;
}

.bg-wolf {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/nature_units.png") -48px -24px;
}

.bg-bear {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/nature_units.png") -0 -48px;
}

.bg-crocodile {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/nature_units.png") -24px -48px;
}

.bg-tiger {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/nature_units.png") -48px -48px;
}

.bg-elephant {
    width: 24px;
    height: 24px;
    background: url("../img/unit_icons/nature_units.png") -72px -0;
}

.bg-resource-wood {
    width: 26px;
    height: 19px;
    background: url("../img/common_icons/lumber_small.png");
    display: inline-block;
}

.bg-resource-clay {
    width: 26px;
    height: 18px;
    background: url("../img/common_icons/clay_small.png");
    display: inline-block;
}

.bg-resource-iron {
    width: 26px;
    height: 18px;
    background: url("../img/common_icons/iron_small.png");
    display: inline-block;
}

.bg-resource-wheat {
    width: 26px;
    height: 24px;
    background: url("../img/common_icons/crop_medium.png");
    display: inline-block;
}

.bg-cranny {
    width: 16px;
    height: 16px;
    background: url("../img/common_icons/cranny.png");
    display: inline-block;
}

.bg-carry {
    width: 13px;
    height: 13px;
    background: url("../img/common_icons/carry.png");
    background-position-x: 0;
    background-position-y: 0px;
    display: inline-block;
}

.travian-unit-img-inline {
    display: inline-block;
}


.w-90 {
    width: 90% !important;
}

tr.danger {
    border-left: 2px solid #f5c6cb;
}

tr.warning {
    border-left: 2px solid #ffeeba;
}

tr.no-danger {
    border-left: 10px solid #c3e6cb;
}

.collapse-table:hover {
    cursor: pointer;
}

.tbl-border {
    border-left: 1px solid lightgray;
    border-right: 1px solid lightgray;
    border-top: 1px solid lightgray;
}

.thead-gray tr th {
    background-color: rgb(223, 223, 223);
    color: #212529;
    border-bottom: 4px solid lightgray;
    /*border-bottom: 3px solid #dee2e6;*/
}

.tr-gray {
    background-color: #F0F0F0;
}

.tr-gray:hover {
    background-color: #F5F5F5;
}

.progress-custom {
    height: 14px;
    border-radius: 10.5px;
    background-color: lightgray;
}

.progress-custom .progress-bar-custom {
    background-color: lightgray;
    border-radius: 5px;
    position: relative;
}

.progress-custom .progress-bar-custom[aria-valuenow]::after {
    content: "";
    width: 12px;
    height: 12px;
    position: absolute;
    border-radius: 100%;
    right: 1px;
    background-color: gray;
}

.progress-custom .progress-bar-wrapper {
    background-color: lightgray;
    border-radius: 5px;
    position: relative;
}

.progress-custom .progress-bar-wrapper[aria-valuenow]::after {
    content: " ";
    width: 12px;
    height: 12px;
    border-radius: 100%;
    position: absolute;
    right: 1px;
    top: 1px;
    /*background-color: gray;*/
    background-image: url("../img/common_icons/crosshairs-solid.svg");
}

.th-ratios {
    min-width: 6em;
}

/* Is needed for modal forms to prevent text overflowing outside the modal if there is a really long word */
.form-text {
    word-break: break-word;
}

/* UNUSED OR DEPRECATED OR DEPRECATED IN NEXT UPDATE (MAINLY HOMEPAGE CLASSES) */
.hidden {
    display: none;
}

.login-bg-image {
    background-image: url('../img/background/top_homepage_art.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
    max-height: 100%;
}

.register-bg-image {
    background-image: url('../img/background/top_homepage_art.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
    max-height: 100%;
}

.social-btn {
    margin: 10px 3px 0;
    border: 1px solid rgba(0, 0, 0, 0.25);
    font-size: 1.2rem;
}

.social-btn:hover {
    border: 1px solid black;
    background: rgba(255, 255, 255, 0.25);
    transition: 0.3s;
}

.upgrade-membership-plan-btn {
    border: 1px solid #8800b4;
    color: #ffc107;
}

.upgrade-membership-plan-btn:hover {
    background: rgba(136, 0, 180, 0.75);
    color: #ffc107;
    transition: 0.3s;
}

.btn-light {
    margin: 10px 3px 0;
    border: 1px solid rgba(0, 0, 0, 0.25);
    background: rgba(255, 255, 255, 0.05);
}

.btn-light.primary {
    color: white;
    background: rgb(60, 60, 60);
}


.btn-light:hover {
    border: 1px solid black;
    background: rgba(0, 123, 255, 0.05);
    transition: 0.3s;
}

.btn-light.primary:hover {
    background: rgba(60, 60, 60, 0.85);
    transition: 0.3s;
}

.btn-light.primary:active {
    background: rgba(60, 60, 60, 0.8) !important;
}

.btn-light.primary:focus {
    background: rgba(60, 60, 60, 0.8) !important;
}

.btn-light.danger {
    border: 1px solid rgba(255, 118, 118, 0.55);
    background: rgba(255, 0, 0, 0.02);
}

.btn-light.danger:hover {
    border: 1px solid rgba(255, 118, 118, 0.8);
    background: rgba(255, 0, 0, 0.05);
    transition: 0.3s;
}

.btn-light.danger:active {
    background: rgba(255, 0, 0, 0.1) !important;
}

.btn-light.danger:focus {
    background: rgba(255, 0, 0, 0.1) !important;
}

.btn-light:active {
    background: rgba(0, 123, 255, 0.1) !important;
}

.btn-light.success {
    background: rgba(15, 190, 2, 0.05);
}

.btn-light.success:hover {
    border: 1px solid rgba(15, 190, 2, 0.8);
    background: rgba(15, 190, 2, 0.15);
    transition: 0.3s;
}

.btn-light.success:active {
    background: rgba(15, 190, 2, 0.2) !important;
}

.btn-light.success:focus {
    background: rgba(15, 190, 2, 0.2) !important;
}




/* Create ripple effect */
.ripple {
    position: relative;
    overflow: hidden;
    transform: translate3d(0, 0, 0);
}

.ripple:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(10, 10);
    opacity: 0;
    transition: transform .5s, opacity 1s;
}

.ripple:active:after {
    transform: scale(0, 0);
    opacity: .3;
    transition: 0s;
}

.btn-pretty {
    font-size: 1.1rem;
    line-height: 1.5;
    color: #fff;
    text-transform: uppercase;
    width: 40%;
    height: 50px;
    border-radius: 25px;
    background: #007bff;
    justify-content: center;
    align-items: center;
    margin-left: 30%;
    margin-bottom: 1rem;
    -webkit-transition: all .4s;
    -o-transition: all .4s;
    -moz-transition: all .4s;
    transition: all .4s;
    font-weight: bold;
}

.card-white-opacity {
    background-color: rgba(255, 255, 255, 0.3);
}

/* slightly transparent fallback */
.backdrop-blur {
    background-color: rgba(255, 255, 255, .9);
}

.backdrop-blur input {
    background-color: rgba(255, 255, 255, .5) !important;
}

.c-rounded {
    border-radius: 20px;
}

/* if backdrop support: very transparent and blurred */
@supports ((-webkit-backdrop-filter: blur(2em)) or (backdrop-filter: blur(2em))) {
    .backdrop-blur {
        background-color: rgba(255, 255, 255, .5);
        -webkit-backdrop-filter: blur(2em);
        backdrop-filter: blur(2em);
    }
}

.glass {
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    border: solid 2px transparent;
    background-clip: padding-box;
    box-shadow: 0 0.3rem 0.5rem 0 rgba(0, 0, 0, 0.1);
}

.subscription-plan {
    background-image: linear-gradient(90deg, #575757 0px, #6d6d6d 40px, #575757 80px);
    background-size: 600px;
    min-width: 65px;
    font-size: 0.75rem;
    animation: shine 10s infinite ease-out;
}

.subscription-plan.plus {
    background-image: linear-gradient(90deg, #005eff 0px, #357cff 40px, #005eff 80px);
}

.subscription-plan.professional {
    background-image: linear-gradient(90deg, #7900fc 0px, #8e1fff 40px, #7900fc 80px);
}

@keyframes shine {
  0% {
    background-position: -100px;
  }
  40%, 100% {
    background-position: 208px;
  }
}


.hp-bg-image {
    background-image: url('../img/background/landscape1.jpg');
    background-repeat: no-repeat;
    height: 100vh;
}

.hp-func-card {
    background: rgba(250, 250, 250, 0.8);
}

.hp-func-card > .card-footer {
    background: rgba(250, 250, 250, 0);
}

.hp-func-card:hover {
    background: rgba(250, 250, 250, 1);
}

.hp-func-card:hover > .card-footer {
    background: rgba(250, 250, 250, 1);
}

.hp-bg-text {
    background-color: rgb(0, 0, 0); /* Fallback color */
    background-color: rgba(0, 0, 0, 0.6); /* Black w/opacity/see-through */
    color: white;
    font-weight: bold;
    font-size: 18px;
    border: 3px solid #f1f1f1;
    position: relative;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 80%;
    padding: 10px;
    text-align: justify;
}

#travianplus-btn {
    position: absolute;
    top: 1px;
    right: 5px;
}

.sticky-header-table thead tr:nth-child(1) th {
    position: sticky;
    top: 0;
    z-index: 1;
}

.table-purple, .table-purple > td, .table-purple > th {
    background-color: rgba(191, 111, 217, 0.5);
}

.table-pink, .table-pink > td, .table-pink > th {
    background-color: rgba(253, 41, 206, 0.45);
}

.table-blue, .table-blue > td, .table-blue > th {
    background-color: rgba(102, 174, 255, 0.5);
}

.table-yellow, .table-yellow > td, .table-yellow > th {
    background-color: rgba(255, 250, 103, 0.5);
}

.table-orange, .table-orange > td, .table-orange > th {
    background-color: rgba(255, 159, 35, 0.5);
}

.table-brown, .table-brown > td, .table-brown > th {
    background-color: rgba(160, 82, 45, 0.5);
}

.table-cyan, .table-cyan > td, .table-cyan > th {
    background-color: rgba(1, 233, 215, 0.4);
}

.table-salmon, .table-salmon > td, .table-salmon > th {
    background-color: rgba(249, 149, 149, 0.5);
}

.thead-sticky-wrapper {
    height: 90vh;
    overflow: scroll;
}

.thead-sticky tr:nth-child(1) th {
    position: sticky;
    top: 0;
    z-index: 1;
}

.thead-sticky th {
    position: -webkit-sticky; /* for Safari */
    position: sticky;
    z-index: 1;
    top: 0;
}

.membership-rank-card-btn {
    display: none;
}

.card.membership-rank:hover .membership-rank-card-btn {
    display: inline-block;
}

.hover-pop:hover {
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;
    transform: scale(1.01);
    transition: transform 0.2s;
}

.tribe-1 {
    background-color: #fff3e5;
}

.tribe-2 {
    background-color: #e8e1c2;
}

.tribe-3 {
    background-color: #fffbd5;
}

.tribe-5 {
    background-color: #fcfcfc;
}

.tribe-6 {
    background-color: #e8e8b7;
}

.tribe-7 {
    background-color: #e8c6b7;
}

.top-banner {
    display: block;
    padding-bottom: 5rem;
    overflow: hidden;
    background: rgba(164, 171, 180, 0.2);
    /*background-image: linear-gradient(0deg, rgb(229, 229, 229) 20%, rgb(236, 203, 146) 100%);*/
    /*background-image: linear-gradient(0deg, rgba(138, 105, 255, 0.1) 20%, rgb(159, 132, 255) 100%);*/
    /*color: white*/
;

}

.tutorial .item-hoverable:hover {
    cursor: pointer;
    box-shadow: 0 0 35px -2px rgba(0, 0, 0, .2);
}

.tutorial .text-description {
    font-size: 14px;
}

.tutorial .app-description {
    padding: 100px 0;
    position: relative;
}

.tutorial .description-attacks {
    background: linear-gradient(270deg, #31353D 50%, #282c33 0);
    color: white;
}

.tutorial .description-gray {
    background-color: #31353D;
    color: white;
}

.tutorial .description-header {
    font-family: Ubuntu, Helvetica, Arial, sans-serif;
    line-height: 1.8;
}


.scroll-arrow {
    width: 32px;
    height: 32px;
    transition: 200ms;
    position: absolute;
    left: 90%;
    top: 2vh;

}

.scroll-arrow:hover {
    cursor: pointer;
    transform: scale(1.2);
}

.tutorial .href-link {
    color: #6C98BF !important;
}

.tutorial .href-link-gray {
    color: #b0b6c1;
}

.tutorial .href-link-gray:hover {
    color: #cbcbcb;
    text-decoration: none;
}

.tutorial .href-link:hover {
    mix-blend-mode: difference;
    cursor: pointer;

}

.footer-link:hover:after {
    transform: scaleX(1);
}

.footer-link:after {
    display: block;
    content: "";
    transform: scaleX(0);
    transition: transform 200ms ease-in-out;
    border-bottom: 1px solid #b0b6c1;
}

.affix-arrow {
    position: fixed;
    width: 32px;
    height: 32px;
    transition: 200ms;
    right: 25px;
    bottom: 25px;
    z-index: 30;

}

.white-circle {
    position: fixed;
    width: 55px;
    height: 55px;
    padding: 16px;
    border-radius: 50%;
    right: 25px;
    bottom: 25px;
    background-color: rgb(250, 250, 250);
    z-index: 30;
}

.affix-arrow:hover {
    cursor: pointer;
    transform: scale(1.2);
}

.testimonial-arrows {
    display: flex;
    justify-content: center;
    padding: 10px 0 0 0;
}

.testimonial-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    background-color: #fff;
    border: none;
    box-shadow: 0 2px 4px 1px rgb(50 50 93 / 10%);
    margin: 0 10px;
    transition: transform .2s, box-shadow .2s
}

.testimonial-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 10px 2px rgb(50 50 93 / 10%);
}

.testimonial-button:focus:not(:focus-visible) {
    outline: none;
}

.review-card {
    margin: 30px 5px 15px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgb(50 50 93 / 10%);
    padding: 45px 20px 20px;
    position: relative;
    height: 320px;
    display: flex;
    flex-direction: column;
    border-top: 4px solid #17a2b8;
}

.review-image-wrapper {
    display: inline-block;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 20px 0 0;
    flex: 0 0 auto;
    position: absolute;
    left: calc(50% - 30px);
    top: -30px;
    box-shadow: 0 3px 5px 0 rgb(0 0 0 / 40%);
    background-color: #fff;
}

.review-image {
    width: 60px;
    display: block;
}

.review-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 0 20px 0;
    justify-content: center;
}

.review-info-text {
    font-size: 16px;
    font-family: "Ubuntu", "Helvetica", "Arial", sans-serif;
    text-transform: none;
    margin: 0 0 5px 0;
    font-weight: 400;
    color: #02203c;
}

.review-name {
    font-size: 18px;
    font-family: "Ubuntu", "Helvetica", "Arial", sans-serif;
    text-transform: none;
    text-align: center;
    margin: 0 0 10px 0;
    font-weight: 400;
    color: #02203c;
}

.review-text-wrapper {
    overflow-y: auto;
}

.review-text-wrapper::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.review-text {
    font-size: 14px;
}

.carousel-item {
    max-height: 300px;
}

@media only screen and (min-width: 1200px) {
    .img-wrap {
        transform: rotate3d(.1, -.866, 0, 15deg) rotate(-1deg);
        box-shadow: 27.1px 62.5px 125px -25px rgba(50, 50, 93, .6), 16.2px 37.5px 75px -37.5px;
    }
}

@media only screen and (max-width: 1199px) {
    .img-wrap {
        display: none;
    }
}

.footer {
    background-color: #464a52;
    color: #818896;
}

.footer-separator {
    width: 2px;
    height: 15px;
    margin: auto 15px;
    background-color: #818896;
}
/* pricing */
.pricing .container-fluid {
  background: linear-gradient(0deg, rgba(255, 255, 255, 0) 20%, rgb(127, 187, 255) 100%);
}

.pricing .card {
  border: none;
  border-radius: 1rem;
  transition: all 0.2s;
  box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1);
}

.pricing .plan .card-title {
  margin: 0.5rem 0;
  font-size: 0.9rem;
  letter-spacing: .1rem;
  font-weight: bold;
}

.pricing .plan .recommended {
  margin: 0.5rem 0;
  font-size: 0.7rem;
  letter-spacing: .02rem;
  font-weight: bold;
  color: #ff8400;
  cursor: pointer;
  top: 5px;
  right: 5px;
  position: absolute;
}

.pricing .plan .discount {
  margin: 0.5rem 0;
  letter-spacing: .02rem;
  cursor: pointer;
  top: 3px;
  left: 10px;
  position: absolute;
  font-size: 0.8rem;
  padding: 5px;
  background: #7900fc;
  color:white;
}

.pricing .plan .card-price {
  font-size: 2.5rem;
  margin: 0;
}

.pricing .plan .card-price .currency {
  font-size: 1.9rem;
}

.pricing .plan .card-price .discount-original-price {
  font-size: 1.5rem;
  text-decoration: line-through;
}

.pricing .plan .card-price .discount-original-price .currency {
  font-size: 1rem;
}

.pricing .plan .card-price .period {
  font-size: 0.8rem;
}

.pricing .plan ul li {
  margin-bottom: 1rem;
}

.pricing .text-muted {
  opacity: 0.7;
}

.pricing .plan .card-footer {
  background: transparent;
  border-top: 0;
}

.pricing .plan .btn {
  font-size: 80%;
  border-radius: 5rem;
  letter-spacing: .1rem;
  font-weight: bold;
  padding: 1rem;
  opacity: 0.7;
  transition: all 0.2s;
  background: #d6e7ff;
  color: #007bff;
}

.pricing .plan .btn:hover {
  background: #bbdaff;
}

.pricing .plan .btn.disabled {
  background: #eeeeee;
  color: #6a6a6a;
}

.glass {
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  border: solid 2px transparent;
  background-clip: padding-box;
  box-shadow: 0 0.3rem 0.5rem 0 rgba(0, 0, 0, 0.1);
}

.pricing .info {
  background: rgba(214, 231, 255, 0.8);
  padding: 0.8em;
  border-radius: 10px;
  max-width: 250px;
  clip-path: circle(7% at 90% 20%);
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  position: absolute;
  top: 10px;
  right: 5px;
}
.info:hover {
  clip-path: circle(75%);
    background: rgba(232, 239, 255, 0.5);
}
.pricing .info p {
  color: black;
}
.pricing .info span {
  float: right;
  color: black;
  transition: color 0.2s;
  position: relative;
  margin-right: 9px;
  margin-top: -10px;
}
.pricing .info:hover span {
  color: rgba(255, 255, 255, 0);
}

.tooltip-inner {
  background-color: #e7eeff;
  color: rgb(47, 47, 47);
  font-weight: bold;
  box-shadow: 0 0.3rem 0.5rem 0 rgba(0, 0, 0, 0.1);
}
.tooltip.bs-tooltip-right .arrow:before {
  border-right-color: #d6e7ff !important;
}
.tooltip.bs-tooltip-left .arrow:before {
  border-right-color: #d6e7ff !important;
}
.tooltip.bs-tooltip-bottom .arrow:before {
  border-right-color: #d6e7ff !important;
}
.tooltip.bs-tooltip-top .arrow:before {
  border-right-color: #d6e7ff !important;
}
.tooltip.show {
  opacity: 0.95;
}


@keyframes pulseAnimation {
  0% {
    transform: scale(1.0);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.plan.highlight, .pulse-highlight {
    animation: 1s ease-out 0.3s 1 pulseAnimation;
}

/* Hover Effects on Card */
@media (min-width: 992px) {
  .pricing .plan.card:hover {
    box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.3);
    transform: translate3d(0, -5px, 0);
    transition: all 0.2s ease-in-out;
  }
  .pricing .plan.card:hover .btn {
    opacity: 1;
  }
}

.subscription-required-tag {
    margin-left: 5px;
    font-size: 0.85rem;
    cursor: pointer;
}

.user-subscription-tag{
    margin-left: 3px;
}

.user-subscription-tag.plus {
    color: #357cff;
}

.user-subscription-tag.profi {
   color: #9935ff;
}

.subscription-required-tag.plus {
    color: #357cff;
}

.subscription-required-tag.profi {
    color: #9935ff;
}

.subscriber.plus {
    color: #5374b2;
}

.subscriber.profi {
    color: #66468d;
}

.help-text {
    cursor: pointer;
}

.skeleton {
  opacity: .7;
  animation: skeleton-loading 1s linear infinite alternate;
}

.skeleton-text {
  width: 100%;
  height: .5rem;
  margin-bottom: .25rem;
  border-radius: .125rem;
}

.skeleton-text:last-child {
  margin-bottom: 0;
  width: 80%;
}

@keyframes skeleton-loading {
  0% {
    background-color: hsl(200, 20%, 70%);
  }

  100% {
    background-color: hsl(200, 20%, 95%);
  }
}


/* CUSTOM CHECKBOX - START */

.checkbox-custom {
	 --background: #fff;
	 --border: #d1d6ee;
	 --border-hover: #bbc1e1;
	 --border-active: #1e2235;
	 --tick: #fff;
	 position: relative;
}
.checkbox-custom input, .checkbox-custom svg {
    width: 21px;
    height: 21px;
    display: block;
}
.checkbox-custom input {
	 -webkit-appearance: none;
	 -moz-appearance: none;
	 position: relative;
	 outline: none;
	 background: var(--background);
	 border: none;
	 margin: 0;
	 padding: 0;
	 cursor: pointer;
	 border-radius: 4px;
	 transition: box-shadow 0.3s;
     box-shadow: inset 0 0 0 var(--s, 1px) var(--b, var(--border));
}
.checkbox-custom input:hover {
	 --s: 2px;
	 --b: var(--border-hover);
}
.checkbox-custom input:checked {
	 --b: var(--border-active);
}
.checkbox-custom svg {
	 pointer-events: none;
	 fill: none;
	 stroke-width: 2px;
	 stroke-linecap: round;
	 stroke-linejoin: round;
	 stroke: var(--stroke, var(--border-active));
	 position: absolute;
	 top: 0;
	 left: 0;
	 width: 21px;
	 height: 21px;
	 transform: scale(var(--scale, 1)) translateZ(0);
}
.checkbox-custom.path input:checked {
	 --s: 2px;
	 transition-delay: 0.4s;
}
.checkbox-custom.path input:checked + svg {
	 --a: 16.1 86.12;
	 --o: 102.22;
}
.checkbox-custom.path svg {
	 stroke-dasharray: var(--a, 86.12);
	 stroke-dashoffset: var(--o, 86.12);
	 transition: stroke-dasharray 0.6s, stroke-dashoffset 0.6s;
}
.checkbox-custom.bounce {
	 --stroke: var(--tick);
}
.checkbox-custom.bounce input:checked {
	 --s: 11px;
}
.checkbox-custom.bounce input:checked + svg {
	 animation: bounce 0.4s linear forwards 0.2s;
}
.checkbox-custom.bounce svg {
	 --scale: 0;
}
/* CUSTOM CHECKBOX - END */

@keyframes bounce {
    50% {
        transform: scale(1.2);
    }
    75% {
        transform: scale(.9);
    }
    100% {
        transform: scale(1);
    }
}

.drawer {
    max-height: 20%;
    width: 100%;
    position: fixed;
    bottom: 0;
    text-align: right;
    -webkit-box-shadow: 0 -4px 10px rgba(50, 50, 50, 0.3);
    -moz-box-shadow: 0 -4px 10px rgba(50, 50, 50, 0.3);
    box-shadow: 0 -4px 10px rgba(50, 50, 50, 0.3);
    display: none;
    transition: 0.3s;
}

@media screen and (min-width: 768px) {
    .page-wrapper.toggled .drawer {
        width: calc(100% - 260px);
        transition: 0.3s;
    }
}

.tag{
    border-radius: 8px;
    padding: 5px 10px 5px 10px;
}

.visible-on-tr-hover {
  opacity: 0;
}

tr:hover .visible-on-tr-hover {
  opacity: 1;
}