@font-face {
    font-family: 'blackerprodis-bd';
    src: url('../fonts/primary/englishfonts/blackerprodis-bd.otf') format('opentype');
}

@font-face {
    font-family: 'blackerprodis-rg';
    src: url('../fonts/primary/englishfonts/blackerprodis-rg.otf') format('opentype');
}
@font-face {
    font-family: 'protype - siwa bold';
    src: url('../fonts/secondary/bilingual/protype - siwa bold.otf') format('opentype');
}

@font-face {
    font-family: 'protype - siwa regular';
    src: url('../fonts/secondary/bilingual/protype - siwa regular.otf') format('opentype');
}

::marker {display:none}
:root {
    --color-Primary: #2884C6;
    --color-Secondary: #50afe4;
    --color-blue-dark: #144066;
    --color-Tertiary: #7cb6bc;
    --color-quaternary: #d7eaf9;
    --color-text: #272530;
    --color-text-muted: #aeaeae;
    --color-blue-dark: #144066;
}


body {
    font-family: 'protype - siwa regular';
}
.flexible {
    flex-grow: 1;
}
.navbar-toggler:focus,
a:focus,
input:focus,
textarea:focus,
button:focus,
.btn:focus,
.btn.focus,
.btn:not(:disabled):not(.disabled).active,
.btn:not(:disabled):not(.disabled):active {
    text-decoration: none;
    outline: none;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
    color: inherit;
}

span{
    display: inline-block;
    text-decoration: none;
}
a {
    display: inline-block;
    text-decoration: none;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;

}
ul,
ol {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}

p {
    margin-bottom: 0;
    line-height: 1.2rem
}

