body {
}

#MenuSideBar {
    background-color: #00008b;
    direction: rtl;
    font-size: 12px;
    color: #fff;
    float: right;
    border-left: 1px solid #c4d0e3;
    background-color: #f4f8fc;
    
}
#SubMenuSlideBar {
    background-color: #f4f8fc;
    width: 0px;
    border-left: 1px solid #d3d3d3;
    position: absolute;
    z-index: 200;
    text-decoration: none;
    
    
}
    #SubMenuSlideBar a {
        color: #03387d;
        text-decoration: none;
    }
        #SubMenuSlideBar a:hover {
            color: #17bfff;
            text-decoration: none;
        }

    #SubMenuSlideBar div:first-child {
        float: right;
        width: 200px;
        height: 60px;
        padding-top: 15px;
        opacity: 0;
       
      
    }
    #SubMenuSlideBar div div:first-child {
        border: 1px solid #032f7d;
        float: right;
        margin-right: 15px;
        width: 140px;
        height: 30px;
        border-radius: 2px;
        padding: 4px 5px 4px 5px;
        color: #03327d;
        font-size: 13px;
        font-weight: bold
    }
    #SubMenuSlideBar div div:nth-of-type(2) {
        border: 1px solid #032f7d;
        float: left;
        margin-left: 15px;
        width: 28px;
        height: 30px;
        border-radius: 2px;
        padding: 3px 6px 3px 0px;
        background-color: #c4d0e3;
        cursor: pointer
    }
        #SubMenuSlideBar div div:nth-of-type(2):hover {
            background-color: #fff;
        }


    #SubMenuSlideBar div:last-child {
        width: 200px;
        float: right;
        padding: 5px;
        height: auto;
        font-size: 12px
    }
.SubMenuSlide {
    display: none
}


#MainBody {
    float: right;
    padding: 0px
}

.MenuSideBarText {
    height: 20px;
    width: 100%;
    float: right;
}

.MenuSideBarImage {
    height: 30px;
    width: 100%;
    float: right;
}

@media screen and (min-width:1150px) {
    #MenuSideBar {
        width: 8%;
        display: block;
    }

    .MenuSideBarText {
        display: block;
    }

    .MenuSideBar {
        padding: 10px 0px 10px 0px;
    }

    .MenuSideBarActive {
        padding: 10px 0px 10px 0px;
    }

    .MenuSideBarImage {
        height: 30px;
    }

    #MainBody {
        width: 92%
    }
}

@media screen and (max-width:1150px) and (min-width:1000px) {
    #MenuSideBar {
        width: 10%;
        display: block;
    }

    .MenuSideBarText {
        display: block;
    }

    .MenuSideBar {
        padding: 10px 0px 10px 0px;
    }

    .MenuSideBarActive {
        padding: 10px 0px 10px 0px;
    }

    .MenuSideBarImage {
        height: 30px;
    }



    #MainBody {
        width: 90%
    }
}

@media screen and (max-width:1000px) and (min-width:850px) {
    #MenuSideBar {
        width: 12%;
        display: block;
    }

    .MenuSideBarText {
        display: block;
    }

    .MenuSideBar {
        padding: 10px 0px 10px 0px;
    }

    .MenuSideBarActive {
        padding: 10px 0px 10px 0px;
    }

    .MenuSideBarImage {
        height: 30px;
    }



    #MainBody {
        width: 88%
    }
}

@media screen and (max-width:850px) and (min-width:670px) {
    #MenuSideBar {
        width: 15%;
        display: block;
    }

    .MenuSideBarText {
        display: block;
    }

    .MenuSideBar {
        padding: 10px 0px 10px 0px;
    }

    .MenuSideBarActive {
        padding: 10px 0px 10px 0px;
    }

    .MenuSideBarImage {
        height: 30px;
    }



    #MainBody {
        width: 85%
    }
}

@media screen and (max-width:670px) and (min-width:550px) {
    #MenuSideBar {
        width: 6%;
        display: block;
    }

    .MenuSideBarText {
        display: none;
    }

    .MenuSideBar {
        padding: 0px;
    }

    .MenuSideBarActive {
        padding: 0px;
    }

    .MenuSideBarImage {
        height: auto;
    }

    #MainBody {
        width: 94%
    }
}

@media screen and (max-width:550px) and (min-width:400px) {
    #MenuSideBar {
        width: 9%;
        display: block;
    }

    .MenuSideBarText {
        display: none;
    }

    .MenuSideBar {
        padding: 0px;
    }

    .MenuSideBarActive {
        padding: 0px;
    }

    .MenuSideBarImage {
        height: auto;
    }

    #MainBody {
        width: 91%
    }
}

@media screen and (max-width:400px) {
    #MenuSideBar {
        display: none;
    }

    .MenuSideBarText {
        display: none;
    }

    #MainBody {
        min-width: 100%;
    }
}

