.badge { display: inline-block; padding: .25em .4em; font-size: 100%; font-weight: 500; line-height: 1; color: #fff; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: .25rem; } .button-success, .button-error, .button-warning, .button-secondary { color: white; border-radius: 4px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); } .button-success:hover, .button-error:hover, .button-warning:hover, .button-secondary:hover { background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1)); } .button-success { background: #1cb841; /* this is a green */ } .button-error { background: #ca3c3c; /* this is a maroon */ } .button-warning { background: #df7514; /* this is an orange */ } .button-secondary { background: #42b8dd; /* this is a light blue */ } .button-group > a:first-child { border-radius: 4px 0px 0px 4px; } .button-group > a:last-child { border-radius: 0px 4px 4px 0px; } .link-success { color: #5cb85c; border-color: #5cb85c; } .link-secondary { color: #5bc0de; border-color: #5bc0de; } .link-error { color: #d9534f; border-color: #d9534f; } .link-warning { color: #f0ad4e; border-color: #f0ad4e; } .link-primary { color: #0275d8; border-color: #0275d8; } #g-alarm-logs { min-width: 984px; margin: 0 auto; } #g-alarm-logs .c-table .sourceId { min-width: 70px; white-space: nowrap; } #g-alarm-logs .c-table .type { min-width: 50px; } #g-alarm-logs .c-table .level { min-width: 90px; } #g-alarm-logs .c-table .area { min-width: 100px; } #g-alarm-logs .c-table .device { min-width: 50px; } #g-alarm-logs .c-table .time { width: 220px; text-align: center; } #g-alarm-logs .c-table .status { width: 95px; text-align: center; } #g-alarm-logs .c-table .status a { color: #5bc0de; text-decoration: underline; } #g-alarm-logs .c-table .sourceCameras { width: 80px; text-align: center; } #g-alarm-logs .c-table .sourceCameras a { width: 100%; height: 100%; } #g-alarm-logs .c-table .detailAction { text-align: center; width: 70px; } #g-alarm-logs .c-table .detailAction a { width: 100%; height: 100%; } #g-alarm-logs .top-actions { display: inline-block; } #g-alarm-logs .c-modal img { max-height: 90px; max-width: 160px; cursor: pointer; } #g-alarm-logs .c-modal .description div, #g-alarm-logs .c-modal .eventComment div { width: 200px; display: block; } #g-alarm-logs .c-modal .description div p, #g-alarm-logs .c-modal .eventComment div p { margin: 0; } #g-alarm-logs .c-modal .form-init .reportUser, #g-alarm-logs .c-modal .form-init .reportTime, #g-alarm-logs .c-modal .form-init .eventCause, #g-alarm-logs .c-modal .form-init .eventComment { display: none; } #g-alarm-logs .c-modal .c-chart-dashboard { min-width: 920px; } .badge { display: inline-block; padding: .25em .4em; font-size: 100%; font-weight: 500; line-height: 1; color: #fff; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: .25rem; } .button-success, .button-error, .button-warning, .button-secondary { color: white; border-radius: 4px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); } .button-success:hover, .button-error:hover, .button-warning:hover, .button-secondary:hover { background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1)); } .button-success { background: #1cb841; /* this is a green */ } .button-error { background: #ca3c3c; /* this is a maroon */ } .button-warning { background: #df7514; /* this is an orange */ } .button-secondary { background: #42b8dd; /* this is a light blue */ } .button-group > a:first-child { border-radius: 4px 0px 0px 4px; } .button-group > a:last-child { border-radius: 0px 4px 4px 0px; } .link-success { color: #5cb85c; border-color: #5cb85c; } .link-secondary { color: #5bc0de; border-color: #5bc0de; } .link-error { color: #d9534f; border-color: #d9534f; } .link-warning { color: #f0ad4e; border-color: #f0ad4e; } .link-primary { color: #0275d8; border-color: #0275d8; } #g-alarms { min-width: 984px; margin: 0 auto; } #g-alarms .c-table .name { min-width: 100px; } #g-alarms .c-table .level { min-width: 90px; } #g-alarms .c-table .description { min-width: 100px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #g-alarms .c-table .sop { min-width: 100px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #g-alarms .c-table .editAction { text-align: center; width: 50px; } #g-alarms .c-table .editAction a { width: 100%; height: 100%; } #g-alarms .top-actions { display: inline-block; } @media (max-width: 991px) { #g-login { flex-direction: column; justify-content: unset; align-items: unset; } #g-login .company { margin: 40px auto 40px; } #g-login .login-form { margin: 0 auto !important; } } @media (max-width: 767px) { #g-app #g-content { width: 100% !important; } #g-login .company .company-logo { width: auto !important; height: auto !important; max-width: 80%; max-height: 80%; } #g-side-nav, #account-menu { display: none; } #g-header { padding: unset !important; flex-wrap: wrap; } #g-header #heading { display: flex; align-items: center; } #g-header #heading .mobile-ticp-icon { margin-left: 40px; display: block !important; } #g-header .latest-news { width: 100% !important; margin-top: -20px; } #g-header #mobile-menu { display: block !important; margin-left: 10px; height: 32px; } #g-header #mobile-menu svg { font-size: 32px; } #g-header #mobile-menu:hover { cursor: pointer; } .mobile-side-nav { overflow-y: auto; } .mobile-side-nav::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 15px; background-color: #ccc; } .mobile-side-nav::-webkit-scrollbar { border-radius: 17px; width: 7px; height: 6px; background-color: #ccc; } .mobile-side-nav::-webkit-scrollbar-thumb { border-radius: 13px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #313a3e; } .mobile-side-nav .ticp-logo { margin: 10px 23.5px 0; } .g-side-menu { font-size: 18px; margin-left: 30px !important; overflow-y: auto; } .g-side-menu::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 15px; background-color: #ccc; } .g-side-menu::-webkit-scrollbar { border-radius: 17px; width: 7px; height: 6px; background-color: #ccc; } .g-side-menu::-webkit-scrollbar-thumb { border-radius: 13px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #313a3e; } .g-side-menu .hr-line { border-bottom: 1px solid #5686da; width: 90%; opacity: 0.15; margin: 5px auto; } .g-side-menu .hr-line-extra { border-bottom: 1px solid #999; width: 90%; opacity: 0.5; margin: 5px auto; } .g-side-menu .menu-item-extra { margin: 12px 0; font-size: 20px; } .g-side-menu .menu-item-extra .menu-title { display: flex; align-items: center; } .g-side-menu .menu-item { margin: 12px 0; } .g-side-menu .menu-item a { margin-left: 30px; } .g-side-menu .menu-item a:hover { color: #5686da; } .g-side-menu .menu-item .menu-title { display: flex; align-items: center; } .g-side-menu span { cursor: pointer; } .g-side-menu span.active { color: #5686da; } .g-side-menu .menu-title { font-weight: 600; font-size: 20px; } .g-side-menu .menu-title a { display: flex; align-items: center; margin-left: unset; } .g-side-menu .menu-title a.active { color: #5686da; } .g-side-menu .sub-menu { margin-left: 18px; } .g-side-menu .sub-menu .sub-menu-item { margin: 6px 0; } .g-side-menu .trigger-icon { margin: 0 10px; width: 10px; text-align: center; line-height: 20px; } .g-side-menu .urlIcon { margin-right: 10px; width: 20px; text-align: center; } #g-reset-password-dialog .pure-control-group { display: block !important; } #g-reset-password-dialog .pure-control-group label { text-align: left !important; } #g-reset-password-dialog .pure-control-group input { width: 100%; } #g-reset-password-dialog footer { white-space: unset !important; } #g-content { padding: unset !important; } #g-line-dashboard .c-border { overflow: auto; } #g-line-dashboard .c-border section { width: 1464px !important; } #g-line-dashboard .c-border::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 15px; background-color: #ccc; } #g-line-dashboard .c-border::-webkit-scrollbar { border-radius: 17px; width: 7px; height: 6px; background-color: #ccc; } #g-line-dashboard .c-border::-webkit-scrollbar-thumb { border-radius: 13px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #313a3e; } .statsDashboard-log .c-border, .vessels-dashboard-table .c-border, .deliverLog-table .c-border, .topTenDriver-table .c-border, #g-logistic-driver-tabs .c-border, #g-logistic-logistic-statistics-tabs .c-border, #g-event-manage-tabs .c-border, #g-live-message-tabs .c-border, #g-user-management-tabs .c-border, #g-service-tabs .c-border, #g-device-tabs .c-border, .auditLog-table .c-border, .billboard-table .c-border, .terminalBoard-table .c-border { overflow: auto; } .statsDashboard-log .c-border section, .vessels-dashboard-table .c-border section, .deliverLog-table .c-border section, .topTenDriver-table .c-border section, #g-logistic-driver-tabs .c-border section, #g-logistic-logistic-statistics-tabs .c-border section, #g-event-manage-tabs .c-border section, #g-live-message-tabs .c-border section, #g-user-management-tabs .c-border section, #g-service-tabs .c-border section, #g-device-tabs .c-border section, .auditLog-table .c-border section, .billboard-table .c-border section, .terminalBoard-table .c-border section { width: 1447px !important; } .statsDashboard-log .c-border::-webkit-scrollbar-track, .vessels-dashboard-table .c-border::-webkit-scrollbar-track, .deliverLog-table .c-border::-webkit-scrollbar-track, .topTenDriver-table .c-border::-webkit-scrollbar-track, #g-logistic-driver-tabs .c-border::-webkit-scrollbar-track, #g-logistic-logistic-statistics-tabs .c-border::-webkit-scrollbar-track, #g-event-manage-tabs .c-border::-webkit-scrollbar-track, #g-live-message-tabs .c-border::-webkit-scrollbar-track, #g-user-management-tabs .c-border::-webkit-scrollbar-track, #g-service-tabs .c-border::-webkit-scrollbar-track, #g-device-tabs .c-border::-webkit-scrollbar-track, .auditLog-table .c-border::-webkit-scrollbar-track, .billboard-table .c-border::-webkit-scrollbar-track, .terminalBoard-table .c-border::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 15px; background-color: #ccc; } .statsDashboard-log .c-border::-webkit-scrollbar, .vessels-dashboard-table .c-border::-webkit-scrollbar, .deliverLog-table .c-border::-webkit-scrollbar, .topTenDriver-table .c-border::-webkit-scrollbar, #g-logistic-driver-tabs .c-border::-webkit-scrollbar, #g-logistic-logistic-statistics-tabs .c-border::-webkit-scrollbar, #g-event-manage-tabs .c-border::-webkit-scrollbar, #g-live-message-tabs .c-border::-webkit-scrollbar, #g-user-management-tabs .c-border::-webkit-scrollbar, #g-service-tabs .c-border::-webkit-scrollbar, #g-device-tabs .c-border::-webkit-scrollbar, .auditLog-table .c-border::-webkit-scrollbar, .billboard-table .c-border::-webkit-scrollbar, .terminalBoard-table .c-border::-webkit-scrollbar { border-radius: 17px; width: 7px; height: 6px; background-color: #ccc; } .statsDashboard-log .c-border::-webkit-scrollbar-thumb, .vessels-dashboard-table .c-border::-webkit-scrollbar-thumb, .deliverLog-table .c-border::-webkit-scrollbar-thumb, .topTenDriver-table .c-border::-webkit-scrollbar-thumb, #g-logistic-driver-tabs .c-border::-webkit-scrollbar-thumb, #g-logistic-logistic-statistics-tabs .c-border::-webkit-scrollbar-thumb, #g-event-manage-tabs .c-border::-webkit-scrollbar-thumb, #g-live-message-tabs .c-border::-webkit-scrollbar-thumb, #g-user-management-tabs .c-border::-webkit-scrollbar-thumb, #g-service-tabs .c-border::-webkit-scrollbar-thumb, #g-device-tabs .c-border::-webkit-scrollbar-thumb, .auditLog-table .c-border::-webkit-scrollbar-thumb, .billboard-table .c-border::-webkit-scrollbar-thumb, .terminalBoard-table .c-border::-webkit-scrollbar-thumb { border-radius: 13px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #313a3e; } #g-live-traffic .c-border section { width: 700px !important; } #g-traffic-prediction #g-traffic-prediction-tabs.c-tabs > .tabContent .c-border { overflow: unset !important; } .terminal-dashboard-table .c-border { overflow: auto; } .terminal-dashboard-table .c-border section { width: 850px !important; } .terminal-dashboard-table .c-border::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 15px; background-color: #ccc; } .terminal-dashboard-table .c-border::-webkit-scrollbar { border-radius: 17px; width: 7px; height: 6px; background-color: #ccc; } .terminal-dashboard-table .c-border::-webkit-scrollbar-thumb { border-radius: 13px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #313a3e; } #g-stats-dashboard-tabs .tabs-content { width: 100%; } #g-stats-dashboard-tabs .tabs-content .statsDashboard-info { display: block !important; } .statistic-content .chart-card-info { display: block !important; } #g-information-card { width: 100% !important; margin-bottom: 5px; } #g-information-card .fullScreen-icon { display: none; } #g-vessels-dashboard .table-head .left .title { width: 160px !important; } #g-vessels-dashboard .container { height: calc(100vh - 273px) !important; } .deliverLog-table .table-head .left .title { display: block !important; } #g-logistic-driver-tabs .container { height: calc(100vh - 240px) !important; } #g-audit-log .auditLog-table .container { height: calc(100vh - 304px) !important; } .terminalBoard-table .container, .billboard-table .container { height: calc(100vh - 373px) !important; } #g-mape-terminal, #g-mape-gate, #g-mape-delivery { overflow: auto; } #g-mape-terminal .content, #g-mape-gate .content, #g-mape-delivery .content { width: 1447px !important; } } @media (max-width: 575px) { #g-content .statsDashboard-headBar, #g-content .logisticDeliver-headBar, #g-content .head-dateRange, #g-content .traffic-statistic-headBar, #g-content .auditLog-headBar { width: 100% !important; flex-wrap: wrap; } #g-content .statsDashboard-headBar #datetime .date-range-label, #g-content .logisticDeliver-headBar #datetime .date-range-label, #g-content .head-dateRange #datetime .date-range-label, #g-content .traffic-statistic-headBar #datetime .date-range-label, #g-content .auditLog-headBar #datetime .date-range-label, #g-content .statsDashboard-headBar .c-date-range .date-range-label, #g-content .logisticDeliver-headBar .c-date-range .date-range-label, #g-content .head-dateRange .c-date-range .date-range-label, #g-content .traffic-statistic-headBar .c-date-range .date-range-label, #g-content .auditLog-headBar .c-date-range .date-range-label { margin: unset !important; } #g-content .statsDashboard-headBar .button, #g-content .logisticDeliver-headBar .button, #g-content .head-dateRange .button, #g-content .traffic-statistic-headBar .button, #g-content .auditLog-headBar .button { width: 100%; } #g-setting-billboard .table-head { display: block !important; } #g-setting-billboard #g-billboard-edit-dialog #g-billboard-edit-content label { width: unset !important; } #g-setting-terminalBoard .table-head { display: block !important; } #g-setting-terminalBoard #g-terminalBoard-edit-dialog #g-terminalBoard-edit-content label { width: 60px !important; } #g-statistics-terminal-export-dialog #g-statistics-terminal-export-content { overflow-x: hidden; } #g-statistics-terminal-export-dialog #g-statistics-terminal-export-form-left label { width: 60px !important; } #g-statistics-terminal-export-dialog .pure-control-group .MuiFormControl-root, #g-statistics-terminal-export-dialog .pure-control-group .MuiInputBase-root { width: 240px; } #g-interface-record-search-dialog .content > .date-select, #g-data-processor-record-search-dialog .content > .date-select, #g-data-provide-record-search-dialog .content > .date-select, #g-audit-log-statistics-search-dialog .content > .date-select { display: block !important; } #g-interface-record-search-dialog .content > .date-select .date-range-label.startLabel, #g-data-processor-record-search-dialog .content > .date-select .date-range-label.startLabel, #g-data-provide-record-search-dialog .content > .date-select .date-range-label.startLabel, #g-audit-log-statistics-search-dialog .content > .date-select .date-range-label.startLabel, #g-interface-record-search-dialog .content > .date-select .date-range-label.endlabel, #g-data-processor-record-search-dialog .content > .date-select .date-range-label.endlabel, #g-data-provide-record-search-dialog .content > .date-select .date-range-label.endlabel, #g-audit-log-statistics-search-dialog .content > .date-select .date-range-label.endlabel { width: 70px; display: inline-block; text-align: right; padding-right: 10px; } #g-interface-record-search-dialog .content > .date-select .MuiInputAdornment-positionEnd, #g-data-processor-record-search-dialog .content > .date-select .MuiInputAdornment-positionEnd, #g-data-provide-record-search-dialog .content > .date-select .MuiInputAdornment-positionEnd, #g-audit-log-statistics-search-dialog .content > .date-select .MuiInputAdornment-positionEnd { display: none; } #g-interface-record-search-dialog .content > .date-select .c-date-picker, #g-data-processor-record-search-dialog .content > .date-select .c-date-picker, #g-data-provide-record-search-dialog .content > .date-select .c-date-picker, #g-audit-log-statistics-search-dialog .content > .date-select .c-date-picker { width: unset !important; margin-bottom: 3px; } #g-interface-record-search-dialog .content > .date-select .flatpickr-input, #g-data-processor-record-search-dialog .content > .date-select .flatpickr-input, #g-data-provide-record-search-dialog .content > .date-select .flatpickr-input, #g-audit-log-statistics-search-dialog .content > .date-select .flatpickr-input { width: unset !important; padding: 0 7px; font-size: 0.9em; } #g-interface-record-search-dialog .content > .date-select .button, #g-data-processor-record-search-dialog .content > .date-select .button, #g-data-provide-record-search-dialog .content > .date-select .button, #g-audit-log-statistics-search-dialog .content > .date-select .button { width: 80% !important; margin: 4px auto !important; display: inherit !important; } #g-interface-record-search-dialog .MuiTablePagination-selectRoot, #g-data-processor-record-search-dialog .MuiTablePagination-selectRoot, #g-data-provide-record-search-dialog .MuiTablePagination-selectRoot, #g-audit-log-statistics-search-dialog .MuiTablePagination-selectRoot { margin-left: 3px; margin-right: 10px; } #g-interface-record-search-dialog .MuiTablePagination-actions, #g-data-processor-record-search-dialog .MuiTablePagination-actions, #g-data-provide-record-search-dialog .MuiTablePagination-actions, #g-audit-log-statistics-search-dialog .MuiTablePagination-actions { margin-left: 10px; } #g-audit-log-statistics-search-dialog .content > .date-select .date-range-label.startLabel, #g-audit-log-statistics-search-dialog .content > .date-select .date-range-label.endlabel { width: 100px; } #g-audit-log-statistics-search-dialog .content section .container { min-width: unset !important; height: calc(100vh - 543px); } #g-audit-log-statistics-search-dialog .content section .container .c-table .statisticDate { width: 80px; } #g-audit-log-statistics-search-dialog .content section .container .c-table .websiteCount, #g-audit-log-statistics-search-dialog .content section .container .c-table .managementCount, #g-audit-log-statistics-search-dialog .content section .container .c-table .appCount, #g-audit-log-statistics-search-dialog .content section .container .c-table .totalCount { width: 50px; } #g-audit-log-statistics-search-dialog .content section .container .c-table .websiteCount div, #g-audit-log-statistics-search-dialog .content section .container .c-table .managementCount div, #g-audit-log-statistics-search-dialog .content section .container .c-table .appCount div, #g-audit-log-statistics-search-dialog .content section .container .c-table .totalCount div { width: 50px; } #g-audit-log-statistics-search-dialog .content .footer { flex-direction: column; justify-content: space-around; } #g-audit-log-statistics-search-dialog .content .footer .footer-item { margin-right: 0; justify-content: space-between; padding: 3px; } #g-audit-log-statistics-search-dialog .content .footer .footer-item .footer-item-label:after { content: ""; } } @media (max-width: 419px) { #g-login .company { width: 100%; } #g-login .company span { font-size: 2em !important; } #g-login .login-form { width: 90% !important; padding: 20px !important; } #g-login .login-form .title { margin-bottom: 15px !important; } #g-login .login-form #loginParam1, #g-login .login-form #loginParam2 { margin-bottom: 10px !important; } #g-login .login-form .imageCodeContainer { margin-top: unset !important; } #g-login .login-form .imageCodeContainer input { margin-top: unset !important; width: 100% !important; } #g-login .login-form button { margin-top: 10px !important; } #g-line-dashboard .table-head { display: block !important; } #g-line-dashboard .table-head .selector { margin: 5px 10px 10px; width: 100%; display: flex !important; } #g-line-dashboard .table-head .selector label { width: 70px; } #g-line-dashboard .table-head .selector > div { margin-left: 20px !important; width: 50% !important; } #g-line-dashboard .table-head .selector > div.inputSelect { width: 70% !important; } .statsDashboard-headBar .c-date-range, .logisticDeliver-headBar .c-date-range, .head-dateRange .c-date-range, .traffic-statistic-headBar .c-date-range, .auditLog-headBar .c-date-range { width: 325px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; } .statsDashboard-headBar .c-date-range .date-range-label, .logisticDeliver-headBar .c-date-range .date-range-label, .head-dateRange .c-date-range .date-range-label, .traffic-statistic-headBar .c-date-range .date-range-label, .auditLog-headBar .c-date-range .date-range-label { width: 80px; text-align: right; } .statsDashboard-headBar .c-date-range .c-date-picker input, .logisticDeliver-headBar .c-date-range .c-date-picker input, .head-dateRange .c-date-range .c-date-picker input, .traffic-statistic-headBar .c-date-range .c-date-picker input, .auditLog-headBar .c-date-range .c-date-picker input { width: 200px !important; } .statsDashboard-headBar .button, .logisticDeliver-headBar .button, .head-dateRange .button, .traffic-statistic-headBar .button, .auditLog-headBar .button { width: 325px !important; margin: 0 auto 5px; } #g-content #g-mape .head-dateRange .head-item { width: 325px; margin: 0 auto; padding: 0 0 5px 0; } #g-content #g-mape .head-dateRange .head-item label { width: 80px; text-align: right; } #g-content #g-mape .head-dateRange .head-item .date-dropdown-list, #g-content #g-mape .head-dateRange .head-item .prediction-dropdown-list { width: 240px; } #g-content #g-mape .head-dateRange .button { margin: 0 auto; } #g-stats-dashboard-tabs { height: calc(100% - 122px) !important; } #g-vessels-dashboard .vessels-dashboard-table section .container { height: calc(100vh - 321px) !important; } #g-terminal-dashboard .terminal-dashboard-table section .container { height: calc(100vh - 250px) !important; } #g-audit-log .auditLog-table .container { height: calc(100vh - 352px) !important; } #g-vessels-dashboard .table-head { justify-content: unset !important; flex-wrap: wrap; } #g-vessels-dashboard .table-head .left .selector { display: flex !important; align-items: center; } #g-vessels-dashboard .table-head .left .selector label { width: 40px; } #g-vessels-dashboard .table-head .left .selector div { width: 200px; } #g-vessels-dashboard .table-head .right input { width: 240px !important; } #g-vessels-dashboard section { width: 700px !important; } #g-vessels-dashboard section .terminalName, #g-vessels-dashboard section .moveTime { width: 200px !important; } #g-vessels-dashboard section .moveType { width: 100px !important; } #g-vessels-dashboard section .chtName { width: unset !important; } #g-setting-billboard .table-head { justify-content: unset !important; flex-wrap: wrap; } #g-setting-billboard .table-head .left .selector { display: flex !important; align-items: center; } #g-setting-billboard .table-head .left .selector label { width: 80px !important; } #g-setting-billboard .table-head .left .selector div { width: 200px; } #g-setting-terminalBoard .table-head { justify-content: unset !important; flex-wrap: wrap; } #g-setting-terminalBoard .table-head .left .selector { display: flex !important; align-items: center; } #g-setting-terminalBoard .table-head .left .selector label { width: 40px !important; } #g-setting-terminalBoard .table-head .left .selector div { width: 200px; } .deliverLog-table .table-head { justify-content: unset !important; flex-wrap: wrap; } .deliverLog-table .table-head .left > .inputSelect { width: 240px !important; } .deliverLog-table .table-head .right { margin-top: 7px; } .deliverLog-table .table-head .right input { width: 240px !important; } #g-logistic-driver-tabs .MuiTablePagination-toolbar, #g-event-manage-tabs .MuiTablePagination-toolbar { padding: unset !important; } #g-service .service-headBar input { width: 200px !important; } #g-service #g-service-tabs { margin: 10px 0 0; } #g-service #service .service-monitor .card { float: unset !important; width: unset !important; } #g-service #g-interface-edit-dialog .pure-form-aligned .pure-control-group { display: block; } #g-service #g-interface-edit-dialog .pure-form-aligned .pure-control-group label { width: unset !important; } #g-service #g-interface-edit-dialog .pure-form-aligned .pure-control-group.system input, #g-service #g-interface-edit-dialog .pure-form-aligned .pure-control-group.description textarea, #g-service #g-interface-edit-dialog .pure-form-aligned .pure-control-group.uri input, #g-service #g-interface-edit-dialog .pure-form-aligned .pure-control-group.cronExpression input, #g-service #g-interface-edit-dialog .pure-form-aligned .pure-control-group.retryInterval input, #g-service #g-interface-edit-dialog .pure-form-aligned .pure-control-group.retryTimes input { width: 300px !important; } #g-event-manage-tabs, #g-live-message-tabs, #g-user-management-tabs { margin-top: 45px !important; height: calc(100% - 50px) !important; } #g-event-manage-tabs .tabContent section .container, #g-live-message-tabs .tabContent section .container, #g-user-management-tabs .tabContent section .container { height: calc(100vh - 321px) !important; } #g-eventType-draft-edit-dialog .pure-control-group, #g-liveMessage-draft-edit-dialog .pure-control-group { display: block !important; } #g-eventType-draft-edit-dialog .pure-control-group.typeId .MuiFormControl-root, #g-liveMessage-draft-edit-dialog .pure-control-group.typeId .MuiFormControl-root, #g-eventType-draft-edit-dialog .pure-control-group.description textarea, #g-liveMessage-draft-edit-dialog .pure-control-group.description textarea, #g-eventType-draft-edit-dialog .pure-control-group.title input, #g-liveMessage-draft-edit-dialog .pure-control-group.title input, #g-eventType-draft-edit-dialog .pure-control-group.location input, #g-liveMessage-draft-edit-dialog .pure-control-group.location input, #g-eventType-draft-edit-dialog .pure-control-group.longitude input, #g-liveMessage-draft-edit-dialog .pure-control-group.longitude input, #g-eventType-draft-edit-dialog .pure-control-group.latitude input, #g-liveMessage-draft-edit-dialog .pure-control-group.latitude input { width: 300px !important; } #g-eventType-draft-edit-dialog .pure-control-group.beginTime .MuiInputBase-input, #g-liveMessage-draft-edit-dialog .pure-control-group.beginTime .MuiInputBase-input, #g-eventType-draft-edit-dialog .pure-control-group.endTime .MuiInputBase-input, #g-liveMessage-draft-edit-dialog .pure-control-group.endTime .MuiInputBase-input { width: 270px !important; } #g-user-edit-dialog .username input, #g-user-edit-dialog .password input, #g-user-edit-dialog .repassword input, #g-user-edit-dialog .name input, #g-user-edit-dialog .mobilePhone input, #g-user-edit-dialog .email input, #g-user-edit-dialog .unit input, #g-user-edit-dialog .accountGroupId .MuiFormControl-root, #g-user-edit-dialog .terminals #c-multiple-selector, #g-user-edit-dialog .logistics #c-multiple-selector { width: 200px !important; } #g-service .service-headBar { width: 100% !important; text-align: center !important; display: block !important; position: unset !important; } #g-service .service-headBar .selector .MuiFormControl-root { width: 150px !important; } #g-service .service-headBar .c-search input { height: 35px; align-items: center; margin-top: 4px; } #g-service .service-headBar .icon { width: 19px !important; } #g-service .tabContent { flex-grow: unset !important; } #g-service .tabContent#dataProvide section { width: unset !important; } #g-service .tabContent#dataProvide section .container { width: 540px !important; min-width: unset; height: calc(100vh - 225px) !important; } #g-service .tabContent#dataProvide section .container .moduleName { width: 100px !important; } #g-service .tabContent#dataProvide section .container .dataTime { width: 160px !important; } #g-service .tabContent section .container { height: calc(100vh - 315px) !important; } #g-device .device-headBar { width: 100% !important; text-align: center !important; display: block !important; position: unset !important; } #g-device .device-headBar .selector .MuiFormControl-root { width: 150px !important; } #g-device .device-headBar .c-search input { width: 200px; height: 35px; align-items: center; margin-top: 4px; } #g-device .device-headBar .icon { width: 19px !important; } #g-device .tabContent { flex-grow: unset !important; } #g-device .tabContent section .container { height: calc(100vh - 360px) !important; } #g-device #g-device-create-edit-dialog .pure-control-group { display: block; } #g-device #g-device-create-edit-dialog .pure-control-group label { width: unset !important; } #g-device #g-device-create-edit-dialog .pure-control-group.system input, #g-device #g-device-create-edit-dialog .pure-control-group.description textarea, #g-device #g-device-create-edit-dialog .pure-control-group.uri input, #g-device #g-device-create-edit-dialog .pure-control-group.cronExpression input, #g-device #g-device-create-edit-dialog .pure-control-group.retryInterval input, #g-device #g-device-create-edit-dialog .pure-control-group.retryTimes input { width: 300px !important; } #g-traffic-statistic .statistic-content { height: calc(100vh - 216px) !important; } #g-traffic-prediction .trafficPrediction-traffic #g-live-traffic, #g-traffic-prediction .trafficPrediction-traffic #g-traffic-terminals, #g-traffic-prediction .trafficPrediction-traffic #g-traffic-gates { display: block !important; width: 700px !important; } #g-traffic-prediction #g-traffic-prediction-tabs .mapAnalytics-table { top: 7px !important; right: 8px !important; } #g-traffic-prediction #g-traffic-prediction-tabs .map-analytics .slide-icon { position: absolute; z-index: 999; left: 0px; line-height: 61px; width: 15px; height: 48px; cursor: pointer; border: 1px solid #d4d4d4; border-radius: 0px 8px 8px 0px; background: #555 1px 10px no-repeat; text-align: center; color: #fff; } #g-traffic-prediction #g-traffic-prediction-tabs .map-analytics .slide-icon .MuiSvgIcon-root { font-size: 1.7rem !important; margin-left: -7px !important; } #g-traffic-prediction #g-traffic-prediction-tabs .map-analytics .slide-icon.close { left: 188px; animation: moveRight; animation-duration: .6s; } @keyframes moveRight { from { left: 0px; } to { left: 188px; } } #g-traffic-prediction #g-traffic-prediction-tabs .map-analytics .table-icon-wrap { position: absolute; bottom: 30px; right: 30px; z-index: 999; width: 55px; height: 55px; border-radius: 5px; background-color: #5686da; color: #fff; text-align: center; font-size: 34px; line-height: 55px; box-shadow: 1px 1px 6px 1px #000000; } #g-terminal-dashboard #g-related-camera-edit-dialog label { width: unset !important; } #editor-related-user-dialog .pure-control-group label, #g-audit-log-detail .pure-control-group label { width: unset !important; } #g-login-dialog-content .login-form { width: 100%; } #g-login-dialog-content .login-form .imageCodeContainer input { margin: unset !important; width: 100% !important; } #g-login-dialog-content .login-form .imageCodeContainer .imageCode { margin: unset !important; } } @charset "utf-8"; .badge { display: inline-block; padding: .25em .4em; font-size: 100%; font-weight: 500; line-height: 1; color: #fff; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: .25rem; } .button-success, .button-error, .button-warning, .button-secondary { color: white; border-radius: 4px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); } .button-success:hover, .button-error:hover, .button-warning:hover, .button-secondary:hover { background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1)); } .button-success { background: #1cb841; /* this is a green */ } .button-error { background: #ca3c3c; /* this is a maroon */ } .button-warning { background: #df7514; /* this is an orange */ } .button-secondary { background: #42b8dd; /* this is a light blue */ } .button-group > a:first-child { border-radius: 4px 0px 0px 4px; } .button-group > a:last-child { border-radius: 0px 4px 4px 0px; } .link-success { color: #5cb85c; border-color: #5cb85c; } .link-secondary { color: #5bc0de; border-color: #5bc0de; } .link-error { color: #d9534f; border-color: #d9534f; } .link-warning { color: #f0ad4e; border-color: #f0ad4e; } .link-primary { color: #0275d8; border-color: #0275d8; } @keyframes subMenuFadeIn { 0% { opacity: 0; transform: translateY(-5px); } 100% { opacity: 1; transform: translateY(0px); } } html, body, #app-container { position: absolute; width: 100%; height: 100%; background-color: #F7F7F7; color: #333333; font-family: "Segoe UI", "微軟正黑體", "新細明體", sans-serif; font-size: 1em; overflow: hidden; } input[type=text], input[type=password], textarea, select { width: 220px; } .ui-datepicker { font-size: 10pt; } .pre { white-space: pre; } .preline { white-space: pre-line; } #g-app { width: 100%; height: 100%; overflow: hidden; display: flex; flex-direction: row; } #g-app.fullscreen #g-header { display: none; } #g-app.fullscreen #g-header #g-side-nav { width: 310px; background-color: #fff; height: 100vh; z-index: 999; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3); } #g-app.fullscreen #g-header #g-side-nav .ticp-logo { margin: 24px 30px 30px; } #g-app.fullscreen #g-header #g-side-nav .g-side-menu { font-size: 18px; margin-left: 30px; } #g-app.fullscreen #g-header #g-side-nav .g-side-menu .hr-line { border-bottom: 1px solid #5686da; width: 90%; opacity: 0.15; margin: 5px auto; } #g-app.fullscreen #g-header #g-side-nav .g-side-menu .menu-item { margin: 12px 0; } #g-app.fullscreen #g-header #g-side-nav .g-side-menu .menu-item a { margin-left: 30px; } #g-app.fullscreen #g-header #g-side-nav .g-side-menu .menu-item a:hover { color: #5686da; } #g-app.fullscreen #g-header #g-side-nav .g-side-menu span { cursor: pointer; } #g-app.fullscreen #g-header #g-side-nav .g-side-menu span.active { color: #5686da; } #g-app.fullscreen #g-header #g-side-nav .g-side-menu .menu-title { font-weight: 600; font-size: 20px; } #g-app.fullscreen #g-header #g-side-nav .g-side-menu .sub-menu { margin-left: 18px; } #g-app.fullscreen #g-header #g-side-nav .g-side-menu .sub-menu .sub-menu-item { margin: 6px 0; } #g-app.fullscreen #g-header #g-side-nav .g-side-menu .trigger-icon { margin: 0 10px; width: 10px; text-align: center; line-height: 20px; } #g-app.fullscreen #g-footer { display: none; } #g-app.fullscreen #g-content { margin: 0; padding: 0; } #g-app.fullscreen #g-content > div { width: 100%; height: 100%; } #g-app > .c-tabs > .tabContent > * { min-height: 500px; } #g-app #g-header { background-color: #5686da; color: #ffffff; padding: 0 20px 0 310px; position: absolute; width: 100%; height: 80px; } #g-app #g-header.closeSideMenu { padding-left: 60px; } #g-app #g-header .menu-controller { height: 18px; cursor: pointer; margin: 5px 0 10px; } #g-app #g-header .menu-controller.close { -moz-transform: scaleX(-1); -webkit-transform: scaleX(-1); -o-transform: scaleX(-1); transform: scaleX(-1); } #g-app #g-header .menu-controller:hover { color: #aaa; } #g-app #g-header #heading { flex-shrink: 0; cursor: default; margin-left: 10px; } #g-app #g-header #heading .mobile-ticp-icon { display: none; } #g-app #g-header #mobile-menu { display: none; } #g-app #g-header #account-menu { font-size: 0.9em; padding-right: 10px; } #g-app #g-header #account-menu .user-icon { font-size: 30px; } #g-app #g-header #account-menu > a { min-width: 50px; padding: 10px 0; text-align: center; } #g-app #g-header #account-menu ul.g-submenu { display: none; } #g-app #g-header #account-menu.active ul.g-submenu { position: absolute; z-index: 999; width: 120px; right: 5px; padding: 0; display: flex; flex-flow: row wrap; align-items: flex-start; justify-content: flex-start; color: black; border-radius: 3px; box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2), 0 8px 8px 0 rgba(0, 0, 0, 0.19); background-color: #ffffff; } #g-app #g-header #account-menu.active ul.g-submenu li { display: inline-block; width: 100%; padding: auto; height: 43px; } #g-app #g-header #account-menu.active ul.g-submenu li.separator { border-top: 1px solid #bbb; } #g-app #g-header #account-menu.active ul.g-submenu li a { width: 100%; padding: 10px; height: 100%; border-radius: 5px 5px 0px 0px; outline: 0; } #g-app #g-header #account-menu.active ul.g-submenu li a:hover { color: #58b3ed; } #g-app #g-header #account-menu.active ul.g-submenu li.lngToggle { padding: 10px; } #g-app #g-header #account-menu.active ul.g-submenu li.lngToggle i { float: right; margin-top: 5px; } #g-app #g-header #account-menu.active ul.g-submenu li.alarmSoundToggle { padding: 10px; } #g-app #g-header #account-menu.active ul.g-submenu li.alarmSoundToggle #alarmSound { float: right; } #g-app #g-header #account-menu.active ul.g-submenu .MuiCollapse-container { width: 100%; box-shadow: inset 0 10px 10px -10px #666666, inset 0 -10px 10px -10px #666666; background: #F9F9F9; } #g-app #g-header #account-menu.active ul.g-submenu .MuiCollapse-container .fa { width: 20px; } #g-app #g-header #g-menu { align-self: stretch; margin-left: auto; display: flex; justify-content: center; } #g-app #g-header #g-menu > li { display: inline-block; min-width: 80px; border-radius: 5px 5px 0px 0px; } #g-app #g-header #g-menu > li.current { background-color: #58b3ed; } #g-app #g-header #g-menu > li > a { display: flex; align-items: center; justify-content: stretch; padding: 0 10px 0 10px; border-radius: 5px 5px 0px 0px; height: 100%; } #g-app #g-header #g-menu > li ul.g-submenu { display: none; } #g-app #g-header #g-menu > li.active { display: inline-block; background-color: #ffffff; color: black; } #g-app #g-header #g-menu > li.active ul.g-submenu { position: absolute; z-index: 500; width: 700px; left: calc(50vw - 300px); padding: 0; display: flex; flex-flow: column wrap; align-items: flex-start; justify-content: flex-start; color: black; border-radius: 3px; box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2), 0 8px 8px 0 rgba(0, 0, 0, 0.19); background-color: #ffffff; background-image: linear-gradient(180deg, transparent, #ccc, #ccc, #ccc, transparent); background-position: 50%; background-repeat: repeat-y; background-size: 1px auto; } #g-app #g-header #g-menu > li.active ul.g-submenu li { display: inline-block; width: 50%; padding: auto; height: 43px; } #g-app #g-header #g-menu > li.active ul.g-submenu li a { width: 100%; padding: 10px; height: 100%; border-radius: 5px 5px 0px 0px; } #g-app #g-header #g-menu > li.active ul.g-submenu li a:hover { color: #58b3ed; } #g-app #g-header #g-menu li.g-pagetitle { position: absolute; width: 100%; top: 40px; left: 0; padding: 4px 16px; font-size: 24px; border-radius: 0; display: block; background-color: #58b3ed; } #g-app #g-header #g-reset-password { color: #333333; } #g-app #g-header .latest-news { width: calc(100vw - 340px); font-size: 16px; cursor: default; display: flex; } #g-app #g-header .latest-news .marquee-content-item { cursor: pointer; margin-right: 30px; } #g-app #g-header .latest-news .marquee-content-item:hover { color: #ccc; } #g-app #g-header .latest-news .marquees-dialog { display: block; width: 500px; color: black; } #g-app #g-header .latest-news .marquees-dialog .title { font-size: 16px; } #g-app #g-header .latest-news .marquees-dialog .description { text-indent: 2em; margin: 10px 0 10px; } #g-app #g-header .latest-news .marquees-dialog .data-info { display: flex; margin: 5px 0; } #g-app #g-header .latest-news .marquees-dialog a.link { color: #1976d2 !important; cursor: pointer !important; margin: 0 !important; text-decoration: none !important; } #g-app #g-header .latest-news .marquees-dialog .links, #g-app #g-header .latest-news .marquees-dialog .file { display: flex; align-items: center; margin-top: 10px; padding: 10px; } #g-app #g-header .latest-news .marquees-dialog .links .title, #g-app #g-header .latest-news .marquees-dialog .file .title { margin-right: 10px; } #g-app #g-header .latest-news .marquees-dialog .links .links-url, #g-app #g-header .latest-news .marquees-dialog .file .links-url { display: flex; flex-direction: column; } #g-app #g-header .latest-news .marquees-dialog .links .links-url a, #g-app #g-header .latest-news .marquees-dialog .file .links-url a { margin-bottom: 5px; text-decoration: underline; color: #1976d2; } #g-app #g-header .latest-news .marquees-dialog .images { margin-top: 10px; } #g-app #g-header .latest-news .marquees-dialog .images img { width: 100%; } #g-app #g-side-nav { position: relative; width: 310px; background-color: #fff; height: 100vh; z-index: 999; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3); } #g-app #g-side-nav .ticp-logo { display: none; margin: 17px 30px 17px; } #g-app #g-side-nav .ticp-icon { display: none; margin: 24px 10px 0px; } #g-app #g-side-nav img.show { display: block; } #g-app #g-side-nav .g-side-menu { font-size: 18px; margin-left: 30px; height: calc(100% - 118px); overflow-y: auto; } #g-app #g-side-nav .g-side-menu::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 15px; background-color: #ccc; } #g-app #g-side-nav .g-side-menu::-webkit-scrollbar { border-radius: 17px; width: 7px; height: 6px; background-color: #ccc; } #g-app #g-side-nav .g-side-menu::-webkit-scrollbar-thumb { border-radius: 13px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #313a3e; } #g-app #g-side-nav .g-side-menu .hr-line { border-bottom: 1px solid #5686da; width: 90%; opacity: 0.15; margin: 5px auto; } #g-app #g-side-nav .g-side-menu .menu-item { margin: 12px 0; } #g-app #g-side-nav .g-side-menu .menu-item a { margin-left: 30px; } #g-app #g-side-nav .g-side-menu .menu-item a:hover { color: #5686da; } #g-app #g-side-nav .g-side-menu .menu-item .menu-title { display: flex; align-items: center; } #g-app #g-side-nav .g-side-menu span { cursor: pointer; } #g-app #g-side-nav .g-side-menu span.active { color: #5686da; } #g-app #g-side-nav .g-side-menu .menu-title { font-weight: 600; font-size: 20px; } #g-app #g-side-nav .g-side-menu .menu-title a { display: flex; align-items: center; margin-left: unset; } #g-app #g-side-nav .g-side-menu .menu-title a.active { color: #5686da; } #g-app #g-side-nav .g-side-menu .sub-menu { margin-left: 18px; } #g-app #g-side-nav .g-side-menu .sub-menu .sub-menu-item { margin: 6px 0; } #g-app #g-side-nav .g-side-menu .trigger-icon { margin: 0 10px; width: 10px; text-align: center; line-height: 20px; } #g-app #g-side-nav .g-side-menu .urlIcon { margin-right: 10px; width: 20px; text-align: center; } #g-app #g-side-nav .slide-icon { position: absolute; z-index: 999; top: 50%; left: 310px; font-size: 28px; width: 15px; height: 48px; cursor: pointer; border: 1px solid #d4d4d4; border-radius: 0px 8px 8px 0px; background: #fff 1px 10px no-repeat; } #g-app #g-side-nav .slide-icon.arrowRight { transition: left .3s; left: 60px; } #g-app #g-side-nav .slide-icon .MuiSvgIcon-root { font-size: inherit; height: inherit; margin-left: -8px; } #g-app #g-side-nav.close { transition: width .3s; width: 60px; } #g-app #g-side-nav.close .narrow-side-menu { width: 60px; margin-top: 20px; } #g-app #g-side-nav.close .narrow-side-menu .narrow-link { position: relative; width: 60px; height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; } #g-app #g-side-nav.close .narrow-side-menu .narrow-link.active { color: #5686da; } #g-app #g-side-nav.close .narrow-side-menu .narrow-link:hover { background: #f0f0f0; } #g-app #g-side-nav.close .narrow-side-menu .narrow-link:hover > ul { display: block; } #g-app #g-side-nav.close .narrow-side-menu .narrow-link ul { display: none; position: absolute; top: 0; left: 60px; width: 225px; font-size: 20px; text-align: left; background: #f0f0f0; border-radius: 0 5px 5px 0; box-shadow: 5px 5px 5px -3px rgba(0, 0, 0, 0.5); padding: 5px 15px; z-index: 1000; color: #000; } #g-app #g-side-nav.close .narrow-side-menu .narrow-link ul.l { width: 200px; } #g-app #g-side-nav.close .narrow-side-menu .narrow-link ul.xl { width: 225px; } #g-app #g-side-nav.close .narrow-side-menu .narrow-link ul li { margin: 5px 0; } #g-app #g-side-nav.close .narrow-side-menu .narrow-link ul li.active { color: #5686da; } #g-app #g-side-nav.close .narrow-side-menu .narrow-link ul li:hover { color: #5686da; } #g-app #g-side-nav .front-block { position: absolute; bottom: 15px; left: 100px; display: flex; flex-direction: column; align-items: center; } #g-app #g-side-nav .front-block .qrcode-block div { font-size: 14px; } #g-app #g-side-nav .front-block .qrcode-block a { cursor: default; } #g-app #g-side-nav .front-block .feedback-block { display: flex; margin-top: 10px; cursor: pointer; font-weight: 600; } #g-app #g-side-nav .front-block .feedback-block:hover { color: #5686da; } #g-app .message-loading { text-align: center; font-size: 11px; margin-bottom: 10px; } #g-app #g-dial .overlay { opacity: 0.5; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); } #g-app #g-dial .dialog { width: 432px; height: 262px; top: 50%; left: 50%; margin-top: -116px; margin-left: -231px; position: fixed; z-index: 999; border: 1px solid #818181; border-radius: 3px; box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2), 0 8px 8px 0 rgba(0, 0, 0, 0.19); background: #ffffff; } #g-app #g-dial .dialog.corner { top: auto; bottom: 10px; left: 10px; margin-top: 0; margin-left: 0; } #g-app #g-dial .dialog header { margin: 7px; cursor: all-scroll; } #g-app #g-dial .dialog iframe { width: 430px; height: 230px; border: 0; } #g-app .is-blurred { filter: blur(50px); } #g-app #g-content { align-items: stretch; align-content: stretch; display: flex; justify-content: flex-start; margin-top: 80px; padding: 0 0 0 15px; background-color: #f0f0f0; width: calc(100% - 310px); } #g-app #g-content.closeSideMenu { left: 60px; width: calc(100% - 60px); } #g-app #g-footer { flex-grow: 0; flex-shrink: 0; font-size: 0.8em; margin: 2px 20px; height: 20px; bottom: 0px; } #g-app #g-footer .version { font-style: italic; margin-left: 5px; display: none; } #g-app #g-footer .reporter { color: #5bc0de; float: right; } #g-app .pagination { margin: 10px 10px 10px 0; } #g-app .pagination .pagination { display: block; } #g-app .pagination .pagination-print { display: none; } #g-app .pagination .page-size-ctrl, #g-app .pagination .pagination-print-left { display: inline-block; } #g-app .pagination .page-size-ctrl select, #g-app .pagination .pagination-print-left select { width: auto; } #g-app .pagination .page-size-ctrl label, #g-app .pagination .pagination-print-left label { margin-right: 10px; vertical-align: middle; } #g-app .pagination .page-size-ctrl span, #g-app .pagination .pagination-print-left span { margin: 0 10px; vertical-align: middle; } #g-app .pagination .page-size-ctrl .page-size-select, #g-app .pagination .pagination-print-left .page-size-select { min-width: 50px; } #g-app .pagination .page-nav, #g-app .pagination .pagination-print-right { background: #fff; float: right; } #g-app #login-dialog { width: 405px; padding: 60px 60px; border-radius: 10px; } #g-app #g-system-config { color: #333333; } #g-app #g-system-config #g-system-config-content { overflow-x: hidden; } #g-app #g-system-config .pure-form-aligned .pure-control-group label { width: 25em; text-align: left; } #g-app #g-system-config .pure-form-aligned .pure-control-group input[type="text"] { width: 50px; text-align: right; } #g-app #g-system-config .pure-form-aligned .pure-control-group.gisMapServiceApiUrl, #g-app #g-system-config .pure-form-aligned .pure-control-group.gisMapInitViewportCenter, #g-app #g-system-config .pure-form-aligned .pure-control-group.adServerHostIp, #g-app #g-system-config .pure-form-aligned .pure-control-group.adServerPort, #g-app #g-system-config .pure-form-aligned .pure-control-group.adServerDomain, #g-app #g-system-config .pure-form-aligned .pure-control-group.smtpServerHost, #g-app #g-system-config .pure-form-aligned .pure-control-group.smtpServerPort, #g-app #g-system-config .pure-form-aligned .pure-control-group.smtpServerUsername, #g-app #g-system-config .pure-form-aligned .pure-control-group.smtpServerPassword, #g-app #g-system-config .pure-form-aligned .pure-control-group.smtpServerFromAddress { flex-direction: column; align-items: start; } #g-app #g-system-config .pure-form-aligned .pure-control-group.gisMapServiceApiUrl label, #g-app #g-system-config .pure-form-aligned .pure-control-group.gisMapInitViewportCenter label, #g-app #g-system-config .pure-form-aligned .pure-control-group.adServerHostIp label, #g-app #g-system-config .pure-form-aligned .pure-control-group.adServerPort label, #g-app #g-system-config .pure-form-aligned .pure-control-group.adServerDomain label, #g-app #g-system-config .pure-form-aligned .pure-control-group.smtpServerHost label, #g-app #g-system-config .pure-form-aligned .pure-control-group.smtpServerPort label, #g-app #g-system-config .pure-form-aligned .pure-control-group.smtpServerUsername label, #g-app #g-system-config .pure-form-aligned .pure-control-group.smtpServerPassword label, #g-app #g-system-config .pure-form-aligned .pure-control-group.smtpServerFromAddress label { width: 100%; text-align: left; } #g-app #g-system-config .pure-form-aligned .pure-control-group.gisMapServiceApiUrl input[type="text"], #g-app #g-system-config .pure-form-aligned .pure-control-group.gisMapInitViewportCenter input[type="text"], #g-app #g-system-config .pure-form-aligned .pure-control-group.adServerHostIp input[type="text"], #g-app #g-system-config .pure-form-aligned .pure-control-group.adServerPort input[type="text"], #g-app #g-system-config .pure-form-aligned .pure-control-group.adServerDomain input[type="text"], #g-app #g-system-config .pure-form-aligned .pure-control-group.smtpServerHost input[type="text"], #g-app #g-system-config .pure-form-aligned .pure-control-group.smtpServerPort input[type="text"], #g-app #g-system-config .pure-form-aligned .pure-control-group.smtpServerUsername input[type="text"], #g-app #g-system-config .pure-form-aligned .pure-control-group.smtpServerPassword input[type="text"], #g-app #g-system-config .pure-form-aligned .pure-control-group.smtpServerFromAddress input[type="text"], #g-app #g-system-config .pure-form-aligned .pure-control-group.gisMapServiceApiUrl input[type="password"], #g-app #g-system-config .pure-form-aligned .pure-control-group.gisMapInitViewportCenter input[type="password"], #g-app #g-system-config .pure-form-aligned .pure-control-group.adServerHostIp input[type="password"], #g-app #g-system-config .pure-form-aligned .pure-control-group.adServerPort input[type="password"], #g-app #g-system-config .pure-form-aligned .pure-control-group.adServerDomain input[type="password"], #g-app #g-system-config .pure-form-aligned .pure-control-group.smtpServerHost input[type="password"], #g-app #g-system-config .pure-form-aligned .pure-control-group.smtpServerPort input[type="password"], #g-app #g-system-config .pure-form-aligned .pure-control-group.smtpServerUsername input[type="password"], #g-app #g-system-config .pure-form-aligned .pure-control-group.smtpServerPassword input[type="password"], #g-app #g-system-config .pure-form-aligned .pure-control-group.smtpServerFromAddress input[type="password"] { width: 425px; text-align: left; } #g-app .lightbox { width: 100%; height: 100%; background-color: transparent; } #g-app .lightbox header { padding-right: 10px; border-bottom: 0; } #g-app .lightbox header .end { color: #fff; font-size: 30px; text-shadow: 2px 2px 2px #333; } #g-app .lightbox .content { background-color: transparent; overflow: hidden; max-height: initial; margin: 0; } #g-app .lightbox .content > div { display: flex; flex-direction: column; height: calc(100vh - 50px); overflow: hidden; width: 100%; } #g-app .lightbox .content > div .thumb { background: #001B34; } #g-app .lightbox .content > div .carousel-slider { height: 100%; background: #001B34; } #g-app .lightbox .content > div .carousel-slider .control-arrow { margin: 30px 0; } #g-app .lightbox .content > div .carousel-slider .slider-wrapper { height: 100%; } #g-app .lightbox .content > div .carousel-slider .slider-wrapper ul { height: 100%; } #g-app .lightbox .content > div .carousel-slider .slider-wrapper ul .slide .image-container { height: 100%; } #g-app .lightbox .content > div .carousel-slider .slider-wrapper ul .slide .image-container .toolbar { opacity: 0; position: absolute; top: 10px; left: 0; right: 0; width: 100px; height: 43px; margin: 0 auto; border-radius: 10px; background: #000; color: #fff; padding: 10px; text-align: center; font-size: 16px; } #g-app .lightbox .content > div .carousel-slider .slider-wrapper ul .slide .image-container .toolbar .download { cursor: pointer; padding: 10px; } #g-app .lightbox .content > div .carousel-slider .slider-wrapper ul .slide .image-container .toolbar .download:before { font-family: "Font Awesome 5 Free", sans-serif; content: "\f019"; font-weight: 900; } #g-app .lightbox .content > div .carousel-slider .slider-wrapper ul .slide .image-container .toolbar .print { cursor: pointer; padding: 10px; } #g-app .lightbox .content > div .carousel-slider .slider-wrapper ul .slide .image-container .toolbar .print:before { font-family: "Font Awesome 5 Free", sans-serif; content: "\f02f"; font-weight: 900; } #g-app .lightbox .content > div .carousel-slider .slider-wrapper ul .slide .image-container:hover .toolbar { opacity: 0.8; -webkit-transition-property: opacity; -moz-transition-property: opacity; -o-transition-property: opacity; transition-property: opacity; -webkit-transition-duration: 0.35s; -moz-transition-duration: 0.35s; -o-transition-duration: 0.35s; transition-duration: 0.35s; -webkit-transition-timing-function: ease-in-out; -moz-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; } #g-app .lightbox .content > div .carousel-slider .slider-wrapper ul .slide .image-container img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: unset; height: unset; object-fit: contain; max-width: 100%; max-height: 100%; } #g-app .lightbox .content > div .carousel-slider .slider-wrapper ul .slide .video-container { width: 100%; height: 100%; } #g-app .lightbox .content > div .carousel-slider .slider-wrapper ul .slide .video-container .video-js { width: 100%; height: 100%; } #g-app .lightbox .content > div .carousel-slider .slider-wrapper ul .slide .video-container .video-js .vjs-download .vjs-icon-placeholder:before { font-family: "Font Awesome 5 Free", sans-serif; content: "\f019"; font-weight: 900; font-size: 1.2em; padding-top: 6px; } #g-app .lightbox .content > div .carousel-slider .slider-wrapper ul .slide .video-container img { display: none; } #g-app #g-alarm-report-form textarea { width: 350px; } #g-app #g-repair-report-form textarea { width: 350px; } #g-app #g-repair-report-form .cameraTestContainer { flex-direction: column; } #g-app #g-repair-report-form .cameraTestContainer > div { width: 350px; height: 130px; background: #666; margin-bottom: 0; padding: 3px 5px; border-radius: 4px 4px 0 0; border-color: #999; border-bottom: 0; color: #fff; overflow-y: auto; } #g-app #g-repair-report-form .cameraTestContainer > div .pass { color: #92EDA4; } #g-app #g-repair-report-form .cameraTestContainer > div .fail { color: #CE9292; } #g-app #g-repair-report-form .cameraTestContainer button { border-radius: 0 0 4px 4px; } #g-app #c-inputSelect { width: 200px; } #g-app #c-multiple-selector { width: 430px; } #g-app #c-inputSelect .MuiAutocomplete-root, #g-app #c-multiple-selector .MuiAutocomplete-root, #g-app #ms-terminals .MuiAutocomplete-root, #g-app #ms-logistics .MuiAutocomplete-root { width: inherit; } #g-app #c-inputSelect .MuiInput-formControl, #g-app #c-multiple-selector .MuiInput-formControl, #g-app #ms-terminals .MuiInput-formControl, #g-app #ms-logistics .MuiInput-formControl { border: 1px solid #a9a9a9; padding: 5px; border-radius: 4px; } #g-app #c-inputSelect .MuiInput-formControl::before, #g-app #c-multiple-selector .MuiInput-formControl::before, #g-app #ms-terminals .MuiInput-formControl::before, #g-app #ms-logistics .MuiInput-formControl::before { content: none; } #g-app #c-inputSelect .MuiInput-formControl::after, #g-app #c-multiple-selector .MuiInput-formControl::after, #g-app #ms-terminals .MuiInput-formControl::after, #g-app #ms-logistics .MuiInput-formControl::after { border-color: #5686da; } #g-app #c-inputSelect input, #g-app #c-multiple-selector input, #g-app #ms-terminals input, #g-app #ms-logistics input { border: unset; padding-right: 40px; } #g-app #g-feedback-edit .content .description label { display: none; } #g-app #g-feedback-edit .content .description div { max-width: 400px; width: 100%; } #g-progress-content > span { margin: 0 10px; } #g-suspense-loader { position: absolute; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); } #g-information-card { width: calc(100% * 0.33); border: 1px solid #888; border-radius: 5px; height: 380px; } #g-information-card.fullScreen { position: fixed; background: #fff; top: 80px; left: 310px; height: calc(100% - 80px); width: calc(100% - 310px); border-radius: unset; z-index: 900; } #g-information-card.fullScreen.closeSideMenu { left: 60px; width: calc(100% - 60px); } #g-information-card .card-head { padding: 5px; background: #737271; color: #fff; font-size: 16px; display: flex; justify-content: space-between; } #g-information-card .card-head .fullScreen-icon { line-height: 24px; cursor: pointer; } #g-information-card .card-content { height: calc(100% - 34px); text-align: center; } #g-information-card .card-content .loading { height: 100%; position: relative; } #g-information-card .card-content .loading > i { position: relative; top: calc(50% - 22px); } #g-information-card .chart-block div::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 15px; background-color: #ccc; } #g-information-card .chart-block div::-webkit-scrollbar { border-radius: 17px; width: 7px; height: 6px; background-color: #ccc; } #g-information-card .chart-block div::-webkit-scrollbar-thumb { border-radius: 13px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #313a3e; } #g-terminals-related-editor .content, #g-logisticsRelated-related-editor .content { width: 350px; padding: 0px; } #g-terminals-related-editor .content .c-border, #g-logisticsRelated-related-editor .content .c-border { width: inherit; border: unset; } #g-terminals-related-editor .content .c-border section .container, #g-logisticsRelated-related-editor .content .c-border section .container { height: 310px; } #g-terminals-related-editor .content .c-border section .container::-webkit-scrollbar-track, #g-logisticsRelated-related-editor .content .c-border section .container::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 15px; background-color: #ccc; } #g-terminals-related-editor .content .c-border section .container::-webkit-scrollbar, #g-logisticsRelated-related-editor .content .c-border section .container::-webkit-scrollbar { border-radius: 17px; width: 7px; height: 6px; background-color: #ccc; } #g-terminals-related-editor .content .c-border section .container::-webkit-scrollbar-thumb, #g-logisticsRelated-related-editor .content .c-border section .container::-webkit-scrollbar-thumb { border-radius: 13px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #313a3e; } #g-terminals-related-editor .content .c-border section .container .setting, #g-logisticsRelated-related-editor .content .c-border section .container .setting { width: 50px; } #g-logisticsRelated-related-editor .content { height: 385px; } #g-terminals-related-editor .content { height: 350px; } #g-logisticsRelated-related-editor .content { width: 500px; } #editor-related-user #editor-related-user-content { min-height: 100px; align-items: center; } #editor-related-user #editor-related-user-content .loading { margin: 0 auto; } #g-login-dialog { color: #000; } #g-login-dialog #loginParam1 { margin-bottom: 20px; } #g-login-dialog .input-block p { margin: unset; } #g-login-dialog .input-block input { width: 100%; } #g-login-dialog #imageCode { margin-top: -35px; width: calc(100% - 110px); } #g-login-dialog .imageCodeContainer { margin-top: 20px; } #g-login-dialog .imageCodeContainer p { margin: unset; } #g-login-dialog .imageCodeContainer .imageCode { margin-left: 10px; width: 100px; height: 45px; cursor: pointer; } .MuiAutocomplete-listbox .MuiAutocomplete-option[aria-selected="true"] { background-color: #1565c0; color: #fff; } .MuiAutocomplete-listbox .MuiAutocomplete-option[data-focus="true"] { background-color: rgba(21, 101, 192, 0.5); color: #fff; } button:focus { box-shadow: unset; } #g-audit-log-error-message { display: flex; justify-content: center; align-items: center; position: absolute; width: 100vw; bottom: 0; background: red; z-index: 999; color: #fff; text-align: center; height: 35px; } #g-audit-log-statistics { border: 1px solid #ccc; border-radius: 3px; width: 240px; padding: 15px 20px; margin: 20px 0; display: flex; flex-direction: column; cursor: pointer; } #g-audit-log-statistics .title { width: 100%; text-align: center; } #g-audit-log-statistics .statistics { display: flex; } #g-audit-log-statistics .statistics .count { font-weight: bold; text-align: right; flex-grow: 2; } #g-audit-log-statistics-search-dialog button[disabled], #g-audit-log-statistics-search-dialog .pure-button[disabled] { border: unset; } #g-audit-log-statistics-search-dialog .content { display: block; } #g-audit-log-statistics-search-dialog .content .date-select { display: flex; justify-content: center; margin: 0 0 10px; } #g-audit-log-statistics-search-dialog .content .date-select .flatpickr-input { background: #fff; height: 33px; width: 91px; } #g-audit-log-statistics-search-dialog .content .date-select .button { background-color: #5686da; width: 83px; height: 33px; padding: 0 5px; } #g-audit-log-statistics-search-dialog .content .date-select .button:hover { background-color: #1565c0; } #g-audit-log-statistics-search-dialog .content .date-select .date-range-label { margin-right: 5px; } #g-audit-log-statistics-search-dialog .content .c-border { height: unset; overflow: auto; border-radius: 5px 5px 0 0; } #g-audit-log-statistics-search-dialog .content .c-border::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 15px; background-color: #ccc; } #g-audit-log-statistics-search-dialog .content .c-border::-webkit-scrollbar { border-radius: 17px; width: 7px; height: 6px; background-color: #ccc; } #g-audit-log-statistics-search-dialog .content .c-border::-webkit-scrollbar-thumb { border-radius: 13px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #313a3e; } #g-audit-log-statistics-search-dialog section .container { min-width: 615px; height: calc(100vh - 400px); } #g-audit-log-statistics-search-dialog section .container::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 15px; background-color: #ccc; } #g-audit-log-statistics-search-dialog section .container::-webkit-scrollbar { border-radius: 17px; width: 7px; height: 6px; background-color: #ccc; } #g-audit-log-statistics-search-dialog section .container::-webkit-scrollbar-thumb { border-radius: 13px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #313a3e; } #g-audit-log-statistics-search-dialog section .c-table .statisticDate { max-width: 115px; width: 100px; } #g-audit-log-statistics-search-dialog section .c-table .websiteCount, #g-audit-log-statistics-search-dialog section .c-table .managementCount, #g-audit-log-statistics-search-dialog section .c-table .appCount, #g-audit-log-statistics-search-dialog section .c-table .totalCount { max-width: 125px; width: 100px; text-align: center; } #g-audit-log-statistics-search-dialog section .c-table .websiteCount div, #g-audit-log-statistics-search-dialog section .c-table .managementCount div, #g-audit-log-statistics-search-dialog section .c-table .appCount div, #g-audit-log-statistics-search-dialog section .c-table .totalCount div { max-width: 125px; width: 100px; } #g-audit-log-statistics-search-dialog .footer { padding: 5px; text-align: center; border: 1px solid #d9d9d9; border-radius: 0 0 5px 5px; border-top: 0; display: flex; flex-direction: row; justify-content: space-around; } #g-audit-log-statistics-search-dialog .footer .footer-item { display: flex; flex-direction: row; margin-right: 15px; } #g-audit-log-statistics-search-dialog .footer .footer-item .footer-item-label:after { content: ":"; margin-right: 5px; } #g-audit-log { width: 100%; height: 100%; background: #f0f0f0; position: relative; } #g-audit-log .auditLog-headBar { width: 575px; margin: 5px auto 0px; display: flex; } #g-audit-log .auditLog-headBar .flatpickr-input { background: #fff; height: 33px; width: 135px; } #g-audit-log .auditLog-headBar .date-range-label { margin-right: 5px; } #g-audit-log .auditLog-headBar .button { background-color: #5686da; width: 83px; height: 33px; padding: 0 5px; } #g-audit-log .auditLog-headBar .button:hover { background-color: #1565c0; } #g-audit-log .auditLog-table { margin: 5px 5px; background: #fff; border: 1px solid #bbb; border-radius: 5px; padding: 5px; } #g-audit-log .auditLog-table .table-head { margin-bottom: 5px; display: flex; justify-content: space-between; } #g-audit-log .auditLog-table .table-head .title { line-height: 30px; width: 300px; } #g-audit-log .auditLog-table .c-border { height: unset; overflow: auto; } #g-audit-log .auditLog-table .c-border::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 15px; background-color: #ccc; } #g-audit-log .auditLog-table .c-border::-webkit-scrollbar { border-radius: 17px; width: 7px; height: 6px; background-color: #ccc; } #g-audit-log .auditLog-table .c-border::-webkit-scrollbar-thumb { border-radius: 13px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #313a3e; } #g-audit-log .auditLog-table section .container { min-width: 1320px; } #g-audit-log .auditLog-table section .container::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 15px; background-color: #ccc; } #g-audit-log .auditLog-table section .container::-webkit-scrollbar { border-radius: 17px; width: 7px; height: 6px; background-color: #ccc; } #g-audit-log .auditLog-table section .container::-webkit-scrollbar-thumb { border-radius: 13px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #313a3e; } #g-audit-log .auditLog-table section .c-table .sequence { width: 45px; } #g-audit-log .auditLog-table section .c-table .target { max-width: 200px; } #g-audit-log .auditLog-table section .c-table .moduleName { width: 150px; } #g-audit-log .auditLog-table section .c-table .actionName { width: 70px; } #g-audit-log .auditLog-table section .c-table .displayName { width: 120px; } #g-audit-log .auditLog-table section .c-table .ip { width: 120px; } #g-audit-log .auditLog-table section .c-table .dateTime { width: 180px; } #g-audit-log .auditLog-table section .c-table .actionResult { width: 90px; } #g-audit-log .auditLog-table section .c-table .actionResult div { text-align: center; } #g-audit-log .auditLog-table section .c-table .severity { width: 80px; } #g-audit-log .auditLog-table section .c-table .severity div { text-align: center; } #g-audit-log .auditLog-table section .c-table .more { width: 80px; text-align: center; } #g-audit-log .auditLog-table section .c-table .more .icon-block { font-size: 18px; } #g-audit-log .auditLog-table section .c-table .more .icon-block a { margin-right: 12px; } #g-audit-log .auditLog-table section .c-table .more .icon-block a.delete:hover { color: #CA2124; } #g-audit-log .auditLog-table section .c-table .more .icon-block a:hover { color: #1b76c4; } #g-audit-log .auditLog-table section .c-table > tbody > tr { height: 35px; } #g-audit-log .auditLog-table section .c-table > tbody > tr .pre { white-space: normal; } #g-audit-log .MuiTablePagination-root button[disabled], #g-audit-log .pure-button[disabled] { border: unset; } #g-auditLog-statistics { width: 100%; height: 100%; position: relative; } #g-auditLog-statistics #g-logistic-statistics-tabs { margin: 13px 10px 0; height: calc(100% - 50px); } #g-auditLog-statistics #g-logistic-statistics-tabs.c-tabs > .tabContent { background-color: white; border: 1px solid #bbb; flex-grow: 1; display: flex; position: relative; padding: 5px 4px; overflow-y: auto; border-radius: 0 5px 5px 5px; margin-top: unset; } #g-auditLog-statistics #g-logistic-statistics-tabs.c-tabs > .tabContent::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 15px; background-color: #ccc; } #g-auditLog-statistics #g-logistic-statistics-tabs.c-tabs > .tabContent::-webkit-scrollbar { border-radius: 17px; width: 7px; height: 6px; background-color: #ccc; } #g-auditLog-statistics #g-logistic-statistics-tabs.c-tabs > .tabContent::-webkit-scrollbar-thumb { border-radius: 13px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #313a3e; } #g-auditLog-statistics #g-logistic-statistics-tabs.c-tabs > .tabContent .c-border { height: unset; overflow: auto; } #g-auditLog-statistics #g-logistic-statistics-tabs.c-tabs > .tabContent .c-border::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 15px; background-color: #ccc; } #g-auditLog-statistics #g-logistic-statistics-tabs.c-tabs > .tabContent .c-border::-webkit-scrollbar { border-radius: 17px; width: 7px; height: 6px; background-color: #ccc; } #g-auditLog-statistics #g-logistic-statistics-tabs.c-tabs > .tabContent .c-border::-webkit-scrollbar-thumb { border-radius: 13px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #313a3e; } #g-auditLog-statistics #g-logistic-statistics-tabs.c-tabs > .menu { display: flex; flex-grow: 0; flex-shrink: 0; flex-wrap: wrap; margin-bottom: -1px; border-bottom: unset; } #g-auditLog-statistics #g-logistic-statistics-tabs.c-tabs > .menu li { background-color: #5686da; color: #fff; margin-right: 5px; } #g-auditLog-statistics #g-logistic-statistics-tabs.c-tabs > .menu li.current { background-color: #fff; cursor: default; color: #313a3e; border: 1px solid #bbb; border-bottom: 0; z-index: 2; } #g-auditLog-statistics #g-logistic-statistics-tabs.road section .container { height: calc(100vh - 234px); } #g-auditLog-statistics #g-logistic-statistics-tabs section .container { width: 100%; height: calc(100vh - 280px); } #g-auditLog-statistics #g-logistic-statistics-tabs section .container::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 15px; background-color: #ccc; } #g-auditLog-statistics #g-logistic-statistics-tabs section .container::-webkit-scrollbar { border-radius: 17px; width: 7px; height: 6px; background-color: #ccc; } #g-auditLog-statistics #g-logistic-statistics-tabs section .container::-webkit-scrollbar-thumb { border-radius: 13px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #313a3e; } #g-auditLog-statistics #g-logistic-statistics-tabs section .c-table .selector { text-align: left; padding-left: 5px; width: 20px; } #g-auditLog-statistics #g-logistic-statistics-tabs section .c-table .sequence { width: 60px; } #g-auditLog-statistics #g-logistic-statistics-tabs section .c-table .isShowOnMap, #g-auditLog-statistics #g-logistic-statistics-tabs section .c-table .terminal { width: calc(100% * 0.1); } #g-auditLog-statistics #g-logistic-statistics-tabs section .c-table .deliverType, #g-auditLog-statistics #g-logistic-statistics-tabs section .c-table .channel, #g-auditLog-statistics #g-logistic-statistics-tabs section .c-table .nvrChannel { width: 120px !important; } #g-auditLog-statistics #g-logistic-statistics-tabs section .c-table .nvr, #g-auditLog-statistics #g-logistic-statistics-tabs section .c-table .name, #g-auditLog-statistics #g-logistic-statistics-tabs section .c-table .location { width: 300px; } #g-auditLog-statistics #g-logistic-statistics-tabs section .c-table .port, #g-auditLog-statistics #g-logistic-statistics-tabs section .c-table .ip, #g-auditLog-statistics #g-logistic-statistics-tabs section .c-table .ivarId { width: calc(100% * 0.2); } #g-auditLog-statistics #g-logistic-statistics-tabs section .c-table .streamUrl { width: 400px; } #g-auditLog-statistics #g-logistic-statistics-tabs section .c-table .monitor, #g-auditLog-statistics #g-logistic-statistics-tabs section .c-table .status, #g-auditLog-statistics #g-logistic-statistics-tabs section .c-table .isShowMap { width: 130px !important; } #g-auditLog-statistics #g-logistic-statistics-tabs section .c-table .more { width: calc(100% * 0.1); } #g-auditLog-statistics #g-logistic-statistics-tabs section .c-table .latlng, #g-auditLog-statistics #g-logistic-statistics-tabs section .c-table .nvrName, #g-auditLog-statistics #g-logistic-statistics-tabs section .c-table .nvrIp { width: 220px; } #g-auditLog-statistics #g-logistic-statistics-tabs section .c-table .icon-block { font-size: 18px; } #g-auditLog-statistics #g-logistic-statistics-tabs section .c-table .icon-block a { margin-right: 12px; } #g-auditLog-statistics #g-logistic-statistics-tabs section .c-table .icon-block a.delete:hover { color: #CA2124; } #g-auditLog-statistics #g-logistic-statistics-tabs section .c-table .icon-block a:hover { color: #1b76c4; } #g-auditLog-statistics #g-logistic-statistics-tabs section .c-table > tbody > tr { height: 35px; } #g-auditLog-statistics .auditLogStatistics-headBar { margin: 5px auto 0px; display: flex; align-items: center; justify-content: right; flex-wrap: wrap; } #g-auditLog-statistics .auditLogStatistics-headBar .flatpickr-input { background: #fff; height: 33px; width: 135px; } #g-auditLog-statistics .auditLogStatistics-headBar .date-range-label { margin-right: 5px; } #g-auditLog-statistics .auditLogStatistics-headBar .selector { margin-right: 10px; display: inline-block; } #g-auditLog-statistics .auditLogStatistics-headBar .selector label { line-height: 35px; } #g-auditLog-statistics .auditLogStatistics-headBar .icon { margin: 0 5px; line-height: 45px; font-size: 20px; width: 25px; } #g-auditLog-statistics .auditLogStatistics-headBar .icon:hover { color: #1b76c4; } #g-auditLog-statistics .auditLogStatistics-table { margin: 5px 5px; background: #fff; border: 1px solid #bbb; border-radius: 5px; padding: 5px; } #g-auditLog-statistics .auditLogStatistics-table .table-head { margin-bottom: 5px; display: flex; justify-content: space-between; } #g-auditLog-statistics .auditLogStatistics-table .table-head .title { line-height: 30px; width: 300px; } #g-auditLog-statistics .auditLogStatistics-table .c-border { height: unset; overflow: auto; } #g-auditLog-statistics .auditLogStatistics-table .c-border::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 15px; background-color: #ccc; } #g-auditLog-statistics .auditLogStatistics-table .c-border::-webkit-scrollbar { border-radius: 17px; width: 7px; height: 6px; background-color: #ccc; } #g-auditLog-statistics .auditLogStatistics-table .c-border::-webkit-scrollbar-thumb { border-radius: 13px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #313a3e; } #g-auditLog-statistics .auditLogStatistics-table section .container { min-width: 550px; } #g-auditLog-statistics .auditLogStatistics-table section .container::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 15px; background-color: #ccc; } #g-auditLog-statistics .auditLogStatistics-table section .container::-webkit-scrollbar { border-radius: 17px; width: 7px; height: 6px; background-color: #ccc; } #g-auditLog-statistics .auditLogStatistics-table section .container::-webkit-scrollbar-thumb { border-radius: 13px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #313a3e; } #g-auditLog-statistics .auditLogStatistics-table section .c-table .sequence { width: 45px; } #g-auditLog-statistics .auditLogStatistics-table section .c-table .moduleType { width: 100px; } #g-auditLog-statistics .auditLogStatistics-table section .c-table .targetType { width: 235px; } #g-auditLog-statistics .auditLogStatistics-table section .c-table .targetType .pre { white-space: normal; } #g-auditLog-statistics .auditLogStatistics-table section .c-table .target { width: 200px; } #g-auditLog-statistics .auditLogStatistics-table section .c-table .target .pre { white-space: normal; } #g-auditLog-statistics .auditLogStatistics-table section .c-table .count { width: 70px; } #g-auditLog-statistics .MuiTablePagination-root button[disabled], #g-auditLog-statistics .pure-button[disabled] { border: unset; } #g-board-billboard-view { width: 100%; height: 100%; background: #f0f0f0; position: relative; } #g-board-billboard-view .billboard-table { margin: 13px 10px 0; background: #fff; border: 1px solid #bbb; border-radius: 5px; padding: 5px; } #g-board-billboard-view .billboard-table .table-head { margin-bottom: 5px; display: flex; justify-content: space-between; } #g-board-billboard-view .billboard-table .table-head .left .title { line-height: 30px; width: 300px; vertical-align: middle; display: inline-block; } #g-board-billboard-view .billboard-table .table-head .left .selector { display: inline-block; } #g-board-billboard-view .billboard-table .table-head .left .selector label { line-height: 35px; } #g-board-billboard-view .billboard-table .table-head .create-billboard-btn { font-size: 20px; margin: 0 5px; } #g-board-billboard-view .billboard-table .table-head .create-billboard-btn:hover { color: #1b76c4; } #g-board-billboard-view .billboard-table section .container { height: calc(100vh - 245px); } #g-board-billboard-view .billboard-table section .container::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 15px; background-color: #ccc; } #g-board-billboard-view .billboard-table section .container::-webkit-scrollbar { border-radius: 17px; width: 7px; height: 6px; background-color: #ccc; } #g-board-billboard-view .billboard-table section .container::-webkit-scrollbar-thumb { border-radius: 13px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #313a3e; } #g-board-billboard-view .billboard-table section .c-table .sequence { width: 45px; } #g-board-billboard-view .billboard-table section .c-table .billboardTypeId { min-width: 100px; } #g-board-billboard-view .billboard-table section .c-table .title, #g-board-billboard-view .billboard-table section .c-table .description { min-width: 100px; max-width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #g-board-billboard-view .billboard-table section .c-table .beginTime { width: 160px; } #g-board-billboard-view .billboard-table section .c-table .more .icon-block { font-size: 18px; } #g-board-billboard-view .billboard-table section .c-table .more .icon-block a { margin-right: 12px; } #g-board-billboard-view .billboard-table section .c-table .more .icon-block a:hover { color: #1b76c4; } #g-board-billboard-view .billboard-table section .c-table > tbody > tr { height: 35px; } #g-board-billboard-view .MuiTablePagination-root { border: 1px solid #d9d9d9; margin-top: -2px; border-top: 0; } #g-board-billboard-view .page-nav { justify-content: center; margin-top: 7px; } #g-board-billboard-view button[disabled], #g-board-billboard-view .pure-button[disabled] { border: unset; } #g-board-billboard-view #g-board-billboard-view-detial .content { max-width: 900px; min-width: 500px; } #g-board-billboard-view #g-board-billboard-view-detial .content .links-url { display: flex; flex-direction: column; } #g-board-billboard-view #g-board-billboard-view-detial .content .links-url a { color: #5686da; } #g-board-billboard-view #g-board-billboard-view-detial .content .download-link { color: #5686da; } #g-board-billboard-view #g-board-billboard-view-detial .content .image { flex-direction: column; } #g-board-billboard-view #g-board-billboard-view-detial .content .image img { max-width: 100%; } #g-board-billboard-view #g-board-billboard-view-detial .content .image label { display: none; } #g-board-terminal-board-view { width: 100%; height: 100%; background: #f0f0f0; position: relative; } #g-board-terminal-board-view #g-board-terminal-board-tabs { margin: 13px 10px 0; height: calc(100% - 20px); } #g-board-terminal-board-view #g-board-terminal-board-tabs > .menu { display: flex; flex-grow: 0; flex-shrink: 0; flex-wrap: wrap; margin-bottom: -1px; border-bottom: unset; } #g-board-terminal-board-view #g-board-terminal-board-tabs > .menu li { background-color: #5686da; color: #fff; margin-right: 5px; } #g-board-terminal-board-view #g-board-terminal-board-tabs > .menu li.current { background-color: #fff; cursor: default; color: #313a3e; border: 1px solid #bbb; border-bottom: 0; z-index: 2; } #g-board-terminal-board-view #g-board-terminal-board-tabs.c-tabs > .tabContent { border: 1px solid #bbb; flex-grow: 1; display: flex; position: relative; padding: 5px 4px; overflow-y: auto; background-color: white; border-radius: 0 5px 5px 5px; margin-top: unset; } #g-board-terminal-board-view #g-board-terminal-board-tabs.c-tabs .terminalBoard-table { height: calc(100% - 45px); } #g-board-terminal-board-view #g-board-terminal-board-tabs.c-tabs .terminalBoard-table .table-head { margin-bottom: 5px; display: flex; justify-content: space-between; } #g-board-terminal-board-view #g-board-terminal-board-tabs.c-tabs .terminalBoard-table .table-head .left .title { line-height: 30px; width: 300px; vertical-align: middle; display: inline-block; } #g-board-terminal-board-view #g-board-terminal-board-tabs.c-tabs .terminalBoard-table .table-head .left .selector { display: inline-block; } #g-board-terminal-board-view #g-board-terminal-board-tabs.c-tabs .terminalBoard-table .table-head .left .selector label { line-height: 35px; } #g-board-terminal-board-view #g-board-terminal-board-tabs.c-tabs .terminalBoard-table .table-head .create-terminalBoard-btn { font-size: 20px; margin: 0 5px; } #g-board-terminal-board-view #g-board-terminal-board-tabs.c-tabs .terminalBoard-table .table-head .create-terminalBoard-btn:hover { color: #1b76c4; } #g-board-terminal-board-view #g-board-terminal-board-tabs.c-tabs .terminalBoard-table .c-border { height: inherit; } #g-board-terminal-board-view #g-board-terminal-board-tabs.c-tabs .terminalBoard-table section .container { height: calc(100vh - 285px); } #g-board-terminal-board-view #g-board-terminal-board-tabs.c-tabs .terminalBoard-table section .container::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 15px; background-color: #ccc; } #g-board-terminal-board-view #g-board-terminal-board-tabs.c-tabs .terminalBoard-table section .container::-webkit-scrollbar { border-radius: 17px; width: 7px; height: 6px; background-color: #ccc; } #g-board-terminal-board-view #g-board-terminal-board-tabs.c-tabs .terminalBoard-table section .container::-webkit-scrollbar-thumb { border-radius: 13px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #313a3e; } #g-board-terminal-board-view #g-board-terminal-board-tabs.c-tabs .terminalBoard-table section .c-table .sequence { width: 45px; } #g-board-terminal-board-view #g-board-terminal-board-tabs.c-tabs .terminalBoard-table section .c-table .title, #g-board-terminal-board-view #g-board-terminal-board-tabs.c-tabs .terminalBoard-table section .c-table .description, #g-board-terminal-board-view #g-board-terminal-board-tabs.c-tabs .terminalBoard-table section .c-table .beginTime { max-width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #g-board-terminal-board-view #g-board-terminal-board-tabs.c-tabs .terminalBoard-table section .c-table .more { width: 45px; } #g-board-terminal-board-view #g-board-terminal-board-tabs.c-tabs .terminalBoard-table section .c-table .more .icon-block { font-size: 18px; } #g-board-terminal-board-view #g-board-terminal-board-tabs.c-tabs .terminalBoard-table section .c-table .more .icon-block a { margin-right: 12px; } #g-board-terminal-board-view #g-board-terminal-board-tabs.c-tabs .terminalBoard-table section .c-table .more .icon-block a:hover { color: #1b76c4; } #g-board-terminal-board-view #g-board-terminal-board-tabs.c-tabs .terminalBoard-table section .c-table > tbody > tr { height: 35px; } #g-board-terminal-board-view .MuiTablePagination-root { border: 1px solid #d9d9d9; margin-top: -2px; border-top: 0; } #g-board-terminal-board-view .page-nav { justify-content: center; margin-top: 7px; } #g-board-terminal-board-view button[disabled], #g-board-terminal-board-view .pure-button[disabled] { border: unset; } #g-board-terminal-board-view #g-board-terminal-board-view-detial .content { max-width: 900px; min-width: 500px; } #g-board-terminal-board-view #g-board-terminal-board-view-detial .content .links-url { display: flex; flex-direction: column; } #g-board-terminal-board-view #g-board-terminal-board-view-detial .content .links-url a { color: #5686da; } #g-board-terminal-board-view #g-board-terminal-board-view-detial .content .download-link { color: #5686da; } #g-board-terminal-board-view #g-board-terminal-board-view-detial .content .image { flex-direction: column; } #g-board-terminal-board-view #g-board-terminal-board-view-detial .content .image img { max-width: 100%; } #g-board-terminal-board-view #g-board-terminal-board-view-detial .content .image label { display: none; } .badge { display: inline-block; padding: .25em .4em; font-size: 100%; font-weight: 500; line-height: 1; color: #fff; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: .25rem; } .button-success, .button-error, .button-warning, .button-secondary { color: white; border-radius: 4px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); } .button-success:hover, .button-error:hover, .button-warning:hover, .button-secondary:hover { background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1)); } .button-success { background: #1cb841; /* this is a green */ } .button-error { background: #ca3c3c; /* this is a maroon */ } .button-warning { background: #df7514; /* this is an orange */ } .button-secondary { background: #42b8dd; /* this is a light blue */ } .button-group > a:first-child { border-radius: 4px 0px 0px 4px; } .button-group > a:last-child { border-radius: 0px 4px 4px 0px; } .link-success { color: #5cb85c; border-color: #5cb85c; } .link-secondary { color: #5bc0de; border-color: #5bc0de; } .link-error { color: #d9534f; border-color: #d9534f; } .link-warning { color: #f0ad4e; border-color: #f0ad4e; } .link-primary { color: #0275d8; border-color: #0275d8; } #g-cameras { min-width: 984px; margin: 0 auto; } #g-cameras .c-table .sourceId { min-width: 70px; white-space: nowrap; } #g-cameras .c-table .area { min-width: 100px; } #g-cameras .c-table .equipmentCode { min-width: 60px; } #g-cameras .c-table .name { min-width: 110px; } #g-cameras .c-table .ip { width: 120px; } #g-cameras .c-table .manageUnit { min-width: 75px; } #g-cameras .c-table .repairStatus { width: 70px; text-align: center; } #g-cameras .c-table .repairStatus a { color: #5bc0de; text-decoration: underline; } #g-cameras .c-table .related { text-align: center; width: 130px; } #g-cameras .c-table .related a { margin: 0 5px; } #g-cameras .c-table .nvr, #g-cameras .c-table .editAction, #g-cameras .c-table .deleteAction { text-align: center; width: 70px; } #g-cameras .c-table .nvr a, #g-cameras .c-table .editAction a, #g-cameras .c-table .deleteAction a { width: 100%; height: 100%; } #g-cameras .top-actions { display: inline-block; } #g-cameras .top-actions > div { display: inline; } #g-cameras .top-actions input[type='file'] { box-sizing: border-box; cursor: pointer; opacity: 0; width: 66px; height: 31px; margin: 6px; position: absolute; z-index: 5; } #g-cameras #g-camera-related-dialog .areaSelect .area-select-container { width: 334px; } #g-cameras #g-camera-related-dialog .areaSelect .area-select-container .area-select-dropdown { display: inline; } #g-cameras #g-camera-related-dialog .areaSelect .area-select-container .area-select-dropdown select { margin-bottom: .5em; margin-right: 5px; width: 334px; } #g-cameras #g-camera-related-dialog .areaSelect .area-select-container .area-select-dropdown select:last-child { margin-bottom: 0; } #g-cameras #g-camera-related-dialog .device select { width: 334px; } #g-cameras #g-camera-related-dialog .device .c-link { margin-left: 6px; line-height: 30px; } #g-cameras #g-camera-related-dialog .relatedCameras .related-devices-content { overflow: hidden; overflow-y: auto; width: 100%; max-height: 310px; flex-flow: column; padding-top: 10px; } #g-cameras #g-camera-related-dialog .relatedCameras .related-devices-content .related-devices-item { line-height: 30px; width: 354px; } #g-cameras #g-camera-related-dialog .relatedCameras .related-devices-content .related-devices-item > span { width: 310px; text-overflow: ellipsis; display: inline-block; overflow: hidden; white-space: nowrap; } #g-cameras #g-camera-related-dialog .relatedCameras .related-devices-content .related-devices-item .c-link { float: right; margin-left: 6px; line-height: 30px; } #g-camera-edit-dialog .content.c-align { min-height: 460px; width: 460px; } #g-camera-edit-dialog .content.c-align .area .area-select-container { width: 220px; } #g-camera-edit-dialog .content.c-align .area .area-select-container .area-select-dropdown { display: inline; } #g-camera-edit-dialog .content.c-align .area .area-select-container .area-select-dropdown select { width: 220px; height: 32px; margin-bottom: .5em; margin-right: 5px; } #g-camera-edit-dialog .content.c-align .area .area-select-container .area-select-dropdown select:last-child { margin-bottom: 0; } #g-camera-edit-dialog .content.c-align .area .area-select-container .area-select-dropdown svg { margin-top: -3px; } #g-camera-edit-dialog .map-container { position: absolute; top: 110px; right: 20px; width: 440px; height: 320px; } #g-camera-edit-dialog .map-container > div { width: 100%; height: 100%; } #g-camera-edit-dialog .map-container .leaflet-top, #g-camera-edit-dialog .map-container .leaflet-bottom { z-index: 995; } #g-camera-status-dialog .content { flex-flow: column nowrap; overflow: hidden; width: 460px; align-items: center; } #g-camera-status-dialog .content .c-date-range input[type="text"] { width: 150px; } #g-camera-status-dialog .content .camera-status-statistics { width: 100%; height: 90px; display: flex; flex-flow: row nowrap; overflow: hidden; } #g-camera-status-dialog .content .camera-status-statistics div { width: 50%; height: 70px; display: flex; flex-flow: column nowrap; border: 1px solid #aaaaaa; margin: 15px; padding: 2px 10px; } #g-camera-status-dialog .content .camera-status-statistics div label { font-size: 0.9em; margin: 0 5px 0 0; } #g-camera-status-dialog .content .camera-status-statistics div span { font-size: 2.5em; font-weight: bold; text-align: right; color: #5bc0de; } #g-camera-status-dialog .content .camera-status-statistics div span.red { color: #d9534f; } #g-camera-status-dialog .content .camera-status-statistics div span.yellow { color: #f0ad4e; } #g-camera-status-dialog .content .camera-status-statistics div span.green { color: #5cb85c; } #g-camera-status-dialog .content #camera-status-chart { width: 100%; height: 220px; } .badge { display: inline-block; padding: .25em .4em; font-size: 100%; font-weight: 500; line-height: 1; color: #fff; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: .25rem; } .button-success, .button-error, .button-warning, .button-secondary { color: white; border-radius: 4px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); } .button-success:hover, .button-error:hover, .button-warning:hover, .button-secondary:hover { background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1)); } .button-success { background: #1cb841; /* this is a green */ } .button-error { background: #ca3c3c; /* this is a maroon */ } .button-warning { background: #df7514; /* this is an orange */ } .button-secondary { background: #42b8dd; /* this is a light blue */ } .button-group > a:first-child { border-radius: 4px 0px 0px 4px; } .button-group > a:last-child { border-radius: 0px 4px 4px 0px; } .link-success { color: #5cb85c; border-color: #5cb85c; } .link-secondary { color: #5bc0de; border-color: #5bc0de; } .link-error { color: #d9534f; border-color: #d9534f; } .link-warning { color: #f0ad4e; border-color: #f0ad4e; } .link-primary { color: #0275d8; border-color: #0275d8; } .c-flex.jce { justify-content: flex-end; } .c-block { width: 100%; display: flex; flex-direction: column; justify-content: space-between; } .c-block.center { margin: 0 auto; } .c-border { border: 1px solid #E9E9E9; border-radius: 4px; height: 100%; } .c-border section { position: relative; padding-top: 37px; } .c-border section .container { overflow-y: auto; height: calc(100vh - 273px); } .c-padding-hr { padding-left: 100px; padding-right: 100px; } .c-padding-vr { padding-top: 10px; padding-bottom: 10px; } .c-position-rlt { position: relative; } .c-float-rt { float: right; } .c-line-header { white-space: nowrap; overflow: hidden; } .c-line-header::after { border: #D0D0D0 1px solid; content: ''; display: inline-block; margin-left: 15px; vertical-align: middle; width: 100%; } .c-remind { color: #D0104C; } .c-control, .c-function { margin: 10px 0; } .c-control > *, .c-function > * { margin-right: 10px; vertical-align: middle; } .c-control > *:last-child, .c-function > *:last-child { margin-right: 0px; } .c-control label, .c-function label { margin-right: 10px; } .c-function { text-align: right; } .c-function a { display: inline-block; margin: 5px; font-size: 1em; border: 1px solid #0275d8; border-color: inherit; border-radius: 4px; padding: 4px; } .c-function i { margin-right: 5px; } .c-function input[type="text"], .c-function select { width: 170px; } .c-function select { margin-right: 10px; } .c-function .area-select-container { display: inline-block; margin-right: 0; } .c-function .area-select-container .area-select-dropdown { display: inline; } .c-function .area-select-container .area-select-dropdown svg { right: 12px; } .c-function .search-field { margin-right: 0; border-radius: 5px 0 0 5px; background: #E1E1E1; } .c-function .search-bar { margin-right: 0; } .c-function .search-bar input[type="text"] { border-left: 0; border-radius: 0 5px 5px 0; line-height: 23px; padding-right: 7px !important; } .c-function .c-date-range { display: inline; } .c-function button { margin-right: 10px; } .c-function button:last-child { margin-right: 0px; } .c-icon-btn { color: #589FD4; font-weight: normal; margin-right: 10px; padding: 5px; } .c-icon-btn:last-child { margin-right: 0px; } .c-icon-btn:hover { border-color: #D0D0D0; color: #1074BE; cursor: pointer; } .c-icon-btn[disabled] { cursor: not-allowed; opacity: 0.5; } .c-success { color: #5DAC81; font-style: italic; } .c-page-ctrl { text-align: initial !important; } .c-page-ctrl > * { vertical-align: middle; } .c-page-ctrl .page-info { display: inline-block; } .c-page-ctrl .page-info label { margin-right: 10px; } .c-page-ctrl .page-info select { min-width: 52px; } .c-page-ctrl .page-info span { margin-left: 20px; } .c-page-ctrl .c-page-nav.thumbs { float: right; } .c-page-ctrl .c-page-nav.thumbs .thumb.fa { color: #1074BE; } .c-page-ctrl .c-page-nav.thumbs .thumb.current { background-color: #1074BE; } .c-table { width: 100%; } .c-table thead { border-top: none; } .c-table thead th { height: 0; line-height: 0; padding-top: 0; padding-bottom: 0; color: transparent; border: none; white-space: nowrap; } .c-table thead th div { white-space: nowrap; position: absolute; background: transparent; color: initial; padding: 7px 0; top: 0; line-height: normal; } .c-table-row:hover { cursor: pointer; } .c-table-row.no-cursor:hover { cursor: initial; } .c-hide { display: none; } button:disabled { cursor: not-allowed; opacity: 0.5; } .c-modal { z-index: 997; } .c-modal .dialog > .content { padding: 0 20px; display: flex; flex-flow: row nowrap; max-height: calc(100vh - 160px); max-width: calc(100vw - 50px); min-width: 350px; } .c-modal .dialog > .content .content.c-align textarea[readonly] { resize: none; background-color: inherit; color: inherit; } @-moz-document url-prefix() { .c-modal .dialog > .content .content.c-align { display: flex; flex-flow: column wrap; } } .c-contextmenu { z-index: 9999; } .c-contextmenu .contextmenu-header { background: #666666; height: 1px; padding: 0; } .c-contextmenu .contextmenu-create:before { font-family: "Font Awesome 5 Free", sans-serif; content: "\f067"; margin: 0 6px 0 1px; font-weight: 900; } .c-contextmenu .contextmenu-edit:before { font-family: "Font Awesome 5 Free", sans-serif; content: "\f303"; margin-right: 5px; font-weight: 900; } .c-contextmenu .contextmenu-detail:before { font-family: "Font Awesome 5 Free", sans-serif; content: "\f022"; margin-right: 5px; font-weight: 900; } .c-contextmenu .contextmenu-playback:before { font-family: "Font Awesome 5 Free", sans-serif; content: "\f144"; margin-right: 5px; font-weight: 900; } .c-contextmenu .contextmenu-add-to-cart:before { font-family: "Font Awesome 5 Free", sans-serif; content: "\f108"; margin-right: 5px; font-weight: 900; } .c-contextmenu .contextmenu-related:before { font-family: "Font Awesome 5 Free", sans-serif; content: "\f0c1"; margin-right: 5px; font-weight: 900; } .c-contextmenu .contextmenu-delete:before { font-family: "Font Awesome 5 Free", sans-serif; content: "\f1f8"; margin-right: 5px; font-weight: 900; } .c-contextmenu .contextmenu-alarm-statistics:before { font-family: "Font Awesome 5 Free", sans-serif; content: "\f1fe"; margin-right: 5px; font-weight: 900; } .c-contextmenu .contextmenu-online-status:before { font-family: "Font Awesome 5 Free", sans-serif; content: "\f1e6"; margin-right: 5px; font-weight: 900; } .c-time-range { align-items: center; } .c-time-range .between { margin: 0 6px 0 5px; } .c-time-range input[type="text"] { width: 75px; } .c-tabs > .menu li, .c-tabs > .menu a { padding: 5px 10px; font-size: 0.9em; } .c-file-input input[type="file"] { border-radius: 4px; } .c-file-input button { height: 32px; line-height: 18px; border-radius: 4px; } .c-file-input .c-link { font-size: 0.95em; color: inherit; } i.c-checkbox.partial { color: #a6a6a6; } i.c-checkbox.partial:hover:not(.disabled) { color: #b7b7b7; } i.c-checkbox.partial:active:not(.disabled) { color: #c8c8c8; } .c-checkbox-group, .c-radio-group { display: flex; flex-wrap: wrap; } .c-checkbox-group > .list-item, .c-radio-group > .list-item { display: inline-flex; align-items: center; } .c-checkbox-group > .list-item > *:first-child, .c-radio-group > .list-item > *:first-child { margin: 0 5px 0 0; } .c-checkbox-group.inline, .c-radio-group.inline { display: inline-flex; } .c-checkbox-group.inline > .list-item:not(:last-child), .c-radio-group.inline > .list-item:not(:last-child) { margin: 0 0.8em 0 0; } .c-checkbox-group:not(.inline), .c-radio-group:not(.inline) { flex-direction: column; } .c-checkbox-group:not(.inline) > .list-item:not(:last-child), .c-radio-group:not(.inline) > .list-item:not(:last-child) { margin: 0 0 0.6em 0; } .c-checkbox-group:not(.inline) > .list-item.all { border-bottom: 1px solid #d9d9d9; padding-bottom: 0.3em; margin-bottom: 0.3em; } .c-combobox.clearable, .pure-form .c-combobox.clearable { display: flex; } .c-combobox.clearable > input[type='text'], .pure-form .c-combobox.clearable > input[type='text'] { padding-right: 50px; } .c-combobox.clearable > input[type='text'] + *, .pure-form .c-combobox.clearable > input[type='text'] + * { position: relative; left: -50px; margin-left: 0; margin-right: -50px; } .c-combobox.clearable > input[type='text'] + .fg, .pure-form .c-combobox.clearable > input[type='text'] + .fg, .c-combobox.clearable > input[type='text'] + * > .fg, .pure-form .c-combobox.clearable > input[type='text'] + * > .fg { display: inline-flex; cursor: pointer; padding: 0; border: none; width: 25px; font-family: "Font Awesome 5 Free", sans-serif; font-weight: 900; font-style: normal; justify-content: center; } .c-combobox:not(.clearable), .pure-form .c-combobox:not(.clearable) { display: flex; } .c-combobox:not(.clearable) > input[type='text'], .pure-form .c-combobox:not(.clearable) > input[type='text'] { padding-right: 25px; } .c-combobox:not(.clearable) > input[type='text'] + *, .pure-form .c-combobox:not(.clearable) > input[type='text'] + * { position: relative; left: -25px; margin-left: 0; margin-right: -25px; } .c-combobox:not(.clearable) > input[type='text'] + .fg, .pure-form .c-combobox:not(.clearable) > input[type='text'] + .fg, .c-combobox:not(.clearable) > input[type='text'] + * > .fg, .pure-form .c-combobox:not(.clearable) > input[type='text'] + * > .fg { display: inline-flex; cursor: pointer; padding: 0; border: none; width: 25px; font-family: "Font Awesome 5 Free", sans-serif; font-weight: 900; font-style: normal; justify-content: center; } .c-combobox .fg, .pure-form .c-combobox .fg { font-size: inherit; } .c-combo-list { font-size: 0.9rem; } .c-combo-list .MuiOutlinedInput-adornedEnd { padding-right: 0; } .c-combo-list > .c-search { margin: 0; padding: 5px; } .c-combo-list > .c-search input[type="text"] { height: 32px; width: 100%; } .c-combo-list > .c-search a { display: none; } .c-combo-list .list { max-height: 200px; overflow-y: auto; } .c-combo-list .list .c-checkbox-group { padding-bottom: 3px; } .c-combo-list .list .c-checkbox-group .list-item .MuiButtonBase-root { padding: 3px 0 0 0; } .c-combo-list .list .c-checkbox-group .list-item label { margin: 0.2em 0 0.2em; } .c-combo-list .c-checkbox-group { width: 100%; } .c-popover { overflow: hidden; } .flatpickr-calendar.noCalendar { width: 150px; } .pure-form-aligned footer { color: #0275d8; white-space: pre-wrap; margin-top: 10px; } @media print { .noprint { visibility: hidden; } } * { box-sizing: border-box; } .button-base { border-radius: 4px; padding: .3em 2em; border: 1px solid #999999; background-color: #ffffff; } button, .pure-button { border-radius: 4px; padding: .3em 2em; border: 1px solid #999999; background-color: #ffffff; } button[disabled], .pure-button[disabled] { border: 1px solid #999999; } .button-secondary { background-color: #3399cc; color: white; } .btn-ok { background-color: #3399cc; color: white; } a[disabled] { pointer-events: none; cursor: default; } .ui-datepicker select { min-width: inherit; } .pure-form .c-radio label { width: auto; } .pure-form input[type=text], .pure-form input[type=password], .pure-form input[type=email], .pure-form input[type=url], .pure-form input[type=date], .pure-form input[type=month], .pure-form input[type=time], .pure-form input[type=datetime], .pure-form input[type=datetime-local], .pure-form input[type=week], .pure-form input[type=number], .pure-form input[type=search], .pure-form input[type=tel], .pure-form input[type=color], .pure-form select, .pure-form textarea { border: 1px solid #a9a9a9; box-shadow: none; padding: 5px 7px; } .pure-form label { vertical-align: middle; margin: 0 5px 0 0; } .pure-form-aligned .pure-control-group { display: flex; align-items: center; } .pure-form-aligned .pure-control-group > label { flex-shrink: 0; } .pure-form-aligned .pure-control-group > label + *:not(input):not(select):not(textarea) { display: inline-flex; } .pure-form-aligned.left .pure-control-group > label { text-align: left; } .pure-form select { height: auto; } ul, ol { margin: 0; padding: 0; } ul li, ol li { list-style-type: none; } .c-search-panel { margin-right: auto; position: relative; margin-bottom: 10px; } .c-search-panel .pure-control-group + button.search.inline { margin-bottom: 0.5em; } .c-search-panel button.search { display: flex; margin-left: auto; } .c-search-panel button.search.inline { margin: auto; position: absolute; right: 0; bottom: 0; } .c-flex { display: flex; } .c-flex.fdc { flex-direction: column; } .c-flex.aic { align-items: center; } .c-flex.ais { align-items: flex-start; } .c-flex.aie { align-items: flex-end; } .c-flex.jcsa { justify-content: space-around; } .c-flex.jcsb { justify-content: space-between; } .c-flex.fww { flex-wrap: wrap; } .c-flex > .grow { flex-grow: 1; } .c-flex > .fixed { flex-grow: 0; flex-shrink: 0; } .c-flex > .end { margin-left: auto; } .c-flex > .center { margin-left: auto; } .c-flex > .center:last-child { margin-right: auto; } .c-link, a { display: inline-block; text-decoration: none; color: inherit; cursor: pointer; } .c-info { min-height: 40px; font-weight: bold; font-style: italic; padding-top: 5px; padding-bottom: 5px; } .c-error { color: #ff0000; font-style: italic; } .c-large { font-size: 1.1em; } .c-center { display: flex; justify-content: center; align-items: center; position: absolute; height: 100%; width: 100%; } .c-center.c-modal.show { display: flex; } .c-center.global { position: fixed; top: 0; left: 0; } .c-table:not(.nohover) tbody tr:hover:not(.selected) { background-color: #F7F4CA !important; } .c-table:not(.bland):not(.c-grid) tbody tr:nth-child(odd) { background-color: #fafafa; } .c-table caption { padding: 5px; } .c-table thead { border-color: #cbcbcb; border-width: 1px 0; border-style: solid; color: #000000; } .c-table tbody { color: #484848; } .c-table tbody tr.selected { background-color: #F7F4CA !important; } .c-table thead th, .c-table tbody td { padding: 7px; border-color: #aaaaaa; border-style: solid; border-width: 0; } .c-table thead th.selector, .c-table tbody td.selector, .c-table thead th.actions, .c-table tbody td.actions { width: 60px; text-align: center; } .c-table thead th.actions > span > *, .c-table tbody td.actions > span > * { margin: 0 5px; } .c-table thead th.actions .disabled, .c-table tbody td.actions .disabled { visibility: hidden; } .c-table thead th { text-align: center; } .c-table thead th.sortable { cursor: pointer; } .c-table thead th.sortable span.dir { margin-left: 5px; } .c-table thead th.sortable span.dir.selected { color: #ff0000; } .c-table tbody td { padding-top: 5px; padding-bottom: 5px; text-align: left; } .c-table tbody td.right { text-align: right; } .c-table tbody td.center { text-align: center; } .c-table.selectable thead th.selector > i.c-checkbox.partial { color: #848383; } .c-table.column { display: flex; flex-direction: row !important; } .c-table.column tbody, .c-table.column thead, .c-table.column tr, .c-table.column td, .c-table.column th { display: flex !important; } .c-table.column thead { flex-grow: 0; flex-shrink: 0; border-width: 0px 1px; } .c-table.column thead tr, .c-table.column tbody tr { flex-direction: column; flex-shrink: 0; } .c-table.column thead th, .c-table.column tbody td { padding: 7px; height: 25px; align-items: center; } .c-table.column thead th.selector, .c-table.column tbody td.selector, .c-table.column thead th.actions, .c-table.column tbody td.actions { width: auto; } .c-table.fixed-header { position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex; flex-direction: column; align-items: stretch; } .c-table.fixed-header caption, .c-table.fixed-header thead, .c-table.fixed-header tbody, .c-table.fixed-header tfoot { width: 100%; } .c-table.fixed-header caption, .c-table.fixed-header thead, .c-table.fixed-header tbody, .c-table.fixed-header tfoot, .c-table.fixed-header td, .c-table.fixed-header th { display: block; } .c-table.fixed-header tr { display: flex; } .c-table.fixed-header thead, .c-table.fixed-header tbody { overflow-y: scroll; } .c-table.fixed-header caption, .c-table.fixed-header thead, .c-table.fixed-header tfoot { flex-grow: 0; flex-shrink: 0; } .c-table.fixed-header thead::-webkit-scrollbar { width: auto; } .c-table.fixed-header thead th, .c-table.fixed-header tbody td { word-break: break-all; flex-grow: 1; flex-shrink: 1; } .c-table.fixed-header thead th.selector, .c-table.fixed-header tbody td.selector, .c-table.fixed-header thead th.actions, .c-table.fixed-header tbody td.actions { flex-grow: 0; flex-shrink: 0; } .c-table.fixed-header tbody td { display: flex; align-items: center; } .c-table.fixed-header tbody td.selector, .c-table.fixed-header tbody td.actions { justify-content: center; flex-shrink: 0; } .c-table.fixed-header tbody td.right { justify-content: flex-end; } .c-table.fixed-header tbody td.center { justify-content: center; } .c-table.fixed-header tfoot tr td { width: 100%; } .c-table.column.fixed-header caption, .c-table.column.fixed-header thead, .c-table.column.fixed-header tbody { width: auto; height: 100%; } .c-table.column.fixed-header thead, .c-table.column.fixed-header tbody { overflow-x: scroll; overflow-y: auto; } .c-table.column.fixed-header td, .c-table.column.fixed-header th { flex-grow: 0; flex-shrink: 0; } .c-table.border-inner-vertical:not(.column) td:not(:last-child), .c-table.border-inner-vertical:not(.column) th:not(:last-child) { border-right-width: 1px; } .c-table.border-inner-vertical.column tbody tr:not(:last-child) td { border-right-width: 1px; } .c-table.border-inner-horizontal:not(.column) tbody tr:not(:last-child) td { border-bottom-width: 1px; } .c-table.border-inner-horizontal.column td:not(:last-child), .c-table.border-inner-horizontal.column th:not(:last-child) { border-bottom-width: 1px; } .c-table.border-inner:not(.column) td:not(:last-child), .c-table.border-inner:not(.column) th:not(:last-child) { border-right-width: 1px; } .c-table.border-inner.column tbody tr:not(:last-child) td { border-right-width: 1px; } .c-table.border-inner:not(.column) tbody tr:not(:last-child) td { border-bottom-width: 1px; } .c-table.border-inner.column td:not(:last-child), .c-table.border-inner.column th:not(:last-child) { border-bottom-width: 1px; } .c-table.border-outer thead, .c-table.border-outer tbody { border-color: #cbcbcb; border-style: solid; } .c-table.border-outer thead { border-width: 1px 1px 1px 1px; } .c-table.border-outer tbody { border-width: 0 1px 1px 1px; } .c-table.border-outer.column tbody { border-width: 1px 1px 1px 0px; } .c-table.border-all thead, .c-table.border-all tbody { border-color: #cbcbcb; border-style: solid; } .c-table.border-all thead { border-width: 1px 1px 1px 1px; } .c-table.border-all tbody { border-width: 0 1px 1px 1px; } .c-table.border-all.column tbody { border-width: 1px 1px 1px 0px; } .c-table.border-all:not(.column) td:not(:last-child), .c-table.border-all:not(.column) th:not(:last-child) { border-right-width: 1px; } .c-table.border-all.column tbody tr:not(:last-child) td { border-right-width: 1px; } .c-table.border-all:not(.column) tbody tr:not(:last-child) td { border-bottom-width: 1px; } .c-table.border-all.column td:not(:last-child), .c-table.border-all.column th:not(:last-child) { border-bottom-width: 1px; } .c-grid.c-table tbody tr.selected, .c-grid-row.c-table tbody tr.selected, .c-grid.c-table tbody tr.selected td > *, .c-grid-row.c-table tbody tr.selected td > * { background-color: #F7F4CA !important; } .c-grid.c-table *[contenteditable], .c-grid-row.c-table tr.selected *[contenteditable] { font: small -moz-fixed, sans-serif; font: -webkit-small-control, sans-serif; height: 100%; background-color: #ffffff; text-align: start; white-space: pre-wrap; } .c-grid.c-table select[disabled], .c-grid-row.c-table tr.selected select[disabled] { color: inherit; } .c-grid.c-table *[contenteditable], .c-grid-row.c-table tr.selected *[contenteditable], .c-grid.c-table input[type='text'], .c-grid-row.c-table tr.selected input[type='text'], .c-grid.c-table input[type='number'], .c-grid-row.c-table tr.selected input[type='number'], .c-grid.c-table select, .c-grid-row.c-table tr.selected select { width: 100%; } .c-grid.c-table *[contenteditable]:not(:focus), .c-grid-row.c-table tr.selected *[contenteditable]:not(:focus), .c-grid.c-table input[type='text']:not(:focus), .c-grid-row.c-table tr.selected input[type='text']:not(:focus), .c-grid.c-table input[type='number']:not(:focus), .c-grid-row.c-table tr.selected input[type='number']:not(:focus), .c-grid.c-table select:not(:focus), .c-grid-row.c-table tr.selected select:not(:focus) { border-color: #ffffff; } .c-chart .c-chart-table { position: relative; } .c-chart .c-chart-table th, .c-chart .c-chart-table td { flex-basis: 0; } .c-chart-dashboard { background-color: #3e2f2f; } .c-chart-dashboard > .widgets .c-chart { height: 100%; width: 100%; background-color: #ffffff; } .c-chart-dashboard > .filter > span { margin-right: 3px; padding: 0 5px; background-color: #eef4f7; border: 1px solid #46b6ef; border-radius: 4px; } .c-chart-dashboard > .filter > span > .value { margin-left: 3px; } .c-chart-dashboard > .filter > span.active { background-color: #686a6b; color: #ffffff; border-color: #53585f; } .c-chart { display: flex; flex-direction: column; } .c-chart > header { border-bottom: 1px solid #ada4a4; padding: 3px 6px; } .c-chart > .c-chart-split { display: flex; flex-grow: 1; } .c-chart > .c-chart-split > * { flex-grow: 1; flex-shrink: 1; flex-basis: 0; overflow: hidden; } .c-chart > :not(header):not(.c-chart-split) { flex-grow: 1; flex-shrink: 1; overflow: hidden; } .c-chart.column > .c-chart-split { flex-direction: column; } .flatpickr-calendar { opacity: 0; display: none; text-align: center; visibility: hidden; padding: 0; -webkit-animation: none; animation: none; direction: ltr; border: 0; font-size: 14px; line-height: 24px; border-radius: 5px; position: absolute; width: 307.875px; -webkit-box-sizing: border-box; box-sizing: border-box; -ms-touch-action: manipulation; touch-action: manipulation; background: #fff; -webkit-box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0, 0, 0, 0.08); box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0, 0, 0, 0.08); } .flatpickr-calendar.open, .flatpickr-calendar.inline { opacity: 1; max-height: 640px; visibility: visible; } .flatpickr-calendar.open { display: inline-block; z-index: 99999; } .flatpickr-calendar.animate.open { -webkit-animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1); animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1); } .flatpickr-calendar.inline { display: block; position: relative; top: 2px; } .flatpickr-calendar.static { position: absolute; top: calc(102%); } .flatpickr-calendar.static.open { z-index: 999; display: block; } .flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7) { -webkit-box-shadow: none !important; box-shadow: none !important; } .flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) { -webkit-box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6; box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6; } .flatpickr-calendar .hasWeeks .dayContainer, .flatpickr-calendar .hasTime .dayContainer { border-bottom: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .flatpickr-calendar .hasWeeks .dayContainer { border-left: 0; } .flatpickr-calendar.hasTime .flatpickr-time { height: 40px; border-top: 1px solid #e6e6e6; } .flatpickr-calendar.noCalendar.hasTime .flatpickr-time { height: auto; } .flatpickr-calendar:before, .flatpickr-calendar:after { position: absolute; display: block; pointer-events: none; border: solid transparent; content: ''; height: 0; width: 0; left: 22px; } .flatpickr-calendar.rightMost:before, .flatpickr-calendar.arrowRight:before, .flatpickr-calendar.rightMost:after, .flatpickr-calendar.arrowRight:after { left: auto; right: 22px; } .flatpickr-calendar.arrowCenter:before, .flatpickr-calendar.arrowCenter:after { left: 50%; right: 50%; } .flatpickr-calendar:before { border-width: 5px; margin: 0 -5px; } .flatpickr-calendar:after { border-width: 4px; margin: 0 -4px; } .flatpickr-calendar.arrowTop:before, .flatpickr-calendar.arrowTop:after { bottom: 100%; } .flatpickr-calendar.arrowTop:before { border-bottom-color: #e6e6e6; } .flatpickr-calendar.arrowTop:after { border-bottom-color: #fff; } .flatpickr-calendar.arrowBottom:before, .flatpickr-calendar.arrowBottom:after { top: 100%; } .flatpickr-calendar.arrowBottom:before { border-top-color: #e6e6e6; } .flatpickr-calendar.arrowBottom:after { border-top-color: #fff; } .flatpickr-calendar:focus { outline: 0; } .flatpickr-calendar .flatpickr-time .numInputWrapper input { width: 100%; } .flatpickr-wrapper { position: relative; display: inline-block; } .flatpickr-months { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .flatpickr-months .flatpickr-month { background: transparent; color: rgba(0, 0, 0, 0.9); fill: rgba(0, 0, 0, 0.9); height: 34px; line-height: 1; text-align: center; position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; overflow: hidden; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { text-decoration: none; cursor: pointer; position: absolute; top: 0; height: 34px; padding: 10px; z-index: 3; color: rgba(0, 0, 0, 0.9); fill: rgba(0, 0, 0, 0.9); } .flatpickr-months .flatpickr-prev-month.flatpickr-disabled, .flatpickr-months .flatpickr-next-month.flatpickr-disabled { display: none; } .flatpickr-months .flatpickr-prev-month i, .flatpickr-months .flatpickr-next-month i { position: relative; } .flatpickr-months .flatpickr-prev-month.flatpickr-prev-month, .flatpickr-months .flatpickr-next-month.flatpickr-prev-month { /* /*rtl:begin:ignore*/ left: 0 /* /*rtl:end:ignore*/; } /* /*rtl:begin:ignore*/ /* /*rtl:end:ignore*/ .flatpickr-months .flatpickr-prev-month.flatpickr-next-month, .flatpickr-months .flatpickr-next-month.flatpickr-next-month { /* /*rtl:begin:ignore*/ right: 0 /* /*rtl:end:ignore*/; } /* /*rtl:begin:ignore*/ /* /*rtl:end:ignore*/ .flatpickr-months .flatpickr-prev-month:hover, .flatpickr-months .flatpickr-next-month:hover { color: #959ea9; } .flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg { fill: #f64747; } .flatpickr-months .flatpickr-prev-month svg, .flatpickr-months .flatpickr-next-month svg { width: 14px; height: 14px; } .flatpickr-months .flatpickr-prev-month svg path, .flatpickr-months .flatpickr-next-month svg path { -webkit-transition: fill 0.1s; transition: fill 0.1s; fill: inherit; } .numInputWrapper { position: relative; height: auto; } .numInputWrapper input, .numInputWrapper span { display: inline-block; } .numInputWrapper input { width: 100%; } .numInputWrapper input::-ms-clear { display: none; } .numInputWrapper input::-webkit-outer-spin-button, .numInputWrapper input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; } .numInputWrapper span { position: absolute; right: 0; width: 14px; padding: 0 4px 0 2px; height: 50%; line-height: 50%; opacity: 0; cursor: pointer; border: 1px solid rgba(57, 57, 57, 0.15); -webkit-box-sizing: border-box; box-sizing: border-box; } .numInputWrapper span:hover { background: rgba(0, 0, 0, 0.1); } .numInputWrapper span:active { background: rgba(0, 0, 0, 0.2); } .numInputWrapper span:after { display: block; content: ""; position: absolute; } .numInputWrapper span.arrowUp { top: 0; border-bottom: 0; } .numInputWrapper span.arrowUp:after { border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 4px solid rgba(57, 57, 57, 0.6); top: 26%; } .numInputWrapper span.arrowDown { top: 50%; } .numInputWrapper span.arrowDown:after { border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid rgba(57, 57, 57, 0.6); top: 40%; } .numInputWrapper span svg { width: inherit; height: auto; } .numInputWrapper span svg path { fill: rgba(0, 0, 0, 0.5); } .numInputWrapper:hover { background: rgba(0, 0, 0, 0.05); } .numInputWrapper:hover span { opacity: 1; } .flatpickr-current-month { font-size: 135%; font-weight: 300; color: inherit; position: absolute; width: 75%; left: 12.5%; padding: 7.48px 0 0 0; line-height: 1; height: 34px; display: inline-block; text-align: center; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .flatpickr-current-month span.cur-month { font-family: inherit; font-weight: 700; color: inherit; display: inline-block; margin-left: 0.5ch; padding: 0; } .flatpickr-current-month span.cur-month:hover { background: rgba(0, 0, 0, 0.05); } .flatpickr-current-month .numInputWrapper { width: 6ch; width: 7ch\0; display: inline-block; } .flatpickr-current-month .numInputWrapper span.arrowUp:after { border-bottom-color: rgba(0, 0, 0, 0.9); } .flatpickr-current-month .numInputWrapper span.arrowDown:after { border-top-color: rgba(0, 0, 0, 0.9); } .flatpickr-current-month input.cur-year { background: transparent; -webkit-box-sizing: border-box; box-sizing: border-box; color: inherit; cursor: text; padding: 0 0 0 0.5ch; margin: 0; display: inline-block; font-size: inherit; font-family: inherit; font-weight: 300; line-height: inherit; height: auto; border: 0; border-radius: 0; vertical-align: initial; -webkit-appearance: textfield; -moz-appearance: textfield; appearance: textfield; } .flatpickr-current-month input.cur-year:focus { outline: 0; } .flatpickr-current-month input.cur-year[disabled], .flatpickr-current-month input.cur-year[disabled]:hover { font-size: 100%; color: rgba(0, 0, 0, 0.5); background: transparent; pointer-events: none; } .flatpickr-current-month .flatpickr-monthDropdown-months { appearance: menulist; background: transparent; border: none; border-radius: 0; box-sizing: border-box; color: inherit; cursor: pointer; font-size: inherit; font-family: inherit; font-weight: 300; height: auto; line-height: inherit; margin: -1px 0 0 0; outline: none; padding: 0 0 0 0.5ch; position: relative; vertical-align: initial; -webkit-box-sizing: border-box; -webkit-appearance: menulist; -moz-appearance: menulist; width: auto; } .flatpickr-current-month .flatpickr-monthDropdown-months:focus, .flatpickr-current-month .flatpickr-monthDropdown-months:active { outline: none; } .flatpickr-current-month .flatpickr-monthDropdown-months:hover { background: rgba(0, 0, 0, 0.05); } .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month { background-color: transparent; outline: none; padding: 0; } .flatpickr-weekdays { background: transparent; text-align: center; overflow: hidden; width: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: 28px; } .flatpickr-weekdays .flatpickr-weekdaycontainer { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } span.flatpickr-weekday { cursor: default; font-size: 90%; background: transparent; color: rgba(0, 0, 0, 0.54); line-height: 1; margin: 0; text-align: center; display: block; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; font-weight: bolder; } .dayContainer, .flatpickr-weeks { padding: 1px 0 0 0; } .flatpickr-days { position: relative; overflow: hidden; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; width: 307.875px; } .flatpickr-days:focus { outline: 0; } .dayContainer { padding: 0; outline: 0; text-align: left; width: 307.875px; min-width: 307.875px; max-width: 307.875px; -webkit-box-sizing: border-box; box-sizing: border-box; display: inline-block; display: -ms-flexbox; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-wrap: wrap; -ms-flex-pack: justify; -webkit-justify-content: space-around; justify-content: space-around; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } .dayContainer + .dayContainer { -webkit-box-shadow: -1px 0 0 #e6e6e6; box-shadow: -1px 0 0 #e6e6e6; } .flatpickr-day { background: none; border: 1px solid transparent; border-radius: 150px; -webkit-box-sizing: border-box; box-sizing: border-box; color: #393939; cursor: pointer; font-weight: 400; width: 14.2857143%; -webkit-flex-basis: 14.2857143%; -ms-flex-preferred-size: 14.2857143%; flex-basis: 14.2857143%; max-width: 39px; height: 39px; line-height: 39px; margin: 0; display: inline-block; position: relative; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; text-align: center; } .flatpickr-day.inRange, .flatpickr-day.prevMonthDay.inRange, .flatpickr-day.nextMonthDay.inRange, .flatpickr-day.today.inRange, .flatpickr-day.prevMonthDay.today.inRange, .flatpickr-day.nextMonthDay.today.inRange, .flatpickr-day:hover, .flatpickr-day.prevMonthDay:hover, .flatpickr-day.nextMonthDay:hover, .flatpickr-day:focus, .flatpickr-day.prevMonthDay:focus, .flatpickr-day.nextMonthDay:focus { cursor: pointer; outline: 0; background: #e6e6e6; border-color: #e6e6e6; } .flatpickr-day.today { border-color: #959ea9; } .flatpickr-day.today:hover, .flatpickr-day.today:focus { border-color: #959ea9; background: #959ea9; color: #fff; } .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: #569ff7; -webkit-box-shadow: none; box-shadow: none; color: #fff; border-color: #569ff7; } .flatpickr-day.selected.startRange, .flatpickr-day.startRange.startRange, .flatpickr-day.endRange.startRange { border-radius: 50px 0 0 50px; } .flatpickr-day.selected.endRange, .flatpickr-day.startRange.endRange, .flatpickr-day.endRange.endRange { border-radius: 0 50px 50px 0; } .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) { -webkit-box-shadow: -10px 0 0 #569ff7; box-shadow: -10px 0 0 #569ff7; } .flatpickr-day.selected.startRange.endRange, .flatpickr-day.startRange.startRange.endRange, .flatpickr-day.endRange.startRange.endRange { border-radius: 50px; } .flatpickr-day.inRange { border-radius: 0; -webkit-box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6; box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6; } .flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay, .flatpickr-day.notAllowed, .flatpickr-day.notAllowed.prevMonthDay, .flatpickr-day.notAllowed.nextMonthDay { color: rgba(57, 57, 57, 0.3); background: transparent; border-color: transparent; cursor: default; } .flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover { cursor: not-allowed; color: rgba(57, 57, 57, 0.1); } .flatpickr-day.week.selected { border-radius: 0; -webkit-box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7; box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7; } .flatpickr-day.hidden { visibility: hidden; } .rangeMode .flatpickr-day { margin-top: 1px; } .flatpickr-weekwrapper { float: left; } .flatpickr-weekwrapper .flatpickr-weeks { padding: 0 12px; -webkit-box-shadow: 1px 0 0 #e6e6e6; box-shadow: 1px 0 0 #e6e6e6; } .flatpickr-weekwrapper .flatpickr-weekday { float: none; width: 100%; line-height: 28px; } .flatpickr-weekwrapper span.flatpickr-day, .flatpickr-weekwrapper span.flatpickr-day:hover { display: block; width: 100%; max-width: none; color: rgba(57, 57, 57, 0.3); background: transparent; cursor: default; border: none; } .flatpickr-innerContainer { display: block; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; } .flatpickr-rContainer { display: inline-block; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; } .flatpickr-time { text-align: center; outline: 0; height: 0; line-height: 40px; max-height: 40px; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; display: flex; } .flatpickr-time:after { content: ""; display: table; clear: both; } .flatpickr-time .numInputWrapper { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; width: 40%; height: 40px; float: left; } .flatpickr-time .numInputWrapper span.arrowUp:after { border-bottom-color: #393939; } .flatpickr-time .numInputWrapper span.arrowDown:after { border-top-color: #393939; } .flatpickr-time.hasSeconds .numInputWrapper { width: 26%; } .flatpickr-time.time24hr .numInputWrapper { width: 49%; } .flatpickr-time input { background: transparent; -webkit-box-shadow: none; box-shadow: none; border: 0; border-radius: 0; text-align: center; margin: 0; padding: 0; height: inherit; line-height: inherit; color: #393939; font-size: 14px; position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-appearance: textfield; -moz-appearance: textfield; appearance: textfield; } .flatpickr-time input.flatpickr-hour { font-weight: bold; } .flatpickr-time input.flatpickr-minute, .flatpickr-time input.flatpickr-second { font-weight: 400; } .flatpickr-time input:focus { outline: 0; border: 0; } .flatpickr-time .flatpickr-time-separator, .flatpickr-time .flatpickr-am-pm { height: inherit; float: left; line-height: inherit; color: #393939; font-weight: bold; width: 2%; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; } .flatpickr-time .flatpickr-am-pm { outline: 0; width: 18%; cursor: pointer; text-align: center; font-weight: 400; } .flatpickr-time input:hover, .flatpickr-time .flatpickr-am-pm:hover, .flatpickr-time input:focus, .flatpickr-time .flatpickr-am-pm:focus { background: #eee; } .flatpickr-input[readonly] { cursor: pointer; } @-webkit-keyframes fpFadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fpFadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } /*! Pure v1.0.1 Copyright 2013 Yahoo! Licensed under the BSD License. https://github.com/pure-css/pure/blob/master/LICENSE.md */ /*! normalize.css v^3.0 | MIT License | git.io/normalize Copyright (c) Nicolas Gallagher and Jonathan Neal */ /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0; } audio, canvas, progress, video { display: inline-block; vertical-align: baseline; } audio:not([controls]) { display: none; height: 0; } [hidden], template { display: none; } a { background-color: transparent; } a:active, a:hover { outline: 0; } abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: 700; } dfn { font-style: italic; } h1 { font-size: 2em; margin: 0.67em 0; } mark { background: #ff0; color: #000; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } img { border: 0; } svg:not(:root) { overflow: hidden; } figure { margin: 1em 40px; } hr { -webkit-box-sizing: content-box; box-sizing: content-box; height: 0; } pre { overflow: auto; } code, kbd, pre, samp { font-family: monospace,monospace; font-size: 1em; } button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; } button { overflow: visible; } button, select { text-transform: none; } button, html input[type=button], input[type=reset], input[type=submit] { -webkit-appearance: button; cursor: pointer; } button[disabled], html input[disabled] { cursor: default; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } input { line-height: normal; } input[type=checkbox], input[type=radio], .c-checkbox { margin: 0 5px 0 0; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { height: auto; } input[type=search] { -webkit-appearance: textfield; -webkit-box-sizing: content-box; box-sizing: content-box; } input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration { -webkit-appearance: none; } fieldset { border: 1px solid silver; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } legend { border: 0; padding: 0; } textarea { overflow: auto; } optgroup { font-weight: 700; } table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } .hidden, [hidden] { display: none !important; } .pure-img { max-width: 100%; height: auto; display: block; } .pure-g { letter-spacing: -0.31em; text-rendering: optimizespeed; font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-align-content: flex-start; -ms-flex-line-pack: start; align-content: flex-start; } @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { table .pure-g { display: block; } } .opera-only :-o-prefocus, .pure-g { word-spacing: -0.43em; } .pure-u { display: inline-block; zoom: 1; letter-spacing: normal; word-spacing: normal; vertical-align: top; text-rendering: auto; } .pure-g [class*=pure-u] { font-family: sans-serif; } .pure-u-1, .pure-u-1-1, .pure-u-1-12, .pure-u-1-2, .pure-u-1-24, .pure-u-1-3, .pure-u-1-4, .pure-u-1-5, .pure-u-1-6, .pure-u-1-8, .pure-u-10-24, .pure-u-11-12, .pure-u-11-24, .pure-u-12-24, .pure-u-13-24, .pure-u-14-24, .pure-u-15-24, .pure-u-16-24, .pure-u-17-24, .pure-u-18-24, .pure-u-19-24, .pure-u-2-24, .pure-u-2-3, .pure-u-2-5, .pure-u-20-24, .pure-u-21-24, .pure-u-22-24, .pure-u-23-24, .pure-u-24-24, .pure-u-3-24, .pure-u-3-4, .pure-u-3-5, .pure-u-3-8, .pure-u-4-24, .pure-u-4-5, .pure-u-5-12, .pure-u-5-24, .pure-u-5-5, .pure-u-5-6, .pure-u-5-8, .pure-u-6-24, .pure-u-7-12, .pure-u-7-24, .pure-u-7-8, .pure-u-8-24, .pure-u-9-24 { display: inline-block; zoom: 1; letter-spacing: normal; word-spacing: normal; vertical-align: top; text-rendering: auto; } .pure-u-1-24 { width: 4.1667%; } .pure-u-1-12, .pure-u-2-24 { width: 8.3333%; } .pure-u-1-8, .pure-u-3-24 { width: 12.5%; } .pure-u-1-6, .pure-u-4-24 { width: 16.6667%; } .pure-u-1-5 { width: 20%; } .pure-u-5-24 { width: 20.8333%; } .pure-u-1-4, .pure-u-6-24 { width: 25%; } .pure-u-7-24 { width: 29.1667%; } .pure-u-1-3, .pure-u-8-24 { width: 33.3333%; } .pure-u-3-8, .pure-u-9-24 { width: 37.5%; } .pure-u-2-5 { width: 40%; } .pure-u-10-24, .pure-u-5-12 { width: 41.6667%; } .pure-u-11-24 { width: 45.8333%; } .pure-u-1-2, .pure-u-12-24 { width: 50%; } .pure-u-13-24 { width: 54.1667%; } .pure-u-14-24, .pure-u-7-12 { width: 58.3333%; } .pure-u-3-5 { width: 60%; } .pure-u-15-24, .pure-u-5-8 { width: 62.5%; } .pure-u-16-24, .pure-u-2-3 { width: 66.6667%; } .pure-u-17-24 { width: 70.8333%; } .pure-u-18-24, .pure-u-3-4 { width: 75%; } .pure-u-19-24 { width: 79.1667%; } .pure-u-4-5 { width: 80%; } .pure-u-20-24, .pure-u-5-6 { width: 83.3333%; } .pure-u-21-24, .pure-u-7-8 { width: 87.5%; } .pure-u-11-12, .pure-u-22-24 { width: 91.6667%; } .pure-u-23-24 { width: 95.8333%; } .pure-u-1, .pure-u-1-1, .pure-u-24-24, .pure-u-5-5 { width: 100%; } .pure-button { border-radius: 4px; padding: .3em 2em; border: 1px solid #999999; background-color: #ffffff; font-family: inherit; font-size: 100%; color: rgba(0, 0, 0, 0.8); text-decoration: none; } .pure-button.btn-ok { background-color: #3399cc; color: white; } .pure-button::-moz-focus-inner { padding: 0; border: 0; } .pure-button-group { letter-spacing: -0.31em; text-rendering: optimizespeed; } .opera-only :-o-prefocus, .pure-button-group { word-spacing: -0.43em; } .pure-button-group .pure-button { letter-spacing: normal; word-spacing: normal; vertical-align: top; text-rendering: auto; } .pure-button-hover, .pure-button:focus, .pure-button:hover { background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(40%, rgba(0, 0, 0, 0.05)), to(rgba(0, 0, 0, 0.1))); background-image: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1)); background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1)); } .pure-button:focus { outline: 0; } .pure-button-active, .pure-button:active { -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset, 0 0 6px rgba(0, 0, 0, 0.2) inset; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset, 0 0 6px rgba(0, 0, 0, 0.2) inset; border-color: #000; } .pure-button-disabled, .pure-button-disabled:active, .pure-button-disabled:focus, .pure-button-disabled:hover, .pure-button[disabled] { border: none; background-image: none; opacity: 0.4; cursor: not-allowed; -webkit-box-shadow: none; box-shadow: none; pointer-events: none; } .pure-button-hidden { display: none; } .pure-button-primary, .pure-button-selected, a.pure-button-primary, a.pure-button-selected { background-color: #0078e7; color: #fff; } .pure-button-group .pure-button { margin: 0; border-radius: 0; border-right: 1px solid #111; border-right: 1px solid rgba(0, 0, 0, 0.2); } .pure-button-group .pure-button:first-child { border-top-left-radius: 2px; border-bottom-left-radius: 2px; } .pure-button-group .pure-button:last-child { border-top-right-radius: 2px; border-bottom-right-radius: 2px; border-right: none; } .pure-form input[type=color], .pure-form input[type=date], .pure-form input[type=datetime-local], .pure-form input[type=datetime], .pure-form input[type=email], .pure-form input[type=month], .pure-form input[type=number], .pure-form input[type=password], .pure-form input[type=search], .pure-form input[type=tel], .pure-form input[type=text], .pure-form input[type=time], .pure-form input[type=url], .pure-form input[type=week], .pure-form select, .pure-form textarea { border: 1px solid #a9a9a9; box-shadow: none; padding: 5px 7px; } .pure-form .c-date-picker input { color: #333; font-size: 0.9em; } .pure-form input:not([type]) { padding: 0.5em 0.6em; display: inline-block; border: 1px solid #ccc; -webkit-box-shadow: inset 0 1px 3px #ddd; box-shadow: inset 0 1px 3px #ddd; border-radius: 4px; -webkit-box-sizing: border-box; box-sizing: border-box; } .pure-form input[type=color] { padding: 0.2em 0.5em; } .pure-form input[type='number'].invalid, .pure-form input[type='text'].invalid, .pure-form input[type='password'].invalid, .pure-form select.invalid, .pure-form textarea.invalid, .pure-form input[type='number']:invalid, .pure-form input[type='text']:invalid, .pure-form input[type='password']:invalid, .pure-form select:invalid, .pure-form textarea:invalid { border-color: #ff0000 !important; border-width: 1px !important; } .pure-form input[type='number'].invalid, .pure-form input[type='text'].invalid, .pure-form input[type='password'].invalid, .pure-form textarea.invalid, .pure-form input[type='number']:invalid, .pure-form input[type='text']:invalid, .pure-form input[type='password']:invalid, .pure-form textarea:invalid { color: #ff0000 !important; padding-left: 4px; padding-right: 4px; } .pure-form input[type=color]:focus, .pure-form input[type=date]:focus, .pure-form input[type=datetime-local]:focus, .pure-form input[type=datetime]:focus, .pure-form input[type=email]:focus, .pure-form input[type=month]:focus, .pure-form input[type=number]:focus, .pure-form input[type=password]:focus, .pure-form input[type=search]:focus, .pure-form input[type=tel]:focus, .pure-form input[type=text]:focus, .pure-form input[type=time]:focus, .pure-form input[type=url]:focus, .pure-form input[type=week]:focus, .pure-form select:focus, .pure-form textarea:focus { outline: 0; } .pure-form input:not([type]):focus { outline: 0; } .pure-form .pure-checkbox, .pure-form .pure-radio { margin: 0.5em 0; display: block; } .pure-form input[type=color][disabled], .pure-form input[type=date][disabled], .pure-form input[type=datetime-local][disabled], .pure-form input[type=datetime][disabled], .pure-form input[type=email][disabled], .pure-form input[type=month][disabled], .pure-form input[type=number][disabled], .pure-form input[type=password][disabled], .pure-form input[type=search][disabled], .pure-form input[type=tel][disabled], .pure-form input[type=text][disabled], .pure-form input[type=time][disabled], .pure-form input[type=url][disabled], .pure-form input[type=week][disabled], .pure-form select[disabled], .pure-form textarea[disabled] { cursor: not-allowed; background-color: #eaeded; color: #cad2d3; } .pure-form input:not([type])[disabled] { cursor: not-allowed; background-color: #eaeded; color: #cad2d3; } .pure-form input[readonly], .pure-form select[readonly], .pure-form textarea[readonly] { background-color: #eee; color: #777; border-color: #ccc; } .pure-form input:focus:invalid, .pure-form select:focus:invalid, .pure-form textarea:focus:invalid { color: #b94a48; border-color: #e9322d; } .pure-form input[type=checkbox]:focus:invalid:focus, .pure-form input[type=file]:focus:invalid:focus, .pure-form input[type=radio]:focus:invalid:focus { outline-color: #e9322d; } .pure-form select { height: auto; } .pure-form select[multiple] { height: auto; } .pure-form label { margin: 0.5em 0 0.2em; } .pure-form fieldset { margin: 0; padding: 0.35em 0 0.75em; border: 0; } .pure-form legend { display: block; width: 100%; padding: 0.3em 0; margin-bottom: 0.3em; color: #333; border-bottom: 1px solid #e5e5e5; } .pure-form-stacked input[type=color], .pure-form-stacked input[type=date], .pure-form-stacked input[type=datetime-local], .pure-form-stacked input[type=datetime], .pure-form-stacked input[type=email], .pure-form-stacked input[type=file], .pure-form-stacked input[type=month], .pure-form-stacked input[type=number], .pure-form-stacked input[type=password], .pure-form-stacked input[type=search], .pure-form-stacked input[type=tel], .pure-form-stacked input[type=text], .pure-form-stacked input[type=time], .pure-form-stacked input[type=url], .pure-form-stacked input[type=week], .pure-form-stacked label, .pure-form-stacked select, .pure-form-stacked textarea { display: block; margin: 0.25em 0; } .pure-form-stacked input:not([type]) { display: block; margin: 0.25em 0; } .pure-form-aligned .pure-help-inline, .pure-form-aligned input, .pure-form-aligned select, .pure-form-aligned textarea, .pure-form-message-inline { display: inline-block; vertical-align: middle; } .pure-form-aligned textarea { vertical-align: top; } .pure-form-aligned .pure-control-group { margin-bottom: 0.5em; } .pure-form-aligned .pure-controls { margin: 1.5em 0 0 11em; } .pure-form .pure-input-rounded, .pure-form input.pure-input-rounded { border-radius: 2em; padding: 0.5em 1em; } .pure-form .pure-group fieldset { margin-bottom: 10px; } .pure-form .pure-group input, .pure-form .pure-group textarea { display: block; padding: 10px; margin: 0 0 -1px; border-radius: 0; position: relative; top: -1px; } .pure-form .pure-group input:focus, .pure-form .pure-group textarea:focus { z-index: 3; } .pure-form .pure-group input:first-child, .pure-form .pure-group textarea:first-child { top: 1px; border-radius: 4px 4px 0 0; margin: 0; } .pure-form .pure-group input:first-child:last-child, .pure-form .pure-group textarea:first-child:last-child { top: 1px; border-radius: 4px; margin: 0; } .pure-form .pure-group input:last-child, .pure-form .pure-group textarea:last-child { top: -2px; border-radius: 0 0 4px 4px; margin: 0; } .pure-form .pure-group button { margin: 0.35em 0; } .pure-form .pure-input-1 { width: 100%; } .pure-form .pure-input-3-4 { width: 75%; } .pure-form .pure-input-2-3 { width: 66%; } .pure-form .pure-input-1-2 { width: 50%; } .pure-form .pure-input-1-3 { width: 33%; } .pure-form .pure-input-1-4 { width: 25%; } .pure-form .pure-help-inline, .pure-form-message-inline { display: inline-block; padding-left: 0.3em; color: #666; vertical-align: middle; font-size: 0.875em; } .pure-form-message { display: block; color: #666; font-size: 0.875em; } @media only screen and (max-width: 480px) { .pure-form button[type=submit] { margin: 0.7em 0 0; } .pure-form input:not([type]), .pure-form input[type=color], .pure-form input[type=date], .pure-form input[type=datetime-local], .pure-form input[type=datetime], .pure-form input[type=email], .pure-form input[type=month], .pure-form input[type=number], .pure-form input[type=password], .pure-form input[type=search], .pure-form input[type=tel], .pure-form input[type=text], .pure-form input[type=time], .pure-form input[type=url], .pure-form input[type=week], .pure-form label { margin-bottom: 0.3em; display: block; } .pure-group input:not([type]), .pure-group input[type=color], .pure-group input[type=date], .pure-group input[type=datetime-local], .pure-group input[type=datetime], .pure-group input[type=email], .pure-group input[type=month], .pure-group input[type=number], .pure-group input[type=password], .pure-group input[type=search], .pure-group input[type=tel], .pure-group input[type=text], .pure-group input[type=time], .pure-group input[type=url], .pure-group input[type=week] { margin-bottom: 0; } .pure-form-aligned .pure-control-group label { margin-bottom: 0.3em; text-align: left; display: block; width: 100%; } .pure-form-aligned .pure-controls { margin: 1.5em 0 0 0; } .pure-form .pure-help-inline, .pure-form-message, .pure-form-message-inline { display: block; font-size: 0.75em; padding: 0.2em 0 0.8em; } } .pure-menu { -webkit-box-sizing: border-box; box-sizing: border-box; } .pure-menu-fixed { position: fixed; left: 0; top: 0; z-index: 3; } .pure-menu-item, .pure-menu-list { position: relative; } .pure-menu-list { list-style: none; margin: 0; padding: 0; } .pure-menu-item { padding: 0; margin: 0; height: 100%; } .pure-menu-heading, .pure-menu-link { display: block; text-decoration: none; white-space: nowrap; } .pure-menu-horizontal { width: 100%; white-space: nowrap; } .pure-menu-horizontal .pure-menu-list { display: inline-block; } .pure-menu-horizontal .pure-menu-heading, .pure-menu-horizontal .pure-menu-item, .pure-menu-horizontal .pure-menu-separator { display: inline-block; zoom: 1; vertical-align: middle; } .pure-menu-item .pure-menu-item { display: block; } .pure-menu-children { display: none; position: absolute; left: 100%; top: 0; margin: 0; padding: 0; z-index: 3; } .pure-menu-horizontal .pure-menu-children { left: 0; top: auto; width: inherit; } .pure-menu-active > .pure-menu-children, .pure-menu-allow-hover:hover > .pure-menu-children { display: block; position: absolute; } .pure-menu-has-children > .pure-menu-link:after { padding-left: 0.5em; content: "\25B8"; font-size: small; } .pure-menu-horizontal .pure-menu-has-children > .pure-menu-link:after { content: "\25BE"; } .pure-menu-scrollable { overflow-y: scroll; overflow-x: hidden; } .pure-menu-scrollable .pure-menu-list { display: block; } .pure-menu-horizontal.pure-menu-scrollable .pure-menu-list { display: inline-block; } .pure-menu-horizontal.pure-menu-scrollable { white-space: nowrap; overflow-y: hidden; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 0.5em 0; } .pure-menu-horizontal .pure-menu-children .pure-menu-separator, .pure-menu-separator { background-color: #ccc; height: 1px; margin: 0.3em 0; } .pure-menu-horizontal .pure-menu-separator { width: 1px; height: 1.3em; margin: 0 0.3em; } .pure-menu-horizontal .pure-menu-children .pure-menu-separator { display: block; width: auto; } .pure-menu-heading { text-transform: uppercase; color: #565d64; } .pure-menu-link { color: #777; } .pure-menu-children { background-color: #fff; } .pure-menu-disabled, .pure-menu-heading, .pure-menu-link { padding: 0.5em 1em; } .pure-menu-disabled { opacity: 0.5; } .pure-menu-disabled .pure-menu-link:hover { background-color: transparent; } .pure-menu-active > .pure-menu-link, .pure-menu-link:focus, .pure-menu-link:hover { background-color: #eee; } .pure-menu-selected > .pure-menu-link, .pure-menu-selected > .pure-menu-link:visited { color: #000; } .pure-table { border-collapse: collapse; border-spacing: 0; empty-cells: show; border: 1px solid #cbcbcb; } .pure-table caption { color: #000; font: italic 85%/1 arial, sans-serif; padding: 1em 0; text-align: center; } .pure-table td, .pure-table th { border-left: 1px solid #cbcbcb; border-width: 0 0 0 1px; font-size: inherit; margin: 0; overflow: visible; padding: 0.5em 1em; } .pure-table thead { background-color: #e0e0e0; color: #000; text-align: left; vertical-align: bottom; } .pure-table td { background-color: transparent; } .pure-table-odd td { background-color: #f2f2f2; } .pure-table-striped tr:nth-child(2n-1) td { background-color: #f2f2f2; } .pure-table-bordered td { border-bottom: 1px solid #cbcbcb; } .pure-table-bordered tbody > tr:last-child > td { border-bottom-width: 0; } .pure-table-horizontal td, .pure-table-horizontal th { border-width: 0 0 1px 0; border-bottom: 1px solid #cbcbcb; } .pure-table-horizontal tbody > tr:last-child > td { border-bottom-width: 0; } /*! Pure v1.0.1 Copyright 2013 Yahoo! Licensed under the BSD License. https://github.com/pure-css/pure/blob/master/LICENSE.md */ @media screen and (min-width: 35.5em) { .pure-u-sm-1, .pure-u-sm-1-1, .pure-u-sm-1-12, .pure-u-sm-1-2, .pure-u-sm-1-24, .pure-u-sm-1-3, .pure-u-sm-1-4, .pure-u-sm-1-5, .pure-u-sm-1-6, .pure-u-sm-1-8, .pure-u-sm-10-24, .pure-u-sm-11-12, .pure-u-sm-11-24, .pure-u-sm-12-24, .pure-u-sm-13-24, .pure-u-sm-14-24, .pure-u-sm-15-24, .pure-u-sm-16-24, .pure-u-sm-17-24, .pure-u-sm-18-24, .pure-u-sm-19-24, .pure-u-sm-2-24, .pure-u-sm-2-3, .pure-u-sm-2-5, .pure-u-sm-20-24, .pure-u-sm-21-24, .pure-u-sm-22-24, .pure-u-sm-23-24, .pure-u-sm-24-24, .pure-u-sm-3-24, .pure-u-sm-3-4, .pure-u-sm-3-5, .pure-u-sm-3-8, .pure-u-sm-4-24, .pure-u-sm-4-5, .pure-u-sm-5-12, .pure-u-sm-5-24, .pure-u-sm-5-5, .pure-u-sm-5-6, .pure-u-sm-5-8, .pure-u-sm-6-24, .pure-u-sm-7-12, .pure-u-sm-7-24, .pure-u-sm-7-8, .pure-u-sm-8-24, .pure-u-sm-9-24 { display: inline-block; zoom: 1; letter-spacing: normal; word-spacing: normal; vertical-align: top; text-rendering: auto; } .pure-u-sm-1-24 { width: 4.1667%; } .pure-u-sm-1-12, .pure-u-sm-2-24 { width: 8.3333%; } .pure-u-sm-1-8, .pure-u-sm-3-24 { width: 12.5%; } .pure-u-sm-1-6, .pure-u-sm-4-24 { width: 16.6667%; } .pure-u-sm-1-5 { width: 20%; } .pure-u-sm-5-24 { width: 20.8333%; } .pure-u-sm-1-4, .pure-u-sm-6-24 { width: 25%; } .pure-u-sm-7-24 { width: 29.1667%; } .pure-u-sm-1-3, .pure-u-sm-8-24 { width: 33.3333%; } .pure-u-sm-3-8, .pure-u-sm-9-24 { width: 37.5%; } .pure-u-sm-2-5 { width: 40%; } .pure-u-sm-10-24, .pure-u-sm-5-12 { width: 41.6667%; } .pure-u-sm-11-24 { width: 45.8333%; } .pure-u-sm-1-2, .pure-u-sm-12-24 { width: 50%; } .pure-u-sm-13-24 { width: 54.1667%; } .pure-u-sm-14-24, .pure-u-sm-7-12 { width: 58.3333%; } .pure-u-sm-3-5 { width: 60%; } .pure-u-sm-15-24, .pure-u-sm-5-8 { width: 62.5%; } .pure-u-sm-16-24, .pure-u-sm-2-3 { width: 66.6667%; } .pure-u-sm-17-24 { width: 70.8333%; } .pure-u-sm-18-24, .pure-u-sm-3-4 { width: 75%; } .pure-u-sm-19-24 { width: 79.1667%; } .pure-u-sm-4-5 { width: 80%; } .pure-u-sm-20-24, .pure-u-sm-5-6 { width: 83.3333%; } .pure-u-sm-21-24, .pure-u-sm-7-8 { width: 87.5%; } .pure-u-sm-11-12, .pure-u-sm-22-24 { width: 91.6667%; } .pure-u-sm-23-24 { width: 95.8333%; } .pure-u-sm-1, .pure-u-sm-1-1, .pure-u-sm-24-24, .pure-u-sm-5-5 { width: 100%; } } @media screen and (min-width: 48em) { .pure-u-md-1, .pure-u-md-1-1, .pure-u-md-1-12, .pure-u-md-1-2, .pure-u-md-1-24, .pure-u-md-1-3, .pure-u-md-1-4, .pure-u-md-1-5, .pure-u-md-1-6, .pure-u-md-1-8, .pure-u-md-10-24, .pure-u-md-11-12, .pure-u-md-11-24, .pure-u-md-12-24, .pure-u-md-13-24, .pure-u-md-14-24, .pure-u-md-15-24, .pure-u-md-16-24, .pure-u-md-17-24, .pure-u-md-18-24, .pure-u-md-19-24, .pure-u-md-2-24, .pure-u-md-2-3, .pure-u-md-2-5, .pure-u-md-20-24, .pure-u-md-21-24, .pure-u-md-22-24, .pure-u-md-23-24, .pure-u-md-24-24, .pure-u-md-3-24, .pure-u-md-3-4, .pure-u-md-3-5, .pure-u-md-3-8, .pure-u-md-4-24, .pure-u-md-4-5, .pure-u-md-5-12, .pure-u-md-5-24, .pure-u-md-5-5, .pure-u-md-5-6, .pure-u-md-5-8, .pure-u-md-6-24, .pure-u-md-7-12, .pure-u-md-7-24, .pure-u-md-7-8, .pure-u-md-8-24, .pure-u-md-9-24 { display: inline-block; zoom: 1; letter-spacing: normal; word-spacing: normal; vertical-align: top; text-rendering: auto; } .pure-u-md-1-24 { width: 4.1667%; } .pure-u-md-1-12, .pure-u-md-2-24 { width: 8.3333%; } .pure-u-md-1-8, .pure-u-md-3-24 { width: 12.5%; } .pure-u-md-1-6, .pure-u-md-4-24 { width: 16.6667%; } .pure-u-md-1-5 { width: 20%; } .pure-u-md-5-24 { width: 20.8333%; } .pure-u-md-1-4, .pure-u-md-6-24 { width: 25%; } .pure-u-md-7-24 { width: 29.1667%; } .pure-u-md-1-3, .pure-u-md-8-24 { width: 33.3333%; } .pure-u-md-3-8, .pure-u-md-9-24 { width: 37.5%; } .pure-u-md-2-5 { width: 40%; } .pure-u-md-10-24, .pure-u-md-5-12 { width: 41.6667%; } .pure-u-md-11-24 { width: 45.8333%; } .pure-u-md-1-2, .pure-u-md-12-24 { width: 50%; } .pure-u-md-13-24 { width: 54.1667%; } .pure-u-md-14-24, .pure-u-md-7-12 { width: 58.3333%; } .pure-u-md-3-5 { width: 60%; } .pure-u-md-15-24, .pure-u-md-5-8 { width: 62.5%; } .pure-u-md-16-24, .pure-u-md-2-3 { width: 66.6667%; } .pure-u-md-17-24 { width: 70.8333%; } .pure-u-md-18-24, .pure-u-md-3-4 { width: 75%; } .pure-u-md-19-24 { width: 79.1667%; } .pure-u-md-4-5 { width: 80%; } .pure-u-md-20-24, .pure-u-md-5-6 { width: 83.3333%; } .pure-u-md-21-24, .pure-u-md-7-8 { width: 87.5%; } .pure-u-md-11-12, .pure-u-md-22-24 { width: 91.6667%; } .pure-u-md-23-24 { width: 95.8333%; } .pure-u-md-1, .pure-u-md-1-1, .pure-u-md-24-24, .pure-u-md-5-5 { width: 100%; } } @media screen and (min-width: 64em) { .pure-u-lg-1, .pure-u-lg-1-1, .pure-u-lg-1-12, .pure-u-lg-1-2, .pure-u-lg-1-24, .pure-u-lg-1-3, .pure-u-lg-1-4, .pure-u-lg-1-5, .pure-u-lg-1-6, .pure-u-lg-1-8, .pure-u-lg-10-24, .pure-u-lg-11-12, .pure-u-lg-11-24, .pure-u-lg-12-24, .pure-u-lg-13-24, .pure-u-lg-14-24, .pure-u-lg-15-24, .pure-u-lg-16-24, .pure-u-lg-17-24, .pure-u-lg-18-24, .pure-u-lg-19-24, .pure-u-lg-2-24, .pure-u-lg-2-3, .pure-u-lg-2-5, .pure-u-lg-20-24, .pure-u-lg-21-24, .pure-u-lg-22-24, .pure-u-lg-23-24, .pure-u-lg-24-24, .pure-u-lg-3-24, .pure-u-lg-3-4, .pure-u-lg-3-5, .pure-u-lg-3-8, .pure-u-lg-4-24, .pure-u-lg-4-5, .pure-u-lg-5-12, .pure-u-lg-5-24, .pure-u-lg-5-5, .pure-u-lg-5-6, .pure-u-lg-5-8, .pure-u-lg-6-24, .pure-u-lg-7-12, .pure-u-lg-7-24, .pure-u-lg-7-8, .pure-u-lg-8-24, .pure-u-lg-9-24 { display: inline-block; zoom: 1; letter-spacing: normal; word-spacing: normal; vertical-align: top; text-rendering: auto; } .pure-u-lg-1-24 { width: 4.1667%; } .pure-u-lg-1-12, .pure-u-lg-2-24 { width: 8.3333%; } .pure-u-lg-1-8, .pure-u-lg-3-24 { width: 12.5%; } .pure-u-lg-1-6, .pure-u-lg-4-24 { width: 16.6667%; } .pure-u-lg-1-5 { width: 20%; } .pure-u-lg-5-24 { width: 20.8333%; } .pure-u-lg-1-4, .pure-u-lg-6-24 { width: 25%; } .pure-u-lg-7-24 { width: 29.1667%; } .pure-u-lg-1-3, .pure-u-lg-8-24 { width: 33.3333%; } .pure-u-lg-3-8, .pure-u-lg-9-24 { width: 37.5%; } .pure-u-lg-2-5 { width: 40%; } .pure-u-lg-10-24, .pure-u-lg-5-12 { width: 41.6667%; } .pure-u-lg-11-24 { width: 45.8333%; } .pure-u-lg-1-2, .pure-u-lg-12-24 { width: 50%; } .pure-u-lg-13-24 { width: 54.1667%; } .pure-u-lg-14-24, .pure-u-lg-7-12 { width: 58.3333%; } .pure-u-lg-3-5 { width: 60%; } .pure-u-lg-15-24, .pure-u-lg-5-8 { width: 62.5%; } .pure-u-lg-16-24, .pure-u-lg-2-3 { width: 66.6667%; } .pure-u-lg-17-24 { width: 70.8333%; } .pure-u-lg-18-24, .pure-u-lg-3-4 { width: 75%; } .pure-u-lg-19-24 { width: 79.1667%; } .pure-u-lg-4-5 { width: 80%; } .pure-u-lg-20-24, .pure-u-lg-5-6 { width: 83.3333%; } .pure-u-lg-21-24, .pure-u-lg-7-8 { width: 87.5%; } .pure-u-lg-11-12, .pure-u-lg-22-24 { width: 91.6667%; } .pure-u-lg-23-24 { width: 95.8333%; } .pure-u-lg-1, .pure-u-lg-1-1, .pure-u-lg-24-24, .pure-u-lg-5-5 { width: 100%; } } @media screen and (min-width: 80em) { .pure-u-xl-1, .pure-u-xl-1-1, .pure-u-xl-1-12, .pure-u-xl-1-2, .pure-u-xl-1-24, .pure-u-xl-1-3, .pure-u-xl-1-4, .pure-u-xl-1-5, .pure-u-xl-1-6, .pure-u-xl-1-8, .pure-u-xl-10-24, .pure-u-xl-11-12, .pure-u-xl-11-24, .pure-u-xl-12-24, .pure-u-xl-13-24, .pure-u-xl-14-24, .pure-u-xl-15-24, .pure-u-xl-16-24, .pure-u-xl-17-24, .pure-u-xl-18-24, .pure-u-xl-19-24, .pure-u-xl-2-24, .pure-u-xl-2-3, .pure-u-xl-2-5, .pure-u-xl-20-24, .pure-u-xl-21-24, .pure-u-xl-22-24, .pure-u-xl-23-24, .pure-u-xl-24-24, .pure-u-xl-3-24, .pure-u-xl-3-4, .pure-u-xl-3-5, .pure-u-xl-3-8, .pure-u-xl-4-24, .pure-u-xl-4-5, .pure-u-xl-5-12, .pure-u-xl-5-24, .pure-u-xl-5-5, .pure-u-xl-5-6, .pure-u-xl-5-8, .pure-u-xl-6-24, .pure-u-xl-7-12, .pure-u-xl-7-24, .pure-u-xl-7-8, .pure-u-xl-8-24, .pure-u-xl-9-24 { display: inline-block; zoom: 1; letter-spacing: normal; word-spacing: normal; vertical-align: top; text-rendering: auto; } .pure-u-xl-1-24 { width: 4.1667%; } .pure-u-xl-1-12, .pure-u-xl-2-24 { width: 8.3333%; } .pure-u-xl-1-8, .pure-u-xl-3-24 { width: 12.5%; } .pure-u-xl-1-6, .pure-u-xl-4-24 { width: 16.6667%; } .pure-u-xl-1-5 { width: 20%; } .pure-u-xl-5-24 { width: 20.8333%; } .pure-u-xl-1-4, .pure-u-xl-6-24 { width: 25%; } .pure-u-xl-7-24 { width: 29.1667%; } .pure-u-xl-1-3, .pure-u-xl-8-24 { width: 33.3333%; } .pure-u-xl-3-8, .pure-u-xl-9-24 { width: 37.5%; } .pure-u-xl-2-5 { width: 40%; } .pure-u-xl-10-24, .pure-u-xl-5-12 { width: 41.6667%; } .pure-u-xl-11-24 { width: 45.8333%; } .pure-u-xl-1-2, .pure-u-xl-12-24 { width: 50%; } .pure-u-xl-13-24 { width: 54.1667%; } .pure-u-xl-14-24, .pure-u-xl-7-12 { width: 58.3333%; } .pure-u-xl-3-5 { width: 60%; } .pure-u-xl-15-24, .pure-u-xl-5-8 { width: 62.5%; } .pure-u-xl-16-24, .pure-u-xl-2-3 { width: 66.6667%; } .pure-u-xl-17-24 { width: 70.8333%; } .pure-u-xl-18-24, .pure-u-xl-3-4 { width: 75%; } .pure-u-xl-19-24 { width: 79.1667%; } .pure-u-xl-4-5 { width: 80%; } .pure-u-xl-20-24, .pure-u-xl-5-6 { width: 83.3333%; } .pure-u-xl-21-24, .pure-u-xl-7-8 { width: 87.5%; } .pure-u-xl-11-12, .pure-u-xl-22-24 { width: 91.6667%; } .pure-u-xl-23-24 { width: 95.8333%; } .pure-u-xl-1, .pure-u-xl-1-1, .pure-u-xl-24-24, .pure-u-xl-5-5 { width: 100%; } } /* 以下尚需請 UI 設計 dark 版的設計 */ /* table */ *:not([class^=Mui]) { box-sizing: border-box; } .fg { font-size: 1.4rem; display: inline-block; } .fg:before { color: unset; } .fg.large { font-size: 2rem; } a[disabled]:not([class^=Mui]) { pointer-events: none; cursor: default; } ul:not([class^=Mui]), ol:not([class^=Mui]) { margin: 0; padding: 0; list-style-type: none; } .c-margin { margin: 5px; } .c-margin-l { margin: 15px; } .c-padding { padding: 5px; } .c-border { border: 1px solid #d9d9d9; border-radius: 5px; } .c-flex { display: flex; } .c-flex.inline { display: inline-flex; } .c-flex.fdr { flex-direction: row; } .c-flex.fdc { flex-direction: column; } .c-flex.aic { align-items: center; } .c-flex.ais { align-items: stretch; } .c-flex.aifs { align-items: flex-start; } .c-flex.aife { align-items: flex-end; } .c-flex.acfs { align-content: flex-start; } .c-flex.acc { align-content: center; } .c-flex.acs { align-content: stretch; } .c-flex.jcc { justify-content: center; } .c-flex.jcsa { justify-content: space-around; } .c-flex.jcsb { justify-content: space-between; } .c-flex.jcfs { justify-content: flex-start; } .c-flex.jcfe { justify-content: flex-end; } .c-flex > .asc { align-self: center; } .c-flex > .asfe { align-self: flex-end; } .c-flex > .fba { flex-basis: auto !important; } .c-flex.fww { flex-wrap: wrap; } .c-flex > .grow { flex-grow: 1; } .c-flex > .fixed { flex-grow: 0; flex-shrink: 0; } .c-flex > .end { margin-left: auto; } .c-flex > .center { margin-left: auto; } .c-flex > .center:last-child { margin-right: auto; } .c-info { min-height: 40px; font-weight: bold; font-style: italic; padding-top: 5px; padding-bottom: 5px; } .c-error { color: #d0021b; font-style: italic; } .c-large { font-size: 1.1em; } .c-center { display: flex; justify-content: center; align-items: center; position: absolute; height: 100%; width: 100%; } .c-center.inline { display: inline-flex; } .c-center.fdr { flex-direction: row; } .c-center.fdc { flex-direction: column; } .c-center.aic { align-items: center; } .c-center.ais { align-items: stretch; } .c-center.aifs { align-items: flex-start; } .c-center.aife { align-items: flex-end; } .c-center.acfs { align-content: flex-start; } .c-center.acc { align-content: center; } .c-center.acs { align-content: stretch; } .c-center.jcc { justify-content: center; } .c-center.jcsa { justify-content: space-around; } .c-center.jcsb { justify-content: space-between; } .c-center.jcfs { justify-content: flex-start; } .c-center.jcfe { justify-content: flex-end; } .c-center > .asc { align-self: center; } .c-center > .asfe { align-self: flex-end; } .c-center > .fba { flex-basis: auto !important; } .c-center.fww { flex-wrap: wrap; } .c-center > .grow { flex-grow: 1; } .c-center > .fixed { flex-grow: 0; flex-shrink: 0; } .c-center > .end { margin-left: auto; } .c-center > .center { margin-left: auto; } .c-center > .center:last-child { margin-right: auto; } .c-center.c-modal.show { display: flex; } .c-center.c-modal.show.inline { display: inline-flex; } .c-center.c-modal.show.fdr { flex-direction: row; } .c-center.c-modal.show.fdc { flex-direction: column; } .c-center.c-modal.show.aic { align-items: center; } .c-center.c-modal.show.ais { align-items: stretch; } .c-center.c-modal.show.aifs { align-items: flex-start; } .c-center.c-modal.show.aife { align-items: flex-end; } .c-center.c-modal.show.acfs { align-content: flex-start; } .c-center.c-modal.show.acc { align-content: center; } .c-center.c-modal.show.acs { align-content: stretch; } .c-center.c-modal.show.jcc { justify-content: center; } .c-center.c-modal.show.jcsa { justify-content: space-around; } .c-center.c-modal.show.jcsb { justify-content: space-between; } .c-center.c-modal.show.jcfs { justify-content: flex-start; } .c-center.c-modal.show.jcfe { justify-content: flex-end; } .c-center.c-modal.show > .asc { align-self: center; } .c-center.c-modal.show > .asfe { align-self: flex-end; } .c-center.c-modal.show > .fba { flex-basis: auto !important; } .c-center.c-modal.show.fww { flex-wrap: wrap; } .c-center.c-modal.show > .grow { flex-grow: 1; } .c-center.c-modal.show > .fixed { flex-grow: 0; flex-shrink: 0; } .c-center.c-modal.show > .end { margin-left: auto; } .c-center.c-modal.show > .center { margin-left: auto; } .c-center.c-modal.show > .center:last-child { margin-right: auto; } .c-center.global { position: fixed; top: 0; left: 0; } .c-bullet { border-radius: 300px; text-align: center; } .c-split > *:not(.inner) { border: 1px solid #d9d9d9; border-radius: 5px; } .c-split.vertical > *:not(:last-child) { margin-right: 6px; } .c-split.horizontal > *:not(:last-child) { margin-bottom: 6px; } .c-join:not(.inner) { border: 1px solid #d9d9d9; border-radius: 5px; } .c-join > * { border: none !important; border-radius: 0 !important; } .c-join.vertical > *:not(:last-child) { border-right: 1px solid #d9d9d9 !important; } .c-join.horizontal > *:not(:last-child) { border-bottom: 1px solid #d9d9d9 !important; } .c-flex.boxes:not(.joint) { padding: 6px; } .c-flex.boxes:not(.joint) > *, .c-flex.boxes:not(.joint) .c-flex > * { flex-basis: 200px; } .c-flex.boxes:not(.joint):not(.fdc) > *:not(:last-child), .c-flex.boxes:not(.joint) .c-flex:not(.fdc) > *:not(:last-child) { margin-right: 6px; } .c-flex.boxes:not(.joint).fdc > *:not(:last-child), .c-flex.boxes:not(.joint) .c-flex.fdc > *:not(:last-child) { margin-bottom: 6px; } .c-flex.boxes.joint { padding: 6px; } .c-flex.boxes.joint > *, .c-flex.boxes.joint .c-flex > * { flex-basis: 200px; } .c-flex.boxes.joint:not(.fdc) > *:not(:last-child), .c-flex.boxes.joint .c-flex:not(.fdc) > *:not(:last-child) { margin-right: -1px; } .c-flex.boxes.joint.fdc > *:not(:last-child), .c-flex.boxes.joint .c-flex.fdc > *:not(:last-child) { margin-bottom: -1px; } .c-flex.boxes.joint *:not(.c-flex) { border-radius: 0; } .c-fullscreen { position: fixed !important; top: 0; left: 0; width: 100%; height: 100%; background-color: #ffffff; } .c-extend { position: absolute; margin: 8px; left: 0; right: 0; top: 0; bottom: 0; } .c-extend.full { margin: 0; } .c-fill { position: relative; } .c-fill > * { position: absolute; margin: 8px; left: 0; right: 0; top: 0; bottom: 0; } .c-fill > *.full { margin: 0; } .c-fill.full > * { margin: 0; } .c-pool { padding: 8px; border: 1px solid #d9d9d9; border-radius: 5px; } .c-pool > span { display: inline-flex; align-items: center; padding: 4px; background-color: #001b34; color: #ffffff; border-radius: 3px; margin: 0 5px 5px 0; } .c-pool > span > i { margin-left: 5px; } .c-toolbar { background-color: #969fae; padding-right: 10px; } .c-toolbar > * { padding: 8px 10px; color: white; } .fg-loading-2 { -webkit-animation: fg-spins 2s infinite linear; animation: fg-spins 2s infinite linear; } @-webkit-keyframes fg-spins { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } @keyframes fg-spins { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } .dayContainer span.flatpickr-day.selected { background: #004d93; border-color: #004d93; } button { background-image: none; box-shadow: none; border-radius: 4px; padding: 0.3em 2em; border: 1px solid #d9d9d9; background-color: #001b34; color: #ffffff; position: relative; } button.standard { background-color: #ffffff; color: #4a4a4a; box-shadow: none; background-image: none; outline: none; } button.standard[disabled] { border: 1px solid #d9d9d9; opacity: 0.5; } button.standard:hover:not([disabled]) { background-color: #e5e5e5; } button.standard:active:not([disabled]) { background-color: #cccccc; } button.focus, button:focus { outline: 0; box-shadow: 0 0 0 1px rgba(0, 123, 255, 0.25); } button.disabled, button:disabled { opacity: 0.65; cursor: default; } button.dot::after { content: '\A'; width: 5px; height: 5px; border-radius: 50%; display: inline-block; position: absolute; right: 3px; top: 3px; } button.red::after { background: red; } button.primary { color: #fff; background-color: #0888CB; background-image: linear-gradient(to bottom, #3FBCFD, #2C59DA); } button.primary:hover { background-image: linear-gradient(to bottom, #38A9E4, #2750C3); } button.primary:active { background-image: linear-gradient(to bottom, #3295CA, #284AB0); } button.primary.focus, button.primary:focus { box-shadow: 0 0 0 1px rgba(0, 123, 255, 0.25); } button.secondary { color: #4A4A4A; background-color: #fff; background-image: linear-gradient(to bottom, #FBFBFB, #C1C1C1); } button.secondary:hover { background-image: linear-gradient(to bottom, #E3E3E3, #ADADAD); } button.secondary:active { background-image: linear-gradient(to bottom, #C8C8C8, #9B9B9B); } button.secondary.focus, button.secondary:focus { box-shadow: 0 0 0 1px rgba(0, 123, 255, 0.25); } button.success { color: #fff; background-color: #83E423; background-image: linear-gradient(to bottom, #83E423, #418220); } button.success:hover { background-image: linear-gradient(to bottom, #75CC1E, #3B741C); } button.success:active { background-image: linear-gradient(to bottom, #68B51B, #346719); } button.success.focus, button.success:focus { box-shadow: 0 0 0 1px rgba(0, 123, 255, 0.25); } button.warning { color: #fff; background-color: #F8B71C; background-image: linear-gradient(to bottom, #F8B71C, #F17900); } button.warning:hover { background-image: linear-gradient(to bottom, #DEA319, #D96D00); } button.warning:active { background-image: linear-gradient(to bottom, #C69116, #C06000); } button.warning.focus, button.warning:focus { box-shadow: 0 0 0 1px rgba(0, 123, 255, 0.25); } .fg.button, .icon-button { display: flex; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #d9d9d9; border-radius: 5px; cursor: pointer; width: 32px; padding: 0; } .fg.button.inline, .icon-button.inline { display: inline-flex; } .fg.button.fdr, .icon-button.fdr { flex-direction: row; } .fg.button.fdc, .icon-button.fdc { flex-direction: column; } .fg.button.aic, .icon-button.aic { align-items: center; } .fg.button.ais, .icon-button.ais { align-items: stretch; } .fg.button.aifs, .icon-button.aifs { align-items: flex-start; } .fg.button.aife, .icon-button.aife { align-items: flex-end; } .fg.button.acfs, .icon-button.acfs { align-content: flex-start; } .fg.button.acc, .icon-button.acc { align-content: center; } .fg.button.acs, .icon-button.acs { align-content: stretch; } .fg.button.jcc, .icon-button.jcc { justify-content: center; } .fg.button.jcsa, .icon-button.jcsa { justify-content: space-around; } .fg.button.jcsb, .icon-button.jcsb { justify-content: space-between; } .fg.button.jcfs, .icon-button.jcfs { justify-content: flex-start; } .fg.button.jcfe, .icon-button.jcfe { justify-content: flex-end; } .fg.button > .asc, .icon-button > .asc { align-self: center; } .fg.button > .asfe, .icon-button > .asfe { align-self: flex-end; } .fg.button > .fba, .icon-button > .fba { flex-basis: auto !important; } .fg.button.fww, .icon-button.fww { flex-wrap: wrap; } .fg.button > .grow, .icon-button > .grow { flex-grow: 1; } .fg.button > .fixed, .icon-button > .fixed { flex-grow: 0; flex-shrink: 0; } .fg.button > .end, .icon-button > .end { margin-left: auto; } .fg.button > .center, .icon-button > .center { margin-left: auto; } .fg.button > .center:last-child, .icon-button > .center:last-child { margin-right: auto; } .c-button-group { display: flex; } .c-button-group.inline { display: inline-flex; } .c-button-group.fdr { flex-direction: row; } .c-button-group.fdc { flex-direction: column; } .c-button-group.aic { align-items: center; } .c-button-group.ais { align-items: stretch; } .c-button-group.aifs { align-items: flex-start; } .c-button-group.aife { align-items: flex-end; } .c-button-group.acfs { align-content: flex-start; } .c-button-group.acc { align-content: center; } .c-button-group.acs { align-content: stretch; } .c-button-group.jcc { justify-content: center; } .c-button-group.jcsa { justify-content: space-around; } .c-button-group.jcsb { justify-content: space-between; } .c-button-group.jcfs { justify-content: flex-start; } .c-button-group.jcfe { justify-content: flex-end; } .c-button-group > .asc { align-self: center; } .c-button-group > .asfe { align-self: flex-end; } .c-button-group > .fba { flex-basis: auto !important; } .c-button-group.fww { flex-wrap: wrap; } .c-button-group > .grow { flex-grow: 1; } .c-button-group > .fixed { flex-grow: 0; flex-shrink: 0; } .c-button-group > .end { margin-left: auto; } .c-button-group > .center { margin-left: auto; } .c-button-group > .center:last-child { margin-right: auto; } .c-button-group .thumb { display: inline-block; text-align: center; margin: 0; padding: 0.3em 0.5em; border-style: solid; border-radius: 0; border-width: 1px 0px 1px 1px; outline: none; } .c-button-group .thumb:first-child { border-radius: 3px 0 0 3px; } .c-button-group .thumb:last-child { border-right-width: 1px; border-radius: 0 3px 3px 0; } .c-button-group .thumb:not(.selected) { background-color: #ffffff; color: #4a4a4a; border-top-color: #d9d9d9; border-bottom-color: #d9d9d9; border-left-color: #d9d9d9; border-right-color: #d9d9d9; } .c-button-group .thumb:not(.selected) > .fg { color: #4a4a4a; } .c-button-group .thumb:not(.selected):not(:disabled):hover { background-color: #e5e5e5; border-top-color: #e5e5e5; border-bottom-color: #e5e5e5; outline: none; } .c-button-group .thumb:not(.selected):active { background-color: #cccccc; border-top-color: #cccccc; border-bottom-color: #cccccc; outline: none; } .c-button-group .thumb:not(.selected).disabled { opacity: 0.5; } .c-button-group .thumb.selected { background-color: #001b34; color: #ffffff; border-top-color: #001b34; border-bottom-color: #001b34; border-left-color: #d9d9d9; border-right-color: #d9d9d9; } .c-button-group .thumb.selected > .fg { color: #ffffff; } .c-button-group .thumb.selected:not(:disabled):hover { background-color: #1a3248; border-top-color: #1a3248; border-bottom-color: #1a3248; outline: none; } .c-button-group .thumb.selected:active { background-color: #33485c; border-top-color: #33485c; border-bottom-color: #33485c; outline: none; } .c-button-group .thumb.selected.disabled { opacity: 0.5; } i.c-checkbox { cursor: pointer; width: 1em; color: #383838; outline: none; } i.c-checkbox.fg-checkbox { color: #001b34; } i.c-checkbox.fg-checkbox:hover:not(.disabled) { color: #1a3248; } i.c-checkbox.fg-checkbox:active:not(.disabled) { color: #33485c; } i.c-checkbox.fg-checkbox.partial { color: #a6a6a6; } i.c-checkbox.fg-checkbox.partial:hover:not(.disabled) { color: #b7b7b7; } i.c-checkbox.fg-checkbox.partial:active:not(.disabled) { color: #c8c8c8; } i.c-checkbox.disabled { cursor: not-allowed; } i.c-checkbox.disabled, i.c-checkbox.disabled + label { opacity: 0.5; } i.c-checkbox.fg-checkbox-outline:after { content: "\e921"; display: none; } i.c-checkbox.fg-checkbox-outline:hover:not(.disabled) { color: #e5e5e5; } i.c-checkbox.fg-checkbox-outline:hover:not(.disabled):before { display: none; } i.c-checkbox.fg-checkbox-outline:hover:not(.disabled):after { display: block; } i.c-checkbox.fg-checkbox-outline:active:not(.disabled) { color: #cccccc; } i.c-checkbox.fg-checkbox-outline:active:not(.disabled):before { display: none; } i.c-checkbox.fg-checkbox-outline:active:not(.disabled):after { display: block; } .c-combobox.clearable, .pure-form .c-combobox.clearable { display: flex; display: inline-flex; } .c-combobox.clearable.inline, .pure-form .c-combobox.clearable.inline { display: inline-flex; } .c-combobox.clearable.fdr, .pure-form .c-combobox.clearable.fdr { flex-direction: row; } .c-combobox.clearable.fdc, .pure-form .c-combobox.clearable.fdc { flex-direction: column; } .c-combobox.clearable.aic, .pure-form .c-combobox.clearable.aic { align-items: center; } .c-combobox.clearable.ais, .pure-form .c-combobox.clearable.ais { align-items: stretch; } .c-combobox.clearable.aifs, .pure-form .c-combobox.clearable.aifs { align-items: flex-start; } .c-combobox.clearable.aife, .pure-form .c-combobox.clearable.aife { align-items: flex-end; } .c-combobox.clearable.acfs, .pure-form .c-combobox.clearable.acfs { align-content: flex-start; } .c-combobox.clearable.acc, .pure-form .c-combobox.clearable.acc { align-content: center; } .c-combobox.clearable.acs, .pure-form .c-combobox.clearable.acs { align-content: stretch; } .c-combobox.clearable.jcc, .pure-form .c-combobox.clearable.jcc { justify-content: center; } .c-combobox.clearable.jcsa, .pure-form .c-combobox.clearable.jcsa { justify-content: space-around; } .c-combobox.clearable.jcsb, .pure-form .c-combobox.clearable.jcsb { justify-content: space-between; } .c-combobox.clearable.jcfs, .pure-form .c-combobox.clearable.jcfs { justify-content: flex-start; } .c-combobox.clearable.jcfe, .pure-form .c-combobox.clearable.jcfe { justify-content: flex-end; } .c-combobox.clearable > .asc, .pure-form .c-combobox.clearable > .asc { align-self: center; } .c-combobox.clearable > .asfe, .pure-form .c-combobox.clearable > .asfe { align-self: flex-end; } .c-combobox.clearable > .fba, .pure-form .c-combobox.clearable > .fba { flex-basis: auto !important; } .c-combobox.clearable.fww, .pure-form .c-combobox.clearable.fww { flex-wrap: wrap; } .c-combobox.clearable > .grow, .pure-form .c-combobox.clearable > .grow { flex-grow: 1; } .c-combobox.clearable > .fixed, .pure-form .c-combobox.clearable > .fixed { flex-grow: 0; flex-shrink: 0; } .c-combobox.clearable > .end, .pure-form .c-combobox.clearable > .end { margin-left: auto; } .c-combobox.clearable > .center, .pure-form .c-combobox.clearable > .center { margin-left: auto; } .c-combobox.clearable > .center:last-child, .pure-form .c-combobox.clearable > .center:last-child { margin-right: auto; } .c-combobox.clearable > input[type='text'], .pure-form .c-combobox.clearable > input[type='text'] { padding-right: 55px; } .c-combobox.clearable > input[type='text'] + *, .pure-form .c-combobox.clearable > input[type='text'] + * { position: relative; left: -55px; margin-left: 0; margin-right: -55px; } .c-combobox.clearable > input[type='text'] + .fg, .pure-form .c-combobox.clearable > input[type='text'] + .fg, .c-combobox.clearable > input[type='text'] + * > .fg, .pure-form .c-combobox.clearable > input[type='text'] + * > .fg { display: flex; display: inline-flex; align-items: center; justify-content: center; border-radius: 5px; cursor: pointer; padding: 0; border: none; width: 25px; } .c-combobox.clearable > input[type='text'] + .fg.inline, .pure-form .c-combobox.clearable > input[type='text'] + .fg.inline, .c-combobox.clearable > input[type='text'] + * > .fg.inline, .pure-form .c-combobox.clearable > input[type='text'] + * > .fg.inline { display: inline-flex; } .c-combobox.clearable > input[type='text'] + .fg.fdr, .pure-form .c-combobox.clearable > input[type='text'] + .fg.fdr, .c-combobox.clearable > input[type='text'] + * > .fg.fdr, .pure-form .c-combobox.clearable > input[type='text'] + * > .fg.fdr { flex-direction: row; } .c-combobox.clearable > input[type='text'] + .fg.fdc, .pure-form .c-combobox.clearable > input[type='text'] + .fg.fdc, .c-combobox.clearable > input[type='text'] + * > .fg.fdc, .pure-form .c-combobox.clearable > input[type='text'] + * > .fg.fdc { flex-direction: column; } .c-combobox.clearable > input[type='text'] + .fg.aic, .pure-form .c-combobox.clearable > input[type='text'] + .fg.aic, .c-combobox.clearable > input[type='text'] + * > .fg.aic, .pure-form .c-combobox.clearable > input[type='text'] + * > .fg.aic { align-items: center; } .c-combobox.clearable > input[type='text'] + .fg.ais, .pure-form .c-combobox.clearable > input[type='text'] + .fg.ais, .c-combobox.clearable > input[type='text'] + * > .fg.ais, .pure-form .c-combobox.clearable > input[type='text'] + * > .fg.ais { align-items: stretch; } .c-combobox.clearable > input[type='text'] + .fg.aifs, .pure-form .c-combobox.clearable > input[type='text'] + .fg.aifs, .c-combobox.clearable > input[type='text'] + * > .fg.aifs, .pure-form .c-combobox.clearable > input[type='text'] + * > .fg.aifs { align-items: flex-start; } .c-combobox.clearable > input[type='text'] + .fg.aife, .pure-form .c-combobox.clearable > input[type='text'] + .fg.aife, .c-combobox.clearable > input[type='text'] + * > .fg.aife, .pure-form .c-combobox.clearable > input[type='text'] + * > .fg.aife { align-items: flex-end; } .c-combobox.clearable > input[type='text'] + .fg.acfs, .pure-form .c-combobox.clearable > input[type='text'] + .fg.acfs, .c-combobox.clearable > input[type='text'] + * > .fg.acfs, .pure-form .c-combobox.clearable > input[type='text'] + * > .fg.acfs { align-content: flex-start; } .c-combobox.clearable > input[type='text'] + .fg.acc, .pure-form .c-combobox.clearable > input[type='text'] + .fg.acc, .c-combobox.clearable > input[type='text'] + * > .fg.acc, .pure-form .c-combobox.clearable > input[type='text'] + * > .fg.acc { align-content: center; } .c-combobox.clearable > input[type='text'] + .fg.acs, .pure-form .c-combobox.clearable > input[type='text'] + .fg.acs, .c-combobox.clearable > input[type='text'] + * > .fg.acs, .pure-form .c-combobox.clearable > input[type='text'] + * > .fg.acs { align-content: stretch; } .c-combobox.clearable > input[type='text'] + .fg.jcc, .pure-form .c-combobox.clearable > input[type='text'] + .fg.jcc, .c-combobox.clearable > input[type='text'] + * > .fg.jcc, .pure-form .c-combobox.clearable > input[type='text'] + * > .fg.jcc { justify-content: center; } .c-combobox.clearable > input[type='text'] + .fg.jcsa, .pure-form .c-combobox.clearable > input[type='text'] + .fg.jcsa, .c-combobox.clearable > input[type='text'] + * > .fg.jcsa, .pure-form .c-combobox.clearable > input[type='text'] + * > .fg.jcsa { justify-content: space-around; } .c-combobox.clearable > input[type='text'] + .fg.jcsb, .pure-form .c-combobox.clearable > input[type='text'] + .fg.jcsb, .c-combobox.clearable > input[type='text'] + * > .fg.jcsb, .pure-form .c-combobox.clearable > input[type='text'] + * > .fg.jcsb { justify-content: space-between; } .c-combobox.clearable > input[type='text'] + .fg.jcfs, .pure-form .c-combobox.clearable > input[type='text'] + .fg.jcfs, .c-combobox.clearable > input[type='text'] + * > .fg.jcfs, .pure-form .c-combobox.clearable > input[type='text'] + * > .fg.jcfs { justify-content: flex-start; } .c-combobox.clearable > input[type='text'] + .fg.jcfe, .pure-form .c-combobox.clearable > input[type='text'] + .fg.jcfe, .c-combobox.clearable > input[type='text'] + * > .fg.jcfe, .pure-form .c-combobox.clearable > input[type='text'] + * > .fg.jcfe { justify-content: flex-end; } .c-combobox.clearable > input[type='text'] + .fg > .asc, .pure-form .c-combobox.clearable > input[type='text'] + .fg > .asc, .c-combobox.clearable > input[type='text'] + * > .fg > .asc, .pure-form .c-combobox.clearable > input[type='text'] + * > .fg > .asc { align-self: center; } .c-combobox.clearable > input[type='text'] + .fg > .asfe, .pure-form .c-combobox.clearable > input[type='text'] + .fg > .asfe, .c-combobox.clearable > input[type='text'] + * > .fg > .asfe, .pure-form .c-combobox.clearable > input[type='text'] + * > .fg > .asfe { align-self: flex-end; } .c-combobox.clearable > input[type='text'] + .fg > .fba, .pure-form .c-combobox.clearable > input[type='text'] + .fg > .fba, .c-combobox.clearable > input[type='text'] + * > .fg > .fba, .pure-form .c-combobox.clearable > input[type='text'] + * > .fg > .fba { flex-basis: auto !important; } .c-combobox.clearable > input[type='text'] + .fg.fww, .pure-form .c-combobox.clearable > input[type='text'] + .fg.fww, .c-combobox.clearable > input[type='text'] + * > .fg.fww, .pure-form .c-combobox.clearable > input[type='text'] + * > .fg.fww { flex-wrap: wrap; } .c-combobox.clearable > input[type='text'] + .fg > .grow, .pure-form .c-combobox.clearable > input[type='text'] + .fg > .grow, .c-combobox.clearable > input[type='text'] + * > .fg > .grow, .pure-form .c-combobox.clearable > input[type='text'] + * > .fg > .grow { flex-grow: 1; } .c-combobox.clearable > input[type='text'] + .fg > .fixed, .pure-form .c-combobox.clearable > input[type='text'] + .fg > .fixed, .c-combobox.clearable > input[type='text'] + * > .fg > .fixed, .pure-form .c-combobox.clearable > input[type='text'] + * > .fg > .fixed { flex-grow: 0; flex-shrink: 0; } .c-combobox.clearable > input[type='text'] + .fg > .end, .pure-form .c-combobox.clearable > input[type='text'] + .fg > .end, .c-combobox.clearable > input[type='text'] + * > .fg > .end, .pure-form .c-combobox.clearable > input[type='text'] + * > .fg > .end { margin-left: auto; } .c-combobox.clearable > input[type='text'] + .fg > .center, .pure-form .c-combobox.clearable > input[type='text'] + .fg > .center, .c-combobox.clearable > input[type='text'] + * > .fg > .center, .pure-form .c-combobox.clearable > input[type='text'] + * > .fg > .center { margin-left: auto; } .c-combobox.clearable > input[type='text'] + .fg > .center:last-child, .pure-form .c-combobox.clearable > input[type='text'] + .fg > .center:last-child, .c-combobox.clearable > input[type='text'] + * > .fg > .center:last-child, .pure-form .c-combobox.clearable > input[type='text'] + * > .fg > .center:last-child { margin-right: auto; } .c-combobox:not(.clearable), .pure-form .c-combobox:not(.clearable) { display: flex; display: inline-flex; } .c-combobox:not(.clearable).inline, .pure-form .c-combobox:not(.clearable).inline { display: inline-flex; } .c-combobox:not(.clearable).fdr, .pure-form .c-combobox:not(.clearable).fdr { flex-direction: row; } .c-combobox:not(.clearable).fdc, .pure-form .c-combobox:not(.clearable).fdc { flex-direction: column; } .c-combobox:not(.clearable).aic, .pure-form .c-combobox:not(.clearable).aic { align-items: center; } .c-combobox:not(.clearable).ais, .pure-form .c-combobox:not(.clearable).ais { align-items: stretch; } .c-combobox:not(.clearable).aifs, .pure-form .c-combobox:not(.clearable).aifs { align-items: flex-start; } .c-combobox:not(.clearable).aife, .pure-form .c-combobox:not(.clearable).aife { align-items: flex-end; } .c-combobox:not(.clearable).acfs, .pure-form .c-combobox:not(.clearable).acfs { align-content: flex-start; } .c-combobox:not(.clearable).acc, .pure-form .c-combobox:not(.clearable).acc { align-content: center; } .c-combobox:not(.clearable).acs, .pure-form .c-combobox:not(.clearable).acs { align-content: stretch; } .c-combobox:not(.clearable).jcc, .pure-form .c-combobox:not(.clearable).jcc { justify-content: center; } .c-combobox:not(.clearable).jcsa, .pure-form .c-combobox:not(.clearable).jcsa { justify-content: space-around; } .c-combobox:not(.clearable).jcsb, .pure-form .c-combobox:not(.clearable).jcsb { justify-content: space-between; } .c-combobox:not(.clearable).jcfs, .pure-form .c-combobox:not(.clearable).jcfs { justify-content: flex-start; } .c-combobox:not(.clearable).jcfe, .pure-form .c-combobox:not(.clearable).jcfe { justify-content: flex-end; } .c-combobox:not(.clearable) > .asc, .pure-form .c-combobox:not(.clearable) > .asc { align-self: center; } .c-combobox:not(.clearable) > .asfe, .pure-form .c-combobox:not(.clearable) > .asfe { align-self: flex-end; } .c-combobox:not(.clearable) > .fba, .pure-form .c-combobox:not(.clearable) > .fba { flex-basis: auto !important; } .c-combobox:not(.clearable).fww, .pure-form .c-combobox:not(.clearable).fww { flex-wrap: wrap; } .c-combobox:not(.clearable) > .grow, .pure-form .c-combobox:not(.clearable) > .grow { flex-grow: 1; } .c-combobox:not(.clearable) > .fixed, .pure-form .c-combobox:not(.clearable) > .fixed { flex-grow: 0; flex-shrink: 0; } .c-combobox:not(.clearable) > .end, .pure-form .c-combobox:not(.clearable) > .end { margin-left: auto; } .c-combobox:not(.clearable) > .center, .pure-form .c-combobox:not(.clearable) > .center { margin-left: auto; } .c-combobox:not(.clearable) > .center:last-child, .pure-form .c-combobox:not(.clearable) > .center:last-child { margin-right: auto; } .c-combobox:not(.clearable) > input[type='text'], .pure-form .c-combobox:not(.clearable) > input[type='text'] { padding-right: 25px; } .c-combobox:not(.clearable) > input[type='text'] + *, .pure-form .c-combobox:not(.clearable) > input[type='text'] + * { position: relative; left: -25px; margin-left: 0; margin-right: -25px; } .c-combobox:not(.clearable) > input[type='text'] + .fg, .pure-form .c-combobox:not(.clearable) > input[type='text'] + .fg, .c-combobox:not(.clearable) > input[type='text'] + * > .fg, .pure-form .c-combobox:not(.clearable) > input[type='text'] + * > .fg { display: flex; display: inline-flex; align-items: center; justify-content: center; border-radius: 5px; cursor: pointer; padding: 0; border: none; width: 25px; } .c-combobox:not(.clearable) > input[type='text'] + .fg.inline, .pure-form .c-combobox:not(.clearable) > input[type='text'] + .fg.inline, .c-combobox:not(.clearable) > input[type='text'] + * > .fg.inline, .pure-form .c-combobox:not(.clearable) > input[type='text'] + * > .fg.inline { display: inline-flex; } .c-combobox:not(.clearable) > input[type='text'] + .fg.fdr, .pure-form .c-combobox:not(.clearable) > input[type='text'] + .fg.fdr, .c-combobox:not(.clearable) > input[type='text'] + * > .fg.fdr, .pure-form .c-combobox:not(.clearable) > input[type='text'] + * > .fg.fdr { flex-direction: row; } .c-combobox:not(.clearable) > input[type='text'] + .fg.fdc, .pure-form .c-combobox:not(.clearable) > input[type='text'] + .fg.fdc, .c-combobox:not(.clearable) > input[type='text'] + * > .fg.fdc, .pure-form .c-combobox:not(.clearable) > input[type='text'] + * > .fg.fdc { flex-direction: column; } .c-combobox:not(.clearable) > input[type='text'] + .fg.aic, .pure-form .c-combobox:not(.clearable) > input[type='text'] + .fg.aic, .c-combobox:not(.clearable) > input[type='text'] + * > .fg.aic, .pure-form .c-combobox:not(.clearable) > input[type='text'] + * > .fg.aic { align-items: center; } .c-combobox:not(.clearable) > input[type='text'] + .fg.ais, .pure-form .c-combobox:not(.clearable) > input[type='text'] + .fg.ais, .c-combobox:not(.clearable) > input[type='text'] + * > .fg.ais, .pure-form .c-combobox:not(.clearable) > input[type='text'] + * > .fg.ais { align-items: stretch; } .c-combobox:not(.clearable) > input[type='text'] + .fg.aifs, .pure-form .c-combobox:not(.clearable) > input[type='text'] + .fg.aifs, .c-combobox:not(.clearable) > input[type='text'] + * > .fg.aifs, .pure-form .c-combobox:not(.clearable) > input[type='text'] + * > .fg.aifs { align-items: flex-start; } .c-combobox:not(.clearable) > input[type='text'] + .fg.aife, .pure-form .c-combobox:not(.clearable) > input[type='text'] + .fg.aife, .c-combobox:not(.clearable) > input[type='text'] + * > .fg.aife, .pure-form .c-combobox:not(.clearable) > input[type='text'] + * > .fg.aife { align-items: flex-end; } .c-combobox:not(.clearable) > input[type='text'] + .fg.acfs, .pure-form .c-combobox:not(.clearable) > input[type='text'] + .fg.acfs, .c-combobox:not(.clearable) > input[type='text'] + * > .fg.acfs, .pure-form .c-combobox:not(.clearable) > input[type='text'] + * > .fg.acfs { align-content: flex-start; } .c-combobox:not(.clearable) > input[type='text'] + .fg.acc, .pure-form .c-combobox:not(.clearable) > input[type='text'] + .fg.acc, .c-combobox:not(.clearable) > input[type='text'] + * > .fg.acc, .pure-form .c-combobox:not(.clearable) > input[type='text'] + * > .fg.acc { align-content: center; } .c-combobox:not(.clearable) > input[type='text'] + .fg.acs, .pure-form .c-combobox:not(.clearable) > input[type='text'] + .fg.acs, .c-combobox:not(.clearable) > input[type='text'] + * > .fg.acs, .pure-form .c-combobox:not(.clearable) > input[type='text'] + * > .fg.acs { align-content: stretch; } .c-combobox:not(.clearable) > input[type='text'] + .fg.jcc, .pure-form .c-combobox:not(.clearable) > input[type='text'] + .fg.jcc, .c-combobox:not(.clearable) > input[type='text'] + * > .fg.jcc, .pure-form .c-combobox:not(.clearable) > input[type='text'] + * > .fg.jcc { justify-content: center; } .c-combobox:not(.clearable) > input[type='text'] + .fg.jcsa, .pure-form .c-combobox:not(.clearable) > input[type='text'] + .fg.jcsa, .c-combobox:not(.clearable) > input[type='text'] + * > .fg.jcsa, .pure-form .c-combobox:not(.clearable) > input[type='text'] + * > .fg.jcsa { justify-content: space-around; } .c-combobox:not(.clearable) > input[type='text'] + .fg.jcsb, .pure-form .c-combobox:not(.clearable) > input[type='text'] + .fg.jcsb, .c-combobox:not(.clearable) > input[type='text'] + * > .fg.jcsb, .pure-form .c-combobox:not(.clearable) > input[type='text'] + * > .fg.jcsb { justify-content: space-between; } .c-combobox:not(.clearable) > input[type='text'] + .fg.jcfs, .pure-form .c-combobox:not(.clearable) > input[type='text'] + .fg.jcfs, .c-combobox:not(.clearable) > input[type='text'] + * > .fg.jcfs, .pure-form .c-combobox:not(.clearable) > input[type='text'] + * > .fg.jcfs { justify-content: flex-start; } .c-combobox:not(.clearable) > input[type='text'] + .fg.jcfe, .pure-form .c-combobox:not(.clearable) > input[type='text'] + .fg.jcfe, .c-combobox:not(.clearable) > input[type='text'] + * > .fg.jcfe, .pure-form .c-combobox:not(.clearable) > input[type='text'] + * > .fg.jcfe { justify-content: flex-end; } .c-combobox:not(.clearable) > input[type='text'] + .fg > .asc, .pure-form .c-combobox:not(.clearable) > input[type='text'] + .fg > .asc, .c-combobox:not(.clearable) > input[type='text'] + * > .fg > .asc, .pure-form .c-combobox:not(.clearable) > input[type='text'] + * > .fg > .asc { align-self: center; } .c-combobox:not(.clearable) > input[type='text'] + .fg > .asfe, .pure-form .c-combobox:not(.clearable) > input[type='text'] + .fg > .asfe, .c-combobox:not(.clearable) > input[type='text'] + * > .fg > .asfe, .pure-form .c-combobox:not(.clearable) > input[type='text'] + * > .fg > .asfe { align-self: flex-end; } .c-combobox:not(.clearable) > input[type='text'] + .fg > .fba, .pure-form .c-combobox:not(.clearable) > input[type='text'] + .fg > .fba, .c-combobox:not(.clearable) > input[type='text'] + * > .fg > .fba, .pure-form .c-combobox:not(.clearable) > input[type='text'] + * > .fg > .fba { flex-basis: auto !important; } .c-combobox:not(.clearable) > input[type='text'] + .fg.fww, .pure-form .c-combobox:not(.clearable) > input[type='text'] + .fg.fww, .c-combobox:not(.clearable) > input[type='text'] + * > .fg.fww, .pure-form .c-combobox:not(.clearable) > input[type='text'] + * > .fg.fww { flex-wrap: wrap; } .c-combobox:not(.clearable) > input[type='text'] + .fg > .grow, .pure-form .c-combobox:not(.clearable) > input[type='text'] + .fg > .grow, .c-combobox:not(.clearable) > input[type='text'] + * > .fg > .grow, .pure-form .c-combobox:not(.clearable) > input[type='text'] + * > .fg > .grow { flex-grow: 1; } .c-combobox:not(.clearable) > input[type='text'] + .fg > .fixed, .pure-form .c-combobox:not(.clearable) > input[type='text'] + .fg > .fixed, .c-combobox:not(.clearable) > input[type='text'] + * > .fg > .fixed, .pure-form .c-combobox:not(.clearable) > input[type='text'] + * > .fg > .fixed { flex-grow: 0; flex-shrink: 0; } .c-combobox:not(.clearable) > input[type='text'] + .fg > .end, .pure-form .c-combobox:not(.clearable) > input[type='text'] + .fg > .end, .c-combobox:not(.clearable) > input[type='text'] + * > .fg > .end, .pure-form .c-combobox:not(.clearable) > input[type='text'] + * > .fg > .end { margin-left: auto; } .c-combobox:not(.clearable) > input[type='text'] + .fg > .center, .pure-form .c-combobox:not(.clearable) > input[type='text'] + .fg > .center, .c-combobox:not(.clearable) > input[type='text'] + * > .fg > .center, .pure-form .c-combobox:not(.clearable) > input[type='text'] + * > .fg > .center { margin-left: auto; } .c-combobox:not(.clearable) > input[type='text'] + .fg > .center:last-child, .pure-form .c-combobox:not(.clearable) > input[type='text'] + .fg > .center:last-child, .c-combobox:not(.clearable) > input[type='text'] + * > .fg > .center:last-child, .pure-form .c-combobox:not(.clearable) > input[type='text'] + * > .fg > .center:last-child { margin-right: auto; } .c-combo-list { font-size: 0.9rem; } .c-combo-list > .c-search { margin: auto; padding: 5px; } .c-combo-list > .list { max-height: 200px; overflow-y: auto; } .c-combo-list .list-item, .c-combo-list > .c-checkbox-group > .list-item { padding: 0.3em 0.8em; margin: 0 !important; cursor: pointer; white-space: pre; } .c-combo-list .list-item > *:not(.c-info), .c-combo-list > .c-checkbox-group > .list-item > *:not(.c-info) { display: flex; align-items: center; } .c-combo-list .list-item > *:not(.c-info).inline, .c-combo-list > .c-checkbox-group > .list-item > *:not(.c-info).inline { display: inline-flex; } .c-combo-list .list-item > *:not(.c-info).fdr, .c-combo-list > .c-checkbox-group > .list-item > *:not(.c-info).fdr { flex-direction: row; } .c-combo-list .list-item > *:not(.c-info).fdc, .c-combo-list > .c-checkbox-group > .list-item > *:not(.c-info).fdc { flex-direction: column; } .c-combo-list .list-item > *:not(.c-info).aic, .c-combo-list > .c-checkbox-group > .list-item > *:not(.c-info).aic { align-items: center; } .c-combo-list .list-item > *:not(.c-info).ais, .c-combo-list > .c-checkbox-group > .list-item > *:not(.c-info).ais { align-items: stretch; } .c-combo-list .list-item > *:not(.c-info).aifs, .c-combo-list > .c-checkbox-group > .list-item > *:not(.c-info).aifs { align-items: flex-start; } .c-combo-list .list-item > *:not(.c-info).aife, .c-combo-list > .c-checkbox-group > .list-item > *:not(.c-info).aife { align-items: flex-end; } .c-combo-list .list-item > *:not(.c-info).acfs, .c-combo-list > .c-checkbox-group > .list-item > *:not(.c-info).acfs { align-content: flex-start; } .c-combo-list .list-item > *:not(.c-info).acc, .c-combo-list > .c-checkbox-group > .list-item > *:not(.c-info).acc { align-content: center; } .c-combo-list .list-item > *:not(.c-info).acs, .c-combo-list > .c-checkbox-group > .list-item > *:not(.c-info).acs { align-content: stretch; } .c-combo-list .list-item > *:not(.c-info).jcc, .c-combo-list > .c-checkbox-group > .list-item > *:not(.c-info).jcc { justify-content: center; } .c-combo-list .list-item > *:not(.c-info).jcsa, .c-combo-list > .c-checkbox-group > .list-item > *:not(.c-info).jcsa { justify-content: space-around; } .c-combo-list .list-item > *:not(.c-info).jcsb, .c-combo-list > .c-checkbox-group > .list-item > *:not(.c-info).jcsb { justify-content: space-between; } .c-combo-list .list-item > *:not(.c-info).jcfs, .c-combo-list > .c-checkbox-group > .list-item > *:not(.c-info).jcfs { justify-content: flex-start; } .c-combo-list .list-item > *:not(.c-info).jcfe, .c-combo-list > .c-checkbox-group > .list-item > *:not(.c-info).jcfe { justify-content: flex-end; } .c-combo-list .list-item > *:not(.c-info) > .asc, .c-combo-list > .c-checkbox-group > .list-item > *:not(.c-info) > .asc { align-self: center; } .c-combo-list .list-item > *:not(.c-info) > .asfe, .c-combo-list > .c-checkbox-group > .list-item > *:not(.c-info) > .asfe { align-self: flex-end; } .c-combo-list .list-item > *:not(.c-info) > .fba, .c-combo-list > .c-checkbox-group > .list-item > *:not(.c-info) > .fba { flex-basis: auto !important; } .c-combo-list .list-item > *:not(.c-info).fww, .c-combo-list > .c-checkbox-group > .list-item > *:not(.c-info).fww { flex-wrap: wrap; } .c-combo-list .list-item > *:not(.c-info) > .grow, .c-combo-list > .c-checkbox-group > .list-item > *:not(.c-info) > .grow { flex-grow: 1; } .c-combo-list .list-item > *:not(.c-info) > .fixed, .c-combo-list > .c-checkbox-group > .list-item > *:not(.c-info) > .fixed { flex-grow: 0; flex-shrink: 0; } .c-combo-list .list-item > *:not(.c-info) > .end, .c-combo-list > .c-checkbox-group > .list-item > *:not(.c-info) > .end { margin-left: auto; } .c-combo-list .list-item > *:not(.c-info) > .center, .c-combo-list > .c-checkbox-group > .list-item > *:not(.c-info) > .center { margin-left: auto; } .c-combo-list .list-item > *:not(.c-info) > .center:last-child, .c-combo-list > .c-checkbox-group > .list-item > *:not(.c-info) > .center:last-child { margin-right: auto; } .c-combo-list .list-item:hover, .c-combo-list > .c-checkbox-group > .list-item:hover { background-color: #e5e5e5; } .c-combo-list .list-item.selected, .c-combo-list > .c-checkbox-group > .list-item.selected, .c-combo-list .list-item:hover, .c-combo-list > .c-checkbox-group > .list-item:hover { color: #004d93; } .c-combo-list .list-item:disabled, .c-combo-list > .c-checkbox-group > .list-item:disabled, .c-combo-list .list-item.disabled, .c-combo-list > .c-checkbox-group > .list-item.disabled { opacity: 0.5; } .c-checkbox-group > .c-checkbox-el { display: inline-flex; align-items: center; padding: 5px 10px 5px 0; } .c-checkbox-group > .c-checkbox-el > label { width: auto; } .c-checkbox-group > .c-checkbox-el > .c-checkbox { padding-left: 0; flex-shrink: 0; } .c-date-picker { display: flex; display: inline-flex; } .c-date-picker .MuiFormControl-root.MuiTextField-root { min-width: 100%; } .c-date-picker .MuiFormControl-root.MuiTextField-root .date-range-icon { cursor: pointer; } .c-date-picker.inline { display: inline-flex; } .c-date-picker.fdr { flex-direction: row; } .c-date-picker.fdc { flex-direction: column; } .c-date-picker.aic { align-items: center; } .c-date-picker.ais { align-items: stretch; } .c-date-picker.aifs { align-items: flex-start; } .c-date-picker.aife { align-items: flex-end; } .c-date-picker.acfs { align-content: flex-start; } .c-date-picker.acc { align-content: center; } .c-date-picker.acs { align-content: stretch; } .c-date-picker.jcc { justify-content: center; } .c-date-picker.jcsa { justify-content: space-around; } .c-date-picker.jcsb { justify-content: space-between; } .c-date-picker.jcfs { justify-content: flex-start; } .c-date-picker.jcfe { justify-content: flex-end; } .c-date-picker > .asc { align-self: center; } .c-date-picker > .asfe { align-self: flex-end; } .c-date-picker > .fba { flex-basis: auto !important; } .c-date-picker.fww { flex-wrap: wrap; } .c-date-picker > .grow { flex-grow: 1; } .c-date-picker > .fixed { flex-grow: 0; flex-shrink: 0; } .c-date-picker > .end { margin-left: auto; } .c-date-picker > .center { margin-left: auto; } .c-date-picker > .center:last-child { margin-right: auto; } .c-date-picker i.fg { display: flex; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #d9d9d9; border-radius: 5px; cursor: pointer; width: 32px; padding: 0; margin-left: 4px; } .c-date-picker i.fg.inline { display: inline-flex; } .c-date-picker i.fg.fdr { flex-direction: row; } .c-date-picker i.fg.fdc { flex-direction: column; } .c-date-picker i.fg.aic { align-items: center; } .c-date-picker i.fg.ais { align-items: stretch; } .c-date-picker i.fg.aifs { align-items: flex-start; } .c-date-picker i.fg.aife { align-items: flex-end; } .c-date-picker i.fg.acfs { align-content: flex-start; } .c-date-picker i.fg.acc { align-content: center; } .c-date-picker i.fg.acs { align-content: stretch; } .c-date-picker i.fg.jcc { justify-content: center; } .c-date-picker i.fg.jcsa { justify-content: space-around; } .c-date-picker i.fg.jcsb { justify-content: space-between; } .c-date-picker i.fg.jcfs { justify-content: flex-start; } .c-date-picker i.fg.jcfe { justify-content: flex-end; } .c-date-picker i.fg > .asc { align-self: center; } .c-date-picker i.fg > .asfe { align-self: flex-end; } .c-date-picker i.fg > .fba { flex-basis: auto !important; } .c-date-picker i.fg.fww { flex-wrap: wrap; } .c-date-picker i.fg > .grow { flex-grow: 1; } .c-date-picker i.fg > .fixed { flex-grow: 0; flex-shrink: 0; } .c-date-picker i.fg > .end { margin-left: auto; } .c-date-picker i.fg > .center { margin-left: auto; } .c-date-picker i.fg > .center:last-child { margin-right: auto; } .c-date-range .date-range-icon { cursor: pointer; } .c-date-range > .between { margin: 0 5px; } .c-range-calendar { position: relative; } .c-range-calendar > .date-display { display: flex; display: inline-flex; } .c-range-calendar > .date-display.inline { display: inline-flex; } .c-range-calendar > .date-display.fdr { flex-direction: row; } .c-range-calendar > .date-display.fdc { flex-direction: column; } .c-range-calendar > .date-display.aic { align-items: center; } .c-range-calendar > .date-display.ais { align-items: stretch; } .c-range-calendar > .date-display.aifs { align-items: flex-start; } .c-range-calendar > .date-display.aife { align-items: flex-end; } .c-range-calendar > .date-display.acfs { align-content: flex-start; } .c-range-calendar > .date-display.acc { align-content: center; } .c-range-calendar > .date-display.acs { align-content: stretch; } .c-range-calendar > .date-display.jcc { justify-content: center; } .c-range-calendar > .date-display.jcsa { justify-content: space-around; } .c-range-calendar > .date-display.jcsb { justify-content: space-between; } .c-range-calendar > .date-display.jcfs { justify-content: flex-start; } .c-range-calendar > .date-display.jcfe { justify-content: flex-end; } .c-range-calendar > .date-display > .asc { align-self: center; } .c-range-calendar > .date-display > .asfe { align-self: flex-end; } .c-range-calendar > .date-display > .fba { flex-basis: auto !important; } .c-range-calendar > .date-display.fww { flex-wrap: wrap; } .c-range-calendar > .date-display > .grow { flex-grow: 1; } .c-range-calendar > .date-display > .fixed { flex-grow: 0; flex-shrink: 0; } .c-range-calendar > .date-display > .end { margin-left: auto; } .c-range-calendar > .date-display > .center { margin-left: auto; } .c-range-calendar > .date-display > .center:last-child { margin-right: auto; } .c-range-calendar > .date-display i.fg { display: flex; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #d9d9d9; border-radius: 5px; cursor: pointer; width: 32px; padding: 0; margin-left: 4px; } .c-range-calendar > .date-display i.fg.inline { display: inline-flex; } .c-range-calendar > .date-display i.fg.fdr { flex-direction: row; } .c-range-calendar > .date-display i.fg.fdc { flex-direction: column; } .c-range-calendar > .date-display i.fg.aic { align-items: center; } .c-range-calendar > .date-display i.fg.ais { align-items: stretch; } .c-range-calendar > .date-display i.fg.aifs { align-items: flex-start; } .c-range-calendar > .date-display i.fg.aife { align-items: flex-end; } .c-range-calendar > .date-display i.fg.acfs { align-content: flex-start; } .c-range-calendar > .date-display i.fg.acc { align-content: center; } .c-range-calendar > .date-display i.fg.acs { align-content: stretch; } .c-range-calendar > .date-display i.fg.jcc { justify-content: center; } .c-range-calendar > .date-display i.fg.jcsa { justify-content: space-around; } .c-range-calendar > .date-display i.fg.jcsb { justify-content: space-between; } .c-range-calendar > .date-display i.fg.jcfs { justify-content: flex-start; } .c-range-calendar > .date-display i.fg.jcfe { justify-content: flex-end; } .c-range-calendar > .date-display i.fg > .asc { align-self: center; } .c-range-calendar > .date-display i.fg > .asfe { align-self: flex-end; } .c-range-calendar > .date-display i.fg > .fba { flex-basis: auto !important; } .c-range-calendar > .date-display i.fg.fww { flex-wrap: wrap; } .c-range-calendar > .date-display i.fg > .grow { flex-grow: 1; } .c-range-calendar > .date-display i.fg > .fixed { flex-grow: 0; flex-shrink: 0; } .c-range-calendar > .date-display i.fg > .end { margin-left: auto; } .c-range-calendar > .date-display i.fg > .center { margin-left: auto; } .c-range-calendar > .date-display i.fg > .center:last-child { margin-right: auto; } .c-range-calendar > .date-display input { background-color: inherit; color: inherit; width: 270px; } .c-range-calendar > .date-wrapper { display: flex; background-color: #FFFFFF; height: 0; outline: none; overflow-y: hidden; position: absolute; top: 40px; transition: height 0.23s cubic-bezier(0.23, 1, 0.32, 1); width: auto; z-index: 100; } .c-range-calendar > .date-wrapper.inline { display: inline-flex; } .c-range-calendar > .date-wrapper.fdr { flex-direction: row; } .c-range-calendar > .date-wrapper.fdc { flex-direction: column; } .c-range-calendar > .date-wrapper.aic { align-items: center; } .c-range-calendar > .date-wrapper.ais { align-items: stretch; } .c-range-calendar > .date-wrapper.aifs { align-items: flex-start; } .c-range-calendar > .date-wrapper.aife { align-items: flex-end; } .c-range-calendar > .date-wrapper.acfs { align-content: flex-start; } .c-range-calendar > .date-wrapper.acc { align-content: center; } .c-range-calendar > .date-wrapper.acs { align-content: stretch; } .c-range-calendar > .date-wrapper.jcc { justify-content: center; } .c-range-calendar > .date-wrapper.jcsa { justify-content: space-around; } .c-range-calendar > .date-wrapper.jcsb { justify-content: space-between; } .c-range-calendar > .date-wrapper.jcfs { justify-content: flex-start; } .c-range-calendar > .date-wrapper.jcfe { justify-content: flex-end; } .c-range-calendar > .date-wrapper > .asc { align-self: center; } .c-range-calendar > .date-wrapper > .asfe { align-self: flex-end; } .c-range-calendar > .date-wrapper > .fba { flex-basis: auto !important; } .c-range-calendar > .date-wrapper.fww { flex-wrap: wrap; } .c-range-calendar > .date-wrapper > .grow { flex-grow: 1; } .c-range-calendar > .date-wrapper > .fixed { flex-grow: 0; flex-shrink: 0; } .c-range-calendar > .date-wrapper > .end { margin-left: auto; } .c-range-calendar > .date-wrapper > .center { margin-left: auto; } .c-range-calendar > .date-wrapper > .center:last-child { margin-right: auto; } .c-range-calendar > .date-wrapper.show { border: 1px solid #d9d9d9; border-radius: 5px; height: auto; } .c-range-calendar > .date-wrapper > .date-calendar { display: flex; flex-direction: column; margin: 15px; flex-grow: 0; flex-shrink: 0; } .c-range-calendar > .date-wrapper > .date-calendar.inline { display: inline-flex; } .c-range-calendar > .date-wrapper > .date-calendar.fdr { flex-direction: row; } .c-range-calendar > .date-wrapper > .date-calendar.fdc { flex-direction: column; } .c-range-calendar > .date-wrapper > .date-calendar.aic { align-items: center; } .c-range-calendar > .date-wrapper > .date-calendar.ais { align-items: stretch; } .c-range-calendar > .date-wrapper > .date-calendar.aifs { align-items: flex-start; } .c-range-calendar > .date-wrapper > .date-calendar.aife { align-items: flex-end; } .c-range-calendar > .date-wrapper > .date-calendar.acfs { align-content: flex-start; } .c-range-calendar > .date-wrapper > .date-calendar.acc { align-content: center; } .c-range-calendar > .date-wrapper > .date-calendar.acs { align-content: stretch; } .c-range-calendar > .date-wrapper > .date-calendar.jcc { justify-content: center; } .c-range-calendar > .date-wrapper > .date-calendar.jcsa { justify-content: space-around; } .c-range-calendar > .date-wrapper > .date-calendar.jcsb { justify-content: space-between; } .c-range-calendar > .date-wrapper > .date-calendar.jcfs { justify-content: flex-start; } .c-range-calendar > .date-wrapper > .date-calendar.jcfe { justify-content: flex-end; } .c-range-calendar > .date-wrapper > .date-calendar > .asc { align-self: center; } .c-range-calendar > .date-wrapper > .date-calendar > .asfe { align-self: flex-end; } .c-range-calendar > .date-wrapper > .date-calendar > .fba { flex-basis: auto !important; } .c-range-calendar > .date-wrapper > .date-calendar.fww { flex-wrap: wrap; } .c-range-calendar > .date-wrapper > .date-calendar > .grow { flex-grow: 1; } .c-range-calendar > .date-wrapper > .date-calendar > .fixed { flex-grow: 0; flex-shrink: 0; } .c-range-calendar > .date-wrapper > .date-calendar > .end { margin-left: auto; } .c-range-calendar > .date-wrapper > .date-calendar > .center { margin-left: auto; } .c-range-calendar > .date-wrapper > .date-calendar > .center:last-child { margin-right: auto; } .c-range-calendar > .date-wrapper > .date-calendar > div.flatpickr-calendar.arrowBottom::before, .c-range-calendar > .date-wrapper > .date-calendar div.flatpickr-calendar.arrowBottom::after, .c-range-calendar > .date-wrapper > .date-calendar div.flatpickr-calendar.arrowTop::before, .c-range-calendar > .date-wrapper > .date-calendar div.flatpickr-calendar.arrowTop::after { content: none; } .c-range-calendar > .date-wrapper > .date-calendar > div.flatpickr-calendar div.numInputWrapper input { border: none; border-radius: 0; box-shadow: none; font-size: inherit; } .c-range-calendar > .date-wrapper > .date-calendar > div.flatpickr-calendar div.numInputWrapper input.cur-year { padding: 0 0 0 0.5ch; } .c-range-calendar > .date-wrapper > .date-calendar > div.flatpickr-calendar div.numInputWrapper input.flatpickr-hour, .c-range-calendar > .date-wrapper > .date-calendar > div.flatpickr-calendar div.numInputWrapper input.flatpickr-minute { font-size: 14px; padding: 0; } .c-range-calendar > .date-wrapper > div.c-form { margin: 15px; } .c-range-calendar > .date-wrapper > div.c-form > div.shortcut { width: 170px; } .c-range-calendar > .date-wrapper > div.c-form > div.shortcut > div { display: flex; flex-wrap: wrap; } .c-range-calendar > .date-wrapper > div.c-form > div.shortcut > div > button { margin-bottom: 2%; padding: 0.3em; width: 49%; } .c-range-calendar > .date-wrapper > div.c-form > div.shortcut > div > button:nth-child(even) { margin-left: 2%; } .c-range-calendar > .date-wrapper > div.c-form > button.btn-done { margin-bottom: 4px; margin-top: auto; } .c-file-input { display: flex; position: relative; width: 100%; } .c-file-input.inline { display: inline-flex; } .c-file-input.fdr { flex-direction: row; } .c-file-input.fdc { flex-direction: column; } .c-file-input.aic { align-items: center; } .c-file-input.ais { align-items: stretch; } .c-file-input.aifs { align-items: flex-start; } .c-file-input.aife { align-items: flex-end; } .c-file-input.acfs { align-content: flex-start; } .c-file-input.acc { align-content: center; } .c-file-input.acs { align-content: stretch; } .c-file-input.jcc { justify-content: center; } .c-file-input.jcsa { justify-content: space-around; } .c-file-input.jcsb { justify-content: space-between; } .c-file-input.jcfs { justify-content: flex-start; } .c-file-input.jcfe { justify-content: flex-end; } .c-file-input > .asc { align-self: center; } .c-file-input > .asfe { align-self: flex-end; } .c-file-input > .fba { flex-basis: auto !important; } .c-file-input.fww { flex-wrap: wrap; } .c-file-input > .grow { flex-grow: 1; } .c-file-input > .fixed { flex-grow: 0; flex-shrink: 0; } .c-file-input > .end { margin-left: auto; } .c-file-input > .center { margin-left: auto; } .c-file-input > .center:last-child { margin-right: auto; } .c-file-input > input[type='file'] { opacity: 0; padding: 4px; position: absolute; z-index: 5; width: inherit; } .c-file-input > input[type='file']:hover + button { opacity: 0.9; } .c-file-input > button { border-radius: 4px 0 0 4px; min-width: 105px; position: relative; outline: none; padding: 0; transition: background 0.45s cubic-bezier(0.23, 1, 0.32, 1) 0s; vertical-align: middle; } .c-file-input > button:hover { cursor: pointer; } .c-file-input > input[type='text'] { border-radius: 0 4px 4px 0; left: -6px; margin: 0; vertical-align: middle; flex-grow: 1; flex-shrink: 1; } .c-file-input > input[type='text']:read-only { background: #ffffff; } .c-file-input.clearable > input[type='file'] { width: -webkit-calc(75%); width: -moz-calc(75%); width: calc(75%); } .c-file-input.clearable > input[type='text'] { padding-right: 25px; } .c-file-input.clearable > input[type='text'] + i { display: flex; display: inline-flex; align-items: center; justify-content: center; border-radius: 5px; cursor: pointer; padding: 0; border: none; width: 25px; position: relative; left: -25px; margin-left: 0; margin-right: -25px; } .c-file-input.clearable > input[type='text'] + i.inline { display: inline-flex; } .c-file-input.clearable > input[type='text'] + i.fdr { flex-direction: row; } .c-file-input.clearable > input[type='text'] + i.fdc { flex-direction: column; } .c-file-input.clearable > input[type='text'] + i.aic { align-items: center; } .c-file-input.clearable > input[type='text'] + i.ais { align-items: stretch; } .c-file-input.clearable > input[type='text'] + i.aifs { align-items: flex-start; } .c-file-input.clearable > input[type='text'] + i.aife { align-items: flex-end; } .c-file-input.clearable > input[type='text'] + i.acfs { align-content: flex-start; } .c-file-input.clearable > input[type='text'] + i.acc { align-content: center; } .c-file-input.clearable > input[type='text'] + i.acs { align-content: stretch; } .c-file-input.clearable > input[type='text'] + i.jcc { justify-content: center; } .c-file-input.clearable > input[type='text'] + i.jcsa { justify-content: space-around; } .c-file-input.clearable > input[type='text'] + i.jcsb { justify-content: space-between; } .c-file-input.clearable > input[type='text'] + i.jcfs { justify-content: flex-start; } .c-file-input.clearable > input[type='text'] + i.jcfe { justify-content: flex-end; } .c-file-input.clearable > input[type='text'] + i > .asc { align-self: center; } .c-file-input.clearable > input[type='text'] + i > .asfe { align-self: flex-end; } .c-file-input.clearable > input[type='text'] + i > .fba { flex-basis: auto !important; } .c-file-input.clearable > input[type='text'] + i.fww { flex-wrap: wrap; } .c-file-input.clearable > input[type='text'] + i > .grow { flex-grow: 1; } .c-file-input.clearable > input[type='text'] + i > .fixed { flex-grow: 0; flex-shrink: 0; } .c-file-input.clearable > input[type='text'] + i > .end { margin-left: auto; } .c-file-input.clearable > input[type='text'] + i > .center { margin-left: auto; } .c-file-input.clearable > input[type='text'] + i > .center:last-child { margin-right: auto; } .c-file-input.disabled { opacity: 0.4; } .c-file-input.disabled input, .c-file-input.disabled button { cursor: not-allowed; } .c-file-input.disabled button:hover { background: initial; } .c-file-input:hover > * { cursor: pointer; } .c-search.clearable { display: flex; display: inline-flex; } .c-search.clearable.inline { display: inline-flex; } .c-search.clearable.fdr { flex-direction: row; } .c-search.clearable.fdc { flex-direction: column; } .c-search.clearable.aic { align-items: center; } .c-search.clearable.ais { align-items: stretch; } .c-search.clearable.aifs { align-items: flex-start; } .c-search.clearable.aife { align-items: flex-end; } .c-search.clearable.acfs { align-content: flex-start; } .c-search.clearable.acc { align-content: center; } .c-search.clearable.acs { align-content: stretch; } .c-search.clearable.jcc { justify-content: center; } .c-search.clearable.jcsa { justify-content: space-around; } .c-search.clearable.jcsb { justify-content: space-between; } .c-search.clearable.jcfs { justify-content: flex-start; } .c-search.clearable.jcfe { justify-content: flex-end; } .c-search.clearable > .asc { align-self: center; } .c-search.clearable > .asfe { align-self: flex-end; } .c-search.clearable > .fba { flex-basis: auto !important; } .c-search.clearable.fww { flex-wrap: wrap; } .c-search.clearable > .grow { flex-grow: 1; } .c-search.clearable > .fixed { flex-grow: 0; flex-shrink: 0; } .c-search.clearable > .end { margin-left: auto; } .c-search.clearable > .center { margin-left: auto; } .c-search.clearable > .center:last-child { margin-right: auto; } .c-search.clearable > input[type='text'] { padding-right: 50px; } .c-search.clearable > input[type='text'] + * { position: relative; left: -50px; margin-left: 0; margin-right: -50px; } .c-search.clearable > input[type='text'] + .fg, .c-search.clearable > input[type='text'] + * > .fg { display: flex; display: inline-flex; align-items: center; justify-content: center; border-radius: 5px; cursor: pointer; padding: 0; border: none; width: 25px; } .c-search.clearable > input[type='text'] + .fg.inline, .c-search.clearable > input[type='text'] + * > .fg.inline { display: inline-flex; } .c-search.clearable > input[type='text'] + .fg.fdr, .c-search.clearable > input[type='text'] + * > .fg.fdr { flex-direction: row; } .c-search.clearable > input[type='text'] + .fg.fdc, .c-search.clearable > input[type='text'] + * > .fg.fdc { flex-direction: column; } .c-search.clearable > input[type='text'] + .fg.aic, .c-search.clearable > input[type='text'] + * > .fg.aic { align-items: center; } .c-search.clearable > input[type='text'] + .fg.ais, .c-search.clearable > input[type='text'] + * > .fg.ais { align-items: stretch; } .c-search.clearable > input[type='text'] + .fg.aifs, .c-search.clearable > input[type='text'] + * > .fg.aifs { align-items: flex-start; } .c-search.clearable > input[type='text'] + .fg.aife, .c-search.clearable > input[type='text'] + * > .fg.aife { align-items: flex-end; } .c-search.clearable > input[type='text'] + .fg.acfs, .c-search.clearable > input[type='text'] + * > .fg.acfs { align-content: flex-start; } .c-search.clearable > input[type='text'] + .fg.acc, .c-search.clearable > input[type='text'] + * > .fg.acc { align-content: center; } .c-search.clearable > input[type='text'] + .fg.acs, .c-search.clearable > input[type='text'] + * > .fg.acs { align-content: stretch; } .c-search.clearable > input[type='text'] + .fg.jcc, .c-search.clearable > input[type='text'] + * > .fg.jcc { justify-content: center; } .c-search.clearable > input[type='text'] + .fg.jcsa, .c-search.clearable > input[type='text'] + * > .fg.jcsa { justify-content: space-around; } .c-search.clearable > input[type='text'] + .fg.jcsb, .c-search.clearable > input[type='text'] + * > .fg.jcsb { justify-content: space-between; } .c-search.clearable > input[type='text'] + .fg.jcfs, .c-search.clearable > input[type='text'] + * > .fg.jcfs { justify-content: flex-start; } .c-search.clearable > input[type='text'] + .fg.jcfe, .c-search.clearable > input[type='text'] + * > .fg.jcfe { justify-content: flex-end; } .c-search.clearable > input[type='text'] + .fg > .asc, .c-search.clearable > input[type='text'] + * > .fg > .asc { align-self: center; } .c-search.clearable > input[type='text'] + .fg > .asfe, .c-search.clearable > input[type='text'] + * > .fg > .asfe { align-self: flex-end; } .c-search.clearable > input[type='text'] + .fg > .fba, .c-search.clearable > input[type='text'] + * > .fg > .fba { flex-basis: auto !important; } .c-search.clearable > input[type='text'] + .fg.fww, .c-search.clearable > input[type='text'] + * > .fg.fww { flex-wrap: wrap; } .c-search.clearable > input[type='text'] + .fg > .grow, .c-search.clearable > input[type='text'] + * > .fg > .grow { flex-grow: 1; } .c-search.clearable > input[type='text'] + .fg > .fixed, .c-search.clearable > input[type='text'] + * > .fg > .fixed { flex-grow: 0; flex-shrink: 0; } .c-search.clearable > input[type='text'] + .fg > .end, .c-search.clearable > input[type='text'] + * > .fg > .end { margin-left: auto; } .c-search.clearable > input[type='text'] + .fg > .center, .c-search.clearable > input[type='text'] + * > .fg > .center { margin-left: auto; } .c-search.clearable > input[type='text'] + .fg > .center:last-child, .c-search.clearable > input[type='text'] + * > .fg > .center:last-child { margin-right: auto; } .c-search:not(.clearable).inline { display: inline-flex; } .c-search:not(.clearable).fdr { flex-direction: row; } .c-search:not(.clearable).fdc { flex-direction: column; } .c-search:not(.clearable).aic { align-items: center; } .c-search:not(.clearable).ais { align-items: stretch; } .c-search:not(.clearable).aifs { align-items: flex-start; } .c-search:not(.clearable).aife { align-items: flex-end; } .c-search:not(.clearable).acfs { align-content: flex-start; } .c-search:not(.clearable).acc { align-content: center; } .c-search:not(.clearable).acs { align-content: stretch; } .c-search:not(.clearable).jcc { justify-content: center; } .c-search:not(.clearable).jcsa { justify-content: space-around; } .c-search:not(.clearable).jcsb { justify-content: space-between; } .c-search:not(.clearable).jcfs { justify-content: flex-start; } .c-search:not(.clearable).jcfe { justify-content: flex-end; } .c-search:not(.clearable) > .asc { align-self: center; } .c-search:not(.clearable) > .asfe { align-self: flex-end; } .c-search:not(.clearable) > .fba { flex-basis: auto !important; } .c-search:not(.clearable).fww { flex-wrap: wrap; } .c-search:not(.clearable) > .grow { flex-grow: 1; } .c-search:not(.clearable) > .fixed { flex-grow: 0; flex-shrink: 0; } .c-search:not(.clearable) > .end { margin-left: auto; } .c-search:not(.clearable) > .center { margin-left: auto; } .c-search:not(.clearable) > .center:last-child { margin-right: auto; } .c-search:not(.clearable) > input[type='text'] { padding-right: 25px; } .c-search:not(.clearable) > input[type='text'] + .fg, .c-search:not(.clearable) > input[type='text'] + * > .fg { display: flex; display: inline-flex; align-items: center; justify-content: center; border-radius: 5px; cursor: pointer; padding: 0; border: none; width: 25px; } .c-search:not(.clearable) > input[type='text'] + .fg.inline, .c-search:not(.clearable) > input[type='text'] + * > .fg.inline { display: inline-flex; } .c-search:not(.clearable) > input[type='text'] + .fg.fdr, .c-search:not(.clearable) > input[type='text'] + * > .fg.fdr { flex-direction: row; } .c-search:not(.clearable) > input[type='text'] + .fg.fdc, .c-search:not(.clearable) > input[type='text'] + * > .fg.fdc { flex-direction: column; } .c-search:not(.clearable) > input[type='text'] + .fg.aic, .c-search:not(.clearable) > input[type='text'] + * > .fg.aic { align-items: center; } .c-search:not(.clearable) > input[type='text'] + .fg.ais, .c-search:not(.clearable) > input[type='text'] + * > .fg.ais { align-items: stretch; } .c-search:not(.clearable) > input[type='text'] + .fg.aifs, .c-search:not(.clearable) > input[type='text'] + * > .fg.aifs { align-items: flex-start; } .c-search:not(.clearable) > input[type='text'] + .fg.aife, .c-search:not(.clearable) > input[type='text'] + * > .fg.aife { align-items: flex-end; } .c-search:not(.clearable) > input[type='text'] + .fg.acfs, .c-search:not(.clearable) > input[type='text'] + * > .fg.acfs { align-content: flex-start; } .c-search:not(.clearable) > input[type='text'] + .fg.acc, .c-search:not(.clearable) > input[type='text'] + * > .fg.acc { align-content: center; } .c-search:not(.clearable) > input[type='text'] + .fg.acs, .c-search:not(.clearable) > input[type='text'] + * > .fg.acs { align-content: stretch; } .c-search:not(.clearable) > input[type='text'] + .fg.jcc, .c-search:not(.clearable) > input[type='text'] + * > .fg.jcc { justify-content: center; } .c-search:not(.clearable) > input[type='text'] + .fg.jcsa, .c-search:not(.clearable) > input[type='text'] + * > .fg.jcsa { justify-content: space-around; } .c-search:not(.clearable) > input[type='text'] + .fg.jcsb, .c-search:not(.clearable) > input[type='text'] + * > .fg.jcsb { justify-content: space-between; } .c-search:not(.clearable) > input[type='text'] + .fg.jcfs, .c-search:not(.clearable) > input[type='text'] + * > .fg.jcfs { justify-content: flex-start; } .c-search:not(.clearable) > input[type='text'] + .fg.jcfe, .c-search:not(.clearable) > input[type='text'] + * > .fg.jcfe { justify-content: flex-end; } .c-search:not(.clearable) > input[type='text'] + .fg > .asc, .c-search:not(.clearable) > input[type='text'] + * > .fg > .asc { align-self: center; } .c-search:not(.clearable) > input[type='text'] + .fg > .asfe, .c-search:not(.clearable) > input[type='text'] + * > .fg > .asfe { align-self: flex-end; } .c-search:not(.clearable) > input[type='text'] + .fg > .fba, .c-search:not(.clearable) > input[type='text'] + * > .fg > .fba { flex-basis: auto !important; } .c-search:not(.clearable) > input[type='text'] + .fg.fww, .c-search:not(.clearable) > input[type='text'] + * > .fg.fww { flex-wrap: wrap; } .c-search:not(.clearable) > input[type='text'] + .fg > .grow, .c-search:not(.clearable) > input[type='text'] + * > .fg > .grow { flex-grow: 1; } .c-search:not(.clearable) > input[type='text'] + .fg > .fixed, .c-search:not(.clearable) > input[type='text'] + * > .fg > .fixed { flex-grow: 0; flex-shrink: 0; } .c-search:not(.clearable) > input[type='text'] + .fg > .end, .c-search:not(.clearable) > input[type='text'] + * > .fg > .end { margin-left: auto; } .c-search:not(.clearable) > input[type='text'] + .fg > .center, .c-search:not(.clearable) > input[type='text'] + * > .fg > .center { margin-left: auto; } .c-search:not(.clearable) > input[type='text'] + .fg > .center:last-child, .c-search:not(.clearable) > input[type='text'] + * > .fg > .center:last-child { margin-right: auto; } .c-slider.progress { position: relative; display: inline-block; } .c-slider:hover { cursor: pointer; } .c-slider:hover input[type=range]::-webkit-slider-thumb { background: #1a3248; } .c-slider:hover input[type=range]::-moz-range-thumb { background: #1a3248; } .c-slider:hover input[type=range] + div.progress { background: #1a3248; } .c-slider:hover input[type=range]:disabled + div.progress:before, .c-slider:hover input[type=range]:disabled + div.progress:after { opacity: 0; } .c-slider:hover input[type=range] + div.progress:before, .c-slider:hover input[type=range] + div.progress:after { opacity: 1; } .c-slider:active { cursor: pointer; } .c-slider:active input[type=range]::-webkit-slider-thumb { background: #33485c; } .c-slider:active input[type=range]::-moz-range-thumb { background: #33485c; } .c-slider:active input[type=range] + div.progress { background: #33485c; } .c-slider > .c-flex.aic { position: relative; } .c-slider input[type=range] { /*The thumb height also determines the slider's height*/ -webkit-appearance: none; -moz-appearance: none; background: none; height: 12px; margin: 0 7px; outline: none; position: relative; width: inherit; } .c-slider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; background: #001b34; border: none; border-radius: 50%; height: 12px; position: relative; top: -4px; transition: box-shadow 0.35s cubic-bezier(0.23, 1, 0.32, 1) 0s; width: 12px; } .c-slider input[type=range]::-moz-range-thumb { box-sizing: border-box; -moz-appearance: none; background: #001b34; border: none; border-radius: 50%; height: 12px; position: relative; top: -4px; transition: box-shadow 0.35s cubic-bezier(0.23, 1, 0.32, 1) 0s; width: 12px; } .c-slider input[type=range]::-webkit-slider-runnable-track { background: #e5e5e5; border: none; border-radius: 2px; box-sizing: border-box; cursor: pointer; height: 4px; transition: background 0.12s; width: 100%; } .c-slider input[type=range]::-moz-range-track { background: #e5e5e5; border: none; border-radius: 2px; box-sizing: border-box; cursor: pointer; height: 4px; transition: background 0.12s; width: 100%; } .c-slider input[type=range] + div.progress { background: #001b34; border-radius: 2px; height: 4px; left: 0; margin-left: 7px; position: absolute; pointer-events: none; top: 4px; } .c-slider input[type=range] + div.progress:before { content: attr(data-tooltip); background: #1a3248; color: #ffffff; padding-bottom: 0.1em; position: absolute; top: -900%; margin-left: calc(87%); width: 2em; text-align: center; border-radius: 3px; box-shadow: 0px 4px 6px 2px rgba(155, 155, 155, 0.5); } .c-slider input[type=range] + div.progress:after { content: ""; position: absolute; width: 0; height: 0; top: -400%; left: 90%; border-width: 8px; border-style: solid; border-color: #1a3248 transparent transparent transparent; } .c-slider input[type=range] + div.progress:before, .c-slider input[type=range] + div.progress:after { opacity: 0; } .c-slider input[type=range]:disabled + div.progress { background: #8C97A1; } .c-slider input[type=range]:disabled::-webkit-slider-thumb { background: #8C97A1; } .c-toggle-btn { border: 1px solid #adadad; box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.117647), 0px 1px 4px rgba(0, 0, 0, 0.117647); border-radius: 15px; box-sizing: border-box; font-size: .8em; height: 24px; overflow: hidden; position: relative !important; width: 60px; } .c-toggle-btn.disabled { opacity: .4; } .c-toggle-btn > input[type=checkbox] { cursor: pointer; opacity: 0 !important; position: absolute !important; height: 100%; width: 100%; z-index: 999; } .c-toggle-btn > input[type=checkbox]:checked + div { left: -20%; } .c-toggle-btn > input[type=checkbox]:disabled { cursor: not-allowed; } .c-toggle-btn > div { align-items: center; bottom: 0; box-sizing: border-box; display: flex !important; justify-content: center; left: -80%; position: absolute !important; text-align: center; top: 0; transition: left 0.35s ease-out; width: 200%; } .c-toggle-btn > div > label { align-items: center; box-sizing: border-box; cursor: pointer; display: flex !important; height: 100%; justify-content: center; margin: 0 !important; max-width: 50%; position: absolute !important; text-align: center; top: 0; white-space: nowrap; width: 50%; } .c-toggle-btn > div > label.on { background: #5e6fd9; color: #fff; right: 50%; } .c-toggle-btn > div > label.off { background: #fff; color: #202020; left: 50%; } .c-toggle-btn > div > span { background: #f4f3f3; border: 1px solid #adadad; border-radius: 50%; cursor: pointer; display: inline-block !important; height: 110%; line-height: normal; position: relative !important; width: 22%; } .c-multi > .group { flex-shrink: 0; display: flex; display: inline-flex; } .c-multi > .group.inline { display: inline-flex; } .c-multi > .group.fdr { flex-direction: row; } .c-multi > .group.fdc { flex-direction: column; } .c-multi > .group.aic { align-items: center; } .c-multi > .group.ais { align-items: stretch; } .c-multi > .group.aifs { align-items: flex-start; } .c-multi > .group.aife { align-items: flex-end; } .c-multi > .group.acfs { align-content: flex-start; } .c-multi > .group.acc { align-content: center; } .c-multi > .group.acs { align-content: stretch; } .c-multi > .group.jcc { justify-content: center; } .c-multi > .group.jcsa { justify-content: space-around; } .c-multi > .group.jcsb { justify-content: space-between; } .c-multi > .group.jcfs { justify-content: flex-start; } .c-multi > .group.jcfe { justify-content: flex-end; } .c-multi > .group > .asc { align-self: center; } .c-multi > .group > .asfe { align-self: flex-end; } .c-multi > .group > .fba { flex-basis: auto !important; } .c-multi > .group.fww { flex-wrap: wrap; } .c-multi > .group > .grow { flex-grow: 1; } .c-multi > .group > .fixed { flex-grow: 0; flex-shrink: 0; } .c-multi > .group > .end { margin-left: auto; } .c-multi > .group > .center { margin-left: auto; } .c-multi > .group > .center:last-child { margin-right: auto; } .c-multi > .group > *:not(:first-child) { margin-left: 3px; } .c-multi .fg-add, .c-multi .fg-close { display: flex; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #d9d9d9; border-radius: 5px; cursor: pointer; width: 32px; padding: 0; } .c-multi .fg-add.inline, .c-multi .fg-close.inline { display: inline-flex; } .c-multi .fg-add.fdr, .c-multi .fg-close.fdr { flex-direction: row; } .c-multi .fg-add.fdc, .c-multi .fg-close.fdc { flex-direction: column; } .c-multi .fg-add.aic, .c-multi .fg-close.aic { align-items: center; } .c-multi .fg-add.ais, .c-multi .fg-close.ais { align-items: stretch; } .c-multi .fg-add.aifs, .c-multi .fg-close.aifs { align-items: flex-start; } .c-multi .fg-add.aife, .c-multi .fg-close.aife { align-items: flex-end; } .c-multi .fg-add.acfs, .c-multi .fg-close.acfs { align-content: flex-start; } .c-multi .fg-add.acc, .c-multi .fg-close.acc { align-content: center; } .c-multi .fg-add.acs, .c-multi .fg-close.acs { align-content: stretch; } .c-multi .fg-add.jcc, .c-multi .fg-close.jcc { justify-content: center; } .c-multi .fg-add.jcsa, .c-multi .fg-close.jcsa { justify-content: space-around; } .c-multi .fg-add.jcsb, .c-multi .fg-close.jcsb { justify-content: space-between; } .c-multi .fg-add.jcfs, .c-multi .fg-close.jcfs { justify-content: flex-start; } .c-multi .fg-add.jcfe, .c-multi .fg-close.jcfe { justify-content: flex-end; } .c-multi .fg-add > .asc, .c-multi .fg-close > .asc { align-self: center; } .c-multi .fg-add > .asfe, .c-multi .fg-close > .asfe { align-self: flex-end; } .c-multi .fg-add > .fba, .c-multi .fg-close > .fba { flex-basis: auto !important; } .c-multi .fg-add.fww, .c-multi .fg-close.fww { flex-wrap: wrap; } .c-multi .fg-add > .grow, .c-multi .fg-close > .grow { flex-grow: 1; } .c-multi .fg-add > .fixed, .c-multi .fg-close > .fixed { flex-grow: 0; flex-shrink: 0; } .c-multi .fg-add > .end, .c-multi .fg-close > .end { margin-left: auto; } .c-multi .fg-add > .center, .c-multi .fg-close > .center { margin-left: auto; } .c-multi .fg-add > .center:last-child, .c-multi .fg-close > .center:last-child { margin-right: auto; } .c-multi:not(.inline) { display: flex; flex-direction: column; } .c-multi:not(.inline).inline { display: inline-flex; } .c-multi:not(.inline).fdr { flex-direction: row; } .c-multi:not(.inline).fdc { flex-direction: column; } .c-multi:not(.inline).aic { align-items: center; } .c-multi:not(.inline).ais { align-items: stretch; } .c-multi:not(.inline).aifs { align-items: flex-start; } .c-multi:not(.inline).aife { align-items: flex-end; } .c-multi:not(.inline).acfs { align-content: flex-start; } .c-multi:not(.inline).acc { align-content: center; } .c-multi:not(.inline).acs { align-content: stretch; } .c-multi:not(.inline).jcc { justify-content: center; } .c-multi:not(.inline).jcsa { justify-content: space-around; } .c-multi:not(.inline).jcsb { justify-content: space-between; } .c-multi:not(.inline).jcfs { justify-content: flex-start; } .c-multi:not(.inline).jcfe { justify-content: flex-end; } .c-multi:not(.inline) > .asc { align-self: center; } .c-multi:not(.inline) > .asfe { align-self: flex-end; } .c-multi:not(.inline) > .fba { flex-basis: auto !important; } .c-multi:not(.inline).fww { flex-wrap: wrap; } .c-multi:not(.inline) > .grow { flex-grow: 1; } .c-multi:not(.inline) > .fixed { flex-grow: 0; flex-shrink: 0; } .c-multi:not(.inline) > .end { margin-left: auto; } .c-multi:not(.inline) > .center { margin-left: auto; } .c-multi:not(.inline) > .center:last-child { margin-right: auto; } .c-multi:not(.inline) > .group > .add.disabled { visibility: hidden; } .c-multi:not(.boxed) > .group { margin-bottom: 1px; } .c-multi.inline { display: flex; display: inline-flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; } .c-multi.inline.inline { display: inline-flex; } .c-multi.inline.fdr { flex-direction: row; } .c-multi.inline.fdc { flex-direction: column; } .c-multi.inline.aic { align-items: center; } .c-multi.inline.ais { align-items: stretch; } .c-multi.inline.aifs { align-items: flex-start; } .c-multi.inline.aife { align-items: flex-end; } .c-multi.inline.acfs { align-content: flex-start; } .c-multi.inline.acc { align-content: center; } .c-multi.inline.acs { align-content: stretch; } .c-multi.inline.jcc { justify-content: center; } .c-multi.inline.jcsa { justify-content: space-around; } .c-multi.inline.jcsb { justify-content: space-between; } .c-multi.inline.jcfs { justify-content: flex-start; } .c-multi.inline.jcfe { justify-content: flex-end; } .c-multi.inline > .asc { align-self: center; } .c-multi.inline > .asfe { align-self: flex-end; } .c-multi.inline > .fba { flex-basis: auto !important; } .c-multi.inline.fww { flex-wrap: wrap; } .c-multi.inline > .grow { flex-grow: 1; } .c-multi.inline > .fixed { flex-grow: 0; flex-shrink: 0; } .c-multi.inline > .end { margin-left: auto; } .c-multi.inline > .center { margin-left: auto; } .c-multi.inline > .center:last-child { margin-right: auto; } .c-multi.inline > .group > .add.disabled { display: none; } .c-multi.inline > .group { padding-right: 2px; display: flex; display: inline-flex; } .c-multi.inline > .group.inline { display: inline-flex; } .c-multi.inline > .group.fdr { flex-direction: row; } .c-multi.inline > .group.fdc { flex-direction: column; } .c-multi.inline > .group.aic { align-items: center; } .c-multi.inline > .group.ais { align-items: stretch; } .c-multi.inline > .group.aifs { align-items: flex-start; } .c-multi.inline > .group.aife { align-items: flex-end; } .c-multi.inline > .group.acfs { align-content: flex-start; } .c-multi.inline > .group.acc { align-content: center; } .c-multi.inline > .group.acs { align-content: stretch; } .c-multi.inline > .group.jcc { justify-content: center; } .c-multi.inline > .group.jcsa { justify-content: space-around; } .c-multi.inline > .group.jcsb { justify-content: space-between; } .c-multi.inline > .group.jcfs { justify-content: flex-start; } .c-multi.inline > .group.jcfe { justify-content: flex-end; } .c-multi.inline > .group > .asc { align-self: center; } .c-multi.inline > .group > .asfe { align-self: flex-end; } .c-multi.inline > .group > .fba { flex-basis: auto !important; } .c-multi.inline > .group.fww { flex-wrap: wrap; } .c-multi.inline > .group > .grow { flex-grow: 1; } .c-multi.inline > .group > .fixed { flex-grow: 0; flex-shrink: 0; } .c-multi.inline > .group > .end { margin-left: auto; } .c-multi.inline > .group > .center { margin-left: auto; } .c-multi.inline > .group > .center:last-child { margin-right: auto; } .c-multi.inline > .group > input[type='text'] { padding-right: 32px; } .c-multi.inline > .group > input[type='text'] + * { position: relative; left: -32px; margin-left: 0; margin-right: -32px; } .c-multi.inline > .group > input[type='text'] + .fg, .c-multi.inline > .group > input[type='text'] + * > .fg { display: flex; display: inline-flex; align-items: center; justify-content: center; border-radius: 5px; cursor: pointer; padding: 0; border: none; width: 32px; } .c-multi.inline > .group > input[type='text'] + .fg.inline, .c-multi.inline > .group > input[type='text'] + * > .fg.inline { display: inline-flex; } .c-multi.inline > .group > input[type='text'] + .fg.fdr, .c-multi.inline > .group > input[type='text'] + * > .fg.fdr { flex-direction: row; } .c-multi.inline > .group > input[type='text'] + .fg.fdc, .c-multi.inline > .group > input[type='text'] + * > .fg.fdc { flex-direction: column; } .c-multi.inline > .group > input[type='text'] + .fg.aic, .c-multi.inline > .group > input[type='text'] + * > .fg.aic { align-items: center; } .c-multi.inline > .group > input[type='text'] + .fg.ais, .c-multi.inline > .group > input[type='text'] + * > .fg.ais { align-items: stretch; } .c-multi.inline > .group > input[type='text'] + .fg.aifs, .c-multi.inline > .group > input[type='text'] + * > .fg.aifs { align-items: flex-start; } .c-multi.inline > .group > input[type='text'] + .fg.aife, .c-multi.inline > .group > input[type='text'] + * > .fg.aife { align-items: flex-end; } .c-multi.inline > .group > input[type='text'] + .fg.acfs, .c-multi.inline > .group > input[type='text'] + * > .fg.acfs { align-content: flex-start; } .c-multi.inline > .group > input[type='text'] + .fg.acc, .c-multi.inline > .group > input[type='text'] + * > .fg.acc { align-content: center; } .c-multi.inline > .group > input[type='text'] + .fg.acs, .c-multi.inline > .group > input[type='text'] + * > .fg.acs { align-content: stretch; } .c-multi.inline > .group > input[type='text'] + .fg.jcc, .c-multi.inline > .group > input[type='text'] + * > .fg.jcc { justify-content: center; } .c-multi.inline > .group > input[type='text'] + .fg.jcsa, .c-multi.inline > .group > input[type='text'] + * > .fg.jcsa { justify-content: space-around; } .c-multi.inline > .group > input[type='text'] + .fg.jcsb, .c-multi.inline > .group > input[type='text'] + * > .fg.jcsb { justify-content: space-between; } .c-multi.inline > .group > input[type='text'] + .fg.jcfs, .c-multi.inline > .group > input[type='text'] + * > .fg.jcfs { justify-content: flex-start; } .c-multi.inline > .group > input[type='text'] + .fg.jcfe, .c-multi.inline > .group > input[type='text'] + * > .fg.jcfe { justify-content: flex-end; } .c-multi.inline > .group > input[type='text'] + .fg > .asc, .c-multi.inline > .group > input[type='text'] + * > .fg > .asc { align-self: center; } .c-multi.inline > .group > input[type='text'] + .fg > .asfe, .c-multi.inline > .group > input[type='text'] + * > .fg > .asfe { align-self: flex-end; } .c-multi.inline > .group > input[type='text'] + .fg > .fba, .c-multi.inline > .group > input[type='text'] + * > .fg > .fba { flex-basis: auto !important; } .c-multi.inline > .group > input[type='text'] + .fg.fww, .c-multi.inline > .group > input[type='text'] + * > .fg.fww { flex-wrap: wrap; } .c-multi.inline > .group > input[type='text'] + .fg > .grow, .c-multi.inline > .group > input[type='text'] + * > .fg > .grow { flex-grow: 1; } .c-multi.inline > .group > input[type='text'] + .fg > .fixed, .c-multi.inline > .group > input[type='text'] + * > .fg > .fixed { flex-grow: 0; flex-shrink: 0; } .c-multi.inline > .group > input[type='text'] + .fg > .end, .c-multi.inline > .group > input[type='text'] + * > .fg > .end { margin-left: auto; } .c-multi.inline > .group > input[type='text'] + .fg > .center, .c-multi.inline > .group > input[type='text'] + * > .fg > .center { margin-left: auto; } .c-multi.inline > .group > input[type='text'] + .fg > .center:last-child, .c-multi.inline > .group > input[type='text'] + * > .fg > .center:last-child { margin-right: auto; } .c-multi.boxed > .group { margin-bottom: 5px; border: 1px solid #d9d9d9; border-radius: 5px; } .c-multi.boxed > .group > *:first-child { flex-grow: 1; flex-shrink: 1; } .c-multi.boxed > .group > .remove { padding: 5px; margin: 5px; width: auto; align-self: flex-start; flex-grow: 0; flex-shrink: 0; } .c-multi.boxed > .group > .remove.fg { border: none; font-size: 1.1rem; margin: 0; } .c-multi.expand > .group > *:first-child { flex-grow: 1; } .c-multi.expand > .group > *:first-child.c-combobox > input { flex-grow: 1; } .c-checkbox-group, .c-radio-group { display: flex; flex-wrap: wrap; } .c-checkbox-group.inline, .c-radio-group.inline { display: inline-flex; } .c-checkbox-group.fdr, .c-radio-group.fdr { flex-direction: row; } .c-checkbox-group.fdc, .c-radio-group.fdc { flex-direction: column; } .c-checkbox-group.aic, .c-radio-group.aic { align-items: center; } .c-checkbox-group.ais, .c-radio-group.ais { align-items: stretch; } .c-checkbox-group.aifs, .c-radio-group.aifs { align-items: flex-start; } .c-checkbox-group.aife, .c-radio-group.aife { align-items: flex-end; } .c-checkbox-group.acfs, .c-radio-group.acfs { align-content: flex-start; } .c-checkbox-group.acc, .c-radio-group.acc { align-content: center; } .c-checkbox-group.acs, .c-radio-group.acs { align-content: stretch; } .c-checkbox-group.jcc, .c-radio-group.jcc { justify-content: center; } .c-checkbox-group.jcsa, .c-radio-group.jcsa { justify-content: space-around; } .c-checkbox-group.jcsb, .c-radio-group.jcsb { justify-content: space-between; } .c-checkbox-group.jcfs, .c-radio-group.jcfs { justify-content: flex-start; } .c-checkbox-group.jcfe, .c-radio-group.jcfe { justify-content: flex-end; } .c-checkbox-group > .asc, .c-radio-group > .asc { align-self: center; } .c-checkbox-group > .asfe, .c-radio-group > .asfe { align-self: flex-end; } .c-checkbox-group > .fba, .c-radio-group > .fba { flex-basis: auto !important; } .c-checkbox-group.fww, .c-radio-group.fww { flex-wrap: wrap; } .c-checkbox-group > .grow, .c-radio-group > .grow { flex-grow: 1; } .c-checkbox-group > .fixed, .c-radio-group > .fixed { flex-grow: 0; flex-shrink: 0; } .c-checkbox-group > .end, .c-radio-group > .end { margin-left: auto; } .c-checkbox-group > .center, .c-radio-group > .center { margin-left: auto; } .c-checkbox-group > .center:last-child, .c-radio-group > .center:last-child { margin-right: auto; } .c-checkbox-group > .list-item, .c-radio-group > .list-item { display: flex; display: inline-flex; align-items: center; } .c-checkbox-group > .list-item.inline, .c-radio-group > .list-item.inline { display: inline-flex; } .c-checkbox-group > .list-item.fdr, .c-radio-group > .list-item.fdr { flex-direction: row; } .c-checkbox-group > .list-item.fdc, .c-radio-group > .list-item.fdc { flex-direction: column; } .c-checkbox-group > .list-item.aic, .c-radio-group > .list-item.aic { align-items: center; } .c-checkbox-group > .list-item.ais, .c-radio-group > .list-item.ais { align-items: stretch; } .c-checkbox-group > .list-item.aifs, .c-radio-group > .list-item.aifs { align-items: flex-start; } .c-checkbox-group > .list-item.aife, .c-radio-group > .list-item.aife { align-items: flex-end; } .c-checkbox-group > .list-item.acfs, .c-radio-group > .list-item.acfs { align-content: flex-start; } .c-checkbox-group > .list-item.acc, .c-radio-group > .list-item.acc { align-content: center; } .c-checkbox-group > .list-item.acs, .c-radio-group > .list-item.acs { align-content: stretch; } .c-checkbox-group > .list-item.jcc, .c-radio-group > .list-item.jcc { justify-content: center; } .c-checkbox-group > .list-item.jcsa, .c-radio-group > .list-item.jcsa { justify-content: space-around; } .c-checkbox-group > .list-item.jcsb, .c-radio-group > .list-item.jcsb { justify-content: space-between; } .c-checkbox-group > .list-item.jcfs, .c-radio-group > .list-item.jcfs { justify-content: flex-start; } .c-checkbox-group > .list-item.jcfe, .c-radio-group > .list-item.jcfe { justify-content: flex-end; } .c-checkbox-group > .list-item > .asc, .c-radio-group > .list-item > .asc { align-self: center; } .c-checkbox-group > .list-item > .asfe, .c-radio-group > .list-item > .asfe { align-self: flex-end; } .c-checkbox-group > .list-item > .fba, .c-radio-group > .list-item > .fba { flex-basis: auto !important; } .c-checkbox-group > .list-item.fww, .c-radio-group > .list-item.fww { flex-wrap: wrap; } .c-checkbox-group > .list-item > .grow, .c-radio-group > .list-item > .grow { flex-grow: 1; } .c-checkbox-group > .list-item > .fixed, .c-radio-group > .list-item > .fixed { flex-grow: 0; flex-shrink: 0; } .c-checkbox-group > .list-item > .end, .c-radio-group > .list-item > .end { margin-left: auto; } .c-checkbox-group > .list-item > .center, .c-radio-group > .list-item > .center { margin-left: auto; } .c-checkbox-group > .list-item > .center:last-child, .c-radio-group > .list-item > .center:last-child { margin-right: auto; } .c-checkbox-group > .list-item > *:first-child, .c-radio-group > .list-item > *:first-child { margin: 0 5px 0 0; } .c-checkbox-group.inline, .c-radio-group.inline { display: inline-flex; } .c-checkbox-group.inline > .list-item:not(:last-child), .c-radio-group.inline > .list-item:not(:last-child) { margin: 0 0.8em 0 0; } .c-checkbox-group:not(.inline), .c-radio-group:not(.inline) { flex-direction: column; } .c-checkbox-group:not(.inline) > .list-item:not(:last-child), .c-radio-group:not(.inline) > .list-item:not(:last-child) { margin: 0 0 0.6em 0; } .c-form-item { display: flex; flex-direction: column; flex-grow: 0; flex-shrink: 0; margin-bottom: 0.7em; } .c-form-item.inline { display: inline-flex; } .c-form-item.fdr { flex-direction: row; } .c-form-item.fdc { flex-direction: column; } .c-form-item.aic { align-items: center; } .c-form-item.ais { align-items: stretch; } .c-form-item.aifs { align-items: flex-start; } .c-form-item.aife { align-items: flex-end; } .c-form-item.acfs { align-content: flex-start; } .c-form-item.acc { align-content: center; } .c-form-item.acs { align-content: stretch; } .c-form-item.jcc { justify-content: center; } .c-form-item.jcsa { justify-content: space-around; } .c-form-item.jcsb { justify-content: space-between; } .c-form-item.jcfs { justify-content: flex-start; } .c-form-item.jcfe { justify-content: flex-end; } .c-form-item > .asc { align-self: center; } .c-form-item > .asfe { align-self: flex-end; } .c-form-item > .fba { flex-basis: auto !important; } .c-form-item.fww { flex-wrap: wrap; } .c-form-item > .grow { flex-grow: 1; } .c-form-item > .fixed { flex-grow: 0; flex-shrink: 0; } .c-form-item > .end { margin-left: auto; } .c-form-item > .center { margin-left: auto; } .c-form-item > .center:last-child { margin-right: auto; } .c-form-item.group > label + * { padding: 10px; border: 1px solid #d9d9d9; border-radius: 5px; } .c-form-item > label { margin: 0 0.5em 0.2em 0; font-size: 0.85rem; } .c-form-item > label.required::after { content: '*'; color: #d0021b; font-weight: bold; } .c-form-item.inline { flex-direction: row; } .c-form-item.inline > label { margin-bottom: 0; } .c-result-item { margin-bottom: 0.6em; } .c-result-item > label { margin: 0 0.5em 0.2em 0; font-size: 0.85rem; } .c-result-item.group > label + * { padding: 10px; border: 1px solid #d9d9d9; border-radius: 5px; } .c-result-item > label + div { font-size: 1.1em; font-weight: bold; border-bottom: 1px solid #d9d9d9; } .c-result-item > label + div.action { display: flex; align-items: center; } .c-result-item > label + div.action > i:last-child { margin-left: auto; } .c-result-item > label + div.action i.fg { font-size: 1.7rem; } .c-form:not(.aligned), .c-result:not(.aligned) { display: flex; flex-direction: column; } .c-form:not(.aligned):not(.nopad), .c-result:not(.aligned):not(.nopad) { padding: 10px; } .c-form.inline:not(.aligned), .c-result.inline:not(.aligned) { flex-direction: row; align-content: flex-start; flex-wrap: wrap; } .c-form.inline:not(.aligned) > div:not(:last-child), .c-result.inline:not(.aligned) > div:not(:last-child) { margin-right: 20px; } .c-form.aligned, .c-result.aligned { display: table; } .c-form.aligned:not(.nospacing), .c-result.aligned:not(.nospacing) { border-spacing: 10px; } .c-form.aligned > div, .c-result.aligned > div { display: table-row; } .c-form.aligned > div > label, .c-result.aligned > div > label { display: table-cell; text-align: right; } .c-form.aligned > div > label:not(:first-child):not(:empty), .c-result.aligned > div > label:not(:first-child):not(:empty) { padding-left: 10px; } .c-form.aligned.left > div > label, .c-result.aligned.left > div > label { text-align: left; } .c-form > div { display: flex; flex-direction: column; flex-grow: 0; flex-shrink: 0; margin-bottom: 0.7em; } .c-form > div.inline { display: inline-flex; } .c-form > div.fdr { flex-direction: row; } .c-form > div.fdc { flex-direction: column; } .c-form > div.aic { align-items: center; } .c-form > div.ais { align-items: stretch; } .c-form > div.aifs { align-items: flex-start; } .c-form > div.aife { align-items: flex-end; } .c-form > div.acfs { align-content: flex-start; } .c-form > div.acc { align-content: center; } .c-form > div.acs { align-content: stretch; } .c-form > div.jcc { justify-content: center; } .c-form > div.jcsa { justify-content: space-around; } .c-form > div.jcsb { justify-content: space-between; } .c-form > div.jcfs { justify-content: flex-start; } .c-form > div.jcfe { justify-content: flex-end; } .c-form > div > .asc { align-self: center; } .c-form > div > .asfe { align-self: flex-end; } .c-form > div > .fba { flex-basis: auto !important; } .c-form > div.fww { flex-wrap: wrap; } .c-form > div > .grow { flex-grow: 1; } .c-form > div > .fixed { flex-grow: 0; flex-shrink: 0; } .c-form > div > .end { margin-left: auto; } .c-form > div > .center { margin-left: auto; } .c-form > div > .center:last-child { margin-right: auto; } .c-form > div.group > label + * { padding: 10px; border: 1px solid #d9d9d9; border-radius: 5px; } .c-form > div > label { margin: 0 0.5em 0.2em 0; font-size: 0.85rem; } .c-form > div > label.required::after { content: '*'; color: #d0021b; font-weight: bold; } .c-form > div.inline { flex-direction: row; } .c-form > div.inline > label { margin-bottom: 0; } .c-form-container.c-box { border: none; } .c-form-container.c-box.c-border { border: 1px solid #d9d9d9; } .c-result > div { margin-bottom: 0.6em; } .c-result > div > label { margin: 0 0.5em 0.2em 0; font-size: 0.85rem; } .c-result > div.group > label + * { padding: 10px; border: 1px solid #d9d9d9; border-radius: 5px; } .c-result > div > label + div { font-size: 1.1em; font-weight: bold; border-bottom: 1px solid #d9d9d9; } .c-result > div > label + div.action { display: flex; align-items: center; } .c-result > div > label + div.action > i:last-child { margin-left: auto; } .c-result > div > label + div.action i.fg { font-size: 1.7rem; } .c-box { display: inline-flex; flex-direction: column; position: relative; background-color: #eee; padding: 10px; } .c-box > header, .c-box > footer { flex-grow: 0; flex-shrink: 0; } .c-box > header, .c-box > footer, .c-box > .content { padding: 10px; } .c-box > footer { text-align: right; border-top: 1px solid #d9d9d9; } .c-box > header { font-weight: bold; color: #004d93; } .c-box > header > i { color: #4a4a4a; } .c-box > header:not(.legend) { border-bottom: 1px solid #d9d9d9; } .c-box > header.legend { display: flex; align-items: center; } .c-box > header.legend:after { content: ''; border-top: 1px solid #d9d9d9; flex-grow: 1; flex-shrink: 1; margin-left: 2.5em; } .c-box > .content { text-align: left; flex-grow: 1; overflow-y: auto; position: relative; font-size: 0.95em; } .c-box > .content.centered { text-align: center; } .c-box > .content.shrink { font-size: 0.95em; } .c-box > .content.nopad { padding: 0; } .c-box.noborder { border: none; } .c-box > header.handle { cursor: move; } .c-box.content { display: block; text-align: left; border: 1px solid #d9d9d9; padding: 10px; overflow-y: auto; } .c-box.content.shrink { font-size: 0.95em; } .c-box.search > footer { border-top: none; } .c-box.search > footer button { width: 100%; margin-left: 0; } .c-contextmenu { position: fixed; z-index: 1; } .c-contextmenu li.hide { display: none; } .c-hierarchy { overflow-y: auto; } .c-hierarchy .node { cursor: pointer; } .c-hierarchy .node:hover:not(.current) { color: #004d93; } .c-hierarchy .node.current { color: #004d93; } .c-hierarchy .node .selector { margin-right: 0.2em; } .c-hierarchy .node .toggler i { vertical-align: middle; } .c-hierarchy.accordion .leaf { background-color: #f2f2f2; } .c-hierarchy.accordion .node { border-bottom: 1px solid #d9d9d9; padding: 7px 4px; } .c-hierarchy.tree { background-color: #ffffff; /* (indentation/2) */ } .c-hierarchy.tree .branch, .c-hierarchy.tree .leaf { position: relative; padding: 0 0 0 1.5em; /* indentation + .5em */ } .c-hierarchy.tree .branch .node, .c-hierarchy.tree .leaf .node { padding: 4px 4px; } .c-hierarchy.tree > .branch, .c-hierarchy.tree > .leaf { padding-left: 0; } .c-hierarchy.tree .node .toggler { margin-right: 0.3em; } .c-hierarchy.tree .children { margin-left: 0.9em; position: relative; } .c-hierarchy.tree .children:before { content: ""; display: block; width: 0; position: absolute; top: 0; bottom: 0; left: 0; border-left: 1px solid; } .c-hierarchy.tree .children .branch:before, .c-hierarchy.tree .leaf:before { content: ""; display: block; width: 1.2em; /* same with indentation */ height: 0; border-top: 1px solid; margin-top: -1px; /* border top width */ position: absolute; top: 1em; /* (line-height/2) */ left: 0; } .c-hierarchy.tree .children .branch:last-child:before, .c-hierarchy.tree .leaf:last-child:before { background: #ffffff; /* same with body background */ height: auto; top: 1em; /* (line-height/2) */ bottom: 0; } .c-hierarchy.tree .node .toggler i { font-size: 0.9rem; } .c-list > * { padding: 8px; } .c-list > *:nth-child(even) { background-color: #f5f5f5; } .c-list.selectable > *:hover { background-color: #E4ECFC; cursor: pointer; } .c-list.selectable > .selected { background-color: #E4ECFC; } .c-list.selectable > * > .c-checkbox { margin-right: 5px; } .c-list.multicols { overflow-x: auto; display: block; white-space: nowrap; column-width: 180px; -moz-column-width: 180px; -webkit-column-width: 180px; column-gap: 10px; -moz-column-gap: 10px; -webkit-column-gap: 10px; column-rule: 1px solid #d9d9d9; -moz-column-rule: 1px solid #d9d9d9; -webkit-column-rule: 1px solid #d9d9d9; } /* this applies to all elements with class=modal */ .c-modal { display: none; z-index: 1001; font-size: 0.95rem; } .c-modal.show { display: block; } .c-modal > #overlay { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); } .c-modal > .dialog { min-width: 250px; min-height: 150px; padding: 7px; background-color: #ffffff; border-radius: 4px; position: relative; } .c-modal > .dialog > .content { margin: 10px 0; border: none; } .c-modal > .dialog > footer button { margin-left: 6px; } #g-progress { z-index: 3000; position: absolute; top: 0; left: 0; } #g-progress.c-modal > .dialog { min-height: inherit; min-width: inherit; background-color: #ffffff; opacity: 0.8; } #g-progress.c-modal > .dialog .content { border: none; background-color: inherit; padding: 5px; } #g-progress.c-modal.spin > .dialog { background-color: inherit; opacity: 0.2; margin-top: 50vh; margin-left: 50vw; transform: translate(-50%, -50%); } #g-progress.c-modal.spin > .dialog > .content { border-radius: 50% 50%; } #g-progress.progress-bar > .dialog > .content { background-color: #ffffff; display: flex; align-items: center; padding: 20px; margin: 0px; } #g-progress.progress-bar > .dialog > .content progress { margin: 0 10px; } #g-progress > .fg.fg-loading-2.fg-spin { font-size: '1.8em'; margin: '10px'; } .c-modal-enter { opacity: 0.01; } .c-modal-enter.c-modal-enter-active { opacity: 1; transition: opacity 200ms ease-in; } .c-modal-leave { opacity: 1; } .c-modal-leave.c-modal-leave-active { opacity: 0.01; transition: opacity 300ms ease-in; } .c-opacity-enter { opacity: 0.01; } .c-opacity-enter.c-opacity-enter-active { opacity: 1; transition: opacity 200ms ease-in; } .c-opacity-leave { opacity: 1; } .c-opacity-leave.c-opacity-leave-active { opacity: 0.01; transition: opacity 300ms ease-in; } .c-page-nav { display: flex; } .c-page-nav.inline { display: inline-flex; } .c-page-nav.fdr { flex-direction: row; } .c-page-nav.fdc { flex-direction: column; } .c-page-nav.aic { align-items: center; } .c-page-nav.ais { align-items: stretch; } .c-page-nav.aifs { align-items: flex-start; } .c-page-nav.aife { align-items: flex-end; } .c-page-nav.acfs { align-content: flex-start; } .c-page-nav.acc { align-content: center; } .c-page-nav.acs { align-content: stretch; } .c-page-nav.jcc { justify-content: center; } .c-page-nav.jcsa { justify-content: space-around; } .c-page-nav.jcsb { justify-content: space-between; } .c-page-nav.jcfs { justify-content: flex-start; } .c-page-nav.jcfe { justify-content: flex-end; } .c-page-nav > .asc { align-self: center; } .c-page-nav > .asfe { align-self: flex-end; } .c-page-nav > .fba { flex-basis: auto !important; } .c-page-nav.fww { flex-wrap: wrap; } .c-page-nav > .grow { flex-grow: 1; } .c-page-nav > .fixed { flex-grow: 0; flex-shrink: 0; } .c-page-nav > .end { margin-left: auto; } .c-page-nav > .center { margin-left: auto; } .c-page-nav > .center:last-child { margin-right: auto; } .c-page-nav .thumb { display: inline-block; text-align: center; margin: 0; padding: 0.3em 0.5em; border-style: solid; border-radius: 0; border-width: 1px 0px 1px 1px; outline: none; } .c-page-nav .thumb:first-child { border-radius: 3px 0 0 3px; } .c-page-nav .thumb:last-child { border-right-width: 1px; border-radius: 0 3px 3px 0; } .c-page-nav .thumb:not(.selected) { background-color: #ffffff; color: #4a4a4a; border-top-color: #d9d9d9; border-bottom-color: #d9d9d9; border-left-color: #d9d9d9; border-right-color: #d9d9d9; } .c-page-nav .thumb:not(.selected) > .fg { color: #4a4a4a; } .c-page-nav .thumb:not(.selected):not(:disabled):hover { background-color: #e5e5e5; border-top-color: #e5e5e5; border-bottom-color: #e5e5e5; outline: none; } .c-page-nav .thumb:not(.selected):active { background-color: #cccccc; border-top-color: #cccccc; border-bottom-color: #cccccc; outline: none; } .c-page-nav .thumb:not(.selected).disabled { opacity: 0.5; } .c-page-nav .thumb.selected { background-color: #001b34; color: #ffffff; border-top-color: #001b34; border-bottom-color: #001b34; border-left-color: #d9d9d9; border-right-color: #d9d9d9; } .c-page-nav .thumb.selected > .fg { color: #ffffff; } .c-page-nav .thumb.selected:not(:disabled):hover { background-color: #1a3248; border-top-color: #1a3248; border-bottom-color: #1a3248; outline: none; } .c-page-nav .thumb.selected:active { background-color: #33485c; border-top-color: #33485c; border-bottom-color: #33485c; outline: none; } .c-page-nav .thumb.selected.disabled { opacity: 0.5; } .c-page-nav .thumb:first-child, .c-page-nav .thumb:last-child { min-width: auto; } .c-page-nav .thumb.current { background-color: #001b34; color: #ffffff; border-top-color: #001b34; border-bottom-color: #001b34; border-left-color: #d9d9d9; border-right-color: #d9d9d9; } .c-page-nav .thumb.current > .fg { color: #ffffff; } .c-page-nav .thumb.current:not(:disabled):hover { background-color: #1a3248; border-top-color: #1a3248; border-bottom-color: #1a3248; outline: none; } .c-page-nav .thumb.current:active { background-color: #33485c; border-top-color: #33485c; border-bottom-color: #33485c; outline: none; } .c-page-nav .thumb.current.disabled { opacity: 0.5; } .c-popover { display: inline-block; position: fixed; padding: 8px; margin: 0px; z-index: 100000; font-size: 0.9em; border-radius: 3px; background-color: #ffffff; box-shadow: 0px 1px 10px rgba(155, 155, 155, 0.5); border: 1px solid #d9d9d9; } .c-popover.nopad { padding: 0; } .c-popover.pointy:before { content: ""; position: absolute; left: 10px; top: -10px; z-index: 99; border: solid; border-color: #d9d9d9 transparent; border-width: 0 10px 10px 10px; } .c-popover.pointy:after { content: ' '; position: absolute; width: 0; height: 0; left: 12px; top: -8px; border: solid; border-width: 0 9px 9px 9px; border-color: #ffffff transparent; z-index: 100; } .c-popover.fixed-size { max-height: 200px; overflow-y: auto; } .c-popover.no-shadow { box-shadow: none; } .c-table:not(.nohover) tbody tr:hover:not(.selected) { background-color: #e2ecfd !important; } .c-table:not(.bland):not(.c-grid) tbody tr:nth-child(even) { background-color: #ffffff; } .c-table:not(.bland):not(.c-grid) tbody tr:nth-child(odd) { background-color: #f5f5f5; } .c-table caption { padding: 5px; } .c-table thead { border-color: #d9d9d9; border-width: 0 0 1px 0; border-style: solid; color: #4a4a4a; background-color: transparent; } .c-table tbody { color: #4a4a4a; } .c-table tbody tr.selected { background-color: #E4ECFC !important; } .c-table thead th, .c-table tbody td { border-color: #d9d9d9; border-style: solid; border-width: 0; } .c-table thead th.selector, .c-table tbody td.selector, .c-table thead th.actions, .c-table tbody td.actions { text-align: center; user-select: none; } .c-table thead th.actions > span > *, .c-table tbody td.actions > span > * { margin: 0 5px; } .c-table thead th.actions .disabled, .c-table tbody td.actions .disabled { visibility: hidden; } .c-table thead th { height: 0; line-height: 0; padding-top: 0; padding-bottom: 0; color: transparent; border: none; white-space: nowrap; } .c-table thead th.sortable { cursor: pointer; } .c-table thead th.sortable span.dir { margin-left: 5px; } .c-table tbody td { padding: 5px 7px; text-align: left; } .c-table tbody td.right { text-align: right; } .c-table tbody td.center { text-align: center; } .c-table.fixed-header { position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex; flex-direction: column; align-items: stretch; } .c-table.fixed-header caption, .c-table.fixed-header thead, .c-table.fixed-header tbody, .c-table.fixed-header tfoot { width: 100%; } .c-table.fixed-header caption, .c-table.fixed-header thead, .c-table.fixed-header tbody, .c-table.fixed-header tfoot, .c-table.fixed-header td, .c-table.fixed-header th { display: block; } .c-table.fixed-header tr { display: flex; } .c-table.fixed-header thead, .c-table.fixed-header tbody { overflow-y: auto; overflow-x: hidden; } .c-table.fixed-header caption, .c-table.fixed-header thead, .c-table.fixed-header tfoot { flex-grow: 0; flex-shrink: 0; } .c-table.fixed-header thead th, .c-table.fixed-header tbody td { flex-grow: 0; flex-shrink: 0; } .c-table.fixed-header tbody td { display: flex; align-items: center; } .c-table.fixed-header tbody td.selector, .c-table.fixed-header tbody td.actions { justify-content: center; } .c-table.fixed-header tbody td.right { justify-content: flex-end; } .c-table.fixed-header tbody td.center { justify-content: center; } .c-table.fixed-header tfoot tr td { width: 100%; } .c-table.column { display: flex; flex-direction: row; } .c-table.column tbody, .c-table.column thead, .c-table.column tr, .c-table.column td, .c-table.column th { display: flex; } .c-table.column thead { flex-grow: 0; flex-shrink: 0; border-width: 0px 1px 0 0; } .c-table.column thead tr, .c-table.column tbody tr { flex-direction: column; flex-shrink: 0; } .c-table.column thead th, .c-table.column tbody td { padding: 7px; height: 25px; align-items: center; } .c-table.column.fixed-header caption, .c-table.column.fixed-header thead, .c-table.column.fixed-header tbody { width: auto; height: 100%; } .c-table.column.fixed-header thead, .c-table.column.fixed-header tbody { overflow-x: scroll; overflow-y: auto; } .c-table.border-inner-vertical:not(.column) td:not(:last-child), .c-table.border-inner-vertical:not(.column) th:not(:last-child) { border-right-width: 1px; } .c-table.border-inner-vertical.column tbody tr:not(:last-child) td { border-right-width: 1px; } .c-table.border-inner-horizontal:not(.column) tbody tr:not(:last-child) td { border-bottom-width: 1px; } .c-table.border-inner-horizontal.column td:not(:last-child), .c-table.border-inner-horizontal.column th:not(:last-child) { border-bottom-width: 1px; } .c-table.border-inner:not(.column) td:not(:last-child), .c-table.border-inner:not(.column) th:not(:last-child) { border-right-width: 1px; } .c-table.border-inner.column tbody tr:not(:last-child) td { border-right-width: 1px; } .c-table.border-inner:not(.column) tbody tr:not(:last-child) td { border-bottom-width: 1px; } .c-table.border-inner.column td:not(:last-child), .c-table.border-inner.column th:not(:last-child) { border-bottom-width: 1px; } .c-table.border-outer { border: 1px solid #d9d9d9; } .c-table.border-outer.rounded { border-radius: 5px; } .c-table.border-all { border: 1px solid #d9d9d9; } .c-table.border-all.rounded { border-radius: 5px; } .c-table.border-all:not(.column) td:not(:last-child), .c-table.border-all:not(.column) th:not(:last-child) { border-right-width: 1px; } .c-table.border-all.column tbody tr:not(:last-child) td { border-right-width: 1px; } .c-table.border-all:not(.column) tbody tr:not(:last-child) td { border-bottom-width: 1px; } .c-table.border-all.column td:not(:last-child), .c-table.border-all.column th:not(:last-child) { border-bottom-width: 1px; } .c-grid.c-table tbody tr.selected, .c-grid-row.c-table tbody tr.selected, .c-grid.c-table tbody tr.selected td > *, .c-grid-row.c-table tbody tr.selected td > * { background-color: #E4ECFC !important; } .c-grid.c-table *[contenteditable], .c-grid-row.c-table tr.selected *[contenteditable] { font: small -moz-fixed, sans-serif; font: -webkit-small-control, sans-serif; height: 100%; background-color: #d9d9d9; text-align: start; white-space: pre-wrap; } .c-grid.c-table select[disabled], .c-grid-row.c-table tr.selected select[disabled] { color: inherit; } .c-grid.c-table *[contenteditable], .c-grid-row.c-table tr.selected *[contenteditable], .c-grid.c-table input[type='text'], .c-grid-row.c-table tr.selected input[type='text'], .c-grid.c-table input[type='number'], .c-grid-row.c-table tr.selected input[type='number'], .c-grid.c-table select, .c-grid-row.c-table tr.selected select { width: 100%; } .c-grid.c-table *[contenteditable]:not(:focus), .c-grid-row.c-table tr.selected *[contenteditable]:not(:focus), .c-grid.c-table input[type='text']:not(:focus), .c-grid-row.c-table tr.selected input[type='text']:not(:focus), .c-grid.c-table input[type='number']:not(:focus), .c-grid-row.c-table tr.selected input[type='number']:not(:focus), .c-grid.c-table select:not(:focus), .c-grid-row.c-table tr.selected select:not(:focus) { border-color: #d9d9d9; } .c-tabs-menu { display: flex; flex-grow: 0; flex-shrink: 0; flex-wrap: wrap; background-color: #ffffff; border-bottom: 1.5px solid #d9d9d9; } .c-tabs-menu.inline { display: inline-flex; } .c-tabs-menu.fdr { flex-direction: row; } .c-tabs-menu.fdc { flex-direction: column; } .c-tabs-menu.aic { align-items: center; } .c-tabs-menu.ais { align-items: stretch; } .c-tabs-menu.aifs { align-items: flex-start; } .c-tabs-menu.aife { align-items: flex-end; } .c-tabs-menu.acfs { align-content: flex-start; } .c-tabs-menu.acc { align-content: center; } .c-tabs-menu.acs { align-content: stretch; } .c-tabs-menu.jcc { justify-content: center; } .c-tabs-menu.jcsa { justify-content: space-around; } .c-tabs-menu.jcsb { justify-content: space-between; } .c-tabs-menu.jcfs { justify-content: flex-start; } .c-tabs-menu.jcfe { justify-content: flex-end; } .c-tabs-menu > .asc { align-self: center; } .c-tabs-menu > .asfe { align-self: flex-end; } .c-tabs-menu > .fba { flex-basis: auto !important; } .c-tabs-menu.fww { flex-wrap: wrap; } .c-tabs-menu > .grow { flex-grow: 1; } .c-tabs-menu > .fixed { flex-grow: 0; flex-shrink: 0; } .c-tabs-menu > .end { margin-left: auto; } .c-tabs-menu > .center { margin-left: auto; } .c-tabs-menu > .center:last-child { margin-right: auto; } .c-tabs-menu li, .c-tabs-menu a { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-color: #ffffff; padding: 5px 20px; cursor: pointer; color: #9b9b9b; } .c-tabs-menu .current { background-color: #ffffff; border-style: solid; border-color: #004d93; border-width: 0 0 3px 0; cursor: default; color: #004d93; } .c-tabs-menu li:hover, .c-tabs-menu a:hover { background-color: #e5e5e5; } .c-tabs-menu .disabled { opacity: 0.5; cursor: not-allowed; } .c-tabs { display: flex; flex-direction: column; align-items: stretch; align-content: stretch; justify-content: flex-start; font-size: 0.95rem; position: relative; } .c-tabs.inline { display: inline-flex; } .c-tabs.fdr { flex-direction: row; } .c-tabs.fdc { flex-direction: column; } .c-tabs.aic { align-items: center; } .c-tabs.ais { align-items: stretch; } .c-tabs.aifs { align-items: flex-start; } .c-tabs.aife { align-items: flex-end; } .c-tabs.acfs { align-content: flex-start; } .c-tabs.acc { align-content: center; } .c-tabs.acs { align-content: stretch; } .c-tabs.jcc { justify-content: center; } .c-tabs.jcsa { justify-content: space-around; } .c-tabs.jcsb { justify-content: space-between; } .c-tabs.jcfs { justify-content: flex-start; } .c-tabs.jcfe { justify-content: flex-end; } .c-tabs > .asc { align-self: center; } .c-tabs > .asfe { align-self: flex-end; } .c-tabs > .fba { flex-basis: auto !important; } .c-tabs.fww { flex-wrap: wrap; } .c-tabs > .grow { flex-grow: 1; } .c-tabs > .fixed { flex-grow: 0; flex-shrink: 0; } .c-tabs > .end { margin-left: auto; } .c-tabs > .center { margin-left: auto; } .c-tabs > .center:last-child { margin-right: auto; } .c-tabs > .tabContent { flex-grow: 1; display: flex; position: relative; margin-top: 10px; padding: 5px; overflow-y: auto; } .c-tabs > .tabContent.inline { display: inline-flex; } .c-tabs > .tabContent.fdr { flex-direction: row; } .c-tabs > .tabContent.fdc { flex-direction: column; } .c-tabs > .tabContent.aic { align-items: center; } .c-tabs > .tabContent.ais { align-items: stretch; } .c-tabs > .tabContent.aifs { align-items: flex-start; } .c-tabs > .tabContent.aife { align-items: flex-end; } .c-tabs > .tabContent.acfs { align-content: flex-start; } .c-tabs > .tabContent.acc { align-content: center; } .c-tabs > .tabContent.acs { align-content: stretch; } .c-tabs > .tabContent.jcc { justify-content: center; } .c-tabs > .tabContent.jcsa { justify-content: space-around; } .c-tabs > .tabContent.jcsb { justify-content: space-between; } .c-tabs > .tabContent.jcfs { justify-content: flex-start; } .c-tabs > .tabContent.jcfe { justify-content: flex-end; } .c-tabs > .tabContent > .asc { align-self: center; } .c-tabs > .tabContent > .asfe { align-self: flex-end; } .c-tabs > .tabContent > .fba { flex-basis: auto !important; } .c-tabs > .tabContent.fww { flex-wrap: wrap; } .c-tabs > .tabContent > .grow { flex-grow: 1; } .c-tabs > .tabContent > .fixed { flex-grow: 0; flex-shrink: 0; } .c-tabs > .tabContent > .end { margin-left: auto; } .c-tabs > .tabContent > .center { margin-left: auto; } .c-tabs > .tabContent > .center:last-child { margin-right: auto; } .c-tabs > .tabContent > * { flex-grow: 1; } .c-tabs > .menu { display: flex; flex-grow: 0; flex-shrink: 0; flex-wrap: wrap; border-bottom: 1.5px solid #d9d9d9; } .c-tabs > .menu.inline { display: inline-flex; } .c-tabs > .menu.fdr { flex-direction: row; } .c-tabs > .menu.fdc { flex-direction: column; } .c-tabs > .menu.aic { align-items: center; } .c-tabs > .menu.ais { align-items: stretch; } .c-tabs > .menu.aifs { align-items: flex-start; } .c-tabs > .menu.aife { align-items: flex-end; } .c-tabs > .menu.acfs { align-content: flex-start; } .c-tabs > .menu.acc { align-content: center; } .c-tabs > .menu.acs { align-content: stretch; } .c-tabs > .menu.jcc { justify-content: center; } .c-tabs > .menu.jcsa { justify-content: space-around; } .c-tabs > .menu.jcsb { justify-content: space-between; } .c-tabs > .menu.jcfs { justify-content: flex-start; } .c-tabs > .menu.jcfe { justify-content: flex-end; } .c-tabs > .menu > .asc { align-self: center; } .c-tabs > .menu > .asfe { align-self: flex-end; } .c-tabs > .menu > .fba { flex-basis: auto !important; } .c-tabs > .menu.fww { flex-wrap: wrap; } .c-tabs > .menu > .grow { flex-grow: 1; } .c-tabs > .menu > .fixed { flex-grow: 0; flex-shrink: 0; } .c-tabs > .menu > .end { margin-left: auto; } .c-tabs > .menu > .center { margin-left: auto; } .c-tabs > .menu > .center:last-child { margin-right: auto; } .c-tabs > .menu li, .c-tabs > .menu a { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-color: #ffffff; border-radius: 5px 5px 0 0; cursor: pointer; color: #9b9b9b; } .c-tabs > .menu .current { background-color: #ffffff; border-style: solid; border-color: #004d93; border-width: 0 0 3px 0; cursor: default; color: #004d93; } .c-tabs > .menu li { height: 33px; } .c-tabs > .menu li:hover, .c-tabs > .menu a:hover { background-color: #e5e5e5; } .c-tabs > .menu .disabled { opacity: 0.5; cursor: not-allowed; } .c-tabs.oldie > .menu li, .c-tabs.oldie > .menu a { margin: 1px 3px 0 0; border-radius: 5px 5px 0 0; border-style: solid; border-color: #d9d9d9; border-width: 1px 1px 0 1px; background-color: #E4ECFC; } .c-tabs.oldie > .menu .current { background-color: #ffffff; margin-bottom: -1px; z-index: 1; } .c-tabs .tab-delete-icon, .c-tabs .tab-edit-icon { margin-left: 5px; } .c-tabs .tab-delete-icon:hover, .c-tabs .tab-edit-icon:hover { color: #dd3d3e; cursor: pointer; } .c-tabs input.tab-input { padding: 0; width: 150px; } .c-text { font-size: 0.95em; padding: 2px; margin: 0; } .c-text li { margin: 2px 0px; padding: 1px 1px; display: flex; } .c-text li > span.line { display: inline-block; width: 35px; text-align: right; margin-right: 6px; flex-grow: 0; flex-shrink: 0; } .c-tiles > .tile-wrapper { position: relative; border: 1px solid #d5d5d5; cursor: pointer; } .c-tiles > .tile-wrapper > * { max-height: 100%; max-width: 100%; } .c-tiles > .tile-wrapper > .tile-overlay { position: absolute; width: 100%; height: 100%; background-color: #000000; color: #FFFFFF; opacity: 0.7; padding: 10px; text-align: center; } .c-image.loading, .c-image.error { position: relative; text-align: center; } .c-image.loading > :not(img), .c-image.error > :not(img) { position: absolute; display: flex; justify-content: center; align-items: center; } .c-image.error > .error + img { opacity: 0.3; } .c-image img, .c-image.complete { max-width: 100%; max-height: 100%; } .c-image-gallery > i.disabled { visibility: hidden; } .c-tree { overflow-y: auto; background-color: #ffffff; } .c-tree ul { margin-left: 0.5em; position: relative; } /* (indentation/2) */ .c-tree ul:before { content: ""; display: block; width: 0; position: absolute; top: 0; bottom: 0; left: 0; border-left: 1px solid; } .c-tree li { margin: 0; padding: 0 1em; /* indentation + .5em */ position: relative; } .c-tree ul li:before { content: ""; display: block; width: 10px; /* same with indentation */ height: 0; border-top: 1px solid; margin-top: -1px; /* border top width */ position: absolute; top: 1em; /* (line-height/2) */ left: 0; } .c-tree ul li:last-child:before { background: #ffffff; /* same with body background */ height: auto; top: 1em; /* (line-height/2) */ bottom: 0; } .c-tree .branch, .c-tree .leaf { cursor: pointer; display: inline-block; padding: 3px 4px; margin: 1px 0; } .c-tree .branch:hover:not(.selected), .c-tree .leaf:hover:not(.selected) { color: #EA4836; } .c-tree .branch .label { margin-left: 5px; } .c-tree .branch { position: relative; left: -5px; } .c-tree .branch i { vertical-align: middle; font-size: 0.85em; } .c-tree .selected { color: #EA4836; font-weight: bold; } .c-menu { color: #000; border: 1px solid #999999; display: flex; display: inline-flex; flex-direction: column; } .c-menu.inline { display: inline-flex; } .c-menu.fdr { flex-direction: row; } .c-menu.fdc { flex-direction: column; } .c-menu.aic { align-items: center; } .c-menu.ais { align-items: stretch; } .c-menu.aifs { align-items: flex-start; } .c-menu.aife { align-items: flex-end; } .c-menu.acfs { align-content: flex-start; } .c-menu.acc { align-content: center; } .c-menu.acs { align-content: stretch; } .c-menu.jcc { justify-content: center; } .c-menu.jcsa { justify-content: space-around; } .c-menu.jcsb { justify-content: space-between; } .c-menu.jcfs { justify-content: flex-start; } .c-menu.jcfe { justify-content: flex-end; } .c-menu > .asc { align-self: center; } .c-menu > .asfe { align-self: flex-end; } .c-menu > .fba { flex-basis: auto !important; } .c-menu.fww { flex-wrap: wrap; } .c-menu > .grow { flex-grow: 1; } .c-menu > .fixed { flex-grow: 0; flex-shrink: 0; } .c-menu > .end { margin-left: auto; } .c-menu > .center { margin-left: auto; } .c-menu > .center:last-child { margin-right: auto; } .c-menu > * { cursor: pointer; } .c-menu:not(.plain):not(.sub) { background-color: #E4ECFC; } .c-menu:not(.plain):not(.sub) > * { color: #4a4a4a; padding: 0.5em 1em; border-bottom: 1px solid #E4ECFC; } .c-menu:not(.plain):not(.sub) > *.header { font-weight: bolder; border-bottom: 1px solid #d9d9d9; } .c-menu:not(.plain):not(.sub) > *.header:nth-child(n+2) { margin-top: 10px; } .c-menu:not(.plain):not(.sub) > *.current { color: #004d93; margin: 0 0.5em; padding: 0.5em 0.5em; border-bottom: 1px solid #004d93; } .c-menu:not(.plain):not(.sub) > *.current.header { border-bottom: 1px solid #004d93; margin: 0; padding: 0.5em 1em; } .c-menu:not(.plain):not(.sub) > *.current.header:nth-child(n+2) { margin-top: 10px; } .c-menu:not(.plain):not(.sub) > *:disabled, .c-menu:not(.plain):not(.sub) > *.disabled { opacity: 0.5; } .c-menu:not(.plain):not(.sub) > *:hover { background-color: #cdd4e2; margin: 0; padding: 0.5em 1em; border-bottom: 1px solid #cdd4e2; } .c-menu:not(.plain):not(.sub) > *:active { background-color: #cccccc; margin: 0; padding: 0.5em 1em; border-bottom: 1px solid #cccccc; } .c-menu.plain { background-color: #ffffff; } .c-menu.plain > * { color: #4a4a4a; padding: 0.5em 1em; border-bottom: 1px solid #ffffff; } .c-menu.plain > *.header { font-weight: bolder; border-bottom: 1px solid #d9d9d9; } .c-menu.plain > *.header:nth-child(n+2) { margin-top: 10px; } .c-menu.plain > *.current { color: #004d93; margin: 0 0.5em; padding: 0.5em 0.5em; border-bottom: 1px solid #004d93; } .c-menu.plain > *.current.header { border-bottom: 1px solid #004d93; margin: 0; padding: 0.5em 1em; } .c-menu.plain > *.current.header:nth-child(n+2) { margin-top: 10px; } .c-menu.plain > *:disabled, .c-menu.plain > *.disabled { opacity: 0.5; } .c-menu.plain > *:hover { background-color: #e5e5e5; margin: 0; padding: 0.5em 1em; border-bottom: 1px solid #e5e5e5; } .c-menu.plain > *:active { background-color: #cccccc; margin: 0; padding: 0.5em 1em; border-bottom: 1px solid #cccccc; } .c-menu.sub { background-color: #F7F8E0; } .c-menu.sub > * { padding: 4px; margin: 3px; font-size: 0.9em; } .c-menu.sub > *.header { font-weight: bolder; border-bottom: 1px solid #d9d9d9; } .c-menu.sub > *.header:nth-child(n+2) { margin-top: 10px; } .c-menu.sub > *.current { color: #004d93; margin: 0 0.5em; padding: 0.5em 0.5em; border-bottom: 1px solid #ffffff; } .c-menu.sub > *.current.header { border-bottom: 1px solid #004d93; margin: 0; padding: 0.5em 1em; } .c-menu.sub > *.current.header:nth-child(n+2) { margin-top: 10px; } .c-menu.sub > *:disabled, .c-menu.sub > *.disabled { opacity: 0.5; } .c-menu.sub > *:hover { background-color: #BDBDBD; } .c-nav { display: flex; } .c-nav.inline { display: inline-flex; } .c-nav.fdr { flex-direction: row; } .c-nav.fdc { flex-direction: column; } .c-nav.aic { align-items: center; } .c-nav.ais { align-items: stretch; } .c-nav.aifs { align-items: flex-start; } .c-nav.aife { align-items: flex-end; } .c-nav.acfs { align-content: flex-start; } .c-nav.acc { align-content: center; } .c-nav.acs { align-content: stretch; } .c-nav.jcc { justify-content: center; } .c-nav.jcsa { justify-content: space-around; } .c-nav.jcsb { justify-content: space-between; } .c-nav.jcfs { justify-content: flex-start; } .c-nav.jcfe { justify-content: flex-end; } .c-nav > .asc { align-self: center; } .c-nav > .asfe { align-self: flex-end; } .c-nav > .fba { flex-basis: auto !important; } .c-nav.fww { flex-wrap: wrap; } .c-nav > .grow { flex-grow: 1; } .c-nav > .fixed { flex-grow: 0; flex-shrink: 0; } .c-nav > .end { margin-left: auto; } .c-nav > .center { margin-left: auto; } .c-nav > .center:last-child { margin-right: auto; } .c-nav:not(.sub) { background-color: #001b34; color: #ffffff; } .c-nav:not(.sub) > * { padding: 0.6em 2em; display: flex; justify-content: center; align-items: center; cursor: pointer; } .c-nav:not(.sub) > *.inline { display: inline-flex; } .c-nav:not(.sub) > *.fdr { flex-direction: row; } .c-nav:not(.sub) > *.fdc { flex-direction: column; } .c-nav:not(.sub) > *.aic { align-items: center; } .c-nav:not(.sub) > *.ais { align-items: stretch; } .c-nav:not(.sub) > *.aifs { align-items: flex-start; } .c-nav:not(.sub) > *.aife { align-items: flex-end; } .c-nav:not(.sub) > *.acfs { align-content: flex-start; } .c-nav:not(.sub) > *.acc { align-content: center; } .c-nav:not(.sub) > *.acs { align-content: stretch; } .c-nav:not(.sub) > *.jcc { justify-content: center; } .c-nav:not(.sub) > *.jcsa { justify-content: space-around; } .c-nav:not(.sub) > *.jcsb { justify-content: space-between; } .c-nav:not(.sub) > *.jcfs { justify-content: flex-start; } .c-nav:not(.sub) > *.jcfe { justify-content: flex-end; } .c-nav:not(.sub) > * > .asc { align-self: center; } .c-nav:not(.sub) > * > .asfe { align-self: flex-end; } .c-nav:not(.sub) > * > .fba { flex-basis: auto !important; } .c-nav:not(.sub) > *.fww { flex-wrap: wrap; } .c-nav:not(.sub) > * > .grow { flex-grow: 1; } .c-nav:not(.sub) > * > .fixed { flex-grow: 0; flex-shrink: 0; } .c-nav:not(.sub) > * > .end { margin-left: auto; } .c-nav:not(.sub) > * > .center { margin-left: auto; } .c-nav:not(.sub) > * > .center:last-child { margin-right: auto; } .c-nav:not(.sub) > *:hover, .c-nav:not(.sub) > *:active { background-color: #1a3248; color: #ffffff; } .c-nav:not(.sub) > *.current { background-color: #004d93; color: #ffffff; } .c-nav:not(.sub) > *.current:hover { opacity: 0.9; } .c-nav:not(.sub) > *.current:active { opacity: 0.7; } .c-nav.sub { background-color: #004d93; color: #ffffff; } .c-nav.sub > * { padding: 0.2em 1.4em; margin: 0.4em 0.5em; display: flex; justify-content: center; align-items: center; cursor: pointer; border-radius: 300px; text-align: center; border: 1px solid #004d93; } .c-nav.sub > *.inline { display: inline-flex; } .c-nav.sub > *.fdr { flex-direction: row; } .c-nav.sub > *.fdc { flex-direction: column; } .c-nav.sub > *.aic { align-items: center; } .c-nav.sub > *.ais { align-items: stretch; } .c-nav.sub > *.aifs { align-items: flex-start; } .c-nav.sub > *.aife { align-items: flex-end; } .c-nav.sub > *.acfs { align-content: flex-start; } .c-nav.sub > *.acc { align-content: center; } .c-nav.sub > *.acs { align-content: stretch; } .c-nav.sub > *.jcc { justify-content: center; } .c-nav.sub > *.jcsa { justify-content: space-around; } .c-nav.sub > *.jcsb { justify-content: space-between; } .c-nav.sub > *.jcfs { justify-content: flex-start; } .c-nav.sub > *.jcfe { justify-content: flex-end; } .c-nav.sub > * > .asc { align-self: center; } .c-nav.sub > * > .asfe { align-self: flex-end; } .c-nav.sub > * > .fba { flex-basis: auto !important; } .c-nav.sub > *.fww { flex-wrap: wrap; } .c-nav.sub > * > .grow { flex-grow: 1; } .c-nav.sub > * > .fixed { flex-grow: 0; flex-shrink: 0; } .c-nav.sub > * > .end { margin-left: auto; } .c-nav.sub > * > .center { margin-left: auto; } .c-nav.sub > * > .center:last-child { margin-right: auto; } .c-nav.sub > *:hover, .c-nav.sub > *:active { background-color: #003d83; color: #ffffff; } .c-nav.sub > *.current { background-color: #ffffff; color: #4a4a4a; } .c-nav.sub > *.current:hover { opacity: 0.9; } .c-nav.sub > *.current:active { opacity: 0.7; } .c-custom-input { display: inline-flex; align-items: center; } .c-custom-input > input { padding-right: 25px !important; } .c-custom-input > input + i.inline { position: relative; left: -25px; margin-left: 0; margin-right: -25px; width: 25px; display: flex; justify-content: center; } .badge { display: inline-block; padding: .25em .4em; font-size: 100%; font-weight: 500; line-height: 1; color: #fff; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: .25rem; } .button-success, .button-error, .button-warning, .button-secondary { color: white; border-radius: 4px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); } .button-success:hover, .button-error:hover, .button-warning:hover, .button-secondary:hover { background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1)); } .button-success { background: #1cb841; /* this is a green */ } .button-error { background: #ca3c3c; /* this is a maroon */ } .button-warning { background: #df7514; /* this is an orange */ } .button-secondary { background: #42b8dd; /* this is a light blue */ } .button-group > a:first-child { border-radius: 4px 0px 0px 4px; } .button-group > a:last-child { border-radius: 0px 4px 4px 0px; } .link-success { color: #5cb85c; border-color: #5cb85c; } .link-secondary { color: #5bc0de; border-color: #5bc0de; } .link-error { color: #d9534f; border-color: #d9534f; } .link-warning { color: #f0ad4e; border-color: #f0ad4e; } .link-primary { color: #0275d8; border-color: #0275d8; } #g-event-manage { width: 100%; height: 100%; background: #f0f0f0; position: relative; } #g-event-manage .event-manage-headBar { height: 45px; padding-right: 10px; position: absolute; top: 0; right: 0; z-index: 10; } #g-event-manage .event-manage-headBar .icon { line-height: 45px; font-size: 20px; margin: 0 8px; } #g-event-manage .event-manage-headBar .icon:hover { color: #1b76c4; } #g-event-manage #g-event-manage-tabs { margin: 13px 10px 0; height: calc(100% - 20px); } #g-event-manage #g-event-manage-tabs #newEvent, #g-event-manage #g-event-manage-tabs #eventDraft, #g-event-manage #g-event-manage-tabs #published { display: block; } #g-event-manage #g-event-manage-tabs.c-tabs > .tabContent { border: 1px solid #bbb; flex-grow: 1; display: flex; position: relative; padding: 5px 4px; overflow-y: auto; background-color: white; border-radius: 0 5px 5px 5px; margin-top: unset; } #g-event-manage #g-event-manage-tabs.c-tabs > .tabContent .c-border { height: unset; overflow: auto; } #g-event-manage #g-event-manage-tabs.c-tabs > .tabContent .c-border::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 15px; background-color: #ccc; } #g-event-manage #g-event-manage-tabs.c-tabs > .tabContent .c-border::-webkit-scrollbar { border-radius: 17px; width: 7px; height: 6px; background-color: #ccc; } #g-event-manage #g-event-manage-tabs.c-tabs > .tabContent .c-border::-webkit-scrollbar-thumb { border-radius: 13px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #313a3e; } #g-event-manage #g-event-manage-tabs.c-tabs > .menu { display: flex; flex-grow: 0; flex-shrink: 0; flex-wrap: wrap; margin-bottom: -1px; border-bottom: unset; } #g-event-manage #g-event-manage-tabs.c-tabs > .menu li { background-color: #5686da; color: #fff; margin-right: 5px; } #g-event-manage #g-event-manage-tabs.c-tabs > .menu li.current { background-color: #fff; cursor: default; color: #313a3e; border: 1px solid #bbb; border-bottom: 0; z-index: 2; } #g-event-manage #g-event-manage-tabs section .container { min-width: 1560px; height: calc(100vh - 280px); } #g-event-manage #g-event-manage-tabs section .container::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 15px; background-color: #ccc; } #g-event-manage #g-event-manage-tabs section .container::-webkit-scrollbar { border-radius: 17px; width: 7px; height: 6px; background-color: #ccc; } #g-event-manage #g-event-manage-tabs section .container::-webkit-scrollbar-thumb { border-radius: 13px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #313a3e; } #g-event-manage #g-event-manage-tabs section .c-table .selector { text-align: left; padding-left: 5px; width: 20px; } #g-event-manage #g-event-manage-tabs section .c-table .sequence { min-width: 40px; max-width: 50px; } #g-event-manage #g-event-manage-tabs section .c-table .type { min-width: 90px; max-width: 100px; } #g-event-manage #g-event-manage-tabs section .c-table .description { min-width: 100px; max-width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #g-event-manage #g-event-manage-tabs section .c-table .position { min-width: 100px; max-width: 290px; } #g-event-manage #g-event-manage-tabs section .c-table .createdAt { min-width: 100px; } #g-event-manage #g-event-manage-tabs section .c-table .receivedTime, #g-event-manage #g-event-manage-tabs section .c-table .beginTime, #g-event-manage #g-event-manage-tabs section .c-table .endTime, #g-event-manage #g-event-manage-tabs section .c-table .createTime { width: 150px !important; } #g-event-manage #g-event-manage-tabs section .c-table .source { width: 130px !important; } #g-event-manage #g-event-manage-tabs section .c-table .editor { width: 100px !important; } #g-event-manage #g-event-manage-tabs section .c-table .more, #g-event-manage #g-event-manage-tabs section .c-table .delist, #g-event-manage #g-event-manage-tabs section .c-table .status { width: 100px !important; } #g-event-manage #g-event-manage-tabs section .c-table .icon-block { font-size: 18px; } #g-event-manage #g-event-manage-tabs section .c-table .icon-block a { margin-right: 12px; } #g-event-manage #g-event-manage-tabs section .c-table .icon-block a.delete:hover { color: #CA2124; } #g-event-manage #g-event-manage-tabs section .c-table .icon-block a:hover { color: #1b76c4; } #g-event-manage #g-event-manage-tabs section .c-table > tbody > tr { height: 35px; } #g-event-manage #g-event-manage-tabs section .c-table > tbody > tr .pre { white-space: normal; } #g-event-manage .MuiTablePagination-root { border: 1px solid #d9d9d9; margin-top: -2px; border-top: 0; } #g-event-manage .footer { width: 100%; margin-top: 5px; } #g-event-manage .footer .button { float: right; width: 140px; height: 40px; padding: 5px 12px 5px 10px; border-radius: 8px; box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.15); color: #fff; background-color: #5686da; } #g-event-manage .footer .button.delete { background-color: #ce4b4d; margin-right: 15px; } #g-event-manage .footer .button.delete:hover { background-color: #ca2124; } #g-event-manage .footer .button:hover { text-decoration: none; background-color: #1565c0; box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); } #g-event-manage button[disabled], #g-event-manage .pure-button[disabled] { border: unset; } #g-event-manage #g-eventType-draft-edit-dialog { width: 600px; } #g-event-manage #g-eventType-draft-edit-dialog .eventType .MuiFormControl-root, #g-event-manage #g-eventType-draft-edit-dialog .description textarea, #g-event-manage #g-eventType-draft-edit-dialog .place input, #g-event-manage #g-eventType-draft-edit-dialog .longitude input, #g-event-manage #g-eventType-draft-edit-dialog .latitude input, #g-event-manage #g-eventType-draft-edit-dialog .location input { width: 350px; } #g-event-manage #g-eventType-draft-edit-dialog .pure-form-aligned .pure-control-group .c-date-picker .MuiOutlinedInput-adornedEnd { padding-right: unset; } #g-event-manage #g-eventType-draft-edit-dialog .pure-form-aligned .pure-control-group .c-date-picker .MuiInputBase-input { width: 350px; height: 32px; } #g-event-manage #g-eventType-draft-edit-dialog .eventType-dropdown { width: 350px; } #g-event-manage #g-eventType-type-edit-dialog .content .authorizations > label { width: 0; margin: 0; } #g-event-manage #g-eventType-type-edit-dialog .content section .container { height: unset; } #g-event-manage #g-eventType-type-edit-dialog .content section .c-table .autoPublish { width: 90px; text-align: center; } #g-event-manage #g-eventType-type-edit-dialog .content section .c-table .autoUnpublishAfterStart { width: 200px; line-height: 32px; } #g-event-manage #g-eventType-type-edit-dialog .content section .c-table .autoUnpublishAfterStart input { width: 60px; border: unset; border-bottom: 1px solid #a9a9a9; border-radius: unset; background-color: inherit; } #g-event-manage #g-event-detial-dialog span { margin-right: 5px; } #g-event-manage #g-event-detial-dialog .content { max-width: 500px; } #g-event-manage #g-event-detial-dialog .data-info { margin: 5px 0; } #g-event-manage #g-event-detial-dialog .data-info label, #g-event-manage #g-event-detial-dialog .data-info p { margin: 0; } #g-line-dashboard { width: 100%; height: calc(100vh - 80px); background: #f0f0f0; position: relative; overflow: auto; } #g-line-dashboard::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 15px; background-color: #ccc; } #g-line-dashboard::-webkit-scrollbar { border-radius: 17px; width: 7px; height: 6px; background-color: #ccc; } #g-line-dashboard::-webkit-scrollbar-thumb { border-radius: 13px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #313a3e; } #g-line-dashboard .logisticsList-table, #g-line-dashboard .logisticsList-forecast-table, #g-line-dashboard .logs-terminals-table { margin: 5px 5px; background: #fff; border: 1px solid #bbb; border-radius: 5px; padding: 5px; } #g-line-dashboard .dataTable-wrap { width: inherit; overflow: auto; } #g-line-dashboard .dataTable-wrap::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 15px; background-color: #ccc; } #g-line-dashboard .dataTable-wrap::-webkit-scrollbar { border-radius: 17px; width: 7px; height: 6px; background-color: #ccc; } #g-line-dashboard .dataTable-wrap::-webkit-scrollbar-thumb { border-radius: 13px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #313a3e; } #g-line-dashboard .logs-terminals-table section { width: inherit; padding-top: 37px; } #g-line-dashboard .logs-terminals-table section .c-table #header div { padding: 7px 0; } #g-line-dashboard section { padding-top: 42px; } #g-line-dashboard section .container { min-width: 1560px; height: 212px; } #g-line-dashboard section .container::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 15px; background-color: #ccc; } #g-line-dashboard section .container::-webkit-scrollbar { border-radius: 17px; width: 7px; height: 6px; background-color: #ccc; } #g-line-dashboard section .container::-webkit-scrollbar-thumb { border-radius: 13px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #313a3e; } #g-line-dashboard section .c-table #header div { padding: unset; } #g-line-dashboard section .c-table #header .sequence .text, #g-line-dashboard section .c-table #header .trailerPlateNo .text, #g-line-dashboard section .c-table #header .logisticName .text, #g-line-dashboard section .c-table #header .driverNationId .text, #g-line-dashboard section .c-table #header .containerNo .text, #g-line-dashboard section .c-table #header .oriTerminalName .text, #g-line-dashboard section .c-table #header .dstTerminalName .text, #g-line-dashboard section .c-table #header .containerDeliverStatus .text { line-height: 42px; } #g-line-dashboard section .c-table #header .deliverType span, #g-line-dashboard section .c-table #header .transportType span { vertical-align: middle; } #g-line-dashboard section .c-table #header .deliverType .text, #g-line-dashboard section .c-table #header .transportType .text { white-space: break-spaces; width: 32px; display: inline-block; } #g-line-dashboard section .c-table #header .containerType span, #g-line-dashboard section .c-table #header .oriZoneOutTime span, #g-line-dashboard section .c-table #header .dstZoneInTime span { vertical-align: middle; } #g-line-dashboard section .c-table #header .containerType .text, #g-line-dashboard section .c-table #header .oriZoneOutTime .text, #g-line-dashboard section .c-table #header .dstZoneInTime .text { white-space: break-spaces; width: 48px; display: inline-block; } #g-line-dashboard section .c-table #header .estBeginTime span, #g-line-dashboard section .c-table #header .dstTerminalInTime span, #g-line-dashboard section .c-table #header .dstTerminalOutTime span { vertical-align: middle; } #g-line-dashboard section .c-table #header .estBeginTime .text, #g-line-dashboard section .c-table #header .dstTerminalInTime .text, #g-line-dashboard section .c-table #header .dstTerminalOutTime .text { white-space: break-spaces; width: 65px; display: inline-block; } #g-line-dashboard section .c-table .sequence { min-width: 45px; } #g-line-dashboard section .c-table .driverNationId, #g-line-dashboard section .c-table .entryTime { min-width: 70px; } #g-line-dashboard section .c-table .deliverType, #g-line-dashboard section .c-table .transportType { min-width: 65px; } #g-line-dashboard section .c-table .trailerPlateNo, #g-line-dashboard section .c-table .containerType { min-width: 85px; } #g-line-dashboard section .c-table .containerNo, #g-line-dashboard section .c-table .oriTerminalName { min-width: 120px; } #g-line-dashboard section .c-table .dstTerminalName { min-width: 100px; } #g-line-dashboard section .c-table .logisticName { min-width: 100px; } #g-line-dashboard section .c-table .logisticName .text { width: 162px; } #g-line-dashboard section .c-table .estBeginTime, #g-line-dashboard section .c-table .oriZoneOutTime, #g-line-dashboard section .c-table .dstZoneInTime, #g-line-dashboard section .c-table .dstTerminalInTime, #g-line-dashboard section .c-table .dstTerminalOutTime { min-width: 100px; } #g-line-dashboard section .c-table .containerDeliverStatus { min-width: 80px; } #g-line-dashboard section .c-table .containerDeliverStatus .text { width: 70px; } #g-line-dashboard section .c-table .more { width: 20px; } #g-line-dashboard section .c-table > tbody > tr { height: 35px; } #g-line-dashboard .table-head { margin-bottom: 5px; display: flex; } #g-line-dashboard .table-head .title { line-height: 30px; margin-right: 30px; width: 300px; } #g-line-dashboard .table-head .selector { display: inline-block; margin-right: 20px; } #g-line-dashboard .table-head .selector .label { margin: unset; vertical-align: unset; line-height: 30px; } #g-line-dashboard .table-head .selector .jss1 .MuiInputBase-root > select { height: 30px; } #g-line-dashboard .table-head .selector .inputSelect { display: inline-block; margin: unset; vertical-align: unset; line-height: 30px; } #g-line-dashboard .page-nav { justify-content: center; margin: 5px 0; } #g-line-dashboard .MuiTablePagination-root button[disabled], #g-line-dashboard .pure-button[disabled] { border: unset; } #g-live-message { width: 100%; height: 100%; background: #f0f0f0; position: relative; } #g-live-message .live-message-headBar { height: 45px; padding-right: 10px; position: absolute; top: 0; right: 0; z-index: 10; } #g-live-message .live-message-headBar .icon { line-height: 45px; font-size: 20px; margin: 0 8px; } #g-live-message .live-message-headBar .icon:hover { color: #1b76c4; } #g-live-message #g-live-message-tabs { margin: 13px 10px 0; height: calc(100% - 20px); } #g-live-message #g-live-message-tabs #newMessage, #g-live-message #g-live-message-tabs #messageDraft, #g-live-message #g-live-message-tabs #published { display: block; } #g-live-message #g-live-message-tabs.c-tabs > .tabContent { border: 1px solid #bbb; flex-grow: 1; display: flex; position: relative; padding: 5px 4px; overflow-y: auto; background-color: white; border-radius: 0 5px 5px 5px; margin-top: unset; } #g-live-message #g-live-message-tabs.c-tabs > .tabContent .c-border { height: unset; overflow: auto; } #g-live-message #g-live-message-tabs.c-tabs > .tabContent .c-border::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 15px; background-color: #ccc; } #g-live-message #g-live-message-tabs.c-tabs > .tabContent .c-border::-webkit-scrollbar { border-radius: 17px; width: 7px; height: 6px; background-color: #ccc; } #g-live-message #g-live-message-tabs.c-tabs > .tabContent .c-border::-webkit-scrollbar-thumb { border-radius: 13px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #313a3e; } #g-live-message #g-live-message-tabs.c-tabs > .menu { display: flex; flex-grow: 0; flex-shrink: 0; flex-wrap: wrap; margin-bottom: -1px; border-bottom: unset; } #g-live-message #g-live-message-tabs.c-tabs > .menu li { background-color: #5686da; color: #fff; margin-right: 5px; } #g-live-message #g-live-message-tabs.c-tabs > .menu li.current { background-color: #fff; cursor: default; color: #313a3e; border: 1px solid #bbb; border-bottom: 0; z-index: 2; } #g-live-message #g-live-message-tabs section .container { width: 100%; height: calc(100vh - 280px); } #g-live-message #g-live-message-tabs section .container::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 15px; background-color: #ccc; } #g-live-message #g-live-message-tabs section .container::-webkit-scrollbar { border-radius: 17px; width: 7px; height: 6px; background-color: #ccc; } #g-live-message #g-live-message-tabs section .container::-webkit-scrollbar-thumb { border-radius: 13px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #313a3e; } #g-live-message #g-live-message-tabs section .c-table .selector { text-align: left; padding-left: 5px; width: 20px; } #g-live-message #g-live-message-tabs section .c-table .sequence { min-width: 40px; max-width: 50px; } #g-live-message #g-live-message-tabs section .c-table .type, #g-live-message #g-live-message-tabs section .c-table .title { min-width: 80px; max-width: 100px; } #g-live-message #g-live-message-tabs section .c-table .description { min-width: 80px; max-width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #g-live-message #g-live-message-tabs section .c-table .createdAt { min-width: 80px; } #g-live-message #g-live-message-tabs section .c-table .beginTime, #g-live-message #g-live-message-tabs section .c-table .endTime, #g-live-message #g-live-message-tabs section .c-table .createTime { width: 150px !important; } #g-live-message #g-live-message-tabs section .c-table .source { width: 100px !important; } #g-live-message #g-live-message-tabs section .c-table .more, #g-live-message #g-live-message-tabs section .c-table .delist, #g-live-message #g-live-message-tabs section .c-table .status { width: 100px !important; } #g-live-message #g-live-message-tabs section .c-table .icon-block { font-size: 18px; } #g-live-message #g-live-message-tabs section .c-table .icon-block a { margin-right: 12px; } #g-live-message #g-live-message-tabs section .c-table .icon-block a.delete:hover { color: #CA2124; } #g-live-message #g-live-message-tabs section .c-table .icon-block a:hover { color: #1b76c4; } #g-live-message #g-live-message-tabs section .c-table > tbody > tr { height: 35px; } #g-live-message #g-live-message-tabs section .c-table > tbody > tr .pre { white-space: normal; } #g-live-message .MuiTablePagination-root { border: 1px solid #d9d9d9; margin-top: -2px; border-top: 0; } #g-live-message .footer { width: 100%; margin-top: 5px; } #g-live-message .footer .button { float: right; width: 140px; height: 40px; padding: 5px 12px 5px 10px; border-radius: 8px; box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.15); color: #fff; background-color: #5686da; } #g-live-message .footer .button.delete { background-color: #ce4b4d; } #g-live-message .footer .button.delete:hover { background-color: #ca2124; } #g-live-message .footer .button:hover { text-decoration: none; background-color: #1565c0; box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); } #g-live-message button[disabled], #g-live-message .pure-button[disabled] { border: unset; } #g-live-message #g-liveMessage-draft-edit-dialog { width: 600px; } #g-live-message #g-liveMessage-draft-edit-dialog .messageType .MuiFormControl-root, #g-live-message #g-liveMessage-draft-edit-dialog .description textarea, #g-live-message #g-liveMessage-draft-edit-dialog .title input { width: 350px; } #g-live-message #g-liveMessage-draft-edit-dialog .pure-form-aligned .pure-control-group .c-date-picker .MuiOutlinedInput-adornedEnd { padding-right: unset; } #g-live-message #g-liveMessage-draft-edit-dialog .pure-form-aligned .pure-control-group .c-date-picker .MuiInputBase-input { width: 350px; height: 32px; } #g-live-message #g-liveMessage-type-edit-dialog .content .authorizations > label { width: 0; margin: 0; } #g-live-message #g-liveMessage-type-edit-dialog .content section .container { height: unset; } #g-live-message #g-liveMessage-type-edit-dialog .content section .c-table .autoPublish { width: 90px; text-align: center; } #g-live-message #g-liveMessage-type-edit-dialog .content section .c-table .autoUnpublishAfterStart { width: 200px; line-height: 32px; } #g-live-message #g-liveMessage-type-edit-dialog .content section .c-table .autoUnpublishAfterStart input { width: 60px; border: unset; border-bottom: 1px solid #a9a9a9; border-radius: unset; background-color: inherit; } #g-live-message #g-live-message-detial-dialog span { margin-right: 5px; } #g-live-message #g-live-message-detial-dialog .content { max-width: 500px; } #g-live-message #g-live-message-detial-dialog .data-info { margin: 5px 0; } #g-live-message #g-live-message-detial-dialog .data-info label, #g-live-message #g-live-message-detial-dialog .data-info p { margin: 0; } .badge { display: inline-block; padding: .25em .4em; font-size: 100%; font-weight: 500; line-height: 1; color: #fff; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: .25rem; } .button-success, .button-error, .button-warning, .button-secondary { color: white; border-radius: 4px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); } .button-success:hover, .button-error:hover, .button-warning:hover, .button-secondary:hover { background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1)); } .button-success { background: #1cb841; /* this is a green */ } .button-error { background: #ca3c3c; /* this is a maroon */ } .button-warning { background: #df7514; /* this is an orange */ } .button-secondary { background: #42b8dd; /* this is a light blue */ } .button-group > a:first-child { border-radius: 4px 0px 0px 4px; } .button-group > a:last-child { border-radius: 0px 4px 4px 0px; } .link-success { color: #5cb85c; border-color: #5cb85c; } .link-secondary { color: #5bc0de; border-color: #5bc0de; } .link-error { color: #d9534f; border-color: #d9534f; } .link-warning { color: #f0ad4e; border-color: #f0ad4e; } .link-primary { color: #0275d8; border-color: #0275d8; } #g-login { width: 100%; } #g-login:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); } #g-login .company { z-index: 1; color: #fff; font-weight: bold; margin-bottom: 40px; text-align: center; } #g-login .company .company-logo { width: 395px; height: 136px; } #g-login .company span { display: block; text-align: center; font-size: 3.5em; } #g-login .login-form { margin-left: 200px; padding: 50px; background-color: #fff; border-radius: 5px; width: 500px; border: 1px solid #454545; box-shadow: 0 5px 10px black; position: relative; } #g-login .login-form .title { color: #606060; font-size: 40px; font-weight: 700; margin-bottom: 30px; } #g-login form label { color: #454545; cursor: pointer; } #g-login form label[for=imageCode] { display: block; } #g-login form input, #g-login form button, #g-login form select { width: 100%; border-radius: 5px; } #g-login form input:focus { border-color: rgba(82, 168, 236, 0.8); } #g-login form input { border-width: 2px; border-style: solid; border-color: #BEBEBE; background-color: #fff; padding-left: 15px; filter: none; } #g-login form input::placeholder { color: #b8b8b8; } #g-login form input:-webkit-autofill, #g-login form input:-webkit-autofill:hover, #g-login form input:-webkit-autofill:focus { -webkit-text-fill-color: #000; transition: background-color 5000s ease-in-out 0s; } #g-login form button { margin-top: 30px; background-color: #5686DA; } #g-login #title { font-size: 2.8em; margin-bottom: 50px; } #g-login #lng-select { width: auto; position: absolute; right: 0; top: 0; margin: 5px 5px 0 0; border: transparent; background: transparent; color: #fff; } #g-login #lng-select option { color: #000; } #g-login #card-select { margin-bottom: 10px; } #g-login #pin { margin-bottom: 10px; } #g-login #loginParam1 { margin-bottom: 20px; } #g-login #imageCode { margin-top: -35px; width: calc(100% - 110px); } #g-login .imageCodeContainer { margin-top: 14px; } #g-login .imageCodeContainer .imageCode { margin-left: 10px; width: 100px; height: 45px; cursor: pointer; } #g-login .download { width: 100%; text-align: center; font-size: 0.8em; margin: 5px 0; } #g-login .download a { color: #3399CC; text-decoration: underline; } #g-login .download a:hover { text-decoration: none; } #g-login .forget-password { color: #3399CC; font-size: 0.8em; text-align: center; text-decoration: underline; cursor: pointer; } #g-login .version { color: #aaaaaa; font-size: 0.8em; text-align: center; } #g-logistic-deliver { width: 100%; height: 100%; background: #f0f0f0; position: relative; overflow: auto; } #g-logistic-deliver::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 15px; background-color: #ccc; } #g-logistic-deliver::-webkit-scrollbar { border-radius: 17px; width: 7px; height: 6px; background-color: #ccc; } #g-logistic-deliver::-webkit-scrollbar-thumb { border-radius: 13px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #313a3e; } #g-logistic-deliver .logisticDeliver-headBar { width: 575px; margin: 5px auto 0px; display: flex; } #g-logistic-deliver .logisticDeliver-headBar .flatpickr-input { background: #fff; height: 33px; width: 135px; } #g-logistic-deliver .logisticDeliver-headBar .date-range-label { margin-right: 5px; } #g-logistic-deliver .logisticDeliver-headBar .button { background-color: #5686da; width: 83px; height: 33px; padding: 0 5px; } #g-logistic-deliver .logisticDeliver-headBar .button:hover { background-color: #1565c0; } #g-logistic-deliver .topTenDriver-table, #g-logistic-deliver .deliverLog-table { margin: 5px 5px; background: #fff; border: 1px solid #bbb; border-radius: 5px; padding: 5px; } #g-logistic-deliver .topTenDriver-table section .container { height: 351px; } #g-logistic-deliver section .container { height: calc(100vh - 234px); } #g-logistic-deliver section .c-table .sequence { width: calc(100% * 0.1); } #g-logistic-deliver section .c-table .name, #g-logistic-deliver section .c-table .logisticName, #g-logistic-deliver section .c-table .avgDuration { width: calc(100% * 0.2); } #g-logistic-deliver section .c-table .duration-div { width: 96px; text-align: center; } #g-logistic-deliver section .c-table > tbody > tr { height: 35px; cursor: default; } #g-logistic-deliver .deliverLog-table .c-border { overflow: auto; } #g-logistic-deliver .deliverLog-table .c-border::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 15px; background-color: #ccc; } #g-logistic-deliver .deliverLog-table .c-border::-webkit-scrollbar { border-radius: 17px; width: 7px; height: 6px; background-color: #ccc; } #g-logistic-deliver .deliverLog-table .c-border::-webkit-scrollbar-thumb { border-radius: 13px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #313a3e; } #g-logistic-deliver .deliverLog-table section { padding-top: 42px; } #g-logistic-deliver .deliverLog-table section .container { min-width: 1564px; height: calc(100vh - 275px); } #g-logistic-deliver .deliverLog-table section .container::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 15px; background-color: #ccc; } #g-logistic-deliver .deliverLog-table section .container::-webkit-scrollbar { border-radius: 17px; width: 7px; height: 6px; background-color: #ccc; } #g-logistic-deliver .deliverLog-table section .container::-webkit-scrollbar-thumb { border-radius: 13px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #313a3e; } #g-logistic-deliver .deliverLog-table section .c-table #header div { padding: unset; } #g-logistic-deliver .deliverLog-table section .c-table #header .sequence .text, #g-logistic-deliver .deliverLog-table section .c-table #header .trailerPlateNo .text, #g-logistic-deliver .deliverLog-table section .c-table #header .logisticName .text, #g-logistic-deliver .deliverLog-table section .c-table #header .driverNationId .text, #g-logistic-deliver .deliverLog-table section .c-table #header .containerNo .text, #g-logistic-deliver .deliverLog-table section .c-table #header .hasEir .text, #g-logistic-deliver .deliverLog-table section .c-table #header .oriTerminalName .text, #g-logistic-deliver .deliverLog-table section .c-table #header .dstTerminalName .text, #g-logistic-deliver .deliverLog-table section .c-table #header .driverName .text { line-height: 42px; } #g-logistic-deliver .deliverLog-table section .c-table #header .deliverType span, #g-logistic-deliver .deliverLog-table section .c-table #header .transportType span { vertical-align: middle; } #g-logistic-deliver .deliverLog-table section .c-table #header .deliverType .text, #g-logistic-deliver .deliverLog-table section .c-table #header .transportType .text { white-space: break-spaces; width: 32px; display: inline-block; } #g-logistic-deliver .deliverLog-table section .c-table #header .containerType span, #g-logistic-deliver .deliverLog-table section .c-table #header .oriZoneOutTime span, #g-logistic-deliver .deliverLog-table section .c-table #header .dstZoneInTime span { vertical-align: middle; } #g-logistic-deliver .deliverLog-table section .c-table #header .containerType .text, #g-logistic-deliver .deliverLog-table section .c-table #header .oriZoneOutTime .text, #g-logistic-deliver .deliverLog-table section .c-table #header .dstZoneInTime .text { white-space: break-spaces; width: 48px; display: inline-block; } #g-logistic-deliver .deliverLog-table section .c-table #header .estBeginTime span, #g-logistic-deliver .deliverLog-table section .c-table #header .dstTerminalInTime span, #g-logistic-deliver .deliverLog-table section .c-table #header .dstTerminalOutTime span, #g-logistic-deliver .deliverLog-table section .c-table #header .finishTime span { vertical-align: middle; } #g-logistic-deliver .deliverLog-table section .c-table #header .estBeginTime .text, #g-logistic-deliver .deliverLog-table section .c-table #header .dstTerminalInTime .text, #g-logistic-deliver .deliverLog-table section .c-table #header .dstTerminalOutTime .text, #g-logistic-deliver .deliverLog-table section .c-table #header .finishTime .text { white-space: break-spaces; width: 65px; display: inline-block; } #g-logistic-deliver .deliverLog-table section .c-table .sequence { width: 40px; } #g-logistic-deliver .deliverLog-table section .c-table .driverNationId, #g-logistic-deliver .deliverLog-table section .c-table .entryTime { width: 70px; } #g-logistic-deliver .deliverLog-table section .c-table .deliverType, #g-logistic-deliver .deliverLog-table section .c-table .transportType { width: 65px; } #g-logistic-deliver .deliverLog-table section .c-table .trailerPlateNo { width: 90px; } #g-logistic-deliver .deliverLog-table section .c-table .containerType { width: 80px; } #g-logistic-deliver .deliverLog-table section .c-table .containerNo, #g-logistic-deliver .deliverLog-table section .c-table .oriTerminalName { width: 110px; } #g-logistic-deliver .deliverLog-table section .c-table .containerNo .pre, #g-logistic-deliver .deliverLog-table section .c-table .oriTerminalName .pre { white-space: normal; } #g-logistic-deliver .deliverLog-table section .c-table .driverName { width: 85px; } #g-logistic-deliver .deliverLog-table section .c-table .dstTerminalName { width: 90px; } #g-logistic-deliver .deliverLog-table section .c-table .dstTerminalName .pre { white-space: normal; } #g-logistic-deliver .deliverLog-table section .c-table .logisticName { width: 100px; } #g-logistic-deliver .deliverLog-table section .c-table .logisticName .pre { white-space: normal; } #g-logistic-deliver .deliverLog-table section .c-table .estBeginTime, #g-logistic-deliver .deliverLog-table section .c-table .oriZoneOutTime, #g-logistic-deliver .deliverLog-table section .c-table .dstZoneInTime, #g-logistic-deliver .deliverLog-table section .c-table .dstTerminalInTime, #g-logistic-deliver .deliverLog-table section .c-table .dstTerminalOutTime, #g-logistic-deliver .deliverLog-table section .c-table .finishTime { width: 100px; } #g-logistic-deliver .deliverLog-table section .c-table .more { width: 20px; } #g-logistic-deliver .deliverLog-table section .c-table .hasEir { width: 65px; } #g-logistic-deliver .deliverLog-table section .c-table .hasEir:hover { color: #1b76c4; } #g-logistic-deliver .deliverLog-table section .c-table .hasEir .disable { cursor: not-allowed; color: #cacaca; } #g-logistic-deliver .deliverLog-table section .c-table .hasEir .disable > i, #g-logistic-deliver .deliverLog-table section .c-table .hasEir .disable a { cursor: not-allowed; } #g-logistic-deliver .deliverLog-table section .c-table .hasEir .disable:hover { color: #cacaca; } #g-logistic-deliver .deliverLog-table section .c-table > tbody > tr { height: 35px; } #g-logistic-deliver .table-head { margin-bottom: 5px; display: flex; justify-content: space-between; } #g-logistic-deliver .table-head .title { display: inline-block; width: 300px; vertical-align: middle; } #g-logistic-deliver .table-head .label { margin: unset; vertical-align: unset; line-height: 30px; } #g-logistic-deliver .table-head .jss1 .MuiInputBase-root > select { height: 30px; } #g-logistic-deliver .table-head .inputSelect { display: inline-block; margin: unset; vertical-align: unset; line-height: 30px; } #g-logistic-deliver .table-head .c-custom-input { height: 31px; } #g-logistic-deliver .table-head .c-custom-input input { height: 31px; } #g-logistic-deliver .MuiTablePagination-root button[disabled], #g-logistic-deliver .pure-button[disabled] { border: unset; } #g-logistic-deliver #g-eir-detail-dialog { padding: 7px; } #g-logistic-driver { width: 100%; height: 100%; background: #f0f0f0; position: relative; } #g-logistic-driver .logisticDriver-headBar { height: 45px; line-height: 45px; padding-right: 10px; position: absolute; top: 0; right: 0; z-index: 10; } #g-logistic-driver #g-logistic-driver-tabs { margin: 13px 10px 0; height: calc(100% - 20px); } #g-logistic-driver #g-logistic-driver-tabs #vehicle, #g-logistic-driver #g-logistic-driver-tabs #driver { display: block; } #g-logistic-driver #g-logistic-driver-tabs.c-tabs > .tabContent { border: 1px solid #bbb; flex-grow: 1; display: flex; position: relative; padding: 5px 4px; overflow-y: auto; background-color: white; border-radius: 0 5px 5px 5px; margin-top: unset; } #g-logistic-driver #g-logistic-driver-tabs.c-tabs > .tabContent .c-border { height: unset; overflow: auto; } #g-logistic-driver #g-logistic-driver-tabs.c-tabs > .tabContent .c-border::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 15px; background-color: #ccc; } #g-logistic-driver #g-logistic-driver-tabs.c-tabs > .tabContent .c-border::-webkit-scrollbar { border-radius: 17px; width: 7px; height: 6px; background-color: #ccc; } #g-logistic-driver #g-logistic-driver-tabs.c-tabs > .tabContent .c-border::-webkit-scrollbar-thumb { border-radius: 13px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #313a3e; } #g-logistic-driver #g-logistic-driver-tabs.c-tabs > .menu { display: flex; flex-grow: 0; flex-shrink: 0; flex-wrap: wrap; margin-bottom: -1px; border-bottom: unset; } #g-logistic-driver #g-logistic-driver-tabs.c-tabs > .menu li { background-color: #5686da; color: #fff; margin-right: 5px; } #g-logistic-driver #g-logistic-driver-tabs.c-tabs > .menu li.current { background-color: #fff; cursor: default; color: #313a3e; border: 1px solid #bbb; border-bottom: 0; z-index: 2; } #g-logistic-driver #g-logistic-driver-tabs section .container { width: 100%; height: calc(100vh - 235px); } #g-logistic-driver #g-logistic-driver-tabs section .container::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 15px; background-color: #ccc; } #g-logistic-driver #g-logistic-driver-tabs section .container::-webkit-scrollbar { border-radius: 17px; width: 7px; height: 6px; background-color: #ccc; } #g-logistic-driver #g-logistic-driver-tabs section .container::-webkit-scrollbar-thumb { border-radius: 13px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #313a3e; } #g-logistic-driver #g-logistic-driver-tabs section .c-table .sequence { width: calc(100% * 0.1); min-width: 40px; } #g-logistic-driver #g-logistic-driver-tabs section .c-table .id { width: calc(100% * 0.2); min-width: 130px; } #g-logistic-driver #g-logistic-driver-tabs section .c-table .validDate, #g-logistic-driver #g-logistic-driver-tabs section .c-table .validFrom, #g-logistic-driver #g-logistic-driver-tabs section .c-table .modifiedAt { width: calc(100% * 0.2); min-width: 155px; } #g-logistic-driver #g-logistic-driver-tabs section .c-table .name, #g-logistic-driver #g-logistic-driver-tabs section .c-table .plateNo { width: calc(100% * 0.2); min-width: 90px; } #g-logistic-driver #g-logistic-driver-tabs section .c-table .logisticName { width: calc(100% * 0.2); min-width: 200px; } #g-logistic-driver #g-logistic-driver-tabs section .c-table .logisticId { width: calc(100% * 0.2); min-width: 110px; } #g-logistic-driver #g-logistic-driver-tabs section .c-table .vehicleType { width: calc(100% * 0.2); min-width: 60px; } #g-logistic-driver #g-logistic-driver-tabs section .c-table .icon-block { font-size: 18px; } #g-logistic-driver #g-logistic-driver-tabs section .c-table .icon-block a { margin-right: 12px; } #g-logistic-driver #g-logistic-driver-tabs section .c-table .icon-block a.delete:hover { color: #CA2124; } #g-logistic-driver #g-logistic-driver-tabs section .c-table .icon-block a:hover { color: #1b76c4; } #g-logistic-driver #g-logistic-driver-tabs section .c-table > tbody > tr { height: 35px; cursor: default; } #g-logistic-driver .footer { width: 100%; margin-top: 5px; } #g-logistic-driver .footer .button { float: right; width: 140px; height: 40px; padding: 5px 12px 5px 10px; border-radius: 8px; box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.15); color: #fff; background-color: #ce4b4d; } #g-logistic-driver .footer .button:hover { text-decoration: none; background-color: #ca2124; box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); } #g-logistic-driver .footer button[disabled]:hover { background-color: #ce4b4d; cursor: not-allowed; box-shadow: unset; } #g-logistic-driver button[disabled], #g-logistic-driver .pure-button[disabled] { border: unset; } .badge { display: inline-block; padding: .25em .4em; font-size: 100%; font-weight: 500; line-height: 1; color: #fff; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: .25rem; } .button-success, .button-error, .button-warning, .button-secondary { color: white; border-radius: 4px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); } .button-success:hover, .button-error:hover, .button-warning:hover, .button-secondary:hover { background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1)); } .button-success { background: #1cb841; /* this is a green */ } .button-error { background: #ca3c3c; /* this is a maroon */ } .button-warning { background: #df7514; /* this is an orange */ } .button-secondary { background: #42b8dd; /* this is a light blue */ } .button-group > a:first-child { border-radius: 4px 0px 0px 4px; } .button-group > a:last-child { border-radius: 0px 4px 4px 0px; } .link-success { color: #5cb85c; border-color: #5cb85c; } .link-secondary { color: #5bc0de; border-color: #5bc0de; } .link-error { color: #d9534f; border-color: #d9534f; } .link-warning { color: #f0ad4e; border-color: #f0ad4e; } .link-primary { color: #0275d8; border-color: #0275d8; } #g-nvrs { min-width: 984px; margin: 0 auto; } #g-nvrs .c-table .sourceId { min-width: 70px; white-space: nowrap; } #g-nvrs .c-table .name { min-width: 110px; } #g-nvrs .c-table .internalIp, #g-nvrs .c-table .ip { width: 120px; } #g-nvrs .c-table .port { width: 100px; } #g-nvrs .c-table .ivarId { max-width: 330px; } #g-nvrs .c-table .description { min-width: 100px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #g-nvrs .c-table .repairStatus { width: 70px; text-align: center; } #g-nvrs .c-table .editAction, #g-nvrs .c-table .deleteAction { text-align: center; width: 70px; } #g-nvrs .c-table .editAction a, #g-nvrs .c-table .deleteAction a { width: 100%; height: 100%; } #g-nvrs .top-actions { display: inline-block; } .rect-auto, .progress-circle.p51 .slice, .progress-circle.p52 .slice, .progress-circle.p53 .slice, .progress-circle.p54 .slice, .progress-circle.p55 .slice, .progress-circle.p56 .slice, .progress-circle.p57 .slice, .progress-circle.p58 .slice, .progress-circle.p59 .slice, .progress-circle.p60 .slice, .progress-circle.p61 .slice, .progress-circle.p62 .slice, .progress-circle.p63 .slice, .progress-circle.p64 .slice, .progress-circle.p65 .slice, .progress-circle.p66 .slice, .progress-circle.p67 .slice, .progress-circle.p68 .slice, .progress-circle.p69 .slice, .progress-circle.p70 .slice, .progress-circle.p71 .slice, .progress-circle.p72 .slice, .progress-circle.p73 .slice, .progress-circle.p74 .slice, .progress-circle.p75 .slice, .progress-circle.p76 .slice, .progress-circle.p77 .slice, .progress-circle.p78 .slice, .progress-circle.p79 .slice, .progress-circle.p80 .slice, .progress-circle.p81 .slice, .progress-circle.p82 .slice, .progress-circle.p83 .slice, .progress-circle.p84 .slice, .progress-circle.p85 .slice, .progress-circle.p86 .slice, .progress-circle.p87 .slice, .progress-circle.p88 .slice, .progress-circle.p89 .slice, .progress-circle.p90 .slice, .progress-circle.p91 .slice, .progress-circle.p92 .slice, .progress-circle.p93 .slice, .progress-circle.p94 .slice, .progress-circle.p95 .slice, .progress-circle.p96 .slice, .progress-circle.p97 .slice, .progress-circle.p98 .slice, .progress-circle.p99 .slice, .progress-circle.p100 .slice { clip: rect(auto, auto, auto, auto); } .pie, .progress-circle .bar, .progress-circle.p51 .fill, .progress-circle.p52 .fill, .progress-circle.p53 .fill, .progress-circle.p54 .fill, .progress-circle.p55 .fill, .progress-circle.p56 .fill, .progress-circle.p57 .fill, .progress-circle.p58 .fill, .progress-circle.p59 .fill, .progress-circle.p60 .fill, .progress-circle.p61 .fill, .progress-circle.p62 .fill, .progress-circle.p63 .fill, .progress-circle.p64 .fill, .progress-circle.p65 .fill, .progress-circle.p66 .fill, .progress-circle.p67 .fill, .progress-circle.p68 .fill, .progress-circle.p69 .fill, .progress-circle.p70 .fill, .progress-circle.p71 .fill, .progress-circle.p72 .fill, .progress-circle.p73 .fill, .progress-circle.p74 .fill, .progress-circle.p75 .fill, .progress-circle.p76 .fill, .progress-circle.p77 .fill, .progress-circle.p78 .fill, .progress-circle.p79 .fill, .progress-circle.p80 .fill, .progress-circle.p81 .fill, .progress-circle.p82 .fill, .progress-circle.p83 .fill, .progress-circle.p84 .fill, .progress-circle.p85 .fill, .progress-circle.p86 .fill, .progress-circle.p87 .fill, .progress-circle.p88 .fill, .progress-circle.p89 .fill, .progress-circle.p90 .fill, .progress-circle.p91 .fill, .progress-circle.p92 .fill, .progress-circle.p93 .fill, .progress-circle.p94 .fill, .progress-circle.p95 .fill, .progress-circle.p96 .fill, .progress-circle.p97 .fill, .progress-circle.p98 .fill, .progress-circle.p99 .fill, .progress-circle.p100 .fill { position: absolute; border: 0.08em solid #307bbb; width: 0.84em; height: 0.84em; clip: rect(0em, 0.5em, 1em, 0em); border-radius: 50%; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } .pie-fill, .progress-circle.p51 .bar:after, .progress-circle.p51 .fill, .progress-circle.p52 .bar:after, .progress-circle.p52 .fill, .progress-circle.p53 .bar:after, .progress-circle.p53 .fill, .progress-circle.p54 .bar:after, .progress-circle.p54 .fill, .progress-circle.p55 .bar:after, .progress-circle.p55 .fill, .progress-circle.p56 .bar:after, .progress-circle.p56 .fill, .progress-circle.p57 .bar:after, .progress-circle.p57 .fill, .progress-circle.p58 .bar:after, .progress-circle.p58 .fill, .progress-circle.p59 .bar:after, .progress-circle.p59 .fill, .progress-circle.p60 .bar:after, .progress-circle.p60 .fill, .progress-circle.p61 .bar:after, .progress-circle.p61 .fill, .progress-circle.p62 .bar:after, .progress-circle.p62 .fill, .progress-circle.p63 .bar:after, .progress-circle.p63 .fill, .progress-circle.p64 .bar:after, .progress-circle.p64 .fill, .progress-circle.p65 .bar:after, .progress-circle.p65 .fill, .progress-circle.p66 .bar:after, .progress-circle.p66 .fill, .progress-circle.p67 .bar:after, .progress-circle.p67 .fill, .progress-circle.p68 .bar:after, .progress-circle.p68 .fill, .progress-circle.p69 .bar:after, .progress-circle.p69 .fill, .progress-circle.p70 .bar:after, .progress-circle.p70 .fill, .progress-circle.p71 .bar:after, .progress-circle.p71 .fill, .progress-circle.p72 .bar:after, .progress-circle.p72 .fill, .progress-circle.p73 .bar:after, .progress-circle.p73 .fill, .progress-circle.p74 .bar:after, .progress-circle.p74 .fill, .progress-circle.p75 .bar:after, .progress-circle.p75 .fill, .progress-circle.p76 .bar:after, .progress-circle.p76 .fill, .progress-circle.p77 .bar:after, .progress-circle.p77 .fill, .progress-circle.p78 .bar:after, .progress-circle.p78 .fill, .progress-circle.p79 .bar:after, .progress-circle.p79 .fill, .progress-circle.p80 .bar:after, .progress-circle.p80 .fill, .progress-circle.p81 .bar:after, .progress-circle.p81 .fill, .progress-circle.p82 .bar:after, .progress-circle.p82 .fill, .progress-circle.p83 .bar:after, .progress-circle.p83 .fill, .progress-circle.p84 .bar:after, .progress-circle.p84 .fill, .progress-circle.p85 .bar:after, .progress-circle.p85 .fill, .progress-circle.p86 .bar:after, .progress-circle.p86 .fill, .progress-circle.p87 .bar:after, .progress-circle.p87 .fill, .progress-circle.p88 .bar:after, .progress-circle.p88 .fill, .progress-circle.p89 .bar:after, .progress-circle.p89 .fill, .progress-circle.p90 .bar:after, .progress-circle.p90 .fill, .progress-circle.p91 .bar:after, .progress-circle.p91 .fill, .progress-circle.p92 .bar:after, .progress-circle.p92 .fill, .progress-circle.p93 .bar:after, .progress-circle.p93 .fill, .progress-circle.p94 .bar:after, .progress-circle.p94 .fill, .progress-circle.p95 .bar:after, .progress-circle.p95 .fill, .progress-circle.p96 .bar:after, .progress-circle.p96 .fill, .progress-circle.p97 .bar:after, .progress-circle.p97 .fill, .progress-circle.p98 .bar:after, .progress-circle.p98 .fill, .progress-circle.p99 .bar:after, .progress-circle.p99 .fill, .progress-circle.p100 .bar:after, .progress-circle.p100 .fill { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .progress-circle { position: relative; font-size: 120px; width: 1em; height: 1em; border-radius: 50%; float: left; margin: 0 0.1em 0.1em 0; background-color: rgba(204, 204, 204, 0.8); } .progress-circle *, .progress-circle *:before, .progress-circle *:after { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .progress-circle.center { float: none; margin: 0 auto; } .progress-circle.big { font-size: 240px; } .progress-circle.small { font-size: 80px; } .progress-circle > span { position: absolute; z-index: 1; left: 0; top: 0; width: 5em; line-height: 5em; font-size: 0.2em; color: #ccc; display: block; text-align: center; white-space: nowrap; -webkit-transition-property: all; -moz-transition-property: all; -o-transition-property: all; transition-property: all; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; -o-transition-duration: 0.2s; transition-duration: 0.2s; -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; } .progress-circle:after { position: absolute; top: 0.08em; left: 0.08em; display: block; content: " "; border-radius: 50%; background-color: rgba(50, 50, 50, 0.5); width: 0.84em; height: 0.84em; -webkit-transition-property: all; -moz-transition-property: all; -o-transition-property: all; transition-property: all; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; -o-transition-duration: 0.2s; transition-duration: 0.2s; -webkit-transition-timing-function: ease-in; -moz-transition-timing-function: ease-in; -o-transition-timing-function: ease-in; transition-timing-function: ease-in; } .progress-circle .slice { position: absolute; width: 1em; height: 1em; clip: rect(0em, 1em, 1em, 0.5em); } .progress-circle.p1 .bar { -webkit-transform: rotate(3.6deg); -moz-transform: rotate(3.6deg); -ms-transform: rotate(3.6deg); -o-transform: rotate(3.6deg); transform: rotate(3.6deg); } .progress-circle.p2 .bar { -webkit-transform: rotate(7.2deg); -moz-transform: rotate(7.2deg); -ms-transform: rotate(7.2deg); -o-transform: rotate(7.2deg); transform: rotate(7.2deg); } .progress-circle.p3 .bar { -webkit-transform: rotate(10.8deg); -moz-transform: rotate(10.8deg); -ms-transform: rotate(10.8deg); -o-transform: rotate(10.8deg); transform: rotate(10.8deg); } .progress-circle.p4 .bar { -webkit-transform: rotate(14.4deg); -moz-transform: rotate(14.4deg); -ms-transform: rotate(14.4deg); -o-transform: rotate(14.4deg); transform: rotate(14.4deg); } .progress-circle.p5 .bar { -webkit-transform: rotate(18deg); -moz-transform: rotate(18deg); -ms-transform: rotate(18deg); -o-transform: rotate(18deg); transform: rotate(18deg); } .progress-circle.p6 .bar { -webkit-transform: rotate(21.6deg); -moz-transform: rotate(21.6deg); -ms-transform: rotate(21.6deg); -o-transform: rotate(21.6deg); transform: rotate(21.6deg); } .progress-circle.p7 .bar { -webkit-transform: rotate(25.2deg); -moz-transform: rotate(25.2deg); -ms-transform: rotate(25.2deg); -o-transform: rotate(25.2deg); transform: rotate(25.2deg); } .progress-circle.p8 .bar { -webkit-transform: rotate(28.8deg); -moz-transform: rotate(28.8deg); -ms-transform: rotate(28.8deg); -o-transform: rotate(28.8deg); transform: rotate(28.8deg); } .progress-circle.p9 .bar { -webkit-transform: rotate(32.4deg); -moz-transform: rotate(32.4deg); -ms-transform: rotate(32.4deg); -o-transform: rotate(32.4deg); transform: rotate(32.4deg); } .progress-circle.p10 .bar { -webkit-transform: rotate(36deg); -moz-transform: rotate(36deg); -ms-transform: rotate(36deg); -o-transform: rotate(36deg); transform: rotate(36deg); } .progress-circle.p11 .bar { -webkit-transform: rotate(39.6deg); -moz-transform: rotate(39.6deg); -ms-transform: rotate(39.6deg); -o-transform: rotate(39.6deg); transform: rotate(39.6deg); } .progress-circle.p12 .bar { -webkit-transform: rotate(43.2deg); -moz-transform: rotate(43.2deg); -ms-transform: rotate(43.2deg); -o-transform: rotate(43.2deg); transform: rotate(43.2deg); } .progress-circle.p13 .bar { -webkit-transform: rotate(46.800000000000004deg); -moz-transform: rotate(46.800000000000004deg); -ms-transform: rotate(46.800000000000004deg); -o-transform: rotate(46.800000000000004deg); transform: rotate(46.800000000000004deg); } .progress-circle.p14 .bar { -webkit-transform: rotate(50.4deg); -moz-transform: rotate(50.4deg); -ms-transform: rotate(50.4deg); -o-transform: rotate(50.4deg); transform: rotate(50.4deg); } .progress-circle.p15 .bar { -webkit-transform: rotate(54deg); -moz-transform: rotate(54deg); -ms-transform: rotate(54deg); -o-transform: rotate(54deg); transform: rotate(54deg); } .progress-circle.p16 .bar { -webkit-transform: rotate(57.6deg); -moz-transform: rotate(57.6deg); -ms-transform: rotate(57.6deg); -o-transform: rotate(57.6deg); transform: rotate(57.6deg); } .progress-circle.p17 .bar { -webkit-transform: rotate(61.2deg); -moz-transform: rotate(61.2deg); -ms-transform: rotate(61.2deg); -o-transform: rotate(61.2deg); transform: rotate(61.2deg); } .progress-circle.p18 .bar { -webkit-transform: rotate(64.8deg); -moz-transform: rotate(64.8deg); -ms-transform: rotate(64.8deg); -o-transform: rotate(64.8deg); transform: rotate(64.8deg); } .progress-circle.p19 .bar { -webkit-transform: rotate(68.4deg); -moz-transform: rotate(68.4deg); -ms-transform: rotate(68.4deg); -o-transform: rotate(68.4deg); transform: rotate(68.4deg); } .progress-circle.p20 .bar { -webkit-transform: rotate(72deg); -moz-transform: rotate(72deg); -ms-transform: rotate(72deg); -o-transform: rotate(72deg); transform: rotate(72deg); } .progress-circle.p21 .bar { -webkit-transform: rotate(75.60000000000001deg); -moz-transform: rotate(75.60000000000001deg); -ms-transform: rotate(75.60000000000001deg); -o-transform: rotate(75.60000000000001deg); transform: rotate(75.60000000000001deg); } .progress-circle.p22 .bar { -webkit-transform: rotate(79.2deg); -moz-transform: rotate(79.2deg); -ms-transform: rotate(79.2deg); -o-transform: rotate(79.2deg); transform: rotate(79.2deg); } .progress-circle.p23 .bar { -webkit-transform: rotate(82.8deg); -moz-transform: rotate(82.8deg); -ms-transform: rotate(82.8deg); -o-transform: rotate(82.8deg); transform: rotate(82.8deg); } .progress-circle.p24 .bar { -webkit-transform: rotate(86.4deg); -moz-transform: rotate(86.4deg); -ms-transform: rotate(86.4deg); -o-transform: rotate(86.4deg); transform: rotate(86.4deg); } .progress-circle.p25 .bar { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } .progress-circle.p26 .bar { -webkit-transform: rotate(93.60000000000001deg); -moz-transform: rotate(93.60000000000001deg); -ms-transform: rotate(93.60000000000001deg); -o-transform: rotate(93.60000000000001deg); transform: rotate(93.60000000000001deg); } .progress-circle.p27 .bar { -webkit-transform: rotate(97.2deg); -moz-transform: rotate(97.2deg); -ms-transform: rotate(97.2deg); -o-transform: rotate(97.2deg); transform: rotate(97.2deg); } .progress-circle.p28 .bar { -webkit-transform: rotate(100.8deg); -moz-transform: rotate(100.8deg); -ms-transform: rotate(100.8deg); -o-transform: rotate(100.8deg); transform: rotate(100.8deg); } .progress-circle.p29 .bar { -webkit-transform: rotate(104.4deg); -moz-transform: rotate(104.4deg); -ms-transform: rotate(104.4deg); -o-transform: rotate(104.4deg); transform: rotate(104.4deg); } .progress-circle.p30 .bar { -webkit-transform: rotate(108deg); -moz-transform: rotate(108deg); -ms-transform: rotate(108deg); -o-transform: rotate(108deg); transform: rotate(108deg); } .progress-circle.p31 .bar { -webkit-transform: rotate(111.60000000000001deg); -moz-transform: rotate(111.60000000000001deg); -ms-transform: rotate(111.60000000000001deg); -o-transform: rotate(111.60000000000001deg); transform: rotate(111.60000000000001deg); } .progress-circle.p32 .bar { -webkit-transform: rotate(115.2deg); -moz-transform: rotate(115.2deg); -ms-transform: rotate(115.2deg); -o-transform: rotate(115.2deg); transform: rotate(115.2deg); } .progress-circle.p33 .bar { -webkit-transform: rotate(118.8deg); -moz-transform: rotate(118.8deg); -ms-transform: rotate(118.8deg); -o-transform: rotate(118.8deg); transform: rotate(118.8deg); } .progress-circle.p34 .bar { -webkit-transform: rotate(122.4deg); -moz-transform: rotate(122.4deg); -ms-transform: rotate(122.4deg); -o-transform: rotate(122.4deg); transform: rotate(122.4deg); } .progress-circle.p35 .bar { -webkit-transform: rotate(126deg); -moz-transform: rotate(126deg); -ms-transform: rotate(126deg); -o-transform: rotate(126deg); transform: rotate(126deg); } .progress-circle.p36 .bar { -webkit-transform: rotate(129.6deg); -moz-transform: rotate(129.6deg); -ms-transform: rotate(129.6deg); -o-transform: rotate(129.6deg); transform: rotate(129.6deg); } .progress-circle.p37 .bar { -webkit-transform: rotate(133.20000000000002deg); -moz-transform: rotate(133.20000000000002deg); -ms-transform: rotate(133.20000000000002deg); -o-transform: rotate(133.20000000000002deg); transform: rotate(133.20000000000002deg); } .progress-circle.p38 .bar { -webkit-transform: rotate(136.8deg); -moz-transform: rotate(136.8deg); -ms-transform: rotate(136.8deg); -o-transform: rotate(136.8deg); transform: rotate(136.8deg); } .progress-circle.p39 .bar { -webkit-transform: rotate(140.4deg); -moz-transform: rotate(140.4deg); -ms-transform: rotate(140.4deg); -o-transform: rotate(140.4deg); transform: rotate(140.4deg); } .progress-circle.p40 .bar { -webkit-transform: rotate(144deg); -moz-transform: rotate(144deg); -ms-transform: rotate(144deg); -o-transform: rotate(144deg); transform: rotate(144deg); } .progress-circle.p41 .bar { -webkit-transform: rotate(147.6deg); -moz-transform: rotate(147.6deg); -ms-transform: rotate(147.6deg); -o-transform: rotate(147.6deg); transform: rotate(147.6deg); } .progress-circle.p42 .bar { -webkit-transform: rotate(151.20000000000002deg); -moz-transform: rotate(151.20000000000002deg); -ms-transform: rotate(151.20000000000002deg); -o-transform: rotate(151.20000000000002deg); transform: rotate(151.20000000000002deg); } .progress-circle.p43 .bar { -webkit-transform: rotate(154.8deg); -moz-transform: rotate(154.8deg); -ms-transform: rotate(154.8deg); -o-transform: rotate(154.8deg); transform: rotate(154.8deg); } .progress-circle.p44 .bar { -webkit-transform: rotate(158.4deg); -moz-transform: rotate(158.4deg); -ms-transform: rotate(158.4deg); -o-transform: rotate(158.4deg); transform: rotate(158.4deg); } .progress-circle.p45 .bar { -webkit-transform: rotate(162deg); -moz-transform: rotate(162deg); -ms-transform: rotate(162deg); -o-transform: rotate(162deg); transform: rotate(162deg); } .progress-circle.p46 .bar { -webkit-transform: rotate(165.6deg); -moz-transform: rotate(165.6deg); -ms-transform: rotate(165.6deg); -o-transform: rotate(165.6deg); transform: rotate(165.6deg); } .progress-circle.p47 .bar { -webkit-transform: rotate(169.20000000000002deg); -moz-transform: rotate(169.20000000000002deg); -ms-transform: rotate(169.20000000000002deg); -o-transform: rotate(169.20000000000002deg); transform: rotate(169.20000000000002deg); } .progress-circle.p48 .bar { -webkit-transform: rotate(172.8deg); -moz-transform: rotate(172.8deg); -ms-transform: rotate(172.8deg); -o-transform: rotate(172.8deg); transform: rotate(172.8deg); } .progress-circle.p49 .bar { -webkit-transform: rotate(176.4deg); -moz-transform: rotate(176.4deg); -ms-transform: rotate(176.4deg); -o-transform: rotate(176.4deg); transform: rotate(176.4deg); } .progress-circle.p50 .bar { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .progress-circle.p51 .bar { -webkit-transform: rotate(183.6deg); -moz-transform: rotate(183.6deg); -ms-transform: rotate(183.6deg); -o-transform: rotate(183.6deg); transform: rotate(183.6deg); } .progress-circle.p52 .bar { -webkit-transform: rotate(187.20000000000002deg); -moz-transform: rotate(187.20000000000002deg); -ms-transform: rotate(187.20000000000002deg); -o-transform: rotate(187.20000000000002deg); transform: rotate(187.20000000000002deg); } .progress-circle.p53 .bar { -webkit-transform: rotate(190.8deg); -moz-transform: rotate(190.8deg); -ms-transform: rotate(190.8deg); -o-transform: rotate(190.8deg); transform: rotate(190.8deg); } .progress-circle.p54 .bar { -webkit-transform: rotate(194.4deg); -moz-transform: rotate(194.4deg); -ms-transform: rotate(194.4deg); -o-transform: rotate(194.4deg); transform: rotate(194.4deg); } .progress-circle.p55 .bar { -webkit-transform: rotate(198deg); -moz-transform: rotate(198deg); -ms-transform: rotate(198deg); -o-transform: rotate(198deg); transform: rotate(198deg); } .progress-circle.p56 .bar { -webkit-transform: rotate(201.6deg); -moz-transform: rotate(201.6deg); -ms-transform: rotate(201.6deg); -o-transform: rotate(201.6deg); transform: rotate(201.6deg); } .progress-circle.p57 .bar { -webkit-transform: rotate(205.20000000000002deg); -moz-transform: rotate(205.20000000000002deg); -ms-transform: rotate(205.20000000000002deg); -o-transform: rotate(205.20000000000002deg); transform: rotate(205.20000000000002deg); } .progress-circle.p58 .bar { -webkit-transform: rotate(208.8deg); -moz-transform: rotate(208.8deg); -ms-transform: rotate(208.8deg); -o-transform: rotate(208.8deg); transform: rotate(208.8deg); } .progress-circle.p59 .bar { -webkit-transform: rotate(212.4deg); -moz-transform: rotate(212.4deg); -ms-transform: rotate(212.4deg); -o-transform: rotate(212.4deg); transform: rotate(212.4deg); } .progress-circle.p60 .bar { -webkit-transform: rotate(216deg); -moz-transform: rotate(216deg); -ms-transform: rotate(216deg); -o-transform: rotate(216deg); transform: rotate(216deg); } .progress-circle.p61 .bar { -webkit-transform: rotate(219.6deg); -moz-transform: rotate(219.6deg); -ms-transform: rotate(219.6deg); -o-transform: rotate(219.6deg); transform: rotate(219.6deg); } .progress-circle.p62 .bar { -webkit-transform: rotate(223.20000000000002deg); -moz-transform: rotate(223.20000000000002deg); -ms-transform: rotate(223.20000000000002deg); -o-transform: rotate(223.20000000000002deg); transform: rotate(223.20000000000002deg); } .progress-circle.p63 .bar { -webkit-transform: rotate(226.8deg); -moz-transform: rotate(226.8deg); -ms-transform: rotate(226.8deg); -o-transform: rotate(226.8deg); transform: rotate(226.8deg); } .progress-circle.p64 .bar { -webkit-transform: rotate(230.4deg); -moz-transform: rotate(230.4deg); -ms-transform: rotate(230.4deg); -o-transform: rotate(230.4deg); transform: rotate(230.4deg); } .progress-circle.p65 .bar { -webkit-transform: rotate(234deg); -moz-transform: rotate(234deg); -ms-transform: rotate(234deg); -o-transform: rotate(234deg); transform: rotate(234deg); } .progress-circle.p66 .bar { -webkit-transform: rotate(237.6deg); -moz-transform: rotate(237.6deg); -ms-transform: rotate(237.6deg); -o-transform: rotate(237.6deg); transform: rotate(237.6deg); } .progress-circle.p67 .bar { -webkit-transform: rotate(241.20000000000002deg); -moz-transform: rotate(241.20000000000002deg); -ms-transform: rotate(241.20000000000002deg); -o-transform: rotate(241.20000000000002deg); transform: rotate(241.20000000000002deg); } .progress-circle.p68 .bar { -webkit-transform: rotate(244.8deg); -moz-transform: rotate(244.8deg); -ms-transform: rotate(244.8deg); -o-transform: rotate(244.8deg); transform: rotate(244.8deg); } .progress-circle.p69 .bar { -webkit-transform: rotate(248.4deg); -moz-transform: rotate(248.4deg); -ms-transform: rotate(248.4deg); -o-transform: rotate(248.4deg); transform: rotate(248.4deg); } .progress-circle.p70 .bar { -webkit-transform: rotate(252deg); -moz-transform: rotate(252deg); -ms-transform: rotate(252deg); -o-transform: rotate(252deg); transform: rotate(252deg); } .progress-circle.p71 .bar { -webkit-transform: rotate(255.6deg); -moz-transform: rotate(255.6deg); -ms-transform: rotate(255.6deg); -o-transform: rotate(255.6deg); transform: rotate(255.6deg); } .progress-circle.p72 .bar { -webkit-transform: rotate(259.2deg); -moz-transform: rotate(259.2deg); -ms-transform: rotate(259.2deg); -o-transform: rotate(259.2deg); transform: rotate(259.2deg); } .progress-circle.p73 .bar { -webkit-transform: rotate(262.8deg); -moz-transform: rotate(262.8deg); -ms-transform: rotate(262.8deg); -o-transform: rotate(262.8deg); transform: rotate(262.8deg); } .progress-circle.p74 .bar { -webkit-transform: rotate(266.40000000000003deg); -moz-transform: rotate(266.40000000000003deg); -ms-transform: rotate(266.40000000000003deg); -o-transform: rotate(266.40000000000003deg); transform: rotate(266.40000000000003deg); } .progress-circle.p75 .bar { -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -ms-transform: rotate(270deg); -o-transform: rotate(270deg); transform: rotate(270deg); } .progress-circle.p76 .bar { -webkit-transform: rotate(273.6deg); -moz-transform: rotate(273.6deg); -ms-transform: rotate(273.6deg); -o-transform: rotate(273.6deg); transform: rotate(273.6deg); } .progress-circle.p77 .bar { -webkit-transform: rotate(277.2deg); -moz-transform: rotate(277.2deg); -ms-transform: rotate(277.2deg); -o-transform: rotate(277.2deg); transform: rotate(277.2deg); } .progress-circle.p78 .bar { -webkit-transform: rotate(280.8deg); -moz-transform: rotate(280.8deg); -ms-transform: rotate(280.8deg); -o-transform: rotate(280.8deg); transform: rotate(280.8deg); } .progress-circle.p79 .bar { -webkit-transform: rotate(284.40000000000003deg); -moz-transform: rotate(284.40000000000003deg); -ms-transform: rotate(284.40000000000003deg); -o-transform: rotate(284.40000000000003deg); transform: rotate(284.40000000000003deg); } .progress-circle.p80 .bar { -webkit-transform: rotate(288deg); -moz-transform: rotate(288deg); -ms-transform: rotate(288deg); -o-transform: rotate(288deg); transform: rotate(288deg); } .progress-circle.p81 .bar { -webkit-transform: rotate(291.6deg); -moz-transform: rotate(291.6deg); -ms-transform: rotate(291.6deg); -o-transform: rotate(291.6deg); transform: rotate(291.6deg); } .progress-circle.p82 .bar { -webkit-transform: rotate(295.2deg); -moz-transform: rotate(295.2deg); -ms-transform: rotate(295.2deg); -o-transform: rotate(295.2deg); transform: rotate(295.2deg); } .progress-circle.p83 .bar { -webkit-transform: rotate(298.8deg); -moz-transform: rotate(298.8deg); -ms-transform: rotate(298.8deg); -o-transform: rotate(298.8deg); transform: rotate(298.8deg); } .progress-circle.p84 .bar { -webkit-transform: rotate(302.40000000000003deg); -moz-transform: rotate(302.40000000000003deg); -ms-transform: rotate(302.40000000000003deg); -o-transform: rotate(302.40000000000003deg); transform: rotate(302.40000000000003deg); } .progress-circle.p85 .bar { -webkit-transform: rotate(306deg); -moz-transform: rotate(306deg); -ms-transform: rotate(306deg); -o-transform: rotate(306deg); transform: rotate(306deg); } .progress-circle.p86 .bar { -webkit-transform: rotate(309.6deg); -moz-transform: rotate(309.6deg); -ms-transform: rotate(309.6deg); -o-transform: rotate(309.6deg); transform: rotate(309.6deg); } .progress-circle.p87 .bar { -webkit-transform: rotate(313.2deg); -moz-transform: rotate(313.2deg); -ms-transform: rotate(313.2deg); -o-transform: rotate(313.2deg); transform: rotate(313.2deg); } .progress-circle.p88 .bar { -webkit-transform: rotate(316.8deg); -moz-transform: rotate(316.8deg); -ms-transform: rotate(316.8deg); -o-transform: rotate(316.8deg); transform: rotate(316.8deg); } .progress-circle.p89 .bar { -webkit-transform: rotate(320.40000000000003deg); -moz-transform: rotate(320.40000000000003deg); -ms-transform: rotate(320.40000000000003deg); -o-transform: rotate(320.40000000000003deg); transform: rotate(320.40000000000003deg); } .progress-circle.p90 .bar { -webkit-transform: rotate(324deg); -moz-transform: rotate(324deg); -ms-transform: rotate(324deg); -o-transform: rotate(324deg); transform: rotate(324deg); } .progress-circle.p91 .bar { -webkit-transform: rotate(327.6deg); -moz-transform: rotate(327.6deg); -ms-transform: rotate(327.6deg); -o-transform: rotate(327.6deg); transform: rotate(327.6deg); } .progress-circle.p92 .bar { -webkit-transform: rotate(331.2deg); -moz-transform: rotate(331.2deg); -ms-transform: rotate(331.2deg); -o-transform: rotate(331.2deg); transform: rotate(331.2deg); } .progress-circle.p93 .bar { -webkit-transform: rotate(334.8deg); -moz-transform: rotate(334.8deg); -ms-transform: rotate(334.8deg); -o-transform: rotate(334.8deg); transform: rotate(334.8deg); } .progress-circle.p94 .bar { -webkit-transform: rotate(338.40000000000003deg); -moz-transform: rotate(338.40000000000003deg); -ms-transform: rotate(338.40000000000003deg); -o-transform: rotate(338.40000000000003deg); transform: rotate(338.40000000000003deg); } .progress-circle.p95 .bar { -webkit-transform: rotate(342deg); -moz-transform: rotate(342deg); -ms-transform: rotate(342deg); -o-transform: rotate(342deg); transform: rotate(342deg); } .progress-circle.p96 .bar { -webkit-transform: rotate(345.6deg); -moz-transform: rotate(345.6deg); -ms-transform: rotate(345.6deg); -o-transform: rotate(345.6deg); transform: rotate(345.6deg); } .progress-circle.p97 .bar { -webkit-transform: rotate(349.2deg); -moz-transform: rotate(349.2deg); -ms-transform: rotate(349.2deg); -o-transform: rotate(349.2deg); transform: rotate(349.2deg); } .progress-circle.p98 .bar { -webkit-transform: rotate(352.8deg); -moz-transform: rotate(352.8deg); -ms-transform: rotate(352.8deg); -o-transform: rotate(352.8deg); transform: rotate(352.8deg); } .progress-circle.p99 .bar { -webkit-transform: rotate(356.40000000000003deg); -moz-transform: rotate(356.40000000000003deg); -ms-transform: rotate(356.40000000000003deg); -o-transform: rotate(356.40000000000003deg); transform: rotate(356.40000000000003deg); } .progress-circle.p100 .bar { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } .progress-circle:hover { cursor: default; } .progress-circle:hover > span { width: 3.33em; line-height: 3.33em; font-size: 0.3em; color: #307bbb; } .progress-circle:hover:after { top: 0.04em; left: 0.04em; width: 0.92em; height: 0.92em; } .progress-circle.dark { background-color: #777; } .progress-circle.dark .bar, .progress-circle.dark .fill { border-color: #c6ff00 !important; } .progress-circle.dark > span { color: #777; } .progress-circle.dark:after { background-color: #666; } .progress-circle.dark:hover > span { color: #c6ff00; } .progress-circle.green .bar, .progress-circle.green .fill { border-color: #4db53c !important; } .progress-circle.green:hover > span { color: #4db53c; } .progress-circle.green.dark .bar, .progress-circle.green.dark .fill { border-color: #5fd400 !important; } .progress-circle.green.dark:hover > span { color: #5fd400; } .progress-circle.orange .bar, .progress-circle.orange .fill { border-color: #dd9d22 !important; } .progress-circle.orange:hover > span { color: #dd9d22; } .progress-circle.orange.dark .bar, .progress-circle.orange.dark .fill { border-color: #e08833 !important; } .progress-circle.orange.dark:hover > span { color: #e08833; } #g-setting-billboard { width: 100%; height: 100%; background: #f0f0f0; position: relative; } #g-setting-billboard .billboard-table { margin: 13px 10px 0; background: #fff; border: 1px solid #bbb; border-radius: 5px; padding: 5px; } #g-setting-billboard .billboard-table .table-head { margin-bottom: 5px; display: flex; justify-content: space-between; } #g-setting-billboard .billboard-table .table-head .left .title { line-height: 30px; width: 300px; vertical-align: middle; display: inline-block; } #g-setting-billboard .billboard-table .table-head .left .selector { display: inline-block; } #g-setting-billboard .billboard-table .table-head .left .selector label { line-height: 35px; } #g-setting-billboard .billboard-table .table-head .create-billboard-btn { font-size: 20px; margin: 0 5px; } #g-setting-billboard .billboard-table .table-head .create-billboard-btn:hover { color: #1b76c4; } #g-setting-billboard .billboard-table section .container { height: calc(100vh - 285px); } #g-setting-billboard .billboard-table section .container::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 15px; background-color: #ccc; } #g-setting-billboard .billboard-table section .container::-webkit-scrollbar { border-radius: 17px; width: 7px; height: 6px; background-color: #ccc; } #g-setting-billboard .billboard-table section .container::-webkit-scrollbar-thumb { border-radius: 13px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #313a3e; } #g-setting-billboard .billboard-table section .c-table .selector { text-align: left; padding-left: 5px; width: 20px; } #g-setting-billboard .billboard-table section .c-table .sequence { width: 45px; } #g-setting-billboard .billboard-table section .c-table .billboardTypeId { min-width: 100px; } #g-setting-billboard .billboard-table section .c-table .title, #g-setting-billboard .billboard-table section .c-table .description { min-width: 100px; max-width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #g-setting-billboard .billboard-table section .c-table .createdAt, #g-setting-billboard .billboard-table section .c-table .beginTime, #g-setting-billboard .billboard-table section .c-table .endTime { width: 160px; } #g-setting-billboard .billboard-table section .c-table .more .icon-block { font-size: 18px; } #g-setting-billboard .billboard-table section .c-table .more .icon-block a { margin-right: 12px; } #g-setting-billboard .billboard-table section .c-table .more .icon-block a.delete:hover { color: #CA2124; } #g-setting-billboard .billboard-table section .c-table .more .icon-block a:hover { color: #1b76c4; } #g-setting-billboard .billboard-table section .c-table > tbody > tr { height: 35px; } #g-setting-billboard .MuiTablePagination-root { border: 1px solid #d9d9d9; margin-top: -2px; border-top: 0; } #g-setting-billboard .footer { width: 100%; margin-top: 5px; height: 40px; } #g-setting-billboard .footer .button { float: right; width: 140px; height: 40px; padding: 5px 12px 5px 10px; border-radius: 8px; box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.15); color: #fff; background-color: #5686da; } #g-setting-billboard .footer .button.delete { background-color: #ce4b4d; } #g-setting-billboard .footer .button.delete:hover { background-color: #ca2124; } #g-setting-billboard .footer .button:hover { text-decoration: none; background-color: #1565c0; box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); } #g-setting-billboard .footer button[disabled].delete:hover { background-color: #ce4b4d; box-shadow: unset; cursor: not-allowed; } #g-setting-billboard .page-nav { justify-content: center; margin-top: 7px; } #g-setting-billboard button[disabled], #g-setting-billboard .pure-button[disabled] { border: unset; } #g-setting-billboard #g-billboard-edit .messageType .MuiFormControl-root, #g-setting-billboard #g-billboard-edit .description textarea, #g-setting-billboard #g-billboard-edit .title input { width: 350px; } #g-setting-billboard #g-billboard-edit textarea { height: 200px; } #g-setting-billboard #g-billboard-edit .pure-form-aligned .pure-control-group .c-date-picker .MuiOutlinedInput-adornedEnd { padding-right: unset; } #g-setting-billboard #g-billboard-edit .pure-form-aligned .pure-control-group .c-date-picker .MuiInputBase-input { width: 350px; height: 32px; } #g-setting-billboard #g-billboard-edit .content .attached-block { display: flex; flex-direction: column; } #g-setting-billboard #g-billboard-edit .content .attached-block .new-icon { width: 350px; display: flex; justify-content: center; background: #ddd; padding: 5px 0; border-radius: 5px; cursor: pointer; } #g-setting-billboard #g-billboard-edit .content .attached-block .attached-inputs { width: 350px; margin: 5px 5px 5px 0; padding: 5px; border: 1px solid #ccc; border-radius: 3px; } #g-setting-billboard #g-billboard-edit .content .attached-block .attached-inputs .attached-header { display: flex; justify-content: space-between; align-items: center; font-size: 16px; } #g-setting-billboard #g-billboard-edit .content .attached-block .attached-inputs .attached-header i:hover { color: red; cursor: pointer; } #g-setting-billboard #g-billboard-edit .content .attached-block .attached-inputs .attached-body .attached-input-item label { width: 30px; } #g-setting-billboard #g-billboard-edit .content .attached-block .attached-inputs .attached-body .attached-input-item input { width: 80%; } #g-setting-billboard #g-billboard-edit .content .attached-block .attached-inputs .attached-body .attached-input-item:nth-of-type(1) { margin-bottom: 5px; } #g-setting-billboard #g-billboard-edit .content .attached-block .attached-inputs .attached-body .image-preview, #g-setting-billboard #g-billboard-edit .content .attached-block .attached-inputs .attached-body img { max-width: 100%; } #g-setting-billboard #g-billboard-edit .content .attached-block .attached-inputs i.fa-times-circle { display: none; } #g-setting-billboard #g-billboard-edit .content .file .file-input { display: flex; flex-direction: column; align-items: baseline; width: 350px; } #g-setting-billboard #g-billboard-edit .content .file .file-input .download-file { display: flex; justify-content: space-between; align-items: center; width: 100%; cursor: default; } #g-setting-billboard #g-billboard-edit .content .file .file-input .download-file a:hover { color: #1565c0; cursor: pointer; } #g-setting-billboard #g-billboard-edit .content .file .file-input .download-file i:hover { color: red; cursor: pointer; } #g-setting-billboard #g-billboard-edit .content .file .file-input input[type="text"] { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } #g-setting-billboard #g-billboard-edit .content .file i.fa-times-circle { display: none; } #g-setting-billboard #g-billboard-type-detail .c-border { height: unset; } #g-setting-billboard #g-billboard-type-detail .bar { display: flex; width: 100%; justify-content: flex-end; align-items: center; margin-bottom: 10px; } #g-setting-billboard #g-billboard-type-detail section .container { height: unset; } #g-setting-billboard #g-billboard-type-detail section .container .icon-block { font-size: 18px; } #g-setting-billboard #g-billboard-type-detail section .container .icon-block a { margin-right: 12px; } #g-setting-billboard #g-billboard-type-detail section .container .icon-block a.delete:hover { color: #CA2124; } #g-setting-billboard #g-billboard-type-detail section .container .icon-block a:hover { color: #1b76c4; } #g-device { width: 100%; height: 100%; background: #f0f0f0; position: relative; } #g-device .device-headBar { height: 45px; padding-right: 10px; position: absolute; top: 0; right: 0; z-index: 10; display: flex; } #g-device .device-headBar .selector { display: inline-flex; align-items: center; margin-right: 15px; } #g-device .device-headBar .selector .label { margin: 0 5px 0 0; } #g-device .device-headBar .icon { line-height: 45px; font-size: 20px; margin: 0 5px; width: 25px; } #g-device .device-headBar .icon:hover { color: #1b76c4; } #g-device #g-device-tabs { margin: 13px 10px 0; height: calc(100% - 20px); } #g-device #g-device-tabs #analyticCamera, #g-device #g-device-tabs #cctv, #g-device #g-device-tabs #road, #g-device #g-device-tabs #nvr, #g-device #g-device-tabs #tipcCctv { display: block; } #g-device #g-device-tabs.c-tabs > .tabContent { border: 1px solid #bbb; flex-grow: 1; display: flex; position: relative; padding: 5px 4px; overflow-y: auto; background-color: white; border-radius: 0 5px 5px 5px; margin-top: unset; } #g-device #g-device-tabs.c-tabs > .tabContent::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 15px; background-color: #ccc; } #g-device #g-device-tabs.c-tabs > .tabContent::-webkit-scrollbar { border-radius: 17px; width: 7px; height: 6px; background-color: #ccc; } #g-device #g-device-tabs.c-tabs > .tabContent::-webkit-scrollbar-thumb { border-radius: 13px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #313a3e; } #g-device #g-device-tabs.c-tabs > .tabContent .c-border { height: unset; overflow: auto; } #g-device #g-device-tabs.c-tabs > .tabContent .c-border::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 15px; background-color: #ccc; } #g-device #g-device-tabs.c-tabs > .tabContent .c-border::-webkit-scrollbar { border-radius: 17px; width: 7px; height: 6px; background-color: #ccc; } #g-device #g-device-tabs.c-tabs > .tabContent .c-border::-webkit-scrollbar-thumb { border-radius: 13px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #313a3e; } #g-device #g-device-tabs.c-tabs > .menu { display: flex; flex-grow: 0; flex-shrink: 0; flex-wrap: wrap; margin-bottom: -1px; border-bottom: unset; } #g-device #g-device-tabs.c-tabs > .menu li { background-color: #5686da; color: #fff; margin-right: 5px; } #g-device #g-device-tabs.c-tabs > .menu li.current { background-color: #fff; cursor: default; color: #313a3e; border: 1px solid #bbb; border-bottom: 0; z-index: 2; } #g-device #g-device-tabs.road section .container { height: calc(100vh - 234px); } #g-device #g-device-tabs section .container { min-width: 1500px; height: calc(100vh - 280px); } #g-device #g-device-tabs section .container::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 15px; background-color: #ccc; } #g-device #g-device-tabs section .container::-webkit-scrollbar { border-radius: 17px; width: 7px; height: 6px; background-color: #ccc; } #g-device #g-device-tabs section .container::-webkit-scrollbar-thumb { border-radius: 13px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #313a3e; } #g-device #g-device-tabs section .c-table .selector { text-align: left; padding-left: 5px; width: 20px; } #g-device #g-device-tabs section .c-table .sequence { width: 60px; } #g-device #g-device-tabs section .c-table .isShowOnMap, #g-device #g-device-tabs section .c-table .terminal { width: calc(100% * 0.1); } #g-device #g-device-tabs section .c-table .deliverType, #g-device #g-device-tabs section .c-table .channel, #g-device #g-device-tabs section .c-table .nvrChannel { width: 120px !important; } #g-device #g-device-tabs section .c-table .nvr, #g-device #g-device-tabs section .c-table .name, #g-device #g-device-tabs section .c-table .location { width: 300px; } #g-device #g-device-tabs section .c-table .port, #g-device #g-device-tabs section .c-table .ip, #g-device #g-device-tabs section .c-table .ivarId { width: calc(100% * 0.2); } #g-device #g-device-tabs section .c-table .streamUrl { width: 400px; } #g-device #g-device-tabs section .c-table .monitor, #g-device #g-device-tabs section .c-table .status, #g-device #g-device-tabs section .c-table .isShowMap { width: 130px !important; } #g-device #g-device-tabs section .c-table .more { width: calc(100% * 0.1); } #g-device #g-device-tabs section .c-table .latlng, #g-device #g-device-tabs section .c-table .nvrName, #g-device #g-device-tabs section .c-table .nvrIp { width: 220px; } #g-device #g-device-tabs section .c-table .icon-block { font-size: 18px; } #g-device #g-device-tabs section .c-table .icon-block a { margin-right: 12px; } #g-device #g-device-tabs section .c-table .icon-block a.delete:hover { color: #CA2124; } #g-device #g-device-tabs section .c-table .icon-block a:hover { color: #1b76c4; } #g-device #g-device-tabs section .c-table > tbody > tr { height: 35px; } #g-device #g-device-create-edit .content #streamUrlTypes { flex-direction: inherit; } #g-device #g-device-create-edit .content #streamUrlTypes .list-item { margin: unset; } #g-device #g-device-create-edit .content #streamUrlTypes .list-item .Mui-checked, #g-device #g-device-create-edit .content #streamUrlTypes .list-item .Mui-disabled, #g-device #g-device-create-edit .content #streamUrlTypes .list-item .MuiCheckbox-colorPrimary { padding: 0px; } #g-device #g-device-create-edit .content #streamUrlTypes .list-item label { width: unset; } #g-device #g-device-create-edit .content #streamUrlTypes .list-item label.disable { color: #aaa; } #g-device #g-device-create-edit .content .device-edit-streamUrl { display: block; } #g-device .MuiTablePagination-root { border: 1px solid #d9d9d9; margin-top: -2px; border-top: 0; } #g-device button[disabled], #g-device .pure-button[disabled] { border: unset; } #g-device .footer { width: 100%; margin-top: 5px; } #g-device .footer .button { float: right; width: 140px; height: 40px; padding: 5px 12px 5px 10px; border-radius: 8px; box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.15); color: #fff; background-color: #5686da; } #g-device .footer .button.delete { background-color: #ce4b4d; } #g-device .footer .button.delete:hover { background-color: #ca2124; } #g-device .footer .button:hover { text-decoration: none; background-color: #1565c0; box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); } #g-device .footer button[disabled].delete:hover { background-color: #ce4b4d; box-shadow: unset; cursor: not-allowed; } #g-device #g-videoPlayer-popup iframe { border: none; } #g-device #g-videoPlayer-popup .hls-video-block { width: 100%; max-width: 700px; background-color: #000; position: relative; display: flex; } #g-device #g-videoPlayer-popup .hls-video-block video { display: block; vertical-align: middle; width: inherit; } #g-device #g-videoPlayer-popup .hls-video-block .loading { position: absolute; top: 0; width: inherit; color: white; height: 100%; display: flex; justify-content: center; align-items: center; } #g-device #g-videoPlayer-popup .camera-content { width: 100%; } #g-device #g-videoPlayer-popup .camera-info { border-radius: 0 8px 8px 0; margin: 20px 0; cursor: default; } #g-device #g-videoPlayer-popup .camera-info .camera-name { margin: 0 0 0 15px; } #g-device #g-videoPlayer-popup .camera-info .camera-area { margin: 10px 15px 0; color: #afafaf; } #g-device #g-videoPlayer-popup .its-videoPlayer { position: relative; width: 100%; } #g-device #g-videoPlayer-popup .its-videoPlayer .camera-reload-mask { position: absolute; bottom: 0; right: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); display: flex; justify-content: center; align-items: center; } #g-device #g-videoPlayer-popup .its-videoPlayer .camera-reload-btn { width: 50px; height: 50px; border-radius: 50%; background-color: transparent; padding: 0; color: #fff; font-size: 4rem; border: none; outline: none; cursor: pointer; display: flex; justify-content: center; align-items: center; } #g-analytic-camera-edit-content { padding: unset; box-sizing: border-box; overflow: auto; } #g-analytic-camera-edit-content .profile-item { padding: 0 0 0 15px; min-height: 44px; display: flex; align-items: center; } #g-analytic-camera-edit-content .profile-item i { font-size: 18px; display: block; padding: 0 10px; } #g-analytic-camera-edit-content .profile-item i:hover { cursor: pointer; color: #1b76c4; } #g-analytic-camera-edit-content .profile-item i.icon-ic_eye, #g-analytic-camera-edit-content .profile-item i.icon-ic_eye_2 { padding: 0 10px 0 0; } #g-analytic-camera-edit-content .analytic-setup { width: 100%; } #g-analytic-camera-edit-content .section-part { padding: 0 20px 10px 20px; } #g-analytic-camera-edit-content .section-part .title-2 { color: #4a4a4a; padding: 20px 12px 12px 12px; border-bottom: 1px #d9d9d9 solid; font-weight: bold; position: relative; } #g-analytic-camera-edit-content .section-part .title-2 ul { position: absolute; right: 4px; top: 12px; border: 1px solid #d9d9d9; border-radius: 5px; display: flex; align-items: center; color: #4A4A4A; font-size: 14px; font-weight: normal; } #g-analytic-camera-edit-content .section-part .title-2 ul li { padding: 0 20px; border-right: 1px solid #d9d9d9; line-height: 28px; cursor: pointer; } #g-analytic-camera-edit-content .section-part .title-2 ul li:first-child { border-radius: 5px 0 0 5px; } #g-analytic-camera-edit-content .section-part .title-2 ul li:last-child { border: none; border-radius: 0 5px 5px 0; } #g-analytic-camera-edit-content .section-part .title-2 ul li.focus { color: #fff; background-color: #5E6FD9; } #g-analytic-camera-edit-content .section-part .analysis-content { display: flex; background-color: #fff; height: 480px; } #g-analytic-camera-edit-content .section-part .analysis-content .analysis-left { width: 360px; height: 480px; min-height: 271px; border-right: 1px #d9d9d9 solid; overflow: auto; } #g-analytic-camera-edit-content .section-part .analysis-content .analysis-left ul { border-bottom: 1px #d9d9d9 solid; font-size: 14px; color: #666666; line-height: 22px; } #g-analytic-camera-edit-content .section-part .analysis-content .analysis-left ul:last-child { border-bottom: none; } #g-analytic-camera-edit-content .section-part .analysis-content .analysis-left ul li { border-bottom: 1px #d9d9d9 solid; margin: 0 0 0 40px; padding: 12px 0 12px 12px; } #g-analytic-camera-edit-content .section-part .analysis-content .analysis-left ul li.focus { background-color: #EFEFEF; } #g-analytic-camera-edit-content .section-part .analysis-content .analysis-left ul li:first-child { margin: 0px; font-weight: bold; } #g-analytic-camera-edit-content .section-part .analysis-content .analysis-left ul li:last-child { border-bottom: none; } #g-analytic-camera-edit-content .section-part .analysis-content .analysis-right { width: calc(100% - 360px); background-color: #f5f5f5; } #g-analytic-camera-edit-content #drawingToolApp { text-align: center; } @keyframes App-logo-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } #g-analytic-camera-edit-content #drawingToolApp .App-logo { animation: App-logo-spin infinite 20s linear; height: 80px; } #g-analytic-camera-edit-content #drawingToolApp .App-header { background-color: #222; height: 150px; padding: 20px; color: white; } #g-analytic-camera-edit-content #drawingToolApp .App-title { font-size: 1.5em; } #g-analytic-camera-edit-content #drawingToolApp .App-intro { font-size: large; } #g-profile-setting { display: flex; justify-content: space-between; /*選單 */ /*燈號 */ /*scrollTools*/ /*profile起始設定*/ /*設定選項*/ /*ROI*/ /*下面那條 information*/ /*g-popup-container purple*/ /*g-popup-container purple*/ /*遺失的一段*/ } #g-profile-setting .vaSchdeuleModal { background: white; padding-bottom: 10px; width: 100vw; } #g-profile-setting .noRight { opacity: 0.5; cursor: not-allowed; } #g-profile-setting .disableCondition { pointer-events: none; } #g-profile-setting .notAllowDraw { pointer-events: none; } #g-profile-setting .content { font-family: Arial, Helvetica, sans-serif, Microsoft JhengHei; color: #666; font-size: 13px; line-height: 23px; min-width: 1000px; } #g-profile-setting #undefined-dialog .content { min-width: 0px; } #g-profile-setting .sidebar_a { width: 260px; background-color: rgba(0, 0, 0, 0.05); overflow: hidden; color: #666; padding: 0px; } #g-profile-setting .searchBar { height: 42px; width: 100%; background-color: rgba(0, 0, 0, 0.1); } #g-profile-setting .c-search input { width: 251px; height: 30px; margin: 5px; padding: 0 5px; border-radius: 5px; border: 1px solid #D9D9D9; } #g-profile-setting .c-search > i { right: -231px; top: -29px; position: relative; } #g-profile-setting .profile-title { line-height: 40px; font-size: 18px; padding: 0 0 0 10px; font-weight: normal; display: flex; align-items: center; justify-content: space-between; } #g-profile-setting button.icon-area, #g-profile-setting button.icon-area2 { width: 30px; height: 30px; min-width: 30px; display: flex; align-items: center; justify-content: center; float: right; border-radius: 5px; background: #fff; border: 1px solid #D9D9D9; margin: 0 5px 0 0; padding: 0px; outline: none; color: #4a4a4a; font-size: 24px; cursor: pointer; } #g-profile-setting button.icon-area.permissionDeny, #g-profile-setting button.icon-area2.permissionDeny { cursor: not-allowed; } #g-profile-setting button.icon-area:hover { background-color: #E5E5E5; outline: none; } #g-profile-setting button.icon-area:active, #g-profile-setting button.icon-area.active { background-color: #4A59AF; color: #fff; outline: none; } #g-profile-setting button.icon-area2:hover { background-color: #E5E5E5; outline: none; } #g-profile-setting button.icon-area2:active { background-color: rgba(0, 0, 0, 0.2); color: #4A4A4A; outline: none; } #g-profile-setting .profile-list { height: calc(100vh - 225px); padding: 0 0 45px 0; overflow: auto; } #g-profile-setting .profile-list .add { padding: 0px; } #g-profile-setting .profile-list li, #g-profile-setting .profile-list-li { width: 100%; height: 40px; display: flex; align-items: center; color: #666; font-weight: bold; padding: 0 0 0 20px; } #g-profile-setting .profile-list li:hover { background-color: rgba(0, 0, 0, 0.1); cursor: pointer; } #g-profile-setting .profile-list .select { background-color: rgba(0, 0, 0, 0.1); color: #5E6FD9; } #g-profile-setting .profile-list li p { width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: normal; } #g-profile-setting .profile-list li p.edit { width: 203px; font-size: 14px; } #g-profile-setting .add-named { width: 215px; height: 30px; margin: 5px; padding: 0 5px; border-radius: 5px; border: 1px solid #D9D9D9; float: left; outline: none; color: #9B9B9B; } #g-profile-setting .add-named:focus { border-color: #5E6FD9; color: #4A4A4A; } #g-profile-setting .fg-add { width: 32px; height: 32px; display: block; float: right; margin: 0 5px 0 0 ; border-radius: 5px; background: #fff; border: 1px solid #D9D9D9; } #g-profile-setting .active { color: #5E6FD9; margin: 0 10px; } #g-profile-setting .inactive { color: #5E6FD9; margin: 0 10px; font-weight: bold; } #g-profile-setting .unscheduled { color: #666; margin: 0 10px; font-weight: bold; } #g-profile-setting .mCSB_scrollTools .mCSB_draggerRail { background-color: #D9D9D9; } #g-profile-setting .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color: #5e6fd9; } #g-profile-setting .content-left { padding: 20px 20px 45px 20px; height: calc(100vh - 150px); width: calc(100vw - 278px); min-width: 720px; box-sizing: border-box; float: right; color: #4a4a4a; overflow: auto; } #g-profile-setting .content-left p { line-height: 23px; } #g-profile-setting .content-left a { color: #5E6FD9; text-decoration: underline; } #g-profile-setting .content-left a:hover { color: #4A59AF; } #g-profile-setting .content-right { width: calc(100% - 360px); max-width: 500px; float: left; } #g-profile-setting .content-right .c-tabs { font-size: 13px; } #g-profile-setting .content-right .c-tabs > .menu { border-bottom: 1px solid #979797; position: relative; } #g-profile-setting .content-right .c-tabs > .menu li { border: 1px solid #979797; border-bottom: none; border-radius: 5px 5px 0 0; margin: 0 1px 0 0; min-width: 20%; text-align: center; } #g-profile-setting .content-right .c-tabs > .menu .menu-down { margin: 0 0 0 1px; padding: 0px; min-width: 34px; height: 34px; text-align: center; font-size: 28px; position: absolute; right: 0px; } #g-profile-setting .content-right .c-tabs > .menu .current { border-style: none; border-width: 0 0 3px 0; height: 34px; cursor: default; color: #fff; background-color: #5E6FD9; } #g-profile-setting .popSchedule { /* width: calc(100% - 300px); */ width: 95vw; font-weight: normal; } #g-profile-setting .popSchedule .popScheduleClose { float: right; color: #4a4a4a; font-size: 24px; font-weight: normal; cursor: pointer; margin-top: -3px; } #g-profile-setting .popSchedule .popScheduleClose:hover { color: #5E6FD9; } #g-profile-setting .popSchedule .analysis_box { border: 1px #d9d9d9 solid; border-radius: 5px; background-color: #F3F3F3; } #g-profile-setting .popSchedule .analysis_box .section-part { padding: 0 20px 10px 20px; } #g-profile-setting .popSchedule .popSchedule_box { padding: 20px 0 0 0; } #g-profile-setting .popSchedule .popSchedule_box li { display: flex; } #g-profile-setting .popSchedule .popSchedule_box li .popSchedule_field { font-size: 14px; font-weight: 600; margin: 0 0 10px 20px; } #g-profile-setting .popSchedule .popSchedule_box li .popSchedule_field span { font-weight: initial; } #g-profile-setting .popSchedule .popSchedule_box .radio_box .g-radio { padding: 5px; margin: 0px; } #g-profile-setting .popSchedule .popSchedule_box .radio_box .g-radio a { color: #5E6FD9; text-decoration: underline; } #g-profile-setting .popSchedule .title { color: #5E6FD9; background-color: #fff; border-radius: 4px 4px 0 0; padding: 12px; border-bottom: 1px #d9d9d9 solid; font-weight: bold; position: relative; } #g-profile-setting .popSchedule .title ul { position: absolute; right: 4px; top: 4px; border: 1px solid #d9d9d9; border-radius: 5px; display: flex; align-items: center; color: #4A4A4A; font-size: 14px; font-weight: normal; } #g-profile-setting .popSchedule .title ul li { padding: 0 20px; border-right: 1px solid #d9d9d9; line-height: 32px; cursor: pointer; } #g-profile-setting .popSchedule .title ul li:first-child { border-radius: 5px 0 0 5px; } #g-profile-setting .popSchedule .title ul li:last-child { border: none; border-radius: 0 5px 5px 0; } #g-profile-setting .popSchedule .title ul li.focus { color: #fff; background-color: #5E6FD9; } #g-profile-setting .profile-content { padding: 20px; width: calc(100% - 260px); height: calc(100vh - 104px); box-sizing: border-box; overflow: auto; } #g-profile-setting .content-down { min-width: 760px; margin-bottom: 20px; } #g-profile-setting .content-down .analysis_box { border: 1px #d9d9d9 solid; border-radius: 5px; background-color: #F3F3F3; } #g-profile-setting .content-down .analysis_box .section-part { padding: 0 20px 10px 20px; } #g-profile-setting .content-down .schedule_box { padding: 20px; display: flex; justify-content: space-between; } #g-profile-setting .content-down .schedule_box > li { width: 100%; } #g-profile-setting .content-down .schedule_box .radio_box .g-radio { padding: 5px; margin: 0px; } #g-profile-setting .content-down .schedule_box .radio_box .g-radio a { color: #5E6FD9; text-decoration: underline; position: relative; top: -4px; } #g-profile-setting .content-down .schedule_box .radio_box .g-radio span { color: gray; text-decoration: underline; position: relative; top: -4px; } #g-profile-setting .content-down .title { color: #5E6FD9; background-color: #fff; border-radius: 4px 4px 0 0; padding: 12px; border-bottom: 1px #d9d9d9 solid; font-weight: bold; position: relative; } #g-profile-setting .content-down .title ul { position: absolute; right: 4px; top: 4px; border: 1px solid #d9d9d9; border-radius: 5px; display: flex; align-items: center; color: #4A4A4A; font-size: 14px; font-weight: normal; } #g-profile-setting .content-down .title ul li { padding: 0 20px; border-right: 1px solid #d9d9d9; line-height: 32px; cursor: pointer; } #g-profile-setting .content-down .title ul li:first-child { border-radius: 5px 0 0 5px; } #g-profile-setting .content-down .title ul li:last-child { border: none; border-radius: 0 5px 5px 0; } #g-profile-setting .content-down .title ul li.focus { color: #fff; background-color: #5E6FD9; } #g-profile-setting .content-down .title-2 { color: #4a4a4a; padding: 20px 12px 12px 12px; border-bottom: 1px #d9d9d9 solid; font-weight: bold; position: relative; } #g-profile-setting .content-down .title-2 ul { position: absolute; right: 4px; top: 12px; border: 1px solid #d9d9d9; border-radius: 5px; display: flex; align-items: center; color: #4A4A4A; font-size: 14px; font-weight: normal; } #g-profile-setting .content-down .title-2 ul li { padding: 0 20px; border-right: 1px solid #d9d9d9; line-height: 28px; cursor: pointer; } #g-profile-setting .content-down .title-2 ul li:first-child { border-radius: 5px 0 0 5px; } #g-profile-setting .content-down .title-2 ul li:last-child { border: none; border-radius: 0 5px 5px 0; } #g-profile-setting .content-down .title-2 ul li.focus { color: #fff; background-color: #5E6FD9; } #g-profile-setting .content-down .analysis-content { display: flex; background-color: #fff; height: 480px; } #g-profile-setting .content-down .analysis-content .analysis-left { width: 360px; height: 480px; min-height: 271px; border-right: 1px #d9d9d9 solid; overflow: auto; } #g-profile-setting .content-down .analysis-content .analysis-left ul { border-bottom: 1px #d9d9d9 solid; font-size: 14px; color: #666666; line-height: 22px; } #g-profile-setting .content-down .analysis-content .analysis-left ul:last-child { border-bottom: none; } #g-profile-setting .content-down .analysis-content .analysis-left ul li { border-bottom: 1px #d9d9d9 solid; margin: 0 0 0 40px; padding: 12px 0 12px 12px; } #g-profile-setting .content-down .analysis-content .analysis-left ul li.focus { background-color: #EFEFEF; } #g-profile-setting .content-down .analysis-content .analysis-left ul li:first-child { margin: 0px; font-weight: bold; } #g-profile-setting .content-down .analysis-content .analysis-left ul li:last-child { border-bottom: none; } #g-profile-setting .content-down .analysis-content .analysis-right { width: calc(100% - 360px); background-color: #f5f5f5; } #g-profile-setting .color-red { color: #CB4A4A; } #g-profile-setting .text-bold { font-weight: bold; } #g-profile-setting .profile-setup { box-sizing: border-box; font-size: 14px; line-height: 22px; color: #4A4A4A; background-color: #fff; display: flex; align-items: flex-start; } #g-profile-setting .profile-setup li { width: 50%; padding: 20px; box-sizing: border-box; } #g-profile-setting .profile-setup .choose-stream { padding-left: 10px; } #g-profile-setting .profile-setup .choose-stream select { min-width: 0; } #g-profile-setting .profile-input { width: 340px; height: 30px; padding: 0 5px; box-sizing: border-box; border-radius: 5px; border: 1px solid #D9D9D9; outline: none; color: #9B9B9B; } #g-profile-setting .profile-select { width: 340px; height: 30px; padding: 0 5px; box-sizing: border-box; border-radius: 5px; border: 1px solid #D9D9D9; background-color: #fff; outline: none; } #g-profile-setting .profile-btn { height: 30px; padding: 0 5px; box-sizing: border-box; border-radius: 5px; border: 1px solid #D9D9D9; background-color: #fff; outline: none; color: #4a4a4a; } #g-profile-setting .profile-btn:hover { background: rgba(0, 0, 0, 0.1); cursor: pointer; } #g-profile-setting .profile-input:focus, #g-profile-setting .profile-select:focus { border-color: #5E6FD9; color: #4A4A4A; } #g-profile-setting .profile-btn:active { background: #5E6FD9; color: #fff; } #g-profile-setting .profile-item { padding: 0 0 0 15px; min-height: 44px; display: flex; align-items: center; } #g-profile-setting .profile-item:hover { background: #d9d9d9; } #g-profile-setting .profile-item.selected { background: #d9d9d9; color: #5e6fd9; } #g-profile-setting .profile-item.main { height: 60px; background: #EEEEEE; font-weight: bolder; } #g-profile-setting .profile-item.sub { font-weight: normal; background: white; border: 0px; } #g-profile-setting .profile-item .name { width: 290px; margin: 0 10px 0 0 ; } #g-profile-setting .profile-item .switch { position: relative; padding: 0 10px 0 0; width: 60px; font-weight: normal; } #g-profile-setting .profile-item .switch.permissionDeny { cursor: not-allowed; } #g-profile-setting .profile-item i { font-size: 28px; display: block; padding: 0 10px; } #g-profile-setting .profile-item i.icon-ic_eye, #g-profile-setting .profile-item i.icon-ic_eye_2 { padding: 0 10px 0 0; } #g-profile-setting .profile-item i:hover { cursor: pointer; color: #5E6FD9; } #g-profile-setting .profile-item i:active { cursor: pointer; color: #4A59AF; } #g-profile-setting .switch .c-toggle-btn > div > label.off { color: #5E6FD9; } #g-profile-setting .switch .c-toggle-btn > input[type=checkbox]:checked + div { background: #5E6FD9; } #g-profile-setting .c-toggle-btn + label { display: flex; } #g-profile-setting .c-toggle-btn.disabled { opacity: .5; } #g-profile-setting .c-toggle-btn.disabled + label { opacity: .5; } #g-profile-setting .c-toggle-btn:hover input[type=checkbox] + div { background: #e5e5e5; } #g-profile-setting .c-toggle-btn:active input[type=checkbox] + div { background: #cccccc; } #g-profile-setting .c-toggle-btn:active input[type=checkbox]:checked + div { background: #33485c; } #g-profile-setting .c-toggle-btn > input[type=checkbox] { cursor: pointer; opacity: 0; position: absolute; height: 100%; width: 100%; z-index: 999; } #g-profile-setting .c-toggle-btn > input[type=checkbox].permissionDeny { cursor: not-allowed; } #g-profile-setting .c-toggle-btn > input[type=checkbox] + div { background: #ffffff; } #g-profile-setting .c-toggle-btn > input[type=checkbox] + div > span { background: #001b34; } #g-profile-setting .c-toggle-btn > input[type=checkbox]:checked + div { left: -20%; background: #001b34; } #g-profile-setting .c-toggle-btn > input[type=checkbox]:checked + div > span { background: #d9d9d9; } #g-profile-setting .c-toggle-btn > input[type=checkbox]:disabled { cursor: not-allowed; } #g-profile-setting .c-toggle-btn > div { display: flex; align-items: center; justify-content: center; left: -80%; position: absolute; text-align: center; top: 0; bottom: 0; transition: left 0.35s ease-out, background 0.35s cubic-bezier(0.23, 1, 0.32, 1); width: 200%; } #g-profile-setting .c-toggle-btn > div > label { cursor: pointer; display: flex; align-items: center; justify-content: center; height: 100%; margin: 0; max-width: 50%; position: absolute; text-align: center; top: 0; white-space: nowrap; width: 50%; line-height: 3em; } #g-profile-setting .c-toggle-btn > div > label.on { color: #ffffff; font-weight: bolder; right: 50%; } #g-profile-setting .c-toggle-btn > div > label.off { color: #001b34; font-weight: bolder; left: 50%; } #g-profile-setting .c-toggle-btn > div > span { border-radius: 50%; cursor: pointer; display: inline-block; height: 45.45%; line-height: normal; position: relative; transition: background 0.35s cubic-bezier(0.23, 1, 0.32, 1); width: 8.62%; } #g-profile-setting .c-toggle-btn > input[type=checkbox]:checked + div > i { color: #fff; font-size: 5px; } #g-profile-setting .c-toggle-btn > input[type=checkbox] + div > i { color: #5E6FD9; font-size: 5px; } #g-profile-setting .roi-view { width: calc(100% - 20px); } #g-profile-setting .profileImg { background-position: center; background-color: #eeeeee; height: 43vh; margin-bottom: 10px; } #g-profile-setting .shedule-box { max-height: 150px; overflow: auto; } #g-profile-setting .shedule-content { font-size: 15px; } #g-profile-setting .shedule-content li { line-height: 26px; } #g-profile-setting .shedule-content li:first-child { text-align: center; width: 40%; } #g-profile-setting .information-box { background-color: #fff; color: #4A4A4A; border-top: 1px solid #D9D9D9; border-radius: 0 0 5px 5px; padding: 0 0 0 20px; } #g-profile-setting .information-box ul { height: 45px; color: #4a4a4a; font-size: 13px; display: flex; align-items: center; } #g-profile-setting .information-box li { width: calc(100% - 280px); } #g-profile-setting .information-btn { min-width: 120px; height: 32px; margin: 0 10px 0 0; border: 1px solid #D9D9D9; background-color: #fff; color: #4A4A4A; text-align: center; outline: none; position: relative; z-index: 5; } #g-profile-setting .information-btn::after { content: " "; position: absolute; width: 100%; height: 32px; border-radius: 5px; top: 0px; left: 0px; z-index: 2; } #g-profile-setting .information-btn:hover:after { content: " "; background-color: rgba(0, 0, 0, 0.1); position: absolute; width: 120px; height: 32px; border-radius: 5px; top: 0px; left: 0px; } #g-profile-setting .submit { background-color: #5E6FD9; color: #fff; } #g-profile-setting .disable { opacity: 0.5; cursor: not-allowed; } #g-profile-setting .information-btn.disable:hover:after { background-color: rgba(0, 0, 0, 0); } #g-profile-setting .purple { width: calc(100vw - 80px); height: calc(100vh - 110px); } #g-profile-setting .c-modal > .dialog { min-width: 960px; min-height: 500px; } #g-profile-setting .c-modal > .dialog > .content { max-height: 100%; max-width: 100%; } #g-profile-setting .c-box > header { color: #5E6FD9; font-size: 14px; line-height: 22px; } #g-profile-setting .c-box > header, #g-profile-setting .c-box > footer, #g-profile-setting .c-box > .content { padding: 16px; overflow-y: visible; } #g-profile-setting .menu-left { float: left; height: calc(100vh - 250px); min-height: 330px; width: 260px; background-color: rgba(0, 0, 0, 0.05); } #g-profile-setting .menu-left li { height: 32px; padding: 0 0 0 10px; font-size: 14px; font-weight: bold; display: flex; align-items: center; } #g-profile-setting .menu-left li.error { border: 1px solid #D9576C; box-shadow: 0 0 4px #D9576C inset; } #g-profile-setting .menu-left li.geo-item { padding-left: 30px; } #g-profile-setting .menu-left li.geo-group { padding-left: 50px; } #g-profile-setting .menu-left li:hover { cursor: pointer; background-color: rgba(0, 0, 0, 0.1); } #g-profile-setting .menu-left li.select { color: #5E6FD9; background-color: rgba(0, 0, 0, 0.1); } #g-profile-setting .menu-left li.layer { padding: 0 5px 0 35px; } #g-profile-setting .menu-left li i { font-size: 22px; padding: 0 5px 0 0; } #g-profile-setting .menu-left li i.error { position: absolute; left: 245px; color: #D9576C; } #g-profile-setting .menu-left p { background-color: #fff; padding: 0 5px 10px 5px; margin: 0px; font-size: 14px; } #g-profile-setting .menu-left p.explain { background-color: rgba(255, 255, 255, 0); padding: 10px; } #g-profile-setting .menu-right { float: right; height: calc(100vh - 300px); min-height: 330px; width: 260px; padding: 10px; box-sizing: border-box; background-color: rgba(0, 0, 0, 0.05); font-size: 14px; color: #4A4A4A; overflow-y: scroll; } #g-profile-setting .menu-right li { padding: 0 0 10px 0; } #g-profile-setting .menu-right li.switch .name { display: flex; } #g-profile-setting .menu-right .c-slider:hover input[type=range]::-webkit-slider-thumb { background: #4A59AF; } #g-profile-setting .menu-right .c-slider:hover input[type=range]::-moz-range-thumb { background: #4A59AF; } #g-profile-setting .menu-right .c-slider:hover input[type=range] + div.progress { background: #4A59AF; } #g-profile-setting .menu-right .c-slider input[type=range] + div.progress:before { background: #5E6FD9; } #g-profile-setting .menu-right .c-slider input[type=range] + div.progress:after { border-top-color: #5E6FD9; } #g-profile-setting .menu-right .c-slider input[type=range]::-webkit-slider-thumb { background: #5E6FD9; } #g-profile-setting .menu-right .c-slider input[type=range]::-moz-range-thumb { background-color: #5E6FD9; } #g-profile-setting .menu-right .c-slider input[type=range] + div.progress { background: #5E6FD9; } #g-profile-setting .c-box button { height: 32px; min-width: 120px; } #g-profile-setting .c-box button.submit { background-color: #5E6FD9; } #g-profile-setting li > div:first-child { font-weight: bold; line-height: 15px; padding: 0 0 2px 0; color: #666; word-break: break-word; } #g-profile-setting li > div:first-child .ic.icon-ic_help { font-size: 24px; } #g-profile-setting li.profile-item-dropdown { width: 100%; padding: 0 0 20px 0; } #g-profile-setting li.profile-item-dropdown.parameter-title { padding: 0 0 5px 0; } #g-profile-setting li.profile-item-dropdown.sub-parameter div:first-child { font-weight: normal; } #g-profile-setting li.profile-item-dropdown.main:after { flex: 2; content: ""; display: inline-block; border-bottom: 1px solid rgba(0, 0, 0, 0.3); } #g-profile-setting .parameter-title { display: flex; align-items: center; margin-right: 8px; } #g-profile-setting .profile-item-wrapper { width: 100%; position: relative; } #g-profile-setting .profile-item-wrapper.arrow:after { right: 0.5em; font-size: 20px; pointer-events: none; content: ''; position: absolute; top: 35%; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid #555; clear: both; } #g-profile-setting .profile-item-wrapper select { margin: 0px; height: 30px; -moz-appearance: none; /* Firefox */ -webkit-appearance: none; /* Safari and Chrome */ appearance: none; width: 100%; } #g-profile-setting .profile-item-wrapper select:focus { border: 1px solid #A9A9A9; } #g-profile-setting .profile-item-wrapper select option { width: inherit; } #g-profile-setting .profile-item-dropdown input { max-width: 240px; width: 100%; height: 32px; border-radius: 5px; font-size: 13px; outline: none; } #g-profile-setting .profile-item-dropdown input.short { width: 210px; margin: 0 10px 0 0; } #g-profile-setting .profile-item-dropdown input.short2 { width: 90px; margin: 0 5px 0 0; } #g-profile-setting .profile-item-dropdown input:focus { border-color: #5E6FD9; } #g-profile-setting .profile-item-dropdown .multi-input i { font-size: 18px; } #g-profile-setting .profile-item-dropdown .input-area { display: flex; justify-content: space-between; align-items: center; } #g-profile-setting .profile-item-dropdown .input-area .short { flex: 1; } #g-profile-setting .profile-item-dropdown .input-area .temperature-converter-toggle { height: 32px; } #g-profile-setting .profile-item-dropdown i { font-size: 28px; left: -33px; } #g-profile-setting .c-combobox > input + .unit { line-height: 32px; left: 0px; } #g-profile-setting .c-combobox > input + .bar { cursor: pointer; width: 150px; border: none; position: relative; left: 0px; margin-left: 0; margin-right: -25px; } #g-profile-setting .content-middle { width: calc(100% - 520px); float: left; } #g-profile-setting .content-middle-2 { width: calc(100% - 260px); float: left; } #g-profile-setting .content-middle-2 .ROI-bord { width: 100%; float: left; clear: both; margin: 9px 0 0 0; border: 1px solid #979797; height: calc(100vh - 306px); } #g-profile-setting .switch-box li, #g-profile-setting .ROI-tool-box li { width: 40px; height: 40px; font-size: 22px; color: #4A4A4A; border: 1px solid #979797; border-right: none; display: flex; align-items: center; justify-content: space-around; cursor: pointer; } #g-profile-setting .ROI-tool-box li.notAllowRoiTool { cursor: not-allowed; } #g-profile-setting .ROI-tool-box li.drawing { pointer-events: none; opacity: 0.6; } #g-profile-setting .switch-box li:hover, #g-profile-setting .ROI-tool-box li:hover { background: rgba(0, 0, 0, 0.1); color: #4A4A4A; } #g-profile-setting .switch-box li:active, #g-profile-setting .ROI-tool-box li:active { background: #5E6FD9; color: #ffffff; } #g-profile-setting .switch-box li { float: left; } #g-profile-setting .ROI-tool-box li { float: right; } #g-profile-setting .ROI-tool-box li:first-child { border-right: 1px solid #979797; } #g-profile-setting .switch-box li:last-child { border-right: 1px solid #979797; } #g-profile-setting .ROI-bord { width: 100%; float: left; clear: both; margin: 16px 0 0 0; border: 1px solid #979797; height: calc(100vh - 306px); } #g-profile-setting .c-modal > .dialog.basic { width: 400px; min-width: 400px; height: auto; min-height: 200px; font-size: 13px; } #g-profile-setting .c-modal > .dialog .select-item { padding: 0 0 10px 0; } #g-profile-setting .c-modal > .dialog footer { border-top: 1px solid #999999; } #g-profile-setting .basic .pure-form input { width: 365px; font-size: 13px; border-radius: 5px; outline: none; } #g-profile-setting .c-modal > .dialog.basic button { cursor: pointer; } #g-profile-setting .c-modal > .dialog.basic .pure-form { min-width: auto; } #g-profile-setting .expand_list_title_node { min-height: 40px; display: flex; } #g-profile-setting .expand_list_title_node { position: relative; } #g-profile-setting .expand_list_title_node .text { visibility: hidden; /* display: none; */ position: absolute; z-index: 1; /* width: 120px; */ background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px; padding-left: 24px; } #g-profile-setting .expand_list_title_node:hover .text { visibility: visible; } #g-profile-setting .expand_list_title_node .ic { font-size: 22px; } #g-profile-setting .expand_list_title_node .tree_title { font-size: 14px; font-weight: bold; align-items: center; height: inherit; display: flex; padding: 0 0 0 10px; } #g-profile-setting .expand_list_title_node .tree_title span { width: 195px; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; padding: 0 0 0 5px; } #g-profile-setting .tree_root:before { content: ""; display: block; width: 0; position: absolute; top: 0; bottom: 0; left: 0; border-left: 1px solid; margin: 0 0 0 15px; } #g-profile-setting ul.tree_root { position: relative; } #g-profile-setting .tree_root li { position: relative; } #g-profile-setting .tree_root li:before { content: ""; display: block; width: 10px; /* same with indentation */ height: 0; border-top: 1px solid; margin-top: 6px; /* border top width */ position: absolute; top: 1em; /* (line-height/2) */ left: 15px; } #g-profile-setting .tree_root li:last-child:before { background: #F2F2F2; /* same with body background */ height: auto; top: 1em; /* (line-height/2) */ bottom: 0; } #g-profile-setting .tree_root li.select:last-child:before { background: #d9d9d9; /* same with body background */ height: auto; top: 1em; /* (line-height/2) */ bottom: 0; } #g-profile-setting .profile-list li:hover:last-child:before { background: #D9D9D9; } #g-profile-setting .profile-list-li.add-bar { padding: 0; } #g-profile-setting .c-combobox > input + * { display: flex; display: inline-flex; align-items: center; justify-content: center; border-radius: 5px; cursor: pointer; border: none; position: relative; left: -25px; /* margin-left: 0; */ /* margin-right: -25px; */ width: 25px; } #g-profile-setting .c-slider.progress { position: relative; display: inline-block; } #g-profile-setting .c-slider:hover { cursor: pointer; } #g-profile-setting .c-slider:hover input[type=range]::-webkit-slider-thumb { background: #1a3248; } #g-profile-setting .c-slider:hover input[type=range]::-moz-range-thumb { background: #1a3248; } #g-profile-setting .c-slider:hover input[type=range] + div.progress { background: #1a3248; } #g-profile-setting .c-slider:hover input[type=range]:disabled + div.progress:before, #g-profile-setting .c-slider:hover input[type=range]:disabled + div.progress:after { opacity: 0; } #g-profile-setting .c-slider:hover input[type=range] + div.progress:before, #g-profile-setting .c-slider:hover input[type=range] + div.progress:after { opacity: 1; } #g-profile-setting .c-slider:active { cursor: pointer; } #g-profile-setting .c-slider:active input[type=range]::-webkit-slider-thumb { background: #33485c; } #g-profile-setting .c-slider:active input[type=range]::-moz-range-thumb { background: #33485c; } #g-profile-setting .c-slider:active input[type=range] + div.progress { background: #33485c; } #g-profile-setting .c-slider > .c-flex.aic { position: relative; } #g-profile-setting .c-slider input[type=range] { /*The thumb height also determines the slider's height*/ -webkit-appearance: none; -moz-appearance: none; background: none; height: 12px; margin: 0 7px; outline: none; position: relative; width: inherit; } #g-profile-setting .c-slider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; background: #001b34; border: none; border-radius: 50%; height: 12px; position: relative; top: -4px; transition: box-shadow 0.35s cubic-bezier(0.23, 1, 0.32, 1) 0s; width: 12px; } #g-profile-setting .c-slider input[type=range]::-moz-range-thumb { box-sizing: border-box; -moz-appearance: none; background: #001b34; border: none; border-radius: 50%; height: 12px; position: relative; top: -4px; transition: box-shadow 0.35s cubic-bezier(0.23, 1, 0.32, 1) 0s; width: 12px; } #g-profile-setting .c-slider input[type=range]::-webkit-slider-runnable-track { background: #e5e5e5; border: none; border-radius: 2px; box-sizing: border-box; cursor: pointer; height: 4px; transition: background .12s; width: 100%; } #g-profile-setting .c-slider input[type=range]::-moz-range-track { background: #e5e5e5; border: none; border-radius: 2px; box-sizing: border-box; cursor: pointer; height: 4px; transition: background .12s; width: 100%; } #g-profile-setting .c-slider input[type=range] + div.progress { background: #001b34; border-radius: 2px; height: 4px; left: 0; margin-left: 7px; position: absolute; pointer-events: none; top: 4px; } #g-profile-setting .c-slider input[type=range] + div.progress:before { content: attr(data-tooltip); background: #1a3248; color: #ffffff; padding-bottom: .1em; position: absolute; top: -900%; margin-left: calc(87%); width: 2em; text-align: center; border-radius: 3px; box-shadow: 0px 4px 6px 2px rgba(155, 155, 155, 0.5); } #g-profile-setting .c-slider input[type=range] + div.progress:after { content: ""; position: absolute; width: 0; height: 0; top: -400%; left: 90%; border-width: 8px; border-style: solid; border-color: #1a3248 transparent transparent transparent; } #g-profile-setting .c-slider input[type=range] + div.progress:before, #g-profile-setting .c-slider input[type=range] + div.progress:after { opacity: 0; } #g-profile-setting .c-slider input[type=range]:disabled + div.progress { background: #8C97A1; } #g-profile-setting .c-slider input[type=range]:disabled::-webkit-slider-thumb { background: #8C97A1; } #g-profile-setting .custom-scroll::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); border-radius: 10px; background-color: #F5F5F5; } #g-profile-setting .custom-scroll::-webkit-scrollbar { width: 8px; background-color: #F5F5F5; } #g-profile-setting .custom-scroll::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #5E6FD9; } #g-profile-setting .profile-item-dropdown.multiSelect div.title { padding: 8px 0px; } #g-profile-setting .profile-item-dropdown.multiSelect .g-checkbox { padding: 0 5px; margin: 0; width: 100%; height: 32px; display: flex; overflow: auto; } #g-profile-setting .profile-item-dropdown.multiSelect .g-checkbox input { width: 10px; } #g-profile-setting .conditionAdvancedBlock { float: right; width: 260px; text-align: center; font-weight: bold; cursor: pointer; height: 50px; background-color: #f2f2f2; text-decoration-line: underline; display: flex; justify-content: center; align-items: center; color: #5E6FD9; } #g-profile-setting #undefined-content { color: #4A4A4A; font-size: 14px; } #g-profile-setting #undefined-content > div { padding: 0px; } #g-profile-setting #undefined-content > div select { margin: 0 0 10px 0; } #g-profile-setting #undefined-content .title { font-weight: bold; } #g-profile-setting #undefined-content select { height: 30px; width: 100%; margin: 0px; } #g-profile-setting #g-popup-container .c-modal > .overlay { opacity: .5; } #g-profile-setting #g-popup-container .c-modal > .dialog { touch-action: none; transform: translate(0px, 0px); padding: 0px; } #g-profile-setting #g-popup-container .c-modal > .dialog > header { border-color: #d9d9d9; } #g-profile-setting #g-popup-container .c-modal > .dialog > header i.ic.icon-ic_close { font-size: 24px; color: #4a4a4a; } #g-profile-setting #g-popup-container .c-modal > .dialog > header i.ic.icon-ic_close:hover { color: #5E6FD9; } #g-profile-setting #g-popup-container .c-modal > .dialog > footer { border-color: #d9d9d9; padding: 12px 16px; } #g-profile-setting #g-popup-container .c-modal > .dialog > .content { display: block; margin: 0px; } #g-profile-setting #g-popup-container .c-modal > .dialog > .content .fas.fa-cog { font-size: 16px; } #g-profile-setting #g-popup-container .handle { padding: 0 16px; height: 48px; display: flex; align-items: center; } #g-profile-setting #g-popup-container i.disabled { visibility: hidden; } #g-profile-setting #g-popup-container .select { color: #5E6FD9; background-color: rgba(0, 0, 0, 0.1); } #g-profile-setting #g-popup-container .disable { opacity: 0.7; cursor: not-allowed; } #g-setting-feedback { width: 100%; height: 100%; background: #f0f0f0; position: relative; } #g-setting-feedback .container { margin: 13px 10px 0; background: #fff; border: 1px solid #bbb; border-radius: 5px; padding: 5px; height: calc(100% - 18px); } #g-setting-feedback .container .head { margin-bottom: 5px; height: 35px; display: flex; align-items: center; justify-content: space-between; } #g-setting-feedback .container .head .title { vertical-align: middle; display: inline-block; } #g-setting-feedback .container .head .edit { color: white; background-color: #5686da; padding: 5px 10px; border-radius: 5px; cursor: pointer; } #g-setting-feedback .container .head .edit:hover { background-color: #1565c0; } #g-setting-feedback .container .head .edit i { margin-right: 5px; } #g-setting-feedback .container .description { border: 1px solid #bbb; border-radius: 5px; padding: 5px; height: calc(100% - 40px); } #g-setting-feedback .MuiTablePagination-root { border: 1px solid #d9d9d9; margin-top: -2px; border-top: 0; } #g-setting-feedback .footer { width: 100%; margin-top: 5px; height: 40px; } #g-setting-feedback .footer .button { float: right; width: 140px; height: 40px; padding: 5px 12px 5px 10px; border-radius: 8px; box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.15); color: #fff; background-color: #5686da; } #g-setting-feedback .footer .button.delete { background-color: #ce4b4d; } #g-setting-feedback .footer .button.delete:hover { background-color: #ca2124; } #g-setting-feedback .footer .button:hover { text-decoration: none; background-color: #1565c0; box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); } #g-setting-feedback .footer button[disabled].delete:hover { background-color: #ce4b4d; box-shadow: unset; cursor: not-allowed; } #g-setting-feedback button[disabled], #g-setting-feedback .pure-button[disabled] { border: unset; } #g-setting-feedback #g-feedback-edit textarea { width: 300px; height: 300px; } #g-setting-feedback #g-feedback-edit .content .description label { display: none; } #g-mape { width: 100%; height: calc(100vh - 80px); background: #f0f0f0; position: relative; overflow: auto; } #g-mape::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 15px; background-color: #ccc; } #g-mape::-webkit-scrollbar { border-radius: 17px; width: 7px; height: 6px; background-color: #ccc; } #g-mape::-webkit-scrollbar-thumb { border-radius: 13px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #313a3e; } #g-mape .head-dateRange { width: fit-content; margin: 5px auto 0px; display: flex; } #g-mape .head-dateRange .head-item { display: flex; flex-direction: row; } #g-mape .head-dateRange .dropdown-label { white-space: nowrap; padding-right: 5px; } #g-mape .head-dateRange .date-range-label { padding-right: 5px; } #g-mape .head-dateRange .c-date-range { padding-top: 3px; } #g-mape .head-dateRange .date-dropdown-list { width: 100px; margin-right: 5px; } #g-mape .head-dateRange .prediction-dropdown-list { width: 170px; margin-right: 5px; } #g-mape .head-dateRange .flatpickr-input { background: #fff; height: 33px; width: 95px; } #g-mape .head-dateRange .button { background-color: #5686da; width: 83px; height: 33px; padding: 0 5px; margin: 0 3px; } #g-mape .head-dateRange .button:hover { background-color: #1565c0; } #g-mape .mape-card-block { margin: 5px 5px; background: #fff; border: 1px solid #bbb; border-radius: 5px; padding: 5px; } #g-mape .head { margin-bottom: 5px; display: flex; } #g-mape .head .title { line-height: 30px; margin-right: 70px; width: 300px; } #g-mape .head .selector { display: inline-block; margin-right: 20px; } #g-mape .head .selector .label { margin: unset; vertical-align: unset; line-height: 35px; } #g-mape .head .selector .jss1 .MuiInputBase-root > select { height: 30px; } #g-mape .head .selector .inputSelect { display: inline-block; margin: unset; vertical-align: unset; line-height: 30px; } #g-mape .content { display: flex; } #g-mape .content .mape-table { height: 460px; border: 1px solid #d9d9d9; border-radius: 5px; } #g-mape .content .mape-table th, #g-mape .content .mape-table td { border: 1px solid #d9d9d9; } #g-mape .content .mape-table th { width: 150px; height: 30px; } #g-mape .content .mape-table td { text-align: center; height: 35px; } #g-mape .content .mape-table td.high { color: #ff3c3c; } #g-mape .content .chart { width: 100%; } #g-mape section { padding-top: 42px; } #g-mape section .container { width: 350px; height: 462px; } #g-mape section .container::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 15px; background-color: #ccc; } #g-mape section .container::-webkit-scrollbar { border-radius: 17px; width: 7px; height: 6px; background-color: #ccc; } #g-mape section .container::-webkit-scrollbar-thumb { border-radius: 13px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #313a3e; } #g-mape section .c-table .text { width: 70%; } #g-mape section .c-table .mape { width: 30%; } #g-mape section .c-table .mape .high { color: #ff3c3c; } #g-mape section .c-table .avgVehicleVolumes { width: 30%; } #g-mape section .c-table .avgVehicleVolumes { text-align: center; } #g-mape section .c-table > tbody > tr { height: 35px; } #g-mape section .c-table > tbody > tr span { white-space: unset; } #g-mape #g-mape-gate .content .itt-mape { height: 534px; } #g-mape #g-mape-gate .content .itt-mape .itt-mape-total { padding-left: 100px; width: 350px; height: 30px; display: flex; cursor: default; } #g-mape #g-mape-gate .content .itt-mape .itt-mape-total .mape { display: flex; } #g-mape #g-mape-gate .content .itt-mape .itt-mape-total .mape .high { color: #ff3c3c; } #g-mape #g-mape-gate .content .itt-mape .itt-mape-total svg { cursor: pointer; } #g-mape #g-mape-gate .content .itt-mape .itt-mape-total span:first-child { line-height: 30px; width: 150px; } #g-mape #g-mape-gate .content .itt-mape .itt-mape-total span:last-child { display: flex; justify-content: center; align-items: center; } #g-mape #g-mape-gate .content .itt-mape .c-border { height: unset; } #g-mape #g-mape-gate .content .itt-mape .c-border section .container { width: 350px; height: 432px; } #g-service { width: 100%; height: 100%; background: #f0f0f0; position: relative; } #g-service .service-headBar { height: 45px; padding-right: 10px; position: absolute; top: 0; right: 0; z-index: 10; } #g-service .service-headBar .icon { line-height: 45px; font-size: 20px; margin: 0 5px; width: 25px; } #g-service .service-headBar .icon:hover { color: #1b76c4; } #g-service .service-headBar span { height: 45px; } #g-service #g-service-tabs { margin: 13px 10px 0; height: calc(100% - 20px); } #g-service #g-service-tabs #interface, #g-service #g-service-tabs #dataHandle, #g-service #g-service-tabs #dataSupply { display: block; } #g-service #g-service-tabs.c-tabs > .tabContent { border: 1px solid #bbb; flex-grow: 1; display: flex; position: relative; padding: 5px 4px; overflow-y: auto; background-color: white; border-radius: 0 5px 5px 5px; margin-top: unset; } #g-service #g-service-tabs.c-tabs > .tabContent .c-border { height: unset; overflow: auto; } #g-service #g-service-tabs.c-tabs > .tabContent .c-border::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 15px; background-color: #ccc; } #g-service #g-service-tabs.c-tabs > .tabContent .c-border::-webkit-scrollbar { border-radius: 17px; width: 7px; height: 6px; background-color: #ccc; } #g-service #g-service-tabs.c-tabs > .tabContent .c-border::-webkit-scrollbar-thumb { border-radius: 13px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #313a3e; } #g-service #g-service-tabs.c-tabs > .menu { display: flex; flex-grow: 0; flex-shrink: 0; flex-wrap: wrap; margin-bottom: -1px; border-bottom: unset; } #g-service #g-service-tabs.c-tabs > .menu li { background-color: #5686da; color: #fff; margin-right: 5px; } #g-service #g-service-tabs.c-tabs > .menu li.current { background-color: #fff; cursor: default; color: #313a3e; border: 1px solid #bbb; border-bottom: 0; z-index: 2; } #g-service #g-service-tabs #dataHandle section .container { min-width: 1060px; } #g-service #g-service-tabs #dataProvide section .container { min-width: 540px; } #g-service #g-service-tabs section .container { min-width: 1250px; height: calc(100vh - 240px); } #g-service #g-service-tabs section .container::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 15px; background-color: #ccc; } #g-service #g-service-tabs section .container::-webkit-scrollbar { border-radius: 17px; width: 7px; height: 6px; background-color: #ccc; } #g-service #g-service-tabs section .container::-webkit-scrollbar-thumb { border-radius: 13px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #313a3e; } #g-service #g-service-tabs section .c-table .sequence { width: 60px; } #g-service #g-service-tabs section .c-table .name, #g-service #g-service-tabs section .c-table .sourceType, #g-service #g-service-tabs section .c-table .interfacingAt, #g-service #g-service-tabs section .c-table .sourceStatus, #g-service #g-service-tabs section .c-table .enabled { width: calc(100% * 0.1); } #g-service #g-service-tabs section .c-table .interfaceRecord { width: 90px; text-align: center; } #g-service #g-service-tabs section .c-table .more { width: 60px; text-align: center; } #g-service #g-service-tabs section .c-table .description { min-width: 100px; max-width: 400px; word-wrap: break-word; } #g-service #g-service-tabs section .c-table .target { width: 170px; } #g-service #g-service-tabs section .c-table .targetDescription { min-width: 120px; } #g-service #g-service-tabs section .c-table .source { min-width: 90px; } #g-service #g-service-tabs section .c-table .progress, #g-service #g-service-tabs section .c-table .lastTime { min-width: 160px; } #g-service #g-service-tabs section .c-table .lastResult { min-width: 120px; } #g-service #g-service-tabs section .c-table .dataRecord { width: 100px; text-align: center; } #g-service #g-service-tabs section .c-table .icon-block { font-size: 18px; } #g-service #g-service-tabs section .c-table .icon-block a { margin-right: 12px; } #g-service #g-service-tabs section .c-table .icon-block a.delete:hover { color: #CA2124; } #g-service #g-service-tabs section .c-table .icon-block a:hover { color: #1b76c4; } #g-service #g-service-tabs section .c-table > tbody > tr { height: 35px; } #g-service #g-service-tabs section .c-table > tbody > tr .pre { white-space: normal; } #g-service .MuiTablePagination-root { border: 1px solid #d9d9d9; margin-top: -2px; border-top: 0; } #g-service button[disabled], #g-service .pure-button[disabled] { border: unset; } #g-service #g-interface-edit-dialog .system input, #g-service #g-interface-edit-dialog .description textarea, #g-service #g-interface-edit-dialog .uri input, #g-service #g-interface-edit-dialog .cronExpression input, #g-service #g-interface-edit-dialog .retryInterval input, #g-service #g-interface-edit-dialog .retryTimes input { width: 350px; } #g-service #g-interface-edit-dialog .pure-form-aligned .pure-control-group .c-date-picker .MuiOutlinedInput-adornedEnd { padding-right: unset; } #g-service #g-interface-edit-dialog .pure-form-aligned .pure-control-group .c-date-picker .MuiInputBase-input { width: 350px; height: 32px; } #g-service #g-interface-record-search-dialog section .container { min-width: 615px; } #g-service #g-data-processor-record-search-dialog section .container { min-width: 1200px; } #g-service #g-interface-record-search-dialog .content, #g-service #g-data-processor-record-search-dialog .content { display: block; } #g-service #g-interface-record-search-dialog .content .date-select, #g-service #g-data-processor-record-search-dialog .content .date-select { display: flex; justify-content: center; margin: 0 0 10px; } #g-service #g-interface-record-search-dialog .content .date-select .flatpickr-input, #g-service #g-data-processor-record-search-dialog .content .date-select .flatpickr-input { background: #fff; height: 33px; width: 135px; } #g-service #g-interface-record-search-dialog .content .date-select .button, #g-service #g-data-processor-record-search-dialog .content .date-select .button { background-color: #5686da; width: 83px; height: 33px; padding: 0 5px; } #g-service #g-interface-record-search-dialog .content .date-select .button:hover, #g-service #g-data-processor-record-search-dialog .content .date-select .button:hover { background-color: #1565c0; } #g-service #g-interface-record-search-dialog .content .date-select .date-range-label, #g-service #g-data-processor-record-search-dialog .content .date-select .date-range-label { margin-right: 5px; } #g-service #g-interface-record-search-dialog .content .c-border, #g-service #g-data-processor-record-search-dialog .content .c-border { height: unset; overflow: auto; } #g-service #g-interface-record-search-dialog .content .c-border::-webkit-scrollbar-track, #g-service #g-data-processor-record-search-dialog .content .c-border::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 15px; background-color: #ccc; } #g-service #g-interface-record-search-dialog .content .c-border::-webkit-scrollbar, #g-service #g-data-processor-record-search-dialog .content .c-border::-webkit-scrollbar { border-radius: 17px; width: 7px; height: 6px; background-color: #ccc; } #g-service #g-interface-record-search-dialog .content .c-border::-webkit-scrollbar-thumb, #g-service #g-data-processor-record-search-dialog .content .c-border::-webkit-scrollbar-thumb { border-radius: 13px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #313a3e; } #g-service #g-interface-record-search-dialog section .container, #g-service #g-data-processor-record-search-dialog section .container { height: calc(100vh - 400px); } #g-service #g-interface-record-search-dialog section .container::-webkit-scrollbar-track, #g-service #g-data-processor-record-search-dialog section .container::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 15px; background-color: #ccc; } #g-service #g-interface-record-search-dialog section .container::-webkit-scrollbar, #g-service #g-data-processor-record-search-dialog section .container::-webkit-scrollbar { border-radius: 17px; width: 7px; height: 6px; background-color: #ccc; } #g-service #g-interface-record-search-dialog section .container::-webkit-scrollbar-thumb, #g-service #g-data-processor-record-search-dialog section .container::-webkit-scrollbar-thumb { border-radius: 13px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #313a3e; } #g-service #g-interface-record-search-dialog section .c-table .sequence, #g-service #g-data-processor-record-search-dialog section .c-table .sequence { width: 45px; } #g-service #g-interface-record-search-dialog section .c-table .id, #g-service #g-data-processor-record-search-dialog section .c-table .id { width: 200px; } #g-service #g-interface-record-search-dialog section .c-table .createdAt, #g-service #g-data-processor-record-search-dialog section .c-table .createdAt { width: 150px; } #g-service #g-interface-record-search-dialog section .c-table .statusCode, #g-service #g-data-processor-record-search-dialog section .c-table .statusCode { width: 120px; } #g-service #g-interface-record-search-dialog section .c-table .rawType, #g-service #g-data-processor-record-search-dialog section .c-table .rawType { width: 120px; } #g-service #g-interface-record-search-dialog section .c-table .target, #g-service #g-data-processor-record-search-dialog section .c-table .target { width: 150px; } #g-service #g-interface-record-search-dialog section .c-table .dataId, #g-service #g-data-processor-record-search-dialog section .c-table .dataId { width: 205px; } #g-service #g-interface-record-search-dialog section .c-table .source, #g-service #g-data-processor-record-search-dialog section .c-table .source { width: 100px; } #g-service #g-interface-record-search-dialog section .c-table .result, #g-service #g-data-processor-record-search-dialog section .c-table .result { width: 125px; } #g-service #g-interface-record-search-dialog section .c-table .modifiedAt, #g-service #g-data-processor-record-search-dialog section .c-table .modifiedAt, #g-service #g-interface-record-search-dialog section .c-table .dataTime, #g-service #g-data-processor-record-search-dialog section .c-table .dataTime { width: 150px; } #g-service #g-interface-record-search-dialog section .c-table .totalSrcQty, #g-service #g-data-processor-record-search-dialog section .c-table .totalSrcQty, #g-service #g-interface-record-search-dialog section .c-table .filteredSrcQty, #g-service #g-data-processor-record-search-dialog section .c-table .filteredSrcQty, #g-service #g-interface-record-search-dialog section .c-table .validSrcQty, #g-service #g-data-processor-record-search-dialog section .c-table .validSrcQty { min-width: 140px; text-align: center; } #g-service #g-interface-record-search-dialog section .c-table > tbody > tr, #g-service #g-data-processor-record-search-dialog section .c-table > tbody > tr { height: 35px; } #g-service #g-interface-record-search-dialog section .c-table > tbody > tr .pre, #g-service #g-data-processor-record-search-dialog section .c-table > tbody > tr .pre { white-space: normal; } #g-service #g-data-provide-record-search-dialog .content { display: block; } #g-service #g-data-provide-record-search-dialog .content .date-select { display: flex; justify-content: center; margin: 0 0 10px; } #g-service #g-data-provide-record-search-dialog .content .date-select .flatpickr-input { background: #fff; height: 33px; width: 135px; } #g-service #g-data-provide-record-search-dialog .content .date-select .button { background-color: #5686da; width: 83px; height: 33px; padding: 0 5px; } #g-service #g-data-provide-record-search-dialog .content .date-select .button:hover { background-color: #1565c0; } #g-service #g-data-provide-record-search-dialog .content .date-select .date-range-label { margin-right: 5px; } #g-service #g-data-provide-record-search-dialog .content .c-border { height: unset; overflow: auto; } #g-service #g-data-provide-record-search-dialog .content .c-border::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 15px; background-color: #ccc; } #g-service #g-data-provide-record-search-dialog .content .c-border::-webkit-scrollbar { border-radius: 17px; width: 7px; height: 6px; background-color: #ccc; } #g-service #g-data-provide-record-search-dialog .content .c-border::-webkit-scrollbar-thumb { border-radius: 13px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #313a3e; } #g-service #g-data-provide-record-search-dialog section .container { min-width: 1025px; height: calc(100vh - 400px); } #g-service #g-data-provide-record-search-dialog section .container::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 15px; background-color: #ccc; } #g-service #g-data-provide-record-search-dialog section .container::-webkit-scrollbar { border-radius: 17px; width: 7px; height: 6px; background-color: #ccc; } #g-service #g-data-provide-record-search-dialog section .container::-webkit-scrollbar-thumb { border-radius: 13px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #313a3e; } #g-service #g-data-provide-record-search-dialog section .c-table .sequence { width: 45px; } #g-service #g-data-provide-record-search-dialog section .c-table .moduleName, #g-service #g-data-provide-record-search-dialog section .c-table .displayName { width: 90px; } #g-service #g-data-provide-record-search-dialog section .c-table .actionName { width: 60px; } #g-service #g-data-provide-record-search-dialog section .c-table .target { width: 200px; } #g-service #g-data-provide-record-search-dialog section .c-table .userName { width: 130px; } #g-service #g-data-provide-record-search-dialog section .c-table .ip { width: 100px; } #g-service #g-data-provide-record-search-dialog section .c-table .dateTime { width: 150px; } #g-service #g-data-provide-record-search-dialog section .c-table .actionResult { width: 80px; } #g-service #g-data-provide-record-search-dialog section .c-table .severity { width: 70px; } #g-service #g-data-provide-record-search-dialog section .c-table > tbody > tr { height: 35px; } #g-service #g-data-provide-record-search-dialog section .c-table > tbody > tr .pre { white-space: normal; } #g-service #service::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 15px; background-color: #ccc; } #g-service #service::-webkit-scrollbar { border-radius: 17px; width: 7px; height: 6px; background-color: #ccc; } #g-service #service::-webkit-scrollbar-thumb { border-radius: 13px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #313a3e; } #g-service .service-monitor .card { float: left; width: 239px; height: 130px; border-radius: 5px; margin: 10px; border: 1px solid #888; cursor: pointer; } #g-service .service-monitor .card .title { text-align: center; font-weight: bold; padding: 5px; background: #737271; color: #fff; font-size: 16px; } #g-service .service-monitor .card .content { padding: 25px; } #g-service .service-monitor .card .content .status, #g-service .service-monitor .card .content .updateAt { line-height: 20px; } #g-service .service-monitor .card .content i { margin-right: 5px; } #g-service .service-monitor .card .content .status.HEALTHY { color: #55c836; } #g-service .service-monitor .card .content .status.DEGRADED { color: #ffbc3c; } #g-service .service-monitor .card .content .status.UNHEALTHY { color: #ff3c3c; } #g-service .service-monitor .card .loading { text-align: center; line-height: 123px; } #g-service #g-service-monitor-dialog-content { display: unset; max-width: 887px; min-width: 320px; } #g-service #g-service-monitor-dialog-content::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 15px; background-color: #ccc; } #g-service #g-service-monitor-dialog-content::-webkit-scrollbar { border-radius: 17px; width: 7px; height: 6px; background-color: #ccc; } #g-service #g-service-monitor-dialog-content::-webkit-scrollbar-thumb { border-radius: 13px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #313a3e; } #g-service #g-service-monitor-dialog-content .block { width: 270px; border-radius: 5px; padding: 10px 25px; margin: 5px 5px; } #g-service #g-service-monitor-dialog-content .block .title { font-size: 16px; } #g-service #g-service-monitor-dialog-content .block .content { cursor: default; } #g-service #g-service-monitor-dialog-content .block .content i { margin-right: 5px; } #g-service #g-service-monitor-dialog-content .block .content .status.HEALTHY { color: #55c836; } #g-service #g-service-monitor-dialog-content .block .content .status.DEGRADED { color: #ffbc3c; } #g-service #g-service-monitor-dialog-content .block .content .status.UNHEALTHY { color: #ff3c3c; } #g-service #g-service-monitor-dialog-content .block .content .item { margin: 5px 0; } #g-setting-terminalBoard { width: 100%; height: 100%; background: #f0f0f0; position: relative; } #g-setting-terminalBoard .terminalBoard-table { margin: 13px 10px 0; background: #fff; border: 1px solid #bbb; border-radius: 5px; padding: 5px; } #g-setting-terminalBoard .terminalBoard-table .table-head { margin-bottom: 5px; display: flex; justify-content: space-between; } #g-setting-terminalBoard .terminalBoard-table .table-head .left .title { line-height: 30px; width: 300px; vertical-align: middle; display: inline-block; } #g-setting-terminalBoard .terminalBoard-table .table-head .left .selector { display: inline-block; } #g-setting-terminalBoard .terminalBoard-table .table-head .left .selector label { line-height: 35px; } #g-setting-terminalBoard .terminalBoard-table .table-head .create-terminalBoard-btn { font-size: 20px; margin: 0 5px; } #g-setting-terminalBoard .terminalBoard-table .table-head .create-terminalBoard-btn:hover { color: #1b76c4; } #g-setting-terminalBoard .terminalBoard-table section .container { height: calc(100vh - 285px); } #g-setting-terminalBoard .terminalBoard-table section .container::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 15px; background-color: #ccc; } #g-setting-terminalBoard .terminalBoard-table section .container::-webkit-scrollbar { border-radius: 17px; width: 7px; height: 6px; background-color: #ccc; } #g-setting-terminalBoard .terminalBoard-table section .container::-webkit-scrollbar-thumb { border-radius: 13px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #313a3e; } #g-setting-terminalBoard .terminalBoard-table section .c-table .selector { text-align: left; padding-left: 5px; width: 20px; } #g-setting-terminalBoard .terminalBoard-table section .c-table .sequence { width: 45px; } #g-setting-terminalBoard .terminalBoard-table section .c-table .terminalId { min-width: 100px; } #g-setting-terminalBoard .terminalBoard-table section .c-table .title, #g-setting-terminalBoard .terminalBoard-table section .c-table .description { min-width: 100px; max-width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #g-setting-terminalBoard .terminalBoard-table section .c-table .createdAt, #g-setting-terminalBoard .terminalBoard-table section .c-table .beginTime, #g-setting-terminalBoard .terminalBoard-table section .c-table .endTime { width: 160px; } #g-setting-terminalBoard .terminalBoard-table section .c-table .more .icon-block { font-size: 18px; } #g-setting-terminalBoard .terminalBoard-table section .c-table .more .icon-block a { margin-right: 12px; } #g-setting-terminalBoard .terminalBoard-table section .c-table .more .icon-block a.delete:hover { color: #CA2124; } #g-setting-terminalBoard .terminalBoard-table section .c-table .more .icon-block a:hover { color: #1b76c4; } #g-setting-terminalBoard .terminalBoard-table section .c-table > tbody > tr { height: 35px; } #g-setting-terminalBoard .MuiTablePagination-root { border: 1px solid #d9d9d9; margin-top: -2px; border-top: 0; } #g-setting-terminalBoard .footer { width: 100%; margin-top: 5px; height: 40px; } #g-setting-terminalBoard .footer .button { float: right; width: 140px; height: 40px; padding: 5px 12px 5px 10px; border-radius: 8px; box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.15); color: #fff; background-color: #5686da; } #g-setting-terminalBoard .footer .button.delete { background-color: #ce4b4d; } #g-setting-terminalBoard .footer .button.delete:hover { background-color: #ca2124; } #g-setting-terminalBoard .footer .button:hover { text-decoration: none; background-color: #1565c0; box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); } #g-setting-terminalBoard .footer button[disabled].delete:hover { background-color: #ce4b4d; box-shadow: unset; cursor: not-allowed; } #g-setting-terminalBoard .page-nav { justify-content: center; margin-top: 7px; } #g-setting-terminalBoard button[disabled], #g-setting-terminalBoard .pure-button[disabled] { border: unset; } #g-setting-terminalBoard #g-terminalBoard-edit .messageType .MuiFormControl-root, #g-setting-terminalBoard #g-terminalBoard-edit .description textarea, #g-setting-terminalBoard #g-terminalBoard-edit .title input { width: 350px; } #g-setting-terminalBoard #g-terminalBoard-edit textarea { height: 300px; } #g-setting-terminalBoard #g-terminalBoard-edit .pure-form-aligned .pure-control-group .c-date-picker .MuiOutlinedInput-adornedEnd { padding-right: unset; } #g-setting-terminalBoard #g-terminalBoard-edit .pure-form-aligned .pure-control-group .c-date-picker .MuiInputBase-input { width: 350px; height: 32px; } #g-setting-terminalBoard #g-terminalBoard-edit .content .attached-block { display: flex; flex-direction: column; } #g-setting-terminalBoard #g-terminalBoard-edit .content .attached-block .new-icon { width: 350px; display: flex; justify-content: center; background: #ddd; padding: 5px 0; border-radius: 5px; cursor: pointer; } #g-setting-terminalBoard #g-terminalBoard-edit .content .attached-block .attached-inputs { width: 350px; margin: 5px 5px 5px 0; padding: 5px; border: 1px solid #ccc; border-radius: 3px; } #g-setting-terminalBoard #g-terminalBoard-edit .content .attached-block .attached-inputs .attached-header { display: flex; justify-content: space-between; align-items: center; font-size: 16px; } #g-setting-terminalBoard #g-terminalBoard-edit .content .attached-block .attached-inputs .attached-header i:hover { color: red; cursor: pointer; } #g-setting-terminalBoard #g-terminalBoard-edit .content .attached-block .attached-inputs .attached-body .attached-input-item label { width: 30px; } #g-setting-terminalBoard #g-terminalBoard-edit .content .attached-block .attached-inputs .attached-body .attached-input-item input { width: 80%; } #g-setting-terminalBoard #g-terminalBoard-edit .content .attached-block .attached-inputs .attached-body .attached-input-item:nth-of-type(1) { margin-bottom: 5px; } #g-setting-terminalBoard #g-terminalBoard-edit .content .attached-block .attached-inputs .attached-body .image-preview, #g-setting-terminalBoard #g-terminalBoard-edit .content .attached-block .attached-inputs .attached-body img { max-width: 100%; } #g-setting-terminalBoard #g-terminalBoard-edit .content .attached-block .attached-inputs i.fa-times-circle { display: none; } #g-setting-terminalBoard #g-terminalBoard-edit .content .file .file-input { display: flex; flex-direction: column; align-items: baseline; width: 350px; } #g-setting-terminalBoard #g-terminalBoard-edit .content .file .file-input .download-file { display: flex; justify-content: space-between; align-items: center; width: 100%; cursor: default; } #g-setting-terminalBoard #g-terminalBoard-edit .content .file .file-input .download-file a:hover { color: #1565c0; cursor: pointer; } #g-setting-terminalBoard #g-terminalBoard-edit .content .file .file-input .download-file i:hover { color: red; cursor: pointer; } #g-setting-terminalBoard #g-terminalBoard-edit .content .file .file-input input[type="text"] { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } #g-setting-terminalBoard #g-terminalBoard-edit .content .file i.fa-times-circle { display: none; } #g-stats-dashboard { width: 100%; height: 100%; background: #f0f0f0; position: relative; } #g-stats-dashboard .statsDashboard-headBar { width: 575px; margin: 5px auto 0px; display: flex; } #g-stats-dashboard .statsDashboard-headBar .flatpickr-input { background: #fff; height: 33px; width: 135px; } #g-stats-dashboard .statsDashboard-headBar .date-range-label { margin-right: 5px; } #g-stats-dashboard .statsDashboard-headBar .button { background-color: #5686da; width: 83px; height: 33px; padding: 0 5px; } #g-stats-dashboard .statsDashboard-headBar .button:hover { background-color: #1565c0; } #g-stats-dashboard #g-stats-dashboard-tabs { margin: 0 10px 0; height: calc(100% - 44px); } #g-stats-dashboard #g-stats-dashboard-tabs.c-tabs > .tabContent { border: 1px solid #bbb; flex-grow: 1; display: flex; position: relative; padding: 5px 4px; overflow-y: auto; background-color: white; border-radius: 0 5px 5px 5px; margin-top: unset; } #g-stats-dashboard #g-stats-dashboard-tabs.c-tabs > .tabContent::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 15px; background-color: #ccc; } #g-stats-dashboard #g-stats-dashboard-tabs.c-tabs > .tabContent::-webkit-scrollbar { border-radius: 17px; width: 7px; height: 6px; background-color: #ccc; } #g-stats-dashboard #g-stats-dashboard-tabs.c-tabs > .tabContent::-webkit-scrollbar-thumb { border-radius: 13px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #313a3e; } #g-stats-dashboard #g-stats-dashboard-tabs.c-tabs > .menu { display: flex; flex-grow: 0; flex-shrink: 0; flex-wrap: wrap; margin-bottom: -1px; border-bottom: unset; } #g-stats-dashboard #g-stats-dashboard-tabs.c-tabs > .menu li { background-color: #5686da; color: #fff; margin-right: 5px; } #g-stats-dashboard #g-stats-dashboard-tabs.c-tabs > .menu li.current { background-color: #fff; cursor: default; color: #313a3e; border: 1px solid #bbb; border-bottom: 0; z-index: 2; } #g-stats-dashboard #g-stats-dashboard-tabs section { height: calc(100vh - 665px); } #g-stats-dashboard #g-stats-dashboard-tabs section .container { height: 100%; } #g-stats-dashboard #g-stats-dashboard-tabs section .container::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 15px; background-color: #ccc; } #g-stats-dashboard #g-stats-dashboard-tabs section .container::-webkit-scrollbar { border-radius: 17px; width: 7px; height: 6px; background-color: #ccc; } #g-stats-dashboard #g-stats-dashboard-tabs section .container::-webkit-scrollbar-thumb { border-radius: 13px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #313a3e; } #g-stats-dashboard #g-stats-dashboard-tabs section .c-table .sequence { width: 50px; } #g-stats-dashboard #g-stats-dashboard-tabs section .c-table .terminalId, #g-stats-dashboard #g-stats-dashboard-tabs section .c-table .terminalName { width: calc(100% * 0.12); } #g-stats-dashboard #g-stats-dashboard-tabs section .c-table .deliverType, #g-stats-dashboard #g-stats-dashboard-tabs section .c-table .containerNo1, #g-stats-dashboard #g-stats-dashboard-tabs section .c-table .containerNo2 { width: calc(100% * 0.15); } #g-stats-dashboard #g-stats-dashboard-tabs section .c-table .entryTime, #g-stats-dashboard #g-stats-dashboard-tabs section .c-table .exitTime, #g-stats-dashboard #g-stats-dashboard-tabs section .c-table .transportType, #g-stats-dashboard #g-stats-dashboard-tabs section .c-table .direction, #g-stats-dashboard #g-stats-dashboard-tabs section .c-table .trailerPlateNo { width: calc(100% * 0.1); } #g-stats-dashboard #g-stats-dashboard-tabs section .c-table .palteNo-div, #g-stats-dashboard #g-stats-dashboard-tabs section .c-table .deliverType-div { width: 79px; text-align: center; } #g-stats-dashboard #g-stats-dashboard-tabs section .c-table .duration-div { width: 96px; text-align: center; } #g-stats-dashboard #g-stats-dashboard-tabs section .c-table > thead > th { color: #5686da; } #g-stats-dashboard #g-stats-dashboard-tabs section .c-table > tbody > tr { height: 35px; } #g-stats-dashboard #g-stats-dashboard-tabs .statsDashboard-info { display: flex; justify-content: space-between; margin-bottom: 15px; padding: 5px 5px 0; } #g-stats-dashboard #g-stats-dashboard-tabs .statsDashboard-info .chart-dropdown { display: flex; justify-content: space-between; margin: 12px 12px 0 12px; } #g-stats-dashboard #g-stats-dashboard-tabs .statsDashboard-info .chart-dropdown .jss1 .MuiInputBase-root > select { height: 30px; } #g-stats-dashboard #g-stats-dashboard-tabs .statsDashboard-info .stats-gates-chart-nodata, #g-stats-dashboard #g-stats-dashboard-tabs .statsDashboard-info .stats-gates-xy-chart-nodata, #g-stats-dashboard #g-stats-dashboard-tabs .statsDashboard-info .stats-terminal-chart-nodata, #g-stats-dashboard #g-stats-dashboard-tabs .statsDashboard-info .stats-terminals-xy-chart-nodata, #g-stats-dashboard #g-stats-dashboard-tabs .statsDashboard-info .stats-terminals-xy-stack-chart-nodata { margin-top: 115px; } #g-stats-dashboard #g-stats-dashboard-tabs .statsDashboard-info .statsZonesChart-nodata { margin-top: 150px; } #g-stats-dashboard #g-stats-dashboard-tabs .statsDashboard-info #statsGatesChart, #g-stats-dashboard #g-stats-dashboard-tabs .statsDashboard-info #statsGatesXYChart, #g-stats-dashboard #g-stats-dashboard-tabs .statsDashboard-info #statsTerminalChart, #g-stats-dashboard #g-stats-dashboard-tabs .statsDashboard-info #statsTerminalsXYChart, #g-stats-dashboard #g-stats-dashboard-tabs .statsDashboard-info #statsTerminalsXYStackChart { width: 100%; height: calc(100% - 47px); } #g-stats-dashboard #g-stats-dashboard-tabs .statsDashboard-info #statsZonesChart { width: 100%; height: 100%; } #g-stats-dashboard #g-stats-dashboard-tabs .statsDashboard-log { border-top: 1px solid #888; padding-top: 5px; } #g-stats-dashboard #g-stats-dashboard-tabs .statsDashboard-log .log-head { margin-bottom: 5px; } #g-stats-dashboard #g-stats-dashboard-tabs .statsDashboard-log .log-head .log-title { line-height: 30px; margin-right: 30px; } #g-stats-dashboard #g-stats-dashboard-tabs .statsDashboard-log .log-head .label { margin: unset; vertical-align: unset; } #g-stats-dashboard #g-stats-dashboard-tabs .statsDashboard-log .log-head .jss1 .MuiInputBase-root > select { height: 30px; } #g-stats-dashboard button[disabled], #g-stats-dashboard .pure-button[disabled] { border: unset; } .badge { display: inline-block; padding: .25em .4em; font-size: 100%; font-weight: 500; line-height: 1; color: #fff; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: .25rem; } .button-success, .button-error, .button-warning, .button-secondary { color: white; border-radius: 4px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); } .button-success:hover, .button-error:hover, .button-warning:hover, .button-secondary:hover { background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1)); } .button-success { background: #1cb841; /* this is a green */ } .button-error { background: #ca3c3c; /* this is a maroon */ } .button-warning { background: #df7514; /* this is an orange */ } .button-secondary { background: #42b8dd; /* this is a light blue */ } .button-group > a:first-child { border-radius: 4px 0px 0px 4px; } .button-group > a:last-child { border-radius: 0px 4px 4px 0px; } .link-success { color: #5cb85c; border-color: #5cb85c; } .link-secondary { color: #5bc0de; border-color: #5bc0de; } .link-error { color: #d9534f; border-color: #d9534f; } .link-warning { color: #f0ad4e; border-color: #f0ad4e; } .link-primary { color: #0275d8; border-color: #0275d8; } #g-system-config .content.c-align { min-height: 410px; width: 430px; } #g-system-config .content.c-align .area { margin-left: -90px; } #g-system-config .content.c-align .area .area-select-container { width: 350px; } #g-system-config .content.c-align .area .area-select-container .area-select-dropdown { display: inline; } #g-system-config .content.c-align .area .area-select-container .area-select-dropdown select { margin-bottom: .5em; margin-right: 5px; } #g-terminal-dashboard { width: 100%; height: 100%; background: #f0f0f0; position: relative; } #g-terminal-dashboard .terminal-dashboard-table { margin: 13px 10px 0; background: #fff; border: 1px solid #bbb; border-radius: 5px; padding: 5px; } #g-terminal-dashboard .terminal-dashboard-table .table-head { margin-bottom: 5px; display: flex; justify-content: space-between; } #g-terminal-dashboard .terminal-dashboard-table .table-head .title { line-height: 30px; width: 300px; } #g-terminal-dashboard .terminal-dashboard-table section .container { height: calc(100vh - 240px); } #g-terminal-dashboard .terminal-dashboard-table section .container::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 15px; background-color: #ccc; } #g-terminal-dashboard .terminal-dashboard-table section .container::-webkit-scrollbar { border-radius: 17px; width: 7px; height: 6px; background-color: #ccc; } #g-terminal-dashboard .terminal-dashboard-table section .container::-webkit-scrollbar-thumb { border-radius: 13px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #313a3e; } #g-terminal-dashboard .terminal-dashboard-table section .c-table .sequence { width: 45px; } #g-terminal-dashboard .terminal-dashboard-table section .c-table .name { width: 180px; } #g-terminal-dashboard .terminal-dashboard-table section .c-table .lineQty-div, #g-terminal-dashboard .terminal-dashboard-table section .c-table .duration-div { width: 115px; text-align: center; } #g-terminal-dashboard .terminal-dashboard-table section .c-table .updatedAt, #g-terminal-dashboard .terminal-dashboard-table section .c-table .pickUpTrailerLineQty, #g-terminal-dashboard .terminal-dashboard-table section .c-table .returnTrailerLineQty, #g-terminal-dashboard .terminal-dashboard-table section .c-table .pickUpEstLineDuration, #g-terminal-dashboard .terminal-dashboard-table section .c-table .returnEstLineDuration { min-width: 152px; } #g-terminal-dashboard .terminal-dashboard-table section .c-table .more .icon-block { font-size: 18px; } #g-terminal-dashboard .terminal-dashboard-table section .c-table .more .icon-block a { margin-right: 12px; } #g-terminal-dashboard .terminal-dashboard-table section .c-table .more .icon-block a.delete:hover { color: #CA2124; } #g-terminal-dashboard .terminal-dashboard-table section .c-table .more .icon-block a:hover { color: #1b76c4; } #g-terminal-dashboard .terminal-dashboard-table section .c-table > tbody > tr { height: 35px; } #g-terminal-dashboard .page-nav { justify-content: center; margin-top: 7px; } #g-terminal-dashboard #g-related-camera-edit-dialog .pure-control-group { max-width: 700px; } #g-terminal-dashboard #g-related-camera-edit-dialog .filterCameras i { font-size: 18px; line-height: 31px; } #g-terminal-dashboard #g-related-camera-edit-dialog .filterCameras i.first { margin: 0 5px; } #g-terminal-dashboard #g-related-camera-edit-dialog .filterCameras i:hover { color: #1b76c4; cursor: pointer; } #g-terminal-dashboard #g-related-camera-edit-dialog .relatedCameras-block { flex-wrap: wrap; max-height: 120px; border-radius: 5px; overflow: auto; } #g-terminal-dashboard #g-related-camera-edit-dialog .relatedCameras-block::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 15px; background-color: #ccc; } #g-terminal-dashboard #g-related-camera-edit-dialog .relatedCameras-block::-webkit-scrollbar { border-radius: 17px; width: 7px; height: 6px; background-color: #ccc; } #g-terminal-dashboard #g-related-camera-edit-dialog .relatedCameras-block::-webkit-scrollbar-thumb { border-radius: 13px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #313a3e; } #g-terminal-dashboard #g-related-camera-edit-dialog .relatedCameras-block .camera { border: 1px solid #aaa; padding: 2px 5px; border-radius: 10px; margin: 0 5px 5px; background: #e0e0e0; } #g-terminal-dashboard #g-related-camera-edit-dialog .relatedCameras-block .camera span { margin-right: 5px; } #g-terminal-dashboard #g-related-camera-edit-dialog .relatedCameras-block .camera span:hover { color: #1b76c4; cursor: pointer; } #g-terminal-dashboard #g-related-camera-edit-dialog .relatedCameras-block .camera span.selected { color: #1b76c4; } #g-terminal-dashboard #g-related-camera-edit-dialog .relatedCameras-block .camera a:hover { color: #CA2124; } #g-terminal-dashboard #g-related-camera-edit-dialog .previewCamera .tvwall { color: #fff; max-width: 700px; height: calc((100% - 50px)); text-align: center; background-color: #222; display: flex; flex-direction: column; } #g-terminal-dashboard #g-related-camera-edit-dialog .previewCamera .tvwall .play-icon { position: absolute; top: calc(50% + 5px); left: calc(50% - 20px); color: #aaa; font-size: 40px; } #g-terminal-dashboard #g-related-camera-edit-dialog .previewCamera .tvwall .play-icon:hover { color: #fff; cursor: pointer; } #g-terminal-dashboard #g-related-camera-edit-dialog .previewCamera .tvwall iframe { border: none; } #g-terminal-dashboard #g-related-camera-edit-dialog .previewCamera .tvwall iframe table { display: none; } #g-terminal-dashboard #g-related-camera-edit-dialog .previewCamera .tvwall #g-its-videoPlayer { width: calc(100% - 0.5px); height: inherit; position: relative; } #g-terminal-dashboard #g-related-camera-edit-dialog .previewCamera .tvwall #g-its-videoPlayer .camera-reload-mask { position: absolute; bottom: 0; right: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); display: flex; justify-content: center; align-items: center; } #g-terminal-dashboard #g-related-camera-edit-dialog .previewCamera .tvwall #g-its-videoPlayer .camera-reload-btn { width: 50px; height: 50px; border-radius: 50%; background-color: transparent; padding: 0; color: #fff; font-size: 4rem; border: none; outline: none; cursor: pointer; display: flex; justify-content: center; align-items: center; } #g-terminal-dashboard #g-related-camera-edit-dialog .previewCamera .tvwall #g-its-videoPlayer .hls-video-block { width: inherit; height: inherit; text-align: center; position: relative; display: flex; } #g-terminal-dashboard #g-related-camera-edit-dialog .previewCamera .tvwall #g-its-videoPlayer .hls-video-block video { display: block; vertical-align: middle; width: inherit; } #g-terminal-dashboard #g-related-camera-edit-dialog .previewCamera .tvwall #g-its-videoPlayer .hls-video-block .loading { position: absolute; top: 0; width: inherit; color: white; height: 100%; display: flex; justify-content: center; align-items: center; } #g-terminal-dashboard #g-related-camera-detail-dialog #g-related-camera-detail-content { display: unset !important; } #g-terminal-dashboard #g-related-camera-detail-dialog .camera-card { width: 300px; height: 80px; margin-bottom: 10px; border: 1px solid rgba(86, 134, 218, 0.15); border-radius: 8px; display: flex; position: relative; } #g-terminal-dashboard #g-related-camera-detail-dialog .camera-card .camera-video { width: 100px; height: 78px; border-radius: 8px 0 0 8px; text-align: center; line-height: 78px; background-color: #222; } #g-terminal-dashboard #g-related-camera-detail-dialog .camera-card .camera-video .play-icon { color: #aaa; font-size: 24px; } #g-terminal-dashboard #g-related-camera-detail-dialog .camera-card .camera-video .play-icon:hover { color: #fff; cursor: pointer; } #g-terminal-dashboard #g-related-camera-detail-dialog .camera-card .camera-info { width: 200px; border-radius: 0 8px 8px 0; height: 80px; cursor: default; } #g-terminal-dashboard #g-related-camera-detail-dialog .camera-card .camera-info .camera-name { margin: 20px 0 0 15px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 135px; } #g-terminal-dashboard #g-related-camera-detail-dialog .camera-card .camera-info .camera-area { margin: 10px 15px 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #g-terminal-dashboard #g-related-camera-detail-dialog .camera-card .camera-info .heart-icon { font-size: 24px; color: #5686da; position: absolute; top: 15px; right: 28px; } #g-terminal-dashboard #g-related-camera-detail-dialog .camera-card .camera-info .heart-icon:hover { color: #1565c0; cursor: pointer; } #g-terminal-dashboard #videoPlayer-dialog-dialog .its-videoPlayer { width: 100%; height: 100%; position: relative; } #g-terminal-dashboard #videoPlayer-dialog-dialog .its-videoPlayer .camera-reload-mask { position: absolute; bottom: 0; right: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); display: flex; justify-content: center; align-items: center; } #g-terminal-dashboard #videoPlayer-dialog-dialog .its-videoPlayer .camera-reload-btn { width: 50px; height: 50px; border-radius: 50%; background-color: transparent; padding: 0; color: #fff; font-size: 4rem; border: none; outline: none; cursor: pointer; display: flex; justify-content: center; align-items: center; } #g-terminal-dashboard #videoPlayer-dialog-dialog .hls-video-block { width: 700px; background-color: #000; height: inherit; text-align: center; position: relative; display: flex; } #g-terminal-dashboard #videoPlayer-dialog-dialog .hls-video-block video { display: block; vertical-align: middle; width: inherit; } #g-terminal-dashboard #videoPlayer-dialog-dialog .hls-video-block .loading { position: absolute; top: 0; width: inherit; color: white; height: 100%; display: flex; justify-content: center; align-items: center; } #g-terminal-dashboard #videoPlayer-dialog-dialog .camera-video { min-width: 454px; background: #000; } #g-terminal-dashboard #videoPlayer-dialog-dialog .camera-info { border-radius: 0 8px 8px 0; margin: 20px 0; cursor: default; } #g-terminal-dashboard #videoPlayer-dialog-dialog .camera-info .camera-name { margin: 0 0 0 15px; } #g-terminal-dashboard #videoPlayer-dialog-dialog .camera-info .camera-area { margin: 10px 15px 0; color: #afafaf; } #g-terminal-dashboard button[disabled], #g-terminal-dashboard .pure-button[disabled] { border: unset; } .badge { display: inline-block; padding: .25em .4em; font-size: 100%; font-weight: 500; line-height: 1; color: #fff; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: .25rem; } .button-success, .button-error, .button-warning, .button-secondary { color: white; border-radius: 4px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); } .button-success:hover, .button-error:hover, .button-warning:hover, .button-secondary:hover { background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1)); } .button-success { background: #1cb841; /* this is a green */ } .button-error { background: #ca3c3c; /* this is a maroon */ } .button-warning { background: #df7514; /* this is an orange */ } .button-secondary { background: #42b8dd; /* this is a light blue */ } .button-group > a:first-child { border-radius: 4px 0px 0px 4px; } .button-group > a:last-child { border-radius: 0px 4px 4px 0px; } .link-success { color: #5cb85c; border-color: #5cb85c; } .link-secondary { color: #5bc0de; border-color: #5bc0de; } .link-error { color: #d9534f; border-color: #d9534f; } .link-warning { color: #f0ad4e; border-color: #f0ad4e; } .link-primary { color: #0275d8; border-color: #0275d8; } #g-traffic-dashboard { width: 100%; position: relative; } #g-traffic-dashboard .trafficEvent-table { position: absolute; top: 20px; right: 20px; z-index: 998; border: 1px solid #bbb; background-color: #fff; border-radius: 5px; padding: 5px; } #g-traffic-dashboard .trafficEvent-table.hideTable { z-index: 0; } #g-traffic-dashboard .trafficEvent-table.mobile-event-table { right: 6px; } #g-traffic-dashboard .trafficEvent-table.mobile-event-table .table-head { width: 366px !important; } #g-traffic-dashboard .trafficEvent-table.mobile-event-table .c-border section .eventContent { width: 130px !important; } #g-traffic-dashboard .trafficEvent-table .table-head { margin: 5px 0 10px; width: 450px; display: flex; justify-content: space-between; align-items: center; } #g-traffic-dashboard .trafficEvent-table section .container { height: 521px; } #g-traffic-dashboard .trafficEvent-table section .container::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 15px; background-color: #ccc; } #g-traffic-dashboard .trafficEvent-table section .container::-webkit-scrollbar { border-radius: 17px; width: 7px; height: 6px; background-color: #ccc; } #g-traffic-dashboard .trafficEvent-table section .container::-webkit-scrollbar-thumb { border-radius: 13px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #313a3e; } #g-traffic-dashboard .trafficEvent-table section .sequence { width: 45px; } #g-traffic-dashboard .trafficEvent-table section .eventContent { width: 200px; text-align: left; } #g-traffic-dashboard .trafficEvent-table section .eventContent div { width: inherit; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } #g-traffic-dashboard .trafficEvent-table section .eventContent div:hover { cursor: pointer; color: #1b76c4; } #g-traffic-dashboard .trafficEvent-table section .location { width: 50px; color: red; } #g-traffic-dashboard .trafficEvent-table section .beginTime { width: 100px; } #g-traffic-dashboard .trafficEvent-table .page-nav { justify-content: center; margin-top: 7px; } #g-traffic-dashboard #trafficEvent-map { width: 100vw; height: 100%; position: absolute; right: 0; } #g-traffic-dashboard #trafficEvent-map .marker-cluster { background: #32383E; border: 3px solid #ededed; border-radius: 50%; color: #ededed; height: 30px; line-height: 27px; text-align: center; width: 30px; } #g-traffic-dashboard #trafficEvent-map .location-pin { display: inline-block; left: 9px; } #g-traffic-dashboard #trafficEvent-map .location-pin .circle { width: 16px; height: 16px; z-index: 10; position: absolute; border-radius: 50%; background: #fff; } #g-traffic-dashboard #trafficEvent-map .location-pin .pin { width: 30px; height: 30px; border-radius: 50% 50% 50% 0; background: #CA2124; position: absolute; transform: rotate(-45deg); left: 50%; top: 50%; margin: -20px 0 0 -20px; } #g-traffic-dashboard #trafficEvent-map .location-pin .pin:after { content: ''; width: 26px; height: 26px; margin: 2px 0 0 2px; position: absolute; border-radius: 50%; -webkit-animation: bounce-rotate 1s both; -moz-animation: bounce-rotate 1s both; animation: bounce-rotate 1s both; } @-webkit-keyframes bounce-rotate { 0% { transform: scale(0.1, 0.1); opacity: 0; } 50% { opacity: 1; } 100% { transform: scale(1.2, 1.2); opacity: 0; } } @-moz-keyframes bounce-rotate { 0% { transform: scale(0.1, 0.1); opacity: 0; } 50% { opacity: 1; } 100% { transform: scale(1.2, 1.2); opacity: 0; } } @-ms-keyframes bounce-rotate { 0% { transform: scale(0.1, 0.1); opacity: 0; } 50% { opacity: 1; } 100% { transform: scale(1.2, 1.2); opacity: 0; } } @-o-keyframes bounce-rotate { 0% { transform: scale(0.1, 0.1); opacity: 0; } 50% { opacity: 1; } 100% { transform: scale(1.2, 1.2); opacity: 0; } } @keyframes bounce-rotate { 0% { transform: scale(0.1, 0.1); opacity: 0; } 50% { opacity: 1; } 100% { transform: scale(1.2, 1.2); opacity: 0; } } #g-traffic-dashboard #trafficEvent-map .tooltip { width: 150px; padding: 4px 6px; border-radius: 9px; box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.2); border: solid 1.8px #aaa; background-color: #eee; z-index: 999; font-size: 14px; } #g-traffic-dashboard #trafficEvent-map .tooltip .marker-tooltip { word-break: break-all; white-space: normal; } #g-traffic-dashboard #trafficEvent-map .tooltip.leaflet-tooltip-bottom::before { content: ''; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid #aaa; position: absolute; top: -6px; left: 73px; } #g-traffic-dashboard #trafficEvent-map .tooltip.leaflet-tooltip-bottom::after { content: ''; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid #eee; position: absolute; top: -10px; left: 67px; } #g-traffic-dashboard #trafficEvent-dialog .content { width: 450px; } #g-traffic-dashboard #trafficEvent-dialog .description { margin: 10px 0 20px; } #g-traffic-dashboard #trafficEvent-dialog .data-info { display: flex; margin: 5px 0; } #g-traffic-dashboard #trafficEvent-dialog .data-info label, #g-traffic-dashboard #trafficEvent-dialog .data-info p { margin: 0; } #g-traffic-dashboard .marker-icon { color: red; font-size: 30px; } #g-traffic-dashboard .event-icon-wrap { position: absolute; bottom: 30px; right: 30px; z-index: 999; width: 55px; height: 55px; border-radius: 5px; background-color: #5686da; color: #fff; text-align: center; font-size: 34px; line-height: 55px; box-shadow: 1px 1px 6px 1px #000000; } #g-traffic-live { width: 100%; position: relative; } #g-traffic-live .slide-icon { position: absolute; top: 260px; right: 339px; font-size: 28px; width: 15px; height: 48px; cursor: pointer; border: 1px solid #d4d4d4; border-radius: 8px 0px 0px 8px; background: #fff 1px 10px no-repeat; } #g-traffic-live .slide-icon.close { right: 9px; top: 280px; z-index: 997; } #g-traffic-live .slide-icon.close::before { content: ''; height: 558px; width: 10px; background-color: #fff; display: block; position: absolute; top: -240px; right: -11px; border-radius: 6px 0 0 6px; /* border: 1px solid #d4d4d4; */ box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.5); } #g-traffic-live .slide-icon .MuiSvgIcon-root { font-size: inherit; height: inherit; margin-left: -6px; } #g-traffic-live .tab-block { width: 340px; height: 599px; position: absolute; top: 20px; right: 0px; z-index: 998; } #g-traffic-live #g-traffic-live-tabs { position: absolute; top: 20px; right: 0px; z-index: 998; } #g-traffic-live #g-traffic-live-tabs.c-tabs > .tabContent { border: 1px solid #aaa; flex-grow: 1; display: flex; position: relative; padding: 5px 4px; overflow-y: auto; width: 340px; background-color: white; border-radius: 0 5px 5px 5px; margin-top: unset; } #g-traffic-live #g-traffic-live-tabs.c-tabs > .menu { display: flex; flex-grow: 0; flex-shrink: 0; flex-wrap: wrap; margin-bottom: -1px; border-bottom: unset; } #g-traffic-live #g-traffic-live-tabs.c-tabs > .menu li { background-color: #5686da; color: #fff; margin-right: 5px; } #g-traffic-live #g-traffic-live-tabs.c-tabs > .menu li.current { background-color: #fff; cursor: default; color: #313a3e; border: 1px solid #aaa; border-bottom: 0; z-index: 2; } #g-traffic-live #g-traffic-live-tabs.c-tabs .information-filter { padding: 0 15px 5px; height: 560px; } #g-traffic-live #g-traffic-live-tabs.c-tabs .information-filter .title { height: 30px; margin: 15px 0 4px; font-size: 16px; color: #313a3e; cursor: default; } #g-traffic-live #g-traffic-live-tabs.c-tabs .information-filter .filter-buttton-block { margin: 20px 0 0px; } #g-traffic-live #g-traffic-live-tabs.c-tabs .information-filter .filter-buttton-block .button { text-align: left; } #g-traffic-live #g-traffic-live-tabs.c-tabs .information-filter .filter-buttton-block .button img { margin: 0 2px; } #g-traffic-live #g-traffic-live-tabs.c-tabs .information-filter .filter-buttton-block .button img, #g-traffic-live #g-traffic-live-tabs.c-tabs .information-filter .filter-buttton-block .button span { vertical-align: middle; } #g-traffic-live #g-traffic-live-tabs.c-tabs .information-filter .instruction-block { margin: 10px 0 0; border-top: 1px solid #5686da; padding: 10px 0 0; } #g-traffic-live #g-traffic-live-tabs.c-tabs .information-filter .instruction-block .guide { display: flex; align-items: center; } #g-traffic-live #g-traffic-live-tabs.c-tabs .information-filter .instruction-block .guide .guide-icon { color: #5686da; } #g-traffic-live #g-traffic-live-tabs.c-tabs .information-filter .instruction-block .guide span { margin-left: 5px; } #g-traffic-live #g-traffic-live-tabs.c-tabs .information-filter .instruction-block .items { height: 200px; overflow: auto; } #g-traffic-live #g-traffic-live-tabs.c-tabs .information-filter .instruction-block .items::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 15px; background-color: #ccc; } #g-traffic-live #g-traffic-live-tabs.c-tabs .information-filter .instruction-block .items::-webkit-scrollbar { border-radius: 17px; width: 7px; height: 6px; background-color: #ccc; } #g-traffic-live #g-traffic-live-tabs.c-tabs .information-filter .instruction-block .items::-webkit-scrollbar-thumb { border-radius: 13px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #313a3e; } #g-traffic-live #g-traffic-live-tabs.c-tabs .information-filter .instruction-block .items .item { display: flex; align-items: center; margin: 12px 0; } #g-traffic-live #g-traffic-live-tabs.c-tabs .information-filter .instruction-block .items .item .text-span { width: 110px; } #g-traffic-live #g-traffic-live-tabs.c-tabs .information-filter .instruction-block .items .item .status { display: flex; flex-direction: column; align-items: center; } #g-traffic-live #g-traffic-live-tabs.c-tabs .information-filter .instruction-block .items .item .status .status-instruction { margin-top: 2px; } #g-traffic-live #g-traffic-live-tabs.c-tabs .information-filter .instruction-block .items .item .icon-status { margin: 0 10px; width: 40px; height: 40px; z-index: 257; position: relative; background-color: #5686da; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.6); } #g-traffic-live #g-traffic-live-tabs.c-tabs .information-filter .instruction-block .items .item .icon-status img { top: 2px; left: 2px; position: absolute; } #g-traffic-live #g-traffic-live-tabs.c-tabs .information-filter .instruction-block .items .item .level1 { background-color: #55c836; } #g-traffic-live #g-traffic-live-tabs.c-tabs .information-filter .instruction-block .items .item .level2 { background-color: #ffbc3c; } #g-traffic-live #g-traffic-live-tabs.c-tabs .information-filter .instruction-block .items .item .level3 { background-color: #ff3c3c; } #g-traffic-live #g-traffic-live-tabs.c-tabs .information-filter .button { width: 140px; height: 40px; padding: 5px 12px 5px 10px; border-radius: 8px; box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.15); background-color: #fff; color: #313a3e; margin: 7px 0; } #g-traffic-live #g-traffic-live-tabs.c-tabs .information-filter .button:hover { background-color: rgba(25, 118, 210, 0.04); border: 1px solid #1976d2; } #g-traffic-live #g-traffic-live-tabs.c-tabs .information-filter .button.selected, #g-traffic-live #g-traffic-live-tabs.c-tabs .information-filter .button.selectedAll { color: #fff; background-color: #5686da; } #g-traffic-live #g-traffic-live-tabs.c-tabs .information-filter .button.selected:hover, #g-traffic-live #g-traffic-live-tabs.c-tabs .information-filter .button.selectedAll:hover { text-decoration: none; background-color: #1565c0; box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); } #g-traffic-live #g-traffic-live-tabs.c-tabs .information-filter .button.clear { padding: 5px 15px; color: #5686da; background-color: #fff; } #g-traffic-live #g-traffic-live-tabs.c-tabs .information-filter .button.clear:hover { color: #1976d2; background-color: rgba(25, 118, 210, 0.04); border: 1px solid #1976d2; } #g-traffic-live #g-traffic-live-tabs.c-tabs .myFavorite { padding: 5px 10px 5px; height: 515px; overflow: auto; overflow-x: hidden; } #g-traffic-live #g-traffic-live-tabs.c-tabs .myFavorite::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 15px; background-color: #ccc; } #g-traffic-live #g-traffic-live-tabs.c-tabs .myFavorite::-webkit-scrollbar { border-radius: 17px; width: 7px; height: 6px; background-color: #ccc; } #g-traffic-live #g-traffic-live-tabs.c-tabs .myFavorite::-webkit-scrollbar-thumb { border-radius: 13px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #313a3e; } #g-traffic-live #g-traffic-live-tabs.c-tabs .myFavorite .camera-card { width: 300px; height: 80px; margin-bottom: 10px; border: 1px solid rgba(86, 134, 218, 0.15); border-radius: 8px; display: flex; position: relative; } #g-traffic-live #g-traffic-live-tabs.c-tabs .myFavorite .camera-card .camera-video { width: 100px; height: 78px; border-radius: 8px 0 0 8px; text-align: center; line-height: 78px; background-color: #222; } #g-traffic-live #g-traffic-live-tabs.c-tabs .myFavorite .camera-card .camera-video .play-icon { color: #aaa; font-size: 24px; } #g-traffic-live #g-traffic-live-tabs.c-tabs .myFavorite .camera-card .camera-video .play-icon:hover { color: #fff; cursor: pointer; } #g-traffic-live #g-traffic-live-tabs.c-tabs .myFavorite .camera-card .camera-info { width: 200px; border-radius: 0 8px 8px 0; height: 80px; cursor: default; } #g-traffic-live #g-traffic-live-tabs.c-tabs .myFavorite .camera-card .camera-info .camera-name { margin: 20px 0 0 15px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 135px; } #g-traffic-live #g-traffic-live-tabs.c-tabs .myFavorite .camera-card .camera-info .camera-area { margin: 10px 15px 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #g-traffic-live #g-traffic-live-tabs.c-tabs .myFavorite .camera-card .camera-info .heart-icon { font-size: 24px; color: #5686da; position: absolute; top: 15px; right: 28px; } #g-traffic-live #g-traffic-live-tabs.c-tabs .myFavorite .camera-card .camera-info .heart-icon:hover { color: #1565c0; cursor: pointer; } #g-traffic-live #g-traffic-live-tabs.c-tabs .forecastPassingTime { padding: 5px 15px 5px; height: 515px; } #g-traffic-live #g-traffic-live-tabs.c-tabs .forecastPassingTime .destination { margin: 35px 0 0; } #g-traffic-live #g-traffic-live-tabs.c-tabs .forecastPassingTime .start-area .title, #g-traffic-live #g-traffic-live-tabs.c-tabs .forecastPassingTime .destination .title { height: 30px; margin: 15px 0 4px; font-size: 16px; color: #313a3e; cursor: default; } #g-traffic-live #g-traffic-live-tabs.c-tabs .forecastPassingTime .start-area > label, #g-traffic-live #g-traffic-live-tabs.c-tabs .forecastPassingTime .destination > label { display: block; margin: 10px 0 5px; } #g-traffic-live #g-traffic-live-tabs.c-tabs .forecastPassingTime .error { color: #ff0000; margin-top: 41px; height: 20px; } #g-traffic-live #g-traffic-live-tabs.c-tabs .forecastPassingTime .button { width: 140px; height: 40px; padding: 5px 12px 5px 10px; border-radius: 8px; box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.15); background-color: #fff; margin: 7px 0; } #g-traffic-live #g-traffic-live-tabs.c-tabs .forecastPassingTime .button.confirm { color: #fff; background-color: #5686da; } #g-traffic-live #g-traffic-live-tabs.c-tabs .forecastPassingTime .button.confirm:hover { text-decoration: none; background-color: #1565c0; box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); } #g-traffic-live #g-traffic-live-tabs.c-tabs .forecastPassingTime .button.clear { padding: 5px 15px; color: #5686da; } #g-traffic-live #g-traffic-live-tabs.c-tabs .forecastPassingTime .button.clear:hover { color: #1976d2; background-color: rgba(25, 118, 210, 0.04); border: 1px solid #1976d2; } #g-traffic-live #ITS-map { width: 100vw; height: 100%; position: absolute; right: 0; } #g-traffic-live #ITS-map .marker-cluster { background: #32383E; border: 3px solid #ededed; border-radius: 50%; color: #ededed; height: 30px; line-height: 27px; text-align: center; width: 30px; } #g-traffic-live #ITS-map .its-marker { position: relative; background-color: #5686da; border-radius: 50%; cursor: pointer; border: 2px solid #fff; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.6); } #g-traffic-live #ITS-map .its-marker.no-data { background-color: #888; } #g-traffic-live #ITS-map .its-marker.level1 { background-color: #55c836; } #g-traffic-live #ITS-map .its-marker.level2 { background-color: #ffbc3c; } #g-traffic-live #ITS-map .its-marker.level3 { background-color: #ff3c3c; } #g-traffic-live #ITS-map .its-marker .icon { top: 1px; left: 1px; position: absolute; } #g-traffic-live #ITS-map .its-tooltip { width: 110px; padding: 4px 6px; border-radius: 9px; box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.2); border: solid 1.8px #aaa; background-color: #eee; z-index: 999; font-size: 14px; } #g-traffic-live #ITS-map .its-tooltip.leaflet-tooltip-bottom::before { content: ''; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid #aaa; position: absolute; top: -6px; left: 53px; } #g-traffic-live #ITS-map .its-tooltip.leaflet-tooltip-bottom::after { content: ''; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid #eee; position: absolute; top: -10px; left: 47px; } #g-traffic-live #ITS-map .its-tooltip.live-traffic-tooltip { width: 140px; } #g-traffic-live #ITS-map .its-tooltip.live-traffic-tooltip.leaflet-tooltip-bottom::before { left: 68px; } #g-traffic-live #ITS-map .its-tooltip.live-traffic-tooltip.leaflet-tooltip-bottom::after { left: 62px; } #g-traffic-live #ITS-map .its-tooltip.terminal-station-tooltip { width: 198px; } #g-traffic-live #ITS-map .its-tooltip.terminal-station-tooltip.leaflet-tooltip-bottom::before { left: 97px; } #g-traffic-live #ITS-map .its-tooltip.terminal-station-tooltip.leaflet-tooltip-bottom::after { left: 91px; } #g-traffic-live #ITS-map .its-tooltip.terminal-station-tooltip .content-row { justify-content: unset; } #g-traffic-live #ITS-map .its-tooltip.terminal-station-tooltip .content-row span { margin-left: 3px; } #g-traffic-live #ITS-map .its-tooltip .camera-name { text-align: center; white-space: normal; } #g-traffic-live #ITS-map .its-tooltip .title { margin-bottom: 3px; } #g-traffic-live #ITS-map .its-tooltip .content-row { display: flex; justify-content: space-between; width: 100%; } #g-traffic-live #ITS-map .its-tooltip .content-row img { width: 25px; height: 25px; } #g-traffic-live #ITS-map .its-tooltip .content-row span { height: 25px; line-height: 25px; } #g-traffic-live #ITS-map .its-tooltip .content-row label { margin: unset; line-height: 25px; } #g-traffic-live #ITS-map .its-tooltip .content-row .live-traffic-span { width: 63px; } #g-traffic-live #ITS-map .its-tooltip .content-row .live-traffic-icon { height: 25px; font-size: 18px; line-height: 25px; margin-right: 5px; } #g-traffic-live #ITS-map .its-tooltip .content-row .live-traffic-icon.reversed { transform: rotateY(180deg); } #g-traffic-live #traffic-dialog .content { padding-top: 10px; padding-bottom: 10px; } #g-traffic-live #traffic-dialog .content #predictionChart, #g-traffic-live #traffic-dialog .content #predictionChart-seven { width: 100%; height: 300px; } #g-traffic-live #traffic-dialog .color.low { color: #55c836; } #g-traffic-live #traffic-dialog .color.middle { color: #ffbc3c; } #g-traffic-live #traffic-dialog .color.high { color: #ff3c3c; } #g-traffic-live #traffic-dialog .camera-content { position: relative; width: 100%; height: inherit; } #g-traffic-live #traffic-dialog .camera-content .camera-video .its-videoPlayer { text-align: center; position: relative; } #g-traffic-live #traffic-dialog .camera-content .camera-video .its-videoPlayer .camera-reload-mask { position: absolute; bottom: 0; right: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); display: flex; justify-content: center; align-items: center; } #g-traffic-live #traffic-dialog .camera-content .camera-video .its-videoPlayer .camera-reload-btn { width: 50px; height: 50px; border-radius: 50%; background-color: transparent; padding: 0; color: #fff; font-size: 4rem; border: none; outline: none; cursor: pointer; display: flex; justify-content: center; align-items: center; } #g-traffic-live #traffic-dialog .camera-content .camera-video iframe { border: none; } #g-traffic-live #traffic-dialog .camera-content .camera-video .hls-video-block { width: 100%; max-width: 700px; background-color: #000; position: relative; display: flex; } #g-traffic-live #traffic-dialog .camera-content .camera-video .hls-video-block video { width: inherit; } #g-traffic-live #traffic-dialog .camera-content .camera-video .hls-video-block .loading { position: absolute; top: 0; width: inherit; color: white; height: 100%; display: flex; justify-content: center; align-items: center; } #g-traffic-live #traffic-dialog .camera-content .camera-info { border-radius: 0 8px 8px 0; cursor: default; font-size: 16px; position: relative; } #g-traffic-live #traffic-dialog .camera-content .camera-info .camera-name { margin: 20px 0 0 15px; width: 350px; padding-right: 55px; } #g-traffic-live #traffic-dialog .camera-content .camera-info .camera-area { width: 350px; padding-right: 55px; margin: 10px 15px 0; } #g-traffic-live #traffic-dialog .camera-content .camera-info .heart-icon { font-size: 40px; color: #5686da; position: absolute; top: 15px; right: 28px; } #g-traffic-live #traffic-dialog .camera-content .camera-info .heart-icon:hover { color: #1565c0; cursor: pointer; } #g-traffic-live #traffic-dialog .liveTraffic-content .text-content, #g-traffic-live #traffic-dialog .termanalstation-content-info .text-content, #g-traffic-live #traffic-dialog .gatestation-content-info .text-content { padding-left: 30px; margin-bottom: 20px; max-width: 500px; } #g-traffic-live #traffic-dialog .forecast-content { width: 400px; margin: 5px 0; } #g-traffic-live #traffic-dialog .prediction-model { width: 650px; min-height: 123px; border-top: 1px solid #555; text-align: center; margin-top: 20px; padding-top: 20px; } #g-traffic-live #traffic-dialog .prediction-model .loading { margin-top: 20px; } #g-traffic-live #traffic-dialog .prediction-model .chart-date.two { display: flex; justify-content: space-between; } #g-traffic-live #traffic-dialog .prediction-model .chart-date.two span.date-0 { margin-left: 68px; } #g-traffic-live #traffic-dialog .prediction-model .chart-date.two span.date-1 { margin-right: 15px; } #g-traffic-live #traffic-dialog .prediction-model .chart-date.terminal span.date-0 { margin-left: 60px; } #g-traffic-live #traffic-dialog .prediction-model .chart-date.terminal span.date-1 { margin-right: 105px; } #g-traffic-live #traffic-dialog .prediction-model .prediction-list.seven .list-content { height: 185px; } #g-traffic-live #traffic-dialog .prediction-model .prediction-list.seven .item { justify-content: space-around; } #g-traffic-live #traffic-dialog .prediction-model .prediction-list.seven .item p { flex: 1; } #g-traffic-live #traffic-dialog .prediction-model .prediction-list .item { border-bottom: 1px solid #ccc; display: flex; justify-content: space-around; } #g-traffic-live #traffic-dialog .prediction-model .prediction-list .item .number { text-align: right; margin-right: 10px; } #g-traffic-live #traffic-dialog .prediction-model .prediction-list .item .date { width: 55px; } #g-traffic-live #traffic-dialog .prediction-model .prediction-list .item .count { width: 160px; } #g-traffic-live #traffic-dialog .prediction-model .prediction-list .list-content { height: 200px; overflow: auto; overflow-x: hidden; } #g-traffic-live #traffic-dialog .prediction-model .prediction-list .list-content::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 15px; background-color: #ccc; } #g-traffic-live #traffic-dialog .prediction-model .prediction-list .list-content::-webkit-scrollbar { border-radius: 17px; width: 7px; height: 6px; background-color: #ccc; } #g-traffic-live #traffic-dialog .prediction-model .prediction-list .list-content::-webkit-scrollbar-thumb { border-radius: 13px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #313a3e; } #g-traffic-live #traffic-dialog .prediction-model .prediction-list .list-content .return-vehicles { margin-right: 10px; width: 75px; display: inline-block; } #g-traffic-live #traffic-dialog .prediction-model .prediction-list .list-content .pickup-vehicles { width: 75px; display: inline-block; } #g-traffic-live #traffic-dialog .prediction-model .prediction-list .list-content .prediction-time { width: 160px; display: inline-block; } #g-traffic-live #traffic-dialog .prediction-model .prediction-list .list-content .status.low { color: #55c836; } #g-traffic-live #traffic-dialog .prediction-model .prediction-list .list-content .status.middle { color: #ffbc3c; } #g-traffic-live #traffic-dialog .prediction-model .prediction-list .list-content .status.high { color: #ff3c3c; } #g-traffic-live #traffic-dialog .data-head { display: flex; justify-content: space-between; font-size: 16px; line-height: 24px; margin-bottom: 6px; } #g-traffic-live #traffic-dialog .data-head i { font-size: 24px; } #g-traffic-live #traffic-dialog .data-head i:hover { color: #1b76c4; cursor: pointer; } #g-traffic-live #traffic-dialog .data-info { display: flex; justify-content: space-between; margin: 5px 0; } #g-traffic-live #traffic-dialog .data-info label, #g-traffic-live #traffic-dialog .data-info p { margin: 0; } #g-traffic-live #traffic-dialog .data-info label { display: flex; width: 200px; } #g-traffic-live #traffic-dialog .data-info.hint { position: relative; padding: 0 20px 0 40px; } #g-traffic-live #traffic-dialog .data-info svg { margin-left: 5px; color: #1b76c4; position: absolute; top: 0px; left: 0px; } #g-traffic-live #traffic-dialog .tvwall-content { width: 960px; display: flex; flex-wrap: wrap; } #g-traffic-live #traffic-dialog .tvwall-content .frame4 { width: calc((100% - 1px)/2); height: 366px; border: 1px solid #fff; position: relative; background: #ccc; } #g-traffic-live #traffic-dialog .tvwall-content .frame4 .camera-info { height: 50px; color: #fff; cursor: default; padding: 5px 20px; background: #737271; } #g-traffic-live #traffic-dialog .tvwall-content .frame4 .camera-info .camera-name { margin: 0; } #g-traffic-live #traffic-dialog .tvwall-content .frame4 .camera-info .camera-area { margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 350px; } #g-traffic-live #traffic-dialog .tvwall-content .frame4 .camera-info .heart-icon { font-size: 24px; color: #1565c0; position: absolute; top: 15px; right: 45px; } #g-traffic-live #traffic-dialog .tvwall-content .frame4 .camera-info .heart-icon:hover { color: #498ddb; cursor: pointer; } #g-traffic-live #traffic-dialog .tvwall-content .frame4 .camera-info .delete-camera-icon { font-size: 24px; position: absolute; top: 15px; right: 18px; } #g-traffic-live #traffic-dialog .tvwall-content .frame4 .camera-info .delete-camera-icon:hover { color: #CA2124; cursor: pointer; } #g-traffic-live #traffic-dialog .tvwall-content .frame4 .camera-video { width: 100%; height: calc((100% - 50px)); text-align: center; background-color: #222; } #g-traffic-live #traffic-dialog .tvwall-content .frame4 .camera-video .play-icon { position: absolute; top: calc(50% + 5px); left: calc(50% - 20px); color: #aaa; font-size: 40px; } #g-traffic-live #traffic-dialog .tvwall-content .frame4 .camera-video .play-icon:hover { color: #fff; cursor: pointer; } #g-traffic-live #traffic-dialog .tvwall-content .frame4 .camera-video iframe { border: none; } #g-traffic-live #traffic-dialog .tvwall-content .frame4 .camera-video iframe table { display: none; } #g-traffic-live #traffic-dialog .tvwall-content .frame4 .camera-video #g-its-videoPlayer { width: calc(100% - 0.5px); height: inherit; position: relative; } #g-traffic-live #traffic-dialog .tvwall-content .frame4 .camera-video #g-its-videoPlayer .hls-video-block { width: inherit; height: inherit; text-align: center; position: relative; display: flex; } #g-traffic-live #traffic-dialog .tvwall-content .frame4 .camera-video #g-its-videoPlayer .hls-video-block:before { content: ''; display: inline-block; } #g-traffic-live #traffic-dialog .tvwall-content .frame4 .camera-video #g-its-videoPlayer .hls-video-block video { display: block; vertical-align: middle; width: inherit; } #g-traffic-live #traffic-dialog .tvwall-content .frame4 .camera-video #g-its-videoPlayer .hls-video-block .loading { position: absolute; top: 0; width: inherit; color: white; height: 100%; display: flex; justify-content: center; align-items: center; } #g-traffic-live #traffic-dialog .tvwall-content .frame4 .camera-video #g-its-videoPlayer .camera-reload-mask { position: absolute; bottom: 0; right: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); cursor: pointer; display: flex; justify-content: center; align-items: center; } #g-traffic-live #traffic-dialog .tvwall-content .frame4 .camera-video #g-its-videoPlayer .camera-reload-btn { width: 50px; height: 50px; border-radius: 50%; background-color: transparent; padding: 0; color: #fff; font-size: 4rem; border: none; outline: none; cursor: pointer; display: flex; justify-content: center; align-items: center; } #g-traffic-live .google-map { width: 100%; height: 100%; } #g-traffic-live .google-map .google-marker-cluster { position: relative; width: 30px; height: 30px; line-height: 30px; background-color: #444444; border-radius: 50%; cursor: pointer; text-align: center; color: #fff; } #g-traffic-live .google-map .google-marker-cluster.active { background-color: rgba(68, 68, 68, 0.3); } #g-traffic-live .google-map .google-marker { position: relative; width: 30px; height: 30px; background-color: #5686da; border-radius: 50%; cursor: pointer; } #g-traffic-live .google-map .google-marker.low { background-color: #55c836; } #g-traffic-live .google-map .google-marker.middle { background-color: #ffbc3c; } #g-traffic-live .google-map .google-marker.high { background-color: #ff3c3c; } #g-traffic-live .google-map .google-marker .tooltip { width: 110px; padding: 4px 6px; border-radius: 9px; box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.2); border: solid 1.8px #aaa; background-color: #eee; position: absolute; top: 50px; left: -35px; z-index: 999; font-size: 14px; } #g-traffic-live .google-map .google-marker .tooltip::before { content: ''; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 10px solid #aaa; position: absolute; top: -11px; left: 46px; } #g-traffic-live .google-map .google-marker .tooltip::after { content: ''; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid #eee; position: absolute; top: -10px; left: 47px; } #g-traffic-live .google-map .google-marker .tooltip .camera-name { text-align: center; } #g-traffic-live .google-map .google-marker .tooltip .title { margin-bottom: 3px; } #g-traffic-live .google-map .google-marker .tooltip .content-row { display: flex; justify-content: space-between; width: 100%; } #g-traffic-live .google-map .google-marker .tooltip .content-row img { width: 25px; height: 25px; } #g-traffic-live .google-map .google-marker .tooltip .content-row span { height: 25px; line-height: 25px; } #g-traffic-live .google-map .google-marker .img-wrap { width: inherit; height: inherit; } #g-traffic-live .google-map .google-marker .img-wrap > img { top: calc(50% - 15px); left: calc(50% - 15px); position: absolute; } #g-traffic-live .tvwall-cart { position: absolute; bottom: 30px; right: 90px; z-index: 999; } #g-traffic-live .tvwall-cart .clear { font-size: 16px; line-height: 24px; width: 24px; height: 24px; background-color: #222; color: #fff; border-radius: 50%; position: absolute; top: -14px; right: -14px; text-align: center; } #g-traffic-live .tvwall-cart .clear:hover { cursor: pointer; background-color: #000; } #g-traffic-live .tvwall-cart .cart { width: 98px; height: 80px; padding: 10px 7px 7px; border-radius: 8px; background-color: #5686da; color: #fff; text-align: center; cursor: pointer; } #g-traffic-live .tvwall-cart .cart:hover { text-decoration: none; background-color: #1565c0; box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); } #g-traffic-live .tvwall-cart .cart .desktop { font-size: 40px; margin-top: 5px; } #g-traffic-live .tvwall-cart .cart .count { position: absolute; top: 5px; right: 15px; border-radius: 50%; background-color: red; height: 24px; width: 24px; line-height: 24px; text-align: center; } #g-cm-container .c-contextmenu { border-radius: 5px; } #g-cm-container .c-contextmenu .contextmenu { font-family: 'font-gorilla', sans-serif; font-size: 16px; } #g-cm-container .c-contextmenu .contextmenu.tvwall::before { content: "\e955"; margin-right: 5px; font-weight: 900; } #g-cm-container .c-contextmenu .contextmenu.live::before { content: '\e912'; margin-right: 5px; font-weight: 900; } #g-cm-container .c-contextmenu .contextmenu.info::before { content: '\e958'; margin-right: 5px; font-weight: 900; } #g-traffic-prediction { width: 100%; height: 100%; background: #f0f0f0; position: relative; } #g-traffic-prediction #g-traffic-prediction-tabs { margin: 13px 10px 0; height: calc(100% - 20px); } #g-traffic-prediction #g-traffic-prediction-tabs #map.tabContent { padding: unset; } #g-traffic-prediction #g-traffic-prediction-tabs #map .map-analytics { position: relative; } #g-traffic-prediction #g-traffic-prediction-tabs #map .map-analytics .left-block { position: absolute; top: 0px; left: 0px; z-index: 999; border: 1px solid #ccc; flex-grow: 1; padding: 5px 4px; overflow-y: auto; background-color: white; border-radius: 0 5px 5px 5px; margin-top: unset; } #g-traffic-prediction #g-traffic-prediction-tabs #map .map-analytics .left-block .eventType-item { padding: 5px 10px; } #g-traffic-prediction #g-traffic-prediction-tabs #map .map-analytics .left-block .eventType-item:hover { cursor: pointer; color: #5686da; } #g-traffic-prediction #g-traffic-prediction-tabs #map .map-analytics .left-block .eventType-item.disable { color: #999; } #g-traffic-prediction #g-traffic-prediction-tabs #map .map-analytics .left-block .eventType-item > span { margin-left: 5px; } #g-traffic-prediction #g-traffic-prediction-tabs #map .mapAnalytics-table { position: absolute; top: 20px; z-index: 999; border: 1px solid #bbb; background-color: #fff; border-radius: 5px; padding: 5px; right: 0; width: 350px; } #g-traffic-prediction #g-traffic-prediction-tabs #map .mapAnalytics-table.hideTable { z-index: 0; } #g-traffic-prediction #g-traffic-prediction-tabs #map .mapAnalytics-table .table-head { margin: 5px 0 10px; } #g-traffic-prediction #g-traffic-prediction-tabs #map .mapAnalytics-table section .container { height: 521px; } #g-traffic-prediction #g-traffic-prediction-tabs #map #mapAnalytics-map { width: 100%; height: 100%; } #g-traffic-prediction #g-traffic-prediction-tabs #map #mapAnalytics-map .marker-cluster { background: #32383E; border: 3px solid #ededed; border-radius: 50%; color: #ededed; height: 30px; line-height: 27px; text-align: center; width: 30px; } #g-traffic-prediction #g-traffic-prediction-tabs #map #mapAnalytics-map .its-marker { position: relative; background-color: #5686da; border-radius: 50%; cursor: pointer; border: 2px solid #fff; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.6); } #g-traffic-prediction #g-traffic-prediction-tabs #map #mapAnalytics-map .its-marker.level1 { background-color: #55c836; } #g-traffic-prediction #g-traffic-prediction-tabs #map #mapAnalytics-map .its-marker.level2 { background-color: #ffbc3c; } #g-traffic-prediction #g-traffic-prediction-tabs #map #mapAnalytics-map .its-marker.level3 { background-color: #ff3c3c; } #g-traffic-prediction #g-traffic-prediction-tabs #map #mapAnalytics-map .its-marker .icon { top: 1px; left: 1px; position: absolute; } #g-traffic-prediction #g-traffic-prediction-tabs #map #mapAnalytics-map .its-tooltip { width: 110px; padding: 4px 6px; border-radius: 9px; box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.2); border: solid 1.8px #aaa; background-color: #eee; z-index: 999; font-size: 14px; } #g-traffic-prediction #g-traffic-prediction-tabs #map #mapAnalytics-map .its-tooltip.event { width: 150px; } #g-traffic-prediction #g-traffic-prediction-tabs #map #mapAnalytics-map .its-tooltip.event.leaflet-tooltip-bottom::before { left: 73px; } #g-traffic-prediction #g-traffic-prediction-tabs #map #mapAnalytics-map .its-tooltip.event.leaflet-tooltip-bottom::after { left: 67px; } #g-traffic-prediction #g-traffic-prediction-tabs #map #mapAnalytics-map .its-tooltip.leaflet-tooltip-bottom::before { content: ''; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid #aaa; position: absolute; top: -6px; left: 53px; } #g-traffic-prediction #g-traffic-prediction-tabs #map #mapAnalytics-map .its-tooltip.leaflet-tooltip-bottom::after { content: ''; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid #eee; position: absolute; top: -10px; left: 47px; } #g-traffic-prediction #g-traffic-prediction-tabs #map #mapAnalytics-map .its-tooltip .camera-name { text-align: center; white-space: normal; } #g-traffic-prediction #g-traffic-prediction-tabs #map #mapAnalytics-map .its-tooltip .title { margin-bottom: 3px; } #g-traffic-prediction #g-traffic-prediction-tabs #map #mapAnalytics-map .its-tooltip .content-row { display: flex; justify-content: space-between; width: 100%; } #g-traffic-prediction #g-traffic-prediction-tabs #map #mapAnalytics-map .its-tooltip .content-row img { width: 25px; height: 25px; } #g-traffic-prediction #g-traffic-prediction-tabs #map #mapAnalytics-map .its-tooltip .content-row span { height: 25px; line-height: 25px; } #g-traffic-prediction #g-traffic-prediction-tabs.c-tabs > .tabContent { border: 1px solid #bbb; flex-grow: 1; display: flex; position: relative; padding: 5px 4px; overflow-y: auto; background-color: white; border-radius: 0 5px 5px 5px; margin-top: unset; } #g-traffic-prediction #g-traffic-prediction-tabs.c-tabs > .tabContent::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 15px; background-color: #ccc; } #g-traffic-prediction #g-traffic-prediction-tabs.c-tabs > .tabContent::-webkit-scrollbar { border-radius: 17px; width: 7px; height: 6px; background-color: #ccc; } #g-traffic-prediction #g-traffic-prediction-tabs.c-tabs > .tabContent::-webkit-scrollbar-thumb { border-radius: 13px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #313a3e; } #g-traffic-prediction #g-traffic-prediction-tabs.c-tabs > .tabContent .c-border { height: unset; overflow: auto; } #g-traffic-prediction #g-traffic-prediction-tabs.c-tabs > .tabContent .c-border::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 15px; background-color: #ccc; } #g-traffic-prediction #g-traffic-prediction-tabs.c-tabs > .tabContent .c-border::-webkit-scrollbar { border-radius: 17px; width: 7px; height: 6px; background-color: #ccc; } #g-traffic-prediction #g-traffic-prediction-tabs.c-tabs > .tabContent .c-border::-webkit-scrollbar-thumb { border-radius: 13px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #313a3e; } #g-traffic-prediction #g-traffic-prediction-tabs.c-tabs > .menu { display: flex; flex-grow: 0; flex-shrink: 0; flex-wrap: wrap; margin-bottom: -1px; border-bottom: unset; } #g-traffic-prediction #g-traffic-prediction-tabs.c-tabs > .menu li { background-color: #5686da; color: #fff; margin-right: 5px; } #g-traffic-prediction #g-traffic-prediction-tabs.c-tabs > .menu li.current { background-color: #fff; cursor: default; color: #313a3e; border: 1px solid #bbb; border-bottom: 0; z-index: 2; } #g-traffic-prediction #g-traffic-prediction-tabs section .container { width: 100%; height: 168px; } #g-traffic-prediction #g-traffic-prediction-tabs section .container::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 15px; background-color: #ccc; } #g-traffic-prediction #g-traffic-prediction-tabs section .container::-webkit-scrollbar { border-radius: 17px; width: 7px; height: 6px; background-color: #ccc; } #g-traffic-prediction #g-traffic-prediction-tabs section .container::-webkit-scrollbar-thumb { border-radius: 13px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #313a3e; } #g-traffic-prediction #g-traffic-prediction-tabs section .c-table .sequence { width: 45px; } #g-traffic-prediction #g-traffic-prediction-tabs section .c-table .speed { width: 150px; } #g-traffic-prediction #g-traffic-prediction-tabs section .c-table .location, #g-traffic-prediction #g-traffic-prediction-tabs section .c-table .modifiedAt { width: calc(100% * 0.3); } #g-traffic-prediction #g-traffic-prediction-tabs section .c-table .congestionStatus { width: 120px; } #g-traffic-prediction #g-traffic-prediction-tabs section .c-table .congestionStatus .low { color: #55c836; } #g-traffic-prediction #g-traffic-prediction-tabs section .c-table .congestionStatus .middle { color: #ffbc3c; } #g-traffic-prediction #g-traffic-prediction-tabs section .c-table .congestionStatus .high { color: #ff3c3c; } #g-traffic-prediction #g-traffic-prediction-tabs section .c-table .name { width: 130px; } #g-traffic-prediction #g-traffic-prediction-tabs section .c-table .estVisitDuration { width: calc(100% * 0.25); } #g-traffic-prediction #g-traffic-prediction-tabs section .c-table .deliverType { width: 100px; } #g-traffic-prediction #g-traffic-prediction-tabs section .c-table .trailerLineQty, #g-traffic-prediction #g-traffic-prediction-tabs section .c-table .estLineDuration { width: 170px; } #g-traffic-prediction #g-traffic-prediction-tabs section .c-table .deliverType-div { width: 79px; text-align: center; } #g-traffic-prediction #g-traffic-prediction-tabs section .c-table .lineQty-div { width: 140px; text-align: center; } #g-traffic-prediction #g-traffic-prediction-tabs section .c-table .duration-div, #g-traffic-prediction #g-traffic-prediction-tabs section .c-table .speed-div { width: 110px; text-align: center; } #g-traffic-prediction #g-traffic-prediction-tabs section .c-table .icon-block { font-size: 18px; } #g-traffic-prediction #g-traffic-prediction-tabs section .c-table .icon-block a { margin-right: 12px; } #g-traffic-prediction #g-traffic-prediction-tabs section .c-table .icon-block a.delete:hover { color: #CA2124; } #g-traffic-prediction #g-traffic-prediction-tabs section .c-table .icon-block a:hover { color: #1b76c4; } #g-traffic-prediction #g-traffic-prediction-tabs section .c-table > tbody > tr { height: 35px; } #g-traffic-prediction #g-traffic-prediction-tabs #g-live-traffic section .container { min-width: 835px; } #g-traffic-prediction #g-traffic-prediction-tabs #g-traffic-terminals section .container { min-width: 850px; } #g-traffic-prediction #g-traffic-prediction-tabs #g-traffic-gates section .container { min-width: 450px; } #g-traffic-prediction #g-traffic-prediction-tabs #g-live-traffic, #g-traffic-prediction #g-traffic-prediction-tabs #g-traffic-terminals, #g-traffic-prediction #g-traffic-prediction-tabs #g-traffic-gates { display: flex; } #g-traffic-prediction #g-traffic-prediction-tabs #g-live-traffic .info-card, #g-traffic-prediction #g-traffic-prediction-tabs #g-traffic-terminals .info-card, #g-traffic-prediction #g-traffic-prediction-tabs #g-traffic-gates .info-card { width: calc(100% * 0.6); height: 259px; } #g-traffic-prediction #g-traffic-prediction-tabs #g-live-traffic .info-card.fullScreen, #g-traffic-prediction #g-traffic-prediction-tabs #g-traffic-terminals .info-card.fullScreen, #g-traffic-prediction #g-traffic-prediction-tabs #g-traffic-gates .info-card.fullScreen { height: calc(100% - 80px); width: calc(100% - 310px); } #g-traffic-prediction #g-traffic-prediction-tabs #g-live-traffic .info-card.fullScreen.closeSideMenu, #g-traffic-prediction #g-traffic-prediction-tabs #g-traffic-terminals .info-card.fullScreen.closeSideMenu, #g-traffic-prediction #g-traffic-prediction-tabs #g-traffic-gates .info-card.fullScreen.closeSideMenu { width: calc(100% - 60px); } #g-traffic-prediction #g-traffic-prediction-tabs #g-live-traffic .info-card .card-content .chart, #g-traffic-prediction #g-traffic-prediction-tabs #g-traffic-terminals .info-card .card-content .chart, #g-traffic-prediction #g-traffic-prediction-tabs #g-traffic-gates .info-card .card-content .chart { width: 100%; height: 100%; } #g-traffic-prediction #g-traffic-prediction-tabs #g-live-traffic .live-traffic, #g-traffic-prediction #g-traffic-prediction-tabs #g-traffic-terminals .live-traffic, #g-traffic-prediction #g-traffic-prediction-tabs #g-traffic-gates .live-traffic { width: 100%; margin-right: 20px; } #g-traffic-prediction #g-traffic-prediction-tabs #g-live-traffic .live-traffic section, #g-traffic-prediction #g-traffic-prediction-tabs #g-traffic-terminals .live-traffic section, #g-traffic-prediction #g-traffic-prediction-tabs #g-traffic-gates .live-traffic section { overflow: auto; } #g-traffic-prediction #g-traffic-prediction-tabs #g-live-traffic .live-traffic section::-webkit-scrollbar-track, #g-traffic-prediction #g-traffic-prediction-tabs #g-traffic-terminals .live-traffic section::-webkit-scrollbar-track, #g-traffic-prediction #g-traffic-prediction-tabs #g-traffic-gates .live-traffic section::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 15px; background-color: #ccc; } #g-traffic-prediction #g-traffic-prediction-tabs #g-live-traffic .live-traffic section::-webkit-scrollbar, #g-traffic-prediction #g-traffic-prediction-tabs #g-traffic-terminals .live-traffic section::-webkit-scrollbar, #g-traffic-prediction #g-traffic-prediction-tabs #g-traffic-gates .live-traffic section::-webkit-scrollbar { border-radius: 17px; width: 7px; height: 6px; background-color: #ccc; } #g-traffic-prediction #g-traffic-prediction-tabs #g-live-traffic .live-traffic section::-webkit-scrollbar-thumb, #g-traffic-prediction #g-traffic-prediction-tabs #g-traffic-terminals .live-traffic section::-webkit-scrollbar-thumb, #g-traffic-prediction #g-traffic-prediction-tabs #g-traffic-gates .live-traffic section::-webkit-scrollbar-thumb { border-radius: 13px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #313a3e; } #g-traffic-prediction #g-traffic-prediction-tabs #g-live-traffic .live-traffic .live-traffic-table-bottom, #g-traffic-prediction #g-traffic-prediction-tabs #g-traffic-terminals .live-traffic .live-traffic-table-bottom, #g-traffic-prediction #g-traffic-prediction-tabs #g-traffic-gates .live-traffic .live-traffic-table-bottom { display: flex; justify-content: space-between; } #g-traffic-prediction #g-traffic-prediction-tabs #g-live-traffic .live-traffic .live-traffic-table-bottom .dataSource-selector, #g-traffic-prediction #g-traffic-prediction-tabs #g-traffic-terminals .live-traffic .live-traffic-table-bottom .dataSource-selector, #g-traffic-prediction #g-traffic-prediction-tabs #g-traffic-gates .live-traffic .live-traffic-table-bottom .dataSource-selector { flex-direction: unset; margin-left: 20px; } #g-traffic-prediction #g-traffic-prediction-tabs .mb9 { margin-bottom: 9px; } #g-traffic-prediction #g-traffic-prediction-tabs #g-traffic-prediction-statistics .container { height: calc(100vh - 183px); } #g-traffic-prediction #g-statistics-terminal-export .messageType .MuiFormControl-root, #g-traffic-prediction #g-statistics-terminal-export .description textarea, #g-traffic-prediction #g-statistics-terminal-export .title input { width: 240px; } #g-traffic-prediction #g-statistics-terminal-export .pure-form-aligned .pure-control-group .c-date-picker .MuiOutlinedInput-adornedEnd { padding-right: unset; } #g-traffic-prediction #g-statistics-terminal-export .pure-form-aligned .pure-control-group .c-date-picker .MuiInputBase-input { width: 240px; height: 32px; } #g-traffic-prediction #g-statistics-terminal-export .content button { width: 100px; height: 40px; padding: 5px 12px 5px 10px; border-radius: 8px; box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.15); color: #fff; background-color: #5686da; display: block; } #g-traffic-prediction #g-statistics-terminal-export .content button:hover { text-decoration: none; background-color: #1565c0; box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); } #g-traffic-prediction #g-statistics-terminal-export .content button.disable:hover { box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.15); background-color: #5686da; cursor: not-allowed; } #g-traffic-prediction .MuiTablePagination-root button[disabled], #g-traffic-prediction .pure-button[disabled] { border: unset; } #g-traffic-statistic { width: 100%; height: 100%; background: #f0f0f0; position: relative; } #g-traffic-statistic .traffic-statistic-headBar { width: 495px; margin: 5px auto 0px; display: flex; } #g-traffic-statistic .traffic-statistic-headBar .flatpickr-input { background: #fff; height: 33px; width: 95px; } #g-traffic-statistic .traffic-statistic-headBar .date-range-label { margin-right: 5px; } #g-traffic-statistic .traffic-statistic-headBar .button { background-color: #5686da; width: 83px; height: 33px; padding: 0 5px; } #g-traffic-statistic .traffic-statistic-headBar .button:hover { background-color: #1565c0; } #g-traffic-statistic .statistic-content { margin: 13px 10px 0; background: #fff; border: 1px solid #bbb; border-radius: 5px; padding: 5px; height: calc(100vh - 140px); overflow-y: auto; } #g-traffic-statistic .statistic-content::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 15px; background-color: #ccc; } #g-traffic-statistic .statistic-content::-webkit-scrollbar { border-radius: 17px; width: 7px; height: 6px; background-color: #ccc; } #g-traffic-statistic .statistic-content::-webkit-scrollbar-thumb { border-radius: 13px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #313a3e; } #g-traffic-statistic .statistic-content .analytics-chart-card { width: 100%; margin-bottom: 10px; } #g-traffic-statistic .statistic-content .analytics-chart-card.fullScreen { z-index: 999; width: calc(100% - 310px); } #g-traffic-statistic .statistic-content .analytics-chart-card.fullScreen.closeSideMenu { width: calc(100% - 60px); } #g-traffic-statistic .statistic-content .analytics-chart-card .card-content { height: calc(100% - 10px); } #g-traffic-statistic .statistic-content .analytics-chart-card .card-content .chart { height: inherit; } #g-traffic-statistic .chart-card-info { display: flex; justify-content: space-between; margin-bottom: 10px; } #g-traffic-statistic .chart-card-info .chart { height: 100%; } #g-traffic-statistic .chart-card-info .info-card { width: 50%; } #g-traffic-statistic .chart-card-info .info-card:first-child { margin-right: 5px; } #g-traffic-statistic .chart-card-info .info-card.fullScreen { z-index: 999; width: calc(100% - 310px); } #g-traffic-statistic .chart-card-info .info-card.fullScreen.closeSideMenu { width: calc(100% - 60px); } #g-traffic-statistic .chart-card-info #area-total-change-chart div, #g-traffic-statistic .chart-card-info #terminal-parking-count-chart div { z-index: 998; } #g-traffic-statistic .heatMap { width: 100%; } #g-traffic-statistic .heatMap.fullScreen { z-index: 999; width: calc(100% - 310px); } #g-traffic-statistic .heatMap.fullScreen.closeSideMenu { width: calc(100% - 60px); } #g-traffic-statistic #heatmap-map { width: 100%; height: 100%; } #g-user-management { width: 100%; height: 100%; background: #f0f0f0; position: relative; } #g-user-management .userManagement-headBar { height: 45px; padding-right: 10px; position: absolute; top: 0; right: 0; z-index: 10; } #g-user-management .userManagement-headBar .icon { line-height: 45px; font-size: 20px; margin: 0 5px; width: 25px; } #g-user-management .userManagement-headBar .icon:hover { color: #1b76c4; } #g-user-management #g-user-management-tabs { margin: 13px 10px 0; height: calc(100% - 20px); } #g-user-management #g-user-management-tabs #userRights, #g-user-management #g-user-management-tabs #userAccounts { display: block; } #g-user-management #g-user-management-tabs.c-tabs > .tabContent { border: 1px solid #bbb; flex-grow: 1; display: flex; position: relative; padding: 5px 4px; overflow-y: auto; background-color: white; border-radius: 0 5px 5px 5px; margin-top: unset; } #g-user-management #g-user-management-tabs.c-tabs > .tabContent .c-border { height: unset; overflow: auto; } #g-user-management #g-user-management-tabs.c-tabs > .tabContent .c-border::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 15px; background-color: #ccc; } #g-user-management #g-user-management-tabs.c-tabs > .tabContent .c-border::-webkit-scrollbar { border-radius: 17px; width: 7px; height: 6px; background-color: #ccc; } #g-user-management #g-user-management-tabs.c-tabs > .tabContent .c-border::-webkit-scrollbar-thumb { border-radius: 13px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #313a3e; } #g-user-management #g-user-management-tabs.c-tabs > .menu { display: flex; flex-grow: 0; flex-shrink: 0; flex-wrap: wrap; margin-bottom: -1px; border-bottom: unset; } #g-user-management #g-user-management-tabs.c-tabs > .menu li { background-color: #5686da; color: #fff; margin-right: 5px; } #g-user-management #g-user-management-tabs.c-tabs > .menu li.current { background-color: #fff; cursor: default; color: #313a3e; border: 1px solid #bbb; border-bottom: 0; z-index: 2; } #g-user-management #g-user-management-tabs #userRights .c-table .selector { text-align: left; width: 20px; } #g-user-management #g-user-management-tabs #userRights .c-table .sequence { width: 50px; } #g-user-management #g-user-management-tabs #userRights .c-table .roleName { width: 200px; } #g-user-management #g-user-management-tabs #userRights .c-table .more { width: 100px; } #g-user-management #g-user-management-tabs section .container { min-width: 1200px; height: calc(100vh - 280px); } #g-user-management #g-user-management-tabs section .container::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 15px; background-color: #ccc; } #g-user-management #g-user-management-tabs section .container::-webkit-scrollbar { border-radius: 17px; width: 7px; height: 6px; background-color: #ccc; } #g-user-management #g-user-management-tabs section .container::-webkit-scrollbar-thumb { border-radius: 13px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #313a3e; } #g-user-management #g-user-management-tabs section .c-table .selector { text-align: left; width: 20px; } #g-user-management #g-user-management-tabs section .c-table .sequence { width: 40px; } #g-user-management #g-user-management-tabs section .c-table .username { width: calc(100% * 0.09); } #g-user-management #g-user-management-tabs section .c-table .name { width: calc(100% * 0.08); } #g-user-management #g-user-management-tabs section .c-table .mobilePhone { width: calc(100% * 0.09); } #g-user-management #g-user-management-tabs section .c-table .email { width: calc(100% * 0.12); } #g-user-management #g-user-management-tabs section .c-table .unit, #g-user-management #g-user-management-tabs section .c-table .accountGroupName, #g-user-management #g-user-management-tabs section .c-table .terminal, #g-user-management #g-user-management-tabs section .c-table .terminalRights, #g-user-management #g-user-management-tabs section .c-table .isEnabled { width: 120px; } #g-user-management #g-user-management-tabs section .c-table .roleName { width: calc(100% * 0.3); } #g-user-management #g-user-management-tabs section .c-table .more { width: 100px; } #g-user-management #g-user-management-tabs section .c-table .icon-block { font-size: 18px; } #g-user-management #g-user-management-tabs section .c-table .icon-block a { margin-right: 12px; } #g-user-management #g-user-management-tabs section .c-table .icon-block a.delete:hover { color: #CA2124; } #g-user-management #g-user-management-tabs section .c-table .icon-block a:hover { color: #1b76c4; } #g-user-management #g-user-management-tabs section .c-table > tbody > tr { height: 35px; cursor: default; } #g-user-management .MuiTablePagination-root { border: 1px solid #d9d9d9; margin-top: -2px; border-top: 0; } #g-user-management .footer { width: 100%; margin-top: 5px; } #g-user-management .footer .button { float: right; width: 140px; height: 40px; padding: 5px 12px 5px 10px; border-radius: 8px; box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.15); color: #fff; background-color: #ce4b4d; } #g-user-management .footer .button:hover { text-decoration: none; background-color: #ca2124; box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12); } #g-user-management .footer button[disabled]:hover { background-color: #ce4b4d; cursor: not-allowed; box-shadow: unset; } #g-user-management button[disabled], #g-user-management .pure-button[disabled] { border: unset; } #g-user-management #g-user-edit-dialog { width: 600px; } #g-user-management #g-user-edit-dialog .pure-form-aligned .pure-control-group > label { width: 7em; } #g-user-management #g-user-edit-dialog .pure-form-aligned .pure-control-group > input { width: 430px; } #g-user-management #g-user-edit-dialog .pure-form-aligned .unit > label, #g-user-management #g-user-edit-dialog .pure-form-aligned .name > label, #g-user-management #g-user-edit-dialog .pure-form-aligned .mobilePhone > label { width: 7em; } #g-user-management #g-user-edit-dialog .pure-form-aligned .unit > input, #g-user-management #g-user-edit-dialog .pure-form-aligned .name > input, #g-user-management #g-user-edit-dialog .pure-form-aligned .mobilePhone > input { width: 157px; } #g-user-management #g-user-edit-dialog .pure-form-aligned .terminals > .c-checkbox-group { flex-direction: inherit; } #g-user-management #g-user-edit-dialog .pure-form-aligned .terminals > .c-checkbox-group label { width: 109px; text-align: left; cursor: pointer; } #g-user-management #g-user-edit-dialog .pure-form-aligned .selected-all-terminal .selectedAll > span, #g-user-management #g-user-edit-dialog .pure-form-aligned .isBindAllLogistics .selectedAll > span { width: 20px; height: 22px; } #g-user-management #g-user-edit-dialog .pure-form-aligned .selected-all-terminal .selectedAll > label, #g-user-management #g-user-edit-dialog .pure-form-aligned .isBindAllLogistics .selectedAll > label { width: unset; margin-left: 5px; } #g-user-management #g-user-edit-dialog .pure-form-aligned .content { flex-direction: row; align-content: flex-start; flex-wrap: wrap; display: flex; } #g-user-management #g-user-edit-dialog .pure-form-aligned .content .createdByName div, #g-user-management #g-user-edit-dialog .pure-form-aligned .content .createdAt div { width: 157px; height: 32px; line-height: 32px; } #g-user-management #g-user-edit-dialog #g-user-edit-content { flex-flow: column nowrap; } #g-user-management #g-user-edit-dialog #g-user-edit-content::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 15px; background-color: #ccc; } #g-user-management #g-user-edit-dialog #g-user-edit-content::-webkit-scrollbar { border-radius: 17px; width: 7px; height: 6px; background-color: #ccc; } #g-user-management #g-user-edit-dialog #g-user-edit-content::-webkit-scrollbar-thumb { border-radius: 13px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #313a3e; } #g-user-management #g-user-edit-dialog #g-user-edit-content .content #ms-terminals, #g-user-management #g-user-edit-dialog #g-user-edit-content .content #ms-logistics { width: 430px; } #g-user-management #g-user-edit-dialog #g-user-edit-content .g-user-edit-content-footer { color: #0275d8; margin-top: 10px; } #g-user-management #g-rights-edit-content::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 15px; background-color: #ccc; } #g-user-management #g-rights-edit-content::-webkit-scrollbar { border-radius: 17px; width: 7px; height: 6px; background-color: #ccc; } #g-user-management #g-rights-edit-content::-webkit-scrollbar-thumb { border-radius: 13px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #313a3e; } #g-user-management #g-rights-edit-content .content { width: 500px; } #g-user-management #g-rights-edit-content .content label { width: 5em; } #g-user-management #g-rights-edit-content .content .rights { display: block; padding: 0 15px; } #g-user-management #g-rights-edit-content .content .rights .title { margin: 0 0 10px; } #g-user-management #g-rights-edit-content .content .rights .c-border { width: 100%; } #g-user-management #g-rights-edit-content .content .rights .c-border section { width: 100%; } #g-user-management #g-rights-edit-content .content .rights .c-border section .container::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 15px; background-color: #ccc; } #g-user-management #g-rights-edit-content .content .rights .c-border section .container::-webkit-scrollbar { border-radius: 17px; width: 7px; height: 6px; background-color: #ccc; } #g-user-management #g-rights-edit-content .content .rights .c-border section .container::-webkit-scrollbar-thumb { border-radius: 13px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #313a3e; } #g-user-management #g-rights-edit-content .content .rights .c-border section .evms, #g-user-management #g-rights-edit-content .content .rights .c-border section .web { width: 60px; text-align: center; } #g-user-management #g-rights-edit-content .content .rights > label { width: 0; margin: 0; } #g-vessels-dashboard { width: 100%; height: 100%; background: #f0f0f0; position: relative; } #g-vessels-dashboard .vessels-dashboard-table { margin: 13px 10px 0; background: #fff; border: 1px solid #bbb; border-radius: 5px; padding: 5px; } #g-vessels-dashboard .vessels-dashboard-table .table-head { margin-bottom: 5px; display: flex; justify-content: space-between; } #g-vessels-dashboard .vessels-dashboard-table .table-head .title { display: inline-block; width: 300px; vertical-align: middle; } #g-vessels-dashboard .vessels-dashboard-table .table-head .selector { display: inline-block; } #g-vessels-dashboard .vessels-dashboard-table .table-head .selector .terminals-dropdown { width: 200px; } #g-vessels-dashboard .vessels-dashboard-table .table-head .selector > label { line-height: 35px; } #g-vessels-dashboard .vessels-dashboard-table .c-border { height: unset; overflow: auto; } #g-vessels-dashboard .vessels-dashboard-table section .container { min-width: 1100px; height: calc(100vh - 240px); } #g-vessels-dashboard .vessels-dashboard-table section .container::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); border-radius: 15px; background-color: #ccc; } #g-vessels-dashboard .vessels-dashboard-table section .container::-webkit-scrollbar { border-radius: 17px; width: 7px; height: 6px; background-color: #ccc; } #g-vessels-dashboard .vessels-dashboard-table section .container::-webkit-scrollbar-thumb { border-radius: 13px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #313a3e; } #g-vessels-dashboard .vessels-dashboard-table section .c-table .sequence { width: 60px; } #g-vessels-dashboard .vessels-dashboard-table section .c-table .terminalName { min-width: 110px; } #g-vessels-dashboard .vessels-dashboard-table section .c-table .berthName, #g-vessels-dashboard .vessels-dashboard-table section .c-table .chtName, #g-vessels-dashboard .vessels-dashboard-table section .c-table .enName { min-width: 90px; } #g-vessels-dashboard .vessels-dashboard-table section .c-table .moveType { min-width: 135px; } #g-vessels-dashboard .vessels-dashboard-table section .c-table .moveType .data-moteTpye { display: flex; } #g-vessels-dashboard .vessels-dashboard-table section .c-table .moveType .data-moteTpye svg { margin-left: 5px; color: #5686da; } #g-vessels-dashboard .vessels-dashboard-table section .c-table .berthTime { min-width: 190px; } #g-vessels-dashboard .vessels-dashboard-table section .c-table .berthTime span { margin-left: 5px; } #g-vessels-dashboard .vessels-dashboard-table section .c-table .estUnberthTime { min-width: 190px; } #g-vessels-dashboard .vessels-dashboard-table section .c-table .estUnberthTime span { margin-left: 5px; } #g-vessels-dashboard .vessels-dashboard-table section .c-table > tbody > tr { height: 35px; } #g-vessels-dashboard .page-nav { justify-content: center; margin-top: 7px; } #g-vessels-dashboard button[disabled], #g-vessels-dashboard .pure-button[disabled] { border: unset; } #g-pop-video-player { z-index: 996; } #g-pop-video-player-content.content { display: block; } #g-pop-video-player-content .video-player-container, #g-pop-video-player-content .monitoring-group { overflow: hidden; background: #000; } #g-pop-video-player-content .video-player-container .basic, #g-pop-video-player-content .monitoring-group .basic, #g-pop-video-player-content .video-player-container.basic, #g-pop-video-player-content .monitoring-group.basic { width: calc(100vw - 145px); height: calc(100vh - 175px); display: flex; flex-wrap: wrap; } #g-pop-video-player-content .video-player-container .basic .videoPlayer-frame, #g-pop-video-player-content .monitoring-group .basic .videoPlayer-frame, #g-pop-video-player-content .video-player-container.basic .videoPlayer-frame, #g-pop-video-player-content .monitoring-group.basic .videoPlayer-frame { background-color: #000; width: calc(100vw - 145px); height: calc(100vh - 295px); } #g-pop-video-player-content .video-player-container .basic .videoPlayer-frame.full-screen, #g-pop-video-player-content .monitoring-group .basic .videoPlayer-frame.full-screen, #g-pop-video-player-content .video-player-container.basic .videoPlayer-frame.full-screen, #g-pop-video-player-content .monitoring-group.basic .videoPlayer-frame.full-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; } #g-pop-video-player-content .video-player-container .basic .videoPlayer-frame .v-background, #g-pop-video-player-content .monitoring-group .basic .videoPlayer-frame .v-background, #g-pop-video-player-content .video-player-container.basic .videoPlayer-frame .v-background, #g-pop-video-player-content .monitoring-group.basic .videoPlayer-frame .v-background { width: inherit; height: inherit; position: relative; background-color: #000; } #g-pop-video-player-content .video-player-container .basic .videoPlayer-frame .v-background .icon-fullscreen_exit, #g-pop-video-player-content .monitoring-group .basic .videoPlayer-frame .v-background .icon-fullscreen_exit, #g-pop-video-player-content .video-player-container.basic .videoPlayer-frame .v-background .icon-fullscreen_exit, #g-pop-video-player-content .monitoring-group.basic .videoPlayer-frame .v-background .icon-fullscreen_exit { z-index: 2; right: 9px; top: 9px; cursor: pointer; border-radius: 50%; background-color: rgba(255, 255, 255, 0.46); width: 30px; height: 30px; position: absolute; font-size: 16px; } #g-pop-video-player-content .video-player-container .basic .videoPlayer-frame .v-background .icon-fullscreen_exit:hover, #g-pop-video-player-content .monitoring-group .basic .videoPlayer-frame .v-background .icon-fullscreen_exit:hover, #g-pop-video-player-content .video-player-container.basic .videoPlayer-frame .v-background .icon-fullscreen_exit:hover, #g-pop-video-player-content .monitoring-group.basic .videoPlayer-frame .v-background .icon-fullscreen_exit:hover { cursor: pointer; background-color: rgba(255, 255, 255, 0.8); } #g-pop-video-player-content .video-player-container .basic .videoPlayer-frame .v-background .cameraName, #g-pop-video-player-content .monitoring-group .basic .videoPlayer-frame .v-background .cameraName, #g-pop-video-player-content .video-player-container.basic .videoPlayer-frame .v-background .cameraName, #g-pop-video-player-content .monitoring-group.basic .videoPlayer-frame .v-background .cameraName { color: #fff; position: absolute; left: 50%; transform: translate(-50%, 0); z-index: 2; background: rgba(0, 0, 0, 0.7); } #g-pop-video-player-content .video-player-container .basic .videoPlayer-frame .loading, #g-pop-video-player-content .monitoring-group .basic .videoPlayer-frame .loading, #g-pop-video-player-content .video-player-container.basic .videoPlayer-frame .loading, #g-pop-video-player-content .monitoring-group.basic .videoPlayer-frame .loading { position: absolute; width: inherit; height: inherit; z-index: 1; color: white; } #g-pop-video-player-content .video-player-container .basic .videoPlayer-frame .loading > i, #g-pop-video-player-content .monitoring-group .basic .videoPlayer-frame .loading > i, #g-pop-video-player-content .video-player-container.basic .videoPlayer-frame .loading > i, #g-pop-video-player-content .monitoring-group.basic .videoPlayer-frame .loading > i, #g-pop-video-player-content .video-player-container .basic .videoPlayer-frame .loading span, #g-pop-video-player-content .monitoring-group .basic .videoPlayer-frame .loading span, #g-pop-video-player-content .video-player-container.basic .videoPlayer-frame .loading span, #g-pop-video-player-content .monitoring-group.basic .videoPlayer-frame .loading span { position: absolute; top: calc(50% - 20px); left: calc(50% - 20px); transform: translate(-50%, -50%); } #g-pop-video-player-content .video-player-container .basic .videoPlayer-frame .videoTool, #g-pop-video-player-content .monitoring-group .basic .videoPlayer-frame .videoTool, #g-pop-video-player-content .video-player-container.basic .videoPlayer-frame .videoTool, #g-pop-video-player-content .monitoring-group.basic .videoPlayer-frame .videoTool { z-index: 99; position: absolute; left: calc(50%); min-width: 66px; bottom: 2%; background: rgba(51, 51, 51, 0.6); color: white; border-radius: 3px; display: flex; justify-content: center; align-items: center; transform: translate(-50%, 0%); width: auto; height: auto; } #g-pop-video-player-content .video-player-container .basic .videoPlayer-frame .videoTool .snpshotTool, #g-pop-video-player-content .monitoring-group .basic .videoPlayer-frame .videoTool .snpshotTool, #g-pop-video-player-content .video-player-container.basic .videoPlayer-frame .videoTool .snpshotTool, #g-pop-video-player-content .monitoring-group.basic .videoPlayer-frame .videoTool .snpshotTool { position: relative; font-size: 18px; padding: 3px 7px 3px 7px; z-index: 99; border-radius: 3px; } #g-pop-video-player-content .video-player-container .basic .videoPlayer-frame .videoTool .snpshotTool:hover, #g-pop-video-player-content .monitoring-group .basic .videoPlayer-frame .videoTool .snpshotTool:hover, #g-pop-video-player-content .video-player-container.basic .videoPlayer-frame .videoTool .snpshotTool:hover, #g-pop-video-player-content .monitoring-group.basic .videoPlayer-frame .videoTool .snpshotTool:hover { background: #b4b4b4; } #g-pop-video-player-content .video-player-container .basic .videoPlayer-frame .error, #g-pop-video-player-content .monitoring-group .basic .videoPlayer-frame .error, #g-pop-video-player-content .video-player-container.basic .videoPlayer-frame .error, #g-pop-video-player-content .monitoring-group.basic .videoPlayer-frame .error { width: inherit; height: inherit; z-index: 1; color: #999; } #g-pop-video-player-content .video-player-container .basic .videoPlayer-frame .error span, #g-pop-video-player-content .monitoring-group .basic .videoPlayer-frame .error span, #g-pop-video-player-content .video-player-container.basic .videoPlayer-frame .error span, #g-pop-video-player-content .monitoring-group.basic .videoPlayer-frame .error span { position: absolute; top: calc(50%); left: calc(50%); transform: translate(-50%, -50%); font-size: 2em; } #g-pop-video-player-content .video-player-container .basic .videoPlayer-frame video, #g-pop-video-player-content .monitoring-group .basic .videoPlayer-frame video, #g-pop-video-player-content .video-player-container.basic .videoPlayer-frame video, #g-pop-video-player-content .monitoring-group.basic .videoPlayer-frame video { width: 100%; height: 100%; text-align: center; } #g-pop-video-player-content .video-player-container .basic .videoPlayer-frame canvas, #g-pop-video-player-content .monitoring-group .basic .videoPlayer-frame canvas, #g-pop-video-player-content .video-player-container.basic .videoPlayer-frame canvas, #g-pop-video-player-content .monitoring-group.basic .videoPlayer-frame canvas { position: relative; margin: 0px; padding: 0px 0px; width: 100%; height: 100%; } #g-pop-video-player-content .video-player-container .basic .tvwall_frame, #g-pop-video-player-content .monitoring-group .basic .tvwall_frame, #g-pop-video-player-content .video-player-container.basic .tvwall_frame, #g-pop-video-player-content .monitoring-group.basic .tvwall_frame { position: relative; width: 100%; height: 100%; } #g-pop-video-player-content .video-player-container .basic .tvwall_frame .title, #g-pop-video-player-content .monitoring-group .basic .tvwall_frame .title, #g-pop-video-player-content .video-player-container.basic .tvwall_frame .title, #g-pop-video-player-content .monitoring-group.basic .tvwall_frame .title { position: absolute; background: rgba(0, 0, 0, 0.7); color: #fff; padding: 5px 10px; font-size: 15px; z-index: 99; left: 50%; transform: translate(-50%, 0); white-space: nowrap; } #g-pop-video-player-content .video-player-container .basic .tvwall_frame .report, #g-pop-video-player-content .monitoring-group .basic .tvwall_frame .report, #g-pop-video-player-content .video-player-container.basic .tvwall_frame .report, #g-pop-video-player-content .monitoring-group.basic .tvwall_frame .report { position: absolute; right: 0; background: red; color: #fff; padding: 5px 10px; font-size: 15px; z-index: 99; cursor: pointer; } #g-pop-video-player-content .video-player-container .basic .tvwall_frame .v-background, #g-pop-video-player-content .monitoring-group .basic .tvwall_frame .v-background, #g-pop-video-player-content .video-player-container.basic .tvwall_frame .v-background, #g-pop-video-player-content .monitoring-group.basic .tvwall_frame .v-background { position: relative; width: 100%; height: 100%; background-color: #000; } #g-pop-video-player-content .video-player-container .basic .tvwall_frame .v-background > div, #g-pop-video-player-content .monitoring-group .basic .tvwall_frame .v-background > div, #g-pop-video-player-content .video-player-container.basic .tvwall_frame .v-background > div, #g-pop-video-player-content .monitoring-group.basic .tvwall_frame .v-background > div { width: 100%; height: 100%; } #g-pop-video-player-content .video-player-container .basic .tvwall_frame .v-background .video-overlay, #g-pop-video-player-content .monitoring-group .basic .tvwall_frame .v-background .video-overlay, #g-pop-video-player-content .video-player-container.basic .tvwall_frame .v-background .video-overlay, #g-pop-video-player-content .monitoring-group.basic .tvwall_frame .v-background .video-overlay { left: 0px; top: 0px; margin: 0px; padding: 0px 0px; color: #FFF; width: 100%; height: 100%; } #g-pop-video-player-content .video-player-container .basic .tvwall_frame .v-background .loading, #g-pop-video-player-content .monitoring-group .basic .tvwall_frame .v-background .loading, #g-pop-video-player-content .video-player-container.basic .tvwall_frame .v-background .loading, #g-pop-video-player-content .monitoring-group.basic .tvwall_frame .v-background .loading { position: absolute; z-index: 1; color: white; } #g-pop-video-player-content .video-player-container .basic .tvwall_frame .v-background .loading > i, #g-pop-video-player-content .monitoring-group .basic .tvwall_frame .v-background .loading > i, #g-pop-video-player-content .video-player-container.basic .tvwall_frame .v-background .loading > i, #g-pop-video-player-content .monitoring-group.basic .tvwall_frame .v-background .loading > i, #g-pop-video-player-content .video-player-container .basic .tvwall_frame .v-background .loading span, #g-pop-video-player-content .monitoring-group .basic .tvwall_frame .v-background .loading span, #g-pop-video-player-content .video-player-container.basic .tvwall_frame .v-background .loading span, #g-pop-video-player-content .monitoring-group.basic .tvwall_frame .v-background .loading span { position: absolute; top: calc(50% - 20px); left: calc(50% - 20px); transform: translate(-50%, -50%); } #g-pop-video-player-content .video-player-container .basic .tvwall_frame .v-background .videoTool, #g-pop-video-player-content .monitoring-group .basic .tvwall_frame .v-background .videoTool, #g-pop-video-player-content .video-player-container.basic .tvwall_frame .v-background .videoTool, #g-pop-video-player-content .monitoring-group.basic .tvwall_frame .v-background .videoTool { z-index: 99; position: absolute; left: calc(50%); min-width: 66px; bottom: 10%; background: rgba(51, 51, 51, 0.6); color: white; border-radius: 3px; display: flex; justify-content: center; align-items: center; transform: translate(-50%, 0%); width: auto; height: auto; } #g-pop-video-player-content .video-player-container .basic .tvwall_frame .v-background .videoTool .snpshotTool, #g-pop-video-player-content .monitoring-group .basic .tvwall_frame .v-background .videoTool .snpshotTool, #g-pop-video-player-content .video-player-container.basic .tvwall_frame .v-background .videoTool .snpshotTool, #g-pop-video-player-content .monitoring-group.basic .tvwall_frame .v-background .videoTool .snpshotTool { position: relative; font-size: 18px; padding: 3px 7px 3px 7px; z-index: 99; border-radius: 3px; } #g-pop-video-player-content .video-player-container .basic .tvwall_frame .v-background .videoTool .snpshotTool:hover, #g-pop-video-player-content .monitoring-group .basic .tvwall_frame .v-background .videoTool .snpshotTool:hover, #g-pop-video-player-content .video-player-container.basic .tvwall_frame .v-background .videoTool .snpshotTool:hover, #g-pop-video-player-content .monitoring-group.basic .tvwall_frame .v-background .videoTool .snpshotTool:hover { background: #b4b4b4; } #g-pop-video-player-content .video-player-container .basic .tvwall_frame .v-background .error, #g-pop-video-player-content .monitoring-group .basic .tvwall_frame .v-background .error, #g-pop-video-player-content .video-player-container.basic .tvwall_frame .v-background .error, #g-pop-video-player-content .monitoring-group.basic .tvwall_frame .v-background .error { position: absolute; z-index: 1; color: #999; } #g-pop-video-player-content .video-player-container .basic .tvwall_frame .v-background .error span, #g-pop-video-player-content .monitoring-group .basic .tvwall_frame .v-background .error span, #g-pop-video-player-content .video-player-container.basic .tvwall_frame .v-background .error span, #g-pop-video-player-content .monitoring-group.basic .tvwall_frame .v-background .error span { position: absolute; top: calc(50%); left: calc(50%); transform: translate(-50%, -50%); font-size: 2em; } #g-pop-video-player-content .video-player-container .basic .tvwall_frame video, #g-pop-video-player-content .monitoring-group .basic .tvwall_frame video, #g-pop-video-player-content .video-player-container.basic .tvwall_frame video, #g-pop-video-player-content .monitoring-group.basic .tvwall_frame video { width: 100%; height: 100%; text-align: center; } #g-pop-video-player-content .video-player-container .basic .tvwall_frame canvas, #g-pop-video-player-content .monitoring-group .basic .tvwall_frame canvas, #g-pop-video-player-content .video-player-container.basic .tvwall_frame canvas, #g-pop-video-player-content .monitoring-group.basic .tvwall_frame canvas { position: relative; margin: 0px; padding: 0px 0px; width: 100%; height: 100%; } #g-pop-video-player-content .video-player-container .basic.tvWall_4_frames .tvwall_frame, #g-pop-video-player-content .monitoring-group .basic.tvWall_4_frames .tvwall_frame, #g-pop-video-player-content .video-player-container.basic.tvWall_4_frames .tvwall_frame, #g-pop-video-player-content .monitoring-group.basic.tvWall_4_frames .tvwall_frame { width: calc((100% - 1px)/2); height: calc((100% - 1px)/2); border: 1px solid #000; } #g-pop-video-player-content .video-player-container .basic.tvWall_9_frames .tvwall_frame, #g-pop-video-player-content .monitoring-group .basic.tvWall_9_frames .tvwall_frame, #g-pop-video-player-content .video-player-container.basic.tvWall_9_frames .tvwall_frame, #g-pop-video-player-content .monitoring-group.basic.tvWall_9_frames .tvwall_frame { width: calc((100% - 2px)/3); height: calc((100% - 2px)/3); border: 1px solid #000; } #g-pop-video-player-content .video-player-container .basic.tvWall_16_frames .tvwall_frame, #g-pop-video-player-content .monitoring-group .basic.tvWall_16_frames .tvwall_frame, #g-pop-video-player-content .video-player-container.basic.tvWall_16_frames .tvwall_frame, #g-pop-video-player-content .monitoring-group.basic.tvWall_16_frames .tvwall_frame { width: calc((100% - 3px)/4); height: calc((100% - 3px)/4); border: 1px solid #000; } #g-pop-video-player-content .video-player-container .basic.tvWall_25_frames .tvwall_frame, #g-pop-video-player-content .monitoring-group .basic.tvWall_25_frames .tvwall_frame, #g-pop-video-player-content .video-player-container.basic.tvWall_25_frames .tvwall_frame, #g-pop-video-player-content .monitoring-group.basic.tvWall_25_frames .tvwall_frame { width: calc((100% - 4px)/5); height: calc((100% - 4px)/5); border: 1px solid #000; } #g-pop-video-player-content .video-player-container .basic.tvWall_36_frames .tvwall_frame, #g-pop-video-player-content .monitoring-group .basic.tvWall_36_frames .tvwall_frame, #g-pop-video-player-content .video-player-container.basic.tvWall_36_frames .tvwall_frame, #g-pop-video-player-content .monitoring-group.basic.tvWall_36_frames .tvwall_frame { width: calc((100% - 5px)/6); height: calc((100% - 5px)/6); border: 1px solid #000; } #g-pop-video-player-content .video-player-container .basic .controlTimeline, #g-pop-video-player-content .monitoring-group .basic .controlTimeline, #g-pop-video-player-content .video-player-container.basic .controlTimeline, #g-pop-video-player-content .monitoring-group.basic .controlTimeline { z-index: 9; display: block; width: 100%; } #g-pop-video-player-content .video-player-container .basic .controlTimeline .panel-control, #g-pop-video-player-content .monitoring-group .basic .controlTimeline .panel-control, #g-pop-video-player-content .video-player-container.basic .controlTimeline .panel-control, #g-pop-video-player-content .monitoring-group.basic .controlTimeline .panel-control { height: 30px; width: 100%; background: #000000; border-top: 1px solid #fff; border-bottom: 1px solid #fff; } #g-pop-video-player-content .video-player-container .basic .controlTimeline .panel-control button:not(.pure-button), #g-pop-video-player-content .monitoring-group .basic .controlTimeline .panel-control button:not(.pure-button), #g-pop-video-player-content .video-player-container.basic .controlTimeline .panel-control button:not(.pure-button), #g-pop-video-player-content .monitoring-group.basic .controlTimeline .panel-control button:not(.pure-button) { height: 100%; background-color: rgba(0, 0, 0, 0); color: #b9b9b9; border: 0px; min-width: 40px; margin: 0 10px; padding: 0px; } #g-pop-video-player-content .video-player-container .basic .controlTimeline .panel-control .centralTool, #g-pop-video-player-content .monitoring-group .basic .controlTimeline .panel-control .centralTool, #g-pop-video-player-content .video-player-container.basic .controlTimeline .panel-control .centralTool, #g-pop-video-player-content .monitoring-group.basic .controlTimeline .panel-control .centralTool { margin: 0 auto; } #g-pop-video-player-content .video-player-container .basic .controlTimeline .panel-control .centralTool button:disabled, #g-pop-video-player-content .monitoring-group .basic .controlTimeline .panel-control .centralTool button:disabled, #g-pop-video-player-content .video-player-container.basic .controlTimeline .panel-control .centralTool button:disabled, #g-pop-video-player-content .monitoring-group.basic .controlTimeline .panel-control .centralTool button:disabled { cursor: not-allowed; opacity: 0.4; } #g-pop-video-player-content .video-player-container .basic .controlTimeline .panel-control .rightTool, #g-pop-video-player-content .monitoring-group .basic .controlTimeline .panel-control .rightTool, #g-pop-video-player-content .video-player-container.basic .controlTimeline .panel-control .rightTool, #g-pop-video-player-content .monitoring-group.basic .controlTimeline .panel-control .rightTool { position: absolute; right: 30px; } #g-pop-video-player-content .video-player-container .basic .controlTimeline .panel-control .rightTool .live-button, #g-pop-video-player-content .monitoring-group .basic .controlTimeline .panel-control .rightTool .live-button, #g-pop-video-player-content .video-player-container.basic .controlTimeline .panel-control .rightTool .live-button, #g-pop-video-player-content .monitoring-group.basic .controlTimeline .panel-control .rightTool .live-button { background: #ca3c3c; color: white; margin: 1px 15px 0 0 ; line-height: 22px; border: 0px; min-width: 40px; padding: 0px; } #g-pop-video-player-content .video-player-container .basic .controlTimeline .panel-control .rightTool .live-button.off, #g-pop-video-player-content .monitoring-group .basic .controlTimeline .panel-control .rightTool .live-button.off, #g-pop-video-player-content .video-player-container.basic .controlTimeline .panel-control .rightTool .live-button.off, #g-pop-video-player-content .monitoring-group.basic .controlTimeline .panel-control .rightTool .live-button.off { background: #000000; border: 1px solid #ca3c3c; color: #ca3c3c; opacity: 0.7; } #g-pop-video-player-content .video-player-container .basic .controlTimeline .panel-control .rightTool i:hover, #g-pop-video-player-content .monitoring-group .basic .controlTimeline .panel-control .rightTool i:hover, #g-pop-video-player-content .video-player-container.basic .controlTimeline .panel-control .rightTool i:hover, #g-pop-video-player-content .monitoring-group.basic .controlTimeline .panel-control .rightTool i:hover { color: white; } #g-pop-video-player-content .video-player-container .basic .controlTimeline .panel-control .search-btn, #g-pop-video-player-content .monitoring-group .basic .controlTimeline .panel-control .search-btn, #g-pop-video-player-content .video-player-container.basic .controlTimeline .panel-control .search-btn, #g-pop-video-player-content .monitoring-group.basic .controlTimeline .panel-control .search-btn { display: inline-block; font-size: 1em; border: 1px solid #0275d8; border-color: inherit; border-radius: 4px; padding: 4px; } #g-pop-video-player-content .video-player-container .basic .controlTimeline .panel-control .recordDataTable .c-table > thead th div, #g-pop-video-player-content .monitoring-group .basic .controlTimeline .panel-control .recordDataTable .c-table > thead th div, #g-pop-video-player-content .video-player-container.basic .controlTimeline .panel-control .recordDataTable .c-table > thead th div, #g-pop-video-player-content .monitoring-group.basic .controlTimeline .panel-control .recordDataTable .c-table > thead th div { position: static; } #g-pop-video-player-content .video-player-container .basic .controlTimeline .panel-control .recordDataTable .c-table .form, #g-pop-video-player-content .monitoring-group .basic .controlTimeline .panel-control .recordDataTable .c-table .form, #g-pop-video-player-content .video-player-container.basic .controlTimeline .panel-control .recordDataTable .c-table .form, #g-pop-video-player-content .monitoring-group.basic .controlTimeline .panel-control .recordDataTable .c-table .form { width: 150px; } #g-pop-video-player-content .video-player-container .basic .controlTimeline .panel-control .recordDataTable .c-table .to, #g-pop-video-player-content .monitoring-group .basic .controlTimeline .panel-control .recordDataTable .c-table .to, #g-pop-video-player-content .video-player-container.basic .controlTimeline .panel-control .recordDataTable .c-table .to, #g-pop-video-player-content .monitoring-group.basic .controlTimeline .panel-control .recordDataTable .c-table .to { width: 150px; } #g-pop-video-player-content .video-player-container .basic .controlTimeline .c-timeline, #g-pop-video-player-content .monitoring-group .basic .controlTimeline .c-timeline, #g-pop-video-player-content .video-player-container.basic .controlTimeline .c-timeline, #g-pop-video-player-content .monitoring-group.basic .controlTimeline .c-timeline { color: white; height: 145px; width: 100%; } #g-pop-video-player-content .video-player-container .basic .controlTimeline .c-timeline .zoom-bar, #g-pop-video-player-content .monitoring-group .basic .controlTimeline .c-timeline .zoom-bar, #g-pop-video-player-content .video-player-container.basic .controlTimeline .c-timeline .zoom-bar, #g-pop-video-player-content .monitoring-group.basic .controlTimeline .c-timeline .zoom-bar { display: flex; flex-flow: row; height: 30px; } #g-pop-video-player-content .video-player-container .basic .controlTimeline .c-timeline .zoom-bar .button, #g-pop-video-player-content .monitoring-group .basic .controlTimeline .c-timeline .zoom-bar .button, #g-pop-video-player-content .video-player-container.basic .controlTimeline .c-timeline .zoom-bar .button, #g-pop-video-player-content .monitoring-group.basic .controlTimeline .c-timeline .zoom-bar .button { width: 30px; display: flex; justify-content: center; align-items: center; cursor: pointer; } #g-pop-video-player-content .video-player-container .basic .controlTimeline .c-timeline .item, #g-pop-video-player-content .monitoring-group .basic .controlTimeline .c-timeline .item, #g-pop-video-player-content .video-player-container.basic .controlTimeline .c-timeline .item, #g-pop-video-player-content .monitoring-group.basic .controlTimeline .c-timeline .item { align-items: center; flex: 1; height: 100%; } #g-pop-video-player-content .video-player-container .basic .controlTimeline .c-timeline .timeLine-datePicker div, #g-pop-video-player-content .monitoring-group .basic .controlTimeline .c-timeline .timeLine-datePicker div, #g-pop-video-player-content .video-player-container.basic .controlTimeline .c-timeline .timeLine-datePicker div, #g-pop-video-player-content .monitoring-group.basic .controlTimeline .c-timeline .timeLine-datePicker div { padding: 0; } #g-pop-video-player-content .video-player-container .basic .controlTimeline .c-timeline .timeLine-datePicker input, #g-pop-video-player-content .monitoring-group .basic .controlTimeline .c-timeline .timeLine-datePicker input, #g-pop-video-player-content .video-player-container.basic .controlTimeline .c-timeline .timeLine-datePicker input, #g-pop-video-player-content .monitoring-group.basic .controlTimeline .c-timeline .timeLine-datePicker input { background-color: #fff; text-align: center; } #g-pop-video-player-content .video-player-container .basic .controlTimeline .speedControl, #g-pop-video-player-content .monitoring-group .basic .controlTimeline .speedControl, #g-pop-video-player-content .video-player-container.basic .controlTimeline .speedControl, #g-pop-video-player-content .monitoring-group.basic .controlTimeline .speedControl { color: white; margin: 0 -62px 0 0; } #g-pop-video-player-content .video-player-container .basic .controlTimeline .speedControl span, #g-pop-video-player-content .monitoring-group .basic .controlTimeline .speedControl span, #g-pop-video-player-content .video-player-container.basic .controlTimeline .speedControl span, #g-pop-video-player-content .monitoring-group.basic .controlTimeline .speedControl span { margin: 0 0.5em; border: #b5b5b5 1px solid; display: inline-block; text-align: center; min-width: 23px; color: #fff; } #g-pop-video-player-content .video-player-container.full-screen, #g-pop-video-player-content .monitoring-group.full-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; } #g-pop-video-player-content .monitoring-group { height: calc(100vh - 160px); } #g-pop-video-player-content .monitoring-group .basic { height: calc(100vh - 270px); } #g-pop-video-player-content .monitoring-group .basic.full-screen { width: 100%; height: 100%; } #g-pop-video-player-content #camera-control-vis-timeline .vis-text { color: #eee; } #g-pop-video-player-content #camera-control-vis-timeline .vis-timeline { border-right: 0; border-left: 0; } #g-pop-video-player-content #camera-control-vis-timeline .vis-panel.vis-background.vis-vertical:before { content: ''; position: absolute; width: 50%; height: 100%; border-right: 2px solid red; left: 1px; } #g-pop-video-player-content #camera-control-vis-timeline .record_background { background-color: rgba(8, 173, 52, 0.61); } #g-pop-video-player-content #download-dialog-dialog .archive-progress { display: unset; } #g-pop-video-player-content #download-dialog-dialog .archive-button { width: 220px; border-radius: 4px; background: #1385e5; color: white; display: flex; align-items: center; justify-content: center; cursor: pointer; height: 30px; } #g-pop-video-player-content #download-dialog-dialog .archive-button.cancel { background: #e62e00; margin-top: 5px; } #g-pop-video-player-content #download-dialog-dialog .archive-button.download { background: #00cc00; } #g-pop-video-player-content #download-dialog-dialog .archive-button.disabled { cursor: not-allowed; opacity: 0.5; } #g-pop-video-player-content #download-dialog-dialog .videoFileStatus { display: flex; align-items: center; width: 220px; } #g-pop-video-player-content #download-dialog-dialog .videoFileStatus .recHistoryBar { display: flex; flex: 1; height: 25px; background: white; border: 1px #b7b7b7 solid; border-radius: 1px; } #g-pop-video-player-content #download-dialog-dialog .videoFileStatus .recHistoryBar .fullData { flex-grow: 1; background: #168816; } #g-pop-video-player-content #download-dialog-dialog .videoFileStatus .recHistoryBar .noData { flex-grow: 1; background: #d6d4d4; } #g-pop-video-player-content #download-dialog-dialog .videoFileStatus .recHistoryBar .partData { flex-grow: 1; background: lightgreen; } #g-pop-video-player-content #download-dialog-dialog .videoFileStatus .recHistory-btn { flex: 0.5; margin-left: 10px; text-align: center; box-sizing: border-box; } #g-pop-video-player-content #download-dialog-dialog .recHistoryBarInfo .fullData { width: 15px; margin-right: 5px; margin-left: 5px; background: #168816; } #g-pop-video-player-content #download-dialog-dialog .recHistoryBarInfo .noData { width: 15px; margin-right: 5px; margin-left: 5px; background: #d6d4d4; } #g-pop-video-player-content #download-dialog-dialog .recHistoryBarInfo .partData { width: 15px; margin-right: 5px; margin-left: 5px; background: lightgreen; } #g-pop-video-player-content #download-dialog-dialog .color-frame { display: flex; } #g-pop-video-player-content #download-dialog-dialog .color-frame input { width: 100px; } #g-pop-video-player-content #download-dialog-dialog .color-frame .defaultColor-block { display: flex; flex-wrap: wrap; width: 120px; } #g-pop-video-player-content #download-dialog-dialog .color-frame .defaultColor-block .defaultColor { flex: 0 0 20px; margin: 2px 2px; height: 20px; border: 1px solid #333; } #g-pop-video-player-content #download-dialog-dialog .color-frame .colorBox { width: 30px; height: 30px; border: 1px solid black; margin: 9px; } #g-pop-camera-authorization .content { display: initial; } #g-pop-camera-authorization .content p { margin: 5px 0; }