img {
    max-width: 100%;
    vertical-align: middle;
}
.text-Primary{color:var(--color-Primary);}
.text-Secondary{color:#144066;}

/*----Preloader----*/
.preloader {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1000;
    background-color: rgba(255,255,255,0.8);
}
.preloader-inner { text-align: center; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; }

.beat-loader { stroke: var(--color-Primary); stroke-dasharray: 175; stroke-dashoffset: 350; animation: draw 1.4s linear; animation-iteration-count: infinite; }

@keyframes draw {
    100% { stroke-dashoffset: 0; }
}
.top-auto {
    top: auto
}
.link-secondary {
    text-decoration: none
}

.font-sm {
    font-size: 0.9rem;
}

.btn-primary {
    background-color: var(--color-Primary);
    border-color: var(--color-Primary);
    padding: 6px 8px;
    font-size: 0.875rem;
}

    .btn-primary span {
        line-height: 21px;
        height: 20px
    }
    .btn-primary i {
        margin-right:2px
    } 
    .btn-primary:hover {
        background-color: var(--color-Tertiary);
        border-color: var(--color-Tertiary);
        transition: all linear 0.3s
        /*    font-weight:600;*/
    }

        .btn-primary:hover:active {
            background-color: var(--color-Primary);
            border-color: var(--color-Primary)
        }

.btn-secondary {
    background-color: var(--color-Tertiary);
    border-color: var(--color-Tertiary);
    transition: all linear 0.3s;
}

    .btn-secondary:hover {
        background-color:transparent;
        border-color: var(--color-Tertiary);
        color: var(--color-Tertiary);
    }

.btn-outline-primary {
    color: var(--color-Tertiary);
    border-color: var(--color-Tertiary);
}

    .btn-outline-primary:hover {
        background-color: var(--color-Tertiary);
        border-color: var(--color-Tertiary);
        transition: all linear 0.3s;
    }
.btn-outline-secondary {
    color:#1A78C6;/* var(--color-Primary)*/
    border-color: #1A78C6;/* var(--color-Primary)*/
}
.btn-outline-secondary:hover {
    background-color: #1A78C6;/* var(--color-Primary)*/
    border-color: #1A78C6;/* var(--color-Primary)*/
    transition: all linear 0.3s;
}

.badge {
    padding: 0.3rem 0.5rem;
}

.text-bg-primary {
    background-color: var(--color-Tertiary) !important;
}

.text-bg-secondary {
    background-color: transparent !important;
    color: var(--color-Tertiary) !important;
    border: 1px solid var(--color-Tertiary) !important;
}

.bor {
    border-top: 1px solid var(--bs-card-border-color);
    border-bottom: 1px solid var(--bs-card-border-color);
    border-right: 1px solid var(--bs-card-border-color);
    border-radius: 0 0.6rem 0.6rem 0
}

.searchInput {
    border: 1px #c4c4c4 solid;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center
}

    .searchInput i {
        color: #939393
    }

    .searchInput input {
        border: none;
        background-color: transparent;
        color: #939393
    }

        .searchInput input:focus {
            outline: none;
            box-shadow: none
        }
.form-select{border-color:#6c757d; color:#6c757d}
.form-select:hover{cursor:pointer}
.dropdown-item:active{background-color:var(--color-Primary)}

/*===========================headings==============================*/
.headingH2Withsubtext {
    padding: 1rem 0
}

    .headingH2Withsubtext h2 {
        color: #222
    }

    .headingH2Withsubtext p {
        color: var(--color-Tertiary);
        font-weight: 600
    }

.headingH3 {
    color: #0e3c5d;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
    line-height: 17px;
    font-family: 'protype - siwa regular';
}

.HeadingH5 {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-bottom: 1px solid #73c4cc;
    margin-bottom: 0.5rem
}

    .HeadingH5 i {
        background: url("../images/heading-icon.png");
        height: 38px;
        width: 38px;
        display: block;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #ffffff;
        font-size: 1.1rem;
    }

    .HeadingH5 span {
        margin: 0 5px;
        color: #479ea7;
        font-weight: 600;
        font-size: 1.2rem;
        line-height: 14px;
    }


.subHeading {
    color: var(--color-Primary);
    font-size: 1.4rem;
    font-weight: 600;
    border-bottom: 1px solid var(--color-Primary);
    margin-bottom: 0.8rem
}

.sectionHeading {
    color: #000000;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem
}

.inpageHeading {
    font-size: 1.8rem;
    font-weight: bold
}

.subCategoryHeading {
    font-size: 1.1rem;
    font-weight: bold;
    border-left: 4px solid var(--color-Primary);
    padding-left: 0.8rem;
    margin: 0 0 1rem 1rem
}

.inpage-header {
    background-color: var(--color-quaternary);
    height: 160px;
}

    .inpage-header h1 {
        padding-bottom: 10px;
        border-bottom: 4px solid var(--color-Secondary)
    }

/*===========================top links==============================*/
.btn-callcenter {
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    font-family: Arial;
    font-size: 13px;
    background: #ffffff;
    padding: 4px 20px 4px 20px;
    border: solid #000000 1px;
    text-decoration: none;
}
/*==================Breadcrum=====================*/
.breadcrumb .breadcrumb-item {
    color: #d7eaf9;
    font-weight: 500;
    font-size: 0.9rem;
}
.breadcrumb .breadcrumb-item:last-child{display:none}

.breadcrumb .breadcrumb-item a { color: #d7eaf9; text-decoration: underline; font-weight: 500; }
.breadcrumb-item+.breadcrumb-item::before{ color: #d7eaf9;}

.breadcrumb-item.active {
    color: var(--color-Tertiary)!important;
}
/*===============Slider=====================*/

.banner-bg:before {
    content: "";
    background-color: #d9e8f2;
    height: 100%;
    width: 55%;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
    border-radius: 40px 0 0 40px;
}

.carousel-control-prev span, .carousel-control-next span {
    background-color: var(--color-Primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    font-size: 1.5rem;
}

.hero-area .carousel-indicators, .subsite-banner .carousel-indicators {
    margin-bottom: -2rem
}
.hero-area .carousel-caption {
    width: 100%;
    max-width: 600px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    text-align: left;
    padding: 1.875rem 3.75rem;
    position: absolute;
    top: 0;
    left: 0;
}
.hero-area .carousel-caption h4{
    color:#ffffff;
    font-size:1.6rem;
    font-family:'doran-bold';
    line-height:36px
}
.hero-area .btn-primary
{
    background-color:transparent;
    border-color:#ffffff;
}
.hero-area .carousel-item{
    width: 100%;
    height: 450px;
}
.hero-area .carousel-item img{
    max-width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}
.hero-area .btn-primary:hover {
    background-color: var(--color-Primary);
    border-color: var(--color-Primary);
}
/* Section Title */
.section {
    padding: 3rem 0;
    position: relative
}

.section-title {
    text-align: center;
    margin-bottom: 45px
}


    .section-title h2 {
        font-size: 1.9rem;
        margin-bottom: 1.1rem;
        line-height: 50px;
        text-transform: capitalize;
        position: relative;
        font-weight: 700;
        padding-bottom: 14px
    }

        .section-title h2:before {
            content: '';
            position: absolute;
            left: 0;
            bottom: -10px;
            width: 75px;
            height: 20px;
            margin: 0 auto;
            background: url('../images/Heart.svg')no-repeat;
            right: 0;
            border-radius: 5px;
        }
/*  .section-title h2:before {
            position: absolute;
            left: 50%;
            margin-left: -25px;
            bottom: -1px;
            height: 2px;
            width: 50px;
            background: var(--color-Primary);
            content: ''
        }*/

.section-title-left h2 {
    font-size: 1.9rem;
    margin-bottom: 1rem;
    text-transform: capitalize;
    position: relative;
    font-weight: 700;
    padding-bottom: 14px;
    
}

    .section-title-left h2:before {
        position: absolute;
        left: 0%;
        margin-left: 0px;
        bottom: 0px;
        height: 2px;
        width: 50px;
        background: var(--color-Primary);
        content: '';
    }

/* One Click Scrool Top Button*/
.scroll-top {
    width: 40px;
    height: 40px;
    line-height: 40px;
    background: #50afe4;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 1.5rem;
    color: #fff !important;
    border-radius: 50%;
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9;
    cursor: pointer;
    -webkit-transition: .3s ease-out;
    transition: .3s ease-out
}

    .scroll-top:hover {
        -webkit-box-shadow: 0 1rem 3rem rgba(35,38,45,.15);
        box-shadow: 0 1rem 3rem rgba(35,38,45,.15);
        -webkit-transform: translate3d(0,-5px,0);
        transform: translate3d(0,-5px,0)
    }

    .scroll-top i:before {
        line-height: 46px;
    }

    /*search input*/
#searchForm input[type="search"] { border-right: none }
#searchForm button.btn { border: var(--bs-border-width) solid var(--bs-border-color); border-left: none }
#searchForm button.btn:hover { background-color: #b6c7d7 }
#searchForm .searchHeading { font-family: 'protype - siwa regular'; margin: 1rem; color:#333; text-align:center}
#searchForm .globalSearch input { border: solid #5a5a5a 1px; border-radius: 0; height: 50px;}
#searchForm .globalSearch button { border: solid #5a5a5a 1px; background-color: #b6c7d7; }
#searchForm .globalSearch button { border-left: none; }
#searchForm .globalSearch button i{ font-size:22px}
/*===============Header=====================*/
.navbar-area { width: 100%; z-index: 99; -webkit-transition: .3s ease-out; transition: .3s ease-out; background-color: #fff; position: relative; box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 4px; }

.navbar-brand h5 {
    color: var(--color-Primary)
}

.navbar-area.sticky .toolbar-area {
    display: none;
}

.header .toolbar-area {
    /*padding: 0.6rem 0.6rem 0;*/
    padding: 0.6rem;
}

    .header .toolbar-area .toolbar-sl-share ul {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        height: 71px
    }

        .header .toolbar-area .toolbar-sl-share ul li {
            padding: 0 .5rem;
            border-right: 1px solid #eee
        }

            .header .toolbar-area .toolbar-sl-share ul li:last-child {
                border-right: 0px;
            }

            .header .toolbar-area .toolbar-sl-share ul li a {
                color: #0F6FAF;
                height: 25px;
                width: auto;
                display: block;
                text-align: center;
                line-height: 32px;
                font-size: 1.3rem;
                margin: 0 5px
            }
            .header .toolbar-area .toolbar-sl-share ul li a i.shifaApp_Icon {
                height: 21px;
                width: 21px;
                text-align: center;
                display: flex;
                align-items: center;
                justify-content: center;
                background: url(../images/shifaApp_Icon.svg) no-repeat;
            }
            .header .toolbar-area .toolbar-sl-share ul li a.btn-link {
                position: relative;
                display: flex; 
                align-items: center;
                gap: 5px;
                text-decoration:none
            }
            .login-link, .login-link i, .login-link span { height: 28px; }
                .sticky {
                    position: fixed;
                    z-index: 99;
                    background-color: var(--color-Primary);
                    -webkit-box-shadow: 0 20px 50px 0 rgba(0,0,0,.05);
                    box-shadow: 0 20px 50px 0 rgba(0,0,0,.05);
                    -webkit-transition: .3s ease-out;
                    transition: .3s ease-out;
                    top: 0
                }
.navbar-area.sticky .navbar-nav .nav-item > a{color:#ffffff}
.sticky .navbar-toggler .toggler-icon { background-color: #ffffff; }
.moh-logo{ position:relative}
.moh-logo img {
   /* width: 200px;
    height: auto;*/
   /* margin-right: 1rem*/
}
.logo-separator {
    display: inline-block;
    width: 1px;
    /*height: 50px;*/
    background-color: #eee;
    margin: 0 15px;
    align-self: stretch;
}

/*.vision-logo img {
    width: auto;
    height: 85px
}*/

/*.moh-logo:after {
    content: " ";
    position: absolute;
    border-right: 1px solid #dfdfdf;*/
    /*top: 19%;*/
    /*height: 80px;
    margin-top: auto;
    margin-bottom: auto
}*/

/*.vision-logo {
    margin: 0  1.5rem;
}
*/
.navbar-nav .nav-item {
    position: relative;
    margin-right: 25px
}

    .navbar-nav .nav-item a {
        font-size: 1.125rem;
        font-weight: 500;
        color: #333;
        -webkit-transition: .3s ease-out;
        transition: .3s ease-out;
        padding: 10px 0;
        position: relative;
        text-transform: capitalize
    }

        .navbar-nav .nav-item a::before {
            content: '';
            position: absolute;
            bottom: 0.6rem;
            height: 2px;
            background: var(--color-Primary);
            opacity: 0;
            border-radius: 10px;
            -webkit-transition: .3s ease-out;
            transition: .3s ease-out;
            z-index: 5
        }

        .navbar-nav .nav-item a.active::before, .navbar-nav .nav-item:hover a:before {
            opacity: 1;
            width: 100%;
        }

        .navbar-nav .nav-item a.active, .navbar-nav .nav-item a:hover {
            color: #0F6FAF;
        }

.navbar-toggler, .navbar-toggler:focus {
    outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    padding: 0;
    border: 0
}

    .navbar-toggler, .navbar-toggler:focus {
        outline: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
        padding: 0;
        border: 0
    }

.navbar-toggler .toggler-icon { width: 30px; height: 2px; background-color: #333; display: block; margin: 5px 0; position: relative; -webkit-transition: .3s ease-out; transition: .3s ease-out }

        .navbar-toggler.active .toggler-icon:first-of-type {
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
            top: 7px
        }

        .navbar-toggler.active .toggler-icon:nth-of-type(2) {
            opacity: 0
        }

        .navbar-toggler.active .toggler-icon:nth-of-type(3) {
            -webkit-transform: rotate(135deg);
            transform: rotate(135deg);
            top: -7px
        }

/*megamenu*/
.header .navbar .has-megamenu {
    position: static
}

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

.header .navbar .megamenu h3 {
    font-size: 1rem;
    margin-bottom: .5rem;
    padding: 0.5rem 0.9rem;
    background: rgba(40,132,198,0.10);
    color:#144066;
    border-left:4px solid #144066;
}

.header .navbar-nav li .megamenu {
    padding: 1rem;
    margin: 0;
    -webkit-box-shadow: 0px 13px 20px rgba(20, 64, 102, 0.2);
    box-shadow: 0px 13px 20px rgba(20, 64, 102, 0.2);
    border-radius: 0 0 3px 3px;
    border: 0;
}

    .header .navbar-nav li .megamenu li a {
        padding: .5rem .9rem;
        color: #666;
        display: block;
        font-size: .85rem;
        font-weight: 400;
        text-transform: capitalize;
        background: 0 0;
        border-radius: 3px;
        line-height: 1rem;
    }

    .header .navbar-nav li .megamenu li:hover a {
        color: #fff;
        background: var(--color-Primary)
    }

    .header .navbar-nav li .megamenu li a:before {
        display: none
    }

/* Search animation*/
.searchBox i, .searchBox input {
    background-color: #30a8dc;
    line-height: 40px
}

.searchBox {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center
}

    .searchBox input {
        border: none;
        outline: 0;
        width: 0;
        padding: 0;
        opacity: 0;
        border-radius: 40px;
        font-size: 18px;
        color: #fff;
        transition: 1s
    }

        .searchBox input::placeholder {
            color: rgba(255,255,255,.5);
            font-weight: 400
        }

    .searchBox i {
        width: 40px;
        height: 40px;
        padding: 9px 10px;
        border-radius: 50%;
        text-align: center;
        font-size: 20px;
        cursor: pointer;
        transition: .5s
    }

    .searchBox:hover i {
        color: #fff
    }

.search_input {
    outline: 0;
    background: 0 0;
    width: 0;
    border: 0;
    border-radius: 12px;
    caret-color: #aaaaaa;
    transition: width .8s linear;
    font-size: 12px
}

.searchBox:hover input {
    width: 240px;
    opacity: 1;
    padding: 10px 20px;
    display: flex
}

.searchbar:hover .search_input {
    border: 1px solid var(--color-Tertiary);
    padding: 3px 10px;
    width: 200px;
    display: flex;
    transition: width .8s linear
}

.search_icon {
    float: right;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-decoration: none
}

/*eServices*/

/*.eservices {
    background-image: url('../images/BG.svg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    z-index: 0;
}*/
.card.service-card {
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.098)
}
.service-card .card-title {
    color: #144066;
    font-size: 1rem;
}
.service-card .card-text {
    color: #343434;
    font-size: 0.875rem;
    line-height:18px;

}
.card.service-card:before {
    /*content: '';
    position: absolute;
    left: 0.625rem;
    bottom: 0.625rem;
    width: 6.25rem;
    height: 6.25rem;
    background-color: #144066;
    border-radius: 1.875rem 0 0.625rem 0;
    z-index: -1;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;*/
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-blue-dark);
    border-radius:1rem;
    transform: rotate(-7deg);
    z-index: -1;
    box-shadow: 0 0 10px rgba(40,132,198, 0.5);
}

/*.card.service-card:hover:before {
    left: -1.875rem;
    bottom: -2.1875rem;
}*/

.shadow-hover:hover {
    box-shadow: 0 10px 60px 0 rgba(31,34,120,.1);
    background-color: #f8fbfd;
}

.eserviceCard.card {
    border:1px solid var(--color-Primary);
  /*  background:url("../images/card-bg.svg") no-repeat;
    background-color:transparent*/
}

.eserviceCard .card-title { font-size: 1rem; font-family: 'protype - siwa regular'; color: #133f65; line-height: 18px; }

.eserviceCard .card-text {
color: #616161;
line-height: 1rem;
font-size: 0.9rem;
margin-bottom: 0.5rem;
height: 80px;
overflow:hidden;
}

.eserviceCard .card-body {
padding: 1rem;
height:190px;
}
.eserviceCard.card:hover{filter: drop-shadow(3px 3px 5px rgb(0 0 0 / 0.1));}

.eserviceCard .card-body .card-info i {
    font-size: 0.9rem;
    margin: 0 2px;
    display: flex;
    justify-content: flex-start;
    align-items: center
}

.eserviceCard .card-info a {
display: inline-flex;
align-items: center;
color: var(--color-Primary);
line-height: 15px;
padding: 5px 8px
}

a.card-link {
display:inline-flex;
align-items: center;
color: var(--color-Primary);
line-height: 15px;
padding: 5px 8px;
}

a.card-link:hover {
border-radius: 5px;
background-color: var(--color-Primary)!important;
color:#ffffff!important;
}

.show-more {
-webkit-line-clamp: initial;
line-clamp: initial;
overflow: unset;
}

.show-less {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4; /* Limit the text to 4 lines */
line-clamp: 4; /* For other modern browsers */
overflow: hidden;
}

.show-more-btn {
display: block;
}

/*============tabUI========================*/
.tabUI.nav-tabs {
    border-bottom-color:#c7c7c7
}

.tabUI.nav-tabs .nav-link {
    color: #000000;
    position:relative;
    padding: var(--bs-nav-link-padding-y) 0;
    margin:0 15px;border:none;
    font-size: 1.3rem;
}

.tabUI.nav-tabs .nav-link.active {
    border:none; 
    color: var(--color-Primary);
    font-weight: 500;
    
    
}
.tabUI.nav-tabs .nav-link:before{content:'';position:absolute; height:3px; background-color: var(--color-Primary); width:0%; transition:ease 0.2s width;top:auto; bottom:-2px}

.tabUI.nav-tabs .nav-link:hover:before{ width:100%; transition:ease 0.2s width}

.tabUI.nav-tabs .nav-link.active:before{content:'';position:absolute; height:3px; background-color: var(--color-Primary); width:100%; top:auto; bottom:-2px}


.tabUI.nav-tabs .nav-link:hover,.tabUI.nav-tabs .nav-link:focus,.tabUI.nav-tabs .nav-link:focus-visible {
    border:none;color: var(--color-Primary)
}

/*media center*/
#carouselEventsCalendar .carousel-inner, #carouselNews .carousel-inner, #GovernorateNews .carousel-inner { box-shadow: rgba(0,0,0,.24) 0 3px 8px; margin-bottom: 1rem }

#carouselEventsCalendar .dateContent, #carouselNews .dateContent, #GovernorateNews .dateContent { position: absolute; top: 25px; left: 0; background-color: var(--color-Primary); border-radius: 0 20px 20px 0; color: #fff; text-align: center; padding: 10px 15px; font-size: 12px; box-shadow: 0 4px 4px rgb(0 0 0 / 25%); font-weight: 500 }
.dateContent .textDate { padding: 0 5px; }
#carouselEventsCalendar .carousel-indicators, #carouselNews .carousel-indicators, #GovernorateNews .carousel-indicators { margin-bottom: -1.2rem }

#carouselEventsCalendar .carousel-caption h4, #carouselNews .carousel-caption h4, #GovernorateNews .carousel-caption h4 { color: #fff; font-size: 1.1rem; }

.carousel-indicators [data-bs-target] { background-color: var(--color-Primary); width: 9px; height: 9px; border-radius: 50%; border-top: 0 solid transparent; border-bottom: 0 solid transparent; margin: 0 5px }

#carouselEventsCalendar .carousel-indicators .active, #carouselNews .carousel-indicators .active, #GovernorateNews .carousel-indicators .active,
.hero-area .carousel-indicators .active, .subsite-banner .carousel-indicators .active { box-shadow: 0 0 0 5px rgba(0,137,221,.15) }

#carouselEventsCalendar .carousel-caption, #carouselNews .carousel-caption, #GovernorateNews .carousel-caption { left: 0; right: 0; bottom: 0; padding: 1rem 1rem 1.5rem; text-align: left; background: linear-gradient(0deg,rgba(20,64,102,1) 0,rgba(40,132,198,.01) 100%); /*height: 70px*/ }
#GovernorateNews .carousel-caption span{ padding: 3px 8px;border-radius: 5px;background-color: rgb(255, 255, 255, 0.85);color: #6da3a9;margin-bottom:0.5rem;font-size:14px}

#carouselNews .carousel-item,#GovernorateNews .carousel-item { height: 420px; }
.card-Category{color: #6da3a9;font-size:14px}

#carouselEventsCalendar .carousel-item { height: 230px; }
.carousel-item .date i { padding-right: 5px }
.GovernorateContent h6.card-title { font-size: 0.9rem }
.Heading-mediaCenter h3, .Heading-mediaCenter i {
    font-size: 1.5rem;
    color: #144066;
    margin-bottom: 0.5rem;
}


#announcemnets p {
    font-size: 1.1rem;
    color: #606060;
    margin-bottom: .5rem;
 
}

#announcemnets li {
    border-bottom: 1px dashed var(--color-Secondary);
    margin-bottom: .5rem
}

#announcemnets .dateContent {
    color: var(--color-Primary);
    font-size: 0.95rem;
    font-weight: 500
}

/*media center inner page*/
.dateMedia {
    color: #777777
}

.headingH4 {
    position: relative;
    padding-bottom: 0.5rem;
    margin-bottom: 2rem;
    font-size: 1.2rem;
    font-weight: 600;
    color:#000000
}

    .headingH4:before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 80px;
        height: 4px;
        background: var(--color-Secondary);
    }

    .headingH4:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 1px;
        background: var(--bs-border-color);
    }

h6.card-title {
    color: #081828;font-size: 0.75rem;
}

.allNewsContent .card .card-link {
    display: inline-flex;
    align-items: center;
    color: var(--color-Tertiary)
}

    .allNewsContent .card .card-link:hover {
        color: var(--color-Primary)
    }

    .allNewsContent .card .card-link i {
        font-size: 1.2rem
    }

.allNewsContent .card .card-body {
    border: 1px solid #f2f2f2;
    border-radius: 0px 0px 0.375rem 0.375rem;
    height: 170px;
}
.allNewsContent .card .card-body .card-title{font-size:0.8rem}
.allNewsContent img{width:100%; height:auto}
.allNewsContent .card-img-overflow { max-height: 198px; overflow: hidden }
.allEventsContent .card .card-link { display: inline-flex; align-items: center; color: var(--color-Tertiary) }

    .allEventsContent .card .card-link:hover {
        color: var(--color-Primary)
    }

    .allEventsContent .card .card-link i {
        font-size: 1.2rem
    }

.allEventsContent .card .card-body {
    height: 90px;
}
.allEventsContent .card .card-body .card-title { font-size: 0.75rem }
.allEventsContent img{width:100%; height:100%;object-fit: cover;}
.allEventsContent .dateRange { font-size: 0.85rem; color: var(--color-Primary); font-weight:600 }

.eventDetails p { margin-bottom: 1rem }
.eventDetails .eventDate { color: #144066; font-weight: 600; font-size: 1.1rem }
.eventDetails .venueDetails{}

/*Events details*/
.contentMedia{ margin-top:0.5rem;text-align:justify;}
.contentMedia h2 { font-size: 16px; font-family: 'protype - siwa regular' !important; font-weight: normal }
.contentMedia p { margin-bottom: 0.5rem } /*news detail page do not change*/
/*carousel*/
.owl-nav .owl-prev { left: -30px; opacity: 1 }

.owl-nav .owl-next {
    right: -30px;
    opacity: 1
}

.owl-nav .owl-next, .owl-nav .owl-prev {
    top: calc(50% - 25px);
    z-index: 1;
    position: absolute
}

.owl-carousel .owl-item img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

/*Puffs*/
.bg-Overlay {
    position: relative;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
    border-radius: 10px;
}
.mask {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-attachment: fixed;
    background-color: rgba(0, 0, 0, 0.09);
}
    .Puffs .card {
       
        border:1px solid var(--color-Tertiary);
        margin:0 0.6rem;
        border-radius:10px
    }

.Puffs h6.card-title {
    font-size: 1rem;
    color: #144066;
    height: 35px;
}
.Puffs .card-text {
    font-size: 0.875rem;
    color: #606060;
}
.Puffs .card-body
{
    height:150px;
}
    .Puffs .card a.card-link  {
       
       color:#197B8D;
       font-size:16px
    }
   .Puffs  a.card-link:hover
   {
       background:rgba(124,182,188,0.3)
   }
.Puffs p.desc {
    color: #888C92
}
    

/* .Puffs:before {
        content: "";
        background-color: #d9e8f2;
        height: 100%;
        width: 45%;
        position: absolute;
        right: 0;
        top: 0;
        z-index: -1;
        border-radius: 40px 0 0 40px;
    }*/

.slick-slide {
    margin: 0.6rem; 
    /*max-height:260px*/
}
.ProjectCard{ margin-bottom:1rem}
.ProjectCard .card-title { height: 60px; font-family: "protype - siwa regular"; line-height: 20px;}
.ProjectCard .card-text { height: 68px; text-align: justify; line-height: 17px; }
.ProjectCard .card-date { color: #144066; }

.slick-slide .img-fluid { background-color: #d2d2d2; height: 100%; border: 1px solid #d2d2d2;min-height:auto }

.carouselPuffs .card .card-img-top {
    width: 100%;
    height: 200px;
    background-color: rgba(0, 0, 0, 0.5)
}


.carouselPuffs .slick-prev, .carouselPuffs .slick-next {
    position: absolute;
    background: #6da3a9 !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50%;
    top: 47%;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 10px;
    text-align: center;
    z-index: 9;
    cursor: pointer;
    transition: all 0.3s ease-in 0s;
}

    /*
.carouselPuffs .slick-prev {
    left: 25.5% !important
}

.carouselPuffs .slick-next {
    right: 25.5% !important
}*/
    .carouselPuffs .slick-prev:before, .carouselPuffs .slick-next:before {
        line-height: 36px !important;
        color: #fff !important
    }
/*
.carouselPuffs h6.card-title {
    max-height: 55px;
    min-height: 55px
}*/

.slick-dots li button:before {
    font-size: 2rem !important;
    color: #144066 !important
}
.slick-dots {
    bottom:-40px !important;
}

/*share button*/
.share-buttons {
    position: fixed;
    top: 60%;
    -webkit-transform: translateY(-60%);
    -ms-transform: translateY(-60%);
    transform: translateY(-60%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #6e657e;
    bottom: 0;
}

    .share-buttons a {
        color: #6e657e;
        font-size: 1.2rem;
        height: 30px;
        width: 30px;
        text-align: center;
        display: block;
        line-height: 30px;
        background: transparent;
        border-radius: 50%;
        position: relative;
        z-index: 3
    }
.share-buttons a i,.share-buttons a svg{border-radius: 50%;
    background-color: white;
    padding: 5px;
    height: 25px;
    width: 25px;
    font-size: 0.9rem;}

.vertical {
    border-left: 1px solid #6e657e;
    height: 25px;
    position: relative;
    margin: 5px 0
}


/*aler*/
.topNotification .simple-alert {
    background-color: #FCE5E5;
    border:1px solid #edb0b0;
    
}

.topNotification .alert {
    width: 100%;
    padding: 0.8rem;
    position: relative;
    border-radius: 5px;
    box-shadow: 0 0 15px 5px #ccc;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    transition: all linear 0.4s;
}
.contentNotification p{color: #606060;}
.contentNotification {align-items:baseline}
/*.alert-container ul li a {
    color: #fff;
    padding: 0 5px;
    font-size: .9rem
}*/
.contentNotification a {
    color: #606060;
    padding: 0 5px;
    font-size: 1rem;
    font-weight: 500;
    text-decoration: underline
}
/*.alert-container ul li a:hover {
    text-decoration: underline
}*/

.simple-alert .close {
    opacity: .7;
    color: #BB0202;
    font-size: 1.5rem;
    cursor: pointer
}

.alert-icon span {
    color: #BB0202;
    font-size: 1rem;
    font-weight: 700;
    padding: 0 10px
}

.alert-icon i {
    color: #BB0202;
    font-size: 0.9rem;
    height: 30px;
    width: 30px;
    line-height: 30px;
    border-radius: 50%;
    background: rgba(187,2,2,.12);
    text-align: center;
}

/*=============== hospital and DG services CSS=====================*/

.subsite-banner .carousel-item img { max-width: 100%; height: 325px; object-fit: cover; }

/* Vission & Mission & History */
.vision-Card-item .card {
    border: 1px dashed #93B5CA;
    border-radius: 0 1.5rem
}

    .vision-Card-item .card h5.card-title {
        color: #144066
    }

    .vision-Card-item .card .featureCard-icon i {
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 100%;
        background-color: var(--color-quaternary);
        width: 65px;
        height: 65px;
        box-shadow: 1px 4px 6px 0 rgba(0,0,0,.1);
        color: var(--color-Primary);
        font-size: 1.5rem;
    }

    .vision-Card-item .card .featureCard-icon:before {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        border-radius: 50%;
        z-index: 1;
        animation: pulseanim 3s infinite cubic-bezier(.4,0,1,1) both;
    }

    .vision-Card-item .card .card-text {
        color: #808080;
        max-height: 90px;
        min-height: 90px;
        overflow: hidden
    }

/* text blockquote */
.blockquote {
    line-height: 1.5rem;
    font-size: 1.2rem;
    color: #4b4a49;
    text-align: justify;
    
}

blockquote i {
    font-size: 1.5rem;
    color: var(--color-Tertiary);
    margin: 0 0.5rem
}


.subsite-card .card .card-icon {
    background-color: var(--color-quaternary);
    height: 65px;
    width: 65px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-Primary);
    border-radius: 50%;
    margin: 0 5px
}

    .subsite-card .card .card-icon i {
        font-size: 1.5rem
    }

.subsite-card .card .card-text {
    color: #8c8989;
    font-size: 0.9rem;
    line-height: 1rem;
    padding: 0 0 10px 0
}

.subsite-card .card .card-link {
    color: var(--color-Primary);
    font-size: 0.8rem;
    text-decoration: underline;
    font-weight: 600;
   
}

.subsite-card .card .card-link i{ margin:0 0.2rem}

.subsite-header {
    background-color:#144066 !important;
    height: 190px;
    width: 100%;
}

    .subsite-header h1 {
        margin-bottom: 0.5rem;
        color: #ffffff;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 80%;
        white-space: nowrap;
        font-size: 2rem;
        font-family: 'protype - siwa regular';
        font-weight: 500;
    }

.subsite-header-image {
    background: rgb(255,255,255);
    background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 86%);
    height: 190px;
    width: 100%
}
   

.subsite-header-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    height: 190px
}

.subsite-Services .flip-card-front {
    background-color: #fcfcfc;
    border: 0px ;
    border-radius: 15px;
    padding: 1rem;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}
.subsite-Services .card.flip-card-front .card-body{padding:1rem}

.subsite-Services .flip-icon {
    width: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 80px;
}

.subsite-Services .flip-card-front i:first-child {
    color: var(--color-Primary);
    font-size: 1.7rem;
    height: 35px;
    margin-bottom: -17px;
}

    .subsite-Services .flip-card-front i:first-child:before, .subsite-Services .flip-card-back i:first-child:before {
        top: 4px;
        position: relative;
    }

.subsite-Services .flip-card-front i:last-child {
    color: var(--color-Secondary);
    font-size:3rem
}

.subsite-Services .card .card-body {
    padding: 0
}

.subsite-Services .card .card-title {
    color: #333335;
    margin-top: 1.5rem;
    min-height: 45px;
    font-size: 1.2rem;
}

.subsite-Services .card .card-img-top {
    width: 64px;
    max-width: auto
}

.subsite-Services .card.flip-card-front .card-text {
    color: #8c8989;
    font-size: 0.9rem;
    line-height: 1rem;
    padding: 0;
}

.subsite-Services .card.flip-card-back {position:absolute; top:0;text-align:center}
.subsite-Services .card.flip-card-back .card-title{margin:0 0 0.5rem 0;color:#ffffff;font-size:0.9rem}
.subsite-Services .card.flip-card-back .card-text { color: #ffffff; font-size: 0.9rem; line-height: 1rem; padding: 1rem 0; margin-bottom: 1rem; height: 145px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 8; line-clamp: 8; overflow: hidden; }

.subsite-Services .card .card-link {
    color: #ffffff;
    font-size: 0.9rem;
    text-decoration: underline;
    font-weight: 600;
    display: inline;
    cursor:pointer;
}

    .subsite-Services .card .card-link:hover {
        text-decoration: none;
        color: var(--color-Primary);
        font-weight: normal
    }

    /*Subsite Tab UI*/
    
.subsite-navtab .nav-item .nav-link.active {
color: var(--color-Primary);
font-weight: 600;
border-color: var(--color-Primary);
border: none;
border-bottom-color: #ffffff;
border-top: 3px solid var(--color-Primary);
border-radius: 0
}

.subsite-navtab .nav-item .nav-link {
color: #000;
font-size: 1rem;
border-top: 3px solid #ffffff;
}

.subsite-navtab {
border: none
}

.subsite-navtab.nav-pills {
margin:1rem 0
}

.subsite-navtab.nav-pills .nav-item .nav-link.active {
    color: #ffffff;
    font-weight: 600;
    border: none;
    border-radius: 55px;
    background-color: var(--color-Primary)
}

.subsite-navtab.nav-pills .nav-item .nav-link {
    color: var(--color-Primary);
    font-size: 1rem;
    border: 1px solid var(--color-Primary);
    border-radius: 55px;
    margin: 0 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    line-height: 21px;
}
.subsite-navtab.nav-pills .nav-item .nav-link:hover{box-shadow:3px 3px 5px rgb(0 0 0 / 0.15)}
    /*first level tab*/
.firstLevel-navtab {
    border: none;
    background-color: #144066;
    margin:0 0 1rem 0
}
.firstLevel-navtab ul{border:none}

    .firstLevel-navtab .nav-item .nav-link {
        color: var(--color-Tertiary);
        font-size: 1.1rem;
        border-radius: 3px 3px 0 0;
        padding: 0.5rem 1.5rem;
        height: 40px;
        line-height: 23px;
        border: none;
       
    }
    .firstLevel-navtab .nav-tabs .nav-item .nav-link.active {
        color: #144066;
        border: none;
        background-color: #ffffff;
        border: none;
        transition: all ease 0.2s;
        line-height: 24px;
        border-top: 4px solid var(--color-Tertiary);
    }
.firstLevel-navtab .nav-tabs .nav-item .nav-link:hover{ border:none; }

.firstLevel-navtab .nav-tabs .nav-item .nav-link:hover{line-height:18px; transition:all ease 0.2s}

.flip-card {
    height: 300px;
    perspective: 1000px;
    margin-bottom: 1.5rem;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 15px
}

.flip-card-back {
   /* background-image: radial-gradient(circle at 40% 91%, rgba(251, 251, 251,0.04) 0%, rgba(251, 251, 251,0.04) 50%,rgba(229, 229, 229,0.04) 50%, rgba(229, 229, 229,0.04) 100%),radial-gradient(circle at 66% 97%, rgba(36, 36, 36,0.04) 0%, rgba(36, 36, 36,0.04) 50%,rgba(46, 46, 46,0.04) 50%, rgba(46, 46, 46,0.04) 100%),radial-gradient(circle at 86% 7%, rgba(40, 40, 40,0.04) 0%, rgba(40, 40, 40,0.04) 50%,rgba(200, 200, 200,0.04) 50%, rgba(200, 200, 200,0.04) 100%),radial-gradient(circle at 15% 16%, rgba(99, 99, 99,0.04) 0%, rgba(99, 99, 99,0.04) 50%,rgba(45, 45, 45,0.04) 50%, rgba(45, 45, 45,0.04) 100%),radial-gradient(circle at 75% 99%, rgba(243, 243, 243,0.04) 0%, rgba(243, 243, 243,0.04) 50%,rgba(37, 37, 37,0.04) 50%, rgba(37, 37, 37,0.04) 100%),linear-gradient(180deg, rgb(0,137,221),rgb(136,202,210));
    */color: white;
    transform: rotateY(180deg);
    padding: 1rem;
    background-color:#144066;
}

.subsite-list {
    display: flex;
    align-items: center;
    justify-content: flex-start
}

.subsite-list li { display: flex; align-items: center; justify-content: flex-start; margin: 5px 0 1rem 0; text-align: initial }

        .subsite-list li:before {
            content: '\F270';
            font-family: bootstrap-icons !important;
            font-style: normal;
            color: #ffffff;
            font-weight: 400 !important;
            padding: 0 3px;
            background-color: var(--color-Tertiary);
            border-radius: 50%;
            margin: 0 7px
        }
/*resource card*/
.subsite-cardWithBorder {margin-top: 10px;margin:0 1rem}
.subsite-cardWithBorder .dropdown-menu{padding:4px 0}
.subsite-cardWithBorder .dropdown-item{white-space:pre-wrap;font-size:0.875rem;line-height:18px;border-bottom:1px solid #e9e9e9}
.subsite-cardWithBorder  ul li:last-child span{border-bottom:0px}


.subsite-cardWithBorder li span.dropdown-item:hover{cursor:pointer}
.subsite-cardWithBorder .card { border: 1px dashed #88cad2; padding: 1rem 1.5rem 0.5rem 1.7rem; border-radius: 10px; box-shadow: 0 3px 3px 0px #3333333b; }

        .subsite-cardWithBorder .card .card-icon {
            height: 45px;
            width: 25px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: var(--color-Primary);
            margin: 0
        }

            .subsite-cardWithBorder .card .card-icon i {
                font-size: 1.5rem
            }

        .subsite-cardWithBorder .card .card-title {
            color: #333;
            margin-bottom: 3px;
            font-size: 1.2rem;
            font-family:'protype - siwa bold'
        }

    .subsite-cardWithBorder .card .card-text {
        color: #5f5e5e;
        font-size: 1rem;
        line-height: 1.4rem;
        padding: 0 0 10px 0;
        text-align: justify;
        hyphens: auto;
        -webkit-hyphens: auto;
        word-spacing: -0.5px;
    }

        .subsite-cardWithBorder .card .card-link {
            color: var(--color-Primary);
            font-size: 1rem;
            text-decoration: underline;
            font-weight: 500; background-color:transparent
        }
/*.subsite-cardWithBorder .card .card-link:hover { text-decoration: none; border-radius: 25px; background-color: var(--color-quaternary); }*/

        .subsite-cardWithBorder .card .card-info {
            display: flex;
            justify-content: flex-start;
            align-items: center
        }

            .subsite-cardWithBorder .card .card-info i {
                color: var(--color-Tertiary)
            }

            .subsite-cardWithBorder .card .card-info span {
                color: #5f5e5e
            }

        .subsite-cardWithBorder .card .card-btn {
            color: var(--color-Tertiary);
            border: 1px solid var(--color-Tertiary);
            padding: 5px 10px;
            box-shadow: 0px 0px 4px 1px #3333331f;
            font-weight: 500;
            font-size: 0.85rem;
            border-radius: 5px;
            margin-bottom: 0.4rem;
        }

            .subsite-cardWithBorder .card .card-btn:hover {
                background-color: var(--color-Tertiary);
                color: #fff;
                text-decoration: none;
            }

.subsite-card .card-items .card-title {
    font-size: 0.875rem;
}
.subsite-card .card-title { font-Family: "protype - siwa regular"; line-height: 1.2rem; text-transform: lowercase; font-size: 1.05rem; }
.subsite-card .card-title:first-letter { text-transform: capitalize; }

.RecentUsedTags { height: 90px }

.RecentUsedTags .TagList { display: flex; flex-wrap: wrap; justify-content: center; height: 40px }

.RecentUsedTags a { border: solid 1px var(--bs-border-color); color: var(--bs-gray-600); margin: 0.3rem; padding: 0.3rem 0.5rem; border-radius: 1rem; font-size: 0.8rem }

.RecentUsedTags a.active, .RecentUsedTags a:hover {
    background-color: var(--color-Tertiary);
    color: #fff;
    border-color: var(--color-Tertiary)
}


/*===============Profile CSS=====================*/
.profile-Section {
    position: relative;
    height: 445px;
    max-width: 385px;
    display: flex;
    justify-content: center;   
}

   /* .profile-Section:before {
        content: '';
        background-color: var(--color-quaternary);
        position: absolute;
        height: 150px;
        width: 230px;
        z-index: 1;
        left: -30px;
        border-radius: 0 1rem
    }

    .profile-Section:after {
        content: '';
        background-color: var(--color-quaternary);
        position: absolute;
        height: 150px;
        width: 110px;
        bottom: 1.2rem;
        z-index: 1;
        right: -30px;
        border-radius: 0 1rem
    }
*/
    .profile-Section .profile-photo {
        padding: 0.25rem;
        /*position: absolute;
        margin: 0 2.5rem;*/
        background-color: #ffffff;
        z-index: 2;
        top: 1.8rem;
        border-radius: 0.25rem;
        height: 365px;
        width: 100%
    }

        .profile-Section .profile-photo img {
            height: 100%;
            width: 100%;
            object-fit: fill;
            object-position: center
        }
.profile-Section .fw-bold { font-size: 1rem; color: #144066; }
.profile-Section .text-muted { line-height: 0.8rem; font-size: 0.8rem; margin-top: 0.5rem; }

.postedBy{display:flex; justify-content:flex-start}
/*.postedBy div { display: flex; flex-direction: column; justify-content: center }*/
.postedBy img { max-height: 150px }
/*===============accordian CSS=====================*/
/*
.accordion.site-accoridan .accordion-item {
    border: none;
    margin-bottom: 1rem
}

.accordion.site-accoridan .accordion-header .accordion-button {
    color: #000000;
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: 500;
    background-color: var(--color-quaternary);
    border-radius: 5px;
    padding: 13px 5px;
}

    .accordion.site-accoridan .accordion-header .accordion-button.collapsed {
        border: 2px solid var(--color-quaternary);
        background-color: #ffffff
    }

    .accordion.site-accoridan .accordion-header .accordion-button:focus {
        box-shadow: 2px 2px 4px #cccccc
    }

    .accordion.site-accoridan .accordion-header .accordion-button::after {
        display: none
    }

    .accordion.site-accoridan .accordion-header .accordion-button::before {
        content: '\f0ab';
        font-family: "Font Awesome 6 Free";
        color: var(--color-Primary);
        font-size: 1.3rem;
        font-style: normal;
        font-weight: 900;
        margin: 0 10px;
        line-height: 28px;
    }

    .accordion.site-accoridan .accordion-header .accordion-button.collapsed::before {
        content: '\f0aa';
    }
    */
/* Cv Profile*/
.profileImg-cv { height: 445px; max-width: 385px; display: flex; justify-content: center; }

.border-layer-2 {
    position: absolute;
    width: calc(100% + 5px);
    height: 100%;
    border-radius: 1rem;
    border: 1px solid #2884C6;
    top: 10px;
    left: 8px;
    z-index: 0;
}

.profileImg-cv > img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 1rem;
}
.accordion-cv .accordion-item {
    box-shadow: 0px 0px 25px 4px rgb(0 0 0 / 5%);
    margin-bottom: 20px;
    border-radius: 8px;
    border: none !important;
    -webkit-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
}
.accordion-cv .accordion-button {
    padding: 1.3rem 1.25rem;
    border-radius: 8px;
    color: #144066;
}
.accordion-cv .accordion-button:not(.collapsed) {
    color: #fff;
    background-color: #144066;
    border-radius: 8px 8px 0 0;
    -webkit-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
    box-shadow: none
}
.accordion-cv .accordion-body {
    background-color: #144066;
    color: #fff;
    border-radius: 0 0 8px 8px;
    padding-top: 0;
}
.accordion-cv .accordion-body ul.accordion-list {
    list-style-type: circle;
    margin: 0 1.2rem
}
ul.content-list {
    list-style-type: circle;
    margin: 0 1.1rem
}
ul.content-list li::marker {
    color:var(--color-Primary)
}
ul.accordion-list li::marker {
    color: var(--color-Tertiary)
}
.accordion-cv .accordion-button::after {
    background-size: 1rem;
}
.accordion-cv .accordion-button:not(.collapsed)::after,.accordion-button:not(.collapsed)::after {
    background-image: url('../images/accordion-btn-icon.svg');
}
.accordion-cv ul.accordion-list li::marker {
    color: var(--color-Tertiary)
}


/*===============Footer CSS=====================*/
.footer {
    margin-top: 5rem
}

    .footer .footer-info {
        color: #fff;
        text-align: center;
        padding: 0rem 1.5rem;
        
    }


    .footer .logo img {
        width: 248px;
        margin-bottom: 1rem
    }

    .footer .footer-info p {
        color: #fff;
        font-size: .95rem;
        line-height: 24px;
        margin-bottom: 1rem
    }

    .footer .footer-social ul li {
        display: inline-block;
        margin-right: .375rem
    }

        
    .footer .footer-social ul 
    {
        display:flex;
        justify-content:center
    }
        .footer .footer-social ul li a {
            font-size: 1rem;
            height: 35px;
            width: 35px;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            /*background: #fff;*/
            background: url("../images/List-icon.svg") no-repeat;
            color: #fff;
            border-radius: 0.4rem 0.2rem
        }

            /*  .footer .footer-social ul li a:hover {
        background-color: var(--color-quaternary)
    }*/
    .footer .footer-social ul li a i{height:17px}
    .footer .footer-middle {
        padding: 2.5rem 0;
        background:#144066;
        border-radius: 2.5rem 2.5rem 0 0
    }

    .footer .single-footer h3 {
       color: #ffffff;
        font-size: 1rem;
        font-weight: 600;
        text-transform: capitalize;
        margin-bottom: 1rem;
        margin-top: .5rem
    }

        .footer .single-footer h3::after {
            height: 2px;
            margin: .375rem 0;
            display: block;
            width: 2.5rem;
            background: #0089dd;
            content: ''
        }

    
    .footer .single-footer ul li a {
        display: inline-block;
        color: #ffffff;
        font-size: .875rem;
        position: relative;
        margin-bottom: 0.5rem;
        -webkit-transition: .3s;
        transition: .3s
    }

        .footer .single-footer ul li a::before {
            position: absolute;
            content: "";
            left: 0;
            bottom: 0;
            height: 1px;
            width: 0%;
            background-color: #50afe4;
            opacity: 0;
            visibility: hidden;
            -webkit-transition: .3s;
            transition: .3s
        }

        .footer .single-footer ul li a:hover::before {
            width: 100%;
            opacity: .8;
            visibility: visible
        }

        .footer .single-footer ul li a:hover {
            color: #50afe4;
        }

    .footer .footer-bottom {
        background-color: #144066;
        color: #ffffff;
    }

        .footer .footer-bottom .inner {
            padding: .625rem 0;
     border-top: 1px solid rgba(40,132,221,.5)
        }

            .footer .footer-bottom .inner p a:hover {
                color: #3763eb
            }

            .footer .footer-bottom .inner .visitor-counter {
                text-align: end
            }

/*=========================inpage=============*/



.RecentUsedTags span {
    color: #343434;
    padding: 0.2rem 0.5rem;
    height: 28px;
    font-size: 0.8rem;
    margin: 0 0.5rem;
}

.tabHeader {
    background-color: var(--color-quaternary)
}

    .tabHeader .nav-tabs .nav-link.active {
        color: #ffffff;
        background-color: #50afe4;
        border-color: #4eace0;
    }

    .tabHeader .nav-tabs .nav-link {
        color: #343434;
        flex: none;
        font-size: 1rem;
        background-color: #ffffff;
        border-color: #ffffff;
    }

.check-list li {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 0;
    align-items: center;
}

    .check-list li:before {
        content: '\f14a';
        font-family: "Font Awesome 6 Free";
        color: var(--color-Tertiary);
        font-size: 1.1rem;
        font-style: normal;
        font-weight: 900;
        margin: 0 10px;
        line-height: 28px;
    }


.about-Card-Content .card .card-text {
    overflow: hidden;
    max-height: 250px;
    text-align:justify;
}

.about-Card-Content .card .img-wrapper {
    width: 100%;
    height: 365px;
}

.about-Card-Content .card img {
    height: 100%;
    object-fit: fill;
    object-position: center
}


.card-items .card-text {
    color: #8c8989
}

.card-items .card-date {
    color: #144066
}



@media only screen and (max-width: 1380px) {
    .Puffs {
        padding-left: 1.875rem;
        padding-right: 1.875rem;
    }
}

.eService-Details ul { list-style-type: circle; margin: 0 1.1rem }
.eService-Details ul li::marker { color: var(--color-Primary) }

/*animation css*/
.fadeInDown {
    -webkit-animation: fadeInDown 2s 0s both;
    animation: fadeInDown 2s 0s both;
}

.fadeInUp {
    -webkit-animation: fadeInUp 2s 0s both;
    animation: fadeInUp 2s 0s both;
}

.fadeInRight {
    -webkit-animation: fadeInRight 2s 0s both;
    animation: fadeInRight 2s 0s both;
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,-100%,0);
        transform: translate3d(0,-100%,0);
    }

    100% {
        opacity: 1;
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,100%,0);
        transform: translate3d(0,100%,0);
    }

    100% {
        opacity: 1;
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translateX(20px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pulseanim {
    0% {
        box-shadow: 0 0 0 0 rgba(217,232,242,.5)
    }

    70% {
        box-shadow: 0 0 0 60px rgba(255,255,255,0)
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255,255,255,0)
    }
}

/*main container*/

main{min-height:calc(100vh - 478px)}

/*tab content */
.tab-content p{font-size:1rem; font-weight:normal}

.tab-content h3{color: #000000;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    
}

.popoverCallCenter{ background-color:#f0f2f5; border:none;}
.popoverCallCenter:before{content:'\f0d8'; font-size:1.5rem; font-family:FontAwesome; position:absolute; top:-23px; left:0; right:0; margin:auto; width:15px; height:15px;color:#f0f2f5;}
.popoverCallCenter .popover-arrow:before,.popoverCallCenter .popover-arrow::after{display:none}

.callIcon{display:flex;
   justify-content:center;
   align-items:center;color: #144066;}

.callIcon a {
   background-color: #144066;
   border-radius:25px;
   padding:5px;
   height:25px;
   width:25px;
   display:flex;
   justify-content:center;
   align-items:center;
   color:#ffffff;
   margin:0 0.5rem
 }

.PDFitemlist-news ul {
    list-style: circle;
    padding-left: 2rem;
    color: #144066;
    margin-top:0.5rem
}
.PDFitemlist-news ul a {
     color:#144066;
     margin-bottom:0.35rem;
}


/*pagination*/
.page-item.disabled .page-link{background-color:transparent;color:#cbcbcb}
.page-item ,.page-link { border:none;width:35px;height: 35px; line-height: 24px;color:var(--color-Secondary);display:inline-block;text-align:center;}
.page-item.active .page-link{border-radius:50%;border:1px solid var(--color-Secondary); background-color:transparent; color:var(--color-Secondary)}



/*userFeedBack*/
.userfeedbackContainer .radio_group{width:38px;height:38px;margin:0 5px;position:relative;text-align:center;display:flex;align-items:center;font-size:30px;border:1px solid #2884c6;border-radius:3px}
.userfeedbackContainer .radio_group input[type=radio]{opacity:0;width:100%;height:100%;position:absolute;left:0;top:0;margin:0;padding:0;z-index:1;cursor:pointer}
.userfeedbackContainer .radio_group input[type=radio]:checked+label{transform:scale(1);background:#2884c6;color:#fff;transition:.3s linear}
.userfeedbackContainer .radio_group input[type=radio]+label{color:#2884c6;width:100%;height:100%;position:absolute;left:0;top:0;transform:scale(.8)}
.userfeedbackContainer{box-shadow:rgba(0,0,0,.04) 0 3px 5px;border:1px solid rgba(40,132,198,.15)}
#feedbackStas span,.userfeedbackContainer h6{color:#144066}




#feedbackStas span {
    color: #144066;
    display:contents;
}
.userfeedbackContainer .userfeedbackText {
    display:flex;
    justify-content:end
}
.VideoThumbnail a{ position:relative}
.VideoThumbnail a:before{content:''; background-color:rgba(0,0,0,0.5); 
position:absolute; height:100%; width:100%;border-radius:10px}
.VideoThumbnail h2{ width: 100%; font-size: 1rem;margin:7px 0}
.VideoThumbnail a i{ color:#ffffff;position: absolute;
    z-index: 2;
    color: #ffffff;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    text-align: center;
    width: 100%;
    font-size: 2rem;
    height: 33px;}
.VideoThumbnail a img{ border-radius:10px}
.videoModal .modal-content{ background-color:transparent !important; border:none}
.videoModal .modal-dialog{max-width:80%}
.embed-responsive-item{height:Calc(100vh - 85px);width:100%;}

/*Photo gallery*/
/* https://codepen.io/93lucasp/pen/LYYMYoB */
.masonry {
    columns: 3;
    column-gap: 16px;
}

.masonry .grid {
    display: inline-block;
    margin-bottom: 16px;
    position: relative;
    cursor:pointer
}
.masonry .grid:before {
      border-radius: 5px;
      content:'';
      position:absolute;
      top:0;
      right:0;
      bottom:0;
      left:0;
      /*background-color:rgba(0,0,0,.2);*/
    }
.masonry .grid img {
      width: 100%;
      border-radius: 5px;
    }
.masonry .grid__title {
      font-size: 18px;
    font-weight: bold;
    margin: 12px;
    color: #fff;
    position: absolute;
    top: -6px;
    }
.masonry .grid__author {
      font-size: 14px;
      font-weight:300;
    }
.masonry .grid__link {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
    }
.masonry .grid__body {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      padding:20px;
      color: #fff;
      display: flex;
      flex-direction: column
    }
  @media (max-width: 1200px) {

    .masonry {
        columns: 3;
    }
  }
  @media (max-width: 992px) {
    .masonry {
        columns: 2;
    }
    .masonry .grid__body{padding:10px}
    .masonry .grid__title {
        font-size: 15px;
    }
  }


.ContentCv .blockquote {
    border-left: 3px solid #6EB5BD;
    color: #1a1a1a;
    font-size: 1.2rem;
    line-height: 1.7rem;
    margin: 1rem 0;
    padding: 1rem 1.5rem;
    position: relative;
    transition: 0.2s border ease-in-out;
    z-index: 0;
}
.ContentCv .blockquote p {
   line-height:1.6rem
}
.ContentCv h6 {
    font-size: 1.7rem;
    color: #000;
}
.ContentCv .blockquote:before {
    content: "";
    position: absolute;
    top: 50%;
    left: -4px;
    height: 2rem;
    background-color: #fff;
    width: 5px;
    margin-top: -1rem;
}
.ContentCv .blockquote:after {
    content: " \F6B0";
    font-family: bootstrap-icons;
    position: absolute;
    top: 50%;
    left: -0.5em;
    color: #6EB5BD;
    font-style: normal;
    line-height: 1em;
    text-align: center;
    text-indent: -2px;
    width: 1em;
    margin-top: -0.5em;
    transition: 0.2s all ease-in-out, 0.4s transform ease-in-out;
    font-size: 1.8rem;
}
.cvitem-card .card {
    border: 2px solid rgba(124,182,188,0.40)
}

.cvitem-card .card-title {
    color:var(--color-Primary)
}
/* card-dashed-border*/
.card.card-dashed-border{border:1px dashed #528ea0}
.card.card-dashed-border h2{ font-size:1rem}
/* slick button */
.circularList .slick-prev, .circularList .slick-next {
    width: 36px !important;
    height: 36px !important;
    background: #d5e8e9 !important;
    border-radius: 50%;
    z-index: 1;
}
/*audio tags*/
audio{width: 100%; display: block; height: 43px;}
audio::-webkit-media-controls-panel {
  background-color:#d7eaf9;}
.circularList .card-title{font-size:1rem;height:50px;line-height:1rem}
.circularList .slick-next:before { color:#47767b; content: '\F135'; font-family: bootstrap-icons !important;font-size:1.5rem;}
.circularList .slick-prev:before { color:#47767b; content: '\F12C'; font-family: bootstrap-icons !important;font-size:1.5rem; }
 .circularList .slick-prev.slick-disabled, .circularList .slick-next.slick-disabled{ display:none !important}
/*calendar*/
.fc .fc-toolbar-title { font-size: 1.2rem !important; font-family: Siwa }
.fc-theme-standard td, .fc-theme-standard th { border: none !important }
.fc-direction-rtl #fc-dom-1 {
    font-family: "protype - siwa regular";
    font-weight: bold;
}
.fc-direction-ltr .fc-button-group > .fc-button:not(:last-child), .fc-direction-rtl .fc-button-group > .fc-button:not(:last-child) {
    margin: 0 0.6rem;
}
.fc-direction-ltr .fc-button-group > .fc-button:not(:last-child), .fc-direction-rtl .fc-button-group > .fc-button:not(:last-child), .fc-direction-ltr .fc-button-group > .fc-button:not(:first-child), .fc-direction-rtl .fc-button-group > .fc-button:not(:first-child) {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50% !important;
    width: 38px;
    height: 38px;
    background-color: #ffffff;
    border: 1px solid var(--color-Primary);
    color: var(--color-Primary);
}
.fc .fc-col-header-cell-cushion {
    color: #144066;
    font-size: 1.1rem;
}
.fc-event{ cursor:pointer}
.fc-today-button { color: var(--color-Primary) !important; background-color: #ffffff; border: 1px solid var(--color-Primary); font-weight: bold !important; }
.fc .fc-button-primary { background-color: #ffffff !important; border: 1px solid var(--color-Primary) !important; padding:5px !important }
.fc .fc-button-primary:disabled { color: #757575 !important; border-color: white !important; background-color: #bcbcbc !important }
.fc .fc-button-primary:focus { box-shadow: 0 0 0 0.2rem rgba(40, 132, 198, 0.5) !important; }
.fc-h-event .fc-event-main { font-size: 0.9rem !important; padding: 0 0.5rem; }
.fc .fc-button-primary:not(:disabled):active, .fc .fc-button-primary:not(:disabled).fc-button-active { color: var(--color-Primary) !important; border-color: var(--color-Primary) !important; background-color: rgba(40,132,198,0.2) !important }
.fc-theme-standard .fc-scrollgrid{ border:none !important}
.fc-scrollgrid-section-header { background-color: var(--color-quaternary) }
.fc .fc-daygrid-day.fc-day-today {
    background-color: transparent !important;
}
.fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-top a { background-color: var(--color-Primary); color:#ffffff; border-radius:50%; padding:0 8px }

.fc .fc-daygrid-day-number { color: var(--color-text); font-size: 1.3rem; width: 35px; height: 35px; text-align: center; margin-top: 9px; line-height: 36px; }
.fc .fc-daygrid-event-harness {    
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    padding: 3px;
}
.fc .fc-daygrid-body-unbalanced .fc-daygrid-day-events{ min-height:2px !important}

/*Contact us*/
.contact-map iframe {width: 100%;border-radius:5px}
.contact-card.card {text-align:center;box-shadow: 5px 15px 60px rgba(27, 33, 47, 0.08);-webkit-box-shadow: 5px 15px 60px rgba(27, 33, 47, 0.08);position: relative;z-index: 1;border: 1px solid transparent;transition: all ease 0.4s;border-radius: 10px;min-height: 169px;margin-bottom:1.5rem;}
.contact-card.card:hover{border-color:var(--color-Primary);}
.contact-card .card-title {color: #144066;font-size:1.2rem; font-family:'protype - siwa bold'; margin-bottom:0}
.contact-card .card-text, .contact-card a{font-size:1.13rem;color:#212529}
.contact-card a:hover{color:var(--color-Primary)}
.contact-card .contactCard-icon {width: 45px;height: 45px;line-height: 54px;text-align: center;display: inline-block;font-size: 1.4rem; background-color: var(--color-Primary);color: #ffffff;border-radius: 50%;margin: 10px 0;transition: all ease-out 0.4s;position: relative;}
.contact-card .contactCard-icon:hover{transform: translateY(-8px);}
.contact-card .contactCard-icon:before ,.contact-card .contactCard-icon:after{content: "";position: absolute;left: 0;top: 0;width: 100%;height: 100%; background-color: var(--color-Secondary);border-radius: inherit;z-index: -1;animation: ripple infinite 3s ease-in-out;}
.contact-card .contactCard-icon:after {animation-delay: 1.8s;}

.contact-widget .content-list, .contact-widget .sectionHeading {margin-bottom: 0.5rem}
.contact-widget .sectionHeading {font-size:1rem;}
.contact-widget .content-list ul li p {font-size: 1rem}

/*contact and locations*/
.contact-map #mapid{width:100%!important;margin-bottom:1rem;border-radius:5px}
.contact-location-card .card-icon { margin-right: 1rem }
.contact-location-card .card-icon i {
    font-size: 1rem;
    height: 40px;
    width: 40px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-Primary);
    color: #ffffff;
    border-radius: 50%;
}

.contact-location-card .card-body .card-btn { color: var(--color-Tertiary); border: 1px solid var(--color-Tertiary); padding: 5px 10px; box-shadow: 0px 0px 4px 1px #3333331f; font-weight: 500; font-size: 0.85rem; border-radius: 5px; margin-bottom: 0.4rem; }

.contact-location-card .card-body .card-btn:hover { background-color: var(--color-Tertiary); color: #fff; text-decoration: none; }

.contact-location-card .card-title{ font-size:1rem}
.contact-location-card .Content-location{width:100%}
.accordionContact .accordion-button:not(.collapsed) {
    background-color: var(--color-Primary) !important;
    color: #fff;
}

/*.accordion-button:not(.collapsed)::after {background-image: url("data: image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") }*/


@keyframes ripple {
    0% {
        transform: scale(1);
        opacity: 0;
    }
    30% {
        opacity: 0.4;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}
.contact-H-Des ul {list-style-type: circle;margin: 0 1.2rem;}
.contact-H-Des ul li::marker{color:var(--color-Primary);}
.contact-H-Des .headingContact{ font-size:1.25rem;font-weight:bold }

.fc .fc-daygrid-body-unbalanced .fc-daygrid-day-events {
    min-height: 2px !important
}
.modal-dialog-slide { transition: 0.5s ease !important; -webkit-transition: 0.5s ease !important; position: fixed; height: 100vh; width: 25%; left: auto; right: -100%; top: 0; bottom: auto; background-color:white; z-index: 100;box-shadow:-5px 5px 5px rgb(0 0 0 / 0.2) }
.slide-in { right:0; }
.slide-overlay { background-color: rgba(0,0,0,0.5); padding-top: 2em; position: absolute; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; z-index: 10; }
.search-result-value { font-size: 1rem; text-decoration: none; color: #000000;line-height: 50px; width: 100%; padding: 0 10px;display:flex; justify-content:space-between; border-bottom:1px solid #d4d4d4 }
.search-result-value:hover { background-color:#d9f8f4; }
.search-result-value:after { content: '\F285'; font-family: bootstrap-icons !important; }
/*Sitemap*/
.sitemap-Card-Content .card .card-text { overflow: hidden; max-height: 250px; text-align: justify; }

.Heading-site-map {
    font-size: 1rem;
    margin-bottom: 0.5rem;
    padding: 0.5rem 0.9rem;
    border-radius: 3px;
    background: rgba(40,132,198,0.15);
    font-family: 'blackerprodis-bd';
}
    .Heading-site-map span, .Heading-site-map i {
        color: #144066 !important;
    }
ul.list-item-sitemap li a {
    color: #666;
}
.list-sitemap summary ,.list-sitemap
{
    margin-left:1rem
}

.h-150{
    height:150px;
}
.max-100 {
    max-height: 100px;
    max-width: 100px;
}

/*body .uwy.userway_p2 .uai { left: calc(100vw - 22px) !important;}*/

.item .item-content {
    padding: 30px 35px;
}





#profile-description .show-more-height {
    -webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 17;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

/*welcome message*/
.welcomeBar { background-color: #144066; height: 41px; color: #ffffff }
.welcomeBar .welcomeBarWrapper { display: flex; align-items: center; justify-content:space-between; height: 40px; }
.welcomeBar .WelcomeUser { display: flex; align-items: center;}
.welcomeBar .WelcomeUser div{ line-height:16px}
.welcomeBar .welcomeIcon { background-image: url("../images/List-icon.svg"); height: 35px; width: 35px; background-repeat: no-repeat; display: flex; align-items: center; justify-content: center; margin: 0 5px; color: #ffffff }
.welcomeBar .userId{ font-size:0.9rem; margin:0 0.5rem}

/* Statistics */
.Statistics { background: rgba(40,132,148,.04); }
.contentCounter .card { background: #144066; color: #ffffff;margin-bottom:1rem; }
.contentCounter .counter-box p { margin-top: 5px; font-size:0.938rem; height:38px }
.contentCounter .counter { display: block; font-size: 2rem; line-height: 30px }

/* contentChannels */

.contentChannels .card .iconChannel { color: #fff; width: 40px; height: 40px; text-align: center; background-color: #144066; font-weight: 600; position: absolute; top: 15px; left: 15px; display:flex;justify-content:center; align-items:center; border-radius: 6px; }
.contentChannels .subsite-navtab .nav-item .nav-link.active { border-bottom: 2px solid var(--color-Primary); border-top-color: #ffffff }
.contentChannels li i {font-size:1.1rem;margin-right:0.625rem;}
.contentChannels .nav-item .nav-link{color:#606060;font-size:1.1rem}
.contentChannels h6.card-title{min-height:45px;max-height:45px;overflow:hidden}

/*Login*/
.loginHeading{margin:10px 0;}
.loginLayout {background-image: url(../images/LoginBG.svg);background-size: cover;background-repeat: no-repeat;background-position: center bottom;}
.loginContainer{width:100%;position:absolute;left:50%;top:50%;transform: translate(-50%, -50%);}
.loginContainer .loginHeading h5 {color:var(--color-Primary);text-align:center}
.loginContainer .input-group {border-radius:25px;border: 1px solid #ced4da;height:30px;}
.loginContainer .form-control {border:0;background-color:transparent;text-align:center}
.loginContainer .input-group-text {width: 30px;height: 30px;line-height: 30px;background-color: var(--color-quaternary);border-radius: 50% !important;border: 0;color:#144066;justify-content:center}
.loginContainer .card {box-shadow: rgba(99, 99, 99, 0.3) 0px 2px 8px 0px;border-radius: 20px;background: linear-gradient(0deg, rgba(255, 255, 255, 1) 40%, #d7eaf9 100%); border:0;text-align:center;padding:24px}
.loginContainer .card .card-title { color: var(--color-Primary);font-size:18px;font-weight:bold }
.loginContainer .card .card-text{color:#6a7178;font-size:14px;margin-bottom:24px}
.loginContainer a.text-decoration-underline{font-weight:bold;font-size:15px;margin-bottom:16px}
.loginContainer .btn-secondary { background: #144066; border-color: #144066;width:100%;border-radius:100px;font-size:16px;font-weight:bold }
.loginContainer .btn-secondary:hover {  color:#ffffff;   filter: brightness(0.9);}

.loginLayout footer{background-color:transparent;font-size:14px;position:absolute;bottom:0;text-align:center;left:0;right:0;margin:auto;height:28px}
.loginLayout footer a,.loginLayout footer p{color:#4f575e}.loginLayout footer a{text-decoration:underline}
.lang-toggle-switch {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    border-radius: 20px;
    border: 1px solid #144066;
    height: 26px;
    position: relative;
    transition: background-color 0.3s;
    overflow: hidden;
}

.lang-toggle-circle {
    width: 27px;
    height: 24px;
    background-color: #144066;
    border-radius: 25px;
    transition: transform 0.3s;
    padding: 0 4px;
    font-size: 13px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lang-toggle-label {
    flex: 1;
    text-align: center;
    color: #144066;
    font-weight: 700;
    font-size: 13px;
    padding-left: 5px;
    padding-right: 5px;
}

.header-navs-right li{padding:0 4px}
.header-navs-right li a{color:#144066;font-size:14px;font-weight:600}
.header-navs-right li a i{border-radius:50%;background-color:rgba(20,64,102,.1);color:#144066;padding:5px;height:30px;width:30px;display:flex;justify-content:center;align-items:center}



/* portrait and landscape - xs and sm*/
@media (max-width: 767.98px) {
    body { font-size: 13px }
    .profile-Section:after, .profile-Section:before { display: none }
    .blockquote { line-height: 1rem; font-size: 0.9rem; }
    .toolbar-logo { justify-content: center }
    .welcomeBar .WelcomeUser{ flex-direction:column; align-items:baseline}
    .inpageHeading { font-size: 1.2rem }
  /*  .moh-logo img { width: 160px }
    .moh-logo:after{height:55px}
    .vision-logo img { height: 60px }*/
    .subsite-header, .subsite-header-wrapper { height: 130px }
    .userfeedbackContainer .userfeedbackText { justify-content: center; margin-top: 0.5rem }
    .userfeedbackContainer h6 { font-size: 0.8rem; }
    .header .toolbar-area .toolbar-sl-share ul li { padding: 0 2px; }
    .header .toolbar-area .toolbar-sl-share ul li a i { font-size: 1.1rem; }
    .navbar-nav .nav-item { margin: 0 }
    .navbar-nav .nav-item a { padding: 5px 0; width: 100%; display: flex; justify-content: space-between; align-items: center }
    .navbar-nav .nav-item a::before { top: auto; bottom: 0.2rem }
    .header .navbar-nav li .megamenu { box-shadow: none; -webkit-box-shadow: none; padding: 0 }
    .header .navbar-nav li .megamenu .row { margin: 0 }
    .header .navbar .megamenu h3 { font-size: 0.8rem; margin: 0; border: none }
    .header .navbar-nav li .megamenu li a { padding: 0.3rem 0.9rem }
    #carouselNews .carousel-item, #carouselEventsCalendar .carousel-item { height: auto }
/*    .hero-area.section{padding:0}*/
    .firstLevel-navtab { position: relative; height: 39px; }
    .firstLevel-navtab > div{ position:absolute; overflow-x:scroll; overflow-y:hidden}
    .firstLevel-navtab ul { flex-wrap: nowrap }
    .firstLevel-navtab .nav-item{width:33%}
    .firstLevel-navtab .nav-tabs .nav-item .nav-link.active, .firstLevel-navtab .nav-item .nav-link { white-space: normal; font-size: 0.9rem; padding: 0.5rem; text-align: center; line-height: 13px; }
    .subsite-navtab.nav-pills { margin: 2rem 0 }
    .subsite-navtab.nav-pills .nav-item .nav-link { margin: 0 0.2rem 0.5rem 0.2rem; padding-left: 0.5rem; padding-right: 0.5rem; line-height: 14px; font-size: 0.9rem; border-radius: 15px; }
    .section{ padding:1.5rem 0}
    .section-title{ margin-bottom:25px}
    .section-title h2,.ContentCv h6 {font-size:1.3rem;line-height:1.7rem }
    .footer .footer-bottom .inner .visitor-counter, .footer .footer-bottom .inner p { text-align: center; font-size: .75rem }
   /* .footer .logo img { width: 150px }*/
    .footer .footer-info { padding: 1rem }
    .scroll-top { width: 32px; height: 32px; line-height: 32px; right: 15px }
    .owl-nav .owl-next { right: 0 }
    .owl-nav .owl-prev { left: 0 }
    .share-buttons { display: none }
    .RecentUsedTags .TagList { flex-wrap: nowrap; position: absolute; overflow: scroll; justify-content: start; width: 95%; }
    .RecentUsedTags a { flex: none }
    .searchForm .form-select, .searchForm input, .searchForm button.btn { height: 32px }
    .allNewsContent .card .card-body .card-title { line-height: 1.1rem; }
    .RecentUsedTags { height: 45px }
    .slick-slide{ margin:0}
    .subCategoryHeading{ margin:0 0 1rem 0}
    .circularList .card-title{ height:auto}
    .userfeedbackContainer .radio_group { width: 25px; height: 25px; font-size: 20px; }
    .userfeedbackContainer .userfeedbackText{ font-size:0.8rem}
    .tabUI.nav-tabs li.nav-item { width: 33%; }
    .tabUI.nav-tabs li.nav-item .nav-link { font-size: 0.9rem; line-height: 14px; }
    .tabUI.nav-tabs .nav-link.active:before{left:0; right:0}
    .ProjectCard .card-title { font-size: 1rem; }
    .subsite-header h1 { width: 97%; font-size:1.5rem }
    .subsite-banner .carousel-item img { height: 200px }
    .subsite-banner .carousel-item .hero-title { font-size: 1rem; margin-top: 0.5rem; }
    #feedback_comments_box { background: rgba(217,232,242,0.2); border-radius: 10px }
    .userfeedbackContainer .radio_group { width: 32px !important; height: 32px !important; font-size: 25px !important; }
    .modal-dialog-slide{width:85%}
    .hero-area .carousel-indicators, .subsite-banner .carousel-indicators{margin-bottom:-1.2rem}
    .uwy .uai img:not(.userway_check_on),body .uwy .uai img:not(.userway_check_on),body .uwy .uai{width:40px!important;height:40px!important}
    body .uwy.userway_p2 .userway_buttons_wrapper{left:calc(100vw - 5px)!important}
    .hero-area .carousel-item {height: auto;}
    .table-container tbody, .table-container td, .table-container th, .table-container thead, .table-container tr {white-space: nowrap}
    .loginLayout{/*background:linear-gradient(180deg, rgba(255,255,255,1) 85%, #d7eaf9 100%)!important*/ background-position:inherit}
    .loginContainer{position:relative;left:0;top:0;transform:translate(0, 0)}
    .loginLayout footer{position:relative;height:auto}
    }

/* Extra small devices (portrait phones, less than 576px) - xs */
@media (max-width: 575.98px) {
    .header .toolbar-area .toolbar-sl-share ul { justify-content: center }
    .contentNotification{flex-direction:column;font-size:14px;align-items: flex-start;}
    .firstLevel-navtab .nav-tabs .nav-item .nav-link.active, .firstLevel-navtab .nav-item .nav-link{font-size:11px}
     .hero-area .carousel-caption h4{font-size:12px;line-height:14px}
     .hero-area .carousel-caption p{font-size:10px;}
    .hero-area .carousel-caption{padding:1rem;right:0;max-width:300px}
    .btn-outline-primary , .btn-primary{font-size:0.75rem ;padding:4px}
}

/*Small devices (landscape phones, 576px and up) - sm*/
@media (min-width: 576px) and (max-width: 767.98px){
    .header .toolbar-area .toolbar-sl-share ul { justify-content: flex-end }
  

}

/* Medium devices (tablets, 768px and up) - md*/
@media (min-width: 768px) and (max-width: 991.98px) {
    .navbar-nav .nav-item { margin: 0 }
    .navbar-nav .nav-item a { padding: 5px 0; width: 100%; display: flex; justify-content: space-between; align-items: center }
    .navbar-nav .nav-item a::before { top: auto; bottom: 0.2rem }
    .header .navbar-nav li .megamenu { box-shadow: none; -webkit-box-shadow: none; padding: 0 }
    .header .navbar-nav li .megamenu .row { margin: 0 }
    .header .navbar .megamenu h3 { font-size: 0.8rem; margin: 0; }
    .header .navbar-nav li .megamenu li a { padding: 0.3rem 0.9rem }
    .hero-area.section ,.section{ padding:2rem 0 }
    .listItem-card .card {
        /* max-width: 288px;*/
        height: 86px!important;
        /*background-size: 100%;*/
    }
    
  
}

/*X-Large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
}

/*XX-Large devices (larger desktops, 1400px and up)*/
@media (min-width: 1400px) {
}


.subCategoryHeading .text-Primary:after {
    font-family: "Font Awesome 6 Free";
    content: "\f054";
    padding: 0 5px;
    vertical-align: middle;
    font-size: 11px;
}


/*eLibrary*/
.contentIssuer h6 {font-size: 0.875rem;color: #144066;}
.contentIssuer p {font-size: 0.875rem;line-height:12px }
.ContentTargeted{margin-left:-4px;}
.ContentTargeted ul li {padding: 0 4px;border-right: 2px solid var(--color-Tertiary);color: var(--color-Tertiary);line-height: 14px;}
.ContentTargeted ul li:last-child {border-right: 0px;}

/*readspeaker button height; compact version; rtl support*/
.readSpeakerContainer{ width:100%; display:flex; height:28px; padding-top:0.3rem}
.rsbtn { width: 100% !important; z-index:1 }
.rsbtn.mega_toggle .rsbtn_tooltoggle { height: 28px !important;}
.rsbtn .rsbtn_toolpanel.vertical{ top:0 !important}
.rsbtn.rs_rtl.mega_toggle .rsbtn_play .rsbtn_left { margin-left: 0 !important; margin-right: auto !important }
.rs_addtools.mega_toggle .rsbtn_left, .rsbtn.mega_toggle .rsbtn_left{ margin-right:1.2rem !important}
.rsbtn.rs_rtl .rsbtn_play .rsbtn_left .rsbtn_text::before, .rsbtn.rsbtn.rs_rtl .rsbtn_play .rsbtn_left .rsbtn_text::before, .rsbtn.rs_rtl .rsbtn_play .rsbtn_left .rsbtn_text::after, .rsbtn.rsbtn.rs_rtl .rsbtn_play .rsbtn_left .rsbtn_text::after { transform: rotate(180deg); }
button.rsbtn_tool.first-child .rs-rtl-flipper {padding-right: 31px; }
button.rsbtn_tool.first-child .rs-rtl-flipper .rsicn.rsicn-settings{display:none !important}

.rs_addtools .rsbtn_play .rsbtn_left .rsbtn_text span, .rsbtn .rsbtn_play .rsbtn_left .rsbtn_text span { display: none !important; }

.rsbtn.rs_rtl.rsexpanded .rsbtn_play .rsbtn_left .rsbtn_text { display: none !important; }

.rsbtn.rs_rtl.rsexpanded .rsbtn_exp .rsbtn_exp_inner .rsbtn_dl,
.rsbtn.rs_rtl.rsexpanded .rsbtn_exp .rsbtn_exp_inner .rsbtn_rewind,
.rsbtn.rs_rtl.rsexpanded .rsbtn_exp .rsbtn_exp_inner .rsbtn_forward,
.rsbtn.rs_rtl.rsexpanded .rsbtn_exp .rsbtn_exp_inner .rsbtn_speed { display: none !important; }

.rsbtn.rs_rtl.mega_toggle .rsbtn_play .rsbtn_left { margin-left: 4.5em !important; }

.rsbtn.rs_rtl.rsexpanded.mega_toggle .rsbtn_left { margin-left: 1.37em !important; }

/*mobile*/
.rsbtn.rs_rtl.rsbtn.rs_mobile .rsbtn_play .rsbtn_left { margin-right: 0; margin-left: 0 !important; width: 25px; padding: 0 !important }
.rsbtn.rs_mobile .rsbtn_play .rsbtn_left { margin-right: 0; margin-left: 10px !important; width: 25px; padding: 0 !important }
.rsbtn.rs_mobile .rsbtn_play .rsbtn_right { margin: 0 10px 0 3px !important; }
.rsbtn.rs_rtl.rs_mobile .rsbtn_play .rsbtn_right { margin: 0 10px 0 7px !important; }

/* Moh Branding */
.card-branding-border .card .card-text { color: #5f5e5e }
.card-branding-border .card a.card-link{color:#144066;font-weight:600;border-bottom:2px solid #144066;font-size:1.2rem;}
.card-branding-border .card a.card-link:hover{border-bottom:none}


/*Resource sharing modal*/
#shareModal .modal-content {   border-radius: 10px;}
#shareModal .modal-header {    border-bottom: none;}
#shareModal .btn-icon {    background: none;    border: none;    padding: 0;    font-size: 2rem;    margin-right: 25px;}
    #shareModal .btn-icon:hover {        transform: scale(1.1);    }
#shareModal .whatsapp-icon {    color: #25D366;}
#shareModal .messenger-icon {    color: #0084FF;}
#shareModal .telegram-icon {    color: #0088cc;}
#shareModal .facebook-icon {    color: #1877F2;}
#shareModal .form-control {    border-radius: 20px;}
#shareModal .btn-outline-primary {    border-radius: 20px;    font-weight: bold;}

/*Global search*/
.search-container { max-width: 800px; margin: 0 auto; }
.search-title { font-size: 2.5rem; color: #144066; text-align: center; }
.search-form { margin-bottom: 2rem; }
.search-input-wrapper { display: flex; background-color: #ffffff; border-radius: 50px; overflow: hidden; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); }
.search-input { flex-grow: 1; padding: 1rem 1.5rem; font-size: 1.1rem; border: none; outline: none; }
.search-button { background-color: #2884C6; color: white; border: none; padding: 1rem 1.5rem; cursor: pointer; transition: background-color 0.3s ease; }
.search-button:hover { background-color: #144066; }
.results-title { font-size: 1.8rem; color: #144066; }
.results-count { font-size: 1rem; color: #7cb6bc; }
.results-list { display: grid; gap: 1rem; }
.result-item { background-color: white; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; }
.result-item:hover { transform: translateY(-2px); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15); }
.result-link { display: block; padding: 1rem; text-decoration: none; color: inherit; }
.result-type { display: inline-block; font-size: 0.8rem; color: #7cb6bc; margin-bottom: 0.25rem; }
.result-title-row { display: flex; justify-content: space-between; align-items: baseline; }
.result-title { font-size: 1rem; color: #2884C6; margin: 0; flex-grow: 1; }
.result-date { font-size: 0.8rem; color: #666; white-space: nowrap; margin-left: 1rem; }
.no-results { text-align: center; padding: 2rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }
.no-results-icon { font-size: 3rem; color: #6c757d; margin-bottom: 1rem; }
.no-results-title { font-size: 1.5rem; color: #343a40; margin-bottom: 1rem; }
.no-results-message { font-size: 1rem; color: #6c757d; margin-bottom: 1.5rem; }
.no-results-tips { text-align: left; max-width: 400px; margin: 0 auto; padding-left: 0; list-style-type: none; }
.no-results-tips li { color: #495057; margin-bottom: 0.5rem; }
.no-results-tips li i { color: #28a745; margin-right: 0.5rem; }
.no-search-message { text-align: center; font-size: 1.2rem; color: #144066; }
.pagination-container { display: flex; justify-content: center; }
/* RTL Styles */
[dir="rtl"] .search-input { border-radius: 0 50px 50px 0; }
[dir="rtl"] .search-button { border-radius: 50px 0 0 50px; }
[dir="rtl"] .result-date { margin-left: 0; margin-right: 1rem; }
[dir="rtl"] .no-results-tips { text-align: right; }
[dir="rtl"] .no-results-tips li i { margin-right: 0; margin-left: 0.5rem; }

/* Search pharmacy */
.searsh-dashed-border {
    border: 1px dashed #88cad2;
    padding: 1.3rem  0;
    border-radius: 10px;
}

/*
.table {
    border: 1px solid var(--bs-border-color);
    border-radius: 4px;
    border-spacing: 0;
    empty-cells: show;
    white-space: nowrap;
    width: 100%;
    word-break: keep-all;
}*/

.required:after {
    font-family: 'bootstrap-icons';
    font-weight: normal;
    font-size: 7px;
    content: "\F151";
    color: #c62626;
    margin: 0 0.2rem;
}
    /* Pharmacies On Duty */

    /* View toggle buttons */
    .view-toggle {
    display: inline-flex;
    background-color: #f0f0f0;
    border-radius: 30px;
    padding: 3px;
}

.view-toggle .btn {
    border: none;
    background-color: transparent;
    color: #666;
    padding: 8px 16px;
    border-radius: 25px;
    transition: all 0.3s ease;
}

.view-toggle .btn.active {
    background-color: var(--color-blue-dark);
    color: white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Card view styles */
#pharmacyCards .card {
    border: none;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
    overflow: hidden;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
}

    #pharmacyCards .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    }

#pharmacyCards .card-body {
    padding: 1.5rem;
}

#pharmacyCards .card-title {
    color: var(--color-Primary);
    font-size: 1.125rem;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
}
#pharmacyCards a.card-link {
    color: #1b6193;
}
#pharmacyCards .card-title i {
    margin-right: 0.5rem;
    font-size: 1.5rem;
    color: var(--color-Primary);
    /*font-size: 1rem;
    height: 40px;
    width: 40px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-Primary);
    color: #ffffff;
    border-radius: 50%;*/
}

#pharmacyCards .card-subtitle {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 1rem;
    font-family:Doran;
}

#pharmacyCards .card-text {
    color: #333;
    margin-bottom: 1rem;
}

#pharmacyCards .info-item {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
}

    #pharmacyCards .info-item i {
        margin-right: 0.5rem;
      /*  color: var(--color-Tertiary);*/
        font-size: 0.95rem;
        height: 30px;
        width: 30px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--color-Tertiary);
        color: #ffffff;
        border-radius: 50%;
    }

#pharmacyCards .card-footer {
    background-color: rgba(0, 0, 0, 0.035);
    border-top: 1px solid rgba(0, 0, 0, 0.125);
    padding: 0.8rem 1.5rem;
    display:flex;
    justify-content:center;
}

#pharmacyCards .btn-primary {
    background-color: var(--color-Primary);
    border: none;
    border-radius: 25px;
    padding: 0.5rem 1rem;
    transition: background-color 0.3s, transform 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

    #pharmacyCards .btn-primary:hover {
        background-color: var(--color-Secondary);
        transform: translateY(-2px);
    }

    #pharmacyCards .btn-primary i {
        margin-right: 0.5rem;
    }
.indent-start25 {
    margin-inline-start: 40px;
}

/* sharebar Container */
.share-icons a { display: flex;align-items: center;justify-content: center;border-radius: 50%;transition: all 0.3s ease-in-out;height: 40px;width: 40px;font-size: 16px;line-height:16px;text-decoration: none;margin:0 2px;border: 1px solid transparent;}
.share-icons a:hover {color: #fff!important;border-color: transparent!important;}
.share-icons a:nth-child(1) {color: #1877F2;border-color: #b7d4fb;}
.share-icons a:nth-child(2) {color: #000;border-color: #b1b1b1;}
.share-icons a:nth-child(3) {color: #1FB381;border-color: #bef4d2; }
.share-icons a:nth-child(4) {color: #0088cc;border-color: #b3e6ff;}
.share-icons a:nth-child(5) {color: #7d2ae8;border-color: #e1cdf9;}
.share-icons a:nth-child(6) {color: #144066;border-color: #cbd4dd;}
.share-icons a:nth-child(1):hover {background: #1877F2;}
.share-icons a:nth-child(2):hover {background: #000000;}
.share-icons a:nth-child(3):hover {background: #1FB381;}
.share-icons a:nth-child(4):hover {background: #0088cc;}
.share-icons a:nth-child(5):hover {background: #7d2ae8;}
.share-icons a:nth-child(6):hover {background: #144066;}
.share-icons a:hover i {transform: scale(1.1);}
.share-icons a i {transition: transform 0.3s ease-in-out;}
.icon-close i {display: flex;align-items: center;justify-content: center;border-radius: 50%;color: #878787;font-size: 17px;background: #f3f3f3;height: 35px;width: 35px;cursor: pointer;}

/* document details */
.view-card-details .badge{font-size:14px;}

/*_cardList*/

#mediaModal .modal-content {
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

#mediaModal .modal-header {
    border-bottom: none;
    padding: 1.2rem 2rem;
}

#mediaModal .modal-title {
    font-weight: 600;
    color: #333;
}

#mediaPlayer {
    border-radius: 10px;
    overflow: hidden;
}
#audioPlayer {
    display: flex;
    justify-content: center;
    align-items: center;
   /* height: 25vh;*/
}
#mediaTitle {
    font-size: 1.5rem;
    font-weight: 600;
    color: #333;
}

#mediaDescription {
    font-size: 0.9rem;
    line-height: 1.6;
}

#mediaMetadata p {
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

#mediaMetadata strong {
    color: #555;
}

#mediaActions .btn {
    border-radius: 20px;
    padding: 0.3rem 1rem;
    font-weight: 500;
    transition: all 0.3s ease;
}
#loadingSpinner {
    /*position: absolute;
    top: 50%;
    left: 25%;
    transform: translate(-50%, -50%);*/
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    color: #50afe4;
}
/*#mediaActions .btn-primary {
    background-color: #007bff;
    border-color: #007bff;
}

    #mediaActions .btn-primary:hover {
        background-color: #0056b3;
        border-color: #0056b3;
    }
*/
#mediaActions .btn-outline-secondary {
    color: #6c757d;
    border-color: #6c757d;
}

    #mediaActions .btn-outline-secondary:hover {
        color: #fff;
        background-color: #6c757d;
        border-color: #6c757d;
    }



.plyr--video {
    border-radius: 10px;
    overflow: hidden;
}

.media-icon-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 0.25rem;
    z-index: 1;
    cursor:pointer;
}

    .media-icon-overlay i {
        color: white;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    }


.ribbon {position: absolute;right: -5px;top: -5px;z-index: 1;overflow: hidden;width: 75px;height: 75px;text-align: right }
.eserviceCard .ribbon-text {width: 89%}
.ribbon span {font-size: 12px;font-weight: 600;color: #fff;text-transform: uppercase;text-align: center;line-height: 20px;transform: rotate(45deg);-webkit-transform: rotate(45deg);width: 100px;display: block;background: #28a745;box-shadow: 0 3px 10px -5px rgba(0,0,0,1);position: absolute;top: 19px;right: -21px }
.ribbon span::before {content: "";position: absolute;left: 0;top: 100%;z-index: -1;border-left: 3px solid #28a745;border-right: 3px solid transparent;border-bottom: 3px solid transparent;border-top: 3px solid #28a745 }
.ribbon span::after {content: "";position: absolute;right: 0;top: 100%;z-index: -1;border-left: 3px solid transparent;border-right: 3px solid #28a745;border-bottom: 3px solid transparent;border-top: 3px solid #28a745 }