/* From Freelancer bootstrap*/

:root,
[data-bs-theme=light] {
--bs-teal: #1abc9c;
  --bs-primary: #1abc9c;	
  --bs-secondary: #2c3e50;
   --bs-primary-rgb: 26, 188, 156;	
  --bs-secondary-rgb: 44, 62, 80;
    --bs-body-color-rgb: 33, 37, 41;	
  --bs-body-bg-rgb: 255, 255, 255;	
  --bs-font-sans-serif: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.masthead .masthead-heading
 {
	 font-size: 3rem !important; 
}

.right-text {
    direction: rtl;
}

.reverse-order {
    display: flex;
    flex-direction: column-reverse;
}

.reverse-order > div {
    display: flex;
    flex-direction: column-reverse;
}

.reverse-order > div > div {
    display: flex;
    flex-direction: column-reverse;
}

.reverse-order > div > div > div {
    display: flex;
    flex-direction: column-reverse;
}

.reverse-order > div > div > div > div {
    display: flex;
    flex-direction: column-reverse;
}

[data-theme="dark"] {
  background-color: #111 !important;
  color: #eee;
}

[data-theme="dark"] .bg-black {
  background-color: #fff !important;
}

[data-theme="dark"] .bg-dark {
  background-color: #eee !important;
}

[data-theme="dark"] .bg-light {
  background-color: #222 !important;
}

[data-theme="dark"] .bg-white {
  background-color: #000 !important;
}

[data-theme="dark"] .bg-primary {
    background-color: #136857  !important;
	}

[data-theme="dark"] .btn-primary {
    background-color: #025242;
    border-color: #5a6a67;
}

[data-theme="dark"] .modal-content {
    background-color: #000;
}

[data-theme="dark"] container a {
    color: #09967a;
}

[data-theme="dark"] .searchinputdiv input {
    background: #e4e4e4;
    border-color: #6e6969;
}

.menu-icon {
  font-size: 2em; 
}

[data-theme="light"] .menu-icon {
  color: var(--bs-primary); 
}

[data-theme="dark"] .menu-icon  {
  color: #136857 ;
}

.regular-star {
  /* bunch of pretty styles, oh wow */
  &::after {
    content: url('/assets/svg/regular-star.svg');
  }
}

.solid-star {
  /* bunch of pretty styles, oh wow */
  &::after {
    content: url('/assets/svg/solid-star.svg');

  }
}

.tooltip-inner {
    text-align: left;
}


.ref {
display: none;  
}
.common-size-icon {
  margin-top: 3px; 
  height: 24px;
  width: 30px;
}

#countdown, #pause, #resume, #refreshLink {
    display: inline-block;
    margin-right: 2px;
}

.countdown-icon {
  height: 22px; 
  width: 22px;
}
.common-size-icon3 {
  margin-top: 3px; 
  height: 22px; 
  width: 22px;
}

.gray-icon {
  color: #989898;
  fill: #989898;
}


#scrollToTopBtn {
    border-radius: 15px;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 100;
  opacity: 0.6;
}


html.dark #scrollToTopBtn #arrowImg,
body.dark #scrollToTopBtn #arrowImg,
body[data-theme="dark"] #scrollToTopBtn #arrowImg {
  filter: invert(1);
}

.form-check-inline {
 margin-right: 0rem !important; 
}

.toggle-button {
	 margin-right: 0.5rem !important;
}



.svgarrow {
  color: #D5D5D5;
}

#arrowImg {
margin-top: -10px; 
  margin-left: -3px; 
  margin-right: -3px; 
  margin-bottom: -3px;
  width: 15px;
  color: #D5D6D5;
}

.table-home-icon {
  margin-top: -3px; 
  margin-left: -3px; 
  margin-right: -3px; 
  height: 16px;
  width: 21px;
}

.table-theme-icon {
  margin-top: -3px; 
  height: 15px;
  width: 15px;
}



.home-svg-icon::before {
  content: url('/assets/svg/home-icon.svg');
}

#darkSwitch {
  transform-origin: center;
transform: rotate(180deg);
}

.tooltip-inner {
  max-width: 400px; /* Максимальная ширина */
 }


	hr {	
  background-color: currentColor;	
}
hr:not([size]) {	
  height: 0.125rem;	
}	

h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {	
 
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";	
  font-weight: 700;	
}

	abbr[title],	
abbr[data-bs-original-title] {	
  -webkit-text-decoration: underline dotted;	
          text-decoration: underline dotted;	
  cursor: help;	
  -webkit-text-decoration-skip-ink: none;	
          text-decoration-skip-ink: none;	
}

	mark, .mark {	
  padding: 0.2em;	
  background-color: #fcf8e3;	
}

a.onmanin {
  color: #1abc9c;
  text-decoration: underline;
}

a.onmanin:hover {
  color: #15967d;
}
	pre,	
