﻿html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.loader {
    position: fixed;
    left: 49%;
    top: 50%;
    z-index: 5446546;
    display: none
}

.container-min-height {
    min-height: calc(100% - 410px);
}

a {
    text-decoration: none;
}

img {
    max-width: 100%;
}

.dataTables_paginate {
    /*text-align: left;*/
    margin-bottom: 50px
}

    .dataTables_paginate span {
        max-width: 88%;
        overflow: auto;
        display: inline-table;
    }

        .dataTables_paginate span a {
            display: inline-block;
        }


    .dataTables_paginate .paginate_button {
        border-radius: .5rem;
        margin-left: 4px;
        margin-right: 4px;
        color: #3d5170;
        will-change: background-color,color,border-color;
        transition: background-color 250ms ease-in-out,color 250ms ease-in-out,border-color 250ms ease-in-out;
        padding: .10rem .575rem;
        font-weight: 600;
    }

        .dataTables_paginate .paginate_button.current, .dataTables_paginate .paginate_button:not(.disabled):hover {
            background: #42a0ae;
            border-color: #42a0ae;
            color: #fff;
        }


    .dataTables_paginate .paginate_button {
        border-radius: .25rem;
        color: #3d5170;
        will-change: background-color,color,border-color;
        transition: background-color 250ms ease-in-out,color 250ms ease-in-out,border-color 250ms ease-in-out;
    }


.w-90 {
    width: 90%
}

.news_dots.carousel-indicators {
    height: 5px !important;
    position: unset !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.news_dots .progress-bar {
    border: none !important;
    height: 4px !important;
}

    .news_dots .progress-bar.hidePros {
        background-color: #e9ecef !important;
        border-color: transparent !important;
    }

        .news_dots .progress-bar.hidePros.active {
            display: inline-block;
            background-color: #3facbc !important;
            border-color: transparent !important;
        }



.box {
    background-color: #f3f6fb;
    padding: 20px;
}

.c-color {
    color: #54a9bc;
}


.cursor {
    cursor: pointer;
}

.bg-nav-custom {
    background-color: #0e0e1b;
}


.bg-custom {
    background-color: #3facbc !important;
    border-color: transparent !important
}

.text-custom {
    color: #3facbc !important;
}

.border-custom {
    border-color: #3facbc !important;
}

.carouselBg {
    background-image: url(/images/CategHomeLoed.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.bg-img {
    background-position: center 60%;
    background-size: cover;
    background-repeat: no-repeat;
}

.searchHere {
    width: 40rem;
    background-color: #ffffff3b;
    border-radius: 20px;
    border: 1px solid dashed;
}

    .searchHere input {
        border: none;
        color: #fff !important
    }

        .searchHere input::placeholder {
            color: #fff;
            opacity: 1; /* Firefox */
        }

        .searchHere input::-ms-input-placeholder { /* Edge 12-18 */
            color: #fff;
        }

    .searchHere #makeSearchBtn {
        border: none;
        background: none
    }

        .searchHere #makeSearchBtn i {
            color: #fff
        }

    .searchHere .dropdown button {
        border: none;
        background: none
    }


.hashTagDiv a {
    border: 1px solid dashed;
    background-color: #ffffff70;
    color: #fff;
    padding: 6px 10px;
    display: inline-block;
    margin-left: 4px;
    margin-right: 4px;
    border-radius: 6px;
}


strong {
    color: #3da9ba;
}

.bg-cust {
    background-color: #f1f5f9;
}

.w-cus {
    width: 202px;
    height: 9rem;
}


.hx-100 {
    max-height: 100%
}

.wx-100 {
    max-width: 100%
}


.w-lg-90 {
    width: 90% !important;
}

.w-lg-80 {
    width: 80% !important;
}

.w-lg-85 {
    width: 85% !important;
}

.w-lg-70 {
    width: 70% !important;
}

.w-lg-60 {
    width: 60% !important;
}

.w-lg-30 {
    width: 30% !important;
}


.h-360px {
    height: 360px
}

.h-mx-450px {
    max-height: 450px
}

.h-mx-100 {
    max-height: 100%
}

.sectionActive {
    border-bottom: 4px solid #3facbc;
    padding-bottom: 12px;
}

.img-respo {
    min-height: 300px;
    max-height: 420px;
    object-fit: cover;
}

@media (min-width: 576px) {
    .card-columns {
        -webkit-column-count: 4;
        column-count: 4;
        -webkit-column-gap: 1.25rem;
        column-gap: 1.25rem;
        orphans: 1;
        widows: 1;
    }


        .card-columns .card {
            display: inline-block;
            width: 100%;
        }
}


.newsListGradient {
    display: none
}

.bg-Gradient {
    background-color: #0000008f
}

#modelImagesList {
    width: 100%
}

.modal-fullscreen {
    width: 96vw;
    max-width: none;
    height: 94%;
    margin: auto;
    margin-top: 2%;
}

