@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');


html, body {
    font-family: 'Tahoma', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 90%;
}

.arabicfont {
    font-family: 'Tahoma', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.meter {
    height: 4px;
    position: relative;
    background: #f3efe6;
    overflow: hidden;
}

    .meter span {
        display: block;
        height: 100%;
    }

.progress {
    /*background-color: #e4c465;*/
    background-color: orange;
    animation: progressBar 3s ease-in-out;
    animation-fill-mode: both;
}

@keyframes progressBar {
    0% {
        width: 0;
    }

    100% {
        width: 100%;
    }
}

.nav-item a.active::before {
    content: "|";
    /*margin-right: 1em;*/
    margin-left: 1em;
    background-color: orange;
    color: orange;
}


/*a {
    color: orange;
}
a:hover {
        color: orangered;
}*/

/*.sidebar .nav-item {
    font-size: 0.9rem;
    padding-bottom: 0rem;
}

    .sidebar .nav-item:first-of-type {
        padding-top: 0rem;
    }

    .sidebar .nav-item:last-of-type {
        padding-bottom: 0rem;
    }


.sidebar {
    padding-left:0;
}


.content {
    padding-top:  0rem;
}*/

ul.components {
    padding: 0;
}


div.MyLine {
    background-color: orange;
    width: 200px;
    height: 2px;
    border: 0;
}

div.MyLine4 {
    background-color: orange;
    width: 400px;
    height: 2px;
    border: 0;
}


hr.newHr {
    border-top: 1px solid orangered;
}


.red {
    /*background-color: orangered;
    color:orangered;*/
    background-color: orange;
    color: orange;
}


/*
    .Newline {
    border-bottom: 2px solid orange;
    padding-bottom: 16px;
    white-space: pre;
}*/

/*.Newline:after {
        content: "\00a0 \00a0 \00a0 \00a0";
    }*/


/*a {
    border-bottom: 1px solid orange;
    padding-bottom: 5px;
}

.navbar {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    border: 0 !important;
}

.sidebar {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    border: 0 !important;
}*/


/*.MyUnderLine {
    border-bottom: 2px solid orange;
    padding-bottom: 20px;
    width :auto;
}*/


/* ========== Search Form =========================*/

/* ========== Search Form =========================*/


/* ========== sidebar  i disable this as i found this in NavMenu.Razor.css =========================*/
/* ========== sidebar  i disable this as i found this in MainLayout.razor.css =========================*/

.sidebar {
    /*background-image: linear-gradient(to right, rgba(20,25,53,1), rgba(20,25,53, .9));*/
    /*background-image: linear-gradient(to right, rgba(20,25,53,1), rgba(20,25,53, .9));*/
    /*background-color: rgba(20,25,53, .9);*/
    /*border-bottom: 2px solid orange;*/
    /* background-image: linear-gradient(to right, #fc4a1a, #f7b733)*/
}

.mySidebar {
    /*background-image: linear-gradient(to right, rgba(20,25,53,1), rgba(20,25,53, .9));*/
    /*background-image: linear-gradient(to right, rgba(20,25,53,1), rgba(20,25,53, .9));*/
    background-color: rgba(20,25,53, .8);
    /*border-bottom: 2px solid orange;*/
    /*background-image: linear-gradient(to right, #fc4a1a, #f7b733)*/
}

.myDarkColor {
    background-color: rgba(20,25,53, .8);
    color: orange;
    border-bottom: 2px solid orange;
    border-bottom-color: orange;
}

/*.myDarkColor {
    background-color: rgba(20,25,53, .8);
    color: orange;
    border-bottom: 2px solid orange;
    border-bottom-color: orange;
}*/

.myGrayColor {
    background-color: lightgray;
    color: black;
    padding: 2px 2px 2px 2px;
}

.myCenter {
    margin: 0 auto;
    display: block;
    align-content: center;
}
/* ========== sidebar =========================*/

/* ========== MyTop-row =========================*/
.MyTop-row {
    margin: 0 auto;
    display: block;
    align-content: center;
    background-color: rgba(20,25,53, .8);
    border-bottom: 2px solid orange;
    justify-content: flex-end;
    height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

    .MyTop-row > a, .main .top-row .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        color: white;
    }

/* ========== MyTop-row  end =========================*/

/* ========== top-row =========================*/

.main .top-row {
    background-color: rgba(20,25,53, .8);
    border-bottom: 2px solid orange;
    justify-content: flex-end;
}

    .main .top-row > a, .main .top-row .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        color: white;
    }



/* ========== top-row =========================*/

