:root {
    --white: #fff;
    --background-page: #F0F0F6;
    --background-page-new: #F6F6FC;
    --background-gray-block: #F6F6F9;

    --pangea-blue: #405362;
    --pangea-blue-60: #8C98A1;
    --pangea-blue-50: #9FA9B0;
    
    --black: #1E1E1E;
    --black-2: #222222;
    --blue: #369AE3;
    --green: #21BD67;
    --orange: #F45826;
    --orange-button: #FA6A2D;
    --gray: #EFF2F4;
    --gray-button: #EFF2F4;
    --red: #E90000;

    --gray-line: #ECEEEF;


    --social-tg: #24A1DE;
    --social-ig: #DD2B73;

    --adv-orange: #F45826; 
    --adv-purple: #F426D3; 


    --skeleton-gray-1: #ECEEEF;
    --skeleton-gray-2: #CFD4D8;


}

@font-face {
    font-family: 'Inter';
    font-weight: 800;
    src: url(fonts/Inter/static/Inter-ExtraBold.ttf);
}@font-face {
    font-family: 'Inter';
    font-weight: 700;
    src: url(fonts/Inter/static/Inter-Bold.ttf);
}
@font-face {
    font-family: 'Inter';
    font-weight: 600;
    src: url(fonts/Inter/static/Inter-SemiBold.ttf);
}
@font-face {
    font-family: 'Inter';
    font-weight: 500;
    src: url(fonts/Inter/static/Inter-Medium.ttf);
}
@font-face {
    font-family: 'Inter';
    font-weight: 400;
    src: url(fonts/Inter/static/Inter-Regular.ttf);
}
@font-face {
    font-family: 'Inter';
    font-weight: 300;
    src: url(fonts/Inter/static/Inter-Light.ttf);
}
body{
    font-family: 'Inter',sans-serif;
    font-weight: 400;
    margin: 0;
    padding: 0;
    background-color: var(--background-page);
}
.container{
    background-color: var(--white);
    padding: 16px;
    min-height: 100vh;
    margin:  0 auto;
    max-width: 420px;
    box-sizing: border-box;
}
.container_reg_page{
    display: flex;
    flex-direction: column;

}
.logo_reg{
    font-weight: 700;
    font-size:24px;
    text-align:center;

    margin: 8px 0 40px 0;
    /* color: var(--pangea-blue); */
}
.note_reg{
    text-align:center;
    margin-bottom:40px;
    color: var(--pangea-blue-60);
}
.nr_strong{
    font-weight: 600;
    color: var(--pangea-blue);
    margin: 0 0 8px 0;
}
.nr_strong_span{
    
    font-weight: 600;
    color: var(--pangea-blue);
}
.form-group{
    border: none;
    background-color: var(--background-gray-block);
    display: flex;
    border-radius: 12px;
    margin: 0 0 6px 0;
}
.input_login{
    border: none;
    background-color: var(--background-gray-block);
    display: flex;
    border-radius: 12px;
    padding: 16px 20px ;
    outline: none;
    font-size: 16px;
    font-family: 'Inter',sans-serif;
    color: var(--pangea-blue);
    font-weight: 500;
    width: 100%;
    box-sizing: border-box;
    margin: 12px 0;
}
.form-group > input{
    width: 100%;
    padding: 16px 20px 16px 4px;
    border: none;
    outline: none;
    background: transparent;
    font-size: 16px;
    font-family: 'Inter',sans-serif;
    color: var(--pangea-blue);
    font-weight: 500;
}

.form-group > input::placeholder,
.input_login::placeholder{
    color: var(--pangea-blue-60);
    font-weight: 400;
}
.form-group > .prefix{
    padding: 16px 0 16px 20px;
    font-family: 'Inter',sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: var(--pangea-blue);
}
.status_reg > svg{
    fill: green;
    height: 20px;
    width: 20px;
    padding: 0 16px 0 0;
}
.status_reg{
    width: 60px;
display: flex;
padding: 0 0 0 16px;
align-content: center;
align-items: center;
}