code,	
kbd,	
samp {	
  
  direction: ltr /* rtl:ignore */;	
  unicode-bidi: bidi-override;	
}

code {	
  color: #d63384;	
}

	kbd {	
  padding: 0.2rem 0.4rem;	
  color: #fff;	
  background-color: #212529;	
}	
kbd kbd {	
  font-weight: 700;	
}

caption {		
  color: #6c757d;	
}

	[list]::-webkit-calendar-picker-indicator {	
  display: none;	
}


/* star intead of checkbox for history*/
label {
            display: inline-block;
            position: relative;
            font-size: 20px;
            cursor: pointer;
        }

        label input[type="checkbox"] {
            display: none;
        }

        .custom-checkbox .glyphicon {
            color: gray;
            font-size: 1em;
            position: absolute;
            top: 0;
            left: 0;
        }

        .custom-checkbox input[type="checkbox"]:checked + .glyphicon {
            color: gold;
        }

/* star intead of checkbox for history end */


.img-thumbnail {	
  background-color: #fff;	
  border: 0.125rem solid #dee2e6;	
  border-radius: 0.5rem;	
}
	
.figure-caption {	
  color: #6c757d;	
}

	.container,	
.container-fluid,	
.container-xxl,	
.container-xl,	
.container-lg,	
.container-md,	
.container-sm {	
  padding-right: var(--bs-gutter-x, 0.75rem);	
  padding-left: var(--bs-gutter-x, 0.75rem);	
}

	.form-text {	

  color: #6c757d;	
}

.form-control {	
 /* color: #212529;	
  background-color: #fff;	
  border: 0.125rem solid #ced4da;	*/
  -webkit-appearance: none;	
     -moz-appearance: none;	
          appearance: none;	
  border-radius: 0.5rem;	
}

/*.toggle-switch {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 1000;
} */
#mainNav .navbar-brand {
  color: #fff;
}

#mainNav {
  padding-top: 1rem;
  padding-bottom: 1rem;
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-weight: 700;
}
#mainNav .navbar-brand {
  color: #fff;
}
#mainNav .navbar-nav {
  margin-top: 1rem;
}
#mainNav .navbar-nav li.nav-item a.nav-link {
  color: #fff;
}
#mainNav .navbar-nav li.nav-item a.nav-link:hover {
  color: #1abc9c;
}
#mainNav .navbar-nav li.nav-item a.nav-link:active, #mainNav .navbar-nav li.nav-item a.nav-link:focus {
  color: #fff;
}
#mainNav .navbar-nav li.nav-item a.nav-link.active {
  color: #1abc9c;
}
#mainNav .navbar-toggler {
  font-size: 80%;
  padding: 0.8rem;
}

/* Скрываем на мобильных */
@media (max-width: 1423px) {
    .hideOnMobile {
        display: none;
    }
    .hideOnMobile .divider-custom {
        display: none;
    }
}

@media (min-width: 1424px) {
  
    .hideOnMobile {
        display: block;
    }
    .hideOnMobile .divider-custom {
        display: block;
    }
}

@media (min-width: 992px) {
  

  #mainNav {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    transition: padding-top 0.3s, padding-bottom 0.3s;
  }
  #mainNav .navbar-brand {
    font-size: 1.75em;
    transition: font-size 0.3s;
  }
}
/*end of freelancer css */
 
.visually-hidden {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

#clearbtn {
  position: absolute;
  top: 53%;
  right: 3px;
  transform: translateY(-50%);
  font-size: 12px;
  transition: background-color 0.3s;
   /*   background-color: Transparent;
   color: blue;
  color: Transparent;
Добавляем плавный переход для изменения цвета фона */
}

#clearbtn .fas.fa-times {
  background: #254678;
background: linear-gradient(to top, #254678 0%, #3F74B8 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}


#clearbtn:hover .fas.fa-times {
  color: blue; /* Устанавливаем желаемый цвет иконки при наведении мыши */
}

.mainbutton {
  /*position: absolute; 
  right :35px; */
  z-index:999;
}

.searchinput {
  z-index: 9; 
  width: 100%;
}

.searchinputdiv {
	position: relative; 
	flex-grow: 1;
}

.searchbar {
  z-index:1;
}

/* .horiz-menu-item {
 color: #383838;
} */




    .level1 {
      margin-left: 0px;
      color: #3F424B;
    }

    .level2 {
      margin-left: 8px;
   /*  color: #3F424B; */
    }

    .level3 {
      margin-left: 13px;
      color: #3F424B;
    }

    .level4 {
      margin-left: 18px;
     /*  color: #3F424B;*/
    }

    .level5 {
      margin-left: 20px;
    }
	
	.btn-fixed-width {
  width: 30px; /* Замените на желаемую фиксированную ширину */
}

  .btn-rotate {
    transition: transform 0.3s ease;
  }

  .btn-rotate.rotate {
    transform: rotate(180deg);
  }

