.bottom-10 {
    margin-bottom: 10px;
}

ul[disabled] a {
    pointer-events: none;
}

.alternative-link-color {
    color: #00b050 !important;
}

td.no-border {
    border-top: 0 !important;
}
tbody.no-border {
    border: 0 !important;
}
tbody.no-row-border > tr > td {
    border: 0 !important;
}

.table.no-top-border tr:first-child td {
    border: 0 !important;
}

.top-border {
    border-top: 1px solid #ddd !important;
    padding-top: 8px;
}

.table > tbody.bordered + tbody.bordered,
tbody.bordered {
    border-top: 1px solid #ddd !important;
}

.dow-checkboxes input {
    vertical-align: middle;
}

.dow-checkboxes span {
    vertical-align: middle;
}

.dow-checkboxes td {
    padding-right: 15px;
}

.dow-checkboxes label {
    font-weight: normal;
}

/*
Первая строка группы в таблице зон. Отчёркивается от предыдущей группы.
*/
.zones-section-head {
    border-top: 2px solid gray !important;
}

.glyphicon.spinner::before {
    content: '';
    border: 2px solid #f3f3f3;
    border-radius: 50%;
    border-top: 2px solid transparent;
    width: 12px;
    height: 12px;
    display: inline-block;
    animation: spinner-animation 1s linear infinite;
    -webkit-animation: spinner-animation 1s linear infinite;
}

@keyframes spinner-animation {
    0% { transform: rotate(0deg); }
    0% { -webkit-transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
    100% { -webkit-transform: rotate(360deg); }
}

@-webkit-keyframes spinner-animation {
    0% { transform: rotate(0deg); }
    0% { -webkit-transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
    100% { -webkit-transform: rotate(360deg); }
}

/*
Стили, позволяющие выстроить в ряд элементы, выровненные по вертикали
 */

td.vertical-aligned, span.vertical-aligned {
    vertical-align: middle !important;
}

input[type="checkbox"].vertical-aligned {
    vertical-align: middle !important;
    margin-top: -2px !important;
}

/*
 Все нижеследующие классы нужны для того чтобы отцентрировать вертикально
 инпут и лейбл относительно друг друга и оборачивающего их контейнера.
 Так как приходится сбрасывать свойство float, ломается прижимание влево,
 его придется поправить хаком со сдвигом на -4px, который подобран на глаз.
 */
.vertical-center {
    display: inline-block;
    vertical-align: middle;
    float: none !important;
}

.pull-left {
    text-align: left !important;
}

.no-padding-top {
    padding-top: 0px !important;
}

.vertical-center-float-fix {
    transform: translateX(-4px);
}

.help-block .device-button-icon {
    position: relative !important;
    top: 3px !important;
    vertical-align: baseline !important;
}

#rielta-network-options .help-block {
    margin-bottom: 0;
}

/*
 Cтиль для доп. строки с пояснением, которая располагается под control-label
 (на вертикальных формах)
 */
.label-help {
    display: block;
    margin-top: -4px;
    margin-bottom: 7px;
    color: #a6a6a6;
    font-style: italic;
}

/*
 Поля ввода с красивыми такими рамками, разных цветов
 */
input.glamour-blue {
    border-width: 2px;
    border-color: #529fca;
}
input.glamour-green {
    border-width: 2px;
    border-color: #74cc92;
}
input.glamour-violet {
    border-width: 2px;
    border-color: #caa5f9;
}
/*
 Красота красотой, а при ошибках рамки красить нужно в красный цвет
 */
input.has-error {
    border-color: #a94442 !important;
}

/*
Треугольнички, могут использоваться для отображения коллапсирования
*/
.triangle-down {
  background: url("../../images/triangle.svg") no-repeat;
  background-position: center;
  width: 23px;
  height: 23px;
}
.triangle-right {
  background: url("../../images/triangle.svg") no-repeat;
  background-position: center;
  width: 23px;
  height: 23px;
  transform: rotate(-90deg);
}

/*
 Стили, относящиеся к вкладке "Адресные устройства"
 */
.rielta-wired-devices {
    position: relative;
}

.swap-devices-buttons {
    position: absolute;
    left: -32px;
    bottom: 14px;
}

.button-up {
    background: url("../../images/up.svg") no-repeat center;
    cursor: pointer;
    width: 28px;
    height: 23px;
}

.button-down {
    background: url("../../images/down.svg") no-repeat center;
    cursor: pointer;
    width: 28px;
    height: 23px;
}

.button-up:hover {
    background: url("../../images/up-hover.svg") no-repeat center;
}

.button-down:hover {
    background: url("../../images/down-hover.svg") no-repeat center;
}

.button-up:active {
    background: url("../../images/up-active.svg") no-repeat center;
}

.button-down:active {
    background: url("../../images/down-active.svg") no-repeat center;
}
