#slot-list.dino-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
}

.modal-content .dino-list {
    display: block;
}

.dino-item {
    width: 25%;
    position: relative;
    height: 310px;
    border: 1px solid #ededed;
    margin: 0 0 -1px -1px;
    box-sizing: border-box;
    z-index: 1;
}

.dino-item.empty:hover {
    box-shadow: none;
}

.dino-item.selected {
    border: 2px solid #8BC34A;
}

.dino-item.slot-auction {
    border: 2px solid #eead05;
}

.dino-item.slot-locked {
    border: 2px solid #757575;
}

.dino-item.slot-wait {
    border: 2px solid #eead05;
}

.dino-img {
    width: 100%;
    height: 180px;
    border-radius: 4px 4px 0 0;
    overflow: hidden;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    position: relative;
    padding: 10px;
}

.dino-img img {
    max-width: 100%;
    max-height: 100%;
}

.dino-item.slot-locked .dino-img img  {
    filter: grayscale(100%);
}

.dino-info {
    padding: 0px 15px 0 15px;
}

.dino-title {
    font-size: 18px;
    font-weight: bold;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.dino-gender {
    width: 26px;
    height: 26px;
    position: absolute;
    top: 16px;
    left: 16px;
    opacity: 0.8;
}

.btn-activate {
    width: 100%;
    height: 34px;
    bottom: 16px;
    left: 16px;
    border: 1px solid #8BC34A;
    background: #8BC34A;
    color: #fff;
    line-height: 30px;
    border-radius: 3px;
    text-align: center;
    cursor: pointer;
    user-select: none;
}

.btn-activate:hover {
    opacity: 0.8;
}

.dino-stat {
    padding: 15px 15px 5px 15px !important;
    cursor: default !important;
    border-bottom: none !important;
    font-size: 14px !important;
}

.dino-stat-limit {
    cursor: default !important;
    color: #c0392b;
    padding-bottom: 10px !important;
    line-height: normal;
}

.dino-info-link, .dino-info-link:hover {
    color: #3a405b;
}

.dino-stat-egg-growth {
    background: url(../img/icons/sand-clock.svg) no-repeat left;
    padding-left: 24px;
    display: block;
    margin-bottom: 5px;
}

.dino-stat-egg-growth-bg {
    background: #ededed;
    border: 1px solid #2196f3;
    border-radius: 3px;
    color: #fff;
    position: relative;
    height: 24px;
}

.dino-stat-egg-growth-bar {
    background-color: #2196f3;
    display: block;
    position: absolute;
    height: 22px;
    top: 0;
}

.dino-stat-egg-growth-bg span {
    border-radius: 3px;
    color: #fff;
    position: relative;
    line-height: 22px;
    z-index: 2;
    text-align: center;
    width: 100%;
    text-shadow: 1px 1px 2px #484848, 0 0 1em #2196f3;
    display: block;
}

.dino-stat-egg-food {
    background: url(../img/icons/food.svg) no-repeat -2px;
    padding-left: 24px;
    display: block;
}

.dino-stat-egg-food-bg {
    background: #ededed;
    border: 1px solid #4caf50;
    border-radius: 3px;
    color: #fff;
    position: relative;
    height: 24px;
}

.dino-stat-egg-food-bar {
    background-color: #4caf50;
    display: block;
    position: absolute;
    height: 22px;
    top: 0;
}

.dino-stat-egg-food-bg span {
    border-radius: 3px;
    color: #fff;
    position: relative;
    line-height: 22px;
    z-index: 2;
    text-align: center;
    width: 100%;
    text-shadow: 1px 1px 2px #484848, 0 0 1em #4caf50;
    display: block;
}

.dino-stat-health {
    background: url(../img/icons/plus_2.svg) no-repeat left;
    padding-left: 24px;
    display: block;
}

.dino-stat-health-bg {
    background: #ededed;
    border: 1px solid #f95c5c;
    border-radius: 3px;
    color: #fff;
    position: relative;
    height: 24px;
}

.dino-stat-health-bar {
    background-color: #ff5a5a;
    display: block;
    position: absolute;
    height: 22px;
    top: 0;
}

.dino-stat-health-bg span {
    border-radius: 3px;
    color: #fff;
    position: relative;
    line-height: 22px;
    z-index: 2;
    text-align: center;
    width: 100%;
    text-shadow: 1px 1px 2px #484848, 0 0 1em #fe5a5a;
    display: block;
}

.dino-stat-bar {
    display: flex;
    margin-top: 10px;
}

.dino-stat-bar span {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    text-align: center;
    padding-top: 20px;
}

li.dino-stat:hover, li.dino-stat-limit:hover {
    background: #fff !important;
}

.dino-stat-stamina {
    background: url(../img/icons/lightning.svg) no-repeat center top;
}

.dino-stat-hunger {
    background: url(../img/icons/food.svg) no-repeat center top;
}

.dino-stat-thirst {
    background: url(../img/icons/water.svg) no-repeat center top;
}

.dino-stat-bleed {
    background: url(../img/icons/blood.svg) no-repeat center top;
}

.current-dino-label {
    color: #8ac34a;
    background: url(../img/icons/check-green.svg) no-repeat 6px center #8bc34a42;
    padding-left: 30px !important;
} 

.auction-dino-label {
    color: #eead05;
    background: url(../img/icons/auction-small.svg) no-repeat 6px center #eead052b;
    padding-left: 30px !important;
} 

.auction-dino-label a, .auction-dino-label a:hover {
    color: #eead05;
} 

.locked-dino-label {
    color: #757575;
    background: url(../img/icons/locked_small.svg) no-repeat 6px center #75757563;
    padding-left: 30px !important;
} 

.wait-dino-label {
    color: #eead02;
} 

.slot-empty .wait-dino-label {
    color: #eead05;
    background: url(../img/icons/hourglass-small.svg) no-repeat 6px center #eead052b;
    padding-left: 30px !important;
} 

.dino-item:hover .btn-activate {
    display: block;
}

.dino-gender.g-male {
    background: url(../img/icons/male.svg) no-repeat;
}

.dino-gender.g-female {
    background: url(../img/icons/female.svg) no-repeat;
}

.dino-gender.g-skull {
    background: url(../img/icons/skull.svg) no-repeat;
}

.dino-gender.g-egg {
    background: url(../img/icons/egg-simple.svg) no-repeat;
}

.dino-gender.g-egg-ok {
    background: url(../img/icons/egg-ok.svg) no-repeat;
}

.lock-slot .dino-gender {
    opacity: 0.1;
}

.dino-item.add-item {
    background: url(../img/icons/plus.svg) no-repeat center;
    border: 2px solid #ededed;
    cursor: pointer;
    opacity: 0.6;
    overflow: hidden;
    transition: all 0.3s;
}

.dino-item.add-item:hover {
    opacity: 1;
}

.dino-item.add-item span {
    transition: 0.2s;
    position: absolute;
    bottom: -100%;
    display: block;
    text-align: center;
    width: 100%;
    font-size: 20px;
}

.dino-item.add-item:hover span {
    bottom: 20px;
}

.dino-item.empty {
    background: none; 
    border: 2px solid #ededed;
    opacity: 0.6;
}

.dino-item.empty span {
    width: 100%;
    text-align: center;
    display: block;
    margin-top: calc(50% - 5px);
}

.dino-item.empty span b {
    display: block;
    font-size: 25px;
    line-height: normal;
}

.menu-btn {
    background: url(../img/icons/menu_dotted_2.svg) no-repeat center #fff;
    width: 32px;
    height: 32px;
    bottom: 16px;
    right: 16px;
    border: 1px solid #ededed;
    padding: 16px;
    border-radius: 5px;
    cursor: pointer;
    margin-left: 10px;
}

.dino-item:hover .menu-btn {
    display: block;
}

.slot-label {
    
    visibility: hidden;
    position: absolute;
    transition: top 0.2s;
    background: #8BC34A;
    width: 150px;
    left: calc(50% - 75px);
    text-align: center;
    padding: 2px;
    border-radius: 4px 4px 0 0;
    font-size: 12px;
    color: #fff;
    top: -18px;

}

.slot-label.slot-1 {background: #FFC107;}
.slot-label.slot-2 {background: #9C27B0;}
.slot-label.slot-3 {background: #3F51B5;}
.slot-label.slot-4 {background: #795548;}
.slot-label.slot-5 {background: #2196f3;}
.slot-label.slot-6 {background: #607d8b;}
.slot-label.slot-7 {background: #738ad6;}
.slot-label.slot-8 {background: #ff9800;}
.slot-label.slot-9 {background: #35bbe3;}
.slot-label.slot-10 {background: #f98b83;} 
.slot-label.slot-11 {background: #bb68f3;}
.slot-label.slot-12 {background: #242626;}
.slot-label.slot-13 {background: #242626;}
.slot-label.slot-14 {background: #242626;}

.dino-item:hover .slot-label {
    
    visibility: visible;
    top: -28px;
}

.dino-item.add-item:hover .slot-label, .dino-item.empty:hover .slot-label {
    visibility: hidden;
}

.dino-title i {
    width: 20px;
    height: 20px;
    display: inline-block;
    margin-left: 10px;
    vertical-align: top;
    margin-top: 2px;
}

.server-list {
    margin-top: -10px;
    margin-bottom: 25px;
}

.server-list a {
    padding: 6px 15px;    
    border-radius: 4px;
    color: #5d5d5d;
    display: inline-block;
    transition: all 0.3s;
}

.server-list a:hover {
    background: #e0e0e0;
}

.server-list a.active, .server-list a.active:hover {
    background: #ededed;
}

.slot-empty .dino-img {
    height: 234px;
}

.slot-empty .dino-img span {
    display: block;
    text-align: center;
    margin-top: 30%;
    opacity: 0.6;
    font-size: 18px;
}

.slot-empty.selected .dino-img span {    
    margin-top: calc(50% - 30px);
}

.slot-empty .dino-img span i {
    display: none;
    font-size: 14px;
    font-style: normal;
    width: 100%;
    padding: 10px;
}

.slot-empty.selected span i {
    display: block;
}

.slot-empty .btn-activate {
    width: 100%;
}

.slot-empty .dino-info {
    height: 24px;
}

.lock-timer {
    padding: 15px 20px;
    margin: 0 10px 20px;
    border: 1px solid #c0392b;
    border-radius: 4px;
    background: #ffeeee;
    color: #9a271b;
    font-size: 18px;
}

.btn-activate.locked {
    border: 1px solid #a5a5a5;
    background: url(../img/icons/lock.svg) no-repeat 10px center #a5a5a5;
    padding-left: 10px;
    cursor: not-allowed;
}

.btn-activate.locked:hover {
    opacity: 1;
}

.menu-list {
    list-style: none;
    background: #fff;
    border-radius: 4px;
    z-index: 10;
    position: absolute;
    left: 0;
    top: calc(100% - 10px);
    width: 100%;
    box-shadow: -1px 20px 20px 0 rgb(0 0 0 / 15%);
}

.menu-list li {
    cursor: pointer;
    padding: 3px 15px;
    border-bottom: 1px solid #ededed;
    font-size: 13px;
    user-select: none;
}

.menu-list li:hover {
    background: #ededed;
}

.menu-list li:last-child {
    border-bottom: none;
}

.dino-lives {
    bottom: 25px !important;
}

.wpd_header_builder {
    z-index: unset;
}

#dlgLocation {
    position: fixed;
    background: #fff;
    z-index: 101;
    box-shadow: 0px 1px 7px 0 #e2e2e2;
    border-radius: 6px;
    top: 75px;
    left: calc(50% - 340px);
    width: 680px;
}

#dlgLocation .dlg-content {
    position: relative;
}

.dlg-location-position, .dlg-location-points {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 10;
}

.dlg-location-position span {
    position: absolute;
    width: 20px;
    height: 20px;
    margin-left: -10px;
    margin-top: -10px;
    background: white;
    border: 7px solid #d4191d;
    border-radius: 50%;
    z-index: 15;
}

.dlg-location-position span i {
    color: #fffef6;
    position: absolute;
    width: 110px;
    font-style: normal;
    text-transform: uppercase;
    top: -40px;
    left: calc(50% - 55px);
    text-shadow: 2px 2px 3px #484848, 0 0 1em #0c0c0c;
    font-weight: bold;
    text-align: center;
}

.dlg-location-map img {
    width: 620px;
    height: 620px;
}

.dlg-location-map.hz img {
    width: 620px;
    height: 550px;
}

.dlg-location-points {
    display: none;
}

.dlg-location-points div {
    cursor: pointer;
    transition: none;
    position: absolute;
    width: 18px;
    height: 18px;
    margin-left: -9px;
    margin-top: -9px;
    background: white;
    border: 7px solid #d4191d;
    border-radius: 50%;
    z-index: 15;
}

.dlg-location-points div.for_admin {
    border: 7px solid #3F51B5;
}

.dlg-location-points div.for_global_map {
    border: 7px solid #673AB7;
}

.dlg-location-points div:hover {
    border: 4px solid #d4191d;
}

.dlg-location-points div.for_admin:hover {
    border: 4px solid #3F51B5;
}

.dlg-location-points div.for_global_map:hover {
    border: 4px solid #673AB7;
}

.dlg-map {
    position: relative;
}

.dlg-location-options {
    display: block;
    padding: 10px 20px;
    margin: -15px 0 10px 0;
    background: #ededed;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

.dlg-location-options span {
    font-size: 14px;
    line-height: normal;
    display: block;
    position: relative;
}

.dlg-location-options label {
    margin: 5px 0;
}

.dlg-location-options label input {
    margin-right: 5px;
}

#frmLocation.select-location .dlg-location-points {
    display: block;
}

#frmLocation.select-location .dlg-location-position span, #frmLocation.select-location .dlg-location-options {
    display: none;
}

.dlg-progressbar {
    height: 3px;
    background: #d2d2d2;
    width: 0;
    position: absolute;
    left: 0;
    bottom: 0;
    border-radius: 0px 0px 0 4px;
}

.dlg-progressbar.error {
    background: #c0392b;
    width: 100%;
}

.dlg-location-position span {
    background:#F95C18;
    border:2px solid #F95C18;
    border-radius:50%;
    box-shadow:0 8px 10px rgba(249,92,24,0.3);
    cursor:pointer;
    text-align:center;
    z-index: 100;
    transition:.3s;
    -webkit-animation:email-an linear 1s infinite;
    animation:email-an linear 1s infinite;
}

.dlg-location-position span .text-call{
    height:68px;
    width:68px;        
    border-radius:50%;
    position:relative;
    overflow:hidden;
}

.dlg-location-position span .text-call span {
text-align: center;
color:#F95C18;
opacity: 0;
font-size: 0;
    position:absolute;
    right: 4px;
    top: 22px;
line-height: 14px;
    font-weight: 600;
text-transform: uppercase;
transition: opacity .3s linear;
font-family: 'montserrat', Arial, Helvetica, sans-serif;
}

.dlg-location-position span .text-call:hover span {
opacity: 1;
    font-size: 11px;
}

.dlg-location-position span:hover {
    z-index:1;
    background:#fff;
    transition:.3s;
}
.dlg-location-position span:hover i {
    transition:.3s;
}
.dlg-location-position span i {
    color:#fff;
    transition:.3s;
}

.dlg-location-position span i  {
    -webkit-animation: opsimple 3s infinite;
    animation: opsimple 3s infinite;
}

@-webkit-keyframes email-an {
    0% {
    box-shadow:0 8px 10px rgba(249,92,24,0.3),0 0 0 0 rgba(249,92,24,0.2),0 0 0 0 rgba(249,92,24,0.2)
}
40% {
    box-shadow:0 8px 10px rgba(249,92,24,0.3),0 0 0 15px rgba(249,92,24,0.2),0 0 0 0 rgba(249,92,24,0.2)
}
80% {
    box-shadow:0 8px 10px rgba(249,92,24,0.3),0 0 0 30px rgba(249,92,24,0),0 0 0 26.7px rgba(249,92,24,0.067)
}
100% {
    box-shadow:0 8px 10px rgba(249,92,24,0.3),0 0 0 30px rgba(249,92,24,0),0 0 0 40px rgba(249,92,24,0.0)
}
}@keyframes email-an {
    0% {
    box-shadow:0 8px 10px rgba(249,92,24,0.3),0 0 0 0 rgba(249,92,24,0.2),0 0 0 0 rgba(249,92,24,0.2)
}
40% {
    box-shadow:0 8px 10px rgba(249,92,24,0.3),0 0 0 15px rgba(249,92,24,0.2),0 0 0 0 rgba(249,92,24,0.2)
}
80% {
    box-shadow:0 8px 10px rgba(249,92,24,0.3),0 0 0 30px rgba(249,92,24,0),0 0 0 26.7px rgba(249,92,24,0.067)
}
100% {
    box-shadow:0 8px 10px rgba(249,92,24,0.3),0 0 0 30px rgba(249,92,24,0),0 0 0 40px rgba(249,92,24,0.0)
}
}

@keyframes opsimple {
0% {
opacity: 0;
}
40% {
opacity: 1;
}

80% {
opacity: 1;
}
100% {
opacity: 0;
}
}

@-webkit-keyframes opsimple {
0% {
opacity: 0;
}
40% {
opacity: 1;
}
80% {
opacity: 1;
}
100% {
opacity: 0;
}
}

.text-info {
    display: inline-block;
    width: calc(100% - 20px);
    margin: 40px 10px 20px;
    padding: 10px 15px;
    border-radius: 5px;
    background: #edf0ff;
    color: #03509e;
}

.text-info span {
    line-height: 40px;
    font-size: 16px;
}

.text-info a {
    display: inline-block;
    background: #3b55e6;
    color: #fff;
    padding: 8px 16px;
    border-radius: 5px;
}

.text-info a:hover {
    opacity: 0.8;
    color: #fff;
}

.slot-next {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(../img/icons/time.svg) no-repeat center calc(50% - 30px) #131313;
    padding-top: 100px;
    opacity: 0.85;
    color: #fff;
    font-size: 20px;
    text-align: center;
}

.slot-empty .slot-next {
    padding-top: 130px !important;
}

.slot-next b {
    display: block;
    margin-top: 5px;
}

.dino-item:nth-child(3n) {
    margin-right: 0;
}

.disable-slot {
    display: inline-block;
    width: 100%;
    text-align: center;
    margin-top: 45px;
    margin-bottom: -40px;
}

.sticky_header {
    position: absolute !important;
}

#frmLocation .modal-content {
    margin-top: 60px;
}

.select-location .modal-content {
    margin-top: 100px !important;
}

#frmLocation .dlg-location-options label {
    font-size: 14px;
}

.heal-list-item, .boost-list-item, .info-list-item, .folder-list-item  {
    position: relative;
}

.heal-list-item::after, .boost-list-item::after, .info-list-item::after, .folder-list-item::after {
    content: '';
    display: block;
    border: 5px solid transparent;
    border-left: 5px solid #cfcfcf;
    position: absolute;
    right: 6px;
    top: 11px;
}

.heal-list, .boost-list, .info-list, .set-folder {
    display: none;
    position: absolute;
    left: 100%;
    top: -1px;
    white-space: nowrap;
    background: #fff;
    border: 1px solid #ededed;
    border-radius: 0 5px 5px 5px;
}

.info-list {
    cursor: auto;
}

.heal-list div, .boost-list div, .info-list div, .set-folder div {
    padding: 3px 15px;
    border-bottom: 1px solid #ededed;
    display: flex;
}

.heal-list div span, .boost-list div span, .info-list div span {
    flex: 1;
}

.heal-list div i, .boost-list div i, .info-list div i {
    font-style: normal;
    margin-left: 20px;
    color: #828282;
}

.set-folder div i {
    margin-right: 10px;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    margin-top: 5px;
}

.info-list div i {
    user-select: text;
}

.heal-list div:last-child, .boost-list div:last-child, .info-list div:last-child, .set-folder div:last-child {
    border-bottom: none;
}

.heal-list div:hover, .boost-list div:hover, .set-folder div:hover {
    background: #ededed;
}

.info-list div:hover {
    cursor: unset;
}

.heal-list-item:hover .heal-list, .boost-list-item:hover .boost-list, .info-list-item:hover .info-list, .folder-list-item:hover .set-folder {
    display: block;
}

.heal-list.disabled .sel i {
    font-size: 0;
}

.heal-list i #countdown {
    display: none;
}

.heal-list.disabled .sel i #countdown {
    font-size: 13px !important;
    display: inline-block;
    text-align: right;
    padding: 0;
    color: #FF9800;
}

.act-egg-food a {
    display: block;
    color: #3a405b;
}

.egg-dead {
    background: url(../img/icons/egg-broken.svg) no-repeat center;
    display: block;
    width: 65%;
    height: 65%;
}

.btn-egg-dead {
    border: 1px solid #F44336;
    background: #F44336;
    width: 100%;
}

.btn-egg-ok {
    border: 1px solid #2196F3;
    background: #2196F3;
    width: 100%;
}

.food-item {
    display: flex;
    cursor: pointer;
    padding: 5px 10px;
    border-bottom: 1px solid #f7f7f7;
}

.dlg-food-list .food-item:first-child {
    border-top: 1px solid #f7f7f7;
}

.food-item:hover {
    background: #f7f7f7;
}

.food-item .food-amount {
    padding: 0 15px 0 20px;
    font-size: 14px;
    color: #9E9E9E;
}

.food-item .food-value {
    flex: 1;
    text-align: right;
}

span.egg-chance {
    padding-top: 5px;
}

.egg-to-dino-name {
    text-align: center;
    font-size: 24px;
    margin-top: 20px;
}

.egg-no-img {
    background: url(../img/shop/egg-no-img.svg) no-repeat center;
    width: 128px;
    height: 128px;
    margin: 0;
    opacity: 1;
}

#frmEggToDino .modal-content {
    margin: 100px auto 50px;
}

.dino-additional .growth-up::before, .dino-additional .growth-down::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: text-top;
    margin: 0 4px 0 2px;
}

.dino-additional .growth-up::before {
    background: url(../img/icons/direction-up.svg) no-repeat center;
}

.dino-additional .growth-down::before {
    background: url(../img/icons/direction-down.svg) no-repeat center;
}

.alert-text {
    display: inline-block;
    width: calc(100% - 20px);
    margin: 40px 0px 0px;
    padding: 10px 15px;
    border-radius: 5px;
    background: #fff1dc;
    color: #b9360d;
}

.slot-alert {
    padding: 10px 15px;
    background-color: #ffc1071f;
    color: #e48800;
    border-radius: 4px;
    margin-top: 15px;
}

.activate-alert {
    position: fixed;
    bottom: 0;
    width: 630px;
    left: calc(50% - 315px);
    z-index: 100;
    color: #544540;
    padding: 25px 40px 25px 115px;
    border-radius: 5px;
    line-height: 22px;
    background: url(../img/icons/attention.svg) no-repeat 25px center #ffe8a2;
    font-size: 16px;
    visibility: hidden;
    box-shadow: 0 0.75rem 1.5rem rgba(18, 38, 63, 0.15); 
    user-select: none;
    transition: all 0.3s;
}

.activate-alert.showed {
    visibility: visible;
    bottom: 30px;
}

.activate-alert p {
    margin: 0;
}

.activate-wait-content.showed {
    visibility: visible;
}

.wait-game-header {
    font-size: 20px;
    text-align: center;
    padding-bottom: 25px;
    border-bottom: 1px solid #ededed;
    margin-bottom: 25px;
}

.wait-game-puzzle {
    display: block;
}

.inventory-count {
    display: flex;
    margin-left: 20px;
    border-radius: 4px;
    align-items: center;
}

.inventory-count a {
    position: relative;
    font-size: 18px;
    vertical-align: top;
    margin-left: 15px;
    padding: 0 !important;
    margin-right: 0;
    color: #212121;
}

.inventory-count a:first-child {
    margin-left: 0;
}

.inventory-count a:hover {
    background: none !important;
    opacity: 0.75;
}

.inv-heals::before, .inv-food::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 8px;
} 

.inv-heals::before {
    background: url(../img/icons/inv-heal.svg) no-repeat center;
}

.inv-food::before {
    background: url(../img/icons/inv-food.svg) no-repeat center;
}

.slot-heal .dino-item-inner {
    box-shadow: 0px 1px 5px 0px transparent;
    -webkit-animation-name: flash;
    -moz-animation-name: flash;
    -o-animation-name: flash;
    animation-name: flash;
    /* Задержка перед началом */
    -webkit-animation-delay: 0.3s;
    -moz-animation-delay: 0.3s;
    -o-animation-delay: 0.3s;
    animation-delay: 0.3s;
    /* Продолжительность анимации */
    -webkit-animation-duration: 2s;
    -moz-animation-duration: 2s;
    -o-animation-duration: 2s;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

.slot-heal .heal-img {
    background: url(../img/icons/hospital.svg) no-repeat;
    width: 24px;
    height: 24px;
    position: absolute;
    z-index: 1;
    top: 130px; 
    right: 16px;
}

#frmAuction .attention {
    margin-top: 10px;
    padding: 10px 20px;
    background: #ffe9a8;
    border-radius: 4px;
    font-size: 13px;
}

#frmAuction .add-info {
    margin-bottom: 20px;
    padding: 10px 20px;
    background: #e0ffc6;
    border-radius: 4px;
    font-size: 14px;
}


#frmAuction .add-info ul li {
    margin-left: 20px;
    font-size: 14px;
    line-height: 18px;
    margin-bottom: 5px;
}

#frmAuction textarea {
    height: unset;
}

#frmSkin .modal-content {
    margin: 100px auto 50px;
}


#frmSkin .skin-colors .section-title {
    font-weight: bold;
    margin-bottom: 5px;
}

