@charset "UTF-8";
/* CSS Document */


/*html { text-rendering: optimizeLegibility !important; -webkit-font-smoothing: antialiased !important;}*/

body{height:100%; width:100%;}


/* CORE LAYOUT STANDART STYLES ********************************************************************************************************** */

a, div, span, input, textarea, li, strong, button{ outline:none; text-decoration:none;}
img{ border:none; border:0px;}

/* for responsive mode - if you want any element has a responsive fluid abilities with media queries you must add this class to your element*/
.Responsive{}
.ui-dialogcolor .ui-dialog-titlebar{background-color: #1578c9!important;color: #ffffff!important;}


.ui-growl-image-warn {
    background-image: url('../../resources/ctms/level_icon/WARNING.png');
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: auto auto;
    display: block;
    float: left;
    height: 32px;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    width: 32px;    
}

.ui-growl-image-info {
    background-image:url('../../resources/ctms/level_icon/INFO.png') ; 
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: auto auto;
    display: block;
    float: left;
    height: 32px;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    width: 32px;
}

.ui-growl-image-fatal {
    background-image:url('../../resources/ctms/level_icon/SEVERE.png') ;
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: auto auto;
    display: block;
    float: left;
    height: 32px;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    width: 32px;  
}

.ui-growl-image-error {
    background-image:url('../../resources/ctms/level_icon/ERROR.png');
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: auto auto;
    display: block;
    float: left;
    height: 32px;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    width: 32px; 
}


.ui-messages-warn-icon {
    background: url('../../resources/ctms/level_icon/WARNING.png') no-repeat;
}
.ui-messages-info-icon {
    background: url('../../resources/ctms/level_icon/INFO.png') no-repeat;
}
.ui-messages-error-icon {
    background: url('../../resources/ctms/level_icon/ERROR.png') no-repeat;
}
.ui-messages-fatal-icon {
    background: url('../../resources/ctms/level_icon/SEVERE.png') no-repeat;
}

div.options > label > input {
    visibility: hidden;        
}

.ui-panelDatail{
    border: 1px solid transparent !important;
}

.ui-panelGridBorder td {
    border: #54DB26 !important;
}

div.options > label {

    margin: 0 0 0 -10px;
    padding: 0 0 20px 0;  
    height: 20px;
    width: 150px;
}
.ui-backgroudText {
    background: linear-gradient(to bottom, #ffffff 0%, #ffffff 100%);
}
.buttonStryle, .ui-button{
    background:none !important;
    background: #7FC3FA !important;
}
div.options > label > img {	
    display: inline-block;
    padding: 0px;
    height:20px;
    width:20px;
    background: none;

}

.custom .ui-datepicker {
    display: block !important;
}
/* Responsive DataTable*/
.responsive-header {
    display: none;
}

.buttonValidUpload .ui-growl{
    margin-right: 40px !important;
    width:500% !important;
}
s
.ui-fieldsetBack .ui-state-default {
    background: none !important;
    background-color: #EF3C56 !important;
}
.fidserLegend .ui-fieldset, .ui-fieldset .ui-fieldset-legend {
    background: none !important;
    background-color:  #F3F5F7 !important;
    border-color: #26A3DB !important;
}

.fidserLegendContent .ui-fieldset, .ui-fieldset .ui-fieldset-legend {
    background: none !important;
    background-color: #1578c9 !important;
    border-color: #26A3DB !important;
}
.ui-tabs, .ui-tabs-nav, .ui-tabs-panel {
    background-color: #F4F7F9  !important;

}
.ui-tabs-navTop{
    background: linear-gradient(to bottom, #F4F7F9 0%, #F4F7F9 100%);
}
.accordionPanelTab{
    background: #1578c9 !important;
    color:#003399 !important;
    font-size: 14px !important;
}
.ui-tabstop, .ui-tabs-navscroller-btn {

    background-color: #F4F7F9 !important;

}
.ui-tabsProfile, .ui-tabs-active {
    background-color: #EFF3F5  !important;

}
@media only screen and (min-device-width: 375px) and (max-device-width: 667px){
    .widthColumMax{
        width: 100% !important;
    }
}


@media only screen and (max-width : 1445px){
    #activityLogs .ui-column-title {
        display:none !important;
    }
    #activityLogs    .ui-reflow-label {display: none !important;}
    #activityLogs    .ui-reflow-dropdown {display: none !important;}    
    .jqplot-table-legend {left:5% !important;}
    .levelIcon {width: 20px; height: 20px; }
}

.table-reflow-desktop .ui-datatable-data td {
    display: none;
}
.table-reflow-desktop tfoot td {
    display: none;
}

.ui-panelgridChoiceActiv .ui-panelgrid-cell {    
    border: none;
}

.ui-panelgrid.ui-panelgrid-blank .ui-panelgrid-content.ui-widget-content, 
.ui-panelgrid.ui-panelgrid-blank .ui-panelgrid-header.ui-widget-header,
.ui-panelgrid.ui-panelgrid-blank .ui-panelgrid-footer.ui-widget-header,
.ui-panelgrid.ui-panelgrid-blank .ui-panelgrid-header > tr.ui-widget-header, 
.ui-panelgrid.ui-panelgrid-blank tbody > tr.ui-widget-content,
.ui-panelgrid.ui-panelgrid-blank tbody > tr.ui-widget-content > td.ui-panelgrid-cell,
.ui-panelgrid.ui-panelgrid-blank .ui-panelgrid-footer > tr.ui-widget-footer {
    background: none;
    border: 0 none;
}
.ui-panelgrid-cell span{
    vertical-align: middle;        
}


.seven{
    width: 7%; 
}
.ten{
    width: 10%; 
}


.twenty{
    width: 20%;
}
.fivePercent{
    width: 8%;
}
.five{
    width: 5%;
}
.three{
    width: 3%;
}
.eighteen{
    width: 17%;
}

.treizePercent{
    width: 14%;
}

.douzePercent{
    width: 12%;
}
.twentyfive{
    width: 18%;
}
.thirty{
    width: 30%;
}

.twent-ypercent {
    width: 25%;
}
.thirty-ypercent {
    width: 35%;
}

.ui-panelgridnoBorder td, ui-panelgridnoBorder tr
{
    border-style: none;
}

@media (max-width: 1200px) and (min-width: 641px){
    .respByCartadis  .ui-menu-child{
        display: none !important;
    }
}

@media only screen and (min-device-width: 375px) and (max-device-width: 667px)  and (orientation:portrait) {
    .inputConfigText{
        width:60% !important;
    }
    .marginleftchoiceactivport{
        margin-left: 0%  !important;
    }

}

@media only screen and (min-device-width: 375px) and (max-device-width: 667px)  and (orientation:portrait) {
    .buttonvalidconfig{
        width:90% !important;
    }
    .editResponsiveIphone{
        margin-left: 5% !important;
    }
}

@media only screen and (min-device-width: 375px) and (max-device-width: 1445px)  and (orientation:landscape) {
    .suppbuttonRep{
        margin-left: 60% !important;
    }
    .widthColumnRespIpad{
        width:10% !important;
    }
    .ui-datatable-listUserLand .ui-datatable-data td.ui-column-p-7  { 
        display: none;
    }
    .widthModifSiteLandIphone{
        width:200% !important;
    }
    .widthiphonedateresp{
        width: 150% !important;
    }
}

@media (min-width : 375px) and (max-width : 667px){
    .geomapResponsive{
        width:120% !important;
    }
    .buttonResponsive{
        margin-left: 0px !important;
        margin-top: 10px !important;
    }
    .inputResponsive{
        width:75% !important;
    }
    .checkboxResponsive{
        width:55% !important;
    }
    .nameCompanyReponsive{
        width:55% !important;
    }
    .quicksearchRapidResp{
        margin-left: 0px !important;
    }
    .quicksearchRapidpanelResp{
        width: 96% !important;
    }
    .gatryiconResponsive{
        width:50% !important;
    }
    .boutomAddResponsive{
        margin-left: 10px !important;
    }
    .boutomAddRowResponsive{
        margin-top: 10px !important;
    }
    .spacerResponsive{
        height: 100px !important;
    }
    .widthPanelGridResp{
        width:100% !important;
    }
    .intputAdress{
        width:95% !important;
    }
    .marginLeft{
        margin-left: 0px !important;
    }
    .dialogResponsive{

        width:100% !important;
        /*        position: absolute !important;*/
        margin-top: 30px !important;
    }
    .inputResponsive{
        width:90% !important;
    }
    .panelReponsive{
        position: absolute !important;
    }
}

@media (min-width : 375px) and (max-width : 667px){
    .lineChartStyleClass table.jqplot-table-legend{
        top:8px !important;
        left:192px !important;
    }
}

@media (min-width : 375px) and (max-width : 667px){
    .lineChartFreqDay{
        width:130% !important;
        margin-left: -20px !important;
    }
}

.legendPosition table.jqplot-table-legend{
    top:-41px ;
    left:50px ;
}

.legendPositionTerm table.jqplot-table-legend{
    top:-23px ;
    left:37px ;
}

.legendPositionTermQOS table.jqplot-table-legend{
    top:-23px ;
    left:28px ;
}

.ui-datatable-reflowDetail{
    table-layout: fixed !important;
}

@media (min-width : 375px) and (max-width : 667px){
    .lineChartCATerminal{
        width:110% !important;
    }
}
@media (min-width : 375px) and (max-width : 1445px){
    .ui-datatable-reflowDetail .ui-datatable-data td.ui-column-p-4  { 
        display: none;
    }
}

@media (min-width : 375px) and (max-width : 1445px){
    .ui-datatable-reflowList .ui-datatable-data td.ui-column-p-2 {
        width:100% !important;
    }
    .ui-datatable-reflowList .ui-datatable-data td.ui-column-p-1 {
        width:100% !important;
    }
    .ui-datatable-reflowList .ui-datatable-data td.ui-column-p-1  {
        color: blue;

    }
    .ui-datatable-reflowList .ui-datatable-data td.ui-column-p-4  {
        color: blue;

    }
    .ui-datatable-reflowList .ui-datatable-data td.ui-column-p-2{
        display:none;
    }
    .ui-datatable-reflowList .ui-datatable-data td.ui-column-p-2 .ui-widget{
        width:100% !important;
        margin-left: -25px !important;
    }   
    .widthDatatableResp{
        width:100% !important;
    }
}
@media (min-width : 375px) and (max-width : 667px){
    .barReflow {
        width: 47%!important;
        margin-left: 20%;
        /* max-width: 800px;*/
    }
}
@media (min-width : 375px) and (max-width : 667px){
    .taileImageReponsive{
        width:40% !important;
        height: 40px !important;
    }
}

@media (min-width : 375px) and (max-width : 667px) and (orientation:portrait){
    .taileImagelogoReponsive{
        height: 60px !important;
    }
}

@media (max-width : 375px) {
    .taileImagelogoReponsive{
        height: 40px !important;
    }
}

@media only screen 
and (man-device-width : 667px) 
and (orientation : landscape){
    .navigatorRespiphoneLandscape{
        width:200% !important;
    }
}
@media (max-width : 667px){
    .topBarResponsive{
        display: none !important;
    }
}

@media (max-width: 1024px) and (min-width: 768px){
    .topBarRespIpad{
        display: none !important;
    }
}

@media only screen and (min-device-width: 375px) and (max-device-width: 667px)  and (orientation:landscape) {
    .navigatorRespnaviIpad{
        margin-left: 8px !important;
    }
}

@media only screen and (min-device-width: 375px) and (max-device-width: 667px)  and (orientation:landscape) {
    .advserachrespnaviIphoneland{
        width: 113px !important;
    }
}

@media only screen and (min-device-width: 375px) and (max-device-width: 667px)  and (orientation:landscape) {
    .detailborneIphoneland{
        width: 40% !important;
    }
}

@media only screen and (min-device-width: 375px) and (max-device-width: 667px)  and (orientation:landscape) {
    .journalalarmIphoneland{
        width: 100% !important;
    }
}

@media only screen and (min-device-width: 375px) and (max-device-width: 667px)  and (orientation:landscape) {
    .advserachrespnaviIphonelandcancel{
        width: 100px !important;
        margin-left: 15px !important;
    }
}

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation:landscape) {
    .detailOperLandRespIphoneland{
        width:100% !important;
    }
}

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation:landscape) {
    .detailtermcolum1respIphoneland{
        width:100% !important;
        margin-left: 20px !important;
    }
}

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation:portrait) {
    .siteturnoverrespIphoneland{
        width:120% !important;
    }
}

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation:landscape) {
    .detailtermcolum2respIphoneland{
        width:100% !important;
        margin-top: 230px  !important;
        margin-left: -245px !important;
    }
}
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation:landscape) {
    .detailtermLandRespIphoneland{
        width:60% !important;
    }
}
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation:landscape) {
    .detailOperLandRespIphonelandselect{
        margin-left: 15px !important;
    }
}

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation:landscape) {
    .boutomAddPRiceIphoneland{
        width:30% !important;
    }
}

