@font-face {
    font-family: MyFontNormal;
    src: url(../fonts/Almarai-Regular.ttf);
}

@font-face {
    font-family: MyFontBold;
    src: url(../fonts/Almarai-Bold.ttf);
}

body {
    margin: 0 0;
    font-family: MyFontNormal,Tahoma;
    /*background-color: #f6f6f6;*/
    direction: rtl;
    padding: 0px;
    margin: 0px;
    background-color: rgba(0,0,0,0.1);
}

.EndOfLineAlign {
    float: left;
}

.HeaderDiv {
    color: black;
    padding: 0px;
    background: white; /* Old browsers */
    font-size: 9pt;
    border-radius: 0px;
    float: Right;
    width: 100%;
    padding: 5px 0px;
    height: 33.5pt;
}

.LeftHeaderDiv {
    text-align: Right;
    padding: 0px;
    float: Right;
}

.RightHeaderDiv {
    margin-Left: 15px;
    float: Left;
    text-align: Left;
}

#imgLogo {
    height: 28px;
    width: 28px;
    margin-left: 0px;
    margin-right: -5px;
    margin-top: -5px;
    margin-bottom: -5px;
}

#imgLogoName {
    height: 28px;
    margin-right: 10px;
}

#sProductName {
    font-family: MyFontNormal,Tahoma;
    font-size: 7.5pt;
    line-height: 10pt;
    font-weight: bold;
    color: dimgray;
}

#sMainPageSubTitle {
    font-family: MyFontNormal,Tahoma;
    font-size: 9pt;
    font-weight: bold;
    line-height: 16pt;
    margin-right: 65px;
}

.searchTextBox {
    height: 25px;
    margin-top: 4px;
    font-size: 10pt;
    padding: 5px;
    border-radius: 3px;
    width: 250px;
    vertical-align: middle;
    line-height: 14px;
}

.searchTextBoxForMobile {
    height: 35px;
    margin-top: 4px;
    font-size: 12pt;
    padding: 5px 10px;
    border-radius: 3px;
    width: 75%;
    vertical-align: middle;
    line-height: 14px;
    float: right;
    margin-bottom: 25px;
    margin-right: 15px;
}

.searchButtonForMobile {
    border: 2px solid rgb(44, 106, 181);
    background-color: rgb(44, 106, 181);
    height: 35px;
    padding: 6px 10px;
    margin-top: 4px;
    margin-left: 15px;
    float: left;
    border-radius: 3px;
    color: white;
}

.TopMenuContainer {
    list-style-type: none;
    margin: 0;
    padding: 0 15px;
    overflow: hidden;
}

.TopMenuItem {
    float: Right;
}

    .TopMenuItem a {
        display: block;
        text-align: center;
        padding: 7px 10px;
        text-decoration: none;
        color: gray;
    }

        .TopMenuItem a .fa {
            font-size: 14pt;
        }

        /* Change the link color to #111 (black) on hover */
        .TopMenuItem a:hover {
            color: #213869;
        }

#aLogo {
    margin-left: 55pt;
    background: transparent;
    color: rgb(36, 36, 36);
}

    #aLogo:hover {
        background: transparent;
        color: rgb(68, 67, 67);
    }

.aRightMenuButtons {
    padding: 5px 5px;
    float: Left;
    font-size: 14pt;
    cursor: pointer;
    color: gray;
}

    .aRightMenuButtons:hover {
        color: #213869;
    }

.PendingMessagesNotifications {
    background-color: red;
    color: white;
    font-size: 7pt;
    position: absolute;
    left: 28px;
    top: 28px;
    padding: 1px 5px;
    border-radius: 15px;
}

.PendingNotifications {
    background-color: red;
    color: white;
    font-size: 7pt;
    position: absolute;
    left: 58px;
    top: 28px;
    padding: 1px 5px;
    border-radius: 15px;
}

.MenuButton {
    margin-Left: 5px;
}

#lblUserName, #lblShortUserName {
    font-size: 10pt;
    text-decoration: underline;
    float: Left;
    margin-Left: 5pt;
    margin-top: 9px;
    color: gray;
}

.hideInMobile {
    display: inherit;
}

.ShowInMobile {
    display: none;
}

