/*default*/
* {
    /*box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;*/
}

.ui-loader {
    display: none;
}

html,textarea {
    font-family: Arial;
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    /*font-size: 12pt;*/
    font-family: 'Montserrat', sans-serif;
}
/*table,div {
    width:100%;
margin:0 auto;
}*/
.clsTextColor {
    color: #61c8f3 !important
}
.clsTDLeft {
    text-align: left;
}

.clsTDRight {
    text-align: right;
}

.clsTDCenter {
    text-align: center;
}

.clsTitle {
    color: #ffffff;
    background-color: #5fc9f3;
    /*width: 90%;*/
    height: 35px;
    line-height: 35px;
    margin: 0 auto;
    cursor: pointer;
    font-size: 12pt;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    margin-top: 1px;
    text-transform: uppercase;
    font-family: 'norwester';
    position:relative;   
}
.clsTitle:not(.noarrow) {   
    padding-right: 43px
}
    .clsTitle .arrow {
        position: absolute;
        right: 10px;
        top: 10px;      
    }
    .clsTitle .arrow img {
       height:15px
    }
    .clsTitle .line {
        position: absolute;
        right: 44px;
        top: 8px;
        height: 20px;
        border-left: 1px solid #fff;
    }

input[type="button"], input[type="submit"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
    background-color: #5fc9f3;
    border: none;
    height: 35px;
    /*width: 100%;*/
    /*margin: 2px;*/
    padding: 0px 30px;
    color: #fff;
    font-size: 10pt;
    text-transform: uppercase;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
}

    input[type="button"]:hover, input[type="submit"]:hover {
        /*border: 1px solid #1B81F0;*/
        background-color: rgba(95, 201, 243, 0.29);
    }
    input[type="button"]:disabled, input[type="submit"]:disabled {
        /*border: 1px solid #1B81F0;*/
        background-color: rgba(191, 191, 191, 0.9);        
    }

input[type="text"], input[type="password"], input[type="date"], input[type="time"], textarea, select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
    font-family: 'Montserrat', sans-serif;
    background-color: rgba(255,255, 255, 0.2);
    color: #ffffff;
    border: none;
    box-shadow: 0 0 0px 1px #fff !important;
    -moz-box-shadow: 0 0 0px 1px #fff !important;
    -webkit-box-shadow: 0 0 0px 1px #fff !important;
}
    input[type="text"]:focus, input[type="password"]:focus, input[type="date"]:focus, input[type="time"]:focus, textarea:focus, select:focus {
        outline: none;
        /*border: 2px solid #5fc9f3 !important;*/
        box-shadow: 0 0 0px 2px #5fc9f3 !important;
        -moz-box-shadow: 0 0 0px 2px #5fc9f3 !important;
        -webkit-box-shadow: 0 0 0px 2px #5fc9f3 !important;
    }
input[type="text"], input[type="password"], input[type="date"], input[type="time"], textarea {  
    height: 20px;
    width: calc(100% - 24px);  
    padding: 5px 10px; 
}
  
textarea {
    width: calc(100% - 22px);
}
select {
    width: calc(100% - 4px);
    height: 30px;
    padding: 0px 10px;
    background-image: url(../../Images/masterpage/down.png);
    background-size: 18px 12px;
    background-position: 97%;
    background-repeat: no-repeat;
}
    select option {       
        background: rgba(0, 0, 0, 0.7);
        color: #fff;       
    }
    input[type="text"]:disabled, input[type="password"]:disabled, input[type="date"]:disabled, input[type="time"]:disabled, textarea:disabled, select:disabled,
    [disabled] {
        background-color: rgba(96, 96, 96, 0.9);
        color: #e5e5e5;
        -webkit-text-fill-color: #e5e5e5; /* Override iOS / Android font color change */
        -webkit-opacity: 1; /* Override iOS opacity change affecting text & background color */
        color: #e5e5e5; /* Override IE font color change */
    }
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: #fff;
    text-align:center
}

