@font-face {
    font-family: "Artegra";
    src: url(../fonts/ArtegraSansThin.woff);
    font-weight: 100;
}
@font-face {
    font-family: "Artegra";
    src: url(../fonts/ArtegraSansExtraLight.woff);
    font-weight: 200;
}
@font-face {
    font-family: "Artegra";
    src: url(../fonts/ArtegraSansLight.woff);
    font-weight: 300;
}
@font-face {
    font-family: "Artegra";
    src: url(../fonts/ArtegraSansRegular.woff);
    font-weight: 400;
}
@font-face {
    font-family: "Artegra";
    src: url(../fonts/ArtegraSansMedium.woff);
    font-weight: 500;
}
@font-face {
    font-family: "Artegra";
    src: url(../fonts/ArtegraSansBold.woff);
    font-weight: 700;
}
@font-face {
    font-family: "Artegra";
    src: url(../fonts/ArtegraSansExtraBold.woff);
    font-weight: 800;
}
@font-face {
    font-family: "Artegra";
    src: url(../fonts/ArtegraSansBlack.woff);
    font-weight: 900;
}

:root {
    --white: #fff;
    --black: #000;
    --primaryColor: #00DCCD;
    --grey36: #364344;
    --greyFB: #FBFBFC;
    --greyF6: #F6F6F6;
    --greyF3: #F3F4F7;
    --greyBC: #BCBCBC;
    --black17: #171717;
    --black2D: #2D2D2D;
    --silverCB: #CBCBCB;
    --teal: #0087A2;
    --green: #06E9BB;
    --darkGreen: #02BDB3;
    --red: #ea2b40;
    --fuchsia: #FF007F;
    --fontArtegra: "Artegra", sans-serif;
    --fontInter: "Inter", sans-serif;
}

html,
body,
ul,
ol {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    cursor: auto;
}

body {
    font-family: var(--fontArtegra);
    color: var(--grey36);
/*    background-color: var(--greyFB);*/
    background-color: rgb(240,240,240);
}

.no-scroll {
    overflow: hidden;
    position: fixed;
    width: 100vw;
}

.justify-items-center {
    justify-items: center;
}

h1, .h1 {
    font-weight: 800;
}

h2, .h2 {
    font-size: 32px;
}

h3, .h3 {
    font-size: 25px;
}

a {
    text-decoration: none;
    color: inherit;
}

.mt-offset {
    margin-top: 70px;
}

.bg-darkGreen {
    background-color: var(--darkGreen) !important;
}

.bg-fuchsia {
    background-color: var(--fuchsia) !important;
}

.btn-primary,
.sweet-alert button,
.btnSecondary,
.btn-tertiary {
    transition: ease-out .3s;
    padding: 10px 25px;
    font-weight: 700;
}

.btn-primary,
.sweet-alert button {
    background-color: var(--black17);
    border-color: var(--black17);
    color: var(--white);
}

.btnSecondary {
    background-color: var(--green);
    border-color: var(--green);
    color: var(--black);
}

.btn-tertiary,
.price-hot + .btnBuy {
    background-color: var(--fuchsia);
    border-color: var(--fuchsia);
    color: var(--white);
    font-weight: 700;
}

.btn-primary:hover, .btn-primary:active, .btn-primary:focus-visible,
.sweet-alert button:hover, .sweet-alert button:active, .sweet-alert button:focus-visible {
    background-color: var(--primaryColor) !important;
    border-color: var(--primaryColor) !important;
    box-shadow: none;
    color: var(--black);
}

.btn.btnSecondary:hover, .btn.btnSecondary:active, .btn.btnSecondary:focus-visible,
.btn.btn-tertiary:hover, .btn.btn-tertiary:active, .btn.btn-tertiary:focus-visible {
    background-color: var(--black17);
    border-color: var(--black17);
    color: var(--white) !important;
}

.btn-pad {
    padding: 15px 32px;
}

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

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

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

#maincontent {
    position: relative;
    z-index: 1;
    background: var(--greyFB);
    margin-bottom: 520px;
}

#back-top {
  bottom: 0;
  opacity: 0;
  z-index: 9;
  right: 20px;
  width: 50px;
  color: #fff;
  height: 50px;
  cursor: pointer;
  font-size: 25px;
  position: fixed;
  line-height: 47px;
  text-align: center;
  border-radius: 5px;
  background: #252525;
  -o-transition: all 0.6s ease;
  transition: all 0.6s ease;
  transform: translateY(40px);
  -ms-transform: translateY(40px);
  -webkit-transition: all 0.6s ease;
  -webkit-transform: translateY(40px);
  display: none !important;
}

#back-top.active {
  opacity: 1;
  -o-transition: all 0.6s ease;
  transition: all 0.6s ease;
  -webkit-transition: all 0.6s ease;
  -ms-transform: translateY(-20px);
  /* IE 9 */
  -webkit-transform: translateY(-20px);
  /* Safari */
  transform: translateY(-20px);
}

#back-top:hover {
  opacity: 0.9;
}

a.scrollup {
    background: url(../media/arrow-up.svg) no-repeat center center;
    background-size: 70%;
    bottom: 0;
    display: none;
    position: fixed;
    right: 10px;
    text-indent: -9999px;
    width: 43px;
    height: 100px;
    text-decoration: none;
    padding: 0px 0px 0;
    z-index: 10000;
    transition: height 350ms ease-in-out, opacity 750ms ease-in-out;
}

.scrollup.is-visible {
    display: inline;
    opacity: 1;
}

#wrapper {
    width: 100%;
    position: relative;
}

@media (max-width: 575px) {
    .h2, h2 {
        font-size: 30px;
    }

    .h3, h3 {
        font-size: 21px;
    }
}

/* HEADER
=================== */
#header {
    background: var(--white);
    box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.05);
}

.logo img {
    height: 40px;
}

@media (max-width: 768px) {
    .logo img {
        height: 30px;
    }
}

.progress {
    background-color: var(--white);
}

.progress-bar {
    background-color: var(--primaryColor);
}

    .progress-bar.inactive {
        background-color: var(--bs-progress-bg);
    }

.user a {
    color: var(--grey36);
    vertical-align: middle;
}

.user img {
    width: 21px;
    height: 21px;
}

@media (max-width: 1199px) {
    .user a {
        font-size: 14px;
    }
}

@media (max-width: 991px) {
/*    .user a {
        font-size: 20px;
    }*/

    .user img {
        width: 25px;
        height: 28px;
    }
}

@media (max-width: 575px) {
    .user {
        text-align: center;
    }
}

/* FOOTER
===================== */
.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    transform: translateZ(0);
    background-color: var(--black17);
    color: var(--white);
    font-size: 18px;
    height: 520px;
}

.footer-container {
    min-height: 480px;
    padding: 55px 0;
}

.footer-logo {
    text-align: center;
}

.footer-nav a {
    margin: 5px 0;
    position: relative;
}

.footer-nav > a::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--white);
    transform-origin: bottom left;
    transition: transform .3s ease-out;
    transform: scaleX(0);
}

.footer-nav > a:hover::after {
    transform: scaleX(1);
}

.socials a:not(:last-child) {
    margin-right: 10px;
}

.socials a:hover,
.copyright a:hover {
    color: var(--green);
    transition: .3s ease-in-out;
}

@media (max-width: 991px) {
    #maincontent {
        margin-bottom: 0px;
    }

    .footer {
        font-size: 16px;
        position: static;
        height: unset;
        margin-bottom: 48px;
    }

    .footer.custom-mb {
        margin-bottom: 48px;
    }
}

@media (max-width: 575px) {
    .footer {
        font-size: 15px;
    }

    .footer-container {
        padding: 20px 0;
    }
}

/* HOMEPAGE
===================== */
.startpage {
    display: flex;
    width: 100%;
    justify-content: center;
    padding-top: 70px;
    margin-top: -70px;
}

.intro-main {
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
    padding: 115px 0;
}

