body {
    /*background-image: url(/images/bg.jpg);
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: repeat;
    background-attachment: fixed;*/
    background: #f5f5f7;
    margin-right: calc(-1 * (100vw - 100%));
    overflow-x: hidden;
    min-height: 100%;
}

.clearfix:after {
  content: " ";
  clear: both;
  display: table;
}

.content {
  background-color: rgba(0, 0, 0, 0);
  min-width: 600px;
}

@media (min-width: 651px) {
    .my-container {
        margin: 0 auto;
        width: calc(100vw - (10px * 2));
        max-width: 1350px;
    }
}

.header {
  max-width: 1350px;
  margin: 0px auto;
  width: 100%;
  font-size: 14px;
  font-weight: bold;
}

.page-title-block {
    font-family: Verdana, sans-serif;
    border: 1px solid #d9d9d9;
    border-radius: 4px !important;
    box-shadow: rgba(0,0,0,0.08) 0px 1px 4px;
    width: 100%;
    background: #fff;
    flex-wrap: nowrap;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.page-title-block .page-title {
    padding: 15px;
    margin: 0;
}

.page-title-block .page-title legend {
    margin: 0;
}

.page-title-block .page-title-create-theme_btn {
    font-size: 12px;
    margin: 0  15px 0 0;
}

.page-title-block .page-title-create-theme_btn .create-theme__btn {
    background-color: #3377aac2;
    color: #ffffff;
    padding: 10px 15px;
    overflow: hidden;
    border: none;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 10px 2px;
    text-decoration: none;
}

.page-title-block .page-title-create-theme_btn .create-theme__btn:hover {
    background-color: #0babe4;
    border-color: #0babe4;
}

.main {
    max-width: 1350px;
    padding: 25px 25px;
    margin: 0px auto;
    width: 100%;
    border-radius: 0 0 4px 4px;
    background-color: #fafafa;
    box-shadow: 0 0 27px 0 rgba(0,0,0,.2);
    min-height: calc(100vh - 15px - 183.5px - 100px);
}

.popup-more {
    cursor: pointer;
}

.popup-more:hover {
    text-decoration: underline;
}

.header .header-top {
    flex-wrap: nowrap;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
}

.header .header-top .header-logo__inner {
    display: flex;
    color: #193e82;
    font-size: 16pt;
    align-items: center;
}

.header .header-top .header-logo__inner span{
    color: #0babe4
}

.header .header-top .header-logo a{
    text-decoration: none;
}

.header .header-top .header-account {
    color: #0babe4;
}

.header .header-top .header-account .header-account-btn {
    display: inline-block;
    position: relative;
}

.header .header-top .header-account .header-account-btn svg:hover {
    stroke: #0babe4;
    fill: #0babe4;
}

.header .header-top .header-account .header-account-btn:hover {
    text-decoration: none;
    stroke: #0babe4;
    fill: #0babe4;
}

.header .header-top .header-account .icons-account {
    height: 30px;
}

.header .header-top .header-account .header__register-or-login {
    text-align: right;
    color: #244082;
}

.header .header-top .header-account .header__register-or-login a{
  color: #0babe4;
  text-decoration: none;
}

.header .header-top .header-account .header__register-or-login a:hover {
  text-decoration: underline;
}

.header .header-nav {
  flex-wrap: nowrap;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #37a;
  box-shadow: 0 0 27px 0 rgba(0,0,0,.2);
  font-weight: normal;
  border-radius: 4px 4px 0 0;
}

.header .header-nav .icons {
  height: 22px;
  filter: invert(1);
  padding: 0 2px 4px 0;
}

.header .header-nav .header-nav_list{
  margin: 0;
  padding: 0 0 0 6px;
}

.header .header-nav .header-nav_list li {
  display: inline-block;
  vertical-align: bottom;
  margin: 0px 0 0 -6px;
}

.header .header-nav .header-nav_list li:first-child {
  border-radius: 4px 4px 0 0;
}

.header .header-nav .header-nav_list .header-nav_el {
  color: #fff;
  vertical-align: middle;
  display: flex;
}

.header .header-nav .header-nav_list .header-nav_el a {
  color: #fff;
    padding: 10px 10px;
    text-decoration: none;
    font-weight: bold;
    text-transform: none;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.header .header-nav .header-nav_list .header-nav_el a.active {
    color: #000;
}

.header .header-nav .header-nav_list .header-nav_el a.active img{
    filter: none;
}

.header .header-nav .header-nav_list .header-nav_el a:hover {
    background: #ffffff1f;
    box-shadow: 0 0 3px 0px rgba(0,0,0,0.2);
}

.header .header-nav .header-nav_list .header-nav_el a.main-link:hover {
    border-radius: 4px 0 0 0;
}

 .header .header-nav .header-nav_list .header-nav_el a.active, .header .header-nav .header-nav_list .header-nav_el a.active:hover, .header .header-nav .header-nav_list .header-nav_el a.active:focus {
    background: #fafafa;
    border-radius: 3px 3px 0 0;
    border-bottom: none;
    z-index: 3;
    box-shadow: 0 -3px 5px -3px rgba(11,171,228,1);
    transition: none;
}

.header .header-nav .header-wrap-search {
  flex: 0 0 auto;
    margin-left: 10px;
    position: relative;
}

.header .header-nav .header-wrap-search .header-search {
  margin: 0 15px;
  box-shadow: inset 0px 1px 4px 0px rgba(0,0,0,0.4);
  line-height: 36px;
  width: 260px;
  color: #333;
  background: #eee linear-gradient(to bottom, #fff 0%, rgba(255,255,255,0) 100%);
  border-radius: 3px;
  border: 1px solid #3377aa;
}

.header .header-nav .header-wrap-search .header-search input {
  background: none;
  border: 0;
  color: inherit;
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  order: 2;
  outline: none;
  padding: 0;
  width: 100%;
  height: 36px;
  line-height: 36px;
}

.header-search input::placeholder {
  color: inherit;
  opacity: 0.5
}

.header .header-nav .header-wrap-search .header-search .header-search-flex {
  align-items: center;
  display: flex;
  position: relative;
}

.header .header-nav .header-wrap-search .header-search .header-search-prefix {
  background: url(/images/icons/search_FILL0_wght400_GRAD0_opsz24.png) no-repeat center;
  background-size: 20px;
  flex: 0 0 auto;
  opacity: 0.5;
  order: 1;
  text-align: center;
  transition: opacity .2s linear;
  width: 36px;
  height: 36px;
}

.header .header-nav .header-wrap-search .header-search input:focus~ .header-search-prefix {
  opacity: 1;
}

.header .header-nav .header-wrap-search .header-search:focus-within {
  border: 1px solid rgba(0,0,0,0.8);
}

.alert {
    text-align: center;
    margin-top: 1rem;
}

#AccountModal .modal-title {
    color: #00367a;
    line-height: 1.2;
}

#AccountModal .modal-body {
    font-size: 12pt;
    text-align: center;
}

