* {
  box-sizing: border-box;
}

html,
body {
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  background: #fff;
  color: #666;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeSpeed;

}

html.dark,
body.dark {
  width: 100%;
  height: 100%;
}

div.dark {
  width: 100%;
  height: 100vh;
}

h1,
.uk-h1,
h2,
.uk-h2,
h3,
.uk-h3,
h4,
.uk-h4,
h5,
.uk-h5,
h6,
.uk-h6,
.uk-heading-small,
.uk-heading-medium,
.uk-heading-large,
.uk-heading-xlarge,
.uk-heading-2xlarge,
.uk-heading-3xlarge {
  /* margin: 0 0 20px 0; */
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 300;
  color: #222;
  text-transform: none;
  text-rendering: optimizeSpeed;
}

/* gredient set */
/* rgb(14, 189, 255) */
/* rgb(45, 139, 255) */
/* rgb(83, 92, 255) */

/* border */
.border {
  border: 1px solid #e2e2e2 !important
}

.border-bottom {
  border-bottom: 1px solid #e2e2e2
}

.border-left {
  border-left: 1px solid #e2e2e2 !important
}

.border-right {
  border-right: 1px solid #e2e2e2
}

.border-top {
  border-top: 1px solid #e2e2e2
}

.border-remove {
  border: none !important
}

.border-remove-top {
  border-top: none !important
}

.border-remove-bottom {
  border-bottom: none !important
}

.border-main-color {
  border-color: #5861C7 !important
}

.border-main {
  border: 2px solid #5861C7 !important
}

.border-main-horizontal {
  border-top: 1px solid #5861C7 !important;
  border-bottom: 1px solid #5861C7 !important;
}

.border-left-main {
  border-left: 2px solid #5861C7 !important
}

.border-right-main {
  border-right: 2px solid #5861C7 !important
}

.border-top-main {
  border-top: 2px solid #5861C7 !important
}

.dashed-bottom-main {
  border-bottom: 1px dashed #5861C7 !important
}

.border-bottom-main {
  border-bottom: 2px solid #5861C7 !important
}

.border-bottom-grey {
  border-bottom: 2px solid #d2d2d2 !important
}

.border-error {
  border: 1px solid #f0506e !important
}

.border-warning {
  border: 1px solid #faa05a !important
}

.border-success {
  border: 1px solid #1CB152 !important
}

.no-border {
  border: none !important;
}

.no-padding {
  padding: none !important;
}

.no-padding-left {
  padding-left: 0 !important;
}

.no-padding-top {
  padding-top: 0 !important;
}

.no-padding-right {
  padding-right: 0 !important;
}

.no-padding-bottom {
  padding-bottom: 0 !important;
}

/* background */
.background-default-transparent {
  background-color: rgba(255, 255, 255, 0.7)
}

.background-main-transparent {
  background-color: rgba(88, 97, 199, 0.8)
}

.background-grey {
  background-color: #d2d2d2 !important;
  color: #666 !important;
}

.background-main {
  background-color: #222222 !important
}

.background-purple,
.background-purple *:not(a):not(i) {
  background-color: rgb(88, 97, 199) !important;
  color: #fff !important;
}

.background-red {
  background-color: #af0000 !important
}

.background-green {
  background-color: #1CB152 !important;
}

.background-red {
  background-color: #f0506e !important;
  color: #fff !important;
}

.background-green a {
  color: #fff !important;
}

.background-green a.active {
  color: #ECCC18 !important;
  font-weight: bold;
}

/* button */
.button-icon {
  padding: 0 8px;
}

/* border */
.dashed {
  border: 1px dashed #ddd;
}

/* .datepicker-container { z-index: 9999 !important; } */

/* color */
.color-main {
  color: #5861C7;
}

.color-success {
  color: #1CB152;
}

.color-warning {
  color: #faa05a;
}

.color-danger {
  color: #af0000;
}

/* content frame */
.content-frame {
  border-left: 250px solid transparent;
  border-top: 55px solid transparent;
  padding: 60px 40px 60px 60px;
}

/* F */
.filter-button.uk-active a {
  background-color: #5861C7;
  color: #fff;
  border: none !important;
}

