/* WebControl - Builder */
/* wcbcButton */
.wcbcButton {
}

.wcbcButtonIcon {
}

.wcbcButtonInput {
    cursor: pointer;
    -webkit-appearance: none;
    font-size: 16px;
    --background-color: transparent;
    background-color: rgba(0,0,0,.04);
    color: rgba(0,0,0,.87);
    box-sizing: border-box;
    outline: none;
    border: 1px solid rgba(0,0,0,.87);
    min-height: 40px;
    min-width: 80px;
}

    .wcbcButtonInput:hover {
        background-color: rgba(0,0,0,.08);
    }

.wcbcButtonText {
}

/* wcbcDataGrid */
.wcbcDataGrid {
    background-color: transparent;
    border-top: 1px solid rgba(0,0,0,.20);
}

.wcbcDataGridTable {
    table-layout: fixed;
    width: 100%;
}

.wcbcDataGridToolbar {
}

.wcbcDataGridAuditing {
    padding: 5px;
    background-color: rgba(250,250,250,1);
    border: 1px solid rgba(0,0,0,.20);
    border-radius: 5px 5px;
    margin: 1px;
    cursor: pointer;
    height: 35px;
    width: 35px;
}

    .wcbcDataGridAuditing:hover {
        background-color: rgba(0,0,0,.05);
    }

.wcbcDataGridAuditingIcon {
}

.wcbcDataGridRefresh {
    padding: 5px;
    background-color: rgba(250,250,250,1);
    border: 1px solid rgba(0,0,0,.20);
    border-radius: 5px 5px;
    margin: 1px;
    cursor: pointer;
    height: 35px;
    width: 35px;
}

    .wcbcDataGridRefresh:hover {
        background-color: rgba(0,0,0,.05);
    }

.wcbcDataGridRefreshIcon {
}

.wcbcDataGridAdd {
    padding: 5px;
    background-color: rgba(250,250,250,1);
    border: 1px solid rgba(0,0,0,.20);
    border-radius: 5px 5px;
    margin: 1px;
    cursor: pointer;
    height: 35px;
    width: 35px;
}

    .wcbcDataGridAdd:hover {
        background-color: rgba(0,0,0,.05);
    }

.wcbcDataGridAddIcon {
}

.wcbcDataGridHeader {
}

.wcbcDataGridColumnHeader {
    background-color: rgba(250,250,250,1);
    padding: 10px;
    border-bottom: 1px solid rgba(0,0,0,.20);
}

    .wcbcDataGridColumnHeader:hover {
        background-color: rgba(0,0,0,.05);
    }

.wcbcDataGridColumnHeaderTitle {
    cursor: pointer;
}

.wcbcDataGridColumnHeaderIcon {
    cursor: pointer;
}

.wcbcDataGridFilter {
}

.wcbcDataGridColumnFilter {
    background-color: rgba(250,250,250,1);
    padding: 10px;
    border-bottom: 1px solid rgba(0,0,0,.20);
}

    .wcbcDataGridColumnFilter:hover {
        background-color: rgba(0,0,0,.05);
    }

.wcbcDataGridColumnFilterContent {
    max-width: 300px;
}

.wcbcDataGridColumnFilterIcon {
    cursor: pointer;
}

.wcbcDataGridColumnCell {
    background-color: rgba(255,255,255,1);
    padding: 10px;
    border-bottom: 1px solid rgba(0,0,0,.20);
}

.wcbcDataGridColumnCellText {
    overflow: hidden;
    text-overflow: ellipsis;
}

.wcbcDataGridColumnCellIcon {
    cursor: pointer;
}

.wcbcDataGridColumnCellContent {
}

.wcbcDataGridColumnOnCellContentRender {
}

.wcbcDataGridCellContent {
}

.wcbcDataGridCellColumnBorderRegular {
    border-right: 1px solid rgba(0,0,0,.20);
}

.wcbcDataGridCellColumnBorderStart {
    border-left: 1px solid rgba(0,0,0,.20);
}

.wcbcDataGridCellRowBorderEnd {
    border-bottom: 0px solid rgba(0,0,0,.20);
}

.wcbcDataGridCellDeleteIcon {
    cursor: pointer;
}

.wcbcDataGridCellUpdateIcon {
    cursor: pointer;
}

.wcbcDataGridCellAuditIcon {
    cursor: pointer;
}