.button_reg {
    margin: 6px 0 0 0;
    width:100%;
    padding:16px;
    font-size:16px;
    border-radius: 12px;
    background-color: var(--pangea-blue);
    border: none;
    outline: none;
    color: var(--white);
}
.button_reg:disabled { 
    background-color: var(--pangea-blue-60);
}
.error_reg{
    font-size: 12px;
    margin: 4px 8px;
    color: var(--adv-orange);
    font-weight: 500;
}
.footer_reg{
    color: var(--pangea-blue-60);
    text-align: center;
    margin:  30px 0 ;
}
.footer_reg_code{
    margin: 8px auto;
    font-size: 14px;
    display: inline-block;
    width: 100%;
}

.footer_reg > a{
    color: var(--pangea-blue);
}

.header_reg{
    margin: 0 0 30px 0;
    color: var(--pangea-blue);
    /* color: var(--white); */
    font-size: 14px;
    display: flex;
    align-self: center;
    gap: 8px;
    /* background-color: var(--gray); */

    box-shadow: 0 0 10px var(--gray);
    border: 1px solid var(--gray-line);
    margin: -16px -16px 40px -16px;
    padding: 20px 24px;
    /* border-radius: 0 0 12px 12px; */
}








.header{
    /* border: 1px solid var(--adv-orange); */
    margin: -16px -16px 20px -16px ;
    position: fixed;
    max-width: 420px;
    padding: 16px 20px;
    width: calc(100%  );
    display:flex;
    box-sizing: border-box;
    justify-content:space-between;
    align-items:center;
    background-color: var(--white);

    box-shadow: 0 0 10px var(--gray);
    border: 1px solid var(--gray-line);
    z-index: 2;
}
.header_filler{
    height: 66px;
}
.header_filler_other{
    height: 56px;
}
.header > .url{
    font-size: 14px;
    color: var(--pangea-blue);
    display: flex;
    align-items: center;
    text-decoration: none;
    gap: 10px;
    max-width: 130px;
}
.header > .url > a{
    display: flex;
    align-items: center;
    justify-content: center;
}
.header > .url > a >svg{
    fill: var(--pangea-blue-60);
}


.header_top_header{
    font-size: 18px;
    font-weight: 700;
    color: var(--pangea-blue);
}

.header_top_header_just{
    font-size: 14px;
    font-weight: 500;
    color: var(--pangea-blue);
    text-align: center;
    width: 100%;
    box-sizing: border-box;

}
.header_public_cname{
    font-size: 14px;
    font-weight: 500;
    color: var(--pangea-blue);
    text-align: right;
    width: 150px;
    box-sizing: border-box;
}

.button_save_top{
    border: none;
    outline: none;
    background-color: var(--blue);
    border-radius: 8px;
    color: var(--white);
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    padding:6px 12px;
}
.bg-preview, .avatar-preview{
    width:100%;
    display:block;
    object-fit:cover;
    object-position: center;
}
.bg-preview{
    border-radius: 8px;
}
.bg-preview-public{
    box-sizing: border-box;
    border-radius: 0 0 16px 16px;
    margin: -16px -16px  0 -16px ;
    width:calc(100% + 32px);
    height:220px;
    object-fit:cover;
    object-position: center;
}
.bg-preview-public-tour{
    height: 230px;
    margin: -22px -16px  0 -16px ;
}
.avatar-preview{width:120px;height:120px;border-radius:50%;margin: -60px auto 10px; border:3px solid white;}


.btn-file{
    display: block;
    font-size: 14px;
    font-weight: 500;
    background-color: var(--gray-button);
    color: var(--blue);
    padding: 12px;
    border-radius: 8px;
    border: none;
    outline: none;
    margin: 0 0 12px 0;
    text-align: center;

}
.button_copy_tg{

    display: block;
    font-size: 14px;
    font-weight: 500;
    background-color: var(--gray-button);
    color: var(--blue);
    padding: 8px;
    border-radius: 8px;
    border: none;
    outline: none;
    margin: 12px 0 12px 0;
    width: 100%;
}
.field{
    margin: 14px 0 14px 0 ;
}
.field > label{
    margin: 4px;
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--pangea-blue-60);
}

