/*
@media (min-width:320px)  {  smartphones, iPhone, portrait 480x320 phones }
@media (min-width:481px)  {  portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide.  }
@media (min-width:641px)  {  portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones }
@media (min-width:961px)  {  tablet, landscape iPad, lo-res laptops ands desktops  }
@media (min-width:1025px) {  big landscape tablets, laptops, and desktops  }
@media (min-width:1281px) {  hi-res laptops and desktops  }
*/

body {
  background-color: whitesmoke;
  font-family: sans-serif;
  font-size: 1rem;
  width: 99%;
  margin-left: 1%;
  margin-right: 1%;
  margin-top: 0px;
  user-select: none;
}

input:focus {
  outline: 3px solid #FFCC00;
  box-shadow: 0 0 10px #FFCC00;
  background-color: rgb(220, 232, 238) ;
}

.disabled{
  background-color:red!important;
}

.width100{
  width:100%!important;
}

.pointer1{
  cursor:pointer;
  padding-left: 1rem;
  padding-right: 1rem;
  font-size:3rem;
}
#headerContainer {
  background-color: rgb(224, 229, 233);
  position: sticky;
  top: 0rem;
  z-index: 997;
}


#mainContainer {
  height: fit-content;
  min-height: 20rem;
}


.mainContainerDiv {
  text-align: center;
  margin-bottom:6rem;
}


.headerMainTitleDiv {
  margin-top: 0rem;
  margin-bottom: 0.5rem;
  padding-top: 0.2rem;
  padding-bottom: 0rem;
  display: flex;
  flex-direction: row;
  width: auto;
  align-items: center;
  justify-content: right;
  gap: 1rem;
  row-gap: 2rem;
  column-gap: 2rem;
  padding-left: 2rem;
  padding-right: 2rem;
}


.titlePartDiv {
  margin-left: 1rem;
  margin-right: 1rem;
  /*
    float:left;
    */
}


.pointsMessageDiv {
  font-size: 1.7rem;
  direction: rtl;
  text-align: right;
  background-color: whitesmoke;
  padding-top: 0rem;

  display:flex; 
  flex-direction:row; 
  justify-content:right; 
  padding-right:0.5rem;
  height: 3.5rem;
  line-height:3.5rem
}

.pointsReportDiv{
  display:flex; 
  flex-direction: column;
  border-bottom:solid black 2px;
  border-right:solid black 2px;
  border-left:solid black 2px;
}

.pointReportInfoDiv{
  display: flex;
  flex-direction: column;
  width: 90%;
  margin-left: auto;
  margin-right: auto
}

.pointsTableTitleDiv{
  width:100%;
  text-align:right;
  font-size:2.5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.pointsTableDiv{
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.pointsTableHeaderDiv{
  display: flex;
  flex-direction: row;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  justify-items: center;
}

.pointsTableHeader{
  width:100%;
  text-align:right;
  font-size:2rem;
  padding-right:0.5rem;
}



.pointsTableTD{
  width:100%;
  text-align:right;
  font-size:2rem;
}


.tdBorderRight{
  border-right: solid black 5px ;
}


.tdBorderLeft{
  border-left: solid black 5px ;
}


.tdBorderBottom{
  border-bottom: solid black 5px ;
}


.tdBorderTop{
  border-top: solid black 5px ;
}

.tdInputOrigin{
  border: solid black 2px ;
  border-radius:20%;
  background-color:transparent;
  text-align:center;
}


#gameSelectionDiv,
#gameSelect {
  font-size: 1.5rem;
  font-weight: bold;
}



#selectionMainDiv {
  margin-top: 1rem;
  /*margin-bottom: 1rem; */
  /*width: 60%;
  margin-left: auto;
  margin-right: auto; */
}



#sodukuMainDiv {
  background-color: #b2c9eb;
  padding-top: 0.3rem;
  padding-bottom: 1rem;
  margin-bottom: 6rem;
}

#gameInputParamsDiv {
  margin-top: 0.5rem;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}


.inputTitle {
  float: right;
  width: 5rem;
  margin-left: 1rem;
  font-size: 1.5rem;
  text-align: right;
}


#tableContainer {
  margin-top: 1.5rem;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.sodukuTR {
  background-color: transparent; /* yellow; */
  height: 2rem;
}

.asClicked {
  border-style: inset;
  background-color: rgb(0, 47, 255);
  color:white;
}

.asNonClicked {
  border-style: outset;
  background-color: bisque;
}

.selectMode {
  margin-left: 2rem;
}



#statusMessageDiv {
  display: flex;
  width: 30rem;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.5rem;
  background-color: white;
  padding-top: 5px;
  padding-bottom: 5px;
  margin-top: 0.2rem;
}


#statusAutoSaveDiv {
  display: flex;
  width: 30rem;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.5rem;
  background-color: white;
  padding-top: 5px;
  padding-bottom: 5px;
  margin-top: 0.2rem;
}

#selectSpecificGameDiv {
  display: flex;
  justify-content: center;
  margin-right: 0rem;
  flex-direction: column;
  width: 100%
}

#newSodukuNameDiv {
  display: flex;
  width: 100%;
  justify-content: center;
  font-size: 1.5rem;
  margin-top: 1rem;
}



.headerTab:hover {
  background-color: rgb(155, 155, 235);
  color: white;
}

.headerLoginTab:hover {
  background-color: rgb(155, 155, 235);
  color: white;
}


.gameTypeAsClicked {
  border-style: inset;
  background-color: lightgray;
}

.gameTypeAsNonClicked {
  border-style: outset;
  background-color: lightblue;
}

.adminTypeAsNonClicked {
  border-style: outset;
  background-color: green;
}


.loginContainerBG {
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  z-index: 998;
  display: flex;
  position: fixed;
  top: 0px;
  left: 0px;
}


.loginFormFieldTitle {
  float: right;
  margin-top: 20px;
  margin-right: 2rem;
  width: 7rem;
  text-align: right;
  font-size: 1.5rem;
}

.myPointsContainerDiv {
  z-index: 999;
  width: 700px;
  height: 800px;
  background-color: gray;
  margin-left: auto;
  margin-right: auto;
  margin-top: 100px;
  position: fixed;
}

.clearBoth {
  clear: both;
}

.clearBothH05rem {
  clear: both;
  height: 0.5rem;
}

.clearBothH1rem {
  clear: both;
  height: 1rem;
}


.clearBothH1_5rem {
  clear: both;
  height: 1.5rem;
}

.clearBothH2rem {
  clear: both;
  height: 2rem;
}

.clearBothH3rem {
  clear: both;
  height: 3rem;
}

.toRtl {
  direction: rtl;
}

.kbSpacer{
  width:1.5rem;
}

.cleanSingleSoduku{
  background-color: red;
}


.optionItem{
  height:2rem;
  font-size:1.5rem;
  padding:0.2rem;
  padding-right: 0.4rem;
  border:1px solid black;
  width:13.4rem;
  text-align:right;
  background-color: white;
}

.systemMessageContainer{
  color:red;
  font-weight:bold;
  font-size:2.5rem!important;
  margin-bottom:2rem;
  float: right;
  
  margin-right:3rem;
}


#filterNames:hover{
  background-color: gray!important;
  color:white!important;
}

#cleanFilterNames:hover{
  background-color: gray!important;
  color:white!important;
}

#infoSummary:hover{
  background-color: gray!important;
  color:white!important;
}

#about:hover{
  background-color: gray!important;
  color:white!important;
}

#explanation:hover{
  background-color: gray;
  color:white!important;

}
#suitable:hover{
  background-color: gray;
  color:white!important;
}
#notSuitableNext:hover{
  color:white;
}
#notSuitablePrev:hover{
  color:white;
}

#mNotSuitableNext:hover{
  color:red;
}
#mNotSuitablePrev:hover{
  color:red;
}

#sNotSuitableNext:hover{
  color:white;
}
#sNotSuitablePrev:hover{
  color:white;
}
#sNotSuitableNextLetter:hover{
  color:white;
}
#sNotSuitablePrevLetter:hover{
  color:red;
}
#sNotSuitableAllLetter:hover{
  color:red;
}

#notSuitable{
  background-color: #afd8e5; 
  color:black;
}
#notSuitableNext, #notSuitablePrev , #mNotSuitableNext, #mNotSuitablePrev , #sNotSuitableNext, #sNotSuitablePrev {
  color:black;
  font-weight:bold;
  font-size:3.5rem;
  cursor:pointer;
  width:3rem;
}

#sNotSuitableNextLetter, #sNotSuitablePrevLetter , #sNotSuitableAllLetter{
  color:black;
  font-weight:bold;
  font-size:3rem;
  cursor:pointer;
  width:3rem;
  border-radius: 0px 0px 30px 30px;
}

.selectionListContainer{
  height:17rem;
  overflow-y:scroll;
  width:32%;
}

.filterTitle {
  width:13rem; 
  margin-right:1rem;
  margin-left:1rem; 
  text-align:right;
}

.selNameForm{
  cursor:pointer;
  color:black;
}

.selNameForm:hover{
  color:blue;
  text-decoration: underline;
}

.filterItemInputShort{
  width: 3rem; 
}

.filterItemInputLong{
  width: 4rem; 
}

.isActiveFilter{
  color:brown!important;
}

.isActiveImage1111{
  background-color:brown!important;
}

.filtersTitleItem{
  margin-left:1rem;
  margin-right:1rem;
}

.filterOptionsDiv{
/*  cursor:pointer; */
  padding-right:1rem;
  height:23rem;
  line-height:3rem; 
  width:90%;
  border:4px solid yellow;
  color:brown;
  background-color: rgba(185 247 190);
  text-align:right;
  font-size:2rem;
}


.inActiveBtn{
/*  background-color: transparent; */
  opacity: 0.6;
}

.filterCB{
  font-weight:normal;
  border:1px solid black; 
  color:black;
  background-color:white;
  height:1.5rem;
  font-size:1rem;
  font-weight:bold;
  padding-left:0.2rem;
  padding-right:0.2rem;
}
.filterCBUsed{
  background-color:blue;
  color:white;
  font-weight:bold;
}

.filterCBNotUsed{
  font-weight:normal; 
  background-color:white;
  color:black;
}

.filterCBUsedLegend{
  background-color:blue;
  color:white;
  font-weight:bold;
}

.filterCBNotUsedLegend{
  font-weight:normal; 
  background-color:white;
  color:black;
}

/* *******************  inage flip 3d *********************************** */

.flip-box {
  background-color: transparent;
  width: 110px;
  height: 110px;
  border: 1px solid #f1f1f1;
  perspective: 1000px;
  background-image:url("../image/winningSmall.png") ;
  background-size: contain;  
}

.flip-box-trivia {
  background-color: transparent;
  width: 110px;
  height: 110px;
  border: 1px solid #f1f1f1;
  perspective: 1000px;
  background-image:url("../image/winningSmall.png") ;
  background-size: contain;  
}

.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-box1111:hover .flip-box-inner {
  transform: rotateY(180deg);
}

.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  /* -webkit-backface-visibility: hidden; */
  backface-visibility: hidden;
}

.flip-box-front {
  background-color:lightgreen ;/* #bbb; */
  color: black;
  font-size:4rem; 
  font-weight:bold;
  height:110px;
  line-height:110px;
}

.flip-box-front-trivia {
  
  font-size:4rem; 
  font-weight:bold;
  height:110px;
  line-height:110px;
}

.flip-box-front-trivia-QM {
  background-color:red ;/* #bbb; */
  color: white;
}

.flip-box-front-trivia-ANS {
  background-color:lightgreen ;/* #bbb; */
  color: black;
}

.flip-box-back {
  background-color: lightgreen ;/*#555; */
  color: white;
  transform: rotateY(180deg);
}