.wcbcDataGridCellSaveIcon {
    cursor: pointer;
}

.wcbcDataGridCellCancelIcon {
    cursor: pointer;
}

.wcbcDataGridFooter {
    background-color: rgba(250,250,250,1);
    padding: 10px;
    border-top: 1px solid rgba(0,0,0,.20);
    border-left: 1px solid rgba(0,0,0,.20);
    border-right: 1px solid rgba(0,0,0,.20);
    border-bottom: 1px solid rgba(0,0,0,.20);
}

    .wcbcDataGridFooter:hover {
        background-color: rgba(0,0,0,.05);
    }

.wcbcDataGridFooterCell {
}

.wcbcDataGridFooterPagerItem {
    cursor: pointer;
}

.wcbcDataGridFooterPagerItemSelected {
    font-weight: bold;
}

.wcbcDataGridDialog {
}

.wcbcDataGridLoading {
    z-index: 10000;
}

.wcbcDataGridNotification {
}

.wcbcDataGridPopup {
}

.wcbcDataGridScrollView {
}

/* wcbcDesign */
.wcbcDesign {
}

.wcbcDesignStyle {
}
.wcbcDesignEditStyle {
}
.wcbcDesignEditViewStyle {
}

.wcbcDesignLoading {
    top: 150px;
    z-index: 10000;
    transform: translate(-50%, -50%);
}
    .wcbcDesignLoading .wcbcLoading {
        background-color: transparent;
    }

.wcbcDesignPopup {
}

.wcbcDesignView {
    position: relative;
}
.wcbcDesignViewContent {
    background-color: rgba(0,0,0,.05);
    border: 1px solid rgba(0,0,0,.20);
}
.wcbcDesignViewContentIcon {

}
.wcbcDesignViewContentItem {
    background-color: transparent;
}

.wcbcDesignViewAdd {
    padding: 5px;
    background-color: rgba(250,250,250,1);
    border: 1px solid rgba(0,0,0,.20);
    border-radius: 5px 5px;
    margin: 1px;
    cursor: pointer;
    height: 35px;
    width: 35px;
}
    .wcbcDesignViewAdd:hover {
        background-color: rgba(0,0,0,.05);
    }

.wcbcDesignViewAddIcon {
}

.wcbcDesignViewEdit {
    padding: 5px;
    background-color: rgba(250,250,250,1);
    border: 1px solid rgba(0,0,0,.20);
    border-radius: 5px 5px;
    margin: 1px;
    cursor: pointer;
    height: 35px;
    width: 35px;
}
    .wcbcDesignViewEdit:hover {
        background-color: rgba(0,0,0,.05);
    }

.wcbcDesignViewEditIcon {
}

.wcbcDesignViewChangeLocation {
    padding: 5px;
    background-color: rgba(250,250,250,1);
    border: 1px solid rgba(0,0,0,.20);
    border-radius: 5px 5px;
    margin: 1px;
    cursor: pointer;
    height: 35px;
    width: 35px;
}

    .wcbcDesignViewChangeLocation:hover {
        background-color: rgba(0,0,0,.05);
    }

.wcbcDesignViewChangeLocationIcon {
}

.wcbcDesignViewChangeOrder {
    padding: 5px;
    background-color: rgba(250,250,250,1);
    border: 1px solid rgba(0,0,0,.20);
    border-radius: 5px 5px;
    margin: 1px;
    cursor: pointer;
    height: 35px;
    width: 35px;
}

    .wcbcDesignViewChangeOrder:hover {
        background-color: rgba(0,0,0,.05);
    }

.wcbcDesignViewChangeOrderIcon {
}

.wcbcDesignViewDelete {
    padding: 5px;
    background-color: rgba(250,250,250,1);
    border: 1px solid rgba(0,0,0,.20);
    border-radius: 5px 5px;
    margin: 1px;
    cursor: pointer;
    height: 35px;
    width: 35px;
}

    .wcbcDesignViewDelete:hover {
        background-color: rgba(0,0,0,.05);
    }

.wcbcDesignViewDeleteIcon {
}

.wcbcDesignViewView {
    padding: 5px;
    background-color: rgba(250,250,250,1);
    border: 1px solid rgba(0,0,0,.20);
    border-radius: 5px 5px;
    margin: 1px;
    cursor: pointer;
    height: 35px;
    width: 35px;
}

    .wcbcDesignViewView:hover {
        background-color: rgba(0,0,0,.05);
    }