.note_tg{
    font-size: 14px;
    color: var(--pangea-blue-60);
    margin: 8px;
}
.note_txt_edit{

    font-size: 12px;
    font-weight: 400;
    color: var(--pangea-blue-50);
    margin: 0 0 8px 0;
}
.section_tg_edit{
    margin: 40px 0;
}
.link_button_tg_bot{
    background-color: var(--social-tg);
    border-radius: 8px;
    padding: 8px;
    text-align: center;
    width: calc(100% - 16px);
    display: block;
    color: var(--white);
    text-decoration: none;
    font-size: 14px;
    margin: 16px 0  0 0;
}
.red_dot_reqiured{
    color: var(--orange);
}
.h3_profile{
margin: 32px 0 4px 0;
color: var(--pangea-blue);
}


.profile_edit_inputs{
    font-family: 'Inter',sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--pangea-blue);
    width: 100%;
    padding: 8px 12px;
    box-sizing: border-box;
    border: 1px solid var(--gray-line);
    border-radius: 8px;
    outline: none;
}
.profile_edit_inputs_clients{
    width: 100%;
    box-sizing: border-box;
}
.profile_edit_inputs::placeholder{
    color: var(--pangea-blue-60);
}
.profile_edit_inputs_mt{
    padding: 8px;
}
.profile_edit_inputs_out{
    display: flex;
    align-items: center;
    padding: 0;
}
.profile_edit_inputs_out > span{
    padding: 8px 0 8px 12px;
    color: var(--pangea-blue-60);
    color: var(--pangea-blue-60);
    font-weight: 300;
}
.profile_edit_inputs_out > input{
    padding: 8px 12px 8px 4px;
    outline: none;
    border: none;
    font-family: 'Inter',sans-serif;
    font-size: 14px;
    font-weight: 500;
    width: 100%;
    box-sizing: border-box;
    border-radius: 8px;
}
.profile_edit_inputs_out > input::placeholder{
    color: var(--pangea-blue-60);
}

.profile_companyname{
    font-size: 20px;
    font-weight: 700;
    color: var(--pangea-blue);
    text-align: center;
    margin: 20px 0 0 0 ;
}
.url_under_cn_cont{
    display: flex   ;
    justify-content: center;
    margin: 12px 0 0 0;
}
.url_under_cn{
    font-size: 13px;
    font-weight: 500;
    padding: 6px 9px 6px 8px;
    display: flex;
    align-items: center;
    color: var(--blue);
    gap: 6px;
    margin: 0 auto;
    border: 1px solid var(--gray-line);
    border-radius: 8px;
    background-color: #e8f4fb;
    cursor: pointer;
}
.url_under_cn > svg{
    width: 12px;
    height: 12px;
}
.profile_descr{
    color: var(--pangea-blue-60);
    /* border: 1px solid var(--gray-line); */
    /* padding: 8px 12px; */
    /* border-radius: 8px; */
    font-size: 14px;
    margin: 20px 0;
    word-break: break-word;
}

.hr_nice{
    height: 1px;
    border: none;
    width: 100%;
    margin: 16px auto;
    background-color: var(--gray-line);
}
.hr_nice_public_tour_cont{
    margin: 4px 0 12px 0;
}
.hr_nice_small{
    margin: 8px auto;
    width: calc(100% - 12px);
}

