/* 20.01.2022 в связи с разработкой мобильной версии было принято решение об организации стилей:
1) Отступить от стандартной файловой структуры проекта БЭМ, которая подразумевает наличие уровней
переопределения при разделении проекта на платформы (например: mobile, desktop)
2) Создать отдельные папки с независимыми друг от друга стилями для desktop и mobile
учитывая, что при этом будет происходить copy-paste
Ссылка на документацию БЭМ для разделения проекта на платформы:
https://ru.bem.info/methodology/redefinition-levels */

/* button style reset */
.btn {
    display: inline-block;
	vertical-align: top;
	padding: 0;

	font-family: inherit;
	background: none;
	border: 0;
    border-radius: 0;
    text-decoration: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    cursor: pointer;
}




/* btn--dashed */
.btn--dashed{
    font-family: "Exo 2", sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: calc(16.8/14);

    padding-bottom: 1px;

	border-bottom: 2px dashed;
}
.btn--dashed:hover{
    border-bottom: 2px dashed transparent;
}





/* button yellow */
.btn-yellow{
    padding: 0.385em .923em;

    font-size: 13px;
    font-weight: 400;
    color: #000;
    line-height: calc(15.6/13);

    background-color: #FFDB4D;
    border: 1px solid #FFDB4D;
    border-radius: .154em;
}
.btn-yellow:hover{
    border-color: #F2C100;
}
.btn-yellow:disabled{
    opacity: 0.5;
    cursor: not-allowed;
}


.btn-yellow + .btn-white-shadow{
    margin-left: 10px;
}


/* btn df */
.btn--df{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}







/* button white */
.btn--white{
    padding: .462em .923em;

    font-size: 13px;
    font-weight: 400;
    color: #000;
    line-height: calc(15/13);

    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: .154em;
}
.btn--white:hover{
    border-color: rgba(0, 0, 0, 0.2);
}




/* button white box shadow */
.btn-white-shadow{
    padding: 0.385em .923em;

    font-size: 13px;
    font-weight: 400;
    color: #000;
    line-height: calc(15.6/13);

    border: 1px solid #fff;
    background-color: #fff;
    border-radius: .154em;

    -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2), 0px 2px 4px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2), 0px 2px 4px rgba(0, 0, 0, 0.25);
}
.btn-white-shadow:hover{
    border-color: rgba(0, 0, 0, 0.2);
}
.btn-white-shadow + .btn-yellow{
    margin-left: 10px;
}
.btn-white-shadow:disabled{
    color: #888888;

    background: #EBEBEB;
    border: 1px solid #E6E6E6;
    cursor: not-allowed;

    -webkit-box-shadow: none;
    box-shadow: none;
}



/* btn-cross */
.btn-cross{
    width: 13px;
    height: 13px;

    background: url("../../../img/icons/cross-gray-fat-13x13.svg") center no-repeat;
}



/* btn--32x32 */
.btn--32x32{
    width: 32px;
    height: 32px;
}




/* btn-reload */
.btn--reload{
    width: 24px;
    height: 28px;

    -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2), 0px 2px 4px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2), 0px 2px 4px rgba(0, 0, 0, 0.25);
    border-radius: 2px;

    background: url("../../../img/icons/arrow-reload.svg") center no-repeat;
}



/* btn position */
/* btn position fixed */
.btn--media991df{
    display: none;

    position: fixed;
    bottom: 15px;
    right: 10px;
    z-index: 100;
}




/* btn ellipse */
.btn--ellipse{
    padding: .923em 1.154em;
    border-radius: 1.923em;
    -webkit-border-radius: 1.923em;
    -moz-border-radius: 1.923em;
    -ms-border-radius: 1.923em;
    -o-border-radius: 1.923em;
}



/* btn red */
.btn--red{
    padding: .462em .923em;

    font-size: 13px;
    font-weight: 400;
    color: #C80000;
    line-height: calc(15/13);

    background-color: #fff;
    border: 1px solid rgba(200, 0, 0, 0.2);
    border-radius: .154em;
}


.btn--red-shadow{
    padding: .462em .923em;

    font-size: 13px;
    font-weight: 400;
    color: #C80000;
    line-height: calc(15/13);

    background-color: #fff;
    border-radius: .154em;

    -webkit-box-shadow: 0px 0px 2px rgba(200, 0, 0, 0.2), 0px 2px 4px rgba(200, 0, 0, 0.25);
    box-shadow: 0px 0px 2px rgba(200, 0, 0, 0.2), 0px 2px 4px rgba(200, 0, 0, 0.25);
}
.btn--red-shadow-loading-star{
    padding-right: 37px;
    position: relative;
}
.btn--red-shadow-loading-star::before{
    position: absolute;
    content: "";
    top: 50%;
    right: 12px;

    width: 20px;
    height: 20px;

    background: url("../../../img/icons/icon-loader-star-red-20x20.svg");

    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}



