.list-group{
    max-height: 300px; /*limit the number of element that appear in the list withou scroll*/
    margin-bottom: 10px;
    overflow:scroll;
    -webkit-overflow-scrolling: touch;
}

.square {
  opacity:0;
    margin-top: 8px;
    background-color: var(--redColor);
    border-radius: 3px;
    color: var(--bgColor);
    padding-top: 85%;
    position: relative;
    font-size: 14px;
    line-height: 14px;
    letter-spacing: 0.3px;
    word-spacing: 0;
    font-weight: normal;
}

.square_content {
  position: absolute;
    width: 100%;
    height: 100%;
    object-position: center center;
    object-fit: cover;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;

    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2px;
    box-sizing: border-box;
}



/*Compass*/

.compass {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0px auto;
  background: #222;
  padding: 0px;
  border-radius: 40px;
  border: 5px solid #444;
  overflow: hidden;
}

.compass .disc {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 200;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYWFnXzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iODg1LjM4NnB4IiBoZWlnaHQ9Ijg4NS4zODVweCIgdmlld0JveD0iMCAwIDg4NS4zODYgODg1LjM4NSIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgODg1LjM4NiA4ODUuMzg1IiB4bWw6c3BhY2U9InByZXNlcnZlIj48Y2lyY2xlIGZpbGw9IiNCRTE2MjIiIGN4PSI0NDIuNjkyIiBjeT0iNDQyLjY5MyIgcj0iNDI1LjYyMiIvPjxjaXJjbGUgZmlsbD0iIzQwOEFBNyIgY3g9IjQ0Mi42OTMiIGN5PSI0NDIuNjkzIiByPSIzODYuOTI5Ii8+PGNpcmNsZSBmaWxsPSJub25lIiBzdHJva2U9IiMxQzc4OTQiIHN0cm9rZS13aWR0aD0iMzcwIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS1kYXNoYXJyYXk9IjI4LjU3MzUsMjcuNTg4MiIgY3g9IjQ0Mi42OTIiIGN5PSI0NDIuNjkzIiByPSIyNTAuMjY2Ii8+PGNpcmNsZSBmaWxsPSJub25lIiBzdHJva2U9IiM0MDhBQTciIHN0cm9rZS13aWR0aD0iMjAiIHN0cm9rZS1saW5lam9pbj0iYmV2ZWwiIGN4PSI0NDIuNjkzIiBjeT0iNDQyLjY5MyIgcj0iMzkwLjU2NiIvPjxwYXRoIGZpbGw9IiNGMUYyQzQiIGQ9Ik00NDIuNjkzLDI2YzIzMC4xMzIsMCw0MTYuNjkyLDE4Ni41Niw0MTYuNjkyLDQxNi42OTNjMCwyMzAuMTM0LTE4Ni41NjEsNDE2LjY5Mi00MTYuNjkyLDQxNi42OTJDMjEyLjU2LDg1OS4zODUsMjYsNjcyLjgyNywyNiw0NDIuNjkzQzI2LDIxMi41NiwyMTIuNTYsMjYsNDQyLjY5MywyNiBNNDQyLjY5MywwYy01OS43NTIsMC0xMTcuNzMsMTEuNzA4LTE3Mi4zMjQsMzQuOGMtNTIuNzE5LDIyLjI5OC0xMDAuMDYsNTQuMjE0LTE0MC43MDcsOTQuODYyQzg5LjAxNCwxNzAuMzEsNTcuMDk4LDIxNy42NSwzNC44LDI3MC4zNjlDMTEuNzA4LDMyNC45NjMsMCwzODIuOTQxLDAsNDQyLjY5M3MxMS43MDgsMTE3LjczLDM0LjgsMTcyLjMyNGMyMi4yOTgsNTIuNzE5LDU0LjIxNCwxMDAuMDYsOTQuODYyLDE0MC43MDdjNDAuNjQ3LDQwLjY0Nyw4Ny45ODgsNzIuNTYzLDE0MC43MDcsOTQuODYxYzU0LjU5NCwyMy4wOTIsMTEyLjU3MiwzNC44LDE3Mi4zMjQsMzQuOHMxMTcuNzI5LTExLjcwOCwxNzIuMzIzLTM0LjhjNTIuNzE5LTIyLjI5OCwxMDAuMDYtNTQuMjE0LDE0MC43MDctOTQuODYxczcyLjU2NC04Ny45ODgsOTQuODYyLTE0MC43MDdjMjMuMDkyLTU0LjU5NCwzNC44LTExMi41NzIsMzQuOC0xNzIuMzI0cy0xMS43MDgtMTE3LjczLTM0LjgtMTcyLjMyNGMtMjIuMjk4LTUyLjcxOS01NC4yMTUtMTAwLjA1OS05NC44NjItMTQwLjcwN0M3MTUuMDc2LDg5LjAxNCw2NjcuNzM1LDU3LjA5OCw2MTUuMDE3LDM0LjhDNTYwLjQyMywxMS43MDgsNTAyLjQ0NCwwLDQ0Mi42OTMsMEw0NDIuNjkzLDB6Ii8+PHBhdGggZmlsbD0iI0YxRjJDNCIgZD0iTTQ0Mi42OTMsNTAuMTY3YzUyLjk5OSwwLDEwNC40MDIsMTAuMzc1LDE1Mi43ODIsMzAuODM4YzQ2LjczOSwxOS43NjksODguNzIsNDguMDc0LDEyNC43NzQsODQuMTI5YzM2LjA1NiwzNi4wNTYsNjQuMzYsNzguMDM2LDg0LjEzLDEyNC43NzVjMjAuNDYzLDQ4LjM3OSwzMC44MzgsOTkuNzgzLDMwLjgzOCwxNTIuNzgzcy0xMC4zNzUsMTA0LjQwMy0zMC44MzgsMTUyLjc4M2MtMTkuNzcsNDYuNzM5LTQ4LjA3NCw4OC43MTktODQuMTMsMTI0Ljc3NGMtMzYuMDU1LDM2LjA1NS03OC4wMzUsNjQuMzYtMTI0Ljc3NCw4NC4xM2MtNDguMzgsMjAuNDYyLTk5Ljc4MywzMC44MzgtMTUyLjc4MiwzMC44MzhjLTUzLDAtMTA0LjQwMy0xMC4zNzYtMTUyLjc4My0zMC44MzhjLTQ2Ljc0LTE5Ljc3LTg4LjcyLTQ4LjA3NS0xMjQuNzc1LTg0LjEzYy0zNi4wNTYtMzYuMDU2LTY0LjM2MS03OC4wMzYtODQuMTMtMTI0Ljc3NWMtMjAuNDYzLTQ4LjM3OS0zMC44MzgtOTkuNzgzLTMwLjgzOC0xNTIuNzgyUzYwLjU0MiwzMzguMjksODEuMDA1LDI4OS45MWMxOS43NjktNDYuNzM5LDQ4LjA3NS04OC43Miw4NC4xMy0xMjQuNzc1YzM2LjA1NS0zNi4wNTYsNzguMDM2LTY0LjM2MSwxMjQuNzc1LTg0LjEzQzMzOC4yOSw2MC41NDIsMzg5LjY5NCw1MC4xNjcsNDQyLjY5Myw1MC4xNjcgTTQ0Mi42OTMsMzAuMTY3Yy0yMjcuODMyLDAtNDEyLjUyNywxODQuNjk0LTQxMi41MjcsNDEyLjUyNnMxODQuNjk1LDQxMi41MjUsNDEyLjUyNyw0MTIuNTI1YzIyNy44MzEsMCw0MTIuNTI0LTE4NC42OTMsNDEyLjUyNC00MTIuNTI1UzY3MC41MjQsMzAuMTY3LDQ0Mi42OTMsMzAuMTY3TDQ0Mi42OTMsMzAuMTY3eiIvPjxwb2x5Z29uIGZpbGw9IiMxQzc4OTQiIHBvaW50cz0iNTAwLjE0NSwzODUuMjQzIDYwNS4xOTIsNDQyLjY5MSA1MDAuMTQ3LDUwMC4xNDUgNDQyLjY5Miw2MDUuMTk0IDM4NS4yNDIsNTAwLjE0NiAyODAuMTkzLDQ0Mi42OTQgMzg1LjI0MSwzODUuMjM3IDQ0Mi42OTIsMjgwLjE5MSIvPjxwb2x5Z29uIGZpbGw9IiM0MDhBQTciIHBvaW50cz0iNDQyLjY5NCwzNjEuNDQ1IDU1Ny41OTcsMzI3Ljc4NyA1MjMuOTQ0LDQ0Mi42OTIgNTU3LjU5OSw1NTcuNTk4IDQ0Mi42OTMsNTIzLjk0MiAzMjcuNzksNTU3LjU5OCAzNjEuNDQyLDQ0Mi42OSAzMjcuNzg3LDMyNy43ODciLz48cG9seWdvbiBmaWxsPSIjNDA4QUE3IiBwb2ludHM9IjM5OC41MDEsMzk4LjUgNDQyLjY5MiwzMTcuNjkzIDQ4Ni44ODgsMzk4LjQ5OCA1NjcuNjk0LDQ0Mi42OTMgNDg2Ljg4OCw0ODYuODg2IDQ0Mi42OTQsNTY3LjY5MyAzOTguNDk3LDQ4Ni44ODYgMzE3LjY5Miw0NDIuNjkzIi8+PHBvbHlnb24gZmlsbD0iIzFDNzg5NCIgcG9pbnRzPSI0NDIuNjk0LDM4MC4xOTUgNTMxLjA4MSwzNTQuMzA0IDUwNS4xOTQsNDQyLjY5MiA1MzEuMDgyLDUzMS4wODIgNDQyLjY5NCw1MDUuMTkyIDM1NC4zMDYsNTMxLjA4MiAzODAuMTkyLDQ0Mi42OTEgMzU0LjMwNCwzNTQuMzA0Ii8+PHRleHQgdHJhbnNmb3JtPSJtYXRyaXgoMSAwIDAgMSA4NS43NjM3IDQ1OS44Nzc0KSIgZmlsbD0iI0YxRjJDNCIgZm9udC1mYW1pbHk9IidDZW50dXJ5JyIgZm9udC1zaXplPSI2MiI+VzwvdGV4dD48dGV4dCB0cmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAxIDQxNy40Mjk3IDc4MC42MDk5KSIgZmlsbD0iI0YxRjJDNCIgZm9udC1mYW1pbHk9IidDZW50dXJ5JyIgZm9udC1zaXplPSI2MiI+UzwvdGV4dD48dGV4dCB0cmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAxIDc0OS4wOTU3IDQ1OS44Nzc0KSIgZmlsbD0iI0YxRjJDNCIgZm9udC1mYW1pbHk9IidDZW50dXJ5JyIgZm9udC1zaXplPSI2MiI+RTwvdGV4dD48dGV4dCB0cmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAxIDQxNy40Mjk3IDEzOS4xNDUpIiBmaWxsPSIjRjFGMkM0IiBmb250LWZhbWlseT0iJ0NlbnR1cnknIiBmb250LXNpemU9IjYyIj5OPC90ZXh0Pjwvc3ZnPg==);

  width: 100%;
  height: 100%;
  background-size: 100%;
}