.VerticalBar {
    position: absolute;
    right: 0px;
    top: 44.5px;
    width: 215px;
    bottom: 31px;
    padding-top: 0px;
    padding-bottom: 15px;
    overflow-y: auto;
    z-index: -1;
    display: inherit;
    background-color: white;
    border: 0.5px solid rgba(0,0,0,0.1);
    overflow-y: scroll;
}

    .VerticalBar::-webkit-scrollbar {
        width: 5px;
    }

    /* Track */
    .VerticalBar::-webkit-scrollbar-track {
        background: white;
    }

    /* Handle */
    .VerticalBar::-webkit-scrollbar-thumb {
        background: rgba(26, 51, 130,0.25);
        border-radius: 25px;
    }

        /* Handle on hover */
        .VerticalBar::-webkit-scrollbar-thumb:hover {
            background: rgba(26, 51, 130,0.75);
        }

.VerticalBarItemsContainer {
    margin: 0px 0px;
    padding: 0px 10px 0px 10px;
    color: white;
    font-size: 9.5pt;
    /*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
    /*border: 1px solid lightgray;*/
}

.VerticalBarItemHeader {
    margin: 0px;
    padding: 5px 0px;
    background: #213869; /* Old browsers */
    border: none;
    border-radius: 25px;
    text-align: center;
    margin-top: 10px;
    /*font-weight: bold;*/
}

    .VerticalBarItemHeader a {
        color: white;
        text-decoration: none;
    }

    .VerticalBarItem {
        text-align: Right;
        padding: 0px 0px;
        margin: 0px 0px;
    }

        .VerticalBarItem a {
            color: #2c4986;
            cursor: pointer;
            display: block;
            background-color: white;
            margin-top:10px;
            padding: 0px 10px;
            text-decoration: none;
        }

        .VerticalBarItem .MaroonOptionStyle {
            color: maroon;
        }

        .VerticalBarItem a:hover {
            background-color: white;
            color: #4b79d8;
        }

        .VerticalBarItem a i {
            width: 15px;
        }

.DisabledMenuButton a {
    background-color: white;
    color: #4b79d8;
    font-weight: bold;
}

    .DisabledMenuButton a:hover {
        background-color: white;
        color: #4b79d8;
    }

.PageContentsContainerDiv {
    padding-right: 0px;
    position: absolute;
    right: 215px;
    top: 44.5px;
    left: 0px;
    bottom: 31px;
    z-index: -1;
    padding-right: 11px;
    padding-left: 11px;
    background: #f5fafc;
    border: 0.5px solid rgba(0,0,0,0.1);
    overflow-y: scroll;
}

.PageContentsContainerDiv::-webkit-scrollbar {
    width: 5px;
}

/* Track */
    .PageContentsContainerDiv::-webkit-scrollbar-track {
        background: white;
    }

/* Handle */
    .PageContentsContainerDiv::-webkit-scrollbar-thumb {
        background: rgba(26, 51, 130,0.25);
        border-radius: 25px;
    }

    /* Handle on hover */
        .PageContentsContainerDiv::-webkit-scrollbar-thumb:hover {
            background: rgba(26, 51, 130,0.75);
        }

.StaffPageContentsContainerDiv {
    left: 0px;
    right: 0px;
    padding-top: 15px;
    padding-right: 25px;
    padding-left: 25px;
    background-color: white;
    overflow-y: auto;
}

.PageContainerDiv {
    background-color: rgb(240, 244, 248);
    margin: 13px 0px;
    border: 1px solid #ddd;
    /*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
    padding: 0px;
    border-radius: 5px;
}

.PageTitleDiv {
    background: #213869;
    padding: 8px 15px;
    color: white;
    font-size: 10pt;
    /*font-weight: bold;*/
    /*border-bottom: 1px solid rgb(164, 201, 239);*/
    border-top-Right-radius: 5px;
    border-top-Left-radius: 5px;
}

.PageContentDiv {
    padding: 0px 15px;
    font-size: 10pt;
}

.PageTitleBackButton {
    color: white;
}

.PageTitleBackButton:hover {
    color: #ddd;
}

.mandatory {
    color: rgb(219, 26, 26);
    font-size: 10pt;
}

.pointer {
    cursor: pointer;
}

.panel {
    margin-top: 15px;
}

.panel-heading {
    font-weight: bold;
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 ); /* IE6-9 */
}

.GroupContainer {
    border-radius: 5px;
    border: 1px solid gray;
    margin: 25px 0px 10px 0px;
    padding-bottom: 10px;
}

.GroupContainerHeader {
    padding: 3px;
    color: gray;
    font-family: MyFontNormal, Arial;
    font-size: 12pt;
    margin-top: -20px;
    margin-right: -5px;
    background-color: white;
    display: inline-block;
    width: auto;
}

.GroupHeaderCheckBox {
    cursor: pointer;
}