.btn-red-cancel-loader{
    width: 110px;
    height: 32px;

    background-color: #fff;
    border-radius: .154em;

    -webkit-box-shadow: 0px 0px 2px rgba(200, 0, 0, 0.2), 0px 2px 4px rgba(200, 0, 0, 0.25);
    box-shadow: 0px 0px 2px rgba(200, 0, 0, 0.2), 0px 2px 4px rgba(200, 0, 0, 0.25);

    position: relative;
}
.btn-red-cancel-loader__text{
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 13px;
    font-weight: 400;
    color: #C80000;
    line-height: calc(15/13);

    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.btn-red-cancel-loader__text--loading{
    top: 50%;
    left: 12px;
    font-size: 13px;
    font-weight: 400;
    color: #C80000;
    line-height: calc(15/13);

    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.btn-red-cancel-loader--loading::before{
    position: absolute;
    content: "";
    top: 50%;
    right: 12px;

    width: 20px;
    height: 20px;

    background: url("../../../img/icons/icon-loader-star-red-20x20.svg");

    -webkit-animation: btn-loader 2s linear infinite;
	animation: btn-loader 2s linear infinite;
}




.btn-loader {
    background-color: #FFDB4D;
    border-radius: 2px;

    padding: 6px 30px;

    position: relative;

    transition: background-color 0.3s;
}
.btn-loader:hover {
    background-color: #ffd633;
}
.btn-loader::before{
    opacity: 0;
    position: absolute;
    content: "";
    top: 50%;
    right: 12px;

    width: 20px;
    height: 20px;

    background: url("../../../img/icons/icon-loader-star-black-20x20.svg");

    -webkit-animation: btn-loader 2s linear infinite;
	animation: btn-loader 2s linear infinite;

    transition: opacity 0.3s;
}
.btn-loader__text{
    display: inline-block;
	font-family: 'Exo 2', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #000000;
    line-height: calc(15.6/13);

    transition: transform 0.3s;
}
.btn-loader--loading.btn-loader::before{
    opacity: 1;
}
.btn-loader--loading .btn-loader__text {
    transform: translateX(-10px)
}
.btn-loader:disabled{
    opacity: 0.5;
    cursor: not-allowed;
}


@keyframes btn-loader {
	0%{
		-webkit-transform: translateY(-50%) rotate(0);
		-ms-transform: translateY(-50%) rotate(0);
		transform: translateY(-50%) rotate(0);
	}
	100%{
		-webkit-transform: translateY(-50%) rotate(360deg);
		-ms-transform: translateY(-50%) rotate(360deg);
		transform: translateY(-50%) rotate(360deg);
	}
}







/* btn--mw147 */
.btn--mw164{
    max-width: 164px;
}


/* btn--w100p */
.btn--w100p{
    width: 100%;
}

/* btn--nottu */
.btn--nottu{
    text-transform: none;
}






/* btn--loner */
.btn--loner{
    margin-right: 84px;
}
.btn--loner + .btn--red{
    margin-left: -74px;
}














/* btn hidden */
.btn--hidden{
    display: none !important;
}
/* !important нужен для того, чтобы "перебить"
эффект :hover у родителя table-keyword__tr*/





/* btn--mode */
.btn--mode{
    width: 28px;
    height: 28px;
}
.btn--mode + .btn--mode{
    margin-left: 10px;
}
.btn-list{
    background: url("../../../img/icons/button-mode-list-gray.svg");
}
.btn-list.btn--active{
    background: url("../../../img/icons/button-mode-list-yellow.svg");
}
.btn-brick{
    background: url("../../../img/icons/button-mode-brick-gray.svg");
}
.btn-brick.btn--active{
    background: url("../../../img/icons/button-mode-brick-yellow.svg");
}



/* btn-aside-tab */
.btn-aside-tab{
    padding: 1.071em 1.429em;

	font-family: 'Exo 2', sans-serif;
	font-style: normal;
	font-weight: bold;
	font-size: 14px;
	line-height: calc(19.6/14);
	color: #4D3A73;
    border-radius: 5px 5px 0px 0px;

    /* улучшение производительности */
    transition: none !important;
}
.btn-aside-tab--active{
	background: rgba(141, 103, 204, 0.12);
}
.btn-aside-tab--plpr8{
    padding-left: 8px;
    padding-right: 8px;
}












/* btn-filter */
.btn-filter{
    flex-shrink: 0;

    width: 28px;
    height: 28px;

    border: 1px solid #E6E6E6;
    border-radius: 2px;
}
.btn-filter:hover{
    border-color: #FFDB4D;
    background-color: #FFDB4D;
}
.btn-filter--max{
    background: #FFFFFF url("../../../img/icons/symbol-max-black.svg") center no-repeat;
}
.btn-filter--min{
    background: #FFFFFF url("../../../img/icons/symbol-min-black.svg") center no-repeat;
}




/* switches */

/* btn-angle-down-gray */
.btn-angle-down-gray{
    width: 20px;
    height: 20px;

    background: url("../../../img/icons/angle-down-gray.svg") center no-repeat;
}
/* btn-angle-up-gray */
.btn-angle-up-gray{
    width: 20px;
    height: 20px;

    background: url("../../../img/icons/angle-up-gray.svg") center no-repeat;
}


/* btn-angle-switch */
.btn-angle-switch{
    width: 28px;
    height: 28px;

    -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2), 0px 2px 4px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2), 0px 2px 4px rgba(0, 0, 0, 0.25);

    border-radius: 2px;
}
.btn-angle-switch--hidden{
    display: none;
}
.btn-angle-switch[data-btn-angle-switch="off"]{
    background: #fff url("../../../img/icons/angle-down-black-12x7.svg") center no-repeat;
}
.btn-angle-switch[data-btn-angle-switch="on"]{
    background: #fff url("../../../img/icons/angle-up-black-12x7.svg") center no-repeat;
}



