.mainPage {
    padding: 20px;
    background: #f8f9fa;
    min-height: 100vh;
}

.page-header {
    background: #006793;
    color: white;
    padding: 20px;
    margin: -20px -20px 20px -20px;
    border-bottom: 3px solid #000;
}

.page-title {
    margin: 0;
    font-size: 24px;
    font-weight: bold;
}

.page-title .event-name {
    font-size: 18px;
    opacity: 0.9;
}

.page-title i {
    margin-right: 10px;
}

.action-bar {
    margin-bottom: 25px;
    padding: 0 10px;
}

.btn-primary {
    background: #006793;
    border: 1px solid #005a82;
    padding: 8px 16px;
}

.btn-primary:hover {
    background: #005a82;
    border-color: #004d6b;
}

/* بطاقات المجموعات العمرية */
.age-group-card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    margin-bottom: 25px;
    overflow: hidden;
}

.age-group-header {
    background: #006793;
    color: white;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #000;
}

.age-group-title {
    font-size: 18px;
    font-weight: bold;
}

.age-group-title i {
    margin-right: 8px;
}

.age-group-stats {
    display: flex;
    gap: 10px;
}

.stat-badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
}

.stat-badge.classes { background: #28a745; color: white; }
.stat-badge.champions { background: #17a2b8; color: white; }
.stat-badge.judges { background: #6c757d; color: white; }

.age-group-content {
    padding: 0;
}

/* الجدول */
.table-responsive {
    overflow-x: auto;
}

.classification-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
}

.classification-table th {
    background: #000;
    color: white;
    padding: 12px 8px;
    text-align: center;
    font-weight: bold;
    font-size: 13px;
    border: none;
}

.classification-table td {
    padding: 10px 8px;
    text-align: center;
    border-bottom: 1px solid #dee2e6;
    vertical-align: middle;
}

.classification-table tr:hover {
    background: #f8f9fa;
}

/* العناصر داخل الجدول */
.class-id {
    background: #e9ecef;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: bold;
    color: #006793;
}

.judges-count {
    background: #006793;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
}

.btn {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    cursor: pointer;
}

.champions-btn {
    background: #006793;
    color: white;
}

.champions-btn:hover {
    background: #005a82;
    color: white;
}

.points-btn {
    background: #17a2b8;
    color: white;
}

.points-btn:hover {
    background: #138496;
    color: white;
}

.top-five-btn {
    background: #28a745;
    color: white;
    font-weight: bold;
}

.top-five-btn:hover {
    background: #218838;
    color: white;
}

.top-five-btn small {
    display: block;
    font-size: 10px;
    opacity: 0.9;
    margin-top: 2px;
}

.print-btn {
    background: #6c757d;
    color: white;
}

.print-btn:hover {
    background: #5a6268;
    color: white;
}

/* الحالات */
.na-text {
    color: #6c757d;
    font-style: italic;
}

.shared-text {
    color: #6c757d;
    font-size: 11px;
}

/* أزرار الحالة */
.status-btn {
    display: inline-block;
    padding: 6px;
    border-radius: 50%;
    text-decoration: none;
    transition: all 0.3s ease;
}

.status-btn.active {
    background: #28a745;
    color: white;
}

.status-btn.inactive {
    background: #dc3545;
    color: white;
}

.status-btn:hover {
    transform: scale(1.1);
}

/* قائمة الإجراءات */
.action-dropdown {
    position: relative;
    display: inline-block;
}

.action-toggle {
    background: #6c757d;
    color: white;
    border: none;
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
}

.action-toggle:hover {
    background: #5a6268;
}

.action-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    min-width: 120px;
    z-index: 1000;
    list-style: none;
    padding: 5px 0;
    margin: 2px 0 0 0;
}

.action-dropdown:hover .action-menu {
    display: block;
}

.action-menu li {
    margin: 0;
}

.action-menu a {
    display: block;
    padding: 8px 15px;
    color: #333;
    text-decoration: none;
    font-size: 13px;
    transition: background 0.3s ease;
}

.action-menu a:hover {
    background: #f8f9fa;
    color: #006793;
}

.action-menu .divider {
    height: 1px;
    background: #dee2e6;
    margin: 5px 0;
}

.delete-btn {
    color: #dc3545 !important;
}

.delete-btn:hover {
    background: #f8d7da !important;
}

/* التجاوب */
@media (max-width: 768px) {
    .age-group-header {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    .age-group-stats {
        justify-content: center;
    }

    .page-title {
        font-size: 20px;
    }

    .classification-table th,
    .classification-table td {
        padding: 8px 4px;
        font-size: 12px;
    }

    .btn {
        padding: 4px 8px;
        font-size: 11px;
    }
}




body.nav-md .container.body .right_col {
  padding: 65px 250px 50px 24px;
  margin-left: 230px;
  float: left;
  width: 100%;
}
body.nav-sm .container.body .right_col {
  padding: 65px 90px 50px 24px;
  margin-left: 70px;
  z-index: 2;
  /*    min-height: 1400px !important;*/
  float: left;
  width: 100%;
}

body .main_container {
  height: auto;
  float: left;
  width: 100%;
  background: #f1f1f1;
}
body{
  font-family: 'Tajawal', sans-serif;
  background-color: #fff !important;
  color: #2E3132;
}
body .container.body .right_col {
  background: #f9f9f9 !important;
}
body.nav-sm .container.body .left_col {
  width: 70px;
  padding: 0;
  /* position: fixed; */
  height: 100%;
  z-index: 200;
}
body.nav-md .container.body .col-md-3.left_col {
  width: 230px;
  padding: 0;
  /* position: fixed; */
  left: 0px;
  display: flex;
  z-index: 999;
}
.langMenu{
  min-width: unset!important;
  /* padding: 20px; */

}




.theLanguage{
  float: left;
  margin: 0;
  padding-top: 11px;
  width:fit-content;
  font-size: 18px;
  color: #000;
}
.theLanguage a{
  text-decoration: none;
  color: #000;
  padding: 10px 30px;
  margin: 0 5px;
  display: block;
  /* width: 100%; */
  border-bottom: 1px solid #80808078;
}
.langBtn{
  font-size: 18px;
}
.theLanguage a:hover{
  text-decoration: none;
  color: #008000;
}
.main_container .top_nav {
  padding: 0 !important;
  display: block;
  padding: 10px 20px 0;
  margin-left: 230px;
  position: fixed;
  top: 0px;
  right: 0px;
  width: calc(100% - 230px);
  z-index: 999;
}
body.nav-sm .main_container .top_nav {
  padding: 0 !important;
  display: block;
  margin-left: 70px;
  z-index: 2;
  width: calc(100% - 70px);
}
.nav_menu {
  float: left;
  background: #EDEDED;
  border-bottom: 1px solid #2e2c39  ;
  margin-bottom: 0px;
  width: 100%;
  height: 58px;
}
.nav.navbar-nav>li>a {
  color: #1d1d1b !important;
}
.dropdown-menu>li>a {
  color: #1d1d1b;
}
.toggle a {
  padding: 15px 15px 0;
  margin: 10px;
}
.nav-md .logoIcon{
  display: none;
}
.nav-md .logo{
  display: block;
  margin: auto;
  width: 136px;
}
.nav-sm .logoIcon{
  display: block;
  width: 35px;
  margin: auto;
}
.nav-sm .logo{
  display: none;
}
.nav_title {
  width: 100%;
  float: left;
  background-color: #fff;
  border-radius: 0;
  height: auto;
  padding: 20px 0px;
  cursor: pointer;
}
.left_col{
  width: 100%;
}
.left_col.scroll-view{
  cursor: default !important;
  width: 100%;
  /* border-radius:10px; */
}
.main_menu_side{
  background-color: #fff;
}

/* التأثير عند التحويم والضغط */
.nav.side-menu>li>a:hover, .nav>li>a:focus {
  text-decoration: none;
  background: transparent;
  font-weight: 700;
  transform: translateY(-0.5px); /* التحريك لأعلى بمقدار 5 بكسل */
  transition: transform 0.3s ease-in-out; /* الانتقال التدريجي */
}

/* إعدادات الانتقال لعناصر القائمة عند الحالة الافتراضية */
.nav.side-menu>li>a, .nav>li>a {
  transition: transform 0.3s ease-in-out; /* الانتقال التدريجي */
}
.nav.side-menu> li.active > a{
  margin: 1px 0px;
}

/* .activities_0.store.active .fa.fa-chevron-down{
  margin-top: -15px !important;
} */

.activities_0.store.active .fa.fa-chevron-down{
  margin-top: 6px !important;
}

li.current-page{
  background: rgb(46 44 57 / 46%) !important;
}

body.nav-sm span.fa, body.nav-sm .menu_section h3 {
  display: block !important;
  display: block !important;
  float: right;
  margin-top: 8px;
  margin-left: 3px;
}

.nav.side-menu> li.active > a, body.nav-md ul.nav.child_menu li:before{
  background: #A98B48 !important;
}

.nav.side-menu> li.active .fa {
  color: #fff !important;
}
.side-menu li.active a img:nth-child(2){
  display: inline-block !important;
}
.side-menu li a img:nth-child(2),.side-menu li.active a img:nth-child(1) {
  display: none !important;
}
body.nav-md ul.nav.child_menu li:after{
  border-color: #A98B48 !important;
}
.nav.side-menu> li.current-page, .nav.side-menu> li{
  font-size: 17px;
}
.nav.side-menu> li.current-page, .nav.side-menu> li.active {
  border-right: 5px solid #2e2c39 !important;
}
.nav.child_menu > li > a {
  color: rgba(0, 0, 0, 1) !important;
  font-size: 15px;
  padding: 9px;
}
body.nav-sm ul.nav.child_menu {
  left: 100%;
  position: absolute;
  top: 0;
  padding: 10px;
  width: 210px;
  z-index: 4000;
  background: #A98B48;
  display: none;
}
body.nav-sm .nav.side-menu li.active-sm {
  border-right: 5px solid #A4A4A4;
}
body.nav-sm .menu_section span{
  display: none !important;
}
.toggle a i {
  font-size: 26px;
  color: #2E3132;
  cursor: pointer;
}
.bg-green {
  background: #2e2c39 !important;
  border: 1px solid #2e2c39 !important;
  color: #fff;
}
#sidebar-menu img {
  width: 30px;
  opacity: .99;
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin-left: -6px
}
body.nav-sm .nav.side-menu li a img {
  font-size: 25px !important;
  text-align: center;
  width: 100% !important;
  margin-bottom: 5px;
  width: 45px !important;
}

.form-control{
  border-radius: 0px;
  height: 40px;
  border: none;
  box-shadow: none;
  border: 1px solid #ccc;
  font-family: 'Cairo', sans-serif;
  border-radius: 25px;
  /*padding: 23px;    */
}
.form-control:focus {
  border-radius: 0px;
  border-color: #005877 !important;
  outline: 0;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgb(169, 139, 72) !important;
}

/**/
.nav.side-menu> li.activities_0.active > a,
body.nav-sm .nav.side-menu> li.activities_0 .child_menu,
.nav.side-menu> li.activities_0 .child_menu li:before{
  background: #2e2c39 !important;
  color: #fff !important;
}
.nav.side-menu> li.activities_0 .child_menu li:after{
  border-color: #2e2c39 !important;
}
/**/
.nav.side-menu> li.activities_1.active > a,
body.nav-sm .nav.side-menu> li.activities_1 .child_menu,
.nav.side-menu> li.activities_1 .child_menu li:before{
  background: #D33B3B !important;
}
.nav.side-menu> li.activities_1 .child_menu li:after{
  border-color: #D33B3B !important;
}
/**/
.nav.side-menu> li.activities_2.active > a,
body.nav-sm .nav.side-menu> li.activities_2 .child_menu,
.nav.side-menu> li.activities_2 .child_menu li:before{
  background: #1BA5CF !important;
}
.nav.side-menu> li.activities_2 .child_menu li:after{
  border-color: #1BA5CF !important;
}
/**/
.nav.side-menu> li.activities_3.active > a,
body.nav-sm .nav.side-menu> li.activities_3 .child_menu,
.nav.side-menu> li.activities_3 .child_menu li:before{
  background: #2AAC83 !important;
}
.nav.side-menu> li.activities_3 .child_menu li:after{
  border-color: #2AAC83 !important;
}
/**/
.nav.side-menu> li.activities_4.active > a,
body.nav-sm .nav.side-menu> li.activities_4 .child_menu,
.nav.side-menu> li.activities_4 .child_menu li:before{
  background: #935695 !important;
}
.nav.side-menu> li.activities_4 .child_menu li:after{
  border-color: #935695 !important;
}
/**/
.nav.side-menu> li.activities_5.active > a,
body.nav-sm .nav.side-menu> li.activities_5 .child_menu,
.nav.side-menu> li.activities_5 .child_menu li:before{
  background: #B39547 !important;
}
.nav.side-menu> li.activities_5 .child_menu li:after{
  border-color: #B39547 !important;
}
/**/
.nav.side-menu> li.activities_6.active > a,
body.nav-sm .nav.side-menu> li.activities_6 .child_menu,
.nav.side-menu> li.activities_6 .child_menu li:before{
  background: #E89D32 !important;
}
.nav.side-menu> li.activities_6 .child_menu li:after{
  border-color: #E89D32 !important;
}
/**/
.nav.side-menu> li.activities_7.active > a,
body.nav-sm .nav.side-menu> li.activities_7 .child_menu,
.nav.side-menu> li.activities_7 .child_menu li:before{
  background: #BAB613 !important;
}
.nav.side-menu> li.activities_7 .child_menu li:after{
  border-color: #BAB613 !important;
}

.nav.side-menu> li {
  position: relative;
  /* display: block; */
  cursor: pointer;
  border-bottom: 1px solid #2e2c39;
}
.nav.side-menu> li:last-child{
  border-bottom: 0px;
}

.menu_section >ul {
  margin-top: 10px;
  cursor: default;
  background-color: #f1f1f1;
}

/******--Start Responsive Menu--*****/

@media (max-width: 767px) {
  body.nav-sm .container.body .left_col {
    position: relative;
  }
.textMain {
  font-size: 35px !important;
}

.nav.side-menu li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    cursor: pointer;
}

.nav.child_menu {
    padding-left: 0px;
}

.nav.child_menu li a {
    padding: 5px 15px;
}


.nav.side-menu li.active .child_menu {
    display: block !important;
}


}

