/* ===========================================
   КАСТОМНІ СТИЛІ ДЛЯ АРХІВУ ХНМУ
   =========================================== */

/* Кольори проекту */
:root {
    --primary-color: rgba(50, 114, 32, 1);
    --secondary-color: rgba(0, 95, 71, 1);
    --primary-text-color: rgba(18, 36, 53, 1) !important;
    --light-text-color: rgba(255, 255, 255, 1) !important;
    --light-green: #cff1e4;
    --accent-color: #4a90a4;
    --success-color: #28a745;
    --warning-color: #ffc107;
    --danger-color: #dc3545;
    --light-bg: #f8f9fa;
    --archive-black: #343A40;
    --grey: #74788D;
    --archive-grey-lighter: #D5D5D5;
    --archive-grey-light: #F3F5F7;
    --archive-grey-light2: #fafbfc;
    --archive-green: rgba(0, 95, 71, 1);
    --archive-green-light: #EBF9F4;
    --archive-green-bright: #34C38F;
    --archive-green-bright-light: rgba(52, 195, 143, .2);
    --archive-yellow: #CC8204;
    --archive-yellow-light: rgba(241, 180, 76, .2);
    --archive-red: #F46A6A;
    --archive-red-light: rgba(244, 106, 106, .2);
    --archive-blue: #5596E6;
    --archive-blue-light: rgba(85, 150, 230, .2);
    --archive-border: 1px solid #EBEFF2;
    --standart-border: 1px solid #e5e5e5;
}

body {
    color: var(--archive-black);
    font-size: 13px;
    font-family: Lato, sans-serif;
    font-weight: 300;
    line-height: 1.6;
}
h1,h2,h3,h4 {
    font-family: Raleway;
    color: unset;
}
header :is(h1, h2, h3, h4) {
    color: var(--light-text-color);
}
*{
    box-sizing: border-box !important;
}
a{
    text-decoration: none;
}
a:hover{
    text-decoration: none;
}
/* Загальні стилі */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--primary-text-color);
}


main{
    flex-grow: 1;
    padding: 24px 48px 48px;
    background-color: #F6F6F6;
}

@media (max-width: 1199px) {
    main {
        padding: 20px;
    }
}

footer{
    position: relative;
    color: rgba(134, 145, 162, 1);
    font-size: 14px;
    background-color: #F6F6F6;
}

.archive-header-background,
.archive-login-background {
    background: linear-gradient(-90deg, var(--primary-color), var(--secondary-color));
}

.archive-login-background:after {
    content: '';
    position: absolute;
    bottom: 0;
    background-size: 100%;
    right: 0;
    width: 100%;
    background-position: left bottom;
    height: 100%;
    background-image: url(./../img/background.png);
    pointer-events: none;
    background-repeat: no-repeat;
}

.archive-public-layout .archive-header-background:after{
    content: '';
    position: absolute;
    bottom: 0;
    background-size: 155%;
    right: 0;
    width: 40%;
    background-position: left bottom;
    height: 100%;
    background-image: url(./../img/background.png);
    pointer-events: none;
    background-repeat: no-repeat;
}

.archive-login-logo {
    height: 40px;
    width: 40px;
}

.archive-login-container {
    background-color: #fff;
    border-radius: 8px;
    text-align: center;
    max-width: 460px;
    width: 100%;
    color: rgba(18, 36, 53, 1);
    z-index: 1000 !important;
}
.archive-login-container h1 {
    color: var(--primary-text-color);
}
.archive-login-container p {
    color: var(--primary-text-color);
}
.archive-login-container a{
    color: var(--light-text-color);
}
.archive-login-container .google-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    width: 100%;
    background: white;
    border: 2px solid #dadce0;
    border-radius: 8px;
    color: #3c4043;
    text-decoration: none;
    transition: all 0.3s ease;
}
.archive-login-container .google-btn:hover {
    background: #eeeeee;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 99, 99, 0.3);
}
.archive-login-container .google-icon {
    width: 20px;
    height: 20px;
}
.archive-login-container .alert-error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}
.archive-login-container .alert-success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.archive-guest-header{
    min-height: 222px;
    color: var(--light-text-color) !important;
    position: relative;
}

.archive-logo-block h2 {
    color: var(--light-text-color);
    font-family: Exo, sans-serif;
}

header .archive-logo-block .archive-img-holder{
    width: 52px;
    height: 52px;
}

.archive-guest-header .archive-logo-block h2{
    color: var(--light-text-color);
}

.archive-guest-header .archive-logo-block h3{
    color: var(--light-text-color);
}

.archive-guest-header .main-title h4{
    font-family: Inter, sans-serif !important;
}

  @media (max-width: 639px) {
    .archive-guest-header .main-title h1 {
      font-size: 24px;
    }

    .archive-guest-header .main-title h4 {
      font-size: 16px;
    }
  }

header .header-nav{
    margin-left: 128px;
}


header .header-nav li.active {
    border-bottom: 2px solid rgba(194, 178, 138, 1);
}


