/* Подключаем шрифты FontAwesome */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');

/*@import url('../fonts/fontawesome/css/all.min.css');*/


.textsite .list-group {display: inline-block;}
.textsite .list-group > .list-group{margin-left: 1rem;}



/*стилизация списка ol*/
.listtext {
    counter-reset: myCounter;
    margin-left: 0;
    padding-left: 0;
    color: rgb(100,100,100);
    text-align: left;
}
.listtext li {
    position: relative;
    margin: 0.45em 0;
    padding-left: 35px;
    list-style: none;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}


.listtext li:before {
    content: counter(myCounter);
    counter-increment: myCounter;
    position: absolute;
    top: 0;
    left: 0;
    width: 1.5em;
    height: 1.5em;
    padding: 3px;
    color: #fff;
    background: #006bb2;
    font-weight: bold;
    text-align: center;
    box-shadow: 0px 1px 4px 0px rgb(0 0 0 / 30%);
    z-index: 1;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}


.listtext li li:before {
    content: counter(myCounter) ')';
    counter-increment: myCounter;
    position: absolute;
    top: 0;
    left: 0;
    width: 1.5em;
    height: 1.5em;
    padding: 0px;
    color: #fff;
    background: #006bb2;
    font-weight: bold;
    text-align: center;
    box-shadow: 0px 1px 4px 0px rgb(0 0 0 / 30%);
    z-index: 1;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}


#skobki2:before {

    content: counter(myCounter) '(' counter(myCounter2) ')';
    counter-increment: myCounter2 myCounter;
    position: absolute;
    top: 0;
    left: 0;
    width: 1.5em;
    height: 1.5em;
    padding: 0px;
    color: #fff;
    background: #1b75bb;
    font-weight: bold;
    text-align: center;
    box-shadow: 0px 1px 4px 0px rgb(0 0 0 / 30%);
    z-index: 1;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}


 
#skobki li:before {

    content: counter(myCounter) ')';
    counter-increment: myCounter;
    position: absolute;
    top: 0;
    left: 0;
    width: 1.5em;
    height: 1.5em;
    padding: 0px;
    color: #fff;
    background: #1b75bb;
    font-weight: bold;
    text-align: center;
    box-shadow: 0px 1px 4px 0px rgb(0 0 0 / 30%);
    z-index: 1;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}


.listtext li:after {
    position: absolute;
    top: 2.1em;
    left: 0.9em;
    width: 2px;
    height: calc(100% - 2em);
    content: '';
    background-color: rgb(203, 203, 203);
    z-index: 0;
}
.listtext li:last-child:after{width: 0;}

.listtext li:hover {
    color: rgb(0,0,0);
}
.listtext li:hover:before {
    background-color: #000;
}
.listtext li:hover:after {
    background-color: #000;
}

.listtext ol{padding-top: 1rem;
    padding-bottom: 2rem;}


/*стилизация списка ul*/
.listtextul {
    margin-left: 0;
    padding-left: 1rem;
    color: rgb(100,100,100);
    text-align: left;
}
.listtextul li {
    position: relative;
    margin: 0.45em 0;
    padding-left: 1rem;
    list-style: none;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}


.listtextul li:before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: "\f0da";
    position: absolute;
    top: 0;
    left: 0;
    /*width: 1.5em;
    height: 1.5em;
    padding: 3px;*/
    color: #006bb2;
 /*   background: #006bb2;*/
    text-align: center;
    /*box-shadow: 0px 1px 4px 0px rgb(0 0 0 / 30%);*/
    z-index: 1;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}


.listtextul li li:before {
    content: counter(myCounter) ')';
    counter-increment: myCounter;
    position: absolute;
    top: 0;
    left: 0;
    width: 1.5em;
    height: 1.5em;
    padding: 0px;
    color: #fff;
    background: #006bb2;
    font-weight: bold;
    text-align: center;
    box-shadow: 0px 1px 4px 0px rgb(0 0 0 / 30%);
    z-index: 1;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

/*.listtextul li:after {
    position: absolute;
    top: 2.1em;
    left: 0.9em;
    width: 2px;
    height: calc(100% - 2em);
    content: '';
    background-color: rgb(203, 203, 203);
    z-index: 0;
}*/
.listtextul li:last-child:after{width: 0;}

.listtextul li:hover {
    color: rgb(0,0,0);
}
.listtextul li:hover:before {
   color: #000;
}
.listtextul li:hover:after {
    background-color: #000;
}

.listtextul ol{padding-top: 1rem;
    padding-bottom: 2rem;}









/*.listtext ol li { font-size: 1rem;}*/

.offcanvas .offcanvas-header{width: 90%; border-bottom: 1px solid #b7b7b7;}

.offcanvas #offcanvasRightLabel{width: 80%; font-weight: bold;}

.offcanvas .list-group {width: 90%}





.titlenews{text-align:left;}

.colain{color: #858a8f !important;
    position: absolute;
    margin-top: 20px;
    font-size: 1rem;}