.GroupHeaderCheckBox label {
    margin: 0px 5px;
    font-size: 10pt;
    font-family: MyFontBold;
    font-weight: normal;
    color: darkblue;
    cursor: pointer;
}

.FieldArea {
    padding-bottom: 15px;
    height: 70px;
}

.FieldAreaTitle {
    line-height: 30px;
}

.SubFieldContainer {
    background-color: rgb(243 255 255);
    padding: 5px 0px;
    padding-bottom: 10px;
    margin-top: 15px;
    border-radius: 5px;
    border: 1px solid rgb(215 255 255);
}

.ListPagePartTitle {
    font-size: 12pt;
    font-family: MyFontNormal;
    font-weight: bold;
    color: goldenrod;
    border-top: 5px solid darkorange;
    padding: 15px 0px;
}

    td label {
        cursor: pointer;
        font-weight: normal;
        margin: 0px 5px 0px 10px;
    }

.ButtonSubmit {
    background-color: #21694f;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
    color: white;
    padding: 10px;
    border: none;
    width: 150px;
    border-radius: 3px;
    margin: -15px 0px 20px 0px;
}

    .ButtonSubmit:hover, .ButtonSubmit:focus, .ButtonSubmit:active {
        background-color: #287b5d;
    }

.DisabledButton {
    background-color: dimgray;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
    color: white;
    padding: 10px;
    border: none;
    width: 150px;
    border-radius: 3px;
    margin: -15px 0px 20px 0px;
    cursor: default;
    opacity: 0.4;
}

    .DisabledButton:hover, .DisabledButton:focus, .DisabledButton:active {
        background-color: dimgray;
    }

#hlBackToHomePage {
    display: inline-block;
    background-color: rgb(0, 200, 200);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 3px;
    font-size: 9pt;
    font-weight: bold;
    margin: 10px -10px 5px -10px;
}

    #hlBackToHomePage i {
        font-size: 13pt;
        margin-left: 5px;
    }

    #hlBackToHomePage:hover, #hlBackToHomePage:focus, #hlBackToHomePage:active {
        background-color: rgb(3, 173, 173);
        text-decoration: none;
    }

.ButtonRefresh {
    color: white;
    background: rgb(52, 126, 216);
    background: linear-gradient(rgb(52, 126, 216), rgb(44, 106, 181),rgb(44, 106, 181), rgb(52, 126, 216));
    border: 1px solid rgb(44, 106, 181);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border-radius: 3px;
    padding: 7px 10px;
    margin-bottom: 15px;
    margin-top: -10px;
    font-size: 9pt;
    cursor: pointer;
    transition: background 0.1s ease-in-out;
    float: Left;
}

    .ButtonRefresh:hover, .ButtonRefresh:focus, .ButtonRefresh:active {
        background: rgb(44, 106, 181);
        background: linear-gradient(rgb(44, 106, 181),rgb(44, 106, 181),rgb(44, 106, 181),rgb(44, 106, 181));
        color: white;
    }

.ButtonAdd {
    color: white;
    background-color: #21694f;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
    border-radius: 3px;
    padding: 7px 20px;
    margin: 5px 0px;
    font-size: 9pt;
    cursor: pointer;
    transition: background 0.1s ease-in-out;
    text-decoration: none;
    display: inline-block;
    float: left;
}

    .ButtonAdd:hover, .ButtonAdd:focus, .ButtonAdd:active {
        background-color: #287b5d;
        color: white;
        text-decoration: none;
    }

.ButtonEdit {
    color: white;
    background-color: #212a69;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
    border-radius: 3px;
    padding: 7px 20px;
    margin: 5px 0px;
    font-size: 9pt;
    cursor: pointer;
    transition: background 0.1s ease-in-out;
    text-decoration: none;
    display: inline-block;
    float: left;
}

    .ButtonEdit:hover, .ButtonEdit:focus, .ButtonEdit:active {
        background-color: #282d7b;
        color: white;
        text-decoration: none;
    }

.TaskItemsFolderInfoContainer {
    float: right;
}

.TaskItemsFolderExtraInfoContainer {
    float: left;
}

.ButtonNewRequest {
    float: right;
    margin: 10px 0px;
}

.ButtonSave {
    color: white;
    background-color: rgb(0, 180, 200);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
    border-radius: 3px;
    padding: 7px 20px;
    margin: 5px 0px;
    font-size: 9pt;
    cursor: pointer;
    transition: background 0.1s ease-in-out;
    text-decoration: none;
    display: inline-block;
    float: left;
}

    .ButtonSave:hover, .ButtonSave:focus, .ButtonSave:active {
        background-color: rgb(3, 145, 191);
        color: white;
        text-decoration: none;
    }

