:root {
  --slide-padding: 5px 12px;            /* المسافة داخل العنصر */
  --slide-radius: 8px;              /* الانحناء الزوايا */
  --slide-bg: linear-gradient(to bottom, #fff, #f9f9f9);  /* الخلفية */
  --slide-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);        /* الظل */
  --slide-z: 100;                   /* ترتيب العنصر في الواجهة */
  --slide-scale: 0.95;              /* التأثير عند الظهور */
  --slide-transition: transform 0.4s ease, opacity 0.4s ease, box-shadow 0.3s ease; /* الانتقالات */
  --slide-offset: 20px;             /* المسافة عند التمرير */
  --slide-x-offset: 0px;            /* المسافة على المحور الأفقي */
  --slide-y-offset: 0px;            /* المسافة على المحور العمودي */
}


html {
  font-size: 100%; /* يحدد حجم الخط الأساسي */
  box-sizing: border-box; /* تحسين القياس داخل العناصر */
  scroll-behavior: smooth; /* تحسين التمرير */
  height: 100%;
  font-family: "Nunito", sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit; /* يجعل box-sizing لجميع العناصر يعتمد على القيمة في html */
  font-family: 'Arial', sans-serif; /* تعيين خط موحد لجميع العناصر */
}

body {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #1F1F1F;
    text-align: left;
    height: 100%;
    background-color: #F5F7FF;
    overflow-x: hidden!important;
    margin:0;
    font-family: "Nunito", sans-serif;
}

.HhgJG{
        width:990px;
        min-height:100vh;
        
    }
    
    .index-CONTA.CONTA {
    transition: width 0.25s ease, margin 0.25s ease;
    width: calc(100% - 300px);
    }
    
    .SIDBR{
        width:300px;
        height:100vh;
    }
    
    .ZEDDESHEAD{
        position:fixed;
        z-index:1025;
        height:calc(100% - 40px);
        width:50px;
        top:20px;
        left:40px;
    }
    
    .CONTA{
    height: 100%;
    overflow: visible;
    position: relative;
}


.POLIITM{
    border-bottom: 1px solid #ebefff;
}

.POLIITM:last-child {
    border-bottom: none;
}

.IMGWRAPTEXT::after {
  content: "";
  display: table;
  clear: both;
}

.NARROWHhgJG {
    width: 690px;
    min-height: 100vh;
}

.NARROWCONTA {
    transition: width 0.25s ease, margin 0.25s ease;
    width: 100%;
}

.NARROWCONTAWITHACTIONSBTNS {
    transition: width 0.25s ease, margin 0.25s ease;
    width: calc(100% - 70px);
}

.postTopSMALLinfo {
    height: 50px;
    top: 0px !important;
    position: -webkit-sticky !important;
    position: sticky !important;
    z-index: 1025;
}

.postDESKPGEactFIXED {
    height: calc(100vh - 40px);
    top: 20px !important;
    position: -webkit-sticky !important;
    position: sticky !important;
}

.POSTsmallAuthor {
    top: -3px;
    position: relative;
}

.pOSTaCTbTN{
    background: #ebefff;
    line-height: 50px;
}
/* تحسينات التصميم */
  #circularProgressContainer {
    position: relative;
    line-height:15px;
  }
  .progress-circle {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
  }
  .progress-circle circle {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
  }
  .progress-circle .bg {
    stroke: #dfe2f1;
  }
  .progress-circle .bar {
    stroke: #343a40;
    /* سيتم ضبط stroke-dasharray من JS */
    transition: stroke-dashoffset 0.5s ease;
  }
  
#ttsToggleBtn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: none;
  background: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  color: #343a40;
  font-size: 1.2rem;
}

#ttsToggleBtn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

#ttsToggleBtn .bi-headphones,
#ttsToggleBtn .bi-soundwave {
  display: none;
}

#ttsToggleBtn.playing .bi-soundwave {
  display: block;
}

#ttsToggleBtn:not(.playing) .bi-headphones {
  display: block;
}

@keyframes wave {
  0%, 100% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(1.6);
  }
}

.soundwave-animate {
  display: inline-block;
  animation: wave 0.6s ease-in-out infinite;
  transform-origin: center;
}

.progress-text {
  text-align: center;
}

.speaking {
    background: #dfe2f1;
    transition: background 0.3s;
    scroll-margin-top: 100px;
    padding: 8px;
}

.highlight-last {
  background-color: #dfe2f1;
  transition: background-color 1s ease;
  padding: 8px;
}

[id^="paragraph-"] {
  scroll-margin-top: 100px;
}

.custom-tooltip {
  position: relative;   
}

.custom-tooltip[data-tooltip-right]::after {
    content: attr(data-tooltip-right);
    white-space: pre-line;
    position: absolute;
    bottom: 100%;
    left: 100%;
    width:100%;
    transform: translateX(-100%);
    background: #1e1e1e;
    color: #fff;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 0.7125rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease;
    z-index: 9999;
}

.custom-tooltip[data-tooltip-right]::before {
    content: '';
    position: absolute;
    bottom: 50%;
    left: 95%;
    transform: translateX(-95%);
    border: 8px solid transparent;
    border-top-color: #1e1e1e;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease;
    z-index: 9999;
}

.custom-tooltip[data-tooltip-left]::after {
    content: attr(data-tooltip-left);
    white-space: pre-line;
    position: absolute;
    bottom: 100%;
    width:100%;
    left: 0;
    transform: translateX(-2%);
    background: #1e1e1e;
    color: #fff;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 0.7125rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease;
    z-index: 9999;
}

.custom-tooltip[data-tooltip-left]::before {
    content: '';
    position: absolute;
    bottom: 50%;
    left: 5%;
    transform: translateX(-5%);
    border: 8px solid transparent;
    border-top-color: #1e1e1e;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease;
    z-index: 9999;
}

.custom-tooltip:focus-visible[data-tooltip-right]::after,
.custom-tooltip:hover[data-tooltip-right]::after,
.custom-tooltip:focus-visible[data-tooltip-right]::before,
.custom-tooltip:hover[data-tooltip-right]::before,
.custom-tooltip:focus-visible[data-tooltip-left]::after,
.custom-tooltip:hover[data-tooltip-left]::after,
.custom-tooltip:focus-visible[data-tooltip-left]::before,
.custom-tooltip:hover[data-tooltip-left]::before{
  opacity: 1;
  visibility: visible;
}

.circular-progress {
  position: relative;
  width: 40px;
  height: 40px;
  margin: 10px;
}

.circular-progress svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.circular-progress circle {
  fill: none;
  stroke-width: 3;
}

.circular-progress circle:first-child {
  stroke: #dfe2f1;
  cx: 20;
  cy: 20;
  r: 17;
}

.circular-progress .progress {
  stroke: #343434;
  stroke-linecap: round;
  cx: 20;
  cy: 20;
  r: 17;
  stroke-dasharray: 106.8; /* 2 * π * 17 ≈ 106.8 */
  stroke-dashoffset: 106.8;
  transition: stroke-dashoffset 0.5s ease;
}

.circular-progress .percentage {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 11px;
  transform: translate(-50%, -50%);
  color: #333;
  font-weight: bold;
}

.custom-tooltip .tooltip-content {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: #1e1e1e;
  color: #fff;
  padding: 8px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s;
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.65rem;
}

.custom-tooltip:hover .tooltip-content {
  opacity: 1;
  visibility: visible;
}

.tooltip-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tooltip-avatar {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
}

.tooltip-username {
  font-size: 0.65rem;
}

.hori-actions-btns .custom-tooltip .tooltip-content {
    bottom: 100%;
    top: auto;
    line-height: 15px;
}


.img-mobile-portrait {
  aspect-ratio: 9 / 16;
  width: 100%;
  height: auto;
  object-fit: cover; /* أو contain حسب الحاجة */
  display: block;
}

.img-mobile-portrait:hover {
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
  transform: scale(1.01);
  transition: 0.3s ease;
}


.video-mobile-portrait {
  aspect-ratio: 9 / 16;
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover; /* أو contain حسب التصميم */
  border-radius: 12px; /* اختياري للتجميل */
  overflow: hidden;
}

.video-mobile-portrait:hover {
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
  transform: scale(1.01);
  transition: 0.3s ease;
}

.avatar-stack {
    display: flex;
    align-items: center;
}

.avatar-stack .avatar {
    border: 2px solid #fff;
    object-fit: cover;
    margin-left: -5px;
    box-shadow: 0 0 2px rgba(0,0,0,0.2);
    position: relative;
    z-index: 1;
}

.avatar-stack .avatar:first-child {
    margin-left: 0;
}
    
    .fixed{
        position:fixed;
    }
    
    .fixed-top{
        top:0;
    }
    
    .fixed-bottom{
        bottom:0;
    }
    
    .head-foot-40{
        height:40px;
    }
    
    .head-foot-50{
        height:50px;
    }
    
    .head-foot-60{
        height:60px;
    }
.w-100{
    width:100%;
}  

.summ-tabs {
    line-height: 28px;
}

.bg-tabs .active{
    background-color:#ebefff;
}

.zedNav{
    border-bottom:0 solid #ddd !important;
}
 .zedNav>li>a:focus,
 .zedNav>li>a:hover{
     text-decoration:none;
     background-color:#fff !important;
     border-color:transparent;
 }
 
 .zedNav>li>a:active,
 .zedNav>li>a.active{
     background-color:#fff !important;
 }
 
 .pointer{
     cursor:pointer;
 }
 
 .border-none{
        border:0px solid #000;
    }
    .border-b-none{
        border-bottom:0px solid #000;
    }
    
    .border-t-none{
        border-top:0px solid #000;
    }
    
    .border-l-none{
        border-left:0px solid #000;
    }
    
    .border-r-none{
        border-right:0px solid #000;
    }
    
   .comment-textarea {
    height: 60px !important;
    max-height: 60px !important;
    min-height: 60px !important;
    padding: 20px 10px;
    overflow-y: hidden;
    transition: height 0.3s ease;
    resize: none !important;
   }

