:root {
    --font-color-grey: #7b818b;
    --border-bottom: 1px solid #727183;
    --active-color: #5276ad;
    --accent-color: #5bb434;
}

/* fallback */

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/materialicons/v31/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2');
}

.masterVillages {
    position: absolute;
    right: 37px;
    top: 10px;
    width: 17px !important;
    height: 23px;
    background: url(/static/imgs/village.svg) no-repeat 0 50%;
    transition: .5s;
    opacity: .8;
}

.masterVillages:hover {
    opacity: 1;
}

.villages-wrapper {
    max-height: 500px;
    overflow: auto;
}

.template.village {
    width: 930px !important;
    height: auto;
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

@font-face {
    font-family: RobotoRegular;
    src: url(/static/fonts/roboto/Roboto-Regular.eot);
    src: url(/static/fonts/roboto/Roboto-Regular.eot) format('embedded-opentype'),
    url(/static/fonts/roboto/Roboto-Regular.woff) format('woff'),
    url(/static/fonts/roboto/Roboto-Regular.ttf) format('truetype'),
    url(/static/fonts/roboto/Roboto-Regular.svg#OpenSansRegular) format('svg')
}

* {
    padding: 0;
    margin: 0
}

input,
textarea,
select,
button {
    font-family: RobotoRegular;
    font-size: 16px;
    outline: none;
    border: none;
}

#singleItems .list::-webkit-scrollbar {
    width: 0px;
}

#spa .mdl-textfield__input::-webkit-scrollbar {
    width: 10px;
}

.scroll-menu::-webkit-scrollbar {
    width: 4px;
}

.scroll-menu::-webkit-scrollbar-thumb {
    background: #5175b1;
}

.scroll-menu::-webkit-scrollbar-track {
    background-color: #d8d8e8;
}

#compositeItems .list::-webkit-scrollbar,
#singleView .list::-webkit-scrollbar {
    width: 1px
}

#spa .mdl-textfield__input::-webkit-scrollbar-thumb,
#singleItems .list::-webkit-scrollbar-thumb,
#compositeItems .list::-webkit-scrollbar-thumb,
#compositeItems .list::-webkit-scrollbar-track {
    background: #b4c6ea
}


#singleItems .list::-webkit-scrollbar-thumb,
#singleView .list::-webkit-scrollbar-thumb,
#singleView .list::-webkit-scrollbar-track {
    background: #fff
}

#spa .mdl-textfield__input::-webkit-scrollbar-thumb,
.full.desc-field::-webkit-scrollbar-thumb {
    background: #a5b8d9;
    border-radius: 1px;
}

#spa html {
    height: 100%;
    line-height: 0;
}

body {
    background-color: #f9f9f9;
    color: #555;
    font-family: RobotoRegular !important;
    font-size: 14px;
    font-weight: 300;
    width: 100%;
    height: 100%;
    overflow-y: hidden;
}

.clear {
    clear: both;
    width: 99%
}

#splash {
    font-size: 20px;
    position: relative;
    text-align: center;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    line-height: 450px
}

.auth a {
    background: #5175b1;
    color: #fff;
}

.panels {
    background: #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, .25)
}

#panel_top {
    height: 48px;
    width: 100%;
    z-index: 3
}

#menu {
    height: 100%;
    width: 72px;
    z-index: 5
}

.tab_buttons {
    padding: 16px 30px;
    color: #fff;
    text-transform: uppercase;
    cursor: pointer;
    user-select: none;
    text-align: center
}

#mainHead {
    background: #5bb434;
    padding-right: 50px !important;
    position: relative;
    z-index: 10;
    height: 20px;
    width: 227px;
}

.menu {
    background-repeat: no-repeat;
    background-position: 0 50%;
    cursor: pointer;
    height: 24px;
    left: 23px;
    width: 24px;
    position: relative;
    margin-top: 30px;
    opacity: 0.5;
}

#logo {
    background: url(/static/imgs/logo.png) no-repeat 0 50%;
    margin-top: 10px;
    margin-left: -6px;
    width: 44px !important;
    opacity: 1;
}

#user {
    background-position: 0 50%;
    background-repeat: no-repeat;
    border-radius: 100px;
    background-size: contain;
    height: 38px;
    left: 16px;
    position: relative;
    width: 38px;
    opacity: 1;
}

.menu.active,
.menu:hover {
    opacity: 1;
    outline: none;
}

#settings {
    background-image: url(/static/imgs/setting-default.png);
    bottom: 50px;
    position: absolute;
    opacity: 1;
}

.menu-settings {
    position: absolute;
    right: 15px;
    top: 30px;
    box-shadow: 0 0 5px rgba(0, 0, 0, .25);
    z-index: 15;
    text-align: left;
}

.menu-settings .settings-item {
    line-height: 2;
    padding: 5px 30px;
    border-bottom: 1px solid #dce6ff;
    background: #fff;
    color: #5d74ae;
    text-transform: initial;
    box-shadow: inset -1px 1px 1px rgba(0, 0, 0, .15);
}

.menu-settings > div:hover {
    background: #dce6ff
}

.menu-settings.active {
    display: block
}

.dropDownMenu .menu-settings {
    right: auto;
    top: 52px;
    left: 0;
    width: 100%;

}

#exit {
    background-image: url(/static/imgs/logout-default.png);
    bottom: 0px;
    position: absolute;
    opacity: 1;
}

.tooltip {
    background: #fff;
    border: 1px solid #dedede;
    box-shadow: 0 0 2px rgba(0, 0, 0, .15);
    display: none;
    font-size: 12px;
    left: 32px;
    position: absolute;
    padding: 2px 10px;
    top: 4px;
    width: auto;
    user-select: none
}

#menu .menu:hover .tooltip {
    display: block
}

.absolute {
    position: absolute
}

.relative {
    position: relative
}

.fixed {
    position: fixed
}

.main {
    left: 72px;
    height: 100%;
    position: absolute
}

#compositeItems {
    background: #fff;
    height: 100%;
    width: 308px;
}

