/**
 * Проект "Информатор спортивных соревнований: фигурное катание на коньках"
 *
 * 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
 */

 /**
 * Шаблоны для кубика (экран на льду)
 */
/* ################################################################################################
Основные настройки:
*/
 /* Делаем черный фон*/
 html,body,#id_board {
    background-color: #000;
}

/* ################################################################################################
Шапка всех плашек
*/
.cl_board0 .TitleBG,
.cl_board20 .TitleBG, 
.cl_boardGroupResult .TitleBG {
    background-image: linear-gradient(to right, #243949 0%, #517fa4 100%);
    color: white;
}
.cl_board0  #TitleBlock,
.cl_board20 #TitleBlock, 
.cl_boardGroupResult #TitleBlock {
    /* Размер шрифта: % от ширины экрана  */
    font-size: 2.7vw;
}
.cl_board20 #SegmentName,
.cl_board20 #SubName,
.cl_board0 #SegmentName,
.cl_boardGroupResult #SegmentName,
.cl_boardGroupResult #SubName {
    /* Размер шрифта: % от ширины экрана  */
    font-size: 2.4vw;
}


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

/* Цвета полос */
.cl_board0 #LineName,
.cl_board0 .LineTitle,
.cl_board0 .LineLast {
    background-image: linear-gradient(to right, #85008A 0%, #59005c 50%, #85008A 100%);
    color: white;
}
.cl_board0 #LineNation,
.cl_board0 #LineCoach,
.cl_board0 #LineMusic,
.cl_board0 #LineTechnics,
.cl_board0 #LineComponents,
.cl_board0 #LineDeduction,
.cl_board0 #LinePoints,
.cl_board0 #LineRank,
.cl_board0 #LineProff {
    background-image: linear-gradient(to right, #243949 0%, #517fa4 100%);
    color: white;    
}

/* Размер шрифта */
.cl_board0 .LineTitle,
.cl_board0 .LineText,
.cl_board0 #LineProff {
    font-size: 4vh;
}
.cl_board0 .LineLast {
    font-size: 5vh;
}
.cl_board0 #LineNation {
    font-size: 5vh;
}
.cl_board0 #LineName {
    font-size: 6vh;
}
/* ################################################################################################
Информационная панель:
    Кнопка: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, #243949 0%, #517fa4 50%, #243949 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, #517fa4 0%, #243949 50%, #517fa4 100%);
    color: white;
}
.cl_board20 .participantCurrent, 
.cl_boardGroupResult .participantCurrent {
    background-image: linear-gradient(to right, rgb(0, 82, 11) 0%, rgb(0, 82, 11)  51%, rgb(0, 82, 11)  100%) !important;
    color: white !important;
}

/* Размер шрифта */
.cl_board20 .LineText,
.cl_boardGroupResult .LineText,
.cl_board20 .LineTextEmpty,
.cl_boardGroupResult .LineTextEmpty {
    font-size: 4vh;
}
.cl_board20 .LineLast,
.cl_boardGroupResult .LineLast {
    font-size: 5vh;
}
.cl_board20 .LineText .Nation, 
.cl_boardGroupResult .LineText .Nation {
    font-style: italic;
    float: right;
    font-size: 4vh;
}
/* ################################################################################################
Информационная панель:
    Кнопка:Segment; - Название соревнования, группа и сегмент
*/
.cl_boardEvent .TitleBG {
    background-color: #09418a; /*#8a0974*/
    color: white;
}
.cl_boardEvent {
    /* Размер шрифта: % от ширины экрана  */
    font-size: 2.7vw;
}
.cl_boardEvent #SegmentName {
    /* Размер шрифта: % от ширины экрана  */
    font-size: 2.4vw;
}

