body {
  font-family: Open Sans;
  display: block;
}

.upload_button_new {
  border: 2px solid #FFFFFF;
  width:  261px;
  top: 133px;
  left: 1267px;
  padding: 14px 29px 14px 29px;
  gap: 8px;
  border-radius: 10px;
  border: 2px solid #fff;
  opacity: 0px;
  display: flex;
  color: #FFFFFF;
  align-items: center;
  margin-right: 10px;
  justify-content: center;
  cursor: pointer;
  font-family: var(--font-family);
  height: 52px;
}

#timer_value {
  margin-top: 15px;
  margin-bottom: 24px;
}

#timer_value > b{
  color: #F60;
}

.d-none {
  display: none;
}

.save_buttons-text {
  display: flex;
    column-gap: 8px;
    align-items: center;
}
.modal-text {
  color: var(--main-black, #0B2447);
/* main */
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 27px */
}
.full-version {
  /* margin-top: 15px; */
  /* margin-bottom: 15px; */
  margin-left: 0 !important;

  color: #fff;
  width: 176px;
}

.mac_download_text {
  color: rgba(11, 36, 71, 0.63);
  text-align: center;
  font-family: "Open Sans";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 24px */
  cursor: pointer;
  border-radius: 10px;
  border: 1px solid rgba(11, 36, 71, 0.60);
  padding: 12px 28px;
  display: flex;
  column-gap: 8px;
}
.mac_download_text path {
  fill:#0B2447;  
  fill-opacity:0.6;
}
.mac_download_text:hover{
  border: 1px solid #0F70E6;
  color: #0F70E6;

}

.mac_download_text:hover path{

  fill: #0F70E6;
  fill-opacity: 1;
}

.download_buttons {
  display: flex;
  flex-direction: column;
  row-gap: 8px;
}

.full-ver-block {
  gap: 16px;
}
.line {
  height: 1px;
  background: #F60;
  width: 110px;
}

.upload_buttons {
  border-radius: 10px;
  background: #0F70E6;
  padding: 12px 28px;
  display: flex;
  height: 51px;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  color: var(--main-white, #FFF);
  margin-right: 8px;
  gap: 8px;
  cursor: pointer;
}

#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

#loading {
  text-align: center;
  color: white;
}

#loading img {
  width: auto;
  height: auto;
}

#loading p {
  margin-top: 5px;
  font-size: 26px;
}

.upload_buttons:hover {
  background:  #0B54AC
}

.new_photo {
  height: 130px;
  justify-content: center;
}