#compositeItems .list {
    overflow-x: hidden;
    overflow-y: scroll;
    user-select: none;
    width: inherit;
    height: calc(100% - 52px);
}

#compositeItems .list .master {
    border-bottom: 1px solid #b4c6ea;
    background-position: 10px 50%;
    background-repeat: no-repeat;
    cursor: pointer;
    color: #5175b1;
    font-size: 15px;
    padding: 30px 70px;
    position: relative;
    background-size: 40px;
}

#compositeItems .list .master.active {
    background-color: #dce6ff !important
}

#compositeItems .list .active div:nth-child(2),
#compositeItems .list .city.active div:first-child {
    font-weight: bold;
}

.blanc {
    height: 49px;
    padding: 0
}

.count-items {
    bottom: 10px;
    background: url(/static/imgs/tariffs-city.png) no-repeat 0 50%;
    position: absolute;
    right: 12px;
    width: 40px !important;
    text-align: right;
    font-size: 13px
}

.masterSetts {
    position: absolute;
    right: 8px;
    top: 10px;
    width: 17px !important;
    height: 23px;
    background: url(/static/imgs/tariff/setting-openmenu16.png) no-repeat 0 50%;
    opacity: .7;
    transition: .5s;
}

.masterSetts:hover {
    opacity: 1;
}

#singleItems {
    width: 250px;
    height: 100%;
    background: #f2f5ff;
    position: absolute;
    left: 307px;
    *z-index: 2;
    top: 0;
    box-shadow: inset -1px 1px 1px rgba(0, 0, 0, .15)
}

#singleItems .list {
    /*max-height: 78%;*/
    height: 89%;
    overflow-y: auto;
    overflow-x: hidden;
}

#singleItems .list .view.active {
    background-color: #fff;
    box-shadow: -1px 1px 1px rgba(0, 0, 0, .15)
}

.view:not([data-type='tvs']):not([data-type='nets']):not([data-type='categoriesPages']):not([data-type='vacancies']):not([data-type='quizzes']):not([data-type='docs']) {
    background-position: 5px 50%;
    background-repeat: no-repeat;
    background-size: 20%;
}

.view:not([data-type='tvs']):not([data-type='nets']):not([data-type='categoriesPages']):not([data-type='vacancies']):not([data-type='quizzes']):not([data-type='docs']) .name {
    margin-left: 40px;
    width: 90%;
    font-size: 17px !important;
}

.view[data-type='cctv'].object {
    background-color: #deffe3;
}

.view[data-type='cctv'].table {
    background-color: #ffe7e7;
}

.view[data-type='cctv'].released {
    background-color: #cce5ff;
}

.view[data-type='cctv'] .name,
.view[data-type='docs'] .name {
    font-size: 14px !important;
}

.view:not([data-type='tvs']):not([data-type='nets']):not([data-type='categoriesPages']):not([data-type='vacancies']):not([data-type='quizzes']) .city_name {
    margin-left: 40px;
    width: 120%;
    font-size: 12px !important;
}

.additions[data-iptv='1'],
.view[data-type='tvs'][data-iptv='1'] {
    background-image: url(/static/imgs/iptv.png);
    background-repeat: no-repeat;
    background-position: 0 100%;
}

.additions[data-ott='1'],
.view[data-type='tvs'][data-ott='1'] {
    background-image: url(/static/imgs/icon_ott.png);
    background-repeat: no-repeat;
    background-position: 0 100%;
}

.additions[data-cable='1'],
.view[data-type='tvs'][data-cable='1'] {
    background-image: url(/static/imgs/icon_cable.png);
    background-repeat: no-repeat;
    background-position: 0 100%;
}

.view[data-isCategory='1'] {
    background-image: url(/static/imgs/seo-category.png);
    background-repeat: no-repeat;
    background-position: 0 100%;
}

.settings {
    background: url(/static/imgs/tariff/setting-openmenu16.png) no-repeat 0 50%;
    cursor: pointer;
    height: 16px;
    position: absolute;
    right: 8px;
    top: 10px;
    transition: .5s;
    width: 16px;
    opacity: .7;
}

.icon-size16 {
    height: 16px;
    width: 16px
}

.settings:hover {
    opacity: 1;
}

#singleItems .list .view {
    border-bottom: 1px solid #b2c0dd;
    position: relative;
    padding: 32px 20px;
    transition: .3s;
}

#singleItems .list .view:hover {
    background-color: #fff;
    cursor: pointer;
    box-shadow: -1px 1px 1px rgba(0, 0, 0, .15)
}

.docs-upload:hover,
.settings-item[data-action="addItem"]:hover,
.settings-item[data-action="addItem"] {
    background: #5bb434;
    color: #fff;
}

#status > .filter_btn > .material-icons:first-child {
    display: none;
}

#status > .filter_btn.with-filters > .material-icons:first-child {
    display: unset;
    position: absolute;
    color: #fff;
    left: 12px;
    top: 12px;
}

.docs-upload {
    text-align: center;
    background: #5bb434;
    color: #fff;
    width: 37%;
    font-family: inherit;
    height: auto;
    left: 25%;
    position: absolute;
    bottom: 15px;
}

#addItem {
    text-align: center;
    background: #5bb434;
    color: #fff;
    width: 50%;
    font-family: inherit;
    height: auto;
    left: 25%;
    position: absolute;
    bottom: 15px;
}

.view .name {
    font-size: 22px;
    color: #5175b1;
    word-wrap: break-word;
}

.city_name {
    font-size: 12px;
    color: #5175b1
}

.info {
    right: 10px
}

.info > div {
    float: left;
    margin-left: 10px;
    font-size: 12px;
    width: 36px;
    text-align: right;
    padding: 2px
}

.list .view .count {
    background: url(/static/imgs/tariff/chanels16.png) no-repeat 0 50%
}

.list .view .service.count {
    background: url(/static/imgs/tariff/services16.png) no-repeat 0 50%
}

