* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

h1,
h2,
h3 {
  margin: 0;
  padding: 0;
}

p {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: #f2f2f2;
  display: block;
}

body {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  top: 0;
  left: 0;
  padding: 0;
  background: #1B2026;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-size: 100% 100%;
}

html,
body {
  width: 100vw;
  height: 100%;
  overflow-x: hidden;
  position: relative;
}

::-webkit-scrollbar {
  width: 5px;
  background-color: #c8d5de;
  height: 5px;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #207cc2;
  width: 5px;
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background-color: #c8d5de;
}

@font-face {
  font-family: "Google Sans";
  src: url("../fonts/GoogleSans-Medium.ttf") format("truetype");
  font-weight: 500;
}

@font-face {
  font-family: "Google Sans";
  src: url("../fonts/GoogleSans-Regular.ttf") format("truetype");
  font-weight: 400;
}



.container{
  width: 100%;
  max-width: 720px;
  display: block;
  margin: 0 auto;
}

.header {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 100;
  background: rgba(33, 42, 51, 0.90);
backdrop-filter: blur(12.5px);
  
}

.header_items {
  display: flex;
  align-items: center;
  padding-top: 6px;
  padding-bottom: 6px;
}
.header_item:nth-child(2) {
  flex-grow: 1;
}
.header_item:first-child{
  min-width: calc((100vw - 720px) / 2);
}
.header_item_logo {
  padding-left: 15px;
  display: flex;
  align-items: center;
}

.header_item_logo img:first-child{
  max-height: 40px;
}
.header_item_logo img:last-child{
  max-height: 24px;
}
.header_item_search {
 width: 100%;
 max-width: 274px;
 padding: 8px 20px 8px 40px;
 background:#242e38 url(../images/header_search.svg)left no-repeat;
 background-position: 10px;
 outline: none;
 border: none;
 color: #fff;
 font-size: 14px;
 border-radius: 8px;
 line-height: 20px;
 text-overflow: ellipsis;
}

.header_item_search:focus{
  color: #49535d;
}
.header_item_search::placeholder{
color: #8b99a6;
}
.header_item_buttons {
  display: flex;
  align-items: center;
  padding-right: 16px;
}
.header_item_button:first-child {
  margin-right: 14px;
}
.header_item_button{
  color: #FFF;
text-align: center;
font-size: 13.945px;
font-style: normal;
font-weight: 700;
line-height: 18px; /* 129.076% */
padding: 9px 14px;
padding-left: 12px;
border-radius: 8px;
background: #293440;
outline: none;
border: none;
cursor: pointer;
display: flex;
align-items: center;
}
.header_item_button:last-child:hover{
  background: #207cc2;
}
.header_item_button:first-child:hover{
  background: rgb(63, 78, 96);
}
.header_item_button:last-child{ 
background: #248BDA;
}
.header_item_button img{
  vertical-align: middle;
  margin-right: 9px;
}
.main {
  padding-top: 86px;
}
.main_items {
  display: grid;
  grid-template-columns: calc(50% - 24px) 50%;
  grid-column-gap: 24px;
  margin-top: 19px;
}


.main_item_phone_rect {
  width: 100%;
  height: 100%;
background: rgb(33, 42, 51);
border-radius: 8px;
}

.main_item_phone_rect_content {
  padding: 11px 20px;
}
.main_item_phone_rect_up {
  display: flex;
  align-items: center;
}
.main_item_phone_rect_tittle {
  line-height: 20px;
  font-weight: bold;
  color: #fff;
  font-size: 14px;
}
.main_item_phone_rect_up_number {
  font-size: 14px;
  line-height: 20px;
  margin-left: auto;
  color: #4db2ff;
}
.main_item_phone_rect_text {
  font-size: 13px;
  line-height: 19px;
  color: #8c9aa9;
  margin-top: 11px;
}


.main_up_items{
  display: flex;
  align-items: center;
}
.main_up_item_name {
  color: #FFF;
font-size: 26.25px;
font-style: normal;
font-weight: 700;
line-height: 36px; /* 137.143% */
display: flex;
align-items: center;
}

.main_up_item_name_status{
  font-size: 12.289px;
  font-style: normal;
  font-weight: 700;
  line-height: 17px; /* 138.334% */
  padding: 3px 10px;
  border-radius: 6px;
margin-left: 10px;
}
.main_up_item_name_green{
  color: #5AEC8C;
background: rgba(90, 236, 140, 0.10);
}


.main_up_item_subscribe {
  color: #4DB2FF;
text-align: center;
font-size: 12.688px;
font-style: normal;
font-weight: 400;
line-height: 23px; /* 181.281% */
cursor: pointer;
margin-left: auto;
transition: all .5s;
margin-right: 20px;
}

.main_up_item_subscribe:hover{
  text-decoration: underline;
}

.main_item_rect {
  width: 100%;
  height: auto;
  background: #212933;
  border-radius: 8px;
}
.main_item_rect_content {
 padding-bottom: 10px;
}

