@font-face {
    font-family: "font-regular";
    src: url("../fonts/NeoSansArabic.eot");
    src: url("../fonts/NeoSansArabic.eot?#iefix") format("embedded-opentype"), url("../fonts/NeoSansArabic.woff2") format("woff2"), url("../fonts/NeoSansArabic.woff") format("woff"), url("../fonts/NeoSansArabic.ttf") format("truetype"), url("../fonts/NeoSansArabic.svg#Neo Sans Arabic Regular") format("svg");
    font-weight: normal;
}

@font-face {
    font-family: 'font-bold';
    src: url("../fonts/NeoSansArabic-Bold.eot");
    src: url("../fonts/NeoSansArabic-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/NeoSansArabic-Bold.woff2") format("woff2"), url("../fonts/NeoSansArabic-Bold.woff") format("woff"), url("../fonts/NeoSansArabic-Bold.ttf") format("truetype"), url("../fonts/NeoSansArabic-Bold.svg#NeoSansArabic-Bold") format("svg");
    font-weight: bold;
    font-style: normal;
}


/* variables */

a,
button,
.dropdown-toggle:after,
.navbar,
.navbar.fixed-top,
.navbar .navbar-nav .nav-item .nav-link:before,
.search-form .search-wrapper input,
.aside-notifications,
.aside-notifications .notification-item,
.form-group .form-check .form-check-label:before,
.all-content .main-content .left-content .s-activity,
.all-content .main-content .left-content .s-activity .card-img img.not-active,
.all-content .main-content .left-content .s-activity .card-img img.active,
.all-content .main-content .left-content .s-activity .card-title,
.all-content .main-content .left-content .s-activity:hover .card-img img.not-active,
.all-content .main-content .left-content .s-activity:hover .card-img img.active,
.all-content .nav.nav-pills .nav-item .nav-link .icon img.not-active,
.all-content .nav.nav-pills .nav-item .nav-link .icon img.active,
.all-content .nav.nav-pills .nav-item .nav-link.active .icon img.not-active,
.all-content .nav.nav-pills .nav-item .nav-link:hover .icon img.not-active,
.all-content .nav.nav-pills .nav-item .nav-link.active .icon img.active,
.all-content .nav.nav-pills .nav-item .nav-link:hover .icon img.active,
.card,
.card:hover {
    -webkit-transition: all .5s ease-in;
    -moz-transition: all .5s ease-in;
    -o-transition: all .5s ease-in;
    transition: all .5s ease-in;
}

.dropdown-menu,
.navbar.fixed-top,
.all-content .main-content {
    -webkit-box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.04);
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.04);
}

.form-group .form-check .form-check-label:before {
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: "font-regular";
    background-color: #fff;
    text-align: right;
    color: #2794fe;
    padding: 0 !important;
    overflow-x: hidden;
}

a {
    color: inherit;
}

a:hover,
a:after {
    color: inherit;
    text-decoration: none;
}

ul {
    margin: 0;
    padding: 0;
}

a,
button {
    text-decoration: none !important;
    outline: none !important;
}

a:focus,
button:focus {
    outline: none !important;
}

.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
    outline: none;
    outline: 0;
    background: transparent;
    -webkit-box-shadow: none;
    -o-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
    color: #ffffff;
}

.btn {
    color: #ffffff;
    border-radius: 10px;
}

.btn.bg-width {
    width: 140px;
    height: 40px;
}

.btn:hover,
.btn:focus {
    opacity: .9;
    color: #ffffff;
    outline: unset;
    box-shadow: unset;
}

.btn-transparent {
    background-color: transparent;
    border: 1px solid transparent;
    min-width: auto;
}

.btn-transparent:hover,
.btn-transparent:focus {
    background-color: transparent;
}

input,
.form-control,
input:focus,
.form-control:focus {
    box-shadow: none;
    -webkit-transition: none;
    -o-transition: none;
    outline: none;
}

select {
    font-family: "font-regular";
}

option {
    font-family: "font-regular";
}

.form-control::placeholder {
    font-family: "font-regular";
}

input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "font-regular";
}

.dropdown-menu {
    width: auto;
    padding: 0;
    border: none;
    background-color: #f7f9ff;
    border-radius: 5px;
    overflow: hidden;
}

.dropdown-item {
    font-family: "font-regular";
    font-size: 13px;
    text-align: center;
    padding: 10px 20px;
    color: #aeaeae;
    font-family: "font-regular";
    font-weight: 600;
    border-right: 5px solid transparent;
}

.dropdown-item:not(:last-of-type) {
    border-bottom: 1px solid #051537;
}

.dropdown-toggle {
    padding-left: 20px;
}

.dropdown-toggle:after {
    color: #051437;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    font-size: 13px;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f078";
}

.dropdown.show .dropdown-toggle:after {
    content: "\f077";
}

.text-grey {
    color: #aeaeae;
}

.avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    display: inline-block;
}

.avatar img {
    width: 100%;
    height: 100%;
}

.avatar.w-auto {
    font-size: 20px;
    color: #ffffff;
    width: auto;
    height: auto;
    line-height: unset;
    border-radius: 0;
}

.left-arrow {
    position: relative;
}

.left-arrow:after {
    content: "\f0a5";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    font-family: "Font Awesome 5 Free";
    font-weight: 400;
    font-size: 20px;
}

.nav {
    border-bottom: none;
    justify-content: center;
}

.nav .nav-item:not(:last-child) {
    margin-left: 20px;
}

.nav .nav-link {
    color: #fff;
    border-radius: 5px;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    font-family: "font-regular";
}

.nav .nav-link:hover,
.nav .nav-link.active {
    color: #ffffff;
}

.tab-content {
    color: #aeaeae;
    padding: 20px 0;
}

.clock {
    color: #051437;
    display: flex;
}

.clock ul {
    font-size: 13px;
    margin: 0 10px;
    list-style: none;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    position: relative;
}

.clock ul:before {
    position: absolute;
    content: "";
    border-right: 1px solid #051437;
    height: 20px;
    right: -5px;
    top: 50%;
    transform: translateY(-50%);
}

.clock ul:after {
    position: absolute;
    content: "";
    border-left: 1px solid #051437;
    height: 20px;
    left: -5px;
    top: 50%;
    transform: translateY(-50%);
}

.clock h3 {
    font-size: 13px;
    color: #051437;
    margin-bottom: 0;
    font-family: "font-regular";
}

#Date {
    font-size: 13px;
    margin-left: 10px;
}

#islamicDate {
    font-size: 13px;
    font-family: "font-regular";
    line-height: inherit;
    color: #051437;
    margin-bottom: 0;
}

header {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 999;
    box-shadow: 0 0 0;
    border-bottom: 1px solid #b7dcff;
}

header .top-header {
    padding: 10px 0;
    font-family: "font-regular";
}

header .top-header .left .dropdown-menu {
    min-width: 120px;
    right: -12px;
}

header .top-header .left ul {
    display: flex;
    align-items: center;
}

header .top-header .left ul li {
    position: relative;
}

header .top-header .left ul li:not(:last-child) {
    margin-left: 20px;
}

header .top-header .left ul li:not(:last-child):after {
    position: absolute;
    content: "";
    border-left: 1px solid #515a73;
    height: 20px;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
}

header .top-header .left ul li .dropdown img {
    height: 15px;
}

header .top-header .left ul li .dropdown-item {
    padding: 10px;
    color: #051537;
}

header .top-header .left ul li .dropdown-item:hover,
header .top-header .left ul li .dropdown-item:focus,
header .top-header .left ul li .dropdown-item.active {
    opacity: 0.8;
}

header .top-header .left ul li .username {
    font-size: 13px;
    display: inline-block;
    margin-left: 5px;
    color: #051437;
}

header .main-menu .navbar-brand {
    width: 100px;
    margin: 0;
    padding: 0;
}

.navbar .navbar-nav {
    margin-right: 90px;
}

.navbar .navbar-nav .nav-item .nav-link {
    color: #051537;
    font-family: "font-regular";
    font-size: 16px;
    padding: 20px;
    position: relative;
}

.navbar .navbar-nav .nav-item .nav-link:before {
    content: "";
    position: absolute;
    height: 3px;
    width: 0;
    border-radius: 10px;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
}

@media (min-width: 992px) {
    .navbar-expand-lg .navbar-collapse {
        display: flex!important;
        flex-basis: auto;
        justify-content: flex-end;
    }
}

.navbar .navbar-nav .nav-item .nav-link.active:before,
.navbar .navbar-nav .nav-item .nav-link:hover:before {
    width: calc(100% - 40px);
}

.navbar .navbar-nav .dropdown-menu {
    border: none;
    border-radius: 5px;
    overflow: hidden;
}

.search-form {
    display: block;
    align-items: center;
    direction: initial;
}

.search-form .search-wrapper {
    display: inline-block;
    width: 0;
    color: #ffffff;
    height: auto;
    border: none;
    font-size: 14px;
    visibility: hidden;
    vertical-align: middle;
    height: 26px;
    position: relative;
}

.search-form .search-wrapper input {
    width: 0px;
    border: none;
    padding: 0;
    -webkit-appearance: textfield;
    text-align: right;
    direction: rtl;
    display: inline-block;
    color: #ffffff;
}

