.fa, fa, .fa.io, fa.io{font-family:fontAwesome; font-style:normal;}
.push5{clear:both; font-size:0; height:0.375rem; border:none; margin:0; padding:0;}
.push10{clear:both; font-size:0; height:0.75rem; border:none; margin:0; padding:0;}

.dn{display:none!important}

.nw{white-space:nowrap!important;}
.tc{text-align:center!important;}

.tof{overflow:hidden; white-space: nowrap; text-overflow:ellipsis;}

.w100{width:100%;}


.data-table tbody td .dpZag{font-size:var(--font-size-lg);}
.data-table tbody td .dpLine,
.data-table tbody td .badge
{font-size:var(--font-size-base); font-weight:normal;}
.data-table tbody td{vertical-align:top;}
.data-table tbody td id{font-size:var(--font-size-sm); color:var(--text-muted); margin-left:var(--space-1);}

.data-table tbody td .btnLine{margin-top:var(--space-4); display:flex; gap:var(--space-2);}

.data-table tbody td a
{   
}
.data-table tbody td a:hover
{
   color: var(--brand-navy-light);
   text-decoration: underline;
}

switch {
   width: 4rem; /* 52px */
   height: 2rem; /* 32px */
   border-radius: 1rem;
   background-color: var(--brand-navy-light);
   border: none;
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   position: relative;
}
switch d {
   display: block;
   width: 1.5rem; 
   height: 1.5rem;
   border-radius: 50%;
   background:var(--bg-surface);
   position: absolute;
   top: 0.25rem; 
}
switch.st0 {
   background-color: var(--text-muted);   
}

switch.st0 d {
   left: 0.25rem; /* 6px */
}
switch.st1 d {
   right: 0.25rem; /* 2px */
}

/*--------------------------------------------------------------------------------------------------------------------*/

body.err404 {
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100vh;
}
body.err404 div {
   min-width: 30vw; /* 40vw */
   max-width: 67.5vw; /* 90vw */
   text-align: center;
}
body.err404 div t {
   display: block;
   padding: 0.75rem 0 1.5rem 0; /* 10px 0 20px 0 */
   font-size: 1.95rem; /* 26px */
   color: var(--main-color);
}
body.err404 div t d {
   display: inline-block;
   vertical-align: bottom;
   padding: 0 0.75rem; /* 0 10px */
}
body.err404 div t d:nth-child(2) {
   font-size: 3.75rem; /* 50px */
   color: var(--dop-color);
}

body.err404 div btns {
   display:flex;
   gap:0.75rem;
   justify-content: center;
   align-items: center;
}
body.err404 a.logo {
   position: absolute;
   right: 1.5rem; /* 20px */
   top: 1.5rem; /* 20px */
   display: block;
   height: 4.5rem; /* 60px */
   width: 30vw; /* 40vw */
   background: url(/img/logo.svg) no-repeat right top;
   background-size: contain;
}

body.err404 div c {
   display: block;
   font-size: clamp(8rem, 20vw, 26rem);
   margin-bottom: 3rem; /* 40px */
   line-height: 0.8;
}
body.err404 div c {
   font-weight: bold;
   font-family: Arial, sans-serif;
   
   background: linear-gradient(90deg, var(--brand-navy), var(--brand-red));
   
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;

   background-clip: text;
   color: transparent;
}

/*--------------------------------------------------------------------------------------------------------------------*/

/* ============================================================
   MY-CUSTOM-SELECT — подгонка под UI kit
   ============================================================ */
.my-custom-select .selected-option
{
   font-size: var(--font-size-base);
   padding: var(--space-2) var(--space-3);
   border: 0.0625rem solid var(--border-color);
   border-radius: var(--border-radius);
   background: var(--bg-input);
   color: var(--text-primary);
   transition: border-color var(--transition);
}
.my-custom-select.open .selected-option
{
   border-color: var(--brand-navy-light);
}

.my-custom-select .dropdown-panel
{
   border: 0.0625rem solid var(--border-color);
   border-radius: var(--border-radius-lg);
   background: var(--bg-surface);
   box-shadow: var(--shadow-md);
   overflow: hidden;
   margin-top: 0.25rem;
}

.my-custom-select .options-list { background: var(--bg-surface); }

