body.single-page .page-content {
    margin-top: 80px;
}
.tree-container {
    /*background-color: #f8f8f8;
    border: 1px solid #eee;*/
    padding-top: 3px;
}
treenode .node-title {
    background-color: #ddd;
    padding: 3px;
    margin-bottom: 3px;
    display: inline-block;
    border-radius: 5px;
}
.tree-node-ico {
    height: 14px !important;
    vertical-align: middle;
}
treenode .selected {
    background-color: transparent;
    /*color: #106bc5;*/
    /*font-weight: bold;*/
}
treenode .node-name {
    display: inline-block;
    vertical-align: middle;
    margin-left: 3px;
}
treenode ul li {
    font-size: 10px;
}

.tab-box {
    border-width: 0 1px 1px 1px;
    border-style: solid;
    border-color: #ccc;
    padding: 15px;
}

.nav-tabs .nav-link {
    outline: none !important;
}

.single-page-block .single-page-block-inner h3 {
    text-align: center;
}
img.login-logo {
    width: 125px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin-bottom: 15px;
}
.single-page-block-inner hr {
    margin-top: 30px;
}
.input-ico {
    position: absolute;
    bottom: 13px;
    left: 15px;
    color: #999;
}

.login-box .form-control {
    padding-left: 35px;
}

.login-box .full-width {
    margin-top: 10px;
}

.login-box .checkbox {
    margin-bottom: 0;
    margin-top: 10px;
}

.reset-password-box{
    top: 50%;
    transform: translateY(-55%);
    position: absolute;
}

.login-box {
    width: 100%;
    top: 55%;
    transform: translateY(-55%);
    position: absolute;
    display: flex;
    overflow: auto;
}

@media only screen and (min-width: 1200px){
    .login-box{
        height: 70%;
        top: 53%;
        margin-left: 10px;
    }
    .hover_background_news{
        height: 500px;
        margin-left: 10px;
    }
    .login-content{
        height: 500px;
    }
}

@media only screen and (max-width: 1200px){
    .login-box{
        height: 100%;
        top: 53%;
    }
    .hover_background_news{
        height: 400px;
    }
    .login-content{
        height: 400px;
    }
}

.btn[data-title="Edit Table"] .fa-wrench::before {
    /*content: "\f040";*/
}
a#imageLink1 {
    width: 250px;
    height: 165px;
    border: 5px dotted #aaa;
    display: block;
    border-radius: 5px;
    font-size: 65px;
    color: #aaa;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 15px;
}

a#imageLink1::after {
    content: "Click here to upload an image...";
    font-size: 20px;
    line-height: 1.2;
    display: inline-block;
    vertical-align: middle;
    margin-top: -83px;
}
#imageLink img {
    display: block;
    position: relative;
}

a#imageLink {
    border: 1px solid #dadada;
    display: block;
    padding: 15px;
}

a#imageLinkForRowAnalysisTable {
    width: 30px;
    height: 30px;
    border: 5px dotted #aaa;
    display: block;
    border-radius: 1px;
    font-size: 1px;
    color: #aaa;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1px;
}

/*a#imageLinkForRowAnalysisTable::after {*/
    /*content: "Click here to upload an image...";*/
    /*font-size: px;*/
    /*line-height: 1.2;*/
    /*display: inline-block;*/
    /*vertical-align: middle;*/
    /*margin-top: -83px;*/
/*}*/

.btn[data-title="Delete Image"] {
    margin-top: 5px;
    position: absolute;
    top: 11px;
    right: 24px;
    z-index: 99;
}

@media (min-width: 544px){
    .confirmation-msg-modal .modal-dialog {
        /*width: 300px;*/
    }
}

.confirmation-msg-modal .modal-header h3 {
    font-size: 15px;
    text-align: left;
}

.confirmation-msg-modal .modal-header {
    background-color: #eee;
    border-radius: 5px 5px 0 0;
    border-bottom: 1px solid #ccc;
}

.confirmation-msg-modal .modal-footer {
    border-top: 1px solid #ccc;
}

.confirmation-msg-modal .modal-body p {
    margin: 0;
}
.dialog-msg .msg-ico {
    font-size: 45px;
    vertical-align: middle;
    margin-right: 15px;
}

.activity-msg {
    background-color: #f75858;
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    margin-top: -5px;
    display: inline-block;
}

.langBtn .dropdown-menu {
    height: auto;
}
.grid-icons .btn.btn-primary:hover {
    color: #01a8fe !important;
}

