:root {
    --bg-1st: #bdc3c7;
    --bg-2nd: #2c3e50;
}

/* ---------------------------------------magamenu--------------------------------------- */
.list-group-item {
    padding-left: 3px;
}

.list-group-item:hover:not(.title) {
    color: yellow;
    background: linear-gradient(270deg, var(--bg-1st), var(--bg-2nd));
}

.navbar .megamenu {
    padding: 1rem;
}

/* ============ desktop view ============ */
@media all and (min-width: 992px) {
    .navbar .has-megamenu {
        position: static!important;
    }

    .navbar .megamenu {
        left: 0;
        right: 0;
        width: 100%;
        margin-top: 0;
    }
}

/* ============ desktop view .end// ============ */
/* ============ mobile view ============ */
@media (max-width: 991px) {
    .navbar.fixed-top .navbar-collapse,
    .navbar.sticky-top .navbar-collapse {
        overflow-y: auto;
        max-height: 90vh;
        margin-top: 10px;
    }
}

/* ============ mobile view .end// ============ */
/* ------------------------------------------ footer ------------------------- */
footer.main-footer {
    padding: 10px 0 0;
    background: #414141;
    color: #fff;
}

footer.main-footer a {
    color: var(--bs-yellow);
}

footer.main-footer hr {
    border: none;
    border-top: 1px solid #ddd;
    background: none;
}

footer.main-footer .copyrights {
    padding: 5px 0;
    background: #333;
    color: #ccc;
    margin-top: 2px;
}

footer.main-footer .copyrights p {
    font-size: 0.9rem;
    margin-bottom: 0;
}

/* ---------------------------------- footer end -------------------------- */
/* ---------------------------- background --------------------------------- */
/* bacjgrounds */
.bg-ht {
    background: linear-gradient(90deg, var(--bg-1st), var(--bg-2nd));
}

.bg-ht-inv {
    background: linear-gradient(270deg, var(--bg-1st), var(--bg-2nd));
}

/* ---------------------- h1 outline ------------------------------ */
/* h1 outline */
.outline-shadow {
    text-shadow: 1px 1px #000, -1px 1px #000, -1px -1px #000, 1px -1px #000;
    color: #fff;
}

/* ------------------------- navtabs ------------------------------------- */
.nav-tabs .nav-item a.nav-link {
    color: white;
}

.nav-tabs .nav-item a.nav-link:hover {
    background-color: #e7c657;
    color: black;
}

.nav-tabs .nav-item a.nav-link.active {
    color: yellow;
    background-color: black;
}

/* ----------------------------- navbar ---------------------------------- */
.navbar-light .navbar-nav .nav-link {
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.9rem;
    padding-left: 1rem;
    padding-right: 1rem;

    /* padding-top: 0.5rem;
    padding-bottom: 0.5rem; */
    letter-spacing: 0.1em;
}

@media (min-width: 992px) {
    .navbar-light .navbar-nav .nav-link {
        border-top: 0.3rem solid transparent;
        padding: 1rem 1rem;
    }
}

.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link:focus {
    /* background: #4fbfa8; */
    border-color: var(--bg-1st);
    color: var(--bg-1st);
    font-weight: 800;
}

.navbar-light .navbar-nav .nav-link:hover:not(.active):not(:focus) {
    /* background: rgba(79, 191, 168, 0.5) */
    border-color: var(--bg-1st);
    font-weight: 800;
    color: var(--bg-1st);
}

/* ---------------------------- arajanlat----------------------------- */
.modal-header,
#arajanlat .modal-body {
    background: linear-gradient(270deg, var(--bg-1st), var(--bg-2nd));
}

#cf-submit {
    background-color: black;
    border-color: var(--bg-1st);
    color: var(--bg-1st);
}

#cf-submit:hover {
    background: yellow;
    color: #000;
}

/* --------------------------collapse ------------------------------ */
#fajta .btn {
    padding-top: 5px;
    padding-bottom: 0px;
    background-color: rgba(254, 250, 250, 0);
    margin-top: 5px;
}

#fajta .card-body.collapse:not(.show) {
    display: block;
    height: 200px !important;
    overflow: hidden;
}

#fajta .card-body.collapsing:not(.show) {
    height: 200px !important;
}

/* #fajta .btn.collapsed:after {  
    content: url(images/icons8-double-down-48.png);
} */
#fajta .btn.collapsed:after {
    display: inline-block;
    content: url('../../images/icons8-double-down-48.png');
}

#fajta .btn:not(.collapsed):after {
    display: inline-block;
    content: url('../../images/icons8-double-up-60.png');
}

.bg-qeed {
    background: linear-gradient(90deg, #00416A 0%, rgb(159, 196, 219) 100%);
}

.bg-camille {
    background: linear-gradient(90deg, #00bf8f 0%, rgb(51, 153, 51) 0%, rgb(80, 208, 80) 0%, #001510 100%);
}

/* ------------------------------- link ------------------------- */
#htitalia a,
#hasonlo a {
    color: var(--bg-2st);
}

#htitalia a:visited {
    color: var(--bg-1st);
}

#htitalia a:hover,
#hasonlo a:hover {
    color: green;
}

#tartozek a:hover {
    color: green;
}

.bg-aoip {
    background: linear-gradient(90deg, #0099F7, #F11712);
}

.bg-default {
    background: linear-gradient(90deg, #bdc3c7, #2c3e50);
}

.bg-default-inv {
    background: linear-gradient(270deg, #bdc3c7, #2c3e50);
}

#navtabs .nav-item .nav-link a:active {
    background: var(--bg-2nd);
    color: black;
}

.nav-tabs .nav-item .nav-link.active {
    color: var(--bg-1st);
    background-color: black;
    border-width: 0;
}

/* -----------------------------------overlay ----------------------------------- */
#muszer-fajta table {
    color: white;
    font-weight: bold;
    text-shadow: 1px 1px #000, -1px 1px #000, -1px -1px #000, 1px -1px #000;
    color: #fff;
}

#muszer-fajta .card {
    background-color: black;
    background: black;
}

.card-img-overlay {
    opacity: 0;
    -moz-transition: all 0.4s ease-in-out 0s;
    transition: all 0.4s ease-in-out 0s;
    padding: 0;
}

.card-img-overlay:hover,
table {
    opacity: 1;
    color: white;
    outline: black solid 1px;
}

.card:hover .card-img {
    opacity: 0.6;
}

/* 20%-os oszlop elosztás----------------------------------- */
@media (min-width:1200px) and (max-width:1399px) {
    .column-xl {
        width: 20%;
    }
}

/* navtabs dropdown------------------------------------------------- */
.nav-tabs .nav-item .dropdown-menu {
    background: linear-gradient(270deg, var(--bg-1st), var(--bg-2nd));
    border: 0;
}

.nav-tabs .nav-item .dropdown-menu .dropdown-item {
    color: white;
    background: linear-gradient(270deg, var(--bg-1st), var(--bg-2nd));
    border: 0;
}

.nav-tabs .nav-item .dropdown-menu .dropdown-item:hover {
    color: yellow;
    background: var(--bg-2nd);
    border: 0;
}

#navbut .btn {
    padding: 1px;
}