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

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

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

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

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{
  background-color:#fff;
  border:2px solid #f7f8fa;
  border-radius:4px;
  display:block;
  left:10px;
  margin-top:20px;
  padding-left:5px;
  width:495px
}

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

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;
  height:25px;
  line-height:25px;
  vertical-align:middle;
  width:495px
}

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

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

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

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

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

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{
  border:1px solid #444;
  border-radius:2px;
  cursor:pointer;
  height:19px;
  margin:0;
  padding:0;
  top:1px;
  width:30px
}

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

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

input.vis-configuration.vis-config-range{
  -webkit-appearance:none;
  background-color:transparent;
  border:0 solid #fff;
  height:20px;
  width:300px
}

input.vis-configuration.vis-config-range::-webkit-slider-runnable-track{
  background:#dedede;
  background:linear-gradient(180deg,#dedede 0,#c8c8c8 99%);
  border:1px solid #999;
  border-radius:3px;
  box-shadow:0 0 3px 0 #aaa;
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#dedede",endColorstr="#c8c8c8",GradientType=0);
  height:5px;
  width:300px
}

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

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

input.vis-configuration.vis-config-range:focus::-webkit-slider-runnable-track{
  background:#9d9d9d;
  background:linear-gradient(180deg,#9d9d9d 0,#c8c8c8 99%);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#9d9d9d",endColorstr="#c8c8c8",GradientType=0)
}

input.vis-configuration.vis-config-range::-moz-range-track{
  background:#dedede;
  background:linear-gradient(180deg,#dedede 0,#c8c8c8 99%);
  border:1px solid #999;
  border-radius:3px;
  box-shadow:0 0 3px 0 #aaa;
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#dedede",endColorstr="#c8c8c8",GradientType=0);
  height:10px;
  width:300px
}

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

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

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

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{
  background:#385380;
  border:none;
  border-radius:50%;
  height:16px;
  width:16px
}

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{
  background:rgba(57,76,89,.85);
  border:2px solid #f2faff;
  border-radius:4px;
  color:#fff;
  font-size:14px;
  height:30px;
  line-height:30px;
  position:absolute;
  text-align:center;
  transition:opacity .3s ease-in-out;
  width:150px
}

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

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

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

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

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

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

.vis-rolling-mode-btn:before{
  content:"\26F6"
}

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

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

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

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

.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{
  color:#4d4d4d;
  position:absolute;
  white-space:nowrap;
  width:100%
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.vis-item .vis-delete-rtl:after,.vis-item .vis-delete:after{
  color:red;
  content:"\00D7";
  font-family:arial,sans-serif;
  font-size:22px;
  font-weight:700;
  transition:color .2s linear
}

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

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

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

.vis-item.vis-range .vis-drag-left{
  cursor:w-resize;
  left:-4px
}

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

.vis-item.vis-range .vis-drag-right{
  cursor:e-resize;
  right:-4px
}

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

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

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

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

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

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

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

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

.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-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:"\25BC"
}

.vis-label.vis-nesting-group.collapsed:before{
  content:"\25B6"
}

.vis-rtl .vis-label.vis-nesting-group.collapsed:before{
  content:"\25C0"
}

.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{
  height:100%;
  left:0;
  position:absolute;
  top:0;
  width:100%;
  z-index:10
}

.vis-labelset{
  overflow:hidden
}

.vis-labelset,.vis-labelset .vis-label{
  box-sizing:border-box;
  position:relative
}

.vis-labelset .vis-label{
  border-bottom:1px solid #bfbfbf;
  color:#4d4d4d;
  left:0;
  top:0;
  width:100%
}

.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
}

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

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

.vis-panel.vis-center,.vis-panel.vis-left,.vis-panel.vis-right{
  border-bottom-style:solid;
  border-top-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-bottom,.vis-panel.vis-center,.vis-panel.vis-top{
  border-left-style:solid;
  border-right-style:solid
}

.vis-background{
  overflow:hidden
}

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

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

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

.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-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-time-axis{
  overflow:hidden;
  position:relative
}

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

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

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

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

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

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

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

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

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

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

/*# sourceMappingURL=vis-timeline-graph2d.min.css.map */

/* Shared by the application and standalone error assets. See doc/layout_framework.md. */

:root {
  --app-workspace-max: 112.5rem;
  --app-form-max: 60rem;
  --app-reading-max: 60rem;
  --app-auth-max: 22rem;
  --app-message-max: 50rem;
  --app-gutter: 1rem;
  --app-sidebar-expanded: 16rem;
  --app-sidebar-collapsed: 2.5rem;
  /* The live sidebar width. Declared at the root, not on the space container, because
     the header rail outside <main> has to follow it too. `app-space--collapsed` goes on
     <body> so both branches of the page can see the state. */
  --app-sidebar-width: var(--app-sidebar-expanded);
  /* Main content is the same width with or without a space sidebar, so an index does
     not re-flow its columns as you navigate between the two. Derived, not authored, so
     it stays true if the sidebar width changes. */
  --app-content-max: calc(var(--app-workspace-max) - var(--app-sidebar-expanded) - 3 * var(--app-gutter));
}

@media (min-width: 640px) {
  :root {
    --app-gutter: 1.5rem;
  }
}

@media (min-width: 1024px) {
  :root {
    --app-gutter: 2rem;
  }
}

/* Explicit display utilities (for example the sidebar's flex) must not override hidden. */

[data-full-screen-target][hidden] {
  display: none !important;
}

/* Keep the sidebar's collapse state intact, and release its entire reservation. */

.app-full-screen .app-space {
  padding-left: 0;
}

.app-full-screen .header-search-block {
  top: 0;
}

*, ::before, ::after{
  --tw-border-spacing-x:0;
  --tw-border-spacing-y:0;
  --tw-translate-x:0;
  --tw-translate-y:0;
  --tw-rotate:0;
  --tw-skew-x:0;
  --tw-skew-y:0;
  --tw-scale-x:1;
  --tw-scale-y:1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness:proximity;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width:0px;
  --tw-ring-offset-color:#fff;
  --tw-ring-color:rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow:0 0 #0000;
  --tw-ring-shadow:0 0 #0000;
  --tw-shadow:0 0 #0000;
  --tw-shadow-colored:0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
  --tw-contain-size: ;
  --tw-contain-layout: ;
  --tw-contain-paint: ;
  --tw-contain-style: 
}

::backdrop{
  --tw-border-spacing-x:0;
  --tw-border-spacing-y:0;
  --tw-translate-x:0;
  --tw-translate-y:0;
  --tw-rotate:0;
  --tw-skew-x:0;
  --tw-skew-y:0;
  --tw-scale-x:1;
  --tw-scale-y:1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness:proximity;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width:0px;
  --tw-ring-offset-color:#fff;
  --tw-ring-color:rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow:0 0 #0000;
  --tw-ring-shadow:0 0 #0000;
  --tw-shadow:0 0 #0000;
  --tw-shadow-colored:0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
  --tw-contain-size: ;
  --tw-contain-layout: ;
  --tw-contain-paint: ;
  --tw-contain-style: 
}

/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com */

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: #e5e7eb;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

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

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* 1 */
  font-feature-settings: normal;
  /* 2 */
  font-variation-settings: normal;
  /* 3 */
  font-size: 1em;
  /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-feature-settings: inherit;
  /* 1 */
  font-variation-settings: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  letter-spacing: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

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

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

:root {
  --cloaked-sky-color: #23758e;
  --alert-red-color: #f35f30;
  --bariol-green-color: #47d7ac;
  --alert-amber-color: #b45309;
  --dark-black-color: #272727;
  --dimmed-bariol-color: #346b5c;
  /* --broken-white-color: #f8f8f8; */
  --broken-white-color: #f3f4f6;
  /* --secondary-purple-color: #5840b0; */
  --secondary-purple-color: #47d7ac;
  --paragraph-grey-color: #999999;
  /* --primary-menu-color: #d5d5d5; */
  --primary-menu-color: #fff;
  --primary-menu-btn-text-color: #555;
  /* --primary-menu-btn-bg-color: #FFF; */
  --primary-menu-btn-bg-color: #fff;
  --primary-menu-btn-text-color-active: #47D7AC;
  /* --primary-menu-btn-bg-color-active: #f1f1f1; */
  --primary-menu-btn-bg-color-active: #fff;
  --secondary-menu-color: #ffffff;
  --secondary-menu-btn-text-color: #555;
  --secondary-menu-btn-bg-color: #f1f1f1;
}

body {
  /* background-color: lightyellow; */
  background-color: var(--broken-white-color);
  margin: 0;
}

.\!container{
  width:100% !important
}

.container{
  width:100%
}

@media (min-width: 640px){
  .\!container{
    max-width:640px !important
  }

  .container{
    max-width:640px
  }
}

@media (min-width: 768px){
  .\!container{
    max-width:768px !important
  }

  .container{
    max-width:768px
  }
}

@media (min-width: 1024px){
  .\!container{
    max-width:1024px !important
  }

  .container{
    max-width:1024px
  }
}

@media (min-width: 1280px){
  .\!container{
    max-width:1280px !important
  }

  .container{
    max-width:1280px
  }
}

@media (min-width: 1536px){
  .\!container{
    max-width:1536px !important
  }

  .container{
    max-width:1536px
  }
}

.app-workspace {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--app-workspace-max);
  min-width: 0;
  margin-inline: auto;
  padding-inline: var(--app-gutter);
}

/* The content rail. Main navigation and sidebar-less content share it, so the logo
     sits on the content's leading edge and the header icons on its trailing edge
     instead of drifting into the workspace's empty sidebar reservation. */

.app-page {
  width: 100%;
  min-width: 0;
  max-width: var(--app-content-max);
  margin-inline: auto;
}

/* In a space the header rail takes the same offset as the content, so the logo and
     the icon cluster bracket the content card rather than the workspace, and both
     follow the sidebar as it collapses. */

.app-space,
  .app-space-rail {
  min-width: 0;
  padding-left: calc(var(--app-sidebar-width) + var(--app-gutter));
  transition: padding-left 0.5s;
}

.app-space--collapsed {
  --app-sidebar-width: var(--app-sidebar-collapsed);
}

.app-space #focus-menu {
  left: max(var(--app-gutter), calc((100% - var(--app-workspace-max)) / 2 + var(--app-gutter)));
  width: var(--app-sidebar-width);
  transition: width 0.5s;
}

/* Deliberately uncapped: collapsing the sidebar exists to release its width to the
     content, which is the whole point of making it collapsible. Do not add a maximum. */

.app-space-content {
  min-width: 0;
  width: 100%;
}

.app-form,
  .app-form-fields,
  .app-reading,
  .app-auth,
  .app-message {
  width: 100%;
  min-width: 0;
}

.app-form,
  .app-form-fields {
  max-width: var(--app-form-max);
}

/* A narrowed form is centred in its content area: an index fills the width, so a form
     left at the leading edge reads as a page that failed to fill rather than a deliberate
     measure. `app-form-fields` is not centred — inside a line-items form its header fields
     must stay flush with the line editors beneath them. */

.app-form {
  margin-inline: auto;
}

.app-form--line-items {
  max-width: none;
}

.app-reading {
  max-width: var(--app-reading-max);
}

.app-auth {
  max-width: var(--app-auth-max);
}

.app-message {
  max-width: var(--app-message-max);
}

.app-form-lines {
  width: 100%;
  min-width: 0;
}

.app-table-scroll {
  /* Contain positioned table content, including screen-reader-only action labels. */
  position: relative;
  width: 100%;
  min-width: 0;
  overflow-x: auto;
}

/* Preserve room for editing on narrow screens; the table, not the page, scrolls. */

.app-table-scroll table {
  width: 100%;
  min-width: var(--app-table-min, 60rem);
}

.app-table-scroll--wide {
  --app-table-min: 75rem;
}

.app-standalone {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem var(--app-gutter) 5rem;
}

.app-standalone--reading {
  justify-content: flex-start;
}

/* Focused split views: a document beside the data taken from it. The panes scroll
     independently inside a full-height rail, and the divider is the operator's to drag.
     The default ratio lives here so CSS owns the geometry; JavaScript writes only an
     inline flex-basis while dragging, which beats these rules and loses to the stacked
     ones below. */

.app-split {
  display: flex;
  height: 100%;
  min-height: 0;
}

.app-split-pane {
  overflow: auto;
  min-width: 0;
  min-height: 0;
}

.app-split-pane--document {
  flex: 0 0 55%;
}

.app-split-pane--data {
  flex: 0 0 45%;
}

.app-split-divider {
  flex-shrink: 0;
  width: 0.375rem;
  cursor: col-resize;
}

@media (max-width: 1023px) {
  /* Two panes side by side stop being workable well above phone widths: neither the
       document nor the fields keep a usable measure. Stack them and give each its own
       scroll rather than shrinking both past use. The data side carries the controls, so
       it takes the larger share. `!important` is needed to beat the inline flex-basis the
       divider writes; a horizontal divider has no meaning stacked, so it goes. */

  .app-split {
    flex-direction: column;
  }

  .app-split-pane--document {
    flex: 2 1 0 !important;
  }

  .app-split-pane--data {
    flex: 3 1 0 !important;
  }

  .app-split-divider {
    display: none;
  }
}

@media (max-width: 639px) {
  /* Expanded navigation overlays the content on phones rather than squeezing it. */

  .app-space {
    padding-left: calc(var(--app-sidebar-collapsed) + var(--app-gutter));
  }

  /* The phone header is the hamburger menu, which belongs at the edge, not offset. */

  .app-space-rail {
    padding-left: 0;
  }

  .app-form .app-form-fields > *,
    .app-form .pcmdcrud-form-card-body-fields-holder > * {
    min-width: 0;
  }

  .app-form .pcmdcrud-form-card-body-fields-holder > * {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-space,
    .app-space-rail,
    .app-space #focus-menu {
    transition: none;
  }
}

@media print {
  .app-workspace,
    .app-page,
    .app-space-rail,
    .app-space {
    max-width: none;
    padding: 0;
  }

  .app-form,
    .app-form-fields,
    .app-reading {
    max-width: none;
  }

  .app-space #focus-menu {
    display: none;
  }

  .app-table-scroll {
    overflow: visible;
  }

  .app-table-scroll table {
    min-width: 0;
  }
}

/* Base — shared across all button variants */

.btn{
  display:inline-flex;
  cursor:pointer;
  align-items:center;
  border-radius:0.375rem;
  font-weight:500;
  transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:150ms
}

.btn:focus{
  outline:2px solid transparent;
  outline-offset:2px;
  --tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-offset-width:2px
}

.btn:disabled{
  cursor:not-allowed;
  opacity:0.6
}

.btn {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

/* Native app action variants */

.btn--primary{
  --tw-text-opacity:1;
  color:rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.btn--primary:focus{
  --tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-offset-width:2px
}

.btn--primary {
  background-color: var(--bariol-green-color);
  --tw-ring-color: var(--bariol-green-color);
}

.btn--primary:hover:not(:disabled) {
  filter: brightness(0.9);
}

.btn--secondary{
  border-width:1px;
  --tw-border-opacity:1;
  border-color:rgb(209 213 219 / var(--tw-border-opacity, 1));
  --tw-bg-opacity:1;
  background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity:1;
  color:rgb(55 65 81 / var(--tw-text-opacity, 1))
}

.btn--secondary:hover{
  --tw-bg-opacity:1;
  background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1))
}

.btn--secondary:focus{
  --tw-ring-opacity:1;
  --tw-ring-color:rgb(99 102 241 / var(--tw-ring-opacity, 1))
}

.btn--danger{
  border-width:1px;
  --tw-border-opacity:1;
  border-color:rgb(252 165 165 / var(--tw-border-opacity, 1));
  --tw-bg-opacity:1;
  background-color:rgb(254 242 242 / var(--tw-bg-opacity, 1));
  --tw-text-opacity:1;
  color:rgb(185 28 28 / var(--tw-text-opacity, 1))
}

.btn--danger:hover{
  --tw-bg-opacity:1;
  background-color:rgb(254 226 226 / var(--tw-bg-opacity, 1))
}

.btn--danger:focus{
  --tw-ring-opacity:1;
  --tw-ring-color:rgb(248 113 113 / var(--tw-ring-opacity, 1))
}

