@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css");


html,
body {
    font-family: 'Almarai', sans-serif;
    font-size: 14px;
    /*font-family: 'El Messiri', sans-serif;*/
    /*font-family: 'Cairo', sans-serif;*/
    padding: 0;
    margin: 0;
}

.header {
    background: rgb(255, 255, 255);
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 100%);

}

.header .header-title {
    font-family: 'Cairo', sans-serif;
}

.logo-image {
    overflow: hidden;
}

.logo-image img {
    width: 100px;
    height: auto;
    /*max-width: 50px;*/
    /*max-height: 50px;*/
}

.social-icons {
    font-size: 1.5rem;
    overflow: hidden;
}

.social-icons li a {
    padding-right: 0.2em;
    padding-left: 0.2em;
    overflow: hidden;
}

.social-icons li.nav-item.language-selector a img:hover {
    opacity: 0.6;
}

.social-icons li a:hover i {
    cursor: pointer;
    filter: brightness(1.50);
}

.social-icons .facebook-icon {
    color: #4267B2;
}

.social-icons .twitter-icon {
    color: #00acee;
}

.social-icons .rss-icon {
    color: #ee802f;
}

.header-search-button {
    border-color: rgb(206, 212, 218);
}

.header-search-button:hover {
    border-color: rgb(54, 130, 222);
    background-color: rgb(109, 164, 231);
}

.navbar .navbar-nav>li.nav-item.dropdown>ul>li:active,
.navbar .navbar-nav>li.nav-item.dropdown>ul>li>a.dropdown-item:active,
.navbar .navbar-nav>li.nav-item.dropdown>ul>li:focus,
.navbar .navbar-nav>li.nav-item.dropdown>ul>li>a.dropdown-item:focus {
    background-color: rgb(109, 164, 231);
}

#breaking-news{
    border-bottom: 1px solid black;
    box-shadow: 12px 12px 2px 2px  black;
    z-index: 99999;
}
#breaking-news *{
}

#latest-news{
    background-color: #1d488c;
}

.breaking-news,
.latest-news {
    line-height: 2em;
}

.breaking-news-title,
.latest-news-title {
    display: inline-block;
}


#lana-carousel div.carousel-indicators {
    bottom: -2%;
    /*background-color: darkgray;*/
    display: block;
}

div.carousel-indicators [data-bs-target] {
    background-color: orange;
}

div.carousel-buttons {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,000000+50,ffffff+100&0+0,0.5+50,0+100 */
    background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#00ffffff', GradientType=1);
    /* IE6-9 */

}


#lana-carousel ul.carousel-chooser li {
    margin-right: 0.25vw;
    margin-left: 0.25vw;
    padding: 0 0.25vw;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,ffffff+100&0.3+0,0+100 */
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4d000000', endColorstr='#00ffffff', GradientType=0);
    /* IE6-9 */

    border: 1px solid rgba(0, 62, 167, 0);
    border-bottom: none;

}

#lana-carousel ul.carousel-chooser li.selected,
#lana-carousel ul.carousel-chooser li:hover {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#003ea7+0,ffffff+100&0.78+0,0+100 */

    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#003ea7+0,ffffff+100&0.95+0,0+100 */
    background: -moz-linear-gradient(top, rgba(0, 62, 167, 0.95) 0%, rgba(255, 255, 255, 0) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(0, 62, 167, 0.95) 0%, rgba(255, 255, 255, 0) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(0, 62, 167, 0.95) 0%, rgba(255, 255, 255, 0) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2003ea7', endColorstr='#00ffffff', GradientType=0);
    /* IE6-9 */

    border: 1px solid rgba(0, 62, 167, 0.78);
    border-bottom: none;
}

#lana-carousel ul.carousel-chooser li h4 a {
    text-decoration: none;
    color: whitesmoke;
    text-decoration: underline;
    mix-blend-mode: difference;
}