.table-responsive {
    min-height: 430px;
    overflow: hidden;
    transition: all .2s ease-in-out;
}
.table-responsive:hover {
    overflow-x: auto;
}

/*//////////////////*/
/*//////////////////*/
.balanceTable-responsive {
    overflow-x: hidden;
    transition: all .2s ease-in-out;
}
.balanceTable-responsive:hover {
    overflow-x: auto;
}
/*//////////////////*/
/*//////////////////*/
.tbContainer .btn::after,
#zoomIn::after,
#zoomOut::after {
    content: "";
    background-color: #01a8fe;
    position: absolute;
    top: 128%;
    padding: 3px 8px;
    border-radius: 3px;
    z-index: 90;
    box-shadow: 1px 1px 5px rgba(0,0,0,.25);
    left: 0;
    font-size: 13px;
    opacity: 0;
    transition: opacity .2s ease-in-out;
}

.tbContainer .btn:first-child::after {
    content: "Add Flow";
}

.tbContainer .btn:nth-child(2)::after {
    content: "Add Station"
}
#zoomIn::after {
    content: "Zoom In";
}
#zoomOut::after {
    content: "Zoom Out";
}

.tbContainer .btn:hover::after,
.tbContainer .btn:hover::before,
#zoomIn:hover::after,
#zoomOut:hover::after,
#zoomIn:hover::before,
#zoomOut:hover::before {
    opacity: 1;
}

.tbContainer .btn::before,
#zoomIn::before,
#zoomOut::before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 6px solid #01a8fe;
    top: 110%;
    opacity: 0;
    transition: opacity .2s ease-in-out;
}

.tbl-check thead tr th:first-child {
    width: 45px !important;
}
.confirmation-msg-modal .modal-footer .btn:first-child {
    float: right;
    margin-left: 10px;
}

/*.........activity detail table style...........*/

.td-text-field{
    max-width: 50px;
    overflow: hidden;
}
.activity-detail-img{
    width: 100px;
    height: 100px;
}

.analysisRowTable-padding{
    padding-top: 5px!important;
}

.analysisRowTableNumbers-padding{
    padding-left: 0px!important;
    padding-right: 0!important;
}

.sequencetd-width{
    width: 75px;
}

.imgtd-width{
    width: 60px;
}

.moredetail-header{
    background-color: #ccc;
    height: 40px;
    border-radius: 5px;
}
.moredetail-header-p{
    text-align: center;
    padding-top: 6px;
    font-weight: bold;
}

.moredetail-name{
    font-weight: 700;
    margin-left: 8px;
    font-size: 16px;
}

.moredetail-lineh{
    line-height: 30px;
}

.moredetail-edit-icon{
    float: right;
    margin-right: 5px;
}

.moredetail-lable-margin{
    margin-top: 19px;
}

.moredetails-frequency-dash{
    margin: 9px -20px;
}

.frequency-input-width{
    width: 75px;
}

.department-table-head{
    text-align: left;
}

.publish-loader {
    border: 4px solid #f9af58;
    border-radius: 50%;
    border-top: 4px solid #38354A;
    width: 30px;
    height: 30px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
    margin-right: 10px;
}

