/* This combined file was created by the DataTables downloader builder:
 *   https://datatables.net/download
 *
 * To rebuild or modify this file with the latest versions of the included
 * software please visit:
 *   https://datatables.net/download/#bs4/dt-1.10.18
 *
 * Included libraries:
 *   DataTables 1.10.18
 */
 
  
/* .cameraList font[color~="lightgrey"]+hr {display: none !important;} */

table.dataTable{clear:both;margin-top:6px !important;margin-bottom:6px !important;max-width:none !important;border-collapse:separate !important;border-spacing:0}
table.dataTable td,table.dataTable th{-webkit-box-sizing:content-box;box-sizing:content-box}table.dataTable td.dataTables_empty,table.dataTable th.dataTables_empty{text-align:center}
table.dataTable.nowrap th,table.dataTable.nowrap td{white-space:nowrap}
div.dataTables_wrapper div.dataTables_length label{font-weight:normal;text-align:left;white-space:nowrap}
div.dataTables_wrapper div.dataTables_length select{width:auto;display:inline-block}
div.dataTables_wrapper div.dataTables_filter{text-align:right}
div.dataTables_wrapper div.dataTables_filter label{font-weight:normal;white-space:nowrap;text-align:left}
div.dataTables_wrapper div.dataTables_filter input{margin-left:0.5em;display:inline-block;width:auto}
div.dataTables_wrapper div.dataTables_info{padding-top:0.85em;white-space:nowrap}
div.dataTables_wrapper div.dataTables_paginate{margin:0;white-space:nowrap;text-align:right}
div.dataTables_wrapper div.dataTables_paginate ul.pagination{margin:2px 0;white-space:nowrap;justify-content:flex-end}
div.dataTables_wrapper div.dataTables_processing{position:absolute;top:50%;left:50%;width:200px;margin-left:-100px;margin-top:-26px;text-align:center;padding:1em 0}
table.dataTable thead>tr>th.sorting_asc,table.dataTable thead>tr>th.sorting_desc,table.dataTable thead>tr>th.sorting,table.dataTable thead>tr>td.sorting_asc,table.dataTable thead>tr>td.sorting_desc,table.dataTable thead>tr>td.sorting{padding-right:30px}
table.dataTable thead>tr>th:active,table.dataTable thead>tr>td:active{outline:none}
table.dataTable thead .sorting,table.dataTable thead .sorting_asc,table.dataTable thead .sorting_desc,table.dataTable thead .sorting_asc_disabled,table.dataTable thead .sorting_desc_disabled{cursor:pointer;position:relative}
table.dataTable thead .sorting:before,table.dataTable thead .sorting:after,table.dataTable thead .sorting_asc:before,table.dataTable thead .sorting_asc:after,table.dataTable thead .sorting_desc:before,table.dataTable thead .sorting_desc:after,table.dataTable thead .sorting_asc_disabled:before,table.dataTable thead .sorting_asc_disabled:after,table.dataTable thead .sorting_desc_disabled:before,table.dataTable thead .sorting_desc_disabled:after{position:absolute;bottom:0.9em;display:block;opacity:0.3}

table.dataTable thead .sorting:before,table.dataTable thead .sorting_asc:before,table.dataTable thead .sorting_desc:before,table.dataTable thead .sorting_asc_disabled:before,table.dataTable thead .sorting_desc_disabled:before{right:1em;content:"\2191"}
table.dataTable thead .sorting:after,table.dataTable thead .sorting_asc:after,table.dataTable thead .sorting_desc:after,table.dataTable thead .sorting_asc_disabled:after,table.dataTable thead .sorting_desc_disabled:after{right:0.5em;content:"\2193"}

