/*
=====
UIA-TIMELINE
=====
*/

.uia-timeline__container{
    display: var(--uia-timeline-display, grid);
}

.uia-timeline__groups{
    display: var(--uia-timeline-groups-display, grid);;
    gap: var(--uia-timeline-groups-gap, 1rem);
}

/*
SKIN 3
*/

[data-uia-timeline-skin="3"]{
    --_uia-timeline-line-color_default: #17349d;
    --_uia-timeline-space: var(--uia-timeline-space, 2rem);
    --_uia-timeline-point-line-position: var(--uia-timeline-point-line-position, 2rem);
    --_uia-timeline-point-line-thickness: var(--uia-timeline-point-line-thickness, 2px);
}

[data-uia-timeline-skin="3"] .uia-timeline__container{
    position: relative;
    gap: var(--uia-timeline-annual-sections-gap, 2.5rem);
}

[data-uia-timeline-skin="3"] .uia-timeline__line{
    width: var(--uia-timeline-line-width, 3px);
    height: 100%;
    background-color: var(--uia-timeline-line-color, var(--_uia-timeline-line-color_default));
    position: absolute;
}

[data-uia-timeline-skin="3"] .uia-timeline__annual-sections{
    display: grid;
    gap: 2rem;
}

[data-uia-timeline-skin="3"] .uia-timeline__groups{
    display: grid;
    gap: var(--uia-timeline-groups-gap, 1rem);
    padding-inline-start: calc(var(--_uia-timeline-space));
}

[data-uia-timeline-skin="3"] .uia-timeline__group{
    position: relative;
    isolation: isolate;
}