.wcbcDesignViewViewIcon {
}

/* wcbccDialog */
.wcbcDialog {
    background: white;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.wcbcDialogOverlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    border: rgba(0, 0, 0);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5001;
    pointer-events: all;
}

.wcbcDialogHeader {
    height: 80px;
    border-bottom: 1px solid rgba(0, 0, 0);
    background-color: rgba(0,0,0,.05);
}

.wcbcDialogHeaderTitle {
}

.wcbcDialogHeaderToolbar {
}

.wcbcDialogHeaderClose {
    cursor: pointer;
    border: 1px solid #C1C1C1;
    border-radius: 5px 5px;
}

    .wcbcDialogHeaderClose:hover {
        background: rgba(0,0,0,.04);
    }

.wcbcDialogHeaderCloseIcon {
}

.wcbcDialogContent {
    padding: 20px 25px;
    min-height: 100px;
    min-width: 260px;
}

.wcbcDialogContentLayoutScrollbar {
    border: 0px solid #CCCCCC;
    padding: 0px;
}

    /* ===== Chrome, Edge, Safari ===== */
    .wcbcDialogContentLayoutScrollbar::-webkit-scrollbar {
        width: 10px; /* scrollbar width */
    }

    .wcbcDialogContentLayoutScrollbar::-webkit-scrollbar-track {
        background: #FAFAFA; /* track color */
        border-radius: 5px;
    }

    .wcbcDialogContentLayoutScrollbar::-webkit-scrollbar-thumb {
        background: #C1C1C1; /* thumb color */
        border-radius: 5px;
    }

        .wcbcDialogContentLayoutScrollbar::-webkit-scrollbar-thumb:hover {
            background: #555; /* thumb hover color */
        }

/* ===== Firefox ===== */
.wcbcDialogContentLayoutScrollbar {
    scrollbar-width: thin; /* auto, thin, none */
    scrollbar-color: #C1C1C1 #FAFAFA; /* thumb color, track color */
}

    .wcbcDialogContentLayoutScrollbar.showLayoutScrollbar::-webkit-scrollbar {
        width: 10px;
    }

    .wcbcDialogContentLayoutScrollbar.showLayoutScrollbar {
        scrollbar-width: thin; /* Firefox */
    }

.wcbcDialogFooter {
    height: 80px;
    background-color: rgba(0,0,0,.05);
    border-top: 1px solid rgba(0, 0, 0);
}

/* wcbcDiv */

.wcbcDiv {
}

/* wcbcDropDownList */
.wcbcDropDownList {
    background-color: rgba(0,0,0,.04);
}

.wcbcDropDownListInput {
    -webkit-appearance: none;
    padding: 8px 9px 7px;
    font-family: Roboto,RobotoFallback,"Noto Kufi Arabic",Helvetica,Arial,sans-serif;
    font-size: 16px;
    line-height: 1.2857;
    background-color: transparent;
    color: rgba(0,0,0,.87);
    box-sizing: border-box;
    outline: none;
    border: none;
    border-top: 1px solid rgba(0,0,0,.20);
    border-left: 1px solid rgba(0,0,0,.20);
    border-right: 1px solid rgba(0,0,0,.20);
    border-bottom: 1px solid rgba(0,0,0,.87);
}

    .wcbcDropDownListInput:hover {
        background-color: rgba(0,0,0,.05);
    }

.wcbcDropDownListRequiredField {
    -webkit-appearance: none;
    padding: 8px 9px 7px;
    font-family: Roboto,RobotoFallback,"Noto Kufi Arabic",Helvetica,Arial,sans-serif;
    font-size: 16px;
    line-height: 1.2857;
    color: rgba(0,0,0,.87);
    box-sizing: border-box;
    outline: none;
    border: none;
    border-top: 1px solid rgba(227,49,18,.30);
    border-left: 1px solid rgba(227,49,18,.30);
    border-right: 1px solid rgba(227,49,18,.30);
    border-bottom: 1px solid rgba(227,49,18,1.04);
    background-color: rgba(245,113,91,.04);
}

    .wcbcDropDownListRequiredField:hover {
        border-bottom: 1px solid rgba(227,49,18,1.10);
        background-color: rgba(245,113,91,.10);
    }