.comment-form.expanded .comment-textarea {
    height: 120px !important;     /* ارتفاع أكبر عند التوسيع */
    max-height: 300px !important; /* للسماح بالتوسيع */
    overflow-y: auto !important;  /* ظهور شريط التمرير لو تعدى المحتوى */
    resize: none !important;  /* السماح بتغيير الحجم بعد التوسيع */
}

.comment-buttons {
    transition: all 0.3s ease;
}

.add_comment_registered{
    position:sticky;
    top:0;
}
 
    .img-sq-15{width:15px;height:15px;}
.img-sq-20{width:20px;height:20px;}
.img-sq-25{width:25px;height:25px;}
.img-sq-30{width:30px;height:30px;}
.img-sq-35{width:35px;height:35px;}
.img-sq-40{width:40px;height:40px;}
.img-sq-45{width:45px;height:45px;}
.img-sq-50{width:50px;height:50px;}
.img-sq-55{width:55px;height:55px;}
.img-sq-60{width:60px;height:60px;}
.img-sq-65{width:65px;height:65px;}
.img-sq-70{width:70px;height:70px;}
.img-sq-75{width:75px;height:75px;}
.img-sq-80{width:80px;height:80px;}
.img-sq-85{width:85px;height:85px;}
.img-sq-90{width:90px;height:90px;}
.img-sq-95{width:95px;height:95px;}
.img-sq-100{width:100px;height:100px;}
.img-sq-110{width:110px;height:110px;}
.img-sq-120{width:120px;height:120px;}
.img-sq-130{width:130px;height:130px;}
.img-sq-140{width:140px;height:140px;}
.img-sq-150{width:150px;height:150px;}
.img-sq-160{width:160px;height:160px;}
.img-sq-170{width:170px;height:170px;}
.img-sq-180{width:180px;height:180px;}
.img-sq-190{width:190px;height:190px;}
.img-sq-200{width:200px;height:200px;}
.img-sq-220{width:220px;height:220px;}
.img-sq-240{width:240px;height:240px;}
.img-sq-260{width:260px;height:260px;}
.img-sq-280{width:280px;height:280px;}
.img-sq-300{width:300px;height:300px;}
.img-sq-320{width:320px;height:320px;}
.img-sq-340{width:340px;height:340px;}
.img-sq-360{width:360px;height:360px;}
.img-sq-380{width:380px;height:380px;}
.img-sq-400{width:400px;height:400px;}
.img-sq-420{width:420px;height:420px;}
.img-sq-440{width:440px;height:440px;}
.img-sq-460{width:460px;height:460px;}
.img-sq-480{width:480px;height:480px;}
.img-sq-500{width:500px;height:500px;}
.img-sq-520{width:520px;height:520px;}
.img-sq-540{width:540px;height:540px;}
.img-sq-560{width:560px;height:560px;}
.img-sq-580{width:580px;height:580px;}
.img-sq-600{width:600px;height:600px;}

.img-rect-24 { width: 24px; height: 16px; }
.img-rect-32 { width: 32px; height: 22px; }
.img-rect-36 { width: 36px; height: 26px; }
.img-rect-50 { width: 50px; height: 33px; }
.img-rect-75 { width: 75px; height: 50px; }
.img-rect-100 { width: 100px; height: 66px; }
.img-rect-125 { width: 125px; height: 83px; }
.img-rect-150 { width: 150px; height: 100px; }
.img-rect-175 { width: 175px; height: 116px; }
.img-rect-200 { width: 200px; height: 133px; }
.img-rect-225 { width: 225px; height: 150px; }
.img-rect-250 { width: 250px; height: 166px; }
.img-rect-275 { width: 275px; height: 183px; }
.img-rect-300 { width: 300px; height: 200px; }
.img-rect-325 { width: 325px; height: 216px; }
.img-rect-350 { width: 350px; height: 233px; }
.img-rect-375 { width: 375px; height: 250px; }
.img-rect-400 { width: 400px; height: 266px; }
.img-rect-425 { width: 425px; height: 283px; }
.img-rect-450 { width: 450px; height: 300px; }
.img-rect-475 { width: 475px; height: 316px; }
.img-rect-500 { width: 500px; height: 333px; }
.img-rect-525 { width: 525px; height: 350px; }
.img-rect-550 { width: 550px; height: 366px; }
.img-rect-575 { width: 575px; height: 383px; }
.img-rect-600 { width: 600px; height: 400px; }


/** 4 sides padding **/
   .pd-1{padding:1px;}
   .pd-2{padding:2px;}
   .pd-3{padding:3px;}
   .pd-4{padding:4px;}
   .pd-5{padding:5px;}
   .pd-6{padding:1px;}
   .pd-7{padding:7px;}
   .pd-8{padding:8px;}
   .pd-10{padding:10px;}
   .pd-12{padding:12px;}
   .pd-15{padding:15px;}
   .pd-20{padding:20px;}
   .pd-25{padding:25px;}
   .pd-30{padding:30px;}
   .pd-35{padding:35px;}
   .pd-40{padding:40px;}
   .pd-45{padding:45px;}
   .pd-50{padding:50px;}
   .pd-60{padding:60px;}
   .pd-70{padding:70px;}
   .pd-80{padding:80px;}
   .pd-90{padding:90px;}
   .pd-100{padding:100px;}
   .pd-120{padding:120px;}
   .pd-150{padding:150px;}
   
   /** top padding **/
   .pd-t-1{padding-top:1px;}
   .pd-t-2{padding-top:2px;}
   .pd-t-3{padding-top:3px;}
   .pd-t-4{padding-top:4px;}
   .pd-t-5{padding-top:5px;}
   .pd-t-6{padding-top:1px;}
   .pd-t-7{padding-top:7px;}
   .pd-t-8{padding-top:8px;}
   .pd-t-10{padding-top:10px;}
   .pd-t-12{padding-top:12px;}
   .pd-t-15{padding-top:15px;}
   .pd-t-20{padding-top:20px;}
   .pd-t-25{padding-top:25px;}
   .pd-t-30{padding-top:30px;}
   .pd-t-35{padding-top:35px;}
   .pd-t-40{padding-top:40px;}
   .pd-t-45{padding-top:45px;}
   .pd-t-50{padding-top:50px;}
   .pd-t-60{padding-top:60px;}
   .pd-t-70{padding-top:70px;}
   .pd-t-80{padding-top:80px;}
   .pd-t-90{padding-top:90px;}
   .pd-t-100{padding-top:100px;}
   .pd-t-120{padding-top:120px;}
   .pd-t-150{padding-top:150px;}
   
   /** bottom padding **/
   .pd-b-1{padding-bottom:1px;}
   .pd-b-2{padding-bottom:2px;}
   .pd-b-3{padding-bottom:3px;}
   .pd-b-4{padding-bottom:4px;}
   .pd-b-5{padding-bottom:5px;}
   .pd-b-6{padding-bottom:1px;}
   .pd-b-7{padding-bottom:7px;}
   .pd-b-8{padding-bottom:8px;}
   .pd-b-10{padding-bottom:10px;}
   .pd-b-12{padding-bottom:12px;}
   .pd-b-15{padding-bottom:15px;}
   .pd-b-20{padding-bottom:20px;}
   .pd-b-25{padding-bottom:25px;}
   .pd-b-30{padding-bottom:30px;}
   .pd-b-35{padding-bottom:35px;}
   .pd-b-40{padding-bottom:40px;}
   .pd-b-45{padding-bottom:45px;}
   .pd-b-50{padding-bottom:50px;}
   .pd-b-60{padding-bottom:60px;}
   .pd-b-70{padding-bottom:70px;}
   .pd-b-80{padding-bottom:80px;}
   .pd-b-90{padding-bottom:90px;}
   .pd-b-100{padding-bottom:100px;}
   .pd-b-120{padding-bottom:120px;}
   .pd-b-150{padding-bottom:150px;}
   /** left padding **/
   .pd-l-1 { padding-left: 1px; }
.pd-l-2 { padding-left: 2px; }
.pd-l-3 { padding-left: 3px; }
.pd-l-4 { padding-left: 4px; }
.pd-l-5 { padding-left: 5px; }
.pd-l-6 { padding-left: 6px; }
.pd-l-7 { padding-left: 7px; }
.pd-l-8 { padding-left: 8px; }
.pd-l-10 { padding-left: 10px; }
.pd-l-12 { padding-left: 12px; }
.pd-l-15 { padding-left: 15px; }
.pd-l-20 { padding-left: 20px; }
.pd-l-25 { padding-left: 25px; }
.pd-l-30 { padding-left: 30px; }
.pd-l-35 { padding-left: 35px; }
.pd-l-40 { padding-left: 40px; }
.pd-l-45 { padding-left: 45px; }
.pd-l-50 { padding-left: 50px; }
.pd-l-60 { padding-left: 60px; }
.pd-l-70 { padding-left: 70px; }
.pd-l-80 { padding-left: 80px; }
.pd-l-90 { padding-left: 90px; }
.pd-l-100 { padding-left: 100px; }
.pd-l-120 { padding-left: 120px; }
.pd-l-150 { padding-left: 150px; }
.pd-l-200 { padding-left: 200px; }
.pd-l-250 { padding-left: 250px; }
.pd-l-300 { padding-left: 300px; }
.pd-l-350 { padding-left: 350px; }
/** right padding **/
   .pd-r-1 { padding-right: 1px; }