@media (max-width: 480px) {
  body.nav-sm .container.body .left_col {
    position: relative;
  }
}


/******--End Responsive Menu--*****/



/****--Start login---****/

.login_content {
  margin: 0 auto;
  padding: 0px 0 0;
  position: relative;
  text-align: center;
  text-shadow: 0 1px 0 #fff;
  min-width: 280px;
}
#login .form-control {
  border-color: #A98B48 !important;
  border-radius: 4px;
  height: 45px;
}
.login_content form input[type="text"], .login_content form input[type="email"], .login_content form input[type="password"] {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 0 0px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
  -moz-box-shadow: 0 0px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
  -ms-box-shadow: 0 0px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
  -o-box-shadow: 0 0px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
  box-shadow: 0 0px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  border: 1px solid #2E3132;
  color: #777;
  margin: 0 0 20px;
  width: 100%;
}

.login_content h1 {
  font-family: "Optima Regular";
  font-size: 30px;
  letter-spacing: -0.05em;
  line-height: 20px;
  margin: 10px 0 30px;
  color: #fff;
}

.btn-primary:hover{
  color: #2e2c39 !important;
  background-color: #231f20 !important;
  border-color: #231f20 !important;
}
.separator img{
  margin-bottom: 20px;
  width: 75%;
}
.separator p{
  color: #fff;
}

/****--End login---****/


/****--Start index---****/
.mainPage{
  float: left;
  width: 100%;
  height: auto;
}

/* .textMain{
  float: left;
  width: 100%;
  height: auto;
  color: #231f20;
  font-size: 35px;
  text-shadow: 2px 2px 2px #b2a6d9;
  font-weight: 700;

} */

.detailsCont{
  float: left;
  width: 100%;
  height: auto;
}
.dtFilters{
  width: 100%;
  height: auto;
  float: left;
  margin-bottom: 20px;
  border: 1px solid #2E3132;
  border-top: 0;
  padding-bottom: 20px;
}
.dataFilterBtn {
  float: left;
  width: 100%;
  padding: 10px 0px;
  border-radius: 0px;
  background-color: transparent;
  color: #2E3132;
  cursor: pointer;
  font-size: 21px;
  margin: 0px 0px;
  border-bottom: 1px solid #2E3132;
}
.dataFilterBtn h3{
  float: left !important;
  width: auto !important;
  height: 100%;
  color: #2E3132;
  margin: 0;
  padding-right: 20px;
  font-size: 24px;
}
.dataFilterBtn i{
  float: left;
}
.form-horizontal .control-label {
  padding-top: 8px;
  color: #1d1d1b;
  float: left;
  text-align: left;
}
.dropdown-menu {
  border: medium none;
  border-radius: 3px;
  box-shadow: 0 0 3px;
  display: none;
  float: left;
  left: 0;
  list-style: none outside none;
  padding: 0;
  position: absolute;
  text-shadow: none;
  top: 100%;
  z-index: 1000;
  border-radius: 2px;
  border-top: 1px solid #999999;
  color: #2E3132;
  font-size: 15px;
}
.addingBar.addBtn{
  width: 100%;
  float: left;
  margin-top: 32px;
}
.addingBar.addBtn .btn-group{
  float: left;
}

.daterangepicker td.active, .daterangepicker td.active:hover {
  background-color: #1d1d1b;
  color: #fff;
}
.applyBtn.btn-success {
  color: #1d1d1b;
  background-color: #2E3132;
  border-color:  #1d1d1b;
}
.applyBtn.btn-success:hover {
  color: #fff;
  background-color: #004056;
  border-color:  #004056;
}
.cancelBtn.btn-default{
  color:  #005877;
  background-color: #005877;
  border-color:  #2E3132;
}
.cancelBtn.btn-default:hover{
  color:  #fff;
  background-color: #004056;
  border-color:  #004056;
}
.calendar {
  float: left !important;
}
.daterangepicker .input-mini.active {
  border: 1px solid #1d1d1b;
  border-radius: 4px;
}

.dropdown-menu:after {
  border-bottom: 6px solid #ffffff;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  content: "";
  display: inline-block;
  position: absolute;
}
.datepicker-dropdown.datepicker-orient-left:after {
  left: 7px;
  right: auto;
}

/****--End index---****/


#register-form {
  border: 1px solid #DFDCDC;
  border-radius: 15px 15px 15px 15px;
  display: inline-block;
  width: auto;
}

#register-form .fieldgroup {
  background: url("form-divider.gif") repeat-x scroll left top transparent;
  display: inline-block;
  padding: 8px 10px;
  width: 340px;
}

#register-form .fieldgroup label {
  float: left;
  padding: 15px 0 0;
  text-align: right;
  width: 110px;
}

#register-form .fieldgroup input, #register-form .fieldgroup textarea, #register-form .fieldgroup select {
  float: right;
  margin: 10px 0;
  height: 25px;
}

#register-form .submit {
  padding: 10px;
  width: 220px;
  height: 40px !important;
}

#register-form .fieldgroup label.error {
  color: #FB3A3A;
  display: inline-block;
  margin: 4px 0 5px 125px;
  padding: 0;
  text-align: left;
  width: 220px;
}

.uploadFileArea {
  width: 100%;
}
body.nav-sm .nav.side-menu li a {
  text-align: center !important;
  font-weight: 400;
  font-size: 13px;
  padding: 10px 5px;
}


/*****----Start DataTable------*****/

.dataTables_wrapper {
  position: relative;
  clear: both;
  zoom: 1;
  margin-top: 20px;
}

table.table-bordered.dataTable {
  width: 100% !important;
  border: 0;
  padding: 0;
}
table.table-bordered.dataTable tbody th, table.table-bordered.dataTable tbody td {
  border-bottom-width: 5px !important;
  border-color: white;
  font-size: 16px;
  padding: 10px 0px 10px 0;
}
table.table-bordered.dataTable thead{
  background-color: #2e2c39;
  color: #fff;
  line-height: 37px;
  font-size: 18px;
}
table.table-bordered thead th, table.table-bordered thead td {
  border-left-width: 0;
  border-top-width: 0;
  border-bottom: 0;
}
.table-striped>tbody>tr:nth-of-type(odd) {
  background-color: #e6e6e6 ;
  color: #555;
  line-height: 26px;
  font-size: 15px;
}
.table-striped>tbody>tr:nth-of-type(even) {
  background-color: #f5f4f4 ;
  color: #555;
  line-height: 26px;
  font-size: 15px;
}
.table-bordered>tbody>tr>td, .table-bordered>tbody>tr>th, .table-bordered>tfoot>tr>td, .table-bordered>tfoot>tr>th, .table-bordered>thead>tr>td, .table-bordered>thead>tr>th {
  border: 1px solid #ffffff;
}
table.dataTable.table-condensed thead > tr > th {
  padding-right: 20px;
  font-weight: normal;
}
.pagination>li>a{
  position: relative;
  float: left;
  padding: 6px 12px;
  margin-left: -1px;
  line-height: 1.42857143;
  color: #848484 ;
  text-decoration: none;
  background-color: #fff !important;
  border: 1px solid #A4A4A4 !important;
}
.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
  z-index: 2;
  color: #ffffff;
  cursor: default;
  background-color: #555 !important;
  border-color: #555 !important;
}
.pagination>.disabled>a, .pagination>.disabled>a:focus, .pagination>.disabled>a:hover, .pagination>.disabled>span, .pagination>.disabled>span:focus, .pagination>.disabled>span:hover {
  color: #555;
  cursor: not-allowed;
  background-color: #fff;
  border-color: #e6e6e6 !important;
}
.table-condensed>thead>tr>th, .table-condensed>tbody>tr>th, .table-condensed>tfoot>tr>th, .table-condensed>thead>tr>td, .table-condensed>tbody>tr>td, .table-condensed>tfoot>tr>td {
  padding: 5px 12px;
  text-align: center;
}
/*****----End DataTable------*****/



/*****----Start actionsIcon------*****/

.actionsIcon{
  width: auto;
  height: auto;
  float: left;
  margin: 5px;
}
.actionsIcon .glyphicon-pencil{
  color: #1d1d1b;
}
.actionsIcon .glyphicon-pencil:hover{
  color: #2E3132;
}
.actionsIcon.delete a{
  color: #D33B3B;
}
.actionsIcon.delete a:hover{
  color: #bb2a2a;
}
.actionsIcon.delete a i{
  font-size: 16px;
}
.actionsIcon a i{
  font-size: 16px;
}
/*****-------End actionsIcon-------*****/



/*****-------Start addEditTextData-------*****/
.page-header {
  padding-bottom: 9px;
  margin: 40px 0 20px;
  border-bottom: 1px solid #eee;
  color: #2E3132;
}
label {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;
  font-weight: normal;
  color: #1d1d1b;
  font-size: 17px;
  margin-top: 15px;
}

.fileinput-button input {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0px;
  opacity: 0;
  -ms-filter: 'alpha(opacity=0)';
  font-size: 28px;
  direction: ltr;
  cursor: pointer;
  float: left;
  width: auto;
}


.progress-bar-success {
  background-color: #224b78;
}

.btn-danger {
  background: #d9534f;
  border-color: transparent;
  border-radius: 20px !important;
  height: 38px;
}


.titleSelectPhoto{
  color: #1d1d1b;
  font-size: 17px;
}
.photoPreview{
  width: 100%;
  height: auto;
  float: left;
}
.photoPreview img{
  width: 100%;
  max-width: 350px;
  /*height: 350px;*/
  float: left;
  margin-bottom: 30px;
}
.statusIcon.active .glyphicon,
.actionsIcon.delete.active .glyphicon{
  font-size: 18px;
  color: #1cb41c;
}
.statusIcon.passive .glyphicon,
.actionsIcon.delete.passive .glyphicon{
  font-size: 18px;
  color: #db1c1c;
}
/*****-------End addEditTextData-------*****/

#ascrail2000{
  display: none !important;
}



.myBtn a.active {
  color: #fff;
  background-color: #5cb85c;
  border-color: #4cae4c;
}

.saveBtnNew{
  padding: 10px 20px;
  margin-bottom: 15px;
  font-size: 18px;
}
.cke_editable {
  font-size: 15px !important;
}


@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) {


}

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2) {



}

@media (max-width: 767px) {


}

@media (max-width: 480px) {

}


/* *********  /verticle tabs  **************************** */
/* *********  image cropping  **************************** */
/*!
* Cropper v0.8.0
* https://github.com/fengyuanchen/cropper
*
* Copyright 2014-2015 Fengyuan Chen
* Released under the MIT license
*
* Date: 2015-02-19T06:49:29.144Z
*/

