.d-flex > .breaking-news,
.d-flex > .left-article {
  flex: 1;
}

.top-layout {
    display: flex;       
    flex-wrap: wrap;     
    align-items: stretch; 
    margin-bottom: 0;    
}

.top-layout > .col-lg-6:first-child {
    display: flex;
    gap: 1rem;          
}

.top-layout > .col-lg-6:last-child {
    display: flex;
    flex-wrap: wrap;    
    gap: 0;              
}

.top-layout > .col-lg-6:last-child > .col-6 {
    display: flex;
    padding: 0;
    margin: 0;
}

.row {
  margin: 0;
}

.row > * {
  padding: 0;
}

.breaking-news {
  background-color: #fff;
  height: 100%;
  padding: 1.5rem;
  margin-bottom: 0rem;
  border: 2px solid yellow;
  display: flex;
  flex-direction: column;
}

.breaking-news p {
  font-size: 0.9rem;
  color: #333;
}

.breaking-news img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  margin: 1rem 0;
}

.article-meta {
  font-size: 0.9rem;
  color: #666;
  margin: 1rem 0;
}

.article-meta span {
  margin-right: 1rem;
}

.left-article .meta {
    margin-top: auto;
}

.col-lg-3.d-flex.flex-column article:first-child {
  flex: 2;
}

.col-lg-3.d-flex.flex-column article:last-child {
  flex: 1;
}

.right-article img {
  height: 80px;
  object-fit: cover;
}

.category {
  display: inline-block;
  background-color: yellow;
  color: #333;
  padding: 0.25rem 0.75rem;
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
  font-family: Roboto, sans-serif;
}

.article-title {
  font-weight: bold;
  font-size: 1.1rem;
  margin: 1rem 0;
  padding: 1rem;
  background-color: #f9f9f9;
  border-left: 4px solid yellow;
}

.calendar {
  background-color: white;
  border: 1px solid #ddd;
  padding: 1rem;
}

.calendar table {
  width: 100%;
  border-collapse: collapse;
}

.calendar th {
  background-color: yellow;
  padding: 0.5rem;
  text-align: center;
  font-family: Roboto, sans-serif;
  font-size: 0.9rem;
}

.calendar td {
  border: 1px solid #ddd;
  padding: 0.5rem;
  text-align: center;
  font-size: 0.85rem;
}

.calendar .today {
  background-color: yellow;
  font-weight: bold;
}

form {
  font-family: Georgia, serif;
}

form label {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: bold;
  font-size: 0.95rem;
}

form input, form select, form textarea {
  width: 100%;
  padding: 0.5rem;
  margin-bottom: 1rem;
  border: 1px solid #ddd;
  font-family: Georgia, serif;
}

form input[type="color"] {
  height: 40px;
  cursor: pointer;
}

form button {
  background-color: yellow;
  color: #333;
  border: none;
  padding: 0.75rem 1.5rem;
  cursor: pointer;
  font-family: Roboto, sans-serif;
  font-weight: bold;
  transition: background-color 0.3s;
}

form button:hover {
  background-color: #ffd700;
}

.form-sidebar {
  background-color: #f5f5f5;
  padding: 1.5rem;
  border: 1px solid #ddd;
  margin-bottom: 1rem;
}

.form-sidebar h3 {
  margin-bottom: 1rem;
  color: #333;
  font-size: 1.2rem;
}

.form-preview {
  background-color: white;
  padding: 2rem;
  border: 1px solid #ddd;
  max-height: 80vh;
  overflow-y: auto;
}

footer a:hover {
  color: yellow;
}

footer .copyright {
  text-align: center;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid #555;
  font-size: 0.9rem;
}

.layout-custom {
  text-align: center;
  font-size: 0;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}

.sidebar-left,
.content-center,
.sidebar-right {
  display: inline-block;
  vertical-align: top;
  font-size: 16px;
}
.sidebar-left,
.sidebar-right {
  width: 25%;
}

.content-center {
  width: 50%;
}

.full-width {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0 1rem;
}

body.custom-page main {
  max-width: 100%;
  margin: 0;
  padding: 0.5rem; 
}

body.custom-page .sidebar-left,
body.custom-page .content-center,
body.custom-page .sidebar-right {
  display: inline-block;
  vertical-align: top;
  font-size: 16px; 
  max-width: 100%;
  width: auto;
  box-sizing: border-box;
}

body.custom-page .sidebar-left,
body.custom-page .sidebar-right {
  width: 25%;
}

body.custom-page .content-center {
  width: 50%;
}

body.custom-page h1,
body.custom-page h2,
body.custom-page img {
  max-width: 100%;
  word-break: break-word;
}

body.custom-page .form-preview {
  padding: 1rem;
}

body.custom-page .form-sidebar,
body.custom-page .form-preview {
    width: 100%;           
    word-break: break-word; 
    box-sizing: border-box;
}