.btn--ghost{
  --tw-text-opacity:1;
  color:rgb(55 65 81 / var(--tw-text-opacity, 1))
}

.btn--ghost:hover{
  --tw-bg-opacity:1;
  background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))
}

.btn--ghost:focus{
  --tw-ring-opacity:1;
  --tw-ring-color:rgb(156 163 175 / var(--tw-ring-opacity, 1))
}

.btn--link{
  --tw-text-opacity:1;
  color:rgb(37 99 235 / var(--tw-text-opacity, 1))
}

.btn--link:hover{
  --tw-text-opacity:1;
  color:rgb(30 64 175 / var(--tw-text-opacity, 1));
  text-decoration-line:underline
}

.btn--link:focus{
  --tw-ring-opacity:1;
  --tw-ring-color:rgb(59 130 246 / var(--tw-ring-opacity, 1))
}

.btn--link {
  padding: 0;
  border-radius: 0;
}

/* Distinct action-source variants — intentionally different from native actions */

.btn--export{
  font-weight:700;
  --tw-text-opacity:1;
  color:rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.btn--export:focus{
  --tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-offset-width:2px
}

.btn--export {
  background-color: var(--bariol-green-color);
  --tw-ring-color: var(--bariol-green-color);
  padding: 0.625rem;
}

.btn--export:hover:not(:disabled) {
  filter: brightness(0.9);
}

.btn--integration{
  --tw-bg-opacity:1;
  background-color:rgb(37 99 235 / var(--tw-bg-opacity, 1));
  --tw-text-opacity:1;
  color:rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.btn--integration:hover{
  --tw-bg-opacity:1;
  background-color:rgb(29 78 216 / var(--tw-bg-opacity, 1))
}

.btn--integration:focus{
  --tw-ring-opacity:1;
  --tw-ring-color:rgb(59 130 246 / var(--tw-ring-opacity, 1))
}

/* Compact sizing — .btn--inline for buttons inside an Other actions/Tools panel,
     .btn--sm for a standalone control (toolbar, calendar/timeline nav) that wants the same size */

.btn--inline,
  .btn--sm{
  padding-left:0.5rem;
  padding-right:0.5rem;
  padding-top:0.25rem;
  padding-bottom:0.25rem;
  font-size:0.75rem;
  line-height:1rem
}

.btn--lg{
  padding-left:1.5rem;
  padding-right:1.5rem;
  padding-top:0.75rem;
  padding-bottom:0.75rem;
  font-size:1rem;
  line-height:1.5rem
}

/* Icon-only */

.btn--icon{
  padding:0.5rem
}

/* Loading state */

.btn--loading{
  pointer-events:none
}

@media print {
  .btn--loading
  {
    display: none;
    height: 0;
  }
}

.pcmd-body-color {
  background-color: var(--broken-white-color);
}

[type="text"]:focus,
[type="email"]:focus,
[type="url"]:focus,
[type="password"]:focus,
[type="number"]:focus,
[type="date"]:focus,
[type="datetime-local"]:focus,
[type="month"]:focus,
[type="search"]:focus,
[type="tel"]:focus,
[type="time"]:focus,
[type="week"]:focus,
[multiple]:focus,
textarea:focus,
.pcmd-currency-select-focus,
select:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: var(--secondary-purple-color) !important;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
    var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
    calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
    var(--tw-shadow, 0 0 #0000);
  border-color: var(--secondary-purple-color) !important;
}

.pcmd-currency-select {
  position: relative;
  padding-left: 2.25rem;
}

.pcmd-currency-select::before {
  --tw-bg-opacity: 1;
  --tw-border-opacity: 1;
  content: '$';
  position: absolute;
  left:0px;
  height: 100%;
  line-height: 1.25rem;
  font-size: 0.875rem;
  padding: 0.5rem 0.75rem;
  border-width: 0px;
  border-right-width: 1px;
  border-color: rgba(209, 213, 219, var(--tw-border-opacity));
  background-color: rgba(249, 250, 251, var(--tw-bg-opacity));
  border-top-left-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
}

/*
.prose {
  max-width: 100% !important;
}
*/

.bg-green {
  background: var(--bariol-green-color) !important;
}

.text-green {
  color: var(--bariol-green-color) !important;
}

.border-green {
  border-color: var(--bariol-green-color) !important;
}

.hover\:bg-green:hover {
  background: #3bc199 !important;
}

.focus\:ring-green:focus {
  --tw-ring-color: var(--bariol-green-color);
}

.bg-red {
  background: var(--alert-red-color) !important;
}

.bg-red-800 {
  background: rgba(243, 95, 48, 0.15) !important;
}

.text-red {
  color: var(--alert-red-color) !important;
}

.border-red {
  border-color: var(--alert-red-color) !important;
}

.bg-green-800 {
  background: rgba(71, 215, 172, 0.1) !important;
}

.bg-blue {
  background: var(--cloaked-sky-color) !important;
}

.restore-css, .pcmd-nested-field {
  background: rgba(243, 95, 48, 0.11);
  padding: 10px;
  border-radius: 5px;
}

.border-red-900 {
  border-color: var(--alert-red-color) !important;
}

.border-green-900 {
  border-color: var(--bariol-green-color) !important;
}

.text-red-900 {
  color: var(--alert-red-color) !important;
}

.text-green-900 {
  color: var(--bariol-green-color) !important;
}

.bg-yellow-600 {
  background: rgba(180, 83, 9, 0.12) !important;
}

.border-yellow-900 {
  border-color: var(--alert-amber-color) !important;
}

.text-yellow-900 {
  color: var(--alert-amber-color) !important;
}

.best_in_place *:focus{
  border-width: 0px;
}

.best_in_place, .not_best_in_place{
  display: flex;
  width:300px;
  padding: 2px 10px;
}

.integration-connection-setting-value .best_in_place {
  width: 100%;
  min-width: 0;
  padding: 0;
  overflow-wrap: anywhere;
}

.pcmd-index-bip {
  width: auto!important;
  padding: 2px 0px;
}

.pcmd-index-bip *{
  max-width: 100%;
}

.pcmd-index-bip-fixed {
  width: 100px!important;
  overflow: auto;
}

.website-link {
  width: auto;
  margin-right: 5px;
}

.divide-y .py-4{
  min-height:42px;
}

.divide-y th{
  font-weight: bold;
}

.divide-y td{
  font-weight: 400;
}

/* custom default css */

.pcmd-header-nav{
  height: 4rem;
  z-index: 50;
  top: 0px;
  position: sticky;
}

.header-search-block {
  z-index: 20;
}

.pcmd-header-nav-holder{
  justify-content: space-between;
  align-items: center;
  height: 4rem;
  display: flex;
}

.pcmd-header-nav,
.mobile-menu{
  background-color: var(--primary-menu-color);
}

.secondary-menu{
  background-color: var(--secondary-menu-color);
}

#first-level-nav a,
.mobile-menu a {
  color: var(--primary-menu-btn-text-color);
  background-color: var(--primary-menu-btn-bg-color);
}

.mobile-submenu a{
  margin-left: 0.8rem;
}

#second-level-nav a {
  color: var(--secondary-menu-btn-text-color);
  background-color: var(--secondary-menu-btn-bg-color);
  margin-right: 1rem;
}

#first-level-nav a.pcmdcrud-header-link.active,
#second-level-nav a.active{
  background-color: var(--primary-menu-btn-bg-color-active);
}

#first-level-nav a.active{
  color: var(--primary-menu-btn-text-color-active);
}

#first-level-nav a,
#second-level-nav a{
  width: 100px !important;
  text-align: center;
}

#second-level-nav{
  height: 2.6rem !important;
  /* padding-left: 5.2rem; */
}

#second-level-nav .py-2{
  padding-top: 0.3rem !important;
  padding-bottom: 0.3rem !important;
}

.welcome-text,
.bell-icon{
  color: #000;
}

@media (min-width: 1024px){
  .lg\:px-20,
  .xl\:px-20 {
    padding-left: 5.1rem !important;
    padding-right: 5.1rem !important;
  }
}

@media (min-width: 1536px){
  .\32xl\:px-20 {
    padding-left: 5.2rem !important;
    padding-right: 5.2rem !important;
  }
}

.menu-hover:hover>.submenu {
  display: block !important;
}

.submenu {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.07);
  border: 1px solid #e5e7eb;
}

input:not([type="submit"]) {
  box-shadow: none !important;
}

.select2 {
  width: 100% !important;
}

.center-main-logo{
  position: absolute;
  top: 44%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}

.budget-status .select2 {
  width: auto !important;
}

.budget-status .select2-selection__rendered{
  padding-right: 2rem !important;
}

.schedule-select .select2{
  width: 12rem !important;
  text-align: left;
}

#budget-table-for-print{
  display: none;
}

.warning-alert{
  position:relative;
  border-radius:0.25rem;
  border-width:2px;
  --tw-border-opacity:1;
  border-color:rgb(202 138 4 / var(--tw-border-opacity, 1));
  padding:0.75rem;
  font-size:0.875rem;
  line-height:1.25rem;
  --tw-text-opacity:1;
  color:rgb(113 63 18 / var(--tw-text-opacity, 1));
  color: var(--alert-amber-color)
}

.pcmdcrud-header-icons div.warning-alert{
  padding-left: 0.50rem;
}

@media print {
  @page {
    size: A4 landscape;
  }

  @page :left {
    margin-left: 0.2cm;
  }

  @page :right {
    margin-left: 0.2cm;
  }

  body {
    line-height: 1.5;
    font-size: 9pt;
  }

  h1, h2, h3, h4, h5 {
    font-weight: bold;
    page-break-after: avoid;
    page-break-inside:avoid;
  }

  /* foldable show cards (attribute panels among them): panel_controller.js opens every <details>
     on beforeprint, since CSS alone cannot reveal a closed one in Chromium. These rules make the
     printed result read as a plain card rather than as a collapsed widget. */

  .pcmdcrud-show-card--foldable > details > summary {
    page-break-after: avoid;
    list-style: none;
  }

  .pcmdcrud-show-card--foldable > details > summary::-webkit-details-marker {
    display: none;
  }

  table {
    page-break-inside: avoid;
    border-collapse: separate;
    /* border: 1px solid #eee; */
    border-spacing: 0;
    font-size: 11pt;
    width: 100%;
    /* border-color: #eee ; */
    /* border-right: 1px solid; */
  }

  tr {
    /* border-color: #eee; */
    /* border: 1px solid #000000; */
    width: 100%;
  }

  td {
    /* border-color: #eee; */
    border-left: 1px solid;
    border-right: 1px solid;
    border-bottom: 1px solid;
    padding: 6px !important;
    width: 100%;
  }

  th {
    /* border-color: #eee; */
    border-left: 1px solid;
    border-top: 1px solid;
    border-bottom: 1px solid;
    border-right: 1px solid;
    padding: 8pt !important;
    text-align: left;
    width: 100%;
  }

  footer,
  input[type="submit"],
  #focus-menu,
  .sidebar-toggle-btn,
  #flash_container,
  #first-level-nav,
  #search-in-accordion,
  .schedule-select,
  .budget-select,
  .budget-search,
  .fold-all-accordion,
  .submenu,
  #bullet-footer,
  .index-search, 
  .pcmd-header-nav,
  .pcmdcrud-action-icon,
  td.pcmdcrud-td > a,
  .pcmdcrud-action-menu,
  .pcmdcrud-other-actions-trigger,
  .pcmdcrud-other-actions-panel,
  th svg,
  .crud-op-create,
  .summary-block,
  .fold-all-accordion,
  .pcmd-accordion-icon,
  .accordion-toggle,
  .pcmd-nav-icon,
  .pcmd-project-part-actions,
  .toggle-humburger,
  .edit-fields,
  .side-bip-opener,
  .pcmd-accordion-actions,
  .pcmd-budget-add-icon,
  .budget-holder,
  .pointer-events-none
  {
    display: none !important;
    height: 0;
  }

  #budget-table-for-print{
    display: block !important;
  }
}

.pcmdcrud-index-header {
  --tw-text-opacity: 1;
  color: rgba(17, 24, 39, var(--tw-text-opacity));
  line-height: 1.5rem;
  font-weight: 500;
  font-size: 1.125rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 1.5rem;
}

.pcmdcrud-container-1 {
  display: flex;
  flex-direction: column;
}

.pcmdcrud-container-2 {
  margin-top: -0.5rem;
  margin-bottom: -0.5rem;
  overflow-x: auto;
  margin-left: -1.5rem;
  margin-right: -1.5rem;
}