header .header-nav a {
    color: var(--light-text-color);
}
header .header-nav a:hover{
    color: rgba(194, 178, 138, 1);
}

header .archive-user-info{
    position: relative;
}

header .archive-user-info .archive-img-holder{
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid var(--light-text-color);
}

header .archive-user-info text{
    color: var(--light-text-color);
    margin: 0 8px 0 12px;
}

header .archive-user-info text .mail{
    color: rgba(231, 233, 236, 1);
}
header .archive-user-info .details{
    display: block;
    background: unset;
    border: none;
    cursor: pointer;
    width: 25px;
}
header .user-info .details img{
    width: 100%;
    pointer-events: none;
}

.fwk-checkbox{
    border: 3px solid var(--secondary-color);
    border-radius: 4px;
    height: 24px;
    width: 24px;
}

/* Text size */
.fwk-text-xsmall { font-size: 10px !important; }
.fwk-text-small { font-size: 12px !important; }
.fwk-text-default { font-size: 16px !important; }
.fwk-text-large { font-size: 24px !important; }
.fwk-text-xlarge { font-size: 48px !important; }
.fwk-text-13 { font-size: 13px !important; }
.fwk-text-14 { font-size: 14px !important; }
.fwk-text-15 { font-size: 15px !important; }
.fwk-text-17 { font-size: 17px !important; }
.fwk-text-18 { font-size: 18px !important; }
.fwk-text-20 { font-size: 20px !important; }

/* Line height */
.fwk-line-height-xsmall { line-height: 16px; }
.fwk-line-height-small { line-height: 18px; }
.fwk-line-height-normal { line-height: 22px; }
.fwk-line-height-large { line-height: 24px; }
.fwk-line-height-26 { line-height: 26px; }
.fwk-line-height-xlarge { line-height: 36px; }

/* Text weight */
.fwk-text-light { font-weight: 300 !important; }
.fwk-text-normal { font-weight: 400 !important; }
.fwk-text-weight-500 { font-weight: 500 !important; }
.fwk-text-bold { font-weight: 600 !important; }

.fwk-font-inter { font-family: 'Inter', sans-serif !important; }
.fwk-font-raleway { font-family: 'Raleway', sans-serif !important; }
.fwk-font-exo { font-family: 'Exo', sans-serif !important; }

.fwk-text-transform-none { text-transform: none !important; }

/* Paddings */

.fwk-padding-xxsmall-vertical { padding-top: 4px !important; padding-bottom: 4px !important;}

.fwk-padding-xsmall { padding: 8px !important; }
.fwk-padding-xsmall-top { padding-top: 8px !important; }
.fwk-padding-xsmall-bottom { padding-bottom: 8px !important; }
.fwk-padding-xsmall-right { padding-right: 8px !important; }
.fwk-padding-xsmall-left { padding-left: 8px !important; }
.fwk-padding-xsmall-vertical { padding-top: 8px !important; padding-bottom: 8px !important;}
.fwk-padding-xsmall-horizontal { padding-left: 8px !important; padding-right: 8px !important; }

.fwk-padding-small { padding: 12px !important; }
.fwk-padding-small-top { padding-top: 12px !important; }
.fwk-padding-small-bottom { padding-bottom: 12px !important; }
.fwk-padding-small-right { padding-right: 12px !important; }
.fwk-padding-small-left { padding-left: 12px !important; }
.fwk-padding-small-vertical { padding-top: 12px !important; padding-bottom: 12px !important;}
.fwk-padding-small-horizontal { padding-left: 12px !important; padding-right: 12px !important; }

.fwk-padding { padding: 16px !important; }
.fwk-padding-top { padding-top: 16px !important; }
.fwk-padding-bottom { padding-bottom: 16px !important; }
.fwk-padding-right { padding-right: 16px !important; }
.fwk-padding-left { padding-left: 16px !important; }
.fwk-padding-vertical { padding-top: 16px !important; padding-bottom: 16px !important;}
.fwk-padding-horizontal { padding-left: 16px !important; padding-right: 16px !important; }

.fwk-padding-large { padding: 24px !important; }
.fwk-padding-large-top { padding-top: 24px !important; }
.fwk-padding-large-bottom { padding-bottom: 24px !important; }
.fwk-padding-large-right { padding-right: 24px !important; }
.fwk-padding-large-left { padding-left: 24px !important; }
.fwk-padding-large-vertical { padding-top: 24px !important; padding-bottom: 24px !important;}
.fwk-padding-large-horizontal { padding-left: 24px !important; padding-right: 24px !important; }

.fwk-padding-xlarge { padding: 48px !important; }
.fwk-padding-xlarge-top { padding-top: 48px !important; }
.fwk-padding-xlarge-bottom { padding-bottom: 48px !important; }
.fwk-padding-xlarge-right { padding-right: 48px !important; }
.fwk-padding-xlarge-left { padding-left: 48px !important; }
.fwk-padding-xlarge-vertical { padding-top: 48px !important; padding-bottom: 48px !important;}
.fwk-padding-xlarge-horizontal { padding-left: 48px !important; padding-right: 48px !important; }



/* Margins */