#frmSkin .skin-colors .section-title i {
    font-weight: normal;
    font-style: normal;
}

#frmSkin .skin-section {
    display: inline-block;
    margin: 0 0 15px 0;
}

#frmSkin .skin-section:last-child {
    margin: 0;
}

#frmSkin .skin-section div {
    width: 26px;
    height: 26px;
    float: left;
    margin-right: 4px;
    margin-bottom: 4px;
    border: 2px solid transparent;
    opacity: 1;
    cursor: pointer;
}

#frmSkin .skin-section div.pattern {
    width: unset;
    padding: 0 5px;
    font-size: 14px;
    line-height: 20px;
}
 
#frmSkin .skin-section div.selected {
    border: 2px solid #000;
    opacity: 1;
    position: relative;
}

#frmSkin .skin-section div.selected::before {
    position: absolute;
    content: '';
    background: url(../img/icons/check-in.svg) no-repeat center;
    width: 22px;
    height: 22px;
}

#frmSkin .skin-section div.pattern.selected::before {
    display: none;
}

#frmSkin .skin-section div.pattern[data-id="-1"] {
    margin-left: 10px;
}

#frmSkin .skin-section div.pattern[data-id="-1"], #frmSkin .skin-section div.pattern[data-id="-2"], #frmSkin .skin-section div.pattern[data-id="-3"], #frmSkin .skin-section div.pattern[data-id="-4"] {
    background: #e5e5e554;
    font-size: 14px;
}

