.quests_tablet_wrapper {
    background-image: url('../images/quests/quests_bg.png');
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: contain;
    font-family: impact;
    width: 55vw;
    height: 36vw;
    padding: 3vw;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 999;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.tablet_background-wrapper {
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
}

.quests_tablet_wrapper::before {
    position: absolute;
    content: '';
    top: 1.2vw;
    left: 50%;
    transform: translate(-50%);
    width: 2vw;
    height: 1vw;
    background: url(../images/taxi/tablet_camera.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.quests_tablet_wrapper::after {
    position: absolute;
    content: '';
    bottom: 0.8vw;
    left: 50%;
    transform: translate(-50%);
    width: 1.8vw;
    height: 1.8vw;
    background: url(../images/taxi/tabet_button.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.tablet_navbar {
    display: grid;
    grid-template-columns: 10% 55% 35%;
    user-select: none;
}

.close_tablet {
    position: relative;
}

.close_tablet_img {
    background: url(../images/quests/close_tablet.png) no-repeat center center / contain;
    width: 5vw;
    height: 5vw;
    transition: 0.2s linear;
    position: absolute;
    bottom: -1.3vw;
}

.close_tablet:hover {
    filter: opacity(0.9);
}

.navbar_text_icon {
    background: url(../images/quests/tablet_logo.png) no-repeat center center / contain;
    width: 3vw;
    height: 3vw;
    margin-bottom: -2.5vw;
}

.navbar_icons_battery {
    background: url(../images/taxi/battery-icon.png) no-repeat center center / contain;
}

.navbar_icons_mail {
    background: url(../images/quests/mail.png) no-repeat center center / contain;
}

.navbar_timer_icon {
    background: url(../images/quests/tablet_ring.png) no-repeat center center / contain;
    width: 3vw;
    height: 2vw;
}

.navbar_icons_battery,
.navbar_icons_signal,
.navbar_icons_mail {
    width: 1.5vw;
    height: 1.5vw;
    background-size: contain;
    background-repeat: no-repeat;
}

.navbar_icons_mail {
    background-size: cover;
    transform: scale(1.7) translateY(0.15vw);
}

.navbar_icons_signal {
    position: relative;
}

.signal_4 {
    position: absolute;
    top: 3px;
    left: 0;
    width: 5px;
    height: 7px;
    background: url(../images/taxi/signal-icon/4.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.signal_g {
    position: absolute;
    top: 3px;
    left: 4px;
    width: 5px;
    height: 7px;
    background: url(../images/taxi/signal-icon/g.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.signal_first {
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 5px;
    height: 7px;
    background: url(../images/taxi/signal-icon/first.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.signal_second {
    position: absolute;
    bottom: 0px;
    left: 7px;
    width: 5px;
    height: 11px;
    background: url(../images/taxi/signal-icon/second.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.signal_third {
    position: absolute;
    bottom: 0px;
    left: 13px;
    width: 5px;
    height: 15px;
    background: url(../images/taxi/signal-icon/third.png);
    background-size: contain;
    background-repeat: no-repeat;
    animation: third_signal 7s linear infinite;
}

.signal_fourth {
    position: absolute;
    bottom: 0px;
    left: 20px;
    width: 5px;
    height: 19px;
    background: url(../images/taxi/signal-icon/fourth.png);
    background-size: contain;
    background-repeat: no-repeat;
    animation: fourth_signal 7s linear infinite;
}

@keyframes third_signal {
    0% {
        opacity: 1;
    }

    79% {
        opacity: 1;
    }

    80% {
        opacity: 0;
    }

    89% {
        opacity: 0;
    }

    90% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fourth_signal {
    0% {
        opacity: 1;
    }

    69% {
        opacity: 1;
    }

    70% {
        opacity: 0;
    }

    99% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.navbar_text {
    font-size: 2vw;
    font-weight: 400;
    font-family: 'impact';
    display: flex;
    align-items: center;
    padding-left: 2vw;
}

.navbar_text_block {
    color: #fff;
    margin-left: 1vw;
    margin-bottom: -2.5vw;
}

.navbar_text_block span {
    color: #00AFE6;
}

.tablet_task_block {
    font-size: 1.1vw;
    opacity: 0.8;
}

.navbar_info-block {
    padding: 0.5vw 1vw 0;
    display: flex;
    flex-direction: column;
}

.navbar_info {
    display: flex;
    justify-content: space-between;
    color: #fff;
    font-size: 1.3vw;
    padding-left: 4vw;
    margin-bottom: 1vw;
}

.navbar_timer {
    display: flex;
    color: #fff;
}

.navbar_timer_block-text {
    font-size: 1.1vw;
    display: flex;
    justify-content: space-around;
}

.navbar_timer_block {
    padding-left: 1vw;
    width: 100%;
}

.navbar_timer_block-timeline {
    width: 100%;
    border-bottom: 3px solid #A5E24D;
    position: relative;
}

.timeline_progress {
    position: absolute;
    content: '';
    left: 0;
    top: 0;
    width: 30%;
    background: #FF333C;
    height: 3px;
}

.navbar_timer_block-text div:not(:first-child) {
    margin-left: 1vw;
}

.tablet_content {
    width: 99%;
    height: 28.9vw;
    margin-top: 2vw;
    overflow-y: scroll;
    padding-right: 10px;
    margin-right: 10px;
}

.tablet_content::-webkit-scrollbar {
    width: 6px;
}

.tablet_content::-webkit-scrollbar-track {
    background: #ccc;
    box-shadow: inset 0px 0px 0px 2px #323232;
}

.tablet_content::-webkit-scrollbar-thumb {
    background-color: #00c2ff;
    outline: 1px solid #00566e;
    border-radius: 15px;
}

li.quests_tablet_list_item {
    color: #fff;
    font-size: 1.2vw;
    padding: 0 1vw;
    display: grid;
    grid-template-columns: 50% 30% 10% 10%;
    margin-bottom: 1vw;
}

.list_item_goal.wow .list_item_img {
    background: url(../images/quests/wow_icon.png) no-repeat center center / contain;
    width: 3vw;
    height: 2vw;
}

.last_item_bnt_wrapper.wow .last_item_img {
    background: url(../images/quests/wow_icon.png) no-repeat center center / contain;
    width: 2vw;
    height: 2vw;
}

.list_item_goal.wow.passed .list_item_img {
    background: url(../images/quests/wow-icon-passed.png) no-repeat center center / contain;
    width: 3vw;
    height: 2vw;
}

.quests_tablet_list_last_item .last_item_img {
    width: 2.5vw;
    height: 2.5vw;
}

.list_item_goal.energy .list_item_img,
.last_item_bnt_wrapper.energy .last_item_img {
    background: url(../images/quests/energy_icon.png) no-repeat center center / contain;
    width: 3vw;
    height: 2vw;
}

.list_item_goal.energy.passed .list_item_img {
    background: url(../images/quests/energy-icon-passed.png) no-repeat center center / contain;
    width: 3vw;
    height: 2vw;
}

.list_item_goal.exp .list_item_img,
.last_item_bnt_wrapper.exp .last_item_img {
    background: url(../images/quests/exp_icon.png) no-repeat center center / contain;
    width: 3vw;
    height: 2vw;
}

.list_item_goal.exp.passed .list_item_img {
    background: url(../images/quests/exp-icon-passed.png) no-repeat center center / contain;
    width: 3vw;
    height: 2vw;
}

.list_item_box {
    background: url(../images/quests/box_unactive.png) no-repeat center center / contain;
    width: 3vw;
    height: 2vw;
    margin: 0 auto;
}

.list_item_box.completed {
    background: url(../images/quests/box_active.png) no-repeat center center / contain;
    width: 3vw;
    height: 2vw;
    margin: 0 auto;
}

.list_item_box.passed {
    background: url(../images/quests/task-complete-box.png) no-repeat center center / contain;
    width: 3vw;
    height: 2vw;
    margin: 0 auto;
}

.list_item_goal {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.list_item_bar {
    display: grid;
    grid-gap: 1px;
    height: 1vw;
    color: #9df171;
    font-size: 1.3vw;
    font-weight: 500;
    align-items: center;
    justify-content: center;
}

li.quests_tablet_list_last_item {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    color: #fff;
    font-size: 1.35vw;
    margin: 2vw 0vw;
    padding: 0vw 1vw;
}

/* CURRENT MARK WRAPPER */
.current_mark_wrapper {
    font-size: 1.5vw;
    text-shadow:
        0px 0px 1px #000000,
        0px 0px 2px #000000,
        0px 2px 2px rgba(0, 0, 0, 0.5);
}

.current_mark_wrapper span {
    color: #00AFE6;
    font-size: 1.8vw;
}

/* TABLET TASK BUTTONS */
.tablet_task_buttons {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.tablet_task_button {
    background-color: #78DD3F;
    background-image: linear-gradient(0deg, #00C000 0%, #78DD3F 100%);
    box-shadow:
        inset 0px -1px 0px 0px #007800,
        0px 0px 0px 4px #FFFFFF,
        0px 2px 0px 5px #9E9E9B;
    border: none;
    color: #FFFFFF;
    cursor: inherit;
    outline: none;
    font-size: 1.35vw;
    font-family: 'impact';
    text-shadow:
        0px 0px 1px #000000,
        0px 0px 2px #000000,
        0px 2px 2px rgba(0, 0, 0, 0.5);
    text-transform: uppercase;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 3vw;
    margin-top: 3vh;
    padding: 0vw 2vw;
    border-radius: 10px;
    user-select: none;
}

.tablet_task_button span {
    opacity: 0.99;
}

.tablet_task_button:hover {
    background-color: #00F300;
    background-image: linear-gradient(0deg, #00F300 0%, #46FC00 100%);
    box-shadow:
        inset 0px -1px 0px 0px #00BD00,
        0px 0px 0px 4px #FFFFFF,
        0px 2px 0px 5px #BDBCBC;
}

.tablet_task_button:hover span {
    opacity: 0.96;
}

.tablet_task_button.disabled {
    background-color: #607D8B;
    background-image: linear-gradient(0deg, #607D8B 0%, #90A4AE 100%) !important;
    box-shadow:
        inset 0px -1px 0px 0px #263238,
        0px 0px 0px 4px #FFFFFF,
        0px 2px 0px 5px #BDBCBC !important;
}

.last_item_cash {
    padding: 0vw 0.5vw;
}

/* TABLET TASK NEXT */
/* .tablet_task_next {
    background: #6ED737;
    border: 3px solid #FFFFFF;
    -webkit-text-stroke: 1px rgba(56, 142, 60, 0.9);
    text-transform: uppercase;
    margin-top: 1vw;
    padding: 0.65vw 1vw;
    border-radius: 15px;
} */

/* LAST ITEM BNT WRAPPER */
/* .last_item_bnt_wrapper {
    background: #767676;
    border: 3px solid #fff;
    -webkit-text-stroke: 1px rgba(0, 0, 0, 0.8);
    text-transform: uppercase;
    padding: 0.5vw 1vw;
    border-radius: 15px;
} */

.last_item_bnt_wrapper {
    margin: 0;
}

.last_item_bnt_wrapper.completed {
    background: #6ED737;
}

.last_item_bnt_wrapper.active {
    background: #6ED737;
}

/* TABLET */
.tablet_task_select {
    background-color: rgba(0, 0, 0, 0.5);
    content: '';
    display: block;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
}

.tablet_task_select_box {
    background-image: radial-gradient(circle, #00DFFF, #00B4FD);
    border: 3px solid #FFFFFF;
    box-shadow: inset 0px -1px 0px 1px #0069BC;
    width: 100%;
    max-width: 18vw;
    padding: 3vw 3vw 4vw 3vw;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 20px;
}

.tablet_task_select_text {
    color: #FFFFFF;
    font-size: 1.6vw;
    font-family: 'impact';
    text-align: center;
    text-shadow:
        0px 0px 1px #000000,
        0px 0px 2px #000000,
        0px 2px 2px rgba(0, 0, 0, 0.5);
    user-select: none;
}

.tablet_task_select_yes,
.tablet_task_select_no {
    background-color: transparent;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: contain;
    border: none;
    outline: none;
    width: 3vw;
    height: 3vw;
    margin: 0;
    padding: 0;
    position: absolute;
    bottom: -1.5vw;
    -webkit-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    appearance: none;
}

.tablet_task_select_no {
    background-image: url('../images/close_window_btn.png');
    left: 3vw;
}

.tablet_task_select_no:hover {
    background-image: url('../images/close_window_hover_btn.png');
}

.tablet_task_select_yes {
    background-image: url('../images/accept_btn.png');
    right: 3vw;
}

.tablet_task_select_yes:hover {
    background-image: url('../images/accept_btn_hover.png');
}

.list_item_bar.colorful {
    border-radius: 20px;
    height: 1vw;
    margin: auto 0;
    margin-right: 1vw;
    margin-left: 1vw;
    background: #767676;
    overflow: hidden;
}

.list_item_bar.colorful .progress_part {
    width: 100%;
    height: 100%;
}

.list_item_bar.colorful .progress_part:not(:last-child) {
    border-right: 1px solid #323232;
    width: 100%;
    height: 100%;
}

.part_0.color_part {
    background: linear-gradient(to right, #fc1401, #fe8700);
}

.part_1.color_part {
    background: linear-gradient(to right, #fe8700, #fda500);
}

.part_2.color_part {
    background: linear-gradient(to right, #fda500, #fef001);
}

.part_3.color_part {
    background: linear-gradient(to right, #fef001, #f4f71c);
}

.part_4.color_part {
    background: linear-gradient(to right, #f4f71c, #4d9e63);
}

.part_5.color_part {
    background: linear-gradient(to right, #4d9e63, #347bd3);
}

.part_6.color_part {
    background: linear-gradient(to right, #347bd3, #3360f3);
}

.part_7.color_part {
    background: linear-gradient(to right, #3360f3, #333aa5);
}

.part_8.color_part {
    background: linear-gradient(to right, #333aa5, #562790);
}

.part_9.color_part {
    background: linear-gradient(to right, #562790, #7c087c);
}