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

 /**
 * Шаблоны для "Уголок слёз и поцелуев" (Kiss and Cry)
 */
/* Делаем черный цвет фона и вставляем картинку*/
body {
    background: center / cover no-repeat #000 url("../images/background.jpg");
}
/* ################################################################################################
Информационная панель:
    Кнопка:Name; - Информация об участнике
    Кнопка:2nd Score;  - Показать индивидуальные результаты выступления
    Кнопка:Judge -> Send; - Информация об официальном лице (судья)
*/
.cl_board0 .TitleBG {
    background-image: linear-gradient(to right, #243949 0%, #517fa4 100%);
    color: white;
}
.LineName {
    background-image: linear-gradient(to right, #243949 0%, #517fa4 100%);
    color: #fff;
}
/*  */
.LineType03 {
    background-color: #37941e;
    color: white;
}
/* Цвет блока: Снижения */
.row .col:nth-child(3) .LineType03 {
    background-color: #c62828;
    color: white;
}
/*  */
.row .col:nth-child(5) .LineType03 {
    background-color: #284dc6;
    color: white;
}
/* Блок: Элементы ---------------------------------------------------------  */
/* Цвет линии элементов (по умолчанию) */
#LineElement>div.row {
    background-color: #37941e;
    color: white;
}
/* Цвет линии нечетных элементов */
#LineElement>div.row:nth-child(odd)  {
    background-color: #284dc6;
    color: white;
}
/*  Цвет линии четных элементов  */
#LineElement>div.row:nth-child(even)  {
    background-color: #37941e;
    color: white;
}
/* ------------- */
.LineTotalPoint  {
    background-color: #37941e;
    color: white;
}
/* ------------- */
.LineTotalRank  {
    background-color: #e84200;
    color: white;
}
/* Блок: Нарушения ---------------------------------------------------------- */
/* Цвет линии нечетных элементов */
#LineDeduction>div:nth-child(odd)  {
    background-color: #c62828;
    color: white;
}
/*  Цвет линии четных элементов  */
#LineDeduction>div:nth-child(even)  {
    background-color: #284dc6;
    color: white;
}
/* РАЗМЕР ШРИФТА */
.cl_board0 #SegmentName, .cl_board20 #SubName, .cl_board0 #TitleBlock {
    /* Размер шрифта: % от ширины экрана  */
    font-size: 1.7vw;
}
.LineName {
    /* Размер шрифта: % от ширины экрана  */
    font-size: 3vw;
 }
 #pTES,#pTCS,#pDedSum,#pSeqPoints,#pRank,#pBonus,#pTPoint,#pTRank {
    /* Размер шрифта: % от ширины экрана  */
    font-size: 3vw;
    font-weight: bold;
}
.LineType03, .LineTotalPoint, .LineTotalRank {
    /* Размер шрифта: % от ширины экрана  */
    font-size: 1.2vw;
    font-weight: bold;
}
#LineElement, #LineDeduction {
    /* Размер шрифта: % от ширины экрана  */
    font-size: 1.6vw;
    font-weight: bold;
}

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










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

.cl_board0 {
    width: 100%;
    height: 100%;
    opacity: 1;
}
.cl_board0 #SegmentName, .cl_board20 #SubName {
    display: inline-block;
}
.cl_board0 .TitleBG {
    width: 100%;
    opacity: 0;
}
.cl_board0 #TitleBlock {
    text-align: center;
    width: 100%;
    padding: 1vh 0;
}
.LineName {
    text-align: center;
    margin: .5% 0 0;
    padding: .1% 0;
}

/* Задаем общие параметры для блоков */
.LineType03, .LineTotalPoint, .LineTotalRank {
    text-align: center;
    width: 100%;
    padding-top: 1vh;
}
/*  */
.LineType03 {
    text-align: center;
    margin: 2% 0;
}

/*
 * Блок: Элементы ------------------
 */
#LineElement, #LineDeduction {
    text-align: center;
}
/*  */
#LineElement .LineTechDetail,
#LineDeduction .LineTechDetail {
    padding-top: .5vh;
    padding-bottom: .5vh;
}
/* ------------- */
.LineTotalPoint  {
    text-align: center;
    margin-bottom: 1vh;
}

/*
 * Блок: Нарушения ------------------
 */
#LineDeduction .row .LineTechDetail:nth-child(2) {
    text-align: left;
}


/* Анимация: Открытие панели ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.cl_board0.cl_boardIn .TitleBG {
    animation: backInDown 1s linear 0s normal forwards;
}
.cl_board0.cl_boardIn .LineName{
    animation: backInLeft 1s linear 0s normal backwards;
}
.cl_board0.cl_boardIn .LineFirst {
    animation: backInRight 1s linear 0s normal backwards;
}
.cl_board0.cl_boardIn #LineElement, .cl_board0.cl_boardIn #LineDeduction{
    animation: backInLeft 1s linear 0s normal backwards;
}
.cl_board0.cl_boardIn .LineTotalPoint, .cl_board0.cl_boardIn .LineTotalRank {
    animation: backInUp 1s linear 0s normal backwards;
}
/* Анимация: Закрытие панели ------------------------------------------------------------- */
.cl_board0.cl_boardOut .TitleBG {
    animation: backOutUp 1s linear 0s normal forwards;
}
.cl_board0.cl_boardOut .LineName{
    animation: backOutLeft 1s linear 0s normal backwards;
}
.cl_board0.cl_boardOut .LineFirst {
    animation: backOutRight 1s linear 0s normal backwards;
}
.cl_board0.cl_boardOut #LineElement, .cl_board0.cl_boardOut #LineDeduction {
    animation: backOutRight 1s linear 0s normal backwards;
}
.cl_board0.cl_boardOut .LineTotalPoint, .cl_board0.cl_boardOut .LineTotalRank {
    animation: backOutDown 1s linear 0s normal backwards;
}
/* ################################################################################################
Информационная панель:
    Кнопка:Segment; - Название соревнования, группа и сегмент
*/
.cl_boardEvent {
    position: relative;
    top:40%;
    /*background-color: rgba(255, 255, 255, 0);*/
    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 {
    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; 
}

.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
    padding-right: .5%;
    padding-left: .5%;
}