@import url('fonts/fontawesome-all.min.css');
body { direction: rtl; font-family: bein !important; background-color: #ffff; padding: 0; margin: 0; line-height: 28px; }
@font-face { font-family: bein; src: url(fonts/font-awesome/fonts/bein-ar-normal.ttf); }
/*******************header********************/
header { position: relative; background: #fff; }.topNavigation { background-color: #000; position: relative; line-height: 1rem; padding: 0.25rem 0; }.topNavigation:after { left: 100%; background-image: url(../media/top-nav-border.png); background-position: right; }.topNavigation:before { right: 100%; background-image: url(../media/top-nav-border.png); background-position: left; }.topNavigation a { color: #fff; font-size: 14px; }.topNavigation:after, .topNavigation:before { position: absolute; top: 0; bottom: 0; content: ""; display: block; width: 41px; background-repeat: no-repeat; }.topNavigation-tab ul { list-style-type: none; }.topNavigation-tab ul li { display: inline-block; margin-right: 0.5rem; }.box-search { display: flex; width: 200px; align-items: center; }.search-text { height: 26px; border-radius: 0 0.25rem 0.25rem 0 !important }.search-btn { background: #17a2b8 !important; color: #fff !important; padding: 0.2rem 0.15rem !important; border-radius: 0.25rem 0.25rem 0rem !important; font-size: 12px !important; }.navbar-toggler { padding: 0.25rem 0.25rem; line-height: 1; font-size: 1.25rem; border: 1px solid #fff; border-radius: 0.25rem; transition: box-shadow .15s ease-in-out; }.navbar-toggler-icon { display: inline-block; width: 1.5em; height: 1.5em; vertical-align: middle; background-repeat: no-repeat; background-position: center; background-size: 100%; }a.logo { margin-bottom: 5px; display: flex; font-weight: 600; text-align: center; color: #000; font-size: 20px; align-items: center; direction: ltr; line-height: 40px; }a.logo img { width: 150px; padding-right: 0.5rem; }a.logo:hover, a.logo_system:hover { color: #10788f }a.logo_system { display: flex; align-items: center; line-height: 28px; font-weight: 600; font-size: 1.25rem; cursor: pointer; color: #000; }a.logo_system img { width: 90px; }li.nav-item:first-child { padding-left: 0; }li.nav-item:last-child { padding-left: 0 }.dropdown { position: relative; }.dropdown-toggle { white-space: nowrap }.dropdown-toggle::after { display: inline-block; margin-right: .5em; vertical-align: .255em; content: ""; border-top: .3em solid; border-right: .3em solid transparent; border-bottom: 0; border-left: .3em solid transparent; }.dropdown-toggle:empty::after { margin-left: 0 }.dropdown-menu { position: absolute; z-index: 1000; display: none; min-width: 12rem; padding: 0.5rem; list-style: none; background-color: #164490; }.dropdown-menu.show { display: block; }.navbar-toggler-icon { background-image: url(../media/icon-bar.svg); }.dropdown-item { display: block; width: 100%; font-weight: 400; color: #212529; text-align: inherit; text-decoration: none; white-space: nowrap; font-size: 1rem !important; border: 0; text-align: right; padding: 0px !important; line-height: 40px; }.navbar-nav .dropdown-menu { position: static; }ul.dropdown-menu.show li:first-child { padding-top: 5px; }ul.dropdown-menu.show li:last-child { padding-bottom: 0px; }.collapse-body { padding: 1rem 3rem; }.collapse-body div.box-search { width: auto; margin: 0 auto }.navigation-nav { background: #0f387b; border-radius: 5px 5px 0px 0px; }.navigation-nav ul li { background-position: right center; background-repeat: no-repeat; }.navigation-nav ul.dropdown-menu li { background-image: none }.navigation-nav ul li a { padding: 3px 10px; text-shadow: 0 1px 0 rgb(255 255 255 / 25%); color: #fff; font-size: 1.1em; line-height: 40px; }.navigation-nav a.dropdown-item:hover { background-color: #0f387b } a.nav-link.dropdown-toggle.show, .navigation-nav ul li a:hover { background: #164490; }
/*******************End header********************/
/*******************about-system********************/
.system-info { padding: 1.5rem 0; margin-top: 1rem }.img-system { height: 400px; width: 100%; }.img-system video { height: 400px; width: 100%; }video { object-fit: fill; height: 100%; }.vedio-h { height: 400px }.btn-signin { background: #1266f1; }.btn-signup { background: #eba11d; }.btn-signin, .btn-signup { padding: 8px 25px; display: block; color: #fff; width: 200px; border-radius: 5px; margin: 0 auto 10px; transition: all 0.4s linear; box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 12%), 0 1px 5px 0 rgb(0 0 0 / 20%); text-align: center }
.btn-signin:hover, .btn-signup:hover { background-color: #0f57cd; border-color: #0e52c1 } .btn-signin:focus, .btn-signup:focus { box-shadow: none !important }.card-login { -webkit-appearance: none; box-shadow: inset 1px 1px 2px rgb(46 54 80 / 8%), inset 1px -2px 5px rgb(46 54 80 / 8%); padding: 1.5rem; border: 1px solid #bbbcce; border-radius: 20px; background: #bbbcce17; }.card-login h3 { margin-bottom: 1rem; text-align: center; }
.forms { background-color: #EFF5FF !important; padding: 3rem; border-radius: 8px }.alarts { color: #000; background-color: #d9e7ff; border: 1px solid #0f387b; padding: 1rem; line-height: 25px; margin-bottom: 1rem; border-radius: 10px; }.form-group { position: relative; margin-bottom: 1rem; }.form-group label { font-weight: 600; }.css-form { -webkit-appearance: none; height: 50px; box-shadow: inset 1px 1px 2px rgb(46 54 80 / 8%), inset 1px -2px 5px rgb(46 54 80 / 8%); border-radius: 3px !important; padding: 8px 15px !important; font-size: 1rem; display: block; font-family: 'bein'; width: 100%; border: 1px solid #ced4da; outline: 0; line-height: 1.75rem; }.title { position: relative; margin-bottom: 1.5rem; padding-bottom: 15px; }.title:before { width: 150px; position: absolute; content: ''; border: 1px solid #eba11d !important; bottom: 0; }
/**************footer********************/
footer { background: #0f387b; padding: 1rem; }footer p, footer a { text-align: center; color: #fff }footer a { padding-right: 5px }footer a:hover, .topNavigation a:hover { text-decoration: underline }
/********************panal***********************/
.panal-header { background: #253d4f; padding: 5px 20px; box-shadow: 0 0 10px rgb(0 0 0 / 15%), 0 3px 3px rgb(0 0 0 / 15%); display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 999; }.panal-header a { color: #fff; font-size: 1.4em; line-height: 40px; }ul.panal-body, div.accordion-body ul, .share-icon ul { list-style-type: none; } ul.panal-body li { border-bottom: 1px solid #ddd; transition: all 0.25s ease; background-color: #F7F7F7; }ul.panal-body li a { color: #555; padding: 1px 15px; text-align: right; border-right: 10px solid transparent; display: block } ul.panal-body li a:hover { border-right: 10px solid #17a2b8 }.accordion-body ul li { background-color: #F1F1F1; border-bottom: 1px solid #C9C9C9; }.accordion-body ul li:first-child { box-shadow: inset 0 8px 6px -6px rgb(51 51 51 / 30%); }.accordion-panal { position: relative; display: flex; align-items: center; width: 100%; padding: 1rem 1.25rem; font-size: 1rem; color: #212529; text-align: left; border: 0; border-radius: 0; overflow-anchor: none; transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,border-radius .15s ease; }
@media (prefers-reduced-motion:reduce) {.accordion-panal { transition: none }}.accordion-panal:not(.collapsed) { color: #fff; background: #ae1520; box-shadow: inset 0 -1px 0 rgba(0,0,0,.125); }.accordion-panal:not(.collapsed)::after { background-image: url("../media/accordion-icon.svg"); transform: rotate(-180deg); }.accordion-panal::after { flex-shrink: 0; width: 1.25rem; height: 1.25rem; left: 15px; content: ""; background-image: url("../media/accordion-icon.svg"); background-repeat: no-repeat; background-size: 0.85rem; background-position: center; transition: transform .2s ease-in-out; position: absolute; }
@media (prefers-reduced-motion:reduce) {.accordion-panal::after { transition: none }}ul.panal-body li a.accordion-panal { display: flex !important }
/*******************bootsrap5********************/
*, ::after, ::before { box-sizing: border-box }img { vertical-align: middle; }.pl-1 { padding-left: 0.25rem !important }p { line-height: 25px; }a, p, h3, h2, h1, h5 { letter-spacing: 1px; }a { text-decoration: none }p, ul, ol, h3, h4, h2, h1, h5 { padding: 0; margin: 0 }.btn { display: inline-block; font-weight: 400; line-height: 1.5; color: #212529; text-align: center; text-decoration: none; vertical-align: middle; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; border: 1px solid transparent; font-size: 1rem; border-radius: 0.25rem; transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; }.container { width: 100%; padding-right: var(--bs-gutter-x,.75rem); padding-left: var(--bs-gutter-x,.75rem); margin-right: auto; margin-left: auto }.w-100 { width: 100% !important }@media (min-width:576px) {.container { max-width: 540px }}@media (min-width:768px) {.container { max-width: 720px }}@media (min-width:992px) {.container { max-width: 960px }}
@media (min-width:1200px) {.container { max-width: 1140px; }}@media (min-width:1400px) {.container { max-width: 1320px }}
.navbar > .container, .navbar > .container-fluid { display: flex; flex-wrap: inherit; align-items: center; justify-content: space-between; }
.row { --bs-gutter-x: 1.5rem; --bs-gutter-y: 0; display: flex; flex-wrap: wrap; margin-top: calc(-1 * var(--bs-gutter-y)); }
.row > * { flex-shrink: 0; width: 100%; max-width: 100%; margin-top: var(--bs-gutter-y); padding-right: calc(var(--bs-gutter-x) * .5);
}
.align-items-center { align-items: center !important }
.justify-content-center { justify-content: center !important }
.justify-content-between { justify-content: space-between !important }
.justify-content-end { justify-content: flex-end !important; }
.p-0 { padding: 0 !important }
.text-center { text-align: center !important }
.form-control { display: block; width: 100%; font-family: 'bein'; padding: .375rem .75rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #212529; background-color: #fff; background-clip: padding-box; border: 1px solid #ced4da; outline: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: .25rem; transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out }
.navbar { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; }
.navbar-nav { display: flex; flex-direction: column; padding-left: 0; margin-bottom: 0; list-style: none; }
.nav-link { display: block; padding: 0.25rem 0.35rem; text-shadow: 0 1px 0 rgb(255 255 255 / 25%); text-decoration: none; transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out; }
.collapse:not(.show) { display: none; }
.navbar-collapse { flex-basis: 100%; flex-grow: 1; align-items: center; }
.d-block { display: block !important }
.system-info { text-align: justify !important }
@media (min-width: 576px) {.d-sm-block { display: block !important; }.d-sm-none { display: none !important; }.row-cols-sm-1 > * { flex: 0 0 auto; width: 100% }.row-cols-sm-2 > * { flex: 0 0 auto; width: 50% }}

@media (min-width: 768px) {
    a.btn-panal {width: auto !important;}
    .d-md-block { display: block }
    .d-md-none { display: none !important; }
    .d-md-inline-block { display: inline-block !important; }
    .row-cols-md-2 > * { flex: 0 0 auto; width: 50% }
}

@media (min-width:992px) {
    .navbar-expand-lg .navbar-nav .dropdown-menu { position: absolute; }
    .col-lg-3 { flex: 0 0 auto; width: 25%; }
    .col-lg-4 { flex: 0 0 auto; width: 33.33333333%; }
    .col-lg-5 { flex: 0 0 auto; width: 41.66666667% }
    .col-lg-6 { flex: 0 0 auto; width: 50%; }
    .col-lg-7 { flex: 0 0 auto; width: 58.33333333%; }
    .col-lg-9 { flex: 0 0 auto; width: 75%; }
    .col { flex: 1 0 0%; }
    .d-lg-none { display: none !important; }
    .d-lg-inline-flex { display: flex !important; }
    .navbar-expand-lg { flex-wrap: nowrap; justify-content: flex-start; }
    .navbar-collapse { display: flex !important; flex-basis: auto; }
    .navbar-expand-lg .navbar-toggler { display: none; }
    .navbar-expand-lg .navbar-nav { flex-direction: row; margin-right: 0rem; }
    .col-lg { width: auto !important }
    .topNavigation-tab { display: block }
    #panal.collapse.navbar-collapse { display: block !important; }
}
/***************tablet**********/
@media only screen and (max-width: 991px) {
    .fluid-lg { max-width: none; padding: 0 }
    .topNavigation:before, .topNavigation:after { display: none }
    li.nav-item { background-color: #EEE; padding: 0; border-bottom: 1px solid #fff }
    .navigation-nav ul.dropdown-menu li a.dropdown-item, .dropdown-menu { background: #eeeeee !important; }
    .topNavigation { padding: 0.5rem; direction: rtl; }
    .nav-link { display: flex; align-items: center; justify-content: space-between; }
    .fluid-Navigation { max-width: none; padding: 0 }
    .col-lg { padding: 0; }
    .navigation-nav ul li a, a.nav-link.dropdown-toggle.show { background-color: #00000012; color: #555 !important; display: flex !important; justify-content: space-between; align-items: center; }
    .navigation-nav ul li { background-image: none }
    .navigation-nav { direction: rtl }
    .system-info { padding:0 !important }
}
/***************phone**********/
@media(max-width:600px) {
    .navigation-nav ul li a:hover { background: #dddddd }
    .d-sm-none { display: none !important; }
    a.logo_system { justify-content: center }
    .nav-link { display: flex; align-items: center; justify-content: space-between; }
    .wrap-reverse { flex-wrap: wrap-reverse; }
    .forms { margin-top: 1rem; padding: 0.75rem; }
    .p-7 { padding: 1rem }
    .img_user { margin: 0 }
    .info-user { padding: 0rem 0 1rem }
    .panal-header i { color: #fff }
    .m-9 { margin: 1rem 0 }
    a.logo img { height: 100px; }
    a.logo { font-size: 15px; }
    footer p { line-height: 30px }
   a.btn-panal {width: auto !important;} 
}

.icon { width: 120px; border-radius: 50%; height: 120px; line-height: 160px; margin: 0 auto 0.75rem; text-align: center; background: #fff; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; position: relative; top: 0; }
.icon i { font-size: 4rem; position: relative; color: #0463FA }
.font-weight-bold { font-weight: 600 }
.pl-3 { padding-left: 0.75rem !important }
.user-info p { margin-top: 1rem; }
.card-panal:hover { margin-top: -10px; box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .08); }
.img_user { width: 100%; height: 250px; border: 1px solid #bbbcce; border-radius: 10px; background: #f1f1f1; margin: 1rem 0; }
.img_user img { padding: 0.75rem; height: 100%; border-radius: 10px; width: 100%; background: #fff; }
.card-panal { position: relative; padding: 3rem 2rem 1.5rem !important; margin-bottom: 1rem; background: #EFF5FF; transition: .5s; }
.card-panal h4 a { font-size: 17px; line-height: 25px; color: #444444; }
.card-panal h4 { margin-bottom: 1rem; text-align: center }
.card-panal p { text-align: center; color: #626262; font-size: 13px; margin-bottom: 10px; }
.text-primary { color: #0463FA !important; }
.btn-panal { width: 40px; height: 40px; display: inline-flex; align-items: center; background: #FFFFFF; border-radius: 40px; white-space: nowrap; overflow: hidden; transition: .5s; padding: 10px; color: #000; font-size: 12px }
.btn-panal i { padding-left: 10px; font-size: 20px; }
.card-panal:hover .btn-panal { width: 100px }
.logout {background-color: #eba11d; height: 49px; line-height: 49px; padding: 0 10px; margin-right: auto; color: #fff; display: block; }
.logout:hover { background-color: #c88815; }


.ui-datepicker{direction:ltr;border: 1px solid #ddd; border-radius : 8px; box-shadow: 0 0 0.5em gray; width:17em;padding:.2em .2em 0;display:none;background-color:#f7f7f7;}
.ui-datepicker .ui-datepicker-header{position:relative;padding:.2em 0}
.ui-datepicker .ui-datepicker-prev,.ui-datepicker .ui-datepicker-next{position:absolute;top:2px;width:1.8em;height:1.8em}
.ui-datepicker .ui-datepicker-prev-hover,.ui-datepicker .ui-datepicker-next-hover{top:1px}
.ui-datepicker .ui-datepicker-prev span,.ui-datepicker .ui-datepicker-next span{display:block;position:absolute;left:50%;margin-left:-8px;top:50%;margin-top:-8px}
.ui-datepicker .ui-datepicker-title{margin:0 2.3em;line-height:1.8em;text-align:center}
.ui-datepicker .ui-datepicker-title select{font-size:0.8em;margin:1px 0;}
.ui-datepicker select.ui-datepicker-month,.ui-datepicker select.ui-datepicker-year{width:45%;color:#FF0066;}
.ui-datepicker table{width:100%;font-size:.9em;border-collapse:collapse;margin:0 0 .4em}
.ui-datepicker th{padding:.7em .3em;text-align:center;font-weight:bold;border:0}
.ui-datepicker td{border:0;padding:1px}
.ui-datepicker td span,.ui-datepicker td a{display:block;padding:.1em;text-align:right;text-decoration:none;color:#72739F}
.ui-datepicker td a:hover {color:#FF0066}
.ui-datepicker .ui-datepicker-buttonpane{background-image:none;margin:.7em 0 0 0;padding:0 .2em;border-left:0;border-right:0;border-bottom:0}
.ui-datepicker .ui-datepicker-buttonpane button{float:right;margin:.5em .2em .4em;cursor:pointer;padding:.2em .6em .3em .6em;width:auto;overflow:visible}
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current{float:left}
.ui-datepicker.ui-datepicker-multi{width:auto}.ui-datepicker-multi .ui-datepicker-group{float:left}
.ui-datepicker-multi .ui-datepicker-group table{width:95%;margin:0 auto .4em}
.ui-datepicker-multi-2 .ui-datepicker-group{width:50%}
.ui-datepicker-multi-3 .ui-datepicker-group{width:33.3%}
.ui-datepicker-multi-4 .ui-datepicker-group{width:25%}
.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header{border-left-width:0}
.ui-datepicker-multi .ui-datepicker-buttonpane{clear:left}
.ui-datepicker-row-break{clear:both;width:100%;font-size:0}
.ui-datepicker .ui-datepicker-prev{right:15px;left:auto;color:#002046;}
.ui-datepicker .ui-datepicker-next{left:2px;right:auto;color:#002046;}
.ui-datepicker .ui-datepicker-prev:hover{right:15px;left:auto;color:#FF0066}
.ui-datepicker .ui-datepicker-next:hover{left:2px;right:auto;color:#FF0066}

.lioption {margin-top: 10px; margin-bottom: 10px; padding: 10px; background-color: #FFFFCC;border-radius: 6px 6px 6px 6px;}
.lioption a {font-weight: bold;color:red}
.lioption:hover {background-color: #d7f8dc}
.lioption:hover a {color:#0f387b;font-weight:bold}

.bth {text-align:center;color:black;background-color:#e96633;font-weight:bold;}
.bth:hover, .bth:focus {color: black;background-color: #4CAF50;font-weight:bold;}
.btg {text-align:center;color:black;background-color:#4CAF50;font-weight:bold;}
.btg:hover, .btg:focus {color: black;background-color: #4CAF50;font-weight:bold;}