.cropper-container {
  position: relative;
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

.cropper-container img {
  display: block;
  width: 100%;
  min-width: 0 !important;
  max-width: none !important;
  height: 100%;
  min-height: 0 !important;
  max-height: none !important;
}

.cropper-modal,
.cropper-canvas {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.cropper-canvas {
  background-color: #fff;
  filter: alpha(opacity=0);
  opacity: 0;
}

.cropper-modal {
  background-color: #000;
  filter: alpha(opacity=50);
  opacity: .5;
}

.cropper-cropbox {
  position: absolute;
  top: 10%;
  left: 10%;
  width: 80%;
  height: 80%;
}

.cropper-viewer {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  outline: 1px solid #69f;
  outline-color: rgba(102, 153, 255, .75);
}

.cropper-dashed {
  position: absolute;
  display: block;
  filter: alpha(opacity=50);
  border: 0 dashed #fff;
  opacity: .5;
}

.cropper-dashed.dashed-h {
  top: 33.33333333%;
  left: 0;
  width: 100%;
  height: 33.33333333%;
  border-top-width: 1px;
  border-bottom-width: 1px;
}

.cropper-dashed.dashed-v {
  top: 0;
  left: 33.33333333%;
  width: 33.33333333%;
  height: 100%;
  border-right-width: 1px;
  border-left-width: 1px;
}

.cropper-face,
.cropper-line,
.cropper-point {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  filter: alpha(opacity=10);
  opacity: .1;
}

.cropper-face {
  top: 0;
  left: 0;
  cursor: move;
  background-color: #fff;
}

.cropper-line {
  background-color: #69f;
}

.cropper-line.line-e {
  top: 0;
  right: -3px;
  width: 5px;
  cursor: e-resize;
}

.cropper-line.line-n {
  top: -3px;
  left: 0;
  height: 5px;
  cursor: n-resize;
}

.cropper-line.line-w {
  top: 0;
  left: -3px;
  width: 5px;
  cursor: w-resize;
}

.cropper-line.line-s {
  bottom: -3px;
  left: 0;
  height: 5px;
  cursor: s-resize;
}

.cropper-point {
  width: 5px;
  height: 5px;
  background-color: #69f;
  filter: alpha(opacity=75);
  opacity: .75;
}

.cropper-point.point-e {
  top: 50%;
  right: -3px;
  margin-top: -3px;
  cursor: e-resize;
}

.cropper-point.point-n {
  top: -3px;
  left: 50%;
  margin-left: -3px;
  cursor: n-resize;
}

.cropper-point.point-w {
  top: 50%;
  left: -3px;
  margin-top: -3px;
  cursor: w-resize;
}

.cropper-point.point-s {
  bottom: -3px;
  left: 50%;
  margin-left: -3px;
  cursor: s-resize;
}

.cropper-point.point-ne {
  top: -3px;
  right: -3px;
  cursor: ne-resize;
}

.cropper-point.point-nw {
  top: -3px;
  left: -3px;
  cursor: nw-resize;
}

.cropper-point.point-sw {
  bottom: -3px;
  left: -3px;
  cursor: sw-resize;
}

.cropper-point.point-se {
  right: -3px;
  bottom: -3px;
  width: 20px;
  height: 20px;
  cursor: se-resize;
  filter: alpha(opacity=100);
  opacity: 1;
}

.cropper-point.point-se:before {
  position: absolute;
  right: -50%;
  bottom: -50%;
  display: block;
  width: 200%;
  height: 200%;
  content: " ";
  background-color: #69f;
  filter: alpha(opacity=0);
  opacity: 0;
}

@media (min-width: 768px) {
  .cropper-point.point-se {
    width: 15px;
    height: 15px;
  }
}

@media (min-width: 992px) {
  .cropper-point.point-se {
    width: 10px;
    height: 10px;
  }
}

@media (min-width: 1200px) {
  .cropper-point.point-se {
    width: 5px;
    height: 5px;
    filter: alpha(opacity=75);
    opacity: .75;
  }
}

.cropper-bg {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC");
}

.cropper-invisible {
  filter: alpha(opacity=0);
  opacity: 0;
}

.cropper-hide {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  filter: alpha(opacity=0);
  opacity: 0;
}

.cropper-hidden {
  display: none !important;
}

.cropper-move {
  cursor: move;
}

.cropper-crop {
  cursor: crosshair;
}

.cropper-disabled .cropper-canvas,
.cropper-disabled .cropper-face,
.cropper-disabled .cropper-line,
.cropper-disabled .cropper-point {
  cursor: not-allowed;
}

.avatar-view {
  display: block;
  height: 130px;
  width: 130px;
  border: 3px solid #fff;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, .15);
  cursor: pointer;
  overflow: hidden;
  position: relative;
}

.avatar-view img {
  width: 100%;
}

.avatar-view .hoverContent{
  float: left;
  width: 100%;
  height: 30px;
  text-align: center;
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.4);
  position: absolute;
  bottom: -30px;
  -webkit-transition: all 1s; /* Safari */
  transition: all 1s;
}
.avatar-view .hoverContent .fa{
  margin-top: 8px;
}
.avatar-view:hover .hoverContent{
  bottom: 0px;
  -webkit-transition: all 1s; /* Safari */
  transition: all 1s;

}

.avatar-body {
  padding-right: 15px;
  padding-left: 15px;
}

.avatar-upload {
  overflow: hidden;
}

.avatar-upload label {
  display: block;
  float: left;
  clear: left;
  width: 100px;
}

.avatar-upload input {
  display: block;
  margin-left: 110px;
}

.avater-alert {
  margin-top: 10px;
  margin-bottom: 10px;
}

.avatar-wrapper {
  height: 364px;
  width: 100%;
  margin-top: 15px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, .25);
  background-color: #fcfcfc;
  overflow: hidden;
}

.avatar-wrapper img {
  display: block;
  height: auto;
  max-width: 100%;
}

.avatar-preview {
  float: left;
  margin-top: 15px;
  margin-right: 15px;
  border: 1px solid #eee;
  border-radius: 4px;
  background-color: #fff;
  overflow: hidden;
}

.avatar-preview:hover {
  border-color: #ccf;
  box-shadow: 0 0 5px rgba(0, 0, 0, .15);
}

.avatar-preview img {
  width: 100%;
}

.preview-lg {
  height: 184px;
  width: 184px;
  margin-top: 15px;
}

.preview-md {
  height: 100px;
  width: 100px;
}

.preview-sm {
  height: 50px;
  width: 50px;
}

@media (min-width: 992px) {
  .avatar-preview {
    float: none;
  }
}

.avatar-btns {
  margin-top: 30px;
  margin-bottom: 15px;
}


.avatar-btns .btn-group {

}

.avatar-view.avatarNews {
  display: block;
  height: 50px;
  width: auto;
  border: 0;
  border-radius: 0;
  box-shadow: 0;
  float: left;
  box-shadow: none;
}

.avatar-view.avatarNews img{
  display: none;
}
.preview-lg {
  width: 184px !important;
  height: 100.396px !important;
}



.myloader {
  float: left;
  margin-right: 15px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #a98b48;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.myloader {
  float: left;
  margin-right: 15px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #a98b48;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.avatarWrapperLoader{
  width: 100%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0px;
  background-color: #fff;
}
.avatarWrapperLoader .myloader{
  margin-left: 50%;
  margin-top: 17%;
}
.avatar-input{

}

.right_col h3{
  float: left;
  width: 100%;
  font-size: 18px;

}
.right_col h3 span{
  margin-right: 15px;
  color: #2E3132;

}

.nav.side-menu > li > a, .nav.child_menu > li > a{
  font-size: 16px;
}


/********************************************************************************/

.confirmTitle{
  float: left;
  width: 100%;
  height: auto;
  background-color: #ffe4b9;
  padding: 15px 10px;
  border-left: 5px solid #F39C12;
  margin-top: 15px;
}
.confirmTitle.red{
  background-color: #f7c5c3;
  border-left: 5px solid #FB3A3A;
}
.confirmTitle h2{
  float: left;
  width: 100%;
  font-size: 25px;
  color: #555555;
}
.confirmTitle p{
  float: left;
  width: 100%;
  font-size: 15px;
  color: #555555;
}
.topTitle{
  float: left;
  width: 100%;
  margin: 30px 0px;
  padding-bottom: 15px;
  border-bottom: 1px solid #cccccc;
  padding: 5px 15px;
}
.topTitle span{
  float: left;
  font-size: 20px;
  color: #2E3132;
  margin-right: 10px;
  vertical-align: middle;
  margin-top: 17px;
}
.topTitle h2{
  float: left;
  font-size: 33px;
  color: #2E3132;
  text-transform: uppercase;
}
.form-group {
  margin-bottom: 10px;
  float: left;
  width: 100%;
}
.error{
  color: #e42c27;
  padding-left: 0px;
  margin-top: 4px;
}
.line-w{
  float: left;
  width: 100%;
  height: 1px;
  background-color: #cccccc;
  margin: 10px 0px;
}
label{
  font-size: 17px;
  color: #555;
}
.btn {
  border-radius: 0px;
  padding: 4px 10px;
}
.btn-default{
  background-color: #2e2c39;
  color: #ffffff;
  border-color: #434343;
  padding: 9px;
  padding: 13px 20px 9px 20px;
  border-radius: 54px;
}
.file-input .btn-default{
  background-color: #005877 !important;
  color: #ffffff !important;
  border-color: #005877 !important;
}
.btn-default:hover{
  background-color: #434343;
  color: #ffffff;
  border-color: #2e2c39;
}
.btn-warning {
  background: #fff;
  border-color: #fff;
}
.btn-warning:hover{
  background: #ececec;
  border-color: #ececec;
}
.btn-info{
  position: absolute;
  top: 90px;
  right: 25px;
  background-color: #9c9c9c;
  color: #ffffff;
  border-color: #9c9c9c;
}
.subTitle{
  float: left;
  width: 100%;
  margin-top: 30px;
  margin-bottom: 15px;
  padding-bottom: 10px;
  font-size: 35px;
  color: #2E3132;
  border-bottom: 1px solid #cccccc;
  font-weight: bold;
}
.clientSelect .btn-default:hover,
.clientSelect .btn-default{
  background-color: transparent;
}
.bootstrap-select.btn-group .btn .filter-option {
  color: #2E3132;
}
.bootstrap-select.btn-group .btn .caret {
  color: #2E3132;
}
.dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover {
  color: #fff;
  text-decoration: none;
  background-color: #005877;
  outline: 0;
}

.verifiedBtn{
  background-color: #08a808;
  border-color: #08a808;
  cursor: auto;
}
.verifiedBtn:hover{
  background-color: #08a808;
  border-color: #08a808;
  cursor: auto;
}
.c100.small {
  font-size: 60px;
  text-align: center;
  float: none;
  margin: auto;
}
#reminderModal .modal-header .close {
  margin-top: -17px;
}
.sectionModal{
  float: left;
  width: 100%;
  height: auto;
}
.buttons, button, .btn {
  margin-bottom: 0px;
  margin-right: 5px;
}
.modal-content{
  border-radius: 0px;
}
p.error-messge{
  float: left;
  width: 100%;
  font-size: 15px;
  color: red;
  text-align: left;
}

.btn-group-sm>.btn, .btn-sm {
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 0px !important;
}

.status-color{
  color:#fff;
}



/*********************-- Start My Profile --********************/
.sectionLeftProfile{
  float: left;
  width: 30%;
  height: auto;
  min-height: 300px;
  text-align: center;
  margin-top: 30px;
  padding: 0px;
}
.sectionLeftProfile .section{
  float: left;
  width: 100%;
  height: auto;
  background-color: #fff;
  padding: 0px 15px;
}
.sectionLeftProfile .section img{
  width: 200px;
  border-radius: 100%;
  overflow: hidden;
}
.sectionLeftProfile .counters{
  float: left;
  width: 100%;
  height: auto;
  background-color: #fff;
  margin-top: 30px;
  padding: 15px;
}
.sectionLeftProfile .counters ul{
  float: left;
  width: 100%;
  height: auto;
  padding: 0px;
  margin-top: 5px;
}
.sectionLeftProfile .counters ul li{
  float: left;
  width: 33.3333%;
  list-style: none;
  text-align: center;
  margin: 0px;
  display: block;
}
.sectionLeftProfile .counters ul li span{
  font-size: 20px;
  color: #005877;
  text-transform:   capitalize;;
}
.sectionLeftProfile .counters ul li strong{
  font-size: 25px;
  color: #2E3132;
}
.sectionLeftProfile h2{
  float: left;
  width: 100%;
  font-size: 25px;
  color: #2E3132;
  text-align: center;
}
.sectionLeftProfile span{
  float: left;
  width: 100%;
  font-size: 15px;
  color: #1BA5CF;
  text-align: center;
}
.sectionLeftProfile span.fileinput-button span,
.sectionLeftProfile span.fileinput-button{
  color: #f9f9f9 !important;
}
.sectionLeftProfile ul{
  float: left;
  width: 100%;
  padding: 0px;
  text-align: center;
  margin-top: 30px;
}
.sectionLeftProfile ul li{
  float: none;
  width: auto;
  list-style: none;
  display:  inline-flex;
  margin: 0px 10px;
}
.sectionLeftProfile ul li a{
  float: none;
  width: auto;
  padding: 10px 15px;
  border-radius: 20px;
  text-transform:  uppercase;
}
.sectionLeftProfile ul li a:hover{
  text-decoration: none;
}
.fileinput-button{
  position: relative;
  height: 30px;
  width: 100%;
}
.fileinput-button input{
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  width: 100%;
  cursor: pointer;
}


.sectionRightProfile{
  float: right;
  width: 68%;
  height: auto;
  min-height: 300px;
  background-color: #fff;
  margin-top: 30px;
  padding: 30px 15px;
}
.sectionRightProfile .subTitle{
  margin-top: 0px;
}
.myProfile label{
  margin-top: 5px;
}
.myProfile .error {
  padding-left: 0px;
}

a.arabic{
  font-family: 'Cairo', sans-serif;
}

/*********************-- End My Profile --********************/
.datepicker table tr td.active:hover, .datepicker table tr td.active:hover:hover, .datepicker table tr td.active.disabled:hover, .datepicker table tr td.active.disabled:hover:hover, .datepicker table tr td.active:focus, .datepicker table tr td.active:hover:focus, .datepicker table tr td.active.disabled:focus, .datepicker table tr td.active.disabled:hover:focus, .datepicker table tr td.active:active, .datepicker table tr td.active:hover:active, .datepicker table tr td.active.disabled:active, .datepicker table tr td.active.disabled:hover:active, .datepicker table tr td.active.active, .datepicker table tr td.active:hover.active, .datepicker table tr td.active.disabled.active, .datepicker table tr td.active.disabled:hover.active, .open .dropdown-toggle.datepicker table tr td.active, .open .dropdown-toggle.datepicker table tr td.active:hover, .open .dropdown-toggle.datepicker table tr td.active.disabled, .open .dropdown-toggle.datepicker table tr td.active.disabled:hover {
  color: #2e3132;
  background-color: #005877;
  border-color: #005877;
}
.notificationsContent{
  float: left;
  width: 100%;
  height: auto;
  position: relative;
}
.notificationsContent span{
  float: left;
  width: 100%;
  text-align: left;
  direction: ltr;
  position: relative !important;
  right: auto !important;
  left: auto !important;
}
.notificationsContent span.time{
  color: #ababab !important;
  font-weight: normal !important;
}
.greenIcon{
  color: #57c6f4;
}
.greyIcon{
  color: #96aa8f;
}
.projectDetails{
  /*margin-top: 30px;*/
}
.projectDetails span{
  float: left;
  width: 100%;
  height: auto;
  text-align: left;
  direction: ltr;
  font-size: 17px;
  color: #005877;
  /*    border-bottom: 1px solid #cccccc;*/
  padding-bottom: 10px;
  margin-bottom: 10px;
}
.projectDetails span strong{
  padding: 0px 10px;
  font-size: 17px;
  color: #555;
  font-weight: normal;
}

