body.color-3 {
    background-color: #000;
    color: yellow;
}

body.color-2 #header {
    filter: grayscale(100%) !important;
}


.color-3 #topBar {
    padding: 4px;
    padding-right: 10px;
    background-color: #333;
    font-family: 'Kanit';
}

.color-3 h1,
.color-3 h2,
.color-3 h3,
.color-3 h4,
.color-3 h5,
.color-3 .nav-link,
.color-3 .nav-link.active {
    color: yellow;
}

.color-3 .nav-tabs .nav-link.active:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #333 !important;
    border-bottom: 3px solid yellow !important;
}


.color-3 .list-group-item {
    position: relative;
    display: block;
    padding: 0.75rem 1.25rem rem;
    color: yellow;
    background-color: #333 !important;
    border: 1px solid rgba(34, 41, 47, 0.125);
}

.color-3 .app-tab .list-group-item a {
    color: yellow;
}

.color-3 .bg-primary {
    --bs-bg-opacity: 1;
    background-color: #fa0 !important;
    color: #333 !important;
}

.color-3 .btn-outline-dark {
    border: 1px solid yellow !important;
    background-color: transparent;
    color: yellow;
}


.color-3 .card {
    background-color: unset !important;
    color: yellow !important;
}

    .color-3 .card p {
        background-color: unset !important;
        color: yellow !important;
    }


.color-3 .swiper-button-next, .swiper-button-prev {
    color: unset !important;
}

.color-3 .btn-primary {
    border-color: yellow !important;
    background-color: yellow !important;
    color: #000 !important;
}

.color-3 .btn-success {
    border-color: yellow !important;
    background-color: yellow !important;
    color: #000 !important;
}

 

/*menu*/

.color-3  .horizontal-menu-wrapper {
    background: unset !important;
    background-repeat: unset !important;
}




.color-3.horizontal-menu .horizontal-menu-wrapper .header-navbar .navbar-container {
    background-color: black;
    border-radius: 0;
}

 

.color-3 .horizontal-layout.navbar-floating .horizontal-menu-wrapper {
    /* background: linear-gradient(to bottom, rgba(248, 248, 248, 0.95) 44%, rgba(248, 248, 248, 0.46) 73%, rgba(255, 255, 255, 0) 100%); */
    /* background-repeat: repeat-x; */
    background: unset;
    background-color: black;
}

.color-3 ul#main-menu-navigation > li {
   
    background-color: black;
}


.color-3 ul#main-menu-navigation > li:hover {
    background-color:black ;
    border-radius: 0px;
}


.color-3  .navbar-nav, .color-3 .header-navbar .navbar-container ul.navbar-nav li > a.nav-link {
    color: yellow;
    background-color: black !important;
}

 

    .color-3   ul#main-menu-navigation > li:hover > a {
        background: #000;
        border-radius: 0px;
    }


.color-3   .dropdown-menu {
    min-width: 215px;
    border: none;
    margin-top: 0;
    min-height: 52px;
    background: #000 !important;
}


.color-3 .dropdown-item {
    color: yellow;
}

 

.color-3 img {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: saturate(10%);
}

.color-3 iframe {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: saturate(10%);
}


.color-3 a {
    color: yellow;
    text-decoration: none;
}


.color-3 a:hover {
    color: yellow;
    text-decoration: none;
}