#archive {
    position: absolute;
    padding: 0;
    bottom: 0;
    color: #fff;
    width: 100%;
    height: 50px;
    line-height: 3.8;
    transition: .7s;
    background-image: url(/static/imgs/arhivearrowup.png);
    background-repeat: no-repeat;
    background-position: 90% 54%
}


#filterItemsBtn,
#active,
#archive {
    background-color: #b2c0dd
}

#archive.active {
    background-color: #5d74ae;
    position: static;
    background-image: url(/static/imgs/arhivearrowdown.png)
}

#filterItemsBtn + .dropDownMenu > .menu-settings {
    position: inherit !important;
}

#filterItemsBtn.active,
#filterItemsBtn + .dropDownMenu > .menu-settings > .settings-item.active,
#active.active {
    color: #fff !important;
    background-color: #5d74ae !important;
}

#singleView {
    position: absolute;
    top: 0;
    left: 630px;
    background: #fff;
    width: calc(100% - 640px);
    min-width: 1170px;
    height: 100%
}

#interfaces {
    width: 98%;
    height: 50px;
    margin: 0 auto;
    display: flex;
}

#status > .filter_btn > .material-icons:last-child,
#interfaces:not([data-interface="Filter"]) .material-icons {
    position: relative;
    right: -68px;
    top: 4px;
}

div[data-interface="Filter"] > .material-icons {
    position: absolute;
    right: 10px;
}


#singleView .tab_buttons {
    color: #aabbdc;
    float: left;
    padding: 15px 30px;
    position: relative;
}

#singleView .tab_buttons.active {
    color: #5d74ae;
    border-bottom: 2px solid
}

.channel {
    float: left;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 57px;
    background-color: #e9efff;
    height: 56px;
    width: 56px;
    padding: 10px;
    margin: 5px;
    border-radius: 3px;
    position: relative;
    cursor: pointer;
    transition: .5s;
    display: none
}

.channel.active[data-public='0'] {
    box-shadow: 0 0 2px 1px #5bb434;
    display: block;
}

.channel.active[data-public='1'] {
    background-color: #1f8ee0;
    display: block;
}

.channel.active[data-public='2'] {
    box-shadow: 0 0 0px 1px red;
    display: block;
}

#singleView .list {
    overflow-y: scroll;
    /* max-height: 87%; */
    padding: 16px 32px;
    /* min-height: 88%; */
    margin-top: 3px;
    height: calc(100% - 100px);
}

.format {
    padding: 15px 5px;
    font-size: 20px;
    cursor: pointer;
    user-select: none
}

.format div:first-child {
    float: left;
    margin-right: 20px
}

.info_view {
    width: 20px;
    height: 20px;
    background: url(/static/imgs/info.png) no-repeat 50%;
    position: absolute;
    right: 3px;
    bottom: 3px;
    cursor: pointer;
}

#info {
    width: 175px;
    min-height: 50px;
    position: absolute;
    top: 18px;
    background: #fff;
    box-shadow: 0 0 2px rgba(0, 0, 0, .25);
    z-index: 10;
    padding: 8px;
    border-radius: 3px;
    left: 20px;
}

#info .name {
    font-size: 18px
}

#info .head_includes {
    margin-top: 10px;
    font-size: 16px
}

#info .includes {
    margin-top: 5px;
    color: #7b899b;
    font-size: 14px
}

#singleView .list .quality {
    position: absolute;
    width: 52px;
    height: 11px;
    left: 5px;
    top: 5px
}

#singleView .list .channel[data-quality=sd] .quality {
    background: url(/static/imgs/channels/quality/sd.png) no-repeat 0 50%
}

#singleView .list .channel[data-quality=hq] .quality {
    background: url(/static/imgs/channels/quality/hq.png) no-repeat 0 50%
}

#singleView .list .channel[data-quality=hd] .quality {
    background: url(/static/imgs/channels/quality/hd.png) no-repeat 0 50%
}

#singleView .list .channel[data-quality=sdhq] .quality {
    background: url(/static/imgs/channels/quality/sdhq.png) no-repeat 50%
}

#singleView .list .channel[data-quality=hdhq] .quality {
    background: url(/static/imgs/channels/quality/hdhq.png) no-repeat 50%
}

#singleView .list .channel[data-quality=fullhd] .quality {
    background: url(/static/imgs/channels/quality/fullhd.png) no-repeat 0 50%
}

#singleView .wrap div[data-include='channel'][data-public='0'] {
    background: url(/static/imgs/not-public.png) no-repeat 10% 50%;
}


.public-category {
    float: right;
    display: none;
}

#singleItems .list .view[data-public='0'] .public {
    background: url(/static/imgs/not-public.png) no-repeat 0 50%;
    width: 15px;
    height: 15px;
    position: absolute;
    top: 10px;
}

.channel.showAll {
    display: block !important
}

.channel:active {
    box-shadow: 0 0 4px 2px #1f8ee0;
}

.format .counts {
    float: left
}

.show-hidded {
    float: left;
    width: 35px;
    height: 25px;
    cursor: pointer
}

.show-hidded[data-status="0"] {
    background: url(/static/imgs/down.png) no-repeat 50%
}

.show-hidded[data-status="1"] {
    background: url(/static/imgs/up.png) no-repeat 50%
}

#q-filter {
    background: #f2f5ff;
    border-radius: 2px;
    padding: 10px 20px;
    position: fixed;
    z-index: 10;
    width: calc(95% - 640px);
    box-shadow: 0 0 5px rgba(0, 0, 0, .25);
}

#q-filter .head {
    font-size: 16px;
    margin-right: 20px
}

.control-group {
    display: inline
}

.control {
    font-size: 14px;
    position: relative;
    padding-left: 20px;
    cursor: pointer;
    margin-right: 40px
}

.control input {
    position: absolute;
    z-index: -1;
    opacity: 0
}

.indicator {
    position: absolute;
    top: 0;
    left: 0;
    width: 14px;
    height: 14px;
    border: 1px solid #2879c4;
    border-radius: 50%
}