.fwk-margin-xxsmall-vertical { margin-top: 4px !important; margin-bottom: 4px !important;}

.fwk-margin-xsmall { margin: 8px !important; }
.fwk-margin-xsmall-top { margin-top: 8px !important; }
.fwk-margin-xsmall-bottom { margin-bottom: 8px !important; }
.fwk-margin-xsmall-right { margin-right: 8px !important; }
.fwk-margin-xsmall-left { margin-left: 8px !important; }
.fwk-margin-xsmall-vertical { margin-top: 8px !important; margin-bottom: 8px !important;}
.fwk-margin-xsmall-horizontal { margin-left: 8px !important; margin-right: 8px !important; }

.fwk-margin-10 { margin: 10px !important; }
.fwk-margin-top-10 { margin-top: 10px !important; }
.fwk-margin-bottom-10 { margin-bottom: 10px !important; }
.fwk-margin-right-10 { margin-right: 10px !important; }
.fwk-margin-left-10 { margin-left: 10px !important; }
.fwk-margin-vertical-10 { margin-top: 10px !important; margin-bottom: 10px !important;}
.fwk-margin-horizontal-10 { margin-left: 10px !important; margin-right: 10px !important; }

.fwk-margin-12 { margin: 12px !important; }
.fwk-margin-top-12 { margin-top: 12px !important; }
.fwk-margin-bottom-12 { margin-bottom: 12px !important; }
.fwk-margin-right-12 { margin-right: 12px !important; }
.fwk-margin-left-12 { margin-left: 12px !important; }
.fwk-margin-vertical-12 { margin-top: 12px !important; margin-bottom: 12px !important;}
.fwk-margin-horizontal-12 { margin-left: 12px !important; margin-right: 12px !important; }

.fwk-margin-small { margin: 16px !important; }
.fwk-margin-small-top { margin-top: 16px !important; }
.fwk-margin-small-bottom { margin-bottom: 16px !important; }
.fwk-margin-small-right { margin-right: 16px !important; }
.fwk-margin-small-left { margin-left: 16px !important; }
.fwk-margin-small-vertical { margin-top: 16px !important; margin-bottom: 16px !important;}
.fwk-margin-small-horizontal { margin-left: 16px !important; margin-right: 16px !important; }

.fwk-margin-20 { margin: 20px !important; }
.fwk-margin-top-20 { margin-top: 20px !important; }
.fwk-margin-bottom-20 { margin-bottom: 20px !important; }
.fwk-margin-right-20 { margin-right: 20px !important; }
.fwk-margin-left-20 { margin-left: 20px !important; }
.fwk-margin-vertical-20 { margin-top: 20px !important; margin-bottom: 20px !important;}
.fwk-margin-horizontal-20 { margin-left: 20px !important; margin-right: 20px !important; }

.fwk-margin { margin: 24px !important; }
.fwk-margin-top { margin-top: 24px !important; }
.fwk-margin-bottom { margin-bottom: 24px !important; }
.fwk-margin-right { margin-right: 24px !important; }
.fwk-margin-left { margin-left: 24px !important; }
.fwk-margin-vertical { margin-top: 24px !important; margin-bottom: 24px !important;}
.fwk-margin-horizontal { margin-left: 24px !important; margin-right: 24px !important; }

.fwk-margin-30 { margin: 30px !important; }
.fwk-margin-top-30 { margin-top: 30px !important; }
.fwk-margin-bottom-30 { margin-bottom: 30px !important; }
.fwk-margin-right-30 { margin-right: 30px !important; }
.fwk-margin-left-30 { margin-left: 30px !important; }
.fwk-margin-vertical-30 { margin-top: 30px !important; margin-bottom: 30px !important;}
.fwk-margin-horizontal-30 { margin-left: 30px !important; margin-right: 30px !important; }

.fwk-margin-large { margin: 36px !important; }
.fwk-margin-large-top { margin-top: 36px !important; }
.fwk-margin-large-bottom { margin-bottom: 36px !important; }
.fwk-margin-large-right { margin-right: 36px !important; }
.fwk-margin-large-left { margin-left: 36px !important; }
.fwk-margin-large-vertical { margin-top: 36px !important; margin-bottom: 36px !important;}
.fwk-margin-large-horizontal { margin-left: 36px !important; margin-right: 36px !important; }

.fwk-margin-xlarge { margin: 48px !important; }
.fwk-margin-xlarge-top { margin-top: 48px !important; }
.fwk-margin-xlarge-bottom { margin-bottom: 48px !important; }
.fwk-margin-xlarge-right { margin-right: 48px !important; }
.fwk-margin-xlarge-left { margin-left: 48px !important; }
.fwk-margin-xlarge-vertical { margin-top: 48px !important; margin-bottom: 48px !important;}
.fwk-margin-xlarge-horizontal { margin-left: 48px !important; margin-right: 48px !important; }

/* Gap */
.fwk-gap-xsmall { gap: 6px; }
.fwk-gap-small { gap: 8px; }
.fwk-gap-medium { gap: 16px; }
.fwk-gap-large { gap: 24px; }
.fwk-gap-xlarge { gap: 32px; }

