* {
   box-sizing: border-box;
}

html {
   // font-family: Opensans, sans-serif;
   line-height: 1.8;
}

html,
body {
   height: 100%;
}

body {
   margin: 0;
   line-height: 20px;
   font-size: 14px;
   font-weight: 400;
   color: #172b4d;
   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Droid Sans, Helvetica Neue, sans-serif;
}

main {
   height: 100%;
   display: flex;
   flex-direction: column;

   background-repeat: no-repeat;
   background-size: cover;
   background-position: center center;
}

#app {
   height: 100%;
   position: relative;
   z-index: 1;
   overflow: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
   font-weight: 500;
   margin: 0 0 8px;
}

h3,
h4,
h5,
h6 {
   font-size: 16px;
   line-height: 20px;
}

ol,
ul {
   list-style: none;
   margin: 0;
   padding: 0;
}

img {
   width: 100%;
}

a {
   color: #172b4d;
   cursor: pointer;
   text-decoration: none;
   &:hover {
      color: #091e42;
   }
   &:visited {
      color: inherit;
   }
   &:active {
      outline: 0;
   }
}

input[type='search']:focus {
   outline: 0;
}

button {
   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Droid Sans, Helvetica Neue, sans-serif;
}

textarea {
   color: #172b4d;
   outline: none;
   overflow: auto;
   width: 100%;
   display: block;
   border: none;
   box-shadow: inset 0 0 0 2px #dfe1e6;
   margin-bottom: 12px;
   padding: 8px 12px;
   color: inherit;
   margin: 0;
   background-color: #fafbfc;
   box-sizing: border-box;
   font: inherit;
   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Droid Sans, Helvetica Neue, sans-serif;
   &.checklist-new-item-text {
      background-color: #fff;
      box-shadow: inset 0 0 0 2px #0079bf;
      color: #172b4d;
      cursor: text;
      float: none;
      resize: vertical;
      width: 100%;
      margin: 4px 0 0;
   }
}
textarea:focus {
   outline: none;
}

p {
   margin: 0 0 8px;
}

input:not([type='file']),
textarea {
   transition-duration: 85ms;
   transition-property: background-color, border-color, box-shadow;
   transition-timing-function: ease;
}

label:not(.label-toggler) {
   color: #5e6c84;
   display: block;
   font-size: 12px;
   font-weight: 700;
   line-height: 16px;
   margin-bottom: 4px;
   margin-top: 12px;
}

hr {
   background-color: #091e4221;
   border: 0;
   height: 1px;
   margin: 16px 0;
   padding: 0;
   width: 100%;
   box-sizing: initial;
}

.label {
   &-green {
      background-color: $label-green;
      &.label-hover {
         @include label-hovering($label-green-shadow);
      }
   }
   &-yellow {
      background-color: $label-yellow;
      &.label-hover {
         @include label-hovering($label-yellow-shadow);
      }
   }
   &-orange {
      background-color: $label-orange;
      &.label-hover {
         @include label-hovering($label-orange-shadow);
      }
   }
   &-red {
      background-color: $label-red;
      &.label-hover {
         @include label-hovering($label-red-shadow);
      }
   }
   &-purple {
      background-color: $label-purple;
      &.label-hover {
         @include label-hovering($label-purple-shadow);
      }
   }
   &-blue {
      background-color: $label-blue;
      &.label-hover {
         @include label-hovering($label-blue-shadow);
      }
   }
   &-navy {
      background-color: $label-navy;
      &.label-hover {
         @include label-hovering($label-navy-shadow);
      }
   }
   &-gray {
      background-color: $label-gray;
      &.label-hover {
         @include label-hovering($label-gray-shadow);
      }
   }
}
