.loginErrorMsg .ui-md-12{
    text-align: center !important;
}
.topbar-title-center{
    text-align: center;
    font-size: 30px !important;
    font-weight: bold; 
    color: #ffffff;
    position: relative;
    top: 10px;
}

.loading-icon {
    font-size: 3rem;
    color:blue;
}
.nowrap-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


@font-face {
    font-family: "Tajawal";
    src: url("\/SPS-web/javax.faces.resource/google-fonts/Tajawal-Bold.ttf?ln=harmony-layout") format('truetype');
    font-weight: bold;
}

@font-face {
    font-family: "Tajawal";
    src: url("\/SPS-web/javax.faces.resource/google-fonts/Tajawal-Medium.ttf?ln=harmony-layout") format('truetype');
    font-weight: normal;
}

/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Feb 7, 2019, 10:51:21 AM
    Author     : dadel
*/

*  {
    font-family: "Tajawal" !important;
}

.ui-paginator-last, .ui-paginator-next, .ui-paginator-prev, .ui-paginator-first, .ui-messages-info-icon, .ui-messages-error-icon, .ui-icon, .fa, .fa:before{
    font-family: "FontAwesome" !important;
}

.ui-panelgrid.form-elements .ui-grc-2 {
    padding-left: 60px;
}




.dialogDemo label {
    line-height: 2.1em;
}

.ui-panelgrid-cell.ui-g-12.ui-md-4{
    background-color: transparent;
}

.ui-panelgrid-cell.ui-g-12.ui-md-2{
    background-color: transparent;
    font-weight:  bold;
}

.layout-wrapper .layout-main .layout-content{
    padding-top: 0;
}
.layout-main{
    min-height: 100%;
}
.ui-datepicker-trigger.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-icon-only{
    right: auto;
}

.wrap-column-datatable{
    white-space: pre-wrap !important ;
    word-break: normal;
    font-size: 11pt !important;
}


.fa-pencil, .fa-trash, .fa-plus ,.fa-question-circle ,.fa-eye ,.fa-legal , .fa-sitemap , .fa-send , .fa-check ,.fa-paperclip, .fa-calendar ,.fa-share-square-o,.fa-bank, .fa-file-text,.fa-file-text-o,.fa-arrow-left,.fa-arrow-down,.fa-recycle,.fa-share,.fa-clipboard,.fa-repeat,.fa-check-circle-o,.fa-file-export
, .fa-user-plus, .fa-newspaper-o,.fa-close,.fa-download,.fa-upload,.fa-refresh ,.fa-lock, fa-calculator, .fa-grip-solid-horizontal,.fa-navicon{

    color: #000 !important;
}
.fa-times{

    color: #000 !important;
}
.color-bg-none{
    background: none !important ;
}
.border-none{
    border: none !important ;
}

.border{
    border: 1px solid #c8c8c8;
}

.text-center{
    text-align: center;
}
.text-right{
    text-align: right ;
}
.text-left{
    text-align: left;
}
.panel{
    font-size: 19px; 
    font-weight: bold; 
    border: none;
    text-align: center;
}

.sub-panel .ui-panel-titlebar {
    font-size: 15px; 
    font-weight: bold; 
    text-align: right;
    padding: 5px !important;
}

label {
    font-size: 13px !important;
}

.search_botton.ui-md-2 {
    float: left;
}

.search_botton.ui-md-2 button {
    font-weight: bold;
    font-size: 16px;
}

.add_delete_botton {
    float: right;
    clear: both;
    display:flex;
    padding: 8px 14px 6px 28px;
    flex-wrap: wrap;
    width: 80%;
}
.small_add_delete_botton {
    float: right;
    clear: both;
    display:flex;
    padding: 8px 14px 6px 28px;
}
.add_delete_botton button{
    float: right;
    /*margin-left: 10px;*/
    font-weight: bold;
    font-size: 13px;
    /*width: 90%!important ;*/
    margin-top: 3px !important;

}
.small_datatable_facet_header_botton{
    float: right;
    margin-left: 6px!important;
    font-weight: bold;
    font-size: 10px!important;
    padding: 2px 2px 2px 2px!important;

}
.small_font_column_header{
    font-size: 12px!important;
    font-weight: bold!important;
}
.small_font_column_row{
    font-size: 11px!important;
}
th {
    font-size: 13px;
}

.margin-t-10 {
    margin-top: 10px;
}

.margin-b-10 {
    margin-bottom: 10px;
}

.margin-10 {
    margin: 10px;
}

body .ui-panel .ui-panel-content {
    border: none !important;
}

.ui-panel-titlebar {
    padding: 14px  !important;
}

.ui-datatable .ui-datatable-header {
    padding: 0px !important;
}

.ui-selectlistbox-filter-container .ui-selectlistbox-filter.ui-inputfield{
    padding-right: 28px !important;
    padding-left: auto !important;
}

.ui-selectmanymenu .ui-selectlistbox-filter-container .ui-icon{
    right: 18px !important;
    left: auto !important;
}

.header-Address{
    background-color: #f99838 !important;
    width: 20% !important;
}

body .ui-datatable .ui-datatable-data {
    tr .ui-row-toggler.ui-icon-circle-triangle-e:before {
        content: "\f0a8" !important;
    }
}

.ui-tabs-panels{
    border: none !important;
}

.ui-icon-circle-triangle-e, .ui-icon-arrow-1-e, .ui-icon-arrowstop-1-e, .ui-icon-arrow-1-w, .ui-icon-arrowstop-1-w {
    transform: rotate(360deg);
}

.ui-datalist {
    width:300px;
    margin-bottom: 0px !important;
    margin-top: 0px;
    border: none !important;
    padding: 0px;
    padding-top: 0px;
    margin: 0px;
}

.ui-datalist-item {
    padding:0px;
    border: none !important;
    padding-top: 0px;
    margin: 0px;
}

.paginated .ui-datalist-data {
    padding-left: 0px;
    border: none !important;
    padding-top: 0px;
    margin: 0px;
}

.two_button_left button {
    width: 40% !important;
    margin-left: 10px;
}

.three_button_left button {
    width: 30% !important;
    margin-left: 10px;
}

.two_button_left {
    float: left;
}

.three_button_left {
    float: left;
}

.button_right_two_left {
    float: right;
}

.twoinput {
    width: 35px !important;
    padding-right: 0px !important;
    padding-left: 0px !important;
}

.width-auto{
    width: auto !important;
}

.white-important {
    color: #fff !important;
}

.firstinput{
    width: 60px !important;
    padding-right: 0px !important;
    padding-left: 0px !important;
    margin-left: 14px;
}

.CalenderStyle input 
{
    width: 55% !important;
}

.ui-datepicker-calendar span
{
    font-size: 9px !important;
    font-weight: bold;
}

.fc-next-button.ui-button.ui-state-default.ui-corner-right {
    transform: rotate(180deg) !important;
    padding-top: 8px;
}

.ui-widget-content.ui-orderlist-list.ui-corner-all.ui-sortable{
    width:100% !important;
}

.ui-widget-content.ui-orderlist-list.ui-corner-all.ui-sortable {
    font-size: 12px !important;
}

.ui-carousel .ui-carousel-viewport .ui-carousel-items .ui-carousel-item{
    float: right !important;

}

span.ui-carousel-button.ui-carousel-next-button.ui-icon.ui-icon-circle-triangle-e {
    transform: rotate(0deg);
}

.ui-button.ui-button-icon-only {
    /*overflow: hidden;*/
}

.no-border table tr, .no-border table td, .no-border table th{
    border: none !important;
}

.no-border table{
    width: auto !important;
}

.panel table {
    font-size: 16px;
}

body .ui-treetable .ui-treetable-data > tr > td .ui-treetable-toggler {
    margin-left: 6px !important;
}
.table-layout-auto table{
    table-layout: auto !important;

}

.datalistnoborder {

    width: auto !important;
}

.datalistnoborder .ui-datalist-content{
    border: none !important;
}

.layout-dashboard .latest-activities ul li .activity-link {
    bottom: -40px;
}