.fwk-gap-xsmall-horizontal { column-gap: 6px; }
.fwk-gap-small-horizontal { column-gap: 8px; }
.fwk-gap-medium-horizontal { column-gap: 16px; }
.fwk-gap-large-horizontal { column-gap: 32px; }

.fwk-gap-xsmall-vertical { row-gap: 6px; }
.fwk-gap-small-vertical { row-gap: 8px; }
.fwk-gap-medium-vertical { row-gap: 16px; }
.fwk-gap-large-vertical { row-gap: 32px; }

.fwk-dropdown.bottom{
    left: 0;
    top: 100%;
}
.fwk-dropdown.top{
    left: 0;
    bottom: 100%;
}
.fwk-dropdown.left{
    right: 100%;
    top: 0;
}
.fwk-dropdown.right{
    left: 100%;
    top: 0;
}
.fwk-dropdown.opened {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.fwk-drop {
    cursor: default;
}

@keyframes showDropdownDown {
    0%{
        display: block !important;
        max-height: 0;
    }
    100%{
        max-height: 500px;
    }
}
@keyframes hideDropdownDown {
    0%{
        max-height: 500px;
    }
    99.9%{
        max-height: 0;
    }
    100%{
        display: none;
        max-height: 0;
    }
}

.fwk-breadcrumb>:nth-child(n+2):not(.fwk-first-column)::before {
    margin: 0 8px !important;
}

.fwk-navbar-nav > li > a {
    min-height: auto;
}

.form-heading h1{
    font-family: 'Raleway', sans-serif;
    margin-top: 44px;
    letter-spacing: 0;
}

.fwk-form-card {
    padding: 24px;
    border-radius: 2px;
    height: 100%;
}

.fwk-form-card-header {
    gap: 10px;
}

.fwk-form-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 48px;
    background-color: #FAF2DE;
    border-radius: 2px;
    position: relative; !important;
}

.fwk-form-icon i {
    color: var(--secondary-color);
    text-shadow: 0 0 1px currentColor;
}

.fwk-form-subtitle {
    width: 100%;
    font-family: 'Inter', sans-serif;
    line-height: 22px;
    letter-spacing: 0.01em;
    flex-grow: 1;
}

.fwk-form-button {
    height: 48px;
    width: 160px;
    padding: 12px 40px;
    border-radius: 2px;
    background-color: var(--secondary-color);
    color: white;
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.01em;
    line-height: 24px;
    transition: background-color 0.3s ease, color 0.3s ease;
    border: 2px solid var(--secondary-color);
}

.fwk-form-button:hover {
    background-color: white;
    color: var(--secondary-color);
    border: 2px solid var(--secondary-color);
}


.fwk-text-success{
    color: var(--success-color)!important;
}

.fwk-grid-small {
    margin-left: -16px;
    margin-top: -16px;
}

.fwk-grid-small > * {
    padding-left: 16px;
    margin-top: 16px !important;
}

.fwk-link-toggle:hover .fwk-link, .fwk-link:hover, a, a:hover { color: var(--archive-green); }
.fwk-text-muted { color: var(--grey); }
.fwk-text-green { color: var(--archive-green); }
.fwk-line-large { line-height: 2 !important; }
.fwk-line-normal { line-height: 1.6 !important; }
.fwk-line-small { line-height: 1.2 !important; }
.fwk-background-white { background: white; }
.fwk-background-success { color: var(--archive-green-bright); background: var(--archive-green-bright-light); }
.fwk-background-warning { color: var(--archive-yellow); background: var(--archive-yellow-light); }
.fwk-background-danger { color: var(--archive-red); background: var(--archive-red-light); }
.fwk-background-info { color: var(--archive-blue); background: var(--archive-blue-light); }

.fwk-font-header { font-family: Raleway; }


.fwk-checkbox:checked, .fwk-checkbox:indeterminate, .fwk-radio:checked {
    background-color: var(--archive-green) !important;
}

.fwk-show-button {
    height: 44px !important;
}

.fwk-input {
    height: 44px;
    background-color: #fcfcfc;
}

.fwk-input, .fwk-select, .fwk-textarea {
    border-radius: 4px;
}

.fwk-input-modal {
    height: 38px;
}

.fwk-button {
    display: flex;
    color: var(--archive-black);
    font-size: 14px;
    font-weight: 500;
    text-transform: capitalize;
    border-color: var(--archive-grey-light);
    border: 1px;
    height: 48px;
    align-items: center;
    justify-content: center;
}
.fwk-button-default {
    border-color: var(--primary-color);
}
.fwk-button-default:hover { border-color: var(--archive-green); }
.fwk-button-primary {
    color: white;
    background: var(--archive-green);
    border: 1px solid var(--archive-green);
    border-radius: 2px;
}
.fwk-button-primary:hover {
    color: var(--archive-green);
    background: white;
    border-color: var(--archive-green);
}

.fwk-button-upload {
    color: var(--archive-green);
    background: rgba(247, 255, 252, 1);
    border: 1px solid var(--archive-green);
    border-radius: 2px;
    height: 44px;
}

