.add-note:hover, .list-group-item-action:hover, .login-icon:hover {
  cursor: pointer
}

.w3-flat-turquoise {
  color: #fff;
  background-color: #1abc9c
}

.w3-flat-emerald {
  color: #fff;
  background-color: #2ecc71
}

.w3-flat-peter-river {
  color: #fff;
  background-color: #3498db
}

.w3-flat-amethyst {
  color: #fff;
  background-color: #9b59b6
}

.w3-flat-wet-asphalt {
  color: #fff;
  background-color: #34495e
}

.w3-flat-green-sea {
  color: #fff;
  background-color: #16a085
}

.w3-flat-nephritis {
  color: #fff;
  background-color: #27ae60
}

.w3-flat-belize-hole {
  color: #fff;
  background-color: #2980b9
}

.w3-flat-wisteria {
  color: #fff;
  background-color: #8e44ad
}

.w3-flat-midnight-blue {
  color: #fff;
  background-color: #2c3e50
}

.w3-flat-sun-flower {
  color: #fff;
  background-color: #f1c40f
}

.w3-flat-carrot {
  color: #fff;
  background-color: #e67e22
}

.w3-flat-alizarin {
  color: #fff;
  background-color: #e74c3c
}

.w3-flat-clouds {
  color: #000;
  background-color: #ecf0f1
}

.w3-flat-concrete {
  color: #fff;
  background-color: #95a5a6
}

.w3-flat-orange {
  color: #fff;
  background-color: #f39c12
}

.w3-flat-pumpkin {
  color: #fff;
  background-color: #d35400
}

.w3-flat-pomegranate {
  color: #fff;
  background-color: #c0392b
}

.w3-flat-silver {
  color: #000;
  background-color: #bdc3c7
}

.w3-flat-asbestos {
  color: #fff;
  background-color: #7f8c8d
}

main {
  margin-top: 80px
}

.bg-masjid {
  background-image: url(../../assets/img/contents/masjid.jpg);
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat
}

.footer-basic {
  padding: 20px 0;
  background-color: #fff;
  color: #4b4c4d
}

.footer-basic ul {
  padding: 0;
  list-style: none;
  text-align: center;
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 0
}

.footer-basic li {
  padding: 0 10px
}

.footer-basic ul a {
  color: inherit;
  text-decoration: none;
  opacity: .8
}

.footer-basic ul a:hover {
  opacity: 1
}

.footer-basic .social {
  text-align: center;
  padding-bottom: 25px
}

.footer-basic .social > a {
  font-size: 24px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  display: inline-block;
  text-align: center;
  border-radius: 50%;
  border: 1px solid #ccc;
  margin: 0 8px;
  color: inherit;
  opacity: .75
}

.footer-basic .social > a:hover {
  opacity: .9
}

.footer-basic .copyright {
  margin-top: 0;
  text-align: center;
  font-size: 13px;
  color: #aaa;
  margin-bottom: 0
}

.features-desc {
  padding: 15px 0;
  margin-top: auto !important;
  margin-bottom: auto !important
}

.login-clean {
  background: #f1f7fc;
  padding: 80px 0;
  width: 100%;
  height: 100vh
}

.login-clean form {
  max-width: 320px;
  width: 90%;
  margin: auto;
  background-color: #fff;
  padding-top: 40px;
  padding-left: 40px;
  padding-right: 40px;
  padding-bottom: 10px;
  border-radius: 4px;
  color: #505e6c;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, .1)
}

.login-clean .illustration {
  text-align: center;
  padding: 0 0 20px;
  font-size: 100px;
  color: #f4476b
}

.login-clean form .form-control {
  background: #f7f9fc;
  border: none;
  border-bottom: 1px solid #dfe7f1;
  border-radius: 0;
  box-shadow: none;
  outline: 0;
  color: inherit;
  text-indent: 8px;
  height: 42px
}

.login-clean form .btn-primary {
  background: #3c85cd;
  border: none;
  border-radius: 4px;
  padding: 11px;
  box-shadow: none;
  margin-top: 26px;
  text-shadow: none;
  outline: 0 !important
}

.login-clean form .btn-primary:active, .login-clean form .btn-primary:hover {
  background: #008751
}

.login-clean form .btn-primary:active {
  transform: translateY(1px)
}

.login-clean form .forgot {
  display: block;
  text-align: center;
  font-size: 12px;
  color: #6f7a85;
  opacity: .9;
  text-decoration: none
}

