body {
    /*background-color: #0000 !important;*/
    /*font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;*/
    /*font-family:"Courier New", Courier, sans-serif !important;*/
    font-family: Tahoma, Geneva, sans-serif !important;
    /*color: #FFFFFF;*/
    overflow: auto;
    /*background-color: black;*/
}

/*.btn{*/
/*font-family:Tahoma, Geneva, sans-serif !important;*/
/*}*/


/* ==========================================================================
Hide ng-cloak on page load, https://docs.angularjs.org/api/ng/directive/ngCloak
========================================================================== */
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
    display: none !important;
}

/* ==========================================================================
Development Ribbon
========================================================================== */
.ribbon {
    background-color: #a00;
    box-shadow: 0 0 10px #888;
    left: -3.5em;
    moz-box-shadow: 0 0 10px #888;
    moz-transform: rotate(-45deg);
    ms-transform: rotate(-45deg);
    o-transform: rotate(-45deg);
    overflow: hidden;
    position: absolute;
    top: 40px;
    transform: rotate(-45deg);
    webkit-box-shadow: 0 0 10px #888;
    webkit-transform: rotate(-45deg);
    white-space: nowrap;
    width: 15em;
    z-index: 9999;
    pointer-events: none;
}

.ribbon a {
    border: 1px solid #faa;
    color: #fff;
    display: block;
    /*font: bold 81.25% 'Helvetica Neue', Helvetica, Arial, sans-serif;*/
    font-weight: bold;
    margin: 1px 0;
    padding: 10px 50px;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 0 5px #444;
    pointer-events: none;
}

/* ==========================================================================
Version number in navbar
========================================================================== */

.navbar-version {
    font-size: 8px;
    color: #ccc;
}

/* ==========================================================================
Browser Upgrade Prompt
========================================================================== */
.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
Logo styles
========================================================================== */
.navbar-brand.logo {
    padding: 0px 0px;
}

.shotpointLabel {
    padding: 0px 0px 0px 0px;
    color: #FFFFFF;
    font-size: 18px;
}

.kwiclabel {
    font-size: 9px !important;
    color: #FFFFFF;
    padding: 0px;
!important;
}

.navbar-brand.logo .logo-img {
    height: 35px;
    display: inline-block;
}

.br-class {
    display: block;
    content: "";
    margin-top: 0;
    height: 0px;
    line-height: 0.5px;
}

/* ==========================================================================
Main page styles
========================================================================== */
.hero-unit {
    margin: 50px auto 0 auto;
    width: 300px;
    font-size: 18px;
    font-weight: 200;
    line-height: 30px;
    background-color: #eee;
    border-radius: 6px;
    padding: 60px;
}

.hero-unit h1 {
    font-size: 60px;
    line-height: 1;
    letter-spacing: -1px;
}

.hipster {
    display: inline-block;
    width: 347px;
    height: 497px;
    background: url("../images/hipster.png") no-repeat center top;
    background-size: contain;
}

/* wait autoprefixer update to allow simple generation of high pixel density media query */
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
    .hipster {
        background: url("../images/hipster2x.png") no-repeat center top;
        background-size: contain;
    }
}

/* ==========================================================================
Generic styles
========================================================================== */
.error {
    color: white;
    background-color: red;
}

.pad {
    padding: 10px;
}

.break {
    white-space: normal;
    word-break: break-all;
}

.voffset {
    margin-top: 2px;
}

.voffset1 {
    margin-top: 5px;
}

.voffset2 {
    margin-top: 10px;
}

.voffset3 {
    margin-top: 15px;
}

.voffset4 {
    margin-top: 30px;
}

.voffset5 {
    margin-top: 40px;
}

.voffset6 {
    margin-top: 60px;
}

.voffset7 {
    margin-top: 80px;
}

.voffset8 {
    margin-top: 100px;
}

.voffset9 {
    margin-top: 150px;
}

.readonly {
    background-color: #eee;
    opacity: 1;
}

/* ==========================================================================
make sure browsers use the pointer cursor for anchors, even with no href
========================================================================== */
a:hover, .hand, [jh-sort-by] {
    cursor: pointer;
}

/* ==========================================================================
Metrics and Health styles
========================================================================== */
#threadDump .popover, #healthCheck .popover {
    top: inherit;
    display: block;
    font-size: 10px;
    max-width: 1024px;
}

