*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body{
    direction: rtl;
}

body{
    background-color: #818385;
    font-family: 'Open Sans', sans-serif;
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    align-items: center;
    height: 100vh;
    width: 100vw;
}

#flex{
    display: flex;
    flex-wrap: wrap;
    font-size: 16px;
}

#d-50{
    flex-basis: 50%;
}

.red{
    color: #c00307;
}

.bg-alert {
    background-color: #c00307;
    position: sticky;
    top: 0;
    z-index: 999;
}

.img-fluid{
    width: 100%;
}

.col-lg-2{
    height: 80vh;
 overflow: auto;
}

.d-flex{
    width: 100%;
    justify-content: center;
    align-items: center;
}

.card{
    width: 100%;
    border-color: #c00307;
}


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

/* Track */
::-webkit-scrollbar-track {
  background: #c00307;
}
/*  */
Handle
::-webkit-scrollbar-thumb {
  background: rgb(0, 0, 0);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: rgb(2, 2, 2);
}

.icon1,.icon2,.icon3,.icon4,.icon5{
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    width: 35px;
    height: 35px;
    background-color: #c00307;
    color: #ffff;
    border-radius: 50%;
    cursor: pointer;
    position: absolute;
    top: 90%;
    transform: translateX(-7rem);

}

.none{
    display: none;
}


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

.img-fluid {
    filter: hue-rotate(45deg);
}

.k1,
.k2,
.k3,
.k4,
.k5{
    flex-wrap: wrap;
    padding: .4rem !important;
}