@charset "UTF-8";
.vis-time-axis {
    position: relative;
    overflow:hidden
}

.vis-time-axis.vis-foreground {
    top: 0;
    left: 0;
    width:100%
}

.vis-time-axis.vis-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height:100%
}

.vis-time-axis .vis-text {
  position: absolute;
  color: #4d4d4d;
  padding: 3px;
  overflow: hidden;
  box-sizing: border-box;
  white-space:nowrap;
}

.vis-minor {
  border-top: solid 1px #bfbfbf;
}

.vis-time-axis .vis-text.vis-measure {
    position: absolute;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
    visibility:hidden
}

.vis-time-axis .vis-grid.vis-vertical {
    position: absolute;
    border-left:1px solid
}

.vis-time-axis .vis-grid.vis-vertical-rtl {
    position: absolute;
    border-right:1px solid
}

.vis-time-axis .vis-grid.vis-minor {
    border-color:#e5e5e5
}

.vis-time-axis .vis-grid.vis-major {
    border-color:#bfbfbf
}

.vis .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index:10
}

.vis-active {
    box-shadow:0 0 10px #86d5f8
}

.vis-custom-time {
    background-color: #6e94ff;
    width: 2px;
    cursor: move;
    z-index:1
}

.vis-custom-time > .vis-custom-time-marker {
    background-color: inherit;
    color: #fff;
    font-size: 12px;
    white-space: nowrap;
    padding: 3px 5px;
    top: 0;
    cursor: initial;
    z-index:inherit
}

.vis-current-time {
    background-color: #ff7f6e;
    width: 2px;
    z-index: 1;
    pointer-events:none
}

.vis-rolling-mode-btn {
    height: 40px;
    width: 40px;
    position: absolute;
    top: 7px;
    right: 20px;
    border-radius: 50%;
    font-size: 28px;
    cursor: pointer;
    opacity: .8;
    color: #fff;
    font-weight: 700;
    text-align: center;
    background:#3876c2
}

.vis-rolling-mode-btn:before {
    content: "⛶"
}

.vis-rolling-mode-btn:hover {
    opacity:1
}

.vis-panel {
    position: absolute;
    padding: 0;
    margin: 0;
    box-sizing:border-box
}

.vis-top {
  font-size: 12px;
}

.vis-panel.vis-center, .vis-panel.vis-left, .vis-panel.vis-right, .vis-panel.vis-top, .vis-panel.vis-bottom {
    border:1px #bfbfbf
}

.vis-panel.vis-center, .vis-panel.vis-left, .vis-panel.vis-right {
    border-top-style: solid;
    border-bottom-style: solid;
    overflow:hidden
}

.vis-left.vis-panel.vis-vertical-scroll, .vis-right.vis-panel.vis-vertical-scroll {
    height: 100%;
    overflow-x: hidden;
    overflow-y:scroll
}

.vis-left.vis-panel.vis-vertical-scroll {
    direction:rtl
}

.vis-left.vis-panel.vis-vertical-scroll .vis-content, .vis-right.vis-panel.vis-vertical-scroll {
    direction:ltr
}

.vis-right.vis-panel.vis-vertical-scroll .vis-content {
    direction:rtl
}

.vis-panel.vis-center, .vis-panel.vis-top, .vis-panel.vis-bottom {
    border-left-style: solid;
    border-right-style:solid
}

.vis-background {
    overflow:hidden
}

.vis-panel > .vis-content {
    position:relative
}

.vis-panel .vis-shadow {
    position: absolute;
    width: 100%;
    height: 1px;
    box-shadow:0 0 10px rgba(0, 0, 0, .8)
}

.vis-panel .vis-shadow.vis-top {
    top: -1px;
    left:0
}

.vis-panel .vis-shadow.vis-bottom {
    bottom: -1px;
    left:0
}

.vis-graph-group0 {
    fill: #4f81bd;
    fill-opacity: 0;
    stroke-width: 2px;
    stroke:#4f81bd
}

.vis-graph-group1 {
    fill: #f79646;
    fill-opacity: 0;
    stroke-width: 2px;
    stroke:#f79646
}

.vis-graph-group2 {
    fill: #8c51cf;
    fill-opacity: 0;
    stroke-width: 2px;
    stroke:#8c51cf
}

.vis-graph-group3 {
    fill: #75c841;
    fill-opacity: 0;
    stroke-width: 2px;
    stroke:#75c841
}

.vis-graph-group4 {
    fill: #ff0100;
    fill-opacity: 0;
    stroke-width: 2px;
    stroke:#ff0100
}

.vis-graph-group5 {
    fill: #37d8e6;
    fill-opacity: 0;
    stroke-width: 2px;
    stroke:#37d8e6
}

.vis-graph-group6 {
    fill: #042662;
    fill-opacity: 0;
    stroke-width: 2px;
    stroke:#042662
}

.vis-graph-group7 {
    fill: #00ff26;
    fill-opacity: 0;
    stroke-width: 2px;
    stroke:#00ff26
}

.vis-graph-group8 {
    fill: #f0f;
    fill-opacity: 0;
    stroke-width: 2px;
    stroke:#f0f
}

.vis-timeline {
  outline: red !important;
}

.vis-graph-group9 {
    fill: #8f3938;
    fill-opacity: 0;
    stroke-width: 2px;
    stroke:#8f3938
}

.vis-timeline .vis-fill {
    fill-opacity: .1;
    stroke:none
}

.vis-timeline .vis-bar {
    fill-opacity: .5;
    stroke-width:1px
}

.vis-timeline .vis-point {
    stroke-width: 2px;
    fill-opacity:1
}

.vis-timeline .vis-legend-background {
    stroke-width: 1px;
    fill-opacity: .9;
    fill: #fff;
    stroke:#c2c2c2
}

.vis-timeline .vis-outline {
    stroke-width: 1px;
    fill-opacity: 1;
    fill: #fff;
    stroke:#e5e5e5
}

.vis-timeline .vis-icon-fill {
    fill-opacity: .3;
    stroke:none
}

.vis-timeline {
    position: relative;
    border: 1px solid #bfbfbf;
    overflow: hidden;
    padding: 0;
    margin: 0;
    box-sizing:border-box
}

.vis-loading-screen {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left:0
}

.vis [class * =span] {
    min-height: 0;
    width:auto
}

.vis-item {
    position: absolute;
    color: #1a1a1a;
    border-color: #97b0f8;
    border-width: 1px;
    background-color: #d5ddf6;
    display: inline-block;
    z-index:1;
    font-size: 12px;

}

.vis-item.vis-selected {
    border-color: #ffc200;
    background-color: #fff785;
    z-index:2
}

.vis-editable.vis-selected {
    cursor:move
}

.vis-item.vis-point.vis-selected {
    background-color:#fff785
}

.vis-item.vis-box {
    text-align: center;
    border-style: solid;
    border-radius:2px
}

.vis-item.vis-point {
    background:none
}

.vis-item.vis-dot {
    position: absolute;
    padding: 0;
    border-width: 4px;
    border-style: solid;
    border-radius:4px
}

.vis-item.vis-range {
    border-style: solid;
    border-radius: 2px;
    box-sizing:border-box
}

.vis-item.vis-background {
    border: none;
    background-color: rgba(213, 221, 246, .4);
    box-sizing: border-box;
    padding: 0;
    margin:0
}

.vis-item .vis-item-overflow {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    overflow:hidden
}

.vis-item-visible-frame {
    white-space:nowrap
}

.vis-item.vis-range .vis-item-content {
    position: relative;
    display:inline-block
}

.vis-item.vis-background .vis-item-content {
    position: absolute;
    display:inline-block
}

.vis-item.vis-line {
    padding: 0;
    position: absolute;
    width: 0;
    border-left-width: 1px;
    border-left-style:solid
}

.vis-item .vis-item-content {
    white-space: nowrap;
    box-sizing: border-box;
    padding:5px
}

.vis-item .vis-onUpdateTime-tooltip {
    position: absolute;
    background: #4f81bd;
    color: #fff;
    width: 200px;
    text-align: center;
    white-space: nowrap;
    padding: 5px;
    border-radius: 1px;
    transition: .4s;
    -o-transition: .4s;
    -moz-transition: .4s;
    -webkit-transition:.4s
}

.vis-item .vis-delete, .vis-item .vis-delete-rtl {
    position: absolute;
    top: 0;
    width: 24px;
    height: 24px;
    box-sizing: border-box;
    padding: 0 5px;
    cursor: pointer;
    -webkit-transition: background .2s linear;
    -moz-transition: background .2s linear;
    -ms-transition: background .2s linear;
    -o-transition: background .2s linear;
    transition:background .2s linear
}

.vis-item .vis-delete {
    right:-24px
}

.vis-item .vis-delete-rtl {
    left:-24px
}

.vis-item .vis-delete:after, .vis-item .vis-delete-rtl:after {
    content: "×";
    color: red;
    font-family: arial, sans-serif;
    font-size: 22px;
    font-weight: 700;
    -webkit-transition: color .2s linear;
    -moz-transition: color .2s linear;
    -ms-transition: color .2s linear;
    -o-transition: color .2s linear;
    transition:color .2s linear
}