.main_item_info_items {
  display: flex;
  flex-direction: column;
}
.main_item_info_item {
display: flex;
align-items: center;
justify-content: space-between;
background: #212A33;
padding: 12.5px 20px;
border-top: 1px solid #1A2026;
}
.main_item_info_item:first-child{
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-top: none;
}
.main_item_info_item:last-child{
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}
.main_item_info_item_tittle {
  color: #FFF;
font-size: 13.016px;
font-style: normal;
font-weight: 700;
line-height: 20px; /* 153.661% */
}
.main_item_info_item_text {
  color: #4DB2FF;
font-size: 12.797px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 156.288% */
}
.footer {
  margin-top: auto;
  width: 100%;
  height: auto;
  background: #111417;
}
.footer_navs {
  display: flex;
  align-items: center;
  list-style: none;
  padding-top: 14px;
  padding-bottom: 14px;
  justify-content: center;
}
.footer_nav {
  margin-right: 32px;
}

.footer_nav a{
  color: #6D8394;
font-size: 10.875px;
font-style: normal;
font-weight: 400;
line-height: 16px; /* 147.126% */
transition: all .5s;
cursor: pointer;
}

.footer_nav a:hover{
  text-decoration: underline;
}


table.main_item_tabble_main{
	width: 100%;
	border-collapse:collapse;
	border-spacing:0;
	height: auto;
}
table.main_item_tabble_main,table.main_item_tabble_main td, table.main_item_tabble_main th {
	border: none
}
table.main_item_tabble_main td,table.main_item_tabble_main th {
	padding: 10px;
  padding-bottom: 0;
	width: 100%;
	height: 35px;
}
table.main_item_tabble_main th {
	background: #293440;
}
.main_item_tabble_main_tittle{
  color: #8C9AA9;
font-size: 13.125px;
font-style: normal;
font-weight: 700;
line-height: 18px; /* 137.143% */
text-align: left;

}


.main_item_tabble_main th:nth-child(2){
  padding-left: 0px;
}

.main_item_tabble_main td:nth-child(2){
  padding-left: 0px;
}

.main_item_tabble_main_tittle:first-child{
  padding-left: 20px;
  border-top-left-radius: 8px;
}
thead .main_item_tabble_main_tittle:first-child{
  padding: 10px 20px;
}
.main_item_tabble_main_tittle:last-child{
  padding-right: 20px;
  border-top-right-radius: 8px;
}

.main_item_tabble_main_price{
  color: #FFF;
  font-size: 14.18px;
  font-style: normal;
  font-weight: 700;
  line-height: 19px; /* 133.994% */
  display: flex;
  align-items: center;
}
.main_item_tabble_main_price_info{
  color: #8C9AA9;
font-size: 11.172px;
font-style: normal;
font-weight: 400;
line-height: 19px; /* 170.07% */
margin-left: 7px;
}
.main_item_tabble_main_text{
  font-size: 13px;
  color: #8C9AA9;
  font-style: normal;
  font-weight: 400;
  line-height: 19px; /* 170.07% */
  margin-top: 12px;
  padding-left: 10px;
  padding-right: 10px;
}
td:first-child .main_item_tabble_main_price{
  padding: 0px 10px;
  padding-bottom: 0px;
}
td:first-child .main_item_tabble_main_info{
  padding-left: 10px;
}


.main_item_tabble_main_price img{
  vertical-align: middle;
  margin-right: 4px;
}

.main_item_tabble_main_info{
  color: #8C9AA9;
  font-size: 11.172px;
  font-style: normal;
  font-weight: 400;
  line-height: 19px; /* 170.07% */
}

.main_item_tabble_main_info:first-child{
  padding-left: 20px;
}

.main_item_tabble_info{
  margin-top: 17px;
  color: #4DB2FF;
font-size: 11.883px;
font-style: normal;
font-weight: 400;
line-height: 19px; /* 159.895% */
margin-left: 20px;
width: fit-content;
cursor: pointer;
transition: all .5s;
}
.main_item_tabble_info:hover{
  text-decoration: underline;
}



.main_item_button{
  margin-top: 22px;
  color: #FFF;
  text-align: center;
  font-size: 13.828px;
  font-style: normal;
  font-weight: 700;
  line-height: 18px; /* 130.169% */
  padding-top: 14px;
  padding-bottom: 14px;
  width: 100%;
  border-radius: 8px;
background: #248BDA;
outline: none;
border: none;
cursor: pointer;
}

.main_item_button:hover{
  background: #207cc2;
}

.main_item:last-child{
  display: flex;
  flex-direction: column;
}


.main_item_timer {
  display: flex;
  margin-top: auto;
  padding-bottom: 10px;
}

.main_item_add .main_item_timer{
  margin-top: 65px;
}