/* **************** for folding row **************** */
.foldable-row {
  max-height: 0; /* Start folded */
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.foldable-row.expanded {
  max-height: 100px; /* Adjust height based on content */
}

.foldable-row-open {
  max-height: 100px; /* Start fully open */
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  transition-duration: 2s;
}

.foldable-row-open.expanded {
  max-height: 0px; /* Adjust height to close */
  transition-duration: 2s;
}


.collapsible-row {
  max-height: 0; /* Initially closed */
  overflow: hidden; /* Hide content */
  transition: max-height 0.3s ease-out; /* Smooth transition */
}

.collapsible-row.expanded {
  max-height: 120px; /* Adjust based on expected content height */
}

.collapsible-row.expandedTrivia {
  max-height: 230px; /* Adjust based on expected content height */
}

.level1{
  background-color: lightgreen;
  color:black;
}

.level2{
  background-color: #FED8B1 ;  /*lightorange; */
  color:black;
}

.level3{
  background-color: red; /*lightred;*/
  color:black;
}

.level4{
  background-color: black; /*lightred;*/
  color:white;
}


.vibIt{
	animation: shake 1s;
  animation-iteration-count: 3; /* infinite */
  }


@keyframes blink05 {
  0% {
      opacity: 1;
  }
  50% {
      opacity: 0.5;
  }
  100% {
      opacity: 1;
  }
}

.doBlink{
  animation: blink05 0.5s;
  animation-iteration-count: infinite;
  background-color: red;
}


@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

.showOnMobile{
  display:none;
}

.showOnTablet{
  display:none;
  color:black; 
  background-color: green;
}

.showOnScreen{
  display:none;
}


/* *************    FOR MOBILE *****************/

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

@media  screen and  (max-width: 640px) {

  
body {
  background-color: whitesmoke;
  font-family: sans-serif;
  font-size: 1rem;
  width: 99%;
  margin-left: 1%;
  margin-right: 1%;
  margin-top: 0px;
}

      
  #logoImage , #homeImage{
    cursor: pointer;
  }

  .headerTab {
    flex: 0.5;
    font-size: 2.5rem;
    text-align: center;
    background-color: white;
    padding: 0.5rem;
    cursor: pointer;
    height: 2.5rem;
    line-height: 2.5rem;
    width:90%;
  }


  .headerHomeTab {
    flex: 0.02;
    font-size: 1.1rem;
    text-align: center;
    background-color: white;
    padding: 0.5rem;
    cursor: pointer;
    display:none;
  
  }

  .headerLoginTab {
    flex: 0.06;
    font-size: 2rem;
    text-align: center;
    background-color: white;
    padding: 0.5rem;
    cursor: pointer;
    height: 2rem;
    line-height: 2rem;
    display:none;
  }

  .headerTabSpacer {
    flex: 1;
    font-size: 2rem;
    font-weight: bold;
    text-align: right;
    text-align: center;
    display: none;

  }


  .mobileMenueContainerDiv{
  display:flex;
  flex:0.1;
  margin-left:2rem;
  }

  .mobileAddNewContainerDiv{
    display:none;
  }

  .pointsReportTitleDiv {
    margin-top: 0rem;
    margin-bottom: 0.5rem;
    padding-top: 0rem;
    padding-bottom: 0rem;
    display: flex;
    flex-direction: row;
    width: auto;
    align-items: center;
    justify-content: right;
    gap: 1rem;
    row-gap: 2rem;
    column-gap: 2rem;
    padding-left: 2rem;
    padding-right: 2rem;
    height:3.5rem;
    line-height:3.5rem;
    font-size:3rem;
  }
  
  .infoText{
    font-size:2.5rem;
  }

  .headerMainDiv {
    margin-top: 0rem;
    margin-bottom: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 1rem;
    display: flex;
    flex-direction: column-reverse;
    width: auto;
    align-items: center;
    justify-content: right;
    gap: 1rem;
    row-gap: 0.3rem;
    column-gap: 2rem;
    padding-left: 2rem;
    padding-right: 2rem;
    flex:0.9;
  }
  
  


  .headerMainTitle {
    flex: 1;
    font-size: 2rem;
    font-weight: bold;
    text-align: right;
    text-align: center;

  }



  .titleLineDiv {
    text-align: right;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: normal;
    color:black;
  }
  
  .responseTitleLineDiv {
    text-align: center;
    /*  display: flex; */
    justify-content: center;
    font-size: 2rem;
    font-weight: normal;
    height:4rem;
    line-height:2rem;
  }
  
  #responseTitleLineDiv {
    text-align: center;
    /*  display: flex; */
    justify-content: right;
    font-size: 2rem;
    font-weight: normal;
    height:6rem;
    line-height:2rem;
    width: 100%;
    display:flex;
    flex-direction:column-reverse; 
  }


  .headerMessageDiv {
    font-size: 1.7rem;
    direction: rtl;
    text-align: right;
    background-color: whitesmoke;
    padding-top: 1rem;
  }

  .listStyle {
    list-style-type: disc;
    margin-top: 0rem;
  }

  .loginContainerDiv1111 {
    z-index: 999;
    width: 90%;
    height: 1200px;
    background-color: gray;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
  }

  .loginContainerDiv{
    display: flex; 
    flex-direction:column;
    justify-content: right;
    gap:1rem;
    width:100%;
  } 

  .loginContainer{
    display:flex;
    flex-direction: column-reverse ;
    justify-content:right;
    gap:1rem;
  }

  .loginFormDiv {
    width: 90%;
    height: 1100px;
    margin-left: 50px;
    margin-right: 50px;
    margin-top: 50px;
    margin-bottom: 50px;
    background-color: white;
  }


  .cancelLoginDiv {
    padding-right: 2rem;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-size: 2.5rem;
    font-weight: bold;
    height: 3rem;
    line-height: 3rem;
    padding-top:1rem;
  }
  
  
  .cancelLoginBtn {
    float: right;
    width: 1rem;
    cursor: pointer;
    height: 3rem;
    line-height: 3rem;
    font-size: 2.5rem;
  }


  .inputFieldErrorMsg {
    margin-top: 5px;
    margin-right: 2rem;
    width: 80%;
    text-align: right;
    font-size: 2.5rem;
    margin-right: auto;
    margin-left: auto;
    color: red;
  }

  .loginTitle {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding-top: 1.5rem;
    padding-bottom: 2rem;
    font-size: 2.5rem;
    font-weight: bold;
  }


  .loginFormInputDiv {
    margin-top: 20px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    float: none!important;
    display: flex;
  }

  .loginFormInput {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0rem;
    text-align: right;
    font-size: 3rem;
    height:4.5rem;
    line-height:4.5rem;
    padding-right: 0rem;
    background-color: lightgray;
  }

  .loginFormInput::placeholder {
    font-weight: 200;
    font-size: 2.3rem;
    opacity: 0.8;
    color: black;
}

  .loginFormTextArea {
    width: 80%;
    text-align: right;
    font-size: 1.5rem;
    line-height: 2rem;
    padding-right: 1rem;
    margin-left: auto;
    margin-right: auto;
    background-color: lightgray;
  }

  .loginButtonDiv {
    display: flex;
    justify-content: center;
  }


  .loginButton {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    font-size: 3rem;
    border-radius: 6px;
    border: 4px solid rgb(215 216 216);
    padding: 0.3rem;
    cursor: pointer;
  }

  #userNameDiv, 
  #contactUsMessageDiv, 
  #isRegDiv {
    display: flex;
    flex-direction: column;
  }

  #isRegInputContainer{
    justify-content:right;  
    width:80%;  
    font-size:2.5rem;
  } 

  input.larger {
      width: 2.5Rem;
      height: 2.5rem;
      border: 3px solid black;
  }



  .footerMainDiv {
    display: flex;
    flex-direction: row;
    width: auto;
    align-items: center;
    justify-content: right;
    gap: 1rem;
    row-gap: 2rem;
    column-gap: 2rem;
    padding-left: 2rem;
    padding-right: 2rem;
  }

  #footerContainer {
    position: fixed;
    bottom: 0;
    width: 90%;
    background-color: lightblue;
    display:none;
  }

  .footerTab {
    flex: 1;
    font-size: 2rem;
    text-align: center;
    background-color: white;
    padding: 0.5rem;
    cursor: pointer;
  }

  #footerMainDiv {
    margin-top: 1rem;
    padding-top: 0rem;
    padding-bottom: 1rem;

  }

  .footerTabSpacer {
    flex: 1;
    font-size: 2rem;
    font-weight: bold;
    text-align: right;
    text-align: center;
    display: block;

  }


  .sodukuBG {
    width: 80%;
    height: auto;
    margin-top: 3rem;
  }


  #tableSizeDiv,
  #gameTypeSelectionDiv,
  #difficultyDiv,
  #sodukuSizeDiv,
  #selectModeDiv {
    font-size: 1.5rem;
    font-weight: bold;
    display: flex;
    flex-direction: column-reverse;
    gap: 0.5rem;
  }

 
  #allNameSelectionDiv {
    font-size: 1.5rem;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  #nameTypeDiv {
    font-size: 1.5rem;
    font-weight: bold;
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
  }

  .moreNameButtonTitle{
    width:32rem;
    line-height:3rem;
    padding-top:0.5rem;
  }

  #sodukuSerialNumDiv {
    font-size: 1.5rem;
    font-weight: bold;
    display: flex;
    flex-direction: column-reverse;
    justify-content: center; 
    align-content:center; 
    gap:2rem;
  }
    
  

  .gameTypeSelectionDiv {
    column-gap: 1rem;
  }

  .sodukuGameTypeButtonDiv {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    font-size: 3rem;
    margin-bottom:1rem;
  }

  #mokirFiltersPage:hover{
      background-color: gray;
      color:white!important;
  }

  #mokirAbout:hover{
    background-color: gray;
    color:white!important;
  }

  .nameInfoActionButton1111:hover{
    background-color: gray;
    color:white!important;
  }

  .mokirTypeButtonDiv {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    font-size: 3rem;
    margin-bottom:1.5rem;
  }

  .nameTypeInfoDiv{
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    font-size: 3rem;
    margin-bottom:1.5rem;
    color:white;
  }

  .nameInfoActionButtonDiv {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    font-size: 3rem;
    margin-bottom:1.5rem;
    text-align: center;
  }

  .mokirNameInfoActionButtonDiv {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    font-size: 3rem;
    margin-bottom:1.5rem;
    text-align: center;
  }


  .gameTypeButton {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    font-size: 3.5rem;
    border-radius: 6px;
    border: 4px solid black; /* rgb(215 216 216); */
    padding: 0.3rem;
    cursor: pointer;
  }

  
  .nameOptionsL1Button {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    font-size: 4.5rem;
    border-radius: 6px;
    border: 4px solid black; /* rgb(215 216 216); */
    padding: 0.3rem;
    cursor: pointer;
    background-color: #afd8e5;
    background-image: linear-gradient(#ff00006e, yellow,#ff00006e);
    color:black;
  }

  .nameOptionsL1Button:hover {
    background-image: linear-gradient(#ff00006e, yellow);
  }


  .backTypeButton{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    font-size: 3.5rem;
    border-radius: 6px;
    border: 4px solid rgb(215 216 216);
    padding: 0.3rem;
    cursor: pointer;
  }


  .nameInfoActionButton {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    font-size: 4rem;
    border-radius: 6px;
    border: 4px solid black; /*rgb(215 216 216); */
    padding: 0.3rem;
    cursor: pointer;
    background-image: linear-gradient(#ff00006e, yellow,#ff00006e);
  }

  .nameInfoActionButton:hover {
    background-image: linear-gradient(#ff00006e, yellow);
  }

  .nameInfoActionButtonWidth{
    width:90%;
  }

  .mokirNameInfoActionButton {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    font-size: 3.5rem;
    border-radius: 6px;
    border: 4px solid black; /*rgb(215 216 216); */
    padding: 0.3rem;
    cursor: pointer;
    background-image: linear-gradient(#ff00006e, yellow,#ff00006e);
  }

  .mokirNameInfoActionButton1111:hover{
    background-color: gray!important;
    color:white!important;
  }

  .mokirNameInfoActionButton:hover {
    background-image: linear-gradient(#ff00006e, yellow);
  }

  .sodukuGameModeButtonDiv {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    font-size: 3rem;
  }

  .sodukuGameModeButton {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    font-size: 3rem;
    border-radius: 6px;
    border: 4px solid rgb(215 216 216);
    padding: 0.2rem;
    margin-bottom:1rem;
  }


  #modeContinueDivContainer{
    display:flex; 
    flex-direction:column;
  }   

  #modeContinueOptinsDiv{
    display:flex; 
    flex-direction:column-reverse; 
    gap:1rem ; 
    margin-top:1.5rem ; 
    justify-content:center ;
  } 

  #modeAutoSaveContinueOptinsDiv{
    display:flex; 
    flex-direction:column-reverse; 
    gap:1rem ; 
    margin-top:1.5rem ; 
    justify-content:center ;
    width:100%;
    margin-left:auto;
    margin-right:auto;
  } 


  .sodukuSizeButtonDiv {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    font-size: 3rem;
    margin-bottom:1rem;
  }


  .sodukuSizeButton {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    font-size: 3rem;
    border-radius: 6px;
    border: 4px solid rgb(215 216 216);
    padding: 0.2rem;
  }


  .sodukuDifficultyButtonDiv {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    font-size: 3rem;
    margin-bottom:1rem;
  }


  .sodukuDifficultyButton {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    font-size: 3rem;
    border-radius: 6px;
    border: 4px solid rgb(215 216 216);
    padding: 0.2rem;

    display: flex;
    flex-direction: row;
    justify-content: center;

  }


  .sodukuTable {
    margin-left: auto;
    margin-right: auto;
    margin-top: 2rem;
    width: 95%;
  }

  .sodukuTDInput {
    background-color: yellow;
    height: 3.0rem;
    width: 100%;
    font-size: 2.3rem;
    font-weight: bold;
    text-align:center;
  }

  .squareBG_1 {
    background-color: yellow;
    color: black;
    font-weight:normal;
    padding:0px!important;
  }

  .squareBG_0 {
    background-color: lightblue;
/*    color: white; */
    color: black;
    font-weight:normal;
    padding:0px!important;
  }

  .squareBG_3 {
    background-color: black;
    color: black;
    width: 4rem;
    height: 3.5rem;
    border-radius: 10px;
  }

  .squareBG_selected {
    background-color: white;
    color: black;
    width: 4.5rem;
    height: 3.5rem;
    border-radius: 10px;
    padding:0px;
  }


  .kbItem{
    width:5.2rem;
    height:5rem;
    line-height:5rem;
    font-size:4rem;
    font-weight: normal;
    background-color: white;
    border-radius: 8px;
  }

  .sodukuSerialNumButtonDiv {
    width: 90%;
    font-size: 3rem;
    margin-left: auto;
    margin-right: auto;
  }


  .sodukuSerialNumButton {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    font-size: 3rem;
    border-radius: 6px;
    border: 4px solid rgb(215 216 216);
    padding: 0.2rem;

  }

  #statusMessageDiv {
    display: flex;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    font-size: 2rem;
    background-color: white;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-top: 0.6rem;
  }

  #statusAutoSaveDiv {
    display: flex;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    font-size: 3.0rem;
    background-color: white;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-top: 0.6rem;
  }

  .sodukuSolveButtonDiv {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1rem;
    font-size: 3rem;
    display: flex;
    gap: 1rem;
  }

  .sodukuSolveButton {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    font-size: 3rem;
    border-radius: 6px;
    border: 4px solid rgb(215 216 216);
  }

  #specificGameDiv {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column-reverse;
  }

  .sodukuNameSelDiv {
    margin-right: 1Rem;
    height: 40px;
    line-height: 40px;
    font-size: 3rem;
  }


  .sodukuNameSel {
    font-size: 3rem;
    width: 50%;
    text-align: right;
  }

  .pointsCalcInfoContainerDiv {
    z-index: 999;
    width: 90%;
    height: 1200px;
    background-color: white;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    border: solid black 2px;
  }

  .pointsCalcInfoDiv {
    width: 100%;
    height: 1100px;
    background-color: white;
  }


    

  #selectSpecificGameDiv {
    display: flex;
    justify-content: center;
    margin-right: 0rem;
    flex-direction: column;
    width: 100%;
  }


  .optionsContainer{
    display:flex; 
    flex-direction: column;
    display:none; 
    overflow-y:scroll; 
    height:60rem; 
    width:100%;
    border: 2px solid black;
    background-color: lightgray;
  }


  .underContainer {
    position: relative;
    width: 90%;
    margin-right:auto;
    margin-left:auto;
    height: 3rem;
    border: 0px solid #73AD21;
    background-color: red;
  }

  .upperContainer {
    position: absolute;
    top: 0px;
    right: 0;
    width: 100%;
    height: 3rem;
    font-size:2.5rem;
    border: 0px solid #73AD21;
    background-color:  yellow;  /* transparent; */
  }


  .optionItem{
    height:4rem;
    line-height:4rem;
    font-size:2.8rem;
    padding:0.2rem;
    padding-right: 1rem;
    border:1px solid black;
    width:97%;
    text-align:right;
    background-color: white;
    margin-left:auto;
    margin-right:auto;
    background-color: lightgray;
  }

  #headerWelcomeMessageDiv{
    color:red;
    font-size: 3.5rem;
    font-weight:bold;
    padding-top: 4rem;
    padding-bottom: 2rem;
    padding-right: 0rem;
    text-align:center;
  }

  .lastSelCell{
    background-color:gray;
    border-radius:50px;
  }

  .waitImage {
    width:auto;
    height:80px;
  } 

  #proposalsDiv1 ,   #sProposalsDiv1 ,   #sProposalsDiv3{
    background-color:#8aabe5;
    color:white;
    width: 90%; 
    margin-left:auto; 
    margin-right:auto;
    display: flex; 
    flex-direction:row; 
    justify-content: center; 
    font-size:3rem;
  }

  #mProposalsDiv1 {
    background-color:#8aabe5;
    color:white;
    width: 90%; 
    margin-left:auto; 
    margin-right:auto;
    display: flex; 
    flex-direction:row; 
    justify-content: center; 
    font-size:4rem;
  }

  #proposalsDiv2  ,#sProposalsDiv2   {
    background-color:#8aabe5;
    color:white;
    width: 90%; 
    margin-left:auto; 
    margin-right:auto;
    display: flex; 
    flex-direction:row; 
    justify-content: center; 
    font-size:3rem;
  }

  #mProposalsDiv2 , #mProposalsDiv3 {
    background-color:#8aabe5;
    color:white;
    width: 90%; 
    margin-left:auto; 
    margin-right:auto;
    display: flex; 
    flex-direction:row; 
    justify-content: center; 
    font-size:4rem;
  }


  #screenProposalsContainerDiv{
    display: none;
  }

  #mobileProposalContainer{
    width: 90% ;
    display: flex; 
    flex-direction:column;
    justify-content: center; 
    margin-left:auto;
    margin-right:auto;
  }


  .aboutOptionItemDiv{
    width:60%;
    margin-right:15%;
    float: right;
    display:flex;
    flex-direction:row; 
    justify-content: right;
  }


  .aboutOptionText{
    margin-right:1rem;
    font-size:2.5rem;
    font-family: Narkisim, Helvetica, sans-serif;  
    font-weight:normal;
    cursor:pointer;
  }

  .aboutOptionText:hover {
    color:red;
  }

  .aboutOptionItemDiv{
    width:90%;
    margin-right:15%;
    float: right;
    display:flex;
    flex-direction:row; 
    justify-content: right;
  }

  .aboutPageTextLogo{
    color:#FFE699;
    width: 30%; 
    margin-left:0rem; 
    margin-right:3rem ;
    display: flex; 
    justify-content: center; 
    font-size:2rem;
    font-family: Narkisim, Helvetica, sans-serif; 
    height:6rem; 
    line-height:3rem; 
    font-weight:normal;
  }

  .aboutItemPageTitleText{
    background-color:#FFE699;
    border:1px solid black; 
    border-radius:1rem;
    padding-right:1rem; 
    padding-left:1rem;
    width: auto; 
    margin-left:auto; 
    margin-right:auto; 
    display: flex; 
    justify-content: center; 
    font-size:3rem;
    font-family: Narkisim, Helvetica, sans-serif; 
    height:6rem; 
    line-height:6rem; 
    font-weight:normal;
  }

  .aboutInfoText{
    color:black; 
    font-size:2rem; 
    width:95%;
    margin-left:auto;
    margin-right:auto;
    text-align:right;
    font-family: Narkisim, Helvetica, sans-serif;
  }

  .lpAboutInfoText{
    color:black; 
    font-size:3.0rem!important; 
    width:100%;
    margin-left:auto;
    margin-right:auto;
    text-align:right;
  }

  .aboutHowToInfoText{
    color:black; 
    font-size:2rem; 
    width:100%;
    margin-left:auto;
    margin-right:auto;
    text-align:right;
  }

  .aboutPageTitleDiv{
    width: 100%;
    display:flex;
    flex-direction:row; 
    justify-content: center; 
  }


  .aboutLPageTitleDiv{
    width: 70%;
    display:flex;
    flex-direction:row; 
    justify-content: center; 
  }

  .aboutBackBtn{
    background-color:#C5E0B4; 
    color:brown;
  } 

  .aboutWhoNeedInfoText{
    color:black; 
    font-size:2rem; 
    width:100%;
    margin-left:auto;
    margin-right:auto;
    text-align:right;
    font-family: Narkisim, Helvetica, sans-serif;
  }


  .aboutCheckBox{
    cursor:pointer;
    width:1rem;
    height:1rem;
    border:1px solid black;
    box-shadow: 3px 3px 1px black;
    position: relative;
    top: 8px; 
  }

  .aboutCheckBox:hover{
    border:2px solid black;
    box-shadow: 3px 3px 1px red;
  }

  .modalContainder{
    font-size:2rem;
    z-index:9998; 
    position:absolute; 
    top:5%; 
    left:0%;
    border:2px solid black; 
    width:100%; 
    background-color: white;
    padding:0rem;
    padding-top:1rem;
    display:flex;
    flex-direction: column;
    height:108rem;
  }

  .modalMessageContainder{
    font-size:3rem;
    z-index:9999; 
    position:absolute; 
    top:0%; 
    left:0%;
    border:2px solid black; 
    width:100%; 
    background-color: white;
    padding:0rem;
    padding-top:1rem;
    display:flex;
    flex-direction: column;
    height:100rem;

    background-color:transparent;
    height:90rem;
  }


  .modalItemsContainder{
    font-size:2rem;
    /*
    z-index:9999; 
    position:absolute; 
    top:30%; 
    left:35%;
    border:2px solid black; 
    width:30%; 
    background-color: white;
    padding:0rem;
    padding-top:1rem;
    */
    display:flex;
    flex-direction: column;
  }

  .listItemContainder{
    display:flex; 
    flex-direction:row; 
    justify-content:right; 
    margin-bottom:2px;
    margin-top:2px;
    padding-right:1rem;

    font-size:2.5rem; 
    line-height:2.5rem; 
    font-weight:bold; 
  }


  .listCB{
    width:1.5rem;
    height:1.5rem;
    border-width:5px;
  }

  .mokirListCB{
    width:2rem;
    height:2rem;
    border-width:5px;
    font-size:2rem; 
    line-height:2rem;
    border-radius:50%;
  }

  .mokirListCBDiv{
    position:relative; 
    top:0.2rem; 
    height:2rem; 
    width:5rem;
    line-height:2rem;
    text-align:center;
  }  

  .mokirListText{
    font-size:2rem;
    height:3rem; 
    line-height:3rem;
    width:auto; 
    margin-right:1rem;
    margin-left:1rem; 
    text-align:right;
  }


  .mokirListItemContainder1111{
    font-size:1.5rem;
    height:2rem; 
    line-height:2rem;
    font-weight:normal;
    font-family: Narkisim, Helvetica, sans-serif; 
    background-color:lightblue ;
    color:black;
  }

  .mokirListItemContainder{
    display:flex; 
    flex-direction:row; 
    justify-content:right; 
    margin-bottom:2px;
    margin-top:2px;
    padding-right:0rem;
    font-size:2.5rem;
    }


  .aboutUsItemLPage{
    width:80%;
    margin-left:auto;
    margin-right:auto;
    background-color: lightgray;
  }

  .gameContainerDiv{
    width:95%;
    margin-left:auto;
    margin-right:auto;
    background-color: white;
  }

  .aboutItemPage{
    width:80%;
    margin-left:auto;
    margin-right:auto;
    background-color: #69D8FF!important;
  }


  .aboutItemLPage{
    width:80%;
    margin-left:auto;
    margin-right:auto;
    background-color: white!important;
  }

  .mokirNameListItemSelected{
    background-color: blue!important;
    color:white;
  }


  .menueBarOption{
    /* border-top:1px solid black;
    border-bottom:1px solid black; */
    height:3rem;
    line-height:3.5rem; 
    padding-right:1rem; 
    padding-left:1rem; 
    font-size:2rem;
    text-align:right;
    cursor:pointer;
    /* background-color:black;
    color:white; */
    color:black;
  }

  .menueBarOption:hover{
    background-color:white;
    color:black;
  }

  .menueBarOptionImg{
    cursor:pointer;
    
  }

  .menuBarOptionIconImage{
    width:auto; 
    height: 2.5rem; 
    max-height:2.5rem;
    /* padding-right:1rem;
    padding-top:0.5rem; */
    border-radius: 0.7rem;
    border:2px solid white;
  }

  .headerBarOptionIconImage{
    width:auto; 
    height: 2.5rem; 
    max-height:2.5rem;
    /* padding-right:1rem;
    padding-top:0.5rem; */
    /* border-radius: 0.7rem;
    border:2px solid white; */
  }

  .landingMenueContainer{
    width: 80%; 
    background-color: #c5ef79;
    position: absolute;
    left: -800px;
    top:8.5rem;
    display:none;
    height: 50rem;
    z-index:999;
  }

  .logoImageDiv{
    width:30%;
    text-align:center;
    background-color: rgb(224, 229, 233);
  }



  .mobileMenueOpenIcon{
    height:1rem;
    background-color:rgb(224, 229, 233);
    display:block;
    cursor: pointer;
  }  


  .optionsPhaseContainerV1{
    width: 100%;
  }

  .optionsPhaseContainerV1DoubleSelf{
    width: 95%;
    margin-left:auto;
    margin-right:auto;
  }

  .optionsPhaseContainerV1MemorySelf{
    width: 99%;
    margin-left:auto;
    margin-right:auto;
  }

  .menueBarUpperSpacer{
    height:3rem; 
    line-height:3rem;
    /* border-bottom:1px solid black;  */
  }

  .menueBarUpperSpacerStyle {
    color:black;
    padding-left:2rem;
    padding-right:2rem;
    font-size: 2rem; 
    font-weight:bold;
  }

  .menueBarCenterSpacer{
    height:12rem ; 
    /* border-bottom:1px solid black ; 
    border-top:1px solid black; */
  }
  .menueBarBottomSpacer{
    height:3rem; 
    /* border-bottom:1px solid black; */
  }

  .showOnMobile{
    display:flex;
  }

  .showOnTablet{
    display:none;
    color:yellow; 
    background-color: green;
  }

  .showOnScreen{
    display:none;
  }
  
  .nameDetailsItemBtn{
    cursor:pointer;
    padding-right:0.0rem;
    height:3rem; 
    line-height:3rem;
    width:7rem;
    border:2px solid black; 
    border-radius:8px;
    text-align: center; 
    font-size:1.5rem;
    color:black;
    background-color: lightblue;
    user-select: none;
  }

  .nameDetailsItemBtn:hover{
    color:blue;
    background-color: white;
  }

  .showPresentationBtn{
    width:36rem;
    height:7rem;
    font-size:2rem; 
    background-color:#4472C4; 
    color:white; 
    border:10px solid #4472C4; 
    border-top:10px solid lightblue; 
    border-left:10px solid white;  
    border-style: outset;
  }

  .aboutSlide{
    border:5px solid black;
    width:90%;
    margin-left:auto;
    margin-right:auto;
  }

  .slideImage{
    width:100%;
    height:auto;
  }

  .wikiAmountSelStyle{
    background-color:red;
    text-align:center;
    color:black;
    width:15rem;
    margin-right:0rem; 
    margin-left:0rem;
    font-size:2.5rem;
    padding-right:1rem;
    padding-left:1rem;
    cursor: pointer;
    font-weight:normal;
  }

  .wikiVeryMuchSelStyle{
    background-color:red;
  }

  .wikiMuchSelStyle{
    background-color:orange;
  }

  .wikiModerateSelStyle{
    background-color:pink;
  }

  .wikiFewSelStyle{
    background-color:yellow;
  }

  .isActiveWikiSelector{
    color:blue!important;
    font-weight:bold;
    border:2px solid black;
    background-image:url("../image/astrik1.png") ;/*linear-gradient(); */
    background-size: auto 2rem;
    background-repeat: no-repeat;
    background-position: right;
  }


  .emphesizedOption{
    text-decoration: underline;
  }

  .propsalName{
    user-select: none;
  }

  .propsalName:hover{
    color:white;
  }

  #nameExplanationPersonalTitleDiv , #mokirNameExplanationPersonalTitleDiv{
    display:flex; 
    flex-direction:column-reverse; 
    justify-content: right;
  }

  #mokirFiltersGeneralBtnDiv{
    display: flex;
    flex-direction:column;
    justify-content: center; 
    gap:1rem;
    width:90%;
    margin-left:auto;
    margin-right:auto;
    text-align: center;
    margin-top:1rem;
  } 

  .mokirFiltersGeneralBtn{
    width: 80%;
    margin-right:auto; 
    margin-left:auto;
  }



  .mokirListActionBtn{
    margin-left: auto;
    margin-right: auto;
    cursor:pointer;
    padding-right:0.0rem;
    height:fit-content; 
    line-height:2rem;
    width:12rem;
    border:2px solid black;  
    background-color:rgb(243, 245, 122);
    text-align: center; 
    font-size:2.5rem;
  }

  .mokirListActionBtn:hover{
    background-color: gray!important;
    color:white;
  }

  #nameExplanationPersonalButtons{
    background-color:#7c7fd1!important ;
    display:flex; 
    flex-direction:column;
    justify-content: space-between;
    gap:1rem;
    width:25%;
    margin-left:auto;
    margin-right:auto;
  }

  #mokirFilterActionDiv{
    display: flex;
    flex-direction: column-reverse;
    text-align:center;
    width:90%;
    margin-right:auto;
    margin-left:auto;
    height:fit-content;
    line-height:7rem;
    background-color:transparent;
    padding-right:1.5rem;
    padding-left:1.5rem;
 } 

 .mokirFilterActionBtn{
   width:80%;
   margin-right:auto; 
   margin-left:auto;
   text-align:center;
 }
 
  .mokirAmountResultDiv{
    display:flex;
    flex-direction:row;
    justify-content:center;
    height:5rem;
    line-height:5rem; 
    width:80%;
    margin-left:auto;
    margin-right:auto;
    border:2px solid black;
    background-color: transparent;
    text-align:center;
    font-size:2.5rem;
    color:white; 
    margin-top:0rem; 
    margin-bottom:1rem;
  
  } 

  .menueBarSubOptionText{
    width:70%;
  }

  .menueBarSubOptionImage{
    width:30%;
    text-align:center;
    height:3rem;
    line-height:4.5rem;
  }

  #versionNote{
    /* border:1px solid red;  */
    width:90%;
    margin-left:auto;
    margin-right:auto;
    color:white;
    font-size:1rem;
    font-weight: normal;
    /*padding:1.5rem;*/
  }

  .nameTypeImage {
    width:auto; 
    max-height: 10rem;
    height: 10rem;
  }

  .filtersTitleManinDiv{
    width:100%;
    display:flex;
    flex-direction:row;
    justify-content:center;
    margin-bottom:1.5rem;
    font-size:4rem;
    text-align:center; 
    font-family: Narkisim, Helvetica, sans-serif;
 } 

 .nameFiltersTitleManinDiv{
  width:100%;
  display:flex;
  flex-direction:column-reverse;
  justify-content:center;
  margin-bottom:1.5rem;
  font-size:4rem;
  text-align:center; 
  font-family: Narkisim, Helvetica, sans-serif;
} 

 .mProposalsContainerDiv{
    display:flex;
    flex-direction: column-reverse;
    justify-content: center;
    width:100%;
    margin-left:auto;
    margin-right:auto;
  } 

  .mAdvanceBtn{
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    width:88%;
    margin-left:auto;
    margin-right: auto;
  }

  .nameNavBtn{
    text-align:center; 
    border-right:0px solid black;
    background-color: white;
    width: 8rem!important;;
    border:1px solid black;
    font-size:3rem
  }

  .nameNavWideBtn{
    text-align:center; 
    border-right:0px solid black;
    background-color: white;
    width: 12rem!important;;
    border:1px solid black;
    font-size:3.5rem!important;
    border-radius: 0px 0px 30px 30px;
  }

      
  .isActiveLetter{
    color:white!important;
    background-color:blue!important;
  }

  .allFiltersContainerDiv{
    display: flex;
    flex-flow: column-reverse;
    justify-content: space-around;
    width:100%;
  }

  .filterGroupContainerDiv{
    width:90%; 
    margin-left:auto; 
    margin-right:auto; 
    display:flex; 
    flex-direction: column;
  }

  .filterGroupContainerTitle{
    height:5rem;
    line-height:5rem; 
    width:100%;
    margin-left:auto;
    margin-right:auto;
    border:4px solid yellow;
    background-color: orange;
    text-align:center;
    font-size:4rem;
    color:black;
    margin-bottom: 1rem;
  }

  
  .filterGroupContainerOptionsDiv{
    display:flex;
    flex-direction:column;
    padding-right:0.5rem;
    padding-top:0.5rem;
    height:21rem;
    line-height:4rem; 
    width:100%;
    border:4px solid brown;
    background-color: rgb(239 230 216);
    text-align:right;
    font-size:3.5rem;
    color:black;
  } 
  
  .filterPageGroupBtnDiv{
    display: flex;
    flex-flow: column;
    justify-content: center; 
    gap:1rem;
    width:100%;
    margin-top:1rem;
  }

  .filterPageGroupBtn{
    width:100%; 
    text-align:center;
  }

  .filterItemInput{
    font-size: 2.5rem;
    text-align:right;
  }

  .filterItemTitle{
    font-size: 3.5rem; 
    margin-right: 2rem; 
    text-align:left; 
    margin-left: 1rem; 
    color:blue;
    height: 4rem;
    line-height: 4rem;
  }

  .filterItemTitleRight{
    font-size: 2.5rem; 
    margin-right: 6rem; 
    text-align:right;  
    margin-right: 1rem; 
    color:blue;
  }

  .filterItemShortTitle{
    width: 16rem; 
  }
  .filterItemLongTitle{
    width: 22rem; 
  }
  
  .filterItemVeryLongTitle{
    width: 24rem; 
  }
  
  .filterItemExtraLongTitle{
    width: 30rem; 
  }

  .filterBoxTitle{
    color: red;
    font-size: 3.5rem;
    margin-top: 1rem;
    margin-right: 2rem;
    margin-bottom: 1.5rem;
    text-align:center;
  }

  .notOnMobile{
    display:none;
  }
  

  .wikiBarContainerDiv{
    display:flex;
    flex-direction:row;
    width:98%;
    margin-left:auto;
    margin-right:auto;
    justify-content: center;
    border:1px solid black;
  }


  .isActiveTableRow{
    color:black!important;
    background-color:rgb(235, 199, 134)!important;
  }

  .menuBarItemContainer{
    display:flex; 
    flex-direction: row; 
    justify-content: right;
    /* border-bottom:8px solid gray; */
  } 

  .menuBarItemContainerT1{
    display:flex; 
    flex-direction: row; 
    justify-content: right;
    /* border-bottom:8px solid gray;
    border-top:8px solid gray; */
  } 

  .filtersTitleManin{
    display:flex; 
    flex-direction: row;
    justify-content: center;
    width:100%;
  }

  .filtersTitleManinT2{
    width:100%;
    text-align:center;
  }

  .filtersTitle1Item{
    color:black;
    font-size: 4rem;;
  }

  .filterItemInputDiv{
    margin-left: 1rem; 
    width:4rem;
    font-size: 2.5rem;
    height: 4rem;
    line-height: 4rem;
  }

  .filterItemInputSelectDiv{
    margin-left: 1rem; 
    width:4rem;
    font-size: 2.5rem;
    height: 3rem;
    line-height: 3rem;
  }

  .groupT1Row{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    width:100%;
  }

  .groupT1Col{
    display: flex;
    flex-flow: column-reverse;
    width:100%;
  }
  
  .groupT1{
    display: flex;
    flex-flow: column-reverse;
    justify-content: center;
    font-size: 1.5rem;
    width:100%;
    gap:0.5rem;
  }

  .groupT2{
    display: flex;
    flex-flow: rowe;
    justify-content: center;
    font-size: 1.5rem;
    width:100%;
    gap:0.5rem;
  }

  .filterButton{
    height:5rem;
    line-height:5rem; 
    width:90%;
    margin-left:auto;
    margin-right:auto;
    border:2px solid black;
    background-color: orange;
    text-align:center;
    font-size:3.5rem;
    color:black;
    background-image: linear-gradient(#ff00006e, yellow,#ff00006e);
  }

  .filterButton:hover {
    background-image: linear-gradient(#ff00006e, yellow);
  }

  
  .latterTable{
    display:flex;
    flex-direction: row;
    background-color:white;
    width:fit-content;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
  }

  .latterTableItem{
    border:1px solid black; 
    padding:0.2rem;
    font-size:2.5rem;
    width:1.8rem;
    text-align: center;
    cursor:pointer;
 }

 .latterTableItem:hover{
   color:white;
   background-color: blue;
 }


  .width90{
    width:90%;
    margin-left:auto;
    margin-right:auto;
    text-align: center;
  }
  
  .bodyMainContainderDiv{
    display:flex; 
    flex-direction:column;
    width:99%; 
    background-color:black;
    color:white;
    border: 3px solid  white; 
    margin-left:auto; 
    margin-right:auto;
    font-size:2.5rem;
    height:fit-content;
  }

  .catItemsColumn{
    width:90%;
    display:flex; 
    flex-direction: column;
    margin-right:2rem; 
    justify-content :right;
    line-height:1.4rem;
  }

  .filterItemRow{
    font-size:2.5rem; 
    line-height:2.5rem;
    width:80%; 
    margin-right:1rem;
    margin-left:1rem; 
    text-align:right;
  }

  .filterOptionsDivHeight0{
    height:14rem;
    margin-bottom:1rem;
  }
  
  .filterOptionsDivHeight1{
    height:14rem;
    margin-bottom:1rem;
  }
  
  .filterOptionsDivHeight2{
    height:18rem;
    margin-bottom:1rem;
  }
  
  .filterOptionsDivHeight4{
    height:58rem;
    margin-bottom:1rem;
  }
  
  .filterOptionsDivHeight5{
    height:28rem;
    margin-bottom:1rem;
  }
  
  .filterOptionsDivHeight6{
    height:90rem;
    margin-bottom:1rem;
  }
  
  .filterOptionsDivHeight8{
    height:142rem;
    margin-bottom:1rem;
  }
  
  .filterGroupTitleDiv{
    color: red;
    font-size: 3rem;
    margin-top: 1rem;
    margin-right: 2rem; 
    margin-bottom: 0rem;
    text-align:center;
    display:flex;
    flex-direction:row;
    justify-content:center;  
  }

  .mokirFiltersContainerDiv{
    display: flex;
    flex-flow: column-reverse;
    justify-content: center;
    width:100%;
  }

  .mokirFiltersContainer{
    display:flex;
    flex-direction:column;
    padding-top:0.5rem;
    line-height:3rem; 
    height: fit-content;
    width:96%;
    margin-right:auto;
    margin-left:auto; 
    border:4px solid white;
    background-color: white;
    text-align:right;
    font-size:2.5rem;
    color:black;
    margin-bottom:2rem;
  }

  .mokirListWeightDiv{
    width:5rem;
    font-size:2.5rem;
  }

  .mokirListWeight{
    width:3rem;
    font-size:2.5rem;
  }

  .mokirListFilterTextDiv{
    width:100%; 
    display:flex;
    flex-direction:row;
    justify-content: right;
    font-size:2.5rem;
  }

  .mokirListFilterTextContainer{
    width:100%; 
    display:flex;
    flex-direction:row;
    justify-content: right;
    font-size:2.5rem;
    height:3rem;
    line-height: 3rem;
  }

  .mokirListNameText{
    height:3rem; 
    line-height:3rem;
    margin-left:0.5rem;
    font-size:2rem;
  } 

  .width49{
    width:49%;
    margin-left:auto;
    margin-right:auto;
    text-align: center;
  }

  .width32{
    width:32%;
    margin-left:auto;
    margin-right:auto;
    text-align: center;
  }

  .widthT1{
    width:80%;
    margin-left:auto;
    margin-right:auto;
    text-align: center;
  }

  .mokirFiltersGroupContainerDiv{
    width:99%;
    margin-left:auto;
    margin-right:auto;
    text-align: center;
  }

  .mokirNameListItem{
    font-size: 2.5rem;
    color:black;
  }

  .errorMessageContainerPivot{
    background-color:lightGray;
    height:2rem;
    width:1rem;
    margin-left:auto;
    margin-right:auto; 
  }

  .errorMessageContainerDiv{
    background-color:white;
    display:flex; 
    flex-direction:column;
    justify-content:center;
    height:20rem;
    width:95%;
    margin-left:auto;
    margin-right:auto; 
    margin-top:5%;
    margin-bottom:auto; 
    border:2px solid black;
  }

  .modalPageContainerDiv{
    background-color:white;
    display:flex; 
    flex-direction:column;
    justify-content:center;
    height:fit-content;
    width:99%;
    margin-left:auto;
    margin-right:auto; 
    margin-top:5%;
    margin-bottom:auto; 
    border:2px solid black;
  }

  .errorMessageTitle{
    height:3rem;
    line-height:3rem;
    background-color: black;
    color:white;
    text-align: center;
  }

  .errorMessageBody{
    margin-top:4rem;
    margin-bottom:4rem;
    height:4rem;
    line-height:4rem;
    background-color: white;
    color:black;
    text-align: center;
  }

  .modalPageBody{
    margin-top:3rem;
    margin-bottom:2rem;
    height:fit-content;
    /* line-height:28rem; */
    background-color: white;
    color:black;
    text-align: center;
    font-size:2rem;
  }

  .errorMessageContBtn{
    border:2px solid white; 
    border-radius:0px;
    width:95%; /*fit-content;*/
    margin-left:auto;
    margin-right:auto;
    height:2.5rem;
    line-height:2.5rem;
    background-color: black;
    color:white;
    text-align: center;
    font-size:1.5rem;
    cursor: pointer;
    padding-right:0.0rem;
    padding-left:0.0rem;
  }

  .errorMessageContBtn:hover{
    background-color: gray;
  }

  .notes{
    font-size:2.5rem;
    text-align:right;
  }

  .viewerCounterContainerDiv{
    background-color: black; 
    color:white;
    padding-left: 1rem;
    padding-right: 1rem;
    display:flex;
    flex-direction:row;
    gap:1rem; 
    justify-content:center;
    border:1px solid black;
    border-radius: 20px; 
    width:fit-content;
    margin-left:auto;
    margin-right:auto;
  }

  .viewerCounterContainerDiv4War{
    background-color: transparent; 
    color:white;
    padding-left: 1rem;
    padding-right: 1rem;
    display:flex;
    flex-direction:row;
    gap:1rem; 
    justify-content:center;
    border:0px solid black;
    border-radius: 20px; 
    width:fit-content;
    margin-left:auto;
    margin-right:auto;
    position:relative;
    top:-90px;
  }


  .viewerCounterTitle{
    width:auto;
    text-align:center;
    font-size:3rem;
    height:4rem;
    line-height:4rem;
  }

  .viewerCounterAmount{
    width:auto;
    text-align:center;
    background-color: black; 
    color:white; 
    font-size:3rem;
    height:4rem;
    line-height:4rem;
    font-weight: bold;
  }

  .tempVersionNote{
    border:1px solid red; 
    width:80%;
    margin-left:auto;
    margin-right:auto;
    color:red;
    padding:1.5rem;
    text-align:right;
    font-size:3rem;
    font-family: Narkisim, Helvetica, sans-serif;
  }

  .titleAndButtonDiv{
    display:flex;
    flex-direction:row;
    gap:2rem;
    height:4rem;
    line-height: 4rem;
    font-size:3.5rem;
  }

  .titleAndButtonBtnDiv{
    height:4rem;
    line-height:4rem;
  }

  .titleAndButtonBtn{
    font-family: Narkisim, Helvetica, sans-serif ;
    padding-left:1rem;
    padding-right:1rem;
    background-color:black;
    color:white;
    font-size: 2rem;
    border-radius: 5rem;
  }

  .titleAndButtonBtn4War{
    font-family: Narkisim, Helvetica, sans-serif ;
    padding-left:1rem;
    padding-right:1rem;
    background-color:yellow;
    color:black;
    font-size: 2rem;
    border-radius: 5rem;
  }

  .alwaysHide{
    display:none;
  }

  .cardPack {
    height:10rem;
    border:1px solid green;
    width:100%;
    margin-left: auto;
    margin-right: auto;
  }

  .doubleCardPack {
    height:fit-content;
    border:0px solid green;
    width:60%;
    margin-left: auto;
    margin-right: auto;
    background-color: transparent;
  }

  .uperCardBackSide{
    background-image: url(./public/image/cardBackSide.jpg);
    background-repeat: no-repeat;
    width: auto;
    height: 10rem;
    background-size:cover;
  }

  .onGameCard{
    border:1px solid red;
    height:fit-content;
    min-height:10rem;
    width:100%;
    margin-left: auto;
    margin-right: auto;
  }

  
  .onDoubleGameCard{
    border:1px solid red;
    height:fit-content;
    width:100%;
    margin-left: auto;
    margin-right: auto;
  }

  .onDoubleSelfGameCard{
    border:0px solid red;
    height:fit-content;
    width:60%;
    margin-left: auto;
    margin-right: auto;
  }

  .invitationStatusLine{
    display: flex; 
    flex-direction:column-reverse;
    justify-content: right;
    gap:0.5rem;
    /* border-bottom: 2px solid black; */
    height:7rem;
    line-height:3.5rem;
  }

  .playerIdContaiverDivStyle{
    display: flex; 
    flex-direction:column;
    justify-content: right;
    gap:0.1rem;
    cursor: pointer;
    font-size:1.2rem;
  }

  .playerIdUpperContaiverDivStyle{
    display: flex; 
    flex-direction:column;
    justify-content: right;
    gap:0.0rem;
    font-size:1rem;
    text-wrap: wrap;
    width:3.5rem;
  }

  .playerListImage{
    margin-left:auto;
    margin-right:auto; 
    height: 3rem; 
    width:auto;
    border-radius: 3rem;
    border: 6px solid purple;
  }

  .gameListImage{
    margin-left:auto;
    margin-right:auto; 
    height: 4rem; 
    width:auto;
    border:2px solid black;
  }

  .gameUpperListImage{
    margin-left:auto;
    margin-right:auto; 
    height: 3rem; 
    width:auto;
    border:2px solid black;
    border-radius: 1rem;
  }


  .subGameListImage{
    margin-left:auto;
    margin-right:auto; 
    height: 5rem; 
    width:auto;
    border:3px solid black;
    border-radius: 1rem;
  }

  .playerRefreshListImage{
    margin-left:auto;
    margin-right:auto; 
    height: 2.5rem; 
    width:auto;
    cursor: pointer;
  }

  .playersPanelDiv{
    max-height: 51rem;
    overflow: scroll;
    padding-right:0.0rem;
    padding-left:0.0rem;
    padding-bottom:0.5rem;
    width:fit-content; 
    max-width:100%;
    min-width:100%;
    display: flex; 
    flex-direction:column;
    justify-content: right;
    gap:1rem;
    border:0px solid green;
    padding-top:0.5rem;
  }

  .gmaeListUpperPanelDiv{
    max-height: fit-content; 
    padding-bottom:0.5rem;
    width:100%; 
    min-width:95%;
    display: flex; 
    flex-direction:column;
    justify-content: right;
    gap:0.5rem;
    border:0px solid green;
    padding-top:0.7rem;
  }

  .presentedCardStyle{
    margin-top:0rem;
    text-align:center;
    width:100%;
    margin-left:auto;
    margin-right:auto;
    color:blue; 
    background-color:transparent;
    font-weight:bold;
    font-size:3rem;
  }

  .invitatedGameNameStyle{
    width:fit-content;
    text-align:right;
  }

  .actUserImageDivStyle{
    width:auto!important;
    line-height: 4rem; 
    height: 4rem; 
    max-height: 4rem;
  }

  .actUserImageStyle{
    width:auto; 
    height: 4rem; 
    max-height: 4rem;
    border-radius:1rem;
  }

  .invitatedStatusUpperLine{
    width:100%;
    display: flex; 
    flex-direction:row;
    justify-content: right;
    gap:0.5rem;
    height:4rem;
    line-height: 4rem;
  }

  .activeCardTableContainerStyle{
    display:flex;
    flex-direction: column;
  }

  .localWinStatusDiv{
    width:50%; 
    margin-left:auto;
    margin-right:auto;
    display:flex;
    flex-direction: column-reverse;
    padding-top:1rem;
    font-size:2rem;
  }

  .selectedGameSize{
    border:2px solid green;
    background-color:green;
    color:white;
    padding-right:0.5rem;
    padding-left:0.5rem;
    font-size:2rem;
    font-weight:bold;
    border-radius: 16px;
    height:2rem;
    line-height:2rem;
    text-align:center;
  }

  .nonSelectedGameSize{
    border:2px solid black;
    background-color:white;
    color:black;
    padding-right:0.5rem;
    padding-left:0.5rem;
    font-size:3rem;
    font-weight:normal;
    border-radius: 16px;
    height:2rem;
    line-height:2rem;
    text-align:center;
  }

  .selCardsAmount{
    cursor: pointer;
    font-size:1.5rem;
  }

  .scoreReportContainer{
    margin-top:0rem;
    width:95%;
    margin-left:auto;
    margin-right:auto;
    border:2px solid red;
    display:none;
    text-align:center;  
  }

  .gameLayeoutContainerDiv{
    display: flex;   
    flex-direction: column-reverse; 
    width:100%;
  }

  .doubleRemoteCardContainedDiv{
    width:100%; 
    margin-left: auto; 
    margin-right: auto;
    text-align: center;
  }

  .playAreaContainerTitleDiv{
    border:2px solid black;
    background-color: aquamarine ;
    color:black;
    text-align:center;
    display:flex;
    flex-direction:row;
    gap:1rem;
    justify-content: center;
    width:100%;
    font-size:2.5rem;
  }

  .playersNameContainerDiv{
    width:100%;
    margin-left:auto;
    margin-right:auto;
    display: flex;
    flex-direction: row; 
    gap:0rem; 
    border:2px solid black;
    font-size:1.5rem;
  }

  .remoteCardContainedDiv{
    width:95%; 
    margin-left: auto; 
    margin-right: auto;
  }

  .localCardContainedDiv{
    width:95%; 
    margin-left: auto; 
    margin-right: auto;
  }

  .localQImageImg{
    width:60px;
    height:60px;
    margin-left:auto;
    margin-right:auto; 
  }

  .powerIcon{
    height:60px;
    width:60px;
  }

  .slogan{
    text-align:center;
    font-size:1.5rem;
    color:white;  
  }

  .game1RemotePlayerContainerDiv{
    background-color:bisque;
    /* padding-left:1rem;
    padding-right:1rem; */
    direction:rtl;
    width:100%;
    margin-left:auto;
    margin-right:auto;
    display: flex;
    flex-direction: column; 
    gap:0rem; 
    border:2px solid black;
  }

  .actCardStockContainerTemp{
    width:100%; 
    margin-left:auto;
    margin-right:auto;
    height: 1px;
  }

  .localPlayerScoreDiv{
    text-align:center;
    width:20%;
    font-size:2rem;
    min-width:fit-content;
    font-size: 1.7rem;
    line-height: 2rem;
    height: 2rem;
    padding-top: 0.3rem;
  }

  .allPlayerCotainerDiv{
    font-size:2rem; 
    display: flex; 
    flex-direction:row-reverse;
    justify-content: right;
    gap:1rem;
    flex-wrap: wrap;
    margin-right:2rem;
  }

  .invitationActions{
    width:100%;
    display: flex; 
    flex-direction:column-reverse;
    justify-content: center;
    gap:0rem;
  }

  #actPlayersPanelDiv  .titleLineDiv   , #gmaeListPanelDiv  .titleLineDiv , #resPlayersPanelDiv   .titleLineDiv {
    display:none; 
  }
   

  .scoreContanerDiv{
    display:none;
    flex-direction:row;
    width:100%;
    justify-content: right;
    gap:1rem;
  }

  .div90flexcolumn{
    width: 90%;
    margin-left:auto;
    margin-right:auto;
    display:flex;
    flex-direction:column; 
  }

  .div90flexrowright{
    width: 90%;
    display:flex;
    flex-direction:row; 
    justify-content: right;
  }

  .div100flexcolumn{
    width: 100%;
    display:flex;
    flex-direction:column; 
  }

  .div50flexcolumn{
    width:50%;
    margin-left: auto;
    margin-right: auto;
    display:flex;
    flex-direction:column; 
  }

  .div100flexrowright{
    width: 100%;
    display:flex;
    flex-direction:row; 
    justify-content: right;
  }

  .div100flexrowcenter{
    width: 100%;
    display:flex;
    flex-direction:row; 
    justify-content: center;
  }

  .div100flexrowreversecenter{
    width: 100%;
    display:flex;
    flex-direction:row-reverse; 
    justify-content: center;
  }

  .div90flexrowcenter{
    width: 90%;
    margin-left:auto;
    margin-right:auto;
    display:flex;
    flex-direction:row; 
    justify-content: center;
  }

  .loginUserTypeBtnDiv{
    width:90%;
    margin-left: auto;
    margin-right: auto;
    display:flex;
    flex-direction:column; 
  }

  .mainTabStyle{
    width:5.2rem;
    min-width:5.2rem;
    font-size:1.25rem;
    font-weight:bold;
    color:black;
    text-align:center;
    border-left:0px solid black;
    border-top:0px solid black;
    border-right:0px solid black;
    border-radius: 8px 8px 0px 0px;
    background-color: white;
    cursor: pointer;
    margin-left:0.3rem;
    margin-right:0.0rem;
  }

  .mainTabStyleSelected{
    background-color:aquamarine;  /*lightblue; */
  }

  .optionsTabStyleSelected{
    background-color:lightblue; 
  }

  .mainTabStyleNotSelected{
    background-color: lightGray;
    border-bottom:1px solid black;
  }

  .blurIt{
    filter: blur(0px);
  }
  
  /* *******************  inage flip 3d *********************************** */

.flip-box {
  background-color: transparent;
  width: 80px;
  height: 80px;
  border: 1px solid #f1f1f1;
  perspective: 1000px;
  background-image:url("../image/winningSmall.png") ;
  background-size: contain;  
}

.flip-box-trivia {
  background-color: transparent;
  width: 150px;
  height: 150px;
  border: 1px solid #f1f1f1;
  perspective: 1000px;
  background-image:url("../image/winningSmall.png") ;
  background-size: contain;  
}



.flip-box-front {
  background-color:lightgreen ;/* #bbb; */
  color: black;
  font-size:4rem; 
  font-weight:bold;
  height:80px;
  line-height:110px;
}

.flip-box-front-trivia {
 
  font-size:4rem; 
  font-weight:bold;
  height:150px;
  line-height:110px;
}

.flip-box-front-trivia-QM {
  background-color:red ;/* #bbb; */
  color: white;
}

.flip-box-front-trivia-ANS {
  background-color:lightgreen ;/* #bbb; */
  color: black;
}

  /* *******************  inage flip 3d *********************************** */


  .picGroupStyle {
    cursor:pointer;
    border:0px solid black; 
    height:fit-content; 
    background-color:transparent;
    width:60%;
    margin-left: auto;
    margin-right: auto;
  }

  .picGroupStyle1111:hover  .gameListImage {
    filter: blur(0px)!important;
  }

  .picGroupStyle:hover {
    border:5px solid yellow;
    border-radius: 1rem;
    overflow:hidden;  
  }

  .picSelectedGroupStyle {  
    border:5px solid yellow;
    border-radius: 1rem;
    overflow:hidden;   
  }

  .gameOptionsTabsContainerDivStyle{
    width:100%;
    border-bottom:0px solid black;
    margin-left: auto;
  } 

  .approveInvitedGameDiv{
    width:100%;
  }

  .regMessageDivStyle{
    display:flex;
    flex-direction:row;
    gap:1.0rem;
    font-size:2rem;
    text-align:right;
    margin-bottom:0.0rem;
    width:95%;
    justify-content:right;
    font-size:1.5rem;
  }

  .regNewMemberPwdMessageStyle{
    width:25rem;
    text-align:right;
    font-size:1.5rem;
    text-align:right;
    margin-right:5rem;
    color:red;
    font-weight:bold; 
  }

  .regMemberItemsDivStyle{  
    display:flex;
    flex-direction:row;
    gap:1.0rem;
    font-size:2rem;
    text-align:right;
    margin-bottom:0.0rem;
    width:95%;
    justify-content:right;
  }

  .regMemberItemsInputDivStyle{
    text-align:right;
    width:50%;
    font-size:1.5rem;;
   } 

   .regMemberItemsInputDivContainerStyle{
    display:flex;
    flex-direction:row;
    gap:1.0rem;
    font-size:2rem;
    text-align:right;
    margin-bottom:0.0rem;
    width:95%;
    justify-content:right;  
  }

  .imageAssignContainerDiv{
    display:flex;
    flex-direction:row;
    gap:1.0rem;
    font-size:2rem;
    text-align:right;
    margin-top:1.0rem;
    margin-bottom:0.0rem;
    width:95%;
    justify-content:right;
  }

  .imageAssignDetailsContainerDiv  {
    display:flex;
    flex-direction:column-reverse;
    gap:1.0rem;
    justify-content:right;
    text-align:right;
    width:50%;
    font-size:1.5rem;
  }

  .imageFileAssignDetailsContainerDiv { 
    margin-right:1rem; 
    height: 4rem; 
    line-height: 4rem;
    display: flex;
    flex-direction: row;
    justify-items: normal;
    gap:0.2rem;
  }

  .imageFileAssignDetailsDiv { 
    width:4rem;
    height:4rem ;
    border-radius:20px;
    background-color:white;
    border:1px solid black;
    z-index:1;
    position:relative;
    left:3rem;
  }

  .regPlayerImageCB{
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }

  .game1PlayersContainerDiv{
    width:100%;
    margin-left:auto;
    margin-right:auto;
    display: flex;
    flex-direction: row; 
    gap:0rem; 
    border:2px solid black;
  }

  .isNotActiveImage{
    background-color:lightgray!important;
  }

  .isActiveImage{
    background-color:black!important;
    border-radius:0px 0px 10rem 10rem;
  }

  .resPlayerImageContainerDivStyle{
    width:10%;
  }

  .currActPlayerImage{
    border-color: yellow!important;
  }
  
  .adminAddFamilyRecords{
    display:flex;
    flex-direction:column-reverse;
    gap:0.2rem;
    font-size:1.5rem;
    text-align:right;
    margin-bottom:0.0rem;
    width:95%;
    justify-content:right; 
  }
  
  .adminAddFamilyRecordsTitle{ 
    display:flex;
    flex-direction:row;
    gap:1.0rem; 
    width:100%;
    justify-content: right;
  }

  .adminAddFamilyRecordsIndex{
    display:flex;
    flex-direction:row;
    gap:1.0rem; 
    width:80%;
    justify-content: right;
    background-color: white;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }

  .adminAddFamilyRecordsNumCards{
    display:flex;
    flex-direction:column-reverse;
    gap:1.0rem; 
    width:80%;
    justify-content: right;
    background-color: transparent;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
    text-align: right;
  }

  .startAsGuest{
    cursor:pointer;
    height:3rem;
    line-height:3rem;
  }

  .startAsGuest:hover {
    text-decoration: underline;
  }

  .go2Registr{
    cursor:pointer;
    height:3rem;
    line-height:3rem;
  }

  .go2Registr:hover {
    text-decoration: underline;
  }

  .go2Login{
    cursor:pointer;
    height:3rem;
    line-height:3rem;
  }

  .go2Login:hover {
    text-decoration: underline;
  }

  .noUserOptSel{
  background-color: black;
  color:white;
  }

  .noUserOptNotSel{
    background-color: white;
    color:black;
  }

  
  .elemFullSize{
    width:100%;
  }
  
  .gameTypeListContainerSmallSize{
    width:20%;
    margin-left: auto;
    margin-right: 0rem;
  }

  #option1TitleDiv.aboutPageTitleDiv{
    display:none;
  }
 

  .startGameImage{
    margin-left:auto;
    margin-right:auto; 
    height: 5rem; 
    width:auto;
    border:6px solid transparent;
  }

  .game1CardsContainerDiv{
    width:100%;
    margin-left:auto;
    margin-right:auto;
    display: flex;
    flex-direction: row; 
    gap:0rem; 
    border:2px solid black;
  }

  .triviaCardsAmountDiv {
  display:flex;
  flex-direction:row; 
  justify-content: center;
  gap:0.5rem;
  width:100%; 
  margin-left:auto;
  margin-right:auto;
  background-color:yellow;
  font-size: 1.2rem;
  color:black;
  font-weight: bold;;
  }

  .memGameText4Image{
    border-radius:1rem;
    width:100%;
    height:4rem;
    line-height:2rem;
    font-size:1.3rem;
    font-weight:bold;
    color:black;
  }

  .adminAddMemebrTitleStyle{
      display:flex;
      flex-direction:row;
      gap:1.0rem;
      font-size:1.5rem;
      text-align:right;
      margin-bottom:0.0rem;
      width:95%;;
      justify-content:right;
    }

  .headerUserSettingStyle{
    cursor: pointer;
    width:40%;
    height: 3rem;
    line-height:3rem;
    max-height: 12rem;
    margin-top: 0rem;
    margin-bottom: 0rem;
    text-align:left; 
  }


  .headerLoginTextDivStyle{
    padding-right:1rem; 
    color:red;
    font-size:2rem;
    height:3rem; 
    line-height: 3rem;
    text-align:left;
    width:4rem;
    background-color: rgb(224, 229, 233);
  }

  .userGameIDStyle{
    background-image: linear-gradient(to bottom, white, gray);
    cursor:pointer;
    color:white;
    padding-top:0.5rem;
    padding-right:0.5rem;
    width:95%;
    margin-right:auto;
    margin-left:auto;
    text-align:right;
    border-bottom:1px solid black;
    font-size: 1.5rem;
  }

  .userGameIDBtnStyle{
    background-image: linear-gradient(to bottom, white, gray);
    cursor:pointer;
    color:white;
    padding-top:0.5rem;
    padding-right:0.5rem;
    width:90%;
    margin-right:auto;
    margin-left:auto;
    text-align:center;
    border-bottom:1px solid black;
    font-size: 2rem;
    border-radius: 1rem;
  }

  .userGameIDStyleNotSelected{
    background-image: linear-gradient(to bottom, white, gray);
  }

  .userGameIDStyleSelected{
    background-image: linear-gradient(to bottom, white, blue);
  }

  #triviaGameLevelOpesContaner{
    width: 100%;
    display:flex;
    flex-direction:column; 
    justify-content: center;
    gap:0.4rem;
  }

  #triviaProblemLevelOpesContaner{
    width: 100%;
    display:flex;
    flex-direction:column-reverse; 
    justify-content: center;
    gap:0.4rem;
  }

  #triviaProblemLevelOpesDivContaner{
    width:100%;
    gap:1rem;
  }

  #userOwnGamesNameTitle{
    text-align:right;
    width:100%;
    font-weight:bold;
    margin-bottom:0.5rem;
  }

   #userOwnGamesNameList{
    text-align:right;
    width:90%;
    margin-left:auto;
    margin-right: auto;
    font-weight:bold;
    margin-bottom:0.5rem;
  }

  #responseTitleLineContainerDiv{
    width: 100%;
    display:flex;
    flex-direction:column-reverse; 
    justify-content: right;
    padding-top:1rem;    
  }


}