.vis-item .vis-delete:hover, .vis-item .vis-delete-rtl:hover {
    background:red
}

.vis-item .vis-delete:hover:after, .vis-item .vis-delete-rtl:hover:after {
    color:#fff
}

.vis-item .vis-drag-center {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    cursor:move
}

.vis-item.vis-range .vis-drag-left {
    position: absolute;
    width: 24px;
    max-width: 20%;
    min-width: 2px;
    height: 100%;
    top: 0;
    left: -4px;
    cursor:w-resize
}

.vis-item.vis-range .vis-drag-right {
    position: absolute;
    width: 24px;
    max-width: 20%;
    min-width: 2px;
    height: 100%;
    top: 0;
    right: -4px;
    cursor:e-resize
}

.vis-range.vis-item.vis-readonly .vis-drag-left, .vis-range.vis-item.vis-readonly .vis-drag-right {
    cursor:auto
}

.vis-item.vis-cluster {
    vertical-align: center;
    text-align: center;
    border-style: solid;
    border-radius:2px
}

.vis-item.vis-cluster-line {
    padding: 0;
    position: absolute;
    width: 0;
    border-left-width: 1px;
    border-left-style:solid
}

.vis-item.vis-cluster-dot {
    position: absolute;
    padding: 0;
    border-width: 4px;
    border-style: solid;
    border-radius:4px
}

div.vis-tooltip {
    position: absolute;
    visibility: hidden;
    padding: 5px;
    white-space: nowrap;
    font-family: verdana;
    font-size: 14px;
    color: #000;
    background-color: #f5f4ed;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    border: 1px solid #808074;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, .2);
    pointer-events: none;
    z-index:5
}

.vis-itemset {
    position: relative;
    padding: 0;
    margin: 0;
    box-sizing:border-box
}

.vis-itemset .vis-background, .vis-itemset .vis-foreground {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow:visible
}

.vis-axis {
    position: absolute;
    width: 100%;
    height: 0;
    left: 0;
    z-index:1
}

.vis-foreground .vis-group {
    position: relative;
    box-sizing: border-box;
    border-bottom:1px solid #bfbfbf
}

.vis-foreground .vis-group:last-child {
    border-bottom:none
}

.vis-nesting-group {
    cursor:pointer
}

.vis-label.vis-nested-group.vis-group-level-unknown-but-gte1 {
    background:#f5f5f5
}

.vis-label.vis-nested-group.vis-group-level-0 {
    background-color:#fff
}

.vis-inner {
  font-size: 12px;
}

.vis-ltr .vis-label.vis-nested-group.vis-group-level-0 .vis-inner {
    padding-left:0;
}

.vis-rtl .vis-label.vis-nested-group.vis-group-level-0 .vis-inner {
    padding-right:0
}

.vis-label.vis-nested-group.vis-group-level-1 {
    background-color:rgba(0, 0, 0, .05)
}

.vis-ltr .vis-label.vis-nested-group.vis-group-level-1 .vis-inner {
    padding-left:15px
}

.vis-rtl .vis-label.vis-nested-group.vis-group-level-1 .vis-inner {
    padding-right:15px
}

.vis-label.vis-nested-group.vis-group-level-2 {
    background-color:rgba(0, 0, 0, .1)
}

.vis-ltr .vis-label.vis-nested-group.vis-group-level-2 .vis-inner {
    padding-left:30px
}

.vis-rtl .vis-label.vis-nested-group.vis-group-level-2 .vis-inner {
    padding-right:30px
}

.vis-label.vis-nested-group.vis-group-level-3 {
    background-color:rgba(0, 0, 0, .15)
}

.vis-ltr .vis-label.vis-nested-group.vis-group-level-3 .vis-inner {
    padding-left:45px
}

.vis-rtl .vis-label.vis-nested-group.vis-group-level-3 .vis-inner {
    padding-right:45px
}

.vis-label.vis-nested-group.vis-group-level-4 {
    background-color:rgba(0, 0, 0, .2)
}

.vis-ltr .vis-label.vis-nested-group.vis-group-level-4 .vis-inner {
    padding-left:60px
}

.vis-rtl .vis-label.vis-nested-group.vis-group-level-4 .vis-inner {
    padding-right:60px
}

.vis-label.vis-nested-group.vis-group-level-5 {
    background-color:rgba(0, 0, 0, .25)
}

.vis-ltr .vis-label.vis-nested-group.vis-group-level-5 .vis-inner {
    padding-left:75px
}

.vis-rtl .vis-label.vis-nested-group.vis-group-level-5 .vis-inner {
    padding-right:75px
}

.vis-label.vis-nested-group.vis-group-level-6 {
    background-color:rgba(0, 0, 0, .3)
}

.vis-ltr .vis-label.vis-nested-group.vis-group-level-6 .vis-inner {
    padding-left:90px
}

.vis-rtl .vis-label.vis-nested-group.vis-group-level-6 .vis-inner {
    padding-right:90px
}

.vis-label.vis-nested-group.vis-group-level-7 {
    background-color:rgba(0, 0, 0, .35)
}

.vis-ltr .vis-label.vis-nested-group.vis-group-level-7 .vis-inner {
    padding-left:105px
}

.vis-rtl .vis-label.vis-nested-group.vis-group-level-7 .vis-inner {
    padding-right:105px
}

.vis-label.vis-nested-group.vis-group-level-8 {
    background-color:rgba(0, 0, 0, .4)
}

.vis-ltr .vis-label.vis-nested-group.vis-group-level-8 .vis-inner {
    padding-left:120px
}

.vis-rtl .vis-label.vis-nested-group.vis-group-level-8 .vis-inner {
    padding-right:120px
}

.vis-label.vis-nested-group.vis-group-level-9 {
    background-color:rgba(0, 0, 0, .45)
}

.vis-ltr .vis-label.vis-nested-group.vis-group-level-9 .vis-inner {
    padding-left:135px
}

.vis-rtl .vis-label.vis-nested-group.vis-group-level-9 .vis-inner {
    padding-right:135px
}

.vis-label.vis-nested-group {
    background-color:rgba(0, 0, 0, .5)
}

.vis-ltr .vis-label.vis-nested-group .vis-inner {
    padding-left:150px
}

.vis-rtl .vis-label.vis-nested-group .vis-inner {
    padding-right:150px
}

.vis-group-level-unknown-but-gte1 {
    border:1px solid red
}

.vis-label.vis-nesting-group:before {
    display: inline-block;
    width:15px
}

.vis-label.vis-nesting-group.expanded:before {
    content: "▼"
}

.vis-label.vis-nesting-group.collapsed:before {
    content: "▶"
}

.vis-rtl .vis-label.vis-nesting-group.collapsed:before {
    content: "◀"
}

.vis-ltr .vis-label:not(.vis-nesting-group):not(.vis-group-level-0) {
    padding-left:15px
}

.vis-rtl .vis-label:not(.vis-nesting-group):not(.vis-group-level-0) {
    padding-right:15px
}

.vis-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index:10
}

.vis-labelset {
    position: relative;
    overflow: hidden;
    box-sizing:border-box
}

.vis-labelset .vis-label {
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    color: #4d4d4d;
    box-sizing:border-box
}

.vis-labelset .vis-label {
    border-bottom:1px solid #bfbfbf
}

.vis-labelset .vis-label.draggable {
    cursor:pointer
}

.vis-group-is-dragging {
    background:rgba(0, 0, 0, .1)
}

.vis-labelset .vis-label:last-child {
    border-bottom:none
}

.vis-labelset .vis-label .vis-inner {
    display: inline-block;
    padding:5px
}

.vis-labelset .vis-label .vis-inner.vis-hidden {
    padding:0
}

div.vis-configuration {
    position: relative;
    display: block;
    float: left;
    font-size:12px
}

div.vis-configuration-wrapper {
    display: block;
    width:700px
}

div.vis-configuration-wrapper:after {
    clear: both;
    content: "";
    display:block
}

div.vis-configuration.vis-config-option-container {
    display: block;
    width: 495px;
    background-color: #fff;
    border: 2px solid #f7f8fa;
    border-radius: 4px;
    margin-top: 20px;
    left: 10px;
    padding-left:5px
}

div.vis-configuration.vis-config-button {
    display: block;
    width: 495px;
    height: 25px;
    vertical-align: middle;
    line-height: 25px;
    background-color: #f7f8fa;
    border: 2px solid #ceced0;
    border-radius: 4px;
    margin-top: 20px;
    left: 10px;
    padding-left: 5px;
    cursor: pointer;
    margin-bottom:30px
}

div.vis-configuration.vis-config-button.hover {
    background-color: #4588e6;
    border: 2px solid #214373;
    color:#fff
}

div.vis-configuration.vis-config-item {
    display: block;
    float: left;
    width: 495px;
    height: 25px;
    vertical-align: middle;
    line-height:25px
}

