/* HELP ICON ******************** */
.system_HelpIcon{
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.system_HelpIcon .icon{
    width: 24px;
    height: 24px;
    -webkit-mask-size: 24px;
    margin: 0 auto;
    display: block;
}



/* HELP ICON ******************** */



/* INPUT_AUTOCOMPLETE ******************** */
.system_InputAutocompleteB{
    position: relative;
}
.system_InputAutocompleteB .select{
    height: 15px;
    border-radius: 0px;
    border: 1px solid #777;
    outline: none;
    padding: 3px 0 3px 7px;
    cursor: pointer;
    position: relative;
    user-select: none;
} 

.system_InputAutocompleteB .select .selected ,
.system_InputAutocompleteB .select .placeholder{
    width: calc(100% - 20px);
    float: left;
    font-size: 11px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
} 
.system_InputAutocompleteB .select .selected{
    display: none;
    color: #000;
} 
.system_InputAutocompleteB .select .placeholder{
    display: block;
    text-transform: lowercase;
    color: #888;
} 

.system_InputAutocompleteB .select .triangle{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 3px 0 3px;
    border-color: #000000 transparent transparent transparent;
    float: right;
    margin: 4px 6px 0 6px;
    display: block;
} 

.system_InputAutocompleteB .select .deselect{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    background-color: #fff;
    padding: 4px 2px 0 2px;
    display: none;
} 

.system_InputAutocompleteB .sors .item[data-selected="YES"]{
    background-color: red;
} 
.system_InputAutocompleteB .sors .item .part{
    display: none;
} 
.system_InputAutocompleteB .sors .item .part[data-name="text"]{
    display: block;
} 



.system_InputAutocompleteB-dropdown{
    position: absolute;
    top: 28px;
    left: 0;
    background-color: #fff;
    z-index: 101;
    min-width: 150px;
    border: 1px solid #777;
    display: none;
} 
.system_InputAutocompleteB-dropdown .filters{
    padding: 6px;
    background-color: #eee;
    border-bottom: 1px solid #ccc;
} 
.system_InputAutocompleteB-dropdown .filters .filter{
    display: block;
    width: calc(100% - 0);
} 
.system_InputAutocompleteB-dropdown .list{
    height: calc(100% - 36px);
    width: 100%;
    overflow: auto;
}
.system_InputAutocompleteB-dropdown .item{
    width: calc(100% - 16px);
    float: left;
    font-size: 11px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 8px;
    cursor: pointer;
    border-bottom: 1px solid #ccc;
}
.system_InputAutocompleteB-dropdown .item:last-of-type{
    border-bottom: none;
}
.system_InputAutocompleteB-dropdown .item:hover{
    background-color: #eee;
}
/* INPUT_AUTOCOMPLETE ******************** */



/*  ******************** */
.system_SeeMore{
    
}
.system_SeeMore-mask{
    overflow: hidden;
    position: relative;
    transition: max-height 0.2s ease-in;
}
.system_SeeMore-content{
    word-wrap: break-word !important;
    padding: 0.1px 0px;
}
.system_SeeMore-gradiend{
    position: absolute;
    z-index: 1;
    bottom: 0;
    width: 100%;
    height: 10px;
}
.system_SeeMore[data-show-more="0"] .system_SeeMore-gradiend{
    display: none;
}
.system_SeeMore[data-show-more="1"] .system_SeeMore-gradiend{
    display: block;
}


.system_SeeMore-button{
    color: #365899;
    padding: 5px 0 5px 0;
    width: 100%;
    text-align: center;
    float: none;
    cursor: pointer;
}
.system_SeeMore-button:hover {
    text-decoration: underline;
}

.system_SeeMore[data-show-more="0"] .system_SeeMore-button{
    display: none;
}
.system_SeeMore[data-show-more="1"] .system_SeeMore-button{
    display: block;
}
/*  ******************** */




/* INPUT SEARCH ....................... */ 
.system_InputSearch{
    position: relative;
}
.system_InputSearch .input{
    display: block;
    padding-right: 21px;
    width: calc(100% - 27px);
}

.system_InputSearch .closeIcon ,
.system_InputSearch .searchIcon{
    width: 15px;
    height: 15px;
    cursor: pointer;
    background-color: #555;
    position: absolute;
    top: 0;
    right: 0;
    margin: 4px;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100%;
    -webkit-mask-position: 50% 50%;
    mask-repeat: no-repeat;
    mask-size: 100%;
    mask-position: 50% 50%;
}

.system_InputSearch .searchIcon{
    -webkit-mask-image:  url(../../svg/mobile/search.svg);
    mask-image:  url(../../svg/mobile/search.svg);
    display: none;
}
.system_InputSearch .input:placeholder-shown ~ .searchIcon{
    display: block;
}


.system_InputSearch .closeIcon{
    -webkit-mask-image:  url(../../svg/mobile/close2.svg);
    mask-image:  url(../../svg/mobile/close2.svg);
    display: block;
}
.system_InputSearch .input:placeholder-shown ~ .closeIcon{
    display: none;
}



/* INPUT SEARCH ....................... */  


/* USER_ITEM_A ******************** */
.system_UserItemA{
    margin: 0px;
    background-color: #fff;
    border-left: 4px #ccc solid;
    border-bottom: 1px #c5c5c5 solid;
    border-right: 1px #c5c5c5 solid;
    position: relative;
}
.system_UserItemA:first-of-type{
    border-top: 1px #c5c5c5 solid;
}

.system_UserItemA .left{
    float: left;
    position: relative;
}

.system_UserItemA .image{
    width: 45px;
    height: 45px;
    overflow: hidden;
    background-size: cover;
    background-position: 50% 20%;
    border-radius: 300px;
    background-color: #fff;
    margin: 7px 6px 6px 6px;
    z-index: 1;
    position: relative;
    cursor: pointer;
    /*border: 1px solid #E0E0E0;*/
}
.system_UserItemA .statusIcon{
    background-position: center;
    background-repeat: no-repeat;
    background-size: 12px 12px;
    position: absolute;
    top: 40px;
    right: 5px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 12px 12px;
    z-index: 2;
    width: 16px;
    height: 16px;
    border-radius: 100%;
    background-color: rgba(255, 255, 255, 1);
}

.system_UserItemA .right{
    width: calc(100% - 60px);
    float: right;
    position: relative;
}


.system_UserItemA .name{
    font-weight: 600;
    font-size: 13px;
    color: #555;
    padding: 10px 7px 0px 0px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 100%;
    text-align: left;
    cursor: pointer;
    float: left;
}


.system_UserItemA .info{
    padding: 4px 7px 0px 0px;
}
.system_UserItemA .info .item{
    padding: 0px 0px 0px 1px;
    font-size: 9px;
    color: #555;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 15px;
    float: left;
}
/* USER_ITEM_A .......... */


/* TOAST ******************** */
.system_Toast{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10001;
}
.system_Toast .toastBg{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    opacity: 0.4;
    background-color: #000;
}
.system_Toast .toastContent{
    position: fixed;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    z-index: 2;
    background-color: #fff;
    overflow: auto;
    text-align: center;
    font-size: 13px;
    line-height: 20px;
}


.system_ToastPremalink{
    padding: 15px;
}
.system_ToastPremalink .text{
    text-align: center;
    font-size: 13px;
    line-height: 20px;
}
.system_ToastPremalink .link{
    text-align: center;
    font-size: 13px;
    line-height: 20px;
    font-weight: bold;
}
/* TOAST ******************** */


/* TAG ITEM ................................. */
.system_TagItem{
    position: relative;
    height: 23px;
    border: #999 1px solid;
    border-top-width: 2px;
    overflow: hidden;
}
.system_TagItem .delete{
    width: 19px;
    height: 23px;
    cursor: pointer;
    text-align: center;
    float: left;
    line-height: 23px;
    font-size: 12px;
    color: #999;
    
}
.system_TagItem .delete:hover{
    color: #000;
}



.system_TagItem .selectableArea{
    position: relative;
    float: left;
    height: 23px;
}
.system_TagItem .selectableArea[data-is-selectable="1"]{
    cursor: pointer;
}
.system_TagItem .selectableArea[data-is-selectable="1"]:hover .count ,
.system_TagItem .selectableArea[data-is-selectable="1"]:hover .name{
    color: #000;
}

.system_TagItem .icon{
    width: 13px;
    height: 23px;
    float: left;
    overflow: hidden;
}



.system_TagItem .name{
    float: left;
    font-size: 11px;
    color: #555;
    line-height: 22px;
    padding: 0 3px 0 5px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.system_TagItem .name .count{
    font-size: 9px;
    line-height: 23px;
    color: #555;
    display: inline;
}




.system_TagItem .isSelected{
    width: 15px;
    height: 23px;
    background-image: url(../../svg/pin.svg);
    background-size: 15px;
    background-position: center;
    background-repeat: no-repeat;
    display: none;
    margin: 0px 0px 0px 0px;
    padding: 0 1px 0 3px;
    position: absolute;
    top: 0;
    right: 0;
    background-color: #fff;
}
.system_TagItem[data-is-selected="1"] .selectableArea[data-is-selectable="1"] .isSelected{
    display: block;
}
.system_TagItem .selectableArea[data-is-selectable="1"]:hover .isSelected  {
    display: block;
}

.system_TagItem .selectableHover{
    width: 100%;
}
.system_TagItem[data-is-selected="1"] .selectableArea[data-is-selectable="1"] .selectableHover{
    width: calc(100% - 10px);
}
.system_TagItem .selectableArea[data-is-selectable="1"]:hover .selectableHover{
    width: calc(100% - 10px);
}


/* TAG ITEM ................................. */


/* SYSTEM FORMS SEARCH IN ............ */
.system_FormsSearchIn{
    border: 1px #ccc solid;
    padding: 6px 6px 3px 6px;
    position: relative;
    
}
.system_FormsSearchIn .closeButton{
    float: right;
    padding: 3px 3px 3px 3px;
    position: absolute;
    top: 0;
    right: 0;
    background-color: #fff;
    display: none;
}
.system_FormsSearchIn:hover .closeButton{
    display: block;
}


.system_FormsSearchIn .items{
    max-height: 150px;
    overflow: auto;
    padding: 0 0 0 0;
}
.system_FormsSearchIn .item{
    margin: 0 0 0 0;
    padding: 0 0 3px 0;
    cursor: pointer;
}
.system_FormsSearchIn .item .check{
    margin: 1px 2px 0 0px;
    padding: 0 0 0 0;
    display: block;
    float: left;
}
.system_FormsSearchIn .item .name{
    width: calc(100% - 22px);
    float: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 11px;
    color: #555;
    cursor: pointer;
    padding: 0px 0px 1px 0;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: block;
}
.system_FormsSearchIn .item .name[data-disabled="0"]{
    color: #555;
}
.system_FormsSearchIn .item .name[data-disabled="0"]:hover{
    color: #ff8000;
}

.system_FormsSearchIn .item .name[data-disabled="1"]{
    color: #999;
}
.system_FormsSearchIn .item .name[data-disabled="1"]:hover{
    color: #999;
}
/* SYSTEM FORMS SEARCH IN ............ */



/* SYSTEM FORMS SEARCH IN 2............ */
.system_FormsSearchIn2{
    padding: 0;
    position: relative;
    background-color: #fff;
}

.system_FormsSearchIn2 .top{
    height: 40px;
    background-color: #eee;
}
.system_FormsSearchIn2 .top .save{
    float: right;
    cursor: pointer;
}
.system_FormsSearchIn2 .top .save .icon{
    width: 40px;
    height: 40px;
    -webkit-mask-size: 24px 24px;
    margin: 0;
    display: block;
    float: right;
}
.system_FormsSearchIn2 .top .save .label{
    line-height: 40px;
    font-size: 11px;
    float: right;
    padding: 0 0px;
    font-weight: bold;
    color: #555;
}



.system_FormsSearchIn2 .items{}
.system_FormsSearchIn2 .item{
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    cursor: pointer;
    border-bottom: 1px solid #ccc;
}
.system_FormsSearchIn2 .item:last-of-type{
    border-bottom: none;
}

.system_FormsSearchIn2 .item .checkWrapper{
    padding: 14px 8px 0px 8px;
    float: left;
}
.system_FormsSearchIn2 .item .check{
    margin: 0;
    padding: 0;
    display: block;
}

.system_FormsSearchIn2 .item .name{
width: calc(100% - 30px);
    float: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 12px;
    line-height: 40px;
    color: #555;
    cursor: pointer;
    padding: 0px 0px 0px 0;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: block;
    
}
.system_FormsSearchIn2 .item .name[data-disabled="0"]{
    color: #555;
}
.system_FormsSearchIn2 .item .name[data-disabled="0"]:hover{
    color: #ff8000;
}

.system_FormsSearchIn2 .item .name[data-disabled="1"]{
    color: #999;
}
.system_FormsSearchIn2 .item .name[data-disabled="1"]:hover{
    color: #999;
}
/* SYSTEM FORMS SEARCH IN 2 ............ */



/* SYSTEM TABLE FRIZZEING THTD ............ */

    /* COMMON ..................................*/
    .system_TableFreezeingTHTD{
        border: 0px #ccc solid;
        border-width: 0px 0px 0px 0px;
        position: relative;
        height: 100%; 
    }
    .system_TableFreezeingTHTD .tr{
        border: 1px #ccc solid;
        border-width: 0px 0px 0px 0px;
    }
    .system_TableFreezeingTHTD .td{
        float: left;
        border: 1px #ccc solid;
        border-width: 0px 1px 1px 0px;
        background: #fff;
        padding: 0px;
        text-align: center;
    }
    .system_TableFreezeingTHTD .noSelect{
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    /* COMMON ..................................*/
    
    
    /* CORNER ..................................*/
    .system_TableFreezeingTHTD .CORNER{
        z-index: 4;
        position: absolute;
        top: 0;
        left: 0;
        overflow: hidden;
    } 
    /* CORNER ..................................*/
    
    
    /* TOP ..................................*/
    .system_TableFreezeingTHTD .TOP{
        z-index: 2;
        position: absolute;
        top: 0;
        overflow: auto;
        border: 1px #ccc solid;
        border-width: 1px 1px 0px 1px;
        background-color: #fff;
       
    } 
    .system_TableFreezeingTHTD .TOP::-webkit-scrollbar { 
        background:transparent;
        cursor:pointer;
        overflow: visible;
    }
    .system_TableFreezeingTHTD .TOP::-webkit-scrollbar:vertical { 
        width:16px; 
        height: 0px;
    }    
    .system_TableFreezeingTHTD .TOP::-webkit-scrollbar:horizontal { 
        width:0px; 
        height: 0px;
    } 
    
    
    .system_TableFreezeingTHTD .TOP::-webkit-scrollbar-button {
        height:0;
        width:0;
        cursor:pointer;
    }

    .system_TableFreezeingTHTD .TOP::-webkit-scrollbar-thumb {
        background-clip:padding-box;
        background-color:transparent;
        border-top:0px solid transparent;
        border-right:0px solid transparent;
        border-bottom:0px solid transparent;
        border-left:0px solid transparent;
        box-shadow: none;
        border-radius:0px;

        height:0px;
        width:0px;
    }
    
    
    .system_TableFreezeingTHTD .TOP::-webkit-scrollbar-corner { 
        background-color:transparent;
        cursor:pointer;
    }
    .system_TableFreezeingTHTD .TOP::-webkit-scrollbar-thumb:hover, 
    .system_TableFreezeingTHTD .TOP::-webkit-scrollbar-thumb:active {
        background-color:rgba(0,0,0,0);
    }
    .system_TableFreezeingTHTD .TOP .freezingTh{
        border: 1px #ccc solid;
        border-width: 0px 0px 0px 0px;
        padding: 0px;
    }
    /* TOP ..................................*/
    
    
    /* LEFT ..................................*/
    .system_TableFreezeingTHTD .LEFT{
        z-index: 2;
        position: absolute;
        left: 0px;
        border: 1px #ccc solid;
        border-width: 1px 1px 1px 1px;
        overflow: auto;
        background-color: #fff;
    } 
    .system_TableFreezeingTHTD .LEFT::-webkit-scrollbar { 
        background-color:transparent;
        cursor:pointer;
    }
    .system_TableFreezeingTHTD .LEFT::-webkit-scrollbar:vertical { 
        width:0px; 
        height:0px; 
    }
    .system_TableFreezeingTHTD .LEFT::-webkit-scrollbar:horizontal { 
        width:16px; 
        height:16px; 
    }


    
    
    .system_TableFreezeingTHTD .LEFT::-webkit-scrollbar-button {
        height:0;
        width:0;
        cursor:pointer;
    }
    .system_TableFreezeingTHTD .LEFT::-webkit-scrollbar-track { }

    .system_TableFreezeingTHTD .LEFT::-webkit-scrollbar-thumb:vertical {
        background-clip:padding-box;
        background-color:#ccc;
        border-top:3px solid transparent;
        border-right:2px solid transparent;
        border-bottom:1px solid transparent;
        border-left:5px solid transparent;
        box-shadow: none;
        border-radius:0px;
        min-height:30px;
        min-width:30px;
        height:0px;
        width:0px;
    }

    .system_TableFreezeingTHTD .LEFT::-webkit-scrollbar-thumb:horizontal {
        background-clip:padding-box;
        background-color:transparent;
        border-top:0px solid transparent;
        border-right:0px solid transparent;
        border-bottom:0px solid transparent;
        border-left:0px solid transparent;
        box-shadow: none;
        border-radius:0px;
        max-height:0px;
        max-width:0px;
        height:0px;
        width:0px;
    }

    
    
    
    
    .system_TableFreezeingTHTD .LEFT::-webkit-scrollbar-corner { 
        background-color:transparent;
        cursor:pointer;
    }
    .system_TableFreezeingTHTD .LEFT::-webkit-scrollbar-thumb:hover, 
    .system_TableFreezeingTHTD .LEFT::-webkit-scrollbar-thumb:active {
        background-color:rgba(0,0,0,0);
    }
    
    .system_TableFreezeingTHTD .LEFT .freezingColumn {
        padding: 0 14px 0 0;
    }   
    .system_TableFreezeingTHTD .LEFT .freezingColumn .td{
         float: none;
         border-width: 0px 0px 1px 0px;
    }   
    /* LEFT ..................................*/
    
    
    /* LIST ..................................*/
    .system_TableFreezeingTHTD .LIST{
        z-index: 3;
        position: absolute;
        border: 1px #ccc solid;
        border-width: 1px 1px 1px 1px;
        overflow: auto;
        background-color: #fff;
    } 
    .system_TableFreezeingTHTD .LIST::-webkit-scrollbar { 
        cursor:pointer;
        width:16px; 
        height:16px; 
        background-color:transparent;
        overflow: visible;
    }
    .system_TableFreezeingTHTD .LIST::-webkit-scrollbar-button {
        height:0;
        width:0;
        cursor:pointer;
    }
    .system_TableFreezeingTHTD .LIST::-webkit-scrollbar-track { }
    
/*    .system_TableFreezeingTHTD .LIST::-webkit-scrollbar-thumb {
        background-clip:padding-box;
        background-color:rgba(0,0,0,0.3);
        border:5px solid transparent;
        border-radius:5px;
        min-height:30px;
        min-width:30px;
        height:5px;
        width:5px;
        cursor:pointer;
    }*/

    .system_TableFreezeingTHTD .LIST::-webkit-scrollbar-thumb:vertical {
        background-clip:padding-box;
        background-color:#ccc;
        border-top:3px solid transparent;
        border-right:2px solid transparent;
        border-bottom:1px solid transparent;
        border-left:5px solid transparent;
        box-shadow: inset 1px 1px 0 rgba(0,0,0,.45), inset -1px -1px 0 rgba(0,0,0,.45);
        border-radius:3px;
        min-height:30px;
        min-width:30px;
        height:5px;
        width:5px;
    }

    .system_TableFreezeingTHTD .LIST::-webkit-scrollbar-thumb:horizontal {
        background-clip:padding-box;
        background-color:#ccc;
        border-top:5px solid transparent;
        border-right:1px solid transparent;
        border-bottom:2px solid transparent;
        border-left:3px solid transparent;
        box-shadow: inset 1px 1px 0 rgba(0,0,0,.45), inset -1px -1px 0 rgba(0,0,0,.45);
        border-radius:3px;
        min-height:30px;
        min-width:30px;
        height:5px;
        width:5px;
    }

    .system_TableFreezeingTHTD .LIST::-webkit-scrollbar-corner { 
        background-color:transparent;
        cursor:pointer;
    }
    .system_TableFreezeingTHTD .LIST::-webkit-scrollbar-thumb:hover, 
    .system_TableFreezeingTHTD .LIST::-webkit-scrollbar-thumb:active {
        background-color:#999
    }
    


    
    .system_TableFreezeingTHTD .LOADING_LIST{
        z-index: 6;
        position: absolute;

        border: 1px #ccc solid;
        border-width: 1px 1px 1px 1px;
        background-color: #fff;
        background-image: url(../../img/loading.gif);
        background-position: center;
        background-repeat: no-repeat;
    }
    /* LIST ..................................*/


/* SYSTEM TABLE FRIZZEING THTD ............ */



/* SYSTEM PERMALINK ............ */
.system_Permalink{
    background-color: #eee;
    width: auto;
    height: auto;
    padding:10px;
}
.system_Permalink .input{
    display: block;
    width: calc(100% - 11px);
}
/* SYSTEM PERMALINK ............ */



/* SYSTEM UPLAOD FILES............ */
.systems_UploadFiles{
    min-width: 200px;
    width: calc(100% - 2px);
    height: calc(100% - 0px);
    position: relative;
    min-height: 50px;
}


/* PREVIEWS -----> */
.systems_UploadFiles .LIST_PREVIEW{
    width: 100%;
    height: 100%;
    background-color: #eee;
}  
.systems_UploadFiles .UPLOAD_PREVIEW{
    width: 100%;
    height: 100%;
    background-color: #fff;
}  
.systems_UploadFiles .PROCESS_PREVIEW{
    width: 100%;
    height: 100%;
    background-color: #fff;
}  
.systems_UploadFiles .LOADING_PREVIEW{
    width: 100%;
    height: 100%;
    background-color: #fff;
    background-image: url(../../img/loading.gif);
    background-position: center;
    background-repeat: no-repeat;
}  
/* PREVIEWS -----> */


/* LIST_PREVIEW -----> LIST_TOP -----> */
.systems_UploadFiles .LIST_PREVIEW .LIST_TOP{
    width: 100%;
    height: 26px;
    position: relative;
    background-color: #ddd;
}    
.systems_UploadFiles .LIST_PREVIEW .BOTTON_PREVIEW_STATE {
    margin: 5px 0px 0 5px;
    float: left;
}
.systems_UploadFiles .LIST_PREVIEW .COUNT_FILES{
    margin: 6px 0 0 6px;
    float: left;
    color: #555;
}

.systems_UploadFiles .UPLOAD_PREVIEW  .BOTTON_CLOSE_UPLOAD ,
.systems_UploadFiles .LIST_PREVIEW .BOTTON_GO_TO_UPLOAD ,
.systems_UploadFiles .LIST_PREVIEW .BUTTON_DOWNLOAD_ALL ,
.systems_UploadFiles .LIST_PREVIEW .BUTTON_FULL_RPEVIEW_OFF{
    margin: 2px 2px 0 0;
    padding: 2px;
    float: right;
    border-radius: 2px;
}

.systems_UploadFiles .UPLOAD_PREVIEW  .BOTTON_CLOSE_UPLOAD:hover ,
.systems_UploadFiles .LIST_PREVIEW .BOTTON_GO_TO_UPLOAD:hover ,
.systems_UploadFiles .LIST_PREVIEW .BUTTON_DOWNLOAD_ALL:hover ,
.systems_UploadFiles .LIST_PREVIEW .BUTTON_FULL_RPEVIEW_OFF:hover{
    background-color: #fff;
}

.systems_UploadFiles .LIST_PREVIEW .BUTTON_FULL_RPEVIEW_OFF{

}
.systems_UploadFiles .LIST_PREVIEW .BOTTON_GO_TO_UPLOAD{

}
.systems_UploadFiles .LIST_PREVIEW .BUTTON_DOWNLOAD_ALL{
    
}
.systems_UploadFiles .UPLOAD_PREVIEW  .BOTTON_CLOSE_UPLOAD{
    
}

/* LIST_PREVIEW -----> LIST_TOP -----> */


/* LIST_PREVIEW -----> LIST_SPLIT -----> */
.systems_UploadFiles .LIST_SPLIT{
    background-color: #fff;
    height: calc(100% - 26px);
    position: relative;
}
/* LIST_PREVIEW -----> LIST_SPLIT -----> */

/* LIST_PREVIEW -----> LIST_SPLIT -----> FRAME-1 -----> */
.systems_UploadFiles .LIST_SPLIT .FRAME-1{
    width:0;
    height: 0;
    overflow: hidden;
    position: relative;
    border-color: #ccc;
    border-style: solid;
    border-width: 0 0 0 0;
}

.systems_UploadFiles .LIST_SPLIT .FRAME-1 .previous ,
.systems_UploadFiles .LIST_SPLIT .FRAME-1 .next{
    position: absolute;
    top: calc(50% - 20px);
    border-radius: 200px;
    background-color: rgba(255,255,255, 0.7);
    padding: 5px;
}
.systems_UploadFiles .LIST_SPLIT .FRAME-1 .previous{
    left: 15px;
}
.systems_UploadFiles .LIST_SPLIT .FRAME-1 .next{
   right: 15px;
}

.systems_UploadFiles .LIST_SPLIT .FRAME-1 .FILE_PREVIEW_NO_SELECT{
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* OFFICE , DEFAULT  ....................................*/

.systems_UploadFiles .LIST_SPLIT .FRAME-1 .previewDefault ,
.systems_UploadFiles .LIST_SPLIT .FRAME-1 .previewOffice{
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
    width: calc(100% - 120px);
    max-width: 300px;
    
    height: auto;
    text-align: center;

}

.systems_UploadFiles .LIST_SPLIT .FRAME-1 .previewDefault .icon,
.systems_UploadFiles .LIST_SPLIT .FRAME-1 .previewOffice .icon{
    width: 128px;
    height: 128px;
    display: block;
    margin: 0 auto 0 auto;
}
.systems_UploadFiles .LIST_SPLIT .FRAME-1 .previewDefault .fileName,
.systems_UploadFiles .LIST_SPLIT .FRAME-1 .previewOffice .fileName{
    margin: 5px auto 5px auto;
    text-align: center;
}

.systems_UploadFiles .LIST_SPLIT .FRAME-1 .previewDefault .downloadLabel ,
.systems_UploadFiles .LIST_SPLIT .FRAME-1 .previewOffice .downloadLabel{
    margin: 13px auto 2px auto;
    text-align: center;
    font-weight: bold;
}

.systems_UploadFiles .LIST_SPLIT .FRAME-1 .previewDefault .downloadLink,
.systems_UploadFiles .LIST_SPLIT .FRAME-1 .previewOffice .downloadLink{
    text-align: center;
}
.systems_UploadFiles .LIST_SPLIT .FRAME-1 .previewOffice .toolInfo{
    margin: 13px auto 0 auto;
    text-align: center;

}
.systems_UploadFiles .LIST_SPLIT .FRAME-1 .previewOffice .toolInstalled{
    margin: 13px auto 0 auto;
    text-align: center;
}
.systems_UploadFiles .LIST_SPLIT .FRAME-1 .previewOffice .openLink{
    margin-top: 4px;
    display: block;
    color: #000;
    text-decoration: none;
    background: #eee;
    border: 1px solid #aaa;
    padding: 5px;
    cursor: pointer;
}
/* OFFICE , DEFAULT  ....................................*/

/* PDF ....................................*/
.systems_UploadFiles .LIST_SPLIT .FRAME-1 .previewPdf{
    position: absolute;
    width: 100%;
    height: 100%;
}
/* PDF ....................................*/


/* TEXT ....................................*/
.systems_UploadFiles .LIST_SPLIT .FRAME-1 .previewText{
    width: 100%;
    height: 100%;
    position: relative;
}
.systems_UploadFiles .LIST_SPLIT .FRAME-1 .previewText pre{
    position: absolute;
    top: 15px;
    left: 60px;
    bottom: 15px;
    right: 60px;
    padding: 10px;
    overflow: auto;
    border: 1px solid #ccc;

}
/* TEXT ....................................*/


/* IMAGE ....................................*/
.systems_UploadFiles .LIST_SPLIT .FRAME-1 .previewImage{
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.systems_UploadFiles .LIST_SPLIT .FRAME-1 .previewImage img{
    border: none;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
/* IMAGE ....................................*/



/* LIST_PREVIEW -----> LIST_SPLIT -----> FRAME-1 -----> */ 
            
            

.systems_UploadFiles .LIST_SPLIT .FRAME-2{
    width: 100%;
    height: 100%;
    /*overflow: hidden;*/
}



/* LIST_PREVIEW -----> LIST_FILES -----> */
.systems_UploadFiles .LIST_FILES{
    background-color: #fff;
    width: auto;
    height: calc(100% - 0px);
    overflow: auto;
    position: relative;
}

/* LIST_PREVIEW -----> FILE_ITEM -----> */
.systems_UploadFiles .FILE_ITEM{
    width: 100%;
    height: 26px;
    overflow: hidden;
    border-bottom: 1px solid #ccc;
    cursor:default;
}         

.systems_UploadFiles .FILE_ITEM .left{
    width: calc(100% - 180px);
    height: 26px;
    float: left;
    margin: 0 !important;
    padding: 0 !important;
    background-color: #fff;
}
.systems_UploadFiles .FILE_ITEM .left #iloading{
   z-index: 100 !important;
}
.systems_UploadFiles .FILE_ITEM .right{
    width: 180px;
    height: 26px;
    overflow: hidden;
    float: left;
    background-color: #eee;
    position: relative;
    margin: 0 !important;
    padding: 0 !important;
}
.systems_UploadFiles .FILE_ITEM .iconWrapper{
    margin: 0 0 0 1px;
    width: 21px;
    height: 26px;
    display: block;
    float: left;
    position: relative;
}
.systems_UploadFiles .FILE_ITEM .iconWrapper .icon{
    margin: 2px 0px 2px -1px;
    width: 22px;
    height: 22px;
    display: block;
        cursor:pointer;
}
.systems_UploadFiles .FILE_ITEM .name{
    margin: 6px 0 0 3px;
    max-width: calc(100% - 26px);
    font-size: 11px;
    color: #000;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    float: left;
    cursor: default;
}
.systems_UploadFiles .FILE_ITEM .size{
    font-size: 11px;
    font-weight: bold;
    text-align: right;
    width: 100px;
    float: left;
    margin: 6px 0 0 0;
}
.systems_UploadFiles .FILE_ITEM .date{
    font-size: 11px;
    text-align: right;
    width: 74px;
    float: left;
    margin: 6px 6px 0 0;
}             
.systems_UploadFiles .FILE_ITEM .buttons{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #eee;
    display: none;
}
.systems_UploadFiles .FILE_ITEM:hover .buttons{
    display: block;
}              
.systems_UploadFiles .FILE_ITEM .button{
    margin: 5px 5px 0 0px;
    float: right;
} 
.systems_UploadFiles .FILE_ITEM .button[data-purpose="buttonNewWindow"]{
    
}
.systems_UploadFiles .FILE_ITEM .button[data-purpose="buttonDownload"]{
    
}
.systems_UploadFiles .FILE_ITEM .button[data-purpose="buttonDelete"]{
    
}
/* LIST_PREVIEW -----> FILE_ITEM -----> */


/* LIST_PREVIEW -----> FILE_BOX -----> */
.systems_UploadFiles .FILE_BOX{
    width: 122px;
    height: 137px;
    float: left;
    margin-left: 15px;
    margin-top: 15px;
    overflow: hidden;
}        
.systems_UploadFiles .FILE_BOX .frame{
    width: 120px;
    height: 120px;
    position: relative;
    border: 1px solid #999;
    margin-bottom: 1px;
    cursor: default;
    background-color: #fff;
    overflow: hidden;
    position: relative;
}
.systems_UploadFiles .FILE_BOX .frame #iloading{
   z-index: 100 !important;
}
.systems_UploadFiles .FILE_BOX .miniPreview{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.systems_UploadFiles .FILE_BOX .ext{
    position: absolute;
    top: 0px;
    right: 0px;
    background-color: #999;
    padding: 2px 3px 4px 4px;
    color: #fff;
    -webkit-user-select: none;
    cursor: default;
        z-index: 2;
}



.systems_UploadFiles .FILE_BOX .icon{
    margin: 0 0 0 0;
    width: 120px;
    height: auto;
    display: block;
    position: absolute;
    position: relative;
    cursor:pointer;
}           
.systems_UploadFiles .FILE_BOX .buttons{
    position: absolute;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    height: 24px;
    background-color: #ddd;
    overflow: hidden; 
    display: none;
}
.systems_UploadFiles .FILE_BOX:hover .buttons{
    display: block;
}   
.systems_UploadFiles .FILE_BOX .button{
    margin: 5px 5px 0 0px;
    float: right;
}
.systems_UploadFiles .FILE_BOX .button[data-purpose="buttonDelete"]{
    margin: 5px 1px 0 0px;
}
.systems_UploadFiles .FILE_BOX .button[data-purpose="buttonDownload"]{
    margin: 5px 3px 0 0px;
}
.systems_UploadFiles .FILE_BOX .button[data-purpose="buttonNewWindow"]{
    margin: 5px 5px 0 0px;
}
.systems_UploadFiles .FILE_BOX .name{
    margin: -1px 0px 0 0px;
    width: calc(100% - 2px);
    font-size: 11px;
    color: #000;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: default;
}
/* LIST_PREVIEW -----> FILE_BOX -----> */


/* UPLOAD_PREVIEW -----> UPLOAD_TOP */
.systems_UploadFiles .UPLOAD_PREVIEW .UPLOAD_TOP{
    width: 100%;
    height: 26px;
    position: relative;
    background-color: #ddd;
    
}    

/* UPLOAD_PREVIEW -----> UPLOAD_TOP */

/* UPLOAD_PREVIEW -----> UPLOAD_FORM  */
.systems_UploadFiles .UPLOAD_FORM  {
    background-color: #fff;
    width: 100%;
    height: calc(100% - 26px);
    position: relative;
}
.systems_UploadFiles .UPLOAD_FORM .dragArea  {
    position: absolute;
    top: 6px;
    left: 6px;
    bottom: 6px;
    right: 6px;
    border: 2px #ddd dashed;
    height: calc(100% - 16px);
    width: calc(100% - 16px);
    position: relative;
    z-index: 2;
}
.systems_UploadFiles .UPLOAD_FORM .dragArea .wrapperSellectFile  {
    position: absolute;
    top: 20px;
    left: calc(50% - 110px);
    width: 220px;
    height: auto;
}
.systems_UploadFiles .UPLOAD_FORM .dragArea .labelSellectFile  {
    text-align: center;
    font-size: 15px;
    color: #bbb;
}
.systems_UploadFiles .UPLOAD_FORM .dragArea .orSellectFile  {
    text-align: center;
    font-size: 11px;
    color: #bbb;
    margin: 3px 0 0 0;
}
.systems_UploadFiles .UPLOAD_FORM .dragArea .buttonSellectFile  {
    display: block;
    width: 137px;
    margin: 6px auto 0px;
    font-size: 11px;
    padding: 4px;
    border: 1px solid #bbb;
    color: #555;
    position: relative;
    z-index: 0;
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
}
.systems_UploadFiles .UPLOAD_FORM .dragArea .buttonSellectFile:hover  {
    text-decoration: underline;
}
.systems_UploadFiles .UPLOAD_FORM .dragArea .uploadMaxFilesize  {
    text-align: center;
    font-size: 11px;
    color: #bbb;
    margin: 6px 0 0 0;
    line-height: 17px;
}
/* UPLOAD_PREVIEW -----> UPLOAD_FORM  */



/* PROCESS_PREVIEW -----> */
.systems_UploadFiles .PROCESS_PREVIEW  {
    background-color: #fff;
    height: calc(100% - 0px);
    position: relative;
    overflow: auto;
}
.systems_UploadFiles .PROCESS_PREVIEW .item{
    padding: 0px;
    margin: 6px;
    background: #eee;
}
.systems_UploadFiles .PROCESS_PREVIEW .item .name{
    padding: 4px 7px 5px 6px;
    cursor: default;
    color: #000;
    width: calc(100% - 144px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    float: left;
    display: block;
}
.systems_UploadFiles .PROCESS_PREVIEW .item .percent{
    float: right;
    width: 43px;
    text-align: right;
    font-weight: bold;
    color: #000;
    position: relative;
    height: 15px;
    margin: 4px 6px 0 0;
}
.systems_UploadFiles .PROCESS_PREVIEW .item .size{
    float: right;
    width: 55px;
    text-align: right;
    color: #000;
    position: relative;
    margin: 4px 3px 0 0;
}
/* PROCESS_PREVIEW -----> */

/* SYSTEM UPLAOD FILES............ */


/* SYSTEM EMAIL FORM ............ */
.system_EmailForm{
    padding: 5px;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    position: relative;
}
/* TABLE_LAYOUT ................*/
.system_EmailForm .TABLE_LAYOUT{
    width: 100%;
    border-collapse: collapse;

}
.system_EmailForm .TABLE_LAYOUT .SECOND_TR .TD{
    vertical-align: top;
}

/* top >>>>>>>> */
.system_EmailForm .TABLE_LAYOUT .TOP_TR{}
.system_EmailForm .TABLE_LAYOUT .TOP_TR .SEND_TD{

}

/* from/to/upload >>>>>>>> */
.system_EmailForm .TABLE_LAYOUT .SECOND_TR{}
.system_EmailForm .TABLE_LAYOUT .SECOND_TR .INPUTS_TD{
    width: 70%;
}
.system_EmailForm .TABLE_LAYOUT .SECOND_TR .UPLOAD_TD{
    
}

/* message >>>>>>>> */
.system_EmailForm .TABLE_LAYOUT .THIRD_TR{}
.system_EmailForm .TABLE_LAYOUT .THIRD_TR .MESSAGE_TD{
    padding: 5px 0 5px 0 
}


/* TABLE_LAYOUT ................*/


/* SEND ................*/
.system_EmailForm .BUTTON_SEND{
    margin: 0px 0px 5px 5px;
    float: right;
}
.system_EmailForm .BUTTON_SEND[data-is-lock="lock"]{
   opacity: 0.5;
}
.system_EmailForm .BUTTON_SEND[data-is-lock="unlock"]{
   opacity: 1;
}


/* FROM / SUBJECT ................*/
.system_EmailForm .FROM_WRAPPER{
    margin: 0px 0 0 0;
}    
.system_EmailForm .SUBJECT_WRAPPER{
    margin: 5px 0 0 0;
}    
.system_EmailForm .SUBJECT_LABEL ,
.system_EmailForm .FROM_LABEL{
    width: 121px;
    padding: 4px 0 0 0;
    margin: 0px 6px 0 0;
    float: left;
    font-size: 12px;
    font-weight: bold;
    text-align: right;
}
.system_EmailForm .SUBJECT_INPUT ,
.system_EmailForm .FROM_INPUT{
    float: left;
    margin: 0px 0px 0px 0;
    width: calc(100% - 137px);
}

.system_EmailForm .TO_WRAPPER{
    margin: 5px 0px 0px 0;
}

.system_EmailForm .TO_LABEL{
    width: 121px;
    padding: 4px 0 0 0;
    margin: 0px 6px 0 0;
    float: left;
    font-size: 12px;
    font-weight: bold;
    text-align: right;
}
/*.system_EmailForm .TO_TYPES{
    float: left;
    height: 25px;
    margin: 0 1px 0 0;
    width: 115px;
    padding: 0px;
    text-align: right;
}
.system_EmailForm .TO_DOT{
    margin: 5px 6px 0 0;
    font-size: 12px;
    font-weight: bold;
    float: left;
}*/
.system_EmailForm .TO_INPUT{
    width: calc(100% - 137px);
    padding: 5px 4px !important;
}

.system_EmailForm .MESSAGE_WRAPPER{
    height: auto;
}
/* SYSTEM EMAIL FORM ............ */










/* LAYOUT_FROM >>>>>>>>>>>> */
.system_EmailForm .LAYOUT_FROM{
    display: table;
    width: 100%;
}
.system_EmailForm .LAYOUT_FROM .TR{
    display: table-row;
}
.system_EmailForm .LAYOUT_FROM .TD_LEFT{
    display: table-cell;
    padding: 0 0 0 0px;
    width: 30%;
    position: relative;
}
/* LAYOUT_FROM >>>>>>>>>>>> */

.system_EmailForm .LAYOUT_TO{
    display: table;
    width: 100%;
}
.system_EmailForm .LAYOUT_MESSAGE{
    display: table;
    width: 100%;
}






.DeliveryStatusSUCCESSInput ,
.ReadReceiptActiveInput {
    margin: 6px 2px 0px 5px;
    padding: 0;
    float: right;
} 
.DeliveryStatusSUCCESSLabel ,
.ReadReceiptActiveLabel {
    margin: 6px 6px 0px 1px;
    padding: 0;
    float: right;
} 
.email_SendBottons{
    margin: 0 0 6px 7px;
    padding: 0;
    width: 25px;
    height: 25px;
    float: right;
} 
.email_SendBottons[data-button-type="send"][data-is-lock="lock"]{
    cursor: no-drop; 
    opacity: 0.3;
}
.email_SendBottons[data-button-type="send"][data-is-lock="unlock"]{
    cursor: pointer; 
}


.email_SendLayout1TDLeft{
    vertical-align: top;
    display: table-cell;
    width: 70%;
    padding: 0 0 0 0;
    overflow-y: auto;
}
.email_SendLayout1TDRight{
    display: table-cell;
    padding: 0 0 0 0px;
    width: 30%;
    position: relative;
}
.email_SendSubjectLabel ,
.email_SendFromLabel{
    width: 121px;
    height: 20px;
    padding: 5px 0 0 0;
    margin: 0px 6px 6px 0;
    float: left;
    font-size: 12px;
    font-weight: bold;
    text-align: right;
}
.email_SendSubjectInput{
    width: calc(100% - 137px);
    margin: 0px 0 6px 0;
    padding: 5px 4px !important;
}
.email_SendFromSelect{
    float: left;
    margin: 0px 0px 0px 0;
    height: 25px;
    width: calc(100% - 128px);
}
.email_ToInputsList{
    overflow: auto;
    max-height: 250px;
    margin: 0px 0px 0px 0;
}

.email_SendToSelect{
    float: left;
    height: 25px;
    margin: 0 1px 0 0;
    width: 115px;
    padding: 0px;
    text-align: right;
}






.email_SendToLabel{
    width: 121px;
    height: 20px;
    padding: 5px 0 0 0;
    margin: 0px 6px 6px 0;
    float: left;
    font-size: 12px;
    font-weight: bold;
    text-align: right;
}
.email_SendToDots{
    margin: 5px 6px 0 0;
    font-size: 12px;
    font-weight: bold;
    float: left;
}
.email_ToInputWrapper{
    width: calc(100% - 127px);
    margin: 0px 0 6px 0;
    float: left;
}
.email_ToInput{
    width: calc(100% - 10px);
    padding: 5px 4px !important;
}
.email_SendLayout2{
    height: calc(100% - 0px);
}
.email_SendTextarea ,
.email_SendREPLY ,
.email_SendSignature{
    border: #999 solid 1px;
    border-width: 1px 1px 1px 1px;
}
.email_SendTextarea{
    margin:0px 0px 0px 0px;
    padding: 0px;
}
.email_SendTextarea[data-reply-exist="0"]{
    height: calc(70% - 2px);
}
.email_SendTextarea[data-reply-exist="1"]{
    height: calc(50% - 2px);
}
.email_SendREPLY{
    height: calc(25% - 20px);
    overflow-y: auto;
    margin:6px 0px 0px 0px;
    padding: 0px;
}
.email_SendSignatureFieldset{
    border: 1px solid #999;
    margin: 0px;
}
.email_SendSignature{
    overflow-y: auto;
    margin:0px 0px 0px 0px;
    padding: 0px;
    border-width: 0;
}
.email_SendSignatureContent{
    border: #999 solid 1px;
    border-width: 0px 1px 1px 1px;
    color: #999;
    padding: 0px;
}
.email_SendSignatureList{
    display: none;
}
/* SYSTEM EMAIL FORM ............ */




/* SYSTEM ROLES SELECT FILTER ............ */
.system_RolesSelectFilter[date-theme="BASIC_LEFT_FILTER_1"] .CHECKBOX_SELECTOR ,
.system_RolesSelectFilter[date-theme="BASIC_LEFT_FILTER"] .CHECKBOX_SELECTOR{
    margin: 0 0 6px 0;
}

.system_RolesSelectFilter[date-theme="BASIC_LEFT_FILTER_1"] .CHECKBOX_SELECTOR:last-of-type ,
.system_RolesSelectFilter[date-theme="BASIC_LEFT_FILTER"] .CHECKBOX_SELECTOR:last-of-type{
    margin: 0 0 0px 0;
}

.system_RolesSelectFilter[date-theme="BASIC_LEFT_FILTER_1"] .SELECT{
    margin: 0 0 6px 0;
    display: block;
    width: 100%;
}



.system_RolesSelectFilter[date-theme="BASIC_LEFT_FILTER_2"] .SELECT{
    margin: 0 0 0 0;
    display: block;
    width: calc(100% - 10px);
    border: 1px solid #777;
    padding: 4px 4px 4px 4px;
    cursor: pointer;
    position: relative;
}
.system_RolesSelectFilter[date-theme="BASIC_LEFT_FILTER_2"] .SELECT .triangle{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 3px 0 3px;
    border-color: #000000 transparent transparent transparent;
    position: absolute;
    top: 7px;
    right: 6px;
}

.system_RolesSelectFilter[date-theme="BASIC_LEFT_FILTER_2"] .USERS_LIST {
   margin: 6px 0 0 0;
   border: 1px #777 solid;
   max-height: 212px;
   overflow: auto;
}
.system_RolesSelectFilter[date-theme="BASIC_LEFT_FILTER_2"] .USER {
   border-bottom: 1px #777 solid;
   cursor: pointer;
}
.system_RolesSelectFilter[date-theme="BASIC_LEFT_FILTER_2"] .USER:last-of-type {
   border-bottom: 0px #777 solid;
}

.system_RolesSelectFilter[date-theme="BASIC_LEFT_FILTER_2"] .USER .CHECK{
    margin: 6px 0px 5px 6px;
    padding: 0;
    float: left;
    display: block;
}
.system_RolesSelectFilter[date-theme="BASIC_LEFT_FILTER_2"] .USER .LABEL{
    margin: 0;
    padding: 6px 0 5px 3px;
    float: left;
    width: calc(100% - 22px);
/*    background-color: red;*/
    font-size: 11px;
    color: #000;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
}


.system_RolesSelectFilterWindow[date-theme="BASIC_LEFT_FILTER_2"] {
height: 100%;
}

.system_RolesSelectFilterWindow[date-theme="BASIC_LEFT_FILTER_2"] .BUTTON_SAVE{
    margin: 6px 0 0 0;
    float: right;
}
.system_RolesSelectFilterWindow[date-theme="BASIC_LEFT_FILTER_2"] .FORM_ROLES_SELECT{
    height: calc(100% - 35px);
    margin: 6px 0 0 0;
}


.system_RolesSelectFilter[date-theme="BASIC_LEFT_FILTER_3"] .SELECT_TYPE{
    width: 100%;
}

.system_RolesSelectFilter[date-theme="BASIC_LEFT_FILTER_3"] .LEFT_WRAPPER_1{
    float: left;
}
.system_RolesSelectFilter[date-theme="BASIC_LEFT_FILTER_3"] .LEFT_WRAPPER_1[data-select-user-not-active="0"]{
    width: 100%;
}
.system_RolesSelectFilter[date-theme="BASIC_LEFT_FILTER_3"] .LEFT_WRAPPER_1[data-select-user-not-active="1"]{
    width: calc(100% - 19px);
}
.system_RolesSelectFilter[date-theme="BASIC_LEFT_FILTER_3"] .CHECKBOX_ACTIVE_NOT_ACTIVE{
    display: block;
    float: right;
    margin: 5px 0 0 0;
    padding: 0;
}



.system_RolesSelectFilter[date-theme="BASIC_LEFT_FILTER_3"] .SELECT_BASIC{
    margin: 6px 0 0 0;
    width: 100%;
}
.system_RolesSelectFilter[date-theme="BASIC_LEFT_FILTER_3"] .SELECT_BASIC[data-is-active="NO"]{
    display: none;
}
.system_RolesSelectFilter[date-theme="BASIC_LEFT_FILTER_3"] .SELECT_BASIC[data-is-active="YES"]{
    display: block;
}

.system_RolesSelectFilter[date-theme="BASIC_LEFT_FILTER_3"] .SELECT_GUEST{
    margin: 6px 0 0 0;
    width: 100%;
}
.system_RolesSelectFilter[date-theme="BASIC_LEFT_FILTER_3"] .SELECT_GUEST[data-is-active="NO"]{
    display: none;
}
.system_RolesSelectFilter[date-theme="BASIC_LEFT_FILTER_3"] .SELECT_GUEST[data-is-active="YES"]{
    display: block;
}


.system_RolesSelectFilter[date-theme="BASIC_LEFT_FILTER_3"] .SELECT_USER_NOT_ACTIVE{
    margin: 6px 0 0 0;
    width: 100%;
    display: none;
}





/* SYSTEM ROLES SELECT FILTER ............ */


/* SYSTEM CHECKBOX SELECTOR ............ */
.system_CheckboxSelector{
    position: relative;
}
.system_CheckboxSelector .SELECT_BUTTON{
    display: block;
    width: calc(100% - 2px);
    padding: 0px;
    min-height: 21px;
    max-height: 21px;
    position: relative;
    background-color: #ffffff;
    border-radius: 0px;
    border: 1px solid #777;
    outline: none;
    cursor: pointer;
    
}

.system_CheckboxSelector .SELECT_BUTTON .label1{
    margin: 4px 0px 0 5px;
    font-weight: normal;
    float: left;
    color: #000;
    font-size: 11px;
}


.system_CheckboxSelector .SELECT_BUTTON .countSelected,
.system_CheckboxSelector .SELECT_BUTTON .countSeparator,
.system_CheckboxSelector .SELECT_BUTTON .countAll{
    color: #777;
    font-size: 10px;
    float: right;
    font-weight: bold;
}
.system_CheckboxSelector .SELECT_BUTTON .countSelected{
    margin: 4px 0 0 3px;
}
.system_CheckboxSelector .SELECT_BUTTON .countSeparator{
    margin: 4px 0 0 0px;
}
.system_CheckboxSelector .SELECT_BUTTON .countAll{
    margin: 4px 0 0 0px;
}


.system_CheckboxSelector .SELECT_BUTTON .triangle{
   display: block;
   margin: 8px 7px 0 7px;
    float: right;
width: 0;
height: 0;
border-style: solid;
border-width: 6px 3px 0 3px;
border-color: #000000 transparent transparent transparent;
}

.system_CheckboxSelector .CHECKBOXES{
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    z-index: 10000;
    padding: 15px;
    background-color: #fff;
    padding: 0 0 0 0;
    border: 1px solid rgba(153,153,153,0.6);
    

    

}

.system_CheckboxSelector .CHECKBOXES .TOOLBAR{
    background-color: #ddd;
    padding: 8px;
}
.system_CheckboxSelector .CHECKBOXES .TOOLBAR .CHECKBOX_ALL{
    display: block;
    margin: 2px 0 0px 0;
    float: left;
}  
.system_CheckboxSelector .CHECKBOXES .TOOLBAR .LABEL_ALL{
    display: block;
    margin: 1px 0 0 0;
    padding: 0px 0 0px 2px;
    float: left;
    font-size: 10px;
}  

.system_CheckboxSelector .CHECKBOXES .TOOLBAR .BUTTON_SAVE{
    margin: 0px 3px 0 0;
    float: right;
}
.system_CheckboxSelector .CHECKBOXES .TOOLBAR .BUTTON_CLOSE{
    margin: 0px 0 0 0;
    float: right;
}
     




.system_CheckboxSelector .CHECKBOXES .LIST{
    max-height: 200px;
    overflow: auto;
    padding: 0px 8px 0px 8px;
    margin: 7px 0 7px 0;
}

.system_CheckboxSelector .CHECKBOXES .CHECKBOX{
    display: block;
    margin: 3px 0 3px 0;
    float: left;
}
.system_CheckboxSelector .CHECKBOXES .LABEL{
    display: block;
    margin: 0 0 0 0;
       padding: 3px 0 4px 3px;
    width: calc(100% - 20px);
    float: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 10px;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: color 0.1s; /* For Safari 3.0 to 6.0 */
    transition: color 0.1s; /* For modern browsers */
}
.system_CheckboxSelector .CHECKBOXES .LABEL:hover{
    color: #ff8000;
}
/* SYSTEM CHECKBOX SELECTOR ............ */


/* SYSTEM DATE FILTER PERIODS ............ */
.system_DateFilterPeriods{}
.system_DateFilterPeriods .item{
    display: inline-block;
    padding: 3px 4px 4px 4px;
    list-style: none;
    background: #fff;
    border: 1px solid #999;
    margin: 0 0 0 0;
    white-space: nowrap;
    cursor: pointer;
    margin: 4px 0px 0 0;
    width: calc(33.33% - 13px);
    font-size: 10px;
    cursor: pointer;
    font-weight: bold;
    color: #555;
}
.system_DateFilterPeriods .item:hover{
    border: 1px solid #ff8000;
    color: #ff8000;
}
/* SYSTEM DATE FILTER PERIODS ............ */

/* SYSTEM SETTINGS  ............ */
.system_SetingsLayout{
    border-top: 10px solid #ddd;
    width: 100%;
    height: calc(100% - 10px);
}
.system_SetingsLayout-content{
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: #eee;
}
/* SYSTEM SETTINGS  ............ */

/* SYSTEM TABLE SETTINGS 2 ............ */
.system_TableSettings2{
    border-collapse: collapse;
    width: 100%;
}
.system_TableSettings2 .td1{
    width: 1%;
    text-align: right;
    padding: 15px;
    border: 1px solid #ccc;
    border-width: 0 1px 1px 0;
    vertical-align: top;
}
.system_TableSettings2 .td1[vertical-align="top"]{
    vertical-align: top;
}
.system_TableSettings2 .td1[vertical-align="middle"]{
    vertical-align: middle;
}
.system_TableSettings2 .td1[vertical-align="bottom"]{
    vertical-align: bottom;
}

.system_TableSettings2 .td2{
    padding: 15px;
    border: 1px solid #ccc;
    border-width: 0 0px 1px 0;
    vertical-align: top;
}
.system_TableSettings2 .td2[vertical-align="top"]{
    vertical-align: top;
}
.system_TableSettings2 .td2[vertical-align="middle"]{
    vertical-align: middle;
}
.system_TableSettings2 .td2[vertical-align="bottom"]{
    vertical-align: bottom;
}

.system_TableSettings2 .label{
    margin: 3px 0 0 0;
    font-weight: bold;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    
}

.system_TableSettings2 .input[data-input-type="text"]{
    display: block;
    width: calc(100% - 10px);
}
.system_TableSettings2 .input[data-input-type="checkbox"]{
    display: block;
    float: left;
    margin: 3px 0 0 0;
}
.system_TableSettings2 .input[data-input-type="hidden"]{
    
}
/* SYSTEM TABLE SETTINGS 2 ............ */


/* SYSTEM TEXT ............ */
.system_TextOverflow{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* SYSTEM TEXT ............ */


/* SETTINGS TABLE ............ */
.system_SettingsTable{
    width: 100%;
    border-spacing: 0px;
    border-collapse: collapse;
}
.system_SettingsTable .tdLabel{
    width: 40%;
    font-weight: bold;
    font-size: 1.2em;
    color: #555;
    vertical-align: top;
}
.system_SettingsTable .tdInput{
    width: 58%;
    vertical-align: top;
    padding-top: 5px;
}
.system_SettingsTable .tdDesc{
    font-size: 0.9em;
    border-bottom: 1px solid #999;
    color: #A5A5A5;
    padding-bottom: 3px;
}

.system_SettingsTable .inputSelect{
    width: calc(100% - 0px);
    display: block;
    float: right;
}
.system_SettingsTable .inputText{
    width: calc(100% - 10px);
    display: block;
    float: right;
}
.system_SettingsTable .inputNumber{
    width: 60px;
    display: block;
    float: right;
}
.system_SettingsTable .inputCheckbox{
    margin: 0;
    padding: 0;
    display: block;
    float: right;
}
.system_SettingsTable .inputRadio{
    margin: 0;
    padding: 0;
    display: block;
    float: right;
}

/* SETTINGS TABLE ............ */


/* UPLOAD IMAGE ............ */
.system_UploadImage {
    width: 90px;
    height: 90px;
    overflow: hidden;
    border-radius: 250px;
    margin: 0;
    position: relative;
    -webkit-user-select: none;
}

.system_UploadImage .uploadButton ,
.system_UploadImage .deleteImage ,
.system_UploadImage .viewImage{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; 
    -webkit-user-select: none;
}


.system_UploadImage .viewImage{
    background-size: cover;
    background-position: 50% 20%;
    z-index: 1;
}

.system_UploadImage .deleteImage{
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.5);
    background-image:url(../../img/x-1.svg);
    background-position: center;
    background-repeat: no-repeat;
    z-index: 2;
    opacity: 0;
        border-radius: 250px;
   transition: opacity .50s ease-in-out;
   -moz-transition: opacity .50s ease-in-out;
   -webkit-transition: opacity .50s ease-in-out;
}
.system_UploadImage .deleteImage:hover{
    opacity: 1;
}
    

.system_UploadImage[data-state-image="NOT_UPLOADET"] .deleteImage{
    z-index: 2;
}
.system_UploadImage[data-state-image="UPLOADET"] .deleteImage{
    z-index: 3;
}


.system_UploadImage .uploadButton {
    cursor: pointer;
    z-index: 3;
}
.system_UploadImage[data-state-image="NOT_UPLOADET"] .uploadButton{
    z-index: 3;
}
.system_UploadImage[data-state-image="UPLOADET"] .uploadButton{
    z-index: 2;
}

.system_UploadImage .fileInput{
    display: none;
}



/*  UPLOAD IMAGE ............ */


/* DATE CALENDAR ............ */
.system_DateCalendar{}
.system_DateCalendar .top{
    background: #fff;
    position: relative;
    float: left;
}
.system_DateCalendar .topLeft{
    border: 1px solid #999;
    color: #999;
    width: calc(30% - 8px);
    height: 17px;
    margin: 0 2px 0 0;
    padding: 3px 2px 2px 2px;
}
.system_DateCalendar .topCenter{
    border: solid #ff8000 2px;
    color: #555;
    width: calc(40% - 8px);
    height: 16px;
    padding: 2px 2px 2px 2px;
}
.system_DateCalendar .topCenter[data-number-of-mounts="1"]{
    width: calc(100% - 8px);
}
.system_DateCalendar .topRight{
    border: 1px solid #999;
    color: #999;
    width: calc(30% - 8px);
    height: 17px;
    margin: 0 0 0 2px;
    padding: 3px 2px 2px 2px;
}
.system_DateCalendar .topPrev,
.system_DateCalendar .topNext{
    display: block;
    position: absolute;
    background-position: 0px 0px;
    background-size: 16px 16px;
    width: 16px;
    height: 16px;
    top: 2px;
    cursor: pointer;
}
.system_DateCalendar .topPrev{
    top: 2px;
    left: 3px;
    background-image: url(../../img/DateCalendar/prev.png);
}
.system_DateCalendar .topLeft .topPrev{
    top: 3px;
    left: 3px;
}
.system_DateCalendar .topNext{
    top: 2px;
    right: 3px;
    background-image: url(../../img/DateCalendar/next.png);
}
.system_DateCalendar .topRight .topNext{
    top: 3px;
    right: 3px;
}
.system_DateCalendar .topLabel{
    font-family: Verdana,Arial;
    font-size: 13px;
    line-height: 1.3em;
    text-align: center;
    font-weight: bold;
}
.system_DateCalendar .topLeft .topLabel ,
.system_DateCalendar .topRight .topLabel{
     font-weight: normal;
}
.system_DateCalendar .table{
    border-collapse: collapse;
    border-collapse: separate;
    border-spacing: 2px;
    width: 100%;
    float: left;
}
.system_DateCalendar .tableLeft{
    width: calc(30% - 5px);
    margin: 0 2px 0 0;
}
.system_DateCalendar .tableCenter{
    width: calc(40% - 2px);
}
.system_DateCalendar .tableCenter[data-number-of-mounts="1"]{
    width: calc(100% - 2px);
}
.system_DateCalendar .tableRight{
    width: calc(30% - 2px);
    margin: 0 0 0 5px;
}
.system_DateCalendar .table th ,
.system_DateCalendar .table td{
    vertical-align: middle;
    text-align: center;
}
.system_DateCalendar .th-empty{
    
}
.system_DateCalendar .th-label{
   font-size: 9px;
   color: #222;
   font-weight: normal;
   padding: 4px 0 5px 0;
}
.system_DateCalendar .td-week-number{
   font-size: 8px;
   color: #222;
   font-weight: normal;
}
.system_DateCalendar .td-day{
    font-weight: normal;
    color: #333;
    text-align: center;
    background: #eee;
    font-family: Verdana,Arial;
    border: 1px solid #d3d3d3;
    padding: 2px 0 2px 0;
    font-size: 11px;
    cursor: pointer;
}
.system_DateCalendar .tableRight .td-day ,
.system_DateCalendar .tableLeft .td-day{
    font-size: 8px;
    padding: 0px 0 0px 0;
}
.system_DateCalendar .td-day-default{}
.system_DateCalendar .td-day-default[data-is-selected="YES"]{
    font-weight: bold;
     background: white;
     color: #000;
     border-color: #000;
}
.system_DateCalendar .td-day-now{
    color: #fff;
    background: #ff8000;
    border-color: #000;
     font-weight: bold;
}
.system_DateCalendar .td-day-neutral{
    color: #999;
    background: white;
    border-color: #b7b7b7;
}
.system_DateCalendar .td-day-off{
    background: #BEBEBE;
    color: #000;
    border: 1px solid #d3d3d3;  
}
.system_DateCalendar .td-day-off[data-is-selected="YES"]{
    font-weight: bold;
     color: #000;
     border-color: #000;
}
.system_DateCalendar .td-day-default[data-is-selected="NO"]:hover ,
.system_DateCalendar .td-day-off[data-is-selected="NO"]:hover{
    border: 1px solid #999;
}
/* DATE CALENDAR ............ */


/* MULTILANG ............ */
.system_ValidationSimpleAlert {
    margin: 2px 5px;
    padding: 0;
    color: red;
    font-size: 10px;
    /* text-align: center; */
}
/* MULTILANG ............ */


/* MULTILANG ............ */
.system_MultilangAbbr{
    margin: 0 0 7px 0;
    display: block;
    float: left;
    width: 30px;
    text-align: right;
    background-color: #777;
    color: #fff;
    padding: 5px 4px 5px 0px;
    font-size: 11px;
}
.system_MultilangInput{
    margin: 0 0 7px 0;
    width: calc(100% - 44px);
    display: block;
    float: left;
    padding: 0;
}
.system_MultilangTextarea{
    margin: 0 0 7px 0;
    width: calc(100% - 44px);
    height: 55px;
    display: block;
    float: left;
    padding: 4px;
}
.system_MultilangSelect{
    margin: 0 0 7px 0;
    width: calc(100% - 34px);
    display: block;
    float: left;
    padding: 3px 0 3px 0;
}
/* MULTILANG ............ */


/* HISTORY ............ */
.system_HistoryItem{
    min-height: 47px;
    padding: 20px 10px 0px 10px;
    position: relative;
}
.system_HistoryItem .top{
    border-bottom: 1px solid #999;
    height: 20px;
    overflow: hidden;
}
.system_HistoryItem .top .date{
    font-size: 12px;
    font-weight: bold;
    float: left;
    color: #999;
    margin-bottom: 6px;
    padding-bottom: 4px;
}
.system_HistoryItem .top .userName{
    font-size: 12px;
    font-weight: bold;
    float: left;
    color: #999;
    margin-bottom: 6px;
    padding-bottom: 4px;
}
.system_HistoryItem .top .userImage{
    margin: 5px 0px 0px 5px;
    z-index: 100;
    position: absolute;
    top: 10px;
    right: 5px;
    width: 45px;
    height: 45px;
    border-radius: 45px;
    overflow: hidden;
    background-color: #fff;
    border: 1px solid #999;
    cursor: pointer;
}
.system_HistoryItem .top .userImage .img{
    width:45px;
    height:45px;
    overflow:hidden;
    background-size:cover;
    background-position:50% 20%;
}


.system_HistoryItem .events {
    padding: 6px 0px 0px 0px;
}

.system_HistoryItem .eventItem{
    padding: 0px;
    margin: 0px;
    position: relative;
}

.system_HistoryItem .eventItemAction{
    line-height: 10px;
    padding: 5px 5px 5px 27px;
    margin-bottom: 7px;
    margin-right: 9px;
    width: 80px;
    height: 30px;
    overflow: hidden;
    float: left;
    font-size: 0.9em;
    position: relative;
    background-color: #eee;
}


.system_HistoryItem .eventItemAction .icon{
    position: absolute;
    top: 5px;
    left: 5px;
}


.system_HistoryItem .eventItemAction[data-action="ADD_NEWS"] .icon ,
.system_HistoryItem .eventItemAction[data-action="ADD_COMMENT"] .icon {
    width: 16px;
    height: 16px;
    -webkit-mask: url(../../svg/add.svg) no-repeat 50% 50%;
    background-color: #555;
}

.system_HistoryItem .eventItemAction[data-action="EDIT_NEWS"] .icon {
    width: 16px;
    height: 16px;
    -webkit-mask: url(../../svg/edit.svg) no-repeat 50% 50%;
    background-color: #555;
}

.system_HistoryItem .eventItemAction[data-action="ARCHIVE_NEWS"] .icon ,
.system_HistoryItem .eventItemAction[data-action="DELETE_NEWS"] .icon ,
.system_HistoryItem .eventItemAction[data-action="DELETE_COMMENT"] .icon{
    width: 16px;
    height: 16px;
    -webkit-mask: url(../../svg/delete.svg) no-repeat 50% 50%;
    background-color: #555;
}
.system_HistoryItem .eventItemAction[data-action="UNARCHIVE_NEWS"] .icon{
    width: 16px;
    height: 16px;
    -webkit-mask: url(../../svg/undo.svg) no-repeat 50% 50%;
    background-color: #555;
}



.system_HistoryItem .eventItemType{
    border: 1px solid #ddd;
    line-height: 10px;
    padding: 2px;
    margin-bottom: 7px;
    margin-right: 9px;
    width: 80px;
    height: 30px;
    overflow: hidden;
    float: left;
    background: #eee;
    font-size: 0.9em;
}

.system_HistoryItem .eventItemValue{
    width: calc(100% - 266px);
   
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    float: left;
    color: #bbb;
    font-size: 0.9em;
}

.system_HistoryItem .eventItemValue1{
    display: block;
    margin: 3px 0px 0px 0px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.system_HistoryItem .eventItemValue2{
    display: block;
    margin: 3px 0px 0px 0px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* HISTORY ............ */


/* DROPDOWN STATE ............ */
.system_DropdownState{
    background-color: #f0f0f0;
    padding: 3px;
}
.system_DropdownState .item{
    position: relative;
   background-color: #f0f0f0;
   min-height: 18px;
    border-radius: 3px;
    border: 1px transparent solid;
    cursor: pointer;
   
}
.system_DropdownState .item:hover{
    border-radius: 3px;
    border: 1px #aecff7 solid;
    background-color: #edf2f7;
    background: -moz-linear-gradient(top,  rgba(241,243,246,0) 0%, rgba(230,237,246,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(241,243,246,0)), color-stop(100%,rgba(230,237,246,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(241,243,246,0) 0%,rgba(230,237,246,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(241,243,246,0) 0%,rgba(230,237,246,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(241,243,246,0) 0%,rgba(230,237,246,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(241,243,246,0) 0%,rgba(230,237,246,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00f1f3f6', endColorstr='#e6edf6',GradientType=0 ); /* IE6-9 */
}

.system_DropdownState .item .checkbox{
    position: absolute;
    top: -1px;
    left: -1px;
    right: auto;
    bottom: -1px;
    width: 18px;
    height: 18px;
    border-radius: 3px;
    border: 1px #aecff7 solid;
    background-color: #edf2f7;
    background-position: -1px 0px;
    background-repeat: no-repeat;
    background-size: 18px auto;
    z-index: 10;
}
.system_DropdownState .item .checkbox[data-checked="0"]{
    display: none;
}  
.system_DropdownState .item .checkbox[data-checked="1"]{
    display: block;
}  

.system_DropdownState .item .separator{
    position: absolute;
    width: 1px;
    top: 0px;
    left: 21px;
    right: auto;
    bottom: 0px;
    margin: 0;
    padding: 0;
    border-right: 1px #fff solid;
    background-color: #d0d0d0;
}


.system_DropdownState .item .text{
    position: absolute;
    top: 2px;
    left: 24px;
    right: 2px;
    bottom: 0px;
    margin: 0;
    padding: 0;
    font-size: 11px;
    color: #555;
}

.system_DropdownState .item .html{
    position: absolute;
    top: 0px;
    left: 24px;
    right: 2px;
    bottom: 0px;
    margin: 0;
    padding: 0;
}
/* DROPDOWN STATE ............ */




/* FORM RESPONCE ............ */
.system_FormResponce{
    color: rgb(255, 128, 0);
    display: none;
    margin: 10px 10px 0px 10px;
    position: absolute;
    top: 0;
    left: 0;
    font-family: Verdana,Arial;
    font-weight: bold;
}

/* NOTIFICATION PERSONAL ............ */
.system_NotificationPersonal .tl-settings-layout-table-description-row>td {
    font-size: 0.9em;
    border-bottom: 1px solid #999;
    color: #A5A5A5;
    padding-bottom: 3px;
}
.system_NotificationPersonal .tl-settings-layout-table-content-row>td.first {
/*    width: 88%;*/
    width:auto;
    font-weight: bold;
    font-size: 1.3em;
    color: #555;
}
.system_NotificationPersonal .tl-settings-layout-table-content-row>td.second {
    width:20px;
    vertical-align:top;
    padding-top:5px;
}
.system_NotificationPersonal .eventCheckbox  {
  display: block;
  margin: 0;
  padding: 0;
  float: right;
}
.system_NotificationPersonal .eventDesc  {
   padding:  0 0 6px 0;
}
/* NOTIFICATION PERSONAL ............ */




/* MAILER PERSONAL ............ */
.system_MailerPersonal .tl-settings-layout-table-description-row>td {
    font-size: 0.9em;
    border-bottom: 1px solid #999;
    color: #A5A5A5;
    padding-bottom: 3px;
}
.system_MailerPersonal .tl-settings-layout-table-content-row>td.first {
/*    width: 88%;*/
    width:auto;
    font-weight: bold;
    font-size: 1.3em;
    color: #555;
}
.system_MailerPersonal .tl-settings-layout-table-content-row>td.second {
    width:200px;
    vertical-align:top;
    padding-top:5px;
}
.system_MailerPersonal .eventSelect  {
  width: 100%;
  float: right;
}
.system_MailerPersonal .eventDescsItem  {
   padding:  0 0 6px 0;
}
/* MAILER PERSONAL ............ */




/* MAILER SYSTEM ............ */
.system_MailerSystem{}

.system_MailerSystem  .tl-settings-layout-table-content-row>td.first {
    vertical-align: middle;
    border-bottom: 1px solid #999;
}

.system_MailerSystem  .tl-settings-layout-table-content-row>td.second {
    vertical-align: top;
    border-bottom: 1px solid #999;
}


.system_MailerSystem .FROM_NOME_LABEL{
    font-weight: bold;
    font-size: 14px;
    color: #555;
    padding: 0 0 0 0;
}
.system_MailerSystem .FROM_NOME_DESC{
    font-size: 10px;
    font-weight: normal;
    color: #A5A5A5;
    padding: 5px 0 0 0;
   font-family: Verdana,Arial;
}

.system_MailerSystem .ROW_LABEL{
    font-weight: bold;
    font-size: 20px;
    color: #555;
    padding: 20px 0 3px 0;
}
.system_MailerSystem .ROW_ALWAYS_SEND ,
.system_MailerSystem .ROW_OFFLINE_SEND{
    width: calc(100% - 2px);
    margin: 0 0 6px 0;    
    border: 1px #999 solid;
}
.system_MailerSystem .ROLES_LIST{
    overflow: auto;
    height: 130px;
    margin: 0 auto;
    cursor: pointer;

}
.system_MailerSystem .ROLES_LIST_ITEM{
    display: block;
    padding: 4px 5px 5px 5px;
    width: auto;
    height: auto;
    overflow: hidden;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 1.0em;
    font-weight: bold;
    color: #000;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-height: 12px;
    background-color: #fff;
    border-bottom: 1px solid #CCCCCC;
}

.system_MailerSystem .ROLES_CONTENT {
    background-color: #eee;
}
.system_MailerSystem .ROLES_LABEL{
    padding: 3px 5px 0px 5px;
    font-size: 12px;
    font-weight: bold;
    color: #555;
}
.system_MailerSystem .ROLES_DESC {
    padding: 3px 5px 0px 5px;
    color: #555;
    font-size: 11px;
}
.system_MailerSystem .ROLES_EDIT{
    font-weight: bold;
    font-size: 11px;
    cursor: pointer;
    padding: 0 3px;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    text-align: right;
    float: right;
    padding: 5px 6px 6px 6px;
    color: #555;
}
            
.system_MailerSystem .ROW_EMAIL_TITLE{
    
}
.system_MailerSystem .EMAIL_TITLE_LABEL{
    margin: 9px 0 2px 0;
    font-weight: bold;
    font-size: 1.2em;
    color: #555;
}

.system_MailerSystem .ROW_EMAIL_TEXT{
    
}
.system_MailerSystem .EMAIL_TEXT_LABEL{
    margin: 2px 0 2px 0;
    font-weight: bold;
    font-size: 1.2em;
    color: #555;
}
.system_MailerSystem .EMAIL_TEXT_INPUT{
    display: block;
    width: calc(100% - 11px);
    height: 260px;
}

.system_MailerSystem .ROW_EMAIL_REPLACE{
    
}
.system_MailerSystem .EMAIL_REPLACE_TABLE{
    width: calc(100% - 2px);
    padding: 0;
    margin: 0px 0 0 0;
    border: 1px solid #555;
        border-width: 1px 1px 0px 0px;
}  
.system_MailerSystem .EMAIL_REPLACE_BOX{
    border: 1px solid #555;
    border-width: 0px 0px 5px 1px;
    width: calc(20% - 1px);
    float: left;
}
.system_MailerSystem .EMAIL_REPLACE_LABEL{
    padding: 4px;
    font-size: 10px;
    border-bottom: 1px solid #555;
    height: 26px;
    overflow: hidden;
}
.system_MailerSystem .EMAIL_REPLACE_VALUE{
        padding: 4px 4px 6px 4px;
    height: 14px;
    overflow: hidden;
background-color: #fff;

    font-size: 10px;
    font-weight: bold;
}

.system_MailerSystem .ROW_SEPARATOR{
   height: 5px;
    border-bottom: 1px solid #999;
    color: #A5A5A5;
    padding-bottom: 3px;
}
/* MAILER SYSTEM ............ */




/* AUTOCOMPLETE FILTER ............ */
.system_AutocompleteFilter{
    width: 100%;
}
.system_AutocompleteFilter .input{
    width: calc(100% - 19px);
}
.system_AutocompleteFilterList{

}
/* AUTOCOMPLETE FILTER ............ */


/* DATE FILTER ............ */
.system_DateFilter{
    margin: 0px 0px 6px 0px;
}
.system_DateFilter:last-of-type{
    margin: 0px 0px 0px 0px;
}

.system_DateFilterInput{
    position: relative;
    float: left;
    width: calc(100% - 31px);
    margin: 0px 0px 0px 0px;
}

.system_DateFilterCalendar{
    float: right;
    margin: -1px 0px 0px 0px;
}
/* DATE FILTER ............ */

/* TABS SETTINGS ................................. */
.system_TabsSettingsWrapper1{
    background-color: #fff;
    height: 40px;
    position: absolute;
    width: 100%;
}

.system_TabsSettingsWrapper2{
    bottom: 0;
    position: absolute;
    top: 12px;
    width: 100%;
}

.system_TabsSettingsWrapper3{
    margin: 12px 0 0 0;
    height: calc(100% - 52px);
    background-color: #eee;
    padding: 40px 0 0 0;
    overflow-y: scroll;
    position: relative;
}



.system_TabsSettingsBOX{
    background-color: #fff;
    margin: 0px 40px 40px 40px;
    padding: 20px 20px 20px 20px;
    position: relative;
    -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.15),-1px 0 0 rgba(0,0,0,0.03),1px 0 0 rgba(0,0,0,0.03),0 1px 0 rgba(0,0,0,0.12);
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.15),-1px 0 0 rgba(0,0,0,0.03),1px 0 0 rgba(0,0,0,0.03),0 1px 0 rgba(0,0,0,0.12);
    box-shadow: 0 1px 1px rgba(0,0,0,0.15),-1px 0 0 rgba(0,0,0,0.03),1px 0 0 rgba(0,0,0,0.03),0 1px 0 rgba(0,0,0,0.12);
}
.system_TabsSettingsBOX .MESSAGE{
    color: rgb(255, 128, 0);
    display: none;
    margin: 21px 10px 0px 22px;
    position: absolute;
    top: 0;
    left: 0;
    font-weight: bold;
}
.system_TabsSettingsBOX .BUTTON_SAVE{
    float: right;
}
.system_TabsSettingsBOX .INPUTS{
    margin: 10px 0 0 0;
    
}


/* TABS SETTINGS ................................. */


/* FORMS RELATION ................................. */
.system_FormsRelation{
    width: 100%;
    height: 100%;
    overflow: auto;
}



.system_FormsRelation .relatedList ,
.system_FormsRelation .list{
    width: calc(100% - 2px);
    border: #DADADA 1px solid;
    overflow: auto;
    position: relative;
}


.system_FormsRelation .relatedList[data-filter-state="OFF"]{
    margin: 0 0 0 0;
    height: 120px;
}
.system_FormsRelation .relatedList[data-filter-state="ON"]{
    margin: 0 0 0 0;
    height: 120px;
} 


.system_FormsRelation .filter{
    width: calc(100% - 0px);
    float: left;
    padding: 6px 0px 0px 0px;
}
.system_FormsRelation .filter[data-filter-state="OFF"]{ display: none; }  
.system_FormsRelation .filter[data-filter-state="ON"]{}  



.system_FormsRelation .list[data-filter-state="OFF"]{
    margin: 6px 0 0 0;
    height: calc(100% - 130px);
}
.system_FormsRelation .list[data-filter-state="ON"]{
    margin: 6px 0 0 0;
    height: calc(100% - 159px);
} 









.system_FormsRelation .relatedItem ,
.system_FormsRelation .listItem{
    border-bottom: #DADADA 1px solid;
    cursor: pointer;
    padding: 5px;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.system_FormsRelation .relatedItem:hover ,
.system_FormsRelation .listItem:hover {
    background-color: #DADADA;
}

.system_FormsRelation .relatedImage ,
.system_FormsRelation .listImage{
    background-size: cover;
    background-position: 50% 20%;
    display: block;
    margin: 6px 0px 6px 6px;
    width: 45px;
    height: 45px;
    border: none;
    cursor: pointer;
    float: left;
    border-radius: 200px;
    overflow: hidden;
    position: relative;
    
}

.system_FormsRelation .relatedRight ,
.system_FormsRelation .listRight{
    float: left;
    width: calc(100% - 51px);
    padding: 0;
    position: relative;
}

.system_FormsRelation .relatedTitle ,
.system_FormsRelation .listTitle{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 16px;
    font-weight: bold;
    float: left;
    width: calc(100% - 60px);
    margin: 0 0 0 0;
    cursor: pointer;
    
}


.system_FormsRelation .relatedDate ,
.system_FormsRelation .listDate{
    font-family: Verdana,Arial;
    font-size: 10px;
    float: right;
    width: 60px;
    margin: 0 0 0 0;
    text-align: right;
}

.system_FormsRelation .relatedText ,
.system_FormsRelation .listText{
    display: block;
    margin: 0 0 0 0;
/*    padding: 0px 6px 6px 6px;*/
    font-size: 1.2em;
    font-weight: normal;
    color: #333333;
}
/* FORMS RELATION ................................. */




/* TAGS ATTACH ................................. */
.system_TagAttach{
    widows: 100%;
    height: 100%;
}
.system_TagAttach .selectedTags{
    width: 70%;
    float: left;
    height: 100%;
    overflow: auto;
}
.system_TagAttach .selectedItem{
    margin: 0 0 3px 0;
    padding: 0px;
    background-color: #eee;
    border: 1px solid #CCCCCC;
    min-height: 25px;
    width: calc(100% - 2px);
    background-color: #fff;
    opacity: 1;
    min-height: 53px;
}
.system_TagAttach .selectedItem .left{
    display: block;
    margin: 4px 4px 0 4px;
    width: 45px;
    height: 45px;
    border: none;
    cursor: pointer;
    float: left;
    border-radius: 200px;
    overflow: hidden;
    position: relative;
    
}
.system_TagAttach .selectedItem .img{
    width: 45px;
    height: 45px;
    overflow: hidden;
    background-image: url(mod/system/img/user.png);
    background-size: cover;
    background-position: 50% 20%;
}

.system_TagAttach .selectedItem .right{
    float: left;
    width: calc(100% - 53px);
    padding: 0;
    position: relative;
    padding-left: 0px;
}
.system_TagAttach .selectedItem .right .name{
    display: block;
    margin: 0 0 0 0;
    padding: 2px 1px 4px 4px;
    font-size: 1.0em;
    font-weight: bold;
    color: #333333;
}
.system_TagAttach .selectedItem .right .tagList{
    margin: 2px 5px 0 2px;
    clear: left;
}
.system_TagAttach .tagsList{
    width: calc(30% - 6px);
    float: right;
    height: 100%;
    overflow: auto;
    margin: 0px 0;
}


.system_TagAttach-selectedTag ,
.system_TagAttach .tagItem {
    height: 16px;
    overflow: hidden;
    -webkit-user-select: none;
    margin: 0 0 3px 0;
}


.system_TagAttach .selectedItem .right .tagList  .tagItem {
    float: left;
    color: #ffffff;
    float: left;
    margin: 0px 4px 3px 0;
}


.system_TagAttach-selectedTag .tagSquare ,
.system_TagAttach .tagSquare{
    height: 16px;
    width: 16px;
    font-size: 10px;
    float: left;
    color: #333;
    text-align: center;
    position: relative;
}

.system_TagAttach-selectedTag .x ,
.system_TagAttach .tagSquare .x{
    color: #333;
    display: none;
    font-size: 10px;
    font-weight: normal;
    position: absolute;
    text-decoration: none;
    top: 1px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    cursor: pointer;
}

.system_TagAttach-selectedTag .tagSquare:hover .x ,
.system_TagAttach .tagSquare:hover .x{
    display: block;
}
.system_TagAttach-selectedTag .tagName ,
.system_TagAttach .tagName{
    height: 11px;
    background-color: #fff;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    padding: 1px 3px 2px 4px;
    float: left;
    cursor: default;
    color: #333;
    font-size: 10px;
    border: 1px solid #aaa;
    border-width: 1px 1px 1px 0px;
    font-weight: normal;
    width: calc(100% - 24px);
}






.system_TagAttached {
    height: 16px;
    overflow: hidden;
    -webkit-user-select: none;
    float: left;
    color: #ffffff;
    margin: 0px 4px 3px 0;
    
}
.system_TagAttached .tagSquare{
    height: 16px;
    width: 16px;
    font-size: 10px;
    float: left;
    color: #333;
    text-align: center;
    position: relative;
}
.system_TagAttached .tagSquare .x{
    color: #333;
/*    display: none;*/
    font-size: 10px;
    font-weight: normal;
    position: absolute;
    text-decoration: none;
    top: 1px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    cursor: pointer;
}
.system_TagAttached .tagSquare:hover .x{
    display: block;
}
.system_TagAttached .tagName{
    height: 11px;
    background-color: #fff;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    padding: 1px 3px 2px 4px;
    float: left;
    cursor: default;
    color: #333;
    font-size: 10px;
    border: 1px solid #aaa;
    border-width: 1px 1px 1px 0px;
    font-weight: normal;
    width: calc(100% - 24px);
}




.system_TagAttachedSquare {
    height: 14px;
    width: 14px;
    -webkit-user-select: none;
    float: left;
    color: #ffffff;
    margin: 0px 3px 3px 0;
    position: relative;
    
}

.system_TagAttachedSquare .tagSquare{
    height: 14px;
    width: 14px;
    font-size: 10px;
    float: left;
    color: #333;
    text-align: center;
    position: relative;
}
.system_TagAttachedSquare .tagSquare .x{
    color: #333;
    display: none;
    font-size: 10px;
    font-weight: normal;
    position: absolute;
    text-decoration: none;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    cursor: pointer;
}
.system_TagAttachedSquare .tagSquare:hover .x{
    display: block;
}
.system_TagAttachedSquare .tagName{
    height: 10px;
    background-color: #fff;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    padding: 0px 3px 2px 3px;
    float: left;
    cursor: default;
    color: #333;
    font-size: 10px;
    border: 1px solid #aaa;
    border-width: 1px 1px 1px 0px;
    font-weight: normal;
    z-index: 1;
    display: none;
    position: absolute;
    top: 0;
    left: 14px;
    white-space: nowrap;
}

/* TAGS ATTACH ................................. */


/* ROLES SELECT ................................. */
.system_FormsRolesSelect{
    height: 100%;
    overflow: auto;
    background-color: #f0f0f0;
    min-height: 360px;
}

/* width/height ................................. */
.system_FormsRolesSelect .selectedList{
    margin: 6px 6px 0px 6px;
    padding: 0;
    width: calc(100% - 12px);
    height: calc(30% - 6px);
    min-height: 70px;
 
}

.system_FormsRolesSelect .tabWrapper{
    margin: 6px 6px 0px 6px;
    padding: 0;
    width: calc(100% - 12px);
    
}   

.system_FormsRolesSelect .groupWrapper{
    margin: 2px 6px 0px 6px;
    padding: 0;
    width: calc(100% - 12px);
    height: calc(70% - 34px);
/*    min-height: 300px;*/
}  
/* width/height ................................. */


.system_FormsRolesSelect .selectedList{
    display: block;
    overflow: auto;
    background: #fff;
}     
.system_FormsRolesSelect .selectedItem{
    display: block;
    margin: 0;
    padding: 1px 0px;
    width: auto;
    height: auto;
    min-height: 20px;
    background-color: #fff;
    border-bottom: 1px solid #CCCCCC;
}
.system_FormsRolesSelect .selectedName{
    display: block;
    margin: 4px 0 0 5px;
    width: calc(50% - 5px);
    height: auto;
    overflow: hidden;
    float: left;
    
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 1.0em;
    font-weight: bold;
    color: #000;
    text-overflow: ellipsis;
    white-space: nowrap;
    

}


.system_FormsRolesSelect .selectedDelete{
    display: block;
    margin: 3px 2px 0 2px;
    float: right;
}

.system_FormsRolesSelect .selectedDelete[data-state="ON"]{
}
.system_FormsRolesSelect .selectedDelete[data-state="OFF"]{
    display: none;
}
.system_FormsRolesSelect .selectedDelete[data-disabled="false"]{
}
.system_FormsRolesSelect .selectedDelete[data-disabled="true"]{
/*    opacity: 0.7;*/
    display: none;
}


.system_FormsRolesSelect .selectedExdend{
    width: calc(50% - 20px);
    float: right;
}

.system_FormsRolesSelect .selectedExdend .editor ,
.system_FormsRolesSelect .selectedExdend .moderator{
    margin: 0 3px 0 0;
    padding: 0;
    display: block;
    float: right;
}

.system_FormsRolesSelect .selectedExdend .editorCheckbox ,
.system_FormsRolesSelect .selectedExdend .moderatorCheckbox{
    margin: 0;
    padding: 0;
    display: block;
    float: left;
    vertical-align: middle;
    margin: 3px 2px 0 10px;
    display: inline-block;
    cursor: pointer;
}

.system_FormsRolesSelect .selectedExdend .editorLabel ,
.system_FormsRolesSelect .selectedExdend .moderatorLabel{
    margin: 0;
    padding: 0;
    display: block;
    float: left;
    vertical-align: middle;
    margin: 3px 0 0 0;
    display: inline-block;
    font-family: Verdana,Arial;
    font-size: 11px;
    cursor: pointer;
    
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    
}



.system_FormsRolesSelect .tabWrapper{
    
}    

.system_FormsRolesSelect .tab{
    display: block;
    margin: 0px 5px 0px 0px;
    padding: 5px 5px 8px 28px;
    width: 120px;
    cursor: pointer;
    white-space: nowrap;
    background-position: 8px 5px;
    background-repeat: no-repeat;
}

.system_FormsRolesSelect .tab[data-type="personnel"]{
    background-image: url(../i/icon-boss.png);
    float: left;
}
.system_FormsRolesSelect .tab[data-type="visitors"]{
    background-image: url(../i/icon-user.png);
   float: left;
}
.system_FormsRolesSelect .tab[data-type="customRoles"]{
   background-image: url(../i/icon-man.png);
   float: left;
}
.system_FormsRolesSelect .tab[data-type="mostUsedRoles"]{
   background-image: url(../i/icon-man.png);
   float: left;
}


.system_FormsRolesSelect .tab[data-is-active="YES"]{
    background-color: #fff;
}
.system_FormsRolesSelect .tab[data-is-active="NO"]{
    background-color: transparent;
}

.system_FormsRolesSelect .tab[data-is-active="NO"]:hover{
    background-color: #fff;
}



.system_FormsRolesSelect .search{
    margin: 0px 0px 0px 0px;
    display: block;
    float: right;
}
.system_FormsRolesSelect .search[data-tab-counter="1"]{
    width: calc(100% - 159px);
}
.system_FormsRolesSelect .search[data-tab-counter="2"]{
    width: calc(100% - 317px);
}
.system_FormsRolesSelect .search[data-tab-counter="3"]{
    width: calc(100% - 475px);
}
.system_FormsRolesSelect .search[data-tab-counter="4"]{
    width: calc(100% - 633px);
}

    
.system_FormsRolesSelect .search input{
    border: 1px solid transparent;
    border-radius: 0;
    display: block;
    height: 24px;
    margin: 0;
    padding: 0 20px 0 3px;
    width: calc(100% - 25px);
}


.system_FormsRolesSelect .groupWrapper{
    overflow: auto;
}
.system_FormsRolesSelect .groupWrapper[data-is-active="YES"]{
    display: block;
}
.system_FormsRolesSelect .groupWrapper[data-is-active="NO"]{
    display: none;
}
 




/* width/height ................................. */
.system_FormsRolesSelect .groupWrapper{


}  


.system_FormsRolesSelect .groupCOMPANY ,
.system_FormsRolesSelect .groupDEPARTMENT,
.system_FormsRolesSelect .groupPOSITION{
    margin: 6px 0px 0px 0px;
    padding: 0;
    width: calc(100% - 0px);
    height: calc(33.3% - 8px);
    min-height: 70px;
} 
.system_FormsRolesSelect .groupUSERS{
    margin: 6px 0px 0px 0px;
    padding: 0;
    width: calc(100% - 0px);
    height: calc(100% - 12px);
    min-height: 70px;
} 

.system_FormsRolesSelect .groupMOST_USER ,
.system_FormsRolesSelect .groupCUSTOM_ROLES{
    margin: 6px 0px 0px 0px;
    padding: 0;
    width: calc(100% - 0px);
    height: calc(100% - 12px);
    min-height: 70px;
   
} 



.system_FormsRolesSelect .groupVISITORS_COMPANY ,
.system_FormsRolesSelect .groupVISITORS_GROUP{
    margin: 6px 0px 0px 0px;
    padding: 0;
    width: calc(100% - 0px);
    height: calc(50% - 9px);
    min-height: 70px;
} 
.system_FormsRolesSelect .groupVISITORS_USER{
    margin: 6px 0px 0px 0px;
    padding: 0;
    width: calc(100% - 0px);
    height: calc(100% - 12px);
    min-height: 70px;
} 
/* width/height ................................. */



.system_FormsRolesSelect .groupLeft{
    width: calc(50% - 3px);
    height: 100%;
    float: left;
}
.system_FormsRolesSelect .groupRight{
    width: calc(50% - 3px);
    height: 100%;
    float: right;
}
.system_FormsRolesSelect .groupFull{
    width: calc(100% - 0px);
    height: calc(100% - 6px);
    float: none;
}


.system_FormsRolesSelect .group{
   
} 
.system_FormsRolesSelect .groupLabel{
    border: none;
    padding: 0;
    font-size: 10px;
    color: #000;
    font-weight: bold;
    margin: 0 0 3px 2px;
}
.system_FormsRolesSelect .groupList{
display: block;
    margin: 0px 0px 0px 0px;
    padding: 0;
    width: calc(100% - 1px);
    height: calc(100% - 14px);
    background: #fff;
    overflow: auto;
    
}
.system_FormsRolesSelect .groupItemMostUsed ,
.system_FormsRolesSelect .groupItem{
    display: block;
    margin: 0;
    padding: 1px 5px 1px;
    width: auto;
    height: auto;
    background-color: #fff;
    cursor: pointer;
        margin: 0;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 0.9em;
    /* font-weight: bold; */
    color: #000;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.system_FormsRolesSelect .groupItemMostUsed[data-visibility="SHOW"],
.system_FormsRolesSelect .groupItem[data-visibility="SHOW"]{
    display: block;
}
.system_FormsRolesSelect .groupItemMostUsed[data-visibility="HIDE"],
.system_FormsRolesSelect .groupItem[data-visibility="HIDE"]{
    display: none;
}



.system_FormsRolesSelect .groupVISITORS_USER .groupItem ,
.system_FormsRolesSelect .groupUSERS .groupItem{
     background-color: #DDDDDD;
}

  
.system_FormsRolesSelect .groupItemMostUsed:hover ,
.system_FormsRolesSelect .groupItem:hover {
    background-color: #FE8E28;
}

/* ROLES SELECT ................................. */




/* HTML EDITOR ................................. */
.system_FormsHTMLEditor  .mce-panel{
    border-width: 0px  0px  0px  0px !important;
}
.system_FormsHTMLEditor  .mce-toolbar-grp.mce-container.mce-panel.mce-stack-layout-item.mce-first{
    border-width: 0px  0px  1px  0px !important;
    padding: 1px 1px 1px 1px;
}
.system_FormsHTMLEditor {
    height: 100%;
    position: relative;
    background-color: #fff;
}

.system_FormsHTMLEditor .buttonExpand {
    cursor: pointer;
    width: 16px;
    height: 16px;
    padding: 0;
    background-repeat: no-repeat;
    background-size: 16px 16px;
    background-position: center;
    margin: 5px;
    display: none;
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 1;
}
.system_FormsHTMLEditor .buttonExpand[data-is-expanded="NO"] {
    background-image: url(../../img/expand.gif);
}
.system_FormsHTMLEditor .buttonExpand[data-is-expanded="YES"] {
    background-image: url(../../img/collapse.gif);
}




.system_FormsHTMLEditor .DEFAULT_EDITOR {
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    border: 1px solid #ccc; 
}
.system_FormsHTMLEditor .DEFAULT_EDITOR[data-is-active="YES"] {
    display: block;
}
.system_FormsHTMLEditor .DEFAULT_EDITOR[data-is-active="NO"] {
    display: none;
}
.system_FormsHTMLEditor .DEFAULT_EDITOR .toolbar {
    height: 26px;
    background-color: #f0f0f0;
    border-bottom: 1px solid #ccc; 
}
.system_FormsHTMLEditor .DEFAULT_EDITOR .button {
    
}
.system_FormsHTMLEditor .DEFAULT_EDITOR .button[data-type="SWITCH_TO_MCE_EDITOR"] {
    cursor: pointer;
    float: left;
    width: 26px;
    height: 18px;
    padding: 0;
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: 16px 16px;  
    background-position: center;
    background-image: url('../../img/list.gif');   
    border: transparent 1px solid;
    margin: 3px 3px 0 3px;
}
.system_FormsHTMLEditor .DEFAULT_EDITOR .button[data-type="SWITCH_TO_MCE_EDITOR"]:hover {
    background-color: #e3e3e3;
    border: #ccc 1px solid;
}







.system_FormsHTMLEditor .DEFAULT_EDITOR .HTML_AREA {
    padding: 11px 8px;
    width: calc(100% - 16px);
    height: calc(100% - 69px);
    color: #000;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 11px;
    outline-style: none;
    overflow: auto;
    background-color: #fff;
}
.system_FormsHTMLEditor .DEFAULT_EDITOR .status {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    background-color: #f0f0f0;
}

.system_FormsHTMLEditor .DEFAULT_EDITOR .status .countsChars{
    padding:4px
}  
.system_FormsHTMLEditor .DEFAULT_EDITOR .status .countsChars .labelVisibleAndHide ,
.system_FormsHTMLEditor .DEFAULT_EDITOR .status .countsChars .labelVisible{
    color: #555;
    font-size: 11px;
    padding: 0 3px 0 0;
    float: right;
}  
.system_FormsHTMLEditor .DEFAULT_EDITOR .status .countsChars .countVisibleAndHide ,
.system_FormsHTMLEditor .DEFAULT_EDITOR .status .countsChars .countVisible{
    color: #555;
    font-size: 11px;
    font-weight: bold;
    padding: 0 0 0 0;
    float: right;
}    
.system_FormsHTMLEditor .DEFAULT_EDITOR .status .countsChars .countSeparator{
    color: #555;
    font-size: 11px;
    font-weight: bold;
    padding: 0 10px 0 10px;
    float: right;
}    
.system_FormsHTMLEditor .DEFAULT_EDITOR .status .countsChars .countOver{
    display: none; 
    color: red; 
    font-size: 11px; 
    font-weight: normal; 
    padding: 0px 0px 0px 4px; 
    float: right;
}    



.system_FormsHTMLEditor .MCE_EDITOR {
    position: relative;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    border: 1px solid #ccc; 
}
.system_FormsHTMLEditor .MCE_EDITOR[data-is-active="YES"] {
    display: block;
}
.system_FormsHTMLEditor .MCE_EDITOR[data-is-active="NO"] {
    display: none;
}
.system_FormsHTMLEditor .MCE_EDITOR .HTML_AREA {
    display: none;
}

.system_FormsHTMLEditor .DEFAULT_EDITOR .LOADER ,
.system_FormsHTMLEditor .MCE_EDITOR .LOADER {
     width: 100%; 
    z-index: 1000;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: #fff;
    background-image: url(../../img/loading.gif);
    background-position: center;
    background-repeat: no-repeat;
    z-index: 100;
}
.system_FormsHTMLEditor .TEMP_HTML {
    
}   


.system_FormsHTMLEditor .upload1 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    background-color: #fff;
}
.system_FormsHTMLEditor .upload1 .wrapper {
    position: absolute;
    top: 20px;
    left: 18%;
    right: 20%;
    bottom: 20px;
    border: 2px dashed #ccc;
    
}

.system_FormsHTMLEditor .upload1 .type {
    position: absolute;
    top: 6px;
    left: 6px;
}
.system_FormsHTMLEditor .upload1  .closeButton {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
}

.system_FormsHTMLEditor .upload1 .buttons{
    width: 250px;
    position: absolute;
    top: calc(40% - 32px);
    left: calc(50% - 125px);
}
.system_FormsHTMLEditor .upload1 .buttons .drop {
    margin: 0 0 0 0;
    text-align: center;
    font-size: 18px;
    color: #bbb;
}
.system_FormsHTMLEditor .upload1 .buttons .or {
    margin: 1px 0 0 0;
    text-align: center;
    font-size: 10px;
    color: #bbb;
}
.system_FormsHTMLEditor .upload1 .buttons .select {
    margin: 6px auto 0 auto;
    text-align: center;
    display: block;
    width: 150px;
    font-size: 10px;
    padding: 4px;
    border: 1px solid #bbb;
    color: #555;
    cursor: pointer;
}       

.system_FormsHTMLEditor .upload1 .progressAreaWrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    background-color: #fff;
}  

.system_FormsHTMLEditor .upload1 .progressArea {
    position: static;
    width: calc(100% - 42px) ;
    height: calc(100% - 42px) ;
    margin: 20px;
    border: 1px solid #ccc;
    overflow: auto;
}     

.system_FormsHTMLEditor .upload1 .progressItem {
    border-bottom: 1px #ccc solid;
}     
.system_FormsHTMLEditor .upload1 .progressItem:last-of-type {
    border-bottom: 0px #ccc solid;
}   
.system_FormsHTMLEditor .upload1 .progressItemName {
    display: block;
    font-size: 13px;
    color: #555;
    width: calc(100% - 69px);
    margin: 6px 0px 9px 9px;
    font-weight: bold;
    float: left;
}     
.system_FormsHTMLEditor .upload1 .progressItemName span{
    font-size: 11px;
    font-weight: normal;
    color: #a0a0a0;
    vertical-align: 0px;
}        

.system_FormsHTMLEditor .upload1 .progressItemProgress {
    display: block;
    font-size: 12px;
    color: #ff8000;
    margin: 9px 8px 0px 8px;
    font-weight: bold;
    float: right;
}     


/* HTML EDITOR ................................. */



/* SYSTEM  TabsA ................................. */
.system_TabsA{
    position: relative;
    display: block;
    margin-top: 5px;
    height: calc(100% - 5px);
}
.system_TabsA_Nav{
    top: 0px;
    left: 0px;
    margin:0 ;
    padding:0;
    height: 30px;
    width:100%;
    position: absolute;
}
.system_TabsA_Button{
    background: none repeat scroll 0 0 #EEEEEE;
    border: 1px solid #DADADA;
    border-bottom:  0px none;
    color: #777777;
    display: block;
    float: left;
    margin-right: -1px;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    bottom: 0px;
    transition: bottom 0.3s ease 0s;
        text-transform: lowercase;
}
.system_TabsA_Button:hover{ 
    background: none repeat scroll 0 0 #EEEEEE;
    color: #000000;
}
.system_TabsA_Button[data-tabs-state="current"]{ 
    background: none repeat scroll 0 0 #FFFFFF;
    color: #000000;
    padding: 6px 9px 0px 9px ;
    height: 23px;
    bottom: 0px;
}
.system_TabsA_Button[data-tabs-state="current"]:hover{ }
.system_TabsA_Button[data-tabs-state="default"]{ 
    padding: 4px 9px 0px 9px ;
    height: 25px;
    bottom: -5px;
}
.system_TabsA_Button[data-tabs-state="default"]:hover{ 
    bottom: 0px;
}

.system_TabsA_TopRight{
    float: right;
}

.system_TabsA_Page{
    position: absolute;
    top: 30px;
    margin:0px 0px 0px 0px ;
    padding:0px 0px 0px 0px;
    min-height:33px;
    background-color:#fff;
    border:1px solid #DADADA;
    width: calc(100% - 2px);
    height: calc(100% - 27px);
    
}

.system_TabsA_Content{
    height: 100%;
    overflow: auto;
}

.system_TabsA_Content[data-tabs-state="current"]{
    display: block;
}
.system_TabsA_Content[data-tabs-state="default"]{ 
    display: none;
}
/* SYSTEM  TabsA ................................. */



/* SYSTEM RENDERS NAV ...................... */
.system_Nav{
    height: 100%;
    background-color: #fff;
    overflow: auto;
}

.system_Nav  .search{
    margin: 0px 0px 0px 0px;
    width: calc(100% - 95px);
    display: block;
    float: left;
}

.system_Nav  .pageSelect{
    margin: 0px 0px 0px 0px;
    display: block;
    float: right;
    width: 53px;
}   
.system_Nav  .pageCount{
    float: right;
    margin: 4px 0px 0px 0px;
    width: 36px;
    font-size: 12px;
    font-weight: bold;
    color: #555;
    text-align: center;
    cursor: default;
}

.system_Nav .buttonRefresh{
    float: left;
    margin-top: 4px;
}
.system_Nav .group select{
    width: calc(100% - 0px);
}

.system_Nav .group .pagi{
    float: right;
}
.system_Nav .group .pagiSelect{
    display: block;
    margin: 0px 0 0 0px;
    text-align: center;
    width: 50px;
    border: 1px solid #999;
    float: left;
    height: auto;
}
.system_Nav .group .pagiCount{
    display: block;
    padding: 0px 0px 0 0px;
    width: 30px;
    height: 23px;
    background-color: #999;
    cursor: default;
    line-height: 23px;
    font-size: 11px;
    text-align: center;
    color: #fff;
    float: left;
    font-weight: bold;
    margin: 0;
}



.system_Nav  .group {
    padding: 15px 15px 0px 15px;
    position: relative;
}

.system_Nav  .group .label{
    border: none;
    padding: 0;
    font-size: 9px;
    color: #777777;
    font-weight: bold;
    margin: 0 0 4px 1px;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.system_Nav  .group .clear{
    border: none;
    padding: 0;
    font-size: 7px;
    color: #000;
    font-weight: 600;
    margin: 0 0 4px 1px;
    position: absolute;
    top: 17px;
    right: 15px;
    cursor: pointer;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
clear: none;

    height: auto;
    width: auto;
}
/* SYSTEM RENDERS NAV ...................... */
    

/* SYSTEM PIN FILTER ...................... */
.system_PinFilter{
    padding: 5px 6px 5px 6px;
    border: 1px solid #999;
    border-width: 1px 1px 0px 1px;
    cursor: pointer;
    position: relative;
}

.system_PinFilter:last-of-type{
    border-width: 1px 1px 1px 1px;
}



.system_PinFilter .pinName{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
    color: #555;
    padding: 0 15px 0 0;
    
}

.system_PinFilter .pinWindow{
    display: none;
    background-color: #eee;
    width: 21px;
    height: 19px;
    position: absolute;
    z-index: 10;
    top: 2px;
    right: 0px;
    bottom: 0px;
    left: auto;
    padding: 1px 0 0 0;
}

.system_PinFilter[data-is-selected="NO"]{}
.system_PinFilter[data-is-selected="NO"]:hover{
    background-color: #eee;
}
.system_PinFilter[data-is-selected="NO"]:hover .pinWindow{
    display: block;
}

.system_PinFilter[data-is-selected="YES"]{
    background-color: #eee;

}

/* SYSTEM PIN FILTER ...................... */

        
/* SYSTEM RENDERS CATEGORY FILTER ...................... */
.system_CategoryFilter{
    white-space: nowrap;
    color: #555;
    padding: 5px 6px 6px 6px;
    margin: 0 0 6px 0;
    border: 1px #eee solid;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}


.system_CategoryFilter[data-width-percent="100"]{

}
.system_CategoryFilter[data-width-percent="50"]{

}


.system_CategoryFilter[data-width-percent="50"][data-float="1"]{
    width: calc(50% - 16px);
    display: inline-block;
    
}



.system_CategoryFilter[data-is-selected="NO"]{}
.system_CategoryFilter[data-is-selected="NO"]:hover{
    background-color: #eee;
}
.system_CategoryFilter[data-is-selected="YES"]{
    background-color: #aaa;
    border: 1px #aaa solid;
    color: #fff;
}



/* SYSTEM RENDERS CATEGORY FILTER ...................... */




/* SYSTEM RENDERS TAG FILTER ...................... */
.system_TagFilter{
    margin: 0px 0 0px 0;
    white-space: nowrap;
    color: #555;
    padding: 4px 5px 5px 29px;
    border: 1px #eee solid;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    position: relative;
    margin: 0px 0 6px 0;
}
.system_TagFilter:last-of-type{
    margin: 0px 0 0px 0;
}
.system_TagFilter[data-visible="YES"]:last-of-type{
    margin: 0px 0 0px 0;
}

.system_TagFilter .square{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 21px;
    height: 24px;
}


.system_TagFilter .dot{
    position: absolute;
    top: 5px;
    right: 2px;
    width: 4px;
    height: 4px;
    margin: 2px 0px 0px 3px;
    background-image: url(../../svg/pin.svg);
    width: 14px;
    height: 14px;
    margin: 0px 3px 0 0;
    float: right;
    background-size: cover;
    display: none;
}

.system_TagFilter[data-is-selected="NO"] .dot {
    display: none;
}
.system_TagFilter[data-is-selected="NO"]:hover .dot {
    display: block;
}

.system_TagFilter[data-is-selected="YES"] .dot {
    display: block;
}
.system_TagFilter[data-is-selected="YES"]:hover .dot {
    display: block;
}
/* SYSTEM RENDERS TAG FILTER ...................... */

/* SYSTEM COMMON ...................... */
.syrtem_ListEmpty_1{
    font-size: 2.2em;
    -webkit-user-select: none;
    color: #bbb;
    text-align: center;
    padding: 50px;
    -webkit-user-select: none;
        font-family: Verdana,Arial;
}

.syrtem_ListEmpty_1[data-size="small"]{
    font-size: 16px;
}

.syrtem_ListEmptyTr td{
    -webkit-user-select: none;
    color: #bbb;
    text-align: center!important;
    -webkit-user-select: none;
    font-family: Verdana,Arial;
    font-size: 12px;
    line-height: 40px;
}




.system_ClearFloat{
    clear: both;
    margin: 0;
    padding: 0;
    height: 0;
    width: 0;
}

.SYSTEM_WINDOW_LOADING{
     width: 100%; 
     height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: #fff;
    background-image: url(../../img/loading.gif);
    background-position: center;
    background-repeat: no-repeat;
    z-index: 100;
}
.SYSTEM_WINDOW_LOADING[data-size="small"]{
    background-size: 18px 18px;
}

.SYSTEM_WINDOW_LOADING_BOTTOM{
    position: relative;
    height:50px;
   top: auto;
    left: auto;
    bottom: auto;
    right: auto;
}

/* SYSTEM COMMON ...................... */