body {
    color: #000000;
}

.login-body {
    background-color: #C3E3F3;
}

.form-signin {
    margin: 50px auto 0;
}

.form-signin h2.form-signin-heading {
    color: #5C5A5B;
    font-weight: 600;
}

.form-signin p {
    color: #5C5A5B;
}

.header, .footer {
    min-height: 60px;
    /* padding: 0 15px; */
    padding: 0px;
}

.wrapper {
    padding: 15px;
}

ul.top-menu > li > a:hover, ul.top-menu > li > a:focus {
    background-color: transparent !important;
}

.full-width .dropdown-menu.extended.logout > li > a:hover {
    background: none !important;
    color: #fff !important;
}

.top-nav ul.top-menu > li {
    margin-right: 10px;
}

.state-overview .value h1, .state-overview .value p  {
    color: #000;
}

.state-overview .symbol {
    padding: 10px 15px;
}

.state-overview .value {
    padding-top: 7px;
}

.adv-table table tr td {
    padding: 3px;
}

.full-width .nav > li > a:hover, .full-width .nav  li.active a, .full-width .nav li.dropdown a:hover , .full-width .nav li.dropdown.open a:focus, .full-width .nav .open > a, .full-width  .nav .open > a:hover, .full-width  .nav .open > a:focus{
    background-color: #EF4032;
}

/*
.site-footer {
    background: #90BBDE;
    color: #fff;
    padding: 10px 0;
	position:absolute;
	bottom:0;
	left:0; 
	width: 100%;   
}
*/

.form-signin h2.form-signin-heading {
    background: #4b31d8 none repeat scroll 0 0;
    color: white;
}

.form-signin .btn-login {
    background: #ef4032 none repeat scroll 0 0;
}

.alert_box {
    background-color: #FFFBFB;
    background-image: url("../../img/frontend/alert.png");
    border-bottom: 1px solid #F8C9BB;
    border-right: 1px solid #F8C9BB;
    color: #D0583F;
}

.alert_box .typo-icon {
    background-image: url("../images/alert-icon.png");
}

.typo-icon, .quote-l {
    background: none no-repeat scroll 10px 12px transparent;
    display: block;
    margin: 15px 0;
    padding: 8px 10px 0 36px;
}
.approved_box {
    background-color: #FAFDF9;
    background-image: url("../../img/frontend/approved.png");
    border-bottom: 1px solid #C1CEC1;
    border-right: 1px solid #C1CEC1;
    color: #6CB656;
}

.notice_box {
    background-color: #FAFCFD;
    background-image: url("../../img/frontend/notice.png");
    border-bottom: 1px solid #C7CDDA;
    border-right: 1px solid #C7CDDA;
    color: #6187B3;
}

.alert, .approved, .attention, .camera, .cart, .doc, .download, .media, .note, .notice, .quote {
    background-position: 0 100%;
    background-repeat: repeat-x;
    clear: both;
    display: block;
    margin: 15px 0;
}

.font_size_18 {
    font-size: 18px;
}

.font_size_16 {
    font-size: 16px;
}

.font_size_14 {
    font-size: 14px;
}

.error {
	color: red !important;
}

.notice {
	color: blue !important;
}

.navbar-nav li a {
	color: #fff;
	font-size: 14px;
}

.modal-header {
    background: #C3E3F3 none repeat scroll 0 0;
}

.modal-title {
	color: #5C5A5B;
	 font-weight: 600 !important;
}

.highlight {
	background-color: #C3E3F3;
}

.table-hover > tbody > tr:hover {
    background-color: #C3E3F3;
}

.portal_customer_details_padding {
	vertical-align: top; 
	padding: 10px 10px 0 0;
}

.red {
	color: red;
}

.blue {
	color: blue;
}

.green {
	color: green;
}

.orange {
	color: orange;
}

.yellow {
	color: yellow;
}

.bold {
	font-weight: bold;
}

.count {
	color: red;
	font-weight: bold;
}


.state-overview .value h1, .state-overview .value p {
    color: red;
	font-weight: bolder;
}

.count4 {
	color: blue !important; 
	font-weight: bolder;
}

#loading {
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   position: fixed;
   display: block;
   opacity: 0.7;
   background-color: #fff;
   z-index: 99;
   text-align: center;
}

#loading-image {
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
  z-index: 100;
}

table tbody tr {
	/* cursor: pointer; */ 
}

.customer-details-table tbody tr th {
	width: 50%;
}