#lana-carousel ul.carousel-chooser li h4 a:hover {
    color: white;
}

#lana-carousel .carousel-inner .carousel-caption h3 a {
    text-decoration: none;
    color: whitesmoke;
    background-color: rgba(0, 0, 0, 0.4);
    padding: 0.75rem 1.5ex;
    border-radius: 5px;
}

div.lana-carousel {
    max-height: 45vh;
}

.carousel-item {
    background-color: #666;
    overflow: hidden;
}

#lana-carousel .carousel-item {
    max-height: 45vh;
}

#lana-carousel .carousel-item img {

    min-height: 45vh;
    max-height: 60vh;
    /*    min-height: 50vh;
        max-height: 50vh;*/

    /*min-width: 85%;*/
    max-width: 100%;

}


#lana-carousel .carousel-caption h3 a {
    text-shadow: 1px 1px 0 #000;
    /*    -webkit-text-stroke-width: 1px;
        -webkit-text-stroke-color: black;
        -webkit-text-fill-color: white;*/
}

.carousel-control-prev {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,000000+100&0+0,0.88+100 */
    background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.88) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.88) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.88) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#e0000000', GradientType=1);
    /* IE6-9 */

}

.carousel-control-next {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,ffffff+100&0.88+0,0+100 */
    background: -moz-linear-gradient(left, rgba(0, 0, 0, 0.88) 0%, rgba(255, 255, 255, 0) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.88) 0%, rgba(255, 255, 255, 0) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(0, 0, 0, 0.88) 0%, rgba(255, 255, 255, 0) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e0000000', endColorstr='#00ffffff', GradientType=1);
    /* IE6-9 */
}

.text-shadow {
    text-shadow: 1px 1px 2px #333;
}


.tcontainer {
    overflow: hidden;
    /* Hide scroll bar */
}

/* MIDDLE CONTAINER */
.ticker-wrap {
    /*width: 100%;*/
    padding-left: 100%;
    /*Push contents to right side of screen */
    /*background-color: #eee;*/
}

/* INNER CONTAINER */
@keyframes ticker {
    0% {
        /*transform: translate3d(0, 0, 0);*/
        /*transform: translateX(-100%);*/
        transform: translate3d(-100vw,0,100vw);
    }

    100% {
        transform: translate3d(100vw, 0, 100vw);
        /*transform: translateX(100vw);*/
    }
}

.ticker-move {
    /* Basically move items from right side of screen to left in infinite loop */
    display: inline-block;
    white-space: nowrap;
    /*padding-right: 100%;*/
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-name: ticker;
    animation-duration: 40s;
}

.ticker-breaking-news-move {
    display: inline-block;
    white-space: nowrap;
    /*padding-right: 100%;*/
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-name: ticker;
    animation-duration: 30s;
}

.ticker-move:hover {
    animation-play-state: paused;
    /* Pause scroll on mouse hover */
}

/* ITEMS */
.ticker-item {
    display: inline-block;
    /* Lay items in a horizontal line */
    /*padding: 0 2rem;*/
}

.ticker-item span.h4,
.ticker-item a.h5 {
    text-decoration: none;
    color: white;
}

.ticker-item a:hover {
    color: #000;
    text-shadow: 1px 1px 1px #999;
}

.last-local-news-carousel div.owl-carousel div.card {
    overflow: hidden;
    width: 18rem;
}

.last-local-news-carousel div.owl-carousel div.card:hover {
    border-color: rgba(0, 62, 167, 0.5);
    box-shadow: inset 0 0 3px rgba(0, 62, 167, 0.5);
}

.last-local-news-carousel div.owl-carousel div.card a {}

.last-local-news-carousel div.owl-carousel div.card div.card-img-container {
    min-height: 13.5rem;
    max-height: 13.5rem;
    height: 13.5rem;
    width: 100%;
    overflow: hidden;
}

