/* Helper style rules */
/* Used to define helper classes for float, overflow etc.*/

.f-l {
    float: left;
}

.f-r {
    float: right !important;
}

.float-none {
    float: none !important;
    clear: both;
}

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

.hidden {
    display: none;
}

.hiddenimportant {
    display: none !important;
}

.h-b-v, .hiddenbutvisible {
    position: absolute;
    top: -8000px;
    left: -8000px;
}

.nowrap {
    white-space: nowrap;
}

.block {
    display: block;
}

.blockimportant {
    display: block !important;
}

.inline-block {
    display: inline-block !important;
    float: none !important;
    clear: both !important;
}

.of-hidden {
    overflow: hidden;
}

.of-auto {
    overflow: auto !important;
}

.of-y-scroll {
    overflow-y: scroll;
}

.t-left {
    text-align: left;
}

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

.t-center {
    text-align: center !important;
}

.al-top {
    vertical-align: top;
}

.padding0 {
    padding: 0;
}

.padding {
    padding: 4px;
}

.padding-double {
    padding: 8px;
}

.pl4 {
    padding-left: 4px !important;
}

.pl8 {
    padding-left: 8px !important;
}

.pl-fieldset {
    padding-left: 0.75em;
}

.pr4 {
    padding-right: 4px !important;
}

.pt8 {
    padding-top: 8px !important;
}

.ptb4 {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

.margin0 {
    margin: 0;
}

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

.mt4, button.mt4 {
    margin-top: 4px;
}

.mt8 {
    margin-top: 8px !important;
}

.mt16 {
    margin-top: 16px !important;
}

.mb4 {
    margin-bottom: 4px;
}

.mr4 {
    margin-right: 4px;
}

.mr10 {
    margin-right: 10px;
}

.mr20 {
    margin-right: 20px;
}

.ml4 {
    margin-left: 4px !important;
}

.ml8 {
    margin-left: 8px !important;
}

.z100 {
    z-index: 100;
}

.z101 {
    z-index: 101;
}

.z301 {
    z-index: 301;
}

.z1 {
    z-index: 1;
    zoom: 0;
}

.width75 {
    width: 75px;
}

.width100 {
    width: 100px;
}

.width120 {
    width: 120px;
}

.width150 {
    width: 150px;
}

.width200 {
    width: 200px;
}

.width250 {
    width: 250px;
}

.width300 {
    width: 300px;
}

.width350 {
    width: 350px;
}

.width400 {
    width: 400px;
}

.width410 {
    width: 410px !important;
}

.width450 {
    width: 450px !important;
}

.width500 {
    width: 500px !important;
}

.width40 {
    width: 40px !important;
}

.width100perc {
    width: 100% !important;
}

.width33perc {
    width: 33%;
}

.height300 {
    height: 300px;
}

.height70 {
    height: 70px;
}

.height86 {
    height: 86px;
}


span.j-form-cb {
    display: inline-block;
    width: 20px;
}

label.j-form-label {
    display: inline-block;
}

.no-border {
    border: 0 none;
}

.no-right-border {
    border-right: 0 none !important;
}

.italic {
    font-style: italic;
}

i.empty-icon:before {
    content: "\0000a0";
}

.absolute {
    position: absolute;
}

.relative {
    position: relative;
}

.abs-right {
    right: 1px;
}

.abs-left {
    left: 1px;
}

.ui-selecting {
    background: #FECA40;
}

.ui-selected {
    background: #F39814;
    color: white;
}

.ui-selectable-helper {
    z-index: 999 !important;
}

ul.listclean {
    list-style: none;
    margin: 0;
}

ul.listdot li {
    list-style: disc;
}

.w-p-33 {
    width: 33%;
}

.message-div {
    background-color: #fff;
    /*border-bottom: 1px solid #cbcfe0;*/
    /*border-top: 1px solid #cbcfe0;*/
    padding: 4px;
    max-height: 70px;
    overflow: auto;
}

.warning-clean {
    border: 0 none;
    padding: 4px;
}

a.t-underline {
    text-decoration: underline !important;
}

.hover-active-white:hover {
    background-color: #fff;
}

.line-140 {
    line-height: 140%;
}

.line20 {
    line-height: 20px !important;
}

.line28 {
    line-height: 28px;
}

.font12 {
    font-size: 12px;
}

i.j-icon-large {
    font-size: 21px;
}

.border-list {
    border: 1px solid #cbcfe0;
}

input:disabled + label {
    color: #ccc;
}

    input:disabled + label > img {
        opacity: 0.5;
    }

div.j-global-warning {
    position: absolute;
    top: 0;
    left: 0;
    line-height: 20px;
    background-color: #e7c3c3;
    width: 100%;
    padding: 8px;
    z-index: 23;
}

.btm-15 {
    bottom: 15px;
}

.right-15 {
    right: 15px;
}

.noheight {
    height: 0 !important;
}

.border-box {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.top40perc {
    top: 40%;
}

.fontdef {
    font-family: Arial, Helvetica, sans-serif;
}

.sizechecker {
    line-height: 16px;
    position: absolute;
    top: -9999px;
    left: -9999px;
    opacity: 1;
}

.text-selectable {
    -ms-user-select: text;
    -moz-user-select: text;
    -webkit-user-select: text;
    user-select: text;
    cursor: text;
}

.cursor-default {
    cursor: default;
}

.j-panel.animate {
    animation: panel-shadow 2s ease-in-out;
}

.op70 {
    opacity: 0.7 !important;
}

.text-danger {
    color: rgb(200, 24, 24);
}

/*@-webkit-keyframes panel-shadow {
    0% {
        -webkit-box-shadow: 0 0 0 0 #cbcfe0;
    }

    70% {
        -webkit-box-shadow: 0 0 0 6px rgba(204,169,44, 0);
    }

    100% {
        -webkit-box-shadow: 0 0 0 0 #cbcfe0;
    }
}*/

@keyframes panel-shadow {
    0% {
        box-shadow: 0 0 6px #cbcfe0;
        border-color: #cbcfe0;
    }

    50% {
        box-shadow: 0 0 6px 3px #808080;
        border-color: #808080;
    }

    100% {
        box-shadow: 0 0 6px #cbcfe0;
        border-color: #cbcfe0;
    }
}