/*.intro-main::after {
    content: "";
    background: url(../images/svg/shape.svg) no-repeat bottom center;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
}*/
.intro-bg-svg {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 1px;
    right: 0;
    padding: 0;
}

.hero-text {
    padding: 0 140px;
}

.hero-text ul {
    display: flex;
    gap: 40px;
    list-style: none;
}

.hero-text ul li::before {
    content: "✔";
    font-weight: 900;
    margin-right: 8px;
    color: var(--green);
}

.main-text {
    position: relative;
    z-index: 2;
}

.main-text h1 {
    font-size: 56px;
}

.form-selection {
    display: flex;
/*    justify-content: space-between;*/
    gap: 30px;
}

.form-box {
    border: 1px solid #A9A9A9;
    box-shadow: 5px 14px 20px rgba(0, 93, 86, 0.18);
    padding: 24px;
    border-radius: 21px;
    background-color: var(--white);
    transition: .3s ease-in-out;
}

a.form-box {
    font-size: 24px;
    font-weight: 800;
}

a.form-box:hover {
    box-shadow: 0px 5px 20px 20px rgba(0, 131, 122, 0.6);
}

.head_icons {
    display: block;
    border-bottom: 1px solid #EAEAEA;
    padding-bottom: 15px;
    margin-bottom: 10px;
}

.intro-hero-image {
    border-radius: 16px;
    box-shadow: 10px 4px 24px rgba(2, 45, 43, 0.26);
    width: 512px;
    height: 512px;
    object-fit: cover;
    position: relative;
    z-index: 2;
}

.hot-offers .h2,
.vimata h2,
.reviews h2,
.blog h2,
.asfalisi h2,
.icons-text-section h2,
.textpage h2 {
    font-weight: 800;
}

.promo-box,
.review-box {
    position: relative;
    background-color: var(--white);
    border: 1px solid #009189;
    border-radius: 8px;
    padding: 40px 24px 24px;
    max-width: 350px;
    min-height: 215px;
    box-shadow: 0 4px 11px #005752;
}

.promo_timi {
    position: absolute;
    top: -15px;
    background-color: var(--fuchsia);
    padding: 4px 8px;
    font-weight: 800;
    color: var(--white);
}

.promo_title,
.vimata-title {
    font-weight: 800;
    color: var(--black);
}

.promo_subtitle p {
    margin: 0;
}

.vimata .form-selection {
    justify-content: space-around;
}

.vimata-text {
    max-width: 500px;
}

.small-span {
    display: block;
    font-size: 16px;
}

.logo-swiper {
    background-color: var(--white);
}

.logo-swiper .swiper-slide {
    padding: 20px 0;
}

.logo-swiper .swiper-slide img {
    width: auto;
    height: 100px;
}

.rev-swiper {
    height: 450px;
    background: url(../images/hero-image.png) no-repeat center center;
}

.rev-swiper .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
}

.review-box {
    width: 600px;
    max-width: unset;
}

.blog-swiper {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
}

.blog-intro-img {
    border-radius: 21px 21px 0 0;
    height: 300px;
    width: 100%;
    object-fit: cover;
}

.index_news_titlebox {
    padding: 8px 20px 0;
}

.index_news_titlebox h3 {
    font-size: 20px;
}

.blog-swiper:before {
    content: "";
    z-index: 2;
    background: linear-gradient(270deg, rgba(242, 242, 242, 0) 0%, rgba(242, 242, 242, 0.83) 81.5%);
    left: 0;
    top: 0;
    position: absolute;
    height: 100%;
    width: 10%;
    display: block;
}

.blog-swiper:after {
    content: "";
    z-index: 2;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    background: linear-gradient(270deg, rgba(242, 242, 242, 0) 0%, rgba(242, 242, 242, 0.83) 81.5%);
    right: 0;
    top: 0;
    position: absolute;
    height: 100%;
    width: 10%;
    display: block;
}

.blog-swiper-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    bottom: 8px;
    left: 0;
    width: 100%;
}

.swiper-pagination-bullet-active {
    background: var(--green);
}

.swiper-slide .form-box {
    min-height: 500px;
}

.icons-text {
    position: relative;
    display: flex;
    flex-wrap: wrap;
}

.icons-text-item {
    padding: 24px;
}

.icons-text-content {
    position: relative;
    display: flex;
    flex-direction: column;
}

.icons-text-icon img {
    height: 80px;
}

.icons-text-title {
    color: var(--darkGreen);
    font-size: 20px;
    font-weight: 700;
    padding: 10px 0;
}

.icons-text-text ol {
    padding-left: 20px;
}

@media (min-width: 2000px) {
    .intro-hero-image {
        width: 720px;
        height: 720px;
    }
}

@media (max-width: 1399px) {
    .hero-text {
        padding: 0px 15px;
    }

    .form-box {
        padding: 18px;
    }
}

@media (max-width: 1199px) {
    a.form-box {
        font-size: 20px;
    }

    .form-box {
        padding: 14px;
    }

    .head_icons {
        height: 60px;
    }

    .intro-hero-image {
        width: 450px;
        height: 450px;
    }
}

@media (min-width: 992px) {
    .promo-banner:not(:last-of-type) {
        padding-right: 15px;
    }
}

@media (max-width: 991px) {
    .form-selection {
        flex-wrap: wrap;
    }

    a.form-box {
        width: 150px;
    }

    .main-text h1 {
        font-size: 42px;
    }
}

@media (min-width: 768px) {
    .logo-swiper .swiper-wrapper {
        padding-left: 70px
    }
}

@media (max-width: 767px) {
    .hero-text .logo {
        display: none;
    }

    .intro-main {
        gap: 50px;
        padding: 30px 0;
    }

    .blog-swiper .swiper-slide-active {
        padding: 0 70px;
    }

    .blog-swiper::before,
    .blog-swiper::after {
        display: none;
    }

    .form-selection {
        flex-direction: row;
    }

    .intro-hero-image {
        width: 350px;
        height: 350px;
    }
}

@media (max-width: 575px) {
    .hero-text ul {
        gap: 20px;
    }

    .form-selection {
        gap: 12px;
    }

    .form-box {
        padding: 10px;
    }

    a.form-box {
        width: 120px;
        font-size: 16px;
    }

    .head_icons {
        height: 55px;
    }

    .blog-swiper .swiper-slide-active {
        padding: 0 20px;
    }
}

@media (max-width: 410px) {
    a.form-box {
        width: 95px;
        font-size: 13px;
    }

    .head_icons {
        height: 45px;
    }
}

/* LOGIN / REGISTER
===================== */
.forms-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 55px 0;
}

.forms {
    display: flex;
    align-items: flex-start;
    margin-top: 30px;
}

.form-wrapper {
    animation: hideLayer .3s ease-out forwards;
}

.form-wrapper.is-active {
    animation: showLayer .3s ease-in forwards;
}

@keyframes showLayer {
    50% {
        z-index: 1;
    }

    100% {
        z-index: 1;
    }
}

@keyframes hideLayer {
    0% {
        z-index: 1;
    }

    49.999% {
        z-index: 1;
    }
}

.switcher {
    position: relative;
    display: block;
    margin-right: auto;
    margin-left: auto;
    padding: 0;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--grey36);
    background-color: transparent;
    border: none;
    outline: none;
    transition: all .3s ease-out;
}

.form-wrapper.is-active .switcher-login,
.form-wrapper.is-active .switcher-signup {
    font-weight: 700;
}

.underline {
    position: absolute;
    bottom: -5px;
    left: 0;
    overflow: hidden;
    pointer-events: none;
    width: 100%;
    height: 2px;
}

.underline::before {
    content: '';
    position: absolute;
    top: 0;
    left: inherit;
    display: block;
    width: inherit;
    height: inherit;
    background-color: currentColor;
    transition: transform .2s ease-out;
}

.switcher-login .underline::before {
    transform: translateX(101%);
}