#healthCheck .popover {
    margin-left: -50px;
}

.health-details {
    min-width: 400px;
}

/* ==========================================================================
start Password strength bar style
========================================================================== */
ul#strength {
    display: inline;
    list-style: none;
    margin: 0;
    margin-left: 15px;
    padding: 0;
    vertical-align: 2px;
}

.point {
    background: #DDD;
    border-radius: 2px;
    display: inline-block;
    height: 5px;
    margin-right: 1px;
    width: 20px;
}

.point:last {
    margin: 0 !important;
}

/* ==========================================================================
Custom alerts for notification
========================================================================== */
.alerts .alert {
    text-overflow: ellipsis;
    position: fixed;
    z-index: 9999999;
    margin-bottom: 0 !important;
    text-align: center;
    left:50%;
    text-wrap: normal;
    padding: 5px;
    width: 400px;
    overflow-wrap: break-word;
    height:auto;
}

.alerts .alert pre {
    background: none;
    border: none;
    font: inherit;
    color: inherit;
    padding: 0;
    margin: 0;
    overflow-wrap: break-word;
    overflow: hidden;
    overflow-wrap: break-word;
}

.alerts .alert .popover pre {
    font-size: 10px;
    overflow-wrap: break-word;
    overflow: hidden;
    overflow-wrap: break-word;
}

.alerts .toast {
    position: fixed;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}

.alerts .toast.left {
    left: 5px;
}

.alerts .toast.right {
    right: 5px;
}

.alerts .toast.top {
    top: 55px;
}

.alerts .toast.bottom {
    bottom: 0px;
}

@media screen and (min-width: 480px) {
    .alerts .toast {
        width: 40%;
    }
}

/* ==========================================================================
entity tables helpers
========================================================================== */
/* Remove Bootstrap padding from the element
   http://stackoverflow.com/questions/19562903/remove-padding-from-columns-in-bootstrap-3 */
.no-padding-left {
    padding-left: 0 !important;
}

.no-padding-right {
    padding-right: 0 !important;
}

.no-padding-top {
    padding-top: 0 !important;
}

.no-padding-bottom {
    padding-bottom: 0 !important;
}

.no-padding {
    padding: 0 !important;
}

/* bootstrap 3 input-group 100% width
   http://stackoverflow.com/questions/23436430/bootstrap-3-input-group-100-width */
.width-min {
    width: 1% !important;
}

/* Makes toolbar not wrap on smaller screens
   http://www.sketchingwithcss.com/samplechapter/cheatsheet.html#right */
.flex-btn-group-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}

.jh-table > tbody > tr > td {
    /* Align text in td vertically (top aligned by Bootstrap) */
    vertical-align: middle;
    width: fit-content !important;

}

.jh-table {

    display: block;
    flex-flow: column;

    height:100%;
    overflow: auto !important;

}

.jh-table > td {
    /*display:inline-block;*/
    width: fit-content !important;
}

.jh-table > th {

    /*display:inline-block;*/
    width: fit-content !important;
}

.jh-table > thead > tr > th > .glyphicon-sort, .jh-table > thead > tr > th > .glyphicon-sort-by-attributes, .jh-table > thead > tr > th > .glyphicon-sort-by-attributes-alt {
    /* less visible sorting icons */
    opacity: 0.5;
}

.jh-table > thead > tr > th > .glyphicon-sort:hover, .jh-table > thead > tr > th > .glyphicon-sort-by-attributes:hover, .jh-table > thead > tr > th > .glyphicon-sort-by-attributes-alt:hover {
    /* full visible sorting icons and pointer when mouse is over them */
    opacity: 1;
    cursor: pointer;
}

/* ==========================================================================
entity detail page css
========================================================================== */
.dl-horizontal.jh-entity-details > dd {
    margin-bottom: 15px;
}

@media screen and (min-width: 768px) {
    .dl-horizontal.jh-entity-details > dt {
        margin-bottom: 15px;
    }

    .dl-horizontal.jh-entity-details > dd {
        border-bottom: 1px solid #eee;
        padding-left: 180px;
        margin-left: 0;
    }
}

/* ==========================================================================
ui bootstrap tweaks
========================================================================== */
.nav, .pagination, .carousel, .panel-title a {
    cursor: pointer;
}

/***
@animesh
For map UI changes and reduce spacing
 */