.logout_btn{
    width: 100%;
    background-color: var(--red);
    color: var(--white);
    padding: 8px;
    border-radius: 8px;
    border: none;
    outline: none;
    cursor: pointer;
}
.btndelete-tour {
    box-sizing: border-box;
    text-align: center;
    font-size: 14px;
}
.profile_links{
    display: flex;
    flex-direction: column;
    gap: 16px;


}
.profile_link_a{
    box-sizing: border-box;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    color: var(--white);
    font-size: 14px;
    font-weight: 500;
}
.pla_link_wa{
    /* background:linear-gradient(45deg, #24c860, #00E676); */
    background: #e7f7ed;
    color: #1dc259;
}
.pla_link_ig{
    /* background:linear-gradient(45deg, #f9ce34, #ee2a7b, #6228d7); */
    background: var(--background-page-new);
    background-color: #fbf3f7;
    color: #C13584;
}
.pla_link_tg{
    /* background-color: var(--social-tg); */
    background: #e8f4fb;
    color: #0088cc;
}
.pla_link_tt{
    /* background:linear-gradient(45deg, #FE2C55, #25F4EE); */
    background: var(--background-page-new);
    /* background-color: #f9f9f9; */
    color: #000000;
}
.nav-bar-footer{
    position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      background: #fff;
      border-top: 1px solid var(--gray-line);
      box-shadow: 0 0 10px var(--gray-button);
      z-index: 1;
}
.nbf-cont{
    max-width:420px;
    margin:0 auto;
    display:flex;
    padding: 8px 8px 12px 8px;
}

.nbf-item{
    flex:1;
    text-align:center;
    padding:8px;
    color: var(--pangea-blue-60);
    text-decoration:none;
    font-size:10px;
    font-weight: 500;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.nbf-item > svg{
    fill: var(--pangea-blue-60);
    width: 18px;
    height: 18px;

}

.btn-create-mytours{
    display:block; 
    width:100%;
     text-align:center;
      padding:12px;
      background: var(--blue);
      color:#fff;
      text-decoration:none;
      border-radius:8px;
      box-sizing: border-box;
    margin: 0 0 20px 0;
    font-size: 14px;
}

.input_top_header{

    margin: 4px 8px;
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--pangea-blue-60);

}
.msg_notours{
    font-size: 14px;
    margin: 20% 0;
    color: var(--pangea-blue-60);
    text-align: center;
}


.tour{
    border: 1px solid var(--gray-line);
    border-radius: 14px;
    padding: 8px;
    margin: 0 0  16px 0;
}

