Base Directory:
/home/ecedu/public_html/new/assets/css
.bg-image {
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
.recentcomments a {
display: inline !important;
padding: 0 !important;
margin: 0 !important;
}
body.custom-background {
background-position: left top;
background-size: auto;
background-repeat: repeat;
background-attachment: fixed;
}
.font-family h1, .font-family h2, .font-family h3, .font-family h4, .font-family h5, .font-family h6, .font-family .h1, .font-family .h2, .font-family .h3, .font-family .h4, .font-family .h5, .font-family .h6, .font-family .navbar-nav, .menu-mobile a, .u-breadcrumb .breadcrumb-item, .post-content .tags-list li:first-child {
font-family: 'Roboto', sans-serif;
}
body {
font-family: 'Open Sans', sans-serif;
}
.full-width {
background: #ffffff !important;
}
.dark-skin.full-width {
background: #1b1b1b !important;
}
.primary {
color: #0080C0;/*#6610f2*/
}
.center-backline:before, .center-backline-lg:before, .title-arrow:before {
background-color: #0080C0 !important;
}
.bg-primary, .progress-bar, .badge-primary {
background-color: #0080C0 !important;
}
.box-title:before {
border-top-color: #0080C0;
}
.badge-primary {
color: #ffffff !important;
}
.fa-stack-sea {
border: #0080C0 3px solid;
}
.form-control:focus {
border-color: #0080C0;/*#0080C0*/
}
.hover-a:hover .fa-play-circle {
background: #0080C0;/*#0080C0*/
border: #0080C0 2px solid;
}
.page-link, .btn-link {
color: #0080C0;/*#0080C0*/
}
a:hover {
color: #0080C0;
}
h1 > a:hover, h2 > a:hover, h3 > a:hover, h4 > a:hover, h5 > a:hover, h6 > a:hover, .h1 > a:hover, .h2 > a:hover, .h3 > a:hover, .h4 > a:hover, .h5 > a:hover, .h6 > a:hover {
color: #0080C0;
}
.hover-a:hover h1 > a, .hover-a:hover h2 > a, .hover-a:hover h3 > a, .hover-a:hover h4 > a, .hover-a:hover h5 > a, .hover-a:hover h6 > a, .hover-a:hover .h1 > a, .hover-a:hover .h2 > a, .hover-a:hover .h3 > a, .hover-a:hover .h4 > a, .hover-a:hover .h5 > a, .hover-a:hover .h6 > a, .hover-a:hover p > a, .prev-post-start a:hover, .next-post-end a:hover {
color: #0080C0;
}
.nav-tabs .nav-link.active, .sidenav-menu .dropdown a.show {
color: #0080C0;
}
.nav-tabs .nav-item.show .nav-link {
color: #0080C0;
}
.navbar-nav .dropdown-item:hover, #main-menu .vertical-tabs .nav-tabs .nav-link.active, .dropdown-item.active, .dropdown-item:active, a {
color: #0080C0;
}
.navbar-light .navbar-nav .show > .nav-link, .navbar-light .navbar-nav .active > .nav-link, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus, .navbar-nav .dropdown-item:hover, .text-primary {
color: #0080C0 !important;
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link, .custom-range::-ms-thumb, .custom-range::-moz-range-thumb, .custom-range::-webkit-slider-thumb, .custom-radio .custom-control-input:checked ~ .custom-control-label::before, .custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before, .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before, .custom-control-input:checked ~ .custom-control-label::before, .dropdown-item.active, .dropdown-item:active {
background-color: #0080C0;
}
.dropdown-menu.mega .container, .dropdown-menu, .border-primary {
border-color: #0080C0 !important;
}
.list-group-item.active, .btn-outline-primary {
color: #0080C0;
border-color: #0080C0;
}
.btn-check:focus + .btn-primary, .btn-primary:focus, .btn-primary:hover, .btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active, .show > .btn-outline-primary.dropdown-toggle, .page-link:hover, .page-item.active .page-link, .btn-primary, .btn-outline-primary:hover, .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle {
background-color: #0080C0;
border-color: #0080C0;
}
.btn-check:focus + .btn-primary, .btn-primary:focus, .btn-primary:hover {
opacity: .98;
}
.page-link:hover {
color: #fff;
}
.big-nav .list-group-item.active {
color: #ffffff;
background-color: #0080C0;
border-color: #0080C0;
}
.big-nav.carousel-indicators li:hover {
background-color: #0080C0;
color: #ffffff;
}
.hover-a li:hover a {
color: #0080C0;
}
.hover-a:hover a.h1, .hover-a:hover a.h2, .hover-a:hover a.h3, .hover-a:hover a.h4, .hover-a:hover a.h5, .hover-a:hover a.h6 {
color: #0080C0;
}
li:hover a.h5 {
color: #0080C0;
}
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
color: #ffffff;
background-color: #0080C0;
border-color: #0080C0;
}
.sidetabs .nav-link.active:hover {
border-color: #0080C0;
}
.card-list li:hover a {
color: #0080C0;
}
.nav-block-link li a.nav-link.active, .nav-block-link1 li a.nav-link.active, .nav-block-link2 li a.nav-link.active, .nav-block-link3 li a.nav-link.active, .nav-block-link4 li a.nav-link.active, .nav-block-link5 li a.nav-link.active, .nav-block-link6 li a.nav-link.active, .nav-block-link7 li a.nav-link.active, .nav-block-more li a.nav-link.active {
color: #0080C0 !important;
background-color: transparent;
}
.nav-block-link li a.nav-link.active, .nav-block-link li a.nav-link:hover, .nav-block-link1 li a.nav-link.active, .nav-block-link1 li a.nav-link:hover, .nav-block-link2 li a.nav-link.active, .nav-block-link2 li a.nav-link:hover, .nav-block-link3 li a.nav-link.active, .nav-block-link3 li a.nav-link:hover, .nav-block-link4 li a.nav-link.active, .nav-block-link4 li a.nav-link:hover, .nav-block-link5 li a.nav-link.active, .nav-block-link5 li a.nav-link:hover, .nav-block-link6 li a.nav-link.active, .nav-block-link6 li a.nav-link:hover, .nav-block-link7 li a.nav-link.active, .nav-block-link7 li a.nav-link:hover, .nav-block-more li a.nav-link.active, .nav-block-more li a.nav-link:hover {
color: #0080C0;
}
.widget ol li a:hover, .widget ul li a:hover {
color: #0080C0;
}
.owl-carousel button.owl-dot.active {
background: #0080C0;
}
.suggestion-box {
border-top: 4px solid #0080C0;
}
.side-link li a:hover, .side-link li a.active, .sidebar-link li a:hover, .sidebar-link li a.active {
background-color: transparent;
color: #0080C0;
}
.side-link li ul li a:hover, .sidebar-link li ul li a:hover {
color: #0080C0;
}
.side-link li a.caret-collapse, .sidebar-link li a.caret-collapse {
color: #0080C0;
}
.side-link li a.caret-collapse.collapsed:hover, .sidebar-link li a.caret-collapse.collapsed:hover {
color: #0080C0;
}
.post-number li:hover a::before {
color: #0080C0 !important;
}
.timeline-post > li a .timeline-date:hover, .timeline-post > li a .timeline-title:hover {
color: #0080C0 !important;
}
.hover-mode .main-nav li:hover > a {
color: #0080C0;
}
.sidenav-menu li.show > a.dropdown-toggle, .navbar-light .nav-item:hover > .nav-link {
color: #0080C0;
}
.timeline-post > li:hover:before {
background: #0080C0 !important;
}
.side-link li a.caret-collapse.collapsed, .sidebar-link li a.caret-collapse.collapsed {
color: #161616;
}
.bg-secondary {
background-color: #000000 !important;
}
.main-menu.navbar-dark .navbar-nav > .nav-item.active, .main-menu.navbar-dark .navbar-nav > .nav-item:hover {
background: #0080C0 !important;
}
.btn-secondary {
color: #ffffff;
background-color: #000000;
border-color: #000000;
}
.btn-secondary:hover {
background-color: #000000;
border-color: #000000;
}
.btn-secondary.disabled, .btn-secondary:disabled {
background-color: #000000;
border-color: #000000;
}
.btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active,
.show > .btn-secondary.dropdown-toggle {
background-color: #000000;
border-color: #000000;
}
.btn-outline-secondary {
color: #000000;
border-color: #000000;
}
.btn-outline-secondary:hover {
background-color: #000000;
border-color: #000000;
}
.btn-outline-secondary.disabled, .btn-outline-secondary:disabled {
color: #000000;
}
.btn-outline-secondary:not(:disabled):not(.disabled):active, .btn-outline-secondary:not(:disabled):not(.disabled).active,
.show > .btn-outline-secondary.dropdown-toggle {
background-color: #000000;
border-color: #000000;
}
.badge-secondary {
color: #ffffff;
background-color: #000000;
}
.badge-secondary[href]:hover, .badge-secondary[href]:focus {
color: #ffffff;
background-color: #000000;
}
.alert-secondary .alert-link {
color: #000000;
}
.list-group-item-secondary {
color: #000000;
}
.list-group-item-secondary.list-group-item-action:hover, .list-group-item-secondary.list-group-item-action:focus {
color: #000000;
}
.list-group-item-secondary.list-group-item-action.active {
background-color: #000000;
border-color: #000000;
}
a.bg-secondary:hover, a.bg-secondary:focus,
button.bg-secondary:hover,
button.bg-secondary:focus {
background-color: #000000 !important;
}
.border-secondary {
border-color: #000000 !important;
}
.text-secondary {
color: #000000 !important;
}
.main-menu.navbar-dark .hover-a:hover .h1 > a, .main-menu.navbar-dark .hover-a:hover .h2 > a, .main-menu.navbar-dark .hover-a:hover .h3 > a, .main-menu.navbar-dark .hover-a:hover .h4 > a, .main-menu.navbar-dark .hover-a:hover .h5 > a, .main-menu.navbar-dark .hover-a:hover .h6 > a, .main-menu.navbar-dark .hover-a:hover h1 > a, .main-menu.navbar-dark .hover-a:hover h2 > a, .main-menu.navbar-dark .hover-a:hover h3 > a, .main-menu.navbar-dark .hover-a:hover h4 > a, .main-menu.navbar-dark .hover-a:hover h5 > a, .main-menu.navbar-dark .hover-a:hover h6 > a {
color: #0080C0 !important;
}
a.text-secondary:hover, a.text-secondary:focus {
color: #000000 !important;
}
.main-menu.navbar-dark .navbar-nav .nav-item .dropdown-menu .dropdown-item.active, .main-menu.navbar-dark .navbar-nav .nav-item .dropdown-menu .dropdown-item:focus, .main-menu.navbar-dark .navbar-nav .nav-item .dropdown-menu .dropdown-item:hover {
color: #0080C0 !important;
}
.dark-skin .hover-a:hover .h1 > a, .dark-skin .hover-a:hover .h2 > a, .dark-skin .hover-a:hover .h3 > a, .dark-skin .hover-a:hover .h4 > a, .dark-skin .hover-a:hover .h5 > a, .dark-skin .hover-a:hover .h6 > a, .dark-skin .hover-a:hover h1 > a, .dark-skin .hover-a:hover h2 > a, .dark-skin .hover-a:hover h3 > a, .dark-skin .hover-a:hover h4 > a, .dark-skin .hover-a:hover h5 > a, .dark-skin .hover-a:hover h6 > a {
color: #0080C0 !important;
}
.dark-skin .side-link li a.active, .dark-skin .side-link li a.caret-collapse.collapsed.active, .dark-skin .side-link li a.caret-collapse.collapsed:hover, .dark-skin .side-link li a:hover, .dark-skin .sidebar-link li a.active, .dark-skin .sidebar-link li a.caret-collapse.collapsed.active, .dark-skin .sidebar-link li a.caret-collapse.collapsed:hover, .dark-skin .sidebar-link li a:hover {
color: #0080C0;
}
.next-post-right a:hover, .prev-post-left a:hover, .footer-dark a:hover, .layout-dark a:hover, .dark-skin .next-post-right > a:hover, .dark-skin .prev-post-left > a:hover, .footer-dark a.btn:hover, .dark-skin a.btn-outline-light:hover strong {
color: #0080C0;
}
.footer-dark .widget ul li a:hover, .footer-dark .widget ol li a:hover {
color: #0080C0;
}
.btn-primary.disabled, .btn-primary:disabled, .btn-primary:hover {
background-color: #0080C0;
border-color: #0080C0;
}
.post-page blockquote, .u-blockquote, .wp-block-quote {
border-left: 3px solid #0080C0;
}
.tags-links a:hover {
background-color: #0080C0;
}
.bg-custom-footer {
background-color: #31b1f9;
}
#showbacktop.bg-navcustom {
background: #31b1f9 !important;
}
.main-menu.nav-custom.navbar-dark .dropdown-menu h1 > a, .main-menu.nav-custom.navbar-dark .dropdown-menu h2 > a, .main-menu.nav-custom.navbar-dark .dropdown-menu h3 > a, .main-menu.nav-custom.navbar-dark h4 > a, .main-menu.nav-custom.navbar-dark h5 > a, .main-menu.nav-custom.navbar-dark .dropdown-menu h6 > a, .main-menu.nav-custom.navbar-dark .dropdown-menu .h1 > a, .main-menu.nav-custom.navbar-dark .dropdown-menu .h2 > a, .main-menu.nav-custom.navbar-dark .dropdown-menu .h3 > a, .main-menu.nav-custom.navbar-dark .dropdown-menu .h4 > a, .main-menu.nav-custom.navbar-dark .dropdown-menu .h5 > a, .main-menu.nav-custom.navbar-dark .dropdown-menu .h6 > a {
color: #23282d !important;
}
.main-menu.nav-custom.navbar-dark a.dropdown-item {
color: #23282d !important;
}
.main-menu.nav-custom.navbar-dark .navbar-nav .nav-item .dropdown-menu {
background-color: #fff;
}
.main-menu.nav-custom.navbar-dark .navbar-nav .nav-item .dropdown-menu .dropdown-item:hover, .main-menu.nav-custom.navbar-dark .navbar-nav .nav-item .dropdown-menu .dropdown-item:focus, .main-menu.nav-custom.navbar-dark .navbar-nav .nav-item .dropdown-menu .dropdown-item.active {
background: rgb(255, 255, 255);
}
.nav-custom.navbar-dark .vertical-tabs {
background: #f8f8f8;
border-color: #f8f8f8;
}
.nav-custom.main-menu.navbar-dark .navbar-nav .vertical-tabs .nav-tabs .nav-link {
border-color: #f8f8f8;
}
.nav-custom.main-menu.navbar-dark .vertical-tabs a {
color: #495057 !important;
}
.main-menu.nav-custom.navbar-dark .navbar-nav .vertical-tabs .nav-tabs .nav-link.active, .main-menu.nav-custom.navbar-dark .navbar-nav .vertical-tabs .nav-tabs .nav-link:hover {
border-color: #fff;
background-color: #fff !important;
}
.bg-navcustom {
background: #31b1f9 !important;
}
.taxonomy-description {
margin-left: auto;
margin-right: auto;
max-width: 80%;
text-align: center;
}
.mobile-nav-custom img {
max-width: 200px
}
.wp-block-embed.is-type-video {
width: 100%;
}
.wp-block-embed iframe {
max-width: 100%;
}
.wp-block-table table {
border: #dee2e6 1px solid;
}
.wp-block-table table tr, .wp-block-table table th, .wp-block-table table td {
border: #dee2e6 1px solid;
}
.post-content img {
height: auto;
}
@media (min-width: 992px) {
#showbacktop.bg-navcustom.is-visible {
background: #31b1f9 !important;
}
.nav-custom.navbar-dark .hover-mode li:hover > a {
background: #fff !important;
}
.mobile-nav-custom, .mobile-nav-custom img {
max-width: 0;
display: none;
}
.post-content .wp-block-embed {
padding-bottom: 46.25%;
}
}
@media (min-width: 992px) {
.main-menu.navbar-dark .hover-mode .main-nav > li:hover > a, .main-menu.navbar-dark .hover-mode .main-nav > li > a.active {
background-color: #0080C0 !important;
}
.main-menu.navbar-dark .hover-mode .main-nav li:hover > a {
color: #0080C0 !important;
}
.main-menu.navbar-dark .hover-mode .main-nav > li:hover > a {
color: #fff !important;
}
.logo-full .main-logo img {
max-width: 25rem;
}
.search-top-right, .social-top-left {
top: 50%;
margin-top: -23px;
position: absolute;
}
#showbacktop .logo-showbacktop.still-show {
display: block;
}
#showbacktop .logo-showbacktop.still-show img {
max-height: 2.3rem;
margin-right: 1rem;
display: block;
}
#showbacktop.is-visible .logo-showbacktop.still-show {
display: none;
height: 0;
}
}
@media (min-width: 768px) {
.grid-six .image {
width: 70%;
}
.grid-six .caption {
position: absolute;
width: 50%;
top: 50%;
right: 0;
padding: 2rem;
transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
}
.six-box-box {
padding-left: .875rem;
padding-right: .875rem
}
@media (max-width: 991.98px) {
.admin-bar .mobile-sticky.is-sticky {
top: 30px;
z-index: 1000;
}
}
@media (max-width: 400px) {
.top-space {
top: 20%;
}
}
/* ================================================================
1. (Light Theme)
================================================================= */
:root {
--bg-body: #ffffff;
--bg-nav: #ffffff;
--bg-card: #F0F0F0;
--bg-dark-card: #1b1b1b;
--text-primary: #2c3e50;
--text-secondary: #000000;
--text-muted: #6c757d;
--clr-main: #0080C0;
--border-light: #e0dfdf;
--btn-bg: #333333;
--btn-text: #f0f0f0;
--bs-primary: #0080C0;
}
/* ================================================================
2. (Dark Theme)
================================================================= */
.dark-mode {
--bg-body: #242526;
--bg-nav: #242526;
--bg-card: #242526;
--bg-dark-card: #1b1b1b;
--text-primary: #e4e6eb;
--text-secondary: #c9ccd1;
--text-muted: #8b929a;
--clr-main: #0080C0;
--border-light: #3a3b3c;
--btn-bg: #3a3b3c;
--btn-text: #e4e6eb;
--bs-body-bg: #242526;
--bs-body-color: #e4e6eb;
--bs-primary: #0080C0;
}
body {
background-color: var(--bg-body);
color: var(--text-primary);
font-family: "Open Sans", sans-serif;
transition: background-color .3s, color .3s;
}
html {
background: var(--bg-body);
}
.full-width {
background: var(--bg-card) !important;
}
.dark-skin.full-width {
background: var(--bg-dark-card) !important;
}
.center-backline:before,
.center-backline-lg:before,
.title-arrow:before,
.bg-primary,
.progress-bar,
.badge-primary {
background-color: var(--clr-main) !important;
}
.badge-primary {
color: #fff !important;
}
.fa-stack-sea {
border: var(--clr-main) 3px solid;
}
.form-control:focus {
border-color: var(--clr-main);
}
.page-link,
.btn-link {
color: var(--clr-main);
}
a:hover,
h1 > a:hover, h2 > a:hover, h3 > a:hover,
h4 > a:hover, h5 > a:hover, h6 > a:hover,
.hover-a:hover h1 > a, .hover-a:hover h2 > a, .hover-a:hover h3 > a {
color: var(--clr-main);
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
color: #fff;
background-color: var(--clr-main);
border-color: var(--clr-main);
}
.btn-submit,
.btn-primary {
background: var(--btn-bg);
border-color: var(--btn-bg);
color: var(--btn-text);
transition: background-color .3s, color .3s, border-color .3s;
}
.btn-submit:hover,
.btn-primary:hover {
opacity: .98;
}
.border-primary {
border-color: var(--clr-main) !important;
}
.list-group-item.active,
.btn-outline-primary {
color: var(--clr-main);
border-color: var(--clr-main);
}
.btn-outline-primary:hover,
.page-item.active .page-link,
.page-link:hover {
background-color: var(--clr-main);
border-color: var(--clr-main);
color: #fff;
}
.dark-mode .full-width,
.dark-mode .container,
.dark-mode main,
.dark-mode .bg-image {
background: var(--bg-body) !important;
}
.dark-mode,
.dark-mode html,
.dark-mode body,
.dark-mode .page-wrapper,
.dark-mode .site,
.dark-mode .wrapper,
.dark-mode .full-width,
.dark-mode .container-fluid {
background: var(--bg-body) !important;
}
.dark-mode .container,
.dark-mode .container-lg,
.dark-mode .container-md,
.dark-mode .container-sm,
.dark-mode .container-xl {
background: transparent !important;
}
.card,
.table,
.btn,
.form-control {
transition: background-color .3s, color .3s, border-color .3s;
}
.image-box {
height: 238px;
}
.x-card {
height: 100px;
}
@media (max-width: 730px) {
.image-box {
height: 150px;
}
.x-card {
height: 80px;
}
}
#sid-menu .navbar-nav li a {
font-weight: 500;
padding: 10px 16px;
color: var(--text-primary);
}
#sid-menu .navbar-nav .dropdown-menu {
border-radius: 0;
border: none;
margin-top: 12px;
box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}
#sid-menu .dropdown-toggle::after {
content: " ▾";
font-size: 10px;
margin-left: 4px;
}
#sid-menu .dropdown-toggle1::after {
content: "";
font-size: 10px;
margin-left: 4px;
}
@media (max-width: 991.98px) {
#sid-menu .accordion-button {
font-weight: bold;
}
#sid-menu .accordion-button::after {
background-image: none;
font-size: 20px;
float: right;
}
#sid-menu .accordion-button-arrow::after {
content: " ▾";
}
#sid-menu .accordion-button-arrow:not(.collapsed)::after {
content: " ▴";
}
#sid-menu .accordion-button-arrow-1::after {
content: "";
}
#sid-menu .accordion-button-arrow-1:not(.collapsed)::after {
content: "";
}
#sid-menu .accordion-body {
padding-left: 1.5rem;
margin-bottom: 0.5rem;
}
#sid-menu .accordion-item a.accordion-button {
display: block;
text-decoration: none;
font-weight: normal;
color: var(--text-primary);
}
#sid-menu .accordion-item a.accordion-button:hover {
text-decoration: underline;
}
}
#start-main .nav-link,
#start-main .dropdown-menu,
#start-main .dropdown-item {
background-color: var(--bg-nav) !important;
color: var(--text-primary) !important;
}
.sidenav-menu .accordion-item,
.sidenav-menu .accordion-button,
.sidenav-menu .accordion-body {
background-color: var(--bg-nav) !important;
}
.sidenav-menu .accordion-body .accordion-item,
.sidenav-menu .accordion-body .accordion-button {
background-color: var(--bg-nav) !important;
}
#start-main .nav-link,
#start-main .dropdown-item,
.sidenav-menu .accordion-item,
.sidenav-menu .accordion-button,
.sidenav-menu .accordion-body {
transition: background-color .3s;
}
#start-main .nav-link:hover,
#start-main .dropdown-item:hover,
.sidenav-menu .accordion-button:hover {
color: var(--clr-main);
}
:root.dark-mode #start-main .nav-link,
:root.dark-mode #start-main .dropdown-menu,
:root.dark-mode #start-main .dropdown-item,
:root.dark-mode .sidenav-menu .accordion-item,
:root.dark-mode .sidenav-menu .accordion-button,
:root.dark-mode .sidenav-menu .accordion-body {
background-color: var(--bg-nav) !important;
}
.logo-sidenav {
position: sticky;
top: 0;
background-color: var(--bg-nav);
z-index: 1000000000;
padding: 10px 0;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.sidenav-menu {
overflow-y: auto;
max-height: 80vh;
}
.comment-section {
max-width: 800px;
margin: 2rem auto;
padding: 20px;
background: #f8f9fa;
border-radius: 15px;
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
}
.comment-box {
background: #ffffff;
border-radius: 10px;
padding: 20px;
margin-bottom: 20px;
transition: transform 0.2s;
border: 1px solid #e9ecef;
}
.comment-box:hover {
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.user-avatar {
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 50%;
font-weight: 600;
font-size: .85rem;
color: #fff;
text-align: center;
user-select: none;
background: var(--av-color, #0d6efd);
border: 3px solid var(--av-color, #0d6efd);
}
.comment-input {
border-radius: 20px;
padding: 15px 20px;
border: 2px solid #e9ecef;
transition: all 0.3s;
}
.comment-input:focus {
box-shadow: none;
border-color: #86b7fe;
}
.btn-comment {
border-radius: 20px;
padding: 8px 25px;
background: #0d6efd;
border: none;
transition: all 0.3s;
}
.btn-comment:hover {
background: #0b5ed7;
transform: translateY(-1px);
}
.comment-actions {
font-size: 0.9rem;
}
.comment-actions a {
color: #6c757d;
text-decoration: none;
margin-right: 15px;
transition: color 0.2s;
}
.comment-actions a:hover {
color: #0d6efd;
}
.comment-time {
color: #adb5bd;
font-size: 0.85rem;
}
.reply-section {
margin-left: 60px;
border-left: 2px solid #e9ecef;
padding-left: 20px;
}
.reply-section {
border-left-color: #ced4da;
}
.reply-section .reply-section {
border-left-color: #adb5bd;
}
.reply-section .reply-section .reply-section {
border-left-color: #868e96;
}
.comment-section,
.comment-box {
background: var(--bg-card) !important;
}
.dark-mode .comment-section,
.dark-mode .comment-box {
background: var(--bg-dark-card) !important;
}
.dropdown-item {
color: var(--text-primary) !important;
}
.dark-mode .showbacktop,
.dark-mode .mobile-side,
.dark-mode .mobile-menu,
.dark-mode .dropdown-menu,
.dark-mode .dropdown-menu .active,
.dark-mode .container,
.dark-mode .container-sm,
.dark-mode .container-md,
.dark-mode .container-lg,
.dark-mode .container-xl {
background: var(--bg-card) !important;
}
.dark-mode .inside-text * {
color: var(--text-light) !important;
}
.dark-mode .nav-link {
color: #fff !important;
}
.top-menu.bg-white {
background: var(--bg-nav) !important;
}
.top-menu.bg-white {
background: var(--bg-nav) !important;
}
.logo-sidenav.bg-white {
background: var(--bg-nav) !important;
}
.menu-mobile.bg-white {
background: var(--bg-nav) !important;
}
.dark-mode .border-bottom,
.dark-mode .card-text,
.dark-mode .card-subtitle,
.dark-mode .text-muted {
color: #aaaaaa !important;
}
.framed .wrapper,
.boxed .wrapper {
position: relative;
z-index: 1;
margin: 0 auto;
overflow-x: hidden;
}
.boxed,
.framed {
background: var(--bg-body);
}
.boxed.bg-repeat .wrapper,
.boxed.bg-repeat2 .wrapper,
.boxed.bg-repeat3 .wrapper,
.framed.bg-repeat .wrapper,
.framed.bg-repeat2 .wrapper,
.framed.bg-repeat3 .wrapper {
box-shadow: 0 0 3px var(--border-light);
}
.framed main,
.framed .second-header,
.framed .bg-nav-framed {
background: rgba(255,255,255,.7);
}
.dark-mode .framed main,
.dark-mode .framed .second-header,
.dark-mode .framed .bg-nav-framed {
background: rgba(0,0,0,.25);
}
@media (max-width:575.98px) {
.boxed .wrapper,
.framed .wrapper {
width: 100%;
}
}
@media (min-width:768px) {
.boxed .wrapper,
.framed .wrapper {
width: 90%;
}
.framed {
padding: 15px 0;
}
}
@media (min-width:1200px) {
.boxed .wrapper,
.framed .wrapper {
width: 1200px;
}
.boxed .navbar,
.framed .navbar {
padding: .5rem 0;
}
}
.dark-mode .boxed.bg-repeat .wrapper,
.dark-mode .boxed.bg-repeat2 .wrapper,
.dark-mode .boxed.bg-repeat3 .wrapper,
.dark-mode .framed.bg-repeat .wrapper,
.dark-mode .framed.bg-repeat2 .wrapper,
.dark-mode .framed.bg-repeat3 .wrapper {
box-shadow: 0 0 3px #373737;
}
.theme-toggle {
width: 2.5rem;
height: 2.5rem;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-primary);
transition: color .3s;
}
.theme-toggle:hover {
color: var(--clr-main);
}
.theme-toggle .icon {
transition: transform .5s;
}
.dark-mode .theme-toggle .icon {
transform: rotate(360deg);
}
.navbar .nav-link,
.date-area,
.navbar .dropdown-toggle {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.navbar-nav {
flex-wrap: nowrap;
}
@media (max-width: 575.98px) {
.navbar-nav {
flex-wrap: nowrap !important;
gap: .15rem;
}
.navbar .nav-link,
.navbar .dropdown-toggle,
.date-area {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 6rem;
padding-inline: .35rem !important;
font-size: .85rem;
}
.navbar .dropdown-menu {
font-size: .85rem;
}
.navbar-nav .nav-link svg {
font-size: 1.1rem;
}
.navbar-nav .nav-link span.visually-hidden {
display: none;
}
}
.mobile-sticky > .container {
width: 100% !important;
max-width: 100% !important;
padding-left: 0;
padding-right: 0;
}
@media (max-width: 991.98px) {
.mobile-sticky > .container {
width: 100% !important;
max-width: 100% !important;
padding-left: 0;
padding-right: 0;
}
}
html {
font-size: 18px;
}
.object-fit-cover {
object-fit: cover;
width: 100%;
height: 100%;
display: block;
}
/* لضبط aspect-ratio للحاوية */
.image-wrapper {
position: relative;
width: 100%;
overflow: hidden;
}
.post-number {
list-style: none;
padding: 0;
margin: 0;
}
.post-number li {
align-items: flex-start;
}
.number-box {
width: 2rem; /* حجم ثابت للرقم */
text-align: center;
font-size: 2.25rem;
line-height: 1.2;
color: rgba(0, 0, 0, 0.25);
}
.title-box a {
line-height: 1.6;
display: block;
}
/* صور وأبعاد */
.image-box {
height: 174px;
}
.x-card {
height: 100px;
}
@media (max-width: 730px) {
.image-box {
height: 150px;
}
.x-card {
height: 80px;
}
}
.ratio_115-100 {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.ratio_115-100 img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: content;
}
:root {
--clr-main1: #ffffff; /* اللون البرتقالي */
}
/* الوضع الافتراضي (موبايل): خلفية فاتحة ونص داكن */
.mobile-sticky {
background-color: #fff;
color: #000;
}
/* ديسكتوب: فوق 992px – خلفية غامقة ونص برتقالي */
@media (min-width: 992px) {
.mobile-sticky {
background-color: #111 !important;
color: var(--clr-main1) !important;
}
.mobile-sticky .nav-link,
.mobile-sticky .navbar-toggler,
.mobile-sticky .btn,
.mobile-sticky svg,
.mobile-sticky .form-control {
color: var(--clr-main1) !important;
fill: var(--clr-main1) !important;
}
.mobile-sticky input::placeholder {
color: #aaa !important;
}
.mobile-sticky .form-control {
background-color: #222 !important;
}
}
/* يجعل أيقونة زر الثيم دائماً بلون برتقالي */
.theme-toggle svg,
.theme-toggle use {
color: var(--clr-main1) !important;
fill: var(--clr-main1) !important;
stroke: var(--clr-main1) !important;
}
.in-mobile {
margin-top:-10px !important;
}
@media (max-width: 991.98px) {
.mobile-top-icons .navbar-toggler svg,
.mobile-top-icons .hamburger-icon span {
color: var(--clr-main) !important;
fill:var(--clr-main) !important;
}
.mobile-top-icons .hamburger-icon span {
color: #111 !important;
fill: #111 !important;
background-color: var(--clr-main) !important;
}
.mobile-top-icons .hamburger-icon span {
display: block;
height: 2px;
margin: 4px 0;
width: 24px;
}
.in-mobile {
margin-top:-30px !important;
}
}
.search-box svg {
color: var(--clr-main1) !important;
fill: var(--clr-main1) !important;
stroke: var(--clr-main1) !important;
}
/* اللون البرتقالي للنصوص الافتراضية */
.text-orange {
color: var(--clr-main1) !important;
}
/* سطح المكتب */
#start-main,
#start-main .nav-item,
#start-main .nav-link,
#start-main .dropdown-menu {
background-color: #000 !important;
color: var(--clr-main1) !important;
font-family: 'Tajawal', sans-serif;
font-weight: 500;
}
/* الروابط داخل القوائم */
#start-main .dropdown-menu a {
color: var(--clr-main1) !important;
}
/* عند المرور hover */
#start-main .nav-link:hover,
#start-main .dropdown-menu a:hover {
background-color: #111 !important;
color: #fff !important;
}
/* الروابط النشطة */
#start-main .nav-link.active-text,
#start-main .dropdown-menu a.active-text {
color: #fff !important;
}
/* الموبايل */
#sid-menu .accordion-button,
#sid-menu .accordion-body,
#sid-menu .accordion-item {
color: var(--clr-main) !important;
font-family: 'Tajawal', sans-serif;
}
.mobile-top-icons {
position: fixed;
left: 12px;
right: 12px;
z-index: 9;
display: flex;
justify-content: space-between;
align-items: center;
padding: 4px 8px;
border-radius: 8px;
}
.mobile-top-icons .ico {
background: rgba(255, 255, 255, 0.8);
}
.mobile-top-icons .navbar-toggler {
padding: 6px;
background: transparent;
border: none;
}
/* ✅ إخفاء على الديسكتوب */
@media (min-width: 992px) {
.mobile-top-icons {
display: none !important;
}
}