//html, body - globalne stvari

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

*::after {
  box-sizing: border-box;
}

*::after {
  box-sizing: border-box;
}

html {
  text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background-color: #f8f8f8;

  border-radius: 0px;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: $oki;
}

body {
  font-family: $ff-sans;
  line-height: 2;
  font-size: ms(0);
  color: $txt-color;
  overflow-x: hidden;
}

:root {
  --white: #fff;
  --blue: #161b45;

  --oki: #917511;
  --txt-color: rgba(0, 0, 0, 0.6);

  --txt-color-sec: #8a8a8a;
  --txt-color-lighten: lighten(#414445, 35%);

  --txt-color-to-orange: #414445;
  --blue-light: #f5fcff;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: $ff-serif;
}

h1 {
  font-weight: 300;
}

h2 {
  font-weight: bold;
  color: var(--blue);
}

h3 {
  font-weight: bold;
  font-size: 22px;
  line-height: 25px;
  color: var(--oki);
}

p {
  font-family: $ff-sans;
  color: $txt-color;
}

a,
button {
  font-family: $ff-sans;
}

.noscroll {
  overflow: hidden;
}

a {
  text-decoration: none;
  color: inherit;
}

//this is optional

// img {
// 	display: inline-block;
// 	vertical-align: middle;
// 	max-width: 100%;
// 	height: auto;
// }

textarea {
  resize: vertical;
}

.res-half-day {
  position: relative;
  z-index: 1;
}

.cell {
  div {
    color: #384350;
  }
  &.not-current-month {
    div {
      color: #6f8298 !important;
    }
    &.disabled {
      div {
        color: #384350;
      }
    }
  }
}
td.disabled {
  background-color: #cacaca !important;
}

.res-start-date {
  &:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    color: #ccc;
    background-color: #cacaca;
    z-index: -1;
    left: 0%;
    right: 0%;
    background: linear-gradient(
      to bottom right,
      transparent 0%,
      transparent 50%,
      #cacaca 50%,
      #cacaca 100%
    );
  }
}
.res-end-date {
  &:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    color: #ccc;
    background-color: #cacaca;
    z-index: -1;
    left: 0%;
    right: 0%;
    background: linear-gradient(
      to top left,
      transparent 0%,
      transparent 50%,
      #cacaca 50%,
      #cacaca 100%
    );
  }
}