/* show info page */
.showBannerInformation, .showBannerWarning { display: flex; flex-direction: row; gap: 20px; align-items: center; justify-content: center; margin: 25px auto 35px auto; background: #FEF0E9; text-align: center; padding: 10px 60px; box-sizing: border-box; width: fit-content; text-transform: uppercase; color: #1C2D46; font-weight: 700; font-size: 20px; }
.showBannerInformation img, showBannerWarning img { width: 30px; height: 26px; }
.showDetail { display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; margin-bottom: 35px; }
.showDetail .heading { font-weight: 700; text-align: right; color: #1C2D46; }
.showDetail .answer { font-weight: 700; xfont-size: 14px; text-align: left; color: #1C2D46; }
.showDetail .answer.closed { display: flex; flex-direction: row; gap: 7px; align-items: center; font-weight: 700; xfont-size: 14px; text-align: left; color: #F36F2B; }
.showDetail .answer.closed img { width: 20px; height: 18px; }
.showDetail .logo { padding: 10px 0; }
.showDetail .logo img { }
.showDetail .btnGroup { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 18px; }
.showDetail .btnGroup .btn { max-width: 280px; min-width: 235px; cursor: pointer; width: fit-content; height: 42px; box-sizing: border-box; padding: 11px 20px; border: 1px solid #fff; color: #fff; font-size: 15px; font-weight: 600; text-transform: uppercase; border-radius: 5px; }
.showDetail .btnGroup .btn.lightBlue { background: #57B2B8; transition: background 0.2s linear; }
.showDetail .btnGroup .btn.lightBlue:hover { background: #1c2d46; transition: background 0.2s linear; }
.showDetail .btnGroup .btn.darkBlue { background: #1c2d46; transition: background 0.2s linear; }
.showDetail .btnGroup .btn.darkBlue:hover { background: #57B2B8; transition: background 0.2s linear; } 
.findUs { display: flex; flex-direction: row; margin-bottom: 40px; height: 400px; }
.findUs .location { background: #EEF7F8; height: 100%; padding: 30px 0 30px 30px; box-sizing: border-box; display: flex; flex-direction: column; min-width: 300px; }
.findUs .location .address { margin-bottom: 30px; }
.findUs .location .address .header { display: flex; align-items: flex-start; justify-content: flex-start; gap: 15px; padding-bottom: 7px; }
.findUs .location .address .header .title { color: #1c2d46; font-weight: 700; xfont-size: 14px; text-transform: uppercase; }
.findUs .location .address .content { margin-left: 28px; color: #1c2d46; font-weight: 600; xfont-size: 14px; }
.findUs .location .wtw { margin-bottom: 30px; }
.findUs .location .wtw .header { display: flex; align-items: center; justify-content: flex-start; gap: 8px; padding-bottom: 7px; }
.findUs .location .wtw .header .title { color: #1c2d46; font-weight: 700; xfont-size: 14px; text-transform: uppercase; }
.findUs .location .wtw .content { margin-left: 22px; color: #1c2d46; font-weight: 600; xfont-size: 14px; }
.findUs .location .btnOpenMap { cursor: pointer; margin-left: 22px; display: flex; align-items: center; justify-content: center; width: fit-content; height: 32px; border: 1px solid #fff; background: #57B2B8; border-radius: 5px; transition: background 0.2s linear; text-decoration: none !important; font-weight: bold; font-size: 15px; color: #fff !important; text-transform: uppercase; padding: 10px; }
.findUs .location .btnOpenMap:hover { background: #1c2d46; transition: background 0.2s linear; }
.findUs .map { width: 100%; }
.findUs .map #eventLocationMap { width: 100%; height: 400px; background-color: silver; text-align: center; padding: 40px; box-sizing: border-box; }


/* 850px --------------------------------------------------------------------------- */
@media (max-width: 850px) {
  .findUs { flex-direction: column; height: fit-content; }
  .findUs .location { gap: 20px; padding: 30px; min-width: unset; }
  .findUs .location h3 { margin: 0 !important; }
  .findUs .location .address { display: flex; flex-direction: row; min-width: unset; margin: 0; }
  .findUs .location .address .header { padding: 0; }
  .findUs .location .address .content { width: 100%; }
  .findUs .location .address .content br { display: none; }
  .findUs .location .btnOpenMap { margin: 0; }
}

/* 800px --------------------------------------------------------------------------- */
@media (max-width: 800px) {
  .showBannerInformation, .showBannerWarning { flex-direction: column; padding: 20px 30px; }
}


/* 600px --------------------------------------------------------------------------- */
@media (max-width: 600px) {
  .findUs .location .address { display: unset; flex-direction: unset; }
  .findUs .location .address .content br { display: block; }
  .showDetail { flex-direction: column; align-items: flex-start; justify-content: space-between; margin-bottom: 35px; gap: 20px; }
  .showDetail .btnGroup { width: 100%; }
  .showDetail .btnGroup .btn.lightBlue { max-width: 100%; width: 100%; }
  .showDetail .btnGroup .btn.darkBlue { max-width: 100%; width: 100%; }
}



/*------------------------------- .showDetails TABLE DEFAULTS --------------------*/

.showDetails { margin: 20px 0 35px 60px; }
.showDetails > table > tbody > tr { padding: 0 0 15px 0; display: block; }
.showDetails > table > tbody > tr:nth-last-of-type(1) { padding: 0; }

.showDetails > table > tbody > tr > td { color: #1c2d46; font-size: 14px; padding: 0; }
.showDetails > table > tbody > tr > td:nth-of-type(1) { width: 120px; text-align: right; }
.showDetails > table > tbody > tr > td:nth-of-type(2) { text-align: left; padding: 0 0 0 15px; }

@media (max-width: 750px) {
  .showDetails { margin: 20px 0 35px 20px; }

}

@media (max-width: 500px) {
  .showDetails > table > tbody > tr { display: block; }
  .showDetails > table > tbody > tr > td { display: block; padding: 0; }
  .showDetails > table > tbody > tr > td:nth-of-type(1), .showDetails > table > tbody > tr > td:nth-of-type(2) { width: fit-content; text-align: left; padding: 0; }
}




/* My Dashboard - Completed Entries Page - DONE -- CHANGE FROM SHOWDETAILS CLASS */
#completedEntriesPage .showDetails { width: 100%; box-sizing: border-box; padding: 16px; background: #1c2d46; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 20px; }
  #completedEntriesPage .showDetails p { color: #fff; font-weight: 700; font-size: 14px; text-transform: uppercase; width: 110px; text-align: right; }
  #completedEntriesPage .showDetails select { font-weight: 600; font-size: 14px; color: #1C2D46; width: 100%; max-width: 150px; height: 100%; box-sizing: border-box; border-radius: 5px; border: 1px solid #D6D6D6; padding: 6px; }

@media (max-width: 400px) {
  #completedEntriesPage .showDetails { flex-direction: column; align-items: flex-start; gap: 0; }
    #completedEntriesPage .showDetails p { text-align: left; margin: 0 0 14px 0; }
}