img,

video,
embed {
    max-width: 100% !important;
    height: auto !important
}

a {
    outline: none !important
}

.logo.text-center {
    width: 100%;
}

.site_title {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
}


.site_title span {
    font-size: 2em;
    font-weight: 600;
    /*font-family: 'Oswald', sans-serif;*/
}

ul,
ol {
    padding-left: 20px
}

.item-page {
    margin-bottom: 20px;
    border-bottom: 1px solid #e5e5e5;
    overflow: hidden;

}

.nav {
    flex-flow: column
}

.item-page.no-style {
    background: none;

    border: none;
    padding: 0;

    padding-bottom: 20px;
}

.col-md.center-content {
    overflow-x: auto
}

.content-none {
    display: none !important
}

#header.container {
    padding-left: 0;
    padding-right: 0
}

/***   H1   ***/
.page-header > h1,
.content-category > h1,
.categories-list > h1 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    display: block;
    font-weight: 400;
    border-bottom: 1px solid #D2DADB;
    padding-bottom: 5px;

}

.article-separator {
    display: none
}

.article-info.muted dt,
.article-info.muted dd {
    display: inline-block;
    font-family: inherit;
    font-weight: 300;
    margin-right: 10px;
    font-size: 14px;
}

.article-info-term {
    display: none !important;
}

/* Добавил новый стиль для заголовка материалов*/
.page-header > h1 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    display: block;
    font-weight: 400;
    border-bottom: 1px solid #D2DADB;
    padding: 10px 20px; /* Добавляем отступы */
    background-color: #00a2e8; /* Цвет фона, как у заголовка справа */
    color: #ffffff; /* Цвет текста, как у заголовка справа */
    border-radius: 10px; /* Закругление углов */
    text-align: center; /* Выравнивание текста по центру */
}

.content-category > h1,
.categories-list > h1 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    display: block;
    font-weight: 400;
    border-bottom: 1px solid #D2DADB;
    padding-bottom: 5px;
}
/*Конец нового стиля для заголовоков материалов*/

.page-header > h2,
.osmap-items h2 {

    margin-bottom: 20px;
    font-weight: 400
}

h2.item-title {
    margin-bottom: 20px;
}

.icons {
    overflow: hidden;
    float: right
}

#jform_title {
    margin-bottom: 10px
}

/***   Comments  ***/
#comments-form .btn,
#comments-report-form .btn,
#comments-form .btn div,
#comments-report-form .btn div {
    background-image: none !important
}

#comments-form .btn div a,
#comments-report-form .btn div a {
    display: inline-block;
    border: 1px solid;
    padding: 5px 20px;
    text-decoration: none;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s;
    box-sizing: content-box
}

#comments-form .btn div a:hover,
#comments-report-form .btn div a:hover {
    background: #007bff;
    color: #fff;
    text-decoration: none;
}

/***   MainScreen   ***/
#main-screen {
    background-color: #ddd;
    background-image: url(../images/school.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;



}

#main-screen .col-md-6.d-flex.align-items-center {



    justify-content: center
}

.main-screen-title {
    background: rgba(27, 64, 81, 0.48);
    padding: 20px;
    width: 100%
}

.main-screen-title h1 {
    font-size: 1.8em
}

.main-screen-title div {
    font-size: 18px;
    font-weight: 300
}

.main-screen-title ul {
    padding-left: 6px;
    list-style: none
}

.main-screen-title ul li {
    padding-bottom: 4px;
    padding-top: 4px
}

.main-screen-title ul li::before,
    {

    font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands';
    font-weight: 900;
    content: '\f00c';
    margin-right: 4px
}

.moduletable ul li {
    position: relative;
    padding-top: 5px;
    padding-bottom: 5px;
    /*border-bottom: 1px solid #eee*/
}

.moduletable ul li:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.moduletable ul {
    list-style: none;
    padding-left: 0
}

.moduletable ul ul {
    padding-left: 10px
}

.moduletable ul ul a {
    display: block;
    position: relative
}

.moduletable ul ul a::before {
    position: absolute;
    content: '-';
    left: -10px
}

ul.icon-list {
    list-style: none;
    padding-left: 10px
}

ul.icon-list li::before {

    font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands';
    font-weight: 900;
    content: '\f00c';
    margin-right: 6px
}

/*** Button ***/
a.readmore,
.readmore-btn,
.comment-btn {
    display: inline-block;
    border: 1px solid;
    padding: 5px 14px;
    text-decoration: none;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

p.readmore .btn {

    color: #007bff;
    border: 1px solid;
    border-radius: 0;
    padding: 5px 14px;

}

p.readmore .btn:hover,
a.readmore:hover,
.readmore-btn:hover,
.comment-btn:hover {
    /*background: #007bff;*/
    color: #fff;
    text-decoration: none
}

a.btn-screen {

    padding: 10px 30px;
    display: inline-block;
    margin-top: 30px;

    font-weight: 700;
    text-decoration: none;
    margin-right: 10px;
    transition: 0.4s
}

a.btn-screen:hover {

    text-decoration: none;
}

/*** Page  ***/
.item-page ul,
.item-page ol {
    margin-left: 20px
}

.pull-left.item-image {
    float: left;
    max-width: 350px;
    margin-right: 20px;
    margin-bottom: 20px
}

.cols-2 .pull-left.item-image {
    float: none;
    max-width: 100%;
    margin-bottom: 20px
}

.pull-right.item-image {
    float: right;
    max-width: 350px;
    margin-left: 20px;
    margin-bottom: 20px
}

.pull-none.item-image {
    margin-bottom: 20px;
    text-align: center
}

.pull-right {
    float: right !important;
}

.btn.dropdown-toggle {
    display: none
}

.blog .items-leading [class*="leading"],
.blog .items-row [class*="span"],
.blog-featured .items-leading [class*="leading"],
.blog-featured .items-row [class*="span"],
.item-page,
#osmap,
.categories-list,
.search #searchForm,
.contact-miscinfo,
.contact {
    background: #fafafa;
    padding: 15px;
    border: 1px solid #d9d9d9;
    margin-bottom: 30px;
    overflow: hidden
}

.contact .thumbnail.float-right {
    max-width: 250px;
    margin-bottom: 20px;
}

.contact-form {
    clear: both;
    margin-bottom: 20px
}

.jicons-icons {
    float: left;
    margin-right: 8px;

}

.jicons-icons img {
    position: relative;
    top: -2px
}

.newsflash-image {
    overflow: hidden;
    margin: -10px -10px 10px -10px
}

.newsflash-image img {
    transition: .4s;
}

.newsflash-image img:hover {
    transform: scale(1.15, 1.15);
    transition: .4s;
}

.newsflash-title {
    margin-bottom: 10px;
    font-size: 18px;
}

.latest-hits {

    border-bottom: 1px solid;
    margin-bottom: 10px;
    padding-bottom: 4px
}

/***   Top   ***/
#top {
    /*background: #454545;*/
    padding: 4px
}

