/*------------------------------------------------------------------------------
FILTERS
------------------------------------------------------------------------------*/

.xfilters {
    margin-bottom: 20px;
}

/*------------------------------------------------------------------------------
XDEBUG
------------------------------------------------------------------------------*/

.xdebug {
    position: absolute;
    top: 0;
    width: 100%;
    padding: 10px;
    background-color: #c0c0c0;
    border: 5px solid #808080;
    line-height: 20px;
    font-size: 14px;
}

.xdebug h1 {
    font-size: 22px;
    color: black;
}

.xdebug h2 {
    color: red;
    font-size: 17px;
    font-weight: normal;
    margin: 0 0 5px 0;
}

.xdebug label {
    display: inline-block;
    width: 80px;
    line-height: 20px;
    font-size: 14px;
}

.xdebug .xmsg {
    padding: 10px;
}

.xdebug .xmsg.xerror {
    background-color: #fadada;
    border: 2px solid red;
}
.xdebug .xmsg.xerror h2 {
    color: red;
}

.xdebug .xmsg.xwarning {
    background-color: #fff4db;
    border: 2px solid #ca9006;
}
.xdebug .xmsg.xwarning h2 {
    color: #ca9006;
}

.xdebug .xmsg.xinfo {
    background-color: #e7ffd9;
    border: 2px solid #3e9807;
}
.xdebug .xmsg.xinfo h2 {
    color: #3e9807;
}

/*------------------------------------------------------------------------------
XCONTROL BUTTONS
------------------------------------------------------------------------------*/

/* buttons container */
.xcontrol .buttons {
    display: inline-block;
    position: absolute;
    float: right;
    right: 0;
    top: 8px;
    width: auto;
    height: 24px;
    vertical-align: middle;
    padding-right: 2px;
}

/* Little button in xcontrol */
.xcontrol .button {
    height: 24px;
    width: 24px;
    line-height: 28px;
    margin-right: 3px;
    background-size: 24px 24px;
    background-position: center center;
    background-repeat: no-repeat;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
}

