@import url('https://fonts.googleapis.com/css2?family=Hind:wght@300;400;500;600;700&display=swap');

/**
* SETTINGS
**/
$bg_color: #0a9f9a;
$up_color: #8adf8a;
$down_color: #f79292;
$unknown_color: rgb(245, 214, 158);

* {
	padding: 0;
	margin: 0;
}

html {
  font-size: 100%;
  scroll-behavior: smooth;

  body {
    padding: 10px;
    font-family: 'Hind', sans-serif;
    font-size: 1rem;
    color: #3D3D3D;
    background-image: url(../img/bush.png);
    background-attachment: fixed;


    a, a:visited {
      color: inherit;
      text-decoration: inherit;

      &:hover {
        text-decoration: underline;
      }
    }

    .container {
      padding: 0;
      margin: 0 auto;
      max-width: 1000px;
    }

    h1, h2, h3, h4 {
      margin-top: .8rem;
      margin-bottom: .8rem;
    }

    h1 {
      font-size: 2.4rem;
      text-align: center;
      margin: 3rem 0;
    }

    h2 {
      font-size: 1.4rem;
      margin-top: 0;
      padding-top: 0;
    }

    h3 {
      font-size: 1.4rem;
      background-color: $bg_color;
      margin: 0;
      padding: .8rem;
      color: rgb(240, 240, 240);
      position: relative;

      small {
        font-size: .9rem;
      }

      .context-menu {
        position: absolute;
        right: .7rem;
        top: .7rem;
        cursor: pointer;
        font-size: 1rem;
      }
    }


    img {
      vertical-align: sub;
    }

    table {
        border: 1px solid #ABC;
        font-size: 14px;
        border-spacing : 0;
        border-collapse : collapse;

        th {
          background-color: #e6EEEE;
          border: 1px solid #9ccece;
          padding: 0.3rem;

        }

        td {
          color: #3D3D3D;
          padding: 0.3rem;
          background-color: #FFF;
          border: 1px solid #9ccece;
          text-align: center;
          vertical-align: middle;

          img {
            vertical-align: middle;
          }

          &.right {
            text-align: right;
          }
        }

        &#tasks_tbl, &#contacts_tbl {
          width: 100%;
        }
    }



    .quick-view {
      -webkit-box-shadow: 3px 3px 6px 0px rgba(0,0,0,0.3);
      -moz-box-shadow: 3px 3px 6px 0px rgba(0,0,0,0.3);
      box-shadow: 3px 3px 6px 0px rgba(0,0,0,0.3);
      border-radius: 5px;
      position: relative;
      background-color: white;
      overflow: hidden;

      .new-group {
        margin: .2rem;
        display: inline-block;
        border-radius: .4rem;
        overflow: hidden;
        cursor: pointer;

        .square {
          height: 100%;
          margin: 0;
          text-align: center;
          vertical-align: middle;
          float: left;
          line-height: 1.2rem;
          min-width: 1.4rem;
          padding: .2rem .6rem;

          &:not(:first-of-type) {
            border-left: 1px solid white;
          }
        }
      }
    }


    .tasks {
      .task {
        margin-top: 2rem;
        padding: 0;
        -webkit-box-shadow: 3px 3px 6px 0px rgba(0,0,0,0.3);
        -moz-box-shadow: 3px 3px 6px 0px rgba(0,0,0,0.3);
        box-shadow: 3px 3px 6px 0px rgba(0,0,0,0.3);
        border-radius: 5px;
        position: relative;
        background-color: white;
        overflow: hidden;
      }
    }


    .spacer {
      clear:both;
      line-height: 0;
      padding: 0;
      margin:0;
    }

    .block-content {
      padding: .8rem;
    }


    .highlight {
      background-color: #166260;
      padding: 0px 1rem;
      display: inline-block;
      color: #FFF;
      font-size: 1rem;
      vertical-align: middle;
      border-radius: .5rem;
      font-size: 0.8rem;
    }

    .small {
      font-size: .8rem;
    }

    .hidden {
      display: none;
    }

    .up {
      background-color: $up_color;
    }

    .down {
      background-color: $down_color;
    }

    .unknown {
      background-color: $unknown_color;
    }
  }
}


@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}