/*
* demo.css
* File include item demo only specific css only
******************************************************************************/

.menu .app-brand.demo {
  height: 64px;
}

.dark-style .menu .app-brand.demo {
  height: 64px;
}

.app-brand-logo.demo svg {
  width: 30px;
  height: 24px;
}

.app-brand-text.demo {
  font-size: 1.25rem;
}

/* ! For .layout-navbar-fixed added fix padding top tpo .layout-page */
.layout-navbar-fixed .layout-wrapper:not(.layout-without-menu) .layout-page {
  padding-top: 64px !important;
}

/* Navbar page z-index issue solution */
.content-wrapper .navbar {
  z-index: auto;
}

/*
* Content
******************************************************************************/

.demo-blocks > * {
  display: block !important;
}

.demo-inline-spacing > * {
  margin: 1rem 0.375rem 0 0 !important;
}

/* .demo-vertical-spacing adds vertical margins between elements. */
.demo-vertical-spacing > * {
  margin-top: 1.25rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.demo-vertical-spacing-lg > * {
  margin-top: 1.875rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing-lg.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.demo-vertical-spacing-xl > * {
  margin-top: 5rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing-xl.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.rtl-only {
  display: none !important;
  text-align: left !important;
  direction: ltr !important;
}

[dir='rtl'] .rtl-only {
  display: block !important;
}

/* Dropdown buttons going out of small screens */
@media (max-width: 576px) {
  #dropdown-variation-demo .btn-group .text-truncate {
    width: 300px;
    position: relative;
  }
  #dropdown-variation-demo .btn-group .text-truncate::after {
    position: absolute;
    top: 45%;
    right: 0.65rem;
  }
}
.skill{
  margin: 5px;
}
.rounded-top{
  width: 100%;
}
#journey{
  display: none !important;
}
.vscomp-ele
{
  max-width: unset !important;
}
.tooltipp {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltipp .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 105%;
}

.tooltipp:hover .tooltiptext {
  visibility: visible;
}
.color-primary{
color:#1e2ab8 !important;
}
.few-margin
{
  margin: 3px !important;
  padding: 3px !important;
}
.margin-25
{
  margin: 25px;
}

.space{
white-space:unset !important;
margin: 8px !important;
}




.notification{
    display: inline-block !important;
    margin: 0;
    padding: 0;
    width: .7rem;
    height: .7rem;
    border-radius: 50%;
    left: 60% !important;

}