#frmSkin .skin-section:hover div {
    opacity: 1;
}

#frmSkin .skin-presets {
    margin-bottom: 20px;
    display: inline-block;
}

#frmSkin .skin-presets div.preset {
    width: unset;
    padding: 4px 10px;
    cursor: pointer;
    float: left;
    margin-right: 5px;
    background-color: #abe5ff;
}

#frmSkin .skin-presets div.preset.clan-preset {
    background-color: #ffdaa4;
}

#frmSkin .skin-presets div.preset:hover {
    opacity: 0.8;
}

#frmSkin .skin-ctrls {
    display: flex;
    align-items: center;
    justify-items: center;
    float: left;
    margin-right: 30px;
}

#frmSkin .skin-ctrls span {
    margin-right: 10px;
    cursor: help;
}

#frmSkin .skin-ctrls input {
    margin: 0;
    width: 155px;
    border-radius: 4px;
    padding: 4px 10px;
}

#frmSkin .modal-header, #frmLocation .modal-header, #frmWaitGame .modal-header {
    display: flex;
    align-items: center;
}

#frmSkin .skin-preview .dino-preview {
    padding: 20px;
    margin-bottom: 10px;
}

#frmSkin .skin-preview .section-title {
    font-weight: bold;
    margin-bottom: 5px;
}

