@import url(//fonts.googleapis.com/earlyaccess/notokufiarabic.css);

body {
    font-family: "Noto Kufi Arabic", -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
        "Noto Color Emoji";
}
.notification {
    margin: auto;
}
.notification-dropdown {
    min-width: 320px;
}
.notification-dropdown,
.connection-dropdown,
.nav-user-dropdown {
    padding: 0px;
    margin: 0px;
}
.notification-title {
    font-size: 14px;
    color: #3d405c;
    text-align: center;
    padding: 8px 0px;
    border-bottom: 1px solid #e3e3e3;
    line-height: 1.5;
    background-color: #fffffe;
}
.notification-list {
}
.notification-list .list-group-item {
    border-radius: 0px;
    padding: 12px;
    /* margin-top: -1px; */
    border-left: transparent;
    border-right: transparent;
    border-bottom: 1px solid #d8d8d8;
}
.notification-list .list-group-item.active {
    z-index: 2;
    color: #3d405c;
    background-color: #f7f7fb;
    border-color: #e1e1e7;
}
.notification-list .list-group-item-action:focus,
.list-group-item-action:hover {
    color: #404040;
    text-decoration: none;
    background-color: #f7f7fb;
}
.notification-list .list-group-item:last-child {
}
.notification-info {
}
.notification-info .notification-date {
    display: block;
    font-size: 11px;
    margin-top: 4px;
    text-transform: uppercase;
    color: #71748d;
}
.notification .dropdown-toggle::after,
.connection .dropdown-toggle::after,
.nav-user .dropdown-toggle::after {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 0.255em;
    vertical-align: 0.255em;
    content: "";
    border: none;
}
.notification-list-user-img {
    float: left;
}

.notification-list-user-block {
    /* padding-right: 50px; */
    font-size: 14px;
    line-height: 21px;
}
.notification-list-user-name {
    color: #5969ff;
    font-size: 14px;
    margin-left: 8px;
}
.nav-user {
}
.nav-user-dropdown {
    padding: 0px;
    min-width: 230px;
    margin: 0px;
}
.nav-user-name {
}
.nav-user-info {
    background-color: #1e4d89;
    line-height: 1.4;
    padding: 12px;
    color: #fff;
    font-size: 13px;
    border-radius: 2px 2px 0 0;
}
.nav-user-info .status {
    float: left;
    top: 7px;
    left: 0px;
}
.nav-user-dropdown {
}
.nav-user-dropdown .dropdown-item {
    display: block;
    width: 100%;
    padding: 12px 22px 15px;
    clear: both;
    font-weight: 400;
    color: #686972;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    font-size: 13px;
    line-height: 0.4;
}
.list-footer,
.conntection-footer {
    font-size: 14px;
    color: #fff;
    text-align: center;
    padding: 10px 0px;
    line-height: 1.5;
    font-weight: 700;
    background-color: #1e4d89;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}
.list-footer a,
.conntection-footer a {
    color: #fff;
}
.list-footer a:hover,
.conntection-footer a:hover {
    color: #fff;
}
.indicator {
    content: "";
    position: absolute;
    top: 7px;
    left: 19px;
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 100%;
    background-color: #ef172c;
    animation: 0.9s infinite beatHeart;
    transform-origin: center;
}

@keyframes beatHeart {
    0% {
        transform: scale(0.9);
    }
    25% {
        transform: scale(1.1);
    }
    40% {
        transform: scale(0.9);
    }
    60% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(0.9);
    }
}

/* mobile bottom navbar */
.mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    will-change: transform;
    transform: translateZ(0);
    display: flex;
    height: 70px;
    box-shadow: 0 -2px 5px -2px #333;
    background-color: #fff;
}
.mobile-bottom-nav__item {
    flex-grow: 1;
    text-align: center;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.mobile-bottom-nav__item a {
    color: #36bab7;
}
.mobile-bottom-nav__item--active {
    color: #1d4c85;
}
.mobile-bottom-nav__item-content {
    display: flex;
    flex-direction: column;
}
.mobile-bottom-nav__item-content i {
    font-size: 1.8rem;
}
@media (min-width: 769px) {
    .mobile-bottom-nav {
        display: none;
    }
}

/* foote */
@media (min-width: 320px) and (max-width: 480px) {
    .footer {
        padding-bottom: 70px;
    }
}

/* user home page */
.jumbotron {
    padding-top: 3rem;
    padding-bottom: 3rem;
    margin-bottom: 0;
    background-color: #eaeaea;
}
@media (min-width: 768px) {
    .jumbotron {
        padding-top: 6rem;
        padding-bottom: 6rem;
    }
}
.jumbotron p:last-child {
    margin-bottom: 0;
}
.jumbotron h1 {
    font-weight: 300;
}
.jumbotron .container {
    max-width: 40rem;
}

/* Featurettes */
.featurette-divider {
    margin: 5rem 0;
}
.featurette-heading {
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.05rem;
}

/* user news page */
.card-horizontal {
    display: flex;
    flex: 1 1 auto;
}
.card-horizontal h5 {
    line-height: 30px;
}
@media (min-width: 320px) and (max-width: 480px) {
    .card-horizontal {
        display: block;
    }
    .card-horizontal img {
        width: 100%;
    }
}
@media (min-width: 480px) and (max-width: 768px) {
    #news-card .card-title {
        font-size: 17px;
    }
    #news-card .card-excerpt {
        font-size: 12px;
    }
}