.pd-r-2 { padding-right: 2px; }
.pd-r-3 { padding-right: 3px; }
.pd-r-4 { padding-right: 4px; }
.pd-r-5 { padding-right: 5px; }
.pd-r-6 { padding-right: 6px; }
.pd-r-7 { padding-right: 7px; }
.pd-r-8 { padding-right: 8px; }
.pd-r-10 { padding-right: 10px; }
.pd-r-12 { padding-right: 12px; }
.pd-r-15 { padding-right: 15px; }
.pd-r-20 { padding-right: 20px; }
.pd-r-25 { padding-right: 25px; }
.pd-r-30 { padding-right: 30px; }
.pd-r-35 { padding-right: 35px; }
.pd-r-40 { padding-right: 40px; }
.pd-r-45 { padding-right: 45px; }
.pd-r-50 { padding-right: 50px; }
.pd-r-60 { padding-right: 60px; }
.pd-r-70 { padding-right: 70px; }
.pd-r-80 { padding-right: 80px; }
.pd-r-90 { padding-right: 90px; }
.pd-r-100 { padding-right: 100px; }
.pd-r-120 { padding-right: 120px; }
.pd-r-150 { padding-right: 150px; }
.pd-r-200 { padding-right: 200px; }
.pd-r-250 { padding-right: 250px; }
.pd-r-300 { padding-right: 300px; }
.pd-r-350 { padding-right: 350px; }
/** x padding **/
.pd-x-1 { padding-left: 1px; padding-right: 1px; }
.pd-x-2 { padding-left: 2px; padding-right: 2px; }
.pd-x-3 { padding-left: 3px; padding-right: 3px; }
.pd-x-4 { padding-left: 4px; padding-right: 4px; }
.pd-x-5 { padding-left: 5px; padding-right: 5px; }
.pd-x-6 { padding-left: 6px; padding-right: 6px; }
.pd-x-7 { padding-left: 7px; padding-right: 7px; }
.pd-x-8 { padding-left: 8px; padding-right: 8px; }
.pd-x-10 { padding-left: 10px; padding-right: 10px; }
.pd-x-12 { padding-left: 12px; padding-right: 12px; }
.pd-x-15 { padding-left: 15px; padding-right: 15px; }
.pd-x-20 { padding-left: 20px; padding-right: 20px; }
.pd-x-25 { padding-left: 25px; padding-right: 25px; }
.pd-x-30 { padding-left: 30px; padding-right: 30px; }
.pd-x-35 { padding-left: 35px; padding-right: 35px; }
.pd-x-40 { padding-left: 40px; padding-right: 40px; }
.pd-x-45 { padding-left: 45px; padding-right: 45px; }
.pd-x-50 { padding-left: 50px; padding-right: 50px; }
.pd-x-60 { padding-left: 60px; padding-right: 60px; }
.pd-x-70 { padding-left: 70px; padding-right: 70px; }
.pd-x-80 { padding-left: 80px; padding-right: 80px; }
.pd-x-90 { padding-left: 90px; padding-right: 90px; }
.pd-x-100 { padding-left: 100px; padding-right: 100px; }
.pd-x-120 { padding-left: 120px; padding-right: 120px; }
.pd-x-150 { padding-left: 150px; padding-right: 150px; }
.pd-x-200 { padding-left: 200px; padding-right: 200px; }
.pd-x-250 { padding-left: 250px; padding-right: 250px; }
.pd-x-300 { padding-left: 300px; padding-right: 300px; }
.pd-x-350 { padding-left: 350px; padding-right: 350px; }
/** x padding **/
.pd-y-1 { padding-top: 1px; padding-bottom: 1px; }
.pd-y-2 { padding-top: 2px; padding-bottom: 2px; }
.pd-y-3 { padding-top: 3px; padding-bottom: 3px; }
.pd-y-4 { padding-top: 4px; padding-bottom: 4px; }
.pd-y-5 { padding-top: 5px; padding-bottom: 5px; }
.pd-y-6 { padding-top: 6px; padding-bottom: 6px; }
.pd-y-7 { padding-top: 7px; padding-bottom: 7px; }
.pd-y-8 { padding-top: 8px; padding-bottom: 8px; }
.pd-y-10 { padding-top: 10px; padding-bottom: 10px; }
.pd-y-12 { padding-top: 12px; padding-bottom: 12px; }
.pd-y-15 { padding-top: 15px; padding-bottom: 15px; }
.pd-y-20 { padding-top: 20px; padding-bottom: 20px; }
.pd-y-25 { padding-top: 25px; padding-bottom: 25px; }
.pd-y-30 { padding-top: 30px; padding-bottom: 30px; }
.pd-y-35 { padding-top: 35px; padding-bottom: 35px; }
.pd-y-40 { padding-top: 40px; padding-bottom: 40px; }
.pd-y-45 { padding-top: 45px; padding-bottom: 45px; }
.pd-y-50 { padding-top: 50px; padding-bottom: 50px; }
.pd-y-60 { padding-top: 60px; padding-bottom: 60px; }
.pd-y-70 { padding-top: 70px; padding-bottom: 70px; }
.pd-y-80 { padding-top: 80px; padding-bottom: 80px; }
.pd-y-90 { padding-top: 90px; padding-bottom: 90px; }
.pd-y-100 { padding-top: 100px; padding-bottom: 100px; }
.pd-y-120 { padding-top: 120px; padding-bottom: 120px; }
.pd-y-150 { padding-top: 150px; padding-bottom: 150px; }
/** 4 side margin **/
.mg-1 { margin: 1px; }
.mg-2 { margin: 2px; }
.mg-3 { margin: 3px; }
.mg-4 { margin: 4px; }
.mg-5 { margin: 5px; }
.mg-6 { margin: 6px; }
.mg-7 { margin: 7px; }
.mg-8 { margin: 8px; }
.mg-10 { margin: 10px; }
.mg-12 { margin: 12px; }
.mg-15 { margin: 15px; }
.mg-20 { margin: 20px; }
.mg-25 { margin: 25px; }
.mg-30 { margin: 30px; }
.mg-35 { margin: 35px; }
.mg-40 { margin: 40px; }
.mg-45 { margin: 45px; }
.mg-50 { margin: 50px; }
.mg-60 { margin: 60px; }
.mg-70 { margin: 70px; }
.mg-80 { margin: 80px; }
.mg-90 { margin: 90px; }
.mg-100 { margin: 100px; }
.mg-120 { margin: 120px; }
.mg-150 { margin: 150px; }
/** top margin **/
.mg-t-1 { margin-top: 1px; }
.mg-t-2 { margin-top: 2px; }
.mg-t-3 { margin-top: 3px; }
.mg-t-4 { margin-top: 4px; }
.mg-t-5 { margin-top: 5px; }
.mg-t-6 { margin-top: 6px; }
.mg-t-7 { margin-top: 7px; }
.mg-t-8 { margin-top: 8px; }
.mg-t-10 { margin-top: 10px; }
.mg-t-12 { margin-top: 12px; }
.mg-t-15 { margin-top: 15px; }
.mg-t-20 { margin-top: 20px; }
.mg-t-25 { margin-top: 25px; }
.mg-t-30 { margin-top: 30px; }
.mg-t-35 { margin-top: 35px; }
.mg-t-40 { margin-top: 40px; }
.mg-t-45 { margin-top: 45px; }
.mg-t-50 { margin-top: 50px; }
.mg-t-60 { margin-top: 60px; }
.mg-t-70 { margin-top: 70px; }
.mg-t-80 { margin-top: 80px; }
.mg-t-90 { margin-top: 90px; }
.mg-t-100 { margin-top: 100px; }
.mg-t-120 { margin-top: 120px; }
.mg-t-150 { margin-top: 150px; }

/** bottom margin **/
.mg-b-1 { margin-bottom: 1px; }
.mg-b-2 { margin-bottom: 2px; }
.mg-b-3 { margin-bottom: 3px; }
.mg-b-4 { margin-bottom: 4px; }
.mg-b-5 { margin-bottom: 5px; }
.mg-b-6 { margin-bottom: 6px; }
.mg-b-7 { margin-bottom: 7px; }
.mg-b-8 { margin-bottom: 8px; }
.mg-b-10 { margin-bottom: 10px; }
.mg-b-12 { margin-bottom: 12px; }
.mg-b-15 { margin-bottom: 15px; }
.mg-b-20 { margin-bottom: 20px; }
.mg-b-25 { margin-bottom: 25px; }
.mg-b-30 { margin-bottom: 30px; }
.mg-b-35 { margin-bottom: 35px; }
.mg-b-40 { margin-bottom: 40px; }
.mg-b-45 { margin-bottom: 45px; }
.mg-b-50 { margin-bottom: 50px; }
.mg-b-60 { margin-bottom: 60px; }
.mg-b-70 { margin-bottom: 70px; }
.mg-b-80 { margin-bottom: 80px; }
.mg-b-90 { margin-bottom: 90px; }
.mg-b-100 { margin-bottom: 100px; }
.mg-b-120 { margin-bottom: 120px; }
.mg-b-150 { margin-bottom: 150px; }
/** left margin **/
.mg-l-1 { margin-left: 1px; }
.mg-l-2 { margin-left: 2px; }
.mg-l-3 { margin-left: 3px; }
.mg-l-4 { margin-left: 4px; }
.mg-l-5 { margin-left: 5px; }
.mg-l-6 { margin-left: 6px; }
.mg-l-7 { margin-left: 7px; }
.mg-l-8 { margin-left: 8px; }
.mg-l-10 { margin-left: 10px; }
.mg-l-12 { margin-left: 12px; }
.mg-l-15 { margin-left: 15px; }
.mg-l-20 { margin-left: 20px; }
.mg-l-25 { margin-left: 25px; }
.mg-l-30 { margin-left: 30px; }
.mg-l-35 { margin-left: 35px; }
.mg-l-40 { margin-left: 40px; }
.mg-l-45 { margin-left: 45px; }
.mg-l-50 { margin-left: 50px; }
.mg-l-60 { margin-left: 60px; }
.mg-l-70 { margin-left: 70px; }
.mg-l-80 { margin-left: 80px; }
.mg-l-90 { margin-left: 90px; }
.mg-l-100 { margin-left: 100px; }
.mg-l-120 { margin-left: 120px; }
.mg-l-150 { margin-left: 150px; }
.mg-l-200 { margin-left: 200px; }
.mg-l-250 { margin-left: 250px; }
.mg-l-300 { margin-left: 300px; }
.mg-l-350 { margin-left: 350px; }

