/* static/css/pages/template_commondetail.css */
.detail_box_container{
    width:90%;
    margin: 2rem auto;
    padding: 30px 20px;
    box-sizing: border-box;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.205);
    word-wrap:break-word;
}

@media (max-width: 355px) {

.detail_box_container{
  font-size: 12pt;
  
}
/* Extra small phones */
@media (min-width: 356px) and (max-width:370px){

}

/* Small phones - updated 1.25.2026*/ 
@media (min-width: 371px) and (max-width: 479px) {

}

/* Larger phones 1 (480px–580px) updated 1.25.2026 */
@media (min-width: 480px) and (max-width: 580px) {}

}

/* Larger phones 2 (581px–767px) updated 1.25.2026 */
@media (min-width: 581px) and (max-width: 767px) {
  .detail_box_container{
    width: 80%;
    padding: 30px 60px;
  
}
}

/* Small tablets (portrait) updated 1.25.2026 */ 
@media (min-width: 768px) and (max-width: 899px)  {
  .detail_box_container{
    width: 80%;
    padding: 30px 60px;
  
}
}


/* Large tablets (landscape) */ 
@media (min-width: 900px) and (max-width: 1023px) {
  .detail_box_container{
    width: 80%;
    padding: 30px 60px;
  
}
}

/* copied and working */
@media (min-width: 1024px) and (max-width: 1127px) {
  .detail_box_container{
    width: 80%;
    padding: 30px 60px;
  
}
}

@media (min-width: 1128px) and (max-width: 1279px) {
  .detail_box_container{
    width: 80%;
    padding: 30px 60px;
  
}
}

@media (min-width: 1280px) and (max-width: 1365px) {
  .detail_box_container{
    width: 80%;
    padding: 30px 60px;
  
}
}

@media (min-width: 1366px) and (max-width: 1599px) {
  .detail_box_container{
    width: 80%;
    padding: 30px 60px;
  
}
}

@media (min-width: 1600px) and (max-width: 1679px) {
  .detail_box_container{
    width: 80%;
    padding: 30px 60px;
  
}
}

@media (min-width: 1680px) {
  .detail_box_container{
    width: 80%;
    padding: 30px 60px;
  
}
}