/* ################################################################################################
Информационная панель:
    Кнопка:Time+ или Time-; - Таймер внизу экрана
*/
/* Цвет  */
.cl_boardTimer,.cl_boardTimerCircle {
    background-image: linear-gradient(to right, #517fa4 0%, #243949 50%, #517fa4 100%);
}
/* Размер шрифта */
.cl_boardTimerCircle {
    /* Высота и ширина должны быть одинаковыми!!!!!!!!*/
    width: 15vh;height:15vh;
    /* Закругление углов, должна равняться половине высоты или ширины*/
    border-radius: 7.5vh;
    /* Высота строки. Должна примерно равна высоте блока, за вычетом ширины полоски: 0.5vh  */
    line-height: 14.5vh;
    /* Размер текста */
    font-size: 6vh;
    /* На сколько выглядывает круглишок*/
    margin: -7.5vh auto;
}
/* Высота таймера с низу страницы */
.cl_boardTimer {
    height: 9vh;
}


/*  ################################################################################################
    ################################################################################################
Остальные настройки!
Дальше лучше не ковырять (редактировать)!!!!
    ################################################################################################
    ################################################################################################
*/


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

/* Остальные настройки */
.cl_board0 {
    width: 100%;
    height: 100%;
}
.cl_board0 #LineName,
.cl_board0 #LineNation,
.cl_board0 #LineCoach,
.cl_board0 #LineMusic,
.cl_board0 #LineTechnics,
.cl_board0 #LineComponents,
.cl_board0 #LineDeduction,
.cl_board0 #LinePoints,
.cl_board0 #LineRank,
.cl_board0 #LineProff {
    text-align: center;
}
.cl_board0 #LineName,
.cl_board0 #LineNation,
.cl_board0 #LineProff,
.cl_board0 .LineTitle,
.cl_board0 .LineText,
.cl_board0 .LineLast {
    padding: 1vh 1vw 1vh 1vw;
}
.cl_board0 #LineName,
.cl_board0 #LineNation,
.cl_board0 #LineCoach,
.cl_board0 #LineMusic,
.cl_board0 #LineTechnics,
.cl_board0 #LineComponents,
.cl_board0 #LineDeduction,
.cl_board0 #LinePoints,
.cl_board0 #LineRank,
.cl_board0 #LineProff {
    margin-top: 0.5vh;
}
.cl_board0 .LineLast {
    font-weight: bold;
    border-left: .3rem blue solid;
}
.cl_board0 .LineText {
    text-align: left;
}

/* Анимация: Открытие панели ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.cl_board0.cl_boardIn .TitleBG {
    animation: backInDown 1s linear 0s normal forwards;
}
.cl_board0.cl_boardIn .container-fluid .row:nth-child(odd) {
    animation: backInRight 1s linear 0s normal backwards;
}
.cl_board0.cl_boardIn .container-fluid .row:nth-child(even){
    animation: backInLeft 1s linear 0s normal backwards;
}
/* Анимация: Закрытие панели ------------------------------------------------------------- */
.cl_board0.cl_boardOut .TitleBG {
    animation: backOutUp 1s linear 0s normal forwards;
}
.cl_board0.cl_boardOut .container-fluid .row:nth-child(odd) {
    animation: backOutRight 1s linear 0s normal backwards;
}
.cl_board0.cl_boardOut .container-fluid .row:nth-child(even){
    animation: backOutLeft 1s linear 0s normal backwards;
}


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

/* Остальные настройки */
.cl_board20,
.cl_boardGroupResult {
    width: 100%;
    height: 100%;
}
#participantListContainer {
    position: relative;
    min-height: 400px;
}
#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: 1vh 1vw 1vh 1vw;
}
.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;
}
.participantListContainerItem {
    opacity: 0;
}
.participantListContainerItem>div:nth-child(1) {
    opacity: 1;
}
.participantListContainerItem.active {
    opacity: 1;
}

/* Анимация: Открытие панели ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.cl_board20.cl_boardIn .TitleBG,
.cl_boardGroupResult.cl_boardIn .TitleBG {
    animation: backInDown 1s linear 0s normal forwards;
}
.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 .TitleBG,
.cl_boardGroupResult.cl_boardOut .TitleBG{
    animation: backOutUp 1s linear 0s normal forwards;
}
.cl_board20.cl_boardOut .participantList:nth-child(odd),
.cl_boardGroupResult.cl_boardOut .participantList:nth-child(odd){
    animation: backOutRight 1s linear 0s normal forwards;
}
.cl_board20.cl_boardOut .participantList:nth-child(even),
.cl_boardGroupResult.cl_boardOut .participantList:nth-child(even){
    animation: backOutLeft 1s linear 0s normal forwards;
}

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

.cl_board0 .TitleBG,
.cl_board20 .TitleBG, 
.cl_boardGroupResult .TitleBG {
    width: 100%;
    opacity: 0;
}
.cl_board0  #TitleBlock,
.cl_board20 #TitleBlock, 
.cl_boardGroupResult #TitleBlock {
    text-align: center;
    width: 100%;
    padding: 1vh 0 1vh;
}

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


/* ################################################################################################
Информационная панель:
    Кнопка: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_board0 hr,
.cl_board20 hr, 
.cl_boardGroupResult hr {
    width: 60%;
    margin: 1vh auto;
}
/* Анимация: Открытие панели ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.cl_boardEvent.cl_boardIn {
    animation: bounceInDown 1s linear 0s normal backwards;
}
/* Анимация: Закрытие панели ------------------------------------------------------------- */
.cl_boardEvent.cl_boardOut {
    animation: hinge 1s linear 0s normal forwards;
    transform-origin: top left; 
}

/* ################################################################################################
Информационная панель:
    Кнопка:Time+ или Time-; - Таймер внизу экрана
*/
.cl_boardTimer {
    position: absolute;
    bottom:0;
    width: 100%;
    border-top: .5vh solid #cfdcec;
}
.cl_boardTimerCircle {
    border:.5vh solid #cfdcec;
    overflow:hidden;
    text-align: center;
}