code[class*="language-"],
        pre[class*="language-"] {
            color: #1C1C04;
            background: none;
            text-shadow: 0 1px rgba(0, 0, 0, 0.3);
            font-family: Monaco, Consolas, 'Andale Mono', 'Ubuntu Mono', monospace;
            text-align: left;
            white-space: pre;
            word-spacing: normal;
            word-break: normal;
            word-wrap: normal;
            line-height: 1.5;
            -moz-tab-size: 4;
            -o-tab-size: 4;
            tab-size: 4;
            -webkit-hyphens: none;
            -moz-hyphens: none;
            -ms-hyphens: none;
            hyphens: none;
        }

        /* Code blocks */
        pre[class*="language-"] {
            padding: 1em;
            margin: .5em 0;
            overflow: auto;
            border-radius: 0.3em;
            background: #f56d111f; /* خلفية الكود */
        }

        /* Inline code */
        :not(pre) > code[class*="language-"] {
            padding: .1em;
            border-radius: .3em;
            white-space: normal;
        }

        .token.comment {
            color: #5c98cd; /* لون التعليقات */
        }

        .token.punctuation {
            color: #86ff01; /* لون علامات الترقيم */
        }

        .token.property {
            color: #202df4; /* لون الخصائص */
        }

        .token.tag {
            color: #f0092f; /* لون العلامات */
        }

        .token.constant {
            color: #F0A500; /* لون الثوابت */
        }

        .token.number {
            color: #BC94F9; /* لون الأرقام */
        }

        .token.selector {
            color: #d80cf8; /* لون المحددات */
        }

        .token.attr-name {
            color: #202df4; /* لون أسماء الصفات */
        }

        .token.string {
            color: #6EB26E; /* لون السلاسل النصية */
        }

        .token.builtin {
            color: #D3C7A6; /* لون العناصر المدمجة */
        }

        .token.operator {
            color: #FFCC00; /* لون العمليات */
        }

        .token.keyword {
            color: #6EB26E; /* لون الكلمات الرئيسية */
        }

        .token.function {
            color: #66D8EF; /* لون الدوال */
        }

        .token.class-name {
            color: #FF6F61; /* لون أسماء الفئات */
        }

        .token.regex {
            color: #D3C7A6; /* لون التعبيرات العادية */
        }

        .token.important {
            color: #F05E5D; /* لون الأهمية */
        }

        .token.bold {
            font-weight: bold;
        }

        .token.italic {
            font-style: italic;
        }
      .token.attr-value {
    color: #d80cdb;
}


   .code-box {
            border: 1px solid #ccc;
            padding: 10px;
            margin-bottom: 20px;
            position: relative;
            background-color: #f4f4f4;
        }
        .button-group {
            position: absolute;
            right: 10px;
            top: 10px;
            display: flex;
            gap: 5px;
        }
         .output 
        {
        border: 1px solid #ddd;
    padding: 10px;
    margin-top: 10px;
    background-color: #f9f9f9;
    display: none;
    direction: ltr;

}
        .copy-icon {
            cursor: pointer;
            font-size: 16px;
            transition: color 0.3s;
        }
        .copied {
            color: green;
        }
        pre {
            margin: 0;
            padding: 10px;
            overflow-x: auto;
            white-space: pre-wrap;
        }
        .tag {
            color: #d73a49;
        }
        .noate {
    border-right: 4px solid #ff9800;
    background-color: #ffebcc;
    padding: 10px;
    margin: 20px 0;
    display: flex;
    align-items: flex-start;
    direction: ltr;
    direction: rtl;
    align-content: space-around;
    flex-wrap: nowrap;
}
          .note-icon {
    margin-right: -4px;
    font-size: 17px;
    direction: ltr;
}
      
      
       .button-group {
    position: relative;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-start; /* محاذاة العناصر إلى اليسار */
}

.button-group button {
    padding: -30px 10px;
    background-color: #4CAF50; /* لون الخلفية */
    color: white; /* لون النص */
    border: none; /* بدون إطار */
    border-radius: 5px; /* حواف مستديرة */
    cursor: pointer;
    font-size: 14px;
    position: relative;
    z-index: 1;
    transition: background-color 0.3s ease; /* انتقال سلس عند التحويم */
    background-clip: padding-box;
  margin-right: 18px;
}

