@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

* {
  font-family: 'Roboto', sans-serif;
  font-weight:normal;
  font-style:normal;
}

:root {
  --rows: 30;
  --columns: 30;
}

body {
  width: 98vw;
  max-width: 100vw;
  height: 100vh;
  background-color: #0C2D48;
  color: white;
}

#container {
    width: 99%;
    height: 72%;
    display: grid;
    margin: auto;
    background-color: white;
    grid-template-columns: repeat(var(--columns), 1fr);
    grid-template-rows: repeat(var(--rows), 1fr);
    
}

svg {
  position: absolute;
}

#svgPath {
  stroke: yellow;
  stroke-width: 5;
  fill: none;
}

.animatePath {
  animation: dash 5s linear forwards;
}



.gridElem {
    border-color: lightblue;
    border-width: 1px;
    border-style: solid;
}


.closedSetCell {
    background-color: #54A2D2;
}
.closedSetAnimation {
  animation: stretch-closedSet 1s;
}

.openSetCell {
    background-color: #2F6D80;
}
.openSetAnimation {
  animation: stretch-openSet 0.5s;
}


.startCell {
    background-color: blueviolet;
    animation: startEndCellAnimation 0.3s;
}


.endCell {  
    background-color: blueviolet;
    animation: startEndCellAnimation 0.3s;
}


.wall {
    background-color: rgb(2, 2, 19);
    border: none;
    animation: stretch-wall 0.5s;
}


.pathCell {
    background-color: yellow;
    border: none;
    animation: stretch-path 0.3s;
}


#buttonsDiv {
    width: 95%;
    /* min-width: 1500px; */
    margin-bottom: 20px;
    margin-left: 10px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
}

#buttonsDiv2 {
  margin-bottom: 30px; 
  margin-left: 10px; 
  width: 150px; 
  height: min-content; 
  display: block;
}

.btn{
  display: inline;
  margin: none;
  padding: 0px;
  width: 125px;
  height: 30px;
  background-color: #2c82b4;
  color: white;
  /* border-radius: 5px; */
  border-color: #000000;
  border-width: 1px;
  border-spacing: 5px;
  font-size: 15px;
}

.buttonsDiv p {
  white-space: nowrap;
  display: inline;
  margin-left: 30px;
  font-size: 15px;
}


button:hover {
    cursor: pointer;
    background-color: #00a8e0;
    animation: buttonHover 1s;
}
button:not(:hover) {
    background-color: #2E8BC0;
    animation: buttonNotHover 1s;
}

button:active {
    background-color: #00afe9;
}

.dropdowns {
  outline: none;
  background-color:rgb(105, 38, 168);
  color: white;
  margin-left: 10px;
}

.dropdowns:hover {
  background-color: rgb(131, 61, 196);
  animation: dropdown-hover 1s;
}


#rulesDiv {
  display: inline;
  overflow: hidden;
  font-size: 14px;
  /* width: 400px; */
  left : calc(50vw - 200px);
  top : 25%;
  /* border: none; */
  border: 1px solid white;
  border-radius: 5px;
  /* background-color: #2372a0; */
  background-color: #113a5c;
 /*MAKE THE TEXT UNSELECTABLE*/
  -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


#rulesDiv > * {
  margin-left: 5px;
  margin-right: 5px;
}

#rulesDiv h2 {
  display: inline;
  margin-left: 10px;
}


.closedRules {
  animation: closedDiv 0.5s;
  height: 30px;
  width: 200px;/*------------------------------------*/
}

.openedRules {
  animation: openedDiv 0.5s;
  height: 500px;
  width: 400px;
}

.clickableParagraphs {
  color: blueviolet;
}
.clickableParagraphs:hover {
  color:rgb(126, 42, 204);
  cursor: pointer;
}
.clickableParagraphs:active {
  color:rgb(113, 44, 177);
}


#contacts {
  padding-bottom: 20px;
}





/* "allow diagonal" checkbox--------------------------------------------------------------------------- */

.checkboxLabel {
  /* display: block; */
  z-index: 0;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 15px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.checkboxLabel input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.checkboxLabel:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.checkboxLabel input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.checkboxLabel input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.checkboxLabel .checkmark:after {
  left: 6px;
  top: 3px;
  width: 4px;
  height: 9px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* -----------------------------------------------------------------------------------   */
nav {
  z-index: 1;
}

nav ul {
  float: left;
  z-index: 1;
  /* text-align: center; */
  /* margin: 0px 20px 0px 0px; */
  padding: 5px 0px 0px 0px;
}


nav ul li {
  z-index: 1;
  list-style: none;
  width: 200px;
}

nav ul li a {
  z-index: 1;
  display: block;
  color: white;
  text-decoration: none;
  height: 25px;
}

.dropdownTitle:hover {
  color: rgb(105, 38, 168);
  animation: dropdownTextHover 0.5s;
}
.dropdownTitle:not(:hover) {
  color: white;
  animation: dropdownTextNotHover 0.5s;
}


nav ul li ul {
  display: none;
  visibility: hidden;
  position: absolute;
  /* margin: 20px 0px 0px 0px; */
  padding: 0px;
  background-color: rgb(105, 38, 168);
  border-radius: 0px 0px 5px 5px;
}

nav ul li:hover ul {
  animation: openDropdown 0.5s;
  display: block;
  visibility: visible;
}

nav ul li ul:hover {
  display: block;
  visibility: visible;
}


nav ul li ul li {
  width: 200px;
}

nav ul li ul li:hover {
  background-color: rgb(131, 61, 196);
  cursor: pointer;
  animation: dropdownOptionHover 0.7s;
}
#pathLengthParagraph, #executionTimeParagraph {
  cursor: auto;
}

nav ul li li:not(:hover) {
  animation: dropdownOptionNotHover 0.7s;
}
#calculateButton:hover {
  animation: calculateButtonHover 0.7s;
}

#calculateButton:not(:hover) {
  color: yellow;
  animation: calculateButtonNotHover 0.7s;
}


/*---------------------------------------------------------------*/

#errorDiv {
  position: absolute;
  visibility: hidden;
  background-color: red;
  color: white;
  border: 1px solid black;
  border-radius: 5px;
  text-align: center;
  width: 30vw;
  left: 35vw;
  height: 10vh;
  top: 45vh;
}

.errorDivAnimation {
  visibility: visible;
  animation: errorDivAnimation 2s;
  
}