.drag-label {
  color: var(--main-black, #0B2447);
  text-align: center;

  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 19.5px */
  opacity: 0.7;
}

.main-container {
  /* height: auto; */
  min-width: 100%;
  background: #F2F4F6;
  padding: 4px 20px;
  /* max-height: 718px; */
  /* min-height: 500px; */
  /* justify-content: center; */
  justify-content: flex-end;
  column-gap: 20px;
  overflow-x: hidden;
}

.servise-workspace {
  /* padding: 0 25px; */
  width: 1110px; 
  /* height: 692px; */
  border-radius: 20px;
  background: #FFF;
  /* shad card */
  box-shadow: 0px 0px 48px 0px rgba(11, 36, 71, 0.15);
}

.catalog-items {
  overflow-y: scroll;
  scrollbar-width: thin;
  scrollbar-color: #D0D0D0 #ffffff; /* Цвет скролла: красный на белом фоне */
  
          /* Округление углов */
  border-radius: 10px;
  align-items: self-start !important;

  padding-left: 9px;
}

::-moz-scrollbar-track {

  border-radius: 17px;
}

.catalog-item {
  width: 85px;
  height: 85px;
  flex-shrink: 0;
  border-radius: 17px;
}

.catalog-item:hover {
  border: 2px solid #F60;
}

.catalog  {
  flex-wrap: wrap;
  row-gap: 15px;
  column-gap: 9px;
  padding-bottom: 12px;
  justify-content: space-around;
  padding-right: 9px;

}

.workspace-catalog {
  padding: 25px 25px 25px 16px;
  width: calc(100vw - 223px);
  height: 698px;
  border-radius: 0px 20px 20px 0px;
  background: #FBFBFB;
  align-items: flex-start;
  max-width: 350px;
}

.catalog-item img {
  width: 85px;
  height: auto;
  border-radius: 13px;
}

.workspace-load-zone {
  width: 69%;
  padding: 23px 32px 28px 51px;
  height: auto;
}
.separator {
  min-height: 1px;
  margin-top: 22px;
  margin-bottom: 22px;
  background: #E3E3E3;
  max-width: 274px;
  min-width: 100px;
  width: 274px;
}

.catalog-items::-webkit-scrollbar {
  width: 12px;
}

.catalog-items::-webkit-scrollbar-thumb {
  background-color: #D0D0D0; /* Цвет ползунка скролла */
  border-radius: 17px;
}

.catalog-items::-webkit-scrollbar-track {
  background-color: #ffffff; /* Цвет фона скролла */
}

.catalog-items::-moz-scrollbar {
  width: 12px;
}

/* Стилизация ползунка скроллбара */
.catalog-items::-moz-scrollbar-thumb {
  background-color: #D0D0D0; /* Цвет ползунка скролла */
  border-radius: 17px;
}

/* Стилизация трека скроллбара */
.catalog-items::-moz-scrollbar-track {
  background-color: #888;
  border-radius: 5px;
}

.color-pickers  {
  align-items: flex-start !important;
  column-gap: 9px;
  margin-top: 7px;
}

.catalog-header {
  color: var(--main-black, #0B2447);
  text-align: center;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 27px */
  margin-bottom: 19px;
  gap: 13px;
}
img {
  vertical-align:top;
}
.tooltip {
  position: absolute;
  z-index: 4;
  display: none;
  margin: 0;
  font-family: var(--bs-font-sans-serif);
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  word-spacing: normal;
  white-space: normal;
  line-break: auto;
  font-size: 0.875rem;
  word-wrap: break-word;
  opacity: 1;
}

.tooltip-text {
  position: relative;
  transform: translateY(-36px);
  color: #000;
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 104%;
  font-family: 'RobotoCondensed-Regular';
}

.load-zone-drag-zone {
  border-radius: 10px;
  border: 1.2px dashed rgba(150, 161, 176, 0.50);
  height: calc(100vh - 482px);
  width: 100%;
  justify-content: center;
  margin-bottom: 31px;
  max-height: 700px;
}

#load_zone_svg{
  margin-bottom: 38px;
}

.load-zone-header {
  gap: 20px;
  margin-bottom: 28px;
  padding-left: 15px;
  width: 100%;
  display: flex;
}
.header-block {
  padding: 5px 17px;
}
.header-item {
  display: flex;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%; /* 27px */
  color: #9D9D9D;
  cursor: pointer;
  height: 45px;
  align-items: center;

}

/* .header-block:hover {
  border-bottom: 2px solid #F60;
  
} */

.header-block:hover .header-item{
  color: #FC812F;
  
}

.selected {
  border-bottom: 2px solid #F60;
}

.header-block.selected .header-item {
  color: #F60;
}

.workspace-catalog img {
  cursor: pointer;
}

.selected_theme {
  border: 2px solid var(--gradient-1, #FC6076);
  border-radius: 17px;
  box-shadow: 0px 2px 11px 0px rgba(0, 0, 0, 0.54);
  
}

input[type="color"] {

  opacity: 0;
  transform: translateY(-100%);
  width: 85px;
  height: 85px;
  z-index: -1;

}

.custom-color-picker {
  max-width: 85px;
  max-height: 85px;
  cursor: pointer;
}
.custom-color-picker.selected_theme {
  border-radius: 17px;
}

#choose {
  transform: translate(50%, 105%);
}

#transparent {
  transform: translate(5%,110%);
}

.save_buttons {
  border: 1px solid #0F70E6;
  background: #0F70E6;
  padding: 12px 22px;
  display: flex;
  height: 51px;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  color: #FFF;
  /* margin-bottom: 7px; */
  gap: 8px;
  width: 221px;
  cursor: pointer;
  border-radius: 10px;
}

#download {
  border: 1px solid #0F70E6;        
  /* background: #0F70E6;        */
  padding: 12px 28px;        
  display: flex;        
  height: 51px;       
  justify-content: center;       
  align-items: center;       
  flex-shrink: 0;       
  color: #0F70E6;       
  margin-bottom: 7px;       
  gap: 8px;     
  width: 221px;    
  cursor: pointer;  
  border-radius: 10px; 
}

#download:hover {
  color: #FFF; 
  background: #0F70E6; 
}


.save_buttons:hover {
  /* background:  #0B54AC; */
  
}


#file-upload-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.save_buttons-text {
  font-family: 'Open Sans', sans-serif;
  text-wrap: nowrap;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #A9A9A9;
}

.desktop {
  gap: 5px;
  justify-content: center;
}  

.load-zone-drag-zone img{
  height: 100%;
}

@media only screen and (max-width: 1475px) {


  .main-container  {
    justify-content: flex-start !important;
  }
}



@media only screen and (max-width: 1520px) {

  .servise-workspace {
    width: 1000px;
  }

  .main-container  {
    justify-content: flex-end !important;
  }
 
}

@media only screen and (max-width: 1875px) {


  header .content {
    column-gap: 439px !important;
  }
}

@media only screen and (max-width: 1750px) {


  header .content {
    column-gap: 373px !important;
  }
}

@media only screen and (max-width: 1700px) {


  header .content {
    column-gap: 353px !important;
  }
}

@media only screen and (max-width: 1600px) {


  header .content {
    column-gap: 305px !important;
  }
}

@media only screen and (max-width: 1500px) {


  header .content {
    column-gap: 259px !important;
  }
}

@media only screen and (max-width: 1400px) {


  header .content {
    column-gap: 216px !important;
  }
}

@media only screen and (max-width: 1370px) {
  header .content {
    column-gap: 182px !important;
  }
}

@media only screen and (max-width: 860px) {
  header .content {
    column-gap: 100px !important;
  }
}