.indicator:after {
    position: absolute;
    display: none;
    content: '';
    border-radius: 50%;
    top: 2px;
    left: 2px;
    width: 10px;
    height: 10px;
    background: #2879c4
}

.control input:checked ~ .indicator:after {
    display: block
}

.hideFiltered {
    display: none !important
}

.channels-container[data-mode=double] {
    width: 48.5%;
    float: left
}

.channels-container {
    margin-top: 60px
}

.channels-container[data-mode=double]:last-child {
    border-left: 1px solid #e4ebfc;
    padding-left: 10px
}

.channels-container .item-name {
    font-size: 25px;
    font-family: inherit;
    color: var(--active-color);
    padding-left: 5px;
    user-select: none;
}

/*Params*/

#singleView #interfacesWrap {
    border-bottom: 1px solid #dedede;
    margin-bottom: 20px;
}

.mdl-checkbox {
    width: auto;
}

#spa .mdl-checkbox__label {
    font-size: 14px;
}

#wrap-status label {
    margin-right: 10px;
}

#isActual .indicator {
    top: 2px;
}

#wrap-status, #kind {
    padding: 0 0 10px 0;
    border-bottom: 1px solid #dbe6ff;
    margin-bottom: 20px;
}

.status {
    margin-top: 10px;
}

.mdl-textfield__label:after {
    background-color: #5d74ae;
}

#url input[type=text],
#item-id input[type=text] {
    width: 100%;
    color: var(--font-color-grey);
}

.blazonHead .mdl-textfield {
    margin-top: 28px;
}

.bonusTv,
#prices input {
    font-size: 24px;
    color: var(--font-color-grey);
}

label {
    color: var(--active-color);
}

.extends {
    margin: 20px 0;
}

.name-attribute {
    float: left;
    margin-right: 30px;
    width: 310px;
}

.price-attribute {
    float: left;
    margin-right: 30px;
    width: 136px;
}

.service .price-attribute {
    width: 260px;
    position: relative;
}

.service .price-attribute.toggle .count-symb {
    left: -55px;
    top: 60px;
}

/*Toggle promo price*/

.checkbox + label {
    cursor: pointer;
}

.checkbox:not(checked) {
    position: absolute;
    opacity: 0;
}

.checkbox:not(checked) + label {
    position: relative;
    padding: 0 0 0 60px;
}

.checkbox:not(checked) + label:after,
.checkbox:not(checked) + label:before {
    content: '';
    position: absolute;
}

.checkbox:not(checked) + label:before {
    top: -1px;
    left: 3px;
    width: 44px;
    height: 20px;
    border-radius: 13px;
    background: #cdd1da;
}

.checkbox:not(checked) + label:after {
    top: -2px;
    left: 2px;
    width: 22px;
    height: 22px;
    border-radius: 10px;
    background: #dbe6ff;
    box-shadow: 0 0px 5px rgba(0, 0, 0, .3);
    transition: all .2s;
}

.checkbox:checked + label:before {
    background: var(--active-color);
}

.checkbox:checked + label:after {
    left: 26px;
}

#delete button {
    margin-top: 20px;
    background: #8198bb;
    color: #fff;
}

#delete input:active {
    background: #dedede;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, .25);
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    /* -webkit-appearance: none; */
    margin: 0;
}

/*filter-arbitrary*/

#filter-arbitrary {
    height: 50px;
    border-bottom: 1px solid #b2c0dd;
}

.filter-multy-list input[type=text] {
    background: url(/static/imgs/search.png) no-repeat 0 50%;
    border-bottom: 1px solid #8198bb;
    font-size: 16px;
    padding-left: 20px;
    width: 100%;
}

#filter-arbitrary input[type=text] {
    background: url(/static/imgs/search.png) no-repeat 0 50%;
    margin-top: 15px;
    border-bottom: 1px solid #8198bb;
    width: 180px;
    margin-left: 23px;
    padding-left: 20px;
    height: 25px;
    font-size: 16px;
}

/*Popups*/

#overlay {
    position: absolute;
    background: rgba(0, 0, 0, 0.42);
    width: 100%;
    height: 100%;
    z-index: 12;
    transition: .5s;
}

#overlay > div.proposal-form {
    width: 700px;
}

#overlay > div {
    width: 400px;
    min-height: 140px;
    background: #fff;
    margin: 0 auto;
    margin-top: 5%;
    padding: 20px;
    border-radius: 2px;
    transition: .5s;
}

.template.city {
    width: 680px !important;
    height: auto;
}

#overlay > div .head {
    font-size: 16px;
    margin-bottom: 10px;
}

#overlay .wrap-input button {
    margin-top: 50px;
    color: #fff;
    background: #858585;
}

#overlay .wrap-input button:not(.cancel) {
    background: #91d04e;
}

#overlay .wrap-input {
    text-align: right;
}

#edit .box {
    height: 50px;
    width: 300px;
    margin-bottom: 30px;
}

#edit .head,
.template.formats .head {
    font-size: 20px;
    margin-bottom: 40px;
}

#edit .box.nameUkHead {
    margin-top: 79px;
}

#singleView .template {
    width: 700px;
}

/*file upload*/

#edit label.upload {
    font-size: 14px;
    color: #778cbb;
    position: relative;
    left: 70px;
    top: 10px;
}

#edit .file-upload input[type="file"] {
    opacity: 0;
}

.template.city .img-block,
#editChannels .img-block {
    width: 50px;
    height: 64px;
    margin-top: 10px;
    margin-left: -5px;
    background-repeat: no-repeat;
    background-position: 0 50%;
}

.hint {
    color: #858585;
    font-size: 12px;
    margin-top: 10px;
    width: 300px;
}

#spa .mdl-tooltip {
    font-family: Arial, Helvetica, sans-serif;
}

/*Publication*/

.drag {
    box-shadow: 0 0 15px #5d74ae !important;
    z-index: 100;
}

.unique {
    position: absolute;
    bottom: -17px;
    left: 0;
    transition: .7s;
    color: #ff0d03;
    font-weight: 100;
    font-size: 12px;
}