.main_item_timer_item_tittle {
  color: #8794A1;
font-size: 12.578px;
font-style: normal;
font-weight: 400;
line-height: 30px; /* 238.509% */
}
.main_item_timer_item_items {
  display: flex;
  align-items: center;
}
.main_item_timer_item_text {
  color: #FFF;
  text-align: center;
  font-size: 13.594px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px; /* 176.552% */
  padding: 3px 8px;
  background: #212A33;
}
.main_item_timer_item .main_item_timer_item_text:first-child{
  border-radius: 8px 2px 2px 8px;
margin-right: 1px;
}
.main_item_timer_item .main_item_timer_item_text:last-child{
  border-radius: 2px 8px 8px 2px;

}
.main_item_timer_item:first-child .main_item_timer_item_text{
  border-radius: 8px;
  border-right: none
}
.main_item_timer_item_simvol {
  margin-left: 7px;
  margin-right: 7px;
  color: #8794A1;
text-align: center;

font-size: 13.594px;
font-style: normal;
font-weight: 700;
line-height: 24px; /* 176.552% */
}

.main_item_timer_items:last-child{
  display: flex;
  align-items: center;
}
.main_item_timer_item{
  display: flex;
  align-items: center;
}

.main_item_timer_items{
  margin-left: 16px;
}


.history {
  margin-top: 32px;
}
.history_tittle {
  color: #FFF;
font-size: 20.797px;
font-style: normal;
font-weight: 700;
line-height: 36px; /* 173.103% */
margin-left: 13px;
width: fit-content;
}

.history .main_item_tabble_main{
  margin-top: 14px;
  width: 100%;
  height: auto;
  background: #212933;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.history table.main_item_tabble_main td, table.main_item_tabble_main th{
  padding-bottom: 10px;
}

.history table.main_item_tabble_main td, table.main_item_tabble_main th{
  width: auto;
}

.main_item_tabble_main_date{
  color: #8C9AA9;
  font-size: 12.359px;
  font-style: normal;
  font-weight: 400;
  line-height: 19px; /* 153.729% */
}

.main_item_tabble_main_from{
  color: #4DB2FF;
  font-size: 12.906px;
  font-style: normal;
  font-weight: 400;
  line-height: 19px; /* 147.215% */
}


@media (min-width:320px) and (max-width:499px){
  .container{
    padding: 20px;
    padding-right: 20px;
  }
  .main_up_item_name_status{
    font-size: 12px;
  }
  .main_up_item_name {
    font-size: 22px;
  }
  .main_item_phone_rect_tittle{
    font-size: 12px;
  }
  .main_item_phone_rect_up_number{
    font-size: 12px;
  }
  .header_item:nth-child(2){
    display: none;
  }
  .header_item_button{
    font-size: 0px;
  }
  .main_item_tabble_main_tittle{
    white-space: nowrap;
    font-size: 12px;
  }
  .header_item_button img{
    margin-right: 0px;
  }
  .header_item:last-child{
    margin-left: auto;
  }
  .main_up_items{
    display: block;
  }
  .main_up_item_subscribe{
    margin-right: 0px;
    text-align: left;
    width: fit-content;
    margin-left: 0px;
  }
  .main_items{
    grid-template-columns: 100%;
    grid-row-gap: 24px;
  }

  .main_item_timer_item_tittle{
    white-space: nowrap;
  }

  .main_item_timer_item_text{
    white-space: nowrap;
  }

  .main_item_timer{
    display: block;
    margin-top: 20px;
  }

  .main_item_timer_items{
    margin-left: 0px;
    margin-top: 0px;
  }

  .main_item_tabble_main_date{
    white-space: nowrap;
  }
  .history_tabble{
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
  }
  .footer_nav{
    margin-right: 15px;
  }
  .main_item_button{
    margin-top: 20px;
  }
}






@media (min-width:500px) and (max-width:799px){
  .container{
    padding: 20px;
    padding-right: 20px;
  }
  .main_item_timer{
    margin-top: 20px;
  }
  .header_item:nth-child(2){
    display: none;
  }
  .header_item:last-child{
    margin-left: auto;
  }
  .header_item_button{
    white-space: nowrap;
    font-size: 12px;
  }
  .main_up_items{
    display: block;
  }
  .main_up_item_subscribe{
    margin-right: 0px;
    text-align: left;
    width: fit-content;
    margin-left: 0px;
  }
  .main_items{
    grid-template-columns: 100%;
    grid-row-gap: 24px;
  }


  .history_tabble{
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
  }
  .main_item_button{
    margin-top: 20px;
  }
}








@media (min-width:800px) and (max-width:1099px){
  .container{
    padding: 20px;
    padding-right: 20px;
  }
  .main_item_button{
    margin-top: 20px;
  }
  .main_item_timer{
    margin-top: 20px;
  }
  .header_item:nth-child(2){
    margin-left: 20px;
  }
  .header_item_button{
    white-space: nowrap;
    font-size: 12px;
  }
  .main_up_items{
    display: block;
  }
  .main_up_item_subscribe{
    margin-right: 0px;
    text-align: left;
    width: fit-content;
    margin-left: 0px;
  }
  .main_items{
    grid-template-columns: 100%;
    grid-row-gap: 24px;
  }


  .history_tabble{
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
  }
  .footer_nav{
    margin-right: 15px;
  }
}