/* =========================================================
   ОБЩАЯ ОБЛАСТЬ СТРАНИЦЫ
   ========================================================= */

.second-level {

    width: 100%;

    min-height: 100vh;

    padding: 20px;

    background: #EFF3F6;

    box-sizing: border-box;

}


/* =========================================================
   ОСНОВНОЙ ЗАГОЛОВОК 
   ========================================================= */

.history_detail_title {

     font-family:
        Inter,
        system-ui,
        sans-serif;

    font-size: 17px;

    font-weight: 500;

    line-height: 1.4;

    color: #4B5563;


}

.history_detail_title_blue {

    font-family:
        Inter,
        system-ui,
        sans-serif;

    font-size: 17px;

    font-weight: 500;

    line-height: 1.4;

    color: #1D4ED8;



}

/* =========================================================
   ОСНОВНАЯ ОБЛАСТЬ
   ========================================================= */

.page-layout {

    width: 100%;

    max-width: 1470px;

    margin: 0 auto;

}


/* =========================================================
   ВЕРХНИЙ БЛОК СТРАНИЦЫ
   ========================================================= */

.page-header {

    position: sticky;

    top: 0;

    z-index: 100;

    display: flex;

    align-items: center;

    padding: 18px 20px;

    background: #FFFFFF;

    border: 1px solid #E5E7EB;

    border-radius: 10px;

    box-sizing: border-box;

}


/* =========================================================
   КНОПКА НАЗАД
   ========================================================= */

.page-header-button {

    flex-shrink: 0;

}


/* =========================================================
   ЗАГОЛОВОК
   ========================================================= */

.page-header-title {

    margin-left: 120px;

}


/* =========================================================
   ОСНОВНАЯ РАБОЧАЯ ОБЛАСТЬ
   ========================================================= */

.page-content {

    width: 100%;

    margin-top: 20px;

    padding: 28px;

    background: #FFFFFF;

    border: 1px solid #E5E7EB;

    border-radius: 10px;

    box-sizing: border-box;

}



/* =========================================================
   СЕКТОРЫ ИСТОРИИ
   ========================================================= */

.history-sector,
.timeline-event {

    width: 100%;

    padding: 20px;

    background: #FFFFFF;

    border: 1px solid #E5E7EB;

    border-radius: 10px;

    box-sizing: border-box;

    transition: border-color 0.2s ease;

}


.history-sector:hover,
.timeline-event:hover {

    border-color: #1D4ED8;

}


.history-sector + .history-sector {

    margin-top: 12px;

}


#delivery-timeline {

    margin-top: 12px;

}


.timeline-event + .timeline-event {

    margin-top: 12px;

}


.history-sector-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.history-sector-title-center {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.history-sector-title-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
}