.MenuSideBarActive {
    padding: 10px 0px 10px 0px;
    width: 100%;
    float: right;
    text-align: center;
    background-color: #032f7d;
    border: 1px solid #cdd5e5;
    border-right: 3px solid #10beff;
    color: #fff;
}

    .MenuSideBarActive a {
        text-decoration: none;
        color: #fff;
    }
    
.MenuSideBar {
    padding: 10px 0px 10px 0px;
    width: 100%;
    float: right;
    text-align: center
}

    .MenuSideBar:hover {
        background-color: #032f7d;
        border: 1px solid #cdd5e5;
        border-right: 3px solid #10beff;
        color: #fff;
    }

    .MenuSideBar a {
        color: #032f7d;
        text-decoration: none
    }

    .MenuSideBar:hover a {
        color: #fff;
        text-decoration: none
    }

.imgMnuHover {
    display: none;
}

.MenuSideBar:hover .imgMnu {
    display: none;
}

.MenuSideBar:hover .imgMnuHover {
    display: block;
}





footer {
    border-top: 1px solid #cdd5e5;
    text-align: right;
    height: 25px;
    padding: 4px 10px 4px 10px;
    float: right;
    width: 100%
}

.FootCopyRight {
    float: right;
    font-size: 11px
}

main {
    float: right;
    width: 100%
}

.p0 {
    padding: 0px
}

.txtRight {
    text-align: right
}

#HeadTop {
    float: right;
    width: 100%;
    border-bottom: 1px solid #cdd5e5;
    height: 40px;
    padding: 5px;
    background-color: #f4f8fc
}

#Title {
    float: right;
    width: 100%;
    border-bottom: 1px solid #cdd5e5;
    height: 40px
}

#UserNameDiv {
    float: right;
    padding: 4px;
    color: #133c85;
    font-size: 15px;
}

#UserOutDiv {
    margin-left: 5px;
    float: left;
    padding: 4px;
    color: #133c85;
    font-size: 15px;
}

    #UserOutDiv a {
        text-decoration: none;
        color: #133c85
    }

#UserOutImg {
    margin-left: 5px;
    float: left;
}

    #UserOutImg img {
        width: 24px;
        height: 20px;
        margin-top: 5px
    }

#UserImg {
    float: right;
}

    #UserImg img {
        width: 30px;
        height: 30px;
    }

#WorkingTitle {
    float: right;
    width: 145px;
    padding: 10px;
    border-left: 1px solid #cdd5e5;
    font-size: 14px;
    text-align: right;
    color: #0c1f40;
    height: 40px;
}

    #WorkingTitle img {
        width: 15px;
        height: 16px
    }

    #WorkingTitle span {
        padding-right: 10px;
    }

#IconTitle {
    float: left;
    padding: 8px;
}

    #IconTitle img {
        cursor: pointer
    }

#UploadDiv {
    background-color: #f7f7f7;
    padding: 6px;
    width: 130px;
    color: #c3c3c3;
    font-size: 13px;
    margin-top: 3px;
    cursor: pointer
}

    #UploadDiv img {
        width: 19px
    }

.hide {
    display: none
}

.btn-Update {
    background-color: #032f7d;
    min-height: 37px;
}

.btn-Delete {
    background-color: #a71313;
    min-height: 37px;
}

.btn-Insert {
    background-color: #2b660e;
    min-height: 37px;
}

.btn-Close {
    background-color: #525252;
    min-height: 37px;
}

.borderradius2 {
    border-radius: 2px
}

#imgPreview {
    width: 130px;
    max-height: 100px
}

#MainPage {
    height: auto;
    font-size: 15px;
    color: #14177b;
    float: right;
    margin-top: 50px;
    padding: 20px;
}

@media screen and (min-width:1200px) {
    #MainPage {
        width: 35%
    }
}

@media screen and (max-width:1200px) and (min-width:900px) {
    #MainPage {
        width: 50%
    }
}

@media screen and (max-width:900px) and (min-width:600px) {
    #MainPage {
        width: 70%
    }
}

@media screen and (max-width:600px) {
    #MainPage {
        width: 100%
    }
}

#TitlePage {
    text-align: right;
    float: right;
    width: 100%;
    border-bottom: 1px solid #cdd5e5;
    padding: 15px 15px 10px 15px;
    background-color: #f7f7f7;
}

    #TitlePage div {
        float: right
    }

    #TitlePage .TitlePageText {
        margin-top: 2px;
        margin-right: 7px;
    }

    #TitlePage a {
        float: left;
        background-color: #d6deeb;
        font-size: 15px;
        color: #032f7d;
        border: 1px solid #d6deeb;
        font-weight: bold;
        margin-right: 2px;
    }

        #TitlePage a img {
            width: 18px
        }