.tour > img{
    border-radius: 6px;
    width: 100%;
    max-height: 230px;
    height: auto;
    object-fit:cover;
    object-position: center;
}
.t_name{
    font-size: 16px;
    font-weight: 700;
    color: var(--pangea-blue);
    word-break: break-word;
    padding: 8px 4px;
}
.t_info{

    font-size: 14px;
    font-weight: 400;
    color: var(--pangea-blue-60);
    word-break: break-word;
    padding: 0 4px 0 4px;
}
.t_links_see{

    display: block;
    font-size: 12px;
    font-weight: 500;
    background-color: var(--gray-button);
    color: var(--blue);
    padding: 8px;
    border-radius: 6px;
    border: none;
    outline: none;
    margin: 0 0 12px 0 ;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
.t_links_see_public{
    /* width: calc(100% - 16px); */
    /* margin: 0 8px 8px 8px; */
    margin: 0;
}
.t_dates{
    font-size: 14px;
    font-weight: 500;
    color: var(--pangea-blue-60);
    padding: 0 4px ;
}
.hr_nice_n{

    margin: 8px auto;
}
.t_btn_edit{
    width: 100%;
    font-size: 13px;
    font-weight: 500;
    color: var(--white);
    box-sizing: border-box;
    background-color: var(--green);
    display: block;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 6px;
    margin: 8px 0 0 0;
}
.t_warning{

    font-size: 12px;
    margin: 4px ;
    color: var(--adv-orange);
    font-weight: 500;
}

.calendar-header{
    display:flex;
    justify-content:space-between;
    align-content:center;
    margin: 16px 0 4px 0;
}
.calendar-header > button{
    background:none;
    border:none;
    font-size:20px;
    cursor:pointer;
}
.calendar-header > button > svg{
    width: 20px;
    height: 20px;
    fill: var(--pangea-blue-60);
}
.calendar-header > .month-name{
    font-size: 14px;
    font-weight: 500;
    color: var(--pangea-blue-60);
}
.calendar-weekdays {
    display:grid;
    grid-template-columns:repeat(7,1fr);
    background-color: var(--gray);
    text-align:center;
    border-radius: 6px;
}
.calendar-weekdays > .weekday {
    padding:8px 0;
    font-weight: 600;
    font-size: 14px;
    color: var(--pangea-blue);
}
.calendar-container{
    margin-top:8px;
}

.calendar {
    display:grid;
    grid-template-columns:repeat(7,1fr);
    /* gap: 4px; */
    margin: 2px 0 0 0;
}
.calendar .day {
    padding:8px;
    margin: 2px;
    text-align:center;
    box-sizing:border-box;
    cursor:pointer;
    font-size: 14px;
    color: var(--pangea-blue);
    font-weight: 500;
    border-radius:6px;
}
.calendar .day.past {
    color: var(--pangea-blue-50);
    cursor:not-allowed;
    opacity: 0.5;
}
.calendar .day.selected {
    background:var(--blue);
    color:var(--white);
}

.preview-img{
    width:100%;
    border-radius:6px;
    margin: 8px 0 16px 0;
    display:block;
    max-height: 230px;
    height: auto;
    object-fit: cover;
    object-position: center;
}
.gallery{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:8px;
    margin: 8px 0 16px 0;
}
.gallery-item{
    position:relative;
}
.gallery-item img{
    width:100%;
    border-radius:6px;
}

.ts_header{
    font-weight: 700;
    font-size: 18px;
    color: var(--pangea-blue);
    margin: 0 16px 12px 12px;
}

.tours-section{
    margin: 30px 0;
}


.tours-grid {
    display: grid;
    grid-template-columns:  1fr;
    gap: 16px;
  }
  .tour-card {
    display: block;
    border: 1px solid var(--gray-line);
    border-radius: 14px;
    padding: 8px;
    overflow: hidden;
    text-decoration: none;
    cursor: pointer;

  }
  
  .tour-preview {


    border-radius: 6px;
    width: 100%;
    max-height: 230px;
    height: auto;
    object-fit: cover;
    object-position: center;
  }
  .tour-name{

    font-size: 16px;
    font-weight: 700;
    color: var(--pangea-blue);
    word-break: break-word;

    /* padding: 2px 2px 8px 6px; */
    padding: 8px 4px 0 4px;
  }
  .tour-info-cont{
    padding: 8px 4px;
  }
  .tour-info {
    
    font-size: 14px;
    font-weight: 400;
    color: var(--pangea-blue-60);
    word-break: break-word;
    padding: 0 0 0 0;
    line-height: 1.3;

  }
  .tour-info h3 {
    margin: 0 0 6px;
    font-size: 16px;
  }


  .powered_by{
    font-size: 14px;
    text-align: center;
    margin: 0 auto 16px auto;
    display: block;
    color: var(--pangea-blue-60);
  }

.tour-name-main{
    word-break: break-word;
    font-size: 20px;
    font-weight: 700;
    color: var(--pangea-blue);
    margin: 30px 0 0 0;
}


.organizer { 
    display:flex;
    align-items:center;
    margin: 20px 0 0 0;
    text-decoration: none;
}
.organizer >img { 
    width:40px;
    height:40px;
    border-radius:50%;
    margin-right:10px;
    object-fit: cover;
    object-position: center;
 }

.org_info{
    font-size: 14px;
    font-weight: 500;
    color: var(--pangea-blue);
}
.org_info_info{

    font-size: 12px;
    font-weight: 400;
    color: var(--pangea-blue-60);
}
.description_tour_public{

    color: var(--pangea-blue-60);
    /* border: 1px solid var(--gray-line); */
    /* padding: 8px 12px; */
    /* border-radius: 8px; */
    font-size: 14px;
    font-weight: 400;
    margin: 0px 0;
    word-break: break-word;
}
.description_info{

    color: var(--pangea-blue-60);
    /* border: 1px solid var(--gray-line); */
    /* padding: 8px 12px; */
    /* border-radius: 8px; */
    font-size: 14px;
    font-weight: 400;
    margin: 0px 0;
    line-height: 1.3;
}
.ts_header-tour{

    margin: 24px 16px 12px 0;
}

.slider {
     display:flex; 
    flex-direction:row;
    /* background-color: yellow; */
    gap:12px;
    overflow-x: auto;
    margin: 0 -16px;
    padding: 0 8px 4px 8px;

 }
/* width */
.slider::-webkit-scrollbar {
    height: 10px;
  }
  
  /* Track */
  .slider::-webkit-scrollbar-track {
    background: transparent;
    margin: 0 16px;
  }
  
  /* Handle */
  .slider::-webkit-scrollbar-thumb {
    background: #d5e3eb;
    border: 2px solid var(--white);
    border-radius: 10px;
  }
.slider > img {
     height:300px;
     width: auto;
     border-radius:8px;
     flex-shrink:0;
 }

.fm_month_name{
    font-size: 16px;
    font-weight: 600;
    color: var(--pangea-blue-60);
    text-transform: capitalize;
}
.dates-month{
    margin: 0 0 8px 0;
}
.dates-month > span {
    display:inline-block; 
    margin: 4px 0 0 0;
    padding:4px 8px; 
    background:var(--gray); 
    border-radius:4px; 
    font-size:12px;
    font-weight: 500;
    color: var(--blue);
}


  /* модальный фон */
  .modal-backdrop {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6);
    z-index: 3;
  }
  /* само окно */
  .modal-window {
    display: none;
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: var(--white);
    padding: 16px;
    border-radius: 12px;
    width: 100%;
    max-width: 420px;
    box-sizing: border-box;
    z-index: 4;
    /* box-shadow: 0 2px 10px rgba(0,0,0,0.3); */
  }