.pcmdcrud-container-3 {
  display: inline-block;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  vertical-align: middle;
  min-width: 100%;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.pcmdcrud-container-4 {
  overflow: hidden;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgba(229, 231, 235, var(--tw-border-opacity));
  --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  border-radius: 0.5rem;
}

.pcmdcrud-context {
  padding: 0.5rem;
  margin-bottom: 1rem;
}

/* Context controls share the disclosure row rather than adding a second toolbar row. */

.pcmdcrud-context-actions > .pcmdcrud-show-icon-holder {
  padding: 0;
  margin-bottom: 0;
  background: transparent;
}

.pcmdcrud-form-nested-attributes details[open] > summary {
  margin-bottom: 0.5rem;
}

.pcmdcrud-form-nested-attributes .pcmdcrud-form-nested-fields-add-button {
  margin-bottom: 0.5rem;
}

.pcmdcrud-form-nested-attributes--empty .pcmdcrud-form-nested-fields-add-button {
  margin-top: 0;
  margin-bottom: 0;
}

.pcmdcrud-table {
  border-collapse: collapse;
  text-indent: 0;
  border-color: inherit;
  min-width: 100%;
}

.pcmdcrud-thead {
  border-bottom-width: 1px;
  --tw-bg-opacity: 1;
  background-color: rgba(249, 250, 251, var(--tw-bg-opacity));
}

.sticky-table-header {
  position: relative;
  z-index: 10;
}

.pcmdcrud-th {
  --tw-text-opacity: 1;
  color: rgba(107, 114, 128, var(--tw-text-opacity));
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 0.75rem;
  line-height: 1rem;
  text-align: left;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.pcmdcrud-th-action {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  position: relative;
}

.pcmdcrud-td {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  white-space: nowrap;
  --tw-text-opacity: 1;
  color: rgba(107, 114, 128, var(--tw-text-opacity));
}

.pcmdcrud-td-left-space {
  padding-left: 1.5rem;
  padding-right: 0.5rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgba(107, 114, 128, var(--tw-text-opacity));
}

.pcmdcrud-edit {
  font-size: 1.875rem;
  line-height: 2.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  --tw-text-opacity: 1;
  color: rgba(17, 24, 39, var(--tw-text-opacity));
  font-weight: 700;
  margin-bottom: 1.5rem;
}

.pcmdcrud-update-form-line {
  grid-auto-flow: column dense;
  gap: 0.5rem;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  display: grid;
  margin-left: auto;
  margin-right: auto;
}

.pcmdcrud-update-form-element {
  grid-column: span 2 / span 2;
}

.pcmdcrud-datasheet-element {
  grid-column: span 4 / span 4;
}

.pcmdcrud-form-card {
  --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.pcmdcrud-form-card-body {
  --tw-bg-opacity: 1;
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
}

.pcmdcrud-form-card-header-title {
  --tw-text-opacity: 1;
  color: rgba(17, 24, 39, var(--tw-text-opacity));
  line-height: 1.5rem;
  font-weight: 500;
  font-size: 1.125rem;
}

.pcmdcrud-form-card-body-fields-holder{
  --tw-space-y-reverse: 0;
  margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.625rem * var(--tw-space-y-reverse));
  gap: 0.625rem;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  display: grid;
}

/* Nested-attribute cards render on a finer 12-column grid (see form_markup_helper.rb's
   total_width: 12) so short fields can pack four to a row instead of three. */

.pcmdcrud-form-card-body-fields-holder.pcmdcrud-form-card-body-fields-holder--dense{
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.pcmdcrud-form-card-body-field-label {
  --tw-text-opacity: 1;
  color: rgba(55, 65, 81, var(--tw-text-opacity));
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.25rem;
  display: block;
  margin-bottom: 0.125rem;
}

.pcmdcrud-form-card-body-field-select {
  --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: 0.875rem;
  --tw-bg-opacity: 1;
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgba(209, 213, 219, var(--tw-border-opacity));
  border-width: 1px;
  border-radius: 0.375rem;
  width: 100%;
  display: block;
  margin-top: 0.25rem;
}

/* Checkbox dropdowns use the same control styling as native form selects. */

.pcmd-search-select {
  position: relative;
  cursor: pointer;
  list-style: none;
  line-height: 1.25rem;
  padding-right: 2rem;
}

.pcmd-search-select::-webkit-details-marker {
  display: none;
}

.pcmd-search-select-chevron {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  pointer-events: none;
}

.pcmdcrud-form-card-body-field-text {
  --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  --tw-border-opacity: 1;
  border-color: rgba(209, 213, 219, var(--tw-border-opacity));
  border-width: 1px;
  border-radius: 0.375rem !important;
  font-size: 0.875rem;
  width: 100%;
  display: block;
  margin-top: 0.25rem;
}

input[type="date"].pcmdcrud-form-card-body-field-text {
  height: 1.875rem;
  line-height: 1.375rem;
}

/* Nested-attribute cards trim the standard text/select/date field height to sit with the compact
   row controls, rather than growing those to match the app's normal (taller) field height.
   Memo/description textareas are unaffected — only the height-related properties below vary. */

.pcmd-nested-field .pcmdcrud-form-card-body-field-text,
.pcmd-nested-field .pcmdcrud-form-card-body-field-select {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

.pcmd-nested-field input[type="date"].pcmdcrud-form-card-body-field-text {
  height: 1.5rem;
  line-height: 1.125rem;
}

.pcmdcrud-form-card-body-field-date {
  --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  --tw-border-opacity: 1;
  border-color: rgba(209, 213, 219, var(--tw-border-opacity));
  border-width: 1px;
  border-radius: 0.375rem !important;
  font-size: 0.875rem;
  width: 100%;
  display: block;
  margin-top: 0.25rem;
}

.pcmdcrud-form-nested-fields-add-button{
  --tw-text-opacity: 1;
  color: rgba(55, 65, 81, var(--tw-text-opacity));
  vertical-align: middle;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  display: flex;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.pcmdcrud-form-footer{
  text-align: right;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-left: 1rem;
  padding-right: 1rem;
  --tw-bg-opacity: 1;
  background-color: rgba(249, 250, 251, var(--tw-bg-opacity));
}

.pcmdcrud-form-footer-button {
  --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, var(--tw-text-opacity));
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.25rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  padding-left: 1rem;
  padding-right: 1rem;
  --tw-bg-opacity: 1;
  /* background-color: rgba(79, 70, 229, var(--tw-bg-opacity)); */
  background-color: var(--bariol-green-color);
  border-color: transparent;
  border-width: 1px;
  border-radius: 0.375rem;
  justify-content: center;
  display: inline-flex;
}

.pcmdcrud-form-label {
  --tw-text-opacity: 1;
  color: rgba(55, 65, 81, var(--tw-text-opacity));
  font-size: 0.875rem;
  line-height: 1.25rem;
  display: block;
  margin-bottom: 0.25rem;
}

.pcmdcrud-country {
  display: none;
  line-height: 1.25;
  border-radius: 0.25rem;
  width: 100% !important;
}

.pcmdcrud-form-text-field {
  --tw-text-opacity: 1;
  color: rgba(55, 65, 81, var(--tw-text-opacity));
  line-height: 1.25 !important;
  border-radius: 0.25rem !important;
  width: 100%;
  margin-bottom: 0.75rem;
}

.pcmdcrud-form-collection {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: inherit;
  margin: 0;
}

.pcmdcrud-form-select2 {
  text-transform: capitalize;
}

.pcmdcrud-google-address-field {
  border-radius: 0.25rem !important;
  width: 100%;
  --tw-text-opacity: 1;
  color: rgba(55, 65, 81, var(--tw-text-opacity));
  line-height: 1.25 !important;
  padding-left: 2rem !important;
}

/* Google Places Autocomplete (new API) - the element uses shadow DOM */

gmp-place-autocomplete {
  display: block;
  width: 100%;
  background-color: transparent;
  border: none;
  color-scheme: light;
  --gmpac-color-surface: #fff;
  --gmpac-color-on-surface: rgba(55, 65, 81, 1);
  --gmpac-color-outline: rgba(209, 213, 219, 1);
}

gmp-place-autocomplete::part(input) {
  border-radius: 0.25rem;
  width: 100%;
  color: rgba(55, 65, 81, 1);
  line-height: 1.25;
  padding: 0.5rem 0.75rem;
  border: 1px solid rgba(209, 213, 219, 1);
  font-size: 0.875rem;
  background-color: #fff;
}

.pcmdcrud-label-manual-address {
  --tw-text-opacity: 1;
  color: rgba(55, 65, 81, var(--tw-text-opacity));
  margin-left: 0.75rem;
}

.pcmdcrud-google-addr {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
  align-items: center;
  display: flex;
  left: 0px;
  top: 0px;
  bottom: 0px;
  position: absolute;
  pointer-events: none;
}

.pcmdcrud-auto-grid {
  grid-auto-flow: column dense;
  gap: 0.5rem;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  display: grid;
  margin-left: auto;
  margin-right: auto;
}

.pcmdcrud-datasheet-element {
  grid-column: span 6 / span 6;
}

.pcmdcrud-datasheet-element1 {
  grid-column: span 4 / span 4;
}

.pcmdcrud-datasheet-element2 {
  grid-column: span 12 / span 12;
}

.pcmdcrud-background {
  border-radius: 0.125rem;
  --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  padding: 1rem;
  --tw-bg-opacity: 1;
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
}

.pcmdcrud-submit {
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, var(--tw-text-opacity));
  font-weight: 700;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 0.25rem;
  cursor: pointer;
  -webkit-appearance: button;
  background: var(--bariol-green-color) !important;
  line-height: inherit;
  font-family: inherit;
  font-size: 100%;
  margin: 0;
}

.pcmdcrud-td-action-icon {
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.25rem;
  vertical-align: middle;
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  white-space: nowrap;
  display: inline-block;
}

.pcmdcrud-show-icon-holder {
  padding: 0.25rem 0.5rem;
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-bg-opacity: 1;
  background-color: rgba(249, 250, 251, var(--tw-bg-opacity));
  border-radius: 0.375rem;
}

.pcmdcrud-show-actions-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.125rem;
}

/* The toolbar centres its items; the standalone icon's bottom margin would lift them off that line. */

.pcmdcrud-show-actions-toolbar .pcmdcrud-show-icon {
  margin-bottom: 0;
}

.pcmdcrud-show-actions-divider {
  width: 1px;
  height: 1.5rem;
  margin: 0 0.375rem;
  background-color: #d1d5db;
}

.pcmdcrud-other-actions-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  color: #374151;
  background-color: #fff;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.pcmdcrud-other-actions-trigger:hover {
  background-color: #f3f4f6;
  border-color: #9ca3af;
}

.pcmdcrud-other-actions-trigger:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #6366f1;
}

.pcmdcrud-other-actions-chevron {
  width: 0.875rem;
  height: 0.875rem;
  transition: transform 0.15s ease;
}

.pcmdcrud-other-actions-panel {
  max-width: 48rem;
  margin-top: 0.5rem;
  padding: 0.75rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.375rem;
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.pcmdcrud-show-other-actions {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.125rem;
  flex: 1;
  min-width: -moz-max-content;
  min-width: max-content;
}

.pcmdcrud-index-other-actions-panel,
.pcmdcrud-show-other-actions-panel {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 30;
  width: -moz-max-content;
  width: max-content;
  max-width: 100%;
  max-height: 70vh;
  overflow: auto;
  margin-top: 0.25rem;
  text-align: left;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.pcmdcrud-show-other-actions-panel {
  left: 0.375rem;
  right: auto;
  max-width: calc(100% - 0.375rem);
}

.pcmdcrud-index-other-actions-trigger {
  flex: 0 0 auto;
  padding: 0.5rem 1rem;
  border-color: var(--bariol-green-color);
  color: #374151;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.pcmdcrud-other-actions-group + .pcmdcrud-other-actions-group {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid #e5e7eb;
}

.pcmdcrud-other-actions-heading {
  margin-bottom: 0.5rem;
  color: #6b7280;
  font-size: 0.6875rem;
  line-height: 1rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.pcmdcrud-other-actions-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.pcmdcrud-add-related-action svg {
  color: #10b981;
}

.pcmdcrud-integration-action-group + .pcmdcrud-integration-action-group {
  margin-top: 0.625rem;
}

.pcmdcrud-integration-action-provider {
  margin-bottom: 0.375rem;
  color: #374151;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
}

.pcmdcrud-show-icon {
  vertical-align: middle;
  padding: 0.375rem;
  border-radius: 0.25rem;
  display: inline-block;
  margin-bottom: 0.25rem;
  background-color: transparent;
  transition: background-color 0.15s ease;
}

.pcmdcrud-show-icon svg {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
}

.pcmdcrud-show-icon.crud-op-index  {
  color: #9ca3af;
}

.pcmdcrud-show-icon.crud-op-show,
.pcmdcrud-show-icon.crud-op-update {
  color: #3b82f6;
}

.pcmdcrud-show-icon.crud-op-destroy {
  color: #ef4444;
}

.pcmdcrud-show-icon.crud-op-create  {
  color: #10b981;
}

.pcmdcrud-show-icon.crud-op-index:hover   {
  background-color: #e5e7eb;
}

.pcmdcrud-show-icon.crud-op-show:hover,
.pcmdcrud-show-icon.crud-op-update:hover  {
  background-color: #dbeafe;
}

.pcmdcrud-show-icon.crud-op-destroy:hover {
  background-color: #fee2e2;
}

.pcmdcrud-show-icon.crud-op-create:hover  {
  background-color: #d1fae5;
}

.pcmdcrud-show-icon:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 1px;
}

/* Nested-attribute row controls — add, remove and restore-after-remove. One treatment for all
   three, mirroring .pcmdcrud-show-icon above: neutral and chromeless at rest, with only a light
   action-coloured wash on hover. Remove and restore are the same element (removeFields.js swaps
   the behaviour class when a saved row is flagged for deletion), so the restore hover keys off
   that class rather than needing a modifier the JS would also have to toggle. */

.pcmdcrud-nested-field-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  padding: 0.375rem;
  border-radius: 0.25rem;
  color: #374151;
  background-color: transparent;
  transition: background-color 0.15s ease;
}

.pcmdcrud-nested-field-icon svg {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
}

/* Dense table-row cells (eg. invoice and claim line items) keep the treatment, tighten the box. */

.pcmdcrud-nested-field-icon--compact {
  padding: 0.125rem;
}

.pcmdcrud-nested-field-icon--add:hover {
  background-color: #d1fae5;
}

.pcmdcrud-nested-field-icon--remove:hover {
  background-color: #fee2e2;
}

.pcmdcrud-nested-field-icon--remove.restore_data_nested_field:hover {
  background-color: #d1fae5;
}

.pcmdcrud-nested-field-icon:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 1px;
}

.pcmdcrud-show-content-holder {
  margin-top: 0.5rem;
  --tw-border-opacity: 1;
  border-color: rgba(229, 231, 235, var(--tw-border-opacity));
}

.pcmdcrud-show-content-item-holder {
  min-height: 42px;
}

.pcmdcrud-show-content-item-key {
  --tw-text-opacity: 1;
  color: rgba(107, 114, 128, var(--tw-text-opacity));
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.pcmdcrud-show-content-item-value {
  --tw-text-opacity: 1;
  color: rgba(17, 24, 39, var(--tw-text-opacity));
  font-size: 0.875rem;
  line-height: 1.25rem;
  display: flex;
}

.pcmdcrud-show-sub-header {
  --tw-text-opacity: 1;
  color: rgba(17, 24, 39, var(--tw-text-opacity));
  line-height: 1.5rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
  margin-top: 1.75rem;
}

/* show cards - see app/views/application/core/_show_card.html.erb. Same shell as the integration
   show screen cards (integrations/_credential_card.html.erb). */

.pcmdcrud-show-card {
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding: 1rem 1.5rem;
  background-color: #fff;
  border: 1px solid rgba(229, 231, 235, 1);
  border-radius: 0.5rem;
  page-break-inside: avoid;
}

.pcmdcrud-show-card-title {
  color: rgba(31, 41, 55, 1);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  margin-bottom: 0.75rem;
}

/* tones - the `tone:` card option. Default is white; these match the tinted boxes on the
   integration show screen. */

.pcmdcrud-show-card--muted   {
  background-color: rgba(249, 250, 251, 1);
}

.pcmdcrud-show-card--info    {
  background-color: rgba(239, 246, 255, 1);
  border-color: rgba(191, 219, 254, 1);
}

.pcmdcrud-show-card--warning {
  background-color: rgba(255, 251, 235, 1);
  border-color: rgba(253, 230, 138, 1);
}

.pcmdcrud-show-card--danger  {
  background-color: rgba(254, 242, 242, 1);
  border-color: rgba(254, 202, 202, 1);
}

.pcmdcrud-show-card--info    .pcmdcrud-show-card-title {
  color: rgba(30, 64, 175, 1);
}

.pcmdcrud-show-card--warning .pcmdcrud-show-card-title {
  color: rgba(146, 64, 14, 1);
}

.pcmdcrud-show-card--danger  .pcmdcrud-show-card-title {
  color: rgba(153, 27, 27, 1);
}

/* each row is one line of items that wraps rather than overflowing on a narrow screen */

.pcmdcrud-show-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* a fixed number of equal columns (the `columns:` card option, default 3) rather than sizing to
   content, so a short line's items sit under a long line's and every card on a screen lines up
   with its neighbours. One column below the same breakpoint as the show field grid. */

.pcmdcrud-show-card-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem 1.5rem;
}

@media (min-width: 640px) {
  .pcmdcrud-show-card--cols-2 .pcmdcrud-show-card-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pcmdcrud-show-card--cols-3 .pcmdcrud-show-card-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .pcmdcrud-show-card--cols-4 .pcmdcrud-show-card-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* a line's last item runs on from its own column to the card's edge, so a long value (a
     rejection reason, say) is not squeezed into one column. See show_card_last_item_class. */

  .pcmdcrud-show-card-item--last-from-1 {
    grid-column: 1 / -1;
  }

  .pcmdcrud-show-card-item--last-from-2 {
    grid-column: 2 / -1;
  }

  .pcmdcrud-show-card-item--last-from-3 {
    grid-column: 3 / -1;
  }
}

/* foldable - the `foldable:` card option. The title is the <summary>. */

.pcmdcrud-show-card--foldable > details > summary {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  margin-bottom: 0;
}

.pcmdcrud-show-card--foldable > details[open] > summary {
  margin-bottom: 0.75rem;
}

/* the shared show-item markup carries a trailing margin meant for stacked rows */

.pcmdcrud-show-card-item .pcmdcrud-show-content-item-value span {
  margin-bottom: 0;
}

/* embedded tables - a hand-built table embedded on a show screen (documents/_list,
   qualification_requirements/_assessment), dressed to match the core nested-attribute index
   that render_nested_attributes embeds. Cells take the core .pcmdcrud-td. */

.pcmdcrud-embedded-header{
  margin-bottom:0.5rem;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:0.5rem
}

.nav-group > .pcmdcrud-embedded-header {
  margin-bottom: 4px;
}

.pcmdcrud-embedded-title{
  font-size:0.875rem;
  line-height:1.25rem;
  font-weight:500;
  --tw-text-opacity:1;
  color:rgb(17 24 39 / var(--tw-text-opacity, 1))
}

.pcmdcrud-embedded-table-frame{
  overflow-x:auto;
  --tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color:rgb(0 0 0 / var(--tw-ring-opacity, 1));
  --tw-ring-opacity:0.05
}

@media (min-width: 768px){
  .pcmdcrud-embedded-table-frame{
    border-radius:0.5rem
  }
}

.pcmdcrud-embedded-table{
  min-width:100%
}

.pcmdcrud-embedded-table > :not([hidden]) ~ :not([hidden]){
  --tw-divide-y-reverse:0;
  border-top-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width:calc(1px * var(--tw-divide-y-reverse));
  --tw-divide-opacity:1;
  border-color:rgb(209 213 219 / var(--tw-divide-opacity, 1))
}

