/* Default light theme */
:root {
    /* --banner-background-color: #fca311; */
    --section-shadow-color: #dbdbdb;
    --timeline-line:#555;
    /* --description_text-color: gray;
    --banner-text-color: #ffffff; */
}
/* Dark theme */
[data-theme="dark"] {
    /* --banner-background-color: #abd1c6; */
    --section-shadow-color: #000000;
    --timeline-line:#a5a9d1;
    /* --description_text-color:#abd1c6;
    --banner-text-color: #41424C; */
}

.content_container {
    position: fixed;
    top:109px;
    bottom: 84px;
    left: 0;
    right: 0;
    width: 100%;
    height: calc(100% - 59px - 50px - 50px - 34px);
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    /* justify-content: center; */
    /* margin-top: 109px; */
    overflow-y: auto;
}
.container {
    float: left;
    overflow: hidden;
    display: grid;
    align-items: center;
    margin: 10px 0px;
    text-align: justify;
    background-color: var(--background-color);
    z-index: 1;

    /* grid-template-columns: 30% 70%;
    grid-template-rows: 72px 108px 72px 72px 126px; */
    font-size: 16px;
    width: 94%;
    min-height: 60px;
    /* height: 450px; */

    border: 1px solid var(--line-border-color);
    border-radius: 18px;
    box-shadow: var(--section-shadow-color) 0px 3px 15px -3px;
    flex-shrink: 0;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    overflow-y: auto;
    /* padding: 10px; */
}
.about_project, .app_install, .about_roadmap, .about_information, .support_us, .contact_with_us, .contact_with_us_line{
    display: flex;
    flex-direction: row;
    margin-left: 10px;
    margin-right: 10px;
    justify-content: space-between;
    align-items: center;
}
.about_project_title, .about_roadmap_title, .app_install_title, .support_us, .contact_with_us_title{
    line-height: 60px;
    /* display: inline; */
}
.app_roadmap, .about_information{
    margin: 10px;
}
.about_project_detailed, .app_install_apple_detailed, .app_install_android_detailed, .about_roadmap_detailed, .about_information_detailed, .contact_with_us_detailed{
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}
.about_project_detailed, .app_install_apple_detailed, .app_install_android_detailed, .about_roadmap_detailed, .about_information_detailed, .contact_with_us_detailed{
    display: none;
}
.expand_button {
    width: 30px;
    height: 30px;
    background: url('/static/images/arrows_sprite.png');
    background-size: 200%;
    background-position: -25px -30px;
    /* display: inline-block; */
    /* border: 1px solid blue; */
}
[data-theme="dark"] .expand_button { /* flip colors for dark mode */
    filter: invert(100%); 
}
.wrap_button, .wrap_button_double{
    width: 30px;
    height: 30px;
    background: url('/static/images/arrows_sprite.png');
    background-size: 200%;
    background-position: -28px -2px;
    
}
.wrap_button{
    display: none;
}
[data-theme="dark"] .wrap_button { /* flip colors for dark mode */
    filter: invert(100%); 
}
.wrap_button_double{
    display: block;
    margin-left: auto;
    margin-right: auto;
}
[data-theme="dark"] .wrap_button_double { /* flip colors for dark mode */
    filter: invert(100%); 
}
.img_about{
    width: 100%;
}
/* .app_install{
    line-height: 60px;
    margin-left: 10px;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
} */
/* .app_install_title{
    line-height: 60px;
    display: inline;
} */
.apple_button, .android_button{
    width: 40px;
    height: 40px;
    /* border: 1px solid greenyellow; */
    display: inline-block;
    
}
.apple_button{
    background-image: url('/static/images/apple.png');
    background-size: 100%;
}
[data-theme="dark"] .apple_button { /* flip colors for dark mode */
    filter: invert(100%); 
}
.android_button{
    background-image: url('/static/images/android.png');
    background-size: 100%;
}
[data-theme="dark"] .android_button { /* flip colors for dark mode */
    filter: invert(100%); 
}
.apple_img{
    width: 100%;
}
.instruction_text{
    /* margin: 10px 0px; */
    text-align: center;
}
/* ############### */
.timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}

.timeline-item, .timeline-item-future {
    display: flex;
    position: relative;
    padding-left: 30px;
    /* height: 100px; */
  /* justify-content: center; */
  align-items: center;
  padding-bottom: 10px;
}

.timeline-item:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 5px; /* center of top dot */
  left: 9px;
  width: 0;
  height: calc(100%); /* adjust this to reach next dot */
  border-left: 2px solid var(--timeline-line);
  /* background-color: var(--timeline-line); */
}
.timeline-item-future:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 5px; /* center of top dot */
  left: 9px;
  width: 0;
  height: calc(100%); /* adjust this to reach next dot */
  border-left: 2px dashed var(--timeline-line);
  /* background-color: var(--timeline-line); */
}

.dot {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 10px;
  height: 10px;
  background-color: var(--timeline-line);
  border-radius: 50%;

}
.timeline_title{
    width: 100%;
    font-weight: bold;
}
.timeline_version_date{
    width: 100%;
    text-align: right;
    font-size: 12px;
    margin-bottom: 5px;
}
.timeline_version{
    /* font-weight: bold; */
    /* font-size: 18px; */
}
.timeline_date{
    justify-content: end;
}
.about_item {
  /* margin-bottom: 30px; */
}
.about_description {
    font-size: 16px;
}
a {
    text-decoration: none;
}
.support_button{
    text-decoration: none;
    color: var(--text-color);
    width: 100%;
    height: 100%;
}
.x_button, .telegram_button, .email_button{
    width: 40px;
    height: 40px;
    /* border: 1px solid greenyellow; */
    display: inline-block;
    
}
.x_button{
    background-image: url('/static/images/x_icon.png');
    background-size: 100%;
}
.email_button{
    background-image: url('/static/images/email.png');
    background-size: 100%;
}
.telegram_button{
    background-image: url('/static/images/telegram.png');
    background-size: 100%;
}
[data-theme="dark"] .x_button { /* flip colors for dark mode */
    filter: invert(100%); 
}
[data-theme="dark"] .email_button { /* flip colors for dark mode */
    filter: invert(100%); 
}
[data-theme="dark"] .telegram_button { /* flip colors for dark mode */
    filter: invert(100%); 
}
.contact_with_us_line{
    margin-top: 10px;
}