#AccountModal .modal-body a {
    color: #0babe4;
}

#AccountModal .modal-footer .btn {
    background-color: #3377aac2;
    color: #ffffff;
    transition: background-color ease-in-out 0.15s, border-color ease-in-out 0.15s;
}

#AccountModal .modal-footer .btn:hover {
    background-color: #0babe4;
    border-color: #0babe4;
}

.Statistics {
    font-family: Verdana, sans-serif;
    font-size: 12px;
    margin-top: 20px;
}

.Statistics .statistics-table tr .top-th {
  font-family: Tahoma, sans-serif;
  font-size: 11px;
  font-weight: bold;
  color: #fff;
}

.Statistics .statistics-table tr .top-td {
  width: 33%;
}

.footer {
    max-width: 1350px;
    width: 100%;
    height: 70px;
    font-size: 11pt;
    font-weight: bold;
    /*background: rgb(250 250 250);
    border-radius: 4px 4px 0 0;*/
}

.footer .footer-row {
    padding: 0;
    flex-wrap: nowrap;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
    opacity: 0.8;
}

/*.footer .footer-row span{
    padding: 10px 15px 0px;
    font-size: 20px;
    margin: auto 0;
}*/

.footer .footer-row .footer-logo__inner {
    display: flex;
    color: #212529;
    align-items: center;
}

.footer .footer-row .footer-logo a {
    text-decoration: none;
}



.modal.image-detail .modal-dialog {
    position: relative;
    margin: auto;
    top: 50%;
    transform: translateY(-50%); /* Центрирование по вертикали */
    max-width: fit-content;
}

.modal.image-detail .modal-dialog .modal-content {
    display: block;
    max-width: 80vw;
    max-height: 80vh; /* Ограничение высоты */
    width: auto;
    margin: auto;
    background-color: #fafafa;
    border-radius: 5px;
}

.modal.image-detail .modal-dialog .modal-content img{
    display: block;
    max-width: 77vw;
    max-height: 77vh; /* Ограничение высоты */
    width: auto;
    margin: auto;
    background-color: #fafafa;
    border-radius: 5px;
}

.modal.image-detail .close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s;
}

.modal.image-detail .close:hover {
    color: red; /* Изменение цвета при наведении */
}