.a-Remove {
    padding-right: 8px !important;
    padding-left: 8px !important;
}

#TitlePage a span {
    padding-right: 5px
}

.WidthFloat {
    width: 100%;
    float: right
}

#MainUserList {
    width: 100%;
    float: right;
    padding: 10px
}

#SearchBox {
    width: 100%;
    float: right
}

#SearchBoxTitle {
    width: 100%;
    float: right;
    border: 1px solid #cdd5e5;
    border-top: 3px solid #10beff;
    padding: 7px 7px 4px 7px;
    margin-top: 25px;
    background-color: #fafafa
}

#SearchBoxBody {
    width: 100%;
    float: right;
    border: 1px solid #cdd5e5;
    color: #032f7d;
    height: auto;
    padding: 7px
}
#MapBox {
    width: 100%;
    float: right;
    margin-top: 20px;
    border-right: 3px solid #032f7d;
    color: #032f7d;
    font-size: 14px;
    font-weight: bold;
}
#MapBox a {
    text-decoration: none;
    color: #032f7d;
}
#MapBox a:hover {
    text-decoration: none;
    color: #032f7d;
}
.txtPanel {
    border: 1px solid #d9d9d9;
    width: 99%;
    padding: 7px;
    outline: none
}

.txtPanel:focus {
    border-right: 3px solid #10beff;
}
.txtPanelLeft {
    border: 1px solid #d9d9d9;
    width: 100%;
    padding: 7px;
    outline: none;
    text-align: left;
}

.txtLeft {
    text-align: left;
}
.txtPanelLeft:focus {
    border-left: 3px solid #10beff;
}

.dropPanel {
    border: 1px solid #d9d9d9;
    width: 99%;
    padding: 6px 7px 4px 7px;
    outline: none
}

.dropPanel:focus {
    border-right: 3px solid #10beff;
}
.birthPanel {
    border: 1px solid #d9d9d9;
    width: 99%;
    padding: 6px 7px 6px 7px;
    outline: none
}

.BirthPanel:focus {
        border-right: 3px solid #10beff;
    }

#SearchBoxBody table {
    width: 100%;
    float: right;
    font-size: 14px
}

.m20 {
    margin-top: 20px
}

.m10 {
    margin-top: 10px
}

.font15 {
    font-size: 15px;
}

.font14 {
    font-size: 14px;
}

.width100 {
    width: 100%
}

.TableBox {
    overflow: auto;
    font-size: 14px;
    color: #878787;
    margin-top: 20px;
    width: 100%;
    float: right;
    padding-bottom: 20px;
}

.tbl {
    text-align: center;
    border-bottom: 1px solid #e3e1e1;
    border-left: 1px solid #e3e1e1;
    width: 100%;
}

    .tbl tr:first-of-type {
        background-color: #f9fbfd;
        border: 1px solid #e6eaf2;
        color: #032f7d;
        font-size: 15px;
        text-align: center;
        font-weight: bold
    }

    .tbl tr label:first-of-type {
        padding-top: 8px
    }

    .tbl tr:nth-of-type(2n+1) {
        background-color: #fafbfd;
    }

    .tbl tr:nth-child(n+2) td {
        border-right: 1px solid #e3e1e1;
        padding: 5px 0px 5px 0px
    }

    .tbl tr:nth-child(n+2):hover {
        background-color: #f3fcff;
        color: #333;
    }

.tbl-btn div {
    width: 32px;
    height: 32px;
    background-color: #eaeaea;
    border: 1px solid #d5d5d5;
    border-radius: 3px;
    margin-right: 5px
}

.Checked {
    background-color: #032f7d !important;
}

    .Checked img {
        display: block !important;
    }

.tbl-btn div img:nth-child(2) {
    display: none
}

.tbl-btn div:hover img:nth-child(2) {
    display: block
}

.tbl-btn div:hover img:nth-child(1) {
    display: none
}

.tbl-btn div:hover {
    background-color: #fcfdfe;
}

.paging {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

    .paging li {
        float: right;
        border: 1px solid #e3e1e1;
        cursor: pointer;
        border-radius: 1px;
    }

        .paging li a {
            color: #525252;
            text-decoration: none;
        }

    .paging .active {
        color: white;
        text-decoration: none;
        background-color: #17abd1;
        border: 1px solid #3dc1e3;
        border-radius: 1px;
    }

        .paging .active:hover {
            color: white;
            text-decoration: none;
            background-color: #17abd1;
            border: 1px solid #3dc1e3;
        }

    .paging li:hover {
        color: #2b2f37;
        text-decoration: none;
        background-color: #e3e3e3;
    }

    .paging div {
        text-align: center;
        padding: 6px 0px 6px 0px;
        width: 33px;
    }

#TitleBox {
    background-color: #032f7d;
    color: #fff;
    text-align: right;
    padding: 8px;
    border: 1px solid #959595;
    width: 100%;
    margin-top: 30px;
    float: right;
    font-size: 14px
}

