::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #999;
}

::-webkit-scrollbar-thumb:hover {
    background: #777;
}


:root {
    /* color for default theme */
    --blue: #2b76e9;
    --grey: #282c3a;
    --lightGrey: #444652;
    --darkGrey: #1c1e29;
    --white: #fafafa;
    /* color for amoled theme */
    --black: #010101;
    --black-grey: #262626;
    --black-grey2: #363636;
    --black-grey3: #16171b;
    --black-grey4: #232531;
    --black-grey5: #23262f;
    --middle-grey: #656660;
    --dark-text-mute: #808080;
    /* color for public use */
    --border-github: #d0d7de;
    --very-low-blue: #E5E4FF;
    --very-low-blue2: #e5f0f9;
    --very-low-blue3: #f4f7ff;
    --yellow: #FFD500;
    --green: #6fcc61;
    --green2: #42b78b;
    --green3: #009B77;
    --dark-green: #18312b;
    --light-blue: #2596be;
    --blue2: #0180f4;
    --blue3: #0478f7;
    --purple: #5942D4;
    --purple2: blueviolet;
    --purple3: #682bc7;
    --purple4: #9636e0;
    --rose: #F7CAC9;
    --pink: #ff2772;
    --red: #fe252f;
    --red-full: #BC243C;
    --navy: #060C21;
    /* optional size */
    --normalTxt: 15px;
    --headerOne: 28px;
    --headerTwo: 22px;
    --headerThree: 18px;
    /* top border radius size */
    --pill-radius: 9999px;
    --low-radius: 4px;
    --normall-radius: 10px;
    --middle-radius: 14px;
    --high-radius: 20px;
}

* {
    scrollbar-width: thin;
    scrollbar-color: #999 #f1f1f1;
    margin: 0;
    padding: 0;
    outline: 0;
    border: 0;
    text-decoration: none;
    list-style: none;
    font-family: "bootstrap-icons", "e18a60", "ec0ba1";
    /* word-spacing: -5px; */
    scroll-behavior: smooth;
    /* set border boxّ */
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    /* disable user drag */
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -ms-user-drag: none;
    /* disable user select */
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    /* set to all element transation */
    -webkit-transition: opacity 0.5s, background-color 0.2s, filter 0.2s, color 0.1s;
    -moz-transition: opacity 0.5s, background-color 0.2s, filter 0.2s, color 0.1s;
    -ms-transition: opacity 0.5s, background-color 0.2s, filter 0.2s, color 0.1s;
    -o-transition: opacity 0.5s, background-color 0.2s, filter 0.2s, color 0.1s;
    transition: opacity 0.5s, background-color 0.2s, filter 0.2s, color 0.1s;
}

.a6a6c6 {
    display: block;
    width: 100%;
    max-width: 1600px !important;
    /* padding-right: 20px;
    padding-left: 20px; */
    margin-right: auto;
    margin-left: auto;
}

.b7099f {
    -webkit-user-select: text !important;
    -khtml-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
}

.f04169 {
    margin: 10px 0;
    border-radius: var(--high-radius);
    background-color: #fff;
    border: 1px solid var(--border-github);
    box-shadow: 0 0 5px #ddd;
}

.pill {
    border-radius: var(--pill-radius);
    padding: 10px !important;
}

.pill:hover {
    background-color: #eee !important;
}


tr:nth-child(even) {
    background-color: #eee !important;
}

tr:hover {
    background-color: #ccc !important;
    color: #222;
    cursor: pointer;
}

.pill-btn {
    margin: 15px 0;
    padding: 8px 12px;
    border-radius: var(--pill-radius);
}

table {
    border: 1px solid var(--border-github) !important;

}

td {
    border-bottom: 1px solid var(--border-github);
}

.badge {
    display: inline-block;
    width: fit-content;
    border-radius: var(--normall-radius);
    padding: 7px 5px;
    margin: 2px;
    color: var(--white);
}

.badge i {
    margin: 10px;
}

.badge-warning {
    background-color: orange;
}

.badge-warning:hover {
    background-color: rgb(236, 158, 12);
}

.badge-danger {
    background-color: var(--red);
}

.badge-danger:hover {
    background-color: #ee232d;
}

.badge-primary {
    background-color: var(--blue);
}

.badge-primary:hover {
    background-color: #126bbe;
}

.badge-success {
    background-color: var(--green);
}

.badge-success:hover {
    background-color: limegreen;
}

.side-btn {
    width: 92%;
    font-size: 17px;
    margin: 5px auto;
    border-radius: var(--pill-radius);
    display: block;
}

.side-btn:hover {
    background-color: #eee;
}

.faedad {
    border-radius: var(--low-radius);
}

.fbf935 {
    width: 100%;
    height: 50px;
    margin: 10px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    border-top: 1px solid #ddd;
}

.f0fb5f input {
    height: 35px;
    border-radius: var(--pill-radius);
    width: 200px;
    outline: 0;
    border: 0;
    padding: 0 12px;
    background-color: #fff;
    border: 1px solid var(--border-github);
}

.c1099d {
    display: block;
    margin: 20px auto;
    width: 95%;
    background-color: #fff;
    border-radius: var(--high-radius);
    padding: 20px;
}

.b0cfc2 {
    width: 100%;
}

.ac089e {
    width: 100%;
    display: block;
    border: 1px solid var(--border-github);
    resize: none;
    height: 100px;
    margin: 15px 0;
    padding: 10px;
    background-color: #fafafa;
    border-radius: var(--normall-radius);
}

.b3a1cd {
    display: flex;
    align-items: center;
    gap: 10px;
}

.df3941 {
    width: 100%;
    display: block;
    border: 1px solid var(--border-github);
    resize: none;
    height: 40px;
    margin: 15px 0;
    padding: 10px;
    background-color: #fafafa;
    border-radius: var(--pill-radius);
}

@media only screen and (max-width: 490px) {
    .fbf935 {
        padding: 20px;
        height: 100px;
        align-items: center;
        flex-direction: column;
    }
}

.pointer {
    cursor: pointer !important;
}