.fwk-button-upload:hover {
    color: white;
    background: var(--archive-green);
    border: 1px solid var(--archive-green);
}

.fwk-button-muted {
    border-color: var(--archive-grey-light);
    background-color: #e7e9ec;
}

.fwk-button-remove {
    color: #8691a2;
    background-color: #e7e9ec;
}

.fwk-card-default { color: var(--archive-black); }

table.fwk-table th {
    color: var(--grey);
    text-transform: capitalize;
    vertical-align: middle;
    background: var(--archive-green-light);
}
table.fwk-table tbody tr {
    border-top: 0 !important;
    border-bottom: var(--archive-border);
}
.fwk-table-striped tbody tr:nth-of-type(2n+1),
.fwk-table-striped > tr:nth-of-type(2n+1) {
    background: none;
    border-bottom: var(--archive-border);
}
.fwk-table-striped tbody tr:nth-of-type(2n),
.fwk-table-striped > tr:nth-of-type(2n) {
    background: var(--archive-grey-light2);
    border-bottom: var(--archive-border);
}

.fwk-tab > * {
    flex: 1;
    min-width: 1px;
    padding-left: 3px;
}
.fwk-tab::before { content: none; }
.fwk-subnav > * > :first-child {
    color: var(--archive-black);
    text-transform: capitalize;
    background: var(--archive-grey-light);
    border-radius: 4px;
}
.fwk-subnav > * > :first-child:hover {
    color: var(--archive-green);
}
.fwk-subnav-pill > .fwk-active > a {
    color: white !important;
    white-space: nowrap;
    background: var(--archive-green);
}

.fwk-alert {
    border-radius: 6px;
}
.fwk-label {
    padding: 3px 6px;
    font-size: 12px;
    font-weight: 500;
    text-transform: capitalize;
    border-radius: 4px;
}
.fwk-alert-warning,
.fwk-label-warning {
    color: var(--archive-yellow);
    background: var(--archive-yellow-light);
}
.fwk-alert-danger,
.fwk-label-danger {
    color: var(--archive-red);
    background: var(--archive-red-light);
}
.fwk-alert-success,
.fwk-label-success {
    color: var(--archive-green);
    background: var(--archive-green-light);
}
.fwk-alert-info,
.fwk-label-info {
    color: var(--archive-blue);
    background: var(--archive-blue-light);
}

.fwk-modal-dialog {
    padding: 0;
    border-radius: 6px;
}
.fwk-modal-header {
    padding: 24px;
    border-radius: 6px 6px 0 0;
}
.fwk-modal-body {
    padding: 24px;
}
.fwk-modal-footer {
    padding: 24px;
}

.fwk-button-link{
    transition: 0.3s;
    color: var(--primary-color);
}
.fwk-button-link:hover{
    color: var(--primary-color);
}

.fwk-container-20 {
    width: 20px;
    height: 20px;
}

.fwk-container-36 {
    width: 36px;
    height: 36px;
}

/* print reports */
@media print {
    body *:not(.printable, .printable *),
    button, button svg {
        display: none;
    }
    input {
        border: none!important;
        background-color: transparent!important;
    }
}

.fwk-form-title-text {
    font-family: 'Inter', sans-serif;
    line-height: 24px;
    letter-spacing: 0.01em;
}

.fwk-icon-fixed {
    height: 13px;
    width: 13px;
    display: inline-block;
    text-align: center;
    flex-shrink: 0;
}

.fwk-icon-warning{
    width: 17px;
    height: 15px;
}

.fwk-icon-smaller {
    width: 15px;
}

.fwk-icon-small {
    height: 16px;
    width: 16px;
}

.fwk-icon-normal {
    height: 20px;
    width: 20px;
}

.fwk-request-card {
    border-radius: 2px;
    padding: 24px;
    border: 1px solid #ccc;
    gap: 12px;
    box-shadow: none;
    transition: box-shadow 0.3s ease;
    width: 100%;
    min-height: 126px;
}

.fwk-request-card:hover {
    box-shadow: 0 2px 8px var(--archive-grey-lighter);
    cursor: pointer;
}

.fwk-request-card-header{
    flex-grow: 1;
}

.fwk-label-success {
    color: white;
    background-color: var(--secondary-color);
}


.archive-request-title {
    max-width: 100%;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.01em;
}

.archive-example-download{
    color: var(--primary-color);
}
.archive-example-download:hover{
    color: var(--grey);
}

.archive-button-primary {
    border: 1px solid var(--secondary-color);
    border-radius: 2px;
}

.archive-request-date {
    letter-spacing: 0.01em;
}

.archive-request-subtitle {
    font-family: 'Inter', sans-serif;
    line-height: 22px;
    letter-spacing: 0.01em;
    font-size: 14px;
}

@media (max-width: 800px) {
    .archive-request-title {
        max-width: 100%;
        height: auto;
    }

    .archive-request-subtitle {
        max-width: 100%;
        height: auto;
    }
}


.archive-arrow-container {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
}