.last-local-news-carousel div.owl-carousel div.card img.card-img-top {
    background-color: #666;
    min-height: 13.5rem;
    overflow: hidden;
    box-shadow: inset 0 0 20px #333;
    width: auto;
    height: 13.5rem;
    max-height: 13.5rem;
}

.last-local-news-carousel div.owl-carousel div.card div.card-body {
    height: 7rem;
    min-height: 7rem;
    max-height: 7rem;
    overflow: hidden;
}

.card-body .card-text a,
.card-body .card-title a {
    text-decoration: none;
}

.card-body .card-title a:hover {
    text-decoration: underline;
}

.news-grid div.card div.card-body {
    /*max-height: 10em;*/
}

.news-grid div.card img.card-img-top {
    background-color: #999;
    height: 15em;
}

aside .aside-card {}

aside div.aside-card-body {
    height: 5.4em;
    max-height: 5.4em;
    overflow: hidden;
}

aside div.aside-card-body h5 {
    font-size: 0.9em;
}

aside div.aside-card-image {
    height: 8em;
    max-height: 8em;
    min-height: 7em;
    overflow: hidden;
    /*    position: relative;
        text-align: center;
        margin-left: auto;
        margin-right: auto;*/
}

aside div.aside-card-image img {
    background: #999;
    /*width: auto;*/
    max-height: 100%;
    min-width: 100%;
    margin-right: auto;
    margin-left: auto;
    vertical-align: middle;
}

.category-list-posts .card .card-body,
.category-list-posts .card {
    min-height: 20em;
    max-height: 20em;
    overflow: hidden;
}

.category-list-posts .card .card-body .card-text {
    line-height: 1.75rem;
}

.category-list-posts .card .category-card-image img {
    min-width: 100%;
    /*max-height: 100%;*/
    max-width: 100%;
    min-height: 100%;
    background-color: #999;
}


.tag {
    position: relative;
}

.tag:before {
    position: absolute;
    top: 1rem;
    display: block;
    color: white;
    padding: 0.25rem 1rem;
    font-weight: bold;
    font-size: 0.85em;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    opacity: 0.6;
    z-index: 999;
}

.tag-21::before {
    content: "محلي، عام";
    background: blue;
}

.tag-18::before {
    content: "محلي، طقس";
    background: blue;
}

.tag-14::before {
    content: "محلي، ثقافة";
    background: blue;
}

.tag-13::before {
    content: "محلي، علمي";
    background: blue;
}

.tag-11::before {
    content: "محلي، رياضة";
    background: blue;
}

.tag-6::before {
    content: "محلي، اقتصاد";
    background: blue;
}

.tag-5::before {
    content: "محلي، سياسة";
    background: blue;
}

.tag-10::before {
    content: "دولي، رياضة";
    background: blue;
}

.tag-9::before {
    content: "دولي، اقتاصاد";
    background: blue;
}

.tag-8::before {
    content: "دولي، سياسة";
    background: blue;
}

.tag-19::before {
    content: "دولي، علمي";
    background: blue;
}

.tag-20::before {
    content: "دولي، ثقافة";
    background: blue;
}

.tag-22::before {
    content: "دولي، عام";
    background: blue;
}

.date,
date {
    direction: ltr;
}



.footer,
.footer p,
.footer a {
    color: #bbb;
}

.thumbnails.owl-carousel img {
    cursor: pointer;
}

.thumbnails.owl-carousel .item {
    overflow: hidden;
}

.thumbnails.owl-carousel .item:hover {
    border-radius: 7px;
}

.thumbnails.owl-carousel .item:hover img {
    filter: brightness(1.1);
    border-radius: 7px;
    transform: scale(1.4);
    transition: 1s;
}

#contact-page p{
    font-size: 1.2em;
    /* text-align: justify; */
    line-height: 2em;
}

#contact-page h1 {
    line-height: 2em;
}

@media(max-width:767px){
    .border-small-none{
        border: none !important;
    }
}