.button_form_submit_blue{
    background-color: var(--blue);
    padding: 12px;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    color: var(--white);
    border-radius: 8px;
    border: none;
    outline: none;
    cursor: pointer;
}
.modal_btn_bg{

    position:fixed;
    bottom:0;
    width:100%;
    height: 71px;
    max-width: 420px;
    left:50%;
    transform:translateX(-50%);
    background-color:var(--white);
    /* background-color: yellow; */
    border-radius: 24px 24px 0 0;
    border: 1px solid var(--gray-line);
}
.tour_public_open_modal_btn{
    box-sizing: border-box;
    position:fixed;
    bottom:16px;
    width: calc(100% - 32px);
    left:50%;
    transform:translateX(-50%);
    background:var(--blue);
    color:var(--white);
    padding:12px;
    text-align: center;
    border:none;
    border-radius:12px;
    cursor:pointer;
    z-index:2;
    font-size: 14px;
    font-weight: 500;
    max-width: calc(420px - 32px);
}


.confirm-header {
      font-size: 18px;
      font-weight: 700;
      color: var(--pangea-blue);
     margin: 20px 0 20px 0;
      text-align: center;
    }
    .confirm-note {
      font-size: 14px;
        margin: 0 20px 0 20px;
      text-align: center;
      color: var(--pangea-blue-60);
    }
   
    .btn-verify {

        padding: 12px;
    background-color: var(--pangea-blue);
      color: #fff;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      font-size: 14px;
      width: 100%;
      box-sizing: border-box;
    }
    .btn-verify:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
    .alert-success {
      background: #d4edda;
      color: var(--green);
      padding: 12px;
      border-radius: 8px;
      margin-top: 14px;
      text-align: center;
      font-size: 14px;
      font-weight: 600;
    }
    .alert-error {
      background: #f8dfe1;
      color: var(--orange);
      padding: 12px;
      border-radius: 8px;
      margin-top: 14px;
      text-align: center;
      font-weight: 600;
      font-size: 14px;
    }




.tabs { 
    display:flex;
    overflow-x:auto; 
    gap:8px; 
    margin: 0px -16px 16px -16px;
    padding: 0 16px 4px 16px;
    /* width: 100%; */
 }
.tabs::-webkit-scrollbar {
    display: none;

}