.nav, .navbar, navbar-default {
    margin-bottom: 0px !important;
    color: #3333;
    /*opacity: 0.7;*/
    /*position:fixed;*/
    /*z-index: 9999999;*/
    /*width: 150%;*/
    /*margin-top: 0px;*/
    /*margin-right: 0;*/
    background-color: black;

}

.navbar-inverse {
    color: #3333;
    border-radius: 0px;
    background-color: black;
    border-radius: 0;
    z-index: 1001;
    /*height: 1% !important;*/
    /*opacity: 0.7;*/
    /*position:fixed;*/
    /*margin-right: 1px!important;*/
    /*margin-left: auto;*/
    /*width: 70%;*/

}

.datetime-picker-dropdown > li.date-picker-menu div > table .btn-default,
.uib-datepicker-popup > li > div.uib-datepicker > table .btn-default {
    border: 0;
}

.datetime-picker-dropdown > li.date-picker-menu div > table:focus,
.uib-datepicker-popup > li > div.uib-datepicker > table:focus {
    outline: none;
}

.signon {
    opacity: 0.8;
    background-color: black;
    color: white;
}

.close {
    color: #fff;
    opacity: 1;
}

.map-control-bar {
    /*background-color: rgba(255, 255, 255, 0.2) !important;*/
    margin-top: 20px;
    max-width: 25% !important;
    float: left !important;
    text-align: left !important;

}


/*#00a0f2 !important*/

.map-btn-2 button {
    background-color: #00a0f2;
    color: #FFFFFF;
    text-align: center!important;
    font-size: 11px;
    width: 32px;
    padding: 2px!important;
    height: 20px;
    vertical-align: center;
}

.map-btn-2 label,.map-btn-2 input {
    background-color: #00a0f2;
    color: #FFFFFF;
    text-align: center!important;
    font-size: 11px;
    width: 32px;
    padding: 2px!important;
    height: 20px;
    vertical-align: center;
}

.map-btn-2-squad button {
    background-color: #00a0f2;
    color: #FFFFFF;
    /*max-width: 120px;*/

}

.map-btn-2-squad label input {
    background-color: #00a0f2;
    color: #FFFFFF;
    max-width: 120px;
}

.map-btn-2-selected button {
    background-color: #00a0f2;
    color: #FFFFFF;
    border: 2px solid black;
    text-align: center!important;
    font-size: 11px;
    width: 32px;
    padding: 2px!important;
    vertical-align: center;
}
.selected{
    border-left: 2px solid black;
}
.map-btn-2-selected label input {
    background-color: #00a0f2;
    color: #FFFFFF;
    border: 2px solid black;
    text-align: center!important;
    font-size: 11px;
    width: 32px;
    padding: 2px!important;
    vertical-align: center;

}


.map-btn-button {
    background-color: #00a0f2;
    color: #FFFFFF;
}

.map-control-bar .map-check {
    width: 100%;
}

/*@media only screen and (max-width: 600px){*/
/*.map-control-bar {*/
/*width: 45% !important;*/
/*}*/
/*}*/
@media only screen and (max-width: 1600px) {
    .map-control-bar {
        /*
        width: 32% !important;
        */
    }
}


.map-control-bar {
    /*background-color: rgba(21, 113, 251, 0.58) !important;*/
    background-color: rgba(0, 0, 0, 0);
    position: absolute;
    top: 50px;
    width: 10px;
    left: 1px;


}

.btn-text b {
    display: inline
}

.btn-text:not(.collapsed) span {
    display: none
}

.btn-text.collapsed b {
    display: none
}

.switch input {
    display: none;
}

.ol-zoom {
    top: 14.5em;
    left: 0;

}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
    background-color: #2196F3;
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 24px;
}

.slider.round:before {
    border-radius: 50%;
}

#onlineIndicator {
    background-color: rgba(0, 0, 0, 0);
    display: none;
    font-size: 14px;
    color: #5AFF8C;
    width: 15px;
    text-align: center;
    padding: 2px;
    height: 15px;
    border-radius: 20px;
}

/*button.btn.collapsed:before*/
/*{*/
/*content:'Show Menu' ;*/
/*display:block;*/
/*width:15px;*/
/*}*/
/*button.btn:before*/
/*{*/
/*content:'Hide Menu' ;*/
/*display:block;*/
/*width:15px;*/
/*}*/

/* jhipster-needle-scss-add-main JHipster will add new css style */