.layout-dashboard .latest-activities ul li {
    line-height: 80px;
}

.layout-dashboard .stats-box span.statistics{
    font-size: 18px !important;
    display:inline-block !important;
    text-align: right !important;
}
.layout-dashboard .stats-box span.statistics-header {

    font-family: "Tajawal" !important;
    font-weight: bold !important;
    letter-spacing: normal;
    font-size: 16px !important;

}
.layout-dashboard .stats-box span.statistics-info {

    font-size: 14px !important;
}
.card{background-color:#ffffd0 !important;}

.reportpanel
{
    font-size: large !important;
    text-align: center !important;
    border:none!important;
    background: none!important;
    padding: 0px !important;
}

.showdetaliedreportbutton{
    direction: ltr; float: left;
    font-size: 11pt !important;
}

.spacebesidearrow .ui-icon.ui-icon-triangle-1-s, .spacebesidezrrow  .ui-icon.ui-icon-triangle-1-e{
    margin-left: 6px ;
}

.custom_menu_link_items{
    width: 140px !important;
    text-align: end
}

.three_button_right_composit {
    text-align: right;
}

.three_button_right_composit .master-data{
    display: inline-block;
    line-height: 30px;
}

.three_button_right_composit button{
    margin-left: 15px;
    line-height: 30px;
    font-weight: bold;
    font-size: 16px;
    float: none !important;
}

.ui-overlaypanel{
    width: 75% !important;
    right: inherit !important; 
}
.ui-overlay-visible .ui-overlaypanel{
    position: inherit  !important;
}
.hiddenButton{
    display: none !important;
}

.leftTableButtons{ 
    float: left;
    margin: 10px !important;
}

.noBorderNoBackgroundButton{
    border:none !important;
    background: none !important;
}

.ui-tree.ui-tree-horizontal .ui-treenode.ui-treenode-leaf ,.ui-tree.ui-tree-horizontal .ui-treenode.ui-treenode-collapsed{
    padding-left: 0px !important;
    padding-right: 40px !important;
}
.togglerButtonStyle{
    float :left;    margin: 10px !important;

}
.panelGridButton{
    width: 100%;
}
.borderbackgroundnone.ui-panelgrid>*>tr,
.borderbackgroundnone.ui-panelgrid .ui-panelgrid-cell ,
.borderbackgroundnone.ui-panel>*>tr,
.borderbackgroundnone.ui-panel .ui-panel-cell{
    border:none !important;
}
.ui-panel-titlebar{
    text-align: center !important;

}
.panelGridForm.ui-panelgrid>*>tr,
.panelGridForm.ui-panelgrid .ui-panelgrid-cell ,
.panelGridForm.ui-panel>*>tr,
.panelGridForm.ui-panel .ui-panel-cell{
    align-self: flex-start;
    text-align: right;
    border: none !important;
}
.borderbackgroundnone
{
    border:none !important;
    background: none !important;
    font-size: 11pt !important;
    font-weight: bold !important;
    text-align: right !important;

}
.borderbackgroundnone tr
{
    /* border:none !important;*/
    background: none !important;
}
.borderbackgroundnone tr td
{
    /* border:none !important;*/
    background: none !important;
}

.smallDateStyle{
    width: 8em !important;
}

.ui-dialog ,
.ui-dialog-content {
    overflow: hidden !important;
}
.permissionTree{
    width :100% !important;
}
.permissionsTree{
    font-size: medium;
}
.ddlstyle .ui-selectonemenu-trigger{
    border-right: none;
    border-top: none;
    border-bottom: none;
    cursor: pointer;
    width: 10%;
    height: 100% !important;
    position: absolute;

    top: 1%;
    padding: 0 3px;
}

.ddlstyle label{
    width: 192px !important;
}
.ddlstyle{
    width: 200px !important;vertical-align: middle !important;
}
.ui-picklist-buttons-cell.ui-button{

    outline: none;
}
.inline{
    display: inline-block;
}
td.rowEditorNextColumn{
    text-align: center;
    width: 100%;
}

.rowEditorCenter >*> span{
    color: black !important;
}

td.rowEditorCenter{
    text-align: center;
    width: 100%;
}


.reportSize
{
    width: 95% !important;
    height: 600px !important;
}

.usernameheader{
    margin-left: 5%;
    font-size: 13pt !important;
    color: black !important;
    font-weight: bold !important;
}
.panelHeader{

    font-size: 11pt !important;
    font-weight: bold !important;
    text-align: center !important;
}
.ui-datatable-data > tr > td{
    /*font-weight: bold;*/
    font-size: 9pt !important;    
    /*font-size: 0.7vw !important;*/
}

.facetStyleClass{
    background-color: #f99838;
}

.ui-picklist.p1 .ui-picklist-list{
    width: 450px;
}

.ui-selectonemenu-panel .ui-selectonemenu-list-item { text-align: right !important; }
.ui-selectonemenu .ui-selectonemenu-label { -moz-transform: scaleX(-1); -webkit-transform: scaleX(-1); -o-transform: scaleX(-1); -ms-transform: scaleX(-1); transform: scaleX(-1); text-align: right !important; }
.ui-selectonemenu { -moz-transform: scaleX(-1); -webkit-transform: scaleX(-1); -o-transform: scaleX(-1); -ms-transform: scaleX(-1); transform: scaleX(-1); }
.mainMenuTitle{
    color: #000;
    font-size: 36px !important;
}
.ui-row-editor-close{
    margin-right: 15px !important;
}
.customConfirmDialog .ui-confirm-dialog-message{
    width: 100%;
}
.customConfirmDialog .ui-icon{
    display: none !important;
}

.borderbackgroundnoneticket.ui-panelgrid>*>tr,
.borderbackgroundnoneticket .ui-panel-content,
.borderbackgroundnoneticket.ui-panelgrid .ui-panelgrid-cell ,
.borderbackgroundnoneticket.ui-panel>*>tr,
.borderbackgroundnoneticket.ui-panel .ui-panel-cell{
    border:none !important;
    background-color: gainsboro !important;
    font-size: 11pt !important;
    font-weight: bold !important;
}
.rowExpansion.ui-expanded-row-content td{
    padding: inherit !important;
}

.rowExpansion.ui-datatable-data.ui-widget-content td{
    padding-right: 1px;
}

.rowExpansionColumn{
    width:16px;
}
.ui-datagrid-no-border .ui-datagrid-content {
    border: none !important;
}
/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
    Created on : Oct 8, 2015, 1:20:33 PM
    Author     : rmoftah
*/



.outputLableColumn{
    text-align: right;
}

.outputLargeLableColumn{
    text-align: right;
    width: 6.6em;

}

.lookupOutputLableColumn{
    text-align: right;
    width: 6em;
}

.berthingRequestLableColumn{
    text-align: right;
    width: 10em;
}

.requestLableColumn{
    text-align: right;
    width: 12em;
}
.outputLable{
    text-align: right !important;
}

.outputLargeLable{
    width: 20px;
}
.inputControlColumn {
    padding-left: 30%  !important;
    display: inline-flex;
}
.inputControlColumnWithoutDispaly {
    padding-left: 30%  !important;
}
.mediumInputControlColumn {
    padding-left: 20%  !important;
    display: inline-flex;
}


.inputText {
    text-align: right !important;
    width: 55% !important;
}

.largeInputText {
    width: 40em;
}

.smallinputText {
    width: 29% !important
}

.small4inputText {
    width: 27% !important;
    margin-left: 5px !important;
}
.small3inputText {
    width: 17% !important;
}
.verySmallinputText {
    width: 25% !important;
}
.mediumInputText {
    width: 30% !important;
}

.inputNumber .ui-inputfield {
    width: 55% !important;
}

.smallInputNumber .ui-inputfield {
    width: 8em;
}

.betaInputNumber .ui-inputfield {
    width: 5em;
}

.verySmallInputNumber .ui-inputfield {
    width: 3em;
}

.calendarFilter .ui-inputfield {
    width:100% !important;
}

.panelGridButton{
    width: 100%;
}
.panelGridForm{
    text-align: right !important;
}
.panelGridLarge{
    text-align: right !important;
    width: -moz-available !important;
}
.buttonRight{
    float: right;
}
.buttonLeft{
    float: left !important;
}

.smallDataTableColumnButton{
    width:80px;
    text-align: -moz-center; text-align: -webkit-center;
}

.dataTableColumnButton{
    width:9%;
    text-align: -moz-center; text-align: -webkit-center;
}

.mediumDataTableColumnButton{
    width: 100px;
    text-align: -moz-center; text-align: -webkit-center;
}

.largeDataTableColumnButton{
    width:10%;
    padding:0 !important;
    text-align: -moz-center; text-align: -webkit-center;
}

.largeColumnButton{
    width:13%;
    text-align: -moz-center; text-align: -webkit-center;
}
.medColumn{
    width:9%;
    text-align: -moz-center; text-align: -webkit-center;
}
.dataTableColumnButtonDetail{/*3buttons dataTableColumn*/
    width:9%;
    text-align: -moz-center; text-align: -webkit-center;
}
.LargeButton  /*3 wordes label*/
{
    WIDTH:150px;
}

.dataTableButton{
    height: 30px;
    width: 30px;
    background: transparent no-repeat top !important;
    border: none !important;
    box-shadow: none !important;
    color: #000 !important;
}
.panelGridWithBorder {
    border: inset dodgerblue !important;
}
.dataEditTableButton{
    height: 30px;
    width: 1em!important;
    background: transparent no-repeat top !important;
    border: none !important;
    box-shadow: none !important;
}

.saveCancelDiv{
    float: left;
    margin-bottom: 1em !important;
}
.formWidth{
    width: 100%;
}

.berthingReqFormWidth{
    width: 100%;
}

.berthingReqFormWidth tr{
    border: 1px solid !important;
}

.selectOneMenuStyle{
    width: 55% !important;
    min-width: 55% !important;
    padding-right: 0px !important;
}
.largeSelectOneMenuStyle{
    width: 17em !important;
}
.mediumSelectOneMenuStyle{
    width: max-content !important;
}
/*    min-width: 80% !important;*/
/*.SelectOneMenuStyle{
    width:  55% !important;
    min-width:  55% !important;

}*/
.selectManyMenuStyle{
    width: 55% !important;
    height: 10em !important;
}

.selectManyMenuStyle .ui-selectlistbox-listcontainer{
    height: 10em !important;
}

.largeSelectManyMenuStyle{
    width: 30em !important;
    height: 12em !important;
}

.largeSelectManyMenuStyle .ui-selectlistbox-listcontainer{
    height: 10em !important;
}

.smallSelectManyMenuStyle{
    width: 12.5em !important;
    height: 5em !important;
}

.smallSelectManyMenuStyle .ui-selectlistbox-listcontainer{
    height: 5em !important;
}

.smallSelectOneMenuStyle{
    width: 25%!important;
    min-width: 25% !important
}

.pickListStyle .ui-picklist-list{
    width: 12.5em !important;
    height: 10em !important;
}

.largPickListStyle .ui-picklist-list{
    width: 27em !important;
    height: 10em !important;
}
.veryLargPickListStyle .ui-picklist-list{
    width: 40em !important;
    height: 10em !important;
}

.pickListStyle .ui-picklist-buttons {
    height: 10em !important;
}

.togglerButtonStyle
{
    float:right;   
    margin: 10px !important;

}
.saveButtonStyle{
    margin: 5px;
}

.cancelButtonStyle{
    margin-left: 5px;
}

.systemsMenu .ui-button {
    width:100% !important;
}

.systemsMenu .ui-button-icon-left {
    right: 0.5em !important;
}

.sideMenu {
    width: 100% !important;
}

.sideMenu .ui-icon-triangle-1-e {
    background-position: -96px -16px;
}


.saveResetPanelGrid{
    width: 100%;
    text-align: left !important;
    border: none;
    padding-left: 0px;
}

.unsetPadding{
    padding-left: 0px;
}

.saveResetBorderbackgroundnone
{
    border:none !important;
    background: none !important;
    font-size: 11pt !important;
    font-weight: bold !important;
    text-align: center !important;
    padding-left: 0px !important;
}

.saveResetBorderbackgroundnone tr
{
    border:none !important;
    background: none !important;
    padding-left: 0px !important;
}
.saveResetBorderbackgroundnone tr td
{
    border:none !important;
    background: none !important;
    padding-left: 0px !important;
}

.checkboxLable{
    width: 5em;
    padding-right: 6em;
    padding-top: 0.05em;
    display: contents;
}

.rowEditorNextColumn{
    border-right-style: hidden !important;
    width: 3% !important;
    text-align: center;
}

.rowEditor{
    padding: 0px !important;
    width: 5% !important
}

/*.annualCalendar .ui-datepicker-multi .ui-datepicker-group{
    float: right !important;
}*/

.calheadersLeftRight{
    border-style: none !important;
    padding:0px !important;
    border: none !important;
    text-align: left!important;
}

.ui-datepicker-trigger.ui-button.ui-widget.ui-state-default.ui-corner-all.ui-button-icon-only{
    width: 1.6em;
    /*margin-left: 5em  !important;*/
}

.ui-selectmanycheckbox label, .ui-selectoneradio label{
    padding-left: 1em !important;
}

.selectOneMenuWithMarginStyle{
    width: 55% !important;
}

.rowEditorCenter{
    width: 6% !important;
    text-align: center;
    padding-top: 0.6em;
    margin-top: -0.01em;
    /*padding-left: 17px !important;*/
}

.smallOverlayPanelStyle{
    /*width: 1000px !important;*/
    /*height: 300px !important;*/
    min-width: 50% !important;
}

.largeOverlayPanelStyle{
    /*    width: 1200px !important;
        height: 600px !important;*/
    min-width: 80% !important;
}

.orderlist.ui-orderlist {
    width: 100%;
}

.orderlist.ui-orderlist .ui-orderlist-controls {
    width: 2%;
}

.orderlist.ui-orderlist .ui-orderlist-list {
    width: 99.7%;
    height: 100%
}

.orderlist.ui-orderlist .ui-orderlist-button-move-top {
    display: none;
}

.orderlist.ui-orderlist .ui-orderlist-button-move-bottom {
    display: none;
}

.orderlist.ui-orderlist .ui-orderlist-item {
    text-align: center;
}

.inlineIcon {
    display: inline-block !important;
}

.orderListTable.ui-datatable tbody td {
    width:20%;
}

.buttonGridHeader .ui-datatable .ui-datatable-header, .ui-datatable .ui-datatable-footer{
    text-align: right !important;
}

.hiddenColumn {
    display: none;
}

.berthingRequestReportCenterLabel{
    text-align: center;
}

.berthingRequestReportRightLabel{
    text-align: right;
}

.berthingRequestReportFullWidth{
    width: 99%  !important;
    margin-top: 10pt;
    margin-right: 2pt;
}

.berthingRequestReportFullWidth tr{
    border:1px solid !important;
}

.borderNone {
    border:none !important;
    background: none !important;
    width: 100%;
}

.borderNone tr
{
    border:none !important;
    background: none !important;
}
.borderNone tr td
{
    border:none !important;
    background: none !important;
}

.borderBottomTopNone {
    margin-top: 10pt;
    width: 100%;
}

.borderBottomTopNone tr
{
    border-bottom: none !important;
    border-top: none !important;
    background: none !important;
}

.borderBottomTopNoMargin {
    width: 100%;
    font-size: 10pt !important;
}

.borderBottomTopNoMargin tr
{
    border-bottom: none !important;
    border-top: none !important;
    border-left: 1px solid !important;
    border-right: 1px solid !important;
    background: none !important;
}

.headerBorder
{
    border-bottom: 1px solid !important;
    border-top: 1px solid !important;
    font-weight: bold !important;
    text-align: center;
}

.bottomBorderCenter
{
    border-bottom: 1px solid !important;
    text-align: center !important;
}

.bottomBorder
{
    border-bottom: 1px solid !important;
}


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

.requestBoldLabel{
    font-weight: bold !important;
    font-size: 9pt !important;;
}

.boldLabel{
    font-weight: bold !important;
}

.headerBoldLabel{
    font-weight: bold !important;
    font-size: 10pt !important;
}

.panelNoPadding.ui-panel {
    padding: 0pt !important;
    font-size: 11pt !important;
}
.panelNoPadding.ui-panel .ui-panel-content{
    padding: 0pt !important;
}

.requestPanelNoPadding.ui-panel {
    padding: 0pt !important;
    font-size: 11pt !important;
}
.requestPanelNoPadding.ui-panel .ui-panel-content{
    padding: 0pt !important;
}

.requestPanelNoPadding.ui-widget {
    background: none;
    background-size: cover;
}
.requestPanelNoPadding.ui-widget .ui-widget-content{
    background: none;
    background-size: cover;
}

.panelNoMargin {
    margin: 0pt !important;
    width: 100% !important;
    border: none !important;
    background: none !important;
}

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

.rowNoBorder {
    border: none !important;
}

.logoStyle{
    float: left;
}

.titleStyle{
    font-size: 25px !important;
    font-weight: bold;
    text-decoration: underline;
    color: #184064;
}

.seperatorStyle {
    margin-top: 0pt !important;
    border: 1px solid black !important;
}

.printButtonStyle {
    margin-top: 10pt !important;
}
.largeColumn{/*large grid column*/
    width:280px;
    text-align: -moz-center; text-align: -webkit-center;
}
.mediumColumn{/*medium grid column*/
    width:140px;
    text-align: -moz-center; text-align: -webkit-center;
}
.reportpanel
{
    font-size: large !important;
    text-align: center !important;
    border:none!important;
    background: none!important;
    padding: 0px !important;
}
.reportFrame
{
    width: 95% !important;
    height: 600px !important;
}

.showdetaliedreportbutton
{
    direction: rtl; float: left;
    font-size: 11pt !important;
}
.rowClassError {
    background-color : red !important;
}

.rowClassGreen {
    background-color : lightcyan !important;
}
.rowClassRedlight {
    background-color :  #ffe6e6 !important;
}

.childComponent .ui-menuitem-link{
    border: 1px solid #aed0ea;
    background-color: #c0e5fe;
}

.childComponent .ui-menu-list .ui-menuitem-link{
    background-color: #e0e0e0;
    border: 1px solid #aed0ea;
}

.columnWithSmallWidth {
    width: 100px;
}

.columnWithLargeWidth {
    width: 400px;
}

.columnWithMediumWidth {
    width: 250px;
}
.columnWithBackgroundColor{
    background: silver;
}
.hideDataTable .ui-datatable-empty-message {
    display: none;
}

.datalist.ui-datalist .ui-datalist-content{
    border: none;
}

.panelHeader.ui-panel{
    padding: 0px;
}

.panelHeader.ui-panel .ui-panel-titlebar{
    font-weight: 100;
    font-size: 8pt !important;
    text-align: right;
}
.subHeaderBorderBackGroundNone
{
    border:none !important;
    background: none !important;
    font-weight: 100;
    font-size: 8pt !important;
    text-align: right;
}
.subHeaderBorderBackGroundNone tr
{
    border:none !important;
    background: none !important;
}
.subHeaderBorderBackGroundNone tr td
{
    border:none !important;
    background: none !important;
}

.centeredpanelGrid.ui-panelgrid.ui-widget{
    margin-right: 25% !important;
}


.smallCal .ui-inputfield.ui-widget.ui-state-default.ui-corner-all.hasDatepicker{
    width: 108px !important
}

.verySmallCal .ui-inputfield.ui-widget.ui-state-default.ui-corner-all.hasDatepicker{
    width: 96px  !important
}
.panelGridCenter {
    margin: 0 auto;
}

.ui-tooltip, .qtip{
    font-size: 12px !important;

}

form
{
    direction: rtl;
}

.ui-selectonemenu-trigger
{
    right: 0px !important;
    /*right: auto !important;*/
    /*right: unset !important;*/
}

.ui-selectonemenu-item ,
.ui-selectonemenu-label
{
    text-align: right !important;
}

/*.ui-selectonemenu-panel .ui-selectonemenu-items-wrapper{
  overflow: scroll !important;
}

.ui-selectonemenu-items-wrapper{
  height: 6.125em !important;
}*/
/*.ui-paginator-button{overflow:hidden !important;}*/

.ui-paginator-pages{direction: rtl !important; }

.ui-paginator-first ,
.ui-paginator-last ,
.ui-paginator-next ,
.ui-paginator-prev
{
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

.ui-picklist-button-add ,
.ui-picklist-button-add-all ,
.ui-picklist-button-remove ,
.ui-picklist-button-remove-all{
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

.ui-picklist-button-add .ui-button-text,.ui-picklist-button-add-all .ui-button-text,
.ui-picklist-button-remove-all .ui-button-text,.ui-picklist-button-remove .ui-button-text,
.ui-picklist-button-move-up .ui-button-text,.ui-picklist-button-move-top .ui-button-text,
.ui-picklist-button-move-down .ui-button-text,.ui-picklist-button-move-bottom .ui-button-text{
    white-space: nowrap;
    overflow: hidden;
}

.ui-orderlist-button-move-up .ui-button-text,.ui-orderlist-button-move-top .ui-button-text,
.ui-orderlist-button-move-down .ui-button-text,.ui-orderlist-button-move-bottom .ui-button-text{
    white-space: nowrap;
    overflow: hidden;
}

.ui-splitbutton .ui-button-text {
    white-space: nowrap;
    overflow: hidden;
}

.ui-splitbutton-menubutton{
    float: right;
    height: 90% !important;
}

.ui-paginator-bottom{overflow: hidden;}

.ui-widget-header h3,
.ui-menuitem-icon
{
    float:right !important;
}

.ui-menuitem-text {
    display: inline;
    float: none !important;
}

.ui-dialog-title
{
    float:right !important;
}

.ui-dialog .ui-dialog-titlebar-close,
.ui-dialog .ui-dialog-titlebar-minimize,
.ui-dialog .ui-dialog-titlebar-maximize
{
    float: left !important;
}

.ui-panel,
.ui-confirm-dialog
{
    direction: rtl;
}

.ui-messages-info-summary, .ui-messages-warn-summary,
.ui-messages-error-summary,.ui-messages-fatal-summary,
.ui-message-info-summary, .ui-message-warn-summary,
.ui-message-error-summary, .ui-message-fatal-summary
{
    margin-right: 10px !important;
}

.ui-messages-info-icon, .ui-messages-warn-icon,
.ui-messages-error-icon, .ui-messages-fatal-icon,
.ui-message-info-icon, .ui-message-warn-icon,
.ui-message-error-icon, .ui-message-fatal-icon {
    float: right !important;
}

.ui-menuitem-link {
    padding-right: 20px !important;
}

.ui-fileupload-choose{
    direction:ltr !important;
}

.ui-selectonemenu-list-item{
    text-align: right  !important;
}

.ui-selectonemenu-filter{
    direction: rtl !important;
}

.ui-selectonemenu-filter-container {
    width: 100% !important;
}

.ui-selectonemenu-filter-container .ui-icon{
    left: 10px;
}
.ui-row-editor ui-helper-clearfix{
    direction: ltr !important;
}

.ui-menubutton {
    width:100% !important;
    margin-bottom: 5px;
}

.ui-menu-list {
    position: static;
    text-align: right !important;
}

.ui-panelmenu .ui-panelmenu-header .ui-icon {
    right: 0.5em !important;
}

.ui-panelmenu .ui-panelmenu-header a {
    display: block;
    padding: 0.5em 2.2em 0.5em 0.5em !important;
}

.ui-tree.ui-tree-horizontal .ui-treenode.ui-treenode-leaf,
.ui-tree.ui-tree-horizontal .ui-treenode.ui-treenode-collapsed{
    padding-left: 0em;
    padding-right: 3em !important;
}

.ui-tree.ui-tree-horizontal .ui-treenode {
    padding-right: 3em;
}

.ui-tree-horizontal .ui-treenode-parent .ui-treenode-content{
    width: 17em !important;
    font-weight: normal;
    vertical-align: middle;
    background-color: #d7ebf9;
}

.ui-tree-horizontal .ui-treenode-leaf .ui-treenode-content{
    width: 15em !important;
    font-weight: normal;
    vertical-align: middle;
    background-color: #d7ebf9;
}

.ui-tree.ui-tree-horizontal .ui-tree-toggler {
    vertical-align: middle;
}

.ui-tree.ui-tree-horizontal .ui-chkbox {
    vertical-align: middle;
    margin-right: 3px;
    margin-left: 0px;
}

.ui-tree .ui-treenode-icon{
    vertical-align: middle;
    margin-left: 3px;
}
.ui-row-toggler.ui-icon.ui-icon-circle-triangle-e{
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}
.pe-master-detail .ui-breadcrumb ul , .pe-master-detail .ui-breadcrumb ul li{
    float: right;
}

.pe-master-detail .ui-breadcrumb .ui-breadcrumb-chevron{
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

.ui-columntoggler {
    display: none;
}

.ui-datatable-scrollable-header-box{
    margin-right: 0px !important;
    margin-left: 17px !important;
}
.togglerButtonStyle{
    float :left;
}


/* NEW */
/*.ui-inputfield{
    width:55% !important;
}*/

.ui-selectonemenu-panel .ui-selectonemenu-filter-container .ui-selectonemenu-filter.ui-inputfield{
    width:100% !important;
}

.ui-datatable tbody.ui-datatable-data {

    text-align: center !important;

}

.ui-datatable-empty-message {
    text-align: center !important;

}

.ui-inputtextarea-resizable{
    width: 90% !important;
}

.ui-button {
    margin-right: 2% !important;
    min-width: max-content !important;
}
.ui-picklist .ui-picklist-filter-container .ui-picklist-filter{
    width : 100% !important;
    padding-right : 10% !important;
}
.ui-fileupload-buttonbar  {
    background-color: transparent !important;
    border: none !important;
}

.ui-fileupload-content{
    border: none !important;
}

.ui-selectonemenu .ui-selectonemenu-label {

    width: 99% !important;
    text-align: right !important;
}


/*to make split-button rtl*/
.ui-splitbutton { -moz-transform: scaleX(-1);
                  -webkit-transform: scaleX(-1); 
                  -o-transform: scaleX(-1);
                  -ms-transform:  scaleX(-1); 
                  transform: scaleX(-1); 

}
.ui-splitbutton .ui-splitbutton-menubutton { -moz-transform: scaleX(-1);
                                             -webkit-transform: scaleX(-1); 
                                             -o-transform: scaleX(-1);
                                             -ms-transform: scaleX(-1);
                                             transform: scaleX(-1);
                                             text-align: right !important;
}
.ui-splitbutton .ui-button-text{ -moz-transform: scaleX(-1);
                                 -webkit-transform: scaleX(-1); 
                                 -o-transform: scaleX(-1);
                                 -ms-transform: scaleX(-1);
                                 transform: scaleX(-1);
                                 text-align: right !important;
}
/*End to make split-button rtl*/

.ui-splitbutton .ui-button.ui-button-text-icon-left .ui-icon {

    left: unset  !important;    
    right: 8px  !important;
}
.dataEditTableButton span{
    color: black !important;
    top: 40% !important;
}
.confirmdialog-yes span{
    color: #fff !important;
}

.confirmdialog-no span{
    color: #fff !important;
}

.dataTableWithNoBorder  tr{
    border: none !important;
    display: inherit;
}

.dataTableWithcolorTH  th{
    background-color: #e0e0e0 !important;
}

.dataTableWithNoBorder tr td{
    border: none !important;
}
/* start css for daysoff */
.ui-datepicker-year-only-calendar .hasDatepicker .ui-datepicker  {
    width: 100% !important;
    padding-left: 3.5% !important;
    margin: auto;
}
.annualCalendar .hasDatepicker .ui-datepicker {
    width: 76.5% !important;
    padding-left: 15% !important;
    margin: auto;
}

.ui-datepicker-year-only-calendar table{
    display: none;
}
.ui-datepicker-year-only-calendar .hasDatepicker .ui-datepicker .ui-datepicker-header .ui-datepicker-prev,
.ui-datepicker-year-only-calendar .hasDatepicker .ui-datepicker .ui-datepicker-header .ui-datepicker-next,
.annualCalendar .hasDatepicker .ui-datepicker .ui-datepicker-header .ui-datepicker-prev, .ui-datepicker-next{
    display: none !important;
}

.ui-datepicker-year-only-calendar .hasDatepicker .ui-datepicker{
    border: none !important;
    background:transparent;
}
.calYearButton{
    width:15% !important;
    display: flex;
    padding: 10px;
    margin:auto;
}

/* end css for daysoff */

.calendarEditableGrid .ui-inputfield.ui-widget.ui-state-default.ui-corner-all.hasDatepicker {
    width: 85% !important;
}
.ui-datatable .ui-datatable-data > tr.ui-state-highlight {
    background-color: #87c1fb !important;
}

.many_add_delete_button {
    float: right;
    clear: both;
    display:flex;
    padding: 8px 14px 6px 28px;
}

.many_add_delete_button{
    margin-left:10px;
}
.compositeGridForm .ui-md-6 .ui-md-2{
    padding-right: 0px !important;
}

.compositeGridForm .ui-md-4{
    margin-right: 16% !important;
    /*margin-right: 8% !important;*/
    width: 60% !important;
}
.compositeGridForm .ui-overlay-visible .ui-md-2{
    padding-right :0px !important;
    width:unset  !important;
}
.compositeGridForm .ui-overlay-visible .ui-md-4{
    margin-right: 8.5% !important;
    width: unset !important;
}

.compositeGridForm .ui-md-4 .ui-inputfield {
    width: 64% !important;
}
.compositeGridForm  .ui-md-4 .smallinputText {
    width: 39% !important;
}
.compositeGridForm .ui-md-4 .verySmallinputText {
    width: 24% !important;
}

.compositeGridForm  .ui-overlaypanel-content .ui-md-4 .smallinputText {
    width: 29% !important
}
.compositeGridForm  .ui-overlaypanel-content .ui-md-4 .verySmallinputText {
    width: 25% !important
}


.compositeGridForm .ui-md-4 .selectOneMenuStyle {
    width: 64% !important;
}
.compositeGridForm .ui-md-4 .ui-inputtextarea {
    width: 100% !important;
}

.compositeGridForm .ui-overlaypanel{
    width: 47% !important;
}
.compositeGridForm .gridMargin{
    /*margin-right:25% !important;*/
}
.ui-tree-horizontal .ui-treenode-parent .ui-treenode-content{
    width:max-content !important;
}

.ui-paginator .ui-paginator-prev {
    transform: rotate(0deg) !important;
}

.ui-datatable-tablewrapper thead{
    vertical-align: bottom !important;
    text-align: center !important;
}

.ui-datatable thead th .ui-icon-carat-2-n-s {
    width: 100%!important;
}


.ui-column-customfilter .ui-calendar .ui-inputfield {
    width : 100% !important;
}
.ui-datatable-data .ui-outputlabel{
    font-size:12px !important;
}
.ui-column-customfilter .ui-calendar input{
    width: 100% !important;
}
.ui-datatable thead th {
    padding: 8px 8px !important;
    text-align: center !important;
}

.ui-filter-column .ui-selectonemenu{
    width : 100% !important;
    display:  block !important;
    min-width: unset !important;
}
/*.ui-filter-column {
    margin-bottom: 0 !important;
}*/
.rowEditorNextColumn .fa-trash {
    margin-left: 5% !important;
    margin-top: -39% !important;
}
.verySmallinput{
    width: 13% !important;
    margin-left: 1% !important;
}

.textInTable{
    vertical-align:middle;
}

.trashDataTable{
    border-right-style: hidden !important;
    padding-left: 0.0px !important;
    width: 6% !important
}
.ui-dialog .ui-dialog-footer{
    text-align: center !important;
}

.centerLableText .ui-panelgrid-cell{
    text-align: center !important;
}
.ui-input-overlay {
    max-width: 30% !important;
}

.ui-overlaypanel{
    top: inherit !important;
    min-width: 60% !important;
    margin-top: 2% !important;
    /*    left: unset !important;*/
}

.smallCalendarEditableGrid input{
    width: 85% !important;
}

.spanInput input{
    width: 27.5% !important;
}
.spanCalendar{
    width: 27.5%;
}
.spanCalendar input{
    width: 100%;
}
.time{
    width: 55% !important;
    display: inline-grid;
}
.ui-selectonemenu-panel .ui-selectonemenu-list-item {
    white-space: unset !important;
}

.narrow_botton_dt{
    display:flex;
    float: right;
    padding: 8px 0px;
    max-width:5%;
}

.narrow_botton_dt button{
    float: right;
    margin-left: 2px;
    font-weight: bold;
    font-size: 10px;
    width: 5%!important ;

}

.splitButton .ui-splitbutton-menubutton{
    width: 17% !important;
    height: 100% !important;
}

.ui-datatable .ui-datatable-data > tr .ui-row-editor .ui-icon{
    color:black !important;
}

.footer-style{
    font-size: 12px;
    position: fixed;
    margin: 1px;
    /*margin-top: 2px;*/
    bottom: 0px;       
    width: 100%;
    height: 20px;  
    border: 1px solid #ddd;
    background: #f2f5f7;
    color: #362b36;
}
.splitPrintButton .ui-splitbutton-menubutton{
    height: 100% !important;
    margin-right: 1% !important;
}
.ui-cell-editor-input .selectOneMenuStyle{
    min-width: 90%!important ;
}
.ui-cell-editor-input .hasDatepicker{
    min-width: 70%!important ;
}

.myTableHeaderFloatUp .ui-datatable-tablewrapper thead{
    vertical-align: sub !important;
    text-align: center !important;
}
.ui-confirm-dialog {
    min-width: 12% !important;
}
.ui-datepicker {
    min-width: -moz-max-content !important;
}
.transparent-btn{
    border: 0  !important;
    background: none  !important;
}
.pickListStyle .ui-picklist-list {
    height: 12em !important;
}
.ui-md-6 .ui-overlaypanel{
    width:50% !important;
    min-width: 50% !important;
}
.fileUpload .ui-fileupload-content{
    width: 500px;
}
.mobileView{
    display: none !important;
}


.webView{
    display: block !important;
}
.padding-0{
    padding:0px !important;
}
.border-grid{
    border: 1px solid #353232  !important;
}
.border-grid .ui-panelgrid-cell{
    border: 1px solid #353232  !important;

}
.middle-border-grid .ui-panelgrid-cell{

    border: 1px solid #353232  !important;
    padding: 0px !important;
    border-top: 0px !important;
    /*border-left: 0px !important;*/
}
.border-grid-nopad .ui-panelgrid-cell{
    border: 1px solid#353232  !important;
    padding: 0px !important;
}
.no-border-grid .ui-panelgrid-cell{
    /*padding: 8px 14px !important;*/
    border: 0px !important;

    /*    border-top:  0.2px solid #c8c8c8  !important;
        border-left:  0.2px solid #c8c8c8  !important;*/
}

.small-border-grid .ui-panelgrid-cell{
    padding: 8px 14px !important;
    border: 0.2px solid #353232   !important;
    border-bottom:  0px !important;    
    border-right: 0px !important;
}

.small-border-grid-withEnd .ui-panelgrid-cell{
    padding: 8px 14px !important;
    border: 0.2px solid #353232   !important;
}

.small-border-grid-withEnd .ui-panelgrid-cell:nth-child(2n+1){
    background-color:#e0e0e0 !important;
}

.textPaddingStyle{
    padding: 4px 30px;
}
.panelGroupOutputLabel{
    float:left;
    display:flex
}

.rightGroupOutputLabel{
    float:right;
    display:flex
}

.ui-panelgrid{
    width: 100% !important;
}

.berthingRequestReportFullWidth.ui-panelgrid {
    width: 99% !important;
}

.ui-panelgrid .ui-panelgrid-cell.ui-widget-header{
    border: 1px solid #333333 !important;
    background-color: #ffffff !important;
    color: #333333 !important;

}

.printLoadReport  {
    font-size: 11px !important;
}
.printLoadReport label {
    font-size: 11px !important;
}
.berthingRequestReportFullWidth td {
    border: 1.5px solid black !important;
}
.berthingRequestReportFullWidth{
    font-size: 11px !important;
}
.berthingRequestReportFullWidth label{
    font-size: 11px !important;
}
.printLoadReport .ui-panel-titlebar {
    font-size: 11pt !important;
}
.align .ui-md-4{
    text-align: right  !important;
    padding-right: 10px !important;
    padding-top: 5px !important;


}
.normalButton{
    height: 95% !important;
    margin-top: 0.5% !important;
    margin-right: 2px !important;
}

.iconStyle .fa-pencil{
    color: white !important;
}

.editTogglerButtonStyle{
    float :right;    margin: 10px !important;
}
/*.compInputs .ui-md-2{
    width:25% !important;
    
}*/
/*.compInputs .ui-md-8{
    padding:0px !important;    
    margin-right: 8% !important;
}
.compInputs .ui-md-8 .ui-inputfield{
  
    margin-right: 3% !important;
}*/
.addSearchReport .showdetaliedreportbutton{
    float:left !important;
    margin-top: 0.6%  !important;

}
.addSearchReport .ui-splitbutton-menubutton{
    height: 80% !important;
}
/*.smaller_font{
    font-size: 11px!important;
}*/
.smaller_font label{
    font: menu!important;
}
.smallGridlabel .ui-md-2{
    padding-left: 0px!important;
}
.smallMiniSearch .ui-md-2 .ui-button{
    width:100% !important;
}


.layout-wrapper.layout-rtl.layout-menu-static .layout-sidebar .layout-menu > li ul li ul li a, .layout-wrapper.layout-rtl.layout-menu-overlay .layout-sidebar .layout-menu > li ul li ul li a {
    padding-right: 20% !important;
    font-size: 10pt !important;
    background-color: #fffdfd !important;
}

.layout-wrapper.layout-rtl.layout-menu-static .layout-sidebar .layout-menu > li ul li ul li ul li a, .layout-wrapper.layout-rtl.layout-menu-overlay .layout-sidebar .layout-menu > li ul li ul li ul li a {
    padding-right: 30% !important;
}

.middle-panelGridForm .ui-panelgrid-cell{
    padding: 0px !important;
}
.middle-panelGridForm .panelGridForm .ui-panelgrid-cell{
    padding-right: 5% !important;
}
.oneRow{
    float:left  !important;
    display:flex  !important;
}
.multiCal{
    direction: rtl !important;
}
.multiCal .ui-datepicker-multi {
    display: table-row !important;
}
.multiCal .ui-datepicker-multi .ui-datepicker-group {
    float: left;
    border: solid 0.5px gray !important;
}
.multiCal .ui-datepicker-multi .ui-datepicker-group table {
    width: 95%;
    margin: 0px !important;
    height: 253px !important;
}
.overlayDataTable{
    position: absolute !important;
    bottom: 0px !important;
}
.ui-datatable-summaryrow .hideSummaryRow {
    padding:0px !important;
    height:0px !important;
    background: #d2d2d2 !important ;
}
.ui-datatable-summaryrow .hideSummaryRow .ui-column-title{
    visibility: hidden !important;
}
/*.rowExpansion{
    width:100% !important;
}*/

@media (max-width:1024px) {
    .layout-wrapper .layout-topbar{
        height: 64px !important;
    }
    .layout-wrapper .layout-main{
        padding-top: 64px !important;
    }
    .layout-wrapper.layout-rtl .layout-topbar .topbar-content #topbar-profile-menu-button{
        left: 10px !important;
        right: auto !important;
    }
    .layout-wrapper .layout-sidebar{
        top: 64px !important;
    }
    .layout-wrapper .layout-topbar .logo-container{
        padding-top: 3px !important;
    }
    .layout-wrapper .layout-topbar .logo-container img{
        height: 60px !important;
    }
    .ui-overlay-visible{
        width:45rem !important;
        height:30rem !important;
        left: 1.5rem !important;
    }
    .ui-overlay-visible iframe{
        width:100% !important;
        height:100% !important;
    }
    .textPaddingStyle{
        padding: 0px;
    }
    .many_add_delete_button{
        display: block;
    }
    .many_add_delete_button .ui-button{
        margin-bottom: 10px;   
    }
    .ui-picklist .ui-picklist-filter-container .ui-picklist-filter {
        width: 100% !important;
    }
    .largPickListStyle .ui-picklist-list{
        width:100% !important;
    }

    .topbar-title-center{
        display:none;
    }

}
.smallerdataTable  td{
    padding: 0.5px  !important;

}
.smallerdataTable .ui-datatable-data > tr > td {
    font-size: 8pt !important;
}

.noBackground .ui-panelgrid-cell{
    background-color: transparent !important;
}

.noBackground .ui-panel-content{
    background-color: transparent !important;
}
.smallColum{
    width:5% !important;
}

.imagePanel img {
    width: 100% !important;
    height: auto !important;
}
.imagePanel .ui-galleria{
    width:100% !important;
}
.imagePanel  .ui-galleria-panel{  
    width:100% !important;
}
.imagePanel  .ui-galleria-panel-wrapper{
    width:100% !important;
}
.imagePanel .ui-galleria-caption{
    width:100% !important;
}
@media (max-width:1024px) {
    .ui-panelgrid.form-elements .ui-grc-2 {
        padding-left: 20px;
    }
}

@media (max-width:760px) {
    .ui-md-4 .ui-inputfield {
        width:80% !important;
    }    
    .ui-md-4 .ui-selectonemenu{
        width:80% !important;
    }
    .compositeGridForm .ui-md-6 {
        width: 100% !important;
    }
    .compositeGridForm .ui-md-4{
        margin-right: unset !important;
    }
    .compositeGridForm .ui-md-4 .ui-inputfield{
        width:80% !important;
    }
    .ui-md-4 .smallinputText {
        width:50% !important;
    }
    .ui-md-4 .verySmallinputText {
        width:30% !important;
    }
}

@media (max-width:640px) {
    .ui-panelgrid.form-elements .ui-grc-2 {
        padding-left: 6px;
    }
    .compositeGridForm .ui-md-6 .ui-md-4 {
        width: 100% !important;
    }
    .medColumn{
        width: 100% !important;
    }
    .verySmallinputText{
        width: 40% !important;

    }
    body .ui-tree.ui-tree-horizontal .ui-treenode-content {
        padding: 1px !important;
        font-size: small !important;
    }

    .permissionsTreeStyle  .ui-treenode-icon {
        display: none !important;
    }
    .treenode.ui-treenode-collapsed {
        padding-left: 0em;
        padding-right: 1em !important;
    }

    .ui-tree.ui-tree-horizontal .ui-treenode {
        padding: 2px !important;
    }
    .mobileLeftBtns .ui-cell-editor-output{
        text-align: left !important
    }

    .rightGroupOutputLabel {
        display: unset !important;
        margin-bottom: 5% !important;
    }
    .mobileView{
        display: block !important;
    }
    .webView{
        display: none !important;
    }
    .form-row {
        display: flex;
        gap: 10px;
    }
    .label-row {
        display: flex;
        flex-direction: column;
        width: 60%;
    }
        .label-row2 {
        display: flex;
        flex-direction: column;
        width: 40%;
    }

}

@media (max-width: 576px) {  /* Small screen sizes */
    .panelGridForm .ui-panelgrid-cell {
        display: flex;
        width: auto; /* Adjust width based on content */
        text-align: right;
    }
}


@media (max-width:640px) {
    .topbar-content{
        width:100% !important;
    }
    .topbar-title-center{
        display:none;
        /*width:100% !important;*/
        /*font-size: 20px !important;*/
    }

    .CalenderStyle input 
    {
        width: 80% !important;
    }
    .inputText {
        width: 80% !important;
    }
    .inputNumber .ui-inputfield {
        width: 80% !important;
    }
    .selectOneMenuStyle{
        width:80% !important;
        min-width: 80% !important; 
    }
    .selectManyMenuStyle{
        width: 80% !important;
    }
    .ui-md-12{
        width: 100% !important;

    }
    .panelGridForm .ui-md-4{
        width: 100% !important;
    }

    .panelGridForm .ui-md-6{
        width: 100% !important;
    }
    .cancelSearchGroup  .panelGridForm .ui-md-6{
        width: 50% !important;
    }

    .panelGridForm .ui-md-2{
        width: 100% !important;
        min-width: 132px;/* -moz-min-content;*/

    }
    .ui-datatable-reflow .ui-datatable-data td
    {
        text-align: right !important;
    }

    .rowEditorCenter{
        width: 50% !important;
        min-width: 70px !important;
    }

    .ui-datatable-reflow .ui-datatable-data .dataTableColumnButtonDetail{
        text-align: left !important;
    }

    .rowEditorNextColumn {
        margin-left: 3%;
        width: 25% !important;
    }
    .ui-editable-column{
        display:flex !important;
        width: 100% !important;
        margin:2px !important;
    }    
    .ui-editable-column .ui-cell-editor {
        width: 55%;
    }
    .ui-selectonemenu .ui-selectonemenu-label {
        width: 99% !important;
        text-align: right !important;
    }
    .ui-cell-editor-input .selectOneMenuStyle{
        min-width: unset  !important;
    }
    .ui-datepicker{
        max-width: unset !important;
        /*width:60% !important;*/
        min-width: -moz-min-content;
        left : unset !important;
    }
    .dataTableColumnButton {
        min-width: 130px !important;
        width: 50% !important;
    }
    .ui-overlay-visible{
        width:90% !important;
        height:max-content !important;
        min-height: 70% !important;
        left: 1rem !important;
        max-width: unset !important;
        /*overflow-x: scroll !important;*/
    }
    .textPaddingStyle{
        padding: 0px;
    }
    .panelGridForm .ui-panelgrid-content .ui-g{
        display:block;
    }
    .flex-grid {
        display: flex;

    }
    .panelGridForm .ui-panelgrid-content .ui-g .ui-inputfield{
        /*width: 15rem;*/
    }
    .ui-dialog-content iframe{
        width: 100% !important;
        height: 100% !important;
    }
    .ui-panel-content{
        padding:0px !important;
    }
    .many_add_delete_button{
        display: block;
        text-align: right !important;
        float:none;
    }
    .many_add_delete_button .ui-button{
        width: max-content !important;
        margin-bottom: 10px;
    }
    .ui-panel-content img{
        width:max-content;
        display: block;
    }
    .ui-picklist-buttons-cell{
        display: inline-flex;
        transform: rotate(180deg);
    }
    .ui-picklist-buttons{
        height: 10% !important;
    }
    .largPickListStyle{
        display:grid !important;
    }
    .largPickListStyle .ui-picklist-filter-container ,
    .largPickListStyle .ui-picklist-list  {
        width: 80% !important;
    }
    .widthStyle{
        /*width:max-content  !important; was causing a problem in grid reflow*/
        float: right !important;
    }
    .ui-fileupload-buttonbar .ui-button .ui-button-text{
        display: block !important;
        padding: 0px 0px 0px 10px !important;
    }
    .logoGrid .ui-panelgrid-content .ui-g .ui-panelgrid-cell{
        width: 50% !important;
        padding:0px 5px 0px 5px !important;
    }
    .logoGrid .ui-panelgrid-content .ui-g .ui-panelgrid-cell label{
        width: max-content;
        display: block;
    }
    .entryDate .ui-panelgrid-content .ui-g .ui-md-6{
        width: 100% !important;
    }
    .ui-fileupload-buttonbar .ui-button {
        padding: .3em .9em .3em .9em !important;
    }
    .ui-datatable table{
        table-layout: auto !important;
    }
    .panelGroupOutputLabel{
        float:none;
        display:block;
    }
    .buttonsPG .ui-panelgrid-content .ui-g .ui-panelgrid-cell {
        width:100% !important;
    }
    .pb-4{
        padding-bottom: 4rem !important;
    }
    .mediumInputText {
        width: 100% !important;
    }
    .ui-md-6 .ui-overlaypanel{
        width: 100% !important;
        min-width: 70% !important;
    }

    .cancelSearchGroup .panelGridForm .ui-panelgrid-content .ui-g{
        display:-webkit-box !important;
    }
    .normalButton {
        height: 95% !important;
        margin: 2.1% !important;}

    .ui-datatable-reflow .ui-datatable-data td[role="gridcell"] .ui-column-title {    
        width: 30%;    
        margin-left: 15% !important;
    }
    .compsiteGrid  .ui-md-2{
        width:80% !important;
    }
    .rowEditor {
        width: 60% !important;
        padding-left: 9% !important;
    }
    .ui-editable-column .ui-cell-editor .ui-selectonemenu {
        width: 85% !important;
    }
    .ui-input-overlay {
        max-width: 80% !important;
    }
    .ui-picklist > div {
        display: block !important;
        width: 100% !important;
    }
    .pickListStyle .ui-picklist-buttons {
        height: unset !important;
    }
    .rowEditorNextColumn .dataEditTableButton {
        float: left !important;
    }
    .rowEditor .ui-row-editor {
        float: left !important;
    }
    .ui-selection-column {
        width: 30% !important;
    }

    .ui-selectmanycheckbox.ui-widget td, .ui-selectoneradio.ui-widget td {
        display: table !important;
    }
    .cancelSearchGroup {
        display: contents !important;
    }
    .ui-datatable-reflow .ui-datatable-data td {
        /*text-align: left !important;*/
        display: flex !important;
    } 
    .ui-datatable-reflow .ui-datatable-data td span {
        float: right !important;
        text-align: right !important;
    }
    /*    .smallSelectOneMenuStyle {
            width: 30% !important;
        }*/
    .oneSearchGroupBtn .cancelSearchGroup .panelGridForm .ui-md-6 {
        width:100% !important;
    }
    .oneSearchGroupBtn .ui-md-6 .buttonLeft{
        float:right !important;
    }
    .smallColum{
        width:100% !important;
    }
    .ui-md-4  .flexInput{
        width: 50% !important;
    }
    .ui-md-4 .ui-inputfield .small4inputText{
        width: 40% !important;
    }
    .small3inputText {
        width: 30% !important;
    }
    .smallinputText {
        width: 50% !important;
    }

    .alignLeft .ui-row-editor{
        float: left  !important;
    }

    .oneRow{
        display:block  !important;
    }
    .oneRow .buttonLeft {
        margin: 5px !important;
    }

    .dialogWidth{
        width: max-content !important;
    }

    .dataTableColumnButtonDetail{
        width: 100% !important;
    }

    .floatLeft .ui-cell-editor-output {
        text-align: left !important;
    }
    .ui-cell-editor-output .leftDataTableButton {
        float: left !important;
    }
    .ui-datatable-reflow .ui-datatable-data .expantionDT td{
        display: block  !important;
    }
    .rowExpansion.ui-expanded-row-content td {
        padding: 2% !important;
    }

    .printLoadReport      .ui-panelgrid{
        width: 100% !important;
    }
    .printLoadReport .ui-panelgrid-cell.ui-md-12 {
        width: 100% !important;
    }
    .printLoadReport .ui-panelgrid-cell.ui-md-6 {
        width: 50% !important;
    }
    .printLoadReport   .ui-panelgrid-cell.ui-md-2 {
        width: 17% !important;
    }
    .printLoadReport .ui-panelgrid-cell.ui-md-4 {
        width: 33% !important;
    }
    .printLoadReport  .ui-panelgrid-cell.ui-md-3 {
        width: 25% !important;
    }
    .printLoadReport  .ui-panelgrid-cell.ui-md-5 {
        width: 41.5%  !important;
    }
    .printLoadReport .ui-panelgrid-cell.ui-md-8 {
        width: 67% !important;
    }
    .printLoadReport  .ui-panelgrid-cell.ui-md-9 {
        width: 75% !important;
    }
    .printLoadReport .ui-panelgrid-cell.ui-md-10 {
        width: 83%  !important;
    }

}


@media screen {
    .print_footer {display: none!important;}
}
@media print {
    .print_footer {display: block!important;}
    .no-print
    {
        display: none !important;
    }
}
@media print {
    .fontPrint label{
        font-size: 11px !important;
    }
    .ui-panelgrid{
        width: 100% !important;
    }
    .ui-panelgrid-cell.ui-md-12 {
        width: 100% !important;
    }
    .ui-panelgrid-cell.ui-md-6 {
        width: 50% !important;
    }
    .ui-panelgrid-cell.ui-md-2 {
        width: 17% !important;
    }
    .ui-panelgrid-cell.ui-md-4 {
        width: 33% !important;
    }
    .ui-panelgrid-cell.ui-md-3 {
        width: 25% !important;
    }
    .ui-panelgrid-cell.ui-md-5 {
        width: 41.5%  !important;
    }
    .ui-panelgrid-cell.ui-md-8 {
        width: 67% !important;
    }
    .ui-panelgrid-cell.ui-md-9 {
        width: 75% !important;
    }
    .ui-panelgrid-cell.ui-md-10 {
        width: 83%  !important;
    }
    body  .ui-messages {
        padding: 0;
        margin: 1px 0;
    }
    .reportPrintOnePage{
        page-break-inside: avoid !important;
    }
    .reportPrintOnePage .logoStyle {
        float: left;
        width: 20% !important;
        margin-left: 5% !important;
    }

    body .reportPrintOnePage .ui-panelgrid .ui-panelgrid-cell {
        padding-top: 0px !important;
        padding-bottom: 0px !important;
        padding-left: 0.5px !important;
    }
    .reportPrintOnePage label {
        font-size: 10px !important;
    }
}
@media (max-width:315px) {
    .mainMenuTitle {
        font-size: 30px !important;
    }
    .logo-container img{
        width:60% !important;
    }
}

.layout-wrapper .layout-topbar .logo-container img {
    height: 55px !important;
}
.layout-wrapper .layout-topbar .logo-container {
    padding: 5px 0px 0px 0px !important;
    text-align: center;
}

.ui-breadcrumb {
    display:none;
}

.editStyleButton .ui-row-editor{
    display: inline-block;
    width: 53%;
    vertical-align: middle;
}

.left-border-grid .ui-panelgrid-cell{
    border-left: 1px solid #353232  !important;
}
.right-border-grid .ui-panelgrid-cell{
    border-right: 1px solid #353232  !important;
}
.top-border-grid .ui-panelgrid-cell{
    border-top: 1px solid #353232  !important;
}
.bottom-border-grid .ui-panelgrid-cell{
    border-bottom:  1px solid #353232  !important;
}
.ui-datatable-reflow{
    margin-bottom: 1%;
}
.subPanelHeader.ui-panel .ui-panel-titlebar{
    font-size: 10pt !important;
}

.ui-tooltip-text.ui-shadow.ui-corner-all{
    width:17em;
}


.inputNumber2 input{
    width: 100% !important;
}
/*.ui-selectonemenu-panel.hideDisabledMenuItem .ui-selectonemenu-item.ui-state-disabled {
    display: none;
}*/

@media (max-width:320px) {
    .dataTableColumnButton {
        width: 80% !important;
    }
    .mediumInputText {
        width: 25% !important;
    }

}