[data-uia-timeline-skin="3"] .uia-timeline__point{
    position: relative;
    background-color: var(--uia-timeline-point-background-color, #e8fcff);
}

[data-uia-timeline-skin="3"] .uia-timeline__point::before{
    content: "";
    inline-size: 100%;
    block-size: var(--_uia-timeline-point-line-thickness);
    background-color: var(--uia-timeline-line-color, var(--_uia-timeline-line-color_default));
    position: absolute;
    inset-block-start: var(--_uia-timeline-point-line-position);
    inset-inline-start: calc(-1 * var(--_uia-timeline-space));
    z-index: -1;
}

[data-uia-timeline-skin="3"] .uia-timeline__year{
    width: fit-content;
    padding: var(--uia-timeline-year-padding, .25rem .75rem);
    background-color: var(--uia-timeline-year-background-color, var(--_uia-timeline-line-color_default));
    color: var(--uia-timeline-year-color, #f0f0f0);
    font-size: xxx-large;
    border-radius: 5px;
}

[data-uia-timeline-adapter-skin-3="ui-card-skin-#1"]{
    --uia-card-padding: var(--uia-timeline-point-padding, 1.5rem 1.5rem 1.25rem);
    --uia-card-border-left:  var(--uia-timeline-point-border-width, 3px) var(--uia-timeline-point-border-style, solid) var(--uia-timeline-point-border-color, var(--_uia-timeline-line-color_default));
    --uia-card-background-color: var(--uia-timeline-point-background-color);
}

/*
=====
UIA-CARD
=====
*/

[data-uia-card-skin="1"] .uia-card__container{
    display: grid;
    gap: .5rem;
    padding: var(--uia-card-padding);
    background-color: var(--uia-card-background-color);
    border-radius: var(--uia-card-border-radius, 10px);
    box-shadow: var(--uia-card-box-shadow, 0 5px 3px 0 rgba(0, 0, 0, .22), 0 1px 2px 0 rgba(0, 0, 0, .24));
    border-block-start: var(--uia-card-border-top, var(--uia-card-border-top-width, 0) var(--uia-card-border-top-style, solid) var(--uia-card-border-top-color));
    border-inline-end: var(--uia-card-border-right, var(--uia-card-border-right-width, 0) var(--uia-card-border-right-style, solid) var(--uia-card-border-right-color));
    border-block-end:	var(--uia-card-border-bottom, var(--uia-card-border-bottom-width, 0) var(--uia-card-border-bottom-style, solid) var(--uia-card-border-bottom-color));
    border-inline-start:	var(--uia-card-border-left, var(--uia-card-border-left-width, 0) var(--uia-card-border-left-style, solid) var(--uia-card-border-left-color));

}

[data-uia-card-skin="1"] .uia-card__intro{
    display: grid;
    gap: var(--uia-card-intro-gap, 1rem);
}

 .uia-card__version{
    grid-row: 1 / 1;
    width: fit-content;
    padding: var(--uia-card-time-padding, .25rem 1.25rem .25rem);
    background-color: var(--uia-card-time-background-color, #86c8d2);
    font-weight: var(--uia-card-time-font-weight, 700);
    font-size: var(--uia-card-time-font-size, 1.5rem);
    color: #496f73;
}

.uia-card__container li {
    padding-bottom: 1rem;
    font-size: 1.1rem;
}

/*
=====
DEMO
=====
*/

.naslov {
    color: #066480;
    font-family: 'Impact', sans-serif;
    font-size: 2rem;
    font-weight: 300;
    text-align: center;
    text-transform: uppercase;
}

:root{
    --uia-timeline-line-color: #4557bb;
    --uia-timeline-dot-color: #4557bb;
    --uia-timeline-arrow-color: #4557bb;
    --uia-timeline-point-line-thickness: 3px;
    --uia-timeline-point-border-color: #4557bb;
    --uia-timeline-group-padding: 1.5rem 1.5rem 1.25rem;
    --uia-timeline-year-background-color: #037791;
}

body{
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Open Sans, Ubuntu, Fira Sans, Helvetica Neue, sans-serif;
    color: #222;

    background-color: #f0f0f0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

p{
    margin-top: 0;
    margin-bottom: 1rem;
    line-height: 1.5;
}

p:last-child{
    margin-bottom: 0;
}

.page{
    max-width: 80ch;
    padding: 5rem 2rem 3rem;
    margin-inline: auto;
}

.linktr{
    display: flex;
    justify-content: flex-end;
    padding: 2rem;
    text-align: center;
}

.linktr__goal{
    background-color: rgb(209, 246, 255);
    color: rgb(8, 49, 112);
    box-shadow: rgb(8 49 112 / 24%) 0 2px 8px 0;
    border-radius: 2rem;
    padding: .75rem 1.5rem;
}

/* =========================
   RESET PASSWORD PAGES
   ========================= */
.reset-page *,
.reset-page *::before,
.reset-page *::after {
    box-sizing: border-box;
}

.reset-page .mb-3,
.reset-page .mb-4 {
    margin-bottom: 1rem;
}

.reset-page {
    min-height: 100vh;
    background: linear-gradient(135deg, #e8fcff, #f0f0f0);
    display: flex;
    align-items: center;
    justify-content: center;
}

.reset-page__card {
    width: 100%;
    max-width: 600px;
}

.reset-page__card > div {
    padding: 2rem;
}

/* title */
.reset-page__title {
    text-align: center;
    font-size: 1.8rem;
    font-weight: 600;
    color: #066480;
    margin-bottom: 1.5rem;
}

/* inputs */
.reset-page input[type="password"] {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    border: 1px solid #cfd8dc;
    font-size: 1rem;
}

.reset-page input[type="password"]:focus {
    outline: none;
    border-color: #13848f;
    box-shadow: 0 0 0 2px rgba(19, 132, 143, 0.15);
}

/* labels */
.reset-page label {
    font-weight: 500;
    color: #37474f;
    margin-bottom: 0.25rem;
    display: block;
}

/* button */
.reset-page__btn {
    width: 100%;
    margin-top: 1rem;
    padding: 0.75rem;
    background-color: #13848f;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
}

.reset-page__btn:hover {
    background-color: #0e6a73;
}

/* alerts */
.reset-page__alert {
    padding: 0.75rem 1rem;
    border-radius: 6px;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.reset-page__alert--error {
    background-color: #ffe8e9;
    color: #8a1f2d;
    border-left: 4px solid #cb8f93;
}

.reset-page__alert--success {
    background-color: #e8fcff;
    color: #0e6a73;
    border-left: 4px solid #13848f;
}

/* link */
.reset-page__link {
    display: inline-block;
    margin-top: 1rem;
    color: #13848f;
    font-weight: 500;
    text-decoration: none;
}

.reset-page__link:hover {
    text-decoration: underline;
}