.bg-fade{
  background-color: #EEE;
}

.bg-white{
  background-color: #FFF;
}

.radius{
  padding: 12px;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  -ms-border-radius: 4px;
}

.box-shadow{
  box-shadow:0px 2px 8px -2px #777;
  -moz-box-shadow:0px 2px 8px -2px #777;
  -webkit-box-shadow:0px 2px 8px -2px #777;
  -ms-box-shadow:0px 2px 8px -2px #777;
}

.container{
  padding-top: 12px;
}

.row{
  margin-bottom: 12px;
}

.h2 {
  color: #005FA9;
  font-family: 'SkySansMedium',Tahoma,sans-serif; /* Use SkySansMedium, fallback to sans-serif */ 
}

.main_font_sans {
  color: #005FA9;
  font-size: 1.2em;
  font-family: 'SkySansMedium',Tahoma,sans-serif; /* Use SkySansMedium, fallback to sans-serif */
}

.main_font_sans_smaller {
  color: #005FA9;
  font-family: 'SkySansMedium',Tahoma,sans-serif; /* Use SkySansMedium, fallback to sans-serif */
}

th {
  color: #005FA9;
  font-size: 1.1em;
  font-family: 'SkySansMedium',Tahoma,sans-serif; /* Use SkySansMedium, fallback to sans-serif */
}

.main_font {
  color: #005FA9;
  font-family: 'SkySerifMedium',Tahoma,sans-serif; /* Use SkySansMedium, fallback to sans-serif */
}

.main_font_it {
  color: #005FA9;
  font-family: 'SkySerifMediumIt',Tahoma,sans-serif; /* Use SkySansMedium, fallback to sans-serif */
}

.main_font_sans_it {
  color: #005FA9;
  font-family: 'SkySansMediumIt',Tahoma,sans-serif; /* Use SkySansMedium, fallback to sans-serif */
}

.upload-button {
  ;width: 100%; /* Full width */
  height: 35px; /* Height for the upload button */
  font-size: 18px; /* Larger font size */
  margin-bottom: 10px;
  font-family: 'SkySansMedium', sans-serif; /* Use SkySansMedium, fallback to sans-serif */
}

.reset-button {
  width: 35%; /* Smaller width for the reset button */
  height: 30px; /* Height for the reset button */
  font-size: 14px; /* Smaller font size */
  font-family: 'SkySansMedium', sans-serif; /* Use SkySansMedium, fallback to sans-serif */
}

.adjust-column {
  /* Your default styles for the comments column - For phones */
}

.filename {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.comment {
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
  max-width: 100%; /* This is the key for table cells. I tried 325px but it's responsive. */
}

#fileList {
  table-layout: fixed;
  width: 100%;
}

#fileList .id {  width: 2%; max-width: 2%; }
#fileList .filename { width: 27%; max-width: 27%; }
#fileList .comment { width: 30%; max-width: 30%; }
#fileList .email { width: 25%; max-width: 25%; }
#fileList .comment-email { width: 1%; max-width: 1%; }
#fileList .size { width: 5%; max-width: 5%; }
#fileList .date { width: 5%; max-width: 5%; }
#fileList .views-ip-del { width: 5%; max-width: 5%; text-align: center; }

@media screen and (max-width: 575px) {
  .adjust-column {
    display: none;
  }
  .filename {
    max-width: 150px; /* Adjust this value as needed */
  }
  .comment {
    display: none;
    max-width: 190px; /* This is the key for table cells */
  }
  .email {
    display: none;
  }
}

/* Change the default link color */
a {
  color: darkmagenta; /* Or purple:  color: purple; */
}

/* Change the link color on hover */
a:hover {
  color: magenta; /* Or a darker shade of purple */
}

/* Change the link color after it has been visited */
a:visited {
  color: mediumvioletred; /* Or a different shade of purple */
}