.pcmdcrud-embedded-table .py-4{
  min-height:42px;
}

.pcmdcrud-embedded-table th{
  font-weight: bold;
}

.pcmdcrud-embedded-table td{
  font-weight: 400;
}

.pcmdcrud-embedded-table > thead{
  --tw-bg-opacity:1;
  background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1))
}

.pcmdcrud-embedded-table > thead th{
  padding-top:0.25rem;
  padding-bottom:0.25rem;
  padding-left:1rem;
  padding-right:0.75rem;
  text-align:left;
  font-size:0.875rem;
  line-height:1.25rem;
  font-weight:600;
  --tw-text-opacity:1;
  color:rgb(17 24 39 / var(--tw-text-opacity, 1))
}

@media (min-width: 640px){
  .pcmdcrud-embedded-table > thead th{
    padding-left:1.5rem
  }
}

.pcmdcrud-embedded-table > tbody > :not([hidden]) ~ :not([hidden]){
  --tw-divide-y-reverse:0;
  border-top-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width:calc(1px * var(--tw-divide-y-reverse));
  --tw-divide-opacity:1;
  border-color:rgb(229 231 235 / var(--tw-divide-opacity, 1))
}

.pcmdcrud-embedded-table > tbody{
  --tw-bg-opacity:1;
  background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))
}

.pcmdcrud-embedded-table > tbody .py-4{
  min-height:42px;
}

.pcmdcrud-embedded-table > tbody th{
  font-weight: bold;
}

.pcmdcrud-embedded-table > tbody td{
  font-weight: 400;
}

.pcmdcrud-embedded-empty{
  font-size:0.875rem;
  line-height:1.25rem;
  --tw-text-opacity:1;
  color:rgb(107 114 128 / var(--tw-text-opacity, 1))
}

.pagination-list {
  align-items: center;
  display: inline-flex;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.pagination-item {
  display: flex;
  flex: 0 0 auto;
}

.pagination-button {
  --tw-text-opacity: 1;
  color: rgba(107, 114, 128, var(--tw-text-opacity));
  font-weight: 500;
  font-size: 0.8125rem;
  line-height: 1rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  --tw-bg-opacity: 1;
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgba(209, 213, 219, var(--tw-border-opacity));
  border-width: 1px;
  align-items: center;
  display: inline-flex;
  min-height: 2rem;
  position: relative;
  text-decoration: inherit;
  white-space: nowrap;
}

.pagination-item .pagination-button {
  justify-content: center;
}

.pagination-item .pagination-button:not(.prev):not(.nextc) {
  min-width: 2rem;
}

.pagination-button-active {
  --tw-text-opacity: 1;
  color: rgba(79, 70, 229, var(--tw-text-opacity)) !important;
  --tw-bg-opacity: 1;
  background-color: rgba(238, 242, 255, var(--tw-bg-opacity)) !important;
  --tw-border-opacity: 1;
  border-color: rgba(99, 102, 241, var(--tw-border-opacity)) !important;
  z-index: 10;
}

.pagination-select {
  --tw-text-opacity: 1;
  color: rgba(107, 114, 128, var(--tw-text-opacity));
  font-weight: 500;
  font-size: 0.8125rem;
  line-height: 1rem;
  min-height: 2rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.75rem;
  padding-right: 1.75rem;
  --tw-bg-opacity: 1;
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
  --tw-border-opacity: 1;
  border-color: rgba(209, 213, 219, var(--tw-border-opacity));
  border-width: 1px;
  border-radius: 0;
}

.pagination-select:focus {
  --tw-border-opacity: 1;
  border-color: rgba(20, 83, 45, var(--tw-border-opacity));
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-color: rgba(20, 83, 45, var(--tw-ring-opacity, 1));
  box-shadow: 0 0 0 1px var(--tw-ring-color);
}

.pcmdcrud-bipok, .pcmdcrud-bipcan{
  vertical-align: middle;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgba(229, 231, 235, var(--tw-bg-opacity));
  border-radius: 0.25rem;
  display: inline-block;
  margin-right: -0.20rem !important;
  cursor: pointer;
}

.pcmdcrud-bipok{
  background-color: var(--bariol-green-color);
  color: #fff;
}

.pcmdcrud-bipcan{
  background-color: var(--alert-red-color);
  color: #fff;
}

.pcmdcrud-header-link{
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.25rem;
  /* padding-left: 0.75rem; */
  padding-right: 0.75rem;
  border-radius: 0.375rem;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

.pcmdcrud-masquerade-icon {
  font-size: 1.7rem !important;
}

.pcmdcrud-header-icons div.relative{
  padding-left: 0.50rem;
}

.pcmd-accordion-icon {
  width: 12px;
  margin: auto;
}

/* responsiveness */

@media (min-width: 640px) {
  .pcmdcrud-show-content-item-holder {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    gap: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    display: grid;
  }

  .pcmdcrud-show-content-item-value {
    margin-top: 0px;
    grid-column: span 2 / span 2;
  }

  .pcmdcrud-show-content-item-value--full {
    margin-top: 0px;
    grid-column: span 3 / span 3;
  }

  .pcmdcrud-show-content-item-value > div {
    padding-left: 0.6rem;
  }
}

.turbo-frame {
  display: block;
  border: 1px solid --var(--bariol-green-color);
}

.sort {
  position: absolute;
  top: 1rem;
  left: 0.5rem;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
}

.sort-desc {
  border-top: 8px solid #000;
}

.sort-asc {
  border-bottom: 8px solid #000;
}

/* .submenu ul>li {
  padding: 0.5rem 0 0.5rem 0.5rem;
} */

.pcmdcrud-index-search-field {
  --tw-border-opacity: 1;
  border-color: rgba(59, 130, 246, var(--tw-border-opacity));
  border-width: 1px;
  border-radius: 0.25rem !important;
  height: 2.4rem !important;
  display: block;
  padding-left: 8px;
  padding-right: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pcmdcrud-form-checkbox{
  transition-duration: 200ms;
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  vertical-align: top;
  --tw-border-opacity: 1;
  border-width: 1px;
  border-radius: 0.25rem !important;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  width: 1rem;
  height: 1rem;
}

.pcmdcrud-form-checkbox-label {
  --tw-text-opacity: 1;
  color: rgba(55, 65, 81, var(--tw-text-opacity));
  font-size: 0.875rem;
  line-height: 1.25rem;
  display: inline-block;
  margin-bottom: 0.25rem;
}

.pcmd-nav-active {
  background-color: rgba(37, 99, 235, 0.08) !important;
  color: #1d4ed8 !important;
  font-weight: 500;
  border-left: 3px solid #2563eb;
  padding-left: 9px;
}

.pcmd-nav-active .pcmd-nav-icon {
  fill: #1d4ed8;
}

.pcmd-nav-check-icon-gray {
  --tw-text-opacity: 1;
  fill: rgba(190, 200, 200, var(--tw-text-opacity));
}

.pcmd-nav-check-icon-green {
  --tw-text-opacity: 1;
  fill: rgba(5, 150, 105, var(--tw-text-opacity));
}

.row {
  --gutter-x: 1.5rem;
  --gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--gutter-y));
  margin-right: calc(-0.5 * var(--gutter-x));
  margin-left: calc(-0.5 * var(--gutter-x));
}

.row > * {
  box-sizing: border-box;
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--gutter-x) * 0.5);
  padding-left: calc(var(--gutter-x) * 0.5);
  margin-top: var(--gutter-y);
}

.col-md-3 {
  flex: 0 0 auto;
  width: 25%;
}

.col-md-9 {
  flex: 0 0 auto;
  width: 75%;
}

.nav-link {
  display: block;
  padding: 5px 12px;
  margin-bottom: 2px;
  background: transparent;
  border-radius: 5px;
  font-size: 0.8125rem;
  color: #4b5563;
  border-left: 3px solid transparent;
}

.nav-link:hover:not(.pcmd-nav-active) {
  background-color: rgba(0, 0, 0, 0.04);
  color: #374151;
}

.nav-link.active {
  background: #fff;
}

.pcmd-nav-icon svg {
  width: 16px;
  height: 16px;
}

.pcmd-accordion-block .pcmd-accordion-actions {
  width: 24px;
}

.pcmd-accordion-block .pcmd-accordion-actions a {
  display: none;
}

.pcmd-project-part-accordion:hover .pcmd-project-part-actions a {
  display: block;
}

.pcmd-work-item-accordion:hover .pcmd-work-item-actions a {
  display: block;
}

.pcmd-estimate-accordion:hover .pcmd-estimate-actions a {
  display: block;
}

.pcmd-accordion-block .pcmd-accordion-actions span.pcmd-action-disabled {
  display: none;
}

.pcmd-project-part-accordion:hover .pcmd-project-part-actions span.pcmd-action-disabled,
.pcmd-work-item-accordion:hover .pcmd-work-item-actions span.pcmd-action-disabled,
.pcmd-estimate-accordion:hover .pcmd-estimate-actions span.pcmd-action-disabled {
  display: block;
}

.pcmdcrud-table--clickable tbody tr {
  cursor: pointer;
}

.pcmdcrud-table--clickable tbody tr:hover {
  background: rgba(243, 244, 246, 1);
}

.pcmdcrud-table--static tbody tr {
  cursor: default;
}

/* .nested-fields tr{
  background: none!important;
} */

.pcmdcrud-header-search{
  outline: none !important;
}

.pcmdcrud-form-readonly {
  background-color: #eee !important;
}

.pdf-description-header {
  color: rgb(64, 64, 64);
}

.pdf-description-content {
  color: black;
}

.pcmd-color {
  color : #47d7ac;
}

.pcmd-border-color {
  border-color : #47d7ac;
}

.pdf .thead th {
  background: rgb(181, 181, 181);
}

.pdf td, .pdf th {
  padding: 4px 10px;
}

.pdf_link {
  color: #0000EE;
  text-decoration: underline;
}

.pdf .thead-dark th {
  background: gray;
  color: white;
}

.pcmd-inline-link:hover, .pcmd-inline-link:active, .pcmd-inline-link:focus {
  background-color: var(--bariol-green-color);
  color: white;
}

#focus-menu {
  background-color: #ffffff;
  box-shadow: 3px 0 5px -2px #888;
}

.sidebar-header {
  flex-shrink: 0;
  border-bottom: 1px solid #e5e7eb;
  padding: 4px;
}

.sidebar-header .nav-link {
  margin-bottom: 0;
}

.sidebar-footer {
  flex-shrink: 0;
  border-top: 1px solid #e5e7eb;
  padding: 4px;
}

.sidebar-footer .nav-link {
  margin-bottom: 0;
}

/* Navigation accordion toggle buttons */

.nav-toggle {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 2px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  transition: background-color 0.2s;
}

.nav-toggle:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.nav-toggle:focus {
  outline: 2px solid rgba(37, 99, 235, 0.5);
  outline-offset: 2px;
}

.nav-toggle .pcmd-accordion-icon {
  width: 14px;
  height: 14px;
  color: #9ca3af;
  opacity: 0.9;
}

.nav-toggle:hover .pcmd-accordion-icon {
  color: #6b7280;
  opacity: 1;
}

.nav-section-heading {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b7280;
  padding: 0.6rem 0.75rem;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* When sidebar is collapsed: hide heading, show children directly as icon-only links */

.app-space--collapsed #focus-menu .nav-section-heading {
  display: none;
}

.app-space--collapsed #focus-menu .nav-section .nav-secondary {
  display: block !important;
}

.app-space--collapsed #focus-menu .nav-section .nav-secondary .nav-link {
  margin-left: 0;
}

.nav-group {
  margin-bottom: 0;
}

/* A folded group carries the sum of its children's alert badges; the children show their own once unfolded. */

.nav-group:has(> .nav-secondary:not(.hidden)) .nav-fold-badge,
.app-space--collapsed #focus-menu .nav-fold-badge {
  display: none;
}

.nav-group .nav-primary-link {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
  font-weight: 500;
  color: #374151;
}

.nav-group > .flex {
  margin-bottom: 4px;
}

/* Hide nav toggle buttons when sidebar is collapsed */

.app-space--collapsed #focus-menu .nav-toggle {
  display: none;
}

.top-22 {
  top: 5.5rem;
}

.sidebar-tooltip {
  position: fixed;
  margin-top: -20px;
  margin-left: 55px;
  background-color: black;
  color: white;
  border: 1px solid black;
  padding: 3px 15px;
  border-radius: 10px;
  z-index: 1000;
  font-size: 12px;
  font-weight: bold;
}

.tooltip {
  position: absolute;
  background-color: black;
  color: white;
  border: 1px solid black;
  padding: 1px 5px;
  border-radius: 5px;
  z-index: 1000;
  font-size: 10px;
  font-weight: bold;
  bottom: 25px;
  left: 5px;
  width: 200px;
  display: none;
}

.tooltip-parent, .tooltip-parent-click {
  position: relative;
}

.tooltip-parent:hover .tooltip,
.tooltip-parent-click:hover .tooltip {
  display: block;
}

/* Reusable application tooltip. The floating-tooltip Stimulus controller
   portals the content to <body>, preventing table overflow from clipping it. */

.pcmd-tooltip {
  display: inline-flex;
  align-items: center;
  cursor: help;
  border-radius: 0.125rem;
}

/* A tooltip wrapping a form select must keep the field's full width. */

.pcmd-tooltip:has(> select) {
  display: flex;
}

.pcmd-tooltip:focus {
  outline: 2px solid #47D7AC;
  outline-offset: 2px;
}

.pcmd-tooltip-content {
  position: fixed;
  z-index: 1000;
  top: var(--pcmd-tooltip-top, 0);
  left: var(--pcmd-tooltip-left, 0);
  width: -moz-max-content;
  width: max-content;
  max-width: min(18rem, calc(100vw - 1rem));
  padding: 0.5rem 0.75rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.375rem;
  background-color: #ffffff;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  color: #374151;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1rem;
  text-align: left;
  overflow-wrap: anywhere;
  pointer-events: none;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.25rem);
  transition: opacity 120ms ease-out, transform 120ms ease-out, visibility 120ms;
}

.pcmd-tooltip-content[data-placement="bottom"] {
  transform: translateY(-0.25rem);
}

.pcmd-tooltip-content--visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Navigation hover states (extracted from layout inline styles) */

#first-level-nav a:not([class*="active"]):hover,
#second-level-nav a:not([class*="active"]):hover,
.plus-icon:hover,
.plus-icon div.submenu a:not([class*="active"]):hover,
.pcmdcrud-header-icons div.submenu a:not([class*="active"]):hover {
  color: #47D7AC !important;
}

.bg-footer-green {
  background: var(--cloaked-sky-color);
  color: #F8F8F8;
}

.bg-purple-900 {
  background: #5840B0 !important;
}

/* Select2 single-select sizing */

.select2-container .select2-selection--single {
  height: 1.875rem;
  border-radius: 0.25rem;
  border-color: rgb(209, 213, 219);
  border-width: 1px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 1.75rem;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 1.75rem;
  right: 8px;
}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0, 0, 0, 0);
  white-space:nowrap;
  border-width:0
}

.pointer-events-none{
  pointer-events:none
}

.pointer-events-auto{
  pointer-events:auto
}

.\!visible{
  visibility:visible !important
}

.visible{
  visibility:visible
}

.invisible{
  visibility:hidden
}

.collapse{
  visibility:collapse
}

.static{
  position:static
}

.fixed{
  position:fixed
}

.absolute{
  position:absolute
}

.relative{
  position:relative
}

.sticky{
  position:sticky
}

.inset-0{
  inset:0px
}

.inset-y-0{
  top:0px;
  bottom:0px
}

.bottom-0{
  bottom:0px
}

.bottom-8{
  bottom:2rem
}

.left-0{
  left:0px
}

.right-0{
  right:0px
}

.right-2{
  right:0.5rem
}

.top-0{
  top:0px
}

.top-16{
  top:4rem
}

.top-2{
  top:0.5rem
}

.z-0{
  z-index:0
}

.z-10{
  z-index:10
}

.z-20{
  z-index:20
}

.z-30{
  z-index:30
}

.z-40{
  z-index:40
}

