@media screen and (min-width : 641px) {/* ui-md */
    .no-display-md {
        display: none;
    }

    .my-border-right-md {
        border-right-style: solid; border-right-width: 3px; border-right-color: gray;
    }

    .centeredContainer-md {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .my-border-bottom-g {
        border-bottom: none;
    }

    .sticky-top-md {
        position: -webkit-sticky;
        position: sticky; 
        top: 4px; 
        margin-bottom: auto;
    }

    .available-box-height-md {
        height: 100%;
    }

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

    .verticallyCenteredContainer-md {
        display: flex;
        align-items: center;
    }

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

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

    .start-leftbar-md {
        width: 170px !important;
    }

    .start-contentgrid-md {
        width: calc(100% - 170px) !important;
    }

    .horizontalCenteredContainer-md {
        display: flex;
        justify-content: center;
    }
}

@media screen and (max-width : 640px) {/* ui-g */
    .no-display-g {
        display: none !important;
    }

    .my-border-right-md {
        border-right: none;
    }

    .my-border-bottom-g {
        border-bottom-style: solid; border-bottom-width: 3px; border-bottom-color: gray;
    }

    .force-center-g {
        text-align: center;
    }

    .centeredContainer-g {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .font-x-small-g {
        font-size: x-small !important;
    }

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

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

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

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

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

    .verticallyCenteredContainer-g {
        display: flex;
        align-items: center;
    }

    .text-align-right-g {
        text-align: right;
    }

    .start-leftbar-g {
        background: #f6f6f6 !important;
    }

    .border-left-g {
        border-left-style: solid; border-left-width: 1px; border-left-color: lightgray;
    }

    .border-right-g {
        border-right-style: solid; border-right-width: 1px; border-right-color: lightgray;
    }
}

.font-x-small {
    font-size: x-small !important;
}

.border-bottom {
    border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: lightgray;
}

.border-top-dotted {
    border-top-style: dotted; border-top-width: 1px; border-top-color: gray;
}

.border-bottom-dotted {
    border-bottom-style: dotted; border-bottom-width: 1px; border-bottom-color: lightgray;
}

.ian-box-cmd-seleced {
    color: lightgrey;
}

.border-top {
    border-top-style: solid; border-top-width: 1px; border-top-color: lightgray;
}

.border-left {
    border-left-style: solid; border-left-width: 1px; border-left-color: lightgray;
}

.border-right {
    border-right-style: solid; border-right-width: 1px; border-right-color: lightgray;
}

.border-all-forced {
    border-style: solid !important; border-width: 1px !important; border-color: gray !important;
}

.border-all {
    border-style: solid; border-width: 1px; border-color: gray;
}

.border-all-light {
    border-style: solid; border-width: 1px; border-color: lightgray;
}

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

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

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

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

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

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

.h3-style {
    font-size: 22px;
}

.no-display {
    display: none;
}

.dialog-no-header.ui-dialog .ui-dialog-titlebar {
    display: none;
}

.no-ui-image-js svg {
    /* workaround: style ui-icon na menuitem przy obecnosci js z font-awesome np. all.js zawsze pokazuje w tle ikony ... trzeba je ukryc */
    background-image: none !important;
}

.ian-dialog-inline {
    /* Keep the embedded editor in flow and anchor BlockUI to it, not its ancestor. */
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
}
.panel-blank {
    padding: 0 !important;
    background: transparent;
    border-radius: 0;
    color: inherit !important;
}

.panel-blank>.ui-panel-content {
    color: inherit !important;
}

.panel-header-blank .ui-widget-header {
    background: transparent;
    border-left: none;
    border-right: none;
    border-top: none;
}

div {
    /*    border-style: solid;
        border-width: 1px;*/
}

.border-hl1 {
    border-style: solid;
    border-width: 1px;
    border-color: orangered;
}
.border-hl2 {
    border-style: solid;
    border-width: 1px;
    border-color: #008827;
}

.header-top {
    background: #2E2E2E;
    color: white
}

.header-top a {
    font-weight: 300;
    color: white;
}

.header-top a:hover {
    font-weight: 300;
    text-decoration: none;
}

.footer-bottom {
    background: #2E2E2E;
    color: white
}

.footer-bottom a {
    font-weight: 300;
    color: white;
}

.footer-bottom a:hover {
    font-weight: 300;
    text-decoration: none;
}

.menu-btn {
    margin-top: 2px; margin-bottom: 2px;
}

.menu-btn:hover {
    color:#536170;
    text-decoration: underline;
}

.btn-primary {
    color: #fff !important;
    background-color: #0061ff;
    box-shadow: inset 0 0 0 1px #0061ff;
    border-style: none;
}

.btn-primary:hover {
    color:#fff !important;
    background-color:#3b85ff;
    box-shadow:inset 0 0 0 1px #3b85ff;
    text-decoration: none;
}

.color-green {
    color: #008827;
}

.color-red {
    color: #d32f2f;
}

.btn-primary-green {
    color: #fff !important;
    background-color: #008827;
    box-shadow: inset 0 0 0 1px #008827;
    border-style: none;
}

.btn-primary-green:hover {
    color:#fff !important;
    background-color:#00D20E;
    box-shadow:inset 0 0 0 1px #00D20E;
    text-decoration: none;
}

.btn-primary-red {
    color: #fff !important;
    background-color: #d32f2f;
    box-shadow: inset 0 0 0 1px #d32f2f;
    border-style: none;
}

.btn-primary-red:hover {
    color:#fff !important;
    background-color:#FF8686;
    box-shadow:inset 0 0 0 1px #FF8686;
    text-decoration: none;
}

.btn-primary-blue {
    color: #fff !important;
    background-color: #017B81;
    box-shadow: inset 0 0 0 1px #017B81;
    border-style: none;
}

.btn-primary-blue:hover {
    color:#fff !important;
    background-color:#669999;
    box-shadow:inset 0 0 0 1px #669999;
    text-decoration: none;
}

.btn-primary-negative {
    color: #0061ff !important;
    background-color: #fff;
    box-shadow: inset 0 0 0 1px #0061ff;
    border-style: none;
}

.btn-primary-negative:hover {
    color: #3b85ff !important;
    background-color:#fff;
    box-shadow:inset 0 0 0 1px #3b85ff;
    text-decoration: none;
}

.btn-primary-green-negative {
    color: #008827 !important;
    background-color: #fff;
    box-shadow: inset 0 0 0 1px #008827;
    border-style: none;
}

.btn-primary-green-negative:hover {
    color:#00D20E !important;
    background-color:#fff;
    box-shadow:inset 0 0 0 1px #00D20E;
    text-decoration: none;
}

.btn-primary-red-negative {
    color: #d32f2f !important;
    background-color: #fff;
    box-shadow: inset 0 0 0 1px #d32f2f;
    border-style: none;
}

.btn-primary-red-negative:hover {
    color:#FF8686 !important;
    background-color:#fff;
    box-shadow:inset 0 0 0 1px #FF8686;
    text-decoration: none;
}

.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
    text-shadow: none;
}

.header-main {
    background: #f1f1f1;
}

.header-main a {
    /*color: white;*/
    font-weight: 300;
    color: #606060;
}

.header-main a:hover {
    /*color: white;*/
    font-weight: 300;
    text-decoration: none;
}

.header-footer-logged {
    background: #f1f1f1;
}

.footer-menu {
    background: #4E4E4E;
}

.footer-menu a {
    font-weight: 300;
    color: white;
}

.footer-menu a:hover {
    font-weight: 300;
    text-decoration: none;
    color: #0061ff;
}

.box-container-temporary {
    min-height: 160px;
}

.box-container-temporary_x02 {
    min-height: 100px;
}

.ui-toggleswitch .ui-toggleswitch-slider {

    -moz-transition: background-color 0.3s;
    -o-transition: background-color 0.3s;
    -webkit-transition: background-color 0.3s;
    transition: background-color 0.3s;
    border-radius: 30px;
    background-color: #ccc;

}

.ui-toggleswitch.ui-toggleswitch-checked .ui-toggleswitch-slider {

    background-color: #007ad9;
}

.ui-toggleswitch .ui-toggleswitch-slider::before {

    background-color: #ffffff;
    height: 1.250em;
    width: 1.250em;
    left: .20em;
    bottom: .20em;
    border-radius: 50%;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.ui-fileupload-content {
    outline: 2px dashed lightgrey;
    outline-offset: -10px;
    min-height: 60px;
}

div.sticky {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    background: white;
    z-index: 1000;/* bez tego na stronie Start badge sa widoczne gdy sa pod spodem menu podczas przesowaniu strony w dol  */
}

.ian-badge a:link, .ian-badge a:visited {
    color: black;
    font-weight : normal;
    text-decoration: none;
}

.ian-badge a:link:hover, .ian-badge a:visited:hover  {
    color: gray;
    background: #fafafa;
    font-weight : normal;
    text-decoration : underline;
}


.ian-header-pnl {
    background: #f8f8f8; 
    margin-top: 8px; 
    margin-bottom: 8px; 
    padding-top: 8px; 
    padding-bottom: 8px;
}

.ian-header-pnl h3 {
    color: black;
    font-weight: 500;
}
.ian-contact-autocomplete-panel {
    width: 600px !important;
    max-width: calc(100vw - 24px) !important;
}

.ian-contact-autocomplete-panel .ui-autocomplete-items,
.ian-contact-autocomplete-panel .ui-autocomplete-table {
    width: 100% !important;
    table-layout: fixed;
}

.ian-contact-autocomplete-panel .ui-autocomplete-item,
.ian-contact-autocomplete-panel td {
    box-sizing: border-box;
    max-width: 100%;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
}

@media screen and (max-width: 640px) {
    .ian-contact-autocomplete-panel {
        left: 8px !important;
        right: 8px !important;
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
    }
}