::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.9);
-webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,0.10),inset 0 -1px 0 rgba(0,0,0,0.07); }

.autopali-dropdown-item {
    display: flex;
    align-items: center;
}

.autocomplete-history-icon {
    width: 14px;
    height: 14px;
    margin-right: 8px;
    opacity: 0.6;
}


.ui-autocomplete { 
max-height: 220px; 
min-height: 38px;
overflow-y: auto; 
overflow-x: hidden;
scrollbar-color: #5fbaa8 #10806A;
border-radius: 1rem;
max-width: 274px;
align-items: center;
}

.ui-autocomplete2 { 
max-height: 220px; 
min-height: 38px;
overflow-y: auto; 
overflow-x: hidden;
scrollbar-color: #5fbaa8 #10806A;
border-radius: 1rem;
max-width: 474px;
align-items: center;
}

.droponmain {
  height: 32px;
  padding: 3px 3px 3px 3px;
  background-color: #fff;
  background-clip: padding-box;
  border: 0.125rem solid #ced4da;
}


[data-theme="dark"] .droponmain {
    background: #e4e4e4;
    border-color: #6e6969; 
	border: 0.125rem solid #6e6969;
}

[data-theme="dark"] .border-primary {
    border-color: #6e6969 !important;
}


.roundedborder{
  position: absolute; 
  right :35px; 
  z-index:999999;
}
/*
.outlink {
  color:#0d6efd;
}
*/
/* Container holding the image and the text */
.imgcontainer {
  position: relative;
  text-align: center;
  color: white;
}

/* Centered text */
.centered {
  position: absolute;
  top: 15px;
  left: 15px;
  
}




.btn-primary {
  color: #fff;
  background-color: #16a085;
  border-color: #1abc9c;
}

	.form-check-input:active {
  filter: brightness(40%);
}

.form-check-input:focus {
  border-color: #8ddece;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(26, 188, 156, 0.25);
}

.form-check-input:checked {
  background-color: #16a085;
  border-color: #1abc9c; 
}


#mainNav .navbar-nav {
    margin-top: 0;
    text-align: center;
    white-space: nowrap;
}
 
.page-section {
    padding: 2rem 0 !important;
}

.masthead { 
	padding-bottom: 2rem;
	}

 @keyframes wheelHueColor {
    from, to { color: rgb(255,255,255); } 
    10%      { color: rgb(0,0,255); }
    35%      { color: rgb(255,255,0); }
    70%      { color: rgb(255,0,0); }
    90%      { color: rgb(255,255,255); }
}

.example:hover {
    color: rgb(255,255,255);
    animation: wheelHueColor 40s infinite;
    cursor: pointer;
    
}
.example {
  transition: 4s;
  transition: background-color 4s ease-out;
}
  
.lock:hover .icon-unlock,
.lock .icon-lock {
    display: none;
}
.lock:hover .icon-lock {
    display: inline;
}

.lock:hover .icon-lock .bigger {
   font-size: 200px;
}

.storeimg {
  width: 200px;
}


.imgonmain {
  width: 350px;  
/*    max-width: 95%; */
}

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

#mainNav .navbar-toggler {
    margin-right: 2rem;  
}

#mainNav .navbar-nav {
	margin-top: 1.5rem;
	text-align: left;	
	}

.h5mobile {
	font-size: 0.8rem;	
}

    .masthead { 
    padding-top: calc(1rem + 20px);
	}
	


.divider-custom {
    margin: 0.5rem 0 1.2rem ;
}



.divider-custom {
    margin: 0.5rem 0 1.2rem ;
}

  
  .mobile-none {
	  display:none;	  
  }

.mobile-center {
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  
}

video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }

.video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


.sidebar-social {
    margin: 0;
    padding: 0;
}

.sidebar-social ul {
    margin: 0;
    padding: 5px;
}

.sidebar-social li {
	  text-align: center;
    width: 31.9%;
    margin-bottom: 3px!important;
    background-color: #fff;
    border: 1px solid #eee;
    display: inline-block;
    font-size: 10px;
    padding:0;
}

.sidebar-social i {
  display: block;
  margin: 0 auto 10px auto;
	width: 32px;
    height: 32px;
    margin: 10px auto 0;
    line-height: 32px;
    text-align: center;
    font-size: 20px;
    color: #444444;
  margin-top:0;
  padding-top:5px;
}
.sidebar-social a{
  text-decoration:none;
  width:100%;
  height:100%;
  display:block;
  margin:0;
  padding:0;
}

.sidebar-social a span{
  color:black;
  font-size:10px;
  padding:5px 0 10px 0;
  display:block;
  text-transform:uppercase;
  font-family:'Josefin Sans';
  letter-spacing:1px;
}

}