/*.navbar-inverse .nav > li.active > a {*/
/*background-color: rgba(77, 78, 79, 0.73) !important;*/
/*padding-bottom:0 !important;*/
/*}*/
/*.navbar-nav > li > a, .navbar-brand, navbar-inverse,.logo-img, .logo {padding-top:5px !important; padding-bottom:0 !important; height: 30px!important; } .navbar {min-height:30px !important;}*/

/*.navbar-inverse .navbar-nav > li > a {*/
/*color: #A39FE8 !important;*/

/*}*/

.dropdown-menu {
    z-index: 99999 !important;
    background-color: #1A1A1A !important;
    color: white !important;
}

.dropdown-menu > li {
    color: white !important;
}

.dropdown-menu > a {
    color: white !important;
}

.dropdown-menu > li > a {
    color: #ffffff;
}

.dropdown-menu > li > a:hover {
    color: rgba(29, 79, 195, 1) !important;
}

.survey-button {
    width: 40px !important;
}

.main-map-layer {
    overflow: hidden !important;
}

.mapCenter {
    overflow: hidden !important;
}

.map-view {
    overflow: hidden !important;
}

.wide-content {
    width: 98% !important;
}

.trajectory-info {
    /*position: absolute;*/
    background-color: white;
    -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
    padding: 20px;
    border-radius: 40px;
    border: 1px solid #cccccc;
    bottom: 12px;
    left: -50px;
    min-width: 230px;
    width: 30%;

}

.trajectory-info:after, .trajectory-info:before {
    top: 100%;
    /*border: solid transparent;*/
    content: " ";
    height: 0;
    /*width: 0;*/
    /*position: absolute;*/
    pointer-events: none;
}

.trajectory-info:after {
    border-top-color: white;
    border-width: 10px;
    left: 48px;
    /*margin-left: -10px;*/
}

.trajectory-info:before {
    border-top-color: #cccccc;
    border-width: 11px;
    left: 48px;

}

.trajectory-info-closer {
    text-decoration: none;
    position: absolute;
    top: 2px;
    right: 8px;
    font-size: 24px;
}

.trajectory-info-closer:after {
    content: "✖";
}