.switcher-signup .underline::before {
    transform: translateX(-101%);
}

.form-wrapper.is-active .underline::before {
    transform: translateX(0);
}

#registerform,
#loginform {
    overflow: hidden;
    min-width: 350px;
    margin-top: 50px;
    padding: 30px 25px;
    border-radius: 5px;
    transform-origin: top;
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

#loginform {
    animation: hideLogin .3s ease-out forwards;
}

.form-wrapper.is-active #loginform {
    animation: showLogin .3s ease-in forwards;
}

#registerform {
    animation: hideSignup .3s ease-out forwards;
}

.form-wrapper.is-active #registerform {
    animation: showSignup .3s ease-in forwards;
}

#registerform fieldset,
#loginform fieldset {
    position: relative;
    opacity: 0;
    margin: 0;
    padding: 0;
    border: 0;
    transition: all .3s ease-out;
    pointer-events: none;
}

#loginform fieldset {
    transform: translateX(-50%);
}

#registerform fieldset {
    transform: translateX(50%);
}

.form-wrapper.is-active #registerform fieldset,
.form-wrapper.is-active #loginform fieldset {
    opacity: 1;
    transform: translateX(0);
    transition: opacity .4s ease-in, transform .35s ease-in;
    pointer-events: all;
}

#registerform legend,
#loginform legend {
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
    clip: rect(0 0 0 0);
}

#registerform label.errorTxt,
#loginform label.errorTxt {
    max-width: 300px;
}

.log-reg-link {
    text-decoration: underline;
    font-weight: 700;
}

.log-reg-link:hover {
    text-decoration: none;
}

.disclaimer {
    font-size: 14px;
}

@media (min-width: 992px){
    .log-reg {
        max-width: 800px;
    }
}

@media (min-width: 768px) {
    @keyframes showLogin {
        0% {
            background: var(--primaryColor);
            transform: translate(40%, 10px);
        }

        50% {
            transform: translate(0, 0);
        }

        100% {
            background-color: #fff;
            transform: translate(35%, -20px);
        }
    }

    @keyframes hideLogin {
        0% {
            background-color: #fff;
            transform: translate(35%, -20px);
        }

        50% {
            transform: translate(0, 0);
        }

        100% {
            background: var(--primaryColor);
            transform: translate(40%, 10px);
        }
    }

    @keyframes showSignup {
        0% {
            background: var(--primaryColor);
            transform: translate(-40%, 10px) scaleY(.7);
        }

        50% {
            transform: translate(0, 0) scaleY(.8);
        }

        100% {
            background-color: #fff;
            transform: translate(-35%, -20px) scaleY(1);
        }
    }

    @keyframes hideSignup {
        0% {
            background-color: #fff;
            transform: translate(-35%, -20px) scaleY(1);
        }

        50% {
            transform: translate(0, 0) scaleY(.8);
        }

        100% {
            background: var(--primaryColor);
            transform: translate(-40%, 10px) scaleY(.7);
        }
    }
}

@media (max-width: 767px) {
    .forms .form-wrapper {
        max-width: 250px;
    }

    @keyframes showLogin {
        0% {
            background: var(--primaryColor);
            transform: translate(40%, 10px);
        }

        100% {
            background-color: #fff;
            transform: translate(20%, -20px);
        }
    }

    @keyframes hideLogin {
        0% {
            background-color: #fff;
            transform: translate(35%, -20px);
        }

        100% {
            background: var(--primaryColor);
            transform: translate(20%, 10px);
        }
    }

    @keyframes showSignup {
        0% {
            background: var(--primaryColor);
            transform: translate(-40%, 10px) scaleY(.7);
        }

        100% {
            background-color: #fff;
            transform: translate(-45%, -20px) scaleY(1);
        }
    }

    @keyframes hideSignup {
        0% {
            background-color: #fff;
            transform: translate(-35%, -20px) scaleY(1);
        }

        100% {
            background: var(--primaryColor);
            transform: translate(-40%, 10px) scaleY(.7);
        }
    }
}

@media (max-width: 575px) {
    .forms .form-wrapper {
        max-width: 150px;
    }

    #registerform, #loginform {
        min-width: 300px;
    }

    @keyframes showLogin {
        0% {
            background: var(--primaryColor);
            transform: translate(0%, 10px);
        }

        100% {
            background-color: #fff;
            transform: translate(0%, -20px);
        }
    }

    @keyframes hideLogin {
        0% {
            background-color: #fff;
            transform: translate(0%, -20px);
        }

        100% {
            background: var(--primaryColor);
            transform: translate(0%, -30px);
        }
    }

    @keyframes showSignup {
        0% {
            background: var(--primaryColor);
            transform: translate(-50%, 10px) scaleY(.7);
        }

        100% {
            background-color: #fff;
            transform: translate(-50%, 0px) scaleY(1);
        }
    }

    @keyframes hideSignup {
        0% {
            background-color: #fff;
            transform: translate(-50%, 0px) scaleY(1);
        }

        100% {
            background: var(--primaryColor);
            transform: translate(-50%, -15px) scaleY(.7);
        }
    }
}

/* USER DASHBOARD
===================== */
.dash-menu {
    min-width: 500px;
    border: 1px solid rgba(203, 203, 203, 0.5);
    border-radius: 8px;
    background-color: var(--white);
    padding: 15px 25px;
}

.dash-menu-banner {
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    background-color: var(--white);
    padding: 10px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.04);
    z-index: 100;

}

.tab-content {
    margin: 0 auto;
}

#offcanvasMenu {
    max-width: 300px;
}

#mob-tab .nav-link,
#tab .nav-link {
    text-align: start;
    color: var(--grey36);
}

.nav-icon {
    width: 30px;
    margin-right: 15px;
}

#offcanvasMenu .offcanvas-header {
    padding-bottom: 0;
}

.menu-header {
    display: flex;
    flex-direction: column;
    padding: 0 10px;
}

.menu-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.profile-pic {
    height: 80px;
    object-fit: cover;
    border-radius: 50px;
}

#editPanel {
    margin-top: 30px;
}



.nav-pills .nav-link.active, 
.nav-pills .show > .nav-link {
    background-color: var(--primaryColor);
}

.contact-container {
    display: flex;
    align-items: center;
}

.btn-dismiss {
    background-color: #5d5d5d;
    border-color: #5d5d5d;
}

.btn-dismiss:hover {
    background-color: #777777 !important;
    border-color: #777777 !important;
    color: var(--white);
}

@media (max-width: 575px) {
    .nav-icon {
        width: 35px;
    }
}

/* INSURANCE FORM
===================== */
#loadinsuranceform,
#offersSection {
    min-height: 100dvh;
}

.div_error {
    margin-bottom: 1rem;
}

.div_error.alert {
    background-color: rgba(241, 174, 181, .15);
    max-width: unset;
}

.line {
    flex: 1 1 0%;
    height: 1px;
    background-color: var(--black2D);
}

.btn-primary.dropdown-toggle {
    padding: 5px 10px;
}

#accordionForm.accordion {
    min-width: 940px;
    max-width: 940px;
}

.accordion-body {
    padding: 16px 0 50px;
}

.form-wrapper {
    max-width: 940px;
}

.form-flex > .col-12.col-xl-6 {
/*    max-width: 450px;*/
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.main-form-container,
.main-offers-container,
.main-contract-container {
    display: flex;
    flex-direction: column;
}

.main-container {
    display: flex;
    justify-content: center;
    flex-grow: 1;
}

.main-content {
    display: flex;
    justify-content: center;
    min-width: 400px;
    max-width: 100%;
    padding: 0 10px 200px;
    flex: 1 1 0%;
}

#contractform .main-content {
    padding: 0 10px 100px;
}

.main-sidebar {
    display: block;
    padding: 0;
    min-width: 346px;
    width: 346px;
    background-color: var(--white);
    box-shadow: 0px 1px 20px rgba(0,0,0,0.08);
    box-sizing: border-box;
}

