*{
  box-sizing: border-box;
  font-family: sans-serif;
}
.body{
  height: 100vh;
  margin: 0;
  overflow: hidden;
}
.backgroundImg{
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: fixed;
  left: 0px;
  top: 0px;
  height: 100%;
  width: 100%;
  /*filter: blur(20px);
  -webkit-filter: blur(20px);
  transform: scale(1.1);*/
}
.backgroundImg.bg1{
  background-image: url("../img/backgroundlight-1.jpg");
}
.backgroundImg.bg2{
  background-image: url("../img/backgroundlight-2.jpg");
}

.buttonForm{
  color: white;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  line-height: 25px;
  border-radius: 4px;
  border: none;
  background-color: dodgerblue;
  transition: 0.3s;
  cursor:pointer;
}
.buttonForm:hover {
  background-color: #0a437a;
}
.buttonForm:active {
  background-color: #78bcff;
}
.buttonForm:disabled {
  background-color: #6e8399;
  cursor: not-allowed;
}

.info{
  display: none;
  margin-top: 20px;
  font-size: 20px;
  background-color: #ffb5b5;
  padding: 10px;
}
.a-style {
 outline: none;
 text-decoration: none;
 padding: 1px 1px 0;
}

.a-style:link {
 color: hsl(200 98% 16%);
}

.a-style:visited {
 color: hsl(200 69% 28%);
}

.a-style:focus {
 border-bottom: 1px solid;
 background: hsl(200 58% 75%);
}

.a-style:hover {
 border-bottom: 1px solid;
 background: hsl(200 98% 83%);
}

.a-style:active {
 background: hsl(200 98% 16%);
 color: hsl(200 98% 83%);
}


.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

.tab button:hover {
  background-color: #ddd;
}

.tab button.active {
  background-color: #ccc;
}

.tabcontent {
  display: none;
  padding: 6px 12px;
  -webkit-animation: fadeEffect 1s;
  animation: fadeEffect 1s;
}

@-webkit-keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}

.content-page{
  margin: 20px;
}
.box-img{
  position: relative;
  height: 200px;
  width: 200px;
  cursor: pointer;
}
.box-img img{
  object-fit: cover;
  height: 200px;
  width: 200px;
}
.box-img .modif{
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
  background-color: #000000c4;
  text-align: center;
  color: white;
  padding: 5px;
  display: none;
  -webkit-animation: fadeEffect 1s;
  animation: fadeEffect 1s;
}
.box-img:hover .modif{
  display: block;
}
.box-img .modif a{
  color: white;
  text-decoration: none;
}

.friend-box{
  background-color: #6e8399;
  margin: 5px;
  padding: 10px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 500px;
  text-decoration: inherit;
  color: inherit;
}
.friend-box a {
  text-decoration: inherit;
  color: inherit;
}
.friend-box img{
  object-fit: cover;
  height: 40px;
  width: 40px;
  margin-right: 10px;
}
.friend-box .friend-name{
  font-weight: bold;
}
.friend-box button{
  border:none;
  float: right;
  background-color: #ff8d8d;
  cursor: pointer;
  height: calc(100% + 20px);
  margin-right: -10px;
  transition: 0.3s;
}
.friend-box button:hover{
  background-color: #ff4545;
}
.friend-box .friend-div{
  display: flex;
  align-items: center;
}
.modal{
  position: fixed;
  top: 0px;
  width: 500px;
  background-color: white;
  padding: 10px;
  left: calc(50% - 500px / 2);
  box-shadow: 0px 00px 0px 0px transparent;
  border-radius: 0px 0px 20px 20px;
  transform: translateY(-300px);
  transition: 1.0s;
}
.open{
  box-shadow: 0px 20px 20px 0px #00000059;
  transform: translateY(0px);
}
.modal .box-choice{
  display: flex;
}
.modal > h1,h2{
  text-align: center;
}
.modal .box-choice > div{
  display: flex;
  justify-content: center;
  width: 100%;
  cursor: pointer;
  border-radius: 10px;
  margin: 5px;
}
.modal .box-choice > div:hover:not(.nohover){
  background-color: lightgrey;
}

#box-modal{
  display: none;
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0px;
  left: 0px;
  background-color: rgba(0, 0, 0, 0.329);
  cursor: pointer;
}

.preview ol{
  padding-left: 0;
}
.preview li{
  background: #eee;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  list-style-type: none;
  border: 1px solid black; 
}
.preview img{
  height: 64px;
  order: 1;
}
.preview p{
  line-height: 32px;
  padding-left: 10px;
}
.inputFileLabel {
  background-color: #7F9CCB;
  padding: 5px 10px;
  border-radius: 5px;
  border: 1px ridge black;
  font-size: 0.8rem;
  height: auto;
  cursor: pointer;
}

#tbList {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#tbList li .b{
  border: 1px solid #ddd;
  margin-top: -1px; /* Prevent double borders */
  background-color: #f6f6f6;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  color: black;
  display: block;
  display: flex;
  align-items: center;
}

