/* ==========================================================================
   RTL + General utilities
   ========================================================================== */
.wrapper{ direction: rtl; }

.padding-10{ padding: 10 !important; }
.iq-menu-bt.align-self-center .wrapper-menu i{ font-size:30px; }

div#lottie-beil, div#lottie-mail, div#lottie-fullscreen { height: 73px; width: 20px; }

.list-user-action a i{ color: unset; font-size: unset; vertical-align: middle; }
.row-edit{ margin-left: -3px !important; margin-right: -3px !important; }

.btn-fixed,
.btn-fixed-excel{
  position: fixed; left: 50px; width: 50px; height: 50px; line-height: 50px;
  background-color: #FCCD00; border-radius: 50%; text-align: center; color: #FFF; z-index: 9999;
}
.btn-fixed{ bottom: 80px; }
.btn-fixed-excel{ bottom: 30px; }
.btn-fixed i, .btn-fixed-excel i{ margin:0; padding:0; color:#FFF !important; }
a.btn-fixed i, a.btn-fixed-excel i{ display:block; padding-top:10px !important; }

.radio > input { position: static !important; z-index: unset !important; opacity: 1 !important; }

/* Simple custom tooltip */
.tooltip2{ position: relative; }
.tooltip2:hover:after{
  display:flex; justify-content:center; background:#29404E; border-radius:4px; color:#fff;
  content:attr(data-title); font-size:12px; padding:5px; width:120px; top:-50px; right:-45px; position:absolute;
}
.tooltip2:hover:before{
  border: solid; border-color:#29404E transparent; border-width:7px 6px 0 6px;
  content:""; right:10px; bottom:33px; position:absolute;
}

.iq-sidebar-logo img{ height:60px !important; }
.iq-sidebar .iq-waves-effect{ padding:7px 15px 7px 7px !important; }

.bg-active{ background-color:#D12D77; }
.bg-pending{ background-color:#FCCD00; }

.width-50{ width:50px !important; }
.width-20{ width:20px !important; }
.width-40{ width:35px !important; margin-right:10px; }

.profile-img-edit{ height:unset; width:unset; }
.add-img-user .p-image2{ position:static; text-align:left; display:block; height:auto; width:auto; background:transparent; margin-top:20px; }
.add-img-user .upload-button, .add-img-user .upload-button2{ display:block; font-size:1.5em; }
.add-img-user .file-upload, .add-img-user .file-upload2{ display:inline-block; opacity:0; position:absolute; z-index:-1; }
.add-img-user .profile-pic, .add-img-user .profile-pic2{ width:150px !important; height:150px !important; }
.file-upload2{ display:none; }

.select2.select2-container.select2-container--default{ width:100% !important; display:block !important; }
.select2-selection.select2-selection--single{ height:45px !important; }

.modal-footer{ padding-bottom:10px !important; padding-top:10px !important; }
.modal.fade form{ margin-bottom:0 !important; }

.table-icons{ width:25px; }
.table-icons2{ width:35px; height:40px; padding:1px; }

.repeater-btn{ margin-top:35px; }
.repeater-btn i{ margin:0 !important; padding:0 !important; }

.w-30-menu{ width:30px; padding-right:7px; }

.nav-counter{
  position:absolute; top:1px; right:0; width:20px; line-height:20px; height:20px; text-align:center;
  background:rgba(209,45,119,.85); border-radius:50%; display:block; font-size:10px; font-weight:bolder; color:#FFF;
}

/* ==========================================================================
   App palette (dark)
   ========================================================================== */
:root{
  --bg:#102733;
  --blue:#29404E;
  --blueLight:#00D0FF;         /* turquoise */
  --orange:#FCCD00;
  --pink:#D12D77;
  --text:#FFFFFF;
  --muted:#B0BEC5;
  --accent-turquoise:#00D0FF;  /* active highlight */
}

/* ==========================================================================
   Base
   ========================================================================== */
html, body{ background-color:var(--bg) !important; color:var(--text) !important; }
body, h1,h2,h3,h4,h5,h6, .tooltip{ font-family:'Almarai', sans-serif; }
a{ color:var(--blueLight); } a:hover{ color:var(--orange); }

/* Fix company name near logo */
.logo-text{ color:#fff !important; }

/* ==========================================================================
   Top navbar
   ========================================================================== */
.iq-top-navbar, .iq-top-navbar .navbar{
  background-color:var(--blue) !important; color:var(--text) !important;
  border-bottom:1px solid rgba(255,255,255,.06) !important;
}
.iq-top-navbar *:not(.badge):not(.btn){ color:var(--text) !important; }

/* Header toggles (desktop & mobile) */
.iq-menu-bt{ background:var(--accent-turquoise) !important; border-color:var(--accent-turquoise) !important; color:#fff !important; }
.iq-menu-bt .wrapper-menu i{ color:#fff !important; }
.iq-top-navbar .navbar-toggler{ background:var(--accent-turquoise) !important; border-color:var(--accent-turquoise) !important; color:#fff !important; border-radius:10px; }
.iq-top-navbar .navbar-toggler i{ color:#fff !important; }
.navbar-light .navbar-toggler-icon{ filter: invert(1) brightness(2); }
@media (min-width: 993px){
  .iq-top-navbar .iq-navbar-custom .iq-menu-bt{ background:var(--accent-turquoise) !important; border-color:var(--accent-turquoise) !important; color:#fff !important; }
  .iq-top-navbar .iq-navbar-custom .iq-menu-bt:hover{ background:var(--accent-turquoise) !important; border-color:var(--accent-turquoise) !important; color:#fff !important; }
}

/* ==========================================================================
   Sidebar
   ========================================================================== */
.iq-sidebar{ background-color:var(--blue) !important; }
.images-sidebar{ display:none !important; }  /* hide old image icons */

.iq-sidebar .iq-sidebar-menu .iq-menu > li > a,
.iq-sidebar .iq-sidebar-menu .iq-menu-title,
.iq-sidebar .iq-sidebar-logo a,
.iq-sidebar .iq-menu-bt .wrapper-menu i{
  color:var(--text) !important;
}

/* Clean link look */
.iq-sidebar .iq-menu li > a{
  display:flex; align-items:center;
  background:transparent !important; color:var(--text) !important;
}

/* Monochrome icon slot (for Remix Icons) */
.nav-icon{
  font-size:22px; width:24px; min-width:24px; text-align:center;
  margin-inline-end:10px; line-height:1; color:rgba(230,238,244,.8);
}

/* Hover */
.iq-sidebar .iq-menu li a:hover{
  background:rgba(0,208,255,.08) !important; color:#fff !important;
}

/* Active state (turquoise accent) */
.iq-sidebar .iq-menu li.active > a,
.iq-sidebar .iq-menu li > a.active,
.iq-sidebar .iq-menu li > a:active{
  background:rgba(0,208,255,.12) !important;
  border-right:3px solid var(--accent-turquoise) !important;  /* RTL */
  color:#fff !important;
}
.iq-sidebar .iq-menu li.active > a .nav-icon,
.iq-sidebar .iq-menu li > a.active .nav-icon{ color:var(--accent-turquoise) !important; }

/* Submenu */
.iq-sidebar .iq-submenu li a{ color:rgba(255,255,255,.85) !important; }
.iq-sidebar .iq-submenu li a:hover{ color:var(--orange) !important; }

/* ==========================================================================
   Content / Cards
   ========================================================================== */
.content-page, .content-page .container-fluid{ background-color:var(--bg) !important; }
.iq-card{
  background-color:var(--blue) !important; color:var(--text) !important;
  border:1px solid rgba(255,255,255,.06) !important; box-shadow:none !important;
}
.iq-card .iq-card-header .iq-header-title .card-title,
.iq-card h1, .iq-card h2, .iq-card h3, .iq-card h4, .iq-card h5, .iq-card h6{ color:var(--text) !important; }

/* Bootstrap .card fallback */
.card{
  background-color: var(--blue) !important;
  color: var(--text) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  box-shadow: none !important;
}
.card .card-header,
.card .card-footer{
  background: transparent !important;
  border-color: rgba(255,255,255,.06) !important;
}
.card .card-title{ color: var(--text) !important; }

/* ==========================================================================
   Tables (incl. DataTables)
   ========================================================================== */
.table, .table th, .table td{ color:#fff !important; border-color:#21333e !important; }
.table thead th{ background-color:#102733 !important; color:#fff !important; }
.table tbody tr{ background-color:#29404E !important; }
.table-striped tbody tr:nth-of-type(odd),
table.dataTable.stripe tbody tr.odd,
table.dataTable.display tbody tr.odd{ background-color:#345163 !important; }
.table-striped tbody tr:nth-of-type(even),
table.dataTable.stripe tbody tr.even,
table.dataTable.display tbody tr.even{ background-color:#29404E !important; }
.table-hover tbody tr:hover,
table.dataTable.hover tbody tr:hover,
table.dataTable.display tbody tr:hover{ background-color:#3f6277 !important; color:#fff !important; }

table.dataTable thead th, table.dataTable thead td, table.dataTable.no-footer{ border-bottom:2px solid #29404E; }

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select{
  background-color:#102733 !important; color:#fff !important; border:1px solid #21333e !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button{
  background:#29404E !important; border:1px solid #21333e !important; color:#fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover{
  background:#345163 !important; color:#fff !important;
}
.dataTables_wrapper .dataTables_info, div.dataTables_info{ color:#fff !important; }

.iq-email-listbox .iq-email-sender-list>li{ border-top:none !important; border-bottom:1px solid #29404E; }
.iq-email-listbox .iq-email-sender-list>li:last-of-type{ border-bottom:none; }

.table a{ color:var(--accent-turquoise); } .table a:hover{ color:#FCCD00; }

.icons-table{
  width:30px !important; display:inline-block; height:30px !important;
  filter: invert(44%) sepia(97%) saturate(472%) hue-rotate(329deg) brightness(91%) contrast(79%);
  margin-right:8px;
}

/* ==========================================================================
   Forms
   ========================================================================== */
.text-dark, label, .form-label{ color:var(--text) !important; }
.text-muted{ color:var(--muted) !important; }

.form-control{
  color:var(--text) !important;
  background-color:transparent !important;
  border-color:var(--blueLight) !important;
}
.form-control::placeholder{ color:rgba(255,255,255,.6) !important; }
.form-control:focus{ border-color:var(--orange) !important; box-shadow:none !important; }

/* ==========================================================================
   Footer
   ========================================================================== */
.iq-footer{
  direction: rtl !important;
  background-color:var(--blue) !important; color:var(--text) !important;
  border-top:1px solid rgba(255,255,255,.06) !important;
}
.iq-footer a{ color:var(--blueLight) !important; } .iq-footer a:hover{ color:var(--orange) !important; }

/* ==========================================================================
   Misc
   ========================================================================== */
.del-btn{ border:none; background-color:transparent; }
.scrollbar-track-y{ left:0 !important; right:unset !important; background:#29404E !important; }
.scrollbar-thumb{ background:var(--accent-turquoise) !important; }

.multiuploadImage{ width:200px; padding:5px; float:right; }
.delete-image-id{
  position:absolute; top:10px; right:10px; color:#D12D77; width:30px; text-align:center; line-height:27px;
  cursor:pointer; height:30px; background-color:#102733; border-radius:5px;
}

/* Quick RTL float swaps */
.dataTables_wrapper .dataTables_info{ float:right; }
.dataTables_wrapper .dataTables_paginate{ float:left; text-align:left; }
.pull-right{ float:left !important; }
.pull-left{ float:right !important; }
#add-term i, .remove-term i{ margin-right:0; }

/* ==========================================================================
   Active accents (tabs, pills, buttons)
   ========================================================================== */
.nav-pills .nav-link.active, .nav-pills .show > .nav-link{
  color:var(--accent-turquoise) !important; background:rgba(0,208,255,0.12) !important;
}
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link{
  border-bottom-color:var(--accent-turquoise) !important; color:var(--accent-turquoise) !important;
}
.btn-primary:active, .btn-primary.active, .show > .btn-primary.dropdown-toggle, .btn-primary:focus{
  background-color:var(--accent-turquoise) !important; border-color:var(--accent-turquoise) !important;
}
.dt-buttons .dt-button { color: #FFF; }

/* ==========================================================================
   Font: SF Arabic Rounded
   ========================================================================== */
@font-face{
  font-family: 'SFArabicRounded';
  src: url('/assets/fonts/SFArabicRounded/SFArabicRounded-Regular.woff2') format('woff2'),
       url('/assets/fonts/SFArabicRounded/SFArabicRounded-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

html, body,
h1, h2, h3, h4, h5, h6,
button, input, select, textarea,
.tooltip, .btn, .form-control,
.iq-top-navbar, .iq-sidebar, .iq-card {
  font-family: 'SFArabicRounded', 'Almarai', sans-serif !important;
}

/* ==========================================================================
   Table action icons & links (force turquoise)
   ========================================================================== */
table td a svg,
table td a svg path {
  fill: var(--accent-turquoise) !important;
  stroke: var(--accent-turquoise) !important;
  color: var(--accent-turquoise) !important; 
}
table td a i,
table td a .fa {
  color: var(--accent-turquoise) !important;
  opacity: 1 !important;
}
table td a:hover svg,
table td a:hover svg path,
table td a:hover i,
table td a:hover .fa {
  fill: #33DCFF !important;
  stroke: #33DCFF !important;
  color: #33DCFF !important;
}

/* ==========================================================================
   Contact Us page polish
   ========================================================================== */
.contactus-card .iq-card-header { border-bottom: 1px solid rgba(255,255,255,.06); }

.form-section-title{
  font-size: 13px;
  color: var(--muted);
  margin: 4px 0 12px;
  letter-spacing: .2px;
}

.form-sep{ border-color: rgba(255,255,255,.08); margin: 8px 0 20px; }

.gutters-16{ margin-right:-8px; margin-left:-8px; }
.gutters-16 > [class*="col-"]{ padding-right:8px; padding-left:8px; }

.contactus-card .form-control{ height: 46px; border-radius: 12px; }
.contactus-card textarea.form-control{ min-height: 180px; }

.form-actions .btn{ min-width: 120px; }

.contact-card{
  border: 1px solid rgba(255,255,255,.06) !important;
  box-shadow: none !important;
}

/* Vision / About boxes */
.section-box{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 14px;
}

/* Light divider between sections */
.form-sep{ border-color: rgba(255,255,255,.08); margin: 8px 0 18px; }

/* Compact gutters compatible with BS4 */
.gutters-16{ margin-right:-8px; margin-left:-8px; }
.gutters-16>[class*="col-"]{ padding-right:8px; padding-left:8px; }

/* Soft social button on dark bg */
.btn-soft{
  background: rgba(0,208,255,.12);
  border: 1px solid rgba(0,208,255,.22);
  color: #E6EEF4 !important;
}
.btn-soft:hover{
  background: rgba(0,208,255,.18);
  border-color: rgba(0,208,255,.35);
}

/* Clamp long text (5 lines) */
.clamp-5{
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ==========================================================================
   Turquoise-only global overrides
   ========================================================================== */
/* text selection */
*::selection{ background: var(--accent-turquoise) !important; color:#fff !important; }
*::-moz-selection{ background: var(--accent-turquoise) !important; color:#fff !important; }

/* links + text utilities */
a, .text-primary, .text-info{ color: var(--accent-turquoise) !important; }

/* bg utilities (no gradients) */
.bg-primary, .badge-primary{ background: var(--accent-turquoise) !important; color:#0e2230 !important; }
.bg-info, .badge-info{ background: var(--accent-turquoise) !important; color:#0e2230 !important; }

/* buttons */
.btn-primary, .btn-info{
  background: var(--accent-turquoise) !important;
  border-color: var(--accent-turquoise) !important;
  color: #0e2230 !important;
}
.btn-primary:hover, .btn-info:hover{
  filter: brightness(1.05);
  box-shadow: 0 0 0 .2rem rgba(0,208,255,.20) !important;
}
.btn-outline-primary{
  color: var(--accent-turquoise) !important;
  border-color: var(--accent-turquoise) !important;
}
.btn-outline-primary:hover{
  background: var(--accent-turquoise) !important;
  color:#0e2230 !important;
}

/* soft backgrounds */
.iq-bg-primary, .iq-bg-info{
  background: rgba(0,208,255,.12) !important;
  color: var(--accent-turquoise) !important;
}

/* tabs & pills (safety) */
.nav-pills .nav-link.active, .nav-pills .show > .nav-link{
  color: var(--accent-turquoise) !important;
  background: rgba(0,208,255,.12) !important;
}
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link{
  border-bottom-color: var(--accent-turquoise) !important;
  color: var(--accent-turquoise) !important;
}

/* alerts */
.alert-primary, .alert-info{
  background: rgba(0,208,255,.12) !important;
  border-color: rgba(0,208,255,.35) !important;
  color:#fff !important;
}

/* datatables pagination */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover{
  background: rgba(0,208,255,.15) !important;
  border-color: rgba(0,208,255,.35) !important;
  color:#fff !important;
}

/* owl dots + scrollbar are above */
.owl-theme .owl-dots .owl-dot.active span{ background: var(--accent-turquoise) !important; }