/* Safari */
@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.activity-pichart-container {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.activity-pichart-container {
    width: 300px;
    height: 300px;
}

.balance-graph-popup{
    text-align: center;
    color:white;
    font-size: medium;
    font-family:sans-serif;
    background-color:black;
    width:auto;
    border: 1px solid black;
    border-radius:5px;
    padding: 5px;
}

.c3-ygrid-line line {
    stroke: red;
}

.bootstrap-datetimepicker-widget table td, .bootstrap-datetimepicker-widget table th {
	min-width: 30px !important;
}

.edit-activity-chart-y-axis{
    background: none;
    border-top: 1px solid;
    width: 6px;
    bottom: 3px;
    z-index: 0 !important;
    left: 3.1%;
}

.edit-activity-chart-y-axis p{
    margin-top: -9px;
    float: right;
    padding-right: 14px;
    font-size: x-small;
}

.balance-edit-chart{
    display:table;
    table-layout: fixed;
    position: relative;
    width:93%;
    /*max-width:700px;*/
    height:300px;
    margin:0 auto;

    background-image:linear-gradient(bottom, rgba(33, 44, 111, 0) 2%, transparent 0%);
    background-size: 100% 50px;
    background-position: left top;

    border-left: 1px solid;
    border-bottom: 1px solid;
}

.jph-line-edit-activity-balance{
    background: none;
    border-top: 1px solid red;
    width: 96%;
    bottom: 3px;
    z-index: 0 !important;
    left: 3.6%;
    float: right;
}

.jph-line-edit-activity-balance p{
    text-align: center;
    margin-top: -10px;
    height: 20px;
    float:right;
    line-height: 20px;
    font-size: 15px;
}

.jph-line-edit-activity-balance p span{
    background-color: white;
    font-size: x-small;
    cursor: context-menu;
    opacity: 1;
}

.balance-edit-chart div{
    position: relative;
    display:table-cell;
    vertical-align:bottom;
    height:200px;
    bottom: 1px;
    z-index: 1;
}

.balance-edit-chart span:hover{
    /*background: rgba(201,253,171, 0.5)!important;*/
    opacity: 0.75;
}
.store span{
    /*margin-bottom:10px;*/
    /*width: 100px;*/
    /*height: 100px !important;*/
    margin-top: 10px;
    /* padding: 22px; */
    /* margin: 8px; */
    /* top: 8px; */
    margin-right: 10px;
    /* margin-bottom: 10px; */
    width: 100px
}
.store li {
    position: relative;
    display: flex;
    vertical-align: bottom;
    height: 200px;
}

.balance-edit-chart span{
    margin: 0 1em;
    display: block;
    background: rgba(44,55,66, .75);
    animation: draw 1s ease-in-out;
    /* border: 0.5px solid #fff; */
    outline: 0.001em solid #fff;
    outline-offset: 0px;
    cursor: pointer;
    opacity: 0.9;
}

.balance-edit-chart span::before{
    position:absolute;
    left:0;right:0;top:100%;
    padding:5px 1em 0;
    display:block;
    text-align:center;
    content:attr(title);
    word-wrap: break-word;
}

.edit-chart-container{
    position: relative;
    margin-left: 45px;
}

.bucket-container{
    height:auto;
    background: #eaeaea;
    opacity: 0.8;
}

.bucket-text{
    position: absolute;
    top: 54%;
    left: 34%;
    font-size: 14px;
}

.bucket-text-label{
    position: absolute;
    top: 35%;
    left: 45%;
    font-size: 23px;
}

.s{
    /*height: 100px;*/
}

.tooltipster-sidetip.tooltipster-noir.tooltipster-noir-customized .tooltipster-box {
    background: black;
    border: none;
}

.tooltipster-sidetip.tooltipster-noir.tooltipster-noir-customized .tooltipster-content {
    color: white;
    padding: 8px;
}

.breadcrumb_div {
    position: absolute;
    top: 35px;
    left:-40px;
    line-height: 16px;
    z-index:-2;
    width: 100%;
}


.breadCrumbs {
    position: relative;
}

.breadCrumbs li {
    position: relative;
    float: left;
}

.breadCrumbs li a,
.breadCrumbs li p {
    display: block;
    padding: 0 10px 0 30px;
    line-height: 31px;
    color: #fff;
    background: #9f9bb2;
}

.breadCrumbs li:first-child a {
    padding: 0 10px 0 20px;
}

.breadCrumbs li a:hover {

}

.breadCrumbs li:after {
    content: '';
    position: absolute;
    top: 0;
    right: -20px;
    display: block;
    width: 0;
    height: 0;
    border-bottom: 15px solid transparent;
    border-top: 16px solid transparent;
    border-left: 20px solid #9f9bb2;
    z-index: 10;
}

/* GIVE EVERY CHILD A DIFFERENT COLOR */
.breadCrumbs li:nth-child(1) a {
    background: #38354a;
}

.breadCrumbs li:nth-child(1):after {
    border-left: 20px solid #38354a;
    border-bottom: 15px solid transparent;
    border-top: 16px solid transparent;
}

.breadCrumbs li:nth-child(2) a {
    background: #4e4a63;
}

.breadCrumbs li:nth-child(2):after {
    border-left: 20px solid #4e4a63;
    border-bottom: 15px solid transparent;
    border-top: 16px solid transparent;
}

.breadCrumbs li:nth-child(3) a {
    background: #64607a;
}

.breadCrumbs li:nth-child(3):after {
    border-left: 20px solid #64607a;
    border-bottom: 15px solid transparent;
    border-top: 16px solid transparent;
}

.breadCrumbs li:nth-child(4) a {
    background: #7e7a93;
}

.breadCrumbs li:nth-child(4):after {
    border-left: 20px solid #7e7a93;
    border-bottom: 15px solid transparent;
    border-top: 16px solid transparent;
}
input[type=number]::-webkit-inner-spin-button,
.instructionEdit_inputWidth input[type=number]::-webkit-outer-spin-button{
    /*min-width:80px;*/
/*input[type=number]::-webkit-inner-spin-button,*/
/*input[type=number]::-webkit-outer-spin-button {*/
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;

}
.instructionEdit_inputWidth{
    min-width: 32px;
    padding-right: 1px !important;
    padding-left: 1px !important;
}

.instructionEdit_inputWidth input{
    padding: 0px;
}

.weekDays_selector input {
    display: none !important;
}

.weekDays_selector input[type=checkbox] + label {
    display: inline-block;
    border-radius: 50%;
    background-color: #dddcdd !important;
    height:40px;
    width: 40px;
    margin-right: 5px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
}

.weekDays_selector input[type=checkbox]:checked + label {
    background-color: #65a4ff !important;
    color: #eefaff;
}

vc{
    border:none;
    border:1px solid #c6c5c6;
    height:auto;
    width:1px;
}

.closeMe{
    background-color: #38354a;
    color: #fff;
    border: medium none;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    top: -10px;
    right: -10px;
    text-align: center;
    line-height: 25px;
    padding: 0;
    font-size: 17px;
    outline: none !important;
    position: relative;
    float: right;
}

.station_shadow{
    /*box-shadow: 0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08);*/
    box-shadow: rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;
    margin-bottom: 24px;
    margin-top: 2px;
}

.table_header_padding{
    font-size: 20px;
    padding-left: 8px;
    padding-top: 6px;
    margin-bottom: 2px;
}

.mulipleBalancePlaceHolder{
    padding-left: 10%;
    padding-right: 10%;
    text-align: center;
    padding-top: 10%;
    font-size: 17px;
}

.editCheckBoxForAnalysisRow input[type="checkbox"]{
    -webkit-appearance: initial;
    /*content: "\270F";*/
    appearance: initial;
    background: transparent;
    width: 28px;
    height: 25px;
    border: none;
    margin:0;
    padding: 0;
    /*background: gray;*/
    position: relative;
}
.editCheckBoxForAnalysisRow input[type="checkbox"]:before{
    /*content: "\270F";*/
    color: #fff;
    /* The following positions my tick in the center,
     * but you could just overlay the entire box
     * with a full after element with a background if you want to */
    position: absolute;
    /*left: 50%;*/
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}
.editCheckBoxForAnalysisRow input[type="checkbox"]:checked {
    /*background: lightgrey;*/
    background: transparent;
}
.editCheckBoxForAnalysisRow input[type="checkbox"]:checked:after {
    /* Heres your symbol replacement - this is a tick in Unicode. */
    /*content: "\270F";*/
    color: #fff;
    /* The following positions my tick in the center,
     * but you could just overlay the entire box
     * with a full after element with a background if you want to */
    position: absolute;
    /*left: 50%;*/
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    /*
     * If you want to fully change the check appearance, use the following:
     * content: " ";
     * width: 100%;
     * height: 100%;
     * background: blue;
     * top: 0;
     * left: 0;
     */
}
.analysisRow_edit_button{
   background-image: url("../css/img/edit.png");
    background-size: 30px;
    padding: 0!important;
    margin: 0!important;
    width: 28px;
    height: 25px;
}
.instructionEdit_what_textarea{
    padding:1px !important;
    margin: 0 !important;

}
.instructionEdit_what_textarea textarea{
    min-height:80px;
    max-width:260px!important;
    float: right;
    margin-bottom: 2px!important;
    padding: 2px;
}
.instructionEdit_how_textarea{
    padding:1px !important;
    margin: 0 !important;

}
.instructionEdit_how_textarea textarea{
    height: 80px;
    max-width:260px!important;
    float: right;
    margin-bottom: 2px!important;
    padding: 2px;
}
.instructionEdit_why_textarea{
    padding:1px !important;
    margin: 0 !important;

}
.instructionEdit_why_textarea textarea{
    height: 80px;
    max-width:260px!important;
    float: right;
    padding: 2px;
}
.instructionEdit_what_textarea_disabled{
    height: 45px;
    min-width:260px!important;
    float: right;
    margin-bottom: 2px!important;
    border-color: lightgrey;
    line-height: 12px;
}
.instructionEdit_how_textarea_disabled{
    height: 25px;
    min-width:260px!important;
    float: right;
    margin-bottom: 2px!important;
    border-color: lightgrey;
}
.instructionEdit_why_textarea_disabled{
    height:25px;
    min-width:260px!important;
    float: right;
    border-color: lightgrey;
}
.instructionEdit_what_textarea_label{
    margin-top: 1%;
    margin-left: 1%;
    vertical-align:middle;
    float: left;
}
.instructionEdit_how_textarea_label{
    margin-top: 19%;
    margin-left: 1%;
    vertical-align: middle;
    float: left ;
}
.instructionEdit_why_textarea_label{
    margin-top: 20%;
    margin-left: 1%;
    vertical-align: middle;
    float: left;
}
.instructionEdit_what_textarea_label_disabled{
    margin-top: 4%;
    margin-left: 1%;
    vertical-align:middle;
    float: left;
}
.instructionEdit_how_textarea_label_disabled{
    margin-top: 4%;
    margin-left: 1%;
    vertical-align: middle;
    float: left ;
}
.instructionEdit_why_textarea_label_disabled{
    margin-top: 1%;
    margin-left: 1%;
    vertical-align: middle;
    float: left;
}

#showAllInstructionsLabel{
    font-size: 10px;
    font-style: oblique;
    font-weight: 600;
}