div.vis-configuration.vis-config-item.vis-config-s2 {
    left: 10px;
    background-color: #f7f8fa;
    padding-left: 5px;
    border-radius:3px
}

div.vis-configuration.vis-config-item.vis-config-s3 {
    left: 20px;
    background-color: #e4e9f0;
    padding-left: 5px;
    border-radius:3px
}

div.vis-configuration.vis-config-item.vis-config-s4 {
    left: 30px;
    background-color: #cfd8e6;
    padding-left: 5px;
    border-radius:3px
}

div.vis-configuration.vis-config-header {
    font-size: 18px;
    font-weight:700
}

div.vis-configuration.vis-config-label {
    width: 120px;
    height: 25px;
    line-height:25px
}

div.vis-configuration.vis-config-label.vis-config-s3 {
    width:110px
}

div.vis-configuration.vis-config-label.vis-config-s4 {
    width:100px
}

div.vis-configuration.vis-config-colorBlock {
    top: 1px;
    width: 30px;
    height: 19px;
    border: 1px solid #444444;
    border-radius: 2px;
    padding: 0;
    margin: 0;
    cursor:pointer
}

input.vis-configuration.vis-config-checkbox {
    left:-5px
}

input.vis-configuration.vis-config-rangeinput {
    position: relative;
    top: -5px;
    width: 60px;
    padding: 1px;
    margin: 0;
    pointer-events:none
}

input.vis-configuration.vis-config-range {
    -webkit-appearance: none;
    border: 0px solid white;
    background-color: rgba(0, 0, 0, 0);
    width: 300px;
    height:20px
}