.finmon_blue {
	color: #C3E3F3;
}

.finmon_red {
	color: #E30200;
}

.icons_20 {
	width: 20px;
	height: 20px;
}


table thead th {
	text-align: center;
}

.help-block {
	font-weight: bold;
	color: #2B83E7;
}

.user_action_add {
	cursor: pointer;
}

.popover-title {
    background: #ffffff;
}

.top, .bottom {
    background-color: #ffffff;
}

.adv-table .dataTables_length, .adv-table .dataTables_filter {
    padding: 0;
}

.img {
	cursor: pointer;
}

.login-screen {
  background: #02bac6 url("../img/finmon-login-bg.jpg") no-repeat scroll 0 0 / cover ;
}

.bglogoimg {
    background-image: url('../img/logo.jpg?v=2025-10-17');
    background-repeat: no-repeat;
}

tr.odd {
    background-color: #f9f9f9;
}

.tr_blue {
	background-color: #C3E3F3 !important;
}

.form-control {
    border: 1px solid #888888;
    box-shadow: none;
    color: #c2c2c2;
}

.form_field_required {
	color: red;
	font-weight: bold;
	
}

th.dt-center, td.dt-center { text-align: center; }

.unit_activity {
	cursor: pointer;
}

.user_action_delete {
	cursor: pointer;
}

.user_action_edit {
	cursor: pointer;
}
	
.btn_inset {
	background: #F39814; color: white;
}

#selectable .ui-selected { 
	/* background: #F39814; color: white; */ 
}

.panel-btn-selected { 
	background: #00FF00; color: white; 
}

.kp-btn-selected { 
	background: #00FF00; color: white; 
}

#selectable1 .ui-selected { 
	/* background: #F39814; color: white; */ 
}

#selectable2 .ui-selected { 
	/* background: #F39814; color: white; */ 
}

#selectable3 .ui-selected { 
	/* background: #F39814; color: white; */ 
}

#selectable4 .ui-selected { 
	/* background: #F39814; color: white; */ 
}

fieldset {
    display: block;
    margin-left: 2px;
    margin-right: 2px;
    padding-top: 0.35em;
    padding-bottom: 0.625em;
    padding-left: 0.75em;
    padding-right: 0.75em;
    border: 1px solid #B2B2B2;
}

legend {
    margin-bottom: 0px;
    font-size: 14px;
    line-height: inherit;
    color: #333;
    border: 0;
        border-bottom-width: 0px;
        border-bottom-style: none;
        border-bottom-color: currentcolor;
    width: auto;
}

.form-group {
    margin-bottom: 5px;
}

th.rotate {
  /* Something you can count on */
  height: 60px;
  white-space: nowrap;
}

th.rotate > div {
  transform: 
    /* Magic Numbers */
    translate(0px, 20px)
    /* 45 is really 360 - 45 */
    rotate(315deg);
  width: 30px;
}
th.rotate > div > span {
  /*border-bottom: 1px solid #ccc; */
  padding: 5px 30px;
}

th.vertical {
  /* Something you can count on */
  height: 60px;
  white-space: nowrap;
}

th.vertical > div {
  transform: 
    /* Magic Numbers */
    translate(0px, 30px)
    /* 45 is really 360 - 45 */
    rotate(270deg);
  width: 20px;
}
th.vertical > div > span {
  /* border-bottom: 1px solid #ccc; */
  padding: 0px 0px 0px 10px;
}

.outputboxes {
	width: 40px;
}