table.dataTable thead .sorting_asc:before,table.dataTable thead .sorting_desc:after{opacity:1}
table.dataTable thead .sorting_asc_disabled:before,table.dataTable thead .sorting_desc_disabled:after{opacity:0}
div.dataTables_scrollHead table.dataTable{margin-bottom:0 !important}
div.dataTables_scrollBody table{border-top:none;margin-top:0 !important;margin-bottom:0 !important}
div.dataTables_scrollBody table thead .sorting:before,div.dataTables_scrollBody table thead .sorting_asc:before,div.dataTables_scrollBody table thead .sorting_desc:before,div.dataTables_scrollBody table thead .sorting:after,div.dataTables_scrollBody table thead .sorting_asc:after,div.dataTables_scrollBody table thead .sorting_desc:after{display:none}
div.dataTables_scrollBody table tbody tr:first-child th,div.dataTables_scrollBody table tbody tr:first-child td{border-top:none}
div.dataTables_scrollFoot>.dataTables_scrollFootInner{box-sizing:content-box}div.dataTables_scrollFoot>.dataTables_scrollFootInner>table{margin-top:0 !important;border-top:none}

@media screen and (max-width: 767px){
	div.dataTables_wrapper div.dataTables_length,div.dataTables_wrapper div.dataTables_filter,div.dataTables_wrapper div.dataTables_info,div.dataTables_wrapper div.dataTables_paginate{text-align:center}
	}
	
	table.dataTable.table-sm>thead>tr>th{padding-right:20px}
	table.dataTable.table-sm .sorting:before,table.dataTable.table-sm .sorting_asc:before,table.dataTable.table-sm .sorting_desc:before{top:5px;right:2em}
	table.dataTable.table-sm .sorting:after,table.dataTable.table-sm .sorting_asc:after,table.dataTable.table-sm .sorting_desc:after{top:5px;right:1.5em}
	table.table-bordered.dataTable th,table.table-bordered.dataTable td{border-left-width:0}
	table.table-bordered.dataTable th:last-child,table.table-bordered.dataTable th:last-child,table.table-bordered.dataTable td:last-child,table.table-bordered.dataTable td:last-child{border-right-width:0}
	table.table-bordered.dataTable tbody th,table.table-bordered.dataTable tbody td{border-bottom-width:0}
	div.dataTables_scrollHead table.table-bordered{border-bottom-width:0}
	div.table-responsive>div.dataTables_wrapper>div.row{margin:0}
	div.table-responsive>div.dataTables_wrapper>div.row>div[class^="col-"]:first-child{padding-left:0}div.table-responsive>div.dataTables_wrapper>div.row>div[class^="col-"]:last-child{padding-right:0}



