html {
  font-size: 14px;
}
@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

@font-face {
    font-family: KFGQPC Uthmanic Script HAFS Regular;
    src: url("../assets/fonts/KFGQPC Uthmanic Script HAFS Regular.otf");
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
    border-width: 5px;
}

html {
  position: relative;
  min-height: 100%;
}

.lessons {
    text-align: center; 
    font-family: KFGQPC Uthmanic Script HAFS Regular;
    padding: 0px 0px 0px 0px;
    border: solid;
    border-width: 4px;
    border-color: transparent;
    background-color: inherit;
}

.lessons .btn {
    height: 100%;
    width: 100%;
    font-size: 3.5em;
    padding: 5px 0px 5px 0px;
    border: none;
    background-color: inherit;
    display: inline-block;
    border-radius: 0px;
}

.lessontopic {
    text-align: center;
    font-family: KFGQPC Uthmanic Script HAFS Regular;
    font-size: 3.5em;
}

.danger {
    color: red;
}

.danger:hover {
    color: red;
}

.lessons:hover {
    border-color: red;
}

.card .row {
    border-bottom: solid;
    border-width: 1px;
    border-color: lightgray;
}

.card .card-title{
    background-color:steelblue;
    height:70px;
    padding:2px 5px 2px 5px;
    text-align:center;
    color:snow
}

.pager {
    padding-left: 0;
    margin: 15px 0;
    text-align: center;
    list-style: none;
}

.pager:before,
.pager:after {
    display: table;
    content: " ";
}

.pager:after {
    clear: both;
}

.pager:before,
.pager:after {
    display: table;
    content: " ";
}

.pager:after {
    clear: both;
}

.pager li {
    display: inline;
}

.pager li > a,
.pager li > span {
    display: inline-block;
    padding: 5px 14px;
    background-color: #ffffff;
    border: 1px solid #dddddd;
    border-radius: 15px;
}

.pager li > a:hover,
.pager li > a:focus {
    text-decoration: none;
    background-color: #eeeeee;
}

.pager .next > a,
.pager .next > span {
    float: right;
}

.pager .previous > a,
.pager .previous > span {
    float: left;
}

.pager .disabled > a,
.pager .disabled > a:hover,
.pager .disabled > a:focus,
.pager .disabled > span {
    color: #999999;
    cursor: not-allowed;
    background-color: #ffffff;
}


.rules {
    text-align: left;
    font-family: Arial;
    font-size: 20px;
    padding: 10px 20px 10px 20px;
    background-color: inherit;
}

.rules .arabic {
    font-family: 'Traditional Arabic';
    font-size:35px;
    color: red;
}

.rules .quran {
    font-family: KFGQPC Uthmanic Script HAFS Regular;
    font-size:  1.5em;
}

.rules .quran .danger{
    color: red;
}
.rules h1 {
    padding:10px 10px 10px 10px;
    font-size: 25px;
    font-weight: bold;
    background-color:  moccasin;
}
.rules h2 {
    margin-top:20px;
    font-size: 20px;
    font-style: italic;
}

.swal2-html-container {
    font-size:1.4em;
}

th {
    background-color: black !important;
    color: white !important;
}