/**
 * Проект "Информатор спортивных соревнований: фигурное катание на коньках"
 *
 * Licensed under The MIT License
 * For full copyright and license information, please see the MIT-LICENSE.txt
 * Redistributions of files must retain the above copyright notice.
 *
 * @author    Бурдин А.Н. <support@it-sakh.net>
 * @copyright Бурдин А.Н. <support@it-sakh.net>
 * @link      http://www.it-sakh.info/SportInfo/
 * @license   http://www.opensource.org/licenses/mit-license.php MIT License
 * @version	  0.0.1
 */

 /**
 * Шаблоны для титров
 */

/* ################################################################################################
Шапка (заголовок) всех плашек
*/
.cl_board20 .TitleBG, 
.cl_boardGroupResult .TitleBG {
    background-image: linear-gradient(to right, rgba(36, 57, 73, 0.9) 0%, rgba(81, 127, 164, 0.9) 100%);
    color: white;
}
.cl_board20 #TitleBlock, 
.cl_boardGroupResult #TitleBlock {
    /* Размер шрифта: % от ширины экрана  */
    font-size: 1.7vw;
}
.cl_board20 #SegmentName,
.cl_board20 #SubName,
.cl_board0 #SegmentName,
.cl_boardGroupResult #SegmentName,
.cl_boardGroupResult #SubName {
    /* Размер шрифта: % от ширины экрана  */
    font-size: 1.5vw;
}


/* ################################################################################################
Информационная панель:
    Кнопка:Start List; - Стартовый лист (Полный)
    Кнопка:WarmG; - Стартовый лист (По группам разминки)
    Кнопка:3nd Score; - Промежуточные результаты соревнования
    Кнопка:Judge -> Send All Judges; - Информация обо всех судьях
*/

/* Цвета полос */
.cl_board20 .LineLast,
.cl_boardGroupResult .LineLast {
    background-image: linear-gradient(to right, #85008A 0%, #59005c 50%, #85008A 100%);
    color: white;
}
.cl_board20 .container-fluid .row:nth-child(odd), 
.cl_boardGroupResult .container-fluid .row:nth-child(odd){
    background-image: linear-gradient(to right, rgba(36, 57, 73, 0.9) 0%, rgba(81, 127, 164, 0.9) 50%, rgba(36, 57, 73, 0.9) 100%);
    color: white;
}
.cl_board20 .container-fluid .row:nth-child(even), 
.cl_boardGroupResult .container-fluid .row:nth-child(even) {
    background-image: linear-gradient(to right, rgba(81, 127, 164, 0.9) 0%, rgba(36, 57, 73, 0.9) 50%, rgba(81, 127, 164, 0.9) 100%);
    color: white;
}
.cl_board20 .participantCurrent, 
.cl_boardGroupResult .participantCurrent {
    background-image: linear-gradient(to right, #4CB8C4 0%, #3CD3AD  51%, #4CB8C4  100%) !important;
    color: white !important;
}

/* Размер шрифта */
.cl_board20 .LineText,
.cl_boardGroupResult .LineText,
.cl_board20 .LineTextEmpty,
.cl_boardGroupResult .LineTextEmpty {
    font-size: 1.4vw;
}
.cl_board20 .LineLast,
.cl_boardGroupResult .LineLast {
    font-size: 1.5vw;
}
.cl_board20 .LineText .Nation, 
.cl_boardGroupResult .LineText .Nation {
    font-style: italic;
    float: right;
    font-size: 1.2vw;
}

/* ################################################################################################
Информационная панель:
    Кнопка:Segment; - Название соревнования, группа и сегмент
*/
.cl_boardEvent .TitleBG {
    background-color: rgba(9, 65, 138, 0.7); /*#8a0974*/
    color: white;
}
.cl_boardEvent {
    /* Размер шрифта: % от ширины экрана  */
    font-size: 2.7vw;
}
.cl_boardEvent #SegmentName {
    /* Размер шрифта: % от ширины экрана  */
    font-size: 2.4vw;
}


/* ################################################################################################
Шапка всех плашек
*/

.cl_board20 .TitleBG, 
.cl_boardGroupResult .TitleBG {
    border-radius: 1rem;
    transform: skew(25deg);
    margin: .2rem auto .2rem;
    padding: .5rem 0;
    width: 95%;
}
.cl_board20 #TitleBlock,
.cl_board20 #SubTitle,
.cl_boardGroupResult #TitleBlock,
.cl_boardGroupResult #SubTitle {
    text-align: center;
    width: 95%;
    padding: 1vh 0 1vh;
    margin-left: 2%;
    margin-right: 2%;
    transform: skew(-25deg);
}

.cl_board20 #SegmentName,
.cl_board20 #SubName,
.cl_boardGroupResult #SegmentName,
.cl_boardGroupResult #SubName {
    display: inline-block;
}

/* ################################################################################################
Информационная панель:
    Кнопка:Name; - Информация об участнике
    Кнопка:2nd Score;  - Показать индивидуальные результаты выступления
    Кнопка:Judge -> Send; - Информация об официальном лице (судья)
*/