.compass .arrow {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1000;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYWFnXzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iODg1LjM4N3B4IiBoZWlnaHQ9Ijg4NS4zODVweCIgdmlld0JveD0iMCAwIDg4NS4zODcgODg1LjM4NSIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgODg1LjM4NyA4ODUuMzg1IiB4bWw6c3BhY2U9InByZXNlcnZlIj48bGluZSBmaWxsPSJub25lIiBzdHJva2U9IiMxQzc4OTQiIHN0cm9rZS13aWR0aD0iNS42Mjg1IiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHgxPSI0NDYuMTE0IiB5MT0iMzg2LjMxNCIgeDI9IjQ0Ni4xMTQiIHkyPSI0OTguNCIvPjxwb2x5Z29uIGZpbGw9IiMxQzc4OTQiIHBvaW50cz0iNDAzLjY5Niw0NDAuNTk0IDQ0Ni4xMTQsMTI3LjIwNyA0ODguNTMxLDQ0MC41OTQiLz48cG9seWdvbiBmaWxsPSIjMUM3ODk0IiBwb2ludHM9IjQwMy42OTcsNDQwLjM1NyA0NDYuMTE0LDc1OC4wMTUgNDg4LjUzLDQ0MC4zNTciLz48Y2lyY2xlIGZpbGw9IiMxQzc4OTQiIGN4PSI0NDYuMTE1IiBjeT0iNDQ0LjExIiByPSIxMi41MDEiLz48Y2lyY2xlIGZpbGw9IiMxQzc4OTQiIGN4PSI0NDYuMTE0IiBjeT0iNDQ0LjExIiByPSI5Ii8+PGxpbmUgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQkUxNjIyIiBzdHJva2Utd2lkdGg9IjUuNjI4NSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiB4MT0iNDQyLjEwNiIgeTE9IjM4Ni4zMTQiIHgyPSI0NDIuMTA1IiB5Mj0iNDk4LjQiLz48cG9seWdvbiBmaWxsPSIjQkUxNjIyIiBwb2ludHM9IjM5OS42ODgsNDQwLjU5NCA0NDIuMTA2LDEyNy4yMDggNDg0LjUyMiw0NDAuNTk0Ii8+PHBvbHlnb24gZmlsbD0iI0Y2RjZGNiIgcG9pbnRzPSIzOTkuNjg4LDQ0MC4zNTYgNDQyLjEwNSw3NTguMDE0IDQ4NC41MjIsNDQwLjM1OCIvPjxjaXJjbGUgZmlsbD0iIzFDNzg5NCIgY3g9IjQ0Mi4xMDYiIGN5PSI0NDQuMTExIiByPSIxMi41MDEiLz48Y2lyY2xlIGZpbGw9IiM0MDhBQTciIGN4PSI0NDIuMTA2IiBjeT0iNDQ0LjExMSIgcj0iOSIvPjwvc3ZnPg==);

  width:100%;
  height: 100%;
  background-size: 100%;
}