#frmSkin .skin-advanced {
    display: flex;
}

#frmSkin .skin-advanced .skin-colors {
    width: 35%;
}

#frmSkin .skin-advanced .skin-preview {
    width: 65%;
}

#frmSkin .skin-advanced .skin-preview svg:hover {
    -webkit-filter: drop-shadow(0 0 4px #000);
    filter: drop-shadow(0 0 4px #000);
    opacity: 1;
}

#frmSkin .skin-advanced .skin-colors .section-title {
    position: relative;
    display: flex;
}

#frmSkin .skin-advanced .skin-colors .section-title i {
    margin-left: 5px;
    max-width: 220px;
    overflow-x: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#frmSkin .skin-advanced .section-preview {
    background-color: #ededed;
    width: 26px;
    height: 26px;
    display: block;
    margin-right: 10px;
    cursor: pointer;
}

#frmSkin .skin-advanced .section-preview:hover {
    opacity: 0.8;
}

#frmSkin .skin-advanced .skin-section {
    display: none;
}

#frmSkin .skin-advanced .skin-section div.pattern[data-id="-1"] {
    margin-left: 0;
}

#frmSkin .skin-advanced .skin-section.expanded {
    display: inline-block;
    border: 1px solid #ededed;
    padding: 12px;
    border-radius: 4px;
    position: fixed;
    background: #fff;
    z-index: 2;
    width: 356px;
    box-shadow: 0 0 20px 0 rgb(0 0 0 / 15%);
}