#showAllInstructionsLabel p{
    float: right!important;
}

.disableNavItem {
    color: gray !important;
    cursor: not-allowed !important;
    pointer-events: none !important;

}

     /* The Modal for clipboard (background) */
 .modal-clipboard {
     display: none; /* Hidden by default */
     position: fixed; /* Stay in place */
     z-index: 5; /* Sit on top */
     padding-top: 100px; /* Location of the box */
     left: 0;
     top: 0;
     width: 100%; /* Full width */
     height: 100%; /* Full height */
     overflow: auto; /* Enable scroll if needed */
     background-color: rgb(0,0,0); /* Fallback color */
     background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
 }

/* Modal Content */
.modal-content-clipboard {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 65%;
    position: relative;
}

/* The Close Button */
.close-clipboard {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    margin-top: -20px;
}

.close-clipboard:hover,
.close-clipboard:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.modal-header-clipboard{
    padding: 2px 16px;
    color: #707070;
}

.modal-body-clipboard{
    padding: 0 20px;
}

#copiedAnalysisRowTableId th{
    text-align: center !important;
}

#clipboardConditionTableId th{
    text-align: center !important;
}

.modal-clipboard-btn{
    display: flex;
    margin-top: -10px;
    margin-bottom: 10px;
}

span#noImageForThisInstruction{
    width: 30px;
    height: 30px;
    border: 5px dotted #aaa;
    display: block;
    border-radius: 1px;
    font-size: 1px;
    color: #aaa;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1px;
}