@media (max-width: 768px) {
 
     .hideOnMobile {
        display: none;
    }
    .hideOnMobile .divider-custom {
        display: none;
    }
 
 
.imgonmain {
    max-width: 95%;
  }
   
   
       .level2 {
      margin-left: 0px;

    }
     .level3 {
      margin-left: 4px;

    }

    .level4 {
      margin-left: 8px;
     /* color: #3F424B;*/
    }

    .level5 {
      margin-left: 0px;
    }
	  
   
   
}


#pali p span {
  word-break: break-word;
        overflow-wrap: break-word;
}

.resultheader {
  word-break: break-word;
  overflow-wrap: break-word;
}



.fdgLink {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.fdgLink::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -2px;
    bottom: -2px;
    background-color: transparent;
    transition: 
        background-color 0.5s ease-out,
        box-shadow 0.5s ease-out,
        opacity 0.5s ease-out,
        top 0.3s ease-out,
        bottom 0.3s ease-out,
        left 0.3s ease-out,
        right 0.3s ease-out;
    border-radius: 3px;
    opacity: 0;
    pointer-events: none;
}

/* Для десктопов - hover */
@media (hover: hover) {
    .fdgLink:hover::after {
        background-color: rgba(218, 66, 14, 0.6); /* Полупрозрачный вариант */
        top: -1px;
        bottom: -1px;
        left: -1px;
        right: -1px;
        box-shadow: 0 0 4px rgba(218, 66, 14, 0.6);
        opacity: 1;
    }
}

/* Яркое подтверждение при касании */
.fdgLink:active::after {
    background-color: rgba(218, 66, 14, 0.8); /* Полностью непрозрачный */
    box-shadow: 0 0 8px rgba(218, 66, 14, 0.9); /* Ярче свечение */
    top: -2px;
    bottom: -2px;
    left: -2px;
    right: -2px;
    opacity: 1;
    transition: 
        background-color 0.1s ease-out,
        box-shadow 0.1s ease-out,
        top 0.1s ease-out,
        bottom 0.1s ease-out,
        left 0.1s ease-out,
        right 0.1s ease-out; /* Очень быстрое появление */
}

/* Для тач-устройств - фокус после касания */
.fdgLink:focus::after {
    background-color: rgba(218, 66, 14, 0.3);
    top: -3px;
    bottom: -3px;
    left: -3px;
    right: -3px;
    box-shadow: 0 0 4px rgba(218, 66, 14, 0.3);
    opacity: 1;
    outline: none;
    transition-duration: 0.5s; /* Медленное затухание */
}

/* Убираем фокус для мыши */
@media (hover: hover) {
    .fdgLink:focus::after {
        background-color: transparent;
        box-shadow: none;
        opacity: 0;
    }
}


   .bubble-notification {
      position: fixed;
      bottom: 8%;
      left: 50%;
  /*  outline: 2px solid white; */
    box-shadow: 0 0 5px black;
      background: #136857;
      color: white;
      padding: 12px 20px;
      border-radius: 24px;
      font-size: 14px;
      opacity: 0;
      transform: translate(-50%, 20px);
      transition: all 0.3s ease;
      z-index: 10000;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      display: flex;
      align-items: center;
      gap: 8px;
      pointer-events: none;
      max-width: 80%;
      text-align: center;
      white-space: nowrap;
    }
    
    .bubble-notification.show {
      opacity: 1;
      transform: translate(-50%, 0);
    }
    
    .bubble-notification::before {
      content: "";
      font-size: 16px;
    }


/* Цветовые модификаторы */
.bubble-notification.success {
    background: #136857; /* Твой стандартный зеленый */
}

.bubble-notification.error {
    background: #dc322f; /* Красный (Solarized Red) */
}

.bubble-notification.warning {
    background: #cb4b16; /* Оранжевый */
}

.bubble-notification.info {
    background: #268bd2; /* Синий */
}

.bubble-notification.show {
    opacity: 1;
    transform: translate(-50%, 0);
} 

/* Базовые стили баннера */
.pwa-install {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 12px;
  padding: 12px 16px;
  z-index: 100;
  max-width: calc(100% - 32px);
  min-width: 280px;
  width: auto;
  /*  box-sizing: border-box;
  
 Светлая тема по умолчанию */
  background-color: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  
  transition: all 0.3s ease;
  will-change: transform, opacity;
  touch-action: none;
}

/* Темная тема */
.dark-mode .pwa-install,
.bg-dark .pwa-install,
[data-bs-theme="dark"] .pwa-install {
  background-color: var(--bs-secondary);
  border-color: var(--bs-border-color-translucent);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Скрытое состояние */
.pwa-install.hidden {
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(20px);
}

/* Основной контент */
.pwa-install-content {
  display: flex;
  align-items: center;
  flex-grow: 1;
  min-width: 0;
  gap: 12px;
  overflow: hidden;
}

/* Иконка приложения */
.pwa-install .icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background-color: var(--bs-tertiary-bg);
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
}

/* Текстовый блок */
.pwa-install .text {
  min-width: 0;
  flex-grow: 1;
}