.history-sector-title-icon::before {
    content: "";
    display: block;

    width: 34px;
    height: 38px;

    background-color: #1D4ED8;

    -webkit-mask-image: url("/static/assets/svg/history_car.svg");
    mask-image: url("/static/assets/svg/history_car.svg");

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    -webkit-mask-position: center;
    mask-position: center;

    -webkit-mask-size: contain;
    mask-size: contain;

    filter:
        drop-shadow(1px 0 0 #1D4ED8)
        drop-shadow(-1px 0 0 #1D4ED8)
        drop-shadow(0 1px 0 #1D4ED8)
        drop-shadow(0 -1px 0 #1D4ED8)
        drop-shadow(0.7px 0.7px 0 #1D4ED8)
        drop-shadow(-0.7px 0.7px 0 #1D4ED8)
        drop-shadow(0.7px -0.7px 0 #1D4ED8)
        drop-shadow(-0.7px -0.7px 0 #1D4ED8);
}

.history_detail_text {
    margin: 0;
    font-family:
        Inter,
        system-ui,
        sans-serif;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.3;
    color: #374151;
}

.apply_sector {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: nowrap;
    white-space: nowrap;
    width: 100%;
}

.apply_sector_icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    margin: 0;
    padding: 0;
}

.apply_sector_icon .balance-icon {
    display: block;
    width: 42px;
    height: 42px;
}

.history_detail_text_blue {
    margin: 0;
    font-family:
        Inter,
        system-ui,
        sans-serif;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.3;
    color: #1D4ED8;
}


/* =========================================================
   КРУГЛЫЕ ОБЪЕКТЫ
   ========================================================= */

.history-orb-sky,
.history-orb-blue,
.history-orb-navy,
.history-orb-graphite {

    width: 15px;

    height: 15px;

    flex: 0 0 15px;

    border-radius: 70%;
	
	margin-left: 17px;
	
	margin-right: 8px;

    transition:
        transform .25s ease;

}


/* =========================================================
   НАВЕДЕНИЕ
   ========================================================= */

.history-orb-sky:hover,
.history-orb-blue:hover,
.history-orb-navy:hover,
.history-orb-graphite:hover {

    transform: scale(1.08);

}


/* =========================================================
   СВЕТЛО-ГОЛУБОЙ
   ========================================================= */

.history-orb-sky {

    background: radial-gradient(
        circle at 18% 28%,
        #E0F2FE 0%,
        #7DD3FC 22%,
        #38BDF8 58%,
        #0284C7 100%
    );

}


/* =========================================================
   СИНИЙ
   ========================================================= */

.history-orb-blue {

    background: radial-gradient(
        circle at 28% 28%,
        #DBEAFE 0%,
        #60A5FA 18%,
        #2563EB 58%,
        #1E3A8A 100%
    );

}


/* =========================================================
   ТЕМНО-СИНИЙ
   ========================================================= */

.history-orb-navy {

    background: radial-gradient(
        circle at 28% 28%,
        #A5B4FC 0%,
        #4F7DFF 18%,
        #1E40AF 56%,
        #172554 100%
    );

}


/* =========================================================
   ГРАФИТОВЫЙ
   ========================================================= */

.history-orb-graphite {

    background: radial-gradient(
        circle at 28% 28%,
        #F9FAFB 0%,
        #D1D5DB 18%,
        #6B7280 56%,
        #374151 100%
    );

}

/* =========================================================
   В ОДНОМ ПРЕДЛОЖЕНИИ
   ========================================================= */

.history-together-text {
    margin: 0;
    font-family:
        Inter,
        system-ui,
        sans-serif;

    font-size: 17px;

    font-weight: 500;

    line-height: 1.4;
    color: #374151;
}

.history-together-text-blue {
    margin: 0;
    font-family:
        Inter,
        system-ui,
        sans-serif;

    font-size: 17px;

    font-weight: 500;

    line-height: 1.4;
    color: #1D4ED8;
}


/* =========================================================
   ТАБЛИЦА
   ========================================================= */
   
.history-participants-table {
    border-collapse: collapse;

    font-family: Inter, system-ui, sans-serif;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.4;
    color: #374151;

    border: 1px solid #374151;
}

.history-participants-table th,
.history-participants-table td {
    padding: 8px;
    border: 1px solid #374151;
}

.history-participants-table th {
    color: #374151;
}

.history-participants-table td {
    text-align: center;
}

.history-participants-table th {
    text-align: center;
}

/* =========================================================
   РОМБИЧЕСКИЕ ОБЪЕКТЫ
   ========================================================= */

.history-square-sky,
.history-square-blue,
.history-square-navy,
.history-square-graphite {

    display: inline-block;

    width: 12px;

    height: 12px;

    margin-right: 9px;

    border-radius: 3px;

    vertical-align: -1px;

    transform: rotate(45deg);

    transition:
        transform .25s ease;

}


/* =========================================================
   НАВЕДЕНИЕ
   ========================================================= */

.history-square-sky:hover,
.history-square-blue:hover,
.history-square-navy:hover,
.history-square-graphite:hover {

    transform:
        rotate(45deg)
        scale(1.08);

}


/* =========================================================
   СВЕТЛО-ГОЛУБОЙ
   ========================================================= */

.history-square-sky {

    background: radial-gradient(
        circle at 18% 28%,
        #E0F2FE 0%,
        #7DD3FC 22%,
        #38BDF8 58%,
        #0284C7 100%
    );

}


/* =========================================================
   СИНИЙ
   ========================================================= */

.history-square-blue {

    background: radial-gradient(
        circle at 28% 28%,
        #DBEAFE 0%,
        #60A5FA 18%,
        #2563EB 58%,
        #1E3A8A 100%
    );

}


/* =========================================================
   ТЕМНО-СИНИЙ
   ========================================================= */

.history-square-navy {

    background: radial-gradient(
        circle at 28% 28%,
        #A5B4FC 0%,
        #4F7DFF 18%,
        #1E40AF 56%,
        #172554 100%
    );

}


/* =========================================================
   ГРАФИТОВЫЙ
   ========================================================= */

.history-square-graphite {

    background: radial-gradient(
        circle at 28% 28%,
        #F9FAFB 0%,
        #D1D5DB 18%,
        #6B7280 56%,
        #374151 100%
    );

}

/* =========================================================
   ТАБЛИЦА ОКОНЧАТЕЛЬНОГО РАСЧЕТА
   ========================================================= */

.history-calculation-table {
    border-collapse: collapse;

    font-family: Inter, system-ui, sans-serif;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.4;
    color: #374151;
}

.history-calculation-table td {
    padding: 4px 8px;
    border: 1px solid transparent;
}

.history-calculation-table td:last-child {
    color: #1D4ED8;
    text-align: right;
}