.cl_board0 {
    position: absolute;
    bottom:3%;
    width: 76%;
    height: 80px;
    left: 12%;
}
.cl_board0 #SegmentName, .cl_board20 #SubName {
    display: inline-block;
}

#board00 {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
#board1, #board2, #board3, #LineUP, #LineDown, #LineDownOne, #LineDownTwo, #LineDownThree {
    position: absolute;
    z-index:100;
    overflow: hidden;
}

#board1 {
    width: 101.5%;
    border-radius: 0 0 100px;
    height: 100px;
    z-index:101;
    margin-top: -59px;
}
#board2 {
    width: 100%;
    border-radius: 0 0 100px 10px;
    height: 90%;
}
/* Задаем цвет верхней полосы */
#board1,#LineUP {
    background-color:#1E8EE3;
}
/* Задаем цвет нижней полосы */
#board2, #LineDown, #LineDownOne, #LineDownTwo, #LineDownThree {
    background-color: #e4941e;
}
#board3 {
    width:60px;
    height:60px;
    margin: 5px 0 0 10px;
    z-index:103;
    background: url('../images/LogoFS.png') no-repeat;
    background-size: cover;
}

#LineUP, #LineDown, #LineDownOne, #LineDownTwo, #LineDownThree {
    left: 80px;
    z-index: 104;
    width: 80%;
    opacity: 0;
}

#LineUP {
    top: 0;
    font-size: 25px;
    height: 41px;
    line-height: 41px;
}
#LineUP>span {
    padding-right: 10px;
}
#LineDown, #LineDownOne, #LineDownTwo, #LineDownThree {
    top: 41px;
    font-size: 18px;
    height: 31px;
    line-height: 31px;
    color: black;
}
#LineDown>span {
    margin-left: 0px;
}
/* Национальность участника (RUS) */
#pNation {
    text-transform: none;
}
/* Картинка, флаг */
#Flag {
    width: 43px;
    height: 28px;
    vertical-align: sub;
}
/* Занимаемое место участника (Место: 1) */
#pRank {
    float: right;
}
/* Общее количество баллов участника (Баллы: 100) */
#pTPoint {
    float: right;
}

#board-circle1,#board-circle2,#board-circle3,#board-circle4,#board-circle5,#board-circle6 {
    position: absolute;
    background-color: #e4941e;
    width: 50%;
    height: 20px;
    margin-top: -5px;
    border-radius: 10px;
}
#board-circle1 {margin-left: 20px;}
/* Анимация: Открытие панели ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.cl_board0.cl_boardIn {
    animation: animation_boardIn 1s linear 0s normal backwards;
}
.cl_board0.cl_boardIn #board2 {
    animation: animation_board2In 0.5s linear 1s  normal both;
}
.cl_board0.cl_boardIn #board3 {
    animation: fadeIn 1s linear 2s both, flip 4s 2 1.5s both;
}
.cl_board0.cl_boardIn #LineUP, .cl_board0.cl_boardIn #LineDown {
    animation: fadeIn 1s linear 2s normal both;
}
.cl_board0.cl_boardIn #LineDownOne {
    animation: fadeIn 1s linear 2s normal forwards,
    fadeOut 2s linear 6s normal forwards;
}
.cl_board0.cl_boardIn #LineDownTwo {
    animation: fadeIn 2s linear 8.5s  alternate forwards,
    fadeOut 2s linear 13s alternate forwards;
}
.cl_board0.cl_boardIn #LineDownThree {
    animation: fadeIn 2s linear 15.5s  alternate forwards;
}


/* Анимация: Закрытие панели ------------------------------------------------------------- */
.cl_board0.cl_boardOut {
    animation: animation_boardOut 2s linear 1.5s normal forwards;
    transform-origin: right center;
}
.cl_board0.cl_boardOut #LineUP, .cl_board0.cl_boardOut #LineDown, .cl_board0.cl_boardOut #LineDownThree {
    animation: fadeOut 1s linear 0s normal both;
}
.cl_board0.cl_boardOut #board3 {
    animation: fadeOut 1s linear 0s forwards;
}
.cl_board0.cl_boardOut #board2 {
    animation: animation_board2Out 1s linear 1s normal both;
}


/* ################################################################################################
Информационная панель:
    Кнопка:Start List; - Стартовый лист (Полный)
    Кнопка:WarmG; - Стартовый лист (По группам разминки)
    Кнопка:3nd Score; - Промежуточные результаты соревнования
    Кнопка:Judge -> Send All Judges; - Информация обо всех судьях
*/


/* Остальные настройки */
.cl_board20,
.cl_boardGroupResult {
    top:5%;
}
.cl_boardGroupResult {
    position: absolute;
    width: 30%;
    right: 1%;
}
.cl_board20 {
    position: relative;
    margin: 0 auto 0;
    width: 90%;
}
.cl_board20 #participantListContainer {
    margin-left: 4vw;
}
.cl_boardGroupResult #participantListContainer {
    margin-left: 2vw;
}