.wcbcDropDownListButtonSelectItem {
    width: 0px;
    position: relative;
    left: -25px;
    opacity: 0.6;
    cursor: pointer;
}

.wcbcDropDownListButtonDeleteItem {
    width: 0px;
    position: relative;
    top: 0px;
    left: 0px;
    left: -45px;
    opacity: 0.2;
    cursor: pointer;
}

.wcbcDropDownListItemList {
    position: absolute;
    transform: translate(0px, 36px);
    background-color: rgba(245,245,245,1);
    min-width: 200px;
    border-top: 1px solid rgb(27, 125, 209, 0.87);
    border-bottom: 1px solid rgba(0,0,0,.20);
    z-index: 50;
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
}

.wcbcDropDownListItemOpen {
    border-bottom: 1px solid rgb(27, 125, 209, 0.87);
}

.wcbcDropDownListItemOpenTop {
    border-top: 1px solid rgb(27, 125, 209, 0.87);
}

.wcbcDropDownListItemListTop {
    position: absolute;
    transform: translate(0px, 36px);
    background-color: rgba(245,245,245,1);
    min-width: 200px;
    border-bottom: 1px solid rgb(27, 125, 209, 0.87);
    border-top: 1px solid rgba(0,0,0,.20);
    z-index: 50;
}

.wcbcDropDownListItem {
    border-left: 1px solid rgba(0,0,0,.20);
    border-right: 1px solid rgba(0,0,0,.20);
    cursor: pointer;
}

    .wcbcDropDownListItem:hover {
        background-color: rgba(230,230,230,1);
    }

.wcbcDropDownListItemSelected {
    background-color: rgba(210,210,210,1);
}

/* wcbcFile */

.wcbcFile {
}

.wcbcFileButton {
}

.wcbcFileInput {
    opacity: 0;
}

.wcbcFileDataGrid {
}

/* wcbcForm */

.wcbcForm {
}

.wcbcFormLoading {
    top: 150px;
    z-index: 10000;
    transform: translate(-50%, -50%);
}
    .wcbcFormLoading .wcbcLoading {
        background-color: transparent;
    }

.wcbcFormDialog {
}

.wcbcFormNotification {
}

/* wcbcGallery */
.wcbcGallery {

}
    .wcbcGallery img {
        touch-action: pinch-zoom pan-y;
        pointer-events: none;
        user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        user-drag: none;
        -webkit-user-drag: none;
    }

.wcbcGalleryLoading {
    top: 150px;
    z-index: 10000;
    transform: translate(-50%, -50%);
}
    .wcbcGalleryLoading .wcbcLoading {
        background-color: transparent;
    }

.wcbcGalleryContent {
}

.wcbcGalleryContentItem {
    user-select: none;
}

.wcbcGalleryNavigationButton {
    cursor: pointer;
}

@media (max-width: 990px) {
    .wcbcGalleryNavigationButton {
        display: none !important;
    }
}

.wcbcGalleryIndicatorIcon {
    cursor: pointer;
}

/* wcbcImage */
.wcbcImage {
}

/* wcbcLabel */
.wcbcLabel {
}

    .wcbcLabel a {
        text-decoration: none;
    }

.wcbcLabelRegular {
}

.wcbcLabelTitle {
}

.wcbcLabelContent {
}

.wcbcLabelQuote {
    border-inline-start: 3px solid #C84F3A;
    padding-left: 10px;
}

.wcbcLabelCatchPhrase {
}

.wcbcLabelLink {
}

    .wcbcLabelLink a {
        text-decoration: none;
    }

/* wcbcLoading */
.wcbcLoading {
    background-color: transparent;
    border: 0px solid rgba(0,0,0,.20);
    margin: 2px;
    padding: 2px;
}

.wcbcLoadingImage {
    width: 80px;
}

/* wcbcNavigation */
.wcbcNavigation {
    border-radius: 2px;
    border: 1px solid rgba(0,0,0,.20);
    margin: 2px;
}

.wcbcNavigationDesktop {
    background-color: rgba(0,0,0,.04);
}

@media (max-width: 990px) {
    .wcbcNavigationDesktop {
        display: none !important;
    }
}

.wcbcNavigationDesktopMenu {
}

