* {
  box-sizing: border-box;
}
/* width */
::-webkit-scrollbar {
  width: 12px;

}

/* Track */
::-webkit-scrollbar-track {
  background: transparent;

}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #656565;
    border-radius: 4px 6px 6px 4px;
    border-right: 4px solid #3e4046;

}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}
body{
  background-color: #3e4046;

}
.kat-select{
  display: none;
}
.content{
  width: 80%;
  height: max-content;
  min-height: 90vh;
  color: whitesmoke;
  position: relative;
  border: 1px solid gray;
  font-family: Roboto;
  padding: 30px;
  margin: auto;
  overflow: hidden;
  margin-top: 40px;
}
.kursanci .btn{
  display: inline-block;
  width: 73px;
  padding: 0px 29px;
}
.okno-pytania{
  max-width: calc(870px);
    position: relative;
    margin: auto;
    display: flex;
    flex-direction: column;
    color: black;
    background: white;
    padding: 35px;
    border-radius: 31px;
    border: 1px solid black;
}
.pytanie{
  font-size: 1.5rem;
}
.obrazek{
  display: flex;
    justify-content: center;
}
.odpowiedzi {
  margin-top: 37px;
  border: 1px solid #cacaca;
  border-radius: 11px;
  overflow: hidden;
}
.okno-pytania .odp {
  line-height: 35px;
  padding: 6px 22px;
  border-top: 1px solid #cacaca;
  background-color: #fff;
  cursor:pointer;
  transition: background-color 200ms;
}
.okno-pytania .odp:hover{
  background-color: #b3b3b3;
}
div#odpa {
  border: none;
}
.disabled{

  pointer-events: none;
  background: darkgray!important;
  color: gray!important;
  border:1px solid rgb(51, 51, 51);
}
.odp {
  line-height: 35px;
}
.btn{
  padding: 5px 29px;
  border: 1px solid white;
  color: whitesmoke;
  box-shadow: inset 0 0 8px 0 black;
  outline: none;
  cursor:pointer;
}
.btn-primary{
  background: #0008ff;
}
.btn-green {
  background-color: green;
}
.btn-danger{
  background: #ff0000;
}
.btn:hover{
  box-shadow: inset 0 0 8px 0 rgb(255, 255, 255);
}
.btn-gray{

  background-color: #1d2124;
}
.czat{
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  margin: 8px;
  width: 260px;
  height: 420px;
  display: flex;
  flex-direction: column;
  transform: translate(106%, 0);
  transition:transform 300ms;
}
.tytul-kat{
  position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
}
.usersList,.lista-pytan {
  position: absolute;
  bottom: 428px;
  right: 0;
  margin: 8px;
  width: 260px;
  height: 340px;
  display: flex;
  flex-direction: column;
  transform: translate(106%, 0);
  transition: transform 300ms;
  border: 1px solid gray;

}
.kursanci {
  width: 100%;
  height: calc(100% + 2px);
  overflow: auto;
  position: absolute;
  border: 1px solid gray;
  top: -1px;
  left: -100%;

  transform: scaleX(0);
  transition: transform 200ms;
}
.kursanci.active{
  transform: scaleX(1);
}
.lista-pytan{
  bottom: 0px;
  height:calc(100% - 50px);
  left:0px;
  transform: translate(-106%, 0);
  overflow: auto;
}
.lista-pytan li.active{
  color:lightgreen
}
.lista-pytan li:is(:hover,.bold){
  cursor: pointer;
  font-weight: bold;
}
.usersList ul, .lista-pytan>ul{
  list-style: none;
  width: 100%;
  margin: 0;
  height: 100%;
  padding: 8px;
}
.usersList ul>li:nth-child(1),.lista-pytan ul>li:nth-child(1){
  text-align: center;
  border-bottom: 1px solid gray;
  margin-bottom: 10px;
}
.usersList ul>li, .lista-pytan ul>li{
  line-height: 29px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.usersList ul>li>.odp{
  float: right;
  border: 1px solid gray;
  padding: 3px;
  height: 21px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 4px;
  width: 19px;
}
.usersList ul>li:nth-child(1)>.odp{
  width: 33px;
  font-size: 10px;
}
.usersList, .lista-pytan, .czat, .kursanci{
  background: #3e4046d2;
}
.addUser{
  transform: translate(-106%, 0);
  transition:transform 300ms;
  margin-top: 28px;
}
.add-user-btn {
  position: absolute;
  bottom: 8px;
  right: 14px;
  background: #00a200;
  padding: 7px;
  border-radius: 50%;
  width: 37px;
  height: 37px;
  cursor: pointer;
  box-shadow: 1px 0px 6px 0 black;
}
.add-user-btn>img{
  width: 25px;
}
.add-user-btn:hover{
  background:#00c400;
}


.toast {
    position: absolute;
    color: #fff;
    width: fit-content;
    padding: 4px 17px;
    top: 19px;
    border: 1px solid black;
    font-size: 22px;
    background: rgba(0,0,0,0.7);
    margin: auto;
    transform: translate(0,-62px);
    transition: transform 0.3s;
    border-radius: 18px;
    left: 50%;
}
.show{
  display: block;
  transform: translate(0, 0)!important;
}
.czat .okno{
  border: 1px solid gray;
  width: 100%;
  height: 100%;
  padding-bottom: 42px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow-y: hidden;
}
.czat .input{
  position: absolute;
  width: 98%;
  padding-top:5px;
  bottom: 5px;
  left: 4px;
  border-top:1px solid rgb(92, 92, 92);
  background: #3e4046;
}
.czat .input>input,.content input{
  height: 23px;
  outline: none;
  background: transparent;
  border: none;
  margin-right:4px;
  border-bottom: 1px solid darkgray;
  color: whitesmoke; height: 23px;
}
.chatMess {
  margin-bottom: 9px;
  display: inline-block;
  padding: 4px 8px;
  background: gray;
  margin-top: -1px;
  border-radius: 14px;
  font-size: 15px;
}
.d-none{
  display: none;
}

.chatMess.my{
  background: rgb(0, 99, 8);
}
.chatName {
  font-size: small;
}
.mess {
  padding: 0 6px 0 6px;
  transform: translateY(0);
}
.mess.left {
  text-align: left;
}
.mess.right {
  text-align: right;
}
.mb-2{
  margin-top: -5px;
}
.loading{
  border: 1px solid gray;
  position: relative;
  float: right;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border-bottom: none;
  animation: loading 1s linear infinite;
}

#kursanci [kursant]{
  overflow: visible;
  position: relative;
  margin-bottom: 19px;
}
#kursanci [kursant] img{
  float: right;
    margin-top: 8px;
    cursor: pointer;
    transform: scale(1);
    transition: transform 200ms;
}
#kursanci [kursant] img:hover{
  transform: scale(1.25);
}
#kursanci [kursant] sub{

    position: absolute;
    left: 0px;
    bottom: -26px;
    font-size: 12px;

}
.edited-icon{
  position: absolute;
    right: 10px;
    top: 10px;
    background: yellow;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    box-shadow: 0 0 4px 1px black;
    padding: 3px;
    cursor: pointer;
}
.edited-icon:hover{
  background: rgb(255, 255, 116);
}
.edited-icon>img{
  width:100%;
}

#sendBtn,#sendOdp {
  width: fit-content;
  margin: auto;
  margin-top: 32px;
}
.narzedziaSVG {
  visibility: hidden;
  display: flex;
  margin: 15px 0px;
  font-weight: bold;
}
.narzedziaSVG>div:is(.linie,.strzalka) {
  width: 25px;
  height: 25px;
  border: 1px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0px 6px;
}
.narzedziaSVG>div:is(.linie,.strzalka):hover {
  background: #e0e0e0;
  cursor: pointer;
  box-shadow: 0 0 3px 0 black;
}
@keyframes loading{
  0%{
      transform: rotate(0deg);
  }
  100%{
      transform: rotate(360deg);
  }
}
.t-red{
  color:red;
}
.t-green{
  color:green;
}
.t-gray{
  color:#f8f9fa;
}