#top ul > li > a {
    margin-right: 20px
}

#top ul > li:last-child > a {
    margin-right: 0
}

#top .nav.menu {
    display: block;
    text-align: right
}

#top .nav.menu li {
    display: inline-block
}

#top .nav.menu li a {
    color: #fff
}

#searchphraseall,
#searchphraseany,
#searchphraseexact {
    margin-right: 6px;
}

.sidebar-news.newsflash-title {
    text-transform: inherit;
    font-size: 16px;
    margin-bottom: 0;
    padding-bottom: 4px;
    font-weight: 300
}

.newsflash-item.sidebar-news {
    border-bottom: 1px solid #ddd;
    margin-bottom: 10px;
}

.latest-date {
    color: #a12e21;
    margin-bottom: 10px;
}

.btn-top {
    width: 100%
}

.btn-top a {
    color: #fff;
    display: block
}

.btn-top span.icon-top {
    display: inline-block;
    text-align: center;
    width: 80px;
    padding: 6px 0;
    border: 1px solid;
    margin: 4px;
}

.btn-top span.icon-text {
    font-size: 16px;
    margin-left: 4px;
    position: relative;
    top: -5px;
    font-weight: 400
}

/*** ButtonHesder ***/
#accessibility-btn,
#btn-maps,
#btn-blind,
#btn-plan,
#btn-clock,
#btn-contact {
    position: relative
}

div.icon-text-accessibility {
    width: auto; /* Измените на auto или на подходящее фиксированное значение */
    height: 49px;
    position: absolute;
    background: #454545;
    color: #fff;
    top: 4px;
    right: 100%;
    transition: 0.4s;
    overflow: visible; /* Измените на visible, чтобы текст не обрезался */
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
    padding-right: 10px; /* Добавьте отступ для корректного отображения текста */
}

body.accessibility div.icon-text-plan,
body.accessibility div.icon-text-maps,
body.accessibility div.icon-text-blind,
body.accessibility div.icon-text-clock,
body.accessibility div.icon-text-contact {
    display: none !important
}

#accessibility-btn:hover div.icon-text-accessibility {
    width: 200%;
    font-weight: 500
}

div.icon-text-accessibility > div {
    font-size: 15px;
    line-height: 20px;
    width: 180px;
    position: relative;
    top: 14px;
}

/**************************/
div.icon-text-maps {
    width: 0;
    height: 49px;
    position: absolute;
    background: #454545;
    color: #fff;
    top: 4px;
    right: 100%;
    transition: 0.4s;
    overflow: hidden;
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px
}

#btn-maps:hover div.icon-text-maps {
    width: 200%;
    font-weight: 500
}

div.icon-text-maps > div {
    font-size: 15px;
    line-height: 20px;
    width: 180px;
    position: relative;
    top: 14px;
}

/************************************/
div.icon-text-blind {
    width: 0;
    height: 49px;
    position: absolute;
    background: #454545;
    color: #fff;
    top: 4px;
    right: 100%;
    transition: 0.4s;
    overflow: hidden;
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px
}

#btn-blind:hover div.icon-text-blind {
    width: 200%;
    font-weight: 500
}

div.icon-text-blind > div {
    font-size: 15px;
    line-height: 20px;
    width: 180px;
    position: relative;
    top: 14px;
}

/***************************/
div.icon-text-plan {
    width: 0;
    height: 49px;
    position: absolute;
    background: #454545;
    color: #fff;
    top: 4px;
    right: 100%;
    transition: 0.4s;
    overflow: hidden;
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px
}

#btn-plan:hover div.icon-text-plan {
    width: 200%;
    font-weight: 500
}

div.icon-text-plan > div {
    font-size: 15px;
    line-height: 20px;
    width: 180px;
    position: relative;
    top: 14px;
}

/*************************/
div.icon-text-clock {
    width: 0;
    height: 49px;
    position: absolute;
    background: #454545;
    color: #fff;
    top: 4px;
    right: 100%;
    transition: 0.4s;
    overflow: hidden;
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px
}

#btn-clock:hover div.icon-text-clock {
    width: 200%;
    font-weight: 500
}

div.icon-text-clock > div {
    font-size: 15px;
    line-height: 20px;
    width: 180px;
    position: relative;
    top: 14px;
}

/*************************/
div.icon-text-contact {
    width: 0;
    height: 49px;
    position: absolute;
    background: #454545;
    color: #fff;
    top: 4px;
    right: 100%;
    transition: 0.4s;
    overflow: hidden;
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px
}

#btn-contact:hover div.icon-text-contact {
    width: 200%;
    font-weight: 500
}

div.icon-text-contact > div {
    font-size: 15px;
    line-height: 20px;
    width: 180px;
    position: relative;
    top: 14px;
}

/***   Header   ***/

.container.wrapper {
    padding-top: 30px;
    padding-bottom: 30px;
    /* background: #fff;*/

}


.header-top {

    padding: 20px 0;
}


.btn-top.text-right > a {
    margin: 4px
}

/*** IconMenu  ***/
ul.row.no-gutters.icon-menu2 {
    margin: 0 -4px 30px -4px;
    padding: 0
}

.row.icon-menu2 {
    list-style: none;
    text-align: center;

}

.row.icon-menu2 > li {
    padding: 0;
    height: 150px;
    position: relative;
    background: #dfdfdf;
}

.row.icon-menu2 > li > a {
    display: flex;

    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    height: 100%;
    background: #01A0E2;
    width: auto;
    margin-left: 110px;
    justify-content: center;
    align-items: center !important;
    color: #fff;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 20px;
    line-height: 26px;
    transition: 0.4s;

}

.row.icon-menu2 > li > a:hover {
    text-decoration: none;
    background: #007AAC
}

.row.icon-menu2 > li > a::before {
    font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands';
    font-weight: 900;
    position: absolute;
    display: block;
    position: absolute;
    display: block;
    width: 90px;
    height: 90px;
    left: 13px;
    top: 20%;
    line-height: 90px;
    background: #01A0E2;
    border-radius: 50%;
    font-size: 40px;
    transition: 0.4s
}