.shot-icon {
    max-width: 256px;
    width: 20px;
    height: 20px;
    max-height: 256px;
    display: inline-block;
    background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ5Ny44NjcgNDk3Ljg2NyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDk3Ljg2NyA0OTcuODY3OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjI0cHgiIGhlaWdodD0iMjRweCI+CjxnPgoJPGc+CgkJPHBhdGggZD0iTTQ3Ny41NDYsMjI4LjYxNmgtNTMuNTY3Yy05LjgyNy04MC4wMzQtNzQuMDE5LTE0My42MDgtMTU0LjcxOS0xNTMuMTM0VjIwLjMyMSAgICBDMjY5LjI1OSw5LjA5NiwyNjAuMTU1LDAsMjQ4LjkzOCwwYy0xMS4yMjYsMC0yMC4zMjEsOS4wOTYtMjAuMzIxLDIwLjMyMXY1NC45NzRjLTgxLjM3NSw4Ljk0MS0xNDYuMjU3LDcyLjgwOC0xNTYuMTUsMTUzLjMxMyAgICBIMjAuMzIxQzkuMDk2LDIyOC42MDgsMCwyMzcuNzA0LDAsMjQ4LjkyOXM5LjA5NiwyMC4zMjEsMjAuMzIxLDIwLjMyMUg3Mi4xOWM4Ljk5LDgxLjUxMyw3NC4zMjgsMTQ2LjQyOCwxNTYuNDI2LDE1NS40NTF2NTIuODQ0ICAgIGMwLDExLjIyNiw5LjA5NiwyMC4zMjEsMjAuMzIxLDIwLjMyMWMxMS4yMTcsMCwyMC4zMjEtOS4wOTYsMjAuMzIxLTIwLjMyMXYtNTMuMDIzYzgxLjQxNi05LjYwOCwxNDYuMDU0LTc0LjIyMiwxNTQuOTk2LTE1NS4yNjQgICAgaDUzLjI5MWMxMS4yMjYsMCwyMC4zMjEtOS4wOTYsMjAuMzIxLTIwLjMyMVM0ODguNzcxLDIyOC42MTYsNDc3LjU0NiwyMjguNjE2eiBNMjY5LjI1OSwzODMuMzkydi02Ny4wMjggICAgYzAtMTEuMjI2LTkuMTA0LTIwLjMyMS0yMC4zMjEtMjAuMzIxYy0xMS4yMjYsMC0yMC4zMjEsOS4wOTYtMjAuMzIxLDIwLjMyMXY2Ny4yNGMtNTkuNjA3LTguNTUxLTEwNi43NTMtNTUuMjk5LTExNS4zMTItMTE0LjM0NSAgICBoNjguMjA3YzExLjIyNiwwLDIwLjMyMS05LjA5NiwyMC4zMjEtMjAuMzIxcy05LjA5Ni0yMC4zMjEtMjAuMzIxLTIwLjMyMWgtNjcuODgyYzkuMzgtNTguMDQ2LDU2LjEwMy0xMDMuNzYxLDExNC45ODctMTEyLjIxNSAgICB2NjUuMTFjMCwxMS4yMjYsOS4wOTYsMjAuMzIxLDIwLjMyMSwyMC4zMjFjMTEuMjE3LDAsMjAuMzIxLTkuMDk2LDIwLjMyMS0yMC4zMjF2LTY0Ljg5OSAgICBjNTguMjA5LDguOTgyLDEwNC4yNDksNTQuNDIxLDExMy41NTYsMTEyLjAwNGgtNjYuNDU5Yy0xMS4yMjYsMC0yMC4zMjEsOS4wOTYtMjAuMzIxLDIwLjMyMXM5LjA5NiwyMC4zMjEsMjAuMzIxLDIwLjMyMWg2Ni43OTMgICAgQzM3NC42NDYsMzI3Ljg0MiwzMjguMTkxLDM3NC4yOTcsMjY5LjI1OSwzODMuMzkyeiIgZmlsbD0iI0Q4MDAyNyIvPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.server-message {
    word-break: break-all;
}

.vis-current-time {
    background-color: rgba(220, 0, 0, 0.5);
    border-color: white;
    border-width: 1px !important;
    width: 8px;
    z-index: 1;
    pointer-events: none
}

.vis-rolling-mode-btn {
    height: 40px;
    width: 40px;
    position: absolute;
    top: 7px;
    right: 20px;
    border-radius: 50%;
    font-size: 28px;
    cursor: pointer;
    opacity: .8;
    color: #fff;
    font-weight: 700;
    text-align: center;
    /*background: #3876c2*/
    background-image: url('/content/images/icons/play_icon_sm.png');
    background-size: contain;
    background-repeat: no-repeat;
}

.vis-rolling-mode-btn:before {
    background-image: url('/content/images/icons/play_icon_sm.png');
    background-size: contain;
    background-repeat: no-repeat;
}

.vis-rolling-mode-btn:hover {
    opacity: 1
}

.vis-vertical-scroll .vis-right {
    width: 10px;
    height: 100px;
    color: #00a0f2;

    scrollbar-base-color: #0e90d2;

}

.vis-vertical-scroll .vis-right::-webkit-scrollbar {
    width: 1em;
}

.vis-vertical-scroll .vis-right::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

.vis-vertical-scroll .vis-right::-webkit-scrollbar-thumb {
    background-color: #00a0f2;
    outline: 1px solid slategrey;
}


.vis-timeline {
    overflow: visible;
    /*background-color: black;*/
}

.vis-panel {
    padding-left: 2px;
    padding-right: 2px;
    margin: 0;
}

.vis-background {
    color: white;
    border-color: white;
}

.vis-time-axis {
    /*background-color: black;*/
}

#result-panel {
    /*background-color: black!important;*/

}

.shot-list-button-container {
    position: absolute;
    z-index: 1000;
    top: 40%;
    right: 0;
    text-align: left;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    border-radius: 0;
}

#shotList .alert {
    padding: 5px !important;
    margin-bottom: 1px !important;
    text-align: center;
    font-size: medium;
    /*border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;*/
}

#shotList .alert-bang, #shotList .btn-bang {
    background-color: #0A0A0A;
    color: #fff;
}

#shotList {

    position: absolute;
    z-index: 1000;
    top: 45%;
    right: 0;
    max-height: 25%;
    width: 350px;
    overflow-y: auto;


}

.large-font {
    font-size: 15px;
}