.main-sidebar aside {
    position: sticky;
    top: 60px;
/*    top: 90px;*/
/*    height: 650px;*/
    height: calc(100dvh - 70px);
    overflow-y: auto;
    padding-inline: 8px;
}

.modal-header .btn-close:focus {
    box-shadow: none;
}

.modal-content {
    max-height: 550px;
    overflow-y: auto !important;
}

/*aside.form-aside {
    height: 250px;
}

aside.offers-aside {
    height: 350px;
}*/

.fixed-wrapper {
    display: block;
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1030;
    font-size: 16px;
    background: var(--white);
    box-shadow: 0 -10px 16px rgba(0, 0, 0, 0.16);
    padding: 20px;
}

.fixed-wrapper .card {
    border: none;
    padding: 0;
    max-height: 500px;
    overflow-y: auto;
}

.alert-icon {
    width: 40px;
}

#loadinsuranceform label,
#contractform label:not(#greenCardLabel),
#loginform label,
#registerform label,
#resetform label {
    color: var(--grey36);
    font-weight: 700;
    padding-bottom: 5px;
}

#rememberMe + label,
#acceptDataUse + label,
#acceptTOS + label {
    font-weight: 400;
    display: inline;
}

#eisagwgiNext:disabled,
#idioktitiNext:disabled,
#asfalNext:disabled,
#ownNext:disabled,
#docsNext:disabled {
    background-color: var(--grey36);
    border-color: var(--grey36);
}

.accordion, .accordion-item, .accordion-collapse, .accordion-button {
    background-color: transparent !important;
    border: none;
    --bs-accordion-body-padding-x: 0;
}

.accordion-button, .accordion-button:hover, .form-inner-header {
    color: var(--grey36) !important;
    box-shadow: none !important;
    font-weight: 800;
    padding: 16px 0;
}

.form-inner-header {
    padding-bottom: 16px;
    padding-left: 12px;
}

.alert {
    background-color: var(--greyF3);
    max-width: 900px;
}

.select2-container {
    z-index: 100000;
}

#insuranceform .select2-container {
    z-index: 1;
}

.form-group .select2-container {
    width: 100% !important;
}

.select2-container .select2-selection--single {
    height: 45px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 45px !important;
    font-weight: 400;
    color: #000 !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 45px !important;
    display: block;
    width: 100%;
    padding: .375rem 2.25rem .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    display: none !important;
}

.select2-container--default .select2-selection--single {
    cursor: default !important;
    border-radius: 6px !important;
}

.form-group {
    position: relative;
    width: 100%;
    padding-bottom: 20px;
}

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control,
.select2-container--default .select2-selection--single {
    border-color: #e5e5e5 !important;
}

.form-control:focus {
    border: solid 2px var(--primaryColor) !important;
    box-shadow: none;
}

.btnveh_transfdate,
.btnveh_ownerisdriver {
    width: 49% !important;
    display: inline-block !important;
    font-weight: 700 !important;
}

.btnveh_transfdate_selected,
.btnveh_ownerisdriver_selected {
    background: var(--primaryColor) !important;
}

.btnNext {
    padding: 19px 0;
    max-width: 370px;
    width: 100%;
}

.tooltip {
    opacity: 1;
    display: inline;
    color: var(--grey36);
}

[id*="isok"] {
    position: absolute;
    top: 28px;
    right: 5px;
    z-index: 1;
}

.modal [id*="isok"] {
    top: 25px;
    z-index: 100000;
}

.err {
    width: 16px;
    height: auto;
}

.formRow {
    margin: 0 140px;
}

.form-control {
    height: 45px;
    font-weight: 400;
    color: #000;
}

.uisearch {
    background-color: var(--white);
    list-style: none;
    z-index: 10000;
    width: auto;
    max-width: 400px;
    padding: 10px;
    color: #494949;
    font-size: 14px;
}

.uisearch li {
    font-size: 14px;
}

.uisearch li:hover {
    cursor: pointer;
    color: #199fe8;
}

.transfer-container,
.bday-container,
.license-container,
.driver-bday-container,
.driver-license-container,
.insurestart-container,
.insureend-container {
    height: 50px;
    width: 100%;
    border-radius: 4px;
    background-color: rgb(255, 255, 255);
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    text-align: center;
    font-size: 14px;
    border: 0.5px solid rgb(203, 203, 203);
}

.date-input {
    flex: 1 1 0%;
    width: 33%;
    border: none;
    text-align: center;
    font-size: 14px;
    min-width: 0px;
    font-weight: 400;
    color: #000;
}

.date-input:focus-visible {
    outline: none;
}

.transfer-container:has(input:focus),
.bday-container:has(input:focus),
.license-container:has(input:focus),
.driver-bday-container:has(input:focus)
.driver-license-container:has(input:focus),
.insurestart-container:has(input:focus),
.insureend-container:has(input:focus) {
    border: solid 2px var(--primaryColor) !important;
    box-shadow: none;
}

.transfer-container input.errorTxt,
.bday-container input.errorTxt,
.license-container input.errorTxt,
.driver-bday-container input.errorTxt,
.driver-license-container input.errorTxt,
.insurestart-container input.errorTxt,
.insureend-container input.errorTxt {
    border: none !important;
}

label.errorTxt {
    font-weight: 700;
    font-size: 12px;
    color: #F92626 !important;
}

aside h3 {
    font-weight: 700;
}

.accord-sum {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.first-sum {
    display: flex;
    flex-direction: column;
    align-items: start;
    border-bottom: 1px solid var(--silverCB);
    width: 255px;
    padding-bottom: 25px;
}

#thirdAccord .first-sum,
#mobThirdAccord .first-sum {
    border: none;
    padding-bottom: 0;
}

#fourthAccord .first-sum,
#mobFourthAccord .first-sum {
/*    border-top: 1px solid var(--silverCB);*/
    border-bottom: none;
    padding: 16px 0 0px 0;
    width: 100%;
}

.sum-price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--greyF3);
    padding: 10px;
}

.first-sum strong {
    width: 100%;
    text-align: start;
    font-weight: 800;
    font-size: 13px;
}

.fixed-wrapper .first-sum {
    width: 100%
}

.inner-info {
    width: 100%;
    text-align: start;
    font-family: var(--fontInter);
    font-size: 15px;
}

.edit-info {
    float: right;
}

.plate-sum {
    border: 1px solid var(--silverCB);
    border-radius: 4px;
    color: #000;
    box-shadow: 0px 1px 3px rgba(0,0,0,0.08);
    font-family: var(--fontInter);
    font-weight: 700;
    margin-top: 10px;
    padding: 0 5px;
}

.mob-header {
    color: var(--grey36);
    font-weight: 900;
    pointer-events: none;
    width: 100%;
}

.sum-active {
    pointer-events: auto;
}

.sum-active::after {
    content: "";
    margin-left: auto;
    background: url(../images/svg/form-arrow.svg) no-repeat center;
    width: 14px;
    transform: rotate(180deg);
    transition: transform .3s ease-in-out;
}

.sum-active.collapsed::after {
    transform: rotate(0);
}

.sum-company-img {
    display: block;
    width: 120px;
    margin-top: .5rem;
}

.package-title {
    font-family: var(--fontArtegra);
    color: var(--black);
    font-weight: 600;
    font-size: 14px;
}

#sumAccordion .accordion-button,
#mobSumAccordion .accordion-button {
    font-size: 13px;
}

#sumCovAcc ul,
#mobSumCovAcc ul {
    text-align: start;
    line-height: 21px;
    font-size: 12px;
    padding-left: 20px;
}

@media (max-width: 1399px) {
    #accordionForm.accordion {
        min-width: 785px;
        max-width: 785px;
    }

    .accordion {
        min-width: unset;
    }

    .form-wrapper {
        max-width: 785px;
    }

    .formRow {
        margin: 0;
    }
}