.wcbcNavigationDesktopMenuNode {
    cursor: pointer;
    min-height: 40px;
}

    .wcbcNavigationDesktopMenuNode:hover {
        background-color: rgba(0,0,0,.20);
    }

.wcbcNavigationDesktopMenuNodeHover {
    background-color: rgba(0,0,0,.20);
}

.wcbcNavigationDesktopMenuNodeSelected {
    background-color: rgba(0,0,0,.20);
}

.wcbcNavigationDesktopMenuNodeTitle {
}

    .wcbcNavigationDesktopMenuNodeTitle a {
        text-decoration: none;
    }

.wcbcNavigationDesktopMenuNodeIcon {
}

.wcbcNavigationDesktopMenuItem {
    position: absolute;
    border-radius: 2px;
    background-color: rgba(255,255,255,1);
    border: 1px solid rgba(0,0,0,.20);
    min-width: 200px;
    transform: translate(0px, 40px);
    z-index: 300;
}

.wcbcNavigationDesktopMenuItemStart {
    transform: translate(-1px, 40px);
}

.wcbcNavigationDesktopMenuItemStart {
}

.wcbcNavigationDesktopMenuItemHidden {
    display: none !important;
}

.wcbcNavigationDesktopMenuItemNode {
    cursor: pointer;
    min-height: 40px;
}

    .wcbcNavigationDesktopMenuItemNode a {
        text-decoration: none;
    }
    .wcbcNavigationDesktopMenuItemNode:hover {
        background-color: rgba(0,0,0,.20);
    }

.wcbcNavigationDesktopMenuItemNodeSelected {
    background-color: rgba(0,0,0,.20);
}

.wcbcNavigationDesktopMenuNodeSelected {
    background-color: rgba(0,0,0,.20);
}

.wcbcNavigationMobile {
    background-color: rgba(255,255,255,1);
}

@media (min-width: 990px) {
    .wcbcNavigationMobile {
        display: none !important;
    }
}

.wcbcNavigationMobileButton {
    width: 40px;
    height: 40px;
}

@media (min-width: 990px) {
    .wcbcNavigationMobileButton {
        display: none !important;
    }
}

.wcbcNavigationMobileButtonImage {
}

.wcbcNavigationMobileMenu {
}

.wcbcNavigationMobileItem {
    border: 1px solid rgba(0,0,0,.20);
    position: absolute;
    transform: translate(-158px, -3px);
    min-width: 200px;
    z-index: 300;
}

.wcbcNavigationMobileMenuNode {
    cursor: pointer;
    min-height: 40px;
}

    .wcbcNavigationMobileMenuNode:hover {
        background-color: rgba(0,0,0,.20);
    }

.wcbcNavigationMobileMenuNodeSelected {
    background-color: rgba(0,0,0,.20);
}

.wcbcNavigationMobileMenuNodeTitle {
}

    .wcbcNavigationMobileMenuNodeTitle a {
        text-decoration: none;
    }

.wcbcNavigationMobileMenuNodeIcon {
}

.wcbcNavigationMobileMenuItem {
    position: relative;
    background-color: rgba(255,255,255,1);
    border: 0px solid rgba(0,0,0,.20);
    min-width: 180px;
}

.wcbcNavigationMobileMenuItemHidden {
    display: none !important;
}

.wcbcNavigationMobileMenuItemNode {
    cursor: pointer;
    min-height: 40px;
}

    .wcbcNavigationMobileMenuItemNode:hover {
        background-color: rgba(0,0,0,.20);
    }

.wcbcNavigationMobileMenuItemNodeSelected {
    background-color: rgba(0,0,0,.20);
}

/* wcbcNotification */
.wcbcNotification {
    border-radius: 2px;
    background-color: rgba(0,0,0,.04);
    border: 0px solid rgba(0,0,0,.20);
    margin: 0px;
    padding: 0px;
}

.wcbcNotificationPositionRelative {
    position: relative;
    min-width: 100%;
}
.wcbcNotificationPositionAbsoluteTop {
    position: absolute;
    /*top: -30px;*/
    min-width: 100%;
}
.wcbcNotificationPositionAbsoluteBottom {
    position: absolute;
    bottom: -30px;
    min-width: 100%;
}

.wcbcNotificationNone {
    border: 1px solid rgba(128,128,128,.87);
    background-color: rgba(222,217,217,1);
    margin: 1px;
    padding: 1px;
}