.login-clean form .forgot:active, .login-clean form .forgot:hover {
  opacity: 1;
  text-decoration: none
}

body {
  font-family: Roboto, sans-serif
}

section {
  background-color: #fff;
  text-align: center;
  padding: 30px 0
}

section .top {
  width: 100%;
  text-align: center;
  height: 100vh
}

.navbar-light .navbar-brand {
  font-size: 24px;
  font-weight: 700;
  color: #fff
}

.home_header {
  width: 100%;
  height: 100vh;
  color: #fff
}

.nav_icon {
  width: 48px;
  margin-right: 15px
}

.collections-icon {
  width: 60px;
  height: 60px
}

@media (min-width: 768px) {
  .collections-icon {
    width: 80px;
    height: 80px
  }
}

.navbar-nav .nav-link {
  padding-right: 50px;
  padding-left: 15px
}

.code_block {
  padding: 20px;
  text-align: center !important
}

.google-play {
  width: 200px;
  margin: auto
}

@media (min-width: 768px) {
  .google-play {
    width: 300px;
    margin: auto
  }
}

.login-icon {
  width: 80px;
  font-size: 20pt;
  margin-right: 8px;
  margin-left: 8px
}

.social-login {
  text-align: center;
  display: block
}

.social.login a {
  margin: 5px;
  font-size: 24px
}

.login-with-social {
  margin-bottom: 0;
  margin-top: 16px;
  text-align: center;
  font-size: 12px;
  padding: 5px
}

.google {
  color: #f4476b
}

.facebook {
  color: #3c85cd
}

.twitter {
  color: #1485ee
}

#tips .card {
  margin-bottom: 0 !important
}

.arabic {
  font-size: 20pt;
  line-height: 36pt;
  font-weight: 500;
  text-align: right;
  font-style: normal
}

.transliteration {
  font-style: italic;
  font-weight: 500;
  letter-spacing: 1px;
  text-align: justify
}

.translation {
  letter-spacing: 1px !important;
  text-align: justify !important
}

#collections .item, .add-note, .highlight, .highlight .buttons {
  text-align: center
}

.list-inline {
  margin-bottom: 0
}

.fixed-top {
  z-index: 499 !important
}

#side-menu .actions .login {
  margin-right: 1rem;
  text-decoration: none;
  color: #465765
}

.instagram {
  color: #a3057f
}

.carousel-img {
  height: 100vh
}

.features-boxed p {
  color: #7d8285
}

.features-boxed h2 {
  font-weight: 700;
  margin-bottom: 40px;
  padding-top: 40px;
  color: inherit
}

@media (max-width: 767px) {
  .features-boxed h2 {
    margin-bottom: 25px;
    padding-top: 25px;
    font-size: 24px
  }
}

.features-boxed .intro {
  font-size: 16px;
  max-width: 500px;
  margin: 0 auto
}

.features-boxed .intro p {
  margin-bottom: 0
}

.features-boxed .item .box {
  padding: 5px;
  background-color: #fff;
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 10px;
  right: 10px
}

.features-boxed .item .icon {
  font-size: 60px;
  color: #1485ee;
  margin-top: 20px;
  margin-bottom: 35px
}

.features-boxed .item .name {
  font-weight: 700;
  font-size: 10pt;
  margin-bottom: 8px;
  margin-top: 8px;
  color: inherit
}

@media (min-width: 768px) {
  .features-boxed .item .name {
    font-weight: 700;
    font-size: 12pt;
    margin-bottom: 8px;
    margin-top: 15px;
    color: inherit
  }
}

.features-boxed .item .description {
  font-size: 15px;
  margin-top: 15px;
  margin-bottom: 20px
}

.dummy {
  margin-top: 100%
}

.collection-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%
}

.header {
  position: relative
}

.bg-grey {
  background-color: #eef4f7 !important
}

.features-item {
  padding: 30px 0
}

.carousel-hack {
  height: 800px !important;
  max-height: calc(100vh - 80px) !important
}

.carousel-indicators li {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin: 0 10px;
  text-indent: -999px;
  background-color: rgba(60, 133, 205, .44)
}

.carousel-caption {
  left: 50% !important;
  top: 50% !important;
  right: 0 !important;
  bottom: 0 !important;
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  padding: 50px 30px !important;
  background-color: rgba(0, 0, 0, .2);
  border-radius: 5px
}