/* chat */
/* chat */
/*! CSS Used from: https://dddemos.themeselection.com/materio-bootstrap-html-laravel-admin-template/demo/build/assets/remixicon-CB5Upr-_.css */
[class^=ri-],[class*=" ri-"]{font-family:remixicon!important;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:18px;line-height:1;vertical-align:middle;}
[class^=ri-]:before,[class*=" ri-"]:before{display:inline-block;}
[class^=ri-].ri-24px:before,[class*=" ri-"].ri-24px:before{font-size:24px;}
.ri-14px,.ri-14px:before{font-size:14px;}
.ri-16px,.ri-16px:before{font-size:16px;}
.ri-20px,.ri-20px:before{font-size:20px;}
.ri-22px,.ri-22px:before{font-size:22px;}
.ri-24px,.ri-24px:before{font-size:24px;}
[class^=ri-],[class*=" ri-"]{font-family:remixicon!important;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
.ri-attachment-2:before{content:"";}
.ri-bookmark-line:before{content:"";}
.ri-check-double-line:before{content:"";}
.ri-close-line:before{content:"";}
.ri-delete-bin-7-line:before{content:"";}
.ri-forbid-2-line:before{content:"";}
.ri-heart-fill:before{content:"";}
.ri-image-2-line:before{content:"";}
.ri-lock-password-line:before{content:"";}
.ri-logout-box-r-line:before{content:"";}
.ri-mail-line:before{content:"";}
.ri-menu-line:before{content:"";}
.ri-mic-line:before{content:"";}
.ri-more-2-line:before{content:"";}
.ri-notification-line:before{content:"";}
.ri-phone-line:before{content:"";}
.ri-search-line:before{content:"";}
.ri-send-plane-line:before{content:"";}
.ri-time-line:before{content:"";}
.ri-user-add-line:before{content:"";}
.ri-user-star-line:before{content:"";}
.ri-video-add-line:before{content:"";}
/*! CSS Used from: https://dddemos.themeselection.com/materio-bootstrap-html-laravel-admin-template/demo/build/assets/node-waves-D5r9FyLK.css */
.waves-effect{position:relative;cursor:pointer;display:inline-block;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;}
/*! CSS Used from: https://dddemos.themeselection.com/materio-bootstrap-html-laravel-admin-template/demo/build/assets/perfect-scrollbar-CTjXBMlg.css */
.ps{overflow:hidden!important;overflow-anchor:none;-ms-overflow-style:none;touch-action:auto;-ms-touch-action:auto;}
.ps__rail-x{display:none;opacity:0;transition:background-color .2s linear,opacity .2s linear;-webkit-transition:background-color .2s linear,opacity .2s linear;height:15px;bottom:0;position:absolute;}
.ps__rail-y{display:none;opacity:0;transition:background-color .2s linear,opacity .2s linear;-webkit-transition:background-color .2s linear,opacity .2s linear;width:15px;right:0;position:absolute;}
.ps--active-y>.ps__rail-y{display:block;background-color:transparent;}
.ps:hover>.ps__rail-x,.ps:hover>.ps__rail-y{opacity:.6;}
.ps .ps__rail-x:hover,.ps .ps__rail-y:hover,.ps .ps__rail-x:focus,.ps .ps__rail-y:focus{background-color:#eee;opacity:.9;}
.ps__thumb-x{background-color:#aaa;border-radius:6px;transition:background-color .2s linear,height .2s ease-in-out;-webkit-transition:background-color .2s linear,height .2s ease-in-out;height:6px;bottom:2px;position:absolute;}
.ps__thumb-y{background-color:#aaa;border-radius:6px;transition:background-color .2s linear,width .2s ease-in-out;-webkit-transition:background-color .2s linear,width .2s ease-in-out;width:6px;right:2px;position:absolute;}
.ps__rail-x:hover>.ps__thumb-x,.ps__rail-x:focus>.ps__thumb-x{background-color:#999;height:11px;}
.ps__rail-y:hover>.ps__thumb-y,.ps__rail-y:focus>.ps__thumb-y{background-color:#999;width:11px;}
@media screen and (-ms-high-contrast: active),(-ms-high-contrast: none){
.ps{overflow:auto!important;}
}
.ps{position:relative;}
.ps__rail-x{height:.25rem;}
.ps__rail-y{width:.25rem;z-index:1;}
.ps__rail-x,.ps__rail-y,.ps__thumb-x,.ps__thumb-y{border-radius:10rem;}
.ps__rail-x:hover,.ps__rail-x:focus,.ps__rail-x:hover>.ps__thumb-x,.ps__rail-x:focus>.ps__thumb-x{height:.375rem;}
.ps__rail-y:hover,.ps__rail-y:focus,.ps__rail-y:hover>.ps__thumb-y,.ps__rail-y:focus>.ps__thumb-y{width:.375rem;}
.ps__thumb-x{height:.25rem;bottom:0;}
.ps__thumb-y{width:.25rem;right:0;}
.light-style .ps__thumb-x,.light-style .ps__thumb-y{background-color:#2e263d66;}
.light-style .ps__rail-x:hover,.light-style .ps__rail-y:hover,.light-style .ps__rail-x:focus,.light-style .ps__rail-y:focus{background-color:#2e263d33;}
.light-style .ps__rail-x:hover>.ps__thumb-x,.light-style .ps__rail-y:hover>.ps__thumb-y,.light-style .ps__rail-x:focus>.ps__thumb-x,.light-style .ps__rail-y:focus>.ps__thumb-y{background-color:#2e263db3;}
[dir=rtl] .ps--active-y>.ps__rail-y{left:0;}


.active small , .active , .active-link,
.light-style .app-chat .app-chat-contacts .sidebar-body .chat-contact-list li.active
{
color: #fff  ;
}
.btn-black{
    background: linear-gradient(45deg, #fff, #fcff9d7f) !important;
    border: 1px solid #607D8B !important;
    color: #000 !important;
}
.btn-success{
    background: #56ca00 !important;
    color: #fff !important;
}
#net-price-message
{
    color: #1e2ab8;
    font-size: 18px;
}
.rating-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
  }

  .rating-text {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
  }

  .rating {
    display: flex;
    justify-content: space-between;
    align-items: center;
    direction: rtl;

  }

  .rating input[type="radio"] {
    display: none;
  }

  .rating label {
    font-size: 24px;
    color: #ccc;
    cursor: pointer;
    margin: 0 2px;
  }

  .rating label:before {
    content: "\2605";
    font-size: 24px;
    margin-right: 5px;
  }

  .rating label:hover, .rating label:hover ~ label {
    color: #ffd700;
  }

  .rating input[type="radio"]:checked ~ label , .star {
    color: #ffd700;
  }

  .comment-container {
    width: 90%;
    margin: 15px;
    margin-top: 20px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }

  #comment {
    width: 100%;
    height: 100px;
    padding: 10px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    font-family: Arial, sans-serif;
    background-color: #f9f9f9;
  }

  #comment:focus {
    outline: none;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }

  #send-rating-btn {
    background-color: #4CAF50;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
  }

  #send-rating-btn:hover {
    background-color: #3e8e41;
  }
/* تنسيق شريط التمرير في متصفح Chrome و Safari */
::-webkit-scrollbar {
    width: 8px; /* عرض شريط التمرير */
    height: 8px; /* ارتفاع شريط التمرير */
}

::-webkit-scrollbar-thumb {
    background-color: #1c43c508; /* لون شريط التمرير */
    border-radius: 10px; /* زوايا دائرية */
}

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

/* تنسيق شريط التمرير في Firefox */
* {
    scrollbar-width: thin; /* جعل شريط التمرير رفيع */
    scrollbar-color: #1c43c508 transparent; /* لون شريط التمرير ولون الخلفية */
}

/* تنسيق شريط التمرير في Internet Explorer و Edge */
.scrollable {
    -ms-overflow-style: -ms-autohiding-scrollbar; /* إخفاء شريط التمرير تلقائيًا */
}