input.vis-configuration.vis-config-range::-webkit-slider-runnable-track {
    width: 300px;
    height: 5px;
    background: #dedede;
    background: -moz-linear-gradient(top, #dedede 0%, #c8c8c8 99%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #dedede), color-stop(99%, #c8c8c8));
    background: -webkit-linear-gradient(top, #dedede 0%, #c8c8c8 99%);
    background: -o-linear-gradient(top, #dedede 0%, #c8c8c8 99%);
    background: -ms-linear-gradient(top, #dedede 0%, #c8c8c8 99%);
    background: linear-gradient(to bottom, #dedede 0%, #c8c8c8 99%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#dedede", endColorstr="#c8c8c8", GradientType=0);
    border: 1px solid #999999;
    box-shadow: #aaa 0 0 3px;
    border-radius:3px
}

input.vis-configuration.vis-config-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: 1px solid #14334b;
    height: 17px;
    width: 17px;
    border-radius: 50%;
    background: #3876c2;
    background: -moz-linear-gradient(top, #3876c2 0%, #385380 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3876c2), color-stop(100%, #385380));
    background: -webkit-linear-gradient(top, #3876c2 0%, #385380 100%);
    background: -o-linear-gradient(top, #3876c2 0%, #385380 100%);
    background: -ms-linear-gradient(top, #3876c2 0%, #385380 100%);
    background: linear-gradient(to bottom, #3876c2 0%, #385380 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#3876c2", endColorstr="#385380", GradientType=0);
    box-shadow: #111927 0 0 1px;
    margin-top:-7px
}

input.vis-configuration.vis-config-range:focus {
    outline:none
}

input.vis-configuration.vis-config-range:focus::-webkit-slider-runnable-track {
    background: #9d9d9d;
    background: -moz-linear-gradient(top, #9d9d9d 0%, #c8c8c8 99%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #9d9d9d), color-stop(99%, #c8c8c8));
    background: -webkit-linear-gradient(top, #9d9d9d 0%, #c8c8c8 99%);
    background: -o-linear-gradient(top, #9d9d9d 0%, #c8c8c8 99%);
    background: -ms-linear-gradient(top, #9d9d9d 0%, #c8c8c8 99%);
    background: linear-gradient(to bottom, #9d9d9d 0%, #c8c8c8 99%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#9d9d9d", endColorstr="#c8c8c8", GradientType=0)
}

input.vis-configuration.vis-config-range::-moz-range-track {
    width: 300px;
    height: 10px;
    background: #dedede;
    background: -moz-linear-gradient(top, #dedede 0%, #c8c8c8 99%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #dedede), color-stop(99%, #c8c8c8));
    background: -webkit-linear-gradient(top, #dedede 0%, #c8c8c8 99%);
    background: -o-linear-gradient(top, #dedede 0%, #c8c8c8 99%);
    background: -ms-linear-gradient(top, #dedede 0%, #c8c8c8 99%);
    background: linear-gradient(to bottom, #dedede 0%, #c8c8c8 99%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#dedede", endColorstr="#c8c8c8", GradientType=0);
    border: 1px solid #999999;
    box-shadow: #aaa 0 0 3px;
    border-radius:3px
}

input.vis-configuration.vis-config-range::-moz-range-thumb {
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background:#385380
}

input.vis-configuration.vis-config-range:-moz-focusring {
    outline: 1px solid white;
    outline-offset:-1px
}

input.vis-configuration.vis-config-range::-ms-track {
    width: 300px;
    height: 5px;
    background: transparent;
    border-color: transparent;
    border-width: 6px 0;
    color:transparent
}

input.vis-configuration.vis-config-range::-ms-fill-lower {
    background: #777;
    border-radius:10px
}

input.vis-configuration.vis-config-range::-ms-fill-upper {
    background: #ddd;
    border-radius:10px
}

input.vis-configuration.vis-config-range::-ms-thumb {
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background:#385380
}

input.vis-configuration.vis-config-range:focus::-ms-fill-lower {
    background:#888
}

input.vis-configuration.vis-config-range:focus::-ms-fill-upper {
    background:#ccc
}

.vis-configuration-popup {
    position: absolute;
    background: rgba(57, 76, 89, .85);
    border: 2px solid #f2faff;
    line-height: 30px;
    height: 30px;
    width: 150px;
    text-align: center;
    color: #fff;
    font-size: 14px;
    border-radius: 4px;
    -webkit-transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    transition:opacity .3s ease-in-out
}

.vis-configuration-popup:after, .vis-configuration-popup:before {
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events:none
}

.vis-configuration-popup:after {
    border-color: rgba(136, 183, 213, 0);
    border-left-color: rgba(57, 76, 89, .85);
    border-width: 8px;
    margin-top:-8px
}

.vis-configuration-popup:before {
    border-color: rgba(194, 225, 245, 0);
    border-left-color: #f2faff;
    border-width: 12px;
    margin-top:-12px
}

.vis-panel.vis-background.vis-horizontal .vis-grid.vis-horizontal {
    position: absolute;
    width: 100%;
    height: 0;
    border-bottom:1px solid
}

.vis-panel.vis-background.vis-horizontal .vis-grid.vis-minor {
    border-color:#e5e5e5
}

.vis-panel.vis-background.vis-horizontal .vis-grid.vis-major {
    border-color:#bfbfbf
}

.vis-data-axis .vis-y-axis.vis-major {
    width: 100%;
    position: absolute;
    color: #4d4d4d;
    white-space:nowrap
}

.vis-data-axis .vis-y-axis.vis-major.vis-measure {
    padding: 0;
    margin: 0;
    border: 0;
    visibility: hidden;
    width:auto
}

.vis-data-axis .vis-y-axis.vis-minor {
    position: absolute;
    width: 100%;
    color: #bebebe;
    white-space:nowrap
}

.vis-data-axis .vis-y-axis.vis-minor.vis-measure {
    padding: 0;
    margin: 0;
    border: 0;
    visibility: hidden;
    width:auto
}

.vis-data-axis .vis-y-axis.vis-title {
    position: absolute;
    color: #4d4d4d;
    white-space: nowrap;
    bottom: 20px;
    text-align:center
}

.vis-data-axis .vis-y-axis.vis-title.vis-measure {
    padding: 0;
    margin: 0;
    visibility: hidden;
    width:auto
}

.vis-data-axis .vis-y-axis.vis-title.vis-left {
    bottom: 0;
    -webkit-transform-origin: left top;
    -moz-transform-origin: left top;
    -ms-transform-origin: left top;
    -o-transform-origin: left top;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform:rotate(-90deg)
}

.vis-data-axis .vis-y-axis.vis-title.vis-right {
    bottom: 0;
    -webkit-transform-origin: right bottom;
    -moz-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    -o-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform:rotate(90deg)
}

.vis-legend {
    background-color: rgba(247, 252, 255, .65);
    padding: 5px;
    border: 1px solid #b3b3b3;
    box-shadow:2px 2px 10px rgba(154, 154, 154, .55)
}

.vis-legend-text {
    white-space: nowrap;
    display:inline-block
}

[data-controller=vacations--chart] .vis-labelset .vis-label:nth-of-type(odd) {
  background: var(--gray-50);
}

[data-controller=vacations--chart] .vis-labelset .vis-label:nth-of-type(2n) {
  background: white;
}

[data-controller=vacations--chart] .vis-itemset .vis-background .vis-group:nth-of-type(2n) {
  background: var(--gray-50);
}

[data-controller=vacations--chart] .vis-itemset .vis-background .vis-group:nth-of-type(odd) {
  background: white;
}

[data-controller=vacations--chart] .vis-item {
    min-width:10px;
    border-radius: 4px;
    border: 1px solid var(--timeline-blue400, #3981EC);
    background: var(--timeline-blue50, #EDF2FB);
}

[data-controller=vacations--vacation-period] .table--vacations > tbody > tr:nth-of-type(odd) {
    background: white;
}

[data-controller=vacations--vacation-period] .table--vacations > tbody > tr:nth-of-type(2n) {
  border-bottom: solid 1px var(--purple);
}
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */

html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust:100%
}

body {
    margin:0
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
    display:block
}

audio, canvas, progress, video {
    display: inline-block;
    vertical-align:baseline
}

audio:not([controls]) {
    display: none;
    height:0
}

[hidden], template {
    display:none
}

a {
    background-color:transparent
}

a:active, a:hover {
    outline:0
}

abbr[title] {
    border-bottom:1px dotted
}

b, strong {
    font-weight:700
}

dfn {
    font-style:italic
}

h1 {
    font-size: 2em;
    margin:.67em 0
}

mark {
    background: #ff0;
    color:#000
}

small {
    font-size:80%
}

sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align:baseline
}

sup {
    top:-.5em
}

sub {
    bottom:-.25em
}

img {
    border:0
}

svg:not(:root) {
    overflow:hidden
}

figure {
    margin:1em 40px
}

hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height:0
}

pre {
    overflow:auto
}

code, kbd, pre, samp {
    font-family: monospace, monospace;
    font-size:1em
}


fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding:.35em .625em .75em
}

legend {
    border: 0;
    padding:0
}

textarea {
    overflow:auto
}

optgroup {
    font-weight:700
}

table {
    border-spacing:0
}

td, th {
    padding:0
}

button, [type=button], [type=reset], [type=submit] {
    -webkit-appearance: none;
    appearance: none;
    -webkit-font-smoothing:antialiased
}

fieldset {
    background-color: #fff;
    border: 1px solid #eaeaea;
    margin: 0 0 .75em;
    padding:1.5em
}

label {
    font-weight: 600;
    font-size: .625em;
    color: #999;
    text-transform:uppercase
}

label.required:after {
    content: "*"
}

label abbr {
    display:none
}

[type=color], [type=date], [type=datetime], [type=datetime-local], [type=email], [type=month], [type=number], [type=password], [type=search], [type=tel], [type=text], [type=time], [type=url], [type=week], input:not([type]), textarea, select[multiple=multiple] {
    background-color: #fff;
    border: 1px solid #eaeaea;
    border-radius: 3px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .06);
    box-sizing: border-box;
    font-family: aktiv-grotesk, Helvetica, sans-serif;
    font-size: 16px;
    margin-bottom: .75em;
    padding: .5em;
    transition: border-color;
    width:100%
}

[type=color]:hover, [type=date]:hover, [type=datetime]:hover, [type=datetime-local]:hover, [type=email]:hover, [type=month]:hover, [type=number]:hover, [type=password]:hover, [type=search]:hover, [type=tel]:hover, [type=text]:hover, [type=time]:hover, [type=url]:hover, [type=week]:hover, input:not([type]):hover, textarea:hover, select[multiple=multiple]:hover {
    border-color:#d1d1d1
}

[type=color]:focus, [type=date]:focus, [type=datetime]:focus, [type=datetime-local]:focus, [type=email]:focus, [type=month]:focus, [type=number]:focus, [type=password]:focus, [type=search]:focus, [type=tel]:focus, [type=text]:focus, [type=time]:focus, [type=url]:focus, [type=week]:focus, input:not([type]):focus, textarea:focus, select[multiple=multiple]:focus {
    border-color: #477dca;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .06), 0 0 5px rgba(55, 112, 192, .7);
    outline:none
}

textarea {
    resize:vertical
}

input[type=search] {
    -webkit-appearance: none;
    appearance:none
}

input[type=checkbox], input[type=radio] {
    margin-right:.375em
}

input[type=file] {
    padding-bottom: .75em;
    width:100%
}

select {
    margin-bottom: 1.5em;
    max-width: 100%;
    width:auto
}

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

dl {
    margin-bottom:.75em
}

dl dt {
    font-weight: 700;
    margin-top:.75em
}

dl dd {
    margin:0
}

table {
    font-feature-settings: "kern", "liga", "tnum";
    width:100%;
    border-radius: 5px;
    font-size: 12px;
}

th {
    padding: .375em;
    text-align:left;
    font-size: 12px;
    font-weight: 500;
    color: var(--black-50);
}

td {
    padding: .75em .375em;
    font-size:.875em
}

tr, td, th {
    vertical-align:middle
}

body {
    font-feature-settings: "kern", "liga", "pnum";
    -webkit-font-smoothing: antialiased;
    color: #222;
    font-family: aktiv-grotesk, Helvetica, sans-serif;
    font-size: 16px;
    line-height:1.5
}

h1, h2, h3, h4, h5, h6 {
    font-family: aktiv-grotesk, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.2;
    margin:0 0 .75em
}

p {
    margin:0 0 .75em
}

a {
    color: #477dca;
    text-decoration: none;
    transition:color .1s linear
}

a:active, a:focus, a:hover {
    color:#2c5999
}

a:active, a:focus {
    outline:none
}

hr {
    border-bottom: 1px solid #eaeaea;
    border-left: none;
    border-right: none;
    border-top: none;
    margin:1.5em 0
}

img, picture {
    margin: 0;
    max-width:100%
}

html {
    box-sizing:border-box
}

*, * :after, * :before {
    box-sizing:inherit
}

.d3-tip {
    font-size: 10px;
    line-height: 1;
    font-weight: 700;
    padding: 12px;
    background: rgba(0, 0, 0, .8);
    color: #fff;
    border-radius:2px
}

.d3-tip:after {
    box-sizing: border-box;
    display: inline;
    font-size: 10px;
    width: 100%;
    line-height: 1;
    color: rgba(0, 0, 0, .8);
    content: "▼";
    position: absolute;
    text-align:center
}

.d3-tip.n:after {
    margin: -1px 0 0;
    top: 100%;
    left:0
}

.flatpickr-calendar {
    background: transparent;
    opacity: 0;
    display: none;
    text-align: center;
    visibility: hidden;
    padding: 0;
    -webkit-animation: none;
    animation: none;
    direction: ltr;
    border: 0;
    font-size: 14px;
    line-height: 24px;
    border-radius: 5px;
    position: absolute;
    width: 307.875px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    background: #fff;
    -webkit-box-shadow: 1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0, 0, 0, .08);
    box-shadow:1px 0 #e6e6e6, -1px 0 #e6e6e6, 0 1px #e6e6e6, 0 -1px #e6e6e6, 0 3px 13px rgba(0, 0, 0, .08)
}

.flatpickr-calendar.open, .flatpickr-calendar.inline {
    opacity: 1;
    max-height: 640px;
    visibility:visible
}

.flatpickr-calendar.open {
    display: inline-block;
    z-index:99999
}

.flatpickr-calendar.animate.open {
    -webkit-animation: fpFadeInDown .3s cubic-bezier(.23, 1, .32, 1);
    animation:fpFadeInDown .3s cubic-bezier(.23, 1, .32, 1)
}

.flatpickr-calendar.inline {
    display: block;
    position: relative;
    top:2px
}

.flatpickr-calendar.static {
    position: absolute;
    top:calc(100% + 2px)
}

.flatpickr-calendar.static.open {
    z-index: 999;
    display:block
}

.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n + 1) .flatpickr-day.inRange:nth-child(7n + 7) {
    -webkit-box-shadow: none !important;
    box-shadow:none !important
}

.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n + 2) .flatpickr-day.inRange:nth-child(7n + 1) {
    -webkit-box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
    box-shadow:-2px 0 #e6e6e6, 5px 0 #e6e6e6
}

.flatpickr-calendar .hasWeeks .dayContainer, .flatpickr-calendar .hasTime .dayContainer {
    border-bottom: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius:0
}

.flatpickr-calendar .hasWeeks .dayContainer {
    border-left:0
}

.flatpickr-calendar.hasTime .flatpickr-time {
    height: 40px;
    border-top:1px solid #e6e6e6
}

.flatpickr-calendar.noCalendar.hasTime .flatpickr-time {
    height:auto
}

.flatpickr-calendar:before, .flatpickr-calendar:after {
    position: absolute;
    display: block;
    pointer-events: none;
    border: solid transparent;
    content: "";
    height: 0;
    width: 0;
    left:22px
}

.flatpickr-calendar.rightMost:before, .flatpickr-calendar.arrowRight:before, .flatpickr-calendar.rightMost:after, .flatpickr-calendar.arrowRight:after {
    left: auto;
    right:22px
}

.flatpickr-calendar.arrowCenter:before, .flatpickr-calendar.arrowCenter:after {
    left: 50%;
    right:50%
}

.flatpickr-calendar:before {
    border-width: 5px;
    margin:0 -5px
}

.flatpickr-calendar:after {
    border-width: 4px;
    margin:0 -4px
}

.flatpickr-calendar.arrowTop:before, .flatpickr-calendar.arrowTop:after {
    bottom:100%
}

.flatpickr-calendar.arrowTop:before {
    border-bottom-color:#e6e6e6
}

.flatpickr-calendar.arrowTop:after {
    border-bottom-color:#fff
}

.flatpickr-calendar.arrowBottom:before, .flatpickr-calendar.arrowBottom:after {
    top:100%
}

.flatpickr-calendar.arrowBottom:before {
    border-top-color:#e6e6e6
}

.flatpickr-calendar.arrowBottom:after {
    border-top-color:#fff
}

.flatpickr-calendar:focus {
    outline:0
}

.flatpickr-wrapper {
    position: relative;
    display:inline-block
}

.flatpickr-months {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:flex
}

.flatpickr-months .flatpickr-month {
    background: transparent;
    color: rgba(0, 0, 0, .9);
    fill: rgba(0, 0, 0, .9);
    height: 34px;
    line-height: 1;
    text-align: center;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    overflow: hidden;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex:1
}

.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-decoration: none;
    cursor: pointer;
    position: absolute;
    top: 0;
    height: 34px;
    padding: 10px;
    z-index: 3;
    color: rgba(0, 0, 0, .9);
    fill:rgba(0, 0, 0, .9)
}

.flatpickr-months .flatpickr-prev-month.flatpickr-disabled, .flatpickr-months .flatpickr-next-month.flatpickr-disabled {
    display:none
}

.flatpickr-months .flatpickr-prev-month i, .flatpickr-months .flatpickr-next-month i {
    position:relative
}

.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month, .flatpickr-months .flatpickr-next-month.flatpickr-prev-month {
    left:0
}

.flatpickr-months .flatpickr-prev-month.flatpickr-next-month, .flatpickr-months .flatpickr-next-month.flatpickr-next-month {
    right:0
}

.flatpickr-months .flatpickr-prev-month:hover, .flatpickr-months .flatpickr-next-month:hover {
    color:#959ea9
}

.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg {
    fill:#f64747
}

.flatpickr-months .flatpickr-prev-month svg, .flatpickr-months .flatpickr-next-month svg {
    width: 14px;
    height:14px
}

.flatpickr-months .flatpickr-prev-month svg path, .flatpickr-months .flatpickr-next-month svg path {
    -webkit-transition: fill .1s;
    transition: fill .1s;
    fill:inherit
}

.numInputWrapper {
    position: relative;
    height:auto
}

.numInputWrapper input, .numInputWrapper span {
    display:inline-block
}

.numInputWrapper input {
    width:100%
}

.numInputWrapper input::-ms-clear {
    display:none
}

.numInputWrapper input::-webkit-outer-spin-button, .numInputWrapper input::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance:none
}

.numInputWrapper span {
    position: absolute;
    right: 0;
    width: 14px;
    padding: 0 4px 0 2px;
    height: 50%;
    line-height: 50%;
    opacity: 0;
    cursor: pointer;
    border: 1px solid rgba(57, 57, 57, .15);
    -webkit-box-sizing: border-box;
    box-sizing:border-box
}

.numInputWrapper span:hover {
    background:rgba(0, 0, 0, .1)
}

.numInputWrapper span:active {
    background:rgba(0, 0, 0, .2)
}

.numInputWrapper span:after {
    display: block;
    content: "";
    position:absolute
}

.numInputWrapper span.arrowUp {
    top: 0;
    border-bottom:0
}

.numInputWrapper span.arrowUp:after {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 4px solid rgba(57, 57, 57, .6);
    top:26%
}

.numInputWrapper span.arrowDown {
    top:50%
}

.numInputWrapper span.arrowDown:after {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid rgba(57, 57, 57, .6);
    top:40%
}

.numInputWrapper span svg {
    width: inherit;
    height:auto
}

.numInputWrapper span svg path {
    fill:rgba(0, 0, 0, .5)
}

.numInputWrapper:hover {
    background:rgba(0, 0, 0, .05)
}

.numInputWrapper:hover span {
    opacity:1
}

.flatpickr-current-month {
    font-size: 135%;
    line-height: inherit;
    font-weight: 300;
    color: inherit;
    position: absolute;
    width: 75%;
    left: 12.5%;
    padding: 7.48px 0 0;
    line-height: 1;
    height: 34px;
    display: inline-block;
    text-align: center;
    -webkit-transform: translate3d(0px, 0px, 0px);
    transform:translateZ(0)
}

.flatpickr-current-month span.cur-month {
    font-family: inherit;
    font-weight: 700;
    color: inherit;
    display: inline-block;
    margin-left: .5ch;
    padding:0
}

.flatpickr-current-month span.cur-month:hover {
    background:rgba(0, 0, 0, .05)
}

.flatpickr-current-month .numInputWrapper {
    width: 6ch;
    width: 7ch�;
    display:inline-block
}

.flatpickr-current-month .numInputWrapper span.arrowUp:after {
    border-bottom-color:rgba(0, 0, 0, .9)
}

.flatpickr-current-month .numInputWrapper span.arrowDown:after {
    border-top-color:rgba(0, 0, 0, .9)
}

.flatpickr-current-month input.cur-year {
    background: transparent;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: inherit;
    cursor: text;
    padding: 0 0 0 .5ch;
    margin: 0;
    display: inline-block;
    font-size: inherit;
    font-family: inherit;
    font-weight: 300;
    line-height: inherit;
    height: auto;
    border: 0;
    border-radius: 0;
    vertical-align: initial;
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance:textfield
}

.flatpickr-current-month input.cur-year:focus {
    outline:0
}

.flatpickr-current-month input.cur-year[disabled], .flatpickr-current-month input.cur-year[disabled]:hover {
    font-size: 100%;
    color: rgba(0, 0, 0, .5);
    background: transparent;
    pointer-events:none
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
    appearance: menulist;
    background: transparent;
    border: none;
    border-radius: 0;
    box-sizing: border-box;
    color: inherit;
    cursor: pointer;
    font-size: inherit;
    font-family: inherit;
    font-weight: 300;
    height: auto;
    line-height: inherit;
    margin: -1px 0 0;
    outline: none;
    padding: 0 0 0 .5ch;
    position: relative;
    vertical-align: initial;
    -webkit-box-sizing: border-box;
    -webkit-appearance: menulist;
    -moz-appearance: menulist;
    width:auto
}

.flatpickr-current-month .flatpickr-monthDropdown-months:focus, .flatpickr-current-month .flatpickr-monthDropdown-months:active {
    outline:none
}

.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
    background:rgba(0, 0, 0, .05)
}

.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
    background-color: transparent;
    outline: none;
    padding:0
}

.flatpickr-weekdays {
    background: transparent;
    text-align: center;
    overflow: hidden;
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    height:28px
}

.flatpickr-weekdays .flatpickr-weekdaycontainer {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex:1
}

span.flatpickr-weekday {
    cursor: default;
    font-size: 90%;
    background: transparent;
    color: rgba(0, 0, 0, .54);
    line-height: 1;
    margin: 0;
    text-align: center;
    display: block;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    font-weight:bolder
}

.dayContainer, .flatpickr-weeks {
    padding:1px 0 0
}

.flatpickr-days {
    position: relative;
    overflow: hidden;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    width:307.875px
}

.flatpickr-days:focus {
    outline:0
}

.dayContainer {
    padding: 0;
    outline: 0;
    text-align: left;
    width: 307.875px;
    min-width: 307.875px;
    max-width: 307.875px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    display: -ms-flexbox;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    -webkit-transform: translate3d(0px, 0px, 0px);
    transform: translateZ(0);
    opacity:1
}

.dayContainer + .dayContainer {
    -webkit-box-shadow: -1px 0 0 #e6e6e6;
    box-shadow:-1px 0 #e6e6e6
}

.flatpickr-day {
    background: none;
    border: 1px solid transparent;
    border-radius: 150px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #393939;
    cursor: pointer;
    font-weight: 400;
    width: 14.2857143%;
    -webkit-flex-basis: 14.2857143%;
    -ms-flex-preferred-size: 14.2857143%;
    flex-basis: 14.2857143%;
    max-width: 39px;
    height: 39px;
    line-height: 39px;
    margin: 0;
    display: inline-block;
    position: relative;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align:center
}

.flatpickr-day.inRange, .flatpickr-day.prevMonthDay.inRange, .flatpickr-day.nextMonthDay.inRange, .flatpickr-day.today.inRange, .flatpickr-day.prevMonthDay.today.inRange, .flatpickr-day.nextMonthDay.today.inRange, .flatpickr-day:hover, .flatpickr-day.prevMonthDay:hover, .flatpickr-day.nextMonthDay:hover, .flatpickr-day:focus, .flatpickr-day.prevMonthDay:focus, .flatpickr-day.nextMonthDay:focus {
    cursor: pointer;
    outline: 0;
    background: #e6e6e6;
    border-color:#e6e6e6
}

.flatpickr-day.today {
    border-color:#959ea9
}

.flatpickr-day.today:hover, .flatpickr-day.today:focus {
    border-color: #959ea9;
    background: #959ea9;
    color:#fff
}

.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay {
    background: #569ff7;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #fff;
    border-color:#569ff7
}

.flatpickr-day.selected.startRange, .flatpickr-day.startRange.startRange, .flatpickr-day.endRange.startRange {
    border-radius:50px 0 0 50px
}

.flatpickr-day.selected.endRange, .flatpickr-day.startRange.endRange, .flatpickr-day.endRange.endRange {
    border-radius:0 50px 50px 0
}

.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n + 1)), .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n + 1)), .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n + 1)) {
    -webkit-box-shadow: -10px 0 0 #569ff7;
    box-shadow:-10px 0 #569ff7
}

.flatpickr-day.selected.startRange.endRange, .flatpickr-day.startRange.startRange.endRange, .flatpickr-day.endRange.startRange.endRange {
    border-radius:50px
}

.flatpickr-day.inRange {
    border-radius: 0;
    -webkit-box-shadow: -5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
    box-shadow:-5px 0 #e6e6e6, 5px 0 #e6e6e6
}

.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay, .flatpickr-day.notAllowed, .flatpickr-day.notAllowed.prevMonthDay, .flatpickr-day.notAllowed.nextMonthDay {
    color: rgba(57, 57, 57, .3);
    background: transparent;
    border-color: transparent;
    cursor:default
}

.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover {
    cursor: not-allowed;
    color:rgba(57, 57, 57, .1)
}

.flatpickr-day.week.selected {
    border-radius: 0;
    -webkit-box-shadow: -5px 0 0 #569ff7, 5px 0 0 #569ff7;
    box-shadow:-5px 0 #569ff7, 5px 0 #569ff7
}

.flatpickr-day.hidden {
    visibility:hidden
}

.rangeMode .flatpickr-day {
    margin-top:1px
}

.flatpickr-weekwrapper {
    float:left
}

.flatpickr-weekwrapper .flatpickr-weeks {
    padding: 0 12px;
    -webkit-box-shadow: 1px 0 0 #e6e6e6;
    box-shadow:1px 0 #e6e6e6
}

.flatpickr-weekwrapper .flatpickr-weekday {
    float: none;
    width: 100%;
    line-height:28px
}

.flatpickr-weekwrapper span.flatpickr-day, .flatpickr-weekwrapper span.flatpickr-day:hover {
    display: block;
    width: 100%;
    max-width: none;
    color: rgba(57, 57, 57, .3);
    background: transparent;
    cursor: default;
    border:none
}

.flatpickr-innerContainer {
    display: block;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    overflow:hidden
}

.flatpickr-rContainer {
    display: inline-block;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing:border-box
}

.flatpickr-time {
    text-align: center;
    outline: 0;
    display: block;
    height: 0;
    line-height: 40px;
    max-height: 40px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:flex
}

.flatpickr-time:after {
    content: "";
    display: table;
    clear:both
}

.flatpickr-time .numInputWrapper {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    width: 40%;
    height: 40px;
    float:left
}

.flatpickr-time .numInputWrapper span.arrowUp:after {
    border-bottom-color:#393939
}

.flatpickr-time .numInputWrapper span.arrowDown:after {
    border-top-color:#393939
}

.flatpickr-time.hasSeconds .numInputWrapper {
    width:26%
}

.flatpickr-time.time24hr .numInputWrapper {
    width:49%
}

.flatpickr-time input {
    background: transparent;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    text-align: center;
    margin: 0;
    padding: 0;
    height: inherit;
    line-height: inherit;
    color: #393939;
    font-size: 14px;
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance:textfield
}

.flatpickr-time input.flatpickr-hour {
    font-weight:700
}

.flatpickr-time input.flatpickr-minute, .flatpickr-time input.flatpickr-second {
    font-weight:400
}

.flatpickr-time input:focus {
    outline: 0;
    border:0
}

.flatpickr-time .flatpickr-time-separator, .flatpickr-time .flatpickr-am-pm {
    height: inherit;
    float: left;
    line-height: inherit;
    color: #393939;
    font-weight: 700;
    width: 2%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self:center
}

.flatpickr-time .flatpickr-am-pm {
    outline: 0;
    width: 18%;
    cursor: pointer;
    text-align: center;
    font-weight:400
}

.flatpickr-time input:hover, .flatpickr-time .flatpickr-am-pm:hover, .flatpickr-time input:focus, .flatpickr-time .flatpickr-am-pm:focus {
    background:#eee
}

.flatpickr-input[readonly] {
    cursor:pointer
}

@-webkit-keyframes fpFadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -20px, 0);
        transform:translate3d(0, -20px, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform:translateZ(0)
    }
}

@keyframes fpFadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -20px, 0);
        transform:translate3d(0, -20px, 0)
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform:translateZ(0)
    }
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
    display:inline-block
}