.button-group button::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -8px;
    right: -4px;
    bottom: -2px;
    border-radius: 12px;
    border: 3px solid transparent;
    background: linear-gradient(208deg, red, orange, yellow, green, blue, purple);
    background-size: 300% 300%;
    animation: drawBorder 5s linear infinite;
    z-index: -1;
      box-shadow: inset 14px 20px 17px 13px rgb(255 165 0);
}

.button-group button:hover {
    background-color: #3e8e41; /* لون عند التحويم */
}

@keyframes drawBorder {
    0% {
        background-position: 0% 50%; /* بداية الألوان */
    }
    100% {
        background-position: 100% 50%; /* نهاية الألوان */
    }
}

.copy-icon {
    cursor: pointer;
    font-size: 24px;
    transition: color 0.3s ease;
    color: #555;
}

.copy-icon:hover {
    color: green; /* لون عند التحويم */
}  
      
             .idea {
            background-color: #e0ffe0; /* لون خلفية أخضر فاتح */
            border-right: 4px solid #4caf50; /* حدود خضراء */
            padding: 10px;
            margin: 20px 0;
            
        }
     .note {
            background-color: #ffebcd; /* لون خلفية برتقالي فاتح */
            border-right: 4px solid #ffa500; /* حدود برتقالية */
            padding: 10px;
            margin: 20px 0;
       
        }
     
     input{border: 2px solid #111010;
          border-radius: 10px;
     }
     
     
     .widget iframe {
    border: 2px solid #0e0d0d;
}
     
     .btn-link {
    display: inline-block;
    padding: 0px 3px;
    font-size: 13px;
    color: #fff;
    background-color: #ff5722;
    text-decoration: none;
    border-radius: 30px;
    position: relative;
    border: 4px solid transparent; /* حد شفاف */
    z-index: 1;
  }

  .btn-link:before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border-radius: 30px;
    border: 4px solid transparent;
    background: linear-gradient(45deg, #ff5722, #ffeb3b, #00bcd4, #673ab7, #4caf50, #f44336, #3f51b5, #e91e63);
    background-size: 400% 400%;
    z-index: -1;
    animation: rotateColors 3s linear infinite;
	box-shadow: inset 14px 20px 17px 13px rgb(255 165 0);
  }

  @keyframes rotateColors {
    0% {
      background-position: 0% 50%;
    }
    100% {
      background-position: 100% 50%;
    }
  }

  .btn-link:hover {
    background-color: #ffeb3b;
    color: #000;
  }  
     
   

   code-a {
    white-space: normal !important;
    background-color: #e6ff0047;
    padding: 0 7px;
    color: #000;
    border-radius: 4px;
    border: solid 1px #111426;
    direction: ltr;
    text-align: left;
    display: inline-block;
    font-size: 14px;
    line-height: 22px;
    vertical-align: baseline;
    font-weight: 700;
    overflow-wrap: break-word;
}
   
   
   .hljs {
    color: #ff1100;
}
   
   
  .hljs .addition, .hljs .attribute, .hljs .meta .string, .hljs .regexp, .hljs .string {
    color: #0729f9;
} 
   
   
   
   .asd-asd .alert-info {
    border-right-color: #ff7a18;
    background: #c4ff180d;
}
   
   
   
   .alert-info, .alert-danger, .alert-idea {
    border-right: 4px solid;
    position: relative;
    padding: 15px 36px 15px 10px;
    min-height: 52px;
    line-height: 32px;
    margin-bottom: 12px;
    font-size: 14px;
}
   
   
   .alert-danger {
    border-right-color: #fc8181;
    background: #fff5f5;
}
   
   
   
   
   .code-a-boxa1 {
    border: solid 1px #111426;
    border-radius: 6px;
    margin-bottom: 15px;
    background-color: #f5940808;
    text-align: left;
    direction: ltr;
    padding: 8px;
    line-height: 22px;
    font-size: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    color: #000;
    font-weight: 700;
    min-height: 46px;
    white-space: nowrap;
}

.red {
    color: red !important;
}
   
.blue {
    color: #00f !important;
}
   
  .alert-idea {
    border-right-color: #00ff5a;
    background: #45c98d12;
} 
   .post-body p {
    margin-bottom: 10px;
}