.archive-arrow-right {
    width: 20px;
    height: 20px;
    display: inline-block;
    line-height: 1;
    color: var(--archive-green);
}

table.fwk-table tr.archive-request-table-header > th {
    background-color: var(--light-green) !important;
    color: var(--archive-black);
}


tr.archive-open-modal-row {
    font-size: 12px;
    font-family: Inter, sans-serif;
    font-weight: 400;
    line-height: 18px;
    transition: 0.3s ease !important;
}

.archive-open-modal-row:hover {
    cursor: pointer;
    background-color: #f8f9fa;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.archive-status-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
}

.archive-status-item::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
  box-sizing: border-box;
}

.archive-mark-new::before { background-color: #e57a11; }
.archive-mark-clarifying::before { background-color: #292fe8; }
.archive-mark-updated::before { background-color: #24a8c2; }
.archive-mark-in-progress::before { background-color: #0d66d0; }
.archive-mark-rejected::before { background-color: #e33636; }
.archive-mark-issued::before { background-color: #8691a2; }
.archive-mark-complete::before { background-color: #f6d957; }
.archive-mark-accepted::before { background-color: #04bf0e; }


.archive-status-new { background-color: #e57a11; }
.archive-status-clarifying { background-color: #292fe8; }
.archive-status-updated { background-color: #24a8c2; }
.archive-status-in-progress { background-color: #0d66d0; }
.archive-status-rejected { background-color: #e33636; }
.archive-status-issued { background-color: #8691a2; }
.archive-status-complete { background-color: #f6d957; color: #41505d; }
.archive-status-accepted{ background-color: #04bf0e; }
.archive-status-default { background-color: gray; }

.archive-list {}

.archive-list li {
    align-items: center;
    gap: 8px;
    color: var(--archive-green);
}

.archive-list li::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: #005f47;
    flex-shrink: 0;
    box-sizing: border-box;
}

#archive-modal-file-slider .fwk-modal-dialog{
    overflow: hidden;
}



.archive-file-type-item{
    display: flex;
    background: none;
    transition: 0.3s ease;
    cursor: pointer;
}
.archive-current-files{
    border-right: 1px solid #CFD3DA;
}

.archive-file-type-item:hover{
    background-color: rgba(229, 255, 250, 0.5);
}
.archive-preview-window {
    overflow-y: scroll;
}

.archive-preview-window .archive-image-list{
    overflow-y: scroll;
    max-height: 70vh;
}

.archive-preview-window .archive-image-list li .archive-controls .archive-accept-decline button {
    width: 36px;
    height: 36px;
    cursor: pointer;
    transition: 0.3s ease;
}
.archive-preview-window .archive-image-list li .archive-controls button.delete {
    border: 1px solid var(--grey);
    color: var(--grey);
}
.archive-preview-window .archive-image-list li .archive-controls button.accept {
    border: 1px solid var(--success-color);
    color: var(--success-color);
}
.archive-preview-window .archive-image-list li .archive-controls button.decline {
    border: 1px solid var(--danger-color);
    color: var(--danger-color);
}

.archive-preview-window .archive-image-list li .archive-controls button.delete:hover {
    background-color: var(--grey);
    color: var(--light-text-color);
}
.archive-preview-window .archive-image-list li .archive-controls button.accept:hover {
    background-color: var(--success-color);
    color: var(--light-text-color);
}
.archive-preview-window .archive-image-list li .archive-controls button.decline:hover {
    background-color: var(--danger-color);
    color: var(--light-text-color);
}

.archive-file-preview-image {
    width: 100%;
    height: auto;
    border: 1px solid var(--archive-grey-lighter);
    border-radius: 4px;
}

#files-menu .archive-file-type-item.active {
    background-color: rgba(160, 225, 208, 0.5);
    pointer-events: none;
}

.archive-info-button {
    cursor: pointer;
    transition: background-color 0.3s ease;
    gap: 6px;
}


/* Стилі для табів інформаційного модалу */

.archive-videos-list ul{
    list-style: none;
}

.archive-videos-list {
    border-right: 1px solid #CFD3DA;
}

.archive-videos-list ul{
    list-style: none;
}

.archive-videos-list ul li {
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.archive-videos-list ul li:hover {
    background-color: rgba(160, 225, 208, 0.5);
}

.archive-videos-list ul li.fwk-active {
    background-color: #A0E1D0;
}

.archive-videos-list ul li.fwk-active a {
    color: white !important;
}

.archive-preview-window .text-content {
    border-radius: 8px;
    overflow-y: scroll;
    white-space: pre-line;
    line-height: 1.5;
    text-align: left;
}

.archive-preview-window .video {
    flex-grow: 1;
    align-self: center;
    overflow: hidden;
}

.archive-header-cell {
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 8px 12px !important;
}

.archive-table-cell {
    padding: 14px 12px !important;
}

/* Левая кромка строки: 24px */
.archive-requests-table > thead > tr > th:first-child,
.archive-requests-table > tbody > tr > td:first-child {
    padding-left: 36px !important;
}

/* Правая кромка строки: 16px */
.archive-requests-table > thead > tr > th:last-child,
.archive-requests-table > tbody > tr > td:last-child {
    padding-right: 28px !important;
}

.archive-sortable-header {
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease;
}

.archive-sortable-header:hover {
    background-color: var(--archive-green-light);
}

.archive-sortable-header i {
    margin-left: 4px;
    opacity: 0.7;
}

.archive-sort-icon-inactive {
    opacity: 0.3;
}

.archive-sortable-header:hover .archive-sort-icon-inactive {
    opacity: 0.6;
}

.archive-thanks-window {
    background: var(--archive-grey-light);
}


.archive-success-icon {
    width: 68px;
    height: 68px;
    background: #ffeaa7;
}

.archive-checkmark {
    width: 28px;
    height: 23px;
    stroke: var(--secondary-color);
    stroke-width: 4;
}

.archive-success-container-text {
    width: 392px;
}

.archive-success-title {
    line-height: 36px;
    color: var(--secondary-color);
}

.archive-order-number {
    line-height: 26px;
}

.archive-success-message {
    line-height: 1.6;
}

.archive-back-button {
    background: var(--secondary-color);
    color: white;
    padding: 15px 35px;
    border-radius: 2px;
    line-height: 26px;
    transition: all 0.3s ease;
}

.archive-back-button:hover {
    background: #00a085;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 184, 148, 0.3);
    color: white;
    text-decoration: none;
}

/* Мобильная адаптация */
@media (max-width: 768px) {

    .archive-success-title {
        font-size: 24px;
    }

    .archive-order-number {
        font-size: 18px;
    }

    .archive-success-message {
        font-size: 15px;
    }

    .archive-back-button {
        padding: 12px 30px;
        font-size: 15px;
    }
}

.archive-settings-panel-sticky {
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    z-index: 10;
}

@media (max-width: 959px) {
    .archive-settings-panel-sticky {
        position: static;
        max-height: none;
        overflow-y: visible;
    }
}

.archive-preview-card {
    min-height: 500px;
}
.archive-base-field {
    opacity: 0.7;
}
.archive-custom-field {
    position: relative;
}
.archive-field-controls {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 10;
}
.archive-field-controls button {
    margin-left: 2px;
}

.archive-custom-field:hover .archive-field-controls {
    display: block;
}
.archive-custom-section .section-header {
    position: relative;
}
.archive-custom-section .section-controls {
    position: absolute;
    top: 5px;
    right: 10px;
}

.archive-clickable-section-preview {
    cursor: pointer;
    transition: all 0.2s ease;
}
.archive-clickable-section-preview:hover {
    background: #f8f9ff !important;
    border-color: #1e87f0 !important;
}
.archive-clickable-section-preview.selected-section {
    background: #e8f4fd !important;
    border-color: #1e87f0 !important;
    border-width: 2px !important;
}
.archive-clickable-section-preview .fwk-card-header {
    position: relative;
}

.archive-settings-panel-sticky::-webkit-scrollbar {
    width: 6px;
}
.archive-settings-panel-sticky::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}
.archive-settings-panel-sticky::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}
.archive-settings-panel-sticky::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Drag & Drop стилі для конструктора форми */
.archive-field-draggable {
    cursor: move;
    border: 2px dashed transparent;
    transition: all 0.3s ease;
    position: relative;
}

.archive-field-draggable:hover {
    border-color: #1e87f0;
    background: #f8f9fa;
}

.archive-field-drop-zones {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 10;
}

.archive-show-drop-zones .archive-field-drop-zones {
    pointer-events: auto;
}

.archive-drop-zone-left,
.archive-drop-zone-right {
    position: absolute;
    z-index: 100;
    top: 0;
    bottom: 0;
    width: 40%;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.archive-drop-zone-left {
    left: 0;
    background: linear-gradient(90deg, rgba(30, 135, 240, 0.1), transparent);
}

.archive-drop-zone-right {
    right: 0;
    background: linear-gradient(270deg, rgba(30, 135, 240, 0.1), transparent);
}

.archive-show-drop-zones .archive-drop-zone-left,
.archive-show-drop-zones .archive-drop-zone-right {
    opacity: 1;
}

.archive-drop-zone-left::before,
.archive-drop-zone-right::before {
    content: '';
    position: absolute;
    top: 50%;
    width: 3px;
    height: 100%;
    background: #1e87f0;
    border-radius: 2px;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.archive-drop-zone-left::before {
    left: 0;
}

.archive-drop-zone-right::before {
    right: 0;
}

.archive-drop-zone-left:hover::before,
.archive-drop-zone-right:hover::before {
    opacity: 1;
}

.archive-drag-over-left {
    background: linear-gradient(90deg, rgba(30, 135, 240, 0.1), transparent) !important;
}

.archive-drag-over-right {
    background: linear-gradient(270deg, rgba(30, 135, 240, 0.1), transparent) !important;
}
.archive-drag-over-left .archive-drop-zone-left::before{
    opacity: 1;
}
.archive-drag-over-right .archive-drop-zone-right::before{
    opacity: 1;
}

.archive-field-group {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    position: relative;
    margin-bottom: 1rem; /* Загальний margin для всієї групи */
}

.archive-field-group .archive-field-container {
    flex: 1;
    margin: 0 !important; /* Прибираємо margin у елементів групи */
}

.archive-field-container {
    position: relative;
    margin-bottom: 1rem; /* Margin тільки для окремих полів */
}

.archive-field-container .archive-field-block{
    position: relative;
    /*transition: width 0.4s cubic-bezier(0, 0, 0.31, 1.14), transform 0.8s cubic-bezier(0, 0, 0.31, 1.14);*/
    width: 100%;
}

.archive-field-inline-controls {
    position: absolute;
    top: 5px;
    right: 5px;
    display: flex;
    gap: 5px;
    z-index: 15;
}

.archive-field-inline-controls button {
    padding: 2px 6px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #ccc;
    border-radius: 3px;
    cursor: pointer;
}

.archive-field-inline-controls button:hover {
    background: #f0f0f0;
}

.archive-base-field .archive-field-draggable-content {
    opacity: 0.7;
    cursor: default;
}

.archive-custom-field .archive-field-draggable-content {
    position: relative;
    transition: 0.2s linear;
    opacity: 1;
}

.archive-custom-field .archive-field-draggable-content.archive-field-dragging {
    opacity: 0;
}

.archive-ungroup-field-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 4px;
    margin-right: 4px;
    border-radius: 2px;
    opacity: 0.7;
    transition: all 0.2s ease;
}

.archive-ungroup-field-btn:hover {
    opacity: 1;
    background: #e6f7ff;
    transform: scale(1.1);
}

.archive-field-group .archive-ungroup-field-btn {
    display: inline-block;
}

.archive-field-container:not(.archive-field-group) .archive-ungroup-field-btn {
    display: none;
}

/* Стиль для подвійного кліку */
.achive-field-draggable-content[ondblclick] {
    cursor: grab;
}

.archive-field-draggable-content[ondblclick]:active {
    cursor: grabbing;
}


.archive-field-group .archive-field-draggable-content:hover::after {
    opacity: 1;
}

.archive-ungroup-drop-zone {
    margin-top: 15px;
    padding: 12px;
    border: 2px dashed #d4d4d4;
    border-radius: 6px;
    text-align: center;
    color: #999;
    background: #f9f9f9;
    opacity: 0;
    transform: translateY(-5px);
    transition: all 0.3s ease;
    pointer-events: none;
}

.archive-ungroup-drop-zone.show-ungroup-zone {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.archive-ungroup-drop-zone.active {
    border-color: #ff6b6b;
    background: #ffe6e6;
    color: #ff6b6b;
}

.archive-ungroup-drop-zone.active .archive-ungroup-drop-indicator {
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* Стиль для згрупованих полів під час перетягування */
.archive-field-dragging.grouped {
    border: 2px solid #ff6b6b;
    background: #ffe6e6;
}

/* ===========================================
   СТИЛІ ДЛЯ КОНСТРУКТОРА ФОРМИ
   =========================================== */

/* Стилі для file upload preview */
.archive-file-upload-preview {
    text-align: center;
    padding: 40px 20px;
    border: 2px dashed #e5e5e5;
    border-radius: 8px;
    background: #fafafa;
    transition: all 0.3s ease;
}

.archive-file-upload-preview:hover {
    border-color: #ccc;
    background: #f5f5f5;
}

.archive-file-upload-text h4 {
    color: #333;
}

.archive-file-upload-text p {
    line-height: 1.5;
    color: #666;
}

.archive-section-status {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: transparent;
    margin-left: auto;
}

.archive-section-status.added {
    background: #28a745;
}

/* Анімація для нового поля */
.archive-new-field-highlight {
    border: 2px solid #4CAF50;
    border-radius: 4px;
    box-shadow: 0 0 15px rgba(76, 175, 80, 0.4);
    animation: highlightFade 3s ease-out;
}

@keyframes highlightFade {
    0% {
        box-shadow: 0 0 15px rgba(76, 175, 80, 0.6);
    }
    100% {
        box-shadow: 0 0 5px rgba(76, 175, 80, 0.1);
    }
}

.archive-step-indicator {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f5f5f5;
    border: 2px solid #e5e5e5;
    color: #666;
    transition: all 0.3s ease;
}

.archive-step-indicator.active {
    background: var(--archive-green);
    border-color: var(--archive-green);
    color: white;
}

.archive-step-indicator.completed {
    background: var(--archive-green-bright);
    border-color: var(--archive-green-bright);
    color: white;
}

/* Покращена sticky панель для конструктора */
.archive-settings-panel-sticky {
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #ccc transparent;
}

/* Адаптивність для мобільних пристроїв */
@media (max-width: 959px) {
    .archive-settings-panel-sticky {
        position: static;
        max-height: none;
        overflow-y: visible;
    }
}

.archvie-new-request-highlight {
    background-color: #e8f5e8 !important;
    transition: background-color 3s ease;
}