.section-preview-close {
    display: none;
}

#frmSkin .skin-advanced .section-preview-close {
    background: url(../img/icons/cross.svg) no-repeat center #fff;
    position: absolute;
    right: -22px;
    top: -18px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    display: block;
    border: 1px solid #ededed;
    padding: 10px;
    border-radius: 50%;
}

#frmSkin .skin-advanced .section-preview-close:hover {
    background: url(../img/icons/cross.svg) no-repeat center #fdfdfd;
}

.tpk-switch  {
    margin-left: 30px;
}

.tpk-switch  i {
    margin-left: 60px;
    font-style: normal;
}

.tpk-switch .switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 27px;
    margin-bottom: 0;
}

.tpk-switch .switch input {display:none;}

.tpk-switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}
  
.tpk-switch .slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}
  
.tpk-switch input:checked + .slider {
    background-color: #2196F3;
}
  
.tpk-switch input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}
  
.tpk-switch input:checked + .slider:before {
    -webkit-transform: translateX(22px);
    -ms-transform: translateX(22px);
    transform: translateX(22px);
}
  
/* Rounded sliders */
.tpk-switch .slider.round {
    border-radius: 34px;
}
  
.tpk-switch .slider.round:before {
    border-radius: 50%;
}

.price-change-skin {
    margin-top: 5px;
}

#frmBuyRestore .dlg-content-amount {
    margin: 0 auto;
    width: max-content;
}

#frmBuyRestore .dlg-content-amount .ctrl-amount {
    margin: 0 auto;
}

#frmBuyRestore .f-left {
    line-height: 38px;
}

.price-info {
    margin-top: 20px;
    background-color: #fff48e;
    padding: 10px 20px;
    border-radius: 4px;
    margin-bottom: -20px;
}

.dino-item .colors {
    visibility: hidden;
    transition: bottom 0.2s;
    display: flex;
    position: absolute;
    left: calc(50% - 58px);
    bottom: 0;
    opacity: 0.8;
}

.dino-img .colors:hover {
    opacity: 1;
}

.dino-img:hover .colors {
    visibility: visible;
    bottom: 14px;
    z-index: 1;
}

.lock-slot .colors {
    display: none;
}

.dino-item .colors div {
    width: 22px;
    height: 22px;
    margin-right: 4px;
    border-radius: 3px;
}

.dino-item .colors div[title="White"] {
    border: 1px solid #cdcdcd;
}

.how-give-dino-title {
    margin: 30px 0 15px;
}

.how-give-dino {
    display: flex;
}

.how-give-dino .hgd {
    border: 2px solid #ededed;
    border-radius: 4px;
    margin: 0 10px;
    width: calc(33.333% - 18px);
    min-height: 82px;
    margin-bottom: 20px;
}

.how-give-dino .hgd:hover {
    border: 2px solid #03509e;
}

.how-give-dino .hgd a {
    padding: 15px 15px 15px 80px;
    align-items: center;
    -webkit-box-pack: center;
    display: flex;
    height: 100%;
}

.how-give-dino .hgd span {
    font-size: 16px;
    color: #3a405b;
}

.how-give-dino .hgd:first-child {
    margin-left: 0;
}

.how-give-dino .hgd:last-child {
    margin-right: 0;
}

.how-give-dino.cat-1 .hgd:nth-child(1) a {
    background: url(../img/icons/hgd-shop.svg) no-repeat 15px center;
}

.how-give-dino.cat-1 .hgd:nth-child(2) a {
    background: url(../img/icons/hgd-auction.svg) no-repeat 15px center;
}

.how-give-dino.cat-1 .hgd:nth-child(3) a {
    background: url(../img/icons/hgd-event.svg) no-repeat 15px center;
}

.how-give-dino.cat-2 .hgd:nth-child(1) a {
    background: url(../img/icons/hgd-subscription.svg) no-repeat 15px center;
}

.how-give-dino.cat-2 .hgd:nth-child(2) a {
    background: url(../img/icons/hgd-egg.svg) no-repeat 15px center;
}

.how-give-dino.cat-2 .hgd:nth-child(3) a {
    background: url(../img/icons/inv-part.svg) no-repeat 15px center;
    background-size: 52px;
}

.show-comment {
    font-size: 14px;
    margin: 10px 0;
    display: inline-block;
}

.auction-comment {
    display: none;
}

#frmAuction .modal-content {
    margin: 100px auto 50px;
}

.auction-shop-price {
    font-weight: bold;
    margin-top: 10px;
}

.day-thursday {
    display: inline-block;
    width: 100%;
    margin: 0 0 25px;
    padding: 15px 20px;
    border-radius: 5px;
    background: #fff1dc;
    color: #b9360d;
    font-size: 15px;
}


.player-slot-timer {
    cursor: help;
}

.lucky-wheel-alert {
    display: flex;
    margin-bottom: 40px;
    background: #f9fdf4;
    border: 1px solid #8bc34a;
    border-radius: 4px;
    padding: 15px 20px;
    font-size: 16px;
}

.lucky-wheel-alert .text {
    margin-right: 25px;
}

.lucky-wheel-alert a {
    background: #8bc34a;
    color: #fff;
    border-radius: 4px;
    text-align: center;
    white-space: nowrap;
    align-items: center;
    display: flex;
    padding: 5px 20px;
}

.lucky-wheel-alert a:hover {
    opacity: 0.8;
    box-shadow: 0 0.75rem 1.5rem rgba(18,38,63,.03);
}

.act-select-juvie {
    display: none;
    width: 100%;
    height: 34px;
    color: #737373;
    line-height: 30px;
    border-radius: 3px;
    text-align: center;
    cursor: pointer;
    user-select: none;
    margin-bottom: 10px;
    border: 1px solid #ededed;
}

.act-select-juvie-or {
    display: none;
    width: 100%;
    text-align: center;
    color: #9E9E9E;
}

.dino-item:hover .act-select-juvie, .dino-item:hover .act-select-juvie-or {
    display: block;
}

.dino-juvie span.old {
    text-decoration: line-through;
    margin: 0 5px;
}

.juvie-diet-0 {
    display: none;
}

#frmSelectMergeDino .food-item {
    align-items: center;
    height: 90px;
    position: relative;
}

#frmSelectMergeDino .food-item .food-name span {
    display: block;
    font-size: 12px;
    color: #9e9e9e;
}

#frmSelectMergeDino .food-img {
    max-width: 100px;
    max-height: 100px;
    display: block;
    margin-right: 15px;
    margin-left: 32px;
}

#frmSelectMergeDino .food-item .dino-lives {
    bottom: 14px !important;
    left: 10px;
}

.food-item-source {
    cursor: default;
}

.food-item-source:hover {
    background: none;
}

#frmSelectMergeDino .merge-title-source, #frmSelectMergeDino .merge-title-list {
    position: relative;
    padding-left: 45px;
}

#frmSelectMergeDino .merge-title-source::before, #frmSelectMergeDino .merge-title-list::before {
    display: flex;
    position: absolute;
    left: 0px;
    top: 5px;
    background: #ededed;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

#frmSelectMergeDino .merge-title-source::before {
    content: '1'; 
}

#frmSelectMergeDino .merge-title-list::before {
    content: '2';
}

#frmSelectMergeDino .merge-title-list {
    margin-top: 20px;
    margin-bottom: 10px;
}