.customModel {
}

    .customModel.modal-xl {
        /* --bs-modal-width: 500; */
        width: fit-content !important;
    }

    .customModel .modal-content {
        background-color: transparent !important;
        border-color: transparent !important;
        padding-left: 60px;
        padding-right: 60px;
    }

    .customModel .carousel-inner img {
        border-radius: 15px;
    }

    .customModel .modal-header {
        border-color: transparent !important;
    }

        .customModel .modal-header .modal-title {
            color: #fff !important;
        }

        .customModel .modal-header .btn-close {
            filter: invert(100) sepia(3) saturate(8) hue-rotate(175deg);
        }

/*    .customModel .modal-content .modal-body::-webkit-scrollbar {
        display: none;
    }*/

@media (max-width: 768px) {

    .d-sm-none {
        display: none
    }

    .w-lg-90, .w-lg-80, .w-lg-85, .w-lg-70, .w-lg-60, .w-lgMax-80, .w-lg-30 {
        width: 99% !important;
    }

    .todayImageBtn {
        right: -1px;
    }

    .sectionActive {
        padding-bottom: 2px;
    }

    .customModel .modal-content {
        padding-left: 0px;
        padding-right: 0px;
    }

    .img-respo {
        min-height: 200px;
    }
}

::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background-color: transparent;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #b4b4b4;
    border-radius: 5px
}

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #f1f1f1;
    }

.carousel-item {
    position: relative
}

.carousel-inner::before {
    display: block;
    clear: both;
    content: "";
    width: 100%;
    height: 100%;
    background-color: #3b3b3b1a;
    z-index: 2
}

.carousel-item .infoData {
    position: absolute;
    top: 24px;
    right: 2%;
    z-index: 2555
}

.carousel-item .categoryName {
    background-color: #389db4;
    color: white;
    width: max-content;
    text-align: center;
    border-radius: 5px;
    font-size: 15px;
    padding: 6px 15px;
    z-index: 555
}


.carousel-item .albumDate {
    margin-right: 20px;
    color: #389db4;
    background-color: #00000cb5;
    color: white;
    width: max-content;
    text-align: center;
    border-radius: 5px;
    padding: 6px 15px;
}

.carousel_Custom {
    position: relative;
}

.customModel .imgControl {
    position: absolute;
    width: 50px;
    top: 50%;
    right: 4px;
    height: 120px
}

    .customModel .imgControl .imgShare {
        padding-top: 6px;
        padding-bottom: 4px;
        padding-right: 14px;
    }

.customModel .imgArrowControl {
    position: absolute;
    width: 50px;
    top: 50%;
    left: 4px;
}

    .customModel .imgArrowControl .carousel-control-prev {
        position: unset;
    }

    .customModel .imgArrowControl .carousel-control-next {
        position: unset;
    }

#SectionsListDiv {
    border-bottom: 4px solid #93939312;
    padding-bottom: 0px
}



.modal-backdrop.show {
    opacity: 0.8
}


.share-wrapper .share {
    height: 50px;
    color: #fff;
    text-align: center;
    font-size: 25px;
    cursor: pointer;
    margin-bottom: 15px;
    transition: background-color 0.4s;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.28);
}

    .share-wrapper .share.active {
        background-color: #b4b4b4;
    }

        .share-wrapper .share.active + .social li {
            transform: scale(1);
        }

            .share-wrapper .share.active + .social li:hover {
                transform: scale(1.1);
            }

.share-wrapper ul.social {
    opacity: 0;
    visibility: hidden;
    list-style-type: none;
    padding: 0;
    margin: 0;
    transform: translate(-3rem, 3rem);
    transition: visibility 0.4s, opacity 0.4s, -webkit-transform 0.4s;
}

    .share-wrapper ul.social.active {
        opacity: 1;
        visibility: visible;
        transform: translate(0);
    }

    .share-wrapper ul.social li {
        padding-left: 7px;
        padding-top: 8px;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        color: #fff;
        background-color: #fff;
        text-align: center;
        line-height: 2.1;
        font-size: 25px;
        cursor: pointer;
        margin-bottom: 15px;
        box-shadow: 0.5px 0.87px 4px 0 rgba(0, 0, 0, 0.3);
        transition: all 0.4s;
        transform: scale(0.4);
    }

.shareBtnList {
    line-height: 32px;
    overflow-y: auto;
    height: 237px;
    width: 60px;
    overflow-x: hidden;
}

    .shareBtnList::-webkit-scrollbar {
        width: 6px;
    }

    /* Track */
    .shareBtnList::-webkit-scrollbar-track {
        background-color: transparent;
    }

    /* Handle */
    .shareBtnList::-webkit-scrollbar-thumb {
        background: #b4b4b4;
        border-radius: 5px
    }

        /* Handle on hover */
        .shareBtnList::-webkit-scrollbar-thumb:hover {
            background: #f1f1f1;
        }


#btn-back-to-top {
    position: fixed;
    bottom: 20px;
    display: none;
    padding: 0 10px;
}

html {
    scroll-behavior: smooth;
}

@media screen and (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}
