/* ===================== */
/* Theme variables       */
/* ===================== */
body {
    --bs-mx-2: .5rem;
    --bs-mx-sm-3: 1rem;
    --bs-sm-breakpoint: 576px;
    --bs-md-breakpoint: 768px;
    --bs-lg-breakpoint: 992px;
    --bs-xl-breakpoint: 1200px;
    --bs-xxl-breakpoint: 1400px;
    --white: #fff;
    --blue-1: #588ec0;
    --blue-2: #286090;
    --blue-3: #3172aa;
    --dark-grey-1: #333333;
    --dark-grey-2: #7f7f7f;
    --light-grey-1: #eeeeee;
    --light-grey-2: #f5f5f5;
    --orange-1: #ec971f;
    --orange-2: #f89b34;
    --logo-width: 70px;
    --logo-border: 6px;
}

/* ===================== */
/* Base + layout         */
/* ===================== */
html, body {
    height: 100%;
    margin: 0;
}

.app {
    min-height: 100dvh; /* sticky footer layout */
    display: flex;
    flex-direction: column;
}

.app-header,
.app-footer {
    flex: 0 0 auto;
}

.app-main {
    flex: 1 1 auto;
    min-height: 0; /* important so overflow works */
    overflow: auto; /* scroll only here */
    position: relative;
}

.bg-image {
    background-image: url("/img/img_bg.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

/* ===================== */
/* Elements              */
/* ===================== */
.content {
    max-width: 1400px;
}

.logo {
    height: 80px;
    background: var(--white);
    border-radius: 5px;
    margin-bottom: 10px;
}

.gov-gr-logo {
    height: 50px;
}

.header {
    padding: 10px 30px 0 30px;
    background-color: var(--white);
    color: var(--dark-grey-2);
}

h3, h5, h6 {
    margin: 0;
}

hr {
    margin: 0;
    background: #000;
    border-bottom: 1px solid var(--orange-1);
}

/* Forms */
.form-container {
    padding: 20px;
    margin: 20px 0 20px 20px;
}

    .form-container h1,
    .form-container h2,
    .form-container h3 {
        margin-left: 30px;
        font-weight: 500;
    }

    .form-container .form-control,
    .form-container button {
        margin: 30px;
    }

        .form-container .form-control input,
        .form-container button input {
            width: 420px;
            max-width: 80vw;
        }

        .form-container .form-control h4 {
            margin: 0 0 10px 0;
        }

    .form-container button {
        padding: 20px 0;
        background-color: var(--white);
        border: 1px solid var(--white);
    }

/* Messages */
.stage-message {
    border-bottom: 1px solid #696cff;
    font-size: 17px;
    text-align: center;
    font-weight: 600;
    padding: 5px 0;
    letter-spacing: 2px;
    background: #e9e9ff;
    color: #696cff;
}

/* Utilities */
.mb-10 {
    margin-bottom: 10px !important;
}

.text-orange {
    color: var(--orange-1);
}

/* Tables */
table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    text-align: justify;
    padding: 8px;
    border-bottom: 1px solid #ddd;
    border-top: 1px solid #ddd;
}

/* Focus styles (keep Bootstrap-feel) */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem #fff, 0 0 0 0.25rem #258cfb;
}

/* ===================== */
/* Responsive            */
/* ===================== */
@media (max-width: 768px) {
    .form-container .form-control,
    .form-container button {
        margin: 30px;
    }

        .form-container .form-control input,
        .form-container button input {
            width: 100%;
            max-width: 80vw;
        }
}