.carousel-indicators .active {
  background-color: #3c85cd !important
}

.highlight {
  color: #313437;
  padding: 50px 0 55px;
  overflow: hidden
}

.highlight h2, .highlight p {
  color: inherit
}

@media (max-width: 767px) {
  .highlight {
    max-width: 70% !important
  }
}

.highlight h2 {
  font-weight: 700;
  margin-bottom: 35px;
  line-height: 1.5;
  padding-top: 0;
  margin-top: 0
}

.highlight .intro {
  font-size: 18px;
  max-width: 500px;
  line-height: 1.5;
  margin: 0 auto 25px
}

@media (max-width: 767px) {
  .highlight .intro {
    max-width: none;
    margin: 0 auto 25px
  }
}

.highlight .intro p {
  margin-bottom: 35px
}

.highlight .btn {
  padding: 16px 32px;
  border: none;
  background: 0 0;
  box-shadow: none;
  text-shadow: none;
  opacity: .9;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .4px;
  line-height: 1
}

.highlight .btn:hover {
  opacity: 1
}

.highlight .btn:active {
  transform: translateY(1px)
}

.highlight .btn-primary {
  background-color: #055ada;
  color: #fff
}

.highlight .phone-mockup {
  position: relative;
  max-width: 260px;
  margin-top: -30px;
  margin-bottom: -230px;
  transform: rotate(-15deg)
}

.highlight .phone-mockup img.device {
  width: 100%;
  height: auto
}

.highlight .phone-mockup .screen {
  position: absolute;
  width: 88%;
  height: 77%;
  top: 12%;
  border-radius: 2px;
  left: 6%;
  border: 1px solid #444;
  background-color: #aaa;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-image: url(../../assets/img/contents/screen-content.png)
}

.highlight .phone-mockup .screen:before {
  content: '';
  background-color: #fff;
  position: absolute;
  width: 70%;
  height: 140%;
  top: -12%;
  right: -60%;
  transform: rotate(-19deg);
  opacity: .2;
  background-image: url(../../assets/img/contents/screen-content-iphone-6.jpg)
}

.google-play.button {
  width: 200px !important
}

.carousel-control-prev-icon {
  background-image: url(../../assets/img/controls/navigate_left.svg);
  background-size: 48px 48px
}

.carousel-control-next-icon {
  background-image: url(../../assets/img/controls/navigate_right.svg);
  background-size: 48px 48px
}

.user-icon {
  width: 24px;
  height: 24px;
  background-image: url(../../assets/img/55ebed741558ea8005d8d6db_5673bb6dbce9dac40dfb24f5_320.jpg);
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat
}

.btn.add-note {
  margin: 10px
}

.card-body.w3-display-container {
  min-height: 65px
}

.list-note {
  margin-top: 0;
  margin-bottom: .5rem
}

#collections .item .card:hover {
  cursor: pointer;
  background-color: rgba(220, 220, 220, .74)
}

.content.card {
  margin: 15px 0
}

#accordion-1 .card {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important
}

#accordion-1 .card:first-child {
  border-radius: .25rem .25rem 0 0 !important
}

#accordion-1 .card:last-child {
  border-radius: 0 0 .25rem .25rem !important
}

#accordion-1 .card:only-child {
  border-radius: .25rem !important
}

.add-note {
  float: right;
  padding: 4px;
  font-size: 12pt
}

.add-note:hover {
  background-color: #2ecc71;
  border-radius: 50%;
  color: #fff
}

.dua-list {
  margina: .5rem 0;
}

@media (min-width: 768px) {
  .container.dua-list {
    padding-top: 48px;
    padding-bottom: 48px;
  }
}

medium, .medium {
  font-size:90%;
  font-weight:400;
}

select.form-control-sm:not([size]):not([multiple]), .input-group-sm > select.form-control:not([size]):not([multiple]), .input-group-sm > .input-group-prepend > select.input-group-text:not([size]):not([multiple]), .input-group-sm > .input-group-append > select.input-group-text:not([size]):not([multiple]), .input-group-sm > .input-group-prepend > select.btn:not([size]):not([multiple]), .input-group-sm > .input-group-append > select.btn:not([size]):not([multiple]) {
  padding-right:15px !important;
}

.pointer:hover {
  cursor: pointer;
  font-weight: bolder;
}