@media (min-width: 1200px) {
    .formRow {
        padding: 0 38px;
    }
}

@media (max-width: 1199px) {
    #accordionForm.accordion {
        min-width: 500px;
        max-width: 500px;
    }

    .form-wrapper,
    #accordionForm .alert {
        max-width: 500px;
    }
}

@media (min-width: 992px) {
    #loadinsuranceform .fixed-wrapper {
        display: none !important;
    }
}

@media (max-width: 991px) {
    .formRow {
        margin: 0 100px;
    }
}

@media (max-width: 767px) {
    .main-content {
        min-width: unset !important;
        width: 100%;
    }
    .formRow {
        margin: 0;
        width: 100%;
        max-width: 500px;
    }
    .form-wrapper {
        max-width: unset;
        width: 100%;
    }
}

@media (max-width: 575px) {
    #accordionForm.accordion {
        min-width: unset;
    }

    .accordion-body {
        padding: 0 0 50px;
    }
    .form-flex {
        --bs-gutter-x: 0;
    }
    .form-control {
        height: 40px;
    }
    .select2-container .select2-selection--single {
        height: 40px !important;
    }

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 40px !important;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 40px !important;
    }
    .btnveh_transfdate, .btnveh_ownerisdriver {
        width: 100% !important;
    }
    h2 .h2 {
        font-size: 26px;
    }
}

/* OFFERS
===================== */
#offers-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(5px);
    z-index: 9999;
    overflow: hidden;
}

.loader {
    position: absolute;
    top: 50%;
    left: 50%;
/*    transform: translate(-50%, -50%);*/
    border: 8px solid var(--greyF3);
    border-top: 8px solid var(--green);
    border-radius: 50%;
    width: 48px;
    height: 48px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

#offersSection .main-content {
    padding: 0 0 300px;
}

.price_euro {
    font-weight: bold;
    color: var(--black);
    font-size: 16px;
}

.price {
    font-weight: bold;
    color: var(--black);
    font-size: 35px;
}

.sum-price .price {
    font-size: 30px;
}

.price-hot::before {
    content: "";
    background: url(../images/svg/fire.svg) no-repeat center center;
    width: 16px;
    display: block;
    margin-right: 10px;
}

.filters-full {
    min-width: 300px;
    max-width: 350px;
}

.offers {
    margin: 24px auto;
    padding: 0 10px 0 20px;
}

#topresultsdiv, #loadoffers {
    max-width: 850px;
}

.asfalisi,
.extra-filters {
    border: 1px solid rgba(203, 203, 203, 0.5);
    border-radius: 8px;
    background-color: var(--white);
    padding: 15px 25px;
}

.filters-full h2 {
    font-family: var(--fontInter);
    font-weight: 700;
    font-size: 14px;
    line-height: 24px;
}

.radio.radio-info,
.cover-opt,
#diarkeiaAsfalisis.form-select,
#mobDiarkeiaAsfalisis.form-select {
    background-color: var(--greyF6);
    border-radius: 6px;
    margin: 10px 0;
    padding: 8px 12px;
    border: 2px solid transparent;
}

#diarkeiaAsfalisis.form-select,
#mobDiarkeiaAsfalisis.form-select {
    background-color: rgba(0, 220, 205, 0.10);
    border-color: var(--primaryColor);
}

.duration-option {
    background-color: var(--white);
}

.radio.radio-info, .cover-opt {
    display: block;
}

.filters-full label,
#diarkeiaAsfalisis.form-select,
#mobDiarkeiaAsfalisis.form-select {
    font-family: var(--fontInter);
    font-weight: 500;
    font-size: 14px;
}

.filter-banner {
    position: fixed;
    /* top: 70px; */
    width: fit-content;
    bottom: 65px;
    left: 0px;
    right: 0px;
    /* background-color: var(--white); */
    padding: 10px;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.04);
    z-index: 100;
    transition: .3s ease-in-out;
}

    .filter-banner .filter-btn-style {
        border-radius: 100px;
        padding: 8px;
        height: 50px;
        width: 50px;
        color: #000e0d !important;
        box-shadow: 0 6px 10px rgb(0 62 58 / 36%) !important;
        background-color: #00dccd !important;
    }

    .filter-banner .btn,
    .filter-banner .btn:active,
    .filter-banner .btn:hover,
    .filter-banner .btn:active:focus-visible {
        color: var(--black);
        background-color: var(--white);
        border-color: rgba(54, 67, 68, 0.3);
        box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.08);
    }

.offcanvas.offcanvas-start {
    top: 62px;
}

#diarkeiaAsfalisis.form-select:focus,
#mobDiarkeiaAsfalisis.form-select:focus {
    box-shadow: none;
}

#diarkeiaAsfalisis.form-select:open,
#mobDiarkeiaAsfalisis.form-select:open {
    border: 2px solid var(--primaryColor);
}

.form-check-input:checked {
    background-color: var(--primaryColor) !important;
    border-color: var(--primaryColor) !important;
}

.form-check-input:focus {
    box-shadow: none;
}

.covers-container {
    gap: 15px;
    display: flex;
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
    font-size: 12px;
}

.item-benefit {
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.item-benefit label {
    line-height: 14px;
}

.widget-covers {
    border-radius: 30px !important;
    width: 24px;
    height: 24px;
    cursor: pointer;
}

.widget-notoffered.form-check-input:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/%3e%3c/svg%3e");
    background-size: 10px;
    background-color: var(--greyBC) !important;
    border-color: var(--greyBC) !important;
}

.widget-covers:disabled {
    opacity: 1;
}

#widget_diarkeia > .date > .form-control,
#mob_widget_diarkeia > .date > .form-control {
    height: 40px;
    font-family: var(--fontInter);
    font-weight: 500;
    font-size: 14px;
    background: url(../images/svg/calendar.svg) no-repeat;
    background-color: rgba(0, 220, 205, 0.10);
    border: 2px solid var(--primaryColor);
    background-position: top 50% right 10px;
}

.smallinfo {
    font-family: var(--fontInter);
    font-weight: 500;
    font-size: 10px;
    line-height: 16px;
    color: #6E6E6E;
}

.filters-full .checked + label {
    color: var(--black);
}

.offer-box{
    display: flex;
    flex-direction: column;
    border: 1px solid var(--teal);
    border-radius: 8px;
    padding: 16px;
    gap: 20px;
    background-color: var(--white);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
    max-width: 645px;
}


.progress-box {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--teal);
    border-radius: 8px;
    padding: 16px;
    gap: 20px;
    background-color: var(--white);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
/*    max-width: 645px;*/
}

.progress-box {
    padding: 0;
}

.inner-offer-box,
.inner-progress-box {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
}

.inner-progress-box {
    min-height: 140px;
}

.inner-second-section {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.inner-first-section {
    display: grid;
    grid-template-columns: auto 1fr 154px;
    justify-content: center;
    align-items: center;
    gap: 24px;
    width: 100%;
}

.img-block {
    display: flex;
    gap: 30px;
}

.company-img {
    background-color: #FFF;
    padding: 8px 8px;
    border-radius: 8px;
    width: 100px;
    border: 1px solid #dadada;
}


.dashboard-img {
    background-color: #F2F2F2;
    padding: 30px 8px;
    border-radius: 8px;
    width: 100px;
}

.coverage-box {
    display: flex;
    flex-direction: column;
    gap: 20px;
/*    max-width: 540px;*/
    line-height: 18px;
    font-size: 14px;

/*    margin: 0 auto;*/
}

.covers-bg {
    background-color: rgba(0, 84, 101, 0.13);
    border-radius: 8px;
    padding: 4px 8px;
    width: fit-content;
    height: fit-content;
    justify-self: center;
}

.mob-covers {
    font-size: 14px;
}

#filterBtn.filterBtn,
#mobFilterBtn.filterBtn {
    padding: 12px 48px;
    font-family: var(--fontInter);
    font-weight: 500;
    background-color: var(--black17);
    border-color: var(--black17);
    color: var(--white);
}