.pwa-install .text h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--bs-heading-color);
 
}

.pwa-install .text p {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--bs-secondary-color);
 
}

/* Контейнер кнопок действий */
.pwa-install .actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  align-items: center;
}

/* Общие стили кнопок */
.pwa-install button {
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 20px;
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
  outline: none;
  line-height: 1.2;
}

/* Кнопка установки */
#installBtn {
  background: var(--bs-secondary);
  color: var(--bs-white);
}

#installBtn:hover {
  background: var(--bs-primary);
}

#installBtn:active,
#installBtn:focus {
  background: var(--bs-primary);
  box-shadow: 0 0 0 3px rgba(var(--bs-secondary-rgb), 0.3);
}

/* Кнопка закрытия */
#closePwaBanner {
  background: transparent;
  color: var(--bs-secondary-color);
  padding: 6px;
  font-size: 16px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

#closePwaBanner:hover {
  color: var(--bs-emphasis-color);
  background: var(--bs-tertiary-bg);
}

#closePwaBanner:active,
#closePwaBanner:focus {
  box-shadow: 0 0 0 3px rgba(var(--bs-secondary-color-rgb), 0.2);
}

/* Темная тема для кнопок */
.dark-mode #installBtn,
.bg-dark #installBtn,
[data-bs-theme="dark"] #installBtn {
  background: #136857;
}

.dark-mode #installBtn:hover,
.bg-dark #installBtn:hover,
[data-bs-theme="dark"] #installBtn:hover {
  background: var(--bs-primary);
}

.dark-mode #closePwaBanner,
.bg-dark #closePwaBanner,
[data-bs-theme="dark"] #closePwaBanner {
  color: var(--bs-secondary-color-dark);
}

.dark-mode #closePwaBanner:hover,
.bg-dark #closePwaBanner:hover,
[data-bs-theme="dark"] #closePwaBanner:hover {
  color: var(--bs-emphasis-color-dark);
  background: var(--bs-tertiary-bg-dark);
}

/* Адаптация для мобильных устройств */
@media (max-width: 400px) {
  .pwa-install {
    flex-wrap: wrap;
    padding-bottom: 12px;
  }
  
  .pwa-install-content {
    width: 100%;
    margin-right: 0;
  }
  
  .pwa-install .actions {
    width: 100%;
    justify-content: flex-end;
    order: 2;
  }
  
  #closePwaBanner {
    position: absolute;
    top: 8px;
    right: 8px;
  }
  
  .pwa-install .text h2,
  .pwa-install .text p {
    padding-right: 24px; /* Чтобы текст не заходил под кнопку закрытия */
  }
}

/* Особый случай для очень узких экранов */
@media (max-width: 300px) {
  .pwa-install {
    min-width: auto;
    width: calc(100% - 32px);
  }
  
  .pwa-install .actions {
    flex-direction: column;
    width: 100%;
  }
  
  #installBtn {
    width: 100%;
  }
}


select.text-center {
    text-align: center;          /* Центрирует текст по умолчанию */
    text-align-last: center;     /* Центрирует только выбранный элемент */
}

select.text-center option {
    text-align: left;            /* Опции при раскрытии — по левому краю */
}


.cta-img {
  max-width: 200px !important;
}


/* Основной скроллбар */
::-webkit-scrollbar {
  width: 8px; /* Толщина скроллбара */
  height: 8px; /* Для горизонтального (если нужно) */
}


[data-bs-theme="dark"]
::-webkit-scrollbar {
  background: rgb(38, 38, 38, 0,9); /* Полупрозрачный серый */
  width: 8px; /* Толщина скроллбара */
  height: 8px; /* Для горизонтального (если нужно) */
}


/* Ползунок (thumb) */
::-webkit-scrollbar-thumb {
  background: rgba(100, 100, 100, 0.9); /* Полупрозрачный серый */
  border-radius: 4px; /* Закругление углов */
  transition: background 0.2s ease; /* Плавное изменение цвета */
}

/* Ползунок при наведении */
::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 100, 100, 0.7); /* Становится темнее */
}

/* Ползунок при наведении - темная тема */
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(220, 220, 220, 0.7); /* Ярче при наведении */
}

/* Дорожка (track) */
::-webkit-scrollbar-track {
  background: rgba(240, 240, 240, 0.5); /* Светлая подложка */
  border-radius: 4px; /* Закругление углов */
}

/* Угол скроллбара (если есть горизонтальный и вертикальный) */
::-webkit-scrollbar-corner {
  background: transparent; /* Прозрачный угол */
}


html {
  scrollbar-width: thin; /* "auto" | "thin" | "none" */
  scrollbar-color: rgba(100, 100, 100, 0.5) rgba(240, 240, 240, 0.5); /* thumb track */
}

[data-bs-theme="dark"] html {
  scrollbar-width: thin; /* "auto" | "thin" | "none" */
  scrollbar-color: rgba(38, 38, 38, 0.5) rgba(240, 240, 240, 0.5); /* thumb track */
}