.master[data-type=channel] {
    padding: 30px !important;
}

.countChannels {
    position: absolute;
    right: 10px;
}

#singleItems .list .view[data-type=channels] {
    background-repeat: no-repeat;
    background-size: 30%;
    background-position: 5px 50%;
    padding: 48px 8px !important;
}

#singleItems .list .view[data-type=channels] .name {
    font-size: 16px;
    color: #5175b1;
    position: absolute;
    left: 20%;
    top: 43%;
    width: 280px;
    overflow: hidden;
}

#editChannels .img-block {
    width: 150px;
    height: 80px;
}

#editChannels label.upload {
    font-size: 14px;
    color: #778cbb;
    position: relative;
    left: 170px;
    top: 30px;
}

#editChannels .file-upload input[type="file"] {
    opacity: 0;
}

#editChannels .name-attribute input {
    color: var(--font-color-grey);
}

#editChannels entrances {
    margin-top: 50px;
    display: block;
}

/*Extends packages*/

.extends > label {
    display: block;
}

.additions {
    float: left;
    margin-right: 4px;
    padding: 15px 25px;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, .25);
    margin-bottom: 4px;
    position: relative;
    background-color: #f2f5ff;
}

.warning .editUnique {
    width: 14px;
    height: 14px;
    background: url(/static/imgs/tariff/editUnique.png) no-repeat 0 50%;
    position: absolute;
    top: 11px;
    left: 40px;
}

.deletable .editUnique {
    width: 22px;
    height: 22px;
    background: url(/static/imgs/tariff/trash-can-outline.png) no-repeat 0 50%;
    position: absolute;
    top: 11px;
    left: 40px;
}

.cat-select-head {
    font-size: 14px;
    color: var(--active-color);
}

.cat-select {
    margin-bottom: 20px;
}

.cat-select select {
    border: none;
    border-bottom: var(--border-bottom);
    margin-top: 10px;
    padding: 2px 0px;
    width: 260px;
    color: var(--font-color-grey);
}

.cat-select select option {
    padding: 10px 10px;
    outline: none;
}


.img-block {
    margin: 30px 10px;
    background-repeat: no-repeat;
    background-position: 0 50%;
    background-size: 60%;
    background-size: contain;
    width: 300px;
    height: 200px;
}

.service .img-block {
    background-size: auto !important;
}

file input {
    opacity: 0;
}

label.upload:not([data-type=docs]) {
    font-size: 14px;
    color: #778cbb;
    position: relative;
    left: 320px;
    top: 30px;
}

.count-symb {
    position: absolute;
    right: 0;
    font-size: 12px;
}

.desc-field {
    overflow-y: auto;
    border: none;
    border-bottom: 1px solid #6d7381;
    width: 680px;
    outline: none;
    padding: 5px;
    font-family: Arial, Helvetica, sans-serif;
    overflow: hidden;
}

.snippets-lang-tab,
.lang-tab {
    float: left;
    color: #a5b8d9;
    padding: 14px 18px;
    cursor: pointer;
}

.desc-head {
    font-family: inherit;
    font-size: 14px;
    color: var(--active-color);
}

.lang-tabs {
    border-bottom: 1px solid #dfebfb;
    width: 248px;
    margin-bottom: 20px;
}

.lang-tab.active {
    color: var(--active-color);
    border-bottom: 2px solid #005294;
}

.full.desc-field::-webkit-scrollbar {
    width: 3px;
}


#filename {
    cursor: pointer;
    outline: none;
}

.device a {
    text-decoration: none;
    color: #5175b1;
    transition: .5s;
    font-weight: bold;
}

.device a:hover {
    color: #223B63;
}

.device .youtube input {
    border-bottom: 1px solid #6d7381;
    padding: 10px 2px;
    width: 300px;
    color: inherit;
    font-size: inherit;
}

/**Device characts*/

#itemCharacts .itemCharacts {
    float: left;
}

.itemCharacts.mdl-textfield {
    margin-left: 32px;
    top: -11px;
}

.itemCharacts .mdl-textfield__label {
    color: var(--font-color-grey);
    font-family: inherit;
}

.itemCharacts .mdl-textfield__label:after {
    background-color: var(--active-color);
}

#spa .mdl-textfield__input {
    font-family: inherit;
    color: var(--font-color-grey);
    background: #fff;
}

#spa textarea.mdl-textfield__input {
    overflow-y: scroll;
}

.mdl-textfield--floating-label.is-dirty .mdl-textfield__label,
.mdl-textfield--floating-label.is-focused .mdl-textfield__label {
    color: var(--active-color) !important;
    font-size: 14px;
}

.container-works .mdl-button.mdl-js-button.mdl-button--raised.mdl-js-ripple-effect,
#itemQuestions .mdl-button.mdl-js-button.mdl-button--raised.mdl-js-ripple-effect,
#itemCharacts .mdl-button.mdl-js-button.mdl-button--raised.mdl-js-ripple-effect {
    margin-left: 32px;
    min-width: 36px;
    padding: 0 8px;
}

.mdl-button.download {
    position: inherit;
    bottom: 15px;
}

#clauseInner,
#container-characts {
    margin-top: 20px;
    position: relative
}

#container-characts {
    border-top: 1px solid #dedede;
}

#clauseInner #container-questions .row,
#clauseInner #container-characts .row {
    width: auto;
    margin: 30px 0;
}

.key,
.value {
    word-wrap: break-word;
    border-bottom: var(--border-bottom);
    width: 260px;
    margin-right: 32px;
    float: left;
    padding: 4px 0;
    font-size: 16px;
    color: var(--font-color-grey);
}

.value {
    word-wrap: break-word;
    min-width: 300px;
    margin-right: 0px;
}

#device-nott {
    padding: 20px 10px;
    font-size: 16px;
}

#device-nott i {
    position: relative;
    top: 5px;
    left: -8px;
    color: #ffd373;
}

#itemCharacts .row .wrap-buttons {
    position: relative;
    bottom: 8px;
}