/** right margin **/
.mg-r-1 { margin-right: 1px; }
.mg-r-2 { margin-right: 2px; }
.mg-r-3 { margin-right: 3px; }
.mg-r-4 { margin-right: 4px; }
.mg-r-5 { margin-right: 5px; }
.mg-r-6 { margin-right: 6px; }
.mg-r-7 { margin-right: 7px; }
.mg-r-8 { margin-right: 8px; }
.mg-r-10 { margin-right: 10px; }
.mg-r-12 { margin-right: 12px; }
.mg-r-15 { margin-right: 15px; }
.mg-r-20 { margin-right: 20px; }
.mg-r-25 { margin-right: 25px; }
.mg-r-30 { margin-right: 30px; }
.mg-r-35 { margin-right: 35px; }
.mg-r-40 { margin-right: 40px; }
.mg-r-45 { margin-right: 45px; }
.mg-r-50 { margin-right: 50px; }
.mg-r-60 { margin-right: 60px; }
.mg-r-70 { margin-right: 70px; }
.mg-r-80 { margin-right: 80px; }
.mg-r-90 { margin-right: 90px; }
.mg-r-100 { margin-right: 100px; }
.mg-r-120 { margin-right: 120px; }
.mg-r-150 { margin-right: 150px; }
.mg-r-200 { margin-right: 200px; }
.mg-r-250 { margin-right: 250px; }
.mg-r-300 { margin-right: 300px; }
.mg-r-350 { margin-right: 350px; }
/** x margin **/
.mg-x-1 { margin-left: 1px; margin-right: 1px; }
.mg-x-2 { margin-left: 2px; margin-right: 2px; }
.mg-x-3 { margin-left: 3px; margin-right: 3px; }
.mg-x-4 { margin-left: 4px; margin-right: 4px; }
.mg-x-5 { margin-left: 5px; margin-right: 5px; }
.mg-x-6 { margin-left: 6px; margin-right: 6px; }
.mg-x-7 { margin-left: 7px; margin-right: 7px; }
.mg-x-8 { margin-left: 8px; margin-right: 8px; }
.mg-x-10 { margin-left: 10px; margin-right: 10px; }
.mg-x-12 { margin-left: 12px; margin-right: 12px; }
.mg-x-15 { margin-left: 15px; margin-right: 15px; }
.mg-x-20 { margin-left: 20px; margin-right: 20px; }
.mg-x-25 { margin-left: 25px; margin-right: 25px; }
.mg-x-30 { margin-left: 30px; margin-right: 30px; }
.mg-x-35 { margin-left: 35px; margin-right: 35px; }
.mg-x-40 { margin-left: 40px; margin-right: 40px; }
.mg-x-45 { margin-left: 45px; margin-right: 45px; }
.mg-x-50 { margin-left: 50px; margin-right: 50px; }
.mg-x-60 { margin-left: 60px; margin-right: 60px; }
.mg-x-70 { margin-left: 70px; margin-right: 70px; }
.mg-x-80 { margin-left: 80px; margin-right: 80px; }
.mg-x-90 { margin-left: 90px; margin-right: 90px; }
.mg-x-100 { margin-left: 100px; margin-right: 100px; }
.mg-x-120 { margin-left: 120px; margin-right: 120px; }
.mg-x-150 { margin-left: 150px; margin-right: 150px; }
.mg-x-200 { margin-left: 200px; margin-right: 200px; }
.mg-x-250 { margin-left: 250px; margin-right: 250px; }
.mg-x-300 { margin-left: 300px; margin-right: 300px; }
.mg-x-350 { margin-left: 350px; margin-right: 350px; }
.mg-x-auto { margin-left: auto; margin-right: auto; }
/** y margin **/
.mg-y-1 { margin-top: 1px; margin-bottom: 1px; }
.mg-y-2 { margin-top: 2px; margin-bottom: 2px; }
.mg-y-3 { margin-top: 3px; margin-bottom: 3px; }
.mg-y-4 { margin-top: 4px; margin-bottom: 4px; }
.mg-y-5 { margin-top: 5px; margin-bottom: 5px; }
.mg-y-6 { margin-top: 6px; margin-bottom: 6px; }
.mg-y-7 { margin-top: 7px; margin-bottom: 7px; }
.mg-y-8 { margin-top: 8px; margin-bottom: 8px; }
.mg-y-10 { margin-top: 10px; margin-bottom: 10px; }
.mg-y-12 { margin-top: 12px; margin-bottom: 12px; }
.mg-y-15 { margin-top: 15px; margin-bottom: 15px; }
.mg-y-20 { margin-top: 20px; margin-bottom: 20px; }
.mg-y-25 { margin-top: 25px; margin-bottom: 25px; }
.mg-y-30 { margin-top: 30px; margin-bottom: 30px; }
.mg-y-35 { margin-top: 35px; margin-bottom: 35px; }
.mg-y-40 { margin-top: 40px; margin-bottom: 40px; }
.mg-y-45 { margin-top: 45px; margin-bottom: 45px; }
.mg-y-50 { margin-top: 50px; margin-bottom: 50px; }
.mg-y-60 { margin-top: 60px; margin-bottom: 60px; }
.mg-y-70 { margin-top: 70px; margin-bottom: 70px; }
.mg-y-80 { margin-top: 80px; margin-bottom: 80px; }
.mg-y-90 { margin-top: 90px; margin-bottom: 90px; }
.mg-y-100 { margin-top: 100px; margin-bottom: 100px; }
.mg-y-120 { margin-top: 120px; margin-bottom: 120px; }
.mg-y-150 { margin-top: 150px; margin-bottom: 150px; }