/* Для WebKit (Chrome, Safari, Edge) */
[data-bs-theme="dark"] ::-webkit-scrollbar {
  width: 12px !important;
}

[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #555 !important;
  border-radius: 6px !important;
  border: 2px solid #333 !important;
}

[data-bs-theme="dark"] ::-webkit-scrollbar-track {
  background: #222 !important;
  border-radius: 6px !important;
}

[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: #666 !important;
}

/* Для Firefox */
[data-bs-theme="dark"] {
  scrollbar-width: thin !important;
  scrollbar-color: #555 #222 !important;
}

 input.searchinput-read {
  min-width: 230px !important;
}

@media (max-width: 768px) {
  input.searchinput-read {
    max-width: 230px !important;
  }
}

/* Делаем родительские элементы контекстом для позиционирования */
.pli-lang, .rus-lang, .eng-lang, .variant {
  position: relative;
}

p .quoteLink,
p .quoteLink-start {
    font-size: 1.2em; /* или другой желаемый размер */
}

a.quoteLink::before,
a.quoteLink-start::before {
  content: '✦';
}


.quoteLink {
      opacity: 0;
}

.quoteLink-start {
    position: absolute;
    top: -0.2em;
    left: -1.0em;

    color: inherit;
    opacity: 0;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.3s ease;
}
.quoteLink:hover,
.quoteLink:focus,
.quoteLink-start:hover,
.quoteLink-start:focus {
    opacity: 0.9;
}



#pali td {
    white-space: normal;
    word-break: break-word;
}

#pali tr:not(.child) td:first-child {
    white-space: nowrap;
}

#pali tr:not(.child) td:nth-child(2) {
    white-space: normal !important;
}

/*
#pali td:first-child {
    white-space: nowrap;
}


#pali > tbody > tr > td:first-child:last-child {
  white-space: normal;
}
*/

#settings, #paliLookupInfo{
    z-index: 1060 !important;
}

/*.modal-backdrop {
    z-index: 99999 !important;
}
*/

.quickCAS {
 cursor: pointer; 
 height: 25px; 
 color: grey;
 margin-left: 0.5em;
}


 /* Утилиты для замены инлайн-стилей */
.max-w-450 {
    max-width: 450px;
}
.cursor-pointer {
    cursor: pointer;
}
 
.btn-size-32 {
    width: 32px;
    height: 32px;
    font-weight: bold;
}

.min-w-45 {
    min-width: 45px;
    text-align: center;
}


.quick-overlay-element {
    position: fixed;
    z-index: 2000;
}

.quick-modal-container {
    position: fixed;
    z-index: 2001;
}

.w-100px {
    width: 100px;
}
.h-25px {
    height: 25px;
}
.max-w-300 {
    max-width: 300px;
}

.max-w-600 {
    max-width: 600px;
}
.max-w-650 {
    max-width: 650px;
}
.max-w-992 {
    max-width: 992px;
}


/* Контейнер кнопок справа (Синхронизация, Корзина, Новое окно) */
.quick-actions-right {
    display: flex;
    gap: 2px; /* Минимальное расстояние МЕЖДУ иконками */
    align-items: center;
    margin-left: 5px; /* Отступ слева, чтобы иконки не "прилипали" к вкладкам */
}

/* Настройки самих кнопок внутри этого блока */
.quick-actions-right .action-btn {
    margin-left: 0; /* Убираем лишние отступы, оставляем только gap */
    padding: 0 4px; /* Делаем зону клика комфортной */
}


/* Стили для новой кнопки синхронизации */
.sync-mini-btn {
    padding: 2px 4px;
    font-size: 0.85rem;
    background: transparent;
    border: 1px solid currentColor;
    border-radius: 4px;
    color: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: color 0.2s, border-color 0.2s;
}

.sync-mini-btn:hover {
    color: #859900;
    border-color: #859900;
}


/* Универсальная анимация вращения */
.custom-spin {
    animation: fa-spin 2s infinite linear;
}

@keyframes fa-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/* =========================================
   УНИВЕРСАЛЬНЫЕ ВСПЛЫВАШКИ (Progress Toast / Hints)
   ========================================= */
.dg-bottom-toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    padding: 12px 20px;
    border-radius: 12px;
    font-size: 14px;
    z-index: 10000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 1px solid var(--bs-border-color);
    transition: opacity 0.3s ease, transform 0.3s ease;
    backdrop-filter: blur(5px);
    min-width: 250px;
    max-width: 90vw;
    animation: fadeInUpToast 0.4s ease-out;
}

body.dark .dg-bottom-toast,
[data-theme="dark"] .dg-bottom-toast {
    background-color: rgba(0, 0, 0, 0.9);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

.dg-toast-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    cursor: pointer;
}