#frmSelectMergeDino .merge-title-source i, #frmSelectMergeDino .merge-title-list i {
    display: block;
    font-size: 12px;
    font-style: normal;
    line-height: normal;
    color: #9e9e9e;
}

#frmSelectMergeDino .merge-available-list {
    max-height: 280px;
    overflow-y: auto;
}

#frmSelectMergeDino .merge-available-list .food-item:hover {
    background: #ffc10717;
}

#frmSelectMergeDino .merge-available-list .food-item.selected {
    background: #ffc10736;
    border-radius: 3px;
}

#frmSelectJuvieDino .modal-content {
    margin: 100px auto 50px;
}

#frmSelectJuvieDino .category-list.color {
    border-bottom: none;
    margin-top: -10px;
    margin-bottom: 10px;
    font-size: 14px;
}

#frmSelectJuvieDino .food-item {
    align-items: center;
    height: 62px;
    position: relative;
}

#frmSelectJuvieDino .food-img {
    max-width: 70px;
    max-height: 70px;
    display: block;
    margin-right: 15px;
}

#frmSelectJuvieDino .food-item.selected {
    background: #fffbdc;
}

#frmSelectJuvieDino .is-season-juvie {
    position: absolute;
    color: #ec9007;
    font-weight: bold;
    bottom: 0px;
    cursor: help;
}

.juvie-gender {
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
}

.juvie-gender div {
    padding: 5px 15px;
    border-radius: 4px;
    margin-right: 10px;
    cursor: pointer;
    user-select: none;
}

.juvie-gender div:hover {
    background: #d2d2d2;
}

.juvie-gender div.selected {
    background: #9E9E9E;
    color: #fff;
}

.slot-empty .dino-img {
    height: 188px;
}

.hny-alert {
    display: flex;
    margin-bottom: 40px;
    background: #f6f0ff;
    border: 1px solid #e9c5ff;
    border-radius: 4px;
    padding: 10px 20px;
    font-size: 16px;
}

.hny-alert .img {
    background: url(https://dynastica.ru/templates/default/img/shop/box-400.png);
    width: 55px;
    height: 55px;
    display: block;
    background-size: cover;
    margin-right: 20px;
    background-position: center;
}

.hny-alert .text {
    flex: 1;
}

.map-preview {
    visibility: hidden;
    position: absolute;
    top: -150px;
    left: calc(50% - 90px);
    width: 180px;
    height: 130px;
    background: #fff;
    border-radius: 2px;
    overflow: hidden;
    border: 3px solid #ffff;
    box-shadow: -1px 4px 11px 3px rgb(0 0 0 / 16%);
    z-index: 20;
    transition: top 0.15s;
}

.map-preview img {
    z-index: 15;
    position: relative;
}

.map-preview i {
    font-size: 11px;
    display: block;
    text-align: center;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    padding: 0 4px;
}

.dlg-location-points div:hover .map-preview {
    visibility: visible;
    top: -145px;
}

.is-season {
    opacity: 1;
    color: #ec9007;
    font-weight: bold;
    display: flex;
    font-size: 16px;
    cursor: help;
    transition: all 0.3s;
}

.is-season i {
    background: url(../img/icons/light-activity.svg) no-repeat center;
    width: 22px;
    height: 22px;
    display: block;
}

.in-season-map {
    opacity: 1;
    color: #ec9007;
    font-weight: bold;
    display: flex;
    font-size: 18px;
    cursor: help;
    transition: all 0.3s;
}

.in-season-map i {
    background: url(../img/icons/map-24.png) no-repeat center;
    width: 22px;
    height: 22px;
    display: block;
}

.slot-buttons {
    display: flex;
    width: 100%;
}

.locked-desc {
    margin-bottom: 15px;
    background: #d6d6d663;
    padding: 5px 10px;
    border-radius: 4px;
}

.locked-desc b {
    display: block;
}

.dino-auction-activity {
    display: none;
    margin-top: 10px;
    padding: 10px 20px;
    background: #fbe5ff;
    border-radius: 4px;
    font-size: 13px;
}

.spawn-ok {
    color: #8ac34a;
    background: url(../img/icons/check-green.svg) no-repeat 18px #FFF !important;
    padding-left: 40px !important;
    cursor: default !important;
}

.second-server {
    display: inline-block;
    width: 100%;
    margin: 0 0 25px;
    padding: 10px 20px;
    border-radius: 5px;
    background: #4caf5038;
    color: #4c964fed;
    font-size: 14px;
}

.restore-alert {
    padding: 10px 15px;
    background-color: #ffc1071f;
    color: #e48800;
    border-radius: 4px;
    margin-bottom: 30px;
    font-size: 14px;
}

.attention {
    padding: 10px 15px;
    background-color: #ffc1071f;
    color: #e48800;
    border-radius: 4px;
    margin: 10px 0 30px 0;
    font-size: 14px;
}

.dino-item .genom {
    margin-left: 8px;
    background: #ffc1073d;
    color: #ffc107;
    padding: 1px 5px;
    border-radius: 4px;
}

.map-points {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.map-points .point {
    cursor: pointer;
    transition: none;
    position: absolute;
    width: 12px;
    height: 12px;
    border: 1px solid #fff;
    margin-left: -9px;
    margin-top: -9px;
    background: #ff9800;
    border-radius: 50%;
    z-index: 15;
}

.map-points .point:hover {
    border: 2px solid #fff;
}

.map-points .point .point-info {
    visibility: hidden;
    position: absolute;
    top: -150px;
    left: calc(50% - 135px);
    width: 270px;
    max-height: 150px;
    background: #fff;
    border-radius: 2px;
    overflow: hidden;
    border: 3px solid #ffff;
    box-shadow: -1px 4px 11px 3px rgb(0 0 0 / 16%);
    z-index: 20;
    line-height: normal;
    text-align: center;
    padding: 8px;
    transition: top 0.15s;
}

.map-points .point:hover .point-info {
    visibility: visible;
    top: -145px;
}

.point-dino-info {
    margin: 10px 0 0 0;
    font-size: 18px;
    background: #edededcf;
    border-radius: 4px;
    padding: 4px 0;
}

.desc-info {
    color: #9e9e9e;
    font-size: 12px;
    margin-top: 5px;
    display: flex;
    justify-content: center;
}

.coords-info {
    color: #9e9e9e;
    margin-right: 20px;
}

.date-info {
    color: #9e9e9e;
}

.point-dino-info b {
    display: flex;
    align-items: center;
    justify-content: center;
}

.point-dino-info span {
    color: #9e9e9e;
    margin-left: 15px;
    font-weight: normal;
    font-size: 14px;
}

.point-info .player-info b {
    font-size: 18px;
    display: block;
}

.player-info i {
    font-size: 12px;
    color: #9E9E9E;
    font-style: normal;
}

#map-layer-season {
    position: absolute;
    top: 0;
}

#dynamic_areas g {
    opacity: 0.5;
}

#dynamic_areas g polygon {
    stroke-width: 3px;
    stroke: #000000a8;
}

.heal-timer {
    font-style: normal;
    font-size: 11px;
    float: right;
    padding-right: 15px;
    color: #FF9800;
}

.status-icons {
    position: absolute;
    top: 164px;
    left: 12px;
    display: flex;
}

#frmNest .slot-alert {
    font-size: 13px;
    line-height: normal;
    color: #2196f3;
    background-color: #2196f31a;
    margin-top: 0;
}