/* ************************************** */
@media screen and (min-width: 641px) and (max-width: 1000px)  {
 
  
    
body {
  background-color: whitesmoke;
  font-family: sans-serif;
  font-size: 1rem;
  width: 99%;
  margin-left: 1%;
  margin-right: 1%;
  margin-top: 0px;
}

      
  #logoImage , #homeImage{
    cursor: pointer;
  }

  .headerTab {
    flex: 0.5;
    font-size: 2.5rem;
    text-align: center;
    background-color: white;
    padding: 0.5rem;
    cursor: pointer;
    height: 2.5rem;
    line-height: 2.5rem;
    width:90%;
  }


  .headerHomeTab {
    flex: 0.02;
    font-size: 1.1rem;
    text-align: center;
    background-color: white;
    padding: 0.5rem;
    cursor: pointer;
    display:none;
  
  }

  .headerLoginTab {
    flex: 0.06;
    font-size: 2rem;
    text-align: center;
    background-color: white;
    padding: 0.5rem;
    cursor: pointer;
    height: 2rem;
    line-height: 2rem;
    display:none;
  }

  .headerTabSpacer {
    flex: 1;
    font-size: 2rem;
    font-weight: bold;
    text-align: right;
    text-align: center;
    display: none;

  }


  .mobileMenueContainerDiv{
  display:flex;
  flex:0.1;
  margin-left:2rem;
  }

  .mobileAddNewContainerDiv{
    display:none;
  }

  .pointsReportTitleDiv {
    margin-top: 0rem;
    margin-bottom: 0.5rem;
    padding-top: 0rem;
    padding-bottom: 0rem;
    display: flex;
    flex-direction: row;
    width: auto;
    align-items: center;
    justify-content: right;
    gap: 1rem;
    row-gap: 2rem;
    column-gap: 2rem;
    padding-left: 2rem;
    padding-right: 2rem;
    height:3.5rem;
    line-height:3.5rem;
    font-size:3rem;
  }
  
  .infoText{
    font-size:2.5rem;
  }

  .headerMainDiv {
    margin-top: 0rem;
    margin-bottom: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 1rem;
    display: flex;
    flex-direction: column-reverse;
    width: auto;
    align-items: center;
    justify-content: right;
    gap: 1rem;
    row-gap: 0.3rem;
    column-gap: 2rem;
    padding-left: 2rem;
    padding-right: 2rem;
    flex:0.9;
  }
  
  


  .headerMainTitle {
    flex: 1;
    font-size: 2rem;
    font-weight: bold;
    text-align: right;
    text-align: center;

  }



  .titleLineDiv {
    text-align: right;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: normal;
    color:black;
  }
  
  .responseTitleLineDiv {
    text-align: center;
    /*  display: flex; */
    justify-content: center;
    font-size: 2rem;
    font-weight: normal;
    height:2rem;
    line-height:2rem;
  }

  #responseTitleLineDiv {
    text-align: center;
    /*  display: flex; */
    justify-content: left;
    font-size: 2rem;
    font-weight: normal;
    height:11rem;
    line-height:2rem;
    width: 100%;
    display:flex;
    flex-direction:column-reverse; 
  }


  .headerMessageDiv {
    font-size: 1.7rem;
    direction: rtl;
    text-align: right;
    background-color: whitesmoke;
    padding-top: 1rem;
  }

  .listStyle {
    list-style-type: disc;
    margin-top: 0rem;
  }

  .loginContainerDiv1111 {
    z-index: 999;
    width: 90%;
    height: 1200px;
    background-color: gray;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
  }

  .loginContainerDiv{
    display: flex; 
    flex-direction:column;
    justify-content: right;
    gap:1rem;
    width:100%;
  } 

  .loginContainer{
    display:flex;
    flex-direction: column-reverse ;
    justify-content:right;
    gap:1rem;
  }

  .loginFormDiv {
    width: 90%;
    height: 1100px;
    margin-left: 50px;
    margin-right: 50px;
    margin-top: 50px;
    margin-bottom: 50px;
    background-color: white;
  }


  .cancelLoginDiv {
    padding-right: 2rem;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-size: 2.5rem;
    font-weight: bold;
    height: 3rem;
    line-height: 3rem;
    padding-top:1rem;
  }
  
  
  .cancelLoginBtn {
    float: right;
    width: 1rem;
    cursor: pointer;
    height: 3rem;
    line-height: 3rem;
    font-size: 2.5rem;
  }


  .inputFieldErrorMsg {
    margin-top: 5px;
    margin-right: 2rem;
    width: 80%;
    text-align: right;
    font-size: 2.5rem;
    margin-right: auto;
    margin-left: auto;
    color: red;
  }

  .loginTitle {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding-top: 1.5rem;
    padding-bottom: 2rem;
    font-size: 2.5rem;
    font-weight: bold;
  }


  .loginFormInputDiv {
    margin-top: 20px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    float: none!important;
    display: flex;
  }

  .loginFormInput {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0rem;
    text-align: right;
    font-size: 3rem;
    height:4.5rem;
    line-height:4.5rem;
    padding-right: 0rem;
    background-color: lightgray;
  }

  .loginFormInput::placeholder {
    font-weight: 200;
    font-size: 2.3rem;
    opacity: 0.8;
    color: black;
}

  .loginFormTextArea {
    width: 80%;
    text-align: right;
    font-size: 1.5rem;
    line-height: 2rem;
    padding-right: 1rem;
    margin-left: auto;
    margin-right: auto;
    background-color: lightgray;
  }

  .loginButtonDiv {
    display: flex;
    justify-content: center;
  }


  .loginButton {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    font-size: 3rem;
    border-radius: 6px;
    border: 4px solid rgb(215 216 216);
    padding: 0.3rem;
    cursor: pointer;
  }

  #userNameDiv, 
  #contactUsMessageDiv, 
  #isRegDiv {
    display: flex;
    flex-direction: column;
  }

  #isRegInputContainer{
    justify-content:right;  
    width:80%;  
    font-size:2.5rem;
  } 

  input.larger {
      width: 2.5Rem;
      height: 2.5rem;
      border: 3px solid black;
  }



  .footerMainDiv {
    display: flex;
    flex-direction: row;
    width: auto;
    align-items: center;
    justify-content: right;
    gap: 1rem;
    row-gap: 2rem;
    column-gap: 2rem;
    padding-left: 2rem;
    padding-right: 2rem;
  }

  #footerContainer {
    position: fixed;
    bottom: 0;
    width: 90%;
    background-color: lightblue;
    display:none;
  }

  .footerTab {
    flex: 1;
    font-size: 2rem;
    text-align: center;
    background-color: white;
    padding: 0.5rem;
    cursor: pointer;
  }

  #footerMainDiv {
    margin-top: 1rem;
    padding-top: 0rem;
    padding-bottom: 1rem;

  }

  .footerTabSpacer {
    flex: 1;
    font-size: 2rem;
    font-weight: bold;
    text-align: right;
    text-align: center;
    display: block;

  }


  .sodukuBG {
    width: 80%;
    height: auto;
    margin-top: 3rem;
  }


  #tableSizeDiv,
  #gameTypeSelectionDiv,
  #difficultyDiv,
  #sodukuSizeDiv,
  #selectModeDiv {
    font-size: 1.5rem;
    font-weight: bold;
    display: flex;
    flex-direction: column-reverse;
    gap: 0.5rem;
  }

 
  #allNameSelectionDiv {
    font-size: 1.5rem;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  #nameTypeDiv {
    font-size: 1.5rem;
    font-weight: bold;
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
  }

  .moreNameButtonTitle{
    width:32rem;
    line-height:3rem;
    padding-top:0.5rem;
  }

  #sodukuSerialNumDiv {
    font-size: 1.5rem;
    font-weight: bold;
    display: flex;
    flex-direction: column-reverse;
    justify-content: center; 
    align-content:center; 
    gap:2rem;
  }
    
  

  .gameTypeSelectionDiv {
    column-gap: 1rem;
  }

  .sodukuGameTypeButtonDiv {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    font-size: 3rem;
    margin-bottom:1rem;
  }

  #mokirFiltersPage:hover{
      background-color: gray;
      color:white!important;
  }

  #mokirAbout:hover{
    background-color: gray;
    color:white!important;
  }

  .nameInfoActionButton1111:hover{
    background-color: gray;
    color:white!important;
  }

  .mokirTypeButtonDiv {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    font-size: 3rem;
    margin-bottom:1.5rem;
  }

  .nameTypeInfoDiv{
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    font-size: 3rem;
    margin-bottom:1.5rem;
    color:white;
  }

  .nameInfoActionButtonDiv {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    font-size: 3rem;
    margin-bottom:1.5rem;
    text-align: center;
  }

  .mokirNameInfoActionButtonDiv {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    font-size: 3rem;
    margin-bottom:1.5rem;
    text-align: center;
  }


  .gameTypeButton {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    font-size: 3.5rem;
    border-radius: 6px;
    border: 4px solid black; /* rgb(215 216 216); */
    padding: 0.3rem;
    cursor: pointer;
  }

  
  .nameOptionsL1Button {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    font-size: 4.5rem;
    border-radius: 6px;
    border: 4px solid black; /* rgb(215 216 216); */
    padding: 0.3rem;
    cursor: pointer;
    background-color: #afd8e5;
    background-image: linear-gradient(#ff00006e, yellow,#ff00006e);
    color:black;
  }

  .nameOptionsL1Button:hover {
    background-image: linear-gradient(#ff00006e, yellow);
  }


  .backTypeButton{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    font-size: 3.5rem;
    border-radius: 6px;
    border: 4px solid rgb(215 216 216);
    padding: 0.3rem;
    cursor: pointer;
  }


  .nameInfoActionButton {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    font-size: 4rem;
    border-radius: 6px;
    border: 4px solid black; /*rgb(215 216 216); */
    padding: 0.3rem;
    cursor: pointer;
    background-image: linear-gradient(#ff00006e, yellow,#ff00006e);
  }

  .nameInfoActionButton:hover {
    background-image: linear-gradient(#ff00006e, yellow);
  }

  .nameInfoActionButtonWidth{
    width:90%;
  }

  .mokirNameInfoActionButton {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    font-size: 3.5rem;
    border-radius: 6px;
    border: 4px solid black; /*rgb(215 216 216); */
    padding: 0.3rem;
    cursor: pointer;
    background-image: linear-gradient(#ff00006e, yellow,#ff00006e);
  }

  .mokirNameInfoActionButton1111:hover{
    background-color: gray!important;
    color:white!important;
  }

  .mokirNameInfoActionButton:hover {
    background-image: linear-gradient(#ff00006e, yellow);
  }

  .sodukuGameModeButtonDiv {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    font-size: 3rem;
  }

  .sodukuGameModeButton {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    font-size: 3rem;
    border-radius: 6px;
    border: 4px solid rgb(215 216 216);
    padding: 0.2rem;
    margin-bottom:1rem;
  }


  #modeContinueDivContainer{
    display:flex; 
    flex-direction:column;
  }   

  #modeContinueOptinsDiv{
    display:flex; 
    flex-direction:column-reverse; 
    gap:1rem ; 
    margin-top:1.5rem ; 
    justify-content:center ;
  } 

  #modeAutoSaveContinueOptinsDiv{
    display:flex; 
    flex-direction:column-reverse; 
    gap:1rem ; 
    margin-top:1.5rem ; 
    justify-content:center ;
    width:100%;
    margin-left:auto;
    margin-right:auto;
  } 


  .sodukuSizeButtonDiv {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    font-size: 3rem;
    margin-bottom:1rem;
  }


  .sodukuSizeButton {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    font-size: 3rem;
    border-radius: 6px;
    border: 4px solid rgb(215 216 216);
    padding: 0.2rem;
  }


  .sodukuDifficultyButtonDiv {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    font-size: 3rem;
    margin-bottom:1rem;
  }


  .sodukuDifficultyButton {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    font-size: 3rem;
    border-radius: 6px;
    border: 4px solid rgb(215 216 216);
    padding: 0.2rem;

    display: flex;
    flex-direction: row;
    justify-content: center;

  }


  .sodukuTable {
    margin-left: auto;
    margin-right: auto;
    margin-top: 2rem;
    width: 95%;
  }

  .sodukuTDInput {
    background-color: yellow;
    height: 3.0rem;
    width: 100%;
    font-size: 2.3rem;
    font-weight: bold;
    text-align:center;
  }

  .squareBG_1 {
    background-color: yellow;
    color: black;
    font-weight:normal;
    padding:0px!important;
  }

  .squareBG_0 {
    background-color: lightblue;
/*    color: white; */
    color: black;
    font-weight:normal;
    padding:0px!important;
  }

  .squareBG_3 {
    background-color: black;
    color: black;
    width: 4rem;
    height: 3.5rem;
    border-radius: 10px;
  }

  .squareBG_selected {
    background-color: white;
    color: black;
    width: 4.5rem;
    height: 3.5rem;
    border-radius: 10px;
    padding:0px;
  }


  .kbItem{
    width:5.2rem;
    height:5rem;
    line-height:5rem;
    font-size:4rem;
    font-weight: normal;
    background-color: white;
    border-radius: 8px;
  }

  .sodukuSerialNumButtonDiv {
    width: 90%;
    font-size: 3rem;
    margin-left: auto;
    margin-right: auto;
  }


  .sodukuSerialNumButton {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    font-size: 3rem;
    border-radius: 6px;
    border: 4px solid rgb(215 216 216);
    padding: 0.2rem;

  }

  #statusMessageDiv {
    display: flex;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    font-size: 2rem;
    background-color: white;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-top: 0.6rem;
  }

  #statusAutoSaveDiv {
    display: flex;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    font-size: 3.0rem;
    background-color: white;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-top: 0.6rem;
  }

  .sodukuSolveButtonDiv {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1rem;
    font-size: 3rem;
    display: flex;
    gap: 1rem;
  }

  .sodukuSolveButton {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    font-size: 3rem;
    border-radius: 6px;
    border: 4px solid rgb(215 216 216);
  }

  #specificGameDiv {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column-reverse;
  }

  .sodukuNameSelDiv {
    margin-right: 1Rem;
    height: 40px;
    line-height: 40px;
    font-size: 3rem;
  }


  .sodukuNameSel {
    font-size: 3rem;
    width: 50%;
    text-align: right;
  }

  .pointsCalcInfoContainerDiv {
    z-index: 999;
    width: 90%;
    height: 1200px;
    background-color: white;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    border: solid black 2px;
  }

  .pointsCalcInfoDiv {
    width: 100%;
    height: 1100px;
    background-color: white;
  }


    

  #selectSpecificGameDiv {
    display: flex;
    justify-content: center;
    margin-right: 0rem;
    flex-direction: column;
    width: 100%;
  }


  .optionsContainer{
    display:flex; 
    flex-direction: column;
    display:none; 
    overflow-y:scroll; 
    height:60rem; 
    width:100%;
    border: 2px solid black;
    background-color: lightgray;
  }


  .underContainer {
    position: relative;
    width: 90%;
    margin-right:auto;
    margin-left:auto;
    height: 3rem;
    border: 0px solid #73AD21;
    background-color: red;
  }

  .upperContainer {
    position: absolute;
    top: 0px;
    right: 0;
    width: 100%;
    height: 3rem;
    font-size:2.5rem;
    border: 0px solid #73AD21;
    background-color:  yellow;  /* transparent; */
  }


  .optionItem{
    height:4rem;
    line-height:4rem;
    font-size:2.8rem;
    padding:0.2rem;
    padding-right: 1rem;
    border:1px solid black;
    width:97%;
    text-align:right;
    background-color: white;
    margin-left:auto;
    margin-right:auto;
    background-color: lightgray;
  }

  #headerWelcomeMessageDiv{
    color:red;
    font-size: 3.5rem;
    font-weight:bold;
    padding-top: 4rem;
    padding-bottom: 2rem;
    padding-right: 0rem;
    text-align:center;
  }

  .lastSelCell{
    background-color:gray;
    border-radius:50px;
  }

  .waitImage {
    width:auto;
    height:80px;
  } 

  #proposalsDiv1 ,   #sProposalsDiv1 ,   #sProposalsDiv3{
    background-color:#8aabe5;
    color:white;
    width: 90%; 
    margin-left:auto; 
    margin-right:auto;
    display: flex; 
    flex-direction:row; 
    justify-content: center; 
    font-size:3rem;
  }

  #mProposalsDiv1 {
    background-color:#8aabe5;
    color:white;
    width: 90%; 
    margin-left:auto; 
    margin-right:auto;
    display: flex; 
    flex-direction:row; 
    justify-content: center; 
    font-size:4rem;
  }

  #proposalsDiv2  ,#sProposalsDiv2   {
    background-color:#8aabe5;
    color:white;
    width: 90%; 
    margin-left:auto; 
    margin-right:auto;
    display: flex; 
    flex-direction:row; 
    justify-content: center; 
    font-size:3rem;
  }

  #mProposalsDiv2 , #mProposalsDiv3 {
    background-color:#8aabe5;
    color:white;
    width: 90%; 
    margin-left:auto; 
    margin-right:auto;
    display: flex; 
    flex-direction:row; 
    justify-content: center; 
    font-size:4rem;
  }


  #screenProposalsContainerDiv{
    display: none;
  }

  #mobileProposalContainer{
    width: 90% ;
    display: flex; 
    flex-direction:column;
    justify-content: center; 
    margin-left:auto;
    margin-right:auto;
  }


  .aboutOptionItemDiv{
    width:60%;
    margin-right:15%;
    float: right;
    display:flex;
    flex-direction:row; 
    justify-content: right;
  }


  .aboutOptionText{
    margin-right:1rem;
    font-size:2.5rem;
    font-family: Narkisim, Helvetica, sans-serif;  
    font-weight:normal;
    cursor:pointer;
  }

  .aboutOptionText:hover {
    color:red;
  }

  .aboutOptionItemDiv{
    width:90%;
    margin-right:15%;
    float: right;
    display:flex;
    flex-direction:row; 
    justify-content: right;
  }

  .aboutPageTextLogo{
    color:#FFE699;
    width: 30%; 
    margin-left:0rem; 
    margin-right:3rem ;
    display: flex; 
    justify-content: center; 
    font-size:2rem;
    font-family: Narkisim, Helvetica, sans-serif; 
    height:6rem; 
    line-height:3rem; 
    font-weight:normal;
  }

  .aboutItemPageTitleText{
    background-color:#FFE699;
    border:1px solid black; 
    border-radius:1rem;
    padding-right:1rem; 
    padding-left:1rem;
    width: auto; 
    margin-left:auto; 
    margin-right:auto; 
    display: flex; 
    justify-content: center; 
    font-size:3rem;
    font-family: Narkisim, Helvetica, sans-serif; 
    height:6rem; 
    line-height:6rem; 
    font-weight:normal;
  }

  .aboutInfoText{
    color:black; 
    font-size:2rem; 
    width:95%;
    margin-left:auto;
    margin-right:auto;
    text-align:right;
    font-family: Narkisim, Helvetica, sans-serif;
  }

  .lpAboutInfoText{
    color:black; 
    font-size:3.0rem!important; 
    width:100%;
    margin-left:auto;
    margin-right:auto;
    text-align:right;
  }

  .aboutHowToInfoText{
    color:black; 
    font-size:2rem; 
    width:100%;
    margin-left:auto;
    margin-right:auto;
    text-align:right;
  }

  .aboutPageTitleDiv{
    width: 100%;
    display:flex;
    flex-direction:row; 
    justify-content: center; 
  }


  .aboutLPageTitleDiv{
    width: 70%;
    display:flex;
    flex-direction:row; 
    justify-content: center; 
  }

  .aboutBackBtn{
    background-color:#C5E0B4; 
    color:brown;
  } 

  .aboutWhoNeedInfoText{
    color:black; 
    font-size:2rem; 
    width:100%;
    margin-left:auto;
    margin-right:auto;
    text-align:right;
    font-family: Narkisim, Helvetica, sans-serif;
  }


  .aboutCheckBox{
    cursor:pointer;
    width:1rem;
    height:1rem;
    border:1px solid black;
    box-shadow: 3px 3px 1px black;
    position: relative;
    top: 8px; 
  }

  .aboutCheckBox:hover{
    border:2px solid black;
    box-shadow: 3px 3px 1px red;
  }

  .modalContainder{
    font-size:2rem;
    z-index:9998; 
    position:absolute; 
    top:5%; 
    left:0%;
    border:2px solid black; 
    width:100%; 
    background-color: white;
    padding:0rem;
    padding-top:1rem;
    display:flex;
    flex-direction: column;
    height:108rem;
  }

  .modalMessageContainder{
    font-size:3rem;
    z-index:9999; 
    position:absolute; 
    top:0%; 
    left:0%;
    border:2px solid black; 
    width:100%; 
    background-color: white;
    padding:0rem;
    padding-top:1rem;
    display:flex;
    flex-direction: column;
    height:100rem;

    background-color:transparent;
    height:90rem;
  }


  .modalItemsContainder{
    font-size:2rem;
    /*
    z-index:9999; 
    position:absolute; 
    top:30%; 
    left:35%;
    border:2px solid black; 
    width:30%; 
    background-color: white;
    padding:0rem;
    padding-top:1rem;
    */
    display:flex;
    flex-direction: column;
  }

  .listItemContainder{
    display:flex; 
    flex-direction:row; 
    justify-content:right; 
    margin-bottom:2px;
    margin-top:2px;
    padding-right:1rem;

    font-size:2.5rem; 
    line-height:2.5rem; 
    font-weight:bold; 
  }


  .listCB{
    width:1.5rem;
    height:1.5rem;
    border-width:5px;
  }

  .mokirListCB{
    width:2rem;
    height:2rem;
    border-width:5px;
    font-size:2rem; 
    line-height:2rem;
    border-radius:50%;
  }

  .mokirListCBDiv{
    position:relative; 
    top:0.2rem; 
    height:2rem; 
    width:5rem;
    line-height:2rem;
    text-align:center;
  }  

  .mokirListText{
    font-size:2rem;
    height:3rem; 
    line-height:3rem;
    width:auto; 
    margin-right:1rem;
    margin-left:1rem; 
    text-align:right;
  }


  .mokirListItemContainder1111{
    font-size:1.5rem;
    height:2rem; 
    line-height:2rem;
    font-weight:normal;
    font-family: Narkisim, Helvetica, sans-serif; 
    background-color:lightblue ;
    color:black;
  }

  .mokirListItemContainder{
    display:flex; 
    flex-direction:row; 
    justify-content:right; 
    margin-bottom:2px;
    margin-top:2px;
    padding-right:0rem;
    font-size:2.5rem;
    }


  .aboutUsItemLPage{
    width:80%;
    margin-left:auto;
    margin-right:auto;
    background-color: lightgray;
  }

  .gameContainerDiv{
    width:95%;
    margin-left:auto;
    margin-right:auto;
    background-color: white;
  }

  .aboutItemPage{
    width:80%;
    margin-left:auto;
    margin-right:auto;
    background-color: #69D8FF!important;
  }


  .aboutItemLPage{
    width:80%;
    margin-left:auto;
    margin-right:auto;
    background-color: white!important;
  }

  .mokirNameListItemSelected{
    background-color: blue!important;
    color:white;
  }


  .menueBarOption{
    /* border-top:1px solid black;
    border-bottom:1px solid black; */
    height:3rem;
    line-height:3rem; 
    padding-right:1rem; 
    padding-left:1rem; 
    font-size:2.5rem;
    text-align:right;
    cursor:pointer;
      /* background-color:black;
    color:white; */
    color:black;
  }

  .menueBarOption:hover{
    background-color:white;
    color:black;
  }

  .menueBarOptionImg{
    cursor:pointer;
    
  }

  .menuBarOptionIconImage{
    width:auto; 
    height: 2.5rem; 
    max-height:2.5rem;
    /* padding-right:1rem;
    padding-top:0.5rem; */
    border-radius: 0.7rem;
    border:2px solid white;
  }

  .headerBarOptionIconImage{
    width:auto; 
    height: 2.5rem; 
    max-height:2.5rem;
  }

  .landingMenueContainer{
    width: 80%; 
    background-color: #c5ef79;
    position: absolute;
    left: -800px;
    top:8.5rem;
    display:none;
    height: 50rem;
    z-index:999;
  }

  .logoImageDiv{
    width:30%;
    text-align:center;
    background-color: rgb(224, 229, 233);
  }



  .mobileMenueOpenIcon{
    height:1rem;
    background-color:rgb(224, 229, 233);
    display:block;
    cursor: pointer;
  }  


  .optionsPhaseContainerV1{
    width: 100%;
  }

  .optionsPhaseContainerV1DoubleSelf{
    width: 95%;
    margin-left:auto;
    margin-right:auto;
  }

  .optionsPhaseContainerV1MemorySelf{
    width: 99%;
    margin-left:auto;
    margin-right:auto;
  }

  .menueBarUpperSpacer{
    height:3rem; 
    line-height:3rem;
    /* border-bottom:1px solid black;  */
  }

  .menueBarUpperSpacerStyle {
    color:black;
    padding-left:2rem;
    padding-right:2rem;
    font-size: 2rem; 
    font-weight:bold;
  }

  .menueBarCenterSpacer{
    height:12rem ; 
    /* border-bottom:1px solid black ; 
    border-top:1px solid black; */
  }
  .menueBarBottomSpacer{
    height:3rem; 
    /* border-bottom:1px solid black; */
  }

  .showOnMobile{
    display:flex;
  }

  .showOnTablet{
    display:none;
    color:yellow; 
    background-color: green;
  }

  .showOnScreen{
    display:none;
  }
  
  .nameDetailsItemBtn{
    cursor:pointer;
    padding-right:0.0rem;
    height:3rem; 
    line-height:3rem;
    width:7rem;
    border:2px solid black; 
    border-radius:8px;
    text-align: center; 
    font-size:1.5rem;
    color:black;
    background-color: lightblue;
    user-select: none;
  }

  .nameDetailsItemBtn:hover{
    color:blue;
    background-color: white;
  }

  .showPresentationBtn{
    width:36rem;
    height:7rem;
    font-size:2rem; 
    background-color:#4472C4; 
    color:white; 
    border:10px solid #4472C4; 
    border-top:10px solid lightblue; 
    border-left:10px solid white;  
    border-style: outset;
  }

  .aboutSlide{
    border:5px solid black;
    width:90%;
    margin-left:auto;
    margin-right:auto;
  }

  .slideImage{
    width:100%;
    height:auto;
  }

  .wikiAmountSelStyle{
    background-color:red;
    text-align:center;
    color:black;
    width:15rem;
    margin-right:0rem; 
    margin-left:0rem;
    font-size:2.5rem;
    padding-right:1rem;
    padding-left:1rem;
    cursor: pointer;
    font-weight:normal;
  }

  .wikiVeryMuchSelStyle{
    background-color:red;
  }

  .wikiMuchSelStyle{
    background-color:orange;
  }

  .wikiModerateSelStyle{
    background-color:pink;
  }

  .wikiFewSelStyle{
    background-color:yellow;
  }

  .isActiveWikiSelector{
    color:blue!important;
    font-weight:bold;
    border:2px solid black;
    background-image:url("../image/astrik1.png") ;/*linear-gradient(); */
    background-size: auto 2rem;
    background-repeat: no-repeat;
    background-position: right;
  }


  .emphesizedOption{
    text-decoration: underline;
  }

  .propsalName{
    user-select: none;
  }

  .propsalName:hover{
    color:white;
  }

  #nameExplanationPersonalTitleDiv , #mokirNameExplanationPersonalTitleDiv{
    display:flex; 
    flex-direction:column-reverse; 
    justify-content: right;
  }

  #mokirFiltersGeneralBtnDiv{
    display: flex;
    flex-direction:column;
    justify-content: center; 
    gap:1rem;
    width:90%;
    margin-left:auto;
    margin-right:auto;
    text-align: center;
    margin-top:1rem;
  } 

  .mokirFiltersGeneralBtn{
    width: 80%;
    margin-right:auto; 
    margin-left:auto;
  }



  .mokirListActionBtn{
    margin-left: auto;
    margin-right: auto;
    cursor:pointer;
    padding-right:0.0rem;
    height:fit-content; 
    line-height:2rem;
    width:12rem;
    border:2px solid black;  
    background-color:rgb(243, 245, 122);
    text-align: center; 
    font-size:2.5rem;
  }

  .mokirListActionBtn:hover{
    background-color: gray!important;
    color:white;
  }

  #nameExplanationPersonalButtons{
    background-color:#7c7fd1!important ;
    display:flex; 
    flex-direction:column;
    justify-content: space-between;
    gap:1rem;
    width:25%;
    margin-left:auto;
    margin-right:auto;
  }

  #mokirFilterActionDiv{
    display: flex;
    flex-direction: column-reverse;
    text-align:center;
    width:90%;
    margin-right:auto;
    margin-left:auto;
    height:fit-content;
    line-height:7rem;
    background-color:transparent;
    padding-right:1.5rem;
    padding-left:1.5rem;
 } 

 .mokirFilterActionBtn{
   width:80%;
   margin-right:auto; 
   margin-left:auto;
   text-align:center;
 }
 
  .mokirAmountResultDiv{
    display:flex;
    flex-direction:row;
    justify-content:center;
    height:5rem;
    line-height:5rem; 
    width:80%;
    margin-left:auto;
    margin-right:auto;
    border:2px solid black;
    background-color: transparent;
    text-align:center;
    font-size:2.5rem;
    color:white; 
    margin-top:0rem; 
    margin-bottom:1rem;
  
  } 

  .menueBarSubOptionText{
    width:70%;
  }

  .menueBarSubOptionImage{
    width:30%;
    text-align:center;
    height:3rem;
    line-height:4.5rem;
  }

  #versionNote{
    border:1px solid red; 
    width:90%;
    margin-left:auto;
    margin-right:auto;
    color:red;
    padding:1.5rem;
  }

  .nameTypeImage {
    width:auto; 
    max-height: 10rem;
    height: 10rem;
  }

  .filtersTitleManinDiv{
    width:100%;
    display:flex;
    flex-direction:row;
    justify-content:center;
    margin-bottom:1.5rem;
    font-size:4rem;
    text-align:center; 
    font-family: Narkisim, Helvetica, sans-serif;
 } 

 .nameFiltersTitleManinDiv{
  width:100%;
  display:flex;
  flex-direction:column-reverse;
  justify-content:center;
  margin-bottom:1.5rem;
  font-size:4rem;
  text-align:center; 
  font-family: Narkisim, Helvetica, sans-serif;
} 

 .mProposalsContainerDiv{
    display:flex;
    flex-direction: column-reverse;
    justify-content: center;
    width:100%;
    margin-left:auto;
    margin-right:auto;
  } 

  .mAdvanceBtn{
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    width:88%;
    margin-left:auto;
    margin-right: auto;
  }

  .nameNavBtn{
    text-align:center; 
    border-right:0px solid black;
    background-color: white;
    width: 8rem!important;;
    border:1px solid black;
    font-size:3rem
  }

  .nameNavWideBtn{
    text-align:center; 
    border-right:0px solid black;
    background-color: white;
    width: 12rem!important;;
    border:1px solid black;
    font-size:3.5rem!important;
    border-radius: 0px 0px 30px 30px;
  }

      
  .isActiveLetter{
    color:white!important;
    background-color:blue!important;
  }

  .allFiltersContainerDiv{
    display: flex;
    flex-flow: column-reverse;
    justify-content: space-around;
    width:100%;
  }

  .filterGroupContainerDiv{
    width:90%; 
    margin-left:auto; 
    margin-right:auto; 
    display:flex; 
    flex-direction: column;
  }

  .filterGroupContainerTitle{
    height:5rem;
    line-height:5rem; 
    width:100%;
    margin-left:auto;
    margin-right:auto;
    border:4px solid yellow;
    background-color: orange;
    text-align:center;
    font-size:4rem;
    color:black;
    margin-bottom: 1rem;
  }

  
  .filterGroupContainerOptionsDiv{
    display:flex;
    flex-direction:column;
    padding-right:0.5rem;
    padding-top:0.5rem;
    height:21rem;
    line-height:4rem; 
    width:100%;
    border:4px solid brown;
    background-color: rgb(239 230 216);
    text-align:right;
    font-size:3.5rem;
    color:black;
  } 
  
  .filterPageGroupBtnDiv{
    display: flex;
    flex-flow: column;
    justify-content: center; 
    gap:1rem;
    width:100%;
    margin-top:1rem;
  }

  .filterPageGroupBtn{
    width:100%; 
    text-align:center;
  }

  .filterItemInput{
    font-size: 2.5rem;
    text-align:right;
  }

  .filterItemTitle{
    font-size: 3.5rem; 
    margin-right: 2rem; 
    text-align:left; 
    margin-left: 1rem; 
    color:blue;
    height: 4rem;
    line-height: 4rem;
  }

  .filterItemTitleRight{
    font-size: 2.5rem; 
    margin-right: 6rem; 
    text-align:right;  
    margin-right: 1rem; 
    color:blue;
  }

  .filterItemShortTitle{
    width: 16rem; 
  }
  .filterItemLongTitle{
    width: 22rem; 
  }
  
  .filterItemVeryLongTitle{
    width: 24rem; 
  }
  
  .filterItemExtraLongTitle{
    width: 30rem; 
  }

  .filterBoxTitle{
    color: red;
    font-size: 3.5rem;
    margin-top: 1rem;
    margin-right: 2rem;
    margin-bottom: 1.5rem;
    text-align:center;
  }

  .notOnMobile{
    display:none;
  }
  

  .wikiBarContainerDiv{
    display:flex;
    flex-direction:row;
    width:98%;
    margin-left:auto;
    margin-right:auto;
    justify-content: center;
    border:1px solid black;
  }


  .isActiveTableRow{
    color:black!important;
    background-color:rgb(235, 199, 134)!important;
  }

  .menuBarItemContainer{
    display:flex; 
    flex-direction: row; 
    justify-content: right;
    /* border-bottom:8px solid gray; */
  } 

  .menuBarItemContainerT1{
    display:flex; 
    flex-direction: row; 
    justify-content: right;
    /* border-bottom:8px solid gray;
    border-top:8px solid gray; */
  } 

  .filtersTitleManin{
    display:flex; 
    flex-direction: row;
    justify-content: center;
    width:100%;
  }

  .filtersTitleManinT2{
    width:100%;
    text-align:center;
  }

  .filtersTitle1Item{
    color:black;
    font-size: 4rem;;
  }

  .filterItemInputDiv{
    margin-left: 1rem; 
    width:4rem;
    font-size: 2.5rem;
    height: 4rem;
    line-height: 4rem;
  }

  .filterItemInputSelectDiv{
    margin-left: 1rem; 
    width:4rem;
    font-size: 2.5rem;
    height: 3rem;
    line-height: 3rem;
  }

  .groupT1Row{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    width:100%;
  }

  .groupT1Col{
    display: flex;
    flex-flow: column-reverse;
    width:100%;
  }
  
  .groupT1{
    display: flex;
    flex-flow: column-reverse;
    justify-content: center;
    font-size: 1.5rem;
    width:100%;
    gap:0.5rem;
  }

  .groupT2{
    display: flex;
    flex-flow: rowe;
    justify-content: center;
    font-size: 1.5rem;
    width:100%;
    gap:0.5rem;
  }

  .filterButton{
    height:5rem;
    line-height:5rem; 
    width:90%;
    margin-left:auto;
    margin-right:auto;
    border:2px solid black;
    background-color: orange;
    text-align:center;
    font-size:3.5rem;
    color:black;
    background-image: linear-gradient(#ff00006e, yellow,#ff00006e);
  }

  .filterButton:hover {
    background-image: linear-gradient(#ff00006e, yellow);
  }

  
  .latterTable{
    display:flex;
    flex-direction: row;
    background-color:white;
    width:fit-content;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
  }

  .latterTableItem{
    border:1px solid black; 
    padding:0.2rem;
    font-size:2.5rem;
    width:1.8rem;
    text-align: center;
    cursor:pointer;
 }

 .latterTableItem:hover{
   color:white;
   background-color: blue;
 }


  .width90{
    width:90%;
    margin-left:auto;
    margin-right:auto;
    text-align: center;
  }
  
  .bodyMainContainderDiv{
    display:flex; 
    flex-direction:column;
    width:99%; 
    background-color:black;
    color:white;
    border: 3px solid  white; 
    margin-left:auto; 
    margin-right:auto;
    font-size:2.5rem;
    height:fit-content;
  }

  .catItemsColumn{
    width:90%;
    display:flex; 
    flex-direction: column;
    margin-right:2rem; 
    justify-content :right;
    line-height:1.4rem;
  }

  .filterItemRow{
    font-size:2.5rem; 
    line-height:2.5rem;
    width:80%; 
    margin-right:1rem;
    margin-left:1rem; 
    text-align:right;
  }

  .filterOptionsDivHeight0{
    height:14rem;
    margin-bottom:1rem;
  }
  
  .filterOptionsDivHeight1{
    height:14rem;
    margin-bottom:1rem;
  }
  
  .filterOptionsDivHeight2{
    height:18rem;
    margin-bottom:1rem;
  }
  
  .filterOptionsDivHeight4{
    height:58rem;
    margin-bottom:1rem;
  }
  
  .filterOptionsDivHeight5{
    height:28rem;
    margin-bottom:1rem;
  }
  
  .filterOptionsDivHeight6{
    height:90rem;
    margin-bottom:1rem;
  }
  
  .filterOptionsDivHeight8{
    height:142rem;
    margin-bottom:1rem;
  }
  
  .filterGroupTitleDiv{
    color: red;
    font-size: 3rem;
    margin-top: 1rem;
    margin-right: 2rem; 
    margin-bottom: 0rem;
    text-align:center;
    display:flex;
    flex-direction:row;
    justify-content:center;  
  }

  .mokirFiltersContainerDiv{
    display: flex;
    flex-flow: column-reverse;
    justify-content: center;
    width:100%;
  }

  .mokirFiltersContainer{
    display:flex;
    flex-direction:column;
    padding-top:0.5rem;
    line-height:3rem; 
    height: fit-content;
    width:96%;
    margin-right:auto;
    margin-left:auto; 
    border:4px solid white;
    background-color: white;
    text-align:right;
    font-size:2.5rem;
    color:black;
    margin-bottom:2rem;
  }

  .mokirListWeightDiv{
    width:5rem;
    font-size:2.5rem;
  }

  .mokirListWeight{
    width:3rem;
    font-size:2.5rem;
  }

  .mokirListFilterTextDiv{
    width:100%; 
    display:flex;
    flex-direction:row;
    justify-content: right;
    font-size:2.5rem;
  }

  .mokirListFilterTextContainer{
    width:100%; 
    display:flex;
    flex-direction:row;
    justify-content: right;
    font-size:2.5rem;
    height:3rem;
    line-height: 3rem;
  }

  .mokirListNameText{
    height:3rem; 
    line-height:3rem;
    margin-left:0.5rem;
    font-size:2rem;
  } 

  .width49{
    width:49%;
    margin-left:auto;
    margin-right:auto;
    text-align: center;
  }

  .width32{
    width:32%;
    margin-left:auto;
    margin-right:auto;
    text-align: center;
  }

  .widthT1{
    width:80%;
    margin-left:auto;
    margin-right:auto;
    text-align: center;
  }

  .mokirFiltersGroupContainerDiv{
    width:99%;
    margin-left:auto;
    margin-right:auto;
    text-align: center;
  }

  .mokirNameListItem{
    font-size: 2.5rem;
    color:black;
  }

  .errorMessageContainerPivot{
    background-color:lightGray;
    height:2rem;
    width:1rem;
    margin-left:auto;
    margin-right:auto; 
  }

  .errorMessageContainerDiv{
    background-color:white;
    display:flex; 
    flex-direction:column;
    justify-content:center;
    height:20rem;
    width:95%;
    margin-left:auto;
    margin-right:auto; 
    margin-top:5%;
    margin-bottom:auto; 
    border:2px solid black;
  }

  .modalPageContainerDiv{
    background-color:white;
    display:flex; 
    flex-direction:column;
    justify-content:center;
    height:fit-content;
    width:99%;
    margin-left:auto;
    margin-right:auto; 
    margin-top:5%;
    margin-bottom:auto; 
    border:2px solid black;
  }

  .errorMessageTitle{
    height:3rem;
    line-height:3rem;
    background-color: black;
    color:white;
    text-align: center;
  }

  .errorMessageBody{
    margin-top:4rem;
    margin-bottom:4rem;
    height:4rem;
    line-height:4rem;
    background-color: white;
    color:black;
    text-align: center;
  }

  .modalPageBody{
    margin-top:3rem;
    margin-bottom:2rem;
    height:fit-content;
    /* line-height:28rem; */
    background-color: white;
    color:black;
    text-align: center;
    font-size:2rem;
  }

  .errorMessageContBtn{
    border:2px solid white; 
    border-radius:0px;
    width:95%; /*fit-content;*/
    margin-left:auto;
    margin-right:auto;
    height:2.5rem;
    line-height:2.5rem;
    background-color: black;
    color:white;
    text-align: center;
    font-size:1.5rem;
    cursor: pointer;
    padding-right:0.0rem;
    padding-left:0.0rem;
  }

  .errorMessageContBtn:hover{
    background-color: gray;
  }

  .notes{
    font-size:2.5rem;
    text-align:right;
  }

  .viewerCounterContainerDiv{
    background-color: black; 
    color:white;
    padding-left: 1rem;
    padding-right: 1rem;
    display:flex;
    flex-direction:row;
    gap:1rem; 
    justify-content:center;
    border:1px solid black;
    border-radius: 20px; 
    width:fit-content;
    margin-left:auto;
    margin-right:auto;
  }

  .viewerCounterContainerDiv4War{
    background-color: transparent; 
    color:white;
    padding-left: 1rem;
    padding-right: 1rem;
    display:flex;
    flex-direction:row;
    gap:1rem; 
    justify-content:center;
    border:0px solid black;
    border-radius: 20px; 
    width:fit-content;
    margin-left:auto;
    margin-right:auto;
    position:relative;
    top:-90px;
  }


  .viewerCounterTitle{
    width:auto;
    text-align:center;
    font-size:3rem;
    height:4rem;
    line-height:4rem;
  }

  .viewerCounterAmount{
    width:auto;
    text-align:center;
    background-color: black; 
    color:white; 
    font-size:3rem;
    height:4rem;
    line-height:4rem;
    font-weight: bold;
  }

  .tempVersionNote{
    border:1px solid red; 
    width:80%;
    margin-left:auto;
    margin-right:auto;
    color:red;
    padding:1.5rem;
    text-align:right;
    font-size:3rem;
    font-family: Narkisim, Helvetica, sans-serif;
  }

  .titleAndButtonDiv{
    display:flex;
    flex-direction:row;
    gap:2rem;
    height:4rem;
    line-height: 4rem;
    font-size:3.5rem;
  }

  .titleAndButtonBtnDiv{
    height:4rem;
    line-height:4rem;
  }

  .titleAndButtonBtn{
    font-family: Narkisim, Helvetica, sans-serif ;
    padding-left:1rem;
    padding-right:1rem;
    background-color:black;
    color:white;
    font-size: 2rem;
    border-radius: 5rem;
  }

  .titleAndButtonBtn4War{
    font-family: Narkisim, Helvetica, sans-serif ;
    padding-left:1rem;
    padding-right:1rem;
    background-color:yellow;
    color:black;
    font-size: 2rem;
    border-radius: 5rem;
  }

  .alwaysHide{
    display:none;
  }

  .cardPack {
    height:10rem;
    border:1px solid green;
    width:100%;
    margin-left: auto;
    margin-right: auto;
  }

  .doubleCardPack {
    height:fit-content;
    border:0px solid green;
    width:60%;
    margin-left: auto;
    margin-right: auto;
    background-color: transparent;
  }

  .uperCardBackSide{
    background-image: url(./public/image/cardBackSide.jpg);
    background-repeat: no-repeat;
    width: auto;
    height: 10rem;
    background-size:cover;
  }

  .onGameCard{
    border:1px solid red;
    height:fit-content;
    min-height:10rem;
    width:100%;
    margin-left: auto;
    margin-right: auto;
  }

  
  .onDoubleGameCard{
    border:1px solid red;
    height:fit-content;
    width:100%;
    margin-left: auto;
    margin-right: auto;
  }

  .onDoubleSelfGameCard{
    border:0px solid red;
    height:fit-content;
    width:60%;
    margin-left: auto;
    margin-right: auto;
  }

  .invitationStatusLine{
    display: flex; 
    flex-direction:column-reverse;
    justify-content: right;
    gap:0.5rem;
    /* border-bottom: 2px solid black; */
    height:7rem;
    line-height:3.5rem;
  }

  .playerIdContaiverDivStyle{
    display: flex; 
    flex-direction:column;
    justify-content: right;
    gap:0.2rem;
    cursor: pointer;
    font-size:1.2rem;
  }

  .playerIdUpperContaiverDivStyle{
    display: flex; 
    flex-direction:column;
    justify-content: right;
    gap:0.2rem;
    font-size:1rem;
    text-wrap: wrap;
    width:3.5rem;
  }

  .playerListImage{
    margin-left:auto;
    margin-right:auto; 
    height: 5rem; 
    width:auto;
    border-radius: 3rem;
    border: 6px solid purple;
  }

  .gameListImage{
    margin-left:auto;
    margin-right:auto; 
    height: 5rem; 
    width:auto;
    border:2px solid black;
  }

  .gameUpperListImage{
    margin-left:auto;
    margin-right:auto; 
    height: 3rem; 
    width:auto;
    border:2px solid black;
    border-radius: 1rem;
  }

  .subGameListImage{
    margin-left:auto;
    margin-right:auto; 
    height: 5rem; 
    width:auto;
    border:3px solid black;
    border-radius: 1rem;
  }

  .playerRefreshListImage{
    margin-left:auto;
    margin-right:auto; 
    height: 2.5rem; 
    width:auto;
    cursor: pointer;
  }

  .playersPanelDiv{
    max-height: 51rem;
    overflow: scroll;
    padding-right:0.5rem;
    padding-left:0.5rem;
    padding-bottom:0.5rem;
    width:fit-content; 
    max-width:95%;
    min-width:95%;
    display: flex; 
    flex-direction:column;
    justify-content: right;
    gap:1rem;
    border:0px solid green;
    padding-top:0.5rem;
  }

  .gmaeListUpperPanelDiv{
    max-height: fit-content; 
    padding-bottom:0.5rem;
    width:100%; 
    min-width:95%;
    display: flex; 
    flex-direction:column;
    justify-content: right;
    gap:0.5rem;
    border:0px solid green;
    padding-top:0.7rem;
  }

  .presentedCardStyle{
    margin-top:0rem;
    text-align:center;
    width:100%;
    margin-left:auto;
    margin-right:auto;
    color:blue; 
    background-color:transparent;
    font-weight:bold;
    font-size:3rem;
  }

  .invitatedGameNameStyle{
    width:fit-content;
    text-align:right;
  }

  .actUserImageDivStyle{
    width:auto!important;
    line-height: 4rem; 
    height: 4rem; 
    max-height: 4rem;
  }

  .actUserImageStyle{
    width:auto; 
    height: 4rem; 
    max-height: 4rem;
    border-radius:1rem;
  }

  .invitatedStatusUpperLine{
    width:100%;
    display: flex; 
    flex-direction:row;
    justify-content: right;
    gap:0.5rem;
    height:4rem;
    line-height: 4rem;
  }

  .activeCardTableContainerStyle{
    display:flex;
    flex-direction: column;
  }

  .localWinStatusDiv{
    width:50%; 
    margin-left:auto;
    margin-right:auto;
    display:flex;
    flex-direction: column-reverse;
    padding-top:1rem;
    font-size:2rem;
  }

  .selectedGameSize{
    border:2px solid green;
    background-color:green;
    color:white;
    padding-right:0.5rem;
    padding-left:0.5rem;
    font-size:2rem;
    font-weight:bold;
    border-radius: 16px;
    height:2rem;
    line-height:2rem;
    text-align:center;
  }

  .nonSelectedGameSize{
    border:2px solid black;
    background-color:white;
    color:black;
    padding-right:0.5rem;
    padding-left:0.5rem;
    font-size:3rem;
    font-weight:normal;
    border-radius: 16px;
    height:2rem;
    line-height:2rem;
    text-align:center;
  }

  .selCardsAmount{
    cursor: pointer;
    font-size:1.5rem;
  }

  .scoreReportContainer{
    margin-top:0rem;
    width:95%;
    margin-left:auto;
    margin-right:auto;
    border:2px solid red;
    display:none;
    text-align:center;  
  }

  .gameLayeoutContainerDiv{
    display: flex;   
    flex-direction: column-reverse; 
    width:100%;
  }

  .doubleRemoteCardContainedDiv{
    width:100%; 
    margin-left: auto; 
    margin-right: auto;
    text-align: center;
  }

  .playAreaContainerTitleDiv{
    border:2px solid black;
    background-color: aquamarine ;
    color:black;
    text-align:center;
    display:flex;
    flex-direction:row;
    gap:1rem;
    justify-content: center;
    width:100%;
    font-size:2.5rem;
  }

  .playersNameContainerDiv{
    width:100%;
    margin-left:auto;
    margin-right:auto;
    display: flex;
    flex-direction: row; 
    gap:0rem; 
    border:2px solid black;
    font-size:1.5rem;
  }

  .remoteCardContainedDiv{
    width:95%; 
    margin-left: auto; 
    margin-right: auto;
  }

  .localCardContainedDiv{
    width:95%; 
    margin-left: auto; 
    margin-right: auto;
  }

  .localQImageImg{
    width:60px;
    height:60px;
    margin-left:auto;
    margin-right:auto; 
  }

  .powerIcon{
    height:60px;
    width:60px;
  }

  .slogan{
    text-align:center;
    font-size:1.5rem;
    color:white;  
  }

  .game1RemotePlayerContainerDiv{
    background-color:bisque;
    /* padding-left:1rem;
    padding-right:1rem; */
    direction:rtl;
    width:100%;
    margin-left:auto;
    margin-right:auto;
    display: flex;
    flex-direction: column; 
    gap:0rem; 
    border:2px solid black;
  }

  .actCardStockContainerTemp{
    width:100%; 
    margin-left:auto;
    margin-right:auto;
    height: 1px;
  }

  .localPlayerScoreDiv{
    text-align:center;
    width:20%;
    font-size:2rem;
    min-width:fit-content;
    font-size: 1.7rem;
    line-height: 2rem;
    height: 2rem;
    padding-top: 0.3rem;
  }

  .allPlayerCotainerDiv{
    font-size:2rem; 
    display: flex; 
    flex-direction:row-reverse;
    justify-content: right;
    gap:1rem;
    flex-wrap: wrap;
  }

  .invitationActions{
    width:100%;
    display: flex; 
    flex-direction:column-reverse;
    justify-content: center;
    gap:0rem;
  }

  #actPlayersPanelDiv  .titleLineDiv   , #gmaeListPanelDiv  .titleLineDiv , #resPlayersPanelDiv   .titleLineDiv {
    display:none; 
  }
   

  .scoreContanerDiv{
    display:none;
    flex-direction:row;
    width:100%;
    justify-content: right;
    gap:1rem;
  }

  .div90flexcolumn{
    width: 90%;
    margin-left:auto;
    margin-right:auto;
    display:flex;
    flex-direction:column; 
  }

  .div90flexrowright{
    width: 90%;
    display:flex;
    flex-direction:row; 
    justify-content: right;
  }
  
  .div100flexcolumn{
    width: 100%;
    display:flex;
    flex-direction:column; 
  }

  .div50flexcolumn{
    width:50%;
    margin-left: auto;
    margin-right: auto;
    display:flex;
    flex-direction:column; 
  }

  .div100flexrowright{
    width: 100%;
    display:flex;
    flex-direction:row; 
    justify-content: right;
  }

  .div100flexrowcenter{
    width: 100%;
    display:flex;
    flex-direction:row; 
    justify-content: center;
  }

  .div100flexrowreversecenter{
    width: 100%;
    display:flex;
    flex-direction:row-reverse; 
    justify-content: center;
  }

  .div90flexrowcenter{
    width: 90%;
    margin-left:auto;
    margin-right:auto;
    display:flex;
    flex-direction:row; 
    justify-content: center;
  }

  .loginUserTypeBtnDiv{
    width:50%;
    margin-left: auto;
    margin-right: auto;
    display:flex;
    flex-direction:column; 
  }

  .mainTabStyle{
    width:6rem;
    min-width:6rem;
    font-size:1.5rem;
    font-weight:bold;
    color:black;
    text-align:center;
    border-left:0px solid black;
    border-top:0px solid black;
    border-right:0px solid black;
    border-radius: 8px 8px 0px 0px;
    background-color: white;
    cursor: pointer;
    margin-left:0.5rem;
    margin-right:0.0rem;
  }

  .mainTabStyleSelected{
    background-color:aquamarine;  /*lightblue; */
  }

  .optionsTabStyleSelected{
    background-color:lightblue; 
  }

  .mainTabStyleNotSelected{
    background-color: lightGray;
    border-bottom:1px solid black;
  }

  .blurIt{
    filter: blur(0px);
  }
  
  /* *******************  inage flip 3d *********************************** */

.flip-box {
  background-color: transparent;
  width: 80px;
  height: 80px;
  border: 1px solid #f1f1f1;
  perspective: 1000px;
  background-image:url("../image/winningSmall.png") ;
  background-size: contain;  
}

.flip-box-trivia {
  background-color: transparent;
  width: 200px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px;
  background-image:url("../image/winningSmall.png") ;
  background-size: contain;  
}

.flip-box-front {
  background-color:lightgreen ;/* #bbb; */
  color: black;
  font-size:4rem; 
  font-weight:bold;
  height:200px;
  line-height:110px;
}
.flip-box-front-trivia {
 
  font-size:4rem; 
  font-weight:bold;
  height:200px;
  line-height:210px;
}

.flip-box-front-trivia-QM {
  background-color:red ;/* #bbb; */
  color: white;
}

.flip-box-front-trivia-ANS {
  background-color:lightgreen ;/* #bbb; */
  color: black;
}



  /* *******************  inage flip 3d *********************************** */


  .picGroupStyle {
    cursor:pointer;
    border:0px solid black; 
    height:fit-content; 
    background-color:transparent;
    width:60%;
    margin-left: auto;
    margin-right: auto;
  }

  .picGroupStyle1111:hover  .gameListImage {
    filter: blur(0px)!important;
  }

  .picGroupStyle:hover {
    border:5px solid yellow;
    border-radius: 1rem;
    overflow:hidden;  
  }

  .picSelectedGroupStyle {  
    border:5px solid yellow;
    border-radius: 1rem;
    overflow:hidden;   
  }

  .gameOptionsTabsContainerDivStyle{
    width:100%;
    border-bottom:0px solid black;
    margin-left: auto;
  } 

  .approveInvitedGameDiv{
    width:100%;
  }

  .regMessageDivStyle{
    display:flex;
    flex-direction:row;
    gap:1.0rem;
    font-size:2rem;
    text-align:right;
    margin-bottom:0.0rem;
    width:95%;
    justify-content:right;
    font-size:1.5rem;
  }

  .regNewMemberPwdMessageStyle{
    width:25rem;
    text-align:right;
    font-size:1.5rem;
    text-align:right;
    margin-right:5rem;
    color:red;
    font-weight:bold; 
  }

  .regMemberItemsDivStyle{  
    display:flex;
    flex-direction:row;
    gap:1.0rem;
    font-size:2rem;
    text-align:right;
    margin-bottom:0.0rem;
    width:95%;
    justify-content:right;
  }

  .regMemberItemsInputDivStyle{
    text-align:right;
    width:50%;
    font-size:1.5rem;;
   } 

   .regMemberItemsInputDivContainerStyle{
    display:flex;
    flex-direction:row;
    gap:1.0rem;
    font-size:2rem;
    text-align:right;
    margin-bottom:0.0rem;
    width:95%;
    justify-content:right;  
  }

  .imageAssignContainerDiv{
    display:flex;
    flex-direction:row;
    gap:1.0rem;
    font-size:2rem;
    text-align:right;
    margin-top:1.0rem;
    margin-bottom:0.0rem;
    width:95%;
    justify-content:right;
  }

  .imageAssignDetailsContainerDiv  {
    display:flex;
    flex-direction:column;
    gap:1.0rem;
    justify-content:right;
    text-align:right;
    width:50%;
    font-size:1.5rem;
  }

  .imageFileAssignDetailsContainerDiv { 
    margin-right:1rem; 
    height: 4rem; 
    line-height: 4rem;
    display: flex;
    flex-direction: row;
    justify-items: normal;
    gap:0.2rem;
  }

  .imageFileAssignDetailsDiv { 
    width:4rem;
    height:4rem ;
    border-radius:20px;
    background-color:white;
    border:1px solid black;
    z-index:1;
    position:relative;
    left:3rem;
  }

  .regPlayerImageCB{
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }

  .game1PlayersContainerDiv{
    width:100%;
    margin-left:auto;
    margin-right:auto;
    display: flex;
    flex-direction: row; 
    gap:0rem; 
    border:2px solid black;
  }

  .isNotActiveImage{
    background-color:lightgray!important;
  }

  .isActiveImage{
    background-color:black!important;
    border-radius:0px 0px 10rem 10rem;
  }

  .resPlayerImageContainerDivStyle{
    width:10%;
  }
  
  .currActPlayerImage{
    border-color: yellow!important;
  }

  .adminAddFamilyRecords{
    display:flex;
    flex-direction:column-reverse;
    gap:0.2rem;
    font-size:1.5rem;
    text-align:right;
    margin-bottom:0.0rem;
    width:95%;
    justify-content:right; 
  } 

  .adminAddFamilyRecordsTitle{ 
    display:flex;
    flex-direction:row;
    gap:1.0rem; 
    width:100%;
    justify-content: right;
  }

  .adminAddFamilyRecordsIndex{
    display:flex;
    flex-direction:row;
    gap:1.0rem; 
    width:80%;
    justify-content: right;
    background-color: white;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }

  .adminAddFamilyRecordsNumCards{
    display:flex;
    flex-direction:row;
    gap:1.0rem; 
    width:80%;
    justify-content: right;
    background-color: transparent;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }

  
  .startAsGuest{
    cursor:pointer;
    height:3rem;
    line-height:3rem;
  }

  .startAsGuest:hover {
    text-decoration: underline;
  }

  .go2Registr{
    cursor:pointer;
    height:3rem;
    line-height:3rem;
  }

  .go2Registr:hover {
    text-decoration: underline;
  }

  .go2Login{
    cursor:pointer;
    height:3rem;
    line-height:3rem;
  }

  .go2Login:hover {
    text-decoration: underline;
  }

  .noUserOptSel{
  background-color: black;
  color:white;
  }

  .noUserOptNotSel{
    background-color: white;
    color:black;
  }

  .elemFullSize{
    width:100%;
  }
  
  .gameTypeListContainerSmallSize{
    width:25%;
    margin-left: auto;
    margin-right: 0rem;
  }

  #option1TitleDiv.aboutPageTitleDiv{
    display:none;
  }

  .startGameImage{
    margin-left:auto;
    margin-right:auto; 
    height: 5rem; 
    width:auto;
    border:6px solid transparent;
  }


  .game1CardsContainerDiv{
    width:100%;
    margin-left:auto;
    margin-right:auto;
    display: flex;
    flex-direction: row; 
    gap:0rem; 
    border:2px solid black;
  }

  .triviaCardsAmountDiv {
    display:flex;
    flex-direction:row; 
    justify-content: center;
    gap:0.5rem;
    width:42rem; 
    margin-left:auto;
    margin-right:auto;
    background-color:yellow;
  }

  .memGameText4Image{
    border-radius:1rem;
    width:100%;
    height:4rem;
    line-height:4rem;
    font-size:2rem;
    font-weight:bold;
    color:black;
  }

  .adminAddMemebrTitleStyle{
    display:flex;
    flex-direction:row;
    gap:1.0rem;
    font-size:1.5rem;
    text-align:right;
    margin-bottom:0.0rem;
    width:95%;;
    justify-content:right;
  }

  .headerUserSettingStyle{
    cursor: pointer;
    width:40%;
    height: 3rem;
    line-height:4.5rem;
    max-height: 12rem;
    margin-top: 0rem;
    margin-bottom: 0rem;
    text-align:left; 
  }

  .headerLoginTextDivStyle{
    padding-right:1rem; 
    color:red;
    font-size:2rem;
    height:3rem; 
    line-height: 3rem;
    text-align:left;
    width:9rem;
    background-color: rgb(224, 229, 233);
  }

  .userGameIDStyle{
    background-image: linear-gradient(to bottom, white, gray);
    cursor:pointer;
    color:white;
    padding-top:0.5rem;
    padding-right:0.5rem;
    width:90%;
    margin-right:auto;
    margin-left:auto;
    text-align:right;
    border-bottom:1px solid black;
    font-size: 2rem;
  }

  .userGameIDBtnStyle{
    background-image: linear-gradient(to bottom, white, gray);
    cursor:pointer;
    color:white;
    padding-top:0.5rem;
    padding-right:0.5rem;
    width:90%;
    margin-right:auto;
    margin-left:auto;
    text-align:center;
    border-bottom:1px solid black;
    font-size: 2rem;
    border-radius: 1rem;
  }

  .userGameIDStyleNotSelected{
    background-image: linear-gradient(to bottom, white, gray);
  }

  .userGameIDStyleSelected{
    background-image: linear-gradient(to bottom, white, blue);
  }

  #triviaGameLevelOpesContaner{
     width: 100%;
    display:flex;
    flex-direction:row; 
    justify-content: center;
    gap:1rem;
  }

  #triviaProblemLevelOpesContaner{
     width: 100%;
    display:flex;
    flex-direction:row; 
    justify-content: center;
    gap:1rem;
  }

  #triviaProblemLevelOpesDivContaner{
    width:100%;
    gap:1rem;
  }

  #userOwnGamesNameTitle{
    text-align:right;
    width:fit-content;
    font-weight:bold;
    margin-bottom:0.5rem;
  }

   #userOwnGamesNameList{
    text-align:right;
    width:40rem;
    font-weight:bold;
    margin-bottom:0.5rem;
  }

  #responseTitleLineContainerDiv{
    width: 100%;
    display:flex;
    flex-direction:column-reverse; 
    justify-content: right;
    padding-top:1rem;  
  }


  
  }
  
  