::-moz-placeholder { /* Firefox 19+ */
    color: #fff;
    text-align: center
}

:-ms-input-placeholder { /* IE 10+ */
    color: #fff;
    text-align: center
}

:-moz-placeholder { /* Firefox 18- */
    color: #fff;
    text-align: center
}
input[type="date"], input[type="time"] {
    min-width: 100px;
}

.clsOnOff input[type=checkbox] {
    visibility: hidden;
}

.clsTableButtonBottom {
    width: 100%;
    margin: 0 auto;
    height: 60px;
    table-layout:fixed
}

    .clsTableButtonBottom td {       
        padding: 7px 0;
        vertical-align:middle
    }
        .clsTableButtonBottom td input[type="submit"], .clsTableButtonBottom td input[type="button"]
         {
            width: 100%;
            padding-left:10px;
            padding-right:10px
        }
    .clsTableButtonBottom tr td:first-child, .clsButtonAuditPopup tr td:first-child {
        padding-right: 10px
    }
    .clsTableButtonBottom tr td:last-child, .clsButtonAuditPopup tr td:last-child {
        padding-left: 10px
    }
    .clsTableButtonBottom_Popup {
            width: 100%;
            margin: 0 auto;
            table-layout: fixed
        }
        .clsTableButtonBottom_Popup input {
            margin-left:5px !important
        }
      
/*---------
       Top Bar Button 
     Bottom Bar
        ------------*/

.clsTopBarControl {
    width: 100%;
    height: 50px;
}

    .clsTopBarControl td {
        vertical-align: middle;
    }

        .clsTopBarControl td img {
           height: 40px;
    /*border: 1px solid rgba(255, 255, 255, 0.22);*/   
    background-color:#5fc9f3
        }
            .clsTopBarControl td img:not(.inactive):hover {
                background-color: rgba(255, 255, 255, 0.22);
            }
.clsBottomBarControl {
    height:30px;
    line-height: 30px;
    width: 100%;
    vertical-align: middle;
}

/*Popup + Process*/

.modalBackground {
    background-color: Gray;
    filter: alpha(opacity=50);
    opacity: 0.5;
    position: absolute;
    left: 0px;
    top: 0px;
    -webkit-transition: opacity .5s;
    -moz-transition: opacity .5s;
    -ms-transition: opacity .5s;
    -o-transition: opacity .5s;
    transition: opacity .5s;
}

.processPopup {
    background-color: rgba(255,255,255,0.96);
    position: absolute;
    border: 1px solid #cacaca;
    display: none;
    width: 150px;
}

    .processPopup a {
        color: #1B81F0;
        display: block;
        margin-top: 10px;
        text-decoration: underline;
    }

.processContain {
    padding: 10px 0 15px 0;
    width: 100%;
    color: Black;
    text-align: center;
}

    .processContain span {
        margin-top: 10px;
    }

.gctPop-up {
    position: absolute;
    display: none;
    color: #fff;
    background-color: #323232;
    max-width: 69%
}

/*Popup Styles*/
.fontStylePopup_Header {
    font-weight: bold;
    color: white;
}

.Popup_Wrap {
    display: block;
}

    .Popup_Wrap h3 {
        font-weight: normal;
        display: block;
        background: #98AABF;
        cursor: move;
        height: auto;
        border-bottom: 1px solid black;
    }

        .Popup_Wrap h3 span {
            padding: 3px 25px 2px 8px;
            display: inline-block;
        }

    .Popup_Wrap a.j_Close_Button {
        display: block;
        position: absolute;
        top: 4px;
        right: 3px;
        width: inherit;
        padding: 0;
    }

    .Popup_Wrap .j_Content {
        /*margin: 0 10px;*/
        display: block;
        width: auto !important; /*fix IE6*/
        /*width: 200px;*/
        min-width: 200px;
        padding: 30px;
        text-align: center;
        background-color: #323232;
        color:#fff
    }