@media only screen and (min-device-width: 375px)  and (orientation:landscape) {
    .navigatorManifRespnaviiphone{
        margin-left: 8px !important;
    }
}

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation:landscape) {
    .detailtermtextRespiphoneland{
        margin-right:165px !important;
    }
}

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation:landscape) {
    .editmanufiphoneland{
        width:270% !important;
    }
}

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation:portrait) {
    .editsitenameiphoneport{
        width:85% !important;
    }
}

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation:portrait) {
    .editsiteadriphoneport{
        width:110% !important;
    }
}

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation:landscape) {
    .editsiteadriphoneland{
        width:85% !important;
    }
}

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation:landscape) {
    .editsiteadrmapiphoneland{
        width:91% !important;
    }
}

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation:landscape) {
    .edituseriphoneland{
        width:185% !important;
    }
}

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation:landscape) {
    .edituseractivdateiphoneland{
        font-size :5px !important;
    }
}

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation:portrait) {
    .edituseractivdateiphoneport{
        width:80% !important;
    }
}

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation:portrait) {
    .checkboxuploadresp{
        width:100% !important;
        margin-left: -115px !important;
    }
}

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation:portrait) {
    .uploadfileresp{
        width:50% !important;
    }
}

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation:portrait) {
    .editmanufcommentiphoneport{
        width:80% !important;
    }
}
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation:landscape) {
    .edituserselectcompRespLand{
        width:80% !important;
    }
}

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation:landscape) {
    .alarmhistselectdateRespLand{
        width:100% !important;
    }
}

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation:landscape) {
    .alarmhistadvsearchRespLand{
        width:120% !important;
        margin-left: -50% !important;
    }
}

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation:landscape) {
    .alarmhistadvAdvansearchRespLand{
        width:135% !important;
        border: none;
    }
}

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation:landscape) {
    .temalarmjournalRespLand{
        width:120% !important;
    }
}

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation:landscape) {
    .imagewashLandRespIpad{
        width:100% !important;
    }
}

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation:landscape) {
    .termresponsivefichadminheight{
        width: 100% !important;

    }
} 

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation:landscape) {
    .sitewidthimageresp{
        width: 40% !important;

    }
} 

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation:landscape) {
    .operheightalarmrespland{
        height: 190px !important;

    }
} 

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation:landscape) {
    .alarmencoursrespland{
        width: 20% !important;

    }
}

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation:landscape) {
    .editopernamerespland{
        width: 85% !important;

    }
}

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation:landscape) {
    .fichadminoperdialogrespland{
        width: 70% !important;
        height: 80% !important;
        margin-top: 10% !important;
    }
}
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation:portrait) {
    .fichadmintermdialogrespland{
        margin-top: 30% !important;
    }
}

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation:landscape) {
    .fichadminsitedialogrespland{
        width: 80% !important;
        height: 200% !important;
        margin-top: 20% !important;
    }
}
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation:landscape) {
    .fichadminterinladialogrespland{
        width: 80% !important;
        height: 150% !important;
        margin-top: 20% !important;
    }
}

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation:landscape) {
    .landWashProgPrice{
        width: 150% !important;
    }
    .landIphoneModifUser{
        width: 190% !important;
    }
}

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation:portrait) {
    .fichadminsiteport{
        height: 130% !important;
        margin-top: 30% !important;
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:landscape) {
    .editmanufcommentrespland{
        width: 90% !important;

    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
    .fichadminrespland{
        width: 150% !important;
        margin-left: -50px !important;

    }
    .inputCommetResp{
        width:80% !important;
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
    .portraitIpadWashProg{
        width: 150% !important;
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    .modifSiteIpadResp{
        width: 150% !important;
    }
    .modifUserRespIpad{
        width: 180% !important;
    }
}


@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation:landscape) {
    .imagetermrespland{
        width: 50% !important;
        height: 50% !important;

    }
}
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation:landscape) {
    .imagetermconsomrespland{
        width: 15% !important;
        height: 15% !important;

    }
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:landscape) {
    .navigatorRespIpad{
        width:60% !important;
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:landscape) {
    .infoRespIpad{
        width:40% !important;
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
    .detailOperRespIpad{
        width:100% !important;
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
    .fichadmineditpriceRespIpad{
        width:20% !important;
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:landscape) {
    .detailOperLandRespIpad{
        width:100% !important;
    }
}



@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
    .detailtermimageRespIpad{
        width:80% !important;
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
    .detailtermtextRespIpad{
        margin-right:195px !important;
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
    .detailFichOperRespIpad{
        width:30% !important;
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
    .detailStatOperRespIpad{
        width:70% !important;
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
    .detailalarmOperRespIpad{
        width:30% !important;
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:landscape) {
    .alarmheilghtipadland{
        height:190px !important;
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
    .alarmheilghtipadPortrait{
        height:155px !important;
    }
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
    .detailQosOperRespIpad{
        width:70% !important;
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
    .detailchoiceOperRespIpad{
        margin-left:450px !important;
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
    .detailserachOperRespIpad{
        width:115px !important;
    }
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
    .alarmhistRespIpad{
        width:100% !important;
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
    .alarmhistadvaserachRespIpad{
        width:120% !important;
    }
}


@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:landscape) {
    .alarmhistadvserachRespIpadLand{
        width:85% !important;
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:landscape) {
    .alarmhistRespLandIpad{
        width:72% !important;
    }
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
    .alarmserachRespLandIpad{
        width:85% !important;
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
    .searchRespLandIpad{
        width:0% !important;
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
    .searchmarginRespLandIpad{
        margin-left:20px !important;
        width:95% !important;
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
    .edituserRespPortIpad{
        width:184% !important;
    }
    .edituserRespPortIpadPhone{
        margin-left:-10% !important;
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:landscape) {
    .edituserRespLandIpad{
        width:150% !important;
    }
}


@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
    .editsiteRespPortIpad{
        width:230% !important;
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:landscape) {
    .editsiteRespLandIpad{
        width:169% !important;
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
    .editfabRespPortIpad{
        width:185% !important;
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:landscape) {
    .editfabRespLandIpad{
        width:215% !important;
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
    .editfabColumRespPortIpad{
        width:100% !important;
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:landscape) {
    .editfabColumRespLandIpad{
        width:90% !important;
    }
}


@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
    .editpricetabviewcarteRespProt{
        width:58% !important;
    }
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
    .editpricetabviewRespProt{
        width:85% !important;
    }
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:landscape) {
    .editpricetabviewLandRespProt{
        width:60% !important;
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:landscape) {
    .editpricetabviewcarteLandRespProt{
        width:40% !important;
    }
}


@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
    .editpriceprofileRespProt{
        width:100% !important;
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
    .fichadminsiteIpadRespProt{
        width:80% !important;
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:landscape) {
    .fichadminsiteDialogueIpadRespProt{
        margin-top: 20% !important;
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
    .fichadminbuttonaddIpadRespProt{
        width:25% !important;
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
    .fichadminwidthdialogIpadRespProt{
        width:80% !important;
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
    .fichadminoperIpadRespProt{
        width:80% !important;
    }
}

.ui-panelgridBorder tr, .ui-panelgrid td{
    border-color: #EF3C56;
}

.ui-datatable-hor-scroll .ui-datatable-tablewrapper,.scrolling-div .ui-datatable-tablewrapper  
{  
    overflow: auto;  
}  

.mobile tr {
    display: block;
}

.header {
    margin-left: 64%;
}

div.options > label > input:checked+img  {
    background: url(http://cdn1.iconfinder.com/data/icons/onebit/PNG/onebit_34.png);
    background-repeat: no-repeat;
    background-position:center center;
    background-size:20px 20px;
}

/* Text Decoration */
.Underline{ text-decoration:underline;}

/* Making Unselectable Contents */
.Unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


/* Display */
.DispBlock{ display:block;}
.DispTable{ display:table; vertical-align:middle;}
.DispTableRow {display: table-row;}
.DispTableCell{ display:table-cell; vertical-align:middle;}
.DispNone{ display:none;}
.DispInlBlock{display:inline-block;}
/**
Try do remove this class NoDisplay step by step because it is a duplicate of DispNone.
*/
.NoDisplay{display:none !important;}

/* Position */
.PosFixed{position:fixed;}
.PosAbsolute{position:absolute;}
.PosRelative{ position:relative;}
.PosStatic{position:static;}

/* Floating */
.Fleft{ float:left;}
.Fright{ float:right;}
.Fnone{ float:none !important;}

/* Overflows */
.OvHidden{ overflow:hidden;}
.OvScroll{ overflow:scroll;}
.OvAuto{ overflow:auto;}
.OvVisible{ overflow:visible;}
.OvXScroll{ overflow-x:scroll;}
.OvYScroll{ overflow-y:scroll;}
.OvXHidden{ overflow-x:hidden;}
.OvYHidden{ overflow-y:hidden;}

/* Empty Boxes */
.EmptyBox3{ display:block; width:100%; height:3px; overflow:hidden;}
.EmptyBox5{ display:block; width:100%; height:5px; overflow:hidden;}
.EmptyBox10{ display:block; width:100%; height:10px; overflow:hidden;}
.EmptyBox20{ display:block; width:100%; height:20px; overflow:hidden;}
.EmptyBox30{ display:block; width:100%; height:30px; overflow:hidden;}
.EmptyBox40{ display:block; width:100%; height:40px; overflow:hidden;}
.EmptyBox50{ display:block; width:100%; height:50px; overflow:hidden;}
.EmptyBox60{ display:block; width:100%; height:60px; overflow:hidden;}
.EmptyBox70{ display:block; width:100%; height:70px; overflow:hidden;}
.EmptyBox80{ display:block; width:100%; height:80px; overflow:hidden;}
.EmptyBox90{ display:block; width:100%; height:90px; overflow:hidden;}
.EmptyBox100{ display:block; width:100%; height:100px; overflow:hidden;}
.EmptyBox110{ display:block; width:100%; height:100px; overflow:hidden;}
.EmptyBox120{ display:block; width:100%; height:100px; overflow:hidden;}
.EmptyBox130{ display:block; width:100%; height:100px; overflow:hidden;}
.EmptyBox140{ display:block; width:100%; height:100px; overflow:hidden;}
.EmptyBox150{ display: block; width: 100%; height:150px; overflow:hidden;}

/* Opacity */
.Opac100{ opacity:1; -webkit-opacity:1; -moz-opacity:1;}
.Opac95{ opacity:0.95; -webkit-opacity:0.95; -moz-opacity:0.95;}
.Opac90{ opacity:0.9; -webkit-opacity:0.9; -moz-opacity:0.9;}
.Opac80{ opacity:0.8; -webkit-opacity:0.8; -moz-opacity:0.8;}
.Opac70{ opacity:0.7; -webkit-opacity:0.7; -moz-opacity:0.7;}
.Opac60{ opacity:0.6; -webkit-opacity:0.6; -moz-opacity:0.6;}
.Opac50{ opacity:0.5; -webkit-opacity:0.5; -moz-opacity:0.5;}
.Opac40{ opacity:0.4; -webkit-opacity:0.4; -moz-opacity:0.4;}
.Opac30{ opacity:0.3; -webkit-opacity:0.3; -moz-opacity:0.3;}
.Opac20{ opacity:0.2; -webkit-opacity:0.2; -moz-opacity:0.2;}
.Opac10{ opacity:0.1; -webkit-opacity:0.1; -moz-opacity:0.1;}
.OpacZero{ opacity:0; -webkit-opacity:0; -moz-opacity:0;}

/* Border Radius */
.BordRad3{ border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px;}
.BordRad4{ border-radius:4px; -webkit-border-radius:4px; -moz-border-radius:4px;}
.BordRad5{ border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px;}
.BordRad10{ border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px;}
.BordRad15{ border-radius:15px; -webkit-border-radius:15px; -moz-border-radius:15px;}
.BordRadHalf{ border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%;}

.BordRight{ border-right:solid 1px transparent; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}
.BordLeft{ border-left:solid 1px transparent; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}
.BordTop{ border-top:solid 1px transparent; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}
.BordBottom{ border-top:solid 1px transparent; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}
.BordAll{ border:solid 1px transparent; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}

/* Width */
.Wid100{ width:100%;}
.Wid90{ width:90%;}
.Wid80{ width:80%;}
.Wid70{ width:70%;}
.Wid60{ width:60%;}
.Wid50{ width:50%;}
.Wid45{ width:45%;}
.Wid40{ width:40%;}
.Wid30{ width:30%;}

/* Width Special Values */
.Wid33{ width:33.3%;}
.Wid25{ width:25%;}
.Wid20{ width:20%;}
.Wid10{ width:10%;}

.MaxWid500{max-width:500px;}
.MaxWid600{max-width:600px;}
.MaxWid650{max-width:650px;}
.MaxWid700{max-width:700px;}

/* Height */
.Hei100{ height:100%;}
.Hei90{ height:90%;}
.Hei80{ height:80%;}
.Hei70{ height:70%;}
.Hei60{ height:60%;}
.Hei40{ height:40%;}
.Hei50{ height:50%;}
.Hei30{ height:30%;}
.Hei20{ height:20%;}
.Hei10{ height:10%;}

/* Margins */

.MarTopPerc0{ margin-top:0%;}
.MarTopPerc5{ margin-top:5%;}
.MarTopPerc10{ margin-top:10%;}
.MarTopPerc20{ margin-top:20%;}
.MarTopPerc30{ margin-top:30%;}
.MarTopPerc40{ margin-top:40%;}
.MarTopPerc50{ margin-top:50%;}

.MarAuto{ margin-left:auto; margin-right:auto;}

.MarTop5{ margin-top:5px;}
.MarTop7{ margin-top:7px;}
.MarTop10{ margin-top:10px;}
.MarTop15{ margin-top:15px;}
.MarTop12{ margin-top:12px;}
.MarTop20{ margin-top:20px;}
.MarTop30{ margin-top:30px;}
.MarTop40{ margin-top:40px;}
.MarTop50{ margin-top:50px;}

.MarTopQuarter{ margin-top:25%;}
.MarTopHalf{ margin-top:50%;}


.MarBot0{ margin-bottom:0px;}
.MarBot10{ margin-bottom:10px;}
.MarBot35px{ margin-bottom:35px;}
.MarRight10{ margin-right:10px;}
.MarRight20{ margin-right:20px;}
.MarLeft5px{margin-left: 5px;}
.MarLeft10px{margin-left: 10px;}

.backRoundWhite{ background-color:#ffffff;}

/* Paddings */
.PaddingTopPercent10{ padding-top: 10%;}

/* Containers */
.Container100{ width:100%; overflow:hidden; float:left;}
.Container96{ width:96%; overflow:hidden; float:left;}
.Container90{ width:90%; overflow:hidden; float:left;}
.Container85{ width:85%; overflow:hidden; float:left;}
.Container80{ width:80%; overflow:hidden; float:left;}
.Container75{ width:75%; overflow:hidden; float:left;}
.Container70{ width:70%; overflow:hidden; float:left;}
.Container67{ width:66.7%; overflow:hidden; float:left;}
.Container60{ width:60%; overflow:hidden; float:left;}
.Container50{ width:50%; overflow:hidden; float:left;}
.Container45{ width:45%; overflow:hidden; float:left;}
.Container40{ width:40%; overflow:hidden; float:left;}
.Container35{ width:35%; overflow:hidden; float:left;}
.Container33{ width:33.3%; overflow:hidden; float:left;}
.Container30{ width:30%; overflow:hidden; float:left;}
.Container25{ width:25%; overflow:hidden; float:left;}
.Container20{ width:20%; overflow:hidden; float:left;}
.Container15{ width:15%; overflow:hidden; float:left;}
.Container10{ width:10%; overflow:hidden; float:left;}
.Container5{ width:5%; overflow:hidden; float:left;}

.ContainerIndent{width:auto; overflow:hidden; display:block;}

/* Text Aligns */
.TexAlCenter{ text-align:center;}
.TexAlLeft{ text-align:left;}
.TexAlRight{ text-align:right;}

/* Padding With Transparent Border*/
.PadWithBorder1{ border:solid 1px transparent;}
.PadWithBorder2{ border:solid 2px transparent;}
.PadWithBorder3{ border:solid 3px transparent;}
.PadWithBorder4{ border:solid 4px transparent;}
.PadWithBorder5{ border:solid 5px transparent;}
.PadWithBorder10{ border:solid 10px transparent;}

/* Box Sizing */
.BoxSizeContent{ box-sizing:content-box; -webkit-box-sizing:content-box; -moz-box-sizing:content-box;}
.BoxSizeBorder{ box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}

/* Font Sizes */
.Fs9{font-size:9px;} 
.Fs10{font-size:10px ;} 
.Fs11{font-size:11px ;} 
.Fs12{font-size:12px ;} 
.Fs13{font-size:13px ;} 
.Fs14{font-size:14px ;} 
.Fs15{font-size:15px ;} 
.Fs16{font-size:16px ;} 
.Fs17{font-size:17px ;} 
.Fs18{font-size:18px ;} 
.Fs19{font-size:19px ;} 
.Fs20{font-size:20px ;} 
.Fs21{font-size:21px ;} 
.Fs22{font-size:22px ;} 
.Fs23{font-size:23px ;} 
.Fs24{font-size:24px ;} 
.Fs25{font-size:25px ;} 
.Fs26{font-size:26px ;} 
.Fs27{font-size:27px ;} 
.Fs28{font-size:28px ;} 
.Fs29{font-size:29px ;} 
.Fs30{font-size:30px ;}
.Fs40{font-size:40px ;}
.Fs50{font-size:50px ;}
.Fs60{font-size:60px ;}
.Fs100{font-size:100px ;}
.Fs130{font-size:130px ;}

/* Font Type */
.FontBold{ font-weight:bold;}
.FontLight{ font-weight:lighter;}
.FontNormal{ font-weight:normal;}

/* Animated */
.Animated05{-webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;}
.Animated1{-webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease;}


.changecolor:hover{background-color:yellowgreen; padding: 20px;}

.notransition {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    -ms-transition: none !important;
    transition: none !important;
}
/******************************************************************************************************************************** */

/* MEDIA QUERIES **************************************************************************************************************** */

/* Large desktop */
@media (min-width: 960px){
    .ContainerIndent{margin:8px 10px;}
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 640px) and (max-width: 960px) {	
    .span3 {width: 45%;}
    .ContainerIndent{margin:6px 8px;}
    .Responsive{width:50%}
}
@media (min-width : 375px) and (max-width : 667px){
    .main {
        display: none;
    }         
    .ui-reflow-dropdown {display: none;}
} 

/* Landscape phone to portrait tablet. Hide components that can only be displayed on desktops. 
@ see https://www.w3.org/TR/CSS21/media.html
@ see https://www.w3schools.com/css/tryit.asp?filename=trycss3_media_queries2
*/
@media all and (max-width: 640px) {									  
    .ContainerIndent{margin:6px 8px;}
    .Responsive{width:100%}	
    .DisplayOnResponsive{display:block; float:right;}    
    .ui-reflow-dropdown {display: none;}
}
@media (max-width: 10px) {
    .Responsive{width:80%}	
    .ui-reflow-dropdown {display: none;}
}

@media (max-device-width: 690px){
    .ui-reflow-dropdown {display: none !important;}    
}

/* Portrait phones and down */
@media (min-width:320px) and (max-width: 480px) {
    .span3 {width: 90%;}	
    .ContainerIndent{margin:16px 8px 0px 8px;}
    .Responsive{width:100%}
    .ui-reflow-dropdown {display: none;}
}

/* Landscape phones. Hide components that can only be displayed on desktops. */
@media (min-height:200px) and (max-height:500px) and (max-width:960px){
    .ui-reflow-dropdown {display: none;}
}



.outerpanelgrid tbody tr, .outerpanelgrid tbody td{  
    border: none;
}
.innerpanelgrid tbody tr, .innerpanelgrid tbody td{
    border: 1px solid red ;
}

.ui-column-filter{
    height: 10px !important;
}

.ui-column-customfilter{
    height: 60% !important;
}
.ui-column-customfilter .ui-selectonemenu-item {
    height: 30% !important;
    white-space: pre;
}

/**
display different icons of Totalwash according to device width
*/
@media (min-width:480px){
    .toHideOnSmartphones{
        display: block  !important;
    }
    .TotalWashTopBarShortIcon{
        display: none  !important;
    }
    .toShowOnSmartpohne{
        display: none !important;
    }
}

@media (max-width:480px){
    .toHideOnSmartphones{
        display: none  !important;
    }
    .TotalWashTopBarShortIcon{
        display: block !important;
    }
    .toShowOnSmartpohne{
        display: block !important;
    }
}

@media (min-width:368px){
    .TotalWashLoginLongIcon{
        display: block !important;
    }
}

@media (max-width:367px){
    .TotalWashLoginLongIcon{
        display: none !important;
    }

    .TotalWashLoginShortIcon{
        margin-left: 20px !important;
        width: 150px;
        height: 64px !important;
        display: block !important;
    }
}