/** border-widths **/
.border-1 { border: 1px solid #ebefff; }
.border-2 { border: 2px solid #ebefff; }
.border-3 { border: 3px solid #ebefff; }
.border-4 { border: 4px solid #ebefff; }
/** border-bottom-widths **/
.border-t-1 { border-top: 1px solid #ebefff; }
.border-t-2 { border-top: 2px solid #ebefff; }
.border-t-3 { border-top: 3px solid #ebefff; }
.border-t-4 { border-top: 4px solid #ebefff; }
/** border-bottom-widths **/
.border-b-1 { border-bottom: 1px solid #ebefff; }
.border-b-2 { border-bottom: 2px solid #ebefff; }
.border-b-3 { border-bottom: 3px solid #ebefff; }
.border-b-4 { border-bottom: 4px solid #ebefff; }
/** border-left-widths **/
.border-l-1 { border-left: 1px solid #ebefff; }
.border-l-2 { border-left: 2px solid #ebefff; }
.border-l-3 { border-left: 3px solid #ebefff; }
.border-l-4 { border-left: 4px solid #ebefff; }
/** border-right-widths **/
.border-r-1 { border-right: 1px solid #ebefff; }
.border-r-2 { border-right: 2px solid #ebefff; }
.border-r-3 { border-right: 3px solid #ebefff; }
.border-r-4 { border-right: 4px solid #ebefff; }
/** border-dark-widths **/
.border-d-1 { border: 1px solid #1F1F1F; }
.border-d-d-2 { border: 2px solid #1F1F1F; }
.border-d-3 { border: 3px solid #1F1F1F; }
.border-d-4 { border: 4px solid #1F1F1F; }
/** border-dark-top-widths **/
.border-d-t-1 { border-top: 1px solid #1F1F1F; }
.border-d-t-2 { border-top: 2px solid #1F1F1F; }
.border-d-t-3 { border-top: 3px solid #1F1F1F; }
.border-d-t-4 { border-top: 4px solid #1F1F1F; }
/** border-dark-bottom-widths **/
.border-d-b-1 { border-bottom: 1px solid #1F1F1F; }
.border-d-b-2 { border-bottom: 2px solid #1F1F1F; }
.border-d-b-3 { border-bottom: 3px solid #1F1F1F; }
.border-d-b-4 { border-bottom: 4px solid #1F1F1F; }
/** border-dark-left-widths **/
.border-d-l-1 { border-left: 1px solid #1F1F1F; }
.border-d-l-2 { border-left: 2px solid #1F1F1F; }
.border-d-l-3 { border-left: 3px solid #1F1F1F; }
.border-d-l-4 { border-left: 4px solid #1F1F1F; }
/** border-dark-right-widths **/
.border-d-r-1 { border-right: 1px solid #1F1F1F; }
.border-d-r-2 { border-right: 2px solid #1F1F1F; }
.border-d-r-3 { border-right: 3px solid #1F1F1F; }
.border-d-r-4 { border-right: 4px solid #1F1F1F; }
/** radius **/
.rad-1 { border-radius: 1px; }
.rad-2 { border-radius: 2px; }
.rad-3 { border-radius: 3px; }
.rad-4 { border-radius: 4px; }
.rad-5 { border-radius: 5px; }
.rad-6 { border-radius: 6px; }
.rad-8 { border-radius: 8px; }
.rad-10 { border-radius: 10px; }
.rad-12 { border-radius: 12px; }
.rad-15 { border-radius: 15px; }
.rad-20 { border-radius: 20px; }
.rad-25 { border-radius: 25px; }
.rad-30 { border-radius: 30px; }
.rad-40 { border-radius: 40px; }
.rad-50 { border-radius: 50px; }
.rad-circle { border-radius: 50%; }
/** radius top **/
.rad-t-1 { border-top-left-radius: 1px; border-top-right-radius: 1px; }
.rad-t-2 { border-top-left-radius: 2px; border-top-right-radius: 2px; }
.rad-t-3 { border-top-left-radius: 3px; border-top-right-radius: 3px; }
.rad-t-4 { border-top-left-radius: 4px; border-top-right-radius: 4px; }
.rad-t-5 { border-top-left-radius: 5px; border-top-right-radius: 5px; }
.rad-t-6 { border-top-left-radius: 6px; border-top-right-radius: 6px; }
.rad-t-8 { border-top-left-radius: 8px; border-top-right-radius: 8px; }
.rad-t-10 { border-top-left-radius: 10px; border-top-right-radius: 10px; }
.rad-t-12 { border-top-left-radius: 12px; border-top-right-radius: 12px; }
.rad-t-15 { border-top-left-radius: 15px; border-top-right-radius: 15px; }
.rad-t-20 { border-top-left-radius: 20px; border-top-right-radius: 20px; }
.rad-t-25 { border-top-left-radius: 25px; border-top-right-radius: 25px; }
.rad-t-30 { border-top-left-radius: 30px; border-top-right-radius: 30px; }
.rad-t-40 { border-top-left-radius: 40px; border-top-right-radius: 40px; }
.rad-t-50 { border-top-left-radius: 50px; border-top-right-radius: 50px; }

/** radius bottom**/
.rad-b-1 { border-bottom-left-radius: 1px; border-bottom-right-radius: 1px; }
.rad-b-2 { border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; }
.rad-b-3 { border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; }
.rad-b-4 { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; }
.rad-b-5 { border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; }
.rad-b-6 { border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; }
.rad-b-8 { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }
.rad-b-10 { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; }
.rad-b-12 { border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; }
.rad-b-15 { border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; }
.rad-b-20 { border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; }
.rad-b-25 { border-bottom-left-radius: 25px; border-bottom-right-radius: 25px; }
.rad-b-30 { border-bottom-left-radius: 30px; border-bottom-right-radius: 30px; }
.rad-b-40 { border-bottom-left-radius: 40px; border-bottom-right-radius: 40px; }
.rad-b-50 { border-bottom-left-radius: 50px; border-bottom-right-radius: 50px; }
/** radius left**/
.rad-l-1 { border-top-left-radius: 1px; border-bottom-left-radius: 1px; }
.rad-l-2 { border-top-left-radius: 2px; border-bottom-left-radius: 2px; }
.rad-l-3 { border-top-left-radius: 3px; border-bottom-left-radius: 3px; }
.rad-l-4 { border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
.rad-l-5 { border-top-left-radius: 5px; border-bottom-left-radius: 5px; }
.rad-l-6 { border-top-left-radius: 6px; border-bottom-left-radius: 6px; }
.rad-l-8 { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.rad-l-10 { border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
.rad-l-12 { border-top-left-radius: 12px; border-bottom-left-radius: 12px; }
.rad-l-15 { border-top-left-radius: 15px; border-bottom-left-radius: 15px; }
.rad-l-20 { border-top-left-radius: 20px; border-bottom-left-radius: 20px; }
.rad-l-25 { border-top-left-radius: 25px; border-bottom-left-radius: 25px; }
.rad-l-30 { border-top-left-radius: 30px; border-bottom-left-radius: 30px; }
.rad-l-40 { border-top-left-radius: 40px; border-bottom-left-radius: 40px; }
.rad-l-50 { border-top-left-radius: 50px; border-bottom-left-radius: 50px; }
/** radius right**/
.rad-r-1 { border-top-right-radius: 1px; border-bottom-right-radius: 1px; }
.rad-r-2 { border-top-right-radius: 2px; border-bottom-right-radius: 2px; }
.rad-r-3 { border-top-right-radius: 3px; border-bottom-right-radius: 3px; }
.rad-r-4 { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
.rad-r-5 { border-top-right-radius: 5px; border-bottom-right-radius: 5px; }
.rad-r-6 { border-top-right-radius: 6px; border-bottom-right-radius: 6px; }
.rad-r-8 { border-top-right-radius: 8px; border-bottom-right-radius: 8px; }
.rad-r-10 { border-top-right-radius: 10px; border-bottom-right-radius: 10px; }
.rad-r-12 { border-top-right-radius: 12px; border-bottom-right-radius: 12px; }
.rad-r-15 { border-top-right-radius: 15px; border-bottom-right-radius: 15px; }
.rad-r-20 { border-top-right-radius: 20px; border-bottom-right-radius: 20px; }
.rad-r-25 { border-top-right-radius: 25px; border-bottom-right-radius: 25px; }
.rad-r-30 { border-top-right-radius: 30px; border-bottom-right-radius: 30px; }
.rad-r-40 { border-top-right-radius: 40px; border-bottom-right-radius: 40px; }
.rad-r-50 { border-top-right-radius: 50px; border-bottom-right-radius: 50px; }
/** radius top left**/
.rad-tl-1 { border-top-left-radius: 1px; }
.rad-tl-2 { border-top-left-radius: 2px; }
.rad-tl-3 { border-top-left-radius: 3px; }
.rad-tl-4 { border-top-left-radius: 4px; }
.rad-tl-5 { border-top-left-radius: 5px; }
.rad-tl-6 { border-top-left-radius: 6px; }
.rad-tl-8 { border-top-left-radius: 8px; }
.rad-tl-10 { border-top-left-radius: 10px; }
.rad-tl-12 { border-top-left-radius: 12px; }
.rad-tl-15 { border-top-left-radius: 15px; }
.rad-tl-20 { border-top-left-radius: 20px; }
.rad-tl-25 { border-top-left-radius: 25px; }
.rad-tl-30 { border-top-left-radius: 30px; }
.rad-tl-40 { border-top-left-radius: 40px; }
.rad-tl-50 { border-top-left-radius: 50px; }
/** radius top right**/
.rad-tr-1 { border-top-right-radius: 1px; }
.rad-tr-2 { border-top-right-radius: 2px; }
.rad-tr-3 { border-top-right-radius: 3px; }
.rad-tr-4 { border-top-right-radius: 4px; }
.rad-tr-5 { border-top-right-radius: 5px; }
.rad-tr-6 { border-top-right-radius: 6px; }
.rad-tr-8 { border-top-right-radius: 8px; }
.rad-tr-10 { border-top-right-radius: 10px; }
.rad-tr-12 { border-top-right-radius: 12px; }
.rad-tr-15 { border-top-right-radius: 15px; }
.rad-tr-20 { border-top-right-radius: 20px; }
.rad-tr-25 { border-top-right-radius: 25px; }
.rad-tr-30 { border-top-right-radius: 30px; }
.rad-tr-40 { border-top-right-radius: 40px; }
.rad-tr-50 { border-top-right-radius: 50px; }

/** radius bottom left**/
.rad-bl-2 { border-bottom-left-radius: 2px; }
.rad-bl-3 { border-bottom-left-radius: 3px; }
.rad-bl-4 { border-bottom-left-radius: 4px; }
.rad-bl-5 { border-bottom-left-radius: 5px; }
.rad-bl-6 { border-bottom-left-radius: 6px; }
.rad-bl-8 { border-bottom-left-radius: 8px; }
.rad-bl-10 { border-bottom-left-radius: 10px; }
.rad-bl-12 { border-bottom-left-radius: 12px; }
.rad-bl-15 { border-bottom-left-radius: 15px; }
.rad-bl-20 { border-bottom-left-radius: 20px; }
.rad-bl-25 { border-bottom-left-radius: 25px; }
.rad-bl-30 { border-bottom-left-radius: 30px; }
.rad-bl-40 { border-bottom-left-radius: 40px; }
.rad-bl-50 { border-bottom-left-radius: 50px; }
/** radius borrom right**/
.rad-br-2 { border-bottom-right-radius: 2px; }
.rad-br-3 { border-bottom-right-radius: 3px; }
.rad-br-4 { border-bottom-right-radius: 4px; }
.rad-br-5 { border-bottom-right-radius: 5px; }
.rad-br-6 { border-bottom-right-radius: 6px; }
.rad-br-8 { border-bottom-right-radius: 8px; }
.rad-br-10 { border-bottom-right-radius: 10px; }
.rad-br-12 { border-bottom-right-radius: 12px; }
.rad-br-15 { border-bottom-right-radius: 15px; }
.rad-br-20 { border-bottom-right-radius: 20px; }
.rad-br-25 { border-bottom-right-radius: 25px; }
.rad-br-30 { border-bottom-right-radius: 30px; }
.rad-br-40 { border-bottom-right-radius: 40px; }
.rad-br-50 { border-bottom-right-radius: 50px; }

/** (Text Alignment) **/
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

/** محاذاة العناصر داخل Flexbox – أفقيًا (justify-content) **/
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly; }

/** محاذاة العناصر داخل Flexbox – رأسيًا (align-items) **/
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }
.items-baseline { align-items: baseline; }

/** محاذاة ذاتية (العنصر نفسه داخل Flexbox) – align-self **/
.self-start { align-self: flex-start; }
.self-center { align-self: center; }
.self-end { align-self: flex-end; }
.self-stretch { align-self: stretch; }

/** محاذاة داخل Grid – place-items, place-content (اختياري)
css
نسخ
تحرير
 **/
.place-center { place-items: center; place-content: center; }

/** محاذاة عمودية للنص داخل عناصر الجدول أو البلوكات (vertical-align) **/
.v-align-top { vertical-align: top; }
.v-align-middle { vertical-align: middle; }
.v-align-bottom { vertical-align: bottom; }

/** Float **/
.float-left { float: left; }

.float-right { float: right; }

.float-none { float: none; }

/** متغيرات Clear (لإلغاء تأثير الفلوت على العنصر التالي) **/
.clear-left { clear: left; }

.clear-right { clear: right; }

.clear-both { clear: both; }

.clear-none { clear: none; }

/** Display **/
.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-none { display: none; }
.d-flex { display: flex; }
.d-inline-flex { display: inline-flex; }
.d-grid { display: grid; }
.d-inline-grid { display: inline-grid; }
.d-table { display: table; }
.d-table-row { display: table-row; }
.d-table-cell { display: table-cell; }
.d-list-item { display: list-item; }
.d-contents { display: contents; }
.d-run-in { display: run-in; } /* نادر الاستخدام */
.d-flow-root { display: flow-root; }
.d-webkit-box { display: -webkit-box; } /* قديم - خاص بـ WebKit */


/** اتجاه العناصر (flex-direction) **/
.flex-row { flex-direction: row; }

.flex-row-reverse { flex-direction: row-reverse; }

.flex-col { flex-direction: column; }

.flex-col-reverse { flex-direction: column-reverse; }

/** التفاف العناصر (flex-wrap) **/
.flex-wrap { flex-wrap: wrap; }

.flex-nowrap { flex-wrap: nowrap; }

.flex-wrap-reverse { flex-wrap: wrap-reverse; }

/** المحاذاة الأفقية (justify-content) **/
.justify-start { justify-content: flex-start; }

.justify-center { justify-content: center; }

.justify-end { justify-content: flex-end; }

.justify-between { justify-content: space-between; }

.justify-around { justify-content: space-around; }

.justify-evenly { justify-content: space-evenly; }

/** المحاذاة الرأسية (align-items) **/
.items-start { align-items: flex-start; }

.items-center { align-items: center; }

.items-end { align-items: flex-end; }

.items-stretch { align-items: stretch; }

.items-baseline { align-items: baseline; }

/** محاذاة المحتوى داخل الحاوية (align-content) **/
.content-start { align-content: flex-start; }

.content-center { align-content: center; }

.content-end { align-content: flex-end; }

.content-between { align-content: space-between; }

.content-around { align-content: space-around; }

.content-stretch { align-content: stretch; }

/** محاذاة العنصر الفردي (align-self) **/
.self-start { align-self: flex-start; }

.self-center { align-self: center; }

.self-end { align-self: flex-end; }

.self-stretch { align-self: stretch; }

.self-baseline { align-self: baseline; }

/** حجم ونمو العناصر (flex-grow / flex-shrink / flex-basis) **/
.flex-1 { flex: 1 1 0%; }

.flex-auto { flex: 1 1 auto; }

.flex-initial { flex: 0 1 auto; }

.flex-none { flex: none; }

/** ترتيب العناصر (order) **/
.order-1 { order: 1; }
.order-2 { order: 2; }
.order-3 { order: 3; }
.order-4 { order: 4; }
.order-5 { order: 5; }
.order-6 { order: 6; }
.order-7 { order: 7; }
.order-8 { order: 8; }
.order-9 { order: 9; }
.order-10 { order: 10; }
.order-first { order: -9999; }
.order-last { order: 9999; }
.order-none { order: 0; }
/** Visibility **/
.visible { visibility: visible; }
.invisible { visibility: hidden; }
.visibility-collapse { visibility: collapse; } /* مفيد في الجداول */
.opacity-0 { opacity: 0; }
.opacity-10 { opacity: 0.1; }
.opacity-20 { opacity: 0.2; }
.opacity-30 { opacity: 0.3; }
.opacity-40 { opacity: 0.4; }
.opacity-50 { opacity: 0.5; }
.opacity-60 { opacity: 0.6; }
.opacity-70 { opacity: 0.7; }
.opacity-80 { opacity: 0.8; }
.opacity-90 { opacity: 0.9; }
.opacity-100 { opacity: 1; }

/** Icons **/
.ics-10 { font-size: 0.625rem; }   /* 10px */
.ics-12 { font-size: 0.75rem; }    /* 12px */
.ics-14 { font-size: 0.875rem; }   /* 14px */
.ics-16 { font-size: 1rem; }       /* 16px */
.ics-18 { font-size: 1.125rem; }   /* 18px */
.ics-20 { font-size: 1.25rem; }    /* 20px */
.ics-24 { font-size: 1.5rem; }     /* 24px */
.ics-28 { font-size: 1.75rem; }    /* 28px */
.ics-32 { font-size: 2rem; }       /* 32px */
.ics-36 { font-size: 2.25rem; }    /* 36px */
.ics-40 { font-size: 2.5rem; }     /* 40px */
.ics-48 { font-size: 3rem; }       /* 48px */
.ics-56 { font-size: 3.5rem; }     /* 56px */
.ics-64 { font-size: 4rem; }       /* 64px */
.ics-72 { font-size: 4.5rem; }     /* 72px */
.ics-80 { font-size: 5rem; }       /* 80px */

/** Font**/
.font-arial {
  font-family: Arial, sans-serif;
}

.font-helvetica {
  font-family: Helvetica, sans-serif;
}

.font-sans {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.font-serif {
  font-family: Georgia, 'Times New Roman', Times, serif;
}

.font-monospace {
  font-family: 'Courier New', Courier, monospace;
}

.font-roboto {
  font-family: 'Roboto', sans-serif;
}

.font-open-sans {
  font-family: 'Open Sans', sans-serif;
}

.font-lato {
  font-family: 'Lato', sans-serif;
}

.font-montserrat {
  font-family: 'Montserrat', sans-serif;
}

.font-raleway {
  font-family: 'Raleway', sans-serif;
}

.font-poppins {
  font-family: 'Poppins', sans-serif;
}

.font-nunito {
  font-family: 'Nunito', sans-serif;
}

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

.font-tajawal {
  font-family: 'Tajawal', sans-serif;
}

.font-amiri {
  font-family: 'Amiri', serif;
}

.font-alegreya {
  font-family: 'Alegreya', serif;
}

.fs-10 { font-size: 0.625rem; }   /* 10px */
.fs-12 { font-size: 0.75rem; }    /* 12px */
.fs-13 { font-size: 0.80rem; }    /* 12px */
.fs-14 { font-size: 0.875rem; }   /* 14px */
.fs-16 { font-size: 1rem; }       /* 16px */
.fs-18 { font-size: 1.125rem; }   /* 18px */
.fs-20 { font-size: 1.25rem; }    /* 20px */
.fs-24 { font-size: 1.5rem; }     /* 24px */
.fs-28 { font-size: 1.75rem; }    /* 28px */
.fs-32 { font-size: 2rem; }       /* 32px */
.fs-36 { font-size: 2.25rem; }    /* 36px */
.fs-40 { font-size: 2.5rem; }     /* 40px */
.fs-48 { font-size: 3rem; }       /* 48px */
.fs-56 { font-size: 3.5rem; }     /* 56px */
.fs-64 { font-size: 4rem; }       /* 64px */
.fs-72 { font-size: 4.5rem; }     /* 72px */
.fs-80 { font-size: 5rem; }       /* 80px */

@media (max-width: 768px) {
  .fs-md-16 { font-size: 1rem; }
  .fs-md-20 { font-size: 1.25rem; }
}

@media (max-width: 480px) {
  .fs-sm-14 { font-size: 0.875rem; }
  .fs-sm-18 { font-size: 1.125rem; }
}

.fw-thin       { font-weight: 100; }

.fw-extra-light{ font-weight: 200; }

.fw-light      { font-weight: 300; }

.fw-normal     { font-weight: 400; }

.fw-medium     { font-weight: 500; }

.fw-semibold   { font-weight: 600; }

.fw-bold       { font-weight: 700; }

.fw-extra-bold { font-weight: 800; }

.fw-black      { font-weight: 900; }

.lh-100   { line-height: 1; }

.lh-125{ line-height: 1.25; }

.lh-150 { line-height: 1.5; }

.lh-175{ line-height: 1.75; }

.lh-200   { line-height: 2; }

.lh-225   { line-height: 2.25; }

.lh-275   { line-height: 2.75; }

.lh-300   { line-height: 3; }

.lh-normal { line-height: normal; }

.ls-0   { letter-spacing: 0; }

.ls-1   { letter-spacing: 0.01em; }

.ls-2   { letter-spacing: 0.02em; }

.ls-3   { letter-spacing: 0.03em; }

.ls-5   { letter-spacing: 0.05em; }

.ls-10  { letter-spacing: 0.1em; }

.ls-tight   { letter-spacing: -0.01em; }

.ls-tighter { letter-spacing: -0.03em; }

.ls-loose   { letter-spacing: 0.05em; }

.ls-looser  { letter-spacing: 0.1em; }

/** Colors **/
.clr-primary   { color: #007bff; }   /* اللون الأساسي */

.clr-secondary { color: #6c757d; }   /* اللون الثانوي */

.clr-success   { color: #28a745; }   /* اللون الأخضر */

.clr-danger    { color: #dc3545; }   /* اللون الأحمر */

.clr-warning   { color: #ffc107; }   /* اللون الأصفر */

.clr-info      { color: #17a2b8; }   /* اللون الأزرق الفاتح */

.clr-light     { color: #f8f9fa; }   /* اللون الفاتح */

.clr-dark      { color: #343a40; }   /* اللون الداكن */

.clr-gray      { color: #6C7383; }   /* الرمادى */

.clr-muted     { color: #6c757d; }   /* لون التظليل */

.clr-white     { color: #fff; }      /* اللون الأبيض */

.clr-black     { color: #000; }      /* اللون الأسود */

.bg-primary   { background-color: #007bff; }   /* اللون الأساسي */

.bg-secondary { background-color: #6c757d; }   /* اللون الثانوي */

.bg-success   { background-color: #28a745; }   /* اللون الأخضر */

.bg-danger    { background-color: #dc3545; }   /* اللون الأحمر */

.bg-warning   { background-color: #ffc107; }   /* اللون الأصفر */

.bg-info      { background-color: #17a2b8; }   /* اللون الأزرق الفاتح */

.bg-light     { background-color: #ebefff; }   /* اللون الفاتح */

.bg-custom{ background-color:#F5F7FF; }
    
    
.bg-dark      { background-color: #343a40; }   /* اللون الداكن */

.bg-gray      { background-color: #6C7383; }   /* الرمادى */

.bg-muted     { background-color: #6c757d; }   /* لون التظليل */

.bg-white     { background-color: #fff; }      /* اللون الأبيض */

.bg-black     { background-color: #000; }      /* اللون الأسود

/** BTNs **/

.btn-xs { 
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    border-radius: 0.2rem;
}

.btn-sm { 
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    border-radius: 0.25rem;
}

.btn-md { 
    padding: 0.5rem 1rem;
    font-size: 1rem;
    border-radius: 0.25rem; /* القيمة الافتراضية */
}

.btn-lg { 
    padding: 0.75rem 1.5rem;
    font-size: 1.25rem;
    border-radius: 0.3rem;
}

.btn-xl { 
    padding: 1rem 2rem;
    font-size: 1.5rem;
    border-radius: 0.35rem;
}

/* الزر الأساسي */
.btn-primary { 
    background-color: #007bff; 
    color: #fff; 
    border: 1px solid #007bff; 
}

.btn-secondary { 
    background-color: #6c757d; 
    color: #fff; 
    border: 1px solid #6c757d; 
}

.btn-success { 
    background-color: #28a745; 
    color: #fff; 
    border: 1px solid #28a745; 
}

.btn-danger { 
    background-color: #dc3545; 
    color: #fff; 
    border: 1px solid #dc3545; 
}

.btn-warning { 
    background-color: #ffc107; 
    color: #212529; 
    border: 1px solid #ffc107; 
}

.btn-info { 
    background-color: #17a2b8; 
    color: #fff; 
    border: 1px solid #17a2b8; 
}

.btn-light { 
    background-color: #ebefff; 
    color: #212529; 
    border: 1px solid #ebefff; 
}

.btn-dark { 
    background-color: #343a40; 
    color: #fff; 
    border: 1px solid #343a40; 
}

/* الزر الأبيض */
.btn-white { 
    background-color: #fff; 
    color: #212529; 
    border: 1px solid #ddd; 
}

/* الزر الشفاف */
.btn-transparent { 
    background-color: transparent; 
    color: #007bff; 
    border: 1px solid #007bff; 
}
.btn:hover { 
    opacity: 0.85;
    cursor: pointer;
}

.btn:active { 
    opacity: 0.75;
}

.btn:focus { 
    outline: none;
    box-shadow: 0 0 0 0px rgba(0, 123, 255, 0.5);
}

/* الزر على الهور مع تأثير */
.btn-primary:hover { 
    background-color: #0056b3; 
    border-color: #0056b3; 
}

.btn-secondary:hover { 
    background-color: #5a6268; 
    border-color: #545b62; 
}

.btn-success:hover { 
    background-color: #218838; 
    border-color: #1e7e34; 
}

.btn-danger:hover { 
    background-color: #c82333; 
    border-color: #bd2130; 
}

.btn-responsive {
    width: 100%;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
}

@media (max-width: 768px) {
    .btn-responsive {
        width: 100%;
        padding: 1rem 2rem;
    }
}

/** shadows **/

.m-shad{
    -webkit-box-shadow: 0px 5px 21px -5px #CDD1E1;
    -moz-box-shadow: 0px 5px 21px -5px #CDD1E1;
    box-shadow: 0px 5px 21px -5px #CDD1E1;
}

/* ظل خفيف جدًا */
.shadow-xs {
  box-shadow: 0 1px 2px rgba(205, 209, 225, 0.25);
}

/* ظل خفيف */
.shadow-sm {
  box-shadow: 0 2px 4px rgba(205, 209, 225, 0.35);
}

/* ظل متوسط */
.shadow-md {
  box-shadow: 0 4px 8px rgba(205, 209, 225, 0.45);
}

/* ظل كبير */
.shadow-lg {
  box-shadow: 0 8px 16px rgba(205, 209, 225, 0.55);
}

/* ظل أكبر */
.shadow-xl {
  box-shadow: 0 12px 24px rgba(205, 209, 225, 0.65);
}

/* ظل داخلي */
.shadow-inset {
  box-shadow: inset 0 2px 4px rgba(205, 209, 225, 0.4);
}

/* انتقال عام للظل */
.shadow-hover {
  transition: box-shadow 0.3s ease;
}

/* تدرج من بدون ظل إلى ظل متوسط */
.shadow-hover:hover {
  box-shadow: 0 4px 8px rgba(205, 209, 225, 0.45);
}

/* ظل متوسط دائم - ويكبر عند الهوفر */
.shadow-md-hover {
  box-shadow: 0 2px 4px rgba(205, 209, 225, 0.3);
  transition: box-shadow 0.3s ease;
}

.shadow-md-hover:hover {
  box-shadow: 0 6px 12px rgba(205, 209, 225, 0.5);
}

/* ظل كبير يتفاعل عند التمرير */
.shadow-lg-hover {
  box-shadow: 0 4px 8px rgba(205, 209, 225, 0.4);
  transition: box-shadow 0.3s ease;
}

.shadow-lg-hover:hover {
  box-shadow: 0 10px 20px rgba(205, 209, 225, 0.6);
}
.card-shadow {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 6px 12px rgba(205, 209, 225, 0.35);
  transition: box-shadow 0.3s ease;
}

.card-shadow:hover {
  box-shadow: 0 12px 24px rgba(205, 209, 225, 0.45);
}

.input-shadow {
  border: 1px solid #ccc;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(205, 209, 225, 0.25);
  transition: box-shadow 0.3s ease, border 0.3s ease;
}

.input-shadow:focus {
  border-color: #0e1014;
  outline: none;
  box-shadow: 0 0 0 3px rgba(205, 209, 225, 0.45);
}

/** Overflow **/
.overflow-visible {
  overflow: visible;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-scroll {
  overflow: scroll;
}

.overflow-auto {
  overflow: auto;
}
.overflow-y-visible {
  overflow-y: visible;
}

.overflow-y-hidden {
  overflow-y: hidden;
}

.overflow-y-scroll {
  overflow-y: scroll;
}

.overflow-y-auto {
  overflow-y: auto;
}
.overflow-x-visible {
  overflow-x: visible;
}

.overflow-x-hidden {
  overflow-x: hidden;
}

.overflow-x-scroll {
  overflow-x: scroll;
}

.overflow-x-auto {
  overflow-x: auto;
}
/* الافتراضي */
.overflow-responsive {
  overflow: visible;
}

/* موبايل (شاشة صغيرة) */
@media (max-width: 576px) {
  .overflow-responsive {
    overflow: auto;
  }
}

/* تابلت */
@media (min-width: 577px) and (max-width: 768px) {
  .overflow-responsive {
    overflow: hidden;
  }
}

/* ديسكتوب */
@media (min-width: 769px) {
  .overflow-responsive {
    overflow: visible;
  }
}

/* Y فقط */
.overflow-y-responsive {
  overflow-y: visible;
}

@media (max-width: 576px) {
  .overflow-y-responsive {
    overflow-y: auto;
  }
}

/* X فقط */
.overflow-x-responsive {
  overflow-x: visible;
}

@media (max-width: 576px) {
  .overflow-x-responsive {
    overflow-x: scroll;
  }
}

.center-flex {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* أو أي ارتفاع */
}

.center-inside {
  display: flex;
  justify-content: center;
  align-items: center;
}

.center-x {
  display: flex;
  justify-content: center;
}

.center-y {
  display: flex;
  align-items: center;
}

.pos-static    { position: static; }
.pos-relative  { position: relative; }
.pos-absolute  { position: absolute; }
.pos-fixed     { position: fixed; }
.pos-sticky    { position: sticky; }

.top-0    { top: 0; }
.right-0  { right: 0; }
.bottom-0 { bottom: 0; }
.left-0   { left: 0; }

.top-50    { top: 50%; }
.left-50   { left: 50%; }
.right-50  { right: 50%; }
.bottom-50 { bottom: 50%; }

.top-100    { top: 100%; }
.left-100   { left: 100%; }
.right-100  { right: 100%; }
.bottom-100 { bottom: 100%; }

.center-abs {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.z--1   { z-index: -1; }
.z-0    { z-index: 0; }
.z-1    { z-index: 1; }
.z-10   { z-index: 10; }
.z-50   { z-index: 50; }
.z-60   { z-index: 60; }
.z-70   { z-index: 70; }
.z-80   { z-index: 80; }
.z-90   { z-index: 90; }
.z-98   { z-index: 98; }
.z-99   { z-index: 99; }
.z-100  { z-index: 100; }
.z-1025   { z-index: 1025; }
.z-auto { z-index: auto; }

.inset-0     { inset: 0; }
.inset-auto  { inset: auto; }

.inset-x-0   { left: 0; right: 0; }
.inset-y-0   { top: 0; bottom: 0; }

.inset-x-auto { left: auto; right: auto; }
.inset-y-auto { top: auto; bottom: auto; }

.pointer-auto     { pointer-events: auto; }
.pointer-none     { pointer-events: none; }

.trans-all       { transition: all 0.3s ease; }
.trans-color     { transition: color 0.3s ease; }
.trans-bg        { transition: background-color 0.3s ease; }
.trans-opacity   { transition: opacity 0.3s ease; }
.trans-transform { transition: transform 0.3s ease; }
.trans-border    { transition: border 0.3s ease; }
.trans-shadow    { transition: box-shadow 0.3s ease; }

.duration-100  { transition-duration: 0.1s; }
.duration-200  { transition-duration: 0.2s; }
.duration-300  { transition-duration: 0.3s; }
.duration-500  { transition-duration: 0.5s; }
.duration-700  { transition-duration: 0.7s; }
.duration-1000 { transition-duration: 1s; }

.ease        { transition-timing-function: ease; }
.linear      { transition-timing-function: linear; }
.ease-in     { transition-timing-function: ease-in; }
.ease-out    { transition-timing-function: ease-out; }
.ease-in-out { transition-timing-function: ease-in-out; }

.scale-0    { transform: scale(0); }
.scale-50   { transform: scale(0.5); }
.scale-75   { transform: scale(0.75); }
.scale-90   { transform: scale(0.9); }
.scale-100  { transform: scale(1); }
.scale-110  { transform: scale(1.1); }
.scale-125  { transform: scale(1.25); }
.scale-150  { transform: scale(1.5); }

.rotate-0    { transform: rotate(0deg); }
.rotate-45   { transform: rotate(45deg); }
.rotate-90   { transform: rotate(90deg); }
.rotate-180  { transform: rotate(180deg); }
.rotate-360  { transform: rotate(360deg); }

.translate-x-0   { transform: translateX(0); }
.translate-x-50  { transform: translateX(50px); }
.translate-x--50 { transform: translateX(-50px); }

.translate-y-0   { transform: translateY(0); }
.translate-y-50  { transform: translateY(50px); }
.translate-y--50 { transform: translateY(-50px); }

.skew-x-0   { transform: skewX(0deg); }
.skew-x-10  { transform: skewX(10deg); }
.skew-x-20  { transform: skewX(20deg); }

.skew-y-0   { transform: skewY(0deg); }
.skew-y-10  { transform: skewY(10deg); }
.skew-y-20  { transform: skewY(20deg); }

.scale-rotate {
  transform: scale(1.1) rotate(10deg);
}

.hover-scale-105:hover {
  transform: scale(1.05);
  transition: transform 0.3s ease;
}

.hover-scale-110:hover {
  transform: scale(1.1);
  transition: transform 0.3s ease;
}

.hover-scale-125:hover {
  transform: scale(1.25);
  transition: transform 0.3s ease;
}

.hover-rotate-5:hover {
  transform: rotate(5deg);
  transition: transform 0.3s ease;
}

.hover-rotate-10:hover {
  transform: rotate(10deg);
  transition: transform 0.3s ease;
}

.hover-translate-up:hover {
  transform: translateY(-5px);
  transition: transform 0.3s ease;
}

.hover-translate-down:hover {
  transform: translateY(5px);
  transition: transform 0.3s ease;
}

.hover-translate-left:hover {
  transform: translateX(-5px);
  transition: transform 0.3s ease;
}

.hover-translate-right:hover {
  transform: translateX(5px);
  transition: transform 0.3s ease;
}

.hover-scale-rotate:hover {
  transform: scale(1.05) rotate(2deg);
  transition: transform 0.3s ease-in-out;
}
/* العنصر المخفي الذي يظهر */
.slide-box {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  transform: scale(var(--slide-scale)) translate(var(--slide-x-offset), var(--slide-y-offset));
  transition: var(--slide-transition);
  background: var(--slide-bg);
  box-shadow: var(--slide-shadow);
  border-radius: var(--slide-radius);
  padding: var(--slide-padding);
  min-width: max-content;
  z-index: var(--slide-z);
}

.slide-box-NONBG {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  transform: scale(var(--slide-scale)) translate(var(--slide-x-offset), var(--slide-y-offset));
  transition: var(--slide-transition);
  z-index: var(--slide-z);
}

/* عند تمرير الماوس على العنصر الأب يظهر العنصر المخفي */
.hover-wrapper:hover .slide-box {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1) translate(0, 0);
}

.hover-wrapper:hover .slide-box-NONBG {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1) translate(0, 0);
}


/* من الأعلى */
.slide-from-top {
  bottom: 100%;
  --y-offset: calc(-1 * var(--slide-offset));
}

/* من الأسفل */
.slide-from-bottom {
  top: 100%;
  --y-offset: var(--slide-offset);
}

/* من اليسار */
.slide-from-left {
  right: 100%;
  top: auto;
  --x-offset: calc(-1 * var(--slide-offset));
}

/* من اليمين */
.slide-from-right {
  left: 100%;
  top: auto;
  --x-offset: var(--slide-offset);
}


/* من اليسار عند اتجاه الصفحة من اليمين (LTR) */
html[dir="ltr"] .slide-from-left {
  right: 100%;
  top: auto;
  --slide-x-offset: calc(-1 * var(--slide-offset));
}

/* من اليمين عند اتجاه الصفحة من اليسار (RTL) */
html[dir="rtl"] .slide-from-right {
  left: 100%;
  top: auto;
  --slide-x-offset: calc(1 * var(--slide-offset));
}

.quote-container {
  display: flex;
  align-items: center; /* توسيط عمودي */
  flex-wrap: wrap;
}

.paragraph-quotes-count {
  white-space: nowrap;
  flex-shrink: 0;
  height: 30px;
  line-height: 30px;
}

.quote-replies-slider {
  position: relative;
  height: 30px;
  overflow: hidden;
  flex-grow: 1;
  min-width: 200px;
  max-width: 100%;
}

.quote-replies-inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  transition: transform 0.5s ease-in-out;
}

.quote-reply-item {
  height: 30px;
  display: flex;
  align-items: center;
  padding: 0 5px;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


.quote-feed-item {
    display: block;
    width: 100%;
    margin-bottom: 30px;
}


.quote-reply-form-registered {
    position: sticky;
    top: 0;
}

.quote-reply-textarea {
    resize: none;
    max-height: 45px;
    min-height: 45px;
    padding: 0 20px;
    line-height: 45px;
    border-radius: 8px;
}

.ico-rotate-180{
    filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=1);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
    display: inline-block;
}

.highlight-comment {
    background-color: #f7f8ff;
    transition: background-color 0.5s ease;
}

.cursor-pointer{
    cursor: pointer;
}
.quotes-actions{
    height:40px;
    position: relative;
  overflow: hidden;
}
  .quotes-replies-slider {
  position: relative;
  overflow: hidden;
  margin:0 10px;
  width:80%;
}

.quotes-replies-inner {
  display: flex;
  flex-direction: column;
  transition: transform 0.5s ease-in-out;
  will-change: transform;
}

.quotes-reply-item {
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notification-list {
    list-style: none;
    padding: 0;
}
.notification-list li {
    border-bottom: 1px solid #ddd;
    padding: 10px;
}
.notification-list li.unread {
    background-color: #f9f9f9;
    font-weight: bold;
}
.notification-list li.read {
    color: #777;
}

.notification-count{
    position: absolute;
    background: rgb(52, 52, 52);
    color: rgb(255, 255, 255);
    border-radius: 100%;
    margin-left: -10px;
    margin-top: -5px;
    height: 25px;
    width: 25px;
    text-align: center;
    line-height: 15px;
    padding: 5px;
    font-size: 12px;
    display: inline-block;
    }
    
    .notif-avatar{
    width: 40px;
    height: 40px;
    border-radius: 100%;
    }
    
    
    .horizontalSlider .slick-list {
    display:flex;
}

.horizontalSlider .slick-track{
    display:flex;
}


/* ضع المسافات على slick-list (الطريقة الآمنة) */
.horizontalSlider .slick-list.pad-right {
  padding-right: 40px;
  box-sizing: content-box;
}
.horizontalSlider .slick-list.pad-left {
  padding-left: 40px;
  box-sizing: content-box;
}
/* لو أردت تحكم منفصل بالـ RTL: */
.rtl .horizontalSlider .slick-list.pad-right { padding-left: 40px; padding-right: 0; }
.rtl .horizontalSlider .slick-list.pad-left  { padding-right: 40px; padding-left: 0; }


@media (max-width: 767px) {
  .NARROWHhgJG {
    max-width: 100% !important;
    width: 100% !important;
  }
 
  
}