.j_Div_Button_Control {
    text-align: center;
    display: block;
    /*padding-bottom: 20px;*/
}
    .j_Div_Button_Control input[type=button], .j_Div_Button_Control input[type=submit],
    .clsTableButtonBottom_Popup input[type="submit"], .clsTableButtonBottom_Popup input[type="button"] {
        /*border-top: 1px solid #00abef;*/
        margin: 0;
        /*width: 100%*/
        margin-bottom:20px
    }
/* end pop-up style*/

.radiusBorder {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    color: White;
    background-color: gray;
    border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    border: 1px solid white;
}

/*Flag Img Icon Right List View*/
.clsFlagIconImg {
    right: 3px;
    position: absolute;
}
/*Plate Number List View*/
.clsPlateNumber {
    font-size: 15pt;
}

/*------------
    Div List View
    ----------------*/

/*.wrapper {
    position: absolute;
    z-index: 1;
    top: 70px;
    bottom: 48px;
    left: 0;
    width: 100%;
    background: #ccc;
    overflow: hidden;
}*/

/*.scroller {
    position: absolute;
    color: #000000;
    z-index: 2;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    width: 100%;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    -o-text-size-adjust: none;
    text-size-adjust: none;
}*/

.clsDivBodyContentFixedHeight {
    overflow: auto;
    width: 100%;
    margin: 0 auto;
    color: #000000;
    z-index: 2;
}

.clsDivViewRecord {
    position: relative;
    border:1px solid #fff
}
    .clsDivViewRecord:nth-child(odd) .clsTableRecordItem {       
        color:#000;
    }

    .clsDivViewRecord:nth-child(even) .clsTableRecordItem {
         color: #015FA0;
    }

.clsTableRecordItem {
      background-color: rgb(236, 236, 236);       
        border-bottom:1px solid rgba(154, 154, 154, 0.56);
    width: 100%;
    position: relative;
    z-index: 10;   
    display:table;
    table-layout:fixed;
    height:130px
    
}  

        .clsTableRecordItem > div:nth-child(1) {
            width: 40%;
            display:table-cell  ;
            vertical-align:middle;          
        }

        .clsTableRecordItem > div:nth-child(2) {
            width: 60%;  
                display:table-cell;
                vertical-align:middle;
        }

        .clsTableRecordItem > div:nth-child(2) div {
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            width: 98%;
           
            line-height: 27px;
            text-align: left;
            float:left
        }

    .clsTableRecordItem > div:first-child {
        margin-top: 5px;
    }

.clsCarImageList {
    padding: 10px 5px;
    position:relative
}

    .clsCarImageList img {         
       max-width:155px;  
        
        max-height:107px;     
    }
    /*Image daytime*/
        .clsCarImageList img:nth-child(2) {
            height: 30%;
            position: absolute;
            right: 20px;
            bottom: 10px;
        }
.clsTitleRecordItem {
    /*color:#FDA708;*/
    font-size:15pt
}
.clsImgFlagIcon {
    position:absolute;
    width:50px;
    top:25px;
    right:20px
}
/*-----------
    Car Pate Popup Info
    ------------*/
.clsCarPlatePopupInfo {
    background-color: #fff;
    color:#0f0f0f !important;
     border-bottom:none;
}
.clsCarPlatePopupInfo .clsCarImageList img{
   max-width:90%
}
/*----------
        Slide More + Flag
        ------------*/

.clsDivMoreButton, .clsDivFlagButton ,.clsDivFlagButton1, .clsMoreButtonOnly{
    width: 100px;
    height: 100%;
    color: #ffffff;
    float: right;
    position: absolute;
    right: 0px;
    top: 0px;
    line-height: 130px;
}

.clsDivMoreButton {
    background-color: #C7C7CC;
    right: 100px;
}

.clsMoreButtonOnly {
    background-color: #C7C7CC;   
}