.l-row {
    display:block
}

.l-row:after {
    clear: both;
    content: "";
    display:block
}

.l-login {
    float: left;
    display: block;
    margin-right: 2.3576520234%;
    width:100%
}

.l-login:last-child {
    margin-right:0
}

@media screen and (min-width: 53.75em) {
    .l-login {
        float: left;
        display: block;
        margin-right: 2.3576520234%;
        width: 31.7615653177%;
        margin-left:34.1192173411%
    }

    .l-login:last-child {
        margin-right:0
    }
}

.l-vacation {
    float: left;
    display: block;
    margin-right: 2.3576520234%;
    width:100%
}

.l-vacation:last-child {
    margin-right:0
}

@media screen and (min-width: 53.75em) {
    .l-vacation {
        float: left;
        display: block;
        margin-right: 2.3576520234%;
        width: 65.8807826589%;
        margin-left:17.0596086706%
    }

    .l-vacation:last-child {
        margin-right:0
    }
}

.l-col-full {
    float: left;
    display: block;
    width: 100%;
    padding: .625em 0;
    margin-right:0
}

.l-col-full:last-child {
    margin-right:0
}

.l-col-full.no-padding {
    padding:0
}

.l-col-half {
    float: left;
    display: block;
    margin-right: 2.3576520234%;
    width: 100%;
    padding:.625em 0
}

