/** Color palette **/
:root {
  --yellow-dark: #f57f17;
  --yellow-light: #fff9c4;
  --madrasa-dark: #243a51;
  --madrasa-light: #4673a2;
  --al7an: #7e4296;
  --taqs: #6d4c41;
  --coptic: #880e4f;
  --tari5: #636e72;
  --wa3za: #c0392b;
  --kotob: #1b5e20;
  --cartoon-light: #fbf1dd;
  --cartoon-dark: #e4a11b;
}

/** Background **/
body {
  background-image: url("https://assets.madraset-elshamamsa.com/images/sky-background.webp");
  background-attachment: fixed;
  background-size: cover;
  font-weight: normal;
}

.accordion-button:not(.collapsed) {
  color: #105cd9;
  background-color: #e7f0fe;
}

/** Sizes and alignment **/
.container {
  max-width: 1100px;
}

.text-readable {
  max-width: 800px;
}

/** Navigation Colors **/
#primary-nav .nav-link:focus,
#primary-nav .nav-link:hover {
  background-color: var(--madrasa-dark);
}

.btn-check:focus+.btn-dark,
.btn-dark:focus,
.btn-dark:hover {
  background-color: var(--madrasa-dark);
  border: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
strong,
.text-dark-blue {
  color: var(--madrasa-dark);
}

.nav-pills .nav-link,
.nav-tabs .nav-link {
  padding-right: 0;
  padding-left: 0;
  margin-right: 0;
  margin-left: 0;
  line-height: 1.2rem;
}

.nav-pills .nav-link:hover {
  background-color: #757575;
  color: white;
}

.nav-pills .nav-link.active,
.nav-pills .nav-link.active:hover,
.nav-pills .show>.nav-link {
  background-color: var(--madrasa-light);
  color: white;
}

.tab-content li {
  margin-bottom: 10px;
}

/** Generic Colors **/
.bg-dark-blue {
  background-color: var(--madrasa-dark);
}

.text-nav {
  color: var(--madrasa-light);
}

.bg-nav {
  background-color: var(--madrasa-light);
}

.section-bg {
  background-color: #e3f2fd;
}

.teal-text {
  color: #009688;
}

.indigo-text {
  color: #3f51b5;
}

.amber-text {
  color: #ffc107 !important;
}

.brown-text {
  color: #795548;
}

.note-success {
  background-color: #e2f0e5;
  border-color: #49a75f;
}

.note-primary {
  background-color: #dfeefd;
  border-color: #176ac4;
}

.text-large {
  font-size: 18px;
}

@media (max-width: 991px) {
  .leadو .text-large {
    font-size: 16px;
  }
}

/** Main Titles **/
.divider-new {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-top: 2.8rem;
  margin-bottom: 2.8rem;
}

.divider-new>h1,
.divider-new h2,
.divider-new h3,
.divider-new h4,
.divider-new h5,
.divider-new h6 {
  margin-bottom: 0;
}

.divider-new:before,
.divider-new:after {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  height: 1.5px;
  height: 2px;
  content: "";
  background: #c6c6c6;
}

.divider-new:before {
  margin: 0 0.5rem 0 0;
}

.divider-new:after {
  margin: 0 0 0 0.5rem;
}

.bg-light-grey {
  background-color: #fafafa;
}

/** Breadcrumb **/
#breadcrumb {
  margin-top: 95px;
}

/** Library Colors **/
.bg-taqs {
  background-color: #cc8c33;
}

.bg-taqs-light {
  background-color: #f5e8d6;
}

.bg-al7an {
  background-color: var(--al7an);
  color: white;
}

.bg-cartoon {
  background-color: var(--cartoon-light);
  color: var(--madrasa-dark);
}

.bg-general {
  background-color: #f1c40f;
  color: white;
}

.bg-general-light {
  background-color: #ffe785;
  color: #333;
}

.bg-general-complementary {
  background-color: #5f55e3;
  color: white;
}

.bg-wa3za {
  background-color: #c0392b;
  color: white;
}

.bg-wa3za-complementary {
  background-color: #0ba354;
  color: white;
}

.text-wa3za {
  color: #c0392b;
}

.text-wa3za-complementary {
  color: #0ba354;
}

.bq-la7n {
  border-left: 3px solid #800080 !important;
}

.bq-wa3za {
  border-left: 3px solid #c0392b !important;
}

.bq-wa3za-complementary {
  border-left: 3px solid #0ba354 !important;
}

.bq-wa3za .bq-title {
  color: #c0392b !important;
}

.bq-wa3za-complementary .bq-title {
  color: #0ba354 !important;
}

/** Mola5asat **/
.bg-mola5as {
  background-color: #27ae60;
  color: white;
}

.bg-mola5as-complementary {
  background-color: #ad2f26;
  color: white;
}

.text-mola5as {
  color: #27ae60;
}

.text-mola5as-complementary {
  color: #ad2f26;
}

.bq-mola5as {
  border-left: 3px solid #27ae60 !important;
}

.bq-mola5as-complementary {
  border-left: 3px solid #ad2f26 !important;
}

.bq-mola5as .bq-title {
  color: #27ae60 !important;
}

