@charset "utf-8";


/*define global colors*/
:root {
    /*theme background color*/
    --themeColor: #409eff;
    --themeColorRgb: 64, 158, 255;
    /*theme font color*/
    --themeFontColor: #fff;
    /*theme font color*/
    --themeFontChangeColor: #fff;
    /*mouse hover color*/
    --themeHoverColor: #409eff;
    /*theme dark*/
    --themeLightColor: #67aff6;

    /*basic color*/
    --ttx-success: #67c23a;
    --ttx-info: #909399;
    --ttx-warning: #e6a23c;
    --ttx-danger: #f56c6c;

    /*button primary*/
    --buttonBgColor: #fff;
    --buttonBdColor: #dee2e6;
    --buttonColor: #666666;

    /*icon*/
    --iconColor: #c0c4cc;

    /*red*/
    --color-red:#FF0000;

    --greyColor:#727272;

    --themeStyle:1;
}

::selection {
    color: var(--themeFontColor);
    background-color: var(--themeColor);
}

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: #fff;
}

ul, li, dl, dd, dt, ol, h1, h2, h3 {
    list-style: none;
    outline: none;
}

div {
    outline: none;
}

a {
    text-decoration: none;
    outline: none;
}

a:hover {
    cursor: pointer;
}

i.fa:not(.lsm-sidebar-more), a.fa:not(.lsm-sidebar-more), span.fa {
    color: var(--themeColor);
    cursor: pointer;
    font-size: 14px;
}

i.bi:not(.lsm-sidebar-more), a.bi:not(.lsm-sidebar-more), span.bi {
    color: var(--themeColor);
    cursor: pointer;
    font-size: 14px;
}

i.iconfont{
    line-height: 1;
    background: none!important;
}

i.iconfont:not(.lsm-sidebar-more), a.iconfont:not(.lsm-sidebar-more), span.iconfont {
    color: var(--themeColor);
    cursor: pointer;
    font-size: 14px;
}

i.bi.bi-chevron-down , i.bi.bi-chevron-up{
    color: var(--buttonColor);
}

i.bi.bi-trash, i.bi.bi-person-check, i.fa.fa-flag-checkered, i.fa.fa-unlink, i.bi.bi-cloud-upload-fill {
    color: var(--greyColor);
}

a.bi.bi-trash, a.bi.bi-person-check, a.fa.fa-flag-checkered, a.fa.fa-unlink, a.bi.bi-cloud-upload-fill {
    color: var(--greyColor) !important;
}


i.bi.bi-x-circle-fill, a.bi.bi-x-circle-fill {
    color: red;
}

.color-gray {
    color: var(--greyColor) !important;
}

a.color-gray:hover {
    cursor: not-allowed;
}

.ttx-checkboxMiddle {
    display: flex;
    align-items: center;
}

.ttx-layout-divCenter {
    display: flex;
    justify-content: center;
}

.ttx-themeBgColor {
    background-color: var(--themeColor) !important;
    color: var(--themeFontColor) !important;
}

.ttx-subtip:after {
    content: '●';
    position: absolute;
    top: 0px;
    color: red;
}

.hiddenDiv{
    display: none;
}

.lineHeight34 {
    line-height: 34px !important;
}

.ttx-color-success {
    color: #67c23a !important;
}

.ttx-color-info {
    color: #909399 !important;
}

.ttx-color-warning {
    color: #e6a23c !important;
}

.ttx-color-danger {
    color: #f56c6c !important;
}

.ttx-layout-toolBarFixed {
    position: fixed;
    bottom: 0px;
    background-color: #fff;
    width: 100%;
}

.ttx-layout-button{
    width: 150px;
    border: 1px solid var(--buttonBdColor);
    text-align: center;
    border-radius: 3px;
    height: 34px;
    line-height: 34px;
    cursor: pointer;
}

.ttx-textCenter{
    text-align: center!important;
}

.site-info-search-list {
    border-color: var(--buttonBdColor) !important;
    border-bottom: 1px solid #ccc;
    margin-top: 5px;
    background-color: #F5F7FA;
}

.site-info-search-table .slide-panel .panel-body .integ_tab {
    border: 6px solid #fbfbfb;
}


.site-info-search-list li{
border-color: var(--buttonBdColor) !important;
}

.site-info-search-table {
border-color: var(--buttonBdColor) !important;
margin-top: 5px;
}

.onlyV6{
display: none;
}
i.mapBtnActive {
color: var(--themeColor)!important;
}
i.mapBtnNotActive {
color: var(--greyColor)!important;
}