/* Button images */
.xcontrol .button.softdelete      { background-image: url(../images/btn_softdelete.png); }
.xcontrol .button.undo_softdelete { background-image: url(../images/btn_undo_softdelete.png); background-color: #1a90d9; }
.xcontrol .button.up              { background-image: url(../images/btn_up.png); }
.xcontrol .button.down            { background-image: url(../images/btn_down.png); }
.xcontrol .button.edit            { background-image: url(../images/btn_edit.png); background-color: #298b75; padding: 0 0 0 0; }
.xcontrol .button.save            { background-image: url(../images/btn_save.png); }
.xcontrol .button.cancel          { background-image: url(../images/btn_cancel.png); }
.xcontrol .button.matrix          { background-image: url(../images/btn_matrix.png); background-size: 20px 20px; }

/*------------------------------------------------------------------------------
XFILTERS
------------------------------------------------------------------------------*/

.xfilters {
    width: 100%;
    min-height: 40px;
}

.xfilters > div {
    display: inline-block;
    vertical-align: top;
    width: auto;
}

/*------------------------------------------------------------------------------
XFILTERINPUT
------------------------------------------------------------------------------*/

.xfilterinput {
    width: 220px;
    margin-right: 5px;
}

/* Input control */
.xfilterinput input[type="text"] {
    border: 1px solid #aac7dd;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    height: 40px;
    padding: 0 0 0 10px;
    background-image: url(../images/search.png);
    background-size: 24px 24px;
    background-repeat: no-repeat;
    background-position: center right 7px;
    margin-right: 10px;
    width: 100%;
}

/*------------------------------------------------------------------------------
XFILTERINPUTDATE
------------------------------------------------------------------------------*/

.xfilterint {
    width: 220px;
    margin-right: 5px;
}

/* Input control */
.xfilterint input[type="text"] {
    border: 1px solid #aac7dd;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    height: 40px;
    padding: 0 0 0 10px;
    background-image: url(../images/search.png);
    background-size: 24px 24px;
    background-repeat: no-repeat;
    background-position: center right 7px;
    margin-right: 10px;
    width: 100%;
}

/*------------------------------------------------------------------------------
XBUTTONADD
------------------------------------------------------------------------------*/

/* Add record button */
.xbuttonadd {
}

/* Button style */
.xbuttonadd .button {
    width: auto;
    display: inline-block;
    height: 40px;
    line-height: 38px;
    font-size: 15px;
    font-family: "Maven Pro", sans-serif;
    color: white;
    background-color: #1a90d9;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    text-transform: uppercase;
    padding: 0 10px 0 30px;
    font-weight: 500;
    background-size: 30px 30px;
    background-repeat: no-repeat;
    background-image: url(../images/btn_add.png);
    background-position: left 2px center;
    cursor: pointer;
}

/*------------------------------------------------------------------------------
XFILTERDELETED
------------------------------------------------------------------------------*/

/* Is deleted control */
.xfilterdeleted {
    margin-left: 5px;
}

/* Archive control - label for checkbox */
.xfilterdeleted input[type="checkbox"] + label {
    width: 100px;
    display: inline-block;
    height: 40px;
    line-height: 38px;
    font-size: 15px;
    font-family: "Maven Pro", sans-serif;
    color: white;
    background-color: #824a99;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    text-transform: uppercase;
    padding: 0 10px 0 30px;
    font-weight: 500;
    background-size: 30px 30px;
    background-repeat: no-repeat;
    background-image: url(../images/btn_softdelete.png);
    background-position: left 2px center;
    cursor: pointer;
}

/* Archive control - label for checkbox */
.xfilterdeleted input[type="checkbox"]:checked + label {
    background-image: url(../images/btn_undo_softdelete.png);
    background-color: #1a90d9;
}

/* Archive control - label for checkbox */
.xfilterdeleted input[type="checkbox"]:not(checked) + label:after {
    content: 'ARCHIEF';
}

/* Archive control - label for checkbox */
.xfilterdeleted input[type="checkbox"]:checked + label:after {
    content: 'TERUG';
    padding-left: 4px;
}

/* Archive control - hide checkbox */
.xfilterdeleted input[type="checkbox"] {
    display: none;
}

/*------------------------------------------------------------------------------
XFILTERDROPDOWNRS
------------------------------------------------------------------------------*/

/* Is deleted control */
.xfilterdropdownrs {
    width: 240px;
}

.xfilterdropdownrs select {
    border: 1px solid #aac7dd;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    height: 40px;
    padding: 0 0 0 10px;
    margin-right: 10px;
    background-color: white;
    width: 100%;
    font-size: 15px;
    color: #cecece;
}

.xfilterdropdownrs select * {
    color: black;
}

.xfilterdropdownrs select *:first-child {
    color: #cecece;
}

.xfilterdropdownrs select.selected {
    color: black;
}

/*------------------------------------------------------------------------------
XSOURCESDROPDOWN
------------------------------------------------------------------------------*/

/* Sources dropdown */
.xsourcesdropdown {
    width: 240px;
}

.xsourcesdropdown select {
    border: 1px solid #aac7dd;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    height: 40px;
    padding: 0 0 0 10px;
    margin-right: 10px;
    background-color: white;
    width: 100%;
    font-size: 15px;
    color: #cecece;
}

.xsourcesdropdown select * {
    color: black;
}

.xsourcesdropdown select *:first-child {
    color: #cecece;
}

.xsourcesdropdown select.selected {
    color: black;
}

/*------------------------------------------------------------------------------
XSOURCETYPESDROPDOWN
------------------------------------------------------------------------------*/

/* Sourcetypes dropdown */
.xsourcetypesdropdown {
    width: 240px;
    margin-right: 10px;
}

.xsourcetypesdropdown select {
    border: 1px solid #aac7dd;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    height: 40px;
    padding: 0 0 0 10px;
    margin-right: 10px;
    background-color: white;
    width: 100%;
    font-size: 15px;
    color: #cecece;
}

.xsourcetypesdropdown select * {
    color: black;
}

.xsourcetypesdropdown select *:first-child {
    color: #cecece;
}

.xsourcetypesdropdown select.selected {
    color: black;
}

/*------------------------------------------------------------------------------
XSourceGroupsDropdown
------------------------------------------------------------------------------*/

/* SourceGroups dropdown */
.xsourcegroupsdropdown {
    width: 140px;
    margin-right: 10px;
}

.xsourcegroupsdropdown select {
    border: 1px solid #aac7dd;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    height: 40px;
    padding: 0 0 0 10px;
    margin-right: 10px;
    background-color: white;
    width: 100%;
    font-size: 15px;
    color: #cecece;
}

.xsourcegroupsdropdown select * {
    color: black;
}

.xsourcegroupsdropdown select *:first-child {
    color: #cecece;
}

.xsourcegroupsdropdown select.selected {
    color: black;
}

/*------------------------------------------------------------------------------
XSOURCESTATESDROPDOWN
------------------------------------------------------------------------------*/

/* Sourcestates dropdown */
.xsourcestatesdropdown {
    width: 140px;
    margin-right: 10px;
}

.xsourcestatesdropdown select {
    border: 1px solid #aac7dd;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    height: 40px;
    padding: 0 0 0 10px;
    margin-right: 10px;
    background-color: white;
    width: 100%;
    font-size: 15px;
    color: #cecece;
}

.xsourcestatesdropdown select * {
    color: black;
}

.xsourcestatesdropdown select *:first-child {
    color: #cecece;
}

.xsourcestatesdropdown select.selected {
    color: black;
}

/*------------------------------------------------------------------------------
XSbcCodesDropdown
------------------------------------------------------------------------------*/

/* SBCCodes dropdown */
.xsbccodesdropdown {
    width: 140px;
    margin-right: 10px;
}

.xsbccodesdropdown select {
    border: 1px solid #aac7dd;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    height: 40px;
    padding: 0 0 0 10px;
    margin-right: 10px;
    background-color: white;
    width: 100%;
    font-size: 15px;
    color: #cecece;
}

.xsbccodesdropdown select * {
    color: black;
}

.xsbccodesdropdown select *:first-child {
    color: #cecece;
}

.xsbccodesdropdown select.selected {
    color: black;
}

/*------------------------------------------------------------------------------
XGrid
------------------------------------------------------------------------------*/

/* Fade BG color of clicked item */
.xgrid .xclicked {
    animation: xgrid_fade_bg 1s ease-in-out; }

@keyframes xgrid_fade_bg {
    0%   { background-color: #d8e4eb; }
    100% { background-color: #FFFFFF; }
}

/* Form enabled */
.xgrid .xformenabled {
    background-color: #f2f6fb;
}

/* No result style */
.xgrid .xnorows,
.xgrid .xnoresult {
    color: #808080;
    font-style: italic;
}

/* Header cell */
.xgrid th {
    position: relative;
}

/* Source delete button in header */
.xgrid th .button.delete {
    position: absolute;
    top: 8px;
    right: 4px;
    background-color: #824a99;
    background-image: url(../images/btn_delete.png);
}

/*------------------------------------------------------------------------------
XForm
------------------------------------------------------------------------------*/

/* Form outer div */
.xform {
    margin: 5px 5px 20px 5px;
}

.xform h3 {
    color: #362f6e;
    font-weight: 600;
    margin: 10px 0 0 0;
}

/* XForm button container */
.xform .buttons {
    position: relative;
    display: block;
    margin-top: 20px;
    float: none;
    top: auto;
}

/* XForm save.cancel button */
.xform .button {
    width: auto;
    height: 30px;
    line-height: 30px;
    background-position: left 3px center;
    padding-left: 28px;
    margin-right: 5px;
}

/* XFormControl container */
.xformcontrol {
    position: relative;
    height: auto;
    width: 100%;
    padding-top: 10px;
    padding-right: 10px;
}

/* XFormControl label */
.xformcontrol label {
    display: block;
    font-size: 15px;
    color: #824a99;
    padding-left: 2px;
}

/* XFormControlInput */
.xformcontrol.xformcontrolinput input {
    border: 1px solid #aac7dd;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    height: 35px;
    line-height: 35px;
    padding-left: 10px;
    width: 100%;
}

/* XFormControlInput */
.xformcontrol.xformcontroltextarea textarea {
    border: 1px solid #aac7dd;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    height: 80px;
    line-height: 20px;
    padding: 5px 5px 5px 10px;
    width: 100%;
}

/* XFormControlDropdownRs */
.xformcontrol.xformcontroldropdownrs select {
    border: 1px solid #aac7dd;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    height: 35px;
    line-height: 35px;
    padding: 0 0 0 10px;
    margin-right: 10px;
    background-color: white;
    width: 100%;
    font-size: 15px;
}

/*------------------------------------------------------------------------------
XForm - XFCM matrix based controls
------------------------------------------------------------------------------*/

.xformcontrol.xfcm_control {
    padding: 0;
    margin-top: 14px;
}

/* XFCM Label styling */
.xformcontrol.xfcm_control label {
    position: absolute;
    font-size: 12px;
    top: -11px;
    left: 10px;
    background-color: white;
    padding: 0 5px 0 3px;
    color: #7ea5c2;
}

/* XFCM_SubTitle */
.xformcontrol.xfcm_control input {
    border: 1px solid #aac7dd;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    height: 30px;
    line-height: 30px;
    padding-left: 5px;
    width: 100%;
    font-size: 14px;
}

/* Little buttons for XFCM controls */
.xformcontrol.xfcm_control .button.up,
.xformcontrol.xfcm_control .button.down,
.xformcontrol.xfcm_control .button.delete {
    position: absolute;
    top: -7px;
    right: -10px;
    background-size: 8px 8px;
    background-position: center center;
    width: 16px;
    height: 16px;
    padding: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    background-color: transparent;
    cursor: pointer;

}

.xformcontrol.xfcm_control .button.up     { background-image: url(../images/btn_xfcm_up.png); right: 30px; }
.xformcontrol.xfcm_control .button.down   { background-image: url(../images/btn_xfcm_down.png); right: 10px; }
.xformcontrol.xfcm_control .button.delete { background-image: url(../images/btn_xfcm_delete.png); }

    /* Title input */
.xformcontrol.xfcm_title input {
    color: #824a99;
}

/* Textarea */
.xformcontrol.xfcm_textarea textarea,
.xformcontrol.xfcm_csvtable textarea,
.xformcontrol.xfcm_bulletlist textarea {
    border: 1px solid #aac7dd;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    height: 200px;
    line-height: 20px;
    padding: 5px 5px 5px 10px;
    width: 100%;
    resize: vertical;
}

.xformcontrol.xfcm_link input {
    display: inline-block;
    width: 49.5%;
}


.xformcontrol.xfcm_link .space {
    display: inline-block;
    width: 1%;
}

/*------------------------------------------------------------------------------
XUserGridClusterFML
------------------------------------------------------------------------------*/

.xusergridclusterfml td.xsection {
    background-color: #dfe3f0;
    font-family: "Maven Pro", sans-serif;
    font-size: 18px;
    font-weight: 400;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    line-height: 40px;
    padding: 0 8px 0 8px;
}

.xusergridclusterfml td {
    padding: 8px 8px 15px 8px;
    vertical-align: top;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.xusergridclusterfml td:hover {
    background-color: #f0f4ff;
}

.xusergridclusterfml td.selected {
    background-color: #e1ebf3;
    border: 2px solid #1a90d9;
}

.xusergridclusterfml td.selected:hover {
    background-color: #d1e1f3;
}

.xusergridclusterfml td .xcompname {
    padding-left: 8px;
}

.xusergridclusterfml td .xuseroption {
    width: 100%;
    font-size: 14px;
    line-height: 16px;
    color: #2392d9;
    padding-left: 24px;
    background-image: url(../images/option_dot.png);
    background-position: left 10px top 6px;
    background-size: 6px 6px;
    background-repeat: no-repeat;
    margin-top: 8px;
}

.xusergridclusterfml tr:first-child th { text-align: center; padding: 8px 8px 15px 8px; line-height: 24px; }
.xusergridclusterfml th b { font-weight: 500; }
.xusergridclusterfml tr.disabled td { background-color: #f0f0f0; color: #606060; }
.xusergridclusterfml tr.disabled td .xcompname { color: #606060; }
.xusergridclusterfml tr.disabled td:hover { background-color: #f0f0f0; }
.xusergridclusterfml tr.disabled td.selected { background-color: #e0e0e0; border-color: #808080; }

/*------------------------------------------------------------------------------
XUserGridSelectSource / XUserGridSelectInfo
------------------------------------------------------------------------------*/

.xusergridselectsource th,
.xusergridselectinfo th {
    vertical-align: top;
}

.xusergridselectsource td.xsection,
.xusergridselectinfo td.xsection {
    background-color: #dfe3f0;
    font-family: "Maven Pro", sans-serif;
    font-size: 18px;
    font-weight: 400;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 40px;
    padding: 0 8px 0 8px;
}

.xusergridselectsource th .button,
.xusergridselectinfo th .button {
    width: 166px;
    line-height: 24px;
}

.xusergridselectsource td,
.xusergridselectinfo td {
    padding: 8px 8px 15px 8px;
    vertical-align: top;
    font-size: 14px;
}

.xusergridselectsource td p,
.xusergridselectinfo td p {
    padding: 0;
    margin: 5px 0 0 0;
    font-size: 14px;
    line-height: 18px;
}

.xusergridselectsource td .xcompname,
.xusergridselectinfo td .xcompname {
    padding-left: 8px;

}

.xusergridselectsource td .xuseroption,
.xusergridselectinfo td .xuseroption {
    width: 100%;
    font-size: 14px;
    line-height: 16px;
    color: #2392d9;
    padding-left: 24px;
    background-image: url(../images/option_dot.png);
    background-position: left 10px top 6px;
    background-size: 6px 6px;
    background-repeat: no-repeat;
    margin-top: 8px;
}

.xusergridselectsource td .dossiercontent,
.xusergridselectinfo td .dossiercontent {
    position: relative;
    font-size: 12px;
    margin-top: 4px;
    line-height: 14px;
    margin-left: 22px;
    padding: 4px 25px 5px 5px;
    color: #808080;
    border-radius: 5px;
    cursor: pointer;
    min-height: 20px;
}

.xusergridselectsource td .dossiercontent:hover,
.xusergridselectinfo td .dossiercontent:hover {
    background-color: #e0e6f9;
}

.xusergridselectsource td .dossiercontent .btn_delete,
.xusergridselectinfo td .dossiercontent .btn_delete {
    position: absolute;
    top: 6px;
    right: 10px;
    width: 9px;
    height: 10px;
    background-image: url(../images/btn_delete_content.png);
    background-size: 9px 10px;
    cursor: pointer;

}

.xusergridselectsource td:first-child { cursor: default; }
.xusergridselectinfo td:first-child { cursor: default; }

.xusergridselectsource tr:first-child th { text-align: center; padding: 8px 8px 15px 8px; line-height: 24px; }
.xusergridselectinfo tr:first-child th { text-align: center; padding: 8px 8px 15px 8px; line-height: 24px; }

.xusergridselectsource td.selected { background-color: #e1ebf3; }
.xusergridselectinfo td.selected { background-color: #e1ebf3; }