#itemCharacts .desc-head {
    position: absolute;
    color: var(--active-color);
    left: 294px;
    top: 0px;
}

/** Recommends */

.recommnends .head {
    font-size: 16px;
    color: var(--active-color);
}

.recommnends .inner {
    padding: 20px 0;
}

.recommnends .inner > div:not(.clear) {
    float: left;
    padding: 16px 40px;
    margin-right: 4px;
    color: #676b70;
    border-radius: 2px;
    cursor: pointer;
    transition: 0.3s;
    position: relative;
    margin-bottom: 4px;
    background-color: #f2f5ff;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, .25);
}

.recommnends .inner > .include:not(.clear) i {
    position: absolute;
    bottom: 8px;
    right: 8px;
}

.recommnends .inner > div:not(.clear).active {
    background-color: #0076d6;
    color: #fff;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, .25);
}

.info-recommend {
    top: 20px;
    left: 20px;
    position: absolute;
    z-index: 10;
    width: 240px;
    height: 140px;
    background-size: 180px 120px;
    background-repeat: no-repeat;
    background-position: 50% 90%;
    background-color: #fff;
    border-radius: 2px;
    text-align: center;
    padding: 8px;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, .25);
    color: #676b70;
}

#spa .mdl-radio__inner-circle {
    background: var(--active-color);
}

#spa .mdl-radio.is-checked .mdl-radio__outer-circle,
#spa .mdl-checkbox.is-checked .mdl-checkbox__box-outline {
    border: 2px solid var(--active-color);
}

#itemCreate .mdl-radio.is-upgraded:nth-child(n+2) {
    margin-left: 12px;
}

#itemCreate .type-head {
    font-size: 16px;
}

#itemCreate .type-head.last {
    margin-top: 20px;
}

#spa .mdl-checkbox.is-checked .mdl-checkbox__tick-outline {
    background-color: var(--active-color);
}

.price-attribute.toggle .mdl-switch.is-checked .mdl-switch__thumb {
    color: var(--active-color);
    background: var(--active-color) !important;
}

.price-attribute.toggle .mdl-switch__thumb {
    color: var(--active-color);
    background: #f2f5ff !important;
}

.price-attribute.toggle .mdl-switch__track {
    background: #b4c6ea;
}

.price-attribute.toggle .mdl-switch.is-checked .mdl-switch__track {
    background: #b4c6ea;
}

.price-attribute.toggle .mdl-switch__label {
    font-size: 14px;
}

#spa .mdl-textfield__input:disabled {
    border-bottom: 1px dashed var(--font-color-grey);
    color: #bababae0;
}

#spa .mdl-textfield.is-disabled.is-disabled .mdl-textfield__label {
    color: #727183 !important;
}

.control-group .mdl-radio {
    margin-right: 25px;
}

.quality-toggle,
.doneAll {
    outline: none;
}

#speed > div[data-mdl] {
    margin-right: 37px;
}

#speed > div input {
    font-size: 24px;
}

.slider label.upload,
.stock label.upload,
.news label.upload {
    top: 80px;
    left: 380px;
}

.text-include {
    width: 200px;
    height: 100px;
}

/*datepicker*/
.picker-single {
    z-index: 9999;
    display: block;
    position: relative;
    color: #333;
    border: 0px;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
}

.picker-single:before,
.picker-single:after {
    content: " ";
    display: table;
}

.picker-single:after {
    clear: both;
}

.picker-single {
    *zoom: 1;
}

.picker-single.is-hidden {
    display: none;
}

.picker-single {
    position: fixed;
    top: 5%;
    left: 50%;
    margin-left: -135px;
}

.picker-picker {
    background-color: transparent;
    transition: background-color .26s ease;
    position: fixed !important;
    top: 0 !important;
    bottom: 0;
    left: 0 !important;
    right: 0;
}

.picker-lendar {
    width: 270px;
    box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.9);
    background-color: #fff;
    margin: -50% auto 0;
    padding: 0 0 15px 0;
    transition: all .26s ease;
    position: relative;
}

.im-here .picker-lendar {
    margin-top: 10%;
}

.im-here .picker-picker {
    background-color: rgba(0, 0, 0, 0.15);
}

.picker-title {
    position: relative;
    text-align: center;
    background-color: #566dd1;
    padding: 27px 19px 13px;
    overflow: hidden;
}

.picker-label {
    display: inline-block;
    *display: inline;
    position: relative;
    z-index: 9999;
    margin: 0;
    font-weight: 400;
    color: #fff;
    background-color: transparent;
}

.picker-label.dayname {
    display: block;
    background-color: #425ccc;
    margin: -27px -19px 16px;
    padding: 4px;
}

.picker-label.day {
    display: block;
    font-size: 50px;
    line-height: 50px;
    padding: 0;
    width: 80px;
    margin: 0 auto;
}

.picker-label.month {
    text-transform: uppercase;
    font-size: 20px;
    line-height: 20px;
    padding: 0;
}

.picker-label.year {
    font-size: 20px;
    line-height: 20px;
    padding: 0;
    color: #a6b2e7;
}

.picker-title select {
    cursor: pointer;
    position: absolute;
    z-index: 9998;
    margin: 0;
    left: 0;
    top: 5px;
    filter: alpha(opacity=0);
    opacity: 0;
}

.picker-prev,
.picker-next {
    display: block;
    cursor: pointer;
    position: absolute;
    top: 0;
    outline: none;
    border: 0;
    padding: 0;
    width: 34px;
    height: 100%;
    text-indent: 68px;
    white-space: nowrap;
    overflow: hidden;
    background-color: transparent;
    *position: absolute;
    *top: 0;
    transition: opacity .26s ease;
    opacity: .3;
}

.picker-prev:hover,
.picker-next:hover {
    opacity: .8;
}

.picker-prev:hover,
.picker-next:hover {
    opacity: 1;
}

.picker-prev {
    left: 0;
}

.picker-next {
    right: 0;
}

