body{ background-color: #F5F5F5; }

.word-break { word-break: break-all; }
.bl-green { border-left: 3px green solid; }
.bl-red { border-left: 3px rgb(139, 74, 66) solid; }
.bl-orange { border-left: 3px rgb(223, 115, 66) solid; }
.bl-purple { border-left: 3px rgb(97, 0, 95) solid; }
.container { padding-left: 0; padding-right: 0; }


#body-frame{
  box-shadow: 0px 5px 10px 0px #4a4a4a;
  max-width: 1108px;
  min-height: 400px;
  margin: 0px auto 0rem auto;
  background: #FEFEFE;
}
@media (min-width: 768px){
  #body-frame{
    margin: 0px auto 0.5rem auto;
  }
}

#dept-name{ color: #73216D; line-height: 120%;}
#header img{ height: 60px; }

.banner{
  background-image: url("../image/banner.jpg");
  background-repeat: no-repeat;
  background-position: center;
  color: white;
  padding: 2rem 1rem;
}
.banner h1{ text-shadow: 1px 1px rgba(0, 0, 0, 0.2) }

@media print {
  @page {
	size: A4 portrait;  
	  
    size: 330mm 427mm;
    margin: 14mm;
  }
  container{
    width: 1024px;
  }
}

/* 
Normal screen
*/
@media (min-width: 768px){
  .thumbnail-container { float: left; }
  .thumbnail { max-width: 240px; }
  .thumbnail-detail { margin-left: 240px; padding-left: 1.2rem;}
}


/* 
Medium screen
>= iPhone 8
*/
@media screen and (min-width: 360px) and (max-width: 767px){
  .banner { padding: 2rem 1rem; }
  #dept-name{ font-size: 0.63rem; }
  #header img{ height: 36px; }

  .thumbnail-container { width:100%; text-align: center; }
  .thumbnail { max-width: 100%; max-height: 460px; }
  .thumbnail-detail { margin-top: 1rem; }
}


/* 
Small screen
For example: iPhone SE 
*/
@media screen and (max-width: 359px){
  #dept-name{ font-size: 0.55rem; }
  #header img{ height: 28px; }

  .thumbnail-container { overflow: hidden; text-align: center; }
  .thumbnail { max-height:200px; }
  .thumbnail-detail { margin-top: 1rem; }
}


/**************************
Small Screen
***************************/
@media (max-width: 359px){
  .container-fluid { padding-left: 4px; padding-right: 4px; }
}


/**************************
Modal
***************************/
.custom-modal { width: 90%; max-width: 1024px; }
.modal-body img{ max-width: 100%; max-height: 100%;}
#modal-left-container, #modal-right-container { width: 50%; }

@media (min-height: 1200px){
  #modal-left-container img, #modal-right-container img { height: initial; }
}
@media (max-width: 767px){
  .custom-modal { width: initial; }
  #modal-left-container { display: none; }
  #modal-right-container { width: 100%; }
}
@media (max-width: 359px){
  #modal-left-container img, #modal-right-container img { height: 240px; }
}

@media screen and (min-width: 576px) and (max-width: 991px){
  .modal-dialog { max-width: 90% }
}
@media (min-width: 992px){
  .modal-dialog { max-width: 940px; }
}










#preloadedImages {
  width: 0px;
  height: 0px;
  display: inline;
  background-image: 
    url("../assets/graphic-principle-management-covid19/preview-simplified-chinese.jpg"),
    url("../assets/graphic-principle-management-covid19/preview-french.jpg"),
    url("../assets/graphic-principle-management-covid19/preview-japanese.jpg"),
    url("../assets/graphic-principle-management-covid19/preview-spanish.jpg"),
    url("../assets/graphic-principle-management-covid19/preview-italian-ver2.jpg"),
    url("../assets/graphic-principle-management-covid19/preview-portuguese.jpg"),
    url("../assets/graphic-principle-management-covid19/preview-german.jpg");
  /*background-image: url(path/to/image3.png);
  background-image: url(path/to/image4.png);*/
  /*background-image: url();*/
}