.row.icon-menu2 > li > a:hover::before {
    background: #007AAC
}

/***  CanvasMenu  ***/
#canvas-menu {
    position: fixed;
    left: -25%;
    top: 0;
    bottom: 0;
    width: 25%;
    overflow-y: auto;
    height: 100%;

    padding: 15px;
    color: #fff;

    transition: 0.6s;
    z-index: 20
}

#canvas-menu li {
    display: block;
    width: 100%
}

#canvas-menu.active {

    left: 0;
}

.canvas-menu-btn {
    text-align: right;

}

#btn-cloze {}

/*** Seatch ***/
#header-searh {
    display: none
}


.searh-btn a {
    color: #fff;

}

.searh-btn a > i {
    font-size: 24px;


}

/***   Menu  ***/
#header-menu {

    padding-left: 0;
    padding-right: 0;

}

#header-menu ul {
    list-style: none;
    display: block;
}

#header-menu ul li a:hover {
    text-decoration: none
}

#header-menu ul.nav.menu > li {
    display: inline-block;
    position: relative;
    margin: 15px
}

#header-menu ul.nav.menu > li > a {
    margin: 0;
    padding: 0;


}

#header-menu ul.nav.menu > li > a,
#header-menu ul.nav.menu > li.divider {

    font-weight: 400;

}


#header-menu ul.nav.menu > li.deeper.parent > a::after,
#header-menu ul.nav.menu > li.deeper.parent > span::after {
    font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands';
    content: '\f078';
    font-weight: 900;
    margin-left: 4px;
    font-size: 70%
}

#header-menu ul.nav.menu > li.divider:hover {
    cursor: pointer
}

#header-menu ul.nav.menu > li > ul {
    position: absolute;
    background: #1b4051;
    min-width: 200px;
    max-height: 0px;
    margin-top: 15px;
    overflow: hidden;

    -webkit-transition: max-height 0.4s linear;
    -moz-transition: max-height 0.4s linear;
    transition: max-height 0.4s linear;
    z-index: 10
}

#header-menu ul.nav.menu > li > ul > li {
    margin: 10px 15px;
    position: relative
}

#header-menu ul.nav.menu > li > ul a {
    color: #fff;
    font-size: 14px
}

#header-menu ul.nav.menu > li:hover > ul {
    max-height: 600px;
}

#header-menu ul li ul li ul li {
    display: none
}

/****FileIcons***/
.doc-icon a[href$='.doc']:before,
.doc-icon a[href$='.docx']:before {
    font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands';
    content: '\f1c2';
    font-weight: 900;
    display: inline-block;
    margin-right: 7px;

}

.doc-icon a[href$='.pdf']:before,
.doc-icon a[href$='.PDF']:before {
    font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands';
    content: '\f1c1';
    font-weight: 900;
    display: inline-block;
    margin-right: 7px;

}

.doc-icon a[href$='.rar']:before,
.doc-icon a[href$='.zip']:before {
    font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands';
    content: '\f1c6';
    font-weight: 900;
    display: inline-block;
    margin-right: 7px;
}

.doc-icon a[href$='.xlsx']:before,
.doc-icon a[href$='.xls']:before {
    font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands';
    content: '\f1c3';
    font-weight: 900;
    display: inline-block;
    margin-right: 7px;
}

.doc-icon a[href$='.pptx']:before,
.doc-icon a[href$='.ppt']:before {
    font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands';
    content: '\f1c4';
    font-weight: 900;
    display: inline-block;
    margin-right: 7px;
}


/***  Column ***/
.row-fluid {
    width: 100%;
    display: block
}

.row-fluid .span6 {
    width: 48.936170208%;
}

.row-fluid [class*="span"] {
    display: block;
    width: 100%;
    min-height: 28px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    margin-left: 2.127659574%;
    *margin-left: 2.0744680846383%;
}

.row-fluid [class*="span"]:first-child {
    margin-left: 0;
}

.row-fluid .span6 {
    width: 48.936170208%;
    *width: 48.936170208%;
}

.row-fluid .span4 {
    width: 31.914893614%;
    *width: 31.861702124638%;
}

.row-fluid .span3 {
    width: 23.404255317%;
    *width: 23.351063827638%;
}

.row-fluid::before,
.row-fluid::after {
    display: table;
    content: "";
    line-height: 0;
}

.row-fluid::after {
    clear: both;
}

.items-more .nav.nav-tabs.nav-stacked {
    display: block
}

.items-more {
    background: #f8f8f8;
    padding: 15px;
    border: 1px solid #d9d9d9;

}

.nav-tabs {
    border-bottom: none
}

dt.tabs > span > h3 > a:hover {
    text-decoration: none
}

.latest-mod-data,
.info-hits {
    font-size: 80%;
    text-align: left
}

/***   Module   ***/


.sidebar-right .nav,
.sidebar-left .nav {
    display: block
}

.sidebar-right .nav li ul li,
.sidebar-left .nav li ul li {
    /* padding-left: 10px;*/
    border-bottom: 0;
    padding-top: 4px;
    padding-bottom: 4px
}

.sidebar-right .nav li ul li:last-child,
.sidebar-left .nav li ul li:last-child {
    padding-bottom: 0
}

.sidebar-right .moduletable,
.sidebar-left .moduletable {

    background: #f8f8f8;
    padding: 15px;
    border: 1px solid #d9d9d9;
    margin-bottom: 30px
}

.sidebar-right .moduletable h3,
.sidebar-left .moduletable h3 {
    /*background: #01A0E2;*/
    color: #fff;
    padding: 10px 15px;
    margin: -16px -16px 10px -16px;
    font-size: 20px
}

.newsflash-horiz-block {
    margin-bottom: 20px;
    border: 1px solid #ddd;
    background: #f8f8f8;
    padding: 10px;
    height: 100%
}

.row.no-gutters.newsflash-horiz.mod-list {
    margin-left: -10px;
    margin-right: -10px
}

/*
span.icon-user::after {
    font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands';
    content: '\f007';
    font-weight: 900;


}

span.icon-eye::after {
    font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands';
    content: '\f023';
    font-weight: 900;

}

span.icon-calendar::after {
    font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands';
    content: '\f073';
    font-weight: 900;
    position: relative;
    top: -1px
}

span.icon-eye-open::after {
    font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands';
    content: '\f06e';
    font-weight: 900;

}
*/
.moduletable-bg-info {
    background-color: #17a2b8 !important;
    color: #fff;
    padding: 15px
}