.z-50{
  z-index:50
}

.col-span-1{
  grid-column:span 1 / span 1
}

.col-span-10{
  grid-column:span 10 / span 10
}

.col-span-11{
  grid-column:span 11 / span 11
}

.col-span-12{
  grid-column:span 12 / span 12
}

.col-span-2{
  grid-column:span 2 / span 2
}

.col-span-3{
  grid-column:span 3 / span 3
}

.col-span-4{
  grid-column:span 4 / span 4
}

.col-span-5{
  grid-column:span 5 / span 5
}

.col-span-6{
  grid-column:span 6 / span 6
}

.col-span-7{
  grid-column:span 7 / span 7
}

.col-span-8{
  grid-column:span 8 / span 8
}

.col-span-9{
  grid-column:span 9 / span 9
}

.col-span-full{
  grid-column:1 / -1
}

.-m-2{
  margin:-0.5rem
}

.m-0{
  margin:0px
}

.-mx-4{
  margin-left:-1rem;
  margin-right:-1rem
}

.-my-2{
  margin-top:-0.5rem;
  margin-bottom:-0.5rem
}

.mx-1{
  margin-left:0.25rem;
  margin-right:0.25rem
}

.mx-2{
  margin-left:0.5rem;
  margin-right:0.5rem
}

.mx-auto{
  margin-left:auto;
  margin-right:auto
}

.my-1{
  margin-top:0.25rem;
  margin-bottom:0.25rem
}

.my-10{
  margin-top:2.5rem;
  margin-bottom:2.5rem
}

.my-2{
  margin-top:0.5rem;
  margin-bottom:0.5rem
}

.my-20{
  margin-top:5rem;
  margin-bottom:5rem
}

.my-3{
  margin-top:0.75rem;
  margin-bottom:0.75rem
}

.my-4{
  margin-top:1rem;
  margin-bottom:1rem
}

.my-5{
  margin-top:1.25rem;
  margin-bottom:1.25rem
}

.my-auto{
  margin-top:auto;
  margin-bottom:auto
}

.-mb-px{
  margin-bottom:-1px
}

.-ml-1{
  margin-left:-0.25rem
}

.-mr-4{
  margin-right:-1rem
}

.-mt-2{
  margin-top:-0.5rem
}

.mb-0{
  margin-bottom:0px
}

.mb-1{
  margin-bottom:0.25rem
}

.mb-10{
  margin-bottom:2.5rem
}

.mb-2{
  margin-bottom:0.5rem
}

.mb-20{
  margin-bottom:5rem
}

.mb-3{
  margin-bottom:0.75rem
}

.mb-4{
  margin-bottom:1rem
}

.mb-5{
  margin-bottom:1.25rem
}

.mb-6{
  margin-bottom:1.5rem
}

.mb-7{
  margin-bottom:1.75rem
}

.mb-8{
  margin-bottom:2rem
}

.ml-1{
  margin-left:0.25rem
}

.ml-2{
  margin-left:0.5rem
}

.ml-3{
  margin-left:0.75rem
}

.ml-4{
  margin-left:1rem
}

.ml-5{
  margin-left:1.25rem
}

.ml-6{
  margin-left:1.5rem
}

.ml-8{
  margin-left:2rem
}

.ml-auto{
  margin-left:auto
}

.mr-0{
  margin-right:0px
}

.mr-1{
  margin-right:0.25rem
}

.mr-10{
  margin-right:2.5rem
}

.mr-2{
  margin-right:0.5rem
}

.mr-20{
  margin-right:5rem
}

.mr-3{
  margin-right:0.75rem
}

.mr-5{
  margin-right:1.25rem
}

.mr-9{
  margin-right:2.25rem
}

.mt-0{
  margin-top:0px
}

.mt-0\.5{
  margin-top:0.125rem
}

.mt-1{
  margin-top:0.25rem
}

.mt-1\.5{
  margin-top:0.375rem
}

.mt-10{
  margin-top:2.5rem
}

.mt-12{
  margin-top:3rem
}

.mt-16{
  margin-top:4rem
}

.mt-2{
  margin-top:0.5rem
}

.mt-20{
  margin-top:5rem
}

.mt-3{
  margin-top:0.75rem
}

.mt-4{
  margin-top:1rem
}

.mt-6{
  margin-top:1.5rem
}

.mt-8{
  margin-top:2rem
}

.mt-\[18px\]{
  margin-top:18px
}

.mt-auto{
  margin-top:auto
}

.\!block{
  display:block !important
}

.block{
  display:block
}

.inline-block{
  display:inline-block
}

.inline{
  display:inline
}

.flex{
  display:flex
}

.inline-flex{
  display:inline-flex
}

.table{
  display:table
}

.table-row{
  display:table-row
}

.grid{
  display:grid
}

.contents{
  display:contents
}

.\!hidden{
  display:none !important
}

.hidden{
  display:none
}

.h-1{
  height:0.25rem
}

.h-10{
  height:2.5rem
}

.h-12{
  height:3rem
}

.h-16{
  height:4rem
}

.h-20{
  height:5rem
}

.h-24{
  height:6rem
}

.h-3{
  height:0.75rem
}

.h-4{
  height:1rem
}

.h-5{
  height:1.25rem
}

.h-6{
  height:1.5rem
}

.h-8{
  height:2rem
}

.h-9{
  height:2.25rem
}

.h-\[300px\]{
  height:300px
}

.h-\[34px\]{
  height:34px
}

.h-full{
  height:100%
}

.h-screen{
  height:100vh
}

.max-h-48{
  max-height:12rem
}

.max-h-56{
  max-height:14rem
}

.max-h-64{
  max-height:16rem
}

.max-h-screen{
  max-height:100vh
}

.min-h-0{
  min-height:0px
}

.min-h-full{
  min-height:100%
}

.min-h-screen{
  min-height:100vh
}

.\!w-\[300px\]{
  width:300px !important
}

.w-0{
  width:0px
}

.w-1{
  width:0.25rem
}

.w-1\/2{
  width:50%
}

.w-1\/3{
  width:33.333333%
}

.w-1\/4{
  width:25%
}

.w-1\/5{
  width:20%
}

.w-10{
  width:2.5rem
}

.w-10\/12{
  width:83.333333%
}

.w-11\/12{
  width:91.666667%
}

.w-12{
  width:3rem
}

.w-14{
  width:3.5rem
}

.w-16{
  width:4rem
}

.w-2{
  width:0.5rem
}

.w-2\/12{
  width:16.666667%
}

.w-2\/3{
  width:66.666667%
}

.w-2\/5{
  width:40%
}

.w-20{
  width:5rem
}

.w-24{
  width:6rem
}

.w-28{
  width:7rem
}

.w-3{
  width:0.75rem
}

.w-3\/4{
  width:75%
}

.w-32{
  width:8rem
}

.w-36{
  width:9rem
}

.w-4{
  width:1rem
}

.w-40{
  width:10rem
}

.w-44{
  width:11rem
}

.w-48{
  width:12rem
}

.w-5{
  width:1.25rem
}

.w-5\/12{
  width:41.666667%
}

.w-52{
  width:13rem
}

.w-56{
  width:14rem
}

.w-6{
  width:1.5rem
}

.w-60{
  width:15rem
}

.w-64{
  width:16rem
}

.w-8{
  width:2rem
}

.w-9{
  width:2.25rem
}

.w-\[100px\]{
  width:100px
}

.w-auto{
  width:auto
}

.w-full{
  width:100%
}

.w-max{
  width:-moz-max-content;
  width:max-content
}

.min-w-0{
  min-width:0px
}

.min-w-16{
  min-width:4rem
}

.min-w-48{
  min-width:12rem
}

.min-w-\[12rem\]{
  min-width:12rem
}

.min-w-\[16rem\]{
  min-width:16rem
}

.min-w-\[7rem\]{
  min-width:7rem
}

.min-w-\[9rem\]{
  min-width:9rem
}

.min-w-full{
  min-width:100%
}

.max-w-6xl{
  max-width:72rem
}

.max-w-\[16rem\]{
  max-width:16rem
}

.max-w-full{
  max-width:100%
}

.max-w-lg{
  max-width:32rem
}

.max-w-md{
  max-width:28rem
}

.max-w-none{
  max-width:none
}

.max-w-xl{
  max-width:36rem
}

.max-w-xs{
  max-width:20rem
}

.flex-1{
  flex:1 1 0%
}

.flex-none{
  flex:none
}

.flex-shrink{
  flex-shrink:1
}

.flex-shrink-0{
  flex-shrink:0
}

.shrink-0{
  flex-shrink:0
}

.flex-grow{
  flex-grow:1
}

.table-fixed{
  table-layout:fixed
}

.border-collapse{
  border-collapse:collapse
}

.rotate-180{
  --tw-rotate:180deg;
  transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.scale-100{
  --tw-scale-x:1;
  --tw-scale-y:1;
  transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.scale-95{
  --tw-scale-x:.95;
  --tw-scale-y:.95;
  transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.transform{
  transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

@keyframes spin{
  to{
    transform:rotate(360deg)
  }
}

.animate-spin{
  animation:spin 1s linear infinite
}

.cursor-default{
  cursor:default
}

.cursor-help{
  cursor:help
}

.cursor-not-allowed{
  cursor:not-allowed
}

.cursor-pointer{
  cursor:pointer
}

.select-none{
  -webkit-user-select:none;
     -moz-user-select:none;
          user-select:none
}

.resize{
  resize:both
}

.list-inside{
  list-style-position:inside
}

.list-outside{
  list-style-position:outside
}

.list-disc{
  list-style-type:disc
}

.appearance-none{
  -webkit-appearance:none;
     -moz-appearance:none;
          appearance:none
}

.break-inside-avoid{
  -moz-column-break-inside:avoid;
       break-inside:avoid
}

.grid-cols-1{
  grid-template-columns:repeat(1, minmax(0, 1fr))
}

.grid-cols-12{
  grid-template-columns:repeat(12, minmax(0, 1fr))
}

.grid-cols-2{
  grid-template-columns:repeat(2, minmax(0, 1fr))
}

.grid-cols-3{
  grid-template-columns:repeat(3, minmax(0, 1fr))
}

.grid-cols-4{
  grid-template-columns:repeat(4, minmax(0, 1fr))
}

.grid-cols-6{
  grid-template-columns:repeat(6, minmax(0, 1fr))
}

.grid-cols-\[1fr_auto_1fr\]{
  grid-template-columns:1fr auto 1fr
}

.grid-cols-\[1fr_auto_auto\]{
  grid-template-columns:1fr auto auto
}

.grid-cols-\[minmax\(0\2c 1fr\)_5rem_7rem_8rem\]{
  grid-template-columns:minmax(0,1fr) 5rem 7rem 8rem
}

.flex-col{
  flex-direction:column
}

.flex-wrap{
  flex-wrap:wrap
}

.items-start{
  align-items:flex-start
}

.items-end{
  align-items:flex-end
}

.items-center{
  align-items:center
}

.items-baseline{
  align-items:baseline
}

.justify-end{
  justify-content:flex-end
}

.justify-center{
  justify-content:center
}

.justify-between{
  justify-content:space-between
}

.justify-items-stretch{
  justify-items:stretch
}

.gap-1{
  gap:0.25rem
}

.gap-1\.5{
  gap:0.375rem
}

.gap-2{
  gap:0.5rem
}

.gap-3{
  gap:0.75rem
}

.gap-4{
  gap:1rem
}

.gap-6{
  gap:1.5rem
}

.gap-x-3{
  -moz-column-gap:0.75rem;
       column-gap:0.75rem
}

.gap-x-4{
  -moz-column-gap:1rem;
       column-gap:1rem
}

.gap-x-6{
  -moz-column-gap:1.5rem;
       column-gap:1.5rem
}

.gap-y-2{
  row-gap:0.5rem
}

.gap-y-3{
  row-gap:0.75rem
}

.-space-x-px > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse:0;
  margin-right:calc(-1px * var(--tw-space-x-reverse));
  margin-left:calc(-1px * calc(1 - var(--tw-space-x-reverse)))
}

.-space-y-px > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse:0;
  margin-top:calc(-1px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom:calc(-1px * var(--tw-space-y-reverse))
}

.space-x-3 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse:0;
  margin-right:calc(0.75rem * var(--tw-space-x-reverse));
  margin-left:calc(0.75rem * calc(1 - var(--tw-space-x-reverse)))
}

.space-x-4 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse:0;
  margin-right:calc(1rem * var(--tw-space-x-reverse));
  margin-left:calc(1rem * calc(1 - var(--tw-space-x-reverse)))
}

.space-y-1 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse:0;
  margin-top:calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom:calc(0.25rem * var(--tw-space-y-reverse))
}

.space-y-2 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse:0;
  margin-top:calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom:calc(0.5rem * var(--tw-space-y-reverse))
}

.space-y-3 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse:0;
  margin-top:calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom:calc(0.75rem * var(--tw-space-y-reverse))
}

.space-y-4 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse:0;
  margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom:calc(1rem * var(--tw-space-y-reverse))
}

.space-y-6 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse:0;
  margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))
}

.divide-y > :not([hidden]) ~ :not([hidden]){
  --tw-divide-y-reverse:0;
  border-top-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width:calc(1px * var(--tw-divide-y-reverse))
}

.divide-gray-200 > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity:1;
  border-color:rgb(229 231 235 / var(--tw-divide-opacity, 1))
}

.divide-gray-300 > :not([hidden]) ~ :not([hidden]){
  --tw-divide-opacity:1;
  border-color:rgb(209 213 219 / var(--tw-divide-opacity, 1))
}

.self-center{
  align-self:center
}

.justify-self-end{
  justify-self:end
}

.justify-self-center{
  justify-self:center
}

.overflow-auto{
  overflow:auto
}

.overflow-hidden{
  overflow:hidden
}

.overflow-scroll{
  overflow:scroll
}

.overflow-x-auto{
  overflow-x:auto
}

.overflow-y-auto{
  overflow-y:auto
}