.ButtonAttach {
    color: white;
    background: rgb(30, 79, 144);
    background: linear-gradient(rgb(30, 79, 144),rgb(25, 67, 121),rgb(25, 67, 121),rgb(30, 79, 144));
    border: 1px solid rgb(30, 79, 144);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border-radius: 3px;
    padding: 7px 20px;
    margin: 5px 0px;
    font-size: 9pt;
    cursor: pointer;
    transition: background 0.1s ease-in-out;
    text-decoration: none;
    display: inline-block;
    float: left;
    margin-right: 5px;
}

    .ButtonAttach:hover, .ButtonAttach:focus, .ButtonAttach:active {
        background: rgb(30, 79, 144);
        background: linear-gradient(rgb(30, 79, 144),rgb(30, 79, 144));
        color: white;
        text-decoration: none;
    }

.ButtonDeleteListPage {
    color: white;
    background: rgb(144, 30, 30);
    background: linear-gradient(rgb(144, 30, 30),rgb(121, 25, 25),rgb(121, 25, 25),rgb(144, 30, 30));
    border: 1px solid rgb(144, 30, 30);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border-radius: 3px;
    padding: 7px 20px;
    margin: 5px 0px;
    font-size: 9pt;
    cursor: pointer;
    transition: background 0.1s ease-in-out;
    text-decoration: none;
    display: inline-block;
    float: left;
    margin-right: 5px;
}

    .ButtonDeleteListPage:hover, .ButtonDeleteListPage:focus, .ButtonDeleteListPage:active {
        background: rgb(144, 30, 30);
        background: linear-gradient(rgb(144, 30, 30),rgb(144, 30, 30));
        color: white;
        text-decoration: none;
    }

    .ButtonBack {
        color: white;
        background: rgb(197, 113, 0);
        background: linear-gradient(rgb(197, 113, 0), rgb(171, 98, 0), rgb(171, 98, 0), rgb(197, 113, 0));
        border: 1px solid rgb(171, 98, 0);
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        border-radius: 3px;
        padding: 10px 15px;
        margin-bottom: 20px;
        margin-top: -5px;
        font-size: 10pt;
        cursor: pointer;
        transition: background 0.1s ease-in-out;
        min-width: 100px;
        margin-Right: 5px;
    }

        .ButtonBack:hover, .ButtonBack:focus, .ButtonBack:active {
            color: white;
            text-decoration: none;
            background: rgb(171, 98, 0);
            background: linear-gradient(rgb(171, 98, 0),rgb(171, 98, 0),rgb(171, 98, 0),rgb(171, 98, 0));
        }

.ButtonCancel {
    color: white;
    background: rgb(229,66,91);
    border: none;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
    border-radius: 3px;
    padding: 10px 15px;
    margin-bottom: 20px;
    margin-top: -5px;
    font-size: 10pt;
    cursor: pointer;
    transition: background 0.1s ease-in-out;
    min-width: 100px;
    margin-Right: 5px;
    margin-left: 5px;
}

    .ButtonCancel:hover, .ButtonCancel:focus, .ButtonCancel:active {
        background: rgb(210, 57, 80);
    }

.ButtonCreateWorkOrder {
    color: white;
    background: rgb(26, 51, 130);
    background: linear-gradient(rgb(26, 51, 130), rgb(20, 38, 95),rgb(20, 38, 95), rgb(26, 51, 130));
    border: 1px solid rgb(20, 38, 95);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border-radius: 3px;
    padding: 10px 15px;
    margin-bottom: 20px;
    margin-top: -5px;
    font-size: 10pt;
    cursor: pointer;
    transition: background 0.1s ease-in-out;
    min-width: 100px;
    margin-Right: 5px;
}

    .ButtonCreateWorkOrder:hover, .ButtonCreateWorkOrder:focus, .ButtonCreateWorkOrder:active {
        background: rgb(20, 38, 95);
        background: linear-gradient(rgb(20, 38, 95),rgb(20, 38, 95),rgb(20, 38, 95),rgb(20, 38, 95));
    }

.hideColumnInMobile {
    display: table-cell;
}

