/*
Plugin Name:  Ocean API
Description:  Get data from api
Version:      1.0
Author:       Tarahnegaran
Author URI:   https://tarahnegaran.com
*/
body {
    padding:0;
    margin:0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #111216;
}
.container {
    width:1240px;
}
header{
    position: absolute;
}
.flce {
    display: flex;
    align-items: center;;
}
.gap10 {
    gap: 10px;
}
.bigslider {
    width: 100%;
    height:auto;
    position: relative;
	font:14px iransans;
}
.bigslider img {
    width:100%;
}
.bigslider .swiper-slide {
    background-color: #000;
}
.bigslider .swiper-slide img {
    opacity: 0.8;
}
.bigslider .description {
    position: absolute;
    top:40%;
    right:10%;
    z-index: 2;
    color:#fff;
}
.ico {
    background-repeat: no-repeat;
    width:20px;
    height: 20px;
}
.ico.imdb {
    background-image: url('images/imdb.png');
    width:35px;
    height: 18px;
}
.ico.dub {
    background-image: url('images/microphone.svg');
}
.ico.time {
    background-image: url('images/time.svg');
}
.bigslider .description .imdbBox .rate {
    color:#FFD900;
    font-size: 20px;
}
.bigslider .description .ttl {
    font-size: 48px;
    margin-bottom:20px;
}
.bigslider .description .paragraph {
    color:#969696;
    width:500px;  
    text-align: justify;
    line-height: 28px;  
}
.bigslider .description .tags a {
    background-color: #484848;
    color: #FFF;
    font-size: 13px;
    padding:6px;
    border-radius: 8px;
}
.movies .title {
    font-size: 20px;
    color:#FFF;
    margin:2rem 0;
	font-family:'iransans';
}
.movies .rows {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
}
.movies .rows .item img {
    width: 100%;
    border-radius: 8px;
}
.movies .rows .item .ttl {
    color:#FFF;
	font-size: 14px;
    text-align: left;
}
.movies .rows .item .cover {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}
.movies .rows .item .cover::before {
    content:'';
    background: linear-gradient(360deg, rgba(0, 0, 0, 0.42) 0%, rgba(255, 255, 255, 0) 100%);
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    visibility: hidden;
    opacity: 0;
    transition: 0.3s;
}
.movies .rows .item .cover:hover::before {
    opacity: 1;
    visibility: visible;
}
.movies .rows .item .desc {
    position: absolute;
    bottom: 20px;
    right: 12px;
    color: #FFF;
    display: flex;
    flex-flow: column;
    gap: 10px;
	font-size: 13px;
	opacity: 0;
	font-family: 'iransans';
    visibility: hidden;
    transition: 0.3s;
}
.movies .rows .item:hover .desc {
	opacity: 1;
    visibility: visible;
}
.genres {
    width:100%;
    height:auto;
    display:flex;
    gap:5px;
    justify-content:center;
}
.genres .genre img {
    width:80px;
    height:80px;
    object-fit:cover;
    border-radius:100%;
}
.genres .genre p {
    width:80px;
    height:auto;
    font:12px iransans;
    color:#fff;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    text-align:center;
}
.dashboard {
  width:100%;
  height:auto;
  border:1px solid #333;
  border-radius:5px;
  padding:8px;
  margin:50px auto;
}
.dashboard .login {
  width:20vw;
  height: auto;
  margin:20px auto;
  background:#141414;
  border-radius: 5px;
  box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
  padding:10px;
}
.dashboard .login label {
  display: block;
  font:14px iransans;
  color:#fff;
  text-align: center;
}
.dashboard .login input {
  border:1px solid #333;
  background: transparent;
  padding:3px;
  display: block;
	color:#fff;
  margin:10px auto;
  border-radius:5px;
}
.dashboard .login button {
  display: block;
  margin:5px auto;
  background:#333;
  color:#fff;
  font:13px iransans;
  border-radius:5px;
  border:none;
  padding:4px 15px;
}
.dashboard .login a {
  font:12px iransans;
  color:#fff;
  display: block;
  margin:15px 0;
  text-align: center;
}
.dashboard .links {
  width:100%;
  display:flex;
  justify-content:right;
  font:12px iransans;
  color:#fff;
  gap : 20px;
  padding:10px 20px 0 0;
}
.dashboard .links.bet div {
  display: flex;
  gap:20px;
}
.dashboard .links.bet {
  justify-content: space-between;
}
.dashboard .content {
  font:14px iransans;
  color:#fff;
  padding:25px;
  line-height: 25px;
}
form.ticket table {
  width:100%;
}
form.ticket table td:nth-child(1) {
  width:20%;
}
form.ticket table td:nth-child(2) {
  width:80%;
}
form.ticket table input {
  border:1px solid #333;
  background:transparent;
  padding:4px;
  border-radius: 5px;
  color:#fff;
  font:13px iransans;
  width:100%;
  outline:none;
}
form.ticket table textarea {
  width:100%;
  min-height: 150px;
  outline:none;
  border:1px solid #333;
  font:13px iransans;
  background:transparent;
  border-radius: 4px;
  color:#fff;
}
form.ticket button {
  background:#111;
  border:1px solid #333;
  font:13px iransans;
  color:#fff;
  padding:5px 20px;
  border-radius: 5px;
  display: block;
  margin:3px auto;
}
.dashboard .msg {
  width:100%;
  height: auto;
  padding:20px 10px;
  border:1px solid #333;
  border-radius: 5px;
  margin:10px auto;
}
.dashboard .msg.admin {
  background:#333;
}
.dashboard .replay textarea {
  width:100%;
  border:1px solid #333;
  background: transparent;
  margin:10px auto;
  color:#fff;
  font:13px iransans;
  padding:5px;
  border-radius:5px;
  min-height: 100px;
}
.dashboard .replay button {
  border:1px solid #333;
  background: transparent;
  padding:4px 15px;
  border-radius:5px;
  font:13px iransans;
  color:#fff;
}
.dashboard .tickets table {
  width:100%;
}
.dashboard .tickets td {
  border:1px solid #333;
  padding:8px;
}
.dashboard .tickets td:nth-child(1) {
  width:60%;
}
.dashboard .msg span {
  display: block;
  background: orange;
  width: max-content;
  padding:3px 10px;
  border-radius: 5px;
  color:#333;
  margin-bottom: 15px;
}
.headlinks a {
  font:14px iransans !important;;
  color:#fff;
}

.dlapp {
  display: block;
  background: #4caf50;
  width: max-content;
  margin: 10px auto;
  padding: 10px 20px;
  border-radius: 30px;
}
@media (max-width: 525px) {
	.movies .rows {
		overflow:auto;
	}
    .movies .rows .item {
        width: 115px;
    }
    .genres {
        flex-direction:row-reverse;
		overflow:auto;
    }
	.dashboard .login {
		width:100%;
	}
}