.clientSelect button{
  height: 100%;
}

.contentDetails{
  float: left;
  width: 100%;
  height: auto;
  padding: 25px 15px;
  border: 1px solid #005877;
  border-radius: 0px;
  background-color: #fff;
}
.colorfulTitle{
  padding: 10px 15px;
  color: #ffffff;
  font-size: 18px;
  border-radius: 0px;
  background-color: #005877;
  width: auto;
  margin-bottom: 15px;
  margin-right: 15px;
}
.subTitle.noBorder{
  border: none;
  margin-bottom: 0px;
  color: #005877;
  font-weight: normal;
}
.remainingDaysTitle{
  margin-bottom: 0px;
  margin-top: 10px;
}
#clients_filter{
  margin-top: 0px;
}
div.dataTables_processing {
  background-image: url(/public/images/loading.svg) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-color: rgba(255,255,255,0.5) !important;
  min-height: 160px !important;
  top: 80px !important;
  width: 100% !important;;
  font-size: 15px !important;
  background-size: 60% 60% !important;
}
div.dataTables_processing{
  font-weight: 900;
  color: #000000;
  font-size: 30px;
}
.dropdown.action{
  list-style: none;
}
.dropdown.action a{
  color: #2f3132;
  font-size: 15px;
  cursor: pointer;
}
.dropdown.action a:focus,
.dropdown.action a:hover{
  text-decoration: none;
}
.dropdown.action .dropdown-menu{
  width: 82%;
  min-width: 82%;
  padding: 5px;
}
.dropdown.action .dropdown-menu li{
  float: left;
  width: 100%;
  padding: 5px 5px;
  text-align: center;
  border-bottom: 1px solid #cccccc;
}
.dropdown.action .dropdown-menu li:last-child{
  border-bottom: 0px;
}
.dropdown.action .dropdown-menu li .actionsIcon{
  float: left;
  width: 100%;
  margin: 0px;
}
.dropdown.action .dropdown-menu li .actionsIcon a{
  float: none;
  width: auto;
  margin: 0px;
  background-color: transparent;
  border: none;
  color: #005e53 !important;
  font-size: 15px;
}
.dropdown.action .dropdown-menu li .actionsIcon a i{
  font-size: 12px;
  margin: 0px 5px;
}
.dropdown.action .dropdown-menu li .actionsIcon a:hover{
  color: #1e1e1e !important;
}


/**************-- Upload Style --************/
#output ul{
  float: left;
  width: 100%;
  height: auto;
  padding: 0px;
  position: relative;
}
#output ul li{
  float: right;
  width: 20%;
  height: 100px;
  padding: 10px;
  position: relative;
  list-style: none;
  text-align: center;
}
#output ul li span{
  float: left;
  width: 100%;
  height: 100%;
  padding: 15px;
  border: 1px solid #005877;
}
#output ul li a.close{
  position: absolute;
  right: 15px;
  top: 8px;
}
/**************-- Upload Style --************/




/**************-- Start welcomSection --***************/
.welcomSection{
  float: left;
  width: 100%;
  height: auto;
  position: relative;
}
.welcomSection img.logo{
  position: relative;
  left: 50%;
  margin-left: -100px;
  top: 0px;
  width: 200px;
  display: block;
}
.welcomSection .buttonsGroup{
  position: relative;
  left: 50%;
  margin-left: -250px;
  top: 60px;
  width: 500px;
  text-align: center;
  display: inline-block;
}
.welcomSection img.nokat{
  position: relative;
  left: 50%;
  margin-left: -312px;
  top: 330px;
  opacity: 0;
}
.welcomSection img.nokat.flipInY{
  opacity: 1;
}
.welcomSection h2{
  position: relative;
  left: 50%;
  width: 300px;
  margin-left: -150px;
  top: 0px;
  text-align: center;
  font-size: 40px;
  color: #00af9e;
  opacity: 0;
}
.welcomSection h2.fadeIn{
  opacity: 1;
}
.welcomSection span{
  float: left;
  width: 100%;
  font-weight: bold;
  font-size: 31px;
  font-family: 'Cairo', sans-serif;
  color: #1d1d1d;
}
.welcomSection a{
  font-size: 28px;
  color: #1d1d1d;
}
.welcomSection a:hover{
  color: #54c0ad
}
.welcomSection .buttonsGroup a{
  padding: 10px 65px;
  text-align: center;
  color: #ffffff;
  font-size: 18px;
  margin: 0px 10px;
  opacity: 0;
  display: -webkit-inline-box;
}
.welcomSection .buttonsGroup a.bounceIn{
  opacity: 1;
}
.welcomSection .buttonsGroup p{
  float: left;
  width: 100%;
  font-size: 18px;
  color: #1f1f1f;
  margin-top: 25px;
  opacity: 0;
}
.welcomSection .buttonsGroup p.fadeInUp{
  opacity: 1;
}

.welcomSection .buttonsGroup a.one{
  background-color: #00af9e;
}
.welcomSection .buttonsGroup a.one:hover{
  background-color: #1f1f1f;
}
.welcomSection .buttonsGroup a.two{
  background-color: #1f1f1f;
}
.welcomSection .buttonsGroup a.two:hover{
  background-color: #00af9e;
}


.welcomSection.welcome img.logo {
  margin-left: -181px;
  top: 250px;
  width: 363px;
}
.welcomSection.welcome .buttonsGroup {
  margin-left: -350px;
  width: 700px;
  top: 340px;
}
.welcomSection.welcome p {
  margin-bottom: 50px;
}
.welcomSection.welcome h2 {
  float: none;
  width: 100%;
  font-size: 50px;
  color: #00af9e;
  position: relative;
  left: 0px;
  width: 300px;
  margin-left: 0px;
  top: 0px;
  text-align: center;
  margin: auto;
  opacity: 0;
}
.welcomSection.welcome h2.flipInY{
  opacity: 1;
}
/**************-- End welcomSection --***************/

.dot{
  float: right;
  width: 25px;
  height: 25px;
  background-color: #005877;
  text-align: center;
  padding: 5px;
  border-radius: 100%;
  position: relative;
}
.dot span{
  width: 15px;
  height: 15px;
  background-color: #12695f;
  float: left;
  border-radius: 100%;
  margin: 0px;
}
.dot:hover span{
  -webkit-animation: burst 2s infinite linear;
  animation: burst 2s infinite linear;
}





/*************-- Start Respons CMS --************/
@media (min-width:768px) and (max-width:1400px) {
  .sidebar-nav>ul>li>a {
    padding: 15px 15px;
  }
}
@media (min-width:768px) and (max-width:1024px) {
  .sidebar-nav>ul>li>a {
    padding: 15px 15px;
  }
  table.table-bordered tbody th, table.table-bordered tbody td {
    float: left;
    width: 100%;
    display: grid;
  }
  tr {
    float: left;
    width: 100%;
    border: none;
  }
  .actionsIcon{
    margin-bottom: 15px;
    margin-top: 15px;
  }
  #page-wrapper .col-md-4{
    width: 60%;
  }
  .sidebar {
    overflow: auto;
    padding-bottom: 130px;
  }

}



@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

  /* Force table to not be like tables anymore */
  #dataTable_wrapper table,
  #dataTable_wrapper thead,
  #dataTable_wrapper tbody,
  #dataTable_wrapper th,
  #dataTable_wrapper td,
  #dataTable_wrapper tr {
    display: block;
  }

  /* Hide table headers (but not display: none;, for accessibility) */
  #dataTable_wrapper thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  #dataTable_wrapper tr { border: 1px solid #ccc; }

  #dataTable_wrapper td {
    /* Behave  like a "row" */
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 0%;
  }

  #dataTable_wrapper td:before {
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    top: 6px;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
  }
  div.dataTables_wrapper > div.row > div, div.dataTables_length, div.dataTables_filter, div.dataTables_info, div.dataTables_paginate {
    text-align: center;
    width: 100%;
  }
  #output ul li {
    width: 50%;
  }
  .welcomSection .buttonsGroup {
    margin-left: 0px;
    width: 100%;
    left: 0px;
  }
  .welcomSection h2 {
    font-size: 40px;
  }
  .welcomSection .buttonsGroup p {
    display: block;
    margin-bottom: 15px;
  }
}



@media (min-width:300px) and (max-width:768px) {
  .sidebar-nav>ul>li>a {
    padding: 15px 15px;
  }
  #page-wrapper {
    position: relative;
    top: 115px;
    float: right;
    width: calc(100% - 0px);
    padding: 0 15px;
    background-color: #fff;
    padding-bottom: 60px !important;
  }
  .sidebar-nav>ul>li>a {
    padding: 15px 15px;
  }
  table.table-bordered tbody th, table.table-bordered tbody td {
    float: left;
    width: 100%;
    display: block;
    padding: 10px 0px;
  }
  #dataTable_wrapper tr {
    float: left;
    width: 100%;
    border: none;
  }
  .actionsIcon{
    margin-bottom: 15px;
    margin-top: 15px;
  }
  #page-wrapper .col-md-4{
    width: 60%;
  }
  .sidebar {
    overflow: auto;
    padding-bottom: 130px;
    border-right: 1px solid transparent;
    z-index: 1;
    position: fixed;
    top: 115px;
    width: 250px;
    height: 100%;
    background-color: transparent !important;
  }
  #page-wrapper .col-md-4{
    width: 80%;
  }
  .sidebar {
    padding-bottom: 0px;
    max-height: 0px;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    z-index: 999;
  }
  .sidebar.open{
    padding-bottom: 130px;
    max-height: 1000px;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
    -webkit-transition: 0.5s;
    transition: 0.5s;
  }
  .detailsCont{
    float: left;
    width: 100%;
  }
  body.nav-sm .container.body .right_col {
    padding: 15px;
    margin-left: 0px;
    float: left;
    width: 100%;
    padding-bottom: 50px !important;
    min-height: 700px !important;
    padding-top: 65px !important;
  }
  body.nav-sm .container.body .left_col {
    position: absolute;
    width: 100%;
    max-height: 0px;
    transition: all 0.5s;
    overflow: hidden;
  }
  body.nav-sm .main_container .top_nav {
    padding: 0 !important;
    display: block;
    margin-left: 0px;
    width: calc(100% - 0px);
    overflow: visible;
  }
  body.nav-md .container.body .col-md-3.left_col {
    width: 100%;
    padding: 0;
    position: fixed;
    left: 0px;
    top: 57px;
    display: flex;
    z-index: 999;
    max-height: 1000px;
  }
  body.nav-md .container.body .right_col {
    padding: 15px !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
  }
  .left_col .clearfix{
    display: none;
  }
  .table-striped>tbody>tr:nth-of-type(even) {
    background-color: #c7c7c7 ;
  }
  .sectionLeftProfile,
  .sectionRightProfile {
    width: 100%;
  }
  #notifications{
    position: fixed;
    width: 100% !important;
    left: 0px;
    top: 58px;
  }
  #output ul li {
    width: 100%;
  }
  .welcomSection img.logo {
    margin-left: -100px;
    width: 200px;
    display: block;
  }
  .welcomSection h2 {
    width: 300px;
    margin-left: -150px;
  }
  .welcomSection .buttonsGroup {
    left: 5%;
    margin-left: 0px;
    width: 90%;
  }
  .welcomSection h2 {
    font-size: 40px;
  }
}
/*************-- End Respons CMS --************/

.btn-primary {
  color: #fff;
  background-color: #2e2c39 !important;
  border-color: #434343 !important;
  border-radius: 0px !important;
  height: 40px;
  padding: 9px;
  font-family: 'Cairo', sans-serif;
  border-radius: 20px !important;
}

.adding-project-row{
  margin-top: 20px;
}

.adding-project-row input, select, textarea{
  margin-top: 7px;
}

.project-status{
  font-size: 22px;
}

.input-description{
  color: #0e8a7c;
  font-weight: bold;
}

.label{
  font-size: 85% !important;
  font-weight: normal;
  border-radius: 0px !important;
}


.currencyWithInput {
  position: absolute;
  right: auto;
  right: 10px;
  top: 27px;
  font-size: 15px;
  padding: 10px;
  height: 39px;
  border-left: 1px solid #ccc;
  border-right: 1px solid #cccccc;
}


#dataTable_length label{
  /* display: none !important; */
}

#dataTable_length select{
  /* display: block !important; */
}

.references-details a{
  line-height: 33px;
  color: #222;
}

.statusBtn:hover{
  text-decoration: none;
  opacity: 0.9;
}

.panel-default>.panel-heading {
  color: #333;
  background-color: #ffffff;
  border-color: #ddd;
  padding: 10px;
}

.carousel-inner>.item>a>img, .carousel-inner>.item>img, .img-responsive, .thumbnail a>img, .thumbnail>img {
  margin: auto;
}

.btn-default.disabled, .btn-default.disabled.active, .btn-default.disabled.focus, .btn-default.disabled:active, .btn-default.disabled:focus, .btn-default.disabled:hover, .btn-default[disabled], .btn-default[disabled].active, .btn-default[disabled].focus, .btn-default[disabled]:active, .btn-default[disabled]:focus, .btn-default[disabled]:hover, fieldset[disabled] .btn-default, fieldset[disabled] .btn-default.active, fieldset[disabled] .btn-default.focus, fieldset[disabled] .btn-default:active, fieldset[disabled] .btn-default:focus, fieldset[disabled] .btn-default:hover {
  background-color: green;
  border-color: #ccc;
}

.chosen-container-multi .chosen-choices {
  position: relative;
  overflow: hidden;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 40px;
  height: auto!important;
  height: 1%;
  border: 1px solid #ccc;
  background-color: #fff;
  cursor: text;
  border-radius: 21px !important;
}