/*imported from pensatermos*/
h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    ul,
    ol {
      font-family: 'HelveticaNeueLTStd-HvEx';
      margin: 0;
      padding: 0;
    }

    h2 {
      font-weight: normal;
    }

    body {
      margin: 0 auto;
      max-width: 800px;
      display: flex;
      flex-direction: column;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Ubuntu", "Roboto", "Noto Sans", "Droid Sans", sans-serif;
      line-height: 30px;
      position: relative;
      zoom: 75%; /*zoom for see all the page in the screen*/
    }

	  body{
		  padding-top: 20px;
	  }

    html,
    body {
      touch-action: manipulation;
    }

    a {
      color: #000;
      background-color: transparent;
      text-decoration: none;
      font-weight: bolder;
    }

    a:hover {
      text-decoration: underline;
    }

    b,
    strong {
      font-weight: bolder;
    }

    img {
      border-style: none;
    }

    .scoreboard {
      display: flex;
      justify-content: center;
      flex-direction: column;
      margin-bottom: 20px;
    }

    .scoreboard > div {
      align-self: center;
      line-height: 1.5;
      margin: 8px 20px;
    }

    span.pangrama {
      font-weight: bolder;
      color: #ec4a49;
    }

    span.last_word {
      font-weight: bolder;
      color: #e74c3c;
    }



    #test-word {
      text-align: center;
		text-transform: uppercase;
		font-weight: 700;
		color: #ec4a49;
    }

    #cursor {
      font-weight: 100;
      color: #5997db;
      margin-top: -5px;
    }

    .cursor-container {
      font-size: 2rem;
      position: relative;
      margin: 10px auto 50px auto; /* Arriba | Derecha | Abajo | Izquierda */
    }

    #input-word {
      /*display: flex;*/
      height: 30px;
    }



    .container-notifications {
      position: relative;
      display: flex;
      justify-content: center;
      margin-top: 8px;
    }

    #message {
      position: absolute;
      background-color: #ec4a49;
      color: white;
      border-radius: 3px;
      padding: 5px;
      z-index: 100;
      pointer-events: none;
    }

    .message-ok {
      background-color: darkolivegreen !important;
    }

    .message-shake{
      animation:shake .4s cubic-bezier(.36,.07,.19,.97) both;
      transform:translate3d(0,0,0);
      backface-visibility:hidden;perspective:1000px
    }
    @keyframes shake{
      25%,75%{transform:translate3d(1px,0,0)}
      50%{transform:translate3d(0,0,0)}
    }

    .hide {
      opacity: 0;
      transition: opacity 1500ms;
    }

    .hide-initial {
      opacity: 0;
    }

    .nav-container {
      position: absolute;
      top: 20px; /*before cut 30*/
      right: 20px;
    }


    h2 {
      text-align: center;
      margin-top: 30px;
      margin-bottom: 10px;
      clear: both;
    }

    .modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 2000;
      background-color: rgba(255, 255, 255, 0.96);
      overflow-y: auto;
      overflow-x: hidden;
    }

    .modal .container {
      max-width: 800px;
      margin: 20px auto;
      margin-top: 10px;
    }

    .modal-content {
      margin: 40px;
      margin-top: 20px;
      border-style: none;
    }

    
    .close-button-container {
      text-align: center;
    }
    

    .close-icon-container {
      float: right;
      z-index:  999 
    }

    img.ok-icon {
      width: 10px;
      height: auto;
      margin-left: -14px;
      margin-right: 4px;
    }

    img.close-icon {
      width: 28px;
      height: auto;
      margin-right: 20px;
      margin-top: 20px;
    }

    img.ok-icon,
    img.close-icon {
      user-select: none;
    }

    #solution-list {
      list-style-type: none;
      column-count: 2;
      column-gap: 25px;
      position: relative;
      text-align: center; /* This center the columns and the text*/
    }

    @media (min-width: 500px) {
      #solution-list {
        column-count: 3;
      }
    }

    @media (min-width: 600px) {
      #solution-list {
        column-count: 4;
      }
    }

    #solution-list li {
      width: 100%;
      break-inside: avoid-column;
      line-height: 1.5;
      letter-spacing: 0.005em;
      padding-top: 7px;
      padding-left: 24px;
    }

    .words-yesterday-container { 
      margin-top: 20px;
      text-align: center;
    }

    #found-yesterday {
      text-align: center;
    }
	  
	  	
		#titlogo {
			margin-top: 0px;
      
		}	  
		#titlogo span{
			display: none;
		}	  
		#titlogo img{
			width: 450px;
			max-width: 80%;
		}

		#id_icons_writers {
			margin-top: 0px;
		}	 
  
		#id_icons_writers img{
			width: 100px;
			max-width: 100%;
		}


    .checked {
      color: orange;
    }



    /*show-def using for see meanings*/
    .show-def{font-weight:bolder}
    .show-def{cursor:pointer}
    .show-def:hover{text-decoration:underline}

    
    .show-def_yest{cursor:pointer} /*new*/
    .show-def_yest:hover{text-decoration:underline}

    .title{font-weight:700}

    div.copyright{margin-top:10px}
    .scoreboard div.copyright{margin-bottom:20px}


    /*remove horizontal scrolls*/
    #id_visual_main_list{
      overflow-x: hidden;
    }
    #id_result_list{
      overflow-x: hidden;
    }

    .input_text{
      text-align: center;
    }

    .result_test_row{
      opacity:1;
      padding: 0px 20px;
      display: flex;
      flex-direction: column;
    }

    .legend{
      display: flex;
      width: 100%;
      padding: 10px;
      justify-content: space-around;
      margin-top: 5px;
    }
    .icon {
      width: 25px;
      height: 25px;
      background-size: 25px 25px;
      }
      .area {
        background-image: url("../img/entrevilas/img/area.png");
      }
      .location {
        background-image: url("../img/entrevilas/img/location.png");
      }
      .population {
        background-image: url("../img/entrevilas/img/population.png");
      }
      .county {
        background-image: url("../img/entrevilas/img/village.png");
      }
      .n_county {
        background-image: url("../img/entrevilas/img/compass.png");
      }

      .result_test{
        padding-bottom: 20px;
      }

      .result_test_row{
      padding: 0px 10px;
      display: flex;
      flex-direction: column;
    }

    .result_test_dif{
      opacity: 1;
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 2px 2px;
      width: 100%;
      order: 2;
    }

    .row_name{
      font-weight: bold;
      width: 100%;
      padding: 5px 0 6px 0;
      order: 1;
      font-family: 'HelveticaNeueLTStd-HvEx';
      text-rendering: geometricPrecision;
      text-indent: 2px;
    }



  /*Style for floating button*/


  .menu {
  width: 55px;
  height: 55px;
}


.item {
  position: absolute;
  bottom: 0px;
  width: 55px;
  height: 55px;
  border: 2px solid #e7e7e7;
  background-color: white;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  cursor: pointer;
  text-align: center;
  line-height: 55px;
}

i {
  font-size: 10px; /*24px*/
  color: #222222;
}

.fa-xl{
  font-size:1.5em !important;
};



/*END Style for floating button*/

/*styles for click */
.a_pointer{
  cursor: pointer;
}  

.a_pointer:hover{
      background-color: #e7e7e7;
      border: 2px solid #e7e7e7;
      border-radius: 30px;
    }

.img_pointer:hover{
  background-color: #e7e7e7;
  border: 2px solid #e7e7e7;
  border-radius: 30px;
}

/*new title format*/
title_l {
  position: absolute;
  margin-left:0%;
  width: 15%;
  text-align: right;
}

title_m {
  position: absolute;
  margin-left:15%;
  width: 70%;
  text-align: center;
}

title_r {
  position: absolute;
  margin-left:85%;
  width: 15%;
  z-index: 998;
}