.moduletable-bg-info h3 {
    background-color: #148a9c;
    margin: -15px -15px 15px -15px;
    padding: 6px 15px
}

.moduletable-bg-info ul {
    list-style: none
}

.moduletable-bg-info a {
    color: #fff;
    font-weight: 400
}

/***   NewsModule  ***/
.news-module-1.no-activ {
    display: none
}

.news-module-2,
.news-module-3 {
    display: none
}

.news-module-1.activ,
.news-module-2.activ,
.news-module-3.activ {
    display: block
}

/***   Color  ***/
.bg-red,
.bg-red::before {
    background: #dc3545 !important;
}

.bg-red:hover,
.bg-red:hover::before {
    background: #b7303d !important;
}


.bg-purple,
.bg-purple::before {
    background: #48599e !important;
}

.bg-purple:hover,
.bg-purple:hover::before {
    background: #313e73 !important;
}

.bg-green,
.bg-green::before {
    background: #28a745 !important;
}

.bg-green:hover,
.bg-green:hover::before {
    background:
        #218638 !important;
}

.bg-dark,
.bg-dark::before {
    background: #343a40 !important;
}

.bg-dark:hover,
.bg-dark:hover::before {
    background:
        #15171a !important;
}

.accessibility a.bg-dark:focus,
.accessibility a.bg-dark:hover,
.accessibility button.bg-dark:focus,
.accessibility button.bg-dark:hover {
    background-color: transparent !important;
}

.bg-fiol,
.bg-fiol::before {
    background: #7d3f92 !important;
}

.bg-fiol:hover,
.bg-fiol:hover::before {
    background:
        #5d2f6c !important;
}

.bg-orange,
.bg-orange::before {
    background: #fd7e14 !important
}

.bg-orange:hover,
.bg-orange:hover::before {
    background:
        #d76b12 !important;
}

/***   Pagination ***/
.pagination {
    display: block;
}

.pager.pagenav {
    text-align: left;
    margin-left: 0
}

.pager.pagenav .next {
    float: right
}

.pager.pagenav li {
    display: inline-block;
    background: #969696;
    border-radius: 12px;
    padding: 4px 20px;
    margin: 4px 20px;
}

.pager.pagenav li a {
    color: #fff;
    display: block;
    text-transform: uppercase;
    font-size: 0.8em;
    font-weight: 400;
}


.pagination .counter.pull-right {
    display: none;
}

.pagination {
    text-align: center;
    padding-left: 0;
    margin: 20px 0;
    border-radius: 4px;
    width: 100%;
}

.pagination > li {
    display: inline-block;
}

.pagination > li > a,
.pagination > li > span {
    position: relative;
    float: left;
    padding: 6px 12px;
    margin-left: -1px;
    line-height: 1.42857143;
    color: #428bca;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd;
}

.pagination > li:first-child > a,
.pagination > li:first-child > span {
    margin-left: 0;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.pagination > li:last-child > a,
.pagination > li:last-child > span {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
    color: #2a6496;
    background-color: #eee;
    border-color: #ddd;
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
    z-index: 2;
    color: #fff;
    cursor: default;
    background-color: #428bca;
    border-color: #428bca;
}

.pagination > .disabled > span,
.pagination > .disabled > span:hover,
.pagination > .disabled > span:focus,
.pagination > .disabled > a,
.pagination > .disabled > a:hover,
.pagination > .disabled > a:focus {
    color: #777;
    cursor: not-allowed;
    background-color: #fff;
    border-color: #ddd;
}

.pagination-lg > li > a,
.pagination-lg > li > span {
    padding: 10px 16px;
    font-size: 18px;
}

.pagination-lg > li:first-child > a,
.pagination-lg > li:first-child > span {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

.pagination-lg > li:last-child > a,
.pagination-lg > li:last-child > span {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

.pagination-sm > li > a,
.pagination-sm > li > span {
    padding: 5px 10px;
    font-size: 12px;
}

.pagination-sm > li:first-child > a,
.pagination-sm > li:first-child > span {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

.pagination-sm > li:last-child > a,
.pagination-sm > li:last-child > span {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

/***   Footer  ***/
#footer {

    overflow: hidden
        /*background: #01a0e2;*/
}

#footer .moduletable * {
    color: #fff;

}

#footer .moduletable h3 {
    border-bottom: 1px solid;
    padding-bottom: 5px;
    margin-bottom: 10px
}

#footer .list-group-item {
    background-color: transparent;
    border: none
}

#footer .list-group-item .bg-secondary {
    background-color: #01a0e2 !important;
}

/***   Forms   ***/
#jform_email,
#jform_contact_name,
#jform_contact_email,
#jform_contact_emailmsg,
#comments-form input,
#username,
#password,
#jform_name,
#jform_username,
#jform_password1,
#jform_password2,
#jform_email1,
#jform_email2 {
    display: inline-block;
    width: 100%;
    height: calc(2.25rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color:
        #495057;
    background-color:
        #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    margin-bottom: 20px
}

#member-registration {
    margin-bottom: 30px;

}

#comments-form input {
    width: inherit
}

#jform_contact_message,
#comments-form textarea {
    display: block;
    width: 100%;
    height: calc(2.25rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color:
        #495057;
    background-color:
        #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    margin-bottom: 20px
}

textarea#jform_contact_message,
#comments-form textarea {
    height: auto;
    max-width: 100% !important
}

/***   Breadcrumbs   ***/
#breadcrumbs {
    background-color: #e9ecef;
}

#breadcrumbs .breadcrumb {
    background-color: transparent !important;
    color: #212529;
}

#breadcrumbs ul.breadcrumb {
    background-color: transparent;
    color: #000;
    margin-bottom: 0
}

#breadcrumbs ul.breadcrumb span.divider img {
    display: none
}

#breadcrumbs ul.breadcrumb span.divider::before {
    content: '/';
    margin-right: 3px
}

#breadcrumbs ul.breadcrumb .active span.divider::before {
    content: ''
}

/***   Tags   ***/
.tags.inline {
    padding-left: 0;
    margin-left: 0
}

.tags.inline li {
    display: inline-block;
    margin-right: 5px
}

.tags.inline li a {
    color: #e52d2d;
    font-weight: 400
}

.tags.inline li::before {
    font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands';
    content: '\f292';
    font-weight: 900;
    color: #e52d2d
}

.small,
small {
    font-size: 90%;
}