.chosen-container-multi .chosen-choices li.search-field input[type=text] {
  margin: 11px 5px !important;
  padding: 5px;
  height: 15px;
  outline: 0;
  border: 0!important;
  background: transparent!important;
  box-shadow: none;
  color: #666;
  font-size: 100%;
  font-family: sans-serif;
  line-height: normal;
  border-radius: 0;
}

.stat-cards-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: 24px 19px;
  background-color: #FFFFFF;
  -webkit-box-shadow: 0px 15px 50px rgb(160 163 189 / 10%);
  box-shadow: 0px 15px 50px rgb(160 163 189 / 10%);
  border-radius: 10px;
  height: 100%;
}

.stat-cards-icon.primary {
  background-color: rgba(100, 100, 100, 0.1);
  color: #00506f;
  font-size: 19px;
}

.stat-cards-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-right: 9px;
}

.stat-cards-info__num {
  font-weight: 600;
  font-size: 18px;
  line-height: 1.22;
  color: #171717;
  margin-bottom: 4px;
}

.stat-cards-info__title {
  font-weight: 500;
  font-size: 14px;
  line-height: 1.22;
  color: #b9b9b9;
  margin-bottom: 6px;
}

.dashboard-sub-title {
  width: 100%;
  color: #00516f;
  height: 58px;
  line-height: 50px;
  padding: 0px 10px 0px 10px;
  border-bottom: 1px #e2e2e2 solid;
  font-size: 20px;
}

.dashboard-sub-sections{
  height: 400px;
  border-radius: 20px;
  border: 1px #e2e2e2 solid;
  background-color: #fff;
  margin: 10px;
}

.dashboard-sub-data{
  overflow: scroll;
  height: 329px;
}

.dashboard-item{
  font-size: 16px;
  color: #555;
  margin: 18px 10px 18px 10px;
  border-bottom: 1px #e2e2e2 solid;
  padding-bottom: 10px;
}

.dashboard-item span{
  font-size: 14px;
  color: #969696;
}

body.nav-md .container.body .right_col {
  padding: 65px 250px 50px 24px;
  margin-left: 230px;
  float: left;
  width: 100%;
}
body.nav-sm .container.body .right_col {
  padding: 65px 90px 50px 24px;
  margin-left: 70px;
  z-index: 2;
  /*    min-height: 1400px !important;*/
  float: left;
  width: 100%;
}

body .main_container {
  height: auto;
  float: left;
  width: 100%;
}
body{
  font-family: 'Tajawal', sans-serif;
  background-color: #fff !important;
  color: #2E3132;
}
body .container.body .right_col {
  background: #f9f9f9 !important;
}
body.nav-sm .container.body .left_col {
  width: 70px;
  padding: 0;
  /* position: fixed; */
  height: 100%;
  z-index: 200;
}
body.nav-md .container.body .col-md-3.left_col {
  width: 230px;
  padding: 0;
  /* position: fixed; */
  left: 0px;
  display: flex;
  z-index: 999;
}
.langMenu{
  min-width: unset!important;
  /* padding: 20px; */

}
.theLanguage{
  float: left;
  margin: 0;
  padding-top: 11px;
  width:fit-content;
  font-size: 18px;
  color: #000;
}
.theLanguage a{
  text-decoration: none;
  color: #000;
  padding: 10px 30px;
  margin: 0 5px;
  display: block;
  /* width: 100%; */
  border-bottom: 1px solid #80808078;
}
.langBtn{
  font-size: 18px;
  background-color: #f1f1f1;
  color: #231f20;
}
.theLanguage a:hover{
  text-decoration: none;
  color: #008000;
}
.main_container .top_nav {
  padding: 0 !important;
  display: block;
  padding: 10px 20px 0;
  margin-left: 230px;
  position: fixed;
  top: 0px;
  right: 0px;
  width: calc(100% - 230px);
  z-index: 999;
}
body.nav-sm .main_container .top_nav {
  padding: 0 !important;
  display: block;
  margin-left: 70px;
  z-index: 2;
  width: calc(100% - 70px);
}
.nav_menu {
  float: left;
  background: #f1f1f1;
  border-bottom: 1px solid #D9DEE4;
  margin-bottom: 0px;
  width: 100%;
  height: 58px;
  /* box-shadow: 0px 6px 8px rgba(178, 166, 217, 0.5); */
}
.nav.navbar-nav>li>a {
  color: #1d1d1b !important;
}
.dropdown-menu>li>a {
  color: #1d1d1b;
}
.toggle a {
  padding: 15px 15px 0;
  margin: 10px;
}
.nav-md .logoIcon{
  display: none;
}
.nav-md .logo{
  display: block;
  margin: auto;
  width: 136px;
}
.nav-sm .logoIcon{
  display: block;
  width: 35px;
  margin: auto;
}
.nav-sm .logo{
  display: none;
}
.nav_title {
  width: 100%;
  float: left;
  background-color: #fff;
  border-radius: 0;
  height: auto;
  padding: 20px 0px;
  cursor: pointer;
}
.left_col{
  width: 100%;
}
.left_col.scroll-view{
  cursor: default !important;
  width: 100%;
}
.main_menu_side{
  background-color: #fff;
}
body.nav-sm span.fa, body.nav-sm .menu_section h3 {
  display: block !important;
  display: block !important;
  float: right;
  margin-top: 8px;
  margin-left: 3px;
}

.nav.side-menu> li.active > a, body.nav-md ul.nav.child_menu li:before{
  background: #A98B48 !important;
}

/* الشريط بالكامل */
::-webkit-scrollbar {
  width: 16px; /* عرض شريط التمرير */
}

/* خلفية الشريط */
::-webkit-scrollbar-track {
  background: #f1f1f1; /* لون الخلفية */
  /* border-radius: 8px; /* شكل دائري للحواف */ */
  margin: 8px; /* تباعد داخلي */
}

/* مقبض التمرير */
::-webkit-scrollbar-thumb {
  background-color: #2e2c39; /* لون المقبض */
  border-radius: 8px; /* شكل دائري للمقبض */
  border: 3px solid #e0e0e0; /* حدود للمقبض */
}

/* عند التمرير */
::-webkit-scrollbar-thumb:hover {
  background-color: #555; /* لون عند التمرير */
}


.nav.side-menu> li.active .fa {
  color: #fff !important;
}
.side-menu li.active a img:nth-child(2){
  display: inline-block !important;
}
.side-menu li a img:nth-child(2),.side-menu li.active a img:nth-child(1) {
  display: none !important;
}
body.nav-md ul.nav.child_menu li:after{
  border-color: #A98B48 !important;
}
.nav.side-menu> li.current-page, .nav.side-menu> li{
  font-size: 17px;
}
.nav.side-menu> li.current-page, .nav.side-menu> li.active {
  border-right: 5px solid #2e2c39 !important;
}
.nav.child_menu > li > a {
  color: rgba(0, 0, 0, 1) !important;
  font-size: 15px;
  padding: 9px;
}
body.nav-sm ul.nav.child_menu {
  left: 100%;
  position: absolute;
  top: 0;
  padding: 10px;
  width: 210px;
  z-index: 4000;
  background: #A98B48;
  display: none;
}
body.nav-sm .nav.side-menu li.active-sm {
  border-right: 5px solid #A4A4A4;
}
body.nav-sm .menu_section span{
  display: none !important;
}
.toggle a i {
  font-size: 26px;
  color: #2E3132;
  cursor: pointer;
}
.bg-green {
  background: #2e2c39 !important;
  border: 1px solid #2e2c39 !important;
  color: #fff;
}
#sidebar-menu img {
  width: 30px;
  opacity: .99;
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin-left: -6px
}
body.nav-sm .nav.side-menu li a img {
  font-size: 25px !important;
  text-align: center;
  width: 100% !important;
  margin-bottom: 5px;
  width: 45px !important;
}

.form-control{
  border-radius: 0px;
  height: 40px;
  border: none;
  box-shadow: none;
  border: 1px solid #ccc;
  font-family: 'Cairo', sans-serif;
  border-radius: 25px;
  /*padding: 23px;    */
}
.form-control:focus {
  border-radius: 0px;
  border-color: #005877 !important;
  outline: 0;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgb(169, 139, 72) !important;
}

/**/
.nav.side-menu> li.activities_0.active > a,
body.nav-sm .nav.side-menu> li.activities_0 .child_menu,
.nav.side-menu> li.activities_0 .child_menu li:before{
  background: #2e2c39 !important;
  color: #fff !important;
}
.nav.side-menu> li.activities_0 .child_menu li:after{
  border-color: #2e2c39 !important;
}
/**/
.nav.side-menu> li.activities_1.active > a,
body.nav-sm .nav.side-menu> li.activities_1 .child_menu,
.nav.side-menu> li.activities_1 .child_menu li:before{
  background: #D33B3B !important;
}
.nav.side-menu> li.activities_1 .child_menu li:after{
  border-color: #D33B3B !important;
}
/**/
.nav.side-menu> li.activities_2.active > a,
body.nav-sm .nav.side-menu> li.activities_2 .child_menu,
.nav.side-menu> li.activities_2 .child_menu li:before{
  background: #1BA5CF !important;
}
.nav.side-menu> li.activities_2 .child_menu li:after{
  border-color: #1BA5CF !important;
}
/**/
.nav.side-menu> li.activities_3.active > a,
body.nav-sm .nav.side-menu> li.activities_3 .child_menu,
.nav.side-menu> li.activities_3 .child_menu li:before{
  background: #2AAC83 !important;
}
.nav.side-menu> li.activities_3 .child_menu li:after{
  border-color: #2AAC83 !important;
}
/**/
.nav.side-menu> li.activities_4.active > a,
body.nav-sm .nav.side-menu> li.activities_4 .child_menu,
.nav.side-menu> li.activities_4 .child_menu li:before{
  background: #935695 !important;
}
.nav.side-menu> li.activities_4 .child_menu li:after{
  border-color: #935695 !important;
}
/**/
.nav.side-menu> li.activities_5.active > a,
body.nav-sm .nav.side-menu> li.activities_5 .child_menu,
.nav.side-menu> li.activities_5 .child_menu li:before{
  background: #B39547 !important;
}
.nav.side-menu> li.activities_5 .child_menu li:after{
  border-color: #B39547 !important;
}
/**/
.nav.side-menu> li.activities_6.active > a,
body.nav-sm .nav.side-menu> li.activities_6 .child_menu,
.nav.side-menu> li.activities_6 .child_menu li:before{
  background: #E89D32 !important;
}
.nav.side-menu> li.activities_6 .child_menu li:after{
  border-color: #E89D32 !important;
}
/**/
.nav.side-menu> li.activities_7.active > a,
body.nav-sm .nav.side-menu> li.activities_7 .child_menu,
.nav.side-menu> li.activities_7 .child_menu li:before{
  background: #BAB613 !important;
}
.nav.side-menu> li.activities_7 .child_menu li:after{
  border-color: #BAB613 !important;
}

.nav.side-menu> li {
  position: relative;
  /* display: block; */
  cursor: pointer;
  border-bottom: 1px solid #2e2c39;
  z-index: 9999 !important;

}
.nav.side-menu> li:last-child{
  border-bottom: 0px;
}

.menu_section >ul {
  margin-top: 10px;
  cursor: default;
}

/******--Start Responsive Menu--*****/

@media (max-width: 767px) {
  body.nav-sm .container.body .left_col {
    position: relative;
  }

}

@media (max-width: 480px) {
  body.nav-sm .container.body .left_col {
    position: relative;
  }
}


/******--End Responsive Menu--*****/



/****--Start login---****/

.login_content {
  margin: 0 auto;
  padding: 0px 0 0;
  position: relative;
  text-align: center;
  text-shadow: 0 1px 0 #fff;
  min-width: 280px;
}
#login .form-control {
  border-color: #A98B48 !important;
  border-radius: 4px;
  height: 45px;
}
.login_content form input[type="text"], .login_content form input[type="email"], .login_content form input[type="password"] {
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 0 0px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
  -moz-box-shadow: 0 0px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
  -ms-box-shadow: 0 0px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
  -o-box-shadow: 0 0px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
  box-shadow: 0 0px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  border: 1px solid #2E3132;
  color: #777;
  margin: 0 0 20px;
  width: 100%;
}

.login_content h1 {
  font-family: "Optima Regular";
  font-size: 30px;
  letter-spacing: -0.05em;
  line-height: 20px;
  margin: 10px 0 30px;
  color: #fff;
}

.btn-primary:hover{
  color: #ffffff !important;
  background-color: #231f20 !important;
  border-color: #231f20 !important;
}
.separator img{
  margin-bottom: 20px;
  width: 75%;
}
.separator p{
  color: #fff;
}

/****--End login---****/


/****--Start index---****/
.mainPage{
  float: left;
  width: 100%;
  height: auto;
}

.textMain {
    position: relative;
    display: inline-block;
    color: #006793;
    font-size: 35px;
    font-weight: 700;
  }

  .textMain::after {
    content: "";
    position: absolute;
    bottom: 3px;
    left: 0;
    width: 100%;
    height: 3px;
    /* background-color: #b1a5d7; */
  }

