/** Document style */


html{
  font-size: 20px;
  height: 100%;
  scrollbar-gutter: stable;
}

body{
  margin: 0;
  color: var(--octopus-color-text);
  font-family: var(--octopus-font-family);
  font-size: 0.8rem;
  overflow-x: hidden;
  background: var(--octopus-secondary-lighter);
  min-height: 100vh;
  overscroll-behavior-y: contain;
  display: flex;
  flex-direction: column;
}

main, #app{
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}


/** Octopus style */

.octopus-app{
  flex-grow: 1;

  *:focus-visible{
    outline: none;
    box-shadow: 0 0 10px 1px var(--octopus-primary) !important;
  }

  span.material-design-icon{
    display: flex;
    justify-content: center;
    align-items: center;
  }

  input {
    font-family: var(--octopus-font-family);
  }

  // Display an asterisk for required fields
  label.required:after {
    content: "*";
    font-weight: bold;
    margin-left: 3px;
  }

  /** Link style */
  a{
    word-break: break-word;
    text-decoration: none;
    color: var(--octopus-primary);
  }

  /** Break style */
  hr{
    height: 0.01rem;
    color: var(--octopus-text-disabled);
  }

  /** Flex style */
  .d-flex-low-importance{
    display: flex;
  }

  .d-flex-column{
    display: flex;
    flex-direction: row;

    @media (width <= 960px) {
      flex-direction: column;
    }
  }

  .d-flex-row{
    display: flex;
    flex-direction: column;

    @media (width <= 960px) {
      flex-flow: row wrap;
    }
  }

  .justify-space-between {
    justify-content: space-between;
  }


  @media (width <= 960px) {
    .d-flex:not(.flex-column){
      flex-wrap: wrap;
    }
  }
 
  /** Background style */
  .octopus-bg{
    background: var(--octopus-background);
  }

  .really-light-secondary-bg{
    background: var(--octopus-secondary-lighter);
  }

  .light-primary-bg{
		background-color: var(--octopus-primary-transparent) !important;
	}

	.really-light-primary-bg{
		background-color: var(--octopus-primary-really-transparent) !important;
	}

  .blue-bg{
    background-color: var(--octopus-tertiary);
  }

  .bg-secondary-light{
		background: var(--octopus-secondary-lighter) !important;
	}

	.bg-complementary{
		background: var(--octopus-complementary-color) !important;
	}

  .bg-gradient{
    background: var(--octopus-primary);
    background:var(--octopus-gradient);
  }

  .text-blue-octopus{
    color: var(--octopus-tertiary) !important
  }


  /** Page style */
  .page-box {
    background-color: var(--octopus-background);
    padding: 1rem 3rem 3rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;

    @media (width <= 1400px) {
      padding: 2rem;
    }

    @media (width <= 1200px) {
      padding: 1rem;
    }

    @media (width <= 450px) {
      padding: 1rem 0.5rem;
    }
  }

  /** Module box style */
  .module-box{
    background-color: var(--octopus-background);
    padding: 1.3rem;
    margin: 1.5rem 0.5rem 0;
    border-radius: var(--octopus-border-radius);
    flex-grow: 1;
    overflow: auto;
    border: 2px solid var(--octopus-secondary-lighter);

    @media (width <= 500px){
      margin: 0.3rem;
      padding: 0.8rem;
    }
  }


  /** Hide / Show style */
  .hide-phone{
    @media (width <= 960px) {
      display: none !important;
    }
  }

  .hide-small-screen{
		@media (width <= 500px) {
			display: none !important;
		}
	}

  .show-small-screen{
    display: none !important;
		@media (width <= 500px) {
			display: flex !important;
		}
	}

  .show-phone{
    display: none;

    @media (width <= 960px) {
      display: block !important;
    }
  }

  .show-phone-flex{
    display: none !important;

    @media (width <= 960px) {
      display: flex !important;
    }
  }

  .show-small-phone-flex{
    display: none !important;

    @media (width <= 380px) {
      display: flex !important;
    }
  }

  .hid{
    display: none !important;
  }

   /* Line clamp */
  .basic-line-clamp{
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: var(--octopus-line-clamp);
    -webkit-box-orient: vertical;
    word-break: break-word;
  }

  .three-line{
    --octopus-line-clamp: 3;
  }

  .ten-line{
    --octopus-line-clamp: 10;
  }

  /** Cursor style */
  .c-hand{
    cursor: pointer;
  }

  .c-hand-auto {
    cursor: auto;
  }

  /** Various styles */
  .small-text{
    font-size: 0.7rem;
  }
  
  .word-break-word{
    word-break: break-word;
  }

  .border, .rounded{
		border-radius: var(--octopus-border-radius);
	}


  .li-style-none{
    list-style: none;
  }

	.font-italic{
		font-style: italic;
	}
    
  .logo-octopus{
    width: 250px;

    @media (width <= 960px) {
      width: 200px;
    }

    @media (width <= 200px) {
      width: 90%;
    }
  }
}