.clsDivFlagButton {
    background-color: #D37C7F;
}
.clsDivFlagButton1 {
     background-color: #01ADEF;
}
.clsPopupButtonMoreOption {
    width: 50%;   
    color: #087EFF;
    position: absolute;
    display: none;
}

    .clsPopupButtonMoreOption table {
        width: 90%;
        margin: auto;
        padding: 0px 10px;      
        margin-bottom: 7px;
        background-color: rgb(255,255,255);
    }

        .clsPopupButtonMoreOption table tr:first-child td {
            border-top: none;
        }

        .clsPopupButtonMoreOption table tr td {
            text-align: center;
            vertical-align: middle;
            border-top: 1px solid #cacaca;
            height: 40px;
        }

/*-----------
        Time Range
        --------------*/
.clsTableTimeRange {
    margin: 10px auto;
}

    .clsTableTimeRange td:nth-child(1) {
        text-align: right;
        padding-right: 10px;        
    }

    .clsTableTimeRange td:nth-child(2) {
        text-align: left;
    }
     .clsTableTimeRange td:nth-child(3) {
        text-align: left;
    }

    .clsTableTimeRange td {
        padding: 5px 0px;
        vertical-align:middle
    }
/*-----------
        Popup Auditting
        -------------*/
.clsDivAuditting {
    line-height: 20px;
    overflow: auto;
    text-align:center;
}
   
     /*.clsDivAuditting textarea {
     width:64%;
    margin:5px auto
    }*/
    .clsDivAuditting table {
        width: 100%;
        max-width: 412px;
        margin: 5px auto
    }
.clsDivAuditting table td{    
    padding:3px 0px;
    vertical-align:middle
}
.clsDivAuditting table td:nth-child(1){
    min-width:140px
}
    .clsDivAuditting table td:nth-child(2) {
        padding-left:20px
    }
    .clsDivAuditting table td:nth-child(3) {
        padding-left: 10px
    }
.clsButtonAuditPopup {
    margin-top: 10px;
    width: 100%;
}
/*Filter Alert Configure*/

.pnl-Criteria {
    width: 100%;
    background-color: rgba(255, 255, 255, 0.2);
    color: #fff;
    display: none;
    z-index: 1;
    top: 0px;
    overflow: auto;
    margin:20px auto
}

    .pnl-Criteria DIV:first-child {
        width: inherit;
        overflow: auto;
        overflow-x: hidden;
    }

    .pnl-Criteria > div > table {
        margin: 10px auto;
        width: 90%;
    }

        .pnl-Criteria > div > table tr {
            border-bottom: 1px solid #8F9EB0;
        }

            .pnl-Criteria > div > table tr td {
                text-align: left;
                padding: 12px 0;
                font-size: 14pt;
                word-break: break-word;
                vertical-align: middle;
            }



/*------------
    Car Info
    ------------*/
.qs-car-info {
    width: 100%;
    position: absolute;
    z-index: 1;
    background-color: rgba(9, 19, 25, 0.84);
    height: 50%;
    overflow-y: auto;
    bottom: 0px;
    padding:10px 0
}

    .qs-car-info table {
        table-layout:fixed;
        margin: 5px auto;
        width: 70%;
    }
    .qs-car-info table tr td{
       word-break:break-word
    }
        .qs-car-info table td:nth-child(1) {
            padding-right: 5px;
            padding-bottom:5px;
            text-align: right;
            width:50%;
        }

        .qs-car-info table td:nth-child(2) {
            padding-bottom: 5px;
            text-align: left;
            vertical-align: middle;
            width: 50%
        }

           .qs-car-info table td:nth-child(1) img{
            width: 90%;
            max-height:229px;
            border: 1px solid #4b4b4b;
            
        }
        .qs-car-info table td:nth-child(2) img{
          width: 90%;
          max-height:60px;
            border: 1px solid #4b4b4b;
           
        }

        .qs-car-info table div {
            margin-top: 20px;
            text-align: center;
            font-size: 25pt;
        }

    .qs-car-info .clsAddress {
        color: #C2CE25;
        margin: 15px auto;
        padding: 0 5px;
    }
    .qs-car-info .clsHitType {      
        margin: 15px auto;
        padding: 0 5px;
    }