.orangeBottomBorder {
    border-bottom: 2px solid orange;
    /*border-bottom: 2px solid blue;*/
    /*border-bottom: 2px solid rgba(248, 148, 6, .8);*/
    /*border-left: 2px solid orange;*/
}



/*

.banner-area {
    background: url(../img/bg.jpg) right;
    background-size: cover
}

    .banner-area .overlay-bg {
        background-color: rgba(4,9,30,0.8)
    }

.banner-content {
    text-align: left
}

    .banner-content h1 {
        font-size: 48px;
        font-weight: 700;
        line-height: 1em;
        margin-top: 10px;
        color: #fff
    }*/



.right {
    direction: rtl;
    text-align: right;
}



.left {
    direction: ltr;
    text-align: left;
}

.nopadding {
    padding: 0 !important;
    margin: 0 !important;
}


.ImageCenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}

.parallax {
    /* The image used */
    background-image: url("../img/02.jpg");
    /*background: url(../img/02.jpg);*/
    width: 100%;
    /* Full height */
    /*height: 100%;*/
    height: 260px;
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}


.highlighted {
    /*background-color: rgba(255,69,0, .6);*/
    /*background-color: transparent;*/
    /*background-color: rgba(155,155,155, .4);*/
    background-color: rgba(255,69,0, .8);
    color: white;
    padding: 8px;
}


.lavenderhighlighted {
    /*background-color: rgba(255,69,0, .6);*/
    /*background-color: transparent;*/
    /*background-color: rgba(155,155,155, .4);*/
    /*Lavender color. #e6e6fa*/
    background-color: rgba(230,230,250, .8);
    color: black;
    padding: 8px;
}



.myBtn {
    /*background: rgba(255, 45, 0, .9);*/
    /*background: rgba(20,25,53, .8);*/
    background: rgba(248, 148, 6, 1);
    border: 1px solid #ffffff;
    /*border-radius: 4px;*/
    color: #ffffff;
    /*color:orange;*/
    /*font-size: 15px;*/
    /*font-weight: bold;*/
    letter-spacing: 0px;
    padding: 4px 16px;
    /*margin-top: 4px;*/
    margin-right: 4px;
    transition: all 0.4s ease-in-out;
}

.myBtnNew {
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 0px;
    padding: 8px 32px;
    margin-top: 4px;
    margin-right: 2px;
    transition: all 0.8s ease-in-out;
}


.myBtnSearch {
    background: rgba(248, 148, 6, 1);
    border: 1px solid #ffffff;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 0px;
    padding: 4px 16px;
    margin-top: 0px;
    margin-right: 0px;
    transition: all 0.8s ease-in-out;
}


/* ==========================================================================
my button old CSS Begin
========================================================================== */


.myBtnSmall {
    background: rgba(255, 45, 0, .9);
    border: 1px solid #ffffff;
    border-radius: 4px;
    color: #ffffff;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 0px;
    padding: 4px 12px;
    margin-top: 2px;
    margin-right: 4px;
    transition: all 0.4s ease-in-out;
}

.myBtn {
    background: rgba(255, 45, 0, .9);
    border: 1px solid #ffffff;
    border-radius: 4px;
    color: #ffffff;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 0px;
    padding: 12px 42px;
    margin-top: 20px;
    margin-right: 16px;
    transition: all 0.4s ease-in-out;
}


.myBtnLarge {
    background: transparent;
    border: 1px solid #ffffff;
    border-radius: 0;
    color: #ffffff;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 0px;
    padding: 12px 42px;
    margin-top: 40px;
    margin-right: 16px;
    height: auto;
    transition: all 0.4s ease-in-out;
}

.myBtn:hover {
    background: #ff4500;
    /* border-color: transparent; */
    border-color: #444444;
}

/* ======================================== */
.myBtn-link {
    background: #ffffff;
    border: 1px solid #ff4500;
    border-radius: 4px;
    color: #ff4500;
    width: 140px;
    /*padding-bottom: 4px;*/ myBtn-Navlink
}

    .myBtn-link:hover {
        border: 1px solid #ffffff;
        border-radius: 4px;
        background: #ff4500;
        color: #ffffff;
        width: 140px;
        /*padding-bottom: 4px;*/
    }


/* ======================================== */