.detailsCont{
  float: left;
  width: 100%;
  height: auto;
}
.dtFilters{
  width: 100%;
  height: auto;
  float: left;
  margin-bottom: 20px;
  border: 1px solid #2E3132;
  border-top: 0;
  padding-bottom: 20px;
}
.dataFilterBtn {
  float: left;
  width: 100%;
  padding: 10px 0px;
  border-radius: 0px;
  background-color: transparent;
  color: #2E3132;
  cursor: pointer;
  font-size: 21px;
  margin: 0px 0px;
  border-bottom: 1px solid #2E3132;
}
.dataFilterBtn h3{
  float: left !important;
  width: auto !important;
  height: 100%;
  color: #2E3132;
  margin: 0;
  padding-right: 20px;
  font-size: 24px;
}
.dataFilterBtn i{
  float: left;
}
.form-horizontal .control-label {
  padding-top: 8px;
  color: #1d1d1b;
  float: left;
  text-align: left;
}
.dropdown-menu {
  border: medium none;
  border-radius: 3px;
  box-shadow: 0 0 3px;
  display: none;
  float: left;
  left: 0;
  list-style: none outside none;
  padding: 0;
  position: absolute;
  text-shadow: none;
  top: 100%;
  z-index: 1000;
  border-radius: 2px;
  border-top: 1px solid #999999;
  color: #2E3132;
  font-size: 15px;
}
.addingBar.addBtn{
  width: 100%;
  float: left;
  margin-top: 32px;
}
.addingBar.addBtn .btn-group{
  float: left;
}

.daterangepicker td.active, .daterangepicker td.active:hover {
  background-color: #1d1d1b;
  color: #fff;
}
.applyBtn.btn-success {
  color: #1d1d1b;
  background-color: #2E3132;
  border-color:  #1d1d1b;
}
.applyBtn.btn-success:hover {
  color: #fff;
  background-color: #004056;
  border-color:  #004056;
}
.cancelBtn.btn-default{
  color:  #005877;
  background-color: #005877;
  border-color:  #2E3132;
}
.cancelBtn.btn-default:hover{
  color:  #fff;
  background-color: #004056;
  border-color:  #004056;
}
.calendar {
  float: left !important;
}
.daterangepicker .input-mini.active {
  border: 1px solid #1d1d1b;
  border-radius: 4px;
}

.dropdown-menu:after {
  border-bottom: 6px solid #ffffff;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  content: "";
  display: inline-block;
  position: absolute;
}
.datepicker-dropdown.datepicker-orient-left:after {
  left: 7px;
  right: auto;
}

/****--End index---****/


#register-form {
  border: 1px solid #DFDCDC;
  border-radius: 15px 15px 15px 15px;
  display: inline-block;
  width: auto;
}

#register-form .fieldgroup {
  background: url("form-divider.gif") repeat-x scroll left top transparent;
  display: inline-block;
  padding: 8px 10px;
  width: 340px;
}

#register-form .fieldgroup label {
  float: left;
  padding: 15px 0 0;
  text-align: right;
  width: 110px;
}

#register-form .fieldgroup input, #register-form .fieldgroup textarea, #register-form .fieldgroup select {
  float: right;
  margin: 10px 0;
  height: 25px;
}

#register-form .submit {
  padding: 10px;
  width: 220px;
  height: 40px !important;
}

#register-form .fieldgroup label.error {
  color: #FB3A3A;
  display: inline-block;
  margin: 4px 0 5px 125px;
  padding: 0;
  text-align: left;
  width: 220px;
}

.uploadFileArea {
  width: 100%;
}
body.nav-sm .nav.side-menu li a {
  text-align: center !important;
  font-weight: 400;
  font-size: 13px;
  padding: 10px 5px;
}


/*****----Start DataTable------*****/

.dataTables_wrapper {
  position: relative;
  clear: both;
  zoom: 1;
  margin-top: 20px;
}

table.table-bordered.dataTable {
  width: 100% !important;
  border: 0;
  padding: 0;
}
table.table-bordered.dataTable tbody th, table.table-bordered.dataTable tbody td {
  border-bottom-width: 5px !important;
  border-color: white;
  font-size: 16px;
  padding: 10px 0px 10px 0;
}
table.table-bordered.dataTable thead{
  background-color: #231f20;
  color: #fff;
  line-height: 37px;
  font-size: 18px;
}
table.table-bordered thead th, table.table-bordered thead td {
  border-left-width: 0;
  border-top-width: 0;
  border-bottom: 0;
}
.table-striped>tbody>tr:nth-of-type(odd) {
  background-color: #e6e6e6 ;
  color: #555;
  line-height: 26px;
  font-size: 15px;
}
.table-striped>tbody>tr:nth-of-type(even) {
  background-color: #f5f4f4 ;
  color: #555;
  line-height: 26px;
  font-size: 15px;
}
.table-bordered>tbody>tr>td, .table-bordered>tbody>tr>th, .table-bordered>tfoot>tr>td, .table-bordered>tfoot>tr>th, .table-bordered>thead>tr>td, .table-bordered>thead>tr>th {
  border: 1px solid #ffffff;
}
table.dataTable.table-condensed thead > tr > th {
  padding-right: 20px;
  font-weight: normal;
}
.pagination>li>a{
  position: relative;
  float: left;
  padding: 6px 12px;
  margin-left: -1px;
  line-height: 1.42857143;
  color: #848484 ;
  text-decoration: none;
  background-color: #fff !important;
  border: 1px solid #A4A4A4 !important;
}
.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
  z-index: 2;
  color: #ffffff;
  cursor: default;
  background-color: #555 !important;
  border-color: #555 !important;
}
.pagination>.disabled>a, .pagination>.disabled>a:focus, .pagination>.disabled>a:hover, .pagination>.disabled>span, .pagination>.disabled>span:focus, .pagination>.disabled>span:hover {
  color: #555;
  cursor: not-allowed;
  background-color: #fff;
  border-color: #e6e6e6 !important;
}
.table-condensed>thead>tr>th, .table-condensed>tbody>tr>th, .table-condensed>tfoot>tr>th, .table-condensed>thead>tr>td, .table-condensed>tbody>tr>td, .table-condensed>tfoot>tr>td {
  padding: 5px 12px;
  text-align: center;
}
/*****----End DataTable------*****/



/*****----Start actionsIcon------*****/

.actionsIcon{
  width: auto;
  height: auto;
  float: left;
  margin: 5px;
}
.actionsIcon .glyphicon-pencil{
  color: #1d1d1b;
}
.actionsIcon .glyphicon-pencil:hover{
  color: #2E3132;
}
.actionsIcon.delete a{
  color: #D33B3B;
}
.actionsIcon.delete a:hover{
  color: #bb2a2a;
}
.actionsIcon.delete a i{
  font-size: 16px;
}
.actionsIcon a i{
  font-size: 16px;
}
/*****-------End actionsIcon-------*****/



/*****-------Start addEditTextData-------*****/
.page-header {
  padding-bottom: 9px;
  margin: 40px 0 20px;
  border-bottom: 1px solid #eee;
  color: #2E3132;
}
label {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;
  font-weight: normal;
  color: #1d1d1b;
  font-size: 17px;
  margin-top: 15px;
}

.fileinput-button input {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0px;
  opacity: 0;
  -ms-filter: 'alpha(opacity=0)';
  font-size: 28px;
  direction: ltr;
  cursor: pointer;
  float: left;
  width: auto;
}


.progress-bar-success {
  background-color: #231f20;
  border-radius: 220px;
}

.btn-success {
  color: #fff;
  background-color: seagreen;
  border-color: transparent;
  margin-bottom: 0px;
  border-radius: 20px !important;
  height: 38px;
}
.btn-success:hover {
  color: #ffffff !important;
  background-color: green;
  border-color: green;
}

.titleSelectPhoto{
  color: #1d1d1b;
  font-size: 17px;
}
.photoPreview{
  width: 100%;
  height: auto;
  float: left;
}
.photoPreview img{
  width: 100%;
  /*height: 350px;*/
  float: left;
  margin-bottom: 30px;
}
.statusIcon.active .glyphicon,
.actionsIcon.delete.active .glyphicon{
  font-size: 18px;
  color: #1cb41c;
}
.statusIcon.passive .glyphicon,
.actionsIcon.delete.passive .glyphicon{
  font-size: 18px;
  color: #db1c1c;
}
/*****-------End addEditTextData-------*****/

#ascrail2000{
  display: none !important;
}



.myBtn a.active {
  color: #fff;
  background-color: #5cb85c;
  border-color: #4cae4c;
}

.saveBtnNew{
  padding: 10px 20px;
  margin-bottom: 15px;
  font-size: 18px;
}
.cke_editable {
  font-size: 15px !important;
}


@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) {


}

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2) {



}

@media (max-width: 767px) {


}

@media (max-width: 480px) {

}


/* *********  /verticle tabs  **************************** */
/* *********  image cropping  **************************** */
/*!
* Cropper v0.8.0
* https://github.com/fengyuanchen/cropper
*
* Copyright 2014-2015 Fengyuan Chen
* Released under the MIT license
*
* Date: 2015-02-19T06:49:29.144Z
*/

.cropper-container {
  position: relative;
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

.cropper-container img {
  display: block;
  width: 100%;
  min-width: 0 !important;
  max-width: none !important;
  height: 100%;
  min-height: 0 !important;
  max-height: none !important;
}

.cropper-modal,
.cropper-canvas {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.cropper-canvas {
  background-color: #fff;
  filter: alpha(opacity=0);
  opacity: 0;
}

.cropper-modal {
  background-color: #000;
  filter: alpha(opacity=50);
  opacity: .5;
}

.cropper-cropbox {
  position: absolute;
  top: 10%;
  left: 10%;
  width: 80%;
  height: 80%;
}

.cropper-viewer {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  outline: 1px solid #69f;
  outline-color: rgba(102, 153, 255, .75);
}

.cropper-dashed {
  position: absolute;
  display: block;
  filter: alpha(opacity=50);
  border: 0 dashed #fff;
  opacity: .5;
}

.cropper-dashed.dashed-h {
  top: 33.33333333%;
  left: 0;
  width: 100%;
  height: 33.33333333%;
  border-top-width: 1px;
  border-bottom-width: 1px;
}

.cropper-dashed.dashed-v {
  top: 0;
  left: 33.33333333%;
  width: 33.33333333%;
  height: 100%;
  border-right-width: 1px;
  border-left-width: 1px;
}

.cropper-face,
.cropper-line,
.cropper-point {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  filter: alpha(opacity=10);
  opacity: .1;
}

.cropper-face {
  top: 0;
  left: 0;
  cursor: move;
  background-color: #fff;
}

.cropper-line {
  background-color: #69f;
}

.cropper-line.line-e {
  top: 0;
  right: -3px;
  width: 5px;
  cursor: e-resize;
}

.cropper-line.line-n {
  top: -3px;
  left: 0;
  height: 5px;
  cursor: n-resize;
}

.cropper-line.line-w {
  top: 0;
  left: -3px;
  width: 5px;
  cursor: w-resize;
}

.cropper-line.line-s {
  bottom: -3px;
  left: 0;
  height: 5px;
  cursor: s-resize;
}

.cropper-point {
  width: 5px;
  height: 5px;
  background-color: #69f;
  filter: alpha(opacity=75);
  opacity: .75;
}

.cropper-point.point-e {
  top: 50%;
  right: -3px;
  margin-top: -3px;
  cursor: e-resize;
}

.cropper-point.point-n {
  top: -3px;
  left: 50%;
  margin-left: -3px;
  cursor: n-resize;
}

.cropper-point.point-w {
  top: 50%;
  left: -3px;
  margin-top: -3px;
  cursor: w-resize;
}

.cropper-point.point-s {
  bottom: -3px;
  left: 50%;
  margin-left: -3px;
  cursor: s-resize;
}

.cropper-point.point-ne {
  top: -3px;
  right: -3px;
  cursor: ne-resize;
}

.cropper-point.point-nw {
  top: -3px;
  left: -3px;
  cursor: nw-resize;
}

.cropper-point.point-sw {
  bottom: -3px;
  left: -3px;
  cursor: sw-resize;
}

.cropper-point.point-se {
  right: -3px;
  bottom: -3px;
  width: 20px;
  height: 20px;
  cursor: se-resize;
  filter: alpha(opacity=100);
  opacity: 1;
}

.cropper-point.point-se:before {
  position: absolute;
  right: -50%;
  bottom: -50%;
  display: block;
  width: 200%;
  height: 200%;
  content: " ";
  background-color: #69f;
  filter: alpha(opacity=0);
  opacity: 0;
}

@media (min-width: 768px) {
  .cropper-point.point-se {
    width: 15px;
    height: 15px;
  }
}

@media (min-width: 992px) {
  .cropper-point.point-se {
    width: 10px;
    height: 10px;
  }
}

@media (min-width: 1200px) {
  .cropper-point.point-se {
    width: 5px;
    height: 5px;
    filter: alpha(opacity=75);
    opacity: .75;
  }
}

.cropper-bg {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC");
}

.cropper-invisible {
  filter: alpha(opacity=0);
  opacity: 0;
}

.cropper-hide {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  filter: alpha(opacity=0);
  opacity: 0;
}

.cropper-hidden {
  display: none !important;
}

.cropper-move {
  cursor: move;
}

.cropper-crop {
  cursor: crosshair;
}

.cropper-disabled .cropper-canvas,
.cropper-disabled .cropper-face,
.cropper-disabled .cropper-line,
.cropper-disabled .cropper-point {
  cursor: not-allowed;
}

.avatar-view {
  display: block;
  height: 130px;
  width: 130px;
  border: 3px solid #fff;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, .15);
  cursor: pointer;
  overflow: hidden;
  position: relative;
}

.avatar-view img {
  width: 100%;
}

.avatar-view .hoverContent{
  float: left;
  width: 100%;
  height: 30px;
  text-align: center;
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.4);
  position: absolute;
  bottom: -30px;
  -webkit-transition: all 1s; /* Safari */
  transition: all 1s;
}
.avatar-view .hoverContent .fa{
  margin-top: 8px;
}
.avatar-view:hover .hoverContent{
  bottom: 0px;
  -webkit-transition: all 1s; /* Safari */
  transition: all 1s;

}

.avatar-body {
  padding-right: 15px;
  padding-left: 15px;
}

.avatar-upload {
  overflow: hidden;
}

.avatar-upload label {
  display: block;
  float: left;
  clear: left;
  width: 100px;
}

.avatar-upload input {
  display: block;
  margin-left: 110px;
}

.avater-alert {
  margin-top: 10px;
  margin-bottom: 10px;
}

.avatar-wrapper {
  height: 364px;
  width: 100%;
  margin-top: 15px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, .25);
  background-color: #fcfcfc;
  overflow: hidden;
}