.notCreatedActivityImageDeleteBtn{
    margin-top: 88px !important;
}
/*Balance tree*/
.wrapper1{
    overflow: scroll;
    height: 7px;
    cursor: pointer;
    }

.wrapper1,wrapper2:hover{
    cursor: pointer;
    }

.wrapper2{
    overflow:scroll;
    height: 100%;
    }

.scrollTop{
    width:300px;
    height: 7px;
    }

.scrollDown {
    width:300px;
    background-color:white;
    }

.wrapper1::-webkit-scrollbar{
    background-color: transparent;
    height: 7px;
}

.wrapper2::-webkit-scrollbar{
    background-color: transparent;
    height: 7px;
}

.analysisRowTable-td-textAlign{
    text-align: center;
}

.custom-tdSize{
    display: table-cell;
    max-width:250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 10px;
}

.custom-resize-tdSize{
    display: table-cell;
    max-width:250px;
    white-space: nowrap;
    padding-right: 10px;
}

.custom-tdWrap{
    display: table-cell;
    max-width:500px;
    white-space: pre;
    overflow: scroll;
    padding-right: 10px;
}

.img-center{
    display: block;
    margin: 0 auto;
    width: 30px;
    height: 30px;
}

.element-center{
    display: block;
    margin: auto;
}

.custom-small-tdSize{
    display: table-cell;
    width: 150px;
    max-width:150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 3px !important;
}

.small-column-width{
    width: 75px;
}



.legendColor{
    border: 1px solid #ccc;
    float: left;
    width: 12px;
    height: 12px;
    margin: 2px;
}

