@import url("./res/fonts/icons/mat-icons-2.css");
@import url('https://fonts.googleapis.com/css?family=Oswald:300,600&subset=cyrillic');

/*
primary = #E51E24
accent = #455A64
background = whitesmoke
disabled = #9E9E9E
neutral = #757575
success = #4CAF50
error = #F44336
my_chat_msg = #E3F2FD
*/


body *{
    font-family: 'Oswald', sans-serif!important;
    font-weight: 300!important;
    text-shadow: none!important;
}
/*TODO: Кнопки*/
.button-circle{
    border-radius: 50%!important;
}
.button-fab{
    padding: 12px!important;
    position: absolute;
    bottom: 32px;
    right: 32px;
    z-index: 2;
}
.button{
    background: white;
    text-align: center;
    margin: 5px;
    min-height: 32px;
    border-radius: 4px;
    border: none;
    transition: all 75ms linear;
}
.button-wide-normal{
    min-height: 3.4em!important;
    padding: 20px;
    width: 90%;
}
.button-wide-small{
    min-height: 2.6em!important;
    padding: 20px;
    width: 60%;
}

.button-square-normal{
    height: 3.4em;
    width: 3.4em;
}
.btn-pressed {
    box-shadow: 0 2px 1px rgba(0,0,0, .2)!important;
    transform: scale(.96);
    transition: all 75ms linear;
}
.btn-pressed-native:active {
    box-shadow: 0 2px 1px rgba(0,0,0, .2)!important;
    transform: scale(.96);
    transition: all 75ms linear;
}
.lst-pressed {
    transform: scale(.98);
    transition: all 500ms linear;
}
/*TODO: -------*/

/*TODO: Цвета*/
/*Цвета бэкграунда*/
.color-primary {
    background:#E51E24;
    color: white!important;
}
.color-accent {
    background: #455A64!important;
    color: white!important;
}
.color-button-primary {
    color:gray;
    border:1px solid gray;
}

.color-button-primary-background {
    background:#E51E24;
    color: white!important;
}