.mobFilterBtnContainer {
    position: sticky;
    bottom: 0;
}

.filterBtn:hover,
.filterBtn:active {
    background-color: var(--green) !important;
    border-color: var(--green) !important;
}

.btnBuy {
    background-color: var(--green);
    border-color: var(--green);
    padding: 15px 32px;
    font-size: 14px;
    color: var(--black);
    font-weight: 800 !important;
}

.extraBtn {
    display: inherit;
    font-size: 14px;
    padding: 0;
    border: none;
    align-items: center;
    line-height: 14px;
    font-weight: 700;
}

.extraBtn::after {
    width: 15px;
    height: 20px;
    margin-left: 5px;
    content: "";
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23052c65' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e") no-repeat center;
    transition: .2s ease-in-out;
    transform: rotate(-90deg);
    filter: brightness(0);
}

.extraBtn:not(.collapsed)::after {
    transform: rotate(0);
}

[id*="packageMore"] {
    width: 100%;
}

[id*="packageInfos"] {
    border: none;
}

.covers-spacer {
    width: 24px;
}

.coverage-extras {
    padding: 8px;
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ccoverinfos {
    background: #ffffff;
    padding: 8px 16px;
    font-size: 12px;
}

.apallagi {
    margin-right: 10px;
    text-align: end;
    min-width: 65px;
    max-width: 70px;
}

.kefalaio {
    margin-right: 10px;
    text-align: end;
    min-width: 70px;
    max-width: 70px;
}

.btnc_showinfos {
    border: none;
    background-color: transparent;
}

.nav-underline .nav-link.active {
    color: var(--grey36);
    border-bottom-color: var(--green);
    font-weight: 600;
}

.nav-underline .nav-link:not(.active) {
    color: var(--grey36);
}

.nav-underline .nav-link:hover {
    border-bottom-color: var(--green);
}

.tab-content > .active > span:nth-of-type(even) {
    background: rgba(243, 243, 243, 0.6);
}

.useful-info {
    margin-top: 10px;
    padding: 5px;
    font-size:14px;
}

.useful-info ul,
#txtinfos_div ul,
#txtinfos_div ol,
#termsForm ul,
#termsForm ol {
    padding-left: 25px;
}

.help-title {
    display: block;
    margin-bottom: 15px;
    font-weight: 600;
    font-size: 20px;
}

.helptel_btn {
    display: inline-block;
    padding: 8px;
    border-radius: 4px;
    color: var(--black);
    background-color: var(--primaryColor);
    font-weight: 600;
}

.helptel_btn:hover {
    text-decoration: none;
    
}

#packageTabs.nav {
    overflow-x: auto;
    white-space: nowrap;
    flex-wrap: nowrap;
}

#packageTabs.nav::-webkit-scrollbar {
    display: none;
}

@media (max-width: 1500px) {
    .coverage-box {
/*        max-width: 450px;*/
    }
}

@media (max-width: 1399px) {
/*    .main-content {
        margin-top: 100px;
    }*/
    
    .coverage-box {
/*        max-width: 540px;*/
    }
}

@media (max-width: 1199px) {
    .mobFilterBtnContainer {
        bottom: -30px;
    }

    .filter-banner {
        right: 0;
    }

    .offcanvas-body {
        padding-bottom: 85px;
    }

    .filterBtn {
        padding: 12px 40px;
    }
}

@media (max-width: 991px) {
    .coverage-box {
/*        max-width: 450px;*/
    }

    .btnBuy {
        font-size: 13px;
    }
}

@media (min-width: 768px) {
    .offer-box {
        max-width: 700px;
        width: 700px;
        min-height: 200px;
    }
}

@media (max-width: 767px) {
    .inner-offer-box {
        gap: 20px;
        flex-direction: column;
    }

    .inner-first-section {
        display: flex;
        justify-content: space-between;
    }

    .filter-banner .offcanvas.offcanvas-start {
        top: 84px
    }

    .coverage-box {
        align-items: center;
    }

    #topresultsdiv, #loadoffers {
        max-width: 500px;
    }

    .coverage-extras {
        font-size: 13px;
    }

    .help-title {
        font-size: 18px;
    }

    .help-title ~ span {
        font-size: 14px;
    }
}

@media (max-width: 575px) {
    #topresultsdiv_h1 {
        font-size: 24px;
    }

    .covers-bg,
    .mob-covers {
        padding: 4px;
        font-size: 12px;
    }

    .offer-box {
        padding: 12px;
    }

    [id*="packageInfos"] {
        padding: 0;
    }

    .offers {
        padding: 0;
    }

    .price {
        font-size: 30px;
        justify-self: end;
    }

    .btnBuy {
        padding: 15px 12px;
        font-size: 12px;
    }

    .coverage-box {
        font-size: 12px;
    }

/*    .extra-tabs {
        max-width: 250px;
    }*/

    .coverage-extras {
        font-size: 12px;
    }

    .covers-container {
        font-size: 10px;
        gap: 10px;
    }

    .widget-covers {
        width: 16px;
        height: 16px;
    }

    .covers-spacer {
        width: 16px;
    }
}

@media (max-width: 530px){
    #packageTabs.nav {
        max-width: 80vw;
    }

    #packageInfos {
        padding: 10px 0;
    }
}

@media (max-width: 370px) {
    #topresultsdiv_h1 {
        font-size: 22px;
    }

    .covers-container {
        font-size: 9px;
    }
}
/* CONTRACT
===================== */
#formcontract {
/*    max-width: 940px;*/
}

.numbersOnly::after {
    content: "";
    background: url(../images/svg/error.svg) no-repeat center center;
    display: block;
    width: 10px;
    top: 0;
    position: relative;
}

.dropzoneform {
    background-color: rgba(6, 233, 187, 0.07) !important;
    border: 1px solid rgba(6, 233, 187, 0.07) !important;
    border-radius: 4px;
    box-shadow: 0px 1px 3px rgba(0,0,0,0.08);
    align-content: center;
    min-height: 100px !important;
}

.dropzone .dz-message {
    margin: 0 !important;
}

.dropinfo_text {
    font-weight: 800;
}

.dropinfo_text small {
    font-weight: 400;
    font-size: 12px;
}

.dropinfo_icon::before {
    font-size: 40px;
    margin-right: 15px;
}

[id*="dropzone_inner"] {
    display: flex;
    align-items: center;
}

.btn_nodocs,
.btn_nodocs_active {
    width: 100%;
    padding: 13px;
}

.btn_nodocs:hover,
.btn_nodocs_active {
    background-color: var(--primaryColor) !important;
    border-color: var(--primaryColor) !important;
    color: var(--black);
}

.drz_successmessage {
    margin-top: 5px;
}

.previewdoclink {
    display: block;
    margin-top: 5px;
}

@media (max-width: 1199px) {
    #formcontract {
        max-width: 500px;
    }
}

/* THANK YOU
===================== */
.content-title {
    font-weight: 800;
}

.content-subtitle {
    font-size: 16px;
    margin: 8px 0;
    background: rgb(6 233 187 / 10%);
    width: fit-content;
    padding: 4px 12px;
    border-radius: 8px;
}

.text-bot-title {
    font-size: 25px;
}

/*.progress-box {
    max-width: 900px;
}*/

.prog-info {
    background-color: var(--greyF3);
    border-color: var(--greyBC);
}

.div_icons {
    font-size: 40px;
    position: relative;
    background: var(--greyF3);
    border-radius: 50%;
    width: 70px;
    min-width: 70px;
    height: 70px;
    margin: 0 15px;
    color: var(--green);
}

.icon-spinner {
    font-size: 50px;
}

.icon-spinner sup {
    font-size: 25px;
    top: -1em;
}

.active-icon {
    font-weight: bold;
}

.activebox {
    background-color: var(--green);
}