.bq-mola5as-complementary .bq-title {
  color: #ad2f26 !important;
}

/** Tari5 **/
.bg-tari5 {
  background-color: #636e72;
  color: white;
}

.bg-tari5-complementary {
  background-color: #bfa180;
  color: white;
}

.text-tari5 {
  color: #636e72;
}

.text-tari5-complementary {
  color: #bfa180;
}

.bq-tari5 {
  border-left: 3px solid #636e72 !important;
}

.bq-tari5-complementary {
  border-left: 3px solid #bfa180 !important;
}

.bq-tari5 .bq-title {
  color: #636e72 !important;
}

.bq-tari5-complementary .bq-title {
  color: #bfa180 !important;
}

/** Coptic **/
.bg-coptic {
  background-color: #e84393;
  color: white;
}

.bg-coptic-complementary {
  background-color: #0e9c0f;
  color: white;
}

.text-coptic {
  color: #e84393;
}

.text-coptic-complementary {
  color: #0e9c0f;
}

.bq-coptic {
  border-left: 3px solid #e84393 !important;
}

.bq-coptic-complementary {
  border-left: 3px solid #0e9c0f !important;
}

.bq-coptic .bq-title {
  color: #e84393 !important;
}

.bq-coptic-complementary .bq-title {
  color: #0e9c0f !important;
}

/*** Blockquotes ***/
.blockquote {
  padding: 0.5rem 1rem;
  border-right: 0.25rem solid #eceeef;
  border-left: none;
}

.blockquote .bq-title {
  margin-bottom: 0;
  font-size: 1.5rem;
  font-weight: 400;
}

.blockquote p {
  padding: 1rem 0;
  font-size: 1.1rem;
}

.bq-primary {
  border-left: 3px solid #4285f4 !important;
}

.bq-primary .bq-title {
  color: #4285f4 !important;
}

.bq-danger {
  border-left: 3px solid #ff3547 !important;
}

.bq-danger .bq-title {
  color: #ff3547 !important;
}

.bq-warning {
  border-left: 3px solid #fb3 !important;
}

.bq-warning .bq-title {
  color: #fb3 !important;
}

.bq-success {
  border-left: 3px solid #00c851 !important;
}

.bq-success .bq-title {
  color: #00c851 !important;
}

.bq-info {
  border-left: 3px solid #33b5e5 !important;
}

.bq-info .bq-title {
  color: #33b5e5 !important;
}

/***************************************/
/* 2023 colors */
.bg-main-light {
  background-color: #01579b;
  color: white;
}

.bg-main-dark {
  background-color: var(--madrasa-dark);
  color: white;
}

.bg-la7n-light {
  background-color: #f3e5f5;
  color: black;
}

.bg-la7n-dark {
  background-color: #800080;
  color: white;
}

.text-la7n {
  color: #800080;
}

.bg-ta2amol-light {
  background-color: #f3e5f5;
  color: black;
}

.bg-ta2amol-dark {
  background-color: #800080;
  color: white;
}

.bg-taqs-light {
  background-color: #efebe9;
  color: black;
}

.bg-taqs-dark {
  background-color: #6d4c41;
  color: white;
}

.text-taqs {
  color: #6d4c41;
}

.bg-coptic-light {
  background-color: #efadce;
  color: black;
}

.bg-coptic-dark {
  background-color: #880e4f;
  color: white;
}

.bg-tari5-light {
  background-color: #eeeeee;
  color: black;
}

.bg-tari5-dark {
  background-color: #4f4f4f;
  color: white;
}

.bg-primary-light,
.bg-bible-light {
  background-color: rgb(226, 234, 247);
  color: black;
}

.bg-bible-dark {
  background-color: var(--madrasa-dark);
  color: white;
}

.bg-verse-light {
  background-color: #0dcaf0;
  color: black;
}

.bg-verse-dark {
  background-color: var(--madrasa-dark);
  color: white;
}

.bg-primary-dark {
  color: #fff;
  background-color: #506690;
}

.bg-cartoon-light {
  background-color: var(--cartoon-light);
  color: var(--madrasa-dark);
}

.bg-cartoon-dark {
  background-color: var(--cartoon-dark);
  color: white;
}

.bg-wa3za-light {
  background-color: #ffebee;
  color: black;
}

.bg-wa3za-dark {
  background-color: #b02a37;
  color: white;
}

.bg-ketab-light {
  background-color: #e8f5e9;
  color: black;
}

.bg-ketab-dark {
  background-color: #1b5e20;
  color: white;
}

.bg-ma3loma-light {
  /*background-color: #FFF3CD;
    color: black;*/
  background-color: var(--yellow-light);
  color: #111111;
}

.bg-ma3loma-dark {
  /*background-color: #ffc107;
    color: black;*/
  background-color: var(--yellow-dark);
  color: white;
}

/** Datatable **/
.datatable table td,
.datatable table th {
  white-space: normal;
}

.dataTables_filter,
.dataTables_filter label,
input[type="search"] {
  width: 100%;
  text-align: right;
  height: 50px;
  margin-bottom: 25px;
  background-color: white;
  font-size: 20px;
}