.l-col-half:last-child {
    margin-right:0
}

@media screen and (min-width: 53.75em) {
    .l-col-half {
        float: left;
        display: block;
        margin-right: 2.3576520234%;
        width:48.8211739883%
    }

    .l-col-half:last-child {
        margin-right:0
    }
}

@media screen and (min-width: 53.75em) {
    .l-col-half:last-child {
        float: left;
        display: block;
        width: 48.8211739883%;
        margin-right:0
    }

    .l-col-half:last-child:last-child {
        margin-right:0
    }
}

html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin:0
}

body {
    background-color:#f8f8f8
}

.l-center-wrapper {
    height: 100%;
    width: 100%;
    display:table
}

.l-center-inner {
    display: table-cell;
    width: 100%;
    height: 100%;
    vertical-align:middle
}

.l-section {
    padding:2.5em 0
}

.l-section.white {
    background:#fff
}

.l-section.gray {
    background:#f8f8f8
}

.section-title {
    margin: 0;
    font-size:1.625em
}

.l-header-container {
    margin-left: auto;
    margin-right: auto;
    padding:0
}

@media screen and (min-width: 40em) {
    .l-header-container {
        padding:0 3em
    }
}

.l-header-row {
    display:block
}

.l-header-row:after {
    clear: both;
    content: "";
    display:block
}

.btn {
    padding: .6em 1.6em;
    color: #fff;
    transition: background .15s;
    box-shadow: inset 0 1px rgba(255, 255, 255, .2);
    border: none;
    transition-property: background;
    transition-duration: .2s;
    transition-timing-function: ease-in;
    transition-delay:.1s
}

.btn:disabled {
    opacity:.5
}

.btn--large {
    font-size:1.2em
}

.btn--small {
    font-size:.8333333333em
}

.btn--bold {
    font-weight:700
}

.btn--block {
    text-align: center;
    display: block;
    width:100%
}

.btn--upper {
    text-transform:uppercase
}

.btn--default {
    background-color:#7f8c8d
}

.btn--default:hover, .btn--default:focus, .btn--default:active {
    color: #fff;
    background:#9aa4a5
}

.btn--success {
    background-color:#4caf50
}

.btn--success:hover, .btn--success:focus, .btn--success:active {
    color: #fff;
    background:#6ec071
}

.btn--danger {
    background-color:#c0392b
}

.btn--danger:hover, .btn--danger:focus, .btn--danger:active {
    color: #fff;
    background:#d65548
}

