body
{
    width: 100%;
    height: 100%;
    margin: 0;
}

.dragable
{
    -webkit-app-region: drag;
}

.non-dragable
{
    -webkit-app-region: no-drag;
}

/* If the user has no internet connection */
#not-online
{
    display: none;
    text-align: center;
    overflow: hidden;
    margin-top: 20%;
}

/* --------------------------------------- */

#container
{
    width: 100%;
    height: 100%;
    margin: 0;
}

.greetings
{
    margin: 0;
}

.mdl-layout__content
{
    /*background-color: rgb(50, 50, 50);*/
}
/*noinspection CssOptimizeSimilarProperties*/
.mdl-layout__drawer
{
    background-image: url('../resources/leftBackground-2.png');
    background-position: left bottom;
    background-repeat: no-repeat;
    background-size: 100%;
    background-color: rgb(50, 50, 50);
    color: rgba(255, 255, 255, 0.8);
    border: 0;
}

.mdl-layout__drawer .mdl-navigation .mdl-navigation__link
{
    color: rgba(255, 255, 255, 0.8);
}

.mdl-layout__drawer .mdl-navigation .mdl-navigation__link:hover
{
    color: rgb(50, 50, 50);
}

/* ------------------ RELEASES ----------------- */

/*noinspection CssOptimizeSimilarProperties*/
#releases
{
    background-color: rgb(50, 50, 50); /* Dark Theme */
    /*background-image: url('../resources/indexBack.jpg');*/
    background-size: cover;
    background-repeat: no-repeat;
}

#releases .button-container
{
    text-align: right;
    margin: 0 7% 0 0;
}

.elem
{
    position: relative;
    height: 100%;
    margin: 0;
    overflow: hidden;
    /*background-color: rgba(255, 255, 255, 0.95);*/
    background-color: rgb(60, 60, 60);
    color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
}