/* DRIFT ZOOM STYLES */
@keyframes a{0%{transform:scale(1.5);opacity:0}to{transform:scale(1);opacity:1}}@keyframes b{0%{transform:scale(1);opacity:1}15%{transform:scale(1.1);opacity:1}to{transform:scale(.5);opacity:0}}@keyframes c{0%{transform:translate(-50%,-50%) rotate(0)}50%{transform:translate(-50%,-50%) rotate(-180deg)}to{transform:translate(-50%,-50%) rotate(-1turn)}}@keyframes d{0%{transform:scale(1)}10%{transform:scale(1.2) translateX(6px)}25%{transform:scale(1.3) translateX(8px)}40%{transform:scale(1.2) translateX(6px)}50%{transform:scale(1)}60%{transform:scale(.8) translateX(6px)}75%{transform:scale(.7) translateX(8px)}90%{transform:scale(.8) translateX(6px)}to{transform:scale(1)}}@keyframes e{0%{transform:scale(1)}10%{transform:scale(1.2) translateX(-6px)}25%{transform:scale(1.3) translateX(-8px)}40%{transform:scale(1.2) translateX(-6px)}50%{transform:scale(1)}60%{transform:scale(.8) translateX(-6px)}75%{transform:scale(.7) translateX(-8px)}90%{transform:scale(.8) translateX(-6px)}to{transform:scale(1)}}@-webkit-keyframes a{0%{-webkit-transform:scale(1.5);opacity:0}to{-webkit-transform:scale(1);opacity:1}}@-webkit-keyframes b{0%{-webkit-transform:scale(1);opacity:1}15%{-webkit-transform:scale(1.1);opacity:1}to{-webkit-transform:scale(.5);opacity:0}}@-webkit-keyframes c{0%{-webkit-transform:translate(-50%,-50%) rotate(0)}50%{-webkit-transform:translate(-50%,-50%) rotate(-180deg)}to{-webkit-transform:translate(-50%,-50%) rotate(-1turn)}}@-webkit-keyframes d{0%{-webkit-transform:scale(1)}10%{-webkit-transform:scale(1.2) translateX(6px)}25%{-webkit-transform:scale(1.3) translateX(8px)}40%{-webkit-transform:scale(1.2) translateX(6px)}50%{-webkit-transform:scale(1)}60%{-webkit-transform:scale(.8) translateX(6px)}75%{-webkit-transform:scale(.7) translateX(8px)}90%{-webkit-transform:scale(.8) translateX(6px)}to{-webkit-transform:scale(1)}}@-webkit-keyframes e{0%{-webkit-transform:scale(1)}10%{-webkit-transform:scale(1.2) translateX(-6px)}25%{-webkit-transform:scale(1.3) translateX(-8px)}40%{-webkit-transform:scale(1.2) translateX(-6px)}50%{-webkit-transform:scale(1)}60%{-webkit-transform:scale(.8) translateX(-6px)}75%{-webkit-transform:scale(.7) translateX(-8px)}90%{-webkit-transform:scale(.8) translateX(-6px)}to{-webkit-transform:scale(1)}}.drift-zoom-pane{background:rgba(0,0,0,.5);transform:translateZ(0);-webkit-transform:translateZ(0)}.drift-zoom-pane.drift-opening{animation:a .18s ease-out;-webkit-animation:a .18s ease-out}.drift-zoom-pane.drift-closing{animation:b .21s ease-in;-webkit-animation:b .21s ease-in}.drift-zoom-pane.drift-inline{position:absolute;width:160px;height:160px;border-radius:80px;box-shadow:0 6px 18px rgba(0,0,0,.3); z-index: 99999;}.drift-loading .drift-zoom-pane-loader{display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);width:66px;height:20px;animation:c 1.8s linear infinite;-webkit-animation:c 1.8s linear infinite}.drift-zoom-pane-loader:after,.drift-zoom-pane-loader:before{content:"";display:block;width:20px;height:20px;position:absolute;top:50%;margin-top:-10px;border-radius:20px;background:hsla(0,0%,100%,.9)}.drift-zoom-pane-loader:before{left:0;animation:d 1.8s linear infinite;-webkit-animation:d 1.8s linear infinite}.drift-zoom-pane-loader:after{right:0;animation:e 1.8s linear infinite;-webkit-animation:e 1.8s linear infinite;animation-delay:-.9s;-webkit-animation-delay:-.9s}.drift-bounding-box{background-color:rgba(0,0,0,.4)}











/* body, html {overflow-x: hidden !important;} */
/* ==|== primary styles =====================================================
   Author: Silverink
   ========================================================================== */

/* ==|== Easibuild Structural Elements =====================================================
   Structural elements such as mainContent/Wide, submenu etc. Ideally these elements will change
   to HTML5 tags...  aside, article etc.
   ========================================================================== */

   .custom-switch .custom-control-label::before, .custom-switch .custom-control-label::after {margin-top: 3px;}
.bg-primary {
	background:  rgb(105, 195, 199) !important;
}

.text-primary {
	color:  rgb(105, 195, 199) !important;
}

.text-primary-dark {
	color:  rgb(87, 125, 127) !important;
}