@media(max-width:680px) {
    #imgLogoName {
        display: none;
    }

    #lblUserName, #lblShortUserName {
        font-size: 9pt;
    }

    .hideInMobile {
        display: none;
    }

    .hideColumnInMobile {
        display: none;
    }

    .ShowInMobile {
        display: inherit;
    }

    .HeaderDivContainer {
        padding: 0px 0px 0px 0px;
    }

    .HeaderDiv {
        border: none;
        border-radius: 0px;
        z-index: 10;
    }

    .RightHeaderDiv {
        margin-Left: 5px;
    }


    .TopMenuContainer {
        margin: 0;
        padding: 0 5px;
    }

    .TopMenuItem a {
        padding: 7px 5px;
    }

    .PendingMessagesNotifications {
        background-color: red;
        color: white;
        font-size: 7pt;
        position: absolute;
        left: 18px;
        top: 27px;
        padding: 1px 5px;
        border-radius: 15px;
    }

    .PendingNotifications {
        background-color: red;
        color: white;
        font-size: 7pt;
        position: absolute;
        left: 48px;
        top: 28px;
        padding: 1px 5px;
        border-radius: 15px;
    }

    #aLogo {
        margin-Left: 5pt;
    }

    .VerticalBar {
        position: absolute;
        Right: 0px;
        Left: 0px;
        width: 100%;
        padding-top: 0px;
        padding-Left: 0px;
        z-index: 10;
        display: none;
        overflow-y: auto;
    }

    .VerticalBarItemsContainer {
        background-color: white;
        margin: 0px 0px;
        border-top: none;
        border-Right: none;
        border-Left: none;
        box-shadow: none;
    }

    .PageContentsContainerDiv, .StaffPageContentsContainerDiv {
        left: 0px;
        right: 0px;
        bottom: 25px;
        padding-top: 0px;
        padding-right: 0px;
        padding-left: 0px;
        background-color: white;
        overflow-y: auto;
    }

    .PageContainerDiv {
        margin: 0px 0px;
        border: 0px solid rgb(244,246,248);
        box-shadow: none;
    }
    
    .PageTitleDiv {
        padding: 8px 10px;
        text-align: center;
    }

    .PageContentDiv {
        padding: 0px 10px;
    }

    .panel {
        margin-top: 10px;
    }

    td label {
        margin-Right: 0px;
        margin-Left: 5px;
    }

    #hlBackToHomePage {
        display: block;
        text-align: center;
        margin: 10px -5px 20px -5px;
    }
}

.LoginAreaFooter {
    position: fixed;
    bottom: 0px;
    Left: 0px;
    Right: 0px;
    background-color: white;
    z-index: 5;
    text-align: Left;
    font-size: 9pt;
    padding: 6.5px 15px;
    background-color: #213869;
    color: white;
    font-family: MyFontNormal,Tahoma;
}

#imgAgileFlows {
    float: right;
    height: 18px;
    width: 18px;
    margin-left: 5px;
}

#lblAgileFlows {
    color: #ddd;
    text-align: right;
    float: right;
    font-family: MyFontNormal,Tahoma;
    font-size: 10pt;
}

.table {
    font-size: 9pt;
    border: none;
}

    .table > tbody > tr > th > a {
        display: block;
        text-align: center;
        background: #3B3838;
        color: white;
        padding: 10px 5px;
        transition: background-color 0.1s ease-in-out;
    }

        .table > tbody > tr > th > a:hover {
            background: #474747;
            text-decoration: none;
        }

    .table > tbody > tr > th {
        padding: 0px;
        min-height: 35px;
        vertical-align: middle;
        border: 1px solid #ddd;
        background: #3B3838;
        height: 35px;
    }

.GridViewHeaderStyle {
    font-weight: bold;
    color: white;
    border: 1px solid #ddd;
    background-color: #2c4986;
    text-align: center;
    text-wrap: normal;
    word-wrap: break-word;
}

.GridViewHeaderStyle2 {
    font-weight: bold;
    color: white;
    border: 1px solid #ddd;
    background-color: #4663a0;
    text-align: center;
    text-wrap: normal;
    word-wrap: break-word;
}

.GridViewItemStyle {
    border: 1px solid #ddd;
    padding: 5px;
    vertical-align: middle;
}

.GridViewClickableID {
    cursor: pointer;
}

.GridViewIconButton {
    color: rgb(68, 67, 67);
    font-size: 12pt;
    cursor: pointer;
}

    .GridViewIconButton:hover {
        color: rgb(0, 0, 0);
    }

.GridViewIconButtonRed {
    color: red;
    font-size: 12pt;
    cursor: pointer;
}

    .GridViewIconButtonRed:hover {
        color: maroon;
    }

