/* =========================================
   Стили для сайта (фронтенда)
   Файл: plugin-styles.css
   ========================================= */

/* =========================================
   № в квадрате (name-list)
   ========================================= */
#name-list, 
ol.name-list {
    margin: 20px 30px 20px 5px;
    counter-reset: myCounter;
    list-style-type: none;
    padding-left: 0;
}

#name-list li, 
ol.name-list li {
    position: relative;
    list-style-type: none;
    line-height: 1.4;
    padding-left: 33px;
    margin-bottom: 8px;
}

#name-list li::before, 
ol.name-list li::before {
    position: absolute;
    top: 2px;
    left: 0;
    width: 15px;
    height: 15px;
    padding: 2px 1px 0px 1px;
    background: #e74c3c;
    counter-increment: myCounter;
    content: counter(myCounter);
    text-align: center;
    font: normal 14px Arial, Helvetica, sans-serif;
    line-height: 1.0;
    color: #fff;
    box-sizing: content-box;
}

/* =========================================
   № в круге (circ-number)
   ========================================= */
#circ-number, 
ol.circ-number {
    margin: 20px 30px 20px 5px;
    counter-reset: myCounter;
    list-style-type: none;
    padding-left: 0;
}

#circ-number li, 
ol.circ-number li {
    list-style-type: none;
    padding-left: 31px;
    margin-bottom: 15px;
    position: relative;
}

#circ-number li::before, 
ol.circ-number li::before {
    position: absolute;
    counter-increment: myCounter;
    content: counter(myCounter);
    display: inline-block;
    font: normal 15px Arial, Helvetica, sans-serif;
    width: 18px;
    height: 18px;
    margin: -2px 10px 4px -35px;
    padding: 2px 2px;
    background: #fff;
    text-align: center;
    border: 2px solid #5a80b1;
    border-radius: 50%;
    line-height: 1.25;
    box-sizing: content-box;
}

/* =========================================
   Стили абзацев (Внимание, Перечень и т.д.)
   ========================================= */

/* Выделить (окрашенный абзац) */
.abz-color {
    margin: 10px 0px 10px 0px;
    padding: 1px 0 2px 0;
    background-color: #f0f6f8;
    border-bottom: 2px solid #566094;
}

/* Маркеры подзаголовков (доп. стили из темы) */
.mZag {
    color: #fff;
    background: #566094;
    border-radius: 50%;
    padding: 1px 8px;
    margin: 0 3px 0 7px;
}

/* Маркеры для отдельных пунктов в абзацах (доп. стили из темы) */
.mAbz {
    color: #fff;
    background: #566094;
    border-radius: 7%;
    font-size: 17px;
    margin: 0px;
    padding: 1px 6px;
}

/* Рамка для отдельных абзацев */
.ram-abz {
    display: inline-block;
    padding: 10px 10px;
    border: 2px solid #d5e3ec;
    border-radius: 3px;
}

/* Разделитель страниц (доп. стили из темы) */
.page-separator {
    margin: 0 0 20px -30px;
    height: 2px;
    background: #5a80b1;
}

/* Заголовок рубрики (доп. стили из темы) */
.rubrika-title {
    margin: 5px 0 0 0;
    font-size: 27px;
    color: #555;
}

/* Внимание (с иконкой FontAwesome) */
.warning {
    background: #fff4d4;
    margin: 15px 30px 15px -29px;
    padding: 20px 30px 20px 75px;
    font-family: Georgia, Times, serif;
    font-size: 100%;
    border-radius: 0 6px 6px 0;
    border: none;
    position: relative;
}
.warning::before {
    content: "\f06a";
    font: normal normal 30px/1 'FontAwesome';
    color: #f58128;
    position: absolute;
    top: 50%;
    left: 30px;
    transform: translateY(-50%);
}

/* Перечень (с иконкой FontAwesome) */
.perechen {
    background: #f0f6f8;
    margin: 15px 30px 15px -29px;
    padding: 20px 30px 20px 75px;
    font-family: Georgia, Times, serif;
    font-size: 100%;
    border-radius: 0 6px 6px 0;
    border: none;
    position: relative;
}
.perechen::before {
    content: "\f058";
    font: normal normal normal 30px/1 FontAwesome;
    color: #f58128;
    position: absolute;
    top: 50%;
    left: 30px;
    margin-top: -13px;
}

/* Чек-Бокс (с иконкой FontAwesome) */
.chek:before {
    content: "\f046";
    font: normal normal normal 28px/1 FontAwesome;
    color: #7380bb;
    padding-right: 7px;
    position: relative;
    top: 3px;
}