.ck-content {
    height: 300px;
}

.W-33 {
    padding: 0px;
    float: right;
    margin-top: 8px;
}
.W-25 {
    padding: 0px;
    float: right;
    margin-top: 8px;
}
.W-50 {
    padding: 0px;
    float: right;
    margin-top: 8px;
}
.W-75 {
    padding: 0px;
    float: right;
    margin-top: 8px;
}
.W-20 {
    padding: 0px;
    float: right;
    margin-top: 8px;
}
.W-100 {
    padding: 0px;
    float: right;
    margin-top: 8px;
    width: 100%;
   
   
}
.WC-26 {
    padding: 0px;
    float: right;
    margin-top: 8px;
}
.WC-40 {
    padding: 0px;
    float: right;
    margin-top: 8px;
}
.WC-50 {
    padding: 0px;
    float: right;
    margin-top: 8px;
}
.WC-76 {
    padding: 0px;
    float: right;
    margin-top: 8px;
}

@media screen and (min-width:600px) {
    .W-33 {
        width: 33%
    }
    .W-25 {
        width: 25%
    }
    .WC-26 {
        width: 26%;
        margin-right: 37%;
    }
    .WC-40 {
        width: 40%;
        margin-right: 30%;
    }
    .W-50 {
        width: 50%
    }
    .WC-50 {
        width: 50%;
        margin-right: 25%;
    }
    .W-20 {
        width: 20%
    }
    .W-75 {
        width: 75%
    }
    .WC-76 {
        width: 76%;
        margin-right: 12%;
    }
    .NPL-5 {
        padding-left: 5px
    }
}
@media screen and (max-width:600px) {

    .W-33 {
        width: 100%
    }

    .W-25 {
        width: 100%
    }
    .WC-26 {
        width: 100%;
        margin-right: 0%;
    }
    .WC-40 {
        width: 100%;
        margin-right: 0%;
    }
    .W-50 {
        width: 100%
    }
    .WC-50 {
        width: 100%;
        margin-right: 0%;
    }
    .W-20 {
        width: 100%
    }

    .W-75 {
        width: 100%
    }
    .WC-76 {
        width: 100%;
        margin-right: 0%;
    }
    .NPL-5 {
        padding-left: 0px
    }
}




.HeaderTitle {
    width: 100%;
    float: right;
    margin-top: 20px
}
.HeaderTitle div {
    width: 100%;
    float: right;
    border: 1px solid #eee;
    border-right: 3px solid #23b7f3;
    background-color: #f5fcff;
    padding: 9px;
    border-radius: 2px;
    font-size: 14px;
}
.HeaderBodyOdd {
    width: 100%;
    float: right;
    border-bottom: 1px solid #eee;
    padding: 7px;
    padding-bottom: 20px;
    font-size: 13px;
    color: #0e2a7e;
    font-weight: bold
}
.HeaderBodyEven {
    width: 100%;
    float: right;
    border-bottom: 1px solid #eee;
    padding: 7px;
    padding-bottom: 20px;
    font-size: 13px;
    color: #0e2a7e;
    font-weight: bold;
    background-color: #fafafa
}

.Tabcontrol {
    width: 160px;
    border-left: 1px solid #cdd5e5;
    height: 40px;
    font-size: 14px;
    text-align: center;
    padding-top: 10px;
    cursor: pointer;    
    float: right
}
.Tabcontrol:hover {    
    padding-top: 7px;    
    border-top: 3px solid #17bfff;
   
}

.TabcontrolActive {
    width: 160px;
    border-left: 1px solid #cdd5e5;
    height: 39px;
    font-size: 14px;
    text-align: center;
    padding-top: 7px;
    cursor: pointer;
    float: right;
    border-top: 3px solid #17bfff;
    background-color: #f4f8fc
}
.TabPageActive {
    width: 100%;
    float: right;
}

.TabPage {
    width: 100%;
    float: right;
    display:none
}

.GalleryDoc {
    cursor: pointer;
    text-align: center;
    
    padding: 5px;
   position: relative
    

}
.GalleryBorder {
    border: 1px solid #dfdfdf;
    background-color: #fcfcfc;
    width: 100%;
    float: right
}
.GalleryDoc div > a:first-child > img {
    width: 55%;
}
.GalleryDoc div:nth-child(3) {
    background-color: #f2f2f2;
    padding: 5px;
    text-align: center
}
    .GalleryDoc div:nth-child(3) > img {
        border: 1px solid #ccc;
        background-color: #fff;
        padding: 1px 2px 1px 2px;
        border-radius: 2px;
        width: 29px;

    }
.ImgGallery {
        max-width: 88px;
    }
.btn {
    cursor: pointer
}