*{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.controls{
  padding:10px 20px;
  background: #333333;
  color: #eeeeee;
  border-radius:6px;
}

label{
  font-weight: 300;
  margin: 0 .4em 0 0;
}

button{
  display:inline-block;
  padding:5px 10px;
  background:#666666;
  border:0;
  color:#dddddd;
  font-size:16px;
  font-weight:300;
  border-radius:4px;
  cursor:pointer;
  margin:10px 1px;
}

button.btn-OSC, button.btn-ZTF { padding-left:8px; }
button.btn-WoS{ padding-bottom:2px; }
button.btn-first-author{ padding-top:2px; }

.container.grid .OSC, button.btn-OSC{ border-left:             3px solid #50b030; }
.container.grid .ZTF, button.btn-ZTF { border-right:                  3px solid violet; }
.container.grid .WoS, button.btn-WoS { border-bottom:                 3px solid #0099CC; }
.container.grid .first-author, button.btn-first-author { border-top:  3px solid darkorange; }


/*
 * Trial to make corners with colors instead of borders. Fails
 * because of conflicts like when class="grb supernovae"
#lis-mix .mix { position:relative; }
.mix.supernovae:after {
  content: '';
  position: absolute;
  border-top: 80px solid blue;
  border-left: 80px solid transparent;
}*/

.container.list .OSC, .container.list .ZTF, .container.list .WoS, .container.list .first-author {
  border-radius:0;
}

button, .controls{ font-family: 'PT Serif'; }
button.active{ background: #68b8c4; }
button:focus{ outline: 0 none; }
button + label{ margin-left: 1em; }

.container{
  padding: 2% 2% 0;
  text-align: justify;
  font-size: 0.1px;
  -webkit-transform: translateZ(0);
  -webkit-backface-visibility: hidden;
}

.container:after{
  content: '';
  display: inline-block;
  width: 100%;
}

.container .mix,
.container .gap{
  display: inline-block;
  width: 49%;
  overflow: hidden;
}

.container .mix{
  text-align: left;
  margin-bottom: 2%;
  display: none;
}

.container .mix:before{
  content: '';
  display: inline-block;
  padding-top: 60%;
}


/** * List Styles */

.container.list .mix{
  width: 100%;
  /* no white stripes in FF and Opera in list mode between items */
  margin-bottom: -3px;
}
.container.list .mix:before{
  padding-top: 40px;
}

.container .mix p:last-of-type {
  color: #151515;
  font-weight: 400;
  line-height: normal;
}

/* TEXT IN ENTRY */



/* p:last-child{ margin-bottom: 0; } */

.container:after{
  content: '';
  display: inline-block;
  width: 100%;
}

.container .item,
.container .gap{
  display: inline-block;
  width: 49%;
}

.container .item{
  text-align: left;
  padding:22px 8px 12px 22px;
  vertical-align: top;
  /*display: none; <-- uncomment this rule for use with MixItUp*/
}

/*.container.list a {
  padding-top:-20px;
}*/

/*.mix .item a{ color:#50e0f0; } */

/* .container .psn {
  background: #3c6478 !important;
  border-radius:0px;
} */
/* .mix .item .paper-title{
  text-shadow: 1px 1px 3px #333333;
  font-family: Arial;
  font-weight:500;
  font-size:18px;
  letter-spacing:1.3px;
} */

.mix .item .paper-title{
  color: #ffffff;
  text-shadow: 1px 1px 3px #333333;
  font-family: Arial;
  font-weight:500;
  font-size:20px;
  letter-spacing:1.3px;
}

.mix .item .paper-descr{
  /* color: #ffffff;
  text-shadow: 1px 1px 3px #333333;
  font-family: Arial;
  font-weight:500; */
  font-size:18px;
  /* text-align: left; */
  /* letter-spacing:1.3px; */
}


.container .item, .container .mix{
  background: #aeb6bf;
  border-radius:15px;
}

.container.grid .mix{
  min-height:200px;
  margin-top:9px; /* fix no gap between horizontal rows on Mac */
}

.mix .item p{
  color: #ffffff;
  font-size:15px;
  line-height:1.1;
  margin:0 0 7px 0;
}


.item .idpic {
  color:#ffffff;
  font-size:15px;
  width:30%;
}
.mix .item .part_name{
  color: #ffffff;
  text-shadow: 1px 1px 3px #333333;
  font-family: Arial;
  font-weight:500;
  font-size:22px;
  letter-spacing:1.3px;
}

.mix .item .part_name .prof_name{
  color:  #17202a ;
  text-shadow: 0px 0px 0px #333333 ;
  font-family: Arial;
  font-weight:200;
  font-size:20px;
  letter-spacing:1.3px;
}
.item .descr {
  color:black;
  font-size:16px;
  width:100%;
  line-height: normal;
  text-align: justify;
}



/* Lisakov Flex box progressive enhancements: */
.container{
  display: -webkit-flex;
  -webkit-flex-flow: row wrap;
	-webkit-justify-content: space-between;
  -webkit-align-content: flex-start;
}


/* needed for width of text inside squares */
@media all and (max-width: 420px){
  .container .item,
  .container .gap{
    width: 99%;
  }
}

/* needed for width of text inside squares as well */
@media all and (min-width: 420px){
  .container .item,
  .container .gap{
    width: 95%;
  }
}

@media all and (max-width:720px){
  .container .mix,
  .container .gap{ width:99%; }
}
/*
@media all and (min-width:720px){
  .container .mix,
  .container .gap{
    width:49%;
  }
} */

@media all and (min-width:920px){
  .container .mix,
  .container .gap{
    width:49%;
  }
}

<style>
  table {
    width: 90%;
    table-layout: fixed; /* This makes sure that the table respects the width of the columns */
  }
  th, td {
    border: 1px solid black;
    overflow: hidden; /* Prevents text from spilling out of the cell */
    white-space: nowrap; /* Keeps content on a single line */
    text-overflow: ellipsis; /* Adds an ellipsis if the text is too long to fit */
  }
  .time-column {
    width: 10px; /* Adjust the width as needed */
  }

</style>