@import url("reset.css");
@import url("page-stock.css");
@import url("management.css");
@import url("receipt.css");
@import url("stock.css");
@import url("tmc.css");
@import url("home_index.css");
@import url("project.css");
@import url("procurement.css");
@import url("report.css");
@import url("login.css");
@import url('https://fonts.googleapis.com/css?family=Roboto:300&display=swap');

:root {
    --color-main: rgb(229, 230, 232);
    --color-green: #0AB883;
    --color-primary: #546de5;
    --color-secondary: #8395e9;
    --color-secondary-light: rgb(84, 109, 229, .05);
    --color-dark: #303952;
    --color-dark-light: #4f576c;
    --color-light: #ffffff;
    --color-panel: #414B5C;
    --color-lite-blue: #03b9f6;
}

body {
    background: white;
    font-family: 'Roboto', sans-serif;
    letter-spacing: 1px;
    font-size: 18px;
    /* font-weight: bold; */
}

h3{
    color: var(--color-lite-blue);
    font-size: 30px;
    font-weight: bold;
    text-align: center;
}
.duplicate-row{
  color: red;
}
/* PAGE SIDEBAR */
.header{
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #414B5C;
  padding: 0 50px 0 50px;
}
.header p{
  color: white;
  font-size: 20px;
}
.header i {
  font-size: 40px;
  color: white;
}
.sidenav ul {
  margin-top: 30px;
}
.sidenav{
  background-color: #303743;
}
.sidenav a span {
  color: #ffffff;
}
.sidenav .lni {
  color: var(--color-green);
  font-size: 20px;
}
/* END PAGE SIDEBAR */

/* PAGE TITLE */
.page-title{
    font-weight: bold;
    font-size: 25px;
    text-align: center;
    margin:  20px 0  20px 0 ;
    color: var(--color-primary);
}
/* END PAGE TITLE */

/* FORM TITLE */
.form-title{
    color: var(--color-green);
    font-size: 20px;
    margin-bottom: 30px;
}
/* END FORM TITLE */


.btn-floating {
    background-color: var(--color-lite-blue);
}


.textarea{
    border: 1px solid gray;
}

.header-user-name{
    margin-right: 20px;
    color: #fff;
}

.header-user-notification{
    margin-right: 20px;
}

.td-name{
    max-width: 500px;
}

#h-line{
    size:5px;
    color: #333;
    width:400px;
}

.row-error{
    background-color: rgb(247, 193, 193);
}


#calendar {
    max-width: 1000px;
    margin: 0 auto;
}

/* COMMERCIAL OFFER PAGE*/


/* END COMMERCIAL OFFER PAGE*/

.handsontable .cell_green{
  background-color: #0AB883;
}

.btn{
  margin-top: 20px;
}

.fc-col-header-cell-cushion{
  font-size: 25px;
  color: #0AB883;
}

.tmc_edit_photo{
  width: 300px;
  height: 300px;
}

.full_page_error{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}






/* ::selection {
  background: transparent;
}

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

#background {
  position: fixed;
  z-index: 0;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  background-size: cover;
  background-position: center center;
  opacity: 0.2;
}

#fab {
  position: fixed;
  z-index: 1;
  right: 30px;
  bottom: 30px;
  height: 60px;
  width: 60px;
  border-radius: 50%;
  background-color: rgb(247, 193, 193);
  box-shadow: 0 2px 8px  rgb(247, 193, 193);
  text-align: center;
  line-height: 60px;
  font-size: 1.75em;
  cursor: pointer;

  &:active {
    transform: scale(0.95);
  }
}

#page-header {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  height: 60px;
  width: 100vw;
  background-color: blue;
  box-shadow: 0 -3px 8px 5px blue;

  #hamburger {
    position: relative;
    display: block;
    top: 15px;
    left: 15px;
    height: 30px;
    width: 30px;

    .line {
      position: absolute;
      display: block;
      left: 5px;
      height: 2px;
      background-color: white;

      &:first-of-type {
        transform: translateY(8px);
        width: 20px;
      }

      &:nth-of-type(2) {
        transform: translateY(15px);
        width: 18px;
      }

      &:last-of-type {
        transform: translateY(22px);
        width: 16px;
      }
    }

    &:active .line {
      &:first-of-type {
        transform: translateY(10px);
      }

      &:last-of-type {
        transform: translateY(20px);
      }
    }
  }
}

#sidebar-nav {
  position: absolute;
  z-index: 3;
  top: 0;
  height: 100vh;
  width: 400px;
  background-color: #efefef;
  box-shadow: 0 0 0 0 #efefef;
  transform: translateX(-400px);
  transition: transform 0.5s ease-in-out;

  #sidebar-header {
    position: relative;
    height: 200px;
    width: 100%;
    background-color: blue;
    background-size: cover;

    #codepen-link {
      position: relative;
      display: block;
      top: 30px;
      left: 30px;
      height: 80px;
      width: 80px;
      z-index: 10;
      border-radius: 50%;
      box-sizing: border-box;
      background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/logo.jpg");
      background-position: center center;
      background-size: cover;
      opacity: 0.6;
      transition: all 0.25s;

      &:hover {
        opacity: 1;
        box-shadow: 0 2px 6px darkcyan;
      }
    }

    #profile-info {
      position: relative;
      top: 15px;
      padding: 30px;

      #profile-name {
        font-size: 1.5em;
        margin-bottom: 5px;
      }
    }

    #btn-more {
      position: absolute;
      top: 20px;
      right: 20px;
      padding: 5px;
      cursor: pointer;

      .dot {
        display: block;
        height: 4px;
        width: 4px;
        border-radius: 50%;
        margin-bottom: 5px;
        background-color: white;
      }
    }
  }

  #sidebar-nav-list {
    position: relative;
    background-color: #efefef;

    .sidebar-nav-item {
      position: relative;
      z-index: 4;
      box-shadow: 0 2px 4px transparent;
      opacity: 0;
      transform: translateX(-30px);
      transition: all 0.25s ease-in-out;
      animation-fill-mode: forwards;
      background-color: #efefef;

      a {
        display: flex;
				align-items: center;
        height: 100%;
        width: 100%;
				box-sizing: border-box;
        padding: 20px 0 20px 30px;
        color: blueviolet;
				.material-icons {
					padding: 0 8px 2px 0;
					color: orange;
				}
      }

      &:hover {
        z-index: 5;
        background-color: white;
        box-shadow: 0 2px 4px greenyellow;
      }

			/* @for $i from 1 through $iconCount {
				&:nth-child(#{$i}) {
					animation-delay: 0.05s * $i; 
				}
			} 
    }
  }

  &:target {
    transform: translateX(0px);
    box-shadow: (-4px) 0 12px 6px ;

    .sidebar-nav-item {
      animation: nav-item-fade-in 1s ease-in-out;
    }

    + #nav-screen-overlay {
      display: block;
      pointer-events: auto;
      opacity: 0.3;
    }
  }
}

#nav-screen-overlay {
  position: fixed;
  z-index: 2;
  height: 100vh;
  width: 100vw;
  background-color: #0f0f0f;
  opacity: 0;
  cursor: default;
  pointer-events: none;
  transition: opacity 0.5s ease-in-out;
}

@keyframes nav-item-fade-in {
  to {
    opacity: 1;
    transform: translateX(0px);
  }
}




#handsontable-container td{
  font-size: 16px;
}
#handsontable-container tr{
  font-size: 15px;
  font-weight: bold;
} */