.avatar-wrapper img {
  display: block;
  height: auto;
  max-width: 100%;
}

.avatar-preview {
  float: left;
  margin-top: 15px;
  margin-right: 15px;
  border: 1px solid #eee;
  border-radius: 4px;
  background-color: #fff;
  overflow: hidden;
}

.avatar-preview:hover {
  border-color: #ccf;
  box-shadow: 0 0 5px rgba(0, 0, 0, .15);
}

.avatar-preview img {
  width: 100%;
}

.preview-lg {
  height: 184px;
  width: 184px;
  margin-top: 15px;
}

.preview-md {
  height: 100px;
  width: 100px;
}

.preview-sm {
  height: 50px;
  width: 50px;
}

@media (min-width: 992px) {
  .avatar-preview {
    float: none;
  }
}

.avatar-btns {
  margin-top: 30px;
  margin-bottom: 15px;
}


.avatar-btns .btn-group {

}

.avatar-view.avatarNews {
  display: block;
  height: 50px;
  width: auto;
  border: 0;
  border-radius: 0;
  box-shadow: 0;
  float: left;
  box-shadow: none;
}

.avatar-view.avatarNews img{
  display: none;
}
.preview-lg {
  width: 184px !important;
  height: 100.396px !important;
}



.myloader {
  float: left;
  margin-right: 15px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #a98b48;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.myloader {
  float: left;
  margin-right: 15px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #a98b48;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.avatarWrapperLoader{
  width: 100%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0px;
  background-color: #fff;
}
.avatarWrapperLoader .myloader{
  margin-left: 50%;
  margin-top: 17%;
}
.avatar-input{

}

.right_col h3{
  float: left;
  width: 100%;
  font-size: 18px;

}
.right_col h3 span{
  margin-right: 15px;
  color: #2E3132;

}

.nav.side-menu > li > a, .nav.child_menu > li > a{
  font-size: 16px;
}


/********************************************************************************/

.confirmTitle{
  float: left;
  width: 100%;
  height: auto;
  background-color: #ffe4b9;
  padding: 15px 10px;
  border-left: 5px solid #F39C12;
  margin-top: 15px;
}
.confirmTitle.red{
  background-color: #f7c5c3;
  border-left: 5px solid #FB3A3A;
}
.confirmTitle h2{
  float: left;
  width: 100%;
  font-size: 25px;
  color: #555555;
}
.confirmTitle p{
  float: left;
  width: 100%;
  font-size: 15px;
  color: #555555;
}
.topTitle{
  float: left;
  width: 100%;
  margin: 30px 0px;
  padding-bottom: 15px;
  border-bottom: 1px solid #cccccc;
  padding: 5px 15px;
}
.topTitle span{
  float: left;
  font-size: 20px;
  color: #2E3132;
  margin-right: 10px;
  vertical-align: middle;
  margin-top: 17px;
}
.topTitle h2{
  float: left;
  font-size: 33px;
  color: #2E3132;
  text-transform: uppercase;
}
.form-group {
  margin-bottom: 10px;
  float: left;
  width: 100%;
}
.error{
  color: #e42c27;
  padding-left: 0px;
  margin-top: 4px;
}
.line-w{
  float: left;
  width: 100%;
  height: 1px;
  background-color: #cccccc;
  margin: 10px 0px;
}
label{
  color: #555;
  font-size: 25px;
  color: #555;
  font-weight: 500;
}
.btn {
  border-radius: 0px;
  padding: 4px 10px;
}
.btn-default{
  background-color: #2e2c39;
  color: #ffffff;
  border-color: transparent;
  padding: 9px;
  padding: 13px 20px 9px 20px;
  border-radius: 54px;
}
.file-input .btn-default{
  background-color: #005877 !important;
  color: #ffffff !important;
  border-color: #005877 !important;
}
.btn-default:hover{
  background-color: #434343;
  color: #ffffff;
  border-color: transparent;
}
.btn-warning {
  background: #fff;
  border-color: #fff;
}
.btn-warning:hover{
  background: #ececec;
  border-color: #ececec;
}
.btn-info{
  position: absolute;
  top: 90px;
  right: 25px;
  background-color: #9c9c9c;
  color: #ffffff;
  border-color: #9c9c9c;
}
.subTitle{
  float: left;
  width: 100%;
  margin-top: 30px;
  margin-bottom: 15px;
  padding-bottom: 10px;
  font-size: 35px;
  color: #2E3132;
  border-bottom: 1px solid #cccccc;
  font-weight: bold;
}
.clientSelect .btn-default:hover,
.clientSelect .btn-default{
  background-color: transparent;
}
.bootstrap-select.btn-group .btn .filter-option {
  color: #2E3132;
}
.bootstrap-select.btn-group .btn .caret {
  color: #2E3132;
}
.dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover {
  color: #fff;
  text-decoration: none;
  background-color: #005877;
  outline: 0;
}

.verifiedBtn{
  background-color: #08a808;
  border-color: #08a808;
  cursor: auto;
}
.verifiedBtn:hover{
  background-color: #08a808;
  border-color: #08a808;
  cursor: auto;
}
.c100.small {
  font-size: 60px;
  text-align: center;
  float: none;
  margin: auto;
}
#reminderModal .modal-header .close {
  margin-top: -17px;
}
.sectionModal{
  float: left;
  width: 100%;
  height: auto;
}
.buttons, button, .btn {
  margin-bottom: 0px;
  margin-right: 5px;
}
.modal-content{
  border-radius: 0px;
}
p.error-messge{
  float: left;
  width: 100%;
  font-size: 15px;
  color: red;
  text-align: left;
}

.btn-group-sm>.btn, .btn-sm {
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 0px !important;
}

.status-color{
  color:#fff;
}



/*********************-- Start My Profile --********************/
.sectionLeftProfile{
  float: left;
  width: 30%;
  height: auto;
  min-height: 300px;
  text-align: center;
  margin-top: 30px;
  padding: 0px;
}
.sectionLeftProfile .section{
  float: left;
  width: 100%;
  height: auto;
  background-color: #fff;
  padding: 0px 15px;
}
.sectionLeftProfile .section img{
  width: 200px;
  border-radius: 100%;
  overflow: hidden;
}
.sectionLeftProfile .counters{
  float: left;
  width: 100%;
  height: auto;
  background-color: #fff;
  margin-top: 30px;
  padding: 15px;
}
.sectionLeftProfile .counters ul{
  float: left;
  width: 100%;
  height: auto;
  padding: 0px;
  margin-top: 5px;
}
.sectionLeftProfile .counters ul li{
  float: left;
  width: 33.3333%;
  list-style: none;
  text-align: center;
  margin: 0px;
  display: block;
}
.sectionLeftProfile .counters ul li span{
  font-size: 20px;
  color: #005877;
  text-transform:   capitalize;;
}
.sectionLeftProfile .counters ul li strong{
  font-size: 25px;
  color: #2E3132;
}
.sectionLeftProfile h2{
  float: left;
  width: 100%;
  font-size: 25px;
  color: #2E3132;
  text-align: center;
}
.sectionLeftProfile span{
  float: left;
  width: 100%;
  font-size: 15px;
  color: #1BA5CF;
  text-align: center;
}
.sectionLeftProfile span.fileinput-button span,
.sectionLeftProfile span.fileinput-button{
  color: #f9f9f9 !important;
}
.sectionLeftProfile ul{
  float: left;
  width: 100%;
  padding: 0px;
  text-align: center;
  margin-top: 30px;
}
.sectionLeftProfile ul li{
  float: none;
  width: auto;
  list-style: none;
  display:  inline-flex;
  margin: 0px 10px;
}
.sectionLeftProfile ul li a{
  float: none;
  width: auto;
  padding: 10px 15px;
  border-radius: 20px;
  text-transform:  uppercase;
}
.sectionLeftProfile ul li a:hover{
  text-decoration: none;
}
.fileinput-button{
  position: relative;
  height: 30px;
  width: 100%;
}
.fileinput-button input{
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  width: 100%;
  cursor: pointer;
}


.sectionRightProfile{
  float: right;
  width: 68%;
  height: auto;
  min-height: 300px;
  background-color: #fff;
  margin-top: 30px;
  padding: 30px 15px;
}
.sectionRightProfile .subTitle{
  margin-top: 0px;
}
.myProfile label{
  margin-top: 5px;
}
.myProfile .error {
  padding-left: 0px;
}

a.arabic{
  font-family: 'Cairo', sans-serif;
}

/*********************-- End My Profile --********************/
.datepicker table tr td.active:hover, .datepicker table tr td.active:hover:hover, .datepicker table tr td.active.disabled:hover, .datepicker table tr td.active.disabled:hover:hover, .datepicker table tr td.active:focus, .datepicker table tr td.active:hover:focus, .datepicker table tr td.active.disabled:focus, .datepicker table tr td.active.disabled:hover:focus, .datepicker table tr td.active:active, .datepicker table tr td.active:hover:active, .datepicker table tr td.active.disabled:active, .datepicker table tr td.active.disabled:hover:active, .datepicker table tr td.active.active, .datepicker table tr td.active:hover.active, .datepicker table tr td.active.disabled.active, .datepicker table tr td.active.disabled:hover.active, .open .dropdown-toggle.datepicker table tr td.active, .open .dropdown-toggle.datepicker table tr td.active:hover, .open .dropdown-toggle.datepicker table tr td.active.disabled, .open .dropdown-toggle.datepicker table tr td.active.disabled:hover {
  color: #2e3132;
  background-color: #005877;
  border-color: #005877;
}
.notificationsContent{
  float: left;
  width: 100%;
  height: auto;
  position: relative;
}
.notificationsContent span{
  float: left;
  width: 100%;
  text-align: left;
  direction: ltr;
  position: relative !important;
  right: auto !important;
  left: auto !important;
}
.notificationsContent span.time{
  color: #ababab !important;
  font-weight: normal !important;
}
.greenIcon{
  color: #57c6f4;
}
.greyIcon{
  color: #96aa8f;
}
.projectDetails{
  /*margin-top: 30px;*/
}
.projectDetails span{
  float: left;
  width: 100%;
  height: auto;
  text-align: left;
  direction: ltr;
  font-size: 17px;
  color: #005877;
  /*    border-bottom: 1px solid #cccccc;*/
  padding-bottom: 10px;
  margin-bottom: 10px;
}
.projectDetails span strong{
  padding: 0px 10px;
  font-size: 17px;
  color: #555;
  font-weight: normal;
}

.clientSelect button{
  height: 100%;
}

.contentDetails{
  float: left;
  width: 100%;
  height: auto;
  padding: 25px 15px;
  border: 1px solid #005877;
  border-radius: 0px;
  background-color: #fff;
}
.colorfulTitle{
  padding: 10px 15px;
  color: #ffffff;
  font-size: 18px;
  border-radius: 0px;
  background-color: #005877;
  width: auto;
  margin-bottom: 15px;
  margin-right: 15px;
}
.subTitle.noBorder{
  border: none;
  margin-bottom: 0px;
  color: #005877;
  font-weight: normal;
}
.remainingDaysTitle{
  margin-bottom: 0px;
  margin-top: 10px;
}
#clients_filter{
  margin-top: 0px;
}
div.dataTables_processing {
  background-image: url(/public/images/loading.svg) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-color: rgba(255,255,255,0.5) !important;
  min-height: 160px !important;
  top: 80px !important;
  width: 100% !important;;
  font-size: 15px !important;
  background-size: 60% 60% !important;
}

/* #dataTable_wrapper .col-sm-12{
  padding: 0;
} */

.dropdown.action{
  list-style: none;
}
.dropdown.action a{
  color: #2f3132;
  font-size: 15px;
  cursor: pointer;
}
.dropdown.action a:focus,
.dropdown.action a:hover{
  text-decoration: none;
}
.dropdown.action .dropdown-menu{
  width: 82%;
  min-width: 82%;
  padding: 5px;
}
.dropdown.action .dropdown-menu li{
  float: left;
  width: 100%;
  padding: 5px 5px;
  text-align: center;
  border-bottom: 1px solid #cccccc;
}
.dropdown.action .dropdown-menu li:last-child{
  border-bottom: 0px;
}
.dropdown.action .dropdown-menu li .actionsIcon{
  float: left;
  width: 100%;
  margin: 0px;
}
.dropdown.action .dropdown-menu li .actionsIcon a{
  float: none;
  width: auto;
  margin: 0px;
  background-color: transparent;
  border: none;
  color: #005e53 !important;
  font-size: 15px;
}
.dropdown.action .dropdown-menu li .actionsIcon a i{
  font-size: 12px;
  margin: 0px 5px;
}
.dropdown.action .dropdown-menu li .actionsIcon a:hover{
  color: #1e1e1e !important;
}


/**************-- Upload Style --************/
#output ul{
  float: left;
  width: 100%;
  height: auto;
  padding: 0px;
  position: relative;
}
#output ul li{
  float: right;
  width: 20%;
  height: 100px;
  padding: 10px;
  position: relative;
  list-style: none;
  text-align: center;
}
#output ul li span{
  float: left;
  width: 100%;
  height: 100%;
  padding: 15px;
  border: 1px solid #005877;
}
#output ul li a.close{
  position: absolute;
  right: 15px;
  top: 8px;
}
/**************-- Upload Style --************/