.GridViewIconButtonGreen {
    color: green;
    font-size: 12pt;
    cursor: pointer;
}

    .GridViewIconButtonGreen:hover {
        color: darkgreen;
    }

    .GridViewIconButton span, .GridViewIconButtonRed span, .GridViewIconButtonGreen span {
        border-radius: 50%;
        color: maroon;
        font-size: 10pt;
        font-weight: bold;
        font-family: Calibri;
        position: absolute;
        margin-top: -10px;
    }

.Row {
    background: white;
    transition: all 0.05s ease-in-out;
}

.AltRow {
    background: rgb(243, 249, 255);
    transition: all 0.05s ease-in-out;
}

.Row:hover {
    background: #f7f7f7;
}

.AltRow:hover {
    background: #f0f0f0;
}

.PagerStyle {
    /*display: inline-block;*/
    padding-Right: 0;
}

    .PagerStyle table > tbody > tr > td > a,
    .PagerStyle table > tbody > tr > td > span {
        padding: 0px 8px;
        text-decoration: none;
        color: #7d7974;
        background-color: #f5f5f5;
        margin: 3px;
        border-radius: 50px;
        transition: background-color 0.1s ease-in-out;
    }

    .PagerStyle table > tbody > tr > td > span {
        padding: 0px 8px;
        text-decoration: none;
        z-index: 2;
        color: white;
        background: rgb(109,179,242); /* Old browsers */
        background: -moz-linear-gradient(top, rgba(109,179,242,1) 0%, rgba(84,163,238,1) 50%, rgba(54,144,240,1) 51%, rgba(30,105,222,1) 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top, rgba(109,179,242,1) 0%,rgba(84,163,238,1) 50%,rgba(54,144,240,1) 51%,rgba(30,105,222,1) 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, rgba(109,179,242,1) 0%,rgba(84,163,238,1) 50%,rgba(54,144,240,1) 51%,rgba(30,105,222,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=0 ); /* IE6-9 */
        cursor: default;
        border-radius: 50px;
        transition: background-color 0.1s ease-in-out;
    }

    .PagerStyle table > tbody > tr > td > a:hover,
    .PagerStyle table > tbody > tr > td > a:focus {
        background: rgb(109,179,242); /* Old browsers */
        background: -moz-linear-gradient(top, rgba(109,179,242,1) 0%, rgba(84,163,238,1) 50%, rgba(54,144,240,1) 51%, rgba(30,105,222,1) 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top, rgba(109,179,242,1) 0%,rgba(84,163,238,1) 50%,rgba(54,144,240,1) 51%,rgba(30,105,222,1) 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, rgba(109,179,242,1) 0%,rgba(84,163,238,1) 50%,rgba(54,144,240,1) 51%,rgba(30,105,222,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=0 ); /* IE6-9 */
        color: white;
    }

.SelectAttachment {
    color: deepskyblue;
    background-color: white;
    border: 1.5px dashed lightgray;
    font-size: 10pt;
    padding: 5px 10px;
    border-radius: 5px;
    display: block;
    text-align: center;
    transition: all 0.1s ease-in-out;
    cursor: pointer;
}

    .SelectAttachment i {
        font-size: 14pt;
        margin-left: 5px;
    }

.upload-btn {
    position: relative
}

    .upload-btn:has(.drop-input:hover) .SelectAttachment {
        border: 1.5px dashed deepskyblue;
        background: #f0f7ff; /* any highlight you like */
    }

.drop-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 2;
    cursor: pointer; /* stays clickable & droppable */
}

/* Active drag state (applies to the visible container) */
.SelectAttachment.drag {
    cursor: copy; /* pointer cursor */
    border: 1.5px dashed deepskyblue;
    background: #f0f7ff; /* any highlight you like */
}

.AttachmentIcon {
    color: rgb(0, 164, 255);
    background-color: rgb(234, 248, 255);
    border: 1px solid rgb(0, 164, 255);
    font-size: 12pt;
    padding: 5px 10px;
    border-radius: 3px;
    display: block;
    text-align: center;
    transition: all 0.1s ease-in-out;
    cursor: pointer;
}

    .AttachmentIcon:hover {
        color: rgb(0, 164, 255);
        background-color: rgb(207, 238, 255);
    }

.RemoveAttachmentIcon {
    color: maroon;
    background-color: rgb(255, 239, 239);
    border: 1px solid rgb(255, 0, 0);
    font-size: 12pt;
    padding: 5px 10px;
    border-radius: 3px;
    display: block;
    text-align: center;
    transition: all 0.1s ease-in-out;
}

    .RemoveAttachmentIcon:hover {
        color: maroon;
        background-color: rgb(255, 207, 207);
    }

.panel-heading > a {
    color: black;
    text-decoration: none;
}

.DeleteCommandCls {
    color: maroon;
    cursor: pointer;
    text-decoration: none;
}

    .DeleteCommandCls:hover {
        color: red;
    }

.DeleteCommandButtonCls {
    display: inline-block;
    color: white;
    background: rgb(229,66,91);
    border: none;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
    border-radius: 3px;
    padding: 5px 7.5px;
    position: relative;
    font-size: 10pt;
    cursor: pointer;
    transition: background 0.1s ease-in-out;
}

    .DeleteCommandButtonCls:hover, .DeleteCommandButtonCls:focus, .DeleteCommandButtonCls:active {
        background: rgb(210, 57, 80);
        color: white;
        text-decoration: none;
    }

.MoveUpCommandCls {
    color: rgb(52, 206, 65);
    padding: 0px 5px;
}

    .MoveUpCommandCls:hover {
        color: rgb(40, 160, 50);
    }

.MoveDownCommandCls {
    color: rgb(206, 52, 52);
    padding: 0px 5px;
}

    .MoveDownCommandCls:hover {
        color: rgb(160, 40, 40);
    }

.FloatingPanel {
    float: right;
    width:100%;
    margin-top: 0px;
}

.CategoryDiv {
    text-align: center;
    padding: 15px 5px;
    background-color: white;
    border: 1px solid rgb(171, 171, 171);
    border-radius: 5px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    transition: all 0.15s ease-in-out;
    cursor: pointer;
    height: 110px;
    color: dimgray;
    font-weight: normal;
}

    .CategoryDiv:hover {
        transform: scale(1.05);
        border: 1px solid black;
        color: black;
    }

    .CategoryDiv i {
        font-size: 20px;
        width: 50px;
        height: 50px;
        padding-top: 14px;
        background: linear-gradient(to bottom, rgb(103, 153, 255), rgb(68, 130, 255),rgb(31, 90, 210));
        border: 1px solid rgb(31, 90, 210);
        color: white;
        border-radius: 50%;
        margin-bottom: 5px;
    }

    .CategoryDiv:hover i {
        border: 1px solid black;
    }

    .CategoryDiv > label {
        font-size: 9pt;
    }

.CloseModalButton {
    background-color: maroon;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border: none;
    color: white;
    width: 25px;
    height: 25px;
    padding: 0px 2px 2px 2px;
    border-radius: 3px;
    transition: all 0.1s ease-in-out;
    float: Left;
    font-size: 14pt;
    font-weight: bold;
    font-family: MyFontNormal,Tahoma;
    line-height: 10pt;
}

    .CloseModalButton:hover {
        background-color: red;
    }

.modal-header {
    background: #213869;
    border-top-Left-radius: 5px;
    color: white;
    font-family: MyFontNormal,Tahoma;
    font-size: 10pt;
    font-weight: bold;
    line-height: 18pt;
}

.CheckBoxClass {
    cursor: pointer;
}

.UserClickedID {
    color: black;
}

.GridViewColorValueDiv {
    width: 100%;
    height: 18px;
    border-radius: 2px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
}

.IconOptionClass {
    display: inline-block;
    font-size: 12pt;
    width: 35px;
    padding: 3px;
    border: 1px solid black;
    color: black;
    border-radius: 2px;
    text-align: center;
    margin: 5px;
    transition: all 0.05s ease-in-out;
    cursor: pointer;
}

    .IconOptionClass:hover {
        color: white;
        background-color: dimgray;
    }

.AccountHistoryWarning {
    display: inline-block;
    font-size: 9pt;
    padding: 3px 5px;
    border: 1px solid red;
    color: red;
    border-radius: 2px;
    text-align: center;
    transition: all 0.05s ease-in-out;
    cursor: pointer;
    margin-bottom: 5px;
    text-decoration: none !important;
    float:left;
}

    .AccountHistoryWarning:hover {
        color: white;
        background-color: red;
        border: 1px solid maroon;
    }

.IconOptionClassSelected {
    display: inline-block;
    font-size: 12pt;
    width: 35px;
    padding: 3px;
    background: linear-gradient(to bottom, rgb(103, 153, 255), rgb(68, 130, 255),rgb(31, 90, 210));
    color: white;
    border: 1px solid rgb(31, 90, 210);
    border-radius: 2px;
    text-align: center;
    margin: 5px;
    transition: all 0.05s ease-in-out;
    cursor: default;
}

    .IconOptionClassSelected:hover {
        background: linear-gradient(to bottom, rgb(103, 153, 255), rgb(68, 130, 255),rgb(31, 90, 210));
        color: white;
        border: 1px solid rgb(31, 90, 210);
    }

#divIcons {
    border: 1px solid #ddd;
    padding: 10px;
}