.picker-prev:before,
.picker-next:before {
    content: " ";
    border-color: #fff;
    border-style: solid;
    width: 10px;
    height: 10px;
    display: block;
    position: absolute;
    top: calc(50% + 9px);
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.picker-prev:before {
    border-width: 0 0 2px 2px;
    left: 20px;
}

.picker-next:before {
    border-width: 2px 2px 0 0;
    right: 20px;
}

.picker-prev,
.is-rtl .picker-next {
    float: left;
    *left: 0;
}

.picker-next,
.is-rtl .picker-prev {
    float: right;
    *right: 0;
}

.picker-prev.is-disabled,
.picker-next.is-disabled {
    cursor: default;
    opacity: .2;
}

.picker-select {
    display: inline-block;
    *display: inline;
}

.picker-table {
    width: auto !important;
    border-collapse: collapse;
    border-spacing: 0;
    border: 0;
    margin: 0 15px 15px 15px;
}

.picker-table th,
.picker-table td {
    width: 14.285714285714286%;
    padding: 0;
}

.picker-table th {
    color: #454545;
    font-size: 12px;
    line-height: 25px;
    font-weight: normal;
    text-align: center;
    padding: 10px 0px;
}

.picker-button {
    cursor: pointer;
    display: block;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    outline: none;
    border: 0;
    margin: 0 2px 7px;
    width: 30px;
    height: 30px;
    padding: 0;
    color: #444;
    font-size: 12px;
    line-height: 15px;
    background-color: #FFFFFF;
    text-align: center;
    border-radius: 100%;
}

.picker-footer {
    text-align: right;
}

.picker-ok {
    border: 0;
    background-color: transparent;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 16px;
    padding: 6px 10px;
    margin: 0 25px;
    color: #566dd1;
}

.picker-ok:focus,
.picker-ok:active {
    outline: 0;
}

.picker-week {
    font-size: 11px;
    color: #444;
}

.is-today .picker-button {
    color: #566dd1;
    font-weight: bold;
}

.is-selected .picker-button {
    color: #fff;
    font-weight: bold;
    background-color: #566dd1;
    border-color: #fff !important;
}

.is-disabled .picker-button {
    pointer-events: none;
    cursor: default;
    color: #666;
    opacity: .3;
}

.picker-button:hover {
    color: #fff !important;
    background: #566dd1 !important;
    border-color: #fff !important;
}

/* styling for abbr */

.picker-table abbr {
    border-bottom: none;
    cursor: default;
}

.picker-table {
    border: none;
}

.picker-table td,
.picker-table tr,
.picker-table th {
    border: none;
}

/* используется в params в вакансиях*/
#users-managers {
    display: inline;
}

#users-managers span {
    vertical-align: top;
    display: inline-block;
    margin: 10px;
}

#users-managers p {
    margin: 0px;
}

.photo {
    background-repeat: no-repeat;
    background-size: 100%;
    width: 80px;
    height: 80px;
}

#users-managers .radio-button {
    vertical-align: top;

}

.users-managers-text {
    height: 92px;
    width: 113px;
}

.managers {
    height: 117px;
    width: 284px;
    margin-right: 8px;
    margin-bottom: 8px;
}

/*используется в offers и в вакансиях*/

#singleItems .list .view[data-type="offers"] {
    padding: 42px 22px;
}


.offer-text {
    width: 150px;
    font-size: 10px;
}

.offer .connect {
    margin-left: 80px;
}

.offer {
    background-repeat: no-repeat;
    background-size: 20%;
    background-position: 6px 50%;
    background-blend-mode: multiply;
    height: 80px;
    width: 220px;
}

seodata {
    margin-bottom: 20px;
    display: block;
}

.seo .img-block {
    margin: 0;
    width: 180px;
    height: 100px;
}

.seo label.upload {
    left: 200px;
    top: 30px;
}

descriptions .mdl-textfield,
commentsdata .mdl-textfield,
seodata .mdl-textfield {
    width: 100%;
}

.promo-desc-container,
.togglingLanguagesBlock {
    background-color: #f6f5f5a6;
    display: block;
    padding: 10px;
    border-radius: 2px;
    margin-bottom: 20px;
}

.nets .cat-select,
.seo .cat-select {
    margin-top: 10px;
    background: #f2f5ff;
    padding: 10px;
    border-radius: 2px;

}

.seo select {
    border: none;
}

.template.city label.upload {
    left: 90px;
    top: 10px;
}

.route {
    color: var(--font-color-grey);
    font-size: 12px;
    word-wrap: break-word;
}

div[data-type='routers'] .route,
div[data-type='services'] .route,
div[data-type='stocks'] .route,
div[data-type='news'] .route {
    margin-left: 40px;
}

.template.offer #wrap-status {
    display: none;
}

.view .role {
    color: #555;
    margin-left: 40px;
    font-size: 12px !important;
}

#singleItems .list .view[data-type='users'] {
    padding: 20px 20px !important;
}

#load {
    margin: 20% auto;
}

#spa .mdl-progress > .bufferbar {
    background-image: linear-gradient(to right, rgba(255, 255, 255, .7), rgba(255, 255, 255, .7)), linear-gradient(to right, #7070af, #cccccc);
}

#spa .mdl-progress.mdl-progress--indeterminate > .bar1, .mdl-progress.mdl-progress__indeterminate > .bar1, .mdl-progress.mdl-progress--indeterminate > .bar3, .mdl-progress.mdl-progress__indeterminate > .bar3 {
    background-color: #5175b1;
}

#tvRecommends .additions {
    padding: 15px 40px;
    font-size: 16px;
}

#tvRecommends .additions, #tvRecommends .additions label {
    cursor: pointer;
}

#tvRecommends .additions.active {
    background-color: #0076d6;
}

#tvRecommends .additions.active label {
    color: #fff;
}

.one-column-composite-view {
    left: 380px !important;
    width: calc(100% - 390px) !important;
}

/* subscriders */

.view[data-type="subscribers"] > .container-items {
    display: grid !important;
    grid-template-columns: 40% 60% !important;
    width: 700px !important;
    font-size: 14px;
}