.nest-food-alert {
    padding: 10px 15px;
    background-color: #ffc1071f;
    color: #e48800;
    border-radius: 4px;
    font-size: 14px;
    flex: 1;
    margin-left: 15px;
}

.nest-food-count {
    font-style: normal;
    margin-left: 5px;
}

.nest-egg-ctrl {
    display: flex; 
    align-items: center;
    margin-bottom: 15px;
}

#nest-eggs {
    padding: 7px 5px 7px 25px;
    width: 80px;
    margin-bottom: 0;
    border-radius: 5px;
    font-size: 20px;
    line-height: 20px;
}
 
#nest-comment {
    margin-bottom: 0;
}

.nest-loc {
    padding: 10px 15px;
    background-color: #4caf502b;
    color: #4caf50;
    border-radius: 4px;
    font-size: 14px;
    flex: 1;
    margin-bottom: 15px;
}

.nest-loc i {
    font-size: 12px;
    line-height: normal;
    font-style: normal;
    display: block;
    color: #9E9E9E;
}

.nest-loc a {
    margin-left: 10px;
}

.dev_color {
    display: none;
    border: 1px dashed #4f4f4f !important;
}

.dev_color.showed {
    display: block;
}

.slot-folders {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;
    max-height: 200px;
    overflow-y: auto;
}

.slot-folders .folder {
    display: flex;
    width: calc(25% - 4px);
    align-items: center;
    cursor: pointer;
    padding: 10px 15px 10px 15px;
    border: 1px solid transparent;
    border-radius: 5px;
    margin: 5px 5px 5px 0; 
    position: relative;
    height: 55px;
    user-select: none;
}

.slot-folders .folder:nth-child(4n) {
    margin-right: 0;
}

.slot-folders .folder span {
    margin-left: 10px;
    width: 120px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 16px;   
}

.slot-folders .folder:hover, .slot-folders .folder-add:hover {
    opacity: 0.8;
}

.slot-folders .folder.selected {
    opacity: 1;
    box-shadow: inset 0px 3px 7px 0 rgb(0 0 0 / 10%);
}

.slot-folders .folder-root, .slot-folders .folder-add {
    padding: 10px 15px 10px 55px;
    display: flex;
    width: calc(25% - 4px);
    align-items: center;
    cursor: pointer;
    border: 1px solid #ededed;
    border-radius: 5px;
    margin: 5px 5px 5px 0; 
    height: 55px;
    user-select: none;   
}

.slot-folders .folder-root {background: url(../img/icons/folder.svg) no-repeat 15px center;}
.slot-folders .folder-root.selected {background: url(../img/icons/folder_open.svg) no-repeat 15px center;}
.slot-folders .folder-add {background: url(../img/icons/folder_plus.svg) no-repeat 15px center;margin-right: 0;}

.fl-color-1 svg path {fill: #eead05;} .folder.fl-color-1 {background-color: #fff1ce;} .fl-color-1.selected {border-color: #eead05;} .fl-color-1.selected span {color: #eead05;} .set-folder div.fl-color-1 i {background-color: #fff1ce;}
.fl-color-2 svg path {fill: #8bc34a;} .folder.fl-color-2 {background-color: #cbe9a8;} .fl-color-2.selected {border-color: #8bc34a;} .fl-color-2.selected span {color: #8bc34a;} .set-folder div.fl-color-2 i {background-color: #8bc34a;}
.fl-color-3 svg path {fill: #f44336;} .folder.fl-color-3 {background-color: #ffd3cf;} .fl-color-3.selected {border-color: #f44336;} .fl-color-3.selected span {color: #f44336;} .set-folder div.fl-color-3 i {background-color: #f44336;}
.fl-color-4 svg path {fill: #2196f3;} .folder.fl-color-4 {background-color: #cde9ff;} .fl-color-4.selected {border-color: #2196f3;} .fl-color-4.selected span {color: #2196f3;} .set-folder div.fl-color-4 i {background-color: #2196f3;}
.fl-color-5 svg path {fill: #673ab7;} .folder.fl-color-5 {background-color: #d2b8ff;} .fl-color-5.selected {border-color: #673ab7;} .fl-color-5.selected span {color: #673ab7;} .set-folder div.fl-color-5 i {background-color: #673ab7;}
.fl-color-6 svg path {fill: #ff5a92;} .folder.fl-color-6 {background-color: #ffcdde;} .fl-color-6.selected {border-color: #ff5a92;} .fl-color-6.selected span {color: #ff5a92;} .set-folder div.fl-color-6 i {background-color: #ff5a92;}
.fl-color-7 svg path {fill: #f5e76e;} .folder.fl-color-7 {background-color: #fff8b8;} .fl-color-7.selected {border-color: #f5e76e;} .fl-color-7.selected span {color: #f5e76e;} .set-folder div.fl-color-7 i {background-color: #f5e76e;}
.fl-color-8 svg path {fill: #595959;} .folder.fl-color-8 {background-color: #dbdbdb;} .fl-color-8.selected {border-color: #595959;} .fl-color-8.selected span {color: #595959;} .set-folder div.fl-color-8 i {background-color: #595959;}

.folder-options {
    display: none;
    position: absolute;
    right: 5px;
    top: 15px;
    background: url(../img/icons/folder_options.svg) no-repeat center;
    opacity: 0.75;
    width: 24px;
    height: 24px;
}

.folder-options:hover {
    opacity: 1;
}

.folder:hover .folder-options {
    display: block;
}

.folder-color-list {
    display: flex;
    flex-wrap: wrap;
}

.folder-color-list .folder-template {
    margin-right: 8px;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 4px;
    border: 1px solid transparent;
}

.folder-color-list .folder-template:last-child {
    margin-right: 0;
}

.folder-color-list .folder-template:hover {
    border: 1px solid #ededed;
}

.folder-color-list .folder-template.selected {
    border: 1px solid #ededed;
}

.slot-folders::-webkit-scrollbar {
    -webkit-appearance: none;
}
.slot-folders::-webkit-scrollbar:vertical {
    width: 12px;
}
.slot-folders::-webkit-scrollbar:horizontal {
    height: 12px;
}
.slot-folders::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .200);
    border-radius: 10px;
    border: 2px solid #ffffff;
}
.slot-folders::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #ffffff;
}

.run-wait-game {
    font-size: 14px;
    margin-top: 10px;
}

.run-wait-game .btn {
    margin-bottom: 0;
    margin-top: 5px;
}

#frmWaitGame .modal-content {
    margin: 100px auto 50px !important;
}

#frmWaitGame .switch i {
    white-space: nowrap;
    font-size: 18px;
}
#frmWaitGame .upd-game, #frmWaitGame .complete-game {
    margin-bottom: 0;
    margin-left: 10px;
    height: 30px;
    width: 24px;
    border: 1px solid #ededed;
}

#frmWaitGame .complete-game {
    background: url(../img/icons/check-16-black.svg) no-repeat center;
    margin-left: 30px;
}

#select_game_puzzle {
    margin: 0 0 0 20px;
    border-radius: 4px;
    padding: 2px 12px;
}

#select_game_puzzle option.sep {
    font-weight: bold;
}

.folder-dinos {
    margin-top: 15px;
}

#todo-list * {
    -webkit-transition:.25s ease-in-out;
    -moz-transition:.25s ease-in-out;
    -o-transition:.25s ease-in-out;
    transition:.25s ease-in-out;
}