.elem h6
{
    margin: 2% 1.5% 2% 3.5%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.picture-container
{
    width: 50%;
    float: left;
}

.picture
{
    height: 180px;
    max-width: 150px;
}

.text-container
{
    height: 100%;
    width: 60%;
    margin-left: 45%;
    position: relative;
}

.synopsis
{
    height: 80%;
    padding: 3% 15% 3% 3%;
    /*color: rgba(0, 0, 0, 0.74);*/
    word-wrap: break-word;
    font-size: small;
}

.synopsis p
{
    line-height: 130%;
}

.links
{
    border-top: solid 1px rgba(255, 255, 255, 0.07);
    height: 18%;
    padding: 5px 5px 5px 5px;
    overflow: hidden;
    position: absolute;
    bottom: 4px;
    right: 0;
}

.links p
{
    text-decoration: none;
    /*color: rgba(0, 0, 0, 0.74);*/
    font-size: x-small;
    margin-bottom: 0;
}

.link-download
{
    float: left;
    font-size: x-small;
}

.link-more
{
    float: right;
    font-size: x-small;
}

/* --------------- LOADER ---------------- */
#loader-container
{
    background-color: rgba(255, 255, 255, 0.8);
    width: 100%;
    height: 100%;
    text-align: center;
}

#loader-container h3
{
    margin-top: 12%;
    font-family: "YuMincho +36p Kana", serif;
}

.loader-gif
{
    position: absolute;
    bottom: 0;
    margin-left: 20%;
    margin-right: 20%;
    content: url('https://media.giphy.com/media/pt0EKLDJmVvlS/giphy.gif');
}

/* --------------- DOWNLOADER -------------- */
.downloader-header
{
    margin-top: 10%;
}

#download-container
{
    height: 100%;
    width: 100%
}

#footer-back-left
{
    bottom: 0;
    left: 0;
    position: absolute;
    content: url(../resources/downloader-char-left.png);
    width: 20%;
}

#footer-back-right
{
    bottom: 0;
    right: 0;
    position: absolute;
    content: url(../resources/downloader-char-right.png);
    width: 24%;
}

.download-button .md-button
{
    margin-top: 15%;
    color: rgba(255, 255, 255, 0.8);
    margin-right: 3%;
}

#downloader-button
{
    background-color: rgba(40, 40, 40, 0.8);
}

#magnet-downloader-button
{
    background-color: rgba(40, 40, 40, 0.8);
}

.download-button h6
{
    margin-bottom: 0;
    margin-top: 0;
}

.downloader-form-container
{
    justify-content: center;
    align-items: center;
    background-color: rgba(55, 55, 55, 0.5);
    margin-left: 10%;
    margin-right: 10%;
    position: inherit;
}

.dummy-cell
{
    height: 5%;
}

.md-input-container.downloader-input
{
    width: 35%;
}

.md-input-container.md-has-value input, .md-input-container.md-has-value textarea
{
    color: rgba(255, 255, 255, 0.8);
}

.downloader-input
{
    margin-right: auto;
    margin-left: auto;
    color: white;
}

#download-container p
{
    color: rgba(255, 255, 255, 0.8);
}

#download-container h6
{
    margin-top: 0;
    margin-bottom: 0;
    color: rgba(255, 255, 255, 0.8);
}

#download-container textarea
{
    color: rgba(255, 255, 255, 0.8);
}

.md-radio .md-radio-container
{
    border: 2px solid rgba(255, 255, 255, 0.5);
}

/* ----------------- LOCAL ----------------- */
#local-page
{
    /* Remove these to get rid of "dark" theme */
    background-color: rgb(50, 50, 50);
    color: rgba(255, 255, 255, 0.8)
}

#local-page .top-buttons
{
    text-align: right;
}

#local-page .top-buttons .mdl-grid
{
    padding: 3px 0 0 0;
}

#local-page .nb-ep
{
    text-align: left;
}

#local-page .nb-ep h6
{
    margin: 3.5% 0 0 5%;
}

#local-page .local-elem
{
    /*box-shadow: 0 2px 2px 0 rgba(255, 255, 255,.14),0 3px 1px -2px rgba(255, 255, 255,.2),0 1px 5px 0 rgba(255, 255, 255,.12);*/
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
    display: inline-flex;
    flex-flow: row nowrap;
    align-items: flex-end;
    position: relative;
    background-color: rgb(60, 60, 60); /* Remove this too to get rid of "dark" theme */
}

.text-ellipsis
{

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#local-page .local-info
{
    padding-left: 0;
    padding-bottom: 0;
    max-width: 100%;
}

#local-page .title-text
{
    margin-top: 0;
    margin-bottom: 3px;
    max-width: 100%;
}

#local-page .local-page-buttons
{
    text-align: right;
}

#local-page .ep-number-text
{
    margin-top: 0;
    margin-bottom: 3px;
}

#local-page .genres-text
{
    margin-bottom: 3px;
}

#local-page .classification-text
{
    margin-bottom: 3px;
}

#local-page .mdl-cell
{
    margin-top: 0;
    margin-bottom: 0;
}

#local-page .local-pic-synopsis-container
{
    position: relative;
    max-width: 100%;
}

#local-page img
{
    max-height: 100%;
    max-width: 195px;
}

#local-page .local-picture
{
    float: left;
    width: 40%;
}

#local-page .synopsis-year-container
{
    position: relative;
    float: right;
    width: 55%;
    height: 95%;
    text-align: justify;
}

#local-page .local-synopsis
{
    padding-top: 5%;
    padding-right: 5%;
}

#local-page .local-year-container
{
    position: absolute;
    bottom: 0;
    width: 100%;
}

#local-page .local-year
{
    position: relative;
    column-count: 2;
}

#local-page .local-year-text
{
    float: right;
}

#local-page .local-status
{
    float: left;
}

#local-page .mark
{
    margin: 0;
}

/* ----------------- INFOS ----------------- */
/*noinspection CssOptimizeSimilarProperties*/
#info-container
{
    width: 100%;
    height: 100%;
    background-image: url("http://wallpapers.ws/large/201503/2280.jpg");
    background-size: cover;
    background-repeat: no-repeat;
}

#info-container .mdl-grid
{
    height: 100%;
    padding-top: 0;
    padding-left: 0;
}

#back-button
{
    position: absolute;
    right: 2%;
    top: 2%;
}

#info-picture
{
    margin-left: 0;
    margin-top: 0;
}

#info-title
{
    text-align: center;
    padding-left: 10%;
    padding-right: 10%;
}

#info-title h5
{
    margin: 2% 0 0 0;
}

#synopsis-container
{
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
}

#synopsis-container pre
{
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
    margin-top: 0;
    line-height: 130%;
    text-align: justify;
    text-indent: 20px;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: inherit;
    padding: 3% 3% 3% 3%;
    background-color: rgba(255, 255, 255, 0.95);
    width: 100%;
}

.infos-bottom-left
{
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
    background-color: rgba(255, 255, 255, 0.95);
    padding-left: 2%;
    padding-right: 2%;
}

.infos-bottom-left h6
{
    margin-top: 10px;
    margin-bottom: 10px;
}

.airing
{
    text-align: right;
}

.infos-japTitle
{
    text-align: right;
    font-family: "YuMincho +36p Kana", sans-serif;
}

.infos-bottom-middle
{
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
    position: relative;
    padding-left: 3%;
    padding-right: 3%;
    background-color: rgba(255, 255, 255, 0.95);
}

.studios
{
    float: left;
    width: 60%;
}

.genres
{
    float: right;
    width: 40%;
}

.infos-bottom-right
{
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
    background-color: rgba(255, 255, 255, 0.95);
    padding-left: 2%;
    padding-right: 2%;
}

.infos-bottom-right h4
{
    margin: 0 10% 0 20%;
}

.infos-bottom-right-inside
{
    margin-top: 50%;
    margin-bottom: 50%;
}

.characters
{
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
    background-color: rgba(255, 255, 255, 0.95);
    padding: 2% 2% 2% 2%;
}

.characters h5
{
    margin-bottom: 0;
    margin-top: 0;
}

.character
{
    position: relative;
}

.character h6
{
    margin-top: 0;
}

.seiyuu-name
{
    text-align: right;
    margin-bottom: 3%;
}

#news-container
{
    box-sizing: border-box;
    background-image: url('https://thumbs.dreamstime.com/x/seamless-fabric-background-4903761.jpg');
}

.news
{
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
    overflow: auto;
    position: relative;
    padding: 5px 10px 0 0;
    background-color: rgb(50, 50, 50);
    color: rgba(255, 255, 255, 0.8);
}

.news-title
{
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 0 10px 0 25px;
}

.news-picture
{
    float: left;
    width: 15%;
}

.news-synopsis
{
    float: right;
    width: 80%;
    text-align: justify;
    padding: 10px 20px 10px 10px;
}

.news-link
{
    position: absolute;
    bottom: 0;
    right: 0;
}

/* ---------------- SEASON INFO --------------- */

#season-info-container
{

}

#season-form-container
{
    position: relative;
}

#season-info-container .elem
{
    position: relative;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.95);
    /*background-color: rgb(50, 50, 50);*/
    /*color: rgba(255, 255, 255, 0.8);*/
    color: rgba(0, 0, 0, 0.7);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
}

#year
{

}

.md-input-container
{
    width: 20%;
}

.field-group
{
    margin-top: 15px;
    position: relative;
}

#season-search
{
    position: absolute;
    top: 10px;
    right: 7%;
}

#year-container
{
    float: right;
    margin-right: 25%;
}

#season-container
{
    float: left;
    margin-left: 25%;
}

#season-container .title-container
{
    width: 100%;
    padding: 2px 5px 2px 5px;
    margin: 0;
}

.title-container
{
    overflow: auto;
    margin: 5px 10px 5px 10px;
}

.elem .title-container h6
{
    width: 80%;
    margin: 0 0 0 0;
    float: left;
}

.from-type
{
    width: 20%;
    margin: 0 0 0 0;
    float: right;
    text-align: right;
}

.genres-score
{
    width: 100%;
    overflow: auto;
    margin-bottom: 5px;
    padding: 2px 5px 2px 10px;
}

.genres-score .genres
{
    float: left;
    width: 85%;
    margin-bottom: 0;
}

.score
{
    width: 15%;
    float: right;
    text-align: right;
    padding-right: 15px;
}

#season-container .text-container
{
    margin-left: 30%;
}

#season-container .synopsis
{
    text-align: justify;
}

.season-footer
{
    margin-top: -10px;
    margin-left: 36.5%;
    overflow: hidden;
}



.date-nbEp
{
    height: 40%;
    overflow: hidden;
}

.release-date
{
    float: left;
    margin: 0 0 0 0;
}

.season-nb-ep
{
    float: right;
    margin: 0 10px 0 0;
    font-size: 16px;
}

.producers-more
{
    margin-top: 5px;
}

.producers
{
    margin-bottom: 0;
    float: left;
}

#ova .from-type
{
    width: 25%;
}

#ova .title-container h6
{
    width: 75%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ------------------ WatchList ---------------- */
#watch-list-container
{
    background-color: rgb(50, 50, 50);
}

#watch-list-container .list-title
{
    margin: 2% 0 0 0;
    text-align: right;
}

#watch-list-container .list-title h4
{
    margin: 0;
    padding-right: 7%;
}

#watch-list-container .list
{
    background-color: rgb(60, 60, 60);
    color: rgba(255, 255, 255, 0.8);
    padding-left: 1.5%;
}

#watch-list-container .md-input-container label
{
    color: rgba(255, 255, 255, 0.8);
}

#watch-list-container .entry-button
{
    text-align: left;
    margin: -7% 0 0 0;
    padding-left: 15%;
}

#watch-list-container .watch-list
{
    background-color: rgb(60, 60, 60);
    color: rgba(255, 255, 255, 0.8);
}

#watch-list-container .watch-list .list-title
{
    margin: 3% 0 0 0;
    text-align: right;
}

#watch-list-container .watch-list .list-title h4
{
    margin: 0;
    padding-right: 20%;
}

#watch-list-container .watch-list .entry-button
{
    margin: -4% 0 0 0;
}

#watch-list-container h6
{
    margin: 0;
}

#watch-list-container .entry-container
{
    margin: 0;
}

#watch-list-container .entry
{
    padding: 0;
}

#watch-list-container .entry-name
{
    margin: 0;
}

#watch-list-container .entry-name h6
{
    padding-left: 5%;
    padding-top: 3%;
}

#watch-list-container .entry-options
{
    text-align: right;
    margin: 0;
}

#watch-list-container .entry-container
{
    position: relative;
}