/* ======================================== */
.myBtn-Navlink {
    background: #ffffff;
    /*border: 1px solid #ff4500;*/
    border-radius: 6px;
    /* color: #ff4500;*/
    /*color: royalblue;*/
    /*color: #1E90FF;*/
    color: DodgerBlue;
    width: 80px;
    padding-block-end: 6px;
    padding-block-start: 6px;
    font-family: Tahoma;
    font-size: 12px;
    font-style: normal;
    padding: 2px,4px,2px,4px;
    /*padding-bottom: 4px;*/
}

    .myBtn-Navlink:hover {
        border: 1px solid #ffffff;
        border-radius: 4px;
        /* background: #ff4500;*/
        /*background: royalblue;*/
        /*color: #ffffff;*/
        /*color: #1E90FF;*/
        color: Blue;
        background: #E6E6FA;
        width: 80px;
        padding-block-end: 6px;
        padding-block-start: 6px;
        font-family: Tahoma;
        font-size: 12px;
        font-style: normal;
        padding: 2px,4px,2px,4px;
        /*padding-bottom: 4px;*/
    }

/* ======================================== */

/* ======================================== */
.myBtn-danger {
    background: #ffffff;
    border: 1px solid #ff4500;
    border-radius: 4px;
    color: #ff4500;
    width: 100px;
}

    .myBtn-danger:hover {
        border: 1px solid #ffffff;
        border-radius: 4px;
        background: #ff4500;
        color: #ffffff;
        width: 100px;
    }


.myBtnDanger {
    border: 1px solid #ffffff;
    border-radius: 4px;
    background: #ff4500;
    color: #ffffff;
    width: 100px;
}

    .myBtnDanger:hover {
        background: #ffffff;
        border: 1px solid #ff4500;
        border-radius: 4px;
        color: #ff4500;
        width: 100px;
    }


.myBtnOrange {
    /*DodgerBlue*/
    border: 1px solid #ffffff;
    border-radius: 4px;
    background: #ff4500;
    color: #ffffff;
    width: 140px;
}

    .myBtnOrange:hover {
        border: 1px solid #ff4500;
        background: WhiteSmoke;
        color: #ff4500;
    }



.myBtnBlue {
    /*DodgerBlue*/
    border: 1px solid #ffffff;
    border-radius: 4px;
    background: DodgerBlue;
    color: #ffffff;
    width: 140px;
}

    .myBtnBlue:hover {
        border: 1px solid DodgerBlue;
        background: WhiteSmoke;
        color: DodgerBlue;
    }


.myBtnRadzen {
    border: 1px solid #ffffff;
    border-radius: 4px;
    background: rgb(255, 45, 0);
    color: #ffffff;
    width: 110px;
    height: 36px;
    padding: 0px 4px 4px 4px
}

    .myBtnRadzen:hover {
        background: #ffffff;
        border: 1px solid #ff4500;
        border-radius: 4px;
        color: #ff4500;
        width: 110px;
        height: 36px;
        padding: 0px 4px 4px 4px
    }

/* ======================================== */


/* ======================================== */

.myBtn-Link {
    /* background: #ffffff;
    border: 1px solid #ff4500;
    border-radius: 4px;
    color: #ff4500;
    width: 40px;*/
}

    .myBtn-Link:hover {
        border: 1px solid #ffffff;
        border-radius: 16px;
        background: #ff4500;
        color: #ffffff;
        width: 40px;
    }

.myBtnLink {
    /* border: 1px solid #ffffff;
    border-radius: 4px;
    background: #ff4500;
    color: #ffffff;
    width: 40px;*/
}

    .myBtnLink:hover {
        background: #ffffff;
        border: 1px solid #ff4500;
        border-radius: 16px;
        color: #ff4500;
        width: 40px;
    }




/* ======================================== */


/* ======================================== */
.myBtn-dangerLong {
    background: #ffffff;
    border: 1px solid #ff4500;
    border-radius: 4px;
    color: #ff4500;
    width: 100px;
}

    .myBtn-dangerLong:hover {
        border: 1px solid #ffffff;
        border-radius: 4px;
        background: #ff4500;
        color: #ffffff;
        width: 100px;
    }


.myBtnDangerLong {
    border: 1px solid #ffffff;
    border-radius: 4px;
    background: #ff4500;
    color: #ffffff;
    width: 160px;
}

    .myBtnDangerLong:hover {
        background: #ffffff;
        border: 1px solid #ff4500;
        border-radius: 4px;
        color: #ff4500;
        width: 160px;
    }

/* ======================================== */

.myBtn-info {
    background: #ffffff;
    border: 1px solid #6495ED;
    border-radius: 4px;
    color: #6495ED;
    width: 100px;
}

    .myBtn-info:hover {
        border: 1px solid #ffffff;
        border-radius: 4px;
        background: #6495ED;
        color: #ffffff;
        width: 100px;
    }



.myBtnInfo {
    border: 1px solid #ffffff;
    border-radius: 4px;
    background: #6495ED;
    color: #ffffff;
    width: 100px;
}

    .myBtnInfo:hover {
        background: #ffffff;
        border: 1px solid #6495ED;
        border-radius: 4px;
        color: #6495ED;
        width: 100px;
    }