/* btn-in-minus */
.btn-in-minus{
    position: relative;

    padding-left: 3.286em;
    padding-right: 1.429em;
    height: 100%;

	font-family: 'Exo 2', sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	line-height: 1;
	color: rgba(0, 0, 0, 0.5);
}
.btn-in-minus:hover{
    color: #C80000;
}
.btn-in-minus::before{
    content: "";
    position: absolute;
    top: 50%;
    left: 20px;

    width: 16px;
    height: 16px;

    background: url("../../../img/icons/minus-circle-gray-16x16.svg") center no-repeat;

    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.btn-in-minus:hover::before{
    background: url("../../../img/icons/minus-circle-red-16x16.svg") center no-repeat;
}
/* Показ при :hover в table.css */



/* btn-in-hide */
.btn-in-hide{
    position: relative;

    padding-left: 3.286em;
    padding-right: 1.429em;
    height: 100%;

	font-family: 'Exo 2', sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	line-height: 1;
	color: rgba(0, 0, 0, 0.5);
}
.btn-in-hide:hover{
    color: #4D3A73;
}
.btn-in-hide::before{
    content: "";
    position: absolute;
    top: 50%;
    left: 20px;

    width: 16px;
    height: 16px;

    background: url("../../../img/icons/eye-off.svg") center no-repeat;

    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.btn-in-hide:hover::before{
    background: url("../../../img/icons/eye-off-purple.svg") center no-repeat;
}
/* Показ при :hover в table.css */





/* btn-eye-on-gray */
.btn-eye-on-gray{
    width: 16px;
    height: 16px;

    background: url("../../../img/icons/eye-on-gray-16x16.svg") center no-repeat;
}
.btn-eye-on-gray:hover{
    background: url("../../../img/icons/eye-on-purple-16x16.svg") center no-repeat;
}
/* .btn-eye-on-gray.btn--hidden{
    display: none;
} */




/* btn-eye-off-gray */
.btn-eye-off-gray{
    width: 16px;
    height: 16px;

    background: url("../../../img/icons/eye-off.svg") center no-repeat;
}
.btn-eye-off-gray:hover{
    background: url("../../../img/icons/eye-off-purple-16x16.svg") center no-repeat;
}


.btn-three-dots{
    width: 18px;
    height: 18px;

    background: url("../../../img/icons/three-dots-gray-15x3.svg") center no-repeat;
}
.btn-three-dots--rotate90deg{
    transform: rotate(90deg);
}
.btn-three-dots--active{
    background: url("../../../img/icons/cross-gray-fat-10x10.svg") center no-repeat;
}
.btn-three-dots--hidden{
    display: none;
}

/* btn-ad */
.btn-ad{
    width: 16px;
    height: 16px;

    background: url("../../../img/icons/keyword-list.svg") center no-repeat;
}


/* btn-trash-can */
.btn-trash-can{
    position: relative;

    padding: 0.538em 0.846em 0.538em 2.769em;

    font-family: "Exo 2", sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 13px;
    line-height: calc(15.16/13);
    color: #000000;

    background-color: #fff;
    -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2), 0px 2px 4px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2), 0px 2px 4px rgba(0, 0, 0, 0.25);
    border: 1px solid #FFFFFF;
    border-radius: 2px;
}
.btn-trash-can::before{
    position: absolute;
    content: "";
    top: 50%;
    left: 12px;

    width: 20px;
    height: 20px;

    background: url("../../../img/icons/trash-can-black-15x17.svg") center no-repeat;

    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.btn-trash-can[disabled]{
    color: #888888;

    background-color: #EBEBEB;
    border: 1px solid #E6E6E6;
    -webkit-box-shadow: none;
    box-shadow: none;

    cursor: not-allowed;
}
.btn-trash-can[disabled]::before{
    position: absolute;
    content: "";
    top: 50%;
    left: 12px;

    width: 20px;
    height: 20px;

    background: url("../../../img/icons/trash-can-gray-15x17.svg") center no-repeat;

    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}





/* btn--color */
.btn--color-blue{
    color: #0054B9;
}
.btn--color-gray{
    color: #888888;
}
.btn--color-purple{
    color: #8D67CC;
}



/* margin */
.btn--ml5{
    margin-left: 5px;
}
/* padding */
.btn--plr38{
    padding-left: 38px;
    padding-right: 38px;
}
.btn--ptb8{
    padding-top: 8px;
    padding-bottom: 8px;
}
/* height */
.btn--height32{
    height: 32px;
}
/* z-index */
.btn--z3{
    position: relative;
    z-index: 3;
}