.truncate{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.text-ellipsis{
  text-overflow:ellipsis
}

.whitespace-normal{
  white-space:normal
}

.whitespace-nowrap{
  white-space:nowrap
}

.whitespace-pre-line{
  white-space:pre-line
}

.whitespace-pre-wrap{
  white-space:pre-wrap
}

.break-words{
  overflow-wrap:break-word
}

.break-all{
  word-break:break-all
}

.rounded{
  border-radius:0.25rem
}

.rounded-full{
  border-radius:9999px
}

.rounded-lg{
  border-radius:0.5rem
}

.rounded-md{
  border-radius:0.375rem
}

.rounded-none{
  border-radius:0px
}

.rounded-sm{
  border-radius:0.125rem
}

.rounded-xl{
  border-radius:0.75rem
}

.rounded-b-md{
  border-bottom-right-radius:0.375rem;
  border-bottom-left-radius:0.375rem
}

.rounded-l-lg{
  border-top-left-radius:0.5rem;
  border-bottom-left-radius:0.5rem
}

.rounded-l-md{
  border-top-left-radius:0.375rem;
  border-bottom-left-radius:0.375rem
}

.rounded-r-md{
  border-top-right-radius:0.375rem;
  border-bottom-right-radius:0.375rem
}

.rounded-r-none{
  border-top-right-radius:0px;
  border-bottom-right-radius:0px
}

.rounded-t-md{
  border-top-left-radius:0.375rem;
  border-top-right-radius:0.375rem
}

.border{
  border-width:1px
}

.border-0{
  border-width:0px
}

.border-2{
  border-width:2px
}

.border-b{
  border-bottom-width:1px
}

.border-b-2{
  border-bottom-width:2px
}

.border-l-0{
  border-left-width:0px
}

.border-l-4{
  border-left-width:4px
}

.border-r{
  border-right-width:1px
}

.border-r-0{
  border-right-width:0px
}

.border-t{
  border-top-width:1px
}

.border-amber-200{
  --tw-border-opacity:1;
  border-color:rgb(253 230 138 / var(--tw-border-opacity, 1))
}

.border-blue-200{
  --tw-border-opacity:1;
  border-color:rgb(191 219 254 / var(--tw-border-opacity, 1))
}

.border-blue-400{
  --tw-border-opacity:1;
  border-color:rgb(96 165 250 / var(--tw-border-opacity, 1))
}

.border-blue-500{
  --tw-border-opacity:1;
  border-color:rgb(59 130 246 / var(--tw-border-opacity, 1))
}

.border-gray-100{
  --tw-border-opacity:1;
  border-color:rgb(243 244 246 / var(--tw-border-opacity, 1))
}

.border-gray-200{
  --tw-border-opacity:1;
  border-color:rgb(229 231 235 / var(--tw-border-opacity, 1))
}

.border-gray-300{
  --tw-border-opacity:1;
  border-color:rgb(209 213 219 / var(--tw-border-opacity, 1))
}

.border-gray-400{
  --tw-border-opacity:1;
  border-color:rgb(156 163 175 / var(--tw-border-opacity, 1))
}

.border-gray-500{
  --tw-border-opacity:1;
  border-color:rgb(107 114 128 / var(--tw-border-opacity, 1))
}

.border-green-200{
  --tw-border-opacity:1;
  border-color:rgb(187 247 208 / var(--tw-border-opacity, 1))
}

.border-green-900{
  --tw-border-opacity:1;
  border-color:rgb(20 83 45 / var(--tw-border-opacity, 1))
}

.border-indigo-300{
  --tw-border-opacity:1;
  border-color:rgb(165 180 252 / var(--tw-border-opacity, 1))
}

.border-indigo-500{
  --tw-border-opacity:1;
  border-color:rgb(99 102 241 / var(--tw-border-opacity, 1))
}

.border-orange-200{
  --tw-border-opacity:1;
  border-color:rgb(254 215 170 / var(--tw-border-opacity, 1))
}

.border-red-200{
  --tw-border-opacity:1;
  border-color:rgb(254 202 202 / var(--tw-border-opacity, 1))
}

.border-red-300{
  --tw-border-opacity:1;
  border-color:rgb(252 165 165 / var(--tw-border-opacity, 1))
}

.border-red-900{
  --tw-border-opacity:1;
  border-color:rgb(127 29 29 / var(--tw-border-opacity, 1))
}

.border-transparent{
  border-color:transparent
}

.border-yellow-200{
  --tw-border-opacity:1;
  border-color:rgb(254 240 138 / var(--tw-border-opacity, 1))
}

.border-yellow-300{
  --tw-border-opacity:1;
  border-color:rgb(253 224 71 / var(--tw-border-opacity, 1))
}

.border-yellow-400{
  --tw-border-opacity:1;
  border-color:rgb(250 204 21 / var(--tw-border-opacity, 1))
}

.border-yellow-600{
  --tw-border-opacity:1;
  border-color:rgb(202 138 4 / var(--tw-border-opacity, 1))
}

.border-yellow-900{
  --tw-border-opacity:1;
  border-color:rgb(113 63 18 / var(--tw-border-opacity, 1))
}

.border-t-black\/30{
  border-top-color:rgb(0 0 0 / 0.3)
}

.bg-amber-100{
  --tw-bg-opacity:1;
  background-color:rgb(254 243 199 / var(--tw-bg-opacity, 1))
}

.bg-amber-50{
  --tw-bg-opacity:1;
  background-color:rgb(255 251 235 / var(--tw-bg-opacity, 1))
}

.bg-amber-600{
  --tw-bg-opacity:1;
  background-color:rgb(217 119 6 / var(--tw-bg-opacity, 1))
}

.bg-black{
  --tw-bg-opacity:1;
  background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1))
}

.bg-black\/20{
  background-color:rgb(0 0 0 / 0.2)
}

.bg-blue-100{
  --tw-bg-opacity:1;
  background-color:rgb(219 234 254 / var(--tw-bg-opacity, 1))
}

.bg-blue-300{
  --tw-bg-opacity:1;
  background-color:rgb(147 197 253 / var(--tw-bg-opacity, 1))
}

.bg-blue-50{
  --tw-bg-opacity:1;
  background-color:rgb(239 246 255 / var(--tw-bg-opacity, 1))
}

.bg-blue-600{
  --tw-bg-opacity:1;
  background-color:rgb(37 99 235 / var(--tw-bg-opacity, 1))
}

.bg-cyan-600{
  --tw-bg-opacity:1;
  background-color:rgb(8 145 178 / var(--tw-bg-opacity, 1))
}

.bg-gray-100{
  --tw-bg-opacity:1;
  background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))
}

.bg-gray-200{
  --tw-bg-opacity:1;
  background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1))
}

.bg-gray-300{
  --tw-bg-opacity:1;
  background-color:rgb(209 213 219 / var(--tw-bg-opacity, 1))
}

.bg-gray-400{
  --tw-bg-opacity:1;
  background-color:rgb(156 163 175 / var(--tw-bg-opacity, 1))
}

.bg-gray-50{
  --tw-bg-opacity:1;
  background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1))
}

.bg-gray-500{
  --tw-bg-opacity:1;
  background-color:rgb(107 114 128 / var(--tw-bg-opacity, 1))
}

.bg-gray-600{
  --tw-bg-opacity:1;
  background-color:rgb(75 85 99 / var(--tw-bg-opacity, 1))
}

.bg-gray-800{
  --tw-bg-opacity:1;
  background-color:rgb(31 41 55 / var(--tw-bg-opacity, 1))
}

.bg-gray-900{
  --tw-bg-opacity:1;
  background-color:rgb(17 24 39 / var(--tw-bg-opacity, 1))
}

.bg-green-100{
  --tw-bg-opacity:1;
  background-color:rgb(220 252 231 / var(--tw-bg-opacity, 1))
}

.bg-green-300{
  --tw-bg-opacity:1;
  background-color:rgb(134 239 172 / var(--tw-bg-opacity, 1))
}

.bg-green-50{
  --tw-bg-opacity:1;
  background-color:rgb(240 253 244 / var(--tw-bg-opacity, 1))
}

.bg-green-800{
  --tw-bg-opacity:1;
  background-color:rgb(22 101 52 / var(--tw-bg-opacity, 1))
}

.bg-indigo-100{
  --tw-bg-opacity:1;
  background-color:rgb(224 231 255 / var(--tw-bg-opacity, 1))
}

.bg-indigo-600{
  --tw-bg-opacity:1;
  background-color:rgb(79 70 229 / var(--tw-bg-opacity, 1))
}

.bg-orange-100{
  --tw-bg-opacity:1;
  background-color:rgb(255 237 213 / var(--tw-bg-opacity, 1))
}

.bg-orange-50{
  --tw-bg-opacity:1;
  background-color:rgb(255 247 237 / var(--tw-bg-opacity, 1))
}

.bg-purple-100{
  --tw-bg-opacity:1;
  background-color:rgb(243 232 255 / var(--tw-bg-opacity, 1))
}

.bg-purple-900{
  --tw-bg-opacity:1;
  background-color:rgb(88 28 135 / var(--tw-bg-opacity, 1))
}

.bg-red-100{
  --tw-bg-opacity:1;
  background-color:rgb(254 226 226 / var(--tw-bg-opacity, 1))
}

.bg-red-300{
  --tw-bg-opacity:1;
  background-color:rgb(252 165 165 / var(--tw-bg-opacity, 1))
}

.bg-red-50{
  --tw-bg-opacity:1;
  background-color:rgb(254 242 242 / var(--tw-bg-opacity, 1))
}

.bg-red-600{
  --tw-bg-opacity:1;
  background-color:rgb(220 38 38 / var(--tw-bg-opacity, 1))
}

.bg-red-800{
  --tw-bg-opacity:1;
  background-color:rgb(153 27 27 / var(--tw-bg-opacity, 1))
}

.bg-sky-100{
  --tw-bg-opacity:1;
  background-color:rgb(224 242 254 / var(--tw-bg-opacity, 1))
}

.bg-teal-100{
  --tw-bg-opacity:1;
  background-color:rgb(204 251 241 / var(--tw-bg-opacity, 1))
}

.bg-white{
  --tw-bg-opacity:1;
  background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))
}

.bg-yellow-100{
  --tw-bg-opacity:1;
  background-color:rgb(254 249 195 / var(--tw-bg-opacity, 1))
}

.bg-yellow-200{
  --tw-bg-opacity:1;
  background-color:rgb(254 240 138 / var(--tw-bg-opacity, 1))
}

.bg-yellow-50{
  --tw-bg-opacity:1;
  background-color:rgb(254 252 232 / var(--tw-bg-opacity, 1))
}

.bg-yellow-500{
  --tw-bg-opacity:1;
  background-color:rgb(234 179 8 / var(--tw-bg-opacity, 1))
}

.bg-yellow-600{
  --tw-bg-opacity:1;
  background-color:rgb(202 138 4 / var(--tw-bg-opacity, 1))
}

.bg-opacity-75{
  --tw-bg-opacity:0.75
}

.bg-none{
  background-image:none
}

.object-cover{
  -o-object-fit:cover;
     object-fit:cover
}

.object-right-top{
  -o-object-position:right top;
     object-position:right top
}

.p-0{
  padding:0px
}

.p-1{
  padding:0.25rem
}

.p-1\.5{
  padding:0.375rem
}

.p-2{
  padding:0.5rem
}

.p-3{
  padding:0.75rem
}

.p-4{
  padding:1rem
}

.p-6{
  padding:1.5rem
}

.p-8{
  padding:2rem
}

.px-1{
  padding-left:0.25rem;
  padding-right:0.25rem
}

.px-1\.5{
  padding-left:0.375rem;
  padding-right:0.375rem
}

.px-10{
  padding-left:2.5rem;
  padding-right:2.5rem
}

.px-2{
  padding-left:0.5rem;
  padding-right:0.5rem
}

.px-2\.5{
  padding-left:0.625rem;
  padding-right:0.625rem
}

.px-20{
  padding-left:5rem;
  padding-right:5rem
}

.px-3{
  padding-left:0.75rem;
  padding-right:0.75rem
}

.px-4{
  padding-left:1rem;
  padding-right:1rem
}

.px-5{
  padding-left:1.25rem;
  padding-right:1.25rem
}

.px-6{
  padding-left:1.5rem;
  padding-right:1.5rem
}

.py-0{
  padding-top:0px;
  padding-bottom:0px
}

.py-0\.5{
  padding-top:0.125rem;
  padding-bottom:0.125rem
}

.py-1{
  padding-top:0.25rem;
  padding-bottom:0.25rem
}

.py-1\.5{
  padding-top:0.375rem;
  padding-bottom:0.375rem
}

.py-12{
  padding-top:3rem;
  padding-bottom:3rem
}

.py-2{
  padding-top:0.5rem;
  padding-bottom:0.5rem
}

.py-3{
  padding-top:0.75rem;
  padding-bottom:0.75rem
}

.py-3\.5{
  padding-top:0.875rem;
  padding-bottom:0.875rem
}

.py-4{
  padding-top:1rem;
  padding-bottom:1rem
}

.py-5{
  padding-top:1.25rem;
  padding-bottom:1.25rem
}

.py-6{
  padding-top:1.5rem;
  padding-bottom:1.5rem
}

.py-8{
  padding-top:2rem;
  padding-bottom:2rem
}

.py-px{
  padding-top:1px;
  padding-bottom:1px
}

.pb-1{
  padding-bottom:0.25rem
}

.pb-12{
  padding-bottom:3rem
}

.pb-2{
  padding-bottom:0.5rem
}

.pb-3{
  padding-bottom:0.75rem
}

.pb-4{
  padding-bottom:1rem
}

.pl-1{
  padding-left:0.25rem
}

.pl-10{
  padding-left:2.5rem
}

.pl-2{
  padding-left:0.5rem
}

.pl-3{
  padding-left:0.75rem
}

.pl-4{
  padding-left:1rem
}

.pl-5{
  padding-left:1.25rem
}

.pr-0{
  padding-right:0px
}

.pr-1{
  padding-right:0.25rem
}

.pr-10{
  padding-right:2.5rem
}

.pr-12{
  padding-right:3rem
}

.pr-2{
  padding-right:0.5rem
}

.pr-3{
  padding-right:0.75rem
}

.pr-4{
  padding-right:1rem
}

.pr-9{
  padding-right:2.25rem
}

.pt-1{
  padding-top:0.25rem
}

.pt-2{
  padding-top:0.5rem
}

.pt-3{
  padding-top:0.75rem
}

.pt-4{
  padding-top:1rem
}

.pt-5{
  padding-top:1.25rem
}

.pt-6{
  padding-top:1.5rem
}

.text-left{
  text-align:left
}

.text-center{
  text-align:center
}

.text-right{
  text-align:right
}

.text-justify{
  text-align:justify
}

.align-middle{
  vertical-align:middle
}

.font-mono{
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
}

.text-2xl{
  font-size:1.5rem;
  line-height:2rem
}

.text-3xl{
  font-size:1.875rem;
  line-height:2.25rem
}

.text-8xl{
  font-size:6rem;
  line-height:1
}

.text-\[10px\]{
  font-size:10px
}

.text-base{
  font-size:1rem;
  line-height:1.5rem
}

.text-lg{
  font-size:1.125rem;
  line-height:1.75rem
}

.text-sm{
  font-size:0.875rem;
  line-height:1.25rem
}

.text-xl{
  font-size:1.25rem;
  line-height:1.75rem
}

.text-xs{
  font-size:0.75rem;
  line-height:1rem
}

.font-bold{
  font-weight:700
}

.font-extrabold{
  font-weight:800
}

.font-light{
  font-weight:300
}

.font-medium{
  font-weight:500
}

.font-normal{
  font-weight:400
}

.font-semibold{
  font-weight:600
}

.uppercase{
  text-transform:uppercase
}

.capitalize{
  text-transform:capitalize
}

.normal-case{
  text-transform:none
}

.italic{
  font-style:italic
}

.tabular-nums{
  --tw-numeric-spacing:tabular-nums;
  font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)
}

.leading-4{
  line-height:1rem
}

.leading-5{
  line-height:1.25rem
}

.leading-none{
  line-height:1
}

.leading-tight{
  line-height:1.25
}

.tracking-wide{
  letter-spacing:0.025em
}

.text-amber-700{
  --tw-text-opacity:1;
  color:rgb(180 83 9 / var(--tw-text-opacity, 1))
}

.text-amber-800{
  --tw-text-opacity:1;
  color:rgb(146 64 14 / var(--tw-text-opacity, 1))
}

.text-amber-900{
  --tw-text-opacity:1;
  color:rgb(120 53 15 / var(--tw-text-opacity, 1))
}

.text-black{
  --tw-text-opacity:1;
  color:rgb(0 0 0 / var(--tw-text-opacity, 1))
}

.text-blue-400{
  --tw-text-opacity:1;
  color:rgb(96 165 250 / var(--tw-text-opacity, 1))
}

.text-blue-500{
  --tw-text-opacity:1;
  color:rgb(59 130 246 / var(--tw-text-opacity, 1))
}

.text-blue-600{
  --tw-text-opacity:1;
  color:rgb(37 99 235 / var(--tw-text-opacity, 1))
}

.text-blue-700{
  --tw-text-opacity:1;
  color:rgb(29 78 216 / var(--tw-text-opacity, 1))
}

.text-blue-800{
  --tw-text-opacity:1;
  color:rgb(30 64 175 / var(--tw-text-opacity, 1))
}

.text-blue-900{
  --tw-text-opacity:1;
  color:rgb(30 58 138 / var(--tw-text-opacity, 1))
}

.text-gray-100{
  --tw-text-opacity:1;
  color:rgb(243 244 246 / var(--tw-text-opacity, 1))
}

.text-gray-200{
  --tw-text-opacity:1;
  color:rgb(229 231 235 / var(--tw-text-opacity, 1))
}

.text-gray-300{
  --tw-text-opacity:1;
  color:rgb(209 213 219 / var(--tw-text-opacity, 1))
}

.text-gray-400{
  --tw-text-opacity:1;
  color:rgb(156 163 175 / var(--tw-text-opacity, 1))
}

.text-gray-500{
  --tw-text-opacity:1;
  color:rgb(107 114 128 / var(--tw-text-opacity, 1))
}

.text-gray-600{
  --tw-text-opacity:1;
  color:rgb(75 85 99 / var(--tw-text-opacity, 1))
}

