@import url('epapermin.css');
@media screen and (max-width:768px){
.titleTag{border-radius: 0px !important;}
.moodch{width:28px}
.navigation-btn{position:fixed;top:50%;transform:translateY(-50%);background-color:rgba(0,0,0,.5);color:#fff;border:none;padding:10px 20px;font-size:20px;cursor:pointer;z-index:1000}
.dd-button{line-height:1.9;position:relative;top:1px}
#swipeMessageOverlay{display:flex}
.titleTag{width:100%;margin-top:0!important}
.titleunderline{width:100%;background:#fff;height:2px}
.header{padding:0}
.hide-page{display:none}
.form-horizontal{height:34px}
.pull-left{padding:1px}
#ddlistPage{display:inline-block;width:auto;padding:0}
#dropdownMenuButton{padding:1px 8px}
#datetext_cal{padding:2px 4px;font-size:11px}
.btn-default{padding:5px}

.shareit_outer{width:97%;position:relative;left:4px}
.thumbnail{width:96%;box-shadow:none;border-radius:0;padding:0;margin-left:9px;margin-top:7px;border:none}
.cal_outer input{padding:2px 0 0 4px}
.cal_outer{background:#1728c1 linear-gradient(180deg,#3a48ca,#1728c1) repeat-x;border-radius:4px;padding:0 0 3px 8px;width:87px}
.btn-crop{padding:3px 5px 3px 3px;border-radius:3px}
#content{overflow:hidden}
#newspaper-container{margin-top:0}
.arcpa{line-height:1.8}
.pull-right{padding:2px;float:right}
#navstick{height:43px!important}
.work-Area{margin-top:2px}
#newspaper-container{position:relative;width:100%;touch-action:pan-y}
#newspaperImage{width:100%;height:auto}
#swipeMessageOverlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.8);z-index:9999;color:#fff;display:flex;justify-content:center;align-items:center}
#swipeMessageOverlay h2{font-size:24px;margin:0}
#swipeMessageOverlay p{font-size:16px}
#swipeMessageOverlay button{font-size:18px;padding:10px 20px;border:none;cursor:pointer}
.button-8{font-size:14px}
.footer-bottom{height:auto}
.widget-title{font-size:14px}
}
.navbar{z-index:1000;}
.btn-group-vertical>.btn-group:after,.btn-group-vertical>.btn-group:before,.btn-toolbar:after,.btn-toolbar:before,.clearfix:after,.clearfix:before,.container-fluid:after,.container-fluid:before,.container:after,.container:before,.form-horizontal .form-group:after,.form-horizontal .form-group:before,.modal-footer:after,.modal-footer:before,.nav:after,.nav:before,.navbar-collapse:after,.navbar-collapse:before,.navbar-header:after,.navbar-header:before,.navbar:after,.navbar:before,.pager:after,.pager:before,.panel-body:after,.panel-body:before,.row:after,.row:before{display:table}
.cropper-container{z-index:1.0E+16!important;z-index:1.0E+16!important}
#share-crop{position:absolute;z-index:1001;background:#007bff;color:#fff;border:none;padding:5px 12px;width:70px;height:30px;cursor:pointer;display:none;box-shadow:rgba(50,50,93,.25) 0 2px 5px -1px,rgba(0,0,0,.3) 0 1px 3px -1px;text-align:center;line-height:20px;margin-top:7px;border-radius:0}
#cancel-crop{position:absolute;z-index:1001;background:#dc3545;color:#fff;border:none;padding:5px 12px;width:70px;height:30px;cursor:pointer;display:none;box-shadow:rgba(50,50,93,.25) 0 2px 5px -1px,rgba(0,0,0,.3) 0 1px 3px -1px;text-align:center;line-height:18px;margin-top:7px;border-radius:0}
.side-thumb{margin-top:10px;overflow:hidden}
#ui-datepicker-div{z-index:10!important}
.ui-state-default,.ui-widget-content .ui-state-default{border:1px solid #ddd!important;background:#fff!important;font-weight:400;color:#454545;font-weight:600!important}
a{text-decoration:none}
.footer-section{background-color:#00b69b;position:relative;overflow:hidden;z-index:9;padding-top:3px}
.footer-top{padding:12px 0 14px;background:#043a5b}
.footer-top .container,.footer-bottom .container{max-width:1320px}
.footer-top .row{row-gap:16px}
.footer-social-column{display:flex;justify-content:flex-end}
.footer-social-column .widget{width:max-content;max-width:100%;text-align:left}
.footer-top p{font-size:15px;line-height:1.28;margin-bottom:6px}
.company-footer-contact-list,.courses-link-list,.small-post-list{padding-left:0}
.company-footer-contact-list li,.company-footer-contact-list a,.footer-top p{color:#fff}
.company-footer-contact-list{margin-top:10px}
.company-footer-contact-list li{display:flex;display:-webkit-flex;align-items:center;gap:9px;line-height:1.35}
.company-footer-contact-list li+li{margin-top:5px}
.company-footer-contact-list li i{margin:0;font-size:18px;display:inline-flex;align-items:center;justify-content:center;width:22px;min-width:22px;flex:0 0 22px;text-align:center}
.company-footer-contact-list li a{display:inline-block;min-width:0;overflow-wrap:anywhere}
.footer-top .site-logo{display:inline-block;margin-bottom:4px;max-width:180px}
.footer-top .site-logo img{display:block;max-width:100%;height:auto}
.widget-title{text-transform:capitalize}
.footer-top .widget-title{color:#fff;margin-bottom:16px;font-size:18px}
.courses-link-list li+li{margin-top:10px}
.courses-link-list li a{color:#fff;text-transform:capitalize;font-family:var(--para-font);font-weight:400}
.courses-link-list li a:hover{color:#4bffe4}
.courses-link-list li i{margin-right:5px}
.footer-top .small-post-title a{font-family:var(--para-font);color:#fff;font-weight:400}
.small-post-item .post-date{color:#4bffe4;margin-bottom:3px;font-family:var(--para-font);font-weight:400}
.small-post-list li+li{margin-top:30px}
.news-letter-form{margin-top:15px}
.news-letter-form input{width:100%;padding:12px 25px;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border:none}
.news-letter-form input[type=submit]{width:auto;border:none;background-color:#4bffe4;padding:9px 30px;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;color:#fff;margin-top:10px}
.footer-bottom{padding:8px 0;background:#001522;border-top:1px solid rgba(255,255,255,.149)}
.footer-bottom .row{align-items:center;row-gap:4px}
.copy-right-text{color:#fff}
.copy-right-text .footer-developer-link{color:#fff}
.copy-right-text .footer-developer-link:hover{color:#4bffe4}
.copy-right-text a{color:#4bffe4}
.terms-privacy li+li{margin-left:30px}
.terms-privacy li a{color:#fff;position:relative}
.terms-privacy li a:after{position:absolute;content:'-';color:#fff;display:inline-block;top:0;right:-18px}
.terms-privacy li+li a:after{display:none}
.pageDyfma{font-family:system-ui;font-weight:400}
.dyph1{font-weight:600;font-family:system-ui}
.modal-sub{margin-top:9%;background-color:#fff;background-image:url(../../img/icon-bg-min.webp);background-repeat:no-repeat}
.modal-dialog{display:flex;align-items:center;justify-content:center;min-height:75vh;margin:0 auto}
.modal-custom{width:96vw;max-width:600px;height:96vw;max-height:600px}
.modal-content{height:100%;border:2px solid #474747;overflow:hidden}
.modal-body{display:flex;flex-direction:column;align-items:center;height:100%}

.rounded-social-buttons .social-button {
    float: right;
    width: 1.8rem;
    padding: 0px;
    text-align: center;
    color: #fefefe;
    font-size: 1.5rem;
    margin-right: 0.25rem;
}

.rounded-social-foobuttons .social-button {
    float:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:2.8rem;
    height:2.25rem;
    padding:0;
    color:#fefefe;
    font-size:1.25rem;
    margin:0;
}
.rounded-social-foobuttons{display:flex;flex-wrap:wrap;gap:4px}
.rounded-social-foobuttons .facebook{background:#3b5998}
.rounded-social-foobuttons .twitter{background:#159bd3}
.rounded-social-foobuttons .linkedin{background:#1476a3}
.rounded-social-foobuttons .youtube{background:#bd0000}
.rounded-social-foobuttons .instagram{background:#b70fc5}
.rounded-social-foobuttons .website{background:#27a9e1}
.rounded-social-foobuttons .social-button:hover{color:#fff;filter:brightness(1.12)}
@media(max-width:767px){.footer-social-column{justify-content:flex-start}.footer-social-column .widget{width:100%}}

.rounded-social-buttons .social-button:hover, .rounded-social-buttons .social-button:focus {
  -webkit-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
          transform: rotate(360deg);
}

.rounded-social-buttons .fa-twitter, .fa-facebook-f, .fa-linkedin, .fa-tiktok, .fa-youtube, .fa-instagram {
  font-size: 22px;
}

.rounded-social-buttons .social-button.facebook {
  background: #3b5998;
}

.rounded-social-buttons .social-button.facebook:hover, .rounded-social-buttons .social-button.facebook:focus {
  color: #3b5998;
  background: #fefefe;
  border-color: #3b5998;
}

.rounded-social-buttons .social-button.twitter {
  background: #55acee;
}

.rounded-social-buttons .social-button.twitter:hover, .rounded-social-buttons .social-button.twitter:focus {
  color: #55acee;
  background: #fefefe;
  border-color: #55acee;
}

.rounded-social-buttons .social-button.linkedin {
  background: #007bb5;
}

.rounded-social-buttons .social-button.linkedin:hover, .rounded-social-buttons .social-button.linkedin:focus {
  color: #007bb5;
  background: #fefefe;
  border-color: #007bb5;
}

.rounded-social-buttons .social-button.tiktok {
  background: #000000;
}

.rounded-social-buttons .social-button.tiktok:hover, .rounded-social-buttons .social-button.tiktok:focus {
  color: #000000;
  background: #fefefe;
  border-color: #000000;
}

.rounded-social-buttons .social-button.youtube {
  background: #bb0000;
}

.rounded-social-buttons .social-button.youtube:hover, .rounded-social-buttons .social-button.youtube:focus {
  color: #bb0000;
  background: #fefefe;
  border-color: #bb0000;
}

.rounded-social-buttons .social-button.instagram {
  background: #bf1dd7;
}

.rounded-social-buttons .social-button.instagram:hover, .rounded-social-buttons .social-button.instagram:focus {
  color: #125688;
  background: #fefefe;
  border-color: #125688;
}

.nav-item .nav-link {
    transition: color 0.3s ease-in-out, background 0.3s ease-in-out;
}

.nav-item .nav-link:hover {
    color: #ffffff !important; /* Change color on hover */
    background: #5cb95c; /* Light background effect */
}

/* Current page's menu item stays highlighted like :hover, not just on
   mouseover - set via navBar.php's active-nav script (JS, since menu items
   are admin-entered URLs in arbitrary formats, not something PHP can match
   reliably against the current request). */
.nav-item .nav-link.active,
.dropdown-item.active {
    color: #ffffff !important;
    background: #5cb95c;
}
.dropdown-item.active:hover {
    color: #ffffff !important;
}

/* Thumbnails (thum-view) responsive layout */
.thum-view{display:flex;flex-wrap:wrap;gap:8px}
.thum-view .side-thumb{flex:0 0 31%;width:auto;margin:5px;border:1px solid #ddd;box-sizing:border-box}
.thum-view .side-thumb .thumtitle{padding:6px 4px;background:#fff1f1;text-transform:uppercase;font-weight:700;border-bottom:1px solid #ddd}
.thum-view .side-thumb .thumbnail{display:block;padding:0;margin:0}
.thum-view .side-thumb .thumbnail img{width:100%;height:auto;display:block}

/* Default modal width for thumbnails on larger screens */
#thumViewModel .modal-dialog{max-width:60% !important;margin:0 auto}

/* Medium screens: two thumbs per row */
@media (max-width:768px){
  .thum-view .side-thumb{flex:0 0 48%}
  #thumViewModel .modal-dialog{max-width:90% !important;margin:10px}
}

/* Small screens: one thumb per row */
@media (max-width:480px){
  .thum-view{gap:6px}
  .thum-view .side-thumb{flex:0 0 100%}
  #thumViewModel .modal-dialog{max-width:98% !important;margin:6px}
}


/* =========================================================
   THE DAILY CHRONICLE — Theme 5
   Editorial styling only; homepage mode logic remains in homePage.php.
   ========================================================= */
:root {
  --dc-ink: #fff;
  --dc-paper: #fffefa;
  --dc-muted: #66615c;
  --dc-rule: #d8d1c8;
  --dc-accent: #7f1d2d;
  --dc-soft: #f5f1eb;
}
html, body { background: var(--dc-paper); color: var(--dc-ink); }
body { font-family: Georgia, "Times New Roman", serif; }
.container { max-width: 1240px; }
/* A print-inspired editorial rhythm without changing shared layout markup. */
.titleTag { color: var(--dc-ink) !important; font-family: Georgia, "Times New Roman", serif; letter-spacing: .01em; border-bottom: 2px solid var(--dc-accent) !important; padding-bottom: 8px !important; }
.titleunderline { background: var(--dc-accent) !important; height: 2px !important; }
.navbar, .navbar-default, .navbar-light { border-radius: 0 !important; border-bottom: 1px solid var(--dc-rule) !important; box-shadow: none !important; }
.navbar a, .navbar-nav a { font-family: Arial, Helvetica, sans-serif; }
.eviewBox { background: #fff; border: 1px solid var(--dc-rule); box-shadow: none !important; padding: 8px !important; transition: border-color .18s ease, transform .18s ease; }
.eviewBox:hover { border-color: var(--dc-accent); transform: translateY(-2px); }
.eviewBox img { display: block; width: 100%; height: auto; }
.eviewBox .layouy { background: rgba(30, 25, 25, .88) !important; }
.eviewBox .layouy h4 { font-family: Arial, Helvetica, sans-serif; font-size: 14px !important; font-weight: 600; }
#calendar, .ui-datepicker { font-family: Arial, Helvetica, sans-serif; }
.ui-datepicker .ui-state-active, .ui-datepicker .ui-state-hover { background: var(--dc-accent) !important; border-color: var(--dc-accent) !important; color: #fff !important; }
button, .btn, input, select { font-family: Arial, Helvetica, sans-serif; }
.btn-primary, .bg-primary { background-color: var(--dc-accent) !important; border-color: var(--dc-accent) !important; }
a { color: var(--dc-accent); }
a:hover { color: #57111d; }
/* Traditional mode: make the publication reader feel like a newspaper page. */
#homeCorePage, .homeCorePage, .epaper-container { max-width: 100%; }
img { image-rendering: auto; }
@media (min-width: 992px) {
  /* Keep edition cards compact and evenly spaced on desktop. */
  .eviewBox { max-width: 100%; }
}
@media (max-width: 767px) {
  .container { padding-left: 10px; padding-right: 10px; }
  .titleTag { font-size: 20px; }
  .eviewBox { margin-bottom: 8px; }
}

/* Daily Chronicle distinct editorial-newsstand layout */
:root {
  --dc-ink: #fff;
  --dc-paper: #f7f3ec;
  --dc-white: #fffdf8;
  --dc-rule: #d6cbbd;
  --dc-accent: #8b1e2d;
  --dc-muted: #70685f;
}
html, body { background: var(--dc-paper); color: var(--dc-ink); }
body { font-family: Georgia, "Times New Roman", serif; }
.container { max-width: 1280px; }
a { color: var(--dc-accent); }
a:hover { color: #5f111d; }
/* Newspaper-style horizontal rules and editorial typography */
.titleTag { color: var(--dc-ink) !important; font-family: Georgia, "Times New Roman", serif; font-size: clamp(21px, 2vw, 29px); letter-spacing: -.02em; border-bottom: 2px solid var(--dc-accent) !important; padding: 0 0 9px !important; }
.titleunderline { height: 2px !important; background: var(--dc-accent) !important; }
.navbar, .navbar-default, .navbar-light { border-radius: 0 !important; border: 0 !important; border-bottom: 3px double var(--dc-rule) !important; box-shadow: none !important; background: var(--dc-white) !important; }
.navbar a, .navbar-nav a { font-family: Arial, Helvetica, sans-serif; letter-spacing: .025em; }
/* Edition Wise becomes an editorial archive rather than a generic rounded-card grid. */
.eviewBox { background: var(--dc-white); border: 1px solid var(--dc-rule); border-radius: 2px !important; box-shadow: 0 3px 0 rgba(32,31,29,.04) !important; padding: 7px !important; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.eviewBox:hover { transform: translateY(-3px); border-color: var(--dc-accent); box-shadow: 0 7px 18px rgba(32,31,29,.12) !important; }
.eviewBox img { display:block; width:100%; height:auto; }
.eviewBox .layouy { background: rgba(32,31,29,.92) !important; border-top: 2px solid var(--dc-accent); }
.eviewBox .layouy h4 { font-family: Arial, Helvetica, sans-serif; font-size: 13px !important; letter-spacing: .04em; }
/* Traditional reader: clean paper frame, broad cover, no distortion of original image dimensions. */
#homeCorePage, .homeCorePage, .epaper-container { max-width: 100%; }
#newspaperImage { background: #fffdf8; box-shadow: 0 8px 26px rgba(32,31,29,.14); }
#calendar, .ui-datepicker, button, .btn, input, select { font-family: Arial, Helvetica, sans-serif; }
.ui-datepicker .ui-state-active, .ui-datepicker .ui-state-hover { background: var(--dc-accent) !important; border-color: var(--dc-accent) !important; color: #fff !important; }
.btn-primary, .bg-primary { background-color: var(--dc-accent) !important; border-color: var(--dc-accent) !important; }
/* Editorial separators and calmer spacing on smaller screens. */
hr { border-top: 1px solid var(--dc-rule); }
@media (min-width: 992px) { .eviewBox { max-width: 100%; } }
@media (max-width: 767px) {
  .container { padding-left: 10px; padding-right: 10px; }
  .titleTag { font-size: 21px; }
  .eviewBox { margin-bottom: 9px; }
}