.wcbcNotificationInformation {
    border: 1px solid rgba(80,179,37,1);
    background-color: rgba(182,235,158,1);
    margin: 1px;
    padding: 1px;
    white-space: nowrap;
}

.wcbcNotificationWarning {
    border: 1px solid rgba(230,193,32,1);
    background-color: rgba(252,240,126,1);
    margin: 1px;
    padding: 1px;
    white-space: nowrap;
}

.wcbcNotificationError {
    border: 1px solid rgba(227,49,18,1);
    background-color: rgba(245,113,91,1);
    margin: 1px;
    padding: 1px;
    white-space: nowrap;
}

/* wcbcPopup */
.wcbcPopup {
    background: white;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.wcbcPopupOverlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    border: rgba(0, 0, 0);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5001;
    pointer-events: all;
}

.wcbcPopupHeader {
    height: 50px;
    border-bottom: 1px solid rgba(0, 0, 0);
    background-color: rgba(0,0,0,.05);
}

.wcbcPopupHeaderTitle {
}

.wcbcPopupHeaderToolbar {
}

.wcbcPopupHeaderClose {
    cursor: pointer;
    border: 1px solid #C1C1C1;
    border-radius: 5px 5px;
    margin: 1px;
    height: 35px;
    width: 35px;
}

    .wcbcPopupHeaderClose:hover {
        background: rgba(0,0,0,.04);
    }

.wcbcPopupHeaderCloseIcon {
}

.wcbcPopupContent {
    height: 100%;
    padding: 20px 25px;
    min-height: 100px;
    max-height: 700px;
    min-width: 260px;
    overflow-x: auto;
}

.wcbcPopupContentLayoutScrollbar {
    border: 0px solid #CCCCCC;
    padding: 0px;
}

    /* ===== Chrome, Edge, Safari ===== */
    .wcbcPopupContentLayoutScrollbar::-webkit-scrollbar {
        width: 10px; /* scrollbar width */
    }

    .wcbcPopupContentLayoutScrollbar::-webkit-scrollbar-track {
        background: #FAFAFA; /* track color */
        border-radius: 5px;
    }

    .wcbcPopupContentLayoutScrollbar::-webkit-scrollbar-thumb {
        background: #C1C1C1; /* thumb color */
        border-radius: 5px;
    }

        .wcbcPopupContentLayoutScrollbar::-webkit-scrollbar-thumb:hover {
            background: #555; /* thumb hover color */
        }

/* ===== Firefox ===== */
.wcbcPopupContentLayoutScrollbar {
    scrollbar-width: thin; /* auto, thin, none */
    scrollbar-color: #C1C1C1 #FAFAFA; /* thumb color, track color */
}

    .wcbcPopupContentLayoutScrollbar.showLayoutScrollbar::-webkit-scrollbar {
        width: 10px;
    }

    .wcbcPopupContentLayoutScrollbar.showLayoutScrollbar {
        scrollbar-width: thin; /* Firefox */
    }

.wcbcPopupFooter {
    height: 50px;
    background-color: rgba(0,0,0,.05);
    border-top: 1px solid rgba(0, 0, 0);
}

/* wcbcScrollView */
.wcbcScrollView {

}