input::placeholder,textarea::placeholder {
    color: #ccc!important;
}



/* === CUSTOM DARK DOWNLOAD PAGE STYLE === */

/* Фон всей секции загрузки + белый текст */
.download-content {
    background: #1b1b1b !important;
    color: #ffffff !important;
}

.download-content * {
    color: #ffffff !important;
}

/* Карточки модулей загрузок */
.mod-download {
    background: #1b1b1b !important;
    border: 1px solid #ffffff !important;
    border-radius: 10px !important;
    padding-bottom: 65px !important;
    margin: 10px !important;
}

/* Заголовки */
.mod-download h3 span {
    color: #ffffff !important;
}

/* Кнопки */
.btn-download {
    color: #ffffff !important;
}

/* Текст внутри info */
.mod-download .info span {
    color: #ffffff !important;
}

/* === Подключение шрифта Montserrat === */

@font-face {
    font-family: 'Montserrat';
    src: url('Montserrat-Regular.woff2') format('woff2'),
         url('Montserrat-Regular.woff') format('woff'),
         url('Montserrat-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('Montserrat-Medium.woff2') format('woff2'),
         url('Montserrat-Medium.woff') format('woff'),
         url('Montserrat-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('Montserrat-Bold.woff2') format('woff2'),
         url('Montserrat-Bold.woff') format('woff'),
         url('Montserrat-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

/* === Применить ко всему сайту === */
html, body, * {
    font-family: 'Montserrat', sans-serif !important;
}

.icon-logo.iconfont:before {
    color: #ff8a02 !important;
}



/* Размер и позиция иконок */
.download-content .mod-download .appLogo {


    width: 60px; 
    height: 60px;
   position: absolute;
      right: 30px;  
	top: 20px; 
    bottom: 35px; 

    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

  
    font-size: 80px;
    line-height: 80px;
 
}

/* Конкретные иконки */
.appLogo--windows {
    background-image: url('/808gps/images/icons/windows.png');
}

.appLogo--ios {
    background-image: url('/808gps/images/icons/ios.png');
}

.appLogo--android {
    background-image: url('/808gps/images/icons/android.png');
}

.appLogo--player {
    background-image: url('/808gps/images/icons/player.png');
}


/* === тёмная форма логина === */

/* сама панель */
#loginPanel.login-panel {
    background: #202020 !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    border: 0.3px solid #ffffff !important;
 }

/* заголовок Добро пожаловать */
#spanWelcome {
    color: #ffffff !important;
}

/* логотип */
#logoImg {
    display: block !important;
    margin-bottom: 32px !important;
padding-left: 32px !important;
}

/* кнопка ВОЙТИ */
#loginSubmit {
    background: #ff8a02 !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
}

#loginhelp {
    background: #202020 !important;
    color: #FF7A00 !important;
    border: 2px solid #FF7A00 !important;
    border-radius: 2px !important;
    cursor: pointer;
    font-size: 16px !important;
    height: 45px !important;
    line-height: 42px !important;
    width: 88% !important;
    text-transform: uppercase !important;
    font-family: 'Montserrat', sans-serif !important;
 	margin-top: 12px !important;
}

#loginhelp:hover {
    background: #FF7A00 !important;
    color: #ffffff !important;
}


#loginPanel .btn-login:hover {
    background: #ff9f33 !important;
}



/* Скрыть исходный заголовок и вывести свой */
#spanTitle > span {
    display: none;
}

#spanTitle::after {
     content: "Видеонаблюдение и GPS-мониторинг";
    white-space: pre-line;
    display: inline-block;
margin-top: 10px !important;
    color: #ffffff;
}


#loginPanel span.input-bg {
    background: #2b2b2b !important;
    border: 1px solid #444 !important;
}

/* перекрываем inline-background input-а */
#loginPanel span.input-bg input {
    background: transparent !important;
    color: #ffffff !important;
}

/* плейсхолдер */
#loginPanel span.input-bg input::placeholder {
    color: #b5b5b5 !important;
}

#loginPanel span.input-bg[style] {
    background: #2b2b2b !important;
}


/* убираем белую заливку, которую рисует box-shadow */
.login-panel .tipinput,
.login-panel .tipinput1 {
    background: #2b2b2b !important;
    box-shadow: inset 0 0 0 1000px #2b2b2b !important;
    color: #ffffff !important;
}

/* плейсхолдер */
.login-panel .tipinput::placeholder,
.login-panel .tipinput1::placeholder {
    color: #bbbbbb !important;
}



/* скрываем оригинальный текст баннера 1 */
.banner1_box.boxText h2,
.banner1_box.boxText p {
    display: none !important;
}