.form-control-1 {
    position: relative;
    font-size: 16px;
    height: 0px;
    padding: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.panel-status {
	/* border: 1px solid black; */
	font-size: 14px;
	color: #ef4032;
}

.btn-code {
	font-size: 45px;
	font-weight: bold;
}
.btn-code1 {
	width: 90px;
	height: 90px;
	font-size: 20px;
	font-weight: bold;
}
.btn-default1 {
	/*width: 100px;
	height: 100px;*/
	font-size: 50px;
	font-weight: bold;
}

.btn-code-td {
	/*padding: 20px;*/
	padding-top:12px;
	padding-right:12px;
	/*padding-left:15x;*/
	padding-bottom:0px;
}
.btn-code1-td {
	/*padding: 20px;*/
	padding-top:12px;
	padding-right:12px;
	/*padding-left:15x;*/
	padding-bottom:0px;
}
.btn-code11-td {
	/*padding: 20px;*/
	padding-top:1px;
	padding-right:12px;
	/*padding-left:15x;*/
	padding-bottom:0px;
	padding-left: 15px;
	height: 25px;
}

td.btn-code11-td button {
    width: 90px;
    height: 25px;
    background-color: #2a9cd5;
}
.btn-code2-td {
	/*padding: 20px;*/
	padding-top:0px;
	padding-right:12px;
	/*padding-left:15x;*/
	padding-bottom:0px;
}
.btn-code3-td {
	/*padding: 20px;*/
	padding-top:0px;
	padding-right:0px;
	/*padding-left:15x;*/
	padding-bottom:0px;
}
.btn-code31-td {
	/*padding: 20px;*/
	padding-top:0px;
	padding-right:0px;
	/*padding-left:15x;*/
	padding-bottom:10px;
}
.partition-red {
	background-color: red;
}

.partition-orange {
	background-color: orange;
}

.partition-green {
	background-color: green;
}

.partition-default {
	background-color: #bec3c7;
}

.btn-primary1 {
    background-color: #55b0dd;
    border-color: #55b0dd;
    color: #FFFFFF;
    font-weight: bold;
}

.btn-primary2 {
    background-color: #ff7733;
    border-color: #ff7733;
    color: #FFFFFF;
    font-weight: bold;
}

.btn-primary3 {
    background-color: #2d862d;
    border-color: #2d862d;
    color: #FFFFFF;
    font-weight: bold;
}

.btn-shadow.btn-primary1 {
    box-shadow: 0 4px #55b0dd;
}

.btn-shadow.btn-primary2 {
    box-shadow: 0 4px #ff9966;
}

.btn-shadow.btn-primary3 {
    box-shadow: 0 4px #339933;
}

.panel_armed {
	background-color: #ef4032;
    color: white;
    font-weight: bold;
}

.panel_disarmed {
	background-color: #2d862d;
    color: white;
    font-weight: bold;
}

.panel_inactive {
	background-color: #ddd;
    color: white;
    font-weight: bold;
}

.panel_alarmed {
	background-color: #ef4032;
    color: white;
    font-weight: bold;
}

.panel_noaccess {
	background-color: #ddd;
    color: white;
    font-weight: bold;
}

.panel_entrydelay {
	background-color: #ef4032;
    color: white;
    font-weight: bold;
}

.panel_exitdelay {
	background-color: #ef4032;
    color: white;
    font-weight: bold;
}

.panel_cannotarm {
	background-color: orange;
    color: #000;
    font-weight: bold;
}

.partition-not-selected {
	border: none;
	color: #000;
}

.partition-selected {
	border: 1px solid black;
	color: #fff;
}

.header {
    background-image: url(https://portal.finmon.co.za/public/img/finmon-menu-bg.jpg);
    background-repeat: repeat;
    height: 60px;
}

.navbar-nav li a .menu_items_links {
    color: white;
}

.dropdown-menu > li > a, .dropdown-menu {
    color: #000 !important;
}

.top-nav .username {
    font-size: 13px;
    color: #fff;
}

.top-nav-admin .username-admin {
    font-size: 16px;
    color: #fff;
}

.top-nav ul.top-menu > li > a:hover .caret {
    border-bottom-color: #fff;
    border-top-color: #fff;
}

.top-nav-admin ul.top-menu > li > a:hover .caret {
    border-bottom-color: #fff;
    border-top-color: #fff;
}

.username {
    font-weight: 700;
    font-size: 12px;
    padding: 15px;
}

.username-admin {
    font-weight: 700;
    font-size: 14px;
    padding: 15px;
}

.top-nav {
    border: 1px solid white;
    border-radius: 5px;
    float: right;
    margin-right: 10px;
    text-align: center;
}

.top-nav-admin {
    border: 1px solid white;
    border-radius: 5px;
    float: right;
    margin-right: 10px;
    margin-top: 15px;
    text-align: center;
}

.bglogoimg {
    height: 59px;
}

.form-inline .form-group {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
    font-weight: 300;
    font-size: 14px;
    text-align: left;    
}

.form-control-table {
    display: inline;
    width: 78%;
}

.table-borderless > tbody > tr > td,
.table-borderless > tbody > tr > th,
.table-borderless > tfoot > tr > td,
.table-borderless > tfoot > tr > th,
.table-borderless > thead > tr > td,
.table-borderless > thead > tr > th {
    border: none;
}

.horizontal-menu {
    margin-left: 100px;
    float: left;
}

.top-nav ul.top-menu > li {
    margin-right: 0px;
    margin-left: 0px;
}

.top-nav ul.top-menu > li .dropdown-menu.logout {
    width: 100px !important;
}

.dropdown-menu.extended.logout > li {
    float: left;
    text-align: center;
    width: 100%;
}

.dropdown-menu.extended.logout > li:last-child {
    background: #EF4032;
    color: #fff;
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)  {
    .div-customer-info-page {
        display: none;
    }

    .top-nav {
        display: none;
    }

    .nav > li > a {
        position: relative;
        display: block;
        padding: 10px 10px;
            padding-top: 10px;
            padding-bottom: 10px;
    }

    .ucaa-width {
        width: 1200px !important;
    }

    .ucaa-unit-details-width {
        width: 1600px !important;
    }
}

@media only screen and (max-device-width : 480px) {

    /* Styles */
    .navbar-nav li a {
        color: #000 !important;
        background-color: #57c8f2;
    }

    .navbar-nav {
        background-color: #57c8f2;
    }    

    .div-customer-info {
        display: none;
    }

    .horizontal-menu {
        background-color: white;
    }
    
     .top-nav .username {
        font-size: 10px;
        color: #fff;
    }  
    
    .top-nav {
        margin-top: 10px;
        left: 120px !important;
        right: unset !important;
    }   

    .full-width .navbar-toggle {
        float: right !important;
        margin-top: 10px !important;
        margin-right: 5px !important;
        border-color: white;
    }

    .navbar-toggle > .fa-bars {
        color: white;
    }

    .ucaa-width {
        width: 1200px !important;
    }

    .ucaa-unit-details-width {
        width: 1600px !important;
    }
}

.panic-table > tbody > tr > td, .panic-table > tbody > tr > th, .panic-table > tfoot > tr > td, .panic-table > tfoot > tr > th, .panic-table > thead > tr > td, .panic-table > thead > tr > th {
    padding: 2px;
    line-height: 1.42857143;
    vertical-align: top;
    border-top: 0px;
}

.panic-table > tbody > tr > td {
    font-weight: 300;
    font-size: 14px;
    text-align: left;
}

.panic-buttons-table > tbody > tr > td, .panic-buttons-table > tbody > tr > th, .panic-buttons-table > tfoot > tr > td, .panic-buttons-table > tfoot > tr > th, .panic-buttons-table > thead > tr > td, .panic-buttons-table > thead > tr > th {
    padding: 2px;
    line-height: 1.42857143;
    vertical-align: top;
    border-top: 0px;
}

.panic-buttons-table > tbody > tr > td {
    font-weight: 300;
    font-size: 14px;
    text-align: left;
}

.panic-zones-table > tbody > tr > td, .table > tbody > tr > th, .panic-zones-table > tfoot > tr > td, .panic-zones-table > tfoot > tr > th, .panic-zones-table > thead > tr > td, .panic-zones-table > thead > tr > th {
    padding: 2px;
    line-height: 1.42857143;
    vertical-align: top;
    border-top: 0px;
}

.panic-remotes-table > tbody > tr > td, .panic-remotes-table > tbody > tr > th, .panic-remotes-table > tfoot > tr > td, .panic-remotes-table > tfoot > tr > th, .panic-remotes-table > thead > tr > td, .panic-remotes-table > thead > tr > th {
    padding: 2px;
    line-height: 1.42857143;
    vertical-align: top;
    border-top: 0px;
}

.panic-zones-table > tbody > tr > td {
    font-weight: 300;
    font-size: 14px;
    text-align: left;
}

.panic-table > tbody > tr > td > input {
    margin: 0px;
}

.panic-buttons-table > tbody > tr > td > input {
    margin: 0px;
}

.panic-zones-table > tbody > tr > td > input {
    margin: 0px;
}

.btn_panic_remote_settings {
    padding: 8px;
}

.customer_package_column {
    padding: 8px !important;
}

@media (min-width: 1000px) {
    .modal-xl {
        width: 1000px;
    }
}

#select_secondary_company_input {
    position: relative;
    z-index: 5000;
}

.datepicker{z-index:1151 !important;}
.ui-datepicker{ z-index:1151 !important; }

.btn-disable-ping {
    background-color: #ff0000 !important;
    color: #fff !important;
}

.btn-enable-ping{
    background-color: #008000 !important;
    color: #fff !important;
}

.scroll-to-bottom-btn {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 1000;
}

.udl_status_text {
    font-size: 16px !important;
}