* {
  -webkit-overflow-scrolling: touch;
}
body { color: #eee; background: #282828; }
button { outline: none !important; }
p { line-height: 1.2; }
a { color: #edfd0f; }
a:hover { color: #fefe2f; text-decoration: none }
h1 { margin: 1.6rem 0 1rem 0 }
h1 img { max-width: 100%; }
hr { border-top-width: 0.2rem; margin: 0.6rem 0; }
u { cursor: pointer; }

.checkbox-container { width: 0.8rem; margin-top: 0.2rem; margin-left: 0.2rem; position: relative; }
.checkbox-container label { cursor: pointer; position: absolute; width: 1rem; height: 1rem; top: 0; border-radius: 4px; background: #444; }
.checkbox-container label:after { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; content: ''; position: absolute; width: 9px; height: 5px; background: transparent; top: 4px; left: 4px; border: 3px solid #fcfff4; border-top: none; border-right: none; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); }
.checkbox-container label:hover::after { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; filter: alpha(opacity=30); opacity: 0.3; }
.checkbox-container input[type=checkbox] { display: none; }
.checkbox-container input[type=checkbox]:checked + label:after { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; }

.modal-content { background: #222; color: #eee; }
.modal-header { border-bottom: #555 solid 1px; }
.modal-footer { border-top: #555 solid 1px; }
.close { color: #ddd; }

footer { font-size: 0.7rem; position: absolute; bottom: 0; padding: 0.7rem 0; right: 0; left: 0; text-align: center; color: #555; }
footer a { color: #777; }
footer a:hover { color: #999; }
.row { margin-bottom: 0.6rem; }
.desc { margin-bottom: 0.4rem; }
.form-control { background: #444; color: #ccc; border-color: #4a4a4a; border-radius: 0.2rem !important; }
.dropdown { }
.dropdown .dropdown-toggle { background: #444; color: #ccc; border-color: #4a4a4a; }
.dropdown .dropdown-toggle::after { border-top-color: #aaa; }
.dropdown .dropdown-toggle:focus { box-shadow: none !important; }
.dropdown-item { cursor: pointer; margin-bottom: 0; }
table { font-size: 0.9rem; }
table tr th { font-weight: normal; }
table tr th .btn { padding: 0; color: #ddd; text-decoration: none !important; }
table tr th .btn.active { font-weight: bold; }
table tr.film td { font-family: 'Ubuntu Mono', Monaco, monospace; color: #ddd; border: none; }
table tr.film td.checkbox { width: 2rem; }
table tr.film td.checkbox input { width: 2rem; }
table tr.film td.flag { width: 2rem; font-size: 1rem; position: relative; }
table tr.film td.flag span { position: absolute; top: 0.25rem; }
table tr.film td.coord { width: 2rem; }
table tr.film td.year { width: 4rem; }
table tr.film td.truncated {  }
table tr.film td.truncated div { overflow: hidden; white-space: nowrap; position: relative; }
table tr.film td.truncated div::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 20%; background: linear-gradient(to left, rgba(40,40,40,1), rgba(40,40,40,0)); }
table tr.film td.truncated.directors { width: 30%; }
table tr.film td.truncated.title { width: 30%; }
table tr.film td strong { color: #edfd0f; }
table tr.film:hover td { background: rgba(60,60,60,1) !important; }
table tr.film:hover td.truncated div::after{ background: linear-gradient(to left, rgba(60,60,60,1), rgba(60,60,60,0)) !important; }
table tr.providers { display: none; }
table tr.odd td { background: rgba(30,30,30,1); }
table tr.odd td.truncated div::after { background: linear-gradient(to left, rgba(30,30,30,1), rgba(30,30,30,0)); }
table tr.film.hidden td { color: #4a4a4a; }
table tr.film.hidden td a { color: #4a4a4a; }

.btn-save { opacity: 1; }
.btn-save:hover { opacity: 0.6; }

.search-input-group {  }
.search-input-group input { position: relative; z-index: 1 !important; }
.search-input-group button { position: absolute; z-index: 2; cursor: pointer; opacity: 0.6; top: 0; right: 0; bottom: 0; background: none; border: none; color: #757575; }
.search-input-group button:hover { opacity: 1; }

.popover { background: rgba(0,0,0,0.9); border-radius: 0; border: none; font-size: 0.8rem; line-height: 1rem; max-width: 24rem; }
.popover-body { color: #aaa; }
.popover-body .title { font-size: 0.9rem; color: #eee; font-weight: bold; }
.popover-body .year { font-weight: normal; font-size: 0.7rem; }
.popover-body .directors span { color: #eee; }
.popover-body .cast { margin-top: 1rem; }
.popover-body .cast span { color: #eee; }
.popover-body .mc { margin-top: 1rem; }
.popover-body .mc::before { content: ""; background: #eee; width: 0.6rem; height: 2px; display: block; margin-bottom: 0.6rem; }

.dropdown.territories { margin-top: 1rem; }
.dropdown.territories button {  }
.dropdown.territories img { width: 1.6rem; box-sizing: border-box; position: relative; }
.dropdown.territories .dropdown-toggle img { width: 1.2rem; top: -0.1rem; }
.dropdown.territories .dropdown-menu img { top: -0.05rem; margin-right: 0.2rem; }

.dropdown .badge { position: relative; top: -0.05rem; }

.badge.provider { padding: 0.2rem 0.3rem; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 0.7rem; opacity: 0.8; }
.badge.provider:hover { opacity: 1; }
.badge.provider.provider-amazon-prime { background-color: #00A4DD; }
.badge.provider.provider-arte { background-color: #FA481C; }
.badge.provider.provider-canal-play { background-color: #1A1A1A; }
.badge.provider.provider-filmo-tv { background-color: #1889B4; }
.badge.provider.provider-mubi { background-color: #01997A; }
.badge.provider.provider-netflix { background-color: #D1232A; }
.badge.provider.provider-ocs-go { background-color: #FF6600; }
.badge.provider.provider-sfr-play { background-color: #AE1311; }
.badge.provider.provider-youtube-premium { background-color: #D8D8D8; }
.badge.provider.provider-sky-go { background-color: #92C11D; }
.badge.provider.provider-now-tv { background-color: #E72F8D; }
.badge.provider.provider-movistar-plus { background-color: #2B2B2B; }
.badge.provider.provider-filmin { background-color: #00FFA1; }
.badge.provider.provider-kanopy { background-color: #DD3800; }
.badge.provider.provider-hbo { background-color: #000000; }
.badge.provider.provider-maxdome { background-color: #02A3AF; }
.badge.provider.provider-sky-ticket { background-color: #CC1D36; }
.badge.provider.provider-starz { background-color: #1B1B1B; }
.badge.provider.provider-timvision { background-color: #CF0623; }
.badge.provider.provider-rakuten-tv { background-color: #BF1901; }
.badge.provider.provider-infinity { background-color: #691CBD; }
.badge.provider.provider-mediaset { background-color: #E84F10; }
.badge.provider.provider-hulu { background-color: #3EC69A; }
.badge.provider.provider-bfi-player { background-color: #1D1D1D; }
.badge.provider.provider-shudder { background-color: #C70000; }
.badge.provider.provider-hbo-now { background-color: #000000; }

#modal-map .modal-body * { box-sizing: border-box; }
#modal-map .modal-dialog { max-width: 64%; }
#modal-map .instruction { color: #aaa; text-transform: uppercase; margin-bottom: 0.4rem; font-size: 1.2rem; font-weight: bold; }
#modal-map .img-magnifier-container { position: relative;}
#modal-map .img-magnifier-container img { position: relative;  z-index: 1; }
#modal-map .img-magnifier-glass { position: absolute; border: 3px solid #000; border-radius: 50%; cursor: none; width: 300px; height: 300px; z-index: 2; }

#cookie-truc { background: #eee; color: #999; text-align: left; padding: 1rem; font-size: 0.8rem; line-height: 1.4; margin-bottom: -0.7rem; margin-top: 0.7rem; }
#cookie-truc .btn { font-size: 0.9rem; }

@media screen and (max-width: 768px) {
  h1 { margin: 0.1rem 0 0.6rem 0 }
  table { font-size: 0.8rem; }
  table tr.film td { border-bottom: none; padding-bottom: 0; }
  table tr.film td.flag { width: 1.5rem; }
  table tr.film td.coord { width: 1.4rem; }
  table tr.film td.year { width: 2.2rem; }
  table tr.film td.truncated.title { width: 60%; }
  table tr.film:hover td { background: white !important; }
  table tr.film:hover td.truncated div::after{ background: inherit !important; }
  table tr.providers { display: table-row; }
  table tr.providers td { border-top: none; padding-top: 0; }
  table tr.providers td .badge { margin-top: 0.1rem; }
  table tr.odd:hover td { background: rgba(30,30,30,1) !important;}
  table tr.odd:hover td.truncated div::after { background: linear-gradient(to left, rgba(30,30,30,1), rgba(30,30,30,0)) !important; }
  .desc { display: none; }
  .dropdown { margin-bottom: 0.4rem; }
  .dropdown.territories .dropdown-toggle span { display: none; }
}