.icon-remove::before {
    content: 'Обновить'
}

.category.list-striped {
    width: 100%;
    list-style: none
}

.category.list-striped li a {
    font-size: 22px
}

.category.list-striped li a::before {
    font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands';
    font-weight: 900;
    content: '\f00c';
    margin-right: 4px;
    display: inline-block;

}

.icon-search::before {
    font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands';
    font-weight: 900;
    content: '\f00c';
}

.icon-remove::before {
    font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands';
    font-weight: 900;
    content: '\f00c';
}

/***   Comments   ***/
#jc h4 {
    margin-bottom: 30px;
    padding-bottom: 10px;
    margin-top: 20px;
    color: #1f71ba;
}

#jc #nav-bottom span.activepage,
#jc #nav-bottom span {
    width: 40px;
    height: 30px
}

/***   Frontend   ***/
#adminForm {
    padding: 20px;
    margin-bottom: 100px;
    background:
        #f8f8f8;
    padding: 15px;
    border: 1px solid #d9d9d9;

}

.filters.btn-toolbar {
    display: none
}

.chzn-container {
    width: 300px !important;
    margin-bottom: 30px
}

.dropdown-menu {
    display: block !important;
    position: inherit;
    padding: 0;
    margin: 0 0 1rem 0;
    border: none;
    background-color: transparent
}

.print-icon,
.email-icon,
.edit-icon {
    display: inline-block;
    font-family: inherit;
    font-weight: 300;
    margin-right: 10px;
    font-size: 14px;
}

.blockquote {
    padding: .5rem 1rem;
    margin-bottom: 1rem;
    font-size: 1.25rem;
    border-left: .25rem solid #ff7a80;
}

.blockquote-reverse {
    padding-right: 1rem;
    padding-left: 0;
    text-align: right;
    border-right: .25rem solid #ff7a80;
    border-left: 0;
}

#com-content-formTabs {
    margin: 0 0 20px 0;
    padding: 0
}

#com-content-formTabs li {
    margin-right: 10px
}

.com-content-blog__links {
    list-style: none;
    margin-bottom: 0;
    padding-left: 0;
}

select.form-control:not([multiple]),
select.inputbox:not([multiple]),
select:not([multiple]) {
    height: calc(2.25rem + 2px);
    background: #fff
}

select,
#jform_guestbook_username,
#jform_guestbook_email {
    display: block;
    width: 100%;

    font-size: 14px;
    line-height: 1.25;
    color: #495057;
    background-color: transparent;
    background-image: none;
    background-clip: padding-box;
    border: 1px solid #d8d8d8;
    border-radius: 0.25rem;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

#phocaguestbook .control-group {
    margin-bottom: 20px
}

#phocaguestbook .btn {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
    margin-right: 10px
}

#jform_privacy_checkbox {
    position: relative;
    top: 2px;
}

#jform_guestbook_username,
#jform_guestbook_email {
    margin-bottom: 20px;
    background: #fff
}

#jform_guestbook_username-lbl,
#jform_guestbook_email-lbl,
.copyring,
.hr-condensed.pgb_border,
.pagecounter {
    display: none !important
}

.well.well-small.pgwell.pgb_background.pgb_font {


    padding: 15px;
    border: 1px solid #d9d9d9;
    margin-bottom: 30px;
}

.pg-pagination-bottom {
    margin-top: 30px
}

.well.well-small.pgwell.pgb_background.pgb_font {

    background: #f8f8f8 url(../images/kav.png) 15px 50px no-repeat;
    padding-left: 100px;

}

.reset,
.remind,
.login {
    border: 1px solid #ddd;
    padding: 20px;
    margin-bottom: 20px
}

.table-inverse {
    color: #fff;
    background-color: #292b2c;
}

.btn {
    display: inline-block
}

pre {
    background: #eee;
    padding: 15px;
    border-left: 3px solid #01a0e2;
}

pre code {
    color: #e83e8c;


}

#header-menu-icon {
    border-bottom: 1px solid #ddd;
    text-align: right;
    padding: 8px 40px;
    display: none;
    cursor: pointer
}

#debug {

    text-align: center;
    color: #fff;
    overflow: hidden;
    padding: 10px
}

/***   Blind   ***/
.accessibility.smallfonts .header-title a {
    font-size: 30px !important
}

.accessibility.mediumfonts .header-title a {
    font-size: 34px !important
}

.accessibility.bigfonts .header-title a {
    font-size: 40px !important
}

.accessibility .main-screen-title {
    border: 2px solid
}

.accessibility .row.icon-menu2 > li > a::before {
    display: none
}

.accessibility .row.icon-menu2 > li > a {
    margin-left: 0
}

.accessibility #header-menu,
.accessibility .header-top {
    border-top: 2px solid;
    border-bottom: 2px solid
}

.accessibility #canvas-menu {
    border-right: 2px solid;
    padding-top: 100px;
}

.accessibility .btn-screen {
    border: 2px solid;
    border-radius: 1px !important
}

.accessibility #header-menu ul.nav.menu > li > ul {
    border-left: 1px solid;
    border-right: 1px solid;

}

.accessibility #top {
    margin-top: 10px;
}

.accessibility .moduletable h3 {
    margin: 0 0 20px 0 !important;
    border-bottom: 2px solid
}

.accessibility #footer {
    border-top: 2px solid
}

.accessibility .container {
    max-width: 1600px !important
}

.accessibility span {
    font-family: inherit !important
}

.accessibility #toTop {
    border: 2px solid
}


/***   header-map-menu   ***/
#header-mapmenu {
    display: none
}

#header-mapmenu ul {
    border: 1px solid;
    padding: 10px
}

#header-mapmenu .moduletable h3 {
    font-size: 20px;
    text-transform: uppercase
}

.header-menu .separator.map {
    border: 1px solid;
    padding: 2px 20px 3px 20px
}

li.divider:hover {
    border-bottom: none !important
}

html {
    background: #fff
}

/* Кнопка наверх   */

#toTop {
    text-align: center;
    position: fixed;
    bottom: 20px;
    right: 20px;
    cursor: pointer;
    display: none;
    color: #fff;
    z-index: 222;
    background: rgba(0, 0, 0, .8);
    padding: 4px 15px;
    border-radius: 4px
}

/*** Blog Style ***/
.blog-item {
    background-color: #fefefe;
    border: 1px solid #ccc;
    border-radius: .25rem;
    box-shadow: 0 0 3px rgba(0, 0, 0, .04);
    padding: 1rem
}