.balance-tdSize{
    display: table-cell;
    padding-right: 10px;
    text-overflow: ellipsis;
    word-break: break-word;
    min-width: 150px;
}
/*overflow: hidden;*/

.large-table-container {
    min-height: 430px;
    overflow-x: scroll !important;
    width: auto !important;
}

.uib-time input {
    width: 22px;
    padding: 0;
    margin: 0;
    height: 30px;
    font-size: 16px;
    border: white;
}

.uib-separator{
    font-weight:600;
    padding: 1px;
}

.uib-timepicker{
    width: 150px;
    height: 120px;
}
.uib-increment > .btn-link, .uib-decrement > .btn-link{
    padding:0;
    width: 10px;
    height: 10px;
    margin-bottom: 10px;
}

.disableButton{
    color: #A9A9A9;
    opacity: 1;
    background-color:#e9ecef;
    pointer-events: none;
}

.data-grid-table{
    border-collapse: collapse;
    height: 66vh;
    width: 100%;
    overflow-y: scroll;
}


.data-grid-table tr, .data-grid-table td, #data-grid-table-head th {
    border: 2px solid #b9b4b4 !important;
}


#data-grid-details tr, #data-grid-details td {
    border: none;
    padding: 5px;
    z-index: 1;
}

#data-grid-table-head th{
    position:sticky;
    top: 0;
    z-index: 10;
}

#data-grid-table-head tr:nth-child(4){
    position:sticky;
    top: 0;
    z-index: 9;
}

.circle-btn {
    height: 40px;
    line-height: 33px;
    width:40px;
    font-size: 25px;
    border-radius: 50%;
    border: 1px solid transparent;
    margin-top: 6px;
    background-color: #A9A9A9;
    color: white;
    text-align: center;
    cursor: pointer;
    display: block;
}

.circle-btn:disabled{
    cursor: not-allowed;
}

.masking-rules-panel{
    padding: 10px;
    border: 1px solid #ced4da;
}

.close-btn{
    font-size: 18px;
    height: 33px;
    line-height: 28px;
    width:33px;
    background-color: transparent;
    color: #8b211e;
    margin: 0 10px;
}

.close-btn:hover{
    background-color: #8b211e;
    color: white;
}

.enlarge-image{
    position: relative;
    border: 1px solid transparent;
}

.enlarge-image:hover {
    max-width: 100%;
    height: auto;
    transform: scale(20.0);
    -webkit-transform: scale(20.0);
    background-color: white;
    z-index: 9999999;
    border-color: #0D3349;
    position:absolute;
    right: 0;
    left: 0;
}

.enlarge-image-in-container{
    /*transition: 0.25s ease-in-out;*/
    z-index: 9999;
    border: 1px solid transparent;
}

.enlarge-image-in-container:hover {
    max-width: 100%;
    height: auto;
    -webkit-transform: scale(20.0);
    transform: scale(20.0);
    position:absolute;
    background-color: white;
    z-index: 99999;
    border-color: #0D3349;
}

.enlarge-image-small{
    /*transition: 0.25s ease-in-out;*/
    z-index: 9999;
    position: relative;
    border: 1px solid transparent;
}

.enlarge-image-small:hover {
    max-width: 100%;
    height: auto;
    transform: scale(3.0);
    background-color: white;
    z-index: 99999;
    border-color: #0D3349;
    cursor: pointer;
}

.td-text-field-overflow-clip{
    overflow: clip;
    word-wrap: break-word;
    word-break: break-all;
}

a#imageLink2 {
    width: 250px;
    height: 165px;
    border: 5px dotted #aaa;
    display: block;
    border-radius: 5px;
    font-size: 65px;
    color: #aaa;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 15px;
}

a#imageLink2::after {
    content: "No activity image...";
    font-size: 20px;
    line-height: 1.2;
    display: inline-block;
    vertical-align: middle;
    margin-top: -83px;
}

.auto-selected{
    color: white;
    background-color: #fb434a;
}

#bgVideo {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

.image-gallery-vision {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 10px;
    padding: 10px;
}

.image-card-vision {
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.image-wrapper-vision img {
    width: 100%;
    height: 90px;
    object-fit: cover;
    display: block;
}

.delete-btn-vision {
    position: absolute;
    top: 5px;
    right: 5px;
    background: rgba(138, 31, 17, 0.9);
    border: none;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    padding: 4px 6px;
    font-size: 14px;
    transition: background 0.2s ease-in-out;
}

.delete-btn-vision:hover {
    background: rgba(180, 40, 25, 1);
}