.search-form .search-wrapper input:focus {
    outline: none;
}

.search-form .search-wrapper.search-visible {
    width: 300px;
    border-bottom-color: #ffffff;
    transition: all 0.8s ease-in;
    display: inline-block;
    visibility: visible;
}

.search-form .search-wrapper.search-visible input {
    width: 300px;
}

.search-form .search-icon {
    cursor: pointer;
    font-size: 15px;
    color: #ffffff;
    display: inline-block;
}

.search-form .search-icon .fa-times {
    display: none;
}

.search-form.open .search-icon .fa-search {
    display: none;
}

.search-form.open .search-icon .fa-times {
    display: block;
}

.show-notifications {
    font-size: 20px;
}

.aside-notifications {
    background-color: #ffffff;
    padding: 10px;
    text-align: right;
    box-shadow: 0 0 0;
    max-width: 300px;
    position: fixed;
    left: -500px;
    height: 100%;
    width: 100%;
    margin-top: -5px;
    z-index: 99;
    border-right: 1px solid #b7dcff;
    transition: 0.5s;
}

.aside-notifications.show {
    left: 0;
    transition: 0.5s;
}

.aside-notifications .aside-title {
    background-color: #efefef;
    border-radius: 10px;
    text-align: center;
    font-size: 15px;
    padding: 10px 30px;
    margin-bottom: 20px;
}

.aside-notifications .notification-item {
    display: flex;
    align-items: center;
    margin: 0 0 10px;
    padding: 5px 5px 10px;
    border-bottom: 1px solid #ddd;
}

.aside-notifications .notification-item .icon {
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 5px;
    overflow: hidden;
}

.aside-notifications .notification-item .icon img {
    width: 100%;
    height: 100%;
}

.aside-notifications .notification-item .text {
    width: calc(100% - 40px);
    padding-right: 5px;
}

.aside-notifications .notification-item .text p {
    margin-bottom: 0;
    font-size: 13px;
}

.aside-notifications .notification-item:hover {
    background-color: #efefef;
}

.aside-notifications .no-notification {
    margin-top: 40px;
}

.table img {
    width: 20px;
}

.table th,
.table td {
    text-align: center;
    font-size: 15px;
    font-weight: 500;
}

.table .delete-inp {
    margin-left: 5px;
}

.table-bordered thead td,
.table-bordered thead th {
    border-bottom-width: 2px;
    text-align: center;
    font-size: 15px;
    font-weight: 900;
}

.table thead th {
    border-bottom: 1px solid #051537;
}

.table-bordered td,
.table-bordered th {
    border: 1px solid #051537;
}

.table-bordered td {
    position: relative;
    font-size: 14px;
    vertical-align: baseline;
}

.table-bordered td input[type="text"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    padding: 5px;
    font-size: 15px;
    text-align: center;
}

.table-bordered td input[type="text"]:focus {
    background-color: #efefef;
}

.editable-btns {
    display: flex;
    justify-content: flex-end;
}

.editable-btns .btn {
    font-size: 14px;
    margin-left: 15px;
    margin-top: 20px;
}

.editable-btns .btn:not(:last-of-type) {
    margin-left: 20px;
}

.editable-btns .btn.btn-danger {
    background-color: #dc3545;
    border-color: #dc3545;
}

@media print {
    .print-area .table img {
        width: 20px;
    }
    .print-area .table th,
    .print-area .table td {
        text-align: center;
    }
    .print-area .table-bordered thead td,
    .print-area .table-bordered thead th {
        border-bottom-width: 2px;
        text-align: center;
    }
}

::-webkit-input-placeholder {
    color: #efefef;
}

::-moz-placeholder {
    color: #efefef;
}

:-ms-input-placeholder {
    color: #efefef;
}

:-moz-placeholder {
    color: #efefef;
}

.form-group {
    margin-bottom: 20px;
    position: relative;
}

.form-group .label-text {
    font-family: "font-regular";
    font-size: 15px;
    margin-bottom: 10px;
    position: relative;
    display: block;
}

.form-group .label-text .total-mark {
    position: absolute;
    left: 0;
}

.form-group .options {
    display: flex;
}

.form-group .form-check:last-child {
    padding-left: 0;
}

.form-group .form-check .form-check-label {
    position: relative;
    cursor: pointer;
    padding-right: 0;
    font-size: 15px;
}

.form-group .form-check .form-check-label:before {
    content: '';
    position: relative;
    background: #ffffff;
    display: inline-block;
    width: 15px;
    height: 15px;
    top: 2px;
    text-align: center;
    margin-left: 10px;
    cursor: pointer;
}

.form-group .form-check .form-check-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
}

.form-control {
    width: 100%;
    padding: 0 0px;
    font-size: 15px;
    border: 0px solid #aeaeae;
    border-bottom: 1px solid #2794fe;
    height: 40px;
    line-height: 45px;
    background: #ffffff;
    outline: none;
    transition: 0.5s;
    color: #023465;
    border-radius: 0px;
    position: relative;
    margin: 0 auto;
}