#shotList .alert-danger {
    background-color: #ef5350;
    margin: 0;
    transition: box-shadow .25s;
    border-radius: 2px;
    border-color: #ebccd1;
    color: white;
    font-weight: bolder;
    font-size: 14px;
    text-align: center;
    font-family: Tahoma, Geneva, sans-serif !important;

}


.shot-image-title {
    font-family: Tahoma, Geneva, sans-serif !important;
    background-color: #ef5350;
    margin: 0;
    font-size: 16px;
    border-radius: 2px;
    color: #FFFFFF;
    border-color: #ef5350;
    font-weight: bolder;
    text-align: center;
    cursor: move;
    padding: 5px;

}

.detection-image-title {
    font-family: Tahoma, Geneva, sans-serif !important;
    background-color: rgba(0, 178, 255, 0.95);
    margin: 0;
    font-size: 16px;
    border-radius: 2px;
    color: #FFFFFF;
    border-color: rgba(225, 235, 255, 0.95);
    font-weight: bolder;
    text-align: center;
    cursor: move;
    padding: 5px;

}
.test-image-title {
    font-family: Tahoma, Geneva, sans-serif !important;
    background-color: #f9d806;
    margin: 0;
    font-size: 16px;
    border-radius: 2px;
    color: #FFFFFF;
    border-color: rgba(225, 235, 255, 0.95);
    font-weight: bolder;
    text-align: center;
    cursor: move;
    padding: 5px;

}

.ruckus-image-title {
    font-family: Tahoma, Geneva, sans-serif !important;
    background-color: #0df200;
    margin: 0;
    font-size: 16px;
    border-radius: 2px;
    color: #FFFFFF;
    border-color: rgba(225, 235, 255, 0.95);
    font-weight: bolder;
    text-align: center;
    cursor: move;
    padding: 5px;

}

.bang-image-title {
    font-family: Tahoma, Geneva, sans-serif !important;
    background-color: black;
    margin: 0;
    font-size: 16px;
    border-radius: 2px;
    color: #FFFFFF;
    border-color: #0df200;
    font-weight: bolder;
    text-align: center;
    cursor: move;
    padding: 5px;
}

.btn-circle {
    border-radius: 50% !important;
    text-wrap: normal;
}

.bg-wine-red {
    background-color: rgba(255, 0, 0, 0.75) !important;
    font-weight: bolder;
}

.text-white {
    color: #FFFFFF;
}

.text-success {
    color: greenyellow;
}

.text-yellow {
    color: rgba(255, 211, 0, 0.95);
}

#current-shot-image {
    width: 45%;
    height: auto;
    max-height: 90% !important;
    overflow-y: auto;
    left: 2%;
    margin-right: auto;
    z-index: 1020;
    position: absolute;
    /*top: 50px;*/
    top: auto;
    bottom:auto;
    margin-top:auto;
    margin-bottom:auto;
    vertical-align: middle;
    background-color: rgba(0, 0, 0, 0);
    text-align: center;
}
.hblabel2{
    display:none;
}
/*// height 90% & test*/
#current-shot-image-center {
    width: 40%;
    height: fit-content;
    max-height: 90% !important;

    overflow-y: auto;
    left: 25%;
    margin:auto;
    z-index: 1020;

    vertical-align: middle;
    position: absolute;
    /*top: 50px;*/
    top: 10%;
    /*bottom: 0;*/
    left: 0;
    right: 0;
    /*bottom:auto;*/
    background-color: rgba(0, 0, 0, 0);
    text-align: center;
}
#camera-image-center {
    width: fit-content;
    height: fit-content;
    max-height: 90% !important;
    overflow-y: auto;
    margin:auto;
    z-index: 1020;
    vertical-align: middle;
    position: absolute;
    /*top: 50px;*/
    top: 10%;
    /*bottom: 0;*/
    left: 0;
    right: 0;
    /*bottom:auto;*/
    text-align: center;
}

.close-button {
    float: right;
    border-color: #FFFFFF;
}

.btn-round {
    border-radius: 15px !important;
}
.btn-round-edges {
    border-radius: 5px !important;
}


.shot-img {
    display: inline;
    max-width: 100%;
    height: auto;
    margin-right: auto;
    margin-left: auto;
    width: auto;
    font-family: Tahoma, Geneva, sans-serif !important;

    background-color: #0A0A0A;
}