#tbList li .b:hover {
  background-color: #eee;
}
#tbList li .img-box img {
  object-fit: cover;
  height: 80px;
  border-radius: 5px;
}
#tbList li .b .a{
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: inherit;
}
#tbList li{
  
  width: 100%;
}
#tbList li .img-box{
  position: relative;
  margin-right: 20px;
}
#tbList li .img-box span{
  position: absolute;
  top: -10px;
  right: -10px;
  padding: 5px 10px;
  border-radius: 50%;
  background: red;
  color: white;
}
.pop-user{
  position: absolute;
  right: 80px;
  padding: 3px 0px 3px 3px;
  border: 3px #d7d7d7 solid;
  border-radius: 20px;
  color: white;
  background-color: #d7d7d7;
  display: flex;
}
.pop-modif{
  position: absolute;
  right: 60px;
  padding: 5px 10px 5px 10px;
  border: 3px rgb(0 128 128) solid;
  border-radius: 20px;
  color: white;
  background-color: rgb(0 128 128);
  transition: 0.5s;
  cursor: pointer;
}
.pop-modif:hover{
  border: 3px rgb(0, 90, 90) solid;
  background-color: rgb(0, 90, 90);
  color: rgb(217 217 217);
}

:root {
  --color-light: #DDDDDD;
  --color-dark: #212121;
  --color-signal: #9b6400;
  --color-background: var(--color-light);
  --color-text: var(--color-dark);
  --color-accent: var(--color-signal);
  --size-bezel: 0.5rem;
  --size-radius: 4px;
}

.input {
  position: relative;
}

.input__label {
  position: absolute;
  left: 0;
  top: 0;
  padding: calc(var(--size-bezel) * 0.75) calc(var(--size-bezel) * .5);
  margin: calc(var(--size-bezel) * 0.75 + 3px) calc(var(--size-bezel) * .5);
  background: pink;
  white-space: nowrap;
  transform: translate(0, 0);
  transform-origin: 0 0;
  background: var(--color-background);
  transition: transform 120ms ease-in;
  font-weight: bold;
  line-height: 1.2;
}

.input__field {
  box-sizing: border-box;
  display: block;
  width: 100%;
  border: 3px solid currentColor!important;
  padding: calc(var(--size-bezel) * 1.5) var(--size-bezel);
  color: currentColor;
  background: transparent;
  border-radius: var(--size-radius);
  font-size: large;
  outline: none;
}
.input__field:focus-visible{
  outline-offset: 0px;
  border: 3px solid currentColor !important;
}

.input__field:focus:focus-visible,
.input__field:not(:placeholder-shown):focus-visible {
  outline-offset: 0px;
  border: 3px solid var(--color-accent) !important;
}

.input__field:focus,
.input__field:not(:placeholder-shown) {
  border: 3px solid var(--color-accent) !important;
}

.input__field:focus+.input__label,
.input__field:not(:placeholder-shown)+.input__label {
  transform: translate(0.25rem, -65%) scale(0.8);
  color: var(--color-accent);
}

.input__field:-webkit-autofill,
.input__field:-webkit-autofill:hover, 
.input__field:-webkit-autofill:focus, 
.input__field:-webkit-autofill:active{
    box-shadow: 0 0 0 30px #DDDDDD inset !important;
}



















/********************************LOGIN  // SIGNUP********************************************/



.lds-roller {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-roller div {
  animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  transform-origin: 40px 40px;
}
.lds-roller div:after {
  content: " ";
  display: block;
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  margin: -4px 0 0 -4px;
}
.lds-roller div:nth-child(1) {
  animation-delay: -0.036s;
}
.lds-roller div:nth-child(1):after {
  top: 63px;
  left: 63px;
}
.lds-roller div:nth-child(2) {
  animation-delay: -0.072s;
}
.lds-roller div:nth-child(2):after {
  top: 68px;
  left: 56px;
}
.lds-roller div:nth-child(3) {
  animation-delay: -0.108s;
}
.lds-roller div:nth-child(3):after {
  top: 71px;
  left: 48px;
}
.lds-roller div:nth-child(4) {
  animation-delay: -0.144s;
}
.lds-roller div:nth-child(4):after {
  top: 72px;
  left: 40px;
}
.lds-roller div:nth-child(5) {
  animation-delay: -0.18s;
}
.lds-roller div:nth-child(5):after {
  top: 71px;
  left: 32px;
}
.lds-roller div:nth-child(6) {
  animation-delay: -0.216s;
}
.lds-roller div:nth-child(6):after {
  top: 68px;
  left: 24px;
}
.lds-roller div:nth-child(7) {
  animation-delay: -0.252s;
}
.lds-roller div:nth-child(7):after {
  top: 63px;
  left: 17px;
}
.lds-roller div:nth-child(8) {
  animation-delay: -0.288s;
}
.lds-roller div:nth-child(8):after {
  top: 56px;
  left: 12px;
}
@keyframes lds-roller {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


/***************************************************************************************************/