/* video_order.css v32 */

@font-face {
    font-family: 'Roboto-Light';
    src: url('https://ac2p.ru/fonts/Roboto-Light.ttf') format('truetype');
}

#cctv-box {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    font-family: 'Roboto-Light', sans-serif;
    color: #111;
}

#cctv-box * {
    box-sizing: border-box;
}

#cctv-box .row {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    margin-bottom: 15px !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
    position: relative !important;
}

#cctv-box button.file1 {
    position: static !important;
    margin: 0 !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    flex-grow: 1 !important;
    background: #d27621 !important;
    color: #ffffff !important;
    font-weight: bold !important;
    border: 1px solid #c1691d !important;
    text-align: center !important;
    padding: 10px !important;
    height: auto !important;
    cursor: pointer !important;
}

#cctv-box button.file1:hover {
    background: #c1691d !important;
}

#cctv-box #NotFile {
    margin-top: 10px !important;
}

/* УБИЛИ КАПСЛОК И ЗАДАЛИ РАЗМЕРЫ */
#cctv-box select, #cctv-box input[type="text"], #cctv-box input[type="email"], #cctv-box input.area2 {
    flex-grow: 1 !important;
    width: auto !important;
    height: 38px !important;
    padding: 0 10px !important;
    margin: 0 !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    background: #fff !important;
    box-shadow: none !important;
    min-width: 0 !important;
    display: inline-block !important;
    font-size: 14px !important;
    color: #333 !important;
    text-transform: none !important; /* Отключаем автоматический UPPERCASE от темы */
    line-height: normal !important;
}

#cctv-box input.area3 {
    flex-grow: 1 !important;
    width: auto !important;
    height: 80px !important;
    padding: 10px !important;
    margin: 0 !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    background: #fff !important;
    box-shadow: none !important;
    font-size: 14px !important;
    color: #333 !important;
    text-transform: none !important; /* Отключаем автоматический UPPERCASE */
    line-height: normal !important;
}

/* ОШИБКИ ВАЛИДАЦИИ (КРАСНАЯ РАМКА) */
#cctv-box .error-input {
    border: 2px solid #d93025 !important;
    background-color: #fce8e6 !important;
}

#cctv-box .error-input::placeholder {
    color: #d93025 !important;
    opacity: 0.8 !important;
}

#cctv-box .dt-wrap {
    display: flex !important;
    width: 100% !important;
    gap: 5px !important;
    align-items: center !important;
}

#cctv-box input.date-inp {
    flex: 2 !important;
    min-width: 120px !important;
}

#cctv-box input.time-inp {
    flex: 1 !important;
    min-width: 80px !important;
    text-align: center !important;
}

#cctv-box .lbl {
    font-weight: bold !important;
    margin-right: 10px !important;
    min-width: 20px !important;
}

#cctv-box a.icon {
    text-decoration: none !important;
    border: none !important;
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    box-shadow: none !important;
}

#cctv-box .qm {
    font-size: 20px !important;
    color: #d27621 !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    cursor: pointer;
    font-family: sans-serif !important;
}

#cctv-box .cam-wrap {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: 8px !important;
    cursor: pointer !important;
    width: 30px !important;
    height: 30px !important;
    z-index: 50 !important;
}

#cctv-box .cctv-fa-icon {
    font-size: 24px !important;
    color: #d27621 !important;
    line-height: 1 !important;
    opacity: 0.8 !important;
}

#cctv-box .cam-wrap:hover .cctv-fa-icon {
    opacity: 1 !important;
}

#cctv-box .cam-popup {
    display: none;
    position: absolute !important;
    top: 35px !important;
    right: 0 !important;
    left: auto !important;
    transform: none !important;
    width: 560px !important;
    max-width: 85vw !important;
    background: #fff !important;
    border: 2px solid #d27621 !important;
    padding: 5px !important;
    z-index: 99999 !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3) !important;
    border-radius: 4px !important;
}

#cctv-box .cam-wrap:hover .cam-popup {
    display: block !important;
}

#cctv-box .cam-popup > *:not(#CurrentKam) {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
    z-index: -999 !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
}

#cctv-box .cam-popup img#CurrentKam {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
    border: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
}

/* КНОПКА ЗАКАЗАТЬ И ЕЁ НЕАКТИВНОЕ СОСТОЯНИЕ */
#cctv-box #sogl2, #cctv-box #sogl1 { margin-top: 30px !important; }
#cctv-box button.sub { 
    width: auto !important; 
    min-width: 150px !important; 
    padding: 10px 30px !important; 
    margin: 30px auto 0 auto !important; /* ВЕРХНИЙ ОТСТУП 30px, по центру */
    display: block !important; 
    cursor: pointer !important; 
    text-transform: none !important; 
    letter-spacing: normal !important; 
}
#cctv-box button.sub:disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    background: #e0e0e0 !important;
    color: #888 !important;
    border: 1px solid #ccc !important;
}

#cctv-box input[type="checkbox"] {
    width: 20px !important;
    height: 20px !important;
    margin: 0 10px 0 0 !important;
    flex-shrink: 0 !important;
    -webkit-appearance: checkbox !important;
}

#cctv-box .api-msg {
    margin: 15px 0 !important;
    padding: 20px !important;
    border-radius: 8px !important;
    font-weight: 800 !important;
    font-size: 16px !important;
    display: none;
    text-align: center !important;
    border: 2px solid transparent !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
    letter-spacing: 0.5px !important;
}

#cctv-box .status-ok {
    background: #e6f4ea !important;
    color: #137333 !important;
    border-color: #1e8e3e !important;
}

#cctv-box .status-err {
    background: #fce8e6 !important;
    color: #c5221f !important;
    border-color: #d93025 !important;
}

#cctv-box .status-load {
    background: #e8f0fe !important;
    color: #1967d2 !important;
    border-color: #1a73e8 !important;
}

.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay {
    background: #d27621 !important;
    border-color: #d27621 !important;
    color: #fff !important;
}

.flatpickr-calendar .flatpickr-day.today {
    border-color: #d27621 !important;
}

.flatpickr-calendar .flatpickr-day.today:hover, .flatpickr-calendar .flatpickr-day.today:focus {
    border-color: #d27621 !important;
    background: #d27621 !important;
    color: #fff !important;
}