.view[data-type="history"] > .container-items {
    display: grid !important;
    grid-template-columns: 27% 27% 27% 23% 21% !important;
    width: 900px !important;
    font-size: 14px;
    word-wrap: break-word;
}

.view[data-type="history-block"] > .container-items {
    display: grid !important;
    grid-template-columns: 25% 25% 29% 29% 29% 25% !important;
    font-size: 14px;
    word-wrap: break-word;
    width: 700px !important;
}

.view[data-type="comments-block"] .container-item:first-child {
    padding-left: 0 !important;
}

.view[data-type="comments-block"] > .container-items {
    display: grid !important;
    grid-template-columns: 25% 65% 15% !important;
    font-size: 14px;
}

.view[data-type="examples-block"] > .container-items {
    display: grid !important;
    grid-template-columns: 25% 10% 40% 15% 10% !important;
    font-size: 14px;
}

.view[data-type="examples-block"] .container-item:first-child {
    padding-left: 0 !important;
}

.container-item {
    padding: 15px !important;
}

.table-header {
    justify-content: center;
    align-items: center;
    height: 64px !important;
}

.filter-multy-list {
    border-bottom: 0 !important;
}

#arrow {
    color: #5276ad !important;
    cursor: pointer !important;
}

#count {
    height: 50px;
    float: left;
}

#backward {
    color: #5276ad !important;
    cursor: pointer !important;
    height: 50px;
    float: left;
}

#forward {
    color: #5276ad !important;
    cursor: pointer !important;
    height: 50px;
    float: left;
}

#addRow {
    background: #5bb434;
}

#download {
    padding-left: 5%;
}

#download a {
    color: #5276ad !important;
    cursor: pointer !important;
    font-size: 16px;
}

#delete button {
    margin-top: 0px !important;
}

#count-container {
    margin-top: 15px !important;
    font-size: 16px;
}

.secondary-col {
    text-align: center !important;
}

#container-pagination {
    position: absolute;
    right: 50%;
}

/* subscriders */
/*.view[data-tag="all"]*/
.template.nets #category {
    margin: 20px 0;
}

.template.nets #category label {
    margin-right: 10px;
    font-size: 14px;
}

.container-works .row > div,
#container-questions > .row > div {
    float: left;
}

.container-works .row .mdl-textfield,
#container-questions > .row > .mdl-textfield {
    width: 80%;
}

.works #addWork {
    float: right;
    margin-right: 22px;
    margin-top: 20px;
    min-width: 36px;
    padding: 0 8px;
}

#itemQuestions #addClause {
    margin: 30px 0 80px 0;
}

.scroll-menu {
    max-height: 72%;
    overflow: hidden;
    overflow-y: auto;
}

iframe.docs-frame {
    width: 70%;
    height: 85%;
    border: 0;
}

.sort {
    cursor: pointer;
}

#proposalsCategory {
    width: 100%;
    margin-top: 25px;
}


.category-container {
    display: block;
}

.category-header {
    font-size: 16px;
    color: var(--active-color);
}

.category-header > *:first-child {
    font-size: 16px;
    margin-right: 20px;
    cursor: default;
}

.category-header > button {
    margin-top: -4px;
}

.category-header > button > * {
    font-size: 18px;
    vertical-align: top;
    margin-right: 10px;
    cursor: pointer;
}

.container-works .wrap-buttons {
    margin-top: 15px;
    margin-left: 35px;
}

.container-works .wrap-buttons > * {
    margin-left: 32px;
    min-width: 36px;
    padding: 0 8px;
}

#proposalsFilters .template {
    margin: 20px 0;
}

div.promo-desc {
    display: table;
}

div.promo-desc > div {
    display: table-cell;
}

#traffic > div input, #speed > div input {
    font-size: 24px;
}

.include.archive {
    text-decoration: line-through !important;
    filter: grayscale(1) !important;
    box-shadow: inset 1px 1px 5px rgba(0, 0, 0, .35) !important;
}

.mdl-form-field-prefix {
    white-space: nowrap;
    flex: none;
    position: relative;
    color: #bababae0;
    border-bottom: 1px dashed #e0e0e0;
    padding: 3px 0;
}

.view[data-type='routerCharactList'] .warning .editUnique {
    left: 20px;
}

button#rmi,
button#seo-rmi {
    background: #f6f5f5a6;
    color: #778cbb;
}

.star:after {
    content: '*';
    color: red;
    position: relative;
    left: 0;
    padding: 1px;
    vertical-align: super;
}

.view[data-type='nets'].little {
    background-color: #deffe3;
}

.view[data-type='nets'].medium {
    background-color: #ffe7e7;
}

.view[data-type='nets'].big {
    background-color: #cce5ff;
}

.view[data-type='news'].news {
    background-color: #cce5ff;
}

.view[data-type='news'].business_solutions {
    background-color: #deffe3;
}

.view[data-type='data-center'].vps {
    background-color: #deffe3;
}

.view[data-type='data-center'].hosting {
    background-color: #ffe7e7;
}

.view[data-type='data-center'].collocation {
    background-color: #cce5ff;
}

.view[data-type='aboutUs'].our_team {
    background-color: #deffe3;
}

.view[data-type='aboutUs'].technical_equipment {
    background-color: #ffe7e7;
}

.view[data-type='aboutUs'].support_team {
    background-color: #cce5ff;
}

.view[data-type='domains'].regional {
    background-color: #deffe3;
}

.view[data-type='domains'].international {
    background-color: #cce5ff;
}

.hidden-card {
    background-color: #d6d9e2 !important;
}

.hidden-card:hover {
    background-color: white !important;
}

.hidden-card.active {
    background-color: white !important;
}

.container-item.secondary-col {
    position: relative;
}

#menu .badge {
    position: absolute;
    margin-top: -20px;
    right: -40%;
}

#menu .badge.hide {
    display: none;
}

#menu .badge > span {
    background-color: #ff6262;
    color: white;
    border-radius: 10rem;
    display: inline-block;
    padding: .25em .4em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
}