.ContactDetails h1, .ContactForm h1 {font-size: 1.75em;}
	.ContactForm label, #questionForm label {display: block;}
	.ContactForm div, #questionForm div {margin-bottom: 10px;}
	.ContactForm input[type='text'], .ContactForm input[type='tel'], .ContactForm input[type='email'], .ContactForm textarea {border: 1px solid #888;}
	.notEmail {display: none;}

.content, .breadcrumbs {box-sizing: border-box; }


#changeOrder, #changeLogView {font-size: 0.8rem;}
#changeOrder a, #changeLogView a {padding: 5px; color: #2f2d2d;}
	#changeOrder a.active, #changeLogView a.active {background: #2f2d2d; color: #fff}
.contactDetailsBox {padding-top: 15px; padding-bottom: 15px; background: #50505d; color: #fff;}
.contactDetailsCard {background: none; border: 0px;}
#escalationModal {font-size: 0.8em;}
	#escalationModal .bg-dark, #escalationModal .bg-dark .close {color: #fff !important;}
	#escalationModal .bg-dark .close {opacity: 0.9;}
	#escalationModal .modal-body {padding: 0px;}
	
	.escTicketCard {border: none; }
	.escalateTitle {color: #b21f2d}
/* FOOTER */

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 150px;
  background-color: #f5f5f5;
}

/* END FOOTER */
.progress-bar {display: block; }

.nav .active {font-weight: bold; display: block !important;}


img {max-width: 100%; height: auto !important;}

#logo img {width: auto; height: auto; max-height:100%; cursor: pointer;}
#topBanner {background: rgba(255,255,255,0.7)}

/* ==|== Everything Else =====================================================================
   Alphabetically ordered unles it's nested (.level2 will be nested with #submenu for example)
   =========================================================================================== */

.camera-item.selected {
	color:  #fff !important;
}
.camera-item.selected a{
	font-weight:  bold !important;
}
.cameraList.selected a{
	font-weight:  bold !important;
}
.monitorsEditorList.selected a{
	font-weight:  bold !important;
}

div.list-group-item {
  overflow: hidden;
  display: table;
}

div.list-group-item > span {
  display: table-cell; 
  vertical-align: top; 
  float:none;
}

.list-group-item-action.bg-success, .list-group-item-action.bg-success .fa {color: #fff !important;}
.listNumber {
	font-size: 2rem;
}

.month li, .year li {display: none;}
.month li.monthName, .month li.yearName {display: block;}


#loader {width: 100vw; height: 100vh; background: rgba(0,0,0,0.9); position: fixed; top: 0px; left: 0px;}
#map_canvas {width: 100%; min-height: 150px;}

.navbar-toggle {border: 1px solid #efefef;}
	.navbar-toggle .icon-bar {background: #efefef;}


.carousel {
    /* margin: 20px auto; */
    /* max-width: 704px; */
}
.carousel-fade .carousel-item {
 opacity: 0.9;
 transition-duration: .8s;
 transition-property: opacity;
}
.indicatorContainer {display: block; width: 100%; overflow-y: hidden; position: relative; padding: 30px 15px; background: rgba(0,0,0,0.9);}


/* IMAGE RECOGNITION */

/* REK COLORS
People: 
  high: rgba(242,48,48,1)
  medium: rgba(242, 173, 46,1)
  low: rgba(250, 250, 28,1)

  Transport:
    high: rgba(129,51,253,1)
    medium: rgba(62,91,250,1)
    low: rgba(51,187,253,1)
*/

.camImageContain {position: relative; display: block;}
.faceLabel {display: block; position: absolute;  background-color: rgba(156, 145, 255, 0.1); border: 1px solid rgba(156, 145, 255, 0.5);}

	/* gDk20230207 // REPLACED " outline: 1px solid white;" BELOW WITH "LightGray" */
.rekLabel, .monitorRekLabel {z-index: 10; display: block; position: absolute;   border: 1px solid rgba(145,255,155,1); outline: 1px solid LightGray;}

.wrap {position: relative;}
	/* gDk20230207 // CHANGED ALL "2px " BELOW TO "1px "  */
/*
  .rekLabel.low, .monitorRekLabel.low {border: 2px solid rgba(250, 250, 28,1);}
  .rekLabel.medium, .monitorRekLabel.medium {border: 2px solid rgba(242, 173, 46,1);}
  .rekLabel.high, .monitorRekLabel.high {border: 2px solid rgba(242,48,48,1);}
gDk20221213 - PERSON colours changed: */
  .rekLabel.low, .monitorRekLabel.low {border: 1px solid rgba(235, 232, 44,1);}
  .rekLabel.medium, .monitorRekLabel.medium {border: 1px solid rgba(242, 173, 46,1);}
  .rekLabel.high, .monitorRekLabel.high {border: 1px solid rgba(245,53,37,1);}
/*
  .monitorRekLabel[title="Car"].low, .monitorRekLabel[title="Truck"].low, .rekLabel[data-original-title="Car"].low, .rekLabel[data-original-title="Truck"].low  {border: 3px solid rgba(51,187,253,1);}
  .monitorRekLabel[title="Car"].medium, .monitorRekLabel[title="Truck"].medium, .rekLabel[data-original-title="Car"].medium, .rekLabel[data-original-title="Truck"].medium  {border: 2px solid rgba(62,91,250,1);}
  .monitorRekLabel[title="Car"].high, .monitorRekLabel[title="Truck"].high,.rekLabel[data-original-title="Car"].high, .rekLabel[data-original-title="Truck"].high {border: 2px solid rgba(129,51,253,1);}
gDk20221213 - VEHICLE colours changed: */
  .monitorRekLabel[title="Car"].low, .monitorRekLabel[title="Truck"].low,.monitorRekLabel[data-original-title="Car"].low, .monitorRekLabel[data-original-title="Truck"].low, .rekLabel[data-original-title="Car"].low, .rekLabel[data-original-title="Truck"].low  {border: 1px solid rgba(151,229,240,1);}
  .monitorRekLabel[title="Car"].medium, .monitorRekLabel[title="Truck"].medium,.monitorRekLabel[data-original-title="Car"].medium, .monitorRekLabel[data-original-title="Truck"].medium, .rekLabel[data-original-title="Car"].medium, .rekLabel[data-original-title="Truck"].medium  {border: 1px solid rgba(56,147,245,1);}
  .monitorRekLabel[title="Car"].high, .monitorRekLabel[title="Truck"].high, .monitorRekLabel[data-original-title="Car"].high, .monitorRekLabel[data-original-title="Truck"].high,.rekLabel[data-original-title="Car"].high, .rekLabel[data-original-title="Truck"].high {border: 1px solid rgba(4,22,219,1);}



  #monitorContainRow .card {box-sizing: border-box;}
  #monitorContainRow .card.vehicle {border-top: 5px solid rgba(51,187,253,1);}


#monitorContainRow .card.low  {border-top: 5px solid rgb(250, 250, 28);}
#monitorContainRow .card.medium  {border-top: 5px solid rgb(242, 173, 46);}
#monitorContainRow .card.high  {border-top: 5px solid rgba(242,48,48,1);}

#monitorContainRow .card.vehicles.low, #monitorContainRow .card.vehicle.medium  {border-top: 5px solid rgba(51,187,253,1);}
#monitorContainRow .card.vehicles.medium, #monitorContainRow .card.medium.vehicle   {border-top: 5px solid rgba(62,91,250,1);}
#monitorContainRow .card.vehicles.high, #monitorContainRow .card.high.vehicle  {border-top: 5px solid rgba(129,51,253,1);}



#monitorContainRow .escalateButton {max-width: 25%; aspect-ratio: 1/1; float: right}
#monitorContainRow .viewedButton {width: calc(60% - 15px); margin-left: 15px; float: right}
#fullScaleModal.high .modal-dialog, .wrap.high {border: 2px solid rgba(242,48,48,1) !important;}
#fullScaleModal.medium .modal-dialog, .wrap.medium {border: 2px solid rgba(242, 173, 46,1) !important;}
#fullScaleModal.low .modal-dialog, .wrap.low {border: 2px solid rgba(250, 250, 28,1) !important;}

#fullScaleModal.vehicle .modal-dialog, .wrap.vehicle {border: 2px solid rgba(51,187,253,1);}

.wrap.vehicle.high, #fullScaleModal.vehicle.high .modal-dialog {border: 2px solid rgba(129,51,253,1) !important;}
.wrap.vehicle.medium, #fullScaleModal.vehicle.medium .modal-dialog {border: 2px solid rgba(62,91,250,1) !important;}
.wrap.vehicle.low, #fullScaleModal.vehicle.low .modal-dialog {border: 2px solid rgba(51,187,253,1) !important;}

.rekSummary {position: absolute; bottom: 0px; left: 0px; padding: 10px; width: calc(100%); box-sizing: padding-box; color: #fff; background: rgba(0,0,0,0.9)}
.rekSummary label { display: inline-block; padding: 5px; font-size: 0.8rem; background: rgba(20,20,20,0.95); border: 1px solid rgb(0,0,0); margin-right: 5px; margin-bottom: 5px;}
#fullScaleModal .modal-body {padding: 0px;}
#fullScaleModal .modal-header {padding: 5px;}
#fullScaleModal .modal-header .close {padding-right: 1.5rem;}
/* CLOSE IMAGE RECOGNITION */


.carousel-indicators {width: 100%; left: 0px !important; right: auto; margin-left: 0px; max-width: 704px;  position: relative !important; justify-content: left; margin: 0px !important;}
.carousel-indicators img {
  max-width: 100px;
  height: auto;
}
.carousel-indicators li::before {display: none; content: "";}
.carousel-indicators li {
	position: relative;
	text-indent: 0px;
  height: auto; 
  max-width: 100px;
  width: 100px;
  border: none;
  opacity: 0.5;
  background: none;
  color: #fff;
  font-size: 0.75rem;
}
.carousel-indicators li.active {
  opacity: 1;
} 


.main-menu .dropdown.show > a, .main-menu .dropdown.show > a .menu-icon  {color: #fff !important;}


.locationNoteContent {padding: 15px; background: rgba(255,255,255,1)}
#cameraDD .selected * {color: #fff !important;}

li.deactivated *, #cameraDD li.deactivated > a {color: #606060 !important}*/
/*  gDk20201005   li.deactivated *, #cameraDD li.deactivated > a {color: #606060 !important;}
#cameraDD li.standardAngle {color: #606060;}
#cameraDD li.wideAngle > a {color: #7a4e3f !important;}*/


.camCard.deactivated .card {opacity: 0.3}
.camCard .card-body {position: relative;}
.camCard.unresponsive .card-body:before {content: "Unresponsive"; position: absolute; left: 1.25rem; top: 1.25rem; padding: 5px; background: #e10404; color: #fff; z-index: 1000;}

.camCard.deactivated .card-body:after {content: "Deactivated"; position: absolute; right: 1.25rem; top: 1.25rem; padding: 5px; background: #606060; color: #fff;}
.thumbPic {border: 1px solid #606060;}
.thumbPic.viewed {border: 1px rgba(0,0,0,0);}


.carouselContainWrap {
	position: relative; display: block;
}

.graphBG {
	background: #fff; border:  1px solid #444;
}

#pickDate {cursor: pointer;}


/* IMAGE HOVER */
.image-box {
    position: relative;
    margin: auto;
    display: block;
    overflow: hidden !important;
    width: 100%;
}
.image-box img {
    max-width: 100%;
    transition: all 0.3s;
}

.image-box:hover img {
    transform: scale(2);
}


/* AI RECOGNITION */


/* ==|== media queries ======================================================
   Media Queries for Responsive Design.
   These override the primary ('mobile/desktop first') styles
   Modify as content requires.
   ========================================================================== */

.tooltip {
  pointer-events: none;
  font-size: 0.75rem;
}


/* .count {width: auto !important; height: auto !important; padding: 2px; border-radius: 5px !important;}	*/
	.count {width: 20px !important; height: 20px !important;padding: 2px;}

	#videoNotificationCount:contains("0") {display: none;}
	

#monitorContainRow .card:hover {box-shadow: 0px 0px 5px rgba(0,0,0,0.1)}

#monitorContainRow .card img {cursor: pointer;}

#monitorContainRow .card-body {padding: 0px; position: relative;}
#monitorContainRow .card-header {padding:10px 0px 10px 0px;}

.cameraViewCard .card-header { font-size:  0.9rem; }

.SnapShotvideoWrap, .isVideo {
	position: relative;
	cursor: context-menu;
}

.SnapShotvideoWrap:before, .videoThumbWrap:before {
	content:  " ";
	width:  100%; height: 100%;
	position: absolute; top:  0px; left:  0px;
	background: rgb(0,0,0,0.4);
}

.SnapShotvideoWrap a:before, .isVideo a:before {
	content:  " ";
	width:  20%; height: 20%;
	position: absolute; bottom:  40%; left:  40%;
	background: url("video-download.svg") no-repeat;
	opacity: 0.8;
}

.videoThumbWrap {
	position:  relative;
	width:  100px; height:  75px;
}
.videoThumbWrap:before {
	content:  " ";
	width:  20%; height: 20%;
	position: absolute; top:  70% !important; left:  10% !important;
	background: url("video-download.svg") no-repeat;
	opacity: 0.8;
}

.SnapShotvideoWrap a:hover:before, .videoThumbWrap:hover:before {
	opacity: 0.95;
}

#cameraSlider .carousel-item {
	cursor: zoom-in;
}


/*===============================*/
/* 480 - LANDSCAPE MOBILE LAYOUT */
/*===============================*/
#userIPDialog {position: absolute; top: 15px; left: 15px; z-index: 9000; min-width: 300px !important;}
@media only screen and (min-width: 480px) {
  /* Style adjustments for viewports 480px and over go here */

}





















/*=====================*/
/* 768 - TABLET LAYOUT */
/*=====================*/
@media only screen and (min-width: 768px) {
  /* Style adjustments for viewports 768px and over go here */
  #mobileMenu {display: none !important;}
  #userIPDialog {position: relative; top: 0px; left: 0px; width: auto;}
  .drift-zoom-pane.drift-inline{position:absolute;width:250px;height:250px;border-radius:125px;}
  .modal-lg, .modal-xl {max-width: 70%;}
  #monitorContainRow .card-header {padding:10px 0px 0px 0px;}


}












/*=======================*/
/* 1024 - DESKTOP LAYOUT */
/*=======================*/
@media only screen and (min-width: 992px) {
  /* Style adjustments for viewports 1024px and over go here */
  .drift-zoom-pane.drift-inline{position:absolute;width:300px;height:300px;border-radius:150px;}

}










/* WIDE DESKTOP LAYOUT */
@media only screen and (min-width: 1200px) {
  /* Style adjustments for viewports 1200px and over go here */
  .drift-zoom-pane.drift-inline{position:absolute;width:350px;height:350px;border-radius:175px;}
    .modal-lg, .modal-xl {max-width: 60%;}

}



































/* ==|== print styles =======================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}



/* PAGE INFINITE SCROLL */

.page-load-status {
  display: none;
  padding-top: 20px;
  border-top: 1px solid #DDD;
  text-align: center;
  color: #777;
}

.loader-ellips {
  font-size: 20px; /* change size here */
  position: relative;
  width: 4em;
  height: 1em;
  margin: 10px auto;
}

.loader-ellips__dot {
  display: block;
  width: 1em;
  height: 1em;
  border-radius: 0.5em;
  background: #555; /* change color here */
  position: absolute;
  animation-duration: 0.5s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
}

.loader-ellips__dot:nth-child(1),
.loader-ellips__dot:nth-child(2) {
  left: 0;
}
.loader-ellips__dot:nth-child(3) { left: 1.5em; }
.loader-ellips__dot:nth-child(4) { left: 3em; }

@keyframes reveal {
  from { transform: scale(0.001); }
  to { transform: scale(1); }
}

@keyframes slide {
  to { transform: translateX(1.5em) }
}

.loader-ellips__dot:nth-child(1) {
  animation-name: reveal;
}

.loader-ellips__dot:nth-child(2),
.loader-ellips__dot:nth-child(3) {
  animation-name: slide;
}

.loader-ellips__dot:nth-child(4) {
  animation-name: reveal;
  animation-direction: reverse;
}

/* LOGS */
#changeLogView a {padding-left: 10px; padding-right: 10px;;}