/*** Blog Column ***/
.blog-items {
    display: grid;
    margin: 0 0 1em;
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    grid-gap: 1em;
}

.blog-items.columns-2 {
    grid-template-columns: 1fr 1fr;
}

.blog-items.columns-3 {
    grid-template-columns: 1fr 1fr 1fr;
}

.blog-items.columns-4 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.blog-items[class*=" masonry-"],
.blog-items[class^="masonry-"] {
    display: block;
    -webkit-column-gap: 1em;
    -moz-column-gap: 1em;
    column-gap: 1em;
}

.blog-items.masonry-2 {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
}

.blog-items.masonry-3 {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
}

.blog-items.masonry-4 {
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
}


.blog-items[class*=" masonry-"] .blog-item,
.blog-items[class^="masonry-"] .blog-item {
    display: inline-flex;
    margin-bottom: 1em;
    page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    break-inside: avoid;
}

.blog-item {
    display: flex;
    flex-direction: column;
    /*padding: 0 .5em 1em;*/
    overflow: hidden;
}

.items-leading .blog-item {
    flex-direction: row
}

.items-leading .item-content {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
}

.items-leading .item-image {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}

.items-leading .left.item-image {
    margin-right: 1rem
}

.items-leading .right.item-image {
    margin-left: 1rem;
    order: 2
}




/*** Component ***/
.modal-content {
    height: 70vh
}

.modal-content iframe {
    border: none !important
}

.modal-content .btn-close.novalidate {
    width: 20px;
    height: 20px;
    background-image: url(../images/icon_cross.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-color: transparent;
    border: none
}

joomla-tab[view="tabs"] > div[role="tablist"] {
    background: none;
    border: none;
    box-shadow: none
}

joomla-tab button[role="tab"] {
    box-shadow: none
}

joomla-tab button[aria-expanded="true"]::after {
    display: none
}

joomla-tab button[role="tab"] {
    background-color: #e52d2d;
    color: #fff;
    margin-right: 4px;
    cursor: pointer;
    padding: 0.5rem 1rem;
    font-family: 'Oswald', sans-serif;
    font-size: 18px;
    font-weight: 500
}

/*joomla-tab button[role="tab"]:hover{
    background-color: #01a0e2;
}*/
joomla-tab button[role="tab"][aria-expanded="true"] {
    background-image: none;
    background-color: #01a0e2;
    color: #fff;

}

p.counter {
    display: none
}
.article-info.text-muted{
    display: flex;
    flex-wrap: wrap
}
.article-info.text-muted dd{
    margin-right: 12px
}

/***    Media   ***/
@media (max-width: 1199.98px) {
    .row.icon-menu2 > li > a {
        font-size: 16px
    }

    h3 {
        font-size: 20px
    }
    
    .blog-items.masonry-4{
        column-count: 3
    }
}

@media (max-width: 991.98px) {
    .blog-items.columns-3, .blog-items.columns-4 {
        grid-template-columns: 1fr 1fr;
    }
    .blog-items.masonry-3, .blog-items.masonry-4{
        column-count: 2
    }

    span.header-title {
        font-size: 2em !important
    }

    span.header-subtitle {
        font-size: 1.5em !important
    }

    #header-menu {
        display: none
    }

    .header-menu.col-md-auto {
        width: 100%
    }

    #header-menu ul.nav.menu > li {
        display: block;
        margin-bottom: 10px
    }

    #header-menu ul.nav.menu > li > ul {
        max-height: 600px;
        position: inherit;
        width: 100%
    }

    .col-md.text-right.searh-btn {
        display: none
    }

    #header-searh,
    #header-menu-icon {
        display: block
    }

    .row.tpl-row-screen-title {
        min-height: 100% !important;
        padding-top: 50px;
        padding-bottom: 50px
    }
}

@media (min-width: 992px) {
    #header-menu {
        display: block !important
    }
}

@media (max-width: 767.98px) {

    .row-fluid .span6,
    .row-fluid .span4,
    .row-fluid .span3 {
        width: 100%
    }

    .row-fluid [class*="span"] {
        margin-left: 0
    }

    #canvas-menu {
        width: 100%;
        left: -100%
    }

    .logo img {
        max-width: 200px !important
    }

    .site_title {
        text-align: center !important;
    }

    .btn-top a {
        display: inline-block
    }

    .sidebar-left.mr-3 {
        margin-right: 0 !important
    }

    .sidebar-right.ml-3 {
        margin-left: 0 !important
    }

    .row.tpl-row-screen-title {
        min-height: auto
    }

    .items-leading .blog-item {
        display: block
    }

    .items-leading .item-image {
        flex: 0 0 100%;
        max-width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important
    }

    .blog-items.columns-2,
    .blog-items.columns-3,
    .blog-items.columns-4 {
        grid-template-columns: 1fr;
    }
    .blog-items.masonry-2, .blog-items.masonry-4, .blog-items.masonry-4{
        column-count: 1
    }

}

@media (max-width: 575.98px) {
    dl.tabs dt {
        display: block !important;
        margin-bottom: 5px
    }
}

/*********** Контейнер для иконок ***************/
.icon-container {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 500;
}

.btn-top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.btn-top a {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    text-decoration: none;
}

.icon-top {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px; /* Отступ между иконкой и текстом */
}

.icon-text-accessibility {
    width: auto !important;
    height: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static; /* Убираем абсолютное позиционирование, если не требуется */
    display: inline-block !important; /* Убедитесь, что элемент остается на экране */
    background: none; /* Убираем фон, если не требуется */
    margin-left: 10px; /* Отступ между иконкой и текстом */
}

.btn-top a:hover .icon-text-accessibility {
    visibility: visible !important; /* Убираем hover-эффект */
    opacity: 1 !important; /* Полная видимость */
}

/* Отключаем другие hover-эффекты, которые могут мешать */
.btn-top a:hover .icon-top,
.btn-top a:hover .icon-text-plan,
.btn-top a:hover .icon-text-clock,
.btn-top a:hover .icon-text-maps,
.btn-top a:hover .icon-text-contact {
    visibility: visible !important;
    opacity: 1 !important;
}


/* Чтобы сделать пробел между текстовым блоком заголовка и рядом иконок*/
/* Добавляем отступы между иконками и текстом */
.btn-top {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 30px; /* Увеличиваем отступ между иконками */
}

/* Исправляем позиционирование текста относительно иконок */
.icon-top {
    display: inline-block;
    vertical-align: middle;
}

.icon-container {
    margin-right: 20px; /* Отодвигаем иконки от правого края */
}