.text-gray-700{
  --tw-text-opacity:1;
  color:rgb(55 65 81 / var(--tw-text-opacity, 1))
}

.text-gray-800{
  --tw-text-opacity:1;
  color:rgb(31 41 55 / var(--tw-text-opacity, 1))
}

.text-gray-900{
  --tw-text-opacity:1;
  color:rgb(17 24 39 / var(--tw-text-opacity, 1))
}

.text-green-400{
  --tw-text-opacity:1;
  color:rgb(74 222 128 / var(--tw-text-opacity, 1))
}

.text-green-500{
  --tw-text-opacity:1;
  color:rgb(34 197 94 / var(--tw-text-opacity, 1))
}

.text-green-600{
  --tw-text-opacity:1;
  color:rgb(22 163 74 / var(--tw-text-opacity, 1))
}

.text-green-700{
  --tw-text-opacity:1;
  color:rgb(21 128 61 / var(--tw-text-opacity, 1))
}

.text-green-800{
  --tw-text-opacity:1;
  color:rgb(22 101 52 / var(--tw-text-opacity, 1))
}

.text-green-900{
  --tw-text-opacity:1;
  color:rgb(20 83 45 / var(--tw-text-opacity, 1))
}

.text-indigo-300{
  --tw-text-opacity:1;
  color:rgb(165 180 252 / var(--tw-text-opacity, 1))
}

.text-indigo-500{
  --tw-text-opacity:1;
  color:rgb(99 102 241 / var(--tw-text-opacity, 1))
}

.text-indigo-600{
  --tw-text-opacity:1;
  color:rgb(79 70 229 / var(--tw-text-opacity, 1))
}

.text-indigo-700{
  --tw-text-opacity:1;
  color:rgb(67 56 202 / var(--tw-text-opacity, 1))
}

.text-indigo-800{
  --tw-text-opacity:1;
  color:rgb(55 48 163 / var(--tw-text-opacity, 1))
}

.text-orange-500{
  --tw-text-opacity:1;
  color:rgb(249 115 22 / var(--tw-text-opacity, 1))
}

.text-orange-600{
  --tw-text-opacity:1;
  color:rgb(234 88 12 / var(--tw-text-opacity, 1))
}

.text-orange-800{
  --tw-text-opacity:1;
  color:rgb(154 52 18 / var(--tw-text-opacity, 1))
}

.text-purple-800{
  --tw-text-opacity:1;
  color:rgb(107 33 168 / var(--tw-text-opacity, 1))
}

.text-red-300{
  --tw-text-opacity:1;
  color:rgb(252 165 165 / var(--tw-text-opacity, 1))
}

.text-red-400{
  --tw-text-opacity:1;
  color:rgb(248 113 113 / var(--tw-text-opacity, 1))
}

.text-red-500{
  --tw-text-opacity:1;
  color:rgb(239 68 68 / var(--tw-text-opacity, 1))
}

.text-red-600{
  --tw-text-opacity:1;
  color:rgb(220 38 38 / var(--tw-text-opacity, 1))
}

.text-red-700{
  --tw-text-opacity:1;
  color:rgb(185 28 28 / var(--tw-text-opacity, 1))
}

.text-red-800{
  --tw-text-opacity:1;
  color:rgb(153 27 27 / var(--tw-text-opacity, 1))
}

.text-red-900{
  --tw-text-opacity:1;
  color:rgb(127 29 29 / var(--tw-text-opacity, 1))
}

.text-sky-800{
  --tw-text-opacity:1;
  color:rgb(7 89 133 / var(--tw-text-opacity, 1))
}

.text-teal-800{
  --tw-text-opacity:1;
  color:rgb(17 94 89 / var(--tw-text-opacity, 1))
}

.text-white{
  --tw-text-opacity:1;
  color:rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.text-yellow-400{
  --tw-text-opacity:1;
  color:rgb(250 204 21 / var(--tw-text-opacity, 1))
}

.text-yellow-500{
  --tw-text-opacity:1;
  color:rgb(234 179 8 / var(--tw-text-opacity, 1))
}

.text-yellow-600{
  --tw-text-opacity:1;
  color:rgb(202 138 4 / var(--tw-text-opacity, 1))
}

.text-yellow-700{
  --tw-text-opacity:1;
  color:rgb(161 98 7 / var(--tw-text-opacity, 1))
}

.text-yellow-800{
  --tw-text-opacity:1;
  color:rgb(133 77 14 / var(--tw-text-opacity, 1))
}

.text-yellow-900{
  --tw-text-opacity:1;
  color:rgb(113 63 18 / var(--tw-text-opacity, 1))
}

.underline{
  text-decoration-line:underline
}

.underline-offset-4{
  text-underline-offset:4px
}

.placeholder-gray-400::-moz-placeholder{
  --tw-placeholder-opacity:1;
  color:rgb(156 163 175 / var(--tw-placeholder-opacity, 1))
}

.placeholder-gray-400::placeholder{
  --tw-placeholder-opacity:1;
  color:rgb(156 163 175 / var(--tw-placeholder-opacity, 1))
}

.placeholder-gray-500::-moz-placeholder{
  --tw-placeholder-opacity:1;
  color:rgb(107 114 128 / var(--tw-placeholder-opacity, 1))
}

.placeholder-gray-500::placeholder{
  --tw-placeholder-opacity:1;
  color:rgb(107 114 128 / var(--tw-placeholder-opacity, 1))
}

.opacity-0{
  opacity:0
}

.opacity-100{
  opacity:1
}

.opacity-25{
  opacity:0.25
}

.opacity-50{
  opacity:0.5
}

.opacity-60{
  opacity:0.6
}

.opacity-75{
  opacity:0.75
}

.shadow{
  --tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-lg{
  --tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-md{
  --tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-sm{
  --tw-shadow:0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);
  box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-xl{
  --tw-shadow:0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.outline{
  outline-style:solid
}

.ring-1{
  --tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}

.ring-2{
  --tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}

.ring-inset{
  --tw-ring-inset:inset
}

.ring-black{
  --tw-ring-opacity:1;
  --tw-ring-color:rgb(0 0 0 / var(--tw-ring-opacity, 1))
}

.ring-indigo-500{
  --tw-ring-opacity:1;
  --tw-ring-color:rgb(99 102 241 / var(--tw-ring-opacity, 1))
}

.ring-red-500{
  --tw-ring-opacity:1;
  --tw-ring-color:rgb(239 68 68 / var(--tw-ring-opacity, 1))
}

.ring-opacity-5{
  --tw-ring-opacity:0.05
}

.blur{
  --tw-blur:blur(8px);
  filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.filter{
  filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.transition{
  transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:150ms
}

.transition-colors{
  transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:150ms
}

.duration-100{
  transition-duration:100ms
}

.duration-150{
  transition-duration:150ms
}

.duration-75{
  transition-duration:75ms
}

.ease-in{
  transition-timing-function:cubic-bezier(0.4, 0, 1, 1)
}

.ease-in-out{
  transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)
}

.ease-out{
  transition-timing-function:cubic-bezier(0, 0, 0.2, 1)
}

/* Rails wraps missing view translations in this class. Keep them loud in development. */

.translation_missing {
  background: indianred;
  color: white;
}

/* Cost fields visual indicators - show which fields are user-set vs calculated */

.cost-field-user-edited {
  border-left: 3px solid #10B981 !important;
  /* green - user explicitly set this value */
}

.cost-field-calculated {
  border-left: 3px solid #9CA3AF !important;
  /* gray - auto-calculated value */
  background-color: #F9FAFB !important;
}

.pcmd-link{
  cursor:pointer;
  --tw-text-opacity:1;
  color:rgb(37 99 235 / var(--tw-text-opacity, 1))
}

.pcmd-link:hover{
  --tw-text-opacity:1;
  color:rgb(30 64 175 / var(--tw-text-opacity, 1));
  text-decoration-line:underline
}

.pcmd-button-primary{
  display:inline-flex;
  cursor:pointer;
  align-items:center;
  border-radius:0.375rem;
  --tw-bg-opacity:1;
  background-color:rgb(37 99 235 / var(--tw-bg-opacity, 1));
  padding-left:0.75rem;
  padding-right:0.75rem;
  padding-top:0.375rem;
  padding-bottom:0.375rem;
  font-weight:500;
  --tw-text-opacity:1;
  color:rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.pcmd-button-primary:hover{
  --tw-bg-opacity:1;
  background-color:rgb(29 78 216 / var(--tw-bg-opacity, 1))
}

.pcmd-button-primary:focus{
  outline:2px solid transparent;
  outline-offset:2px;
  --tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity:1;
  --tw-ring-color:rgb(59 130 246 / var(--tw-ring-opacity, 1));
  --tw-ring-offset-width:2px
}

.pcmd-button-danger{
  display:inline-flex;
  cursor:pointer;
  align-items:center;
  border-radius:0.375rem;
  --tw-bg-opacity:1;
  background-color:rgb(220 38 38 / var(--tw-bg-opacity, 1));
  padding-left:0.75rem;
  padding-right:0.75rem;
  padding-top:0.375rem;
  padding-bottom:0.375rem;
  font-weight:500;
  --tw-text-opacity:1;
  color:rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.pcmd-button-danger:hover{
  --tw-bg-opacity:1;
  background-color:rgb(185 28 28 / var(--tw-bg-opacity, 1))
}

.pcmd-button-danger:focus{
  outline:2px solid transparent;
  outline-offset:2px;
  --tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity:1;
  --tw-ring-color:rgb(239 68 68 / var(--tw-ring-opacity, 1));
  --tw-ring-offset-width:2px
}

.export-button{
  padding: 10px;
  font-weight: 700;
  border-radius: 0.25rem;
  cursor: pointer;
  background: var(--bariol-green-color) !important;
  color: rgba(255, 255, 255, var(--tw-text-opacity));
  --tw-text-opacity: 1;
}

/* Integration action buttons (blue) - used in special_actions, integrations show, etc. */

.integration-button{
  display:inline-flex;
  cursor:pointer;
  align-items:center;
  border-radius:0.375rem;
  --tw-bg-opacity:1;
  background-color:rgb(37 99 235 / var(--tw-bg-opacity, 1));
  padding-left:1rem;
  padding-right:1rem;
  padding-top:0.5rem;
  padding-bottom:0.5rem;
  font-size:0.875rem;
  line-height:1.25rem;
  font-weight:500;
  --tw-text-opacity:1;
  color:rgb(255 255 255 / var(--tw-text-opacity, 1))
}

#second-level-nav .integration-button{
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
}

.integration-button:hover{
  --tw-bg-opacity:1;
  background-color:rgb(29 78 216 / var(--tw-bg-opacity, 1))
}

.integration-button:focus{
  outline:2px solid transparent;
  outline-offset:2px;
  --tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity:1;
  --tw-ring-color:rgb(59 130 246 / var(--tw-ring-opacity, 1));
  --tw-ring-offset-width:2px
}

.disabled-action-button{
  cursor:not-allowed;
  border-radius:0.25rem;
  --tw-bg-opacity:1;
  background-color:rgb(156 163 175 / var(--tw-bg-opacity, 1));
  padding-top:0.5rem;
  padding-bottom:0.5rem;
  padding-left:1rem;
  padding-right:1rem;
  font-weight:700;
  --tw-text-opacity:1;
  color:rgb(255 255 255 / var(--tw-text-opacity, 1));
  opacity:0.6
}

#second-level-nav .disabled-action-button{
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
}

/* @import "components/nested-fields.css";
@import "components/buttons.css";
@import "components/page_layout.css"; */

/*
 *= require_tree .
 *= require_self
*/

/* Timeline (vis-timeline) overrides */

.timeline-toolbar {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}

.timeline-container {
  border: 1px solid #e5e7eb;
  border-radius: 0.375rem;
  overflow: hidden;
}

/* Fullscreen: white background, expand timeline to fill remaining space */

:fullscreen [data-controller="timeline"],
:-webkit-full-screen [data-controller="timeline"] {
  background-color: white;
  padding: 0.75rem;
}

/* Today line — green with a subtle label */

.vis-current-time {
  background-color: #22c55e !important;
  width: 2px;
}

.vis-current-time::after {
  content: "Today";
  position: absolute;
  top: 2px;
  left: 4px;
  font-size: 0.65rem;
  font-weight: 600;
  color: #16a34a;
  white-space: nowrap;
  pointer-events: none;
}

.timeline-group--part .timeline-label--part {
  font-weight: 600;
  font-size: 0.85rem;
}

.timeline-group--work-item {
  padding-left: 1.25rem;
}

.timeline-group--work-item .timeline-label--work-item {
  font-weight: 600;
  font-size: 0.85rem;
}

/* Light green background on work item label cells, neutral right border */

.vis-label.timeline-group--work-item {
  background-color: rgba(71, 215, 172, 0.12);
  border-right-color: #e5e7eb;
}

.vis-item.timeline-bar--part {
  background-color: var(--cloaked-sky-color);
  border-color: var(--cloaked-sky-color);
  color: #fff;
}

/* Work item bars — green, no red outline in any state */

.vis-item.timeline-bar--work-item,
.vis-item.timeline-bar--work-item.vis-selected,
.vis-item.timeline-bar--work-item:hover {
  background-color: var(--bariol-green-color);
  border-color: var(--bariol-green-color);
  color: #fff;
}

.timeline-bar__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 80%;
  display: inline-block;
  vertical-align: middle;
}

.timeline-bar__kpi {
  font-size: 0.75rem;
  opacity: 0.85;
  vertical-align: middle;
}

/* Calendar (FullCalendar) overrides */

.calendar-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.calendar-title {
  margin-left: 0.5rem;
  font-weight: 600;
  font-size: 1.1rem;
}

/* View switcher (Month / Year ...) pushed to the right of the toolbar */

.calendar-view-switch {
  display: flex;
  gap: 0.25rem;
  margin-left: auto;
}

.calendar-view-switch .is-active {
  filter: brightness(0.85);
  font-weight: 600;
}

.calendar-container {
  border: 1px solid #e5e7eb;
  border-radius: 0.375rem;
  padding: 0.5rem;
}

/* Shutdown periods — multi-day bars, a medium amber (about halfway between
   the original saturated orange and the too-pale first attempt) to read as
   "blocked / time off" without being visually heavy.
   FullCalendar themes events entirely through CSS custom properties
   (--fc-event-bg-color/border-color/text-color), read by its own injected
   stylesheet on nested elements like .fc-event-main — not by the .fc-event
   wrapper itself. Setting background-color/color directly on our class
   doesn't reliably win there (it's a different element than the one we can
   target), so we set the variables instead, which is the API FullCalendar
   actually designed for theming and which all of its internal rules read. */

/* Project phase washes — translucent background fills. One hue per era; the
   nested phases (contract⊃program⊃construction, maintenance⊃DLP) stack their
   alpha into a gradient. FullCalendar sets opacity:0.3 on .fc-bg-event by
   default, which would flatten our stacking — force it to 1 so the rgba alpha
   we set is what actually blends. Identical in month and year views. */

.fc .fc-bg-event.calendar-period {
  opacity: 1;
}

.fc .fc-bg-event.calendar-period--build {
  background-color: rgba(35, 117, 142, 0.14);
  /* brand blue (--cloaked-sky-color) */
}

.fc .fc-bg-event.calendar-period--defects {
  background-color: rgba(22, 163, 74, 0.16);
  /* green — post-completion / warranty */
}

.calendar-event--shutdown {
  --fc-event-bg-color: #f9bc5a;
  --fc-event-border-color: #e6983f;
  --fc-event-text-color: #7c4a12;
}

/* Key dates — reuse the app's brand blue, same as Program's part bars,
   so they read as "on track / informational" */

.calendar-event--key-date {
  background-color: var(--cloaked-sky-color);
  border-color: var(--cloaked-sky-color);
  color: #fff;
}

/* Post-PC derived markers (DLP end, maintenance end, final completion) — green
   to match the defects-era wash, so build-era markers read blue and the
   post-completion milestones read green. */

.calendar-event--post-pc {
  background-color: #16a34a;
  border-color: #15803d;
  color: #fff;
}

/* ProjectEvent records — distinct accent so they're visually separable
   from shutdowns and key dates */

.calendar-event--project-event {
  background-color: #7c3aed;
  border-color: #6d28d9;
  color: #fff;
}

/* Personal reminders — dashed border modifier layered on top of the
   project-event color, so a viewer's own entries stand out */

.calendar-event--personal {
  border-style: dashed;
  border-width: 2px;
}

/* Timeline header bar — static overview strip above the Calendar focus view,
   spanning award_date..contract_finish with key-date and today markers */

.timeline-header {
  margin-bottom: 1rem;
}

.timeline-header__unavailable {
  font-size: 0.875rem;
  color: #6b7280;
  margin-bottom: 1rem;
}

.timeline-header__bar {
  position: relative;
  height: 2.5rem;
  background-color: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 0.375rem;
}

.timeline-header__range-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.65rem;
  font-weight: 600;
  color: #374151;
  margin-top: 0.25rem;
}

/* Month-shade — tracks the FullCalendar grid's currently visible month */

.timeline-header__month-shade {
  position: absolute;
  top: 0;
  bottom: 0;
  background-color: rgba(35, 117, 142, 0.15);
  pointer-events: none;
}

/* Markers — vertical pin + label. Default brand blue reads as
   "program-level / informational", same as .calendar-event--key-date */

.timeline-header__marker {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: var(--cloaked-sky-color);
}

.timeline-header__marker-label {
  position: absolute;
  top: -1.1rem;
  left: 0;
  font-size: 0.65rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--cloaked-sky-color);
}

/* Construction markers — green, to visually separate from program-level dates */

.timeline-header__marker--construction-start,
.timeline-header__marker--construction-finish {
  background-color: var(--bariol-green-color);
}

.timeline-header__marker--construction-start .timeline-header__marker-label,
.timeline-header__marker--construction-finish .timeline-header__marker-label {
  color: var(--bariol-green-color);
}

/* Today marker — same hue as FullCalendar's own today-cell shading
   (--fc-today-bg-color default: rgba(255, 220, 40, .15)), just brighter
   and at full opacity so it reads as a distinct line rather than a wash */

.timeline-header__today {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: #ffe066;
  z-index: 2;
}

.timeline-header__today-label {
  position: absolute;
  bottom: -1.1rem;
  left: 4px;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--alert-amber-color);
  white-space: nowrap;
}

/* A modal is its own reading surface: `white-space` is inherited, so one rendered inside a
   no-wrap container (the work list strip's action buttons) would otherwise run its text off the
   edge of the dialog. Elements inside that set their own nowrap still win. */

[aria-modal="true"] {
  white-space: normal;
  overflow-wrap: break-word;
}

.last\:mb-0:last-child{
  margin-bottom:0px
}

.last\:border-b-0:last-child{
  border-bottom-width:0px
}

.focus-within\:ring-2:focus-within{
  --tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}

.focus-within\:ring-indigo-500:focus-within{
  --tw-ring-opacity:1;
  --tw-ring-color:rgb(99 102 241 / var(--tw-ring-opacity, 1))
}

.focus-within\:ring-offset-2:focus-within{
  --tw-ring-offset-width:2px
}

.hover\:border-gray-300:hover{
  --tw-border-opacity:1;
  border-color:rgb(209 213 219 / var(--tw-border-opacity, 1))
}

.hover\:border-gray-400:hover{
  --tw-border-opacity:1;
  border-color:rgb(156 163 175 / var(--tw-border-opacity, 1))
}

.hover\:bg-black\/20:hover{
  background-color:rgb(0 0 0 / 0.2)
}

.hover\:bg-blue-100:hover{
  --tw-bg-opacity:1;
  background-color:rgb(219 234 254 / var(--tw-bg-opacity, 1))
}

.hover\:bg-blue-700:hover{
  --tw-bg-opacity:1;
  background-color:rgb(29 78 216 / var(--tw-bg-opacity, 1))
}

.hover\:bg-gray-100:hover{
  --tw-bg-opacity:1;
  background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))
}