/**************-- Start welcomSection --***************/
.welcomSection{
  float: left;
  width: 100%;
  height: auto;
  position: relative;
}
.welcomSection img.logo{
  position: relative;
  left: 50%;
  margin-left: -100px;
  top: 0px;
  width: 200px;
  display: block;
}
.welcomSection .buttonsGroup{
  position: relative;
  left: 50%;
  margin-left: -250px;
  top: 60px;
  width: 500px;
  text-align: center;
  display: inline-block;
}
.welcomSection img.nokat{
  position: relative;
  left: 50%;
  margin-left: -312px;
  top: 330px;
  opacity: 0;
}
.welcomSection img.nokat.flipInY{
  opacity: 1;
}
.welcomSection h2{
  position: relative;
  left: 50%;
  width: 300px;
  margin-left: -150px;
  top: 0px;
  text-align: center;
  font-size: 40px;
  color: #00af9e;
  opacity: 0;
}
.welcomSection h2.fadeIn{
  opacity: 1;
}
.welcomSection span{
  float: left;
  width: 100%;
  font-weight: bold;
  font-size: 31px;
  font-family: 'Cairo', sans-serif;
  color: #1d1d1d;
}
.welcomSection a{
  font-size: 28px;
  color: #1d1d1d;
}
.welcomSection a:hover{
  color: #54c0ad
}
.welcomSection .buttonsGroup a{
  padding: 10px 65px;
  text-align: center;
  color: #ffffff;
  font-size: 18px;
  margin: 0px 10px;
  opacity: 0;
  display: -webkit-inline-box;
}
.welcomSection .buttonsGroup a.bounceIn{
  opacity: 1;
}
.welcomSection .buttonsGroup p{
  float: left;
  width: 100%;
  font-size: 18px;
  color: #1f1f1f;
  margin-top: 25px;
  opacity: 0;
}
.welcomSection .buttonsGroup p.fadeInUp{
  opacity: 1;
}

.welcomSection .buttonsGroup a.one{
  background-color: #00af9e;
}
.welcomSection .buttonsGroup a.one:hover{
  background-color: #1f1f1f;
}
.welcomSection .buttonsGroup a.two{
  background-color: #1f1f1f;
}
.welcomSection .buttonsGroup a.two:hover{
  background-color: #00af9e;
}


.welcomSection.welcome img.logo {
  margin-left: -181px;
  top: 250px;
  width: 363px;
}
.welcomSection.welcome .buttonsGroup {
  margin-left: -350px;
  width: 700px;
  top: 340px;
}
.welcomSection.welcome p {
  margin-bottom: 50px;
}
.welcomSection.welcome h2 {
  float: none;
  width: 100%;
  font-size: 50px;
  color: #00af9e;
  position: relative;
  left: 0px;
  width: 300px;
  margin-left: 0px;
  top: 0px;
  text-align: center;
  margin: auto;
  opacity: 0;
}
.welcomSection.welcome h2.flipInY{
  opacity: 1;
}
/**************-- End welcomSection --***************/

.dot{
  float: right;
  width: 25px;
  height: 25px;
  background-color: #005877;
  text-align: center;
  padding: 5px;
  border-radius: 100%;
  position: relative;
}
.dot span{
  width: 15px;
  height: 15px;
  background-color: #12695f;
  float: left;
  border-radius: 100%;
  margin: 0px;
}
.dot:hover span{
  -webkit-animation: burst 2s infinite linear;
  animation: burst 2s infinite linear;
}





/*************-- Start Respons CMS --************/
@media (min-width:768px) and (max-width:1400px) {
  .sidebar-nav>ul>li>a {
    padding: 15px 15px;
  }
}
@media (min-width:768px) and (max-width:1024px) {
  .sidebar-nav>ul>li>a {
    padding: 15px 15px;
  }
  table.table-bordered tbody th, table.table-bordered tbody td {
    float: left;
    width: 100%;
    display: grid;
  }
  tr {
    float: left;
    width: 100%;
    border: none;
  }
  .actionsIcon{
    margin-bottom: 15px;
    margin-top: 15px;
  }
  #page-wrapper .col-md-4{
    width: 60%;
  }
  .sidebar {
    overflow: auto;
    padding-bottom: 130px;
  }

}



@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

  /* Force table to not be like tables anymore */
  #dataTable_wrapper table,
  #dataTable_wrapper thead,
  #dataTable_wrapper tbody,
  #dataTable_wrapper th,
  #dataTable_wrapper td,
  #dataTable_wrapper tr {
    display: block;
  }

  /* Hide table headers (but not display: none;, for accessibility) */
  #dataTable_wrapper thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  #dataTable_wrapper tr { border: 1px solid #ccc; }

  #dataTable_wrapper td {
    /* Behave  like a "row" */
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 0%;
  }

  #dataTable_wrapper td:before {
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    top: 6px;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
  }
  div.dataTables_wrapper > div.row > div, div.dataTables_length, div.dataTables_filter, div.dataTables_info, div.dataTables_paginate {
    text-align: center;
    width: 100%;
  }
  #output ul li {
    width: 50%;
  }
  .welcomSection .buttonsGroup {
    margin-left: 0px;
    width: 100%;
    left: 0px;
  }
  .welcomSection h2 {
    font-size: 40px;
  }
  .welcomSection .buttonsGroup p {
    display: block;
    margin-bottom: 15px;
  }
}



@media (min-width:300px) and (max-width:768px) {
  .sidebar-nav>ul>li>a {
    padding: 15px 15px;
  }
  #page-wrapper {
    position: relative;
    top: 115px;
    float: right;
    width: calc(100% - 0px);
    padding: 0 15px;
    background-color: #fff;
    padding-bottom: 60px !important;
  }
  .sidebar-nav>ul>li>a {
    padding: 15px 15px;
  }
  table.table-bordered tbody th, table.table-bordered tbody td {
    float: left;
    width: 100%;
    display: block;
    padding: 10px 0px;
  }
  #dataTable_wrapper tr {
    float: left;
    width: 100%;
    border: none;
  }
  .actionsIcon{
    margin-bottom: 15px;
    margin-top: 15px;
  }
  #page-wrapper .col-md-4{
    width: 60%;
  }
  .sidebar {
    overflow: auto;
    padding-bottom: 130px;
    border-right: 1px solid transparent;
    z-index: 1;
    position: fixed;
    top: 115px;
    width: 250px;
    height: 100%;
    background-color: transparent !important;
  }
  #page-wrapper .col-md-4{
    width: 80%;
  }
  .sidebar {
    padding-bottom: 0px;
    max-height: 0px;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    z-index: 999;
  }
  .sidebar.open{
    padding-bottom: 130px;
    max-height: 1000px;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
    -webkit-transition: 0.5s;
    transition: 0.5s;
  }
  .detailsCont{
    float: left;
    width: 100%;
  }
  body.nav-sm .container.body .right_col {
    padding: 15px;
    margin-left: 0px;
    float: left;
    width: 100%;
    padding-bottom: 50px !important;
    min-height: 700px !important;
    padding-top: 65px !important;
  }
  body.nav-sm .container.body .left_col {
    position: absolute;
    width: 100%;
    max-height: 0px;
    transition: all 0.5s;
    overflow: hidden;
  }
  body.nav-sm .main_container .top_nav {
    padding: 0 !important;
    display: block;
    margin-left: 0px;
    width: calc(100% - 0px);
    overflow: visible;
  }
  body.nav-md .container.body .col-md-3.left_col {
    width: 100%;
    padding: 0;
    position: fixed;
    left: 0px;
    top: 57px;
    display: flex;
    z-index: 999;
    max-height: 1000px;
  }
  body.nav-md .container.body .right_col {
    padding: 15px !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
  }
  .left_col .clearfix{
    display: none;
  }
  .table-striped>tbody>tr:nth-of-type(even) {
    background-color: #c7c7c7 ;
  }
  .sectionLeftProfile,
  .sectionRightProfile {
    width: 100%;
  }
  #notifications{
    position: fixed;
    width: 100% !important;
    left: 0px;
    top: 58px;
  }
  #output ul li {
    width: 100%;
  }
  .welcomSection img.logo {
    margin-left: -100px;
    width: 200px;
    display: block;
  }
  .welcomSection h2 {
    width: 300px;
    margin-left: -150px;
  }
  .welcomSection .buttonsGroup {
    left: 5%;
    margin-left: 0px;
    width: 90%;
  }
  .welcomSection h2 {
    font-size: 40px;
  }
}
/*************-- End Respons CMS --************/

.btn-primary {
  color: #fff;
  background-color: #2e2c39 !important;
  border-color: #2e2c39 !important;
  border-radius: 0px !important;
  height: 40px;
  /*padding: 9px;*/
  font-family: 'Cairo', sans-serif;
  border-radius: 20px !important;
}

.adding-project-row{
  margin-top: 20px;
}

.adding-project-row input, select, textarea{
  margin-top: 7px;
}

.project-status{
  font-size: 22px;
}

.input-description{
  color: #0e8a7c;
  font-weight: bold;
}

.label{
  font-size: 85% !important;
  font-weight: normal;
  border-radius: 0px !important;
}


.currencyWithInput {
  position: absolute;
  right: auto;
  right: 10px;
  top: 27px;
  font-size: 15px;
  padding: 10px;
  height: 39px;
  border-left: 1px solid #ccc;
  border-right: 1px solid #cccccc;
}


#dataTable_length label{
  /* display: none !important; */
}

#dataTable_length select{
  /* display: block !important; */
}

.references-details a{
  line-height: 33px;
  color: #222;
}

.statusBtn:hover{
  text-decoration: none;
  opacity: 0.9;
}

.panel-default>.panel-heading {
  color: #333;
  background-color: #ffffff;
  border-color: #ddd;
}

.carousel-inner>.item>a>img, .carousel-inner>.item>img, .img-responsive, .thumbnail a>img, .thumbnail>img {
  margin: auto;
}

.btn-default.disabled, .btn-default.disabled.active, .btn-default.disabled.focus, .btn-default.disabled:active, .btn-default.disabled:focus, .btn-default.disabled:hover, .btn-default[disabled], .btn-default[disabled].active, .btn-default[disabled].focus, .btn-default[disabled]:active, .btn-default[disabled]:focus, .btn-default[disabled]:hover, fieldset[disabled] .btn-default, fieldset[disabled] .btn-default.active, fieldset[disabled] .btn-default.focus, fieldset[disabled] .btn-default:active, fieldset[disabled] .btn-default:focus, fieldset[disabled] .btn-default:hover {
  background-color: green;
  border-color: #ccc;
}

.chosen-container-multi .chosen-choices {
  position: relative;
  overflow: hidden;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 40px;
  height: auto!important;
  height: 1%;
  border: 1px solid #ccc;
  background-color: #fff;
  cursor: text;
  border-radius: 21px !important;
}

.chosen-container-multi .chosen-choices li.search-field input[type=text] {
  margin: 11px 5px !important;
  padding: 5px;
  height: 15px;
  outline: 0;
  border: 0!important;
  background: transparent!important;
  box-shadow: none;
  color: #666;
  font-size: 100%;
  font-family: sans-serif;
  line-height: normal;
  border-radius: 0;
}

.stat-cards-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: 24px 19px;
  background-color: #FFFFFF;
  -webkit-box-shadow: 0px 15px 50px rgb(160 163 189 / 10%);
  box-shadow: 0px 15px 50px rgb(160 163 189 / 10%);
  border-radius: 10px;
  height: 100%;
}

.stat-cards-icon.primary {
  background-color: rgba(100, 100, 100, 0.1);
  color: #00506f;
  font-size: 19px;
}

.stat-cards-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-right: 9px;
}

.stat-cards-info__num {
  font-weight: 600;
  font-size: 18px;
  line-height: 1.22;
  color: #171717;
  margin-bottom: 4px;
}

.stat-cards-info__title {
  font-weight: 500;
  font-size: 14px;
  line-height: 1.22;
  color: #b9b9b9;
  margin-bottom: 6px;
}

.dashboard-sub-title {
  width: 100%;
  color: #00516f;
  height: 58px;
  line-height: 50px;
  padding: 0px 10px 0px 10px;
  border-bottom: 1px #e2e2e2 solid;
  font-size: 20px;
}

.dashboard-sub-sections{
  height: 400px;
  border-radius: 20px;
  border: 1px #e2e2e2 solid;
  background-color: #fff;
  margin: 10px;
}

.dashboard-sub-data{
  overflow: scroll;
  height: 329px;
}

.dashboard-item{
  font-size: 16px;
  color: #555;
  margin: 18px 10px 18px 10px;
  border-bottom: 1px #e2e2e2 solid;
  padding-bottom: 10px;
}

.dashboard-item span{
  font-size: 14px;
  color: #969696;
}


@media (max-width: 767px) {
.top_nav .navbar-right{
      width: 30% !important;
}

.dropdown.action .dropdown-menu{
  left: 10%;
}

.dropdown-menu:after{
    right: 49%;
}

#sidebar-menu{
  padding-top: 145px;
      display: block;
}

    .theDataTable {
        overflow-x: hidden;
        overflow-y: hidden;
        min-height: 750px;
    }


    #dataTable {
        width: 100%;
        display: block;
        max-height: 500px;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        -webkit-overflow-scrolling: touch; /* لتفعيل السكرول اللمسي في الآيفون */
    }

    table {
        border-collapse: collapse; /* تحسين التعامل مع الجداول */
    }

    th, td {
        padding: 8px;
        text-align: left;
        border: 1px solid #ddd;
    }

}