/* ----------- PROMO ART ----------- */
.promo_art_grid {
height: 460px;
width: 100%;
display: grid;
grid-template-columns: 35px 1fr 35px;
grid-template-rows: min-content min-content min-content 130px;
gap: 0px 0px;
grid-auto-flow: row;
grid-template-areas:
    ". logo ."
    ". splash ."
    ". details ."
    ". summary .";
}

.promo_details { 
grid-area: details;
display: grid;
grid-template-columns: min-content min-content min-content min-content;
grid-template-rows: min-content 1fr;
gap: 0px 8px;
width: 100%;
align-items: center;
grid-template-areas:
  "released rating length resolution"
  "genres genres genres genres";
}

.promo_genres {
grid-area: 2 / 1 / 2 / 4;
white-space: nowrap;
}

.promo_genres a.news-link-blue-reg {
white-space: nowrap;
}

.promo_logo { grid-area: logo; }

.promo_summary { 
grid-area: summary;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr min-content;
justify-items: center;
}

.promo_summary_text {
overflow-y: auto;
}

.promo_splash { grid-area: splash; }

.carousel_image {
height: 200px;
width: 100%;
border: none;
cursor: pointer;
background-color: transparent;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}

div.promo_title_txt {
font-size: 12px;
margin-top: 6px;
margin-bottom: 12px;
}

.mobile_movie_logo_hide {
display: none;
}

/* ----------- MOVIE   TILE ----------- */

#movie_tile_wrapper {
margin-left: 8px;
margin-right: 8px;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: min-content 180px min-content 25px min-content min-content min-content;
grid-template-areas: 
"title_logo title_logo"
"movie movie"
"details details"
"rating rating"
"summary summary"
"credits credits"
"buttons buttons"
"report    close";
}

.tile_buttons {
grid-area: buttons;
justify-self: center;
align-self: center;
text-align: center;
display: flex;
flex-direction: column;
gap: 6px;
padding-bottom: 12px;
padding-top: 12px;
}
.tile_rating {
grid-area: rating;
justify-self: end;
align-self: end;
}

.tile_rating img {
height: 18px;
}

/* elements of the movie tile */
.tile_title_logo {
grid-area: title_logo;
display: grid;
grid-template-columns: 1fr min-content;
grid-template-rows: 1fr 0px;
grid-template-areas: 
    "title share"
    "logo  share";
}

.tile_title_logo .tile_title {
grid-area: title;
justify-self: start;
align-self: end;
padding-top: 6px;
padding-bottom: 12px;
font-size: 12px;
}
.tile_title_logo .movie_share {
grid-area: share;
justify-self: end;
align-self: center;
height: 20px;
width: 20px;
cursor: pointer;
margin-left: 8px;
}
.tile_title_logo .tile_logo {
display: none;
grid-area: logo;
justify-self: start;
height: 100%;
width: 100%;
max-height: 160px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}

.review-count {
font-size: 8px;
color: #ffffff;
font-family: helvetica, verdana, arial, sans-serif;
}

.tile_summary_wrapper{
grid-area: summary;
display: grid;
gap: 8px;
grid-template-columns: 1fr min-content;
grid-template-rows: 1fr;
}

.tile_summary{
line-height: 13pt;
font-size: 12pt;
color: #ffffff;
font-family: helvetica, verdana, arial, sans-serif;
overflow: hidden;
padding-bottom: 8px;
font-weight: lighter;
text-overflow: ellipsis;
white-space: nowrap;
height: 14pt;
width: 100%;
}

.tile_summary.tile_summary_show {
  white-space: normal;
  height: 100%;
}

.tile_more {
justify-self: end;
align-self: end;
text-align: right;
margin-top: -24pt;
font-size: 12pt;
line-height: 12pt;
width: 40px;
cursor: pointer;
color: #ffffff;
}

.tile_credits{
display: none;
grid-area: credits;
grid-template-columns: min-content 1fr;
gap: 0px 6px;
align-self: end;
justify-self: start;
}
.tile_movie {
grid-area: movie;
justify-self: center;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: 100%;
}

.desktop_movie_title_hide {
display: block;
}

/* ----------- Header ----------- */
#common-header-nav-table {
    width:100%;
    margin-top: 4px;
    margin-bottom: 18px;
    display: grid;
    grid-template-columns: 31px 120px 1fr 4fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: 
        "burger icon user user"
    "links links links search";
    gap: 6px 6px;
    grid-auto-flow: row;
    padding-right: 6px;
}

.model_menu_container {
grid-template-rows: 38px 1fr
}

.nav_search {
    padding-left: 12px;
    padding-right: 12px;
}

div#side-bar-profile {
    display: none;
}


#genre-block {
    display: none;
  }
  td.td-user .button-clear {
    padding-top: 17px;
}
.button-clear {
  margin: 0px 0;
}
.button-header-links-white {
  padding-bottom: 4px;
}
  div.cube_dropdown-content {
    margin-left: 35px !important;
    margin-top: 0px !important;
  }

  img#cslogo {
    width: 150px;
  }
  td#linkbtn {
    display: none;
  }
  td#chanbtn {
    display: none;
  }
  .movie_tile_image {
    width: 100%;
  }
  .movie_tile_image img {
    width: 350px;
  }
  img#carouselTitle {
    width: 100%;
    height: 200px;  
  }
  .rcorners1{
    width:auto;
  }
  .for-desktop{
    display: none;
  }
  .for-mobile
  {
    display: block;
  }
  .on-mobile-tr{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column-reverse;
  }
  .on-mobile-td{
     flex-basis: 100%;
     width: 100%;
  }
  img#carouselSpash {
    height: auto !important;
    width: 100% !important;
  }
  .slideshow-container {
    max-height: 100% !important;
  }
  .splash-display {
    /* height: auto !important; */
  }
  .for-mobile-show {
    display: none;
  }
  .search-box.rcorners.for-mobile-show {
    width: 100%;
  }
  td.myhide {
    /* display: none; */
  }
  .cube_dropdown {
    margin-right: 0px;
  }
  .touchcarousel {
    width: auto;
  }
  img#carouselTitle {
    display: none;
  }
  .sideNavGreeting-right { 
    display: none;
  }
  .sidenav-right { 
    top:0;
    margin-top: 58px;
    right:0;
    padding-top: 1px;
  }
  .sidenav-right .closebtn-right {
    margin-right: 10px;
  }
  .touchcarousel {
    width: auto !important;
  }
  .dot-location {
    top: 0px;
  }
  button.button-blue {
    margin-top: 10px;
  }
  .on-mobile-tr span.news-white {
    margin-left: 3px;
  }
  tr.own-clr table tr:nth-child(2) span {
    width: 320px;
  }
  tr.my-clr2 span {
    width: 320px;
  }
  tr.own-clr {
    display: flex;
    flex-direction: column-reverse;
    width: 360px;
  }
  td.own-clr1 img {
    height: auto !important;
    width: 100% !important;
  }
  tr.own-clr4 {
    display: none;
  }
  td.own-clr1 {
    width: 100%;
  }
  tr.own-clr4 {
    display: none;
  }
  tr.my-clr2 span {
    width: 80% !important;
  }