/* ************************************ */
@media screen and (min-width: 1001px) {

  
body {
  background-color: whitesmoke;
  font-family: sans-serif;
  font-size: 1rem;
  width: 99%;
  margin-left: 1%;
  margin-right: 1%;
  margin-top: 0px;
}

  #logoImage , #homeImage{
    cursor: pointer;
  }

  .modalContainder1111{
    font-size:2rem;
    z-index:9999; 
    position:absolute; 
    top:5%; 
    left:15%;
    border:2px solid black; 
    width:70%; 
    background-color: white;
    padding:0rem;
    padding-top:1rem;
    display:flex;
    flex-direction: column;
  }

  #pageMainContainerDiv{
    width:98%;
    border-style: outset;
    border-width: 10px; 
    border-top-color: #bfbbbb; 
    border-left-color: white; 
    border-right-color: gray; 
    border-bottom-color: white; 
    margin-left:auto;
    margin-right:auto;
    outline: 1px solid black;
    outline-offset: 0px;
  }

  .pageMainContainerDivStyeInfo{
    background-color:#d7cece;
  }
  .pageMainContainerDivStyeAbout{
    background-color:#69D8FF;
  }

  .aboutUsItemLPage{
    width:80%;
    margin-left:auto;
    margin-right:auto;
    background-color: white;
  }

  .gameContainerDiv{
    width:95%;
    margin-left:auto;
    margin-right:auto;
    background-color: white;
  }

  .aboutItemPage{
    width:80%;
    margin-left:auto;
    margin-right:auto;
    background-color: #69D8FF!important;
  }


  .aboutItemLPage{
    width:80%;
    margin-left:auto;
    margin-right:auto;
    background-color: white!important;
  }

  .aboutCheckBox{
    cursor:pointer;
    width:1rem;
    height:1rem;
    border:1px solid black;
    box-shadow: 3px 3px 1px black;
    position: relative;
    top: 8px; 
  }

  .aboutCheckBox:hover{
    border:2px solid black;
    box-shadow: 3px 3px 1px red;
  }

  .aboutOptionText{
    margin-right:1rem;
    font-size:2.5rem;
    font-family: Narkisim, Helvetica, sans-serif;  
    font-weight:normal;
    cursor:pointer;
  }

  .aboutOptionText:hover {
    color:red;
  }

  .aboutOptionItemDiv{
    width:60%;
    margin-right:15%;
    float: right;
    display:flex;
    flex-direction:row; 
    justify-content: right;
  }

  .aboutPageTextLogo{
    color:#FFE699;
    width: 30%; 
    margin-left:0rem; 
    margin-right:3rem ;
    display: flex; 
    justify-content: center; 
    font-size:2rem;
    font-family: Narkisim, Helvetica, sans-serif; 
    height:6rem; 
    line-height:3rem; 
    font-weight:normal;
  }

  .aboutItemPageTitleText{
    background-color:#FFE699;
    border:1px solid black; 
    border-radius:1rem;
    padding-right:1rem; 
    padding-left:1rem;
    width: auto; 
    margin-left:auto; 
    margin-right:auto; 
    display: flex; 
    justify-content: center; 
    font-size:3rem;
    font-family: Narkisim, Helvetica, sans-serif; 
    height:6rem; 
    line-height:6rem; 
    font-weight:normal;
  }

  .aboutInfoText{
    color:black; 
    font-size:2rem; 
    width:95%;
    margin-left:auto;
    margin-right:auto;
    text-align:right;
    font-family: Narkisim, Helvetica, sans-serif;
  }


  .lpAboutInfoText{
    color:black; 
    font-size:2rem!important;  
    width:95%;
    margin-left:auto;
    margin-right:auto;
    text-align:right;
  }

  .aboutHowToInfoText{
    color:black; 
    font-size:2rem; 
    width:100%;
    margin-left:auto;
    margin-right:auto;
    text-align:right;
  }

  .aboutPageTitleDiv{
    width: 100%;
    display:flex;
    flex-direction:row; 
    justify-content: center; 
    font-size:2rem; 
    padding-top:0.5rem;
  }

  .aboutLPageTitleDiv{
    width: 70%;
    display:flex;
    flex-direction:row; 
    justify-content: center; 
  }

  .aboutBackBtn{
    background-color:#C5E0B4; 
    color:brown;
  } 

  .aboutWhoNeedInfoText{
    color:black; 
    font-size:2rem; 
    width:100%;
    margin-left:auto;
    margin-right:auto;
    text-align:right;
    font-family: Narkisim, Helvetica, sans-serif;
  }

  #screenProposalsContainerDiv1{
    width: 90% ;
    margin-left:auto;
    margin-right:auto;
    display: flex; 
    flex-direction:row;
    justify-content: center; 
  }



  #screenProposalsContainerDiv1{
    display:none
  }



  #screenProposalsContainerDiv{
    width: 90% ;
    margin-left:auto;
    margin-right:auto;
    display: flex; 
    flex-direction:column;
    justify-content: center; 
  }

  .sProposalsContainerDiv{
    width:90%;
    margin-left:auto;
    margin-right:auto;
    display: flex; 
    flex-direction:column-reverse; 
  }


  #mobileProposalContainer{
    display:none
  }

  #proposalsDiv1 , #mProposalsDiv1   {
    background-color:#8aabe5;
    color:white;
    width: 50%; 
    margin-left:auto; 
    margin-right:auto;
    display: flex; 
    flex-direction:row; 
    justify-content: right; 
    font-size:3rem;
  }


  #sProposalsDiv1 , #sProposalsDiv3  {
    background-color:#8aabe5;
    color:white;
    width: 100%; 
    margin-left:auto; 
    margin-right:auto;
    display: flex; 
    flex-direction:row; 
    justify-content: center; 
    font-size:3rem;
  }

  #proposalsDiv2 , #mProposalsDiv2 ,  #mProposalsDiv3  {
    background-color:#8aabe5;
    color:white;
    width: 50%; 
    margin-left:auto; 
    margin-right:auto;
    display: flex; 
    flex-direction:row; 
    justify-content: left; 
    font-size:3rem;
  }

  #sProposalsDiv2   {
    background-color:#8aabe5;
    color:white;
    width: 100%; 
    margin-left:auto; 
    margin-right:auto;
    display: flex; 
    flex-direction:row; 
    justify-content: center; 
    font-size:3rem;
  }






  .headerHomeTab {
    flex: 0.02;
    font-size: 1.1rem;
    text-align: center;
    background-color: white;
    padding: 0.5rem;
    cursor: pointer;
    display:block;
  
  }
  .headerMainDiv {
    margin-top: 0rem;
    margin-bottom: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 1rem;
    display: flex;
    flex-direction: row;
    width: auto;
    align-items: center;
    justify-content: right;
    gap: 1rem;
    row-gap: 2rem;
    column-gap: 2rem;
    padding-left: 2rem;
    padding-right: 2rem;
    flex: 1.0;
  }
  

  .titleLineDiv {
    text-align: center;
    /*  display: flex; */
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
  }


  .responseTitleLineDiv {
    text-align: center;
    /*  display: flex; */
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
  }

  #responseTitleLineDiv {
    text-align: center;
    /*  display: flex; */
    justify-content: left;
    font-size: 1.5rem;
    font-weight: bold;
    width: 100%;
    display:flex;
    flex-direction:row; 
  }



  .mobileMenueContainerDiv{
    display:none;
  }

  .mobileAddNewContainerDiv{
    display:flex;
  }

  .pointsReportTitleDiv {
    margin-top: 0rem;
    margin-bottom: 0.5rem;
    padding-top: 0rem;
    padding-bottom: 0rem;
    display: flex;
    flex-direction: row;
    width: auto;
    align-items: center;
    justify-content: right;
    gap: 1rem;
    row-gap: 2rem;
    column-gap: 2rem;
    padding-left: 2rem;
    padding-right: 2rem;
    height:3.5rem;
    line-height:3.5rem;
    font-size:2rem;
  }
  
  .infoText{
    font-size:1.5rem;
  }

  #footerContainer {
    background-color: lightgray;
    display:block;
  }

  .listStyle {
    list-style-type: none;
    margin-top: 0rem;
  }

  .sodukuBG {
    width: 25%;
    height: auto;
    margin-top: 3rem;
  }

  #tableSizeDiv,
  #gameTypeSelectionDiv,
  #difficultyDiv,
  #sodukuSizeDiv,
  #selectModeDiv {
    font-size: 1.5rem;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    gap: 0rem;

  }

  #allNameSelectionDiv  {
    font-size: 1.5rem;
    font-weight: bold;
    display: flex;
    flex-direction: row-reverse;
    gap: 0rem;

  }

  #nameTypeDiv {
    font-size: 1.5rem;
    font-weight: bold;
    display: flex;
    flex-direction: row;
    gap: 0rem;

  }

  .moreNameButtonTitle{
    width:8rem;
    line-height:4rem;
    padding-top:0.5rem;
  }

  #sodukuSerialNumDiv {
    font-size: 1.5rem;
    font-weight: bold;
    display: flex;
    flex-direction: row;
    justify-content: center; 
    align-content:center; 
    gap:6rem;
  }
    

  .gameTypeSelectionDiv {
    /*  width:60%;
    margin-left:auto;
    margin-right:auto; */
    column-gap: 1rem;
  }

  #sodukuSize,
  #sodukuSerialNum {
    float: right;
    width: 8rem;
    margin-right: 1rem;
    font-size: 1.5rem;
  }


  .sodukuTable {
    margin-left: auto;
    margin-right: auto;
    margin-top: 1rem;
  }

  .sodukuTD {
/*    background-color: yellow; */
    height: 1rem;
    width: 2rem;
  }

  .sodukuTDInput {
    background-color: yellow;
    height: 2.5rem;
    width: 2.5rem;
    font-size: 1.5rem;
    text-align:center;
  }

  .squareBG_1 {
    background-color: yellow;
    color: black;
    font-weight:normal;
    padding:0px!important;
  }

  .squareBG_0 {
    background-color: lightblue;
/*    color: white; */
    color: black;
    font-weight:normal;
    padding:0px!important;
  }

  .squareBG_3 {
    background-color: black;
    color: black;
    width: 3.5rem;
    height: 2.5rem;
    border-radius: 10px;
  }

  .squareBG_selected {
    background-color: white;
    color: black;
    width: 4.5rem;
    height: 3.5rem;
    border-radius: 10px;
    padding:0px;
  }

  .kbItem{
    width:4rem;
    height:3rem;
    line-height:3rem;
    font-size:2.8rem;
    background-color: white;
    border-radius: 8px;
  }

  .sodukuSolveButtonDiv {
    width: 22rem;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0.5rem;
    font-size: 1.5rem;
    display: flex;
    gap: 1rem;
  }

  .sodukuSolveButton {
    width: 10rem;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.5rem;
    border-radius: 6px;
    border: 4px solid rgb(215 216 216);
  }



  .sodukuSizeButtonDiv {
    width: 12rem;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.5rem;
  }

  .sodukuGameTypeButtonDiv {
    width: 18rem;
    margin-left: auto;
    margin-right: auto;
    font-size: 3rem;
  }

  #mokirFiltersPage:hover{
    background-color: gray;
    color:white!important;
  }

  #mokirAbout:hover{
    background-color: gray;
    color:white!important;
  }
  
  .nameInfoActionButton1111:hover{
    background-color: gray;
    color:white!important;
  }

  .mokirTypeButtonDiv {
    width: 25rem;
    margin-left: auto;
    margin-right: auto;
    font-size: 3rem;
  }

  .nameTypeInfoDiv{
    width: 20rem;
    margin-left: auto;
    margin-right: auto;
    font-size: 3rem;
    color:white;
  }

  .nameInfoActionButtonDiv {
    width: 38rem;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.5rem;
    text-align: center;
  }

  .mokirNameInfoActionButtonDiv {
    width: 22rem;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.5rem;
    text-align: center;
  }

  .modalContainder{
    font-size:2rem;
    z-index:9998; 
    position:absolute; 
    top:5%; 
    left:10%;
    border:2px solid black; 
    width:80%; 
    background-color: white;
    padding:0rem;
    padding-top:1rem;
    display:flex;
    flex-direction: column;
    padding-bottom:10rem;
  }

  .modalMessageContainder{
    font-size:2rem;
    z-index:9999; 
    position:absolute; 
    top:0%; 
    left:0%;
    border:2px solid black; 
    width:100%; 
    background-color: white;
    padding:0rem;
    padding-top:1rem;
    display:flex;
    flex-direction: column;
    height:100rem;

    background-color:transparent;
    height:90rem;
  }

  .modalContainder2222{
    font-size:2rem;
    z-index:9999; 
    position:absolute; 
    top:5%; 
    left:15%;
    border:2px solid black; 
    width:70%; 
    background-color: white;
    padding:0rem;
    padding-top:1rem;
    display:flex;
    flex-direction: column;
  }

  .modalItemsContainder{
    font-size:2rem;
    /*
    z-index:9999; 
    position:absolute; 
    top:30%; 
    left:35%;
    border:2px solid black; 
    width:30%; 
    background-color: white;
    padding:0rem;
    padding-top:1rem;
    */
    display:flex;
    flex-direction: column;
  }

  .listItemContainder{
    display:flex; 
    flex-direction:row; 
    justify-content:right; 
    margin-bottom:2px;
    margin-top:2px;
    padding-right:1rem;

    font-size:1.5rem; 
    line-height:1.5rem; 
    font-weight:bold; 
    color:black;
  }


  .listCB{
    width:1.5rem;
    height:1.5rem;
    border-width:5px;
  }

  
  .mokirListCB{
    width:1.5rem;
    border-width:5px;
    font-size:1.5rem; 
    line-height:2rem;
    height:1.2rem;
    border-radius:50%;

  }

  .mokirListCBDiv{
    position:relative; 
    top:0.2rem; 
    height:2rem; 
    width:5rem;
    line-height:2rem;
    text-align:center;
  }  

  .mokirListText{
    font-size:1.5rem;
    height:2rem; 
    line-height:2rem;
    width:auto; 
    margin-right:1rem;
    margin-left:1rem; 
    text-align:right;
  }
  
  .mokirListItemContainder1111{
    font-size:1.5rem;
    height:2rem; 
    line-height:2rem;
    font-weight:normal;
    font-family: Narkisim, Helvetica, sans-serif; 
    background-color:lightblue ;
    color:black;
  }

  .mokirListItemContainder{
  display:flex; 
  flex-direction:row; 
  justify-content:right; 
  margin-bottom:2px;
  margin-top:2px;
  padding-right:0rem;
  font-size:1.5rem;
  height:2rem;
  line-height: 2rem;
  }

  .sodukuDifficultyButtonDiv {
    width: 12rem;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.5rem;
  }

  .sodukuSerialNumButtonDiv {
    width: 15rem;
    /*  margin-left: auto;
      margin-right: auto; */
    font-size: 1.5rem;
  }


  .sodukuGameModeButtonDiv {
    width: 12rem;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.5rem;
  }


  .sodukuSizeButton {
    width: 12rem;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.5rem;
    border-radius: 6px;
    border: 4px solid rgb(215 216 216);
    padding: 0.2rem;
  }

  .sodukuSerialNumButton {
    width: 15.3rem;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.5rem;
    border-radius: 6px;
    border: 4px solid rgb(215 216 216);
    padding: 0.2rem;
  }


  .sodukuDifficultyButton {
    width: 12rem;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.5rem;
    border-radius: 6px;
    border: 4px solid rgb(215 216 216);
    padding: 0.2rem;
    display: flex;
    flex-direction: row;
    justify-content: center;

  }


  .gameTypeButton {
    width: 18rem;
    height: 6rem;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.7rem;
    border-radius: 6px;
    border: 2px solid black;
    padding: 0.3rem;
    cursor: pointer;
  }

  
  .nameOptionsL1Button {
    width: 18rem;
    height: 6rem;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.7rem;
    border-radius: 6px;
    border: 2px solid black;
    padding: 0.3rem;
    cursor: pointer;
    background-color: #afd8e5;
    background-image: linear-gradient(#ff00006e, yellow,#ff00006e);
    color:black;
  }

  .nameOptionsL1Button:hover {
    background-image: linear-gradient(#ff00006e, yellow);
  }


  .backTypeButton {
    width: 12rem;
    margin-left: auto;
    margin-right: auto;
    font-size: 2rem;
    border-radius: 6px;
    border: 4px solid rgb(215 216 216);
    padding: 0.3rem;
    cursor: pointer;
  }

  .userListActionTypeButton {
    width: 7rem;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.5rem;
    border-radius: 6px;
    border: 4px solid rgb(215 216 216);
    padding: 0.3rem;
    cursor: pointer;
  }

  .nameInfoActionButton{
    width: 20rem;
    height:5rem;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.7rem;
    border-radius: 6px;
    border: 2px solid black;
    padding: 0.3rem;
    cursor: pointer;
    background-color: lightblue;
    background-image: linear-gradient(#ff00006e, yellow,#ff00006e);
  }

  .nameInfoActionButton:hover {
    background-image: linear-gradient(#ff00006e, yellow);
  }

  .nameInfoActionButtonWidth{
    width:12rem;
  }

  .mokirNameInfoActionButton{
    width: 80%;
    height:5rem;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.7rem;
    border-radius: 6px;
    border: 2px solid black;
    padding: 0.3rem;
    cursor: pointer;
    background-color: lightblue;
    background-image: linear-gradient(#ff00006e, yellow,#ff00006e);
  }

  .mokirNameInfoActionButton1111:hover{
    background-color: gray!important;
    color:white!important;
  }

  .mokirNameInfoActionButton:hover {
    background-image: linear-gradient(#ff00006e, yellow);
  }

  .sodukuGameModeButton {
    width: 12rem;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.5rem;
    border-radius: 6px;
    border: 4px solid rgb(215 216 216);
    padding: 0.2rem
  }

  #modeContinueDivContainer{
    display:flex; 
    flex-direction:column;
  }   

  #modeContinueOptinsDiv{
    display:flex; 
    flex-direction:row; 
    gap:2rem ; 
    margin-top:1.5rem ; 
    justify-content:center ; 
  } 

  #modeAutoSaveContinueOptinsDiv{
    display:flex; 
    flex-direction:row; 
    gap:2rem ; 
    margin-top:1.5rem ; 
    justify-content:center ;
    width:12rem;
    margin-left:auto;
    margin-right:auto;
  } 

  #selectModeDiv {
    display: flex;
    font-size: 1.5rem;
    margin-right: 0rem;
  }

  #newSodukuName {
    display: flex;
    width: 40%;
    justify-content: center;
    font-size: 1.5rem;
    text-align: right;
  }


  .headerTab {
    flex: 0.5;
    font-size: 1.3rem;
    text-align: center;
    background-color: white;
    padding: 0.5rem;
    cursor: pointer;
    height: 2rem;
    line-height:2rem;
  }


  .headerLoginTab {
    flex: 0.06;
    font-size: 1.3rem;
    text-align: center;
    background-color: white;
    padding: 0.5rem;
    cursor: pointer;
    height: 2rem;
    line-height:2rem;
    display:block;
  }


  .headerTabSpacer {
    flex: 1;
    font-size: 2rem;
    font-weight: bold;
    text-align: right;
    text-align: center;

  }


  .headerMainTitle {
    flex: 1;
    font-size: 2rem;
    font-weight: bold;
    text-align: right;
    text-align: center;

  }

  .loginButton {
    width: 20rem;
    margin-left: auto;
    margin-right: auto;
    font-size: 2rem;
    border-radius: 6px;
    border: 4px solid rgb(215 216 216);
    padding: 0.3rem;
    cursor: pointer;
  }

  .headerMessageDiv {
    font-size: 1.7rem;
    text-align: center;
    background-color: whitesmoke;
    padding-top: 1rem;
  }


  .loginContainerDiv1111 {
    z-index: 999;
    width: 700px;
    height: 900px;
    background-color: gray;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
  }

  .loginContainerDiv{
    display: flex; 
    flex-direction:column;
    justify-content: right;
    gap:1rem;
    width:100%;
  } 

  .loginContainer{
    display:flex;
    flex-direction: column-reverse ;
    justify-content:right;
    gap:1rem;
  }


  .loginFormDiv {
    width: 600px;
    height: 800px;
    margin-left: 50px;
    margin-right: 50px;
    margin-top: 50px;
    margin-bottom: 50px;
    background-color: white;
  }

  .loginTitle {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding-top: 1.5rem;
    padding-bottom: 2rem;
    font-size: 1.5rem;
    font-weight: bold;
  }


  .cancelLoginDiv {
    padding-right: 1rem;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
    height: 1.5rem;
    line-height: 1.5rem;
  }
  
  
.cancelLoginBtn {
  float: right;
  width: 1rem;
  cursor: pointer;
  height: 3rem;
  line-height: 3rem;
  font-size: 1.5rem;
}


  .inputFieldErrorMsg {
    margin-top: 5px;
    margin-right: 2rem;
    width: 80%;
    text-align: right;
    font-size: 1.5rem;
    margin-right: auto;
    margin-left: auto;
    color: red;
  }


  .loginFormInputDiv {
    float: right;
    margin-top: 20px;
    display: flex;
    flex-direction: row;
  }


  .loginFormInput {
    width: 80%;
    text-align: right;
    font-size: 1.5rem;
    height: 2rem;
    line-height: 2rem;
    padding-right: 1rem;
    margin-left: auto;
    margin-right: auto;
    background-color: lightgray;
  }

  

  .loginFormInput::placeholder {
    font-weight: 200;
    font-size: 1.5rem;
    opacity: .5;
    color: red;
  }

  .loginFormTextArea {
    width: 80%;
    text-align: right;
    font-size: 1.5rem;
    line-height: 2rem;
    padding-right: 1rem;
    margin-left: auto;
    margin-right: auto;
    background-color: lightgray;
  }

  .loginButtonDiv {
      display: flex;
      justify-content: center;
    }

  #userNameDiv,
  #userPasswordDiv,
  #userEmailDiv,
  #contactUsMessageDiv,
  #nameDiv,
  #devInfoDiv,
  #genInfoDiv,
  #isRegDiv {
    display: flex;
    flex-direction: column;
  }

  #isRegInputContainer{
    justify-content:right;  
    width:80%;  
    font-size:1.5rem;
  } 


  input.larger {
      width: 1.5Rem;
      height: 1.5rem;
      border: 3px solid black;
  }



  /* ****  */
  .footerMainDiv {
    display: flex;
    flex-direction: row;
    width: auto;
    align-items: center;
    justify-content: right;
    gap: 1rem;
    row-gap: 2rem;
    column-gap: 2rem;
    padding-left: 2rem;
    padding-right: 2rem;
  }

  #footerContainer {
    position: fixed;
    bottom: 0.0rem;
    width: 98%;
    background-color: lightblue;
    z-index:9999;
  }

  .footerTab {
    flex: 0.1;
    font-size: 1.2rem;
    text-align: center;
    background-color: white;
    padding: 0.5rem;
    cursor: pointer;
  }

  #footerMainDiv {
    margin-top: 1rem;
    padding-top: 0rem;
    padding-bottom: 1rem;

  }

  .footerTabSpacer {
    flex: 1;
    font-size: 2rem;
    font-weight: bold;
    text-align: right;
    text-align: center;
    display: block;

  }



  #specificGameDiv {
    width: 15rem;
    display: flex;
    justify-content: center;
    flex-direction: row;
  }

  .sodukuNameSelDiv {
    margin-right: 1Rem;
    height: 40px;
    line-height: 40px;
    font-size: 1.5rem;
  }

  .sodukuNameSel {
    font-size: 1.5rem;
    width: 15rem;
    text-align: right;
  }

  .pointsCalcInfoContainerDiv {
    z-index: 999;
    width: 60%;
    height: 1200px;
    background-color: white;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    border: solid black 2px;
  }

  .pointsCalcInfoDiv {
    width: 100%;
    height: 1100px;
    background-color: white;
  }

  #selectSpecificGameDiv {
    display: flex;
    justify-content: center;
    margin-right: 0rem;
    flex-direction: row;
    width: 100%;
  }
  

  .optionsContainer{
    display:flex; 
    flex-direction: column;
    display:none; 
    overflow-y:scroll; 
    height:30rem; 
    width:15rem;
    border-radius:6px;
  }
  

    
  .underContainer {
    position: relative;
    width: 15rem;
    height: 1rem;
    border: 0px solid #73AD21;
    background-color: red;
  }

  .upperContainer {
    position: absolute;
    top: 0px;
    right: 0;
    width: 15rem;
    height: 1rem;
    border: 0px solid #73AD21;
    background-color:  yellow;  /* transparent; */
  }


  .optionItem{
    height:2.2rem;
    line-height:2.2rem;
    font-size:1.5rem;
    padding:0.2rem;
    padding-right: 0.4rem;
    border:1px solid black;
    width:13.1rem;
    text-align:right;
    background-color: white;
  }


  #headerWelcomeMessageDiv{
    color:red;
    font-size: 2rem;
    font-weight:bold;
    padding-top: 4rem;
    padding-right: 0rem;
    text-align:center;
  }

  .lastSelCell{
    background-color:gray;
    border-radius:50px;
  }

  .waitImage {
    width:auto;
    height:44px;
  } 

  .adminInitOptions{
    font-size:2rem;
    text-align:right; 
    padding-right:1rem;
    padding-left:1rem;
    cursor:pointer;
  }

  .nameApprovalBtn11:hover {
    background-color: gray;
  }
  .nameSuit{
    color: blue;
  }

  .nameNoSuit{
    color:black;
  }

  .mokirNameSuit{
    color: gray;
  }

  .mokirNameNoSuit{
    color:black;
  }

  mokirNameListItemSelected{
    background-color: blue!important;
    color:white;
  }

  .mokirListActionBtn{
    margin-left: auto;
    margin-right: auto;
    cursor:pointer;
    padding-right:0.0rem;
    height:4rem; 
    line-height:2rem;
    width:14rem;
    border:2px solid black;  
    background-color:rgb(243, 245, 122);
    text-align: center; 
    font-size:1.5rem;
  }

  .mokirListActionBtn:hover{
    background-color: gray!important;
    color:white;
  }

  .menueBarOption{
    /* border-top:1px solid black;
    border-bottom:1px solid black; */
    height:3rem;
    line-height:3rem; 
    padding-right:0rem; 
    padding-left:1rem; 
    font-size:1.5rem;
    text-align:right;
    cursor:pointer;
    /* background-color:black;
    color:white; */
    color:black;
  }

  .menueBarOption:hover{
    background-color:white;
    color:black;
  }
  .menueBarOptionImg{
    cursor:pointer;
    
  }

  
  .menuBarOptionIconImage{
    width:auto; 
    height: 2rem; 
    max-height:2rem;
    /* padding-right:1rem;
    padding-top:0.5rem; */
    border-radius: 0.7rem;
    border:2px solid white;
  }

  .headerBarOptionIconImage{
    width:auto; 
    height: 2rem; 
    max-height:2rem;
  }

  .landingMenueContainer{
    width: 16rem; 
    background-color: #c5ef79;
    position: fixed;
    left: calc(99% - 15.5rem);
    top:5rem;
    display:block;
    z-index:999;
    height:46rem;
  }
  

    
  .logoImageDiv{
    width:100%;
    text-align:center;
    background-color: rgb(224, 229, 233);
  }

  .mobileMenueOpenIcon{
    height:7rem;
    background-color:rgb(224, 229, 233);
    display:none;
    cursor: pointer;
  }  

    
  .optionsPhaseContainerV1{
    width: calc(100% - 18rem);
  }

  .optionsPhaseContainerV1DoubleSelf{
    width: calc(50% - 18rem);
    margin-left:auto;
    margin-right:30rem;
  }

  .optionsPhaseContainerV1MemorySelf{
    width: 60%;
    margin-left:auto;
    margin-right:auto;
  }


  .menueBarUpperSpacer{
    height:3rem; 
    line-height:3rem;
    /* border-bottom:1px solid black;  */
  }

  .menueBarUpperSpacerStyle {
    color:black;
    padding-left:2rem;
    padding-right:2rem;
    font-size: 0.1rem; 
    font-weight:bold;
  }

  .menueBarCenterSpacer{
    height:6rem ; 
    /* border-bottom:1px solid black ; 
    border-top:1px solid black; */
  }
  .menueBarBottomSpacer{
    height:3rem; 
    /* border-bottom:1px solid black; */
  }

  .showOnMobile{
    display:none;
  }

  .showOnTablet{
    display:none;
    color:yellow; 
    background-color: green;
  }

  .showOnScreen{
    display:flex;
  }

  .nameDetailsItemBtn{
    cursor:pointer;
    padding-right:0.0rem;
    height:3rem; 
    line-height:3rem;
    width:7rem;
    border:2px solid black; 
    border-radius:8px;
    text-align: center; 
    font-size:1.5rem;
    color:black;
    background-color: lightblue;
    user-select: none
  }

  .nameDetailsItemBtn:hover{
    color:white;
    background-color: gray;
  }

  .showPresentationBtn{
    width:36rem;
    height:7rem;
    font-size:2rem; 
    background-color:#4472C4; 
    color:white; 
    border:10px solid #4472C4; 
    border-top:10px solid lightblue; 
    border-left:10px solid white;  
    border-style: outset;
  }

  .aboutSlide{
    border:5px solid black;
    width:90%;
    margin-left:auto;
    margin-right:auto;
  }

  .slideImage{
    width:100%;
    height:auto;
  }

  .latterTableItem{
     border:1px solid black; 
     padding:0.2rem;
     font-size:1.5rem;
     width:1.5rem;
     text-align: center;
     cursor:pointer;
  }

  .latterTableItem:hover{
    color:white;
    background-color: blue;
  }

  .genderTableItem{
    border:1px solid black; 
    padding:0.2rem;
    font-size:1.5rem;
    width:5rem;
    text-align: center;
    cursor:pointer;
 }

 .genderTableItem:hover{
   color:white;
   background-color: blue;
 }


  .latterTable{
    display:flex;
    flex-direction: row;
    background-color:white;
    width:fit-content;
    margin-left:auto;
    margin-right:auto;
  }

  .wikiAmountSelStyle{
    background-color:red;
    text-align:center;
    color:black;
    width:15rem;
    margin-right:0rem; 
    margin-left:0rem;
    font-size:1.8rem;
    padding-right:1rem;
    padding-left:1rem;
    cursor: pointer;
    font-weight:normal;
  }

  .wikiVeryMuchSelStyle{
    background-color:red;
  }

  .wikiMuchSelStyle{
    background-color:orange;
  }

  .wikiModerateSelStyle{
    background-color:pink;
  }

  .wikiFewSelStyle{
    background-color:yellow;
  }

  .isActiveWikiSelector{
    color:blue!important;
    font-weight:bold;
    border:2px solid black;
    background-image:url("../image/astrik1.png") ;/*linear-gradient(); */
    background-size: auto 2rem;
    background-repeat: no-repeat;
    background-position: right;
  }

  .emphesizedOption{
    text-decoration: underline;
  }

  .propsalName{
    user-select: none;
  }

  .propsalName:hover{
    color:white;
  }

  #nameExplanationPersonalTitleDiv, #mokirNameExplanationPersonalTitleDiv{
    display:flex; 
    flex-direction:row; 
    justify-content: right;
  }

  
  #nameExplanationPersonalButtons{
    background-color:#7c7fd1!important ;
    display:flex; 
    flex-direction:column;
    justify-content: space-between;
    gap:1rem;
    width:20%;
    margin-left:auto;
    margin-right:auto;
  }

  #mokirFiltersGeneralBtnDiv{
    display: flex;
    flex-flow: row nowrap;
    justify-content: center; 
    gap:5rem;
    width:100%;
    margin-left:auto;
    margin-right:auto;
  } 

  .mokirFiltersGeneralBtn{
    width:12rem;
    margin-right:auto; 
    margin-left:auto;
  }

  #mokirFilterActionDiv{
     display: flex;
     flex-flow: row nowrap;
     justify-content: space-around;
     width:90%;
     margin-right:auto;
     margin-left:auto;
     height:7rem;
     line-height:7rem;
     background-color:lightgray;
     padding-right:1.5rem;
     padding-left:1.5rem;
  } 

  .mokirFilterActionBtn{
    width:12rem;
    margin-right:auto; 
    margin-left:auto;
  }

  .mokirAmountResultDiv{
    display:flex;
    flex-direction:row;
    justify-content:center;
    height:5rem;
    line-height:5rem; 
    width:60%;
    margin-left:auto;
    margin-right:auto;
    border:2px solid black;
    background-color: yellow;
    text-align:center;
    font-size:2rem;
    color:black; 
    margin-top:1rem; 
    margin-bottom:1rem;
  
  } 

  .menueBarSubOptionText{
    width:75%;
  }

  .menueBarSubOptionImage{
    width:25%;
    text-align:center;
    height:3rem;
    line-height:4.5rem;
  }

  #versionNote{
    border:1px solid red; 
    width:50%;
    margin-left:auto;
    margin-right:auto;
    color:red;
    padding:1.5rem;
  }

  .nameTypeImage {
    width:auto; 
    max-height: 6rem;
    height: 6rem;
  }

  .filtersTitleManinDiv{
     width:100%;
     display:flex;
     flex-direction:row;
     justify-content:center;
     margin-bottom:0.5rem;
     font-size:2.5rem;
     text-align:center; 
     font-family: Narkisim, Helvetica, sans-serif;
  }

  .nameFiltersTitleManinDiv{
    width:100%;
    display:flex;
    flex-direction:row;
    justify-content:center;
    margin-bottom:1.5rem;
    font-size:3.4rem;
    text-align:center; 
    font-family: Narkisim, Helvetica, sans-serif;
 } 
  
  
  .mAdvanceBtn{
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    width:90%;
    margin-left:auto;
    margin-right: auto;
  }

  .nameNavBtn{
    text-align:center; 
    border-right:0px solid black;
    background-color: white;
    width: 6rem!important;
    border:1px solid black;
    font-size:2.5rem!important;
  }

  .nameNavWideBtn{
    text-align:center; 
    border-right:0px solid black;
    background-color: white;
    width: 12rem!important;;
    border:1px solid black;
    font-size:2.5rem!important;
  }

    
  .isActiveLetter{
    color:white!important;
    background-color:blue!important;
  }

  .allFiltersContainerDiv{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    width:100%;
  }

  .filterGroupContainerDiv{
    width:30%; 
    margin-left:auto; 
    margin-right:auto; 
    display:flex; 
    flex-direction: column;
  }

  .filterGroupContainerTitle{
    height:3rem;
    line-height:3rem; 
    width:50%;
    margin-left:auto;
    margin-right:auto;
    border:4px solid yellow;
    background-color: orange;
    text-align:center;
    font-size:2rem;
    color:black;
    margin-bottom: 1rem;
  }

  .filterGroupContainerOptionsDiv{
    display:flex;
    flex-direction:column;
    padding-right:0.5rem;
    padding-top:0.5rem;
    height:12rem;
    line-height:2rem; 
    width:80%;
    border:4px solid brown;
    background-color: rgb(239 230 216);
    text-align:right;
    font-size:1.5rem;
    color:black;
  } 
  
  .filterPageGroupBtnDiv{
    display: flex;
    flex-flow: row nowrap;
    justify-content: center; 
    gap:3rem;
    width:100%;
  }

  .filterPageGroupBtn{
    width:45%; 
    text-align:center;
  }

  .filterItemInput{
    font-size: 1.5rem;
    text-align:right;
  }

  .filterItemTitle{
    font-size: 1.5rem; 
    margin-right: 2rem; 
    text-align:left; 
    margin-left: 1rem; 
    color:blue;
  }

  .filterItemTitleRight{
    font-size: 1.5rem; 
    margin-right: 6rem; 
    text-align:right; 
    margin-right: 1rem; 
    color:blue;
  }

  .filterItemShortTitle{
    width: 8rem; 
  }
  .filterItemLongTitle{
    width: 13rem; 
  }
  
  .filterItemVeryLongTitle{
    width: 17rem; 
  }
  
  .filterItemExtraLongTitle{
    width: 20rem; 
  }
  
  .filterBoxTitle{
    color: red;
    font-size: 2rem;
    margin-top: 1rem;
    margin-right: 2rem;
    margin-bottom: 0rem;
    text-align:center;
  }

  .notOnMobile{
    display:block;
  }

  .wikiBarContainerDiv{
    display:flex;
    flex-direction:row;
    width:60rem;
    margin-left:auto;
    margin-right:auto;
    justify-content: right;
    border:1px solid black;
  }

  .isActiveTableRow{
    color:black!important;
    background-color:rgb(235, 199, 134)!important;
  }

  .menuBarItemContainer{
    display:flex; 
    flex-direction: row; 
    justify-content: right;
    /* border-bottom:4px solid gray; */
  } 

  .menuBarItemContainerT1{
    display:flex; 
    flex-direction: row; 
    justify-content: right;
    /* border-bottom:4px solid gray;
    border-top:4px solid gray; */
  } 

  .filtersTitleManin{
    display:flex; 
    flex-direction: row;
    justify-content: right;
    width:50%;
  }

  .filtersTitleManinT2{
    width:50%;
    text-align:left;
  }

  .filtersTitle1Item{
    color:black;
    font-size: 3rem;;
  }

  .filterItemInputSelectDiv{
    margin-left: 1rem; 
    width:4rem;
    font-size: 1.5rem;
    height: 2rem;
    line-height: 2rem;
    padding-bottom: 0.5rem;
  }

  .groupT1Row{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    width:100%;
  }

  .groupT1Col{
    display: flex;
    flex-flow: column-reverse;
    width:100%;
  }

  .groupT1{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    width:100%;
  }

  .groupT2{
    display: flex;
    flex-flow: rowe;
    justify-content: center;
    font-size: 1.5rem;
    width:100%;
    gap:0.5rem;
  }

  .filterButton{
    height:3.5rem;
    line-height:3.5rem; 
    width:10%;
    border:2px solid black;
    background-color: orange;
    text-align:center;
    font-size:2rem;
    color:black;
    background-image: linear-gradient(#ff00006e, yellow,#ff00006e);
  }

  .filterButton:hover {
    background-image: linear-gradient(#ff00006e, yellow);
  }

  .width90{
    width:90%;
    margin-left:auto;
    margin-right:auto;
    text-align: center;
  }

  .bodyMainContainderDiv{
    display:flex; 
    flex-direction:column;
    width:99%; 
    background-color:white;
    color:black;
    border: 3px solid  white; 
    margin-left:auto; 
    margin-right:auto;
    height:fit-content;
  }

  .catItemsColumn{
    width:33%;
    display:flex; 
    flex-direction: column;
    margin-right:2rem; 
    justify-content :right;
    line-height:1.4rem;
  }

  .filterItemRow{
    font-size:1.5rem; 
    line-height:1.5rem;
    width:17rem; 
    margin-right:1rem;
    margin-left:1rem; 
    text-align:right;
  }

  .filterOptionsDivHeight0{
    height:14rem;
    margin-bottom:1rem;
  }
  
  .filterOptionsDivHeight1{
    height:14rem;
    margin-bottom:1rem;
  }
  
  .filterOptionsDivHeight2{
    height:18rem;
    margin-bottom:1rem;
  }
  
  .filterOptionsDivHeight4{
    height:25rem;
    margin-bottom:1rem;
  }
  
  .filterOptionsDivHeight5{
    height:28rem;
    margin-bottom:1rem;
  }
  
  .filterOptionsDivHeight6{
    height:35rem;
    margin-bottom:1rem;
  }
  
  .filterOptionsDivHeight8{
    height:45rem;
    margin-bottom:1rem;
  }

  .filterGroupTitleDiv{
    color: red;
    font-size: 2rem;
    margin-top: 1rem;
    margin-right: 2rem; 
    margin-bottom: 0rem;
    text-align:center;
    display:flex;
    flex-direction:row;
    justify-content:center; 
  }

  .mokirFiltersContainerDiv{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    width:100%;
  }

  .mokirFiltersContainer{
    display:flex;
    flex-direction:column;
    padding-top:0.5rem;
    line-height:2rem; 
    width:100%;
    border:4px solid white;
    background-color: white;
    text-align:right;
    font-size:1.5rem;
    color:black;
  }

  .mokirListWeightDiv{
    width:5rem;
    font-size:1.5rem;
  }

  .mokirListWeight{
    width:3rem;
    font-size:1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
  }

  .mokirListFilterTextDiv{
    width:100%; 
    display:flex;
    flex-direction:row;
    justify-content: right;
    font-size:1.5rem;
  }

  .mokirListFilterTextContainer{
    width:100%; 
    display:flex;
    flex-direction:row;
    justify-content: right;
    font-size:1.5rem;
  }

  .mokirListNameText{
    height:2rem; 
    line-height:2rem;
    margin-left:0.5rem;
    font-size:1.5rem;
  } 

  .width49{
    width:49%;
    margin-left:auto;
    margin-right:auto;
    text-align: center;
  }

  .width32{
    width:32%;
    margin-left:auto;
    margin-right:auto;
    text-align: center;
  }

  .widthT1{
    width:32%;
    margin-left:auto;
    margin-right:auto;
    text-align: center;
  }

  .mokirFiltersGroupContainerDiv{
    width:49%;
    margin-left:auto;
    margin-right:auto;
    text-align: center;
  }
  
  .mokirNameListItem{
    font-size: 1.5rem;
    color:black;
  }

  .errorMessageContainerPivot{
    background-color:lightGray;
    height:2rem;
    width:1rem;
    margin-left:auto;
    margin-right:auto; 
  }

  .errorMessageContainerDiv{
    background-color:white;
    display:flex; 
    flex-direction:column;
    justify-content:center;
    height:20rem;
    width:40rem;
    margin-left:auto;
    margin-right:auto; 
    margin-top:5%;
    margin-bottom:auto; 
    border:2px solid black;
  }

  .modalPageContainerDiv{
    background-color:white;
    display:flex; 
    flex-direction:column;
    justify-content:center;
    height:fit-content;
    width:80%;
    margin-left:auto;
    margin-right:auto; 
    margin-top:5%;
    margin-bottom:auto; 
    border:2px solid black;
  }

  .errorMessageTitle{
    height:3rem;
    line-height:3rem;
    background-color: black;
    color:white;
    text-align: center;
  }

  .errorMessageBody{
    margin-top:4rem;
    margin-bottom:4rem;
    height:4rem;
    line-height:4rem;
    background-color: white;
    color:black;
    text-align: center;
  }

  .modalPageBody{
    margin-top:3rem;
    margin-bottom:2rem;
    height:fit-content;
    /* line-height:28rem; */
    background-color: white;
    color:black;
    text-align: center;
    font-size:2rem;
  }

  .errorMessageContBtn{
    border:2px solid white; 
    border-radius:20px;
    width:10rem;
    margin-left:auto;
    margin-right:auto;
    height:3rem;
    line-height:3rem;
    background-color: black;
    color:white;
    text-align: center;
    font-size:1.5rem;
    cursor: pointer;
  }

  .notes{
    font-size:1.3rem;
    text-align:right;
  }

  .viewerCounterContainerDiv{
    background-color: black; 
    color:white;
    padding-left: 1rem;
    padding-right: 1rem;
    display:flex; 
    flex-direction:row;
    gap:1rem; 
    justify-content:center;
    border:1px solid black;
    border-radius: 20px; 
    width:fit-content;
    margin-left:auto;
    margin-right:auto;
  }

  .viewerCounterContainerDiv4War{
    background-color: transparent; 
    color:white;
    padding-left: 1rem;
    padding-right: 1rem;
    display:flex; 
    flex-direction:row;
    gap:1rem; 
    justify-content:center;
    border:0px solid black;
    border-radius: 20px; 
    width:fit-content;
    margin-left:auto;
    margin-right:auto;
    position:relative;
    top:-90px;
  }

  .viewerCounterTitle{
    width:auto;
    text-align:center;
    font-size:2rem;
    height:3rem;
    line-height:3rem;
  }

  .viewerCounterAmount{
    width:auto;
    text-align:center;
    background-color: black; 
    color:white; 
    font-size:2rem;
    height:3rem;
    line-height:3rem;
    font-weight: bold;
  }

  .tempVersionNote{
    border:1px solid red; 
    width:50%;
    margin-left:auto;
    margin-right:auto;
    color:red;
    padding:1.5rem;
    text-align:right;
    font-size:2rem;
    font-family: Narkisim, Helvetica, sans-serif;
  }

  .titleAndButtonDiv{
    display:flex;
    flex-direction:row;
    gap:2rem;
    height:3rem;
    line-height: 3rem;
    font-size:2.3rem;
  }

  .titleAndButtonBtnDiv{
    height:4rem;
    line-height:4rem;
  }

  .titleAndButtonBtn{
    font-family: Narkisim, Helvetica, sans-serif ;
    padding-left:1rem;
    padding-right:1rem;
    background-color:black;
    color:white;
    font-size: 3rem;
    border-radius: 5rem;
  }

  .titleAndButtonBtn4War{
    font-family: Narkisim, Helvetica, sans-serif ;
    padding-left:1rem;
    padding-right:1rem;
    background-color:yellow;
    color:black;
    font-size: 2.5rem;
    border-radius: 5rem;
  }

  .alwaysHide{
    display:none;
  }

  .cardPack {
    height:10rem;
    border:1px solid green;
    width:15rem;
    margin-left: auto;
    margin-right: auto;
  }

  .doubleCardPack {
    height:15rem;
    border:0px solid green;
    width:15rem;
    margin-left: auto;
    margin-right: auto;
    background-color: transparent;
  }

  .uperCardBackSide{
    background-image: url(../image/cardBackSide.jpg);
    background-repeat: no-repeat;
    width: auto;
    height: 10rem;
    background-size:cover;
  }

  .onGameCard{
    border:1px solid red;
    height:266px;
    width:12rem;
    margin-left: auto;
    margin-right: auto;
  }

  .onDoubleGameCard{
    border:1px solid red;
    height:15rem;
    width:15rem;
    margin-left: auto;
    margin-right: auto;
  }

  .onDoubleSelfGameCard{
    border:0px solid red;
    height:15rem;
    width:15rem;
    margin-left: auto;
    margin-right: auto;
  }

  .rotate45deg{
    transform: rotate(45deg);
  }

  .rotate90deg{
    transform: rotate(90deg);
  }

  .moveIt100{
    transform: translate(-100px,100px)
  }

  .invitationStatusLine{
    display: flex; 
    flex-direction:row;
    justify-content: right;
    gap:1rem;
    /* border-bottom: 2px solid black; */
    height:4rem;
    line-height:4rem;
  }

  .playerIdContaiverDivStyle{
    display: flex; 
    flex-direction:column;
    justify-content: right;
    gap:0.2rem;
    cursor: pointer;
    font-size:1.5rem;
  }

  .playerIdUpperContaiverDivStyle{
    display: flex; 
    flex-direction:column;
    justify-content: right;
    gap:0.2rem;
    cursor: pointer;
    font-size:1.5rem;
    width:7rem;
  }

  .playerListImage{
    margin-left:auto;
    margin-right:auto; 
    height: 6rem; 
    width:auto;
    border-radius: 3rem;
    border: 6px solid purple;
  }

  .gameListImage{
    margin-left:auto;
    margin-right:auto; 
    height: 7rem;
    border:2px solid black;
  }

  .gameUpperListImage{
    margin-left:auto;
    margin-right:auto; 
    height: 5rem;
    border:2px solid black;
    border-radius: 1rem;
  }


  .subGameListImage{
    margin-left:auto;
    margin-right:auto; 
    height: 5rem; 
    width:auto;
    border:3px solid black;
    border-radius: 1rem;
  }


  .playerRefreshListImage{
    margin-left:auto;
    margin-right:auto; 
    height: 3rem; 
    width:auto;
    cursor: pointer;
  }

  .playersPanelDiv{
    max-height: 26rem;
    overflow: scroll;
    padding-right:1rem;
    padding-left:1rem;
    padding-bottom:1rem;
    width:fit-content; 
    width:100%;
    min-width:12rem;
    display: flex; 
    flex-direction:column;
    justify-content: right;
    gap:1rem;
    /* border:1px solid green; */
  }

  .gmaeListUpperPanelDiv{
    height: fit-content; 
    /* overflow-x: scroll; */
    padding-bottom:1rem;
    width:100%;
    display: flex; 
    flex-direction:column;
    justify-content: right;
    gap:0.2rem;
  }

  .presentedCardStyle{
    margin-top:0rem;
    text-align:center;
    width:100%;
    margin-left:auto;
    margin-right:auto;
    color:blue; 
    background-color:transparent;
    font-weight:bold;
  }

  .invitatedGameNameStyle{
    width:fit-content;;
    text-align:right;
  }

  .actUserImageDivStyle{
    width:auto!important;
    line-height: 4rem; 
    height: 4rem; 
    max-height: 4rem;
  }

  .actUserImageStyle{
    width:auto; 
    height: 4rem; 
    max-height: 12rem;
  }

  .invitatedStatusUpperLine{
    width:100%;
    display: flex; 
    flex-direction:row;
    justify-content: right;
    gap:1rem;
    height: 4rem;
    line-height: 4rem;
  }

  .activeCardTableContainerStyle{
    display:flex;
    flex-direction: row;
  }

  .localWinStatusDiv{
    width:50%; 
    display:flex;
    flex-direction: column;
    font-size:2rem;
  }

  .selectedGameSize{
    border:2px solid green;
    background-color:green;
    color:white;
    padding-right:0.5rem;
    padding-left:0.5rem;
    font-size:2rem;
    font-weight:bold;
    border-radius: 16px;
    height:2.5rem;
    line-height:2.5rem;
    text-align:center;
  }

  .nonSelectedGameSize{
    border:2px solid black;
    background-color:white;
    color:black;
    padding-right:0.5rem;
    padding-left:0.5rem;
    font-size:1.5rem;
    font-weight:normal;
    border-radius: 16px;
    height:2.5rem;
    line-height:2.5rem;
    text-align:center;
  }
  
  .selCardsAmount{
    cursor: pointer;
    font-size:2rem;
  }

  .scoreReportContainer{
    margin-top:2rem;
    width:30%;
    margin-left:auto;
    margin-right:auto;
    border:2px solid red;
    display:none;
    text-align:center;  
  }

  .gameLayeoutContainerDiv{
    display: flex;   
    flex-direction: row; 
    width:100%;
  }

  .doubleRemoteCardContainedDiv{
    width:70%; 
    margin-left: auto; 
    margin-right: auto;
    text-align: center;
  }

  .playAreaContainerTitleDiv{
    border:2px solid black;
    background-color: aquamarine ;
    
    color:black;
    text-align:center;
    display:flex;
    flex-direction:row;
    gap:1rem;
    justify-content: center;
    width:100%;
    font-size:2rem;
  }

  .playersNameContainerDiv{
    width:100%;
    margin-left:auto;
    margin-right:auto;
    display: flex;
    flex-direction: row; 
    gap:0rem; 
    border:2px solid black;
    font-size:2rem;
  }

  .remoteCardContainedDiv{
    width:50%; 
    margin-left: auto; 
    margin-right: auto;
  }

  .localCardContainedDiv{
    width:50%; 
    margin-left: auto; 
    margin-right: auto;
  }

  .localQImageImg{
    width:120px;
    height:120px;
    margin-left:auto;
    margin-right:auto; 
  }

  .powerIcon{
    height:100px;
    width:auto;
  }

  .slogan{
    text-align:center;
    font-size:3rem;  
  }

  .game1RemotePlayerContainerDiv{
    background-color:bisque;
    padding-left:1rem;
    padding-right:1rem;
    direction:rtl;
    width:100%;
    margin-left:auto;
    margin-right:auto;
    display: flex;
    flex-direction: column; 
    gap:0rem; 
    border:2px solid black;
  }

  .actCardStockContainerTemp{
    width:160px; 
    margin-left:auto;
    margin-right:auto;
    height: 1px;
  }

  .localPlayerScoreDiv{
    text-align:center;
    width:20%;
    font-size:2rem;
    min-width:fit-content;
  }

  .allPlayerCotainerDiv{
    font-size:2rem; 
    display: flex; 
    flex-direction:row-reverse;
    justify-content: right;
    gap:1rem;
    flex-wrap: wrap;
  }

  .invitationActions{
    width:100%;
    display: flex; 
    flex-direction:row;
    justify-content: right;
    gap:1rem;
  }

  .scoreContanerDiv{
    display:flex; 
    flex-direction:row;
    width:100%;
    justify-content: right;
    gap:1rem;
  }

  .div90flexcolumn{
    width: 90%;
    margin-left:auto;
    margin-right:auto;
    display:flex;
    flex-direction:column; 
  }

  .div90flexrowright{
    width: 90%;
    display:flex;
    flex-direction:row; 
    justify-content: right;
  }

  .div100flexcolumn{
    width: 100%;
    display:flex;
    flex-direction:column; 
  }

  .div50flexcolumn{
    width:50%;
    margin-left: auto;
    margin-right: auto;
    display:flex;
    flex-direction:column; 
  }

  .div100flexrowright{
    width: 100%;
    display:flex;
    flex-direction:row; 
    justify-content: right;
  }

  .div100flexrowcenter{
    width: 100%;
    display:flex;
    flex-direction:row; 
    justify-content: center;
  }

  .div100flexrowreversecenter{
    width: 100%;
    display:flex;
    flex-direction:row-reverse; 
    justify-content: center;
  }

  .div90flexrowcenter{
    width: 90%;
    margin-left:auto;
    margin-right:auto;
    display:flex;
    flex-direction:row; 
    justify-content: center;
  }

  .loginUserTypeBtnDiv{
    width:50%;
    margin-left: auto;
    margin-right: auto;
    display:flex;
    flex-direction:column; 
  }
  
  .mainTabStyle{
    width:8rem;
    min-width:6rem;
    font-size:1.5rem;
    font-weight:bold;
    color:black;
    text-align:center;
    border-left:2px solid black;
    border-top:2px solid black;
    border-right:2px solid black;
    border-radius: 8px 8px 0px 0px;
    background-color: white;
    cursor: pointer;
    margin-left:0.0rem;
    margin-right:1.0rem;
  }

  .mainTabStyleSelected{
    background-color:aquamarine;  /*lightblue; */
  }

  .optionsTabStyleSelected{
    background-color:lightblue; 
  }
  
  .mainTabStyleNotSelected{
    background-color: lightGray;
    border-bottom:0px solid black;
  }

  .blurIt{
    filter: blur(0px);
  }

  /* *******************  inage flip 3d *********************************** */

  .flip-box {
    background-color: transparent;
    width: 110px;
    height: 110px;
    border: 1px solid #f1f1f1;
    perspective: 1000px;
    background-image:url("../image/winningSmall.png") ;
    background-size: contain;  
  }

  .flip-box-trivia {
    background-color: transparent;
    width: 220px;
    height: 220px;
    border: 1px solid #f1f1f1;
    perspective: 1000px;
    background-image:url("../image/winningSmall.png") ;
    background-size: contain;  
  }

  .flip-box-front {
    background-color:lightgreen ;/* #bbb; */
    color: black;
    font-size:4rem; 
    font-weight:bold;
    height:110px;
    line-height:110px;
  }

  .flip-box-front-trivia {
   
    font-size:4rem; 
    font-weight:bold;
    height:220px;
    width:220px;
    line-height:220px;
  }

  .flip-box-front-trivia-QM {
    background-color:red ;/* #bbb; */
    color: white;
  }
  
  .flip-box-front-trivia-ANS {
    background-color:lightgreen ;/* #bbb; */
    color: black;
  }

  /* *******************  inage flip 3d *********************************** */


  .picGroupStyle {
    cursor:pointer;
    border:0px solid black; 
    height:fit-content; 
    background-color:transparent;
    width:60%;
    margin-left: auto;
    margin-right: auto;
  }

  .picGroupStyle1111:hover  .gameListImage {
    filter: blur(0px)!important;
  }

  .picGroupStyle:hover  {
    border:5px solid yellow; 
    border-radius: 1rem; 
    overflow:hidden;
  }

  .picSelectedGroupStyle {  
    border:5px solid yellow;
    border-radius: 1rem;
    overflow:hidden;      
  }

  .gameOptionsTabsContainerDivStyle{
    width:fit-content;
    border-bottom:0px solid black;
    margin-left: auto;
  } 

  .approveInvitedGameDiv{
    width:fit-content;
  }

  .regMessageDivStyle{
    display:flex;
    flex-direction:row;
    gap:1.0rem;
    font-size:2rem;
    text-align:right;
    margin-bottom:0.0rem;
    width:95%;
    justify-content:right;
    font-size:1.5rem;
  }

  .regNewMemberPwdMessageStyle{
    width:25rem;
    text-align:right;
    font-size:1.5rem;
    text-align:right;
    margin-right:5rem;
    color:red;
    font-weight:bold; 
  }

  .regMemberItemsDivStyle{  
    display:flex;
    flex-direction:row;
    gap:1.0rem;
    font-size:2rem;
    text-align:right;
    margin-bottom:0.0rem;
    width:95%;
    justify-content:right;
  }

  .regMemberItemsInputDivStyle{
    text-align:right;
    width:50%;
    font-size:1.5rem;;
  } 

  .regMemberItemsInputDivContainerStyle{
    display:flex;
    flex-direction:row;
    gap:1.0rem;
    font-size:2rem;
    text-align:right;
    margin-bottom:0.0rem;
    width:95%;
    justify-content:right;  
  }

  .imageAssignContainerDiv{
    display:flex;
    flex-direction:row;
    gap:1.0rem;
    font-size:2rem;
    text-align:right;
    margin-top:1.0rem;
    margin-bottom:0.0rem;
    width:95%;
    justify-content:right;
  }

  .imageAssignDetailsContainerDiv  {
    display:flex;
    flex-direction:row;
    gap:0.0rem;
    justify-content:right;
    text-align:right;
    width:50%;
    font-size:1.5rem;
  }

  .imageFileAssignDetailsContainerDiv { 
    margin-right:3rem; 
    height: 4rem; 
    line-height: 4rem;
    display: flex;
    flex-direction: row;
    justify-items: normal;
    gap:0.2rem;
  }

  .imageFileAssignDetailsDiv { 
    width:4rem;
    height:4rem ;
    border-radius:20px;
    background-color:white;
    border:1px solid black;
    z-index:1;
    position:relative;
    left:3rem;
  }

  .regPlayerImageCB{
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }

  .game1PlayersContainerDiv{
    width:100%;
    margin-left:auto;
    margin-right:auto;
    display: flex;
    flex-direction: row; 
    gap:0rem; 
    border:2px solid black;
  }

  .isNotActiveImage{
    background-color:lightgray!important;
  }

  .isActiveImage{
    background-color:black!important;
    border-radius:0px 0px 10rem 10rem;
  }

  .resPlayerImageContainerDivStyle{
    width:10%;
  }

  .currActPlayerImage{
    border-color: yellow!important;
  }

  .adminAddFamilyRecords{
    display:flex;
    flex-direction:row;
    gap:1.0rem;
    font-size:1.5rem;
    text-align:right;
    margin-bottom:0.0rem;
    width:100%;
    justify-content:right; 
  } 

  .adminAddFamilyRecordsTitle{ 
    display:flex;
    flex-direction:row;
    gap:1.0rem; 
    width:40%;
    justify-content: right;
  }

  .adminAddFamilyRecordsIndex{
    display:flex;
    flex-direction:row;
    gap:1.0rem; 
    width:20%;
    justify-content: right;
    background-color: white;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }

  .adminAddFamilyRecordsNumCards{
    display:flex;
    flex-direction:row;
    gap:1.0rem; 
    width:fit-content;
    justify-content: right;
    background-color: transparent;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }

  .startAsGuest{
    cursor:pointer;
    height:3rem;
    line-height:3rem;
  }

  .startAsGuest:hover {
    text-decoration: underline;
  }

  .go2Registr{
    cursor:pointer;
    height:3rem;
    line-height:3rem;
  }

  .go2Registr:hover {
    text-decoration: underline;
  }

  .go2Login{
    cursor:pointer;
    height:3rem;
    line-height:3rem;
  }

  .go2Login:hover {
    text-decoration: underline;
  }

  .noUserOptSel{
  background-color: black;
  color:white;
  }

  .noUserOptNotSel{
    background-color: white;
    color:black;
  }

 .elemFullSize{
  width:100%;
 }

 .gameTypeListContainerSmallSize{
    width:30%;
    margin-left: auto;
    margin-right: 0rem;
 }

  #option1TitleDiv1111 .aboutPageTitleDiv{
    display:none;
  }

  .startGameImage{
    margin-left:auto;
    margin-right:auto; 
    height: 6rem; 
    width:auto;
    border:6px solid transparent;
  }

  .game1CardsContainerDiv{
    width:100%;
    margin-left:auto;
    margin-right:auto;
    display: flex;
    flex-direction: row; 
    gap:0rem; 
    border:2px solid black;
  }

  .triviaCardsAmountDiv {
    display:flex;
    flex-direction:row; 
    justify-content: center;
    gap:0.5rem;
    width:42rem; 
    margin-left:auto;
    margin-right:auto;
    background-color:yellow;
    font-size:1.5rem;
  }

  .memGameText4Image{
    border-radius:1rem;
    width:100%;
    height:4rem;
    line-height:4rem;
    font-size:2rem;
    font-weight:bold;
    color:black;
  }

  .adminAddMemebrTitleStyle{
    display:flex;
    flex-direction:row;
    gap:1.0rem;
    font-size:1.5rem;
    text-align:right;
    margin-bottom:0.0rem;
    width:95%;;
    justify-content:right;
  }

  .headerUserSettingStyle{
    cursor: pointer;
    width:40%;
    height: 3rem;
    line-height:4.5rem;
    max-height: 12rem;
    margin-top: 0rem;
    margin-bottom: 0rem;
    text-align:left; 
  }

  .headerLoginTextDivStyle{
    padding-right:1rem; 
    color:red;
    font-size:2rem;
    height:3rem; 
    line-height: 3rem;
    text-align:left;
    width:9rem;
    background-color: rgb(224, 229, 233);
  }

  .userGameIDStyle{
    background-image: linear-gradient(to bottom, white, gray);
    cursor:pointer;
    color:white;
    padding-top:0.5rem;
    padding-right:0.5rem;
    width:90%;
    margin-right:auto;
    margin-left:auto;
    text-align:right;
    border-bottom:1px solid black;
    font-size: 2rem;
  }

  .userGameIDBtnStyle{
    background-image: linear-gradient(to bottom, white, gray);
    cursor:pointer;
    color:white;
    padding-top:0.5rem;
    padding-right:0.5rem;
    width:90%;
    margin-right:auto;
    margin-left:auto;
    text-align:center;
    border-bottom:1px solid black;
    font-size: 2rem;
    border-radius: 1rem;
  }

  .userGameIDStyleNotSelected{
    background-image: linear-gradient(to bottom, white, gray);
  }

  .userGameIDStyleSelected{
    background-image: linear-gradient(to bottom, white, blue);
  }

  #triviaGameLevelOpesContaner{
    width: 100%;
    display:flex;
    flex-direction:row; 
    justify-content: center;
    gap:1rem;   
  }

  #triviaProblemLevelOpesContaner{
    width: 100%;
    display:flex;
    flex-direction:row; 
    justify-content: center;
    gap:1rem;   
  }
    
  #triviaProblemLevelOpesDivContaner{
    width:100%;
    gap:1rem;
  }

  #userOwnGamesNameTitle{
    text-align:right;
    width:fit-content;
    font-weight:bold;
    margin-bottom:0.5rem;
  }

  #userOwnGamesNameList{
    text-align:right;
    width:40rem;
    font-weight:bold;
    margin-bottom:0.5rem;
  }

  #responseTitleLineContainerDiv{
    width: 100%;
    display:flex;
    flex-direction:row; 
    justify-content: right;
    padding-top:1rem;  
  }


  /* #mainBarOption1:hover ~ #mainBarOption1ImageDiv {
    background: white;
  }

  #selHome:hover ~ #homeImageDiv {
    background: white;
  }

  #mainBarOption2:hover ~ #mainBarOption2ImageDiv {
    background: white;
  }

  #selCurrentStatus:hover ~ #selCurrentStatusSelectImageDiv {
    background: white;
  }

  #selAbout:hover ~ #selAboutUsImageDiv {
    background: white;
  }

  #selContactUs:hover ~ #selContactUsImageDiv {
    background: white;
  }

  #selQAIntro:hover ~ #selQAIntroImageDiv {
    background: white;
  } */



}