@media only screen and (max-width: 770px) {
  header .content {
    column-gap: 50px !important;
  }
}

@media screen and (max-width: 400px) { 
  .download-link-new#download_mac {
    margin-left: 0px;
  }
  header nav { 
    flex-direction: column;
    row-gap: 8px;
  }
}



@media (max-width: 1367px) {
  .servise-workspace {
    width: auto;
  }

  .catalog {
      row-gap: 8px;
      column-gap: 5px;

  }

}

@media screen and (min-width: 1080px) {
  /* .load-zone-drag-zone {
      min-width: 600px;
      max-width: 600px;
  } */


}

@media screen and (max-width: 1080px) {
  /* .load-zone-drag-zone {
      min-width: 600px;
      max-width: 600px;
  } */
  .ftm_side_bar {
    display: none !important;
  }

  .main-container  {
    justify-content: center !important;
  }

}

@media only screen and (max-width: 860px) {
  .header-block {
    padding: 5px 9px !important;;
  }

  .workspace-load-zone {
    
    padding: 23px 15px 28px 15px !important;
    
  }

  .load-zone-header {
    gap: 10px !important;
  }
}

/* @media (max-width: 702px) {  
  .workspace-catalog  {
      width: auto; 
  }
} */

@media (max-width: 783px) {

  /* .catalog-item img, .catalog-item{
    width: auto;
      
  }

  .catalog-item img {
      height: 65px;
  }
  .catalog-item {
      height: auto;
  } */
}

@media (max-width: 641px) {

  .header-block{
      padding: 0 10px;
  }

  .workspace-catalog {
      padding: 25px 5px 12px 5px 
  }

  .workspace-load-zone {
     padding: 20px 1px;
  }

  .separator, .save_buttons  {
      width: calc(85%);
  }
  .workspace-catalog  {
      
  }
  .save_buttons {
      padding: 5px;
  }

  .catalog-items {
      align-items: center !important;
  }

  .catalog-header {
      font-size: 15px;
      align-items: center;
      gap: 0px;
      text-align: start;
  }
  .catalog-header svg{
      width: 100%;
  }
  .main-container {
      height: auto;
      min-height: auto;
  }
  .load-zone-header {
      margin-bottom: 15px;
      padding: 0 7px;
      gap: 17px;    
      align-items: center;
  }

  .servise-workspace {
      padding: 0 5px;
  }

  .header-item{
      font-size: 15px;
  }

  .separator {
      margin-top: 10px;
      margin-bottom: 10px;
  }

}

@media (max-width: 489px) { 

  .workspace-catalog {
    height: calc(100vh - 310px);
  }

  .load-zone-drag-zone {
    height: calc(100vh - 507px);
  }
  .color-pickers {
      flex-direction: column;
      row-gap: 11px;
  }

  #choose {
     transform:  translate(0, 200%)
  }

  #transparent {
      transform: translate(-30%,130%);
  }
  .workspace-catalog  {
      width: auto;
  }

}

@media (max-height: 850px) {
  .main-container {
    padding: 30px 20px;
  }
}

@media (max-height: 750px) {
  .main-container {
    padding: 10px 20px;
  }
}

@media (max-height: 779px) {

  /* .load-zone-drag-zone img {
    height: 100% !important;
      
  } */
  .workspace-catalog {
      padding: 10px 1px;
      /* height: calc(100vh - 226px); */
  }
  .load-zone-drag-zone {
      height: calc(100vh - 400px);
      margin-bottom: 10px;
  }

  .workspace-load-zone {
      padding: 10px 12px;
  }
  .catalog-header {
      margin-bottom: 19px;
  }

  /* .servise-workspace {
      padding: 5px;
  } */
  .separator {
      margin-top: 20px;
      margin-bottom: 20px;
  }
  .new_photo {
      height: 88px;
  }

}

@media (max-height: 650px) {

  .load-zone-drag-zone img {
    /* height: 100% !important; */
      
  }
  .workspace-catalog {
      padding: 10px 1px;
      /* height: 420px; */
  }
  .load-zone-drag-zone {
      /* height: 250px; */
      margin-bottom: 10px;
  }

  .workspace-load-zone {
      padding: 10px 12px;
  }
  .catalog-header {
      margin-bottom: 19px;
  }

  /* .servise-workspace {
      padding: 5px;
  } */
  .separator {
      margin-top: 20px;
      margin-bottom: 20px;
  }
  .new_photo {
      height: 88px;
  }

}


@media (max-height: 551px) {

  .save_buttons {
      height: 30px;
  }
  .workspace-catalog {
      /* height: 333px; */
  }

  .load-zone-drag-zone, .load-zone-header {
      margin-bottom: 3px;
  }
  .load-zone-drag-zone {
      height: calc(100vh - 356px);
  }
  

}

@media (max-height: 482px) {


  .workspace-catalog {
      height: 262px; 
  }

  .load-zone-drag-zone {
      height: 124px; 
  }

  .save_buttons{
      font-size: x-small;
  }


}

@media (max-height: 385px) {  
  .load-zone-drag-zone {
      height: 135px; 
  }
}