.hover\:bg-gray-200:hover{
  --tw-bg-opacity:1;
  background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1))
}

.hover\:bg-gray-50:hover{
  --tw-bg-opacity:1;
  background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1))
}

.hover\:bg-gray-700:hover{
  --tw-bg-opacity:1;
  background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1))
}

.hover\:bg-indigo-400:hover{
  --tw-bg-opacity:1;
  background-color:rgb(129 140 248 / var(--tw-bg-opacity, 1))
}

.hover\:bg-indigo-50:hover{
  --tw-bg-opacity:1;
  background-color:rgb(238 242 255 / var(--tw-bg-opacity, 1))
}

.hover\:bg-indigo-700:hover{
  --tw-bg-opacity:1;
  background-color:rgb(67 56 202 / var(--tw-bg-opacity, 1))
}

.hover\:bg-red-100:hover{
  --tw-bg-opacity:1;
  background-color:rgb(254 226 226 / var(--tw-bg-opacity, 1))
}

.hover\:bg-red-50:hover{
  --tw-bg-opacity:1;
  background-color:rgb(254 242 242 / var(--tw-bg-opacity, 1))
}

.hover\:bg-red-700:hover{
  --tw-bg-opacity:1;
  background-color:rgb(185 28 28 / var(--tw-bg-opacity, 1))
}

.hover\:bg-yellow-50:hover{
  --tw-bg-opacity:1;
  background-color:rgb(254 252 232 / var(--tw-bg-opacity, 1))
}

.hover\:bg-yellow-600:hover{
  --tw-bg-opacity:1;
  background-color:rgb(202 138 4 / var(--tw-bg-opacity, 1))
}

.hover\:text-blue-800:hover{
  --tw-text-opacity:1;
  color:rgb(30 64 175 / var(--tw-text-opacity, 1))
}

.hover\:text-gray-500:hover{
  --tw-text-opacity:1;
  color:rgb(107 114 128 / var(--tw-text-opacity, 1))
}

.hover\:text-gray-600:hover{
  --tw-text-opacity:1;
  color:rgb(75 85 99 / var(--tw-text-opacity, 1))
}

.hover\:text-gray-700:hover{
  --tw-text-opacity:1;
  color:rgb(55 65 81 / var(--tw-text-opacity, 1))
}

.hover\:text-gray-900:hover{
  --tw-text-opacity:1;
  color:rgb(17 24 39 / var(--tw-text-opacity, 1))
}

.hover\:text-green-900:hover{
  --tw-text-opacity:1;
  color:rgb(20 83 45 / var(--tw-text-opacity, 1))
}

.hover\:text-indigo-100:hover{
  --tw-text-opacity:1;
  color:rgb(224 231 255 / var(--tw-text-opacity, 1))
}

.hover\:text-indigo-500:hover{
  --tw-text-opacity:1;
  color:rgb(99 102 241 / var(--tw-text-opacity, 1))
}

.hover\:text-indigo-800:hover{
  --tw-text-opacity:1;
  color:rgb(55 48 163 / var(--tw-text-opacity, 1))
}

.hover\:text-indigo-900:hover{
  --tw-text-opacity:1;
  color:rgb(49 46 129 / var(--tw-text-opacity, 1))
}

.hover\:text-red-500:hover{
  --tw-text-opacity:1;
  color:rgb(239 68 68 / var(--tw-text-opacity, 1))
}

.hover\:text-red-800:hover{
  --tw-text-opacity:1;
  color:rgb(153 27 27 / var(--tw-text-opacity, 1))
}

.hover\:text-white:hover{
  --tw-text-opacity:1;
  color:rgb(255 255 255 / var(--tw-text-opacity, 1))
}

.hover\:text-yellow-700:hover{
  --tw-text-opacity:1;
  color:rgb(161 98 7 / var(--tw-text-opacity, 1))
}

.hover\:text-yellow-900:hover{
  --tw-text-opacity:1;
  color:rgb(113 63 18 / var(--tw-text-opacity, 1))
}

.hover\:underline:hover{
  text-decoration-line:underline
}

.focus\:z-10:focus{
  z-index:10
}

.focus\:border-blue-500:focus{
  --tw-border-opacity:1;
  border-color:rgb(59 130 246 / var(--tw-border-opacity, 1))
}

.focus\:border-indigo-500:focus{
  --tw-border-opacity:1;
  border-color:rgb(99 102 241 / var(--tw-border-opacity, 1))
}

.focus\:border-red-500:focus{
  --tw-border-opacity:1;
  border-color:rgb(239 68 68 / var(--tw-border-opacity, 1))
}

.focus\:placeholder-gray-400:focus::-moz-placeholder{
  --tw-placeholder-opacity:1;
  color:rgb(156 163 175 / var(--tw-placeholder-opacity, 1))
}

.focus\:placeholder-gray-400:focus::placeholder{
  --tw-placeholder-opacity:1;
  color:rgb(156 163 175 / var(--tw-placeholder-opacity, 1))
}

.focus\:outline-none:focus{
  outline:2px solid transparent;
  outline-offset:2px
}

.focus\:ring-1:focus{
  --tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}

.focus\:ring-2:focus{
  --tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}

.focus\:ring-blue-500:focus{
  --tw-ring-opacity:1;
  --tw-ring-color:rgb(59 130 246 / var(--tw-ring-opacity, 1))
}

.focus\:ring-gray-500:focus{
  --tw-ring-opacity:1;
  --tw-ring-color:rgb(107 114 128 / var(--tw-ring-opacity, 1))
}

.focus\:ring-green-500:focus{
  --tw-ring-opacity:1;
  --tw-ring-color:rgb(34 197 94 / var(--tw-ring-opacity, 1))
}

.focus\:ring-indigo-500:focus{
  --tw-ring-opacity:1;
  --tw-ring-color:rgb(99 102 241 / var(--tw-ring-opacity, 1))
}

.focus\:ring-red-500:focus{
  --tw-ring-opacity:1;
  --tw-ring-color:rgb(239 68 68 / var(--tw-ring-opacity, 1))
}

.focus\:ring-offset-2:focus{
  --tw-ring-offset-width:2px
}

.focus\:ring-offset-gray-100:focus{
  --tw-ring-offset-color:#f3f4f6
}

.disabled\:opacity-60:disabled{
  opacity:0.6
}

@media (min-width: 640px){
  .sm\:col-span-1{
    grid-column:span 1 / span 1
  }

  .sm\:col-span-2{
    grid-column:span 2 / span 2
  }

  .sm\:col-span-3{
    grid-column:span 3 / span 3
  }

  .sm\:col-span-4{
    grid-column:span 4 / span 4
  }

  .sm\:col-span-7{
    grid-column:span 7 / span 7
  }

  .sm\:col-span-full{
    grid-column:1 / -1
  }

  .sm\:-mx-6{
    margin-left:-1.5rem;
    margin-right:-1.5rem
  }

  .sm\:mt-0{
    margin-top:0px
  }

  .sm\:inline{
    display:inline
  }

  .sm\:flex{
    display:flex
  }

  .sm\:grid{
    display:grid
  }

  .sm\:w-1\/2{
    width:50%
  }

  .sm\:w-1\/3{
    width:33.333333%
  }

  .sm\:w-1\/4{
    width:25%
  }

  .sm\:w-2\/3{
    width:66.666667%
  }

  .sm\:w-auto{
    width:auto
  }

  .sm\:max-w-md{
    max-width:28rem
  }

  .sm\:flex-1{
    flex:1 1 0%
  }

  .sm\:flex-auto{
    flex:1 1 auto
  }

  .sm\:flex-none{
    flex:none
  }

  .sm\:columns-2{
    -moz-columns:2;
         columns:2
  }

  .sm\:grid-cols-2{
    grid-template-columns:repeat(2, minmax(0, 1fr))
  }

  .sm\:grid-cols-3{
    grid-template-columns:repeat(3, minmax(0, 1fr))
  }

  .sm\:grid-cols-5{
    grid-template-columns:repeat(5, minmax(0, 1fr))
  }

  .sm\:flex-row{
    flex-direction:row
  }

  .sm\:items-center{
    align-items:center
  }

  .sm\:justify-center{
    justify-content:center
  }

  .sm\:justify-between{
    justify-content:space-between
  }

  .sm\:gap-3{
    gap:0.75rem
  }

  .sm\:gap-4{
    gap:1rem
  }

  .sm\:gap-6{
    gap:1.5rem
  }

  .sm\:overflow-hidden{
    overflow:hidden
  }

  .sm\:rounded-md{
    border-radius:0.375rem
  }

  .sm\:border-r{
    border-right-width:1px
  }

  .sm\:p-3{
    padding:0.75rem
  }

  .sm\:p-4{
    padding:1rem
  }

  .sm\:p-6{
    padding:1.5rem
  }

  .sm\:px-2{
    padding-left:0.5rem;
    padding-right:0.5rem
  }

  .sm\:px-6{
    padding-left:1.5rem;
    padding-right:1.5rem
  }

  .sm\:pl-6{
    padding-left:1.5rem
  }

  .sm\:pt-3{
    padding-top:0.75rem
  }

  .sm\:text-lg{
    font-size:1.125rem;
    line-height:1.75rem
  }

  .sm\:text-sm{
    font-size:0.875rem;
    line-height:1.25rem
  }
}

@media (min-width: 768px){
  .md\:w-1\/2{
    width:50%
  }

  .md\:w-1\/3{
    width:33.333333%
  }

  .md\:w-1\/4{
    width:25%
  }

  .md\:w-10\/12{
    width:83.333333%
  }

  .md\:w-3\/4{
    width:75%
  }

  .md\:w-5\/6{
    width:83.333333%
  }

  .md\:grid-cols-2{
    grid-template-columns:repeat(2, minmax(0, 1fr))
  }

  .md\:items-end{
    align-items:flex-end
  }

  .md\:rounded-lg{
    border-radius:0.5rem
  }

  .md\:rounded-none{
    border-radius:0px
  }

  .md\:rounded-l-lg{
    border-top-left-radius:0.5rem;
    border-bottom-left-radius:0.5rem
  }

  .md\:rounded-l-none{
    border-top-left-radius:0px;
    border-bottom-left-radius:0px
  }

  .md\:rounded-r-lg{
    border-top-right-radius:0.5rem;
    border-bottom-right-radius:0.5rem
  }

  .md\:rounded-r-none{
    border-top-right-radius:0px;
    border-bottom-right-radius:0px
  }

  .md\:px-6{
    padding-left:1.5rem;
    padding-right:1.5rem
  }
}

@media (min-width: 1024px){
  .lg\:-mx-8{
    margin-left:-2rem;
    margin-right:-2rem
  }

  .lg\:ml-6{
    margin-left:1.5rem
  }

  .lg\:w-1\/3{
    width:33.333333%
  }

  .lg\:w-1\/4{
    width:25%
  }

  .lg\:w-1\/5{
    width:20%
  }

  .lg\:w-1\/6{
    width:16.666667%
  }

  .lg\:w-11\/12{
    width:91.666667%
  }

  .lg\:w-3\/12{
    width:25%
  }

  .lg\:w-3\/4{
    width:75%
  }

  .lg\:w-4\/5{
    width:80%
  }

  .lg\:w-9\/12{
    width:75%
  }

  .lg\:w-auto{
    width:auto
  }

  .lg\:max-w-xs{
    max-width:20rem
  }

  .lg\:grid-flow-col-dense{
    grid-auto-flow:column dense
  }

  .lg\:grid-cols-3{
    grid-template-columns:repeat(3, minmax(0, 1fr))
  }

  .lg\:grid-cols-4{
    grid-template-columns:repeat(4, minmax(0, 1fr))
  }

  .lg\:flex-row{
    flex-direction:row
  }

  .lg\:items-center{
    align-items:center
  }

  .lg\:justify-end{
    justify-content:flex-end
  }

  .lg\:px-8{
    padding-left:2rem;
    padding-right:2rem
  }
}

@media (min-width: 1280px){
  .xl\:ml-6{
    margin-left:1.5rem
  }

  .xl\:block{
    display:block
  }

  .xl\:hidden{
    display:none
  }

  .xl\:justify-start{
    justify-content:flex-start
  }
}

.\[\&\.active\]\:border-blue-400.active{
  --tw-border-opacity:1;
  border-color:rgb(96 165 250 / var(--tw-border-opacity, 1))
}

.\[\&\.active\]\:bg-blue-100.active{
  --tw-bg-opacity:1;
  background-color:rgb(219 234 254 / var(--tw-bg-opacity, 1))
}