/* Увеличиваем отступ от текстового блока */
div.icon-text-accessibility, div.icon-text-plan, div.icon-text-clock, div.icon-text-blind, div.icon-text-maps, div.icon-text-contact {
    margin-left: 10px; /* Отодвигаем текст от иконок */
}

/* Дополнительные настройки для текста */
.icon-text-accessibility div, .icon-text-plan div, .icon-text-clock div, .icon-text-blind div, .icon-text-maps div, .icon-text-contact div {
    font-size: 14px;
    color: #000;
    display: inline-block;
}


/*Также можно временно добавить к стилям. Это позволит визуализировать, где и как располагаются блоки, чтобы было легче отслеживать их выравнивание.*/
/* {
/    outline: 1px solid red; /* Все элементы будут обведены красной рамкой */
/}


/*Для переноса заголовка на новую строку*/
h1 {
    word-wrap: break-word;
    white-space: pre-line; /* Разрешает перенос по словам */
    line-height: 1.2; /* Настройка межстрочного интервала для заголовка */
}

/*Для того чтобы выровнять иконки по правому краю*/
/* Адаптивные стили для мобильной версии */
@media screen and (max-width: 768px) {
    .icon-container {
        position: static; /* Отключаем абсолютное позиционирование для мобильных устройств */
        margin: 0 auto; /* Центрируем иконки */
        display: flex;
        flex-direction: column;
        align-items: center; /* Иконки и текст будут центрированы */
        gap: 10px;
    }

    .icon-top {
        font-size: 1.5em; /* Увеличиваем размер иконки */
    }

    .icon-text-accessibility,
    .icon-text-plan,
    .icon-text-maps {
        font-size: 14px; /* Текст меньше для мобильных экранов */
        color: #000;
    }
}

/* Стили для десктопной версии */
@media screen and (min-width: 769px) {
    .icon-text-accessibility, .icon-text-plan, .icon-text-maps {
        border-radius: 10; /* убираем закругление углов */
        width: 100%; /* делаем контейнер шире */
        padding-left: 10px;
        padding-right: 10px;
        overflow: visible; /* разрешаем показывать весь текст */
        white-space: nowrap; /* предотвращаем перенос текста */
    }


.icon-text-accessibility, .icon-text-plan, .icon-text-maps {
    white-space: normal;
    word-break: break-word; /* разрешаем перенос слов */
    text-align: left; /* выравниваем текст по левому краю */
        display: inline-block;
        width: 100%; /* разрешаем контейнеру занимать всю доступную ширину */
}


/*    .icon-text-accessibility > div, .icon-text-plan > div, .icon-text-maps > div {*/
/*        white-space: nowrap; /* предотвращаем перенос текста */
/*        text-align: left; /* выравниваем текст по левому краю */
/*        display: inline-block;
/*        width: 100%; /* разрешаем контейнеру занимать всю доступную ширину */
/*    }
/*}

/*Мы хотим выровнять иконки вертикально и по левому краю, чтобы они шли одной колонкой. Сейчас они выглядят как лесенка.*/
.icon-container {
  position: absolute;
  top: 30px; /* Уменьшаем это значение для уменьшения расстояния */
  right: 10px; /* Оставляем небольшое расстояние от правого края */
  z-index: 1; /* Это значение должно быть ниже значения z-index меню */
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Выравниваем иконки по левому краю */
}

.btn-top {
    display: flex;
    align-items: center; /* Выровнять текст и иконки по вертикали */
    justify-content: flex-start; /* Выровнять элементы по левому краю */
    margin-bottom: 15px;
}

.icon-text-accessibility, .icon-text-plan, .icon-text-maps {
    white-space: nowrap;
    text-align: left;
    color: #000; /* Цвет текста */
    margin-left: 10px;
}

.icon-top {
    display: inline-block;
    vertical-align: middle;
}

/* правило для иконок с длинными текстами:*/
.icon-text-accessibility {
  white-space: normal; /* Разрешаем перенос текста */
  text-align: left; /* Выравниваем текст по левому краю */
  max-width: 100px; /* Устанавливаем максимальную ширину для переноса */
  line-height: 1.2; /* Устанавливаем высоту строки для более аккуратного вида */
}

/*восстановление адаптивности блока иконок на мобильной версии*/
@media screen and (max-width: 768px) {
  .icon-container {
    position: static; /* Отменяем абсолютное позиционирование */
    display: flex;
    flex-direction: column; /* Иконки располагаются друг под другом */
    justify-content: center;
    align-items: center;
    margin-top: 20px; /* Добавляем отступ */
  }

  .icon-top {
    width: 40px; /* Делаем иконки меньшего размера */
    height: 40px;
    margin-bottom: 10px; /* Отступы между иконками */
  }

  .icon-text-accessibility, .icon-text-plan, .icon-text-maps {
    display: block; /* Текст будет под иконками */
    font-size: 14px;
    text-align: center;
  }
}

/*анимация текста*/
@keyframes changeColor {
  0% {
    color: #000; /* начальный цвет */
  }
  50% {
    color: #ff0000; /* цвет на середине анимации */
  }
  100% {
    color: #000; /* возвращаемся к начальному цвету */
  }
}

.phone-email-animate {
  animation: changeColor 2s infinite; /* 2 секунды на один цикл анимации */
}

/*раздвигает кнопки по краям в контейнер*/
.button-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.btn-screen {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.btn-screen:hover {
    background-color: #0056b3;
}

/*стиль заголовка "курс и программы обучения*/
.center-content .page-content h3 {
    background-color: #fafafa; /* фон */
    border-radius: 10px; /* радиус закругления углов */
    padding: 10px; /* внутренние отступы */
    border: 1px solid #d9d9d9; /* рамка */
    margin-bottom: 10px; /* отступ снизу */
    text-align: center; /* выравнивание текста */
    font-weight: bold; /* жирность текста */
    color: #ffffff; /* цвет текста */
    font-size: 20px; /* размер шрифта */
}


/*делает фон красным во всю ширину блока, также изменяет ширину блока и убирает отступы*/
/* Правило для десктопной версии */
.center-content h3 {
    background-color: #ff0000 !important;
    color: #ffffff !important;
    width: 100% !important;
    padding: 10px !important;
    text-align: center !important;
    margin: 0 auto !important;
}

.center-content h3 a {
    color: #ffffff !important;
    text-decoration: none !important;
    display: block !important;
}

/*это правило исключает accordion-header из стиля заголовоков*/
.center-content h3:not(.accordion-header) {
    background-color: #ff0000 !important;
    color: #ffffff !important;
    width: 100% !important;
    padding: 10px !important;
    text-align: center !important;
    margin: 0 auto !important;
}


/* Правило для мобильных устройств */
@media (max-width: 768px) {
    .center-content h3 {
        width: 100% !important;
        padding: 10px !important;
        background-color: #ff0000 !important;
        text-align: center !important;
    }
    
    .center-content h3 a {
        width: 100% !important;
        display: block !important;
        color: #ffffff !important;
        text-decoration: none !important;
    }
}

/*делает фон заголовка красным на всю ширину экрана на мобильной версии*/
@media screen and (max-width: 768px) {
  h3.center-content {
    width: 100%; /* Делаем заголовок на всю ширину экрана */
    background-color: #ff0000; /* Убедитесь, что фон применяется корректно */
    color: #ffffff;
    text-align: center;
    padding: 10px; /* Убираем лишнюю высоту */
  }
}

/*отключит иконки на экранах меньше 768 пикселей то есть на мобильной версии*/
@media (max-width: 768px) {
    .icon-container {
        display: none !important;
    }
}

/* Этот блок для эффекта спойлера текста в вопросах */
.accordion-content {
    max-height: 0;
    overflow: hidden;
    padding: 0 15px; /* Небольшие отступы для скрытого состояния */
    background-color: #f1f1f1;
    border-top: 1px solid #ddd;
    transition: max-height 0.5s ease-in-out; /* Плавное раскрытие */
}

/* Заголовок аккордеона */
.accordion .accordion-header {
    background-color: #007BFF !important; /* Синий цвет */
    color: white !important; /* Белый текст */
    text-align: left !important; /* Выравнивание по левому краю */
    margin: 5px 0 !important; /* Отступы */
    border-radius: 0 !important; /* Убираем скругления */
    padding: 15px !important; /* Отступы */
    cursor: pointer; /* Курсор как указатель */
}

/* Цвет при наведении */
.accordion .accordion-header:hover {
    background-color: #0056b3 !important;
}

/* Когда контент активен, изменяем max-height */
.accordion .accordion-content.active {
    max-height: 1000px; /* Устанавливаем значение, которое будет работать для большинства блоков */
    padding: 15px;
}

/* Добавление внутреннего отступа, обводки и закругления углов для пункта меню "Программы" */
.nav-item.item-226 a {
    border: 2px solid #ffffff; /* цвет обводки */
    padding: 5px 15px !important; /* 5px сверху и снизу, 15px слева и справа */
    display: inline-block;
    box-sizing: border-box; /* включает отступы и границы в общий размер элемента */
    border-radius: 10px; /* закругленные углы */
    font-family: 'Oswald', sans-serif;
    font-size: 1.1em;
    text-transform: uppercase;
    color: #ffffff; /* Цвет текста по умолчанию */
    text-decoration: none; /* Убираем подчеркивание */
}

/* Эффект при наведении для кнопки "Программы" */
.nav-item.item-226 a:hover {
    background-color: #ffffff; /* Цвет фона при наведении */
    color: #0033cc !important; /* Цвет текста при наведении */
    border: 2px solid #ffffff; /* Цвет обводки при наведении */
    font-weight: bold; /* Сделает текст жирным при наведении */
    transition: all 0.3s ease; /* Плавность перехода */
}


/* Скрывает кнопку Поиск и делает доступ по клику на кнопке*/
#header-searh {
    display: none; /* По умолчанию форма скрыта */
}

@media (max-width: 768px) {
    /* Убеждаемся, что форма поиска скрыта по умолчанию и на мобильных */
    #header-searh {
        display: none !important;
    }
}