.wcbcScrollViewWrapper {
    flex: 1;
    height: auto;
    min-width: 0;
    min-height: 0;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.wcbcScrollViewContainer {
    touch-action: pan-y;
}

.wcbcScrollViewContent {
    left: 0px;
    top: 0px;
    overflow-anchor: none;
    display: block;
    float: left;
    min-width: 100%;
    position: relative;
    min-height: 100%;
    box-sizing: border-box;
    transform: none;
    transition: transform 0.1s ease-out;
}

.wcbcScrollViewContentPreventSelection {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.wcbcScrollViewScrollbar {
    position: absolute;
    pointer-events: auto;
}

.wcbcScrollViewScrollbarVertical {
    width: 15px;
    transition: width .1s linear .15s, background-color .1s linear .15s;
    top: 0;
    right: 0;
    height: 100%;
}


.wcbcScrollViewScrollbarHoverable {
    background-color: transparent;
    transition: background-color .1s linear 1s, width .1s linear .15s;
}

.wcbcScrollViewScrollbarScroll {
    width: 7px;
    height: 15px;
    transform: translate(0px, 0px);
    display: block !important;
}
    .wcbcScrollViewScrollbarScroll:hover {
        width: 15px;
    }

.wcbcScrollViewScrollbarScrollInvisible {
    display: none !important;
}

.wcbcScrollViewScrollbarScrollDragging {
    width: 15px;
    display: block !important;
}

.wcbcScrollViewScrollbarScrollContent {
    width: 100%;
    height: 100%;
    background-color: rgba(191,191,191,.7);
}

.wcbcScrollViewScrollbarTopButton {
    position: absolute;
    bottom: 15px;
    right: 15px;
    height: 35px;
    width: 35px;
    border: 1px solid #AAAAAA;
    border-radius: 10px;
    background-color: #DDDDDD;
}
@media (max-width: 500px) {
    .wcbcScrollViewScrollbarTopButton {
        bottom: 5px;
        right: 5px;
    }
}
.wcbcScrollViewScrollbarTopButtonIcon {
    color: #000000;
}

/* wcbcText */
.wcbcText {
    background-color: rgba(0,0,0,.04);
}

.wcbcTextInput {
    -webkit-appearance: none;
    padding: 8px 9px 7px;
    font-family: Roboto,RobotoFallback,"Noto Kufi Arabic",Helvetica,Arial,sans-serif;
    font-size: 16px;
    line-height: 1.2857;
    background-color: transparent;
    color: rgba(0,0,0,.87);
    box-sizing: border-box;
    width: 100%;
    outline: none;
    border: none;
    border-top: 1px solid rgba(0,0,0,.20);
    border-left: 1px solid rgba(0,0,0,.20);
    border-right: 1px solid rgba(0,0,0,.20);
    border-bottom: 1px solid rgba(0,0,0,.87);
    cursor: pointer;
}

    .wcbcTextInput:hover {
        background-color: rgba(0,0,0,.05);
    }

.wcbcTextInputRequiredField {
    -webkit-appearance: none;
    padding: 8px 9px 7px;
    font-family: Roboto,RobotoFallback,"Noto Kufi Arabic",Helvetica,Arial,sans-serif;
    font-size: 16px;
    line-height: 1.2857;
    color: rgba(0,0,0,.87);
    box-sizing: border-box;
    width: 100%;
    outline: none;
    border: none;
    border-top: 1px solid rgba(227,49,18,.30);
    border-left: 1px solid rgba(227,49,18,.30);
    border-right: 1px solid rgba(227,49,18,.30);
    border-bottom: 1px solid rgba(227,49,18,1.04);
    background-color: rgba(245,113,91,.04);
}

    .wcbcTextInputRequiredField:hover {
        border-bottom: 1px solid rgba(227,49,18,1.10);
        background-color: rgba(245,113,91,.10);
    }

.wcbcTextInputButtonDeleteItem {
    width: 0px;
    position: relative;
    top: 0px;
    left: -25px;
    opacity: 0.2;
    cursor: pointer;
}

.wcbcTextInputButtonDeleteItemDateTime {
    width: 0px;
    position: relative;
    top: 0px;
    left: -55px;
    opacity: 0.2;
    cursor: pointer;
}

.wcbcTextInputButtonDeleteItemPassword {
    width: 0px;
    position: relative;
    top: 0px;
    left: -25px;
    opacity: 0.2;
    cursor: pointer;
}

/* wcbcTextArea */
.wcbcTextArea {
    background-color: rgba(0,0,0,.04);
}

.wcbcTextAreaInput {
    -webkit-appearance: none;
    padding: 8px 9px 7px;
    font-family: Roboto,RobotoFallback,"Noto Kufi Arabic",Helvetica,Arial,sans-serif;
    font-size: 16px;
    line-height: 1.2857;
    background-color: transparent;
    color: rgba(0,0,0,.87);
    box-sizing: border-box;
    outline: none;
    border: none;
    border-top: 1px solid rgba(0,0,0,.20);
    border-left: 1px solid rgba(0,0,0,.20);
    border-right: 1px solid rgba(0,0,0,.20);
    border-bottom: 1px solid rgba(0,0,0,.87);
    overflow: auto;
    cursor: pointer;
}

    .wcbcTextAreaInput:hover {
        background-color: rgba(0,0,0,.05);
    }

.wcbcTextAreaInputRequiredField {
    -webkit-appearance: none;
    padding: 8px 9px 7px;
    font-family: Roboto,RobotoFallback,"Noto Kufi Arabic",Helvetica,Arial,sans-serif;
    font-size: 16px;
    line-height: 1.2857;
    color: rgba(0,0,0,.87);
    box-sizing: border-box;
    outline: none;
    border: none;
    border-top: 1px solid rgba(227,49,18,.30);
    border-left: 1px solid rgba(227,49,18,.30);
    border-right: 1px solid rgba(227,49,18,.30);
    border-bottom: 1px solid rgba(227,49,18,1.04);
    background-color: rgba(245,113,91,.04);
    overflow: auto;
}

    .wcbcTextAreaInputRequiredField:hover {
        border-bottom: 1px solid rgba(227,49,18,1.10);
        background-color: rgba(245,113,91,.10);
    }

.wcbcTextAreaInputButtonDeleteItem {
    width: 0px;
    position: relative;
    top: 0px;
    left: 0px;
    opacity: 0.2;
    left: -35px;
    cursor: pointer;
}

/* wcbcTextEditor */
.wcbcTextEditor {
    background-color: rgba(0,0,0,.04);
}

.wcbcTextEditorInput {
    -webkit-appearance: none;
    padding: 8px 9px 7px;
    font-family: Roboto,RobotoFallback,"Noto Kufi Arabic",Helvetica,Arial,sans-serif;
    font-size: 16px;
    line-height: 1.2857;
    background-color: transparent;
    color: rgba(0,0,0,.87);
    box-sizing: border-box;
    outline: none;
    border: none;
    border-top: 1px solid rgba(0,0,0,.20);
    border-left: 1px solid rgba(0,0,0,.20);
    border-right: 1px solid rgba(0,0,0,.20);
    border-bottom: 1px solid rgba(0,0,0,.87);
    overflow: auto;
}

    .wcbcTextEditorInput:hover {
        background-color: rgba(0,0,0,.05);
    }

.wcbcTextEditorInputRequiredField {
    -webkit-appearance: none;
    padding: 8px 9px 7px;
    font-family: Roboto,RobotoFallback,"Noto Kufi Arabic",Helvetica,Arial,sans-serif;
    font-size: 16px;
    line-height: 1.2857;
    color: rgba(0,0,0,.87);
    box-sizing: border-box;
    outline: none;
    border: none;
    border-top: 1px solid rgba(227,49,18,.30);
    border-left: 1px solid rgba(227,49,18,.30);
    border-right: 1px solid rgba(227,49,18,.30);
    border-bottom: 1px solid rgba(227,49,18,1.04);
    background-color: rgba(245,113,91,.04);
    overflow: auto;
}

    .wcbcTextEditorInputRequiredField:hover {
        border-bottom: 1px solid rgba(227,49,18,1.10);
        background-color: rgba(245,113,91,.10);
    }

.wcbcTextEditorInputButtonDeleteItem {
    width: 0px;
    position: relative;
    top: 0px;
    left: 0px;
}

/* wcbcTooltip */
.wcbcTooltip {
    position: absolute;
    z-index: 1001;
    display: block;
    margin: 0px;
    font-family: var(--bs-font-sans-serif);
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    text-align: start;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    word-break: normal;
    word-spacing: normal;
    white-space: normal;
    line-break: auto;
    font-size: .875rem;
    word-wrap: break-word;
    opacity: 0;
    inset: auto auto 0px 0px;
}

.wcbcTooltipTop {
    padding: .4rem 0;
}

.wcbcTooltipFade {
    transition: opacity .15s linear;
}

.wcbcTooltipShow {
    opacity: .9;
}

.wcbcTooltipArrow {
    position: absolute;
    left: 0px;
    display: block;
    width: .8rem;
    height: .4rem;
    top: -1px;
    border-width: .4rem .4rem 0;
    position: absolute;
    content: "";
    border-style: solid;
}

.wcbcTooltipArrowTop {
    bottom: 0px;
    border-top-color: #000;
    border-right-color: transparent;
    border-left-color: transparent;
    border-bottom-color: transparent;
}

.wcbcTooltipInner {
    max-width: 200px;
    padding: .25rem .5rem;
    color: #FFFFFF;
    text-align: center;
    background-color: #000000;
    border-radius: .25rem;
}