.show-pass {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

textarea {
    resize: none;
}

textarea.form-control {
    height: 60px;
    line-height: 22px;
    padding: 18px 0px;
    background-color: #fff;
}

.cke_top {
    border-bottom: 1px solid #b6b6b6;
    padding: 6px 8px 2px;
    white-space: normal;
    box-shadow: 0 1px 0 #fff inset;
    background: #fff;
    background-image: linear-gradient(to bottom, #fff, #fff) !important;
}

.upload-file {
    position: relative;
    overflow: hidden;
}

.upload-file.no-preview .file-text,
.upload-file.no-preview .custom-file,
.upload-file.no-preview .upload-text {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    text-align: center;
}

.upload-file.no-preview .custom-file {
    opacity: 0;
    z-index: 3;
    cursor: pointer;
}

.file-upload-wrapper .svg-inline--fa.fa-w-16 {
    font-size: 40px;
}

.upload-file.no-preview .upload-text {
    color: #aeaeae;
    cursor: pointer;
    text-align: center;
}

.form-group.not-full-width .label-text {
    margin-bottom: 0;
    width: 30%;
}

.form-group.not-full-width .form-control {
    width: 30%;
}

.rtl .custom-control,
[dir=rtl] .custom-control {
    padding: 10px;
    width: 100%;
}

.rtl .custom-control:last-child,
[dir=rtl] .custom-control:last-child {
    margin-bottom: 0;
}

.rtl .custom-control-label::after,
.rtl .custom-control-label::before,
[dir=rtl] .custom-control-label::after,
[dir=rtl] .custom-control-label::before {
    right: unset;
    left: 0;
    transition: unset !important;
    box-shadow: 0 0 0 !important;
}

.custom-check {
    position: relative;
    padding-right: 20px;
    text-align: right;
    margin-bottom: 20px;
}

.custom-check .checkmark {
    content: "";
    position: absolute;
    left: 20px;
    height: 20px;
    width: 20px;
    border: 1px solid #a0a0a0;
    border-radius: 2px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    top: 50%;
    transform: translateY(-50%);
}

.custom-check .custom-control-label {
    cursor: pointer;
    padding: 0;
    margin: 0;
    position: relative;
    width: 100%;
    outline: none !important;
    box-shadow: none !important;
}

.custom-check .custom-control-label:focus {
    outline: none !important;
    box-shadow: none !important;
}

.custom-check .custom-control-label:after {
    display: none;
}

.custom-check .custom-control-input {
    margin-right: 0;
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.custom-check .custom-control-input:checked~.custom-control-label:before {
    background-image: url(../imgs/change/checked.png);
    border-color: #ffffff;
    width: 20px;
    height: 20px;
    left: 0px;
    background-color: #ffffff;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.rtl .input-group>.custom-select:not(:last-child),
.rtl .input-group>.form-control:not(:last-child),
[dir=rtl] .input-group>.custom-select:not(:last-child),
[dir=rtl] .input-group>.form-control:not(:last-child) {
    border-radius: 5px;
}

.input-date {
    display: block;
    position: relative;
}

.input-date .form-control {
    width: 100%;
    padding: 0 10px;
    font-size: 15px;
    border: 1px solid #aeaeae;
    height: 45px;
    line-height: 45px;
    background: #ffffff;
    outline: none;
    transition: 0.5s;
    color: #aeaeae;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}

.input-date button.icon-button {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    background-color: transparent;
}

.input-date button.icon-button img {
    margin: 0;
}

.upload-area {
    position: relative;
    width: 140px;
    height: 140px;
    display: block;
    margin: 0px auto;
    border: 1px solid #aeaeae;
    border-radius: 50%;
    overflow: hidden;
}

.upload-area .preview {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;
}

.upload-area .file-upload-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 3;
}

.upload-area .file-upload-wrapper .file-upload-native,
.upload-area .file-upload-wrapper .file-upload-text {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.upload-area .file-upload-wrapper .file-upload-text {
    cursor: pointer;
    text-align: center;
    background-color: transparent;
    border: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
}

.upload-area .file-upload-wrapper .file-upload-text.icon {
    opacity: 1;
    font-size: 24px;
    color: #aeaeae;
}

.upload-area .file-upload-wrapper .file-upload-native {
    z-index: 15;
    opacity: 0;
}

.upload-area .file-upload-wrapper .file-upload-native:focus,
.upload-area .file-upload-wrapper .file-upload-native:focus {
    outline: none;
}

.upload-area .file-upload-wrapper input[type="file"]::-webkit-file-upload-button {
    cursor: pointer;
}

.upload-block {
    margin: 0 auto 40px;
}

.upload-block .upload_wrap .upload_btn {
    position: relative;
}

.upload-block .upload_wrap .upload_btn .upload_input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.upload-block .upload_wrap .upload_btn .upload-text {
    text-align: center;
    display: block;
}

.upload-block .upload_item {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin: 10px 5px 5px 0px;
    border: 1px solid #e8e8e8;
    width: 70px;
    height: 70px;
    overflow: hidden;
}

.upload-block .upload_item:after {
    content: '';
    background: rgba(0, 0, 0, 0.2);
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.upload-block .upload_img {
    width: 100%;
}

.upload-block .upload_del {
    display: block;
    position: absolute;
    right: 5px;
    top: 5px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    color: #ffffff;
    font-size: 14px;
    text-align: center;
    border-radius: 50%;
    cursor: pointer;
    opacity: 1;
    z-index: 2;
}

.counter-all {
    display: flex;
    align-items: center;
}

.counter-all .label-text {
    margin-bottom: 0;
}

.counter-all .counter {
    position: relative;
    margin: 0 auto;
}

.counter-all .counter .form-control {
    border-radius: 0;
    border: none;
    border-top: 1px solid #aeaeae;
    border-bottom: 1px solid #aeaeae;
    text-align: center;
    width: 80px;
}

.counter-all .counter .value-button {
    position: absolute;
    border: 1px solid #aeaeae;
    width: 40px;
    height: 40px;
    top: 0;
    text-align: center;
    line-height: 40px;
    z-index: 2;
    cursor: pointer;
}

.counter-all .counter .value-button.plus {
    border-radius: 0 10px 10px 0;
    right: -40px;
}

.counter-all .counter .value-button.minus {
    border-radius: 10px 0 0 10px;
    left: -40px;
}

.all-content {
    position: relative;
    overflow: hidden;
    padding-top: 130px;
}

.all-content .main-content {
    max-width: 95%;
    margin: 40px auto;
    background-color: transparent;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    height: auto;
    position: relative;
    box-shadow: 0 0 0 !important;
}

.all-content .main-content .main-title {
    color: #061237;
    font-weight: 900;
    text-align: center;
    font-size: 22px;
    position: relative;
    margin-bottom: 30px;
}

.all-content .main-content .main-title:after {
    content: "";
    position: absolute;
    bottom: -10px;
    width: 50px;
    height: 3px;
    left: 0;
    right: 0;
    margin: auto;
    background: #0b183b;
    border-radius: 100px;
}

.all-content .main-content .right-menu {
    width: 20%;
    border-left: 0px solid #efefef;
    text-align: right;
    padding: git0px 0;
    overflow-y: scroll;
}

.all-content .main-content .right-menu .nav-mobile .fa-times {
    display: none;
}

.all-content .main-content .right-menu li .side-link {
    color: #ffffff;
    display: block;
    background-color: #051437;
    padding: 15px 40px 15px 0px;
    font-family: "font-regular";
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.all-content .main-content .right-menu li .side-link:before {
    content: "";
    position: absolute;
    right: -10px;
    bottom: -10px;
    width: 40px;
    height: 40px;
    background: #2794fe;
    border-radius: 50px;
    z-index: 0;
    opacity: 0.7;
}

.all-content .main-content .right-menu li .side-link.active,
.all-content .main-content .right-menu li .side-link:hover,
.all-content .main-content .right-menu li .side-link:focus {
    background-color: #b7dcff;
    color: #051437;
}

.all-content .main-content .right-menu li .side-link.active.left-arrow:after,
.all-content .main-content .right-menu li:hover .side-link.left-arrow:after {
    color: #051437;
}

.all-content .main-content .right-menu li .side-link.left-arrow:after {
    left: 15px;
}

.all-content .main-content .right-menu li:not(:last-child) {
    margin-bottom: 13.3333333333px;
}

.all-content .main-content .left-content {
    width: calc(100% - 20%);
    padding: 20px 40px 20px;
    position: relative;
    overflow: scroll;
    height: auto;
    /*overflow-x: hidden;*/
}

.all-content .main-content .all-book-section {
    width: 100%;
    padding: 40px 20px 20px;
    position: relative;
    overflow: hidden;
    max-height: 800px;
}

.book-second {
    width: 100%;
    padding: 0;
    position: relative;
    overflow: scroll;
}

.all-content .main-content .left-content .s-activity {
    background-color: #b7dcff;
    color: #051537;
    border-radius: 10px;
    overflow: hidden;
    text-align: center;
    padding: 20px;
    border: none;
    margin-bottom: 30px;
    position: relative;
}

.all-content .main-content .left-content .s-activity:after {
    content: "";
    position: absolute;
    left: -40px;
    bottom: -40px;
    width: 100px;
    height: 100px;
    background: #051537;
    border-radius: 50px;
    z-index: 0;
    opacity: 1;
    transition: 0.7s;
}

.all-content .main-content .left-content .s-activity:hover:after {
    background: #b7dcff;
    transition: 0.7s;
}

.all-content .main-content .left-content::-webkit-scrollbar {
    width: 0px;
    height: 0px;
    background: #fff;
}

.all-content .main-content .left-content::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 0px rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 0 0px rgba(0, 0, 0, 0.3);
    background: #fff;
}

.all-content .main-content .left-content::-webkit-scrollbar-thumb {
    background-color: #061237;
    outline: 1px solid #061237;
    border-radius: 200px;
}

.all-content .main-content .left-content .s-activity .card-img {
    margin: auto;
    overflow: hidden;
    margin: 0 auto 10px;
}

.all-content .main-content .left-content .s-activity .card-img img {
    width: 40px;
    margin: auto;
}

.all-content .main-content .left-content .s-activity .card-img img.not-active {
    display: block;
}

.all-content .main-content .left-content .s-activity .card-img img.active {
    display: none;
}

.all-content .main-content .left-content .s-activity .card-title {
    margin-bottom: 0;
    font-size: 16px;
    color: #051537;
}

.all-content .main-content .left-content .s-activity {
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}

.all-content .main-content .left-content .s-activity:hover .card-title {
    color: #ffffff;
}

.all-content .main-content .left-content .s-activity:hover .card-img img.not-active {
    display: none;
}

.all-content .main-content .left-content .s-activity:hover .card-img img.active {
    display: block;
}

.all-content .main-content .left-content .avatar {
    margin-bottom: 20px;
    display: table;
    margin: 0 auto 20px auto;
}

.all-content .main-content .left-content .s-info {
    margin-bottom: 15px;
    padding: 10px;
    box-shadow: 0 0px 55px 0 rgba(0, 0, 0, 0.09);
}

.all-content .main-content .left-content .s-info .info-title {
    max-width: 80px;
    display: inline-block;
}

.all-content .nav.nav-pills {
    justify-content: center;
}

.all-content .nav.nav-pills .nav-item {
    width: 45%;
    text-align: center;
}

.all-content .nav.nav-pills .nav-item .nav-link .icon {
    width: 25px;
    height: 25px;
    display: inline-block;
    margin-left: 10px;
    font-size: 17px;
}

.all-content .nav.nav-pills .nav-item .nav-link .icon img {
    width: 100%;
}

.all-content .nav.nav-pills .nav-item .nav-link .icon img.not-active {
    display: block;
}

.all-content .nav.nav-pills .nav-item .nav-link .icon img.active {
    display: none;
}

.all-content .nav.nav-pills .nav-item .nav-link.active .icon img.not-active,
.all-content .nav.nav-pills .nav-item .nav-link:hover .icon img.not-active {
    display: none;
}

.all-content .nav.nav-pills .nav-item .nav-link.active .icon img.active,
.all-content .nav.nav-pills .nav-item .nav-link:hover .icon img.active {
    display: block;
}

.all-content .form-content .btn.main-btn {
    margin: 10px auto 0;
}

.wizard-form {
    padding-top: 40px;
}

.wizard-form .progress {
    background-color: transparent;
    height: 0px;
    border: 1px dashed #e8e8e8;
    margin: 0 auto;
    width: 72%;
    position: relative;
}

.wizard-form .navbar-inner {
    width: 100%;
    margin: 40px auto 0;
}

.wizard-form .nav-pills {
    display: flex;
    justify-content: center;
}

.wizard-form ul li {
    text-align: center;
    width: 100%;
    display: inline-block;
    color: #8F8F8F;
    font-size: 18px;
    background: transparent;
    font-size: 14px;
    position: relative;
    cursor: not-allowed;
}

.wizard-form ul li a {
    font-family: "font-regular";
}

.wizard-form ul li a:before {
    content: "";
    background-color: #e8e8e8;
    position: absolute;
    top: -50px;
    width: 20px;
    height: 20px;
    margin: 0 auto;
    right: 0;
    left: 0;
    border-radius: 50%;
    border: 4px solid transparent;
    opacity: 0.5;
    z-index: 1;
}

.wizard-form ul li a:after {
    content: "";
    background-color: #e8e8e8;
    position: absolute;
    top: -46px;
    width: 12px;
    height: 12px;
    margin: 0 auto;
    right: 0px;
    left: 0;
    border-radius: 50%;
    z-index: 1;
}

.wizard-form ul li a:first-child span {
    position: absolute;
    width: 100%;
    height: 5px;
    background: #ffffff;
    display: inline-block;
    top: -34px;
    left: 50%;
    z-index: 0;
}

.wizard-form ul li.active a {
    background: transparent;
}

.wizard-form .tab {
    display: none;
    padding-top: 40px;
}

.wizard-form .list-buttons {
    margin-top: 20px;
}

.wizard-form .list-buttons .btn {
    width: 100px;
}

.wizard-form .list-buttons .btn:not(:last-child) {
    margin-left: 40px;
}

.wizard-form .list-buttons .btn#prevBtn2 {
    display: none !important;
}

.wizard-form .list-buttons .btn.finish-button {
    display: none;
}

.card {
    max-width: 400px;
    position: relative;
    border: 1px solid #efefef;
    margin-bottom: 40px;
    padding: 10px;
    border-radius: 10px;
}

.my-card {
    z-index: 1;
    position: relative;
}

.my-card::before {
    content: " ";
    width: 95%;
    height: 95%;
    z-index: -3;
    position: absolute;
    top: auto;
    bottom: 1px;
    left: 1px;
    border-radius: 12px;
    outline: 1px solid transparent;
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}

.my-card::after {
    content: " ";
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
    border-radius: 10px;
    -webkit-box-shadow: 0 10px 50px rgba(166, 209, 237, .2);
    box-shadow: 0 10px 50px rgba(166, 209, 237, .2);
    z-index: -2;
}

.card iframe {
    position: absolute;
    z-index: 5555555;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    display: none;
}

.card:hover {
    /*box-shadow: 0px 5px 15px 0px rgba(200, 200, 200, 0.5);*/
}

.my-card:hover::before {
    -webkit-transform: rotate(2deg) translateX(-5px) translateY(16px);
    -ms-transform: rotate(2deg) translateX(-5px) translateY(16px);
    transform: rotate(2deg) translateX(-5px) translateY(16px);
}

.card .card-img {
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.card .card-img img {
    width: 100%;
    height: 100%;
}

.card .card-img .icon {
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    margin: auto;
}

.card h6.card-title {
    font-size: 16px;
    text-align: center;
    margin-top: 20px;
}

.card .list-links .btn {
    width: 90px;
    font-size: 14px;
}

.card .list-links .btn:not(:last-of-type) {
    margin-left: 10px;
}

.loading-window {
    position: relative;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    right: 0;
    background-color: transparent;
    height: 450px;
}

.loading-window .loader {
    position: relative;
    top: 0%;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;
    height: 100%;
}

@media (min-width: 768px) {
    .visible-mobile {
        display: none;
    }
}

@media (max-width: 1299px) {
    .all-content .main-content {
        max-width: 850px;
    }
}

@media (max-width: 1199px) {
    .all-content .main-content {
        max-width: 700px;
    }
    .navbar .navbar-nav .nav-item .nav-link {
        font-size: 14px;
        padding: 20px 15px;
    }
    .aside-notifications {
        width: 220px;
    }
}

@media (max-width: 991px) {
    .dropdown-toggle {
        padding-left: 0;
    }
    .dropdown-toggle:after {
        display: none;
    }
    .visible-mobile {
        display: block;
    }
    .hidden-mobile {
        display: none;
    }
    .main-navbar .dropdown {
        position: relative;
    }
    .main-navbar .dropdown-menu {
        position: absolute;
        left: 0;
        min-width: auto;
    }
    .main-navbar .dropdown-item {
        padding: 10px 0;
    }
    .search-wrapper {
        overflow: hidden;
        position: fixed;
        width: 40px;
        height: 40px;
        line-height: 40px;
        padding: 0;
        text-align: center;
        border-radius: 5px;
        bottom: 10px;
        left: 10px;
        z-index: 1;
    }
    .search-wrapper .search-btn {
        color: #ffffff;
        padding: 0;
    }
    .search-wrapper .search-popup--bg {
        width: 100%;
        height: 100%;
        position: fixed;
        background-color: rgba(0, 0, 0, 0.84);
        border-radius: 50%;
        transition: transform 0.5s ease, border-radius 0.5s ease;
        transform: scale(0);
        transform-origin: center;
        z-index: 99;
        left: 0;
        right: 0;
    }
    .search-wrapper .search-popup--bg.active {
        transform: scale(10);
        transform-origin: center;
        border-radius: 0%;
    }
    .search-wrapper .search-form {
        display: none;
        position: relative;
        z-index: 101;
        position: fixed;
        width: 280px;
        left: 50%;
        top: 50%;
        text-align: center;
        margin: auto;
        transform: translate(-50%, -50%);
    }
    .search-wrapper .search-form .d-flex {
        border-bottom: 1px solid #b7b7b7;
        padding-bottom: 10px;
        flex-direction: row-reverse;
    }
    .search-wrapper .search-form .d-flex .form-control {
        background-color: transparent;
        border: none;
        font-family: "font-regular";
        color: #ffffff;
        text-align: right;
        direction: rtl;
    }
    .search-wrapper .search-form .d-flex .btn {
        padding-left: 0;
        color: #ffffff;
    }
    header .main-menu .navbar-brand {
        width: 80px;
        margin: auto;
    }
    header .main-menu .visible-mobile.list-unstyled {
        display: block;
    }
    header .main-menu .visible-mobile.list-unstyled li {
        display: inline-block;
        font-weight: 600;
    }
    header .main-menu .visible-mobile.list-unstyled .dropdown {
        margin-right: 10px;
    }
    header .main-menu .visible-mobile.list-unstyled .dropdown>a {
        font-size: 20px;
    }
    header .main-menu .visible-mobile.list-unstyled .dropdown .dropdown-menu {
        right: -10px;
        border: none;
        min-width: 30px;
    }
    header .main-menu .visible-mobile.list-unstyled .dropdown .username {
        font-size: 13px;
    }
    header .main-menu .navbar-light .navbar-collapse {
        position: fixed;
        right: -100%;
        top: 0;
        width: 100%;
        height: 100vh;
        overflow-y: scroll;
        padding: 40px 20px;
        background: rgba(0, 0, 0, 0.9);
        -webkit-transition: all 0.4s ease-in-out;
        -moz-transition: all 0.4s ease-in-out;
        -o-transition: all 0.4s ease-in-out;
        transition: all 0.4s ease-in-out;
        -ms-transition: all 0.4s ease-in-out;
        transform-origin: right;
        -webkit-animation-name: slideInRight;
        animation-name: slideInRight;
        z-index: 999;
    }
    header .main-menu .navbar-light .navbar-collapse.show {
        right: 0;
    }
    header .main-menu .navbar-light .navbar-toggler {
        border: none;
    }
    header .main-menu .navbar-light .navbar-nav {
        margin-right: 0;
    }
    header .main-menu .navbar-light .navbar-nav.open {
        margin-top: 70px;
        display: block;
        right: 0;
        animation: slideInRight;
        transition: all 0.4s ease-in;
    }
    header .main-menu .navbar-light .navbar-nav .nav-item {
        display: block;
        float: unset;
        text-align: center;
        margin: 0;
    }
    header .main-menu .navbar-light .navbar-nav .nav-item .nav-link {
        color: #ffffff;
    }
    header .main-menu .navbar-light .navbar-nav .nav-item .nav-link .username {
        display: none;
    }
    header .main-menu .navbar-light .menu-wrapper {
        height: 35px;
        cursor: pointer;
        transition: all 0.4s ease-in;
    }
    header .main-menu .navbar-light .menu-wrapper.open {
        position: fixed;
        top: 80px;
        left: 10px;
        z-index: 1001;
    }
    header .main-menu .navbar-light .menu-wrapper .hamburger-menu {
        width: 30px;
        height: 3px;
        display: inline-block;
        border-radius: 5px;
        position: relative;
        transform: translateY(10px);
        transition: all 0ms 300ms;
        display: block;
        margin-bottom: 30px;
        z-index: 1002;
    }
    header .main-menu .navbar-light .menu-wrapper .hamburger-menu:after,
    header .main-menu .navbar-light .menu-wrapper .hamburger-menu:before {
        width: 30px;
        height: 3px;
        border-radius: 5px;
    }
    header .main-menu .navbar-light .menu-wrapper .hamburger-menu:before {
        content: "";
        position: absolute;
        left: 0;
        bottom: 10px;
        transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
    }
    header .main-menu .navbar-light .menu-wrapper .hamburger-menu:after {
        content: "";
        position: absolute;
        left: 0;
        background: #061237;
        top: 10px;
        transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
        -webkit-transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
        -moz-transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
        -ms-transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
        -o-transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
    }
    header .main-menu .navbar-light .menu-wrapper .hamburger-menu.animate {
        background: transparent;
    }
    header .main-menu .navbar-light .menu-wrapper .hamburger-menu.animate:after {
        background: #ffffff;
        top: 0;
        transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
    }
    header .main-menu .navbar-light .menu-wrapper .hamburger-menu.animate:before {
        background: #ffffff;
        bottom: 0;
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
    }
    .navbar .navbar-nav .dropdown-menu {
        background: transparent;
    }
    .navbar .navbar-nav .dropdown-menu .dropdown-item:not(:last-of-type) {
        border-bottom: none;
    }
    .all-content .main-content {
        display: block;
    }
    .all-content .main-content .right-menu {
        display: none;
    }
    .all-content .main-content .right-menu .fa-times {
        display: block;
        font-size: 24px;
        position: absolute;
        right: 20px;
        top: 50px;
        z-index: 3;
    }
    .all-content .main-content .right-menu.show {
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        right: 0;
        margin: 0 auto;
        top: 0;
        z-index: 9999;
        background: rgba(0, 0, 0, 0.8);
        overflow: hidden;
        padding-top: 100px;
        display: block;
    }
    .all-content .main-content .right-menu.show ul {
        width: 80%;
        margin: 40px auto;
        background-color: #ffffff;
        height: 300px;
        overflow: scroll;
    }
    .all-content .main-content .left-content {
        width: 100%;
    }
    .all-content .nav-mobile {
        display: block;
        position: fixed;
        min-width: 40px;
        height: 40px;
        line-height: 40px;
        bottom: 10px;
        right: 10px;
        border-radius: 5px;
        text-align: center;
        color: #ffffff;
        font-size: 25px;
        cursor: pointer;
        z-index: 2;
    }
    .aside-notifications {
        width: 260px;
        right: -260px;
    }
    .aside-notifications.show {
        right: 0;
    }
}

@media (max-width: 767px) {
    body {
        font-size: 14px;
        line-height: 26px;
    }
    .clock {
        width: 100%;
    }
    .clock h3 {
        display: none;
    }
    #Date,
    #islamicDate,
    .clock ul {
        font-size: 10px;
    }
}


/* loading contant */

.loading-show {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: #fff;
    z-index: 99;
    height: 100%;
}

.loading-show .loader {
    position: relative;
    text-align: center;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loader-book {
    --background: linear-gradient(135deg, #23C4F8, #275EFE);
    --shadow: rgba(39, 94, 254, 0.28);
    --text: #6C7486;
    --page: rgba(255, 255, 255, 0.36);
    --page-fold: rgba(255, 255, 255, 0.52);
    --duration: 3s;
    width: 200px;
    height: 140px;
    position: relative;
    transform: scale(0.5);
}

.loader-book:before,
.loader-book:after {
    --r: -6deg;
    content: '';
    position: absolute;
    bottom: 8px;
    width: 120px;
    top: 80%;
    box-shadow: 0 16px 12px var(--shadow);
    -webkit-transform: rotate(var(--r));
    transform: rotate(var(--r));
}

.loader-book:before {
    left: 4px;
}

.loader-book:after {
    --r: 6deg;
    right: 4px;
}

.loader-book div {
    width: 100%;
    height: 100%;
    border-radius: 13px;
    position: relative;
    z-index: 1;
    -webkit-perspective: 600px;
    perspective: 600px;
    box-shadow: 0 4px 6px var(--shadow);
    background-image: var(--background);
}

.loader-book div ul {
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
}

.loader-book div ul li {
    --r: 180deg;
    --o: 0;
    --c: var(--page);
    position: absolute;
    top: 10px;
    left: 10px;
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    color: var(--c);
    opacity: var(--o);
    -webkit-transform: rotateY(var(--r));
    transform: rotateY(var(--r));
    -webkit-animation: var(--duration) ease infinite;
    animation: var(--duration) ease infinite;
}

.loader-book div ul li:nth-child(2) {
    --c: var(--page-fold);
    -webkit-animation-name: page-2;
    animation-name: page-2;
}

.loader-book div ul li:nth-child(3) {
    --c: var(--page-fold);
    -webkit-animation-name: page-3;
    animation-name: page-3;
}

.loader-book div ul li:nth-child(4) {
    --c: var(--page-fold);
    -webkit-animation-name: page-4;
    animation-name: page-4;
}

.loader-book div ul li:nth-child(5) {
    --c: var(--page-fold);
    -webkit-animation-name: page-5;
    animation-name: page-5;
}

.loader-book div ul li svg {
    width: 90px;
    height: 120px;
    display: block;
}

.loader-book div ul li:first-child {
    --r: 0deg;
    --o: 1;
}

.loader-book div ul li:last-child {
    --o: 1;
}

.loader-book span {
    display: block;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: 20px;
    text-align: center;
    color: var(--text);
}

@-webkit-keyframes page-2 {
    0% {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    35%,
    100% {
        opacity: 0;
    }
    50%,
    100% {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
}

@keyframes page-2 {
    0% {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    35%,
    100% {
        opacity: 0;
    }
    50%,
    100% {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
}

@-webkit-keyframes page-3 {
    15% {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
        opacity: 0;
    }
    35% {
        opacity: 1;
    }
    50%,
    100% {
        opacity: 0;
    }
    65%,
    100% {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
}

@keyframes page-3 {
    15% {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
        opacity: 0;
    }
    35% {
        opacity: 1;
    }
    50%,
    100% {
        opacity: 0;
    }
    65%,
    100% {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
}

@-webkit-keyframes page-4 {
    30% {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    65%,
    100% {
        opacity: 0;
    }
    80%,
    100% {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
}

@keyframes page-4 {
    30% {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    65%,
    100% {
        opacity: 0;
    }
    80%,
    100% {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
}

@-webkit-keyframes page-5 {
    45% {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
        opacity: 0;
    }
    65% {
        opacity: 1;
    }
    80%,
    100% {
        opacity: 0;
    }
    95%,
    100% {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
}

@keyframes page-5 {
    45% {
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
        opacity: 0;
    }
    65% {
        opacity: 1;
    }
    80%,
    100% {
        opacity: 0;
    }
    95%,
    100% {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
}

.all-content .first-page {
    width: 100%;
    margin: 40px auto;
    background-color: transparent;
    border-radius: 10px;
    overflow: hidden;
    display: block;
    position: relative;
}

.text-index {
    position: relative;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 0;
    font-size: 300px;
    filter: url(#gooey);
    height: 100%;
}

.text-index::before,
.text-index::after {
    position: absolute;
    opacity: 0;
    margin: 0 auto;
    left: 0;
    right: 0;
    animation-duration: 39s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
    filter: blur(9px);
}

.text-index::before {
    content: "Y";
    animation-name: items-odd;
}

.text-index::after {
    content: "Z";
    animation-name: items-even;
    animation-delay: 1.5s;
}

@keyframes items-odd {
    2.5641025641% {
        opacity: 1;
    }
    3.8461538462% {
        opacity: 1;
    }
    6.4102564103% {
        opacity: 0;
    }
    7.6923076923% {
        opacity: 0;
    }
    10.2564102564% {
        opacity: 1;
    }
    11.5384615385% {
        opacity: 1;
    }
    14.1025641026% {
        opacity: 0;
    }
    15.3846153846% {
        opacity: 0;
    }
    17.9487179487% {
        opacity: 1;
    }
    19.2307692308% {
        opacity: 1;
    }
    21.7948717949% {
        opacity: 0;
    }
    23.0769230769% {
        opacity: 0;
    }
    25.641025641% {
        opacity: 1;
    }
    26.9230769231% {
        opacity: 1;
    }
    29.4871794872% {
        opacity: 0;
    }
    30.7692307692% {
        opacity: 0;
    }
    33.3333333333% {
        opacity: 1;
    }
    34.6153846154% {
        opacity: 1;
    }
    37.1794871795% {
        opacity: 0;
    }
    38.4615384615% {
        opacity: 0;
    }
    41.0256410256% {
        opacity: 1;
    }
    42.3076923077% {
        opacity: 1;
    }
    44.8717948718% {
        opacity: 0;
    }
    46.1538461538% {
        opacity: 0;
    }
    48.7179487179% {
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    52.5641025641% {
        opacity: 0;
    }
    53.8461538462% {
        opacity: 0;
    }
    56.4102564103% {
        opacity: 1;
    }
    57.6923076923% {
        opacity: 1;
    }
    60.2564102564% {
        opacity: 0;
    }
    61.5384615385% {
        opacity: 0;
    }
    64.1025641026% {
        opacity: 1;
    }
    65.3846153846% {
        opacity: 1;
    }
    67.9487179487% {
        opacity: 0;
    }
    69.2307692308% {
        opacity: 0;
    }
    71.7948717949% {
        opacity: 1;
    }
    73.0769230769% {
        opacity: 1;
    }
    75.641025641% {
        opacity: 0;
    }
    76.9230769231% {
        opacity: 0;
    }
    79.4871794872% {
        opacity: 1;
    }
    80.7692307692% {
        opacity: 1;
    }
    83.3333333333% {
        opacity: 0;
    }
    84.6153846154% {
        opacity: 0;
    }
    87.1794871795% {
        opacity: 1;
    }
    88.4615384615% {
        opacity: 1;
    }
    91.0256410256% {
        opacity: 0;
    }
    92.3076923077% {
        opacity: 0;
    }
    94.8717948718% {
        opacity: 1;
    }
    96.1538461538% {
        opacity: 1;
    }
    98.7179487179% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
    0% {
        content: "Ø£";
    }
    7.6922076923% {
        content: "Ø£";
    }
    7.6923076923% {
        content: "ت";
    }
    15.3845153846% {
        content: "ت";
    }
    15.3846153846% {
        content: "ج";
    }
    23.0768230769% {
        content: "ج";
    }
    23.0769230769% {
        content: "Ø®";
    }
    30.7691307692% {
        content: "Ø®";
    }
    30.7692307692% {
        content: "Ø°";
    }
    38.4614384615% {
        content: "Ø°";
    }
    38.4615384615% {
        content: "ز";
    }
    46.1537461538% {
        content: "ز";
    }
    46.1538461538% {
        content: "Ø´";
    }
    53.8460538462% {
        content: "Ø´";
    }
    53.8461538462% {
        content: "ض";
    }
    61.5383615385% {
        content: "ض";
    }
    61.5384615385% {
        content: "ظ";
    }
    69.2306692308% {
        content: "ظ";
    }
    69.2307692308% {
        content: "غ";
    }
    76.9229769231% {
        content: "غ";
    }
    76.9230769231% {
        content: "Ù‚";
    }
    84.6152846154% {
        content: "Ù‚";
    }
    84.6153846154% {
        content: "Ù„";
    }
    92.3075923077% {
        content: "Ù„";
    }
    92.3076923077% {
        content: "Ù†";
    }
    99.9999% {
        content: "Ù†";
    }
}

@keyframes items-even {
    2.5641025641% {
        opacity: 1;
    }
    3.8461538462% {
        opacity: 1;
    }
    6.4102564103% {
        opacity: 0;
    }
    7.6923076923% {
        opacity: 0;
    }
    10.2564102564% {
        opacity: 1;
    }
    11.5384615385% {
        opacity: 1;
    }
    14.1025641026% {
        opacity: 0;
    }
    15.3846153846% {
        opacity: 0;
    }
    17.9487179487% {
        opacity: 1;
    }
    19.2307692308% {
        opacity: 1;
    }
    21.7948717949% {
        opacity: 0;
    }
    23.0769230769% {
        opacity: 0;
    }
    25.641025641% {
        opacity: 1;
    }
    26.9230769231% {
        opacity: 1;
    }
    29.4871794872% {
        opacity: 0;
    }
    30.7692307692% {
        opacity: 0;
    }
    33.3333333333% {
        opacity: 1;
    }
    34.6153846154% {
        opacity: 1;
    }
    37.1794871795% {
        opacity: 0;
    }
    38.4615384615% {
        opacity: 0;
    }
    41.0256410256% {
        opacity: 1;
    }
    42.3076923077% {
        opacity: 1;
    }
    44.8717948718% {
        opacity: 0;
    }
    46.1538461538% {
        opacity: 0;
    }
    48.7179487179% {
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    52.5641025641% {
        opacity: 0;
    }
    53.8461538462% {
        opacity: 0;
    }
    56.4102564103% {
        opacity: 1;
    }
    57.6923076923% {
        opacity: 1;
    }
    60.2564102564% {
        opacity: 0;
    }
    61.5384615385% {
        opacity: 0;
    }
    64.1025641026% {
        opacity: 1;
    }
    65.3846153846% {
        opacity: 1;
    }
    67.9487179487% {
        opacity: 0;
    }
    69.2307692308% {
        opacity: 0;
    }
    71.7948717949% {
        opacity: 1;
    }
    73.0769230769% {
        opacity: 1;
    }
    75.641025641% {
        opacity: 0;
    }
    76.9230769231% {
        opacity: 0;
    }
    79.4871794872% {
        opacity: 1;
    }
    80.7692307692% {
        opacity: 1;
    }
    83.3333333333% {
        opacity: 0;
    }
    84.6153846154% {
        opacity: 0;
    }
    87.1794871795% {
        opacity: 1;
    }
    88.4615384615% {
        opacity: 1;
    }
    91.0256410256% {
        opacity: 0;
    }
    92.3076923077% {
        opacity: 0;
    }
    94.8717948718% {
        opacity: 1;
    }
    96.1538461538% {
        opacity: 1;
    }
    98.7179487179% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
    0% {
        content: "ب";
    }
    7.6922076923% {
        content: "ب";
    }
    7.6923076923% {
        content: "Ø«";
    }
    15.3845153846% {
        content: "Ø«";
    }
    15.3846153846% {
        content: "Ø­";
    }
    23.0768230769% {
        content: "Ø­";
    }
    23.0769230769% {
        content: "د";
    }
    30.7691307692% {
        content: "د";
    }
    30.7692307692% {
        content: "ر";
    }
    38.4614384615% {
        content: "ر";
    }
    38.4615384615% {
        content: "س";
    }
    46.1537461538% {
        content: "س";
    }
    46.1538461538% {
        content: "ص";
    }
    53.8460538462% {
        content: "ص";
    }
    53.8461538462% {
        content: "Ø·";
    }
    61.5383615385% {
        content: "Ø·";
    }
    61.5384615385% {
        content: "ع";
    }
    69.2306692308% {
        content: "ع";
    }
    69.2307692308% {
        content: "ف";
    }
    76.9229769231% {
        content: "ف";
    }
    76.9230769231% {
        content: "Ùƒ";
    }
    84.6152846154% {
        content: "Ùƒ";
    }
    84.6153846154% {
        content: "Ù…";
    }
    92.3075923077% {
        content: "Ù…";
    }
    92.3076923077% {
        content: "هـ";
    }
    99.9999% {
        content: "هـ";
    }
}


/* link-hover */

.link-style-large {
    position: relative;
    background: transparent;
    display: block;
    overflow: hidden;
    width: 215px;
    height: 55px;
    text-align: center;
    line-height: 55px;
    font-size: 15px;
    font-weight: 500;
    border-radius: 5px;
    margin: 20px auto 0;
    transition: 0.7s;
    cursor: pointer;
}

.link-style-small {
    position: relative;
    background: transparent;
    display: block;
    overflow: hidden;
    width: 170px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    font-size: 15px;
    font-weight: 500;
    border-radius: 5px;
    margin: 20px auto 0;
    transition: 0.7s;
    cursor: pointer;
}

.link-style-small span,
.link-style-large span {
    position: relative;
    z-index: 9;
}

.link-style-small:hover,
.link-style-large:hover {
    color: #fff;
    transition: 0.7s;
}

.link-style-small:before,
.link-style-small:after,
.link-style-large:before,
.link-style-large:after {
    position: absolute;
    top: 50%;
    content: '';
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

.link-style-small:before,
.link-style-large:before {
    left: -20px;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.link-style-small:after,
.link-style-large:after {
    right: -20px;
    -webkit-transform: translate(50%, -50%);
    transform: translate(50%, -50%);
}

.link-style-small:hover:before,
.link-style-large:hover:before {
    -webkit-animation: criss-cross-left 0.8s both;
    animation: criss-cross-left 0.8s both;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
}

.link-style-small:hover:after,
.link-style-large:hover:after {
    -webkit-animation: criss-cross-right 0.8s both;
    animation: criss-cross-right 0.8s both;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
}

@-webkit-keyframes criss-cross-left {
    0% {
        left: -20px;
    }
    50% {
        left: 50%;
        width: 20px;
        height: 20px;
    }
    100% {
        left: 50%;
        width: 150px;
        height: 150px;
        z-index: 2;
    }
}

@keyframes criss-cross-left {
    0% {
        left: -20px;
    }
    50% {
        left: 50%;
        width: 20px;
        height: 20px;
    }
    100% {
        left: 50%;
        width: 220px;
        height: 220px;
        z-index: 2;
    }
}

@-webkit-keyframes criss-cross-right {
    0% {
        right: -20px;
    }
    50% {
        right: 50%;
        width: 20px;
        height: 20px;
    }
    100% {
        right: 50%;
        width: 220px;
        height: 220px;
        z-index: 2;
    }
}

@keyframes criss-cross-right {
    0% {
        right: -20px;
    }
    50% {
        right: 50%;
        width: 20px;
        height: 20px;
    }
    100% {
        right: 50%;
        width: 220px;
        height: 220px;
        z-index: 2;
    }
}

.eyes-link {
    width: 30px;
    height: 30px;
    border: 1px solid;
    display: block;
    margin: 0 auto;
    line-height: 30px;
    border-radius: 5px;
    transition: 0.5s;
}

.eyes-link:hover {
    color: #fff;
    transition: 0.5s;
}

.check-table .custom-control-label {
    width: 16px;
    height: 20px;
    background: #fff;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    border: 0;
}

.card-shadow {
    text-align: right;
    box-shadow: 0 0 0;
    margin-bottom: 25px;
    padding: 15px;
    border-radius: 5px;
    border: 1px solid #051537;
}

.activity-des {
    border: 0;
}

.card-shadow img {
    margin-left: 10px;
}

.card-shadow h4 {
    font-size: 20px;
    font-weight: 500;
}

.card-shadow p {
    color: #051537;
    font-size: 14px;
    font-weight: 500;
    line-height: 27px;
    float: left;
}


/* not found style */

.not-found {
    text-align: center;
    margin: 0 auto;
}

.not-found img {
    width: 500px;
    margin: 0 auto;
}

.not-found h1 {
    font-size: 25px;
}

.left-content .col-sm-6 {
    margin: 0 auto;
}

.edit-table {
    margin-top: 0;
}

.download-icon {
    text-align: left;
    position: absolute;
    left: 40px;
    margin-top: 5px;
    cursor: pointer;
}

.card-border {
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
    font-size: 15px;
    margin-bottom: 10px;
}

.test-icon {
    text-align: left;
    position: relative;
    left: 0;
    margin-top: 5px;
    cursor: pointer;
    float: left;
}

.news-image {
    width: 100%;
    max-height: 200px;
    overflow: hidden;
    margin-bottom: 15px;
    position: relative;
}

.video-section {
    position: relative;
}

.close-video {
    bottom: 60px;
}

@media(max-width: 600px) {
    .close-video {
        bottom: 10px;
    }
}

.news-image a {
    display: block;
}

.news-image a img {
    width: 50px;
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 9;
}

.news-image img {
    width: 100%;
}

.card-video {
    width: 100%;
    position: relative;
    border: 1px solid #efefef;
    margin-bottom: 40px;
    padding: 10px;
    border-radius: 10px;
}

.card-video .videoPoster:before {
    top: 40%;
}

.margin-b {
    margin-bottom: 0;
}

.margin-bb {
    margin-bottom: 20px;
}

.gj-datepicker-bootstrap [role=right-icon] button {
    position: absolute;
    left: 5px;
    height: 40px;
    line-height: 40px;
    top: 5px;
    background: transparent;
    border: 0;
}

.tooltip {
    font-family: "font-regular";
}


/* choose color */

#social-share {
    position: fixed;
    left: 20px;
    bottom: 20px;
}

#social-share ul.social-itens .btn-share,
#social-share div.social-open-menu .btn-share {
    position: relative;
    cursor: pointer;
    border-radius: 50%;
    color: white;
    line-height: 1;
    outline: 0;
    border: 0;
    margin-top: 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

#social-share ul.social-itens .btn-share:hover,
#social-share div.social-open-menu .btn-share:hover {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

#social-share ul.social-itens {
    list-style: none;
    text-decoration: none;
    text-align: center;
    position: relative;
    display: block;
    /* display: none; */
}

#social-share ul.social-itens .btn-share {
    width: 30px;
    height: 30px;
    /* transform: none; */
}

#social-share ul.social-itens .btn-share.red {
    background-color: red;
}

#social-share ul.social-itens .btn-share.black {
    background-color: #000;
}

#social-share ul.social-itens .btn-share.yellow {
    background-color: yellow;
}

#social-share ul.social-itens .btn-share.blue {
    background-color: blue;
}

#social-share ul.social-itens .btn-share.main-color {
    background-color: #061237;
}

#social-share ul.social-itens.open .btn-share {
    transform: scale(1);
    opacity: 1;
    /* transform: translate(0px, -15px); */
}

#social-share ul.social-itens li {
    position: relative;
}

#social-share ul.social-itens li .btn-share {
    transform: scale(0);
    opacity: 0;
}

#social-share ul.social-itens li:hover .btn-share-text {
    opacity: 1;
}

#social-share div.social-open-menu .btn-share {
    width: 60px;
    font-size: 30px;
    height: 60px;
    -webkit-animation: spin 4s linear infinite;
    -moz-animation: spin 4s linear infinite;
    animation: spin 4s linear infinite;
}

#social-share .social-itens.open .social-item-1,
#social-share .social-itens.open .social-item-1 .btn-share-text {
    transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.1s;
}

#social-share .social-itens.hidden .social-item-1,
#social-share .social-itens.open .social-item-1 .btn-share-text {
    transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.4s;
}

#social-share .social-itens.open .social-item-2,
#social-share .social-itens.open .social-item-2 .btn-share-text {
    transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.2s;
}

#social-share .social-itens.hidden .social-item-2,
#social-share .social-itens.open .social-item-2 .btn-share-text {
    transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.3s;
}

#social-share .social-itens.open .social-item-3,
#social-share .social-itens.open .social-item-3 .btn-share-text {
    transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.3s;
}

#social-share .social-itens.hidden .social-item-3,
#social-share .social-itens.open .social-item-3 .btn-share-text {
    transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.2s;
}

#social-share .social-itens.open .social-item-4,
#social-share .social-itens.open .social-item-4 .btn-share-text {
    transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.4s;
}

#social-share .social-itens.hidden .social-item-4,
#social-share .social-itens.open .social-item-4 .btn-share-text {
    transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.1s;
}

@-moz-keyframes spin {
    100% {
        -moz-transform: rotate(360deg);
    }
}

@-webkit-keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}


/* flash message */

@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro");
@-webkit-keyframes fade-in {
    from {
        visibility: hidden;
        opacity: 0;
    }
    to {
        visibility: visible;
        opacity: 1;
    }
}

@keyframes fade-in {
    from {
        visibility: hidden;
        opacity: 0;
    }
    to {
        visibility: visible;
        opacity: 1;
    }
}

@-webkit-keyframes slide-show {
    to {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes slide-show {
    to {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

.flash-click {
    padding: 15px 20px;
    border: 2px solid white;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    color: white;
}

.flash-click:hover,
.flash-click.is-active {
    color: #be93c5;
    background-color: white;
}

.bottom-right {
    position: fixed;
    z-index: 1000;
    display: flex;
    align-items: center;
    padding: 20px;
    color: #fff;
    line-height: 1.3;
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.35);
    max-width: 350px;
    margin: 20px;
    border-radius: 10px;
    bottom: 0;
    right: 0;
    -webkit-transform: translateX(420px);
    transform: translateX(420px);
}

@-webkit-keyframes slide-in-right {
    to {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes slide-in-right {
    to {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

.bottom-right.do-show {
    animation: slide-in-right 1s ease-in-out forwards, slide-in-right 1s ease-in-out reverse forwards 3s;
}

.bottom-right[data-notification-status="notice"] {
    background-color: #29B6F6;
}

.bottom-right[data-notification-status="notice"]:before {
    content: '';
    display: block;
    width: 30px;
    height: 30px;
    min-width: 30px;
    margin-right: 20px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.984c4.407 0 8.016 3.609 8.016 8.016 0 4.406-3.608 8.016-8.016 8.016S3.984 16.407 3.984 12 7.593 3.984 12 3.984m0-2C6.478 1.984 1.984 6.477 1.984 12c0 5.521 4.493 10.016 10.016 10.016S22.016 17.522 22.016 12c0-5.523-4.495-10.016-10.016-10.016zm0 2c4.407 0 8.016 3.609 8.016' fill='%23077CB2'/%3E%3Cpath d='M11.016,6.984V9h1.968V6.984H11.016z M11.016,17.016h1.968v-6h-1.968V17.016z' fill='%23077CB2'/%3E%3C/svg%3E") center/cover no-repeat;
}

.bottom-right[data-notification-status="warning"] {
    background-color: #FFCA28;
}

.bottom-right[data-notification-status="warning"]:before {
    content: '';
    display: block;
    width: 30px;
    height: 30px;
    min-width: 30px;
    margin-right: 20px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.984c4.407 0 8.016 3.609 8.016 8.016 0 4.406-3.608 8.016-8.016 8.016S3.984 16.407 3.984 12 7.593 3.984 12 3.984m0-2C6.478 1.984 1.984 6.477 1.984 12c0 5.521 4.493 10.016 10.016 10.016S22.016 17.522 22.016 12c0-5.523-4.495-10.016-10.016-10.016zm0 2c4.407 0 8.016 3.609 8.016' fill='%23C19100'/%3E%3Cpath d='M11.016,17.016h1.968V15h-1.968V17.016z M11.016,6.983v6.001h1.968V6.983H11.016z' fill='%23C19100'/%3E%3C/svg%3E") center/cover no-repeat;
}

.bottom-right[data-notification-status="error"] {
    background-color: #EF5350;
}

.bottom-right[data-notification-status="error"]:before {
    content: '';
    display: block;
    width: 30px;
    height: 30px;
    min-width: 30px;
    margin-right: 20px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.984c4.407 0 8.016 3.609 8.016 8.016 0 4.406-3.608 8.016-8.016 8.016S3.984 16.407 3.984 12 7.593 3.984 12 3.984m0-2C6.478 1.984 1.984 6.477 1.984 12c0 5.521 4.493 10.016 10.016 10.016S22.016 17.522 22.016 12c0-5.523-4.495-10.016-10.016-10.016zm0 2c4.407 0 8.016 3.609 8.016' fill='%23C71612'/%3E%3Cpath d='M13.406,12l2.578,2.578l-1.406,1.406L12,13.406l-2.578,2.578l-1.406-1.406L10.594,12L8.016,9.421l1.406-1.405L12,10.593 l2.578-2.577l1.406,1.405L13.406,12z' fill='%23C71612'/%3E%3C/svg%3E") center/cover no-repeat;
}

.bottom-right[data-notification-status="question"] {
    background-color: #8D6E63;
}

.bottom-right[data-notification-status="question"]:before {
    content: '';
    display: block;
    width: 30px;
    height: 30px;
    min-width: 30px;
    margin-right: 20px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.984c4.407 0 8.016 3.609 8.016 8.016 0 4.406-3.608 8.016-8.016 8.016S3.984 16.407 3.984 12 7.593 3.984 12 3.984m0-2C6.478 1.984 1.984 6.477 1.984 12c0 5.521 4.493 10.016 10.016 10.016S22.016 17.522 22.016 12c0-5.523-4.495-10.016-10.016-10.016zm0 2c4.407 0 8.016 3.609 8.016' fill='%23513F39'/%3E%3Cpath d='M12.001,6.314h-0.002c-1.996,0-3.609,1.614-3.609,3.609h1.784c0-0.977,0.85-1.784,1.826-1.784  c0.977,0,1.827,0.807,1.827,1.784c0,1.826-2.718,1.614-2.718,4.544h1.784c0-2.038,2.717-2.294,2.717-4.544  C15.609,7.928,13.997,6.314,12.001,6.314z M11.109,17.186h1.784v-1.826h-1.784V17.186z' fill='%23513F39'/%3E%3C/svg%3E") center/cover no-repeat;
}

.bottom-right[data-notification-status="plain"] {
    background-color: #333;
}

.hidden {
    display: none;
}

.all-content .main-content .all-book-section {
    width: calc(100% - 25%);
    padding: 40px 20px 20px;
    position: relative;
    overflow: hidden;
    height: auto;
}

.all-content .main-content .all-book-section-scroll {
    width: 100%;
    padding: 20px 20px 20px;
    position: relative;
    overflow: scroll;
    max-height: 550px;
}

.back-link {
    width: 40px;
    height: 40px;
    border: 1px solid #061237;
    display: block;
    margin: 0 auto;
    line-height: 40px;
    border-radius: 5px;
    transition: 0.5s;
    position: absolute;
    left: 20px;
    top: 20px;
    text-align: center;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    z-index: 9;
    background: #061237;
}

.back-link:hover {
    color: #fff;
    transition: 0.5s;
    background: #061237;
}

.the-video p {
    font-size: 20px;
    color: #061237;
    line-height: 20px;
    margin-top: 10px;
    margin-bottom: 30px;
    padding: 0;
    text-align: center;
}

.table img {
    width: 60px;
    border-radius: 5px;
}


/* responsive  */

@media(min-width: 1900px) {
    .all-content .main-content {
        max-height: 700px;
    }
    .all-content .main-content .all-book-section-scroll {
        max-height: 1000px;
    }
    .all-content .main-content {
        height: 700px;
    }
}

@media(max-width: 1100px) {
    .all-content .main-content .right-menu {
        width: 30%;
    }
    .all-content .main-content .left-content {
        width: calc(100% - 30%);
    }
    .tables-first .nav.nav-pills .nav-item {
        width: 45% !important;
        margin-bottom: 10px;
    }
    #social-share {
        z-index: 99;
    }
}

@media(max-width: 990px) {
    .all-content .main-content .left-content {
        width: 100%;
    }
    .all-question-result {
        width: 100% !important;
    }
    #social-share {
        position: fixed;
        left: 5px;
        bottom: 60px;
    }
    .tables-first .nav.nav-pills .nav-item {
        width: 100% !important;
    }
}

.full-screen {
    position: fixed;
    left: 35px;
    font-size: 25px;
    color: #061237;
    z-index: 99;
    cursor: pointer;
}

.image-zoom-available {
    cursor: zoom-in;
}

.image-zoom-available.is-active {
    cursor: none;
}

.fancy-zoom {
    cursor: zoom-in;
    position: absolute;
    top: 20px;
    left: 10px;
    color: #000;
    width: 40px;
    height: 40px;
    background: #ffff;
    z-index: 9;
    text-align: center;
    line-height: 40px;
    border-radius: 50px;
    font-size: 18px;
    box-shadow: 0 0 10px 0 #888;
}

.fancy-zoom:hover {
    color: #000;
}

.zoom-in {
    position: absolute;
    top: 60px;
    left: 50px;
    right: 0;
    margin: 0 auto;
    width: 35px;
    height: 35px;
    background: #FFF;
    font-size: 30px;
    line-height: 35px;
    border: 0;
    / display: inline-block;
    / border-radius: 5px;
}

.zoom-out {
    position: absolute;
    top: 60px;
    left: 0;
    right: 50px;
    margin: 0 auto;
    width: 35px;
    height: 35px;
    background: #FFF;
    font-size: 30px;
    line-height: 35px;
    border: 0;
    / display: inline-block;
    / border-radius: 5px;
}

.fancybox-inner {
    width: 100% !important;
    height: 100% !important;
}

.fancybox-opened {
    left: 0 !important;
    right: 0 !important;
    margin: 0 auto !important;
}

.chat-answer {
    background: #e6ecff;
}

.plan_lesson_name {
    color: #061237;
    border-bottom: 1px solid #aaa;
    width: 100%;
    display: block;
    padding-bottom: 10px;
}

.plan_lesson_name:last-of-type {
    margin-bottom: 0;
    border-bottom: 0;
}


/* --------- AwaDy ---------*/

.all-tables {
    overflow: auto;
}

.all-tables .edit-table {
    position: relative;
}

.all-tables .edit-table::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    border-radius: 0px;
}

.all-tables .edit-table::-webkit-scrollbar-track {
    box-shadow: inset 0 0 0;
    border: 1px solid #b7dcff;
}

.all-tables .edit-table::-webkit-scrollbar-thumb {
    background-color: #b7dcff;
    outline: 1px solid #b7dcff;
}

.all-content .main-content {
    height: 550px;
}

.card-shadow h4 {
    float: right;
}

.card-shadow h4+a {
    float: left;
}

.card-shadow {
    overflow: hidden
}


/* ============= Custom Section Info AwaDy ============= */

.card-shadow.custom_class_info {}

.card-shadow.custom_class_info h3.main-title {
    color: #061237;
    font-weight: bold;
}

.card-shadow.custom_class_info h3.main-title svg {
    color: #aeaeae;
    margin-left: 5px;
}

.card-shadow.custom_class_info .activity-des {}

.card-shadow.custom_class_info .activity-des .card-shadow {}

.card-shadow.custom_class_info .activity-des .card-shadow img {}

.card-shadow.custom_class_info .activity-des .card-shadow img span {}

.card-shadow.custom_class_info .activity-des .card-shadow h4 {
    display: block;
    float: none;
}

.card-shadow.custom_class_info .activity-des .card-shadow h4 svg {
    margin-left: 5px;
    color: #aeaeae;
}

.card-shadow.custom_class_info .activity-des .card-shadow p {
    padding-right: 30px;
    margin: 15px 0;
}

.activity-des .card-shadow p {
    float: none;
}


/* DatePicker Style Awady*/

.datepicker.datepicker-dropdown {
    background-color: #fff;
    width: 300px;
    top: 350px !important;
    padding: 15px;
    box-shadow: 0px 0px 10px #ccc;
}

table.table-condensed {
    width: 100%;
    border-radius: 6px;
    overflow: hidden;
}

thead {
    background-color: #b7dcff;
    color: #051537;
}

table.table-condensed thead th {
    text-align: center;
    border: 1px solid #fff;
}

table.table-condensed tbody tr {
    text-align: center;
    border-bottom: 1px solid #061237;
}

table.table-condensed tbody tr td {
    border: 1px solid #aeaeae;
    border-left: 0;
    padding: 7px;
}

table.table-condensed tbody {
    background-color: #efefef;
}

.all-content .main-content {
    height: auto;
}

.edit-table form {
    overflow: hidden;
}

.link-style-small:hover span {
    color: #fff;
}

.credit {
    text-align: center;
    width: 100%;
    color: #061237;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 0;
    margin-top: 10px;
}

.fixed-top {
    z-index: 999999999999;
}

#accept_reject {}

#accept_reject label {
    padding: 0 30px;
    margin: 0;
}

#accept_reject input {}

label.label-control.custom-control-label:after {
    right: 0;
    border-radius: 50%;
    width: 20px;
    height: 20px;
}

label.label-control.custom-control-label:before {
    right: 0;
    width: 20px;
    height: 20px;
}

.custom-control.custom-radio {
    width: 46%;
    display: inline-block;
}

.fixed-image {
    width: 20%;
    position: fixed;
    left: 0;
    bottom: 15px;
    transform: rotate(20deg);
    visibility: hidden;
    opacity: 0;
    transition: 0.5s;
    z-index: -1;
}

.fixed-image.show {
    visibility: visible;
    opacity: 0.2;
    transition: 0.5s;
}

.fixed-image img {
    width: 100%;
}

.notification-button button {
    background: transparent !important;
    border: 0 !important;
    outline: none !important;
    cursor: pointer !important;
}