.dg-toast-close {
    background: none;
    border: none;
    color: #aaa;
    font-size: 24px;
    padding: 0 0 0 10px;
    line-height: 0.8;
    cursor: pointer;
    transition: color 0.2s;
}

.dg-toast-close:hover {
    color: var(--bs-primary);
}
body.dark .dg-toast-close:hover { color: #fff; }

.dg-toast-cb-label {
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #888;
    cursor: pointer;
    border-top: 1px solid rgba(128,128,128,0.2);
    padding-top: 8px;
    margin: 0;
}

@keyframes fadeInUpToast {
    from { opacity: 0; transform: translate(-50%, 15px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}


/* --- УНИФИЦИРОВАННЫЕ ИКОНКИ ВЕРХНЕЙ ПАНЕЛИ --- */
.top-nav-icon-link {
    cursor: pointer;
    transition: opacity 0.2s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.top-nav-icon-link:hover {
    opacity: 1;
}

.top-nav-icon {
    width: 22px;
    height: 22px;
}



/* =========================================
   QUICK MODAL STYLES (Оптимизировано)
   ========================================= */
.quick-overlay-element {
    position: fixed; top: -20vh; left: -20vw; width: 140vw; height: 140vh;
    z-index: 9999; background-color: rgba(0, 0, 0, 0.7);
    opacity: 0; visibility: hidden; 
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.quick-overlay-element.open {
    opacity: 1; visibility: visible;
}

.quick-modal-container {
    position: fixed; top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    z-index: 10000; opacity: 0; visibility: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    width: 95%; max-width: 600px; max-height: 90vh;
    display: flex; flex-direction: column;
}
.quick-modal-container.open {
    opacity: 1; visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

/* Автоматическая адаптация под тему сайта */
.quick-modal-content-wrapper {
    background-color: #ffffff; color: #212529;
    padding: 1.5rem; width: 100%; border-radius: 1rem;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3); font-family: sans-serif; position: relative;
}
body.dark .quick-modal-content-wrapper {
    background-color: #1a252f; color: #ffffff;
}

/* Кнопка закрытия */
.quick-close-btn {
    position: absolute; top: 12px; right: 12px; background-color: #9e1c19; color: #fff;
    border: none; width: 28px; height: 28px; border-radius: 50%; font-size: 1.1rem;
    font-weight: bold; cursor: pointer; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2); z-index: 10;
}

/* Поиск */
.quick-search-form { display: flex; gap: 8px; margin-bottom: 1rem; margin-top: 10px; padding-right: 3.5rem; }
.quick-search-input {
    flex-grow: 1; border: 1px solid #ccc; background-color: #f8f9fa;
    color: #212529; padding: 10px 14px; border-radius: 20px; font-size: 0.95rem; outline: none;
}
body.dark .quick-search-input { border-color: #444; background-color: #2c3a47; color: #ffffff; }

.quick-search-btn {
    background-color: #025242; color: white; border: none; width: 40px; height: 40px;
    border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* Вкладки */
.quick-tabs-wrapper { 
    display: flex; justify-content: space-between; align-items: center; 
    margin-bottom: 15px; border-bottom: 1px solid #ccc; 
}
body.dark .quick-tabs-wrapper { border-bottom-color: #444; }

.quick-tabs { display: flex; gap: 5px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.quick-tabs::-webkit-scrollbar { display: none; }
.quick-tab-btn { 
    background: none; border: none; color: inherit; 
    padding: 8px 5px; cursor: pointer; opacity: 0.6; font-size: 1.05rem;
    border-bottom: 3px solid transparent; transition: all 0.2s;
}
.quick-tab-btn:hover { opacity: 1; }
.quick-tab-btn.active { opacity: 1; border-bottom: 3px solid #859900; font-weight: bold; }

/* ИЗМЕНЕНО: Добавлены гибкие ограничители высоты (max-height и min), чтобы в пейзаже окно ужималось, а в портрете оставалось 55vh */
.quick-tab-content { display: none; height: 55vh; min-height: min(420px, calc(90vh - 170px)); max-height: calc(90vh - 170px); overflow-y: auto; box-sizing: border-box; }
.quick-tab-content.active { display: block; animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Индивидуальные настройки вкладок */
#tab-fav, #tab-4as { padding-left: 1.5rem; padding-right: 1.5rem; }

/* ИЗМЕНЕНО: Те же гибкие ограничители для iframe, вместо жестких 450px */
#tab-dpd, #tab-memo { padding-left: 0; padding-right: 0; height: 60vh; min-height: min(450px, calc(90vh - 170px)); max-height: calc(90vh - 170px); }
.quick-iframe { width: 100%; height: 100%; border: none; border-radius: 8px; background: transparent; }

/* Списки Истории и Избранного */
/* Избранное: расширяется на всю длину, используя общий скролл вкладки */
#quick-favorites-container { 
    max-height: none !important; 
    overflow: visible !important; 
}

#quick-history-container { max-height: 520px; overflow-y: hidden; padding-right: 5px; }


.header-title { cursor: pointer; transition: color 0.2s; display: flex; align-items: center; }
.header-title::before { content: '▼'; display: inline-block; margin-right: 6px; font-size: 0.75rem; transition: transform 0.2s; }
.header-title.collapsed::before { transform: rotate(-90deg); }

.compact-list { list-style: none; padding: 0; margin: 0; }
.compact-list li { padding: 8px 0; border-bottom: 1px dashed #ccc; display: flex; align-items: center; justify-content: space-between; }
body.dark .compact-list li { border-bottom-color: #444; }
.compact-list li:last-child { border-bottom: none; }
.compact-list a { color: inherit; text-decoration: none; flex-grow: 1; margin: 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.compact-list a:hover { color: #859900; }

.fav-star-icon { color: #f39c12; font-size: 1.4rem; }
.toggle-fav-btn-hist { color: #888; font-size: 1.4rem; }
.toggle-fav-btn-hist:hover { color: #f39c12; }
.hist-icon { display: flex; align-items: center; margin-right: 5px; }
.hist-icon img { opacity: 0.6; }
body.dark .hist-icon img { filter: invert(0.7); opacity: 1; }
.item-date { font-size: 0.75rem; color: #888; min-width: 65px; text-align: right; }

.hidden-delete-fav, 
.hidden-delete-hist {
    cursor: default; /* Обычная стрелочка, как над интерфейсом */
    user-select: none; /* Запрещает выделять текст даты двойным кликом, чтобы клики работали чище */
}

.action-btn { margin-left: 10px; cursor: pointer; opacity: 0.8; transition: opacity 0.2s, color 0.2s; padding: 0 4px; user-select: none; }
.action-btn:hover { opacity: 1; }
.remove-fav-btn { font-size: 1.2rem; }
.remove-fav-btn:hover { color: #dc322f; }
.sortable-header { margin-bottom: 10px; margin-top: 25px; color: #888; font-size: 0.85rem; text-transform: uppercase; display: flex; justify-content: space-between; align-items: center; user-select: none; }
.sort-trigger { color: #859900; font-weight: bold; cursor: pointer; }

/* Колонки ссылок 4as */
.quick-links-container { display: flex; gap: 1.2rem; flex-wrap: wrap; justify-content: space-between; }
.quick-links-column { flex: 1 1 45%; min-width: 200px; }
.quick-links-column p { font-weight: bold; margin-bottom: 0.5rem; }
.quick-links-column ul { padding-left: 1rem; font-size: 0.9rem; margin-top: 0; }
.quick-links-column a { text-decoration: none; }
.quick-links-column a:hover { text-decoration: underline; }
.link-primary { color: #859900; }
.link-success { color: #2aa198; }
.link-warning { color: #cb4b16; }
.link-danger { color: #dc322f; }

@media (max-width: 500px) {
  .quick-modal-container { width: 94% !important; height: 90% !important; }
  .quick-modal-content-wrapper { padding: 1rem 0 0 0 !important; }
  #tab-fav, #tab-4as { padding-left: 1.2rem !important; padding-right: 1.2rem !important; }
  .quick-search-form { padding-left: 1.2rem !important; padding-right: 3.5rem !important; }
}

/* Сообщения о пустых списках */
.quick-empty-msg {
    font-size: 0.9rem; color: #888; font-style: italic; margin: 0;
}

/* Блок ссылки "Вся история" */
.quick-all-history-wrapper {
    text-align: right; margin-top: 10px;
}
.quick-all-history-link {
    font-size: 0.85rem; color: #859900; text-decoration: none;
}
.quick-all-history-link:hover {
    text-decoration: underline;
}

/* =========================================
end   QUICK MODAL STYLES (Оптимизировано) end Css for settings.js 
   ========================================= */

/* Индикатор загрузки словаря (Светлая тема по умолчанию) */
.dict-loading-indicator {
    position: fixed;
    bottom: 20px;
    left: 20px;
    padding: 10px;
    background-color: var(--bs-body-bg, #ffffff);
    color: var(--bs-body-color, #212529);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 12px;
    z-index: 10000;
    font-size: 14px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.dict-loading-indicator.show {
    opacity: 0.6;
}

/* Темная тема */
body.dark .dict-loading-indicator,
[data-theme="dark"] .dict-loading-indicator,
[data-bs-theme="dark"] .dict-loading-indicator {
    background-color: rgba(0, 0, 0, 0.8);
    color: #E1EAED;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}



/* Анимация мигания для элементов из хеша URL */
@keyframes dgTempBlink {
    0%, 100% { box-shadow: 0 0 0 2px grey; }
    50% { box-shadow: 0 0 0 5px rgba(128,128,128, 0.5); }
}

.dg-temp-blink {
    animation: dgTempBlink 0.8s ease-in-out 3;
    border-radius: 6px;
}