.quests_tablet_wrapper {
  background: url(../images/quests/quests_bg.png) no-repeat center center /
    contain;
  width: 55vw;
  height: 36vw;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
  padding: 3vw;
  font-family: impact;
  display: none;
}
.tablet_background-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.5);
}
.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-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: contain;
  width: 3vw;
  height: 3vw;
  position: absolute;
  bottom: -1.5vw;
}

.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);
}