/* login page */
/* fix mobile input */
.iti {
    width: 100%;
    direction: ltr;
}

/* report home page */
#report-list .report-username {
    font-size: 1rem;
    color: #009688;
}

/* report create page */
/* fetch mobile number */
#mobile_number_list {
    position: absolute;
}

.select2-container--bootstrap4
    .select2-selection--single
    .select2-selection__arrow {
    left: 3px;
    right: auto !important;
}

/* report show page */
.lable-title {
    width: 20%;
    /* text-align: left; */
}
@media (min-width: 320px) and (max-width: 480px) {
    .lable-title {
        font-size: 0.8rem;
    }
}

/* news page */
#news-card a {
    text-decoration: none;
}

/* contact us */
.dbox {
    width: 100%;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 25px;
}

.dbox:last-child {
    margin-bottom: 0;
}

.dbox p {
    margin-bottom: 0;
}

.dbox p span {
    font-weight: 600;
    color: #37bab8;
}

.dbox a {
    color: #37bab8;
}

.dbox .icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #37bab8;
}

.dbox .icon span {
    font-size: 20px;
    color: #fff;
}

.dbox .text {
    width: calc(100% - 50px);
    color: #37bab8;
}

/* stars - report rating  */
#rating_wrapper .rating-col:hover {
    background: #eee;
}
.stars {
	width: fit-content;
	margin: 0 auto;
	cursor: pointer;
}
.star {
	color: #e3bf00 !important;
}
.rate {
	height: 50px;
	margin-left: -5px;
	padding: 5px;
	font-size: 25px;
	position: relative;
	cursor: pointer;
}
.rate input[type="radio"] {
	opacity: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,0%);
	pointer-events: none;
}
.star-over::after {
	font-family: 'Font Awesome 5 Free';
    font-weight: 900;
	font-size: 20px;
	content: "\f005";
	display: inline-block;
	color: #e2bc00;
	z-index: 1;
	position: absolute;
	top: 12px;
	left: 8px;
}

.rate:nth-child(1) .face::after {
	content: "\f119"; /* ☹ */
}
.rate:nth-child(2) .face::after {
	content: "\f11a"; /* 😐 */
}
.rate:nth-child(3) .face::after {
	content: "\f118"; /* 🙂 */
}
.rate:nth-child(4) .face::after {
	content: "\f580"; /* 😊 */
}
.rate:nth-child(5) .face::after {
	content: "\f59a"; /* 😄 */
}
.face {
	opacity: 0;
	position: absolute;
	width: 35px;
	height: 35px;
	background: #36bab3;
	border-radius: 5px;
	top: -50px;
	left: 2px;
	transition: 0.2s;
	pointer-events: none;
}
.face::before {
	font-family: 'Font Awesome 5 Free';
  font-weight: 900;
	content: "\f0dd";
	display: inline-block;
	color: #36bab3;
	z-index: 1;
	position: absolute;
	left: 9px;
	bottom: -15px;
}
.face::after {
	font-family: 'Font Awesome 5 Free';
  font-weight: 900;
	display: inline-block;
	color: #fff;
	z-index: 1;
	position: absolute;
	left: 5px;
	top: -1px;
}

.rate:hover .face {
	opacity: 1;
}