.btn--warning {
    background-color:#f1c40f
}

.btn--warning:hover, .btn--warning:focus, .btn--warning:active {
    color: #fff;
    background:#f4d03f
}

.m-flash-wrapper {
    position: absolute;
    right: 0;
    left: 0;
    z-index:10
}

.m-flash-wrapper.alert-notice {
    background-color:rgba(76, 175, 80, .8)
}

.m-flash-wrapper.alert-error, .m-flash-wrapper.alert-alert {
    background-color:rgba(192, 57, 43, .8)
}

.m-flash-notice {
    padding: .625em 0;
    text-align: center;
}

.header-wrapper {
    background-color:var(--purple);
}

.header {
    margin-right: 2.3576520234%;
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
}

.header:last-child {
    margin-right:0
}

.header--brand {
    padding: .625em;
    text-align: center;
}

@media screen and (min-width: 40em) {
    .header--brand {
        vertical-align: middle;
        white-space: nowrap;
        padding: .625em .625em .625em 0;
        text-align: left;
        background-color:transparent;
    }
}

.header--brand .header--brand--text {
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    margin:0;
    display: none;
}

@media screen and (min-width: 40em) {
    .header--brand .header--brand--text {
        font-size:1.25em;
        display: inline-block;
    }
}

.header--navigation {
    display: flex;
    padding: .625em;
    text-align:center;
}

@media screen and (min-width: 40em) {
    .header--navigation {
        display: flex;
        align-items: center;
        padding: 0 .625em;
        text-align:left;
        width: 70%;
    }
}

.header--navigation--item {
    display: inline-block;
    padding: .3125em;
    margin: 0;
    font-size: 12px;
}

@media screen and (min-width: 40em) {
    .header--navigation--item {
        margin:0 .625em 0 0;
        padding: 1rem;
    }
}

.header--navigation--item:hover, .header--navigation--item:focus {
    color:#9fb4be
}

.header--user {
    display:block
}

@media screen and (min-width: 40em) {
    .header--user {
        display: table-cell;
        vertical-align:middle
    }
}

.user--content {
    display: flex;
    align-items: center;
    padding: .625em;
    margin:0 auto;
}

@media screen and (min-width: 40em) {
    .user--content {
        margin: 0;
        float:right
    }
}

.user--name.container {
    padding-right:.3125em;
    height: min-content;
}

.user--name {
    color: #fff;
    line-height: 1;
    white-space:nowrap
}

.user--avatar--container {
    display: table-cell;
    vertical-align: middle;
    padding:0 .3125em
}

.user--avatar {
    display: block;
    width: 32px;
    height: 32px;
    border-radius: 30px;
    background-color: transparent;
    background-size: cover;
    background-position:center center
}

.user--logout--container {
    display: table-cell;
    vertical-align: middle;
    padding-left:.3125em
}

.user--logout {
    display: inline-block;
    float: right;
    padding: .375em .75em;
    margin-left: .3125em;
    font-weight: 400;
    font-size: .75em;
    white-space: nowrap;
    border: 1px solid rgba(255, 255, 255, .5);
    background-color: rgba(255, 255, 255, 0);
    color: rgba(255, 255, 255, .8);
    transition-property: all;
    transition-duration: .3s;
    transition-timing-function: ease-in;
    transition-delay:.1s
}

.user--logout:hover, .user--logout:focus, .user--logout:active {
    color: #fff;
    border-color:#fff
}

.login-box {
    max-width: 400px;
    margin:auto
}

.login-box .login-top {
    position: relative;
    padding: 1.25em;
    text-align: center;
    background:#263238
}

.login-box .login-top h1 {
    margin: 1em 0;
    color: #fff;
    font-size:1.25em
}

@media screen and (min-width: 40em) {
    .login-box .login-top h1 {
        font-size:1.625em
    }
}

.login-box .login-bottom {
    padding:1.25em
}

.login-box .login-bottom .btn--login {
    font-size:1em
}

@media screen and (min-width: 40em) {
    .login-box .login-bottom .btn--login {
        font-size:1.125em
    }
}

.vacation-box {
    position:relative
}

.user-vacation-today {
  width: 160px;
}

@media screen and (min-width: 40em) {
    .vacation-container {
        display: table;
        width: 100%;
        table-layout:fixed
    }
}

.vacation-col .input select,
.user-vacation-member-selection  {
    margin-bottom:0;
    border: solid 1px #e1e1e1;
    border-radius: 5px;
    font-size: 12px;
}

.vacation-message {
    display: block;
    position: relative;
    color: #827717;
    padding-left: 1.625em;
    line-height:1.4
}

.vacation-message:before {
    content: "";
    position: absolute;
    top: 1px;
    left: 0;
    display: block;
    width: 20px;
    height: 20px;
    background-image: image-url("info-icon.svg")
}

.vacation-arrow {
    content: "arw";
    display: block;
    width: 12px;
    height: 16px;
    position: absolute;
    bottom: -8px;
    left: 50%;
    margin-left: -6px;
    background-image: image-url("arrow-down.svg")
}

.vacation-user-multi-selections {
  font-size: 12px !important;
  position: relative;
  background-color: white;
  height: 36px;

}

.tag-option {
  border-radius: 3px;
  color: var(--purple);
}

.vacation-multi-select-options {
  position: absolute;

}

@media screen and (min-width: 40em) {
    .vacation-arrow {
        width: 16px;
        height: 12px;
        top: 50%;
        margin: -6px 0 0;
        right: -8px;
        left: auto;
        bottom: auto;
        background-image: image-url("arrow-right.svg")
    }
}

.box {
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow:0 1px 2px rgba(153, 153, 153, .2)
}

.box--footer {
    padding: 1.25em;
    border-top: 1px solid #eaeaea;
    background:#fff
}

.box--footer.yellow {
    border-color: #e6ee9c;
    background:#f9fbe7
}

.form-compact .input {
}

.form-compact .input label {
    margin-bottom:.1875em;
}

.form-compact .input input {
    padding: 0;
    border: none;
    box-shadow: none;
    outline: none;
    background-color:transparent;
    margin-bottom: 0;
    font-size: 12px;
}

.form-compact .input input:focus, .form-compact .input input:active, .form-compact .input input:hover {
    border: none;
    box-shadow: none;
    outline:none
}

.form-compact .input.not-empty label {
    color:#bfbfbf
}

.form-compact .input.focused {
    border-color:#4caf50
}

.form-compact .input.focused label {
    color:#4caf50
}

.form-compact .input.field_with_errors {
    border-color: #c0392b;
    background-color:#fbf0ef
}

.form-compact .input.field_with_errors label {
    color:#c0392b
}

.form-compact .input.field_with_errors.focused {
    background-color:#fff
}

.form-compact .input.field_with_errors .form-control, .form-compact .input.field_with_errors .form-control:focus {
    border: none;
    box-shadow:none
}

.form-compact .input.field_with_errors .error {
    position: absolute;
    bottom: 2.8125em;
    left: -.0625em;
    padding: .125em .375em;
    color: #fff;
    font-size: .75em;
    background: #c0392b;
    z-index:3
}

.form-compact .input .picker--opened .picker__holder {
    min-width: 14.75em;
    left: -.4375em;
    top: .25em;
    border-radius: 0;
    border: 1px solid #eaeaea;
    box-shadow:0 .0625em .125em rgba(153, 153, 153, .2)
}

.form-compact .input .picker--opened .picker__holder:focus {
    outline:none
}

.vacations {
    overflow-x:scroll
}

.table--vacations {
    table-layout: fixed;
    min-width:720px
}

.user-vacation-note-input {
  width: max-content;
}

.table--name {
    vertical-align:text-top
}

.avatar-table {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 20px;
    vertical-align: middle;
    margin-right:.25em
}

/* Settings */
.settings-email-input input {
  font-size: 14px;
  box-shadow: no;
}

.user_email_notifications_enabled label{
  text-transform: unset !important;
  font-size: 14px;
  font-weight: 500;
  color: var(--black);
}
.user_email_notifications_enabled input[type=checkbox]:checked {
  background-color: var(--purple);
  border-radius: 3px;
}

.user-vacation-days-table tbody tr:nth-of-type(even) {
  background:var(--gray-50);
  border-radius: 5px;
}

@media screen and (min-width: 40em) {
    .avatar-table {
        width: 28px;
        height: 28px;
        border-radius: 28px;
        margin-right:.375em
    }
}

.table--remove {
    font-size: .75em;
    color: #b71c1c;
    white-space: nowrap;
    margin-left: 1rem;
    border:0
}

.table--remove:hover, .table--remove:focus, .table--remove:active {
    color:#c0392b
}

.table--remove img {
    margin-right:.25em
}

.table--remove .remove-text {
    display:none
}

@media screen and (min-width: 40em) {
    .table--remove .remove-text {
        display:inline
    }
}

.table--edit {
    font-size: .75em;
    color: #222;
    white-space: nowrap;
    text-indent:-9999px
}