.progress-num-icon {
    height: stretch;
    border-radius: 8px 0 0 8px;
    width: 150px;
    min-width: 150px;
    position: relative;
}

.progress-num {
    position: absolute;
    top: 20px;
    left: 15px;
    background: var(--white);
    color: var(--green);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    text-align: center;
    align-content: center;
    font-weight: 700;
}

.progress-num.inactivenum {
    background: var(--green);
    color: var(--white);
}

.progress-icon {
    position: absolute;
    top: 40px;
    left: 30px;
    background-color: var(--white);
    border-radius: 50%;
    width: 90px;
    height: 90px;
    font-size: 52px;
    color: var(--green);
}

.progress-icon:not(.img-icon) {
    background-color: var(--greyF3);
    top: 35px;
    left: 40px;
    width: 70px;
    height: 70px;
    font-size: 40px;
}

.img-icon .fa-credit-card {
    left: 18px !important;
    top: 8px !important;
}

.img-icon .fa-handshake-o {
    top: 7px !important;
    left: 13px !important;
}

.progress-icon img {
    position: absolute;
    left: 12px;
    top: 13px;
}

.progress-icon:not(.img-icon) img {
    left: 10px;
    top: 8px;
    width: 52px;
    height: 52px;
}

.progress-text {
    max-width: 630px;
    padding: 20px;
}

.progress-text h3 {
    font-weight: 700;
}

.pending-docs {
    font-weight: 600;
    margin: 30px 0;
}

.subinfos {
/*    font-style: italic;*/
    font-size: 14px;
    background-color: var(--greyF3);
    padding: 8px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
}

#payment_div,
#payment_inactive {
    font-weight: 600;
}

.paymentBtn {
    padding: 10px 25px;
}

.btn-viewnotice2 {
    width: 250px;
}

.complete-info {
    font-size: 14px;
}

.complete-info span {
    color: var(--red);
}

.info-item {
    display: flex;
    gap: 8px;
    width: 210px;
    align-items: center;
}

.info-item i {
    font-size: 40px;
}

/*#contractDetails .formRow {
    margin: 0;
}*/

@media (max-width: 767px) {
    .inner-progress-box {
        flex-direction: column;
    }

    .progress-num-icon {
        height: 150px;
        width: 100%;
        border-radius: 8px 8px 0 0;
    }

    .div_icons {
        margin: 15px 0;
    }
}

/* BLOG
===================== */
.blog-nav li {
    display: inline-block;
}

.pagination-container {
    position: relative;
    vertical-align: middle;
    text-align: center;
}

.pagination {
    justify-content: center;
    gap: 10px;
}

.pagination li a {
    border: 1px solid var(--greyBC);
    display: inline-block;
    vertical-align: middle;
    padding: 3px;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
    width: 40px;
    height: 40px;
    text-align: center;
    -webkit-transition: border-color .3s, color .3s;
    transition: border-color .3s, color .3s;
    font-weight: 800;
    align-content: center;
}

.pagination li.active a,
.pagination li:hover a {
    border: 1px solid var(--green);
    color: var(--green);
}

.PagedList-skipToNext,
.PagedList-skipToPrevious,
.PagedList-skipToLast {
    color: var(--green);
}

.blog-post {
    padding-bottom: 50px;
}

.blog-txt .blog-nav {
    font-size: 14px;
}

@media (max-width: 1199px) {
    .blog-post h2 {
        font-size: 28px;
    }
}

@media (max-width: 991px) {
    .blog-post h2 {
        font-size: 24px;
    }
}

@media (max-width: 575px) {
    .pagination {
        flex-wrap: wrap;
    }
}

/* TEXTPAGE
===================== */
.breadcrumb-item {
    font-weight: 600;
}

.breadcrumb-item.active {
    color: var(--darkGreen);
}

/*.social-network li {
    display: inline-block;
    font-size: 22px;
}*/



.inner-second-section.inner-second-section-special {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
}




@media (max-width: 575px) {

    .inner-second-section.inner-second-section-special {
        display: grid;
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .img-block {
        display: flex;
        gap: 30px;
        width: 114px;
        /*        height: 114px;*/
        height: 83px;
    }

    .btn-pad {
        padding: 12px 12px;
    }

  
}

@media (max-width: 330px) {

   
    .img-block {
        display: flex;
        gap: 30px;
        width: 80px;
        height: 80px;
    }

    .btnBuy {
        padding: 8px 12px;
        font-size: 12px;
    }
}

@media (max-width: 768px) {


    .company-img {
        background-color: #FFF;
        padding: 8px 8px;
        border-radius: 8px;
        width: 100%;
        border: 1px solid #dadada;
        height: 100%;
        object-fit: contain;
    }
}




/* ==========================
   Offers Skeleton Loader
   Scope: #loadoffers
   ========================== */

#loadoffers .offers-skeleton {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* card */
#loadoffers .skel-offer {
    position: relative;
    border: 2px solid rgba(0,0,0,.10);
    border-radius: 14px;
    background: #fff;
    padding: 18px 18px 14px;
    overflow: hidden;
}

/* shimmer base */
#loadoffers .skel {
    position: relative;
    background: rgba(0,0,0,.06);
    border-radius: 12px;
    overflow: hidden;
}

    #loadoffers .skel::after {
        content: "";
        position: absolute;
        inset: 0;
        transform: translateX(-100%);
        background: linear-gradient(90deg, transparent, rgba(255,255,255,.70), transparent);
        animation: skel-shimmer 1.15s infinite;
    }

@keyframes skel-shimmer {
    100% {
        transform: translateX(100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    #loadoffers .skel::after {
        animation: none !important;
    }
}

@media (min-width: 768px) {
    #loadoffers .skel-offer {
        width: 700px;
        height: 200px;
    }
}

@media (max-width: 370px) {
    #loadoffers .skel-offer {
        width: 330px;
    }
}

/* ==========================
   TOP ROW (SAFE GRID)
   ========================== */
#loadoffers .skel-top {
    display: grid;
    grid-template-columns: minmax(120px, 160px) minmax(0, 1fr) minmax(170px, 220px);
    gap: 14px;
    align-items: center;
}

    /* crucial: allow shrinking in grid */
    #loadoffers .skel-top > * {
        min-width: 0;
    }

/* logo */
#loadoffers .skel-logo {
    width: 100%;
    max-width: 150px;
    height: 56px;
    border-radius: 10px;
}

/* pill */
#loadoffers .skel-mid {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
}

#loadoffers .skel-pill {
    width: 100%;
    max-width: 260px;
    height: 30px;
    border-radius: 999px;
}

/* right side */
#loadoffers .skel-cta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    min-width: 0;
}

#loadoffers .skel-price {
    width: 100%;
    max-width: 140px;
    height: 44px;
    border-radius: 12px;
}

#loadoffers .skel-btn {
    width: 100%;
    max-width: 190px;
    height: 46px;
    border-radius: 10px;
}

#loadoffers .skel-link {
    width: 100%;
    max-width: 150px;
    height: 14px;
    border-radius: 8px;
    opacity: .8;
}

/* ==========================
   COVERS ROW
   ========================== */
#loadoffers .skel-covers {
    display: grid;
    grid-template-columns: repeat(6, minmax(90px, 1fr));
    gap: 24px;
    margin-top: 14px;
    padding-top: 14px;
/*    border-top: 1px solid rgba(0,0,0,.08);*/
}

#loadoffers .skel-cover {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

#loadoffers .skel-cover-text {
    width: 100%;
    max-width: 90px;
    height: 14px;
    border-radius: 8px;
}

#loadoffers .skel-cover-dot {
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

/* extras */
.container-skel-bottom {
    display: flex;
    gap: 24px;
}

.right-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ==========================
   BREAKPOINTS
   ========================== */

/* hide right buttons κάτω από 995px (όπως είχες) */
/*@media (max-width: 995px) {
    .right-buttons {
        display: none;
    }

    #loadoffers .skel-covers {
        border-top: none;
    }
}*/