.filter-button.uk-active a:hover {
  background-color: #0f7ae5;
}


/* H */
.head-frame {
  line-height: 38px;
}

.home-frame a {
  font-size: 14px !important;
  /* background-image: linear-gradient(to right, #6864AA, #A783E4 , #9161A6); */
  /* background-image: linear-gradient(to right, #6864AA , #9161A6); */
  /* background-image: linear-gradient(to right, rgb(45, 139, 255) , rgb(83, 92, 255)); */
  /* border-right: 30px solid #fff; */
  /* border-radius: 0 0 15% 0 / 0 0 60% 0; */
}

.home-custom-layout {
  /* background: #a783e4; */
  background-image: linear-gradient(140deg, #6864AA 0%, #a783e4 50%, #9161A6 75%);
  width: 100%;
  height: 90vh;
  -ms-transform: skewY(-20deg);
  -webkit-transform: skewY(-20deg);
  transform: skewY(-20deg);
  border-radius: 70px;
  position: fixed;
  top: 145px;
  left: 180px;
}

.home-shape {
  position: fixed;
  content: "";
  right: -75px;
  bottom: -100px;
  width: 400px;
  height: 295px;
  background: #D94F3E;
  border-radius: 62% 47% 82% 35% / 45% 45% 80% 66%;
  will-change: border-radius, transform, opacity;
  /* animation: shape 5s linear infinite; */
  display: block;
  border: 30px solid #fff;
}

@keyframes shape {

  0%,
  100% {
    border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
    transform: translate3d(0, 0, 0) rotateZ(0.01deg);
  }

  34% {
    border-radius: 70% 30% 46% 54% / 30% 29% 71% 70%;
    transform: translate3d(0, 5px, 0) rotateZ(0.01deg);
  }

  50% {
    transform: translate3d(0, 0, 0) rotateZ(0.01deg);
  }

  69% {
    border-radius: 100% 60% 60% 100% / 100% 100% 60% 60%;
    transform: translate3d(0, -3px, 0) rotateZ(0.01deg);
  }
}

/* I */
.input-frame {
  position: relative;
  margin-top: 10px
}

.input-friends {
  margin-top: 10px
}

.input-friends.large {
  margin-top: 20px
}

.input-label {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 14px;
  width: 100%;
  height: calc(100% - 2px);
  padding: 10px;
  background-color: #fff;
  color: #a5a5aa;
  transition-timing-function: ease-in-out;
  transition: 0.2s;
}

.input-label.transparent {
  background-color: unset !important;
}

.input-label.active {
  top: -11px;
  left: 10px;
  /* font-weight: bold; */
  font-size: 13px;
  /* color: #666; */
  width: auto;
  height: auto;
  padding: 0;
}

/* Login page */
#login-layout {
  width: 100%;
  height: 100%;
}

#login-layout #login-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  box-sizing: border-box;
}

#login-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  /* background-image: linear-gradient(140deg, #6864AA 0%, #a783e4 50%, #9161A6 75%); */
  overflow: hidden;
}

#login-failed {
  padding-bottom: 10px;
  margin-bottom: 10px;
}

#login-form {
  padding: 12px;
}

#login-form,
#login-help,
#login-copyrights {
  padding-left: 12px;
}

#login-miscellaneous {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #fff;
  padding-top: 8px;
  padding-right: 30px;
}


#loading {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100vh;
  z-index: 999999999999;
  background-color: #ffffff;
  text-align: center;
  display: none;
  align-items: center;
  justify-content: center;
}

#loading.active {
  display: flex;
}

#loading p {
  margin-left: 15px;
}

/* M */
/* ------------------------------------------------------------------------------------ */
/* menu frame */
.menu-frame {
  border-top: 55px solid transparent;
  padding-top: 55px;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 250px;
}

.menu-box a {
  min-width: 175px;
  width: 100%;
  text-align: left;
  color: #333;
  padding: 0;
  text-transform: unset;
  font-size: 14px;
}

.menu-box a.active {
  color: #5861C7;
  border-top: 1px solid #5861C7;
  border-bottom: 1px solid #5861C7;
}

