/* component style sheet*/
/*login*/
.login {
    margin: auto;
    width: 400px;
    background-color:var(--Lpurple);
    h1 {
        margin-bottom: 20px;
    }
    button {
        margin-top: 10px;
    }
    input, label {
        margin-bottom: 10px;
    }
    input {
        width:60%;
    }
    label {
        display:inline-block;
        width: 100px;
    }
}

/* Calender*/
:root {
    --fc-small-font-size: .95em;

    --fc-page-bg-color: transparent;
    --fc-neutral-bg-color: hsla(0, 0%, 82%, .3);
    --fc-neutral-text-color: grey;
    --fc-border-color: #f3ece6;

    --fc-button-text-color: #001435;
    --fc-button-bg-color: transparent;
    --fc-button-border-color: transparent;
    --fc-button-hover-bg-color: transparent;
    --fc-button-hover-border-color: #f28cbb;
    --fc-button-active-bg-color: transparent;
    --fc-button-active-border-color: #f28cbb;

    --fc-event-bg-color: #cfceea;
    /*--fc-event-border-color: transparent;*/
    --fc-event-text-color: #001435;
    --fc-event-selected-overlay-color: rgba(0, 0, 0, .25);
        --fc-more-link-bg-color: #d0d0d0;
    --fc-more-link-text-color: inherit;
    
    --fc-event-resizer-thickness: 8px;
    --fc-event-resizer-dot-total-width: 8px;
    --fc-event-resizer-dot-border-width: 1px;

    --fc-non-business-color: hsla(0, 0%, 84%, 0.171);
    --fc-bg-event-color: #8fdf82;
    --fc-bg-event-opacity: 0.3;
    --fc-highlight-color: rgba(188, 232, 241, .3);
    --fc-today-bg-color: rgba(255, 154, 95, 0.05);
    --fc-now-indicator-color: #f28cbb;
}
/*backlog*/
#backlog .fc-col-header {
    display: none;
}
#backlog {
    height: 97%!important;
}
.calendar tbody, #backlog tbody, .planner tbody {
    background-color: rgba(15, 10, 53, 0.007);
}
.fc thead {
    font-size: 0.9em;
}

/* Toolbar */
.fc .fc-toolbar.fc-header-toolbar {
    margin-bottom: 5px;
}
#calendar .fc-toolbar {
    height: 30px;
    margin-bottom: 0;
}
.fc .fc-toolbar-title {
    font-size: 18px;
    margin: 0;
}
.fc .fc-button {
    font-weight: bold;
    border-width: 4px;
    border-radius: 15px!important;
}

/* Toolbar Buttons */
.fc .fc-toolbar-chunk:last-child button {
    padding: 2px 6px;
    margin-left: 5px;
}
.fc .fc-toolbar-chunk:first-child button {
    border: none;
    margin-right: 5px;
    padding: 0;
}

/* Timegrid */
.fc .fc-timegrid-slot {
    font-size: 0.7em;
}
.fc .fc-timegrid-slot-minor {
    border-top: none;
}
.fc .fc-timegrid-slot-label {
    background-color: #f3ece6;
}
.fc .fc-timegrid .fc-scroller {
    overflow: auto;
}

/* Table Layout */
.fc td {
    border-width: 3px;
}
.fc col {
    width: 16px!important;
}

/* Events */
.fc-event {
    border-radius: 8px;
    padding: 0.2vw;
}
/* Icons */
.fc-icon {
    color: #f28cbb;
}
/* View  */
.calendar .fc-view-harness {
    margin-left: -15px;
    margin-right: -10px;
}
.fc .fc-timegrid-col-frame *{
    margin-left: 0px !important;
    margin-right: 0px !important;
}

/* now indicator */
.fc-direction-ltr .fc-timegrid-now-indicator-arrow {
    left: 0;
    border-width: 8px 100px 8px 12px;
    border-radius: 0px 10px 10px 0px;    
}    
.fc .fc-timegrid-now-indicator-arrow {   
    z-index: 4;    
    border-style: solid;    
}
.fc .fc-timegrid-now-indicator-line {
    z-index: 4;
    border-width: 2px;
}

/*  modal  */
.blurBackground {
    align-content: center;
    position: fixed;
    z-index: 4; 
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);
  }
  /* Modal ContentBox */
  .modal-content {
    position:relative;
    z-index: 6; 
    background-color: #cfceea;
    margin: auto;
    padding: 20px;
    width: 400px;
  }
  
  /* Close Button */
  .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }
  
  .close:hover,
  .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  }

/*update modal*/
.blurBackground input[type='checkbox']{
    position:absolute;
    bottom:20px;
    right:20px;
    width: 30px;
    height: 30px;
}
.blurBackground textarea {
    width: 100%!important;
}
.modal-content h4 {
    width: 80px;
} 
.modal-content input[type='range'] {
    width: 100%;
}
.modal-content h4:last-of-type {
    position:absolute;
    bottom:30px;
    right:60px;
    text-align: right;
}
.popUpButtons {
    margin-top: 14px;
}
.popUpButtons button {
    margin-right: 14px;
}

/*scroll bar*/
::-webkit-scrollbar {
    width: 10px;
  }
  /* Track */
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #f4c6d9;
    border-radius: 5px;
  }
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #555;
  }