.cl_board20 #participantListContainer,
.cl_boardGroupResult #participantListContainer {
    position: relative;
    min-height: 400px;
}
.cl_board20 #participantListContainer>div, 
.cl_boardGroupResult #participantListContainer>div {
    position: absolute;
    top: 0%;
    width: 100%;
    height: 100%;
}
.cl_board20 .LineRow,
.cl_boardGroupResult .LineRow {
    margin-top: 0.5vh;
    text-align: center;
}
.cl_board20 .LineTitle,
.cl_boardGroupResult .LineTitle,
.cl_board20 .LineText,
.cl_boardGroupResult .LineText,
.cl_board20 .LineTextEmpty,
.cl_boardGroupResult .LineTextEmpty,
.cl_board20 .LineLast,
.cl_boardGroupResult .LineLast {
    padding: .5rem .5rem .5rem .5rem;
}
.cl_board20 .LineLast,
.cl_boardGroupResult .LineLast {
    font-weight: bold;
    border-left: .3rem blue solid;
}
.cl_board20 .LineText,
.cl_boardGroupResult .LineText {
    text-align: left;
}
.cl_board20 .LineTextEmpty,
.cl_boardGroupResult .LineTextEmpty {
    text-align: center;
}
.cl_board20 .participantListContainerItem,
.cl_boardGroupResult .participantListContainerItem {
    opacity: 0;
}
.cl_board20 .participantListContainerItem>div:nth-child(1),
.cl_boardGroupResult .participantListContainerItem>div:nth-child(1) {
    opacity: 1;
}
.cl_board20 .participantListContainerItem.active,
.cl_boardGroupResult .participantListContainerItem.active {
    opacity: 1;
}

/* Анимация: Открытие панели ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.cl_board20.cl_boardIn,
.cl_boardGroupResult.cl_boardIn{
    animation: zoomInRight 2s linear 0s normal backwards;
}
.cl_boardGroupResult.cl_boardIn #participantListContainerOne.participantListContainerIn>.participantList {
    animation: fadeIn 1s ease-out 2s normal forwards;
}

.cl_board20.cl_boardIn #participantListContainer1.participantListContainerIn>.participantList,
.cl_boardGroupResult.cl_boardIn #participantListContainer1.participantListContainerIn>.participantList {
    animation: fadeIn 1s ease-out 2s normal forwards;
}
.cl_board20.cl_boardIn #participantListContainer1.participantListContainerInOut>.participantList,
.cl_boardGroupResult.cl_boardIn #participantListContainer1.participantListContainerInOut>.participantList {
    animation: fadeIn 1s ease-out 2s normal forwards,
    fadeOut 1s linear 8s normal forwards;
}
.cl_board20.cl_boardIn #participantListContainer2.participantListContainerIn>.participantList,
.cl_boardGroupResult.cl_boardIn #participantListContainer2.participantListContainerIn>.participantList {
    animation: fadeIn 2s ease-out 10s normal forwards;
}
.cl_board20.cl_boardIn #participantListContainer2.participantListContainerInOut>.participantList,
.cl_boardGroupResult.cl_boardIn #participantListContainer2.participantListContainerInOut>.participantList {
    animation: fadeIn 2s ease-out 10s normal forwards,
    fadeOut 1s linear 18s normal forwards;
}
.cl_board20.cl_boardIn #participantListContainer3>.participantList,
.cl_boardGroupResult.cl_boardIn #participantListContainer3>.participantList{
    animation: fadeIn 2s ease-out 20s normal forwards;
}
/* Анимация: Закрытие панели ------------------------------------------------------------- */
.cl_board20.cl_boardOut,
.cl_boardGroupResult.cl_boardOut {
    animation: zoomOutDown 2s linear 0s normal forwards;
}

/* ################################################################################################
Информационная панель:
    Кнопка:Segment; - Название соревнования, группа и сегмент
*/
.cl_boardEvent {
    position: relative;
    top:40%;
    margin: 0 auto 0;
    width: fit-content;
    width: 90%;
}
.cl_boardEvent .TitleBG {
    border-radius: 1rem;
    transform: skew(25deg);
    margin: .2rem auto .2rem;
    padding: .5rem 0;
    width: 95%;
}
.cl_boardEvent #TitleBlock {
    margin-left: 2%;
    margin-right: 2%;
    text-align: center;
    transform: skew(-25deg);
    width: 95%;
}
.cl_boardEvent hr,
.cl_board20 hr, 
.cl_boardGroupResult hr {
    width: 60%;
    margin: 1vh auto;
}
 
/* Анимация: Открытие панели ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.cl_boardEvent.cl_boardIn {
    animation: bounceInDown 2s linear 0s normal backwards;
}
/* Анимация: Закрытие панели ------------------------------------------------------------- */
.cl_boardEvent.cl_boardOut {
    animation: hinge 2s linear 0s normal forwards;
    transform-origin: top left; 
}


@keyframes animation_boardIn {
    0% {width:15%;opacity: 0;}
    100% {width:76%;opacity: 1;}
}
@keyframes animation_boardOut {
    0% {width:76%;opacity: 1;}
    100% {width:15%;opacity: 0;}
}
@keyframes animation_board2In {
    0% {height: 0%;}
    100% {height: 90%;}
}
@keyframes animation_board2Out {
    0% {height: 90%;}
    100% {height: 0%;}
}