.md-14 {
  font-size: 14px;
}

.md-16 {
  font-size: 16px;
}

.md-18 {
  font-size: 18px;
}

.md-20 {
  font-size: 20px;
}

.md-24 {
  font-size: 24px;
}

.md-32 {
  font-size: 32px;
}

.md-36 {
  font-size: 36px;
}

.md-48 {
  font-size: 48px;
}

.md-50 {
  font-size: 50px;
}

.md-64 {
  font-size: 64px;
}

/* N */
/* ------------------------------------------------------------------------------------ */
.navbar-frame {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2;
}

.nav-frame a:hover {
  transform: scale(1.2);
  color: #F2C604 !important;
}

.hover-yellow:hover {
  color: #F2C604 !important;
}

.nav-frame a {
  -webkit-transition: 0.2s ease-in-out;
  -moz-transition: 0.2s ease-in-out;
  -o-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
}

/* O */
/* ------------------------------------------------------------------------------------ */
.uk-offcanvas-bar {
  background-color: #fff;
  border-right: 1px solid #e2e2e2;
  color: #666;
}

.uk-offcanvas-bar .uk-close,
.uk-offcanvas-bar h3 {
  color: #666;
}

.uk-offcanvas-bar .uk-close:hover {
  color: #5861C7;
}

.uk-offcanvas-bar hr {
  border-top-color: #666;
}

.uk-offcanvas-bar a.uk-text-link {
  color: #1e87f0;
}

.uk-offcanvas-bar .uk-button-primary {
  background-color: #5861C7;
  color: #fff;
}

/* P */
/* ------------------------------------------------------------------------------------ */
.print-size table * {
  font-size: 11px;
}

.print-size table td {
  padding: 4px;
}

.pulse {
  animation: pulse-animation 2s infinite;
}

@keyframes pulse-animation {
  0% {
    box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);
    color: #F2C604;
  }

  100% {
    box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
    color: #fff;
  }
}

.pulse-only {
  animation: pulse-only-animation 2s infinite;
}

@keyframes pulse-only-animation {
  0% {
    box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);
  }

  100% {
    box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
  }
}


/* S */
/* ------------------------------------------------------------------------------------ */
.switcher {
  width: 45px;
  height: 25px;
  padding: 0 3px;
  text-align: left;
}

.switcher input.uk-checkbox {
  margin-top: -7px;
  height: 18px;
  width: 18px;
}

.switcher input.uk-checkbox:checked {
  background-image: none;
  background-color: #1CB152;
}

.switcher.on {
  text-align: right;
}

/*  T */
/* ------------------------------------------------------------------------------------ */
/* Tile  */
.tile {
  padding: 20px 25px;
  height: 215px;
  background-color: #6864AA;
}

.tile.tile-1-3 {
  min-width: 120px;
  height: 100px;
}

.tile.tile-3-3 {
  height: 445px;
}

.tile.uk-margin {
  margin-bottom: 15px;
}

/* trumbowyg  */
.trumbowyg-box {
  margin: 0;
}



/* PENPLATE */
.penplate.dashed {
  padding: 10px
}

.penplate p:empty:not(:focus)::before {
  content: attr(data-placeholder);
  color: #a5a5aa
}

.penplate p {
  min-height: 30px;
  margin: 0 !important;
}

.penplate.small p {
  min-height: 30px;
  margin: 0 !important;
}

.penplate textarea {
  visibility: hidden !important;
  height: 6px !important;
}

/* U */
.ui-timepicker-standard {
  border: 1px solid #e2e2e2;
  border-top: 1px solid #39f;
  margin-top: 10px;
}

.ui-timepicker-standard .ui-state-hover {
  background-color: rgb(204, 229, 255);
  border: none;
  color: #39f;
}

/* UI KIT REPLACE */
.uk-accordion li {
  padding-bottom: 20px;
  border-bottom: 1px solid #e5e5e5;
}

.uk-accordion li:last-child {
  border-bottom: none;
}

.uk-accordion .uk-accordion-title {
  font-size: 14px;
}

.uk-button {
  text-transform: unset;
}