/* скрываем текст по параметру accordion */
.accordion-header {
    cursor: pointer;
    padding: 15px;
    background-color: #007BFF;
    color: white;
    font-weight: bold;
    margin-bottom: 5px;
}

.accordion-content {
    display: none; /* Начальное состояние - скрыто */
    padding: 15px;
    background-color: #f1f1f1;
    border-top: 1px solid #ddd;
}

.accordion-header.active {
    background-color: #0056b3; /* Цвет активного заголовка */
}


/* код для стилизации параметра аккордеон */
.accordion-header {
    cursor: pointer;
    padding: 15px;
    background-color: #007BFF;
    color: white;
    font-weight: bold;
    margin-bottom: 5px;
    border-radius: 5px;
}

.accordion-header.active {
    background-color: #0056b3;
}

.accordion-content {
    display: none;
    padding: 15px;
    background-color: #f1f1f1;
    border-top: 1px solid #ddd;
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

@media (max-width: 768px) {
    .accordion-content {
        max-height: 0 !important;
        overflow: hidden;
        transition: max-height 0.4s ease;
    }
}

/* настраиваем вид кнопки Поиск в меню */
.search-btn a#maps-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    color: white;
    background-color: transparent;
    border: 2px solid white;
    border-radius: 10px;
    font-size: 1,1em;
    font-weight: 400; /* жирность текста */
    font-family: 'Oswald', sans-serif; 
    text-transform: uppercase;
    text-decoration: none;
    margin-top: 5px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.search-btn {
    display: flex;
    align-items: center; /* Центрирует кнопку по вертикали */
    justify-content: flex-end; /* Прижимает кнопку к правому краю */
}

.search-btn a#maps-btn:hover {
    background-color: white; /* Цвет фона при наведении */
    color: #0f3d96; /* Цвет текста при наведении */
}

.search-btn a#maps-btn i {
    margin-right: 5px; /* Отступ между иконкой и текстом */
}


.modal-overlay {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
}

.modal-content {
  background: white;
  padding: 20px;
  border-radius: 10px;
  position: relative;
  text-align: center;
}

.modal-close {
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 30px;
  color: black;
  cursor: pointer;
}

/* Стили для блока Лицензии */
.license-block img {
  cursor: pointer; /* Указатель мыши "рука" */
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Анимация */
  display: inline-block; /* Для корректного применения трансформаций */
}

.license-block img:hover {
  transform: scale(1.1); /* Увеличение размера на 10% */
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3); /* Тень при наведении */
}


#newsBlock p {
  cursor: pointer;
  color: #007bff;
  text-decoration: underline;
  margin-bottom: 10px;
}

#newsBlock p:hover {
  color: #0056b3;
}

#newsModal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  text-align: center;
  justify-content: center;
  align-items: center;
}

#newsContent {
  text-align: left;
}