.my-custom-select .option-item
{
   font-size: var(--font-size-sm);
   color: var(--text-secondary);
   transition: background var(--transition), color var(--transition);
}
.my-custom-select .option-item:hover
{
   background: var(--accent-light);
   color: var(--text-primary);
}
.my-custom-select .option-item:before
{
   background: var(--bg-table-head);
   color: var(--border-color);
   border-radius: var(--border-radius);
}
.my-custom-select .option-item.active:before
{
   color: var(--color-success);
   background: var(--color-success-bg);
}
.my-custom-select .option-item:hover:before { color: var(--brand-navy-light); }

.my-custom-select .select-panel
{
   background: var(--bg-table-head);
   border-bottom: 0.0625rem solid var(--border-color);
   padding: var(--space-2);
}
.my-custom-select .search-input
{
   padding: var(--space-1) var(--space-2);
   border: 0.0625rem solid var(--border-color);
   border-radius: var(--border-radius);
   background: var(--bg-input);
   color: var(--text-primary);
   font-size: var(--font-size-sm);
   transition: border-color var(--transition);
}
.my-custom-select .search-input:focus
{
   border-color: var(--brand-navy-light);
   outline: none;
}

.my-custom-select .select-panel fa
{
   background: var(--brand-navy);
   color: var(--text-inverse);
   border-radius: var(--border-radius);
   padding: var(--space-1) var(--space-2);
   font-size: var(--font-size-sm);
   transition: background var(--transition);
}
.my-custom-select .select-panel fa:hover { background: var(--brand-navy-light); }

.my-custom-select .select-footer
{
   background: var(--bg-table-head);
   border-top: 0.0625rem solid var(--border-color);
   padding: var(--space-2);
}
.my-custom-select .select-footer button
{
   font-size: var(--font-size-sm);
   border-radius: var(--border-radius);
   padding: var(--space-1) var(--space-3);
   border: 0.0625rem solid transparent;
   transition: background var(--transition), border-color var(--transition);
}
.my-custom-select .confirm-btn
{
   background: var(--color-success-bg);
   color: var(--color-success);
   border-color: var(--color-success-border);
}
.my-custom-select .confirm-btn:hover { background: var(--color-success-border); }

.my-custom-select .cancel-btn
{
   background: var(--bg-input);
   color: var(--text-secondary);
   border-color: var(--border-color);
}
.my-custom-select .cancel-btn:hover
{
   background: var(--accent-light);
   border-color: var(--accent-muted);
}

.my-custom-select .tag
{
   background: var(--accent-light);
   color: var(--accent);
   border-radius: 1rem;
   padding: 0.1rem var(--space-2);
   font-size: var(--font-size-xs);
   font-weight: 500;
}
.my-custom-select .tag span.remove
{
   color: var(--accent);
   opacity: 0.7;
   transition: opacity var(--transition);
}
.my-custom-select .tag:hover span.remove { opacity: 1; display: inline-flex; }

/*--------------------------------------------------------------------------------------------------------------------*/

.sidebar__footer span
{
   display:inline-flex;
   padding:var(--space-2) var(--space-4); 
   background-color:var(--color-success);
   color:var(--text-inverse);
   border-radius:var(--border-radius);
}


@keyframes glowPulse
{
   0%, 100%
   {
      box-shadow: 0 0 0px rgba(0, 150, 255, 0.5),
                  0 0 0px rgba(0, 150, 255, 0.3),
                  0 0 0px rgba(0, 150, 255, 0.2);
   }
   50%
   {
      box-shadow: 0 0 5px rgba(0, 150, 255, 0.8),
                  0 0 7px rgba(0, 150, 255, 0.6),
                  0 0 14px rgba(0, 150, 255, 0.4);
   }
} 

*.glowPulse
{
   animation: glowPulse 1s ease-in-out infinite!important;
}

.psevdo_link
{
   cursor: pointer;
   color: var(--brand-navy-light);
   text-decoration-line: underline;
   text-decoration-style: dotted;
   text-decoration-thickness: 0.1rem;
   text-underline-offset: 0.3rem;
   transition: color .2s ease, text-underline-offset .2s ease;
}

.psevdo_link:hover
{
   color: var(--brand-navy);
   text-underline-offset: 0.5rem;
}

.psevdo_link:focus-visible
{
   outline: 0.1rem solid var(--brand-navy-light);   
}

.psevdo_link:active
{
   color: var(--brand-navy);
}