#divExportButtons {
    float: left;
}

.ExportButtonsContainer {
    float: right;
}

.HeadManibulationButton {
    width: 25px;
    margin-right: 2px;
    opacity: 0.65;
    transition: all 0.1s ease-in-out;
}

    .HeadManibulationButton:hover {
        opacity: 1;
        transform: scale(1.25);
    }

.ManibulationButton {
    width: 20px;
    margin-left: 2px;
    transition: all 0.1s ease-in-out;
    margin: 0px;
    float: left;
}

@media Print {
    body * {
        visibility: hidden;
    }

    .PageContentsContainerDiv, .PageContentsContainerDiv * {
        visibility: visible;
    }

    .PageContentsContainerDiv {
        position: inherit;
        overflow-y: unset;
        z-index: -1;
    }

    .DoNotPrint {
        display: none;
    }
}

.ListViewItemDiv {
    padding: 5px;
    margin: 3px 0px;
    background-color: rgb(234, 248, 255);
    border: 1px solid #ddd;
    border-radius: 3px;
}

    .ListViewItemDiv input {
        cursor: pointer;
    }

.SystemPagePermissionsButton {
    display: block;
    padding: 3px;
    font-size: 9pt;
    text-align: center;
    color: black;
    text-decoration: none;
    background: rgb(157,213,58); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(157,213,58,1) 0%, rgba(161,213,79,1) 50%, rgba(128,194,23,1) 51%, rgba(124,188,10,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(157,213,58,1) 0%,rgba(161,213,79,1) 50%,rgba(128,194,23,1) 51%,rgba(124,188,10,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(157,213,58,1) 0%,rgba(161,213,79,1) 50%,rgba(128,194,23,1) 51%,rgba(124,188,10,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#7cbc0a',GradientType=0 ); /* IE6-9 */
    border-radius: 3px;
    border: 1px solid rgba(124,188,10,1);
}

    .SystemPagePermissionsButton:hover {
        color: black;
        background: rgb(157,213,58);
        text-decoration: none;
    }

.ColoredLabel {
    display: block;
    padding: 2px 5px;
    border-radius: 3px;
    color: white;
    border: 1px solid #ddd;
}

.HomePageOptionContainer {
    margin: 0px 0px 15px 0px;
    display: inline-block;
}

    .HomePageOptionContainer > a > i {
        font-size: 22px;
        padding: 15px 0px;
        color: white;
        border-radius: 10px;
        text-align: center;
        z-index: 1;
        display: block;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.35);
        transition: all 0.1s ease-in-out;
        cursor: pointer;
        border: solid 1px rgb(243, 243, 243);
    }

    .HomePageOptionContainer > a > div {
        font-family: MyFontNormal,Tahoma;
        font-size: 8pt;
        font-weight: bold;
        text-align: center;
        color: rgb(20, 20, 20);
        z-index: 0;
        display: block;
        margin-top: 10px;
        cursor: pointer;
    }

    .HomePageOptionContainer > a:hover {
        text-decoration: none;
    }

        .HomePageOptionContainer > a:hover > i {
            transform: scale(1.1);
        }

.GreenBackground > a > i {
    background-color: rgb(6, 118, 97);
}

.GreenBackground > a > div {
    background: rgb(30, 185, 93); /* Old browsers */
}

.GreenBackground > a:hover > div {
    background: rgb(36, 214, 94); /* Old browsers */
}

.BlueBackground > a > i {
    background: #213869; /* Old browsers */
}

.RedBackground > a > i {
    background-color: rgb(118, 6, 6);
}

.RedBackground > a > div {
    background: rgb(185, 30, 30); /* Old browsers */
}

.RedBackground > a:hover > div {
    background: rgb(214, 36, 36); /* Old browsers */
}

.PurpleBackground > a > i {
    background-color: rgb(72, 6, 118);
}

.PurpleBackground > a > div {
    background: rgb(96, 30, 185); /* Old browsers */
}

.PurpleBackground > a:hover > div {
    background: rgb(127, 36, 214); /* Old browsers */
}

.YellowBackground > a > i {
    background-color: rgb(109, 118, 6);
}

.YellowBackground > a > div {
    background: rgb(185, 172, 30); /* Old browsers */
}

.YellowBackground > a:hover > div {
    background: rgb(214, 199, 36); /* Old browsers */
}