.MyBlueBtn {
    /* https://www.w3schools.com/howto/howto_css_icon_buttons.asp */
    background-color: DodgerBlue; /* Blue background */
    border: none; /* Remove borders */
    color: white; /* White text */
    padding: 12px 16px; /* Some padding */
    font-size: 16px; /* Set a font size */
    cursor: pointer; /* Mouse pointer on hover */
}

    /* Darker background on mouse-over */
    .MyBlueBtn:hover {
        background-color: RoyalBlue;
    }


/* ==========================================================================
my button old css end
========================================================================== */
.myShowHideDiv {
    z-index: 1;
    position: absolute;
    background: rgba(255, 255, 255, 0.92);
    border: 2px solid rgba(248, 148, 6, 1);
    border-radius: 16px;
    padding: 16px;
    /* padding-top: 16px;
    padding-left: 16px;
    padding-right: 16px;*/
    box-shadow: 4px 4px 4px rgba(200, 200, 200, .4);
    transition: visibility 0s, opacity 0.5s linear;
}


.myShowHideSallDiv {
    z-index: 1;
    position: absolute;
    background: rgba(255, 255, 255, 0.92);
    border: 2px solid rgba(248, 148, 6, 1);
    border-radius: 4px;
    padding: 4px;
    /* padding-top: 16px;
    padding-left: 16px;
    padding-right: 16px;*/
    box-shadow: 1px 1px 1px rgba(200, 200, 200, .4);
    transition: visibility 0s, opacity 0.5s linear;
    width: auto;
}

/* ========test================================= */
.ahmed {
    background: orangered;
    color: aliceblue;
    animation-delay: 4s;
}

/* ========================================= */


/* ========test================================= */
.animation2 {
    animation-direction: normal;
    animation-delay: 2s;
    animation-duration: 2s;
}

/* ========================================= */


/*barcode*/
/*.barcodeCentercontrol {
    margin: auto;
    width: 50%;
    padding-left: 18%;
    height: 50%;
}

.barcodeAllowedText {
    margin-left: 14px;
    margin-right: 17px;
    margin-top: 14px;
    width: auto;
    height: auto;
}

.barcodeCenter {
    margin-left: 14px;
    margin-right: 17px;
    margin-top: 14px;
    min-width: 280px;
    width: auto;
    border: 2px solid lightgray;
    min-height: 40%;
    padding-top: 35px;
}*/

/*barcode*/



.e-control-wrapper.e-slider-container.e-horizontal .e-slider-track {
    background: #007bff;
    height: 4px;
    color: red;
}

.e-control-wrapper.e-slider-container .e-slider .e-handle {
    background-color: #f9920b;
    border-radius: 50%;
    border: 0;
}

.e-control-wrapper.e-slider-container.e-horizontal .e-limits {
    background-color: rgba(69, 100, 233, 0.46);
}

.mypointer {
    cursor: pointer;
    /*color: orange;*/
    /*color: DodgerBlue;*/
    color: dodgerblue;
    /*color:orangered;*/
    /*color: rgba(20,25,53, .8);
    padding: 4px;
    /*color: orangered orange;*/
    /*https://stackoverflow.com/questions/9287693/change-cursor-to-hand-when-mouse-goes-over-a-row-in-table*/
    /*background-color: blue;*/
    /*box-shadow: 5px 10px #888888;*/
}


.mypointerBlue {
    cursor: pointer;
    color: DodgerBlue;
    font-style: italic;
    /*color: rgba(20,25,53, .8);
    padding: 4px;
    /*color: orangered orange;*/
    /*https://stackoverflow.com/questions/9287693/change-cursor-to-hand-when-mouse-goes-over-a-row-in-table*/
    /*background-color: blue;*/
    /*box-shadow: 5px 10px #888888;*/
}

    .mypointerBlue :hover {
        font-weight: normal;
        text-decoration: underline;
    }


.mypointeronly {
    cursor: pointer;
    /*color: rgba(20,25,53, .8);
    padding: 4px;
    /*color: orangered;*/
    /*https://stackoverflow.com/questions/9287693/change-cursor-to-hand-when-mouse-goes-over-a-row-in-table*/
    /*background-color: blue;*/
    /*box-shadow: 5px 10px #888888;*/
}
/*a.mypointer:hover {
    color: #ff0000;
    background-color: orangered;
} */
/*a:hover {
    background-color: orangered;
}*/
/*
.visible {
    visibility: visible;
    opacity: 1;
    transition: opacity 2s linear;
}

.hidden {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 2s, opacity 2s linear;
}*/


.delText {
    text-decoration: line-through;
}