.tab { 
    flex:0 0 auto;
     padding:8px 16px; 
    /* border:1px solid var(--gray-line); */
     border-radius:8px;
     cursor:pointer; 
    white-space:nowrap; 
    font-weight: 500;
    font-size: 14px;
    color: var(--blue);
    background-color: var(--gray);
    outline: none;
}
.tab.active { 
    background:var(--blue); 
    color:#fff;
     /* border-color:var(--blue); */
 }


 .block { 
    /* flex:0 0 300px;  */
    

    display:none; 
    flex-direction: column;
    gap: 8px;
}
 .block.active { display:flex; }

 .info { 
    font-size:12px; 
    margin-bottom:4px; 
    word-break: break-word;
    font-weight: 500;
    color: var(--pangea-blue);


}
 .info > .info_name { 
    display:inline-block; 
    width:80px; 
    font-weight: 400;
    color: var(--pangea-blue-60);
}
.card{
border:1px solid var(--gray-line);
     border-radius:8px; 
    padding:8px;
}
.buttons{
    margin: 8px 0 0 0;
}
.buttons-item-1{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    /* margin:  0 0 8px 0; */
}
.btn-item-sales {
    width: 100%;
    padding: 8px;
    font-size:12px; 
    font-weight: 400;
    border:none; 
    border-radius:6px; 
    cursor:pointer; 
}


.btn-think { background:var(--gray-button); color:var(--blue); }
.btn-delete { background:var(--red); color:var(--white); }
.btn-sold   { background:var(--green); color:var(--white); }

.qty-control-one{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.item-left-qty{
    font-size: 12px;
    color: var(--pangea-blue-60);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.item-left-qty > button{
    border: none;
    outline: none;
    background-color: var(--gray);
    color: var(--blue);
    font-size: 16px;
    font-weight: 500;
    border-radius: 6px;
    width: 30px;
    height: 30px;
}

.nolist_txt{
    margin: 40px 40px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pangea-blue-60);
    font-weight: 400;
    font-size: 14px;
}
.clients-list {
    width:100%;
    border-collapse:collapse;
}

    .clients-list th, .clients-list td {
      padding:6px 12px;
      text-align:left;
      font-size: 12px;
      color: var(--pangea-blue);
    }
    .clients-list td{
        border-bottom:1px solid var(--gray-line);

    }
    .clients-list th {
        color: var(--pangea-blue);
        font-weight: 600;background:var(--gray);
    }
    .cl-thead{
        border-radius: 6px;
        
    }
.month-nav{
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--pangea-blue);
    font-weight: 600;
    font-size: 14px;
}
.month-nav > button{

    border: none;
    outline: none;
    background-color: var(--gray);
    color: var(--blue);
    font-size: 16px;
    font-weight: 500;
    border-radius: 6px;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.month-summary{
    font-size: 14px;
    margin: 12px 0;
    color: var(--pangea-blue-60);
}
.chart{
    display:flex;
    flex-direction:column;
    gap:8px;
}
.chart-row{
    display:flex;
    align-items:center;
    gap:8px;
}
.chart-day{
    width:16px;
    text-align:right;
    font-size:12px;
    font-weight: 600;
    color:var(--pangea-blue-60);
}
.chart-bar{
    flex:1;
    background:#f0f0f0;
    border-radius:4px;
    height:30px;
    position:relative;
    overflow:hidden;
}

.bar-views{
    height:15px;
    background:var(--blue);
    position:absolute;
    top:0;
    left:0;
    display:flex;
    align-items:center;
    padding: 0 4px;
    color:var(--white);
    font-size:10px;
}
.bar-reqs{
    height:15px;
    background:var(--green);
    position:absolute;
    bottom:0;
    left:0;
    display:flex;
    align-items:center;
    padding: 0 4px;
    color:var(--white);
    font-size:10px;
}

.colorshow_stat{
    display: flex;
    gap: 32px;
    margin:  4px 0 16px 0;
}
.css-item{
    display: flex;
    align-items: center;
    font-size: 14px;
    gap: 4px;
    color: var(--pangea-blue-50);
}
.css-cube{
    width: 14px;
    height: 14px;
    background-color: var(--blue);
}
.css-cube-green{
    background-color: var(--green);
}