.settings-popup .fa-check{
    font-size:30px;
    margin-right:10px;
    color:#0eb0b7;
}
#todo-list{
    width: 100%;
    max-height: 190px;
    overflow: auto;
    padding: 10px;
    background: #f1f1f1;
    position:relative;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
}
#todo-list:before{
    content:"";
    position:absolute;
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.4);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.4);
    box-shadow:0 0 20px rgba(0,0,0,0.4);
    top:50%;
    bottom:0;
    left:10px;
    right:10px;
    -webkit-border-radius:100px / 10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}
.todo-wrap{
    display: flex;
    position: relative;
    padding-left: 30px;
    align-items: center;
    -webkit-box-shadow:0 2px 0 -1px #ebebeb;
    -moz-box-shadow:0 2px 0 -1px #ebebeb;
    box-shadow:0 2px 0 -1px #ebebeb;
    user-select: none;
}
.todo-wrap:last-of-type{
    -webkit-box-shadow:none;
    -moz-box-shadow:none;
    box-shadow:none;
}
input[type="checkbox"]{
    position:absolute;
    height:0;
    width:0;
    opacity:0;
    top:-600px;
}
.todo{
    display: inline-block;
    font-weight: 200;
    padding: 6px 5px 6px 34px;
    height: 30px;
    position: relative;
}
.todo:before{
    content:'';
    display:block;
    position:absolute;
    top:calc(50% + 2px);
    left:0;
    width:0%;
    height:1px;
    -webkit-transition:.25s ease-in-out;
    -moz-transition:.25s ease-in-out;
    -o-transition:.25s ease-in-out;
    transition:.25s ease-in-out;
}
.todo:after{
content:'';
display:block;
position:absolute;
z-index:0;
height:18px;
width:18px;
top:9px;
left:-25px;
/*box-shadow*/
-webkit-box-shadow:inset 0 0 0 2px #d8d8d8;
    -moz-box-shadow:inset 0 0 0 2px #d8d8d8;
        box-shadow:inset 0 0 0 2px #d8d8d8;
/*transition*/
-webkit-transition:.25s ease-in-out;
    -moz-transition:.25s ease-in-out;
        -o-transition:.25s ease-in-out;
        transition:.25s ease-in-out;
/*border-radius*/
-webkit-border-radius:4px;
    -moz-border-radius:4px;
        border-radius:4px;
}
.todo:hover:after{
/*box-shadow*/
-webkit-box-shadow:inset 0 0 0 2px #949494;
    -moz-box-shadow:inset 0 0 0 2px #949494;
        box-shadow:inset 0 0 0 2px #949494;
}
.todo .fa-check{
position:absolute;
z-index:1;
left:-31px;
top:0;
font-size:1px;
line-height:36px;
width:36px;
height:36px;
text-align:center;
color:transparent;
text-shadow:1px 1px 0 white, -1px -1px 0 white;
}
:checked + .todo{
color:#717171;
}
:checked + .todo:before{
width:100%;
}
:checked + .todo:after{
/*box-shadow*/
-webkit-box-shadow:inset 0 0 0 2px #0eb0b7;
    -moz-box-shadow:inset 0 0 0 2px #0eb0b7;
        box-shadow:inset 0 0 0 2px #0eb0b7;
}
:checked + .todo .fa-check{
font-size:20px;
line-height:35px;
color:#0eb0b7;
}
.input-todo{
border:none;
outline:none;
font-weight:200;
position:relative;
top:-1px;
margin:0;
padding:0;
width:100%;
}
.editing{
    height:0;
    overflow:hidden;
}

.editing.todo-wrap {
    box-shadow:0 0 400px rgba(0,0,0,.8),inset 0 0px 0 2px #ebebeb;
}
#todo-list input[type="checkbox"] {
    top: unset !important;
}

.folder-dinos .todo-wrap[data-diet="0"] {background: url(../img/icons/leaf.svg) 36px 8px no-repeat;}
.folder-dinos .todo-wrap[data-diet="1"] {background: url(../img/icons/meat.svg) 36px 8px no-repeat;}

#frmFolder .dlg-input {
    margin-top: 0;
}

.folder-dinos .folder-dino-hint {
    color: #9E9E9E;
    font-size: 12px;
    line-height: normal;
    margin-top: 5px;
}

.assign-dinos {
    text-align: right;
    cursor: pointer;
    font-weight: normal;
    color: #2196F3;
    font-size: 13px;
    border: 1px solid #2196f36b;
    border-radius: 4px;
    padding: 0px 8px;
    opacity: 0.75;
}

.assign-dinos:hover {
    opacity: 1;
}

#frmFolder[data-item-id="0"] .assign-dinos {
    display: none;
}

#filter-loc {
    border-radius: 4px;
    padding: 5px 15px;
}

.btn-random {
    background: url(../img/icons/dice.svg) no-repeat center;
    width: 35px;
    height: 24px;
    cursor: pointer;
    background-size: 24px;
    max-width: unset !important;
    min-width: 32px !important;
}

.btn-random:hover {
    opacity: 0.85;
}

.dead-zone-ico {
    position: absolute;
    width: 32px;
    height: 32px;
    background: url(../img/icons/dead-zone.svg) repeat;
    margin-left: -20px;
    margin-top: -10px;
}

@-webkit-keyframes flash {
    0%, 100% {box-shadow: inset 0px 1px 5px 0px transparent;} 
    50% {box-shadow: inset 0px 1px 5px 0px #ff6668;}
}
@-moz-keyframes flash {
    0%, 100% {box-shadow: inset 0px 1px 5px 0px transparent;} 
    50% {box-shadow: inset 0px 1px 5px 0px #ff6668;}
}
@-o-keyframes flash {
    0%, 100% {box-shadow: inset 0px 1px 5px 0px transparent;} 
    50% {box-shadow: inset 0px 1px 5px 0px #ff6668;}
}
@keyframes flash {
    0%, 100% {box-shadow: inset 0px 1px 5px 0px transparent;} 
    50% {box-shadow:inset  0px 1px 5px 0px #ff6668;}
}

@media only screen and (max-width: 1200px) {
    .dino-item {
        width: calc(50% - 20px);
    }

    .slot-empty .dino-img span {
        margin-top: 30%;
    }
}

@media screen and (max-width: 640px) {
    .row {
        margin-left: 0;
        margin-right: 0;
    }

    .dino-item {
        width: 100%;
        margin: 10px 0;
    }

    .server-list a {
        display: block;
    }

    #dlgLocation {
        position: fixed;
        background: #fff;
        z-index: 101;
        box-shadow: 0px 1px 7px 0 #e2e2e2;
        border-radius: 6px;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow-y: scroll;
    }
    .dlg-location-map img {
        width: 100%;
        height: 100%;
    }

    .dino-item.empty span {
        margin-top: calc(50% - 40px);
    }

    .text-info span {
        line-height: 25px;
    }

    .text-info a {
        float: none;
        margin-top: 10px;
    }

    #dialog-buy .dlg-yes {
        left: calc(50% - 160px);
    }

    dialog-buy .dlg-no {
        left: calc(50% + 10px);
    }

    .how-give-dino {
        flex-wrap: wrap;
    }

    .how-give-dino .hgd {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    .alert-text {
        width: 100%;
    }

    .activate-alert {
        position: fixed;
        bottom: 0;
        width: 100%;
        left: 0;
        border-radius: 0;
    }
    .activate-alert.showed {
        bottom: 0;
    }
    .slot-folders .folder, .slot-folders .folder-add {
        width: calc(50% - 5px);
    }
    .folder-color-list .folder-template {
        width: 60px;
        margin-right: 5px;
    }
    #frmWaitGame .modal-title {
        font-size: 16px;
    }
    #frmWaitGame .tpk-switch {
        display: none;
    }
}