/* <= 992px */
/*@media (max-width: 992px) {
    #loadoffers .skel-top {
        grid-template-columns: minmax(120px, 160px) minmax(0, 1fr);
        grid-template-areas:
            "logo cta"
            "mid  mid";
        align-items: start;
    }

    #loadoffers .skel-logo {
        grid-area: logo;
    }

    #loadoffers .skel-cta {
        grid-area: cta;
        align-items: flex-end;
    }

    #loadoffers .skel-mid {
        grid-area: mid;
        justify-content: flex-start;
    }

    #loadoffers .skel-covers {
        grid-template-columns: repeat(3, minmax(90px, 1fr));
    }
}*/

/* <= 768px mobile */
@media (max-width: 767px) {
    #loadoffers .skel-cta {
        grid-area: cta;
        align-items: flex-end;
    }

    #loadoffers .skel-offer {
        padding: 16px 14px 14px;
    }

    #loadoffers .skel-top {
        grid-template-columns: minmax(110px, 140px) minmax(0, 1fr);
        grid-template-areas:
            "logo cta"
            ".  mid";
        gap: 12px;
    }

    #loadoffers .skel-logo {
        grid-area: logo;
        width: 100%;
        max-width: 120px;
        height: 52px;
    }

    #loadoffers .skel-price {
        max-width: 120px;
        height: 42px;
    }

    #loadoffers .skel-btn {
        max-width: 170px;
        height: 44px;
    }

    #loadoffers .skel-link {
        display: none;
    }

    #loadoffers .skel-mid {
        grid-area: mid;
        justify-content: flex-end;
        margin-top: 6px;
    }

    #loadoffers .skel-pill {
        max-width: 120px;
    }

    #loadoffers .skel-covers {
        grid-template-columns: repeat(5, minmax(56px, 1fr));
        gap: 12px;
        border-top: none;
        padding-top: 8px;
        margin-top: 6px;
        justify-items: center;
        width: 100%;
    }

    #loadoffers .right-buttons {
        display: none;
    }

    #loadoffers .skel-cover-text {
        max-width: 58px;
        height: 12px;
    }

    #loadoffers .skel-cover-dot {
        width: 26px;
        height: 26px;
    }

    /* bottom "Αναλυτικά..." skeleton με shimmer */
    #loadoffers .skel-offer::after {
        content: "";
        display: block;
        width: min(170px, 60%);
        height: 14px;
        border-radius: 8px;
        margin: 14px auto 2px;
        background: rgba(0,0,0,.06);
        position: relative;
        overflow: hidden;
    }

    #loadoffers .skel-offer::before {
        content: "";
        position: absolute;
        left: 50%;
        transform: translateX(-50%) translateX(-100%);
        bottom: 16px;
        width: min(170px, 60%);
        height: 14px;
        border-radius: 8px;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,.70), transparent);
        animation: skel-shimmer 1.15s infinite;
        pointer-events: none;
    }

    @media (prefers-reduced-motion: reduce) {
        #loadoffers .skel-offer::before {
            animation: none !important;
        }
    }
}

@media (max-width: 370px) {
    #loadoffers .skel-covers {
        gap: 4px;
    }
}

/* ==========================
   DARK MODE
   ========================== */
body.dark-mode #loadoffers .skel-offer {
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.12);
}

body.dark-mode #loadoffers .skel {
    background: rgba(255,255,255,.10);
}

    body.dark-mode #loadoffers .skel::after {
        background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
    }

body.dark-mode #loadoffers .skel-covers {
    border-top-color: rgba(255,255,255,.10);
}

@media (max-width: 768px) {
    body.dark-mode #loadoffers .skel-offer::after {
        background: rgba(255,255,255,.10);
    }

    body.dark-mode #loadoffers .skel-offer::before {
        background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
    }
}

   
/* ============================
   Offer Summary - Minimal (no cards)
   Scope: .offers-aside--minimal
   ============================ */

.offers-aside--minimal {
    --sum-ink: #0f172a;
    --sum-muted: rgba(54,67,68,.70);
    --sum-divider: rgba(0,0,0,.10);
    --sum-soft: rgba(0,0,0,.06);
    padding: 14px 10px 18px;
}

    .offers-aside--minimal .sum-title {
        font-weight: 900;
        font-size: 18px;
        margin: 6px 6px 14px;
    }

    .offers-aside--minimal .sum-section {
        padding: 8px 8px 12px;
        border-top: 1px solid #bfbfbf;
        margin-bottom: 16px;
    }

        .offers-aside--minimal .sum-section:first-of-type {
            border-top: none;
            padding-top: 0;
        }

    .offers-aside--minimal .sum-section__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
/*        margin-bottom: 8px;*/
    }

        .offers-aside--minimal .sum-section__head strong {
            font-size: 13px;
            font-weight: 900;
            text-transform: uppercase;
            margin: 0;
        }

    .offers-aside--minimal .sum-subhead {
        font-size: 11px;
        color: var(--sum-muted);
        font-weight: 800;
    }

    .offers-aside--minimal .sum-edit {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: 10px;
        border: 1px solid var(--primaryColor);
        background: rgba(0, 220, 205, 0.10);
        /*        border: 1px solid rgba(0,0,0,.10);
        background: #fff;*/
        transition: transform .15s ease;
    }

        .offers-aside--minimal .sum-edit:hover {
            transform: translateY(-1px);
        }

        .offers-aside--minimal .sum-edit img {
            width: 16px;
            height: 16px;
            opacity: .85;
        }

    .offers-aside--minimal .sum-rows {
        display: flex;
        flex-direction: column;
    }

    .offers-aside--minimal .sum-item {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
        padding: 10px 0;
        border-bottom: 1px solid var(--sum-divider);
    }

        .offers-aside--minimal .sum-item:last-child {
            border-bottom: none;
        }

    .offers-aside--minimal .sum-k {
        font-family: var(--fontInter);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .2px;
        text-transform: uppercase;
        color: var(--sum-muted);
        min-width: 92px;
    }

    .offers-aside--minimal .sum-v {
        font-family: var(--fontInter);
        font-size: 14px;
        font-weight: 600;
        color: var(--sum-ink);
        line-height: 1.25;
        text-align: right;
        word-break: break-word;
    }

    /* long values go under label */
    .offers-aside--minimal .sum-item.is-long {
        flex-direction: column;
        gap: 6px;
    }

        .offers-aside--minimal .sum-item.is-long .sum-v {
            text-align: left;
        }

    .offers-aside--minimal .sum-badge {
        display: inline-flex;
        gap: 6px;
        align-items: baseline;
        justify-content: flex-end;
    }

        .offers-aside--minimal .sum-badge .amt,
        .offers-aside--minimal .sum-badge .eur {
            font-weight: 900;
        }

    /* Plate - minimal pill */
    .offers-aside--minimal .plate-pill {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        /* margin-top: 10px; */
        /* padding: 8px 10px; */
        font-size: 12px;
        border-radius: 4px;
        /* border: 1px solid rgb(0 0 0 / 80%); */
        background: transparent;
        font-family: var(--fontInter);
        font-weight: 900;
        letter-spacing: .6px;
        color: #111;
        width: fit-content;
    }

/* keep your scrollbar styles */
.main-sidebar aside::-webkit-scrollbar {
    width: 10px;
}

.main-sidebar aside::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,.12);
    border-radius: 10px;
}

.main-sidebar aside::-webkit-scrollbar-track {
    background: transparent;
}

@media (max-width: 1199px) {
    .fixed-wrapper {
        padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
    }

    #sumCollapse {
        max-height: calc(100dvh - 140px);
        overflow: hidden;
    }

    .offers-aside--mobile {
        max-height: calc(100dvh - 170px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding-bottom: 20px;
    }
}

#iwantReceiveOffers,
#privacyPolicyCheck,
#compTermsCondsCheck {
    border-color: var(--grey36);
}