/*=============================== list view =============*/
.listview-wrapper {
    position: relative;
    z-index: 1;
    width: 100%;
    background: rgba(255, 255, 255, 0.2) ;
    overflow: hidden !important;
}

.listview-scroll {
	position: absolute;
	z-index: 1;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	width: 100%;
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: none;
	-o-text-size-adjust: none;
	text-size-adjust: none;
}
.listview-scroll ul {
 list-style: none; 
}

/*----------
    Popup Select Radius
    -----------*/
.clsPopupSelectRadius {
    position: absolute;
    top:0;
    left:0;
    background-color: #232323;
    width: 50%;
    display:none;
}

.clsTitlePopupSelectRadius {    
    font-weight: bold; 
    line-height: 50px;
}

.clsTableSelectMiles {
    width: 90%;    
    margin: 0 auto;
    margin-bottom: 20px;
}

    .clsTableSelectMiles tr td ,.clsTableSelectMiles div{
        border-bottom: 1px solid #C8C7CC;
        line-height: 40px;
        vertical-align: middle;
    }
      .clsTableSelectMiles tr:last-child td,.clsTableSelectMiles div:last-child {
        border-bottom: none !important;     
    }
    .clsTableSelectMiles input[type="checkbox"] {
    float:right;
    margin-right:20px;
    margin-top:13px;
    }
    
/*-----------
    Popup Add Comment
    ------------*/
.clsPopupAddComment {    
    background-color: #232323;
    position: absolute;
    top:0;
    left:0;
    display: none;
    max-width: 500px;
    width:97%;
}

.clsTableSaveSearch {
    margin: 10px 0 20px;
    width:100%
}
.clsTableSaveSearch tr td:nth-child(2){
    padding-left:10px
}

    .clsTableSaveSearch tr td {       
        padding-top: 10px;
        text-align: right;
    }

        .clsTableSaveSearch tr td:nth-child(1) {
            text-align: right;
            min-width: 30%;
            padding-left:10px
        }

        .clsTableSaveSearch tr td:nth-child(2) {
            text-align: left;
            padding-right: 15px;
        }

.clsTitlePopupSaveSearch {
    text-align: center !important;
    font-size: 15pt;
    font-weight: bold;
}


/*-----------
   Filter Source Alert
    ------------*/
.clsDivSourceAlert {
    overflow:auto;
    margin:0 auto;
    width:100%;
    
        
}
.clsSource .clsAlert{
text-align:left;
  vertical-align:middle; 
}
.clsSource {     
       background-color:#CCCCCC;    
    text-align: left;   
    color: #000;
        font-weight: bold;
}
    .clsSource li > div {
   display:inline-block;
   vertical-align:middle
    }
    .clsSource li > div:nth-child(1) {       
        width: calc(100% - 33px);
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }
    .clsSource li > div:nth-child(2) {        
        width: 30px;
    }
    .clsSource > .clsSource_title {
        padding: 12px 0 12px 20px;
    }
.clsAlert{
    color:#015FA0;
    background-color:  #E4E4E4;
     border-bottom:1px solid #CCCCCC;    
     padding:10px 0 10px 40px;
     font-weight: normal;  
}
.clsDivSourceAlert input[type=checkbox] {
float:right;
margin-right:30px;
margin-top:-14px
}

.clsAllAlert {
    width:100%;
    line-height:40px;
    height:40px
}
    .clsAllAlert td:nth-child(2) {
    padding-left:20px;
    text-align:left
    }
.clsAllAlert input[type=checkbox] {
float:right;
margin-right:30px
}

/*--------------
    Image Icon Slide Left 
    ------------------*/

.clsImgSlideHitMap {
    position: fixed;
    bottom: 100px;
    right: 0px;
    width: 55px;
    z-index: 3;
}

/*Popup Address search*/
.clsAddressBar {
    width: 90%;
    margin: 0 auto;
    margin-bottom: 20px;
}

.clsButtonCancelAddressBar {
    color: #1B81F0;
}