.current-shot-wrapper {

    width: 100%;
    height: 100%;
    /*z-index: 1020;*/
    position: absolute;
    top: 5px;
    left: 0;

    background-color: rgba(0, 0, 0, 0.1);
    text-align: center;
}

/*.vis-grid{*/
/*color:white!important;*/
/*border-color: white!important;*/
/*!*background-color: white!important;*!*/
/*}*/
/*.vis-major{*/
/*color:white!important;*/
/*border-color: white!important;*/
/*}*/
/*.vis-minor{*/
/*color:white!important;*/
/*border-color: white!important;*/
/*}*/

/* The switch - the box around the slider */
@media (max-width: 800px) {

    #current-shot-image, #current-shot-image-center {
        width: 97%;
        height: auto;
        max-height: 90% !important;
        left: 2%;
        margin-right: auto;
        z-index: 1020;
        position: absolute;
        top: 5px;
        background-color: rgba(118, 134, 160, 0.62);
        text-align: center;

    }

    #current-shot-image-center {

    }

    .modal-dialog {
        top: 5%;
        width: 97% !important;
        max-height: 90% !important;
    }


}

.new-shot-btn {
    font-size: 10px;
}

.border-white {
    border: 1px solid white;
}

/*.app-modal-window */
.modal-dialog {
    max-width: 60%;
    max-height: 50%;
    margin-left: auto;
    margin-right: auto;
}

.login-modal-dialog{
    max-width: 60%;
    margin-top: 10%;
    margin-right: auto;
    margin-left: auto;
}

.map-tool-table {
    background-color: rgba(0, 160, 240, 0.4);
    color: #FFFFFF;
    border: 1px solid black;
    width: 200px;
}


@media only screen and (max-width: 750px) {
    .navbar, .navbar-inverse, .navbar-collapse {
        background-color: rgba(0, 0, 0, 0);
        width: 200px;
        position: absolute;
        top: 0;
        right: 0;
        border: none;
        /*right:auto;*/

    }

    .login-modal-dialog{
        width: 100%;
        margin-top: 10%;
        margin-right: auto;
        margin-left: auto;
    }
    .shot-list-button-container{
        display:none;
    }
    #shotList{
        display:none;
    }
    .main-map-layer {
        height: 100% !important;
        width: 100% !important;
        margin: 0px !important;
        padding: 0px !important;

    }

    #switch-when-home {
        height: 100%;
    }

    .home-body {
        height: 100% !important;
        width: 100% !important;
        overflow: hidden;


    }

    body {
        height: 100% !important;
    }

    .navbar-toggle {
        margin-right: 0 !important;
        background-color: black;
        margin-top: 0px;

    }

    .ol-floors {
        top: 80px !important;
        right: 0 !important;
        margin-right: 0 !important;
    }
    #field_name_area{
        overflow: auto!important;
        max-height: 300px;


    }
    #field_name_area ul{
        overflow: auto!important;
        max-height: 300px;
    }
    .field_name_area ul{
        overflow: auto!important;
        max-height: 300px;
    }

    .field_name_area .dropdown-toggle {
        overflow: auto!important;
        max-height: 300px;
    }

    .field_name_area .dropdown-menu {
        overflow: auto!important;
        max-height: 300px;
    }
    .ol-zoom {
        display: none;
    }

    .map-control-bar {
        top: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }


    .map-check {
        color: #FFF5FC;
        z-index: 1000;
        display: inline-block;
        margin-top: 0px !important;
        padding: 0px !important;
        right: 0;
        margin-right: 0;
    }


    #mapTools {
        margin-top: 20px;
    }

    .hblabel {
        display: none;
        content: "HB";

    }

    .hblabel2 {
        display: inline;

    }

    .floor-menu {
        /*position: relative;*/
        margin-top: 95px !important;
        min-width: 50px;
    }


}

.table-head{
    font-weight: bolder;
    border: 1px solid #00a0f2;
    text-transform: uppercase;

}
.font-weight-bold {
    font-weight: 700 !important;
}
/*.vis-grid{*/
/*color:white!important;*/
/*border-color: white!important;*/
/*!*background-color: white!important;*!*/
/*}*/
/*.vis-major{*/
/*color:white!important;*/
/*border-color: white!important;*/
/*}*/
/*.vis-minor{*/
/*color:white!important;*/
/*border-color: white!important;*/
/*}*/

/* The switch - the box around the slider */