/* добавляем новый заголовок banner 1*/
.banner1_box.boxText::before {
    content: "Видеонаблюдение и мониторинг";
    display: block;
    font-size: 32px;
    font-weight: 400;
    color: #ffffff;
    margin-bottom: 10px;
}

/* добавляем новый текст banner 1 */
.banner1_box.boxText::after {
    content: "Доступ к камерам, картам и аналитике в одном интерфейсе";
    display: block;
    font-size: 18px;
    font-weight: 300;
    color: #dddddd;
    line-height: 1.4;
}

/* скрываем оригинальный текст баннера 2 */
.banner2_box.boxText h2,
.banner2_box.boxText p {
    display: none !important;
}

/* добавляем новый заголовок banner 2*/
.banner2_box.boxText::before {
    content: "Используйте сервис так, как удобно вам";
    display: block;
    font-size: 32px;
    font-weight: 400;
    color: #ffffff;
    margin-bottom: 10px;
}

/* добавляем новый текст banner 2 */
.banner2_box.boxText::after {
    content: "Умный контроль маршрута и правил";
    display: block;
    font-size: 18px;
    font-weight: 300;
    color: #dddddd;
    line-height: 1.4;
}


/* скрываем оригинальный текст баннера 3 */
.banner3_box.boxText h2,
.banner3_box.boxText p {
    display: none !important;
}

/* добавляем новый заголовок banner 3*/
.banner3_box.boxText::before {
    content: "Видеоархив в облаке";
    display: block;
    font-size: 32px;
    font-weight: 400;
    color: #ffffff;
    margin-bottom: 10px;
}

/* добавляем новый текст banner 3 */
.banner3_box.boxText::after {
    content: "Все данные под надежной защитой";
    display: block;
    font-size: 18px;
    font-weight: 300;
    color: #dddddd;
    line-height: 1.4;
}



/* Оранжевый хедер вместо синего */
.header,
#main-topPanel,
#main-topPanel .header-title,
#main-topPanel .header-nav,
#main-topPanel .nav-bar,
#main-topPanel .nav-bar .lsm-container,
#main-topPanel .nav-bar .lsm-scroll,
#main-topPanel .nav-bar .lsm-sidebar,
#main-topPanel .v9-top-nav-left,
#main-topPanel .v9-top-nav-right,
#main-topPanel .v9-more-menu {
    background-color: #1b1b1b !important;
    background-image: none !important;
}

/* активная вкладка меню сверху black */
.v9-top-nav-right .curr,
.v9-top-nav-left .curr,
.header-nav .curr,
.nav-bar .curr,
.lsm-sidebar .curr {
    background-color: #FF7A00 !important;
    color: #FF7A00 !important;
}

/* иконки внутри выбранной вкладки также белые */
.v9-top-nav-right .curr i,
.v9-top-nav-left .curr i,
.header-nav .curr i,
.nav-bar .curr i,
.lsm-sidebar .curr i {
    color: #FF7A00 !important;
}

:root {
    --themeLightColor: #FF7A00 !important;
    --themeColor: #FF7A00 !important;
}

#spanCopyright {
    color: transparent !important;
}
#spanCopyright::before {
    content: "© 2025 CamCloud. Все права защищены.";
    color: #ffffff !important;
}

.wy-footer {
    background: #1a1a1a !important;
}

.wy-footer .footer-cont,
.wy-footer .copyright,
.wy-footer span {
    color: #ffffff !important;
}


/* Мобильная версия – ne szhimaem banner */
.banners .banner {
    background-size: cover !important;
    background-position: 30% center !important; 
    background-repeat: no-repeat !important;
    overflow: hidden !important;
}


@media only screen and (max-device-width: 768px) {
    .download-content ul {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }

    .download-content ul li.mod-download {
        width: 50% !important;        /* две карточки в строке */
        float: none !important;       /* убрать старые float */
        box-sizing: border-box !important;
        margin: 0 0 15px 0 !important;
    }

    .download-content {
        padding-left: 2px !important;
        padding-right: 2px !important;
    }

}

a.fa, i.fa, span.fa {
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
}

/* Font Awesome 5: fas / far / fab */
i.fas, i.far, i.fab,
a.fas, a.far, a.fab,
span.fas, span.far, span.fab {
  font-family: "Font Awesome 5 Free" !important;
}

/* для solid (fas) нужен вес 900 */
i.fas, a.fas, span.fas {
  font-weight: 900 !important;
}

/* для regular (far) — 400 */
i.far, a.far, span.far {
  font-weight: 400 !important;
}