.table--edit:hover, .table--edit:focus, .table--edit:active {
    color:#222
}

.table--edit img {
    margin-right: .25em;
    height: 1rem;
    width:1rem
}

.table--edit .edit-text {
    display:none
}

@media screen and (min-width: 40em) {
    .table--edit .edit-text {
        display:inline
    }
}

.vacations-icons {
    margin-left: auto;
    padding-right:1rem
}

.vacations-flex {
    display: flex;
    justify-content:space-between
}

.vacations-weeks {
    position: relative;
    line-height: 1.7;
    font-size:10 px
}

span.vacation-annual:before {
    content: "💚";
    display:inline-block
}

span.vacation-unpaid:before {
    content: "💢";
    display:inline-block
}

span.vacation-flexing:before {
    content: "🔶";
    display:inline-block
}

.users-table tbody tr td {
    padding:.2rem .5rem;
    max-width: 100px;
    word-break: break-all;
}

.users-table tbody tr:hover {
    background:rgba(0, 0, 255, .1) !important
}

.user-vacations-table tbody tr {
    background:transparent
}

.user-vacations-table tbody tr:nth-of-type(odd) {
    background:transparent
}

.user-vacations-table tbody tr:hover {
    background:rgba(0, 255, 0, .01)
}

.user-vacations-table .cell-controls {
    width:4rem
}

.user-vacations-table .cell-controls .controls {
    display: flex;
    justify-content: space-between;
    align-items:center
}

.edit-button, .remove-button {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    margin: .2rem 0;
    padding: .2rem 0;
    width: 100%;
    text-decoration: none !important;
    box-shadow: none !important;
    font-weight: 400 !important;
    text-shadow: none !important;
    color:#222 !important
}

.edit-button img, .remove-button img {
    height: 1rem;
    width:1rem
}

.edit-button img + span, .remove-button img + span {
    margin-left:.5rem
}

.edit-button:hover, .remove-button:hover {
    cursor: pointer;
    text-decoration: underline !important;
    background:transparent !important
}

#vacation-modal {
    display:inline-block
}

#vacation-modal label {
    display: inline-block;
    text-transform: none;
    text-decoration: underline;
    text-decoration-color: var(--purple);
    font-size:14px
}

#vacation-modal .modal-inner {
    color:#222
}

.modal label {
    cursor: pointer;
    font-weight: 400;
    margin-bottom:0
}

.modal .modal-state {
    display:none
}

.modal .modal-fade-screen {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, .85);
    opacity: 0;
    transition: opacity .25s ease;
    visibility: hidden;
    z-index:99999
}


@media screen and (min-width: 53.75em) {
    .modal .modal-fade-screen {
        padding-top:.625em
    }
}

.modal .modal-bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    cursor:pointer
}

.modal .modal-close {
    position: absolute;
    top: 1.5em;
    right: 1.5em;
    height: 1.5em;
    width: 1.5em;
    background: #fff;
    cursor:pointer
}

.modal .modal-close:after, .modal .modal-close:before {
    position: absolute;
    top: 3px;
    right: 3px;
    bottom: 0;
    left: 50%;
    transform: rotate(45deg);
    height: 1.5em;
    width: .15em;
    background: #999;
    content: "";
    display: block;
    margin:-3px 0 0 -1px
}

.modal .modal-close:hover:after, .modal .modal-close:hover:before {
    background:gray
}

.modal .modal-close:before {
    transform:rotate(-45deg)
}

.modal .modal-inner {
    transition: opacity .25s ease;
    background: #fff;
    border-radius: 3px;
    margin: auto;
    max-height: 95%;
    overflow: auto;
    padding: 1.5em;
    position: relative;
    width:95%
}

@media screen and (min-width: 40em) {
    .modal .modal-inner {
        max-height: 70%;
        padding: 3em;
        width:60%
    }
}

@media screen and (min-width: 53.75em) {
    .modal .modal-inner {
        width:70%
    }
}

.modal .modal-inner p {
    color: #222;
    line-height:1.5
}

.modal .modal-inner .modal-content {
    color:#222
}

@media screen and (min-width: 40em) {
    .modal .modal-inner .modal-content {
        columns:2 8em
    }
}

.modal .modal-state:checked + .modal-fade-screen {
    opacity: 1;
    visibility:visible
}

.modal-open {
    overflow:hidden
}

.modal-closed {
    overflow:auto
}

.accordion-tabs {
    line-height: 1.5;
    margin-bottom: 1.5em;
    padding:0
}

.accordion-tabs:after {
    clear: both;
    content: "";
    display:block
}

@media screen and (max-width: 40em) {
    .accordion-tabs {
        border-radius: 3px;
        border:1px solid #eaeaea
    }
}

.accordion-tabs .tab-header-and-content {
    list-style:none
}

@media screen and (min-width: 40em) {
    .accordion-tabs .tab-header-and-content {
        display:inline
    }
}

.accordion-tabs .tab-header-and-content:first-child .tab-link {
    border-top-left-radius: 3px;
    border-top-right-radius:3px
}

@media screen and (max-width: 40em) {
    .accordion-tabs .tab-header-and-content:first-child .tab-link {
        border-top:0
    }
}

@media screen and (max-width: 40em) {
    .accordion-tabs .tab-header-and-content:last-child .tab-link {
        border-bottom-left-radius: 3px;
        border-bottom-right-radius:3px
    }
}

.accordion-tabs .tab-link {
    background-color: #fff;
    border-top: 1px solid #eaeaea;
    color: #222;
    display: block;
    font-weight: 700;
    padding: .75em .809em;
    text-decoration:none
}

@media screen and (min-width: 40em) {
    .accordion-tabs .tab-link {
        display: inline-block;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        border-top:0
    }
}

.accordion-tabs .tab-link:hover {
    color:#477dca
}

.accordion-tabs .tab-link:focus {
    outline:none
}

.accordion-tabs .tab-link.is-active {
    background-color:#fff
}

@media screen and (min-width: 40em) {
    .accordion-tabs .tab-link.is-active {
        background-color: #fff;
        border: 1px solid #eaeaea;
        border-bottom-color: #fff;
        margin-bottom:-1px
    }
}

.accordion-tabs .tab-content {
    background: white;
    display: none;
    padding: 1.5em 1.618em;
    width:100%
}

@media screen and (min-width: 40em) {
    .accordion-tabs .tab-content {
        border-bottom-left-radius: 3px;
        border-bottom-right-radius: 3px;
        border-top-right-radius: 3px;
        border: 1px solid #eaeaea;
        float:left
    }
}

@media screen and (min-width: 40em) {
    .settings-input {
        display:table
    }
}

@media screen and (min-width: 40em) {
    .settings-input--left {
        display: table-cell;
        padding-right:.3125em
    }

    .settings-input--left input {
        margin-bottom:0
    }
}

@media screen and (min-width: 40em) {
    .settings-input--right {
        display: table-cell;
        vertical-align: bottom;
        white-space: nowrap;
        padding-left:.3125em
    }

    .settings-input--right input {
        position: relative;
        top:-1px
    }
}

.vacations-chart {
    width: 100%;
    overflow-x:auto
}

#token {
    width:320px
}

#token + label {
    margin-bottom:.75em
}

.tooltip {
    position: relative;
    display: inline-block;
    padding-left:5px
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #000;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index:1
}

.tooltip:hover .tooltiptext {
    visibility: visible
}

@media (max-width: 600px) {
  .vacation-container {
    display: flex;
    flex-direction: column;
  }
}

.flatpickr-day {
  border-radius: 10px;
}

.flatpickr-day.selected.startRange,
.flatpickr-day.startRange.startRange {
  border-radius: 10px 0 0 10px;
}

.flatpickr-day.selected.endRange,
.flatpickr-day.startRange.endRange,
.flatpickr-day.endRange.endRange {
  border-radius: 0 10px 10px 0;
}

.flatpickr-day.inRange {
  background-color: #EDF2FB !important;
  border-color: #EDF2FB;
  border: none;
 -webkit-box-shadow: -5px 0 0 0 #EDF2FB, 5px 0 0 0 #EDF2FB;
 box-shadow: -5px 0 0 0 #EDF2FB, 5px 0 0 0 #EDF2FB;

}

.flatpickr-current-month
.flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
  border: solid 1px #e1e1e1;
  font-size: 14px;
  padding: 6px;
  border-radius: 5px;
  box-shadow: none;
}

.flatpickr-current-month input.cur-year {
  margin-left: 8px;
}

.flatpickr-months .flatpickr-month  {
  height: 64px;
}

.dayContainer {
  background-color: white;
}

.flatpickr-calendar * {
  background-color: white;
}

.flatpickr-innerContainer {
  border-radius: 10px;
}


/* Absences */
[data-controller=absences--form] .dates-range , .hours{
  height: 36px;
}

[data-controller=absences--form] .btn--add-vacation:disabled{
  background-color: var(--black-80);
  color: var(--black);
}

.absence-table tbody tr:nth-of-type(2n) {
  background: var(--gray-50);
}