.uk-button-primary {
  background-color: #5861C7;
}

.uk-button-warning {
  background-color: #faa05a;
  color: #fff;
}

.uk-button-default.color-main {
  border-color: #5861C7;
}

.uk-button-default.color-success {
  border-color: #1CB152;
}

.uk-button-default.color-warning {
  border-color: #faa05a;
}

.uk-checkbox:checked,
.uk-checkbox:indeterminate,
.uk-radio:checked {
  background-color: #5861C7;
}

.uk-heading-divider {
  padding-bottom: .1em
}

.uk-heading-3xlarge {
  font-size: 20em
}

.uk-input-xlarge {
  font-size: 7em;
  height: 250px;
}

.uk-grid.uk-flex-top label {
  display: inline-block;
  margin-top: 4px
}

.uk-notification-message {
  background: #222;
  color: #fff;
}

.uk-notification-message .uk-notification-close {
  color: #fff;
}

.uk-navbar-item,
.uk-navbar-nav>li>a:not(.free-size),
.uk-navbar-toggle {
  min-height: 55px
}

.uk-subnav>*>:first-child {
  text-transform: none;
}

.uk-subnav-pill>.uk-active>a {
  background-color: #5861C7;
  text-transform: none;
}

.uk-navbar-nav>li>a.free-size {
  min-height: unset;
}

.uk-width-seq {
  width: 35px;
}

.uk-width-small.xsmall {
  width: 60px;
}

::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #5861C7;
  opacity: 1;
  /* Firefox */
}

:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #5861C7;
}

::-ms-input-placeholder {
  /* Microsoft Edge */
  color: #5861C7;
}

/*  */
.mushaf-frame {
  width: 850px;
}

.mushaf-frame.double {
  width: 1700px;
}

.frame-verse {
  width: 810px;
  text-align: justify;
  text-align-last: center;
  direction: rtl;
  background-color: #fff;
  text-rendering: optimizeSpeed;
}

.verse {
  font-size: 50px;
  border-bottom: 1px solid;
  margin: 0;
}

.verse img {
  margin-top: -10px;
}

.verse.footer {
  /* border-top: 1px solid; */
  /* margin-bottom: 25px; */
}

.verse.start {
  background-color: #16a085 !important;
  color: #fff;
}

.verse.end {
  background-color: red !important;
  color: #fff;
}

.verse-numbers {
  background: #5861C7;
  width: 40px;
  height: 40px;
  display: inline-block;
  position: relative;
  text-align: center;
  margin: 0 15px;
  font-size: 22px;
  color: #fff;
  vertical-align: text-bottom;
}

.verse-numbers:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 40px;
  width: 40px;
  background: #5861C7;
  transform: rotate(135deg);
}

.verse-header {
  padding: 15px;
  /* background: linear-gradient(45deg, #0000 calc(25%/3), #16a085 0 calc(50%/3),
                #0000 0 calc(250%/3), #16a085 0 calc(275%/3),
                #0000 0), linear-gradient(45deg, #16a085 calc(25%/3), #0000 0 calc(50%/3),
                #16a085 0 25%, #0000 0 75%,
                #16a085 0 calc(250%/3), #0000 0 calc(275%/3),
                #16a085 0),
            linear-gradient(-45deg, #0000 calc(25%/3), #16a085 0 calc(50%/3),
                #0000 0 calc(250%/3), #16a085 0 calc(275%/3),
                #0000 0), linear-gradient(-45deg, #16a085 calc(25%/3), #0000 0 calc(50%/3),
                #16a085 0 25%, #0000 0 75%,
                #16a085 0 calc(250%/3), #0000 0 calc(275%/3),
                #16a085 0) #19547b;
        background-size: 32px 32px;
        background-position: 0 0, 66px 66px; */
  background-color: #5861C7;
}

.verse-header p {
  font-size: 25px;
  direction: ltr;
}

/*  */

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (max-width: 992px) {
  .content-frame {
    border-left: none;
    border-top: 55px solid transparent;
    padding: 20px 30px 60px 30px;
  }
}

@media print {

  .no-print,
  .no-print * {
    display: none !important;
  }
}