.color-success{
    background: #4CAF50;
    color: white;
}
.color-error{
    background: #F44336;
}
.color-me{ /*Мои сообщения чата*/
    background: #E3F2FD;
}
.color-disabled{
    background: #9E9E9E;
    opacity: .5;
}
.color-background {
     background: whitesmoke!important;
}
.color-background-white {
     background: white!important;
}
/*Цвета шрифтов*/
.color-font-primary {
    color: #E51E24!important;
}
.color-font-accent {
    color: #455A64!important;
}
.color-font-white {
     color: white!important;
}
.color-font-neutral {
     color: #757575;
}
.color-font-success {
     color: #4CAF50;
}
.color-font-beta {
    color: white;
    background-color:black!important;
}
/*Цвет рамок*/
.color-border-primary{
    border-color: #E51E24!important;
}
.color-border-accent{
    border-color: #455A64!important;
}
/*Цвет активного чекбокса*/
.x-input-el:checked+.x-field-mask::after{
    color: #455A64;
}
/*Цвет выделенного дня в расписании мобильного приложения*/
.selected {
    background: #455A64!important;
    color: white!important;
    border-radius: 6px;
}
/*Выделение пункта у bottom bar*/
.bb-selected{
    color:white!important;
}
/*Цвет четной строки в Web-расписании*/
.color-table-row {
    background: #EFEBE9;
}
/*Цвет текущего дня в Web-расписнии*/
.color-table-column {
    background: #ECEFF1;
}
/*Цвета социальных сетей*/
.color-instagram{
    background: linear-gradient(to right, #833ab4, #fd1d1d, #fcb045)!important;
    color: white!important;
}
.color-facebook{
    background: #3b5998!important;
    color: white!important;
}
.color-vk{
    background: #4c75a3!important;
    color: white!important;
}
/*TODO: ----------------*/

/*Класс для отображения занятия на которое "я" записан*/
.enroll:after {
    font-family:"icomoon";
    background: #4CAF50;
    color: white;
    float: right;
    border-radius: 16px;
    padding: 4px 12px;
    content:"\f274";
}

.font-size-smally{
    font-size: .8em!important;
}
.font-size-large{
    font-size: 1.5em;
}

.border-bottom{
    border-bottom: 1px solid lightgray!important;
}

.shadow{
    box-shadow: 0px 2px 5px 1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 2px 5px 1px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0px 2px 5px 1px rgba(0, 0, 0, 0.2);
}

.vh-centering{
    display: flex;
    align-items: center;
    justify-content: center;
}

/*Выравниевание списка дней недели в расписании мобильного приложения*/
.x-dataview-nowrap .x-dataview-container{
    display: flex!important;
    justify-content: space-around;!important
}

/*Высота списков тренировок, инструкторов и тд.*/
.list-height-large{
    position: relative;
    height: 90px;
}
/*Параметры для списка избранного*/
.custom-list .x-innerhtml{
    border:none!important;
    padding:0px!important;
    margin: 0px!important;
}
.custom-list .x-list-header{
    border:none!important;
    padding:0px!important;
}
.custom-list .x-list-header .group-header { /*Хедер группы в группированном списке*/
    padding: 0.2em 1.02em;
    background: whitesmoke;
    color: #455A64!important;
    width:100%;
    box-sizing:border-box;
}

.dialog{
    background: whitesmoke!important;
    color: black!important;
    border: none!important;
    padding:0;
    display:flex;
    flex-direction:column;
}
.x-msgbox-title {
    height:42px;
    margin-bottom:8px;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
}
.dialog .x-title{
    background-color:#E51E24!important;
    width:100%;
    text-align: left!important;
    height:100%!important;
    line-height:42px;
    margin:0!important;
}
.dialog .x-toolbar{
    padding:0!important;
}

.new-amount::before{
    z-index: 1;
    position: absolute;
    top: 4px;
    left: 4px;
    text-align: center;
    width: 14px;
    height: 14px;
    background: #455A64;
    content: '';
    border: 2px solid #E51E24;
    font-size: 8px;
    line-height: 14px;
    color: white;
    border-radius: 50%;
}

.new-amount-white::before{
    z-index: 1;
    position: absolute;
    top: 12px; right: 4px;
    height: 14px; width: 14px;
    text-align: center;
    background: #E51E24;
    content: attr(content);
    color: white;
    font-size: 8px;
    line-height: 14px;
    border-radius: 24px;
}

.collapsed:before{
    transition: all .2s;
    font-family: "icomoon";
    position: absolute;
    content: "\eb4e";
    transform: rotateX(0deg);
    width:8px;height:8px;
    bottom:2px; color: darkgray;
    left:0;right:0;
    line-height: 8px;
    margin: auto;
}

.uncollapsed:before{
    transition: all .2s;
    font-family: "icomoon";
    position: absolute;
    content: "\eb4e";
    transform: rotateX(-180deg);
    width:8px;height:8px;
    bottom:6px; color: darkgray;
    left:0;right:0;
    line-height: 8px;
    margin: auto;
}

.selected-list-item{
    background: #455A64;
    color: white;
    z-index: 555;
}

.empty-msg{
    text-align: center;
    font-size: 1.8em!important;
}

.empty-text .x-dataview-emptytext {
    text-align: center;
    margin-top: 150px;
    font-size: 1.4em;
    color: #757575;

}

.social-panel .x-panel-inner{
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
}

.x-thumb:after{
    width: 24px;
    height: 24px;
    top: 9px;
    background: rgba(255,255,255, .5);
}

.imt .x-item-disabled{
    opacity: 1!important;
}

.imt .x-slider:before{

    background: linear-gradient(45deg,   #F57C00,#F57C00, #4CAF50,#4CAF50, #D32F2F,#D32F2F)!important;
}

.btn-wrap .x-button-label{
    white-space: normal;
}

.tf-border-radius input{
    border-radius: 25px!important;
    padding-left: 16px;
}

.x-button.x-button-pressed.nps-btn-selected {
    background: #E51E24!important;
    color: white!important;
    border:none;
}

/*nps*/
.x-button.x-button-pressed.nps-btn-selected-yes {
    background: #2bb859!important;
    color: white!important;
    border:none;
}
/*nps*/
.x-button.x-button-pressed.nps-btn-selected-no {
    background: #E51E24!important;
    color: white!important;
    border:none;
}
/*nps*/
.nps-slider .x-slider:before{
    background: linear-gradient(90deg,   #f30404,#d51515, #e51c1c,#a99425, #b8c125,#069d1a)!important
}
.badge{
    z-index: 1;
    position: absolute;
    top: 4px;
    left: 4px;
    text-align: center;
    width: 14px;
    height: 14px;
    background: #455A64;
    border: 2px solid #E51E24;
    font-size: 10px;
    line-height: 14px;
    color: white;
    border-radius: 50%;
}

.badge-white{
    z-index: 1;
    position: absolute;
    top: 12px; right: 4px;
    height: 14px; width: 14px;
    text-align: center;
    background: #E51E24;
    color: white;
    font-size: 10px;
    line-height: 14px;
    border-radius: 24px;
}
.toolbar-logo {
    background:#E51E24;
    background-image:url(./media/logo/white.png)!important;
    background-position:center;
    background-size:150px;
    background-repeat:no-repeat;
}
.wc-dataview-item {
    top: -48px;
    opacity: 0;
    transition: all .3s;
}

.wave_loading {
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;

    animation-name: wave;

    animation-timing-function: linear;
    width: 96px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    background: rgba(255,255,255,0);
    background: linear-gradient(to right, rgba(255,255,255,0.001) 0%, rgba(255,255,255,.05) 25%,rgba(255,255,255,.1) 50%,rgba(255,255,255,.05) 75%, rgba(255,255,255,0.001) 100%);
}

@-webkit-keyframes wave {
    0% {

        left: -96px;

    }
    100% {

        left: 1000px;

    }
}

.wave_loading2 {
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;

    animation-name: wave2;

    animation-timing-function: linear;
    width: 96px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    background: rgba(255,255,255,0);
    background: linear-gradient(to right, rgba(255,255,255,0.001) 0%, rgba(255,255,255,.05) 25%,rgba(255,255,255,.1) 50%,rgba(255,255,255,.05) 75%, rgba(255,255,255,0.001) 100%);

}

@-webkit-keyframes wave2 {
    0% {

        left: -206px;

    }
    100% {

        left: 890px;

    }
}

.mobile-button {
    background-color:rgba(0,0,0,.4);
    border:none;
    transition: all .2s;
    font-size: 1.2em;
    min-width: 34px;
    min-height: 34px;
    line-height: 34px;
}

.mobile-button:active {
    background-color:rgba(0,0,0,.4);
    border:none;
    transform: scale(.75)
}

.mobile-button-select {
    background-color:rgba(0,0,0,.2);
    border:none;
}

.text-align{
    text-align: center;
}

/* https://tasca.oasis38.ru/#/tasks/FST-65 */
.inputDiagramCombo{
    font-size: .8em;
    text-align: center;
    padding: 1em;
}